/* ===== Compass-Übersicht + Familienseite: Ergänzungen zu start.css / seite.css (B unverändert) ===== */

/* Kopfbild */
.hero-label{margin-bottom:16px}
.hero-unter{max-width:620px}
.js .hero .hero-label{opacity:0;transition:opacity 600ms var(--kurve)}
.js .hero.geladen .hero-label{opacity:1;transition-delay:60ms}

/* Fakten unter dem Kopfbild, ruhig */
.fakten{border-bottom:1px solid var(--linie)}
.fakten-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.fakt{padding:40px 32px 40px 0;border-right:1px solid var(--linie)}
.fakt+.fakt{padding-left:32px}
.fakt:last-child{border-right:0}
.fakt-gross{font-family:"Satoshi",sans-serif;font-weight:700;font-size:32px;line-height:1.1;color:var(--navy);letter-spacing:-.01em}
.fakt-klein{margin-top:8px;font-size:15px;line-height:1.5;color:var(--schiefer);max-width:340px}

/* Finde dein Mass */
.sektion-mass{padding-top:96px}
.cf{margin-top:40px}
.cf-chips{display:flex;flex-wrap:wrap;gap:8px}
.cf-chip,.cf-opt,.g-tab{font-family:"Satoshi",sans-serif;font-weight:600;font-size:15px;line-height:1;color:var(--navy);background:transparent;
  border:1.5px solid var(--navy);border-radius:999px;height:44px;padding:0 20px;cursor:pointer;
  transition:background-color var(--t-hover) var(--kurve),color var(--t-hover) var(--kurve),border-color var(--t-hover) var(--kurve)}
.cf-chip:hover,.cf-opt:hover,.g-tab:hover{background:rgba(18,46,77,.06)}
.cf-chip[aria-pressed="true"],.cf-opt[aria-pressed="true"],.g-tab[aria-pressed="true"],.g-tab[aria-selected="true"]{background:var(--navy);color:var(--creme)}
.cf-chip:focus-visible,.cf-opt:focus-visible,.g-tab:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.cf-filter{display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px;margin-top:24px}
.cf-seg{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cf-seg-titel{font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--schiefer);margin-right:8px}
.cf-opt{height:36px;padding:0 14px;font-size:14px;border-color:var(--linie)}
.cf-opt[aria-pressed="true"]{border-color:var(--navy)}
.cf-ergebnis{margin-top:32px;font-family:"Satoshi",sans-serif;font-weight:700;font-size:22px;color:var(--navy)}
.cf-hinweis{margin-top:6px;max-width:680px}

/* Familien-Raster */
.fam-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--gap);margin-top:40px}
.fam[hidden]{display:none}
.fam-kachel{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--navy);color:var(--creme);text-decoration:none}
.fam-bild,.fam-bild picture,.fam-bild img{position:absolute;inset:0;width:100%;height:100%}
.fam-bild img{object-fit:cover;transform:scale(1.04);transition:transform 1200ms var(--kurve)}
.fam-verlauf{position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,46,77,.9) 0%,rgba(18,46,77,.62) 36%,rgba(18,46,77,.12) 66%,rgba(18,46,77,0) 80%);transition:background 800ms var(--kurve)}
.fam-inhalt{position:absolute;left:24px;right:24px;bottom:20px}
.fam-name{font-family:"Satoshi",sans-serif;font-weight:700;font-size:26px;line-height:1.1;color:var(--creme);letter-spacing:-.01em}
.fam-alt{display:block;font-weight:500;font-size:13px;letter-spacing:.02em;color:rgba(246,241,232,.8);margin-top:4px}
.fam-mass{margin-top:6px;font-size:14px;color:rgba(246,241,232,.9);font-variant-numeric:tabular-nums}
.fam-satz,.fam-chips{max-height:0;opacity:0;overflow:hidden;transition:opacity 600ms var(--kurve),max-height 600ms var(--kurve)}
.fam-satz{font-size:15px;line-height:1.45;color:rgba(246,241,232,.95);text-wrap:pretty}
.fam-chips{list-style:none;display:flex;flex-wrap:wrap;gap:4px 6px}
.fam-chips li{font-size:12px;line-height:1;padding:5px 9px;border:1px solid rgba(246,241,232,.55);border-radius:999px;color:var(--creme)}
.fam-badge{position:absolute;top:16px;left:16px;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:var(--creme);color:var(--navy);padding:6px 10px;border-radius:3px}
.fam-planbild{position:absolute;top:16px;right:16px;font-size:12px;background:rgba(18,46,77,.7);color:var(--creme);padding:4px 8px;border-radius:3px}
@media (hover:hover) and (min-width:768px){
  .fam-kachel:hover .fam-bild img,.fam-kachel:focus-visible .fam-bild img{transform:scale(1)}
  .fam-kachel:hover .fam-verlauf,.fam-kachel:focus-visible .fam-verlauf{background:linear-gradient(0deg,rgba(18,46,77,.9) 0%,rgba(18,46,77,.6) 50%,rgba(18,46,77,.1) 85%)}
  .fam-kachel:hover .fam-satz,.fam-kachel:hover .fam-chips,.fam-kachel:focus-visible .fam-satz,.fam-kachel:focus-visible .fam-chips{max-height:120px;opacity:1;transition:opacity 800ms var(--kurve) 380ms,max-height 600ms var(--kurve)}
  .fam-kachel:hover .fam-satz{margin-top:10px}
  .fam-kachel:hover .fam-chips{margin-top:10px}
}
.fam-kachel:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.fam-masse{border-bottom:1px solid var(--linie)}
.fam-masse summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-family:"Satoshi",sans-serif;font-weight:600;font-size:15px;color:var(--navy)}
.fam-masse summary::-webkit-details-marker{display:none}
.fam-plus{position:relative;width:12px;height:12px}
.fam-plus::before,.fam-plus::after{content:"";position:absolute;left:0;top:5px;width:12px;height:1.5px;background:var(--navy)}
.fam-plus::after{transform:rotate(90deg);transition:transform 300ms var(--kurve)}
.fam-masse[open] .fam-plus::after{transform:rotate(0)}
.fam-tabelle{padding-bottom:20px;overflow-x:auto}
.fam-tabelle table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.fam-tabelle th,.fam-tabelle td{text-align:left;vertical-align:top;padding:8px 10px 8px 0;border-bottom:1px solid var(--linie)}
.fam-tabelle thead th{font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--schiefer)}
.fam-tabelle tbody th{font-family:"Satoshi",sans-serif;font-weight:700;color:var(--navy)}
.fam-hinweis{display:block;font-weight:400;font-family:"Figtree",sans-serif;font-size:12px;color:var(--schiefer)}
.fam-hinweis-zeile{margin-top:10px}
.fam-link{margin-top:14px}
.fam-tipp{background:var(--navy);border-radius:4px;color:var(--creme);display:flex;align-items:flex-end;aspect-ratio:4/3;align-self:start}
.fam-tipp-innen{padding:32px}
.fam-tipp .t3{color:var(--creme)}
.fam-tipp .text{color:rgba(246,241,232,.9);margin:10px 0 16px;font-size:16px}
.fam-mehr{display:none;margin-top:32px}

/* Warum Compass */
.warum-kacheln{margin-top:48px}
.warum-gut{margin-top:48px;max-width:780px}
.technik-detail{margin-top:20px}
.technik-liste{margin-top:20px;max-width:820px;list-style:none;border-top:1px solid var(--linie)}
.technik-liste li{padding:14px 0;border-bottom:1px solid var(--linie);font-size:16px;line-height:1.55}
.technik-liste strong{font-weight:600;color:var(--navy)}

/* Familienseite */
.sektion-besonder{padding-top:calc(var(--sektion) / 2)}
.besonder-hinweis{margin-top:24px}
.kacheln-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:48px}
.kacheln-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);margin-top:24px}
.og-titel{margin-top:48px;padding-bottom:10px;border-bottom:1px solid var(--linie);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--schiefer)}
.option-klein .bild-rahmen{margin-bottom:14px}
.oc-titel{font-family:"Satoshi",sans-serif;font-weight:700;font-size:18px;line-height:1.25;color:var(--navy)}
.oc-text{margin-top:6px;font-size:14px;line-height:1.5;color:var(--text)}
.og-fuss{margin-top:40px}

/* Grössen */
.g-tabs{display:none;gap:8px;margin-top:32px}
.g-tab{flex:1;border-radius:6px}
.gk-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:48px}
.gk{background:#fff;border:1px solid var(--linie);border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
.gk-bild{aspect-ratio:16/10}
.gk-bild img{width:100%;height:100%;object-fit:cover}
.gk-text{padding:24px 24px 28px;display:flex;flex-direction:column;align-items:flex-start;flex:1}
.gk-liste{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:16px 0;width:100%;font-size:15px;font-variant-numeric:tabular-nums}
.gk-liste dt{color:var(--schiefer)}
.gk-liste dd{text-align:right;font-weight:600;color:var(--navy)}
.gk-best{display:block;font-weight:400;font-size:12px;color:var(--schiefer)}
.gk-hinweis{margin-bottom:14px}
.gk-text .tl{margin-top:auto}
.gk-text .tl+.gk-hinweis{margin-top:8px;margin-bottom:0}
.gk-fuss{margin-top:24px;max-width:900px}

/* Aufbau: Becken-Zeichnung (Entwurf) */
.sektion-aufbau{padding-top:calc(var(--sektion) / 2)}
.becken-tabs{display:flex;max-width:360px}
.becken{margin-top:24px;background:var(--creme)}
.becken-flaeche{aspect-ratio:1000/640;border:1px solid var(--linie);border-radius:4px;background:#FBF8F2}
.becken-svg{display:block;width:100%;height:100%}
.becken-notiz{margin-top:10px}
.becken-svg .k-linie{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.becken-svg .k-fein{fill:none;stroke:var(--navy);stroke-width:1.3;stroke-dasharray:6 5;opacity:.75}
.becken-svg .k-stufe{fill:none;stroke:var(--navy);stroke-width:1.5;stroke-linecap:round}
.becken-svg .k-wasser{fill:#BFDCEB;opacity:.75}
.becken-svg .k-welle{fill:none;stroke:var(--navy);stroke-width:1.4;opacity:.6}
.becken-svg .k-schacht{fill:rgba(18,46,77,.07);stroke:var(--navy);stroke-width:1.5}
.becken-svg .k-mass{fill:none;stroke:var(--schiefer);stroke-width:1}
.becken-svg .k-label{font-family:"Figtree",sans-serif;font-size:15px;fill:var(--schiefer)}
.becken-svg .k-label-b{font-family:"Satoshi",sans-serif;font-weight:700;font-size:17px;fill:var(--navy)}
.becken-svg .k-zahl{font-family:"Satoshi",sans-serif;font-weight:700;font-size:18px;fill:var(--navy);font-variant-numeric:tabular-nums}
.becken-svg .k-titel{font-weight:600;font-size:12px;letter-spacing:.14em;fill:var(--schiefer)}
.becken-svg .k-leit{fill:none;stroke:var(--schiefer);stroke-width:1;opacity:.7}

/* Farben */
.fw{display:grid;grid-template-columns:7fr 5fr;gap:48px;margin-top:48px;align-items:start}
.fw-bild .bild-rahmen{border-radius:4px;background:var(--sand)}
.fw-img{width:100%;height:100%;object-fit:cover;transition:opacity 400ms var(--kurve)}
.fw-img.wechsel{opacity:0}
.fw-bild.muster .fw-img{object-fit:contain;background:#fff}
.fw-bild figcaption{margin-top:14px}
.fw-name{display:block;font-family:"Satoshi",sans-serif;font-weight:700;font-size:20px;color:var(--navy)}
.fw-gruppe+.fw-gruppe{margin-top:28px}
.fw-titel{font-family:"Satoshi",sans-serif;font-weight:700;font-size:18px;color:var(--navy)}
.fw-reihe{display:flex;flex-wrap:wrap;gap:12px 8px;margin-top:12px}
.fw-muster{display:flex;flex-direction:column;align-items:center;gap:6px;width:72px;padding:0;background:none;border:0;cursor:pointer;font-size:12px;line-height:1.25;color:var(--text);text-align:center}
.fw-muster img{width:48px;height:48px;border-radius:50%;border:1px solid rgba(18,46,77,.18);transition:box-shadow var(--t-hover) var(--kurve)}
.fw-muster[aria-pressed="true"] img{box-shadow:0 0 0 3px var(--sand),0 0 0 5px var(--navy)}
.fw-muster:hover img{box-shadow:0 0 0 3px var(--sand),0 0 0 4px rgba(18,46,77,.5)}
.fw-muster[aria-pressed="true"]:hover img{box-shadow:0 0 0 3px var(--sand),0 0 0 5px var(--navy)}
.fw-muster:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:4px}
.fw-fuss{margin-top:28px}

/* Weitere Projekte */
.weitere{padding-top:var(--block);padding-bottom:calc(var(--sektion) / 2)}
.weitere-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,400px));gap:var(--gap);margin-top:24px}
.weitere-reihe .bild-rahmen{margin-bottom:14px}
.weitere-ort{font-family:"Satoshi",sans-serif;font-weight:700;font-size:20px;color:var(--navy)}
.weitere-text{margin-top:40px}
.weitere .btn{margin-top:24px}

/* Tablet */
@media (max-width:1023px){
  .fam-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kacheln-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gk-reihe{grid-template-columns:1fr 1fr}
  .fw{grid-template-columns:1fr}
}
/* Handy: ruhig */
@media (max-width:767px){
  .fakten-reihe{grid-template-columns:1fr}
  .fakt,.fakt+.fakt{padding:20px 0;border-right:0;border-bottom:1px solid var(--linie)}
  .fakt:last-child{border-bottom:0}
  .fakt-gross{font-size:24px}
  .sektion-mass{padding-top:64px}
  .cf-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--rand) * -1);padding:2px var(--rand) 6px;scrollbar-width:none}
  .cf-chips::-webkit-scrollbar{display:none}
  .cf-chip{flex:none;height:40px;padding:0 16px;font-size:14px}
  .cf-filter{gap:12px}
  .cf-seg-titel{width:100%;margin:0 0 2px}
  .cf-opt{height:34px;padding:0 12px;font-size:13px}
  .cf-ergebnis{font-size:19px;margin-top:24px}
  .fam-raster{grid-template-columns:1fr 1fr;gap:20px 12px;margin-top:28px}
  .fam-inhalt{left:12px;right:12px;bottom:10px}
  .fam-name{font-size:17px}
  .fam-alt{font-size:11px}
  .fam-mass{font-size:12px;margin-top:2px}
  .fam-badge{top:8px;left:8px;font-size:9px;padding:4px 6px}
  .fam-planbild{display:none}
  .fam-masse summary{padding:12px 0;font-size:14px}
  .fam-tabelle table{font-size:12.5px}
  .fam-tabelle thead th{font-size:10px;letter-spacing:.06em}
  .js .fam-raster:not(.alle):not(.gefiltert) .fam[data-mehr]{display:none}
  .js .fam-mehr{display:block}
  .js .fam-raster.alle ~ .fam-mehr,.js .fam-raster.gefiltert ~ .fam-mehr{display:none}
  .fam-tipp{grid-column:1/-1;aspect-ratio:auto}
  .fam-tipp-innen{padding:24px}
  .fam[open-wide],.fam:has(.fam-masse[open]){grid-column:1/-1}
  .kacheln-2{grid-template-columns:1fr;gap:40px}
  .kacheln-5{grid-template-columns:1fr 1fr;gap:24px 12px}
  .oc-titel{font-size:16px}
  .oc-text{font-size:13px}
  .g-tabs{display:flex}
  .becken-tabs{max-width:none}
  .becken-flaeche{aspect-ratio:520/820}
  .gk-reihe{grid-template-columns:1fr;margin-top:16px}
  .js .gk:not(.aktiv){display:none}
  .fw{gap:24px;margin-top:32px}
  .fw-muster{width:64px;font-size:11px}
  .weitere-reihe{grid-template-columns:1fr 1fr;gap:12px}
  .weitere-ort{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .fam-bild img,.fam-verlauf,.fam-satz,.fam-chips,.fw-img{transition:none}
  .fam-bild img{transform:none}
}
.fam{align-self:start}

/* Besonderheiten = Zeichnung (sticky) + Punkte aus Daten */
.bp{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;margin-top:48px;align-items:start}
.bp-zeichnung{position:sticky;top:96px}
.bp .becken{margin-top:16px}
.bp-punkte{list-style:none;padding:8vh 0 20vh}
.bp-punkt{min-height:46vh;display:flex;flex-direction:column;justify-content:center}
.bp-punkt.ohne .bp-nr{display:none}
.bp-punkt .t3{display:flex;align-items:center;gap:12px}
.bp-nr{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--creme);font-size:14px;font-weight:700}
.bp-punkt .text{margin-top:10px}
.js .bp.scroll .bp-punkt{opacity:.32;transition:opacity 700ms var(--kurve)}
.js .bp.scroll .bp-punkt.aktiv{opacity:1}
.becken-svg [data-s]{transition:opacity 700ms var(--kurve)}
.becken-svg.fokus [data-s]{opacity:.24!important}
.becken-svg.fokus [data-s="rand"],.becken-svg.fokus [data-s="masse"]{opacity:.55!important}
.becken-svg.fokus [data-s].an{opacity:1!important}
.becken-svg.fokus .an .k-stufe,.becken-svg.fokus .an .k-fein{stroke-width:2.2;opacity:1}
.besonder-hinweis{margin-top:0}
@media (max-width:1023px){.bp{gap:40px;grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
@media (max-width:767px){
  .bp{grid-template-columns:1fr;gap:32px;margin-top:32px}
  .bp-zeichnung{position:static}
  .bp-punkte{padding:0;display:grid;gap:28px}
  .bp-punkt{min-height:0}
  .besonder-hinweis{margin-top:28px}
}
@media (prefers-reduced-motion:reduce){.becken-svg [data-s],.js .bp.scroll .bp-punkt{transition:none}}
.option-klein .bild-rahmen{position:relative}
.oc-badge{position:absolute;top:10px;left:10px;font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;background:var(--creme);color:var(--navy);padding:5px 8px;border-radius:3px;max-width:calc(100% - 20px)}
@media (max-width:767px){.oc-badge{top:6px;left:6px;font-size:9px;letter-spacing:.08em;padding:4px 6px}}

/* ===== Generische Familienseiten (18 Familien, 11.10.2026) ===== */
.gk-plan{background:#ececec}
.gk-plan img{object-fit:contain!important}
.bild-plan{background:#ececec}
.bild-plan img{object-fit:contain!important}
.gk-reihe.gk-eins{grid-template-columns:minmax(0,560px)}
.g-tabs{flex-wrap:wrap}
.g-tab{min-width:52px;white-space:nowrap}
.becken-plan{background:#ececec;border-radius:4px;overflow:hidden}
.becken-plan .plan-bild img{display:block;width:100%;height:auto}
.becken-plan .becken-notiz{padding:10px 14px;background:var(--creme,#F6F1E8)}
.bp-plan .bp-punkt{min-height:0;padding:20px 0}
.hero-plan .hero-bild{background:#ececec}
.hero-plan .hero-img{object-fit:contain!important;object-position:right center}
@media (max-width:767px){.hero-plan .hero-img{object-position:center 20%}}
.g-tabs.viele .g-tab{flex:0 0 auto;min-width:56px}
.hero-plan .hero-img{box-sizing:border-box;padding:120px 5vw 60px 48vw;background:#ececec}
@media (max-width:767px){.hero-plan .hero-img{padding:84px 20px 54vh;object-position:center top}}

/* Filter-Leiste Laptop (Juroren-Runde 11.10.2026) */
.cf-leiste{display:none}
@media (min-width:1024px){
  .cf-leiste{display:block;position:fixed;left:0;right:0;top:var(--menue-h);z-index:150;background:rgba(246,241,232,.97);border-bottom:1px solid var(--linie);
    transform:translateY(-110%);opacity:0;visibility:hidden;transition:transform 450ms var(--kurve),opacity 450ms var(--kurve),visibility 0s 450ms}
  .cf-leiste.an{transform:none;opacity:1;visibility:visible;transition:transform 450ms var(--kurve),opacity 450ms var(--kurve)}
  .cf-leiste-innen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;padding-top:10px;padding-bottom:10px}
  .cf-leiste .cf-chips{gap:6px}
  .cf-leiste .cf-chip{height:32px;padding:0 12px;font-size:13px}
  .cf-leiste .cf-filter{margin-top:0;gap:8px 24px}
  .cf-leiste .cf-seg-titel{font-size:11px;margin-right:4px}
  .cf-leiste .cf-opt{height:30px;padding:0 10px;font-size:13px}
  .cf-leiste .cf-chips{order:1}
  .cf-leiste-zahl{order:2;margin-left:auto;font-family:"Satoshi",sans-serif;font-weight:700;font-size:14px;color:var(--navy)}
  .cf-leiste .cf-filter{order:3;flex-basis:100%}
  .cf-leiste-innen{gap:6px 28px;padding-top:8px;padding-bottom:8px}
}
@media (prefers-reduced-motion:reduce){.cf-leiste,.cf-leiste.an{transition:none}}
/* Besonderheiten am Laptop straffer */
@media (min-width:768px){
  .bp-punkt{min-height:30vh}
  .bp-punkte{padding:4vh 0 12vh}
}
.fam-tipp-links{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px}
.cf-reset[hidden]{display:none!important}