/* Kreativdock — Webfonts · Liquid Glass (lokal statt CDN: Studio laeuft im Heimnetz) */
@font-face { font-family: "Bebas Neue"; font-style: normal; font-display: swap; font-weight: 400; src: url("/tg/fonts/BebasNeue.ttf") format("truetype"); }
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/tg/fonts/Inter.ttf") format("truetype"); }

/* ============================================================
   Kreativdock — Color tokens · „Liquid Glass" (Stand 03.10.2026)
   Warmer dunkler Raum, Gold als einziger Akzent.
   Legacy names (--kd-accent, --kd-surface …) stay as aliases so
   existing kits keep working; new canonical names follow the
   Liquid-Glass spec (--kd-panel, --kd-ink, --kd-gold …).
   ============================================================ */

:root {
  /* ---- Grund (warmes Fast-Schwarz, nie #000) ---- */
  --kd-bg:        #0e0d0b;   /* Hintergrund überall */
  --kd-bg-center: #1a1814;   /* Zentrum des radialen Grundverlaufs */
  --kd-bg-edge:   #070605;   /* Außenrand / Vignette */

  /* ---- Flächen ---- */
  --kd-panel:  #161512;      /* feste Flächen ohne Glas (Menüs, Eingaben) */
  --kd-panel2: #1e1c18;      /* Hover, Knöpfe */
  --kd-line:   #2d2922;      /* Trennlinien */
  --kd-line2:  #3d372c;      /* Rahmen von Knöpfen / Feldern */

  /* ---- Schrift (warmes Weiß, nie #fff) ---- */
  --kd-ink:   #f3efe6;       /* Haupttext, Titel */
  --kd-dim:   #9a948a;       /* Nebentext */
  --kd-faint: #6a655d;       /* Fußzeilen, Metadaten */

  /* ---- Gold — der einzige Akzent ---- */
  --kd-gold:       #d9b36a;
  --kd-gold-light: #ffe3b1;              /* Logo-Lichter, Glanzlichter */
  --kd-gold-deep:  #a9843a;              /* Gold auf hellem Grund */
  --kd-gold-soft:  rgba(217,179,106,0.14);
  --kd-gold-faint: rgba(217,179,106,0.06);
  --kd-gold-line:  rgba(217,179,106,0.30);

  /* ---- Nebentöne (nie als zweiter Akzent) ---- */
  --kd-red:   #e4573b;   /* nur weich im Hintergrund-Morph; Warnung, Badge */
  --kd-green: #5fb37a;   /* nur Status „ok" in Werkzeugen, nie im Video-Look */

  /* ---- Legacy aliases (bestehende Kits) ---- */
  --kd-surface:     var(--kd-panel);
  --kd-surface-2:   var(--kd-panel);
  --kd-surface-3:   var(--kd-panel2);
  --kd-text:        var(--kd-ink);
  --kd-text-strong: var(--kd-ink);
  --kd-text-muted:  var(--kd-dim);
  --kd-text-faint:  var(--kd-faint);
  --kd-accent:           var(--kd-gold);
  --kd-accent-secondary: var(--kd-gold-light);
  --kd-accent-dim:       var(--kd-gold-soft);
  --kd-accent-faint:     var(--kd-gold-faint);
  --kd-accent-line:      var(--kd-gold-line);
  --kd-border:        var(--kd-line);
  --kd-border-soft:   rgba(255,240,210,0.07);
  --kd-border-accent: rgba(217,179,106,0.22);

  /* ---- Status (nur Werkzeuge / Portal) ---- */
  --kd-success: var(--kd-green);
  --kd-warning: var(--kd-gold);
  --kd-info:    #8fa3b8;
  --kd-danger:  var(--kd-red);
  --kd-neutral: var(--kd-faint);
  --kd-success-dim: rgba(95,179,122,0.14);
  --kd-warning-dim: rgba(217,179,106,0.14);
  --kd-info-dim:    rgba(143,163,184,0.14);
  --kd-danger-dim:  rgba(228,87,59,0.14);

  /* ---- Selection ---- */
  --kd-selection-bg: var(--kd-gold);
  --kd-selection-fg: var(--kd-bg);

  /* ---- Semantic aliases ---- */
  --kd-text-body:     var(--kd-ink);
  --kd-text-heading:  var(--kd-ink);
  --kd-text-label:    var(--kd-dim);
  --kd-surface-page:  var(--kd-bg);
  --kd-surface-card:  var(--kd-panel);
  --kd-surface-input: var(--kd-panel);
  --kd-link:          var(--kd-gold);
}

::selection {
  background-color: var(--kd-selection-bg);
  color: var(--kd-selection-fg);
}

/* ============================================================
   Kreativdock — Typography tokens · Liquid Glass
   Display = Bebas Neue (Versalien, gesperrt) · Body/UI = Inter
   Code    = Mono (Ort/Datum-„Super", Ports, Code)
   --kd-font-mono is the legacy "UI label voice" → now Inter;
   real monospace lives in --kd-font-code.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --kd-font-display: "Bebas Neue", "Oswald", Impact, sans-serif;
  --kd-font-body:    "Inter Variable", "Inter", system-ui, sans-serif;
  --kd-font-mono:    "Inter Variable", "Inter", system-ui, sans-serif;  /* legacy label voice */
  --kd-font-code:    "DejaVu Sans Mono", "JetBrains Mono", ui-monospace, monospace;

  /* ---- Weights ---- */
  --kd-weight-regular:  400;
  --kd-weight-medium:   500;
  --kd-weight-semibold: 650;  /* Kartentitel */
  --kd-weight-bold:     700;  /* Kicker */

  /* ---- Web scale (Dashboard / Studio) ---- */
  --kd-text-hero:    clamp(44px, 6vw, 76px);  /* Seitentitel, Bebas, lh .92 */
  --kd-text-display: 4.5rem;
  --kd-text-h1:      3rem;
  --kd-text-h2:      30px;     /* Abschnittstitel, Bebas .06em */
  --kd-text-h3:      1.5rem;
  --kd-text-h4:      17px;     /* Kartentitel, Inter 650 */
  --kd-text-lg:      1.125rem;
  --kd-text-base:    15px;     /* Text, lh 1.5 */
  --kd-text-sm:      13.5px;   /* Nebentext, --kd-dim */
  --kd-text-xs:      12.5px;   /* Kicker, Versalien .22em, Gold */
  --kd-text-2xs:     11px;

  /* ---- Video scale (px bei 1080p) ---- */
  --kd-video-chapter-num: 320px;  /* @kind other */
  --kd-video-word:        180px;  /* @kind other */
  --kd-video-number:      132px;  /* @kind other */
  --kd-video-chapter:     90px;   /* @kind other */
  --kd-video-label:       56px;   /* @kind other */
  --kd-video-chip:        48px;   /* @kind other */
  --kd-video-line:        44px;   /* @kind other */
  --kd-video-sub:         38px;   /* @kind other */
  --kd-video-kicker:      34px;   /* @kind other */
  --kd-video-min:         40px;   /* @kind other */

  /* ---- Line heights ---- */
  --kd-leading-none:   0.92;
  --kd-leading-tight:  0.95;
  --kd-leading-snug:   1.3;
  --kd-leading-normal: 1.5;

  /* ---- Tracking ---- */
  --kd-tracking-tighter: 0.02em;  /* Bebas groß */
  --kd-tracking-tight:   0.03em;  /* Bebas Seitentitel */
  --kd-tracking-normal:  0;
  --kd-tracking-wide:    0.06em;  /* Bebas Abschnitt / Kapitelzahl */
  --kd-tracking-wider:   0.08em;  /* Mono-Super */
  --kd-tracking-widest:  0.18em;  /* Kicker (Video) */
  --kd-tracking-mega:    0.22em;  /* Kicker (Web) */
}

/* ============================================================
   Kreativdock — Spacing, radius & sizing tokens
   8px base rhythm. Radii are intentionally TINY — the brand uses
   2px everywhere (sharp, technical), only pills/dots go round.
   ============================================================ */

:root {
  /* ---- Spacing scale (8px base) ---- */
  --kd-space-0:   0;
  --kd-space-1:   0.25rem;  /* 4 */
  --kd-space-2:   0.5rem;   /* 8 */
  --kd-space-3:   0.75rem;  /* 12 */
  --kd-space-4:   1rem;     /* 16 */
  --kd-space-5:   1.5rem;   /* 24 */
  --kd-space-6:   2rem;     /* 32 */
  --kd-space-8:   3rem;     /* 48 */
  --kd-space-10:  4rem;     /* 64 */
  --kd-space-12:  6rem;     /* 96 */

  /* ---- Radius (Liquid Glass: weich, 14–20px) ---- */
  --kd-radius-none: 0;
  --kd-radius-xs:   8px;     /* Knöpfe, Felder */
  --kd-radius-sm:   10px;
  --kd-radius-md:   14px;    /* Karten (leichtes Glas) */
  --kd-radius-lg:   18px;    /* Glasscheibe (Standard) */
  --kd-radius-xl:   20px;    /* große Panels */
  --kd-radius-pill: 100px;   /* badges, tags */
  --kd-radius-full: 50%;     /* dots, avatars, cursor */

  /* ---- Chrome dimensions (marketing layout) ---- */
  --kd-rail-width:  60px;    /* fixed left/right vertical bars */
  --kd-bar-height:  40px;    /* fixed bottom HUD bar */

  /* ---- Hit target ---- */
  --kd-control-h:   44px;
  --kd-control-h-sm: 36px;
}

/* ============================================================
   Kreativdock — Effects: shadows, glows, overlays, motion.
   The signature is NOT drop-shadow — it's GLOW (accent bloom on
   status dots), film GRAIN, SCANLINES, and a difference-blend
   custom cursor. Motion is calm: long ease-out fades, no bounce.
   ============================================================ */

:root {
  /* ---- Shadows (used sparingly; lift > depth) ---- */
  --kd-shadow-sm:  0 1px 8px rgba(0,0,0,0.5);
  --kd-shadow-md:  0 8px 30px rgba(0,0,0,0.5);
  --kd-shadow-lg:  0 24px 60px rgba(0,0,0,0.6);

  /* ---- Glows (the real shadow system) ---- */
  --kd-glow-accent:  0 0 24px rgba(217,179,106,0.25);
  --kd-glow-success: 0 0 6px var(--kd-success);
  --kd-glow-danger:  0 0 6px var(--kd-danger);

  /* ---- Accent gradient (lines, text fills, panels) ---- */
  --kd-gradient-accent: linear-gradient(90deg, var(--kd-accent), var(--kd-accent-secondary));
  --kd-gradient-panel: linear-gradient(
    135deg,
    rgba(255,227,176,0.04) 0%,
    rgba(245,200,189,0.03) 50%,
    rgba(5,5,5,0.95) 100%
  ); /* @kind other */

  /* ---- Glass / blur ---- */
  --kd-blur-backdrop: blur(8px); /* @kind other */
  --kd-scrim: rgba(5,5,5,0.85);

  /* ---- Motion ---- */
  --kd-ease:        cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --kd-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --kd-dur-fast:    0.2s; /* @kind other */
  --kd-dur-base:    0.3s; /* @kind other */
  --kd-dur-slow:    0.8s; /* @kind other */

  /* ---- Film grain (SVG fractal noise, overlay blend) ---- */
  --kd-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* @kind other */
}

/* ---- Reusable overlay utilities ---- */
.kd-grain-overlay::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: var(--kd-grain);
  background-repeat: repeat;
}

.kd-scanlines::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
}

@keyframes kd-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ============================================================
   Kreativdock — Liquid Glass · Glas, Calm-Hintergrund, Bewegung
   Werte 1:1 aus Video-Render (theme.ts, Glass.tsx, Background.tsx)
   und Studio-Seiten (kd.css).
   ============================================================ */

:root {
  /* ---- Glasscheibe ---- */
  --kd-glass-blur:      blur(16px) saturate(1.35);   /* @kind other */
  --kd-glass-tint:      rgba(22,20,17,0.46);
  --kd-glass-tint-strong: rgba(18,16,13,0.66);
  --kd-glass-edge-top:  rgba(255,255,255,0.24);
  --kd-glass-edge-left: rgba(255,255,255,0.11);
  --kd-glass-gold:      rgba(217,179,106,0.30);
  --kd-glass-gold-web:  rgba(217,179,106,0.22);
  --kd-glass-radius:    18px;
  --kd-glass-shadow:    0 18px 50px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.25);

  /* ---- Calm-Hintergrund ---- */
  --kd-calm-base:     radial-gradient(ellipse at 50% 35%, #1a1814 0%, #0e0d0b 62%, #070605 100%); /* @kind other */
  --kd-calm-vignette: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.4) 100%); /* @kind other */

  /* ---- Bewegung ---- */
  --kd-ease-glass: cubic-bezier(.2,.8,.2,1);   /* @kind other */
  --kd-dur-glass:  0.62s;                      /* @kind other */
}

/* ---- Glasscheibe (Endzustand, Video/Panel) ---- */
.kd-glass {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--kd-glass-radius);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.11) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(140deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 38%, rgba(255,255,255,0) 60%, rgba(217,179,106,.05) 100%),
    var(--kd-glass-tint);
  -webkit-backdrop-filter: var(--kd-glass-blur);
  backdrop-filter: var(--kd-glass-blur);
  box-shadow:
    inset 0 1px 0 var(--kd-glass-edge-top),
    inset 1px 0 0 var(--kd-glass-edge-left),
    inset 0 -1px 0 rgba(0,0,0,.35),
    inset 0 0 0 1px var(--kd-glass-gold),
    inset 0 0 28px rgba(255,255,255,.04),
    var(--kd-glass-shadow);
}
.kd-glass--strong { background-color: var(--kd-glass-tint-strong); }

/* ---- Leichtes Glas für ruhige Seiten (kd.css) ---- */
.kd-glass-light {
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,246,228,.075), rgba(255,246,228,.045) 45%, rgba(255,246,228,.025));
  border: 1px solid rgba(255,236,200,.12);
  box-shadow: inset 0 1px 0 rgba(255,240,210,.22), 0 18px 40px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

/* ---- Aufbau aus der Unschärfe (+ Glanzband) ---- */
.kd-glass-in { animation: kd-glass-in var(--kd-dur-glass) var(--kd-ease-glass) both; }
.kd-glass-in::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent 35%, rgba(255,244,220,.2) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: kd-glass-sheen .9s var(--kd-ease-glass) .15s both;
}
@keyframes kd-glass-in {
  from { opacity: 0; transform: scale(.93); filter: blur(12px); border-radius: calc(var(--kd-glass-radius) * 2.2); }
  to   { opacity: 1; transform: none; filter: blur(0); border-radius: var(--kd-glass-radius); }
}
@keyframes kd-glass-sheen { to { transform: translateX(120%); } }

/* ---- Calm-Hintergrund: Grundverlauf + 3 Morph-Flecken + Vignette ---- */
.kd-calm { position: relative; background: var(--kd-calm-base); overflow: hidden; }
.kd-calm::before, .kd-calm::after, .kd-calm > .kd-calm-blob {
  content: ''; position: absolute; pointer-events: none; border-radius: 50%; z-index: 0;
}
.kd-calm::before { /* Gold oben links */
  width: 760px; height: 520px; left: 24%; top: 30%; transform: translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(217,179,106,.13), rgba(217,179,106,.045) 45%, transparent);
  animation: kd-blob-a 97s ease-in-out infinite alternate;
}
.kd-calm::after { /* Rot unten rechts */
  width: 700px; height: 560px; left: 78%; top: 70%; transform: translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(228,87,59,.09), rgba(228,87,59,.03) 45%, transparent);
  animation: kd-blob-b 113s ease-in-out infinite alternate;
}
.kd-calm > .kd-calm-blob { /* Gold oben rechts */
  width: 520px; height: 380px; left: 62%; top: 18%; transform: translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(217,179,106,.07), rgba(217,179,106,.025) 45%, transparent);
  animation: kd-blob-c 83s ease-in-out infinite alternate;
}
.kd-calm > .kd-calm-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: var(--kd-calm-vignette); }
.kd-calm > *:not(.kd-calm-blob):not(.kd-calm-vignette) { position: relative; z-index: 2; }
@keyframes kd-blob-a { to { transform: translate(calc(-50% + 140px), calc(-50% + 90px)) scale(1.08); } }
@keyframes kd-blob-b { to { transform: translate(calc(-50% - 140px), calc(-50% - 90px)) scale(.94); } }
@keyframes kd-blob-c { to { transform: translate(calc(-50% - 90px), calc(-50% + 70px)) scale(1.06); } }

/* ---- Kapitel-„//" (zwei schräge Goldbalken) ---- */
.kd-slashes { display: inline-flex; gap: 14px; }
.kd-slashes::before, .kd-slashes::after { content: ''; width: 18px; height: 170px; background: var(--kd-gold); transform: skewX(-24deg); }

@media (prefers-reduced-motion: reduce) {
  .kd-calm::before, .kd-calm::after, .kd-calm > .kd-calm-blob { animation: none; }
  .kd-glass-in, .kd-glass-in::after { animation: none; }
}

/* ============================================================
   Kreativdock — base reset & primitives.
   Imported by styles.css after the tokens. Establishes the dark
   canvas, body type, link/selection, and the terminal cursor.
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--kd-font-body);
  font-size: var(--kd-text-base);
  line-height: var(--kd-leading-normal);
  background-color: var(--kd-bg);
  color: var(--kd-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--kd-link);
  text-decoration: none;
  transition: color var(--kd-dur-base) var(--kd-ease);
}
a:hover { color: var(--kd-accent); }

/* Hidden scrollbars — the brand runs full-bleed, chromeless */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--kd-accent-dim); border-radius: 2px; }

/* Terminal blinking cursor — append to any element for live-typing feel */
.kd-cursor-blink::after {
  content: '█';
  margin-left: 2px;
  color: var(--kd-accent);
  animation: kd-blink 1s step-end infinite;
}

/* Gradient accent text */
.kd-text-gradient {
  background: var(--kd-gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hairline accent divider */
.kd-divider {
  height: 1px;
  width: 3rem;
  background: var(--kd-gradient-accent);
  border: none;
}

.st-frame{position:absolute;overflow:hidden;content-visibility:auto;contain-intrinsic-size:auto 900px;font-family:var(--kd-font-body);color:var(--kd-ink);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.st-frame *{box-sizing:border-box}
.st-frame:not(:hover)::before,.st-frame:not(:hover)::after,.st-frame:not(:hover)>.kd-calm-blob,.st-frame:not(:hover) .st-dot--live{animation-play-state:paused}
.st-frame button{font:inherit;color:inherit;cursor:pointer}
.st-frame a{color:var(--kd-gold);text-decoration:none}.st-frame a:hover{color:var(--kd-gold-light)}
.st-label{position:absolute;font-family:var(--kd-font-display);font-size:34px;letter-spacing:.06em;color:#3a352c}
.st-label small{font-family:var(--kd-font-body);font-size:15px;letter-spacing:0;color:#6a655d;margin-left:14px}
.st-root{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column}
.st-kick{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--kd-gold)}
.st-kick--dim{color:var(--kd-dim)}
.st-h1{font-family:var(--kd-font-display);font-weight:400;font-size:60px;line-height:.92;letter-spacing:.03em;margin:0}
.st-h2{font-family:var(--kd-font-display);font-weight:400;font-size:26px;line-height:1;letter-spacing:.06em;margin:0}
.st-h3{font-size:17px;font-weight:650;line-height:1.3;margin:0}
.st-dim{color:var(--kd-dim)}.st-faint{color:var(--kd-faint)}
.st-sm{font-size:13.5px}.st-xs{font-size:12px}
.st-code{font-family:var(--kd-font-code);font-variant-numeric:tabular-nums}
.st-row{display:flex;align-items:center;gap:12px}
.st-col{display:flex;flex-direction:column}
.st-grow{flex:1;min-width:0}
.st-scroll{overflow-y:auto;scrollbar-width:none}.st-scroll::-webkit-scrollbar{display:none}
.st-card{padding:20px}
.st-sep{height:1px;background:var(--kd-line);border:0;margin:0}
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--kd-line2);background:var(--kd-panel2);font-size:14px;font-weight:550;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.st-btn:hover{border-color:var(--kd-gold-line);color:var(--kd-gold-light)}
.st-btn--gold{background:var(--kd-gold);border-color:var(--kd-gold);color:#17140f}
.st-btn--gold:hover{background:var(--kd-gold-light);border-color:var(--kd-gold-light);color:#17140f}
.st-btn--ghost{background:transparent;border-color:transparent;color:var(--kd-dim)}
.st-btn--ghost:hover{border-color:transparent;color:var(--kd-ink)}
.st-btn--lg{height:48px;font-size:15px;padding:0 20px;border-radius:12px}
.st-btn--icon{width:40px;padding:0}
.st-btn--red:hover{border-color:rgba(228,87,59,.5);color:#f0a08f}
.st-btn[disabled]{opacity:.4;pointer-events:none}
.st-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--kd-line2);background:rgba(22,21,18,.6);font-size:13px;color:var(--kd-dim);white-space:nowrap}
.st-chip.on{border-color:var(--kd-gold-line);background:var(--kd-gold-soft);color:var(--kd-gold-light)}
.st-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:11.5px;font-weight:650;letter-spacing:.04em;background:var(--kd-panel2);color:var(--kd-dim);white-space:nowrap}
.st-tag--gold{background:var(--kd-gold-soft);color:var(--kd-gold)}
.st-tag--red{background:var(--kd-danger-dim);color:#f0a08f}
.st-tag--green{background:var(--kd-success-dim);color:#8fd0a3}
.st-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--kd-faint)}
.st-dot--live{background:var(--kd-green);box-shadow:0 0 8px var(--kd-green);animation:st-pulse 2s ease-in-out infinite}
.st-dot--gold{background:var(--kd-gold);box-shadow:0 0 6px var(--kd-gold)}
.st-dot--red{background:var(--kd-red);box-shadow:0 0 6px var(--kd-red)}
@keyframes st-pulse{50%{opacity:.45}}
.st-bar{height:4px;border-radius:4px;background:rgba(255,240,210,.08);overflow:hidden}
.st-bar>i{display:block;height:100%;background:var(--kd-gold);border-radius:4px;transition:width .6s var(--kd-ease-glass)}
.st-ph{position:relative;border-radius:12px;overflow:hidden;background:#1a1814 center/cover no-repeat}
.st-ph::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,9,7,.75));pointer-events:none}
.st-ph>span{position:absolute;left:10px;bottom:8px;z-index:1;font-family:var(--kd-font-code);font-size:11px;color:var(--kd-ink)}
.st-ph--empty{background:repeating-linear-gradient(135deg,rgba(255,240,210,.04) 0 8px,transparent 8px 16px),#15130f;border:1px dashed var(--kd-line2)}
.st-ph--empty::after{display:none}
.st-input{width:100%;min-height:44px;border-radius:12px;border:1px solid var(--kd-line2);background:rgba(22,21,18,.75);color:var(--kd-ink);font:inherit;padding:11px 14px;resize:none;outline:none}
.st-input:focus{border-color:var(--kd-gold-line)}
.st-input::placeholder{color:var(--kd-faint)}
.st-seg{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(14,13,11,.6);border:1px solid var(--kd-line)}
.st-seg>button{flex:1;height:36px;border:0;border-radius:9px;background:transparent;color:var(--kd-dim);font-size:13.5px;font-weight:550;padding:0 12px;white-space:nowrap}
.st-seg>button.on{background:var(--kd-panel2);color:var(--kd-ink);box-shadow:inset 0 0 0 1px var(--kd-gold-line)}
.st-toast{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:50;padding:12px 18px;border-radius:12px;background:rgba(30,28,24,.95);border:1px solid var(--kd-gold-line);font-size:14px;white-space:nowrap;animation:st-toast .35s var(--kd-ease-glass)}
@keyframes st-toast{from{opacity:0;transform:translate(-50%,10px)}}
/* Shell · Rechner */
.st-desk{display:grid;grid-template-columns:240px minmax(0,1fr);height:100%}
.st-side{display:flex;flex-direction:column;gap:4px;padding:22px 14px 18px;border-right:1px solid rgba(255,240,210,.06);background:rgba(10,9,7,.35)}
.st-nav{display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--kd-dim);font-size:14.5px;font-weight:550;text-align:left;width:100%}
.st-nav:hover{color:var(--kd-ink);background:rgba(255,240,210,.04)}
.st-nav.on{color:var(--kd-ink);background:rgba(255,240,210,.06);box-shadow:inset 2px 0 0 var(--kd-gold)}
.st-nav .st-count{margin-left:auto;font-size:12px;color:var(--kd-gold);font-weight:650}
.st-vid{display:grid;grid-template-columns:44px minmax(0,1fr) 10px;align-items:center;gap:8px;height:34px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--kd-dim);font-size:13.5px;text-align:left;width:100%}
.st-vid:hover{color:var(--kd-ink)}
.st-vid.on{color:var(--kd-ink);background:rgba(255,240,210,.05)}
.st-vid b{font-weight:400;font-family:var(--kd-font-code);font-size:11.5px;color:var(--kd-faint)}
.st-main{position:relative;min-width:0;display:flex;flex-direction:column;height:100%}
.st-top{display:flex;align-items:center;gap:20px;padding:20px 32px 0}
.st-chain{display:flex;align-items:center;gap:6px}
.st-step{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--kd-dim);font-size:13.5px;font-weight:600}
.st-step:hover{color:var(--kd-ink)}
.st-step.on{border-color:var(--kd-gold-line);background:var(--kd-gold-soft);color:var(--kd-gold-light)}
.st-step .n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;border:1px solid var(--kd-line2);color:var(--kd-faint)}
.st-step.done .n{background:var(--kd-gold);border-color:var(--kd-gold);color:#17140f}
.st-step.on .n{border-color:var(--kd-gold);color:var(--kd-gold)}
.st-chain-sep{width:16px;height:1px;background:var(--kd-line2)}
/* Shell · Handy */
.st-mob{display:flex;flex-direction:column;height:100%}
.st-mtop{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;margin-top:44px;flex:none}
.st-status{position:absolute;top:0;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;font-size:15px;font-weight:600;z-index:3}
.st-tabs{flex:none;display:grid;grid-template-columns:repeat(4,1fr);padding:6px 8px 26px;border-top:1px solid rgba(255,240,210,.07);background:rgba(12,11,9,.82);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.st-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:52px;border:0;background:transparent;color:var(--kd-faint);font-size:11px;font-weight:600;position:relative}
.st-tab.on{color:var(--kd-gold)}
.st-tab .badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:16px;height:16px;border-radius:8px;background:var(--kd-red);color:#fff4ee;font-size:10px;display:grid;place-items:center;padding:0 4px}
.st-mchain{display:flex;gap:4px;margin:0 16px 4px;flex:none}
.st-mchain>button{flex:1;height:44px;border:0;border-radius:10px;background:rgba(22,21,18,.55);color:var(--kd-dim);font-size:12.5px;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1.2}
.st-mchain>button small{font-size:10px;color:var(--kd-faint);font-weight:500}
.st-mchain>button.on{background:var(--kd-gold-soft);color:var(--kd-gold-light);box-shadow:inset 0 0 0 1px var(--kd-gold-line)}
.st-mchain>button.done small{color:var(--kd-gold)}
/* Zeitleiste */
.st-tl{position:relative;display:flex;gap:2px;height:56px}
.st-tl>button{position:relative;border:0;padding:0;border-radius:6px;background:rgba(255,240,210,.07);min-width:0;transition:background .2s}
.st-tl>button:hover{background:rgba(255,240,210,.13)}
.st-tl>button.on{background:var(--kd-gold-soft);box-shadow:inset 0 0 0 1px var(--kd-gold)}
.st-tl>button.leer{background:repeating-linear-gradient(135deg,rgba(255,240,210,.05) 0 4px,transparent 4px 8px)}
.st-tl>button .pin{position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--kd-red);box-shadow:0 0 0 2px #14120f}
.st-var{position:relative;border-radius:12px;border:1px solid var(--kd-line2);background:transparent;padding:0;overflow:hidden;text-align:left}
.st-var.on{border-color:var(--kd-gold);box-shadow:0 0 0 1px var(--kd-gold)}
.st-var .st-ph{border-radius:0}
.st-var .lbl{display:flex;align-items:center;justify-content:space-between;gap:6px;white-space:nowrap;padding:8px 10px;font-size:12.5px;font-weight:600;color:var(--kd-dim)}
.st-var.on .lbl{color:var(--kd-gold-light)}
.st-wave{display:flex;align-items:center;gap:2px;height:100%}
.st-wave>i{flex:1;background:var(--kd-gold);opacity:.55;border-radius:2px}

/* ---- Studio v2 als echte App (12.10.2026): ein Rahmen im ganzen Fenster ---- */
html,body{height:100%;margin:0;background:#0b0a08}
.st-app{position:fixed;inset:0;border-radius:0;content-visibility:visible}
.st-app .st-mtop{margin-top:6px}
.st-app .st-tabs{padding-bottom:max(10px, env(safe-area-inset-bottom))}
.st-app .st-mob .st-scroll.st-grow{min-height:0}
.st-app .st-main>.st-scroll,.st-app .st-main>.st-grow{min-height:0}
.st-load{position:fixed;inset:0;display:grid;place-items:center;color:var(--kd-dim);font:500 15px var(--kd-font-body)}
.st-hint{border-radius:12px;padding:10px 14px;background:var(--kd-warning-dim);border:1px solid var(--kd-gold-line);color:var(--kd-gold-light);font-size:13px}
a.st-btn{text-decoration:none;color:inherit}
a.st-btn--gold{color:#17140f}
/* Unterreiter (alte Seiten im neuen Design, 12.10.) */
.st-sub{display:flex;gap:6px;overflow-x:auto;padding:14px 32px 0;flex:none}
.st-mob .st-sub{padding:6px 16px 4px}
.st-sub .st-chip{height:34px;cursor:pointer}
.st-page{padding:20px 32px 32px;display:flex;flex-direction:column;gap:18px}
.st-mob .st-page{padding:12px 16px 24px}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.st-mob .st-grid{grid-template-columns:1fr}
.st-md{font-size:15px;line-height:1.6}.st-md p{margin:0 0 8px}.st-md ul{margin:0 0 8px;padding-left:20px}.st-md h2,.st-md h3{font:700 14px/1.3 var(--kd-font-body);color:var(--kd-gold);margin:12px 0 6px}
.st-md table{border-collapse:collapse;font-size:13px}.st-md td,.st-md th{border:1px solid var(--kd-line);padding:5px 7px;vertical-align:top;text-align:left}.st-md th{color:var(--kd-gold)}
.st-md code,.st-pre{font:13px var(--kd-font-code);background:var(--kd-panel2);padding:1px 4px;border-radius:4px}
.st-pre{display:block;white-space:pre-wrap;padding:12px;border-radius:10px;border:1px solid var(--kd-line);max-height:340px;overflow:auto;margin:0}
.st-check{display:flex;gap:12px;align-items:flex-start;padding:10px 4px;border-top:1px solid var(--kd-line);cursor:pointer;font-size:14px}
.st-check input{width:20px;height:20px;accent-color:#d9b36a;flex:none;margin-top:1px}
.st-lb{position:fixed;inset:0;z-index:100;background:rgba(8,7,6,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px}
.st-lb img{max-width:100%;max-height:calc(100vh - 140px);border-radius:12px;object-fit:contain}
/* kalender.js (aus dem alten Studio) braucht diese beiden */
:root{--kd-violet:#a56cd6;--kd-glass-line:rgba(255,236,200,.12);--kd-sans:var(--kd-font-body);--kd-display:var(--kd-font-display)}
.kd-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:7px 14px;border-radius:10px;border:1px solid var(--kd-line2);background:var(--kd-panel2);color:var(--kd-ink);font:550 14px var(--kd-font-body);cursor:pointer}
.kd-btn:hover{border-color:var(--kd-gold-line);color:var(--kd-gold-light)}.kd-btn.p{background:var(--kd-gold);color:#17140f;border-color:var(--kd-gold)}
.kal-pop{position:fixed}
/* 13.10.: Scrollen repariert – die Grid-Zeile der Desktop-Shell wuchs mit dem Inhalt (min-height:auto), dadurch war .st-main hoeher
   als das Fenster und .st-frame (overflow:hidden) schnitt ab. Jetzt feste Zeile = Fensterhoehe, die Screens scrollen selbst. */
.st-desk{grid-template-rows:minmax(0,1fr)}
.st-desk>.st-side,.st-main,.st-mob{min-height:0}
.st-mob>.st-scroll.st-grow{min-height:0}
.st-md{overflow-wrap:anywhere}.st-md img{max-width:100%;border-radius:8px}.st-md table{display:block;overflow-x:auto}.st-md h1{font:700 16px/1.3 var(--kd-font-body);color:var(--kd-gold);margin:12px 0 6px}
/* 13.10.: Hilfe-Icons (screens-h.jsx) */
.st-hi{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:6px;border-radius:50%;border:1px solid var(--kd-gold-line);color:var(--kd-gold);font:italic 700 11px/1 Georgia,serif;cursor:pointer;vertical-align:middle;flex:none;text-transform:none;letter-spacing:0;background:rgba(14,13,11,.4);position:relative}
.st-hi::after{content:"";position:absolute;inset:-12px}
.st-hi:hover,.st-hi:focus-visible{background:var(--kd-gold);color:#17140f;outline:none}
.st-mob .st-hi{width:22px;height:22px;font-size:13px}
/* 14.10.: Vollbild-Knopf an jedem Video (Vid in shell.jsx), oben rechts, damit er die nativen Steuerelemente unten nicht verdeckt */
.st-vbox>video{display:block}
.st-vid-fs{position:absolute;top:8px;right:8px;z-index:4;width:44px;height:44px;border-radius:12px;border:1px solid rgba(217,179,106,.5);background:rgba(14,13,11,.62);color:var(--kd-gold-light);display:grid;place-items:center;padding:0;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);touch-action:manipulation}
.st-vid-fs:hover,.st-vid-fs:focus-visible{background:var(--kd-gold);color:#17140f;outline:none}
.st-vbox:fullscreen .st-vid-fs,video:fullscreen+.st-vid-fs{display:none}
/* Telegram-App (14.10.2026): Ergaenzungen zu studio.css, Handy hochkant */
html,body{margin:0;background:#0e0d0b;color:var(--kd-ink);font-family:var(--kd-font-body);-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
*{box-sizing:border-box}
button{font:inherit;color:inherit;cursor:pointer}
.tg-app{min-height:100vh;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
.tg-kopf{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(14,13,11,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--kd-line)}
.tg-tabs{position:sticky;top:53px;z-index:9;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 16px;background:rgba(14,13,11,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tg-tabs button{height:44px;border-radius:12px;border:1px solid var(--kd-line2);background:var(--kd-panel);font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}
.tg-tabs button.on{border-color:var(--kd-gold-line);color:var(--kd-gold-light);background:var(--kd-gold-soft)}
.tg-inhalt{padding:12px 16px 32px;display:flex;flex-direction:column;gap:12px}
.tg-mitte{min-height:100vh;display:grid;place-items:center;align-content:center;text-align:center;padding:24px}
.tg-karte{width:100%;padding:12px;gap:12px;text-align:left;min-height:72px;border-radius:16px}
.tg-thumb{flex:none;width:64px;height:48px;border-radius:10px;background:#1a1814 center/cover no-repeat;display:grid;place-items:center;color:var(--kd-gold)}
.tg-bild{position:relative;display:block;width:100%;padding:0;border:0;border-radius:14px;overflow:hidden;background:#000}
.tg-bild img{display:block;width:100%;max-height:52vh;object-fit:contain}
.tg-lupe{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(14,13,11,.62);border:1px solid rgba(217,179,106,.5);color:var(--kd-gold-light)}
.tg-lb{position:fixed;inset:0;z-index:100;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px}
.tg-lb img{max-width:100%;max-height:calc(100vh - 60px);object-fit:contain;touch-action:pinch-zoom}
.tg-knoepfe{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.tg-knoepfe .st-btn{height:56px;font-size:17px;justify-content:center}
.tg-nochmal{border-color:var(--kd-red)!important;color:#f0a08f!important}
.tg-balken{height:8px;border-radius:5px;background:rgba(255,240,210,.08);overflow:hidden}
.tg-balken i{display:block;height:100%;background:var(--kd-gold);border-radius:5px}
.tg-balken--duenn{height:4px}
.tg-pill{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid}
.tg-tage{display:grid;grid-template-columns:repeat(14,1fr);gap:3px;height:70px;align-items:end}
.tg-tage span{display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:2px;align-items:center}
.tg-tage i{display:block;width:100%;background:rgba(217,179,106,.7);border-radius:3px 3px 0 0}
.tg-tage small{font-size:9px;color:var(--kd-faint)}
.tg-stunden{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;height:40px;align-items:end}
.tg-stunden i{display:block;background:rgba(217,179,106,.6);border-radius:2px 2px 0 0}
.st-btn--lg{min-height:52px}
.tg-tabs{grid-template-columns:repeat(5,1fr);gap:4px}.tg-tabs button{font-size:13.5px;padding:0 2px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.chips::-webkit-scrollbar{display:none}
.chip{height:38px;padding:0 12px;border-radius:19px;border:1px solid var(--kd-line2);background:var(--kd-panel);display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:14px;font-weight:600;flex:none}
.chip.on{border-color:var(--kd-gold-line);background:var(--kd-gold-soft);color:var(--kd-gold-light)}
.tg-steuer{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tg-steuer .st-btn{height:40px;justify-content:center;font-size:14px}
.tg-msg{max-width:86%;padding:10px 12px;border-radius:14px;font-size:15px;line-height:1.4;gap:8px}
.tg-msg.ich{align-self:flex-end;background:var(--kd-gold);color:#17140f;border-bottom-right-radius:4px}
.tg-msg.bot{align-self:flex-start;background:var(--kd-panel2);border-bottom-left-radius:4px}
.tg-zeit{font-size:11px;opacity:.6;align-self:flex-end}
.tg-schnell{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tg-schnell button{min-height:44px;border-radius:12px;border:1px solid var(--kd-line2);background:var(--kd-panel);font-weight:600;font-size:13.5px;padding:4px 6px}
.tg-schnell button.ohne-ki{border-style:dashed}
.tg-eingabe{position:sticky;bottom:0;display:flex;gap:8px;align-items:flex-end;padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:rgba(14,13,11,.95)}
.tg-faq{border-top:1px solid var(--kd-line)}
.tg-md{padding:0 0 12px 22px;line-height:1.55}.tg-md p{margin:0 0 8px}.tg-md ul,.tg-md ol{margin:0 0 8px;padding-left:20px}.tg-md code{font:12.5px var(--kd-font-code);background:var(--kd-panel2);padding:1px 4px;border-radius:4px}.tg-md .tg-h{display:block;margin:10px 0 4px;color:var(--kd-gold)}
/* 14.10. Scroll-Fix iOS/Telegram: Seite selbst scrollt nicht (Telegram faengt Wischen nach unten ab),
   gescrollt wird nur der Inhaltsbereich zwischen Kopf/Reitern und unterem Rand. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
.tg-app{position:fixed;inset:0;height:var(--tg-viewport-height,100dvh);min-height:0;display:flex;flex-direction:column;padding-bottom:0;background:radial-gradient(120% 60% at 20% 0%,rgba(217,179,106,.07),transparent 60%),#0e0d0b}
.tg-kopf,.tg-tabs{position:relative;top:auto;flex:none}
.tg-inhalt{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding-bottom:calc(32px + env(safe-area-inset-bottom))}
.tg-mitte{min-height:100%}
/* 14.10.: Reiter als Icon-Leiste unten (wie iOS) */
.tg-leiste{flex:none;display:grid;border-top:1px solid var(--kd-line2);background:rgba(14,13,11,.97);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.tg-leiste button{position:relative;height:50px;border:0;background:transparent;color:var(--kd-dim);display:grid;place-items:center;border-radius:12px;-webkit-touch-callout:none;user-select:none}
.tg-leiste button.on{color:var(--kd-gold);background:var(--kd-gold-soft)}
.tg-badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--kd-red);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.tg-avatar{width:38px;height:38px;border-radius:50%;background:var(--kd-gold-soft);display:grid;place-items:center;font-weight:700;color:var(--kd-gold)}
.tg-sw{width:50px;height:30px;border-radius:15px;background:rgba(255,240,210,.12);position:relative;flex:none;border:1px solid var(--kd-line2)}
.tg-sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#8a8170}
.tg-sw.an{background:rgba(80,200,120,.35);border-color:rgba(80,200,120,.6)}.tg-sw.an::after{left:23px;background:#e9f7ee}
.tg-eingabe{padding-bottom:10px}
/* 14.10.: Willkommens-Rundgang */
.tg-rundgang{position:fixed;inset:0;z-index:200;background:#0e0d0b;display:flex;flex-direction:column;height:var(--tg-viewport-height,100dvh)}
.tg-rg-karten{flex:1;min-height:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tg-rg-karten::-webkit-scrollbar{display:none}
.tg-rg-karte{flex:0 0 100%;scroll-snap-align:center;padding:8px 16px;min-height:0}
.tg-rg-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--kd-gold-soft);color:var(--kd-gold)}
.tg-fb-link{border:0;background:transparent;color:inherit;opacity:.8;text-decoration:underline;font-size:11px;padding:0 0 0 8px;cursor:pointer}
.tg-msg.ich .tg-fb-link{display:none}
.tg-inhalt>*{flex-shrink:0}
.tg-zeile{width:100%;gap:10px;padding:9px 0;border:0;border-top:1px solid var(--kd-line);background:transparent;text-align:left;min-height:46px}
.tg-zeile:disabled{opacity:.5}
.tg-vorschau{flex:none;background:var(--kd-gold-soft);color:var(--kd-gold-light);font-size:12.5px;font-weight:600;padding:6px 16px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.tg-vorschau button{border:1px solid var(--kd-gold-line);background:transparent;border-radius:8px;padding:2px 10px;font-size:12px;color:inherit}
/* Home-Kacheln + entschlackte Leiste (15.10.) */
.tg-kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (min-width:560px){.tg-kacheln{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:860px){.tg-kacheln{grid-template-columns:repeat(6,minmax(0,1fr))}}
.tg-kachel{position:relative;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:2px;padding:10px;border-radius:14px;color:inherit;text-align:left;min-width:0}
.tg-kachel>svg{color:var(--kd-gold);margin-bottom:auto}
.tg-kachel-name{font-weight:700;font-size:13px;line-height:1.2;word-break:break-word}
.tg-kachel-info{display:none}
.tg-kachel .tg-kachel-zahl{top:8px;left:auto;right:8px}
.tg-kachel-punkt{position:absolute;top:10px;right:10px;width:8px;height:8px}
.tg-leiste button{height:56px;grid-template-rows:auto auto;gap:2px;align-content:center}
.tg-leiste-name{font-size:11px;line-height:1;white-space:nowrap}