/* willers.one board - gemeinsame Huelle
   Farben, Seitengrund, Kopfleiste und Hell/Dunkel fuer alle Board-Seiten.
   Formensprache wie im BD Cockpit: heller, ruhiger Grund, weisse Karten,
   eine Akzentfarbe, kompakte Knoepfe. Eigene Hausfarbe ist das Violett aus
   dem willers.one-Logo. Wird als erstes Stylesheet geladen; Bausteine
   ergaenzen danach nur, was sie selbst brauchen. */

:root {
    --bg:            #f3f4f6;
    --surface:       #ffffff;
    --surface-2:     #f8f9fa;
    --surface-3:     #eef0f2;
    --border:        #e5e7eb;
    --text:          #111827;
    --text-muted:    #575d69;   /* gut lesbar auch in duenner Schrift */
    --accent:        #6b3f81;   /* Violett aus dem Logo */
    --accent-hover:  #5a336d;
    --accent-soft:   #f3edf7;
    --accent-text:   #ffffff;
    --danger:        #dc2626;
    --danger-soft:   #fef2f2;
    --danger-border: #fecaca;
    --ok:            #15803d;
    --ok-soft:       #dcfce7;
    --warn:          #b45309;
    --shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --shadow-lg:     0 10px 30px rgba(0,0,0,.14);

    /* Schrift: Roboto (eigene Dateien unter /assets/schriften, variabel 100-900) */
    --schrift: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --radius:        12px;
    --knopf-radius:  8px;
    --control-h:     36px;      /* Eingabefelder */
    --control-h-akt: 28px;      /* jeder Knopf */
    --kopf-h:        79px;      /* Menuebalken: 55 px Menue + je 11 px Luft + 2 px Rand */
    --seite-x:       24px;      /* Seitenrand links und rechts */
    --kopf-abstand:  22px;      /* Luft ueber dem schwebenden Menuebalken */
    --rand-unten:    var(--kopf-abstand);   /* Luft unter Inhalt, Radio-Player und Karte - wie ueber dem Menue */
    /* Unterkante des Menuebalkens - shell.js misst sie nach, falls er umbricht */
    --kopf-unten:    calc(var(--kopf-abstand) + var(--kopf-h));
    /* Breite des Inhalts (Seite max. 1500 px abzueglich Rand) - der
       Menuebalken ist genauso breit */
    --inhalt-breite: min(calc(100vw - 2 * var(--seite-x)), 1452px);
    /* Innenabstand des Menuebalkens (1 px Rand + 18 px): um genau so viel
       ist der Inhalt eingerueckt - links buendig mit dem Logo, rechts mit
       dem Profilbild */
    --kopf-innen:    19px;
    --inhalt-innen:  calc(var(--inhalt-breite) - 2 * var(--kopf-innen));

    /* Aeltere Namen, damit nichts bricht, was sie noch verwendet */
    --text-soft:     var(--text-muted);
    --win-bg:        var(--bg);
    --win-surface:   var(--surface);
    --win-surface-2: var(--surface-2);
    --win-border:    var(--border);
    --win-text:      var(--text);
    --win-soft:      var(--text-muted);
    --win-accent:    var(--accent);

    /* Seitengrund: sehr helle, weiche Flaechen */
    --grund:   #f0f1f1;
    --grund-a: #fbfbf9;
    --grund-b: #eef1f4;
    --grund-c: #f7f4f9;

    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg:            #131417;
    --surface:       #1c1d21;
    --surface-2:     #232529;
    --surface-3:     #2b2d33;
    --border:        #34363d;
    --text:          #e8e8ea;
    --text-muted:    #adb0b8;
    --accent:        #b993d1;   /* aufgehellt, sonst verschwindet es im Dunkel */
    --accent-hover:  #c9aadc;
    --accent-soft:   #2e2537;
    --accent-text:   #17121c;
    --danger:        #f47171;
    --danger-soft:   #3a2325;
    --danger-border: #5c3336;
    --ok:            #4cc38a;
    --ok-soft:       #17392a;
    --warn:          #e0a63a;
    --shadow:        0 1px 3px rgba(0,0,0,.4);
    --shadow-lg:     0 10px 30px rgba(0,0,0,.55);

    --grund:   #131417;
    --grund-a: color-mix(in srgb, #131417 92%, #ffffff);
    --grund-b: color-mix(in srgb, #131417 93%, #8aa0c0);
    --grund-c: color-mix(in srgb, #131417 93%, #b993d1);

    color-scheme: dark;
}

/* Roboto liegt auf dem eigenen Server (OFL, assets/schriften/OFL-Roboto.txt) -
   kein Abruf bei Google. Eine variable Datei je Zeichensatz deckt alle
   Staerken von 100 bis 900 ab. */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/schriften/roboto-latin.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+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/schriften/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--grund); }
html, body { margin: 0; padding: 0; }

body {
    min-height: 100vh;
    background: transparent;
    color: var(--text);
    font-family: var(--schrift);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}


a { color: var(--accent); text-decoration: none; }

/* ---------- Seitengrund ----------
   Drei grosse, weiche Flaechen ziehen langsam hin und her. Bewegt wird nur
   per transform; shell.js stellt sie auf die Uhrzeit, damit ein
   Seitenwechsel die Bewegung nicht auf Anfang setzt. */
.seiten-grund {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: var(--grund);
}
.seiten-grund span {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    will-change: transform;
}
.seiten-grund span:nth-child(1) {
    width: 80vmax; height: 80vmax; margin: -40vmax 0 0 -40vmax;
    background: radial-gradient(circle closest-side, var(--grund-a) 0%, var(--grund-a) 30%, transparent 100%);
    animation: grundA 54s ease-in-out infinite;
}
.seiten-grund span:nth-child(2) {
    width: 74vmax; height: 74vmax; margin: -37vmax 0 0 -37vmax;
    background: radial-gradient(circle closest-side, var(--grund-b) 0%, var(--grund-b) 30%, transparent 100%);
    animation: grundB 66s ease-in-out infinite;
}
.seiten-grund span:nth-child(3) {
    width: 62vmax; height: 62vmax; margin: -31vmax 0 0 -31vmax; opacity: .9;
    background: radial-gradient(circle closest-side, var(--grund-c) 0%, var(--grund-c) 30%, transparent 100%);
    animation: grundC 60s ease-in-out infinite;
}
@keyframes grundA {
    0%, 100% { transform: translate3d(-34vw, -26vh, 0) scale(1); }
    25%      { transform: translate3d(30vw, -22vh, 0) scale(1.12); }
    50%      { transform: translate3d(28vw, 24vh, 0) scale(1); }
    75%      { transform: translate3d(-30vw, 26vh, 0) scale(1.14); }
}
@keyframes grundB {
    0%, 100% { transform: translate3d(32vw, 24vh, 0) scale(1.08); }
    25%      { transform: translate3d(-32vw, 26vh, 0) scale(.96); }
    50%      { transform: translate3d(-34vw, -24vh, 0) scale(1.12); }
    75%      { transform: translate3d(30vw, -26vh, 0) scale(.98); }
}
@keyframes grundC {
    0%, 100% { transform: translate3d(0, -32vh, 0) scale(1.04); }
    25%      { transform: translate3d(34vw, 4vh, 0) scale(1.16); }
    50%      { transform: translate3d(0, 32vh, 0) scale(1); }
    75%      { transform: translate3d(-34vw, -4vh, 0) scale(1.14); }
}
body.bg-paused .seiten-grund span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .seiten-grund span { animation: none; } }
@media print { .seiten-grund { display: none; } }

/* ---------- Kopfleiste ----------
   Ein schwebender Balken mit runden Ecken, genau so breit wie der Inhalt.
   Das Menue besteht aus Bereichsreiter (19 px, 1 px liegt auf der Kante)
   und Kasten (37 px) - zusammen 55 px, oben und unten je 11 px Luft bis zum
   Rand des Balkens. Marke, Pfeile und Symbole stehen auf der
   Hoehe der Menuepunkte, nicht mittig zum Ganzen. */
.kopfleiste {
    position: fixed;
    top: var(--kopf-abstand);
    left: 0;
    right: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 14px;
    width: var(--inhalt-breite);
    height: var(--kopf-h);
    margin: 0 auto;
    padding: 0 calc(var(--kopf-innen) - 1px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.kopfleiste:hover {
    border-color: color-mix(in srgb, var(--text) 14%, var(--border));
    box-shadow: 0 10px 30px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.05);
    transform: translateY(-1px);
}
:root[data-theme="dark"] .kopfleiste { box-shadow: 0 6px 20px rgba(0,0,0,.40); }
:root[data-theme="dark"] .kopfleiste:hover { box-shadow: 0 12px 34px rgba(0,0,0,.55); }
@media (prefers-reduced-motion: reduce) { .kopfleiste, .kopfleiste:hover { transition: none; transform: none; } }

/* ---------- Rollbereich ----------
   Der Inhalt scrollt in einem eigenen Bereich unter dem Balken. Sein oberer
   Rand laeuft per Maske aus: Was sich dem Menue naehert, wird durchsichtiger
   und ist kurz vor dem Balken ganz verschwunden. Im Ruhezustand beginnt der
   Inhalt erst unterhalb dieser Zone und ist voll sichtbar. Unten genauso:
   Der Inhalt laeuft im selben Abstand zum Fensterrand aus (--rand-unten). */
.rollbereich {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-top: var(--kopf-unten);
    padding-bottom: var(--rand-unten);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--kopf-unten) + 4px), #000 calc(var(--kopf-unten) + 26px),
                                        #000 calc(100% - var(--rand-unten) - 26px), transparent calc(100% - var(--rand-unten) - 4px));
            mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--kopf-unten) + 4px), #000 calc(var(--kopf-unten) + 26px),
                                        #000 calc(100% - var(--rand-unten) - 26px), transparent calc(100% - var(--rand-unten) - 4px));
}

/* Fester Anker: so steht das Menue auf jeder Seite an derselben Stelle,
   auch wenn der Name wechselt. Ein laengerer Name darf optisch in die
   Luecke vor den Pfeilen ragen. */
.marke {
    flex: 0 0 165px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    overflow: visible;
}
.marke img { display: block; width: auto; height: 34px; max-width: 130px; }
.marke-name { display: inline-block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.marke-name.eff-blenden  { transition: opacity .35s ease; }
.marke-name.eff-blenden.wechselt  { opacity: 0; }
.marke-name.eff-schieben { transition: opacity .3s ease, transform .3s ease; }
.marke-name.eff-schieben.wechselt { opacity: 0; transform: translateY(-7px); }
.marke-name.eff-hart { transition: none; }

/* Name als Clip (shell_marke_clip): Fenster 170 px breit und so hoch wie das
   Logo. Darin grosse Versalien, deren Hoehe dem Logo entspricht; die Kamera-
   fahrt (Keyframes mcW...) steht je nach Anzahl und Dauer an der Kopfleiste.
   Die Raender laufen weich aus. */
.marke-clip {
    position: relative; display: block; flex: none; width: 170px; height: var(--menue-hoehe, 34px); overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9px, #000 calc(100% - 9px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 9px, #000 calc(100% - 9px), transparent 100%);
}
.mc-wort, .mc-zeile {
    position: absolute; left: 0; top: 50%;
    margin-top: -.5em;
    color: var(--text-muted);                          /* wie die Menueschrift */
    font-size: calc((var(--menue-hoehe, 34px) - 18px) * 1.36);   /* Versalhoehe = Logohoehe minus je 9 px oben und unten */
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    transform-origin: 0 58%;
    opacity: 0;
    animation-duration: var(--mc-gesamt);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-delay: var(--mc-start, 0s);   /* Auftritte stehen in den Keyframes je Wort */
    will-change: transform, opacity, filter;
}
/* Einzelne Buchstaben fuer Reinknallen, Schreibmaschine und Fallen */
.mc-z {
    display: inline-block;
    opacity: 0;
    transform-origin: 50% 75%;
    animation-duration: var(--mc-gesamt);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-delay: var(--mc-start, 0s);
    will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
    .marke-clip .mc-wort { animation: none !important; opacity: 1; transform: translateX(var(--rand, 6px)) scale(var(--fit, .25)); }
    .marke-clip .mc-wort:not(:first-child), .marke-clip .mc-zeile { display: none; }
}

/* Vor/Zurueck ist vorerst ausgeblendet (Markup und shell.js bleiben) */
.kopfleiste > .verlauf { display: none; }
.verlauf {
    flex: 0 0 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
    border-radius: 10px;
}
.verlauf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.verlauf-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.verlauf-btn:disabled { opacity: .3; cursor: default; }

/* ---------- Hauptmenue ----------
   Oben die Bereiche mit Symbol und Namen; der aktive steht in einer zarten
   Flaeche, die anderen mit 50 % Deckung. Darunter klein das Untermenue des Bereichs - beim
   Ueberfahren eines anderen Bereichs zeigt es dessen Punkte (shell.js).
   Zusammen 55 px hoch wie bisher: 32 px Leiste, 3 px Luft, 20 px Untermenue. */
.hauptmenue { display: flex; flex-direction: column; gap: 3px; flex: 0 1 auto; min-width: 0; }
.bereich-zeile { display: flex; align-items: center; gap: 4px; }
.bereich-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 9px;
    border-radius: 10px;
    color: var(--text);
    opacity: .5;               /* inaktive Bereiche: 50 % Deckung */
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .005em;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.bereich-btn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bereich-name { display: inline-block; }
.bereich-btn:hover, .bereich-btn.vorschau { opacity: 1; background: var(--surface-2); }
.bereich-btn.aktiv { opacity: 1; color: var(--accent); background: var(--accent-soft); }
.bereich-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Am Computer hat jeder Bereich dieselbe feste Breite (shell.js misst den
   laengsten Namen): Erscheint ein Name, verschiebt sich nichts. */
@media (min-width: 901px) {
    .hauptmenue[style*="--bereich-breite"] .bereich-btn { width: var(--bereich-breite); }
}

.untermenue {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 20px;
    padding: 0 10px;
    overflow-x: auto;
    scrollbar-width: none;
    animation: untermenueEin .22s ease both;
}
.untermenue::-webkit-scrollbar { display: none; }
@keyframes untermenueEin { from { opacity: 0; transform: translateY(-3px); } }
.untermenue a {
    flex: none;
    color: var(--text);
    opacity: .5;               /* inaktive Unterpunkte: 50 % Deckung */
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 20px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity .15s;
}
.untermenue a:hover, .untermenue a.aktiv { opacity: 1; }
/* Text statt Unterpunkten (Home: Datum und Uhrzeit, Admin: kurzer Satz) */
.untermenue-text { flex: none; color: var(--text); opacity: .5; font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
    .bereich-btn, .bereich-name, .untermenue { transition: none; animation: none; }
}

/* Pfeile, Symbole und der Name auf Hoehe der Menuepunkte. Das Logo ist so hoch
   wie Bereichsreiter und Menuekasten zusammen (--menue-hoehe); die Marke ist
   um so viel breiter, wie das Logo gegenueber 34 px waechst, damit der Name
   seinen Platz behaelt. */
@media (min-width: 901px) {
    .kopfleiste { --menue-hoehe: 55px; }
    /* Logo, 18 px Luft, Clip (170 px); bis zum Menue mindestens 110 px */
    .kopfleiste > .marke { flex-basis: calc(var(--menue-hoehe) + 18px + 170px); gap: 18px; margin-right: calc(110px - 14px); }
    .marke .logo-anim.klein { width: var(--menue-hoehe); }
}

.kopf-luecke { flex: 1; }
.kopf-extra, .kopf-rechts { display: flex; align-items: center; gap: 8px; }

/* Symbolknoepfe rechts: gleiche Groesse, gleiche Form, dezenter Rahmen */
.kopf-btn,
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--knopf-radius);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    flex: none;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}

.kopf-btn svg, .theme-toggle svg { width: 16px; height: 16px; display: block; }
.kopf-btn:hover, .theme-toggle:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: color-mix(in srgb, var(--text) 22%, transparent);
}
.kopf-btn:focus-visible, .theme-toggle:focus-visible, .konto-btn:focus-visible, .verlauf-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.kopf-form { margin: 0; display: flex; }

/* Symbol zeigt den aktuellen Zustand: Sonne bei hell, Mond bei dunkel */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: inline-flex; }
.theme-toggle span { display: inline-flex; }

/* ---------- Profilbild ---------- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.gross { width: 64px; height: 64px; font-size: 22px; }
.avatar.mittel { width: 30px; height: 30px; font-size: 11.5px; }

/* Das Profilbild ist der Anker der Symbolreihe: etwas groesser, eckig gerundet */
.konto-menue { position: relative; display: flex; align-items: center; }
.konto-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
}
.konto-btn .avatar { width: 100%; height: 100%; border-radius: 9px; }
.konto-btn:hover { border-color: color-mix(in srgb, var(--text) 22%, transparent); }

.aufklapp {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 1300;
    min-width: 220px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
}
.aufklapp-kopf { display: flex; flex-direction: column; padding: 6px 10px 8px; }
.aufklapp-kopf strong { font-size: 13px; }
.aufklapp-kopf span { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.aufklapp a, .aufklapp button {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.aufklapp a:hover, .aufklapp button:hover { background: var(--surface-3); }
.aufklapp form { margin: 0; }
.aufklapp .trenner { height: 1px; margin: 6px 0; background: var(--border); }
.aufklapp .gefahr { color: var(--danger); }
.aufklapp .gefahr:hover { background: var(--danger-soft); }

/* ---------- Suche oben rechts (wie im BD Cockpit) ---------- */
.suche-kopf { position: relative; display: flex; }
.suche-dd { width: 460px; max-width: calc(100vw - 32px); padding: 0; overflow: hidden; }
.sd-kopf { position: relative; padding: 10px; border-bottom: 1px solid var(--border); }
.sd-kopf input {
    width: 100%; height: 36px; padding: 8px 54px 8px 12px;
    border: 1px solid var(--border); border-radius: var(--knopf-radius);
    background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; outline: none;
}
.sd-kopf input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.sd-kopf input::-webkit-search-cancel-button { display: none; }
.sd-taste {
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    padding: 2px 6px; border: 1px solid var(--border); border-radius: 6px;
    color: var(--text-muted); font: 600 10.5px/1.4 var(--schrift); letter-spacing: .04em; pointer-events: none;
}
.sd-liste { max-height: min(440px, 60vh); overflow-y: auto; padding: 6px; transition: opacity .15s; }
.sd-liste.laedt { opacity: .55; }
.suche-dd .sd-eintrag { display: flex; align-items: center; gap: 11px; width: auto; padding: 8px 10px; border-radius: 8px; color: var(--text); font-size: inherit; }
.suche-dd .sd-eintrag:hover, .suche-dd .sd-eintrag.aktiv { background: var(--surface-2); }
.sd-symbol { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); color: var(--text-muted); }
.suche-dd .sd-eintrag:hover .sd-symbol, .suche-dd .sd-eintrag.aktiv .sd-symbol { background: var(--surface); color: var(--accent); }
.sd-symbol svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sd-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sd-text b, .sd-text small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sd-text b { font-size: 13px; font-weight: 600; }
.sd-text small { color: var(--text-muted); font-size: 12px; }
.sd-art { flex: none; color: var(--text-muted); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.sd-liste mark { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 20%, transparent); color: inherit; }
.sd-leer { margin: 0; padding: 22px 12px; color: var(--text-muted); font-size: 13px; text-align: center; }
@media (max-width: 900px) {
    .suche-dd { position: fixed; left: 16px; right: 16px; top: calc(var(--kopf-unten) + 6px); width: auto; max-width: none; }
    .sd-taste { display: none; }
    .sd-kopf input { padding-right: 12px; }
    .sd-art { display: none; }
}

/* ---------- Logo hell/dunkel ----------
   Die Dateien ohne Zusatz sind die weisse Fassung. Ausser in der dunklen
   Ansicht wird am selben <img> die dunkle Fassung eingesetzt. */
:root:not([data-theme="dark"]) .logo-full { content: url("/logo-light.png"); }
:root:not([data-theme="dark"]) .logo-mark { content: url("/logo-mark-light.png"); }

/* ---------- Live-Player des Radiobots ---------- */
/* Ueber dem Player blendet der Inhalt aus - wie unter der Menueleiste oben.
   --player-oben (Abstand Oberkante Player bis Fensterunterkante) setzt der
   Player (radiobot.js), auch fuer Seiten, die im Hub-Rahmen darueber liegen. */
body.mit-player .rollbereich {
    padding-bottom: calc(var(--player-oben, 90px) + 24px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--kopf-unten) + 4px), #000 calc(var(--kopf-unten) + 26px),
                                        #000 calc(100% - var(--player-oben, 90px) - 26px), transparent calc(100% - var(--player-oben, 90px) - 4px));
            mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--kopf-unten) + 4px), #000 calc(var(--kopf-unten) + 26px),
                                        #000 calc(100% - var(--player-oben, 90px) - 26px), transparent calc(100% - var(--player-oben, 90px) - 4px));
}

/* ---------- Seite ---------- */
.seite {
    width: var(--inhalt-innen);
    margin: 0 auto;
    padding: 28px 0 49px;
}

/* ---------- Burger-Menue (Handy und schmale Fenster) ----------
   Bis 900 px Breite ersetzt es die Bereichsleiste: Kopfleiste in einer Zeile
   (Logo, Suche, Hell/Dunkel, Menue, Profil), der Knopf oeffnet darunter eine
   Flaeche mit Home und allen Bereichen samt ihren Punkten. */
.burger-btn { display: none; }
.burger-btn svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .2s ease, opacity .2s ease; transform-origin: 12px 12px; }
.burger-btn[aria-expanded="true"] .b1 { transform: translateY(5px) rotate(45deg); }
.burger-btn[aria-expanded="true"] .b2 { opacity: 0; }
.burger-btn[aria-expanded="true"] .b3 { transform: translateY(-5px) rotate(-45deg); }
.burger {
    position: fixed; left: var(--seite-x); right: var(--seite-x); top: calc(var(--kopf-unten) + 8px); z-index: 1300;
    max-height: calc(100dvh - var(--kopf-unten) - 20px); overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 14px; padding: 12px 12px 16px;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
    box-shadow: var(--shadow-lg), 0 0 0 100vmax rgba(0, 0, 0, .28);
    animation: burgerAuf .2s cubic-bezier(.2, .8, .2, 1);
}
.burger[hidden] { display: none; }
@keyframes burgerAuf { from { opacity: 0; transform: translateY(-6px); } }
.burger svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.burger-home { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: 15px; font-weight: 700; }
.burger-home.aktiv { background: var(--accent-soft); color: var(--accent); }
.burger-gruppe h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 7px 4px; color: var(--text-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.burger-gruppe.aktiv h2 { color: var(--accent); }
.burger-punkte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.burger-punkte a { overflow: hidden; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.burger-punkte a:active, .burger-home:active { transform: scale(.98); }
.burger-punkte a.aktiv { background: var(--accent-soft); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .burger { animation: none; } .burger-btn svg path { transition: none; } }

@media (max-width: 900px) {
    :root { --seite-x: 10px; --kopf-innen: 13px; --kopf-h: auto; --kopf-abstand: 18px; --kopf-unten: 82px; }
    .kopfleiste { flex-wrap: nowrap; gap: 8px; padding: 10px calc(var(--kopf-innen) - 1px); border-radius: 14px; }
    .kopfleiste:hover { transform: none; }
    .marke { flex: 0 0 auto; }
    .marke-name, .marke-clip, .verlauf { display: none; }
    .hauptmenue { display: none; }
    .burger-btn { display: inline-flex; }
}
@media (min-width: 901px) { .burger { display: none !important; } }

/* ---------- Bewegtes Logo (Anmeldeseite und Kopfleiste) ----------
   Wie auf der Startseite, aber nur das L ohne Schriftzug:
   logo-mark-static.png traegt das L, der Farbkeil wird ueber die Maske
   logo-mark-wedge.png als eigene Flaeche gezeichnet. Beide Dateien sind
   gleich gross zugeschnitten, die Deckung ist exakt. Das L ist weiss;
   ausser in der dunklen Ansicht wird es per Filter schwarz. */
.logo-anim {
    position: relative;
    display: block;
    width: 76px;
    margin: 6px auto 8px;
    line-height: 0;
    animation: logoEin 1.6s ease-out both;
}
/* In der Kopfleiste: so hoch wie das bisherige Logo, ohne Einblenden */
.logo-anim.klein { flex: none; width: 34px; margin: 0; animation: none; }
.logo-anim .logo-base { display: block; width: 100%; height: auto; }
:root:not([data-theme="dark"]) .logo-anim .logo-base { filter: brightness(0); }
.logo-anim .logo-wedge {
    position: absolute;
    inset: 0;
    -webkit-mask-image: url("/logo-mark-wedge.png");
            mask-image: url("/logo-mark-wedge.png");
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    /* Erster Blitz gut zwei Sekunden nach dem Laden, danach alle 11 s */
    animation: keilBlitz 11s linear var(--logo-blitz, -7.5s) infinite;
}
.logo-anim .logo-wedge::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, #0b8b82 0%, #1a6f8c 16%, #3f5590 32%, #6b3f81 50%, #a3266f 70%, #ca2a7a 85%, #e0479a 100%);
    background-size: 300% 300%;
    animation: keilFluss 14s ease-in-out var(--logo-fluss, 0s) infinite alternate;
}
@keyframes keilFluss {
    0%   { background-position:   0% 50%; filter: hue-rotate(0deg)   saturate(1); }
    50%  { background-position: 100% 15%; filter: hue-rotate(-16deg) saturate(1.18); }
    100% { background-position:  35% 100%; filter: hue-rotate(12deg) saturate(.95); }
}
/* Seltener Doppelblitz - die langen Ruhephasen sind Absicht */
@keyframes keilBlitz {
    0%, 87%   { filter: brightness(1); }
    88%       { filter: brightness(2.1); }
    89%       { filter: brightness(1.05); }
    90.5%     { filter: brightness(2.6); }
    92%       { filter: brightness(1.1); }
    94%, 100% { filter: brightness(1); }
}
@keyframes logoEin { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .logo-anim, .logo-anim .logo-wedge, .logo-anim .logo-wedge::before { animation: none; }
}