/* Heidelberg macht mobil - Ergaenzungen, die Elementor-Widgetoptionen nicht abdecken.
   Alle Farben kommen aus den Elementor-Global-Farben, damit ein Rebranding
   ueber Site Settings weiterhin durchschlaegt. */

/* --- Voruebergehend ausgeblendete Abschnitte ---------------------------
   Gesetzt ueber "hidden": 1 am Abschnitt in den JSON-Dateien. Der Inhalt
   bleibt vollstaendig erhalten und ist mit einem Neubau wieder da. */
.hmm-hidden {
	display: none !important;
}

/* --- Links im Fliesstext ------------------------------------------------ */
.elementor-widget-text-editor a,
.elementor-widget-icon-list a {
	color: var(--e-global-color-hmmgrndk);
	text-decoration: underline;
	transition: color .2s ease;
}
.elementor-widget-text-editor a:hover,
.elementor-widget-icon-list a:hover {
	color: var(--e-global-color-secondary);
}

/* --- Karten: Anheben und Schatten beim Zeigen --------------------------- */
.hmm-card {
	transition: transform .25s ease, box-shadow .25s ease;
}
.hmm-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(2, 85, 194, .12);
}

/* --- Bilder in Karten: sanfter Zoom ------------------------------------- */
.hmm-card .elementor-widget-image img,
.hmm-zoom img {
	transition: transform .4s ease;
}
.hmm-card:hover .elementor-widget-image img,
.hmm-zoom:hover img {
	transform: scale(1.05);
}
.hmm-card .elementor-widget-image,
.hmm-zoom {
	overflow: hidden;
	border-radius: 10px;
}

/* --- Schriftfarbe der Umriss-Buttons beim Zeigen -----------------------
   Elementor faerbt beim Zeigen nur die Flaeche um, nicht die Schrift.
   Ohne diese Regeln stand weisse Schrift auf hellem Grund und dunkle
   Schrift auf dunklem Grund - beides unlesbar. Werte wie im Entwurf. */
/* wichtig, weil Elementors Seiten-CSS spaeter geladen wird als diese Datei */
.hmm-btn-outline .elementor-button:hover,
.hmm-btn-outline .elementor-button:focus {
	color: #fff !important;
	fill: #fff !important;
}
.hmm-btn-outline-light .elementor-button:hover,
.hmm-btn-outline-light .elementor-button:focus {
	color: var(--e-global-color-primary) !important;
	fill: var(--e-global-color-primary) !important;
}

/* --- Buttons: leichtes Anheben wie im Entwurf --------------------------- */
.elementor-button {
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.elementor-button:hover {
	transform: translateY(-2px);
}

/* --- Sprungziele nicht unter der klebenden Kopfzeile -------------------- */
:where([id]) {
	scroll-margin-top: 110px;
}
html {
	scroll-behavior: smooth;
}

/* --- Zwei-Klick-Karte ---------------------------------------------------
   Einzige Stelle mit HTML-Widget: Elementors google_maps-Widget laedt die
   Karte sofort und wuerde ohne Einwilligung Daten an Google senden. */
.hmm-map {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 14px;
	height: 420px;
	padding: 32px 28px;
	background: #EFF2EC;
	border: 1px solid var(--e-global-color-hmmborde);
	border-radius: 20px;
	line-height: 1.6;
}
.hmm-map svg {
	width: 40px;
	height: 40px;
	color: var(--e-global-color-secondary);
}
.hmm-map h3 {
	margin: 0;
	font-family: var(--e-global-typography-hmmh3-font-family), sans-serif;
	font-weight: var(--e-global-typography-hmmh3-font-weight);
	font-size: var(--e-global-typography-hmmh3-font-size);
	color: var(--e-global-color-primary);
}
.hmm-map p {
	margin: 0;
	max-width: 46ch;
	font-family: var(--e-global-typography-hmmbody-font-family), sans-serif;
	font-size: var(--e-global-typography-hmmbody-font-size);
	color: var(--e-global-color-hmmmuted);
}
.hmm-map .hmm-map-alt {
	font-size: var(--e-global-typography-hmmnote-font-size);
}
.hmm-map button {
	font-family: var(--e-global-typography-hmmbtn-font-family), sans-serif;
	font-weight: var(--e-global-typography-hmmbtn-font-weight);
	font-size: var(--e-global-typography-hmmbtn-font-size);
	color: #fff;
	background: var(--e-global-color-secondary);
	border: 2px solid var(--e-global-color-secondary);
	border-radius: 50px;
	padding: 15px 30px;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.hmm-map button:hover {
	background: var(--e-global-color-hmmgrndk);
	border-color: var(--e-global-color-hmmgrndk);
	transform: translateY(-2px);
}
.hmm-map-frame {
	width: 100%;
	height: 420px;
	border: 0;
	border-radius: 20px;
}

/* --- Klebende Kopfzeile ------------------------------------------------- */
.xpro-theme-builder-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--e-global-color-hmmcream);
	border-bottom: 1px solid var(--e-global-color-hmmborde);
	transition: top .28s ease;
}
body.hmm-brandbar-on .xpro-theme-builder-header {
	top: var(--hmm-brandbar-h, 52px);
}

/* --- Marken-Zeile: faehrt beim Scrollen ein ----------------------------- */
.hmm-brandbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 101;
	padding: 10px 0;
	background: var(--e-global-color-hmmptrlt);
	transform: translateY(-100%);
	transition: transform .28s ease;
}
.hmm-brandbar.is-visible { transform: translateY(0); }
.hmm-brandbar-inner {
	display: flex;
	align-items: baseline;
	gap: 18px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}
.hmm-brandbar-title {
	font-family: var(--e-global-typography-hmmh1-font-family), sans-serif;
	font-weight: 600;
	font-size: 33.8px;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
	text-decoration: none;
}
.hmm-brandbar-title span { color: var(--e-global-color-accent); }
.hmm-brandbar-title:hover { color: var(--e-global-color-accent); }
.hmm-brandbar-title:hover span { color: #fff; }
/* Nicht ueber die Klasse, sondern ueber das Element: Das SVG bringt keine
   eigenen Masse mit und faellt sonst auf die Ersatzhoehe von 150px. */
.hmm-brandbar img,
.hmm-brandbar-symbols {
	height: 24px !important;
	width: auto !important;
	max-width: none;
	flex-shrink: 0;
}

/* --- Feste Leiste am rechten Rand --------------------------------------- */
.hmm-sidebar {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 90;
	display: flex;
	flex-direction: column;
	box-shadow: -2px 0 10px rgba(0, 0, 0, .12);
}
.hmm-sidebar a {
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: filter .15s ease;
}
.hmm-sidebar a svg { width: 24px; height: 24px; }
.hmm-sidebar a:hover { filter: brightness(1.1); }
.hmm-sidebar a:nth-child(1) { background: var(--e-global-color-hmmfbblu); }
.hmm-sidebar a:nth-child(2) { background: var(--e-global-color-hmmigpnk); }
.hmm-sidebar a.hmm-sidebar-top { background: var(--e-global-color-primary); }
.hmm-sidebar a.hmm-sidebar-top:hover { background: var(--e-global-color-secondary); filter: none; }

/* --- Sprung nach oben auf schmalen Bildschirmen ------------------------- */
.hmm-to-top {
	display: none;
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 95;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--e-global-color-primary);
	color: #fff;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}
.hmm-to-top svg { width: 22px; height: 22px; }
.hmm-to-top.is-visible { opacity: 1; visibility: visible; }
.hmm-to-top:hover { background: var(--e-global-color-secondary); }

@media (max-width: 1200px) {
	.hmm-sidebar { display: none; }
	.hmm-to-top { display: flex; }
	.hmm-brandbar-symbols { display: none; }
	.hmm-brandbar-title { font-size: 22.5px; }
}

/* --- Logopaar mit Trennstrich ------------------------------------------
   Wie im Entwurf: 20px Luft, ein feiner Strich, nochmal 20px. Der Strich
   haengt als linke Kante am zweiten Logo, damit kein leeres Element noetig ist. */
.hmm-brand-logos > .elementor-widget-image + .elementor-widget-image {
	border-left: 1px solid var(--e-global-color-hmmborde);
	padding-left: 20px;
}
.hmm-brand-logos > .elementor-widget-image img {
	display: block;
}
.hmm-brand-logos {
	margin-right: 44px;
	flex-shrink: 0;
}
#hmm-header .hmm-social-col,
#hmm-header .hmm-btn-col,
#hmm-header .hmm-burger-col {
	flex-shrink: 0;
}
/* In der Fusszeile steht das Paar auf einer weissen Flaeche, der Strich
   ist dort etwas dunkler und die Logos groesser. */
.hmm-brand-plate {
	margin-right: 0;
}
/* Nur so breit wie die beiden Logos. Sonst steht rechts neben dem schmalen
   EWZ-Logo eine grosse leere weisse Flaeche und der Abstand zur Navigation
   daneben faellt zu klein aus. Die Auswahl muss die mobile Stapelregel
   uebertreffen, die allen Containern 100% aufzwingt. */
#hmm-footer .e-con.e-flex > .e-con.hmm-brand-plate,
#hmm-footer .hmm-brand-plate {
	width: fit-content !important;
	max-width: 100%;
}
.hmm-brand-plate > .elementor-widget-image + .elementor-widget-image {
	border-left-color: #D9E0E3;
}
/* Auch auf schmalen Bildschirmen nebeneinander, nicht gestapelt. */
#hmm-footer .e-con.e-flex > .hmm-brand-logos > .e-con,
#hmm-footer .hmm-brand-logos > .elementor-widget {
	width: auto !important;
}

/* --- Klappmenue auf schmalen Bildschirmen -------------------------------
   Der Entwurf blendet ab 1200px das Menue aus und zeigt stattdessen die
   Social-Symbole und den Menueknopf. Der Termin-Button weicht ab 780px
   ins Klappmenue. */
.hmm-nav-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 8px;
	border: 1px solid var(--e-global-color-hmmborde);
	background: #fff;
	color: var(--e-global-color-primary);
	cursor: pointer;
}
.hmm-nav-toggle svg { width: 22px; height: 22px; }
.hmm-nav-toggle .hmm-icon-close { display: none; }
.hmm-nav-toggle[aria-expanded="true"] .hmm-icon-menu { display: none; }
.hmm-nav-toggle[aria-expanded="true"] .hmm-icon-close { display: block; }

/* Ueber 1200px bleibt alles wie am Schreibtisch */
@media (min-width: 1201px) {
	#hmm-header .hmm-social-col,
	#hmm-header .hmm-burger-col { display: none !important; }
}

@media (max-width: 1200px) {
	#hmm-header .hmm-nav-col { display: none; }

	/* Aufgeklappt legt sich das Menue unter die Kopfzeile */
	.xpro-theme-builder-header.hmm-nav-open #hmm-header .hmm-nav-col {
		display: flex;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto !important;
		z-index: 99;
		padding: 12px 24px 28px;
		background: var(--e-global-color-hmmcream);
		border-bottom: 1px solid var(--e-global-color-hmmborde);
	}
	.xpro-theme-builder-header.hmm-nav-open #hmm-header .hmm-nav-col .elementor-icon-list-items {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.xpro-theme-builder-header.hmm-nav-open #hmm-header .hmm-nav-col .elementor-icon-list-item a {
		display: block;
		width: 100%;
		padding: 12px 4px;
	}
}

/* --- Kopfnavigation ----------------------------------------------------- */
.xpro-theme-builder-header .elementor-widget-icon-list .elementor-icon-list-icon { display: none; }
.xpro-theme-builder-header .elementor-widget-icon-list .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 24px;
}
/* Elementor gibt Eintraegen einer Inline-Liste zusaetzlich 12px links und
   rechts. Zusammen mit dem Abstand oben waren es 48px statt der 24px des
   Entwurfs - dadurch blieb dem Termin-Button so wenig Platz, dass er umbrach. */
.xpro-theme-builder-header .elementor-widget-icon-list .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
	margin-left: 0;
	margin-right: 0;
}
.xpro-theme-builder-header .elementor-widget-icon-list .elementor-icon-list-item a {
	font-family: var(--e-global-typography-hmmnav-font-family), sans-serif;
	font-weight: var(--e-global-typography-hmmnav-font-weight);
	font-size: var(--e-global-typography-hmmnav-font-size);
	color: var(--e-global-color-primary);
	text-decoration: none;
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color .2s ease, border-color .2s ease;
}
.xpro-theme-builder-header .elementor-widget-icon-list .elementor-icon-list-item a:hover {
	color: var(--e-global-color-secondary);
	border-bottom-color: var(--e-global-color-secondary);
}

/* --- Astras Listenformatierung von den Elementor-Menues fernhalten -------
   Auf Unterseiten liegt der Inhalt in einem anderen Astra-Container. Dort
   griffen dessen Regeln fuer Aufzaehlungen: Punkte vor den Menueeintraegen
   und ein Einzug von 48px, der Menue und E-Mail gegenueber den
   Ueberschriften nach rechts verschob. */
.elementor .elementor-widget-icon-list .elementor-icon-list-items,
.elementor .elementor-widget-icon-list .elementor-icon-list-item {
	list-style: none;
	margin: 0;
	padding-inline-start: 0;
}
.elementor .elementor-widget-icon-list .elementor-icon-list-item {
	display: flex;
}
/* Wo das Symbol ausgeblendet ist, darf auch sein Platz nicht bleiben. */
.xpro-theme-builder-header .elementor-widget-icon-list .elementor-icon-list-text,
#xpro-theme-builder-footer .elementor-widget-icon-list .elementor-icon-list-text {
	padding-inline-start: 0;
}

/* --- Symbolreihe im Hero: SVG ohne eigene Masse braucht eine feste Hoehe,
   sonst faellt der Browser auf 150px Ersatzhoehe zurueck. 33px ist die
   Hoehe des Datums-Feldes daneben, damit beide buendig abschliessen. */
#hero img[src$=".svg"] {
	height: 33px;
	width: auto;
	max-width: 100%;
}
@media (max-width: 767px) {
	/* Mit dem E-Auto samt Ladesäule ist die Reihe rund 29 Prozent breiter.
	   Deshalb hier keine feste Hoehe mehr: Sie nimmt die Spaltenbreite und
	   skaliert darunter proportional mit, statt ueberzulaufen. 342px
	   entsprechen den bisherigen 33px Hoehe. */
	#hero img[src$=".svg"] {
		width: 342px;
		max-width: 100%;
		height: auto;
	}
}

/* --- Karten auf gleiche Hoehe ------------------------------------------
   Die aeussere Spalte streckt sich, die Karte darin muss mitziehen.
   Nur Karten: ohne die Klasse traf die Regel jede verschachtelte Reihe.
   Eine gestreckte Spalte umbricht ihre Kinder sonst in weitere Spalten,
   weil Elementor Container auf flex-wrap: wrap stellt. */
.e-con.e-flex > .e-con > .elementor-element.e-con.hmm-card {
	height: 100%;
}

/* --- Bild am Fuss der Karte -------------------------------------------
   Wie im Entwurf: Das Bild wird nach unten geschoben, damit die Bilder
   aller Karten einer Reihe auf einer Linie sitzen, egal wie lang der
   Text darueber ist. */
.hmm-card > .elementor-widget-image:last-child {
	margin-top: auto;
	padding-top: 16px;
}

/* --- Hero-Bild auf Spaltenhoehe ---------------------------------------
   Es soll oben mit dem Fliesstext und unten mit dem letzten Button
   abschliessen. Die Spalte wird durch align-items: stretch gestreckt,
   das Bild muss diese Hoehe uebernehmen statt seiner festen 430px.
   Der Spalte selbst darf dabei keine Hoehe gegeben werden: Eine Prozent-
   angabe gegen eine inhaltsabhaengige Reihe faellt auf auto zurueck und
   haette das Strecken gerade aufgehoben. Stattdessen fuellt das Bild die
   gestreckte Spalte ueber die Flexbox aus.
   Nur am Schreibtisch: Ab Tablet abwaerts liegt das Bild unter dem Text
   und bekommt weiter unten seine eigenen festen Hoehen. */
@media (min-width: 1025px) {
	#hero .hmm-zoom > .elementor-widget-image {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
	}
	#hero .hmm-zoom > .elementor-widget-image img {
		flex: 1 1 auto;
		min-height: 0;
		width: 100%;
		height: 100% !important;
		object-fit: cover;
	}
	/* Das Karussell bringt eine eigene, aus dem Seitenverhaeltnis abgeleitete
	   Hoehe mit und wuerde damit die ganze Reihe auseinanderziehen. Deshalb
	   liegt es hier ausserhalb des Hoehenflusses und fuellt nur die Spalte,
	   die der Text daneben vorgibt. */
	#hero .hmm-zoom {
		position: relative;
	}
	#hero .hmm-zoom > .elementor-widget-image-carousel {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
	}
	#hero .hmm-zoom > .elementor-widget-image-carousel > .elementor-widget-container,
	#hero .hmm-slider .elementor-image-carousel-wrapper,
	#hero .hmm-slider .swiper {
		height: 100%;
	}
}

/* --- Hero-Slider --------------------------------------------------------
   Das Karussell tritt an die Stelle des fruehreren Einzelbildes und muss
   sich genauso verhalten: volle Spaltenhoehe, gleicher Ausschnitt, gleiche
   Rundung. Elementors Karussell bringt eigene Hoehen mit, die hier auf die
   Spalte umgestellt werden. */
.hmm-slider,
.hmm-slider .elementor-image-carousel-wrapper,
.hmm-slider .swiper,
.hmm-slider .swiper-wrapper,
.hmm-slider .swiper-slide,
.hmm-slider .swiper-slide-inner {
	height: 100%;
}
.hmm-slider .swiper-slide {
	display: flex;
}
.hmm-slider .swiper-slide-inner {
	position: relative;
	width: 100%;
	margin: 0;
}
.hmm-slider img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
/* Beim Ueberblenden liegen zwei Folien uebereinander. */
.hmm-slider .swiper-slide {
	transition-property: opacity;
}

/* Die Urheberangabe selbst bleibt verborgen - sichtbar wird sie erst
   ueber das Copyright-Zeichen. */
.hmm-slider .elementor-image-carousel-caption {
	display: none;
}

/* Das E-Scooter-Bild ist hochformatig, die Hero-Flaeche breit. Damit vom
   Kopf (ab y=144) bis zum Vorderrad (bis y=1090) alles hineinpasst, wurde
   die Leinwand seitlich um je 80px verbreitert - der unscharfe Rand ist
   dort gespiegelt und weichgezeichnet. Standard ist der kopfnahe
   Ausschnitt, der auf Handy und Tablet gilt. */
/* Grundwert fuer das Tablet: Dort ist die Flaeche mit 705x300 am
   flachsten, sichtbar sind nur rund 494px Bildhoehe. */
.hmm-slider img[src*="hero-pixabay-surprising-media"] {
	object-position: 50% 18%;
}
/* Auf dem Handy ist mehr Hoehe sichtbar - der Ausschnitt darf tiefer
   ansetzen, dann steht weniger Baum ueber dem Kopf. */
@media (max-width: 767px) {
	.hmm-slider img[src*="hero-pixabay-surprising-media"] {
		object-position: 50% 25%;
	}
}
/* Am Schreibtisch ist die Flaeche hoch genug fuer Kopf UND Vorderrad. */
@media (min-width: 1025px) {
	.hmm-slider img[src*="hero-pixabay-surprising-media"] {
		object-position: 50% 61%;
	}
}

/* Bezugsrahmen fuer Zeichen und Angabe: das Karussell selbst. Beide
   liegen daneben, nicht in einer Folie - siehe hmm-site.js. */
.hmm-slider {
	position: relative;
}

/* Copyright-Zeichen unten rechts im Bild */
.hmm-credit-btn {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 5;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .62);
	color: #fff;
	font-family: var(--e-global-typography-hmmbody-font-family), sans-serif;
	font-size: 18px;
	line-height: 30px;
	text-align: center;
	cursor: pointer;
	transition: background-color .2s ease;
}
.hmm-credit-btn:hover,
.hmm-credit-btn[aria-expanded="true"] {
	background: rgba(0, 0, 0, .85);
}

/* Eingeblendete Angabe, ebenfalls unten rechts */
.hmm-credit-text {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 4;
	max-width: calc(100% - 24px);
	padding: 7px 44px 7px 12px;
	border-radius: 15px;
	background: rgba(0, 0, 0, .62);
	color: #fff;
	font-family: var(--e-global-typography-hmmnote-font-family), sans-serif;
	font-size: 12px;
	line-height: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}
.hmm-credit-text.is-visible {
	opacity: 1;
	visibility: visible;
}

/* --- Tablet und darunter ------------------------------------------------ */
@media (max-width: 1024px) {
	/* Kopfzeile: Logos und Button in einer Zeile, Menue darunter zentriert.
	   Vorher lag der Button ueber den Menueeintraegen. */
	.xpro-theme-builder-header .e-con-inner > .e-con,
	.xpro-theme-builder-header > .e-con > .e-con {
		align-items: center;
	}
	.xpro-theme-builder-header .elementor-widget-icon-list .elementor-icon-list-items {
		justify-content: center;
		gap: 2px 18px;
	}
	/* Nur das Hero-Foto, nicht die Symbolreihe */
	#hero .hmm-zoom img {
		height: 300px !important;
		object-fit: cover;
	}

	/* Sprungziele: Kopfzeile rund 70px plus Marken-Zeile 40px. */
	:where([id]) {
		scroll-margin-top: 125px;
	}
}

/* Ab hier wird es zu eng fuer den Termin-Button neben den Logos - er
   wandert ins Klappmenue, wie im Entwurf. */
@media (max-width: 780px) {
	#hmm-header .hmm-btn-col { display: none; }
	.xpro-theme-builder-header.hmm-nav-open #hmm-header .hmm-btn-col {
		display: flex;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto !important;
		z-index: 99;
		padding: 0 24px 24px;
		background: var(--e-global-color-hmmcream);
		border-bottom: 1px solid var(--e-global-color-hmmborde);
		margin-top: var(--hmm-nav-h, 0px);
		justify-content: flex-start;
	}
}

@media (max-width: 767px) {
	#hero .hmm-zoom img {
		height: 220px !important;
	}
	.hmm-brandbar-inner { padding: 0 16px; }
}

/* --- Grusswort: Ausschnitt und Hoehe -----------------------------------
   Das Foto des Klimabuergermeisters ist Querformat (1280x853), der Rahmen
   hochkant. object-fit:cover zeigt deshalb nur rund 41 Prozent der
   Bildbreite. Das Gesicht sitzt bei rund 73 Prozent - mittig beschnitten
   faellt er aus dem Bild, deshalb wandert der Ausschnitt nach rechts.

   Die Regel hing frueher an #grusswort und galt damit nur auf der
   Startseite. Auf der Vorschauseite heisst der Abschnitt anders; dort
   wurde das Foto gestreckt, ohne den Ausschnitt mitzunehmen, und der
   Klimabuergermeister verschwand rechts aus dem Bild. Jetzt haengt sie an
   .hmm-portraet und gilt ueberall, wo dieses Foto so gerahmt wird. */
.hmm-portraet img[src*="rsl-klimabuergermeister"] {
	/* Querformat 1280x853 im hochkanten Rahmen. */
	object-position: 75% 25% !important;
}

.hmm-portraet img[src*="ob-wuerzner"] {
	/* Hochformat 720x900, Gesicht im oberen Mitteldrittel. */
	object-position: 50% 20% !important;
}

/* Nebeneinander soll das Foto oben mit dem Zitat und unten mit "Heidelbergs
   Klimabuergermeister" abschliessen. Der Text ist hoeher als die 270px des
   Fotos, also waechst das Foto mit. Die Bildunterschrift wird dafuer aus dem
   Hoehenfluss genommen und haengt darunter. */
@media (min-width: 1025px) {
	.hmm-portraet {
		position: relative;
		align-self: stretch;
	}
	.hmm-portraet > .elementor-widget-image {
		display: flex;
		flex: 1 1 auto;
		min-height: 0;
	}
	.hmm-portraet > .elementor-widget-image img {
		width: 100%;
		height: 100% !important;
		object-fit: cover;
	}
	.hmm-portraet > .elementor-widget-text-editor {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
	}
	/* Platz fuer die herausgeloeste Bildunterschrift unter der Reihe. */
	.hmm-grusswort-reihe {
		margin-bottom: 56px;
	}
}

/* --- Grusswort-Foto hochkant halten ------------------------------------
   Sobald die Spalten untereinander liegen, wuerde das Foto auf volle
   Breite gehen und bei 220px Hoehe den Kopf abschneiden. Im Entwurf ist
   es dort 180 breit und 220 hoch. */
@media (max-width: 1024px) {
	.hmm-portraet .elementor-widget-image img {
		width: 180px !important;
		height: 220px !important;
		object-fit: cover;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}

/* --- Aufzaehlungszeichen an der ersten Textzeile ausrichten -------------
   Elementor zentriert das Symbol sonst ueber den gesamten Eintrag. */
.elementor-widget-icon-list .elementor-icon-list-item {
	align-items: flex-start;
}
.elementor-widget-icon-list .elementor-icon-list-icon {
	align-self: flex-start;
	margin-top: 0.5em;
	line-height: 1;
}

/* --- Footer: keine Symbole vor Navigation und Kontakt ------------------- */
#xpro-theme-builder-footer .elementor-widget-icon-list .elementor-icon-list-icon {
	display: none;
}

/* --- Teilen-Icons in ihren jeweiligen Markenfarben ----------------------
   Elementors eigene Widget-Regel kommt nach diesem Stylesheet, daher wichtig. */
#mitmachen .elementor-social-icon-facebook-f { background-color: var(--e-global-color-hmmfbblu) !important; }
#mitmachen .elementor-social-icon-whatsapp   { background-color: #25D366 !important; }
#mitmachen .elementor-social-icon-envelope   { background-color: var(--e-global-color-hmmterra) !important; }
#mitmachen .elementor-social-icon-instagram  { background-color: var(--e-global-color-hmmigpnk) !important; }
#mitmachen .elementor-social-icon:hover { filter: brightness(1.1); }

/* --- "Mit Unterstuetzung des" mittig zum Logo --------------------------
   Der Absatz bringt vom Theme einen Aussenabstand nach unten mit. Dadurch
   war seine Box hoeher als der Text und die Mitte verrutschte gegenueber
   dem Logo. */
.hmm-supporter .elementor-widget-text-editor p {
	margin-bottom: 0;
}

/* --- Abschluss-Bereich --------------------------------------------------
   Abstand und Ausrichtung der beiden Buttons kommen jetzt aus der Reihe
   selbst (justify + gap in home-c.json). Die frueheren Ausgleichsregeln
   hier - Aussenabstand unten, row-gap 0 und margin:auto je Button -
   haben das Paar auseinandergezogen und sind deshalb entfallen. */

/* --- Kacheln so lange wie moeglich nebeneinander -----------------------
   Wie im Entwurf regelt die Flexbox das Umbrechen selbst: Jede Kachel
   darf bis auf 160px schrumpfen, erst darunter rutscht sie in eine
   eigene Zeile. Dadurch bleiben auf dem Handy zwei nebeneinander und die
   Bilder behalten ihre Hoehe. */
.hmm-tile {
	/* wichtig, weil Elementor allen Containern flex: 0 1 auto gibt */
	flex: 1 1 160px !important;
	min-width: 160px;
}
@media (max-width: 767px) {
	/* Muss die allgemeine Stapelregel weiter unten ueberstimmen. */
	.elementor .e-con.e-flex > .e-con.hmm-tile {
		width: auto !important;
		padding-bottom: 0 !important;
	}
	/* Bei zwei Kacheln nebeneinander bleibt sonst kaum Platz fuer den Text. */
	.hmm-tile .hmm-card {
		padding: 22px 18px !important;
	}
	/* Sobald die Kacheln untereinander stehen, werden die Bilder flacher.
	   Der Ausschnitt wandert nach oben, damit Koepfe nicht abgeschnitten
	   werden - dieselbe Loesung wie beim Grusswort-Foto im Entwurf. */
	.hmm-tile .hmm-card .elementor-widget-image img {
		object-position: 50% 25% !important;
	}
}

/* --- Fusszeile bricht stufenweise um ------------------------------------
   Statt sofort alles untereinander: erst drei Spalten, dann zwei, dann
   eine. Die Werte stammen aus dem Entwurf. */
@media (max-width: 1024px) {
	#hmm-footer .hmm-foot-row {
		gap: 32px 48px;
	}
	#hmm-footer .hmm-foot-brand {
		flex: 1 1 280px;
	}
	#hmm-footer .hmm-foot-col {
		flex: 0 1 200px;
		min-width: 160px;
	}
	.elementor .e-con.e-flex > .e-con.hmm-foot-brand,
	.elementor .e-con.e-flex > .e-con.hmm-foot-col {
		width: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* --- Mobil ------------------------------------------------------------- */
@media (max-width: 767px) {
	/* Mit dem Klappmenue ist die Kopfzeile nur noch rund 70px hoch und darf
	   deshalb wieder kleben. Sprungziele muessen Kopfzeile und Marken-Zeile
	   zusammen freihalten. */
	:where([id]) {
		scroll-margin-top: 118px;
	}

	/* Logopaar in der Kopfzeile wie im Entwurf: kleiner, engerer Trennstrich.
	   In der Fusszeile bleiben sie auf der weissen Flaeche gross. */
	#hmm-header .hmm-brand-logos { gap: 10px !important; }
	#hmm-header .hmm-brand-logos > .elementor-widget-image img {
		height: 36px !important;
		width: auto !important;
	}
	#hmm-header .hmm-brand-logos > .elementor-widget-image + .elementor-widget-image {
		padding-left: 10px;
	}

	/* Social-Symbole wie im Entwurf: 30px, damit die Kopfzeile flach bleibt */
	#hmm-header .hmm-social-col .elementor-social-icon {
		width: 30px;
		height: 30px;
		padding: 0;
		font-size: 15px;
	}

	/* Lange Komposita wie "Veranstaltungsprogramm" passen sonst nicht in
	   die Zeile und ragen aus ihrem Kasten. Die Seite ist auf lang="de"
	   gestellt, der Browser trennt also nach deutschen Regeln. */
	.elementor h1,
	.elementor h2,
	.elementor h3,
	.elementor h4,
	.elementor p,
	.elementor .elementor-icon-box-title,
	.elementor .elementor-icon-box-description {
		overflow-wrap: break-word;
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	/* Alle mehrspaltigen Reihen untereinander */
	.elementor .e-con.e-flex > .e-con { width: 100% !important; }
	/* Ausser in der Kopfzeile: Logos, Social-Symbole und Menueknopf sollen
	   dort nebeneinander in einer Zeile bleiben. */
	#hmm-header .e-con.e-flex > .e-con { width: auto !important; }
	/* Ausser den Eckdaten-Pillen und den Bildpaaren, die nebeneinander bleiben */
	#hero .e-con.e-flex > .e-con:has(> .elementor-widget-icon-box) { width: auto !important; }
	#anfahrt .hmm-zoom { width: 50% !important; }

	.hmm-brandbar-title { font-size: 20px; }
	.hmm-brandbar { padding: 8px 0; }

	/* Programmkarten: Zeitangabe, Text und Bild untereinander */
	#programm .elementor-widget-image img { height: 200px !important; }

	/* Buttons volle Breite, damit nichts ueberlappt */
	#hero .elementor-widget-button .elementor-button,
	#mitmachen .elementor-widget-button .elementor-button {
		width: 100%;
		justify-content: center;
	}
	#hero .elementor-widget-button,
	#mitmachen .elementor-widget-button { width: 100% !important; max-width: none !important; }
}

/* --- Footer-Links ------------------------------------------------------- */
#xpro-theme-builder-footer a { text-decoration: none; }
#xpro-theme-builder-footer .elementor-widget-text-editor a {
	color: var(--e-global-color-hmmcream);
	text-decoration: none;
}
#xpro-theme-builder-footer .elementor-widget-text-editor a:hover,
#xpro-theme-builder-footer .elementor-icon-list-item:hover a,
#xpro-theme-builder-footer .elementor-icon-list-item:hover .elementor-icon-list-text {
	color: var(--e-global-color-accent);
}
/* Auch die Social-Symbole in der Fusszeile wechseln auf Gruen, wie im Entwurf. */
#xpro-theme-builder-footer .elementor-social-icon:hover {
	background-color: var(--e-global-color-accent);
	color: var(--e-global-color-primary);
}

/* --- Astra soll den Inhalt nicht einengen ------------------------------- */
.ast-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
#content .ast-container > .elementor {
	width: 100%;
}

/* --- PLAKAT-KONTRAST: Schriftfarbe auf Plakatgruen ----------------------
   Weisse Schrift auf dem Plakatgruen #3DB305 erreicht nur 2,8:1. Auf dem
   Plakat traegt das, weil die Schrift dort riesig ist; ein Button mit 16px
   nicht.

   Die Schriftfarbe dreht deshalb mit dem Grund mit:
     Ruhe    #3DB305 hell   -> dunkles Blau #06305F = 4,8:1
     Zeigen  #2C8104 dunkel -> Weiss                = 4,9:1
   Nur eine der beiden Farben zu setzen bricht den jeweils anderen Zustand:
   dunkle Schrift auf dem dunklen Gruen waere 2,7:1.

   !important, weil post-37.css nach dieser Datei geladen wird und die
   Schriftfarbe dort fest auf #FFFFFF steht. */
.hmm-btn-primary .elementor-button {
	color: #06305F !important;
	fill: #06305F !important;
}
.hmm-btn-primary .elementor-button:hover,
.hmm-btn-primary .elementor-button:focus {
	color: #FFFFFF !important;
	fill: #FFFFFF !important;
}

/* Der Kartenknopf ist eigenes Markup, dieselbe Umkehr. */
.hmm-map button { color: #06305F; }
.hmm-map button:hover { color: #FFFFFF; }

/* Pfeilsymbole: Weiss auf Gruen erreicht 2,8:1, Symbole brauchen 3:1. */
.hmm-sidebar a.hmm-sidebar-top:hover,
.hmm-to-top:hover { color: #06305F; }

/* --- PLAKAT-UMBRUCH: Kachelueberschriften bei 390px ---------------------
   In der Kachel steht das Symbol neben dem Text, der Ueberschrift bleiben
   deshalb nur 126px der 163px Kachelbreite. "Testfahrbereich" misst in
   Fredoka 130px und steht damit 4px ueber - als einzige der 31
   Ueberschriften der Seite. Wo der Browser keine deutschen Trennmuster
   mitbringt, bricht das Wort ohne Trennstrich und laesst ein einzelnes
   "h" auf der zweiten Zeile stehen.

   1.25rem -> 1.15rem schliesst die Luecke mit rund 6px Reserve. Drei
   Prozent waren zu knapp: das Wort landete auf 126px bei 126px Platz und
   brach weiterhin. Reserve ist noetig, weil Schriftmetriken je nach Geraet
   um Bruchteile abweichen. Der Schritt ist eng gefasst: nur
   Symbolkasten-Titel in Kacheln, nur bis 400px. Die Titel der
   Verpflegungskacheln bleiben unangetastet, sie passen.

   Der Titel ist ein Symbolkasten (.elementor-icon-box-title), keine
   Ueberschrift (.elementor-heading-title) - der naheliegende Selektor
   greift hier nicht.

   !important, weil post-37.css die Groesse mit hoher Spezifitaet ueber
   --e-global-typography-hmmh3-font-size setzt und spaeter geladen wird.

   Zum Vergleich: in Poppins waren es 147px, also 21px Ueberstand. Der
   Schriftwechsel hat den Fall bereits deutlich entschaerft. */
@media (max-width: 400px) {
	.hmm-tile .elementor-icon-box-title {
		font-size: 1.15rem !important;
	}
}

/* --- GRUSSWORT-BRIEF ----------------------------------------------------
   Der Brief liegt auf einer eigenen Unterseite und ist wie ein Schreiben
   aufgebaut: Stadtlogo oben, Portraet links, Unterschrift am Fuss.

   Die Regeln sind wirkungslos, solange die Seite ein Entwurf ist. */
.hmm-brief .elementor-widget-image img {
	display: block;
}
/* Das Foto behaelt sein Hochformat, auch wenn die Spalte schmaler wird. */
.hmm-brief-foto .elementor-widget-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 20%;
}
/* Untereinander soll das Foto nicht die volle Breite einnehmen. */
@media (max-width: 1024px) {
	.hmm-brief-foto .elementor-widget-image img {
		width: 200px !important;
		margin-left: auto;
		margin-right: auto;
	}
	.hmm-brief-foto .elementor-widget-text-editor {
		text-align: center;
	}
}

/* --- PALETTE-LINKS ------------------------------------------------------
   Textlinks im Inhalt liefen auf dem Astra-Standardblau #046BD2 - eine
   Farbe, die in der Palette nicht vorkommt und neben Himmelblau und
   tiefem Blau als dritter Blauton auffiel.

   Sie tragen jetzt das dunkle Plakatgruen: 5,55:1 auf Weiss. Betroffen
   waren unter anderem "rnv-online.de", "Datenschutzerklaerung" und der
   Ausweichlink der Karte. */
.elementor-widget-text-editor a,
.elementor-icon-box-description a,
.hmm-map-alt a,
.entry-content a:not(.elementor-button) {
	color: var(--e-global-color-hmmgrndk);
	text-decoration-color: currentColor;
}
.elementor-widget-text-editor a:hover,
.elementor-icon-box-description a:hover,
.hmm-map-alt a:hover,
.entry-content a:not(.elementor-button):hover {
	color: var(--e-global-color-primary);
}

/* Die Unterschrift steht mittig unter dem Brieftext, wie im Original.
   Noetig, weil die Regel oben den Bildern display:block gibt - und
   text-align ein Blockelement nicht mittig setzen kann. Dafuer braucht es
   automatische Seitenabstaende. */
.hmm-brief-signatur .elementor-widget-image img {
	margin-left: auto;
	margin-right: auto;
}

/* --- FUSSZEILE-ZEIGEZUSTAND -------------------------------------------
   Die Fusszeile steht jetzt auf dem helleren Himmelblau #0A4585. Das
   Plakatgruen erreicht darauf 3,47:1 - genug fuer Grosstext, zu wenig
   fuer Links in Textgroesse (4,5:1).

   Die Links bleiben deshalb beim Zeigen weiss und bekommen stattdessen
   eine Unterstreichung. Das ist ohnehin der verlaesslichere Hinweis, weil
   er nicht allein auf Farbe beruht. */
#xpro-theme-builder-footer .elementor-widget-text-editor a:hover,
#xpro-theme-builder-footer .elementor-icon-list-item:hover a,
#xpro-theme-builder-footer .elementor-icon-list-item:hover .elementor-icon-list-text {
	color: var(--e-global-color-hmmwhite);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- KLEINES GRUEN AUF DUNKLEM BLAU -------------------------------------
   Das Plakatgruen #3DB305 erreicht auf dem Hero-Blau #0A4585 nur 3,47:1.
   Das genuegt fuer Grosstext (ab 24px, Schwelle 3:1), nicht fuer Zeilen in
   Text- oder Buttongroesse - dort sind 4,5:1 gefordert. #5CD40F erreicht
   4,94:1.

   Der Wert steht bewusst hier und nicht in der Palette: er ist kein
   eigener Gestaltungston, sondern die Aufhellung des Plakatgruens fuer
   genau eine Lage - kleine gruene Schrift auf dunklem Blau. Zwei Stellen
   brauchen ihn: das Datumsschild im Hero und das "mobil" der
   Markenleiste, die beim Scrollen erscheint (dort 20px auf schmalen
   Bildschirmen).

   Wer den Hero-Grund aendert, muss diesen Wert nachrechnen. */
:root {
	--hmm-gruen-hell: #5CD40F;
}

/* Das "mobil" der Markenleiste - bei 20px reicht das Plakatgruen nicht. */
.hmm-brandbar-title span,
.hmm-brandbar-title:hover {
	color: var(--hmm-gruen-hell) !important;
}

/* --- DATUMSSCHILD im Hero ----------------------------------------------
   Sieht aus wie die Umriss-Buttons darunter, traegt aber gruene Schrift. */
.hmm-datumsschild {
	background-color: transparent !important;
	border: 2px solid rgba(255, 255, 255, 0.5);
	/* !important, weil der Uebersetzer am Eyebrow fest 40px setzt und
	   Elementors Regel spaeter geladen wird. 50px wie bei den Buttons. */
	border-radius: 50px !important;
	padding: 13px 26px !important;
}
.hmm-datumsschild .elementor-heading-title {
	color: var(--hmm-gruen-hell) !important;
}

/* --- BRIEF-LOGO ---------------------------------------------------------
   Das Stadtlogo steht auf breiten Schirmen in der Textspalte, damit seine
   Oberkante mit der des Portraets abschliesst. Sobald die Spalten
   untereinander rutschen, stuende es dort aber UNTER dem Foto - auf einem
   Brief gehoert der Briefkopf nach oben.

   Deshalb liegt es zweimal im Aufbau, und je nach Breite ist genau eines
   sichtbar. Das ausgeblendete faellt mit display:none auch aus dem
   Vorlesefluss, es wird also nicht doppelt angesagt. */
@media (max-width: 1024px) {
	.hmm-brief-logo-breit { display: none; }
}
@media (min-width: 1025px) {
	.hmm-brief-logo-schmal { display: none; }
}

/* --- OB-Kartenfoto auf schmalen Schirmen --------------------------------
   Die Nachbarkarte haelt ihr Foto ueber .hmm-portraet hochkant. Diese
   Karte nutzt die Klasse bewusst nicht, weil sie auf breiten Schirmen das
   Foto auf die Texthoehe strecken wuerde - bei zwei Absaetzen waeren das
   771px. Sie braucht die Hochkant-Sicherung fuer schmale Schirme aber
   trotzdem, sonst zieht das Bild auf volle Spaltenbreite (308x220) und
   zeigt einen liegenden Ausschnitt eines Hochformats. */
@media (max-width: 1024px) {
	.hmm-portraet-ob .elementor-widget-image img {
		width: 180px !important;
		height: 220px !important;
		object-fit: cover;
		object-position: 50% 20% !important;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}


/* --- NACHTRAG-2026-09-15 ------------------------------------------
   Verpflegung hat sechs Kacheln. Mit der allgemeinen Kachelbreite von
   160px stuenden am Rechner alle sechs schmal in einer Reihe. Ab Tablet
   deshalb breiter: drei nebeneinander am Rechner, zwei am Tablet. Auf dem
   Handy bleibt es bei zwei nebeneinander. */
@media (min-width: 768px) {
	#verpflegung .hmm-tile {
		flex-basis: 290px !important;
	}
}
/* Coffee Bike ist Hochformat im liegenden Rahmen. Kopf bei 22-41 Prozent
   der Bildhoehe, der Ausschnitt bleibt deshalb im oberen Drittel. */
.hmm-tile .hmm-card .elementor-widget-image img[src*="coffee-bike-altstadtgemeinde"] {
	object-position: 50% 25% !important;
}
/* Radcheck: Am Tablet wird das Bild sehr flach beschnitten, der Kopf des
   Mechanikers liegt bei 14 Prozent der Hoehe. */
.hmm-zoom img[src*="radcheck-radkultur"] {
	object-position: 50% 15% !important;
}
/* Klimazeitstrahl: Hochformat, am Tablet sind nur rund 23 Prozent der
   Hoehe sichtbar. Der Ausschnitt zeigt die Mitte der Bahn mit Text und
   Jahreszahlen. */
.hmm-zoom img[src*="klimazeitstrahl-parents-for-future"] {
	object-position: 50% 55% !important;
}


/* --- NACHTRAG-2026-09-16 ------------------------------------------
   Beschreibung unter dem Vortrag um 15:00 Uhr buendig zum Listentext.
   Gemessen: Der Text neben dem Punkt beginnt 19px weiter rechts als ein
   normaler Absatz, am Rechner wie am Handy. Erkannt wird der Absatz an
   seinem Link, damit kein anderer Absatz mitrutscht. Browser ohne :has()
   zeigen ihn wie bisher ohne Einzug. */
#programm .elementor-widget-text-editor:has(a[href*="climate-action.heigit.org"]) p {
	padding-left: 19px;
}


/* --- STANDPLAN-2026-09-16 ----------------------------------------------
   Plan mit Copyright-Zeichen und Legende im Abschnitt Anfahrt. Zeichen und
   Angabe nutzen die Klassen des Hero-Sliders (hmm-credit-btn/-text), damit
   beide gleich aussehen. Die Liste braucht !important gegen Astras
   Listenformate. */
.hmm-plan {
	margin: 0;
}
.hmm-plan-bild {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--e-global-color-hmmborde);
	border-radius: 10px;
}
.hmm-plan-bild img {
	display: block;
	width: 100%;
	height: auto;
}
/* Im Hero wird die Angabe mit "..." gekuerzt. Hier steht ein Link darin,
   der auf dem Handy (Bild 298px breit) sonst abgeschnitten waere. */
.hmm-plan .hmm-credit-text {
	white-space: normal;
	overflow: visible;
}
.hmm-plan .hmm-credit-text a {
	color: #fff;
	text-decoration: underline;
}
.hmm-plan-gross {
	margin: 10px 0 0 !important;
	text-align: right;
	font-size: 14px;
}
.hmm-plan-gross a {
	font-weight: 600;
}
.hmm-legende {
	margin: 24px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	columns: 3 250px;
	column-gap: 32px;
}
.hmm-legende li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 12px !important;
	padding: 0 !important;
	break-inside: avoid;
	line-height: 1.4;
}
.hmm-legende li::before {
	content: none !important;
}
.hmm-nr {
	flex: 0 0 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 2px solid var(--e-global-color-primary);
	border-radius: 6px;
	background: #fff;
	color: var(--e-global-color-primary);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}
.hmm-nr-rund {
	border-radius: 50%;
}
.hmm-nr-gestrichelt {
	border-style: dashed;
}
.hmm-legende-text {
	padding-top: 4px;
	color: var(--e-global-color-text);
}
/* Die Karte hebt sich beim Zeigen nicht an - beim Lesen des Plans stoert das. */
.hmm-card:has(.hmm-plan):hover {
	transform: none;
	box-shadow: none;
}

/* --- ABSTAENDE-2026-09-17 ---------------------------------------------
   Das Theme gibt jedem Absatz 28px Aussenabstand nach unten. Der kam in
   den Programmkarten zu den eingestellten Abstaenden hinzu: Titel einer
   Ausstellung -> Text 32px statt 4px, zwei Absaetze 40px statt 12px.
   Ab jetzt gelten nur die Werte aus home-b.json. */
#programm .hmm-card .elementor-widget-text-editor p:last-child {
	margin-bottom: 0 !important;
}


/* --- FRAGEN-2026-09-17 --------------------------------------------------
   1. Veranstalter: Die beiden Logos sind verschieden hoch (200x68 und
      110x84). Dadurch begannen die Texte 16px versetzt. Gleicher
      Hoehenrahmen fuer beide, Logo darin mittig.
   2. Haeufige Fragen: Aufklapper aus <details>/<summary>, ohne JavaScript.
      Der Abschnitt ist mittig gesetzt, der Fragentext bleibt linksbuendig. */
#veranstalter .hmm-card > .elementor-widget-image {
	display: flex;
	align-items: center;
	min-height: 84px;
}
.hmm-faq {
	text-align: left;
}
.hmm-faq-item {
	margin-bottom: 12px;
	border: 1px solid var(--e-global-color-hmmborde);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
}
.hmm-faq-item:last-child {
	margin-bottom: 0;
}
.hmm-faq-frage {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-hmmbtn-font-family), sans-serif;
	font-weight: 600;
	line-height: 1.45;
	list-style: none;
}
/* Das Standard-Dreieck der Browser weg - wir zeichnen ein eigenes Zeichen. */
.hmm-faq-frage::-webkit-details-marker {
	display: none;
}
.hmm-faq-frage::marker {
	content: "";
}
.hmm-faq-frage:hover {
	color: var(--e-global-color-hmmgrndk);
}
.hmm-faq-zeichen {
	flex: 0 0 22px;
	position: relative;
	height: 22px;
	margin-top: 1px;
}
.hmm-faq-zeichen::before,
.hmm-faq-zeichen::after {
	content: "";
	position: absolute;
	top: 10px;
	left: 3px;
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .2s ease;
}
.hmm-faq-zeichen::after {
	transform: rotate(90deg);
}
.hmm-faq-item[open] .hmm-faq-zeichen::after {
	transform: rotate(0deg);
}
.hmm-faq-antwort {
	padding: 0 22px 20px;
	color: var(--e-global-color-hmmmuted);
	line-height: 1.6;
}
.hmm-faq-antwort p {
	margin: 0 !important;
}
.hmm-faq-antwort a {
	color: var(--e-global-color-hmmgrndk);
	font-weight: 600;
	text-decoration: underline;
}
@media (max-width: 767px) {
	.hmm-faq-frage {
		padding: 16px 16px;
	}
	.hmm-faq-antwort {
		padding: 0 16px 18px;
	}
}

/* --- TESTFAHREN-2026-09-18 ---------------------------------------------
   Die Karte "Testfahrbereich" hat jetzt zwei Fotos untereinander.
   1. Abstand: Die Bildspalte ist ein Flex-Container, Elementor setzt ihre
      Luecke in post-37.css auf 0 - ohne diese Regel kleben die beiden
      Fotos aneinander. post-37.css wird nach dieser Datei geladen, darum
      !important. Abgerundete Ecken hat jedes Foto schon aus der Regel
      ".hmm-card .elementor-widget-image".
   2. Bildausschnitt: Das neue Foto ist hochkant (487 x 543), der Rahmen in
      der Karte ist 292 x 200. Sichtbar sind damit nur 61 Prozent der
      Bildhoehe. Bei mittigem Ausschnitt faellt der Kopf des Fahrers heraus
      - der Helm liegt bei 6 Prozent der Bildhoehe. Nachgemessen: 10
      Prozent von oben zeigen Fahrer, beide Kinder und den vorderen Korb. */
#programm .hmm-zoom:has(> .elementor-widget-image + .elementor-widget-image) {
	gap: 12px !important;
}
.hmm-zoom img[src*="e-lastenrad-longtail-kindersitze"] {
	object-position: 50% 10% !important;
}

/* --- KNOEPFE-2026-09-18 -------------------------------------------------
   Rechts unten lagen zwei Nach-oben-Knoepfe uebereinander: unserer
   (a.hmm-to-top, 50x50, Kreis, dunkelblau, z-index 95) und der des
   Astra-Themes (div#ast-scroll-top, 31,5x31,5, Quadrat, #046bd2,
   z-index 99). Nachgemessen bei 390px Breite: unser Kreis liegt bei
   324-374 / 778-828, das Astra-Quadrat bei 329-360 / 783-814 - also
   mittig darauf. Sichtbar blieb ringsum ein 9px breiter Ring.

   1. Der Astra-Knopf wird ausgeblendet. Er ist ein Duplikat; unserer
      gehoert zum Entwurf. Astra blendet ihn per JavaScript mit
      style="display:block" ein - ein Inline-Stil schlaegt jede Regel
      ohne !important, darum steht es hier.
   2. Die Zeigefarbe unseres Knopfes (gruen, --e-global-color-secondary
      = #3DB305, Zeile 247 und die Pfeilfarbe weiter unten) blieb am Handy
      nach einer Beruehrung stehen: Touchgeraete kennen kein "Zeigen" und
      lassen :hover haengen, bis woanders hingetippt wird. Auf Geraeten
      ohne echten Zeiger gilt ab jetzt wieder das normale Aussehen -
      dunkelblau mit weissem Pfeil. Die Regeln oben bleiben unangetastet,
      dieser Block steht spaeter in der Datei und gewinnt damit. */
#ast-scroll-top {
	display: none !important;
}
@media (hover: none) {
	.hmm-to-top:hover {
		background: var(--e-global-color-primary);
		color: #fff;
	}
}