/* Farbschicht „Neon“ (seit 1.7.0, 2026-11-01): upup.berlin-Farbschema — Neon-Pink #ff0360 auf Schwarz und auf Weiß.
   Die Startseite wechselt je Abschnitt: Hero (dunkel) → Geräte (hell) → Stimmen (dunkel) → Ablauf (hell) → Features (dunkel)
   → Installation (hell) → Preise (dunkel) → FAQ (hell) → Kompatibilität (dunkel).
   Liegt über site.css; dort sind die festen Orange-Werte (Tönungen, Verläufe) bereits auf Pink umgestellt.
   Das Review-Portal selbst (lib.php/theme.php) behält sein Orange. */

/* ── Dunkel (Grundton der ganzen Seite) ── */
:root{
  --bg:#0a0a0a; --bg2:#141414; --card:#141414; --panel2:#1d1d1d; --line:#272727; --line2:#202020;
  --ctl:#3a3a3a; --ctl-h:#555;
  --acc:#ff0360; --acc-dark:#ff0360; --acc-soft:#ff5c95;
  --t1:#fafafa; --t2:#c9c9c9; --t3:#a3a3a3; --t4:#8c8c8c;
}
.home{--ink:#0a0a0a}
header{background:rgb(10 10 10 / .82)}
/* Knöpfe: Schwarz auf Neon-Pink (5,4:1) — Weiß auf diesem Pink käme nur auf 3,9:1 */
.btn{color:#0a0a0a;font-weight:600}
.btn:hover{background:#ff2b7c}
.btn-ghost{color:var(--t1);font-weight:500}
.btn-ghost:hover{background:var(--panel2)}

/* ── Hell: Weiß mit Pink. Text-Pink etwas tiefer (#e8004f, 4,6:1 auf Weiß), damit Links und kleine Labels lesbar bleiben ── */
.home :is(.c-devs,.c-how,#install,#faq){
  --bg:#ffffff; --bg2:#f5f5f6; --card:#ffffff; --panel2:#eeeef0; --line:#e3e3e6; --line2:#ececef;
  --ctl:#cfcfd4; --ctl-h:#9d9da5;
  --acc:#e8004f; --acc-dark:#ff0360; --acc-soft:#ff5c95;
  --t1:#0a0a0a; --t2:#38383d; --t3:#55555c; --t4:#6b6b72;
  --ok:#11864a; --bad:#d2342c;                      /* Grün/Rot der dunklen Seite sind auf Weiß zu blass */
  background:var(--bg); color:var(--t1); color-scheme:light;
}
/* Abschnitte stehen jetzt als eigene Farbflächen: jeder bekommt Luft oben und unten */
.home :is(.c-devs,.c-voices-sec,.c-how,#features,#install,#pricing,#faq,#compatibility){padding-block:clamp(80px,10vw,144px)}
.home #pricing{border:0;background:var(--bg)}
.home .tier{background:var(--bg2);border-color:var(--line)}
.home .tier.hot{background:var(--bg);border-color:var(--acc-dark);box-shadow:0 18px 44px -18px rgb(255 3 96 / .35)}
.home table.compat{background:var(--bg)}
footer{margin-top:0;background:var(--bg)}
/* Installationsblock auf Weiß in vollem Neon-Pink (das tiefere Text-Pink des hellen Abschnitts wäre hier zu stumpf) */
.home #install .c-ibox{background:var(--acc-dark)}
.home #install .c-btn-ink{color:#fafafa}     /* Knopf bleibt schwarz mit heller Schrift, auch im hellen Abschnitt */

/* Geräte auf Weiß: Schatten weicher, sonst wirken sie schmutzig */
.home .c-devs{--hw-sh:rgb(0 0 0 / .35);--hw-sh2:rgb(20 0 8 / .38)}
/* Nachgebaute App-Pille bleibt dunkel wie im Original — eigene Textfarben unabhängig vom Abschnitt */
.home .c-pill{--t1:#fafafa;--t2:#c9c9c9;--t3:#a3a3a3;color:var(--t1)}
/* Feature-Bühnen: auf Weiß nur ein Hauch Pink */
.home .c-how .c-fig{background:radial-gradient(90% 80% at 88% 0%,rgb(255 3 96 / .08),transparent 62%),var(--bg2)}

/* ── Hero bildfüllend: der Set-Loop füllt den ganzen ersten Bildschirm, Text unten links darüber ── */
.home .c-hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:calc(100svh - 64px);overflow:hidden;background:#000}
.home .c-shot,.home .c-shot-frame{position:absolute;inset:0}
.home .c-shot{z-index:0}     /* Video auf Ebene 0, Text darüber auf 1 — keine negative Ebene (iOS-Safari zeigt das Video dort nicht an) */
.home .c-shot-frame{aspect-ratio:auto;height:auto;border-radius:0;background:#000;animation:none!important}     /* kein Einblenden über Deckkraft 0 — WebKit hält unsichtbare Videos an */
.home .c-shot .c-clip :is(img,video){object-position:50% 40%}
.home .c-clip picture{display:contents}
/* Schleier: unten und links dunkel für die Schrift, oben rechts bleibt das Bild offen */
.home .c-shot-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgb(0 0 0 / .92) 0%,rgb(0 0 0 / .6) 38%,rgb(0 0 0 / .1) 70%,rgb(0 0 0 / .25) 100%)}
.home .c-shot figcaption{position:absolute;right:16px;top:14px;padding:0;max-width:30ch;text-align:right;
  color:rgb(255 255 255 / .72);font-size:12.5px;text-shadow:0 1px 3px rgb(0 0 0 / .6)}
@media (max-width:899px){.home .c-shot figcaption{display:none}}     /* Handy: Bildunterschrift weg (User 1.11.) */
.home .c-hero-copy{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:120px 24px 40px}
.home .c-lead{color:#e4e4e4}
.home .c-hero .btn-ghost{border-color:rgb(255 255 255 / .45);background:rgb(0 0 0 / .4)}     /* kein backdrop-filter über dem Video (WebKit) */
.home .c-hero .btn-ghost:hover{background:rgb(255 255 255 / .12);border-color:#fff}
@media (min-width:900px){
  .home .c-hero{display:flex;max-width:none;margin:0;padding:0;grid-template-columns:none}
  .home .c-shot{grid-column:auto}
  .home .c-shot-frame{height:auto;aspect-ratio:auto;border-radius:0}
  .home .c-shot .c-clip :is(img,video){object-position:50% 42%}
  .home .c-shot-frame::after{background:
    linear-gradient(90deg,rgb(0 0 0 / .88) 0%,rgb(0 0 0 / .62) 34%,rgb(0 0 0 / .12) 62%,transparent 80%),
    linear-gradient(0deg,rgb(0 0 0 / .55) 0%,transparent 40%)}
  .home .c-shot figcaption{right:24px;top:auto;bottom:22px;contain:none;width:max-content}
  .home .c-hero-copy{grid-column:auto;max-width:var(--maxw);padding:96px 24px clamp(48px,9svh,96px)}
  .home .c-hero-copy>*{max-width:600px}
  .home .c-h1{font-size:min(96px,12svh)}
}
@media (min-width:900px) and (max-height:800px){
  .home .c-hero{padding:0}
  .home .c-hero-copy{padding-top:72px}
  .home .c-h1{font-size:min(96px,10.5svh)}
}

/* Handy/Tablet hochkant: die Remote steht mittig über dem Upload-Pfeil */
@media (max-width:899px){.home .c-rc-body{margin-inline:auto}}