/* ==========================================================================
   www.ordi-life.at · neuer Stil (seit 11.10.2026), ergänzt ordilife.css und seiten.css
   Bildsprache der Instagram-Folien: helle Fotos aus dem Bildkonzept, eine Frage mit einem fetten Wort,
   Pastellton der Station, keine kräftigen Farben, keine Schatten, keine Verläufe, Rundung nur am Türbogen.
   Eigene Klassen hier nie wie in ordilife.css nennen (.fuss war eine Kollision, daher .kfuss).
   ========================================================================== */
/* Schriftfarbe (Clara, 12.10.2026): dunkles Salbei statt fast Schwarz, für Überschriften und Lauftext.
   #3F4E48 hat 8,1:1 auf Papier, 8,8:1 auf Weiß, 7,4:1 auf Nebel. Zum Zurücknehmen nur diese Zeile löschen. */
:root{--ink:var(--sage-dark);--text-2:var(--sage-dark);}
/* Seitenbreite (Clara, 12.10.2026): Inhalt etwas breiter als auf der alten Seite (1120 px), damit Fotos und Tafel Luft haben. */
:root{--w-page:1240px;}
html{overflow-x:clip;}
.in{max-width:var(--w-page);margin:0 auto;padding-inline:clamp(16px,4vw,32px);}
.kz{display:flex;justify-content:space-between;gap:6px 24px;flex-wrap:wrap;font-size:15px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-deep);line-height:1.5;}
.kz span:last-child{color:var(--muted);font-weight:400;letter-spacing:.14em;}

/* Einstieg */
.ein{padding-block:clamp(24px,3vw,40px) clamp(40px,6vw,72px);}
/* Titelfoto von Rand zu Rand über die ganze Bildschirmbreite (Clara, 12.10.2026), Höhe begrenzt; Text darunter bleibt in der Seitenbreite. */
.ein-foto{position:relative;margin-top:18px;margin-inline:calc(50% - 50vw);}
.ein-foto img{display:block;width:100%;height:clamp(380px,64vh,760px);object-fit:cover;object-position:50% 38%;}
/* Sichtbarkeits-Check als schräges Schild an der unteren Ecke des Titelfotos (Clara, 12.10.2026).
   Der Knopf „Erstgespräch vereinbaren“ steht hier nicht mehr, er ist oben im Menü. */
.ein-schild{position:absolute;right:max(clamp(16px,4vw,32px),calc(50vw - var(--w-page) / 2 + clamp(16px,4vw,32px)));bottom:-30px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 28px 15px;background:var(--sage-deep);color:#fff;text-decoration:none;text-align:center;font-size:var(--caps);font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.4;transform:rotate(-4deg);transition:transform var(--t),background var(--t);}
.ein-schild small{font-size:13px;font-weight:400;letter-spacing:.06em;text-transform:none;}
.ein-schild:hover{transform:rotate(-1deg);background:var(--sage-dark);}
.ein-text{padding-top:clamp(26px,3vw,40px);}
.ein-text h1{font-size:clamp(30px,4.2vw,54px);line-height:1.1;margin-top:10px;max-width:19em;}
.ein-text .lead{max-width:34em;margin-top:clamp(18px,2vw,26px);}
.ein-text .link-caps{margin-top:18px;}
/* Menü: Logo ohne Unterzeile, dafür etwas größer */
.nav-marke img{height:27px;}
.ein-fuss{margin-top:clamp(24px,3vw,36px);padding-top:18px;border-top:1.5px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 32px;font-size:17px;color:var(--muted);}
@media (max-width:760px){
  .ein-foto img{height:auto;aspect-ratio:4/4.4;object-position:38% 40%;}
  .ein-schild{right:12px;bottom:-24px;padding:12px 18px 11px;letter-spacing:.14em;}
  .ein-schild small{font-size:12px;}
  .ein-text{padding-top:44px;}
  .nav-marke img{height:23px;}
}

/* Schaufenster */
.sf{background:var(--white);border-block:1px solid var(--line);padding-block:clamp(56px,8vw,104px);}
.sf-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22em);gap:16px clamp(24px,5vw,72px);align-items:end;}
.sf-kopf .section-title{max-width:14em;}
.sf-kopf .section-lead{margin:0;}
@media (max-width:860px){.sf-kopf{grid-template-columns:minmax(0,1fr);}}
.sf a,.checks a{text-decoration:none;color:var(--ink);}
.sf :focus-visible{outline:2px solid var(--mod-ink,var(--sage-deep));outline-offset:3px;}
.k{--mod:var(--sage);--mod-ink:color-mix(in srgb,var(--mod) 70%,var(--ink));--feld:color-mix(in srgb,var(--mod) 15%,var(--white));display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);min-width:0;}
.k.raum{--mod:var(--c-raum);}.k.start{--mod:var(--c-start);}.k.run{--mod:var(--c-run);}.k.grow{--mod:var(--c-grow);}.k.next{--mod:var(--c-next);}
.k .kz{color:var(--mod-ink);}
.k .kz span:last-child{color:var(--muted);}
.name{font-size:17px;font-weight:300;letter-spacing:.16em;text-transform:uppercase;color:var(--mod-ink);line-height:1.3;}
.name b{font-weight:600;}
.k h3{font-weight:300;line-height:1.14;text-wrap:balance;}
.k h3 b{font-weight:600;color:var(--mod-ink);}
.k p.nutzen{color:var(--text-2);line-height:1.55;max-width:30em;}
.k .kfuss{margin-top:auto;padding-top:14px;border-top:1.5px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:var(--caps);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mod-ink);line-height:1.4;}
.k .kfuss i{font-style:normal;font-size:22px;transition:transform .2s ease;}
.k:hover .kfuss i{transform:translateX(5px);}
.k .foto{overflow:hidden;}
.k .foto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s ease;}
.k:hover .foto img{transform:scale(1.03);}
.fokus{display:inline-block;font-size:15px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mod-ink);border:1.5px solid currentColor;padding:4px 12px;line-height:1.3;}

/* Tafel (Clara, 12.10.2026): das Foto läuft am Desktop über die ganze Bildschirmbreite hinter der Liste vorbei,
   die Liste 01 bis 07 liegt rechts als weiße Tafel darauf. Am Handy: Foto oben, Liste darunter. */
.tafel{position:relative;margin-top:clamp(32px,4vw,48px);margin-inline:calc(50% - 50vw);padding-block:clamp(36px,4.5vw,64px);}
.tafel-foto{position:absolute;inset:0;display:block;overflow:hidden;}
.tafel-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:0% 58%;}
.tafel .zeilen{position:relative;width:min(520px,40vw);margin-left:auto;margin-right:max(clamp(16px,4vw,32px),calc(50vw - var(--w-page) / 2 + clamp(16px,4vw,32px)));background:rgba(255,255,255,.96);border:1px solid var(--line);}
.zeilen{display:flex;flex-direction:column;}
.zeilen a{--mod:var(--sage);--mod-ink:color-mix(in srgb,var(--mod) 70%,var(--ink));flex:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0 clamp(16px,2vw,28px);padding:clamp(14px,1.8vw,22px) clamp(20px,2.6vw,36px);border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:background .2s ease;}
.zeilen a:last-child{border-bottom:0;}
.zeilen a:hover{background:color-mix(in srgb,var(--mod) 10%,var(--white));}
.zeilen a.raum{--mod:var(--c-raum);}.zeilen a.start{--mod:var(--c-start);}.zeilen a.run{--mod:var(--c-run);}.zeilen a.grow{--mod:var(--c-grow);}.zeilen a.next{--mod:var(--c-next);}
.zeilen a.ist-fokus{background:color-mix(in srgb,var(--mod) 12%,var(--white));}
.zeilen .nr{font-size:15px;font-weight:600;letter-spacing:.1em;color:var(--mod-ink);width:2.2em;}
.zeilen .name{font-size:14px;margin-bottom:3px;}
.zeilen .fokus{font-size:12px;padding:2px 8px;margin-left:10px;vertical-align:middle;}
.zeilen h3{font-size:clamp(20px,1.9vw,25px);font-weight:300;line-height:1.2;}
.zeilen i{font-style:normal;font-size:24px;color:var(--mod-ink);transition:transform .2s ease;}
.zeilen a:hover i{transform:translateX(5px);}
/* Tafel am Desktop kompakt, damit sie niedriger bleibt als das Foto und die Patientin links daneben sichtbar ist */
@media (min-width:861px){
  .tafel .zeilen{width:min(500px,38vw);}
  .tafel .zeilen a{padding:13px 22px;gap:0 16px;}
  .tafel .zeilen .nr{font-size:13px;width:1.9em;}
  .tafel .zeilen .name{display:block;font-size:12.5px;letter-spacing:.12em;line-height:1.35;margin-bottom:4px;}
  .tafel .zeilen .fokus{font-size:10.5px;padding:1px 6px;margin-left:8px;letter-spacing:.14em;}
  .tafel .zeilen h3{font-size:19px;line-height:1.25;}
  .tafel .zeilen i{font-size:20px;}
}
@media (max-width:860px){.tafel{margin-inline:0;padding-block:0;border:1px solid var(--line);background:var(--white);}.tafel-foto{position:static;border-bottom:1px solid var(--line);}.tafel-foto img{aspect-ratio:4/3;height:auto;object-position:50% 18%;}.tafel .zeilen{width:auto;margin:0;border:0;background:none;}.zeilen a{padding:16px 18px;gap:0 14px;}.zeilen .nr{display:none;}}
.sf-schluss{margin-top:clamp(32px,4vw,48px);padding-top:clamp(20px,3vw,32px);border-top:1.5px solid var(--line);display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;}
.sf-schluss p{color:var(--text-2);max-width:30em;}
.sf-schluss .btn-row{margin:0;}

/* Zwei Checks, getrennt vom Schaufenster */
.checks{background:var(--mist);padding-block:clamp(48px,7vw,88px);}
.checks .kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22em);gap:12px clamp(24px,5vw,72px);align-items:end;}
.checks .kopf h2{font-size:clamp(26px,2.8vw,34px);margin-top:14px;}
.checks .kopf p{color:var(--text-2);margin:0;}
.checks .zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:clamp(24px,3vw,36px);}
.checks .k{background:var(--white);}
.checks .k .foto{position:relative;}
.checks .k .foto img{aspect-ratio:3/2;}
/* Ergebniskarte auf dem Check-Foto (Clara, 12.10.2026): Text im Code, rechts auf der freien Fläche des Fotos */
.erg{position:absolute;right:6%;top:50%;transform:translateY(-50%);width:46%;background:rgba(255,255,255,.94);border:1px solid var(--line);padding:clamp(12px,1.6vw,20px) clamp(12px,1.6vw,20px) clamp(10px,1.4vw,16px);display:flex;flex-direction:column;gap:8px;color:var(--ink);}
.erg-kopf{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep);font-weight:600;display:block;line-height:1.4;}
.erg-kopf small{display:block;font-weight:400;color:var(--muted);letter-spacing:.08em;text-transform:none;margin-top:1px;}
.erg .z{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:clamp(12px,1.05vw,14.5px);line-height:1.3;padding:5px 0;border-top:1px solid var(--line);}
.erg .z:first-of-type{border-top:0;}
.erg .z i{font-style:normal;color:var(--muted);white-space:nowrap;}
.erg .z i.ja{color:var(--sage-deep);font-weight:600;}
.erg .z i::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;margin-right:6px;vertical-align:middle;}
.erg .z i.ja::before{background:currentColor;}
.erg .b{display:grid;grid-template-columns:minmax(0,1fr) 42%;align-items:center;gap:10px;font-size:clamp(12px,1.05vw,14.5px);line-height:1.3;padding:4px 0;}
.erg .b span:last-child{height:9px;background:color-mix(in srgb,var(--sage) 35%,var(--white));justify-self:start;}
.erg .b.rest{font-weight:600;color:var(--sage-deep);border-top:1px solid var(--line);padding-top:8px;margin-top:2px;}
.erg .b.rest span:last-child{background:var(--sage-deep);}
.erg .bsp{font-size:11px;color:var(--muted);letter-spacing:.06em;margin-top:2px;}
.checks .txt{padding:clamp(18px,2.4vw,30px);display:flex;flex-direction:column;gap:12px;flex:1;}
.checks h3{font-size:clamp(25px,2.6vw,33px);}
.checks .nutzen{font-size:17.5px;}
@media (max-width:860px){.checks .kopf{grid-template-columns:minmax(0,1fr);}}
@media (max-width:620px){.checks .zwei{grid-template-columns:minmax(0,1fr);}.checks .k .foto img{aspect-ratio:1/1;object-position:30% 50%;}.erg{width:64%;right:5%;}.erg .z,.erg .b{font-size:13px;}}

/* Wir beide mit den echten Porträts */
.wir4{padding-block:clamp(56px,8vw,104px) clamp(24px,3vw,40px);}
/* „So arbeiten wir“ (Clara, 12.10.2026): weniger Abstand zum Abschnitt davor. Die drei Stufen ohne Kartenrahmen und
   ohne Türbogen-Symbol (Türen sind jetzt Fotos): Zeilen wie in der Tafel, Nummer 01 bis 03, Linie oben, Pfeil dazwischen. */
.stufen-sec{padding-top:clamp(40px,4.5vw,56px);}
.stufen{gap:0;border-top:1.5px solid var(--sage-deep);background:var(--white);border-inline:1px solid var(--line);border-bottom:1px solid var(--line);}
.stufen li{position:relative;background:none;border:0;border-right:1px solid var(--line);padding:clamp(22px,2.6vw,36px);gap:6px;}
.stufen li:last-child{border-right:0;}
.stufen li::before{content:counter(stufe,decimal-leading-zero);display:block;width:auto;height:auto;padding:0;border:0;border-radius:0;font-size:15px;font-weight:600;letter-spacing:.1em;color:var(--sage-deep);line-height:1.4;margin-bottom:clamp(14px,2vw,26px);}
.stufen li:not(:last-child)::after{content:"→";position:absolute;top:clamp(18px,2.4vw,32px);right:clamp(18px,2vw,28px);font-size:22px;line-height:1;color:var(--sage);}
.stufen h3{font-size:clamp(24px,2.3vw,30px);font-weight:300;line-height:1.15;}
.stufen .meta{letter-spacing:.12em;font-size:14px;font-weight:600;margin-bottom:10px;}
@media (max-width:860px){.stufen li{border-right:0;border-bottom:1px solid var(--line);}.stufen li:last-child{border-bottom:0;}.stufen li:not(:last-child)::after{content:"↓";}}
.wir4 .in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,6vw,88px);align-items:center;}
.wir4 .bild img{display:block;width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:50% 30%;}
.wir4 .paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px clamp(16px,3vw,32px);margin-top:18px;padding-top:16px;border-top:1.5px solid var(--line);}
.wir4 .paar strong{display:block;font-weight:600;line-height:1.3;}
.wir4 .paar span{display:block;font-size:17px;color:var(--muted);line-height:1.45;margin-top:4px;}
.wir4 h2{font-size:clamp(30px,3.8vw,46px);margin-top:16px;}
.wir4 .text > p{margin-top:18px;color:var(--text-2);max-width:34em;}
.wir4 .link-caps{margin-top:24px;}
@media (max-width:820px){.wir4 .in{grid-template-columns:minmax(0,1fr);}.wir4 .bild{max-width:480px;}}
@media (max-width:420px){.wir4 .paar{grid-template-columns:minmax(0,1fr);}}


/* Fünf Türen (Clara, 12.10.2026): Türfotos aus dem Bildkonzept statt der Zeichnungen, Nummer oben links auf dem Foto,
   weiße Karte mit Linie, Fußzeile mit Pfeil wie bei den Leistungen, keine laufende Figur. */
.street-sec{background:var(--paper);}
.walker{display:none!important;}
.street{gap:clamp(12px,1.6vw,20px);}
.door-link{background:var(--white);border:1px solid var(--line);}
.door-link:hover,.door-link:focus-visible{background:var(--white);}
.tuerfeld{display:block;height:auto;padding:0;aspect-ratio:4/5;overflow:hidden;background:var(--mist);border-bottom:1px solid var(--line);}
.tuerfeld img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform .7s ease;}
.door-link:hover .tuerfeld img,.door-link:focus-visible .tuerfeld img{transform:scale(1.03);}
.door-link:hover .tuerfeld,.door-link:focus-visible .tuerfeld{background:var(--mist);}
.kap{z-index:1;top:12px;left:auto;right:12px;padding:5px 8px 4px;background:rgba(255,255,255,.9);color:var(--mod-ink);}
/* Textfeld der Türkarte in der Stationsfarbe, getönt wie die Farbfelder der Türenleiste auf den Unterseiten (Clara, 12.10.2026) */
.door-text{flex:1;padding:22px 20px 20px;gap:8px;background:color-mix(in srgb,var(--mod) 20%,var(--white));transition:background var(--t);}
.door-link:hover .door-text,.door-link:focus-visible .door-text{background:color-mix(in srgb,var(--mod) 30%,var(--white));}
.door-link{border-color:color-mix(in srgb,var(--mod) 30%,var(--line));}
.kap{color:var(--mod-ink);}
.door-sign{font-size:17px;letter-spacing:.16em;}
.door-ask{font-size:17.5px;}
.door-text::after{content:"Zur Tür  →";margin-top:auto;padding-top:14px;border-top:1.5px solid color-mix(in srgb,var(--mod) 45%,var(--white));font-size:var(--caps);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mod-ink);line-height:1.4;white-space:pre;}
.street-foot{margin-top:clamp(24px,3vw,36px);padding-top:18px;border-top:1.5px solid var(--line);}
@media (max-width:900px){.door-text::after{display:none;}.door-text{padding:16px 18px;}}
/* Erstgespräch: Gesprächsfoto aus dem Bildkonzept (Beitrag 10), Hochformat im Querschnitt */
.gespraech-inner img{object-position:50% 50%;}
@media (prefers-reduced-motion:reduce){.k *,.k img{transition:none!important;}}

/* Kopffoto auf den Unterseiten: Türseiten statt der Zeichnung, sonst rechts neben dem Seitenkopf */
.kopf-foto{width:min(400px,36vw);}
.kopf-foto img{display:block;width:100%;aspect-ratio:4/3.7;object-fit:cover;}
.tuer-kopf{align-items:end;gap:var(--s7);}
.seiten-kopf.-foto{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s7);align-items:start;}
.seiten-kopf.-foto > *{grid-column:1;}
.seiten-kopf.-foto > .kopf-foto{grid-column:2;grid-row:1 / span 12;align-self:start;margin-top:var(--s2);}
@media (max-width:900px){
  .tuer-kopf,.seiten-kopf.-foto{display:block;}
  .kopf-foto{width:100%;margin-top:var(--s5);}
  .kopf-foto img{aspect-ratio:16/9;}
}

/* Steht bewusst am Ende der Datei, damit es die Regeln darüber überschreibt. */
/* Eine Schriftfarbe (seit 11.10.2026, Clara: „Schriftfarbe überall gleich“):
   Text und Titel in Tinte, Beschriftungen (gesperrte Versalien, Fußzeilen, Hinweise) in Salbei.
   Die Stationsfarben bleiben in Türzeichnungen, Linien und Flächen, aber nicht mehr in der Schrift. */
:root{--text-2:var(--ink);--muted:var(--sage-deep);}
.door-link,[class*="tuer-"],[class*="tl-"],.k,.k.raum,.k.start,.k.run,.k.grow,.k.next{--mod-ink:var(--sage-deep);}
.k h3 b,.door-ask b,.fokus{color:var(--ink);}
.lead,.section-lead{color:var(--ink);}

/* OrdiRaum-Fenster im neuen Stil (Clara, 12.10.2026): Salbei wie alle Knöpfe statt Raum-Blau */
.or-pop{border-top-color:var(--sage-deep);}
.or-pop-btn{background:var(--sage-deep);transition:background var(--t);}
.or-pop-btn:hover{background:var(--sage-dark,var(--ink));}

/* Türenleiste auf den Unterseiten (Clara, 12.10.2026): ohne Türsymbol, dafür fünf Farbfelder in den Wandfarben der
   Türfotos, mit Nummer 01 bis 05 wie auf der Startseite. Die aktive Tür ist kräftiger getönt und hat die Linie unten. */
.tuerleiste{border-bottom:0;}
.tl-inner{gap:0;counter-reset:tl;}
.tl-tuer{display:none;}
.tuerleiste a{flex:1;min-width:0;counter-increment:tl;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 18px 12px;margin:0;border-bottom:3px solid transparent;background:color-mix(in srgb,var(--mod) 20%,var(--white));}
.tuerleiste a::before{content:counter(tl,decimal-leading-zero);font-size:13px;font-weight:600;letter-spacing:.1em;line-height:1.3;color:var(--mod-ink);}
.tuerleiste a:hover{background:color-mix(in srgb,var(--mod) 30%,var(--white));}
.tuerleiste a.aktiv{background:color-mix(in srgb,var(--mod) 44%,var(--white));border-bottom-color:var(--mod);}
.tuerleiste a.aktiv .tl-name,.tuerleiste a.aktiv small{color:var(--ink);}
@media (max-width:760px){.tuerleiste a{align-items:center;text-align:center;padding:10px 4px 8px;gap:2px;}.tl-inner{padding-inline:0;}}

/* Baustein-Karten auf den Unterseiten (Clara, 12.10.2026): an die Startseite angepasst. Kein farbiger Balken oben,
   Name groß und leicht wie die Fragen in der Tafel, Art der Leistung als Versalienzeile in der Stationsfarbe,
   Plus ohne Kästchen; beim Überfahren und im geöffneten Zustand getönt wie die Farbfelder. */
.bs-karten{gap:clamp(12px,1.6vw,20px);}
.bs-karte,.bs-karten.-kurz .bs-karte{--mod-ink:color-mix(in srgb,var(--mod,var(--sage)) 70%,var(--ink));border:1px solid var(--line);border-top:1px solid var(--line);padding:clamp(18px,2.2vw,28px) clamp(20px,2.4vw,30px) clamp(16px,2vw,24px);transition:background var(--t),border-color var(--t);}
details.bs-karte:hover,details.bs-karte[open],.bs-karte:target{background:color-mix(in srgb,var(--mod,var(--sage)) 12%,var(--white));border-color:color-mix(in srgb,var(--mod,var(--sage)) 35%,var(--line));}
.bs-kopf{display:flex;flex-direction:column;gap:6px;margin:0 0 10px;}
.bs-kopf > h2,.bs-kopf > h3,.bs-karte h2,.bs-karte h3{display:block;font-size:clamp(23px,2.1vw,28px);font-weight:300;line-height:1.2;}
.bs-kopf .schild,.bs-karte h2 .schild,.bs-karte h3 .schild{order:-1;align-self:flex-start;margin:0;padding:0;border:0;font-size:13px;font-weight:600;letter-spacing:.16em;color:var(--mod-ink);}
.bs-kopf .schild::before{display:none;}
.bs-karte summary{padding-right:44px;}
.bs-auf{top:2px;width:26px;height:26px;border:0;}
.bs-auf::before,.bs-auf::after{width:18px;margin-left:-9px;background:var(--mod-ink);}
.bs-karte summary:hover .bs-name{text-decoration:none;}
.bs-karte dt{font-size:13px;letter-spacing:.16em;color:var(--mod-ink);}
.bs-mehr{font-size:var(--caps);font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--mod-ink);}
.bs-mehr:hover{text-decoration:underline;text-underline-offset:5px;}

/* Türenleiste bleibt beim Scrollen unter dem Menü stehen (Clara, 12.10.2026); dafür niedriger: Nummer links neben dem Namen. */
.tuerleiste{position:sticky;top:var(--nav-h);z-index:90;background:var(--paper);}
.tuerleiste a{flex-direction:row;align-items:baseline;gap:10px;padding:10px 18px 8px;}
.bs-karte{scroll-margin-top:calc(var(--nav-h) + 84px);}
@media (max-width:760px){.tuerleiste a{flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px;}}
/* Häufige Fragen über die ganze Inhaltsbreite (Clara, 12.10.2026); die Antwort bleibt in lesbarer Zeilenlänge. */
.fragen{max-width:none;}
.fragen dd,.fragen .antwort,.fragen details > p,.fragen details > div{max-width:52rem;}

/* Türseiten als Weg in Schritten (Clara, 12.10.2026): Nummer, Titel und Satz wie bei den drei Stufen, darunter die Karten. */
.weg{padding-top:0;}
.weg-liste{list-style:none;padding:0;margin:0;max-width:none;}
.weg .schritt{max-width:none;}
.schritt{padding:clamp(36px,4.5vw,56px) 0;border-top:1.5px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 84px);}
.schritt:first-child{border-top:0;padding-top:clamp(12px,2vw,24px);}
.schritt-kopf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px clamp(16px,2vw,28px);align-items:baseline;max-width:52rem;margin-bottom:clamp(18px,2.4vw,28px);}
.schritt-kopf .nr{grid-row:1 / span 2;font-size:15px;font-weight:600;letter-spacing:.1em;color:var(--mod-ink,var(--sage-deep));}
.schritt-kopf h2{font-size:clamp(26px,2.8vw,36px);font-weight:300;line-height:1.15;margin:0;}
.schritt-kopf p{margin:0;color:var(--text-2);}
.weg .bs-karten{padding-top:0;}
.schritt:last-child .bs-karte{background:color-mix(in srgb,var(--mod,var(--sage)) 6%,var(--white));}
@media (max-width:760px){.schritt-kopf{grid-template-columns:minmax(0,1fr);}.schritt-kopf .nr{grid-row:auto;}}

/* Leistungen A bis Z (Clara, 12.10.2026): an die Startseite angepasst. Buchstabenleiste ohne Kästchen, Gruppen-Buchstabe
   groß und leicht mit feiner Linie, Name der Leistung groß und leicht wie in der Tafel, Türen als kleine Farbfelder
   in den Stationsfarben (wie die Leiste auf den Türseiten) statt grauer Rahmen. */
.az-buchstaben{gap:2px 14px;margin-top:clamp(18px,2vw,26px);}
.az-buchstaben a{min-width:0;height:auto;padding:4px 2px;border:0;border-bottom:1.5px solid transparent;background:none;font-size:17px;font-weight:500;color:var(--sage-deep);}
.az-buchstaben a:hover{background:none;color:var(--ink);border-bottom-color:var(--sage-deep);}
.az-gruppe + .az-gruppe{margin-top:clamp(32px,4vw,48px);}
.az-gruppe h2{font-size:15px;font-weight:600;letter-spacing:.2em;color:var(--sage-deep);padding-bottom:10px;border-bottom:1.5px solid var(--sage-deep);}
.az-gruppe li{grid-template-columns:minmax(0,4fr) minmax(0,6fr) minmax(0,3fr);gap:6px clamp(20px,3vw,48px);padding:clamp(16px,2vw,22px) 0;align-items:start;}
.az-name{font-size:clamp(21px,1.9vw,25px);font-weight:300;line-height:1.2;}
.az-name a{text-decoration:none;}
.az-name a:hover{text-decoration:underline;text-decoration-color:var(--sage);text-underline-offset:6px;}
.az-name .schild{font-size:12px;letter-spacing:.14em;color:var(--mod-ink,var(--sage-deep));}
.az-was{line-height:1.5;}
.az-tueren{gap:6px;padding-top:4px;}
.az-tuer{--mod-ink:color-mix(in srgb,var(--mod) 70%,var(--ink));padding:5px 10px 4px;border:0;background:color-mix(in srgb,var(--mod) 20%,var(--white));color:var(--mod-ink);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;transition:background var(--t);}
.az-tuer:hover{background:color-mix(in srgb,var(--mod) 36%,var(--white));}
@media (max-width:860px){.az-gruppe li{grid-template-columns:minmax(0,1fr);gap:4px;}.az-tueren{justify-content:flex-start;padding-top:6px;}}

/* Über uns (Clara, 12.10.2026): großes Foto von Clara und Julia über die ganze Breite, darunter Titel; die zwei Porträts
   ohne Türbogen als schlichte Fotos, Name groß und leicht. */
.ueber-hero{margin:clamp(12px,2vw,24px) calc(50% - 50vw) 0;}
.ueber-hero img{display:block;width:100%;height:clamp(340px,60vh,720px);object-fit:cover;object-position:50% 55%;}
.ueber-hero + .seiten-kopf{padding-top:clamp(28px,3.5vw,48px);}
.personen-gross .person .bogen{width:min(320px,100%);padding:0;border:0;}
.personen-gross .person .bogen::before,.personen-gross .person .bogen::after{display:none;}
.personen-gross .person .bogen img{border:0;border-radius:0;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;}
.personen-gross .person h2{font-size:clamp(26px,2.6vw,34px);font-weight:300;}
.personen-gross .person p a{color:var(--sage-deep);font-weight:600;font-size:var(--caps);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;}
.personen-gross .person p a:hover{text-decoration:underline;text-underline-offset:5px;}
@media (max-width:760px){.ueber-hero img{height:auto;aspect-ratio:4/4.4;object-position:50% 25%;}.personen-gross .person .bogen{width:min(260px,80%);}}

/* KI-Hinweis an den Fotos mit Clara und Julia (12.10.2026): klein in der Bildecke, lesbar auf hellem wie dunklem Grund */
.ki-bild{display:block;position:relative;}
.ki-hinweis{position:absolute;z-index:2;right:8px;bottom:8px;font-size:12px;font-weight:500;line-height:1;letter-spacing:.03em;font-style:normal;text-transform:none;white-space:nowrap;color:var(--ink);background:rgba(255,255,255,.88);padding:5px 8px 4px;pointer-events:none;}
.ueber-hero .ki-hinweis{right:max(6px,calc(50vw - var(--w-page) / 2 + clamp(16px,4vw,32px)));}

/* KI-Vermerk an allen KI-Fotos (Clara, 13.10.2026; Art. 50 Abs. 4 KI-Verordnung, anwendbar seit 02.08.2026): klar lesbar,
   direkt am Bild. bauen.py setzt ihn an jedes Foto aus images/neu/. Die Behälter brauchen dafür einen Bezugspunkt.
   Titelfoto und Tafel: links unten, weil rechts das Schild bzw. die Liste liegt. */
.kopf-foto{position:relative;}
.ein-foto .ki-hinweis,.tafel-foto .ki-hinweis,.checks .k .foto .ki-hinweis{right:auto;left:8px;}
.ein-foto .ki-hinweis,.tafel-foto .ki-hinweis{left:max(8px,calc(50vw - var(--w-page) / 2 + clamp(16px,4vw,32px)));}
@media (max-width:860px){.tafel-foto{position:relative;}.tafel-foto .ki-hinweis{left:8px;}}
@media (max-width:760px){.ein-foto .ki-hinweis{left:8px;}}
/* Türfotos am Handy sind nur etwa 100 px breit: dort die Kurzform, der volle Wortlaut bleibt für Vorleseprogramme im Text. */
@media (max-width:900px){.tuerfeld .ki-hinweis{font-size:0;right:4px;bottom:4px;padding:4px 6px 3px;}.tuerfeld .ki-hinweis::after{content:"KI-Bild";font-size:11px;}}

/* „Neu bei OrdiLife“ (Entwurf 21.10.2026, Feedback Julia): zwei Kacheln auf blassem Lila, damit sich der Bereich vom Rest abhebt.
   Ton aus der Stationsfarbe OrdiRun (#7C6690), stark aufgehellt. */
.checks.-lila{background:#ECE7F1;}
.checks.-lila .eyebrow{color:#5E4A72;}