/* Freelancer-Seite nach Klickdummy v9 (26.10.2026). Werte und Regeln wie dort; entfallen: Hinweisleiste, Schriftwahl, Ansichten per JS.
   Schriften vom eigenen Server (OFL, Lizenztexte in fonts/): Figtree (Fliesstext), Bricolage Grotesque mit optischer Groesse (Ueberschriften). */
@font-face{font-family:"Figtree";src:url(../fonts/figtree-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
:root{
 --bg:#EDF2F5;--surface:#FFFFFF;--ink:#15222D;--muted:#435563;--blue:#1B4B66;--line:#C3D1DA;
 --amber:#E3A62B;--amber-ink:#15222D;--mark:rgba(227,166,43,.38);--ph:rgba(227,166,43,.30);
 --deep:#163E55;--deep-ink:#FFFFFF;--deep-soft:#D6E3EB;--qmark:rgba(27,75,102,.07);--kern:#F4F7F9;
 --display:"Bricolage Grotesque",system-ui,sans-serif;
 --body:"Figtree","Segoe UI",system-ui,sans-serif;
 --step:1.0625rem}
@media (prefers-color-scheme:dark){:root{--bg:#0F1A22;--surface:#162630;--ink:#E9EFF3;--muted:#A9BAC6;--blue:#86BAD8;--line:#2B3E4A;--mark:rgba(227,166,43,.30);--ph:rgba(227,166,43,.28);--deep:#1D3E52;--deep-ink:#FFFFFF;--deep-soft:#D6E3EB;--qmark:rgba(134,186,216,.08);--kern:#1C2F3B;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 var(--step)/1.65 var(--body);margin:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--ink)}
a{color:var(--blue);text-underline-offset:.2em}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0;letter-spacing:-.015em;font-weight:700;text-wrap:balance}
h1{font-size:clamp(2.3rem,1.2rem + 4.8vw,4rem);font-weight:800;letter-spacing:-.03em;max-width:15ch}
h2{font-size:clamp(1.65rem,1.1rem + 2vw,2.4rem);max-width:26ch}
h3{font-size:1.25rem}
p{margin:0 0 1em;max-width:64ch}
[hidden]{display:none !important}
.wrap{max-width:1060px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sec{padding-block:clamp(3rem,7vw,5.5rem)}
.alt{background:var(--surface)}
.ph{background:var(--ph);color:var(--ink);border-radius:4px;padding:0 .3em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mk{background:linear-gradient(transparent 62%,var(--mark) 62%);padding:0 .05em}
.mt-1{margin-top:1rem}
.mt-12{margin-top:1.2rem}
.mt-14{margin-top:1.4rem}

header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.8rem}
.name{font:700 1.15rem var(--display);color:var(--ink);text-decoration:none}
.name span{color:var(--amber)}
nav ul{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0;align-items:center}
nav a{color:var(--ink);text-decoration:none;font-size:.97rem}
nav a:hover{text-decoration:underline}
.btn{display:inline-block;font:700 1rem/1.2 var(--body);padding:.95rem 1.35rem;border-radius:10px;text-decoration:none;border:2px solid transparent;cursor:pointer;text-align:center;transition:transform .15s ease,filter .15s ease}
.btn.primary{background:var(--amber);color:var(--amber-ink);box-shadow:0 2px 0 rgba(21,34,45,.25)}
.btn.primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn.small{padding:.55rem .9rem;font-size:.95rem}
.link{color:var(--ink);font-weight:700}

/* Hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(3rem,8vw,6.5rem) clamp(3rem,7vw,5.5rem)}
.hero::after{content:"?";position:absolute;right:max(-2rem,-3vw);top:50%;transform:translateY(-50%);font:800 clamp(16rem,38vw,34rem)/1 var(--display);color:var(--qmark);pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:1}
.dach{color:var(--muted);margin-bottom:1.2rem;font-size:1rem;font-weight:600;letter-spacing:.01em}
.lead{font-size:clamp(1.15rem,1rem + .4vw,1.3rem);color:var(--muted);margin-top:1.6rem;max-width:52ch}
.cta{display:flex;gap:1rem 1.6rem;flex-wrap:wrap;align-items:center;margin-top:2rem}
.cta small{display:block;font-weight:400;font-size:.9rem;opacity:.85;margin-top:.15rem}

/* Warum */
.warum{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:clamp(1.6rem,5vw,4rem);align-items:start;margin-top:1.4rem}
.warum>*{min-width:0}
.fragen{background:var(--bg);border-radius:14px;padding:1.6rem 1.6rem 1.2rem;border-left:6px solid var(--amber)}
.fragen p{margin:0 0 .9rem}
.fragen ol{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.9rem}
.fragen li{font:700 1.3rem/1.25 var(--display);letter-spacing:-.01em}
.fragen .after{color:var(--muted);margin:0}

/* Beispiele: eine Schriftgroesse, eine Farbe; Etikett links, Text rechts; nur der Kern traegt den Akzent */
.lede{margin-top:1rem;color:var(--muted);max-width:60ch}
.cases{margin-top:2rem;display:grid;gap:1.2rem}
.case{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(1.2rem,3vw,2rem)}
.case h3{margin-bottom:1.1rem}
.row{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.2rem 1.6rem;padding:.75rem 0;border-top:1px solid var(--line)}
.row p{margin:0;max-width:62ch}
.lbl{font-weight:600;color:var(--blue);line-height:1.65}
.row.kern{border-top:0;background:var(--kern);border-radius:10px;padding:.75rem 1rem;margin:0 -1rem;box-shadow:inset 4px 0 0 var(--amber)}
.row.kern+.row{border-top:0}
.ask{margin-top:2rem;display:flex;gap:.6rem 1.2rem;flex-wrap:wrap;align-items:center}
.ask p{margin:0;font-weight:600}

/* Haltung */
.prin{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem}
.prin li{border-top:4px solid var(--amber);padding-top:1rem}
.prin b{display:block;font:700 1.2rem var(--display);margin-bottom:.5rem;line-height:1.2}
.prin span{color:var(--muted);font-size:.98rem}

/* Wer ich bin */
.story{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(1.4rem,4vw,3.2rem);align-items:start}
.foto{display:block;aspect-ratio:1/1;width:100%;height:auto;object-fit:cover;border-radius:50% 50% 14px 50%}

/* Profil */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:1.8rem 0 1.6rem}
.stat{background:var(--bg);border-radius:12px;padding:1rem 1.1rem}
.stat b{display:block;font:800 clamp(1.7rem,1.3rem + 1.4vw,2.3rem)/1 var(--display);color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat span{display:block;margin-top:.4rem;font-size:.92rem;color:var(--muted);line-height:1.35}
.profil .grp{border-top:1px solid var(--line)}
.profil .grp:last-of-type{border-bottom:1px solid var(--line)}
.profil summary{list-style:none;cursor:pointer;padding:1.05rem 0;font:700 1.15rem var(--display);display:flex;justify-content:space-between;gap:1rem;align-items:center}
.profil summary::-webkit-details-marker{display:none}
.profil summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--blue);width:1.8rem;height:1.8rem;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%}
.profil details[open]>summary::after{content:"\2212";background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.profil .body{padding-bottom:1.3rem}
/* Profil: jede Gruppe gleich gebaut: Etikett links, Begriffe rechts als Spaltenliste in Fliesstextgroesse */
.kv{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:0 1.6rem;margin:0}
.kv dt,.kv dd{padding:.7rem 0;border-top:1px solid var(--line)}
.kv dt:first-of-type,.kv dt:first-of-type+dd{border-top:0;padding-top:0}
.kv dt{font-weight:600;color:var(--blue)}
.kv dd{margin:0}
.list{list-style:none;margin:0;padding:0;columns:3 12rem;column-gap:1.6rem}
.list li{break-inside:avoid;padding:.1rem 0}
.list.one{columns:1}
.list .von{color:var(--muted)}

/* So fangen wir an: echte Reihenfolge, daher nummeriert */
.start{list-style:none;padding:0;display:grid;gap:1.6rem;margin:2rem 0 0;grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:s}
.start li{position:relative;padding-top:3.2rem;counter-increment:s}
.start li::before{content:counter(s);position:absolute;top:0;left:0;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--amber);color:var(--amber-ink);font:800 1.15rem/2.4rem var(--display);text-align:center}
.start li:not(:last-child)::after{content:"";position:absolute;top:1.2rem;left:3rem;right:-1rem;border-top:2px dashed var(--line)}
.start h3{font-size:1.15rem;margin-bottom:.4rem}
.start p{color:var(--muted);font-size:.98rem}

/* Kontakt: dunkles Band mit hohem Kontrast */
.contact{background:var(--deep);color:var(--deep-ink)}
.contact h2{color:var(--deep-ink);max-width:22ch}
.contact .note{color:var(--deep-soft)}
.contact .btn.ghost{border-color:var(--deep-ink);color:var(--deep-ink);background:transparent}
.contact .btn.ghost:hover{background:var(--deep-ink);color:var(--deep)}
.mail{display:flex;gap:.8rem 1rem;flex-wrap:wrap;align-items:center;margin:1.6rem 0 .6rem}
.addr{font:700 1.25rem var(--display);overflow-wrap:anywhere;color:var(--deep-ink)}
footer{padding-block:2rem 3rem;color:var(--muted);font-size:.95rem}
footer .wrap{display:flex;gap:.8rem 2rem;flex-wrap:wrap;justify-content:space-between}
footer ul{list-style:none;margin:0;padding:0;display:flex;gap:1.4rem;flex-wrap:wrap}

/* Impressum und Datenschutz (eigene Seiten, Aussehen wie die Ansichten im Klickdummy) */
.legal h1{font-size:clamp(1.65rem,1.1rem + 2vw,2.4rem);font-weight:700;letter-spacing:-.015em;max-width:26ch;margin-bottom:1rem}
.legal h2{margin:1.6rem 0 .4rem;font-size:1.1rem;max-width:none}
.legal p,.legal li{max-width:70ch}
.back{display:inline-block;margin-bottom:1.4rem}
/* Offene Stelle in den Rechtstexten (nur Vorschau; ein Bau fuer den Livegang bricht ab, solange sie besteht) */
.offen{background:var(--ph);border-radius:4px;padding:0 .3em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.offen-hinweis{font-size:.9rem;color:var(--muted)}

@media (max-width:860px){
 .warum,.story,.prin,.start{grid-template-columns:minmax(0,1fr)}
 .start li:not(:last-child)::after{display:none}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 nav li:not(:last-child){display:none}
 .kv,.row{grid-template-columns:minmax(0,1fr)}
 .kv dd{border-top:0;padding-top:.1rem}
 .row.kern{margin:0}
 .foto{max-width:12rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}