/* ═══════════════════════════════════════════════════════════════
   MFSim — Produktseite
   Fast schwarz, gebürsteter Stahl, elektrisches Blau.
   Ein Gedanke je Bildschirm, das Bild trägt, der Text ordnet.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#060708;
  --bg-2:#0b0d10;
  --bg-3:#101318;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.14);
  --text:#f2f5f8;
  --text-2:#a7b0bc;
  --text-3:#6b7480;
  --blau:#2e9bff;
  --blau-hell:#7cc4ff;
  --rand:clamp(1.25rem,5vw,4.5rem);
  --breit:1320px;
  --schmal:min(68ch,100%);
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font:400 clamp(1rem,.95rem + .25vw,1.14rem)/1.6 ui-sans-serif,-apple-system,
       "SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.huelle{width:min(var(--breit),100% - 2*var(--rand));margin-inline:auto}

/* ─────────────────────────────────────────────── Typografie */
h1,h2,h3{
  font-weight:640;letter-spacing:-.035em;line-height:1.02;
  font-family:ui-sans-serif,-apple-system,"SF Pro Display","Segoe UI",Inter,system-ui,sans-serif;
}
h1{font-size:clamp(2.9rem,8.5vw,7.4rem)}
h2{font-size:clamp(2.1rem,5.4vw,4.4rem);line-height:1.04}
h3{font-size:1.18rem;font-weight:600;letter-spacing:-.02em;line-height:1.3}

.gedimmt{color:var(--text-3)}
.akzent{color:var(--blau)}

.zeile{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:clamp(1.1rem,2.5vw,2rem);
}
.fliess{color:var(--text-2);max-width:54ch;margin-top:1.6rem;line-height:1.65}
.fliess.mitte{margin-inline:auto;text-align:center}
.fliess.betont{color:var(--text);font-size:1.18rem;margin-top:2.2rem;
  padding-left:1.2rem;border-left:2px solid var(--blau)}
.mitte{text-align:center}

/* ─────────────────────────────────────────────── Einblenden */
[data-auf]{opacity:0;transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
[data-auf].da{opacity:1;transform:none}
[data-auf-spaet]{transition-delay:.12s}
[data-auf-spaeter]{transition-delay:.26s}

/* ─────────────────────────────────────────────── Kopf */
#kopf{
  position:fixed;inset:0 0 auto;z-index:60;
  transition:background .4s,border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent;
  /* Ohne Schleier steht die Navigation auf den hellen Deckenleuchten des
     Hallenbildes und ist kaum zu lesen. */
  background:linear-gradient(to bottom,rgba(4,5,6,.96) 0,rgba(4,5,6,.86) 68px,rgba(0,0,0,0) 150px);
}
#kopf.fest{background-image:none}
#kopf.fest{
  background:rgba(6,7,8,.72);backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);border-bottom-color:var(--line);
}
.kopf-inhalt{display:flex;align-items:center;gap:2rem;height:68px}
/* In der Kopfzeile steht die Marke als Schrift, nicht als Grafik: das Logo
   lebt von Tiefe und Verlauf, und beides faellt bei 30 Pixel Hoehe zu einem
   dunklen Fleck zusammen. Die Grafik bekommt stattdessen weiter unten einen
   eigenen Bildschirm, auf dem sie gross genug ist, um zu wirken. */
.marke{display:flex;align-items:center}
.wortmarke{font-weight:680;font-size:1.3rem;letter-spacing:-.045em;
  font-family:ui-sans-serif,-apple-system,"SF Pro Display","Segoe UI",Inter,system-ui,sans-serif}
.marke.klein .wortmarke{font-size:1.1rem}
#kopf nav{margin-left:auto;display:flex;gap:2.1rem}
#kopf nav a{font-size:.9rem;color:var(--text-2);transition:color .2s}
#kopf nav a:hover{color:var(--text)}
@media(max-width:900px){#kopf nav{display:none}.kopf-inhalt .knopf{margin-left:auto}}

/* ─────────────────────────────────────────────── Knöpfe */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blau);color:#03121f;font-weight:600;font-size:.92rem;
  padding:.6rem 1.3rem;border-radius:100px;white-space:nowrap;
  transition:background .2s,transform .2s,box-shadow .2s;
}
.knopf:hover{background:var(--blau-hell);transform:translateY(-1px);
  box-shadow:0 8px 28px rgba(46,155,255,.26)}
.knopf.gross{font-size:1.02rem;padding:.95rem 2rem}
.knopf.leer{background:transparent;color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line-2)}
.knopf.leer:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line-2)}

/* ─────────────────────────────────────────────── Bühne */
.buehne{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-bottom:clamp(4rem,11vh,9rem);overflow:hidden}
.buehne-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;filter:saturate(.85) contrast(1.04)}
.buehne-verlauf{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(6,7,8,.80) 0%,rgba(6,7,8,.30) 32%,rgba(6,7,8,.86) 72%,var(--bg) 100%),
    radial-gradient(90% 70% at 18% 72%,rgba(46,155,255,.17),transparent 62%);
}
.buehne-text{position:relative;z-index:2}
.buehne h1{text-shadow:0 2px 50px rgba(0,0,0,.55)}
.buehne .zeile{color:#c2ccd8;text-shadow:0 1px 14px rgba(0,0,0,.9)}
.buehne-tasten{display:flex;gap:.85rem;margin-top:clamp(2rem,4vw,3rem);flex-wrap:wrap}
.mitte-tasten{justify-content:center}

.scrollhinweis{position:absolute;bottom:1.7rem;left:50%;translate:-50% 0;z-index:2;
  width:22px;height:36px;border-radius:12px;border:1px solid var(--line-2)}
.scrollhinweis span{position:absolute;top:7px;left:50%;translate:-50% 0;width:3px;height:7px;
  border-radius:2px;background:var(--blau);animation:tropfen 2.1s cubic-bezier(.5,0,.5,1) infinite}
@keyframes tropfen{0%{opacity:0;transform:translate(-50%,0)}
  30%{opacity:1}70%{opacity:1;transform:translate(-50%,13px)}100%{opacity:0;transform:translate(-50%,15px)}}
@media(prefers-reduced-motion:reduce){.scrollhinweis span{animation:none}}

/* ─────────────────────────────────────────────── Aussage */
.aussage{padding:clamp(7rem,19vh,15rem) 0;text-align:center}
.aussage.schmal{padding-block:clamp(5.5rem,14vh,11rem)}
.gross-satz{
  font-size:clamp(2rem,5.6vw,4.6rem);font-weight:640;letter-spacing:-.035em;
  line-height:1.08;max-width:19ch;margin-inline:auto;
}

/* ─────────────────────────────────────────────── Volle Breite */
.voll{display:grid;align-items:center;gap:clamp(2.5rem,6vw,5rem);
  padding-block:clamp(4rem,10vh,8rem)}
@media(min-width:950px){
  .voll{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
  .voll.umgedreht .voll-text{order:2}
  .voll.umgedreht .voll-bild{order:1}
  .voll .huelle{width:auto;margin:0;padding-inline:0;max-width:46ch;
    margin-left:max(var(--rand),calc((100vw - var(--breit))/2))}
  .voll.umgedreht .huelle{margin-left:clamp(2rem,4vw,4rem);margin-right:var(--rand)}
}
.voll-bild{position:relative;overflow:hidden;border-radius:16px 0 0 16px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.voll.umgedreht .voll-bild{border-radius:0 16px 16px 0}
.voll-bild img{width:100%}
.voll-bild::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px var(--line);border-radius:inherit;pointer-events:none}
@media(max-width:949px){
  .voll-bild,.voll.umgedreht .voll-bild{border-radius:12px;margin-inline:var(--rand)}
}

/* ─────────────────────────────────────────────── Dunklerer Block */
.dunkler{background:var(--bg-2);padding-block:clamp(5rem,13vh,10rem);
  border-block:1px solid var(--line)}

/* ─────────────────────────────────────────────── Telegramm */
.telegramm{margin-top:clamp(2.5rem,5vw,4rem);background:#05060a;
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.telegramm-kopf{display:flex;align-items:center;gap:.65rem;padding:.85rem 1.2rem;
  border-bottom:1px solid var(--line)}
.punkt{width:7px;height:7px;border-radius:50%;background:var(--blau);
  box-shadow:0 0 10px rgba(46,155,255,.8)}
.mono-klein{font-family:ui-monospace,Menlo,monospace;font-size:.72rem;
  letter-spacing:.14em;color:var(--text-3);text-transform:uppercase}
.telegramm pre{margin:0;padding:1.3rem 1.2rem;overflow-x:auto}
.telegramm code{font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:clamp(.56rem,1.06vw,.78rem);line-height:2;white-space:pre}
.t-ein{color:var(--blau-hell);display:block}
.t-aus{color:#8de0a8;display:block}
.telegramm-fuss{display:flex;flex-wrap:wrap;gap:1.6rem;padding:.9rem 1.2rem;
  border-top:1px solid var(--line);font-size:.84rem;color:var(--text-3)}
.telegramm-fuss b{font-weight:400}
.telegramm-fuss .ein{color:var(--blau-hell)}
.telegramm-fuss .aus{color:#8de0a8}

/* ─────────────────────────────────────────────── Paare */
.paare{display:grid;gap:clamp(1.8rem,3.5vw,3rem);margin-top:clamp(3rem,6vw,5rem)}
@media(min-width:720px){.paare{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.paare.weit{grid-template-columns:repeat(3,1fr)}}
.paare > div{padding-top:1.4rem;border-top:1px solid var(--line-2)}
.paare p{color:var(--text-2);margin-top:.6rem;font-size:.98rem;max-width:44ch}

/* ─────────────────────────────────────────────── Null */
.null{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,2.5vw,2rem);
  margin-top:clamp(3rem,7vw,5.5rem);flex-wrap:wrap}
.null-zahl{font-size:clamp(5rem,16vw,12rem);font-weight:650;letter-spacing:-.06em;
  line-height:.8;
  background:linear-gradient(170deg,#fff 10%,var(--blau) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.null-text{font-size:clamp(1.05rem,2vw,1.5rem);color:var(--text-2);max-width:12ch;
  letter-spacing:-.01em;line-height:1.25}

/* ─────────────────────────────────────────────── Schluss */
.schluss{padding-block:clamp(7rem,18vh,14rem);text-align:center;position:relative;
  overflow:hidden}
.schluss::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:120%;
  background:radial-gradient(60% 60% at 50% 100%,rgba(46,155,255,.16),transparent 70%);
  pointer-events:none}
.schluss .huelle{position:relative}

/* ─────────────────────────────────────────────── Fuß */
footer{border-top:1px solid var(--line);padding:clamp(3rem,6vw,5rem) 0 3.5rem;
  background:var(--bg-2)}
.fuss-raster{display:grid;gap:2.5rem}
@media(min-width:760px){.fuss-raster{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.fuss-titel{font-family:ui-monospace,Menlo,monospace;font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:.9rem}
footer p{font-size:.93rem;color:var(--text-2);line-height:1.9}
footer a{transition:color .2s}
footer a:hover{color:var(--blau)}
.fuss-klein{font-size:.86rem;color:var(--text-3);margin-top:.9rem;line-height:1.6}

/* ─────────────────────────────────────────────── Rechtstexte */
.rechts{padding:calc(68px + clamp(3rem,8vh,6rem)) 0 clamp(4rem,10vh,8rem)}
.rechts .huelle{max-width:74ch}
.rechts h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:2.5rem}
.rechts h2{font-size:1.32rem;font-weight:600;letter-spacing:-.02em;
  margin:3rem 0 .9rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.rechts p{color:var(--text-2);margin-bottom:.9rem}
.rechts p b,.rechts strong{color:var(--text);font-weight:600}
.rechts a{color:var(--blau)}
.rechts ul{color:var(--text-2);padding-left:1.2rem;margin-bottom:1rem}
.rechts li{margin-bottom:.5rem}
.rechts .stand{color:var(--text-3);font-size:.9rem;margin-top:3rem;
  padding-top:1.5rem;border-top:1px solid var(--line)}


/* ─────────────────────────────────────────────── Markenmoment
   Ein Bildschirm, auf dem nur die Marke steht. Nach der Sicherheit,
   vor der Aufforderung – die Stelle, an der man kurz nichts erklaert. */
.marken-moment{
  padding:clamp(6rem,15vw,12rem) 0;
  background:var(--bg);
  text-align:center;
}
.marke-gross{
  width:min(820px,100%);margin-inline:auto;
  mix-blend-mode:screen;
}

/* Auf dem Telefon bricht die gesperrte Vorzeile sonst mitten im Wort um. */
@media(max-width:560px){
  .zeile{letter-spacing:.18em;font-size:.62rem}
  .marken-moment{padding:clamp(4rem,14vw,7rem) 0}
}