/*! ChallengeFlow – Stylesheet der Web-App (diese Datei ist die Quelle; es gibt keinen Build-Schritt).
    Aufbau: Gestaltungsgrundlagen (Variablen), Schriften, Grundlagen, Bedienelemente, Rahmen der App,
    danach je Bereich ein Abschnitt. Jeder Abschnitt beginnt mit einer Trennzeile aus „=“ und
    seinem Namen (tokens, fonts, base, layout, controls, … world) – danach lässt sich suchen.
    Schriftstärken: Archivo gibt es in 400–900 (Hunderterschritte), Roboto Mono in 400 und 500;
    andere Werte würde der Browser ohnehin auf die nächste vorhandene Datei runden. */

/* ======================================================================== tokens */
/* ==========================================================================
   Gestaltungsgrundlagen – alle Farben, Radien, Schatten und Schriften.
   Komponenten verwenden ausschließlich diese Variablen; eine Farbänderung
   geschieht nur hier.
   ========================================================================== */

:root {
    color-scheme: dark;

    /* Schriften */
    --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-data: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Flächen – von hinten nach vorn */
    --page-a: #07080b;
    --page-b: #0a0c10;
    --card: #111319;
    --soft: #171a22;
    --soft-2: #1e222c;
    --input: #0d0f14;
    --media-bg: #0d0f13;
    --media-loading: #252a35;         /* Lichtstreifen der Ladefläche für Bilder */
    --surface: linear-gradient(180deg, rgba(255, 255, 255, .028) 0%, rgba(255, 255, 255, 0) 42%), var(--card);

    /* Vollbild-Editoren (Beitrag, Bild) */
    --editor-surface: #14161d;
    --editor-head: #181a22;
    --editor-row: #161820;
    --editor-line: #2a2d37;
    --editor-stage: #0b0c10;

    /* Text */
    --text: #f5f7fb;
    --text-soft: #dfe3ec;
    --copy: #cdd2dc;
    --muted: #959cab;
    --nav-muted: #8e95a3;

    /* Linien */
    --line: #1c1f28;
    --line-strong: #292d38;
    --hairline: rgba(255, 255, 255, .07);
    --hairline-strong: rgba(255, 255, 255, .12);
    --line-cool: #34434b;
    --track: rgba(255, 255, 255, .09);

    /* Signalfarbe Lime */
    --accent: #a3e635;
    --accent-2: #b8f25a;
    --accent-light: #bef264;
    --accent-hot: #d9f99d;
    --accent-ink: #0f1a00;
    --accent-soft: rgba(163, 230, 53, .12);
    --accent-glow: rgba(163, 230, 53, .34);
    --accent-gradient: linear-gradient(135deg, #d9fb8f 0%, #a3e635 48%, #84cc16 100%);
    --accent-shadow: 0 10px 28px -10px rgba(163, 230, 53, .65), 0 2px 6px -2px rgba(163, 230, 53, .35);

    /* Bedeutungsfarben */
    --danger: #ff5f6d;
    --danger-soft: #2d0f16;
    --alert: #e7333f;
    --vote-up: #55d27d;
    --like: #fb7185;

    /* Ergebnis beendeter Challenges (Abschluss-Statement): geschafft · teilweise · nicht geschafft */
    --outcome-achieved: #a3e635;
    --outcome-partial: #f2c14e;
    --outcome-missed: #f07a7a;

    /* Beendete Challenges: Silbergrau statt Grün */
    --ended: #aeb6c4;
    --ended-soft: rgba(174, 182, 196, .14);

    /* Ersteller einer Challenge: Gold */
    --owner: #f4c04f;
    --owner-soft: rgba(244, 192, 79, .14);

    /* Teilnahmen (Rubrik „Hier mache ich mit“): Blau */
    --joined: #579cdb;

    /* Private Challenges: Messing */
    --private: #c9a35a;
    --private-light: #f4d28d;
    --private-soft: rgba(45, 37, 24, .9);

    /* Höhe der unteren Leiste (nur Handy, angemeldet) – für klebende Leisten darüber */
    --mobile-nav-height: 0px;

    /* Formen */
    --radius-card: 22px;
    --radius-panel: 28px;
    --radius-photo: 16px;
    --radius-control: 14px;
    --radius-button: 12px;

    /* Tiefe */
    --highlight: inset 0 1px 0 rgba(255, 255, 255, .05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 40px -18px rgba(0, 0, 0, .85);
    --shadow-card: var(--highlight), var(--shadow-md);
    --shadow-elevated: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
    --photo-filter: saturate(1.04) contrast(1.02);

    /* Bewegung */
    --ease: cubic-bezier(.22, 1, .36, 1);

    /* Maße */
    --content-width: 1120px;
    --topbar-height: 60px;
    --keyboard-inset: 0px;
}

/* ======================================================================== fonts */
/* Schriften liegen im eigenen Projekt – beim Seitenaufruf gehen keine Daten an fremde Server. */
@font-face { font-family: "Archivo"; font-weight: 400; font-display: swap; src: url("fonts/archivo-400.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 500; font-display: swap; src: url("fonts/archivo-500.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap; src: url("fonts/archivo-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 700; font-display: swap; src: url("fonts/archivo-700.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800; font-display: swap; src: url("fonts/archivo-800.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 900; font-display: swap; src: url("fonts/archivo-900.woff2") format("woff2"); }
@font-face { font-family: "Roboto Mono"; font-weight: 400; font-display: swap; src: url("fonts/roboto-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto Mono"; font-weight: 500; font-display: swap; src: url("fonts/roboto-mono-500.woff2") format("woff2"); }

/* ======================================================================== base */
/* ==========================================================================
   Grundlage: Rücksetzen, Seitenhintergrund, Schrift, Fokus.
   ========================================================================== */

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

html {
    min-height: 100%;
    background-color: var(--page-a);
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--topbar-height) + 18px);
    /* Platz für die Scrollleiste bleibt reserviert – der Kopf springt beim Seitenwechsel nicht. */
    scrollbar-gutter: stable;
    scrollbar-color: #2b303b transparent;
    scrollbar-width: thin;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    font-feature-settings: "ss01" on, "cv11" on;
}

body {
    position: relative;
    isolation: isolate;
    min-height: 100dvh;
    margin: 0;
    font-family: var(--font);
    letter-spacing: .002em;
    color: var(--text);
    background: var(--page-a);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Ein ruhiger Hintergrund für jede Seite: Lime- und Violett-Schimmer plus feines Korn. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--page-a);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(60% 45% at 8% -4%, rgba(163, 230, 53, .13), rgba(163, 230, 53, 0) 70%),
        radial-gradient(50% 40% at 100% 0%, rgba(124, 108, 255, .12), rgba(124, 108, 255, 0) 70%),
        radial-gradient(70% 50% at 50% 110%, rgba(56, 189, 248, .06), rgba(56, 189, 248, 0) 70%),
        linear-gradient(180deg, var(--page-a), var(--page-b));
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 160px 160px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

img { max-width: 100%; vertical-align: middle; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Symbole: Linien in Textfarbe, Stärke je nach Einsatz in der Komponente. */
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

button {
    font: inherit;
    color: var(--text);
    cursor: pointer;
    touch-action: manipulation;
    background: none;
    border: 0;
    padding: 0;
}
button:disabled { cursor: not-allowed; opacity: .62; }
input, textarea, select { font: inherit; letter-spacing: inherit; color: inherit; }
a { color: inherit; }

::selection { background: rgba(163, 230, 53, .85); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--accent); }

[hidden] { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.muted { color: var(--muted); font-size: 13px; line-height: 1.5; }
.error { color: var(--danger); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Android und andere mobile Browser legen beim Antippen ein eckiges, blaues
   Feld über Knöpfe und Links, das über runde Ecken hinausragt. Es wird
   abgeschaltet; die Tastaturmarkierung (:focus-visible) bleibt erhalten. */
button, a, summary, label, [role="button"], [role="link"], [data-action] { -webkit-tap-highlight-color: transparent; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible), summary:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible) { outline: none; }

/* ======================================================================== layout */
/* ==========================================================================
   Seitenrahmen: Inhaltsbereich und Karten-Flächen (Panel).
   ========================================================================== */

.app {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 42px 26px 96px;
}

.panel {
    position: relative;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    padding: 22px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.panel h1 { margin: 0; font-size: clamp(32px, 4vw, 48px); font-weight: 900; line-height: 1.02; letter-spacing: -.03em; }
.panel h2 { letter-spacing: -.015em; }

/* Einleitung einer Arbeitsseite (Neue Challenge, Neues Update): großer Titel ohne Kasten */
.view-intro { padding: 6px 4px 16px; }
.view-intro-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.view-intro h1 { min-width: 0; margin: 0; font-size: clamp(32px, 8vw, 42px); font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.view-intro p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.4; color: var(--muted); }

/* Kopf einer Listen-Seite (Meine, Favoriten, Beobachten …) */
.page-head { display: grid; gap: 18px; padding: 24px; }
.page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.page-head h1 { margin: 0 0 4px; font-weight: 800; letter-spacing: -.035em; overflow-wrap: anywhere; hyphens: auto; }
.page-kicker { display: block; margin-bottom: 5px; font-family: var(--font-data); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-light); }
/* Kleine Überschrift in Akzentfarbe über Karten und Abschnitten */
.eyebrow { display: block; margin: 0; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--eyebrow-color, var(--accent)); }
.page-summary { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

.page-loading, .page-error { padding: 24px 22px; }
.page-error .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

@media (max-width: 760px) {
    .app { padding: 18px 12px 36px; }
    .page-head { padding: 20px; }
    body.is-signed-in .app { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}

/* ======================================================================== controls */
/* ==========================================================================
   Bedienelemente: Knöpfe, Eingabefelder, Schalter, Auswahllisten.
   ========================================================================== */

/* ---------------------------------------------------------------- Knöpfe */

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    padding: 0 19px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.005em;
    text-align: center;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.button svg { width: 18px; height: 18px; flex: none; }
.button:active:not(:disabled) { transform: translateY(1px); }

.button.primary {
    color: var(--accent-ink);
    background: var(--accent-gradient);
    box-shadow: var(--accent-shadow), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.button.primary:hover:not(:disabled) { box-shadow: 0 14px 34px -12px rgba(163, 230, 53, .8), 0 2px 6px -2px rgba(163, 230, 53, .4), inset 0 1px 0 rgba(255, 255, 255, .5); }

.button.ghost {
    padding: 0 16px;
    border-color: var(--hairline-strong);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text);
    background: rgba(255, 255, 255, .03);
    box-shadow: var(--highlight);
}
.button.ghost:hover:not(:disabled) { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); }

.button.danger {
    padding: 0 13px;
    border-color: rgba(255, 95, 109, .45);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--danger);
    background: rgba(255, 95, 109, .06);
}
.button.danger:hover:not(:disabled) { background: rgba(255, 95, 109, .12); }

.button.small { min-height: 34px; padding: 0 12px; border-radius: var(--radius-button); font-size: 12px; }

.link-button {
    min-height: 44px;
    padding: 6px 12px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Rundes Symbol-Knöpfchen (Schließen, Zurück im Dialogkopf) */
.icon-circle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border: 1px solid var(--hairline-strong);
    border-radius: 50%;
    color: var(--text-soft);
    background: rgba(255, 255, 255, .04);
}
.icon-circle svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- Formulare */

.form-grid { display: grid; gap: 16px; }
.field-label { display: grid; gap: 7px; font-size: 13px; font-weight: 600; letter-spacing: .025em; color: var(--muted); }

.field {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    padding: 11px 13px;
    font: inherit;
    font-size: 15px;
    letter-spacing: .002em;
    color: var(--text);
    background: var(--input);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
textarea.field { resize: vertical; line-height: 1.45; }
.field:focus {
    border-color: rgba(163, 230, 53, .6);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 4px rgba(163, 230, 53, .12);
    outline: none;
}
.field::placeholder { color: #5f6676; }

.field-help, .password-rules { font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: 0; color: var(--muted); }
.field-help strong { color: var(--text-soft); }
.form-error { margin: 0; font-size: 14px; font-weight: 700; color: var(--danger); }

.password-field { position: relative; display: block; }
.password-field .field { padding-right: 48px; }
.password-toggle {
    position: absolute;
    top: 50%;
    right: 5px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--muted);
    transform: translateY(-50%);
}
.password-toggle svg { width: 20px; height: 20px; }
.password-toggle:hover { color: var(--text); }
.password-toggle .eye-off,
.password-toggle[aria-pressed="true"] .eye-open { display: none; }
.password-toggle[aria-pressed="true"] .eye-off { display: block; }

.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--copy);
    transition: border-color .2s ease, background-color .2s ease;
}
.terms-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.terms-check a { color: var(--accent); }

/* ---------------------------------------------------------------- Ein/Aus-Schalter */

.toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-switch {
    position: relative;
    width: 44px;
    height: 26px;
    flex: none;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--input);
    transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.toggle-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.toggle-input:checked + .toggle-switch { border-color: rgba(163, 230, 53, .6); background: var(--accent-soft); }
.toggle-input:checked + .toggle-switch::after { background: var(--accent); transform: translateX(18px); }
.toggle-input:focus-visible + .toggle-switch { outline: 2px solid var(--accent); outline-offset: 3px; }
.toggle-input:disabled + .toggle-switch { opacity: .5; }

/* Großer Schalter (weißer Knopf, lime im eingeschalteten Zustand) */
.toggle-switch.is-large { width: 48px; height: 28px; border: 0; background: color-mix(in srgb, var(--text) 18%, transparent); }
.toggle-switch.is-large::after { width: 22px; height: 22px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.toggle-input:checked + .toggle-switch.is-large { background: var(--accent); }
.toggle-input:checked + .toggle-switch.is-large::after { background: #fff; transform: translateX(20px); }

/* Kleiner Schalter (Formularzeilen) */
.toggle-switch.is-small { width: 38px; height: 22px; }
.toggle-switch.is-small::after { top: 3px; left: 3px; width: 14px; height: 14px; }
.toggle-input:checked + .toggle-switch.is-small { border-color: var(--accent); }
.toggle-input:checked + .toggle-switch.is-small::after { transform: translateX(16px); }

/* Schalter als Karte mit Symbol und Erklärung */
.toggle-card {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--soft);
    cursor: pointer;
}
.toggle-card:has(.toggle-input:checked) { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.toggle-card-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--ended); background: var(--ended-soft); }
.toggle-card-icon svg { width: 19px; height: 19px; stroke-width: 2; }
.toggle-card-copy { display: grid; gap: 3px; min-width: 0; }
.toggle-card-copy strong { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.toggle-card-copy small { font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--muted); }

/* ---------------------------------------------------------------- Auswahlliste (data-select) */

.select { position: relative; display: block; min-width: 0; }
.select-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    padding: 0 7px 0 14px;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    color: var(--text);
    background: var(--card);
}
.select.is-open .select-trigger { border-color: rgba(163, 230, 53, .6); }
.select-value { display: grid; min-width: 0; }
.select-value > span { grid-area: 1 / 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.select-value > .is-sizer { visibility: hidden; height: 0; }
.select-chevron { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--accent); background: var(--soft); }
.select-chevron svg { width: 16px; height: 16px; stroke-width: 2; transition: transform .2s var(--ease); }
.select.is-open .select-chevron svg { transform: rotate(180deg); }

/* Aufgeklappte Liste – gemeinsam für Auswahllisten und Vorschläge */
.select-menu,
.combobox-menu {
    display: grid;
    gap: 2px;
    overflow-y: auto;
    border: 1px solid var(--hairline-strong);
    border-radius: 16px;
    padding: 6px;
    background: linear-gradient(180deg, #171a21, #111318);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9);
    overscroll-behavior: contain;
}
.select-menu { position: fixed; z-index: 900; max-width: calc(100vw - 16px); }
.select-menu:not(.is-floating) { display: none; }
.select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    border-radius: 11px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    color: var(--copy);
}
.select-option:hover, .select-option:focus-visible { color: var(--text); background: var(--accent-soft); outline: none; }
.select-option.is-selected { color: var(--accent); }
.select-check { width: 18px; height: 18px; visibility: hidden; stroke-width: 2.2; }
.select-option.is-selected .select-check { visibility: visible; }

/* ---------------------------------------------------------------- Spracheingabe (nur Desktop) */

.voice-shell { position: relative; display: block; width: 100%; min-width: 0; }
.voice-shell > .voice-field { width: 100%; padding-right: 70px; }
.voice-shell.is-textarea > .voice-field { height: 100%; }
.voice-controls {
    position: absolute;
    top: 50%;
    right: 7px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transform: translateY(-50%);
}
.voice-shell.is-textarea .voice-controls { top: 8px; transform: none; }
.voice-button {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    color: var(--muted);
    background: color-mix(in srgb, var(--card) 88%, transparent);
    opacity: .78;
}
.voice-button:hover, .voice-button:focus-visible { color: var(--text); background: var(--soft); opacity: 1; outline: 1px solid var(--line-strong); outline-offset: 1px; }
.voice-button svg { width: 14px; height: 14px; }
.voice-button:disabled { cursor: default; opacity: .28; }
.voice-shell.is-listening .is-mic { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--card)); opacity: 1; }
.voice-shell.is-listening .is-mic::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    animation: voice-pulse 1.35s ease-out infinite;
}
@keyframes voice-pulse { from { transform: scale(.82); opacity: .48; } to { transform: scale(1.35); opacity: 0; } }

/* ---------------------------------------------------------------- Aufklappfeld (<details class="disclosure">) */

.disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--soft);
    cursor: pointer;
    list-style: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary svg { width: 18px; height: 18px; stroke-width: 2; transition: transform .16s ease; }
.disclosure[open] > summary svg { transform: rotate(180deg); }
.disclosure-options { display: grid; gap: 6px; margin-top: 8px; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--card); }
.disclosure-options label { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; cursor: pointer; }
.disclosure-options label:has(input:checked) { background: var(--accent-soft); }
.disclosure-options input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------------------------------------------------------------- Eingabe mit Vorschlägen */

.combobox { position: relative; display: flex; align-items: stretch; gap: 0; min-width: 0; }
.combobox > :first-child { flex: 1 1 auto; min-width: 0; }
.combobox:has(.combobox-picker) .field { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.combobox-picker {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    border: 1px solid var(--line-strong);
    border-left: 0;
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    color: var(--text);
    background: var(--input);
}
.combobox-picker svg { width: 18px; height: 18px; stroke-width: 2; }
.combobox-picker[aria-expanded="true"] svg { transform: rotate(180deg); }
.combobox-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; max-height: 264px; }
.combobox-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 11px; font-size: 14px; font-weight: 600; text-align: left; color: var(--copy); }
.combobox-option:hover, .combobox-option[aria-selected="true"] { color: var(--text); background: var(--accent-soft); }
.combobox-option small { font-size: 11px; font-weight: 600; color: var(--muted); }
.combobox-empty { margin: 0; padding: 10px 12px; font-size: 13px; color: var(--muted); }

/* ======================================================================== overlays */
/* ==========================================================================
   Ebenen über der Seite: Dialoge, Rückfragen, Menü, Hinweise, Tooltips.
   Alle Dialoge sind native <dialog>-Elemente (showModal).
   ========================================================================== */

.dialog {
    position: fixed;
    inset: auto;
    top: var(--dialog-top, 0px);
    left: 0;
    width: var(--dialog-width, 100vw);
    height: var(--dialog-height, 100dvh);
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    color: var(--text);
    background: var(--page-a);
}
.dialog::backdrop { background: var(--page-a); }
.dialog:focus { outline: 0; }

/* ---------------------------------------------------------------- Rückfrage */

.confirm-dialog { background: transparent; }
.confirm-dialog::backdrop { background: rgba(6, 8, 12, .68); }
.confirm-screen {
    display: grid;
    place-items: safe center;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    overscroll-behavior: contain;
}
.confirm-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px 16px;
    width: min(430px, 100%);
    border: 1px solid var(--line-strong);
    padding: 20px;
    background: var(--card);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
.confirm-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line-strong));
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.confirm-dialog.is-danger .confirm-mark {
    border-color: color-mix(in srgb, var(--danger) 56%, var(--line-strong));
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.confirm-mark svg { width: 23px; height: 23px; }
.confirm-copy { align-self: center; min-width: 0; }
.confirm-copy h2 { margin: 0 0 7px; font-size: 19px; line-height: 1.15; letter-spacing: -.02em; }
.confirm-copy p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.confirm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / -1; gap: 10px; padding-top: 4px; }
.confirm-actions > .button { min-height: 46px; }

@media (max-width: 520px) {
    .confirm-card { grid-template-columns: 38px minmax(0, 1fr); gap: 12px 13px; padding: 17px; }
    .confirm-mark { width: 38px; height: 38px; }
    .confirm-actions { grid-template-columns: minmax(0, 1fr); }
    .confirm-actions [data-action="dialog.confirm"] { order: -1; }
}

/* ---------------------------------------------------------------- Blatt (kleiner Dialog von unten)

   Auf dem Telefon fährt das Blatt von unten herein, ab 640 px steht es in
   der Mitte. Die Höhe kommt aus --dialog-height (echte Fenstergröße). */

.sheet-dialog { background: transparent; }
.sheet-dialog::backdrop { background: rgba(6, 8, 12, .68); }
.sheet-dialog[open] { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.sheet {
    display: grid;
    flex: 0 1 auto;
    gap: 10px;
    width: min(520px, 100%);
    min-height: 0;
    max-height: calc(var(--dialog-height, 640px) - 24px);
    overflow-y: auto;
    padding: 20px 18px max(18px, env(safe-area-inset-bottom));
    border: 1px solid var(--line);
    border-radius: 22px 22px 0 0;
    color: var(--text);
    background: var(--card);
    overscroll-behavior: contain;
}
@media (min-width: 640px) {
    .sheet-dialog[open] { justify-content: center; }
    .sheet { border-radius: 22px; }
}
.sheet h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.sheet p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--copy); }
.sheet .sheet-hint { font-size: 14px; line-height: 1.45; color: var(--muted); }
.sheet a { color: var(--accent); }
/* Auswahlfenster mit festem Kopf (Titel, Suche) und scrollender Liste */
.sheet.is-list { display: flex; flex-direction: column; gap: 0; height: min(620px, calc(var(--dialog-height, 640px) - 24px)); padding: 0; overflow: hidden; }
.sheet-list-head { display: grid; gap: 12px; padding: 18px 16px 12px; border-bottom: 1px solid var(--line); }
.sheet-list-head .sheet-head { align-items: flex-start; }
.sheet-list-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.sheet-search { position: relative; display: block; }
.sheet-search > svg { position: absolute; top: 50%; left: 14px; z-index: 1; width: 18px; height: 18px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.sheet-search input { width: 100%; min-height: 48px; padding: 0 14px 0 42px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); font-weight: 500; color: var(--text); background: var(--input); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
.sheet-search input:focus { border-color: var(--accent); outline: none; }
.sheet-list { display: grid; align-content: start; gap: 6px; padding: 10px 12px 16px; overflow: auto; overscroll-behavior: contain; }
.sheet-list-empty { margin: 12px 4px; font-size: 14px; color: var(--muted); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-head h2 { margin: 0; }
.sheet-close { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid var(--line); border-radius: 50%; font-size: 24px; line-height: 1; background: var(--soft); }
.sheet-field { display: grid; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sheet-actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 6px; }
.sheet-actions > .button { min-height: 48px; border-radius: 999px; }
.sheet-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    background: var(--soft);
}
.sheet-option svg { width: 20px; height: 20px; flex: none; }
.sheet-option:hover { border-color: var(--line-strong); }
.sheet-option.is-danger { color: var(--danger); }

/* Aktionsblatt „⋯“ (openActionSheet in ui/dialog.js): Titel und eine Liste aus .sheet-option */
.action-sheet { display: grid; gap: 8px; }
.action-sheet-title { margin: 0 0 6px; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.sheet-cancel { width: 100%; min-height: 46px; margin-top: 4px; border-radius: 999px; }

/* ---------------------------------------------------------------- Menü
   „Menü“ in der Kopfleiste (views/shell.js, openMenu). Kacheln zu zweit; die erste
   Kachel („Meine Inhalte“) ist hervorgehoben: volle Breite, Symbol in der Akzentfarbe.
   Gruppentitel in der Datenschrift mit Linie bis zum Rand. */

.menu-dialog { background: rgba(5, 6, 9, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.menu-dialog::backdrop { background: rgba(5, 6, 9, .35); }
.menu-dialog[open] {
    display: grid;
    place-items: center;
    overflow: auto;
    padding: 16px;
    overscroll-behavior: contain;
    container: menu-dialog / size;
}
.menu {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: calc(var(--dialog-height, 100dvh) - 32px);
    overflow: auto;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-panel);
    padding: 22px;
    color: var(--text);
    background:
        radial-gradient(120% 70% at 0% 0%, rgba(163, 230, 53, .07), transparent 55%),
        radial-gradient(90% 60% at 100% 0%, rgba(124, 108, 255, .07), transparent 60%),
        var(--surface);
    box-shadow: var(--shadow-elevated);
    animation: menu-rise .32s var(--ease) both;
}
@keyframes menu-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }

.menu-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.menu-kicker {
    display: block;
    overflow: hidden;
    font-family: var(--font-data);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--accent);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.menu-heading h2 { margin: 4px 0 0; font-size: 26px; font-weight: 900; line-height: 1.1; letter-spacing: -.03em; }
.menu-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid var(--hairline-strong);
    border-radius: 50%;
    color: var(--text-soft);
    background: var(--soft);
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.menu-close:hover { color: var(--text); background: var(--soft-2); }
.menu-close svg { width: 17px; height: 17px; stroke-width: 2; }

.menu-group + .menu-group { margin-top: 18px; }
.menu-group h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-family: var(--font-data);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}
.menu-group h3::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.menu-tile {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    gap: 14px 8px;
    min-height: 104px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    padding: 14px;
    color: var(--text);
    text-align: left;
    background: var(--soft);
    transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.menu-tile:hover { border-color: var(--hairline-strong); background: var(--soft-2); }
.menu-tile:active { transform: scale(.98); }
.menu-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.menu-tile-symbol {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: var(--text-soft);
    background: rgba(255, 255, 255, .055);
    transition: color .2s var(--ease), background-color .2s var(--ease);
}
.menu-tile-symbol svg { width: 21px; height: 21px; stroke-width: 1.8; }
.menu-tile:hover .menu-tile-symbol { color: var(--accent); background: var(--accent-soft); }

.menu-tile-copy { grid-column: 1 / -1; grid-row: 2; align-self: end; display: grid; gap: 3px; min-width: 0; }
.menu-tile-copy strong { font-size: 15px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.menu-tile-copy small { font-size: 12px; line-height: 1.35; color: var(--muted); }

.menu-tile-arrow, .menu-tile-badge { grid-column: 2; grid-row: 1; }
.menu-tile-arrow { align-self: start; color: var(--muted); transition: color .2s var(--ease), transform .2s var(--ease); }
.menu-tile-arrow svg { display: block; width: 18px; height: 18px; stroke-width: 2; }
.menu-tile:hover .menu-tile-arrow { color: var(--accent); transform: translateX(2px); }
.menu-tile-badge {
    align-self: start;
    border-radius: 999px;
    padding: 4px 8px;
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: var(--accent-ink);
    background: var(--accent);
}

/* Hervorgehobene Kachel: ganze Breite, Symbol neben dem Text, Akzentfarbe */
.menu-tile.is-featured {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 14px;
    min-height: 84px;
    border-color: rgba(163, 230, 53, .28);
    background: radial-gradient(130% 160% at 0% 50%, rgba(163, 230, 53, .14), transparent 60%), var(--soft);
}
.menu-tile.is-featured:hover { border-color: rgba(163, 230, 53, .5); background-color: var(--soft-2); }
.menu-tile.is-featured .menu-tile-symbol { width: 50px; height: 50px; border-radius: 15px; color: var(--accent-ink); background: var(--accent-gradient); box-shadow: var(--accent-shadow); }
.menu-tile.is-featured .menu-tile-symbol svg { width: 25px; height: 25px; stroke-width: 2; }
.menu-tile.is-featured .menu-tile-copy { grid-column: 2; grid-row: 1; align-self: center; }
.menu-tile.is-featured :is(.menu-tile-arrow, .menu-tile-badge) { grid-column: 3; }
.menu-tile.is-featured .menu-tile-copy strong { font-size: 18px; }
.menu-tile.is-featured .menu-tile-arrow { align-self: center; color: var(--accent); }

@media (max-width: 480px) {
    .menu { padding: 18px 16px; border-radius: var(--radius-card); }
    .menu-heading h2 { font-size: 23px; }
    .menu-tile { min-height: 96px; padding: 12px; }
    .menu-tile-copy strong { overflow-wrap: anywhere; }
}
@container menu-dialog (max-height: 640px) {
    .menu-heading { margin-bottom: 12px; }
    .menu-heading h2 { font-size: 21px; }
    .menu-group + .menu-group { margin-top: 12px; }
    .menu-group h3 { margin-bottom: 8px; }
    .menu-tile { min-height: 0; gap: 8px; }
    .menu-tile-symbol { width: 34px; height: 34px; }
    .menu-tile:not(.is-featured) .menu-tile-copy small { display: none; }
    .menu-tile.is-featured { min-height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
    .menu { animation: none; }
    .menu-tile, .menu-tile-arrow { transition: none; }
}

/* ---------------------------------------------------------------- Hinweis-Meldung */

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1000;
    max-width: min(90vw, 480px);
    border: 1px solid var(--hairline-strong);
    border-radius: 16px;
    padding: 12px 18px;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background: rgba(20, 23, 30, .92);
    box-shadow: 0 20px 50px -16px rgba(0, 0, 0, .9);
    backdrop-filter: blur(16px);
    opacity: 0;
    transform: translate(-50%, 16px);
    transition: opacity .25s ease, transform .25s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
    .toast { bottom: calc(90px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------- Tooltip für Symbol-Knöpfe */

.tooltip {
    position: fixed;
    z-index: 1100;
    max-width: 240px;
    border: 1px solid var(--hairline-strong);
    border-radius: 9px;
    padding: 6px 9px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    background: rgba(20, 23, 30, .96);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .9);
    pointer-events: none;
}

/* Keine alten Inhalte anzeigen, solange der aktuelle Zugriff unbestätigt ist. */
.access-unconfirmed body * { visibility: hidden !important; }
.access-unconfirmed #access-guard {
    visibility: visible !important;
    position: fixed; inset: 0; z-index: 2147483647;
    display: grid; place-content: center; padding: 2rem;
    background: #101722; color: #fff; text-align: center;
}

/* Kurze Zugangsprüfungen ohne flüchtigen Text; Inhalte bleiben verdeckt. */
.access-unconfirmed #access-guard:empty::before {
    content: ''; width: 1.5rem; height: 1.5rem; justify-self: center;
    border: 2px solid #64748b; border-top-color: #fff; border-radius: 50%;
    animation: access-guard-spin 0.8s linear infinite;
}
@keyframes access-guard-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .access-unconfirmed #access-guard:empty::before { animation: none; }
}

/* Kurzes gemeinsames Feedback, Erfolgstexte bleiben die bestehenden lesbaren Toasts. */
.request-status { position: fixed; z-index: 100000; bottom: 24px; left: calc(50% - 23px); width: 46px; height: 46px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 4px 20px #0004; }
.request-status::before, button[aria-busy="true"]::after { content: ''; display: inline-block; width: 18px; height: 18px; border: 2px solid var(--muted); border-top-color: var(--accent); border-radius: 50%; animation: cf-request-spin .75s linear infinite; flex-shrink: 0; }
button[aria-busy="true"] { cursor: progress; }
@keyframes cf-request-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .request-status::before, button[aria-busy="true"]::after { animation: none; }
    .toast { animation: none; transition: none; }
}

/* ======================================================================== shell */
/* ==========================================================================
   Kopfleiste und Hauptnavigation.
   Desktop: alles in einer Zeile. Handy: Navigation als schwebende Leiste
   unten, daneben der „Neu“-Knopf.
   ========================================================================== */

/* Auf dem Handy stecken die untere Leiste (.nav) und der „Neu“-Knopf als fest
   positionierte Elemente in der Kopfleiste. Darum darf .topbar selbst weder
   transform noch filter, backdrop-filter, will-change oder contain bekommen:
   jede dieser Eigenschaften macht die Kopfleiste zum Bezugsrahmen für alles
   Feste darin, und die untere Leiste würde oben in der Kopfleiste erscheinen.
   Kopfleiste und untere Leiste stehen immer fest. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9);
}
/* Glaswirkung über ein Pseudo-Element, aus demselben Grund wie oben. */
.topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 12, 16, .88), rgba(8, 9, 12, .72));
    backdrop-filter: saturate(170%) blur(18px);
}

.topbar-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 0 12px;
}

/* ---------------------------------------------------------------- Marke */

.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.brand-symbol {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 12px;
    background: var(--accent-gradient);
    box-shadow: var(--accent-shadow), inset 0 1px 0 rgba(255, 255, 255, .45);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.brand-symbol svg { width: 20px; height: 20px; stroke: var(--accent-ink); stroke-width: 1.9; }
.brand:hover .brand-symbol { transform: rotate(-8deg) scale(1.04); }
.brand strong { font-size: 15px; font-weight: 800; letter-spacing: -.03em; }

/* ---------------------------------------------------------------- Neu / Update */

.header-actions {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translate(-50%, -50%);
}
.header-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-button);
    padding: 0 15px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    background: var(--card);
    transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.header-action svg { width: 17px; height: 17px; stroke-width: 2.2; }
.header-action:hover, .header-action.is-active { border-color: rgba(163, 230, 53, .55); }
.header-action.is-create {
    width: 40px;
    min-height: 40px;
    padding: 0;
    border-color: rgba(163, 230, 53, .55);
    color: var(--accent);
    background: rgba(163, 230, 53, .12);
    box-shadow: 0 0 0 1px rgba(163, 230, 53, .08), 0 8px 24px -12px rgba(163, 230, 53, .6);
}
.header-action.is-create span { display: none; }
.header-action.is-create:hover, .header-action.is-create.is-active { background: rgba(163, 230, 53, .2); }

/* ---------------------------------------------------------------- Navigation */

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    border-radius: var(--radius-button);
    padding: 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--nav-muted);
    transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav button > span { display: grid; place-items: center; width: 18px; height: 18px; opacity: .82; }
.nav button svg { width: 18px; height: 18px; stroke-width: 1.9; }
.nav button em { font-style: normal; }
.nav button:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.nav button.is-active {
    font-weight: 700;
    color: var(--accent-ink);
    background: var(--accent-gradient);
    box-shadow: var(--accent-shadow), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.nav button.is-active > span { opacity: 1; }

/* ---------------------------------------------------------------- Rechte Knöpfe */

.top-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.top-button {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-button);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-soft);
    background: rgba(255, 255, 255, .035);
    box-shadow: var(--highlight);
    transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.top-button svg { width: 18px; height: 18px; }
.top-button.is-text { width: auto; padding: 0 12px; }
.top-button:hover { border-color: var(--hairline-strong); background: rgba(255, 255, 255, .07); }
.top-button.is-active { border-color: rgba(163, 230, 53, .55); color: var(--accent); }
#inboxButton { overflow: visible; }
.top-button.is-profile .profile-image { width: 100%; height: 100%; object-fit: cover; }
.unread-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(7, 8, 11, .72);
    border-radius: 50%;
    background: var(--alert);
    box-shadow: 0 0 0 2px var(--page-a), 0 0 12px rgba(163, 230, 53, .8);
}

/* ---------------------------------------------------------------- Handy */

@media (max-width: 760px) {
    .topbar-inner {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 6px;
        min-height: 57px;
        padding: 0 10px;
    }
    .brand-symbol { width: 34px; height: 34px; }
    .brand strong { display: none; }
    .top-actions { grid-column: 3; gap: 6px; }
    .top-button { width: 44px; height: 44px; }
    .top-button.is-text { width: auto; }
    .top-button.is-profile { padding: 5px; }
    .top-button.is-profile .profile-image { border-radius: 8px; }

    body.is-signed-in { --mobile-nav-height: 82px; }
    .nav {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        z-index: 120;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: end;
        gap: 2px;
        margin: 0;
        border: 1px solid var(--hairline-strong);
        border-radius: 24px;
        padding: 7px 76px 8px 4px;
        background: linear-gradient(180deg, rgba(22, 25, 32, .82), rgba(12, 14, 19, .9));
        box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
        backdrop-filter: saturate(170%) blur(22px);
    }
    .nav button {
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        min-height: 58px;
        border-radius: 18px;
        padding: 7px 1px 6px;
        font-size: 10.9px;
        font-weight: 700;
        line-height: 1.15;
    }
    .nav button > span, .nav button svg { width: 22px; height: 22px; }
    .nav button em { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .header-actions {
        position: fixed;
        left: auto;
        top: auto;
        right: 20px;
        bottom: calc(16px + env(safe-area-inset-bottom));
        z-index: 121;
        transform: none;
    }
    .header-action.is-update { display: none; }
    .header-action.is-create {
        flex-direction: column;
        gap: 4px;
        width: 60px;
        min-height: 54px;
        height: 58px;
        border-color: rgba(163, 230, 53, .6);
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(163, 230, 53, .16), rgba(163, 230, 53, .08));
        box-shadow: 0 10px 26px -12px rgba(163, 230, 53, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
    }
    .header-action.is-create svg { width: 22px; height: 22px; }
    .header-action.is-create span { display: block; font-size: 11px; font-weight: 700; color: var(--text); }
}


/* Die Tastatur verdeckt sonst die untere Leiste. */
.is-keyboard-open .nav, .is-keyboard-open .header-actions { display: none; }
/* Offene Tastatur der App (sie liegt über der Seite): unten so viel Platz, wie sie
   hoch ist – so lässt sich auch das letzte Feld über die Tastatur scrollen. */
.is-keyboard-open .app::after { content: ""; display: block; height: var(--keyboard-inset); }
/* Das Feld mit dem Cursor (und eine offene Vorschlagsliste) wird mit etwas Luft über die
   Tastatur geschoben. Auf der Seite liegt die Tastatur darüber, also zählt ihre Höhe mit;
   Dialoge enden schon über ihr. Ausgenommen: die Antwortzeile im Chat (klebt selbst über
   der Tastatur) und die Weltkarte (feste Fläche über der Tastatur). */
.is-keyboard-open .app :is(:is(input, textarea, [contenteditable="true"]):focus, .combobox-menu):not(#dmReply, .world *) { scroll-margin-bottom: calc(var(--keyboard-inset) + 16px); }
.is-keyboard-open dialog :is(:is(input, textarea, [contenteditable="true"]):focus, .combobox-menu) { scroll-margin-bottom: 16px; }
/* Bei offener Tastatur ist die untere Leiste ausgeblendet: Antwortzeile und Weltkarte
   enden direkt über der Tastatur. --keyboard-inset ist 0, wenn die WebView den
   sichtbaren Bereich schon selbst verkleinert – dann ist der Rand der Seite die Tastaturkante. */
.is-keyboard-open .inbox-reply { bottom: var(--keyboard-inset); }
.is-keyboard-open .world { bottom: var(--keyboard-inset); }

/* ---- Navigation: „Update erstellen“ (am Handy nur „Update“) */
.nav-long { display: none; }
@media (min-width: 761px) { .nav-long { display: inline; } }

/* „Update“ wird hervorgehoben, solange man in der geöffneten Challenge Updates
   erstellen darf (auch während der Editor offen ist, .is-open): grün umrandet
   wie „Neu“, nicht voll grün – voll grün zeigt nur, wo man gerade ist.
   „Neu“ ist dann zurückhaltend, damit nur ein Knopf leuchtet. */
.nav [data-view="picker"].is-context:not(.is-active) {
    color: var(--text);
    background: linear-gradient(180deg, rgba(163, 230, 53, .16), rgba(163, 230, 53, .08));
    box-shadow: inset 0 0 0 1px rgba(163, 230, 53, .6), 0 10px 26px -12px rgba(163, 230, 53, .7);
}
.nav [data-view="picker"].is-context:not(.is-active) > span { opacity: 1; color: var(--accent); }
.nav [data-view="picker"].is-context:not(.is-active):hover { background: rgba(163, 230, 53, .2); }
.nav [data-view="picker"].is-open { color: var(--text); }
body.has-update-action .header-action.is-create {
    border-color: var(--line-strong); color: var(--copy); background: var(--card); box-shadow: none;
}
@media (max-width: 760px) {
    body.has-update-action .header-action.is-create { background: rgba(22, 25, 32, .9); }
    body.has-update-action .header-action.is-create span { color: var(--copy); }
}

/* ======================================================================== auth */
/* ==========================================================================
   Anmeldung, Registrierung, E-Mail-Bestätigung, Passwort vergessen.
   ========================================================================== */

.auth { display: flex; justify-content: center; max-width: 720px; margin: 0 auto; padding: 72px 0 54px; }
.auth-card {
    width: 100%;
    max-width: 430px;
    border-radius: var(--radius-panel);
    padding: 34px 32px;
    text-align: center;
    backdrop-filter: blur(24px) saturate(150%);
}
.brand-mark {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.04em;
    color: var(--accent-ink);
    background: var(--accent-gradient);
    box-shadow: 0 18px 40px -12px rgba(163, 230, 53, .7), 0 0 0 6px rgba(163, 230, 53, .08), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.auth-card h1 {
    margin: 16px 0 0;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 900;
    letter-spacing: -.045em;
    color: transparent;
    background: linear-gradient(180deg, #fff 35%, #aeb5c2 100%);
    background-clip: text;
}
.auth-card > p { margin: 13px 0; }
.auth-card .form-grid { margin-top: 22px; text-align: left; }
.auth-forgot { justify-self: center; }
.auth-actions { margin-top: 18px; }
.auth-success {
    margin: 14px 0;
    border: 1px solid rgba(163, 230, 53, .35);
    border-radius: var(--radius-control);
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--accent-hot);
    background: var(--accent-soft);
}
.auth-card > .error { margin: 14px 0; font-size: 14px; line-height: 1.5; }
.turnstile-slot { min-height: 65px; }

.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 18px; font-size: 13px; }
.legal-links a { color: var(--muted); text-underline-offset: 3px; }
.legal-links a:hover { color: var(--text); }

/* Zustimmung zu den Nutzungsbedingungen */
.terms-points { display: grid; gap: 8px; margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--copy); }
.terms-delete-link { justify-self: center; padding: 6px; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
    .auth { padding: 5vh 0; }
    .auth-card { padding: 28px 22px; }
}

/* ---- Zustimmung: Kasten, Fehlertext und erneutes Aufleuchten bei jedem Versuch */
.terms-check.is-invalid { border-color: var(--danger); background: var(--danger-soft); color: #ffd7db; }
.terms-check.is-invalid a { color: inherit; text-decoration: underline; }
.terms-check.is-invalid input { outline: 2px solid var(--danger); outline-offset: 2px; }
.terms-check.is-pulsing { animation: terms-required .7s ease-out; }
@keyframes terms-required {
    0% { transform: translateX(0); box-shadow: 0 0 0 0 rgba(255, 95, 109, .9); background: #5a1621; }
    15% { transform: translateX(-6px); }
    30% { transform: translateX(6px); box-shadow: 0 0 0 7px rgba(255, 95, 109, .45); }
    45% { transform: translateX(-4px); }
    60% { transform: translateX(3px); }
    100% { transform: translateX(0); box-shadow: 0 0 0 0 rgba(255, 95, 109, 0); background: var(--danger-soft); }
}
/* Fehlertexte in Blättern und Karten: Signalfarbe statt der allgemeinen Absatzfarbe. */
.sheet .form-error, .card .form-error { color: var(--danger); font-size: 14px; font-weight: 700; }
.terms-check + .form-error:not([hidden]) { display: flex; align-items: center; gap: 8px; margin-top: -2px; }
.terms-check + .form-error:not([hidden])::before {
    content: "!"; display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%;
    font-size: 13px; font-weight: 900; color: #fff; background: var(--danger);
}
@media (prefers-reduced-motion: reduce) { .terms-check.is-pulsing { animation: none; } }

/* ---- Neues Passwort: Anforderungen sichtbar von Anfang an, beim Tippen abgehakt */
.password-new { display: grid; gap: 10px; }
.password-rules { margin: -2px 0 2px; padding: 11px 13px 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: rgba(255, 255, 255, .025); }
.password-rules-title { margin: 0 0 7px; color: var(--text-soft); font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.password-rules ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.password-rules li { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.3; transition: color .15s ease; }
.password-rule-mark { position: relative; display: grid; place-items: center; flex: none; width: 16px; height: 16px; border: 1.5px solid var(--line-strong); border-radius: 50%; transition: background-color .15s ease, border-color .15s ease; }
.password-rules li.is-ok { color: var(--text); }
.password-rules li.is-ok .password-rule-mark { border-color: var(--accent); background: var(--accent); }
.password-rules li.is-ok .password-rule-mark::after { content: ""; width: 7px; height: 4px; margin-top: -2px; border-bottom: 2px solid var(--accent-ink); border-left: 2px solid var(--accent-ink); transform: rotate(-45deg); }
.password-rules li.is-missing { color: var(--danger); }
.password-rules li.is-missing .password-rule-mark { border-color: var(--danger); }
.password-match { margin: -4px 2px 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.password-match.is-ok { color: var(--accent); }
.is-checked .password-match.is-missing { color: var(--danger); }
@media (prefers-reduced-motion: reduce) {
    .password-rules li, .password-rule-mark { transition: none; }
}

/* ======================================================================== content */
/* ==========================================================================
   Inhalts-Bausteine, die in vielen Ansichten vorkommen: Profilbild, Namen,
   Aktionsknöpfe, Fortschritt, Bildreihe, Etiketten, Listen-Wächter.
   ========================================================================== */

/* ---------------------------------------------------------------- Profilbild */

.avatar {
    --avatar-size: 34px;
    display: grid;
    place-items: center;
    width: var(--avatar-size);
    height: var(--avatar-size);
    flex: none;
    overflow: hidden;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--accent-ink);
    background: var(--accent-gradient);
    box-shadow: 0 0 0 2px rgba(7, 8, 11, .9), 0 0 0 3.5px rgba(163, 230, 53, .35);
}
.avatar.big { --avatar-size: 76px; font-size: 26px; }
.avatar.is-three-chars { font-size: 9px; letter-spacing: -.04em; }
.avatar.big.is-three-chars { font-size: 17px; }
.avatar.has-image { background: var(--soft); color: transparent; }
.avatar.has-image img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.avatar-link { display: inline-grid; place-items: center; flex: none; border-radius: 50%; }
.avatar-link:hover .avatar,
.avatar-link:focus-visible .avatar { outline: 2px solid var(--accent); outline-offset: 2px; }
.avatar-link:focus-visible { outline: none; }

/* Ersteller-Markierung: goldener Ring und kleine Krone am Profilbild */
.owner-mark { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; }
.owner-mark .avatar { box-shadow: 0 0 0 2px var(--owner), 0 0 0 4px rgba(244, 192, 79, .18); }
.owner-crown {
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--owner);
    border-radius: 50%;
    background: #15130c;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    pointer-events: none;
}
.owner-crown svg { width: 13px; height: 13px; fill: var(--owner); stroke: none; }

/* ---------------------------------------------------------------- Namen und Erwähnungen */

/* Namen erben die Textfarbe, Erwähnungen (@name im Text) sind grün und fett. */
.profile-link,
.mention {
    border-radius: 4px;
    cursor: pointer;
    transition: color .15s;
}
.profile-link { color: inherit; }
.mention { font-weight: 700; color: var(--accent); }
.profile-link:hover,
.mention:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- Kleine Text-Elemente */

.text-link {
    min-height: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}
.text-link:hover { color: var(--accent); }
.inline-more { font-weight: 800; color: var(--text); }
.meta { font-family: var(--font-data); font-size: 11px; letter-spacing: .055em; color: var(--muted); font-variant-numeric: tabular-nums; }
.edited-marker {
    margin-left: 6px;
    font-family: var(--font-data);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.lock-icon { width: 1em; height: 1em; flex: none; stroke-width: 2; }

/* ---------------------------------------------------------------- Aktionsknöpfe */

.icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    font-size: 14px;
    color: var(--text);
    background: transparent;
    transition: background-color .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.icon-button:hover { background: rgba(255, 255, 255, .07); }
.icon-button:active:not(:disabled) { transform: scale(.94); }
.icon-button-symbol { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; }
.icon-button-symbol svg { width: 24px; height: 24px; stroke-width: 2; }
.icon-button em {
    min-width: 1ch;
    font-style: normal;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    text-align: left;
    color: var(--text);
}
.icon-button.is-liked { color: var(--accent); }
.icon-button.is-joined { color: var(--danger); }
.icon-button.is-joined .icon-button-symbol { color: var(--accent); }
.icon-button.is-joined em { color: var(--vote-up); }
.icon-button.is-closed { opacity: .72; cursor: default; }
.icon-button.is-danger:hover { color: var(--danger); }
.icon-button[aria-busy="true"] { opacity: .58; cursor: wait; }

/* Favorit (Lesezeichen) */
.favorite-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 31px;
    padding: 5px 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line));
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
    color: var(--accent);
    background: color-mix(in srgb, var(--card) 88%, var(--accent) 12%);
    transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.favorite-button svg { width: 14px; height: 14px; flex: none; stroke-width: 1.8; transition: fill .16s ease; }
.favorite-button:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--card)); }
.favorite-button.is-active { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }
.favorite-button.is-active svg { fill: currentColor; }
.favorite-button.is-compact { min-height: 27px; padding: 4px 7px; gap: 5px; font-size: 9.5px; }
.favorite-button.is-compact svg { width: 13px; height: 13px; }
/* In Aktionsleisten: nur das Symbol, so groß wie die anderen Aktionen */
.favorite-button.is-actionbar { padding: 0; border: 0; color: var(--muted); background: transparent; }
.favorite-button.is-actionbar svg { width: 24px; height: 24px; }
.favorite-button.is-actionbar:hover { color: var(--accent); }
.favorite-button.is-actionbar.is-active { color: var(--accent); background: transparent; }

/* Beobachten (Auge) */
.watch-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: transform .2s var(--ease), background-color .2s ease, border-color .2s ease, color .2s ease; }
.watch-button.is-corner {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    color: #fff;
    background: rgba(8, 9, 12, .46);
    backdrop-filter: blur(12px) saturate(1.6);
    box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .7);
}
.watch-button.is-corner:hover { border-color: rgba(255, 255, 255, .32); background: rgba(8, 9, 12, .66); transform: scale(1.06); }
.watch-button.is-corner.is-active { border-color: transparent; color: var(--accent-ink); background: var(--accent-gradient); }
.watch-button.is-detail { width: 100%; min-height: 44px; }
.watch-icon { display: inline-grid; place-items: center; flex: none; }
.watch-button.is-corner .watch-icon svg { width: 30px; height: 26px; overflow: visible; }
.watch-button.is-detail .watch-icon svg { width: 20px; height: 20px; }
.watch-icon .watch-slash { stroke-width: 2; opacity: .92; }

/* „⋯“ (Melden oder blockieren) */
.more-button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--muted);
}
.more-button svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.more-button:hover { color: var(--text); background: rgba(255, 255, 255, .07); }

/* Tagesstand eines Updates: „TAG 5 VON 30 · UPDATE 2“. Die große Form (is-hero, is-poster) hat ihre eigene
   Anordnung (siehe „Großer Tagesstand“); die Zeilenform hier gilt nur für die übrigen. */
.update-stage:not(.is-hero, .is-poster) { display: inline-flex; align-items: baseline; gap: 8px; }
.update-stage {
    font-family: var(--font-data);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    text-transform: uppercase;
}
.update-stage-values { display: flex; }
.update-stage:not(.is-hero, .is-poster) .update-stage-values { align-items: baseline; gap: 7px; }
.update-stage-day { font-weight: 900; color: var(--accent); }
.update-stage-number { margin-left: 2px; font-size: 11px; font-weight: 600; line-height: 1.1; letter-spacing: .06em; color: var(--muted); opacity: .85; }
.update-stage.is-generic strong { font-weight: 800; }

/* ---------------------------------------------------------------- Bildreihe */

.gallery { position: relative; }
.gallery-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    background: var(--media-bg);
    color: var(--muted);
    touch-action: pan-x pan-y;
}
.gallery-strip::-webkit-scrollbar { display: none; }
.gallery-strip.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.gallery-frame { position: relative; flex: 0 0 100%; overflow: hidden; scroll-snap-align: start; }
.gallery-open { position: absolute; inset: 0; width: 100%; height: 100%; cursor: zoom-in; }
.gallery-open:focus-visible { outline: 3px solid var(--accent-glow); outline-offset: -4px; }
.gallery-image { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }

/* Bilder vom Server: ruhige Ladefläche statt schwarzer Fläche, bis das Bild da ist (is-loaded/is-failed setzt core/media.js) */
img[src^="media.php"]:not(.is-loaded, .is-failed) {
    background: linear-gradient(100deg, var(--media-bg) 35%, var(--media-loading) 50%, var(--media-bg) 65%) 0 0 / 300% 100%;
    animation: media-loading 1.6s ease-in-out infinite;
}
@keyframes media-loading { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
    img[src^="media.php"]:not(.is-loaded, .is-failed) { animation: none; background: var(--media-loading); }
}
.photo-counter {
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    font-family: var(--font-data);
    font-size: 10px;
    letter-spacing: .055em;
    color: #fff;
    background: rgba(8, 9, 12, .5);
    backdrop-filter: blur(10px) saturate(1.6);
    transform: translateX(-50%);
    pointer-events: none;
}
.gallery-dots { display: flex; justify-content: center; gap: 4px; padding: 12px 0 2px; }
.gallery-dot { display: grid; place-items: center; min-width: 16px; height: 24px; padding: 0 2px; border-radius: 999px; }
.gallery-dot::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text) 28%, transparent);
    transition: background-color .2s ease, width .2s ease;
}
.gallery-dot:hover::after { background: color-mix(in srgb, var(--text) 45%, transparent); }
.gallery-dot.is-active::after { width: 22px; border-radius: 999px; background: var(--accent); }

/* ---------------------------------------------------------------- Segmente und Umschalter */

.segmented {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    background: rgba(0, 0, 0, .28);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45);
}
.segment {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--muted);
}
.segment:hover { color: var(--text); }
.segment.is-active {
    font-weight: 700;
    color: var(--accent-ink);
    background: var(--accent-gradient);
    box-shadow: 0 6px 18px -8px rgba(163, 230, 53, .7), inset 0 1px 0 rgba(255, 255, 255, .4);
}

/* Titelsuche über einer Liste */
.title-search { position: relative; display: block; min-width: 0; }
.title-search > svg { position: absolute; top: 50%; left: 14px; z-index: 1; width: 17px; height: 17px; color: var(--muted); stroke-width: 1.8; transform: translateY(-50%); pointer-events: none; }
.title-search input {
    width: 100%;
    min-height: 44px;
    padding: 0 14px 0 42px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    font-size: 13px;
    background: var(--input);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
}
.title-search input:focus { border-color: var(--accent); outline: none; }

/* Darstellung: Karten / Raster / Liste (components/collection.js) – überall gleich */
.layout-switcher {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45);
}
.layout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--muted);
}
.layout-button:hover { color: var(--text); }
.layout-button svg { flex: none; width: 18px; height: 18px; stroke-width: 1.7; }
.layout-button.is-active { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(163, 230, 53, .5); }

/* Filter-Chips (Meine Challenges, Mitteilungen): runde Knöpfe, der gewählte hell */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--copy);
}
.chip:hover { border-color: var(--hairline-strong); color: var(--text); }
.chip[aria-pressed="true"] { border-color: var(--text); color: var(--card); background: var(--text); }
.chip-count { font-family: var(--font-data); font-size: 11.5px; font-variant-numeric: tabular-nums; opacity: .75; }

/* ---------------------------------------------------------------- Nachladen, Laden, Leer */

.feed-sentinel { display: grid; place-items: center; gap: 10px; padding: 24px 0 8px; }
.feed-spinner {
    width: 26px;
    height: 26px;
    border: 3px solid var(--track);
    border-top-color: var(--accent);
    border-radius: 50%;
    opacity: 0;
}
.feed-sentinel.is-loading .feed-spinner { opacity: 1; animation: spin .8s linear infinite; }
.feed-sentinel.is-loading .feed-more { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.feed-empty { display: grid; justify-items: start; gap: 10px; }
.feed-empty p { margin: 0; color: var(--copy); }
.feed-empty .feed-empty-note { color: var(--muted); }

.loading-stack { display: grid; gap: 18px; }
.loading-card { display: grid; gap: 12px; min-height: 180px; }
.loading-card span { display: block; height: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--soft), var(--soft-2), var(--soft)); background-size: 200% 100%; animation: shimmer 1.4s ease infinite; }
.loading-card span:first-child { width: 42%; height: 18px; }
.loading-card span:nth-child(2) { width: 88%; }
.loading-card span:nth-child(3) { width: 64%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------------------------------------------------------------- Aufklappbarer Text */

.expandable-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.expandable:not(.is-expanded) .expandable-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 3); }
.expandable[data-lines="1"] { --lines: 1; }
.expandable[data-lines="2"] { --lines: 2; }
.expandable[data-lines="4"] { --lines: 4; }
.expandable[data-lines="5"] { --lines: 5; }
.expandable[data-lines="6"] { --lines: 6; }
.expandable-toggle { display: none; margin-top: 6px; }
.expandable.has-overflow .expandable-toggle,
.expandable.is-expanded .expandable-toggle { display: inline-block; }
.expandable-label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

/* ---------------------------------------------------------------- Filter-Chips und Vorschläge */

.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 8px 4px 11px;
    border: 1px solid rgba(163, 230, 53, .45);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
}
.filter-chip b { font-size: 16px; line-height: 1; }
.filter-chip:hover { border-color: var(--accent); }

.suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    display: grid;
    max-height: 264px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--soft);
    box-shadow: var(--shadow-elevated);
    overscroll-behavior: contain;
}
.suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}
.suggestion:hover, .suggestion:focus-visible { background: rgba(255, 255, 255, .06); }
.suggestion small { flex: none; font-size: 12px; font-weight: 500; color: var(--muted); }

/* ---------------------------------------------------------------- Hervorhebung nach einer Mitteilung */

.is-highlighted { position: relative; animation: highlight-pop .55s cubic-bezier(.22, 1, .36, 1) .15s both; }
.is-highlighted::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    box-shadow: inset 0 0 0 2px var(--accent);
    animation: highlight-ring 2.4s ease both;
}
.is-highlighted > * { position: relative; z-index: 1; }
.is-new-comment { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
@keyframes highlight-pop { 40% { transform: scale(1.1); } }
@keyframes highlight-ring { 0% { opacity: 0; } 12%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .is-highlighted { animation: none; }
    .is-highlighted::before { animation: none; }
}

/* ---------------------------------------------------------------- Super-Challenge: Bedingungen
   Regelkarte aus components/super-rules.js (Challenge-Ansicht und Seite
   „Super-Challenges“) zum Aufklappen: zu nur der Rhythmus und „Regeln“, offen
   je Bedingung eine Zeile mit Bezeichnung in Datenschrift. Super Challenge
   türkis, Live orange. Abstand nach außen bestimmt die Umgebung (Raster-Lücke). */

.super-rules {
    --rules-color: #65d6ba;
    --rules-ink: #8fe7cf;
    --rules-wash: rgba(26, 97, 79, .16);
    padding: 14px 18px;
    border: 1px solid color-mix(in srgb, var(--rules-color) 55%, transparent);
    border-radius: 18px;
    background: var(--rules-wash);
}
.super-rules.is-live { --rules-color: #f1ae59; --rules-ink: #ffca88; --rules-wash: rgba(133, 78, 20, .16); }
.super-rules-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 30px; list-style: none; cursor: pointer; }
.super-rules-head::-webkit-details-marker { display: none; }
.super-rules-head strong { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--rules-ink); }
.super-rules-kind {
    padding: 3px 8px 2px;
    border-radius: 6px;
    font-family: var(--font-data);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #1d1200;
    background: var(--rules-color);
}
/* „Regeln“ mit Pfeil rechts; aufgeklappt dreht sich der Pfeil (eigene Eigenschaft rotate, kein Überschreiben). */
.super-rules-toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; font-weight: 700; color: var(--rules-ink); }
.super-rules-toggle::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.super-rules[open] .super-rules-toggle::after { rotate: 180deg; }
.super-rules-paused { flex-basis: 100%; padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--text); background: rgba(255, 255, 255, .06); }
.super-rules-body { display: grid; gap: 12px; padding-top: 12px; }
.super-rules-list { display: grid; margin: 0; }
/* Bezeichnung und Text nebeneinander; ist die Zeile zu schmal, rutscht der Text darunter (ohne Media-Query). */
.super-rules-list > div {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    padding: 9px 0;
    border-top: 1px solid color-mix(in srgb, var(--rules-color) 20%, transparent);
}
.super-rules-list dt {
    flex: 0 0 96px;
    padding-top: 3px;
    font-family: var(--font-data);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rules-ink);
}
.super-rules-list dd { flex: 1 1 180px; min-width: 0; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-soft); white-space: pre-line; overflow-wrap: anywhere; }
.super-rules-foot { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* Etappen-Leiste einer Live-Teilnahme: ein Feld je Etappe, so breit wie ihre Tage */
.stage-track { display: flex; flex-wrap: wrap; gap: 4px; max-width: 460px; margin: 0; padding: 0; list-style: none; }
.stage-track li {
    width: calc(var(--stage-days, 1) * 10px + (var(--stage-days, 1) - 1) * 3px);
    height: 12px;
    border-radius: 3px;
    background: var(--track);
}
.stage-track li.is-done { background: var(--accent-gradient); }
.stage-track li.is-current { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }


/* ======================================================================== challenge-card */
/* ==========================================================================
   Challenge in Listen: Foto mit Ersteller oben und Titel unten darauf,
   darunter der dünne Fortschritt und eine ruhige Aktionszeile. Private
   Challenges ohne Zugang als schlichte Zeile mit Schloss. Dazu die Listenzeile.
   ========================================================================== */

/* ---------------------------------------------------------------- Raster */

.challenge-grid { display: grid; align-items: start; gap: 24px; }
.challenge-grid.layout-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* „Große Karten“: eine Spalte, so groß wie die Fotos der Updates */
.challenge-grid.layout-full { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 760px; margin-inline: auto; }
@media (min-width: 761px) {
    /* Profil und Länderseite: zwei Karten nebeneinander */
    .challenge-grid.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 1099px) {
    .challenge-grid.layout-three { grid-template-columns: 1fr; gap: 22px; }
}

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

.challenge-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--card);
    transition: border-color .2s ease;
}
@media (hover: hover) {
    .challenge-card:hover { border-color: var(--line-strong); }
    .challenge-card:hover .challenge-card-gallery .gallery-image { transform: scale(1.025); }
}

/* Bildfläche: alle Karten gleich hoch – mit und ohne Foto */
.challenge-card-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: min(600px, 72vh);
    min-height: 380px;
    overflow: hidden;
    background: var(--media-bg);
}
.layout-three .challenge-card-hero { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
.is-pair .challenge-card-hero { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
@media (max-width: 760px) {
    .challenge-card-hero { height: min(520px, 64vh); min-height: 360px; }
    .layout-three .challenge-card-hero, .is-pair .challenge-card-hero { height: min(520px, 64vh); aspect-ratio: auto; }
}

.challenge-card-gallery,
.challenge-card-gallery .gallery-strip { position: absolute; inset: 0; }
.challenge-card-gallery .gallery-frame { height: 100%; }
.challenge-card-gallery .gallery-open { cursor: pointer; }
.challenge-card-gallery .gallery-image { transform: scale(1.001); transition: transform 1s var(--ease); }
.challenge-card-gallery .photo-counter { top: 62px; right: 16px; left: auto; transform: none; }
.challenge-card.is-ended .gallery-image { filter: saturate(.6) brightness(.92); }

/* Ohne Foto: Plakatfläche – feines Raster mit schräger Linie, innerer
   Rahmen, grüner Strich links und grüne Ecke oben rechts. */
.challenge-card-plain {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background:
        radial-gradient(circle at 84% 16%, rgba(255, 255, 255, .11), transparent 26%),
        linear-gradient(145deg, #0f1115 0%, #1a1d24 58%, #0b0c10 100%);
    cursor: pointer;
}
.challenge-card-plain::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 0 48%, rgba(255, 255, 255, .06) 48% 48.3%, transparent 48.3% 100%),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: auto, 32px 32px, 32px 32px;
    pointer-events: none;
}
.challenge-card-plain::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, .16); pointer-events: none; }
.plain-accent { position: absolute; top: 14px; bottom: 14px; left: 14px; width: 4px; background: var(--accent); }
.plain-corner { position: absolute; top: 72px; right: 28px; width: 22px; height: 22px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.challenge-card.is-text-only .challenge-card-shade { background: linear-gradient(0deg, rgba(5, 6, 9, .55) 0%, rgba(5, 6, 9, 0) 45%); }
.challenge-card.is-text-only .challenge-card-top { padding: 24px 26px 0 32px; }
.challenge-card.is-text-only .challenge-card-bottom { padding: 0 34px 30px 40px; }
.challenge-card.is-text-only .challenge-card-goal { color: rgba(255, 255, 255, .86); }

/* Abdunklung oben (Ersteller) und unten (Titel) – das Foto bleibt in der Mitte frei */
.challenge-card-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5, 6, 9, .62) 0%, rgba(5, 6, 9, 0) 26%),
        linear-gradient(0deg, rgba(5, 6, 9, .9) 0%, rgba(5, 6, 9, .55) 28%, rgba(5, 6, 9, 0) 58%);
}

.challenge-card-top,
.challenge-card-bottom { position: absolute; right: 0; left: 0; z-index: 2; color: #fff; pointer-events: none; }
.challenge-card-top { top: 0; display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.challenge-card-bottom { bottom: 0; display: grid; gap: 8px; padding: 14px 16px 16px; }
.challenge-card-top :is(a, button), .challenge-card-bottom :is(a, button) { pointer-events: auto; }

.challenge-card-byline { display: flex; flex: 1; align-items: center; gap: 9px; min-width: 0; font-size: 13.5px; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.challenge-card-byline .avatar { --avatar-size: 32px; flex: none; font-size: 11px; box-shadow: 0 0 0 1.5px var(--owner); }
.challenge-card-byline-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, .82); }
.challenge-card-byline-text strong { font-weight: 700; color: #fff; }
.challenge-card-byline-text strong a { color: inherit; }
.challenge-card-byline-text > span::before { content: "·"; margin: 0 6px; }

.challenge-card-corner { flex: none; }
.challenge-card-corner .watch-button.is-corner { width: 40px; height: 40px; }
.challenge-card-corner .watch-button.is-corner .watch-icon svg { width: 22px; height: 19px; }

.challenge-card-status { display: flex; flex-wrap: wrap; gap: 6px; }
.challenge-card-status:not(:has(> :not([hidden]))) { display: none; }
.card-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: none;
}
.card-chip[hidden] { display: none; }
.card-chip.is-joined { color: var(--accent-ink); background: var(--accent); }
.card-chip.is-ended { color: #fff; background: rgba(10, 12, 16, .72); }
.card-chip svg { width: 13px; height: 13px; }

.challenge-card-title {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    padding: 0;
    border: 0;
    background: none;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 800;
    font-stretch: 112%;
    line-height: 1.1;
    letter-spacing: -.015em;
    text-align: left;
    overflow-wrap: anywhere;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}
.layout-three .challenge-card-title { font-size: clamp(19px, 1.7vw, 23px); }
.challenge-card-title:hover { text-decoration: underline 2px var(--accent); text-underline-offset: 4px; }
.challenge-card-goal {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    font-size: 16px;
    line-height: 1.45;
    color: var(--copy);
}

/* Fortschritt und Aktionen */
.challenge-card-body { display: grid; gap: 10px; padding: 14px 16px 4px; }
.challenge-progress.is-card { gap: 7px; }
.challenge-progress.is-card .challenge-progress-head strong { font-size: 14px; }
.challenge-progress.is-card .challenge-progress-head span { font-size: 13px; }
.challenge-progress.is-card .challenge-progress-track { height: 4px; }
.challenge-card-body .outcome-strip { margin: 0; padding-top: 10px; }

.challenge-card-actions { display: flex; align-items: center; gap: 2px; padding: 4px 6px 8px; }
.challenge-card-actions-gap { flex: 1; }
.challenge-card-actions > :is(.icon-button, .favorite-button) {
    width: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    gap: 7px;
    border: 0;
    border-radius: 12px;
    color: var(--copy);
    background: none;
    box-shadow: none;
}
.challenge-card-actions > :is(.icon-button, .favorite-button):hover { color: var(--text); background: var(--soft); }
.challenge-card-actions > .icon-button em { font-size: 14px; font-weight: 600; color: inherit; }
.challenge-card-actions > .icon-button.is-liked { color: var(--like); }
.challenge-card-actions > .icon-button.is-liked svg { fill: currentColor; }
.challenge-card-actions > .favorite-button.is-active { color: var(--accent); }
.challenge-card-actions > .icon-button.is-danger:hover { color: var(--danger); }

/* ---------------------------------------------------------------- Private Challenge ohne Zugang */

.challenge-card.is-private { gap: 12px; padding: 16px; }
.private-row { display: flex; align-items: center; gap: 14px; min-width: 0; cursor: pointer; }
.private-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.private-row-lock { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px; color: var(--private-light); background: var(--private-soft); }
.private-row-lock .lock-icon { width: 22px; height: 22px; }
.private-row-copy { display: grid; flex: 1; gap: 2px; min-width: 0; }
.private-row-kicker { font-size: 12.5px; font-weight: 700; color: var(--private-light); }
.private-row-copy strong { font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.private-row-arrow { flex: none; color: var(--muted); }
.private-row-arrow svg { width: 18px; height: 18px; }

.private-access { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.private-access .button { flex: 1 1 100%; min-height: 46px; }
.private-access .button .lock-icon { width: 17px; height: 17px; }
.private-access .private-status { flex: 1 1 100%; margin: 0; font-size: 13.5px; color: var(--muted); }

/* ---------------------------------------------------------------- Listenzeile */

.list-cards { display: grid; gap: 10px; }
.list-card {
    display: grid;
    gap: 12px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.list-card:hover { border-color: var(--accent-glow); background: rgba(255, 255, 255, .055); transform: translateY(-1px); box-shadow: 0 16px 34px rgba(0, 0, 0, .22); }
.list-card:focus-visible { outline: 3px solid var(--accent-glow); outline-offset: 3px; }
.list-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.list-card-head h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--text); }
.list-card-owner { margin: 0; font-size: 12px; color: var(--muted); }
.list-card-head-actions { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 7px; }
.list-card-head-actions .watch-button.is-corner { width: 38px; height: 38px; }
.list-card-head-actions .watch-button.is-corner .watch-icon svg { width: 21px; height: 18px; }
.list-card-status { padding: 5px 9px; border: 1px solid var(--line); font-size: 10.5px; font-weight: 700; color: var(--copy); }
.list-card-description {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--copy);
}
.list-card-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; font-size: 11.5px; color: var(--muted); }
.list-card-facts > span { position: relative; }
.list-card-facts > span + span::before { content: "·"; position: absolute; left: -9px; color: var(--line-strong); }
.list-card .challenge-progress { margin: 2px 0 4px; }
.list-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.list-card-actions .favorite-button.is-actionbar { width: 40px; height: 40px; }
.list-card-actions .favorite-button.is-actionbar svg { width: 17px; height: 17px; }
.list-card-manage { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.list-card .private-access { margin-top: 12px; }

@media (max-width: 760px) {
    .list-card { padding: 16px; }
    .list-card-head { flex-direction: column; gap: 10px; }
    .list-card-head-actions { flex-direction: row; align-items: center; gap: 10px; }
}

/* ======================================================================== update-card */
/* ==========================================================================
   Update in Listen.

   Große Karte (.is-split): auf dem Telefon Kopf, Bild, Aktionen, Text
   untereinander; ab 1100 px Bild links und rechts eine Spalte mit Kopf,
   Text, Kommentaren und Aktionen. Schmale Karte (.is-compact) für das
   Drei-Spalten-Raster. Updates ohne Foto zeigen eine Textkarte.
   ========================================================================== */

.update-grid { display: grid; gap: 18px; }
.update-grid.layout-three { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
@media (max-width: 1100px) {
    .update-grid.layout-three { grid-template-columns: 1fr; }
}

.update-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "media" "actions" "copy";
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.update-card-media { grid-area: media; min-width: 0; }

/* ---------------------------------------------------------------- Kopfzeile */

.update-card-head { grid-area: head; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.update-owner { display: flex; flex: 1 1 auto; align-items: flex-start; gap: 10px; min-width: 0; }
.update-owner-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Lange Namen werden gekürzt statt unter „Update 3“ zu laufen. */
.update-owner-name { display: block; max-width: 100%; overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.update-meta {
    margin-top: 1px;
    font-family: var(--font-data);
    font-size: 11.5px;
    line-height: 1.25;
    letter-spacing: .055em;
    text-transform: uppercase;
    color: var(--muted);
}
.update-edited svg { width: 11px; height: 11px; vertical-align: -1px; }
.participant-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid var(--accent-glow);
    background: var(--accent-glow);
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
:is(.challenge-page, .update-page) .participant-label { border-color: var(--accent); background: transparent; color: var(--accent-light); }
.update-card.is-owner-update { position: relative; }
.update-card.is-owner-update::before {
    content: "";
    position: absolute;
    top: -1px;
    right: 14px;
    left: 14px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, transparent, var(--owner) 18%, var(--owner) 82%, transparent);
    opacity: .85;
    pointer-events: none;
}
.update-card.is-owner-update .owner-crown { top: -6px; right: -6px; width: 20px; height: 20px; }
.update-card.is-owner-update .owner-crown svg { width: 12px; height: 12px; }

/* Rechts im Kopf: die Marke „Update 3“ und „⋯“ nebeneinander in einer Zeile,
   auf Höhe der Mitte des Profilbilds (--update-stage-height = Größe des Profilbilds). */
.update-card-stage { display: flex; flex: none; align-items: center; gap: 2px; min-height: var(--update-stage-height, 34px); margin-right: -6px; }
.update-card-stage.is-column { flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 6px; min-height: 0; max-width: 45%; text-align: right; }
.update-stage-row { display: flex; align-items: center; gap: 2px; }

/* Marke „Update 3“: zweiteilig wie ein Zählwerk – links das Wort ruhig auf dunkler
   Fläche, rechts die Nummer kräftig auf Grün. So sieht man die Nummer sofort,
   ohne dass Wort und Zahl in derselben Farbe übereinanderstehen. */
.update-stage-badge {
    display: inline-flex;
    align-items: stretch;
    height: 28px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    white-space: nowrap;
    background: var(--soft);
}
.update-stage-badge small {
    display: flex;
    align-items: center;
    padding: 0 8px 0 10px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    color: var(--copy);
}
.update-stage-badge b {
    display: grid;
    place-items: center;
    min-width: 28px;
    padding: 0 8px;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--accent-ink);
    background: var(--accent);
}
.update-stage-badge.is-plain small { padding: 0 10px; }
/* Schmale Karte (drei Spalten): Marke und „⋯“ etwas kleiner, damit Name und Zeit Platz behalten. */
.update-card-head.is-compact .update-stage-badge { height: 24px; border-radius: 8px; }
.update-card-head.is-compact .update-stage-badge small { padding: 0 6px 0 8px; font-size: 11.5px; }
.update-card-head.is-compact .update-stage-badge b { min-width: 22px; padding: 0 6px; font-size: 13px; }
.update-card-head.is-compact .more-button { width: 28px; height: 28px; }
.update-category { font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; color: var(--muted); }
.update-card-stage .more-button { flex: none; }

/* Kompakte Kopfzeile (drei Spalten) */
/* Drei Karten nebeneinander: Marke und Kategorie rechts übereinander. */
.update-card-head.is-compact { flex-wrap: wrap; gap: 10px; margin-bottom: 12px; padding: 2px 2px 0; }
.update-userline { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; }
.update-userline strong { font-size: 13px; font-weight: 700; }
.update-userline .meta { font-size: 13px; line-height: 1.5; text-transform: uppercase; }
.update-userline .update-meta { display: block; }
.update-context { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 100%; }

/* ---------------------------------------------------------------- Text unter dem Bild */

.update-card-copy { grid-area: copy; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.update-card-copy.is-link { cursor: pointer; }
.update-card-copy.is-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.update-card.is-split .update-card-copy .update-stage { font-size: clamp(14px, 1.3vw, 18px); }
.update-card-text { margin: 0; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; color: var(--copy); }
.update-card-copy .link-title { font-size: 17px; font-weight: 800; letter-spacing: -.015em; text-align: left; }
.update-card-copy .link-title:hover { color: var(--accent); }
.update-card-copy p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--copy); }

/* ---------------------------------------------------------------- Aktionen */

.update-card-actions { grid-area: actions; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.update-card-actions-primary,
.update-card-actions-secondary { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; width: 100%; }
.update-card-actions-primary { gap: 0; }
.update-card-actions-secondary { gap: 8px; }
.update-card-actions-primary > * { width: 100%; min-width: 0; min-height: 52px; padding: 10px 4px; gap: 10px; }
.update-card-actions-secondary > * { width: 100%; min-width: 0; min-height: 44px; padding: 0 4px; }
.update-card-actions .icon-button svg { stroke-width: 2; }
.update-card-actions-secondary .icon-button svg { stroke-width: 1.8; }
.update-card-actions .favorite-button.is-actionbar { color: var(--muted); }
.update-card-actions .favorite-button.is-actionbar.is-active { color: var(--accent); }

/* ---------------------------------------------------------------- Bild */

.update-card-gallery .gallery-strip { background: var(--media-bg); }
.update-card-gallery .gallery-frame { aspect-ratio: 4 / 5; max-height: min(680px, 78vh); }

/* ---------------------------------------------------------------- Kommentare in der Karte */

.update-discussion { grid-area: discussion; position: relative; isolation: isolate; display: none; flex-direction: column; min-height: 0; overflow: hidden; border-top: 1px solid var(--line); background: var(--card); }
.inline-comments { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.inline-comments-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px 8px; font-size: 12px; }
.inline-comments-head span { font-family: var(--font-data); font-size: 10px; color: var(--muted); }
.inline-comments-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 18px 14px; overscroll-behavior: contain; }
.comment-list-more { margin: 8px 4px 0; font-size: 12px; font-weight: 700; color: var(--accent); }
.comment-list-more:hover { text-decoration: underline; }
.comment-composer.is-inline {
    position: absolute;
    right: 10px;
    bottom: 0;
    left: 10px;
    z-index: 3;
    display: none;
    height: 50%;
    min-height: 144px;
    padding: 12px 12px 0;
    border: 1px solid var(--line-strong);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: var(--soft);
    box-shadow: 0 -18px 40px -20px rgba(0, 0, 0, .8);
}
.comment-composer.is-inline.is-open { display: flex; }
.comment-composer.is-inline textarea { flex: 1; height: auto; resize: none; }

/* ================================================================ Telefon und Tablet */

@media (max-width: 1099px) {
    .update-card.is-split { padding: 14px; }
    .update-card.is-split .update-card-head { margin-bottom: 12px; padding: 2px 2px 0; }
    .update-card.is-split .update-card-copy { margin: 4px; margin-top: 12px; }
}

@media (max-width: 760px) {
    /* Im Feed liegen große Karten randlos untereinander; im Verlauf bleiben sie Karten. */
    .update-grid { gap: 12px; }
    .update-card-actions-primary .icon-button-symbol { width: 22px; height: 22px; }
}

/* ================================================================ Computer: Bild links, Spalte rechts */

@media (min-width: 1100px) {
    .update-card.is-split {
        grid-template-columns: minmax(0, 1fr) 344px;
        grid-template-rows: auto minmax(250px, auto) minmax(0, 1fr) auto;
        grid-template-areas: "media head" "media copy" "media discussion" "media actions";
        height: clamp(620px, 74vh, 720px);
        overflow: hidden;
    }
    /* Mit Foto, noch ohne Kommentare: keine Zeile für Kommentare (ohne Foto: siehe unten) */
    .update-card.is-split:not(.is-text-only):has(.inline-comments.is-empty) { grid-template-rows: auto minmax(250px, 1fr) 0 auto; }
    .update-card.is-split .update-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
    .update-card.is-split .update-owner { gap: 12px; }
    .update-card.is-split .update-owner .avatar { --avatar-size: 44px; font-size: 10px; }
    .update-card.is-split .update-card-head { --update-stage-height: 44px; --update-link-indent: 56px; }
    .update-card.is-split .update-owner-copy { gap: 3px; padding-top: 1px; }
    .update-card.is-split .update-owner-name { font-size: 13px; line-height: 1.25; }
    .update-card.is-split .update-meta { margin-top: 4px; font-size: 10.5px; line-height: 1.3; }
    .update-card.is-split .participant-label { margin-top: 1px; padding: 0; border: 0; background: transparent; font-size: 10px; }

    .update-card.is-split .update-card-media,
    .update-card.is-split .update-card-gallery,
    .update-card.is-split .update-card-gallery .gallery-strip,
    .update-card.is-split .update-card-gallery .gallery-frame { height: 100%; min-height: 0; max-height: none; aspect-ratio: auto; }
    .update-card.is-split .update-card-gallery .gallery-dots { position: absolute; right: 0; bottom: 8px; left: 0; padding: 0; }

    .update-card.is-split .update-card-copy { min-height: 250px; overflow-y: auto; padding: 16px 20px 76px; }
    .update-card.is-split .update-discussion { display: flex; }
    .update-card.is-split .update-discussion:has(.inline-comments.is-empty) { overflow: visible; border-top: 0; background: transparent; }
    .update-card.is-split .update-card-actions { position: relative; z-index: 4; padding: 14px 14px 18px; border-top: 1px solid var(--line); background: var(--card); }

    /* Ohne Foto: Textkarte über die ganze Breite, Kommentare rechts daneben */
    .update-card.is-split.is-text-only {
        grid-template-columns: minmax(0, 1fr) 320px;
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas: "head head" "media discussion" "actions actions";
        height: clamp(700px, 78vh, 875px);
    }
    .update-card.is-split.is-text-only:has(.inline-comments.is-empty) { grid-template-areas: "head head" "media media" "actions actions"; }
    .update-card.is-split.is-text-only:has(.inline-comments.is-empty) .update-discussion { display: none; }
    .update-card.is-split.is-text-only .update-card-head { padding: 16px 20px 14px; }
    .update-card.is-split.is-text-only .update-discussion { border-top: 0; }
    .update-card.is-split.is-text-only .update-card-actions { padding: 12px 18px 14px; }
}

/* ================================================================ Schmale Karte (drei Spalten) */

.update-card.is-compact { padding: 14px; overflow: hidden; }
.update-card.is-compact .update-card-gallery .gallery-frame { aspect-ratio: 4 / 5; max-height: none; }
.update-card.is-compact .update-card-gallery .gallery-strip { border-radius: var(--radius-photo); }
.update-card.is-compact .update-card-copy { margin: 4px; }
.update-card.is-compact .update-card-actions { padding: 12px 2px 2px; border-top: 1px solid rgba(255, 255, 255, .08); background: #000; }
.update-card.is-compact .update-card-actions .icon-button { background: #000; }
.update-card.is-compact .update-card-actions .icon-button:not(.is-liked) { color: rgba(255, 255, 255, .72); }
.update-card.is-compact .update-card-actions .icon-button:hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* ================================================================ Textkarte (Update ohne Foto) */
/*
 * Zwei Formen aus components/update-card.js:
 *   .is-stream  im Verlauf, in Entdecken und Listen (immer in einer großen Update-Karte)
 *   .is-detail  in der großen Ansicht (.viewer-text) und auf der Seite „Update“ (.update-detail-textcard)
 * Jeder Wert steht je Element und Bildschirmbreite genau einmal. Was sich mit der Breite ändert, steht in
 * getrennten Bereichen, die sich nicht überlappen: bis 760 px, 761–1099 px, ab 1100 px.
 *
 * Detailansicht: Etikett oben, Tagesstand mittig im freien Platz, Strich und Text unten. In der großen
 * Ansicht (feste Höhe) schiebt mehr Text Strich und Tagesstand nach oben – der Textbereich wird höchstens
 * 48 % der Karte hoch, der Strich bleibt also knapp unter der Mitte stehen; noch längerer Text lässt sich
 * unter dem Strich scrollen. Auf der Seite „Update“ wächst die Karte stattdessen mit dem Text.
 */

.text-card { position: relative; isolation: isolate; min-width: 0; overflow: hidden; color: var(--text); background: var(--card); }
.text-card.is-stream { width: 100%; border-radius: 16px; cursor: pointer; }
.text-card.is-detail { border: 1px solid var(--line); }
.text-card-accent { position: absolute; inset: 0 auto 0 0; width: 10px; background: var(--accent); }
/* Winkel unten rechts – nur in der Detailansicht (oben rechts sitzt dort der Schließen-Knopf). Er steht im
   unteren Randabstand der Karte (mindestens 36 px), also nie über dem Text. */
.text-card-corner { position: absolute; right: 14px; bottom: 12px; width: 22px; height: 22px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
.text-card-layout { position: relative; z-index: 1; display: grid; height: 100%; min-height: inherit; }
.text-card.is-detail .text-card-layout {
    gap: clamp(24px, 3.5vh, 38px);
    padding: clamp(34px, 4.5vw, 54px) clamp(32px, 5vw, 62px) clamp(36px, 4.8vw, 58px) clamp(42px, 5.8vw, 72px);
}
/* Große Ansicht (feste Höhe): der Textbereich wird höchstens 48 % hoch, darüber steht der Tagesstand mittig. */
.viewer-text .text-card.is-detail .text-card-layout { grid-template-rows: auto minmax(0, 1fr) fit-content(48%); }
/* Seite „Update“: die Karte wächst mit dem Text. */
.update-detail-textcard .text-card.is-detail .text-card-layout { grid-template-rows: auto minmax(0, 1fr) auto; }
.text-card-head { min-width: 0; }
/* Etikett oben („Fortschritts-Update“): gemeinsam für Textkarte und Textplakat; Größe und Abstand je Karte. */
.text-card-kicker,
.text-poster-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border: 1px solid var(--text);
    font-family: var(--font-data);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
}
.text-card-kicker { margin: 0 0 14px; font-size: 10px; }
.text-card-stream-text {
    display: -webkit-box;
    width: 100%;
    margin: 0;
    padding-top: clamp(12px, 1.6vh, 16px);
    overflow: hidden;
    -webkit-box-orient: vertical;
    border-top: 1px solid var(--text);
    font-weight: 900;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
    color: var(--text);
}
/* Schriftgröße nach Textlänge – jede Karte hat genau eine dieser Klassen. */
.text-card-stream-text.is-short { font-size: clamp(28px, 4vw, 42px); line-height: 1.06; -webkit-line-clamp: 4; }
.text-card-stream-text.is-medium { font-size: clamp(25px, 3.4vw, 36px); line-height: 1.08; -webkit-line-clamp: 5; }
.text-card-stream-text.is-long { font-size: clamp(22px, 2.8vw, 31px); line-height: 1.1; -webkit-line-clamp: 6; }
.text-card-stream-text.is-very-long { font-size: clamp(19px, 2.35vw, 27px); line-height: 1.12; -webkit-line-clamp: 7; }
.text-card-middle { display: grid; min-height: 0; }
.text-card.is-stream .text-card-middle { align-content: center; align-items: start; justify-items: start; gap: clamp(14px, 1.8vh, 20px); }
.text-card.is-detail .text-card-middle { align-items: center; }
.text-card-foot { min-width: 0; }
.text-card.is-detail .text-card-foot { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.text-card-rule { display: block; width: 100%; height: 1px; margin: 0 0 18px; background: var(--text); opacity: .72; }
/* Text der Detailansicht: vollständig; reicht der Platz nicht, lässt er sich hier scrollen. */
.text-card-text {
    width: min(100%, 66ch);
    min-height: 0;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
    font-size: clamp(16px, 1.55vw, 19px);
    font-weight: 500;
    line-height: 1.55;
    overflow-wrap: anywhere;
    color: var(--copy);
}
/* „Weiterlesen →“: nur sichtbar, wenn der Text abgeschnitten ist (ui/overflow.js setzt .has-overflow). */
.text-card-more,
.text-poster-more { align-items: center; gap: 6px; font-size: 12px; font-weight: 800; white-space: nowrap; color: var(--accent); }
.text-poster-more { margin-top: 10px; }
.text-card.has-overflow .text-card-more,
.text-poster.has-overflow .text-poster-more { display: inline-flex; }
.text-card:not(.has-overflow) .text-card-more,
.text-poster:not(.has-overflow) .text-poster-more { display: none; }

/* Großer Tagesstand („TAG 5 VON 30“) – Textkarte (is-hero) und Textplakat (is-poster) */
.update-stage.is-hero,
.update-stage.is-poster { display: grid; justify-items: start; font-variant-numeric: tabular-nums; }
.update-stage.is-hero .update-stage-label,
.update-stage.is-poster .update-stage-label { padding-bottom: 4px; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .12em; }
.update-stage.is-hero .update-stage-values,
.update-stage.is-poster .update-stage-values { align-items: flex-end; }
/* Textkarte: „3 von 30“ unter „Tag“ eingerückt, mit etwas Luft rechts der Tageszahl. */
.update-stage.is-hero .update-stage-values { gap: 16px; margin-left: 28px; }
.update-stage.is-poster .update-stage-values { gap: 10px; margin-left: 12px; }
.update-stage.is-hero .update-stage-day,
.update-stage.is-poster .update-stage-day { font-family: var(--font); line-height: .72; letter-spacing: -.075em; }
.update-stage.is-hero :is(.update-stage-of, .update-stage-total),
.update-stage.is-poster :is(.update-stage-of, .update-stage-total) { line-height: 1.1; }
.text-card.is-detail .update-stage.is-hero .update-stage-day { font-size: clamp(82px, 11vw, 136px); }
/* „von 30“ groß neben der Tageszahl, damit „Tag 3 von 30“ weiter in die Karte reicht. */
.update-stage.is-hero .update-stage-of { padding-bottom: 6px; font-size: clamp(15px, 4vw, 22px); font-weight: 700; letter-spacing: .04em; }
.update-stage.is-hero .update-stage-total { padding-bottom: 2px; font-size: clamp(30px, 7.5vw, 48px); font-weight: 900; letter-spacing: -.04em; color: var(--text); }
.update-stage.is-hero.is-generic strong { font-size: clamp(44px, 7vw, 88px); line-height: .9; text-transform: uppercase; }

/* Textkarte im Verlauf je Bildschirmbreite */
@media (width <= 760px) {
    .text-card.is-stream { min-height: 420px; border-block: 1px solid var(--line); }
    .text-card.is-stream .text-card-layout { grid-template-rows: auto minmax(170px, 1fr) auto; gap: 24px; padding: 30px 24px 30px 34px; }
    .text-card.is-stream .update-stage.is-hero .update-stage-day { font-size: clamp(78px, 23vw, 112px); }
    .text-card-more { margin-top: 8px; }
}
@media (760px < width < 1100px) {
    .text-card.is-stream { min-height: clamp(650px, 74vh, 780px); border: 1px solid var(--line); }
    .text-card.is-stream .text-card-layout {
        grid-template-rows: auto minmax(170px, 1fr) auto;
        gap: clamp(24px, 3.5vh, 38px);
        padding: clamp(34px, 4.5vw, 54px) clamp(32px, 5vw, 62px) clamp(36px, 4.8vw, 58px) clamp(42px, 5.8vw, 72px);
    }
}
/* Ab 1100 px steht die Textkarte links in der Karte, Kommentare rechts daneben (Strich dazwischen, wenn es Kommentare gibt). */
@media (width >= 1100px) {
    .text-card.is-stream { height: 100%; }
    .update-card:not(:has(.inline-comments.is-empty)) .text-card.is-stream { border-right: 1px solid var(--line); }
    .text-card.is-stream .text-card-layout {
        grid-template-rows: auto minmax(190px, 1fr) auto;
        gap: clamp(24px, 3.5vh, 38px);
        padding: clamp(38px, 4.4vw, 58px) clamp(38px, 5vw, 66px) clamp(40px, 4.8vw, 62px) clamp(48px, 5.8vw, 76px);
    }
}
@media (width > 760px) {
    .text-card.is-stream .update-stage.is-hero .update-stage-day { font-size: clamp(82px, 11vw, 136px); }
    .text-card-more { margin-top: 10px; }
}

/* ================================================================ Kleines Textplakat (drei Spalten) */

.text-poster {
    position: relative;
    display: flex;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-style: solid;
    border-width: 1px;
    border-radius: var(--radius-photo);
    color: var(--text);
    background: var(--card);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.text-poster:not(:hover) { border-color: var(--text); }
.text-poster:hover { border-color: var(--accent); box-shadow: 0 14px 34px rgba(0, 0, 0, .12); }
.text-poster::after { content: ""; position: absolute; top: 16px; right: 16px; width: 16px; height: 16px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.text-poster-accent { position: absolute; inset: 0 auto 0 0; width: 10px; background: var(--accent); }
.text-poster-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-width: 0; padding: 20px 20px 22px 28px; }
.text-poster-kicker { margin: 0 0 10px; font-size: 8.5px; background: var(--card); }
.text-poster-title {
    display: -webkit-box;
    width: 100%;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-weight: 900;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
}
/* Schriftgröße nach Titellänge (components/update-card.js: is-long ab 29, is-very-long ab 49 Zeichen). */
.text-poster-title:not(.is-long, .is-very-long) { font-size: clamp(19px, 2vw, 27px); line-height: 1.05; }
.text-poster-title:is(.is-long, .is-very-long) { font-size: clamp(17px, 1.75vw, 23px); line-height: 1.08; }
.update-stage.is-poster { margin: auto 0 13px; }
.update-stage.is-poster .update-stage-day { font-size: clamp(52px, 6vw, 76px); }
.update-stage.is-poster :is(.update-stage-of, .update-stage-total) { padding-bottom: 3px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.text-poster-rule { width: 100%; height: 1px; margin: 0 0 13px; background: var(--text); }
.text-poster-text-wrap { width: min(100%, 66ch); min-width: 0; }
.text-poster-text {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: clamp(16px, 1.55vw, 19px);
    font-weight: 500;
    line-height: 1.55;
    overflow-wrap: anywhere;
    color: var(--copy);
}

/* ================================================================ Ruhige Karte (.is-stream)

   Die große Karte im Verlauf einer Challenge und in Listen: Kopf ohne
   Rahmen, Fotos mit runden Ecken, darunter eine Zeile flacher Knöpfe –
   links Gefällt mir, Kommentar, Speichern; rechts Teilen und Eigenes. */

.update-card.is-stream.is-owner-update::before { display: none; }
.update-card.is-stream .update-meta { font-family: var(--font); font-size: 13px; letter-spacing: 0; text-transform: none; }
.update-card.is-stream .update-card-head { margin: 0 0 12px; padding: 0; }
.update-card.is-stream .update-card-gallery .gallery-strip { border-radius: 16px; }

.update-card.is-stream .update-card-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    margin: 6px -10px 0;
    padding: 0;
    border: 0;
    background: none;
}
.update-card.is-stream .update-card-actions-primary,
.update-card.is-stream .update-card-actions-secondary { display: flex; align-items: center; gap: 2px; width: auto; }
.update-card.is-stream .update-card-actions-secondary { margin-left: auto; }
.update-card.is-stream .update-card-actions .icon-button,
.update-card.is-stream .update-card-actions .favorite-button {
    width: auto;
    min-width: 44px;
    min-height: 44px;
    gap: 7px;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    color: var(--copy);
    background: none;
    box-shadow: none;
}
.update-card.is-stream .update-card-actions .icon-button:hover,
.update-card.is-stream .update-card-actions .favorite-button:hover { color: var(--text); background: var(--soft); }
.update-card.is-stream .update-card-actions em { font-size: 15px; font-weight: 600; }
.update-card.is-stream .update-card-actions .icon-button.is-liked { color: var(--like); }
.update-card.is-stream .update-card-actions .icon-button.is-liked svg { fill: currentColor; }
.update-card.is-stream .update-card-actions .icon-button.is-liked em { color: inherit; }
.update-card.is-stream .update-card-actions .favorite-button.is-active { color: var(--accent); }

/* ---- Updates in Listen (Aktuelles, Entdecken, Favoriten, Meine Inhalte):
   wie im Verlauf einer Challenge – ohne Kasten, eine Aktionszeile, im Kopf
   der Link zur Challenge. */

.update-grid.layout-full { gap: 0; }
.update-grid > .update-card.is-stream { padding: 20px 0 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.update-grid > .update-card.is-stream:first-child { padding-top: 6px; }
.update-grid > .update-card.is-stream:last-child { border-bottom: 0; }
@media (min-width: 1100px) {
    .update-grid > .update-card.is-stream:first-child { padding-top: 0; }
}
.update-challenge-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    min-height: 26px;
    margin-top: 1px;
    padding: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    color: var(--accent);
}
.update-challenge-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.update-challenge-link svg { flex: none; width: 15px; height: 15px; stroke-width: 2.2; }
.update-challenge-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.update-card.is-feed .update-owner-copy { min-width: 0; }
/* Außerhalb der Challenge: der grüne Challenge-Name steht unter Person und Marke über die
   ganze Breite (eingerückt bis zum Namen), damit die Marke rechts ihn nicht abschneidet. */
.update-card-head:has(> .update-challenge-link) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; row-gap: 0; }
.update-card-head > .update-challenge-link { grid-column: 1 / -1; justify-self: start; max-width: calc(100% - var(--update-link-indent, 44px)); margin: -2px 0 0 var(--update-link-indent, 44px); }

/* ======================================================================== comments */
/* ==========================================================================
   Kommentare: aufklappbarer Bereich, Eingabefeld, Liste mit Antworten.
   Antworten werden eingerückt; jeder Kommentar behält eine lesbare Breite,
   tiefe Bäume lassen sich deshalb seitlich scrollen.
   ========================================================================== */

/* ---------------------------------------------------------------- Bereich */

.comment-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.comment-panel-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 0 2px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.comment-panel-summary::-webkit-details-marker { display: none; }
.comment-panel-summary > svg { width: 18px; height: 18px; margin-left: auto; stroke-width: 1.8; transition: transform .16s ease; }
.comment-panel[open] > .comment-panel-summary > svg { transform: rotate(180deg); }
.comment-panel .comment-count { padding-left: 2px; font-family: var(--font-data); font-size: 11px; font-weight: 400; color: var(--muted); }
.comment-panel-body { padding-top: 10px; }

/* Eigene Karte (Challenge-Seite): Überschrift mittig mit Symbol */
.comment-panel.is-card { margin-top: 12px; padding: 0; border: 1px solid var(--line-cool); border-radius: var(--radius-control); background: var(--card); }
.comment-panel.is-card > .comment-panel-summary { position: relative; justify-content: center; gap: 8px; padding: 14px 38px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.comment-panel.is-card > .comment-panel-summary > svg { position: absolute; right: 14px; margin: 0; }
.comment-panel.is-card .comment-count { padding: 0; font-family: var(--font); font-size: 15px; font-weight: 400; }
.comment-panel-icon { display: flex; }
.comment-panel-icon svg { width: 24px; height: 24px; stroke-width: 1.8; }
.comment-panel.is-card > .comment-panel-body { padding: 0 14px 14px; }

/* ---------------------------------------------------------------- Eingabe */

.comment-composer { display: grid; grid-template-columns: minmax(0, 1fr) 58px; gap: 8px; margin-bottom: 12px; padding-top: 10px; }
.comment-composer textarea {
    min-height: 88px;
    padding: 14px 18px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
    background: var(--input);
    resize: vertical;
}
.comment-composer textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.comment-composer .comment-send {
    display: flex;
    min-height: 44px;
    border-radius: var(--radius-control);
    color: var(--accent-ink);
    background: var(--accent-gradient);
    box-shadow: var(--accent-shadow), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.comment-composer .comment-send svg { width: 23px; height: 23px; stroke-width: 1.8; }
.comment-composer .comment-send:hover { background: var(--accent-gradient); }

/* ---------------------------------------------------------------- Liste */

.comment-list { min-width: 0; max-width: 100%; }
.comment-viewport { container-type: inline-size; max-width: 100%; padding-bottom: 8px; overflow: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.comment-viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.comment-canvas { width: 100%; min-width: 280px; }
.comment-thread { min-width: 280px; border-bottom: 1px solid var(--line); }
.comment-thread:last-child,
.comment-thread .comment-thread { border-bottom: 0; }
.comment-replies { margin-left: 20px; padding-left: 12px; border-left: 1px solid var(--line); }
.comment-replies > .comment-thread + .comment-thread { border-top: 1px solid var(--line); }
.empty-note { margin: 4px 2px; font-size: 13px; color: var(--muted); }

.comment {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    width: clamp(280px, 100cqw, 640px);
    padding: 12px 0;
}
.comment-avatar.avatar { --avatar-size: 34px; margin-top: 1px; font-size: 10px; }
.comment-body { min-width: 0; }
.comment-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font-size: 12.5px; }
.comment-head strong { font-weight: 700; }
.comment-meta { display: flex; align-items: baseline; gap: 6px; margin-left: auto; font-size: 10px; line-height: 1.25; color: var(--muted); }
.comment-meta .meta { font-size: 10px; letter-spacing: .055em; text-transform: uppercase; }
.comment-text { margin: 4px 0; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--copy); }
.comment-actions { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.comment-actions .text-link { font-size: 11.5px; font-weight: 700; color: var(--accent); }
.comment-like {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 8px;
    font-family: var(--font-data);
    font-size: 10px;
    line-height: 1;
    color: var(--text);
}
.comment-like:first-child { margin-left: 0; }
.comment-like-heart { display: grid; place-items: center; width: 24px; height: 24px; color: var(--muted); transition: transform .16s ease, color .16s ease; }
.comment-like-heart svg { width: 24px; height: 24px; stroke-width: 2; }
.comment-like:hover .comment-like-heart { color: var(--like); transform: scale(1.06); }
.comment-like:active { transform: scale(.96); }
.comment-like.is-active .comment-like-heart { color: var(--like); }
.comment-like.is-active .comment-like-heart svg { fill: currentColor; }
.comment-tool { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: var(--muted); opacity: .72; }
.comment-tool svg { width: 13px; height: 13px; stroke-width: 1.8; }
.comment-tool:hover { opacity: 1; color: var(--text); background: rgba(255, 255, 255, .06); }
.comment-tool[data-action="comment.delete"]:hover { color: var(--danger); }
.more-button.is-comment { width: 28px; height: 28px; }
.more-button.is-comment svg { width: 16px; height: 16px; }

.comment.is-editing .comment-text,
.comment.is-editing .comment-actions { display: none; }
.comment-edit { display: grid; gap: 8px; margin-top: 6px; }
.comment-edit textarea { min-height: 72px; font-size: 14px; }
.comment-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Kommentare in der Update-Karte (Computer): etwas kleiner */
.inline-comments .comment { grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; padding: 10px 0; }
.inline-comments .comment-avatar.avatar { --avatar-size: 28px; font-size: 9px; }

/* ======================================================================== sheets */
/* ==========================================================================
   Inhalte der kleinen Fenster: Melden/Blockieren, Teilen, Einstieg in eine
   laufende Challenge.
   ========================================================================== */

/* ---------------------------------------------------------------- Melden */

/* Menü „⋯“ Melden oder blockieren (features/moderation.js, openMenu): oben worum es geht,
   darunter zwei Gruppen auf einer gemeinsamen Fläche – Melden, getrennt davon Blockieren.
   Jede Zeile: Symbol auf eigener Kachel, Aktion fett, darunter ein Satz zur Folge. */
.moderation-sheet { gap: 12px; }
.moderation-sheet-head { display: grid; gap: 2px; padding: 2px 4px 4px; }
.moderation-sheet-head h2 { margin: 0; font-size: 19px; overflow-wrap: anywhere; }
.moderation-sheet-head p { font-size: 14px; color: var(--muted); }
.moderation-group { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.moderation-option {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 64px;
    padding: 11px 14px;
    text-align: left;
    color: var(--text);
    transition: background-color .15s ease;
}
.moderation-option + .moderation-option { border-top: 1px solid var(--hairline); }
.moderation-option:hover { background: var(--soft-2); }
.moderation-option:active { background: var(--line-strong); }
.moderation-option:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 16px; }
.moderation-option-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--text-soft); background: var(--soft-2); }
.moderation-option-icon svg { width: 21px; height: 21px; }
.moderation-option-copy { display: grid; gap: 3px; min-width: 0; }
.moderation-option-copy strong { font-size: 15px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.moderation-option-copy small { font-size: 13px; line-height: 1.35; color: var(--muted); }
.moderation-option.is-danger strong { color: var(--danger); }
.moderation-option.is-danger .moderation-option-icon { color: var(--danger); background: var(--danger-soft); }
@media (prefers-reduced-motion: reduce) { .moderation-option { transition: none; } }
.moderation-reasons { display: grid; gap: 6px; }
.moderation-reason {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 15px;
    cursor: pointer;
}
.moderation-reason input { width: 18px; height: 18px; accent-color: var(--accent); }
.moderation-reason:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.moderation-excerpt { margin: 0; padding: 8px 12px; border-left: 3px solid var(--accent); border-radius: 8px; background: var(--soft); font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Wer mir schreiben darf: Hinweis statt Eingabefeld, Listen in den Einstellungen. */
.contact-bar { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.contact-bar p { flex: 1 1 220px; margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--copy); }
.contact-bar.is-closed p { color: var(--muted); }
.inbox-reply.is-closed { align-items: center; }
#dmComposeBody .contact-bar { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.acc-toggle-row { cursor: pointer; }
.contact-sheet { gap: 14px; }
.contact-state { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.contact-state.is-private { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }
.contact-state p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--copy); }
.contact-state strong { display: block; color: var(--text); font-size: 15.5px; }
.contact-state-icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--text); background: var(--card); }
.contact-state.is-private .contact-state-icon { color: var(--accent-ink); background: var(--accent); }
.contact-state-icon svg { width: 18px; height: 18px; }
.contact-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--soft); }
.contact-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 6px; border-radius: 10px; font-size: 14.5px; font-weight: 700; color: var(--muted); }
.contact-tab[aria-selected="true"] { color: var(--text); background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.contact-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.contact-count { min-width: 20px; padding: 1px 6px; border-radius: 999px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); background: color-mix(in srgb, var(--text) 10%, transparent); }
.contact-tab[aria-selected="true"] .contact-count { color: var(--accent-ink); background: var(--accent); }
.contact-panel { display: grid; gap: 10px; }
.contact-panel h3 { margin: 0; font-size: 16px; }
.contact-intro { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.contact-people { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.contact-person { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; }
.contact-who { display: grid; flex: 1 1 90px; min-width: 0; }
.contact-who strong { font-size: 15px; overflow-wrap: anywhere; }
.contact-who small { font-size: 13px; color: var(--muted); }
.contact-actions { display: flex; gap: 6px; margin-left: auto; }
.contact-person.is-requests .contact-actions { display: grid; flex: 1 1 100%; grid-template-columns: 1fr 1fr; }
.contact-person.is-requests .contact-actions .button { min-height: 40px; font-size: 13.5px; }
.contact-empty { margin: 0; padding: 18px 16px; border: 1px dashed var(--line); border-radius: 14px; font-size: 14px; line-height: 1.5; color: var(--muted); text-align: center; }
.contact-tip { margin: 0; }
/* Zeilen nie zusammendrücken: lieber scrollt das Formular. */
.moderation-report { grid-auto-rows: max-content; }
.moderation-text { display: grid; gap: 6px; margin-top: 4px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.moderation-text em { font-style: normal; font-weight: 500; }
.moderation-text .field { min-height: 72px; }
.moderation-also-block { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.blocked-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.blocked-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 4px 0 12px; border: 1px solid var(--line); border-radius: 12px; }

/* ---------------------------------------------------------------- Teilen */

.share-sheet { gap: 16px; padding: 18px 16px max(18px, env(safe-area-inset-bottom)); }
.share-preview { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.share-thumb { display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.share-thumb img { width: 100%; height: 100%; object-fit: cover; }
.share-thumb svg { width: 30px; height: 30px; }
.share-preview-copy { display: grid; gap: 2px; min-width: 0; }
.share-preview-copy small { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--muted); }
.share-preview-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 800; line-height: 1.25; }
.share-preview-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--muted); }
.share-targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 8px; }
.share-target { display: grid; justify-items: center; gap: 7px; min-width: 0; padding: 4px 2px; border-radius: 14px; }
.share-target-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--soft);
    transition: transform .15s ease;
}
.share-target:active .share-target-icon { transform: scale(.94); }
.share-target-icon svg { width: 25px; height: 25px; }
.share-target.is-whatsapp .share-target-icon { border-color: #1f9d55; color: #fff; background: #1f9d55; }
.share-target.is-telegram .share-target-icon { border-color: #2a8bd6; color: #fff; background: #2a8bd6; }
.share-target.is-facebook .share-target-icon { border-color: #3b62c4; color: #fff; background: #3b62c4; }
.share-target.is-more .share-target-icon svg { fill: currentColor; stroke: none; }
.share-target-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 1.2; }
.share-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.share-link input {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    font: 500 14px/1 var(--font);
    text-overflow: ellipsis;
    color: var(--muted);
    background: var(--soft);
}
.share-link input:focus { border-color: var(--accent); color: var(--text); outline: none; }
.share-copy {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 48px;
    padding: 0 16px;
    border-radius: var(--radius-control);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    color: #0b0d10;
    background: var(--accent);
}
.share-copy svg { width: 18px; height: 18px; stroke-width: 2; }
.share-copy.is-done { background: #34d399; }
.share-sheet .share-note { margin: -4px 0 0; font-size: 12.5px; line-height: 1.4; text-align: center; color: var(--muted); }

/* ---------------------------------------------------------------- Einstieg in eine laufende Challenge */

.join-late { gap: 14px; padding: 18px 16px max(16px, env(safe-area-inset-bottom)); }
.join-late-meter { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.join-late-numbers { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.join-late-day { font-size: 34px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent); }
.join-late-total { font-size: 15px; font-weight: 700; line-height: 1.2; }
.join-late-tag { margin-left: auto; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--muted); background: color-mix(in srgb, var(--text) 10%, transparent); }
.join-late-bar { position: relative; height: 8px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--text) 12%, transparent); }
.join-late-bar > span { position: absolute; inset: 0 auto 0 0; width: var(--progress, 0%); min-width: 8px; border-radius: inherit; background: var(--accent); }
.join-late-scale { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; line-height: 1; color: var(--muted); }
.join-late.is-late .join-late-day { color: #f59e0b; }
.join-late.is-late .join-late-bar > span { background: linear-gradient(90deg, var(--accent), #f59e0b); }
.join-late.is-late .join-late-tag { color: #f5b84a; background: rgba(245, 158, 11, .16); }
.join-late .join-late-lead { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--text); }
.join-late-lead strong { font-weight: 800; }
.join-late .join-late-hint { margin-top: -6px; font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--muted); }
.join-late-choices { display: grid; gap: 8px; }
.join-late-choice {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 10px 14px 10px 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    text-align: left;
    background: var(--soft);
}
.join-late-choice.is-primary { border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); background: color-mix(in srgb, var(--accent) 12%, var(--soft)); }
.join-late-choice-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.join-late-choice.is-primary .join-late-choice-icon { color: #0b0d10; background: var(--accent); }
.join-late-choice-icon svg { width: 21px; height: 21px; stroke-width: 2; }
.join-late-choice-copy { display: grid; gap: 3px; min-width: 0; }
.join-late-choice-copy strong { font-size: 15px; font-weight: 800; line-height: 1.25; }
.join-late-choice-copy small { font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--muted); }
.join-late-cancel { justify-self: center; min-height: 40px; padding: 0 16px; font-size: 14px; font-weight: 700; color: var(--muted); }

/* ======================================================================== final-statement */
/* ==========================================================================
   Abschluss-Statement beendeter Challenges: Ergebnis-Schild, Zeile in
   Karten, Abschnitt auf der Challenge-Seite und die Fenster zum Lesen und
   Schreiben.
   ========================================================================== */

.outcome-icon { width: 16px; height: 16px; flex: none; stroke-width: 2.2; }
.outcome-icon .is-filled { fill: currentColor; stroke: none; }

.outcome-badge {
    --tone: var(--outcome-achieved);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--tone);
    background: color-mix(in srgb, var(--tone) 12%, transparent);
}
.outcome-badge.is-partial { --tone: var(--outcome-partial); }
.outcome-badge.is-missed { --tone: var(--outcome-missed); }
.outcome-badge.is-compact { padding: 4px 9px 4px 7px; font-size: 12px; }

/* Zeile in Karten */
.outcome-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.outcome-missing { font-size: 13px; color: var(--muted); }
.outcome-read {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding: 0 4px 0 10px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: var(--text);
}
.outcome-read svg { width: 16px; height: 16px; stroke-width: 2; color: var(--muted); }
.outcome-read:hover { background: var(--soft); }

/* Abschnitt auf der Challenge-Seite */
.statement-panel {
    --tone: var(--accent);
    display: grid;
    gap: 12px;
    margin: 18px 0 0;
    padding: 18px;
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--tone);
    border-radius: 16px;
    background: var(--card);
}
.statement-panel.is-achieved { --tone: var(--outcome-achieved); }
.statement-panel.is-partial { --tone: var(--outcome-partial); }
.statement-panel.is-missed { --tone: var(--outcome-missed); }
.statement-panel.is-missing { background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--card); }
.statement-head { display: grid; gap: 6px; }
.statement-kicker { font-family: var(--font-data); font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.statement-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.statement-panel:not(.is-missing) .statement-head h3 { color: var(--tone); }
.statement-head h3 .outcome-icon { width: 20px; height: 20px; }
.statement-lead { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.statement-excerpt {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 15px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    color: var(--text);
}
.statement-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.statement-actions .button,
.statement-panel > .button { justify-self: start; min-height: 44px; }

/* Fenster */
.statement-card {
    --tone: var(--accent);
    display: grid;
    gap: 16px;
    width: min(520px, 100%);
    padding: 22px;
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    color: var(--text);
    background: var(--card);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
.statement-card.is-achieved { --tone: var(--outcome-achieved); border-top: 3px solid var(--tone); }
.statement-card.is-partial { --tone: var(--outcome-partial); border-top: 3px solid var(--tone); }
.statement-card.is-missed { --tone: var(--outcome-missed); border-top: 3px solid var(--tone); }
.statement-card-head { display: grid; justify-items: start; gap: 8px; }
.statement-card-head h2 { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; }
.statement-card-lead { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.statement-card-text { max-height: min(52vh, 460px); overflow-y: auto; font-size: 15.5px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.statement-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.statement-card-foot small { font-size: 12.5px; color: var(--muted); }
.statement-card-foot .button,
.statement-card-actions > .button { min-height: 46px; }
.statement-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.outcome-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.outcome-choice {
    --tone: var(--outcome-achieved);
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    min-height: 92px;
    padding: 14px 8px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    text-align: center;
    color: var(--muted);
    background: var(--input);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.outcome-choice.is-partial { --tone: var(--outcome-partial); }
.outcome-choice.is-missed { --tone: var(--outcome-missed); }
.outcome-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.outcome-choice-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--soft); }
.outcome-choice-mark .outcome-icon { width: 20px; height: 20px; }
.outcome-choice-label { font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--text); }
.outcome-choice:has(input:checked) { border-color: var(--tone); color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.outcome-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.statement-field { display: grid; gap: 8px; }
.statement-field > span { font-size: 13px; font-weight: 700; line-height: 1.2; }
.statement-field textarea { width: 100%; min-height: 120px; resize: vertical; }
.statement-count { justify-self: end; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }

@media (max-width: 420px) {
    .statement-card { padding: 18px; }
    .outcome-choice { min-height: 86px; padding: 12px 6px 10px; }
    .outcome-choice-label { font-size: 12px; }
}

/* In der dunklen Karte (Entdecken) sitzt die Zeile direkt unter dem Balken */

/* ======================================================================== orb */
/* ==========================================================================
   Leuchtender Ring: Lade-Animation beim Posten und der kurze Wechsel
   zwischen Verläufen („Wechseln zu @name“). Phasen am .orb-scene:
   prepare → upload → saving → done. Fortschritt: --orb-progress (0 … 1).
   ========================================================================== */

.posting-dialog { background: transparent; }
.posting-dialog::backdrop { background: rgba(5, 8, 12, .64); backdrop-filter: blur(6px); animation: orb-fade-in .45s ease-out both; }
.is-posting,
.is-posting body { overflow: hidden; }

.orb-scene {
    --orb-progress: 0;
    --orb-accent: var(--accent-2);
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 24px 18px;
    overflow: hidden;
    color: #f4f7fb;
    animation: orb-fade-in .45s ease-out both;
}
.orb-scene.is-leaving { animation: orb-fade-out .42s ease-in both; }

/* Weiche Farbflächen, die langsam treiben */
.orb-blob { position: absolute; width: 72vmax; height: 72vmax; border-radius: 50%; opacity: .3; pointer-events: none; will-change: transform; }
.orb-blob.is-a { top: -34vmax; left: -30vmax; background: radial-gradient(circle, rgba(163, 230, 53, .9) 0%, rgba(163, 230, 53, .25) 35%, transparent 65%); animation: orb-drift-a 9s ease-in-out infinite alternate; }
.orb-blob.is-b { right: -34vmax; bottom: -38vmax; background: radial-gradient(circle, rgba(139, 124, 246, .9) 0%, rgba(139, 124, 246, .25) 35%, transparent 65%); animation: orb-drift-b 11s ease-in-out infinite alternate; }

.orb-card {
    position: relative;
    z-index: 1;
    width: min(360px, 100%);
    padding: 30px 24px 22px;
    border: 1px solid rgba(184, 242, 90, .22);
    border-radius: 28px;
    text-align: center;
    background: linear-gradient(160deg, rgba(22, 28, 36, .9), rgba(10, 13, 18, .94));
    box-shadow: 0 30px 90px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
    outline: none;
    animation: orb-card-in .6s cubic-bezier(.16, 1, .3, 1) both;
}

/* Ring */
.orb { position: relative; width: 148px; height: 148px; margin: 0 auto 20px; }
.orb-halo { position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(184, 242, 90, .32), rgba(184, 242, 90, 0) 68%); animation: orb-breathe 2.4s ease-in-out infinite; }
.orb-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.orb-ring circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.orb-track { stroke: rgba(255, 255, 255, .08); }
.orb-arc { stroke: url(#orbGradient); stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--orb-progress) * 100); transition: stroke-dashoffset .45s var(--ease); }
/* Leuchtender „Komet“, solange keine Prozentzahl bekannt ist */
.orb-sweep { animation: orb-spin-ring 1.25s cubic-bezier(.55, .15, .45, .85) infinite; transition: opacity .3s ease; }
.orb-sweep circle { stroke: #eaffc4; stroke-dasharray: 16 84; }
.orb-scene[data-phase="upload"] .orb-sweep,
.orb-scene[data-phase="done"] .orb-sweep { opacity: 0; animation-play-state: paused; }
.orb-scene[data-phase="saving"] .orb-sweep { opacity: .75; animation-duration: .9s; }
.orb-scene[data-phase="saving"] .orb-sweep circle { stroke-dasharray: 8 92; }

/* Drei kleine Punkte kreisen um den Ring */
.orb-orbit { position: absolute; inset: -6px; animation: orb-spin 3.2s linear infinite; }
.orb-orbit i { position: absolute; top: 0; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--orb-accent); box-shadow: 0 0 10px var(--orb-accent); }
.orb-orbit i:nth-child(2) { width: 5px; height: 5px; opacity: .65; transform: rotate(120deg); transform-origin: 3.5px 80px; }
.orb-orbit i:nth-child(3) { width: 4px; height: 4px; opacity: .4; transform: rotate(240deg); transform-origin: 3.5px 80px; }
.orb-scene[data-phase="done"] .orb-orbit { opacity: 0; transition: opacity .3s ease; }

/* Mitte: Vorschaubild, Kürzel oder Pfeil; am Ende ein Haken */
.orb-core { position: absolute; inset: 22px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #1d2530, #0d1117); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.orb-core > * { grid-area: 1 / 1; }
.orb-thumb { width: 100%; height: 100%; object-fit: cover; animation: orb-thumb-in .7s .1s cubic-bezier(.16, 1, .3, 1) both; transition: filter .45s ease, transform .45s ease, opacity .45s ease; }
.orb-letters { display: grid; place-items: center; width: 100%; height: 100%; font-size: 28px; font-weight: 900; letter-spacing: -.03em; color: var(--accent-ink); background: linear-gradient(135deg, #d8ff8a, #a3e635); animation: orb-thumb-in .6s .05s cubic-bezier(.16, 1, .3, 1) both; }
.orb-icon { width: 44px; height: 44px; fill: none; stroke: var(--orb-accent); stroke-width: 2; animation: orb-float 1.6s ease-in-out infinite; transition: opacity .3s ease, transform .3s ease; }
.orb-check { position: relative; z-index: 1; width: 54px; height: 54px; fill: none; stroke: #0b0f14; stroke-width: 2.6; opacity: 0; }
.orb-check path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.orb-scene[data-phase="done"] .orb-core { background: radial-gradient(circle at 50% 35%, #d8ff8a, #a3e635 70%); animation: orb-pop .55s cubic-bezier(.16, 1.4, .3, 1) both; }
.orb-scene[data-phase="done"] .orb-thumb { opacity: .18; filter: blur(3px) saturate(.6); transform: scale(1.08); }
.orb-scene[data-phase="done"] .orb-icon { opacity: 0; transform: translateY(-10px); }
.orb-scene[data-phase="done"] .orb-check { opacity: 1; }
.orb-scene[data-phase="done"] .orb-check path { animation: orb-draw .5s .12s cubic-bezier(.65, 0, .35, 1) forwards; }
.orb-scene[data-phase="done"] .orb-halo { animation: orb-shock .9s ease-out both; }

/* Funken beim Erfolg */
.orb-sparks { position: absolute; inset: 0; pointer-events: none; }
.orb-sparks i { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; opacity: 0; background: var(--orb-accent); transform: rotate(var(--a)); }
.orb-sparks i:nth-child(3n) { width: 4px; height: 4px; background: #fff; }
.orb-sparks i:nth-child(4n) { background: #a99cff; }
.orb-scene[data-phase="done"] .orb-sparks i { animation: orb-spark .85s calc(.1s + var(--d)) cubic-bezier(.16, 1, .3, 1) both; }

/* Texte */
.orb-kicker { margin: 0 0 6px; font-family: var(--font-data); font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: #9aa5b4; }
.orb-title { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; overflow-wrap: anywhere; color: #fff; }
.orb-stage { min-height: 1.4em; margin: 8px 0 0; font-size: 15px; line-height: 1.4; color: #c7d0dc; }
.orb-stage.is-swap { animation: orb-text-in .4s ease-out both; }
.orb-scene[data-phase="done"] .orb-stage { font-weight: 700; color: var(--orb-accent); }
.orb-meter { position: relative; width: 78%; height: 4px; margin: 18px auto 0; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.orb-meter span { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #d8ff8a, #a3e635, #34d399); transform: scaleX(var(--orb-progress)); transform-origin: left center; transition: transform .45s var(--ease); }
.orb-meter::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; opacity: 0; background: linear-gradient(90deg, transparent, rgba(216, 255, 138, .9), transparent); }
.orb-scene[data-phase="prepare"] .orb-meter::after,
.orb-scene[data-phase="saving"] .orb-meter::after { opacity: 1; animation: orb-shimmer 1.3s ease-in-out infinite; }
.orb-percent { min-height: 1.2em; margin: 8px 0 0; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #9aa5b4; opacity: 0; transition: opacity .3s ease; }
.orb-scene[data-phase="upload"] .orb-percent,
.orb-scene[data-phase="saving"] .orb-percent { opacity: 1; }
.orb-hint { margin: 14px 0 0; font-size: 12.5px; color: #7f8a99; }
.orb-scene[data-phase="done"] .orb-hint { opacity: 0; transition: opacity .3s ease; }



/* Weniger Bewegung gewünscht */
.orb-scene.is-reduced,
.orb-scene.is-reduced * { animation-duration: .01ms; animation-iteration-count: 1; }
.orb-scene.is-reduced .orb-sweep,
.orb-scene.is-reduced .orb-orbit,
.orb-scene.is-reduced .orb-blob { display: none; }
@media (prefers-reduced-motion: reduce) { .posting-dialog::backdrop { animation: none; } }

@keyframes orb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes orb-fade-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.98); } }
@keyframes orb-card-in { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes orb-spin-ring { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes orb-breathe { 0%, 100% { opacity: .65; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes orb-float { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-4px); } }
@keyframes orb-thumb-in { from { opacity: 0; filter: blur(6px); transform: scale(1.18); } to { opacity: 1; filter: none; transform: none; } }
@keyframes orb-draw { to { stroke-dashoffset: 0; } }
@keyframes orb-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes orb-shock { 0% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.65); } }
@keyframes orb-spark { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-96px) scale(1); } }
@keyframes orb-text-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes orb-shimmer { 0% { transform: translate3d(-100%, 0, 0); } 100% { transform: translate3d(230%, 0, 0); } }
@keyframes orb-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(12vmax, 10vmax) scale(1.12); } }
@keyframes orb-drift-b { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-10vmax, -12vmax) scale(.95); } }

/* ======================================================================== media-forms */
/* ==========================================================================
   Formulare mit Bildern: Bildauswahl (Raster beim Erstellen, Zeilen beim
   Bearbeiten), Kamera-Knopf, „Gilt für“-Tagesauswahl, Update-Eingabe und
   die Bildbearbeitung.
   ========================================================================== */

/* ---------------------------------------------------------------- Bildauswahl */

.media-field { display: grid; gap: 16px; }
.file-drop-field { display: grid; gap: 7px; font-size: 13px; font-weight: 600; letter-spacing: .025em; color: var(--muted); }
.file-drop {
    display: grid;
    justify-items: center;
    gap: 7px;
    min-height: 154px;
    padding: 26px 18px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-card);
    text-align: center;
    letter-spacing: 0;
    color: var(--text);
    background: #0f1116;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}
.file-drop:hover,
.file-drop.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, #0f1116); }
.file-drop input { display: none; }
.file-drop-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--accent); background: var(--accent-soft); }
.file-drop-icon svg { width: 20px; height: 20px; stroke-width: 2; }
.file-drop-title { font-size: 15px; font-weight: 600; }
.file-drop-hint { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--muted); }

/* Kamera: nur auf Touch-Geräten und in der Android-App */
.camera-capture { display: none; }
.camera-capture-input { display: none; }
@media (pointer: coarse) { .camera-capture { display: block; } }
.is-android-app .camera-capture { display: block; }
.camera-capture-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    min-height: 82px;
    padding: 16px 18px;
    border: 1px solid var(--accent);
    text-align: left;
    color: var(--text);
    background: var(--accent-glow);
}
.camera-capture-button:hover { background: var(--accent-soft); }
.camera-capture-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; color: #0a0a0a; background: var(--accent); }
.camera-capture-icon svg { width: 23px; height: 23px; stroke-width: 1.8; }
.camera-capture-copy { display: grid; gap: 3px; min-width: 0; }
.camera-capture-copy strong { font-size: 15px; line-height: 1.2; }
.camera-capture-copy small { font-size: 11.5px; font-weight: 600; line-height: 1.35; color: var(--muted); }

.media-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.media-list-head > span { font-size: 12px; font-weight: 700; color: var(--muted); }
.media-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 220px)); gap: 12px; }
.media-list:has(.media-empty-note),
.media-field.is-rows .media-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.media-empty-note { margin: 0; font-size: 13px; color: var(--muted); }
.media-error { grid-column: 1 / -1; margin: 0; }

.media-item {
    padding: 7px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.media-item.is-dragging { opacity: .45; }
.media-item.is-drop-target { border-color: var(--accent); }
.media-item-thumb { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--soft); cursor: zoom-in; }
.media-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-item-index { position: absolute; top: 5px; left: 5px; padding: 2px 7px; font-size: 10px; font-weight: 800; color: #fff; background: rgba(15, 23, 42, .62); }
.media-item-main {
    position: absolute;
    bottom: 8px;
    left: 8px;
    max-width: calc(100% - 16px);
    overflow: hidden;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, .24);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
    color: #fff;
    background: rgba(10, 10, 12, .78);
    backdrop-filter: blur(8px);
}
.media-item-remove,
.media-item-move button {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    color: #fff;
    background: rgba(15, 23, 42, .64);
    backdrop-filter: blur(6px);
}
.media-item-remove { position: absolute; top: 5px; right: 5px; }
.media-item-move { position: absolute; bottom: 5px; left: 50%; display: flex; gap: 5px; transform: translateX(-50%); }
.media-item-move button:disabled { opacity: .35; }
.media-item-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 34px;
    margin-top: 7px;
    padding: 6px 10px;
    border: 1px solid var(--line-strong);
    font-size: 11px;
    font-weight: 700;
    background: var(--soft);
}
.media-item-edit svg { width: 16px; height: 16px; stroke-width: 1.8; }
.media-item-name { margin-top: 6px; overflow: hidden; font-size: 11px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.media-item-caption { width: 100%; min-height: 88px; margin-top: 10px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); font-size: 15px; color: var(--text); background: var(--input); resize: vertical; }

/* Zeilen beim Bearbeiten (im Beitrags-Editor: kantig wie der Editor) */
.media-field.is-rows { display: grid; gap: 12px; }
.media-field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.media-field-head > div { display: flex; align-items: center; gap: 9px; }
.media-field-head strong { font-size: 15px; }
.media-count { display: grid; place-items: center; min-width: 25px; height: 25px; font-size: 11px; color: var(--muted); background: var(--soft); }
.media-add { position: relative; min-height: 34px; padding: 7px 10px; cursor: pointer; }
.media-add svg { width: 16px; height: 16px; }
.media-row { display: grid; grid-template-columns: 154px minmax(0, 1fr); gap: 13px; padding: 10px; border: 1px solid var(--editor-line); background: var(--editor-row); }
.media-row-thumb { position: relative; min-height: 126px; overflow: hidden; background: var(--soft); }
.media-row-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-row-content { display: grid; align-content: start; gap: 10px; min-width: 0; }
.media-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.media-row-head > div:first-child { display: grid; gap: 3px; min-width: 0; }
.media-row-head strong { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.media-row-head small { font-size: 10.5px; color: var(--muted); }
.media-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.media-row-action { min-width: 30px; min-height: 30px; padding: 5px 8px; border: 1px solid var(--editor-line); font-size: 11px; line-height: 1; background: var(--soft); }
.media-row-action:hover:not(:disabled), .media-row-action:focus-visible { border-color: color-mix(in srgb, var(--accent) 55%, var(--editor-line)); color: var(--accent); background: var(--accent-soft); }
.media-row-action.is-danger:hover:not(:disabled), .media-row-action.is-danger:focus-visible { border-color: rgba(255, 95, 109, .44); color: var(--danger); background: rgba(255, 95, 109, .12); }
.media-row-action:disabled { opacity: .34; }
.media-row-caption { min-height: 82px; padding: 11px 12px; border: 1px solid var(--editor-line); border-radius: var(--radius-control); font-size: 15px; color: var(--text); background: var(--input); resize: vertical; }
.media-row .media-item-index { display: grid; place-items: center; top: 7px; left: 7px; min-width: 24px; height: 24px; padding: 0; background: rgba(0, 0, 0, .72); }
.media-row .media-item-main { left: 7px; bottom: 7px; border: 0; font-size: 9px; background: var(--accent-glow); }
.media-empty { display: grid; place-content: center; gap: 4px; min-height: 108px; border: 1px dashed var(--editor-line); text-align: center; font-size: 11px; color: var(--muted); }
.media-empty strong { font-size: 13px; color: var(--text); }
.media-help { margin: 0; font-size: 11px; line-height: 1.45; color: var(--muted); }

@media (max-width: 760px) {
    .media-field.is-rows .media-field-head { flex-direction: column; align-items: flex-start; }
    .media-add { justify-content: center; width: 100%; }
    .media-row { grid-template-columns: 92px minmax(0, 1fr); gap: 9px; }
    .media-row-thumb { min-height: 92px; }
}
@media (max-width: 430px) {
    .media-row { grid-template-columns: minmax(0, 1fr); }
    .media-row-thumb { aspect-ratio: 4 / 3; }
}

/* Großansicht eines gewählten Bildes */
.media-lightbox { background: rgba(4, 5, 8, .94); }
.media-lightbox-figure { position: relative; display: grid; place-items: center; width: 100%; height: 100%; margin: 0; padding: 24px; }
.media-lightbox-figure img { max-width: 100%; max-height: 100%; object-fit: contain; }
.media-lightbox-close { position: absolute; top: 16px; right: 16px; }

/* ---------------------------------------------------------------- „Gilt für“ */

.day-field { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 2px 0 14px; border: 0; border-bottom: 1px solid var(--line); }
.day-field-legend { display: grid; gap: 3px; margin-bottom: 10px; padding: 0; }
.day-field-legend strong { font-size: 12.5px; font-weight: 800; }
.day-field-legend span { font-size: 11.5px; font-weight: 500; line-height: 1.4; color: var(--muted); }
.day-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.day-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    min-height: 54px;
    padding: 9px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    text-align: left;
    background: var(--input);
}
.day-chip strong { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; line-height: 1.15; }
.day-chip small { font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--muted); }
.day-chip[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.day-chip[aria-checked="true"] small { color: var(--text); }
.day-chip-icon { display: grid; color: var(--accent); }
.day-chip-icon svg { width: 16px; height: 16px; stroke-width: 2; }
.day-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--copy); }
.day-note svg { width: 18px; height: 18px; flex: none; color: var(--accent); stroke-width: 1.8; }
.day-calendar { max-width: 340px; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--card); }
.day-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.day-calendar-head strong { font-size: 14px; }
.day-nav { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--soft); }
.day-nav svg { width: 18px; height: 18px; }
.day-nav:disabled { opacity: .3; }
.day-weekdays,
.day-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.day-weekdays span { font-size: 11px; font-weight: 700; color: var(--muted); }
.day-cell { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.day-cell:not(:disabled):hover { background: var(--soft); }
.day-cell:disabled { opacity: .28; }
.day-cell.is-today { box-shadow: inset 0 0 0 1px var(--line-strong); }
.day-cell.is-selected { font-weight: 800; color: var(--accent-ink); background: var(--accent); }

/* ---------------------------------------------------------------- Kalender (Tag wählen), Handy */

@media (max-width: 760px) {
    .day-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- Bildbearbeitung */

.image-editor-dialog { background: var(--editor-surface); }
.image-editor { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--editor-stage); }
.image-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 12px 16px; border-bottom: 1px solid var(--editor-line); background: var(--editor-head); }
.image-editor-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.image-editor-head h3 { margin: 2px 0 0; font-size: 19px; font-weight: 700; }
.image-editor-close { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--editor-line); border-radius: 50%; font-size: 18px; background: var(--soft); }
.image-editor-body { flex: 1; min-height: 0; overflow: hidden auto; }
.image-editor-stage { display: grid; place-items: center; min-height: 300px; padding: 16px; overflow: hidden; background: #050505; }
.image-editor-canvas { position: relative; width: var(--canvas-width, 320px); height: var(--canvas-height, 240px); max-width: 100%; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 50px rgba(0, 0, 0, .36); }
.image-editor-canvas canvas { display: block; width: 100%; height: 100%; }
.image-editor-canvas canvas.is-drawing { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }
.image-editor-canvas canvas.is-drawing[data-tool="move"] { cursor: grab; }
.image-editor-canvas canvas.is-dragging { cursor: grabbing; }
.image-editor-tools { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; padding: 14px 16px 2px; }
.image-editor-section { display: grid; align-content: start; gap: 12px; padding: 13px; border: 1px solid var(--editor-line); background: var(--editor-head); }
.image-editor-section-head { display: grid; gap: 2px; }
.image-editor-section-head strong { font-size: 13px; font-weight: 700; }
.image-editor-section-head span { font-size: 10px; color: var(--muted); }
.image-editor-aspects,
.image-editor-rotate,
.image-editor-modes,
.image-editor-history { display: flex; gap: 7px; }
.image-editor-rotate button { display: flex; flex: 1; align-items: center; justify-content: center; gap: 7px; line-height: 1; }
.image-editor-rotate span { font-size: 12px; }
.editor-option { min-height: 34px; padding: 7px 11px; border: 1px solid #30343f; font-size: 12px; background: #1d2028; }
.editor-option[aria-pressed="true"] { border-color: rgba(163, 230, 53, .34); color: var(--accent-ink); background: var(--accent); }
.image-editor-rotate .editor-option { font-size: 17px; }
.image-editor-history .editor-option { width: 36px; padding: 7px 0; font-size: 18px; }
.editor-option:disabled { opacity: .3; }
.image-editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.image-editor-settings { display: grid; gap: 12px; }
.image-editor-colors { display: grid; gap: 7px; font-size: 12px; }
.image-editor-colors > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.image-editor-colors button { width: 28px; height: 28px; border: 2px solid rgba(245, 247, 251, .18); border-radius: 50%; background: var(--swatch); }
.image-editor-colors button[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 2px var(--accent); }
.image-editor-custom-color { position: relative; width: 28px; height: 28px; border: 2px solid rgba(245, 247, 251, .18); background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.image-editor-custom-color input { position: absolute; inset: -8px; opacity: 0; cursor: pointer; }
.image-editor-range { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12px; }
.image-editor-range output { min-width: 38px; font-size: 10px; text-align: right; color: var(--muted); }
.image-editor-range input { width: 100%; accent-color: var(--accent); }
.image-editor-note { margin: 0; font-size: 11px; line-height: 1.45; color: var(--muted); }
.image-editor-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 16px 18px; }
.image-editor-actions .button { min-height: 42px; }

@media (max-width: 760px) {
    .image-editor-tools { grid-template-columns: minmax(0, 1fr); }
    .image-editor-toolbar { flex-wrap: wrap; }
}

/* ---- Große Bildauswahl (Update-Editor, Challenge erstellen): Auswahl über
   die ganze Breite, Vorschauen groß und im echten Seitenverhältnis –
   am Handy untereinander, ab 761 px in zwei Spalten. */
.media-field.is-large { gap: 12px; }
.media-field.is-large .file-drop { min-height: 120px; padding: 20px 16px; }
.media-field.is-large .media-list-head:has(.media-clear[hidden]) { display: none; }
.media-field.is-large .media-list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.media-field.is-large .media-item { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.media-field.is-large .media-item-thumb { aspect-ratio: auto; min-height: 160px; border-radius: var(--radius-photo); background: var(--media-bg); }
.media-field.is-large .media-item-thumb img { display: block; height: auto; max-height: 75vh; object-fit: contain; }
.media-field.is-large .media-item-index { top: 10px; left: 10px; padding: 3px 8px; border-radius: 6px; font-size: 11px; }
.media-field.is-large .media-item-main { bottom: 12px; left: 12px; border-radius: 6px; }
.media-field.is-large .media-item-remove { top: 10px; right: 10px; width: 36px; height: 36px; font-size: 16px; }
.media-field.is-large .media-item-move { bottom: 12px; left: auto; right: 12px; transform: none; }
.media-field.is-large .media-item-move button { width: 36px; height: 36px; font-size: 18px; }
.media-field.is-large .media-item-edit { min-height: 42px; margin-top: 8px; border-radius: var(--radius-button); font-size: 13px; }
.media-field.is-large .media-item-name { margin-top: 8px; font-size: 12px; color: var(--muted); }
.media-field.is-large .media-item-caption { min-height: 72px; margin-top: 8px; }
@media (min-width: 761px) {
    .media-field.is-large .media-list { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
}

/* ======================================================================== editor */
/* ==========================================================================
   Beitrags-Editor: eigene Challenge oder eigenes Update bearbeiten.
   Vollbild-Dialog mit Kopf, nummerierten Abschnitten und Aktionen am Ende.
   Kantige Abschnitte wie die Bildbearbeitung – beides sind Werkzeuge, keine Karten.
   ========================================================================== */

.editor-dialog,
.editor-dialog::backdrop { background: var(--editor-surface); }
.editor { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--editor-surface); }

.editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 70px;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
    border-bottom: 1px solid var(--editor-line);
    background: var(--editor-head);
}
.editor-head > div { display: grid; gap: 3px; min-width: 0; }
.editor-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.editor-head h2 { margin: 0; font-size: clamp(20px, 4vw, 27px); line-height: 1.08; letter-spacing: -.025em; }
.editor-close { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid var(--editor-line); border-radius: 50%; }
.editor-close svg { width: 19px; height: 19px; stroke-width: 1.8; }

.editor-body { flex: 1 1 auto; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; }
.editor-form { display: grid; gap: 14px; width: min(780px, 100%); margin: 0 auto; padding: 16px 16px max(28px, calc(env(safe-area-inset-bottom) + 18px)); }

/* Abschnitte */
.editor-section { display: grid; gap: 14px; padding: 15px; border: 1px solid var(--editor-line); background: var(--editor-row); }
.editor-section-head { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 10px; }
.editor-section-head > span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--editor-line));
    font-family: var(--font-data);
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
}
.editor-section-head > div { display: grid; gap: 3px; min-width: 0; }
.editor-section-head h3 { margin: 0; font-size: 16px; line-height: 1.2; }
.editor-section-head p { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); }

/* Felder: kantig, ruhig, gleiche Höhe */
.editor-fields { display: grid; gap: 13px; }
.editor-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.editor-field { display: grid; gap: 7px; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.editor-field small { font-size: 10.5px; font-weight: 500; }
.editor-help { font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--muted); }
.editor-form .field,
.editor-form .combobox-picker,
.editor-form .disclosure > summary {
    min-height: 46px;
    border-color: var(--editor-line);
    font-size: 15px;
    font-weight: 600;
    box-shadow: none;
}
.editor-form textarea.field { min-height: 112px; }
.editor-form .field:focus { outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent); outline-offset: 1px; border-color: var(--accent); box-shadow: none; }
.editor-form .disclosure > summary { padding: 11px 16px; color: var(--text); background: var(--input); }
.editor-form .disclosure-options { border-color: var(--editor-line); }
.editor-form .privacy-select-field { display: grid; gap: 7px; }

/* Aktionen */
.editor-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 2px; }
.editor-actions .button { min-height: 48px; }
.editor-delete { grid-column: 1 / -1; }

@media (max-width: 760px) {
    .editor-columns { grid-template-columns: minmax(0, 1fr); }
    .editor-form { padding-inline: 12px; }
    .editor-section { padding: 13px; }
}

/* ---------------------------------------------------------------- Update-Editor

   Eigene Bildschirmseite über die ganze Breite (features/update-composer.js):
   oben eine feste Leiste mit Schließen, Titel und „Leeren“, unten eine feste
   Leiste mit „Update eintragen“. Am Computer ab 1100 px links Text und
   Einstellungen, rechts die Bilder. Außerhalb des Dialogs ist der Editor
   ausgeblendet. */

body.is-composing { overflow: hidden; }
.dialog.composer-dialog[open] { display: block; overflow-y: auto; overscroll-behavior: contain; background: var(--page-b); }
.composer-dialog .update-composer {
    display: flex; flex-direction: column; width: 100%; max-width: none; min-height: 100%; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: var(--page-b); box-shadow: none;
}

/* Kopfleiste */
.composer-dialog .composer-head {
    position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; margin: 0;
    padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--line); background: rgba(10, 12, 16, .94); backdrop-filter: blur(12px);
}
.composer-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: var(--text); background: var(--soft); }
.composer-close svg { width: 20px; height: 20px; stroke-width: 2.2; }
.composer-close:hover { background: var(--soft-2); }
.composer-title { display: grid; flex: 1; gap: 1px; min-width: 0; }
.composer-kicker { overflow: hidden; font-size: 13px; letter-spacing: normal; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); }
.composer-title h2 { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
/* „Leeren“ steht oben rechts – nicht neben dem Hauptknopf, damit niemand aus Versehen leert. */
.composer-reset {
    flex: none; min-height: 44px; margin-left: auto; padding: 0 12px; border-radius: 12px;
    font-size: 14px; font-weight: 700; color: var(--copy);
}
.composer-reset:hover:not(:disabled) { color: var(--text); background: var(--soft); }
.composer-reset:disabled { opacity: .4; }

/* Inhalt */
.composer-dialog .composer-form {
    display: grid; flex: 1 0 auto; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 22px; width: 100%; min-width: 0;
    padding: 18px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}
.composer-dialog .composer-form > * { min-width: 0; }
.composer-main, .composer-media { display: grid; align-content: start; gap: 18px; min-width: 0; }
.composer-rules { margin: 0; padding: 12px 14px; border-radius: var(--radius-control); font-size: 13px; line-height: 1.45; color: var(--copy); background: var(--soft); }
.composer-text { display: grid; gap: 7px; }
.composer-label { display: flex; align-items: baseline; gap: 8px; }
.composer-label strong { font-size: 16px; font-weight: 800; letter-spacing: -.015em; }
.composer-label span { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.composer-text textarea { min-height: 160px; font-size: 16px; line-height: 1.5; resize: vertical; }
.composer-dialog .day-field { padding-bottom: 0; border-bottom: 0; }
.composer-notify { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.composer-notify > div { display: grid; gap: 3px; }
.composer-notify strong { font-size: 12.5px; font-weight: 800; }
.composer-notify span { font-size: 11.5px; font-weight: 500; line-height: 1.4; color: var(--muted); }
.composer-switch { position: relative; display: flex; flex: none; cursor: pointer; }
.composer-note p { margin: 0; color: var(--copy); }

/* Fußleiste mit dem einen Hauptknopf */
.composer-dialog .composer-footer {
    position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
    margin: 8px calc(-1 * max(16px, env(safe-area-inset-right))) 0 calc(-1 * max(16px, env(safe-area-inset-left)));
    padding: 12px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    border-top: 1px solid var(--line); background: rgba(10, 12, 16, .96); backdrop-filter: blur(12px);
}
.composer-footer .button { min-height: 52px; }
.composer-dialog .composer-submit { font-size: 16px; box-shadow: none; }
.is-keyboard-open .composer-dialog .composer-footer { position: static; }

@media (max-width: 760px) {
    .composer-notify { align-items: flex-start; gap: 12px; }
}
@media (min-width: 761px) {
    .composer-dialog .composer-head { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); }
    .composer-dialog .composer-form { gap: 28px 32px; padding: 26px 28px 0; }
    .composer-dialog .composer-footer { grid-template-columns: minmax(220px, 360px); justify-content: end; margin: 8px -28px 0; padding: 14px 28px; }
}
@media (min-width: 1100px) {
    .composer-dialog .composer-form { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .composer-dialog .composer-footer { grid-column: 1 / -1; }
    .composer-text textarea { min-height: 260px; }
}

/* ======================================================================== discover */
/* ==========================================================================
   Entdecken: kurzer Kopf mit Umschalter, immer sichtbare Suche und
   „Filter“, eine Zeile mit Anzahl und Reihenfolge, darunter die Ergebnisse.
   Filter und Reihenfolge stehen in einem Blatt, das von unten kommt.
   Gemeinsamer Seitenkopf auch für Aktuelles (.page-head).
   ========================================================================== */

.discover { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; width: 100%; max-width: 1040px; margin-inline: auto; padding-top: 6px; }
@media (max-width: 1099px) { .discover { max-width: 760px; } }
@media (max-width: 760px) { .discover { max-width: 100%; padding-top: 0; } }

/* ---------------------------------------------------------------- Kopf */

.discover-title,
.events-head h1 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; font-stretch: 112%; line-height: 1.1; letter-spacing: -.015em; }
.discover-title { margin: 0 0 4px; }
.events-head h1 { margin: 0; }

/* Mitlaufende Leiste (Umschalter, Filter): klebt unter der festen Kopfleiste,
   gleitet beim Runterscrollen weg und kommt beim Anhalten zurück
   (body.is-pagebar-hidden, gesteuert in views/shell.js). */
.discover-controls {
    position: sticky;
    top: calc(var(--topbar-height) - 1px);
    z-index: 90;
    display: grid;
    gap: 8px;
    margin: 0 -26px;
    padding: 10px 26px;
    background: rgba(10, 12, 16, .94);
    backdrop-filter: blur(14px);
    transition: top .28s var(--ease), box-shadow .2s ease;
}
body.is-pagebar-hidden .discover-controls { top: -120px; }
@media (max-width: 760px) { .discover-controls { margin: 0 -12px; padding: 8px 12px 10px; } }
@media (prefers-reduced-motion: reduce) { .discover-controls { transition: none; } }
.discover-controls-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.discover-tabs,
.events-kinds { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); box-shadow: none; }
.discover-tabs .segment,
.events-kinds button { flex: none; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--copy); background: none; box-shadow: none; }
.discover-tabs .segment.is-active,
.events-kinds button.is-active { color: var(--page-b); background: var(--text); box-shadow: none; }

.discover-search { display: grid; gap: 8px; min-width: 0; }
.discover-search-row { position: relative; }
.discover-query { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.discover-search .discover-search-row .field { width: 100%; min-height: 48px; padding: 0 44px 0 42px; border: 1px solid var(--line-strong); border-radius: 12px; font-size: 16px; background: var(--input); box-shadow: none; }
.discover-search .field:focus { border-color: var(--accent); outline: none; }
.discover-search .field::placeholder { color: var(--muted); }
.discover-search-icon { position: absolute; top: 50%; left: 14px; z-index: 1; width: 19px; height: 19px; stroke-width: 2; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
/* Am Computer liegen Mikrofon und Rückgängig im Feld (ui/voice-input.js): Platz lassen */
.discover-search .discover-search-row .voice-shell > .field { padding-right: 112px; }
.discover-search:has(.voice-shell) .discover-search-clear { right: 72px; z-index: 1; }
.discover-search-clear { position: absolute; top: 50%; right: 6px; display: none; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--muted); transform: translateY(-50%); }
.discover-search-clear svg { width: 18px; height: 18px; stroke-width: 2; }
.discover-search.has-value .discover-search-clear { display: grid; }

.discover-filter-button {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    background: var(--card);
}
.discover-filter-button:hover { border-color: var(--line-strong); }
.discover-filter-button.has-filters { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.discover-filter-icon { width: 18px; height: 18px; stroke-width: 2; }
.discover-badge {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--accent-ink);
    background: var(--accent);
}

.discover-sortline { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 36px; margin: 6px 0 12px; padding: 0 2px; border-radius: 8px; font-size: 14px; color: var(--muted); }
.discover-sortline strong { font-weight: 700; color: var(--text); }
.discover-sortline:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.discover-chevron { width: 16px; height: 16px; stroke-width: 2; }

/* ---------------------------------------------------------------- Blatt „Filter“ */

.discover-sheet-dialog .discover-sheet {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: min(560px, 100%);
    height: min(760px, calc(var(--dialog-height, 800px) - 24px));
    padding: 0;
    overflow: hidden;
}
.discover-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 6px; }
.discover-sheet-head h2 { margin: 0; font-size: 22px; }
.discover-sheet-reset { min-height: 40px; padding: 0 10px; border-radius: 10px; font-size: 15px; font-weight: 700; color: var(--accent); }
.discover-sheet-reset:disabled { color: var(--muted); opacity: .5; }
.discover-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 18px 12px; overscroll-behavior: contain; }
.discover-sheet-foot { padding: 12px 18px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.discover-sheet-done { width: 100%; min-height: 52px; font-size: 17px; }

.discover-filters .filter-section { display: grid; gap: 10px; min-width: 0; padding: 16px 0; }
.discover-filters .filter-section + .filter-section { border-top: 1px solid var(--line); }
.filter-label,
.filter-field > span { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--muted); }
.filter-field > span em { font-weight: 500; font-style: normal; opacity: .8; }
.discover-filters .field { min-height: 48px; padding: 0 14px; border-radius: 12px; font-size: 16px; font-weight: 500; background: var(--input); box-shadow: none; }
.discover-filters .field::placeholder { color: var(--muted); }

.discover-choices { display: grid; }
.discover-choice { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 2px; border-bottom: 1px solid var(--line); text-align: left; }
.discover-choice:last-child { border-bottom: 0; }
.discover-choice-copy { display: grid; flex: 1; gap: 2px; min-width: 0; }
.discover-choice-copy strong { font-size: 16px; font-weight: 700; }
.discover-choice-copy small { font-size: 13px; color: var(--muted); }
.discover-choice-mark { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid var(--line-strong); border-radius: 50%; }
.discover-choice[aria-pressed="true"] .discover-choice-mark { border-color: var(--accent); }
.discover-choice[aria-pressed="true"] .discover-choice-mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }

.discover-filters .segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; }
.discover-filters .segment { min-height: 42px; padding: 6px 8px; border-radius: 9px; font-size: 14px; font-weight: 700; line-height: 1.15; }

.filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
.filter-grid > :nth-child(3) { grid-column: 1 / -1; }
.filter-field { display: grid; gap: 8px; }
.filter-combobox { display: grid; gap: 8px; }
.filter-chips-slot:empty { display: none; }
.filter-autocomplete { position: relative; }

.range-filter { display: grid; gap: 10px; }
.range-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 8px; }
.range-row label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.range-dash { padding-bottom: 13px; font-weight: 700; color: var(--muted); }
.range-error { font-size: 12px; font-weight: 700; color: var(--danger); }
.range-filter.is-invalid .field[name="updatesMax"] { border-color: var(--danger); }
.discover-filters .toggle-card.is-disabled { cursor: not-allowed; opacity: .55; }

@media (max-width: 760px) {
    .discover-tabs .segment, .events-kinds button { min-height: 36px; padding: 0 13px; font-size: 14px; }
    .filter-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================== challenge */
/* ==========================================================================
   Challenge-Seite.
   Ruhiger Aufbau: links bzw. oben, worum es geht (Ersteller, Titel, Bilder,
   Ziel, Kommentare); rechts bzw. darunter, was man tun kann (Fortschritt,
   Hauptaktion, Abstimmung, Aktionszeile, Zugang). Grün nur für die eine
   Hauptaktion und den Fortschritt; keine Rahmen um jeden Baustein, kein Leuchten.
   Der Verlauf steht weiter unten in diesem Abschnitt, die Zeitleiste im Abschnitt „timeline“.
   ========================================================================== */

body[data-view="challenge"] .app { max-width: 1400px; padding-top: 8px; }

.challenge-page {
    position: relative;
    display: grid;
    gap: 28px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding-bottom: 72px;
}
@media (min-width: 1080px) {
    /* Offene Zeitleiste: Platz rechts frei lassen */
    body.has-timeline-open .challenge-page { max-width: min(1240px, calc(100vw - 352px)); margin-left: 0; }
}
@media (max-width: 1079px) {
    .challenge-page { max-width: 760px; }
}
@media (max-width: 760px) {
    body[data-view="challenge"] .app { padding-right: 0; padding-left: 0; }
    .challenge-page { gap: 20px; padding-bottom: 48px; }
}

/* ---------------------------------------------------------------- Aufbau */

/* Die Challenge steht auf einer eigenen, etwas helleren Fläche mit runden
   Ecken; der Verlauf darunter liegt auf dem dunklen Seitengrund. */
.challenge-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    width: 100%;
    padding: 22px 24px 28px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--card);
}
.challenge-main, .challenge-side { display: grid; align-content: start; gap: 18px; min-width: 0; }
@media (min-width: 1080px) {
    .challenge-hero {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
        grid-template-areas: "head head" "media media" "main side" "discussion side";
        align-items: start;
        column-gap: 40px;
        padding: 28px 32px 32px;
    }
    .challenge-head { grid-area: head; }
    .challenge-media { grid-area: media; }
    .challenge-main { grid-area: main; }
    .challenge-side {
        grid-area: side;
        position: sticky;
        top: calc(var(--topbar-height) + 16px);
        gap: 20px;
        padding: 22px;
        border-radius: 20px;
        background: var(--soft);
    }
    .challenge-discussion { grid-area: discussion; }
}
@media (max-width: 760px) {
    .challenge-hero { padding: 6px 16px 24px; gap: 14px; border-width: 0 0 1px; border-radius: 0 0 28px 28px; }
    .challenge-main, .challenge-side { gap: 14px; }
    .challenge-head { gap: 6px; }
    .challenge-more-toggle { min-height: 40px; }
}

/* ---------------------------------------------------------------- Kopf */

.challenge-head { display: grid; gap: 10px; }
.challenge-byline { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; font-size: 14px; color: var(--muted); }
.challenge-byline-avatar.avatar { --avatar-size: 34px; flex: none; font-size: 12px; box-shadow: 0 0 0 1.5px var(--owner); }
.challenge-byline-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; min-width: 0; flex: 1; line-height: 1.35; }
.challenge-byline-text strong { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.challenge-byline-text strong a { color: inherit; }
.challenge-byline-fact::before { content: "·"; margin: 0 6px; }
.challenge-menu-button {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -8px;
    border-radius: 50%; color: var(--text); transition: background-color .15s ease;
}
.challenge-menu-button svg { width: 22px; height: 22px; }
.challenge-menu-button:hover { background: var(--soft); }
.challenge-menu-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.challenge-statuses { display: flex; flex-wrap: wrap; gap: 8px; }
.challenge-status {
    display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px;
    border-radius: 999px; font-size: 13px; font-weight: 700;
}
.challenge-status svg { width: 15px; height: 15px; stroke-width: 2.4; fill: none; stroke: currentColor; }
.challenge-status.is-joined { color: #9cc9f0; background: rgba(87, 156, 219, .16); }
.challenge-status.is-ended { color: var(--ended); background: var(--ended-soft); }

.challenge-title {
    margin: 0; font-size: 26px; font-weight: 800; font-stretch: 112%; line-height: 1.12;
    letter-spacing: -.012em; overflow-wrap: anywhere;
}
@media (min-width: 761px) { .challenge-title { font-size: 40px; line-height: 1.08; } }

/* ---------------------------------------------------------------- Bilder */

.challenge-media { overflow: hidden; border-radius: 18px; background: #0b0d10; }
.challenge-media .gallery-frame { height: var(--gallery-height, 300px); background: #0b0d10; }
.challenge-media .gallery-image { position: relative; object-fit: contain; }
@media (max-width: 760px) { .challenge-media .gallery-image { object-fit: cover; } }
.challenge-media .gallery-backdrop { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(28px) saturate(1.1) brightness(.55); }
.is-android-app .challenge-media .gallery-backdrop { display: none; }
.challenge-media .gallery-dots { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 4px 10px; background: var(--card); }
.challenge-media .gallery-captions { background: var(--card); }
.challenge-media .gallery-dots + .gallery-captions .gallery-caption-toggle { margin-top: -36px; }
.challenge-media .photo-counter { top: auto; bottom: 10px; right: 10px; left: auto; padding: 4px 9px; font-family: var(--font-data); font-size: 12px; transform: none; }
@media (max-width: 760px) {
    /* Handy: Bilder über die ganze Breite */
    .challenge-media { margin: 0 -16px; border-radius: 0; }
}

/* ---------------------------------------------------------------- Ziel, Beschreibung, Zeitraum */

.challenge-label { margin: 0 0 4px; font-family: var(--font-data); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.challenge-goal-text { max-width: 62ch; margin: 0; font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; color: var(--text); }
@media (min-width: 761px) { .challenge-goal-text { font-size: 19px; } }
.challenge-more-toggle {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 2px; padding: 0;
    font-size: 15px; font-weight: 700; color: var(--accent);
}
.challenge-more-toggle svg { width: 18px; height: 18px; stroke-width: 2; transition: transform .18s ease; }
.challenge-more-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.challenge-more-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.challenge-more { display: grid; gap: 16px; padding: 6px 0 4px; }
.challenge-copy h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.challenge-copy p { max-width: 62ch; margin: 0; font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-line; color: var(--copy); }
.challenge-dates { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.challenge-dates span { display: grid; gap: 2px; }
.challenge-dates small { font-family: var(--font-data); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------------------------------------------------------------- Fortschritt */

.challenge-progress { display: grid; gap: 8px; }
.challenge-progress-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.challenge-progress-head strong { font-size: 15px; font-weight: 700; }
.challenge-progress-head span { font-size: 13.5px; color: var(--muted); }
/* Rechts neben „Tag 12 von 30“: verbleibende Tage und – wenn mehr als der Ersteller
   mitmacht – Personen-Symbol mit Zahl, durch eine feine Linie getrennt. */
.challenge-progress-side { display: inline-flex; align-items: center; gap: 10px; }
.challenge-progress-head .progress-people { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.challenge-progress-side > span + .progress-people { padding-left: 10px; border-left: 1px solid var(--line-strong); }
.progress-people svg { width: 17px; height: 17px; flex: none; stroke-width: 1.9; color: var(--muted); }
.progress-people b { font-weight: 700; }
.challenge-progress-track { position: relative; height: 6px; overflow: hidden; border-radius: 3px; background: var(--soft-2); }
.challenge-progress-track span { position: absolute; inset: 0 auto 0 0; width: var(--progress, 0%); border-radius: 3px; background: var(--accent); }
.challenge-progress.is-ended .challenge-progress-track span { background: var(--ended); }

/* ---------------------------------------------------------------- Hauptaktion */

.challenge-join { display: grid; gap: 8px; }
.button.challenge-join-button { min-height: 54px; border-radius: 14px; font-size: 17px; font-weight: 800; color: var(--accent-ink); background: var(--accent); box-shadow: none; }
.button.challenge-join-button:hover { background: var(--accent-2); }
.challenge-join-button svg { width: 20px; height: 20px; stroke-width: 2.4; }
.challenge-join p { margin: 0; font-size: 13.5px; line-height: 1.45; text-align: center; color: var(--muted); }
/* Live-Start verpasst: nur ein ausgegrautes Abbild des Knopfs, darunter die Erklärung. */
.join-closed { display: grid; gap: 10px; }
.join-closed-button {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; border: 1px dashed var(--line-strong); border-radius: 14px;
    font-size: 17px; font-weight: 800; color: var(--muted); background: var(--soft); opacity: .7; cursor: not-allowed; user-select: none;
}
.join-closed-button svg { width: 19px; height: 19px; stroke-width: 2.2; }
.join-closed p { margin: 0; font-size: 13.5px; line-height: 1.5; text-align: center; color: var(--muted); }
.join-closed strong { display: block; margin-bottom: 2px; font-size: 14.5px; color: var(--text); }
.challenge-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--copy); }
.challenge-note svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- Abstimmung, kompakt */

/* Abstimmung: kein eigener Kasten – so breit wie der übrige Inhalt.
   Ja/Nein gleich groß über die ganze Breite, ruhige Farben passend zum
   Fortschrittsbalken: Ja im Akzentgrün, Nein in gedämpftem Rot. */
.vote-poll { display: grid; gap: 12px; padding: 0; border-radius: 0; background: none; }
.challenge-side .vote-poll { background: none; }
.vote-poll.is-pending { opacity: .7; pointer-events: none; }
.vote-copy { display: grid; gap: 2px; min-width: 0; }
.vote-question { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.vote-question a { color: inherit; }
.vote-hint { font-size: 13px; line-height: 1.35; color: var(--muted); }
.vote-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vote-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 12px;
    border: 1px solid var(--line-strong); border-radius: 14px; font-size: 16px; font-weight: 700;
    color: var(--text); background: var(--soft); transition: border-color .15s ease, background-color .15s ease;
}
.vote-button svg { width: 19px; height: 19px; stroke-width: 2; }
.vote-button.is-yes svg { color: var(--accent); }
.vote-button.is-no svg { color: #e58a94; }
.vote-button:hover { border-color: rgba(255, 255, 255, .22); }
.vote-button.is-yes.is-active { border-color: var(--accent); background: var(--accent-soft); }
.vote-button.is-no.is-active { border-color: #e58a94; background: rgba(229, 138, 148, .12); }
.vote-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vote-count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--text); background: rgba(255, 255, 255, .1); }
.vote-bar { position: relative; height: 6px; overflow: hidden; border-radius: 3px; background: var(--soft-2); }
.vote-bar span { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent) 0, var(--accent) var(--yes), #8a4b53 var(--yes), #8a4b53 100%); }
@media (prefers-reduced-motion: no-preference) {
    .vote-bar span { animation: vote-fill .6s var(--ease) both; }
}
@keyframes vote-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.vote-scale { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; font-weight: 700; }
.vote-scale span { display: flex; align-items: center; gap: 6px; }
.vote-scale b { font-size: 16px; font-weight: 800; }
.vote-scale svg { width: 16px; height: 16px; stroke-width: 2; }
.vote-scale .is-yes { color: var(--accent); }
.vote-scale .is-no { color: #e58a94; }
.vote-closed-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ended); background: var(--ended-soft); }
.vote-poll.is-closed .vote-question { text-align: left; }
.vote-summary { margin: 0; font-size: 14.5px; line-height: 1.45; }

/* ---------------------------------------------------------------- Aktionszeile */

.challenge-social { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 0 -10px; padding-top: 4px; border-top: 1px solid var(--line); }
.challenge-side > .challenge-social:first-child { border-top: 0; }
.challenge-social .icon-button,
.challenge-social .watch-button.is-detail,
.challenge-social .reminder-button,
.challenge-social .motivation-button {
    display: inline-flex; align-items: center; gap: 7px; width: auto; min-width: 44px; height: 44px; min-height: 44px; padding: 0 10px;
    border: 0; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--copy); background: none; box-shadow: none;
    transition: background-color .15s ease, color .15s ease;
}
.challenge-social .icon-button:hover,
.challenge-social .watch-button.is-detail:hover,
.challenge-social .reminder-button:hover,
.challenge-social .motivation-button:hover { color: var(--text); background: var(--soft); }
.challenge-social .icon-button-symbol, .challenge-social .icon-button-symbol svg,
.challenge-social .watch-icon svg, .challenge-social .reminder-button svg { width: 20px; height: 20px; }
.challenge-social .icon-button-symbol svg, .challenge-social .reminder-button svg { stroke-width: 1.8; }
.challenge-social .watch-icon { display: grid; place-items: center; }
.challenge-social .icon-button em { font-style: normal; font-weight: 700; color: inherit; }
.challenge-social .icon-button.is-liked { color: var(--like); }
.challenge-social .icon-button.is-liked svg { fill: currentColor; }
.challenge-social .watch-button.is-active { color: var(--accent); }
.challenge-social .motivation { display: contents; }
.challenge-social .motivation-button::before {
    content: ""; width: 20px; height: 20px; flex: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11l3-7c1.5 0 2.5 1 2.5 2.5V9h5.5a2 2 0 0 1 2 2.3l-1.2 7A2 2 0 0 1 16.8 20H7z'/%3E%3Cpath d='M3 11h4v9H3z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11l3-7c1.5 0 2.5 1 2.5 2.5V9h5.5a2 2 0 0 1 2 2.3l-1.2 7A2 2 0 0 1 16.8 20H7z'/%3E%3Cpath d='M3 11h4v9H3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.challenge-social .motivation.is-open .motivation-button { color: var(--accent); background: var(--accent-soft); }
.challenge-social .motivation-options { flex: 1 0 100%; order: 10; margin: 4px 10px 0; }
.challenge-social .motivation-status { flex: 1 0 100%; order: 11; margin: 4px 10px 0; }
.challenge-social :is(.icon-button, .watch-button, .reminder-button, .motivation-button):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Motivieren: ausgeklappte Auswahl */
.motivation-options { padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.motivation-choices { display: grid; gap: 6px; }
.motivation-choices > button {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 10px; text-align: left; background: var(--soft);
}
.motivation-choices > button:hover { border-color: var(--accent); }
.motivation-custom {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; align-items: center; gap: 6px;
    min-height: 56px; padding: 5px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--soft);
}
.motivation-text { min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; color: var(--text); background: transparent; }
.motivation-text:focus { outline: 2px solid var(--accent-glow); }
.motivation-emoji { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; font-size: 22px; text-align: center; background: var(--card); cursor: pointer; }
.motivation-send { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #15180c; background: var(--accent); }
.motivation-send svg { width: 20px; height: 20px; stroke-width: 2; }
.motivation-emojis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding-top: 4px; }
.motivation-emojis button { min-height: 40px; border-radius: 10px; font-size: 22px; background: var(--card); }
.motivation-emojis .motivation-emojis-close { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--muted); }
.motivation-status { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.motivation-status:empty { display: none; }

/* ---------------------------------------------------------------- Zugang (Ersteller und Mitglieder) */

.privacy-panel { display: grid; gap: 12px; }
.privacy-panel[hidden] { display: none; }
.privacy-panel:not(.is-owner) { padding: 12px 14px; border-radius: var(--radius-control); background: var(--private-soft); }
.privacy-panel p { margin: 0; color: var(--private-light); }
.privacy-requests > summary span { flex: 1; font-weight: 700; }
.privacy-requests-count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 12px; color: var(--accent-ink); background: var(--accent); }
.privacy-requests-body { display: grid; gap: 8px; padding: 10px 2px 0; }
.privacy-requests-body > p { color: var(--muted); }
.privacy-member { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.privacy-member > span { flex: 1 1 auto; font-size: 14px; }
/* Offene Anfrage: deutlich markiert, zwei gleich große Knöpfe – Freigeben grün, Ablehnen rot */
.privacy-member.is-pending { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.privacy-member.is-pending > span { font-size: 15px; font-weight: 600; }
.privacy-decisions { display: grid; flex: 1 1 100%; grid-template-columns: 1fr 1fr; gap: 8px; }
.button.privacy-decide { min-height: 44px; border-radius: 12px; font-size: 15px; font-weight: 700; }
.button.privacy-decide.is-approve { border: 1px solid var(--accent); color: var(--accent-ink); background: var(--accent); box-shadow: none; }
.button.privacy-decide.is-approve:hover { background: var(--accent-light); }
.button.privacy-decide.is-reject { border: 1px solid rgba(229, 138, 148, .55); color: #f0a3ab; background: rgba(229, 138, 148, .1); box-shadow: none; }
.button.privacy-decide.is-reject:hover { background: rgba(229, 138, 148, .18); }

/* ---------------------------------------------------------------- Kommentare zur Challenge */

.challenge-discussion .comment-panel.is-card { border-color: var(--line); background: transparent; }

/* ---------------------------------------------------------------- Tägliche Erinnerung (Blatt) */

.reminder-sheet { display: grid; gap: 12px; }
.reminder-sheet .field-label { color: var(--text); }
.reminder-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* ---------------------------------------------------------------- Private Challenge ohne Zugang */

.locked-challenge { display: grid; gap: 14px; width: 100%; max-width: 560px; margin: 0 auto; padding: 20px 20px 40px; }
.locked-visual {
    display: grid; place-items: center; height: 168px; margin-bottom: 6px; border-radius: 18px;
    background: repeating-linear-gradient(135deg, #14161c 0 10px, #111319 10px 20px); box-shadow: inset 0 0 0 1px rgba(201, 163, 90, .22);
}
.locked-visual span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; color: var(--private-light); background: rgba(201, 163, 90, .14); }
.locked-visual svg { width: 30px; height: 30px; stroke-width: 1.8; }
.locked-kicker { margin: 0; font-family: var(--font-data); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #e0c48a; }
.locked-challenge h1 { margin: 0; font-size: 28px; font-weight: 800; font-stretch: 112%; line-height: 1.12; overflow-wrap: anywhere; }
.locked-lead { margin: 0; font-size: 16px; line-height: 1.5; color: var(--copy); }
.locked-status { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.45; color: var(--text); background: var(--soft); }
.locked-status.is-pending { color: var(--private-light); background: var(--private-soft); }
.button.locked-action { width: 100%; min-height: 52px; border-radius: 14px; font-size: 17px; box-shadow: none; }
.locked-action.primary { color: var(--accent-ink); background: var(--accent); }
.locked-action.primary:hover { background: var(--accent-2); }
.locked-steps { display: grid; gap: 14px; margin: 6px 0 0; padding: 18px; list-style: none; border-radius: 16px; font-size: 15px; line-height: 1.45; color: var(--copy); background: var(--card); }
.locked-steps li { display: flex; gap: 12px; }
.locked-steps span { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font-family: var(--font-data); font-size: 12px; color: var(--text); background: var(--soft-2); }
@media (min-width: 761px) { .locked-challenge { padding-top: 40px; } .locked-challenge h1 { font-size: 36px; } }

/* ---- Verlauf auf der Challenge-Seite ----
   Ein gemeinsamer Verlauf aller Personen auf dem dunklen Seitengrund, klar
   getrennt von der hellen Fläche der Challenge darüber. Oben die Überschrift
   „Verlauf“: das Wort mit dickem grünem Strich darunter, der als feine Linie
   bis zum Rand weiterläuft. Darunter klebt der Knopf „Teilnehmer“ beim
   Scrollen oben; dann die gewählte Auswahl als entfernbare Chips und die
   Updates ohne Rahmen, durch Linien getrennt. Die Auswahl selbst steht weiter
   unten (Teilnehmer-Blatt). */

.challenge-stream {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-content: start;
    margin-top: 12px;
    padding: 0 24px 40px;
    overflow-x: clip;
}
.stream-title { display: flex; align-items: flex-end; margin: 26px 0 0; font-size: clamp(34px, 9vw, 48px); font-weight: 900; font-stretch: 112%; line-height: 1; letter-spacing: -.03em; }
.stream-title span { flex: none; padding-bottom: 12px; border-bottom: 4px solid var(--accent); }
.stream-title::after { content: ""; flex: 1; order: 1; height: 1px; margin-bottom: 1.5px; background: var(--line-strong); }
/* Rechts neben der Linie: wie viele mitmachen („3 Teilnehmer“). */
.stream-total { flex: none; order: 2; padding: 0 0 9px 14px; font-size: 15px; font-weight: 700; font-stretch: 100%; line-height: 1.2; letter-spacing: 0; color: var(--muted); }
.stream-total b { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.stream-head {
    position: sticky; top: calc(var(--topbar-height) - 1px); z-index: 4;
    display: flex; align-items: center; gap: 12px;
    margin: 0 -24px; padding: 12px 24px;
    border-bottom: 1px solid var(--line); background: rgba(10, 12, 16, .94); backdrop-filter: blur(12px);
}
@media (max-width: 760px) {
    .challenge-stream { padding: 0 16px 32px; }
    .stream-head { margin: 0 -16px; padding: 12px 16px; }
}

/* Knopf „Teilnehmer“: links die Profilbilder, rechts „Teilnehmer“ und die Zahl (die bleiben immer
   ganz sichtbar). Der Knopf wächst mit seinen Bildern bis zur vollen Zeilenbreite. Die Bilder stehen
   in einer Reihe fester Höhe; was nicht mehr ganz hineinpasst, bricht in eine zweite, abgeschnittene
   Reihe um – so ist nie ein Bild nur halb zu sehen. Diese Bilder blendet challenge-stream.js
   (fitFaces) aus, damit der Knopf genau so breit ist wie die sichtbaren. */
/* Farben über Variablen: Die Zustände (Zeigen, Auswahl aktiv, Ersteller) setzen nur Werte,
   jede Eigenschaft steht genau einmal. */
.people-button {
    --people-line: var(--line-strong);
    --people-fill: var(--soft);
    --people-ring: var(--soft);
    --people-count-ink: var(--text);
    --people-count-fill: var(--soft-2);
    display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; min-height: 44px; padding: 0 8px 0 10px;
    border: 1px solid var(--people-line); border-radius: 999px; font-size: 14.5px; font-weight: 800; color: var(--text); background: var(--people-fill);
    transition: border-color .16s ease, background-color .16s ease;
}
.people-button:hover { --people-line: rgba(255, 255, 255, .22); }
.people-button.is-filtered {
    --people-line: rgba(163, 230, 53, .6);
    --people-fill: rgba(163, 230, 53, .1);
    --people-ring: #1c2414;
    --people-count-ink: var(--accent-ink);
    --people-count-fill: var(--accent);
}
.people-faces { display: flex; flex: 0 1 auto; flex-wrap: wrap; min-width: 0; height: 30px; padding-left: 8px; overflow: hidden; }
.people-face { display: grid; flex: none; margin-left: -8px; border: 2px solid var(--people-ring); border-radius: 50%; }
/* Der Ersteller behält seinen goldenen Ring – auch bei aktiver Auswahl. */
.people-face.is-owner { --people-ring: var(--owner); }
.people-face .avatar { --avatar-size: 26px; font-size: 10px; }
.people-button-label { flex: none; }
.people-button-count {
    display: grid; flex: none; place-items: center; min-width: 26px; height: 26px; padding: 0 9px; border-radius: 999px;
    font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--people-count-ink); background: var(--people-count-fill);
}

.people-filter { display: flex; flex-wrap: wrap; gap: 8px; }
/* Lange Namen enden mit „…“, damit mehrere Personen nebeneinander passen. */
.people-chip {
    display: inline-flex; align-items: center; gap: 7px; min-height: 36px; max-width: min(100%, 200px); padding: 0 10px 0 4px;
    border: 1px solid rgba(163, 230, 53, .45); border-radius: 999px; font-size: 13.5px; font-weight: 700; background: rgba(163, 230, 53, .08);
}
.people-chip span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.people-chip .avatar { --avatar-size: 26px; font-size: 10px; }
.people-chip svg { flex: none; width: 14px; height: 14px; stroke-width: 2.4; color: var(--muted); }
.people-chip.is-owner { border-color: rgba(244, 192, 79, .55); background: var(--owner-soft); }
.people-chip.is-reset { padding: 0 14px; border-color: var(--line-strong); color: var(--muted); background: none; }
.people-chip.is-more { padding: 0 12px; color: var(--text); border-color: var(--line-strong); background: var(--soft); }
.people-chip:hover { border-color: var(--text); }

.stream-updates { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.stream-updates > .update-card.is-stream { padding: 22px 0 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.stream-updates > .update-card.is-stream:last-child { border-bottom: 0; }
@media (max-width: 760px) { .stream-updates > .update-card.is-stream { padding: 18px 0 8px; } }
.stream-empty { margin: 0; padding: 28px 4px; text-align: center; color: var(--muted); }
.stream-updates > .update-card { scroll-margin-top: calc(var(--topbar-height) + 84px); }
.stream-load {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px;
    border: 1px dashed var(--line-strong); border-radius: var(--radius-control); font-size: 14px; font-weight: 700; color: var(--copy);
}
.stream-load svg { width: 18px; height: 18px; stroke-width: 2.2; color: var(--accent); }
.stream-load:hover { border-style: solid; color: var(--text); }
.stream-load:disabled { opacity: .55; }


/* ---- Zugang (Öffentlich / Privat) auf der Challenge-Seite */
.access-row { display: grid; gap: 8px; }
.access-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: calc(var(--radius-control) + 4px); background: var(--input); }
.access-option { position: relative; display: block; cursor: pointer; }
.access-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.access-option-face { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-control); color: var(--muted); transition: background-color .16s ease, color .16s ease; }
.access-option-face svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.access-option-face strong { font-size: 14.5px; font-weight: 800; }
.access-option input:checked + .access-option-face { color: var(--text); background: var(--soft-2); box-shadow: var(--highlight), 0 1px 3px rgba(0, 0, 0, .45); }
.access-option input[value="1"]:checked + .access-option-face { color: var(--private-light); background: var(--private-soft); }
.access-option input:focus-visible + .access-option-face { outline: 2px solid var(--accent); outline-offset: 2px; }
.access-option input:disabled + .access-option-face { opacity: .6; }
.privacy-panel .access-note { margin: 0 4px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.privacy-panel.is-owner .privacy-requests { margin-top: 2px; }

/* ---- Teilnehmer-Blatt „Wessen Updates willst du sehen?“ (und „Im Verlauf gezeigt“): Schnellauswahl, Gruppen,
   Kästchen zum Abhaken (immer gut sichtbar, auch beim Ersteller), feste Fußzeile */
.people-dialog .people-sheet { display: flex; flex-direction: column; height: min(700px, calc(var(--dialog-height, 640px) - 24px)); padding: 0; overflow: hidden; }
.people-sheet-head { display: grid; flex: none; gap: 12px; padding: 18px 16px 12px; border-bottom: 1px solid var(--line); }
.people-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.people-heading { display: grid; gap: 2px; min-width: 0; }
.people-title { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 20px; font-stretch: 112%; }
.people-title b { font-size: 14px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.people-subtitle { margin: 0; font-size: 13.5px; color: var(--muted); }
.people-subtitle b { font-weight: 700; color: var(--copy); font-variant-numeric: tabular-nums; }
.people-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.people-quick button { min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--copy); }
.people-quick button[aria-pressed="true"] { border-color: var(--text); color: var(--card); background: var(--text); }
.people-list { display: flex; flex: 1 1 auto; flex-direction: column; gap: 14px; min-height: 0; padding: 12px 10px 16px; overflow-y: auto; overscroll-behavior: contain; }
.people-group { display: grid; gap: 4px; }
.people-group-title { margin: 0 8px 2px; font-family: var(--font-data); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* Hintergrund über Variablen: Zeigen und Auswahl setzen nur Werte (der Ersteller etwas kräftiger). */
.person-row {
    --row-fill: transparent;
    --row-selected: rgba(163, 230, 53, .08);
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; align-items: center; gap: 12px; width: 100%; min-height: 62px;
    padding: 8px 12px 8px 8px; border: 1px solid transparent; border-radius: var(--radius-control); text-align: left; background: var(--row-fill);
    transition: background-color .14s ease, border-color .14s ease;
}
.person-row.is-owner { --row-selected: rgba(163, 230, 53, .1); }
.person-row:hover { --row-fill: var(--soft); }
.person-avatar { position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
.person-avatar .avatar { --avatar-size: 42px; font-size: 15px; }
.person-avatar .owner-crown { top: -5px; right: -5px; width: 20px; height: 20px; border-width: 1px; }
.person-avatar .owner-crown svg { width: 12px; height: 12px; }
.person-copy { display: grid; gap: 3px; min-width: 0; }
.person-copy strong { overflow: hidden; font-size: 15.5px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.person-copy small { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.person-check { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid #6b7384; border-radius: 7px; color: transparent; background: var(--input); transition: all .14s ease; }
.person-check svg { width: 16px; height: 16px; stroke-width: 3; }
.person-row.is-selected { --row-fill: var(--row-selected); }
.person-row:is(.is-selected, .is-included) .person-check { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }
.person-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* „Im Verlauf gezeigt“: statt des Kästchens ein × zum Entfernen. */
.person-remove { --remove-ink: var(--muted); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--remove-ink); background: var(--soft); }
.person-remove svg { width: 15px; height: 15px; stroke-width: 2.4; }
.person-remove:hover { --remove-ink: var(--text); }
.people-empty { margin: 24px 8px; text-align: center; color: var(--muted); }
.people-more { min-height: 44px; margin: 0 4px; border: 1px dashed var(--line-strong); border-radius: var(--radius-control); font-size: 14px; font-weight: 700; color: var(--copy); }
.people-sheet-foot { flex: none; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card); }
.people-sheet-foot .button { width: 100%; min-height: 50px; font-size: 15.5px; }
.people-skeleton { display: grid; gap: 4px; }
.people-skeleton span { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 62px; padding: 8px 12px 8px 10px; }
.people-skeleton i { width: 42px; height: 42px; border-radius: 50%; background: var(--soft-2); }
.people-skeleton b { width: 55%; height: 12px; border-radius: 6px; background: var(--soft-2); }
@media (prefers-reduced-motion: no-preference) { .people-skeleton i, .people-skeleton b { animation: people-skeleton 1.1s ease-in-out infinite alternate; } }
@keyframes people-skeleton { from { opacity: .45; } to { opacity: .9; } }


/* ======================================================================== timeline */
/* ==========================================================================
   Zeitleiste am rechten Rand (Challenge- und Update-Seite).
   Computer (ab 1080 px): Leiste mit Stationen oben rechts, anfangs offen. Tablet (761–1079 px): oben rechts
   über dem Inhalt, anfangs zu. Telefon (bis 760 px): schmale Nummernleiste unten rechts über der unteren
   Leiste – so hoch wie ihre Stationen, höchstens bis unter die Kopfzeile (dann scrollbar).
   Jeder Wert steht je Element und Bildschirmbreite einmal; Zustände (offen/zu, Mauszeiger, aktiv) setzen
   ihre Werte in sich ausschließenden Regeln.
   ========================================================================== */

.timeline { position: fixed; top: var(--topbar-height); right: 0; pointer-events: none; }
.timeline-trigger {
    right: 0;
    display: grid;
    place-items: center;
    padding: 7px 5px;
    border-style: solid;
    border-width: 1px 0 1px 1px;
    border-color: var(--hairline-strong);
    border-radius: 14px 0 0 14px;
    box-shadow: -10px 12px 30px -14px rgba(0, 0, 0, .9);
}
.timeline-trigger svg { width: 20px; height: 20px; stroke-width: 1.8; }
.timeline-trigger:not(:hover) { color: var(--accent); background: rgba(17, 19, 25, .82); }
.timeline-trigger:hover { color: var(--page-a); background: var(--text); }
.timeline:not(.is-open) .timeline-trigger { pointer-events: auto; }
.timeline.is-open .timeline-trigger { opacity: 0; pointer-events: none; }

.timeline-rail {
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--text);
    border-radius: 16px 0 0 16px;
    background: var(--card);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}
.timeline:not(.is-open) .timeline-rail { pointer-events: none; }
.timeline.is-open .timeline-rail { pointer-events: auto; }
.timeline-head { display: flex; flex: none; align-items: center; border-bottom: 1px solid var(--line); }
.timeline-head strong { font-size: 15px; font-weight: 700; }
.timeline-head span { overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.timeline-close { display: grid; place-items: center; flex: none; border: 1px solid var(--line); border-radius: 50%; background: var(--soft); }
.timeline-close svg { width: 15px; height: 15px; stroke-width: 1.8; }
.timeline-list { position: relative; display: grid; align-content: start; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.timeline-list::before { content: ""; position: absolute; top: 27px; bottom: 27px; width: 2px; background: var(--line); }
.timeline-item { position: relative; z-index: 1; display: grid; align-items: center; width: 100%; }
.timeline-item:is(:hover, :focus-visible, .is-active) { background: var(--soft); }
.timeline-item.is-active { box-shadow: inset 3px 0 0 var(--accent); }
.timeline-node { display: grid; place-items: center; width: 28px; height: 28px; border-style: solid; border-width: 2px; border-radius: 50%; font-size: 10.5px; font-weight: 800; background: var(--card); }
.timeline-item:not(.is-active, .is-completed) .timeline-node { border-color: var(--text); }
.timeline-item:is(.is-active, .is-completed) .timeline-node { border-color: var(--accent); }

/* Computer und Tablet: Leiste mit Titel und Stationen, gleitet von rechts herein */
@media (width > 760px) {
    .timeline { bottom: 0; }
    .timeline-trigger {
        position: absolute;
        top: 50%;
        width: 44px;
        height: 54px;
        backdrop-filter: blur(14px) saturate(1.6);
        transition: opacity .18s ease, transform .2s var(--ease), background-color .18s ease, color .18s ease;
    }
    .timeline:not(.is-open) .timeline-trigger { transform: translateY(-50%); }
    .timeline.is-open .timeline-trigger { transform: translate(8px, -50%); }
    .timeline-rail { position: absolute; display: flex; transition: transform .24s var(--ease), opacity .2s ease; }
    .timeline:not(.is-open) .timeline-rail { opacity: 0; transform: translateX(calc(100% + 30px)); }
    .timeline.is-open .timeline-rail { opacity: 1; }
    .timeline-head { justify-content: space-between; gap: 12px; padding: 14px 14px 12px; }
    .timeline-head > div { display: grid; gap: 3px; min-width: 0; }
    .timeline-close { width: 34px; height: 34px; }
    .timeline-list { gap: 4px; padding: 10px 9px 12px; }
    .timeline-list::before { left: 28px; }
    .timeline-item { grid-template-columns: 38px minmax(0, 1fr); gap: 9px; padding: 7px 9px; text-align: left; }
    .timeline-copy { display: grid; gap: 2px; min-width: 0; }
    .timeline-copy strong,
    .timeline-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .timeline-copy strong { font-size: 12px; font-weight: 700; }
    .timeline-copy small { font-size: 10.5px; color: var(--muted); }
}
@media (width >= 1080px) {
    .timeline { left: 0; z-index: 920; }
    .timeline-rail { top: 12px; right: 14px; width: min(276px, calc(100vw - 28px)); max-height: calc(100dvh - var(--topbar-height) - 26px); }
}
@media (760px < width < 1080px) {
    .timeline { width: min(356px, 100vw); z-index: 1180; }
    .timeline-rail { top: 8px; right: 8px; width: min(340px, calc(100vw - 16px)); max-height: calc(100dvh - var(--topbar-height) - 16px); }
}

/* Telefon: schmale Leiste nur mit Nummern, unten rechts über der unteren Leiste */
@media (width <= 760px) {
    .timeline { bottom: calc(82px + env(safe-area-inset-bottom)); width: 60px; z-index: 2200; }
    /* Knopf unten am rechten Rand, knapp über der unteren Leiste: so verdeckt er weder das Menü „⋯“ oben
       noch die Mitte der Fotos. */
    .timeline-trigger { position: fixed; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 18px); width: 42px; height: 50px; }
    /* Unten verankert, so hoch wie nötig: bei wenigen Stationen kurz, bei vielen bis unter die Kopfzeile. */
    .timeline-rail {
        position: fixed;
        right: 4px;
        bottom: calc(82px + env(safe-area-inset-bottom) + 8px);
        width: 54px;
        max-height: calc(100dvh - var(--topbar-height) - 82px - env(safe-area-inset-bottom) - 16px);
    }
    .timeline:not(.is-open) .timeline-rail { display: none; }
    .timeline.is-open .timeline-rail { display: flex; }
    .timeline-head { justify-content: center; min-height: 42px; padding: 5px 0; }
    .timeline-head > div { display: none; }
    .timeline-close { width: 32px; height: 34px; }
    .timeline-list { gap: 2px; padding: 6px 4px 8px; }
    .timeline-list::before { left: 50%; margin-left: -1px; }
    .timeline-item { grid-template-columns: minmax(0, 1fr); justify-items: center; min-height: 42px; padding: 5px 0; }
    .timeline-copy { display: none; }
}

/* ======================================================================== update */
/* ==========================================================================
   Update-Seite, „Update-Ansicht“ (großes Bild mit Infos und Kommentaren)
   und Vollbild eines Bildes. Dazu die Bildbeschreibung unter Galerien.
   ========================================================================== */

/* ---------------------------------------------------------------- Zurück-Knopf */

.back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    margin-bottom: 18px;
    padding: 0 12px 0 10px;
    border: 1px solid var(--text);
    border-radius: 16px;
    font-size: 12.5px;
    font-weight: 700;
    background: var(--card);
}
.back-button svg { width: 18px; height: 18px; stroke-width: 1.9; }
.back-button:hover { color: var(--page-a); background: var(--text); }

/* ---------------------------------------------------------------- Update-Seite */

.update-page { max-width: 1040px; margin: 0 auto; }
.update-detail { padding: 24px; }
.update-detail h1 { font-size: 48px; line-height: 1.02; letter-spacing: -.035em; overflow-wrap: anywhere; }
.update-detail-stage { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; margin-bottom: 10px; }
.update-detail-stage small { font-size: 11px; line-height: 1.3; text-align: right; color: var(--muted); }
.update-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 4px; }
.update-detail-meta .meta { margin: 0; font-size: 13px; line-height: 1.5; text-transform: uppercase; }
.update-detail-location { display: inline-flex; margin: -4px 0 12px; padding: 5px 10px; font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--soft); }
.update-detail-content { margin-top: 16px; }
.update-detail .gallery.is-detail { margin: 18px 0 16px; }
.gallery.is-detail .gallery-strip { background: var(--media-bg); }
.gallery.is-detail .gallery-frame { aspect-ratio: 3 / 4; max-height: 860px; background: #0a0a0a; }
.gallery.is-detail .gallery-open { cursor: zoom-in; }
.gallery.is-detail .gallery-image { position: relative; object-fit: contain; }
.gallery.is-detail .gallery-backdrop { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; opacity: .68; filter: blur(30px) saturate(1.1); }
.is-android-app .gallery.is-detail .gallery-backdrop { display: none; }
.update-detail-text { margin: 10px 0; font-size: 14.5px; line-height: 1.6; color: var(--copy); }
.update-detail-textcard .text-card.is-detail { width: 100%; min-height: 420px; border-radius: var(--radius-photo); }
.update-detail-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; align-items: center; gap: 8px; }
.update-detail-actions .icon-button { width: 100%; min-height: 48px; gap: 10px; padding: 8px 4px; border-radius: 12px; }
.update-detail-actions .icon-button-symbol,
.update-detail-actions .icon-button-symbol svg { width: 25px; height: 25px; }
.update-detail-actions .icon-button em { font-size: 15px; font-weight: 700; }
@media (max-width: 760px) {
    .update-detail { padding: 20px; }
    .update-detail h1 { font-size: 32px; }
}

/* Beschreibung des gezeigten Bildes unter einer Galerie */
.gallery-captions { padding: 0; }
.gallery-caption { display: grid; justify-items: end; padding: 0 12px; }
.gallery-caption:empty { display: none; }
.gallery-caption-toggle { display: grid; place-items: center; width: 40px; height: 32px; margin: 4px 0 6px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); background: var(--soft); }
.gallery-caption-toggle svg { width: 18px; height: 18px; stroke-width: 2.2; }
.gallery-caption-toggle:hover, .gallery-caption-toggle.is-open { color: var(--text); border-color: rgba(255, 255, 255, .24); }
.gallery-caption-text { justify-self: stretch; margin: 0 4px 12px; font-size: 14.5px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; color: var(--copy); }

/* ---------------------------------------------------------------- Gesten-Hilfen */

.like-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
    border-radius: 50%;
    color: rgba(255, 255, 255, .94);
    background: rgba(0, 0, 0, .38);
    opacity: 0;
    pointer-events: none;
}
.like-burst svg { width: 46px; height: 46px; fill: currentColor; }
.like-burst.is-visible { animation: like-burst .62s var(--ease) both; }
@keyframes like-burst { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; transform: scale(1.08); } 100% { opacity: 0; transform: scale(1); } }
.zoom-reset { position: absolute; right: 12px; bottom: 12px; z-index: 3; min-height: 34px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .62); backdrop-filter: blur(8px); }
.is-returning { transition: transform .22s var(--ease), opacity .22s ease; }

/* ---------------------------------------------------------------- Update-Ansicht */

.viewer-dialog { background: var(--page-a); }
.viewer {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "stage head" "stage info" "stage comments";
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--page-a);
}
.viewer-close { position: fixed; top: 14px; right: 47px; z-index: 5; width: 42px; height: 42px; border: 0; background: var(--soft); backdrop-filter: blur(8px); }
.viewer-stage { grid-area: stage; position: sticky; top: 0; height: var(--dialog-height, 100dvh); overflow: hidden; background: #050608; }
.viewer-media { position: relative; display: grid; place-items: center; height: 100%; }
.viewer-image { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; touch-action: pan-y; }
.viewer-image img { width: 100%; height: 100%; object-fit: contain; transform-origin: center; user-select: none; -webkit-user-drag: none; }
.viewer-dots { position: absolute; right: 0; bottom: 14px; left: 0; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.viewer-dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .45); }
.viewer-dot.is-active { width: 22px; background: var(--accent); }
.viewer-text { display: grid; place-items: center; height: 100%; padding: 40px; }
/* Textkarte in der großen Ansicht: feste Höhe (gut zwei Drittel des Bildschirms); Aufteilung siehe „Textkarte“. */
.viewer-text .text-card.is-detail { width: min(720px, 100%); height: min(68vh, 680px); }

.viewer-info,
.viewer-comments { border-left: 1px solid var(--line); background: var(--card); }
.viewer-info { grid-area: info; padding: 0 16px; }
/* Ganz oben: die Person (Handy über dem Bild bzw. der Textkarte, Computer oben in der rechten Spalte). */
.viewer-head { grid-area: head; }
@media (width >= 1024px) { .viewer-head { padding: 20px 16px 0; border-left: 1px solid var(--line); background: var(--card); } }
@media (width < 1024px) { .viewer-head { padding: 4px 4px 12px; } }
.viewer-comments { grid-area: comments; padding: 0 16px 48px; }
.viewer-summary { display: grid; gap: 16px; max-width: 720px; padding: 20px 0 18px; }
.viewer-owner { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; padding-right: 56px; }
.viewer-owner .avatar.is-viewer { --avatar-size: 48px; }
.viewer-owner-name { display: block; overflow: hidden; font-size: 16.5px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.viewer-meta { display: flex; gap: 0 8px; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--muted); }
.viewer-progress { display: grid; gap: 12px; padding: 14px 14px 16px; border: 1px solid var(--line); border-radius: 16px; }
.viewer-progress-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.viewer-number { padding: 6px 11px; border-radius: 999px; font-size: 13px; font-weight: 800; line-height: 1; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.viewer-day { display: flex; align-items: baseline; gap: 5px; font-size: 14px; font-weight: 600; color: var(--muted); }
.viewer-day b { font-weight: 800; color: var(--text); }
.viewer-day strong { font-weight: 700; color: var(--text); }
.viewer-progress-bar { position: relative; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(245, 247, 251, .12); }
.viewer-progress-bar span { position: absolute; inset: 0 auto 0 0; width: var(--progress, 0%); border-radius: 999px; background: var(--accent); }
.viewer-label { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.viewer-caption { display: grid; gap: 6px; }
.viewer-caption p { margin: 0; line-height: 1.55; white-space: pre-line; color: var(--copy); }
.viewer-media-comments-head { display: flex; justify-content: space-between; }
.viewer-copy .expandable { margin: 10px 0; line-height: 1.6; color: var(--copy); }
.viewer-actions { display: flex; align-items: stretch; gap: 6px; }
.viewer-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
    height: auto;
    min-width: 48px;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    background: var(--soft);
}
.viewer-action .icon-button-symbol,
.viewer-action .icon-button-symbol svg,
.viewer-action > svg { width: 20px; height: 20px; }
.viewer-action em { padding: 3px 7px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.1; font-style: normal; background: rgba(245, 247, 251, .1); }
.viewer-action.is-comment { flex: 1; min-width: 0; padding: 0 10px; }
.viewer-action-text { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.viewer-action.is-square { width: 48px; padding: 0; }
.viewer-action.is-like.is-liked { border-color: var(--like); color: var(--like); }
.viewer-action.is-like.is-liked svg { fill: currentColor; }
.viewer-comments-head { display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.viewer-comments-head strong { font-size: 17px; font-weight: 800; }
.viewer-comments-head .comment-count { padding: 3px 8px; border-radius: 999px; font-size: 12.5px; color: var(--muted); background: rgba(245, 247, 251, .1); }
.viewer-compose-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin-top: 14px;
    padding: 7px 14px 7px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    color: var(--muted);
    background: var(--soft);
}
.viewer-compose-trigger .avatar.is-small { --avatar-size: 36px; }
.viewer-composer { margin-top: 12px; }
.viewer-comments .comment-list { margin-top: 14px; }
/* Im Bildfenster stehen Datum und Zahlen in der Fließschrift. */
.viewer-comments :is(.meta, .comment-like-count) { font-family: var(--font); letter-spacing: 0; }
.comment-list-older { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--accent); }

@media (max-width: 1023px) {
    .viewer { display: block; padding: 8px; }
    .viewer-close { top: 12px; right: 12px; }
    .viewer-stage { position: relative; height: var(--viewer-image-height, 60vh); }
    .viewer.is-text-only .viewer-stage { height: auto; min-height: 0; }
    .viewer-text { padding: 0; }
    .viewer-info,
    .viewer-comments { border-left: 0; background: var(--page-a); }
    .viewer-comments-head { padding-top: 18px; }
    .viewer-actions { overflow-x: auto; }
}

/* ---------------------------------------------------------------- Vollbild */

.fullscreen-dialog { background: #000; }
.fullscreen-media { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
/* Zähler nur bei mehreren Challenge-Fotos; der Schließen-Knopf steht immer rechts. */
.fullscreen-media-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; }
.fullscreen-media-head .icon-circle { margin-left: auto; }
.fullscreen-media-count { padding: 5px 10px; border-radius: 999px; font-family: var(--font-data); font-size: 13px; color: #fff; background: rgba(255, 255, 255, .1); }
/* Feste Fläche (eine Zelle so groß wie die Bühne): Erst dann greift max-height: 100 % am Bild –
   sonst wurde ein Hochformat-Foto in voller Höhe gezeigt und oben und unten abgeschnitten. */
.fullscreen-media-stage { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; overflow: hidden; touch-action: none; }
.fullscreen-media-stage img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; user-select: none; -webkit-user-drag: none; }
.fullscreen-media-dots { display: flex; justify-content: center; gap: 8px; padding: 14px 0 max(18px, env(safe-area-inset-bottom)); }
.fullscreen-media-dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .4); }
.fullscreen-media-dot.is-active { width: 22px; background: var(--accent); }

/* ======================================================================== create */
/* ==========================================================================
   Neue Challenge erstellen: fünf nummerierte Abschnitte, Dauer-Schnellwahl,
   Enddatum-Vorschau, Sichtbarkeit als zwei Karten – und die Vorlagen-Auswahl.
   ========================================================================== */

.create { width: 100%; max-width: 1040px; margin: 0 auto; padding: 6px 0 40px; }
.create-templates {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    margin-top: 2px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 16%, transparent);
}
.create-templates svg { width: 18px; height: 18px; stroke: var(--accent); stroke-width: 1.9; }
.create-templates:hover, .create-templates:focus-visible { background: color-mix(in srgb, var(--accent) 22%, var(--card)); outline: none; }
.create-templates:active { transform: scale(.97); }

.create-form { display: grid; gap: 14px; }

/* Abschnitte */
.create-step { padding: 18px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.create-step-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.create-step-number {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.create-step-head h2 { margin: 3px 0 0; font-size: 18px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.create-step-head p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.create-step-body { display: grid; gap: 16px; }

/* Felder */
.create-field { display: grid; gap: 7px; min-width: 0; }
.create-label { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 700; line-height: 1.2; }
.create-optional { padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .02em; color: var(--muted); background: var(--soft); }
.create-counter { margin-left: auto; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); }
.create-field small { font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--muted); }
.create-form .field { min-height: 48px; padding: 12px 14px; border-color: var(--line); border-radius: 12px; font-size: 15.5px; font-weight: 500; background: var(--soft); box-shadow: none; }
.create-form .combobox-picker { border-color: var(--line); background: var(--soft); }
.create-form textarea.field { min-height: 84px; }
.create-form .field::placeholder { color: var(--muted); }
.create-form .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.create-field.is-invalid .field { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }
.create-field.is-invalid .create-label::after { content: "Pflichtfeld"; margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--danger); }
.create-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Von einer Vorlage ausgefüllte Felder leuchten kurz auf. */
.create-form .is-filled { animation: create-filled 1.4s ease-out; }
@keyframes create-filled { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); } to { box-shadow: 0 0 0 0 transparent; } }

/* Dauer-Schnellwahl und Zeitraum */
.create-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.create-chip {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--muted);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.create-chip:hover { border-color: var(--line-strong); color: var(--text); }
.create-chip[aria-pressed="true"] { border-color: var(--accent); color: #111; background: var(--accent); }
.create-summary { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; color: var(--copy); background: var(--soft); }
.create-summary:empty { display: none; }

/* Sichtbarkeit (Überschrift steht schon im Abschnittskopf) */
.visibility { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.visibility > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.visibility-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.visibility-option {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon title" "text text";
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--soft);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}
.visibility-option > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.visibility-icon { grid-area: icon; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--muted); background: var(--card); }
.visibility-icon svg { width: 21px; height: 21px; stroke-width: 1.8; }
.visibility-copy { display: contents; }
.visibility-copy strong { grid-area: title; font-size: 15px; }
.visibility-copy small { grid-area: text; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.visibility-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.visibility-option:has(input:checked) .visibility-icon { color: #15180c; background: var(--accent); }
.visibility-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.visibility-hint { font-size: 12px; color: var(--muted); }

/* Aktionen */
.create-actions { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin-top: 4px; }
.create-actions .button { min-height: 52px; border-radius: 999px; }
.create-actions .button.primary { font-size: 16px; }
.create-actions .button.ghost { padding: 0 18px; }

/* ---------------------------------------------------------------- Vorlagen */

.sheet.template-sheet { height: calc(var(--dialog-height, 640px) - 40px); }
.template-sheet .sheet-list-head { gap: 10px; padding: 18px 18px 12px; }
.template-sheet .sheet-head h2 { font-size: 21px; }
.template-groups { display: flex; gap: 6px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.template-groups::-webkit-scrollbar { display: none; }
.template-group { flex: none; min-height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; font-weight: 700; white-space: nowrap; color: var(--muted); }
.template-group[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.template-sheet .sheet-list { gap: 8px; padding: 12px 14px max(18px, env(safe-area-inset-bottom)); }
.template-row {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    text-align: left;
    background: var(--soft);
    transition: border-color .15s ease, transform .15s ease;
}
.template-row:hover, .template-row:focus-visible { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); outline: none; }
.template-row:active { transform: scale(.985); }
.template-emoji { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; font: 26px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.template-copy { display: grid; gap: 3px; min-width: 0; }
.template-copy strong { font-size: 15.5px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.template-copy small { font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--accent); }
.template-copy span { display: -webkit-box; overflow: hidden; font-size: 13.5px; line-height: 1.35; color: var(--muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.template-chevron { width: 18px; height: 18px; color: var(--muted); stroke-width: 2; }

@media (min-width: 640px) {
    .sheet.template-sheet { height: min(720px, calc(var(--dialog-height, 640px) - 64px)); }
}
@media (min-width: 720px) {
    .create-step { padding: 22px 24px; }
    .create-step-body { padding-left: 42px; }
}
@media (max-width: 400px) {
    .create-row { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
    .create-templates { justify-content: center; width: 42px; padding: 0; }
    .create-templates span { display: none; }
}
@media (max-width: 360px) {
    .visibility-options { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .create-form .is-filled { animation: none; }
}

/* ======================================================================== collections */
/* ==========================================================================
   Persönliche Listen: Meine Inhalte, Favoriten und Beobachtungsliste.
   Der Seitenkopf (.page-head) und die Titelsuche (.title-search) sind
   allgemeine Bausteine; hier steht nur, was diese Seiten zusätzlich brauchen.
   ========================================================================== */

/* ---------------------------------------------------------------- Meine Inhalte */

.mine { display: grid; gap: 20px; max-width: 1040px; margin: 0 auto; }

.mine-tools {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "modes search" "chips layouts";
    align-items: center;
    gap: 12px 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.mine-tools.is-updates { grid-template-areas: "modes layouts"; }
.mine-modes { grid-area: modes; gap: 3px; }
.mine-modes .segment { min-height: 36px; padding: 0 16px; font-size: 13px; }
.mine-tools .title-search { grid-area: search; }
.mine-tools .chips { grid-area: chips; }
.mine-tools .layout-switcher { grid-area: layouts; justify-self: end; }

/* Rubriken */
.mine-results { display: grid; gap: 58px; }
.mine-section {
    --section-color: var(--accent);
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line-strong);
    border-top: 4px solid var(--section-color);
    border-radius: 16px;
    background: var(--card);
}
.mine-section.is-joined { --section-color: var(--joined); }
.mine-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 4px 2px 16px; border-bottom: 1px solid var(--line-strong); }
.mine-section-head h2 { margin: 0 0 2px; font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.mine-section-head p { margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.mine-section-count {
    display: grid;
    place-items: center;
    min-width: 34px;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--section-color) 60%, transparent);
    border-radius: 999px;
    font-family: var(--font-data);
    font-size: 12px;
    font-weight: 600;
    color: var(--section-color);
}
.mine-section-empty { display: grid; justify-items: start; gap: 12px; padding: 8px 2px; }
.mine-section-empty p { margin: 0; color: var(--copy); }
.mine-results > .update-grid.layout-full { gap: 54px; }

/* ---------------------------------------------------------------- Favoriten */

.favorites, .observing { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.favorites-head { gap: 14px; }
.round-back { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--input); }
.round-back svg { width: 18px; height: 18px; stroke-width: 2; }
.favorites-modes .segment { min-height: 36px; padding: 0 16px; font-size: 13px; }
.favorites-filters { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; align-items: end; gap: 10px; }
.favorites-select { display: grid; gap: 5px; min-width: 0; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.favorites-reset { justify-self: start; min-height: 34px; padding: 1px 6px; font-size: 11px; font-weight: 700; color: var(--muted); }
.favorites-reset:hover { color: var(--text); }

/* ---------------------------------------------------------------- Beobachtungsliste */

.observing-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 28px; }
.observing-head > div { flex: 1 1 0; min-width: 0; }
.observing-head p { font-size: 14px; }
.observing-head-icon { display: grid; flex: none; place-items: center; width: 70px; color: var(--accent-light); }
.observing-head-icon svg { width: 66px; height: 58px; stroke-width: 1.8; }
/* Eine Karte nutzt die volle Breite, ab zwei stehen sie nebeneinander. */
.observing-grid { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 24px; }
.observing-empty { display: grid; gap: 8px; }
.observing-empty h2 { margin: 0; font-size: 20px; }
.observing-empty p { margin: 0; color: var(--copy); }

@media (max-width: 760px) {
    .mine-tools { grid-template-columns: minmax(0, 1fr); grid-template-areas: "modes" "search" "chips" "layouts"; }
    .mine-tools.is-updates { grid-template-areas: "modes" "layouts"; }
    .mine-tools .layout-switcher { justify-self: stretch; }
    .mine-section { padding: 10px; }
    .mine-section-head { min-height: 62px; }
    .mine-section-head p { display: none; }
    .favorites-filters { grid-template-columns: minmax(0, 1fr); }
    .observing-head { padding: 20px; }
    .observing-grid { grid-template-columns: minmax(0, 1fr); }
    .observing-head-icon { width: 54px; }
    .observing-head-icon svg { width: 50px; height: 44px; }
}

/* ======================================================================== events */
/* ==========================================================================
   Aktuelles: kurzer Kopf (Titel, Alle/Gefolgt, Updates/Challenges),
   darunter dieselben Karten wie in Entdecken. Nachladen beim Scrollen.
   Titel und Umschalter teilen sich die Gestaltung mit Entdecken (50-discover).
   ========================================================================== */

.events { max-width: 760px; margin: 0 auto; padding: 6px 0 40px; }
.events-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.events-scope { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.events-scope button { min-height: 32px; padding: 0 13px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.events-scope button.is-active { color: var(--text); background: var(--soft); box-shadow: inset 0 0 0 1px var(--line-strong); }
.events-panel { margin-top: 14px; }
.events-empty { margin: 24px 0; color: var(--muted); }
/* Große Karten in Aktuelles immer einspaltig – wie ein Verlauf zum Lesen */
.events .challenge-grid.layout-full { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 760px) {
    .events { padding-top: 0; }
}

/* ======================================================================== picker */
/* ==========================================================================
   Neues Update: Auswahl der Challenge als kompakte Zeilen mit Mini-Foto,
   Reitern (Alle / Eigene / Mitmachen), Suche und Sortierung.
   ========================================================================== */

.picker { width: 100%; max-width: 760px; margin: 0 auto; padding: 6px 0 40px; }

.picker-tools { display: grid; gap: 10px; }
.picker-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.picker-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 44px; padding: 0 8px; border-radius: 10px; font-size: 14px; font-weight: 700; line-height: 1.1; color: var(--muted); }
.picker-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-tab em, .picker-group h2 span {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.picker-tab em { background: color-mix(in srgb, var(--text) 10%, transparent); }
.picker-tab[aria-selected="true"] { color: var(--text); background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 1px var(--line); }
.picker-tab[aria-selected="true"] em { color: #111; background: var(--accent); }
.picker-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.picker-toolbar .title-search input { border-color: var(--line); border-radius: 12px; font-size: 14.5px; background: var(--card); box-shadow: none; }
.picker-sort .select-trigger { min-height: 44px; border-radius: 12px; }

/* Gruppen und Zeilen */
.picker-group { margin-top: 18px; }
.picker-group h2 { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; font-size: 12.5px; font-weight: 800; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.picker-group h2 span { color: var(--text); background: var(--soft); }
.picker-done > summary { display: flex; align-items: center; justify-content: space-between; padding-right: 6px; list-style: none; cursor: pointer; }
.picker-done > summary::-webkit-details-marker { display: none; }
.picker-done > summary h2 { margin-bottom: 0; }
.picker-done > summary svg { width: 18px; height: 18px; color: var(--muted); transition: transform .2s ease; }
.picker-done[open] > summary { margin-bottom: 8px; }
.picker-done[open] > summary svg { transform: rotate(90deg); }

.picker-list { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.picker-list.is-loading { margin-top: 16px; }
.picker-row { display: flex; align-items: center; gap: 14px; padding: 12px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s ease; }
.picker-list > :last-child { border-bottom: 0; }
.picker-row:hover { background: var(--soft); }
.picker-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.picker-row:active { background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.picker-row.is-done { opacity: .78; }

.picker-thumb { position: relative; display: grid; flex: 0 0 64px; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 14px; color: var(--muted); background: var(--soft); }
.picker-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.picker-thumb.is-empty { font-size: 24px; font-weight: 900; line-height: 1; color: rgba(255, 255, 255, .92); background: linear-gradient(140deg, hsl(var(--thumb-hue, 90) 45% 32%), hsl(calc(var(--thumb-hue, 90) + 40) 50% 20%)); }

.picker-body { display: grid; flex: 1 1 auto; gap: 5px; min-width: 0; }
.picker-body h3 { display: -webkit-box; margin: 0; overflow: hidden; font-size: 16px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.picker-lock { margin-right: 5px; font-size: 13px; }
.picker-meta { margin: 0; overflow: hidden; font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.picker-meta a, .picker-meta button { font-weight: 700; color: var(--copy); }
.picker-own { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.picker-progress { display: grid; gap: 5px; }
.picker-bar { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); }
.picker-bar > span { display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: hsl(var(--progress-hue, 90) 75% 52%); }
.picker-progress small { overflow: hidden; font-size: 12px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }

.picker-add { display: grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #111; background: var(--accent); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent); }
.picker-add svg { width: 22px; height: 22px; stroke-width: 2.4; }
.picker-add em { display: none; }
.picker-row.is-done .picker-add { color: var(--text); background: var(--soft); box-shadow: none; }

.picker-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 16px; padding: 28px 18px; border: 1px dashed var(--line); border-radius: 18px; text-align: center; color: var(--muted); }
.picker-empty h2 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--text); }
.picker-empty p { margin: 0; font-size: 14.5px; line-height: 1.45; }

/* Ladeansicht */
.is-loading .picker-row { cursor: default; }
.is-loading .picker-thumb, .is-loading .picker-body i { background: linear-gradient(90deg, var(--soft) 0%, color-mix(in srgb, var(--text) 8%, var(--soft)) 50%, var(--soft) 100%); background-size: 200% 100%; animation: shimmer 1.2s ease-in-out infinite; }
.is-loading .picker-body i { display: block; width: 70%; height: 12px; border-radius: 6px; }
.is-loading .picker-body i + i { width: 45%; }

@media (min-width: 720px) {
    .picker-toolbar { grid-template-columns: 1fr 220px; }
    .picker-thumb { flex-basis: 72px; width: 72px; height: 72px; }
    .picker-row { padding: 14px 16px; }
    .picker-add { display: inline-flex; flex-basis: auto; gap: 6px; width: auto; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; }
    .picker-add em { display: inline; font-size: 14px; font-style: normal; font-weight: 800; line-height: 1; }
    .picker-add svg { width: 18px; height: 18px; }
}
@media (max-width: 380px) {
    .picker-tab em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .is-loading .picker-thumb, .is-loading .picker-body i { animation: none; }
}

/* ======================================================================== messages */
/* ==========================================================================
   Nachrichten: Reiter Mitteilungen / Direktnachrichten, Gruppen nach Tagen,
   Messenger-Ansicht eines Gesprächs, Auswahl zum Löschen.
   ========================================================================== */

.inbox { width: 100%; max-width: 760px; margin: 0 auto; padding: 6px 0 40px; }

/* Kopf */
.inbox-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 6px 4px 16px; }
.inbox-head h1 { margin: 0; font-size: clamp(32px, 8vw, 42px); font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.inbox-sub { margin: 8px 0 0; font-size: 14.5px; line-height: 1.35; color: var(--muted); }
.inbox-sub.has-unread { font-weight: 600; color: var(--copy); }
.inbox-edit { flex: none; min-height: 40px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--card); }
.inbox-edit:hover { border-color: var(--line-strong); }
.inbox-edit[aria-pressed="true"] { border-color: var(--text); color: var(--card); background: var(--text); }

/* Reiter */
.inbox-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.inbox-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 46px; padding: 0 10px; border-radius: 10px; font-size: 14.5px; font-weight: 700; line-height: 1.1; color: var(--muted); transition: background .15s ease, color .15s ease; }
.inbox-tab > span:not(.inbox-count) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-tab[aria-selected="true"] { color: var(--text); background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 1px var(--line); }
.inbox-svg { flex: none; width: 18px; height: 18px; }
.inbox-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; background: var(--danger); }
.inbox-count.is-thread { flex: none; color: var(--accent-ink); background: var(--accent); }

.inbox-panel { margin-top: 14px; }

/* Werkzeugleiste */
.inbox-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 4px; }
.inbox-text-button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 6px; font-size: 13.5px; font-weight: 700; color: var(--accent); }
.inbox-text-button svg { width: 16px; height: 16px; }
.inbox-text-button.is-danger { color: var(--danger); }

/* Gruppen und Zeilen */
.inbox-group-title { margin: 20px 6px 8px; font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.inbox-list { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.inbox-row, .inbox-thread-row { position: relative; display: flex; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; transition: background .15s ease; }
.inbox-row { align-items: flex-start; }
.inbox-thread-row { align-items: center; }
.inbox-list > :last-child { border-bottom: 0; }
.inbox-row:hover, .inbox-thread-row:hover { background: var(--soft); }
.inbox-row:focus-visible, .inbox-thread-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Ungelesene Mitteilungen erkennt man am Punkt rechts, ungelesene Unterhaltungen zusätzlich am Hintergrund. */
.inbox-thread-row.is-unread { background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.inbox-row.is-trophy { background: linear-gradient(90deg, rgba(244, 197, 66, .1), transparent 70%), var(--card); }
.inbox-row.is-selected, .inbox-thread-row.is-selected { background: color-mix(in srgb, var(--accent) 14%, var(--card)); }

.inbox-avatar { position: relative; flex: 0 0 44px; width: 44px; height: 44px; }
.inbox-avatar .avatar { --avatar-size: 44px; font-size: 15px; }
.inbox-system-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--accent); background: var(--soft); }
.inbox-system-avatar svg { width: 22px; height: 22px; }
.inbox-system-avatar.is-trophy { color: #f5b301; background: color-mix(in srgb, #f5b301 14%, var(--card)); }
.inbox-system-avatar.is-lock { color: var(--private-light); background: var(--private-soft); }
.inbox-system-avatar.is-flag { color: #ffca88; background: rgba(133, 78, 20, .28); }
.inbox-badge { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--card); border-radius: 50%; color: #fff; background: var(--muted); }
.inbox-badge svg { width: 12px; height: 12px; stroke-width: 2.4; }
.inbox-badge.is-heart { background: #ff4d6d; }
.inbox-badge:is(.is-comment, .is-reply, .is-mention) { background: #3b82f6; }
.inbox-badge.is-eye { background: #8b5cf6; }
.inbox-badge.is-join { background: #10b981; }
.inbox-badge.is-spark { background: #f59e0b; }
.inbox-badge.is-trophy { background: #f5b301; }
.inbox-badge:is(.is-flag, .is-bell, .is-chat) { background: #64748b; }

.inbox-row-body { flex: 1 1 auto; min-width: 0; }
.inbox-row-title { margin: 1px 0 2px; font-size: 15px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.inbox-row-title + .inbox-row-text { color: var(--copy); font-size: 14px; }
.inbox-row-text { margin: 1px 0 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.inbox-row-text strong { font-weight: 800; }
.inbox-row-text .profile-link, .inbox-thread-name .profile-link { color: inherit; }
.inbox-row-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; font-size: 13px; line-height: 1.3; color: var(--muted); }
.inbox-row-side { display: flex; flex: none; align-items: center; align-self: center; gap: 10px; }
.inbox-thumb { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 10px; object-fit: cover; }
.inbox-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.inbox-inline-link { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-top: 6px; font-size: 13.5px; font-weight: 700; white-space: nowrap; color: var(--accent); }
.inbox-svg.is-forward { width: 15px; height: 15px; transform: rotate(180deg); }
.motivation-history { margin-top: 8px; font-size: 13.5px; color: var(--copy); }
.motivation-history summary { font-weight: 700; color: var(--accent); cursor: pointer; }

/* Auswahl zum Löschen */
.inbox-select { display: none; align-self: center; }
.inbox-select input { width: 20px; height: 20px; accent-color: var(--accent); }
.inbox.is-selecting .inbox-select { display: block; }
.inbox.is-selecting :is(.avatar-link, .profile-link) { pointer-events: none; }
.inbox-bulk {
    position: sticky;
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    font-size: 13px;
    color: var(--copy);
    background: var(--card);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.inbox-bulk-actions { display: flex; gap: 8px; margin-left: auto; }
.inbox-bulk-actions svg { width: 16px; height: 16px; }

/* Leere Zustände */
.inbox-empty { padding: 48px 24px; border: 1px dashed var(--line); border-radius: 18px; text-align: center; color: var(--muted); }
.inbox-empty svg { width: 40px; height: 40px; color: var(--accent); stroke-width: 1.5; }
.inbox-empty h2 { margin: 12px 0 6px; font-size: 18px; color: var(--text); }
.inbox-empty p { max-width: 340px; margin: 0 auto; font-size: 14px; line-height: 1.45; }
.inbox-footer { display: flex; justify-content: center; margin-top: 16px; }
.inbox-more { display: block; width: 100%; min-height: 44px; margin: 8px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--accent); background: var(--card); }
.inbox-more:hover { border-color: var(--line-strong); }

/* Gesprächsliste und neue Nachricht */
.inbox-new-chat { min-height: 46px; padding: 0 20px; }
.inbox-threads { margin-top: 10px; }
.inbox-thread-name { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; }
.inbox-thread-name strong { font-size: 15.5px; font-weight: 800; }
.inbox-thread-name time { flex: none; font-size: 12.5px; color: var(--muted); }
.inbox-thread-preview { margin: 3px 0 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.inbox-thread-row.is-unread .inbox-thread-preview { font-weight: 600; color: var(--text); }
.inbox-you { font-weight: 700; }
.inbox-compose { margin-bottom: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.inbox-compose-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.inbox-compose-head h2 { margin: 0; font-size: 18px; }
.inbox-compose-form { display: grid; gap: 14px; }
.inbox-recipient, .inbox-compose-text { display: grid; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.inbox-compose-send { justify-self: start; }

/* Gespräch */
.inbox-chat { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.inbox-chat.is-target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.inbox-chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.inbox-chat-head h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16.5px; font-weight: 800; }
.inbox-back { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--soft); }
.inbox-back svg { width: 20px; height: 20px; }
.inbox-messages { display: flex; flex-direction: column; gap: 6px; min-height: 240px; padding: 14px 12px 18px; }
.inbox-day { margin: 10px 0 4px; text-align: center; }
.inbox-day span { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--soft); }
.message-row { display: flex; align-items: flex-end; gap: 8px; }
.message-row.is-sent { justify-content: flex-end; }
.message { max-width: min(80%, 520px); padding: 9px 13px 7px; border-radius: 18px; background: var(--soft); }
.message-row.is-sent .message { border-bottom-right-radius: 6px; color: var(--accent-ink); background: var(--accent); }
.message-row.is-received .message { border-bottom-left-radius: 6px; }
.message p { margin: 0; font-size: 15px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-time { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; text-align: right; opacity: .78; }
.more-button.is-message { flex: none; align-self: center; width: 30px; height: 30px; opacity: .7; }
.more-button.is-message svg { width: 16px; height: 16px; }
.more-button.is-message:is(:hover, :focus-visible) { opacity: 1; }
.inbox.is-selecting .more-button.is-message { display: none; }
.message-row.is-selected .message, .message.is-target { outline: 2px solid var(--accent); outline-offset: 2px; }
.message.is-target { box-shadow: 0 0 0 5px var(--accent-glow); }
.inbox-reply {
    position: sticky;
    /* über der unteren Leiste – bei offener Tastatur (Leiste ausgeblendet) direkt über der Tastatur */
    bottom: max(calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px)), var(--keyboard-inset));
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
    border-radius: 0 0 18px 18px;
    background: var(--card);
}
.inbox-reply textarea { flex: 1 1 auto; min-height: 44px; max-height: 160px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 22px; font-size: 15px; line-height: 1.35; resize: none; background: var(--input); }
.inbox-reply textarea:focus { border-color: var(--accent); outline: none; }
.inbox-send { display: grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--accent-ink); background: var(--accent); }
.inbox-send svg { width: 20px; height: 20px; }
.inbox-send:disabled { opacity: .5; cursor: wait; }
.inbox-chat-head .more-button { margin-left: auto; }

@media (max-width: 760px) {
    .inbox-tab { gap: 6px; font-size: 13.5px; }
    .inbox-new-chat { width: 100%; }
    .inbox-row, .inbox-thread-row { padding: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .inbox-tab, .inbox-row, .inbox-thread-row { transition: none; }
}

/* ---- Benachrichtigungen prüfen (nur Android-App, Bereich „Mitteilungen“) */
.push-health-slot:empty { display: none; }
.push-health-slot { margin: 0 0 12px; }
.push-health { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px 12px; padding: 14px; border: 1px solid rgba(255, 95, 109, .55); border-radius: var(--radius-card); background: var(--danger-soft); }
.push-health-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: var(--danger); }
.push-health-icon svg { width: 20px; height: 20px; stroke-width: 2; }
.push-health-copy { display: grid; gap: 4px; min-width: 0; }
.push-health-copy strong { font-size: 15px; line-height: 1.25; }
.push-health-copy p { margin: 0; font-size: 13.5px; line-height: 1.45; color: #f3c9ce; }
.push-health-actions { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 2; }
.push-health-actions .button { min-height: 38px; }
.push-health-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 4px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.push-health-link svg { width: 17px; height: 17px; }
.push-health-link:hover { color: var(--text); }
.push-sheet { gap: 14px; }
.push-sheet .sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.push-checks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.push-check { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-control); }
.push-check > span:nth-child(2) { display: grid; gap: 2px; }
.push-check strong { font-size: 14.5px; }
.push-check small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.push-check-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 900; }
.push-check-mark svg { width: 16px; height: 16px; stroke-width: 2.6; }
.push-check.is-ok .push-check-mark { color: var(--accent-ink); background: var(--accent); }
.push-check.is-bad { border-color: rgba(255, 95, 109, .5); }
.push-check.is-bad .push-check-mark { color: #fff; background: var(--danger); }
.push-check.is-unknown .push-check-mark { color: var(--muted); background: var(--soft-2); }
.push-sheet-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.push-sheet-actions .button { min-height: 46px; }
.push-tips ul { display: grid; gap: 8px; margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.45; color: var(--copy); }

/* ======================================================================== scenes */
/* ==========================================================================
   Vollbild-Szenen: Motivation erhalten und Pokalübergabe – dazu die
   Grundregeln für Pokal-Bilder.
   ========================================================================== */

/* Pokal-Bilder */
/* Größe bestimmt jeweils die Umgebung (Schrank, Super-Challenges, Pokalübergabe). */
.trophy-svg { display: block; stroke: none; }
.trophy-image { display: block; object-fit: contain; }

/* Schließen-Knopf beider Szenen */
.scene-close {
    position: absolute;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    z-index: 4;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    font: 26px/1 sans-serif;
    color: #fff;
    background: rgba(9, 14, 18, .7);
}

/* ---------------------------------------------------------------- Motivation */

.motivation-celebration,
.motivation-celebration::backdrop { background: #090e12; }
.motivation-celebration[open] { display: grid; place-items: center; padding: 28px; overflow: hidden; color: #fff; isolation: isolate; animation: scene-in .25s ease-out both; }
.motivation-celebration.is-finishing { opacity: 0; transition: opacity .38s ease-in; animation: none; }
.motivation-celebration.is-finishing .motivation-moment { transform: scale(1.03); transition: transform .4s ease-in; }
.motivation-rain { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; transform: translateZ(0); }
.motivation-aura {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 42%, rgba(149, 235, 72, .19), transparent 58%), radial-gradient(ellipse at 80% 90%, rgba(138, 112, 242, .13), transparent 55%);
    animation: motivation-aura-in 1.6s ease-out both;
}
.motivation-rays {
    position: absolute;
    top: 42%;
    left: 50%;
    z-index: 0;
    width: 130vmax;
    height: 130vmax;
    margin: -65vmax 0 0 -65vmax;
    opacity: 0;
    pointer-events: none;
    background: repeating-conic-gradient(from 0deg, rgba(184, 242, 90, .1) 0deg 7deg, transparent 7deg 22deg);
    -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 18%, transparent 42%);
    mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 18%, transparent 42%);
    contain: strict;
    animation: motivation-rays-in 1.4s .2s ease-out forwards, scene-spin 26s linear infinite;
}
.motivation-moment { position: relative; z-index: 2; width: min(620px, 100%); text-align: center; pointer-events: none; text-shadow: 0 3px 25px #090e12, 0 0 60px #090e12; }
.motivation-moment a, .motivation-moment .profile-link { pointer-events: auto; }
.motivation-sender { margin: 0 0 26px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; color: #d6e4d0; animation: scene-copy-in .6s .1s both; }
.motivation-people { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin: -14px 0 24px; font-size: 13px; color: #d6e4d0; }
.motivation-people span { animation: scene-copy-in .5s calc(.2s + var(--name-order, 0) * 60ms) both; }
.motivation-hero-emoji {
    position: relative;
    display: inline-block;
    margin-bottom: 24px;
    font: 110px/1.2 "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    filter: drop-shadow(0 14px 34px rgba(160, 245, 80, .25));
    animation: motivation-emoji-pop 1.1s .12s cubic-bezier(.16, 1, .3, 1) both, motivation-emoji-float 3.4s 1.3s ease-in-out infinite;
}
.motivation-hero-emoji::before,
.motivation-hero-emoji::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}
/* Zwei Ringe: grün, kurz danach violett */
.motivation-hero-emoji::before { border-color: rgba(184, 242, 90, .75); box-shadow: 0 0 24px rgba(184, 242, 90, .35); animation: motivation-shock 1.1s .32s cubic-bezier(.2, .8, .3, 1) both; }
.motivation-hero-emoji::after { border-color: rgba(173, 156, 255, .6); box-shadow: 0 0 24px rgba(173, 156, 255, .3); animation: motivation-shock 1.1s .5s cubic-bezier(.2, .8, .3, 1) both; }
.motivation-message { margin: 0; font-size: clamp(28px, 7.5vw, 56px); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; overflow-wrap: anywhere; text-wrap: balance; color: #fff; }
.motivation-word { display: inline-block; opacity: 0; animation: motivation-word-in .7s calc(.42s + var(--w, 0) * 85ms) cubic-bezier(.2, .8, .2, 1) both; }
.motivation-signature { display: block; margin-top: 28px; font-size: 13px; letter-spacing: .04em; color: #b7fc79; animation: scene-copy-in .7s .4s both; }
.motivation-timeline {
    position: absolute;
    bottom: max(26px, env(safe-area-inset-bottom));
    left: 50%;
    z-index: 3;
    width: min(220px, 50vw);
    height: 3px;
    margin-left: min(-110px, -25vw);
    overflow: hidden;
    border-radius: 999px;
    pointer-events: none;
    background: rgba(255, 255, 255, .12);
}
.motivation-timeline span { display: block; height: 100%; border-radius: inherit; transform-origin: left center; background: linear-gradient(90deg, #d8ff8a, #a3e635); animation: motivation-timeline var(--motivation-life, 4300ms) linear both; }

/* ---------------------------------------------------------------- Pokalübergabe */

.trophy-ceremony,
.trophy-ceremony::backdrop { background: #07090d; }
.trophy-ceremony[open] {
    display: grid;
    place-items: center;
    padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
    overflow: hidden auto;
    color: #fff;
    isolation: isolate;
    animation: scene-in .3s ease-out both;
}
.trophy-ceremony-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 42% at 50% 36%, rgba(244, 197, 66, .3), transparent 70%), radial-gradient(ellipse 80% 40% at 50% 100%, rgba(163, 230, 53, .12), transparent 70%);
    animation: motivation-aura-in 1.4s ease-out both;
}
.trophy-ceremony-rays {
    position: absolute;
    top: 34%;
    left: 50%;
    z-index: 0;
    width: 170vmax;
    height: 170vmax;
    margin: -85vmax 0 0 -85vmax;
    pointer-events: none;
    background: repeating-conic-gradient(from 0deg, rgba(255, 214, 110, .1) 0deg 6deg, transparent 6deg 18deg);
    -webkit-mask-image: radial-gradient(circle, #000 0, transparent 34%);
    mask-image: radial-gradient(circle, #000 0, transparent 34%);
    animation: scene-in 1.2s .2s ease-out both, scene-spin 40s linear infinite;
}
.trophy-ceremony-confetti { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.trophy-ceremony-confetti i { position: absolute; top: -24px; left: var(--x); width: 8px; height: 14px; border-radius: 2px; opacity: 0; background: #f4c542; animation: trophy-confetti var(--t) var(--d) cubic-bezier(.2, .6, .4, 1) 1 both; }
.trophy-ceremony-confetti i.is-1 { width: 7px; height: 7px; border-radius: 50%; background: #a3e635; }
.trophy-ceremony-confetti i.is-2 { background: #fff4cf; }
.trophy-ceremony-confetti i.is-3 { height: 10px; background: #ffb547; }
.trophy-ceremony-stage { position: relative; z-index: 2; display: grid; justify-items: center; width: min(460px, 100%); text-align: center; }
.trophy-ceremony-eyebrow { margin: 0 0 18px; font-size: 12px; font-weight: 800; letter-spacing: .24em; color: #f4d27a; animation: scene-copy-in .6s .15s both; }
.trophy-ceremony-award { display: grid; justify-items: center; margin-bottom: 26px; }
.trophy-ceremony-figure {
    position: relative;
    display: grid;
    place-items: center;
    width: min(46vw, 190px);
    height: min(58vw, 240px);
    filter: drop-shadow(0 18px 40px rgba(244, 197, 66, .38));
    animation: trophy-rise 1.25s .25s cubic-bezier(.16, 1, .3, 1) both, trophy-float 4.5s 1.6s ease-in-out infinite;
}
.trophy-ceremony-figure > :is(svg, img) { width: 100%; height: 100%; }
.trophy-ceremony-figure > img { border-radius: 14px; }
.trophy-ceremony-shine { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; pointer-events: none; }
.trophy-ceremony-shine::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); animation: trophy-shine 1.1s 1.35s ease-in-out both; }
.trophy-ceremony-plinth { width: min(52vw, 220px); height: 14px; margin-top: 4px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(244, 197, 66, .55), rgba(244, 197, 66, 0) 70%); animation: scene-copy-in .8s .9s both; }
.trophy-ceremony-title { margin: 0 0 10px; font-size: clamp(28px, 8vw, 40px); font-weight: 900; line-height: 1.08; letter-spacing: -.03em; overflow-wrap: anywhere; color: #fff; animation: scene-copy-in .7s 1s both; }
.trophy-ceremony-text { margin: 0; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; color: #e3e8ef; animation: scene-copy-in .7s 1.12s both; }
.trophy-ceremony-text strong { color: #fff; }
.trophy-ceremony-label { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: #f4d27a; animation: scene-copy-in .7s 1.2s both; }
.trophy-ceremony-date { margin: 6px 0 0; font-size: 13px; color: #9aa6b6; animation: scene-copy-in .7s 1.25s both; }
.trophy-ceremony-actions { display: grid; gap: 10px; width: 100%; margin-top: 28px; animation: scene-copy-in .7s 1.35s both; }
.trophy-ceremony-actions button { width: 100%; min-height: 52px; border-radius: 14px; font-size: 16px; font-weight: 800; }
.trophy-ceremony-primary { color: #1b1404; background: linear-gradient(180deg, #ffe08a, #f4c542); box-shadow: 0 10px 30px -10px rgba(244, 197, 66, .7); }
.trophy-ceremony-secondary { border: 1px solid rgba(255, 255, 255, .22); color: #fff; background: rgba(255, 255, 255, .06); }
.trophy-ceremony-actions button:focus-visible, .trophy-ceremony .scene-close:focus-visible { outline: 2px solid #fff4cf; outline-offset: 3px; }

@media (min-width: 520px) {
    .trophy-ceremony-actions { grid-template-columns: 1fr 1fr; }
}

@keyframes scene-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes scene-spin { to { rotate: 360deg; } }
@keyframes scene-copy-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes motivation-aura-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes motivation-rays-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes motivation-emoji-pop { 0% { opacity: 0; transform: translateY(36px) scale(.45) rotate(-16deg); } 55% { opacity: 1; transform: translateY(-8px) scale(1.12) rotate(5deg); } 78% { transform: translateY(3px) scale(.98) rotate(-2deg); } 100% { opacity: 1; transform: none; } }
@keyframes motivation-emoji-float { 0%, 100% { transform: none; } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes motivation-shock { 0% { opacity: .9; transform: scale(.35); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes motivation-word-in { 0% { opacity: 0; transform: translate3d(0, 16px, 0) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes motivation-timeline { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes trophy-rise { 0% { opacity: 0; transform: translateY(70px) scale(.55) rotate(-8deg); } 60% { opacity: 1; transform: translateY(-10px) scale(1.08) rotate(2deg); } 100% { opacity: 1; transform: none; } }
@keyframes trophy-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes trophy-shine { from { left: -60%; } to { left: 130%; } }
@keyframes trophy-confetti { 0% { opacity: 0; transform: none; } 8% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), 108vh) rotate(var(--r)); } }

@media (prefers-reduced-motion: reduce) {
    .motivation-rays, .motivation-rain, .trophy-ceremony-confetti, .trophy-ceremony-shine { display: none; }
    .motivation-celebration *, .motivation-celebration *::before, .motivation-celebration *::after,
    .trophy-ceremony :is(.trophy-ceremony-glow, .trophy-ceremony-rays, .trophy-ceremony-figure, .trophy-ceremony-eyebrow, .trophy-ceremony-title,
        .trophy-ceremony-text, .trophy-ceremony-label, .trophy-ceremony-date, .trophy-ceremony-actions, .trophy-ceremony-plinth) { animation: none; }
    .motivation-word { opacity: 1; }
    .motivation-hero-emoji::before, .motivation-hero-emoji::after { opacity: 0; }
}

/* ======================================================================== profile */
/* ==========================================================================
   Öffentliches Profil, Folgen-Knopf und Trophäenschrank
   (der Schrank erscheint auch im Account unter „Trophäen“).
   ========================================================================== */

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

.profile { display: grid; gap: 16px; width: min(760px, 100%); margin: 0 auto; }

.profile-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 8%, var(--card)); color: var(--text);
}
.profile-banner p { margin: 0; font-size: 14px; line-height: 1.35; }
.profile-banner button {
    flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
    background: var(--accent); color: var(--accent-ink); font: 700 14px/1 var(--font); cursor: pointer;
}
.profile-banner.is-blocked { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, var(--card)); }

/* ---------------------------------------------------------------- Kopf
   Plakatfläche wie bei Challenges ohne Foto: Raster mit schräger Linie,
   innerer Rahmen, grüner Strich links, grüne Ecke. Darauf Bild, Name, Bio
   und die Zahlenreihe; darunter zwei gleich große Knöpfe. */

.profile-card {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 18px;
    padding: 34px 30px 28px 42px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
        radial-gradient(circle at 84% 16%, rgba(255, 255, 255, .1), transparent 30%),
        linear-gradient(145deg, #0f1115 0%, #1a1d24 58%, #0b0c10 100%);
}
.profile-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(135deg, transparent 0 48%, rgba(255, 255, 255, .06) 48% 48.25%, transparent 48.25% 100%),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: auto, 32px 32px, 32px 32px;
    pointer-events: none;
}
.profile-card::after { content: ""; position: absolute; inset: 14px; z-index: -1; border: 1px solid rgba(255, 255, 255, .14); pointer-events: none; }
.profile-card .plain-corner { top: 28px; right: 28px; }
.profile-card:has(.profile-menu-button) .plain-corner { top: 76px; }
.profile-menu-button {
    position: absolute; top: 20px; right: 20px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 50%; color: var(--text); background: rgba(10, 12, 16, .6);
}
.profile-menu-button svg { width: 22px; height: 22px; }
.profile-menu-button:hover { background: var(--soft); }
.profile-menu-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.profile-head { display: flex; align-items: center; gap: 18px; min-width: 0; padding-right: 48px; }
.profile-avatar {
    display: grid; place-items: center; flex: none; width: 96px; height: 96px; padding: 0; overflow: hidden;
    border: 0; border-radius: 50%; background: var(--soft); color: var(--text);
    box-shadow: 0 0 0 2px #0f1115, 0 0 0 4px var(--accent);
    font: 900 28px/1 var(--font); cursor: zoom-in;
    transition: width .2s ease, height .2s ease, border-radius .2s ease;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar.is-expanded { width: min(240px, 54vw); height: min(240px, 54vw); border-radius: 22px; cursor: zoom-out; }
.profile-head:has(.profile-avatar.is-expanded) { flex-wrap: wrap; }

.profile-names { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.profile-names h1 { margin: 0; font-size: clamp(28px, 4vw, 40px); font-weight: 800; font-stretch: 112%; line-height: 1.05; letter-spacing: -.015em; overflow-wrap: anywhere; }
.profile-username { margin: 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.profile-names .follow-badge { margin-top: 4px; }
.profile-bio { max-width: 60ch; margin: 0; font-size: 16px; line-height: 1.55; color: var(--copy); white-space: pre-line; }
.profile-bio.is-empty { color: var(--muted); }

/* Zahlenreihe: groß die Zahl, klein die Bedeutung */
.profile-stats { display: flex; gap: 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); }
.profile-stat { display: grid; flex: 1; gap: 2px; min-width: 0; }
.profile-stat + .profile-stat { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .1); margin-left: 18px; }
.profile-stat strong { font-size: 26px; font-weight: 800; font-stretch: 112%; line-height: 1.1; font-variant-numeric: tabular-nums; }
.profile-stat small { font-size: 13px; color: var(--muted); }

/* Zwei gleich große Knöpfe */
.profile-connect { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.profile-connect.is-own { grid-template-columns: 1fr; }
.profile-connect .follow-button,
.profile-connect .button { min-height: 52px; border-radius: 14px; font-size: 16px; gap: 8px; }
.profile-connect .button svg { width: 19px; height: 19px; }

.profile-contact-hint { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); text-align: center; }
.profile-connect .profile-message.is-pending { border-style: dashed; }

.profile-challenges h2 { margin: 6px 0 12px; font-size: 22px; font-stretch: 112%; }

@media (max-width: 760px) {
    .profile-card { padding: 30px 22px 24px 34px; gap: 16px; }
    .profile-head { gap: 14px; }
    .profile-avatar { width: 76px; height: 76px; font-size: 22px; }
    .profile-avatar.is-expanded { width: min(220px, 70vw); height: min(220px, 70vw); }
    .profile-stat strong { font-size: 22px; }
    .profile-stat + .profile-stat { padding-left: 14px; margin-left: 14px; }
}

/* ---------------------------------------------------------------- Folgen */

.follow-badge { padding: 4px 9px; border-radius: 999px; background: var(--soft); color: var(--text); font-size: 12px; font-weight: 700; }

.follow-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
    min-height: 40px; padding: 0 16px; border: 1px solid var(--accent); border-radius: 999px;
    background: var(--accent); color: var(--accent-ink); font: 800 14px/1 var(--font); white-space: nowrap; cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.follow-button svg { width: 16px; height: 16px; }
.follow-button.is-following { border-color: var(--line); background: var(--soft); color: var(--text); }
.follow-button.is-compact { min-height: 36px; padding: 0 12px; font-size: 13px; }
.follow-button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.follow-button:disabled { opacity: .6; cursor: progress; }
/* Nur mit Maus: Hinweis „Klick entfolgt“ – am Handy bliebe der Knopf sonst rot. */
@media (hover: hover) {
    .follow-button.is-following:hover { border-color: var(--danger); color: var(--danger); }
}

/* ---------------------------------------------------------------- Challenges */

.profile-empty { padding: 28px; text-align: center; }
.profile-empty p { margin: 0; }

/* ---------------------------------------------------------------- Trophäenschrank */
/*
 * Vitrine bei Nacht: schwarze Rückwand mit warmem Licht von oben, goldene Regalkanten. Gewonnene
 * Pokale stehen im goldenen Rahmen, die übrigen als leere Glasvitrine mit
 * „?“-Schild (components/trophy-cabinet.js).
 * Jede Eigenschaft wird je Element genau einmal gesetzt – keine Regel nimmt eine
 * andere zurück. Handy und Computer: über clamp()/min(), nicht über Media-Queries.
 * Farben: Rückwand #050505/#17140f, Glas #0a1426/#02040a, Gold #ffd877/#d9a63c,
 * Schrift #ece8e0/#9d978c, Pokalname #ffd75e.
 */

.trophy-cabinet { overflow: hidden; }
.trophy-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; list-style: none; cursor: pointer; }
.trophy-disclosure > summary::-webkit-details-marker { display: none; }
.trophy-disclosure > summary strong { display: block; font-size: 20px; }
.trophy-disclosure > summary small { display: block; margin-top: 5px; color: var(--muted); }
.trophy-disclosure-chevron { font-size: 28px; color: var(--accent); }
.trophy-disclosure[open] .trophy-disclosure-chevron { transform: rotate(180deg); }
.trophy-disclosure-body { padding-top: 18px; }

.trophy-vitrine {
    display: grid; gap: 20px; padding: clamp(16px, 4vw, 26px);
    border: 1px solid rgba(255, 236, 200, .08); border-radius: 18px;
    background: radial-gradient(120% 50% at 50% 0%, #17140f, #0a0908 55%), #050505;
    box-shadow: inset 0 1px 0 rgba(255, 236, 200, .05), inset 0 -60px 80px rgba(0, 0, 0, .5);
}
.trophy-vitrine > .button { justify-self: start; }
.trophy-hall { display: grid; gap: 6px; max-width: 46ch; }
.trophy-hall h2 { margin: 0; font-size: clamp(21px, 5.4vw, 26px); font-weight: 800; line-height: 1.15; color: #ece8e0; }
.trophy-hall p { margin: 0; font-size: 14px; line-height: 1.5; color: #9d978c; }

/* Zwei Plätze nebeneinander auf dem Handy, drei am Computer – über die Mindestbreite, ohne Media-Query. */
.trophy-shelf {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 30vw, 170px), 1fr));
    gap: clamp(22px, 4vw, 30px) clamp(10px, 2vw, 16px); padding: 2px 4px 0;
}
.trophy-slot { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; padding-bottom: 16px; text-align: center; }
/* Goldene Regalkante unter jedem Platz; nebeneinander ergeben sie ein durchgehendes Brett. */
.trophy-slot::after {
    content: ""; position: absolute; left: -8px; right: -8px; bottom: 0; height: 4px;
    background: linear-gradient(180deg, #fff0b8, #d9a63c);
    box-shadow: 0 0 12px rgba(255, 200, 90, .55), 0 6px 14px rgba(0, 0, 0, .6);
}
.trophy-slot > strong { margin-top: 8px; font-size: clamp(13px, 3.6vw, 15px); line-height: 1.3; overflow-wrap: anywhere; color: #ffd75e; }
.trophy-slot > small { font-size: clamp(11px, 3vw, 12px); color: #b4aea3; }
.trophy-slot[data-trophy="silver-cup"] { --medal-glow: rgba(220, 228, 240, .16); }
.trophy-slot[data-trophy="bronze-cup"] { --medal-glow: rgba(214, 140, 80, .18); }
.trophy-slot:is([data-trophy="medal"], [data-trophy="star-trophy"]) { --medal-glow: color-mix(in srgb, var(--accent) 20%, transparent); }

/* Gewonnen: hohes Pokalbild im goldenen Rahmen */
.trophy-frame {
    position: relative; display: block; width: 100%; aspect-ratio: 290 / 472; overflow: hidden; border-radius: 12px;
    box-shadow: 0 0 0 1.5px #ffd877, 0 0 0 4px rgba(120, 70, 10, .55), 0 0 22px rgba(255, 170, 60, .55);
}
.trophy-frame > :is(.trophy-svg, .trophy-image) { width: 100%; height: 100%; }

/* Gewonnen: gezeichneter Pokal oder Medaille als rundes Abzeichen */
.trophy-medal {
    position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
    background: radial-gradient(circle at 50% 60%, var(--medal-glow, rgba(255, 214, 102, .2)), transparent 68%);
}
.trophy-medal > :is(.trophy-svg, .trophy-image) { width: 68px; height: 68px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); }

/* Ein Lichtstreif beim Öffnen (nur wenn Bewegung erwünscht ist, siehe unten). */
.trophy-shine { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.trophy-shine::after {
    content: ""; position: absolute; top: -20%; bottom: -20%; left: -70%; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 250, 230, .55), transparent); transform: skewX(-18deg);
}

/* Noch nicht gewonnen: leere, dunkle Glasvitrine. Das Licht fällt je Platz links oder rechts oben ein
   (--glint-x: 0% oder 100%): feine helle Kante oben und an der Seite, dazu ein weicher Schein. */
.trophy-glass {
    display: block; aspect-ratio: 290 / 472;
    border: 1px solid rgba(90, 130, 200, .1);
    background:
        linear-gradient(90deg, transparent calc(var(--glint-x, 0%) - 50%), rgba(110, 165, 240, .45) var(--glint-x, 0%), transparent calc(var(--glint-x, 0%) + 50%)) top / 100% 1px no-repeat,
        linear-gradient(180deg, rgba(110, 165, 240, .4), transparent) var(--glint-x, 0%) 0 / 1px 36% no-repeat,
        radial-gradient(50% 28% at var(--glint-x, 0%) 0%, rgba(60, 110, 210, .14), transparent 70%),
        linear-gradient(135deg, transparent 38%, rgba(160, 200, 255, .025) 48%, transparent 58%),
        linear-gradient(160deg, #0a1426, #050a15 55%, #02040a);
    box-shadow: inset 0 1px 0 rgba(140, 190, 255, .1), inset 0 0 40px rgba(0, 0, 0, .7), 0 10px 24px -14px rgba(0, 0, 0, .9);
}
.trophy-slot > .trophy-glass { width: 100%; border-radius: 12px; }
.trophy-plaque {
    display: grid; place-items: center; width: 40px; height: 18px; margin-top: 10px; border-radius: 4px;
    font-size: 11px; font-weight: 900; line-height: 1; color: #3a2606;
    background: linear-gradient(180deg, #ffe7a0, #d9a63c 55%, #9a6b1c);
    box-shadow: 0 0 0 1px #5a3d10, 0 0 10px rgba(255, 196, 80, .45);
}

.trophy-challenge { max-width: 100%; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; color: #9d978c; }
button.trophy-challenge:hover { text-decoration: underline; }

.trophy-extra,
.trophy-open { display: grid; margin-top: 26px; }
.trophy-extra { gap: 12px; }
.trophy-open { gap: 8px; }
.trophy-extra > h3,
.trophy-open > h3 { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: #ece8e0; }

.trophy-open-row {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
    border: 1px solid rgba(255, 236, 200, .1); border-radius: 12px; background: #0a0908; text-align: left;
}
.trophy-open-row:hover { box-shadow: 0 0 0 1px #d9a63c; }
.trophy-open-row > span:nth-child(2) { display: grid; flex: 1; gap: 2px; min-width: 0; }
.trophy-open-row small { color: #9d978c; font-size: 12px; overflow-wrap: anywhere; }
.trophy-open-row em { color: #ffd75e; font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }
.trophy-open-icon { display: grid; flex: none; place-items: center; width: 38px; height: 48px; }
/* Gezeichneter, noch nicht gewonnener Pokal: schwarze Silhouette mit goldener Kante */
.trophy-open-icon > .trophy-svg { width: 38px; height: 38px; filter: brightness(0) drop-shadow(0 0 1px rgba(255, 225, 140, .95)) drop-shadow(0 0 6px rgba(201, 162, 74, .5)); }
.trophy-open-icon > .trophy-glass { width: 30px; border-radius: 5px; }

@media (prefers-reduced-motion: no-preference) {
    .trophy-shine::after { animation: trophy-sweep 1.4s var(--shine-delay, .5s) cubic-bezier(.4, 0, .2, 1) both; }
}
@keyframes trophy-sweep { from { left: -70%; } to { left: 140%; } }

/* ======================================================================== account */
/* ==========================================================================
   Profil-Menü (Account): Startseite mit Profilkopf und Menüliste,
   Unterseiten mit „Menü“-Knopf, Listen, Folgen und Einstellungen.
   Alles mit min-width: 0, damit lange Namen nie breiter als der Bildschirm werden.
   ========================================================================== */

.acc {
    --acc-radius: 18px;
    display: block;
    width: 100%;
    max-width: 680px;
    min-width: 0;
    margin: 0 auto;
    padding: 6px 0 40px;
}
.acc svg { width: 18px; height: 18px; flex: none; }
.acc h1[tabindex="-1"]:focus { outline: none; }

/* ---------------------------------------------------------------- Profilkopf */

.acc-hero {
    display: grid; gap: 14px; min-width: 0; padding: 18px;
    border: 1px solid var(--line); border-radius: var(--acc-radius);
    background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 55%), var(--card);
}
.acc-hero-top { display: flex; align-items: center; gap: 16px; min-width: 0; }
.acc-hero-avatar { position: relative; flex: none; }
.acc-hero-avatar .avatar { --avatar-size: 76px; box-shadow: 0 0 0 3px var(--card), 0 0 0 5px color-mix(in srgb, var(--accent) 55%, transparent); }
.acc-avatar-edit {
    position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
    border: 3px solid var(--card); border-radius: 50%; background: var(--accent); color: var(--accent-ink);
}
.acc-avatar-edit svg { width: 14px; height: 14px; stroke-width: 2.1; }
.acc-avatar-edit:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.acc-hero-copy { flex: 1 1 auto; min-width: 0; }
.acc-hero-copy h1 { margin: 0; font-size: clamp(24px, 6.5vw, 32px); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; overflow-wrap: anywhere; }
.acc-hero-handle { margin: 5px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
/* Über mich: bis zu sechs Zeilen, dann „Mehr lesen“ (ui/overflow.js) */
.acc-hero-bio {
    min-width: 0; padding: 2px 0 2px 14px; border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    color: var(--copy); font-size: 14.5px; line-height: 1.5;
}
.acc-hero-bio .expandable-label { margin-bottom: 6px; font-family: var(--font-data); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; color: var(--accent); }
.acc-hero-bio .expandable-toggle, .profile-bio .expandable-toggle { font-size: 13.5px; font-weight: 700; color: var(--accent); }
.acc-bio-add {
    justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px;
    border: 1px dashed var(--line-strong); border-radius: 999px; color: var(--muted); font-size: 13.5px; font-weight: 700;
}
.acc-bio-add:hover { border-color: var(--accent); color: var(--text); }

/* Zahlen: Follower · Folge ich · Trophäen */
.acc-hero-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; overflow: hidden;
    border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--soft) 70%, transparent);
}
.acc-hero-stat {
    display: grid; justify-items: center; gap: 3px; min-width: 0; min-height: 60px; padding: 9px 4px;
    border-left: 1px solid var(--line); color: var(--text);
}
.acc-hero-stat:first-child { border-left: 0; }
.acc-hero-stat:hover { background: var(--soft); }
.acc-hero-stat:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.acc-hero-stat strong { font-size: 20px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.acc-hero-stat span { max-width: 100%; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }

.acc-hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.acc-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 42px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--soft); color: var(--text);
    font-size: 14px; font-weight: 700; line-height: 1; transition: border-color .15s ease;
}
.acc-pill span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.acc-pill:hover { border-color: var(--line-strong); }
.acc-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acc-pill.is-accent { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }

/* ---------------------------------------------------------------- Menüliste */

.acc-menu { margin-top: 18px; }
.acc-menu-title { margin: 0 4px 8px; color: var(--muted); font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.acc-menu-row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 64px; padding: 10px 6px 10px 12px;
    border: 1px solid var(--line); border-top-width: 0; background: var(--card); color: var(--text); text-align: left;
    transition: background .15s ease;
}
/* Gruppen mit Überschrift und Gruppen aus einem einzelnen, selbsterklärenden Eintrag (Community) */
:is(.acc-menu-title + .acc-menu-row, .acc-menu > .acc-menu-row:first-child) { border-top-width: 1px; border-radius: var(--acc-radius) var(--acc-radius) 0 0; }
.acc-menu-row:last-child { border-radius: 0 0 var(--acc-radius) var(--acc-radius); }
:is(.acc-menu-title + .acc-menu-row, .acc-menu > .acc-menu-row:first-child):last-child { border-radius: var(--acc-radius); }
.acc-menu-row:hover { background: var(--soft); }
.acc-menu-row:focus-visible { position: relative; outline: 2px solid var(--accent); outline-offset: -2px; }
.acc-menu-icon,
.acc-setting-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: var(--soft); }
.acc-menu-icon { color: var(--text); }
.acc-menu-text { display: grid; flex: 1 1 auto; gap: 3px; min-width: 0; }
.acc-menu-text strong { overflow: hidden; font-size: 15px; font-weight: 800; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.acc-menu-text small { overflow: hidden; color: var(--muted); font-size: 12.5px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.acc-badge {
    flex: none; min-width: 26px; padding: 4px 8px; border-radius: 999px; background: var(--soft); color: var(--text);
    font-size: 12px; font-style: normal; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; text-align: center;
}
.acc-row-chevron { display: grid; place-items: center; flex: none; width: 32px; color: var(--muted); }

/* ---------------------------------------------------------------- Unterseiten */

.acc-subhead { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 2px 0 6px; }
.acc-subhead h1 { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; font-size: clamp(22px, 6vw, 28px); font-weight: 900; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; }
.acc-back {
    display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 40px; padding: 0 12px 0 8px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); font-size: 14px; font-weight: 700; line-height: 1;
}
.acc-back:hover { background: var(--soft); }
.acc-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acc-page-body { min-width: 0; }
.acc-page-body > :is(.acc-list, .acc-empty, .acc-toolbar, .trophy-page),
.acc-page-body > div > :is(.acc-list, .acc-empty) { margin-top: 10px; }

/* ---------------------------------------------------------------- Listen */

.acc-list,
.acc-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--acc-radius); background: var(--card); }
.acc-row { display: flex; align-items: center; gap: 6px; padding-right: 8px; border-bottom: 1px solid var(--line); }
.acc-list > :last-child { border-bottom: 0; }
.acc-row:hover { background: var(--soft); }
.acc-row-main {
    display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; min-height: 68px; padding: 10px 6px 10px 12px;
    color: var(--text); text-align: left;
}
.acc-row-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.acc-thumb {
    display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; overflow: hidden; border-radius: 12px;
    background: var(--soft); color: var(--muted); font-size: 18px; font-weight: 800; line-height: 1;
}
.acc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.acc-thumb svg { width: 20px; height: 20px; fill: currentColor; }
.acc-row-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; }
.acc-row-text strong { display: block; overflow: hidden; color: var(--text); font-size: 15.5px; font-weight: 800; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.acc-row-text small { display: block; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.acc-row-text .profile-link { color: var(--copy); font-weight: 700; }
.acc-private { display: inline-flex; align-items: center; gap: 3px; }
.acc-private svg { width: 13px; height: 13px; }
.acc-row-actions { display: flex; flex: none; gap: 2px; }
.acc-icon-button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--muted); transition: background .15s ease, color .15s ease; }
.acc-icon-button:hover { background: var(--soft); color: var(--text); }
.acc-icon-button.is-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.acc-icon-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.acc-chip { flex: none; padding: 6px 10px; border-radius: 999px; background: var(--soft); color: var(--text); font-size: 12.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.acc-empty {
    display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 16px;
    border: 1px dashed var(--line); border-radius: var(--acc-radius); color: var(--muted); text-align: center;
}
.acc-empty p { margin: 0; font-size: 14.5px; }

/* Suche und Sortierung der Updates */
.acc-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 8px; }
.acc-search input {
    width: 100%; min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--card); color: var(--text); font-size: 14px; font-weight: 500;
}

/* ---------------------------------------------------------------- Personenlisten (Community) */

.follow-list { margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.follow-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 10px; border-bottom: 1px solid var(--line); }
.follow-row:last-child { border-bottom: 0; }
.follow-person { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; min-height: 60px; padding: 8px 6px 8px 12px; color: var(--text); text-align: left; }
.follow-person:hover { background: var(--soft); }
.follow-person:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.follow-person .avatar { --avatar-size: 40px; }

/* ---------------------------------------------------------------- Einstellungen */

.acc-section { margin-top: 18px; }
.acc-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 4px 8px; }
.acc-section-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 800; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.acc-section-head svg { width: 16px; height: 16px; }
.acc-section.is-danger .acc-section-head h2 { color: var(--danger); }

.acc-setting-row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px;
    border-bottom: 1px solid var(--line); color: var(--text); text-align: left; text-decoration: none;
}
.acc-card > :last-child,
.acc-card > details:last-child > summary { border-bottom: 0; }
:is(button, a).acc-setting-row:hover,
.acc-disclosure > summary:hover { background: var(--soft); }
.acc-setting-row .avatar { --avatar-size: 40px; }
.acc-setting-icon { color: var(--muted); }
.acc-setting-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
.acc-setting-text strong { font-size: 15px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.acc-setting-text small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.acc-logout .acc-setting-icon { color: var(--danger); }

.verified-badge {
    flex: none; padding: 5px 8px; border: 1px solid rgba(17, 122, 63, .2); border-radius: 999px;
    background: rgba(17, 122, 63, .08); color: #117a3f; font-size: 10.5px; font-weight: 800;
}
.verified-badge.is-pending { border-color: rgba(173, 91, 0, .22); background: rgba(255, 138, 28, .1); color: #8b4b00; }

.acc-disclosure > summary { list-style: none; cursor: pointer; }
.acc-disclosure > summary::-webkit-details-marker { display: none; }
.acc-disclosure > summary .acc-row-chevron svg { transition: transform .2s ease; }
.acc-disclosure[open] > summary .acc-row-chevron svg { transform: rotate(90deg); }
.acc-disclosure[open] > summary,
.acc-disclosure > form { border-bottom: 1px solid var(--line); }

.acc-form { display: grid; gap: 12px; margin: 0; padding: 14px; }
.acc-form > label, .acc-form .password-new > label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.2; }
.acc-form textarea {
    width: 100%; min-height: 92px; padding: 12px 14px; resize: vertical;
    border: 1px solid var(--line); border-radius: 12px; background: var(--input); color: var(--text); font-size: 15px; line-height: 1.45;
}
.acc-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acc-form-foot small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.acc-form-foot .button { flex: none; min-width: 120px; font-size: 13px; }
#accountProfile .acc-form { border-top: 1px solid var(--line); }

.acc-danger-card {
    display: flex; align-items: center; gap: 14px; padding: 14px;
    border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: color-mix(in srgb, var(--danger) 5%, var(--card));
}
.acc-danger-card .button { flex: none; min-height: 42px; padding: 0 17px; }

/* Konto löschen */
.account-delete .account-delete-icon {
    display: grid; place-items: center; width: 42px; height: 42px;
    border: 1px solid rgba(141, 0, 26, .16); background: #fff0f1; color: #8d001a;
}
.account-delete-icon svg { width: 19px; height: 19px; }
.account-delete h2 { margin: 4px 0 0; }
.account-delete > p { margin: 0; color: var(--copy); }
.account-delete .account-delete-email { color: var(--text); font-weight: 800; overflow-wrap: anywhere; }
.account-delete .sheet-actions { grid-template-columns: 1fr; }

/* ---------------------------------------------------------------- Breite */

@media (min-width: 720px) {
    .acc-hero { padding: 22px; }
    .acc-hero-avatar .avatar { --avatar-size: 92px; }
    .acc-menu-row { min-height: 68px; }
}
@media (max-width: 380px) {
    .acc-danger-card { flex-direction: column; align-items: stretch; }
    .acc-hero { padding: 14px; }
    .acc-pill svg { display: none; }
}

/* ---- Community: Suche, Menü (Ich folge, Folgen mir, Trophäen, Blockierte) und Unterseiten */
.community-head { margin: 2px 0 12px; }
.community-head h1 { margin: 0; font-size: clamp(24px, 6.4vw, 30px); font-weight: 900; line-height: 1.1; letter-spacing: -.01em; }
.community-search { display: block; margin: 0 0 4px; }
.community-search input::-webkit-search-cancel-button { cursor: pointer; }
.community-menu { margin-top: 12px; }
.community-menu + .community-menu { margin-top: 18px; }
.community-body > .community-results-title { margin-top: 16px; }
.community-more { width: 100%; margin-top: 12px; }
.community-status { margin: 14px 4px; color: var(--muted); font-size: 14px; }
.community-status.is-error { color: var(--danger); }
.community-results-title { margin: 4px 4px 10px; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.community .acc-page-body > .follow-list { margin-top: 10px; }
.community .trophy-cabinet { margin: 10px 0 0; }
.follow-person .follow-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.follow-person .follow-name strong { overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.follow-person .follow-name small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.follow-row .follow-button { flex: none; }

/* ======================================================================== campaigns */
/* ==========================================================================
   Seite „Super-Challenges“ (views/campaigns.js): die offiziellen Challenges
   mit Titelbild, Pokal, Bedingungen (Abschnitt „Super-Challenge: Bedingungen“)
   und eigenem Stand.
   ========================================================================== */

.campaigns { max-width: 1100px; margin: 0 auto; padding: 42px 0 32px; }
/* Text und Knopf nebeneinander; ist es zu schmal, rutscht der Knopf darunter (ohne Media-Query). */
.campaigns-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 8px 0 24px; }
.campaigns-head > div { flex: 1 1 420px; min-width: 0; }
.campaigns-head h1 { margin: 6px 0 8px; font-size: clamp(25px, 5vw, 38px); font-weight: 700; line-height: 1.12; }
.campaigns-head p { max-width: 560px; margin: 12px 0 0; color: var(--muted); }
.campaigns-trophies { flex: none; min-height: 42px; white-space: nowrap; }
.campaigns-trophies :is(svg, img) { width: 26px; height: 26px; }

.campaign-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; gap: 18px; }

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

/* Innenabstand: bis 600 px Bildschirmbreite 18 px, darüber 22 px (eine Angabe statt Media-Query);
   das Titelbild reicht bis an den Rand und nutzt denselben Wert. */
.campaign { --campaign-pad: clamp(18px, (100vw - 600px) * 1000, 22px); display: grid; gap: 16px; overflow: hidden; padding: var(--campaign-pad); }
.campaign > * { margin: 0; }
.campaign-cover { margin: calc(-1 * var(--campaign-pad)) calc(-1 * var(--campaign-pad)) 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--media-bg); }
.campaign-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Kopf: Pokal (nur wenn gewonnen) links, Text daneben. */
.campaign-head { display: flex; align-items: center; gap: 16px; }
.campaign-trophy { flex: none; }
.campaign-head > div { display: grid; flex: 1; gap: 4px; min-width: 0; }
.campaign-head h3 { margin: 2px 0 2px; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; overflow-wrap: anywhere; }
.campaign-head p { margin: 0; }
.campaign.is-live { --eyebrow-color: #ffca88; }
/* Gezeichneter Pokal rund und klein, gemalter Pokal oder eigenes Bild hoch: bis 420 px Bildschirmbreite 64 px, darüber 76 px
   (eine Angabe statt Media-Query: unter 420 px wird der mittlere Wert negativ, darüber sehr groß). */
.campaign-trophy > .trophy-svg { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
.campaign-trophy > .trophy-svg:not(.trophy-art) { width: 58px; height: 58px; }
.campaign-trophy > :is(.trophy-art, .trophy-image) { width: clamp(64px, (100vw - 420px) * 1000, 76px); aspect-ratio: 290 / 472; border-radius: 12px; }
.campaign-period { font-size: 13px; color: var(--copy); }
.campaign-reward { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.campaign-text { color: var(--copy); font-size: 14.5px; line-height: 1.6; white-space: pre-line; }
.campaign-earned { color: var(--accent); font-weight: 700; }

/* Eigener Stand */
.campaign-standing { display: grid; justify-items: start; gap: 10px; }
.campaign-standing > p { margin: 0; }
.campaign-count { font-family: var(--font-data); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.campaign-meter { width: min(100%, 240px); height: 10px; overflow: hidden; border-radius: 999px; background: var(--track); }
.campaign-meter > span { display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: var(--accent-gradient); }
.campaign-due { font-size: 14px; font-weight: 600; color: var(--due-color, var(--text-soft)); }
.campaign-due.is-done { --due-color: var(--accent); }
.campaign-post { display: flex; align-items: center; gap: 12px; }
.campaign-post span { font-size: 13px; color: var(--muted); }
.campaign :is(.campaign-post, .campaign-join) .button { min-height: 42px; }

/* Mitmachen (Streaming: Spiel, Plattform, Dauer, Tage) */
/* Zwei Spalten, bis 420 px Bildschirmbreite eine (eine Angabe: darunter wird die Mindestbreite 100 %). */
.campaign-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(calc(50% - 6px), min(100%, (421px - 100vw) * 1000)), 1fr)); gap: 12px; margin-bottom: 14px; }

.campaign-details > summary { cursor: pointer; font-weight: 700; }
.campaign-details h4 { margin: 14px 0 4px; font-size: 13px; font-weight: 700; color: var(--text-soft); }
.campaign-details .campaign-text { margin: 0; }

.campaign-actions { display: flex; gap: 10px; }
.campaign-actions > .button { flex: 1; min-height: 44px; }
.campaign-note { color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------- Leer und Archiv */

.campaigns-empty { display: grid; justify-items: center; gap: 8px; margin-top: 8px; padding: 32px 20px; text-align: center; }
.campaigns-empty h2 { margin: 4px 0 0; font-size: 20px; }
.campaigns-empty p { max-width: 420px; margin: 0; color: var(--muted); line-height: 1.55; }
.campaigns-empty-icon .trophy-svg { width: 72px; height: 72px; opacity: .8; filter: brightness(0) drop-shadow(0 0 1px rgba(255, 225, 140, .95)) drop-shadow(0 0 6px rgba(201, 162, 74, .5)); }
.campaigns-archive { margin-top: 28px; }
.campaigns-archive > summary { cursor: pointer; font-weight: 700; }
.campaigns-archive .campaign-grid { margin-top: 16px; }


/* ======================================================================== world */
/* ==========================================================================
   Weltkarte: Globus, Werkzeugleiste, Ländersuche (Handy/App), Länderfenster
   (Computer) und Länderseite. Die Welt füllt den Platz zwischen Kopfzeile und
   unterer Navigation bzw. Tastatur.
   ========================================================================== */

.world {
    position: fixed;
    inset: var(--topbar-height) 0 max(var(--mobile-nav-height), var(--keyboard-inset)) 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #05070c;
}

.globe-mount { position: relative; flex: 1 1 auto; min-height: 0; cursor: grab; }
.globe-mount:active { cursor: grabbing; }
.globe-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: rgba(255, 255, 255, .72); font-size: 12px; pointer-events: none; }
.globe-fallback { display: grid; place-content: center; gap: 8px; height: 100%; padding: 24px; color: #d5ddff; text-align: center; }
.globe-fallback strong { color: #fff; font-size: 16px; }
.globe-fallback p { max-width: 340px; margin: 0; font-size: 13px; line-height: 1.5; }

/* Flagge als Tooltip über einem Land */
.globe-tip { padding: 8px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(15, 22, 34, .8); backdrop-filter: blur(18px); }
.globe-flag { position: relative; display: block; width: 34px; height: 24px; overflow: hidden; background: rgba(255, 255, 255, .12); box-shadow: 0 2px 6px rgba(0, 0, 0, .28); }
.globe-flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.globe-flag.is-generic::before {
    content: ""; position: absolute; left: 9px; top: 6px; width: 15px; height: 9px;
    background: rgba(255, 255, 255, .82); box-shadow: -3px 7px 0 -2px rgba(255, 255, 255, .65);
}

/* ---------------------------------------------------------------- Werkzeugleiste */

.world-toolbar { position: absolute; z-index: 6; top: 18px; left: 18px; right: 18px; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.world-toolbar > * { pointer-events: auto; }
/* Offene Suche oder offenes Länderfenster bekommen den Platz für sich. */
.world:has(.world-panel.is-open, #worldSearch:focus, .combobox-menu:not([hidden])) .world-toolbar { display: none; }

.world-lighting { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: rgba(255, 255, 255, .78); }
.world-lighting::before {
    content: ""; position: absolute; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%;
    background: rgba(5, 8, 14, .48); transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.world-lighting svg { position: relative; width: 15px; height: 15px; stroke-width: 1.65; }
.world-lighting:hover { color: #fff; }
.world-lighting:hover::before { border-color: rgba(255, 255, 255, .28); background: rgba(5, 8, 14, .7); }
.world-lighting:active::before { transform: scale(.94); }
.world-lighting.is-active { color: #ffd36a; }
.world-lighting.is-active::before { border-color: rgba(255, 211, 106, .28); background: rgba(255, 190, 72, .1); }

.world-summary { margin-left: auto; padding: 0 18px; font-size: 12px; white-space: nowrap; }
.world-summary.is-active { border-color: var(--accent); }

/* ---------------------------------------------------------------- Ländersuche (Handy, App) */

.world-search { display: none; }
.world-search-label { color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.3; }
.world-search-control { position: relative; }
.world-search-icon { position: absolute; z-index: 2; left: 14px; top: 15px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.world-search .field { min-height: 48px; padding-left: 44px; border-radius: 14px; font-size: 16px; }
/* Die Suche steht unten – die Vorschläge öffnen nach oben über den Globus. */
.world-search .combobox-menu { top: auto; bottom: calc(100% + 6px); max-height: 222px; overscroll-behavior: contain; }
.world-all { align-self: flex-start; min-height: 34px; padding: 0 2px; color: var(--muted); font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.world-all:hover { color: var(--text); }
.world-status { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 42px; margin: 0; color: var(--muted); }
.world-status[hidden] { display: none; }
.world-status strong { color: var(--text); font-size: 13px; text-align: right; }
.world-open { width: 100%; border-radius: 14px; }

/* ---------------------------------------------------------------- Länderfenster (Computer) */

.world-panel {
    position: absolute; z-index: 7; top: 18px; right: 18px; bottom: 18px; width: min(400px, calc(100% - 28px));
    padding: 22px; overflow-y: auto; visibility: hidden; transform: translateX(calc(100% + 28px));
    border: 1px solid var(--line-strong); border-radius: 18px;
    background: linear-gradient(180deg, #171a21, #111318);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
    backdrop-filter: blur(28px) saturate(180%);
    transition: transform .28s ease, visibility .28s;
}
.world-panel.is-open { visibility: visible; transform: none; }
.world-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.world-panel-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.world-panel-head .button { min-height: 32px; border-radius: 14px; }
.world-panel-close { display: grid; place-items: center; width: 32px; height: 32px; color: var(--text); }
.world-panel-close svg { width: 18px; height: 18px; }
.world-panel-hint { margin: 13px 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.world-panel-empty { margin: 12px 0; color: var(--muted); font-size: 13px; }

.world-list-search { position: relative; margin-top: 14px; }
.world-list-search svg { position: absolute; z-index: 2; left: 11px; top: 13px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.world-list-search .field { min-height: 44px; padding-left: 36px; border-radius: 14px; font-size: 14px; }

.world-country-list { display: grid; gap: 6px; margin-top: 12px; }
.world-country-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 12px; color: var(--text); font-size: 13.5px; font-weight: 600; text-align: left;
    transition: border-color .15s ease, background-color .15s ease;
}
.world-country-row:hover { border-color: rgba(163, 230, 53, .35); background: var(--accent-soft); }

.count-badge {
    display: inline-flex; align-items: center; height: 26px; padding: 5px 10px; border: 1px solid rgba(163, 230, 53, .35); border-radius: 999px;
    background: var(--accent-soft); color: var(--accent); font-size: 10.5px; font-weight: 700;
}
.count-badge.is-label { font-family: var(--font-data); letter-spacing: .04em; text-transform: uppercase; }

.world-panel-title { margin: 10px 0 8px; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.045em; text-transform: uppercase; }
.world-panel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.world-pill { min-height: 42px; padding: 0 16px; border: 1px solid rgba(163, 230, 53, .4); border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; }
.world-panel-none { padding: 14px; border: 1px dashed var(--line-strong); background: var(--soft); }
.world-panel-none p { margin: 0; color: var(--copy); font-size: 13.5px; line-height: 1.5; }

/* Vorschau der Challenges eines Landes */
.world-items { display: grid; gap: 10px; margin-top: 12px; }
.world-item {
    display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 12px; min-height: 108px; overflow: hidden;
    border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer;
    transition: border-color .18s ease, transform .18s ease;
}
.world-item:hover, .world-item:focus-visible { border-color: var(--accent); outline: none; transform: translateY(-1px); }
.world-item-thumb { position: relative; min-width: 0; overflow: hidden; background: var(--media-bg); }
.world-item-thumb img { display: block; width: 124px; height: 100%; min-height: 108px; max-height: 132px; object-fit: cover; }
.world-item-empty { display: grid; place-items: center; height: 100%; padding: 8px; color: var(--muted); font-size: 10.5px; text-align: center; }
.world-item-label { position: absolute; left: 6px; bottom: 6px; padding: 3px 6px; background: rgba(10, 10, 12, .76); color: #fff; font-size: 9px; font-weight: 800; line-height: 1.2; backdrop-filter: blur(6px); }
.world-item-copy { display: grid; align-content: center; gap: 5px; min-width: 0; padding: 10px 10px 10px 0; }
.world-item-copy :is(h3, p) { min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.world-item-copy h3 { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.world-item-copy p { color: var(--muted); font-size: 11px; }
.world-item-meta, .world-item-stats { display: flex; align-items: center; min-width: 0; color: var(--muted); font-size: 10px; }
.world-item-meta { justify-content: space-between; gap: 7px; }
.world-item-meta > * { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.world-item-meta strong { color: var(--text); }
.world-item-stats { gap: 9px; }
.world-item-stats .is-updates { color: var(--accent); font-weight: 800; }

/* ---------------------------------------------------------------- Suchen, Filtern, Sortieren (Land) */

.country-tools { display: grid; gap: 12px; }
.country-search { min-height: 44px; border-radius: 14px; font-size: 14px; }
.country-tool-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.status-tabs { display: flex; gap: 4px; }
.status-tab { min-height: 34px; padding: 0 13px; border-radius: 11px; color: var(--muted); font-size: 12px; font-weight: 700; }
.status-tab:hover { color: var(--text); }
.status-tab.is-active { background: var(--accent-gradient); color: var(--accent-ink); }
.country-sort { display: grid; gap: 6px; min-width: 172px; }
.country-sort > span { color: var(--muted); font-family: var(--font-data); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }

/* Bewertung (Zeichen und Stimmenzahl) */
.ranking-badge {
    --rank-hue: 0; --rank-sat: 0%; --rank-light: 62%;
    display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; padding: 2px 0;
    font-family: var(--font-data); font-size: 12px; font-weight: 700;
}
.ranking-badge-mark { flex: none; width: 15px; height: 15px; fill: hsl(var(--rank-hue) var(--rank-sat) var(--rank-light)); color: hsl(var(--rank-hue) var(--rank-sat) var(--rank-light)); }
.ranking-badge.is-neutral .ranking-badge-mark { fill: var(--muted); color: var(--muted); }
.ranking-badge b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ranking-badge.is-compact { padding: 0; font-size: 11px; }
.ranking-badge.is-compact .ranking-badge-mark { width: 13px; height: 13px; }

/* ---------------------------------------------------------------- Länderseite */

.country-page { display: grid; gap: 18px; }
.country-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.country-page-head h1 { margin: 0 0 6px; font-size: clamp(28px, 4vw, 42px); }
.country-page-head p { margin: 0; color: var(--muted); }
.country-page-actions { display: flex; gap: 8px; }
.country-page-actions .icon-only { width: 40px; padding: 0; }
.country-page-empty { text-align: center; }
.country-page-empty p { margin: 0; }

/* ---------------------------------------------------------------- Handy */

@media (max-width: 760px) {
    .world-toolbar { top: 10px; left: 12px; right: 12px; gap: 8px; }
    .world-lighting::before { width: 28px; height: 28px; }
    .world-lighting svg { width: 14px; height: 14px; }
    .world-summary { padding: 0 13px; }
    .world-search { display: flex; flex: none; flex-direction: column; gap: 12px; padding: 16px 14px 10px; border-top: 1px solid var(--line); background: var(--page-a); }
    .world-panel { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 62%; padding: 18px; transform: translateY(calc(100% + 24px)); }
    .world-panel.is-open { transform: none; }
    .world-item { grid-template-columns: 104px minmax(0, 1fr); min-height: 96px; }
    .world-item-thumb img { width: 104px; min-height: 96px; max-height: 112px; }
    .country-page-head { flex-direction: column; align-items: flex-start; }
}