"; inherits: true; initial-value: rgba(255,255,255,0.38); }
.theme-glass {
/* purple→orange accent gradient + single-tone fallback that replaces the blue */
--accent-gradient: linear-gradient(135deg, #7f44f4, #ef4f3c);
--accent: #9250ec; /* single-tone fallback (links, icons) */
--accent-hover: #a66bf0;
--accent-glow: rgba(146, 80, 236, 0.20);
--accent-soft: rgba(146, 80, 236, 0.14);
--accent-line: rgba(146, 80, 236, 0.40);
/* ---- JUSTIERBARE GLAS-REGLER ------------------------------------------
Diese Werte zum Feintunen anfassen: */
--glass-overlay: rgba(0, 0, 0, 0.75); /* Hintergrund-Abdunklung */
--glass-vignette: rgba(0, 0, 0, 0.45); /* Rand-Vignette (dunkler zu den Rändern) */
--glass-bg: rgba(0, 0, 0, 0.45); /* Glas-Grundfarbe (Substanz) */
--glass-blur: 45px; /* Blur-Stärke (Fokus-Flächen) */
--glass-saturate: 160%; /* Farbsättigung durchs Glas */
--glass-bright: 1.05; /* leichte Aufhellung */
--glass-border: rgba(255, 255, 255, 0.10); /* dezenter Grundrand (ganze Card) */
--hover-glow: rgba(255, 255, 255, 0.15); /* HOVER: dezenter weißer Außen-Glow */
--nav-active-bg: rgba(255, 255, 255, 0.08); /* aktive Sidebar-Zeile = exakt Scrollbar-Thumb */
/* ---- Primär-Button (dunkler Glas-Button, leuchtende weiße Unterkante) ---- */
--btn-fill: #0a0a0f; /* FILL_COLOR: fast schwarze Füllung */
--btn-glow: 0.95; /* GLOW_BRIGHTNESS: Helligkeit (0..1) */
--btn-glow-w-rest: 35%; /* GLOW_WIDTH_REST: Breite im Ruhezustand */
--btn-glow-w-hover: 90%; /* GLOW_WIDTH_HOVER: Breite beim Hover */
--btn-edge: 2px; /* VISIBLE_EDGE_HEIGHT: wie viel Glow unten hervorschaut */
--corner-tl: rgba(255, 255, 255, 0.50); /* Eck-Glanz OBEN-LINKS (am hellsten, -5%) */
--corner-br: rgba(255, 255, 255, 0.38); /* Eck-Glanz UNTEN-RECHTS (schwächer) */
--glass-shimmer: rgba(255, 255, 255, 0.15); /* innerer Lichtsaum oben (Materialität)*/
--glass-depth: rgba(0, 0, 0, 0.6); /* Tiefenschatten unter dem Glas */
}
/* ---- statisches Hintergrundbild (vollflächig, cover, fixiert) ---- */
body.theme-glass {
background: url("../wifi-money-background-purple-orange.webp") center center / cover no-repeat fixed, #08080D;
}
/* dunkler Overlay + Vignette ÜBER dem Canvas, UNTER dem Content */
body.theme-glass::after {
content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
background:
radial-gradient(130% 130% at 50% 38%, rgba(0,0,0,0) 52%, var(--glass-vignette) 100%),
var(--glass-overlay);
}
body.theme-glass .app { position: relative; z-index: 2; } /* Content über Canvas + Overlay */
/* =========================================================================
WEBGL-MESH-GRADIENT CANVAS (eigener Shader, siehe index.html).
Ebenen: Canvas (z 0) → Overlay (z 1) → UI (z 2).
Farben als CSS-Variablen → im JS ausgelesen (leicht änderbar).
Enthält zugleich einen statischen CSS-Verlauf als WebGL-Fallback.
========================================================================= */
.gradient-canvas {
position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%;
display: block; pointer-events: none;
/* Fallback-Look, falls kein WebGL (wird vom Canvas überdeckt, sobald es läuft) */
background:
linear-gradient(135deg, transparent 40%, rgba(239,79,60,0.10) 50%, transparent 60%),
linear-gradient(135deg, #0a0a0f 0%, #1a0f2e 45%, #7f44f4 70%, #1a0f2e 100%);
/* Shader-Farben (JS liest diese aus) */
--gradient-color-1: #0a0a0f; /* dunkler Grund */
--gradient-color-2: #7f3ffb; /* Lila (dominant) */
--gradient-color-3: #f94e33; /* Orange (Adern) */
--gradient-color-4: #1a0f2e; /* dunkles Violett */
}
/* =========================================================================
GLASS SURFACES
- Fokus-Flächen (Sidebar, Header, Haupt-Cards): starker Blur + Substanz.
- Alle Cards inkl. kleiner Tiles: dezenter Grundrand + diagonaler Eck-Glanz.
Kanten-Rezept: gleichmäßige border (Grundrand) + ein maskierter Verlaufs-Ring
(::before) der NUR die Ecken oben-links / unten-rechts aufleuchten lässt.
Der Ring respektiert border-radius (mask-composite statt border-image).
========================================================================= */
/* Glas-Rezept für Sidebar + Header (UNVERÄNDERT: halbtransparentes Glas + Blur). */
.theme-glass .sidebar,
.theme-glass .header {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
border: 1px solid var(--glass-border);
box-shadow: inset 0 1px 1px var(--glass-shimmer), var(--glass-depth);
}
/* Cards: voll deckendes Schwarz statt halbtransparentem Glas → Seitenhintergrund
scheint NICHT mehr durch die Card. backdrop-filter/Blur entfällt dadurch
(wirkungslos + Performance). Rand, Eck-Glanz (::before), Hover, Radius und
Schatten bleiben unverändert erhalten. */
.theme-glass .card {
background: #0A0A0F;
border: 1px solid var(--glass-border); /* dezenter, gleichmäßiger Grundrand */
box-shadow:
inset 0 1px 1px var(--glass-shimmer), /* feiner Lichtsaum oben (Materialität) */
var(--glass-depth); /* Außen-Tiefenschatten */
}
/* KEINE separate CSS-Border: der Ring (::before) IST die Border → dadurch liegt
der Grundrand + Eck-Glanz auf EINER Linie, exakt auf der Card-Kante (kein 1px-
Versatz mehr, da inset:0 ohne Border direkt auf der Border-Box sitzt). */
.theme-glass .card { position: relative; border: 0; }
.theme-glass .dash-top > .card,
.theme-glass .action-card { border-radius: 18px; }
/* Border + diagonaler Eck-Glanz als EIN 1px-Ring, exakt auf der Card-Kontur:
135°-Verlauf: TL hell → dezenter Grundrand in der Mitte → BR hell.
Über padding + mask-exclude → folgt exakt dem border-radius. */
.theme-glass .card::before {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
padding: 1px; /* Ring-/Border-Dicke */
--glow-a: 28%; /* Ruhezustand: Grundrand-Zone 28%–72% */
--glow-b: 72%;
background: linear-gradient(135deg,
var(--corner-tl) 0%,
var(--glass-border) var(--glow-a), /* Mitte = dezenter Grundrand (durchgehend) */
var(--glass-border) var(--glow-b),
var(--corner-br) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 1;
/* fließende Ausbreitung + Aufhellung des Glanzes beim Hover */
transition: --glow-a .4s ease, --glow-b .4s ease, --corner-tl .4s ease, --corner-br .4s ease;
}
/* nested Flächen dezent, kein eigener Rand/Glanz (sitzen INNEN im Glas) */
.theme-glass .inner-card,
.theme-glass .jr-day { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.10); box-shadow: none; }
.theme-glass .inner-card::before,
.theme-glass .jr-day::before { display: none; }
/* Card-Hover: Glas + Border bleiben STABIL. Es passiert NUR eines — derselbe
Eck-Glanz breitet sich von oben-links/unten-rechts an den Kanten entlang aus,
indem die transparente Mittelzone schrumpft (28–72% → 40–60%). Kein Vollweiß,
keine zweite Border, keine Breiten-/Layout-Änderung. */
.theme-glass .card--hover:hover::before {
--glow-a: 33%; /* mittlere Ausbreitung (zwischen dezent u. stark) */
--glow-b: 67%;
--corner-tl: rgba(255, 255, 255, 0.75); /* weißes Leuchten oben-links (gedämpft) */
--corner-br: rgba(255, 255, 255, 0.60); /* weißes Leuchten unten-rechts (gedämpft) */
}
/* zusätzlicher dezenter weißer Außen-Glow, damit der Rand sichtbar "leuchtet" */
.theme-glass .card--hover:hover {
box-shadow: inset 0 1px 1px var(--glass-shimmer), var(--glass-depth), 0 0 22px var(--hover-glow);
}
/* =========================================================================
ACCENT: Verlauf dort, wo vorher flächiges Blau war
========================================================================= */
/* ---- Primär-Button: dunkler Glas-Button mit leuchtender UNTERKANTE ----
Saubere Schichtung über Background-Layer (kein z-index-/Overflow-Trick):
• GLOW-Linie (hinten): horizontaler Verlauf transparent→weiß(mittig)→transparent,
an der Unterkante.
• DUNKLE FILL-BOX (davor): deckt den Button bis auf die unterste VISIBLE_EDGE_HEIGHT
ab → der weiche innere Glow wird abgeschnitten, sichtbar bleibt nur eine dünne,
saubere Leuchtlinie.
• TEXT (vorne): liegt als Element-Inhalt automatisch über dem Hintergrund.
Kein Blur, kein Außen-Glow/-Schatten. Ruhe: schmal mittig · Hover: ~90%, nur horizontal.
Justierbar über die --btn-* Variablen (siehe .theme-glass Block). */
.theme-glass .btn--primary {
position: relative;
border: 1px solid rgba(255,255,255,0.12); /* Glas-Grundrand */
border-radius: 8px;
color: #fff;
background-color: var(--btn-fill); /* Grundfarbe (dunkel) */
background-image:
linear-gradient(var(--btn-fill), var(--btn-fill)), /* FILL-Box (deckt oben ab) */
linear-gradient(90deg, transparent 0%, rgba(255,255,255,var(--btn-glow)) 50%, transparent 100%); /* GLOW-Linie */
background-repeat: no-repeat, no-repeat;
background-position: top center, bottom center;
/* WICHTIG: Positionierung an der BORDER-Box (nicht padding-box) → die Leuchtlinie
liegt exakt auf der unteren Border-Kante, kein 1px-Versatz. Border = Schein. */
background-origin: border-box;
background-clip: border-box;
background-size:
100% calc(100% - var(--btn-edge)), /* FILL lässt unten VISIBLE_EDGE_HEIGHT frei */
var(--btn-glow-w-rest) 100%; /* GLOW-Breite (mittig) — Ruhezustand */
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
transition: background-size .3s ease, border-color .3s ease;
}
/* Hover: leuchtende Unterkante breitet sich horizontal auf ~90% aus (weich) */
.theme-glass .btn--primary:hover {
border-color: rgba(255,255,255,0.20);
background-size:
100% calc(100% - var(--btn-edge)),
var(--btn-glow-w-hover) 100%;
}
.theme-glass .brand__mark { background: var(--accent-gradient); }
/* Profil-Avatar (oben rechts) → gleicher Glas-Look wie die Cards:
Glas-Grund + Blur + dezenter Rand + diagonaler Eck-Glanz. "AV" bleibt weiß. */
.theme-glass .avatar {
position: relative;
color: #ffffff;
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
border: 1px solid var(--glass-border);
box-shadow: inset 0 1px 1px var(--glass-shimmer), var(--glass-depth);
}
.theme-glass .avatar::before {
content: ""; position: absolute; inset: 0;
border-radius: inherit; padding: 1px;
background: linear-gradient(135deg,
var(--corner-tl) 0%, transparent 28%, transparent 72%, var(--corner-br) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none;
}
/* Fortschrittsbalken (.status-bar/.progress) werden jetzt ZENTRAL getönt –
siehe Block "ZENTRALE PILLEN/BADGES + FORTSCHRITTSBALKEN" am Dateiende. */
/* Aktiver Sidebar-Punkt: Balken bleibt Gradient (oben), Zeile aber NEUTRAL
& etwas heller als der Sidebar-Grund → wirkt ausgewählt; Icon+Text weiß. */
.theme-glass .nav-item.is-active::before { background: var(--accent-gradient); }
.theme-glass .nav-item.is-active {
background: var(--nav-active-bg); /* neutral, dezent heller (justierbar) */
color: #ffffff;
}
.theme-glass .nav-item.is-active .nav-item__icon { color: #ffffff; }
/* Marktuhr: blaue Elemente → Verlauf/Lila (grün + rot bleiben) */
.theme-glass .clock__now { background: linear-gradient(180deg, rgba(146,80,236,0.1), #9250ec, rgba(239,79,60,0.5)); }
.theme-glass .clock-bar.is-open-blue { background: var(--accent-gradient); box-shadow: 0 0 10px rgba(146,80,236,0.3); }
/* farbig hinterlegte Icon-KACHELN/-Boxen → dezente Lila→Orange-Verlauf-Tönung
+ heller Glyph. Zentral für alle Icon-in-Box-Elemente (identische Optik):
.quick-tile__icon · .action-card__ico → Dashboard
.card__icon → Card-Header-Icons (Dashboard u.a.)
.kpi-card__icon → Journal-KPI-Karten
.join-card__icon → Trading Ideas (Telegram)
.coming-soon__icon → Affiliate-Seiten (Coming Soon)
NICHT: freistehende Icons ohne Box, Sidebar-/Header-Icons. */
.theme-glass .quick-tile__icon,
.theme-glass .action-card__ico,
.theme-glass .card__icon,
.theme-glass .kpi-card__icon,
.theme-glass .join-card__icon,
.theme-glass .coming-soon__icon,
.theme-glass .portal-tile__icon,
.theme-glass .cat-tile__icon,
.theme-glass .ti-telegram__icon,
.theme-glass .fs-step__icon,
.theme-glass .fs-service__icon {
background: var(--tint-bg);
border-color: var(--tint-border);
color: #d9c9ff;
}
/* ---- Zentrale "Icon-Box"-Tönung als Variablen (Referenz: Trading-Ideas-Icon).
Pillen/Badges (unten) und Fortschrittsbalken/Charts teilen denselben Look. ---- */
.theme-glass {
--tint-bg: linear-gradient(135deg, rgba(127,68,244,0.24), rgba(239,79,60,0.18));
--tint-border: rgba(146, 80, 236, 0.40);
--tint-text: #e6d8ff; /* helle, gut lesbare Tönung für Text in Pillen/Badges */
}
/* Begrüßungs-Akzentwort: Verlauf-Text (Haupttitel bleibt weiß) */
.theme-glass .greeting span {
background: var(--accent-gradient);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* kleine Chips/Backgrounds, die var(--card) opak nutzen → leicht durchscheinend
(.badge/.badge--active werden jetzt zentral getönt – siehe PILLEN/BADGES-Block). */
.theme-glass .icon-btn,
.theme-glass .account__menu { background: rgba(255, 255, 255, 0.06); }
/* =========================================================================
LOGIN im Glas-Theme — neues Hintergrundbild + Glas-Card (scoped).
========================================================================= */
.theme-glass .login__bg {
background: url("../wifi-money-background-purple-orange.webp") center/cover no-repeat;
opacity: 1; /* Bild kommt vom Login-Layer selbst */
}
.theme-glass .login__overlay {
background:
radial-gradient(900px 500px at 70% 20%, var(--accent-glow), transparent 60%),
linear-gradient(180deg, rgba(6,6,10,0.62), rgba(6,6,10,0.86));
}
/* Login-Card = Liquid Glass wie die App-Cards */
.theme-glass .login__card {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
border: 0; /* Ring (::before) IST die Border → kein Versatz */
box-shadow: inset 0 1px 1px var(--glass-shimmer), var(--glass-depth);
}
/* Border + diagonaler Eck-Glanz als EIN Ring, exakt auf der Kontur (wie bei .card) */
.theme-glass .login__card::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
background: linear-gradient(135deg, var(--corner-tl) 0%, var(--glass-border) 28%, var(--glass-border) 72%, var(--corner-br) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
/* =========================================================================
FIX Sticky-Kursinhalt (lesson-basic-forex-1.html):
Die rechte Spalte ist "card outline". Die zentrale Regel
".theme-glass .card { position: relative }" (0-2-0) überschrieb sonst
".outline { position: sticky }" (0-1-0). Mit höherer Spezifität (.card.outline)
greift sticky verlässlich. (.card hat KEIN störendes overflow; Vorfahren auch nicht.)
========================================================================= */
.theme-glass .card.outline {
position: sticky;
top: calc(var(--header-h) + var(--s-5)); /* unter dem Glas-Header */
align-self: start; /* nicht auf Zeilenhöhe strecken */
/* Höhe/Flex/Innen-Scroll kommen aus der .outline-Regel (display:flex, max-height,
.outline__scroll overflow-y:auto) — Card selbst scrollt nicht, Eck-Glanz bleibt. */
}
@media (max-width: 1000px) {
/* gestapelt: kein sticky, normal im Fluss */
.theme-glass .card.outline { position: static; }
}
/* =========================================================================
ADMIN — dezentes "Admin-Panel"-Label im Header (Rest nutzt die App-Styles).
========================================================================= */
.admin-tag {
display: inline-flex; align-items: center; gap: 7px;
margin-left: var(--s-2);
font-size: 13px; font-weight: 600; color: var(--text-muted);
white-space: nowrap;
}
.admin-tag svg { width: 15px; height: 15px; color: var(--accent); }
@media (max-width: 640px) { .admin-tag { display: none; } } /* auf sehr schmalen Screens ausblenden */
/* =========================================================================
ADMIN — kompakte Stats-/Kennzahlen-Cards (nur .stat-grid im Admin-Dashboard).
Justierbar über --stat-pad-y (Höhe/vertikales Padding) und --stat-gap (Abstand).
========================================================================= */
.stat-grid {
--stat-pad-y: 8px; /* vertikales Padding der Karten (kleiner = flacher) */
--stat-gap: 12px; /* Abstand zwischen den Karten */
gap: var(--stat-gap);
}
.stat-grid > .card {
padding-top: var(--stat-pad-y);
padding-bottom: var(--stat-pad-y);
display: flex;
flex-direction: column;
justify-content: center; /* Inhalt vertikal zentriert, wenig Leerraum */
}
/* Innenabstände straffen, damit die flacheren Karten sauber sitzen */
.stat-grid .card__head { margin-bottom: 0px; }
/* .stat__value ist ein → hatte die große Browser-Standard-Marge (oben+unten,
~1em). Explizit stark reduziert (~ -64%) für kompakteren Sitz der Kennzahl. */
.stat-grid .stat__value { line-height: 1.1; margin: 10px 0; }
.stat-grid .stat__delta { margin-top: var(--s-1); }
/* =========================================================================
ADMIN — CRUD-Ansicht (Liste + Formular-Panel + Badge + Toggle).
Gemeinsame Klassen für alle Verwaltungs-Seiten (Announcements, Live Sessions,
Pop-ups, Giveaways) → einmal pflegen, überall identisch.
========================================================================= */
/* Toolbar: Titel links + "Neu erstellen" rechts */
.crud-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6);
}
/* ---- Liste ---- */
.crud-list { display: flex; flex-direction: column; gap: var(--s-3); }
.crud-row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); }
/* ganzflächig klickbare CRUD-Karte (öffnet Bearbeiten-Popup) — cursor + Hover
signalisieren die Klickbarkeit; der Hover-Hintergrund kommt von .card--hover */
.crud-row.is-rowclick { cursor: pointer; }
/* klickbare Tabellen-Zeile (Rollen/Support etc.) */
.dtable tbody tr.is-rowclick { cursor: pointer; }
.dtable tbody tr.is-rowclick:hover { background: var(--card-hover); }
.crud-row__ico {
width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px;
display: grid; place-items: center; color: var(--accent);
background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.crud-row__ico svg { width: 19px; height: 19px; }
.crud-row__body { flex: 1; min-width: 0; }
.crud-row__title { font-size: 14.5px; font-weight: 600; margin: 0 0 2px; }
.crud-row__sub { font-size: 12.5px; color: var(--text-muted); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crud-row__status { flex-shrink: 0; }
.crud-row__actions { display: flex; gap: var(--s-2); flex-shrink: 0; }
@media (max-width: 720px) {
.crud-row { flex-wrap: wrap; }
.crud-row__body { flex-basis: 100%; order: -1; }
}
/* ---- Status-Badge (Aktiv / Inaktiv) ---- */
.status-badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill);
border: 1px solid transparent; white-space: nowrap;
}
.status-badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.status-badge.is-active { color: var(--green); background: var(--green-soft); border-color: rgba(34,197,94,0.35); }
.status-badge.is-active .dot { background: var(--green); }
.status-badge.is-inactive { color: var(--text-faint); background: rgba(255,255,255,0.03); border-color: var(--border); }
.status-badge.is-inactive .dot { background: var(--text-faint); }
/* ---- Icon-Aktionen (Bearbeiten / Löschen) ---- */
.icon-action {
width: 34px; height: 34px; display: grid; place-items: center;
border-radius: 8px; border: 1px solid var(--border);
background: rgba(255,255,255,0.04); color: var(--text-muted);
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-action:hover { background: var(--card-hover); color: var(--text); border-color: var(--border-strong); }
.icon-action--danger:hover { color: var(--red); border-color: rgba(255,59,48,0.4); }
.icon-action svg { width: 16px; height: 16px; }
/* ---- Toggle-Switch (Aktiv/Inaktiv) ---- */
.switch { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; user-select: none; }
.switch input {
appearance: none; -webkit-appearance: none;
width: 40px; height: 22px; border-radius: var(--r-pill); flex-shrink: 0;
background: rgba(255,255,255,0.10); border: 1px solid var(--border-strong);
position: relative; cursor: pointer; transition: background .18s ease, border-color .18s ease;
}
.switch input::after {
content: ""; position: absolute; top: 2px; left: 2px;
width: 16px; height: 16px; border-radius: 50%; background: #fff;
transition: transform .18s ease;
}
.switch input:checked { background: var(--accent); border-color: var(--accent); }
.switch input:checked::after { transform: translateX(18px); }
.switch__label { font-size: 13px; color: var(--text-muted); }
/* ---- Formular-Panel (Erstellen/Bearbeiten) ---- */
.form-panel { margin-bottom: var(--s-6); }
.form-panel[hidden] { display: none; }
/* =========================================================================
ADMIN-STANDARD: Bearbeiten/Erstellen läuft IMMER über die zentrale
Modal-Komponente (kein Accordion). Das Formular-Panel (.form-panel) wird
von window.AdminModal als zentriertes, blickdichtes Glas-Pop-up gezeigt.
Trigger: [data-open-form] · Schließen: [data-close-form]/Overlay/ESC.
Doku: admin/README.md · JS: app.js (Abschnitt 8, AdminModal).
========================================================================= */
/* Overlay HINTER dem Panel (200 < 201). Wichtig: AdminModal portalt Overlay UND
Panel nach
— sonst sperrt der Stacking-Context von .app (z-index:2) den
Panel-z-index ein und das body-Overlay läge VOR dem Panel. Portal nicht entfernen. */
.admin-modal-overlay {
position: fixed; inset: 0; z-index: 200;
background: rgba(0, 0, 0, 0.62);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.admin-modal-overlay[hidden] { display: none; }
body.admin-modal-lock { overflow: hidden; }
/* Panel als zentriertes Modal (blickdicht, Padding rundum, scrollbar bei Bedarf) */
.form-panel.is-modal {
position: fixed; z-index: 201;
top: 50%; left: 50%; transform: translate(-50%, -50%);
width: min(600px, calc(100vw - 2 * var(--s-5)));
max-height: 90vh;
margin: 0;
background: #0f0f16; /* blickdicht (über dem Overlay) */
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
/* Header oben + Footer unten bleiben FIX, nur der Inhalt dazwischen scrollt.
Der Panel-Rahmen (.card border) umschließt so IMMER das ganze Modal —
die Buttons liegen nie außerhalb. Gilt zentral für alle Bearbeiten-Modals. */
display: flex; flex-direction: column;
overflow: hidden;
}
/* fixe Kopfzeile (Titel + Close) und Fußzeile (Aktions-Buttons) */
.form-panel.is-modal > .form-panel__head,
.form-panel.is-modal > .form-actions { flex: 0 0 auto; }
/* scrollender Inhaltsbereich = alles zwischen Kopf und Fuß (z. B. .form-grid).
Dieser Bereich hat KEINE eigene abschließende Border → wirkt nicht wie Modal-Ende. */
.form-panel.is-modal > :not(.form-panel__head):not(.form-actions) {
flex: 1 1 auto; min-height: 0; overflow-y: auto;
/* etwas Innenabstand rechts, damit die Scrollbar nicht am Text klebt */
margin-right: calc(-1 * var(--s-2)); padding-right: var(--s-2);
}
.form-panel__head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--s-5); padding-bottom: var(--s-4);
border-bottom: 1px solid var(--border);
}
.form-panel__title { font-size: 16px; font-weight: 650; margin: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); }
/* WARUM min-width: 0 – Raster- und Flex-Kinder haben von Haus aus
min-width: auto und schrumpfen NICHT unter ihren Inhalt. Ein langer Wert im
Feld (bunny-Adresse, Videolink) machte die Spalte breiter als das 600px
breite Fenster, und das Pop-up liess sich waagerecht scrollen. */
.form-grid > * { min-width: 0; }
.form-field { display: flex; flex-direction: column; min-width: 0; }
.form-field--full { grid-column: 1 / -1; }
/* Eine Dolmetscherzeile: E-Mail, Ausgangs- und Zielsprache nebeneinander.
Die E-Mail bekommt den Rest, die beiden Sprachfelder je ein Drittel – so
steht die Adresse nicht auf zwei Zeilen, während daneben Luft ist. */
.form-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-2); margin-bottom: var(--s-2); }
.form-row > * { min-width: 0; }
/* „Gespeichert, aber ein Schritt daneben ist schiefgegangen“ – bernsteinfarben,
nicht rot: Es ist keine abgelehnte Eingabe, sondern ein Hinweis auf etwas,
das beim nächsten Speichern von selbst nachzieht. */
.admin-warnung {
margin-bottom: var(--s-5); padding: 12px 16px; border-radius: 10px;
font-size: 14px; line-height: 1.5; color: #f5d9a8;
background: rgba(200, 140, 40, .12); border: 1px solid rgba(200, 140, 40, .3);
}
.form-label { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; }
.form-input, .form-select, .form-textarea {
width: 100%; font-family: inherit; font-size: 14px; color: var(--text);
background: #0c0c0f; border: 1px solid var(--border-strong); border-radius: 10px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.form-input, .form-select { height: 44px; padding: 0 14px; }
.form-textarea { padding: 12px 14px; min-height: 92px; resize: vertical; line-height: 1.5; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-faint); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
/* =========================================================================
AUSGEFUELLT VOM BROWSER (autofill)
BETREIBERMELDUNG vom 08.08.2026: "Ja, ist auch mal nicht zu sehen." Das
"mal" war der Hinweis - betroffen waren nur die Felder, die der Browser
selbst ausgefuellt hatte.
Chrome und Safari uebermalen ein automatisch ausgefuelltes Feld mit einem
eigenen hellen Gelb-Weiss. Das ist KEINE gewoehnliche Hintergrundfarbe: Sie
laesst sich mit background nicht ueberschreiben. Der einzige Weg ist ein
Innenschatten, der die Flaeche ueberdeckt, und -webkit-text-fill-color fuer
die Schrift.
FOLGE VORHER: Wer sein Passwort vom Browser einsetzen liess, sah ein weisses
Feld - darin weisse Schrift und das weisse Auge. Beides unsichtbar, und beim
naechsten Aufruf war es wieder da, weil ohne Autofill nichts uebermalt wurde.
Die lange Verzoegerung ist der uebliche Kniff: Ein Uebergang, der praktisch
nie ankommt, haelt den eigenen Grund stabil, statt dass der Browser ihn
nachtraeglich wieder ueberblendet.
========================================================================= */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-textarea:-webkit-autofill,
.account-fields input:-webkit-autofill,
.account-fields input:-webkit-autofill:hover,
.account-fields input:-webkit-autofill:focus,
#passkeys input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
box-shadow: 0 0 0 1000px var(--surface) inset;
-webkit-text-fill-color: var(--text);
caret-color: var(--text);
transition: background-color 9999s ease-in-out 0s;
}
/* native Date/Time-Picker im Dark-Look */
.form-input[type="date"], .form-input[type="time"] { color-scheme: dark; }
.form-select {
appearance: none; -webkit-appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px;
}
/* Datei-Upload (Platzhalter, ohne echte Funktion) */
/* =========================================================================
MEDIENKARTE (Uploads im Panel)
-------------------------------------------------------------------------
BETREIBERANSAGE vom 30.08.2026: "Das ist halt wie eine richtige Tabelle...
Ich wuerde das vielleicht sogar auch nochmal so machen, dass die dann auch
eine eigene Karte sind."
Drei Spalten: was es ist | der Knopf dazu | der Link. Bis dahin standen bei
den Videoplaetzen drei UNBESCHRIFTETE Felder unter einer Ueberschrift, jedes
mit einem Knopf in eigener Zeile - welches Feld das Video war und welches
das Vorschaubild, erkannte man nur am Knopftext darunter.
========================================================================= */
.medien-karte {
border: 1px solid var(--border); border-radius: 12px;
background: rgba(255,255,255,0.02); padding: var(--s-5);
}
.medien-karte + .medien-karte { margin-top: var(--s-4); }
.medien-karte__titel {
margin: 0 0 var(--s-4); font-size: 13px; font-weight: 600;
letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
}
/* DIE ERSTE SPALTE HATTE EINE OBERGRENZE ZU WENIG (30.08.2026).
Sie stand auf max-content - so breit wie ihre laengste Beschriftung. Eine
davon lautete "Video link · English (also used for all other languages)",
sechsundfuenfzig Zeichen, und nahm sich rund siebenhundert Pixel. Der Knopf
nahm seine feste Breite, fuer das Adressfeld blieben sechzig uebrig.
Der Betreiber meldete es als "ich sehe die Links nicht" - sie standen drin,
nur in einem Feld, in das nichts hineinpasste. Ein Raster, dessen Spalten
sich am laengsten Text bedienen, hat keine Bremse; die steht jetzt hier.
Spalte 3 bekommt eine echte Mindestbreite: Ein Feld, in das man nichts
lesen kann, ist kein Feld. min() haelt sie davon ab, schmale Fenster zu
sprengen. */
.medien-tabelle {
display: grid;
grid-template-columns: minmax(0, 200px) max-content minmax(min(200px, 100%), 1fr);
gap: var(--s-3) var(--s-4); align-items: start;
}
/* Die Zeile selbst zeichnet nichts - ihre drei Kinder haengen direkt im
Raster. Sonst saessen sie in einer Spalte und nichts waere buendig. */
/* DER STAPEL - fuer den Sammel-Upload, wo es kein Adressfeld gibt.
EIN Abstand zwischen allen Elementen. Vorher trug hier jeder Knopf sein
eigenes .form-actions mit margin-top: var(--s-6), dazu kam der gap der
Spalte: zwei Knoepfe untereinander ergaben doppelt so viel Luft wie noetig,
und die Auswahl darueber sass in einem dritten Kasten mit wieder anderem
Abstand. Genau das war der Padding-Befund des Betreibers vom 30.08.2026. */
.medien-stapel { display: flex; flex-direction: column; gap: var(--s-4); }
.medien-stapel .form-label { display: block; margin-bottom: 6px; }
/* Volle Breite: In einer Spalte von rund vierhundert Pixeln flattern zwei
verschieden breite Knoepfe untereinander. */
.medien-stapel .btn { width: 100%; }
.medien-stapel .form-hint:empty { display: none; }
.medien-zeile { display: contents; }
/* Beschriftung und Knopf stehen auf Hoehe der ERSTEN Zeile des Feldes -
nicht mittig zur ganzen Zelle. Die traegt unter dem Feld noch Hinweise und
waere sonst mal zwei, mal vier Zeilen hoch, und die Beschriftung wanderte
mit. 44px ist die Hoehe von .form-input. */
.medien-zeile__name { font-size: 13.5px; color: var(--text-muted); min-height: 44px; display: flex; align-items: center; }
.medien-zeile__tat { display: flex; align-items: center; min-height: 44px; }
.medien-zeile__knopf { white-space: nowrap; }
.medien-zeile__wert { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.medien-zeile__wert .form-hint:empty { display: none; }
/* Schmale Geraete: Aus der Tabelle werden Bloecke. Reihenfolge dort wie
gezeichnet - Name, Feld, Knopf: Auf dem Handy liest man von oben nach
unten, und der Knopf ist der letzte Schritt. */
@media (max-width: 760px) {
.medien-tabelle { display: block; }
.medien-zeile { display: grid; gap: 6px; }
.medien-zeile + .medien-zeile { margin-top: var(--s-4); }
.medien-zeile__name { order: 1; min-height: 0; }
.medien-zeile__wert { order: 2; }
.medien-zeile__tat { order: 3; min-height: 0; }
.medien-zeile__knopf { width: 100%; }
}
.form-toggle { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-4); }
.form-actions { display: flex; gap: var(--s-3); margin-top: var(--s-6); }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
/* =========================================================================
ADMIN — Tabellen / Matrix (dunkler Glas-Stil, dezente Trennlinien).
Wiederverwendbar für Academy-Stats, Support, Rollen-Matrix.
========================================================================= */
.table-wrap { width: 100%; overflow-x: auto; } /* horizontal scrollbar auf Mobile */
.dtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dtable th, .dtable td {
text-align: left; padding: var(--s-3) var(--s-4);
border-bottom: 1px solid rgba(255,255,255,0.06);
white-space: nowrap;
}
.dtable thead th {
font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
color: var(--text-faint); border-bottom: 1px solid var(--border);
}
.dtable tbody tr { transition: background .15s ease; }
.dtable tbody tr:hover { background: rgba(255,255,255,0.03); }
.dtable tbody tr:last-child td { border-bottom: none; }
.dtable td.num, .dtable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dtable td.center, .dtable th.center { text-align: center; }
.dtable .t-title { font-weight: 600; color: var(--text); white-space: normal; }
.dtable .t-actions { display: flex; gap: var(--s-2); justify-content: flex-end; }
/* Mini-Fortschrittsbalken in Zellen (z.B. Abschlussquote / Ø-Sehdauer) */
.cell-bar { display: flex; align-items: center; gap: var(--s-3); min-width: 140px; }
.cell-bar__track { flex: 1; height: 6px; border-radius: var(--r-pill); background: rgba(255,255,255,0.07); overflow: hidden; }
.cell-bar__fill { height: 100%; border-radius: var(--r-pill); background: var(--accent); }
.cell-bar__val { font-size: 12.5px; color: var(--text-muted); min-width: 34px; text-align: right; }
/* Matrix: Häkchen/Kreuz-Zellen (Rolle × Berechtigung) */
.mx-yes { color: var(--green); }
.mx-no { color: var(--text-faint); }
.mx-yes svg, .mx-no svg { width: 16px; height: 16px; }
/* Filter-/Kategorie-Chips */
.chip-bar { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.chip {
font-size: 12.5px; font-weight: 500; padding: 6px 13px; border-radius: var(--r-pill);
border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--text-muted);
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { background: var(--card-hover); color: var(--text); }
.chip.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
/* Rollen-Badge (mehrere Farben zur Unterscheidung) */
.role-badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill);
border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent);
white-space: nowrap;
}
.role-badge.is-support { border-color: rgba(34,197,94,0.35); background: var(--green-soft); color: var(--green); }
.role-badge.is-content { border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.12); color: #f5a623; }
/* Aktivitäts-/Änderungsprotokoll (Liste) */
.log-list { display: flex; flex-direction: column; }
.log-item {
display: flex; gap: var(--s-3); align-items: flex-start;
padding: var(--s-3) 0; border-top: 1px solid rgba(255,255,255,0.06);
}
.log-item:first-child { border-top: none; }
.log-item__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; box-shadow: 0 0 0 3px var(--accent-glow); }
.log-item__body { flex: 1; min-width: 0; font-size: 13px; }
.log-item__body strong { color: var(--text); font-weight: 600; }
.log-item__time { font-size: 11.5px; color: var(--text-faint); flex-shrink: 0; }
/* Ticket-Status-Varianten (Support) — nutzen die .status-badge-Basis */
.status-badge.is-open { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.status-badge.is-open .dot { background: var(--accent); }
.status-badge.is-progress { color: #f5a623; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35); }
.status-badge.is-progress .dot { background: #f5a623; }
.status-badge.is-solved { color: var(--green); background: var(--green-soft); border-color: rgba(34,197,94,0.35); }
.status-badge.is-solved .dot { background: var(--green); }
/* =========================================================================
PROFIL-POPUP (Account-Dropdown) — gleicher Glas-Hintergrund/Blur wie die
Cards (blickdicht/substanziell), ABER OHNE diagonalen Eck-Glanz.
Grundrand bleibt zur sauberen Abgrenzung.
========================================================================= */
.theme-glass .account__menu {
/* justierbar: --popup-bg (Deckkraft/blickdicht) · --popup-blur (Blur-Stärke) */
--popup-bg: rgba(18, 18, 26, 0.92); /* kräftig & blickdicht (höher = undurchsichtiger) */
--popup-blur: 60px; /* deutlich stärkerer Blur als die Cards */
background: var(--popup-bg);
-webkit-backdrop-filter: blur(var(--popup-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
backdrop-filter: blur(var(--popup-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-bright));
border: 1px solid var(--glass-border);
box-shadow: inset 0 1px 1px var(--glass-shimmer), var(--glass-depth);
}
/* =========================================================================
REWARDS — Schwellen-Hinweis + MILESTONES (Badges nach Kategorien).
Badges als CSS-Hexagone (konsistent mit den Status-Wappen), Glas-Design.
========================================================================= */
.rank-hint { font-size: 13px; color: var(--text-muted); text-align: center; margin: var(--s-4) 0 0; }
.rank-hint strong { color: var(--text); font-weight: 600; }
.ms-head { margin-top: var(--s-10); margin-bottom: var(--s-5); }
.ms-sub { font-size: 14px; color: var(--text-muted); margin: 0; }
/* Gesamt-Fortschritt */
.ms-overall { margin-bottom: var(--s-5); }
.ms-overall__row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-3); }
.ms-overall__label { font-size: 14px; color: var(--text-muted); }
.ms-overall__label strong { color: var(--text); font-weight: 700; }
.ms-overall__pct { font-size: 15px; font-weight: 700; color: var(--accent); }
/* Kategorie-Block */
.ms-cat { margin-bottom: var(--s-5); }
.ms-cat__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-3); }
.ms-cat__name { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--accent); margin: 0 0 4px; }
.ms-cat__value { font-size: 14px; color: var(--text-muted); margin: 0; }
.ms-cat__value strong { color: var(--text); font-weight: 700; }
.ms-cat__count { font-size: 12.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.ms-cat__next { font-size: 12.5px; color: var(--text-muted); margin: var(--s-3) 0 0; }
.ms-cat__next strong { color: var(--text); font-weight: 600; }
.ms-xp {
display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700;
color: var(--accent); border: 1px solid var(--accent-line); background: var(--accent-soft);
padding: 1px 8px; border-radius: var(--r-pill);
}
/* Badge-Reihe */
.ms-badges { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.ms-badge {
display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2);
padding: var(--s-4) var(--s-2);
border: 1px solid var(--border); border-radius: 14px;
background: rgba(255,255,255,0.025);
}
.ms-badge__hex {
position: relative; width: 52px; height: 58px; flex-shrink: 0;
display: grid; place-items: center; color: #fff;
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
background: var(--accent-gradient, linear-gradient(135deg, #7f3ffb, #f94e33));
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
}
.ms-badge__hex > svg:first-child { width: 24px; height: 24px; }
.ms-badge__check {
position: absolute; top: -4px; right: -4px;
width: 20px; height: 20px; border-radius: 50%;
display: grid; place-items: center; color: #fff;
background: var(--green); border: 2px solid #12121a;
}
.ms-badge__check svg { width: 11px; height: 11px; }
.ms-badge__name { font-size: 13px; font-weight: 600; margin: 4px 0 0; }
.ms-badge__thresh { font-size: 12px; color: var(--text-muted); margin: 0; }
/* nicht erreicht → gedimmt + entfärbtes Badge */
.ms-badge.is-locked { opacity: .5; }
.ms-badge.is-locked .ms-badge__hex {
background: linear-gradient(160deg, #2b2b34, #17171d);
color: var(--text-faint);
filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4));
}
.ms-badge.is-unlocked { border-color: var(--accent-line); background: var(--accent-soft); }
@media (max-width: 760px) { .ms-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ms-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* =========================================================================
SPRACHUMSCHALTER (Header) — nutzt das .account-Dropdown-Muster.
========================================================================= */
.lang__btn { gap: 7px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-item); }
.lang__btn:hover { background: var(--card-hover); }
.lang__flag { font-size: 15px; line-height: 1; }
.lang__code { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.lang .account__chev { width: 15px; height: 15px; }
.lang__menu { min-width: 190px; }
.lang__menu .menu-item { gap: var(--s-3); }
.lang__menu .menu-item .lang__code { margin-left: auto; }
.lang__menu .menu-item.is-active { color: var(--accent); background: var(--accent-soft); }
@media (max-width: 640px) { .lang__code { display: none; } .lang__btn { padding: 6px 8px; } }
/* =========================================================================
DASHBOARD — Portal-Raster: eine Box pro Sidebar-Navigationspunkt.
========================================================================= */
/* Zwei-Zeilen-Layout: 4 große Main-Cards oben, 8 kompakte Cards in EINER Reihe darunter. */
.nav-portal-main { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-bottom: var(--s-4); }
.nav-portal-rest { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-3); }
/* Main-Cards: größer/prominenter (mehr Höhe, größeres Icon/Titel) */
.nav-portal-main .portal-tile { padding: var(--s-6); min-height: 104px; gap: 10px; }
.nav-portal-main .portal-tile__icon { width: 44px; height: 44px; }
.nav-portal-main .portal-tile__icon svg { width: 22px; height: 22px; }
.nav-portal-main .portal-tile__title { font-size: 15.5px; }
.nav-portal-main .portal-tile__desc { font-size: 12px; }
/* Rest-Cards: kompakt, vertikal zentriert (Icon oben, Titel darunter), ohne Beschreibung */
.nav-portal-rest .portal-tile { padding: var(--s-3) var(--s-2); align-items: center; text-align: center; gap: 7px; }
.nav-portal-rest .portal-tile__head { flex-direction: column; gap: 7px; }
.nav-portal-rest .portal-tile__icon { width: 34px; height: 34px; }
.nav-portal-rest .portal-tile__title { font-size: 11.5px; line-height: 1.2; }
.nav-portal-rest .portal-tile__desc { display: none; }
.portal-tile {
display: flex; flex-direction: column; gap: 7px;
padding: var(--s-4);
}
/* Kopfzeile der Kachel: Icon links, Titel direkt daneben (horizontal). */
.portal-tile__head { display: flex; align-items: center; gap: 9px; }
.portal-tile__icon {
flex: none;
width: 34px; height: 34px; border-radius: 10px;
display: grid; place-items: center; color: var(--accent);
background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.portal-tile__icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.portal-tile__title { font-size: 13.5px; font-weight: 650; margin: 0; line-height: 1.25; }
.portal-tile__desc { font-size: 11.5px; color: var(--text-muted); margin: 0; line-height: 1.4; }
@media (max-width: 1100px) {
.nav-portal-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-portal-rest { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.nav-portal-main { grid-template-columns: minmax(0, 1fr); }
.nav-portal-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* =========================================================================
LIVE SESSIONS · EBENE 1 — drei große Kategorie-Kacheln (Trading/UGC/Mindset)
========================================================================= */
.cat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-6);
}
.cat-tile {
display: flex; flex-direction: column;
align-items: flex-start;
gap: var(--s-3);
min-height: 300px;
padding: var(--s-8);
}
/* Icon-Box EXAKT wie bei Trading Ideas (.join-card__icon): gleiche Maße,
gleicher Gradient (via .theme-glass-Sammelregel), gleicher Glow. Nur linksbündig
statt zentriert (margin-bottom statt auto). KEIN eigener Hover-Effekt. */
.cat-tile__icon {
width: 64px; height: 64px; border-radius: 18px;
display: grid; place-items: center;
color: var(--accent);
background: var(--accent-soft);
border: 1px solid var(--accent-line);
box-shadow: 0 0 50px var(--accent-glow);
margin-bottom: var(--s-2);
}
.cat-tile__icon svg { width: 32px; height: 32px; }
.cat-tile__title { font-size: 22px; font-weight: 700; letter-spacing: -.3px; color: var(--text); }
.cat-tile__desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }
.cat-tile__cta {
margin-top: auto;
display: inline-flex; align-items: center; gap: 8px;
font-size: 13.5px; font-weight: 600; color: var(--accent);
transition: gap .2s ease;
}
.cat-tile__cta svg { width: 17px; height: 17px; }
.cat-tile.card--hover:hover .cat-tile__cta { gap: 12px; }
/* Icons haben bewusst KEINEN eigenen Hover-Effekt (nur der Card-Eck-Glanz reagiert). */
/* =========================================================================
LIVE SESSIONS — Kategorie-Boxen (Inline-Variante) + Educator-Liste.
Educator-Detailseite (Hero + Strategie-Videos). Alles theme-glass.
========================================================================= */
/* ---- Haupt-Tabs (Übersicht | Sessions Kalender) ---- */
.view-toggle--tabs { margin-bottom: var(--s-6); }
.view-toggle--tabs .view-toggle__btn { padding: 9px 18px; font-size: 13.5px; }
/* ---- Kategorie-Boxen: Trading | UGC ---- */
.cat-select {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-5);
margin-bottom: var(--s-7);
}
.cat-card {
display: flex; align-items: center; gap: var(--s-4);
padding: var(--s-5);
text-align: left;
cursor: pointer;
}
.cat-card__icon {
flex: none;
width: 48px; height: 48px; border-radius: 13px;
display: grid; place-items: center;
color: var(--accent);
background: var(--accent-soft);
border: 1px solid var(--accent-line);
}
.cat-card__icon svg { width: 24px; height: 24px; stroke-width: 1.8; }
.cat-card__text { display: flex; flex-direction: column; gap: 3px; }
.cat-card__title { font-size: 16px; font-weight: 650; color: var(--text); }
.cat-card__desc { font-size: 12.5px; color: var(--text-muted); }
/* aktive Kategorie: lila/oranger Eck-Glanz + Akzent-Icon-Box */
.theme-glass .cat-card.is-active::before {
--glow-a: 26%; --glow-b: 74%;
--corner-tl: #7f44f4;
--corner-br: #ef4f3c;
}
.theme-glass .cat-card.is-active {
box-shadow: inset 0 1px 1px var(--glass-shimmer), var(--glass-depth), 0 0 26px var(--accent-glow);
}
.cat-card.is-active .cat-card__icon {
color: #fff;
background: var(--accent-gradient);
border-color: transparent;
}
/* ---- Educator-Liste ---- */
.edu-section__title {
font-size: 15px; font-weight: 650; color: var(--text);
margin: 0 0 var(--s-4);
}
/* Cards NEBENEINANDER in einer Reihe (flex row), gleichmäßige Abstände.
Auf schmalen Screens brechen sie um / stapeln (flex-wrap). */
.edu-grid {
display: flex; flex-direction: row; flex-wrap: wrap;
align-items: stretch; gap: var(--s-5);
width: 100%;
}
/* Innerer Aufbau je Card: Icon oben (zentriert) → Name → Strategie. */
.edu-card {
flex: 1 1 220px; min-width: 0;
display: flex; flex-direction: column; align-items: center;
text-align: center; gap: var(--s-3);
padding: var(--s-6) var(--s-5);
}
.edu-card__media { flex: none; }
.edu-card__img {
width: 100%; height: 100%; border-radius: 10px;
object-fit: cover; display: block;
border: 1px solid rgba(255,255,255,0.14);
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.edu-card__body { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.edu-card__name { font-size: 19px; font-weight: 700; letter-spacing: -.2px; color: var(--text); }
.edu-card__strategy { font-size: 13px; color: var(--text-muted); }
/* Pfeil entfällt im vertikalen, zentrierten Layout. */
.edu-card__arrow { display: none; }
/* =========================================================================
EDUCATOR-DETAILSEITE
========================================================================= */
/* ---- HERO — betonter Container: kräftigerer Glas-Look + lila/oranger Schimmer ---- */
.edu-hero {
position: relative;
overflow: hidden;
padding: var(--s-8);
/* gleicher vertikaler Abstand oben (zum Educator-Titel) wie unten (zur
"Einarbeitung"-Sektion) — konsistent auf beiden Seiten der Box. */
margin-top: var(--s-8);
margin-bottom: var(--s-8);
}
/* betonter Eck-Glanz in Educator-Farbe (dezent) im Ruhezustand; Akzent-Fallback */
.theme-glass .edu-hero::before {
--glow-a: 22%; --glow-b: 78%;
--corner-tl: color-mix(in srgb, var(--edu, #7f44f4) 85%, transparent);
--corner-br: color-mix(in srgb, var(--edu, #7f44f4) 55%, transparent);
}
.theme-glass .edu-hero {
box-shadow: inset 0 1px 1px var(--glass-shimmer), var(--glass-depth), 0 0 40px color-mix(in srgb, var(--edu, #7f44f4) 18%, transparent);
}
/* dezenter diagonaler lila/orange Schimmer im Hintergrund des Containers */
.edu-hero__glow {
position: absolute; inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
background:
radial-gradient(120% 80% at 0% 0%, rgba(127,68,244,0.22), transparent 55%),
radial-gradient(120% 80% at 100% 100%, rgba(239,79,60,0.18), transparent 55%);
}
.edu-hero > *:not(.edu-hero__glow) { position: relative; z-index: 1; }
.edu-hero__profile {
display: flex; align-items: center; gap: var(--s-6);
margin-bottom: var(--s-6);
}
.edu-hero__portrait { flex: none; }
.edu-hero__portrait img {
width: 104px; height: 104px; border-radius: 20px;
object-fit: cover; display: block;
border: 1px solid rgba(255,255,255,0.14);
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.edu-hero__info { min-width: 0; }
.edu-hero__cat {
display: inline-block;
font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
color: #fff;
background: var(--accent-gradient);
padding: 4px 11px; border-radius: var(--r-pill);
margin-bottom: var(--s-3);
}
.edu-hero__name { font-size: 30px; font-weight: 700; letter-spacing: -.4px; margin: 0 0 4px; }
.edu-hero__strategy { font-size: 15px; font-weight: 600; color: var(--accent); margin: 0 0 var(--s-3); }
.edu-hero__text { font-size: 14px; color: var(--text-muted); line-height: 1.65; margin: 0; max-width: 68ch; }
/* AUF TELEFON UND TABLET IST WIEDER ALLES BENUTZBAR (23.08.2026).
HIER STAND DAS GEGENTEIL, und es hatte seinen Grund. Am 09.08.2026 hiess
es: "Macht es so, dass nur Live-Sessions und Dashboard angezeigt werden
koennen ... Die ganzen Sachen, die geblurred sind, einfach mal: Coming
Soon for the Mobile." Der Mitgliederbereich war auf dem Telefon damals
nicht zu gebrauchen - Tabellen rollten seitlich, Raster quetschten sich.
Statt ihn zu reparieren, wurde er zugesperrt.
AM 23.08.2026 IST ER REPARIERT (siehe den Mobil-Block am Dateiende), und
die Sperre wurde zum eigentlichen Fehler:
"Ich kann in der Mobilresponsive noch immer keine weiteren Bereiche
auswaehlen ... Zwischendurch auch die Sprache kann ich gar nicht
einstellen ... Auf mein Konto kann ich auch nicht gehen."
ALLE DREI KAMEN AUS DERSELBEN REGEL. Sie blendete jeden Navigationseintrag
ausser Dashboard und Live Sessions ab - und mit
".account__menu .menu-item" auch das Konto-Menue. Die Sprachwahl benutzt
dieselbe Klasse fuer ihre Eintraege und fiel still mit darunter; das war
damals niemandem aufgefallen, weil niemand danach gesucht hat.
WAS DAVON BLEIBT: nichts. Kein pointer-events, kein Abblenden, kein
Hinweis "nur am Rechner". Das Datenattribut data-mobil steht noch an zwei
Eintraegen im Markup - es kostet keine Klasse und stoert keinen Waechter;
wer es aufraeumt, nimmt es dort mit heraus.
MobilTest haelt fest, dass diese Sperre nicht zurueckkehrt. */
/* ---- Live-Session-Leiste: Countdown + Zoom-Button ---- */
.edu-live {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-5);
padding: var(--s-5);
border-radius: 16px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
}
.edu-live__lead { flex: 1; min-width: 200px; }
.edu-live__badge {
display: inline-flex; align-items: center; gap: 7px;
font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
color: var(--accent);
margin-bottom: 6px;
}
/* Wird wirklich gesendet, wechselt die Plakette auf Rot und der Punkt
pulsiert. EINE Aussage an EINER Stelle - vorher stand hier immer "Naechste
Live Session", und die Ueberschrift darunter behauptete "laeuft jetzt",
sobald die Uhrzeit passte. */
.edu-live__badge.is-live { color: var(--red); }
.edu-live__badge.is-live .dot {
background: var(--red); box-shadow: 0 0 0 0 rgba(255,59,48,0.6);
animation: livePuls 1.8s ease-out infinite;
}
@keyframes livePuls {
70% { box-shadow: 0 0 0 8px rgba(255,59,48,0); }
100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); }
}
/* Ohne Bewegung bleibt die Aussage dieselbe - sie haengt an Farbe und Text,
nicht am Pulsieren. */
@media (prefers-reduced-motion: reduce) { .edu-live__badge.is-live .dot { animation: none; } }
.edu-live__badge .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 10px var(--accent-glow);
}
.edu-live__label { font-size: 17px; font-weight: 650; color: var(--text); margin: 0 0 5px; }
.edu-live__meta {
display: inline-flex; align-items: center; gap: 7px;
font-size: 12.5px; color: var(--text-muted); margin: 0;
}
.edu-live__meta svg { width: 15px; height: 15px; stroke-width: 1.8; color: var(--accent); }
/* Countdown-Anzeige */
.edu-live__count { display: flex; align-items: center; gap: 8px; }
.cd { display: flex; flex-direction: column; align-items: center; min-width: 52px;
padding: 8px 6px; border-radius: 12px;
background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08); }
.cd__num { font-size: 24px; font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.cd__lbl { font-size: 9.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint); margin-top: 4px; }
.cd__sep { font-size: 22px; font-weight: 700; color: var(--text-faint); }
.edu-live__btn { flex: none; }
/* Das Formular um „In der Zoom-App starten“ soll sich verhalten wie der Knopf
daneben – ohne dieses display bekäme es die volle Breite der Zeile und
schöbe den Startknopf um. */
.edu-live__form { display: contents; }
/* DIE STEUERUNG DES EDUCATORS - Zustand und Knoepfe nebeneinander. */
.edu-live__steuerung { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.edu-live__zustand {
display: inline-flex; align-items: center; gap: 7px;
font-size: 12.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
color: #f87171;
}
.edu-live__zustand::before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: currentColor;
}
.edu-live__btn svg { width: 17px; height: 17px; }
/* ---- Session links, Educator rechts ----
BETREIBERANSAGE vom 08.08.2026: "Das Video auf der linken Seite, so wie bei
YouTube. Ganz oben an der oberen Kante vom Video faengt der Name mit der
Kategorie an, und unten der Benachrichtigungsknopf auch buendig auf."
ALS RASTER, NICHT ALS FLEX-ZEILE: Nur so bekommt die rechte Spalte die
Hoehe der linken vorgegeben. Mit flex richtete sie sich nach ihrem eigenen
Inhalt, und die Unterkanten lagen je nach Laenge der Notiz woanders. */
/* VIER FUENFTEL FUER DAS VIDEO.
BETREIBERANSAGE vom 08.08.2026: "Ich moechte es so machen, dass das Video
links 80 % vom ganzen Bereich einnimmt."
Als Anteil, nicht als feste Pixelzahl - sonst waere die rechte Spalte auf
einem breiten Monitor ein Streifen und auf einem kleinen die halbe Seite.
Die Untergrenze haelt sie beisammen: Darunter bricht "Erhalte
Benachrichtigungen zu Live Sessions und Educator" auf sechs Zeilen um. */
.edu-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(230px, 20%);
gap: var(--s-6);
margin-bottom: var(--s-8);
/* AUSDRUECKLICH, NICHT AUS VERSEHEN: Beide Spalten bekommen dieselbe Hoehe
und schliessen oben wie unten buendig ab - BETREIBERANSAGE vom
08.08.2026: "Neben dem Video ist alles uneben, das passt nicht
zusammen." Steht hier ein anderer Wert, wandern die Unterkanten
auseinander, sobald die Notiz einmal laenger ist. */
align-items: stretch;
}
/* 16:9 WIE BEI YOUTUBE, nicht als feste Pixelhoehe.
BETREIBERENTSCHEIDUNG vom 08.08.2026: "Go mit dem Verhaeltnis, wie es
YouTube macht." Eine feste Hoehe (520px) waere auf einem breiten Monitor
ein Briefschlitz und auf einem Laptop die halbe Seite, bevor man ueberhaupt
zu den Videos scrollt. So richtet sich die Hoehe nach der Breite.
height:auto laesst den Kasten trotzdem wachsen, wenn der Inhalt mehr
braucht - aspect-ratio ist dann nur die Untergrenze. Ohne das schnitte eine
lange Sessionzeile unten ab. */
.edu-split__main {
min-width: 0;
/* DIE BREITE KOMMT AUS DER SPALTE, DIE HOEHE AUS DEM VERHAELTNIS.
BETREIBERBILD vom 11.08.2026: "Das Design wurde noch immer nicht gefixt.
Es ist jetzt wieder ab und zu breit." Die Karte schob sich ueber die
rechte Spalte, und zwar mal ja, mal nein.
DAS "AB UND ZU" WAR DIE SPUR: Es haengt daran, wie lang die
Educator-Note gerade ist. Ist sie laenger als die Videoflaeche, wird die
rechte Spalte hoeher - und weil beide Spalten buendig abschliessen
sollen (align-items: stretch), zieht sie die linke mit. Damit hat die
Karte auf einmal eine feste Hoehe, und der Browser rechnet aus 16/9 die
BREITE aus statt der Hoehe. Ergebnis: breiter als ihre Bahn.
width: 100% macht die Breite eindeutig. Danach kann aspect-ratio nur
noch in die gemeinte Richtung rechnen, und die gestreckte Hoehe laesst
die Karte einfach hoeher werden - was sie soll.
MEINE ERSTE KORREKTUR (min-width am Nachbarn, Umbruch langer Adressen)
war richtig und nicht die Ursache. Sie hat einen zweiten Fehler behoben,
der zufaellig gleichzeitig sichtbar wurde. */
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
display: flex; flex-direction: column; gap: var(--s-5);
}
/* Beide Zustaende fuellen dieselbe Flaeche - es steht immer nur einer da.
Vorher klebte der Countdown oben und darunter war toter Raum.
MITTIG IN BEIDE RICHTUNGEN. BETREIBERANSAGE vom 08.08.2026: "Dass dieser
Badge mit der Countdownflaeche zentriert ist im Video." Ohne
justify-content sass die Leiste links und lief rechts ins Leere - ein
flex-Kind nimmt in der Hauptachse nur die Breite seines Inhalts. */
.edu-split__main > .edu-hero {
flex: 1 1 auto;
display: flex; align-items: center; justify-content: center;
/* BEIDE RAENDER, NICHT NUR UNTEN. Beim ersten Anlauf stand hier nur
margin-bottom - das margin-top von --s-8 aus der Basisregel blieb stehen
und schob die Videoflaeche genau eine Stufe tiefer als die rechte Spalte.
BETREIBERANSAGE vom 08.08.2026: "Das Badge soll genau da anfangen, wo das
Video anfaengt, von der Hoehe her." */
margin-top: 0; margin-bottom: 0;
}
.edu-split__main > .edu-hero .edu-live {
width: 100%; max-width: 720px;
justify-content: center;
}
.edu-split__main > .edu-zoom {
flex: 1 1 auto; min-height: 0;
position: relative;
/* Kein Innenabstand: Das Bild soll die Kanten beruehren, oben wie unten. */
padding: 0; margin-top: 0; overflow: hidden;
}
.edu-split__main > .edu-zoom .edu-zoom__buehne {
position: absolute; inset: 0;
min-height: 0; border-radius: 0;
}
/* Was vor der Buehne liegt, solange niemand beigetreten ist: Plakette,
Sessionzeile, Beitritts-Knopf. Sobald das SDK laeuft, setzt zoom-session.js
is-live - und die Ueberlagerung geht weg, statt ueber dem Bild zu haengen. */
.edu-zoom__davor {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--s-4);
padding: var(--s-6);
/* Ein Hauch Verlauf statt einer Flaeche: Der schwarze Grund allein wirkt
wie ein Ladefehler. */
background:
radial-gradient(120% 90% at 50% 0%, rgba(127,68,244,0.18), transparent 60%),
rgba(0,0,0,0.55);
}
.edu-zoom__davor .edu-live {
width: 100%; max-width: 640px;
justify-content: center;
background: rgba(10,10,15,0.72);
backdrop-filter: blur(6px);
}
.edu-zoom.is-live .edu-zoom__davor { display: none; }
/* DIE FLAECHE STEHT FEST, ZOOM PASST SICH HINEIN.
BETREIBERANSAGE vom 09.08.2026: "Das Verhaeltnis vom Platzhalter soll nicht
von der Groesse her veraendert werden." Und danach, nach zwei Anlaeufen mit
Zooms Vollbild: "Go mit dem Platzhalter, der bleibt."
ZWEI ANFORDERUNGEN, DIE SICH AUSSCHLIESSEN. Die Client View bringt die
volle Oberflaeche mit Leiste, Eigenbild und Freigabe - sie will dafuer das
ganze Fenster. Die Meetingansicht liess sich einsperren, ihr
Vorschau-Bildschirm, ihre Dialoge und die Fusszeile nicht: Im Test lag ein
grauer Bereich quer ueber der Akademie. Jedes davon einzeln einzufangen
waere eine Liste, die bei jedem Zoom-Update neu bricht.
Die eingebettete Ansicht braucht davon nichts - sie zeichnet von sich aus
in das Element, das man ihr gibt. */
/* DER VOLLBILDKNOPF.
BETREIBERANSAGE vom 09.08.2026: "Die Nutzer sollen den Platzhalter als
Vollbild machen koennen, damit sie besser sehen."
Er sitzt in der Ecke der Buehne und bleibt zurueckhaltend, bis man ihn
sucht - waehrend einer Session soll die Aufmerksamkeit beim Educator sein,
nicht bei unseren Bedienelementen. */
.edu-zoom__vollbild {
position: absolute; top: 12px; right: 12px; z-index: 3;
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px;
border: 1px solid rgba(255,255,255,0.14); border-radius: 9px;
background: rgba(10,10,15,0.66); color: var(--text-muted);
cursor: pointer; opacity: .55; transition: opacity .15s, color .15s;
}
.edu-zoom__vollbild:hover, .edu-zoom__vollbild:focus-visible { opacity: 1; color: #fff; }
.edu-zoom__vollbild svg { width: 16px; height: 16px; }
/* Im Vollbild verliert der Kasten sein Seitenverhaeltnis - er IST der
Bildschirm. Ohne das blieben oben und unten Balken in Bildschirmfarbe. */
.edu-zoom.is-vollbild {
aspect-ratio: auto; width: 100%; height: 100%;
border-radius: 0; padding: 0;
}
.edu-zoom.is-vollbild .edu-zoom__buehne { border-radius: 0; }
/* WAEHREND DER GASTGEBER SENDET, TRITT DIE AKADEMIE ZURUECK.
BETREIBERANSAGE vom 09.08.2026: "Es soll so aussehen, dass ich mich selber
sehen kann, auch mit den Buttons."
Die volle Zoom-Oberflaeche gibt es nur als Client View, und die will den
ganzen Schirm. Beim ersten Versuch schien unsere Seite halb durch - Zooms
Wurzelelement lag als Ueberlagerung darauf, und unsere Karte stand darueber.
Der Betreiber sah einen grauen Bereich quer ueber der Akademie und kam an
Zooms Join-Knopf nicht heran.
VERSTECKEN, NICHT ENTFERNEN: Die Seite bleibt im Dokument stehen und ist
nach dem Verlassen unveraendert da - mit Scrollstand, geoeffneten Reitern
und allem. Ein Neuaufbau waere sichtbar und wuerde den Platz verlieren, an
dem der Educator vorher war. */
body.zoom-vollbild > *:not(#zmmtg-root) { display: none !important; }
body.zoom-vollbild { overflow: hidden; background: #000; }
/* NACH DEM ENDE STEHT DA EIN SATZ, KEIN LOCH.
BETREIBERANSAGE: "Wenn man die Session beendet hat, sieht man den schwarzen
Platzhalter. Da soll stehen: die Session wurde gerade beendet." */
.edu-zoom__ende {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
padding: var(--s-6);
text-align: center; font-size: 15px; color: var(--text-muted);
background: rgba(0,0,0,0.55);
}
.edu-split__side {
display: flex; flex-direction: column; gap: var(--s-5);
/* Ohne min-height:0 waechst eine Rasterzelle mit ihrem Inhalt statt ihn zu
begrenzen - die Notiz rollte dann nicht, sondern machte die Spalte
laenger als das Video. */
min-height: 0;
/* UND min-width:0 AUS DEMSELBEN GRUND, nur in der anderen Richtung.
BETREIBERBILD vom 11.08.2026: Die rechte Spalte schob sich ueber die
Karte, die Educator-Note war rechts abgeschnitten, das Layout verrutscht.
DER AUSLOESER STAND IN DER NOTIZ: eine Zoom-Adresse, in einem Stueck, ohne
Leerzeichen. Ein Rasterkind darf von Haus aus nicht schmaler werden als
sein Inhalt - also drueckte die Adresse die Spalte breiter als ihre Bahn,
und das ganze Raster ging aus dem Leim.
Die linke Spalte hatte das seit jeher; hier fehlte es. Ein Fehler, der
erst auftritt, wenn jemand zum ersten Mal einen Link hineinschreibt. */
min-width: 0;
}
/* Lange Adressen brechen um, statt zu schieben. Ohne das haelt min-width:0
die Spalte zwar in ihrer Bahn - der Text liefe dann aber unsichtbar
darueber hinaus. */
.edu-note__text, .edu-signup__title { overflow-wrap: anywhere; }
/* Der Kopfblock hat den Platz gewechselt, nicht das Aussehen. Nur der eigene
Abstand nach unten faellt weg - hier setzt ihn das gap der Spalte. */
.edu-split__side .edu-head { margin-bottom: 0; flex-wrap: nowrap; gap: var(--s-4); }
/* KLEINER, WEIL DIE SPALTE SCHMAL IST.
BETREIBERANSAGE vom 08.08.2026: "Der Name mit der Kategorie bitte kleiner
machen, damit alles schoen reinpasst. Das ist ultra wichtig."
In 20 % Breite brach "Ilija Zubiks" bei 28px auf zwei Zeilen und
"Mindset · Trading Basic" gleich mit - vier Zeilen fuer zwei Angaben, und
die Hoehe fehlte der Notiz darunter. Nur hier verkleinert: In der
Kalenderansicht steht derselbe Block ueber die volle Breite und darf gross
bleiben. */
/* RAHMEN UND INHALT ZUSAMMEN, sonst quillt es heraus.
.edu-head__ini traegt eine eigene feste Groesse (88px). Beim ersten Anlauf
habe ich nur den Rahmen verkleinert - der Initialen-Block blieb gross, ragte
unten heraus und schob sich ueber die Educator Note. */
.edu-split__side .edu-head__frame { width: 60px; height: 60px; border-radius: 14px; padding: 4px; }
.edu-split__side .edu-head__ini {
width: 100%; height: 100%;
border-radius: 10px;
font-size: 19px;
}
.edu-split__side .edu-head__img { border-radius: 10px; }
.edu-split__side .edu-head__cat {
font-size: 9.5px; letter-spacing: .4px;
padding: 3px 8px; margin-bottom: 6px;
}
.edu-split__side .edu-head__name { font-size: 18px; letter-spacing: -.2px; line-height: 1.2; }
.edu-split__side .edu-head__strategy { font-size: 12px; line-height: 1.35; }
.edu-split__side .edu-note,
.edu-split__side .edu-signup { max-width: none; align-self: auto; }
/* Die Notiz nimmt, was zwischen Kopf und Knopf uebrig bleibt. Schreibt der
Educator drei Absaetze, rollt der Text darin - die Karte waechst nicht. */
/* SO HOCH WIE IHR TEXT, NICHT WIE DER PLATZ.
BETREIBERANSAGE vom 08.08.2026: "Das Educator-Note-Feld darf generell
kleiner werden." Vorher war die Notiz das mitwachsende Stueck der Spalte und
sog die ganze Resthoehe auf - bei drei Zeilen Text stand da ein leerer
Kasten von einem halben Bildschirm.
Die Obergrenze faengt den anderen Fall ab: Schreibt der Educator einen
Aufsatz, waechst die Karte nicht weiter, sondern man rollt darin. */
/* Sie reicht bis an die Benachrichtigungs-Karte heran - BETREIBERANSAGE vom
08.08.2026: "Die Educator Note so weit nach unten ziehen, bis sie zu der
Karte runtergeht, damit die rechte Seite gut gefuellt ist."
Der Abstand dazwischen kommt aus dem gap der Spalte. */
/* min-height: 0 IST HIER DAS ENTSCHEIDENDE, nicht flex: 1 1 auto.
BETREIBERBILD vom 11.08.2026: "Es ist jetzt wieder ab und zu breit."
DIE KETTE, UND SIE IST DREIMAL DIESELBE SORTE FEHLER: Ein Flex-Kind darf
von Haus aus nicht kleiner werden als sein Inhalt. Die Notiz konnte
deshalb nicht schrumpfen, obwohl ihr Text darin rollen sollte - der
overflow-y: auto eine Zeile tiefer kam nie zum Zug. Also wuchs die Karte
mit dem Text, die rechte Spalte wurde hoeher als die Videoflaeche, die
Rasterzeile zog die linke Spalte mit, und aus deren nun festen Hoehe
rechnete der Browser ueber aspect-ratio die BREITE aus. Am Ende schob sich
die Videokarte ueber die rechte Spalte.
Vier Schritte von einer fehlenden Zeile bis zum verrutschten Layout - und
sichtbar nur, wenn der Educator gerade eine lange Notiz geschrieben hat.
Daher "ab und zu".
Dieselbe Ursache wie beim min-width der Spalte daneben und beim Umbruch der
langen Adresse: Raster- und Flex-Kinder muessen ausdruecklich klein werden
duerfen. */
.edu-split__side .edu-note { flex: 1 1 auto; min-height: 0; max-height: none; }
.edu-split__side .edu-note__body { min-height: 0; }
.edu-split__side .edu-note__text { overflow-y: auto; min-height: 0; }
/* Der Knopf bleibt unten buendig mit der Videokante - die frei gewordene
Hoehe wird zu Luft zwischen Notiz und Knopf, nicht zu einem leeren Feld. */
.edu-split__side .edu-signup { flex: none; margin-top: auto; }
@media (max-width: 1100px) {
/* Untereinander. Die Hoehenbindung faellt damit weg, also auch der
Rollbereich - die Notiz darf hier so lang werden, wie sie ist. */
.edu-split { grid-template-columns: minmax(0, 1fr); }
.edu-split__side .edu-note { flex: none; max-height: none; }
.edu-split__side .edu-note__text { overflow-y: visible; }
/* Untereinander gibt es keine Unterkante, an der etwas buendig sitzen
koennte - der Knopf folgt einfach der Notiz. */
.edu-split__side .edu-signup { margin-top: 0; }
}
/* ---- Die Session selbst, eingebettet in der Seite ----
Die Buehne ist leer, bis jemand beitritt - das Zoom-SDK haengt sein
eigenes Geruest hinein. Deshalb steht die Hoehe hier und nicht dort:
Ohne sie waere der Kasten null Pixel hoch, das SDK zeichnete in nichts
hinein, und man saehe eine leere Seite statt der Session. */
.edu-zoom { padding: var(--s-5); margin-top: var(--s-5); }
.edu-zoom__buehne {
min-height: 520px;
border-radius: 14px;
overflow: hidden;
background: #000;
}
/* Zoom setzt eigene Farben in sein Geruest - der schwarze Grund darunter
verhindert das kurze weisse Aufblitzen beim Beitreten. */
.edu-zoom__buehne:empty { background: rgba(255,255,255,0.04); }
.edu-zoom__status {
margin: var(--s-4) 0 0;
font-size: 13.5px;
color: var(--text-muted);
text-align: center;
min-height: 20px;
}
.edu-zoom__status:empty { display: none; }
@media (max-width: 720px) {
.edu-zoom__buehne { min-height: 360px; }
}
/* ---- Strategie-Videos ---- */
.edu-videos__head { margin-bottom: var(--s-5); }
/* Das ausgeblendete Feld traegt hidden, nicht display:none.
BETREIBERANSAGE vom 08.08.2026: "Die Beschreibung muss hoeher, am besten
direkt unter dem Schalter mit ein bisschen Abstand. Dann kommen die
Videos." Vorher stand ueber ihr eine ganze Stufe Leerraum und unter ihr
fast keiner - sie klebte auf den Kacheln statt zum Umschalter zu gehoeren. */
.edu-videos .view-toggle--tabs { margin-bottom: var(--s-4); }
.edu-videos__panel { margin-top: 0; }
.edu-videos__panel > .edu-videos__sub { margin: 0 0 var(--s-5); }
.edu-videos__leer {
/* --s-6, nicht --s-7: Letztere ist im Wurzelblock nicht definiert. Ein
padding mit einem leeren var() ist ungueltig und faellt komplett weg -
der Kasten haette dann gar keinen Innenabstand. */
margin: 0; padding: var(--s-6) var(--s-5);
text-align: center; font-size: 13.5px; color: var(--text-faint);
border: 1px dashed rgba(255,255,255,0.12); border-radius: 14px;
}
.edu-videos__title { font-size: 20px; font-weight: 700; letter-spacing: -.3px; margin: 0 0 4px; }
.edu-videos__sub { font-size: 13.5px; color: var(--text-muted); margin: 0; }
.vid-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.vid-card__thumb {
position: relative; display: block;
aspect-ratio: 16 / 9; overflow: hidden;
border-radius: 16px 16px 0 0;
}
.vid-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.vid-card.card--hover:hover .vid-card__thumb img { transform: scale(1.05); }
.vid-card__play {
position: absolute; inset: 0; margin: auto;
width: 52px; height: 52px; border-radius: 50%;
display: grid; place-items: center;
color: #fff;
background: rgba(10,10,15,0.55);
border: 1px solid rgba(255,255,255,0.25);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
transition: background .2s ease, transform .2s ease;
}
.vid-card__play svg { width: 22px; height: 22px; margin-left: 2px; }
.vid-card.card--hover:hover .vid-card__play { background: var(--accent); transform: scale(1.06); }
.vid-card__dur {
position: absolute; right: 8px; bottom: 8px;
font-size: 11px; font-weight: 600; color: #fff;
background: rgba(0,0,0,0.65);
padding: 2px 7px; border-radius: 6px;
}
.vid-card__body { display: flex; flex-direction: column; gap: 4px; padding: var(--s-4); }
.vid-card__title { font-size: 14px; font-weight: 650; color: var(--text); line-height: 1.35; }
.vid-card__meta { font-size: 12px; color: var(--text-muted); }
/* =========================================================================
EDUCATOR-DETAILSEITE · KOPFZEILE — links "Zurück", rechts die Tabs (eine Zeile).
========================================================================= */
.edu-topbar {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-4);
/* DER EINZIGE HEBEL FUER DEN ABSTAND NACH OBEN.
Er schiebt beide Spalten gemeinsam - schoebe man stattdessen die
Videokarte einzeln, staenden ihre Oberkante und die der rechten Spalte
sofort wieder versetzt.
Erst gekuerzt auf --s-3 ("Das Video soll so weit oben sein wie es geht"),
dann wieder angehoben: Zusammen mit dem entfernten oberen Rand der Karte
war es eine Stufe zu viel und klebte am Ruecklink. */
margin-bottom: var(--s-6);
}
.edu-topbar .back-link { margin-bottom: 0; }
.edu-topbar .view-toggle--tabs { margin-bottom: 0; }
/* Session-Kalender-Tab: (1) gleicher oberer Abstand wie im Übersicht-Tab
(edu-hero), damit der Toggle/Kalender nicht am Educator-Kopf + den Tabs klebt. */
[data-edu-panel="calendar"] { margin-top: var(--s-8); }
/* (3) rechte Spalte ("Heutige Sessions") oben bündig mit dem Kalender: kein
Sticky-Versatz in diesem Kontext (Announcements-Seite behält ihr Sticky). */
[data-edu-panel="calendar"] .ann-today { position: static; top: auto; }
/* KOPF — Bild, Name, Strategie. Abstand nach unten zur folgenden Box/Inhalten. */
.edu-head {
display: flex; align-items: stretch; gap: var(--s-5); /* Kinder auf gleiche Höhe strecken */
margin-bottom: var(--s-7);
}
.edu-head__portrait { flex: none; display: flex; align-items: center; } /* Bild vertikal zentriert trotz stretch */
.edu-head__portrait img {
width: 88px; height: 88px; border-radius: 18px;
object-fit: cover; display: block;
border: 1px solid rgba(255,255,255,0.14);
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.edu-head__info { min-width: 0; }
.edu-head__cat {
display: inline-block;
font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
/* getönte Kategorie-Pille in Educator-Farbe (dezent), sonst Akzent-Fallback */
color: var(--edu, var(--accent));
background: color-mix(in srgb, var(--edu, var(--accent)) 20%, transparent);
border: 1px solid color-mix(in srgb, var(--edu, var(--accent)) 45%, transparent);
padding: 4px 11px; border-radius: var(--r-pill);
margin-bottom: var(--s-2);
}
.edu-head__name { font-size: 28px; font-weight: 700; letter-spacing: -.4px; margin: 0 0 3px; }
.edu-head__strategy { font-size: 14.5px; font-weight: 600; color: var(--edu, var(--accent)); margin: 0; }
/* Educator-Intro-Text im Übersicht-Tab */
.edu-intro { margin: var(--s-7) 0; }
.edu-intro__title { font-size: 19px; font-weight: 700; letter-spacing: -.3px; margin: 0 0 var(--s-3); }
.edu-intro__text { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin: 0; max-width: 74ch; }
/* Tabs auf der Detailseite = Segmented Control (Standard-view-toggle, aktiv = lila) */
.view-toggle--tabs { margin-bottom: var(--s-6); }
/* ---- Responsive ---- */
@media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
.cat-grid { grid-template-columns: minmax(0, 1fr); }
.cat-tile { min-height: 0; }
}
@media (max-width: 760px) {
.cat-select { grid-template-columns: minmax(0, 1fr); }
.edu-hero__profile { flex-direction: column; text-align: center; align-items: center; }
.edu-hero__text { max-width: none; }
.edu-head { flex-direction: column; text-align: center; }
.edu-live { flex-direction: column; align-items: stretch; }
.edu-live__count { justify-content: center; }
.edu-live__btn { width: 100%; justify-content: center; }
}
/* =========================================================================
ZENTRALE PILLEN/BADGES + FORTSCHRITTSBALKEN — getönte "Icon-Box"-Optik.
Alle Marken-Pillen/Badges bekommen: getönter Gradient (--tint-bg) + dezenter
Border (--tint-border) + gut lesbarer Text (--tint-text). Form/Radius/Padding
bleiben je Element erhalten. (Semantische Status-/Rollen-Badges mit eigener
Farbe – is-active grün etc. – behalten bewusst ihre Bedeutung.)
========================================================================= */
.theme-glass .pill--beta,
.theme-glass .pill--soon,
.theme-glass .badge,
.theme-glass .badge--streak,
.theme-glass .badge--active,
.theme-glass .portal-tile__soon,
.theme-glass .chip.is-active,
.theme-glass .ms-xp,
.theme-glass .edu-head__cat,
.theme-glass .edu-hero__cat {
background: var(--tint-bg);
border: 1px solid var(--tint-border);
color: var(--tint-text);
}
/* AUSNAHME von der Tönung oben — nachgemessen am 05.08.2026.
Der Block davor ist SPEZIFISCHER als .badge--warn (.theme-glass .badge =
zwei Klassen gegen eine) und steht später in der Datei. Er hat die orange
Warnfarbe also vollständig überschrieben: Der Punkt war orange, das Schild
selbst blieb violett getönt — der Betreiber sah schlicht keine Änderung.
Diese eine Stufe trägt eine Bedeutung, die die Tönung nicht einebnen darf. */
.theme-glass .badge--warn {
background: var(--warn-soft);
border: 1px solid var(--warn-line);
color: var(--warn);
}
/* Pillen über Card-Bildern (Kurs-Pillen) — Tönung über dunklem Unterleger,
damit der Text auf hellen Bildern lesbar bleibt (Blur bleibt aus dem Basis-Stil). */
.theme-glass .course-card__pill,
.theme-glass .course-card__pill--soon {
background:
linear-gradient(135deg, rgba(127,68,244,0.34), rgba(239,79,60,0.26)),
rgba(10, 10, 14, 0.50);
border-color: var(--tint-border);
color: #fff;
}
/* ---- Fortschrittsbalken: dezenter getönter Fill + Track mit dezentem Border ----
Deckt BEIDE Balken-Varianten ab, damit ALLE identisch aussehen:
• .progress / .progress__bar → Academy, Milestones, Rewards, Journal
• .status-bar / .status-bar>i → Dashboard (Status-Card: XP, Badges,
Volume Traded, Account Growth) */
/* justierbare Werte für die Linien-Optik (feinjustierbar) */
.theme-glass {
--bar-line-h: 2px; /* Linienstärke (dünner als der Track) */
--bar-inset-x: 3px; /* seitlicher Innenabstand der Linie */
}
/* TRACK = Container mit Luft: Border/Rundung/Höhe unverändert; Linie darin
vertikal zentriert und seitlich eingerückt. */
.theme-glass .progress,
.theme-glass .status-bar {
background: rgba(255, 255, 255, 0.05);
box-shadow: inset 0 0 0 1px var(--tint-border); /* Track-Border wie Icon-Box, ohne Layout-Shift */
display: flex;
align-items: center; /* Linie vertikal zentriert */
padding: 0 var(--bar-inset-x); /* seitlicher Innenabstand */
}
/* FORTSCHRITT = schmale weiße Linie (statt voll gefüllter Höhe) */
.theme-glass .progress__bar,
.theme-glass .status-bar > i {
height: var(--bar-line-h); /* dünne Linie statt Track-Höhe */
background: #FFFFFF;
border-radius: var(--r-pill); /* abgerundete Enden */
box-shadow: none;
}
/* =========================================================================
DASHBOARD — VIP-Wappen, Abzeichen-Reihe, Main-Cards.
Wappen sind wiederverwendete Komponenten (.badge-hex aus rewards.html,
.ms-badge aus milestones.html). Später leicht durch Bilder ersetzbar:
das jeweilige