/* ════════════════════════════════════════════════════════════════
   PROJEKT-CSS

   Alles, was Elementor nicht abbilden kann, gehört hierher:
   Animationen, Sticky-Verhalten, Masken, Sonderformen,
   display:contents-Umsortierungen.

   Was Elementor KANN, gehört NICHT hierher, sondern in die
   Elementor-Felder — sonst kann der Kunde im Backend nichts ändern:
   Abstände, Breiten, Ausrichtung, Bildhöhen, Typografie.

   Diese Trennung war die schmerzhafteste Lektion aus dem
   Sonnenhof-Projekt. Siehe BLUEPRINT-Figma-nach-Elementor.md.
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   1 · DESIGN-WERTE
   Stand 14.09.2026. Quelle: Figma-Styleguide 619:11833 und
   Messung im Entwurf 540:2987.

   Farben stehen bewusst NICHT hier — die liegen als Global Colors
   im Elementor-Kit 5 und sind über --e-global-color-* erreichbar.
   Doppelte Haltung führt sonst zum Auseinanderlaufen.
   ════════════════════════════════════════════════════════════════ */

:root {

	/* Schriftfamilien — Adobe Fonts Kit khh1yfz.
	   Amplitude Compressed gibt es nur als Ultra (900). */
	--gap-font-head: "amplitude-compressed", "Arial Narrow", sans-serif;
	--gap-font-body: "early-sans-variable", system-ui, sans-serif;

	/* Abstandsleiter — festgelegt 14.09.2026, vorläufig.
	   Werte aus dem Entwurf werden auf die nächste Stufe gerundet,
	   nicht als Sonderwert übernommen. */
	--gap-space-8:   8px;
	--gap-space-16: 16px;
	--gap-space-24: 24px;
	--gap-space-32: 32px;
	--gap-space-40: 40px;
	--gap-space-56: 56px;
	--gap-space-72: 72px;
	--gap-space-110: 110px;

	/* Radien */
	--gap-radius-sm:  16px;
	--gap-radius-md:  24px;
	--gap-radius-lg:  40px;
	--gap-radius-pill: 999px;

	/* Seitenrand und Inhaltsbreite */
	--gap-gutter: 100px;
	--gap-content: 1240px;

	/* Animation — im ganzen Prototyp einheitlich.
	   152 Interaktionen, ausnahmslos 300 ms / ease-out.
	   Es gibt KEINE scrollabhängigen Animationen. */
	--gap-dur: 300ms;
	--gap-ease: ease-out;
}

@media (max-width: 1024px) { :root { --gap-gutter: 40px; } }
@media (max-width: 767px)  { :root { --gap-gutter: 30px; } }

/* Bewegung nur, wenn gewünscht. */
@media (prefers-reduced-motion: reduce) {
	:root { --gap-dur: 1ms; }
}

.gap-anim { transition: all var(--gap-dur) var(--gap-ease); }


/* ════════════════════════════════════════════════════════════════
   2 · TYPO-ROLLEN, DIE ELEMENTOR NICHT KENNT

   Das Kit deckt H1–H6, Fließtext und Buttons ab — diese Rollen
   nicht. Deshalb hier als Klassen, in derselben Systematik.
   ════════════════════════════════════════════════════════════════ */

.gap-subheadline,
.gap-number-huge, .gap-number-big,
.gap-number-md,   .gap-number-sm {
	font-family: var(--gap-font-head);
	font-weight: 900;
}

.gap-infotext, .gap-infotext-sm, .gap-quote {
	font-family: var(--gap-font-body);
	font-weight: 500;
}

/* Desktop (> 1024) */
.gap-subheadline  { font-size: 30px;   line-height: .90; }
.gap-quote        { font-size: 26px;   line-height: 1.20; }
.gap-infotext     { font-size: 16px;   line-height: 1.20; }
.gap-infotext-sm  { font-size: 12.5px; line-height: 1.20; }
.gap-number-huge  { font-size: 164px;  line-height: 1.00; }
.gap-number-big   { font-size: 82px;   line-height: 1.00; }
.gap-number-md    { font-size: 60px;   line-height: 1.20; }
.gap-number-sm    { font-size: 26px;   line-height: 1.20; }

/* Tablet (<= 1024) — gerechnet, von Ines noch zu bestätigen */
@media (max-width: 1024px) {
	.gap-subheadline  { font-size: 24px;   line-height: .90; }
	.gap-quote        { font-size: 26px;   line-height: 1.15; }
	.gap-infotext     { font-size: 16px;   line-height: 1.20; }
	.gap-infotext-sm  { font-size: 12.5px; line-height: 1.25; }
	.gap-number-huge  { font-size: 120px;  line-height: 1.00; }
	.gap-number-big   { font-size: 66px;   line-height: 1.00; }
	.gap-number-md    { font-size: 46px;   line-height: 1.20; }
	.gap-number-sm    { font-size: 24px;   line-height: 1.20; }
}

/* Mobile (<= 767) */
@media (max-width: 767px) {
	.gap-subheadline  { font-size: 20px;   line-height: .90; }
	.gap-quote        { font-size: 26px;   line-height: 1.10; }
	.gap-infotext     { font-size: 15px;   line-height: 1.30; }
	.gap-infotext-sm  { font-size: 12.5px; line-height: 1.30; }
	.gap-number-huge  { font-size: 82px;   line-height: 1.00; }
	.gap-number-big   { font-size: 52px;   line-height: 1.00; }
	.gap-number-md    { font-size: 32px;   line-height: 1.20; }
	.gap-number-sm    { font-size: 20px;   line-height: 1.20; }
}


/* ════════════════════════════════════════════════════════════════
   3 · BUTTONS

   Quelle: 14 CTA-Buttons im Entwurf 540:2987, gemessen 14.09.2026.
   Einheitlich: Radius 50, Early Sans Variable 16px/120%, ls 0.2,
   Innenabstand 14/26, Hoehe 47-48, Fuellung #004799 oder #009881,
   Text plus Pfeil.

   NICHT verwendet wurde der Styleguide-Frame "buttons (later)".
   Der ist veraltet: ohne Fuellung, Radius 8, auf dem verworfenen
   Blau #002D5B, und in sich widerspruechlich.

   VORLAEUFIG, bis Ines das Set im Styleguide definiert:
     - Gewicht 700 (im Entwurf schwankt es zwischen 700 und 800)
     - Zeilenhoehe 120% auch mobil (Entwurf: 130%, macht Buttons
       ohne Grund hoeher)
     - Hover  = Grundfarbe 10% abgedunkelt, Pfeil 4px nach rechts
     - Active = 20% abgedunkelt
     - Fokusring ergaenzt, im Entwurf nicht vorgesehen, fuer
       Tastaturbedienung aber noetig
   ════════════════════════════════════════════════════════════════ */

.gap-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-space-8);
	font-family: var(--gap-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: .2px;
	padding: 14px 26px;
	border: 0;
	border-radius: var(--gap-radius-pill);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--gap-dur) var(--gap-ease),
	            color            var(--gap-dur) var(--gap-ease),
	            box-shadow       var(--gap-dur) var(--gap-ease);
}

/* Der Pfeil gehoert zu jedem CTA im Entwurf. Als Pseudo-Element,
   damit er nicht im Text steht und von Screenreadern vorgelesen wird. */
.gap-btn::after {
	content: "\2192";
	transition: transform var(--gap-dur) var(--gap-ease);
}
.gap-btn:hover::after { transform: translateX(4px); }
.gap-btn--noarrow::after { content: none; }

.gap-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Primary — 12 der 14 Buttons im Entwurf */
.gap-btn-primary {
	background: var(--e-global-color-primary, #004799);
	color: #FFFFFF;
}
.gap-btn-primary:hover  { background: #003A7A; }
.gap-btn-primary:active { background: #002F63; }

/* Green — 2 der 14 */
.gap-btn-green {
	background: var(--e-global-color-accent, #009881);
	color: #FFFFFF;
}
.gap-btn-green:hover  { background: #007E6B; }
.gap-btn-green:active { background: #006556; }

/* Wo color-mix zur Verfuegung steht, wird aus der Global Color
   gerechnet statt fest verdrahtet — dann wirkt eine Farbaenderung
   im Kit auch auf die Hover-Zustaende. */
@supports (background: color-mix(in srgb, red 50%, black)) {
	.gap-btn-primary:hover  { background: color-mix(in srgb, var(--e-global-color-primary, #004799) 90%, black); }
	.gap-btn-primary:active { background: color-mix(in srgb, var(--e-global-color-primary, #004799) 80%, black); }
	.gap-btn-green:hover    { background: color-mix(in srgb, var(--e-global-color-accent,  #009881) 90%, black); }
	.gap-btn-green:active   { background: color-mix(in srgb, var(--e-global-color-accent,  #009881) 80%, black); }
}


/* ════════════════════════════════════════════════════════════════
   4 · HEADER

   Quelle: 543:7637 (Desktop) und 543:8322 (Mobil), gemessen 14.09.2026.
   Der Header ist keine durchgehende Leiste, sondern eine schwebende
   weisse Pille (1180x68, Radius 60) mit Schatten.

   Struktur liegt in Elementor (Template 13), hier stehen nur die
   Rollen, die das Elementor-Kit nicht kennt: die Marken-Typografie
   und die Pillenform der Navigationslinks.
   ════════════════════════════════════════════════════════════════ */

/* Der Header schwebt UEBER dem Hero, er schiebt ihn nicht nach unten.
   Im Entwurf laeuft das Hero-Foto bis zur Oberkante, die Pille liegt
   mit 16px Abstand darauf. */
.gap-header-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }

/* Marke — zweizeiliges Lockup */
.gap-brand-name {
	font-family: var(--gap-font-body);
	font-weight: 800;
	font-size: 14.7px;
	line-height: 1.55;
	color: var(--e-global-color-primary, #004799);
	display: block;
}
.gap-brand-sub {
	font-family: var(--gap-font-body);
	font-weight: 600;
	font-size: 9.6px;
	line-height: 1.55;
	color: var(--e-global-color-accent, #009881);
	display: block;
}

/* Navigationslinks als Pillen — Radius 40, Innenabstand 9/13 */
.gap-nav .elementor-nav-menu > li > a.elementor-item {
	font-family: var(--gap-font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.2;
	color: var(--e-global-color-primary, #004799);
	padding: 9px 13px;
	border-radius: 40px;
	transition: background-color var(--gap-dur) var(--gap-ease),
	            color            var(--gap-dur) var(--gap-ease);
}
.gap-nav .elementor-nav-menu > li > a.elementor-item:hover,
.gap-nav .elementor-nav-menu > li > a.elementor-item.elementor-item-active {
	background: var(--e-global-color-surfpale, #EDF8FE);
}

/* CTA in der Navigation — kleiner als gap-btn, Radius 40 */
.gap-nav-cta .elementor-button {
	font-family: var(--gap-font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.2;
	padding: 9px 13px;
	border-radius: 40px;
	background: var(--e-global-color-accent, #009881);
	color: #FFFFFF;
	transition: background-color var(--gap-dur) var(--gap-ease);
}
.gap-nav-cta .elementor-button:hover { background: #007E6B; }
@supports (background: color-mix(in srgb, red 50%, black)) {
	.gap-nav-cta .elementor-button:hover {
		background: color-mix(in srgb, var(--e-global-color-accent, #009881) 90%, black);
	}
}

/* Burger — 44x44, Radius 22, drei Balken 18x2 */
.gap-nav .elementor-menu-toggle {
	width: 44px;
	height: 44px;
	border-radius: 22px;
	background: var(--e-global-color-primary, #004799);
	color: #FFFFFF;
}

@media (max-width: 1024px) {
	.gap-wappen { display: none; }
}


/* Korrekturen 14.09.2026 nach Messung im Frontend */

/* Das Lockup darf nicht umbrechen — sonst kollabiert es auf 0 Breite. */
.gap-brand { flex-shrink: 0; }
.gap-brand-name,
.gap-brand-sub { white-space: nowrap; }

/* Elementors eigenes Button-Padding ist spezifischer als eine
   Klassenregel allein — deshalb hier mit Widget-Selektor. */
.elementor-widget-button.gap-nav-cta .elementor-button,
.gap-nav-cta a.elementor-button,
.gap-nav-cta .elementor-button-wrapper .elementor-button {
	padding: 9px 13px;
	line-height: 1.2;
}

/* Die Pille darf nicht zweizeilig werden. */
.gap-header { flex-wrap: nowrap; }
.gap-navwrap { min-width: 0; }


/* Umbruchschutz — Navigation und CTA bleiben einzeilig */
.gap-nav .elementor-nav-menu { flex-wrap: nowrap; }
.gap-nav .elementor-nav-menu > li > a.elementor-item { white-space: nowrap; }
.gap-nav-cta .elementor-button { white-space: nowrap; }
.gap-navwrap { gap: 8px; flex-wrap: nowrap; }
.gap-wappen { flex-shrink: 0; margin-left: 8px; }


/* Breiten: Marke nur so breit wie ihr Text, Navigation nimmt den Rest */
.gap-brand-name,
.gap-brand-sub { width: max-content; }
.gap-navwrap { flex: 1 1 auto; justify-content: flex-end; }
.gap-nav { flex: 0 0 auto; }
.gap-nav .elementor-nav-menu--main { width: auto; }
.gap-nav .elementor-nav-menu--main .elementor-nav-menu { justify-content: flex-end; }


/* Elementor-Container stehen per --width auf 100% und teilen sich
   den Platz. Die Marke soll nur ihren Text breit sein. */
.gap-brand   { --width: auto; width: auto; flex: 0 0 auto; }
.gap-navwrap { --width: auto; width: auto; flex: 1 1 auto; }

/* Elementor-Heading-Widgets bringen eigene Abstaende mit. */
.gap-brand .elementor-widget-heading { margin: 0; }
.gap-brand .elementor-heading-title  { margin: 0; }
.gap-brand .elementor-widget-container { margin: 0; }

/* Burger sichtbar und mittig */
.gap-nav .elementor-menu-toggle {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 22px;
	background: var(--e-global-color-primary, #004799);
	color: #FFFFFF;
}
.gap-nav .elementor-menu-toggle i, .gap-nav .elementor-menu-toggle svg { color:#FFFFFF; fill:#FFFFFF; }


/* Burger nur unterhalb von 1024 — darueber steht die volle Navigation. */
.gap-nav .elementor-menu-toggle { display: none; }
@media (max-width: 1024px) {
	.gap-nav .elementor-menu-toggle { display: flex; }
	.gap-nav-cta { display: none; }
}

/* Marken-Lockup: Elementors Widget-Abstaende raus, Hoehe wie im Entwurf (47). */
.gap-brand .elementor-widget,
.gap-brand .elementor-widget-container,
.gap-brand .elementor-heading-title { margin: 0 !important; padding: 0; }
.gap-brand .elementor-element { margin-block: 0; }

/* Pillenhoehe wie im Entwurf */
.gap-header { min-height: 68px; }
@media (max-width: 1024px) { .gap-header { min-height: 62px; } }


/* ══════════════════════════════════════════════════════════════
   5 · FOOTER
   Quelle: 543:7605 (Desktop) und 543:8291 (Mobil).
   Struktur liegt in Elementor (Template 25).
   ══════════════════════════════════════════════════════════════ */

.gap-footer .elementor-widget,
.gap-footer .elementor-widget-container,
.gap-footer .elementor-heading-title { margin: 0 !important; }

.gap-foot-brand { --width: 356px; width: 356px; flex: 0 0 auto; }
.gap-foot-col   { --width: 255px; width: 255px; flex: 0 0 auto; }

/* Claim — Amplitude Compressed Ultra */
.gap-foot-claim {
	font-family: var(--gap-font-head); font-weight: 900;
	font-size: 42px; line-height: .75;
	color: var(--e-global-color-surflight, #AFDFF9);
}
.gap-foot-kampagne {
	font-family: var(--gap-font-body); font-weight: 500;
	font-size: 12.5px; line-height: 1.2;
	color: var(--e-global-color-surflight, #AFDFF9);
}

/* Spaltenueberschriften — Desktop 11,5/155% w700 (Entwurf) */
.gap-foot-head {
	font-family: var(--gap-font-body); font-weight: 700;
	font-size: 11.5px; line-height: 1.55;
	color: var(--e-global-color-secondary, #27BDEF);
}

/* Footer-Links */
.gap-foot-nav .elementor-nav-menu > li > a.elementor-item {
	font-family: var(--gap-font-body); font-weight: 500;
	font-size: 16px; line-height: 1.2;
	color: var(--e-global-color-surflight, #AFDFF9);
	padding: 5px 0;
	transition: color var(--gap-dur) var(--gap-ease);
}
.gap-foot-nav .elementor-nav-menu > li:first-child > a.elementor-item { padding-top: 19px; }
.gap-foot-nav .elementor-nav-menu > li > a.elementor-item:hover { color: #FFFFFF; }

.gap-foot-copy {
	font-family: var(--gap-font-body); font-weight: 500;
	font-size: 13.1px; line-height: 1.55;
	color: var(--e-global-color-surflight, #AFDFF9);
}

@media (max-width: 1024px) {
	.gap-foot-brand, .gap-foot-col { --width: auto; width: auto; flex: 1 1 0; }
}
@media (max-width: 767px) {
	.gap-foot-brand, .gap-foot-col { --width: 100%; width: 100%; flex: 0 0 auto; }
	.gap-foot-claim { font-size: 40px; }
	.gap-foot-kampagne { font-size: 16px; line-height: 1.3; }
	.gap-foot-nav .elementor-nav-menu > li > a.elementor-item { line-height: 1.3; }
}


/* Elementors Heading-Widget setzt Farbe und Typo auf dem INNEREN
   Titel-Element (.elementor-heading-title). Regeln auf der Huelle
   werden dadurch ueberschrieben — Dunkelblau auf Dunkelblau.
   Deshalb alle Heading-Rollen eine Ebene tiefer ansprechen. */

.gap-brand-name .elementor-heading-title {
	font-family: var(--gap-font-body); font-weight: 800; font-size: 14.7px; line-height: 1.55;
	color: var(--e-global-color-primary, #004799); white-space: nowrap;
}
.gap-brand-sub .elementor-heading-title {
	font-family: var(--gap-font-body); font-weight: 600; font-size: 9.6px; line-height: 1.55;
	color: var(--e-global-color-accent, #009881); white-space: nowrap;
}
.gap-foot-claim .elementor-heading-title {
	font-family: var(--gap-font-head); font-weight: 900; font-size: 42px; line-height: .75;
	color: var(--e-global-color-surflight, #AFDFF9);
}
.gap-foot-kampagne .elementor-heading-title {
	font-family: var(--gap-font-body); font-weight: 500; font-size: 12.5px; line-height: 1.2;
	color: var(--e-global-color-surflight, #AFDFF9);
}
.gap-foot-head .elementor-heading-title {
	font-family: var(--gap-font-body); font-weight: 700; font-size: 11.5px; line-height: 1.55;
	color: var(--e-global-color-secondary, #27BDEF);
}
.gap-foot-copy .elementor-heading-title {
	font-family: var(--gap-font-body); font-weight: 500; font-size: 13.1px; line-height: 1.55;
	color: var(--e-global-color-surflight, #AFDFF9);
}
@media (max-width: 767px) {
	.gap-foot-claim .elementor-heading-title { font-size: 40px; }
	.gap-foot-kampagne .elementor-heading-title { font-size: 16px; line-height: 1.3; }
}


/* ══════════════════════════════════════════════════════════
   6 · HERO (Sektion 1)
   Sechs Varianten, Kreuzblende alle 10 s, Reihenfolge beim
   Laden zufaellig. Quelle: 543:6926 / 543:7759 und die fuenf
   losen HERO-Frames.

   Der Inhaltsblock ist UNTEN verankert — im Entwurf liegt die
   Unterkante aller Varianten auf y 817, waehrend die Hoehe je
   nach Zeilenzahl der Headline zwischen 580 und 772 schwankt.
   ══════════════════════════════════════════════════════════ */

.gap-hero { position: relative; min-height: 900px; isolation: isolate; }
.gap-hero-photos { overflow: hidden; }
@media (max-width: 1024px) { .gap-hero { min-height: 820px; } }
@media (max-width: 767px)  { .gap-hero { min-height: 690px; } }

.gap-hero-photos { position: absolute; inset: 0; z-index: 0; }
/* Nur das aktive und das naechste Foto stehen im Dokument.
   Browser laden Hintergrundbilder von display:none-Elementen nicht —
   damit kostet der erste Aufruf ein Bild statt sechs. */
.gap-hero-photo { position: absolute; inset: 0; opacity: 0; display: none;
	transition: opacity 1200ms ease; }
.gap-hero-photo.is-ready  { display: block; }
.gap-hero-photo.is-active { opacity: 1; }

/* Verlaufs-Schleier — Werte aus dem Entwurf (#021221, 10/12/5 %) */
.gap-hero::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(to top,
		rgba(2,18,33,.10) 0%, rgba(2,18,33,.12) 48%, rgba(2,18,33,.05) 100%);
}

.gap-hero-waves {
	position: absolute; left: 0; right: 0; bottom: 0; height: 117px; z-index: 2;
	pointer-events: none;
	background: url("/wp-content/uploads/2026/09/hero-waves-scaled.png") no-repeat center bottom;
	background-size: 100% 100%;
}
@media (max-width: 767px) { .gap-hero-waves { height: 101px; } }

.gap-hero-inner {
	position: absolute; z-index: 3;
	left: var(--gap-gutter); right: var(--gap-gutter); bottom: 83px;
	max-width: var(--gap-content);
}
@media (max-width: 1024px) { .gap-hero-inner { bottom: 150px; } }
@media (max-width: 767px)  { .gap-hero-inner { bottom: 277px; } }

.gap-hero-eyebrow .elementor-heading-title {
	font-family: var(--gap-font-body); font-weight: 500;
	font-size: 12.5px; line-height: 1.2; color: #FFFFFF;
}

/* Nur die aktive Headline steht im Fluss — so waechst der Block
   nach oben, statt bei sechs gestapelten Zeilen zu springen. */
.gap-hero-head { display: none; }
.gap-hero-head.is-active { display: block; }
.gap-hero-head .elementor-heading-title {
	font-family: var(--gap-font-head); font-weight: 900;
	font-size: 128px; line-height: .75; color: #FFFFFF;
	white-space: pre-line;
}
@media (max-width: 1024px) { .gap-hero-head .elementor-heading-title { font-size: 100px; } }
@media (max-width: 767px)  { .gap-hero-head .elementor-heading-title { font-size: 82px; } }

.gap-hero-lead .elementor-heading-title {
	font-family: var(--gap-font-body); font-weight: 500;
	font-size: 20.5px; line-height: 1.2; color: #FFFFFF; max-width: 608px;
}

/* CTA im Hero: weisse Outline-Pille, Fuellung 12 % (Entwurf) */
.gap-hero-cta .elementor-button {
	font-family: var(--gap-font-body); font-weight: 800;
	font-size: 16px; line-height: 1.55; color: #FFFFFF;
	padding: 15px 26px; border-radius: var(--gap-radius-pill);
	background: rgba(255,255,255,.12);
	border: 1px solid #FFFFFF;
	transition: background-color var(--gap-dur) var(--gap-ease);
}
.gap-hero-cta .elementor-button:hover { background: rgba(255,255,255,.24); }

/* Mobil zeigt der Entwurf nur Eyebrow und Headline. */
@media (max-width: 767px) {
	.gap-hero-lead, .gap-hero-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.gap-hero-photo { transition: none; }
}


/* ══════════════════════════════════════════════════════════
   7 · KORREKTUREN 14.09.2026 (TK)
   • Marke im Header ist "Läuft bei uns." auf gruener Pille
   • Hero-Headline zweifarbig: Thema weiss, Claim #009881
   • Kein Fließtext und kein CTA unter der Headline
   ══════════════════════════════════════════════════════════ */

/* Marke: gruene Pille, weisser Schriftzug */
.gap-brand-claim .elementor-heading-title {
	font-family: var(--gap-font-head); font-weight: 900;
	font-size: 22px; line-height: .82; color: #FFFFFF;
	text-transform: uppercase; white-space: pre-line;
	background: var(--e-global-color-accent, #009881);
	border-radius: 14px; padding: 8px 12px; display: inline-block;
}
.gap-brand-claim a { color: inherit; text-decoration: none; }
@media (max-width: 767px) {
	.gap-brand-claim .elementor-heading-title { font-size: 18px; padding: 6px 10px; }
}

/* Hero: Thema und Claim bilden EINEN Block, gleiche Zeilenhoehe */
.gap-hero-heads, .gap-hero-claim { margin: 0; }
.gap-hero-claim .elementor-heading-title {
	font-family: var(--gap-font-head); font-weight: 900;
	font-size: 128px; line-height: .75;
	color: var(--e-global-color-accent, #009881);
	white-space: pre-line;
}
@media (max-width: 1024px) { .gap-hero-claim .elementor-heading-title { font-size: 100px; } }
@media (max-width: 767px)  { .gap-hero-claim .elementor-heading-title { font-size: 82px; } }

/* Eyebrow: Versalien, zweizeilig wie im Entwurf */
.gap-hero-eyebrow .elementor-heading-title {
	text-transform: uppercase; letter-spacing: .04em; max-width: 340px;
}

/* Der Hero-Block sitzt enger zusammen — ohne Fließtext und CTA
   braucht er weniger Abstand nach unten. */
.gap-hero-inner { gap: 18px; }


/* Headline in Versalien — wie in der Referenz von TK. */
.gap-hero-head .elementor-heading-title,
.gap-hero-claim .elementor-heading-title { text-transform: uppercase; }

/* Tropfen-Störer (543:7595)
   183 × 226 im 1440er Entwurf, x 1077 / y 767 — er ragt also
   93 px unter die Hero-Kante und überlappt das Wellenband.
   Deshalb clippt .gap-hero nicht mehr, sondern nur .gap-hero-photos. */
.gap-hero-stoerer {
	position: absolute; z-index: 4;
	right: 180px; bottom: -93px;
	width: 183px;
}
.gap-hero-stoerer img { display: block; width: 100%; height: auto; }
@media (max-width: 1024px) {
	.gap-hero-stoerer { right: 40px; width: 150px; bottom: -70px; }
}
@media (max-width: 767px) {
	.gap-hero-stoerer { right: 20px; width: 110px; bottom: -50px; }
}


/* ════════════════════════════════════════════════
   8 · FEINSCHLIFF 15.09.2026 (TK)
   Nachgemessen an "Wasser ready for GAP DEV":
   543:6941 Headline · 543:6939 Eyebrow · 543:7637 Navigation.

   • Headline 128 px, Zeile 96 px, Zeichen -2 px. Thema und Claim
     sind zwei Widgets, teilen sich aber ein durchgehendes
     Zeilenraster — alle vier Zeilen haben denselben Abstand.
   • Eyebrow 12.5 / 15 px, Zeichen 0.2 px, 41 px bis zur Headline.
   • Navigationspille 1180 x 68, Radius 60, 16 px unter der
     Oberkante — bei angemeldeten Nutzern unter der Adminleiste,
     sonst wird sie oben abgeschnitten.
   • Marke "Läuft bei uns." 36 px in #009881, ohne Pille.
   • Marke und Headline stehen auf derselben senkrechten Flucht:
     beide sitzen in einem 1180 breiten, zentrierten Feld und sind
     darin um 42 px eingerückt (Entwurf: x 171 bzw. x 172).
   ════════════════════════════════════════════════ */

:root{
	--gap-edge:        100px;   /* Rand bis zur Navigationspille */
	--gap-shell:      1180px;   /* Breite der Navigationspille   */
	--gap-shell-pad:    42px;   /* Flucht von Marke und Headline */
	--gap-head-size:   128px;
	--gap-head-line:    96px;
	--gap-head-gap:     41px;   /* Eyebrow -> Headline */
	--gap-hero-bottom: 196px;   /* Unterkante Headline zum Hero-Fuss */
}
@media (max-width: 1024px){
	:root{ --gap-edge: 40px; --gap-shell-pad: 32px;
	       --gap-head-size: 100px; --gap-head-line: 75px;
	       --gap-head-gap: 40px; --gap-hero-bottom: 230px; }
}
@media (max-width: 767px){
	:root{ --gap-edge: 20px; --gap-shell-pad: 20px;
	       --gap-head-size: 82px; --gap-head-line: 61.5px;
	       --gap-head-gap: 38px; --gap-hero-bottom: 278px; }
}

/* ---- Kopfzeile ------------------------------------------------ */

.gap-header-wrap{ padding: 16px var(--gap-edge) 0; }

/* Die WP-Adminleiste liegt über der fixierten Pille. */
body.admin-bar .gap-header-wrap{ top: 32px; }
@media screen and (max-width: 782px){
	body.admin-bar .gap-header-wrap{ top: 46px; }
}

.gap-header{
	width: min(var(--gap-shell), 100%);
	margin-left: auto; margin-right: auto;
	height: 68px; min-height: 68px;
	padding: 0 8px 0 var(--gap-shell-pad);
	align-items: center; justify-content: space-between;
	border-radius: 60px;
	background: #FFFFFF !important;
}
@media (max-width: 767px){ .gap-header{ padding-left: 20px; } }

.gap-brand, .gap-brand-claim{ flex: 0 0 auto; padding: 0; margin: 0; }
.gap-navwrap{ align-items: center; }

/* Marke: grüne Schrift, keine Pille (543:7757) */
.gap-brand-claim .elementor-heading-title{
	font-family: var(--gap-font-head); font-weight: 900;
	font-size: 36px; line-height: 27px; letter-spacing: 0;
	color: var(--e-global-color-accent, #009881);
	text-transform: uppercase; white-space: pre-line;
	background: none; border-radius: 0;
	padding: 0; margin: 0; display: block;
}
@media (max-width: 767px){
	.gap-brand-claim .elementor-heading-title{
		font-size: 30px; line-height: 22.5px; padding: 0;
	}
}

/* ---- Hero: ein durchgehendes Zeilenraster --------------------- */

.gap-hero-inner{
	left: 50%; right: auto; transform: translateX(-50%);
	width: min(var(--gap-shell), calc(100% - 2 * var(--gap-edge)));
	max-width: none; box-sizing: border-box;
	padding-left: var(--gap-shell-pad);
	bottom: var(--gap-hero-bottom);
	display: flex; flex-direction: column; gap: 0;
}
@media (max-width: 767px){ .gap-hero-inner{ padding-left: 0; } }

/* Elementor setzt Widget-Abstaende per --kit-widget-spacing;
   der gemessene Abstand aus dem Entwurf muss davor liegen. */
.gap-hero-inner .gap-hero-eyebrow{
	margin: 0 0 var(--gap-head-gap) !important;
	padding: 0; max-width: 344px;
}
.gap-hero-eyebrow .elementor-heading-title{
	font-family: var(--gap-font-body); font-weight: 500;
	font-size: 12.5px; line-height: 15px; letter-spacing: .2px;
	text-transform: uppercase; color: #FFFFFF; max-width: 344px;
	white-space: pre-line;   /* Umbruch nach "Abteilung" steht im Inhalt */
}
@media (max-width: 767px){
	.gap-hero-eyebrow .elementor-heading-title{ line-height: 16.25px; }
}

.gap-hero-heads, .gap-hero-head, .gap-hero-claim{
	margin: 0; padding: 0; gap: 0;
}
.gap-hero-head .elementor-heading-title,
.gap-hero-claim .elementor-heading-title{
	font-family: var(--gap-font-head); font-weight: 900;
	font-size: var(--gap-head-size);
	line-height: var(--gap-head-line);
	letter-spacing: -2px;
	text-transform: uppercase; white-space: pre-line;
	margin: 0; padding: 0;
}
.gap-hero-head  .elementor-heading-title{ color: #FFFFFF; }
.gap-hero-claim .elementor-heading-title{ color: var(--e-global-color-accent, #009881); }


/* ════════════════════════════════════════════════
   9 · KORREKTUREN 15.09.2026 (TK, zweite Runde)
   ════════════════════════════════════════════════ */

/* --- 1 · Pille: links und rechts gleich viel Luft ---------------
   Entwurf: Schriftzug beginnt 41 px nach der linken Kante,
   das Wappen endet 45 px vor der rechten. Bisher standen rechts
   nur 8 px. Der Innenabstand folgt jetzt derselben Variablen wie
   die Flucht, damit Marke und Headline zusammenbleiben. */
:root{ --gap-navlink-pad: 13px; }
.gap-header{ padding: 0 var(--gap-shell-pad); }

/* --- 5 · Marke bleibt immer zweizeilig -------------------------
   "pre-line" erlaubt zusaetzliche Umbrueche; ab 1280 px rutschte
   "uns." in eine dritte Zeile. "pre" haelt genau die zwei Zeilen
   aus dem Entwurf. */
.gap-brand-claim .elementor-heading-title{ white-space: pre; }
.gap-brand{ flex: 0 0 auto; }

/* --- 5 · Navigation laeuft zwischen 1025 und 1366 aus der Pille -
   Gemessen: bei 1200 px standen 33 px ueber, bei 1060 px 123 px.
   Schmalerer Rand plus engere Links und CTA loesen das, ohne den
   Burger frueher einzuschalten. */
@media (min-width: 1025px) and (max-width: 1366px){
	:root{ --gap-edge: 40px; --gap-shell-pad: 30px; --gap-navlink-pad: 9px; }
	.gap-nav .elementor-item{
		padding-left: var(--gap-navlink-pad);
		padding-right: var(--gap-navlink-pad);
		font-size: 15px;
	}
	.gap-nav-cta .elementor-button{ padding-left: 18px; padding-right: 18px; font-size: 15px; }
	.gap-navwrap{ gap: 10px; }
}

/* Unter 1150 px reicht das noch nicht — gemessen standen bei
   1025 px weitere 63 px ueber. */
@media (min-width: 1025px) and (max-width: 1150px){
	:root{ --gap-edge: 20px; --gap-shell-pad: 20px; --gap-navlink-pad: 5px; }
	.gap-nav .elementor-item{ font-size: 13px; }
	.gap-nav-cta .elementor-button{ padding-left: 12px; padding-right: 12px; font-size: 13px; }
	.gap-navwrap{ gap: 4px; }
	.gap-wappen{ margin-left: 4px; }
}

/* --- 6 · Burger rechtsbuendig und senkrecht mittig -------------
   Gilt ab dem Punkt, an dem Elementor auf den Umschalter wechselt
   (Tablet, also bis 1024) — nicht erst ab 767.
   Der Umschalter sass mittig in einem 167 px breiten Block und
   oben statt zentriert: 69 px von der rechten Kante, 7 px oben
   gegen 17 px unten. */
@media (max-width: 1024px){
	.gap-navwrap{ margin-left: auto; width: auto; flex: 0 0 auto; align-items: center; }
	.gap-nav{ width: auto; justify-content: flex-end; align-items: center; }
	.gap-nav > .elementor-widget-container,
	.gap-nav nav,
	.gap-nav .elementor-nav-menu__container{ align-items: center; }
	/* Elementor zentriert den Umschalter per Element-Regel
	   (.elementor-NN .elementor-element-xxx .elementor-menu-toggle),
	   das schlaegt jede Klassenregel — daher !important. */
	.gap-header .elementor-menu-toggle{
		margin-left: auto !important; margin-right: 0 !important;
		align-self: center;
	}
	/* Der Navigationsblock erbte 54 px Hoehe aus der Desktop-Leiste;
	   dadurch sass der Burger 7 px unter der Oberkante statt mittig. */
	.gap-navwrap, .gap-nav, .gap-nav > .elementor-widget-container{
		height: auto; min-height: 0;
	}
	/* Das Klappmenue stand als zweite Flex-Zeile im Fluss und machte
	   den Block 54 statt 44 px hoch — daher sass der Burger oben
	   statt mittig. Es haengt jetzt unter der Pille. */
	.gap-nav{ position: relative; }
	.gap-nav .elementor-nav-menu--dropdown{
		position: absolute; top: calc(100% + 10px);
		left: auto; right: 0; z-index: 10;
		width: min(280px, calc(100vw - 40px));
	}
}

/* --- 2 · Sechszeilige Variante verdeckt die Subheadline ---------
   Alle Headlines teilen sich die Unterkante. "Trinkwasser aus
   Grundwasser" hat sechs Zeilen und schiebt den Eyebrow damit
   unter die Navigation. Nur diese Variante rueckt eine Stufe
   kleiner — Zeilenraster bleibt gleichmaessig.
   Reihenfolge im Markup: 1 Wasserqualitaet, 2 Seen sehen,
   3 Trinkwasser, 4 Vorausschauen, 5 Fluessen Raum, 6 Sicher versorgt. */
.gap-hero-inner:has(.gap-hero-head:nth-child(3).is-active){
	--gap-head-size: 112px; --gap-head-line: 84px;
}
@media (max-width: 1024px){
	.gap-hero-inner:has(.gap-hero-head:nth-child(3).is-active){
		--gap-head-size: 88px; --gap-head-line: 66px;
	}
}
@media (max-width: 767px){
	.gap-hero-inner:has(.gap-hero-head:nth-child(3).is-active){
		--gap-head-size: 70px; --gap-head-line: 52.5px;
	}
}

/* --- 8 · Hover-Linie nur unter dem Wort ------------------------
   Im Kopf lief sie ueber die ganze Pille des Links, im Fuss ueber
   die ganze Spaltenbreite. */
.gap-nav .elementor-item::after{
	left: var(--gap-navlink-pad); right: var(--gap-navlink-pad); width: auto;
}
.gap-foot-nav .elementor-item{ display: inline-flex; width: fit-content; }

/* --- 7 · Footer (543:7605) ------------------------------------
   Marke 42 / 31.5 px, Versalien, zweizeilig.
   Kampagnenzeile bricht im Entwurf nach "Abteilung" um — das
   ergibt sich aus der Textbreite von 203 px.
   Die Trennlinie gehoert ueber die Zeile mit Credit und Wappen. */
.gap-foot-claim .elementor-heading-title{
	text-transform: uppercase; white-space: pre; letter-spacing: .2px;
}
.gap-foot-kampagne .elementor-heading-title{ white-space: pre-line; max-width: 240px; }
.gap-foot-bottom{
	border-top: 1px solid rgba(175,223,249,.2);
	padding-top: 24px;
}


/* ════════════════════════════════════════════════
   10 · SECTION 00 INTRO + 01 SELBST-CHECK
   Quellen: 543:6947 (Intro), 543:6952 (Selbst-Check)
   ════════════════════════════════════════════════ */

:root{
	--gap-blau-hell:  #27BDEF;
	--gap-blau-zart:  #EDF8FE;
	--gap-blau-text:  #AFDFF9;
	--gap-card-radius: 26px;
}

/* ---- Abschnittsmarke: Tropfen mit Nummer --------------------- */
.gap-sec-badge{ flex-direction: row; justify-content: center; align-items: center; gap: 8px; padding: 0; }
.gap-sec-num{
	position: relative; width: 40px; height: 46px; flex: 0 0 auto;
	display: grid; place-items: center;
}
.gap-sec-num::before{
	content: ""; position: absolute; inset: 0;
	background: var(--gap-sec-color, var(--gap-blau-hell));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 42'%3E%3Cpath d='M30.7815 18.5501L17.669 0.0003L3.42523 17.662C-1.78613 23.8044 -0.9696 32.5036 5.32013 37.8254C11.5315 43.0976 21.1333 43.413 27.6575 38.5589C34.2672 33.6219 35.6224 24.9864 30.7913 18.5618L30.7815 18.5501Z'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 42'%3E%3Cpath d='M30.7815 18.5501L17.669 0.0003L3.42523 17.662C-1.78613 23.8044 -0.9696 32.5036 5.32013 37.8254C11.5315 43.0976 21.1333 43.413 27.6575 38.5589C34.2672 33.6219 35.6224 24.9864 30.7913 18.5618L30.7815 18.5501Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.gap-sec-num .elementor-heading-title{
	position: relative;
	font-family: var(--gap-font-head); font-weight: 900;
	font-size: 28px; line-height: 29px; letter-spacing: .2px; color: #FFFFFF;
	margin: 0; transform: translateY(2px);
}
.gap-sec-label .elementor-heading-title{
	font-family: var(--gap-font-head); font-weight: 900;
	font-size: 30px; line-height: 27px; letter-spacing: .2px; text-transform: uppercase;
	color: var(--gap-sec-color, var(--gap-blau-hell)); margin: 0;
}

/* ---- 00 Intro (543:6947) ------------------------------------- */
.gap-intro{ background: #FFFFFF; padding: 110px var(--gap-edge) 90px; }
.gap-intro-text .elementor-heading-title{
	max-width: 792px; margin: 0 auto; text-align: center;
	font-family: var(--gap-font-body); font-weight: 700;
	font-size: 26px; line-height: 31.2px; letter-spacing: -.1px;
	color: var(--e-global-color-primary, #004799);
}
@media (max-width: 1024px){
	.gap-intro{ padding: 80px var(--gap-edge) 70px; }
	.gap-intro-text .elementor-heading-title{ font-size: 22px; line-height: 26.4px; }
}
@media (max-width: 767px){
	.gap-intro{ padding: 56px var(--gap-edge) 48px; }
	.gap-intro-text .elementor-heading-title{ font-size: 19px; line-height: 23px; }
}

/* ---- 01 Selbst-Check (543:6952) ------------------------------ */
.gap-check{
	background: linear-gradient(180deg, #FFFFFF 0%, var(--gap-blau-zart) 100%);
	padding: 70px var(--gap-edge) 90px;
}
.gap-check-head{
	max-width: 661px; margin: 0 auto; text-align: center;
	gap: 15px; padding: 0;
}
.gap-check-h2 .elementor-heading-title{
	font-family: var(--gap-font-head); font-weight: 900;
	font-size: 82px; line-height: 74px; letter-spacing: -2px;
	text-transform: uppercase; white-space: pre-line;
	color: var(--e-global-color-primary, #004799); margin: 0;
}
.gap-check-h2 .gap-gruen{ color: var(--e-global-color-accent, #009881); }
.gap-check-lead .elementor-heading-title{
	font-family: var(--gap-font-body); font-weight: 500;
	font-size: 20.5px; line-height: 25px; letter-spacing: -.1px;
	color: var(--e-global-color-primary, #004799); margin: 0;
}
@media (max-width: 1024px){
	.gap-check{ padding: 56px var(--gap-edge) 70px; }
	.gap-check-h2 .elementor-heading-title{ font-size: 62px; line-height: 56px; }
	.gap-check-lead .elementor-heading-title{ font-size: 18px; line-height: 23px; }
	.gap-sec-label .elementor-heading-title{ font-size: 24px; line-height: 22px; }
}
@media (max-width: 767px){
	.gap-check{ padding: 48px var(--gap-edge) 56px; }
	.gap-check-h2 .elementor-heading-title{ font-size: 44px; line-height: 40px; }
	.gap-check-lead .elementor-heading-title{ font-size: 17px; line-height: 22px; }
}

/* ---- Der Rechner --------------------------------------------- */
.gap-calc{
	display: grid; gap: 28px; align-items: stretch;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 1096px; margin: 70px auto 0;
}
@media (max-width: 900px){ .gap-calc{ grid-template-columns: 1fr; margin-top: 48px; } }

.gap-calc-card, .gap-calc-result{
	border-radius: var(--gap-card-radius);
	padding: 31px 32px 40px;
	display: flex; flex-direction: column;
}
.gap-calc-card{
	background: #FFFFFF;
	box-shadow: 0 26px 60px -34px rgba(0,42,92,.5);
}
.gap-calc-result{ background: var(--e-global-color-primary, #004799); }

.gap-calc-title{
	font-family: var(--gap-font-head); font-weight: 900;
	font-size: 42px; line-height: 32px; text-transform: uppercase;
	margin: 0 0 14px;
}
.gap-calc-card .gap-calc-title{ color: var(--e-global-color-primary, #004799); }
.gap-calc-result .gap-calc-title{ color: #FFFFFF; }
.gap-calc-sub{
	font-family: var(--gap-font-body); font-weight: 500;
	font-size: 16px; line-height: 19.2px; letter-spacing: .2px;
	color: var(--e-global-color-primary, #004799); margin: 0 0 26px;
}
@media (max-width: 767px){ .gap-calc-title{ font-size: 32px; line-height: 26px; } }

/* Schieberegler */
.gap-slider{ margin: 0 0 22px; }
.gap-slider label{
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	font-family: var(--gap-font-body); font-weight: 700;
	font-size: 16px; line-height: 19.2px;
	color: var(--e-global-color-primary, #004799); margin: 0 0 18px;
}
.gap-slider label b{
	font-family: var(--gap-font-head); font-weight: 900;
	font-size: 22px; line-height: 22px;
	color: var(--e-global-color-accent, #009881); white-space: nowrap;
}
.gap-slider input[type=range]{
	-webkit-appearance: none; appearance: none;
	width: 100%; height: 8px; border-radius: 10px; margin: 0;
	background: linear-gradient(90deg,
		var(--gap-blau-hell) 0 var(--gap-fill, 50%),
		var(--gap-blau-zart) var(--gap-fill, 50%) 100%);
	cursor: pointer;
}
.gap-slider input[type=range]::-webkit-slider-thumb{
	-webkit-appearance: none; appearance: none;
	width: 26px; height: 26px; border-radius: 50%;
	background: #FFFFFF; border: 3px solid var(--gap-blau-hell);
	box-shadow: 0 2px 8px rgba(0,42,92,.25); cursor: grab;
}
.gap-slider input[type=range]::-moz-range-thumb{
	width: 26px; height: 26px; border-radius: 50%;
	background: #FFFFFF; border: 3px solid var(--gap-blau-hell);
	box-shadow: 0 2px 8px rgba(0,42,92,.25); cursor: grab;
}
.gap-slider input[type=range]:focus-visible{ outline: 2px solid var(--gap-blau-hell); outline-offset: 4px; }

.gap-calc-lbl{
	font-family: var(--gap-font-body); font-weight: 500;
	font-size: 16px; line-height: 19.2px; letter-spacing: .2px;
	color: var(--e-global-color-primary, #004799); margin: auto 0 6px;
}
.gap-calc-big{
	font-family: var(--gap-font-head); font-weight: 900;
	font-size: 60px; line-height: 72px;
	color: var(--e-global-color-accent, #009881); margin: 0;
}
@media (max-width: 767px){ .gap-calc-big{ font-size: 44px; line-height: 54px; } }

/* Ergebnis-Kacheln */
.gap-calc-tiles{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 24px; }
.gap-tile{
	background: rgba(255,255,255,.14); border-radius: 18px;
	padding: 21px 16px; text-align: center;
	display: flex; flex-direction: column; gap: 0;
}
.gap-tile-lbl{
	font-family: var(--gap-font-body); font-weight: 500;
	font-size: 16px; line-height: 19.2px; letter-spacing: .2px; color: #FFFFFF;
}
.gap-tile-num{
	font-family: var(--gap-font-head); font-weight: 900;
	font-size: 82px; line-height: 82px; color: var(--gap-blau-text);
	font-variant-numeric: tabular-nums;
}
@media (max-width: 1024px){ .gap-tile-num{ font-size: 60px; line-height: 60px; } }
@media (max-width: 400px){ .gap-calc-tiles{ grid-template-columns: 1fr; } }

.gap-calc-share{
	font-family: var(--gap-font-body); font-weight: 500;
	font-size: 16px; line-height: 19.2px; letter-spacing: .2px; color: #FFFFFF;
	margin: auto 0 11px;
}
/* Gefuellter Teil im Himmelblau, Rest im hellen Ton (TK). */
.gap-bar{
	height: 11px; border-radius: 10px; overflow: hidden;
	background: var(--gap-blau-zart); margin: 0 0 22px;
}
.gap-bar > span{
	display: block; height: 100%; width: 0; border-radius: 10px;
	background: var(--gap-blau-hell);
	transition: width 900ms cubic-bezier(.22,.61,.36,1);
}

/* Annahmen — eingeklappt als Standard */
.gap-assum{ margin: 0; }
.gap-assum summary{
	list-style: none; cursor: pointer;
	font-family: var(--gap-font-body); font-weight: 500;
	font-size: 12.5px; line-height: 15px; color: var(--gap-blau-text);
}
.gap-assum summary::-webkit-details-marker{ display: none; }
.gap-assum summary::before{ content: "\2193\00a0"; }
.gap-assum[open] summary::before{ content: "\2191\00a0"; }
/* Beim Zuklappen dreht der Pfeil sofort, nicht erst am Ende. */
.gap-assum.is-schliesst summary::before{ content: "\2193\00a0"; }
.gap-assum summary:hover{ color: #FFFFFF; }
.gap-assum-body{
	font-family: var(--gap-font-body); font-weight: 500;
	font-size: 12.5px; line-height: 15px; color: var(--gap-blau-text);
	margin: 0; padding-top: 14px;
	overflow: hidden;
	transition: max-height 320ms ease, padding-top 320ms ease, opacity 260ms ease;
}

/* Der Hero bildet mit `isolation: isolate` einen eigenen Stapel.
   Der Tropfen konnte deshalb nie ueber die folgende Section steigen,
   egal wie hoch sein z-index war — der ganze Hero muss hoch. */
.gap-hero{ z-index: 2; }
.gap-hero-stoerer{ z-index: 5; }

/* Tropfen bewegen sich beim Zeigen leicht.
   `.gap-stoerer` ist die allgemeine Klasse fuer jeden weiteren
   Tropfen-Stoerer auf der Seite — einfach mitvergeben, der Effekt
   haengt dann automatisch dran. */
.gap-stoerer, .gap-hero-stoerer, .gap-sec-num{
	transition: transform 420ms cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}
.gap-stoerer:hover, .gap-hero-stoerer:hover{ transform: translateY(-8px) rotate(-3deg); }
.gap-sec-badge:hover .gap-sec-num{ transform: translateY(-4px) rotate(-4deg); }

@media (prefers-reduced-motion: reduce){
	.gap-bar > span{ transition: none; }
	.gap-assum-body{ transition: none; }
	.gap-stoerer, .gap-hero-stoerer, .gap-sec-num{ transition: none; }
	.gap-stoerer:hover, .gap-hero-stoerer:hover,
	.gap-sec-badge:hover .gap-sec-num{ transform: none; }
}


/* ════════════════════════════════════════════════
   11 · SECTION 02 SPAR-TIPPS (543:7043)
   Der Fluss (543:7061) zeichnet sich beim Scrollen wie eine
   Trim-Path-Animation. Die Section bleibt dabei stehen; die
   Buehne von 1440 x 1820 wandert hinter dem festen Ausschnitt
   nach oben. Erreicht der Fluss einen Punkt, wird der Button
   markiert und seine Infobox klappt auf.
   ════════════════════════════════════════════════ */

.gap-tipps{
	--gap-buehne-h: 1820px;
	--gap-lauf: 600vh;          /* rund ein Bildschirm je Punkt */
	height: calc(100vh + var(--gap-lauf));
	position: relative; padding: 0;
}
.gap-tipps-pin{
	position: sticky; top: 0; height: 100vh;
	overflow: hidden; padding: 0;
	background: linear-gradient(180deg, #FFFFFF 0%, var(--gap-blau-zart) 100%);
}
.gap-tipps-stage{
	position: absolute; top: 0; left: 50%; margin-left: -720px;
	width: 1440px; height: var(--gap-buehne-h); padding: 0;
	transform-origin: top center;
	transform: scale(var(--gap-s, 1), var(--gap-sy, var(--gap-s, 1))) translateY(calc(var(--gap-y, 0) * -1px));
	will-change: transform;
}

/* ---- Kopf --------------------------------------------------- */
.gap-tipps-head{
	/* 160 statt 90: die Buehne startet jetzt buendig an der
	   Oberkante, damit der Fluss dort beginnt — der Kopf braucht
	   deshalb selbst den Abstand zur fixierten Navigation. */
	position: absolute; top: 160px; left: 50%; margin-left: -385px;
	width: 770px; text-align: center; gap: 15px; padding: 0; z-index: 3;
}
.gap-tipps-h2 .elementor-heading-title{
	font-family: var(--gap-font-head); font-weight: 900;
	font-size: 82px; line-height: 74px; letter-spacing: -2px;
	text-transform: uppercase; white-space: pre-line;
	color: var(--e-global-color-primary, #004799); margin: 0;
}
.gap-tipps-h2 .gap-gruen{ color: var(--e-global-color-accent, #009881); }
.gap-tipps-lead .elementor-heading-title{
	font-family: var(--gap-font-body); font-weight: 500;
	font-size: 20.5px; line-height: 25px; letter-spacing: -.1px;
	color: var(--e-global-color-primary, #004799); margin: 0;
}

/* ---- Fluss --------------------------------------------------- */
.gap-flow-wrap{ position: absolute; inset: 0; z-index: 1; padding: 0; }
.gap-flow{
	position: absolute; left: 161.5px; top: -27.5px;
	width: 1036px; height: 1988px; overflow: visible;
}
/* Spitzen am Anfang und Ende eckig (TK), Kurven bleiben weich. */
.gap-flow path{ fill: none; stroke-width: 55; stroke-linecap: butt; stroke-linejoin: round; }
.gap-flow .gap-flow-line{ will-change: stroke-dashoffset; }
.gap-flow .gap-flow-guide{ stroke: var(--gap-blau-text); opacity: .22; }
.gap-flow .gap-flow-line{ stroke: var(--gap-blau-text); }

/* ---- Punkte und Boxen ---------------------------------------- */
.gap-flow-tip{ display: contents; }
.gap-flow-node, .gap-flow-box{ box-sizing: border-box; }

.gap-flow-node{
	position: absolute; left: var(--nx); top: var(--ny); z-index: 4;
	display: inline-flex; align-items: center; gap: 9px;
	padding: 11px 17px; border: 0; border-radius: 50px; cursor: default;
	background: #FFFFFF; box-shadow: 0 10px 26px -18px rgba(0,42,92,.6);
	font-family: var(--gap-font-body); font-weight: 700;
	font-size: 20.5px; line-height: 25px; letter-spacing: .2px;
	color: var(--e-global-color-primary, #004799);
	transition: background-color 320ms ease, color 320ms ease, transform 320ms ease;
}
.gap-flow-node img{ width: 31px; height: 31px; object-fit: contain; flex: 0 0 auto;
	transition: filter 320ms ease; }
.gap-flow-tip.is-an .gap-flow-node{
	background: var(--e-global-color-primary, #004799); color: #FFFFFF;
	transform: scale(1.04);
}
.gap-flow-tip.is-an .gap-flow-node img{ filter: brightness(0) invert(1); }

.gap-flow-box{
	position: absolute; left: var(--bx); top: var(--by); z-index: 5;
	width: 339px; padding: 20px 26px; border-radius: 30px;
	background: #FFFFFF; box-shadow: 0 18px 44px -26px rgba(0,42,92,.55);
	opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none;
	transform-origin: top left;
	transition: opacity 340ms ease, transform 340ms ease;
}
.gap-flow-tip.is-offen .gap-flow-box{ opacity: 1; transform: none; pointer-events: auto; }
.gap-flow-box h3{
	font-family: var(--gap-font-head); font-weight: 900;
	font-size: 32px; line-height: 29px; text-transform: uppercase;
	color: var(--e-global-color-primary, #004799); margin: 0 0 8px;
}
.gap-flow-box p{
	font-family: var(--gap-font-body); font-weight: 500;
	font-size: 16px; line-height: 19.2px; letter-spacing: .2px;
	color: var(--e-global-color-primary, #004799); margin: 0;
}

/* ---- Mobil: Akkordeon (Entwurf 543:7851) ---------------------
   Kein Fluss, keine Fixierung. Die Punkte stehen als volle
   Schaltflaechen untereinander; ein Tipp klappt seine Box direkt
   darunter auf. Nur einer ist offen. */
@media (max-width: 767px){
	.gap-tipps{ height: auto; }
	.gap-tipps-pin{ position: static; height: auto; overflow: visible;
		padding: 48px 20px 56px; }
	.gap-tipps-stage{ position: static; width: auto; height: auto;
		margin: 0; transform: none; }
	.gap-tipps-head{ position: static; width: auto; margin: 0 0 34px;
		text-align: left; gap: 15px; }
	.gap-sec-badge{ justify-content: flex-start; }
	.gap-sec-num{ width: 25px; height: 30px; }
	.gap-sec-num .elementor-heading-title{ font-size: 20px; line-height: 24px; }
	.gap-sec-label .elementor-heading-title{ font-size: 20px; line-height: 18px; }
	.gap-tipps-h2 .elementor-heading-title{ font-size: 39px; line-height: 40px; }
	.gap-tipps-lead .elementor-heading-title{ font-size: 16px; line-height: 21px; }

	.gap-flow-wrap{ position: static; }
	.gap-flow{ display: none; }

	.gap-flow-tip{ display: block; margin: 0 0 8px; }
	.gap-flow-node{
		position: static; width: 100%; justify-content: center;
		font-size: 18px; cursor: pointer; margin: 0;
	}
	.gap-flow-box{
		position: static; width: auto; margin: 8px 0 0;
		opacity: 1; transform: none; pointer-events: auto;
		max-height: 0; padding-top: 0; padding-bottom: 0;
		overflow: hidden;
		transition: max-height 340ms ease, padding 340ms ease, opacity 260ms ease;
	}
	.gap-flow-tip:not(.is-offen) .gap-flow-box{ opacity: 0; }
	.gap-flow-tip.is-offen .gap-flow-box{
		max-height: 460px; padding-top: 20px; padding-bottom: 20px; opacity: 1;
	}
	.gap-flow-box h3{ font-size: 26px; line-height: 24px; }
	.gap-flow-box p{ line-height: 21px; }
}

@media (prefers-reduced-motion: reduce){
	.gap-flow-node, .gap-flow-box, .gap-flow-node img{ transition: none; }
}


/* ════════════════════════════════════════════════
   12 · KORREKTUREN 15.09.2026 (TK, dritte Runde)
   ════════════════════════════════════════════════ */

/* Abschnittsmarke: Nummer bleibt auf ihrer Grundlinie, der Tropfen
   rueckt 4 px hoch — dadurch sitzt die Nummer mittig im Tropfen. */
.gap-sec-num::before{ top: -4px; bottom: 4px; }

/* Ankersprung aus der Navigation darf nicht unter der Pille landen. */
.gap-intro, .gap-check, .gap-tipps{ scroll-margin-top: 110px; }

/* Selbst-Check: Balken sitzt direkt unter den beiden Zahlen. */
.gap-calc-share{ margin-top: 0; }
/* Der Aufklapper bleibt am Kartenfuss stehen und oeffnet nach oben:
   Beim Oeffnen rutscht der ganze Block samt Zeile nach oben in die
   freie Flaeche hinein, die Reihenfolge bleibt normal.
   Die beiden Abstaende darueber sind dafuer etwas enger gesetzt. */
.gap-assum{ margin-top: auto; padding-top: 0; }
.gap-calc-tiles{ margin-bottom: 12px; }
.gap-bar{ margin-bottom: 12px; }

/* Wappen steht auch im Burger-Bereich rechts neben dem Umschalter. */
@media (max-width: 1024px){
	.gap-wappen{ display: flex; order: 2; flex: 0 0 auto; align-items: center; }
	.gap-navwrap{ gap: 12px; }
	.gap-wappen img{ height: 44px; width: auto; }
}

/* Der Stoerer hatte `pointer-events: none` — damit kam nie ein
   Hover an. Elementor setzt auf Widgets ausserdem eine eigene
   transition, die unsere ueberschreibt; beides hier korrigiert. */
.gap-stoerer, .gap-hero-stoerer{
	pointer-events: auto;
	transition: transform 420ms cubic-bezier(.22,.61,.36,1) !important;
}
.gap-hero-stoerer img, .gap-stoerer img{ pointer-events: none; }

/* Spar-Tipps: Inhalt der Infobox zentriert. */
.gap-flow-box{ text-align: center; }

/* Mobil: Kopfzeilen und Fließtext linksbündig wie im Entwurf. */
@media (max-width: 767px){
	.gap-intro-text .elementor-heading-title,
	.gap-check-head,
	.gap-check-head .elementor-heading-title,
	.gap-tipps-head,
	.gap-tipps-head .elementor-heading-title{
		text-align: left; margin-left: 0; margin-right: 0;
	}
	.gap-check-head{ max-width: none; }
	.gap-check-head .gap-sec-badge{ justify-content: flex-start; }
	.gap-flow-box{ text-align: left; }
}

/* ============================================================
   13 · KORREKTUREN (vierte Runde)
   ============================================================ */

/* 13.1 Abschnittsmarke — Tropfen und Nummer exakt nach Figma.
   Bezugspunkt ist die Oberkante des Label-Zeilenkastens:
   Desktop  Tropfen -14.24  Nummer -2.76   (Label-Zeile 27)
   Mobil    Tropfen -12     Nummer -6      (Label-Zeile 18)     */
.gap-sec-badge{
  align-items: center;
  gap: var(--gap-marke-luecke, 8px);
}
.gap-sec-num{
  display: block;
  position: relative;
  width:  var(--gap-marke-tropfen-b, 40px);
  height: var(--gap-marke-tropfen-h, 46px);
  flex: 0 0 auto;
  padding: 0;
  overflow: visible;
}
.gap-sec-num::before{
  top: var(--gap-marke-tropfen-v, -1.97px);
  bottom: auto;
  left: 0;
  right: 0;
  height: var(--gap-marke-tropfen-h, 46px);
}
.gap-sec-num .elementor-heading-title{
  position: absolute;
  left: 0;
  right: 0;
  top: var(--gap-marke-nr-v, 9.51px);
  transform: none; /* fruehere 2px-Korrektur aufheben */
  margin: 0;
  font-size:   var(--gap-marke-nr-gr, 28px);
  line-height: var(--gap-marke-nr-zh, 29.18px);
  text-align: center;
}
.gap-sec-label .elementor-heading-title{
  font-size:   var(--gap-marke-lab-gr, 30px);
  line-height: var(--gap-marke-lab-zh, 27px);
}

/* 13.2 Mehr Luft zwischen Kopf und erstem Flusspunkt.
   Fluss, Punkte und Boxen wandern gemeinsam nach unten;
   die Kamera rechnet ihren Versatz selbst aus dem DOM. */
.gap-tipps{ --gap-buehne-h: 1930px; }
.gap-flow{ top: calc(-27.5px + var(--gap-fluss-ab, 110px)); }
.gap-flow-node,
.gap-flow-box{ translate: 0 var(--gap-fluss-ab, 110px); }

@media (max-width: 767px){
  /* 13.3 Abschnittsmarke mobil */
  .gap-sec-badge{
    --gap-marke-luecke: 9px;
    --gap-marke-tropfen-b: 25px;
    --gap-marke-tropfen-h: 30px;
    --gap-marke-tropfen-v: -3px;
    --gap-marke-nr-v: 3px;
    --gap-marke-nr-gr: 20px;
    --gap-marke-nr-zh: 24px;
    --gap-marke-lab-gr: 20px;
    --gap-marke-lab-zh: 18px;
  }

  /* 13.4 Mobile Überschriften — gemessen am Figma-Entwurf 390w:
     Zeilenabstand 58 (174 / 3 Zeilen), Schriftgrad 64,
     Zeichenabstand -2 (Ist-Breite 339.5 px stimmt damit exakt). */
  .gap-check-h2 .elementor-heading-title,
  .gap-tipps-h2 .elementor-heading-title{
    font-size: 64px;
    line-height: 58px;
    letter-spacing: -2px;
  }
  .gap-check-lead, .gap-check-lead p,
  .gap-check-lead .elementor-heading-title,
  .gap-tipps-lead, .gap-tipps-lead p,
  .gap-tipps-lead .elementor-heading-title{
    font-size: 16px;
    line-height: 20.8px;
    letter-spacing: 0.2px;
  }

  /* mobil laufen Punkte und Boxen im Fluss nicht mit */
  .gap-flow-node,
  .gap-flow-box{ translate: none; }
}

/* ============================================================
   14 · SECTION 03 WAS WIR TUN
   Karten 378 x 532, Radius 32. Beim Zeigen klappt der Text auf.
   Figma-Prototyp: ON_HOVER -> SMART_ANIMATE, EASE_OUT, 0.3 s.
   ============================================================ */

.gap-wastun{
  background: #FFFFFF;
  padding: 110px var(--gap-edge) 196px;
  scroll-margin-top: 110px;
}

/* 14.1 Kopf */
.gap-wastun-head{
  width: min(788px, 100%);
  margin-inline: auto;
  text-align: center;
  padding: 0;
}
.gap-wastun-h2{ width: min(661px, 100%); margin-inline: auto; }
.gap-wastun-h2 .elementor-heading-title{
  font-family: var(--gap-font-head);
  font-weight: 900;
  font-size: 82px;
  line-height: 73.8px;
  letter-spacing: -2px;
  text-transform: uppercase;
  white-space: pre-line;
  color: var(--e-global-color-primary, #004799);
  margin: 0;
}
.gap-wastun-lead, .gap-wastun-lead .elementor-heading-title{
  font-family: var(--gap-font-body);
  font-weight: 500;
  font-size: 20.5px;
  line-height: 24.6px;
  letter-spacing: -0.1px;
  color: var(--e-global-color-primary, #004799);
  margin: 0;
}
.gap-wastun-lead{ width: min(788px, 100%); margin-inline: auto; }

/* 14.2 Kartenreihe */
.gap-karten-wrap{ margin-top: 79px !important; }
.gap-karten{
  display: flex;
  gap: 8px;
  justify-content: center;
  width: min(1150px, 100%);
  margin-inline: auto;
}
.gap-karte{
  position: relative;
  flex: 1 1 0;
  max-width: 378px;
  aspect-ratio: 378 / 532;
  border-radius: 32px;
  overflow: hidden;
  isolation: isolate;
  outline: none;
}
.gap-karte-bild{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.gap-karte-schleier{
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,42,92,0) 35%,
    rgba(0,42,92,.35) 65%,
    rgba(0,42,92,.95) 100%);
}
.gap-karte-inhalt{
  position: absolute;
  left: 40px; right: 40px; bottom: 29px;
}
.gap-karte-kopf{
  font-family: var(--gap-font-head);
  font-weight: 900;
  font-size: 42px;
  line-height: 31.5px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #FFFFFF !important;
  margin: 0;
}

/* 14.3 Auffalten — 0fr auf 1fr misst die echte Texthöhe mit */
.gap-karte-auf{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(0, 0, .58, 1);
}
.gap-karte-auf-innen{ overflow: hidden; }
.gap-karte-text{
  margin: 0;
  padding-top: 15px;
  font-family: var(--gap-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 0.2px;
  color: #E3F1FF;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0, 0, .58, 1);
}
.gap-karte.ist-offen .gap-karte-auf,
.gap-karte:focus-visible .gap-karte-auf{ grid-template-rows: 1fr; }
.gap-karte.ist-offen .gap-karte-text,
.gap-karte:focus-visible .gap-karte-text{ opacity: 1; }
@media (hover: hover){
  .gap-karte:hover .gap-karte-auf{ grid-template-rows: 1fr; }
  .gap-karte:hover .gap-karte-text{ opacity: 1; }
}
.gap-karte:focus-visible{ box-shadow: 0 0 0 3px #27BDEF; }

@media (max-width: 1024px){
  .gap-wastun{ padding: 90px var(--gap-edge) 130px; }
  .gap-karte-inhalt{ left: 32px; right: 32px; }
  .gap-karte-kopf{ font-size: 38px; line-height: 28.5px; }
}

/* 14.4 Mobil: Karussell, eine Karte mittig, Nachbarn angeschnitten */
@media (max-width: 767px){
  .gap-wastun{ padding: 90px var(--gap-edge) 60px; }
  .gap-wastun-head{ width: 100%; text-align: left; }
  .gap-wastun-lead{ width: 100%; }
  .gap-wastun-h2 .elementor-heading-title{
    font-size: 64px; line-height: 58px; letter-spacing: -2px;
  }
  .gap-wastun-lead, .gap-wastun-lead .elementor-heading-title{
    font-size: 16px; line-height: 20.8px; letter-spacing: 0.2px;
  }
  .gap-karten-wrap{ margin-top: 15px !important; }
  .gap-karten{
    width: auto;
    gap: 10px;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gap-edge) * -1);
    padding-inline: calc((100vw - 291px) / 2);
    scroll-padding-inline: calc((100vw - 291px) / 2);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .gap-karten::-webkit-scrollbar{ display: none; }
  .gap-karte{
    flex: 0 0 291px;
    width: 291px;
    max-width: none;
    aspect-ratio: 291 / 447;
    scroll-snap-align: center;
  }
  .gap-karte-inhalt{ left: 32px; right: 32px; bottom: 29px; }
  .gap-karte-kopf{ font-size: 42px; line-height: 31.5px; }
}

/* 14.5 Gruene Zeile gilt ab jetzt in jeder Ueberschrift,
   nicht mehr pro Section einzeln. */
.gap-gruen{ color: var(--e-global-color-accent, #009881) !important; }

/* ============================================================
   14.6 KORREKTUREN SECTION 03
   ============================================================ */

/* Karten sind im Entwurf als Ganzes gekippt, nicht nur die Fotos.
   Figma: 2.5 / -2 / 2.5 Grad auf Desktop, -1.5 / 1.5 / -1.5 mobil. */
.gap-karte:nth-child(1){ transform: rotate(2.5deg); }
.gap-karte:nth-child(2){ transform: rotate(-2deg); }
.gap-karte:nth-child(3){ transform: rotate(2.5deg); }

/* Luft fuer die gekippten Ecken (2.5 Grad auf 378 px sind ~17 px) */
.gap-karten{ padding-block: 20px; }

/* Unter 1025 wird die Reihe zum Karussell. */
@media (max-width: 1024px){
  .gap-karten{
    --kw: min(calc((100vw - 3 * var(--gap-edge)) / 2), 378px);
    width: auto;
    justify-content: flex-start;
    gap: var(--gap-edge);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gap-edge) * -1);
    padding-inline: var(--gap-edge);
    scroll-padding-inline: var(--gap-edge);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .gap-karten::-webkit-scrollbar{ display: none; }
  .gap-karte{
    flex: 0 0 var(--kw);
    width: var(--kw);
    max-width: none;
    aspect-ratio: 378 / 532;
    scroll-snap-align: start;
  }
}

/* Bis 599: eine Karte mittig, Nachbarn angeschnitten — wie im Entwurf.
   390 px ergibt damit genau 291 px Karte und 49.5 px Anschnitt. */
@media (max-width: 599px){
  .gap-karten{
    --kw: min(calc(100vw - 99px), 420px);
    gap: 10px;
    padding-inline: calc((100vw - var(--kw)) / 2);
    scroll-padding-inline: calc((100vw - var(--kw)) / 2);
  }
  .gap-karte{
    aspect-ratio: 291 / 447;
    scroll-snap-align: center;
  }
  .gap-karte:nth-child(1){ transform: rotate(-1.5deg); }
  .gap-karte:nth-child(2){ transform: rotate(1.5deg); }
  .gap-karte:nth-child(3){ transform: rotate(-1.5deg); }
  .gap-karte-inhalt{ left: 32px; right: 32px; bottom: 29px; }
  .gap-karte-kopf{ font-size: 42px; line-height: 31.5px; }
}

/* ============================================================
   14.7 Echte Kartengroesse: 360 x 520
   Die 378 x 532 aus der ersten Fassung waren der achsenparallele
   Umriss der gedrehten Karte, nicht die Karte selbst.
   Raster: Karte 360, Abstand 24, Reihe 1128 — damit beruehren
   sich die gekippten Ecken nicht mehr (2.5° auf 520 px = 11.3 px).
   ============================================================ */
.gap-karten{
  width: min(1128px, 100%);
  gap: 24px;
}
.gap-karte{
  max-width: 360px;
  aspect-ratio: 360 / 520;
}
.gap-karte-inhalt{ left: 40px; right: 40px; bottom: 28px; }

@media (max-width: 1024px){
  .gap-karten{
    --kw: min(calc((100vw - 3 * var(--gap-edge)) / 2), 360px);
    width: auto;
    gap: var(--gap-edge);
  }
  .gap-karte{ aspect-ratio: 360 / 520; }
}

@media (max-width: 599px){
  /* 390 px ergibt damit 280 px Karte und 55 px Anschnitt — Entwurfswerte */
  .gap-karten{
    --kw: min(calc(100vw - 110px), 420px);
    gap: 22px;
    padding-inline: calc((100vw - var(--kw)) / 2);
    scroll-padding-inline: calc((100vw - var(--kw)) / 2);
  }
  .gap-karte{ aspect-ratio: 280 / 440; }
  .gap-karte-inhalt{ left: 30px; right: 30px; bottom: 26px; }
}

/* 14.8 Bild muss die Karte ausfuellen. Eine globale img-Regel
   (height: auto) schlaegt sonst die Klassenregel und laesst unten
   13 px Rand stehen. */
.gap-karte-bild{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* ============================================================
   15 · SECTION 04 WASSER IN ZAHLEN
   Dunkelblauer Grund, sieben Zahlenzeilen, Fluss als Verzierung
   oben rechts (Figma 543:7155, oben und rechts angeschnitten).
   ============================================================ */

.gap-zahlen-sec{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--e-global-color-primary, #004799);
  padding: 110px var(--gap-edge) 85px;
  scroll-margin-top: 110px;
}

/* 15.1 Verzierung */
.gap-zahlen-deko{
  position: absolute;
  top: -8px;
  right: -27px;
  width: 671px;
  height: 480px;
  margin: 0 !important;
  pointer-events: none;
  z-index: 0;
}
.gap-zahlen-fluss{ display: block; width: 671px; height: 480px; }
.gap-zahlen-fluss path{ fill: #B0DEFA; }

/* 15.2 Kopf */
.gap-zahlen-head{
  position: relative;
  z-index: 1;
  width: min(793px, 100%);
  margin-inline: auto;
  padding: 0;
}
.gap-zahlen-h2{ width: min(657px, 100%); }
.gap-zahlen-h2 .elementor-heading-title{
  font-family: var(--gap-font-head);
  font-weight: 900;
  font-size: 82px;
  line-height: 73.8px;
  letter-spacing: -2px;
  text-transform: uppercase;
  white-space: pre-line;
  color: #FFFFFF;
  margin: 0;
}
.gap-zahlen-lead, .gap-zahlen-lead .elementor-heading-title{
  font-family: var(--gap-font-body);
  font-weight: 500;
  font-size: 20.5px;
  line-height: 24.6px;
  letter-spacing: -0.1px;
  color: #FFFFFF;
  margin: 0;
}

/* Abschnittsmarke auf dunklem Grund: Tropfen hell, Nummer blau */
.gap-marke-hell{ --gap-sec-color: #27BDEF; }
.gap-marke-hell .gap-sec-num .elementor-heading-title{ color: #FFFFFF !important; }
.gap-marke-hell .gap-sec-label .elementor-heading-title{ color: #27BDEF; }

/* 15.3 Zahlenzeilen */
.gap-zahlen-wrap{
  position: relative;
  z-index: 1;
  margin-top: 58px !important;
}
.gap-zahlen{
  width: min(1096px, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.gap-zahl-reihe{
  display: grid;
  grid-template-columns: 630px minmax(0, 372px);
  align-items: start;
}
.gap-zahl-wert{
  font-family: var(--gap-font-head);
  font-weight: 900;
  font-size: 164px;
  line-height: 164px;
  letter-spacing: 0.2px;
  color: #27BDEF;
  display: block;
  font-variant-numeric: tabular-nums;
}
.gap-zahl-info{ padding-top: 23px; }
.gap-zahl-tag{
  font-family: var(--gap-font-head);
  font-weight: 900;
  font-size: 32px;
  line-height: 28.8px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #AFDFF9 !important;
  margin: 0 0 12px;
}
.gap-zahl-text{
  font-family: var(--gap-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 0.2px;
  color: #FFFFFF;
  margin: 0;
}

@media (max-width: 1240px){
  .gap-zahl-reihe{ grid-template-columns: minmax(0, 1fr) minmax(0, 372px); }
}

@media (max-width: 1024px){
  .gap-zahlen-sec{ padding: 90px var(--gap-edge) 70px; }
  .gap-zahlen-deko{ width: 470px; height: 336px; right: -20px; }
  .gap-zahlen-fluss{ width: 470px; height: 336px; }
  .gap-zahl-wert{ font-size: 120px; line-height: 120px; }
  .gap-zahl-info{ padding-top: 16px; }
}

/* 15.4 Mobil: Zahl über dem Text */
@media (max-width: 767px){
  .gap-zahlen-sec{ padding: 98px var(--gap-edge) 96px; }
  .gap-zahlen-head{ width: 100%; text-align: left; }
  .gap-zahlen-h2{ width: 100%; }
  .gap-zahlen-h2 .elementor-heading-title{
    font-size: 64px; line-height: 58px; letter-spacing: -2px;
  }
  .gap-zahlen-lead, .gap-zahlen-lead .elementor-heading-title{
    font-size: 16px; line-height: 20.8px; letter-spacing: 0.2px;
  }
  .gap-zahlen-wrap{ margin-top: 34px !important; }
  .gap-zahlen{ width: 100%; gap: 48px; }
  .gap-zahl-reihe{ grid-template-columns: 1fr; }
  .gap-zahl-wert{ font-size: 82px; line-height: 82px; }
  .gap-zahl-info{ padding-top: 34px; }
  .gap-zahl-tag{ margin-bottom: 15px; }
  .gap-zahl-text{ line-height: 20.8px; }
  .gap-zahlen-deko{ width: 330px; height: 236px; right: -14px; top: -6px; }
  .gap-zahlen-fluss{ width: 330px; height: 236px; }
}

/* 15.5 Kopf linksbuendig in der 1096er Spalte — im Entwurf starten
   Marke, h2 und Lead alle bei x 172 von 1440, also am linken Rand
   der Inhaltsspalte, nicht mittig. */
.gap-zahlen-head{
  width: min(1096px, 100%);
  text-align: left;
}
.gap-zahlen-h2{ width: min(657px, 100%); margin-inline: 0; }
.gap-zahlen-lead{ width: min(793px, 100%); margin-inline: 0; }
@media (max-width: 767px){
  .gap-zahlen-h2, .gap-zahlen-lead{ width: 100%; }
}

/* 15.6 Kit-Regel fuer h3 schlaegt mobil die Klassenregel — daher fest. */
.gap-zahl-tag{
  font-size: 32px !important;
  line-height: 28.8px !important;
}
@media (max-width: 767px){
  /* Zeilenabstand wie im Entwurf: Inhalt ~234, Luft dazwischen ~33 */
  .gap-zahlen{ gap: 34px; }
}

/* 15.7 Mobil ohne Verzierung — der Figma-Mobilentwurf hat sie nicht,
   und ueber der Headline stoert sie die Lesbarkeit. */
@media (max-width: 767px){
  .gap-zahlen-deko{ display: none; }
}

/* ==========================================================================
   16 · KORREKTUREN (fünfte Runde)
   ========================================================================== */

/* 16.1 Section 04: Marke linksbündig über der Headline (Figma: p.eyebrow x=172
   auf Desktop, x=20 mobil — gleiche Kante wie h2). Die geteilte Badge-Regel
   zentriert, weil die übrigen Sektionen zentrierte Köpfe haben. */
.gap-zahlen-head .gap-sec-badge{ justify-content: flex-start; }

/* 16.2 Footer: Spaltenüberschriften in Versalien (Figma textCase UPPER,
   11.5 / 17.86, letter-spacing -0.1) */
.gap-foot-head .elementor-heading-title{
  text-transform: uppercase;
  letter-spacing: -0.1px;
  line-height: 17.86px;
}


/* ==========================================================================
   17 · SECTION 05 HOCHWASSERSCHUTZ
   Figma 543:9501 (Desktop) / 668:15928 (mobil)
   ========================================================================== */

.gap-hws{
  background:#FFFFFF;
  padding:108px 0 116px;
  scroll-margin-top:110px;
}
.gap-hws-head,
.gap-hws-info,
.gap-traun,
.gap-gut,
.gap-hws .gap-karten-wrap{ padding-inline:var(--gap-edge); }

/* 17.1 Kopf --------------------------------------------------------------- */
.gap-hws-head{ width:100%; text-align:center; }
.gap-hws-h2{ width:min(661px,100%); margin-inline:auto; }
.gap-hws-h2 .elementor-heading-title,
.gap-hws-h2b .elementor-heading-title,
.gap-ref-title .elementor-heading-title{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:82px; line-height:73.8px; letter-spacing:-2px;
  text-transform:uppercase; white-space:pre-line;
  color:var(--e-global-color-primary,#004799); margin:0;
}
.gap-hws-lead{ width:min(793px,100%); margin-inline:auto; }
.gap-hws-lead, .gap-hws-lead .elementor-heading-title,
.gap-hws-lead2, .gap-hws-lead2 .elementor-heading-title,
.gap-ref-lead, .gap-ref-lead .elementor-heading-title{
  font-family:var(--gap-font-body); font-weight:500;
  font-size:20.5px; line-height:24.6px; letter-spacing:-0.1px;
  color:var(--e-global-color-primary,#004799); margin:0;
}

/* 17.2 Bildkarten — gleiche Bausteine wie Section 03 --------------------- */
.gap-hws .gap-karten-wrap{ margin-top:65px !important; }
.gap-hws .gap-karten{ width:min(1146px,100%); gap:22px; }
.gap-hws .gap-karte:nth-child(1){ transform:rotate(2deg); }
.gap-hws .gap-karte:nth-child(2){ transform:rotate(-2.5deg); }
.gap-hws .gap-karte:nth-child(3){ transform:rotate(2deg); }

/* 17.3 Infoblock --------------------------------------------------------- */
.gap-hws-info{ margin-top:114px; text-align:center; }
.gap-hws-h2b{ width:min(661px,100%); margin-inline:auto; }
.gap-hws-lead2{ width:min(793px,100%); margin-inline:auto; }
.gap-hws-btns-wrap{ margin-top:9px; }
.gap-hws-btns{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

/* 17.4 HORA-Band --------------------------------------------------------- */
.gap-hora-wrap{ margin-top:115px; }
.gap-hora{ background:#AFDFF9; padding:47px var(--gap-edge); }
.gap-hora-inner{ width:min(1096px,100%); margin-inline:auto; text-align:center; }
.gap-hora-h{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:42px; line-height:31.5px; letter-spacing:.2px;
  text-transform:uppercase; color:var(--e-global-color-primary,#004799);
  margin:0 0 11px;
}
.gap-hora-p{
  width:min(625px,100%); margin:0 auto;
  font-size:20.5px; line-height:24.6px; letter-spacing:-0.1px;
  color:var(--e-global-color-primary,#004799);
}
.gap-hora-link{ font-weight:800; color:inherit; text-decoration:none; }
.gap-hora-link:hover{ text-decoration:underline; }

/* 17.5 Traun-Teaser ------------------------------------------------------ */
.gap-traun{ margin-top:138px; text-align:center; }
.gap-ref-title{ width:min(952px,100%); margin-inline:auto; }
.gap-ref-lead{ width:min(793px,100%); margin-inline:auto; }
.gap-traun-wrap{ margin-top:29px; }
.gap-traun-karte{
  position:relative; width:min(1098px,100%); margin-inline:auto;
  aspect-ratio:1098/495; /* TK: +75 px hoeher (vorher 1098/420) */ border-radius:36px; overflow:hidden;
  isolation:isolate; background:var(--e-global-color-primary,#004799);
}
.gap-traun-video{
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  object-fit:cover; display:block; z-index:0;
}
.gap-traun-schleier{
  position:absolute; inset:0 0 0 50%; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(0,42,92,.94) 8%, rgba(0,42,92,.40) 55%, rgba(0,42,92,0) 85%);
}
.gap-traun-panel{
  position:absolute; left:0; top:0; bottom:0; width:50%; z-index:2;
  background:var(--e-global-color-primary,#004799);
  padding:49px 34px 0; text-align:left;
}
.gap-traun-kopf{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:42px !important; line-height:31.5px !important; letter-spacing:.2px;
  text-transform:uppercase; color:#FFFFFF !important; margin:0 0 15px;
}
.gap-traun-text{
  font-size:16px; line-height:19.2px; letter-spacing:.2px;
  color:#FFFFFF; margin:0; max-width:425px;
}
.gap-kpis{ display:flex; gap:48px; margin-top:48px; }
.gap-kpi{ display:flex; flex-direction:column; }
.gap-kpi-wert{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:60px; line-height:72px; letter-spacing:.2px; color:#AFDFF9;
}
.gap-kpi-lab{ font-size:12.5px; line-height:15px; letter-spacing:.2px; color:#FFFFFF; }
.gap-traun-panel .gap-btn{ margin-top:42px; }

/* 17.6 Gut gelaufen ------------------------------------------------------ */
.gap-gut{ margin-top:180px; text-align:center; }
.gap-projekte-wrap{ position:relative; margin-top:11px; }
.gap-projekte{
  display:flex; justify-content:center; margin-inline:auto;
  width:min(1098px,100%); gap:24px;
}
.gap-projekt{
  position:relative; flex:1 1 0; max-width:537px; aspect-ratio:537/420;
  border-radius:24px; overflow:hidden; isolation:isolate; outline:none;
  text-align:left;
}
.gap-projekt-bild{
  position:absolute; inset:0; width:100% !important; height:100% !important;
  object-fit:cover; display:block;
}
.gap-projekt-schleier{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,42,92,.94) 8%, rgba(0,42,92,.40) 55%, rgba(0,42,92,0) 85%);
}
.gap-projekt-inhalt{ position:absolute; left:30px; right:30px; bottom:30px; }
.gap-projekt-kopf{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:32px !important; line-height:28.8px !important; letter-spacing:.2px;
  text-transform:uppercase; color:#FFFFFF !important; margin:0;
}
.gap-projekt-auf{ display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 300ms cubic-bezier(0,0,.58,1); }
.gap-projekt-auf-innen{ overflow:hidden; }
.gap-projekt-text{
  margin:0; padding-top:9px; font-size:16px; line-height:19.2px;
  letter-spacing:.2px; color:#EDF8FE; opacity:0;
  transition:opacity 300ms cubic-bezier(0,0,.58,1);
}
.gap-projekt .gap-kpis{ gap:24px; margin-top:9px; }
.gap-projekt .gap-kpi-wert{ font-size:26px; line-height:31.2px; color:#27BDEF; }
.gap-projekt .gap-kpi-lab{ color:#EDF8FE; }
.gap-projekt.ist-offen .gap-projekt-auf,
.gap-projekt:focus-visible .gap-projekt-auf{ grid-template-rows:1fr; }
.gap-projekt.ist-offen .gap-projekt-text,
.gap-projekt:focus-visible .gap-projekt-text{ opacity:1; }
@media (hover:hover){
  .gap-projekt:hover .gap-projekt-auf{ grid-template-rows:1fr; }
  .gap-projekt:hover .gap-projekt-text{ opacity:1; }
}
.gap-gut-stoerer{
  position:absolute; top:-166px;
  right:max(calc(var(--gap-edge) * -1 + 12px), calc(50% - 610px)); width:183px; height:225px;
  pointer-events:none; z-index:2;
}

/* 17.7 Punkte und CTA unter dem Slider ----------------------------------- */
.gap-projekte-punkte{ display:none; justify-content:center; gap:8px; margin-top:13px; }
.gap-projekte-punkte button{
  width:10px; height:10px; padding:0; border:0; border-radius:5px;
  background:#AFDFF9; cursor:pointer; transition:width 200ms, background-color 200ms;
}
.gap-projekte-punkte button[aria-selected="true"]{ width:30px; background:var(--e-global-color-accent,#009881); }
.gap-projekte-cta{ display:flex; justify-content:center; margin-top:45px; }

/* 17.8 Tablet ------------------------------------------------------------ */
@media (max-width:1240px){ .gap-gut-stoerer{ right:-40px; } }

@media (max-width:1024px){
  .gap-hws{ padding:90px 0 96px; }
  .gap-projekte{
    width:auto; justify-content:flex-start; gap:var(--gap-edge);
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gap-edge)*-1); padding-inline:var(--gap-edge);
    scroll-padding-inline:var(--gap-edge); scrollbar-width:none;
  }
  .gap-projekte::-webkit-scrollbar{ display:none; }
  .gap-projekt{
    flex:0 0 min(537px, calc(100vw - 3*var(--gap-edge)));
    width:auto; max-width:none; scroll-snap-align:start;
  }
  .gap-projekte-punkte{ display:flex; }
  .gap-gut-stoerer{ width:140px; height:172px; top:-110px; right:0; }
}

/* 17.9 Teaser stapeln ---------------------------------------------------- */
@media (max-width:900px){
  .gap-traun-karte{ aspect-ratio:auto; overflow:visible; background:none; border-radius:0; }
  .gap-traun-video{
    position:relative; inset:auto; display:block;
    width:100% !important; height:auto !important;
    aspect-ratio:351/248; border-radius:24px;
  }
  .gap-traun-schleier{ inset:0 0 auto 0; height:100%; display:none; }
  .gap-traun-panel{
    position:relative; inset:auto; width:100%;
    border-radius:24px; padding:33px 31px 40px; margin-top:0;
  }
  .gap-traun-text{ max-width:none; }
}

/* 17.10 Mobil ------------------------------------------------------------ */
@media (max-width:767px){
  .gap-hws{ padding:90px 0 96px; }

  .gap-hws-head, .gap-hws-info, .gap-traun, .gap-gut{ text-align:left; }
  .gap-hws-h2, .gap-hws-h2b, .gap-hws-lead, .gap-hws-lead2,
  .gap-ref-title, .gap-ref-lead{ width:100%; margin-inline:0; }

  .gap-hws-h2 .elementor-heading-title,
  .gap-hws-h2b .elementor-heading-title,
  .gap-ref-title .elementor-heading-title{
    font-size:64px; line-height:58px; letter-spacing:-2px;
  }
  .gap-hws-lead, .gap-hws-lead .elementor-heading-title,
  .gap-hws-lead2, .gap-hws-lead2 .elementor-heading-title,
  .gap-ref-lead, .gap-ref-lead .elementor-heading-title{
    font-size:16px; line-height:20.8px; letter-spacing:.2px;
  }

  .gap-hws .gap-karten-wrap{ margin-top:53px !important; }
  .gap-hws-info{ margin-top:67px; }
  .gap-hws-btns{ flex-direction:column; align-items:flex-start; gap:13px; }
  .gap-hws-btns-wrap{ margin-top:21px; }

  .gap-hora-wrap{ margin-top:83px; }
  .gap-hora{ padding:40px var(--gap-edge) 44px; }
  .gap-hora-inner{ text-align:left; }
  .gap-hora-h{ font-size:40px; line-height:36px; margin-bottom:9px; }
  .gap-hora-p{ width:100%; margin-inline:0; font-size:16px; line-height:20.8px; letter-spacing:.2px; }

  .gap-traun{ margin-top:69px; }
  .gap-traun-wrap{ margin-top:34px; }
  .gap-traun-kopf{ margin-bottom:12px; }
  .gap-traun-text{ font-size:16px; line-height:20.8px; }
  .gap-kpis{ flex-wrap:wrap; gap:26px 48px; margin-top:38px; }
  .gap-kpi-wert{ font-size:52px; line-height:52px; }
  .gap-kpi-lab{ line-height:16.3px; }
  .gap-traun-panel .gap-btn{ margin-top:34px; }

  .gap-gut{ margin-top:70px; }
  .gap-projekte-wrap{ margin-top:16px; }
  .gap-projekt{ flex:0 0 calc(100vw - 2*var(--gap-edge)); aspect-ratio:351/420; }
  .gap-projekt .gap-kpis{ flex-wrap:wrap; gap:20px 17px; margin-top:9px; }
  .gap-projekt .gap-kpi{ flex:0 0 calc(50% - 9px); }
  .gap-projekt .gap-kpi-wert{ font-size:32px; line-height:38.4px; }
  .gap-projekte-cta{ justify-content:flex-start; margin-top:30px; }
  .gap-gut-stoerer{ width:104px; height:128px; top:-84px; right:0; }
}

@media (prefers-reduced-motion: reduce){
  .gap-projekt-auf, .gap-projekt-text{ transition:none; }
}


/* ==========================================================================
   18 · KORREKTUREN (sechste Runde)
   ========================================================================== */

/* 18.1 Section 04: Trennlinie unter jeder Zahl.
   Figma: jede Reihe hat unten 1 px rgba(175,223,249,.28), Raster 198. */
.gap-zahl-reihe{ position:relative; }
.gap-zahl-reihe::after{
  content:""; position:absolute; left:0; right:0; top:151px; height:1px;
  background:rgba(175,223,249,.28); pointer-events:none;
}
@media (max-width:1024px){
  .gap-zahl-reihe::after{ top:auto; bottom:-17px; }
}

/* 18.2 Section 05: Copy wieder mittig. Die Typo-Regel darunter setzte
   margin:0 und hat damit das margin-inline:auto ausgehebelt. */
.gap-hws-lead, .gap-hws-lead2, .gap-ref-lead{ margin-inline:auto; }
@media (max-width:767px){
  .gap-hws-lead, .gap-hws-lead2, .gap-ref-lead{ margin-inline:0; }
}

/* 18.3 Buttons: neue Hover-Zustaende */
.gap-btn-primary:hover, .gap-btn-primary:focus-visible{
  background: var(--e-global-color-accent, #009881);
  color:#FFFFFF;
}
.gap-btn-primary:active{ background:#007E6B; color:#FFFFFF; }
.gap-btn-green:hover, .gap-btn-green:focus-visible{
  background: var(--e-global-color-surflight, #AFDFF9);
  color: var(--e-global-color-primary, #004799);
}
.gap-btn-green:active{
  background:#8FCFF3; color: var(--e-global-color-primary, #004799);
}

/* 18.4 Textlink hora.gv.at: gruen, bei Hover unterstrichen */
.gap-hora-link{
  color: var(--e-global-color-accent, #009881);
  text-decoration:none;
}
.gap-hora-link:hover, .gap-hora-link:focus-visible{
  color: var(--e-global-color-accent, #009881);
  text-decoration:underline;
}

/* 18.5 Footer: kein aktiver Menuepunkt.
   Elementor setzt bei Ankerlinks .elementor-item-active und faerbt den
   Punkt gruen samt Unterstrich. Im Footer soll nichts markiert sein. */
/* Elementor faerbt den aktiven Punkt in post-13/post-25 mit
   .elementor-widget-nav-menu .elementor-nav-menu--main
   .elementor-item.elementor-item-active - vier Klassen. Die alte
   Regel hier hatte nur drei und hat deshalb verloren. Gleiche
   Spezifitaet reicht, weil project.css spaeter geladen wird.
   .highlighted setzt Elementor beim Scroll-Spy, :focus bleibt
   nach einem Mausklick auf einen Ankerlink haengen - beide
   wuerden sonst genauso gruen leuchten. */
.gap-foot-nav .elementor-nav-menu--main .elementor-item.elementor-item-active,
.gap-foot-nav .elementor-nav-menu--main .elementor-item.highlighted,
.gap-foot-nav .elementor-nav-menu--main .elementor-item:focus:not(:focus-visible),
.gap-foot-nav .elementor-item.elementor-item-active{
  color: var(--e-global-color-surflight, #AFDFF9);
}
.gap-foot-nav .elementor-item.elementor-item-active:not(:hover)::after,
.gap-foot-nav .elementor-item.highlighted:not(:hover)::after{
  opacity:0 !important;
}


/* ==========================================================================
   19 · KORREKTUREN (siebte Runde)
   ========================================================================== */

/* 19.1 Trennlinien in Section 04 liefen durch den Text.
   Sie sassen auf fester Hoehe (151), Reihen mit langer Infospalte wachsen
   aber darueber hinaus. Jetzt haengt die Linie am Reihenende und liegt
   damit immer mittig im 34er-Abstand. */
.gap-zahl-reihe::after{ top:auto; bottom:-17px; }

/* 19.2 Tropfen-Stoerer bei „Gut gelaufen" mitanimieren.
   pointer-events:none hat den Hover verschluckt. */
.gap-gut-stoerer{ pointer-events:auto; }

/* 19.3 Traun-Teaser: zweifarbige Kartenueberschrift (Figma: „Sanierung"
   weiss, „Untere Traun" #AFDFF9) */
.gap-traun-kopf .gap-hell{ color:#AFDFF9 !important; }

/* 19.4 Traun-Teaser mobil genau nach Figma (707:4295 / 707:4298).
   Oben der Videoblock mit Radius 36 nur oben, darunter das Panel mit
   Radius 36 nur unten — zusammen eine Karte ohne Naht in der Mitte. */
@media (max-width:900px){
  .gap-traun-video{
    aspect-ratio:351/248;
    border-radius:36px 36px 0 0;
  }
  .gap-traun-schleier{
    display:block;
    position:absolute; left:0; right:0; top:0; bottom:auto;
    height:auto; aspect-ratio:351/248;
    border-radius:36px 36px 0 0;
  }
  .gap-traun-panel{
    border-radius:0 0 36px 36px;
    padding:32px 32px 34px;
  }
  .gap-traun-karte{ position:relative; }
}

@media (max-width:767px){
  .gap-traun-kopf{ margin-bottom:15px; }
  .gap-kpis{ gap:22px 48px; margin-top:37px; }
  .gap-traun-panel .gap-btn{ margin-top:33px; padding:14px 26px; }
}


/* 19.5 Die Zahl steht mittig zwischen den beiden Trennlinien.
   Die Infospalte kann hoeher werden als die Zahl — vorher hing die Zahl
   oben und die Reihe wirkte kopflastig. */
.gap-zahl-num{ align-self:center; }
@media (max-width:767px){
  .gap-zahl-num{ align-self:start; }
}


/* 19.6 Auch die Infospalte steht mittig zwischen den Trennlinien.
   Das feste padding-top von 23 hat sie nach unten geschoben — bei Reihen,
   in denen der Text hoeher ist als die Zahl, blieb oben Luft und unten
   keine. Zentriert wird dieselbe optische Lage erreicht (bei einer 164er
   Zahl und 117er Infospalte sind es genau 23,5 px), aber sie stimmt
   auch dann noch, wenn der Text die Reihe hoeher macht. */
@media (min-width:768px){
  .gap-zahl-info{ align-self:center; padding-top:0; }
}


/* ==========================================================================
   20 · SECTION 06 SEEN SEHEN
   Figma 543:7276 (Foto) + 632:13514 (Band) / mobil 676:16300 + 676:16384
   ========================================================================== */

.gap-seen{ background:#AFDFF9; scroll-margin-top:110px; }

/* 20.1 Vollflaechiges Foto ------------------------------------------------ */
.gap-seen-bild{ display:block; line-height:0; }
.gap-seen-foto{
  display:block; width:100% !important; height:auto !important;
  aspect-ratio:1440/701; object-fit:cover;
}

/* 20.2 Farbband ---------------------------------------------------------- */
.gap-seen-band{
  background:#AFDFF9;
  padding:80px var(--gap-edge) 68px;
  text-align:center;
}
.gap-seen-band > .elementor-element{ margin-inline:auto; }
.gap-seen-band .gap-sec-badge{ justify-content:center; margin-bottom:-14px; }

/* Marke auf hellem Grund: Tropfen dunkelblau, Ziffer weiss */
.gap-marke-dunkel .gap-sec-num::before{
  background-color: var(--e-global-color-primary, #004799);
}
.gap-marke-dunkel .gap-sec-num .elementor-heading-title{ color:#FFFFFF !important; }
.gap-marke-dunkel .gap-sec-label .elementor-heading-title{
  color: var(--e-global-color-primary, #004799);
}

.gap-seen-h2{ width:min(661px,100%); }
.gap-seen-h2 .elementor-heading-title{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:82px; line-height:73.8px; letter-spacing:-2px;
  text-transform:uppercase; white-space:pre-line;
  color: var(--e-global-color-primary, #004799); margin:0;
}
.gap-seen-lead{ width:min(783px,100%); }
.gap-seen-lead, .gap-seen-lead .elementor-heading-title{
  font-family:var(--gap-font-body); font-weight:500;
  font-size:20.5px; line-height:24.6px; letter-spacing:-0.1px;
  color: var(--e-global-color-primary, #004799); margin:0;
}
.gap-seen-cta{ margin-top:22px; }
.gap-seen-cta-inner{ display:flex; justify-content:center; }

/* 20.3 Mobil ------------------------------------------------------------- */
@media (max-width:767px){
  .gap-seen-foto{ aspect-ratio:390/400; }
  .gap-seen-band{ padding:70px var(--gap-edge) 66px; text-align:left; }
  .gap-seen-band > .elementor-element{ margin-inline:0; }
  .gap-seen-band .gap-sec-badge{ justify-content:flex-start; margin-bottom:0; }
  .gap-seen-h2, .gap-seen-lead{ width:100%; }
  .gap-seen-h2 .elementor-heading-title{
    font-size:64px; line-height:58px; letter-spacing:-2px;
  }
  .gap-seen-lead, .gap-seen-lead .elementor-heading-title{
    font-size:16px; line-height:20.8px; letter-spacing:.2px;
  }
  .gap-seen-cta{ margin-top:19px; }
  .gap-seen-cta-inner{ justify-content:flex-start; }
}


/* ==========================================================================
   21 · KORREKTUREN (achte Runde)
   ========================================================================== */

/* 21.1 Abstand Marke → Headline ueberall gleich.
   Gemessen (optisch, Tropfenunterkante bis Versalhoehe der Headline):
   Section 01–05 je 23,7 px, Section 06 nur 7,4 px. Ursache war die
   -14px-Korrektur aus Abschnitt 20 — im Entwurf sitzt der Tropfen in
   Section 06 zwoelf Pixel hoeher als in allen anderen Sektionen.
   Einheitlichkeit auf der Seite schlaegt hier den Entwurf. */
.gap-seen-band .gap-sec-badge{ margin-bottom:0; }

/* 21.2 Textlinks: die Linie waechst von links herein.
   .gap-textlink ist die allgemeine Klasse fuer jeden Fliesstext-Link. */
.gap-textlink, .gap-hora-link{
  position:relative; display:inline-block;
  text-decoration:none !important;
  color: var(--gap-link-farbe, var(--e-global-color-accent, #009881));
}
/* reset.css des Themes faerbt JEDES a:hover mit #333366 ein - ein
   dunkles Lila. Die Regel oben setzt nur den Ruhezustand und hat
   (0,1,0); a:hover hat (0,1,1) und gewinnt damit im Hover. Darum
   werden hier alle Zustaende ausdruecklich festgenagelt.
   Ueber --gap-link-farbe kann ein Abschnitt eine andere Linkfarbe
   setzen, sie gilt dann automatisch in allen Zustaenden. */
.gap-textlink:hover, .gap-textlink:focus,
.gap-textlink:focus-visible, .gap-textlink:active,
.gap-hora-link:hover, .gap-hora-link:focus,
.gap-hora-link:focus-visible, .gap-hora-link:active{
  color: var(--gap-link-farbe, var(--e-global-color-accent, #009881));
}
.gap-textlink::after, .gap-hora-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:currentColor; border-radius:1px;
  transform:scaleX(0); transform-origin:left center;
  transition:transform 320ms cubic-bezier(.22,.61,.36,1);
}
.gap-textlink:hover::after, .gap-textlink:focus-visible::after,
.gap-hora-link:hover::after, .gap-hora-link:focus-visible::after{
  transform:scaleX(1);
}
@media (prefers-reduced-motion: reduce){
  .gap-textlink::after, .gap-hora-link::after{ transition:none; }
}

/* 21.3 Section 04: unter der letzten Zahl keine Trennlinie mehr. */
.gap-zahlen .gap-zahl-reihe:last-child::after{ display:none; }


/* 21.4 Mobil sass die Trennlinie optisch zu hoch.
   Der Zahlenkasten (82/82) hat oberhalb der Ziffern gut 12 px Luft, der
   Fliesstext darunter nur rund 4 px. Rechnerisch mittig im 34er-Abstand
   heisst darum: 21 px unter dem Reihenende, nicht 17.
   Gemessen vorher 21 / 29, jetzt 25 / 25. */
@media (max-width:1024px){
  .gap-zahl-reihe::after{ bottom:-21px; }
}


/* ==========================================================================
   22 · SECTION 07 ABFLUSS-QUIZ
   Figma 543:7156 (Desktop) / 543:7924 (mobil)
   ========================================================================== */

.gap-quiz{
  background:linear-gradient(180deg,#FFFFFF 0%,#EDF8FE 100%);
  padding:110px var(--gap-edge) 118px;
  scroll-margin-top:110px;
}

/* 22.1 Kopf --------------------------------------------------------------- */
.gap-quiz-head{ width:min(1096px,100%); margin-inline:auto; text-align:center; }
.gap-quiz-h2{ width:min(661px,100%); margin-inline:auto; }
.gap-quiz-h2 .elementor-heading-title{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:82px; line-height:73.8px; letter-spacing:-2px;
  text-transform:uppercase; white-space:pre-line;
  color:var(--e-global-color-primary,#004799); margin:0;
}
.gap-quiz-lead{ width:min(783px,100%); margin-inline:auto; }
.gap-quiz-lead, .gap-quiz-lead .elementor-heading-title,
.gap-quiz-intro-lead, .gap-quiz-intro-lead .elementor-heading-title{
  font-family:var(--gap-font-body); font-weight:500;
  font-size:20.5px; line-height:24.6px; letter-spacing:-0.1px;
  color:var(--e-global-color-primary,#004799); margin:0;
}

/* 22.2 Zwischenkopf ------------------------------------------------------- */
.gap-quiz-intro{ width:min(1096px,100%); margin:134px auto 0; text-align:left; }
.gap-quiz-h3 .elementor-heading-title{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:42px !important; line-height:31.5px !important; letter-spacing:.2px;
  text-transform:uppercase; color:var(--e-global-color-primary,#004799); margin:0;
}
.gap-quiz-intro-lead{ width:min(788px,100%); margin-inline:0; }

/* 22.3 Kartenraster ------------------------------------------------------- */
.gap-quiz-wrap{ width:min(1096px,100%); margin:50px auto 0; }
.gap-quiz-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,258px));
  justify-content:space-between; gap:33px 21px;
}
.gap-quiz-karte{ display:flex; flex-direction:column; gap:15px; }
.gap-quiz-kopf{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:32px !important; line-height:28.8px !important; letter-spacing:.2px;
  text-transform:uppercase; color:var(--e-global-color-primary,#004799) !important; margin:0;
}
.gap-quiz-bild{
  position:relative; border-radius:18px; overflow:hidden;
  aspect-ratio:258/195; background:#D9D9D9;
}
.gap-quiz-bild img{
  position:absolute; inset:0;
  width:100% !important; object-fit:cover; display:block;
  /* Die Antwortleiste (56px) verdeckt die Bildunterkante. Das Bild endet deshalb
     genau an der Leiste, damit object-fit:cover im SICHTBAREN Bereich zentriert
     und die Motive nicht nach unten gedrueckt wirken. */
  height:calc(100% - 56px) !important;
}

/* 22.4 Antwortleiste ------------------------------------------------------ */
.gap-quiz-antworten{
  position:absolute; left:0; right:0; bottom:0; height:56px;
  display:grid; grid-template-columns:1fr 1fr;
}
.gap-quiz-btn{
  appearance:none; border:2px solid transparent; margin:0; padding:0;
  background:#FFFFFF; color:var(--e-global-color-primary,#004799);
  font-family:var(--gap-font-head); font-weight:900; font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative;
  transition:background-color 220ms var(--gap-ease,ease), border-color 220ms var(--gap-ease,ease);
}
.gap-quiz-btn:first-child{ border-radius:0 0 0 18px; }
.gap-quiz-btn:last-child{ border-radius:0 0 18px 0; }
/* Trennstrich: siehe Abschnitt 37 */
.gap-quiz-btn:hover:not(:disabled), .gap-quiz-btn:focus-visible{
  border-color:#27BDEF; outline:none; z-index:1;
}
.gap-quiz-btn:disabled{ cursor:default; }

.gap-quiz-btn.ist-richtig{ background:#E4F6EC; border-color:var(--e-global-color-accent,#009881); z-index:1; }
.gap-quiz-btn.ist-falsch { background:#FBE9E9; border-color:#D0454B; z-index:1; }
.gap-quiz-btn.ist-loesung{ background:#E4F6EC; border-color:var(--e-global-color-accent,#009881); }

.gap-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 22.5 Punktestand -------------------------------------------------------- */
.gap-quiz-punkte{
  margin:26px 0 0; text-align:center;
  font-family:var(--gap-font-body); font-weight:700;
  font-size:16px; line-height:19.2px; letter-spacing:.2px;
  color:var(--e-global-color-primary,#004799);
}
.gap-quiz-punkte-zahl{ font-family:var(--gap-font-head); font-weight:900; font-size:26px; }

/* 22.6 Infofenster -------------------------------------------------------- */
.gap-quiz-panel{
  margin-top:40px; border-radius:24px;
  background:var(--e-global-color-primary,#004799);
  padding:40px 34px 35px;
  display:grid; grid-template-columns:minmax(0,1fr) 394px; gap:34px;
  align-items:start;
}
.gap-quiz-panel[hidden]{ display:none; }
.gap-quiz-panel-kopf{
  grid-column:1 / -1; display:flex; align-items:center; flex-wrap:wrap; gap:20px;
  margin-bottom:-4px;
}
.gap-quiz-panel-kopf h3{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:32px !important; line-height:28.8px !important; letter-spacing:.2px;
  text-transform:uppercase; color:#AFDFF9 !important; margin:0;
}
.gap-quiz-tag{
  display:inline-flex; align-items:center; border-radius:30px;
  background:#AFDFF9; color:var(--e-global-color-primary,#004799);
  padding:6px 18px;
  font-family:var(--gap-font-head); font-weight:900;
  font-size:26px; line-height:19.5px; letter-spacing:.2px; text-transform:uppercase;
}
.gap-quiz-panel h4{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:26px !important; line-height:23.4px !important; letter-spacing:.2px;
  text-transform:uppercase; margin:0 0 12px;
}
.gap-quiz-panel-links{ max-width:466px; }
.gap-quiz-panel-links h4{ color:#AFDFF9 !important; }
.gap-quiz-panel-links p{
  margin:0; font-size:16px; line-height:19.2px; letter-spacing:.2px; color:#FFFFFF;
}
.gap-quiz-panel-rechts{
  background:#AFDFF9; border-radius:24px; padding:33px 32px;
  align-self:stretch;
}
.gap-quiz-panel-rechts h4{ color:var(--e-global-color-primary,#004799) !important; }
.gap-quiz-panel-rechts p{
  margin:0; font-size:16px; line-height:19.2px; letter-spacing:.2px;
  color:var(--e-global-color-primary,#004799);
}
.gap-quiz-echo{
  grid-column:1 / -1; margin:0 0 -8px;
  font-family:var(--gap-font-body); font-weight:700;
  font-size:16px; line-height:19.2px; letter-spacing:.2px;
}
.gap-quiz-echo.ist-richtig{ color:#8FE3C4; }
.gap-quiz-echo.ist-falsch{ color:#FFC2C4; }

/* 22.7 Tablet und Mobil --------------------------------------------------- */
@media (max-width:1024px){
  .gap-quiz{ padding:90px var(--gap-edge) 96px; }
  .gap-quiz-grid{ grid-template-columns:repeat(2,minmax(0,258px)); justify-content:center; gap:33px 21px; }
  .gap-quiz-panel{ grid-template-columns:minmax(0,1fr); }
  .gap-quiz-panel-rechts{ max-width:none; }
}
@media (max-width:767px){
  .gap-quiz-head{ text-align:left; }
  .gap-quiz-h2, .gap-quiz-lead, .gap-quiz-intro-lead{ width:100%; margin-inline:0; }
  .gap-quiz-h2 .elementor-heading-title{ font-size:64px; line-height:58px; letter-spacing:-2px; }
  .gap-quiz-lead, .gap-quiz-lead .elementor-heading-title,
  .gap-quiz-intro-lead, .gap-quiz-intro-lead .elementor-heading-title{
    font-size:16px; line-height:20.8px; letter-spacing:.2px;
  }
  .gap-quiz-h3 .elementor-heading-title{ font-size:40px !important; line-height:36px !important; }
  .gap-quiz-intro{ margin-top:46px; }
  .gap-quiz-wrap{ margin-top:63px; }
  .gap-quiz-grid{ grid-template-columns:minmax(0,258px); justify-content:center; gap:24px; }
  .gap-quiz-panel{ padding:30px 24px; border-radius:20px; gap:26px; }
  .gap-quiz-panel-kopf{ gap:12px; }
  .gap-quiz-panel-kopf h3{ font-size:28px !important; line-height:25.2px !important; }
  .gap-quiz-tag{ font-size:20px; line-height:16px; padding:6px 14px; }
  .gap-quiz-panel-links p, .gap-quiz-panel-rechts p{ line-height:20.8px; }
  .gap-quiz-panel-rechts{ padding:26px 24px; }
}

@media (prefers-reduced-motion: reduce){
  .gap-quiz-btn{ transition:none; }
}


/* ==========================================================================
   23 · QUIZ-ANTWORTEN: JA / NEIN statt Haken und Kreuz
   Das Elementor-Kit faerbt jeden <button> beim Hover magenta mit weisser
   Schrift. Meine Regel hatte nur den Rahmen gesetzt — Hintergrund und
   Schriftfarbe muessen mit.
   ========================================================================== */

.gap-quiz-btn{
  font-family:var(--gap-font-head) !important; font-weight:900 !important;
  font-size:22px !important; line-height:1 !important; letter-spacing:.2px;
  text-transform:uppercase;
  background:#FFFFFF !important;
  color:var(--e-global-color-primary,#004799) !important;
  box-shadow:none;
}
/* Trennstrich: siehe Abschnitt 37 */

/* Hover und Tastaturfokus: hellblauer Hauch, Rahmen im Marken-Hellblau */
.gap-quiz-btn:not(:disabled):hover,
.gap-quiz-btn:not(:disabled):focus-visible{
  /* deckendes 20-Prozent-Hellblau — durchscheinend wuerde das Foto
     unter der Leiste durchblitzen */
  background:#D4F2FC !important;
  color:var(--e-global-color-primary,#004799) !important;
  border-color:#27BDEF;
  outline:none; z-index:1;
}

/* Beantwortet */
.gap-quiz-btn.ist-richtig,
.gap-quiz-btn.ist-richtig:hover{
  background:#E4F6EC !important;
  border-color:var(--e-global-color-accent,#009881);
  color:var(--e-global-color-primary,#004799) !important;
  z-index:1;
}
.gap-quiz-btn.ist-falsch,
.gap-quiz-btn.ist-falsch:hover{
  background:#FBE9E9 !important;
  border-color:#D0454B;
  color:var(--e-global-color-primary,#004799) !important;
  z-index:1;
}
.gap-quiz-btn.ist-loesung,
.gap-quiz-btn.ist-loesung:hover{
  background:#E4F6EC !important;
  border-color:var(--e-global-color-accent,#009881);
  color:var(--e-global-color-primary,#004799) !important;
}

@media (max-width:767px){
  .gap-quiz-btn{ font-size:20px !important; }
}


/* ==========================================================================
   24 · QUIZ-ANTWORTEN nachgeschaerft
   ========================================================================== */

/* 24.1 Hover ohne Rahmen. Der Rahmen lief direkt neben dem Trennstrich in
   der Mitte und ergab dort eine zweite Linie. Jetzt nur die Flaeche, im
   Marken-Hellblau #AFDFF9. */
.gap-quiz-btn:not(:disabled):hover,
.gap-quiz-btn:not(:disabled):focus-visible{
  background:var(--e-global-color-surflight,#AFDFF9) !important;
  color:var(--e-global-color-primary,#004799) !important;
  border-color:transparent !important;
  outline:none;
  z-index:0;
}
/* Tastaturfokus bleibt sichtbar */
.gap-quiz-btn:not(:disabled):focus-visible{
  outline:2px solid var(--e-global-color-primary,#004799);
  outline-offset:-2px;
}

/* 24.2 Nur die angetippte Seite wird gefaerbt — die Loesungs-Markierung
   auf der Gegenseite entfaellt. */
.gap-quiz-btn.ist-loesung,
.gap-quiz-btn.ist-loesung:hover{
  background:#FFFFFF !important;
  border-color:transparent;
  color:var(--e-global-color-primary,#004799) !important;
}


/* ==========================================================================
   25 · QUIZ: Copy mittig, Trennstrich und Rahmen als eine Linie
   ========================================================================== */

/* 25.1 Dieselbe Falle wie in Section 05: die Typo-Sammelregel setzt
   margin:0 und hebt damit das margin-inline:auto darueber auf. */
.gap-quiz-lead{ margin-inline:auto; }
@media (max-width:767px){ .gap-quiz-lead{ margin-inline:0; } }

/* 25.2 Trennstrich und Rahmen fielen auseinander: der Strich war ein
   inset-Schatten am zweiten Knopf, der Rahmen ein eigener Border am ersten.
   Dazwischen blieb der transparente 2-px-Rand als weisser Spalt stehen.
   Jetzt ueberlappen sich die beiden Kanten — es gibt nur noch eine Linie,
   und der gefaerbte Knopf liegt oben. */
.gap-quiz-btn{ border:2px solid transparent; box-shadow:none !important; }
.gap-quiz-btn + .gap-quiz-btn{
  /* Trennung uebernimmt Abschnitt 37 */
  box-shadow:none !important;
}
.gap-quiz-btn:not(:disabled):hover,
.gap-quiz-btn:not(:disabled):focus-visible{
  background:var(--e-global-color-surflight,#AFDFF9) !important;
  color:var(--e-global-color-primary,#004799) !important;
  border-color:transparent;
  z-index:1;
}
.gap-quiz-btn + .gap-quiz-btn:not(:disabled):hover,
.gap-quiz-btn + .gap-quiz-btn:not(:disabled):focus-visible{
  border-left-color:transparent;
}
.gap-quiz-btn:not(:disabled):focus-visible{
  outline:2px solid var(--e-global-color-primary,#004799);
  outline-offset:-2px;
}
.gap-quiz-btn.ist-richtig, .gap-quiz-btn.ist-richtig:hover{
  border-color:var(--e-global-color-accent,#009881) !important;
  z-index:2;
}
.gap-quiz-btn.ist-falsch, .gap-quiz-btn.ist-falsch:hover{
  border-color:#D0454B !important;
  z-index:2;
}


/* 25.3 Infofenster sitzt auf schmalen Schirmen im Raster, direkt unter der
   angetippten Karte. Es muss dort ueber die ganze Rasterbreite gehen. */
@media (max-width:1024px){
  .gap-quiz-grid > .gap-quiz-panel{
    grid-column:1 / -1;
    margin-top:9px; margin-bottom:9px;
  }
}


/* 25.4 Mobile Abstaende nach Figma (543:7924): Marke 70, h2 115,
   Copy 304, Zwischenkopf 564, dessen Copy 597, Raster 770. */
@media (max-width:767px){
  .gap-quiz{ padding-top:70px; }
  .gap-quiz-intro{ margin-top:52px; row-gap:0; }
  .gap-quiz-wrap{ margin-top:63px; }
}


/* ==========================================================================
   26 · SECTION 08 WASSERMYTHEN
   Figma 543:7279 (Desktop) / 543:8024 (mobil)
   ========================================================================== */

.gap-mythen{
  background:#AFDFF9;
  padding:110px var(--gap-edge) 132px;
  scroll-margin-top:110px;
}

/* 26.1 Kopf — linksbuendig ------------------------------------------------ */
.gap-mythen-head{ width:min(1096px,100%); margin-inline:auto; text-align:left; }
.gap-mythen-head .gap-sec-badge{ justify-content:flex-start; }
.gap-mythen-h2{ width:min(661px,100%); margin-inline:0; }
.gap-mythen-h2 .elementor-heading-title{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:82px; line-height:73.8px; letter-spacing:-2px;
  text-transform:uppercase; white-space:pre-line;
  color:var(--e-global-color-primary,#004799); margin:0;
}
.gap-mythen-lead{ width:min(788px,100%); }
.gap-mythen-lead, .gap-mythen-lead .elementor-heading-title{
  font-family:var(--gap-font-body); font-weight:500;
  font-size:20.5px; line-height:24.6px; letter-spacing:-0.1px;
  color:var(--e-global-color-primary,#004799); margin:0;
}
.gap-mythen-lead{ margin-inline:0; }

/* 26.2 Raster ------------------------------------------------------------- */
.gap-mythen-wrap{ width:min(1096px,100%); margin:61px auto 0; }
.gap-mythen-hint{ display:none; }
.gap-mythen-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px;
}

/* 26.3 Karte mit Umdrehen -------------------------------------------------- */
.gap-myth{
  appearance:none; border:0; margin:0; padding:0; background:none;
  height:320px; perspective:1400px; cursor:pointer; text-align:left;
  border-radius:22px;
}
.gap-myth-in{
  position:relative; display:block; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform 300ms cubic-bezier(0,0,.58,1);
}
.gap-myth.ist-gedreht .gap-myth-in{ transform:rotateY(180deg); }
.gap-myth-face{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:31px; border-radius:22px; overflow:hidden;
  /* Elementor setzt auf <button> white-space:nowrap — sonst laeuft der
     Kartentext in einer Zeile aus dem Bild. */
  white-space:normal;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.gap-myth-vorne { background:var(--e-global-color-primary,#004799); }
.gap-myth-hinten{ background:var(--e-global-color-accent,#009881); transform:rotateY(180deg); }
.gap-myth-num{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:32px; line-height:28.8px; letter-spacing:.2px;
  text-transform:uppercase; color:#AFDFF9;
}
.gap-myth-vorne .gap-myth-text{
  margin-top:53px;
  font-family:var(--gap-font-body); font-weight:500;
  font-size:20.5px; line-height:24.6px; letter-spacing:-0.1px; color:#FFFFFF;
}
.gap-myth-hinten .gap-myth-text{
  margin-top:20px;
  font-family:var(--gap-font-body); font-weight:500;
  font-size:16px; line-height:19.3px; letter-spacing:.2px; color:#FFFFFF;
}
.gap-myth:focus-visible{ outline:2px solid var(--e-global-color-primary,#004799); outline-offset:3px; }

/* 26.4 Tablet und Mobil ---------------------------------------------------- */
@media (max-width:1024px){
  .gap-mythen{ padding:90px var(--gap-edge) 96px; }
  .gap-mythen-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px){
  .gap-mythen{ padding:98px var(--gap-edge) 78px; }
  .gap-mythen-h2, .gap-mythen-lead{ width:100%; }
  .gap-mythen-h2 .elementor-heading-title{ font-size:64px; line-height:58px; letter-spacing:-2px; }
  .gap-mythen-lead, .gap-mythen-lead .elementor-heading-title{
    font-size:16px; line-height:20.8px; letter-spacing:.2px;
  }
  .gap-mythen-wrap{ margin-top:48px; }
  .gap-mythen-grid{ grid-template-columns:minmax(0,1fr); gap:18px; }
}

@media (prefers-reduced-motion: reduce){
  .gap-myth-in{ transition:none; }
}

/* ------------------------------------------------------------------
   27  Mythen-Karten: Hello-Elementor Button-Hover (#CC3366) abschalten
   ------------------------------------------------------------------ */
.gap-myth,
.gap-myth:hover,
.gap-myth:focus,
.gap-myth:focus-visible,
.gap-myth:active{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  border-color:transparent !important;
  color:inherit !important;
}
.gap-myth:focus-visible{
  outline:2px solid var(--e-global-color-primary,#004799);
  outline-offset:3px;
}
.gap-mythen-hint{ display:none !important; }


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   28 - QUIZ-KARTEN AUF TABLET UND MOBIL: VOLLE SPALTENBREITE
   Im Entwurf sind die Karten mobil auf fixe 258px gesetzt und sitzen mit
   je ~66px Rand mittig im 390er Rahmen. Auf echten Geraeten (und erst
   recht auf breiteren Handys) wirken sie dadurch verloren und schmal.
   Die Karten fuellen jetzt die Inhaltsspalte; das Bildfeld behaelt das
   Seitenverhaeltnis des Entwurfs (258:139 sichtbare Flaeche) und die
   Antwortleiste ihre 56px Tapp-Hoehe. Deshalb padding-bottom statt
   aspect-ratio - Prozent-Padding rechnet auf die Breite, die fixen 56px
   kommen unveraendert dazu.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (max-width:1024px){
  .gap-quiz-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch; }
  .gap-quiz-bild{ aspect-ratio:auto; height:0; padding-bottom:calc(53.876% + 56px); }
}
@media (max-width:767px){
  /* Mittelweg: nicht die fixen 258 aus dem Entwurf, aber auch nicht die
     volle Spaltenbreite. Der seitliche Einzug laesst die Karte bei 390
     auf 304 kommen und waechst mit dem Schirm mit. */
  .gap-quiz-grid{ grid-template-columns:minmax(0,1fr); justify-content:stretch; gap:24px; padding-inline:23px; }
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   29 - SECTION 09 GESCHICHTEN
   Figma 543:7300 (Desktop) / 543:8117 (mobil)
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.gap-geschichten{ background:#FFFFFF; padding:110px var(--gap-edge) 128px; scroll-margin-top:110px; }
.gap-gesch-head{ width:min(1096px,100%); margin-inline:auto; text-align:center; }
.gap-gesch-head .gap-sec-badge{ justify-content:center; }
.gap-gesch-h2 .elementor-heading-title{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:82px; line-height:73.8px; letter-spacing:-2px; text-transform:uppercase;
  white-space:pre-line; color:var(--e-global-color-primary,#004799); margin:0;
}
.gap-gesch-h2 .gap-gruen{ color:var(--e-global-color-accent,#009881); }
.gap-gesch-lead, .gap-gesch-lead .elementor-heading-title{
  font-family:var(--gap-font-body); font-weight:500;
  font-size:20.5px; line-height:24.6px; letter-spacing:-0.1px;
  color:var(--e-global-color-primary,#004799); margin-block:0;
}
.gap-gesch-lead{ width:min(788px,100%); margin-inline:auto; }

/* 29.2 Karussell ---------------------------------------------------------- */
.gap-gesch-wrap{ width:min(1096px,100%); margin:46px auto 0; }
.gap-gesch-slider{ position:relative; }
.gap-gesch-vp{
  border-radius:24px; overflow-x:auto; overflow-y:hidden;
  box-shadow:0 22px 54px -36px rgba(0,42,92,.45);
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
}
.gap-gesch-vp::-webkit-scrollbar{ display:none; }
.gap-gesch-vp:focus-visible{ outline:2px solid var(--e-global-color-primary,#004799); outline-offset:3px; }
.gap-gesch-track{ display:grid; grid-auto-flow:column; grid-auto-columns:100%; }
.gap-gesch-slide{
  scroll-snap-align:start; scroll-snap-stop:always;
  display:grid; grid-template-columns:465fr 629fr;
  background:#FFFFFF; min-height:450px;
}
.gap-gesch-foto{ position:relative; overflow:hidden; background:#CFE7F3; }
.gap-gesch-foto img{
  position:absolute; inset:0;
  width:100% !important; height:100% !important; object-fit:cover; display:block;
}
.gap-gesch-body{ display:flex; align-items:center; padding:38px; }
.gap-gesch-inner{ width:100%; }
.gap-gesch-tag{
  display:inline-block; background:#AFDFF9; border-radius:30px; padding:5px 14px;
  font-family:var(--gap-font-head); font-weight:900;
  font-size:26px; line-height:23.4px; letter-spacing:.2px; text-transform:uppercase;
  color:var(--e-global-color-primary,#004799);
}
.gap-gesch-zitat{
  /* Das Elementor-Kit setzt h3 auf Amplitude 42px - daher !important. */
  margin:15px 0 0;
  font-family:var(--gap-font-body) !important; font-weight:800 !important;
  font-size:26px !important; line-height:31.2px !important; letter-spacing:-0.1px !important;
  color:var(--e-global-color-primary,#004799) !important;
}
.gap-gesch-quelle{
  margin:15px 0 0; font-family:var(--gap-font-body); font-weight:500;
  font-size:12.5px; line-height:15px; letter-spacing:.2px;
  color:var(--e-global-color-primary,#004799);
}
.gap-gesch-text{
  margin:32px 0 0; font-family:var(--gap-font-body); font-weight:500;
  font-size:16px; line-height:19.2px; letter-spacing:.2px;
  color:var(--e-global-color-primary,#004799);
}

/* 29.3 Punkte. Hello Elementor faerbt jeden <button> bei Hover magenta,
   deshalb der Reset in allen Zustaenden. */
.gap-gesch-dots{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:22px; }
.gap-gesch-dot{
  appearance:none; border:0; margin:0; padding:0;
  width:10px; height:10px; border-radius:5px; cursor:pointer;
  transition:width 260ms var(--gap-ease,ease), background-color 260ms var(--gap-ease,ease);
}
.gap-gesch-dot, .gap-gesch-dot:hover, .gap-gesch-dot:focus,
.gap-gesch-dot:focus-visible, .gap-gesch-dot:active{
  background:#AFDFF9 !important; background-color:#AFDFF9 !important;
  box-shadow:none !important; border-color:transparent !important;
}
.gap-gesch-dot.ist-aktiv, .gap-gesch-dot.ist-aktiv:hover,
.gap-gesch-dot.ist-aktiv:focus, .gap-gesch-dot.ist-aktiv:active{
  width:30px; border-radius:6px;
  background:var(--e-global-color-accent,#009881) !important;
  background-color:var(--e-global-color-accent,#009881) !important;
}
.gap-gesch-dot:focus-visible{ outline:2px solid var(--e-global-color-primary,#004799); outline-offset:4px; }
.gap-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* 29.4 Tablet und Mobil --------------------------------------------------- */
@media (max-width:1024px){
  .gap-geschichten{ padding:90px var(--gap-edge) 100px; }
  .gap-gesch-h2 .elementor-heading-title{ font-size:68px; line-height:61.2px; }
}
@media (max-width:767px){
  .gap-geschichten{ padding:98px var(--gap-edge) 78px; }
  .gap-gesch-head{ text-align:left; }
  .gap-gesch-head .gap-sec-badge{ justify-content:flex-start; }
  .gap-gesch-h2 .elementor-heading-title{ font-size:64px; line-height:57.6px; white-space:normal; }
  .gap-gesch-lead, .gap-gesch-lead .elementor-heading-title{ font-size:16px; line-height:20.8px; letter-spacing:.2px; }
  .gap-gesch-lead{ width:100%; margin-inline:0; }
  .gap-gesch-wrap{ margin-top:46px; }
  .gap-gesch-slide{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; min-height:0; }
  .gap-gesch-foto{ aspect-ratio:349/277; }
  .gap-gesch-body{ align-items:flex-start; }
  .gap-gesch-tag{ font-size:20px; line-height:18px; }
  .gap-gesch-zitat{ font-size:22px !important; line-height:24.2px !important; font-weight:700 !important; }
  .gap-gesch-quelle{ font-size:12.5px; line-height:16.3px; }
  .gap-gesch-text{ font-size:16px; line-height:20.8px; }
  /* Mobil sind die Innenabstaende anders als am Desktop: 32 / 15 / 30 */
  .gap-gesch-zitat{ margin-top:32px; }
  .gap-gesch-quelle{ margin-top:15px; }
  .gap-gesch-text{ margin-top:30px; }
}
@media (prefers-reduced-motion: reduce){
  .gap-gesch-vp{ scroll-behavior:auto; }
  .gap-gesch-dot{ transition:none; }
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   30 - SECTION 10 SCHULMATERIAL  (vorerst ausgeblendet)
   Figma 543:7384 (Desktop) / 543:8138 (mobil)
   Die Section ist ueber die Elementor-Sichtbarkeitsschalter versteckt.
   Das Fluss-Element ragt 161px nach oben in Section 09 und verschwindet
   deshalb zusammen mit der Section.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.gap-schule{
  position:relative;
  background:linear-gradient(180deg,#FFFFFF 0%,#EDF8FE 100%);
  padding:221px var(--gap-edge) 119px;
  scroll-margin-top:110px;
}
/* Der Fluss bekommt einen eigenen, oben herausragenden Rahmen mit
   overflow:hidden - so entsteht kein horizontaler Seiten-Scroll. */
.gap-schule-fluss-wrap{
  position:absolute; left:0; right:0; top:-161px; height:743px;
  overflow:hidden; pointer-events:none; z-index:0;
}
.gap-schule-fluss{
  /* Elementor deckelt jedes Bild auf max-width:100% - daher !important. */
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  /* max(): auf breiten Schirmen waechst der Fluss mit, sonst bliebe er bei
     1529px stehen und die Seite haette links und rechts einen weissen Rest. */
  width:max(1529px, 100%) !important; max-width:none !important; height:auto; display:block;
}
.gap-schule > .elementor-element:not(.gap-schule-fluss-wrap){ position:relative; z-index:1; }

.gap-schule-head{ width:min(1096px,100%); margin-inline:auto; text-align:left; }
.gap-schule-head .gap-sec-badge{ justify-content:flex-start; }
.gap-schule-h2 .elementor-heading-title{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:82px; line-height:73.8px; letter-spacing:-2px; text-transform:uppercase;
  white-space:pre-line; color:var(--e-global-color-primary,#004799); margin:0;
}
.gap-schule-h2 .gap-gruen{ color:var(--e-global-color-accent,#009881); }
.gap-schule-lead, .gap-schule-lead .elementor-heading-title{
  font-family:var(--gap-font-body); font-weight:500;
  font-size:20.5px; line-height:24.6px; letter-spacing:-0.1px;
  color:var(--e-global-color-primary,#004799); margin-block:0;
}
.gap-schule-lead{ width:min(1028px,100%); }

/* 30.2 Spiele-Buehne. Am Desktop eine Collage mit festen Positionen
   aus dem Entwurf, ab 1024 gestapelt. */
.gap-schule-wrap{ width:min(1096px,100%); margin-inline:auto; }
.gap-schule-buehne{ position:relative; height:1110px; margin-top:116px; }
.gap-schule-spiel{ display:contents; }
.gap-schule-foto{ position:absolute; margin:0; }
.gap-schule-foto img{ display:block; width:100%; height:auto; }
.gap-schule-foto .gap-schule-foto-mobil{ display:none; }
.gap-schule-foto-1{ left:-1px; top:0; width:378px; }
.gap-schule-foto-2{ left:714px; top:575px; width:382px; }
.gap-schule-karte{
  position:absolute; width:514px; min-height:303px;
  background:#FFFFFF; border-radius:18px; padding:32px 36px 30px;
  display:flex; flex-direction:column;
}
.gap-schule-karte-1{ left:501px; top:114px; }
.gap-schule-karte-2{ left:90px; top:691px; }
.gap-schule-karte-h3{
  margin:0; font-family:var(--gap-font-head) !important; font-weight:900 !important;
  font-size:32px !important; line-height:28.8px !important; letter-spacing:.2px;
  text-transform:uppercase; color:var(--e-global-color-primary,#004799) !important;
}
.gap-schule-karte-text{
  margin:14px 0 0; width:min(400px,100%);
  font-family:var(--gap-font-body); font-weight:500;
  font-size:16px; line-height:19.2px; letter-spacing:.2px;
  color:var(--e-global-color-primary,#004799);
}
.gap-schule-play{ margin-top:auto; align-self:flex-start; }
.gap-schule-stoerer{ position:absolute; right:41px; top:-79px; width:183px; height:auto; z-index:2; }

/* 30.3 Lehrer-Box -------------------------------------------------------- */
.gap-schule-lehrer{
  width:min(1096px,100%); margin:135px auto 0;
  background:var(--e-global-color-primary,#004799); border-radius:24px;
  padding:39px 34px 40px 93px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:30px;
}
.gap-schule-lehrer-h3{
  margin:0; font-family:var(--gap-font-head) !important; font-weight:900 !important;
  font-size:32px !important; line-height:28.8px !important; letter-spacing:.2px;
  text-transform:uppercase; color:#AFDFF9 !important;
}
.gap-schule-lehrer-text p{
  margin:14px 0 0; width:min(646px,100%);
  font-family:var(--gap-font-body); font-weight:500;
  font-size:16px; line-height:19.2px; letter-spacing:.2px; color:#FFFFFF;
}
.gap-schule-lehrer-acts{ display:flex; flex-direction:column; align-items:stretch; gap:20px; margin-top:20px; }
.gap-schule-lehrer-acts .gap-btn{ justify-content:center; padding:12px 22px; }
.gap-btn-hell{
  background:var(--e-global-color-surflight,#AFDFF9);
  color:var(--e-global-color-primary,#004799);
}
.gap-btn-hell:hover, .gap-btn-hell:focus-visible{
  background:#FFFFFF; color:var(--e-global-color-primary,#004799);
}

/* 30.4 Tablet und Mobil --------------------------------------------------- */
@media (max-width:1024px){
  .gap-schule{ padding:150px var(--gap-edge) 96px; }
  .gap-schule-fluss-wrap{ top:-120px; height:520px; }
  .gap-schule-fluss{ width:max(1100px, 100%) !important; }
  .gap-schule-h2 .elementor-heading-title{ font-size:68px; line-height:61.2px; }
  .gap-schule-buehne{ position:static; height:auto; margin-top:60px; display:flex; flex-direction:column; gap:18px; }
  .gap-schule-spiel{ display:block; }
  .gap-schule-foto{ position:static; width:auto !important; }
  .gap-schule-foto .gap-schule-foto-desktop{ display:none; }
  .gap-schule-foto .gap-schule-foto-mobil{ display:block; }
  .gap-schule-karte{ position:static; width:100%; min-height:0; }
  .gap-schule-karte-text{ width:100%; }
  .gap-schule-stoerer{ right:0; top:-70px; width:140px; }
  .gap-schule-lehrer{ margin-top:38px; grid-template-columns:minmax(0,1fr); padding:34px; }
  .gap-schule-lehrer-text p{ width:100%; }
  .gap-schule-lehrer-acts{ align-items:flex-start; margin-top:26px; }
  .gap-schule-lehrer-acts .gap-btn{ justify-content:flex-start; }
}
@media (max-width:767px){
  .gap-schule{ padding:98px var(--gap-edge) 78px; }
  .gap-schule-fluss-wrap{ top:-90px; height:430px; }
  .gap-schule-fluss{ width:max(760px, 100%) !important; }
  .gap-schule-h2 .elementor-heading-title{ font-size:64px; line-height:57.6px; }
  .gap-schule-lead, .gap-schule-lead .elementor-heading-title{ font-size:16px; line-height:20.8px; letter-spacing:.2px; }
  .gap-schule-lead{ width:100%; }
  .gap-schule-buehne{ margin-top:46px; }
  .gap-schule-karte{ padding:28px 32px 30px; }
  .gap-schule-karte-h3{ font-size:24px !important; line-height:21.6px !important; }
  .gap-schule-karte-text{ line-height:20.8px; }
  .gap-schule-lehrer-h3{ font-size:24px !important; line-height:21.6px !important; }
  .gap-schule-lehrer-text p{ line-height:20.8px; }
  .gap-schule-stoerer{ width:120px; top:-56px; }
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   31 - NAVIGATION: WEGKLAPPEN, DECKKRAFT, LINIE STATT PILLE
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 31.1 Weg nach oben beim Runterscrollen, zurueck beim Hochscrollen.
   Innerhalb der Hero bleibt die Leiste immer stehen. */
.gap-header-wrap{
  transition:transform 320ms cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.gap-header-wrap.ist-weg{ transform:translateY(calc(-100% - 16px)); }

/* 31.2 Unter der Hero eine Spur weniger durchsichtig. */
.gap-header{ transition:background-color 320ms var(--gap-ease,ease); }
.gap-header-wrap.unter-hero .gap-header{ background-color:#FFFFFF !important; }

/* 31.3 Menuepunkte: keine Pille mehr, stattdessen dieselbe Linie wie bei
   den Textlinks - waechst von links herein. Aktiv ist durchgehend
   unterstrichen. Farbe bleibt Dunkelblau, das Kit faerbt aktiv sonst gruen. */
.gap-nav .elementor-nav-menu > li > a.elementor-item,
.gap-nav .elementor-nav-menu > li > a.elementor-item:hover,
.gap-nav .elementor-nav-menu > li > a.elementor-item:focus,
.gap-nav .elementor-nav-menu > li > a.elementor-item.elementor-item-active{
  background:transparent !important; background-color:transparent !important;
  color:var(--e-global-color-primary,#004799) !important;
  border-radius:0; position:relative;
}
.gap-nav .elementor-nav-menu > li > a.elementor-item::after,
.gap-nav .elementor-nav-menu > li > a.elementor-item::before{
  content:""; position:absolute; left:13px; right:13px; bottom:4px;
  height:2px; width:auto; top:auto;
  background:currentColor; border-radius:1px; opacity:1;
  transform:scaleX(0); transform-origin:left center;
  transition:transform 320ms cubic-bezier(.22,.61,.36,1);
}
.gap-nav .elementor-nav-menu > li > a.elementor-item::before{ content:none; }
.gap-nav .elementor-nav-menu > li > a.elementor-item:hover::after,
.gap-nav .elementor-nav-menu > li > a.elementor-item:focus-visible::after,
.gap-nav .elementor-nav-menu > li > a.elementor-item.elementor-item-active::after{
  transform:scaleX(1);
}

/* 31.4 CTA in der Leiste: Hover invers, also Dunkelblau mit weisser Schrift. */
.gap-nav-cta .elementor-button:hover,
.gap-nav-cta .elementor-button:focus-visible{
  background:var(--e-global-color-primary,#004799) !important;
  color:#FFFFFF !important;
}
.gap-nav-cta .elementor-button:active{
  background:#003A7A !important; color:#FFFFFF !important;
}

@media (prefers-reduced-motion: reduce){
  .gap-header-wrap, .gap-header,
  .gap-nav .elementor-nav-menu > li > a.elementor-item::after{ transition:none; }
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   32 - SILBENTRENNUNG
   Das Dokument traegt lang="de", damit greift hyphens:auto ueberhaupt.
   .gap-trennt ist die allgemeine Klasse fuer jeden schmalen Fliesstext;
   die Karten in Section 03 bekommen sie gleich mit.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.gap-trennt,
.gap-karte-text{
  -webkit-hyphens:auto; hyphens:auto;
  /* nicht zu kleinteilig trennen: mind. 6 Zeichen im Wort, 3 vor und 3 nach */
  -webkit-hyphenate-limit-before:3; -webkit-hyphenate-limit-after:3;
  hyphenate-limit-chars:6 3 3;
  overflow-wrap:break-word;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   33 - TRAUN-TEASER: BUTTON-ZUSTAENDE GETAUSCHT
   Normal ist jetzt das Hellblau mit dunkelblauer Schrift, bei Hover
   wird daraus Gruen mit Weiss. Nur in dieser Section, die allgemeine
   .gap-btn-green bleibt fuer spaetere gruene Buttons wie sie ist.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.gap-traun .gap-btn-green{
  background:var(--e-global-color-surflight,#AFDFF9);
  color:var(--e-global-color-primary,#004799);
}
.gap-traun .gap-btn-green:hover,
.gap-traun .gap-btn-green:focus-visible{
  background:var(--e-global-color-accent,#009881);
  color:#FFFFFF;
}
.gap-traun .gap-btn-green:active{
  background:#007E6B; color:#FFFFFF;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   34 - KORREKTURRUNDE 11, TEIL 2
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 34.1 Silbentrennung ueberall dort, wo der Text in schmalen Spalten steht. */
.gap-projekt-text,
.gap-myth-text,
.gap-flow-box p,
.gap-quiz-panel-links p,
.gap-quiz-panel-rechts p,
.gap-schule-karte-text,
.gap-gesch-text{
  -webkit-hyphens:auto; hyphens:auto;
  -webkit-hyphenate-limit-before:3; -webkit-hyphenate-limit-after:3;
  hyphenate-limit-chars:6 3 3;
  overflow-wrap:break-word;
}

/* 34.2 ist entfallen - der Trennstrich wird jetzt in Abschnitt 37
   einmalig auf der Antwortleiste gezeichnet. */

/* 34.3 Schulmaterial: Outline auf den weissen Boxen (Figma: 2px #AFDFF9,
   innen liegend). */
.gap-schule-karte{
  border:2px solid var(--e-global-color-surflight,#AFDFF9);
}

/* 34.4 Schulmaterial: Hover auf den Fotos.
   Im Entwurf blendet die Karte ihr Overlay ein - dort allerdings fast
   deckend, weil die Komponente eigentlich Text darauf traegt. In dieser
   Section sind die Texte ausgeschaltet, ein deckendes Overlay wuerde das
   Foto schlucken - der erste Stopp liegt bei Alpha 0, nicht 1.
   Dazu die zwei Pills und ein leichtes Anheben. 300ms ease-out. */
.gap-schule-foto img{ transition:transform 300ms cubic-bezier(0,0,.58,1); }
/* Die Hover-Ebene liegt deckungsgleich auf der gedrehten Karte im Foto.
   Das Foto ist als fertige Grafik samt Drehung exportiert, die Ebene wird
   deshalb passend eingerueckt und mitgedreht: die Karte misst 360x520 und
   sitzt mittig im 378x532 bzw. 382x535 grossen Bild. `rotate` als eigene
   Eigenschaft, damit das Anheben per transform die Drehung nicht kippt. */
.gap-schule-foto-ueber{
  position:absolute; overflow:hidden; border-radius:32px; pointer-events:none;
  transition:transform 300ms cubic-bezier(0,0,.58,1);
}
.gap-schule-foto-1 .gap-schule-foto-ueber{ left:9px;  top:6px; width:360px; height:520px; rotate:-2deg; }
.gap-schule-foto-2 .gap-schule-foto-ueber{ left:12px; top:8px; width:359px; height:520px; rotate:2.5deg; }
.gap-schule-foto-schleier{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,42,92,0) 35%, rgba(0,42,92,.35) 65%, rgba(0,42,92,.95) 100%);
  opacity:0; transition:opacity 300ms cubic-bezier(0,0,.58,1);
}
.gap-schule-foto-tags{
  position:absolute; left:44px; right:16px; bottom:24px;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  opacity:0; translate:0 10px;
  transition:opacity 300ms cubic-bezier(0,0,.58,1), translate 300ms cubic-bezier(0,0,.58,1);
}
.gap-schule-tag{
  display:inline-block; white-space:nowrap;
  background:var(--e-global-color-surflight,#AFDFF9);
  color:var(--e-global-color-primary,#004799);
  border-radius:30px; padding:6px 14px;
  font-family:var(--gap-font-head); font-weight:900;
  font-size:26px; line-height:23.4px; letter-spacing:.2px; text-transform:uppercase;
}
.gap-schule-foto:hover .gap-schule-foto-schleier{ opacity:1; }
.gap-schule-foto:hover .gap-schule-foto-tags{ opacity:1; translate:0 0; }
.gap-schule-foto:hover img{ transform:translateY(-6px); }
.gap-schule-foto:hover .gap-schule-foto-ueber{ transform:translateY(-6px); }
@media (max-width:1024px){ .gap-schule-foto-ueber{ display:none; } }

/* 34.5 Schulmaterial: die zwei Buttons in der Lehrer-Box bekommen dieselbe
   Farbgebung wie der Traun-Button - hellblau, bei Hover gruen mit Weiss. */
.gap-btn-hell:hover, .gap-btn-hell:focus-visible{
  background:var(--e-global-color-accent,#009881);
  color:#FFFFFF;
}
.gap-btn-hell:active{ background:#007E6B; color:#FFFFFF; }

@media (prefers-reduced-motion: reduce){
  .gap-schule-foto img{ transition:none; }
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   35 - EINHEITLICHER ABSTAND VOM SECTIONSKOPF ZUM INHALT
   Gemessen lagen die Abstaende zwischen 46 und 79 (Desktop) bzw. 15 und 53
   (mobil) - jede Section hatte ihren eigenen Wert aus dem Entwurf. Ab hier
   entscheidet ein Token. Gewaehlt ist jeweils der grosszuegigste der
   bisherigen Werte, damit nichts enger wird als vorher.
   Das Quiz bleibt aussen vor: dort sitzt zwischen Kopf und Raster noch der
   Zwischenkopf, dessen Rhythmus in Runde 8 eigens abgestimmt wurde.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
:root{ --gap-kopf-inhalt:80px; }
@media (max-width:1024px){ :root{ --gap-kopf-inhalt:64px; } }
@media (max-width:767px){  :root{ --gap-kopf-inhalt:52px; } }

.gap-wastun .gap-karten-wrap,
.gap-hws .gap-karten-wrap,
.gap-zahlen-wrap,
.gap-mythen-wrap,
.gap-gesch-wrap{
  margin-top:var(--gap-kopf-inhalt) !important;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   36 - HERO-AUSSCHNITTE FUER TABLET UND MOBIL
   Die Fotos sind im Querformat angelegt. Auf schmalen Schirmen schneidet
   cover links und rechts weg, dadurch standen die Motive halb im Bild und
   die Leiste lag in den Gesichtern. Je Folie ein eigener Bildausschnitt,
   am Tablet zurueckgenommen, am Handy deutlicher. Reihenfolge wie im
   Karussell: 1 Wasserqualitaet, 2 Seen sehen, 3 Trinkwasser,
   4 Vorausschauen, 5 Fluessen Raum geben, 6 Sicher versorgt.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (max-width:1024px){
  .gap-hero-photos > .gap-hero-photo:nth-child(1){ background-position:56% 46% !important; }
  .gap-hero-photos > .gap-hero-photo:nth-child(2){ background-position:58% 46% !important; }
  .gap-hero-photos > .gap-hero-photo:nth-child(3){ background-position:57% 44% !important; }
  .gap-hero-photos > .gap-hero-photo:nth-child(4){ background-position:65% 44% !important; }
  .gap-hero-photos > .gap-hero-photo:nth-child(5){ background-position:60% 48% !important; }
  .gap-hero-photos > .gap-hero-photo:nth-child(6){ background-position:60% 48% !important; }
}
@media (max-width:767px){
  .gap-hero-photos > .gap-hero-photo:nth-child(1){ background-position:62% 42% !important; }
  .gap-hero-photos > .gap-hero-photo:nth-child(2){ background-position:73% 42% !important; }
  .gap-hero-photos > .gap-hero-photo:nth-child(3){ background-position:63% 38% !important; }
  .gap-hero-photos > .gap-hero-photo:nth-child(4){ background-position:66% 38% !important; }
  .gap-hero-photos > .gap-hero-photo:nth-child(5){ background-position:67% 45% !important; }
  .gap-hero-photos > .gap-hero-photo:nth-child(6){ background-position:67% 45% !important; }
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   37 - QUIZ-TRENNSTRICH: NEU UND EINDEUTIG
   Ueber die Runden sind drei Varianten uebereinander gewachsen: ein
   inset-Schatten am zweiten Knopf (22.4), ein border-left mit
   margin-left:-2px (25.2) und zuletzt der erzwungene Schatten aus 34.2.
   Alle drei zusammen ergaben eine doppelte, versetzte Kante.
   Jetzt gilt: **die Knoepfe zeichnen gar keine Trennung mehr**. Der Strich
   wird einmal auf der Antwortleiste selbst gezeichnet, mittig und ueber
   allem - damit kann ihn weder Hover noch ein gefaerbter Zustand verdecken.
   Die inneren Rahmenkanten der beiden Knoepfe sind abgeschaltet, sonst
   liefe der farbige Rahmen des beantworteten Knopfes direkt neben dem
   Strich und es waeren wieder zwei Linien.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.gap-quiz-btn,
.gap-quiz-btn:hover, .gap-quiz-btn:focus, .gap-quiz-btn:focus-visible,
.gap-quiz-btn.ist-richtig, .gap-quiz-btn.ist-falsch, .gap-quiz-btn.ist-loesung{
  box-shadow:none !important;
  margin-left:0 !important; margin-right:0 !important;
}
.gap-quiz-btn:first-child,
.gap-quiz-btn:first-child:hover,
.gap-quiz-btn:first-child.ist-richtig,
.gap-quiz-btn:first-child.ist-falsch,
.gap-quiz-btn:first-child.ist-loesung{ border-right-color:transparent !important; }
.gap-quiz-btn:last-child,
.gap-quiz-btn:last-child:hover,
.gap-quiz-btn:last-child.ist-richtig,
.gap-quiz-btn:last-child.ist-falsch,
.gap-quiz-btn:last-child.ist-loesung{ border-left-color:transparent !important; }

.gap-quiz-antworten::after{
  content:""; position:absolute; top:0; bottom:0; left:50%;
  width:2px; margin-left:-1px;
  background:var(--e-global-color-primary,#004799);
  pointer-events:none; z-index:4;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   38 - QUIZ: BEANTWORTETER ZUSTAND SCHLAEGT HOVER
   Solange die Maus nach dem Klick auf dem Knopf stehen blieb, hat die
   Hover-Regel (spaeter im Stylesheet, gleiche Spezifitaet) die Ergebnis-
   Farbe ueberschrieben - der Knopf blieb hellblau statt gruen oder rot.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.gap-quiz-btn.ist-richtig,
.gap-quiz-btn.ist-richtig:hover,
.gap-quiz-btn.ist-richtig:focus-visible{
  background:#E4F6EC !important;
  border-color:var(--e-global-color-accent,#009881) !important;
}
.gap-quiz-btn.ist-falsch,
.gap-quiz-btn.ist-falsch:hover,
.gap-quiz-btn.ist-falsch:focus-visible{
  background:#FBE9E9 !important;
  border-color:#D0454B !important;
}
/* Die innere Kante bleibt in jedem Zustand offen - die Mitte macht der
   Strich aus Abschnitt 37, sonst stuenden dort wieder zwei Linien. */
.gap-quiz-antworten .gap-quiz-btn:first-child,
.gap-quiz-antworten .gap-quiz-btn:first-child:hover,
.gap-quiz-antworten .gap-quiz-btn:first-child:focus-visible{ border-right-color:transparent !important; }
.gap-quiz-antworten .gap-quiz-btn:last-child,
.gap-quiz-antworten .gap-quiz-btn:last-child:hover,
.gap-quiz-antworten .gap-quiz-btn:last-child:focus-visible{ border-left-color:transparent !important; }


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   39 - QUIZ: TRENNSTRICH NIMMT DIE ERGEBNISFARBE AN, OHNE LUECKE
   Der Strich aus 37 war immer dunkelblau. Sobald eine Haelfte gruen oder
   rot markiert ist, gehoert er in dieselbe Farbe, sonst liegt eine blaue
   Kante mitten im farbigen Rahmen.
   Die Luecke davor kam von den inneren Rahmenkanten: sie waren zwar
   durchsichtig, aber immer noch 2px breit - dort blitzte das Weiss durch.
   Jetzt haben sie Breite 0, die Flaechen stossen exakt aneinander und der
   Strich sitzt genau auf der Naht.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.gap-quiz-antworten{ --gap-quiz-strich:var(--e-global-color-primary,#004799); }
.gap-quiz-antworten:has(.gap-quiz-btn.ist-richtig){ --gap-quiz-strich:var(--e-global-color-accent,#009881); }
.gap-quiz-antworten:has(.gap-quiz-btn.ist-falsch){  --gap-quiz-strich:#D0454B; }
.gap-quiz-antworten::after{
  background:var(--gap-quiz-strich) !important;
  transition:background-color 220ms var(--gap-ease,ease);
}

.gap-quiz-antworten .gap-quiz-btn:first-child,
.gap-quiz-antworten .gap-quiz-btn:first-child:hover,
.gap-quiz-antworten .gap-quiz-btn:first-child:focus-visible{ border-right-width:0 !important; }
.gap-quiz-antworten .gap-quiz-btn:last-child,
.gap-quiz-antworten .gap-quiz-btn:last-child:hover,
.gap-quiz-antworten .gap-quiz-btn:last-child:focus-visible{ border-left-width:0 !important; }


/* ============================================================
   40 Schulmaterial: Fluss ohne harte Kante, mehr Luft zum Text
   ------------------------------------------------------------
   Das Fluss-PNG ist 2560x1244 gross und waechst seit Runde 12
   mit der Fensterbreite mit. Sein Rahmen hatte aber noch eine
   feste Hoehe (743px) - ab 1529px Fensterbreite wurde dem Fluss
   damit unten die Kurve glatt abgeschnitten. aspect-ratio bindet
   die Rahmenhoehe jetzt ans Seitenverhaeltnis des Bildes,
   min-height faengt die schmalen Fenster ab, in denen das Bild
   breiter ist als der Rahmen.
   ============================================================ */
.gap-schule-fluss-wrap{
  height:auto !important;
  aspect-ratio:2560 / 1244;
  min-height:743px;
}

/* Das PNG ist bis 87,6 % seiner Hoehe deckend, darunter liegt
   nur noch Transparenz. Faktoren:
   0.4859 = 1244/2560  (Bildhoehe je Breite)
   0.4257 = 0.4859 x 0.876  (sichtbare Flusstiefe je Breite)
   So waechst der Abstand zum Text genauso mit wie der Fluss und
   das Verhaeltnis bleibt auf jeder Fensterbreite gleich. */
.gap-schule{
  padding-top:calc(341px + max(0px, (100vw - 1529px) * 0.4257)) !important;
}
@media (max-width:1024px){
  .gap-schule-fluss-wrap{ min-height:535px; }
  .gap-schule{ padding-top:250px !important; }
}
@media (max-width:767px){
  .gap-schule-fluss-wrap{ min-height:370px; }
  .gap-schule{ padding-top:88px !important; }
}


/* ============================================================
   41 Footer-Links, Claim-Verlinkung, Schatten am Geschichten-
      Karussell
   ============================================================ */

/* 41.1 Footer-Menue: dieselbe Linie wie in der Navigation.
   Sie waechst von links herein, liegt auf currentColor und sitzt
   knapp unter der Schrift. Die Links haben keinen seitlichen
   Innenabstand, deshalb left/right auf 0 (in der Navbar sind es
   13px wegen der alten Pillen-Geometrie). */
.gap-foot-nav .elementor-nav-menu > li > a.elementor-item{
  position:relative; text-decoration:none;
}
.gap-foot-nav .elementor-nav-menu > li > a.elementor-item::after{
  content:""; position:absolute; left:0; right:0; bottom:1px;
  height:2px; width:auto; top:auto;
  background:currentColor; border-radius:1px;
  transform:scaleX(0); transform-origin:left center;
  transition:transform 320ms cubic-bezier(.22,.61,.36,1);
}
.gap-foot-nav .elementor-nav-menu > li > a.elementor-item:hover::after,
.gap-foot-nav .elementor-nav-menu > li > a.elementor-item:focus-visible::after{
  transform:scaleX(1);
}

/* 41.2 Der Claim ist jetzt ein Link auf die Startseite (Elementor-
   Template 25, Widget 25720bc). Elementor rendert die Ueberschrift
   damit als <a>; ohne diese Regel faerbt der Kit sie in seiner
   Linkfarbe. Der Claim ist ein Logo und bekommt deshalb keine
   Linie, nur einen Farbwechsel. */
/* Elementor haengt den Link INNERHALB von .elementor-heading-title
   ein, nicht an sie dran - der Selektor muss deshalb auf das Kind
   zielen. reset.css faerbt jedes <a> magenta; der Elementor-Regel
   "...[class*=elementor-size-] > a{color:inherit}" ist das egal,
   unsere Hoverfarbe braucht aber genug Spezifitaet. */
.gap-foot-claim .elementor-heading-title > a{
  color:inherit; text-decoration:none; display:inline-block;
  transition:color var(--gap-dur,240ms) var(--gap-ease,ease);
}
.gap-foot-claim .elementor-heading-title > a:hover{ color:#FFFFFF; }
.gap-foot-claim .elementor-heading-title > a:focus-visible{
  outline:2px solid #FFFFFF; outline-offset:4px;
}

/* 41.3 Schatten am Geschichten-Karussell blieb beim Klick weg.
   Grund: reset.css enthaelt die uebliche Regel
     [tabindex]:not([tabindex~="-1"]):focus:not(:focus-visible),
     a:focus:not(:focus-visible), button:focus:not(:focus-visible)
       { box-shadow:none; }
   Die soll einen als Schatten gezeichneten Fokusring fuer
   Mausklicks abschalten. Unsere Karussell-Buehne braucht aber
   tabindex="0" zum Blaettern per Tastatur - und benutzt den
   Schatten als Deko. Ein Mausklick hat ihn deshalb geloescht.
   Die Regel unten hat mit drei Klassen plus zwei Pseudoklassen
   eine hoehere Spezifitaet (0,5,0 gegen 0,4,0) und setzt ihn
   zurueck - ohne !important. */
.gap-geschichten .gap-gesch-slider .gap-gesch-vp,
.gap-geschichten .gap-gesch-slider .gap-gesch-vp:focus,
.gap-geschichten .gap-gesch-slider .gap-gesch-vp:focus:not(:focus-visible),
.gap-geschichten .gap-gesch-slider .gap-gesch-vp:focus-visible{
  box-shadow:0 22px 54px -36px rgba(0,42,92,.45);
}

@media (prefers-reduced-motion: reduce){
  .gap-foot-nav .elementor-nav-menu > li > a.elementor-item::after{
    transition:none;
  }
}


/* ============================================================
   42 iPhone-Runde (Test auf iPhone 15, 393 px)
   ============================================================ */

/* 42.1 Hero mobil ---------------------------------------------------------
   Die Hoehe ist von 780 auf 690 px herunter (Abschnitt 6). Dabei ist eine
   Falle aufgegangen: .gap-hero-inner steht absolut mit top UND bottom und
   hat flex-wrap:wrap. Wird der Kasten niedriger als der Inhalt, klappt die
   Headline in eine ZWEITE SPALTE und steht ploetzlich rechts. Deshalb
   bottom:auto (die Hoehe richtet sich nach dem Inhalt) und nowrap.
   Die Ausschnitte 2/3/4 sind in Abschnitt 36 direkt geaendert. */
@media (max-width:767px){
  .gap-hero-inner{
    top:150px; bottom:auto; height:auto; flex-wrap:nowrap;
  }
}

/* 42.2 Wasser-Check: das mittlere Label brach um, sobald die Zahl
   zweistellig wurde. Mobil steht jetzt "Min." statt "Minuten"
   (die beiden Spans stecken im Elementor-Markup der Seite 45). */
.gap-kurz{ display:none; }
@media (max-width:767px){
  .gap-lang{ display:none; }
  .gap-kurz{ display:inline; }
}

/* 42.3 Gut gelaufen -------------------------------------------------------
   Der Tropfen-Stoerer ist mobil zu gross und deckt die Karte zu. */
@media (max-width:767px){
  .gap-gut-stoerer{ display:none !important; }
}
/* Die Kennzahl darf nicht umbrechen. "850 Menschen" hat sonst zwei Zeilen
   gebraucht - und weil .gap-projekt-inhalt unten verankert ist (bottom:30px,
   top:auto), waechst der Inhalt nach OBEN aus der Karte heraus und wird von
   overflow:hidden abgeschnitten. Die dritte Kennzahl steht allein in der
   zweiten Reihe und darf deshalb die ganze Breite nehmen. */
.gap-kpi-wert{ white-space:nowrap; }
@media (max-width:767px){
  .gap-kpis .gap-kpi:nth-child(3){ flex-basis:100%; }
}

/* 42.4 Badespass: beide Kinder im Bild. */
@media (max-width:767px){
  .gap-seen-foto{ object-position:68% 50% !important; }
}

/* 42.5 Quiz ---------------------------------------------------------------
   Der graue Rand an den Bildern war die Platzhalterfarbe #D9D9D9, die an
   den abgerundeten Kanten unter dem Foto durchschimmert. Weiss faellt
   nicht auf - weder als Platzhalter noch als Kantenrest.
   Dazu der fehlende Schatten und mehr Luft zwischen den Karten. */
.gap-quiz-bild{
  background:#FFFFFF;
  box-shadow:0 14px 30px -20px rgba(0,42,92,.45);
}
@media (max-width:767px){
  .gap-quiz-grid{ gap:44px; }
}

/* 42.6 Geschichten mobil --------------------------------------------------
   Der Pill-Tag faellt weg, damit die Karte niedriger wird. Marie stand zu
   weit oben im Ausschnitt, ihr Kopf war angeschnitten. */
@media (max-width:767px){
  .gap-gesch-tag{ display:none; }
  /* Der Abstand haengt am Zitat, nicht am Tag - sonst bleibt die
     Luecke stehen, wo der Tag war. */
  .gap-gesch-zitat{ margin-top:0; }
  .gap-gesch-slide:nth-child(1) .gap-gesch-foto img{ object-position:50% 22%; }
}

/* 42.7 Schulmaterial mobil ------------------------------------------------
   Fluss und Stoerer sind mobil zu gross und stehen im Weg. Ohne den Fluss
   braucht die Sektion oben auch nicht mehr so viel Vorlauf (siehe 40).
   Foto und weisse Karte bilden jetzt EINEN Block wie in Figma: Radius nur
   oben bzw. nur unten, keine Kante dazwischen. */
@media (max-width:767px){
  .gap-schule-fluss-wrap{ display:none; }
  .gap-schule-stoerer{ display:none !important; }
  .gap-schule-foto{ border-radius:18px 18px 0 0; overflow:hidden; display:block; line-height:0; }
  .gap-schule-foto img{ border-radius:18px 18px 0 0; }
  .gap-schule-karte{ border-radius:0 0 18px 18px; border-top-width:0; }
}
/* Mehr Luft zwischen Text und Button (Figma). */
@media (max-width:1024px){
  .gap-schule-play{ margin-top:26px; }
}


/* ============================================================
   43 Geschichten: Pfeile
   ------------------------------------------------------------
   Quelle: Figma 847:3765 (zurueck) und 847:3779 (vor).
   Kreis 38 px in Dunkelblau, weisser Winkel mit 3 px Strichstaerke
   und runden Enden. Sie stehen 28 px neben der Karte und sitzen auf
   halber Kartenhoehe (Karte 450 px -> 225 px).
   Nur Desktop: im 390er Figma-Entwurf gibt es sie nicht, dort wird
   gewischt. Links vom Rand ist ab 1025 px immer Platz, weil
   --gap-edge dort 100 px betraegt und der Knopf nur 66 px braucht.
   ============================================================ */
.gap-gesch-pfeil{
  position:absolute; top:225px; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  padding:0; margin:0; border:0;
  display:none; place-items:center;
  cursor:pointer; z-index:3;
  color:#FFFFFF;
  transition:background-color 220ms var(--gap-ease,ease);
}
/* Hello Elementor faerbt JEDEN Button im Hover magenta und setzt eigene
   Raender - deshalb alle Zustaende hart setzen, nicht nur den Grundzustand. */
.gap-gesch-pfeil,
.gap-gesch-pfeil:hover,
.gap-gesch-pfeil:focus,
.gap-gesch-pfeil:focus-visible,
.gap-gesch-pfeil:active{
  background-image:none !important;
  border-color:transparent !important;
  box-shadow:none !important;
  color:#FFFFFF !important;
}
.gap-gesch-pfeil{ background-color:var(--e-global-color-primary,#004799) !important; }
.gap-gesch-pfeil:hover,
.gap-gesch-pfeil:focus-visible{ background-color:#003A7A !important; }
.gap-gesch-pfeil:focus-visible{
  outline:2px solid var(--e-global-color-primary,#004799); outline-offset:3px;
}
.gap-gesch-zurueck{ left:-66px; }   /* 38 px Knopf + 28 px Luft */
.gap-gesch-vor{ right:-66px; }
.gap-gesch-pfeil svg{ width:38px; height:38px; display:block; }
.gap-gesch-pfeil svg path{
  fill:none; stroke:currentColor; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
}
@media (min-width:1025px){
  .gap-gesch-pfeil{ display:grid; }
}
@media (prefers-reduced-motion: reduce){
  .gap-gesch-pfeil{ transition:none; }
}


/* ════════════════════════════════════════════════
   44 · SECTION 11 ECHTDATEN
   Quellen: 543:7491 (Desktop 1440) und 543:8188 (Mobil 390)

   Aufbau: hellblaue Sektion, zentrierter Kopf, darunter fuenf
   weisse Karten mit Ueberschrift, Text und einem Textlink nach
   draussen. Am Fuss ein Haftungshinweis.
   ════════════════════════════════════════════════ */

.gap-echt{
  background:var(--e-global-color-surflight,#AFDFF9);
  padding:123px var(--gap-edge) 65px;
  scroll-margin-top:110px;
  /* Tropfen und Marke stehen hier dunkelblau, nicht hellblau. */
  --gap-sec-color:var(--e-global-color-primary,#004799);
}

/* 44.1 Kopf --------------------------------------------------------------- */
.gap-echt-head{
  width:min(725px,100%); margin-inline:auto; text-align:center;
}
.gap-echt-head .gap-sec-badge{ justify-content:center; }
.gap-echt-h2 .elementor-heading-title{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:82px; line-height:73.8px; letter-spacing:-2px;
  text-transform:uppercase;
  color:var(--e-global-color-primary,#004799);
  white-space:pre-line; margin:0;
}
.gap-echt-h2 .gap-gruen{ color:var(--e-global-color-accent,#009881); }
.gap-echt-lead, .gap-echt-lead .elementor-heading-title{
  font-family:var(--gap-font-body); font-weight:500;
  font-size:20.5px; line-height:24.6px; letter-spacing:-0.1px;
  color:var(--e-global-color-primary,#004799); margin-block:0;
}

/* 44.2 Karten ------------------------------------------------------------- */
.gap-echt-wrap{
  width:min(1096px,100%); margin:var(--gap-kopf-inhalt) auto 0;
}
.gap-echt-liste{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
}
.gap-echt-box{
  background:#FFFFFF;
  border:1px solid var(--gap-blau-hell,#27BDEF);
  border-radius:20px;
  padding:24px 32px;
  min-height:160px;
}
/* Amplitude Compressed traegt im Entwurf immer Versalien - das gilt
   fuer die Kartenueberschriften genauso wie fuer die Headline. */
.gap-echt-h3{
  font-family:var(--gap-font-head) !important; font-weight:900 !important;
  font-size:32px !important; line-height:28.8px !important; letter-spacing:.2px !important;
  text-transform:uppercase !important;
  color:var(--e-global-color-primary,#004799) !important;
  margin:0 !important;
}
.gap-echt-text{
  font-family:var(--gap-font-body); font-weight:500;
  font-size:16px; line-height:19.2px; letter-spacing:.2px;
  color:var(--e-global-color-primary,#004799);
  margin:7px 0 0;
  hyphens:auto; hyphenate-limit-chars:8 4 4;
}

/* 44.3 Textlink -----------------------------------------------------------
   Dieselbe Linie wie in der Navigation: sie waechst von links herein.
   Der Pfeil ist Teil des Links und rueckt im Hover ein Stueck mit. */
.gap-echt-link{
  display:inline-flex; align-items:baseline; gap:6px;
  margin-top:20px;
  font-family:var(--gap-font-body); font-weight:700;
  font-size:16px; line-height:19.2px; letter-spacing:.2px;
  color:var(--gap-blau-hell,#27BDEF);
  text-decoration:none;
}
.gap-echt-link:hover, .gap-echt-link:focus-visible{
  color:var(--gap-blau-hell,#27BDEF);
}
.gap-echt-link-text{ position:relative; }
.gap-echt-link-text::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px;
  height:2px; background:currentColor; border-radius:1px;
  transform:scaleX(0); transform-origin:left center;
  transition:transform 320ms cubic-bezier(.22,.61,.36,1);
}
.gap-echt-link:hover .gap-echt-link-text::after,
.gap-echt-link:focus-visible .gap-echt-link-text::after{ transform:scaleX(1); }
.gap-echt-pfeil{
  display:inline-block;
  transition:transform 320ms cubic-bezier(.22,.61,.36,1);
}
.gap-echt-link:hover .gap-echt-pfeil{ transform:translateX(4px); }
.gap-echt-link:focus-visible{
  outline:2px solid var(--e-global-color-primary,#004799); outline-offset:4px;
  border-radius:2px;
}

/* 44.4 Haftungshinweis ---------------------------------------------------- */
/* Achtung: der Abstand gehoert auf die Huelle, die Schriftregel darf
   ihn nicht mit margin-block:0 wieder einsammeln - deshalb wird nur der
   innere Titel auf 0 gesetzt. */
.gap-echt-hinweis{ width:min(1096px,100%); margin:48px auto 0; }
.gap-echt-hinweis, .gap-echt-hinweis .elementor-heading-title{
  font-family:var(--gap-font-body); font-weight:500;
  font-size:12.5px; line-height:15px; letter-spacing:.2px;
  color:var(--e-global-color-primary,#004799);
}
.gap-echt-hinweis .elementor-heading-title{ margin:0; }

/* 44.5 Tablet und Mobil ---------------------------------------------------
   Im 390er Entwurf steht der Kopf LINKS, nicht zentriert, die Karten
   sind hoeher (Text bricht) und stehen 24 px auseinander statt 10. */
@media (max-width:1024px){
  .gap-echt{ padding:100px var(--gap-edge) 48px; }
  .gap-echt-h2 .elementor-heading-title{ font-size:68px; line-height:61.2px; }
  .gap-echt-liste{ gap:16px; }
  .gap-echt-box{ padding:24px 28px; min-height:0; }
}
@media (max-width:767px){
  .gap-echt{ padding:91px var(--gap-edge) 29px; }
  .gap-echt-head{ width:100%; text-align:left; }
  .gap-echt-head .gap-sec-badge{ justify-content:flex-start; }
  .gap-echt-h2 .elementor-heading-title{ font-size:64px; line-height:57.6px; white-space:normal; }
  .gap-echt-hinweis{ margin-top:36px; }
  .gap-echt-lead, .gap-echt-lead .elementor-heading-title{ font-size:16px; line-height:20.8px; letter-spacing:.2px; }
  .gap-echt-liste{ gap:24px; }
  .gap-echt-box{ padding:28px 30px; }
  .gap-echt-text{ line-height:20.8px; }
  .gap-echt-link{ line-height:20.8px; font-weight:800; }
  .gap-echt-hinweis, .gap-echt-hinweis .elementor-heading-title{ font-size:12.8px; line-height:19.8px; }
}
@media (prefers-reduced-motion: reduce){
  .gap-echt-link-text::after, .gap-echt-pfeil{ transition:none; }
}


/* ════════════════════════════════════════════════
   45 · SECTION 12 FAQ
   Quellen: 543:7512 (Desktop 1440), 543:8209 (Mobil 390)
   und 556:5954 (die Liste im aufgeklappten Zustand).

   Aufklappen laeuft ueber natives <details>/<summary> — das
   bringt Tastaturbedienung, Suchen-im-Text und die richtige
   Ansage fuer Screenreader mit, ganz ohne JavaScript.
   ════════════════════════════════════════════════ */

.gap-faq{
  background:linear-gradient(180deg,#FFFFFF 0%, var(--gap-blau-zart,#EDF8FE) 100%);
  padding:110px var(--gap-edge) 90px;
  scroll-margin-top:110px;
}

/* 45.1 Kopf --------------------------------------------------------------- */
.gap-faq-head{ width:min(661px,100%); margin-inline:auto; text-align:center; }
.gap-faq-head .gap-sec-badge{ justify-content:center; }
.gap-faq-h2 .elementor-heading-title{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:82px; line-height:73.8px; letter-spacing:-2px;
  text-transform:uppercase;
  color:var(--e-global-color-primary,#004799);
  white-space:pre-line; margin:0;
}
.gap-faq-h2 .gap-gruen{ color:var(--e-global-color-accent,#009881); }
.gap-faq-lead, .gap-faq-lead .elementor-heading-title{
  font-family:var(--gap-font-body); font-weight:500;
  font-size:20.5px; line-height:24.6px; letter-spacing:-0.1px;
  color:var(--e-global-color-primary,#004799); margin-block:0;
}

/* 45.2 Liste -------------------------------------------------------------- */
.gap-faq-wrap{ width:min(1096px,100%); margin:var(--gap-kopf-inhalt) auto 0; }
.gap-faq-liste{ display:grid; gap:12px; }
.gap-faq-item{
  background:#FFFFFF;
  border:1px solid var(--e-global-color-surflight,#AFDFF9);
  border-radius:16px;
  overflow:hidden;
}

/* 45.3 Frage --------------------------------------------------------------
   list-style und der alte WebKit-Marker muessen beide weg, sonst steht
   links noch das Dreieck des Browsers. */
.gap-faq-frage{
  list-style:none;
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding:22px 41px 22px 30px;
  cursor:pointer;
  font-family:var(--gap-font-body); font-weight:800;
  font-size:20.5px; line-height:24.6px; letter-spacing:-0.1px;
  color:var(--e-global-color-primary,#004799);
}
.gap-faq-frage::-webkit-details-marker{ display:none; }
/* Plus und Minus liegen uebereinander und blenden ineinander - ein
   content-Wechsel liesse sich nicht animieren. */
.gap-faq-zeichen{
  position:relative; flex:0 0 auto;
  width:12px; height:1em; align-self:flex-start;
  font-weight:500; color:var(--e-global-color-accent,#009881);
}
.gap-faq-zeichen > span{
  position:absolute; inset:0; display:block; text-align:center;
  transition:opacity 200ms var(--gap-ease,ease);
}
.gap-faq-minus{ opacity:0; }
.gap-faq-item[open] .gap-faq-plus{ opacity:0; }
.gap-faq-item[open] .gap-faq-minus{ opacity:1; }
.gap-faq-frage:focus-visible{
  outline:2px solid var(--e-global-color-primary,#004799); outline-offset:-4px;
  border-radius:16px;
}

/* 45.4 Antwort ------------------------------------------------------------ */
.gap-faq-antwort{ padding:0 30px 22px; }
.gap-faq-antwort p{
  font-family:var(--gap-font-body); font-weight:500;
  font-size:16px; line-height:19.2px; letter-spacing:.2px;
  color:var(--e-global-color-primary,#004799);
  margin:0;
}
.gap-faq-antwort strong{ font-weight:800; }

/* 45.5 Tablet und Mobil --------------------------------------------------- */
@media (max-width:1024px){
  .gap-faq{ padding:90px var(--gap-edge) 72px; }
  .gap-faq-h2 .elementor-heading-title{ font-size:68px; line-height:61.2px; }
  .gap-faq-frage{ padding:22px 28px 22px 28px; font-size:18px; line-height:23px; }
  .gap-faq-antwort{ padding:0 28px 22px; }
}
@media (max-width:767px){
  .gap-faq{ padding:91px var(--gap-edge) 60px; }
  .gap-faq-head{ width:100%; text-align:left; }
  .gap-faq-head .gap-sec-badge{ justify-content:flex-start; }
  .gap-faq-h2 .elementor-heading-title{ font-size:64px; line-height:57.6px; white-space:normal; }
  .gap-faq-lead, .gap-faq-lead .elementor-heading-title{ font-size:16px; line-height:20.8px; letter-spacing:.2px; }
  .gap-faq-liste{ gap:16px; }
  .gap-faq-frage{ padding:22px 22px 22px 30px; gap:16px; font-size:16px; line-height:20.8px; letter-spacing:.2px; }
  .gap-faq-antwort{ padding:0 30px 22px; }
  .gap-faq-antwort p{ line-height:20.8px; }
}


/* 45.6 Bewegung -----------------------------------------------------------
   Das Skript in functions.php (gap_faq_block) haelt open waehrend der
   ganzen Bewegung gesetzt und animiert nur die Hoehe dieses Schachts.
   Ohne Skript steht hier height:auto - dann klappt es wie gehabt sofort. */
.gap-faq-schacht{
  overflow:hidden;
  transition:height 340ms cubic-bezier(.22,.61,.36,1);
}

/* Der Abfluss-Check zeigt auf unser eigenes Quiz. Er benutzt die
   allgemeine Klasse .gap-textlink aus Abschnitt 18.4 - gruen, ohne
   Unterstreichung im Ruhezustand, Linie waechst im Hover von links
   herein. Hier steht also bewusst KEINE eigene Farbregel; die Farbe
   im Hover haelt jetzt Abschnitt 21.2 fest. TK will den Link hier
   dunkelblau wie den Fliesstext - der Haken --gap-link-farbe setzt
   das fuer Ruhe, Hover, Fokus und Aktiv in einem Aufwasch. */
.gap-faq-link{
  /* Achtung: --gap-link-farbe: inherit waere wirkungslos. Bei
     Custom Properties gilt ein CSS-Schluesselwort der Eigenschaft
     selbst - die Variable wuerde also vom Elternelement erben und
     bliebe leer, es zoege der gruene Fallback. currentColor dagegen
     landet als Wert in color: und loest dort auf die geerbte Farbe
     auf, also auf das Dunkelblau des Fliesstextes. */
  --gap-link-farbe: currentColor;
}
.gap-faq-link:focus-visible{
  outline:2px solid var(--e-global-color-primary,#004799); outline-offset:3px;
  border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  .gap-faq-schacht{ transition:none; }
  .gap-faq-zeichen > span{ transition:none; }
}


/* ════════════════════════════════════════════════
   46 · SECTION 13 KONTAKT
   Quellen: 543:7564 (Desktop 1440) und 543:8261 (Mobil 390)

   Aufbau: weisse Sektion, zentrierter Kopf mit Tropfen-Stoerer
   links daneben, darunter eine hellblaue Karte mit sechs Zeilen.
   Jede Zeile: Ueberschrift links, Text mit Textlink rechts,
   dazwischen duenne Trennlinien. Mobil stehen Ueberschrift und
   Text untereinander.
   ════════════════════════════════════════════════ */

.gap-kontakt{
  position:relative;
  background:#FFFFFF;
  padding:110px var(--gap-edge) 100px;
  scroll-margin-top:110px;
  /* Kein --gap-sec-color: auf Weiss steht die Marke himmelblau
     (#27BDEF), so wie im Entwurf und wie bei FAQ und Geschichten.
     Echtdaten dreht sie nur deshalb auf Dunkelblau, weil die
     Section dort selbst hellblau ist. */
}

/* 46.1 Tropfen-Stoerer ----------------------------------------------------
   Derselbe Tropfen wie im Schulmaterial, hier aber links neben dem
   Kopf. Er haengt an der Mitte, nicht am Fensterrand: die Karte ist
   1096 breit, ihr linker Rand liegt also bei 50% - 548px, der
   Tropfen 60px weiter links. max() faengt schmale Fenster ab. */
.gap-kon-stoerer-wrap{ position:static; }
/* Achtung: KEIN pointer-events:none. Die Schwebebewegung der
   Tropfen haengt an .gap-stoerer:hover (Abschnitt 14) - wer die
   Maus aussperrt, schaltet die Animation ab. */
.gap-kon-stoerer{
  position:absolute; z-index:2;
  top:98px; left:max(16px, calc(50% - 608px));
  width:183px; height:auto;
}

/* 46.2 Kopf --------------------------------------------------------------- */
.gap-kon-head{
  position:relative; z-index:1;
  width:min(788px,100%); margin-inline:auto; text-align:center;
}
.gap-kon-head .gap-sec-badge{ justify-content:center; }
.gap-kon-h2{ width:min(661px,100%); margin-inline:auto; }
.gap-kon-h2 .elementor-heading-title{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:82px; line-height:73.8px; letter-spacing:-2px;
  text-transform:uppercase;
  color:var(--e-global-color-primary,#004799);
  white-space:pre-line; margin:0;
}
.gap-kon-h2 .gap-gruen{ color:var(--e-global-color-accent,#009881); }
.gap-kon-lead, .gap-kon-lead .elementor-heading-title{
  font-family:var(--gap-font-body); font-weight:500;
  font-size:20.5px; line-height:24.6px; letter-spacing:-0.1px;
  color:var(--e-global-color-primary,#004799); margin-block:0;
}

/* 46.3 Karte -------------------------------------------------------------- */
.gap-kon-wrap{ width:min(1096px,100%); margin:var(--gap-kopf-inhalt) auto 0; }
.gap-kon-karte{
  background:var(--gap-blau-zart,#EDF8FE);
  border-radius:20px;
  padding:19px 32px;
}
/* Im Entwurf ist jede Zeile 94px hoch, der Inhalt sitzt mittig.
   min-height statt height, damit eine Zeile bei schmalem Fenster
   oder groesserer Schrift mitwachsen kann. */
.gap-kon-zeile{
  display:grid; grid-template-columns:265px 1fr; gap:32px;
  align-items:center; min-height:94px; padding:14px 0;
}
.gap-kon-zeile + .gap-kon-zeile{
  border-top:1px solid var(--e-global-color-surflight,#AFDFF9);
}
.gap-kon-h3{
  font-family:var(--gap-font-head); font-weight:900;
  font-size:32px; line-height:28.8px; letter-spacing:.2px;
  text-transform:uppercase;
  color:var(--e-global-color-primary,#004799);
  margin:0;
}
.gap-kon-text{
  font-family:var(--gap-font-body); font-weight:500;
  font-size:16px; line-height:19.2px; letter-spacing:.2px;
  color:var(--e-global-color-primary,#004799);
  margin:0;
}

/* 46.4 Links --------------------------------------------------------------
   Die Zeilenlinks nutzen die allgemeine Klasse .gap-textlink aus
   Abschnitt 21.2 (gruen, Linie waechst im Hover von links herein).
   nowrap haelt Text und Pfeil zusammen. */
.gap-kon-link{ font-weight:700; white-space:nowrap; }

/* Die Mailadresse ist zu lang fuer eine Zeile im Handy. Sie kann
   deshalb NICHT .gap-textlink benutzen: dessen Linie ist ein
   absolut gesetztes ::after und haelt einen Umbruch nicht aus.
   Dieselbe Bewegung entsteht hier mit einem Verlauf als Hintergrund,
   der ueber alle Zeilen mitwandert. */
.gap-kon-mail{
  /* dunkelblau wie der Fliesstext, nicht gruen wie die Zeilenlinks */
  color:inherit;
  font-weight:700;
  text-decoration:none !important;
  /* Umbruchstellen setzt das Markup mit <wbr> nach dem Punkt und
     nach dem @. break-word greift nur, wenn selbst das nicht reicht. */
  overflow-wrap:break-word;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 2px;
  transition:background-size 320ms cubic-bezier(.22,.61,.36,1);
}
.gap-kon-mail:hover, .gap-kon-mail:focus, .gap-kon-mail:focus-visible,
.gap-kon-mail:active{ color:inherit; }
.gap-kon-mail:hover, .gap-kon-mail:focus-visible{ background-size:100% 2px; }
.gap-kon-link:focus-visible, .gap-kon-mail:focus-visible{
  outline:2px solid var(--e-global-color-primary,#004799);
  outline-offset:3px; border-radius:2px;
}

/* 46.5 Tablet und Mobil ---------------------------------------------------
   Ab 1024 faellt der Tropfen weg, ab 767 stehen Ueberschrift und
   Text uebereinander und der Kopf rueckt nach links. */
@media (max-width:1024px){
  .gap-kontakt{ padding:100px var(--gap-edge) 80px; }
  .gap-kon-stoerer{ display:none; }
  .gap-kon-h2 .elementor-heading-title{ font-size:68px; line-height:61.2px; }
  /* Die Spalte bleibt 265px breit: die laengste einzeilige
     Ueberschrift ("Direkter Kontakt") misst 248px, bei 220px
     bricht sie zweizeilig um. Nur der Spalt wird schmaler. */
  .gap-kon-zeile{ grid-template-columns:265px 1fr; gap:24px; }
}
@media (max-width:767px){
  .gap-kontakt{ padding:85px var(--gap-edge) 78px; }
  .gap-kon-head{ width:100%; text-align:left; }
  .gap-kon-head .gap-sec-badge{ justify-content:flex-start; }
  .gap-kon-h2{ width:100%; }
  .gap-kon-h2 .elementor-heading-title{
    font-size:64px; line-height:57.6px; white-space:normal;
  }
  /* white-space:normal schluckt die Umbrueche aus dem Titel, sonst
     stuende "Laeuft bei uns." mitten in der Zeile hinter "Feedback?".
     Der gruene Satz bekommt deshalb eine eigene Zeile. */
  .gap-kon-h2 .gap-gruen{ display:block; }
  .gap-kon-lead, .gap-kon-lead .elementor-heading-title{
    font-size:16px; line-height:20.8px; letter-spacing:.2px;
  }
  .gap-kon-karte{ padding:10px 30px; }
  .gap-kon-zeile{
    grid-template-columns:1fr; gap:12px;
    align-items:start; min-height:0; padding:26px 0;
  }
  .gap-kon-text{ line-height:20.8px; }
  /* Folder & Broschueren bricht im Entwurf zweizeilig - im Handy
     ist die Spalte breit genug, der harte Umbruch stoert nicht. */
}
@media (prefers-reduced-motion: reduce){
  .gap-kon-mail{ transition:none; }
}


/* ════════════════════════════════════════════════
   47 · WASSEREFFEKT AUF DEN HERO-FOTOS

   Die Leinwand liegt INNERHALB von .gap-hero-photos und damit
   automatisch unter dem Wellenband (z-index 2) und unter der
   Headline (z-index 3). Die sechs CSS-Fotos bleiben unveraendert
   darunter liegen - sie sind der Rueckfall, falls WebGL fehlt,
   der Kontext verloren geht oder jemand weniger Bewegung wuenscht.
   Die Leinwand blendet sich erst ein, wenn das erste Bild wirklich
   gezeichnet wurde.
   ════════════════════════════════════════════════ */

.gap-hero-wasser{
  position:absolute; inset:0; display:block;
  width:100%; height:100%;
  opacity:0; transition:opacity 420ms ease;
  pointer-events:none;   /* die Maus soll den Hero bedienen, nicht die Leinwand */
}
.gap-hero-wasser.ist-da{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .gap-hero-wasser{ display:none; }
}


/* 47.1 Freisteller: Person vor dem Wasser ------------------------------
   Wo eine Platte --gap-frei nennt, legt der Shader die freigestellte
   Person unverzerrt ueber das gekraeuselte Foto und faehrt die
   Verzerrung entlang ihrer Silhouette weich herunter. Bedingung: der
   Freisteller hat dasselbe Seitenverhaeltnis wie das Foto (1.6) und
   zeigt die Person an derselben Stelle - dann trifft ihn dieselbe
   Zuschnitt-Rechnung und er sitzt bei jeder Fensterbreite und jedem
   mobilen Bildausschnitt pixelgenau.
   Ohne Eintrag bleibt eine Platte einfach wie bisher. */
.gap-hero-photos > .gap-hero-photo:nth-child(1){
  --gap-frei: url("/wp-content/uploads/2026/09/freisteller-wasserqualitaet-w.webp");
}
.gap-hero-photos > .gap-hero-photo:nth-child(2){
  --gap-frei: url("/wp-content/uploads/2026/09/freisteller-seen-sehen-w.webp");
}
.gap-hero-photos > .gap-hero-photo:nth-child(3){
  --gap-frei: url("/wp-content/uploads/2026/09/freisteller-trinkwasser-w2.webp");
}
.gap-hero-photos > .gap-hero-photo:nth-child(4){
  --gap-frei: url("/wp-content/uploads/2026/09/freisteller-vorausschauen-w.webp");
}
.gap-hero-photos > .gap-hero-photo:nth-child(5){
  --gap-frei: url("/wp-content/uploads/2026/09/freisteller-fluessen-raum-w.webp");
}
.gap-hero-photos > .gap-hero-photo:nth-child(6){
  --gap-frei: url("/wp-content/uploads/2026/09/freisteller-sicher-versorgt-w.webp");
}


/* 47.2 Stoerer als SVG -----------------------------------------------------
   Die Tropfen-Stoerer liegen als Inline-SVG im Markup. Die Positionsregeln
   (.gap-hero-stoerer, .gap-schule-stoerer, .gap-kon-stoerer) galten bisher
   nur fuer <img> und muessen jetzt auch fuer <svg> greifen.                */
.gap-hero-stoerer svg{ display:block; width:100%; height:auto; }
svg.gap-stoerer{ display:block; }


/* 48 Korrekturen aus TKs Handy-Check --------------------------------------
   Die Hero-Positionen oben in Abschnitt 36 wurden gleich mitgezogen.        */

@media (max-width: 1024px){

  /* 48.1 Abstand zum Tropfen-Stoerer. 80px war zu wenig, 150px zu viel. */
  .gap-intro{ padding-top: 88px; }

  /* 48.2 Schulmaterialien: Foto und Karte sind mobil EIN Block. Der Wrapper
     traegt Rahmen und Rundung, die Karte gibt beides ab - sonst stehen zwei
     Raender uebereinander. */
  .gap-schule-buehne{ gap: 44px; }
  /* Kein border! Border + border-radius + overflow:hidden beschneidet die
     Kinder auf die PADDING-Box (Radius 18-2=16). Zwischen dieser Kurve und
     der Innenkante des Rahmens bleibt ein weisser Haarstrich stehen - genau
     der "weisse Rand in den Ecken". Die Rahmenlinie kommt deshalb als
     box-shadow nach AUSSEN, dann liegt das Foto randlos in der 18px-Kurve. */
  .gap-schule-spiel{
    background:#fff;
    border:0;
    border-radius:18px;
    overflow:hidden;
    box-shadow: 0 0 0 2px var(--e-global-color-surflight, #AFDFF9);
  }

  /* WICHTIG: position:relative allein reicht NICHT. Die Figuren tragen aus
     dem Desktop-Layout noch left/top (Foto 2: left:714px, top:575px). Ohne
     Zuruecksetzen schiebt sich Foto 2 aus dem Wrapper und ist schlicht weg. */
  .gap-schule-foto{
    position:relative; left:auto; top:auto; right:auto; bottom:auto;
    display:block; line-height:0;
  }
  .gap-schule-foto .gap-schule-foto-mobil{ width:100%; height:auto; }
  .gap-schule-karte{ border:0; border-radius:0; }

  /* 48.3 Der Schleier mit den Tags trug noch die gedrehte Desktop-Geometrie
     und lag auf display:none. Jetzt deckt er das Foto - bleibt aber an
     :hover gebunden, erscheint also erst beim Antippen. */
  .gap-schule-foto .gap-schule-foto-ueber{
    display:block; inset:0; width:auto; height:auto;
    rotate:none; border-radius:0;
  }
  .gap-schule-foto:hover .gap-schule-foto-ueber{ transform:none; }
}

@media (max-width: 767px){

  /* 48.4 Geschichten flacher: 3:2, Ausschnitte je Motiv, Text kompakter. */
  .gap-gesch-foto{ aspect-ratio: 3 / 2; }
  .gap-gesch-slide:nth-child(1) .gap-gesch-foto img{ object-position:50% 18%; }
  .gap-gesch-slide:nth-child(2) .gap-gesch-foto img{ object-position:50% 42%; }
  .gap-gesch-slide:nth-child(3) .gap-gesch-foto img{ object-position:50% 28%; }
  .gap-gesch-body{ padding: 24px 38px 28px; }

  /* 48.5 "Laeuft bei uns." als ganze Zeile. */
  .gap-echt-h2 .gap-gruen{ display:block; }

  /* 48.6 Der Kontakt-Tropfen lag ueber der Headline. */
  .gap-kon-stoerer{ display:none !important; }
}

/* 48.7 Zweifarbige Headline in "Auf den Punkt". */
/* TK: „Zahlen gegossen" und „Raum braucht" sollen Hellblau sein, nicht Himmelblau.
   Nebeneffekt: der Kontrast auf dem Dunkelblau steigt von 4,07 auf 6,24. */
.gap-hellblau{ color:#AFDFF9; }

/* 49 Korrekturen aus TKs Tablet-Check - iPad 6, iOS 17.7, Safari ---------
   49.1 und 49.2 gelten ueberall, es sind Reparaturen. Ab 49.3 gilt alles
   nur zwischen 768 und 1024 px; Handy (<=767) und Desktop (>=1025) bleiben
   unberuehrt.                                                             */

/* 49.1 Hero-Notbremse.
   Die Foto-Platten stehen auf display:none, bis das Rotationsskript sie
   freischaltet. Das Skript setzt beim Start is-los auf den Container.
   Fehlt die Klasse, ist das Skript nicht durchgekommen - dann zeigt diese
   Regel die erste Platte. Frueher stand hier :not(:has(...)); die
   Klassenvariante ist in aelteren WebKit-Versionen verlaesslicher.        */
.gap-hero-photos:not(.is-los) .gap-hero-photo:first-child{
  display: block; opacity: 1;
}

/* 49.2 Runde Ecken der Karten in Safari.
   .gap-karte ist um 2,5 Grad gedreht, hat border-radius:32px, overflow:
   hidden und einen DURCHSICHTIGEN Hintergrund - das sichtbare Rechteck ist
   allein das absolut liegende Foto. WebKit beschneidet absolut
   positionierte Kinder eines transformierten Elements nicht am Radius,
   Blink schon. Deshalb wandert der Radius an die Kinder. Zwei Klassen im
   Selektor, sonst gewinnt .elementor img{border-radius:0}.                */
.gap-karte .gap-karte-bild,
.gap-karte .gap-karte-schleier,
.gap-karte .gap-karte-inhalt{ border-radius: inherit; }

@media (min-width: 768px) and (max-width: 1024px){

  /* 49.3 Der Wasser-Shader im Hero laeuft am Tablet wieder mit.
     Er war vorruebergehend abgeschaltet, weil ich den leeren Hero fuer ein
     Speicherproblem der A10-GPU gehalten habe. Die echte Ursache war die
     nicht geladene post-45.css (siehe 49.0). Damit gibt es keinen Grund
     mehr, die Leinwand auszublenden.                                      */

  /* 49.4 Spartipps am Tablet - eigener Fluss aus Figma, Frame "768w light"
     (Knoten 897:15080). Die Buehne ist am Tablet 768 breit und wird NICHT
     skaliert: Texte, Buttons und Boxen stehen in ihren echten Groessen.
     Den Pfad tauscht das Skript (__tabletPfad in functions.php) aus.
     Alle y-Werte sind die Figma-Werte minus 212: der Kopf steht wie am
     Desktop auf 160, und die Luecke Einleitung -> Flussbeginn (42 px)
     bleibt wie im Entwurf. Box-Oberkante = Button-Oberkante + 71 (wie Desktop). */
  .gap-tipps{ --gap-buehne-h: 1990px; }
  .gap-tipps-stage{ width: 768px; margin-left: -384px; }
  .gap-tipps-head{ top: 160px; width: 688px; margin-left: -344px; }
  .gap-flow-node,
  .gap-flow-box{ translate: none; }
  .gap-flow .gap-flow-guide,
  .gap-flow .gap-flow-line{ stroke-width: 43px; }
  /* Hahn zu (auf Wunsch von TK mit Abends giessen getauscht) */
  .gap-flow-tip:nth-of-type(1) .gap-flow-node{ left: 40px; top: 857px; }
  .gap-flow-tip:nth-of-type(1) .gap-flow-box{ top: 928px; }
  /* Waschstrasse */
  .gap-flow-tip:nth-of-type(2) .gap-flow-node{ left: 466px; top: 725px; }
  .gap-flow-tip:nth-of-type(2) .gap-flow-box{ top: 796px; }
  /* Abends giessen (auf Wunsch von TK mit Hahn zu getauscht) */
  .gap-flow-tip:nth-of-type(3) .gap-flow-node{ left: 66px; top: 1235px; }
  .gap-flow-tip:nth-of-type(3) .gap-flow-box{ top: 1306px; }
  /* Pool-Zeitslot */
  .gap-flow-tip:nth-of-type(4) .gap-flow-node{ left: 514px; top: 1062px; }
  .gap-flow-tip:nth-of-type(4) .gap-flow-box{ top: 1133px; }
  /* Tropfen stoppen */
  .gap-flow-tip:nth-of-type(5) .gap-flow-node{ left: 480px; top: 1501px; }
  .gap-flow-tip:nth-of-type(5) .gap-flow-box{ top: 1572px; }
  /* Regenwasser */
  .gap-flow-tip:nth-of-type(6) .gap-flow-node{ left: 70px; top: 1658px; }
  .gap-flow-tip:nth-of-type(6) .gap-flow-box{ top: 1729px; }
  /* Weiche Oberkante: der Fluss beginnt im Entwurf mit einem harten
     Schnitt. Er blendet jetzt ueber die ersten 120 px ein. */
  .gap-flow{
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 120px);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 120px);
  }
  .gap-flow-tip{ z-index: 1; }
  .gap-flow-tip.is-an{ z-index: 6; }

  /* 49.5 Sanierung untere Traun: halbe/halbe, flacher, Video gefuellt.
     Die Kartenhoehe kommt aus dem Infofeld - erst die kleineren Kennzahlen
     (34 statt 60px) bringen die drei Werte in EINE Zeile und die Karte von
     526 auf 349px. Damit liegt das Videofeld bei 377x349 und schneidet den
     Platzhalter 1098x840 nur noch leicht an statt ihn auf ein Drittel
     seiner Breite hochzuziehen.                                          */
  .gap-traun-karte{
    aspect-ratio: auto; height: auto; min-height: 399px; /* TK: +50 px (vorher 349 bei 768) */
    overflow: hidden; border-radius: 36px;
    background: var(--e-global-color-primary, #004799);
  }
  .gap-traun-video{
    position: absolute; inset: 0; aspect-ratio: auto;
    width: 100% !important; height: 100% !important;
    border-radius: 0; object-fit: cover; object-position: 50% 45%;
    display: block;
  }
  .gap-traun-schleier{ display: none; } /* Der Schleier war nur 243 px hoch und legte eine harte Kante quer durchs Bild - sah aus wie ein wiederholtes Foto */
  .gap-traun-panel{
    position: relative; inset: auto; width: 50%; min-height: 399px; box-sizing: border-box; /* Panel fuellt die Karte */
       display: flex; flex-direction: column;
    border-radius: 0; margin-top: 0; padding: 28px 22px 30px;
  }
  .gap-traun-kopf .elementor-heading-title{ font-size: 30px; line-height: 29px; }
  .gap-traun-text{ font-size: 14.5px; line-height: 20px; }
  .gap-traun-panel .gap-kpis{ margin-top: auto; padding-top: 26px; gap: 10px 18px; flex-wrap: wrap; } /* Zahlen + Button unten, Abstand zum Rand = Panel-Padding */
  .gap-traun-panel .gap-kpi-wert{ font-size: 34px; line-height: 40px; }
  .gap-traun-panel .gap-kpi-lab{ font-size: 11.5px; line-height: 14px; }
  .gap-traun-panel .gap-btn{ margin-top: 26px; align-self: flex-start; }

  /* 49.6 Gut gelaufen: ein Projekt pro Ansicht. Prozent loest gegen die
     Content-Box des Scrollers auf und ist anders als 100vw
     scrollbar-sicher.                                                    */
  .gap-projekt{ flex: 0 0 100%; }
  .gap-gut-stoerer{ display: none; }

  /* 49.7 Die Flussgrafik unter der Geschichte bleibt am Tablet weg. Der
     Abschnitt hatte 250px Luft nach oben, nur damit sie Platz hat - ohne
     Fluss waren das 350px Weiss. Die 250er-Regel hat ein !important. */
  .gap-schule-fluss-wrap{ display: none; }
  .gap-schule{ padding-top: 110px !important; }
  .gap-schule-stoerer{ top: -330px; }

  /* 49.8 Schulmaterialien: beide Spiele nebeneinander und gleich hoch.
     align-items:stretch zieht beide auf dieselbe Hoehe, margin-top:auto
     schiebt den Button nach unten. margin-bottom am Text setzt den
     Mindestabstand - ohne ihn klebte der Button der laengeren Karte
     direkt am Text.                                                      */
  .gap-schule-buehne{ flex-direction: row; align-items: stretch; gap: 30px; }
  .gap-schule-spiel{
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column;
  }
  .gap-schule-karte{ flex: 1 1 auto; }
  .gap-schule-karte-text{ margin-bottom: 34px; }
  .gap-schule-karte .gap-schule-play{ margin-top: auto; }

  /* 49.9 Die beiden Kartenreihen gleich behandeln.
     "Was wir tun" lag randlos an der Fensterkante, "Hochwasserschutz" hatte
     am Wrapper zusaetzlich 40px Innenabstand - daher der weisse Streifen
     rechts. Die Abstaende zwischen den Karten waren 40 gegen 22. Beide
     bekommen jetzt den Desktop-Wert 24 und liegen randlos.                */
  /* Der Innenabstand des Hochwasser-Wrappers bleibt: er macht dessen
     Inhaltsbox 688px breit, und erst dadurch landet die Reihe mit ihren
     -40px Rand buendig bei 0..768. Ohne ihn ist die Inhaltsbox 768 breit,
     die Reihe rutscht auf -40..728 - und rechts bleiben 40px weiss stehen.
     Genau das war der weisse Rand. */
  .gap-karten,
  .gap-hws .gap-karten{ gap: 24px; }

  /* 49.10 Der Tropfen im Hero sitzt ein paar Pixel zu tief.
     Achtung: das Element ist UNTEN verankert (top:auto, bottom:-70px).
     Ein negatives margin-top schiebt es dadurch nach UNTEN statt nach
     oben - genau das ist beim ersten Versuch passiert. Der richtige
     Hebel waere margin-bottom - aber Elementors
     ".e-con .elementor-widget.elementor-widget" setzt den Aussenabstand mit
     hoeherer Spezifitaet auf 0 und gewinnt. Also direkt ueber bottom:
     -70px (Grundwert ab 1024) auf -60px, das sind 10px nach oben. */
  .gap-hero-stoerer{ bottom: -60px; }

  /* 49.11 Mehr Luft zwischen den Zeilen des Abfluss-Quiz. */
  .gap-quiz-grid{ row-gap: 52px; }

  /* 49.12 Kontakt und Service: der Tropfen stand ueber dem Text. */
  .gap-kon-stoerer{ display: none !important; }
}


/* 50 Hochwasserschutz: Kartenreihe war 80px schmaler als die Sektion.
   Ursache: .gap-hws .gap-karten{width:min(1146px,100%)} (Spezifitaet 0,2,0)
   schlaegt im Karussell-Bereich die Regel .gap-karten{width:auto} (0,1,0).
   Bei Wasserschatz gibt es diese Zusatzregel nicht - deshalb passte es dort. */
@media (max-width: 1024px){
  .gap-hws .gap-karten{ width: auto; }
}

/* 51 Traun Desktop: Karte ist jetzt 495 statt 420 hoch. Zahlen und Button
   wandern nach unten, der Abstand Button -> Unterkante bleibt 31 px wie vorher. */
@media (min-width: 1025px){
  .gap-traun-panel{ display: flex; flex-direction: column; padding-bottom: 31px; box-sizing: border-box; }
  .gap-traun-panel .gap-kpis{ margin-top: auto; padding-top: 48px; }
  .gap-traun-panel .gap-btn{ align-self: flex-start; }
}

/* 52 Tablet Hochformat: Einleitungstexte von 02, 03, 05 und 12 schmaler (TK),
   damit in der letzten Zeile nicht nur ein Wort steht. 560 px fuer alle vier -
   bei 768 gemessen: 02 9/5/8/7, 03 7/7/5, 05 9/8/6, 12 7/4 Woerter je Zeile.
   Dazu der Zeilenumbruch nach "1.340 m" in der Traun-Karte (br.gap-br-tab). */
.gap-br-tab{ display: none; }
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
  /* So wenig wie moeglich schmaler (TK): jeweils die groesste Breite, bei der
     die letzte Zeile mehr als ein Wort hat. Normal sind 688 (FAQ 661). */
  .gap-tipps-lead .elementor-heading-title,
  .gap-wastun-lead .elementor-heading-title,
  .gap-hws-lead .elementor-heading-title,
  .gap-faq-lead .elementor-heading-title{ margin-left: auto; margin-right: auto; }
  .gap-tipps-lead .elementor-heading-title{ max-width: 670px; }
  .gap-wastun-lead .elementor-heading-title{ max-width: 640px; }
  .gap-hws-lead .elementor-heading-title{ max-width: 670px; }
  .gap-faq-lead .elementor-heading-title{ max-width: 600px; }
  .gap-br-tab{ display: inline; }
}

/* 53 Unterseite Projekt LIFE IRIS (/projekt-life-iris, Seite 184)
   Figma: Seite "Life IRIS ready for GAP DEV" (859:1998), Frame "1440w light"
   (884:11627). Werte 1:1 aus dem Entwurf, Schriftstile wie auf der Startseite.
   ------------------------------------------------------------------------- */

/* 53.1 Navigation: auf der Unterseite eigene Punkte + "Zurueck zur Kampagne".
   body.gap-seite-iris setzt functions.php (Filter body_class). */
.gap-nav-iris, .gap-nav-cta-iris{ display: none !important; }
body.gap-seite-iris .gap-nav-iris,
body.gap-seite-iris .gap-nav-cta-iris{ display: block !important; }
body.gap-seite-iris .gap-nav:not(.gap-nav-iris),
body.gap-seite-iris .gap-nav-cta:not(.gap-nav-cta-iris){ display: none !important; }

/* 53.2 Section 01 - Sanierung Untere Traun */
.gap-iris-hero{
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #EDF8FE 100%);
  padding: 150px 40px 72px !important;
}
.gap-iris-hero-inner{
  width: min(1096px, 100%) !important; margin-inline: auto;
  justify-content: space-between; align-items: flex-start;
}
.gap-iris-hero-text{ width: 534px !important; max-width: 534px; flex: 0 0 auto; }
.gap-iris-hero-text .gap-sec-badge{ margin-bottom: 12px; justify-content: flex-start; }
.gap-iris-h1 .elementor-heading-title{
  font-family: var(--gap-font-head); font-weight: 900;
  font-size: 82px; line-height: 74px; letter-spacing: -2px;
  text-transform: uppercase; white-space: pre-line;
  color: var(--e-global-color-primary, #004799); margin: 0;
}
.gap-iris-h1 .gap-gruen{ color: var(--e-global-color-accent, #009881); }
.gap-iris-lead{ margin-top: 20px; }
.gap-iris-lead .elementor-heading-title{
  width: min(500px, 100%);
  font-family: var(--gap-font-body); font-weight: 500;
  font-size: 20.5px; line-height: 25px; letter-spacing: -.1px;
  color: var(--e-global-color-primary, #004799); margin: 0;
}
.gap-iris-cta{ margin-top: 30px; }
.gap-iris-media{ width: 534px !important; max-width: 534px; flex: 0 0 auto; margin-top: 11px; }
.gap-iris-bild{
  position: relative; margin: 0; width: 100%; aspect-ratio: 534 / 374;
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 20px 44px rgba(0, 71, 153, .25);
  background: #cfe7f6;
}
.gap-iris-bild img{ position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; display: block; }
.gap-iris-chip{
  position: absolute; left: 29px; top: 19px; z-index: 2;
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px;
  border-radius: 999px; background: #AFDFF9;
  box-shadow: 0 16px 36px rgba(0, 71, 153, .25);
  font-family: var(--gap-font-head); font-weight: 900; font-size: 26px; line-height: 23px;
  letter-spacing: .2px; text-transform: uppercase; color: var(--e-global-color-primary, #004799);
  white-space: nowrap;
}
/* Stoerer: 183 x 226 bei x 1085 / y 630 im 1440er Entwurf, ragt in Section 02 */
.gap-iris-stoerer{
  position: absolute !important; z-index: 5;
  left: calc(50% + 365px); top: 630px; width: 183px !important;
  transition: transform var(--gap-dur, .3s) var(--gap-ease, ease);
}
.gap-iris-stoerer:hover{ transform: translateY(-8px) rotate(-3deg); }
.gap-iris-stoerer svg{ display: block; width: 100%; height: auto; }

/* 53.3 Section 02 - Auf einen Blick */
.gap-iris-zahlen{
  background: var(--e-global-color-primary, #004799);
  padding: 90px 40px 172px !important;
}
.gap-iris-zahlen-head{ align-items: center; text-align: center; }
.gap-iris-zahlen-head .gap-sec-badge{ justify-content: center; margin-bottom: 11px; }
.gap-iris-h2 .elementor-heading-title{
  font-family: var(--gap-font-head); font-weight: 900;
  font-size: 82px; line-height: 74px; letter-spacing: -2px;
  text-transform: uppercase; color: #FFFFFF; margin: 0;
}
.gap-iris-h2 .gap-hell{ color: #AFDFF9; }
.gap-iris-kpis{ margin-top: 75px; }
.gap-iris-kpi-grid{
  width: min(1096px, 100%); margin-inline: auto;
  display: grid; grid-template-columns: 262px 314px 316px 204px;
}
.gap-iris-kpi-lab{
  font-family: var(--gap-font-head); font-weight: 900; font-size: 30px; line-height: 27px;
  letter-spacing: .2px; text-transform: uppercase; color: #FFFFFF;
}
.gap-iris-kpi-wert{
  margin-top: 4px;
  font-family: var(--gap-font-head); font-weight: 900; font-size: 82px; line-height: 82px;
  letter-spacing: .2px; color: #AFDFF9; white-space: nowrap;
}
.gap-iris-kpi-sub{
  margin-top: 2px;
  font-family: var(--gap-font-body); font-weight: 500; font-size: 12.5px; line-height: 15px;
  letter-spacing: .2px; color: #FFFFFF;
}

/* 53.4 Tablet und Mobil - vorlaeufig, wird Section fuer Section mit TK abgestimmt */
@media (max-width: 1024px){
  .gap-iris-hero{ padding: 130px 40px 110px !important; }
  .gap-iris-hero-inner{ flex-direction: column !important; gap: 40px; }
  .gap-iris-hero-text, .gap-iris-media{ width: 100% !important; max-width: 688px; }
  .gap-iris-media{ margin-top: 0; }
  .gap-iris-stoerer{ left: auto; right: 40px; top: auto; bottom: -70px; width: 150px !important; }
  .gap-iris-kpi-grid{ grid-template-columns: 1fr 1fr; row-gap: 40px; column-gap: 24px; }
}
@media (max-width: 767px){
  .gap-iris-hero{ padding: 110px 20px 90px !important; }
  .gap-iris-h1 .elementor-heading-title,
  .gap-iris-h2 .elementor-heading-title{ font-size: 64px; line-height: 58px; }
  .gap-iris-lead .elementor-heading-title{ font-size: 18px; line-height: 23px; }
  .gap-iris-chip{ left: 14px; top: 14px; height: 36px; padding: 0 14px; font-size: 20px; line-height: 18px; }
  .gap-iris-stoerer{ right: 20px; width: 110px !important; bottom: -50px; }
  .gap-iris-zahlen{ padding: 70px 20px 90px !important; }
  .gap-iris-kpi-grid{ grid-template-columns: 1fr; }
  .gap-iris-kpi-wert{ font-size: 64px; line-height: 64px; }
}

/* 53.5 Sections 03 (Warum, #warum) und 04 (Wo, #wo) - Bild/Text nebeneinander.
   03: Bild 512 x 365 links, Text 534 rechts, 50 px Abstand; Badge auf 150.
   04: Text 523 links, Karte 523 x 365 rechts; Badge auf 85. Hintergrund weiss. */
.gap-iris-split{ background: #FFFFFF; padding-left: 40px !important; padding-right: 40px !important; }
.gap-iris-warum{ padding-top: 150px !important; padding-bottom: 43px !important; }
.gap-iris-wo{ padding-top: 85px !important; padding-bottom: 164px !important; }
.gap-iris-split-inner{
  width: min(1096px, 100%) !important; margin-inline: auto;
  justify-content: space-between; align-items: flex-start;
}
.gap-iris-split-text{ width: 534px !important; max-width: 534px; flex: 0 0 auto; }
.gap-iris-split-text--wo{ width: 523px !important; max-width: 523px; }
.gap-iris-split-text .gap-sec-badge{ margin-bottom: 12px; justify-content: flex-start; }
.gap-iris-titel .elementor-heading-title{
  font-family: var(--gap-font-head); font-weight: 900;
  font-size: 82px; line-height: 74px; letter-spacing: -2px;
  text-transform: uppercase; white-space: pre-line;
  color: var(--e-global-color-primary, #004799); margin: 0;
}
.gap-iris-titel .gap-gruen{ color: var(--e-global-color-accent, #009881); }
.gap-iris-media--warum{ width: 512px !important; max-width: 512px; margin-top: 11px; }
.gap-iris-media--wo{ width: 523px !important; max-width: 523px; margin-top: 11px; }
.gap-iris-bild--warum{ aspect-ratio: 512 / 365; }
.gap-iris-bild--wo{ aspect-ratio: 523 / 365; }

@media (max-width: 1024px){
  .gap-iris-warum{ padding-top: 110px !important; padding-bottom: 60px !important; }
  .gap-iris-wo{ padding-top: 60px !important; padding-bottom: 110px !important; }
  .gap-iris-split-inner{ flex-direction: column !important; gap: 40px; }
  .gap-iris-warum .gap-iris-split-inner{ flex-direction: column-reverse !important; }
  .gap-iris-split-text, .gap-iris-split-text--wo,
  .gap-iris-media--warum, .gap-iris-media--wo{ width: 100% !important; max-width: 688px; margin-top: 0; }
}
@media (max-width: 767px){
  .gap-iris-split{ padding-left: 20px !important; padding-right: 20px !important; }
  .gap-iris-titel .elementor-heading-title{ font-size: 64px; line-height: 58px; }
}

/* 53.6 TK: kein Schatten auf den Fotos der Unterseite.
   (Zentrierung Foto/Text in Section 03 probiert und auf Wunsch von TK wieder entfernt.) */
.gap-iris-bild{ box-shadow: none !important; }

/* 53.7 Section 05 Fahrplan (#fahrplan) - hellblau, zentrierter Kopf, Zeitleiste.
   Figma 884:11769: Hoehe 833, Badge auf 99 (Tropfen + Label dunkelblau),
   H2 156, Lead 250 (788 breit), Linie 383, Punkte 378, Datum 412, Bild 457
   (248 x 156, Radius 20), Text 633; Spalten 248 breit, 35 Abstand. */
.gap-iris-fahrplan{
  --gap-sec-color: var(--e-global-color-primary, #004799);
  background: #AFDFF9;
  padding: 99px 40px 162px !important;
}
.gap-iris-fahrplan-head{ align-items: center; text-align: center; }
.gap-iris-fahrplan-head .gap-sec-badge{ justify-content: center; margin-bottom: 11px; }
.gap-iris-titel--mitte .elementor-heading-title{ text-align: center; }
.gap-iris-lead--mitte{ margin-top: 20px; }
.gap-iris-lead--mitte .elementor-heading-title{ width: min(788px, 100%); margin-inline: auto !important; text-align: center; }
.gap-iris-zeit{ margin-top: 78px; }
.gap-iris-zeitleiste{
  position: relative; list-style: none; margin: 0 auto; padding: 0;
  width: min(1096px, 100%);
  display: grid; grid-template-columns: repeat(4, 248px); column-gap: 35px;
}
.gap-iris-zeitleiste::before{
  content: ""; position: absolute; left: 7px; right: 0; top: 5px; height: 3px;
  background: var(--e-global-color-primary, #004799);
}
.gap-iris-schritt{ position: relative; margin: 0; padding: 0; }
.gap-iris-punkt{
  position: relative; z-index: 1; display: block;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--e-global-color-accent, #009881);
}
.gap-iris-datum{
  margin: 22px 0 0; padding: 0;
  font-family: var(--gap-font-head); font-weight: 900; font-size: 32px; line-height: 29px;
  letter-spacing: .2px; text-transform: uppercase; color: var(--e-global-color-accent, #009881);
}
.gap-iris-schritt-bild{
  position: relative; margin: 16px 0 0; width: 100%; aspect-ratio: 248 / 156;
  border-radius: 20px; overflow: hidden;
}
.gap-iris-schritt-bild img{ position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; display: block; }
.gap-iris-schritt-text{
  margin: 20px 0 0;
  font-family: var(--gap-font-body); font-weight: 500; font-size: 16px; line-height: 19.2px;
  letter-spacing: .2px; color: var(--e-global-color-primary, #004799);
}

/* Theme/Kit setzen h3- und figure-Werte mit hoeherer Spezifitaet - hier festnageln. */
.gap-iris-zeitleiste .gap-iris-datum{ margin: 22px 0 0 !important; font-size: 32px !important; line-height: 29px !important; }
.gap-iris-zeitleiste .gap-iris-schritt-bild{ margin: 16px 0 0 !important; }

@media (max-width: 1024px){
  .gap-iris-fahrplan{ padding: 90px 40px 110px !important; }
  .gap-iris-zeitleiste{ grid-template-columns: repeat(2, 1fr); column-gap: 24px; row-gap: 48px; }
  .gap-iris-zeitleiste::before{ display: none; }
}
@media (max-width: 767px){
  .gap-iris-fahrplan{ padding: 70px 20px 90px !important; }
  .gap-iris-zeitleiste{ grid-template-columns: 1fr; }
}

/* 53.8 Video statt Foto in Section 01 der Unterseite (traun-flug-720.mp4, Medien-ID 191,
   Poster ID 192). Gleiche Einpassung wie das Foto. */
.gap-iris-bild video{ position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; border-radius: 0 !important; }

/* 54 Quiz Desktop (TK): mehr Luft zwischen den beiden Kartenzeilen, 33 -> 51 px (+18). */
@media (min-width: 1025px){
  .gap-quiz-grid{ row-gap: 51px; }
}

/* 55 IRIS Bewegung (TK): Zaehler in 02, Hover-Zoom in 03/04, Zeitleiste in 05.
   Die Klassen is-anim / is-pin / is-an setzt das Skript #gap-iris-bewegung
   (functions.php). Ohne Skript oder bei "Bewegung reduzieren" bleibt alles statisch sichtbar. */

/* 55.1 Section 02 - Kennzahlen blenden nacheinander ein, Zahlen zaehlen hoch */
.gap-iris-kpi-grid.is-anim .gap-iris-kpi{
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.gap-iris-kpi-grid.is-anim .gap-iris-kpi.is-an{ opacity: 1; transform: none; }

/* 55.2 Section 03/04 - sanfter Zoom beim Hover */
.gap-iris-bild--warum, .gap-iris-bild--wo{
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari: Radius beim Zoom halten */
}
.gap-iris-bild--warum img, .gap-iris-bild--wo img{
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.gap-iris-bild--warum:hover img, .gap-iris-bild--wo:hover img{ transform: scale(1.05); }

/* 55.3 Section 05 - Zeitleiste baut sich von links auf.
   Desktop: Section wird zur Scroll-Strecke (100vh + 1100px), der Inhalt steht
   per sticky still, der Scroll-Fortschritt zeichnet Linie und Meilensteine. */
.gap-iris-fahrplan-pin{ width: 100%; }
.gap-iris-fahrplan.is-pin{
  padding: 0 !important;
  height: calc(100vh + 1100px);
}
.gap-iris-fahrplan.is-pin .gap-iris-fahrplan-pin{
  position: sticky; top: 0; height: 100vh;
  justify-content: center; padding: 60px 40px 0 !important; box-sizing: border-box;
}
.gap-iris-zeitleiste.is-anim::before{
  transform: scaleX(var(--zeit-p, 0)); transform-origin: left center;
}
.gap-iris-zeitleiste.is-anim .gap-iris-punkt{
  transform: scale(0); transition: transform .45s cubic-bezier(.3,1.6,.5,1);
}
.gap-iris-zeitleiste.is-anim .gap-iris-datum,
.gap-iris-zeitleiste.is-anim .gap-iris-schritt-bild,
.gap-iris-zeitleiste.is-anim .gap-iris-schritt-text{
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.gap-iris-zeitleiste.is-anim .is-an .gap-iris-punkt{ transform: scale(1); }
.gap-iris-zeitleiste.is-anim .is-an .gap-iris-datum{ opacity: 1; transform: none; transition-delay: .06s; }
.gap-iris-zeitleiste.is-anim .is-an .gap-iris-schritt-bild{ opacity: 1; transform: none; transition-delay: .14s; }
.gap-iris-zeitleiste.is-anim .is-an .gap-iris-schritt-text{ opacity: 1; transform: none; transition-delay: .22s; }

@media (prefers-reduced-motion: reduce){
  .gap-iris-bild--warum img, .gap-iris-bild--wo img{ transition: none; }
  .gap-iris-bild--warum:hover img, .gap-iris-bild--wo:hover img{ transform: none; }
}

/* ==========================================================================
   56 IRIS Section 06 Bautagebuch (#bautagebuch)
   Figma 884:13006 (1440 x 2371): Verlauf #FFF -> #EDF8FE, Badge 99, H2 156,
   Lead 250 (788), AKTUELL 447, Pfeil 498, Linie 511-2169 (5px, Naht bei 543),
   Karten 1095 breit ab 555, Spalten 543 | 552, min. 300 hoch, Abstand 56,
   Tropfen 2127, BAUSTART 2186, unten 143.
   Eintraege kommen aus dem CPT gap_bautagebuch via [gap_bautagebuch].
   ========================================================================== */
.gap-iris-bautagebuch {
  background: linear-gradient(180deg, #FFFFFF 0%, #EDF8FE 100%);
  padding: 99px 40px 143px !important;
}
.gap-iris-bt-head { align-items: center; text-align: center; }
.gap-iris-bt-head .gap-sec-badge { justify-content: center; margin-bottom: 11px; }
.gap-iris-bt-wrap { width: 100%; }
.gap-iris-bt-wrap .elementor-shortcode { width: 100%; }

.gap-bt {
  position: relative;
  width: min(1095px, 100%);
  margin: 122px auto 0;
  --bt-naht: calc(543 / 1095 * 100%);
}
.gap-bt-kopf, .gap-bt-fuss {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  /* doppelt so breit wie der Abstand bis zur Naht -> Mitte liegt exakt auf der Linie */
  width: calc(var(--bt-naht) * 2);
}
.gap-bt-marke {
  display: block;
  font-family: var(--gap-font-head); font-weight: 900;
  font-size: 32px; line-height: 42px; letter-spacing: .2px;
  text-transform: uppercase; color: var(--e-global-color-primary, #004799);
}
.gap-bt-pfeil {
  display: block; width: 18px; height: 21px; margin-top: 9px;
  background: var(--e-global-color-primary, #004799);
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.gap-bt-tropfen {
  display: block; width: 33px; height: 41px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.37 -0.234 32.87 41.22'%3E%3Cpath fill='%2327BDEF' transform='rotate(8.0219 16.0613 23.7302)' d='M28.415 15.7361L12.717 0L1.96851 19.4643C-2.01728 26.2769 0.217956 34.5508 7.15174 38.6414C14.0019 42.6973 23.2849 41.3923 28.7476 35.6052C34.2786 29.7237 34.1418 21.1472 28.4264 15.7457L28.415 15.7361Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gap-bt-fuss { margin-top: 36px; }
.gap-bt-fuss .gap-bt-marke { margin-top: 16px; }

/* Linie: liegt ueber den Karten, genau auf der Naht Medium/Text */
.gap-bt-linie {
  position: absolute; z-index: 2;
  top: 64px; bottom: 59px;
  left: calc(var(--bt-naht) - 2.5px); width: 5px;
  background: rgba(0, 71, 153, .18);
  border-radius: 3px; pointer-events: none;
}
.gap-bt-linie-fuell {
  position: absolute; inset: 0;
  background: var(--e-global-color-primary, #004799);
  border-radius: 3px;
}

.gap-bt-liste {
  list-style: none; margin: 36px 0 0 !important; padding: 0 !important;
  display: flex; flex-direction: column; gap: 56px;
}
.gap-bt-eintrag {
  position: relative; margin: 0 !important;
  display: grid; grid-template-columns: 543fr 552fr;
  min-height: 300px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 71, 153, .14);
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 20px 44px rgba(0, 71, 153, .25);
}
.gap-bt-eintrag--bild-rechts { grid-template-columns: 543fr 552fr; }
.gap-bt-eintrag--bild-rechts .gap-bt-inhalt { order: 1; }
.gap-bt-eintrag--bild-rechts .gap-bt-medium { order: 2; }

.gap-bt-medium { position: relative; overflow: hidden; background: #AFDFF9; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.gap-bt-medium img,
.gap-bt-medium video {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  max-width: none !important; object-fit: cover; display: block;
  border-radius: 0 !important;
}
.gap-bt-play {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  width: 70px; height: 70px; margin: -35px 0 0 -35px; padding: 0 !important;
  border: 0 !important; border-radius: 50% !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
  cursor: pointer; transition: transform .35s ease, background .35s ease;
}
.gap-bt-play span {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 25px; margin: -12.5px 0 0 -8px;
  background: var(--e-global-color-primary, #004799);
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.gap-bt-play:hover, .gap-bt-play:focus-visible { transform: scale(1.08); background: #FFFFFF !important; }
.gap-bt-medium.is-spielt .gap-bt-play { opacity: 0; pointer-events: none; }

.gap-bt-inhalt { padding: 41px 52px 41px; display: flex; flex-direction: column; align-items: flex-start; }
.gap-bt-datum {
  display: inline-flex; align-items: center; height: 37px; padding: 0 12px;
  border-radius: 999px; background: #AFDFF9;
  font-family: var(--gap-font-head); font-weight: 900; font-size: 26px; line-height: 23px;
  letter-spacing: .2px; text-transform: uppercase; color: var(--e-global-color-primary, #004799);
  white-space: nowrap;
}
.gap-bt-hl {
  margin: 27px 0 0 !important; padding: 0;
  font-family: var(--gap-font-head); font-weight: 900; font-size: 42px; line-height: 31.5px;
  letter-spacing: .2px; text-transform: uppercase; color: var(--e-global-color-primary, #004799);
}

/* Der Elementor-Kit setzt .elementor-kit-5 h3 auf 0.75em am Desktop,
   0.8em ab 1024px und 0.9em ab 767px. Das ist spezifischer als .gap-bt-hl,
   darum lagen die Zeilen am Desktop auf 31.5px und die Umlautpunkte der
   zweiten Zeile verschwanden hinter der ersten. Diese Regel ist spezifisch
   genug und gibt allen Breiten den Zeilenabstand vom Handy. */
.gap-bt-inhalt .gap-bt-hl { line-height: 0.9em; }
.gap-bt-text {
  margin-top: 22px; max-width: 468px;
  font-family: var(--gap-font-body); font-weight: 500; font-size: 16px; line-height: 19.2px;
  letter-spacing: .2px; color: var(--e-global-color-primary, #004799);
}
.gap-bt-text p { margin: 0 0 .8em; }
.gap-bt-text p:last-child { margin-bottom: 0; }
.gap-bt-text a { color: inherit; text-decoration: underline; }

@media (min-width: 1025px) {
  /* HL darf wie in Figma bis knapp an den Kartenrand laufen (500 breit) */
  .gap-bt-hl { margin-right: -32px !important; }
}

/* 56.1 Bewegung (Skript #gap-bt-skript setzt .is-anim / .is-an / --bt-p) */
.gap-bt.is-anim .gap-bt-linie-fuell {
  transform-origin: 50% 0; transform: scaleY(var(--bt-p, 0));
  transition: transform .25s linear;
}
.gap-bt.is-anim .gap-bt-kopf,
.gap-bt.is-anim .gap-bt-fuss { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.gap-bt.is-anim .gap-bt-kopf.is-an,
.gap-bt.is-anim .gap-bt-fuss.is-an { opacity: 1; transform: none; }
.gap-bt.is-anim .gap-bt-eintrag {
  opacity: 0; transform: translateY(40px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.gap-bt.is-anim .gap-bt-eintrag.is-an { opacity: 1; transform: none; }
.gap-bt.is-anim .gap-bt-medium img,
.gap-bt.is-anim .gap-bt-medium video { transform: scale(1.12); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.gap-bt.is-anim .gap-bt-eintrag.is-an .gap-bt-medium img,
.gap-bt.is-anim .gap-bt-eintrag.is-an .gap-bt-medium video { transform: scale(1); }
.gap-bt.is-anim .gap-bt-datum,
.gap-bt.is-anim .gap-bt-hl,
.gap-bt.is-anim .gap-bt-text { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.gap-bt.is-anim .gap-bt-eintrag.is-an .gap-bt-datum { opacity: 1; transform: none; transition-delay: .15s; }
.gap-bt.is-anim .gap-bt-eintrag.is-an .gap-bt-hl { opacity: 1; transform: none; transition-delay: .25s; }
.gap-bt.is-anim .gap-bt-eintrag.is-an .gap-bt-text { opacity: 1; transform: none; transition-delay: .35s; }
@media (hover: hover) {
  .gap-bt-eintrag .gap-bt-medium img { transition: transform 1s cubic-bezier(.2,.7,.2,1); }
  .gap-bt .gap-bt-eintrag.is-an:hover .gap-bt-medium img,
  .gap-bt:not(.is-anim) .gap-bt-eintrag:hover .gap-bt-medium img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .gap-bt * { transition: none !important; }
}

/* 56.2 Tablet / Mobil: eine Spalte, Linie links, Medium oben */
@media (max-width: 1024px) {
  .gap-iris-bautagebuch { padding: 80px 40px 110px !important; }
  .gap-bt { margin-top: 64px; padding-left: 48px; box-sizing: border-box; }
  .gap-bt-kopf, .gap-bt-fuss { width: auto; align-items: flex-start; margin-left: -48px; padding-left: 0; }
  .gap-bt-kopf .gap-bt-marke, .gap-bt-fuss .gap-bt-marke { font-size: 26px; line-height: 34px; }
  .gap-bt-pfeil { margin-left: 11.5px; }
  .gap-bt-tropfen { margin-left: 4px; }
  .gap-bt-linie { left: 18px; top: 58px; bottom: 53px; }
  .gap-bt-liste { gap: 40px; margin-top: 30px !important; }
  .gap-bt-eintrag,
  .gap-bt-eintrag--bild-rechts { grid-template-columns: 1fr; min-height: 0; }
  .gap-bt-eintrag--bild-rechts .gap-bt-inhalt { order: 2; }
  .gap-bt-eintrag--bild-rechts .gap-bt-medium { order: 1; }
  .gap-bt-medium { aspect-ratio: 16 / 9; min-height: 0; }
  .gap-bt-inhalt { padding: 28px 32px 34px; }
  .gap-bt-hl { font-size: 36px; line-height: 30px; margin-top: 22px !important; }
  .gap-bt-text { max-width: none; }
}
@media (max-width: 767px) {
  .gap-iris-bautagebuch { padding: 64px 20px 80px !important; }
  .gap-bt { padding-left: 34px; }
  .gap-bt-kopf, .gap-bt-fuss { margin-left: -34px; }
  .gap-bt-linie { left: 11px; }
  .gap-bt-pfeil { margin-left: 4.5px; }
  .gap-bt-tropfen { width: 28px; height: 35px; margin-left: -.5px; }
  .gap-bt-liste { gap: 28px; }
  .gap-bt-eintrag { border-radius: 22px; }
  .gap-bt-inhalt { padding: 22px 20px 26px; }
  .gap-bt-datum { font-size: 22px; height: 33px; }
  .gap-bt-hl { font-size: 30px; line-height: 26px; }
}

/* ==========================================================================
   57 IRIS Abschluss (#mehr) - "Mehr zum EU-Projekt LIFE IRIS." + Zurueck
   Figma 884:12222 (1440 x 401): Verlauf #FFF -> #EDF8FE, oben 110, unten 90,
   Box 1096 x 113, Rand 1px #AFDFF9, Radius 16, Innenabstand 22/41/22/30,
   Titel Amplitude 42/31.5, Buttons gruen (Abstand 20), Zurueck-Button 40 darunter.
   ========================================================================== */
.gap-iris-mehr {
  background: linear-gradient(180deg, #FFFFFF 0%, #EDF8FE 100%);
  padding: 110px 40px 90px !important;
}
.gap-iris-mehr-wrap { width: min(1096px, 100%); margin-inline: auto; }
.gap-iris-mehr-box {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  min-height: 113px; box-sizing: border-box;
  padding: 22px 41px 22px 30px;
  background: #FFFFFF; border: 1px solid #AFDFF9; border-radius: 16px;
}
.gap-iris-mehr-titel {
  margin: 0 !important; padding: 0;
  font-family: var(--gap-font-head); font-weight: 900;
  font-size: 42px !important; line-height: 31.5px !important; letter-spacing: .2px !important;
  text-transform: uppercase; color: var(--e-global-color-primary, #004799);
}
.gap-iris-mehr-titel .gap-gruen { color: var(--e-global-color-accent, #009881); }
.gap-iris-mehr-btns { display: flex; flex-wrap: wrap; gap: 20px; flex: 0 0 auto; }
.gap-iris-mehr-zurueck { margin-top: 40px; }

@media (max-width: 1024px) {
  .gap-iris-mehr { padding: 80px 40px 72px !important; }
  .gap-iris-mehr-box { flex-direction: column; align-items: flex-start; gap: 24px; padding: 30px; }
  .gap-iris-mehr-titel { font-size: 38px !important; line-height: 30px !important; }
}
@media (max-width: 767px) {
  .gap-iris-mehr { padding: 64px 20px 56px !important; }
  .gap-iris-mehr-box { padding: 24px 20px; }
  .gap-iris-mehr-titel { font-size: 32px !important; line-height: 26px !important; }
  .gap-iris-mehr-btns { gap: 12px; }
  .gap-iris-mehr-zurueck { margin-top: 28px; }
}

/* 57.1 Hover laut TK: gruene Buttons -> dunkelblau mit weisser Schrift; Zurueck-Pfeil animiert (nach links) */
.gap-iris-mehr .gap-btn-green:hover,
.gap-iris-mehr .gap-btn-green:focus-visible { background: var(--e-global-color-primary, #004799); color: #FFFFFF; }
.gap-iris-mehr .gap-btn-primary:hover,
.gap-iris-mehr .gap-btn-primary:focus-visible { background: var(--e-global-color-accent, #009881); color: #FFFFFF; }
.gap-btn--zurueck::after { content: none; }
.gap-btn--zurueck::before {
  content: "\2190"; display: inline-block;
  transition: transform var(--gap-dur, .25s) var(--gap-ease, ease);
}
.gap-btn--zurueck:hover::before,
.gap-btn--zurueck:focus-visible::before { transform: translateX(-4px); }
body.gap-seite-iris .gap-nav-cta-iris .elementor-button:hover,
body.gap-seite-iris .gap-nav-cta-iris .elementor-button:focus-visible { background: var(--e-global-color-primary, #004799); color: #FFFFFF; }
.gap-nav-cta-iris .elementor-button-text::before {
  content: "\2190"; display: inline-block; margin-right: 6px;
  transition: transform var(--gap-dur, .25s) var(--gap-ease, ease);
}
.gap-nav-cta-iris .elementor-button:hover .elementor-button-text::before,
.gap-nav-cta-iris .elementor-button:focus-visible .elementor-button-text::before { transform: translateX(-4px); }

/* ==========================================================================
   58 Ausgeblendet (TK): Schul-Inhalte vorerst verstecken, NICHT geloescht.
   Wieder einblenden = Klasse gap-ausgeblendet entfernen (Section gapsch01,
   FAQ-Eintrag "Spiele und Materialien", Kontakt-Zeile "Schule & Spiele")
   und die Tropfen-Nummern zurueckstellen (Echtdaten 10->11, FAQ 11->12, Kontakt 12->13).
   ========================================================================== */
.gap-ausgeblendet { display: none !important; }

/* 58.1 Anker Traun-Teaser (Zurueck zur Kampagne -> /#traun) */
#traun { scroll-margin-top: 140px; }

/* ==========================================================================
   59 IRIS Section 01 - Version 2.0 mit Vorher/Nachher-Slider (#ueberblick)
   Figma 887:13252 (1440 x 1456): Kopf wie V1, Textspalte 661, Stoerer bei
   x 974 / y 245, Slider 1096 x 590 ab y 670, Radius 36, unten 196.
   V1 (irs0100) ist mit gap-ausgeblendet versteckt, V2 = irs1500.
   ========================================================================== */
.gap-iris-hero.gap-iris-hero--v2 { padding: 150px 40px 196px !important; }
.gap-iris-hero--v2 .gap-iris-hero-text { width: 661px !important; max-width: 661px; }
.gap-iris-hero--v2 .gap-iris-lead .elementor-heading-title { width: min(661px, 100%) !important; }
@media (min-width: 1025px) {
  .gap-iris-hero--v2 .gap-iris-stoerer { left: calc(50% + 254px) !important; top: 245px !important; }
}
.gap-iris-hero--v2 .gap-iris-cta { margin-top: 22px !important; }
.gap-iris-vn-wrap { width: min(1096px, 100%) !important; margin: 100px auto 0 !important; }

.gap-vn {
  position: relative; aspect-ratio: 1096 / 590;
  border-radius: 36px; overflow: hidden; background: #AFDFF9;
  box-shadow: 0 30px 60px -24px rgba(0, 71, 153, .4);
  touch-action: pan-y; cursor: ew-resize;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.gap-vn-bild {
  position: absolute; inset: 0; display: block;
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover; border-radius: 0 !important;
  pointer-events: none; -webkit-user-drag: none;
}
.gap-vn-vorher {
  position: absolute; inset: 0;
  -webkit-clip-path: inset(0 calc(100% - var(--vn-pos, 50%)) 0 0);
          clip-path: inset(0 calc(100% - var(--vn-pos, 50%)) 0 0);
}
.gap-vn-marke {
  position: absolute; top: 22px; z-index: 2;
  display: inline-flex; align-items: center; height: 32px; padding: 0 15px;
  border-radius: 999px; color: #FFFFFF;
  font-family: var(--gap-font-head); font-weight: 900; font-size: 26px; line-height: .9;
  letter-spacing: .2px; text-transform: uppercase; white-space: nowrap;
  transition: opacity .3s ease; pointer-events: none;
}
.gap-vn-marke--vorher  { left: 18px;  background: var(--e-global-color-primary, #004799); }
.gap-vn-marke--nachher { right: 18px; background: var(--e-global-color-accent, #009881); }
.gap-vn.ohne-vorher  .gap-vn-marke--vorher,
.gap-vn.ohne-nachher .gap-vn-marke--nachher { opacity: 0; }
.gap-vn-griff {
  position: absolute; top: 0; bottom: 0; left: var(--vn-pos, 50%); z-index: 3;
  width: 3px; margin-left: -1.5px; background: #FFFFFF;
  box-shadow: 0 0 14px rgba(0, 0, 0, .28); pointer-events: none;
}
.gap-vn-knopf {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  display: grid; place-items: center; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  transition: transform .25s ease;
}
.gap-vn-knopf svg { display: block; width: 26px; height: 26px; }
.gap-vn:hover .gap-vn-knopf, .gap-vn.ist-aktiv .gap-vn-knopf { transform: scale(1.08); }
.gap-vn:focus-within .gap-vn-knopf { outline: 3px solid #27BDEF; outline-offset: 3px; }
.gap-vn-hinweis {
  position: absolute; left: 50%; bottom: 23px; z-index: 4; transform: translateX(-50%);
  display: inline-flex; align-items: center; height: 30px; padding: 0 10px;
  border-radius: 999px; background: #AFDFF9; color: var(--e-global-color-primary, #004799);
  font-family: var(--gap-font-body); font-weight: 500; font-size: 16px; line-height: 1.2;
  letter-spacing: .2px; white-space: nowrap; pointer-events: none;
  transition: opacity .4s ease;
}
.gap-vn.ist-benutzt .gap-vn-hinweis { opacity: 0; }
.gap-vn-regler {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%);
}

@media (max-width: 1024px) {
  .gap-iris-hero.gap-iris-hero--v2 { padding: 130px 40px 110px !important; }
  .gap-iris-hero--v2 .gap-iris-hero-text { width: 100% !important; max-width: 661px; }
  .gap-iris-vn-wrap { margin-top: 56px !important; }
  .gap-vn { border-radius: 28px; }
}
@media (max-width: 767px) {
  .gap-iris-hero.gap-iris-hero--v2 { padding: 110px 20px 80px !important; }
  .gap-iris-vn-wrap { margin-top: 40px !important; }
  .gap-vn { aspect-ratio: 4 / 3; border-radius: 22px; }
  .gap-vn-marke { top: 14px; height: 28px; padding: 0 12px; font-size: 22px; }
  .gap-vn-marke--vorher { left: 14px; } .gap-vn-marke--nachher { right: 14px; }
  .gap-vn-knopf { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .gap-vn-hinweis { bottom: 14px; font-size: 14px; height: 28px; padding: 0 12px; }
}

/* ==========================================================================
   60 IRIS Tablet + Mobil (TK-Runde)
   ========================================================================== */
/* Zeilenumbrueche nur am Handy (<br class="gap-br-mobil">) */
.gap-br-mobil { display: none; }
@media (max-width: 767px) {
  .gap-br-mobil { display: inline; }
  /* Navigation: "Zurueck zur Kampagne" am Handy ausblenden */
  body.gap-seite-iris .gap-nav-cta-iris { display: none !important; }
}

@media (max-width: 1024px) {
  /* V2-Hero: Stoerer klebt an der rechten unteren Ecke des Sliders */
  .gap-iris-hero--v2 .gap-iris-stoerer {
    left: auto !important; top: auto !important;
    right: 20px !important; bottom: 58px !important;
    width: 140px !important; z-index: 5;
  }
  /* Split-Sections 03/04: Text am Tablet breiter */
  .gap-iris-split .gap-iris-lead .elementor-heading-title { width: min(600px, 100%) !important; }

  /* 05 Fahrplan: senkrechte Zeitleiste, Linie links von oben nach unten */
  .gap-iris-fahrplan .gap-iris-zeitleiste {
    display: flex !important; flex-direction: column; gap: 44px;
    width: 100% !important; max-width: 560px; margin: 0 auto !important;
    padding: 0 0 0 34px !important;
  }
  .gap-iris-fahrplan .gap-iris-zeitleiste::before {
    left: 5px !important; right: auto !important; top: 8px !important; bottom: 8px !important;
    display: block !important; width: 3px !important; height: auto !important; border-radius: 2px;
    transform: scaleY(var(--zeit-m, 1)) !important; transform-origin: 50% 0;
    transition: transform .15s linear;
  }
  .gap-iris-fahrplan .gap-iris-schritt { position: relative; }
  .gap-iris-fahrplan .gap-iris-punkt { position: absolute !important; left: -33.5px; top: 8.5px; margin: 0 !important; }
  .gap-iris-fahrplan .gap-iris-datum { margin-top: 0 !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .gap-iris-fahrplan .gap-iris-zeitleiste { max-width: 688px; }
  .gap-iris-fahrplan .gap-iris-schritt {
    display: grid; grid-template-columns: 300px 1fr; column-gap: 28px; align-items: start;
  }
  .gap-iris-fahrplan .gap-iris-datum { grid-column: 1 / -1; }
  .gap-iris-fahrplan .gap-iris-schritt-text { margin-top: 16px !important; align-self: center; }
}
@media (max-width: 767px) {
  /* Stoerer am Handy weglassen (TK) */
  .gap-iris-hero--v2 .gap-iris-stoerer { display: none !important; }
  .gap-iris-fahrplan .gap-iris-zeitleiste { gap: 36px; padding-left: 30px !important; }
  .gap-iris-fahrplan .gap-iris-punkt { left: -29.5px; }
}

/* ==========================================================================
   61 Mobiles Menue als Vollbild (TK): dunkelblau, weisse Schrift.
   Gilt fuer beide Navis (.gap-nav = Startseite + IRIS), solange der
   Hamburger sichtbar ist (<= 1024). Skript #gap-menue-vollbild sperrt das
   Scrollen und schliesst das Menue beim Klick auf einen Punkt.
   ========================================================================== */
@media (max-width: 1024px) {
  .gap-nav .elementor-menu-toggle {
    position: relative; z-index: 3;
    transition: background-color .3s ease, color .3s ease;
  }
  .gap-nav .elementor-menu-toggle.elementor-active {
    background-color: var(--e-global-color-accent, #009881) !important; color: #FFFFFF !important;
  }
  .gap-nav .elementor-menu-toggle.elementor-active svg,
  .gap-nav .elementor-menu-toggle.elementor-active i { fill: #FFFFFF !important; color: #FFFFFF !important; }

  .gap-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: fixed !important; inset: 0 !important; z-index: 2 !important;
    width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-height: none !important;
    margin: 0 !important; padding: 110px 24px 56px !important; box-sizing: border-box;
    display: flex !important; flex-direction: column; justify-content: center; align-items: center;
    background: var(--e-global-color-primary, #004799) !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    overflow-y: auto !important; transform: none !important;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .35s ease, visibility 0s linear .35s !important;
  }
  .gap-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .35s ease, visibility 0s linear 0s !important;
  }
  .gap-nav .elementor-nav-menu--dropdown .elementor-nav-menu {
    display: flex !important; flex-direction: column; align-items: center; gap: 6px;
    width: 100%; margin: 0 !important; padding: 0 !important;
  }
  .gap-nav .elementor-nav-menu--dropdown li { width: auto; border: 0 !important; background: transparent !important; }
  .gap-nav .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.elementor-item {
    justify-content: center !important; text-align: center;
    padding: 8px 12px !important; margin: 0 !important;
    background: transparent !important; border: 0 !important;
    color: #FFFFFF !important;
    font-family: var(--gap-font-head) !important; font-weight: 900 !important;
    font-size: 44px !important; line-height: 1 !important; letter-spacing: .2px !important;
    text-transform: uppercase;
  }
  .gap-nav .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.elementor-item:hover,
  .gap-nav .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.elementor-item:focus-visible,
  .gap-nav .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.elementor-item.elementor-item-active { color: #AFDFF9 !important; }

  /* Punkte blenden gestaffelt ein */
  .gap-nav .elementor-nav-menu--dropdown li {
    opacity: 0; transform: translateY(14px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .gap-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container li { opacity: 1; transform: none; }
  .gap-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container li:nth-child(1) { transition-delay: .08s; }
  .gap-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container li:nth-child(2) { transition-delay: .13s; }
  .gap-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container li:nth-child(3) { transition-delay: .18s; }
  .gap-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container li:nth-child(4) { transition-delay: .23s; }
  .gap-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container li:nth-child(5) { transition-delay: .28s; }
  .gap-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container li:nth-child(6) { transition-delay: .33s; }
  .gap-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container li:nth-child(n+7) { transition-delay: .38s; }

  html.gap-menue-offen, html.gap-menue-offen body { overflow: hidden !important; }
}
@media (max-width: 767px) {
  .gap-nav .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.elementor-item { font-size: 38px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .gap-nav .elementor-nav-menu--dropdown li { transition: none !important; }
}

/* 62 IRIS Handy: Kopf von 02, 05, 06 linksbuendig (TK) */
@media (max-width: 767px) {
  .gap-iris-zahlen-head, .gap-iris-fahrplan-head, .gap-iris-bt-head { align-items: flex-start !important; text-align: left !important; }
  .gap-iris-zahlen-head .gap-sec-badge, .gap-iris-fahrplan-head .gap-sec-badge, .gap-iris-bt-head .gap-sec-badge { justify-content: flex-start !important; margin-inline: 0 !important; }
  .gap-iris-zahlen-head .elementor-heading-title, .gap-iris-fahrplan-head .elementor-heading-title, .gap-iris-bt-head .elementor-heading-title { text-align: left !important; }
  /* Kapitelnummer bleibt im Tropfen zentriert */
  .gap-iris-zahlen-head .gap-sec-num .elementor-heading-title, .gap-iris-fahrplan-head .gap-sec-num .elementor-heading-title, .gap-iris-bt-head .gap-sec-num .elementor-heading-title { text-align: center !important; }
  .gap-iris-fahrplan-head .gap-iris-lead--mitte .elementor-heading-title,
  .gap-iris-bt-head .gap-iris-lead--mitte .elementor-heading-title { margin-inline: 0 !important; }
}

/* 63 IRIS: "Zurueck zur Kampagne" in der Navi auch am Tablet ausblenden (TK) */
@media (max-width: 1024px) {
  body.gap-seite-iris .gap-nav-cta-iris { display: none !important; }
}

/* 64 IRIS-Fixes Zwischenbreiten (TK)
   a) 03/04 zwischen 1025 und ~1200: Foto schrumpft mit, Text bleibt 534 breit, immer 50 px Luft.
   b) Fahrplan unter 1025: Pin-Container darf nicht kuerzer als die Zeitleiste werden
      (letzter Meilenstein war zwischen 600 und 767 px abgeschnitten). */
@media (min-width: 1025px) {
  .gap-iris-split-inner { column-gap: 50px !important; }
  .gap-iris-split-inner > .gap-iris-media { flex: 0 1 512px !important; width: auto !important; min-width: 0 !important; max-width: 512px !important; }
  .gap-iris-split-inner > .gap-iris-media--wo { flex-basis: 523px !important; max-width: 523px !important; }
  .gap-iris-split-inner > .gap-iris-media .gap-iris-bild { width: 100% !important; max-width: 100% !important; }
  .gap-iris-split-inner > .gap-iris-split-text { flex: 0 0 auto !important; }
}
@media (max-width: 1024px) {
  .gap-iris-fahrplan, .gap-iris-fahrplan .gap-iris-fahrplan-pin { height: auto !important; min-height: 0 !important; max-height: none !important; }
  .gap-iris-fahrplan .gap-iris-zeit { flex-shrink: 0 !important; }
  /* Ursache: Elementor-Container mit flex-wrap: wrap in Spaltenrichtung misst die Zeitleiste zu kurz */
  .gap-iris-fahrplan, .gap-iris-fahrplan .gap-iris-fahrplan-pin { flex-wrap: nowrap !important; }
}

/* 65 IRIS 03/04 Desktop: Foto vertikal mittig zum Textblock (TK, 2. Versuch) */
@media (min-width: 1025px) {
  .gap-iris-split-inner { align-items: center !important; }
}

/* 66 IRIS 03: Silbentrennung im Fliesstext (TK) */
#warum .gap-iris-lead .elementor-heading-title {
  -webkit-hyphens: auto; hyphens: auto;
  -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-chars: 8 3 3;
}

/* ==========================================================================
   67 Tablet-Feinschliff (768-1024): KPI-Block zentriert, Meilenstein-Text
   schmaeler (keine Einzelwoerter), Zahlen & Fakten kleiner (Luft zur Copy)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .gap-iris-kpi-grid .gap-iris-kpi { text-align: center; }
  .gap-iris-fahrplan-head .gap-iris-lead .elementor-heading-title { max-width: 620px; margin-inline: auto !important; }
  .gap-zahl-wert { font-size: 100px !important; line-height: 100px !important; }
  .gap-zahl-info { padding-top: 8px; }
  .gap-quiz-grid > .gap-quiz-panel { grid-column: 1 / -1; margin-top: 0; }
}

/* ==========================================================================
   68 Zwischenbreite kurz ueber Tablet (1025-1179): Zahlen-Lead weicht dem
   Fluss aus, FAQ-Button (gap-nav-cta) weg, bevor er das Wappen ueberdeckt
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1299px) {
  .gap-zahlen-lead .elementor-heading-title { max-width: calc(100vw - 500px); }
}
@media (min-width: 1025px) and (max-width: 1179px) {
  /* feste Spalten wuerden sonst ueber den Bildschirm hinausragen */
  .gap-iris-kpi-grid { grid-template-columns: 262fr 314fr 316fr 204fr; }
}
@media (min-width: 1025px) and (max-width: 1099px) {
  .gap-nav-cta { display: none !important; }
}

/* ==========================================================================
   69 Kennzahlen-Sublines mit Rinne zur Nachbarspalte (Desktop) und
   deckend weisse Navigationsleiste (Barrierefreiheit: Kontrast)
   ========================================================================== */
@media (min-width: 1025px) {
  .gap-iris-kpi-sub { padding-right: 16px; }
}
.gap-header { background-color: #FFFFFF !important; }

/* ==========================================================================
   70 Bildnachweis in Bildern (figcaption liegt im Bildrahmen, unten rechts)
   ========================================================================== */
.gap-iris-bild figcaption {
  position: absolute; right: 12px; bottom: 9px; z-index: 2;
  margin: 0; padding: 0; pointer-events: none;
  font-family: var(--gap-font-body); font-weight: 500;
  font-size: 11px; line-height: 14px; letter-spacing: .2px;
  color: #FFFFFF; text-shadow: 0 1px 3px rgba(0, 28, 56, .8);
}
@media (max-width: 767px) {
  .gap-iris-bild figcaption { font-size: 10px; right: 9px; bottom: 7px; }
}

/* ==========================================================================
   71 LIFE-IRIS-Logo in der Abschlussbox (#mehr): Logo oben, darunter eine
   Zeile aus Headline und Buttons - so sitzen die Buttons mittig zum Text
   ========================================================================== */
.gap-iris-mehr-box { flex-direction: column; align-items: flex-start; gap: 16px; }
.gap-iris-mehr-zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; width: 100%;
}
.gap-iris-mehr-logo {
  display: block; flex: 0 0 auto;
  width: auto !important; height: 62px !important; max-width: none !important;
  margin: 0 !important; padding: 0;
}
@media (max-width: 1024px) {
  .gap-iris-mehr-box { gap: 20px; }
  .gap-iris-mehr-zeile { flex-direction: column; align-items: flex-start; gap: 24px; }
  .gap-iris-mehr-logo { height: 56px !important; }
}
@media (max-width: 767px) {
  .gap-iris-mehr-zeile { gap: 20px; }
  .gap-iris-mehr-logo { height: 50px !important; }
}

/* ==========================================================================
   72 Zwischenbreiten 1025-1179: feste Spalten und der Deko-Fluss ragten
   ueber den rechten Bildschirmrand hinaus (horizontaler Scrollbalken)
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1179px) {
  .gap-iris-zeitleiste { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 26px; }
}
.gap-zahlen-sec { overflow-x: clip; }

/* ==========================================================================
   73 Traun-Teaser: das Panel deckt die linke Haelfte ab, deshalb saesse die
   Bildmitte des Videos hinter dem Text. Auf Desktop 25 % nach rechts
   schieben, damit die Bildmitte im sichtbaren Ausschnitt liegt.
   ========================================================================== */
@media (min-width: 901px) {
  .gap-traun-karte .gap-traun-video { transform: translateX(25%); }
}

/* ==========================================================================
   74 Hero V1: mehr Luft zur blauen Section 02, Tropfen-Stoerer 25 px hoeher
   ========================================================================== */
@media (min-width: 1025px) {
  .gap-iris-hero { padding-bottom: 130px !important; }
  .gap-iris-hero .gap-iris-stoerer { top: 663px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .gap-iris-hero .gap-iris-stoerer { bottom: -45px; }
}
@media (max-width: 767px) {
  .gap-iris-hero .gap-iris-stoerer { bottom: -25px; }
}

/* ==========================================================================
   75 Traun-Teaser: mehr Luft unter dem Button, Kennzahlen wandern mit
   ========================================================================== */
@media (min-width: 901px) {
  .gap-traun-karte .gap-traun-panel { padding-bottom: 58px; }
}


/* ===== 76 | Kundenkorrekturen (Rueckmeldung Landingpage) ===== */
/* Wasser-Check: Tagesverbrauch zusaetzlich zum Jahreswert */
.gap-calc-tag{ margin:6px 0 0; font-size:16px; line-height:22px; color:var(--e-global-color-primary,#004799); }
.gap-calc-tag b{ font-weight:800; }
@media (max-width:767px){ .gap-calc-tag{ font-size:14px; line-height:20px; } }

/* HORA-Box: zweiter Absatz (Gefahrenzonenplaene) */
.gap-hora-p + .gap-hora-p2{ margin-top:18px; }

/* Traun-Teaser: LIFE-IRIS-Logo neben dem Button */
.gap-traun-aktion{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.gap-traun-logo{ display:block; flex:0 0 auto; width:auto !important; height:48px !important; max-width:none !important; margin:0 !important; }
@media (max-width:900px){ .gap-traun-logo{ height:42px !important; } }

/* Der Button hatte den Abstand nach oben - der wandert auf die Zeile */
.gap-traun-panel .gap-traun-aktion{ margin-top:42px; align-self:flex-start; }
.gap-traun-panel .gap-traun-aktion .gap-btn{ margin-top:0 !important; align-self:center !important; }
@media (min-width:768px) and (max-width:1024px){ .gap-traun-panel .gap-traun-aktion{ margin-top:26px; } }
@media (max-width:767px){ .gap-traun-panel .gap-traun-aktion{ margin-top:33px; gap:14px; } }

/* Logo auf dunklem Grund: einfarbig weiss */
.gap-traun-panel .gap-traun-logo{ height:62px !important; filter:brightness(0) invert(1); opacity:.95; }
@media (max-width:900px){ .gap-traun-panel .gap-traun-logo{ height:54px !important; } }

/* Tagesverbrauch rechts neben der grossen Zahl */
.gap-calc-zeile{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.gap-calc-zeile .gap-calc-big{ margin:0; }
.gap-calc-zeile .gap-calc-tag{ margin:0 0 10px; flex:1 1 255px; }
@media (max-width:767px){ .gap-calc-zeile{ display:block; } .gap-calc-zeile .gap-calc-tag{ margin:6px 0 0; } }

/* Stoerer bei "Gut gelaufen" ragte zwischen 1025 und 1179px raus -> kein Querscrollen */
.gap-hws{ overflow-x:clip; }

/* Mythen-Karten: zwischen 1025 und 1179px sind die Karten schmal, der
   Wahrheitstext lief sonst unten aus der Karte */
@media (min-width:1025px) and (max-width:1179px){ .gap-myth{ height:350px; } }
@media (min-width:1025px) and (max-width:1099px){ .gap-myth{ height:368px; } }

/* ===== 77 | Geschichten: Platzhalterfoto statt Story-Slider =========== */
/* Der Story-Slider (gap-gesch-wrap) ist nur ausgeblendet und kann jederzeit
   wieder eingeschaltet werden - eigene Klassennamen, damit sich nichts beisst. */
.gap-gesch-ph-wrap{ width:min(1096px,100%); margin:46px auto 0; }
.gap-gesch-ph{ position:relative; display:block; margin:0; border-radius:24px; overflow:hidden; box-shadow:0 22px 54px -36px rgba(0,42,92,.45); }
.gap-gesch-ph img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.gap-gesch-ph-tag{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--gap-font-head); font-weight:900; text-transform:uppercase;
  font-size:clamp(28px,5vw,72px); line-height:1; letter-spacing:2px; color:#FFFFFF;
  padding:18px 30px; border:3px solid rgba(255,255,255,.9); border-radius:14px;
  background:rgba(0,40,88,.45); text-align:center; white-space:nowrap; pointer-events:none;
}
@media (max-width:767px){ .gap-gesch-ph-wrap{ margin-top:32px; } .gap-gesch-ph-tag{ padding:12px 18px; border-width:2px; } }


/* ===== 78 | Rechtstexte (Impressum, Datenschutz, Barrierefreiheit) ===== */
.gap-recht{ padding:150px 24px 120px; background:#FFFFFF; }
.gap-recht-inner{ width:min(860px,100%); margin-inline:auto; font-family:var(--gap-font-body); color:var(--e-global-color-primary,#004799); }
.gap-recht-kicker{ font-family:var(--gap-font-head); font-weight:900; text-transform:uppercase; letter-spacing:.6px; font-size:16px; line-height:1; margin:0 0 14px; color:var(--e-global-color-accent,#009881); }
.gap-recht-h1{ font-family:var(--gap-font-head); font-weight:900; text-transform:uppercase; font-size:62px; line-height:56px; letter-spacing:-1.4px; margin:0 0 20px; color:var(--e-global-color-primary,#004799); }
.gap-recht-lead{ font-size:20.5px; line-height:26px; letter-spacing:-.1px; margin:0 0 44px; }
.gap-recht-h2{ font-family:var(--gap-font-head); font-weight:900; text-transform:uppercase; font-size:26px; line-height:26px; letter-spacing:-.2px; margin:40px 0 12px; color:var(--e-global-color-primary,#004799); }
.gap-recht-inner p{ font-size:18px; line-height:26px; margin:0 0 14px; }
.gap-recht-liste{ margin:0 0 14px; padding-left:22px; }
.gap-recht-liste li{ font-size:18px; line-height:26px; margin-bottom:8px; }
/* Links auf den Rechtsseiten: dieselbe Komponente wie im Fliesstext der
   Hauptseite (.gap-textlink) - Akzentfarbe, keine Unterstreichung im Ruhezustand,
   beim Hover/Fokus waechst eine 2px-Linie von links herein. */
.gap-recht .gap-recht-inner a{
  position:relative; display:inline-block;
  text-decoration:none !important;
  color:var(--gap-link-farbe, var(--e-global-color-accent,#009881)) !important;
  font-weight:800; overflow-wrap:anywhere;
}
.gap-recht .gap-recht-inner a:hover,.gap-recht .gap-recht-inner a:focus,.gap-recht .gap-recht-inner a:focus-visible,.gap-recht .gap-recht-inner a:active{
  color:var(--gap-link-farbe, var(--e-global-color-accent,#009881)) !important;
}
.gap-recht .gap-recht-inner a::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:currentColor; border-radius:1px;
  transform:scaleX(0); transform-origin:left center;
  transition:transform 320ms cubic-bezier(.22,.61,.36,1);
}
.gap-recht .gap-recht-inner a:hover::after,.gap-recht .gap-recht-inner a:focus-visible::after{ transform:scaleX(1); }
.gap-recht .gap-recht-inner a:focus-visible{ outline:3px solid var(--e-global-color-primary,#004799); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ .gap-recht .gap-recht-inner a::after{ transition:none; } }
/* Noch nicht freigegebene Stellen - vor Go-live muss diese Klasse verschwunden sein */
.gap-offen{ position:relative; background:#FFF6DA; border-left:5px solid #E8B21E; border-radius:8px; padding:16px 18px 16px 18px; margin:0 0 14px; font-size:17px !important; line-height:25px !important; color:#5C4405; }
.gap-offen-tag{ display:block; font-family:var(--gap-font-head); font-weight:900; text-transform:uppercase; font-size:13px; letter-spacing:.6px; margin-bottom:6px; color:#8A6708; }
@media (max-width:1024px){ .gap-recht{ padding:130px 24px 100px; } .gap-recht-h1{ font-size:52px; line-height:48px; } }
@media (max-width:767px){ .gap-recht{ padding:110px 20px 80px; } .gap-recht-h1{ font-size:38px; line-height:36px; letter-spacing:-.8px; } .gap-recht-lead{ font-size:17px; line-height:23px; margin-bottom:32px; } .gap-recht-h2{ font-size:21px; line-height:22px; margin-top:32px; } .gap-recht-inner p,.gap-recht-liste li{ font-size:16px; line-height:23px; } }


/* ===== 79 | Fahrplan: Platzhalterkacheln statt Foto ===== */
/* Kundenwunsch: bis die echten Fotos da sind, LIFE-IRIS-Logo + Status statt Bild */
.gap-iris-schritt-bald{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(0,71,153,.14); }
.gap-iris-schritt-bald .gap-iris-schritt-logo{ position:static !important; inset:auto !important; width:auto !important; height:37% !important; max-width:none !important; object-fit:contain !important; margin:0 !important; border-radius:0 !important; }
.gap-iris-schritt-bald-text{ font-family:var(--gap-font-head); font-weight:900; text-transform:uppercase; font-size:15px; line-height:16px; letter-spacing:.4px; text-align:center; padding:0 12px; color:var(--e-global-color-primary,#004799); }
@media (max-width:1024px){ .gap-iris-schritt-bald-text{ font-size:17px; } }
@media (max-width:767px){ .gap-iris-schritt-bald-text{ font-size:15px; } }

/* HORA-Box: Bezeichnung vor der URL fett */
.gap-hora-label{ font-weight:800; }

/* Platzhalter-Label ueber einem Foto, das noch getauscht wird.
   Vor Go-live darf .gap-ph-tag nirgends mehr vorkommen. */
.gap-ph-tag{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  font-family:var(--gap-font-head); font-weight:900; text-transform:uppercase;
  font-size:clamp(20px,3.4vw,52px); line-height:1; letter-spacing:2px; color:#FFFFFF;
  padding:14px 24px; border:3px solid rgba(255,255,255,.9); border-radius:14px;
  background:rgba(0,40,88,.45); text-align:center; white-space:nowrap; pointer-events:none;
}
@media (max-width:767px){ .gap-ph-tag{ padding:10px 16px; border-width:2px; letter-spacing:1px; } }
/* In den kleinen Fahrplan-Kacheln muss das Label kleiner sein */
.gap-iris-schritt-bild .gap-ph-tag{ font-size:clamp(13px,1.15vw,20px); padding:8px 12px; border-width:2px; letter-spacing:1px; }

/* Sprungziel des Skip-Links: nimmt keinen Platz ein, faellt aber nicht unter
   den fixen Header, wenn man hinspringt. */
/* <main id="content"> ist das Sprungziel des Skip-Links. Kein sichtbarer Fokusring,
   weil der Fokus nur programmatisch dorthin gesetzt wird. */
.gap-inhalt{ display:block; scroll-margin-top:120px; }
.gap-inhalt:focus{ outline:none; }


/* ===== 80 | Cookie-Banner (Datareporter WebCare) im Kampagnen-Design =====
   WebCare spritzt sein eigenes <style> zur Laufzeit in den Container, deshalb
   ueberall !important. Bei einem Update des Dienstes bitte kurz nachsehen. */
#dr_cookie_banner_container.cc-window{
  background:#FFFFFF !important; border-radius:24px !important; border:0 !important;
  box-shadow:0 22px 54px -26px rgba(0,42,92,.45) !important;
  font-family:var(--gap-font-body) !important;
  color:var(--e-global-color-primary,#004799) !important;
  padding:34px 32px 30px !important;
}
#dr_cookie_banner_container .dr-headline{
  font-family:var(--gap-font-head) !important; font-weight:900 !important;
  text-transform:uppercase !important; font-size:30px !important; line-height:30px !important;
  letter-spacing:.2px !important; color:var(--e-global-color-primary,#004799) !important;
  margin:0 0 14px !important;
}
#dr_cookie_banner_container .dr-descriptiontext,#dr_cookie_banner_container .dr-descriptiontext span,#dr_cookie_banner_container .dr-cookietext{
  font-family:var(--gap-font-body) !important; font-size:17px !important;
  line-height:24px !important; color:var(--e-global-color-primary,#004799) !important;
}
/* Buttons exakt wie die Kampagnen-Buttons: Pille, 16px/700, 14/26 Padding */
#dr_cookie_banner_container .cc-btn{
  font-family:var(--gap-font-body) !important; font-weight:700 !important;
  font-size:16px !important; letter-spacing:.2px !important; line-height:1.2 !important;
  border-radius:999px !important; padding:14px 26px !important;
  border:0 !important; text-decoration:none !important; box-shadow:none !important;
  box-sizing:border-box !important; /* sonst rechnet WebCare das Padding auf die Breite drauf */
}
#dr_cookie_banner_container .cc-allow{ background:var(--e-global-color-primary,#004799) !important; color:#FFFFFF !important; }
#dr_cookie_banner_container .cc-allow:hover,#dr_cookie_banner_container .cc-allow:focus-visible{ background:#003A7D !important; }
#dr_cookie_banner_container .cc-deny{ background:var(--e-global-color-surflight,#AFDFF9) !important; color:var(--e-global-color-primary,#004799) !important; }
/* Buttonzeile: WebCare macht die Buttons unter ~1200px vollbreit und versetzt sie.
   Hier eine vorhersagbare Zeile, die erst unter 768px stapelt. */
#dr_cookie_banner_container .cc-compliance{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; gap:12px !important;
  justify-content:flex-end !important; align-items:center !important; margin:0 !important; }
#dr_cookie_banner_container .cc-btn{ width:auto !important; margin:0 !important; }
#dr_cookie_banner_container .cc-deny:hover,#dr_cookie_banner_container .cc-deny:focus-visible{ background:#9AD4F5 !important; }
#dr_cookie_banner_container .cc-btn:focus-visible{ outline:3px solid var(--e-global-color-accent,#009881) !important; outline-offset:3px !important; }
/* Die drei Zweck-Kacheln */
#dr_cookie_banner_container .dr-overview-item{ border-radius:16px !important; font-family:var(--gap-font-body) !important; }
/* Abdunklung dahinter im Kampagnenblau statt Neutralgrau */
#dr_blocking_div.cc-overlay{ background:rgba(0,40,88,.55) !important; }
@media (max-width:767px){
  #dr_cookie_banner_container.cc-window{ padding:26px 22px 24px !important; border-radius:20px !important; }
  #dr_cookie_banner_container .dr-headline{ font-size:24px !important; line-height:24px !important; }
  #dr_cookie_banner_container .dr-descriptiontext,#dr_cookie_banner_container .dr-descriptiontext span{ font-size:16px !important; line-height:22px !important; }
  #dr_cookie_banner_container .cc-btn{ font-size:15px !important; padding:13px 22px !important; width:100% !important; }
  #dr_cookie_banner_container .cc-compliance{ flex-direction:column !important; align-items:stretch !important; gap:10px !important; }
}

/* Ueberschriften im WebCare-Text auf die Groessen der Rechtsseiten bringen —
   ungestylt erben sie die Kampagnen-Displaygroessen (H1 100px, H2 72px). */
.gap-recht-drwc h1{ font-family:var(--gap-font-head); font-weight:900; text-transform:uppercase;
  font-size:62px; line-height:56px; letter-spacing:-1.4px; margin:0 0 20px;
  color:var(--e-global-color-primary,#004799); }
.gap-recht-drwc h2{ font-family:var(--gap-font-head); font-weight:900; text-transform:uppercase;
  font-size:26px; line-height:26px; letter-spacing:-.2px; margin:40px 0 12px;
  color:var(--e-global-color-primary,#004799); }
.gap-recht-drwc h3{ font-family:var(--gap-font-body); font-weight:700;
  font-size:20px; line-height:26px; margin:28px 0 8px;
  color:var(--e-global-color-primary,#004799); }
.gap-recht-drwc h4{ font-family:var(--gap-font-body); font-weight:700; font-size:18px;
  line-height:24px; margin:22px 0 6px; color:var(--e-global-color-primary,#004799); }
@media (max-width:1024px){ .gap-recht-drwc h1{ font-size:52px; line-height:48px; } }
@media (max-width:767px){
  .gap-recht-drwc h1{ font-size:38px; line-height:36px; letter-spacing:-.8px; }
  .gap-recht-drwc h2{ font-size:21px; line-height:22px; margin-top:32px; }
  .gap-recht-drwc h3{ font-size:18px; line-height:24px; }
}


/* ===== 81 | Rechtsseiten folgen der Typo-Hierarchie der Hauptseite ========
   Werte 1:1 von der Startseite uebernommen:
   Kicker = .gap-sec-label (30/27), H1 = Section-Headline (82/73,8),
   H2 = .gap-echt-h3 (32/28,8), H3 = .gap-faq-frage (20,5/24,6 Body 800),
   Lead = .gap-*-lead (20,5/24,6), Fliesstext = Karten-Copy (16 px).
   Einzige Abweichung: Zeilenhoehe im Fliesstext 24 statt 19,2 px — bei 45.000
   Zeichen Rechtstext ist 1,2 nicht lesbar. Zwei Klassen im Selektor, sonst
   gewinnt die globale Elementor-Typografie. */
.gap-recht .gap-recht-inner .gap-recht-kicker{
  font-family:var(--gap-font-head); font-weight:900; text-transform:uppercase;
  font-size:30px; line-height:27px; letter-spacing:.2px;
  margin:0 0 16px; color:var(--e-global-color-primary,#004799);
}
.gap-recht .gap-recht-inner h1,.gap-recht .gap-recht-inner .gap-recht-h1{
  font-family:var(--gap-font-head); font-weight:900; text-transform:uppercase;
  font-size:82px; line-height:73.8px; letter-spacing:-2px;
  margin:0 0 24px; color:var(--e-global-color-primary,#004799);
}
.gap-recht .gap-recht-inner h2,.gap-recht .gap-recht-inner .gap-recht-h2{
  font-family:var(--gap-font-head); font-weight:900; text-transform:uppercase;
  font-size:32px; line-height:28.8px; letter-spacing:.2px;
  margin:56px 0 16px; color:var(--e-global-color-primary,#004799);
}
.gap-recht .gap-recht-inner h3{
  font-family:var(--gap-font-body); font-weight:800; text-transform:none;
  font-size:20.5px; line-height:24.6px; letter-spacing:-.1px;
  margin:32px 0 8px; color:var(--e-global-color-primary,#004799);
}
.gap-recht .gap-recht-inner h4,.gap-recht .gap-recht-inner h5,.gap-recht .gap-recht-inner h6{
  font-family:var(--gap-font-body); font-weight:800; text-transform:none;
  font-size:16px; line-height:24px; letter-spacing:.2px;
  margin:24px 0 8px; color:var(--e-global-color-primary,#004799);
}
.gap-recht .gap-recht-inner .gap-recht-lead{
  font-family:var(--gap-font-body); font-weight:500; font-size:20.5px;
  line-height:24.6px; letter-spacing:-.1px; margin:0 0 40px;
}
.gap-recht .gap-recht-inner p,.gap-recht .gap-recht-inner li,.gap-recht .gap-recht-inner ul,.gap-recht .gap-recht-inner ol,.gap-recht .gap-recht-inner td,.gap-recht .gap-recht-inner th{
  font-family:var(--gap-font-body); font-weight:500;
  font-size:16px; line-height:24px; letter-spacing:.2px;
  color:var(--e-global-color-primary,#004799);
}
.gap-recht .gap-recht-inner p{ margin:0 0 16px; }
.gap-recht .gap-recht-inner ul,.gap-recht .gap-recht-inner ol{ margin:0 0 24px; padding-left:24px; }
.gap-recht .gap-recht-inner li{ margin:0 0 8px; }
.gap-recht .gap-recht-inner li:last-child{ margin-bottom:0; }
.gap-recht .gap-recht-inner li > ul,.gap-recht .gap-recht-inner li > ol{ margin:8px 0 0; }
.gap-recht .gap-recht-inner strong,.gap-recht .gap-recht-inner b{ font-weight:800; }
.gap-recht .gap-recht-inner > *:first-child{ margin-top:0; }
/* Rechtstexte haben lange Komposita und nackte URLs — anders als die kurzen
   Headlines der Startseite muessen sie umbrechen duerfen. */
.gap-recht .gap-recht-inner h1,.gap-recht .gap-recht-inner h2,.gap-recht .gap-recht-inner h3,.gap-recht .gap-recht-inner h4,.gap-recht .gap-recht-inner .gap-recht-h1,.gap-recht .gap-recht-inner .gap-recht-h2{
  overflow-wrap:break-word; hyphens:auto;
}
.gap-recht .gap-recht-inner p,.gap-recht .gap-recht-inner li,.gap-recht .gap-recht-inner td,.gap-recht .gap-recht-inner th,.gap-recht .gap-recht-inner em{ overflow-wrap:anywhere; }
@media (max-width:1024px){
  .gap-recht .gap-recht-inner h1,.gap-recht .gap-recht-inner .gap-recht-h1{ font-size:72px; line-height:64.8px; }
}
@media (max-width:767px){
  .gap-recht .gap-recht-inner .gap-recht-kicker{ font-size:20px; line-height:18px; }
  .gap-recht .gap-recht-inner h1,.gap-recht .gap-recht-inner .gap-recht-h1{ font-size:64px; line-height:57.6px; }
  .gap-recht .gap-recht-inner h2,.gap-recht .gap-recht-inner .gap-recht-h2{ font-size:32px; line-height:28.8px; margin-top:44px; }
  .gap-recht .gap-recht-inner h3{ font-size:16px; line-height:20.8px; }
  .gap-recht .gap-recht-inner .gap-recht-lead{ font-size:16px; line-height:20.8px; letter-spacing:.2px; }
  .gap-recht .gap-recht-inner p,.gap-recht .gap-recht-inner li,.gap-recht .gap-recht-inner ul,.gap-recht .gap-recht-inner ol,.gap-recht .gap-recht-inner td,.gap-recht .gap-recht-inner th{ font-size:16px; line-height:23px; }
}


/* ================ 82 | Barrierefreiheit: Bedienpunkte Projekt-Slider ================ */
/* WCAG 2.5.8 Zielgroesse: sichtbarer Punkt etwas groesser, Trefferflaeche 24x24,
   Abstand so gewaehlt, dass sich die 24er-Kreise nicht ueberschneiden. */
.gap-projekte-punkte{ gap:12px; }
.gap-projekte-punkte button{ width:12px; height:12px; border-radius:6px; position:relative; }
.gap-projekte-punkte button[aria-selected="true"]{ width:34px; }
.gap-projekte-punkte button::after{ content:""; position:absolute; top:50%; left:50%; width:24px; height:24px; transform:translate(-50%,-50%); border-radius:50%; }
.gap-projekte-punkte button:focus-visible{ outline:3px solid var(--e-global-color-primary,#004799); outline-offset:4px; }

/* Der Theme-Reset setzt fuer jeden Knopf ohne eigene Regel background:#c36 (Altrosa)
   auf :hover. Fuer die Punkt-Navigationen hier ueberschrieben — Hover und Tastaturfokus
   in Primaerblau statt Altrosa. */
.gap-projekte-punkte button:hover,
.gap-projekte-punkte button:focus-visible,
.gap-gesch-dots button:hover,
.gap-gesch-dots button:focus-visible{ background: var(--e-global-color-primary,#004799); color:#FFFFFF; }

/* ================ 83 | Pause-Steuerung fuer das Video (WCAG 2.2.2) ================ */
/* Safari rundet auf dem iPhone die Videohoehe (Seitenverhaeltnis
   351/248 auf 346px Breite) anders als den Kasten darunter; dabei
   blitzt eine helle Fuge quer durch die Karte. Ein Pixel
   Ueberlappung deckt sie, sichtbar ist davon nichts. */
.gap-traun-panel{ margin-top: -1px; }

/* Immer rechts oben im Video, auf allen Breiten - so wie urspruenglich. */
.gap-videostopp{ position:absolute; right:16px; top:16px; bottom:auto; z-index:4; display:flex;
  align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0;
  border-radius:999px; background:rgba(0,40,88,.78); color:#FFFFFF; cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(0,20,45,.6); transition:background-color 200ms; }
/* Spezifitaet: reset.css hat [type="button"]:hover mit background #c36 und liegt
   gleichauf mit .gap-videostopp:hover. Mit vorangestelltem button. gewinnen wir. */
button.gap-videostopp:hover,
button.gap-videostopp:focus-visible{ background:var(--e-global-color-primary,#004799) !important; color:#FFFFFF !important; }
button.gap-videostopp{ background:rgba(0,40,88,.78); color:#FFFFFF; }
.gap-videostopp:focus-visible{ outline:3px solid #FFFFFF; outline-offset:3px; }
.gap-videostopp svg{ width:16px; height:16px; fill:currentColor; display:block; pointer-events:none; }
@media (max-width:900px){ .gap-videostopp{ right:14px; top:14px; } }
@media (prefers-reduced-motion: reduce){ .gap-videostopp{ transition:none; } }


/* =========================================================
   84  Barrierefreie Darstellung  (html.gap-bf)
   Umschalter rechts unten. Ohne Klasse aendert sich nichts.
   Vier Werte, mehr nicht. Zwei davon sind fuer AA nachgezogen:
     #00786A  Gruen       5,39 auf Weiss, 5,00 auf #EDF8FE, 3,79 auf #AFDFF9
     #0B6E92  Himmelblau  5,74 auf Weiss, weisse Ziffer darauf 5,74
     #AFDFF9  Hellblau    unveraendert, 6,25 auf #004799
     #004799  Dunkelblau  unveraendert
   Regel: auf hellem Grund Gruen bzw. Himmelblau, auf dunklem Grund
   Hellblau. Kein fuenfter Wert - wo eine Farbe auf einem Untergrund
   nicht reicht, wird die Rolle getauscht, nicht die Palette erweitert.
   ========================================================= */

.gap-bf-schalter{
	position:fixed; right:20px; bottom:var(--gap-bf-unten, 20px); z-index:9990;
	display:inline-flex; align-items:center; gap:10px;
	min-height:48px; padding:12px 18px; margin:0;
	border:2px solid #FFFFFF; border-radius:999px;
	background:#004799; color:#FFFFFF; cursor:pointer;
	font-family:var(--gap-font-body); font-size:16px; font-weight:700; line-height:1.2;
	box-shadow:0 8px 24px -10px rgba(0,20,45,.7);
	transition:background-color 200ms;
}
button.gap-bf-schalter{ background:#004799; color:#FFFFFF; }
button.gap-bf-schalter:hover,
button.gap-bf-schalter:focus-visible{ background:#004799 !important; color:#FFFFFF !important; filter:brightness(.85); }
.gap-bf-schalter:focus-visible{ outline:3px solid #FFFFFF; outline-offset:3px; box-shadow:0 0 0 7px #004799; }
.gap-bf-schalter svg{ width:22px; height:22px; flex:0 0 auto; fill:currentColor; display:block; pointer-events:none; }
html.gap-bf .gap-bf-schalter{ background:#00786A; }
html.gap-bf button.gap-bf-schalter{ background:#00786A; }
html.gap-bf button.gap-bf-schalter:hover,
html.gap-bf button.gap-bf-schalter:focus-visible{ background:#00786A !important; color:#FFFFFF !important; filter:brightness(.85); }
html.gap-bf .gap-bf-schalter:focus-visible{ box-shadow:0 0 0 7px #00786A; }
@media (max-width:600px){
	.gap-bf-schalter{ right:12px; padding:10px 14px; gap:9px; }
	.gap-bf-icon{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .gap-bf-schalter{ transition:none; } }

/* --- Eine Textfarbe fuer alles auf hellem Grund ----------
   #004799 - das Dunkelblau der Kampagne - erreicht 8,9:1 auf
   Weiss, 8,2:1 auf #EDF8FE und 6,2:1 auf #AFDFF9. Das liegt
   ueber AAA (7:1) und deutlich ueber der AA-Schwelle. Gruen und Himmelblau tragen im Modus
   keinen Text mehr, sie bleiben nur noch Flaeche. */
html.gap-bf body,
html.gap-bf p, html.gap-bf li, html.gap-bf dd, html.gap-bf dt,
html.gap-bf td, html.gap-bf th, html.gap-bf figcaption, html.gap-bf label,
html.gap-bf h1, html.gap-bf h2, html.gap-bf h3, html.gap-bf h4, html.gap-bf h5,
html.gap-bf .elementor-heading-title,
html.gap-bf .gap-textlink, html.gap-bf .gap-recht-link,
html.gap-bf .gap-kon-link, html.gap-bf .gap-faq-link,
html.gap-bf .gap-faq-plus, html.gap-bf .gap-hora-link,
html.gap-bf .gap-echt-link-text, html.gap-bf .gap-echt-pfeil,
html.gap-bf .gap-kpi-wert, html.gap-bf .gap-kpi-lab,
html.gap-bf .gap-gruen{ color:#004799; }

/* Links sind nicht allein an der Farbe zu erkennen (WCAG 1.4.1). */
html.gap-bf a:not(.gap-btn):not(.elementor-button):not(.gap-bf-schalter):not(.elementor-item){
	text-decoration:underline;
	text-decoration-thickness:2px;
	text-underline-offset:3px;
}

/* --- Farbe traegt nur noch Flaechen, Text darauf weiss --- */
html.gap-bf .gap-traun-karte *,
html.gap-bf .gap-iris-zahlen *,
html.gap-bf footer *,
html.gap-bf .gap-myth-vorne *,
html.gap-bf .gap-myth-hinten *,
html.gap-bf .gap-karte-inhalt *,
html.gap-bf .gap-projekt-inhalt *,
html.gap-bf .gap-hero-inner *{ color:#FFFFFF !important; }
html.gap-bf .gap-btn-primary{ color:#FFFFFF !important; }

/* --- Hero: die Headline ist zweifarbig -------------------
   Thema in Weiss, "Laeuft bei uns." in einem aufgehellten
   Hellblau - ohne Kasten und ohne Schein. Die Schrift steht
   direkt auf dem Foto, also gibt der hellste Pixel im
   Claim-Band den Deckel vor. Mit dem Scrim weiter unten
   (ab 45 Prozent Hoehe durchgehend .56) liegt er ueber alle
   sechs Herofotos bei
   0,206 Luminanz. #CFEBFC erreicht darauf 3,31:1 und damit
   die 3:1 fuer Grossschrift (112px, fett); Weiss liegt bei
   4,17:1. Das Kampagnen-Hellblau #AFDFF9 kaeme nur auf
   2,88:1 und ist an dieser Stelle nicht zulaessig.
   Wird ein Herofoto getauscht, beide Werte zusammen pruefen:
   diese Farbe und den Scrim. */
html.gap-bf .gap-hero-claim .elementor-heading-title{ color: #CFEBFC !important; }

/* --- Tropfen und Abschnittslabel tragen dieselbe Farbe ---
   Welche, entscheidet der Untergrund; das Skript in
   functions.php (Abschnitt 88) setzt dazu data-gap-grund. */
html.gap-bf .gap-sec-num[data-gap-grund="hell"]::before{ background:#004799 !important; }
html.gap-bf .gap-sec-num[data-gap-grund="hell"] .elementor-heading-title{ color:#FFFFFF !important; }
html.gap-bf .gap-sec-label[data-gap-grund="hell"],
html.gap-bf .gap-sec-label[data-gap-grund="hell"] .elementor-heading-title{ color:#004799 !important; }

html.gap-bf .gap-sec-num[data-gap-grund="dunkel"]::before{ background:#FFFFFF !important; }
html.gap-bf .gap-sec-num[data-gap-grund="dunkel"] .elementor-heading-title{ color:#004799 !important; }
html.gap-bf .gap-sec-label[data-gap-grund="dunkel"],
html.gap-bf .gap-sec-label[data-gap-grund="dunkel"] .elementor-heading-title{ color:#FFFFFF !important; }

/* --- Text auf Fotos steht auf einem Balken ---------------
   Die Verlaeufe entfallen, das Foto bleibt unangetastet. */
html.gap-bf .gap-karte-schleier,
html.gap-bf .gap-projekt-schleier{ display:none !important; }
html.gap-bf .gap-karte-inhalt,
html.gap-bf .gap-projekt-inhalt{
	background:#004799;
	padding:16px 20px;
	border-radius:14px;
}

/* Die Karten der Use Cases haben eine feste Hoehe, der Inhalt sitzt
   absolut am unteren Rand und waechst nach oben. Das Padding des
   Balkens hat deshalb am Handy die Ueberschrift aus der Karte
   geschoben und die Kennzahlen von zwei Spalten auf eine gedrueckt.
   Gleich grosse negative Marge: der Balken legt sich um den Text,
   ohne ihn zu verschieben - Anordnung also wie im Normalmodus.
   Nur am Handy, nur fuer die Projektkarten: breiter sind die Karten
   gross genug, und die Karten unter "Was wir tun" sind an allen vier
   Seiten verankert und vertragen die Marge nicht. */
@media (max-width: 767px){
	html.gap-bf .gap-projekt-inhalt{ margin: -16px -20px; }
}

/* Der Hero traegt zu viel Text fuer einen Balken. Dort deckt
   ein Verlauf ab, der nur noch weisse Schrift tragen muss:
   0,62 wo die 13px-Zeile steht (4,9:1), 0,48 beim Claim (3,3:1). */
html.gap-bf .gap-hero-photos{ position:absolute; }
html.gap-bf .gap-hero-photos::after{
	content:""; position:absolute; inset:0; pointer-events:none;
	background:linear-gradient(to bottom,
		rgba(0,26,52,.26) 0%,
		rgba(0,26,52,.62) 25%,
		rgba(0,26,52,.56) 45%,
		rgba(0,26,52,.56) 85%,
		rgba(0,26,52,.50) 100%);
}

/* --- Bedienelemente mindestens 24 Pixel hoch ------------- */
html.gap-bf .gap-slider input[type="range"]{
	height:30px; padding:11px 0; background-clip:content-box; box-sizing:border-box;
}

/* --- Wasserwellen im Hero bleiben aus -------------------- */
/* Der Bildwechsel selbst laeuft weiter, nur der Wasser-Shader
   auf dem Canvas wird nicht gestartet (siehe functions.php). */
html.gap-bf .gap-hero-wasser{ display:none !important; }

/* --- Abschnittslabels auf dunkelblauen Flaechen ---------- */
html.gap-bf .gap-iris-zahlen .gap-sec-label,
html.gap-bf .gap-iris-zahlen .gap-sec-label .elementor-heading-title,
html.gap-bf .gap-traun-panel .gap-sec-label,
html.gap-bf .gap-traun-panel .gap-sec-label .elementor-heading-title,
html.gap-bf .gap-traun-karte .gap-sec-label,
html.gap-bf .gap-traun-karte .gap-sec-label .elementor-heading-title{ color:#AFDFF9; }

/* --- Platzhalterschild in der Geschichte ----------------- */
html.gap-bf .gap-gesch-ph-tag{ background:rgba(0,26,52,.86); color:#FFFFFF; }

/* =========================================================
   85  Cookie-Einwilligung: Reiter weg, Link im Fuss
   Der schwebende Reiter von WebCare wird ausgeblendet. Der
   Widerruf bleibt jederzeit moeglich - ueber den Eintrag
   "Cookie-Einstellungen" unter Rechtliches im Seitenfuss.
   ========================================================= */
.cc-revoke{ display:none !important; }

/* --- Schalter statt Knopf: Zustand ist ablesbar ---------- */
.gap-bf-schalter{ gap:12px; padding:10px 16px; }
.gap-bf-gleis{
	position:relative; flex:0 0 auto; width:46px; height:26px;
	border-radius:999px; background:#FFFFFF;
	box-shadow:inset 0 0 0 2px rgba(0,20,45,.3);
	transition:background-color 200ms;
}
.gap-bf-reiter{
	position:absolute; top:4px; left:4px; width:18px; height:18px;
	border-radius:50%; background:#004799;
	transition:transform 200ms, background-color 200ms;
}
.gap-bf-schalter[aria-checked="true"] .gap-bf-reiter{
	transform:translateX(20px); background:#00786A;
}
.gap-bf-zustand{ min-width:2.6em; text-align:left; font-weight:800; letter-spacing:.02em; }
@media (prefers-reduced-motion: reduce){
	.gap-bf-gleis, .gap-bf-reiter{ transition:none; }
}

/* --- Schalter kompakt ------------------------------------ */
.gap-bf-schalter{
	gap:8px; min-height:0; padding:7px 10px 7px 12px;
	font-size:13px; font-weight:700; border-width:1px;
	box-shadow:0 4px 14px -8px rgba(0,20,45,.6);
}
.gap-bf-schalter svg{ display:none; }
.gap-bf-zustand{ display:none; }
.gap-bf-gleis{ width:32px; height:18px; box-shadow:inset 0 0 0 2px rgba(0,20,45,.3); }
.gap-bf-reiter{ top:3px; left:3px; width:12px; height:12px; }
.gap-bf-schalter[aria-checked="true"] .gap-bf-reiter{ transform:translateX(14px); }
.gap-bf-schalter:focus-visible{ outline-width:2px; outline-offset:2px; box-shadow:0 0 0 5px #004799; }
html.gap-bf .gap-bf-schalter:focus-visible{ box-shadow:0 0 0 5px #00786A; }

/* --- Am Handy traegt der Schalter nur das Zeichen --------
   Das Wort bleibt im Markup und damit der Name des Schalters
   fuer Screenreader; es wird nur unsichtbar ausgelagert. */
@media (max-width: 600px){
	.gap-bf-schalter{ gap: 8px; padding: 7px 10px; }
	.gap-bf-schalter .gap-bf-icon{ display: block; width: 18px; height: 18px; }
	.gap-bf-schalter .gap-bf-wort{
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
		white-space: nowrap; border: 0;
	}
}

/* --- Bildwechsel anhalten (nur im barrierefreien Modus) --- */
.gap-heropause{
	/* An der rechten Kante der Textspalte, auf Hoehe des Claims - so
	   von TK eingezeichnet. Der Knopf haengt an .gap-hero-inner, nicht
	   am Hero; dadurch bleibt er im Raster und ueberdeckt weder den
	   Barrierefrei-Schalter noch den Pfeil in der Mitte. */
	position:absolute; right:0; bottom:0; top:auto; z-index:5;
	display:flex; align-items:center; justify-content:center;
	width:44px; height:44px; padding:0; margin:0;
	border:2px solid #FFFFFF; border-radius:999px;
	background:#004799; color:#FFFFFF; cursor:pointer;
	box-shadow:0 6px 18px -8px rgba(0,20,45,.6);
}
button.gap-heropause:hover,
button.gap-heropause:focus-visible{ background:#004799 !important; color:#FFFFFF !important; filter:brightness(.85); }
.gap-heropause:focus-visible{ outline:3px solid #FFFFFF; outline-offset:3px; }
.gap-heropause svg{ width:16px; height:16px; fill:currentColor; display:block; pointer-events:none; }
@media (max-width:767px){ .gap-heropause{ right:0; bottom:0; top:auto; width:40px; height:40px; } }

/* --- reset.css faerbt jeden Knopf bei :hover und :focus pink ein.
       Fuer die eigenen runden Knoepfe wird die Farbe darum fuer alle
       Zustaende festgenagelt. ------------------------------------- */
button.gap-heropause,
button.gap-heropause:hover,
button.gap-heropause:focus,
button.gap-heropause:focus-visible,
button.gap-heropause:active{ background-color:#004799 !important; color:#FFFFFF !important; }
button.gap-heropause:hover,
button.gap-heropause:focus-visible{ filter:brightness(.85); }

button.gap-videostopp,
button.gap-videostopp:hover,
button.gap-videostopp:focus,
button.gap-videostopp:focus-visible,
button.gap-videostopp:active{ background-color:#004799 !important; color:#FFFFFF !important; }
button.gap-videostopp:hover,
button.gap-videostopp:focus-visible{ filter:brightness(.85); }

button.gap-bf-schalter,
button.gap-bf-schalter:hover,
button.gap-bf-schalter:focus,
button.gap-bf-schalter:focus-visible,
button.gap-bf-schalter:active{ background-color:#004799 !important; color:#FFFFFF !important; }
html.gap-bf button.gap-bf-schalter,
html.gap-bf button.gap-bf-schalter:hover,
html.gap-bf button.gap-bf-schalter:focus,
html.gap-bf button.gap-bf-schalter:focus-visible,
html.gap-bf button.gap-bf-schalter:active{ background-color:#00786A !important; color:#FFFFFF !important; }
button.gap-bf-schalter:hover,
button.gap-bf-schalter:focus-visible{ filter:brightness(.85); }

/* --- Unterstriche nachziehen ----------------------------- */
/* Wortmarken und Menuepunkte bleiben ohne Strich. */
html.gap-bf .elementor-heading-title > a,
html.gap-bf nav a{ text-decoration:none !important; }
/* Textlinks setzen selbst text-decoration:none - das muss hier fallen. */
html.gap-bf .gap-textlink,
html.gap-bf .gap-recht-link,
html.gap-bf .gap-kon-link,
html.gap-bf .gap-kon-mail,
html.gap-bf .gap-faq-link,
html.gap-bf .gap-hora-link,
html.gap-bf .gap-echt-link{
	text-decoration:underline !important;
	text-decoration-thickness:2px;
	text-underline-offset:3px;
}
/* Der mitwachsende Balken entfaellt, der Strich steht ohnehin. */
html.gap-bf .gap-textlink::after{ display:none; }

/* --- Flaechen behalten ihre Farbe, Text darauf ist weiss --
   Ausnahme: im Traun-Block ist der Knopf nach Entwurf hell -
   dort traegt er die dunkle Textfarbe (9,6:1). */
html.gap-bf .gap-traun-karte *,
html.gap-bf .gap-iris-zahlen *,
html.gap-bf footer *,
html.gap-bf .gap-myth-vorne *,
html.gap-bf .gap-myth-hinten *,
html.gap-bf .gap-karte-inhalt *,
html.gap-bf .gap-projekt-inhalt *{ color:#FFFFFF !important; }

html.gap-bf .gap-btn-green{ background:#00786A; color:#FFFFFF !important; }
html.gap-bf .gap-myth-hinten{ background:#00786A; }
html.gap-bf .gap-btn-primary{ background:#004799; color:#FFFFFF !important; }
html.gap-bf .gap-traun .gap-btn-green{ background:#AFDFF9 !important; color:#004799 !important; }
html.gap-bf .gap-btn-green:hover,
html.gap-bf .gap-btn-green:focus-visible,
html.gap-bf .gap-btn-primary:hover,
html.gap-bf .gap-btn-primary:focus-visible{ filter:brightness(.9); }

/* --- Textfarbe folgt dem tatsaechlichen Untergrund -------
   Das Skript in functions.php (Abschnitt 88) vermerkt an jedem
   Element mit Text, ob es auf hellem oder dunklem Grund sitzt.
   Knöpfe, Tropfen und Formularfelder sind ausgenommen, die
   bringen ihre Farben selbst mit. */
html.gap-bf [data-gap-auf="hell"]{ color:#004799 !important; }
html.gap-bf [data-gap-auf="dunkel"]{ color:#FFFFFF !important; }

/* Der gruene Knopf in der Kopfleiste traegt 16px in weiss und
   braucht darum die dunklere Flaeche (5,4:1 statt 3,6:1). */
html.gap-bf .gap-nav-cta .elementor-button{ background-color:#00786A !important; color:#FFFFFF !important; }
html.gap-bf .gap-nav-cta .elementor-button:hover,
html.gap-bf .gap-nav-cta .elementor-button:focus-visible{ filter:brightness(.9); }


/* ================ 89 | Letzter Barrierefreiheits-Check =================
   Drei Funde aus der Pruefung vom 01.10.2026, alle in beiden Ansichten. */

/* 1.4.10 Reflow: bei 320px passt "Hochwasserwarnungen" nicht mehr in
   eine Zeile. Das Grid-Element waechst dann auf seine min-content-
   Breite (332px) und schiebt die ganze Seite 31px nach rechts.
   min-width:0 nimmt ihm die Mindestbreite, break-word trennt das Wort
   nur, wenn es sonst nicht passt. */
.gap-echt-box{ min-width: 0; }
.gap-echt-h3, .gap-echt-text, .gap-echt-link{ overflow-wrap: break-word; }

/* 2.4.7 Fokus sichtbar: der Ring lief auf currentColor. Bei den
   dunkelblauen Buttons ist das Weiss - auf weissem Grund unsichtbar.
   Jetzt ein zweifarbiger Ring: innen Dunkelblau, aussen Weiss. Einer
   der beiden hebt sich von jedem Untergrund ab, den wir verwenden. */
.gap-btn:focus-visible{
	outline: 3px solid var(--e-global-color-primary, #004799);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px #FFFFFF;
}

/* Dasselbe fuer die Schieberegler im Verbrauchs-Check: deren Ring war
   Himmelblau und kam auf Weiss nur auf 2,2:1 (noetig sind 3:1). */
.gap-slider input[type=range]:focus-visible{
	outline: 3px solid var(--e-global-color-primary, #004799);
	outline-offset: 4px;
}

/* Den unsichtbaren Zusatz "oeffnet in neuem Tab" setzt das Skript in
   functions.php (Abschnitt 90) in die vorhandene Klasse .gap-sr. */

/* 1.4.10 Reflow, zweiter Fund: bei 320px Breite passen
   "Leitungswasser" und "Wassermythen" in 64px schmaler Versalschrift
   nicht mehr in ihre Spalte und ziehen die Seite 23 bzw. 7 Pixel
   auseinander. Unter 360px duerfen die Ueberschriften deshalb
   trennen; ab 375px (kleinstes aktuelles iPhone) passt alles ohne. */
@media (max-width: 360px){
	.elementor-heading-title{ overflow-wrap: break-word; hyphens: auto; }
}


/* ================================ 90 | Keine fremden Videocontrols ================================ */
/* Auf iPhone und iPad legt WebKit eine eigene Steuerleiste in das Video
   (10 Sekunden vor und zurueck, Zeitleiste, Vollbild, Bild-in-Bild, Ton),
   sobald der automatische Start unterbunden wird - etwa im Energiesparmodus
   oder wenn Safari "Automatisch abspielen" verbietet. Diese Leiste gehoert
   nicht zum Entwurf, bedient wird das Video ueber den eigenen runden Knopf
   rechts oben. Jede Regel steht einzeln, weil ein Browser eine ganze
   Selektorliste verwirft, sobald er ein Pseudoelement darin nicht kennt.
   Das Bautagebuch-Video der IRIS-Seite ist bewusst nicht erfasst, es soll
   seine Browser-Controls behalten. */
.gap-traun-video::-webkit-media-controls{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-traun-video::-webkit-media-controls-enclosure{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-traun-video::-webkit-media-controls-panel{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-traun-video::-webkit-media-controls-panel-container{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-traun-video::-webkit-media-controls-start-playback-button{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-traun-video::-webkit-media-controls-overlay-play-button{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-traun-video::-webkit-media-controls-play-button{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-traun-video::-webkit-media-controls-timeline{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-traun-video::-webkit-media-controls-timeline-container{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-traun-video::-webkit-media-controls-current-time-display{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-traun-video::-webkit-media-controls-time-remaining-display{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-traun-video::-webkit-media-controls-mute-button{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-traun-video::-webkit-media-controls-volume-slider{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-traun-video::-webkit-media-controls-fullscreen-button{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-traun-video::-webkit-media-controls-toggle-closed-captions-button{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-iris-video::-webkit-media-controls{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-iris-video::-webkit-media-controls-enclosure{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-iris-video::-webkit-media-controls-panel{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-iris-video::-webkit-media-controls-panel-container{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-iris-video::-webkit-media-controls-start-playback-button{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-iris-video::-webkit-media-controls-overlay-play-button{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-iris-video::-webkit-media-controls-play-button{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-iris-video::-webkit-media-controls-timeline{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-iris-video::-webkit-media-controls-timeline-container{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-iris-video::-webkit-media-controls-current-time-display{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-iris-video::-webkit-media-controls-time-remaining-display{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-iris-video::-webkit-media-controls-mute-button{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-iris-video::-webkit-media-controls-volume-slider{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-iris-video::-webkit-media-controls-fullscreen-button{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }
.gap-iris-video::-webkit-media-controls-toggle-closed-captions-button{ display: none !important; -webkit-appearance: none !important; opacity: 0 !important; pointer-events: none !important; }

/* Nachtrag: Den mittigen Startknopf von WebKit laesst sich auf iPhone und
   iPad mit CSS allein nicht verlaesslich abschalten; ab iOS 16 ignoriert er
   display:none. Deshalb zusaetzlich die Groesse wegnehmen - und vor allem
   die Loesung darunter: Bis zum ersten Bild liegt eine Schicht mit dem
   Standbild UEBER dem Video und verdeckt den fremden Knopf. Das Video
   selbst bleibt sichtbar, sonst verweigert iOS das automatische Abspielen.
   Rechteck und Eckenradius setzt das Skript, siehe functions.php. */
video::-webkit-media-controls-start-playback-button{ display: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; transform: scale(0) !important; visibility: hidden !important; }
video::-webkit-media-controls-overlay-play-button{ display: none !important; width: 0 !important; height: 0 !important; transform: scale(0) !important; visibility: hidden !important; }
video::-webkit-media-controls-overlay-enclosure{ display: none !important; height: 0 !important; visibility: hidden !important; }
video::-webkit-media-controls-container{ display: none !important; height: 0 !important; visibility: hidden !important; }

.gap-video-standbild{
	/* z-index 0 statt 1: so liegt die Schicht ueber dem Video (z-index 0,
	   gleiche Stufe, spaeter im Dokument), aber unter dem Schleier (1),
	   der Textflaeche (2) und dem eigenen Knopf (4). */
	position: absolute; left: 0; right: 0; top: 0; z-index: 0;
	background-size: cover; background-position: center; background-repeat: no-repeat;
	pointer-events: none; overflow: hidden;
}


/* ================================ 91 | Barrierefrei: Textfarbe folgt dem Zustand ================================ */
/* In der barrierefreien Ansicht misst ein Skript einmalig, ob ein Text auf
   hellem oder dunklem Grund sitzt, und setzt danach data-gap-auf; die Regel
   dazu traegt !important. Das geht schief, sobald ein Element seinen Grund
   spaeter wechselt: Die Spartipp-Kacheln schalten beim Scrollen von Weiss
   auf Dunkelblau um (.is-an), die Textfarbe bleibt aber auf dem einmal
   gemessenen Wert stehen. Je nachdem, in welchem Zustand gemessen wurde,
   steht dann Dunkelblau auf Dunkelblau oder Weiss auf Weiss - der Text
   verschwindet. Fuer diese Kacheln wird die Farbe deshalb fest an den
   Zustand gebunden statt an die Messung. Beide Richtungen erreichen 8,9 : 1. */
html.gap-bf .gap-flow-node,
html.gap-bf .gap-flow-node [data-gap-auf]{ color: #004799 !important; }
html.gap-bf .gap-flow-tip.is-an .gap-flow-node,
html.gap-bf .gap-flow-tip.is-an .gap-flow-node [data-gap-auf]{ color: #FFFFFF !important; }


/* ================================ 92 | Barrierefrei: Platte der Was-wir-tun-Karten ================================ */
/* In der barrierefreien Ansicht bekommt die Beschriftung der Karten eine
   deckende Flaeche mit 20px Innenabstand links und rechts. Die Flaeche
   behaelt dabei ihre Breite, der Platz fuer die Schrift schrumpft also von
   220 auf 180 Pixel. Am Handy passt dann das laengste Wort nicht mehr hinein:
   „Renaturierung“ braucht 213 Pixel und stand rechts ueber die Flaeche hinaus,
   „Grundwasser-“ und „Trinkwasser-“ ebenso, nur weniger auffaellig.
   Die Flaeche wird deshalb um genau diesen Innenabstand nach aussen gezogen.
   Sie ist dann 263 statt 223 Pixel breit und sitzt immer noch mit Abstand
   in der 291 Pixel breiten Karte; die Schrift hat wieder dieselben 220 Pixel
   wie in der Kampagnenansicht. Negative Aussenabstaende wirken hier, weil die
   Flaeche absolut sitzt und links wie rechts verankert ist. */
@media (max-width: 767px){
	html.gap-bf .gap-karte-inhalt{ margin-left: -20px; margin-right: -20px; }
}


/* Letzte Absicherung zu Abschnitt 94 in der functions.php: der Text im
   Bautagebuch wird oft aus Word oder Outlook kopiert. Der Filter dort
   entfernt die mitgebrachten style-Attribute schon beim Speichern.
   Sollte doch einmal etwas durchkommen, gewinnt hier trotzdem die
   Schrift und die Farbe aus dem Theme. Links sind ausgenommen, die
   behalten ihre eigene Farbe. */
.gap-bt-text p, .gap-bt-text span, .gap-bt-text font, .gap-bt-text div,
.gap-bt-text strong, .gap-bt-text b, .gap-bt-text em, .gap-bt-text i,
.gap-bt-text ul, .gap-bt-text ol, .gap-bt-text li {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  background: none !important;
}


/* Quellenlinks im Block „Wie wir das rechnen“: Hausfarbe Hellblau,
   zusaetzlich unterstrichen, damit sie nicht allein an der Farbe
   erkennbar sind. */
/* Aufbau des Annahmen-Blocks. Die vier Rechenwerte stehen untereinander,
   die Beschriftung in einer festen Spalte, damit die Werte fluchten.
   Die Abstaende sind knapp gehalten, damit der aufgeklappte Block in die
   freie Flaeche der Ergebniskarte passt und diese nicht hoeher wird. */
/* Beschriftung des Aufklappers wechselt mit dem Zustand. Beim Zuklappen
   setzt das Skript kurz .is-schliesst, dann steht schon wieder der
   Oeffnen-Text da, passend zum Pfeil. */
.gap-assum summary .gap-assum-zu { display: none; }
.gap-assum[open] summary .gap-assum-auf { display: none; }
.gap-assum[open] summary .gap-assum-zu { display: inline; }
.gap-assum.is-schliesst summary .gap-assum-auf { display: inline; }
.gap-assum.is-schliesst summary .gap-assum-zu { display: none; }

.gap-assum-k  { display: inline-block; min-width: 76px; font-weight: 700; vertical-align: top; }
.gap-assum-q  { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.gap-assum-abstand { display: block; height: 4px; }

.gap-assum-body a {
  color: var(--gap-blau-hell, #27BDEF);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.gap-assum-body a:hover,
.gap-assum-body a:focus-visible { text-decoration-thickness: 2px; }
.gap-assum-body a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }