/*
Theme Name: Hello Ellernbruch
Description: Child-Theme von Hello Elementor für www.am-ellernbruch.de, Nachbau der TYPO3-Vorlage fileadmin/templates (2013).
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-ellernbruch
*/

/* ---------- fileadmin/templates/css/style.css ---------- */

* {
	padding: 0px;
	margin: 0px;
	font-family: arial;
}

html {
	height: 101%;
}

.clear {
	clear: both;
}

#wrapper {
	margin: 0px auto;
	width: 1200px;
	position: relative;
	z-index: 25;
}

#header {
	line-height: 80px;
	text-align: center;
	color: #fff;
	border-bottom: 2px solid #494948;
}

#content {
	margin: 50px 0px;
	font-size: 12px;
}


#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
	font-size: 14px;
	padding-bottom: 10px;

}

#content p {
	padding-bottom: 20px;
}

#header span {
	font-weight: normal;
}

#top {
	height: 80px;
	background: #008687;
	width: 100%;
	position: absolute;
	z-index: 20;
	border-bottom: 2px solid #494948;
	box-shadow: 0px 5px 5px #777;
}

#footer {
	line-height: 80px;
	text-align: center;
}

#footer a {
	text-decoration: none;
	color: #fff;
}

#footer a:hover {
	text-decoration: underline;
}

#bottom {
	height: 80px;
	background: #494948;
	width: 100%;
	position: absolute;
	margin-top: -80px;
	z-index: 20;
	box-shadow: 0px 0px 10px #000;
}

/* ---------- fileadmin/templates/css/navi.css ---------- */

#navi  {
	position: absolute;
	margin-top: -2px;
}

#navi ul {
	list-style: none;
}

#navi li {
	display: inline;
}

#navi a {
	color: #fff;
	float: left;
	padding: 0px 20px;
	line-height: 30px;
	margin-right: 10px;
	background: #008687;
	text-decoration: none;
	border-width: 0px 2px 2px 2px;
	border-style: solid;
	border-radius: 0px 0px 10px 10px;
	border-color: #494948;
	box-shadow: 0px 5px 5px #777;
	font-size: 14px;
}

#navi a:hover {
	text-decoration: underline;
}


#navi a.current {
	color: #fff;
	line-height: 50px;
}

/* ---------- fileadmin/templates/css/style_22.css (Startseite, Element c51) ---------- */

.content {
	padding: 1px 0px;
}

#content #c51 h1 {
	font-size: 42px;
	color: #686868;
	padding-bottom: 30px;
}

#content #c51 p {
	font-size: 18px;
}

#content #c51 li {
	font-size: 22px;
}

#content #c51 ul {
	margin-left: 20px;
}

#c51 {
	padding-top: 50px;
	background: url(images/homepage.jpg) 400px 0px no-repeat;
	height: 458px;

}

#content #c51 a {
	text-decoration: none;
	color: #333;
}

#content #c51 a:hover {
	text-decoration: underline;
}

/* ---------- typo3conf/ext/dsl_picturemapper/pi1/template/dsl_picturemapperstyle.css ---------- */

.dsl_picture {
	width: 1200px;
	height: 855px;
}

.tx-dslpicturemapper-pi1 img {
	border: none;
}

.legend td {
	padding: 20px;
}

#legend {
	float: right;
	position: relative;
	border: 1px solid #008687;
	padding: 10px;
	box-shadow: 0px 0px 20px #000;
	z-index: 100;
}

#legend h1{
	text-align: center;
}

.legend .tr-0 .td-0 {
	background: yellow;
}

.legend .tr-1 .td-0 {
	background: red;
}

.legend .tr-last .td-0 {
	background: #05EF1B;
}

#dsl_txt-left {
	width: 290px;
	position: absolute;
	margin-top: 50px;
	font-size: 14px;
	text-align: center;
	z-index: 100;
}

#dsl_txt-left h1{
	font-size: 18px;
}

#dsl_txt-left ul{
	margin: 10px 0px 10px 20px;
}

#dsl_txt-right {
	width: 400px;
	position: absolute;
	margin: 600px 0px 0px 800px;
	font-size: 14px;
	text-align: right;
	z-index: 100;
}

#dsl_txt-right a {
	color: #008687;
	text-decoration: none;
}

#dsl_txt-right a:hover {
	text-decoration: underline;
}

/* ---------- Angleichung an Elementor und den Plan als SVG ---------- */

/* TYPO3 setzte für c51 den Abstand inline (style="margin-top:50px;"). */
#c51 {
	margin-top: 50px;
	box-sizing: content-box;
}

/* Elementor-Container verhalten sich wie die alten <div>: Blockfluss, keine eigenen Abstände.
   :where() hält die Spezifität niedrig, damit die ID-Regeln des alten CSS (#c51, #dsl_txt-left …) gewinnen. */
.content :where(.e-con) {
	display: block;
	padding: 0;
	gap: 0;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}
.content :where(.elementor-widget, .elementor-widget-container) {
	margin: 0;
}
.content :where(.elementor-widget:not(#dsl_txt-left, #dsl_txt-right, #legend)) {
	position: static;
}
.content :where(.elementor-widget-text-editor) {
	color: inherit;
	font-size: inherit;
	line-height: normal;
}
.content :where(#legend) {
	width: auto;
}
/* Elementor nimmt Links die Unterstreichung (.elementor a); die Regeln für #c51 a und #dsl_txt-right a
   sind spezifischer und schalten sie dort wie früher wieder ab. */
.content .elementor a {
	text-decoration: underline;
}

/* Parzellierungsplan: Hintergrundbild, Flächen (wie früher im Canvas mit 50 % Deckkraft), darüber die
   Beschriftungsebene transparent_02.png. Die Flächen nehmen Mauszeiger und Tastatur entgegen. */
/* Wie früher das <div> mit Hintergrundbild läuft der Kasten unter der rechts gefloateten Legende durch;
   ein SVG im Fluss würde ihr ausweichen und darunter rutschen. */
.ell-plan {
	position: relative;
	width: 1200px;
	max-width: 100%;
	aspect-ratio: 1200 / 855;
}
.ell-plan svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.ell-plan polygon {
	fill-opacity: 0.5;
	outline: none;
}
.ell-plan .is-verkauft { fill: #ff0000; }
.ell-plan .is-vorgemerkt { fill: #ffff00; }
.ell-plan .is-frei { fill: #00ff00; }
.ell-plan polygon:focus-visible {
	stroke: #000;
	stroke-width: 2;
}
.ell-plan .overlay {
	pointer-events: none;
}
.ell-plan-tip {
	position: absolute;
	width: 250px;
	height: auto;
	border: 1px solid #000;
	background: #008687;
	background: linear-gradient(to bottom, #008687, #87BB28);
	color: #fff;
	padding: 10px;
	box-shadow: 0px 0px 20px #000;
	z-index: 125;
	font-size: 12px;
	pointer-events: none;
}
.ell-plan-tip[hidden] {
	display: none;
}

/* ---------- Schmale Bildschirme (neu, die alte Seite war fest 1200 px breit) ---------- */

@media (max-width: 1199px) {
	#wrapper {
		width: auto;
		padding: 0 16px;
	}
	/* Die Farbbalken #top/#bottom sind fest 80 px hoch; mobil tragen Kopf und Fuß die Farbe selbst. */
	#top,
	#bottom {
		display: none;
	}
	#header {
		line-height: 1.3;
		margin: 0 -16px;
		padding: 15px 16px;
		min-height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #008687;
		box-shadow: 0px 5px 5px #777;
	}
	#header h1 {
		font-size: clamp(18px, 4.5vw, 32px);
	}
	#navi {
		position: static;
	}
	#navi ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 10px;
	}
	#navi a {
		float: none;
		display: inline-block;
		margin-right: 0;
	}
	#navi a.current {
		line-height: 30px;
		text-decoration: underline;
	}
	#content {
		margin: 30px 0;
	}
	#c51 {
		height: auto;
		margin-top: 0;
		padding-top: 0;
		background-position: right bottom;
		background-size: min(747px, 100%) auto;
		padding-bottom: min(508px, calc((100vw - 32px) * 0.68));
	}
	#content #c51 h1 {
		font-size: clamp(26px, 6vw, 42px);
	}
	/* Reihenfolge mobil: Einleitung, Plan, Legende, Kontakt mit Kompassrose */
	#content #c58 {
		display: flex;
		flex-direction: column;
	}
	#dsl_txt-left { order: 1; }
	#c58 .elementor-widget-shortcode { order: 2; margin-bottom: 20px; }
	#legend { order: 3; align-self: flex-start; }
	#dsl_txt-right { order: 4; }
	#dsl_txt-left,
	#dsl_txt-right {
		position: static;
		width: auto;
		margin: 0 0 20px;
		text-align: left;
	}
	#content #legend {
		float: none;
		display: inline-block;
		margin: 0 0 20px;
	}
	.legend td {
		padding: 8px 20px;
	}
	.dsl_picture {
		width: auto;
		height: auto;
	}
	#footer {
		line-height: 1.3;
		margin: 0 -16px;
		padding: 30px 16px;
		background: #494948;
		box-shadow: 0px 0px 10px #000;
	}
	#footer h1 {
		font-size: 20px;
	}
}