/* v2510-83c (28.10.2026). Rueckbau: Datei und die link-Zeile in den Seiten entfernen (Kopf und Leiste fallen auf v83b zurueck).
   (3) Kopf ab 768 px auf allen Seiten gleich: WhatsApp-Symbol 44 (ab 1280 mit Nummer), sichtbar ab 768; Menue gerahmt 48 nur 768 bis 899 px.
   Zusatz 19:48 (Gman): ab 900 px kein Burger mehr (.menue-nav zeigt alle Punkte). Nur Palettenfarben: Navy #122E4D, Creme #F6F1E8, Terracotta #A3421D. */
@media (min-width:768px){
  html body .menue .menue-innen .menue-tel{display:inline-flex!important;flex:none;align-items:center;justify-content:center;box-sizing:border-box;height:44px;min-height:44px;min-width:44px;padding:0;margin:0 0 0 2px}
  html body .menue .menue-innen .menue-tel .mt-nr{display:none!important}
  html body .menue .menue-innen .menue-tel .mt-kurz{display:none!important}
}
@media (min-width:768px) and (max-width:1099px){
  html body .menue .menue-innen .menue-tel{margin-left:auto}
  html body .menue .menue-innen .menue-mobil{box-sizing:border-box;display:inline-flex!important;align-items:center;justify-content:center;flex:none!important;width:48px;min-width:48px!important;height:48px!important;min-height:48px!important;margin:0 0 0 14px!important;padding:0!important;gap:8px;border:1.5px solid #122E4D!important;border-radius:8px;background:transparent!important;color:#122E4D;font-family:"Satoshi",sans-serif;font-weight:600;font-size:15px;line-height:1}
  html body .menue .menue-innen .menue-mobil::before{content:""!important;display:block!important;flex:0 0 20px;width:20px;height:14px;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 6px/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 12px/100% 2px no-repeat}
  html body .menue .menue-innen .menue-mobil:is(:hover,:focus-visible,[aria-expanded=true]){background:#122E4D!important;color:#F6F1E8}
  html body .menue .menue-innen .menue-mobil:focus-visible{outline:2px solid #A3421D;outline-offset:3px}
  html body .menue .menue-innen .menue-mobil .menue-mobil-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (min-width:1100px){
  html body .menue .menue-innen .menue-mobil{display:none!important}
}
@media (min-width:1280px){
  html body .menue .menue-innen .menue-tel{padding:0 8px}
  html body .menue .menue-innen .menue-tel .mt-nr{display:inline!important;margin-left:8px}
}

/* (1) Startseite mobil (bis 767 px): Leiste #leiste wie auf den Unterseiten dauerhaft nach dem Hero sichtbar (Steuerung js/leiste.js: .an nach dem Hero),
   am Seitenende weg (Fuss oder #besichtigung, zusaetzlich 100 px davor ueber js/v83c-2810.js, Klasse v83c-ende).
   Setzt die Ausblendregel aus css/v82-2810.css (Z. 14 bis 17, .v82-weg) und die Scroll-Logik js/v82-2810.js ausser Kraft, ohne diese Dateien zu aendern. */
@media (max-width:767px){
  html body #leiste.v82-weg{transform:translateY(140%)!important;visibility:visible!important;transition:transform .35s ease}
  html body #leiste.an.v82-weg,html body #leiste.an{transform:translateY(0)!important;visibility:visible!important;transition:transform .35s ease}
  html body #leiste.v83c-ende{transform:translateY(140%)!important}
  html body #leiste.an.v83c-ende{transform:translateY(140%)!important}
  /* Abstand unten: der letzte Text oder Link jedes Abschnitts liegt mindestens 88 px ueber dem Abschnittsende (Leiste 60 px + Rand 12 px + Luft), damit die Leiste beim Stillstand am Abschnittsende nichts verdeckt. */
  html body:has(#leiste) main>section:not(#kopf):not(#zahlenband){padding-bottom:88px!important}
}

/* ===== Zusatz v83c (Gman 28.10. 19:48) ===== */
/* (a) WhatsApp-Zeichen: Header und Leiste, tel-Link im Menuepanel und Fuss (44 px Tippflaeche) */
html body .menue .menue-innen .menue-tel svg{width:22px;height:22px;flex:none}
html body #leiste .leiste-tel svg{width:22px;height:22px;flex:none;fill:currentColor}
html body .fuss .fuss-tel{display:inline-flex;align-items:center;min-height:44px}
html body .mobilpanel .mobilpanel-tel.mp-tel2{display:inline-flex;align-items:center;min-height:44px}

/* (b) Startseite bis 768 px: 5 Projekte als horizontale Wischreihe (scroll-snap x) statt Vollbild-Stapel; Foto oben frei, Text auf heller Karte, kein dunkles Overlay.
   Setzt die Sticky-Regeln aus css/startseite-2239.css (Z. 87 bis 99) und css/start.css (.folge-panel) ausser Kraft. */
@media (max-width:768px){
  html body #projekte .wisch-hinweis{display:block!important;margin:0 0 10px;padding:0 24px;font-size:14px;font-weight:600;color:#122E4D}
  html body #projekte .folge{display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;gap:12px!important;padding:0 24px 16px!important;scroll-padding:0 24px;-webkit-overflow-scrolling:touch}
  html body #projekte .folge-panel{position:relative!important;top:auto!important;flex:0 0 86%!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;scroll-snap-align:start;border-radius:12px!important;margin:0!important;box-shadow:0 8px 28px rgba(18,46,77,.14)}
  html body #projekte .folge-link{display:flex!important;flex-direction:column;height:auto!important}
  html body #projekte .folge-panel .folge-bild{position:relative!important;inset:auto!important;flex:none!important;height:min(400px,58svh)!important;min-height:0!important}
  html body #projekte .folge-panel .folge-bild picture,html body #projekte .folge-panel .folge-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  html body #projekte .folge-verlauf,html body #projekte .folge-fortschritt{display:none!important;background:none!important}
  html body #projekte .folge-inhalt{position:relative!important;height:auto!important;padding:16px 16px 18px!important;justify-content:flex-start!important}
  html body #projekte .folge-ort{font-size:24px!important;line-height:28px!important;margin-top:6px!important}
  html body #projekte .folge-text{font-size:15px!important}
  html body #projekte .folge-kz dd{font-size:24px}
  html body #projekte .folge-panel :is(.folge-text,.folge-meta,.folge-nr,.folge-fortschritt,.folge-inhalt>.tl){display:none!important}
  html body #projekte .folge-kz>div:not(:last-child){display:none!important}
  html body #projekte .folge-inhalt{width:100%!important;max-width:none!important;box-sizing:border-box}
}

/* (c) Hero-Knoepfe bis 768 px: gleich hoch (48), gleiche Form (Radius 8, Rand 2 px), gleiche Breite, untereinander (bis 519 px) oder nebeneinander */
@media (max-width:768px){
  html body #kopf.hero .hero-aktionen .start-karten{display:grid!important;grid-template-columns:1fr;gap:12px;width:100%;max-width:320px;flex:none}
  html body #kopf.hero .hero-aktionen .start-karten a{display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:48px!important;min-height:48px!important;padding:0 16px!important;border-radius:8px!important;border:2px solid #A3421D!important;font-size:16px!important;font-weight:600!important;line-height:1.2;text-align:center;margin:0}
  html body #kopf.hero .hero-aktionen .start-karten a.start-glas{border-color:#122E4D!important}
}
@media (min-width:520px) and (max-width:768px){
  html body #kopf.hero .hero-aktionen .start-karten{grid-template-columns:1fr 1fr;max-width:520px}
}

/* (d) Gman 28.10. 19:49 (ersetzt 19:29): Startseiten-Hero-Karte ab 769 px UNTEN links, hell, Blur nur auf der Karte (Foto scharf).
   Nur Startseite (body hat #leiste). Loest die Doppelregeln top:56px (css/v81-2810.css Z. 77) und bottom:44px (css/helle-hero-2810.css) fuer die Startseite auf. */
@media (min-width:769px){
  html body:has(#leiste) #kopf.hero .hero-inhalt{top:auto!important;bottom:48px!important;max-width:620px!important;padding:32px 36px!important;background:rgba(246,241,232,.38)!important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  html body #kopf.hero:not(.hero-plan) .hero-inhalt{background:rgba(246,241,232,.38)!important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  html body #kopf.hero.hero-fw .hero-inhalt{background:rgba(246,241,232,.5)!important}
  html body:has(#leiste) #kopf.hero .hero-inhalt .claim-zeile{font-size:clamp(42px,4.2vw,60px)!important;line-height:1.04!important}
}
/* genau 768 px zaehlt als Handy: Foto oben frei, Text darunter, kein Overlay (Regeln wie css/helle-hero-2810.css bis 767 px) */
@media (width:768px){
  html body:has(#leiste) #kopf.hero{display:block!important;min-height:0!important;height:auto!important;background:#F6F1E8!important}
  html body:has(#leiste) #kopf.hero .hero-bild{position:relative!important;inset:auto!important;width:100%!important;height:min(118vw,560px)!important}
  html body:has(#leiste) #kopf.hero .hero-inhalt{position:relative!important;left:auto!important;bottom:auto!important;top:auto!important;max-width:none!important;margin:0!important;padding:24px 24px 32px!important;border-radius:0;box-shadow:none;background:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Teil B3 (/poolbau/): Abschluss-Buttons auf Navy; .btn-hell stand dort nicht im Bestand (nur css/paket.*.css) */
.abschluss .abschluss-aktionen .btn{min-height:48px}
.abschluss .btn.btn-hell{border:1.5px solid rgba(246,241,232,.85);color:#F6F1E8;background:transparent}
.abschluss .btn.btn-hell:hover{background:rgba(246,241,232,.12)}

/* Teil B5 (/poolbau/): Konfigurator-Mitlaeufer #leiste wie auf der Startseite (Markup, js/leiste.js, js/v83c-2810.js); Basisregeln aus index.html Z. 588 bis 593 (dort inline) */
.leiste{position:fixed;z-index:40;left:50%;bottom:16px;transform:translate(-50%,140%);display:flex;align-items:center;gap:16px;padding:8px 8px 8px 20px;background:rgba(18,46,77,.96);color:#fff;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .35s ease;font-size:15px}
.leiste.an{transform:translate(-50%,0)}
.leiste .btn{min-height:44px;white-space:nowrap}
@media (max-width:767px){.leiste{left:12px;right:12px;bottom:12px;transform:translateY(140%);justify-content:space-between;padding:6px 6px 6px 16px}.leiste.an{transform:translateY(0)}.leiste-text{font-size:14px}.leiste .btn{padding-left:14px;padding-right:14px;font-size:14px}}
@media (max-width:359px){.leiste-text{display:none}.leiste{justify-content:center}}
@media (prefers-reduced-motion:reduce){.leiste{transition:none}}
/* Teil B8 (/poolbau/): Claim-Schrift wie Startseite, Karte sitzt dort schon unten links */
@media (min-width:769px){html body:has(#konfigurator.abschluss) #kopf.hero .hero-claim{font-size:clamp(42px,4.2vw,60px)!important;line-height:1.04!important}}
/* Teil B7 (/poolbau/ #optionen): 5 Abdeckungs-Karten ab 768 px als 3+2 (zweite Reihe mittig), je Karte gleich breit; vorher ab 1201 px 5 Spalten zu 214 px.
   Ueberschreibt #rollschutz-css (Inline, neuer-pool/index.html) und die 3-Spalten-Regel bis 1200 px. */
@media (min-width:768px){
  html body .kacheln-3.abdeckungen.vier.fuenf{grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
  html body .kacheln-3.abdeckungen.vier.fuenf>*{grid-column:span 2}
  html body .kacheln-3.abdeckungen.vier.fuenf>*:nth-child(4){grid-column:2 / span 2}
  html body .kacheln-3.abdeckungen.vier.fuenf>*:nth-child(5){grid-column:4 / span 2}
}
/* Teil B1/B8 (/poolbau/): nach Einbindung von css/v81-2810.css bleibt die Hero-Karte dort unten links (v81 Z. 77 setzt sonst top:56px) */
@media (min-width:769px){html body:has(#konfigurator.abschluss) #kopf.hero .hero-inhalt{top:auto!important;bottom:44px!important}}
/* Teil B1 (/poolbau/ #wuensche, bis 767 px): nach Einbindung von css/helle-karte-2810.css liegt die Ueberschrift 12.7 px unter dem Foto (Gate v37 verlangt 16 px) */
@media (max-width:767px){html body #wuensche .weg-tafel .tafel-inhalt{padding:10px 20px 20px!important}html body #wuensche .weg-tafel .tafel-inhalt .t3{margin:0 0 6px!important;text-shadow:none!important}}
/* Teil B1: Wunsch-Kacheln /poolbau/ bis 1023 px: Reihenhoehe folgt dem Inhalt, damit Text unter dem Foto sichtbar bleibt (helle-karte) */
@media (max-width:1023px){html body #wuensche .tafeln{height:auto!important;min-height:0!important;grid-template-rows:none!important;grid-auto-rows:auto!important}html body #wuensche .weg-tafel.wunsch{height:max-content!important;min-height:max-content!important;align-self:start}}
/* WhatsApp mobil: nur das Zeichen, ohne Rahmen und ohne Wort (Gman 28.10. 20:50) */
@media (max-width:767px){
html body .menue .menue-innen a.menue-tel{border:0!important;background:transparent!important;box-shadow:none!important;width:44px;min-width:44px;padding:0!important;margin-left:auto}
html body .menue .menue-innen a.menue-tel :is(.mt-kurz,.mt-nr){display:none!important}
html body .menue .menue-innen a.menue-tel svg{width:28px;height:28px;color:#25D366}
html body #leiste a.leiste-tel{flex:0 0 52px;width:52px;border:0!important;background:transparent!important;padding:0!important;color:#25D366}
html body #leiste a.leiste-tel span{display:none!important}
html body #leiste a.leiste-tel svg{width:32px;height:32px;fill:currentColor}
}

.weg10 .w10-mehr{display:none}
@media (max-width:767px){
  html body .weg10:not(.w10-offen) .w10-st:nth-child(n+4){display:none}
  html body .weg10 .w10-mehr{display:flex;justify-content:center;margin:24px 0 0}
  html body .weg10.w10-offen .w10-mehr{display:none}
}

/* 28.10. 21:55 Handy-Startseite kuerzer (Gman t6660u): weniger Leerraum zwischen den Abschnitten, Bilder der drei Wege flacher */
@media (max-width:767px){
  html body main section#wege,html body main section#projekte,html body main section#ablauf,html body main section#ueber-uns,html body main section#presse-start,html body main section#fragen-start,html body main section#google-stimmen{padding-top:40px!important}
  html body #wege .weg-tafel .tafel-bild{aspect-ratio:16/10!important}
}
@media (max-width:767px){html body #projekte .folge-kz>div:not(.kz-bauart){display:none!important}html body #projekte .folge-kz>div.kz-bauart{display:flex!important}}
.wisch-hint-o{display:none}
@media (max-width:767px){
  html body #optionen .wisch-hint-o{display:block!important;margin:0 0 10px;font-size:14px;font-weight:600;color:#122E4D}
  html body #optionen .kacheln-3{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;gap:12px!important;margin-left:-24px!important;margin-right:-24px!important;padding:0 24px 14px!important;scroll-padding:0 24px;-webkit-overflow-scrolling:touch;grid-template-columns:none!important}
  html body #optionen .kacheln-3>.kachel{flex:0 0 78%!important;max-width:78%!important;scroll-snap-align:start;margin:0!important}
  html body #optionen .kacheln-3>.kachel .text{font-size:15px}
}
@media (max-width:767px){
  /* Bauarten: Name und Satz immer sichtbar unter dem Bild auf heller Flaeche */
  html body #bauarten .tafeln{height:auto!important;gap:14px!important}
  html body #bauarten .weg-tafel{aspect-ratio:auto!important;height:auto!important;min-height:0!important;overflow:hidden!important;display:block!important;background:#F6F1E8!important;border-radius:12px!important;box-shadow:0 1px 8px rgba(18,46,77,.12)}
  html body #bauarten .weg-tafel .tafel-bild{position:relative!important;aspect-ratio:16/10!important;height:auto!important}
  html body #bauarten .weg-tafel .tafel-verlauf{display:none!important}
  html body #bauarten .weg-tafel .tafel-inhalt{position:static!important;display:block!important;padding:14px 18px 18px!important}
  html body #bauarten .weg-tafel .t3{color:#122E4D!important;font-size:22px!important;margin:0 0 4px!important;white-space:normal!important;text-shadow:none!important}
  html body #bauarten .weg-tafel .tafel-satz{display:block!important;opacity:1!important;color:#122E4D!important;font-size:15px!important;margin:0 0 6px!important;text-shadow:none!important}
  html body #bauarten .weg-tafel .tafel-kenn{display:block!important;color:#A8401C!important;font-size:14px;font-weight:600;margin:0!important;text-shadow:none!important}
  /* Wuensche: kompakte Zeilen, Bild links, gleiche Hoehe */
  html body #wuensche .tafeln{display:flex!important;flex-direction:column!important;gap:10px!important;height:auto!important}
  html body #wuensche .weg-tafel.wunsch{display:flex!important;flex-direction:row!important;align-items:stretch;aspect-ratio:auto!important;height:auto!important;min-height:0!important;width:100%!important;text-align:left;background:#F6F1E8!important;border-radius:12px!important;overflow:hidden!important;position:relative}
  html body #wuensche .weg-tafel.wunsch .tafel-bild{position:relative!important;flex:0 0 38%!important;width:38%!important;aspect-ratio:auto!important;min-height:92px;height:auto!important}
  html body #wuensche .weg-tafel.wunsch .tafel-bild img,html body #wuensche .weg-tafel.wunsch .tafel-bild picture{width:100%!important;height:100%!important;object-fit:cover}
  html body #wuensche .weg-tafel.wunsch .tafel-verlauf{display:none!important}
  html body #wuensche .weg-tafel.wunsch .tafel-inhalt{position:static!important;flex:1 1 auto;display:flex!important;flex-direction:column;justify-content:center;padding:10px 44px 10px 14px!important}
  html body #wuensche .weg-tafel.wunsch .t3{font-size:18px!important;margin:0 0 2px!important;color:#122E4D!important;white-space:normal!important}
  html body #wuensche .weg-tafel.wunsch .tafel-satz{display:none!important}
  html body #wuensche .weg-tafel.wunsch .tafel-link{color:#122E4D!important;margin:0!important;font-size:14px}
  html body #wuensche .weg-tafel.wunsch .wunsch-haken{top:50%!important;right:12px!important;transform:translateY(-50%)}
}
@media (min-width:768px){html body #wuensche .weg-tafel.wunsch .t3,html body #wuensche .weg-tafel.wunsch .tafel-inhalt .t3{white-space:normal!important;overflow-wrap:break-word;font-size:clamp(20px,1.9vw,26px)!important;line-height:1.15!important}}
@media (min-width:900px){html body .menue .menue-nav a.tl.aktiv{position:relative;border-bottom-color:transparent!important}html body .menue .menue-nav a.tl.aktiv::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;background:#122E4D}}