@font-face{font-family:'Bricolage';src:url('assets/fonts/bricolage-grotesque-latin-500-normal.woff2') format('woff2');
font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Bricolage';src:url('assets/fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2');
font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Instrument';src:url('assets/fonts/instrument-sans-latin-400-normal.woff2') format('woff2');
font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Instrument';src:url('assets/fonts/instrument-sans-latin-500-normal.woff2') format('woff2');
font-weight:500;font-style:normal;font-display:swap;}
:root{
 /* --- Farbleiter: vier Flaechen, eine Tinte, ein warmer Akzent ---------------
    Alle Paarungen sind gegen WCAG AA gerechnet (tools/kontrast.js prueft nach). */
 --creme:#fdfbf7;        /* Seitengrund, Lesefläche */
 --mint-1:#e0f4ea;       /* sehr hell: Kopf, ruhige Felder */
 --mint-2:#b6e5d2;       /* die Signaturfläche */
 --mint-3:#8fd3ba;       /* Kanten und Linien auf Mint */
 --apricot:#f4c0b0;      /* warme Fläche: Telefon und Zeiten */
 --apricot-1:#fbe5df;    /* sehr hell: Hinterlegung beim Zeigen */
 --tanne:#0e3a32;        /* Überschriften, Tinte */
 --tanne-2:#254f46;      /* Fliesstext */
 --grau:#4c635c;         /* Nebentext (nicht auf Apricot, dort --tanne-2) */
 --rost:#8f4418;         /* warmer Akzent in Schrift, AA auf allen vier Flächen */
 --fokus:#0e3a32;

 /* --- Stufenleiter für Abstände --- */
 --s1:.5rem; --s2:1rem; --s3:1.6rem; --s4:2.6rem; --s5:4rem; --s6:6rem;
 --pad-laut:clamp(4rem,9vw,7.5rem);
 --pad-leise:clamp(2.8rem,6vw,5rem);

 /* --- Satzspiegel --- */
 --mass:min(1180px,90vw);
 --eng:min(680px,90vw);

 /* --- Schriftgrade --- */
 --t-klein:.875rem; --t-meta:.9375rem; --t-brot:1.0625rem;
 --t-lead:clamp(1.15rem,1.55vw,1.45rem);
 --t-h3:clamp(1.2rem,2.3vw,1.7rem);
 --t-h2:clamp(2rem,4.6vw,3.6rem);
 --t-h1:clamp(2.5rem,5.8vw,5rem);

 /* --- Bewegung: ein Motiv, kurze Wege --- */
 --kurve:cubic-bezier(.22,.61,.36,1);
 --t-wisch:.62s; --t-linie:.5s; --t-zeig:.18s;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--tanne-2);overflow-x:hidden;
 font:400 var(--t-brot)/1.62 Instrument,system-ui,sans-serif;
 font-feature-settings:"ss01";-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;color:var(--tanne);font-family:Bricolage,system-ui,sans-serif;
 font-weight:800;line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
p{margin:0 0 1.05em;max-width:64ch}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
picture{display:block}
ul{margin:0;padding:0;list-style:none}
strong{font-weight:500}
.wrap{width:var(--mass);margin-inline:auto}
.eng{width:var(--eng);margin-inline:auto}
[id]{scroll-margin-top:92px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;color:var(--tanne);
 padding:.7rem 1rem;outline:3px solid var(--tanne)}
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:2px}

/* --- Vier Flächen. Der Wechsel gliedert die Seite, nicht Linien oder Kästen.
       Reihenfolge auf der Startseite: Mint – Foto – Apricot – Creme – Mint –
       Creme – Mint. Laute Abschnitte atmen tiefer als leise. --- */
.feld{padding:var(--pad-laut) 0;position:relative}
.feld.leise{padding:var(--pad-leise) 0}
.mint,.mint-hell,.tief{background:var(--mint-2)}
.apri{background:var(--apricot)}
.creme{background:var(--creme)}
.apri .lead,.apri p,.apri address{color:var(--tanne-2)}

/* --- Kopf: flach, ruhig, immer sichtbar --- */
.kopf{position:sticky;top:0;z-index:40;background:var(--mint-1);
 border-bottom:1px solid #cfe6da}
.kopf .wrap{display:flex;align-items:center;gap:1.2rem;min-height:66px;flex-wrap:wrap}
.kopf .logo{height:38px;width:auto}
.nav{margin-left:auto;display:flex;gap:1.6rem;flex-wrap:wrap;font-size:var(--t-meta)}
.nav a{text-decoration:none;color:var(--tanne);padding:.45rem 0;font-weight:500;
 box-shadow:inset 0 -1px 0 transparent;transition:box-shadow var(--t-zeig)}
.nav a:hover,.nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--tanne)}

/* --- Schaltflächen --- */
.pille{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
 text-decoration:none;font-weight:500;padding:.68rem 1.5rem;border-radius:999px;
 min-height:44px;border:1.5px solid var(--tanne);color:var(--tanne);background:transparent;
 white-space:nowrap;transition:background-color var(--t-zeig),color var(--t-zeig)}
.pille:hover{background:var(--tanne);color:var(--creme)}
.pille.voll{background:var(--tanne);color:var(--creme)}
.pille.voll:hover{background:#082a24}

/* --- Hero: Schrift trägt, das Teamfoto kommt gleich darunter in voller Breite --- */
.hero{background:var(--mint-2);padding-block:clamp(3rem,7.5vw,5.6rem) clamp(2.4rem,5.5vw,4rem)}
.hero h1{font-size:var(--t-h1);letter-spacing:-.04em;max-width:14ch}
.hero h1 .zwei{display:block}
.hero h1 .drei{display:block;color:var(--rost);font-weight:500;letter-spacing:-.015em;
 font-size:clamp(1.3rem,2.6vw,2.1rem);line-height:1.2;margin-top:clamp(.6rem,1.4vw,1.1rem)}
.hero .unter{color:var(--tanne-2);margin-top:clamp(1rem,2.2vw,1.7rem);max-width:50ch;
 font-size:var(--t-lead);line-height:1.5;font-family:Bricolage,sans-serif;font-weight:500;
 letter-spacing:-.01em}
.hero .knoepfe{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:clamp(1.4rem,2.8vw,2.2rem)}
.teambild{margin:0;background:var(--mint-2)}
.teambild img{display:block;width:100%;height:auto;max-height:78vh;object-fit:cover;
 object-position:50% 34%}

/* --- Leitmotiv: eine dünne Linie wächst nach unten, dann kommt die Schaltfläche.
       Sie steht am linken Rand der Textspalte, damit sie wirklich etwas verbindet. --- */
.stiel{display:block;width:1px;background:var(--rost);
 height:clamp(32px,4vw,56px);transform-origin:top center}
.mint .stiel,.mint-hell .stiel,.tief .stiel{background:var(--tanne)}
.js .stiel{transform:scaleY(0);transition:transform var(--t-linie) var(--kurve)}
.weiter-block{margin-top:clamp(1.3rem,2.8vw,2.1rem)}
.weiter-block .stiel{margin-bottom:clamp(.7rem,1.4vw,1.1rem)}
.js .nach{opacity:0;transform:translateY(6px);
 transition:opacity .45s .25s var(--kurve),transform .45s .25s var(--kurve)}

/* --- Bewegung: EIN Motiv. Die Wischblende legt Ueberschriften von links nach
       rechts frei. Bilder, Listen und Fliesstext stehen sofort still da.
       Versteckt wird nur, wenn JavaScript laeuft (.js am html-Element). --- */
.js .wisch{clip-path:inset(-.2em 100% -.3em -.12em);
 transition:clip-path var(--t-wisch) var(--kurve)}
.js .an .wisch,.js .wisch.an{clip-path:inset(-.2em -.12em -.3em -.12em)}
.js .an .stiel,.js .stiel.an{transform:scaleY(1)}
.js .an .nach,.js .nach.an{opacity:1;transform:none}
.js .weiter-block .stiel{transform:scaleY(0)}
.js .weiter-block .nach{opacity:0;transform:translateY(6px)}
.js .weiter-block.an .stiel{transform:scaleY(1)}
.js .weiter-block.an .nach{opacity:1;transform:none}
.v2{transition-delay:.1s}
.v3{transition-delay:.2s}

/* --- Abschnittskopf: Ueberschrift, darunter der Zwischenton --- */
.kopfzeile h2{font-size:var(--t-h2)}
.kopfzeile .lead{margin-top:clamp(.9rem,1.8vw,1.4rem);max-width:54ch;
 font-family:Bricolage,sans-serif;font-weight:500;font-size:var(--t-lead);
 line-height:1.42;letter-spacing:-.012em;color:var(--tanne-2)}

/* --- Faktenband: Telefon und Zeiten gleich unter dem Teamfoto --- */
.fakten{padding:clamp(2.4rem,5vw,3.6rem) 0}
.fakten .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);
 gap:clamp(1.6rem,4vw,3.2rem);align-items:start}
.fakten h2{font-size:var(--t-meta);font-weight:500;font-family:Instrument,sans-serif;
 letter-spacing:0;margin-bottom:.55rem;color:var(--tanne-2)}
.telnr{font-family:Bricolage,sans-serif;font-weight:800;letter-spacing:-.035em;
 font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.05;text-decoration:none;
 display:inline-block;font-variant-numeric:tabular-nums lining-nums;
 box-shadow:inset 0 -3px 0 rgba(14,58,50,.3);transition:box-shadow var(--t-zeig)}
.telnr:hover{box-shadow:inset 0 -3px 0 var(--tanne)}
.fakten .zeile{display:flex;justify-content:space-between;gap:.8rem;
 padding:.34rem 0;border-bottom:1px solid rgba(14,58,50,.2);
 font-variant-numeric:tabular-nums lining-nums;font-size:var(--t-meta)}
.fakten .zeile span+span{text-align:right}
.fakten address{font-style:normal;line-height:1.72;font-size:var(--t-meta)}
.fakten .hinweis{margin-top:.7rem}

/* --- Bildband: zwei Fotos, eines versetzt. Lieber zwei echte Praxisbilder gross
       als drei kleine, von denen eines ein Stockfoto ist. --- */
.band{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.2vw,1.8rem);
 margin-top:clamp(2.4rem,5vw,3.6rem);align-items:start}
.band .b1{grid-column:1/8}
.band .b1 img{aspect-ratio:4/3;object-fit:cover;width:100%}
.band .b2{grid-column:8/13;margin-top:clamp(2rem,5vw,4.5rem)}
.band .b2 img{aspect-ratio:4/5;object-fit:cover;width:100%}

/* --- Leistungen als grosse Textzeilen, keine Kacheln --- */
.liste{margin-top:clamp(2.4rem,5vw,3.6rem);border-top:1px solid rgba(14,58,50,.16)}
.liste a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
 gap:.5rem clamp(1.5rem,4vw,3.5rem);align-items:start;text-decoration:none;
 padding:clamp(.95rem,2vw,1.4rem) 0;border-bottom:1px solid rgba(14,58,50,.16);
 transition:padding-left var(--t-zeig) var(--kurve),background-color var(--t-zeig)}
.liste a:hover{padding-left:clamp(.4rem,1.2vw,1rem);background:var(--apricot-1)}
.liste h3{font-size:var(--t-h3)}
.liste p{margin:0;color:var(--grau);font-size:var(--t-brot);max-width:46ch;
 padding-top:.18em}

/* --- Ablauf: Zahlen sind hier richtig, es ist wirklich eine Reihenfolge.
       Rechts daneben steht das Bild, damit die halbe Seite nicht leer bleibt. --- */
.schrittblock{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
 gap:clamp(2rem,5vw,4rem);align-items:start;margin-top:clamp(2.4rem,5vw,3.6rem)}
.schrittblock>img,.schrittblock>picture{position:sticky;top:104px}
.schrittblock picture img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ablauf{list-style:none;margin:0;position:relative;padding-left:clamp(2.6rem,4.4vw,3.8rem)}
.ablauf::before{content:"";position:absolute;left:clamp(.85rem,1.5vw,1.3rem);top:.7em;bottom:.7em;
 width:1px;background:rgba(14,58,50,.26)}
.ablauf li{position:relative;padding-bottom:clamp(1.6rem,3.4vw,2.6rem);max-width:52ch}
.ablauf li:last-child{padding-bottom:0}
.ablauf .zahl{position:absolute;left:calc(-1*clamp(2.6rem,4.4vw,3.8rem));top:0;
 width:clamp(1.7rem,2.8vw,2.6rem);height:clamp(1.7rem,2.8vw,2.6rem);border-radius:50%;
 display:grid;place-items:center;background:var(--tanne);color:var(--mint-1);
 font-family:Bricolage,sans-serif;font-weight:800;font-size:.9rem}
.ablauf h3{font-size:clamp(1.15rem,2.1vw,1.5rem);margin-bottom:.4rem}
.ablauf p{color:var(--tanne-2);margin:0}

/* --- Team: drei Porträts auf einer Linie. Versetzt wirkt bei Kopfbildern
       unsortiert - der Versatz bleibt dem Bildband vorbehalten. --- */
.koepfe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:clamp(1.2rem,3vw,2.4rem);margin-top:clamp(2.4rem,5vw,3.6rem);align-items:start}
.koepfe a{text-decoration:none;display:block}
.koepfe img{aspect-ratio:4/5;object-fit:cover;width:100%}
.koepfe h3{font-size:clamp(1.05rem,1.9vw,1.4rem);margin-top:.9rem}
.koepfe .rolle{font-size:var(--t-meta);margin-top:.15rem;color:var(--tanne-2)}

/* --- Haltung: ein grosser Satz, darunter ruhiger Fliesstext in einer Spalte --- */
.satz{font-family:Bricolage,sans-serif;font-weight:500;letter-spacing:-.025em;
 font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.2;text-align:center;
 max-width:20ch;margin:0 auto;color:var(--tanne)}
.haltung{margin-top:clamp(2rem,4vw,3rem)}
.haltung p{max-width:none;color:var(--tanne-2)}
.haltung p:last-child{margin-bottom:0}

/* --- Kontakt --- */
.kontakt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
 gap:clamp(1.8rem,4vw,3.2rem);align-items:start;margin-top:clamp(2.4rem,5vw,3.6rem)}
.kontakt img{width:100%}
.zraster{display:grid;grid-template-columns:1fr}
.zraster .zeile{display:flex;justify-content:space-between;gap:.8rem;padding:.42rem 0;
 border-bottom:1px solid rgba(14,58,50,.2);
 font-variant-numeric:tabular-nums lining-nums}
.zraster .zeile span+span{text-align:right}
.zraster .zu{color:var(--grau)}
.hinweis{font-size:var(--t-meta);color:var(--tanne-2);max-width:46ch;margin-top:.7rem}
.creme .hinweis{color:var(--grau)}

/* --- Innenseiten --- */
.titel{background:var(--mint-2);padding:clamp(3rem,7vw,5.4rem) 0 clamp(2.4rem,5.5vw,4rem)}
.titel h1{font-size:clamp(2.3rem,5.6vw,4.4rem)}
.titel p{color:var(--tanne-2);margin-top:1rem;max-width:54ch;
 font-family:Bricolage,sans-serif;font-weight:500;font-size:var(--t-lead);
 line-height:1.42;letter-spacing:-.012em}
.detail{padding-top:clamp(2.4rem,5.5vw,4rem);margin-top:clamp(2.4rem,5.5vw,4rem);
 border-top:1px solid rgba(14,58,50,.16)}
.detail:first-child{border-top:0;margin-top:0;padding-top:0}
.detail h2{font-size:clamp(1.7rem,4vw,2.8rem)}
.detail .inhalt{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.75fr);
 gap:clamp(1.6rem,4vw,3.2rem);margin-top:clamp(1.3rem,2.6vw,2rem);align-items:start}
.detail h3{font-size:1.15rem;font-weight:800;margin:1.5rem 0 .4rem}
.detail h3:first-child{margin-top:0}
.detail img{width:100%;aspect-ratio:3/4;object-fit:cover}
.vita{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
 gap:clamp(1.6rem,4vw,3rem);padding-top:clamp(2.4rem,5vw,3.6rem);
 margin-top:clamp(2.4rem,5vw,3.6rem);border-top:1px solid rgba(14,58,50,.16)}
.vita:first-of-type{border-top:0;margin-top:0;padding-top:0}
.vita img{aspect-ratio:4/5;object-fit:cover;width:100%}
.vita h2{font-size:clamp(1.4rem,3.2vw,2.2rem)}
.vita .rolle{color:var(--grau);margin:.35rem 0 1rem}
.vita li{padding:.4rem 0 .4rem 1.2rem;position:relative;
 border-bottom:1px solid rgba(14,58,50,.12)}
.vita li::before{content:"";position:absolute;left:0;top:1.05em;width:6px;height:6px;
 border-radius:50%;background:var(--rost)}
.doc h2{font-size:clamp(1.2rem,2.4vw,1.55rem);margin:2rem 0 .6rem}
.doc h2:first-child{margin-top:0}
.doc p{max-width:68ch}
.doc p.zeile{margin-bottom:.3em}
.doc p.zeile+p.lang,.doc p.lang+p.zeile{margin-top:.9em}
.merk{background:var(--apricot-1);border-left:4px solid var(--rost);
 padding:1rem 1.2rem;max-width:68ch;margin-bottom:2.2rem;font-size:var(--t-meta);
 color:var(--tanne-2)}
.weiter{display:inline-block;font-weight:500;text-decoration:none;
 box-shadow:inset 0 -2px 0 currentColor;padding-bottom:1px}
/* Offene Stellen in den Rechtstexten sichtbar machen, solange sie Entwurf sind */
.offen{display:block;margin-top:.5rem;padding:.55rem .8rem;background:var(--apricot-1);
 border-left:3px solid var(--rost);color:var(--tanne-2);font-size:var(--t-meta)}

/* --- Fuss --- */
.fuss{background:var(--mint-1);color:var(--tanne-2);padding:clamp(2.8rem,5.5vw,4.2rem) 0 1.8rem;
 border-top:1px solid #cfe6da}
.fuss .wrap{display:grid;grid-template-columns:1.1fr 1fr 1.35fr .75fr;
 gap:clamp(1.6rem,4vw,3rem)}
.fuss h2{font-size:var(--t-meta);font-family:Instrument,sans-serif;font-weight:500;
 color:var(--tanne);margin-bottom:.6rem}
.fuss a{color:var(--tanne)}
.fuss .logo{height:38px;width:auto;margin-bottom:.9rem}
.fuss address{font-style:normal;line-height:1.72}
.fuss li{padding:.12rem 0;font-size:var(--t-meta);line-height:1.5}
/* Alleinstehende Verweise bekommen eine Tippflaeche, auch wenn sie nur Text sind */
.fuss li a,.kontakt p a,address a{display:inline-block;padding-block:.26rem}
.fuss .unten{grid-column:1/-1;display:flex;justify-content:space-between;gap:1rem;
 flex-wrap:wrap;border-top:1px solid #cfe6da;margin-top:1.4rem;padding-top:1.2rem;
 font-size:var(--t-klein);color:var(--grau)}

@media(max-width:1000px){
 .fakten .wrap{grid-template-columns:1fr 1fr}
 .fakten .adr{grid-column:1/-1}
 .schrittblock,.detail .inhalt,.vita,.kontakt{grid-template-columns:1fr}
 .schrittblock>picture{position:static;max-width:460px}
 .detail img,.vita img{max-width:360px}
 .fuss .wrap{grid-template-columns:1fr 1fr}
 .fuss>.wrap>div:first-child{grid-column:1/-1}
}
@media(max-width:760px){
 /* Abschnitte duerfen am Handy weniger tief atmen - die Seite wird sonst endlos */
 :root{--pad-laut:3.25rem;--pad-leise:2.4rem}
 /* Das Begleitbild neben dem Ablauf liegt am Handy quer, damit es nicht
    die halbe Bildschirmhoehe frisst */
 .schrittblock>picture img{aspect-ratio:3/2}
 /* Kopf flach halten: der erste Bildschirm gehört dem Inhalt, nicht der Navigation */
 .kopf .wrap{min-height:56px;gap:.7rem;padding-top:.5rem}
 .kopf .logo{height:30px}
 .nav{order:3;width:100%;margin-left:0;gap:1.15rem;font-size:var(--t-meta);
  padding-bottom:.3rem}
 .nav a{padding:.6rem 0;min-height:44px;display:flex;align-items:center}
 .kopf .pille{padding:.5rem 1rem;font-size:var(--t-meta);min-height:40px}
 .kopf .pille .wort{display:none}
 [id]{scroll-margin-top:118px}
 .hero h1{letter-spacing:-.03em}
 .teambild img{max-height:none;aspect-ratio:3/2;object-position:50% 30%}
 .band{grid-template-columns:1fr}
 .band .b1,.band .b2{grid-column:1/-1}
 .band .b2{margin-top:0;max-width:62%}
 .band .b1 img{aspect-ratio:3/2}
 .liste a{grid-template-columns:1fr;gap:.3rem}
 .liste p{max-width:none}
 .koepfe{grid-template-columns:1fr 1fr}
 .koepfe a:nth-child(3){grid-column:1/2}
 .fakten .wrap{grid-template-columns:1fr}
 .fuss .wrap{grid-template-columns:1fr 1fr}
 .fuss .unten{flex-direction:column;gap:.3rem}
}
@media(max-width:430px){
 .fakten .zeile,.zraster .zeile{font-size:var(--t-klein);flex-wrap:wrap}
 .band .b2{max-width:76%}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *{transition:none!important;animation:none!important}
 .wisch{clip-path:none!important}
 .stiel{transform:none!important}
 .nach{opacity:1!important;transform:none!important}
 .weiter-block .stiel{transform:none!important}
 .weiter-block .nach{opacity:1!important;transform:none!important}
}


/* ---- Livegang 20.10.2026: Handy-Nachbesserung (nur Live-Seite) ---- */
@media (max-width:560px){
  .pille{white-space:normal;max-width:100%;text-align:center}
  .kopf .pille{white-space:nowrap}        /* Kopfzeile bleibt einzeilig */
}
@media (max-width:480px){
  .titel h1{font-size:2rem}
}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}