/* =============================================================================
   sections.css — Aufbau der einzelnen Bereiche
   ============================================================================= */

/* ===== 1 · HERO ========================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:center; text-align:center;
  overflow:hidden; isolation:isolate;
  padding:6rem 1rem clamp(4rem,11vh,8rem);
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media video, .hero__media img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.06) contrast(1.03);
}
/* Nach dem Intro tritt das Video nur leicht zurück – der Goldtitel bleibt klar sichtbar */
.hero.settled .hero__media{ filter:brightness(.86) saturate(1.04); transition:filter 1.6s var(--ease); }
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,
      color-mix(in oklab,var(--deep) 34%,transparent) 0%,
      transparent 24%, transparent 54%,
      color-mix(in oklab,var(--deep) 92%,#000) 100%);
}
.hero__kaefer{
  position:absolute; left:50%; bottom:-5%; width:min(104%,820px); translate:-50% 0;
  z-index:-1; mix-blend-mode:screen; opacity:0; pointer-events:none;
  filter:drop-shadow(0 18px 60px color-mix(in oklab,var(--red) 60%,transparent));
}
.hero__kaefer img{ width:100%; height:auto; }
.hero.settled .hero__kaefer{ opacity:1; transition:opacity 1.6s var(--ease) .2s; }

/* ── Mobil/Hochformat: Video als 16:9-Band oben zeigen (kompletter Goldtitel,
      kein Beschnitt), Ober-/Unterkante blenden weich ins Navy. ── */
@media (orientation:portrait) and (max-width:900px){
  .hero__media{ inset:13svh 0 auto 0; height:auto; aspect-ratio:16/9; }
  .hero__media video, .hero__media img{
    width:100%; height:100%; object-fit:cover; filter:saturate(1.1) contrast(1.05);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 82%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 82%,transparent 100%);
  }
  html .hero.settled .hero__media{ filter:none !important; }   /* Titel bleibt hell */
  .hero__scrim{ background:linear-gradient(180deg,transparent 0,transparent 52%,color-mix(in oklab,var(--deep) 92%,#000) 100%); }
}

.hero__inner{ position:relative; z-index:2; display:grid; gap:1.3rem; padding-inline:1.2rem;
  opacity:0; transform:translateY(16px); }
.hero__inner::before{ content:""; position:absolute; inset:-30% -18% -22%; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 68% at 50% 62%, color-mix(in oklab,var(--deep) 80%,#000) 0%, color-mix(in oklab,var(--deep) 40%,transparent) 55%, transparent 78%); }
.hero.ready .hero__inner{ opacity:1; transform:none; transition:opacity 1s var(--ease) .1s, transform 1s var(--ease) .1s; }

.hero__eyebrow{ font-family:var(--ff-display); font-weight:700; letter-spacing:.46em; text-transform:uppercase;
  font-size:.72rem; color:var(--gold); text-shadow:0 2px 14px #000a; }
.hero__title{ display:grid; gap:.2rem; }
.hero__brand{ font-size:clamp(2.4rem,1.4rem + 5vw,5rem); line-height:.9; }
.hero__strap{ font-family:var(--ff-body); font-weight:600; font-style:italic;
  font-size:clamp(1.5rem,1rem + 2.4vw,2.6rem); color:#fff7e6; letter-spacing:.01em;
  text-shadow:0 2px 18px #000c, 0 0 40px #000a; }
.hero__strap em.gold{ font-style:italic; }
.hero__cta{ display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; margin-top:.4rem; }

/* Brew-Prompt */
.brew{ display:inline-flex; align-items:center; gap:.7rem; }
.brew__btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--ff-display); font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:.82rem;
  color:var(--cream); padding:.8em 1.3em; border-radius:999px;
  border:1px solid color-mix(in oklab,var(--gold) 50%,transparent);
  background:color-mix(in oklab,var(--gold) 8%,transparent);
  transition:transform .25s var(--ease-out), background .25s, box-shadow .25s;
}
.brew__btn:hover{ transform:translateY(-2px); background:color-mix(in oklab,var(--gold) 18%,transparent); box-shadow:var(--glow-gold); }
.brew__btn .cup{ width:1.3em; height:1.3em; color:var(--gold); }
.brew.done{ display:none; }

/* Scroll-Hinweis */
.scrollhint{ position:absolute; left:50%; bottom:1.4rem; translate:-50% 0; z-index:3;
  display:grid; gap:.4rem; justify-items:center; color:var(--text-dim);
  font-family:var(--ff-display); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; }
.scrollhint .bar{ width:1px; height:38px; background:linear-gradient(var(--gold),transparent); }
@media (prefers-reduced-motion:no-preference){ .scrollhint .bar{ animation:drip 1.8s var(--ease) infinite; transform-origin:top; } }
@keyframes drip{ 0%{transform:scaleY(.2);opacity:0} 30%{opacity:1} 100%{transform:scaleY(1);opacity:0} }

/* Intro-Overlay (kurzes „Cold-Start" bevor das Video läuft) */
.intro-skip{ position:absolute; right:1.1rem; bottom:1.1rem; z-index:5; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-dim); border-bottom:1px solid transparent; }
.intro-skip:hover{ color:var(--cream); border-color:var(--gold); }

/* ===== Gemeinsame Sektions-Deko ========================================= */
.plate{
  display:inline-block; font-family:var(--ff-display); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; font-size:.8rem; color:var(--cream);
  padding:.6em 1.2em; border-radius:6px; position:relative;
  background:linear-gradient(180deg, color-mix(in oklab,var(--teal) 22%,var(--surface)), var(--deep));
  border:1px solid color-mix(in oklab,var(--gold) 30%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--gold) 20%,transparent), 0 10px 30px #0006;
}
.plate::before,.plate::after{ content:""; position:absolute; top:50%; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff7df,#a87f2c); translate:0 -50%; }
.plate::before{ left:8px; } .plate::after{ right:8px; }

.amp-divider{ display:flex; align-items:center; gap:1rem; color:color-mix(in oklab,var(--gold) 60%,transparent);
  justify-content:center; margin-block:1.5rem; }
.amp-divider::before,.amp-divider::after{ content:""; height:1px; flex:1; max-width:160px;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--gold) 50%,transparent),transparent); }
.amp-mark{ display:grid; place-items:center; width:1.8rem; height:1.8rem; color:#23170a; font-weight:900;
  font-family:var(--ff-display); background:linear-gradient(180deg,#ffd877,#d9a441);
  clip-path:polygon(50% 92%,4% 8%,96% 8%); }

/* ===== 2 · DAS HERZ (Synopsis + Kaffeemaschine) ========================= */
.heart{ background:linear-gradient(180deg,var(--deep),var(--bg) 60%,var(--deep)); }
.heart__grid{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:880px){ .heart__grid{ grid-template-columns:1.2fr .8fr; } }
.heart__text p{ margin-top:1.1rem; max-width:46ch; }
.heart__text .pull{ font-family:var(--ff-display); font-weight:700; color:var(--cream);
  font-size:clamp(1.3rem,1rem + 1.4vw,1.9rem); line-height:1.2; margin-top:1.4rem; }
.script-line{ font-family:var(--ff-script); font-size:clamp(2rem,1.4rem + 3vw,3.4rem); color:var(--gold);
  line-height:1; margin-top:.4rem; }

/* Kaffeemaschine (klickbar) */
.machine{ display:block; width:min(100%,330px); margin-inline:auto; position:relative;
  background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .3s var(--ease-out), filter .3s var(--ease-out); }
.machine:hover{ transform:translateY(-3px); filter:drop-shadow(0 14px 30px color-mix(in oklab,var(--gold) 30%,transparent)); }
.machine:active{ transform:translateY(-1px) scale(.99); }
.machine svg{ width:100%; height:auto; overflow:visible; }
.machine-hint{ transition:color .3s; }
.machine:hover + .machine-hint{ color:var(--gold); }
.steam{ position:absolute; left:50%; top:6%; translate:-50% 0; width:120px; height:140px; pointer-events:none; z-index:2; opacity:1; }
.steam span{ position:absolute; bottom:0; left:50%; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle,color-mix(in oklab,#fff 70%,transparent),transparent 70%);
  filter:blur(3px); opacity:0; }
@media (prefers-reduced-motion:no-preference){
  .machine.on .steam span{ animation:rise 3.4s ease-in infinite; }
  .machine.on .steam span:nth-child(2){ animation-delay:1.1s; left:38%; }
  .machine.on .steam span:nth-child(3){ animation-delay:2.2s; left:62%; }
}
@keyframes rise{ 0%{ transform:translate(-50%,0) scale(.6); opacity:0 }
  25%{opacity:.7} 100%{ transform:translate(-50%,-130px) scale(2.4); opacity:0 } }
.cupfill{ transform:scaleY(0); transform-box:fill-box; transform-origin:bottom; transition:transform 1.7s var(--ease); }
.machine.on .cupfill{ transform:scaleY(1); }
html:not(.anim) .cupfill{ transform:scaleY(1); }

/* ===== 3 · TELEFON / WAS LETZTER PREIS =================================== */
.phone{ background:var(--deep); }
.call{ max-width:680px; margin-inline:auto; border-radius:var(--radius); overflow:hidden;
  background:color-mix(in oklab,var(--surface) 70%,var(--deep)); border:var(--line);
  box-shadow:0 30px 80px #0007; }
.call__head{ display:flex; align-items:center; gap:.7rem; padding:.9rem 1.2rem;
  background:color-mix(in oklab,var(--teal) 18%,var(--deep)); border-bottom:var(--line);
  font-family:var(--ff-display); letter-spacing:.12em; text-transform:uppercase; font-size:.74rem; color:var(--text-dim); }
.call__dot{ width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 10px var(--red); }
.call__body{ padding:1.4rem clamp(1rem,3vw,2rem); display:grid; gap:.85rem; font-size:1.08rem; }
.line{ display:flex; gap:.7rem; align-items:flex-start; opacity:0; transform:translateY(8px); }
.line.in{ opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }
.line .who{ flex:0 0 auto; font-family:var(--ff-display); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); padding-top:.28em; min-width:5.4em; }
.line.them .who{ color:var(--text-dim); }
.line p{ margin:0; }
.line.them p{ color:var(--text-dim); }
.call__punch{ font-family:var(--ff-display); font-weight:700; color:var(--cream); font-size:1.2rem;
  margin-top:.4rem; padding-top:1rem; border-top:var(--line); }

/* ===== 4 · DIE 15 KAPITEL =============================================== */
.chapters{ background:linear-gradient(180deg,var(--deep),var(--bg)); overflow:hidden; }
.chap-grid{ list-style:none; padding:0; display:grid; gap:clamp(1rem,2.4vw,1.6rem); grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); margin-top:2.5rem; }
.chap{ position:relative; padding:1.5rem 1.4rem 1.4rem; border-radius:12px;
  background:linear-gradient(180deg,#efe6cf,#e3d7b8);
  color:#1c2433; box-shadow:0 16px 40px #0007, inset 0 1px 0 #fff8;
  transform:rotate(var(--rot,-1deg)); transition:transform .4s var(--ease-out), box-shadow .4s; isolation:isolate; }
.chap:nth-child(even){ --rot:1.2deg; }
.chap:nth-child(3n){ --rot:-.6deg; }
.chap:hover{ transform:rotate(0deg) translateY(-6px); box-shadow:0 26px 60px #0009, inset 0 1px 0 #fff8; }
.chap::after{ /* Schnur-Loch des Preisschilds */ content:""; position:absolute; top:.7rem; right:.9rem; width:14px; height:14px;
  border-radius:50%; background:radial-gradient(circle at 40% 40%,#0003,#0006); box-shadow:inset 0 0 0 2px #b9a96f; }
.chap__nr{ font-family:var(--ff-display); font-weight:900; font-size:.78rem; letter-spacing:.18em; color:#9c6f28; }
.chap__title{ font-family:var(--ff-display); font-weight:700; color:#16243a; font-size:1.18rem; line-height:1.12; margin:.3rem 0 .55rem; }
.chap__teaser{ font-size:.98rem; line-height:1.5; color:#3a4456; }
.chap--finale{ background:linear-gradient(180deg,#16243a,#0e1a2b); color:var(--cream); box-shadow:0 16px 50px #000a, var(--glow-gold); }
.chap--finale .chap__nr{ color:var(--gold); }
.chap--finale .chap__title{ color:var(--gold); }
.chap--finale .chap__teaser{ color:color-mix(in oklab,var(--cream) 85%,var(--text)); }

/* Möwe */
.gull{ position:absolute; top:8%; left:-6%; width:62px; color:var(--cream); z-index:3; pointer-events:none; opacity:.85; }
@media (prefers-reduced-motion:no-preference){ .gull{ animation:fly 26s linear infinite; } }
@keyframes fly{ 0%{ transform:translate(0,0) } 50%{ transform:translate(60vw,-22px) } 100%{ transform:translate(120vw,10px) } }
.gull svg{ width:100%; height:auto; }
@media (prefers-reduced-motion:no-preference){ .gull .wing{ animation:flap 1.1s ease-in-out infinite; transform-origin:center; } }
@keyframes flap{ 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(.55) } }

/* ===== 5 · DIE MENSCHEN ================================================= */
.people{ background:var(--deep); }
.people-grid{ display:grid; gap:clamp(1rem,2.4vw,1.6rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); margin-top:2.5rem; }
.person{ display:flex; flex-direction:column; padding:1.6rem 1.4rem; border-radius:14px; background:linear-gradient(180deg,color-mix(in oklab,var(--surface) 75%,var(--deep)),var(--deep));
  border:var(--line); transition:transform .4s var(--ease-out), border-color .4s; }
.person:hover{ transform:translateY(-6px); border-color:color-mix(in oklab,var(--gold) 55%,transparent); }
.person__role{ font-family:var(--ff-display); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.person__name{ font-family:var(--ff-display); font-weight:700; color:var(--cream); font-size:1.35rem; margin:.25rem 0 .1rem; }
.person__line{ color:var(--text-dim); margin-top:.7rem; font-size:1rem; }
.person__sig{ font-family:var(--ff-script); color:var(--gold); font-size:2rem; line-height:.8; margin-top:auto; padding-top:1.1rem; }
.person--mem{ border-color:color-mix(in oklab,var(--gold) 40%,transparent); background:linear-gradient(180deg,color-mix(in oklab,var(--teal) 14%,var(--deep)),var(--deep)); }
.person--mem .person__role{ color:color-mix(in oklab,var(--cream) 70%,var(--gold)); }

/* ===== 6 · STIMMEN ====================================================== */
.voices{ background:linear-gradient(180deg,var(--deep),var(--bg)); }
.voice-grid{ display:grid; gap:clamp(1rem,2.4vw,1.6rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); margin-top:2.2rem; }
.voice{ position:relative; padding:1.8rem 1.5rem 1.5rem; border-radius:12px; background:color-mix(in oklab,var(--surface) 70%,var(--deep)); border:var(--line); }
.voice__q{ font-family:var(--ff-body); font-style:italic; font-size:1.18rem; color:var(--cream); line-height:1.4; }
.voice__src{ margin-top:.9rem; font-family:var(--ff-display); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.voice__stamp{ position:absolute; top:-12px; right:14px; rotate:-8deg; font-family:var(--ff-display); font-weight:900;
  letter-spacing:.12em; font-size:.74rem; color:var(--red); border:2px solid var(--red); border-radius:6px; padding:.2em .5em;
  opacity:.85; background:color-mix(in oklab,var(--red) 8%,transparent); }
.voices__note{ text-align:center; color:var(--text-dim); font-size:.92rem; margin-top:1.6rem; }

/* ===== 7 · AUTOR + FEIERABEND / HAGGLE =================================== */
.author{ background:radial-gradient(120% 90% at 50% 0%, color-mix(in oklab,var(--teal) 16%,var(--deep)), var(--deep) 70%); }
.author__grid{ display:grid; gap:clamp(1.6rem,4vw,3rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:820px){ .author__grid{ grid-template-columns:.8fr 1.2fr; } }
.author__photo{ position:relative; width:min(100%,320px); margin-inline:auto; }
.author__photo img{ border-radius:16px; border:1px solid color-mix(in oklab,var(--gold) 30%,transparent); box-shadow:0 24px 60px #000a; }
.author__photo::after{ content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  box-shadow:inset 0 0 60px color-mix(in oklab,var(--deep) 70%,transparent); }
.author__note p{ margin-top:1rem; max-width:52ch; }
.author__sig{ font-family:var(--ff-script); color:var(--gold); font-size:3.2rem; line-height:.7; margin-top:.8rem; }
.dedication{ margin-top:2.4rem; padding:1.4rem 1.6rem; border-left:3px solid var(--gold);
  background:color-mix(in oklab,var(--surface) 50%,transparent); border-radius:0 12px 12px 0; }
.dedication .script{ color:var(--gold); font-size:1.9rem; line-height:1; }
.dedication p{ color:var(--text-dim); font-style:italic; margin-top:.5rem; }

/* Feierabend-Neon */
.feierabend{ text-align:center; }
.feierabend .open-sign{ font-size:clamp(2.2rem,1.4rem + 4vw,4rem); }
.feierabend__tag{ color:var(--text-dim); letter-spacing:.3em; text-transform:uppercase; font-family:var(--ff-display); font-size:.74rem; margin-top:.6rem; }

/* Preisschild zum Handeln */
.haggle{ display:grid; justify-items:center; gap:1.2rem; margin-top:2.6rem; }
.tag{
  position:relative; width:min(92vw,360px); padding:2rem 1.6rem 1.7rem; user-select:none;
  background:linear-gradient(178deg,#f4ecd6,#e3d7b8); color:#16243a; border-radius:10px;
  box-shadow:0 22px 60px #000a, inset 0 1px 0 #fff; transform-origin:top center;
  border:1px solid #c9bd95;
}
.tag::before{ /* Loch + Schnur */ content:""; position:absolute; top:12px; left:50%; translate:-50% 0; width:20px; height:20px;
  border-radius:50%; background:radial-gradient(circle at 40% 40%,#0004,#0007); box-shadow:inset 0 0 0 3px #b9a96f, 0 2px 0 #fff8; }
.tag__label{ font-family:var(--ff-display); font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; color:#9c6f28; margin-top:.8rem; text-align:center; }
.tag__price{ font-family:var(--ff-display); font-weight:900; font-size:clamp(2.6rem,2rem + 4vw,4rem); line-height:1; text-align:center; color:#16243a; }
.tag__price .cur{ font-size:.5em; vertical-align:super; }
.tag__prices{ list-style:none; padding:0; margin:.7rem 0 .3rem; display:grid; gap:.1rem; }
.tag__prices li{ display:flex; justify-content:space-between; align-items:baseline; gap:1.2rem;
  padding:.44rem .25rem; border-bottom:1px dashed #c9bd95; }
.tag__prices li:last-child{ border-bottom:0; }
.tag__prices li span{ font-family:var(--ff-body); font-size:1rem; color:#5a655e; }
.tag__prices li b{ font-family:var(--ff-display); font-weight:900; color:#16243a; white-space:nowrap;
  font-size:clamp(1.3rem,1rem + 1.4vw,1.7rem); }
.tag__hint{ text-align:center; font-size:.86rem; color:#5a655e; margin-top:.5rem; }
.tag__grab{ cursor:grab; touch-action:none; }
.tag__grab:active{ cursor:grabbing; }
.tag.is-front{ }
/* Rückseite (Auflösung -> Amazon) */
.tag__back{ display:grid; gap:1rem; justify-items:center; }
.haggle__quip{ min-height:2.4em; max-width:34ch; text-align:center; font-style:italic; color:var(--cream); }
.haggle__quip .who{ font-family:var(--ff-display); font-style:normal; color:var(--gold); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; display:block; margin-top:.3rem; }
.haggle__tap{ /* Mobile/Reduced-Motion Fallback-Button */ }

/* Spotify-Hörprobe (2-Klick) */
.listen{ display:grid; justify-items:center; gap:.7rem; width:100%; margin-top:2.6rem; padding-top:2rem;
  border-top:1px solid color-mix(in oklab,var(--gold) 18%,transparent); }
.listen__eyebrow{ font-family:var(--ff-display); font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  font-size:.72rem; color:var(--gold); }
.listen__load{ font-size:.9rem; }
.listen__load .ic{ color:#1DB954; width:1.25em; height:1.25em; }
.listen__hint{ font-size:.8rem; color:var(--text-dim); max-width:46ch; text-align:center; line-height:1.5; }
.listen__hint a{ color:var(--gold); text-decoration:underline; }
.listen__frame{ width:min(100%,560px); }
.listen__frame iframe{ display:block; width:100%; box-shadow:0 18px 50px #0009; border-radius:12px; }

/* ===== FOOTER =========================================================== */
.foot{ background:var(--deep); border-top:var(--line); padding-block:3rem 2rem; }
.foot__grid{ display:flex; flex-wrap:wrap; gap:1.4rem 2.5rem; align-items:center; justify-content:space-between; }
.foot__links{ display:flex; flex-wrap:wrap; gap:1.2rem; font-size:.9rem; color:var(--text-dim); }
.foot__links a:hover{ color:var(--gold); }
.foot__fine{ color:var(--text-dim); font-size:.82rem; margin-top:1.4rem; max-width:60ch; }

/* ===== EASTER EGG · CRT mobile.de ======================================= */
.crt-launch{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.6rem; font-size:.82rem;
  color:var(--text-dim); border-bottom:1px dashed color-mix(in oklab,var(--gold) 40%,transparent); }
.crt-launch:hover{ color:var(--gold); }
.modal{ position:fixed; inset:0; z-index:160; display:grid; place-items:center; padding:1.2rem;
  background:color-mix(in oklab,#000 72%,transparent); opacity:0; pointer-events:none; transition:opacity .35s var(--ease); }
.modal.open{ opacity:1; pointer-events:auto; }
.modal__close{ position:absolute; top:1rem; right:1.1rem; width:2.4rem; height:2.4rem; border-radius:50%;
  background:#0008; color:#fff; font-size:1.2rem; display:grid; place-items:center; border:1px solid #fff3; }
.crt{ width:min(92vw,760px); background:#0d1410; border-radius:18px; padding:18px; box-shadow:0 40px 120px #000c, inset 0 0 0 6px #1c241c; }
.crt__screen{ position:relative; background:#0a120d; border-radius:10px; overflow:hidden; aspect-ratio:4/3;
  box-shadow:inset 0 0 80px #000d; }
.crt__screen::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 2px,#0006 2px 3px);
  mix-blend-mode:overlay; }
.crt__screen::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:10px;
  box-shadow:inset 0 0 60px #0008; background:radial-gradient(120% 110% at 50% 50%, transparent 70%, #0007 100%); }
.mobilede{ position:absolute; inset:0; overflow:auto; font-family:"Courier New",monospace; color:#bfe3c8; padding:0; }
.mobilede__bar{ position:sticky; top:0; background:linear-gradient(#1f5a86,#15466b); color:#fff; padding:.5rem .7rem; font-weight:bold; display:flex; gap:.6rem; align-items:center; }
.mobilede__logo{ background:#ff7a00; color:#003; padding:.05em .4em; border-radius:3px; font-weight:900; }
.mobilede__listing{ padding:.7rem; display:grid; gap:.6rem; }
.mde-card{ display:grid; grid-template-columns:96px 1fr; gap:.7rem; background:#0f1a13; border:1px solid #1f3a28; border-radius:6px; padding:.5rem; }
.mde-card img{ border-radius:4px; width:96px; height:72px; object-fit:cover; }
.mde-card h4{ font-family:"Courier New",monospace; color:#eafff0; font-size:.92rem; }
.mde-card .price{ color:#7fff9e; font-weight:bold; }
.mde-card .meta{ color:#6fae82; font-size:.78rem; }
.mobilede .probefahrt{ margin:.4rem .7rem 1rem; }

/* ===== EASTER EGG · Nokia ================================================ */
.nokia-btn{ position:fixed; left:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:95;
  width:46px; height:74px; border-radius:8px; background:linear-gradient(180deg,#2a3340,#161c25);
  border:1px solid #0008; box-shadow:0 10px 24px #0008, inset 0 1px 0 #fff2; display:grid; place-items:center;
  opacity:0; transform:translateY(20px); transition:opacity .5s var(--ease), transform .5s var(--ease-out); }
.nokia-btn.show{ opacity:1; transform:none; }
.nokia-btn:hover{ transform:translateY(-3px); }
.nokia-btn .scr{ width:30px; height:22px; border-radius:3px; background:#3d5a3d; box-shadow:inset 0 0 6px #000a; }
.nokia-btn.ring{ animation:buzz .25s linear 6; }
@keyframes buzz{ 0%,100%{transform:translate(0,0)} 25%{transform:translate(-2px,1px)} 75%{transform:translate(2px,-1px)} }
@media (prefers-reduced-motion:reduce){ .nokia-btn.ring{ animation:none; } }
.toast{ position:fixed; left:50%; bottom:6.5rem; translate:-50% 0; z-index:170; background:#0e1a2b; color:var(--cream);
  border:1px solid color-mix(in oklab,var(--gold) 45%,transparent); padding:.7rem 1.1rem; border-radius:10px;
  font-size:.9rem; box-shadow:0 14px 40px #0009; opacity:0; pointer-events:none; transition:opacity .3s; }
.toast.show{ opacity:1; }

/* ===== Responsives Feintuning =========================================== */
@media (max-width:640px){
  :root{ --pad-section:clamp(3.5rem,12vw,6rem); }
  .nav{ padding-inline:1rem; }
}