/* ============ TOKENS ============ */
:root{
  --canvas:#E7EEF4;
  --panel:#FBFDFE;
  --navy:#00486E;
  --navy-deep:#052F47;
  --sky:#00AAE5;
  --sky-ink:#005777;
  --accent:#FFD31D;
  --accent-hover:#F0C200;
  --accent-muted:rgba(0,170,229,.22);
  --text-primary:#052F47;
  --text-secondary:#344E5D;
  --on-dark:#EDF3F7;
  --on-dark-soft:#A8C6D6;
  --line:rgba(5,47,71,.14);
  --line-strong:rgba(5,47,71,.30);

  --display:"Archivo",system-ui,sans-serif;
  --body:"Figtree",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.33,.02,.18,1);

  --tshadow:0 1px 2px rgba(5,20,31,.95),0 3px 12px rgba(5,20,31,.78),0 10px 44px rgba(5,20,31,.8);
  --shadow-card:0 1px 2px rgba(5,47,71,.06),0 12px 34px -18px rgba(5,47,71,.34);
  --gut:clamp(18px,4.2vw,64px);
  --maxw:1220px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-weight:400;font-size:clamp(16px,1.05vw,17.5px);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}  /* height:auto or the HTML height attribute stretches it */
h1,h2,h3{font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:700;line-height:1.02;letter-spacing:-.018em;margin:0}
p{margin:0}
a{color:var(--sky-ink)}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--navy-deep)}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--accent);color:var(--navy-deep);padding:12px 18px;font-weight:600;border-radius:0 0 10px 0}
.skip:focus{left:0}

.wrap{width:min(100% - var(--gut)*2,var(--maxw));margin-inline:auto}
.kicker{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sky-ink)}
.lede{color:var(--text-secondary);font-size:clamp(1rem,1.25vw,1.15rem);max-width:60ch}

/* ============ THE ENVIRONMENT LAYER ============ */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env::before{
  content:"";position:absolute;inset:-22%;
  background:
    radial-gradient(56% 40% at 12% 4%,rgba(0,170,229,.34),transparent 62%),
    radial-gradient(48% 38% at 90% 26%,rgba(0,72,110,.15),transparent 64%),
    radial-gradient(42% 34% at 24% 62%,rgba(0,170,229,.20),transparent 64%),
    radial-gradient(46% 36% at 76% 86%,rgba(255,211,29,.15),transparent 62%),
    radial-gradient(60% 46% at 50% 118%,rgba(0,72,110,.12),transparent 66%);
  animation:envdrift 96s var(--ease-soft) -26s infinite alternate;
}
.env::after{
  content:"";position:absolute;inset:0;
  /* feines Punktraster plus Korn, beides auf Fluesterstaerke */
  background-image:
    radial-gradient(circle at 1px 1px,rgba(5,47,71,.13) 1px,transparent 1.4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:24px 24px,160px 160px;
  opacity:.42;
  mask-image:radial-gradient(120% 90% at 50% 30%,#000 30%,rgba(0,0,0,.35) 100%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000 30%,rgba(0,0,0,.35) 100%);
}
/* weicher Rand, damit die Flaeche nicht flach wirkt */
.env::marker{content:""}
@keyframes envdrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(2.8%,-2.4%,0) scale(1.09)}
}
.page{position:relative;z-index:1}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:20px;
  padding:14px var(--gut);
  /* the logo is deep navy on transparent, so the bar carries its own light
     ground from the first pixel instead of floating over dark footage */
  background:rgba(237,243,247,.60);backdrop-filter:blur(26px) saturate(1.35);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
/* gescrollt bleibt die Deckkraft gleich, nur eine Haarlinie kommt dazu.
   0.60 ist der gemessene Boden: darunter faellt das dunkelblaue Logo
   ueber dem dunklen Hero unter 3:1 und wird unlesbar. */
.nav.solid{background:rgba(237,243,247,.66);border-bottom-color:rgba(5,47,71,.10);box-shadow:0 10px 30px -28px rgba(5,47,71,.7)}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.nav-logo img{width:clamp(118px,13vw,160px);height:auto}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-links a{
  font-weight:500;font-size:.92rem;color:var(--text-primary);text-decoration:none;
  position:relative;padding:6px 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sky);
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1)}
/* .nav-links a ist spezifischer als .btn und nimmt dem Knopf sonst seinen
   Innenabstand und zieht beim Hover einen Strich darueber */
.nav-links a.btn{padding:14px 26px;color:var(--navy-deep);white-space:nowrap}
@media (max-width:560px){.nav-links a.btn{padding:12px 18px;font-size:.86rem}}
.nav-links a.btn::after{display:none}
.nav .btn{margin-left:8px}
@media (max-width:860px){
  .nav-links a:not(.nav-cta){display:none}
  .nav-links{margin-left:auto}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:700;font-size:.94rem;letter-spacing:.005em;
  padding:14px 24px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;
  background:var(--accent);color:var(--navy-deep);
  box-shadow:0 2px 0 rgba(5,47,71,.12);
  transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
  position:relative;
}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(5,47,71,.6)}
.btn:active{transform:translateY(0)}
.btn-ghost{
  background:transparent;color:var(--text-primary);
  border:1.5px solid var(--line-strong);box-shadow:none;
}
.btn-ghost:hover{background:rgba(0,170,229,.10);border-color:var(--sky-ink);transform:translateY(-2px);box-shadow:none}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:#005c8c}
@media (pointer:coarse){.btn{min-height:46px}}

/* ============ SECTION RHYTHM ============ */
.sec{padding:clamp(72px,9vw,132px) 0;position:relative}
.sec-head{max-width:64ch}
.sec-head .kicker{display:block;margin-bottom:14px}
.sec h2{font-size:clamp(2rem,4.4vw,3.5rem)}
.sec h2 em{font-style:normal;color:var(--sky-ink)}
.sec-head .lede{margin-top:18px}

/* the signature rule: a line that draws itself */
.rule{display:block;width:100%;height:14px;overflow:visible}
.rule line{stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s var(--ease-soft)}
.rule.in line{stroke-dashoffset:0}
.rule .r-top{stroke:var(--sky);stroke-width:2}
.rule .r-bot{stroke:var(--line);stroke-width:1.5;transition-delay:.14s}

/* ============ HERO ============ */
.hero{height:1000vh;position:relative}
.stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:var(--navy-deep);
}
.stage .poster{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.03);transition:opacity .9s var(--ease)
}
.stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .85s var(--ease);
  transform:translateZ(0);will-change:transform;
}
.stage.video-ready video{opacity:1}
.stage.video-ready .poster{opacity:0}
.stage.video-failed video{display:none}
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(5,20,31,0) 34%,rgba(5,20,31,.60) 100%);
}
.scrim-top{
  position:absolute;inset:0 0 auto 0;height:32vh;pointer-events:none;
  background:linear-gradient(rgba(5,20,31,.52),rgba(5,20,31,0));
}

/* loading ring */
.ring{position:absolute;left:var(--gut);bottom:calc(var(--gut) + 6px);width:44px;height:44px;color:var(--sky);transform:rotate(-90deg);opacity:.9;transition:opacity .5s var(--ease)}
.ring circle{transition:stroke-dashoffset .18s linear}
.stage.video-ready .ring{opacity:0}
.cue{
  position:absolute;left:50%;bottom:calc(var(--gut) + 2px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(237,243,247,.8);
  text-shadow:0 1px 6px rgba(5,20,31,.9);pointer-events:none;
}
.cue svg{animation:cuebob 2.8s var(--ease-soft) -.6s infinite}
@keyframes cuebob{0%,100%{transform:translateY(-3px);opacity:.55}50%{transform:translateY(4px);opacity:1}}

/* caption bands */
.bands{position:absolute;inset:0;pointer-events:none}
.band{
  position:absolute;inset:0;display:grid;align-content:center;
  padding:0 var(--gut);opacity:0;
  --k:0;--sx:30%;
  text-shadow:var(--tshadow);color:#F4FAFD;
}
/* the band scrim is wide and flat so it holds an even depth across the whole
   line, and dies out by 86% so the frame corners stay live. peak alphas were
   set from the worst-frame audit, not by eye. */
.band::before{
  content:"";position:absolute;inset:-6%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k));
  background:radial-gradient(ellipse 82% 70% at var(--sx) 50%,rgba(4,16,25,.76) 0%,rgba(4,16,25,.60) 52%,rgba(4,16,25,0) 86%);
}
.band > *{position:relative;max-width:min(52ch,46vw)}
.band .cta-row{max-width:none}   /* the line width cap must not squeeze the buttons */
.band .line{
  font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:700;
  font-size:clamp(1.9rem,4.1vw,3.6rem);line-height:1.04;letter-spacing:-.02em;
  text-wrap:balance;   /* no orphaned last word on a line of its own */
}
.band .line.soft{color:#CFE6F2;font-weight:600}
.band .btn{text-shadow:none}

.b-mid{--sx:42%}
.b-mid > *{max-width:min(30ch,52vw)}
/* the settle arrives in the light, so the type inverts with it.
   the cleaning crew lands on the right of the frame, so the words keep left. */
.b6{--sx:30%;color:var(--navy-deep);
    text-shadow:0 1px 2px rgba(255,255,255,.92),0 4px 18px rgba(255,255,255,.85),0 12px 46px rgba(255,255,255,.7)}
.b6::before{background:radial-gradient(ellipse 62% 60% at 30% 48%,rgba(248,252,254,.90) 0%,rgba(248,252,254,.66) 46%,rgba(248,252,254,0) 78%)}
.b6 > *{max-width:min(20ch,44vw)}
.b6 .line{font-size:clamp(2.2rem,5vw,4.2rem);font-weight:800}
.b6 .sub{margin-top:18px;font-size:clamp(1rem,1.5vw,1.2rem);color:#254A5E;max-width:min(34ch,44vw);text-wrap:balance}
.b6 .cta-row{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;pointer-events:auto}

/* word + char split primitives */
.vis{display:inline-block}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* entrance: drift-down (band 1) */
[data-entrance="drift"] .w{
  --kc:clamp(0,(var(--k) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}
/* entrance: blur-to-sharp (band 2) */
[data-entrance="blur"]{position:relative}
[data-entrance="blur"] .sharp{opacity:var(--k)}
[data-entrance="blur"] .soft{
  position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k));color:#CDE7F5;
}
/* entrance: word-punch with overshoot (band 3) */
[data-entrance="punch"] .w{
  --kc:clamp(0,(var(--k) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(0.62 + (0.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
[data-entrance="punch"] .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* entrance: approach-from-depth (band 4, echoes the push through the door) */
[data-entrance="depth"] .w{
  --kc:clamp(0,(var(--k) - var(--th,0))*2.4,1);
  opacity:var(--kc);
  transform:scale(calc(0.80 + 0.20*var(--kc)));
}
/* entrance: staged rise (bands 5 and 6) */
[data-entrance="rise"] .w{
  --kc:clamp(0,(var(--k) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 30px));
}
.b6 .sub{--ks:clamp(0,(var(--k) - .60)*3.6,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*18px))}
.b6 .cta-row{--kb:clamp(0,(var(--k) - .76)*4.6,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*18px))}

/* drifting droplets, the hero's living element */
.drops{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)}
.stage.settled .drops{opacity:.55}
.drop{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(207,236,248,.9);box-shadow:0 0 8px rgba(0,170,229,.8)}
.drop{animation:dropfall linear infinite}
@keyframes dropfall{0%{transform:translateY(-8vh);opacity:0}12%{opacity:1}100%{transform:translateY(108vh);opacity:0}}

/* ============ STATIC HERO ============
   Das Aussehen steht hier und nicht in der Medienabfrage weiter unten, damit
   dort nur noch das Anzeigen umgeschaltet wird. Solange display:none gilt,
   laedt der Browser das Hintergrundbild nicht. */
.static-hero{
  display:none;align-content:end;
  min-height:min(88vh,760px);position:relative;overflow:hidden;
  padding:clamp(90px,16vw,140px) var(--gut) clamp(40px,7vw,64px);
  background-color:var(--navy-deep);
  background-image:linear-gradient(rgba(4,18,28,.20) 0%,rgba(4,18,28,.30) 46%,rgba(4,18,28,.80) 100%),url("hero-ending.jpg");
  /* the portrait crop is pushed right so the crew, the trolley and the light
     land in frame instead of the blank wall on the left */
  background-size:cover;background-position:72% center;
  color:#F4FAFD;text-shadow:var(--tshadow);
}
/* sieht aus wie eine Ueberschrift, ist aber keine: die eine H1 der Seite steht
   ausserhalb des Heros, damit sie in beiden Faellen vorhanden bleibt */
.static-hero .titel{font-family:var(--display);font-size:clamp(2.2rem,9vw,3.4rem);font-weight:800;line-height:1.05;max-width:14ch}
.static-hero .sub{margin-top:16px;color:#DCEDF6;font-size:clamp(1rem,4vw,1.12rem);max-width:38ch}
.static-hero .cta-row{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.static-hero .btn{text-shadow:none}

/* ============ SECTION: DER UNTERSCHIED (the hold) ============ */
#unterschied{padding-top:clamp(84px,10vw,150px)}
.diff-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:center;margin-top:clamp(34px,4.5vw,56px)}
.diff-stage{
  position:relative;border-radius:20px;overflow:hidden;aspect-ratio:3/2;
  background:var(--navy-deep);box-shadow:var(--shadow-card);
  --hold:0;
}
.diff-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.diff-stage .after{clip-path:inset(0 0 calc(100% - var(--hold)*100%) 0)}
.diff-edge{
  position:absolute;left:0;right:0;top:calc(var(--hold)*100%);height:2px;
  background:linear-gradient(90deg,rgba(0,170,229,0),var(--sky) 14%,#fff 50%,var(--sky) 86%,rgba(0,170,229,0));
  box-shadow:0 0 22px rgba(0,170,229,.9);
  opacity:calc(.25 + .75*var(--hold));
}
.diff-tag{
  position:absolute;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  padding:7px 11px;border-radius:9px;
  background:rgba(8,26,38,.6);border:1px solid rgba(168,198,214,.34);color:#E6F3FA;
  backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,20,31,.85);
}
.diff-tag.t-clean{left:14px;top:14px;opacity:var(--hold)}
.diff-tag.t-dirty{right:14px;bottom:14px;opacity:calc(1 - var(--hold)*.7)}
.hold-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;
  margin-top:26px;padding:17px 22px;border-radius:14px;cursor:pointer;
  font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:700;font-size:1rem;
  color:var(--navy-deep);background:var(--panel);
  border:1.5px solid var(--line-strong);position:relative;overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;
  transition:border-color .35s var(--ease),transform .2s var(--ease);
}
.hold-btn:hover{border-color:var(--sky-ink)}
.hold-btn:active{transform:scale(.99)}
.hold-btn::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:100%;
  background:linear-gradient(90deg,rgba(0,170,229,.26),rgba(0,170,229,.13));
  transform:scaleX(var(--hold,0));transform-origin:left;
}
.hold-btn span{position:relative}
.hold-hint{margin-top:12px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.proofs{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:2px}
.proofs li{
  display:flex;gap:14px;align-items:baseline;padding:15px 0;border-top:1px solid var(--line);
  opacity:.28;transform:translateY(8px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.proofs li.lit{opacity:1;transform:none}
.proofs li:nth-child(2).lit{transition-delay:.13s}
.proofs li:nth-child(3).lit{transition-delay:.26s}
.proofs .n{font-family:var(--mono);font-size:.7rem;color:var(--sky-ink);flex:0 0 auto}
.proofs .t{font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:700;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.25}
@media (max-width:840px){.diff-grid{grid-template-columns:1fr}}

/* ============ SECTION: LEISTUNGEN ============ */
#leistungen{background:transparent}
.svc{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(34px,4.5vw,56px)}
.card{
  grid-column:span 2;position:relative;border-radius:18px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.svc.in .card{opacity:1;transform:none}
.svc.in .card:nth-child(1){transition-delay:0s}
.svc.in .card:nth-child(2){transition-delay:.09s}
.svc.in .card:nth-child(3){transition-delay:.18s}
.svc.in .card:nth-child(4){transition-delay:.27s}
.svc.in .card:nth-child(5){transition-delay:.36s}
.svc.done .card,.svc.done .card:nth-child(1),.svc.done .card:nth-child(2),.svc.done .card:nth-child(3),.svc.done .card:nth-child(4),.svc.done .card:nth-child(5){transition-delay:0s}
.card:hover{border-color:var(--accent-muted);box-shadow:0 18px 44px -22px rgba(5,47,71,.5)}
.card--wide{grid-column:span 3}
.card--tall{grid-column:span 3}
.card figure{margin:0;position:relative;overflow:hidden;aspect-ratio:16/10;background:#CBDDE7}
.card figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.1s var(--ease)}
.card:hover figure img{transform:scale(1.07)}
.card figure::after{
  content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:linear-gradient(90deg,var(--sky),rgba(0,170,229,0));
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease);
}
.card:hover figure::after{transform:scaleX(1)}
.card .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.card h3{font-size:clamp(1.12rem,1.7vw,1.4rem)}
.card p{color:var(--text-secondary);font-size:.95rem}
@media (max-width:980px){.svc{grid-template-columns:repeat(4,1fr)}.card,.card--wide,.card--tall{grid-column:span 2}}
@media (max-width:620px){.svc{grid-template-columns:1fr}.card,.card--wide,.card--tall{grid-column:span 1}}

/* ============ SECTION: ABLAUF ============ */
#ablauf .inner{
  background:var(--panel);border:1px solid var(--line);border-radius:24px;
  padding:clamp(30px,4.4vw,64px);box-shadow:var(--shadow-card);position:relative;overflow:hidden;
}
#ablauf .inner::after{
  content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,170,229,.16),transparent 66%);
  animation:breathe 9s var(--ease-soft) -2.4s infinite alternate;
}
@keyframes breathe{0%{transform:scale(.9);opacity:.55}100%{transform:scale(1.12);opacity:1}}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px);margin-top:clamp(30px,4vw,52px);position:relative}
.step{position:relative;opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.steps.in .step{opacity:1;transform:none}
.steps.in .step:nth-child(2){transition-delay:.12s}
.steps.in .step:nth-child(3){transition-delay:.24s}
.steps.done .step,.steps.done .step:nth-child(2),.steps.done .step:nth-child(3){transition-delay:0s}
.step svg{width:52px;height:52px;margin-bottom:16px}
.step svg *{stroke:var(--sky-ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.step .num{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;color:var(--sky-ink);display:block;margin-bottom:9px}
.step h3{font-size:clamp(1.1rem,1.6vw,1.32rem);margin-bottom:9px}
.step p{color:var(--text-secondary);font-size:.95rem}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:30px}}

/* ============ SECTION: VERTRAUEN (dark) ============ */
#vertrauen{background:var(--navy-deep);color:var(--on-dark);margin-block:clamp(10px,2vw,28px);border-radius:28px;overflow:hidden;position:relative}
#vertrauen::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 82% 16%,rgba(0,170,229,.20),transparent 62%);
}
#vertrauen .kicker{color:var(--sky)}
#vertrauen h2{color:#fff}
#vertrauen p{color:var(--on-dark-soft)}
.trust-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.7fr);gap:clamp(30px,4.5vw,70px);align-items:center;position:relative}
.house{width:100%;max-width:400px;margin-inline:auto}
.house *{fill:none;stroke:var(--sky);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s var(--ease-soft)}
.house.in *{stroke-dashoffset:0}
.house .d2{transition-delay:.3s}
.house .d3{transition-delay:.6s;stroke:var(--accent)}
.badges{list-style:none;margin:clamp(28px,3.6vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(168,198,214,.2);border:1px solid rgba(168,198,214,.2);border-radius:16px;overflow:hidden}
.badges li{background:var(--navy-deep);padding:20px 22px;display:flex;gap:13px;align-items:baseline}
.badges .dot{width:7px;height:7px;border-radius:50%;background:var(--sky);flex:0 0 auto;box-shadow:0 0 12px var(--sky)}
.badges span:last-child{font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:700;font-size:.98rem;line-height:1.3;color:#fff}
@media (max-width:860px){.trust-grid{grid-template-columns:1fr}.badges{grid-template-columns:1fr}.house{max-width:230px;margin:0}}

/* ============ SECTION: FRAGEN ============ */
.faq{max-width:78ch;margin-top:clamp(30px,4vw,52px)}
.q{border-top:1px solid var(--line)}
.q:last-child{border-bottom:1px solid var(--line)}
.q button{
  width:100%;display:flex;gap:18px;align-items:flex-start;justify-content:space-between;
  background:none;border:0;cursor:pointer;text-align:left;padding:22px 2px;
  font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:700;
  font-size:clamp(1.02rem,1.55vw,1.24rem);line-height:1.3;color:var(--text-primary);
  transition:color .3s var(--ease);
}
.q button:hover{color:var(--sky-ink)}
.q .ic{flex:0 0 auto;width:22px;height:22px;margin-top:3px;position:relative}
.q .ic::before,.q .ic::after{content:"";position:absolute;left:2px;right:2px;top:10px;height:2px;background:var(--sky-ink);border-radius:2px;transition:transform .45s var(--ease)}
.q .ic::after{transform:rotate(90deg)}
.q[open] .ic::after{transform:rotate(0)}
.q .ans{overflow:hidden;height:0;transition:height .5s var(--ease)}
.q .ans p{padding:0 2px 26px;color:var(--text-secondary);max-width:66ch}

/* ============ SECTION: ANGEBOT ============ */
/* feste Leiste darf beim Sprung auf einen Anker nichts verdecken */
#leistungen,#ablauf,#vertrauen,#fragen,#angebot{scroll-margin-top:120px}
#angebot .inner{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr);gap:clamp(28px,4vw,64px);
  background:var(--panel);border:1px solid var(--line);border-radius:24px;
  padding:clamp(28px,4.4vw,60px);box-shadow:var(--shadow-card);position:relative;overflow:hidden;
}
#angebot .inner::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--sky),var(--accent) 72%,rgba(255,211,29,0));
}
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;color:var(--text-primary);
  background:var(--canvas);border:1.5px solid var(--line-strong);border-radius:11px;
  padding:13px 14px;width:100%;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sky-ink);background:#fff;outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-foot{margin-top:22px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.form-note{font-size:.84rem;color:var(--text-secondary);max-width:40ch}
.thanks{
  display:none;border:1.5px solid var(--sky);background:rgba(0,170,229,.09);
  border-radius:16px;padding:26px 24px;
}
.thanks.on{display:block}
.thanks h3{font-size:1.3rem;margin-bottom:8px}
.thanks p{color:var(--text-secondary)}
.side{align-self:start}
.side .box{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--canvas)}
.side h3{font-size:1.18rem;margin-bottom:14px}
.side a{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--text-primary);font-weight:500;padding:9px 0;border-bottom:1px solid var(--line)}
.side a:last-child{border-bottom:0}
.side a:hover{color:var(--sky-ink)}
.side svg{width:18px;height:18px;flex:0 0 auto;stroke:var(--sky-ink);stroke-width:1.7;fill:none}
.side .addr{margin-top:18px;font-size:.9rem;color:var(--text-secondary);line-height:1.55}
@media (max-width:860px){#angebot .inner{grid-template-columns:1fr}.two{grid-template-columns:1fr}}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line);padding:clamp(44px,5.5vw,72px) 0 34px;position:relative}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:clamp(26px,3.6vw,54px)}
.foot-grid img{width:170px;margin-bottom:14px}
.foot-grid h4{font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:700;font-size:.92rem;margin:0 0 14px;letter-spacing:.01em}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-grid a{color:var(--text-secondary);text-decoration:none;font-size:.92rem}
.foot-grid a:hover{color:var(--sky-ink)}
.foot-grid p{color:var(--text-secondary);font-size:.92rem}
.foot-bar{margin-top:clamp(32px,4vw,52px);padding-top:22px;border-top:1px solid var(--line);display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;font-size:.84rem;color:var(--text-secondary)}
.foot-bar nav{display:flex;gap:18px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid > :first-child{grid-column:span 2}}

/* generic scroll entrances */
.rev{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rev.in{opacity:1;transform:none}

/* ============ SHORT SCREENS ============ */
@media (max-height:560px){.cue,.ring{display:none}}

/* ============ DIE ZWEI SPERREN FUER DAS STANDBILD ============
   Frueher waren es fuenf, und darunter waren alle Handys. Die Sperre war aber
   nie eine Frage des Koennens, sondern des Gewichts: niemand sollte am Handy
   die 11,9-MB-Fassung ziehen. Handys bekommen deshalb jetzt die eigene,
   1,8 MB leichte Hochkant-Fassung (die Auswahl trifft das Skript in
   index.html). Ohne Film bleiben nur noch die zwei Faelle, in denen ein
   1000vh-Hero wirklich falsch waere. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{display:none}
  .static-hero{display:grid}
}
/* Notausgang des Skripts: laesst ein Geraet den Film gar nicht erst anlaufen,
   schaltet es auf das Standbild um. Besser als ein eingefrorenes Bild, unter
   dem die Textbaender weiterwandern. */
body.standbild .hero{height:auto}
body.standbild .stage{display:none}
body.standbild .static-hero{display:grid}

/* ============ DER FILM AUF DEM HANDY ============
   Die Textbaender waren auf das Querformat gerechnet: 46vw und weniger. Im
   Hochformat ergibt das Spalten von knapp 180px, in denen jede Zeile bricht.
   Hier werden sie aufgemacht, der Schleier rueckt in die Mitte, und die
   Schriftgroessen richten sich nach der Breite statt nach der Hoehe. */
@media (max-width:720px),(orientation:portrait) and (pointer:coarse){
  .band{--sx:50%}
  .band > *{max-width:min(52ch,92vw)}
  .b-mid > *{max-width:min(30ch,92vw)}
  .b6 > *{max-width:min(20ch,88vw)}
  .band .line{font-size:clamp(1.8rem,7.4vw,2.6rem)}
  .b6 .line{font-size:clamp(2rem,8.6vw,3rem)}
  .b6 .sub{font-size:1rem;max-width:min(34ch,90vw)}
  /* der Schleier muss hochkant die ganze Spalte tragen, nicht nur ihre Mitte */
  .band::before{inset:-12%}
  .b6::before{background:radial-gradient(ellipse 88% 64% at 50% 48%,rgba(248,252,254,.92) 0%,rgba(248,252,254,.72) 48%,rgba(248,252,254,0) 84%)}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0ms !important;scroll-behavior:auto !important;
  }
  .rev{opacity:1;transform:none}
  .card{opacity:1;transform:none}
  .step{opacity:1;transform:none}
  .proofs li{opacity:1;transform:none}
  .rule line{stroke-dashoffset:0}
  .house *{stroke-dashoffset:0}
  .diff-stage{--hold:1}
  .hold-btn{display:none}
  .diff-tag.t-dirty{opacity:.3}
  .env::before{animation:none}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ============================================================
   NAVIGATION: das Aufklappmenue der Leistungen
   ============================================================ */
.nav-item{position:relative;display:flex;align-items:center}
.nav-trigger{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--body);font-weight:500;font-size:.92rem;color:var(--text-primary);
  background:none;border:0;cursor:pointer;padding:6px 0;position:relative;
}
.nav-trigger::after{
  content:"";position:absolute;left:0;right:18px;bottom:0;height:2px;background:var(--sky);
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease);
}
.nav-item:hover .nav-trigger::after,.nav-trigger[aria-expanded="true"]::after{transform:scaleX(1)}
.nav-trigger svg{width:11px;height:11px;transition:transform .4s var(--ease)}
.nav-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.navdrop{
  position:absolute;top:calc(100% + 14px);left:-18px;min-width:268px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px -30px rgba(5,47,71,.55),0 2px 8px rgba(5,47,71,.06);
  padding:8px;display:grid;gap:1px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s;
}
.nav-item:hover .navdrop,.navdrop.open{opacity:1;visibility:visible;transform:none}
.navdrop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.navdrop a{
  display:grid;gap:2px;padding:11px 14px;border-radius:11px;text-decoration:none;
  color:var(--text-primary);transition:background .28s var(--ease)
}
.navdrop a:hover{background:rgba(0,170,229,.10)}
.navdrop a[aria-current="page"]{background:rgba(0,170,229,.14)}
.navdrop b{font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:700;font-size:.94rem}
.navdrop span{font-size:.8rem;color:var(--text-secondary);line-height:1.4}
@media (max-width:860px){.nav-item{display:none}}
@media (prefers-reduced-motion:reduce){.navdrop{transition:none}}

/* ============================================================
   DIE GESELLSCHAFTER im Vertrauensabschnitt
   ============================================================ */
.people{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}
.person{
  display:flex;align-items:center;gap:11px;
  background:rgba(168,198,214,.10);border:1px solid rgba(168,198,214,.22);
  border-radius:999px;padding:6px 15px 6px 6px;
}
.person .mono{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--sky);color:#03212F;
  font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:800;font-size:.76rem;letter-spacing:.02em;
}
.person span{font-family:var(--display);font-variation-settings:"wdth" 104;font-weight:700;font-size:.86rem;color:#fff;white-space:nowrap}
@media (max-width:520px){.person span{white-space:normal}}

/* ============================================================
   LEISTUNGSSEITEN
   ============================================================ */
.crumb{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--text-secondary);text-decoration:none}
.crumb a:hover{color:var(--sky-ink)}
.crumb .sep{opacity:.5}

.svc-hero{
  position:relative;overflow:hidden;
  padding:calc(var(--gut) + 92px) 0 clamp(52px,6vw,88px);
}
.svc-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(28px,4.4vw,64px);align-items:center;margin-top:clamp(20px,2.6vw,34px)}
.svc-hero h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1.02;letter-spacing:-.022em;text-wrap:balance;margin-top:14px}
.svc-hero h1 em{font-style:normal;color:var(--sky-ink)}
.svc-hero .lede{margin-top:20px;font-size:clamp(1.02rem,1.35vw,1.2rem)}
.svc-hero .cta-row{margin-top:30px;display:flex;gap:13px;flex-wrap:wrap}
.svc-shot{border-radius:20px;overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:4/3;position:relative;background:#CBDDE7}
.svc-shot img{width:100%;height:100%;object-fit:cover}
.svc-shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--sky),rgba(0,170,229,0))}
@media (max-width:860px){.svc-hero-grid{grid-template-columns:1fr}.svc-shot{aspect-ratio:16/10}}

/* Zahlenreihe */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:clamp(34px,4.4vw,56px)}
.facts div{background:var(--panel);padding:24px 22px;display:grid;gap:6px}
.facts b{font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:800;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1;color:var(--sky-ink)}
.facts span{font-size:.92rem;color:var(--text-secondary)}
@media (max-width:720px){.facts{grid-template-columns:1fr}}

/* Zweispaltiger Textblock */
.prose-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.prose-grid h2{font-size:clamp(1.7rem,3.2vw,2.6rem)}
.prose p{margin:0 0 16px;color:var(--text-secondary);max-width:66ch}
.prose p strong{color:var(--text-primary);font-weight:500}
.prose p:last-child{margin-bottom:0}
@media (max-width:820px){.prose-grid{grid-template-columns:1fr}}

/* Ablauf als nummerierte Liste */
.ol{list-style:none;counter-reset:s;margin:clamp(26px,3.4vw,42px) 0 0;padding:0;display:grid;gap:2px}
.ol li{
  counter-increment:s;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;
  padding:22px 0;border-top:1px solid var(--line);align-items:baseline;
}
.ol li:last-child{border-bottom:1px solid var(--line)}
.ol li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-size:.72rem;color:var(--sky-ink);letter-spacing:.1em;
}
.ol h3{font-size:clamp(1.05rem,1.6vw,1.26rem);margin-bottom:7px}
.ol p{color:var(--text-secondary);font-size:.96rem;max-width:62ch;margin:0}

/* Hakenliste */
.checks{list-style:none;margin:clamp(22px,3vw,34px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.checks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;font-size:.97rem}
.checks svg{width:19px;height:19px;margin-top:2px;flex:0 0 auto;stroke:var(--sky-ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:720px){.checks{grid-template-columns:1fr}}

/* Hinweiskasten */
.note-box{
  margin-top:clamp(26px,3.4vw,40px);background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:14px;padding:22px 24px;max-width:70ch;
}
.note-box h3{font-size:1.04rem;margin-bottom:8px}
.note-box p{color:var(--text-secondary);font-size:.96rem;margin:0}

/* Abschlussband mit Handlungsaufruf */
.cta-band{
  background:var(--navy-deep);color:var(--on-dark);border-radius:28px;overflow:hidden;position:relative;
  padding:clamp(40px,5.4vw,78px) clamp(26px,4vw,64px);margin-block:clamp(10px,2vw,28px);
}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 66% at 84% 14%,rgba(0,170,229,.22),transparent 62%)}
.cta-band .inner2{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3.4vw,52px);align-items:center}
.cta-band h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.7rem);text-wrap:balance}
.cta-band p{color:var(--on-dark-soft);margin-top:14px;max-width:52ch}
.cta-band .cta-row{display:flex;gap:13px;flex-wrap:wrap}
.cta-band .btn-ghost{color:#EAF6FC;border-color:rgba(234,246,252,.45)}
.cta-band .btn-ghost:hover{background:rgba(234,246,252,.12);border-color:#EAF6FC}
@media (max-width:820px){.cta-band .inner2{grid-template-columns:1fr}}

/* Querverweise auf die anderen Leistungen */
.more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:clamp(26px,3.4vw,40px)}
.more a{
  display:grid;gap:5px;padding:20px;border-radius:15px;text-decoration:none;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-card);
  transition:border-color .34s var(--ease),transform .34s var(--ease),box-shadow .34s var(--ease);
}
.more a:hover{border-color:var(--accent-muted);transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(5,47,71,.5)}
.more b{font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:700;font-size:1rem;color:var(--text-primary)}
.more span{font-size:.86rem;color:var(--text-secondary);line-height:1.45}
@media (max-width:900px){.more{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.more{grid-template-columns:1fr}}

/* ============================================================
   LEISTUNGSKARTEN als Links auf die Unterseiten
   ============================================================ */
.card h3 a{color:inherit;text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}  /* ganze Karte klickbar */
.card:focus-within{border-color:var(--sky-ink)}
.card h3 a:focus-visible{outline:none}
.card:focus-within{outline:3px solid var(--sky);outline-offset:3px}
.card .go{
  margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-ink);
}
.card .go svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .38s var(--ease)}
.card:hover .go svg{transform:translateX(5px)}

/* ============================================================
   KLAPPMENUE FUER SCHMALE BILDSCHIRME
   ============================================================ */
.burger{
  display:none;position:relative;width:46px;height:46px;flex:0 0 auto;
  background:none;border:0;cursor:pointer;padding:0;margin-left:4px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  border-radius:12px;transition:background .3s var(--ease);
}
.burger:hover{background:rgba(5,47,71,.07)}
.burger span:not(.sr){
  display:block;width:22px;height:2px;border-radius:2px;background:var(--text-primary);
  transition:transform .4s var(--ease),opacity .25s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobilmenu{
  display:none;position:absolute;top:100%;left:0;right:0;
  background:#EDF3F7;
  border-bottom:1px solid var(--line);
  box-shadow:0 26px 50px -34px rgba(5,47,71,.6);
  padding:10px var(--gut) 20px;
  max-height:calc(100dvh - 100%);overflow-y:auto;
}
.mobilmenu.open{display:grid;gap:1px;animation:mmauf .34s var(--ease)}
@keyframes mmauf{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mobilmenu a{
  display:block;padding:14px 4px;text-decoration:none;color:var(--text-primary);
  font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:700;font-size:1.05rem;
  border-bottom:1px solid var(--line);
}
.mobilmenu a:last-child{border-bottom:0}
.mobilmenu a:hover,.mobilmenu a:focus-visible{color:var(--sky-ink)}
.mm-titel{
  display:block;padding:12px 4px 6px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sky-ink);
}
.mm-trenner{display:block;height:14px}

@media (max-width:860px){
  .burger{display:flex}
  .nav{position:fixed}
}
/* unter 600px wird es eng: Logo, Knopf und Abstaende schrumpfen,
   sonst rutscht der Burger aus dem Bild */
@media (max-width:600px){
  .nav{padding-inline:14px;gap:10px}
  .nav-logo img{width:102px}
  .nav-links{gap:6px}
  .nav-links a.btn{padding:11px 15px;font-size:.8rem}
  .nav .btn{margin-left:0}
  .burger{width:42px;height:42px;margin-left:2px}
}
@media (min-width:861px){
  .mobilmenu{display:none !important}
}
@media (prefers-reduced-motion:reduce){
  .mobilmenu.open{animation:none}
  .burger span:not(.sr){transition:none}
}