/* ==========================================================
   Design-Grundlagen: Türkis & Pink, Hell/Dunkel umschaltbar
   ========================================================== */

:root {
    --accent-1: #14e0d4;          /* Türkis */
    --accent-2: #ff2e8f;          /* Pink   */
    --gradient: linear-gradient(120deg, var(--accent-1), var(--accent-2));

    /* Türkis für FLIESSTEXT auf hellem Grund. Das Marken-Türkis kommt auf Weiß
       nur auf 1,7:1 und ist damit praktisch unlesbar (Barrierefreiheit verlangt
       4,5:1) — diese dunklere Variante schafft 5,2:1. Im dunklen Design wird
       unten wieder auf das Original umgestellt, das dort 9,9:1 erreicht.
       Für Flächen und Rahmen weiterhin --accent-1 nehmen, nicht diese Farbe. */
    --accent-ink: #0b7a70;

    --bg:        #f2f5f9;
    --bg-soft:   #ffffff;
    --card:      #ffffff;
    --text:      #16202b;
    --text-soft: #5b6b7c;
    --border:    #dde4ec;
    --shadow:    0 12px 40px rgba(22, 32, 43, .12);
    /* Kopf-/Fußzeile: im hellen Design ein zarter Türkis-Pink-Hauch statt reinem Weiß */
    --bar-bg:    linear-gradient(120deg, #e4faf8, #ffecf5);
}

[data-theme="dark"] {
    --bg:        #0e1116;
    --bg-soft:   #141922;
    --card:      #1a2029;
    --text:      #e8ecf1;
    --text-soft: #94a3b5;
    --border:    #2a3140;
    --shadow:    0 12px 40px rgba(0, 0, 0, .5);
    --bar-bg:    var(--bg-soft);
    /* Auf dunklem Grund darf das volle Marken-Türkis ran (9,9:1) */
    --accent-ink: var(--accent-1);
}

* { box-sizing: border-box; }

/* Nur für Suchmaschinen/Screenreader sichtbar (z. B. H1 der Feed-Seiten) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

html, body { height: 100%; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;           /* gescrollt wird nur im Feed */
}

a { color: var(--accent-1); }

/* ---------- Kopfbereich ---------- */

.site-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1.2rem;
    background: var(--bar-bg);
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}

/* Umschalter + Login rücken am PC nach rechts (alles nach dem Slogan) */
#theme-toggle { margin-left: auto; }

.logo { display: flex; align-items: center; text-decoration: none; }
/* Höhe bewusst zurückgenommen (früher 96px): das Logo bestimmt die Höhe der
   ganzen Kopfzeile, und die geht dem Feed verloren. 64px sparen 32px Bildschirm,
   ohne dass das Logo seine Wirkung verliert. */
.logo img { height: 64px; max-width: 380px; object-fit: contain; }
.logo-text {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.02em;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Slogan neben dem Logo — leicht schräg nach oben gekippt */
.slogan {
    display: inline-block;
    font-size: 1.05rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: .01em;
    white-space: nowrap;
    transform: rotate(-4deg) translateY(-5px);
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.header-nav { display: flex; align-items: center; gap: .6rem; }
/* Hamburger nur auf dem Handy; am PC ist .header-menu transparent (Inhalte fließen in die Kopfzeile) */
.nav-toggle { display: none; }
.header-menu { display: contents; }
.btn-icon { display: none; } /* Symbole nur auf dem Handy */
/* Login-Symbol auf dem bunten Button in Weiß, damit es sich klar abhebt */
.btn-primary .btn-icon {
    filter: brightness(0) invert(1);
    text-shadow: none;
}
.username { color: var(--text-soft); font-size: .9rem; }

/* ---------- Buttons ---------- */

.btn {
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: 999px;
    border: 0;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
    background: var(--gradient);
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 46, 143, .35);
}
.btn-outline {
    background: transparent;
    color: var(--text);
    border: 1.5px solid var(--border);
}
.btn-ghost { background: transparent; color: var(--accent-2); }
.btn-danger { background: #e23c5f; color: #fff; }

.icon-btn {
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--text);
    padding: .35rem .5rem;
    border-radius: 10px;
}
.icon-btn:hover { background: var(--border); }

[data-theme="light"] .theme-icon-dark { display: none; }
[data-theme="dark"]  .theme-icon-light { display: none; }

/* ---------- Kategorie-Menü ---------- */

.category-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.2rem;
    background: var(--bar-bg);
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
    /* WICHTIG: kein overflow-x mehr — das würde die aufgeklappten Menüs
       abschneiden. Die Leiste kann nicht mehr überlaufen, weil die Kategorien
       jetzt in Menüs stecken statt als lange Chip-Reihe nebeneinander. */
    position: relative;
    z-index: 20;
}

.chip {
    flex: 0 0 auto;
    padding: .4rem 1rem;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    color: var(--text-soft);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    transition: color .15s, border-color .15s;
}
.chip:hover { border-color: var(--accent-1); color: var(--text); }
.chip.active {
    background: var(--gradient);
    border-color: transparent;
    color: #fff;
}

/* ---------- Aufklapp-Menüs in der Kategorie-Leiste ----------
   Am PC klassische Dropdowns. Direkt daneben steht der Knopf „Was denkt die
   Mehrheit" (.cat-game) im GLEICHEN Aussehen — er teilt sich die Regel unten.
   Rechts bleibt Platz frei. */

.cat-menu { position: relative; flex: 0 0 auto; }

.cat-menu-btn,
.cat-game {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-soft);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.cat-menu-btn:hover,
.cat-game:hover { border-color: var(--accent-1); color: var(--text); }
.cat-menu.is-open > .cat-menu-btn,
.cat-menu.has-active > .cat-menu-btn,
.cat-game.active {
    border-color: var(--accent-1);
    color: var(--text);
}
.caret { font-size: .7rem; line-height: 1; transition: transform .15s; }
.cat-menu.is-open .caret { transform: rotate(180deg); }

/* Farbpunkt kennzeichnet die Sonderformat-Gruppe — gleiche Form wie alles
   andere, nur ein kleines Signal, dass hier etwas anderes anfängt. */
.cat-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--gradient);
    flex: 0 0 auto;
}

.cat-menu-panel {
    display: none;
    position: absolute;
    top: calc(100% + .45rem);
    left: 0;
    min-width: 250px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: .5rem;
    z-index: 60;
}
.cat-menu.is-open .cat-menu-panel { display: block; }
.cat-menu-panel.wide { min-width: 440px; }

.cat-list { display: grid; grid-template-columns: 1fr; gap: .1rem; }
.cat-menu-panel.wide .cat-list { grid-template-columns: 1fr 1fr; }

.cat-item {
    display: block;
    padding: .45rem .6rem;
    border-radius: 9px;
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
}
.cat-item:hover { background: var(--border); }
.cat-item.active { background: var(--gradient); color: #fff; }
.cat-item small {
    display: block;
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-soft);
    margin-top: .1rem;
}
.cat-item.active small { color: #fff; }

/* „Alle N anzeigen" gibt es nur auf dem Handy */
.cat-more { display: none; }

/* ---------- Feed (TikTok-Style: eine Umfrage pro Bildschirm) ---------- */

.feed {
    flex: 1 1 auto;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.feed-item {
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    position: relative;
}

.scroll-hint {
    position: absolute;
    bottom: .3rem;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--accent-2);
    text-shadow: 0 0 12px color-mix(in srgb, var(--accent-2) 45%, transparent);
    pointer-events: none;
}
@keyframes hint-bounce {
    0%, 100% { transform: translateY(0); opacity: .65; }
    50%      { transform: translateY(8px); opacity: 1; }
}
/* Die Pfeil-Animation läuft nur bei der aktuell sichtbaren Umfrage
   (Klasse wird in app.js gesetzt). Das spart Rechenleistung, wenn viele
   Umfragen im Feed sind – vorher zappelten alle gleichzeitig. */
.feed-item.in-view .scroll-hint { animation: hint-bounce 1.6s infinite; }
.feed-item:last-child .scroll-hint { display: none; }

/* ---------- Umfrage-Karte ---------- */

.poll-card {
    width: min(560px, 100%);
    background: var(--card);
    border-radius: 22px;
    padding: 1.8rem;
    box-shadow: var(--shadow);
    position: relative;
    border: 1px solid var(--border);
}
/* Farbverlaufs-Rand, damit die Karte heraussticht */
.poll-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    background: var(--gradient);
    z-index: -1;
    opacity: .9;
}

.poll-card.empty { text-align: center; color: var(--text-soft); }

.poll-category {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent-2);
    background: color-mix(in srgb, var(--accent-2) 12%, transparent);
    padding: .25rem .7rem;
    border-radius: 999px;
    margin-bottom: .8rem;
}

.poll-question {
    margin: 0 0 1.4rem;
    font-size: 1.5rem;
    line-height: 1.3;
}

/* Im Feed führt die Frage auf die Einzelseite. Sie soll dabei aussehen wie
   vorher — kein Blau, keine Unterstreichung — damit die Karte ruhig bleibt.
   Erst beim Drüberfahren (bzw. beim Tabben) wird der Link sichtbar. */
.poll-permalink {
    color: inherit;
    text-decoration: none;
}
.poll-permalink:hover,
.poll-permalink:focus-visible { text-decoration: underline; }

/* Antwortmöglichkeiten */
.poll-options,
.mt-options { display: grid; gap: .7rem; }

.poll-option,
.mt-option {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    width: 100%;
    padding: .9rem 1.1rem;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    background: var(--bg-soft);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, transform .12s;
}
.poll-option:not(:disabled):hover,
.mt-option:not(:disabled):hover {
    border-color: var(--accent-1);
    transform: translateX(3px);
}
.poll-option:disabled,
.mt-option:disabled { cursor: default; }

.option-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: color-mix(in srgb, var(--accent-1) 22%, transparent);
    transition: width .8s cubic-bezier(.2, .8, .2, 1);
    border-radius: 12px;
}
.poll-option.chosen { border-color: var(--accent-2); }
.poll-option.chosen .option-bar {
    background: color-mix(in srgb, var(--accent-2) 26%, transparent);
}

.option-label, .option-pct, .mt-meta { position: relative; z-index: 1; }
.option-pct { font-variant-numeric: tabular-nums; color: var(--text-soft); }
.poll-option.chosen .option-pct { color: var(--accent-2); }

.poll-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.3rem;
    color: var(--text-soft);
    font-size: .9rem;
}

/* Stimmen-Zähler bewusst zurückhaltend (früher größer und in Türkis): die Frage
   soll den Blick bekommen, nicht die anfangs kleine Teilnehmerzahl. */
.vote-count {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-soft);
}

/* Junge Umfrage: statt „1 Stimme" steht dort „Neu" — aber nur, solange man
   nicht selbst abgestimmt hat. Danach ist die Zahl die Bezugsgröße der
   Prozentwerte und gehört wieder hin. Beides hängt allein an den Klassen der
   Karte (few-votes / voted), die PHP bzw. app.js ohnehin schon setzen. */
.vote-new { display: none; }
.poll-card.few-votes:not(.voted) .vote-new { display: inline; }
.poll-card.few-votes:not(.voted) .vote-num { display: none; }

.comment-toggle { font-size: 1rem; }

/* „Stimme zurücknehmen"-Link neben dem Stimmen-Zähler */
.unvote-btn {
    background: none;
    border: 0;
    padding: 0;
    margin-left: .5rem;
    font: inherit;
    font-size: .8rem;
    color: var(--text-soft);
    text-decoration: underline;
    cursor: pointer;
}
.unvote-btn:hover { color: var(--accent-2); }

/* ---------- Belohnung direkt nach der eigenen Stimme ----------
   Zwei kleine Spielereien: die gewählte Antwort ploppt einmal kurz auf, und
   ein paar Konfetti-Schnipsel fliegen los. Beides läuft NUR im Moment des
   Abstimmens (ausgelöst in app.js), nicht dauerhaft – anders als früher beim
   Scroll-Pfeil kostet das also keine Leistung beim Scrollen.
   Wer am Gerät „Bewegung reduzieren" eingeschaltet hat, bekommt nichts davon;
   diese Abfrage steht in app.js. */

.confetti-bit {
    position: fixed;        /* fest am Fenster – so kann kein Schnipsel den Feed
                               verbreitern oder einen Rollbalken auslösen */
    width: 9px;
    height: 9px;
    border-radius: 2px;
    z-index: 40;            /* über den Karten, unter Kopfzeile (50) und Overlays */
    pointer-events: none;
}

@keyframes option-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.035);
           box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 22%, transparent); }
    100% { transform: scale(1); }
}
.poll-option.pop { animation: option-pop .38s cubic-bezier(.2, .8, .2, 1); }

/* ---------- Kommentare (Bottom-Sheet) ---------- */

.comments-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 50;
}
.comments-overlay[hidden] { display: none; }

.comments-panel {
    background: var(--card);
    width: min(560px, 100%);
    max-height: 70dvh;
    border-radius: 22px 22px 0 0;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.2rem;
    animation: sheet-up .25s ease-out;
}
@keyframes sheet-up {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.comments-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border);
}

.comments-list {
    list-style: none;
    margin: 0;
    padding: .6rem 0;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 80px;
}
.comments-list li { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.comments-list .c-author { font-weight: 700; color: var(--accent-1); margin-right: .4rem; }
.comments-list .c-time { color: var(--text-soft); font-size: .78rem; margin-left: .4rem; }
.comments-list .c-empty { color: var(--text-soft); text-align: center; padding: 1rem 0; }

.comment-form { display: flex; gap: .6rem; padding-top: .8rem; }
.comment-form input {
    flex: 1;
    padding: .7rem 1rem;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--bg-soft);
    color: var(--text);
    font: inherit;
}
.comment-form input:focus { outline: 2px solid var(--accent-1); border-color: transparent; }
.comment-login-hint { text-align: center; color: var(--text-soft); padding: .8rem 0 .4rem; }

/* ---------- Fußbereich ---------- */

.site-footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .6rem .55rem;
    font-size: .82rem;
    background: var(--bar-bg);
    border-top: 1px solid var(--border);
    color: var(--text-soft);
}
.site-footer a { color: var(--text-soft); text-decoration: none; }
.site-footer a:hover { color: var(--accent-1); }
.footer-legal { display: flex; gap: .8rem; align-items: center; }
/* Wechsel zur anderen Sprachversion — etwas präsenter, öffnet einen neuen Tab */
.site-footer .footer-switch { color: var(--accent-1); font-weight: 700; font-size: .9rem; }
.site-footer .footer-switch:hover { text-decoration: underline; }
/* Kurzfassungen: am PC bleibt der lange Text stehen, am Handy die Kurzform
   (siehe Media Query weiter unten). Der Trenner gehört ebenfalls nur ans Handy,
   weil der Sprachwechsel dort in dieselbe Zeile wie die übrigen Links rutscht. */
.switch-short, .footer-dot { display: none; }
/* Im HTML steht der Sprachwechsel HINTER den übrigen Links — so wird am Handy
   in derselben Reihenfolge vorgelesen, in der die Zeile auch dasteht. Am PC
   gehört er in die erste Zeile, das erledigt diese eine Regel. */
.footer-switch { order: -1; }
/* Urheberrechts-Hinweis — nachrangig allein über die Schriftgröße, KEINE Deckkraft
   (opacity würde den Kontrast im Light Mode unter den Barrierefreiheits-Wert drücken) */
.footer-copy { font-size: .75rem; text-align: center; }

/* ---------- Willkommens-Overlay (Erstbesuch) ---------- */

.welcome-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 110; /* über dem Cookie-Hinweis (100), sonst verdeckt der mobil den Knopf */
}
.welcome-overlay[hidden] { display: none; }

.welcome-panel {
    position: relative;
    width: min(480px, 100%);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    border-radius: 22px;
    padding: 1.4rem 1.5rem 1.3rem;
    border: 2px solid transparent;
    background: linear-gradient(var(--card), var(--card)) padding-box,
                var(--gradient) border-box;
    animation: sheet-up .25s ease-out;
}
.welcome-panel h2 { margin: 0 1.6rem .5rem 0; font-size: 1.35rem; }
.welcome-close { position: absolute; top: .6rem; right: .6rem; }
.welcome-intro { margin: 0 0 1.1rem; color: var(--text-soft); }
/* „anonym und ohne Anmeldung" ist die Aussage, die Erstbesuchern die Hürde
   nimmt — sie hebt sich farbig aus dem sonst gedämpften Absatz heraus. */
.welcome-intro strong { color: var(--accent-ink); }

.welcome-list {
    list-style: none;
    margin: 0 0 1.2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.welcome-list li { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.45; }
.welcome-list .w-icon { font-size: 1.25rem; flex: 0 0 auto; }

.welcome-start { display: block; width: 100%; font-size: 1.05rem; padding: .8rem 1rem; }
.welcome-hint { margin: .8rem 0 0; text-align: center; font-size: .8rem; color: var(--text-soft); }

/* ---------- Cookie-Hinweis ---------- */

.cookie-banner {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    width: min(560px, calc(100% - 2rem));
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 1rem 1.2rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    z-index: 100;
    font-size: .88rem;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; flex: 1; }

/* ---------- Formular-Seiten (Login, Registrierung) ---------- */

.page-wrap {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    padding: 2rem 1.2rem;
}

.form-card, .text-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow);
    padding: 2rem;
    height: fit-content;
    overflow-wrap: break-word;
}
.form-card { width: min(420px, 100%); }
.text-card { width: min(760px, 100%); line-height: 1.6; }

.form-card h1, .text-card h1 { margin-top: 0; }

.form-card label { display: block; margin: 1rem 0 .3rem; font-size: .9rem; font-weight: 600; }
.form-card input, .form-card select, .form-card textarea {
    width: 100%;
    padding: .7rem .9rem;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--bg-soft);
    color: var(--text);
    font: inherit;
}
.form-card input:focus { outline: 2px solid var(--accent-1); border-color: transparent; }
.form-card .btn { width: 100%; margin-top: 1.4rem; padding: .8rem; }
.form-card .form-alt { margin-top: 1rem; text-align: center; font-size: .9rem; color: var(--text-soft); }

.flash-error {
    background: color-mix(in srgb, #e23c5f 14%, transparent);
    color: #e23c5f;
    border-radius: 12px;
    padding: .7rem 1rem;
    margin-top: 1rem;
    font-size: .9rem;
}
.flash-ok {
    background: color-mix(in srgb, var(--accent-1) 14%, transparent);
    color: var(--accent-1);
    border-radius: 12px;
    padding: .7rem 1rem;
    margin-top: 1rem;
    font-size: .9rem;
}

/* ---------- Übersichtsseite (alle Umfragen) ---------- */

.overview-intro { color: var(--text-soft); margin-top: -.4rem; }

.overview-search input {
    width: 100%;
    padding: .7rem .9rem;
    margin: 1.2rem 0 .4rem;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--bg-soft);
    color: var(--text);
    font: inherit;
}
.overview-search input:focus {
    outline: none;
    border-color: var(--accent-1);
}
/* Platz bleibt reserviert, damit die Liste beim Tippen nicht springt */
.overview-status { min-height: 1.3em; margin: 0 0 1.4rem; font-size: .85rem; color: var(--text-soft); }

.overview-group-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    color: var(--accent-2);
    margin: 1.8rem 0 .2rem;
}
.overview-count {
    font-size: .8rem;
    font-weight: 400;
    color: var(--text-soft);
}

.overview-list { list-style: none; margin: 0; padding: 0; }
.overview-list li { border-top: 1px solid var(--border); }
.overview-list a {
    display: block;
    padding: .5rem .2rem;
    color: var(--text);
    text-decoration: none;
}
.overview-list a:hover { color: var(--accent-1); }

/* ---------- Zugang zur Neuigkeiten-Seite ----------
   Zwei Erscheinungsformen, je nachdem was gerade zu sehen ist:
   PC    → Chip ganz links in der Kategorie-Leiste, vor „Alle".
   Handy → Glocke in der Kopfzeile neben dem ☰ (dort ist die Kategorie-Leiste
           eingeklappt, ein Chip darin würde also niemandem auffallen).
   Auf Seiten OHNE Kategorie-Leiste (Umfrage, Login, Impressum …) steht die
   Glocke auch am PC — deshalb hängt ihre Sichtbarkeit an body.has-catbar. */

.cat-news {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    padding: .4rem .9rem;
    border-radius: 999px;
    border: 1.5px solid var(--accent-1);
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 700;
    position: relative;
    transition: background .15s;
}
.cat-news:hover { background: color-mix(in srgb, var(--accent-1) 12%, transparent); }
.cat-news.active { background: var(--gradient); border-color: transparent; color: #fff; }
/* Schmaler Trenner, damit der Chip nicht als weitere Kategorie gelesen wird */
.cat-sep {
    flex: 0 0 auto;
    width: 1px;
    align-self: stretch;
    margin: 0 .15rem;
    background: var(--border);
}

.news-bell {
    display: none;
    position: relative;
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text);
    text-decoration: none;
    padding: .3rem .45rem;
    border-radius: 10px;
}
.news-bell:hover { background: var(--border); }
/* Am PC nur dort, wo keine Kategorie-Leiste den Chip zeigt */
body:not(.has-catbar) .news-bell { display: inline-flex; }

/* Der pinke Punkt für ungelesene Meldungen — hängt an beiden Varianten */
.news-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent-2);
    border: 2px solid var(--bg-soft);
}
.news-dot[hidden] { display: none; }

/* ---------- Neuigkeiten-Seite ---------- */

.news-page { width: min(720px, 100%); display: grid; gap: 1rem; align-content: start; }

.news-head { text-align: center; }
.news-head h1 { margin: 0 0 .4rem; font-size: 1.7rem; letter-spacing: -.01em; }
.news-head p  { margin: 0; color: var(--text-soft); line-height: 1.55; }

.news-filters { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.news-filter {
    padding: .45rem .9rem;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--bg-soft);
    color: var(--text-soft);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.news-filter:hover { border-color: var(--accent-1); color: var(--text); }
.news-filter[aria-pressed="true"] {
    background: var(--gradient);
    border-color: transparent;
    color: #fff;
}

/* Trennzeile über den Meldungen, die seit dem letzten Besuch dazugekommen sind */
.news-since {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: .2rem 0 -.3rem;
    color: var(--accent-2);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.news-since::before, .news-since::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: color-mix(in srgb, var(--accent-2) 35%, transparent);
}
.news-since[hidden] { display: none; }

.news-list { display: grid; gap: 1rem; }

.news-entry {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 1.15rem 1.3rem;
    display: grid;
    gap: .55rem;
}
.news-entry[hidden] { display: none; }
.news-entry.is-new { border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border)); }

.news-entry-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.news-entry h2 { margin: 0; font-size: 1.12rem; line-height: 1.35; overflow-wrap: break-word; }
.news-text { color: var(--text-soft); line-height: 1.6; font-size: .95rem; }
.news-text p { margin: 0 0 .6rem; }
.news-text p:last-child { margin-bottom: 0; }
.news-text strong { color: var(--text); }

.news-chip {
    display: inline-flex;
    align-items: center;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}
.news-chip[hidden] { display: none; }
/* Eine Farbregel je Art aus news_kinds() — neue Art = neue Zeile hier */
.news-kind-feature     { background: color-mix(in srgb, var(--accent-1) 16%, transparent); color: var(--accent-ink); }
.news-kind-kategorie   { background: color-mix(in srgb, var(--accent-2) 14%, transparent); color: var(--accent-ink-2); }
.news-kind-meilenstein { background: color-mix(in srgb, #f5a524 22%, transparent); color: #8a5a00; }
[data-theme="dark"] .news-kind-meilenstein { color: #ffc75a; }
.news-chip-new { background: var(--accent-2); color: #fff; }

.news-date { margin-left: auto; color: var(--text-soft); font-size: .82rem; white-space: nowrap; }

.news-entry-link {
    justify-self: start;
    margin-top: .15rem;
    color: var(--accent-ink);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
}
.news-entry-link:hover { text-decoration: underline; }

.news-empty, .news-foot {
    text-align: center;
    color: var(--text-soft);
    font-size: .88rem;
    line-height: 1.6;
    padding: .4rem 0;
}

/* ---------- „Was denkt die Mehrheit" (Tipp-Spiel) ----------
   Zur Farbgebung: Hier — und NUR hier — bekommt die Mehrheit eine eigene
   Farbe. Für normale Umfragen gilt weiterhin die Projektregel, dass Mehrheit
   und Minderheit gleich aussehen (eine Angabe, keine Note). Im Spiel gibt es
   dagegen wirklich ein Richtig und Falsch: Man hat den Ausgang getroffen oder
   eben nicht. Entscheidung vom 19.8.2026. */

/* Der Knopf in der Kategorie-Leiste. Er sieht bewusst aus wie „Kategorien" und
   „Erzähl mal" — das Aussehen kommt von der gemeinsamen Regel weiter oben, hier
   stehen nur die Unterschiede eines Links.
   VORGESCHICHTE: Anfangs war das eine gefüllte Verlaufs-Pille ganz rechts. Sie
   endete bündig unter dem „User Login" im Kopfbereich, sah aus wie dessen
   Zwilling und riss eine große Lücke in die Leiste. Seit dem 19.8.2026 steht er
   direkt neben „Erzähl mal" und ist ein Eintrag wie die anderen. */
.cat-game {
    flex: 0 0 auto;
    text-decoration: none;
    white-space: nowrap;
}

/* Phasen-Überschrift über den Antworten. Sie sagt in jedem Schritt, worum es
   gerade geht — ohne sie klickt man beim zweiten Mal versehentlich wieder
   „seinen Tipp" statt seiner Stimme. */
.mt-phase {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-align: center;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.3;
    padding: .6rem .8rem;
    margin-bottom: .9rem;
    border-radius: 12px;
    transition: color .2s, background .2s;
}
.mt-phase[hidden] { display: none; }
.mt-ic { font-size: 1.2rem; }
.mt-phase.is-predict {
    color: var(--accent-2);
    background: color-mix(in srgb, var(--accent-2) 12%, transparent);
}
.mt-phase.is-vote {
    color: var(--accent-ink);
    background: color-mix(in srgb, var(--accent-1) 14%, transparent);
}

/* Der Vorhang liegt ÜBER den Antworten, statt sie zu ersetzen: So springt die
   Karte beim Start nicht in der Höhe, und man sieht schon, wie viele Antworten
   kommen — nur eben unscharf. */
.mt-wrap { position: relative; }

.mt-options { transition: filter .35s, opacity .35s; }
.mt-card:not(.mt-started) .mt-options {
    filter: blur(3px);
    opacity: .45;
    pointer-events: none;
}

.mt-intro {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-align: center;
    padding: 1rem;
    cursor: pointer;
    background: color-mix(in srgb, var(--card) 74%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: opacity .3s;
}
.mt-card.mt-started .mt-intro { opacity: 0; pointer-events: none; }

.mt-intro-big {
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1.15;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.mt-intro-sub {
    font-size: .9rem;
    color: var(--text-soft);
    max-width: 24rem;
}

.mt-go {
    margin-top: .3rem;
    font: inherit;
    font-weight: 800;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .6rem 1.3rem;
    background: var(--gradient);
    cursor: pointer;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent-2) 38%, transparent);
    animation: mt-pulse 1.8s ease-in-out infinite;
}
@keyframes mt-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
/* Wer am Gerät „Bewegung reduzieren" eingestellt hat, bekommt keinen Puls —
   gleiche Rücksicht wie beim Konfetti und beim Scroll-Pfeil. */
@media (prefers-reduced-motion: reduce) {
    .mt-go { animation: none; }
}

/* Markierungen und Prozentwert rechts in der Antwort */
.mt-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}
.mt-pct {
    font-variant-numeric: tabular-nums;
    color: var(--text-soft);
    font-size: .9rem;
}
.mt-tag {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .15rem .45rem;
    border-radius: 999px;
}
/* Dunkle Schrift auf der jeweiligen Vollfarbe — beide Kombinationen liegen
   deutlich über dem Kontrastwert 4,5:1 und funktionieren in hell wie dunkel. */
.mt-tag-vote { color: #05201e; background: var(--accent-1); }
.mt-tag-tip  { color: #2a0716; background: var(--accent-2); }

/* Der getippte Knopf bleibt markiert. Ohne das ändert sich nach dem Tipp nur
   die Überschrift, und im zweiten Schritt weiß man nicht mehr, worauf man
   getippt hat. */
.mt-option.is-tip {
    border-color: var(--accent-2);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 40%, transparent);
}

/* Die Antwort, die die Mehrheit gewählt hat */
.mt-option.is-major { border-color: var(--accent-2); }
.mt-option.is-major .option-bar {
    background: color-mix(in srgb, var(--accent-2) 26%, transparent);
}

/* Auflösung */
.mt-banner {
    margin-top: 1.1rem;
    padding: .9rem 1rem;
    border-radius: 12px;
    font-weight: 700;
    line-height: 1.35;
    animation: mt-pop .35s ease;
}
.mt-banner[hidden] { display: none; }
.mt-banner small {
    display: block;
    font-weight: 500;
    color: var(--text-soft);
    margin-top: .25rem;
}
.mt-banner.is-correct {
    background: color-mix(in srgb, var(--accent-1) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-1) 45%, transparent);
}
.mt-banner.is-wrong {
    background: color-mix(in srgb, var(--accent-2) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-2) 45%, transparent);
}
@keyframes mt-pop {
    from { transform: scale(.97); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ---------- Responsiv ---------- */

@media (max-width: 600px) {
    /* Die Kategorie-Leiste steckt hier im ☰-Menü — der News-Chip wäre dort
       versteckt. Deshalb übernimmt die Glocke in der Kopfzeile. */
    .cat-news, .cat-sep { display: none; }
    .news-bell { display: inline-flex; order: 1; margin-left: auto; margin-right: -.15rem; }
    /* Glocke und ☰ gehören zusammen: den Abstand nach links schiebt die Glocke,
       der Menü-Knopf darf ihn NICHT ein zweites Mal aufmachen (sonst stehen die
       beiden auseinandergezogen im Kopf). Höhere Spezifität als die
       .nav-toggle-Regel weiter unten — Reihenfolge im Stylesheet egal. */
    .news-bell + .nav-toggle { margin-left: 0; }
    .nav-toggle { order: 2; }
    .news-head h1 { font-size: 1.45rem; }
    .news-entry { padding: 1rem 1.1rem; border-radius: 18px; }
    .news-date { margin-left: 0; flex-basis: 100%; }

    /* Fußzeile auf zwei Zeilen eindampfen: alle Links in eine Reihe, darunter
       nur noch der kurze Urheberrechts-Hinweis. Im Vollbild-Feed kostet jede
       Fußzeilen-Zeile sichtbare Höhe, deshalb rückt der Sprachwechsel als
       „EN ↗" mit in die Linkzeile — Farbe und Pfeil bleiben, nur der lange
       Text entfällt. Hier gilt wieder die HTML-Reihenfolge, der Sprachwechsel
       steht also am Ende der Zeile. */
    .site-footer {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: .55rem;
    }
    .footer-legal { gap: .55rem; }
    .footer-dot   { display: inline; }
    .footer-switch { order: 0; }
    /* zwingt den Urheberrechts-Hinweis in eine eigene zweite Zeile */
    .footer-copy  { flex-basis: 100%; }

    .switch-long { display: none; }
    .switch-short { display: inline; }
    .copy-long { display: none; }
    /* Gleiche Schriftgröße wie die Nachbarlinks, damit die Zeile ruhig wirkt —
       Türkis und Fettung bleiben, der Wechsel fällt also weiterhin auf. */
    .site-footer .footer-switch { font-size: inherit; }

    /* Header in zwei Zeilen: Logo groß und mittig, darunter
       Umschalter (links) — Slogan (Mitte) — Login (rechts) */
    .site-header {
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: .5rem .8rem;
        row-gap: .5rem;
        gap: .5rem;
    }
    .logo { justify-content: flex-start; }
    .logo img { height: 46px; max-width: 62vw; }
    .logo-text { font-size: 1.4rem; }
    .slogan { display: none; }                 /* dekorativ — auf dem Handy weglassen */

    /* Menü-Knopf sichtbar, rückt nach rechts */
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-left: auto;
    }

    /* Kopf bleibt über dem Menü-Overlay */
    .site-header { position: relative; z-index: 50; }

    /* Theme + Login als Overlay-Panel unter dem Kopf — schiebt den Feed NICHT */
    .header-menu { display: none; }
    body.nav-open .header-menu {
        display: flex;
        position: fixed;
        top: var(--nav-top, 60px);
        left: 0; right: 0;
        z-index: 45;
        align-items: center;
        gap: .6rem;
        padding: .6rem .9rem;
        background: var(--bar-bg);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
    }
    #theme-toggle { margin-left: 0; }

    /* Kategorien als Overlay direkt unter dem Menü-Panel */
    body:not(.admin-body) .category-bar { display: none; }
    body:not(.admin-body).nav-open .category-bar {
        display: block;                 /* Bereiche untereinander statt Raster */
        position: fixed;
        top: var(--cat-top, 112px);
        left: 0; right: 0;
        z-index: 45;
        padding: .7rem .9rem 1rem;
        max-height: calc(100dvh - var(--cat-top, 112px) - .5rem);
        overflow-y: auto;
        background: var(--bar-bg);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
    }
    body:not(.admin-body).nav-open .category-bar > .chip {
        display: inline-block;
        margin-bottom: .85rem;
    }

    /* Aus jedem Dropdown wird ein Bereich: Überschrift, EINE Zeile Chips,
       darunter „Alle N anzeigen". So bleibt das Menü auch dann kurz, wenn
       irgendwann zwanzig Kategorien da sind. */
    .cat-menu { margin-bottom: .85rem; }
    .cat-menu:last-child { margin-bottom: 0; }

    /* Der Spiel-Knopf bekommt hier eine eigene, volle Zeile: Auf dem Handy
       steckt die Leiste im ☰-Menü und ist untereinander aufgebaut, ein
       rechtsbündiger Knopf wie am PC ginge dort unter. */
    .cat-game {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 1rem 0 0;
        padding: .6rem 1rem;
    }

    .cat-menu-btn,
    .cat-menu.is-open > .cat-menu-btn,
    .cat-menu.has-active > .cat-menu-btn {
        display: flex;
        width: 100%;
        padding: 0 .3rem .45rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--text-soft);
        font-size: .74rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    /* ACHTUNG: die .wide-Variante MUSS mitgenannt werden. Ihre PC-Regel
       (min-width: 440px) ist spezifischer als „.cat-menu-panel" allein — ohne
       diese Zeile bleibt die Liste auf dem Handy 440 px breit und ragt rechts
       aus dem Bild heraus. */
    .cat-menu-panel,
    .cat-menu-panel.wide,
    .cat-menu.is-open .cat-menu-panel {
        display: block;
        position: static;
        min-width: 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* Zwei gleich breite Spalten wie früher — das wirkt deutlich ruhiger als
       eine fließende Reihe und kann grundsätzlich nicht seitlich überlaufen. */
    .cat-list,
    .cat-menu-panel.wide .cat-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem;
        /* genau EINE Zeile; die echte Zeilenhöhe misst das JS und setzt sie
           als --cat-row, der Wert hier ist nur der Rückfall */
        max-height: var(--cat-row, 2.4rem);
        overflow: hidden;
    }
    .cat-menu.is-open .cat-list { max-height: none; }

    /* Die Einträge sehen auf dem Handy aus wie die gewohnten Chips:
       gleich breit, zentriert, zu lange Namen werden abgekürzt */
    .cat-item {
        border: 1.5px solid var(--border);
        border-radius: 999px;
        padding: .5rem .5rem;
        font-size: .87rem;
        color: var(--text-soft);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cat-item:hover { background: transparent; }
    .cat-item.active { border-color: transparent; color: #fff; }
    /* Erklärzeile würde die Chips sprengen — die gibt es nur am PC */
    .cat-item small { display: none; }

    /* Bewusst in der normalen Textfarbe mit Unterstrich statt in Pink:
       Pink auf dem hellen Leisten-Hintergrund käme nur auf 3:1 und läge damit
       unter dem Barrierefreiheits-Wert von 4,5:1. Siehe auch .footer-copy. */
    .cat-more {
        display: inline-block;
        margin: .5rem 0 0 .3rem;
        padding: .15rem .1rem;
        background: transparent;
        border: 0;
        font: inherit;
        font-size: .82rem;
        font-weight: 700;
        color: var(--text);
        text-decoration: underline;
        cursor: pointer;
    }
    .cat-more[hidden] { display: none; }

    /* Hintergrund (Feed + Fußzeile) verschwommen + abgedunkelt, solange das Menü offen ist */
    .feed { transition: filter .2s; }
    body.nav-open .feed { filter: blur(4px) brightness(.6); pointer-events: none; }
    body.nav-open .site-footer { filter: blur(3px) brightness(.6); }

    /* Buttons in der Kopfzeile: nur Symbole statt Schrift */
    .header-nav .btn-label { display: none; }
    .btn-icon { display: inline; }
    .header-nav .btn {
        padding: .45rem .7rem;
        font-size: 1.1rem;
        line-height: 1;
    }
    .username { display: none; }
    .poll-question { font-size: 1.2rem; margin-bottom: 1rem; }
    .poll-card { padding: 1.2rem; }
    .feed-item { padding: .8rem; }
    .poll-options { gap: .5rem; }
    .poll-option { padding: .7rem .95rem; }
}