/* ═══════════════════════════════════════════════════════════
   KM³ Consulting — Design System V4
   Bildgetragene Weiterentwicklung von V1.
   Palette: Deep Navy · Clear Blue · Ice Blue · Slate Grey
            Off White · Signal Amber (sparsam)
   ═══════════════════════════════════════════════════════════ */

:root{
  --navy:#0A1F44;
  --blue:#2563EB;
  --ice:#EFF4FB;
  --slate:#64748B;
  --off:#FAFBFD;
  --amber:#F59E0B;

  --line:#E4EAF3;
  --line-strong:#C6D3E8;
  --ink-soft:rgba(10,31,68,.74);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);

  --wrap:1240px;
  --gutter:clamp(1.5rem,5vw,4.5rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--off);
  color:var(--navy);
  font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.prelaunch-notice{position:fixed;z-index:80;left:50%;bottom:1rem;transform:translateX(-50%);width:min(92vw,44rem);padding:.65rem 1rem;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(10,31,68,.96);color:#fff;text-align:center;font-size:.8rem;letter-spacing:.01em;box-shadow:0 12px 32px rgba(10,31,68,.22)}
.btn:disabled{cursor:not-allowed;opacity:.62;transform:none}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ─────────────────────────── Typografie ─────────────────────────── */

.display{
  font-size:clamp(2.85rem,6.2vw,5.5rem);
  line-height:1.0;letter-spacing:-.045em;font-weight:600;
}
.h1{
  font-size:clamp(2.2rem,4.6vw,3.75rem);
  line-height:1.05;letter-spacing:-.035em;font-weight:600;
}

.eyebrow{
  display:flex;align-items:center;gap:.75rem;
  font-size:.75rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate);
}
.eyebrow::after{content:"";height:1px;flex:0 1 64px;background:linear-gradient(90deg,var(--line-strong),transparent)}
.eyebrow--light{color:rgba(255,255,255,.78)}
.eyebrow--light::after{background:linear-gradient(90deg,rgba(255,255,255,.5),transparent)}

.lede{font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.6;color:var(--slate);max-width:36em;font-weight:300}
.lede--light{color:rgba(255,255,255,.85)}

.section-head{max-width:44rem;margin-bottom:clamp(3rem,6vh,4.5rem)}
.section-head-left{margin-left:0}
.section-head .eyebrow{margin-bottom:1.4rem}
.section-head .h1{margin-bottom:1.5rem}
.section-sub{color:var(--slate);font-size:1.0625rem;line-height:1.65;font-weight:300;max-width:38em}

.section-tint{background:var(--ice)}

/* ─────────────────────────── Buttons ─────────────────────────── */

.btn{
  --bg:var(--navy);--fg:#fff;
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--bg);color:var(--fg);
  padding:1rem 1.7rem;border-radius:100px;
  font-size:.95rem;font-weight:500;letter-spacing:-.01em;border:1px solid transparent;
  transition:transform .5s var(--ease),background .3s,color .3s,box-shadow .5s var(--ease),border-color .3s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0);transition-duration:.1s}

.btn-amber{--bg:var(--amber);--fg:var(--navy);font-weight:600}
.btn-amber:hover{box-shadow:0 18px 44px -14px rgba(245,158,11,.6)}

.btn-outline{--bg:transparent;--fg:#fff;border-color:rgba(255,255,255,.55)}
.btn-outline:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.8)}
.btn-outline .arrow{transition:transform .5s var(--ease)}
.btn-outline:hover .arrow{transform:translateX(4px)}

.btn-sm{padding:.62rem 1.15rem;font-size:.875rem}

.actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}

/* ─────────────────────────── Header ─────────────────────────── */

.header{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .4s var(--ease),box-shadow .4s var(--ease),backdrop-filter .4s}
.header-inner{
  max-width:var(--wrap);margin-inline:auto;padding:1.15rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;transition:padding .4s var(--ease);
}
/* „Solid“ = fester heller Header: beim Scrollen (is-stuck) und dauerhaft auf
   den Unterseiten (header-solid, ohne Hero dahinter). */
.header.is-stuck,.header-solid{
  background:rgba(250,251,253,.82);
  backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px);
  box-shadow:0 1px 0 rgba(10,31,68,.06),0 12px 30px -22px rgba(10,31,68,.4);
}
.header.is-stuck .header-inner{padding-top:.8rem;padding-bottom:.8rem}

.brand{display:flex;align-items:center;gap:.7rem;position:relative;z-index:1}
.brand-mark{width:34px;height:auto}
.brand-word{font-size:1.2rem;font-weight:600;letter-spacing:.05em;color:#fff;transition:color .4s var(--ease)}
.brand-word em{font-style:normal;color:var(--amber);font-size:.66em;vertical-align:.52em;letter-spacing:0}
.header.is-stuck .brand-word,.header-solid .brand-word{color:var(--navy)}

/* Über dem Hero (Bild) sind die Bergspitzen der Marke hell — nicht im Solid-Zustand. */

.nav{display:flex;align-items:center;gap:2rem}
.nav-simple{display:flex;align-items:center;gap:1.5rem}
.nav>a[data-nav]{
  font-size:.9375rem;color:rgba(255,255,255,.82);position:relative;padding:.25rem 0;transition:color .3s;
}
.nav>a[data-nav]::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav>a[data-nav]:hover,.nav>a[data-nav].is-active{color:#fff}
.nav>a[data-nav]:hover::after,.nav>a[data-nav].is-active::after{transform:scaleX(1);transform-origin:left}
.header.is-stuck .nav>a[data-nav]{color:var(--slate)}
.header.is-stuck .nav>a[data-nav]:hover,.header.is-stuck .nav>a[data-nav].is-active{color:var(--navy)}

.header .btn-sm{--bg:transparent;--fg:#fff;border-color:rgba(255,255,255,.5)}
.header .btn-sm:hover{background:rgba(255,255,255,.12)}
.header.is-stuck .btn-sm,.header-solid .btn-sm{--bg:var(--navy);--fg:#fff;border-color:transparent}
.header.is-stuck .btn-sm:hover,.header-solid .btn-sm:hover{--bg:#132a56;background:#132a56}

.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;place-content:center;justify-items:center;gap:6px}
.burger span{display:block;width:22px;height:1.5px;background:#fff;transition:transform .4s var(--ease),opacity .3s,background .4s}
.header.is-stuck .burger span{background:var(--navy)}
.burger[aria-expanded="true"] span{background:var(--navy)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ─────────────────────────── Hero ─────────────────────────── */

.hero{position:relative;min-height:clamp(600px,92vh,940px);display:flex;align-items:center;overflow:hidden;background:var(--navy)}
.hero-media{position:absolute;inset:0;z-index:0}
/* Sanftes Einblenden des ganzen Bildmotivs (einmalig). */
.js .hero-media{opacity:0;transform:scale(1.04);transition:opacity 1.4s var(--ease),transform 1.9s var(--ease)}
.hero.is-ready .hero-media{opacity:1;transform:none}
.hero-img{
  width:100%;height:100%;object-fit:cover;object-position:62% 42%;
  /* Leichte Überskalierung als Reserve für die Scroll-Parallax (--py). */
  transform:translateY(var(--py,0px)) scale(1.06);will-change:transform;
}

.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(10,31,68,.92) 0%,rgba(10,31,68,.74) 26%,rgba(10,31,68,.38) 50%,rgba(10,31,68,0) 74%),
    linear-gradient(0deg,rgba(10,31,68,.55) 0%,rgba(10,31,68,0) 34%);
}
.hero-glow{
  position:absolute;top:6%;right:12%;width:min(44vw,540px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(245,158,11,.30),rgba(245,158,11,0) 62%);
  opacity:0;transition:opacity 2.2s var(--ease);pointer-events:none;
}
.hero.is-ready .hero-glow{opacity:1}

.hero-inner{position:relative;z-index:2;width:100%;padding-top:5rem}
.hero-copy{max-width:680px}
.hero .eyebrow{margin-bottom:1.7rem}
.hero .display{color:#fff;margin-bottom:1.7rem}
.hero .lede{margin-bottom:.5rem}

/* ─────────────────────────── Leistungen ─────────────────────────── */

.services{padding:clamp(6rem,12vh,9rem) 0}
.services-layout{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2.5rem,5vw,5rem);align-items:center;
}
.services-media{border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(10,31,68,.5)}
.services-media img{width:100%;height:100%;aspect-ratio:5/4;object-fit:cover;transition:transform 1.2s var(--ease)}
.services-media:hover img{transform:scale(1.03)}

.services-list{display:flex;flex-direction:column}
.service{display:flex;gap:1.5rem;padding:1.9rem 0;border-top:1px solid var(--line)}
.service:last-child{border-bottom:1px solid var(--line)}
.service-idx{font-size:.8rem;font-weight:600;letter-spacing:.1em;color:var(--amber);font-variant-numeric:tabular-nums;padding-top:.35rem;flex:none;width:2rem}
.service-body h3{font-size:1.5rem;font-weight:500;letter-spacing:-.02em;line-height:1.2;margin-bottom:.55rem}
.service-body p{color:var(--slate);font-weight:300;font-size:1.02rem;line-height:1.6;max-width:34em}

/* ─────────────────────────── Vorgehen — Aufstieg ─────────────────────────── */

.ascent{padding:clamp(6rem,12vh,9rem) 0}
.ascent-graphic{margin:.5rem 0 3.2rem;height:clamp(120px,20vw,220px)}
.ascent-svg{width:100%;height:100%}
.ascent-line{stroke-dasharray:1;stroke-dashoffset:0}
.js .ascent-line{stroke-dashoffset:1}
.ascent-graphic.is-in .ascent-line{stroke-dashoffset:0;transition:stroke-dashoffset 1.9s var(--ease) .25s}
.ascent-sun,.ascent-sun-glow{opacity:0;transition:opacity 1s var(--ease) 1.4s}
.ascent-graphic.is-in .ascent-sun{opacity:1}
.ascent-graphic.is-in .ascent-sun-glow{opacity:.16}

.ascent-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1.2rem,2.5vw,2.4rem)}
.ascent-step{position:relative;padding-top:1.6rem;border-top:2px solid var(--line-strong)}
.ascent-step-idx{display:block;font-size:.8rem;font-weight:600;letter-spacing:.12em;color:var(--slate);font-variant-numeric:tabular-nums;margin-bottom:.9rem}
.ascent-step-idx--sun{color:var(--amber)}
.ascent-step h3{font-size:1.22rem;font-weight:500;letter-spacing:-.02em;line-height:1.2;margin-bottom:.6rem}
.ascent-step p{color:var(--slate);font-weight:300;font-size:.97rem;line-height:1.55}

/* ─────────────────────────── Zusammenarbeit — wie wir arbeiten ─────────────────────────── */

.areas{padding:clamp(6rem,12vh,9rem) 0;background:#fff;border-bottom:1px solid var(--line)}
.areas-head{max-width:50rem}
.areas-kicker{margin-bottom:1.25rem;color:var(--slate);font-size:.75rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase}

.areas-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:2rem;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--line)}
.areas-card{min-height:11rem;padding:clamp(1.5rem,2.8vw,2.2rem);background:#fff}
.areas-card h3{margin-bottom:.7rem;font-size:1.18rem;font-weight:600;line-height:1.25;letter-spacing:-.02em}
.areas-card p{color:var(--slate);font-size:.95rem;font-weight:300;line-height:1.6}

/* ─────────────────────────── Warum KM³ ─────────────────────────── */

.why{padding:clamp(6rem,12vh,9rem) 0}
.why-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,5rem);align-items:center}
.why-media{order:2;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(10,31,68,.5)}
.why-media img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s var(--ease)}
.why-media:hover img{transform:scale(1.03)}
.why-copy{order:1}
.why-copy .eyebrow{margin-bottom:1.4rem}
.why-copy .h1{margin-bottom:1.5rem}
.why-copy .section-sub{margin-bottom:2.4rem}

.why-traits{border-top:1px solid var(--line)}
.why-traits li{display:flex;flex-direction:column;gap:.3rem;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.why-trait-k{font-size:1.1rem;font-weight:500;letter-spacing:-.01em;position:relative;padding-left:1.4rem}
.why-trait-k::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--amber)}
.why-trait-v{color:var(--slate);font-weight:300;padding-left:1.4rem}

/* ─────────────────────────── Team ─────────────────────────── */

.team-sec{padding:clamp(6rem,12vh,9rem) 0}
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.team-card{background:var(--off);padding:clamp(1.8rem,3vw,2.6rem);display:flex;flex-direction:column;min-height:12rem;transition:background .4s var(--ease)}
.team-card:hover{background:#fff}
.team-name{font-size:clamp(1.35rem,2.2vw,1.75rem);font-weight:500;letter-spacing:-.025em;line-height:1.12;margin:1.8rem 0 .5rem}
.team-role{color:var(--slate);font-weight:300;font-size:.98rem}

/* ─────────────────────────── Kontakt (V1-Abschluss) ─────────────────────────── */

.final{position:relative;z-index:1;overflow:hidden;background:var(--navy);color:#fff;padding:clamp(8rem,18vh,14rem) 0 clamp(7rem,14vh,10rem);text-align:center}
.final-scene{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(128%,1400px);pointer-events:none}
.final-svg{width:100%;height:auto}
.final-peak{transform-box:fill-box;transform-origin:bottom center;transform:scaleY(.74);opacity:.05;transition:transform 1.9s var(--ease) .1s}
.final-peak:nth-of-type(2){opacity:.07}
.final-peak:nth-of-type(3){opacity:.1}
.final.is-in .final-peak{transform:none}

.final-inner{position:relative;display:flex;flex-direction:column;align-items:center}
.final-mark{width:clamp(112px,12vw,150px);margin-bottom:2.25rem}
.final-mark svg{width:100%;height:auto;overflow:visible}
.mark-sun,.mark-glow{transform-box:view-box;transform-origin:322px 95px;transform:translateY(150px) scale(.55);opacity:0;transition:transform 2s var(--ease) .35s,opacity 1.4s var(--ease) .35s}
.final.is-in .mark-sun,.final.is-in .mark-glow{transform:none;opacity:1}
.mark-sun{filter:drop-shadow(0 0 22px rgba(245,158,11,.5))}
.mark-peak{transform-box:fill-box;transform-origin:bottom center;transform:scaleY(.8);transition:transform 1.4s var(--ease) .1s}
.final.is-in .mark-peak{transform:none}

.final-h{margin-bottom:1.6rem}
.final-text{max-width:40rem;color:rgba(255,255,255,.72);font-size:clamp(1rem,1.25vw,1.18rem);line-height:1.7;font-weight:300}
.contact-line{display:inline-block;margin-top:2.4rem;color:rgba(255,255,255,.6);font-size:.95rem;letter-spacing:.02em;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px;transition:color .3s,border-color .3s}
.contact-line:hover{color:#fff;border-color:rgba(255,255,255,.7)}

/* ─────────────────────────── Footer ─────────────────────────── */

.footer{background:var(--navy);color:rgba(255,255,255,.6);padding:0 0 3rem;position:relative;z-index:1}
.footer-inner{border-top:1px solid rgba(255,255,255,.12);padding-top:3rem;display:grid;grid-template-columns:1fr auto;gap:2.5rem 3rem;align-items:start}
.footer-brand{display:flex;align-items:center;gap:1rem}
.footer-brand .brand-mark{width:30px;filter:brightness(0) invert(1) opacity(.9)}
.footer-brand p{font-size:.9375rem;font-weight:300}
.footer-nav{display:flex;flex-wrap:wrap;gap:1.6rem;font-size:.9375rem}
.footer-nav a{transition:color .3s}
.footer-nav a:hover{color:#fff}
.footer-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1.5rem;padding-top:2.5rem;border-top:1px solid rgba(255,255,255,.08);font-size:.8125rem;color:rgba(255,255,255,.45)}
.footer-legal a:hover{color:rgba(255,255,255,.8)}

/* ─────────────────────────── Mobiler Kontakt-Kurzweg ─────────────────────────── */

.cta-mobile{
  position:fixed;left:50%;bottom:1.1rem;transform:translate(-50%,140%);z-index:55;
  background:var(--amber);color:var(--navy);font-weight:600;font-size:.95rem;
  padding:.95rem 1.7rem;border-radius:100px;box-shadow:0 16px 40px -14px rgba(10,31,68,.6);
  transition:transform .5s var(--ease);display:none;
}
.cta-mobile.is-on{transform:translate(-50%,0)}

/* ─────────────────────────── Unterseiten (Impressum / Datenschutz) ─────────────────────────── */

.subpage{padding:9.5rem 0 6rem}
.subpage-head{max-width:44rem;margin-bottom:3rem}
.subpage-head .h1{margin-top:1.5rem}
.legal{max-width:44rem}
.legal h2{
  font-size:1.35rem;font-weight:500;letter-spacing:-.02em;
  margin:2.75rem 0 .9rem;padding-top:2rem;border-top:1px solid var(--line);
}
.legal h3{font-size:1.05rem;font-weight:500;margin:1.75rem 0 .5rem}
.legal p,.legal li{color:var(--ink-soft);font-size:1rem;line-height:1.7}
.legal p+p{margin-top:.9rem}
.legal ul{list-style:disc;padding-left:1.25rem;margin:.75rem 0}
.legal a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.legal .addr{font-style:normal}
.legal-note{
  margin:2rem 0 0;padding:1rem 1.25rem;border-left:2px solid var(--amber);
  background:var(--ice);color:var(--navy);font-size:.9375rem;line-height:1.6;
}

/* ─────────────────────────── Reveal ─────────────────────────── */

/* Startzustand nur mit JS — ohne JS bleibt aller Inhalt sichtbar. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1.05s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.js .reveal.is-in{opacity:1;transform:none}

/* ─────────────────────────── Responsive ─────────────────────────── */

@media (max-width:1000px){
  .services-layout{grid-template-columns:1fr;gap:2.5rem}
  .services-media img{aspect-ratio:16/10}
  .why-grid{grid-template-columns:1fr;gap:2.5rem}
  .why-media{order:1}
  .why-copy{order:2}
  .why-media img{aspect-ratio:16/10}
  .ascent-steps{grid-template-columns:repeat(2,1fr);gap:2rem 2.4rem}
  .areas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .nav{
    position:fixed;inset:0 0 auto 0;padding:6rem var(--gutter) 2.5rem;
    flex-direction:column;align-items:flex-start;gap:1.4rem;
    background:rgba(250,251,253,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    transform:translateY(-100%);opacity:0;visibility:hidden;
    transition:transform .6s var(--ease),opacity .4s,visibility .4s;box-shadow:0 24px 48px -24px rgba(10,31,68,.3);
  }
  .nav.is-open{transform:none;opacity:1;visibility:visible}
  .nav>a[data-nav]{font-size:1.6rem;letter-spacing:-.03em;color:var(--navy)}
  .nav .btn-sm{margin-top:.6rem;--bg:var(--navy);--fg:#fff;border-color:transparent;font-size:1rem;padding:.85rem 1.6rem}
  .burger{display:grid;z-index:1}
  .cta-mobile{display:block}
  .hero-glow{opacity:0!important}
}

@media (max-width:640px){
  .ascent-graphic{display:none}
  .ascent-steps{grid-template-columns:1fr;gap:0}
  .ascent-step{padding:1.4rem 0 1.4rem 1.6rem;border-top:none;border-left:2px solid var(--line-strong)}
  .ascent-step:first-child{padding-top:0}
  .areas-grid{grid-template-columns:1fr}
  .areas-card{min-height:0}
  .team-grid{grid-template-columns:1fr}
  .actions{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .hero-inner{padding-top:4rem}
}

/* ─────────────────────────── Reduced Motion ─────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .js .hero-media{opacity:1;transform:none}
  .hero-img{transform:scale(1.06)}
  .js .ascent-line{stroke-dashoffset:0}
  .ascent-sun,.ascent-sun-glow{opacity:1}
  .final-peak,.mark-sun,.mark-glow,.mark-peak{transform:none;opacity:1}
  .hero-glow{opacity:1}
}

/* ═══════════════════════════════════════════════════════════
   Team-Porträts · Kontaktformular · Erstgespräch
   Ergänzung — nutzt ausschließlich die bestehenden Tokens.
   Keine neuen Farbwerte, keine neuen Button-Stile.
   ═══════════════════════════════════════════════════════════ */

/* ─── Teamporträts ─────────────────────────────────────────
   Die Fläche ist immer reserviert (aspect-ratio), egal ob schon
   ein Foto vorliegt — deshalb entsteht beim Nachladen kein Shift. */
.team-note{
  max-width:58ch;margin:2.2rem 0 0;
  color:var(--slate);font-weight:300;line-height:1.65;
}

/* ─── Kontaktbereich: zwei Spalten ─────────────────────────── */
.contact-live{width:100%;margin-top:2.5rem;text-align:left}
.contact-cols{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:start;margin-top:2.5rem;
}

/* Formularflächen auf dunklem Grund: heller Block, damit Eingaben
   kontrastreich und vertraut wirken. */
.form,.form-done{
  background:var(--off);color:var(--navy);
  padding:clamp(1.5rem,3vw,2.25rem);border-radius:20px;
}
.form-intro{margin:0 0 1.4rem;font-size:.9rem;color:var(--slate)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.25rem}
.field{display:flex;flex-direction:column;margin:0}
.field-wide{grid-column:1/-1}
.field label{font-size:.9rem;font-weight:500;margin-bottom:.4rem}
.field abbr{text-decoration:none;color:var(--amber)}

.field input,.field select,.field textarea{
  font:inherit;font-size:.98rem;color:var(--navy);
  padding:.7rem .85rem;border:1px solid var(--line-strong);border-radius:10px;
  background:#fff;transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field textarea{resize:vertical;min-height:5rem}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.18);
}
.field-hint{margin-top:.35rem;font-size:.82rem;color:var(--slate);line-height:1.45}
.field-error{margin-top:.35rem;font-size:.82rem;font-weight:500;color:#B42318}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#B42318}

.field-check{
  grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;
  gap:.2rem .7rem;align-items:start;margin-top:1.4rem;
}
.field-check input{width:1.15rem;height:1.15rem;margin-top:.15rem;accent-color:var(--blue)}
.field-check label{font-size:.9rem;font-weight:400;line-height:1.5;margin:0}
.field-check .field-error{grid-column:2}
.field-check a{color:var(--blue);text-underline-offset:2px}

/* Spam-Falle: unsichtbar, aber nicht display:none — sonst füllen
   manche Bots sie gar nicht erst aus. */
.form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-turnstile{margin-top:1.4rem}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.6rem}
.form-status{font-size:.9rem;color:var(--slate)}
.form-status.is-error{color:#B42318}
.form-status a{color:var(--blue);margin-left:.35rem}
.form-alt{margin:1.2rem 0 0;font-size:.9rem;color:var(--slate)}
.form-alt a{color:var(--blue)}

/* Erfolgszustand */
.form-done{text-align:center}
.form-done:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.form-done-mark{
  width:2.75rem;height:2.75rem;margin:0 auto 1rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--ice);color:var(--blue);font-size:1.35rem;
}
.form-done-h{font-size:1.3rem;font-weight:500;letter-spacing:-.02em;margin:0 0 .6rem}
.form-done-text{color:var(--slate);font-weight:300;line-height:1.6;margin:0}
.form-done-text a{color:var(--blue)}

/* ─── Erstgespräch ─────────────────────────────────────────── */
.talk{
  padding:clamp(1.5rem,3vw,2.25rem);border-radius:20px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
}
.talk-h{font-size:1.25rem;font-weight:500;letter-spacing:-.02em;margin:0 0 .8rem}
.talk-text{font-weight:300;line-height:1.65;opacity:.88;margin:0 0 1.2rem}
.talk-list{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.6rem}
.talk-list li{position:relative;padding-left:1.4rem;font-size:.95rem;font-weight:300;opacity:.88;line-height:1.5}
.talk-list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:.45rem;height:.45rem;border-radius:50%;background:var(--amber);
}
.talk-note{font-size:.9rem;opacity:.72;font-weight:300;line-height:1.55;margin:0}
.talk-booking{margin-top:1.4rem}
.talk-frame{width:100%;min-height:34rem;border:0;border-radius:14px;background:#fff}
.talk-fallback{margin:1.4rem 0 0;font-size:.88rem;opacity:.7;font-weight:300;line-height:1.55}

/* ─── Responsiv ────────────────────────────────────────────── */
@media (max-width:900px){
  .contact-cols{grid-template-columns:1fr;gap:2rem}
  .form-grid{grid-template-columns:1fr}
  .team-portrait{max-width:7.5rem}
}
@media (max-width:560px){
  .team-grid{grid-template-columns:1fr}
  .team-portrait{max-width:6.5rem}
}

/* ═══════════════════════════════════════════════════════════
   Markenzeichen im Header · Teamkarten
   Ergänzung, ausschließlich Tokenfarben.
   ═══════════════════════════════════════════════════════════ */

/* ─── Echte Marke statt blasser Silhouette ──────────────────
   Bisher wurden die drei Gipfel über dem dunklen Hero auf Eis/Weiß
   umgefärbt — dadurch war oben links nicht das Logo zu sehen, sondern
   eine Silhouette. Jetzt stehen überall die Markenfarben (Navy,
   Navy 78 %, Blue, Sonne Amber). Damit Navy auf dem dunklen Hero
   lesbar bleibt, sitzt die Marke dort auf einer hellen Fläche.
   Kein Verlauf, kein Schatten, keine Kontur — nur ein Träger, der
   den vom Markenhandbuch geforderten Freiraum mitbringt. */
/* Der Träger ist immer vorhanden, nur seine Fläche wird ein- und
   ausgeblendet. Dadurch bleibt der Platzbedarf der Marke in beiden
   Header-Zuständen identisch — das Wortzeichen springt beim Wechsel
   in den Sticky-Zustand nicht. */
.header .brand-mark{
  padding:7px 9px;
  border-radius:10px;
  box-sizing:content-box;
  background:transparent;
  transition:background .4s var(--ease);
}
.header:not(.is-stuck):not(.header-solid) .brand-mark{background:var(--off)}

/* ─── Teamkarten ────────────────────────────────────────────
   Weg vom neutralen Raster: das Porträt trägt die Karte, der Name
   steht darunter, ein amberfarbener Steg markiert die Person —
   dieselbe Rolle, die Amber im Rest der Marke hat (Signal, nicht
   Dekoration). */
.team-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;border-radius:20px;
}
.team-card{
  position:relative;min-height:0;align-items:flex-start;
  padding:clamp(1.1rem,1.8vw,1.5rem);
  gap:0;
}
/* Feiner Steg unter dem Porträt — greift die Aufstiegsidee auf. */
.team-card .team-name{
  position:relative;margin:0 0 .3rem;padding-top:.85rem;
  font-size:clamp(1.05rem,1.5vw,1.25rem);
}
.team-card .team-name::before{
  content:"";position:absolute;top:0;left:0;
  width:1.75rem;height:2px;background:var(--amber);
}
.team-card .team-role{font-size:.9rem}

@media (max-width:900px){
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team-card{padding:1rem}
  .team-portrait{font-size:1.5rem;margin-bottom:.8rem}
  .team-card .team-name{font-size:.98rem;line-height:1.25}
  .team-card .team-role{font-size:.82rem}
}

/* ─── Porträt: Monogramm als Unterlage, Foto darüber ─────────
   Das <img> steht im Markup und lädt nativ per loading="lazy".
   Das Monogramm liegt als ::after darunter und wird nur sichtbar,
   wenn kein Bild (mehr) da ist — script.js entfernt ein Bild, das
   nicht geladen werden konnte. Kein Observer, kein Layout-Shift. */
.team-portrait{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;max-width:11rem;aspect-ratio:1;margin-bottom:1.1rem;
  border-radius:50%;overflow:hidden;
  background:var(--ice);border:1px solid var(--line);
  color:var(--navy);font-size:2rem;font-weight:500;letter-spacing:.08em;
  user-select:none;
}
.team-portrait::after{
  content:attr(data-initials);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--navy);font-size:2rem;font-weight:500;letter-spacing:.08em;
}
.team-portrait img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:cover;
  display:block;border-radius:inherit;
  /* Gemeinsamer Standard; je Person unten feinjustiert. */
  object-position:50% 22%;
}

/* Die drei Fotos haben unterschiedliche Ausgangsformate (4:5, 1:1, 3:2).
   Der Kreis schneidet quadratisch — diese Werte halten die Gesichter
   vergleichbar hoch im Ausschnitt. Bei ausgetauschten Fotos hier
   nachziehen; sonst ist nichts anzupassen. */
.team-portrait[data-initials="FM"] img{object-position:50% 18%}
.team-portrait[data-initials="HM"] img{object-position:50% 28%}
.team-portrait[data-initials="JM"] img{object-position:50% 30%}
/* Sobald ein Bild vorhanden ist, verschwindet der helle Träger. */
.team-portrait:has(img){background:none;border-color:transparent}
.team-portrait:has(img) img{box-shadow:inset 0 0 0 1px var(--line)}