/* BAZA Club — Mitglieder-Plattform, klickbarer Entwurf (19.10.2026)
   Gestaltungssystem: Designer. Stil = neue BAZA-Website (weiß, Inter, Orange nur für Handlung) + Bedienelemente aus Arenal
   (Seitenleiste mit Symbol-Kacheln, Kapsel-Knöpfe, gleitender Umschalter, Kürzel-Chips, „Als Nächstes“-Zeilen, Zahlenleiste).
   Belege: Leitfaden-Nummern in Klammern; Quelle HIG, https://developer.apple.com/design/human-interface-guidelines/

   BAUSTEINE (für alle Ansichten, nichts Eigenes daneben erfinden):
   Layout   .page (Inhalt einer Ansicht) · .vh (Ansichtskopf: .vh__back, .vh__title, .vh__sub, .vh__actions)
            .section (+ .section__head mit h2.h-sec und .link) · .grid-2 / .grid-3 (bricht mobil auf 1 Spalte)
            .stack (senkrechter Abstand 16) · .row (waagrecht, mittig, Abstand 12) · .scroller (waagrechte Kartenreihe)
   Text     .h-xl 34 · .h-l 28 · .h-m 22 · .h-s 20 · .t-head 17/600 · .t-body 17 · .t-sub 15 · .t-foot 13 · .t-cap 12
            .muted (ink-2) · .faint (ink-3) · .num (Ziffern gleich breit) · .ok (grün, Status) · .dim (grauer zweiter Teil einer Überschrift)
   Flächen  .card (hell, Rand) · .card--pad · .card--dark (Tiefe, dunkel) · .card--photo (Foto mit Abdunklung, Text weiß)
   Knöpfe   .btn + .btn--primary (orange, höchstens 1 je Ansicht) | .btn--tinted (Arenal-Kapsel) | .btn--dark | .btn--plain
            .btn--lg 52 px · .btn--sm 36 px Optik, Trefferfläche 44 · .btn--block · .btn--icon (44 × 44 rund)
            .kbd (Kürzel-Chip, nur Desktop) · .badge (Zähler) · .chip (Filter, .is-on) · .demo (gelbe Demo-Marke)
   Listen   .list (gruppierte Liste) > .li (Zeile, a oder button) > .tile.tile--{blue|green|purple|red|teal|yellow|gray|ink}
            + .li__body (.li__title, .li__sub) + .li__end (Wert, .chev) · .check (runder Haken, .is-done)
   Zahlen   .stats > .stat (.stat__n, .stat__l) · .bar > i (Fortschritt, style="--v:40%") · .ring (SVG, siehe Start)
   Umschalter .seg (App.seg(), gleitender Daumen wie Arenal)
   Formular .field (label + input/textarea/select + .field__hint / .field__err) · .choices > .choice (Pillen-Auswahl, input radio/checkbox)
   Chat     .chat · .msgs · .bubble (.bubble--in | .bubble--out) · .composer
   Media    .thumb (16:9 Bild mit .thumb__badge, .thumb__play) · .avatar (Initialen-Kreis)
   Dialog   App.sheet(html) öffnet <dialog class="sheet"> (unten mobil, mittig Desktop)
*/

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* F1–F6, D1–D3: Farben als Tokens, Kontrast gemessen mit _tools/contrast.py (WCAG-Formel) */
:root {
  color-scheme: only light;    /* immer weiß, auch bei System-Dunkelmodus (Dennis 19.10. 20:10; bewusste Abweichung von D1) */
  --bg: #ffffff;
  --surface: #f4f4f1;           /* Karten, Seitenleiste */
  --surface-2: #e9e9e4;         /* gedrückt, Felder */
  --ink: #0f1012;               /* 19,0:1 auf bg */
  --ink-2: #4d5156;             /* 8,0 bg · 7,3 surface */
  --ink-3: #63676c;             /* 5,7 bg · 5,2 surface (Kleintext) */
  --ink-dim: #6b6f74;           /* zweiter Ton großer Überschriften, ~5:1, nur ab 20 px */
  --line: rgba(15,16,18,.09);
  --line-2: rgba(15,16,18,.16);
  --hover: rgba(15,16,18,.05);
  --press: rgba(15,16,18,.09);
  /* Marke: exakt #ff6a00 aus Kirills Logo (material/download/bilder/favicon.svg), wie die Website (site.css --brand).
     Weiß auf #ff6a00 fällt durch (gemessen 2,87:1) → Schrift auf Orange ist Logo-Schwarz #141416. Orange nie als Text auf Weiß (F2, F4). */
  --brand: #ff6a00;
  --accent-a: #ff6a00;          /* Knopf-Fläche */
  --accent-b: #ff6a00;
  --on-accent: #141416;         /* Schrift auf Orange */
  --accent-ink: var(--ink);     /* Links und Textknöpfe schwarz, Orange nur als Unterstrich */
  --accent-soft: rgba(255,106,0,.12);
  --ok: #1f7a4a;                /* Status erledigt 5,3 bg · 4,8 surface */
  --ok-soft: rgba(31,122,74,.12);
  --err: #b42318;               /* 6,6 bg */
  --focus: #0b57d0;
  --dark: #111214;              /* Tiefe-Karten */
  --dark-ink: #f2f2ef;          /* 16,7:1 */
  --dark-ink-2: #a7aaae;        /* 8,0:1 */
  --dark-accent: #ff6a00;       /* Logo-Orange auf --dark #111214: 6,5:1 (gemessen) */
  --dark-ok: #4cd38a;           /* 9,8:1 */
  --demo-bg: transparent; --demo-ink: #63676c; --demo-line: rgba(15,16,18,.22);   /* ruhige Demo-Marke statt gelb, Schrift 5,7:1 auf Weiß, 5,2:1 auf Karte (gemessen) */
  --bubble-in: #f0f0ec;         /* ink 16,7:1 · ink-3 5,0:1 */
  --bubble-out: #17181b; --bubble-out-ink: #ffffff; --bubble-out-meta: #a7aaae;  /* 17,8 · 7,6 */
  --glass: rgba(255,255,255,.74);
  --glass-solid: rgba(255,255,255,.96);
  --shadow-1: 0 1px 2px rgba(15,16,18,.05), 0 4px 14px rgba(15,16,18,.05);
  --shadow-2: 0 2px 6px rgba(15,16,18,.06), 0 18px 48px -12px rgba(15,16,18,.22);
  --shadow-3: 0 30px 80px -24px rgba(15,16,18,.42);

  /* T1, T3, T6: iOS-Leiter 34/28/22/20/17/15/13/12 in rem, wächst mit der Browser-Schrift */
  --fs-xl: 2.125rem; --fs-l: 1.75rem; --fs-m: 1.375rem; --fs-s: 1.25rem;
  --fs-body: 1.0625rem; --fs-callout: 1rem; --fs-sub: .9375rem; --fs-foot: .8125rem; --fs-cap: .75rem; --fs-tab: .6875rem;
  /* A1: 4-px-Raster */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --gutter: 16px;
  --r-card: 20px; --r-tile: 14px; --r-row: 12px; --r-chip: 8px;
  --side-w: 272px;
  --tab-h: 64px;
  /* B3: Bewegungs-Tokens */
  --dur-press: 120ms; --dur-hover: 200ms; --dur-view: 300ms; --dur-sig: 1100ms;
  --ease: cubic-bezier(.22,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.34,1.4,.5,1);
}
/* Kein Dunkelmodus: Dennis 19.10. 20:10 „dass das alles in Weiß ist und nicht in Schwarz“ — wie die Website. */
/* F6: erhöhter Kontrast */
@media (prefers-contrast: more) {
  :root { --ink-2: var(--ink); --ink-3: var(--ink); --line: var(--line-2); --glass: var(--glass-solid); }
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; background: var(--bg); }  /* T6: keine feste Wurzelgröße */
body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;   /* T4/T5: eine Familie, kein SF Pro */
  font-size: var(--fs-body); line-height: 1.47; letter-spacing: -.011em;              /* T1 17 px, T7, T8 */
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 10px; }   /* Z2/Z3 */
[tabindex="-1"]:focus { outline: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); }
.skip:focus { top: 12px; }

/* ---------- Text (T3: wenige Stufen, Gewicht + Größe + Farbe) ---------- */
.h-xl { font-size: var(--fs-xl); line-height: 1.12; font-weight: 700; letter-spacing: -.028em; }
.h-l  { font-size: var(--fs-l); line-height: 1.15; font-weight: 700; letter-spacing: -.024em; }
.h-m  { font-size: var(--fs-m); line-height: 1.22; font-weight: 650; letter-spacing: -.02em; }
.h-s  { font-size: var(--fs-s); line-height: 1.25; font-weight: 600; letter-spacing: -.017em; }
.t-head { font-size: var(--fs-body); font-weight: 600; letter-spacing: -.014em; }
.t-body { font-size: var(--fs-body); }
.t-sub { font-size: var(--fs-sub); line-height: 1.4; letter-spacing: -.009em; }
.t-foot { font-size: var(--fs-foot); line-height: 1.38; letter-spacing: -.003em; }
.t-cap { font-size: var(--fs-cap); line-height: 1.33; letter-spacing: 0; }
.muted { color: var(--ink-2); } .faint { color: var(--ink-3); }
.ok { color: var(--ok); } .err { color: var(--err); } .accent { color: var(--accent-ink); }
.num { font-variant-numeric: tabular-nums; }
/* Keine Pill-Labels über Überschriften (Dennis, Rückmeldung 19.10.): Einordnung steckt im grauen zweiten Teil der Überschrift */
.dim { color: var(--ink-dim); }   /* Überschrift zweifarbig wie auf der Website */
.card--dark .dim, .card--photo .dim { color: var(--dark-ink-2); }
.prose { max-width: 62ch; }   /* T9 */
.prose p + p { margin-top: var(--s3); }
.link { color: var(--ink); font-weight: 600; font-size: var(--fs-sub); display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.link:hover { text-decoration-color: var(--ink); }
.money { font-variant-numeric: tabular-nums; }
.money__rub, .money__eur { white-space: nowrap; }   /* P06: bei 200 % darf zwischen ₽ und € umbrechen */
.money__eur { color: var(--ink-3); font-weight: 450; font-size: .86em; }
.card--dark .money__eur, .card--photo .money__eur { color: var(--dark-ink-2); }

/* ---------- App-Rahmen (L4: Bedienung als eigene Ebene über dem Inhalt) ---------- */
.app { min-height: 100dvh; }
.side { display: none; }
.main { min-width: 0; overflow-x: clip; }   /* seitliches Einblenden erzeugt nie waagrechtes Scrollen */
.page { max-width: 1120px; margin: 0 auto;
  padding: calc(var(--s4) + env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) calc(var(--tab-h) + 40px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); }  /* L6 */
.page--flush { padding: 0; max-width: none; }

/* Kompakte Kopfzeile mobil: erscheint, wenn der große Titel wegscrollt (M6: einziger Kanteneffekt) */
.topbar { position: fixed; z-index: 30; inset: 0 0 auto 0; height: calc(48px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 56px 0;
  display: grid; place-items: center; font-weight: 600; font-size: var(--fs-body);
  background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  border-bottom: 1px solid var(--line); opacity: 0; pointer-events: none; transition: opacity var(--dur-hover) var(--ease); }
.topbar.is-on { opacity: 1; pointer-events: auto; }
.topbar > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__back { position: absolute; left: 4px; bottom: 2px; }

/* Ansichtskopf */
.vh { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3) var(--s4); margin-bottom: var(--s5); }
.vh__text { flex: 1 1 260px; min-width: 0; }
.vh__back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: 0 0 2px -8px; padding: 0 8px; border-radius: 999px;
  color: var(--accent-ink); font-weight: 500; font-size: var(--fs-body); }
.vh__back:hover { background: var(--hover); }
.vh__title { font-size: var(--fs-xl); line-height: 1.12; font-weight: 700; letter-spacing: -.028em; }
.vh__sub { margin-top: 6px; color: var(--ink-2); font-size: var(--fs-body); max-width: 62ch; }
.vh__actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

.section { margin-top: var(--s7); }
.section:first-child { margin-top: 0; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.h-sec { font-size: var(--fs-s); font-weight: 650; letter-spacing: -.018em; }
.stack > * + * { margin-top: var(--s4); }
.row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.grid-2, .grid-3 { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1180px) { .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 78%); gap: var(--s3); overflow-x: auto;
  scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) var(--s3); scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; }
@media (min-width: 720px) { .scroller { grid-auto-columns: minmax(280px, 1fr); grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); overflow: visible; margin: 0; padding: 0; } }

/* ---------- Flächen (M5: ruhige Flächen im Inhalt, kein Glas) ---------- */
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.card--pad { padding: var(--s5); }
.card--white { background: var(--bg); box-shadow: var(--shadow-1); }
.card--dark { background: var(--dark); color: var(--dark-ink); border-color: transparent; box-shadow: var(--shadow-2); }
.card--dark .muted { color: var(--dark-ink-2); }
.card--dark .accent { color: var(--dark-accent); }
.card--dark .ok { color: var(--dark-ok); }
.card--photo { background: #111214 center/cover no-repeat; color: #f2f2ef; border-color: transparent; box-shadow: var(--shadow-2); isolation: isolate; }
.card--photo::before { content: ""; position: absolute; inset: 0; z-index: -1;                        /* BI6: Abdunklung für Text über Foto */
  background: linear-gradient(180deg, rgba(10,10,12,.15) 0%, rgba(10,10,12,.55) 45%, rgba(10,10,12,.88) 100%); }
.card--photo .muted { color: #c9cbce; }
a.card, button.card { display: block; text-align: left; width: 100%; transition: transform var(--dur-press) var(--ease), box-shadow var(--dur-hover) var(--ease); }
a.card:hover, button.card:hover { box-shadow: var(--shadow-2); }
a.card:active, button.card:active { transform: scale(.985); }

/* ---------- Knöpfe (Z1 44 px, Z2 Hover/Druck/Fokus, F3 ein Primärknopf je Ansicht) ---------- */
.btn { --h: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--h); padding: 0 20px;
  border-radius: 999px; font-size: var(--fs-sub); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; text-align: center;
  background: var(--hover); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform var(--dur-press) var(--ease), background-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }
.btn .ic { width: 18px; height: 18px; }
.btn:hover { background: var(--press); }
.btn:active { transform: scale(.97); }
.btn--primary { color: var(--on-accent); background: var(--brand);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px -8px rgba(255,106,0,.7); }
.btn--primary:hover { background: var(--brand); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 30px -10px rgba(255,106,0,.85); transform: translateY(-1px); }
.btn--primary:active { transform: scale(.97); }
.btn--tinted { background: var(--accent-soft); color: var(--ink); box-shadow: none; }
.btn--tinted:hover { background: rgba(255,106,0,.2); }
.btn--dark { background: var(--ink); color: var(--bg); box-shadow: none; }
.btn--dark:hover { background: var(--ink-2); }
.card--dark .btn:not(.btn--primary), .card--photo .btn:not(.btn--primary) { background: rgba(255,255,255,.1); color: #f2f2ef; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.card--dark .btn:not(.btn--primary):hover, .card--photo .btn:not(.btn--primary):hover { background: rgba(255,255,255,.18); }
.btn--plain { background: none; box-shadow: none; color: var(--ink); padding: 0 12px;
  text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.btn--plain:hover { background: var(--hover); }
.btn--lg { --h: 52px; padding: 0 26px; font-size: var(--fs-body); }
.btn--block { width: 100%; }
.btn--sm { --h: 36px; padding: 0 14px; font-size: var(--fs-foot); position: relative; }
.btn--sm::after { content: ""; position: absolute; inset: -4px 0; }   /* Z1: 44 px Trefferfläche */
.btn--icon { --h: 44px; width: 44px; padding: 0; }
.btn--icon .ic { width: 22px; height: 22px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }   /* A2: 12 px zwischen Knöpfen mit Fläche */

.kbd { display: none; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 6px; place-items: center; font-size: var(--fs-cap); font-weight: 600;
  color: var(--ink-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (min-width: 1024px) { .kbd { display: inline-grid; } }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: var(--fs-cap);
  font-weight: 700; background: var(--brand); color: var(--on-accent); font-variant-numeric: tabular-nums; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: var(--fs-sub);
  font-weight: 500; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); position: relative; }
.chip::after { content: ""; position: absolute; inset: -4px 0; }   /* Z1: Trefferfläche 44 px */
.chip:hover { background: var(--surface-2); }
.chip.is-on { background: var(--ink); color: var(--bg); box-shadow: none; }
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.demo { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: var(--fs-cap); font-weight: 600;
  letter-spacing: .01em; background: var(--demo-bg); color: var(--demo-ink); box-shadow: inset 0 0 0 1px var(--demo-line); vertical-align: middle; white-space: nowrap; }
.card--dark .demo, .card--photo .demo, .lv-stage .demo { color: #c9cbce; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }   /* 11,5:1 auf #111214 (gemessen) */
.pill-status { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-foot);
  font-weight: 600; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.dot--off { background: var(--ink-3); }

/* ---------- Symbole (eigene SVG, 1,8er Strich passend zu Inter 500, I2/I3) ---------- */
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tile { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 30%; flex: none; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.12); }
.tile .ic { width: 18px; height: 18px; stroke-width: 2; }
.tile--lg { width: 44px; height: 44px; } .tile--lg .ic { width: 24px; height: 24px; }
.tile--blue   { background: linear-gradient(180deg, #4b8df8, #2563eb); }
.tile--green  { background: linear-gradient(180deg, #3cc985, #1f9d5c); }
.tile--purple { background: linear-gradient(180deg, #a68bfa, #7c3aed); }
.tile--red    { background: linear-gradient(180deg, #f8817a, #dc2f2f); }
.tile--teal   { background: linear-gradient(180deg, #3ec1e8, #0891b2); }
.tile--yellow { background: linear-gradient(180deg, #fbc33c, #d98a06); }
.tile--gray   { background: linear-gradient(180deg, #a3a6ad, #6f737a); }
.tile--indigo { background: linear-gradient(180deg, #7480f7, #4338ca); }
.tile--ink    { background: linear-gradient(180deg, #34363b, #141416); }
.tile--brand  { background: none; box-shadow: none; }
.tile--brand svg { width: 100%; height: 100%; }

/* ---------- Listen (Arenal „Als Nächstes“-Zeilen) ---------- */
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 6px; }
.list--plain { background: none; border: 0; padding: 0; }
.li { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 56px; padding: 10px 12px; border-radius: var(--r-row); text-align: left;
  transition: background-color var(--dur-hover) var(--ease), transform var(--dur-press) var(--ease); position: relative; }
a.li:hover, button.li:hover, label.li:hover { background: var(--hover); }
a.li:active, button.li:active { background: var(--press); }
.li + .li::before { content: ""; position: absolute; left: 56px; right: 12px; top: 0; height: 1px; background: var(--line); }
.li:hover::before, .li:hover + .li::before { opacity: 0; }
.li__body { flex: 1; min-width: 0; }
.li__title, .li__sub { display: block; }
.li__title { font-weight: 600; font-size: var(--fs-body); letter-spacing: -.014em; line-height: 1.3; }
.li__sub { color: var(--ink-2); font-size: var(--fs-sub); line-height: 1.35; margin-top: 2px; }
.li__end { display: flex; align-items: center; gap: var(--s2); color: var(--ink-3); font-size: var(--fs-sub); flex: none; }
.chev { width: 18px; height: 18px; color: var(--ink-3); }
.check { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 2px var(--line-2); color: transparent; }
.check .ic { width: 16px; height: 16px; stroke-width: 2.6; }
.check.is-done { background: var(--ok); box-shadow: none; color: #fff; }
.check.is-now { box-shadow: inset 0 0 0 2px var(--accent-a); }
.check.is-now::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-a); }

/* ---------- Zahlen (Arenal-Zahlenleiste) ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.stat { padding: var(--s4) var(--s5); min-width: 0; }
.stat:nth-child(2n) { border-left: 1px solid var(--line); }
.stat:nth-child(n+3) { border-top: 1px solid var(--line); }
.stat__n { font-size: var(--fs-l); font-weight: 700; letter-spacing: -.024em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__l { color: var(--ink-2); font-size: var(--fs-sub); margin-top: 4px; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } .stat:nth-child(n) { border-top: 0; border-left: 1px solid var(--line); } .stat:first-child { border-left: 0; } }
.bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; width: var(--v, 0%); border-radius: inherit; background: var(--ok); transition: width 600ms var(--ease-out); }
.card--dark .bar, .card--photo .bar { background: rgba(255,255,255,.14); }
.card--dark .bar > i, .card--photo .bar > i { background: var(--dark-ok); }

/* ---------- Umschalter (Arenal: gleitende Kapsel) ---------- */
.seg { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg__thumb { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 999px; background: var(--bg);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 3px 10px rgba(0,0,0,.08), inset 0 0 0 1px var(--line);
  transform: translateX(var(--x, 0)); width: var(--w, 0); transition: transform 380ms var(--spring), width 380ms var(--spring); }
.seg__btn { position: relative; z-index: 1; min-height: 38px; padding: 0 16px; border-radius: 999px; font-size: var(--fs-sub); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.seg__btn::after { content: ""; position: absolute; inset: -3px 0; }   /* Z1 */
.seg__btn[aria-selected="true"] { color: var(--ink); }
.seg--block { display: flex; } .seg--block .seg__btn { flex: 1; }

/* ---------- Formular (Z9, Z11, P26) ---------- */
.field { display: grid; gap: 6px; }
.field > label, .field__label { font-size: var(--fs-sub); font-weight: 600; }
.input, .field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; font-size: var(--fs-body);
  background: var(--bg); border: 1px solid var(--line-2); transition: border-color var(--dur-hover), box-shadow var(--dur-hover); }
.field textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.input:focus, .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(11,87,208,.18); }
.field__hint { font-size: var(--fs-foot); color: var(--ink-3); }
.field__err { font-size: var(--fs-foot); color: var(--err); font-weight: 500; }
.field.is-err input { border-color: var(--err); }
.choices { display: flex; flex-wrap: wrap; gap: var(--s2); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: var(--fs-sub); font-weight: 500;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color var(--dur-hover), box-shadow var(--dur-hover); }
.choice input:checked + span { background: var(--ink); color: var(--bg); box-shadow: none; }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice input:disabled + span { opacity: .45; }

/* ---------- Medien ---------- */
.thumb { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }   /* L7 */
a:hover .thumb img { transform: scale(1.03); }
.thumb__badge { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 7px; font-size: var(--fs-cap); font-weight: 600; background: rgba(10,10,12,.72); color: #fff; }
.thumb__play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.88); color: #111; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.thumb__play .ic { width: 22px; height: 22px; fill: currentColor; stroke: none; margin-left: 3px; }
.thumb .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 0; background: rgba(255,255,255,.35); }
.thumb .bar > i { background: var(--accent-a); }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: var(--fs-sub); font-weight: 700; color: #fff;
  background: linear-gradient(180deg, #8b8f96, #5b5f66); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar--sm { width: 32px; height: 32px; font-size: var(--fs-cap); }
.avatar--lg { width: 56px; height: 56px; font-size: var(--fs-body); }

/* ---------- Chat (Telegram-Ersatz) ---------- */
.chat { display: grid; grid-template-rows: auto 1fr auto; height: calc(100dvh - var(--tab-h) - 32px - env(safe-area-inset-bottom)); min-height: 420px; }
.msgs { overflow-y: auto; padding: var(--s4) 0; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.bubble { max-width: min(78%, 560px); padding: 9px 14px 8px; border-radius: 20px; font-size: var(--fs-body); line-height: 1.38; position: relative; }
.bubble--in { align-self: flex-start; background: var(--bubble-in); border-bottom-left-radius: 6px; }
.bubble--out { align-self: flex-end; background: var(--bubble-out); color: var(--bubble-out-ink); border-bottom-right-radius: 6px; }
.bubble__who { font-size: var(--fs-foot); font-weight: 600; color: var(--accent-ink); margin-bottom: 2px; }
.bubble__meta { display: block; text-align: right; font-size: var(--fs-cap); color: var(--ink-3); margin-top: 2px; }
.bubble--out .bubble__meta { color: var(--bubble-out-meta); }
.day-sep { align-self: center; font-size: var(--fs-cap); font-weight: 600; color: var(--ink-2); background: var(--surface); padding: 4px 10px; border-radius: 99px; margin: var(--s3) 0; }
.composer { display: flex; align-items: flex-end; gap: var(--s2); padding: var(--s2); border-radius: 26px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.composer textarea { flex: 1; min-height: 44px; max-height: 140px; padding: 11px 6px; border: 0; background: none; resize: none; font-size: var(--fs-body); line-height: 1.4; }
.composer textarea:focus { outline: none; }
.composer:focus-within { box-shadow: inset 0 0 0 1.5px var(--focus); }

/* ---------- Dialog (Bottom Sheet mobil) ---------- */
.sheet { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 560px; max-height: 92dvh; border-radius: 24px 24px 0 0; background: var(--bg); color: var(--ink);
  box-shadow: var(--shadow-3); overflow: auto; }
.sheet::backdrop { background: rgba(8,8,10,.45); }
.sheet__in { padding: var(--s5) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom)); }
.sheet__grip { width: 40px; height: 5px; border-radius: 99px; background: var(--line-2); margin: 8px auto 0; }
.sheet__close { position: absolute; right: 10px; top: 10px; }
@media (min-width: 720px) { .sheet { margin: auto; border-radius: 24px; } .sheet__grip { display: none; } }
.sheet[open] { animation: sheet-in 340ms var(--ease-out); }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }

/* ---------- Tab-Leiste mobil (M1/M2: Glas nur hier, schwebend) ---------- */
.tabbar { position: fixed; z-index: 40; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
  height: var(--tab-h); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px; border-radius: 999px;
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); max-width: 520px; margin: 0 auto; }
.tabbar__thumb { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); border-radius: 999px; background: var(--press);
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 420ms var(--spring); }
.tab { position: relative; z-index: 1; display: grid; place-items: center; align-content: center; gap: 2px; min-height: 44px; border-radius: 999px;
  color: var(--ink-2); font-size: var(--fs-tab); font-weight: 600; letter-spacing: .005em; }
.tab .ic { width: 24px; height: 24px; }
.tab[aria-current="page"] { color: var(--accent-ink); }
.tab:active { transform: scale(.94); }
.tab .badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; font-size: 11px; padding: 0 5px; }

/* ---------- Seitenleiste Desktop (Arenal) ---------- */
@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: 76px minmax(0, 1fr); }
  .tabbar, .topbar { display: none; }
  .side { display: block; position: sticky; top: 0; height: 100dvh; z-index: 50; }
  .side__panel { position: absolute; inset: 0 auto 0 0; width: 76px; display: flex; flex-direction: column; padding: var(--s4) var(--s3);
    background: var(--surface); border-right: 1px solid var(--line); overflow: hidden auto; scrollbar-width: none;
    transition: width 340ms var(--ease-out), box-shadow 340ms var(--ease-out); }
  .side:hover .side__panel, .side:focus-within .side__panel { width: var(--side-w); box-shadow: var(--shadow-3); transition-delay: 90ms; }
  .side .nav-i__label, .side__brand span, .side__search span, .side__search .kbd, .side__label, .side__member .li__body, .live-chip--side, .side .nav-i .num {
    opacity: 0; filter: blur(6px); transition: opacity 180ms var(--ease), filter 180ms var(--ease); }
  .side:hover :is(.nav-i__label, .side__brand span, .side__search span, .side__search .kbd, .side__label, .side__member .li__body, .live-chip--side, .nav-i .num),
  .side:focus-within :is(.nav-i__label, .side__brand span, .side__search span, .side__search .kbd, .side__label, .side__member .li__body, .live-chip--side, .nav-i .num) {
    opacity: 1; filter: none; transition-delay: 160ms; }
  .side .nav-i > .live-chip { opacity: 0; transition: opacity 180ms; } .side:hover .nav-i > .live-chip, .side:focus-within .nav-i > .live-chip { opacity: 1; transition-delay: 160ms; }
  @media (hover: none) { .app { grid-template-columns: var(--side-w) minmax(0, 1fr); } .side__panel { width: var(--side-w); }
    .side :is(.nav-i__label, .side__brand span, .side__search span, .side__search .kbd, .side__label, .side__member .li__body, .nav-i > .live-chip, .nav-i .num) { opacity: 1; filter: none; } }
  .page { padding: var(--s7) var(--s7) var(--s8); }
  .vh__title { font-size: 2.5rem; }
  .chat { height: calc(100dvh - 2 * var(--s7)); }
}
.side__brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 14px; white-space: nowrap; font-weight: 700; font-size: var(--fs-body); letter-spacing: -.02em; }
.side__brand svg { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.side__brand small { font-weight: 500; color: var(--ink-3); }
.side__search { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 12px; padding: 0 8px 0 13px; white-space: nowrap; border-radius: 12px; background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); font-size: var(--fs-sub); width: calc(100% - 8px); }
.side__search .ic { width: 18px; height: 18px; }
.side__search span { flex: 1; text-align: left; }
.side__group + .side__group { margin-top: 14px; }
.side__label { padding: 0 12px 4px; font-size: var(--fs-cap); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.nav-i { position: relative; white-space: nowrap; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: 12px; font-weight: 500; font-size: var(--fs-body);
  transition: background-color var(--dur-hover) var(--ease); }
.nav-i:hover { background: var(--hover); }
.nav-i:active { background: var(--press); }
.nav-i[aria-current="page"] { background: var(--bg); box-shadow: 0 1px 2px rgba(0,0,0,.05), inset 0 0 0 1px var(--line); font-weight: 600; }
.nav-i .tile { width: 28px; height: 28px; }
.nav-i .tile .ic { width: 16px; height: 16px; }
.nav-i .badge { position: absolute; left: 28px; top: 2px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; box-shadow: 0 0 0 2px var(--surface); }
.nav-i__label small { display: block; font-size: var(--fs-cap); color: var(--ink-3); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.nav-i--live { background: rgba(220,47,47,.08); margin-bottom: 10px; }
.nav-i--live .tile { animation: live-ring 2.4s var(--ease) infinite; }
.nav-i__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side__foot { margin-top: auto; padding-top: var(--s4); }
.side__member { display: flex; align-items: center; gap: 12px; padding: 6px; white-space: nowrap; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Signature-Moment: „Start in 30 days“ (Start, einmal je Sitzung, abschaltbar) ---------- */
.journey { min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s5); gap: var(--s4); background-position: 60% 30%; }
.journey__top { display: flex; align-items: center; gap: var(--s4); }
.ring { width: 104px; height: 104px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring__track { stroke: rgba(255,255,255,.16); }
.ring__val { stroke: url(#ringGrad); stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--off); }
.journey__ringwrap { position: relative; }
.journey__day { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; text-align: center; line-height: 1; }
.journey__day b { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.journey__day small { font-size: var(--fs-foot); font-weight: 600; color: #c9cbce; margin-top: 4px; }
.track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.track__step { font-size: var(--fs-cap); line-height: 1.25; color: #c9cbce; }
.track__step a { display: grid; gap: 6px; align-content: start; min-height: 44px; padding-top: 8px; border-radius: 6px; }
.track__step a:hover span { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.track__step i { height: 4px; border-radius: 99px; background: rgba(255,255,255,.2); }
.track__step.is-done i { background: var(--dark-ok); }
.track__step.is-now i { background: linear-gradient(90deg, var(--dark-accent) 50%, rgba(255,255,255,.2) 50%); }
.track__step.is-now { color: #fff; font-weight: 600; }
.sig-run .ring__val { animation: ring-draw var(--dur-sig) var(--ease-out) both; }
.sig-run .track__step { animation: step-in 500ms var(--ease-out) both; animation-delay: calc(400ms + var(--n) * 70ms); }
@keyframes ring-draw { from { stroke-dashoffset: var(--len); } }
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } }
@media (min-width: 1024px) { .journey { min-height: 400px; padding: var(--s6); } .ring { width: 128px; height: 128px; } .journey__day b { font-size: 2.5rem; } }

.journey__ringwrap { flex: none; }
.journey::before { background: linear-gradient(90deg, rgba(10,10,12,.72) 0%, rgba(10,10,12,.35) 70%, rgba(10,10,12,.2) 100%), linear-gradient(180deg, rgba(10,10,12,0) 30%, rgba(10,10,12,.85) 100%); }
.journey__now { display: none; color: #d9dadc; }
@media (max-width: 599px) {
  .journey { min-height: 0; padding: var(--s5) var(--s4) var(--s4); background-position: 70% 40%; }
  .journey__desc, .track__step span { display: none; }
  .ring { width: 92px; height: 92px; }
  .journey__day b { font-size: 1.75rem; }
  .hide-s { display: none; }
  .vh { margin-bottom: var(--s4); }
  .live-banner { margin-bottom: var(--s3); }
}
.home-grid { display: grid; gap: var(--s4); }
@media (min-width: 1024px) { .home-grid { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); align-items: stretch; } }
.next { display: flex; flex-direction: column; gap: var(--s3); }
.next__cta { margin-top: auto; }

.home-lesson { display: block; border-radius: 14px; }
.home-lesson .t-head { line-height: 1.3; }
.home-deal { min-height: 260px; display: flex !important; flex-direction: column; justify-content: flex-end; gap: 4px; padding: var(--s5); background-position: center; }
@media (min-width: 1024px) { .home-deal { min-height: 320px; } }

/* Einblenden unscharf → scharf, gestaffelt (Website-Stil); Inhalt bleibt währenddessen bedienbar (B4) */
.rv { opacity: 0; filter: blur(10px); transform: translate3d(var(--rv-x, 0), 16px, 0);
  transition: opacity 560ms var(--ease-out), filter 560ms var(--ease-out), transform 640ms var(--ease-out); transition-delay: var(--rv-d, 0ms); }
.rv--fwd { --rv-x: 20px; } .rv--back { --rv-x: -20px; }
.rv.is-in { opacity: 1; filter: none; transform: none; }
@media (max-width: 700px) { .rv { filter: blur(8px); } }

/* Live: ruhiger Ring, kein Blinken (B6) */
.live-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 7px; border-radius: 999px; font-size: var(--fs-cap); font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: #fff; background: #c4271f; flex: none; }   /* Weiß auf #c4271f 5,6:1 */
.live-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
@keyframes live-ring { 0% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 0 rgba(220,47,47,.45); } 70%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 9px rgba(220,47,47,0); } }
a.live-banner, .live-banner { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); margin-bottom: var(--s4); background: var(--bg); box-shadow: var(--shadow-1); }
.live-banner .tile { animation: live-ring 2.4s var(--ease) infinite; }
.live-banner .li__title { font-size: var(--fs-body); }
.live-banner__btn { flex: none; }
@media (max-width: 599px) {
  .live-banner__btn { display: none; }
  .live-banner { padding: 10px 12px; gap: var(--s3); }
  .live-banner .tile--lg { width: 36px; height: 36px; } .live-banner .tile--lg .ic { width: 20px; height: 20px; }
  .live-banner .li__title { font-size: var(--fs-sub); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .live-banner .t-foot { display: none; }
}
.tab__live { position: absolute; top: 6px; left: calc(50% + 9px); width: 9px; height: 9px; border-radius: 50%; background: #dc2f2f; box-shadow: 0 0 0 2px var(--bg); animation: live-ring 2.4s var(--ease) infinite; }

/* Apps: alle Kacheln gleich groß (Dennis 19.10. 16:00) */
.apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--s3); }   /* alle Kacheln gleich hoch */
@media (min-width: 720px) { .apps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .apps { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.app-t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; aspect-ratio: 1 / 1; padding: 14px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line); transition: transform var(--dur-press) var(--ease), box-shadow var(--dur-hover) var(--ease), background-color var(--dur-hover); }
.app-t .tile { margin-bottom: auto; }
.app-t__l { overflow-wrap: break-word; hyphens: auto; font-weight: 600; font-size: .875rem; line-height: 1.25; letter-spacing: -.01em; }
.app-t__s { max-width: 100%; font-size: var(--fs-cap); color: var(--ink-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-t__s .live-chip { height: 18px; font-size: 10.5px; margin-top: 2px; }
.app-t:hover { background: var(--bg); box-shadow: var(--shadow-2); }
.app-t:active { transform: scale(.97); }
@media (min-width: 720px) { .app-t { aspect-ratio: 5 / 4; padding: var(--s4); } }
@media (max-width: 399px) { .app-t { padding: 12px; } }
@media (max-width: 359px) { .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app-t { aspect-ratio: 4 / 3; } }

/* Upsell-Pille (Muster: fester Knopf der Website, assets/css/join.css) */
.ub { position: fixed; z-index: 45; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  bottom: calc(var(--tab-h) + 22px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; padding: 6px;
  border-radius: 999px; background: var(--glass-solid); border: 1px solid var(--line-2); box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(24px); filter: blur(8px);
  transition: transform 420ms var(--ease-out), opacity 320ms var(--ease-out), filter 420ms var(--ease-out), visibility 0s linear 420ms; }
.ub.is-on { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: 0s; }
.ub:empty { display: none; }
.ub__pts { display: none; list-style: none; margin: 0; padding: 0; gap: 14px; font-size: var(--fs-foot); font-weight: 600; white-space: nowrap; }
.ub__pts li { display: inline-flex; align-items: center; gap: 6px; }
.ub__dot { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); flex: none; }
.ub__ck { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ub__btn { --h: 48px; flex: 1; padding: 0 20px 0 8px; gap: 10px; justify-content: flex-start; }
.ub__badge { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(20,20,22,.12); color: var(--on-accent); flex: none; }
.ub__badge .ub__ck { width: 18px; height: 18px; }
.ub__l { display: none; } .ub__s { display: inline; }
.ub__x { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); flex: none; }
.ub__x:hover { background: var(--hover); color: var(--ink); }
.ub__x .ic { width: 18px; height: 18px; }
.ub .ub__ck path { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.ub.is-drawn .ub__ck path { animation: ub-draw 300ms var(--ease-out) both; }
.ub.is-drawn .ub__ck--1 path { animation-delay: 200ms; } .ub.is-drawn .ub__ck--2 path { animation-delay: 290ms; }
.ub.is-drawn .ub__ck--3 path { animation-delay: 380ms; } .ub.is-drawn .ub__ck--4 path { animation-delay: 480ms; }
.ub.is-drawn .ub__badge { animation: ub-pulse 640ms ease-out 760ms 1 both; }
@keyframes ub-draw { to { stroke-dashoffset: 0; } }
@keyframes ub-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); transform: scale(1); } 40% { transform: scale(1.1); } 100% { box-shadow: 0 0 0 10px rgba(255,255,255,0); transform: scale(1); } }
body.has-ub .page { padding-bottom: calc(var(--tab-h) + 120px + env(safe-area-inset-bottom)); }
@media (min-width: 560px) { .ub__l { display: inline; } .ub__s { display: none; } }
@media (min-width: 1024px) {
  .ub { left: calc(50% + 38px); right: auto; translate: -50% 0; bottom: calc(24px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 140px); padding: 6px 6px 6px 18px; gap: 14px; }
  .ub__pts { display: flex; }
  .ub__btn { flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 24px -10px rgba(255,106,0,.7); }
  body.has-ub .page { padding-bottom: 120px; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .ub__pts li:nth-child(n+2) { display: none; } }

/* Ansichtswechsel (B5: tiefer = von rechts, zurück = von links; B4: Inhalt sofort bedienbar) */
.view-in { animation: view-in var(--dur-view) var(--ease-out) both; }
.view-in--fwd { --dx: 18px; } .view-in--back { --dx: -18px; }
@keyframes view-in { from { opacity: 0; transform: translateX(var(--dx, 0)) translateY(var(--dy, 6px)); } }
.view-in--fwd, .view-in--back { --dy: 0px; }

/* B2: ruhige Fassung */
@media (prefers-reduced-motion: reduce) {
  *:not(.rv):not(.ub), *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .rv, .ub { filter: none !important; transform: none !important; transition: opacity 220ms linear !important; transition-delay: 0ms !important; }
  .ub .ub__ck path { stroke-dashoffset: 0; animation: none !important; }
  .nav-i--live .tile, .live-banner .tile, .tab__live { animation: none !important; }
  .view-in { animation: fade 1ms; }
  a:hover .thumb img { transform: none; }
}
@keyframes fade { from { opacity: 0; } }

/* Hilfen */
.mt-1 { margin-top: var(--s2); } .mt-2 { margin-top: var(--s3); } .mt-3 { margin-top: var(--s4); } .mt-4 { margin-top: var(--s5); } .mt-5 { margin-top: var(--s6); }
@media (max-width: 1023px) { .hide-m { display: none !important; } }
@media (min-width: 1024px) { .hide-d { display: none !important; } }
.sep { height: 1px; background: var(--line); margin: var(--s4) 0; border: 0; }
.note { font-size: var(--fs-foot); color: var(--ink-3); }
.empty { text-align: center; padding: var(--s7) var(--s4); color: var(--ink-2); }

/* ---------- Runde P2 (19.10.2026): Sprache, Kacheln in Bewegung, Live-Angebot ---------- */
/* Sprachumschalter RU | EN in der Seitenleiste: eine Zeile wie die übrigen Punkte, Kapsel gleitet (Arenal-Umschalter) */
.side__lang { padding-right: 6px; cursor: default; }
.side__lang:hover { background: none; }
.side__lang .nav-i__label { overflow: visible; }
.seg--lang .seg__btn { min-height: 32px; padding: 0 12px; font-size: var(--fs-foot); }
.seg--lang .seg__btn::after { inset: -6px 0; }   /* Z1: Trefferfläche 44 px */
.side__foot .side__lang { margin-bottom: var(--s2); }

/* Kacheln „Dein Klub“: alle gleich groß, erscheinen gestaffelt von unscharf zu scharf, Symbol hebt sich bei Zeiger (B1: zeigt, dass alles klickbar ist) */
.apps .app-t { opacity: 0; transform: translateY(14px) scale(.94); filter: blur(6px);
  transition: opacity 480ms var(--ease-out), transform 620ms var(--spring), filter 480ms var(--ease-out), box-shadow var(--dur-hover) var(--ease), background-color var(--dur-hover);
  transition-delay: calc(120ms + var(--i, 0) * 45ms), calc(120ms + var(--i, 0) * 45ms), calc(120ms + var(--i, 0) * 45ms), 0ms, 0ms; }
.rv.is-in .apps .app-t, .apps.is-in .app-t { opacity: 1; transform: none; filter: none; }
.app-t .tile { transition: transform 420ms var(--spring), box-shadow var(--dur-hover) var(--ease); }
@media (hover: hover) { .app-t:hover .tile { transform: translateY(-3px) scale(1.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 10px 18px -8px rgba(0,0,0,.35); } }
.app-t:active { transform: scale(.97) !important; transition-delay: 0ms !important; }
.app-t__l { hyphens: manual; }

/* Live-Hinweis: Status steht in der Zeile des Titels, keine Pille über der Überschrift (Dennis 19.10.) */
.live-banner .li__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 0; }
.live-banner .live-banner__meta { margin-top: 2px; }

/* Automatisches Angebot im Live-Raum: erscheint nach ein paar Sekunden als angeheftete Nachricht, Knopf wie der feste Website-Knopf */
.lv-offer { display: grid; gap: var(--s3); margin: 0 0 var(--s3); padding: var(--s4); border-radius: 16px; background: var(--bg);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); opacity: 0; transform: translateY(-10px) scale(.98); filter: blur(6px);
  transition: opacity 420ms var(--ease-out), transform 520ms var(--spring), filter 420ms var(--ease-out); }
.lv-offer[hidden] { display: none; }
.lv-offer.is-on { opacity: 1; transform: none; filter: none; }
.lv-offer__top { display: flex; align-items: center; gap: var(--s2); color: var(--ink-3); font-size: var(--fs-foot); font-weight: 600; }
.lv-offer__top .ic { width: 16px; height: 16px; }
.lv-offer__pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sub); font-weight: 500; }
.lv-offer__pts li { display: flex; align-items: center; gap: 8px; }
.lv-offer .ub__btn { width: 100%; justify-content: flex-start; text-align: left; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }
.lv-offer .ub__btn > span:last-child { flex: 1; }
.lv-offer .ub__ck path { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.lv-offer.is-on .ub__ck path { animation: ub-draw 300ms var(--ease-out) both; }
.lv-offer.is-on .ub__ck--1 path { animation-delay: 380ms; } .lv-offer.is-on .ub__ck--2 path { animation-delay: 470ms; }
.lv-offer.is-on .ub__ck--3 path { animation-delay: 560ms; } .lv-offer.is-on .ub__ck--4 path { animation-delay: 660ms; }
.lv-offer.is-on .ub__badge { animation: ub-pulse 640ms ease-out 900ms 1 both; }
.lv-next { margin-top: var(--s3); }

@media (prefers-reduced-motion: reduce) {
  .apps .app-t, .lv-offer { filter: none !important; transform: none !important; transition: opacity 220ms linear !important; transition-delay: 0ms !important; }
  .lv-offer .ub__ck path { stroke-dashoffset: 0; animation: none !important; }
  .app-t:hover .tile { transform: none; }
}

/* Live in der Seitenleiste: pulsierender Punkt statt Pille, damit „Сейчас в эфире“ ganz lesbar bleibt (Status bleibt zusätzlich als Text, F5) */
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #dc2f2f; flex: none; margin-right: 4px; animation: live-dot 2.4s var(--ease) infinite; }
@keyframes live-dot { 0% { box-shadow: 0 0 0 0 rgba(220,47,47,.5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(220,47,47,0); } }
.side .nav-i > .live-dot { opacity: 0; transition: opacity 180ms; } .side:hover .nav-i > .live-dot, .side:focus-within .nav-i > .live-dot { opacity: 1; transition-delay: 160ms; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none !important; } }
@media (hover: none) and (min-width: 1024px) { .side .nav-i > .live-dot { opacity: 1; } }
/* Kacheln bleiben auch russisch auf 390 px gleich groß: kompaktere Innenmaße, Beschriftung einzeilig (gemessen mit _tools/p2-shots.cjs) */
.app-t { overflow: hidden; min-width: 0; }
.app-t__l { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 599px) {
  .app-t { padding: 10px; }
  .app-t .tile--lg { width: 38px; height: 38px; } .app-t .tile--lg .ic { width: 21px; height: 21px; }
  .app-t__l { font-size: .8125rem; letter-spacing: -.015em; }
}
/* Live-Hinweis mobil: Status bleibt in der Titelzeile (keine Pille darüber), Titel darf zweizeilig sein, Zeit + Demo darunter */
@media (max-width: 599px) {
  .live-banner .li__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; line-height: 1.3; }
  .live-banner .li__title .live-chip { display: inline-flex; vertical-align: 1px; margin-right: 6px; height: 20px; }
  .live-banner .live-banner__meta .t-foot { display: inline; }
  .live-banner .live-banner__meta { flex-wrap: wrap; row-gap: 2px; }
}

/* ===================================================================================================================
   Runde P3 (19.10.2026, Dennis 22:4x: „viel zu bunt … links dieses Menü eher so eine große Pill … sehr, sehr, sehr clean …
   Icons und alles … die Blocks, dass man sieht, wo man im Progress gerade ist“)
   Ein Weiß, Flächen nur durch feine Linien; keine bunten Symbolkacheln mehr; Orange nur für Handlung und „jetzt“ (F1, F2).
   =================================================================================================================== */
:root { --surface: #f5f5f5; --surface-2: #ebebeb; --line: rgba(15,16,18,.08); --line-2: rgba(15,16,18,.14);
  --card-shadow: 0 1px 2px rgba(15,16,18,.04); }
.card:not(.card--dark):not(.card--photo), .list:not(.list--plain), .stats { background: var(--bg); border-color: var(--line); box-shadow: var(--card-shadow); }
a.card:not(.card--dark):not(.card--photo):hover { box-shadow: 0 2px 6px rgba(15,16,18,.05), 0 14px 34px -14px rgba(15,16,18,.18); }

/* Einheitliche, feine Symbole: eine Strichstärke, eine Farbe, keine farbigen Kacheln (I2, I3) */
.ic { stroke-width: 1.6; }
.tile:not(.tile--brand) { background: transparent; color: var(--ink); box-shadow: none; border-radius: 10px; }
.tile:not(.tile--brand) .ic { stroke-width: 1.6; width: 20px; height: 20px; }
.tile--lg:not(.tile--brand) { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); border-radius: 14px; }
.tile--lg:not(.tile--brand) .ic { width: 22px; height: 22px; }
.card--dark .tile:not(.tile--brand), .card--photo .tile:not(.tile--brand) { color: #f2f2ef; }

/* Status ohne Buntheit: Fortschritt und „erledigt“ in Schwarz, „jetzt“ in Orange; Live bleibt rot (Status, F1) */
.bar > i { background: var(--ink); }
.card--dark .bar > i, .card--photo .bar > i { background: #f2f2ef; }
.check.is-done { background: var(--ink); color: #fff; }
.lrn-steps .chip.is-done:not(.is-on) { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.lrn-steps .chip.is-done.is-on { background: var(--ink); color: var(--bg); }
.acc-switch:checked { background: var(--ink); }
.cht-row[aria-current="page"] { background: var(--hover); }
.cht-pin .ic { color: var(--ink-3); }
.live-banner .tile, .nav-i--live .tile { animation: none; }
.nav-i--live { background: none; }

/* ---------- Seitenleiste als große, schwebende Pille (vertikal); klappt bei Zeiger/Tastatur auf ---------- */
@media (min-width: 1024px) {
  .app { grid-template-columns: 96px minmax(0, 1fr); }
  .side__panel { inset: 16px auto 16px 16px; width: 64px; padding: 12px 8px; border-radius: 32px; background: var(--bg); border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(15,16,18,.04), 0 18px 44px -18px rgba(15,16,18,.22); }
  .side:hover .side__panel, .side:focus-within .side__panel { width: 264px; box-shadow: 0 1px 2px rgba(15,16,18,.05), 0 30px 70px -24px rgba(15,16,18,.35); }
  .side__brand { padding: 4px 8px 12px; }
  .side__search { width: 100%; margin: 0 0 6px; padding: 0 8px 0 14px; background: transparent; box-shadow: none; }
  .side:hover .side__search, .side:focus-within .side__search { background: var(--surface); }
  .nav-i { padding: 6px 10px; border-radius: 999px; }
  .nav-i .tile:not(.tile--brand) { width: 28px; height: 28px; }
  .nav-i[aria-current="page"] { background: var(--surface); box-shadow: none; }
  .nav-i[aria-current="page"] .tile:not(.tile--brand) { color: var(--ink); }
  .nav-i:not([aria-current="page"]) .tile:not(.tile--brand) { color: var(--ink-2); }
  .side__group + .side__group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
  .side__label { display: none; }
  .side__member { background: none; box-shadow: none; padding: 4px; }
  .side__member .avatar { width: 44px; height: 44px; }
  .side__foot .side__lang { margin-bottom: 4px; }
  .nav-i--live .tile { position: relative; }
  .nav-i--live .tile::after { content: ""; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: #dc2f2f; box-shadow: 0 0 0 2px var(--bg); }
  .nav-i .badge { box-shadow: 0 0 0 2px var(--bg); }
}

/* ---------- Start ---------- */
.page--home .vh { margin-bottom: var(--s5); }
.live-banner .live-chip { flex: none; }

/* Weitermachen: der zuletzt geöffnete Block, groß; Buch mit echter Tiefe (Cover der Website-Tetrad'), Ring = Signature */
.cont { display: grid; grid-template-columns: 1fr; overflow: hidden; }
@media (min-width: 900px) { .cont { grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); min-height: 340px; } }
.cont__media { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--surface); }
.cont__media--book { padding: 32px 24px; background: radial-gradient(90% 70% at 50% 100%, #e9e9e8 0%, #f4f4f3 55%, #fafafa 100%); }
.cont__book { width: min(172px, 46vw); height: auto; border-radius: 3px 8px 8px 3px; transform: rotate(-3deg);
  box-shadow: inset 3px 0 0 rgba(255,255,255,.18), 0 2px 4px rgba(15,16,18,.18), 0 28px 50px -18px rgba(15,16,18,.55), 0 50px 80px -40px rgba(15,16,18,.35);
  transition: transform 520ms var(--spring), box-shadow 520ms var(--ease-out); }
.cont:hover .cont__book { transform: rotate(0deg) translateY(-6px); }
.cont__media--video { aspect-ratio: 16 / 9; }
.cont__media--video img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .cont__media--video { aspect-ratio: auto; } }
.cont__body { display: flex; flex-direction: column; justify-content: center; gap: var(--s5); padding: var(--s5); }
@media (min-width: 900px) { .cont__body { padding: var(--s6) var(--s7) var(--s6) var(--s6); } }
.cont__head { display: flex; align-items: center; gap: var(--s5); }
.cont__ringwrap { position: relative; flex: none; }
.cont .ring { width: 96px; height: 96px; }
.ring--light .ring__track { stroke: rgba(15,16,18,.08); }
.cont__pct { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 34px; line-height: 1; }
.cont__pct b { font-size: 1.625rem; font-weight: 700; letter-spacing: -.03em; }
.cont__pct small { font-size: var(--fs-foot); font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.cont__text { min-width: 0; }
.cont__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
@media (max-width: 599px) { .cont .ring { width: 76px; height: 76px; } .cont__pct { padding-top: 26px; } .cont__pct b { font-size: 1.25rem; } .cont__head { gap: var(--s4); } .cont__head .h-l { font-size: 1.375rem; } }

/* Fortschritt je Block: Balken schwarz = erledigt, orange = jetzt, hell = noch offen; Zahl + Titel sagen dasselbe in Text (F5) */
.prog { display: grid; gap: var(--s5); padding: var(--s5); }
.prog__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); }
.prog__head a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pbs { display: grid; gap: 6px; }
.pbs--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.pbs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pb { display: grid; gap: 6px; align-content: start; min-height: 44px; padding: 10px 10px 12px; border-radius: 14px; transition: background-color var(--dur-hover) var(--ease); }
.pb:hover { background: var(--hover); }
.pb__bar { display: block; height: 6px; border-radius: 99px; background: rgba(15,16,18,.08); overflow: hidden; }
.pb__bar i { display: block; height: 100%; width: var(--v); border-radius: inherit; background: var(--ink); transform-origin: left; }
.pb--now .pb__bar i { background: var(--brand); }
.pb__n { font-size: var(--fs-foot); font-weight: 600; color: var(--ink-3); }
.pb--now .pb__n { color: var(--ink); }
.pb__t { font-size: var(--fs-sub); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.pb--next .pb__t { color: var(--ink-2); font-weight: 500; }
.rv .pb__bar i { transform: scaleX(0); transition: transform 760ms var(--ease-out) 260ms; }
.rv.is-in .pb__bar i { transform: none; }
@media (max-width: 899px) {
  .pbs--7, .pbs--4 { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(124px, 1fr); overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--s5) * -1); padding: 0 var(--s5); scroll-snap-type: x mandatory; }
  .pbs::-webkit-scrollbar { display: none; }
  .pb { scroll-snap-align: start; }
  .prog { padding: var(--s4); } .pbs--7, .pbs--4 { margin: 0 calc(var(--s4) * -1); padding: 0 var(--s4); }
}

/* Letzte Deals: echte Fälle und echte Fotos von Übergaben, Herkunft steht dran */
.feed { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .feed { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.feed__i { display: grid; gap: 3px; align-content: start; text-align: left; border-radius: 16px; }
.feed__ph { display: block; aspect-ratio: 4 / 3; margin-bottom: var(--s2); border-radius: 16px; overflow: hidden; background: var(--surface); }
.feed__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.feed__i:hover .feed__ph img { transform: scale(1.04); }
.feed__i:focus-visible { outline-offset: 4px; }
.feed__big { width: 100%; height: auto; border-radius: 16px; }

/* Alle Bereiche: gleich große Kacheln, weiß, ein Symbolstil */
.app-t { background: var(--bg); }
.app-t:hover { background: var(--bg); }
.app-t .tile--lg:not(.tile--brand) { box-shadow: none; background: none; width: 28px; height: 28px; border-radius: 0; justify-content: start; }
.app-t .tile--lg:not(.tile--brand) .ic { width: 26px; height: 26px; stroke-width: 1.5; }
@media (hover: hover) { .app-t:hover .tile { transform: translateY(-2px); box-shadow: none; } }
.app-t__live { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.app-t__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #dc2f2f; }

@media (prefers-reduced-motion: reduce) {
  .rv .pb__bar i { transform: none !important; transition: none !important; }
  .cont__book { transform: rotate(-3deg) !important; }
}
.pb__t::first-letter { text-transform: uppercase; }
@media (min-width: 1024px) { .side .nav-i > .live-dot { display: none; } }   /* Live-Punkt sitzt am Symbol, einmal reicht */
.pb__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 599px) {   /* Unterzeile darf auf dem Handy zweizeilig sein, Kachel bleibt gleich groß */
  .app-t__s { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
  .app-t__live { display: inline; } .app-t__live::before { display: inline-block; margin-right: 5px; vertical-align: 1px; }
}