/* Layout concept: "Flugformation" – ein heller, luftiger Himmel, über den die Gänse aus dem Logo
   in V-Formation ziehen; eine durchgehende Horizontlinie (wie die Linie im Logo) verbindet die Sektionen. */
@font-face{font-family:"Exo 2";src:url("fonts/exo2.woff") format("woff");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Exo 2";src:url("fonts/exo2-italic.woff") format("woff");font-weight:100 900;font-style:italic;font-display:swap}

:root{
  --paper:#F6F8FB;      /* kühles Off-White, leicht ins Blau */
  --surface:#FFFFFF;
  --ink:#0E1E36;        /* Nachtblau für Text */
  --ink-soft:#4A5870;
  --line:#D6DFEB;
  --sky:#E7EEF8;
  --brand:#054698;      /* Logo-Blau */
  --brand-deep:#03336F;
  --ochre:#C98A1E;      /* Goldton aus dem Porträt-Hintergrund, sparsam */
  --ochre-text:#9A6610;
  --footer-bg:#0B1A30;
  --veil-strong:rgba(246,248,251,.88);
  --veil-soft:rgba(246,248,251,.55);
  --veil-none:rgba(246,248,251,0);
  --footer-fg:#C9D4E4;
  --font-display:"Biome","Exo 2","Segoe UI",system-ui,sans-serif;
  --font-body:"Exo 2","Segoe UI",system-ui,-apple-system,sans-serif;
  --gutter:clamp(16px,4vw,40px);
  --max:1180px;
  --radius:14px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;font-weight:400}
img,svg{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:var(--brand)}
a:focus-visible,button:focus-visible{outline:3px solid var(--ochre);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--font-display);line-height:1.08;text-wrap:balance;margin:0;color:var(--ink)}
p{margin:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.skip{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}

/* Header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(246,248,251,.86);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.scrolled{border-bottom-color:var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem}
.brand-logo img{height:68px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.8rem)}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.98rem}
.nav a:hover{color:var(--brand)}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:.82rem;font-weight:600;letter-spacing:.06em}
.lang a,.lang span{padding:.28rem .7rem;text-decoration:none;color:var(--ink-soft)}
.lang span[aria-current]{background:var(--brand);color:#fff}
.lang a:hover{color:var(--brand)}
@media (max-width:820px){.nav .nav-links{display:none}.brand-logo img{height:44px}}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--paper) 0%,var(--sky) 100%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,4vw,4rem);padding-block:clamp(3rem,8vw,6.5rem) clamp(3rem,7vw,5.5rem)}
.hero-text{display:grid;gap:1.4rem;min-width:0}
.hero h1{font-size:clamp(2.9rem,7.4vw,6rem);font-weight:800;letter-spacing:-.025em;line-height:.98}
.hero h1 .doing{color:var(--brand);position:relative;display:inline-block;white-space:nowrap}
.hero h1 .doing svg{position:absolute;left:0;right:0;bottom:-.16em;width:100%;height:.28em;overflow:visible}
.hero h1 .doing path{fill:none;stroke:var(--ochre);stroke-width:6;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:0;animation:draw 1.4s .5s cubic-bezier(.6,.1,.2,1) both}
@keyframes draw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
.hero .lead{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--ink-soft);max-width:34ch}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.4rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.35rem;border-radius:999px;font-weight:600;text-decoration:none;font-size:1rem;transition:transform .15s,background-color .15s,color .15s}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-deep);transform:translateY(-1px)}
.btn-ghost{color:var(--brand);border:1.5px solid currentColor}
.btn-ghost:hover{background:var(--surface)}
.hero-art{position:relative;min-width:0}
.hero-art svg{width:100%;height:auto;overflow:visible}
.horizon{height:1px;background:var(--ink);opacity:.85}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero-art{order:-1;max-width:520px}}

/* Geese animation */
.goose{animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.goose,.hero h1 .doing path{animation:none}}

/* Sections */
section{scroll-margin-top:80px}
.section{padding-block:clamp(4rem,9vw,7rem)}
.section-head{display:grid;gap:.8rem;margin-bottom:clamp(2rem,4vw,3rem);max-width:46rem}
.section-head h2{font-size:clamp(2rem,4.2vw,3.2rem);font-weight:700;letter-spacing:-.015em}
.section-head p{color:var(--ink-soft);font-size:1.1rem}

/* Services */
.services{background:var(--surface)}
.svc-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,2vw,1.4rem)}
.svc-tab{all:unset;cursor:pointer;display:grid;grid-template-rows:auto 1fr;border-radius:var(--radius);background:var(--paper);border:1.5px solid var(--line);overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s;min-width:0}
.svc-tab:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(14,30,54,.35)}
.svc-tab[aria-selected="true"]{border-color:var(--brand);box-shadow:0 18px 36px -20px rgba(5,70,152,.55)}
.svc-tab:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
.svc-art{aspect-ratio:16/10;background:var(--sky);display:grid;place-items:center;overflow:hidden;max-width:100%}
.svc-art svg{width:100%;height:100%}
.svc-art img{width:100%;height:100%;object-fit:cover}
.svc-meta{display:grid;gap:.35rem;padding:1.1rem 1.25rem 1.3rem;align-content:start}
.svc-meta .kicker{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.svc-meta h3{font-size:clamp(1.25rem,2vw,1.5rem);font-weight:700}
.svc-meta .more{margin-top:.4rem;font-size:.92rem;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:.4rem}
.svc-meta .more svg{width:1em;height:1em;transition:transform .2s}
.svc-tab[aria-selected="true"] .more svg{transform:rotate(90deg)}
.svc-panel{margin-top:clamp(1.2rem,3vw,2rem);border-radius:var(--radius);background:var(--paper);border:1.5px solid var(--line);padding:clamp(1.4rem,4vw,2.8rem);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(1.4rem,4vw,3.5rem);animation:fadeUp .35s ease both}
@keyframes fadeUp{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}
.svc-panel .intro{display:grid;gap:1rem;align-content:start}
.svc-panel .intro h3{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700}
.svc-panel .intro p{color:var(--ink-soft)}
.focus{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 2rem}
.focus li{display:grid;gap:.3rem;align-content:start;padding-top:.9rem;border-top:1.5px solid var(--line);min-width:0}
.focus h4{margin:0;font-family:var(--font-display);font-size:1.08rem;font-weight:700;color:var(--brand)}
.focus p{font-size:.98rem;color:var(--ink-soft)}
.partners{display:grid;gap:.7rem;margin-top:.6rem}
.partners .label{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.partners .logos{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2rem}
.partners a{display:block}
.partners img{height:40px;width:auto}
.partners img.mc{height:48px}
.practice{font-size:.95rem;color:var(--ink);background:var(--surface);border-left:3px solid var(--ochre);padding:.8rem 1rem;border-radius:0 8px 8px 0}
@media (max-width:900px){.svc-tabs{grid-template-columns:1fr}.svc-tab{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:none}.svc-art{aspect-ratio:auto;height:100%;min-height:130px}.svc-panel{grid-template-columns:1fr}}
@media (max-width:560px){.svc-tab{grid-template-columns:1fr}.svc-art{aspect-ratio:16/9;min-height:0}.focus{grid-template-columns:1fr}}

/* About */
.about .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.portrait{position:relative;max-width:420px}
@media (min-width:821px){.portrait{position:sticky;top:110px}}
.portrait img{width:100%;height:auto;border-radius:var(--radius);aspect-ratio:900/1078;object-fit:cover}
.portrait .tag{position:absolute;left:-.6rem;bottom:1.2rem;background:var(--surface);padding:.7rem 1rem;border-radius:10px;box-shadow:0 12px 30px -16px rgba(14,30,54,.45);display:grid;gap:.1rem}
.portrait .tag strong{font-family:var(--font-display);font-size:1.05rem}
.portrait .tag span{font-size:.85rem;color:var(--ink-soft)}
.about-text{display:grid;gap:1.3rem;min-width:0}
.about-text h2{font-size:clamp(2rem,4.2vw,3.2rem);font-weight:700;letter-spacing:-.015em}
.about-text p{color:var(--ink-soft);max-width:62ch}
.about-text p strong{color:var(--ink);font-weight:600}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-block:.6rem}
.fact{display:grid;gap:.2rem;padding-top:.8rem;border-top:2px solid var(--brand)}
.fact b{font-family:var(--font-display);font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:800;color:var(--brand);line-height:1;font-variant-numeric:tabular-nums}
.fact span{font-size:.92rem;color:var(--ink-soft);line-height:1.35}
.timeline{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:1rem;padding-block:.5rem;border-bottom:1px solid var(--line);font-size:.96rem}
.timeline .yr{font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.timeline .role{color:var(--ink)}
.timeline .role em{font-style:normal;color:var(--ink-soft)}
.timeline-title{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:.6rem}
@media (max-width:820px){.about .wrap{grid-template-columns:1fr}.portrait{max-width:340px}}
@media (max-width:480px){.facts{grid-template-columns:1fr}}

/* References */
.refs{background:var(--surface)}
.ref-list{list-style:none;margin:0;padding:0;columns:4 13rem;column-gap:2rem}
.ref-list li{break-inside:avoid;border-bottom:1px solid var(--line)}
.ref-list a{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.65rem 0;color:var(--ink);text-decoration:none;font-weight:500;transition:color .15s,padding .15s}
.ref-list a svg{width:.9em;height:.9em;opacity:0;transform:translate(-4px,4px);transition:opacity .15s,transform .15s;flex:none;color:var(--brand)}
.ref-list a:hover,.ref-list a:focus-visible{color:var(--brand);padding-left:.3rem}
.ref-list a:hover svg,.ref-list a:focus-visible svg{opacity:1;transform:none}
.refs-note{margin-top:1.6rem;color:var(--ink-soft);font-size:.95rem}

/* Contact */
.contact{position:relative;background:var(--brand);color:#fff;overflow:hidden}
.contact .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2rem;align-items:center;padding-block:clamp(3.5rem,8vw,6rem)}
.contact h2{color:#fff;font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800;letter-spacing:-.015em}
.contact p{color:#D7E3F4;margin-top:.8rem;max-width:40ch}
.contact-list{display:grid;gap:.9rem}
.contact-item{display:grid;gap:.1rem}
.contact-item small{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#AFC6E6;font-weight:600}
.contact-item a,.contact-item span{color:#fff;font-size:clamp(1.1rem,2vw,1.35rem);font-weight:600;text-decoration:none;word-break:break-word}
.contact-item a:hover{text-decoration:underline;text-underline-offset:4px}
.contact-geese{position:absolute;right:-2rem;top:1rem;width:min(40vw,420px);opacity:.14;pointer-events:none}
@media (max-width:820px){.contact .wrap{grid-template-columns:1fr}}

/* Footer */
.site-footer{background:var(--footer-bg);color:var(--footer-fg);font-size:.92rem}
.site-footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;padding-block:2rem}
.site-footer img{height:46px;width:auto}
.site-footer nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.site-footer a{color:var(--footer-fg);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}

/* Legal pages */
.legal{padding-block:clamp(3rem,7vw,5rem)}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(2.2rem,5vw,3.2rem);font-weight:800;margin-bottom:1.6rem}
.legal h2{font-size:1.3rem;font-weight:700;margin:2rem 0 .6rem;color:var(--brand)}
.legal p,.legal li{color:var(--ink-soft)}
.legal p+p{margin-top:.7rem}
.legal address{font-style:normal;color:var(--ink);line-height:1.7}
.legal ul{padding-left:1.2rem}
.back{display:inline-flex;margin-bottom:1.6rem;font-weight:600;text-decoration:none}

/* v2: Foto-Hero */
.hero{background:var(--sky)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:68% 50%;z-index:0}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--veil-strong) 0%,var(--veil-soft) 38%,var(--veil-none) 62%)}
.hero .wrap{position:relative;z-index:2;grid-template-columns:minmax(0,1fr);min-height:clamp(560px,50vw,780px);align-content:center}
.hero-text{max-width:620px}
.hero .lead{color:var(--ink)}
@media (max-width:820px){
  .hero{display:flex;flex-direction:column;background:var(--paper)}
  .hero::before{display:none}
  .hero-bg{position:relative;inset:auto;height:auto;aspect-ratio:16/10;object-position:80% 40%}
  .hero .wrap{min-height:0;padding-block:2rem 3rem}
}
.svc-art img{transition:transform .5s ease}
.svc-tab:hover .svc-art img{transform:scale(1.04)}
.pos-beratung{object-position:50% 62%}
.pos-training{object-position:50% 22%}
.pos-interim{object-position:52% 28%}
@media (prefers-reduced-motion:reduce){.svc-tab:hover .svc-art img{transform:none}}