/** ChallengeFlow: 20-theme.css
 *  Theme „Signal“. Die Farbthemen werden überwiegend über Variablen gesteuert.
 *  Wenige bewusst feste Kontraste (z. B. Weiß/Schwarz in der Welt-Toolbar)
 *  bleiben in beiden Modi identisch und sind deshalb direkt definiert. */
@layer theme {
  /* ---------------------------------------------------------------- Nacht */
  :root[data-theme="dark"] {
    color-scheme: dark;
    /* Die Referenz trennt Hintergrund, Karten und Eingaben nur in kleinen
       Helligkeitsschritten. Dadurch bleibt die Oberfläche ruhig, ohne dass
       weiße Rahmen jedes Element einzeln "umzeichnen". */
    --page-a: #0e0f12;
    --page-b: #101116;
    --text: #eef0f7;
    --copy: #c8cad4;
    --muted: #8f939f;
    --line: #252832;
    --line-strong: #30343f;
    --card: #14161d;
    --topbar: #0e0f12;
    --nav-muted: #d7d9e1;
    --soft: #181a22;
    --soft-2: #20232c;
    --input: #181a22;
    /* Der Dark-Mode nutzt eine eigenständige Lime-Signalfarbe. Alle davon
       abgeleiteten Akzentwerte bleiben in derselben Farbfamilie, damit Hover,
       Soft-Flächen und Fokusglow zusammengehören und auf Schwarz klar bleiben. */
    --accent: #a3e635;
    --accent-2: #a3e635;
    --accent-deep: #bef264;
    --accent-hot: #d9f99d;
    --accent-ink: #142100;
    --accent-soft: #1b260d;
    --accent-glow: rgba(163,230,53,.32);
    --create-accent: #84cc16;
    --create-accent-hover: #a3e635;
    --create-accent-ink: #101a00;
    --vote-up: #55d27d;
    --vote-down: #ff7c88;
    --favorite: #a3e635;
    --favorite-ink: #142100;
    --danger: #ff5f6d;
    --danger-soft: #2d0f16;
    --pill-bg: #1b260d;
    --icon-soft: #181a22;
    --icon-bg: #14161d;
    --drop-bg: #161820;
    --media-bg: #111319;
    --track: #2a2d37;
    --stage: #090a0c;
    --timeline-bg: #101116;
    --editor-surface: #14161d;
    --editor-head-bg: #181a22;
    --editor-note-bg: #181a22;
    --editor-row-bg: #161820;
    --editor-line: #2a2d37;
    --editor-canvas-stage: #050505;
    --editor-tool-surface: #181a22;
    --editor-tool-button: #1d2028;
    --editor-tool-button-border: #30343f;
    --editor-canvas-outline: rgba(255,255,255,.10);
    --editor-canvas-shadow: 0 18px 50px rgba(0,0,0,.36);
    --card-radius: 16px;
    --post-radius: 16px;
    --photo-radius: 12px;
    --photo-radius-sm: 10px;
    --elevated-shadow: 0 22px 58px rgba(0,0,0,.42);
    --photo-filter: saturate(1) contrast(.98) brightness(.95);
  }


  /* Typografie wie in der Referenz: große Titel etwas weniger komprimiert,
     kleine Mess-/Metadaten dagegen mit mehr Luft zwischen den Zeichen. */
    :root[data-theme="dark"] .app-brand strong {
    letter-spacing: -.02em;
    text-transform: none;
  }
  :root[data-theme="dark"] .panel h1 {
    letter-spacing: -.03em;
    line-height: 1.02;
    text-transform: none;
  }
  :root[data-theme="dark"] .panel h2,
  :root[data-theme="dark"] .challenge-body h3,
  :root[data-theme="dark"] .link-title { letter-spacing: -.015em; }
  :root[data-theme="dark"] .meta,
  :root[data-theme="dark"] .update-location,
  :root[data-theme="dark"] .location-line,
  :root[data-theme="dark"] .photo-counter,
  :root[data-theme="dark"] .progress-meta,
  :root[data-theme="dark"] .participant-stream-label,
  :root[data-theme="dark"] .challenge-stream-kicker { letter-spacing: .055em; }
  :root[data-theme="dark"] .form-grid label,
  :root[data-theme="dark"] .modal-label,
  :root[data-theme="dark"] .file-drop-field { letter-spacing: .025em; }

  /* Verbundene Formularfelder behalten eine gemeinsame Silhouette. Der
     Kategorien-Knopf sitzt direkt am Input und bekommt deshalb nur rechts
     die Rundung; Mic/Undo liegen weiterhin innerhalb des Feldes. */
  :root[data-theme="dark"] .challenge-category-combobox input {
    border-radius: var(--photo-radius-sm) 0 0 var(--photo-radius-sm);
  }
  :root[data-theme="dark"] .challenge-category-picker {
    border-color: var(--line-strong);
    border-radius: 0 var(--photo-radius-sm) var(--photo-radius-sm) 0;
  }

  :root[data-theme="dark"] .header-primary-button {
    background: var(--card);
    color: var(--text);
  }
  :root[data-theme="dark"] .brand-mark { border-radius: 14px; }
  :root[data-theme="dark"] .login-card h1 {
    letter-spacing: -.03em;
    line-height: 1.02;
    text-transform: none;
  }
  :root[data-theme="dark"] .notice-thumb,
  :root[data-theme="dark"] .account-email-row { border-radius: var(--photo-radius-sm); }

  html, body { background: var(--page-a); color: var(--text); }
  body { background-image: none; }

  /* Dezente Hintergrundtiefe: mehrere weiche radial/conic-Gradient-Lagen bleiben ruhig, geben dem Dark-Mode aber mehr Atmosphaere. */
  :root[data-theme="dark"] body {
    letter-spacing: .002em;
    background-color: var(--page-a);
    background-image:
      radial-gradient(circle at 14% 16%, rgba(163,230,53,.08), rgba(163,230,53,0) 28%),
      radial-gradient(circle at 84% 14%, rgba(100,116,139,.12), rgba(100,116,139,0) 24%),
      radial-gradient(circle at 20% 82%, rgba(163,230,53,.05), rgba(163,230,53,0) 24%),
      conic-gradient(from 180deg at 76% 72%, rgba(163,230,53,.035), rgba(163,230,53,0) 24%, rgba(255,255,255,.02) 52%, rgba(163,230,53,0) 78%, rgba(163,230,53,.03) 100%),
      linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0) 24%),
      linear-gradient(180deg, var(--page-a), var(--page-b));
    background-attachment: scroll;
    background-repeat: no-repeat;
  }
  ::selection { background: var(--accent); color: var(--accent-ink); }

  /* Die Kopfleiste bleibt ruhig und trennt sich nur über die feine
     Systemlinie vom Inhalt. */
  .topbar {
    background: var(--topbar);
    border-bottom: 1px solid var(--line-strong);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .app-brand, .app-brand strong, .view-title { color: var(--text); }
  .brand-symbol {
    background: var(--accent);
    border-radius: var(--photo-radius-sm);
    box-shadow: none;
  }
  .brand-symbol svg { stroke: var(--accent-ink); }
  .header-primary-button {
    background: var(--text);
    color: var(--page-a);
    border: 1px solid var(--line-strong);
    border-radius: var(--photo-radius-sm);
    box-shadow: none;
  }
  .header-primary-button:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .header-create-button {
    color: var(--create-accent-ink);
    background: var(--create-accent);
    border-color: var(--create-accent);
  }
  .header-create-button:hover, .header-create-button.is-active {
    color: var(--create-accent-ink);
    background: var(--create-accent-hover);
    border-color: var(--create-accent-hover);
  }

  .panel, .update-card, .challenge-card,
  .modal-card, .notice, .thread-card,
  .message, .detail-grid > div, .stats-grid > div, .country-empty,
  .file-drop, .preview-item {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: var(--card-radius);
  }
  .panel, .update-card, .challenge-card { box-shadow: none; }
  /* Entdecken-Challenges verwenden wie die Update-Karten keinen äußeren
     Kartenrahmen. Bild, Inhalt und Actionbar bleiben unverändert. */
  .challenge-feed-discover .discover-challenge-card {
    border: 0;
  }
  .panel h1, .panel h2, .challenge-body h3, .link-title, .detail-grid p,
  .photo-modal-challenge-link, .photo-modal-comments-head,
  .country-panel-head h2, .country-title, .detail-timeline-head strong {
    color: var(--text);
  }
  .muted, .meta, .update-location, .location-line, .small-note,
  .form-grid label, .modal-label, .feed-filter-field, .photo-modal-meta-row, .photo-modal-section-label {
    color: var(--muted);
  }
  .update-copy p, .detail-text, .challenge-body p, .photo-modal-caption p, .photo-modal-update-copy p,
  .comment p, .expandable-copy-text {
    font-family: var(--font-copy);
    color: var(--copy);
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.6;
  }
  .update-text-poster-description,
  .update-text-poster .expandable-copy-text {
    font-family: var(--font-copy);
    color: var(--copy);
    font-size: clamp(16px,1.55vw,19px);
    font-weight: 500;
    line-height: 1.55;
  }
  .update-text-poster.is-detail-text-poster .update-text-poster-description,
  .update-text-poster.is-detail-text-poster .expandable-copy-text {
    font-size: clamp(17px,1.7vw,21px);
    line-height: 1.62;
  }
  .update-text-poster.is-compact-text-poster .update-text-poster-description {
    font-size: 14px;
    line-height: 1.48;
  }
  /* Alles Gemessene laeuft in der Monospace: Zeit, Ort, Zaehler. */
  .meta, .update-location, .location-line, .photo-counter, .icon-button em,
  .progress-meta, .participant-stream-label, .challenge-stream-kicker {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
  }

  input, textarea, select, .country-search, .feed-autocomplete input,
  .comment-input-wrap {
    background: var(--input);
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: var(--photo-radius-sm);
    caret-color: var(--accent);
    box-shadow: none;
  }
  input::placeholder, textarea::placeholder, .country-search::placeholder,
  .feed-autocomplete input::placeholder { color: var(--muted); opacity: 1; }
  /* Nur die Kontur wechselt die Farbe. Der fruehere Innenschatten hat im
     Kommentarfeld eine zweite Kontur erzeugt und wirkte im Dunkelmodus
     wie ein Alarm. */
  input:focus, textarea:focus, select:focus, .country-search:focus,
  .feed-autocomplete input:focus, .comment-input-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: none;
  }
  .comment-input-wrap input:focus,
  .comment-input-wrap input:focus-visible {
    border-color: transparent;
    box-shadow: none;
  }

  .primary-action, .ghost-button, .pill-button, .danger-button,
  .feed-selection-chip, .icon-button, .segment-button, .filter-chip,
  .badge, .nav button, .top-actions button {
    border-radius: var(--photo-radius-sm);
  }
  .primary-action, .icon-button.send {
    background: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    font-weight: 700;
  }
  .primary-action:hover, .icon-button.send:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: var(--accent-ink);
  }
  .ghost-button {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line-strong);
    font-weight: 700;
  }
  .ghost-button:hover { background: var(--text); color: var(--page-a); }
  .pill-button, .feed-selection-chip {
    background: var(--accent-soft);
    color: var(--accent-deep);
    border: 1px solid var(--accent);
    font-weight: 700;
  }
  .pill-button:hover, .feed-selection-chip:hover {
    background: var(--accent);
    color: var(--accent-ink);
  }
  .danger-button {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
    font-weight: 700;
  }
  .danger-button:hover { background: var(--danger); color: var(--page-a); }

  .segmented-control,
  .mine-view-switcher {
    background: var(--soft);
    border: 1px solid var(--line-strong);
    border-radius: var(--photo-radius-sm);
    padding: 3px;
  }
  .segment-button, .filter-chip {
    background: transparent;
    color: var(--text);
    border: 1px solid transparent;
    font-weight: 600;
  }
  .segment-button:hover, .filter-chip:hover { background: var(--soft); color: var(--text); }
  /* Zwei Staerken, damit die Leiste eine Rangfolge hat: Was man ansieht
     (Updates oder Challenges) wird voll in der Signalfarbe markiert. */
  .segment-button.active, .filter-chip.active {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    box-shadow: none;
  }

  .icon-button { background: transparent; color: var(--text); border: 1px solid transparent; }
  .icon-button:hover { background: var(--soft); color: var(--text); }
  .icon-button.is-liked { background: transparent; color: var(--accent); --icon-button-count-color: var(--text); }
  :root:not([data-theme="dark"]) .icon-button.is-liked {
    color: #c51f3a;
    background: color-mix(in srgb,#c51f3a 10%,transparent);
  }
  .icon-button.is-leave-action { background: transparent; color: var(--danger); }
  .icon-button.is-leave-action:hover { background: var(--danger); color: var(--page-a); }
  /* Teilnehmerzahlen sind neutral, solange der aktuelle User nicht selbst
     mitmacht. Nur die eigene aktive Teilnahme bekommt den positiven Akzent. */
  .participation-action-button .participation-count {
    color: var(--icon-button-count-color, currentColor);
  }
  .participation-action-button .participation-count.is-participating {
    color: var(--vote-up);
  }
  .badge {
    background: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    font-family: var(--font-data);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .badge.ghost { background: transparent; color: var(--muted); border-color: var(--line); }
  .mention, .inline-more, .tiny-link { color: var(--accent); }

  .nav button { color: var(--text); font-weight: 600; }
  .nav button:hover { background: var(--soft); color: var(--text); }
  .nav button.active { background: var(--accent); color: var(--accent-ink); font-weight: 700; box-shadow: none; }
  .top-actions button {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line-strong);
  }
  .top-actions button:hover { background: var(--text); color: var(--page-a); }
  .top-actions button.profile-button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

  .feed-suggestion-menu {
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: var(--card-radius);
    box-shadow: var(--elevated-shadow);
  }
  .feed-suggestion-option { background: transparent; color: var(--text); }
  .feed-suggestion-option:hover, .feed-suggestion-option:focus { background: var(--accent); color: var(--accent-ink); }
  .feed-suggestion-option small { color: var(--muted); }

  .country-overlay {
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: var(--card-radius);
    box-shadow: var(--elevated-shadow);
  }
  .country-row { background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: var(--photo-radius-sm); }
  .country-row:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .country-empty { background: var(--soft); }
  .world-toolbar .primary-action.small, .world-icon-button {
    background: var(--card);
    color: var(--text);
    border-color: var(--line-strong);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .world-toolbar .primary-action.small, .world-icon-button.is-active {
    color: var(--accent-ink);
    background: var(--accent);
    border-color: var(--accent);
  }
  .world-icon-button:hover { background: var(--text); color: var(--page-a); }
  .world-toolbar .world-lighting-button,
  .world-toolbar .world-lighting-button.is-active,
  .world-toolbar .world-lighting-button:hover {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
  .world-toolbar .world-lighting-button { color: rgba(255,255,255,.78); }
  .world-toolbar .world-lighting-button:hover { color: #fff; }
  .world-toolbar .world-lighting-button.is-active { color: #ffd36a; }
  .world-toolbar .world-country-summary {
    background: rgba(255,255,255,.94);
    color: #0a0a0a;
    border-color: rgba(255,255,255,.88);
  }
  .world-toolbar .world-country-summary:hover,
  .world-toolbar .world-country-summary.is-active {
    background: #fff;
    color: #0a0a0a;
    border-color: #fff;
  }
  .globe-tip { color: #fff; }

  .timeline-toggle:hover, .overlay-close:hover, .lightbox-close:hover { background: var(--soft); color: var(--text); }

  .file-drop { background: var(--drop-bg); border-color: var(--line-strong); }
  .file-drop:hover, .file-drop.drag-active { background: var(--accent-soft); border-color: var(--accent); }
  .image-fallback, .media-strip { background: var(--media-bg); color: var(--muted); }
  .photo-modal,
  .photo-modal-stage,
  .photo-modal-summary,
  .photo-modal-comments-inner {
    background: var(--page-a);
    color: var(--text);
  }
  .photo-modal-comments {
    background: var(--page-a);
    border-color: var(--line);
  }
  .photo-modal .muted,
  .photo-modal .meta,
  .photo-modal-meta-row,
  .photo-modal-section-label { color: var(--muted); }
  .photo-modal .icon-button { color: var(--text); }
  .photo-modal .icon-button:hover { background: var(--soft-2); color: var(--text); }
  .photo-modal-comments-scroll { scrollbar-color: var(--muted) transparent; }
  .photo-counter {
    background: rgba(10,10,10,.42);
    color: rgba(255,255,255,.86);
    border-radius: var(--photo-radius-sm);
    font-size: 10px;
    letter-spacing: .06em;
  }
  /* Auf dunklem Grund braucht dieselbe Farbe mehr Helligkeit. */
  :root[data-theme="dark"] .ranking-badge { --rank-light: 62%; }
  .ranking-badge[style*="--rank-sat:0%"] .ranking-badge-mark {
    fill: var(--muted);
    color: var(--muted);
  }
  .comment { border-color: var(--line); }

  .notice.unread { background: var(--accent-soft); border-color: var(--accent); }
  .message.sent { background: var(--accent-soft); }

  /* „Meine Challenges“: die Rubrikleiste war eine feste dunkle Flaeche aus
     dem alten Entwurf. Auf hellem Grund stand dadurch schwarze Schrift auf
     Schwarz. Sie folgt jetzt dem Farbsystem. */
  .mine-category-header {
    background: var(--soft);
    border-color: var(--line);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mine-category-count {
    background: var(--card);
    border-color: var(--line);
    color: var(--copy);
  }
  .mine-view-switcher {
    background: var(--soft);
    border-color: var(--line);
  }
  /* Wie man etwas ansieht, ist die leisere Entscheidung: helle Flaeche in
     der Signalfarbe, Symbol und Kontur im kraeftigen Ton. Identisch unter
     „Entdecken“ und „Meine“, weil beide dieselbe Schaltergruppe benutzen. */
  .mine-view-button { color: var(--muted); }
  .mine-view-button:hover { background: var(--soft-2); color: var(--text); }
  .mine-view-button.is-active {
    background: var(--accent-soft);
    color: var(--accent-deep);
    box-shadow: inset 0 0 0 1px var(--accent);
  }
  /* Kuerzel im Kreis: Hintergrund und Schrift kamen sich im Dunkelmodus
     ins Gehege, beide waren nahezu weiss. */
  .avatar {
    background: var(--accent);
    color: var(--accent-ink);
  }

  /* ------------------------------------------------- Challenge-Detailseite */
  .challenge-detail-page {
    --detail-page: var(--page-a);
    --detail-surface: var(--card);
    --detail-surface-raised: var(--soft);
    --detail-text: var(--text);
    --detail-copy: var(--copy);
    --detail-muted: var(--muted);
    --detail-line: var(--line);
    --detail-accent: var(--accent);
    color: var(--detail-text);
  }
  .challenge-detail-page::before { background: var(--detail-page); }
  .challenge-detail-page .challenge-detail-surface {
    color: var(--detail-text);
    background: var(--detail-surface);
    border-color: var(--line-strong);
  }
  .challenge-detail-page .challenge-stream-area > .create-update-panel,
  .challenge-detail-page .challenge-stream-area > .compact-panel,
  .challenge-detail-page .timeline-content > .update-card,
  .challenge-detail-page .timeline-content > .panel {
    color: var(--detail-text);
    background: var(--detail-surface);
    border: 1px solid var(--line-strong);
    box-shadow: none;
  }
  /* Der Update-Composer bleibt bewusst kantig. Die allgemeine .panel-Regel
     darf hier den globalen Dark-Mode-Kartenradius nicht wieder einfuehren. */
  .challenge-detail-page .challenge-stream-area > .create-update-panel {
    border-radius: 0;
  }
  .challenge-detail-page h1,
  .challenge-detail-page h2,
  .challenge-detail-page h3,
  .challenge-detail-page .panel h1,
  .challenge-detail-page .panel h2,
  .challenge-detail-page .challenge-body h3,
  .challenge-detail-page .link-title,
  .challenge-detail-page .detail-grid p,
  .challenge-detail-page .comment-head strong,
  .challenge-detail-page .expandable-copy-label {
    color: var(--detail-text);
  }
  .challenge-detail-page .muted,
  .challenge-detail-page .meta,
  .challenge-detail-page .small-note,
  .challenge-detail-page .update-location,
  .challenge-detail-page .location-line,
  .challenge-detail-page .form-grid label,
  .challenge-detail-page .file-drop-sub {
    color: var(--detail-muted);
  }
  .challenge-detail-page .update-copy p,
  .challenge-detail-page .detail-text,
  .challenge-detail-page .challenge-body p,
  .challenge-detail-page .comment p,
  .challenge-detail-page .expandable-copy-text {
    color: var(--detail-copy);
  }
  .challenge-detail-page .expandable-copy-toggle,
  .challenge-detail-page .inline-more,
  .challenge-detail-page .mention {
    color: var(--accent);
  }
  .challenge-detail-page .ghost-button,
  .challenge-detail-page .icon-button {
    color: var(--detail-text);
    background: transparent;
  }
  .challenge-detail-page .ghost-button:hover {
    color: var(--page-a);
    background: var(--text);
  }
  .challenge-detail-page .icon-button:hover {
    color: var(--detail-text);
    background: var(--soft);
  }
  .challenge-detail-page .icon-button.is-liked { color: var(--accent); background: transparent; }
  .challenge-detail-page .badge { color: var(--accent-ink); background: var(--accent); }
  .challenge-detail-page .icon-button.is-leave-action { color: var(--danger); background: transparent; }
  .challenge-detail-page .icon-button.is-leave-action:hover { color: var(--page-a); background: var(--danger); }
  .challenge-detail-page .badge.ghost { color: var(--muted); background: transparent; }
  .challenge-detail-page .progress-meta,
  .challenge-detail-page .progress-meta strong { color: var(--detail-muted); }
  .challenge-detail-page .progress-meta strong:last-child { color: hsl(var(--progress-hue,32) 86% 52%); }
  .challenge-detail-page .progress-bar { background: var(--track); }

  /* Mitmachen-/Erinnerungsaktionen unter der kompakten Teilnehmersteuerung. */
  .challenge-detail-page .participation-detail-actions .participation-join-card {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--line-strong);
    background: var(--card);
  }
  .challenge-detail-page .participation-detail-actions .participation-member-actions {
    margin: 0;
    padding: 18px 18px 16px;
    border-top: 1px solid var(--line-strong);
  }
  .challenge-detail-page .participation-reminder-button {
    color: var(--detail-text);
  }
  .challenge-detail-page .participation-reminder-button:hover,
  .challenge-detail-page .participation-reminder-button:focus-visible {
    color: var(--detail-accent);
    background: var(--soft);
  }
  .challenge-detail-page .challenge-watch-button.is-detail.is-active,
  .challenge-detail-page .participant-leave-button {
    color: var(--detail-text);
  }
  .challenge-detail-page .challenge-watch-button.is-detail.is-active:hover,
  .challenge-detail-page .challenge-watch-button.is-detail.is-active:focus-visible,
  .challenge-detail-page .participant-leave-button:hover,
  .challenge-detail-page .participant-leave-button:focus-visible {
    color: var(--detail-text);
    background: color-mix(in srgb,var(--danger) 8%,transparent);
  }
  .challenge-detail-page .challenge-detail-meta { color: var(--detail-muted); }
  .challenge-detail-page .challenge-detail-owner strong,
  .challenge-detail-page .challenge-detail-dates > span:not(.challenge-detail-date-arrow),
  .challenge-detail-page .challenge-detail-place {
    color: var(--detail-copy);
  }
  .challenge-detail-page input,
  .challenge-detail-page textarea,
  .challenge-detail-page select,
  .challenge-detail-page .comment-input-wrap,
  .challenge-detail-page .file-drop {
    color: var(--detail-text);
    background: var(--input);
    border-color: var(--line-strong);
    caret-color: var(--detail-accent);
  }
  .challenge-detail-page input::placeholder,
  .challenge-detail-page textarea::placeholder { color: var(--muted); opacity: 1; }
  .challenge-detail-page input:focus,
  .challenge-detail-page textarea:focus,
  .challenge-detail-page select:focus {
    border-color: var(--detail-accent);
    box-shadow: none;
  }
  .challenge-detail-page .comment-input-wrap,
  .challenge-detail-page .comment-input-wrap:focus-within {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .challenge-detail-page .comment-input-wrap textarea,
  .challenge-detail-page .comment-input-wrap textarea:focus,
  .challenge-detail-page .comment-input-wrap textarea:focus-visible {
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none;
  }
  .challenge-detail-page .comment,
  .challenge-detail-page .update-card > .actionbar { border-color: var(--detail-line); }
  .challenge-detail-page .media-carousel,
  .challenge-detail-page .media-strip { background: transparent; border-color: transparent; }
  .challenge-detail-page .media-dot::after { background: var(--line); }
  .challenge-detail-page .media-dot.active::after { background: var(--detail-accent); }
  .challenge-detail-page .file-drop:hover,
  .challenge-detail-page .file-drop.drag-active {
    color: var(--detail-text);
    background: var(--accent-soft);
    border-color: var(--detail-accent);
  }
  .challenge-detail-page .challenge-detail-copy-row {
    background: transparent;
    border-color: var(--detail-line);
  }
  /* Der Kasten um „Ziel“ kam aus der allgemeinen Flaechenregel fuer
     .detail-grid > div. Auf der Challenge-Seite gehoert dort keiner hin. */
  .challenge-detail-page .detail-grid > div {
    background: transparent;
    border: 0;
  }
  .challenge-detail-page .detail-grid h3 {
    margin-bottom: 9px;
    color: var(--detail-muted);
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
  }
  .challenge-detail-page .participant-stream-current-copy > strong {
    color: var(--detail-text);
  }
  /* Discover-Karten verwenden in beiden Themes denselben schwarzen Sockel.
     Die Interaktionsflächen bleiben zunächst unsichtbar und werden erst bei
     Hover/Fokus sichtbar. */
  .discover-challenge-overlay-card > .discover-challenge-actions {
    background: #000000;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .discover-challenge-overlay-card > .discover-challenge-actions .icon-button:not(.is-liked):not(.is-leave-action),
  .discover-challenge-overlay-card > .discover-challenge-actions .vote-control {
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.14);
  }
  .discover-challenge-overlay-card > .discover-challenge-actions .icon-button:not(.is-liked):not(.is-leave-action):hover,
  .discover-challenge-overlay-card > .discover-challenge-actions .icon-button:not(.is-liked):not(.is-leave-action):focus-visible,
  .discover-challenge-overlay-card > .discover-challenge-actions .vote-button:hover,
  .discover-challenge-overlay-card > .discover-challenge-actions .vote-button:focus-visible {
    color: #ffffff;
    background: rgba(255,255,255,.10);
  }
  .discover-challenge-overlay-card > .discover-challenge-actions .vote-button {
    color: rgba(255,255,255,.74);
  }
  .discover-challenge-overlay-card > .discover-challenge-actions .vote-score {
    color: #ffffff;
  }
  .discover-challenge-overlay-card > .discover-challenge-actions .vote-score.is-positive {
    color: var(--vote-up);
  }
  .discover-challenge-overlay-card > .discover-challenge-actions .vote-score.is-negative {
    color: color-mix(in srgb,var(--danger) 88%,#541018 12%);
  }

  .challenge-detail-page .challenge-stream-kicker { color: var(--detail-muted); }
  .challenge-detail-page .participant-stream-label {
    color: var(--detail-text);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .05em;
  }
  .challenge-detail-page .participant-update-label,
  .update-detail-page .participant-update-label {
    color: var(--accent-deep);
    background: transparent;
    border-color: var(--accent);
  }
  .challenge-detail-page .update-card.is-participant-update {
    border-color: var(--accent);
    box-shadow: none;
  }
  /* In der Challenge-Zeitleiste kennzeichnet bereits der Kartenrahmen das
     Teilnahme-Update. Der zusätzliche Poster-Streifen würde dieselbe linke
     Kante ein zweites Mal betonen und wie ein überlagerter Rahmen wirken. */
  .challenge-detail-page .timeline-content > .update-card.is-participant-update.is-text-only .update-text-poster-accent {
    display: none;
  }
  .challenge-detail-page .challenge-stream-empty {
    background: var(--soft);
    border-color: var(--line);
  }

  /* ------------------------------------------------------- Tag/Nacht-Knopf */
  /* Der Schalter zeigt bewusst den Modus, zu dem der Klick wechselt:
     im Tagmodus den Mond, im Dunkelmodus die Sonne. */
  .theme-toggle svg { display: block; }
  .theme-toggle .icon-day { display: none; }
  .theme-toggle .icon-night { display: block; }
  :root[data-theme="dark"] .theme-toggle .icon-day { display: block; }
  :root[data-theme="dark"] .theme-toggle .icon-night { display: none; }
  :root[data-theme="dark"] .ghost-button:hover,
  :root[data-theme="dark"] .top-actions button:hover {
    color: var(--text);
    background: var(--soft-2);
    border-color: var(--line-strong);
  }

  .icon-button.danger-action {
    color: var(--danger);
    background: transparent;
    box-shadow: none;
  }
  .icon-button.danger-action:hover {
    color: var(--danger);
    background: color-mix(in srgb,var(--danger) 10%,transparent);
    box-shadow: none;
  }

}

@layer theme {
  /* Dreieransicht: schwarze Grundfläche ohne sichtbare Buttonrahmen. */
  .mine-challenge-grid.mine-view-three .discover-challenge-actions,
  .discover-challenge-grid.discover-layout-three .discover-challenge-actions,
  .discover-update-grid.discover-layout-three > .update-card > .actionbar {
    background: #000000;
    border-top-color: rgba(255,255,255,.08);
  }
  .mine-challenge-grid.mine-view-three .discover-challenge-actions .icon-button:not(.is-liked):not(.is-leave-action),
  .discover-challenge-grid.discover-layout-three .discover-challenge-actions .icon-button:not(.is-liked):not(.is-leave-action),
  .discover-update-grid.discover-layout-three > .update-card > .actionbar .icon-button:not(.is-liked):not(.is-leave-action) {
    border: 0;
    background: #000000;
    color: rgba(255,255,255,.72);
    box-shadow: none;
  }
  .mine-challenge-grid.mine-view-three .discover-challenge-actions .icon-button:not(.is-liked):not(.is-leave-action):hover,
  .mine-challenge-grid.mine-view-three .discover-challenge-actions .icon-button:not(.is-liked):not(.is-leave-action):focus-visible,
  .discover-challenge-grid.discover-layout-three .discover-challenge-actions .icon-button:not(.is-liked):not(.is-leave-action):hover,
  .discover-challenge-grid.discover-layout-three .discover-challenge-actions .icon-button:not(.is-liked):not(.is-leave-action):focus-visible,
  .discover-update-grid.discover-layout-three > .update-card > .actionbar .icon-button:not(.is-liked):not(.is-leave-action):hover,
  .discover-update-grid.discover-layout-three > .update-card > .actionbar .icon-button:not(.is-liked):not(.is-leave-action):focus-visible {
    color: #ffffff;
    background: rgba(255,255,255,.10);
    transform: translateY(-1px);
  }
  .mine-challenge-grid.mine-view-three .discover-challenge-actions > .vote-control,
  .discover-challenge-grid.discover-layout-three .discover-challenge-actions > .vote-control {
    border: 0;
    background: rgba(255,255,255,.055);
    color: #ffffff;
    box-shadow: none;
  }
  .mine-challenge-grid.mine-view-three .discover-challenge-actions > .vote-control .vote-button,
  .discover-challenge-grid.discover-layout-three .discover-challenge-actions > .vote-control .vote-button {
    background: transparent;
    color: rgba(255,255,255,.70);
  }
  .mine-challenge-grid.mine-view-three .discover-challenge-actions > .vote-control .vote-button:hover,
  .mine-challenge-grid.mine-view-three .discover-challenge-actions > .vote-control .vote-button:focus-visible,
  .discover-challenge-grid.discover-layout-three .discover-challenge-actions > .vote-control .vote-button:hover,
  .discover-challenge-grid.discover-layout-three .discover-challenge-actions > .vote-control .vote-button:focus-visible {
    background: rgba(255,255,255,.10);
    color: #ffffff;
  }
  .mine-challenge-grid.mine-view-three .discover-challenge-actions > .vote-control .vote-score,
  .discover-challenge-grid.discover-layout-three .discover-challenge-actions > .vote-control .vote-score {
    color: #ffffff;
  }
  .mine-challenge-grid.mine-view-three .discover-challenge-actions > .vote-control .vote-score.is-positive,
  .discover-challenge-grid.discover-layout-three .discover-challenge-actions > .vote-control .vote-score.is-positive {
    color: var(--vote-up);
  }
  .mine-challenge-grid.mine-view-three .discover-challenge-actions > .vote-control .vote-score.is-negative,
  .discover-challenge-grid.discover-layout-three .discover-challenge-actions > .vote-control .vote-score.is-negative {
    color: color-mix(in srgb,var(--danger) 88%,#541018 12%);
  }
}


@layer theme {
  /* Zaehler bleiben neutral: aktive Like-/Vote-Farben gehoeren nur den
     Symbolen bzw. Buttons, nicht den Zahlen selbst. */
  .discover-challenge-overlay-card > .discover-challenge-actions .icon-button,
  .mine-challenge-grid.mine-view-three .discover-challenge-actions .icon-button,
  .discover-challenge-grid.discover-layout-three .discover-challenge-actions .icon-button,
  .discover-update-grid.discover-layout-three > .update-card > .actionbar .icon-button {
    --icon-button-count-color: rgba(255,255,255,.92);
  }
  .discover-challenge-overlay-card > .discover-challenge-actions > .vote-control,
  .mine-challenge-grid.mine-view-three .discover-challenge-actions > .vote-control,
  .discover-challenge-grid.discover-layout-three .discover-challenge-actions > .vote-control {
    --vote-score-color: #ffffff;
  }
}

@layer theme {
  .top-actions button.top-observing-button.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
  }
}

@layer theme {
  /* Challenge-Karten: Favorit sitzt als rahmenlose Bookmark-Aktion in der
     unteren Actionbar. Auf schwarzen Overlay-Footern bleibt er gut lesbar. */
  .discover-challenge-overlay-card > .discover-challenge-actions .challenge-favorite-button.is-actionbar,
  .mine-challenge-grid.mine-view-three .discover-challenge-actions .challenge-favorite-button.is-actionbar,
  .discover-challenge-grid.discover-layout-three .discover-challenge-actions .challenge-favorite-button.is-actionbar {
    color: rgba(255,255,255,.72);
    background: transparent;
  }
  .discover-challenge-overlay-card > .discover-challenge-actions .challenge-favorite-button.is-actionbar:hover,
  .discover-challenge-overlay-card > .discover-challenge-actions .challenge-favorite-button.is-actionbar:focus-visible,
  .mine-challenge-grid.mine-view-three .discover-challenge-actions .challenge-favorite-button.is-actionbar:hover,
  .mine-challenge-grid.mine-view-three .discover-challenge-actions .challenge-favorite-button.is-actionbar:focus-visible,
  .discover-challenge-grid.discover-layout-three .discover-challenge-actions .challenge-favorite-button.is-actionbar:hover,
  .discover-challenge-grid.discover-layout-three .discover-challenge-actions .challenge-favorite-button.is-actionbar:focus-visible,
  .discover-challenge-overlay-card > .discover-challenge-actions .challenge-favorite-button.is-actionbar.is-active,
  .mine-challenge-grid.mine-view-three .discover-challenge-actions .challenge-favorite-button.is-actionbar.is-active,
  .discover-challenge-grid.discover-layout-three .discover-challenge-actions .challenge-favorite-button.is-actionbar.is-active {
    color: var(--favorite);
    background: transparent;
  }
}

@layer theme {
  /* Challenge-Actionbars bleiben rahmenlos. Aktive Zustände dürfen ihre
     Farbe behalten, aber einzelne Buttons bekommen keinen eigenen Kasten. */
  .discover-challenge-action-buttons .icon-button,
  .challenge-card-actions .icon-button,
  .discover-challenge-action-buttons .icon-button:hover,
  .discover-challenge-action-buttons .icon-button:focus-visible,
  .challenge-card-actions .icon-button:hover,
  .challenge-card-actions .icon-button:focus-visible {
    border: 0;
    box-shadow: none;
  }
}