/* ==========================================================================
   SLABHIT, Stilbasis
   --------------------------------------------------------------------------
   Uebernommen aus dem Gestaltungspaket vom 18.08.2026. Schriftgroessen,
   Abstaende, Farben und Radien stammen unveraendert von dort, weil sie
   durchdacht aufeinander abgestimmt sind. Ergaenzt wurde nur, was das
   Paket nicht kennt: die Wissensseiten und die Artikelblöcke.

   Nacht ist der Standard, hell wird ueber [data-theme="light"] gesetzt.
   Die Rangfolge entscheidet assets/js/slabhit.js, nicht dieses Blatt.
   ========================================================================== */

/* ============================================================
   TOKENS — Variante C "Bühne": eine Seite wie die Minute, bevor
   eine Show live geht. Marken-Navy als Bühne, Serifen fürs
   Auktionshaus, eine einzige laute Fläche: die Show selbst.
   ============================================================ */
:root{
  --brand-navy:#0F1A38; --brand-cyan:#01C8F1; --brand-pink:#F33E9D; --brand-yellow:#FFD93E;

  /* Nacht = Standard */
  --color-bg:#0F1A38;
  --color-bg-deep:#080f26;         /* der Vorhang: dunkelste, ruhigste Fläche */
  --color-surface:#16244d;
  --color-surface-2:#1c2d5e;
  --color-line:#2a3d78;
  --color-ink:#f5f8fd;
  --color-ink-muted:#a3b4dc;
  --color-accent:#01C8F1;
  --color-accent-ink:#06263a;
  --color-pink:#ff77c4;
  --color-pink-strong:#F33E9D;
  --color-hit:#FFD93E;
  --color-hit-ink:#3a2c00;
  --shadow-card:0 30px 80px -30px rgba(0,0,0,.65);
  --vorhang-spot:radial-gradient(560px 400px at 50% 6%,rgba(255,255,255,.055),transparent 70%);
  --logo-schatten:drop-shadow(0 30px 30px rgba(3,7,20,.55));
  --boden-schatten:rgba(2,5,16,.65);

  --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-full:999px;
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2.5rem; --space-5:4rem; --space-6:7rem;
  --text-xs:.78rem; --text-sm:.92rem; --text-base:1.03rem;
  --text-xl:clamp(1.8rem,4.4vw,2.8rem); --text-2xl:clamp(2.6rem,7vw,4.6rem);
  --width-content:1140px;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-serif:Georgia,"Times New Roman",serif;
}
[data-theme="light"]{
  --color-bg:#d9e2ec;
  --color-bg-deep:#e9eff7;         /* heller Vorhang, gedeckt statt weiß */
  --vorhang-spot:radial-gradient(560px 400px at 50% 6%,rgba(15,26,56,.05),transparent 70%);
  --logo-schatten:drop-shadow(0 22px 24px rgba(15,26,56,.26));
  --boden-schatten:rgba(15,26,56,.32);
  --color-surface:#f4f8fc;
  --color-surface-2:#dce5ef;
  --color-line:#bfcedd;
  --color-ink:#0F1A38;
  --color-ink-muted:#4f6080;
  --color-accent:#087f9c;
  --color-accent-ink:#ffffff;
  --color-pink:#bd1070;
  --color-hit:#f2c200;
  --shadow-card:0 30px 80px -40px rgba(15,26,56,.35)}

/* Namensbruecken fuer die Paket-Stylesheets der Unterseiten (beta-tester,
   verkaeufer-werden, Rechtsseiten): dort heissen die Token --line, --muted,
   --bg, --surface, --ink, --accent, --pink, --gelb. Die Aliase zeigen auf
   die echten Token und folgen dem Theme-Wechsel, weil sie am selben Element
   (html) aufgeloest werden. Ohne sie verlieren die Formularseiten Raender,
   Flaechen und Knoepfe: genau der Schaden vom 18.08.2026. */
:root{
  --line:var(--color-line); --muted:var(--color-ink-muted);
  --bg:var(--color-bg); --bg-deep:var(--color-bg-deep);
  --surface:var(--color-surface); --surface-2:var(--color-surface-2);
  --ink:var(--color-ink);
  --accent:var(--color-accent);
  --pink:var(--brand-pink); --gelb:var(--brand-yellow);

  /* Zweite Bruecke, fuer den Bestand VOR dem Paket: die Unterseiten wurden
     gegen die alte Tailwind-Skala geschrieben (Werte aus Commit 4b16c30).
     Der Paket-Umbau hat die Skala gewechselt, die Seiten behielten die
     Namen. Ohne diese Zeilen fallen Abstaende auf 0 und Farben auf inherit. */
  --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
  --text-lg:1.1875rem;
  --text-muted:var(--color-ink-muted);
  --text-faint:color-mix(in srgb,var(--color-ink-muted) 72%,transparent);
  --weight-bold:700;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.theme-anim body, html.theme-anim body *{transition:background-color .9s ease,color .9s ease,border-color .9s ease}
body{margin:0;font-family:var(--font-sans);background:var(--color-bg);color:var(--color-ink);
  line-height:1.6;font-size:var(--text-base);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2{font-family:var(--font-sans);font-weight:830;font-style:italic;letter-spacing:-.032em;margin:0 0 var(--space-2);line-height:1.06}
h1{font-size:var(--text-2xl)}
h2{font-size:var(--text-xl)}
h3{margin:0 0 var(--space-2);font-size:1.1rem;font-weight:720;line-height:1.3}
p{margin:0 0 var(--space-2)}
a{color:var(--color-accent);text-underline-offset:3px}
a:hover{color:var(--color-ink)}
:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--width-content);margin:0 auto;padding:0 var(--space-3)}
section{padding:var(--space-6) 0}
.kicker{font-size:var(--text-xs);font-weight:780;letter-spacing:.2em;text-transform:uppercase;color:var(--color-pink);margin:0 0 var(--space-2)}
.lead{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--color-ink-muted);max-width:60ch}
.leise{color:var(--color-ink-muted);font-size:var(--text-sm)}
.hr{border:0;border-top:1px solid var(--color-line);margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.9rem 1.7rem;
  border-radius:var(--radius-full);font-weight:740;font-size:1rem;text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:transform .15s ease,filter .15s ease;color:var(--color-ink)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn-primary{background:var(--color-accent);color:var(--color-accent-ink)}
.btn-outline{border-color:var(--color-line);background:transparent}
.btn-outline:hover{border-color:var(--color-accent)}

.app-weg{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.app-btn{flex:1 1 220px;display:flex;flex-direction:column;gap:.1rem;text-decoration:none;
  border-radius:var(--radius-md);padding:.95rem 1.25rem;border:1px solid var(--color-line);
  background:var(--color-surface);transition:transform .15s ease,border-color .15s ease}
.app-btn:hover{transform:translateY(-2px);border-color:var(--color-accent)}
.app-btn .zeile1{font-size:var(--text-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--color-ink-muted);font-weight:740}
.app-btn .zeile2{font-size:1.14rem;font-weight:790;color:var(--color-ink)}
.app-btn.ios{background:var(--color-accent);border-color:transparent}
.app-btn.ios .zeile1{color:var(--color-accent-ink);opacity:.75}
.app-btn.ios .zeile2{color:var(--color-accent-ink)}

/* Kopf */
.top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--color-bg-deep) 88%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-line)}
.top-in{max-width:var(--width-content);margin:0 auto;padding:.55rem var(--space-3);display:flex;align-items:center;gap:var(--space-3)}
.top-logo{height:30px;width:auto;display:block}
.top-nav{margin-left:auto;display:flex;gap:var(--space-3);align-items:center}
.top-nav a{color:var(--color-ink-muted);text-decoration:none;font-size:var(--text-sm);font-weight:650;white-space:nowrap}
.top-nav a:hover{color:var(--color-ink)}
.mini-count{font-variant-numeric:tabular-nums;font-weight:760;font-size:.82rem;white-space:nowrap;
  border:1px solid var(--color-line);border-radius:var(--radius-full);padding:.3rem .8rem}
.theme-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--color-line);background:var(--color-surface);
  cursor:pointer;display:grid;place-items:center;color:var(--color-ink);flex:0 0 auto}
.theme-btn:hover{border-color:var(--color-accent)}
.theme-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
[data-theme="dark"] .nur-hell{display:none}
[data-theme="light"] .nur-dunkel{display:none}
@media(max-width:1020px){.top-nav a.weg{display:none}}

/* ============ Hero: der Vorhang ============
   Das Logo bekommt eine leere Bühne. Ein Spot von oben, sonst nichts.
   Der Vorhang bleibt in beiden Themen Navy, damit das Logo nie
   seine Fläche verliert. */
.vorhang{background:var(--color-bg-deep);color:var(--color-ink);text-align:center;
  padding:calc(var(--space-6) + 2rem) 0 var(--space-6);position:relative;overflow:hidden}
.vorhang::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--vorhang-spot)}
.vorhang .lead{color:var(--color-ink-muted);margin-left:auto;margin-right:auto}
.vorhang-dach{font-size:var(--text-xs);font-weight:760;letter-spacing:.28em;text-transform:uppercase;color:var(--color-ink-muted);margin:0 0 var(--space-3)}
.hero-logo{width:min(540px,86vw);height:auto;margin:0 auto .4rem;position:relative;z-index:1;
  filter:var(--logo-schatten);
  animation:auftritt 1.4s ease both,logo-schwebt 7s ease-in-out 1.4s infinite}
@keyframes logo-schwebt{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero-logo-schatten{width:min(320px,56vw);height:22px;border-radius:50%;margin:0 auto var(--space-4);
  background:radial-gradient(closest-side,var(--boden-schatten),transparent 72%);
  animation:schatten-schwebt 7s ease-in-out 1.4s infinite}
@keyframes schatten-schwebt{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.86);opacity:.6}}
[data-theme="light"] .hero-logo{animation:auftritt 1.4s ease both;margin-bottom:var(--space-4);
  filter:drop-shadow(0 12px 16px rgba(15,26,56,.22))}
[data-theme="light"] .hero-logo-schatten{display:none}
@keyframes auftritt{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.cd-ring{position:relative;width:min(210px,58vw);aspect-ratio:1;margin:var(--space-6) auto 0;display:grid;place-items:center}
.cd-ring::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:
    repeating-conic-gradient(var(--color-bg-deep) 0 4deg,transparent 4deg 36deg),
    conic-gradient(var(--brand-pink) var(--cd,200deg),color-mix(in srgb,var(--color-ink) 14%,transparent) 0);
  -webkit-mask:radial-gradient(closest-side,transparent 87%,#000 88%);
  mask:radial-gradient(closest-side,transparent 87%,#000 88%)}
.cd-mitte{text-align:center}
.cd-mitte b{font-size:clamp(2.4rem,7vw,3.2rem);font-weight:830;font-style:italic;line-height:1;font-variant-numeric:tabular-nums}
.cd-mitte span{display:block;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--color-ink-muted);margin-top:.5rem;max-width:14ch;margin-left:auto;margin-right:auto}
.cd-leiste{display:flex;justify-content:center;gap:clamp(1.4rem,5vw,3rem);margin-top:var(--space-3);font-variant-numeric:tabular-nums}
.cd-leiste b{font-size:clamp(1.4rem,3.5vw,1.9rem);font-weight:820;font-style:italic;line-height:1}
.cd-leiste span{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-ink-muted);margin-top:.35rem}
.count-band span{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--color-ink-muted);margin-top:.4rem}
.warten{display:flex;gap:.6rem;flex-wrap:wrap;max-width:560px;margin:var(--space-4) auto 0}
.warten input{flex:1 1 220px;min-width:0;padding:.9rem 1.2rem;border-radius:var(--radius-full);
  border:1px solid var(--color-line);background:var(--color-surface);color:var(--color-ink);font-size:1rem;font-family:inherit}
.warten-erfolg{display:none;border:1px solid var(--color-accent);border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-3);background:var(--color-surface);max-width:560px;margin:var(--space-3) auto 0;text-align:left}
.vorhang .app-weg{max-width:560px;margin:var(--space-3) auto 0}

/* ============ Die Show: eine laute Fläche, mit Absicht ============ */
.show{background:var(--color-bg-deep);color:var(--color-ink);padding-top:0}
.show .wrap{max-width:1280px}
.phone-stage{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.phone-stage .iphone{flex:none}
.iphone{width:min(400px,92vw);aspect-ratio:9/19.2;border-radius:58px;background:#05070f;padding:11px;
  border:1px solid #2a3d78;box-shadow:var(--shadow-card);position:relative}
.insel{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:98px;height:27px;border-radius:999px;background:#05070f;z-index:6}
.buehne{position:relative;width:100%;height:100%;border-radius:48px;overflow:hidden;background:#0c1531;color:#f5f8fd;
  display:flex;flex-direction:column}
.buehne-caption{max-width:56ch;text-align:center;margin-top:var(--space-3)}
.buehne::after{content:"";position:absolute;left:0;right:0;bottom:0;height:36%;z-index:1;pointer-events:none;
  background:linear-gradient(transparent,rgba(5,9,24,.88))}
.i-leiste{position:absolute;left:12px;right:12px;bottom:14px;z-index:4;display:flex;gap:.5rem;align-items:center}
.i-eingabe{flex:1;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.68rem 1rem;
  color:#8fa3d4;font-size:.84rem;background:rgba(8,15,38,.72);white-space:nowrap;overflow:hidden}
.i-bieten{background:var(--brand-pink);color:#fff;border-radius:999px;padding:.68rem 1.3rem;font-weight:820;font-size:.95rem}
/* Umschalter Handy / große Bühne */
.ansicht-schalter{display:flex;border:1px solid var(--color-line);border-radius:999px;overflow:hidden;
  margin:0 auto var(--space-3);width:max-content;background:var(--color-surface)}
.asw{background:transparent;border:0;color:var(--color-ink-muted);padding:.5rem 1.2rem;font-weight:720;
  cursor:pointer;font-size:.88rem;font-family:inherit}
.asw[aria-pressed="true"]{background:var(--color-accent);color:var(--color-accent-ink)}
/* Breite Bühnen-Ansicht */
[data-ansicht="breit"] .iphone{width:100%;aspect-ratio:auto;height:560px;border-radius:var(--radius-lg);
  padding:0;background:transparent;border:0;box-shadow:none}
[data-ansicht="breit"] .insel{display:none}
[data-ansicht="breit"] .buehne{border-radius:var(--radius-lg);border:1px solid #2a3d78;box-shadow:var(--shadow-card)}
[data-ansicht="breit"] .buehne-kopf{padding:.9rem 22px 14px}
[data-ansicht="breit"] .lot-info{left:22px;top:14px}
[data-ansicht="breit"] .produkte{inset:70px 140px 9.5rem}
[data-ansicht="breit"] .buehne-produkt{width:auto;height:auto;max-height:300px;max-width:min(44%,520px)}
[data-ansicht="breit"] .ring{width:clamp(96px,11vw,128px);right:24px;top:18px}
[data-ansicht="breit"] .chat{left:22px;bottom:88px}
[data-ansicht="breit"] .chat{bottom:88px}
[data-ansicht="breit"] .chat span{max-width:320px}
[data-ansicht="breit"] .gebote{right:22px;bottom:88px}
[data-ansicht="breit"] .i-leiste{left:22px;right:22px;bottom:18px;max-width:560px;margin:0 auto}
.buehne::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(58% 74% at 50% 30%,rgba(1,200,241,.14),transparent 70%)}
.buehne-kopf{position:relative;z-index:2;display:flex;align-items:center;gap:.7rem;
  padding:66px 20px 14px;border-bottom:1px solid rgba(255,255,255,.09);font-size:.88rem;font-weight:700}
.buehne-kopf .leise{color:#a3b4dc}
.host-avatar{width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,var(--brand-pink),var(--brand-yellow))}
.buehne-kopf .live-badge{margin-left:auto}
.kopf-titel{color:#a3b4dc;font-weight:640;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.live-badge{display:inline-flex;align-items:center;gap:.45rem;background:var(--brand-pink);color:#fff;
  border-radius:6px;padding:.2rem .65rem;font-size:.74rem;font-weight:820;letter-spacing:.09em}
.live-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:puls 1.6s infinite}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.35}}
.buehne-body{position:relative;flex:1;display:grid;place-items:center;padding:0 var(--space-3) 8rem}
.produkte{position:absolute;inset:60px 0 13.5rem;z-index:2;display:grid;place-items:center}
.buehne-produkt{grid-area:1/1;width:auto;height:auto;max-width:min(66%,260px);max-height:100%;opacity:0;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
@keyframes schweben{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-6px) rotate(.6deg)}}
@property --ring-a{syntax:"<angle>";inherits:false;initial-value:360deg}
@property --ring-c{syntax:"<color>";inherits:false;initial-value:#F33E9D}
.ring{position:absolute;right:16px;top:14px;width:clamp(64px,18vw,80px);aspect-ratio:1;z-index:4;
  border-radius:50%;z-index:2;
  background:
    repeating-conic-gradient(#0c1531 0 3deg,transparent 3deg 36deg),
    conic-gradient(var(--ring-c) var(--ring-a),rgba(255,255,255,.10) 0);
  -webkit-mask:radial-gradient(closest-side,transparent 70%,#000 71%);
  mask:radial-gradient(closest-side,transparent 70%,#000 71%)}
/* Chat links: die Community, die den Moment trägt */
.chat{position:absolute;left:14px;bottom:200px;z-index:3;height:0}
.chat span{position:absolute;left:0;bottom:0;width:max-content;max-width:200px;background:rgba(8,15,38,.85);border:1px solid #2a3d78;
  border-radius:var(--radius-md);padding:.4rem .85rem;font-size:.84rem;opacity:0;color:#e8f0fb}
.chat b{color:#01C8F1;font-weight:740}
/* Gebots-Leiter rechts */
.gebote{position:absolute;right:14px;bottom:82px;z-index:3;height:0}
.gebot:nth-of-type(even){bottom:48px}
.gebot{position:absolute;right:0;bottom:0;white-space:nowrap;background:rgba(8,15,38,.85);border:1px solid #2a3d78;border-radius:var(--radius-full);
  padding:.4rem 1rem;font-size:.9rem;font-weight:740;opacity:0;color:#f5f8fd}
.gebot b{font-variant-numeric:tabular-nums;font-size:1.05rem}
.gebot .sd{color:#ff9ad3;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:820;margin-right:.5rem}
em.hi{font-style:normal;color:#FFD93E;border:1px solid rgba(255,217,62,.5);border-radius:999px;padding:.05rem .5rem;margin-left:.45rem;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase}
.gebot i{font-style:normal;color:#8fa3d4;font-weight:640;font-size:.78rem;margin-right:.35rem}
.gebot.heiss{border-color:rgba(255,217,62,.6)}
.lot-info{position:absolute;left:14px;right:104px;top:12px;z-index:4;display:grid}
.lot{grid-area:1/1;opacity:0;align-self:start;justify-self:start;background:rgba(8,15,38,.85);border:1px solid #2a3d78;
  border-radius:var(--radius-sm);padding:.35rem .7rem;font-size:.74rem;font-weight:700;color:#e8f0fb}
.lot b{color:#ff9ad3;margin-right:.45rem;font-weight:820;letter-spacing:.04em}
/* Der Hit: Gelb, nur hier */
.zuschlag{position:absolute;inset:0;z-index:3;display:grid;place-items:center;opacity:0;
  pointer-events:none}
.zuschlag::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 50% at 50% 50%,rgba(255,217,62,.16),transparent 70%)}
.zuschlag span{position:relative;background:var(--brand-yellow);color:#3a2c00;font-weight:830;
  border-radius:var(--radius-full);padding:.8rem 1.8rem;font-size:clamp(1.1rem,2.4vw,1.5rem);
  box-shadow:0 20px 60px -12px rgba(255,217,62,.6)}



/* Regal: die Ware zieht vorbei (nur Trading Cards / Pokémon) */
.regal{overflow:hidden;margin-top:var(--space-5);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.regal-lauf{display:flex;width:max-content;animation:regal 46s linear infinite}
.regal-lauf img{margin-right:var(--space-3)}
.regal img{height:130px;width:auto;border-radius:var(--radius-sm);flex:0 0 auto}
@keyframes regal{to{transform:translateX(-50%)}}


/* Programm */
.show-programm{display:grid;gap:var(--space-3);margin-top:var(--space-3)}
@media(min-width:900px){.show-programm{grid-template-columns:repeat(3,1fr)}.prog-karte.opening{grid-column:1/-1}}
.prog-karte{border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease,border-color .15s ease}
.prog-karte:hover{transform:translateY(-3px);border-color:var(--color-accent)}
.prog-media{height:180px;background:radial-gradient(80% 100% at 50% 0%,var(--color-surface-2),var(--color-surface));
  display:grid;place-items:center;padding:16px}
.prog-media img{max-width:100%;height:148px;width:auto;object-fit:contain;filter:drop-shadow(0 14px 26px rgba(0,0,0,.4))}
.prog-body{padding:var(--space-3);display:flex;flex-direction:column;gap:.55rem;flex:1}
.prog-body h4{margin:0;font-size:1.15rem;font-weight:800;font-style:italic;letter-spacing:-.02em;line-height:1.2}
.prog-body .leise{margin:0}
.prog-datum{align-self:flex-start;font-size:.72rem;font-weight:820;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--color-line);border-radius:999px;padding:.25rem .75rem;color:var(--color-ink-muted)}
.prog-datum.pink{background:var(--brand-pink);border-color:transparent;color:#fff}
.prog-karte.opening{border-color:rgba(243,62,157,.55);flex-direction:row;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);box-shadow:0 24px 60px -40px rgba(243,62,157,.6)}
.prog-karte.opening .prog-body{padding:0}
.prog-karte.opening h4{font-size:clamp(1.35rem,2.8vw,1.8rem)}
.prog-karte.opening .btn{flex:0 0 auto;margin-left:auto}
@media(max-width:700px){.prog-karte.opening{flex-direction:column;align-items:stretch}
  .prog-karte.opening .btn{margin-left:0;align-self:flex-start}}
.prog-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.2rem}

/* Events: gleiche Karten wie das Programm, als Raster mit Fotokoepfen */
.events-raster{display:grid;gap:var(--space-3);margin-top:var(--space-4)}
@media(min-width:700px){.events-raster{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.events-raster{grid-template-columns:repeat(3,1fr)}}
.prog-media--foto{padding:0;height:170px}
.prog-media--foto img{width:100%;height:170px;max-width:none;object-fit:cover;filter:none}
.events-titel{margin:0;font-size:1.15rem;font-weight:800;font-style:italic;letter-spacing:-.02em;line-height:1.2}
.events-quelle{margin:auto 0 0;font-size:.8rem;padding-top:.4rem}

/* Kategorieseiten: grosses Herobild, kleine Galerie neben den Punkten */
.kat-hero{margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-line)}
.kat-hero img{display:block;width:100%;height:clamp(220px,38vw,440px);object-fit:cover}
.kat-galerie{display:grid;gap:var(--space-3)}
@media(min-width:560px){.kat-galerie{grid-template-columns:repeat(2,1fr)}}
.kat-galerie figure{margin:0;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-line)}
.kat-galerie img{display:block;width:100%;height:200px;object-fit:cover}
.kat-galerie figure:only-child img{height:280px}
.prog-chips span{font-size:.78rem;font-weight:660;border:1px solid var(--color-line);border-radius:999px;
  padding:.22rem .7rem;color:var(--color-ink-muted)}
@media(max-width:640px){.buehne-caption{padding:0 .5rem}}
/* Inhaltsflächen unterhalb der Bühne *//* Inhaltsflächen unterhalb der Bühne */
.raster{display:grid;gap:var(--space-3)}
.r3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.r2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.karte{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--space-3)}
.karte h3{margin-bottom:.5rem}
.karte p:last-child{margin-bottom:0}
.nummer{font-style:italic;font-weight:830;font-size:1.5rem;color:var(--color-accent);margin-bottom:var(--space-1)}
.karte-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-1)}
.karte-kopf .nummer{margin-bottom:0}
.ikon{width:26px;height:26px;fill:none;stroke:var(--color-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.regel .ikon{width:22px;height:22px;margin-top:.25rem}

/* Kategorien */
.kats{display:grid;gap:var(--space-2);grid-template-columns:repeat(2,1fr);margin-top:var(--space-4)}
@media(min-width:840px){.kats{grid-template-columns:repeat(3,1fr)}}
.kat{position:relative;border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden;
  background:var(--color-surface);transition:transform .15s ease,border-color .15s ease}
.kat:hover{transform:translateY(-3px);border-color:var(--color-accent)}
.kat-bild{aspect-ratio:16/9;background:var(--color-surface-2);overflow:hidden}
.kat-bild img{width:100%;height:100%;object-fit:cover}
.kat-text{padding:var(--space-2) var(--space-3) var(--space-3)}
.kat-text strong{display:block;font-size:1.05rem}
.platzhalter{width:100%;height:100%;display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,var(--color-surface-2) 0 12px,var(--color-surface) 12px 24px)}
.platzhalter span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;color:var(--color-ink-muted);
  background:var(--color-bg);padding:.25rem .7rem;border-radius:var(--radius-full);border:1px solid var(--color-line)}
.kat-motiv{width:100%;height:100%;display:grid;place-items:center;
  background:radial-gradient(85% 100% at 50% 0%,var(--color-surface-2),var(--color-surface))}
.kat-motiv svg{width:54px;height:54px;fill:none;stroke:var(--mot,#01C8F1);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--space-3)}
.chip{font-size:.8rem;font-weight:660;color:var(--color-ink-muted);border:1px solid var(--color-line);
  border-radius:var(--radius-full);padding:.3rem .85rem;background:var(--color-surface)}

.vk-split{display:grid;gap:var(--space-4);align-items:center;margin-top:var(--space-4)}
@media(min-width:960px){.vk-split{grid-template-columns:1fr 1fr;gap:var(--space-5)}}
.vk-bild{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);border:1px solid var(--color-line)}
.vk-liste{list-style:disc;margin:0 0 var(--space-3);padding-left:1.2rem;color:var(--color-ink-muted);display:grid;gap:.55rem}
.btn-grad{background:linear-gradient(96deg,var(--brand-pink),var(--brand-yellow));color:#2b0a22;border:0}
.tueren{display:grid;justify-content:center;margin-top:var(--space-6)}
.tueren .tuer{max-width:680px}

.tuer{border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:var(--space-4);
  background:var(--color-surface);display:flex;flex-direction:column;gap:var(--space-2)}
.tuer ul{margin:0;padding-left:1.2rem;color:var(--color-ink-muted);line-height:1.8;font-size:var(--text-sm)}
.tuer .btn{align-self:flex-start;margin-top:auto}
.tuer-bilder{display:flex;gap:.5rem}
.tuer-bilder img{width:calc(33.33% - .34rem);aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--color-line)}
.mini-phone{display:none;position:absolute;right:var(--space-4);top:var(--space-4);width:104px;aspect-ratio:9/17;
  border-radius:16px;background:#0c1531;border:1px solid #2a3d78;padding:7px;box-shadow:var(--shadow-card)}
@media(min-width:1060px){.mini-phone{display:block}.tuer{position:relative}.tuer#beta h3,.tuer#beta>p{max-width:calc(100% - 120px)}}
.mini-screen{position:relative;height:100%;border-radius:10px;overflow:hidden;
  background:radial-gradient(80% 60% at 50% 20%,#1c2d5e,#101c40)}
.mini-live{position:absolute;top:6px;left:6px;background:var(--brand-pink);color:#fff;font-size:.5rem;
  font-weight:820;letter-spacing:.08em;border-radius:3px;padding:.1rem .3rem}
.mini-ring{position:absolute;top:8px;right:6px;width:22px;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(#F33E9D 250deg,rgba(255,255,255,.14) 0);
  -webkit-mask:radial-gradient(closest-side,transparent 62%,#000 63%);mask:radial-gradient(closest-side,transparent 62%,#000 63%)}
.mini-pill{position:absolute;left:6px;right:6px;bottom:6px;background:rgba(8,15,38,.9);border:1px solid #2a3d78;
  border-radius:999px;padding:.2rem 0;text-align:center;font-size:.5rem;font-weight:800;color:#f5f8fd}
.siegel-bild{border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden;
  background:var(--color-surface);max-width:440px}
.siegel-bild img{display:block;max-height:340px;width:auto;margin:0 auto;padding:1.2rem 0 0}
.siegel-bild figcaption{padding:var(--space-2) var(--space-3)}
.schluss{background:var(--color-bg-deep);text-align:center}
.schluss-packs{display:flex;justify-content:center;align-items:flex-end;gap:clamp(.6rem,2vw,1.4rem);margin-bottom:var(--space-4)}
.schluss-packs img{width:clamp(70px,9vw,104px);border-radius:6px;box-shadow:0 18px 40px -14px rgba(0,0,0,.55)}
.schluss-packs img:nth-child(1){transform:rotate(-7deg) translateY(8px)}
.schluss-packs img:nth-child(2){transform:rotate(-2deg)}
.schluss-packs img:nth-child(3){transform:rotate(3deg) translateY(4px)}
.schluss-packs img:nth-child(4){transform:rotate(8deg) translateY(12px)}
.schluss .app-weg{max-width:560px;margin:var(--space-3) auto 0}

.regel{display:flex;gap:var(--space-2);align-items:flex-start;padding:var(--space-2) 0;border-top:1px solid var(--color-line)}
.regel:first-of-type{border-top:0}
.regel .punkt{width:.55rem;height:.55rem;border-radius:50%;background:var(--color-accent);margin-top:.5rem;flex:0 0 auto}

.gruender{display:grid;gap:var(--space-3);margin-top:var(--space-4)}
@media(min-width:760px){.gruender{grid-template-columns:1fr 1fr}}
.gruender .karte{display:flex;gap:var(--space-3);align-items:center}
.portrait{width:96px;height:96px;border-radius:50%;overflow:hidden;flex:0 0 auto;border:1px solid var(--color-line)}
.portrait .platzhalter{width:100%;height:100%;min-height:0}

details{border-top:1px solid var(--color-line);padding:var(--space-2) 0}
details:last-of-type{border-bottom:1px solid var(--color-line)}
summary{cursor:pointer;font-weight:720;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:var(--space-2)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--color-accent);font-weight:800;font-size:1.25rem;line-height:1;flex:0 0 auto}
details[open] summary::after{content:"\2212"}
details p{margin:var(--space-2) 0 0;color:var(--color-ink-muted);max-width:70ch}

footer{border-top:1px solid var(--color-line);padding:var(--space-4) 0 var(--space-5);color:var(--color-ink-muted);font-size:var(--text-sm)}
footer a{color:var(--color-ink-muted);text-decoration:none;margin-right:var(--space-3)}
footer a:hover{color:var(--color-ink)}
.sozial{display:flex;gap:.6rem;margin-top:var(--space-2)}
.sozial a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--color-line);margin:0}
.sozial a:hover{border-color:var(--color-accent)}
.sozial svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Tag/Nacht-Übergang als Vorhangzug (View Transitions, wo verfügbar) */
::view-transition-old(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:vorhangzug .9s ease;mix-blend-mode:normal}
@keyframes vorhangzug{from{clip-path:circle(0% at var(--vt-x,90%) var(--vt-y,3%))}to{clip-path:circle(150% at var(--vt-x,90%) var(--vt-y,3%))}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .ring{--ring-a:120deg}
  .p1,.l1,.g1,.g2,.c1,.cz1{opacity:1;transform:none}
  .regal-lauf{animation:none}
  ::view-transition-new(root){animation:none}
}


/* ==========================================================================
   Ergaenzungen zum Gestaltungspaket
   Alles hier fehlte dort, weil das Paket keine Formulare mit Ziel und keine
   Wissensseiten kennt.
   ========================================================================== */

/* Sprunglink. Ohne diese Regel steht er sichtbar oben links auf der Seite.
   Er muss aber da sein: wer mit der Tastatur navigiert, springt damit an
   der ganzen Navigation vorbei. */
.skip-link {
  position: absolute; left: var(--space-2); top: -100px; z-index: 999;
  background: var(--color-pink-strong); color: #fff;
  padding: .75rem 1.25rem; border-radius: var(--radius-full);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }

/* Honigtopf: fuer Menschen unsichtbar, fuer Bots ausfuellbar. */
.hp-field {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

/* Rueckmeldung des Anmeldeformulars. */
.signup__status { margin-top: .75rem; font-size: var(--text-sm); font-weight: 600; min-height: 1.2em; }
.signup__status[data-state="ok"]   { color: var(--color-hit); }
.signup__status[data-state="fail"] { color: var(--color-pink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Anker landen sonst unter dem klebenden Kopf (57px hoch). */
main [id] { scroll-margin-top: 5rem; }

/* Schritt-Karten gibt es auch auf der Verkaeuferseite (Vorteils-Block),
   nicht nur auf der Beta-Seite. Gleiche Optik wie dort. */
body.seite-verkaeufer .schritte{display:grid;gap:1rem}
body.seite-verkaeufer .schritt{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.4rem}
body.seite-verkaeufer .schritt h3{margin:0 0 .4rem;font-size:1.02rem}
body.seite-verkaeufer .schritt p{margin:0;color:var(--muted);font-size:.94rem}

/* ==========================================================================
   Ergaenzung: die Seiten, die das Gestaltungspaket nicht kennt
   --------------------------------------------------------------------------
   Das Paket beschreibt die Startseite und die Rechtsseiten. Es kennt weder
   die Wissensseiten noch Kategorien, Programm, Über uns oder Android.

   Regel fuer alles hier: NUR Token des Pakets verwenden, keine eigenen Werte.
   Sonst laufen zwei Massstaebe nebeneinander her, und man sieht der Seite
   nach zwei Wochen an, welcher Teil wann gebaut wurde.
   ========================================================================== */

/* --- Namensbruecken. Das Paket sagt .lead, der Bestand sagte .lede. ------- */
.lede { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--color-ink-muted); max-width: 60ch; }
/* Erstrangiger Knopf der Bestandsseiten. Acht Dateien nutzen ihn, die Regel
   war leer: der Knopf stand ohne Flaeche und Form im Formular. Gleicher
   Auftritt wie .btn-grad, als eigenstaendige Regel auch fuer <button>. */
.btn--primary{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.9rem 1.7rem;border-radius:var(--radius-full);border:0;cursor:pointer;
  font:inherit;font-weight:740;font-size:1rem;text-decoration:none;
  background:linear-gradient(96deg,var(--brand-pink),var(--brand-yellow));color:#2b0a22;
  transition:transform .15s ease,filter .15s ease}
.btn--primary:hover{transform:translateY(-1px);filter:brightness(1.06)}
.wrap--text { max-width: 760px; }

/* --- Abschnitte ----------------------------------------------------------- */
.section        { padding: var(--space-6) 0; }
.section--tight { padding: var(--space-5) 0; }
.section--sunken{ background: var(--color-bg-deep); }

.section-head          { max-width: 62ch; margin: 0 0 var(--space-4); }
.section-head--center  { margin-inline: auto; text-align: center; }
.section-head p        { color: var(--color-ink-muted); margin-top: var(--space-2); }

/* --- Raster ---------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-3); }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.stack   > * + * { margin-top: var(--space-2); }
.stack-6 > * + * { margin-top: var(--space-3); }
.stack-8 > * + * { margin-top: var(--space-4); }

/* --- Karten ---------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}
.card h3 { margin: 0 0 var(--space-1); }
.card p  { color: var(--color-ink-muted); margin: 0; }

.step-number {
  display: grid; place-content: center;
  width: 44px; height: 44px; margin-bottom: var(--space-2);
  border-radius: var(--radius-md);
  font-weight: 800; font-size: 1.05rem;
  background: linear-gradient(140deg, var(--color-accent), #0a9bc0);
  color: var(--color-accent-ink);
}

.callout {
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}
.callout strong { color: var(--color-ink); }

/* --- Fliesstext ------------------------------------------------------------ */
.prose { max-width: 760px; }
.prose > * + *   { margin-top: var(--space-2); }
.prose h2        { margin-top: var(--space-4); font-size: clamp(1.4rem, 3vw, 1.9rem); }
.prose h3        { margin-top: var(--space-3); font-size: 1.15rem; }
.prose p, .prose li { color: var(--color-ink-muted); line-height: 1.75; }
.prose ul, .prose ol { padding-left: 1.4rem; display: grid; gap: .4rem; }
.prose li        { list-style: disc; }
.prose ol li     { list-style: decimal; }
.prose a         { color: var(--color-accent); text-underline-offset: 3px; }
.prose strong    { color: var(--color-ink); }
.prose figure    { margin: 0; }
.prose figcaption{ font-size: var(--text-sm); color: var(--color-ink-muted); margin-top: .5rem; }

/* --- Kategorien, Artikel, Shows -------------------------------------------- */
.category-grid { display: grid; gap: var(--space-2); }
@media (min-width: 620px)  { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .category-grid { grid-template-columns: repeat(3, 1fr); } }

.category {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-card);
  text-decoration: none; color: inherit;
  transition: transform .25s ease, border-color .25s ease;
}
.category:hover { transform: translateY(-4px); border-color: var(--color-accent); }
.category__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-surface-2); }
.category__media img { width: 100%; height: 100%; object-fit: cover; }
.category__body { padding: var(--space-3); display: grid; gap: .5rem; }
.category__body h3, .category__body h2 { margin: 0; font-size: 1.15rem; }
.category__body p { color: var(--color-ink-muted); font-size: var(--text-sm); margin: 0; }
.category__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.tag {
  font-size: var(--text-xs); padding: .2rem .7rem; border-radius: var(--radius-full);
  background: var(--color-surface-2); color: var(--color-ink-muted);
  border: 1px solid var(--color-line);
}

.article-list { display: grid; gap: var(--space-3); }
@media (min-width: 700px)  { .article-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .article-list { grid-template-columns: repeat(3, 1fr); } }
.article-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-card);
  transition: transform .25s ease, border-color .25s ease;
}
.article-card:hover { transform: translateY(-4px); border-color: var(--color-accent); }
.article-card__media { aspect-ratio: 16 / 9; background: var(--color-surface-2); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.article-card__body { padding: var(--space-3); display: grid; gap: .5rem; }
.article-card h2, .article-card h3 { margin: 0; font-size: 1.1rem; }
.article-card p { color: var(--color-ink-muted); font-size: var(--text-sm); margin: 0; }

.artikel-meta { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-muted); }
.artikel-meta a { color: var(--color-ink-muted); text-underline-offset: 3px; }
.artikel-meta a:hover { color: var(--color-accent); }

.programm-liste { display: grid; gap: var(--space-2); }
.programm-eintrag {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: center;
  padding: var(--space-3); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); background: var(--color-surface);
}
.programm-eintrag__datum { text-align: center; min-width: 68px; padding: .6rem; border-radius: var(--radius-md); background: var(--color-surface-2); }
.programm-eintrag__datum b { display: block; font-size: 1.6rem; line-height: 1; font-weight: 800; }
.programm-eintrag__datum span { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-ink-muted); }
.programm-eintrag__titel { font-size: 1.1rem; font-weight: 700; margin: 0; }
.programm-eintrag__meta  { font-size: var(--text-sm); color: var(--color-ink-muted); margin: .2rem 0 0; }
.programm-eintrag__offen  { font-size: var(--text-xs); color: var(--color-ink-muted); font-style: italic; margin: .4rem 0 0; }

/* --- Fragen und Antworten auf den Unterseiten ------------------------------ */
.faq details { border-bottom: 1px solid var(--color-line); padding: var(--space-2) 0; }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: var(--space-2); font-weight: 700; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; font-weight: 400; color: var(--color-accent); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: .6rem; color: var(--color-ink-muted); max-width: 72ch; }

/* --- Anmeldeblock auf den Unterseiten -------------------------------------- */
.signup {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); padding: var(--space-3); max-width: 560px;
}
.signup--plain { background: var(--color-surface); }
.signup__form { display: flex; flex-wrap: wrap; gap: .6rem; }
.signup__form input[type="email"] {
  flex: 1 1 240px; min-width: 0; padding: .9rem 1.2rem;
  border: 1px solid var(--color-line); border-radius: var(--radius-full);
  background: var(--color-bg-deep); color: var(--color-ink); font: inherit;
}
.signup__note { display: block; margin-top: .8rem; font-size: var(--text-sm); color: var(--color-ink-muted); }

/* --- Hero der Unterseiten --------------------------------------------------- */
.hero { background: var(--color-bg-deep); padding: var(--space-5) 0; }
.hero__inner { max-width: var(--width-content); margin: 0 auto; padding: 0 var(--space-3);
  display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 1000px) { .hero__inner { grid-template-columns: 1.05fr .95fr; } }
.badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem;
  border-radius: var(--radius-full); background: var(--color-surface);
  border: 1px solid var(--color-line); font-size: var(--text-xs); font-weight: 700;
}
.badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-hit); }

/* --- Schlussblock der Unterseiten ------------------------------------------- */
.finale { text-align: center; padding: var(--space-5) 0; background: var(--color-bg-deep); }
.finale .signup { margin-inline: auto; text-align: left; }
.finale p { color: var(--color-ink-muted); max-width: 54ch; margin-inline: auto; }

/* --- Sanftes Einblenden, respektiert die Systemeinstellung ------------------ */
.reveal { opacity: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 8% cover 26%; }
  }
}
@keyframes reveal-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* Zweitrangiger Knopf. Das Paket kennt .btn-outline, die Unterseiten sagen
   .btn--secondary. Statt 20 Dateien umzuschreiben, hier die eine Regel. */
.btn--secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .9rem 1.7rem; border-radius: var(--radius-full);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  background: transparent; color: var(--color-ink);
  border: 1px solid var(--color-line);
  transition: border-color .2s ease, color .2s ease;
}
.btn--secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ==========================================================================
   Mobil, gemessen und nachgebessert am 18.08.2026
   --------------------------------------------------------------------------
   Gemessen auf 375 x 812: Die Seite war 1305 Pixel breit und liess sich
   seitwaerts schieben. Ursache war die breite Ansicht der Buehne, die feste
   Pixelabstaende benutzt (inset:70px 140px). Auf einem Telefon geht das nicht
   auf, und waagerechtes Scrollen ist der Fehler, der eine Seite am
   schnellsten billig aussehen laesst.

   Entscheidung: Auf dem Telefon gibt es nur die Telefonansicht, auf dem
   Desktop beide.
   ========================================================================== */

/* Sicherheitsnetz. clip statt hidden, damit position:sticky im Kopf weiter
   funktioniert; overflow:hidden wuerde es abschalten. */
html, body { overflow-x: clip; max-width: 100%; }

@media (max-width: 760px) {

  /* 1. Nur die Telefonansicht. Die breite Buehne ist fuer einen grossen
        Bildschirm gebaut und war der Grund fuer das seitliche Scrollen. Der
        Umschalter verschwindet mit ihr, denn ein Schalter ohne zweite Wahl
        ist eine Falle. */
  .ansicht-schalter { display: none; }
  .phone-stage,
  .phone-stage .iphone,
  [data-ansicht] .buehne,
  [data-ansicht] .iphone { max-width: 100%; }
  .iphone { width: min(320px, 88vw); margin-inline: auto; }
  [data-ansicht="breit"] .produkte { inset: 56px 12px 7rem; }
  [data-ansicht="breit"] .ring     { right: 12px; top: 12px; width: 84px; }
  [data-ansicht="breit"] .chat     { left: 12px; bottom: 72px; }
  [data-ansicht="breit"] .lot-info { left: 12px; top: 10px; }

  /* 2. Nichts darf breiter sein als der Bildschirm. */
  img, svg, video, table, pre { max-width: 100%; height: auto; }

  /* 3. Klickflaechen. Gemessen waren mehrere unter 40 Pixel hoch, darunter
        der Umschalter fuer hell und dunkel mit 38 und die Fragen im
        FAQ-Block mit 26. Apple nennt 44 Punkte als Mindestmass, und das ist
        keine Schikane: darunter trifft man mit dem Daumen daneben. */
  .theme-btn, .mini-count, .top-logo,
  .btn, .btn--secondary, .asw { min-height: 44px; }
  .theme-btn { min-width: 44px; }
  .top-logo  { height: 34px; padding-block: .4rem; }
  .faq summary, details summary { min-height: 44px; padding-block: .6rem; }
  .site-footer a, footer a { display: inline-block; padding-block: .45rem; }

  /* 4. Schriftgroessen. Gemessen 10,24 px im Countdown-Label und 11,84 px in
        der Lot-Liste. Unter 12 Pixel liest das auf einem Telefon niemand
        mehr, und iOS zoomt Eingabefelder unter 16 Pixel beim Antippen
        automatisch heran, was das Layout verspringen laesst. */
  .cd-leiste, .cd-mitte span, .leise, .kicker { font-size: max(0.75rem, 12px); }
  .lot-info, .produkte figcaption { font-size: max(0.78rem, 12.5px); }
  input, select, textarea { font-size: 16px; }

  /* 5. Der Kopf wird auf schmalen Geraeten schnell zu voll. */
  .top-nav { gap: .5rem; }
  .top-in  { gap: .6rem; padding-inline: var(--space-2); }

  /* 6. Abstaende enger, sonst scrollt man auf dem Telefon ewig. */
  section { padding: var(--space-5) 0; }
  .wrap   { padding-inline: var(--space-2); }
}

/* Ganz schmale Geraete, etwa ein iPhone SE mit 320 Punkten. */
@media (max-width: 380px) {
  .mini-count { display: none; }   /* der Countdown steht ohnehin im Hero */
  .top-nav a  { font-size: .82rem; }
}

/* Klickflaechen im Fussbereich und bei den Sozialen. Gemessen auf 375 Punkten
   waren die Fusslinks 38 und die Icons 36 Punkte hoch, beide unter dem
   Mindestmass von 44. Auf dem Telefon trifft man darunter mit dem Daumen
   danebem, und der Fussbereich ist genau die Stelle, an der jemand das
   Impressum sucht. */
@media (max-width: 760px) {
  footer a, .site-footer a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-inline: .35rem;
  }
  footer a[aria-label], .sozial a, a[aria-label*="Instagram"], a[aria-label*="TikTok"] {
    min-width: 44px; min-height: 44px; justify-content: center;
  }
  /* Der Kalenderlink stand mit 20 Punkten Hoehe direkt unter einem Knopf. */
  a[href^="data:text/calendar"] { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --- Mobilmenue ------------------------------------------------------------
   Das Gestaltungspaket blendet die Navigation unter 1020 Pixeln aus und setzt
   nichts an ihre Stelle. Auf dem Telefon war damit keine Unterseite mehr
   erreichbar. Gebaut mit den Token des Pakets, damit es sich nicht fremd
   anfuehlt. */
.nav-btn { display: none; }
@media (max-width: 1020px) { .nav-btn { display: inline-flex; } }

.mobil-menue {
  display: none;
  flex-direction: column;
  padding: var(--space-2) var(--space-3) var(--space-3);
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
}
.mobil-menue[data-open="true"] { display: flex; }
.mobil-menue a {
  display: flex; align-items: center; min-height: 48px;
  padding: 0 var(--space-2);
  color: var(--color-ink); text-decoration: none;
  font-weight: 650; border-radius: var(--radius-md);
}
.mobil-menue a:hover, .mobil-menue a:focus-visible { background: var(--color-surface-2); }
@media (min-width: 1021px) { .mobil-menue { display: none !important; } }


/* ==========================================================================
   Die eigenen Stylesheets der Paket-Unterseiten
   --------------------------------------------------------------------------
   beta-tester.html und verkaeufer-werden.html bringen je ein eigenes <style>
   mit. Ihre Klassen brauchen Regeln, sonst steht dort ein nacktes Formular.

   ACHTUNG, hier steckte am 18.08.2026 ein Fehler, der die Startseite zerlegt
   hat: Angehaengt standen diese Bloecke NACH dem Haupt-Stylesheet und haben
   28 gleichnamige Selektoren ueberschrieben, darunter :root, body, h1, .wrap
   und die Kategoriekacheln. Deshalb gilt jetzt:

     1. Grundregeln (:root, body, Typografie, .wrap, .kicker, .lead) stehen
        NICHT hier. Das Haupt-Stylesheet hat sie.
     2. Alles Uebrige gilt nur auf seiner Seite, ueber eine Klasse am body.

   Wer hier etwas ergaenzt, haengt es an die passende Seitenklasse. Eine
   Regel ohne Praefix kann die ganze Seite treffen.
   ========================================================================== */

/* --- aus beta-tester.html, gilt nur auf .seite-beta ---
   Die Kopfzeilen-Regeln des Pakets sind entfernt: diese Seiten nutzen den
   gemeinsamen Kopf aus inc/header.php, nicht den Paket-Header. */
body.seite-beta main{padding:4rem 0 6rem}body.seite-beta .raster{display:grid;gap:3rem;align-items:start}
@media(min-width:920px){body.seite-beta .raster{grid-template-columns:.9fr 1.1fr}}body.seite-beta [data-theme="light"] .kicker{color:#bd1070}body.seite-beta .punkte{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.9rem;color:var(--muted)}body.seite-beta .punkte li{padding-left:1.6rem;position:relative}body.seite-beta .punkte li::before{content:"";position:absolute;left:0;top:.55rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--accent)}body.seite-beta .punkte b{color:var(--ink)}body.seite-beta .karte{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:2rem}body.seite-beta .feld{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.2rem}body.seite-beta .feld label{font-weight:720;font-size:.95rem}body.seite-beta .feld input{font-family:inherit;font-size:1rem;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;width:100%}body.seite-beta .feld ::placeholder{color:var(--muted);opacity:.8}body.seite-beta .feld input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}body.seite-beta fieldset{border:0;margin:0 0 1.2rem;padding:0}body.seite-beta legend{font-weight:720;font-size:.95rem;margin-bottom:.5rem;padding:0}body.seite-beta .geraete{display:flex;gap:.6rem;flex-wrap:wrap}body.seite-beta .geraet{flex:1 1 180px}body.seite-beta .geraet input{position:absolute;opacity:0;pointer-events:none}body.seite-beta .geraet span{display:flex;flex-direction:column;gap:.1rem;border:1px solid var(--line);border-radius:14px;
  padding:.8rem 1.1rem;cursor:pointer;background:var(--bg)}body.seite-beta .geraet b{font-size:1.05rem}body.seite-beta .geraet small{color:var(--muted)}body.seite-beta .geraet input:checked + span{border-color:var(--accent);outline:2px solid var(--accent)}body.seite-beta .geraet input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}body.seite-beta .senden{display:inline-flex;border:0;cursor:pointer;font-family:inherit;font-size:1.02rem;font-weight:790;
  color:#2b0a22;background:linear-gradient(96deg,var(--pink),var(--gelb));border-radius:999px;padding:.95rem 1.9rem;
  transition:transform .15s ease,filter .15s ease}body.seite-beta .senden:hover{transform:translateY(-1px);filter:brightness(1.05)}body.seite-beta .hinweis{color:var(--muted);font-size:.88rem;margin:1rem 0 0}body.seite-beta .hinweis a{color:var(--accent)}body.seite-beta .erfolg{display:none;border:1px solid var(--accent);border-radius:14px;padding:1rem 1.3rem;background:var(--bg)}body.seite-beta .ablauf{margin-top:4.5rem}body.seite-beta .ablauf h2{font-style:italic;font-weight:820;letter-spacing:-.02em;font-size:clamp(1.5rem,3.5vw,2rem);margin:0 0 1.5rem}body.seite-beta .schritte{display:grid;gap:1rem}
@media(min-width:860px){body.seite-beta .schritte{grid-template-columns:repeat(4,1fr)}}body.seite-beta .schritt{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.4rem}body.seite-beta .schritt .nr{width:2rem;height:2rem;border-radius:50%;background:var(--accent);color:var(--bg-deep);font-weight:820;display:grid;place-items:center;margin-bottom:.8rem}body.seite-beta [data-theme="light"] .schritt .nr{color:#fff}body.seite-beta .schritt h3{margin:0 0 .4rem;font-size:1.02rem}body.seite-beta .schritt p{margin:0;color:var(--muted);font-size:.94rem}body.seite-beta .aktionen{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.6rem}body.seite-beta .aktion-zweit{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:.95rem 1.7rem;
  color:var(--ink);text-decoration:none;font-weight:740}body.seite-beta .aktion-zweit:hover{border-color:var(--accent)}



/* --- aus verkaeufer-werden.html, gilt nur auf .seite-verkaeufer ---
   Kopfzeilen-Regeln des Pakets entfernt, gemeinsamer Kopf gilt. */
body.seite-verkaeufer main{padding:4rem 0 6rem}body.seite-verkaeufer .raster{display:grid;gap:3rem;align-items:start}
@media(min-width:920px){body.seite-verkaeufer .raster{grid-template-columns:.9fr 1.1fr}}body.seite-verkaeufer [data-theme="light"] .kicker{color:#bd1070}body.seite-verkaeufer .punkte{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.9rem;color:var(--muted)}body.seite-verkaeufer .punkte li{padding-left:1.6rem;position:relative}body.seite-verkaeufer .punkte li::before{content:"";position:absolute;left:0;top:.55rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--accent)}body.seite-verkaeufer .punkte b{color:var(--ink)}body.seite-verkaeufer .karte{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:2rem}body.seite-verkaeufer .feld{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.2rem}body.seite-verkaeufer .feld label{font-weight:720;font-size:.95rem}body.seite-verkaeufer .feld input,
body.seite-verkaeufer .feld select,
body.seite-verkaeufer .feld textarea{font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;width:100%}body.seite-verkaeufer .feld ::placeholder{color:var(--muted);opacity:.8}body.seite-verkaeufer .feld input:focus-visible,
body.seite-verkaeufer .feld select:focus-visible,
body.seite-verkaeufer .feld textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}body.seite-verkaeufer .feld textarea{min-height:130px;resize:vertical}body.seite-verkaeufer .zwei{display:grid;gap:0 1rem}
@media(min-width:560px){body.seite-verkaeufer .zwei{grid-template-columns:1fr 1fr}}body.seite-verkaeufer .senden{display:inline-flex;border:0;cursor:pointer;font-family:inherit;font-size:1.02rem;font-weight:790;
  color:#2b0a22;background:linear-gradient(96deg,var(--pink),var(--gelb));border-radius:999px;padding:.95rem 1.9rem;
  transition:transform .15s ease,filter .15s ease}body.seite-verkaeufer .senden:hover{transform:translateY(-1px);filter:brightness(1.05)}body.seite-verkaeufer .hinweis{color:var(--muted);font-size:.88rem;margin:1rem 0 0}body.seite-verkaeufer .hinweis a{color:var(--accent)}body.seite-verkaeufer .erfolg{display:none;border:1px solid var(--accent);border-radius:14px;padding:1rem 1.3rem;background:var(--bg)}



/* --- aus agb.html, gilt nur auf .seite-recht ---
   Kopfzeilen-Regeln des Pakets entfernt, gemeinsamer Kopf gilt. */
body.seite-recht main{padding:3.5rem 0 5rem}
body.seite-recht mark{background:rgba(255,217,62,.2);color:inherit;padding:.05rem .4rem;border-radius:4px;font-weight:650}

/* ==========================================================================
   Mobil, zweiter Durchgang: gemeldete Fehler
   --------------------------------------------------------------------------
   Gemeldet nach dem Blick aufs Telefon: die Kategoriekacheln stehen zu eng
   nebeneinander, der Wochenplan verrutscht, Texte laufen aus dem Bild.
   Neu geschrieben am 18.08.2026: die vorige Fassung war durch eine Regex
   zerstoert, die "body.seite-recht" in Kommentare und vor Selektoren
   gestreut hatte. Alle Regeln hier gelten bewusst auf JEDER Seite.
   ========================================================================== */

@media (max-width: 760px) {
  /* 1. Kategorien: eine Kachel pro Zeile, gross und mit Luft. Das Bild
        traegt die Kachel, also bekommt es Platz. */
  .kats{ grid-template-columns: 1fr !important; gap: var(--space-2) !important; }

  /* 2. Der Wochenplan: eine Karte pro Zeile, feste Spalten passen nicht. */
  .show-programm{ grid-template-columns: 1fr !important; gap: var(--space-2) !important; }

  /* 3. Nichts laeuft aus dem Bild: lange Produktnamen brechen um. */
  .lot-info, .kat-text span{ overflow-wrap: anywhere; hyphens: auto; }

  /* 4. Die Chat-Blasen der Buehne standen teils ausserhalb. */
  .chat{ max-width: calc(100% - 24px); }

  /* 5. Ueberschriften: auf schmalen Geraeten kippt die grosse Skala. */
  h1, .hero__titel{ font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
}

/* ==========================================================================
   Buehnen-Erweiterung vom 18.08.2026 (Branch buehne-choreografie)
   --------------------------------------------------------------------------
   Vier neue Momente in der 160-Sekunden-Choreografie, je einem Lot-Fenster
   zugeordnet: die slabhit-Antwort im Chat (Lot 7), der Sofortkauf statt
   einer Gebotskette (Lot 8), das mitbietende Maximalgebot (Lot 9) und der
   Candy-Moment (Lot 6). Der Candy-Knopf sitzt fest in der Eingabeleiste.
   Der Ring springt seit diesem Stand nur noch im gelben Fenster hoch,
   wie im Website-Konzept (Sudden Death in den letzten Sekunden) definiert.
   ========================================================================== */

/* slabhit antwortet im Chat: eigene Farbe, damit man den Betreiber erkennt */
.chat span.antwort{border-color:rgba(1,200,241,.7);background:rgba(3,34,46,.92)}
.chat span.antwort b{color:#fff}
/* Sofortkauf-Pille, Lot 8: erscheint, pulst beim Kauf, der Zuschlag folgt */
.sofort-pill{position:absolute;right:16px;top:108px;z-index:4;display:flex;align-items:center;gap:.5rem;
  background:rgba(8,15,38,.88);border:1px solid rgba(255,217,62,.7);border-radius:999px;
  padding:.45rem 1rem;font-weight:820;color:#f5f8fd;opacity:0}
.sofort-pill .sp-tag{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#FFD93E;font-weight:820}
/* Maximalgebot, Lot 9: dein Limit bietet mit, nur du siehst es */
.limit-tag{position:absolute;left:12px;bottom:74px;z-index:4;background:rgba(8,15,38,.88);
  border:1px solid rgba(1,200,241,.6);border-radius:999px;padding:.35rem .85rem;
  font-size:.74rem;font-weight:720;color:#9fd9ea;opacity:0}
/* Candy-Knopf in der Eingabeleiste, mit ruhigem Puls alle acht Sekunden */
.candy-btn{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand-pink),var(--brand-yellow));
  box-shadow:0 10px 24px -10px rgba(243,62,157,.8);animation:candy-puls 8s ease-in-out infinite}
.candy-btn svg{width:21px;height:21px;fill:none;stroke:#2b0a22;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes candy-puls{0%,88%,100%{transform:scale(1)}92%{transform:scale(1.14)}96%{transform:scale(.97)}}

/* Candy-Moment, Lot 6: der Verkaeufer verschenkt, die Buehne freut sich */
.candy-pop{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);z-index:4;
  background:var(--brand-yellow);color:#3a2c00;font-weight:830;border-radius:999px;
  padding:.55rem 1.3rem;font-size:.92rem;box-shadow:0 16px 44px -12px rgba(255,217,62,.65);opacity:0}
/* --- Buehne V2 (Branch buehne-v2): Giveaway-Ablauf, Rip or Ship, Bieter --- */

/* Konfetti, wenn die Candies verteilt werden */
.konfetti{position:absolute;inset:0;z-index:5;pointer-events:none}
.konfetti i{position:absolute;top:-6%;width:9px;height:14px;border-radius:2px;opacity:0}
.konfetti i:nth-child(1){left:8%;background:#F33E9D;animation-delay:-.05s}
.konfetti i:nth-child(2){left:16%;background:#FFD93E;animation-delay:-.4s}
.konfetti i:nth-child(3){left:24%;background:#01C8F1;animation-delay:-.15s}
.konfetti i:nth-child(4){left:33%;background:#fff;animation-delay:-.55s}
.konfetti i:nth-child(5){left:41%;background:#FFD93E;animation-delay:-.25s}
.konfetti i:nth-child(6){left:50%;background:#F33E9D;animation-delay:-.6s}
.konfetti i:nth-child(7){left:58%;background:#01C8F1;animation-delay:-.1s}
.konfetti i:nth-child(8){left:66%;background:#fff;animation-delay:-.45s}
.konfetti i:nth-child(9){left:74%;background:#F33E9D;animation-delay:-.3s}
.konfetti i:nth-child(10){left:82%;background:#FFD93E;animation-delay:-.65s}
.konfetti i:nth-child(11){left:90%;background:#01C8F1;animation-delay:-.2s}
.konfetti i:nth-child(12){left:96%;background:#fff;animation-delay:-.5s}

/* Rip or Ship: der Kaeufer entscheidet nach dem Zuschlag, live vor allen */
.ripship{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);z-index:5;
  display:flex;gap:.6rem;opacity:0}
.rs-knopf{border-radius:999px;padding:.55rem 1.4rem;font-weight:830;font-size:.95rem;
  background:rgba(8,15,38,.9);border:1px solid #2a3d78;color:#f5f8fd}
.rs-rip{border-color:rgba(255,217,62,.75)}
.rs-ship{border-color:rgba(1,200,241,.7)}
/* --- Buehne V3: Dauer-Zaehler, zweite Vergabe, Show-Start --- */

/* Der Zaehler am Candy-Knopf steigt durch die Show und faellt nach jeder
   Vergabe auf null. Zahlen als Stapel, je Phase eine sichtbar. */
.candy-btn{position:relative}
.candy-zahl{position:absolute;top:-9px;right:-9px;min-width:21px;height:21px;border-radius:999px;
  background:#0c1531;border:1px solid rgba(255,217,62,.85);display:grid;place-items:center;padding:0 5px}
.cz{grid-area:1/1;font-size:.6rem;font-weight:820;color:#FFD93E;opacity:0;line-height:1}
/* Show-Start: dunkles Deckblatt mit Countdown, dann geht der Vorhang auf */
.show-start{position:absolute;inset:0;z-index:6;border-radius:48px;display:grid;place-content:center;
  gap:.7rem;text-align:center;background:rgba(9,15,35,.96);opacity:0;pointer-events:none}
.ss-titel{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#a3b4dc;font-weight:760}
.ss-zahlen{display:grid;place-items:center;min-height:3.4rem}
.ss-z{grid-area:1/1;font-size:3rem;font-weight:830;font-style:italic;color:#f5f8fd;opacity:0}

/* Atempause zwischen den Lots: kleine Karte in Buehnenmitte, 3-2-1, dann
   erscheint das naechste Lot. Waehrenddessen fuellt sich der Ring wieder. */
.lot-cd{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:.15rem;opacity:0;pointer-events:none;
  background:rgba(8,15,38,.86);border:1px solid #2a3d78;border-radius:var(--radius-lg);
  padding:.8rem 1.7rem;box-shadow:0 24px 60px -24px rgba(0,0,0,.7)}
.lc-text{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#a3b4dc;font-weight:760;white-space:nowrap}
.lc-zahlen{display:grid;place-items:center;min-height:2.5rem}
.lcz{grid-area:1/1;font-size:2.1rem;font-weight:830;font-style:italic;color:#f5f8fd;opacity:0;line-height:1}

/* ==========================================================================
   >>> BUEHNE-TIMELINE
   Alles zwischen diesen Markern erzeugt bin/buehne.py aus der Zeitplan-
   Tabelle dort. Nicht von Hand aendern, sondern das Skript laufen lassen.
   ========================================================================== */
/* Show-Start: Deckblatt mit Countdown am Schleifenanfang */
.show-start{animation:kf-showstart 160s linear infinite}
@keyframes kf-showstart{0%,2.2%{opacity:1}2.6%,100%{opacity:0}}
.sz3{animation:kf-sz3 160s linear infinite}
@keyframes kf-sz3{0.5%{opacity:0;transform:scale(.8)}0.62%,1.05%{opacity:1;transform:none}1.15%,100%{opacity:0}}
.sz2{animation:kf-sz2 160s linear infinite}
@keyframes kf-sz2{1.15%{opacity:0;transform:scale(.8)}1.27%,1.7%{opacity:1;transform:none}1.8%,100%{opacity:0}}
.sz1{animation:kf-sz1 160s linear infinite}
@keyframes kf-sz1{1.8%{opacity:0;transform:scale(.8)}1.92%,2.35%{opacity:1;transform:none}2.45%,100%{opacity:0}}
/* Countdown zwischen den Lots: "Naechstes Lot in 3-2-1" */
.lot-cd{animation:kf-lotcd 160s linear infinite}
@keyframes kf-lotcd{10.15%{opacity:0;transform:translate(-50%,-54%)}10.35%,11.75%{opacity:1;transform:translate(-50%,-50%)}11.95%{opacity:0;transform:translate(-50%,-50%)}20.15%{opacity:0;transform:translate(-50%,-54%)}20.35%,21.75%{opacity:1;transform:translate(-50%,-50%)}21.95%{opacity:0;transform:translate(-50%,-50%)}30.15%{opacity:0;transform:translate(-50%,-54%)}30.35%,31.75%{opacity:1;transform:translate(-50%,-50%)}31.95%{opacity:0;transform:translate(-50%,-50%)}40.15%{opacity:0;transform:translate(-50%,-54%)}40.35%,41.75%{opacity:1;transform:translate(-50%,-50%)}41.95%{opacity:0;transform:translate(-50%,-50%)}50.15%{opacity:0;transform:translate(-50%,-54%)}50.35%,51.75%{opacity:1;transform:translate(-50%,-50%)}51.95%{opacity:0;transform:translate(-50%,-50%)}60.15%{opacity:0;transform:translate(-50%,-54%)}60.35%,61.75%{opacity:1;transform:translate(-50%,-50%)}61.95%{opacity:0;transform:translate(-50%,-50%)}70.15%{opacity:0;transform:translate(-50%,-54%)}70.35%,71.75%{opacity:1;transform:translate(-50%,-50%)}71.95%{opacity:0;transform:translate(-50%,-50%)}80.15%{opacity:0;transform:translate(-50%,-54%)}80.35%,81.75%{opacity:1;transform:translate(-50%,-50%)}81.95%{opacity:0;transform:translate(-50%,-50%)}90.15%{opacity:0;transform:translate(-50%,-54%)}90.35%,91.75%{opacity:1;transform:translate(-50%,-50%)}91.95%{opacity:0;transform:translate(-50%,-50%)}100%{opacity:0}}
.lcz3{animation:kf-lcz3 160s linear infinite}
@keyframes kf-lcz3{10.25%{opacity:0;transform:scale(.55)}10.37%,10.76%{opacity:1;transform:scale(1)}10.82%{opacity:0}20.25%{opacity:0;transform:scale(.55)}20.37%,20.76%{opacity:1;transform:scale(1)}20.82%{opacity:0}30.25%{opacity:0;transform:scale(.55)}30.37%,30.76%{opacity:1;transform:scale(1)}30.82%{opacity:0}40.25%{opacity:0;transform:scale(.55)}40.37%,40.76%{opacity:1;transform:scale(1)}40.82%{opacity:0}50.25%{opacity:0;transform:scale(.55)}50.37%,50.76%{opacity:1;transform:scale(1)}50.82%{opacity:0}60.25%{opacity:0;transform:scale(.55)}60.37%,60.76%{opacity:1;transform:scale(1)}60.82%{opacity:0}70.25%{opacity:0;transform:scale(.55)}70.37%,70.76%{opacity:1;transform:scale(1)}70.82%{opacity:0}80.25%{opacity:0;transform:scale(.55)}80.37%,80.76%{opacity:1;transform:scale(1)}80.82%{opacity:0}90.25%{opacity:0;transform:scale(.55)}90.37%,90.76%{opacity:1;transform:scale(1)}90.82%{opacity:0}100%{opacity:0}}
.lcz2{animation:kf-lcz2 160s linear infinite}
@keyframes kf-lcz2{10.82%{opacity:0;transform:scale(.55)}10.94%,11.33%{opacity:1;transform:scale(1)}11.39%{opacity:0}20.82%{opacity:0;transform:scale(.55)}20.94%,21.33%{opacity:1;transform:scale(1)}21.39%{opacity:0}30.82%{opacity:0;transform:scale(.55)}30.94%,31.33%{opacity:1;transform:scale(1)}31.39%{opacity:0}40.82%{opacity:0;transform:scale(.55)}40.94%,41.33%{opacity:1;transform:scale(1)}41.39%{opacity:0}50.82%{opacity:0;transform:scale(.55)}50.94%,51.33%{opacity:1;transform:scale(1)}51.39%{opacity:0}60.82%{opacity:0;transform:scale(.55)}60.94%,61.33%{opacity:1;transform:scale(1)}61.39%{opacity:0}70.82%{opacity:0;transform:scale(.55)}70.94%,71.33%{opacity:1;transform:scale(1)}71.39%{opacity:0}80.82%{opacity:0;transform:scale(.55)}80.94%,81.33%{opacity:1;transform:scale(1)}81.39%{opacity:0}90.82%{opacity:0;transform:scale(.55)}90.94%,91.33%{opacity:1;transform:scale(1)}91.39%{opacity:0}100%{opacity:0}}
.lcz1{animation:kf-lcz1 160s linear infinite}
@keyframes kf-lcz1{11.39%{opacity:0;transform:scale(.55)}11.51%,11.84%{opacity:1;transform:scale(1)}11.9%{opacity:0}21.39%{opacity:0;transform:scale(.55)}21.51%,21.84%{opacity:1;transform:scale(1)}21.9%{opacity:0}31.39%{opacity:0;transform:scale(.55)}31.51%,31.84%{opacity:1;transform:scale(1)}31.9%{opacity:0}41.39%{opacity:0;transform:scale(.55)}41.51%,41.84%{opacity:1;transform:scale(1)}41.9%{opacity:0}51.39%{opacity:0;transform:scale(.55)}51.51%,51.84%{opacity:1;transform:scale(1)}51.9%{opacity:0}61.39%{opacity:0;transform:scale(.55)}61.51%,61.84%{opacity:1;transform:scale(1)}61.9%{opacity:0}71.39%{opacity:0;transform:scale(.55)}71.51%,71.84%{opacity:1;transform:scale(1)}71.9%{opacity:0}81.39%{opacity:0;transform:scale(.55)}81.51%,81.84%{opacity:1;transform:scale(1)}81.9%{opacity:0}91.39%{opacity:0;transform:scale(.55)}91.51%,91.84%{opacity:1;transform:scale(1)}91.9%{opacity:0}100%{opacity:0}}
/* Auktionsuhr: laeuft ab, springt gelb bei spaeten Geboten, */
/* fuellt sich waehrend des Countdowns zum naechsten Lot     */
.ring{animation:ring-lauf 160s linear infinite}
@keyframes ring-lauf{
  0.313%{--ring-a:360deg;--ring-c:#F33E9D}
  6%{--ring-a:40deg;--ring-c:#F33E9D}
  6.125%{--ring-a:36deg;--ring-c:#FFD93E}
  6.375%{--ring-a:32deg;--ring-c:#FFD93E}
  6.563%{--ring-a:105deg;--ring-c:#FFD93E}
  7.375%{--ring-a:28deg;--ring-c:#FFD93E}
  7.563%{--ring-a:95deg;--ring-c:#FFD93E}
  8.125%{--ring-a:24deg;--ring-c:#FFD93E}
  8.313%{--ring-a:85deg;--ring-c:#FFD93E}
  8.875%{--ring-a:0deg;--ring-c:#FFD93E}
  9.625%{--ring-a:0deg;--ring-c:#FFD93E}
  11.85%{--ring-a:360deg;--ring-c:#F33E9D}
  14.6%{--ring-a:40deg;--ring-c:#F33E9D}
  14.7%{--ring-a:36deg;--ring-c:#FFD93E}
  14.9%{--ring-a:32deg;--ring-c:#FFD93E}
  15.05%{--ring-a:100deg;--ring-c:#FFD93E}
  15.55%{--ring-a:28deg;--ring-c:#FFD93E}
  15.7%{--ring-a:90deg;--ring-c:#FFD93E}
  16.3%{--ring-a:24deg;--ring-c:#FFD93E}
  16.45%{--ring-a:85deg;--ring-c:#FFD93E}
  17.3%{--ring-a:0deg;--ring-c:#FFD93E}
  18.15%{--ring-a:0deg;--ring-c:#FFD93E}
  21.85%{--ring-a:360deg;--ring-c:#F33E9D}
  26%{--ring-a:40deg;--ring-c:#F33E9D}
  26.125%{--ring-a:36deg;--ring-c:#FFD93E}
  26.375%{--ring-a:32deg;--ring-c:#FFD93E}
  26.563%{--ring-a:105deg;--ring-c:#FFD93E}
  27.375%{--ring-a:28deg;--ring-c:#FFD93E}
  27.563%{--ring-a:95deg;--ring-c:#FFD93E}
  28.125%{--ring-a:24deg;--ring-c:#FFD93E}
  28.313%{--ring-a:85deg;--ring-c:#FFD93E}
  28.875%{--ring-a:0deg;--ring-c:#FFD93E}
  29.625%{--ring-a:0deg;--ring-c:#FFD93E}
  31.85%{--ring-a:360deg;--ring-c:#F33E9D}
  34.6%{--ring-a:40deg;--ring-c:#F33E9D}
  34.7%{--ring-a:36deg;--ring-c:#FFD93E}
  34.9%{--ring-a:32deg;--ring-c:#FFD93E}
  35.05%{--ring-a:100deg;--ring-c:#FFD93E}
  35.55%{--ring-a:28deg;--ring-c:#FFD93E}
  35.7%{--ring-a:90deg;--ring-c:#FFD93E}
  36.3%{--ring-a:24deg;--ring-c:#FFD93E}
  36.45%{--ring-a:85deg;--ring-c:#FFD93E}
  37.3%{--ring-a:0deg;--ring-c:#FFD93E}
  38.15%{--ring-a:0deg;--ring-c:#FFD93E}
  41.85%{--ring-a:360deg;--ring-c:#F33E9D}
  46%{--ring-a:40deg;--ring-c:#F33E9D}
  46.125%{--ring-a:36deg;--ring-c:#FFD93E}
  46.375%{--ring-a:32deg;--ring-c:#FFD93E}
  46.563%{--ring-a:105deg;--ring-c:#FFD93E}
  47.375%{--ring-a:28deg;--ring-c:#FFD93E}
  47.563%{--ring-a:95deg;--ring-c:#FFD93E}
  48.125%{--ring-a:24deg;--ring-c:#FFD93E}
  48.313%{--ring-a:85deg;--ring-c:#FFD93E}
  48.875%{--ring-a:0deg;--ring-c:#FFD93E}
  49.625%{--ring-a:0deg;--ring-c:#FFD93E}
  51.85%{--ring-a:360deg;--ring-c:#F33E9D}
  56%{--ring-a:40deg;--ring-c:#F33E9D}
  56.125%{--ring-a:36deg;--ring-c:#FFD93E}
  56.375%{--ring-a:32deg;--ring-c:#FFD93E}
  56.563%{--ring-a:105deg;--ring-c:#FFD93E}
  57.375%{--ring-a:28deg;--ring-c:#FFD93E}
  57.563%{--ring-a:95deg;--ring-c:#FFD93E}
  58.125%{--ring-a:24deg;--ring-c:#FFD93E}
  58.313%{--ring-a:85deg;--ring-c:#FFD93E}
  58.875%{--ring-a:0deg;--ring-c:#FFD93E}
  59.625%{--ring-a:0deg;--ring-c:#FFD93E}
  61.85%{--ring-a:360deg;--ring-c:#F33E9D}
  66%{--ring-a:40deg;--ring-c:#F33E9D}
  66.125%{--ring-a:36deg;--ring-c:#FFD93E}
  66.375%{--ring-a:32deg;--ring-c:#FFD93E}
  66.563%{--ring-a:105deg;--ring-c:#FFD93E}
  67.375%{--ring-a:28deg;--ring-c:#FFD93E}
  67.563%{--ring-a:95deg;--ring-c:#FFD93E}
  68.125%{--ring-a:24deg;--ring-c:#FFD93E}
  68.313%{--ring-a:85deg;--ring-c:#FFD93E}
  68.875%{--ring-a:0deg;--ring-c:#FFD93E}
  69.625%{--ring-a:0deg;--ring-c:#FFD93E}
  71.85%{--ring-a:360deg;--ring-c:#F33E9D}
  76%{--ring-a:40deg;--ring-c:#F33E9D}
  76.125%{--ring-a:36deg;--ring-c:#FFD93E}
  76.375%{--ring-a:32deg;--ring-c:#FFD93E}
  76.563%{--ring-a:105deg;--ring-c:#FFD93E}
  77.375%{--ring-a:28deg;--ring-c:#FFD93E}
  77.563%{--ring-a:95deg;--ring-c:#FFD93E}
  78.125%{--ring-a:24deg;--ring-c:#FFD93E}
  78.313%{--ring-a:85deg;--ring-c:#FFD93E}
  78.875%{--ring-a:0deg;--ring-c:#FFD93E}
  79.625%{--ring-a:0deg;--ring-c:#FFD93E}
  81.85%{--ring-a:360deg;--ring-c:#F33E9D}
  86%{--ring-a:40deg;--ring-c:#F33E9D}
  86.125%{--ring-a:36deg;--ring-c:#FFD93E}
  86.375%{--ring-a:32deg;--ring-c:#FFD93E}
  86.563%{--ring-a:105deg;--ring-c:#FFD93E}
  87.375%{--ring-a:28deg;--ring-c:#FFD93E}
  87.563%{--ring-a:95deg;--ring-c:#FFD93E}
  88.125%{--ring-a:24deg;--ring-c:#FFD93E}
  88.313%{--ring-a:85deg;--ring-c:#FFD93E}
  88.875%{--ring-a:0deg;--ring-c:#FFD93E}
  89.625%{--ring-a:0deg;--ring-c:#FFD93E}
  91.85%{--ring-a:360deg;--ring-c:#F33E9D}
  96%{--ring-a:40deg;--ring-c:#F33E9D}
  96.125%{--ring-a:36deg;--ring-c:#FFD93E}
  96.375%{--ring-a:32deg;--ring-c:#FFD93E}
  96.563%{--ring-a:105deg;--ring-c:#FFD93E}
  97.375%{--ring-a:28deg;--ring-c:#FFD93E}
  97.563%{--ring-a:95deg;--ring-c:#FFD93E}
  98.125%{--ring-a:24deg;--ring-c:#FFD93E}
  98.313%{--ring-a:85deg;--ring-c:#FFD93E}
  98.875%{--ring-a:0deg;--ring-c:#FFD93E}
  99.625%{--ring-a:0deg;--ring-c:#FFD93E}
  100%{--ring-a:0deg;--ring-c:#FFD93E}}
/* Ware, Lot-Zeile und Zuschlag je Lot */
.p1{animation:schweben 7s ease-in-out infinite,kf-p1 160s linear infinite}
.l1{animation:kf-p1 160s linear infinite}
@keyframes kf-p1{0.188%{opacity:0}0.563%,9.75%{opacity:1}9.969%,100%{opacity:0}}
.z1{animation:kf-z1 160s linear infinite}
@keyframes kf-z1{8.938%{opacity:0;transform:scale(.9)}9.188%,9.625%{opacity:1;transform:none}9.875%,100%{opacity:0}}
.p2{animation:schweben 7s ease-in-out infinite,kf-p2 160s linear infinite}
.l2{animation:kf-p2 160s linear infinite}
@keyframes kf-p2{11.95%{opacity:0}12.35%,19.75%{opacity:1}19.969%,100%{opacity:0}}
.z2{animation:kf-z2 160s linear infinite}
@keyframes kf-z2{17.35%{opacity:0;transform:scale(.9)}17.6%,18.15%{opacity:1;transform:none}18.4%,100%{opacity:0}}
.p3{animation:schweben 7s ease-in-out infinite,kf-p3 160s linear infinite}
.l3{animation:kf-p3 160s linear infinite}
@keyframes kf-p3{21.95%{opacity:0}22.35%,29.75%{opacity:1}29.969%,100%{opacity:0}}
.z3{animation:kf-z3 160s linear infinite}
@keyframes kf-z3{28.938%{opacity:0;transform:scale(.9)}29.188%,29.625%{opacity:1;transform:none}29.875%,100%{opacity:0}}
.p4{animation:schweben 7s ease-in-out infinite,kf-p4 160s linear infinite}
.l4{animation:kf-p4 160s linear infinite}
@keyframes kf-p4{31.95%{opacity:0}32.35%,39.75%{opacity:1}39.969%,100%{opacity:0}}
.z4{animation:kf-z4 160s linear infinite}
@keyframes kf-z4{37.35%{opacity:0;transform:scale(.9)}37.6%,38.15%{opacity:1;transform:none}38.4%,100%{opacity:0}}
.p5{animation:schweben 7s ease-in-out infinite,kf-p5 160s linear infinite}
.l5{animation:kf-p5 160s linear infinite}
@keyframes kf-p5{41.95%{opacity:0}42.35%,49.75%{opacity:1}49.969%,100%{opacity:0}}
.z5{animation:kf-z5 160s linear infinite}
@keyframes kf-z5{48.938%{opacity:0;transform:scale(.9)}49.188%,49.625%{opacity:1;transform:none}49.875%,100%{opacity:0}}
.p6{animation:schweben 7s ease-in-out infinite,kf-p6 160s linear infinite}
.l6{animation:kf-p6 160s linear infinite}
@keyframes kf-p6{51.95%{opacity:0}52.35%,59.75%{opacity:1}59.969%,100%{opacity:0}}
.z6{animation:kf-z6 160s linear infinite}
@keyframes kf-z6{58.938%{opacity:0;transform:scale(.9)}59.188%,59.625%{opacity:1;transform:none}59.875%,100%{opacity:0}}
.p7{animation:schweben 7s ease-in-out infinite,kf-p7 160s linear infinite}
.l7{animation:kf-p7 160s linear infinite}
@keyframes kf-p7{61.95%{opacity:0}62.35%,69.75%{opacity:1}69.969%,100%{opacity:0}}
.z7{animation:kf-z7 160s linear infinite}
@keyframes kf-z7{68.938%{opacity:0;transform:scale(.9)}69.188%,69.625%{opacity:1;transform:none}69.875%,100%{opacity:0}}
.p8{animation:schweben 7s ease-in-out infinite,kf-p8 160s linear infinite}
.l8{animation:kf-p8 160s linear infinite}
@keyframes kf-p8{71.95%{opacity:0}72.35%,79.75%{opacity:1}79.969%,100%{opacity:0}}
.z8{animation:kf-z8 160s linear infinite}
@keyframes kf-z8{78.938%{opacity:0;transform:scale(.9)}79.188%,79.625%{opacity:1;transform:none}79.875%,100%{opacity:0}}
.p9{animation:schweben 7s ease-in-out infinite,kf-p9 160s linear infinite}
.l9{animation:kf-p9 160s linear infinite}
@keyframes kf-p9{81.95%{opacity:0}82.35%,89.75%{opacity:1}89.969%,100%{opacity:0}}
.z9{animation:kf-z9 160s linear infinite}
@keyframes kf-z9{88.938%{opacity:0;transform:scale(.9)}89.188%,89.625%{opacity:1;transform:none}89.875%,100%{opacity:0}}
.p10{animation:schweben 7s ease-in-out infinite,kf-p10 160s linear infinite}
.l10{animation:kf-p10 160s linear infinite}
@keyframes kf-p10{91.95%{opacity:0}92.35%,99.75%{opacity:1}99.969%,100%{opacity:0}}
.z10{animation:kf-z10 160s linear infinite}
@keyframes kf-z10{98.938%{opacity:0;transform:scale(.9)}99.188%,99.625%{opacity:1;transform:none}99.875%,100%{opacity:0}}
/* Chat, ein Beitrag je Lot */
.c1{animation:kf-c1 160s linear infinite}
@keyframes kf-c1{2.813%{opacity:0;transform:translateY(8px)}3.188%,6.188%{opacity:1;transform:none}6.563%,100%{opacity:0}}
.c2{animation:kf-c2 160s linear infinite}
@keyframes kf-c2{12.813%{opacity:0;transform:translateY(8px)}13.188%,16.188%{opacity:1;transform:none}16.563%,100%{opacity:0}}
.c3{animation:kf-c3 160s linear infinite}
@keyframes kf-c3{22.813%{opacity:0;transform:translateY(8px)}23.188%,26.188%{opacity:1;transform:none}26.563%,100%{opacity:0}}
.c4{animation:kf-c4 160s linear infinite}
@keyframes kf-c4{32.813%{opacity:0;transform:translateY(8px)}33.188%,36.188%{opacity:1;transform:none}36.563%,100%{opacity:0}}
.c5{animation:kf-c5 160s linear infinite}
@keyframes kf-c5{42.813%{opacity:0;transform:translateY(8px)}43.188%,46.188%{opacity:1;transform:none}46.563%,100%{opacity:0}}
.c6{animation:kf-c6 160s linear infinite}
@keyframes kf-c6{52.813%{opacity:0;transform:translateY(8px)}53.188%,56.188%{opacity:1;transform:none}56.563%,100%{opacity:0}}
.c7{animation:kf-c7 160s linear infinite}
@keyframes kf-c7{62.813%{opacity:0;transform:translateY(8px)}63.188%,64.6%{opacity:1;transform:none}64.95%,100%{opacity:0}}
.c8{animation:kf-c8 160s linear infinite}
@keyframes kf-c8{72.813%{opacity:0;transform:translateY(8px)}73.188%,76.188%{opacity:1;transform:none}76.563%,100%{opacity:0}}
.c9{animation:kf-c9 160s linear infinite}
@keyframes kf-c9{82.813%{opacity:0;transform:translateY(8px)}83.188%,86.188%{opacity:1;transform:none}86.563%,100%{opacity:0}}
.c10{animation:kf-c10 160s linear infinite}
@keyframes kf-c10{92.813%{opacity:0;transform:translateY(8px)}93.188%,96.188%{opacity:1;transform:none}96.563%,100%{opacity:0}}
.c7b{animation:kf-c7b 160s linear infinite}
@keyframes kf-c7b{65.2%{opacity:0;transform:translateY(8px)}65.55%,68.3%{opacity:1;transform:none}68.65%,100%{opacity:0}}
/* Gebote: die Kette endet vor dem Zuschlag */
.g1{animation:kf-g1 160s linear infinite}
@keyframes kf-g1{2.7%{opacity:0;transform:translateY(8px)}3%,4.4%{opacity:1;transform:none}4.7%,100%{opacity:0}}
.g2{animation:kf-g2 160s linear infinite}
@keyframes kf-g2{4.3%{opacity:0;transform:translateY(8px)}4.6%,5.9%{opacity:1;transform:none}6.2%,100%{opacity:0}}
.g3{animation:kf-g3 160s linear infinite}
@keyframes kf-g3{6.375%{opacity:0;transform:translateY(8px)}6.688%,7.563%{opacity:1;transform:none}7.875%,100%{opacity:0}}
.g4{animation:kf-g4 160s linear infinite}
@keyframes kf-g4{7.375%{opacity:0;transform:translateY(8px)}7.688%,8.313%{opacity:1;transform:none}8.625%,100%{opacity:0}}
.g5{animation:kf-g5 160s linear infinite}
@keyframes kf-g5{8.125%{opacity:0;transform:translateY(8px)}8.438%,8.563%{opacity:1;transform:none}8.875%,100%{opacity:0}}
.g6{animation:kf-g6 160s linear infinite}
@keyframes kf-g6{12.4%{opacity:0;transform:translateY(8px)}12.7%,14.2%{opacity:1;transform:none}14.5%,100%{opacity:0}}
.g7{animation:kf-g7 160s linear infinite}
@keyframes kf-g7{14.05%{opacity:0;transform:translateY(8px)}14.35%,15.35%{opacity:1;transform:none}15.65%,100%{opacity:0}}
.g8{animation:kf-g8 160s linear infinite}
@keyframes kf-g8{15.15%{opacity:0;transform:translateY(8px)}15.45%,16.05%{opacity:1;transform:none}16.35%,100%{opacity:0}}
.g9{animation:kf-g9 160s linear infinite}
@keyframes kf-g9{15.95%{opacity:0;transform:translateY(8px)}16.25%,16.6%{opacity:1;transform:none}16.9%,100%{opacity:0}}
.g10{animation:kf-g10 160s linear infinite}
@keyframes kf-g10{16.55%{opacity:0;transform:translateY(8px)}16.85%,17%{opacity:1;transform:none}17.3%,100%{opacity:0}}
.g16{animation:kf-g16 160s linear infinite}
@keyframes kf-g16{32.4%{opacity:0;transform:translateY(8px)}32.7%,34.2%{opacity:1;transform:none}34.5%,100%{opacity:0}}
.g17{animation:kf-g17 160s linear infinite}
@keyframes kf-g17{34.05%{opacity:0;transform:translateY(8px)}34.35%,35.35%{opacity:1;transform:none}35.65%,100%{opacity:0}}
.g18{animation:kf-g18 160s linear infinite}
@keyframes kf-g18{35.15%{opacity:0;transform:translateY(8px)}35.45%,36.05%{opacity:1;transform:none}36.35%,100%{opacity:0}}
.g19{animation:kf-g19 160s linear infinite}
@keyframes kf-g19{35.95%{opacity:0;transform:translateY(8px)}36.25%,36.6%{opacity:1;transform:none}36.9%,100%{opacity:0}}
.g20{animation:kf-g20 160s linear infinite}
@keyframes kf-g20{36.55%{opacity:0;transform:translateY(8px)}36.85%,37%{opacity:1;transform:none}37.3%,100%{opacity:0}}
.g21{animation:kf-g21 160s linear infinite}
@keyframes kf-g21{42.6%{opacity:0;transform:translateY(8px)}42.9%,44.4%{opacity:1;transform:none}44.7%,100%{opacity:0}}
.g22{animation:kf-g22 160s linear infinite}
@keyframes kf-g22{44.3%{opacity:0;transform:translateY(8px)}44.6%,45.9%{opacity:1;transform:none}46.2%,100%{opacity:0}}
.g23{animation:kf-g23 160s linear infinite}
@keyframes kf-g23{46.375%{opacity:0;transform:translateY(8px)}46.688%,47.563%{opacity:1;transform:none}47.875%,100%{opacity:0}}
.g24{animation:kf-g24 160s linear infinite}
@keyframes kf-g24{47.375%{opacity:0;transform:translateY(8px)}47.688%,48.313%{opacity:1;transform:none}48.625%,100%{opacity:0}}
.g25{animation:kf-g25 160s linear infinite}
@keyframes kf-g25{48.125%{opacity:0;transform:translateY(8px)}48.438%,48.563%{opacity:1;transform:none}48.875%,100%{opacity:0}}
.g26{animation:kf-g26 160s linear infinite}
@keyframes kf-g26{52.6%{opacity:0;transform:translateY(8px)}52.9%,54.4%{opacity:1;transform:none}54.7%,100%{opacity:0}}
.g27{animation:kf-g27 160s linear infinite}
@keyframes kf-g27{54.3%{opacity:0;transform:translateY(8px)}54.6%,55.9%{opacity:1;transform:none}56.2%,100%{opacity:0}}
.g28{animation:kf-g28 160s linear infinite}
@keyframes kf-g28{56.375%{opacity:0;transform:translateY(8px)}56.688%,57.563%{opacity:1;transform:none}57.875%,100%{opacity:0}}
.g29{animation:kf-g29 160s linear infinite}
@keyframes kf-g29{57.375%{opacity:0;transform:translateY(8px)}57.688%,58.313%{opacity:1;transform:none}58.625%,100%{opacity:0}}
.g30{animation:kf-g30 160s linear infinite}
@keyframes kf-g30{58.125%{opacity:0;transform:translateY(8px)}58.438%,58.563%{opacity:1;transform:none}58.875%,100%{opacity:0}}
.g31{animation:kf-g31 160s linear infinite}
@keyframes kf-g31{62.6%{opacity:0;transform:translateY(8px)}62.9%,64.4%{opacity:1;transform:none}64.7%,100%{opacity:0}}
.g32{animation:kf-g32 160s linear infinite}
@keyframes kf-g32{64.3%{opacity:0;transform:translateY(8px)}64.6%,65.9%{opacity:1;transform:none}66.2%,100%{opacity:0}}
.g33{animation:kf-g33 160s linear infinite}
@keyframes kf-g33{66.375%{opacity:0;transform:translateY(8px)}66.688%,67.563%{opacity:1;transform:none}67.875%,100%{opacity:0}}
.g34{animation:kf-g34 160s linear infinite}
@keyframes kf-g34{67.375%{opacity:0;transform:translateY(8px)}67.688%,68.313%{opacity:1;transform:none}68.625%,100%{opacity:0}}
.g35{animation:kf-g35 160s linear infinite}
@keyframes kf-g35{68.125%{opacity:0;transform:translateY(8px)}68.438%,68.563%{opacity:1;transform:none}68.875%,100%{opacity:0}}
.g36{animation:kf-g36 160s linear infinite}
@keyframes kf-g36{72.6%{opacity:0;transform:translateY(8px)}72.9%,74.4%{opacity:1;transform:none}74.7%,100%{opacity:0}}
.g37{animation:kf-g37 160s linear infinite}
@keyframes kf-g37{74.3%{opacity:0;transform:translateY(8px)}74.6%,75.9%{opacity:1;transform:none}76.2%,100%{opacity:0}}
.g38{animation:kf-g38 160s linear infinite}
@keyframes kf-g38{76.375%{opacity:0;transform:translateY(8px)}76.688%,77.563%{opacity:1;transform:none}77.875%,100%{opacity:0}}
.g39{animation:kf-g39 160s linear infinite}
@keyframes kf-g39{77.375%{opacity:0;transform:translateY(8px)}77.688%,78.313%{opacity:1;transform:none}78.625%,100%{opacity:0}}
.g40{animation:kf-g40 160s linear infinite}
@keyframes kf-g40{78.125%{opacity:0;transform:translateY(8px)}78.438%,78.563%{opacity:1;transform:none}78.875%,100%{opacity:0}}
.g41{animation:kf-g41 160s linear infinite}
@keyframes kf-g41{82.6%{opacity:0;transform:translateY(8px)}82.9%,84.4%{opacity:1;transform:none}84.7%,100%{opacity:0}}
.g42{animation:kf-g42 160s linear infinite}
@keyframes kf-g42{84.3%{opacity:0;transform:translateY(8px)}84.6%,85.9%{opacity:1;transform:none}86.2%,100%{opacity:0}}
.g43{animation:kf-g43 160s linear infinite}
@keyframes kf-g43{86.375%{opacity:0;transform:translateY(8px)}86.688%,87.563%{opacity:1;transform:none}87.875%,100%{opacity:0}}
.g44{animation:kf-g44 160s linear infinite}
@keyframes kf-g44{87.375%{opacity:0;transform:translateY(8px)}87.688%,88.313%{opacity:1;transform:none}88.625%,100%{opacity:0}}
.g45{animation:kf-g45 160s linear infinite}
@keyframes kf-g45{88.125%{opacity:0;transform:translateY(8px)}88.438%,88.563%{opacity:1;transform:none}88.875%,100%{opacity:0}}
.g46{animation:kf-g46 160s linear infinite}
@keyframes kf-g46{92.6%{opacity:0;transform:translateY(8px)}92.9%,94.4%{opacity:1;transform:none}94.7%,100%{opacity:0}}
.g47{animation:kf-g47 160s linear infinite}
@keyframes kf-g47{94.3%{opacity:0;transform:translateY(8px)}94.6%,95.9%{opacity:1;transform:none}96.2%,100%{opacity:0}}
.g48{animation:kf-g48 160s linear infinite}
@keyframes kf-g48{96.375%{opacity:0;transform:translateY(8px)}96.688%,97.563%{opacity:1;transform:none}97.875%,100%{opacity:0}}
.g49{animation:kf-g49 160s linear infinite}
@keyframes kf-g49{97.375%{opacity:0;transform:translateY(8px)}97.688%,98.313%{opacity:1;transform:none}98.625%,100%{opacity:0}}
.g50{animation:kf-g50 160s linear infinite}
@keyframes kf-g50{98.125%{opacity:0;transform:translateY(8px)}98.438%,98.563%{opacity:1;transform:none}98.875%,100%{opacity:0}}
/* Sofortkauf-Pille und Hinweis-Pillen */
.sp3{animation:kf-sp3 160s linear infinite}
@keyframes kf-sp3{22.6%{opacity:0;transform:translateY(8px) scale(.92)}23%,27.6%{opacity:1;transform:none}27.9%{opacity:1;transform:scale(1.12)}28.15%{opacity:1;transform:scale(1)}28.5%,100%{opacity:0}}
.lt5{animation:kf-lt5 160s linear infinite}
@keyframes kf-lt5{42.5%{opacity:0;transform:translateY(6px)}42.9%,48.2%{opacity:1;transform:none}48.6%,100%{opacity:0}}
.bt9{animation:kf-bt9 160s linear infinite}
@keyframes kf-bt9{83%{opacity:0;transform:translateY(6px)}83.4%,88.2%{opacity:1;transform:none}88.6%,100%{opacity:0}}
/* Candy-Vergaben: Meldung und Konfetti */
.cp6{animation:kf-cp6 160s linear infinite}
@keyframes kf-cp6{55.3%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.9)}55.7%,58.5%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}58.9%,100%{opacity:0}}
.cp8{animation:kf-cp8 160s linear infinite}
@keyframes kf-cp8{75.4%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.9)}75.8%,78.4%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}78.8%,100%{opacity:0}}
.kn6 i{animation:kf-konf 160s linear infinite}
@keyframes kf-konf{54.9%{opacity:0;transform:translateY(0) rotate(0deg)}55.05%{opacity:1}57.5%{opacity:1;transform:translateY(880px) rotate(560deg)}57.6%{opacity:0}74.85%{opacity:0;transform:translateY(0) rotate(0deg)}75%{opacity:1}77.45%{opacity:1;transform:translateY(880px) rotate(560deg)}77.55%,100%{opacity:0}}
/* Rip or Ship: Entscheidung des Kaeufers, fertig vor dem Lotende */
.rs2{animation:kf-rs2 160s linear infinite}
@keyframes kf-rs2{18.3%{opacity:0;transform:translateX(-50%) translateY(8px)}18.55%,19.6%{opacity:1;transform:translateX(-50%)}19.85%,100%{opacity:0}}
.rs2 .rs-rip{animation:kf-rs2w 160s linear infinite}
@keyframes kf-rs2w{18.95%{transform:scale(1)}19.1%{transform:scale(1.14);background:#FFD93E;color:#3a2c00}19.6%{transform:scale(1.05);background:#FFD93E;color:#3a2c00}19.85%,100%{transform:scale(1)}}
.rs4{animation:kf-rs4 160s linear infinite}
@keyframes kf-rs4{38.3%{opacity:0;transform:translateX(-50%) translateY(8px)}38.55%,39.6%{opacity:1;transform:translateX(-50%)}39.85%,100%{opacity:0}}
.rs4 .rs-ship{animation:kf-rs4w 160s linear infinite}
@keyframes kf-rs4w{38.95%{transform:scale(1)}39.1%{transform:scale(1.14);background:#01C8F1;color:#06263a}39.6%{transform:scale(1.05);background:#01C8F1;color:#06263a}39.85%,100%{transform:scale(1)}}
/* Candy-Zaehler: steigt in kleinen Schritten, faellt bei den */
/* Vergaben auf null, Schleifenende = Schleifenanfang         */
.cz1{animation:kf-cz1 160s linear infinite}
@keyframes kf-cz1{0%,3.5%{opacity:1}3.55%,100%{opacity:0}}
.cz2{animation:kf-cz2 160s linear infinite}
@keyframes kf-cz2{3.5%{opacity:0;transform:scale(.4)}3.62%{opacity:1;transform:scale(1.3)}3.85%,7.5%{opacity:1;transform:scale(1)}7.55%,100%{opacity:0}}
.cz3{animation:kf-cz3 160s linear infinite}
@keyframes kf-cz3{7.5%{opacity:0;transform:scale(.4)}7.62%{opacity:1;transform:scale(1.3)}7.85%,12%{opacity:1;transform:scale(1)}12.05%,100%{opacity:0}}
.cz4{animation:kf-cz4 160s linear infinite}
@keyframes kf-cz4{12%{opacity:0;transform:scale(.4)}12.12%{opacity:1;transform:scale(1.3)}12.35%,16.5%{opacity:1;transform:scale(1)}16.55%,100%{opacity:0}}
.cz5{animation:kf-cz5 160s linear infinite}
@keyframes kf-cz5{16.5%{opacity:0;transform:scale(.4)}16.62%{opacity:1;transform:scale(1.3)}16.85%,21%{opacity:1;transform:scale(1)}21.05%,100%{opacity:0}}
.cz6{animation:kf-cz6 160s linear infinite}
@keyframes kf-cz6{21%{opacity:0;transform:scale(.4)}21.12%{opacity:1;transform:scale(1.3)}21.35%,26%{opacity:1;transform:scale(1)}26.05%,100%{opacity:0}}
.cz7{animation:kf-cz7 160s linear infinite}
@keyframes kf-cz7{26%{opacity:0;transform:scale(.4)}26.12%{opacity:1;transform:scale(1.3)}26.35%,31%{opacity:1;transform:scale(1)}31.05%,100%{opacity:0}}
.cz8{animation:kf-cz8 160s linear infinite}
@keyframes kf-cz8{31%{opacity:0;transform:scale(.4)}31.12%{opacity:1;transform:scale(1.3)}31.35%,36%{opacity:1;transform:scale(1)}36.05%,100%{opacity:0}}
.cz9{animation:kf-cz9 160s linear infinite}
@keyframes kf-cz9{36%{opacity:0;transform:scale(.4)}36.12%{opacity:1;transform:scale(1.3)}36.35%,41%{opacity:1;transform:scale(1)}41.05%,100%{opacity:0}}
.cz10{animation:kf-cz10 160s linear infinite}
@keyframes kf-cz10{41%{opacity:0;transform:scale(.4)}41.12%{opacity:1;transform:scale(1.3)}41.35%,45.5%{opacity:1;transform:scale(1)}45.55%,100%{opacity:0}}
.cz11{animation:kf-cz11 160s linear infinite}
@keyframes kf-cz11{45.5%{opacity:0;transform:scale(.4)}45.62%{opacity:1;transform:scale(1.3)}45.85%,49.5%{opacity:1;transform:scale(1)}49.55%,100%{opacity:0}}
.cz12{animation:kf-cz12 160s linear infinite}
@keyframes kf-cz12{49.5%{opacity:0;transform:scale(.4)}49.62%{opacity:1;transform:scale(1.3)}49.85%,52.5%{opacity:1;transform:scale(1)}52.55%,100%{opacity:0}}
.cz13{animation:kf-cz13 160s linear infinite}
@keyframes kf-cz13{52.5%{opacity:0;transform:scale(.4)}52.62%{opacity:1;transform:scale(1.3)}52.85%,55.2%{opacity:1;transform:scale(1)}55.25%,100%{opacity:0}}
.cz14{animation:kf-cz14 160s linear infinite}
@keyframes kf-cz14{55.2%{opacity:0;transform:scale(.4)}55.32%{opacity:1;transform:scale(1.3)}55.55%,57.5%{opacity:1;transform:scale(1)}57.55%,100%{opacity:0}}
.cz15{animation:kf-cz15 160s linear infinite}
@keyframes kf-cz15{57.5%{opacity:0;transform:scale(.4)}57.62%{opacity:1;transform:scale(1.3)}57.85%,60.5%{opacity:1;transform:scale(1)}60.55%,100%{opacity:0}}
.cz16{animation:kf-cz16 160s linear infinite}
@keyframes kf-cz16{60.5%{opacity:0;transform:scale(.4)}60.62%{opacity:1;transform:scale(1.3)}60.85%,63.5%{opacity:1;transform:scale(1)}63.55%,100%{opacity:0}}
.cz17{animation:kf-cz17 160s linear infinite}
@keyframes kf-cz17{63.5%{opacity:0;transform:scale(.4)}63.62%{opacity:1;transform:scale(1.3)}63.85%,66.5%{opacity:1;transform:scale(1)}66.55%,100%{opacity:0}}
.cz18{animation:kf-cz18 160s linear infinite}
@keyframes kf-cz18{66.5%{opacity:0;transform:scale(.4)}66.62%{opacity:1;transform:scale(1.3)}66.85%,69.5%{opacity:1;transform:scale(1)}69.55%,100%{opacity:0}}
.cz19{animation:kf-cz19 160s linear infinite}
@keyframes kf-cz19{69.5%{opacity:0;transform:scale(.4)}69.62%{opacity:1;transform:scale(1.3)}69.85%,72%{opacity:1;transform:scale(1)}72.05%,100%{opacity:0}}
.cz20{animation:kf-cz20 160s linear infinite}
@keyframes kf-cz20{72%{opacity:0;transform:scale(.4)}72.12%{opacity:1;transform:scale(1.3)}72.35%,74.7%{opacity:1;transform:scale(1)}74.75%,100%{opacity:0}}
.cz21{animation:kf-cz21 160s linear infinite}
@keyframes kf-cz21{74.7%{opacity:0;transform:scale(.4)}74.82%{opacity:1;transform:scale(1.3)}75.05%,77.5%{opacity:1;transform:scale(1)}77.55%,100%{opacity:0}}
.cz22{animation:kf-cz22 160s linear infinite}
@keyframes kf-cz22{77.5%{opacity:0;transform:scale(.4)}77.62%{opacity:1;transform:scale(1.3)}77.85%,81%{opacity:1;transform:scale(1)}81.05%,100%{opacity:0}}
.cz23{animation:kf-cz23 160s linear infinite}
@keyframes kf-cz23{81%{opacity:0;transform:scale(.4)}81.12%{opacity:1;transform:scale(1.3)}81.35%,85%{opacity:1;transform:scale(1)}85.05%,100%{opacity:0}}
.cz24{animation:kf-cz24 160s linear infinite}
@keyframes kf-cz24{85%{opacity:0;transform:scale(.4)}85.12%{opacity:1;transform:scale(1.3)}85.35%,89.5%{opacity:1;transform:scale(1)}89.55%,100%{opacity:0}}
.cz25{animation:kf-cz25 160s linear infinite}
@keyframes kf-cz25{89.5%{opacity:0;transform:scale(.4)}89.62%{opacity:1;transform:scale(1.3)}89.85%,94%{opacity:1;transform:scale(1)}94.05%,100%{opacity:0}}
.cz26{animation:kf-cz26 160s linear infinite}
@keyframes kf-cz26{94%{opacity:0;transform:scale(.4)}94.12%{opacity:1;transform:scale(1.3)}94.35%,97.5%{opacity:1;transform:scale(1)}97.55%,100%{opacity:0}}
.cz27{animation:kf-cz27 160s linear infinite}
@keyframes kf-cz27{97.5%{opacity:0;transform:scale(.4)}97.62%{opacity:1;transform:scale(1.3)}97.85%{opacity:1;transform:scale(1)}100%{opacity:1}}
/* <<< BUEHNE-TIMELINE */