/* Schriften lokal gehostet (SIL Open Font License), keine Verbindung zu Google */
@font-face{font-family:"Inter";src:url("../fonts/inter-var.woff") format("woff");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-var.woff") format("woff");font-weight:600 700;font-style:normal;font-display:swap}
/* StartBeyond – Layout. Farben stehen in ci/farben.css */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--schrift-text);color:var(--marine);background:var(--weiss);line-height:1.65;font-size:18px}
img{max-width:100%;height:auto;border-radius:var(--radius)}
a{color:var(--tuerkis-dunkel)}
h1,h2,h3{font-family:var(--schrift-titel);line-height:1.2;margin:0 0 .6em}
h1{font-size:clamp(2rem,5vw,3.2rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem)}
.container{max-width:1040px;margin:0 auto;padding:0 16px}
.kopf{position:sticky;top:0;background:var(--weiss);border-bottom:1px solid var(--grau);z-index:5}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:10px;gap:16px;flex-wrap:wrap}
.nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--marine);font-weight:500}
.nav a:hover{color:var(--tuerkis-dunkel)}
.abschnitt{padding:56px 0}
.abschnitt:nth-of-type(even){background:var(--grau)}
.abschnitt.hell{background:var(--tuerkis-hell)}
.abschnitt.hero{background:var(--tuerkis-hell);padding:80px 0}
.button{display:inline-block;background:var(--marine);color:#fff!important;padding:14px 26px;border-radius:999px;text-decoration:none;font-weight:600;border:2px solid var(--marine);transition:.15s}
.button:hover{background:var(--tuerkis);border-color:var(--tuerkis);color:var(--marine)!important}
.button.klein{padding:8px 18px;font-size:.9rem}
blockquote{margin:1.2em 0;padding:.4em 1.2em;border-left:4px solid var(--tuerkis);background:var(--weiss);border-radius:0 var(--radius) var(--radius) 0}
ul,ol{padding-left:1.2em}
.fuss{background:var(--marine);color:#fff;padding:36px 0;font-size:.9rem}
.fuss a{color:#fff}
.fuss .hinweis{opacity:.75}
form label{display:block;margin:0 0 14px;font-weight:500}
form input,form textarea{width:100%;padding:12px;border:1px solid #b9c4cc;border-radius:8px;font:inherit;margin-top:4px}
:focus-visible{outline:3px solid var(--tuerkis);outline-offset:2px}
@media(max-width:640px){body{font-size:17px}.abschnitt{padding:40px 0}.abschnitt.hero{padding:56px 0}}

/* ===================== Startseite ===================== */
/* Ein Raster für alles: gleiche linke Kante, linksbündig, ruhige Abstände statt Farbkästen */
:root{--kopf:90px;--rand:20px;--breite:1120px}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.sek{padding:72px 0}
.sek.getoent{background:var(--tuerkis-hell)}
.sek.dunkel{background:var(--marine);color:#fff}
.sek h2{font-size:clamp(1.6rem,2.6vw,2.25rem);line-height:1.18;letter-spacing:-.01em;max-width:20ch;text-wrap:balance;margin:0 0 .6em}
.sek h3{font-family:var(--schrift-titel);font-size:1.15rem;line-height:1.3;margin:0 0 .4em}
.sek p{max-width:60ch;margin:0 0 1em}
.lead{font-size:1.125rem;line-height:1.65}
.zwei{display:grid;gap:12px}
.leise{opacity:.8;font-size:.95rem}
.textlink{font-weight:600;color:var(--tuerkis-dunkel);text-decoration:none;border-bottom:2px solid var(--tuerkis)}
.textlink:hover{color:var(--marine)}

/* Gedanken der Zielgruppe */
.gedanken{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px}
.gedanken li{font-family:var(--schrift-titel);font-weight:600;font-size:1.05rem;padding:14px 18px;background:var(--grau);border-radius:10px;max-width:34ch}

/* Drei Ebenen auf einem Fundament */
.ebenen{margin-top:36px;display:grid;gap:0}
.saeulen{display:grid;gap:0}
.saeule{padding:22px 0 22px 20px;border-left:2px solid var(--tuerkis)}
.saeule .nr{font-family:var(--schrift-titel);font-weight:700;color:var(--tuerkis-dunkel);font-size:.95rem;display:block;margin-bottom:6px}
.saeule p{font-size:1rem;margin:0}
.fundament{background:var(--marine);color:#fff;border-radius:0 0 10px 10px;padding:20px 22px}
.fundament h3{color:#fff;margin:0 0 .3em}
.fundament p{margin:0;font-size:1rem;opacity:.9}

/* Über mich */
.ich{display:grid;gap:28px;align-items:center}
.ich figure{margin:0}
.ich img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:55% 22%;border-radius:10px}
.fakten{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:10px}
.fakten li{padding-left:14px;border-left:3px solid var(--tuerkis);line-height:1.4}
.fakten small{display:block;opacity:.7;font-size:.875rem}

/* Ablauf: echte Reihenfolge, deshalb nummeriert */
.ablauf{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:22px;counter-reset:schritt}
.ablauf li{counter-increment:schritt;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.ablauf li::before{content:counter(schritt);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--marine);color:#fff;font-family:var(--schrift-titel);font-weight:700}
.ablauf h3{margin:6px 0 .2em}
.ablauf p{margin:0;font-size:1rem}

/* Vollbild-Foto mit Text im hellen Verlauf (abgestimmte Gestaltung) */
.foto-sek{position:relative;display:flex;flex-direction:column;background:var(--weiss);overflow:hidden}
.foto-sek .bild{position:relative;flex:1 1 auto;min-height:280px;margin:0}
.foto-sek .bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 25%);border-radius:0}
.foto-sek .bild::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
.foto-sek .wrap{position:relative;z-index:2;width:100%;margin-top:-56px;padding-bottom:48px}
.foto-sek .text{max-width:480px}
.foto-sek h1{font-size:clamp(1.9rem,7.4vw,2.4rem);line-height:1.15;letter-spacing:-.015em;margin:0 0 .5em;text-wrap:balance}
.foto-sek h2{font-size:clamp(1.6rem,6.4vw,2rem);line-height:1.18;margin:0 0 .5em;text-wrap:balance}
.foto-sek p{margin:0 0 1.1em}
.foto-sek.hero{min-height:calc(100svh - var(--kopf))}
.foto-sek:not(.hero) .bild{flex:none;height:62svh;max-height:560px}
.hinweis-klein{font-size:.9rem;opacity:.75;margin-top:12px!important}

@media(min-width:700px){
 .gedanken{grid-template-columns:1fr}
 .saeulen{grid-template-columns:repeat(3,1fr)}
 .saeule{padding:24px 24px 28px}
}
@media(min-width:900px){
 :root{--kopf:64px;--rand:32px}
 body{font-size:18px}
 .sek{padding:112px 0}
 .zwei{grid-template-columns:5fr 6fr;gap:72px;align-items:start}
 .zwei>div:first-child h2{margin-bottom:0}
 .ich{grid-template-columns:5fr 7fr;gap:72px}
 .ablauf{grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
 .ablauf::before{content:"";position:absolute;left:20px;right:20px;top:20px;height:2px;background:var(--tuerkis);opacity:.5}
 .ablauf li{grid-template-columns:1fr;gap:16px;position:relative}
 .foto-sek h1{font-size:clamp(2.2rem,3.4vw,3rem)}
 .foto-sek h2{font-size:clamp(1.8rem,2.6vw,2.4rem)}
}
/* Breite Bildschirme: Foto über die ganze Fläche, Text im Verlauf neben der Person */
@media(min-width:900px) and (min-aspect-ratio:4/3){
 .foto-sek{flex-direction:row;align-items:center;min-height:78svh}
 .foto-sek.hero{min-height:calc(85svh - var(--kopf))}
 .foto-sek .bild,.foto-sek:not(.hero) .bild{position:absolute;inset:0;height:auto;max-height:none}
 .foto-sek .bild img{object-position:var(--pos-d,50% 25%)}
 .foto-sek .wrap{margin-top:0;padding-top:64px;padding-bottom:64px;display:flex}
 .foto-sek.text-rechts .wrap{justify-content:flex-end}
 .foto-sek .text{width:400px}
 .foto-sek.text-rechts .bild::after{top:0;height:auto;background:linear-gradient(90deg,rgba(255,255,255,0) 50%,rgba(255,255,255,.93) 66%)}
 .foto-sek.text-links .bild::after{top:0;height:auto;background:linear-gradient(270deg,rgba(255,255,255,0) 50%,rgba(255,255,255,.93) 66%)}
}
/* Tablet und fast quadratische Fenster: Foto und Text nebeneinander */
@media(min-width:900px) and (max-aspect-ratio:4/3){
 .foto-sek{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:70svh}
 .foto-sek.hero{min-height:calc(85svh - var(--kopf))}
 .foto-sek .bild,.foto-sek:not(.hero) .bild{height:auto;max-height:none;min-height:0}
 .foto-sek .bild::after{display:block;top:0;bottom:0;height:auto;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0) 55%,var(--weiss) 100%)}
 .foto-sek.text-links .bild::after{background:linear-gradient(270deg,rgba(255,255,255,0) 55%,var(--weiss) 100%)}
 .foto-sek .bild{position:relative}
 .foto-sek.text-links .bild{order:2}
 .foto-sek .wrap{margin:0;align-self:center;padding:56px 48px}
}
html{scroll-padding-top:var(--kopf)}
/* Farbflächen als Rhythmus (wie im ersten Entwurf), Höhe nach Inhalt */
.sek.dunkel h2,.sek.dunkel h3{color:#fff}
.sek.dunkel p{color:rgba(255,255,255,.9)}
.sek.dunkel .gedanken li{background:rgba(255,255,255,.08);color:#fff;border-left:3px solid var(--tuerkis);border-radius:0 10px 10px 0}
.sek.dunkel+.sek.getoent,.sek.getoent+.sek{border-top:0}
@media(min-width:900px){.sek{padding:96px 0}.zwei>div:first-child h2{position:sticky;top:calc(var(--kopf) + 24px)}}

/* Preise: echte, vergleichbare Angebote, deshalb als Karten */
.preise{display:grid;gap:16px;margin:28px 0 20px}
.preis{border:1px solid #d5e3ea;border-radius:12px;padding:24px;background:var(--weiss)}
.preis h3{margin:0 0 .2em}
.preis .betrag{font-family:var(--schrift-titel);font-weight:700;font-size:2rem;color:var(--marine);margin:0 0 .3em;font-variant-numeric:tabular-nums}
.preis p{margin:0;font-size:1rem}
.preis.hervor{border:2px solid var(--tuerkis);background:var(--tuerkis-hell)}
@media(min-width:800px){.preise{grid-template-columns:repeat(3,1fr)}}

/* Problem: eine Lesespalte als kleine Geschichte – Haken, Wiedererkennen, Entlastung */
.geschichte .wrap>*{max-width:680px}
.geschichte h2{font-size:clamp(1.75rem,3.2vw,2.6rem);max-width:16ch}
.stimmen{list-style:none;padding:0;margin:32px 0;display:grid;gap:0}
.stimmen li{font-family:var(--schrift-titel);font-weight:600;font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.35;color:var(--tuerkis);padding:16px 0;border-top:1px solid rgba(255,255,255,.14)}
.stimmen li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.aufloesung{font-family:var(--schrift-titel);font-weight:600;font-size:clamp(1.15rem,2vw,1.35rem);line-height:1.45;color:#fff!important;margin:0!important}
/* Zweispaltige Abschnitte: Überschrift und Text rücken zusammen, keine leere Mitte */
@media(min-width:900px){.zwei{grid-template-columns:minmax(0,400px) minmax(0,600px);justify-content:start;gap:64px}}

/* Geschichte-Abschnitte auf hellem Grund */
.sek.getoent .stimmen li{color:var(--tuerkis-dunkel);border-color:rgba(24,64,88,.15)}
.sek:not(.dunkel) .aufloesung{color:var(--marine)!important}
.fakten.gross{margin:28px 0}
.fakten.gross li{font-family:var(--schrift-titel);font-weight:600;font-size:1.2rem;padding:6px 0 6px 16px}
.fakten.gross small{font-family:var(--schrift-text);font-weight:400;font-size:.95rem;margin-top:2px}
/* Gegenüberstellung Tipp und Kompass */
.gegenueber{display:grid;gap:12px;margin:28px 0}
.gegenueber .seite{padding:18px 20px;border-radius:12px;background:var(--weiss);border:2px solid var(--tuerkis)}
.gegenueber .leise-seite{background:transparent;border:1px dashed rgba(24,64,88,.3);opacity:.75}
.gegenueber .marke{display:block;font-family:var(--schrift-titel);font-weight:700;font-size:1.05rem;margin-bottom:4px}
.gegenueber p{margin:0;font-size:1rem}
@media(min-width:700px){.gegenueber{grid-template-columns:1fr 1fr}}

/* Vertrauenszeile unter dem Hero-Button */
.vertrauen{list-style:none;padding:16px 0 0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;border-top:1px solid rgba(24,64,88,.15);max-width:440px}
.vertrauen li{font-size:.9rem;font-weight:500;display:flex;align-items:center;gap:8px}
.vertrauen li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tuerkis);flex:none}

/* Mein Weg: echte zeitliche Reihenfolge */
.ich .aufloesung{margin:4px 0 0!important}
.weg{list-style:none;padding:0;margin:28px 0 24px;border-left:2px solid var(--tuerkis);display:grid;gap:14px}
.weg li{position:relative;padding-left:20px;display:grid;grid-template-columns:52px 1fr;gap:10px;font-size:.95rem;line-height:1.45}
.weg li::before{content:"";position:absolute;left:-6px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--weiss);border:2px solid var(--tuerkis)}
.weg .jahr{font-family:var(--schrift-titel);font-weight:700;color:var(--tuerkis-dunkel);font-variant-numeric:tabular-nums}
@media(min-width:900px){.ich{align-items:start}.ich figure{position:sticky;top:calc(var(--kopf) + 24px)}}

/* 5er-Block: fünf echte Schritte + Gegenbeweis */
@media(min-width:900px){.ablauf.fuenf{grid-template-columns:repeat(5,1fr);gap:24px}}
.gegenbeweis{margin-top:36px;background:var(--weiss);border-radius:12px;padding:22px 24px;border-left:4px solid var(--tuerkis);max-width:760px}
.gegenbeweis h3{margin:0 0 .3em}
.gegenbeweis p{margin:0;font-size:1rem}

/* Geschichte mit Bild: Text links, Foto rechts (Handy: Foto unter dem Text) */
.mit-bild .wrap>*{max-width:none}
.mit-bild .textspalte>*{max-width:680px}
.seitenbild{margin:32px 0 0}
.seitenbild img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:70% 30%;border-radius:12px}
@media(min-width:1000px){
 .mit-bild .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:center}
 .seitenbild{margin:0}
 .seitenbild img{aspect-ratio:1/1}
}

/* ================= Überarbeitung nach Grafik-Review ================= */
/* Weiche Übergänge Weiß <-> Hellblau statt harter Kanten */
.sek.von-hell{background:linear-gradient(180deg,var(--tuerkis-hell) 0,var(--weiss) 160px)}
.sek.zu-hell{background:linear-gradient(180deg,var(--weiss) 0,var(--tuerkis-hell) 160px)}
.sek.preise-sek{padding-top:0}
/* Kleine Zusatztexte gut lesbar */
.fakten small,.belege dd{color:rgba(24,64,88,.78);opacity:1;font-size:.9rem}

/* Problem: Laptop zweispaltig, Gedanken rechts groß */
.problem .wrap>*{max-width:none}
.problem-links>*{max-width:600px}
.problem .stimmen{max-width:620px}
@media(min-width:1000px){
 .problem-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:72px;align-items:start}
 .problem .stimmen{margin:6px 0 0}
 .problem .stimmen li{font-size:1.65rem;padding:20px 0}
 .problem .aufloesung{grid-column:1/-1;margin-top:40px!important;max-width:820px}
}

/* Randabfallende Fotos mit weichem Auslauf (Kompass, Über mich) */
.randbild{position:relative;overflow:hidden;padding-top:0}
.randfoto{position:relative;margin:0;height:min(62svh,460px)}
.randfoto img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 30%);border-radius:0}
.randfoto::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(180deg,rgba(230,246,249,0),var(--tuerkis-hell))}
.randbild.links .randfoto::after{background:linear-gradient(180deg,rgba(255,255,255,0),var(--weiss))}
.randbild .wrap{position:relative;z-index:2;margin-top:-64px}
.randtext>*{max-width:600px}
@media(min-width:1000px){
 .randbild{padding:120px 0;min-height:680px;display:flex;align-items:center}
 .randbild .wrap{margin-top:0;width:100%}
 .randfoto{position:absolute;top:0;bottom:0;height:auto;width:50%}
 .randbild.rechts .randfoto{right:0}
 .randbild.links .randfoto{left:0;width:46%}
 .randfoto img{object-position:var(--pos-d,50% 30%)}
 .randbild.rechts .randfoto::after{inset:0;height:auto;background:linear-gradient(90deg,var(--tuerkis-hell) 0,rgba(230,246,249,0) 38%)}
 .randbild.links .randfoto::after{inset:0;height:auto;background:linear-gradient(270deg,var(--weiss) 0,rgba(255,255,255,0) 38%)}
 .randbild.rechts .randtext{max-width:540px}
 .randbild.links .randtext{margin-left:auto;max-width:560px}
}

/* Tipp und Kompass ohne Kästen: Typografie und eine feine Linie */
.gegenueber{display:grid;gap:0;margin:32px 0 0}
.gegenueber .seite,.gegenueber .leise-seite{background:none;border:0;border-radius:0;padding:18px 0;opacity:1}
.gegenueber .seite+.seite{border-top:1px solid rgba(24,117,133,.3)}
.gegenueber .tipp{color:rgba(24,64,88,.55)}
.gegenueber .marke{display:flex;align-items:center;gap:8px;font-size:1.1rem}
.gegenueber .kompass .marke{color:var(--marine)}
.nadel{width:20px;height:20px;color:var(--tuerkis-dunkel);flex:none}
@media(min-width:700px){
 .gegenueber{grid-template-columns:1fr 1fr}
 .gegenueber .seite{padding:4px 28px 4px 0}
 .gegenueber .seite+.seite{border-top:0;border-left:1px solid rgba(24,117,133,.3);padding:4px 0 4px 28px}
}

/* Drei Ebenen als Schichtung: oben hell, unten das dunkle Fundament */
.schichten{margin-top:32px;display:grid}
.schicht{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:20px 20px;align-items:start}
.schicht .nr{font-family:var(--schrift-titel);font-weight:700;font-size:1.6rem;line-height:1}
.schicht h3{margin:0 0 .25em;font-size:1.1rem}
.schicht p{margin:0;font-size:1rem}
.schicht.s3{background:var(--tuerkis-hell)}
.schicht.s3 .nr{color:var(--tuerkis-dunkel)}
.schicht.s2{background:#BFE6EC}
.schicht.s2 .nr{color:var(--tuerkis-dunkel)}
.schicht.s1{background:var(--tuerkis-dunkel);color:#fff}
.schicht.s1 h3,.schicht.fundament h3{color:#fff}
.schicht.fundament{background:var(--marine);color:#fff}
.schicht.s1 p,.schicht.fundament p{color:rgba(255,255,255,.9)}
@media(min-width:900px){.schicht{grid-template-columns:64px minmax(0,260px) 1fr;padding:24px 32px}.schicht>div{display:contents}.schicht h3{margin:2px 0 0}}

/* Landkarte: Text links, Höhenlinien-Karte rechts */
.landkarte{padding-top:24px}
.landkarte-bild{margin-top:28px}
.karte{display:block;width:100%;height:auto;max-height:300px}
.stationen{list-style:none;counter-reset:st;padding:0;margin:24px 0;display:grid;gap:14px}
.stationen li{counter-increment:st;display:grid;grid-template-columns:30px 1fr;gap:12px;line-height:1.5}
.stationen li::before{content:counter(st);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--tuerkis-dunkel);color:var(--tuerkis-dunkel);font-family:var(--schrift-titel);font-weight:700;font-size:.85rem}
.stationen strong{font-family:var(--schrift-titel);display:block}
.hinweis{font-family:var(--schrift-titel);font-weight:600;color:var(--marine)}
@media(min-width:1000px){
 .landkarte-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
 .landkarte-text>*{max-width:560px}
 .landkarte-bild{margin:0}
 .karte{max-height:none}
}

/* Track Record: weißer Grund, drei Gründe nebeneinander, Leitsatz groß */
.trackrecord .gruende{display:grid;gap:20px;margin:32px 0 0}
.trackrecord .gruende p{margin:0;padding-top:16px;border-top:2px solid var(--tuerkis);font-family:var(--schrift-titel);font-weight:600;font-size:1.15rem;line-height:1.4;max-width:none}
.leitsatz{margin:56px 0 0;padding:0;border:0;background:none;font-family:var(--schrift-titel);font-weight:700;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.25;color:var(--marine);max-width:24ch;text-wrap:balance}
@media(min-width:800px){.trackrecord .gruende{grid-template-columns:repeat(3,1fr);gap:32px}}

/* Gegenbeweis ohne Kasten: der Satz ist die Schlagzeile */
.gegenbeweis{background:none;border:0;border-radius:0;padding:0;margin-top:56px;max-width:720px}
.gegenbeweis::before{content:"";display:block;width:40px;height:3px;background:var(--tuerkis);margin-bottom:18px}
.gegenbeweis .gross{font-family:var(--schrift-titel);font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--marine);margin:0 0 .4em}

/* Preise ohne Karten: Zeilen mit feinen Linien, 5er-Block hervorgehoben */
.preisliste{margin:28px 0 20px;border-top:1px solid rgba(24,64,88,.15)}
.zeile{padding:20px 0;border-bottom:1px solid rgba(24,64,88,.15)}
.kopf-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.zeile h3{margin:0;font-size:1.2rem}
.zeile .betrag{font-family:var(--schrift-titel);font-weight:700;font-size:1.7rem;font-variant-numeric:tabular-nums;color:var(--marine)}
.zeile p{margin:6px 0 0;font-size:1rem;max-width:52ch}
.zeile .button{margin-top:14px}
.zeile.hervor{background:var(--weiss);margin:0 calc(-1 * var(--rand));padding:20px var(--rand)}
@media(min-width:900px){
 .preisliste{display:grid;grid-template-columns:repeat(3,1fr);border-top:0}
 .zeile{border-bottom:0;padding:8px 32px 24px;border-left:1px solid rgba(24,64,88,.15)}
 .zeile:first-child{border-left:0;padding-left:0}
 .zeile.hervor{margin:0;padding:8px 32px 24px;border-radius:0}
 .kopf-zeile{flex-direction:column;align-items:flex-start;gap:4px}
}

/* Abschluss-Foto: längerer Verlauf auf dem Handy */
@media(max-width:899px){.foto-sek.abschluss .bild::after{height:180px}}
/* Korrekturen */
.stationen li{display:block;position:relative;padding-left:44px}
.stationen li::before{position:absolute;left:0;top:0}
.belege{margin:22px 0 24px;display:grid;gap:12px}
.belege div{display:grid;gap:2px}
.belege dt{font-family:var(--schrift-titel);font-weight:600}
.belege dd{margin:0}

/* ===== Kopfzeile: Logo, Button, Menü-Symbol (Handy) – volle Navigation (Laptop) ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kopf{top:env(safe-area-inset-top,0px)}
.kopf-innen{flex-wrap:nowrap;padding-top:10px;padding-bottom:10px;min-height:64px}
.logo img{width:101px;display:block;border-radius:0}
@media(max-width:359px){.logo img{width:88px}}
.kopf-rechts{display:flex;align-items:center;gap:12px}
.menue-knopf{width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center;color:var(--marine)}
.menue-striche{position:relative;width:24px;height:12px;display:block}
.menue-striche::before,.menue-striche::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;transition:transform .25s ease,top .25s ease}
.menue-striche::before{top:0}.menue-striche::after{top:10px}
.menue-offen .menue-striche::before{top:5px;transform:rotate(45deg)}
.menue-offen .menue-striche::after{top:5px;transform:rotate(-45deg)}
@media(max-width:899px){
 .kopf .nav{position:fixed;inset:var(--kopf,64px) 0 0 0;background:var(--marine);display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:32px 24px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s;z-index:20}
 .kopf .nav a:not(.button){display:block;color:#fff;font-family:var(--schrift-titel);font-weight:600;font-size:1.6rem;padding:10px 0;text-decoration:none}
 .menue-offen .kopf .nav{opacity:1;visibility:visible}
 .menue-offen body{overflow:hidden}
}
@media(min-width:900px){
 .menue-knopf{display:none}
 .kopf-innen{display:grid;grid-template-columns:auto 1fr auto;gap:24px}
 .kopf .nav{order:2;justify-self:end;display:flex;gap:22px}
 .kopf-rechts{order:3}
 .logo img{width:130px}
}

/* ===== Buchungsleiste (nur Handy) ===== */
.buchungsleiste{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:15;display:flex;align-items:center;justify-content:center;height:52px;border-radius:999px;background:var(--marine);color:#fff;font-weight:600;text-decoration:none;box-shadow:0 6px 20px rgba(24,64,88,.25);transform:translateY(140%);transition:transform .3s ease}
.buchungsleiste.an{transform:none}
.buchungsleiste:focus-visible{outline:3px solid var(--tuerkis);outline-offset:3px}
@media(min-width:900px){.buchungsleiste{display:none}}
@media(prefers-reduced-motion:reduce){.buchungsleiste,.kopf .nav,.menue-striche::before,.menue-striche::after{transition:none}}
/* Gegenbeweis als ruhige Karte (wie vorher) */
.gegenbeweis-box{margin-top:36px;background:var(--weiss);border-radius:12px;padding:22px 24px;border-left:4px solid var(--tuerkis);max-width:760px}
.gegenbeweis-box h3{margin:0 0 .3em}
.gegenbeweis-box p{margin:0;font-size:1rem}
.preis .button{margin-top:14px}

/* ===== Über mich auf dem Handy: eigenes Muster (Porträt im Rahmen statt Vollbild) ===== */
@media(max-width:999px){
 .randbild.links{padding-top:64px}
 .randbild.links .randfoto{height:auto;width:78%;margin:0 0 0 auto;margin-right:var(--rand);position:relative;aspect-ratio:4/5}
 .randbild.links .randfoto::before{content:"";position:absolute;inset:18px 18px -18px -18px;background:var(--tuerkis-hell);z-index:0;border-radius:4px}
 .randbild.links .randfoto::after{display:none}
 .randbild.links .randfoto img{position:relative;z-index:1;height:100%;border-radius:4px}
 .randbild.links .wrap{margin-top:44px}
}
@media(max-width:999px){
 .randbild.links{padding-top:24px}
 .randbild.links .randfoto::before{background:#BFE6EC}
}

/* ===== Über mich überall als gerahmtes Porträt (eigene Form, kein Vollbild) ===== */
.randbild.links{display:block;min-height:0;padding:72px 0}
.randbild.links .randfoto{position:relative;height:auto;width:78%;max-width:440px;aspect-ratio:4/5;margin:0 var(--rand) 0 auto;inset:auto}
.randbild.links .randfoto::before{content:"";position:absolute;inset:18px 18px -18px -18px;background:#BFE6EC;border-radius:4px;z-index:0}
.randbild.links .randfoto::after{display:none!important}
.randbild.links .randfoto img{position:relative;z-index:1;width:100%;height:100%;border-radius:4px;object-position:var(--pos,52% 25%)}
.randbild.links .wrap{margin-top:48px}
@media(min-width:1000px){
 .randbild.links{padding:112px 0}
 .randbild.links{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:72px;align-items:center;max-width:var(--breite);margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
 .randbild.links .randfoto{width:100%;margin:0 0 18px 18px;position:relative}
 .randbild.links .wrap{margin:0;padding:0;max-width:none}
 .randbild.links .randtext{margin-left:0;max-width:560px}
}
@media(min-width:700px) and (max-width:999px){
 .randbild.links{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px;align-items:center;padding-left:var(--rand);padding-right:var(--rand)}
 .randbild.links .randfoto{width:100%;margin:0 0 18px 18px}
 .randbild.links .wrap{margin:0;padding:0}
}
/* Fundament: breiter als die Ebenen darüber, mit Logo-Zeichen statt Zahl */
.schichten{border-radius:0}
.schicht.s3,.schicht.s2,.schicht.s1{margin:0 14px}
.schicht.fundament{border-radius:0;margin-top:0;padding-top:22px;padding-bottom:22px}
.schicht .symbol{display:flex;align-items:center;color:var(--tuerkis)}
.schicht .symbol svg{width:30px;height:30px}
@media(min-width:900px){.schicht.s3,.schicht.s2,.schicht.s1{margin:0 32px}}
/* Spalten des Fundaments bündig mit den Ebenen darüber */
.schicht.fundament{padding-left:34px;padding-right:34px}
@media(min-width:900px){.schicht.fundament{padding-left:64px;padding-right:64px}}
/* Landkarte: Weg und Stationen im Rost-Akzent, Nummern im Text identisch */
.stationen li::before{border:0;background:var(--rost);color:#fff}

/* Ich und die Welt */
.ichwelt-text>*{max-width:560px}
.zwei-seiten{display:grid;gap:18px;margin:24px 0}
.zwei-seiten div{padding-left:16px;border-left:3px solid var(--tuerkis)}
.zwei-seiten div+div{border-left-color:var(--marine)}
.zwei-seiten dt{font-family:var(--schrift-titel);font-weight:700;font-size:1.15rem}
.zwei-seiten dd{margin:4px 0 0}
.ichwelt-bild{margin-top:28px}
.venn{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
@media(min-width:1000px){
 .ichwelt-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
 .ichwelt-bild{margin:0}
}

/* Über mich: Mein Weg an der Börse */
.anfang .wrap>*{max-width:680px}
.mein-weg{list-style:none;counter-reset:mw;padding:0;margin:28px 0;display:grid;gap:0;border-left:2px solid var(--tuerkis);margin-left:13px}
.mein-weg li{counter-increment:mw;position:relative;padding:0 0 22px 30px;line-height:1.5}
.mein-weg li:last-child{padding-bottom:0}
.mein-weg li::before{content:counter(mw);position:absolute;left:-15px;top:0;width:28px;height:28px;border-radius:50%;background:var(--weiss);border:2px solid var(--tuerkis-dunkel);color:var(--tuerkis-dunkel);display:grid;place-items:center;font-family:var(--schrift-titel);font-weight:700;font-size:.85rem}
.mein-weg li:last-child::before{background:var(--marine);border-color:var(--marine);color:#fff}
.mein-weg strong{font-family:var(--schrift-titel);display:block}
/* Romeo: helles Weiß statt Türkis */
.randbild.rechts.romeo{background:var(--weiss)}
.randbild.rechts.romeo .randfoto::after{background:linear-gradient(180deg,rgba(255,255,255,0),var(--weiss))}
@media(min-width:1000px){.randbild.rechts.romeo .randfoto::after{background:linear-gradient(90deg,var(--weiss) 0,rgba(255,255,255,0) 38%)}}
/* So arbeite ich */
.gruende-hell{display:grid;gap:24px;margin-top:28px}
.gruende-hell div{border-top:2px solid var(--tuerkis);padding-top:14px}
.gruende-hell h3{margin:0 0 .3em}
.gruende-hell p{margin:0;font-size:1rem}
@media(min-width:800px){.gruende-hell{grid-template-columns:repeat(3,1fr);gap:32px}}
.belege-raster{margin-top:24px}
@media(min-width:800px){.belege-raster{grid-template-columns:repeat(2,1fr);gap:24px 48px}}
/* Kurzbelege: eine ruhige Zeile */
.kurzbelege{list-style:none;padding:16px 0 0;margin:24px 0 20px;display:flex;flex-wrap:wrap;gap:8px 20px;border-top:1px solid rgba(24,64,88,.15)}
.kurzbelege li{font-family:var(--schrift-titel);font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:8px}
.kurzbelege li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tuerkis)}
/* Landkarte als Ergebnis direkt nach dem 5er-Block, nahtlos auf demselben Grund */
.sek.getoent:has(.gegenbeweis-box){padding-bottom:24px}
.sek.landkarte.nach-block{padding-top:48px}
.landkarte.nach-block .karte path[stroke="#58C0D0"]{stroke:#7FCFDB}
/* Landkarte klarer und integriert: oben bündig mit der Überschrift, größer */
.landkarte .karte{max-height:none}
@media(min-width:1000px){
 .landkarte-raster{align-items:start}
 .landkarte-bild{margin-top:-24px;margin-right:calc(-1 * var(--rand))}
}

/* ===== 5er-Block als Weg: eine Nummerierung, Karte zeigt dieselben 5 Stationen ===== */
.block5-kopf>*{max-width:640px}
.block5-raster{display:grid;gap:12px;margin-top:28px}
.stationen5{list-style:none;counter-reset:s5;padding:0;margin:0;display:grid;gap:0;position:relative}
.stationen5 li{counter-increment:s5;position:relative;padding:0 0 24px 52px}
.stationen5 li::before{content:counter(s5);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;background:var(--rost);color:#fff;display:grid;place-items:center;font-family:var(--schrift-titel);font-weight:700;font-size:.95rem;z-index:1}
.stationen5 li.ziel::before{background:var(--marine)}
.stationen5 li:not(:last-child)::after{content:"";position:absolute;left:16px;top:34px;bottom:0;border-left:2px dotted var(--rost);opacity:.6}
.stationen5 h3{margin:4px 0 .2em;font-size:1.1rem}
.stationen5 p{margin:0;font-size:1rem;max-width:44ch}
.block5-karte .karte{display:block;width:100%;max-width:420px;margin:0 auto;height:auto}
.block5-fuss{display:grid;gap:20px;margin:28px 0 18px}
.ergebnis h3{margin:0 0 .5em}
.ergebnis ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.ergebnis li{font-family:var(--schrift-titel);font-weight:600;padding-left:28px;position:relative}
.ergebnis li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:9px;border-left:2.5px solid var(--tuerkis-dunkel);border-bottom:2.5px solid var(--tuerkis-dunkel);transform:rotate(-45deg)}
.block5-fuss .gegenbeweis-box{margin:0;max-width:none}
@media(max-width:999px){.block5-karte{order:-1}.block5-karte .karte{max-width:300px}}
@media(min-width:1000px){
 .block5-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
 .block5-karte .karte{max-width:520px}
 .block5-fuss{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:stretch;margin-top:40px}
 .ergebnis{padding:22px 0}
}

/* ===== Onepager: Anker, FAQ, Kontaktzeile, LinkedIn ===== */
section[id]{scroll-margin-top:0}
.faq-liste{display:grid;margin:24px 0;border-top:1px solid rgba(24,64,88,.15);max-width:760px}
.faq-liste details{border-bottom:1px solid rgba(24,64,88,.15)}
.faq-liste summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-family:var(--schrift-titel);font-weight:600;font-size:1.08rem;position:relative}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--tuerkis-dunkel);border-bottom:2px solid var(--tuerkis-dunkel);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq-liste details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-liste details p{margin:0 0 18px;max-width:62ch}
.seitenkopf{padding-top:72px;padding-bottom:24px}
.seitenkopf h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 .4em}
.seitenkopf .wrap>*{max-width:640px}
.faq-seite{padding-top:48px;padding-bottom:48px}
.dunkel .button{background:var(--tuerkis);border-color:var(--tuerkis);color:var(--marine)!important}
.kontaktzeile{font-size:.95rem;margin-top:14px!important}
.kontaktzeile a{color:inherit;font-weight:600}
.ln-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.ln-link svg{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){.faq-liste summary::after{transition:none}}

/* Ohne Aufgaben-Box: Ergebnis allein, auf breiten Bildschirmen als Zeile */
.block5-fuss:not(:has(.gegenbeweis-box)){grid-template-columns:1fr}
@media (min-width:900px){.block5-fuss:not(:has(.gegenbeweis-box)) .ergebnis ul{display:flex;flex-wrap:wrap;gap:12px 40px}}

/* Rechtstexte: ruhig und gut lesbar */
.rechtstext{padding-top:8px;padding-bottom:72px}
.rechtstext .wrap>*{max-width:720px}
.rechtstext h2{font-size:clamp(1.25rem,2.2vw,1.5rem);margin:2.2em 0 .5em}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{font-size:1.05rem;margin:1.6em 0 .3em}
.rechtstext p,.rechtstext li{font-size:1rem;line-height:1.65}
.rechtstext ul{padding-left:1.2em}
.rechtstext a{overflow-wrap:anywhere}

/* ===== Über mich als ruhige Unterseite ===== */
.dachzeile{font-family:var(--schrift-titel);font-weight:600;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tuerkis-dunkel);margin:0 0 .6em}
.ueber-kopf{padding-top:56px;padding-bottom:56px}
.ueber-kopf h1{font-size:clamp(2rem,6vw,3rem);line-height:1.12;margin:0 0 .4em;text-wrap:balance}
.ueber-kopf-raster{display:grid;gap:40px}
.rahmenfoto{position:relative;margin:0 18px 18px 0;aspect-ratio:4/5;max-width:420px}
.rahmenfoto::before{content:"";position:absolute;inset:18px -18px -18px 18px;background:#BFE6EC;border-radius:4px}
.rahmenfoto img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 30%);border-radius:4px;display:block}
.rahmenfoto figcaption{position:relative;z-index:1;font-size:.85rem;margin-top:28px;opacity:.75}
.lesespalte>*{max-width:680px}
.zeitweg{list-style:none;counter-reset:w;padding:0;margin:28px 0;display:grid;gap:0}
.zeitweg li{counter-increment:w;position:relative;padding:0 0 26px 56px}
.zeitweg li::before{content:counter(w);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--marine);color:#fff;font-family:var(--schrift-titel);font-weight:700;display:grid;place-items:center;font-size:.95rem}
.zeitweg li::after{content:"";position:absolute;left:17px;top:40px;bottom:4px;width:2px;background:var(--tuerkis);opacity:.5}
.zeitweg li:last-child{padding-bottom:0}
.zeitweg li:last-child::after{display:none}
.zeitweg li:last-child::before{background:var(--tuerkis-dunkel)}
.zeitweg h3{margin:.25em 0 .2em}
.zeitweg p{margin:0}
.ueber-persoenlich-raster{display:grid;gap:40px;align-items:center}
.ueber-persoenlich .rahmenfoto{margin-left:auto;margin-right:18px}
.dunkel-rahmen::before{background:rgba(88,192,208,.35)}
.dunkel-rahmen figcaption{color:#fff}
.ueber-abschluss{text-align:left}
@media(min-width:900px){
 .ueber-kopf{padding-top:88px;padding-bottom:88px}
 .ueber-kopf-raster{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:72px;align-items:center}
 .ueber-kopf .rahmenfoto{justify-self:end;width:100%}
 .ueber-persoenlich-raster{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:72px}
 .ueber-persoenlich .rahmenfoto{width:100%}
}

/* Über mich: Qualifikationen als Karten */
.lesebreite{max-width:680px}
.qualis{display:grid;gap:16px;margin-top:32px}
.quali{background:var(--weiss);border-radius:12px;padding:24px 24px 22px;border-top:3px solid var(--tuerkis)}
.quali h3{margin:0 0 .35em}
.quali-detail{font-size:.95rem;color:rgba(24,64,88,.78);margin:0 0 14px}
.fuer-dich{margin:0;font-weight:500}
.fuer-dich span{display:block;font-family:var(--schrift-titel);font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tuerkis-dunkel);margin-bottom:2px}
@media(min-width:760px){.qualis{grid-template-columns:1fr 1fr;gap:20px}}

/* Waagerechtes Logo in der Kopfzeile */
.logo img{width:auto;height:36px;border-radius:0}
@media(max-width:359px){.logo img{height:30px}}
@media(min-width:900px){.logo img{height:46px;width:auto}}

/* Tiefe (Parallax light): nur Hero-Foto und Weg-Foto, Bild bleibt in seinem Rahmen */
figure.tiefe{overflow:hidden}
.tiefe-an figure.tiefe img{transform:translate3d(0,var(--tiefe,0px),0) scale(1.1);will-change:transform}
@media(prefers-reduced-motion:reduce){.tiefe-an figure.tiefe img{transform:none}}

/* Handy: Kompass und "Was dir Richtung gibt" gehören zusammen, kein Loch dazwischen */
@media(max-width:899px){
 .sek.getoent.randbild.rechts{padding-bottom:28px}
 .sek.getoent.randbild.rechts+.sek.von-hell{padding-top:36px;background:linear-gradient(180deg,var(--tuerkis-hell) 0,var(--weiss) 72px)}
}

/* Hero am Computer: Foto ganz zeigen (Kopf und Schultern), links ausgerichtet, nach rechts weich ins Weiß */
@media(min-width:900px) and (min-aspect-ratio:4/3){
 .foto-sek.hero .bild{inset:0 auto 0 0;height:100%;width:auto;aspect-ratio:3/2;max-width:100%}
 .foto-sek.hero .bild img{object-position:50% 50%}
 .foto-sek.hero .bild::after{display:block;inset:0;top:0;height:auto;background:linear-gradient(90deg,rgba(255,255,255,0) 52%,rgba(255,255,255,.9) 82%,var(--weiss) 100%)}
}

/* Computer: Kopfzeile über die ganze Breite, Logo ganz links wie das Foto darunter */
@media(min-width:900px){
 .kopf .container{max-width:none;padding-left:clamp(24px,3vw,48px);padding-right:clamp(24px,3vw,48px)}
}
/* Computer: Person im Hero weiter links (linker Fensterrahmen fällt dafür weg) */
@media(min-width:900px) and (min-aspect-ratio:4/3){
 .foto-sek.hero .bild{transform:translateX(-14%)}
}
@media(min-width:900px) and (min-aspect-ratio:4/3){
 .foto-sek.hero .bild::after{right:-3px;background:linear-gradient(90deg,rgba(255,255,255,0) 50%,rgba(255,255,255,.9) 78%,var(--weiss) 92%)}
}
@media(min-width:900px) and (min-aspect-ratio:4/3){
 .foto-sek.hero .bild{clip-path:inset(0 3px 0 0)}
}
@media(min-width:900px) and (min-aspect-ratio:4/3){
 .tiefe-an .foto-sek.hero figure.tiefe img{will-change:auto;transform:translateY(var(--tiefe,0px)) scale(1.1)}
}
@media(min-width:900px) and (min-aspect-ratio:4/3){
 .foto-sek.hero .bild{clip-path:none;-webkit-mask-image:linear-gradient(90deg,#000 48%,rgba(0,0,0,.12) 80%,transparent 92%);mask-image:linear-gradient(90deg,#000 48%,rgba(0,0,0,.12) 80%,transparent 92%)}
 .foto-sek.hero .bild::after{display:none}
}
/* Hero am Computer: Foto am Text verankert, nicht am linken Rand. Person leicht links, Blick führt zum Spruch */
@media(min-width:900px) and (min-aspect-ratio:4/3){
 .foto-sek.hero .bild{transform:none;left:auto;right:max(calc(50% - 320px),240px)}
}
@media(min-width:900px) and (min-aspect-ratio:4/3){
 .foto-sek.hero .bild{left:0;width:auto;aspect-ratio:auto}
 .foto-sek.hero .bild img{object-position:50% 22%}
}

/* Anklickbare Zitate im dunklen Problem-Abschnitt */
.zitate-klick li{padding:0}
.zitate-klick a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;color:inherit;text-decoration:none;cursor:pointer}
.zitate-klick .zitat-pfeil{flex:none;width:24px;height:24px;opacity:.55;transition:transform .2s ease,opacity .2s ease}
.zitate-klick a:hover,.zitate-klick a:focus-visible{color:#fff}
.zitate-klick a:hover .zitat-pfeil,.zitate-klick a:focus-visible .zitat-pfeil{opacity:1;transform:translateX(4px)}
.zitate-klick a:active{color:#fff}
.zitate-hinweis{font-size:.95rem;color:rgba(255,255,255,.7)!important;margin:-16px 0 24px!important}
.zitat-echo{font-size:1.05rem;color:var(--marine);margin:0 0 1em}
.zitat-echo .echo-satz{display:block;font-family:var(--schrift-titel);font-weight:600;color:var(--tuerkis-dunkel);margin-bottom:2px}
@media(prefers-reduced-motion:reduce){.zitate-klick .zitat-pfeil{transition:none}}
/* Echo als kleiner Dialog über "Lass uns sprechen." */
.zitat-echo{margin:0 0 28px;padding:4px 0 4px 18px;border-left:3px solid var(--tuerkis);font-size:inherit}
.zitat-echo p{margin:0!important;max-width:34ch}
.zitat-echo .echo-satz{display:block;font-family:var(--schrift-titel);font-weight:600;font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.3;color:var(--tuerkis-dunkel);margin:0 0 8px!important}
.zitat-echo .echo-antwort{font-size:clamp(1.1rem,1.6vw,1.25rem);line-height:1.45;color:var(--marine);font-weight:500}
.zitat-echo.an{animation:echoEin .5s ease both}
@keyframes echoEin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.zitat-echo.an{animation:none}}
@media(max-width:899px){.foto-sek .zitat-echo{margin-top:64px}}
.zitate-klick .zitat-pfeil{opacity:.85}

/* Landkarte: Weg entsteht, Stationen ploppen auf, Ziel leuchtet */
.karte .station{transform-box:fill-box;transform-origin:center;transition:transform .25s ease,opacity .25s ease}
.karte .ziel-ring{opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
.karte.weg-wartet .weg-maske{stroke-dasharray:1;stroke-dashoffset:1}
.karte.weg-wartet .station{opacity:0;transform:scale(.4)}
.karte.weg-los .weg-maske{animation:wegZeichnen var(--dauer,2200ms) cubic-bezier(.45,.05,.4,1) forwards}
.karte.weg-los .station{animation:stationPlopp .45s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:var(--verz,0ms)}
.karte.weg-los .ziel-ring{animation:zielLeuchten 1.6s ease-out forwards;animation-delay:calc(var(--dauer,2200ms) + 150ms)}
@keyframes wegZeichnen{to{stroke-dashoffset:0}}
@keyframes stationPlopp{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
@keyframes zielLeuchten{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
/* Hover am Computer: eine Etappe hervorheben */
.karte .station{cursor:default}
.stationen5 li{transition:opacity .25s ease}
@media(prefers-reduced-motion:reduce){.karte .station,.stationen5 li{transition:none}}
/* Stationen fliegen leicht von unten ein */
.karte.weg-wartet .station{transform:translateY(14px) scale(.5)}
@keyframes stationPlopp{0%{opacity:0;transform:translateY(14px) scale(.5)}65%{opacity:1;transform:translateY(-3px) scale(1.15)}100%{opacity:1;transform:none}}

/* Bewegung reduzieren: Weg zeichnet sich trotzdem, Stationen blenden nur ein, kein Ring */
.karte.weg-ruhig.weg-wartet .station{transform:none}
.karte.weg-ruhig.weg-los .station{animation-name:stationEin;animation-duration:.4s;animation-timing-function:ease}
.karte.weg-ruhig.weg-los .ziel-ring{animation:none}
@keyframes stationEin{from{opacity:0}to{opacity:1}}

/* Preise: Erstgespräch dunkel, vier Optionen, ein Termin-Button darunter */
.preis.dunkel-karte{background:var(--marine);border-color:var(--marine);color:#fff}
.preis.dunkel-karte h3,.preis.dunkel-karte .betrag{color:#fff}
.preis.dunkel-karte p{color:rgba(255,255,255,.9)}
.preis .betrag-text{font-size:1.5rem;line-height:1.25;padding-top:.2em}
@media(min-width:700px){.preise{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.preise{grid-template-columns:repeat(4,1fr)}}
.preise-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:4px 0 24px!important;max-width:none!important}
.preise-aktion span{font-size:.95rem;color:var(--marine);opacity:.8}
@media(min-width:900px){#preise h2{max-width:none}}
/* Preiskarten einheitlich: Titel, Preis, Eckdaten, ein Satz */
.preis{display:flex;flex-direction:column}
.preis h3{font-size:1.1rem;margin:0 0 10px}
.preis .betrag{display:flex;align-items:baseline;gap:8px;min-height:2.6rem;margin:0 0 6px;font-size:2rem;line-height:1.2}
.preis .betrag small{font-family:var(--schrift-text);font-weight:500;font-size:.8rem;opacity:.7}
.preis .betrag-text{font-size:2rem}
.preis .eckdaten{font-weight:600;font-size:.95rem!important;color:var(--tuerkis-dunkel);margin:0 0 12px!important}
.preis.dunkel-karte .eckdaten{color:var(--tuerkis)}
.preis p:last-child{line-height:1.5}
.fuss .hinweis{color:#fff!important;opacity:.75}
/* Über mich: Ganzkörperfoto am Computer vollständig (mit Sneakern), am Handy Kopf bis Knie */
@media(min-width:900px){.ueber-kopf .rahmenfoto.ganzkoerper{aspect-ratio:2/3;max-width:400px}.ueber-kopf .rahmenfoto.ganzkoerper img{object-position:50% 50%}}
/* Über mich: kurze persönliche Zeilen im Kopf */
.kurz-ich{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:10px;max-width:520px}
.kurz-ich li{position:relative;padding-left:22px;font-size:1.05rem;line-height:1.45}
.kurz-ich li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--tuerkis)}
.kurz-ich strong{font-family:var(--schrift-titel);color:var(--marine)}
/* Über mich: Ziel mit Foto */
.ziel-raster{display:grid;gap:28px;align-items:center}
.ziel-foto{margin:0;border-radius:6px;overflow:hidden;aspect-ratio:4/3}
.ziel-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:45% 40%}
.ziel-text h2{margin-top:0}
@media(min-width:900px){.ziel-raster{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px}.ziel-foto{aspect-ratio:3/2}}
.ziel-foto,.ziel-foto[class]{aspect-ratio:5/4}
@media(min-width:900px){.ziel-foto{aspect-ratio:5/4}}
.ziel-foto img{object-position:50% 30%}
/* Über mich kompakt */
.qualis.kompakt{display:grid;gap:20px;margin-top:24px}
.qualis.kompakt .quali h3{margin:0 0 6px}
.qualis.kompakt .quali p{margin:0;font-size:1rem}
@media(min-width:700px){.qualis.kompakt{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.qualis.kompakt{grid-template-columns:repeat(4,1fr)}}
.erklaeren-raster{display:grid;gap:32px;align-items:center}
.erklaeren-foto{margin:0;border-radius:6px;overflow:hidden;aspect-ratio:4/3}
.erklaeren-foto img{display:block;width:100%;height:100%;object-fit:cover}
@media(min-width:900px){.erklaeren-raster:has(.erklaeren-foto:not([hidden])){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}}
/* Venn-Animation */
.venn{overflow:visible}
.venn.venn-wartet .venn-welt{transform:translateX(-38px)}
.venn.venn-wartet .venn-du{transform:translateX(38px)}
.venn.venn-wartet .venn-mitte{opacity:0}
.venn.venn-los .venn-welt,.venn.venn-los .venn-du{animation:vennZusammen 1s cubic-bezier(.3,.7,.3,1) forwards}
.venn.venn-los .venn-mitte{animation:vennMitte .6s ease forwards;animation-delay:.85s}
@keyframes vennZusammen{to{transform:none}}
@keyframes vennMitte{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.venn.venn-wartet .venn-welt,.venn.venn-wartet .venn-du{transform:none}.venn.venn-los .venn-welt,.venn.venn-los .venn-du{animation:none}}
/* Fußzeile: vier Spalten, Leiste darunter */
.fuss{padding:56px 0 0}
.fuss-raster{display:grid;gap:32px;padding-bottom:40px}
.fuss-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff!important;font-family:var(--schrift-titel);font-weight:700;font-size:1.25rem}
.fuss-logo img{width:36px;height:36px}
.fuss-marke p{margin:14px 0 0;max-width:30ch;color:rgba(255,255,255,.8);line-height:1.5}
.fuss-spalte{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.fuss-spalte a,.fuss-spalte span{color:rgba(255,255,255,.88)!important;text-decoration:none;line-height:1.4}
.fuss-spalte a:hover,.fuss-spalte a:focus-visible{color:#fff!important;text-decoration:underline}
.fuss-titel{margin:0 0 4px!important;font-family:var(--schrift-titel);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tuerkis)!important}
.fuss-leiste{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-top:20px;padding-bottom:24px;border-top:1px solid rgba(255,255,255,.15);font-size:.85rem;color:rgba(255,255,255,.7)}
.fuss-leiste .ln-link{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.85)!important;text-decoration:none}
.fuss-leiste .ln-link svg{width:16px;height:16px}
.fuss-leiste .ln-link:hover{color:#fff!important}
@media(min-width:700px){.fuss-raster{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.fuss-raster{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}}
@media(max-width:899px){.fuss-leiste{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}}
.fuss .container{max-width:var(--breite);padding-left:var(--rand);padding-right:var(--rand)}
@media(max-width:699px){.fuss-raster{grid-template-columns:1fr 1fr;gap:28px 20px}.fuss-marke,.fuss-spalte[aria-label="Kontakt"]{grid-column:1/-1}}

/* Große Bildschirme: Fotos am Text verankern statt am Bildschirmrand (Text nie über der Person) */
@media(min-width:900px) and (min-aspect-ratio:4/3){
 .foto-sek.text-rechts:not(.hero) .bild{inset:0 auto 0 0;right:max(calc(50% - 320px),240px);width:auto;transform:none;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,rgba(0,0,0,.12) 85%,transparent 96%);mask-image:linear-gradient(90deg,#000 55%,rgba(0,0,0,.12) 85%,transparent 96%)}
 .foto-sek.text-links .bild{inset:0 0 0 auto;left:max(calc(50% - 320px),240px);width:auto;transform:none;
  -webkit-mask-image:linear-gradient(270deg,#000 55%,rgba(0,0,0,.12) 85%,transparent 96%);mask-image:linear-gradient(270deg,#000 55%,rgba(0,0,0,.12) 85%,transparent 96%)}
 .foto-sek.text-rechts:not(.hero) .bild img,.foto-sek.text-links .bild img{object-position:50% 25%}
 .foto-sek.text-rechts:not(.hero) .bild::after,.foto-sek.text-links .bild::after{display:none}
}
/* Fußzeile so breit wie die Kopfzeile: Logo oben und unten auf einer Linie */
@media(min-width:900px){.fuss .container{max-width:none;padding-left:clamp(24px,3vw,48px);padding-right:clamp(24px,3vw,48px)}}
/* Fußzeile ohne Seiten-Spalte, Pfeil nach oben ganz rechts */
.fuss{position:relative}
@media(min-width:1000px){.fuss-raster{grid-template-columns:1.4fr 1fr 1fr}}
@media(max-width:699px){.fuss-raster{grid-template-columns:1fr}.fuss-spalte[aria-label="Rechtliches"]{grid-column:auto}}
.nach-oben{position:absolute;top:52px;right:clamp(20px,3vw,48px);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.35);color:#fff!important;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.nach-oben svg{width:22px;height:22px}
.nach-oben:hover,.nach-oben:focus-visible{background:var(--tuerkis);border-color:var(--tuerkis);color:var(--marine)!important;transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.nach-oben{transition:none}}
.fuss-logo img{width:48px;height:48px}

/* Fußzeile Variante A: schlanke Zeile */
.fuss.schlank{padding:28px 0 calc(18px + env(safe-area-inset-bottom,0px))}
.schlank-in{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
@media(min-width:900px){.schlank-in{padding-left:clamp(24px,3vw,48px);padding-right:clamp(24px,3vw,48px)}}
.schlank-logo img{width:40px;height:40px;display:block}
.schlank-links{display:flex;flex-wrap:wrap;gap:10px 28px;flex:1;justify-content:center}
.schlank-links a{color:rgba(255,255,255,.88)!important;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.schlank-links a:hover,.schlank-links a:focus-visible{color:#fff!important;text-decoration:underline}
.schlank-links svg{width:15px;height:15px}
.fuss.schlank .nach-oben{position:static}
.schlank-copy{text-align:center;font-size:.8rem;color:rgba(255,255,255,.55)!important;margin:18px 0 0}
@media(max-width:700px){.schlank-in{justify-content:space-between}.schlank-links{order:3;flex-basis:100%;flex-direction:column;justify-content:flex-start;gap:12px}.schlank-copy{text-align:left;padding:0 20px}}
/* Fußzeile ohne Logo: Links linksbündig, Pfeil rechts */
.schlank-links{justify-content:flex-start}
.schlank-copy{text-align:left;padding-left:max(20px,env(safe-area-inset-left,0px))}
@media(min-width:900px){.schlank-copy{padding-left:clamp(24px,3vw,48px)}}
@media(max-width:700px){.schlank-links{order:0;flex-basis:auto;flex:1}.schlank-in{align-items:flex-start}}
.erklaeren-foto{aspect-ratio:1/1}
.erklaeren-foto img{object-position:45% 30%}
@media(min-width:900px){.erklaeren-foto{aspect-ratio:4/5;max-width:440px;justify-self:end;width:100%}}

/* Einheitlicher Rhythmus zwischen den Abschnitten */
.sek,.sek.randbild.links{padding-top:56px;padding-bottom:56px}
@media(min-width:900px){.sek,.sek.randbild.links{padding-top:80px;padding-bottom:80px}}
.sek .wrap>:last-child,.sek .wrap>div>:last-child,.sek .randtext>:last-child,.sek .block5-fuss>:last-child,.sek .faq-liste>:last-child{margin-bottom:0!important}
.sek .leise:last-child,.preise-aktion{margin-bottom:0!important}
.sek.faq-seite{padding-top:36px;padding-bottom:36px}
.sek.seitenkopf{padding-bottom:16px}
.sek.ueber-kopf{padding-top:56px;padding-bottom:56px}
@media(min-width:900px){.sek.ueber-kopf{padding-top:72px;padding-bottom:72px}}
/* Kompass -> "Was dir Richtung gibt" bleibt eng verbunden (Handy) */
@media(max-width:899px){.sek.getoent.randbild.rechts+.sek.von-hell{padding-top:28px}}
/* Fußzeile mittig */
.schlank-in{justify-content:center}
.schlank-links{justify-content:center;flex:none}
.schlank-copy{text-align:center!important;padding-left:0!important}
@media(max-width:700px){.schlank-in{justify-content:center}.schlank-links{flex-direction:column;align-items:center;flex-basis:100%}}
/* Schwebender Pfeil nach oben ab der Seitenhälfte */
.nach-oben.schwebend{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));top:auto;z-index:14;background:var(--marine);border:1.5px solid rgba(255,255,255,.35);box-shadow:0 6px 18px rgba(24,64,88,.3);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease,visibility .25s,background .2s ease}
.nach-oben.schwebend.sichtbar{opacity:1;visibility:visible;transform:none}
.nach-oben.schwebend:hover,.nach-oben.schwebend:focus-visible{background:var(--tuerkis);color:var(--marine)!important}
@media(max-width:899px){.nach-oben.schwebend{bottom:calc(76px + env(safe-area-inset-bottom,0px));width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.nach-oben.schwebend{transition:none}}

/* Über mich: kleinere Fotos, mehr Luft */
.ueber-kopf .rahmenfoto,.ueber-persoenlich .rahmenfoto{max-width:300px}
.ziel-foto{max-width:320px;aspect-ratio:4/5!important}
.ziel-foto img{object-position:42% 35%}
.rahmenfoto::before{inset:12px -12px -12px 12px}
.ueber-persoenlich .rahmenfoto::before{opacity:.55}
@media(min-width:900px){
 .ueber-kopf .rahmenfoto.ganzkoerper{max-width:330px}
 .ueber-kopf-raster{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:96px}
 .ueber-persoenlich-raster{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:96px;align-items:center}
 .ueber-persoenlich .rahmenfoto{max-width:340px;aspect-ratio:4/5;justify-self:end}
 .ziel-raster{grid-template-columns:minmax(0,340px) minmax(0,1fr)!important;gap:96px!important}
 .ziel-foto{max-width:340px}
}
@media(max-width:899px){.ueber-kopf .rahmenfoto,.ueber-persoenlich .rahmenfoto,.ziel-foto{width:78%;margin-left:0}}

/* Handy-Menü: kompakte Fläche statt Vollbild, Kontakt-Symbole unten */
@media(max-width:899px){
 .kopf .nav{inset:var(--kopf,64px) 0 auto 0;padding:16px 24px 24px;border-radius:0 0 18px 18px;box-shadow:0 20px 40px rgba(10,25,35,.28)}
 .kopf .nav a:not(.button){font-size:1.35rem;padding:9px 0}
 .nav-kontakt{display:flex;gap:14px;width:100%;margin-top:14px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18)}
 .kopf .nav .nav-kontakt a{display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff}
 .nav-kontakt svg{width:22px;height:22px}
 .menue-offen body::after{content:"";position:fixed;left:0;right:0;bottom:0;top:var(--kopf,64px);background:rgba(10,25,35,.35);z-index:4}
}
@media(min-width:900px){.nav-kontakt{display:none}}

/* Über mich, Handy bis 599px: Fotos randlos, Bild und Text im Wechsel, Ziel als rundes Porträt */
@media(max-width:599px){
 .ueber-kopf .rahmenfoto,.ueber-persoenlich .rahmenfoto{width:auto!important;max-width:none!important;margin:0 calc(-1 * var(--rand))!important}
 .ueber-kopf .rahmenfoto::before,.ueber-persoenlich .rahmenfoto::before{display:none}
 .ueber-kopf .rahmenfoto img,.ueber-persoenlich .rahmenfoto img{border-radius:0}
 .ueber-persoenlich-raster>figure{order:-1}
 .ueber-persoenlich .rahmenfoto{aspect-ratio:4/5}
 .ziel-raster{gap:16px}
 .ziel-foto{width:128px!important;height:128px;max-width:none;aspect-ratio:1/1!important;border-radius:50%;margin:0}
 .ziel-foto img{border-radius:50%;object-position:40% 30%;transform:scale(2.1);transform-origin:44% 22%}
 .ueber-kopf{padding-bottom:0!important}
 .ueber-persoenlich{padding-top:0!important}
}
/* Über mich, Tablet 600 bis 899px: Foto neben dem Text wie am Computer */
@media(min-width:600px) and (max-width:899px){
 .ueber-kopf-raster,.ueber-persoenlich-raster{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:center}
 .ziel-raster{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:48px}
 .ueber-kopf .rahmenfoto,.ueber-persoenlich .rahmenfoto,.ziel-foto{width:100%;max-width:300px;margin:0 12px 12px 0}
}
/* Telefon-Foto ab Tablet: Schild-Text unten abschneiden */
@media(min-width:600px){.ziel-foto img{object-position:42% 12%;transform:scale(1.1);transform-origin:42% 0}}