/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:      #0D0D0D;
  --ink-2:    #141414;
  --ink-3:    #1E1E1E;
  --line:     rgba(255,255,255,.10);
  --paper:    #FFFFFF;
  --zest:     #FF9D00;
  --muted:    rgba(255,255,255,.56);

  --display: "Outfit", "Trebuchet MS", system-ui, sans-serif;
  --mono:    "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
  --r: 22px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html.is-locked{ overflow:hidden; }

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--display);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--zest); color:var(--ink); }

:focus-visible{
  outline:3px solid var(--zest);
  outline-offset:3px;
  border-radius:6px;
}

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

/* ============================================================
   AUGEN — das Signature-Element. Pupillen folgen dem Cursor.
   ============================================================ */
.eyes{
  --eye: 64px;                 /* Durchmesser eines Auges */
  --pupil: .42;                /* Pupille relativ zum Auge */
  position:relative;
  display:inline-flex;
  align-items:flex-end;
  gap:calc(var(--eye) * .06);
  flex:0 0 auto;
}
.eyes .eye{
  position:relative;
  width:var(--eye);
  height:var(--eye);
  border-radius:50%;
  background:var(--paper);
  overflow:hidden;
  transition:transform .09s linear;
  will-change:transform;
}
.eyes.on-orange .eye{ background:var(--ink); }
.eyes .eye--r{ width:calc(var(--eye) * .88); height:calc(var(--eye) * .88); }

.eyes .pupil{
  position:absolute;
  inset:0;
  margin:auto;
  width:calc(var(--eye) * var(--pupil));
  height:calc(var(--eye) * var(--pupil));
  border-radius:50%;
  background:var(--ink);
  transform:translate(0,0);
  transition:transform .18s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.eyes.on-orange .pupil{ background:var(--zest); }

.eyes .glint{
  position:absolute;
  top:12%; right:10%;
  width:34%; height:34%;
  border-radius:50%;
  background:var(--paper);
}
.eyes.on-orange .glint{ background:var(--ink); }

.eyes.is-blinking .eye{ transform:scaleY(.06); }

/* Brauen */
.eyes .brows{
  position:absolute;
  left:calc(var(--eye) * .06);
  bottom:calc(100% + var(--eye) * .12);
  display:flex;
  gap:calc(var(--eye) * .12);
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.eyes .brows i{
  display:block;
  width:calc(var(--eye) * .085);
  height:calc(var(--eye) * .30);
  border-radius:99px;
  background:var(--zest);
}
.eyes .brows i:nth-child(1){ transform:rotate(-16deg); }
.eyes .brows i:nth-child(3){ transform:rotate(16deg); }
.eyes.on-orange .brows i{ background:var(--ink); }

/* Mund */
.eyes .smile{
  position:absolute;
  top:calc(100% + var(--eye) * .02);
  left:calc(var(--eye) * .22);
  width:calc(var(--eye) * .72);
  height:calc(var(--eye) * .34);
  overflow:visible;
}
.eyes .smile path{
  fill:none;
  stroke:var(--paper);
  stroke-width:9;
  stroke-linecap:round;
  transition:d .2s ease;
}
.eyes.on-orange .smile path{ stroke:var(--ink); }

/* Nur erschrocken: Brauen hoch, Pupillen folgen weiter dem Cursor */
.eyes.is-surprised .brows{ transform:translateY(calc(var(--eye) * -.16)); }

/* "OOOPS!"-Zustand: Pupillen nach innen, Brauen hoch */
.eyes.is-oops .brows{ transform:translateY(calc(var(--eye) * -.16)); }
.eyes.is-oops .eye--l .pupil{ transform:translate(calc(var(--eye)*.14), calc(var(--eye)*-.02)) !important; }
.eyes.is-oops .eye--r .pupil{ transform:translate(calc(var(--eye)*-.14), calc(var(--eye)*-.02)) !important; }

/* Wortmarke: Augen + "ps" */
.wordmark{
  display:inline-flex;
  align-items:flex-end;
  gap:.02em;
  line-height:.82;
}
.wordmark .ps{
  font-weight:700;
  letter-spacing:-.04em;
  font-size:calc(var(--eye) * 1.12);
  transform:translateY(4%);
}

/* ============================================================
   INTRO-OVERLAY
   ============================================================ */
#intro{
  position:fixed;
  inset:0;
  z-index:1000;
  background:#000;
  display:grid;
  place-items:center;
  transition:opacity .9s ease, visibility .9s;
}
#intro video{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Auf hochformatigen Screens nicht beschneiden */
@media (max-aspect-ratio:1/1){
  #intro video{ object-fit:contain; }
}
#intro.is-done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#intro[hidden]{ display:none; }

.intro-ui{
  position:absolute;
  right:clamp(16px,4vw,40px);
  bottom:clamp(16px,4vw,40px);
  display:flex;
  gap:10px;
  align-items:center;
}
.intro-btn{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.25);
  border-radius:99px;
  padding:11px 18px;
  cursor:pointer;
  backdrop-filter:blur(6px);
  transition:color .2s, border-color .2s, background .2s;
}
.intro-btn:hover{ color:var(--ink); background:var(--zest); border-color:var(--zest); }

/* Fallback, falls der Browser Autoplay blockt */
.intro-start{
  position:absolute;
  inset:0;
  display:none;
  place-items:center;
  background:#000;
  cursor:pointer;
}
.intro-start.is-shown{ display:grid; }
.intro-start span{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.3);
  border-radius:99px;
  padding:16px 30px;
}

/* Reveal der Seite nach dem Intro */
.reveal{ opacity:0; transform:translateY(18px); }
body.is-revealed .reveal{
  opacity:1; transform:none;
  transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
body.is-revealed .reveal:nth-child(2){ transition-delay:.10s; }
body.is-revealed .reveal:nth-child(3){ transition-delay:.20s; }
body.is-revealed .reveal:nth-child(4){ transition-delay:.30s; }
body.is-revealed .reveal:nth-child(5){ transition-delay:.40s; }

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(13,13,13,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.site-head.is-stuck{ border-bottom-color:var(--line); }
.site-head .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:78px;
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand .eyes{ --eye:26px; }
.brand .ps{ font-size:30px; }
.brand .brand-sub{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--zest);
  padding-left:14px;
  border-left:1px solid var(--line);
}

.nav{ display:flex; align-items:center; gap:30px; }
.nav a{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .2s;
}
.nav a:hover{ color:var(--paper); }
.nav .nav-cta{
  color:var(--ink);
  background:var(--zest);
  border-radius:99px;
  padding:11px 20px;
}
.nav .nav-cta:hover{ color:var(--ink); filter:brightness(1.1); }

@media (max-width:820px){
  .brand .brand-sub{ display:none; }
  .nav a:not(.nav-cta){ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding-block:clamp(56px,10vw,110px) clamp(48px,8vw,90px);
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  left:50%; top:-10%;
  width:min(900px,120vw); height:min(900px,120vw);
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,157,0,.14), transparent 62%);
  pointer-events:none;
  z-index:0;
}
.hero .wrap{ position:relative; z-index:1; }

.hero-eyes{
  display:flex;
  justify-content:center;
  margin-bottom:clamp(46px,7vw,76px);
}
.hero-eyes .eyes{ --eye:clamp(96px, 20vw, 190px); cursor:pointer; }

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--zest);
  margin:0 0 22px;
}
.hero h1{
  font-size:clamp(40px,7.4vw,92px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:.98;
  margin:0 0 26px;
  max-width:16ch;
}
.hero h1 em{
  font-style:normal;
  color:var(--zest);
}
.hero p.lede{
  font-size:clamp(17px,2.1vw,21px);
  color:var(--muted);
  max-width:52ch;
  margin:0 0 38px;
}

.actions{ display:flex; flex-wrap:wrap; gap:14px; }
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size:15px;
  border-radius:99px;
  padding:15px 28px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s cubic-bezier(.22,1,.36,1), background .2s, color .2s, border-color .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--zest); color:var(--ink); }
.btn-ghost{ border-color:var(--line); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--paper); }

/* ============================================================
   TICKER
   ============================================================ */
.ticker{
  background:var(--zest);
  color:var(--ink);
  overflow:hidden;
  border-block:1px solid var(--ink);
  padding-block:14px;
}
.ticker-track{
  display:flex;
  width:max-content;
  animation:slide 32s linear infinite;
}
.ticker span{
  font-family:var(--mono);
  font-weight:700;
  font-size:13px;
  letter-spacing:.20em;
  text-transform:uppercase;
  padding-inline:26px;
  white-space:nowrap;
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding-block:clamp(70px,11vw,140px); }
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
  margin-bottom:clamp(34px,5vw,58px);
}
.section-head h2{
  font-size:clamp(30px,5vw,56px);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.02;
  margin:6px 0 0;
  max-width:20ch;
}
.section-head p{
  color:var(--muted);
  max-width:40ch;
  margin:0;
  font-size:16px;
}

/* --- Spiele --- */
.games{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:20px;
}
.game{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s;
}
.game:hover{ transform:translateY(-6px); border-color:rgba(255,157,0,.55); }

.game-art{
  aspect-ratio:4/3;
  position:relative;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,157,0,.30), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
    var(--ink-3);
  border-bottom:1px solid var(--line);
}
.game-art .eyes{ --eye:44px; }
.game-status{
  position:absolute;
  top:14px; left:14px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:99px;
  padding:6px 12px;
  color:var(--zest);
}
.game-body{ padding:24px 24px 26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.game-body h3{ font-size:24px; font-weight:700; letter-spacing:-.02em; margin:0; }
.game-body p{ margin:0; color:var(--muted); font-size:15px; flex:1; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tags span{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:99px;
  padding:5px 11px;
}

/* --- Patchnotes / Studio-Historie --- */
.notes{ display:grid; gap:0; border-top:1px solid var(--line); }
.note{
  display:grid;
  grid-template-columns:120px 96px 1fr;
  gap:24px;
  align-items:baseline;
  padding-block:26px;
  border-bottom:1px solid var(--line);
}
.note .ver{
  font-family:var(--mono);
  font-weight:700;
  font-size:14px;
  color:var(--zest);
  letter-spacing:.06em;
}
.note .year{
  font-family:var(--mono);
  font-size:13px;
  color:var(--muted);
}
.note p{ margin:0; font-size:clamp(16px,2.2vw,20px); max-width:56ch; }
@media (max-width:720px){
  .note{ grid-template-columns:auto 1fr; gap:8px 18px; }
  .note p{ grid-column:1 / -1; }
}

/* --- Oops-Statement (orange) --- */
.statement{
  background:var(--zest);
  color:var(--ink);
}
.statement .wrap{
  padding-block:clamp(70px,11vw,130px);
  display:grid;
  gap:clamp(34px,6vw,64px);
  grid-template-columns:1fr;
  justify-items:start;
}
.statement .eyes{ --eye:clamp(60px,10vw,96px); }
.statement h2{
  font-size:clamp(34px,6.4vw,78px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:.98;
  margin:0;
  max-width:15ch;
}
.statement p{
  font-size:clamp(16px,2vw,20px);
  max-width:46ch;
  margin:0;
  color:rgba(13,13,13,.78);
}

/* --- Kontakt --- */
.contact{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}
.card{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:30px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:border-color .3s, transform .3s cubic-bezier(.22,1,.36,1);
}
a.card:hover{ border-color:var(--zest); transform:translateY(-4px); }
.card .k{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.card .v{ font-size:21px; font-weight:600; letter-spacing:-.01em; }
.card .note-sm{ font-size:14px; color:var(--muted); margin:0; }

/* ============================================================
   IMPRESSUM
   ============================================================ */
.imprint{ padding-block:clamp(48px,7vw,80px) 0; }
.imprint .wrap{
  border-top:1px solid var(--line);
  padding-top:clamp(32px,5vw,48px);
}
.imprint h2{
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--zest);
  margin:0 0 22px;
}
.imprint dl{
  margin:0;
  display:grid;
  grid-template-columns:180px 1fr;
  gap:14px 28px;
  align-items:baseline;
}
.imprint dt{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.imprint dd{
  margin:0;
  font-size:18px;
  font-weight:600;
  letter-spacing:-.01em;
}
.imprint dd a:hover{ color:var(--zest); }
@media (max-width:600px){
  .imprint dl{ grid-template-columns:1fr; gap:4px; }
  .imprint dt{ margin-top:14px; }
}

.imprint-legal{
  margin-top:clamp(36px,5vw,52px);
  display:grid;
  gap:26px;
  max-width:70ch;
}
.imprint-legal h3{
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper);
  margin:0 0 8px;
}
.imprint-legal p{
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:var(--muted);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{ border-top:1px solid var(--line); padding-block:44px 56px; }
.site-foot .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.site-foot .brand .eyes{ --eye:22px; }
.site-foot .ps{ font-size:26px; }
.foot-meta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  align-items:center;
}
.foot-meta button{
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  color:var(--muted);
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  transition:color .2s;
}
.foot-meta button:hover, .foot-meta a:hover{ color:var(--zest); }

/* ============================================================
   MOTION-PRÄFERENZ
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .ticker-track{ animation:none; }
  .reveal{ opacity:1; transform:none; }
  *,*::before,*::after{ transition-duration:.01ms !important; }
}

/* ============================================================
   APPS — Bereich auf der Startseite
   ============================================================ */
.app-showcase{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,68px);
  align-items:center;
}
@media (max-width:900px){
  .app-showcase{ grid-template-columns:1fr; gap:44px; }
}

.app-copy h3{
  font-size:clamp(28px,4.4vw,46px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.02;
  margin:0 0 18px;
  max-width:18ch;
}
.app-copy > p{
  color:var(--muted);
  font-size:clamp(16px,1.9vw,19px);
  max-width:46ch;
  margin:0 0 26px;
}
.app-copy .actions{ margin-top:28px; }

/* Funktionsliste als Mono-Chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips span{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:99px;
  padding:6px 12px;
}

/* Hinweis, solange kein App-Store-Link existiert */
.soon{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  border:1px dashed var(--line);
  border-radius:99px;
  padding:14px 22px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.soon::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--zest);
  flex:0 0 auto;
}

/* --- Telefon-Attrappe mit Lernkarte --- */
.phone-stage{
  display:flex;
  justify-content:center;
  position:relative;
}
.phone-stage::after{
  content:"";
  position:absolute;
  inset:auto;
  width:min(420px,90%);
  aspect-ratio:1;
  background:radial-gradient(circle, rgba(255,157,0,.16), transparent 62%);
  pointer-events:none;
  z-index:0;
}
.phone{
  position:relative;
  z-index:1;
  width:min(276px,74%);
  aspect-ratio:9/18.5;
  border-radius:40px;
  border:1px solid var(--line);
  background:var(--ink-2);
  padding:12px;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.phone::before{
  content:"";
  position:absolute;
  top:14px; left:50%;
  transform:translateX(-50%);
  width:34%; height:6px;
  border-radius:99px;
  background:var(--ink-3);
}
.phone-screen{
  height:100%;
  border-radius:30px;
  background:var(--ink-3);
  padding:34px 18px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:hidden;
}
.phone-label{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--zest);
  text-align:center;
}
.flashcard{
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px 16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  text-align:center;
  flex:1;
}
.flashcard .q{
  font-size:17px;
  font-weight:600;
  line-height:1.3;
  margin:0;
}
.flashcard .a{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--zest);
  margin:0;
}
.flashcard--ghost{
  flex:0 0 auto;
  padding:14px 16px;
  opacity:.4;
}
.flashcard--ghost .q{ font-size:13px; font-weight:400; color:var(--muted); }
.phone-bar{
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
}
.phone-bar i{
  display:block;
  width:26px; height:5px;
  border-radius:99px;
  background:var(--line);
}
.phone-bar i:first-child{ background:var(--zest); }

/* ============================================================
   UNTERSEITEN
   ============================================================ */
.subhero{
  padding-block:clamp(48px,8vw,96px) clamp(30px,5vw,54px);
  position:relative;
  overflow:hidden;
}
.subhero::after{
  content:"";
  position:absolute;
  left:50%; top:-40%;
  width:min(760px,120vw); height:min(760px,120vw);
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,157,0,.12), transparent 62%);
  pointer-events:none;
  z-index:0;
}
.subhero .wrap{ position:relative; z-index:1; }
.subhero h1{
  font-size:clamp(38px,6.6vw,82px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:.98;
  margin:0 0 22px;
  max-width:18ch;
}
.subhero h1 em{ font-style:normal; color:var(--zest); }
.subhero p.lede{
  font-size:clamp(17px,2.1vw,21px);
  color:var(--muted);
  max-width:54ch;
  margin:0 0 32px;
}

.crumb{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 26px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.crumb a{ color:var(--muted); transition:color .2s; }
.crumb a:hover{ color:var(--zest); }
.crumb span{ color:var(--line); }

/* --- Funktionsraster --- */
.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px;
}
.feature{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:26px;
  display:flex;
  flex-direction:column;
  gap:9px;
  transition:border-color .3s, transform .3s cubic-bezier(.22,1,.36,1);
}
.feature:hover{ border-color:rgba(255,157,0,.45); transform:translateY(-4px); }
.feature .k{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--zest);
}
.feature h3{ font-size:19px; font-weight:700; letter-spacing:-.01em; margin:0; }
.feature p{ margin:0; font-size:15px; color:var(--muted); line-height:1.6; }

/* --- Free / Pro --- */
.plans{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}
.plan{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.plan--pro{ border-color:rgba(255,157,0,.55); }
.plan .k{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.plan--pro .k{ color:var(--zest); }
.plan h3{ font-size:26px; font-weight:700; letter-spacing:-.02em; margin:0; }
.plan p{ margin:0; color:var(--muted); font-size:15px; }
.plan ul{ margin:6px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.plan li{
  font-size:15px;
  padding-left:22px;
  position:relative;
  line-height:1.5;
}
.plan li::before{
  content:"";
  position:absolute;
  left:0; top:.55em;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--zest);
}
.plan .fine{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:auto;
  padding-top:12px;
}

/* ============================================================
   RECHTSTEXT-SEITEN (Datenschutz etc.)
   ============================================================ */
.doc{ padding-block:clamp(20px,4vw,40px) clamp(60px,9vw,110px); }
.doc .wrap{ max-width:860px; }
.doc-meta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  padding-bottom:22px;
  margin-bottom:clamp(32px,5vw,48px);
}
.doc section{ margin-bottom:clamp(34px,5vw,50px); }
.doc h2{
  font-size:clamp(21px,2.8vw,27px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.2;
  margin:0 0 14px;
}
.doc h2 .num{
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  color:var(--zest);
  letter-spacing:.06em;
  margin-right:12px;
}
.doc h3{
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper);
  margin:26px 0 10px;
}
.doc p{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.7;
  color:var(--muted);
}
.doc p:last-child{ margin-bottom:0; }
.doc a{ color:var(--paper); text-decoration:underline; text-underline-offset:3px; }
.doc a:hover{ color:var(--zest); }
.doc ul{ margin:0 0 14px; padding-left:20px; display:grid; gap:7px; }
.doc li{ font-size:16px; line-height:1.6; color:var(--muted); }
.doc .callout{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px 26px;
}
.doc .callout p{ margin-bottom:0; }

/* ============================================================
   FOOTER — Rechtliches
   ============================================================ */
.foot-legal{
  border-top:1px solid var(--line);
  margin-top:34px;
  padding-top:24px;
  width:100%;
  display:flex;
  gap:10px 26px;
  flex-wrap:wrap;
  align-items:center;
}
.foot-legal .k{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--zest);
}
.foot-legal a{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .2s;
}
.foot-legal a:hover{ color:var(--paper); }

/* ============================================================
   SCREENSHOTS
   ============================================================ */
/* Rahmen mit echtem Screenshot: Höhe richtet sich nach dem Bild,
   damit nichts beschnitten wird. */
.phone.has-shot{
  aspect-ratio:auto;
  padding:26px 10px 10px;
}
.phone.has-shot img{
  width:100%;
  height:auto;
  display:block;
  border-radius:26px;
}

/* --- iPad-Rahmen --- */
.tablets{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:clamp(16px,3vw,30px);
  align-items:start;
}
@media (max-width:820px){
  .tablets{ grid-template-columns:1fr; }
}
.tablet{
  border:1px solid var(--line);
  border-radius:28px;
  background:var(--ink-2);
  padding:14px;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.tablet img{
  width:100%;
  height:auto;
  border-radius:16px;
  display:block;
}

.shots{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,3vw,32px);
  align-items:start;
}
.shots .phone{ width:100%; }
@media (max-width:760px){
  .shots{ grid-template-columns:repeat(2,1fr); gap:14px; }
}
@media (max-width:420px){
  .shots{ grid-template-columns:1fr; max-width:290px; margin-inline:auto; }
}
.phone-stage--solo{ margin-bottom:clamp(28px,4vw,44px); }
.phone-stage--solo .phone{ width:min(258px,70%); }

.shot-cap{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
  margin:14px 0 0;
}

/* ============================================================
   SPRACHUMSCHALTER
   ============================================================ */
.lang{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
}
.lang a{
  color:var(--muted);
  transition:color .2s;
}
.lang a:hover{ color:var(--paper); }
.lang a.is-active{ color:var(--zest); }
.lang i{
  font-style:normal;
  color:var(--line);
}

/* Der Umschalter bleibt auch auf dem Handy sichtbar,
   obwohl die übrigen Navigationslinks dort ausgeblendet werden. */
@media (max-width:820px){
  .nav .lang{ display:inline-flex; }
  .nav .lang a{ display:inline; }
}

/* ============================================================
   GERÄTE-AUFNAHMEN (freigestellt, ohne zusätzlichen Rahmen)
   ============================================================ */
.device-group{ margin-top:clamp(40px,6vw,64px); }
.device-group:first-of-type{ margin-top:0; }
.device-group > .eyebrow{ margin-bottom:22px; }

.devices{
  display:grid;
  gap:clamp(18px,3vw,38px);
  align-items:start;
}
.devices--phone{ grid-template-columns:repeat(3,1fr); }
.devices--tablet{ grid-template-columns:repeat(2,1fr); }
.devices img{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 24px 42px rgba(0,0,0,.65));
}
@media (max-width:760px){
  .devices--phone{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .devices--tablet{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .devices--phone{ grid-template-columns:1fr; max-width:270px; margin-inline:auto; }
}

.device-solo{
  max-width:256px;
  margin-inline:auto;
  margin-bottom:clamp(30px,4vw,46px);
}
.device-solo img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 24px 42px rgba(0,0,0,.65));
}

/* Freigestelltes Gerät im Apps-Bereich der Startseite */
.phone-stage > img{
  position:relative;
  z-index:1;
  width:min(272px,72%);
  height:auto;
  display:block;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.65));
}

/* ============================================================
   APP-ICON
   ============================================================ */
.app-head{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,20px);
  margin-bottom:18px;
}
.app-head h3{ margin:0; }
.app-icon{
  width:clamp(56px,7vw,74px);
  height:auto;
  border-radius:23%;
  flex:0 0 auto;
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.app-icon--lg{
  width:clamp(72px,9vw,104px);
  margin-bottom:22px;
}