/* =========================================================
   NOMDAD — THE SHADOW EDITION
   Dark, editorial, GSAP-orchestrated
   ========================================================= */

:root{
  --bg:         #0A0A0A;
  --bg-soft:    #141414;
  --bg-card:    #111111;
  --fg:         #F4F1EA;
  --fg-dim:     #9A958B;
  --fg-mute:    #555049;
  --yellow:     #FFD600;
  --yellow-2:   #E5C200;
  --accent:     #FF4B1F;
  --cream:      #F4F1EA;
  --line:       rgba(244, 241, 234, 0.12);
  --line-str:   rgba(244, 241, 234, 0.28);

  --display:    'Archivo Black', 'Archivo', sans-serif;
  --font:       'Inter', system-ui, sans-serif;
  --serif:      'Instrument Serif', 'Times New Roman', serif;
  --mono:       'JetBrains Mono', ui-monospace, monospace;

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

  --frame:      clamp(24px, 4vw, 56px);
  --max:        1480px;
}

/* ============ DAY MODE OVERRIDE ============
   Triggered by body.is-day — auto (time-of-day) or manual toggle.
   Canvas flips to the NOMDAD brand yellow; all "yellow accents"
   collapse to black ink so the whole page reads as yellow + black.
============================================= */
body.flip.is-day{
  --bg:         #FFD600;
  --bg-soft:    #F5CC00;
  --bg-card:    #FFFFFF;
  --fg:         #0A0A0A;
  --fg-dim:     #2A2A2A;
  --fg-mute:    #555555;
  --yellow:     #0A0A0A;   /* accents become black ink on yellow canvas */
  --yellow-2:   #1A1A1A;
  --accent:     #FF4B1F;
  --line:       rgba(10, 10, 10, 0.22);
  --line-str:   rgba(10, 10, 10, 0.45);
}
body.flip.is-day .topbar{
  background: linear-gradient(180deg, rgba(255,214,0,.94), rgba(255,214,0,0));
}
body.flip.is-day .grain{ mix-blend-mode: multiply; opacity:.06; }
body.flip.is-day .mouse-glow{
  background: radial-gradient(
    circle 360px at var(--mx, 50%) var(--my, 50%),
    rgba(10, 10, 10, 0.05),
    transparent 70%
  );
}
body.flip.is-day .cursor-f__dot,
body.flip.is-day .cursor-f__ring{ mix-blend-mode: multiply; }

/* Background NOMDAD watermark: subtle dark ink on the yellow canvas. */
body.flip.is-day .f-hero__bg-word{
  color: rgba(10, 10, 10, 0.18);
}

/* Primary CTA inverts on yellow: black pill, yellow label. */
body.flip.is-day .f-btn--primary{
  background: #0A0A0A;
  color: #FFD600;
  border-color: #0A0A0A;
}
body.flip.is-day .f-btn--primary:hover{
  background: transparent;
  color: #0A0A0A;
}
body.flip.is-day ::selection{ background:#0A0A0A; color:#FFD600; }

/* Secondary CTA hover — black pill with YELLOW label (not invisible) */
body.flip.is-day .f-btn--ghost:hover{
  background: #0A0A0A;
  color: #FFD600;
  border-color: #0A0A0A;
}

/* Statement inactive words stay legible on yellow */
body.flip.is-day .f-stmt__text [data-word]{ opacity:.38; }

/* Disciplines cards on yellow canvas */
body.flip.is-day .f-disc__card{
  background: #FFFFFF;
  border-color: rgba(10,10,10,.22);
}
body.flip.is-day .f-disc__card::before{
  color: rgba(10,10,10,.04);
}
body.flip.is-day .f-disc__card:hover{ border-color: #0A0A0A; }
body.flip.is-day .f-disc__num{ color: #0A0A0A; }
body.flip.is-day .f-disc__card ul li::before{ color: #0A0A0A; }
body.flip.is-day .f-disc__title em{ color: #0A0A0A; }

/* AI break bleibt SCHWARZ — nur Schriftfarben zurück auf hell */
body.flip.is-day .f-aibreak{
  background: #000;
  color: #FFFFFF;
  border-color: rgba(255,255,255,.08);
}
body.flip.is-day .f-aibreak__headline,
body.flip.is-day .f-aibreak__headline em{ color: #FFFFFF; }
body.flip.is-day .f-aibreak__headline em{ color: #FFD600; }
body.flip.is-day .f-aibreak__kicker{ color: #FFD600; }
body.flip.is-day .f-aibreak__sub{ color: rgba(255,255,255,.72); }
body.flip.is-day .f-aibreak__stats{ border-top-color: rgba(255,255,255,.12); }
body.flip.is-day .f-aibreak__stats strong{ color: #FFD600; }
body.flip.is-day .f-aibreak__stats span{ color: rgba(255,255,255,.64); }

/* Mobile §06b — Day-Mode: gelber Canvas, dunkle Schrift, Phones behalten helle Innenschrift */
body.flip.is-day .f-mobile{
  border-color: rgba(10,10,10,.22);
}
body.flip.is-day .f-mobile__headline em{ color: #0A0A0A; }
body.flip.is-day .f-mobile__bg{
  background:
    radial-gradient(ellipse 40% 50% at 30% 50%, rgba(10,10,10,.04), transparent 60%),
    radial-gradient(ellipse 40% 50% at 70% 50%, rgba(10,10,10,.04), transparent 60%);
}
body.flip.is-day .f-mobile__grid-bg{ opacity:.03; }
body.flip.is-day .f-mobile__caps{ background: rgba(10,10,10,.22); border-color: rgba(10,10,10,.22); }
body.flip.is-day .f-mobile__cap{ background: #FFD600; }
body.flip.is-day .f-mobile__cap:hover{ background: #F5CC00; }
body.flip.is-day .f-mobile__cap-num{ color: #0A0A0A; }
body.flip.is-day .f-mobile__tech .sep{ color: rgba(10,10,10,.25); }
body.flip.is-day .f-mobile__os-dot{
  background: #0A0A0A;
  box-shadow: 0 0 8px rgba(10,10,10,.3);
}
/* Phone innards: force night-palette inside the dark phone shells */
body.flip.is-day .m-phone__status{ color: #9A958B; }
body.flip.is-day .m-phone__app-name{ color: #F4F1EA; }
body.flip.is-day .m-phone__badge{ color: #000; background: #FFD600; }
body.flip.is-day .m-phone__metric-label{ color: #9A958B; }
body.flip.is-day .m-phone__metric-value{ color: #FFD600; }
body.flip.is-day .m-phone__metric-value small{ color: #9A958B; }
body.flip.is-day .m-phone__metric-status{ color: #FFD600; }
body.flip.is-day .m-phone__metric{ background: rgba(255,214,0,.04); }
body.flip.is-day .m-phone__row{ background: rgba(255,255,255,.03); }
body.flip.is-day .m-phone__row span:first-child{ color: #9A958B; }
body.flip.is-day .m-phone__row span:last-child{ color: #F4F1EA; }
body.flip.is-day .m-phone__chart polyline[stroke]{ stroke: #FFD600; }

/* Footer bleibt SCHWARZ — Schriftfarben hell */
body.flip.is-day .f-footer{
  background: #000;
  border-top-color: rgba(255,255,255,.08);
  color: #FFFFFF;
}
body.flip.is-day .f-footer__row{ color: rgba(255,255,255,.72); }
body.flip.is-day .f-footer__row--small{
  color: rgba(255,255,255,.5);
  border-top-color: rgba(255,255,255,.08);
}
body.flip.is-day .f-footer__row--small a{ color: rgba(255,255,255,.72); }
body.flip.is-day .f-footer__row--small a:hover{ color: #FFD600; }
body.flip.is-day .f-footer em{ color: #FFD600; }

/* Contact-Button im Day-mode: schwarzer Pill, gelbe Schrift (konsistent mit primary CTA) */
body.flip.is-day .f-contact__mail{
  background: #0A0A0A;
  color: #FFD600;
  border-color: #0A0A0A;
}
body.flip.is-day .f-contact__mail:hover{
  background: transparent;
  color: #0A0A0A;
  border-color: #0A0A0A;
}

/* Overlay Nav bleibt dunkel — Akzent gelb. WICHTIG: Nur wenn .is-open einen Hintergrund,
   sonst deckt das fixed-Container die ganze Seite ab (Curtains übernehmen das Malen). */
body.flip.is-day .f-nav{ color: #FFFFFF; }
body.flip.is-day .f-nav.is-open{ background: transparent; }
body.flip.is-day .f-nav__list a{ color: #FFFFFF; border-bottom-color: rgba(255,255,255,.12); }
body.flip.is-day .f-nav__list a:hover{ color: #FFD600; }
body.flip.is-day .f-nav__list a span:first-child{ color: #FFD600; }
body.flip.is-day .f-nav__close:hover{ color: #FFD600; }

html.theme-transition,
html.theme-transition body,
html.theme-transition *{
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease) !important;
}

/* ============ THEME TOGGLE BUTTON ============ */
.topbar__theme{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border:1px solid var(--line-str);
  border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--fg);
  transition: border-color .2s, color .2s, background-color .2s;
}
.topbar__theme:hover{
  border-color: var(--yellow);
  color: var(--yellow);
}
.topbar__theme-icon{
  position:relative; width:14px; height:14px;
  display:inline-block;
}
.topbar__theme-icon svg{
  position:absolute; inset:0;
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.topbar__theme-moon{ opacity:1; transform: rotate(0); }
.topbar__theme-sun{ opacity:0; transform: rotate(-90deg) scale(.4); }
body.flip.is-day .topbar__theme-moon{ opacity:0; transform: rotate(90deg) scale(.4); }
body.flip.is-day .topbar__theme-sun{ opacity:1; transform: rotate(0) scale(1); }
.topbar__theme-label::after{
  content: "";
}

*{ box-sizing:border-box; margin:0; padding:0; }
html, body{
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.flip{ cursor:none; }
@media (hover: none){ body.flip{ cursor:auto; } }

a{ color:inherit; text-decoration:none; }
button{ background:none; border:0; color:inherit; font:inherit; cursor:pointer; }
ul, ol{ list-style:none; }
em, i{ font-family: var(--serif); font-style: italic; font-weight:400; letter-spacing:-.01em; }
::selection{ background: var(--yellow); color:#000; }

/* ============ grain ============ */
.grain{
  position:fixed; inset:0; z-index:300; pointer-events:none;
  opacity:.08; mix-blend-mode: overlay;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.6) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 80% 70%, rgba(0,0,0,.6) 0 1px, transparent 1px 3px);
}

/* ============ mouse glow ============ */
.mouse-glow{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(
    circle 360px at var(--mx, 50%) var(--my, 50%),
    rgba(255, 214, 0, 0.08),
    transparent 70%
  );
  transition: background .25s linear;
}
@media (hover: none){ .mouse-glow{ display:none; } }

/* ============ cursor ============ */
.cursor-f{
  position:fixed; top:0; left:0; z-index:400;
  pointer-events:none;
}
.cursor-f__dot{
  position:fixed; top:0; left:0;
  width:6px; height:6px; border-radius:50%;
  background: var(--yellow);
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: transform .2s ease, opacity .2s;
}
.cursor-f__ring{
  position:fixed; top:0; left:0;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--yellow);
  transform: translate(-50%, -50%);
  transition: width .25s var(--ease), height .25s var(--ease), border-color .25s;
  mix-blend-mode: difference;
}
.cursor-f__label{
  position:fixed; top:0; left:0;
  padding: 6px 10px; border-radius: 12px;
  background: var(--yellow); color:#000;
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  transform: translate(20px, 20px) scale(0);
  transform-origin: top left;
  transition: transform .25s var(--ease);
  white-space: nowrap;
}
.cursor-f.is-hover .cursor-f__ring{ width:70px; height:70px; }
.cursor-f.is-mag .cursor-f__label{ transform: translate(22px, 22px) scale(1); }
@media (hover: none){ .cursor-f{ display:none; } }

/* ============ TOPBAR ============ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  gap: 32px;
  padding: 18px var(--frame);
  background: linear-gradient(180deg, rgba(10,10,10,.85), rgba(10,10,10,.0));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.topbar__logo{
  display:inline-flex; align-items:center; gap:10px;
  color: var(--fg); font-weight:600;
}
/* NOMDAD Icon — Day/Night Swap */
.topbar__mark{ width:22px; height:22px; display:block; border-radius:50%; }
.topbar__mark--day{ display:none; }
body.flip.is-day .topbar__mark--night{ display:none; }
body.flip.is-day .topbar__mark--day{ display:block; }
.topbar__version{ color: var(--fg-dim); margin-left:4px; font-weight:400; }

.topbar__ticker{
  flex:1; max-width: 560px;
  overflow: hidden;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 4px 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.ticker-track{
  display:flex; gap: 40px;
  white-space: nowrap;
  animation: tickerSlide 38s linear infinite;
  color: var(--fg-dim);
}
.ticker-track span{ font-size: 10px; letter-spacing:.14em; }
@keyframes tickerSlide{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.topbar__right{ display:flex; align-items:center; gap:18px; }
.topbar__switch{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 14px;
  border: 1px solid var(--line-str);
  border-radius: 99px;
  transition: color .25s, border-color .25s, background .25s;
}
.topbar__switch:hover{ background: var(--yellow); color:#000; border-color: var(--yellow); }
.topbar__menu{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width: 38px; height: 38px;
  border: 1px solid var(--line-str);
  border-radius: 99px;
  padding: 0 10px;
}
.topbar__menu{
  position: relative;
  cursor: pointer;
  transition: border-color .3s, background .3s;
}
.topbar__menu span{
  display:block; height:1.5px; background: var(--fg);
  transition: transform .4s var(--ease), width .4s var(--ease), background .3s;
  transform-origin: center;
}
.topbar__menu span:first-child{ width:16px; }
.topbar__menu span:last-child{ width:10px; margin-left:auto; }
.topbar__menu:hover span{ background: var(--yellow); }
.topbar__menu:hover{ border-color: var(--yellow); }
.topbar__menu.is-open span{
  width: 18px;
  background: var(--yellow);
}
.topbar__menu.is-open span:first-child{
  transform: translateY(3.5px) rotate(45deg);
  margin-left: 0;
}
.topbar__menu.is-open span:last-child{
  transform: translateY(-3.5px) rotate(-45deg);
  margin-left: 0;
}

@media (max-width: 900px){
  .topbar__version{ display:none; }
  .topbar__ticker{ display:none; }
  .topbar__switch span{ display:none; }
  .topbar__switch{ padding:8px; }
}

/* ============ HERO ============ */
.f-hero{
  position:relative;
  min-height: 100svh;
  padding: 140px var(--frame) 80px;
  display:flex; align-items:stretch;
  overflow:hidden;
}
.f-hero__bg{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  pointer-events:none;
}
.f-hero__bg-word{
  font-family: var(--display);
  font-size: clamp(200px, 36vw, 620px);
  line-height:1;
  letter-spacing:-.04em;
  color: #131313;
  white-space: nowrap;
  user-select: none;
  transform: translateY(4%);
  will-change: transform;
}

.f-hero__inner{
  position:relative; z-index:2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 40px;
  width:100%;
  max-width: var(--max);
  margin: 0 auto;
}

.f-hero__kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--fg-dim);
}
.f-hero__kicker-dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--yellow);
  box-shadow: 0 0 12px var(--yellow);
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot{
  50%{ transform: scale(1.4); opacity:.6; }
}

.f-hero__headline{
  font-family: var(--display);
  font-size: clamp(64px, 11vw, 180px);
  line-height: .92;
  letter-spacing: -.04em;
  font-weight: 900;
  margin: 0;
}
.f-hero__line{ display:block; overflow:hidden; padding-bottom: .04em; }
.f-hero__line--serif{ font-family: var(--display); }
.f-hero__line em{ font-size: 1em; color: var(--yellow); }
.f-hero__real{
  display:inline-block;
  color: var(--yellow);
  transform: translateY(2px);
  position: relative;
}
.f-hero__real::after{
  content:""; position:absolute; left:0; right:0; bottom:-10px; height:4px;
  background: var(--yellow);
  transform-origin: left; transform: scaleX(0);
  animation: realUnderline 1.2s var(--ease-out) .8s forwards;
}
@keyframes realUnderline{ to{ transform: scaleX(1); } }

.f-hero__sub{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--fg-dim);
  max-width: 560px;
}

.f-hero__cta-row{
  display:flex; flex-wrap:wrap; gap: 18px;
  align-self: flex-start;
}

.f-hero__meta{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.f-meta__label{ display:block; color: var(--fg-mute); margin-bottom: 6px; font-size: 9px; }
.f-meta__value{ display:block; color: var(--fg); font-weight:600; }
.dot-pulse{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background: var(--yellow); margin-right: 6px;
  box-shadow: 0 0 6px var(--yellow);
  animation: pulseDot 2s ease-in-out infinite;
}

.f-hero__scroll{
  position:absolute; bottom: 30px; right: var(--frame);
  display:flex; flex-direction:column; align-items:center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--fg-dim);
}
.f-hero__scroll svg{ color: var(--fg-dim); animation: scrollHint 2s ease-in-out infinite; }
@keyframes scrollHint{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(6px); }
}

@media (max-width: 900px){
  .f-hero__meta{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .f-hero{ padding-top: 110px; }
  .f-hero__headline{ font-size: clamp(52px, 18vw, 120px); }
  .f-hero__scroll{ display:none; }
}

/* ============ BUTTONS ============ */
.f-btn{
  position:relative;
  display:inline-flex; align-items:center; gap: 12px;
  padding: 18px 28px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--fg);
  border-radius: 99px;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s;
  will-change: transform;
}
.f-btn__arrow{
  display:inline-block;
  transition: transform .35s var(--ease);
}
.f-btn--primary{ background: var(--yellow); color:#000; border-color: var(--yellow); }
.f-btn--primary:hover{ background: transparent; color: var(--yellow); }
.f-btn--primary:hover .f-btn__arrow{ transform: translateX(4px); }
.f-btn--ghost:hover{ background: var(--fg); color: #000; }
.f-btn--ghost:hover .f-btn__arrow{ transform: translateX(4px); }

/* ============ STATEMENT ============ */
.f-stmt{
  min-height: 140vh;
  padding: 80px var(--frame);
  position:relative;
}
.f-stmt__inner{
  position:sticky; top: 18vh;
  max-width: var(--max); margin: 0 auto;
}
.f-stmt__kicker{
  display:flex; align-items:center; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--fg-dim);
  margin-bottom: 48px;
}
.f-stmt__rule{ flex: 0 0 60px; height:1px; background: var(--fg-mute); }
.f-stmt__text{
  font-family: var(--display);
  font-size: clamp(44px, 7vw, 120px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 900;
  max-width: 14ch;
}
.f-stmt__text [data-word]{
  display:inline-block;
  color: var(--fg);
  opacity: .12;
  margin-right: .18em;
  will-change: opacity, filter, transform;
}

/* Animierter Strikethrough — Linie wächst live beim Scrollen */
.f-stmt__muted{
  position: relative;
  text-decoration: none !important;
}
.f-stmt__muted::after{
  content: "";
  position: absolute;
  left: 0; top: 52%;
  width: 0%; height: 5px;
  background: var(--fg);
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.f-stmt__muted.is-struck::after{ width: 105%; }

/* Accent-Wort — Glow-Pulse wenn eingerastet */
.f-stmt__accent{
  color: var(--yellow) !important;
  transition: text-shadow .5s, transform .5s, letter-spacing .5s;
}
.f-stmt__accent.is-landed{
  text-shadow:
    0 0 30px rgba(255,214,0,.5),
    0 0 60px rgba(255,214,0,.2);
  letter-spacing: .02em;
}

/* Mobile: reduzierter Glow für Performance */
@media (max-width: 700px){
  .f-stmt__accent.is-landed{
    text-shadow:
      0 0 16px rgba(255,214,0,.4),
      0 0 32px rgba(255,214,0,.15);
  }
}

/* Day-Mode-Anpassung: Strikethrough-Linie schwarz */
body.flip.is-day .f-stmt__muted::after{ background: #0A0A0A; }
body.flip.is-day .f-stmt__text [data-word]{ opacity: .18; }

/* ============ MARQUEE ============ */
.f-marquee{
  overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding: 24px 0;
  background: var(--bg-soft);
}
.f-marquee__track{
  display:flex; gap: 40px;
  white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: -.02em;
  color: var(--fg);
  will-change: transform;
}
.f-marquee__track .sep{ color: var(--yellow); font-family: var(--font); font-size: .5em; transform: translateY(-.25em); }

/* ============ PRINCIPLES ============ */
.f-princ{
  padding: 140px var(--frame);
  max-width: var(--max); margin: 0 auto;
}
.f-princ__kicker{
  display:flex; align-items:center; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--fg-dim);
  margin-bottom: 60px;
}
.f-princ__list{ border-top: 1px solid var(--line); }
.f-princ__row{
  display:grid;
  grid-template-columns: 80px 1fr auto;
  align-items:center;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.f-princ__row::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,214,0,0), rgba(255,214,0,.06), rgba(255,214,0,0));
  transform: translateX(-100%);
  transition: transform .8s var(--ease-out);
}
.f-princ__row:hover::before{ transform: translateX(100%); }
.f-princ__num{
  font-family: var(--mono); font-size: 13px; color: var(--yellow); font-weight: 600;
}
.f-princ__text{
  font-family: var(--display);
  font-size: clamp(28px, 4.5vw, 72px);
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 900;
}
.f-princ__tag{
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em;
  color: var(--fg-dim);
}
@media (max-width: 700px){
  .f-princ__row{ grid-template-columns: 50px 1fr; }
  .f-princ__tag{ display:none; }
}

/* ============ ABOUT ============ */
.f-about{
  padding: 140px var(--frame);
  max-width: var(--max); margin: 0 auto;
  border-top: 1px solid var(--line);
}
.f-about__kicker{
  display:flex; align-items:center; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--fg-dim); margin-bottom: 40px;
}
.f-about__headline{
  font-family: var(--display);
  font-size: clamp(48px, 8vw, 140px);
  line-height: .95;
  letter-spacing: -.04em;
  font-weight: 900;
  margin-bottom: 80px;
}
.f-about__headline em{ color: var(--yellow); }
.f-about__grid{
  display:grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 80px;
}
.f-about__aside{ position:sticky; top: 120px; align-self: start; }
.f-about__lead{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 2vw, 30px);
  color: var(--fg);
  margin-bottom: 30px;
  line-height: 1.3;
}
.f-about__tags{
  display:flex; flex-wrap:wrap; gap: 8px;
  margin-bottom: 30px;
}
.f-about__tags li{
  font-family: var(--mono); font-size: 10px; letter-spacing:.12em; text-transform:uppercase;
  padding: 6px 12px;
  border: 1px solid var(--line-str);
  border-radius: 99px;
  color: var(--fg);
}
.f-about__signature{
  display:flex; align-items:center; gap: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing:.14em; color: var(--fg-mute);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.f-about__signature-line{ width: 30px; height:1px; background: var(--fg-mute); }

.f-about__body p{
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg);
  margin-bottom: 26px;
  max-width: 58ch;
}
.f-about__accent{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.25;
  color: var(--yellow) !important;
}
@media (max-width: 900px){
  .f-about__grid{ grid-template-columns: 1fr; gap: 48px; }
  .f-about__aside{ position: static; }
}

/* ============ HORIZONTAL DISCIPLINES ============ */
.f-disc{
  height: 100svh;
  overflow: hidden;
  position: relative;
}
.f-disc__intro{
  position: absolute; top: 80px; left: var(--frame); right: var(--frame); z-index: 2;
  max-width: 500px;
  pointer-events:none;
}
.f-disc__kicker{
  display:flex; align-items:center; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--fg-dim);
  margin-bottom: 16px;
}
.f-disc__title{
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 96px);
  line-height: .95;
  letter-spacing: -.04em;
  font-weight: 900;
}
.f-disc__title em{ color: var(--yellow); }
.f-disc__note{
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em;
  color: var(--fg-dim); margin-top: 20px; text-transform: uppercase;
}
.f-disc__track{
  display:flex; gap: 28px;
  height: 100%;
  padding: 0 var(--frame);
  align-items: flex-end;
  padding-bottom: 48px;
  will-change: transform;
}
.f-disc__card{
  flex: 0 0 min(460px, 78vw);
  height: 64vh;
  max-height: 620px;
  padding: 48px 40px;
  border: 1px solid var(--line-str);
  border-radius: 6px;
  background: var(--bg-card);
  display: flex; flex-direction: column;
  gap: 24px;
  transition: transform .4s var(--ease), border-color .4s;
  position: relative;
  overflow: hidden;
}
.f-disc__card::before{
  content: "0" counter(discIndex);
  position:absolute;
  top: 0; right: 0;
  font-family: var(--display);
  font-size: 18vw; font-weight: 900;
  color: rgba(255,255,255,.02);
  line-height:.8;
  pointer-events:none;
}

/* Card Tint Varianten — gleicher Stil, subtil unterschiedliche Tönung */
.f-disc__card:nth-of-type(1){
  background: linear-gradient(155deg, #151515 0%, #0E0E0E 100%);
}
.f-disc__card:nth-of-type(2){
  background: linear-gradient(155deg, #18140C 0%, #0F0D08 100%);
}
.f-disc__card:nth-of-type(3){
  background: linear-gradient(155deg, #0F1416 0%, #0B0F11 100%);
}
.f-disc__card:nth-of-type(4){
  background: linear-gradient(155deg, #161014 0%, #0E0A0D 100%);
}
.f-disc__card:nth-of-type(5){
  background: linear-gradient(155deg, #0E1512 0%, #0A0F0D 100%);
}
.f-disc__card:nth-of-type(6){
  background: linear-gradient(155deg, #16130F 0%, #0E0C09 100%);
}

/* Day-Mode: helle Varianten mit derselben Logik */
body.flip.is-day .f-disc__card:nth-of-type(1){
  background: linear-gradient(155deg, #FFFFFF 0%, #F7F4EC 100%);
}
body.flip.is-day .f-disc__card:nth-of-type(2){
  background: linear-gradient(155deg, #FFFBF0 0%, #F6F0DE 100%);
}
body.flip.is-day .f-disc__card:nth-of-type(3){
  background: linear-gradient(155deg, #F4F7F8 0%, #E9EEF0 100%);
}
body.flip.is-day .f-disc__card:nth-of-type(4){
  background: linear-gradient(155deg, #FBF3F5 0%, #F0E4E8 100%);
}
body.flip.is-day .f-disc__card:nth-of-type(5){
  background: linear-gradient(155deg, #F2F8F4 0%, #E5EDE8 100%);
}
body.flip.is-day .f-disc__card:nth-of-type(6){
  background: linear-gradient(155deg, #FCF7EA 0%, #F4ECD4 100%);
}

.f-disc__card:hover{ border-color: var(--yellow); transform: translateY(-6px); }
.f-disc__num{
  font-family: var(--mono); font-size: 13px; color: var(--yellow); letter-spacing:.1em;
}
.f-disc__card h3{
  font-family: var(--display);
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 900;
}
.f-disc__card p{
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg-dim);
  max-width: 40ch;
  margin-top: auto;
}
.f-disc__card ul{
  display:flex; flex-direction:column; gap: 8px;
  font-family: var(--mono); font-size: 11px; color: var(--fg); letter-spacing:.08em;
  padding-top: 20px; border-top: 1px solid var(--line);
}
.f-disc__card ul li::before{
  content: "→ ";
  color: var(--yellow); margin-right: 6px;
}

/* horizontal scrolling disabled on mobile */
@media (max-width: 900px){
  .f-disc{ height:auto; padding: 140px var(--frame) 80px; }
  .f-disc__intro{ position: static; max-width: none; pointer-events:auto; margin-bottom: 60px; }
  .f-disc__track{
    flex-direction: column; align-items: stretch; padding: 0;
    gap: 20px;
    transform: none !important;
  }
  .f-disc__card{ flex: 0 0 auto; height: auto; }
}

/* ============ APPROACH ============ */
.f-appr{
  padding: 140px var(--frame);
  max-width: var(--max); margin: 0 auto;
  border-top: 1px solid var(--line);
}
.f-appr__kicker{
  display:flex; align-items:center; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--fg-dim); margin-bottom: 40px;
}
.f-appr__title{
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 120px);
  line-height: .95;
  letter-spacing: -.04em;
  font-weight: 900;
  margin-bottom: 80px;
}
.f-appr__title em{ color: var(--yellow); }

.f-appr__stage{ position: relative; display:grid; grid-template-columns: 100px 1fr; gap: 40px; }
.f-appr__path{
  position:absolute;
  top:0; left: 40px; width: 20px; height: 100%;
  color: var(--yellow);
}
.f-appr__path path{
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}
.f-appr__steps{ grid-column: 2 / 3; display:flex; flex-direction: column; gap: 80px; }
.f-appr__step{
  display:grid; grid-template-columns: 70px 1fr; gap: 40px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.f-appr__step:last-child{ border-bottom:1px solid var(--line); }
.f-appr__n{
  font-family: var(--mono); font-size: 14px; color: var(--yellow); font-weight:600; padding-top:8px;
}
.f-appr__step h3{
  font-family: var(--display); font-size: clamp(32px, 4vw, 56px);
  line-height: 1; letter-spacing:-.03em; font-weight: 900; margin-bottom: 14px;
}
.f-appr__step p{ font-size: 17px; line-height:1.55; color: var(--fg-dim); max-width: 52ch; }
@media (max-width: 700px){
  .f-appr__stage{ grid-template-columns: 1fr; }
  .f-appr__path{ display:none; }
  .f-appr__step{ grid-template-columns: 1fr; gap: 12px; }
}

/* ============ AI BREAK ============ */
.f-aibreak{
  position:relative;
  background: #000;
  color: var(--fg);
  padding: 180px var(--frame);
  overflow:hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.f-aibreak__bg{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,214,0,.12), transparent 70%);
}
.f-aibreak__lines{
  position:absolute; inset:0;
  display:flex; flex-direction: column; justify-content:space-between;
}
.f-aibreak__lines span{
  display:block; height:1px;
  background: linear-gradient(90deg, transparent, var(--yellow), transparent);
  opacity: .1;
  transform: translateX(var(--shift, 0));
  animation: lineShift 14s linear infinite;
}
.f-aibreak__lines span:nth-child(odd){ animation-direction: reverse; }
@keyframes lineShift{
  from{ transform: translateX(-100%); }
  to{ transform: translateX(100%); }
}
.f-aibreak__inner{ max-width: var(--max); margin: 0 auto; position: relative; z-index: 1; }
.f-aibreak__kicker{
  display:flex; align-items:center; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--yellow); margin-bottom: 40px;
}
.f-aibreak__headline{
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 120px);
  line-height: .95; letter-spacing:-.04em; font-weight:900;
  margin-bottom: 30px;
}
.f-aibreak__headline em{ color: var(--yellow); }
.f-aibreak__sub{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--fg-dim);
  max-width: 620px;
  margin-bottom: 80px;
}
.f-aibreak__stats{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  padding-top: 40px; border-top: 1px solid var(--line);
}
.f-aibreak__stats strong{
  display:block;
  font-family: var(--display); font-size: clamp(56px, 7vw, 120px);
  line-height:1; font-weight:900; letter-spacing:-.03em;
  color: var(--yellow);
  margin-bottom: 10px;
}
.f-aibreak__stats span{
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em; color: var(--fg-dim); text-transform:uppercase;
}
@media (max-width: 700px){
  .f-aibreak__stats{ grid-template-columns: 1fr; gap: 32px; }
}

/* ============ §06b MOBILE ============ */
.f-mobile{
  position:relative;
  padding: 160px var(--frame) 140px;
  overflow:hidden;
  border-bottom: 1px solid var(--line);
}
.f-mobile__bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 40% 50% at 30% 50%, rgba(255,214,0,.06), transparent 60%),
    radial-gradient(ellipse 40% 50% at 70% 50%, rgba(255,214,0,.06), transparent 60%);
}
.f-mobile__grid-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.04;
  background-image:
    linear-gradient(var(--fg) 1px, transparent 1px),
    linear-gradient(90deg, var(--fg) 1px, transparent 1px);
  background-size: 80px 80px;
}
.f-mobile__inner{
  max-width: var(--max); margin:0 auto; position:relative; z-index:1;
}
.f-mobile__kicker{
  display:flex; align-items:center; gap:16px;
  font-family: var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--fg-dim); margin-bottom:48px;
}
.f-mobile__kicker .f-mobile__rule{
  flex:1; height:1px; background: var(--line); max-width:80px;
}
.f-mobile__headline{
  font-family: var(--display); font-size: clamp(48px, 7vw, 110px);
  line-height:.92; letter-spacing:-.04em; font-weight:900; margin-bottom:24px;
}
.f-mobile__headline em{ color: var(--yellow); }
.f-mobile__sub{
  font-family: var(--serif); font-style:italic;
  font-size: clamp(18px, 1.6vw, 24px); color: var(--fg-dim);
  max-width:560px; margin-bottom:80px; line-height:1.4;
}

/* Phone Pair */
.f-mobile__stage{
  display:flex; justify-content:center; align-items:center;
  gap: clamp(30px, 5vw, 80px); margin-bottom:100px; perspective:1200px;
}
.f-mobile__device{
  position:relative; animation: deviceFloat 6s ease-in-out infinite;
}
.f-mobile__device--ios  { animation-delay: 0s; }
.f-mobile__device--android { animation-delay: -3s; }
@keyframes deviceFloat{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-12px); }
}

/* Phone shell — m-phone (mobile section variant) */
.m-phone{
  width:280px; height:570px; background:#000;
  border:1px solid rgba(255,255,255,.14); border-radius:44px; padding:8px;
  box-shadow: 0 50px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(255,214,0,.05);
  overflow:hidden; position:relative;
}
.m-phone__notch{
  width:120px; height:28px; background:#000;
  border-radius: 0 0 18px 18px; margin:0 auto; position:relative; z-index:2;
}
.f-mobile__device--ios .m-phone__notch{
  width:100px; height:30px; border-radius:20px; margin-top:8px;
}
.m-phone__screen{
  background:#0A0A0A; border-radius:36px; height:calc(100% - 2px);
  padding:14px 16px 20px; display:flex; flex-direction:column; gap:12px; overflow:hidden;
}
.m-phone__status{
  display:flex; justify-content:space-between; align-items:center; padding:0 6px;
  font-family: var(--mono); font-size:9px; letter-spacing:.08em; color: var(--fg-dim); min-height:16px;
}
.m-phone__header{
  display:flex; align-items:center; justify-content:space-between; padding:8px 4px;
}
.m-phone__app-name{
  font-family: var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color: var(--fg);
}
.m-phone__badge{
  font-family: var(--mono); font-size:8px; letter-spacing:.15em;
  color:#000; background: var(--yellow); padding:3px 8px; border-radius:3px;
}
.m-phone__metric{
  text-align:center; padding:20px 0 16px; background:rgba(255,214,0,.04); border-radius:16px;
}
.m-phone__metric-label{
  display:block; font-family: var(--mono); font-size:9px; letter-spacing:.2em; color: var(--fg-dim); margin-bottom:8px;
}
.m-phone__metric-value{
  display:block; font-family: var(--display); font-size:56px; line-height:1;
  font-weight:900; color: var(--yellow); letter-spacing:-.03em;
}
.m-phone__metric-value small{ font-size:18px; color: var(--fg-dim); letter-spacing:.04em; }
.m-phone__metric-status{
  display:block; font-family: var(--mono); font-size:9px; letter-spacing:.2em; color: var(--yellow); margin-top:8px;
}
.m-phone__data{ display:flex; flex-direction:column; gap:6px; }
.m-phone__row{
  display:flex; justify-content:space-between; font-family: var(--mono); font-size:10px;
  padding:8px 12px; background:rgba(255,255,255,.03); border-radius:8px;
}
.m-phone__row span:first-child{ color: var(--fg-dim); }
.m-phone__row span:last-child { color: var(--fg); }
.m-phone__chart{ margin-top:auto; height:50px; padding:0 4px; }
.m-phone__chart svg{ width:100%; height:100%; }

/* OS Label */
.f-mobile__os{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:20px;
  font-family: var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color: var(--fg-mute);
}
.f-mobile__os-dot{
  width:6px; height:6px; border-radius:50%; background: var(--yellow);
  box-shadow: 0 0 8px rgba(255,214,0,.5);
}

/* Capability Strip */
.f-mobile__caps{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1px;
  background: var(--line); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; margin-bottom:60px;
}
.f-mobile__cap{
  background: var(--bg); padding:36px 28px; text-align:center;
  transition: background .3s var(--ease);
}
.f-mobile__cap:hover{ background: var(--bg-soft); }
.f-mobile__cap-num{
  display:block; font-family: var(--display); font-size: clamp(36px, 4vw, 56px);
  line-height:1; font-weight:900; color: var(--yellow); letter-spacing:-.03em; margin-bottom:8px;
}
.f-mobile__cap-label{
  display:block; font-family: var(--mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color: var(--fg-dim);
}

/* Tech Whisper Row */
.f-mobile__tech{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 24px;
  font-family: var(--mono); font-size:10px; letter-spacing:.1em; color: var(--fg-mute); text-transform:uppercase;
}
.f-mobile__tech span{ transition: color .2s; }
.f-mobile__tech span:hover{ color: var(--fg-dim); }
.f-mobile__tech .sep{ color: rgba(255,214,0,.25); }

/* §06b Responsive */
@media (max-width: 768px){
  .f-mobile__stage{ flex-direction:column; gap:40px; }
  .m-phone{ width:240px; height:490px; }
  .m-phone__metric-value{ font-size:44px; }
  .f-mobile__caps{ grid-template-columns:1fr; }
  .f-mobile__headline{ font-size: clamp(36px, 10vw, 64px); }
}
@media (max-width: 480px){
  .f-mobile{ padding: 100px var(--frame) 80px; }
  .m-phone{ width:220px; height:450px; }
  .m-phone__notch{ width:80px; height:24px; }
  .f-mobile__device--ios .m-phone__notch{ width:80px; height:24px; }
  .m-phone__metric-value{ font-size:36px; }
  .m-phone__metric-value small{ font-size:14px; }
}

/* ============ PRODUCT ============ */
.f-product{
  padding: 140px var(--frame);
  max-width: var(--max); margin: 0 auto;
}
.f-product__kicker{
  display:flex; align-items:center; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--fg-dim); margin-bottom: 60px;
}
.f-product__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items:center; }
.f-product__title{
  font-family: var(--display); font-size: clamp(48px, 7vw, 120px);
  line-height: .95; letter-spacing:-.04em; font-weight:900; margin-bottom: 24px;
}
.f-product__title em{ color: var(--yellow); }
.f-product__text p{ font-size: 18px; color: var(--fg-dim); margin-bottom: 32px; max-width: 48ch; line-height:1.55; }

/* Coming-Soon Kicker über der Headline */
.f-product__soon{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--yellow);
  padding: 8px 14px;
  border: 1px solid rgba(255,214,0,.35);
  border-radius: 999px;
  background: rgba(255,214,0,.06);
  margin-bottom: 24px;
  animation: f-pulse-soon 2.4s ease-in-out infinite;
}
@keyframes f-pulse-soon{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(255,214,0,.25); }
  50%    { box-shadow: 0 0 0 8px rgba(255,214,0,0); }
}

/* Phone-Stage: dunkles Panel hinter dem Device — funktioniert in beiden Modi */
.f-product__phone{
  display:flex; justify-content:center; align-items:center;
  perspective: 1000px; will-change: transform;
  position: relative;
  padding: 40px;
  border-radius: 56px;
  isolation: isolate;
}
.f-product__phone::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,214,0,.08), transparent 60%),
    linear-gradient(180deg, #141414 0%, #050505 100%);
  box-shadow:
    0 40px 80px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 0 1px rgba(255,214,0,.06);
  z-index: -1;
}

/* Floating-Tag: PREVIEW · v0.3 · UNRELEASED */
.f-product__tag{
  position: absolute; top: 16px; right: 20px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
  color: var(--yellow);
  padding: 6px 10px;
  border: 1px solid rgba(255,214,0,.35);
  border-radius: 4px;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  z-index: 2;
}

.f-phone{
  /* Scoped variables — Phone-Screen rendert IMMER im Dark-App-UI,
     unabhängig vom Page-Theme (Day/Night). */
  --fg:        #F4F1EA;
  --fg-dim:    #9A958B;
  --yellow:    #FFD600;
  --line:      rgba(255,255,255,.08);
  --line-str:  rgba(255,255,255,.14);

  width: 340px; height: 680px;
  background: #000;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 48px;
  padding: 10px;
  box-shadow: 0 50px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(255,214,0,.05);
  position: relative;
  transform-style: preserve-3d;
  color: #F4F1EA;
}

/* IN BUILD Pill im Phone-Top */
.f-phone__pill{
  display: inline-block;
  font-family: var(--mono); font-size: 8px; letter-spacing: .2em;
  color: #0a0a0a;
  background: var(--yellow);
  padding: 3px 7px;
  border-radius: 3px;
  font-weight: 700;
  animation: f-blink-pill 1.8s ease-in-out infinite;
}
@keyframes f-blink-pill{
  0%, 60%, 100%{ opacity: 1; }
  70%, 85%{ opacity: .35; }
}
.f-phone__notch{
  position:absolute; top:18px; left:50%; transform: translateX(-50%);
  width:100px; height:22px; background:#000; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
}
.f-phone__screen{
  width:100%; height:100%;
  background: linear-gradient(160deg, #0f0f0f, #000);
  border-radius: 38px;
  padding: 60px 24px 24px;
  display:flex; flex-direction:column; gap: 20px;
  color: var(--fg);
}
.f-phone__top{
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--mono); font-size: 10px; letter-spacing:.2em; color: var(--fg-dim);
}
.f-phone__dot{ width:8px; height:8px; background: var(--yellow); border-radius:50%; box-shadow: 0 0 10px var(--yellow); }
.f-phone__hero{ text-align:center; padding: 24px 0; border-radius: 16px; background: rgba(255,214,0,.05); }
.f-phone__label{ display:block; font-family: var(--mono); font-size: 10px; letter-spacing:.18em; color: var(--fg-dim); margin-bottom: 10px; }
.f-phone__value{ display:block; font-family: var(--display); font-size: 70px; line-height:1; font-weight:900; color: var(--yellow); letter-spacing:-.03em; }
.f-phone__value small{ font-size: 20px; color: var(--fg-dim); letter-spacing:.04em; }
.f-phone__status{ display:block; font-family: var(--mono); font-size: 10px; letter-spacing:.2em; color: var(--yellow); margin-top: 10px; }
.f-phone__rows{ display:flex; flex-direction:column; gap: 10px; }
.f-phone__rows > div{ display:flex; justify-content:space-between; font-family: var(--mono); font-size: 11px; padding: 10px 14px; background: rgba(255,255,255,.03); border-radius: 8px; }
.f-phone__rows > div span:first-child{ color: var(--fg-dim); }
.f-phone__chart{ margin-top: auto; height: 70px; }
.f-phone__chart svg{ width:100%; height:100%; }

@media (max-width: 900px){
  .f-product__grid{ grid-template-columns: 1fr; gap: 60px; }
  .f-phone{ width: 280px; height: 560px; }
  .f-phone__value{ font-size: 56px; }
  .f-product__phone{ padding: 28px; }
}

/* Day-Mode — Strikeahead Section */
body.flip.is-day .f-product__soon{
  color: #0A0A0A;
  border-color: rgba(10,10,10,.45);
  background: rgba(10,10,10,.08);
}
body.flip.is-day .f-product__soon::before{ background: #0A0A0A; }
body.flip.is-day .f-product__phone::before{
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,214,0,.12), transparent 60%),
    linear-gradient(180deg, #0F0F0F 0%, #000 100%);
  box-shadow:
    0 40px 100px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,214,0,.15),
    0 0 0 1px rgba(0,0,0,.3);
}
body.flip.is-day .f-product__tag{
  color: #FFD600;
  border-color: rgba(255,214,0,.55);
  background: rgba(0,0,0,.85);
}
body.flip.is-day .f-phone{
  box-shadow:
    0 60px 120px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.04);
}
/* Belt-and-Suspenders: erzwinge Dark-App-UI im Phone-Screen auch im Day-Mode */
body.flip.is-day .f-phone,
body.flip.is-day .f-phone .f-phone__screen{ color: #F4F1EA; }
body.flip.is-day .f-phone__top,
body.flip.is-day .f-phone__label,
body.flip.is-day .f-phone__rows > div span:first-child{ color: #9A958B; }
body.flip.is-day .f-phone__value,
body.flip.is-day .f-phone__status{ color: #FFD600; }
body.flip.is-day .f-phone__value small{ color: #9A958B; }
body.flip.is-day .f-phone__rows > div span:last-child{ color: #F4F1EA; }
body.flip.is-day .f-phone__rows > div{ background: rgba(255,255,255,.04); }
body.flip.is-day .f-phone__hero{ background: rgba(255,214,0,.06); }
body.flip.is-day .f-phone__dot{ background: #FFD600; box-shadow: 0 0 10px #FFD600; }
body.flip.is-day .f-phone__chart svg polyline{ stroke: #FFD600 !important; }

/* ============ CREATOR ============ */
.f-creator{
  padding: 140px var(--frame);
  max-width: var(--max); margin: 0 auto;
  border-top: 1px solid var(--line);
}
.f-creator__kicker{
  display:flex; align-items:center; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--fg-dim); margin-bottom: 40px;
}
.f-creator__headline{
  font-family: var(--display); font-size: clamp(48px, 7vw, 120px);
  line-height: .95; letter-spacing:-.04em; font-weight:900; margin-bottom: 60px;
}
.f-creator__headline em{ color: var(--yellow); }

.f-creator__grid{ display:grid; grid-template-columns: 1.6fr 1fr; gap: 80px; }
.f-creator__lead{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(24px, 2.2vw, 34px);
  color: var(--fg);
  margin-bottom: 30px; line-height: 1.25;
}
.f-creator__body p{ font-size: 18px; color: var(--fg-dim); margin-bottom: 24px; max-width: 58ch; line-height:1.55; }
.f-creator__accent{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 2vw, 30px);
  color: var(--yellow) !important;
  margin-top: 20px;
}
.f-creator__channels{
  background: var(--bg-card);
  border: 1px solid var(--line-str);
  padding: 32px;
  border-radius: 6px;
  position: sticky; top: 120px; align-self: start;
  height: fit-content;
}
.f-creator__ch-label{
  display:block;
  font-family: var(--mono); font-size: 10px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--fg-dim); margin-bottom: 20px;
}
.f-creator__channels ul{ display:flex; flex-direction:column; gap: 6px; margin-bottom: 20px; }
.f-creator__channels li{
  display:grid; grid-template-columns: 40px 1fr;
  padding: 12px 0; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em;
}
.f-creator__channels li span:first-child{ color: var(--yellow); font-weight:600; }
.f-creator__stealth{
  display:block; padding-top: 20px; border-top: 1px dashed var(--line);
  font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--fg-dim);
}
@media (max-width: 900px){
  .f-creator__grid{ grid-template-columns: 1fr; gap: 48px; }
  .f-creator__channels{ position: static; }
}

/* ============ FAQ ============ */
.f-faq{
  padding: 140px var(--frame);
  max-width: var(--max); margin: 0 auto;
  border-top: 1px solid var(--line);
}
.f-faq__kicker{
  display:flex; align-items:center; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--fg-dim); margin-bottom: 40px;
}
.f-faq__title{
  font-family: var(--display); font-size: clamp(48px, 7vw, 120px);
  line-height: .95; letter-spacing:-.04em; font-weight:900; margin-bottom: 60px;
}
.f-faq__title em{ color: var(--yellow); }

.f-faq__list{ border-top: 1px solid var(--line); }
.f-faq__item{ border-bottom: 1px solid var(--line); }
.f-faq__toggle{
  display:grid; grid-template-columns: 50px 1fr 40px;
  align-items: center; gap: 20px;
  width: 100%; padding: 28px 0;
  text-align:left;
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 34px); letter-spacing:-.02em; font-weight: 900;
  line-height: 1.1;
  transition: color .25s;
}
.f-faq__toggle:hover{ color: var(--yellow); }
.f-faq__n{ font-family: var(--mono); font-size: 12px; color: var(--yellow); font-weight:600; }
.f-faq__icon{
  width: 28px; height: 28px;
  border: 1px solid var(--line-str);
  border-radius: 50%;
  position: relative;
  transition: border-color .3s, background .3s;
}
.f-faq__icon::before, .f-faq__icon::after{
  content:""; position:absolute; top: 50%; left: 50%;
  width: 12px; height: 1.5px; background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .3s;
}
.f-faq__icon::after{ transform: translate(-50%, -50%) rotate(90deg); }
.f-faq__toggle[aria-expanded="true"] .f-faq__icon{ background: var(--yellow); border-color: var(--yellow); color: #000; }
.f-faq__toggle[aria-expanded="true"] .f-faq__icon::after{ transform: translate(-50%, -50%) rotate(0deg); }
.f-faq__a{
  max-height: 0; overflow: hidden;
  transition: max-height .5s var(--ease-out);
}
.f-faq__a p{
  padding: 0 0 28px 70px;
  font-size: 17px; line-height: 1.55; color: var(--fg-dim);
  max-width: 60ch;
}
.f-faq__toggle[aria-expanded="true"] + .f-faq__a{ max-height: 240px; }
@media (max-width: 700px){
  .f-faq__toggle{ grid-template-columns: 36px 1fr 28px; gap: 14px; }
  .f-faq__a p{ padding-left: 50px; }
}

/* ============ CONTACT ============ */
.f-contact{
  padding: 180px var(--frame) 100px;
  max-width: var(--max); margin: 0 auto;
  border-top: 1px solid var(--line);
}
.f-contact__kicker{
  display:flex; align-items:center; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--fg-dim); margin-bottom: 60px;
}
.f-contact__headline{
  font-family: var(--display);
  font-size: clamp(60px, 11vw, 220px);
  line-height: .9; letter-spacing:-.04em; font-weight:900;
  margin-bottom: 20px;
}
.f-contact__headline em{ color: var(--yellow); }
.f-contact__sub{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(24px, 2.8vw, 40px); color: var(--fg-dim);
  margin-bottom: 80px;
}
.f-contact__mail{
  display: inline-flex; align-items: center; gap: 14px;
  font-size: clamp(24px, 2.8vw, 38px);
  padding: 20px 36px;
  border: 1.5px solid var(--yellow);
  border-radius: 99px;
  color: var(--yellow);
  font-weight: 500;
  letter-spacing:-.015em;
  background: transparent;
  transition: background .4s var(--ease), color .4s;
  will-change: transform;
}
.f-contact__mail:hover{ background: var(--yellow); color: #000; }

.f-contact__meta{
  display:flex; flex-wrap:wrap; gap: 32px;
  margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--fg-dim);
}

/* ============ FOOTER ============ */
.f-footer{
  padding: 40px var(--frame) 30px;
  border-top: 1px solid var(--line);
  background: #000;
}
.f-footer__row{
  max-width: var(--max); margin: 0 auto;
  display:flex; justify-content:space-between; flex-wrap: wrap; gap: 16px;
  font-size: 13px; color: var(--fg-dim);
}
.f-footer__row--small{
  padding-top: 20px; margin-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--fg-mute);
}
.f-footer__row--small > div{ display:flex; flex-wrap:wrap; gap: 20px; }
.f-footer__row--small a{ transition: color .25s; }
.f-footer__row--small a:hover{ color: var(--yellow); }

/* Client Portal — dezent abgesetzt vom Standard-Footer-Link */
.f-footer__client{
  color: var(--yellow);
  opacity: .85;
  transition: opacity .25s, letter-spacing .25s;
}
.f-footer__client:hover{
  opacity: 1;
  letter-spacing: .12em;
  color: var(--yellow);
}
body.flip.is-day .f-footer__row--small a.f-footer__client{ color: #FFD600; opacity: .9; }
body.flip.is-day .f-footer__row--small a.f-footer__client:hover{ color: #FFD600; opacity: 1; }

/* Footer Akzente — gelb im Nacht-Modus */
.f-footer em{
  font-style: normal;
  color: var(--yellow);
  letter-spacing: .02em;
}
.f-footer__row em{ font-weight: 600; }

/* ============ NAV — AWD-INSPIRED SPLIT LAYOUT ============ */
.f-nav{
  position: fixed; inset: 0; z-index: 220;
  pointer-events: none;
  color: #FFFFFF;
  display: block;
}
.f-nav.is-open{ pointer-events: auto; }

/* Curtain panels — sequential slide-in reveal */
.f-nav__curtain{
  position: absolute; inset: 0;
  transform: translateY(-100%);
  transition: transform .9s cubic-bezier(.77,0,.18,1);
  will-change: transform;
  pointer-events: none;
}
.f-nav__curtain--1{ background: #FFD600; }
.f-nav__curtain--2{ background: #1A1A1A; }
.f-nav__curtain--3{ background: #0A0A0A; }
.f-nav.is-open .f-nav__curtain--1{ transform: translateY(0); transition-delay: 0s; }
.f-nav.is-open .f-nav__curtain--2{ transform: translateY(0); transition-delay: .08s; }
.f-nav.is-open .f-nav__curtain--3{ transform: translateY(0); transition-delay: .16s; }
.f-nav:not(.is-open) .f-nav__curtain--1{ transition-delay: .16s; }
.f-nav:not(.is-open) .f-nav__curtain--2{ transition-delay: .08s; }
.f-nav:not(.is-open) .f-nav__curtain--3{ transition-delay: 0s; }

.f-nav__inner{
  position: relative; z-index: 2;
  height: 100%; width: 100%;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 28px clamp(28px, 4vw, 72px);
  opacity: 0;
  transition: opacity .5s ease .35s;
}
.f-nav.is-open .f-nav__inner{ opacity: 1; }

/* Top bar */
.f-nav__top{
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing:.18em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.f-nav__meta{ display: inline-flex; align-items: center; gap: 12px; }
.f-nav__dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #FFD600;
  box-shadow: 0 0 0 0 rgba(255,214,0,.6);
  animation: navPulse 2s ease-out infinite;
}
@keyframes navPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(255,214,0,.6); }
  50%{ box-shadow: 0 0 0 8px rgba(255,214,0,0); }
}
.f-nav__time{ color: #FFD600; letter-spacing: .24em; }
.f-nav__close{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: #FFFFFF;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  transition: background .3s, color .3s, border-color .3s;
}
.f-nav__close:hover{ background: #FFD600; color: #0A0A0A; border-color: #FFD600; }
.f-nav__close-x{ display: inline-flex; transition: transform .4s var(--ease); }
.f-nav__close:hover .f-nav__close-x{ transform: rotate(90deg); }

/* Main stage: split left/right */
.f-nav__stage{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  min-height: 0;
  padding: clamp(24px, 4vh, 56px) 0;
}

/* Link list */
.f-nav__list{
  display: flex; flex-direction: column;
  gap: 0;
  list-style: none;
  overflow-y: auto;
  max-height: 100%;
}
.f-nav__item{
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  gap: clamp(16px, 2vw, 40px);
  align-items: center;
  padding: clamp(8px, 1.6vh, 26px) 0;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #FFFFFF;
  transition: padding-left .5s var(--ease), border-color .4s;
  opacity: 0;
  transform: translateY(40px);
}
.f-nav__item:last-child{ border-bottom: 1px solid rgba(255,255,255,.08); }
.f-nav.is-open .f-nav__item{
  opacity: 1; transform: translateY(0);
  transition: opacity .7s var(--ease), transform .9s var(--ease), padding-left .5s var(--ease), border-color .4s;
}
.f-nav.is-open .f-nav__item:nth-child(1){ transition-delay: .42s; }
.f-nav.is-open .f-nav__item:nth-child(2){ transition-delay: .48s; }
.f-nav.is-open .f-nav__item:nth-child(3){ transition-delay: .54s; }
.f-nav.is-open .f-nav__item:nth-child(4){ transition-delay: .60s; }
.f-nav.is-open .f-nav__item:nth-child(5){ transition-delay: .66s; }
.f-nav.is-open .f-nav__item:nth-child(6){ transition-delay: .72s; }
.f-nav.is-open .f-nav__item:nth-child(7){ transition-delay: .78s; }

.f-nav__item:hover{ padding-left: clamp(12px, 2vw, 28px); border-color: rgba(255,214,0,.35); }
.f-nav__item:hover + .f-nav__item{ border-top-color: rgba(255,214,0,.35); }

.f-nav__num{
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em;
  color: rgba(255,255,255,.4);
  transition: color .4s;
}
.f-nav__item:hover .f-nav__num{ color: #FFD600; }

.f-nav__label{
  position: relative;
  overflow: hidden;
  font-family: var(--display);
  font-size: clamp(28px, min(7vw, 5.8vh), 110px);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.035em;
  height: 1.05em;
}
.f-nav__label-inner{
  display: block;
  transition: transform .55s cubic-bezier(.77,0,.18,1);
}
.f-nav__word{
  display: block;
  color: #FFFFFF;
}
.f-nav__word--hover{
  color: #FFD600;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
}
.f-nav__item:hover .f-nav__label-inner{
  transform: translateY(-50%);
}

.f-nav__sub{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(14px, 1.1vw, 17px);
  color: rgba(255,255,255,.48);
  transition: color .4s, transform .4s;
  white-space: nowrap;
}
.f-nav__item:hover .f-nav__sub{ color: #FFFFFF; transform: translateX(-8px); }

.f-nav__arrow{
  font-family: var(--mono); font-size: 22px;
  color: rgba(255,255,255,.3);
  transition: transform .5s var(--ease), color .4s, opacity .4s;
  opacity: 0;
  transform: translateX(-12px);
}
.f-nav__item:hover .f-nav__arrow{ color: #FFD600; opacity: 1; transform: translateX(0); }

/* Preview panel */
.f-nav__preview{
  position: relative;
  height: min(520px, 60vh);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 32px;
  background:
    radial-gradient(ellipse at 60% 20%, rgba(255,214,0,.08), transparent 60%),
    linear-gradient(155deg, #161616 0%, #0A0A0A 100%);
}
.f-nav__preview::before{
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 2px, transparent 2px 10px);
  pointer-events: none;
}
.f-nav__preview-frame{
  position: relative;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
}
.f-nav__preview-item{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  opacity: 0;
  transform: scale(.95);
  filter: blur(12px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);
  text-align: center;
  padding: 20px;
}
.f-nav__preview-item.is-active{
  opacity: 1; transform: scale(1); filter: blur(0);
}
.f-nav__preview-tag{
  font-family: var(--mono); font-size: 11px; letter-spacing: .24em;
  color: #FFD600;
}
.f-nav__preview-word{
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 88px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .95;
  color: #FFFFFF;
  text-transform: uppercase;
}
.f-nav__preview-sub{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(15px, 1.2vw, 19px);
  color: rgba(255,255,255,.7);
  max-width: 28ch;
}
.f-nav__preview-meta{
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
  text-align: right;
}

/* Bottom strip: language + contact */
.f-nav__bottom{
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08);
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.f-nav__lang{
  display: inline-flex; align-items: center; gap: 4px;
}
.f-nav__lang-kicker{
  color: rgba(255,255,255,.4);
  margin-right: 12px;
}
.f-nav__lang-btn{
  position: relative;
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  color: #FFFFFF;
  background: transparent;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  transition: background .4s var(--ease), color .4s, border-color .4s, transform .4s;
  cursor: pointer;
  overflow: hidden;
}
.f-nav__lang-btn::before{
  content: "";
  position: absolute; inset: 0;
  background: #FFD600;
  transform: translateY(101%);
  transition: transform .45s cubic-bezier(.77,0,.18,1);
  z-index: -1;
}
.f-nav__lang-btn:hover::before,
.f-nav__lang-btn.is-active::before{ transform: translateY(0); }
.f-nav__lang-btn:hover,
.f-nav__lang-btn.is-active{ color: #0A0A0A; border-color: #FFD600; }
.f-nav__lang-code{ font-weight: 700; }
.f-nav__lang-name{
  font-family: var(--serif); font-style: italic; font-size: 12px; letter-spacing: 0;
  text-transform: none; opacity: .8;
}
.f-nav__contact{ display: flex; gap: 24px; align-items: center; color: rgba(255,255,255,.5); }
.f-nav__contact a{ color: #FFFFFF; border-bottom: 1px solid rgba(255,214,0,.4); padding-bottom: 2px; }
.f-nav__contact a:hover{ color: #FFD600; border-bottom-color: #FFD600; }

/* Responsive */
@media (max-width: 960px){
  .f-nav__stage{ grid-template-columns: 1fr; gap: 24px; }
  .f-nav__preview{ display: none; }
  .f-nav__item{ grid-template-columns: 48px 1fr auto; }
  .f-nav__sub{ display: none; }
  .f-nav__label{ font-size: clamp(24px, min(10vw, 5vh), 72px); }
}
@media (max-width: 640px){
  .f-nav__bottom{ flex-direction: column; align-items: flex-start; gap: 16px; }
  .f-nav__lang{ flex-wrap: wrap; gap: 6px; }
  .f-nav__contact{ flex-direction: column; align-items: flex-start; gap: 8px; }
  .f-nav__time{ display: none; }
}

/* ============ TOPBAR LANG SWITCH ============ */
.topbar__lang{
  position: relative;
  display: inline-flex; align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line-str);
  border-radius: 999px;
  background: transparent;
}
.topbar__lang-btn{
  position: relative;
  z-index: 2;
  padding: 6px 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; font-weight: 600;
  color: var(--fg-dim);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: color .35s var(--ease);
}
.topbar__lang-btn:hover{ color: var(--fg); }
.topbar__lang-btn.is-active{ color: #0A0A0A; }
body.flip.is-day .topbar__lang-btn.is-active{ color: #FFD600; }
.topbar__lang-indicator{
  position: absolute;
  top: 4px; bottom: 4px;
  width: calc((100% - 8px) / 3);
  left: 4px;
  background: var(--yellow);
  border-radius: 999px;
  transition: transform .45s cubic-bezier(.77,0,.18,1);
  z-index: 1;
  pointer-events: none;
}
.topbar__lang[data-active="en"] .topbar__lang-indicator{ transform: translateX(0); }
.topbar__lang[data-active="de"] .topbar__lang-indicator{ transform: translateX(100%); }
.topbar__lang[data-active="gr"] .topbar__lang-indicator{ transform: translateX(200%); }

@media (max-width: 900px){
  .topbar__lang{ display: none; }
}

/* Language crossfade on change */
[data-i18n], [data-i18n-html]{ transition: opacity .28s ease; }
body.is-translating [data-i18n],
body.is-translating [data-i18n-html]{ opacity: .15; }

/* ============ ENHANCED CURSOR ============ */
.cursor-f{
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 999;
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor-f__dot,
.cursor-f__ring{
  position: absolute; top: 0; left: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor-f__dot{
  width: 6px; height: 6px;
  background: #FFFFFF;
  transition: width .3s var(--ease), height .3s var(--ease), opacity .3s;
}
.cursor-f__ring{
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,.5);
  transition: width .35s var(--ease), height .35s var(--ease),
              background .35s, border-color .35s, opacity .3s;
}
.cursor-f__label{
  position: absolute; top: 0; left: 0;
  transform: translate(-50%, -50%) scale(.6);
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  color: #0A0A0A;
  padding: 0 2px;
  opacity: 0;
  white-space: nowrap;
  text-transform: uppercase;
  transition: opacity .3s, transform .35s var(--ease);
  pointer-events: none;
}

/* Cursor states */
.cursor-f.is-hover .cursor-f__ring{
  width: 80px; height: 80px;
  background: #FFD600;
  border-color: #FFD600;
}
.cursor-f.is-hover .cursor-f__dot{ opacity: 0; }
.cursor-f.is-hover .cursor-f__label{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cursor-f.is-click .cursor-f__ring{ transform: translate(-50%, -50%) scale(.7); }
.cursor-f.is-hidden{ opacity: 0; }

@media (pointer: coarse){
  .cursor-f{ display: none; }
}

/* =========================================================
   LEGAL PAGES — Shared layout using main-site shell
   ========================================================= */
.f-legal{
  max-width: 820px;
  margin: 0 auto;
  padding: 160px 40px 100px;
  color: var(--fg);
}
.f-legal__kicker{
  display: flex; align-items: center; gap: 14px;
  font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim); margin-bottom: 32px;
}
.f-legal__kicker-rule{
  flex: 1; height: 1px; background: var(--line); max-width: 60px;
}
.f-legal__title{
  font: 900 clamp(48px, 8vw, 80px)/1 var(--display);
  letter-spacing: -.02em; margin: 0 0 16px;
}
.f-legal__title em{
  font-family: var(--serif); font-weight: 400; font-style: italic;
}
.f-legal__meta{
  font: 500 13px var(--mono); letter-spacing: .06em;
  color: var(--fg-dim); margin-bottom: 12px;
}
.f-legal__lede{
  font: 400 17px/1.6 var(--body); color: var(--fg-mute);
  max-width: 600px; margin-bottom: 60px;
}
.f-legal__cta{
  display: flex; flex-wrap: wrap; gap: 14px; margin: -24px 0 64px;
}
.f-disc__card h3 a{ color: inherit; text-decoration: none; }
.f-disc__card h3 a:hover{ color: #FFD600; }
/* whole card clickable via stretched title link */
.f-disc__card h3 a::after{ content: ""; position: absolute; inset: 0; z-index: 2; }
.f-disc__more{
  margin-top: auto;
  font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: #FFD600; transition: transform .3s var(--ease);
}
.f-disc__card:hover .f-disc__more{ transform: translateX(4px); }
/* nav overlay — services strip */
.f-nav__services{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 20px 0; border-top: 1px solid var(--line);
}
.f-nav__services-kicker{
  font: 600 11px var(--mono); letter-spacing: .2em; color: var(--fg-dim);
}
.f-nav__services a{
  font: 500 15px var(--font); color: var(--fg-dim); text-decoration: none;
  transition: color .3s;
}
.f-nav__services a:hover{ color: #FFD600; }
.f-legal__body{
  border-top: 1px solid var(--line);
}
.f-legal__section{
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
}
.f-legal__num{
  display: block;
  font: 700 12px var(--mono); letter-spacing: .1em;
  color: #FFD600; margin-bottom: 14px;
}
.f-legal__section h2{
  font: 800 22px/1.2 var(--display); letter-spacing: -.01em;
  margin: 0 0 16px; color: var(--fg);
}
.f-legal__section p{
  font: 400 15px/1.7 var(--body); color: var(--fg-mute);
  margin: 0 0 12px;
}
.f-legal__section p:last-child{ margin-bottom: 0; }
.f-legal__section ul{
  list-style: none; padding: 0; margin: 12px 0;
}
.f-legal__section li{
  font: 400 15px/1.7 var(--body); color: var(--fg-mute);
  padding: 4px 0 4px 20px; position: relative;
}
.f-legal__section li::before{
  content: "→"; position: absolute; left: 0; color: #FFD600;
}
.f-legal__section a{
  color: #FFD600; text-decoration: none;
  border-bottom: 1px solid rgba(255,214,0,.3);
  transition: border-color .2s;
}
.f-legal__section a:hover{ border-bottom-color: #FFD600; }
.f-legal__address{
  font: 400 15px/1.8 var(--body); color: var(--fg-mute);
  font-style: normal;
}

@media (max-width: 700px){
  .f-legal{ padding: 120px 20px 60px; }
  .f-legal__title{ font-size: clamp(36px, 10vw, 56px); }
  .f-legal__section{ padding: 32px 0; }
}

/* ──────────────────────────────────────────
   TESTIMONIALS (.f-test)
   ────────────────────────────────────────── */
.f-test{
  padding: clamp(80px, 12vw, 180px) clamp(24px, 6vw, 120px);
  position: relative;
}
.f-test__kicker{
  display: flex; align-items: center; gap: 14px;
  font: 600 11px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-mute);
  margin-bottom: 32px;
}
.f-test__title{
  font: 700 clamp(36px, 5vw, 72px)/1.05 var(--head);
  margin-bottom: clamp(40px, 6vw, 80px);
}
.f-test__title em{
  font-family: var(--serif); font-weight: 400; font-style: italic;
  color: var(--yellow);
}
.f-test__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.f-test__card{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(28px, 3vw, 48px);
  margin: 0;
  transition: border-color .3s;
  display: flex; flex-direction: column; justify-content: space-between;
}
.f-test__card:hover{ border-color: var(--yellow); }
.f-test__quote{
  font: 400 clamp(15px, 1.2vw, 18px)/1.7 var(--body);
  color: var(--fg);
  margin: 0 0 24px;
  position: relative;
}
.f-test__quote::before{
  content: "\201C";
  font: 700 48px/1 var(--serif);
  color: var(--yellow);
  position: absolute; top: -12px; left: -4px;
  opacity: .5;
}
.f-test__meta{
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.f-test__name{
  font: 600 14px/1.3 var(--head);
  letter-spacing: .02em;
}
.f-test__role{
  font: 400 12px/1.4 var(--mono);
  color: var(--fg-mute);
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 700px){
  .f-test__grid{ grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────
   CASE STUDY (.f-case)
   ────────────────────────────────────────── */
.f-case{
  max-width: 900px;
  margin: 0 auto;
  padding: 140px clamp(24px, 6vw, 80px) 80px;
}
.f-case__back{
  display: inline-block;
  font: 500 13px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-mute);
  text-decoration: none;
  margin-bottom: 48px;
  transition: color .2s;
}
.f-case__back:hover{ color: var(--yellow); }

/* hero */
.f-case__hero{ margin-bottom: clamp(48px, 6vw, 80px); }
.f-case__kicker{
  display: flex; align-items: center; gap: 10px;
  font: 600 11px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-mute);
  margin-bottom: 20px;
}
.f-case__kicker-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--yellow);
}
.f-case__title{
  font: 700 clamp(48px, 8vw, 96px)/1.0 var(--head);
  margin-bottom: 16px;
}
.f-case__title em{
  font-family: var(--serif); font-weight: 400; font-style: italic;
  color: var(--yellow);
}
.f-case__subtitle{
  font: 400 clamp(16px, 1.6vw, 22px)/1.5 var(--body);
  color: var(--fg-mute);
}

/* results grid */
.f-case__results{
  margin-bottom: clamp(48px, 6vw, 80px);
  padding: clamp(32px, 4vw, 56px) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.f-case__kicker-line{
  font: 600 11px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-mute);
  margin-bottom: 24px;
}
.f-case__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.f-case__stat{
  display: flex; flex-direction: column; gap: 6px;
}
.f-case__stat strong{
  font: 700 clamp(36px, 5vw, 64px)/1 var(--head);
  color: var(--yellow);
}
.f-case__stat span{
  font: 400 13px/1.4 var(--mono);
  color: var(--fg-mute);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* sections */
.f-case__section{
  margin-bottom: clamp(36px, 4vw, 56px);
}
.f-case__heading{
  font: 600 11px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--yellow);
  margin-bottom: 16px;
}
.f-case__section p{
  font: 400 clamp(15px, 1.2vw, 18px)/1.8 var(--body);
  color: var(--fg);
  max-width: 680px;
}

/* meta (stack + timeline) */
.f-case__section--meta{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: clamp(28px, 3vw, 44px) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.f-case__meta-label{
  font: 600 11px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-mute);
  margin-bottom: 8px;
}
.f-case__meta-value{
  font: 400 15px/1.6 var(--body);
  color: var(--fg);
}

/* cta */
.f-case__cta{
  text-align: center;
  padding: clamp(40px, 5vw, 80px) 0;
}

@media (max-width: 700px){
  .f-case{ padding: 120px 20px 60px; }
  .f-case__grid{ grid-template-columns: repeat(2, 1fr); }
  .f-case__section--meta{ grid-template-columns: 1fr; }
}
@media (max-width: 400px){
  .f-case__grid{ grid-template-columns: 1fr; }
}