/* v77-2810 (v2510-77, Mi 28.10.2026): NUR Startseite (nur index.html bindet diese Datei ein). kopf-fuss.css / start.css bleiben unberuehrt (gesperrt).
   Nur Palettenfarben: Navy #122E4D, Terrakotta #A3421D (nur Linien), Creme #F6F1E8. Keine neuen Farben, keine Preise.
   1. Zahlenleiste unter dem Hero (drei Bloecke, Gman 28.10. 10:31). */
.zahlenband{background:#122E4D;color:#F6F1E8;border-top:3px solid #A3421D}
.zahlenband .zb-liste{list-style:none;margin:0 auto;padding:28px var(--rand,24px);display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.zahlenband .zb-liste li{display:flex;flex-direction:column;gap:6px;padding:0 28px;border-left:1px solid rgba(246,241,232,.22)}
.zahlenband .zb-liste li:first-child{padding-left:0;border-left:0}
.zahlenband .zb-liste li:last-child{padding-right:0}
.zahlenband .zb-zahl{font-family:"Satoshi",sans-serif;font-weight:600;font-size:26px;line-height:1.15;letter-spacing:-.01em;color:#F6F1E8}
.zahlenband .zb-text{font-size:16px;line-height:1.4;color:rgba(246,241,232,.88)}
@media (max-width:1023px){
.zahlenband .zb-liste li{padding:0 16px}
.zahlenband .zb-zahl{font-size:22px}
.zahlenband .zb-text{font-size:15px}
}
@media (max-width:767px){
.zahlenband .zb-liste{grid-template-columns:1fr;padding-top:8px;padding-bottom:8px}
.zahlenband .zb-liste li{padding:16px 0;border-left:0;border-top:1px solid rgba(246,241,232,.22)}
.zahlenband .zb-liste li:first-child{border-top:0}
.zahlenband .zb-zahl{font-size:22px}
}

/* 1b. Vertrauenszeile mobil (GB-Abnahme v76): kein Zeilenanfang mit «·»; Standorte stehen mobil in einer eigenen Zeile ohne Punkt.
   Mobil: Link (Sterne + Bewertung) darf umbrechen, aber nur vor «(75 Bewertungen)»; ab 768 px unveraendert (eine Zeile mit Punkt). */
body .hero-sterne.hero-vertrauen .vz-punkt{display:inline}
@media (max-width:767px){
body .hero-sterne.hero-vertrauen .vz-punkt{display:none}
body .hero-sterne.hero-vertrauen .vz-ort{display:block;margin-top:2px}
}

/* 3. Wege-Karten auf Tablet (GB-Abnahme v76): ab 768 bis 1023 px und bei Touch kein Aufklappen per Hover (index.html Inline-CSS nun erst ab 1024 px mit Maus),
   Saetze immer sichtbar, Titel duerfen umbrechen (Karten sind dort nur ca. 215 px breit). */
@media (min-width:768px) and (max-width:1023px){
html body #wege .tafel-inhalt{left:20px;right:20px;bottom:24px}
html body #wege .tafel-inhalt .t3,html body #wege .tafel-link{white-space:normal}
html body #wege .tafel-satz{font-size:15px;max-width:none}
html body #wege .tafeln .weg-tafel:hover,html body #wege .tafeln:hover .weg-tafel{flex-grow:1;transform:none;box-shadow:none}
}

/* 4. Fuss ab 768 px (GB-Abnahme v76): mehr Luft um den Block «Besichtigung anfragen» (vorher feste Hoehe 81 px, 8 px oben, 24 px unten); mobil unveraendert (v76-2810.css). */
@media (min-width:768px){
body .fuss .fuss-schluss{height:auto;padding:36px 0 36px}
body .fuss .fuss-schluss + .fuss-grid{padding-top:12px}
}

/* 5. AGB-Link (und Impressum/Datenschutz daneben) in der Fusszeile: Tap-Ziel mind. 44 x 44 px (vorher AGB 30 x 49 px). */
body .fuss .fuss-unten a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
@media (min-width:768px) and (max-width:1023px){
body .fuss .fuss-schluss .fuss-schluss-satz{margin:14px 0 0;text-align:center;max-width:none;flex-basis:100%}
}

/* 6. Hero Video <-> Bild 1. 13.11.2026 (Gman: Hero nie leer): Bild 1 bleibt sichtbar.
   Das Video blendet darueber ein, ohne vorher das Bild auszublenden. */
@media (min-width:768px){
html body .hero .hero-bild video.hero-video{transition:opacity 240ms linear}
html body .hero .hero-bild video.hero-video.an{transition:opacity 240ms linear}
html body .hero .hero-bild picture.hero-slide-1.on{opacity:1;transition:none}
html body .hero.video-zeigt .hero-bild picture.hero-slide-1.on{opacity:1;transition:none}
}
@media (prefers-reduced-motion:reduce){html body .hero .hero-bild picture.hero-slide-1.on{transition:none!important}}

/* 7. «Unsere Stärke ist der ganze Weg»: 10 Stationen, Variante A (Scroll-Linie), Konzept unser_weg_2810/KONZEPT.md.
   <ol>, kein Sticky, kein Pinning. Nur transform und opacity im Scroll (Compositor). Palette: Navy #122E4D, Slate #55606E, Creme #F6F1E8,
   Terrakotta #C65A30 (nur Linie) und #A3421D (Punkte). Ohne Scroll-Timeline und bei reduzierter Bewegung steht alles statisch sichtbar. */
.weg10{background:#F6F1E8;padding-top:var(--sektion,96px);padding-bottom:var(--sektion,96px)}
.weg10 .w10-wrap{position:relative;margin-top:56px}
.weg10 .w10-linie{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(18,46,77,.16);overflow:hidden}
.weg10 .w10-linie i{display:block;width:100%;height:100%;background:#C65A30;transform-origin:50% 0;transform:scaleY(1)}
.weg10 .w10-liste{list-style:none;margin:0;padding:0;position:relative}
.weg10 .w10-st{position:relative;display:grid;grid-template-columns:1fr 64px 1fr;margin:0 0 56px}
.weg10 .w10-st:last-child{margin-bottom:0}
.weg10 .w10-karte{grid-row:1;max-width:520px;color:#122E4D}
.weg10 .w10-l .w10-karte{grid-column:1;justify-self:end;padding-right:16px}
.weg10 .w10-r .w10-karte{grid-column:3;justify-self:start;padding-left:16px}
.weg10 .w10-punkt{grid-row:1;grid-column:2;justify-self:center;align-self:start;margin-top:8px;width:18px;height:18px;border-radius:50%;box-sizing:border-box;background:#F6F1E8;border:2px solid #55606E;position:relative;z-index:1}
.weg10 .w10-medium{margin:0 0 16px}
.weg10 .w10-medium picture,.weg10 .w10-medium img{display:block;width:100%;height:auto}
.weg10 .w10-medium img{border-radius:4px;background:#122E4D;aspect-ratio:4/3;object-fit:cover}
.weg10 .w10-medium figcaption{margin-top:6px;font-size:13px;line-height:1.4;color:#55606E}
.weg10 .w10-vier{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.weg10 .w10-vier img{aspect-ratio:4/3}
.weg10 .w10-platzhalter{aspect-ratio:4/3;display:grid;place-items:center;box-sizing:border-box;border:2px dashed #55606E;border-radius:4px;background:rgba(18,46,77,.05);padding:16px;text-align:center}
.weg10 .w10-platzhalter span{font-size:14px;line-height:1.4;color:#55606E;font-weight:600}
.weg10 .w10-nr{margin:0 0 4px;font-family:"Satoshi",sans-serif;font-weight:600;font-size:15px;letter-spacing:.06em;color:#55606E}
.weg10 .w10-nr span{font-weight:500}
.weg10 .w10-titel{margin:0 0 8px;font-family:"Satoshi",sans-serif;font-weight:600;font-size:26px;line-height:1.2;color:#122E4D}
.weg10 .w10-text{margin:0;font-size:17px;line-height:1.5;color:#122E4D;max-width:46ch;text-wrap:pretty}
@media (max-width:767px){
.weg10{padding-top:64px;padding-bottom:64px}
.weg10 .w10-wrap{margin-top:40px}
.weg10 .w10-linie{left:11px;margin-left:-1px}
.weg10 .w10-st{grid-template-columns:24px 1fr;margin-bottom:40px}
.weg10 .w10-l .w10-karte,.weg10 .w10-r .w10-karte{grid-column:2;justify-self:stretch;padding:0 0 0 12px;max-width:none}
.weg10 .w10-punkt{grid-column:1;justify-self:start;margin-top:4px}
.weg10 .w10-titel{font-size:22px}
.weg10 .w10-text{font-size:16px}
}
/* Scroll-Animation nur mit Unterstuetzung und ohne reduzierte Bewegung */
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
@keyframes w10-linie{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes w10-ein{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes w10-pkt{from{background:#F6F1E8;border-color:#55606E}to{background:#A3421D;border-color:#A3421D}}
.weg10 .w10-linie i{transform:scaleY(0)}
.weg10 .w10-karte{animation:w10-ein ease-out both;animation-timeline:view();animation-range:entry 5% entry 45%}
.weg10 .w10-punkt{animation:w10-pkt linear both;animation-timeline:view();animation-range:entry 40% entry 60%}
}
}
@media (prefers-reduced-motion:reduce){.weg10 .w10-linie i{transform:none}}
/* Desktop/Tablet: Karten versetzt (rechte Karte beginnt auf halber Hoehe der linken) statt 10 volle Zeilen. Zeilenabstand 48 px, Ueberlappung 200 px. */
@media (min-width:768px){
.weg10 .w10-st{margin-bottom:48px}
.weg10 .w10-st + .w10-st{margin-top:-200px}
.weg10 .w10-liste{padding-bottom:0}
}
@media (min-width:768px) and (max-width:1023px){
.weg10 .w10-st{grid-template-columns:1fr 48px 1fr}
.weg10 .w10-titel{font-size:22px}
.weg10 .w10-text{font-size:16px}
}

/* 8. Ueber-uns-Teaser: Ansprechpersonen mit markierten Foto-Platzhaltern (v2510-79). Platzhalter bleiben sichtbar markiert, bis echte Fotos vorliegen. */
#ueber-uns .ut-liste{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:24px}
#ueber-uns .ut-karte{margin:0}
#ueber-uns .ut-foto{aspect-ratio:4/5;display:grid;place-items:center;box-sizing:border-box;border:2px dashed #55606E;border-radius:4px;background:rgba(18,46,77,.05);padding:16px;text-align:center}
#ueber-uns .ut-foto span,#ueber-uns .ut-offen{font-size:14px;line-height:1.4;color:#55606E;font-weight:600}
#ueber-uns .ut-name{margin:12px 0 0;font-family:"Satoshi",sans-serif;font-weight:600;font-size:20px;line-height:1.2;color:#122E4D}
#ueber-uns .ut-rolle{margin:2px 0 0;font-size:16px;line-height:1.4;color:#55606E}
@media (max-width:767px){#ueber-uns .ut-liste{margin-top:32px;gap:16px}}

/* 9. «Menue»-Knopf (v2510-80, GB-Abnahme v79): Tap-Ziel mind. 44 x 44 px (vorher 40 x 44 bei 768 bis 830 px). */
.menue-mobil{min-width:44px;min-height:44px;box-sizing:border-box}

/* 10. Zahlenleiste 768 bis 1023 px (v2510-80): Zahl immer einzeilig, Texte ausgewogen umbrochen (kein 2+2 im mittleren Block). */
@media (min-width:768px) and (max-width:1023px){
.zahlenband .zb-liste{grid-template-columns:1.25fr 1.5fr 1fr}
.zahlenband .zb-zahl{white-space:nowrap}
.zahlenband .zb-text{text-wrap:balance}
.zahlenband .zb-liste li{padding:0 12px}.zahlenband .zb-liste li:first-child{padding-left:0}.zahlenband .zb-liste li:last-child{padding-right:0}
}
@media (min-width:1024px){.zahlenband .zb-liste{grid-template-columns:auto auto auto;justify-content:space-between}.zahlenband .zb-text{white-space:nowrap;text-wrap:nowrap}}