/* ============================================================
   GOLFERCOINS — App Styles
   ============================================================
   T1 Refactoring 2026-06-11: Aus app.html <style>-Block extrahiert.
   Wird via <link rel="stylesheet"> in app.html geladen.
   Strategie identisch zum Vorzustand — keine Style-Regeln verändert.
   ============================================================ */

    /* ==========================================
       DESIGN TOKENS — Light Mode First
       ========================================== */
    :root {
      --bg: #F7F3EA;
      --surface: #FCFAF5;
      --surface-2: #F2EDE0;
      --text: #2A2A2A;
      --text-muted: #6B6257;
      --text-subtle: #9A9081;
      --primary: #1E5631;
      --primary-soft: #E6EEE8;
      --accent: #B8956A;
      --accent-soft: #F2E9D9;
      --border: #E8E3D8;
      --border-strong: #D4CCBC;
      --danger: #B3412E;
      --gold: #C9A961;

      --coin-light: #D9D5CC;
      --coin-mid: #B5B1A7;
      --coin-dark: #9E9A90;
      --coin-border: #A8A49A;
      --coin-gold-light: #E8CB8E;
      --coin-gold-mid: #C9A961;
      --coin-gold-dark: #A88740;

      --radius-sm: 10px;
      --radius-md: 16px;
      --radius-lg: 22px;
      --radius-xl: 28px;

      --shadow-1: 0 1px 2px rgba(0,0,0,0.03), 0 2px 8px rgba(0,0,0,0.04);
      --shadow-2: 0 2px 4px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.06);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
    html, body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
      font-size: 18px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }
    /* Fraunces als Headline- und Wortmarken-Font.
       Anwendungsstellen:
       - h1, h2, h3 generell (alle Screen-Überschriften)
       - .brand-name (App-Header in Sammlung)
       - .lp-header-lockup, .info-title (Marken-Anker)
       - .lp-headline, .lp-final h2 (Landingpage-Headlines)
       Patrick-Hand-Empty-States, Buttons und Kleintexte bleiben Inter. */
    h1, h2, h3,
    .brand-name,
    .lp-header-lockup,
    .info-title,
    .lp-headline,
    .lp-final h2 {
      font-family: 'Fraunces', Georgia, "Times New Roman", serif;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    /* iOS Safari ignoriert overscroll-behavior auf html/body oft — daher
       der härtere Ansatz: html + body fixieren (height:100% + overflow:hidden),
       damit das Dokument gar keinen Scroll-Kontext mehr hat. Dann kann
       auch kein Rubber-Band die obere Sticky-Zone unter die iPhone-Statusbar
       schieben. Internes Scrollen läuft weiter über .shelf (eigener Scroller
       mit overscroll-behavior-y:contain). */
    html {
      height: 100%;
      overflow: hidden;
      overscroll-behavior: none;
    }
    body {
      height: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      overscroll-behavior: none;
    }
    img, svg { display: block; max-width: 100%; }
    button {
      font-family: inherit;
      font-size: inherit;
      cursor: pointer;
      background: none;
      border: none;
      color: inherit;
    }
    input, textarea {
      font-family: inherit;
      font-size: inherit;
      background: none;
      border: none;
      color: inherit;
    }

    /* ==========================================
       PHONE FRAME (on desktop) + FIXED-HEIGHT APP
       ========================================== */
    .app {
      position: relative;
      width: 100%;
      max-width: 100vw;
      height: 100vh;
      height: 100dvh;
      background: var(--bg);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* Auth-Banner — schmale farbige Leiste oben drüber, sticky.
       Sichtbar nur wenn der User abgemeldet ist und nicht auf
       Landing/Auth-Screens steht (sonst doppelt). Klick auf
       die Leiste oder den Button öffnet den Auth-Screen. */
    #auth-banner {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: #fbf4de;
      color: #6b4f0e;
      border-bottom: 1px solid #e6d8a8;
      font-size: 13px;
      cursor: pointer;
      user-select: none;
    }
    #auth-banner[hidden] { display: none; }
    .auth-banner-icon { font-size: 16px; flex-shrink: 0; }
    .auth-banner-text { flex: 1; line-height: 1.3; }
    .auth-banner-btn {
      flex-shrink: 0;
      padding: 6px 14px;
      background: #6b4f0e;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }
    .auth-banner-btn:active { transform: scale(0.97); }
    @media (min-width: 640px) {
      /* Desktop: html+body wieder scrollbar machen. Auf Mobile bleibt
         overflow:hidden für die iOS-Safari-Rubber-Band-Sperre — aber
         dort liegt der iPhone-Frame sowieso 100vh und braucht keinen
         Body-Scroll. Auf Desktop dagegen ragt die 900px-App auf kleineren
         Laptop-Displays (1366×768 z.B.) unten raus und wäre ohne
         scroll-fähigen Body nicht erreichbar. */
      html, body {
        height: auto;
        overflow: auto;
        overscroll-behavior: auto;
      }
      body {
        background: #ddd7c7;
        padding: 40px 0;
        min-height: 100vh;
      }
      .app {
        max-width: 430px;
        height: 900px;
        border-radius: 44px;
        box-shadow: 0 30px 80px rgba(0,0,0,0.15), 0 0 0 12px #1a1a1a, 0 0 0 13px #2a2a2a;
      }
    }

    /* ==========================================
       SCREEN SYSTEM — each active screen fills the app
       ========================================== */
    .screen {
      display: none;
      flex: 1;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }
    .screen.active { display: flex; }

    .screen-scroll {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      /* Reserve space for tab bar: 76px base + safe-area inset for PWA */
      padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
    .screen.no-tabbar .screen-scroll { padding-bottom: 0; }

    /* Sonderfall Sammlung-Screen: als Flex-Spalte layouten, damit das
       Regal dynamisch auf den verfügbaren Platz wächst und die Leer-
       fläche zwischen Auszeichnungen und Tab-Bar verschwindet.
       overflow-y wird vom inneren Shelf übernommen, deshalb hier hidden. */
    #screen-sammlung .screen-scroll {
      display: flex;
      flex-direction: column;
      overflow-y: hidden;
    }
    #screen-sammlung .shelf {
      flex: 1 1 auto;
      min-height: var(--shelf-row-h);
      height: auto;
    }

    /* ==========================================
       HEADER
       ========================================== */
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 20px 12px;
      min-height: 56px;
    }
    /* Header-Titles aller Sub-Screens (Runden, Platz auswählen, Platz
       anlegen, etc.) in der Marken-Schrift Fraunces. Konsistent mit dem
       App-Lockup im Sammlung-Header. Inhalte (Platznamen, Notizen,
       Score) bleiben bewusst in Inter — siehe weiter unten. */
    .header-title {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.01em;
      font-family: 'Fraunces', Georgia, "Times New Roman", serif;
    }
    .header-title .accent { color: var(--primary); }
    /* Zwei-Zeilen-Header-Pattern (Picker, Add-Course):
       .header.header-back-only zeigt nur den Back-Link,
       darunter sitzt .page-title-row mit dem Page-Title.
       Vertikales Spacing minimal, weil Back-Link kompakt ist. */
    .header.header-back-only {
      padding-bottom: 4px;
    }
    .page-title-row {
      padding: 0 20px 16px;
    }
    .header-title .subtle { color: var(--text-muted); font-weight: 400; font-size: 15px; display: block; margin-top: 2px; }
    /* Marken-Block im Header der Sammlungsseite: Golfercoins-Logo links,
       Wordmark daneben. Ersetzt die frühere "Sammlung"-Überschrift, weil
       diese Seite gleichzeitig die Startseite und die Markenpräsenz ist. */
    .header-brand {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }
    .brand-logo {
      width: 44px; height: 44px;
      flex-shrink: 0;
      object-fit: contain;
    }
    .brand-name {
      font-size: 30px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--text);
      line-height: 1;
    }
    .brand-name .accent {
      color: var(--primary);
    }
    /* Stufe A (b86, 2026-06-08): Sammlung-Header bekommt klickbaren
       Lockup aus Logo + Wortmarke wie die Landingpage. Brand-Guide
       1.10× Schriftgröße / 0.30× Gap. Klick → Info-Seite. Wortmarke
       in der Sammlung minimal kleiner als bisher (26px statt 30px),
       damit das Logo daneben Platz hat ohne den Header zu sprengen. */
    .header-brand-btn {
      background: transparent;
      border: 0;
      padding: 0;
      margin: 0;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      color: var(--text);
      gap: 8px;
    }
    .header-brand-btn:active { opacity: 0.7; }
    .header-brand-btn .brand-name {
      font-family: 'Fraunces', Georgia, "Times New Roman", serif;
      font-size: 26px;
    }
    .header-brand-logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 29px;
      height: 29px;
      flex-shrink: 0;
      color: var(--primary);
    }
    .header-brand-logo svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    /* Offline-Pill: dezente Wolke-mit-Strich oben rechts im Viewport.
       Nur sichtbar wenn navigator.onLine === false. Position fixed,
       damit die auf ALLEN Screens erscheint (Sammlung, Coin-Detail,
       Profil etc.), nicht nur im Sammlung-Header. */
    .offline-pill {
      position: fixed;
      top: calc(env(safe-area-inset-top, 0px) + 10px);
      right: 12px;
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 9999;
      opacity: 0.55;
      color: var(--text-muted, #888);
      transition: opacity 180ms ease;
    }
    .offline-pill[hidden] { display: none; }
    .offline-pill svg { width: 100%; height: 100%; }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 2px;
    }
    .icon-btn {
      width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      color: var(--text);
      transition: background 0.15s;
    }
    .icon-btn:active { background: var(--surface-2); }
    .icon-btn[aria-expanded="true"] {
      background: var(--surface-2);
      color: var(--primary);
    }

    /* Sortier-Popover (b90): kompaktes Menü unter dem Sortier-Icon im
       Sammlung-Header. Position via JS gesetzt (top/right an Icon-Anker).
       Cream-getöntes Surface mit Border + Schatten, abgerundet, max-width
       für lange Optionen. Aktive Option mit grünem Häkchen links. */
    .sort-popover {
      position: absolute;
      top: 60px;
      right: 20px;
      z-index: 60;
      min-width: 220px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.14),
        0 2px 6px rgba(0, 0, 0, 0.08);
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    /* hidden-Attribut respektieren — display:flex oben würde sonst das
       Browser-Default [hidden]{display:none} ueberschreiben. */
    .sort-popover[hidden] { display: none; }
    .sort-popover-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 8px;
      background: transparent;
      border: 0;
      color: var(--text);
      font-size: 14px;
      font-weight: 500;
      text-align: left;
      cursor: pointer;
      transition: background 120ms ease;
      -webkit-tap-highlight-color: transparent;
    }
    .sort-popover-item:active { background: var(--surface-2); }
    @media (hover: hover) {
      .sort-popover-item:hover { background: var(--surface-2); }
    }
    .sort-popover-item .sort-check {
      width: 18px;
      flex-shrink: 0;
      color: var(--primary);
      font-weight: 700;
      visibility: hidden;
      font-size: 16px;
      line-height: 1;
    }
    .sort-popover-item.is-active .sort-check { visibility: visible; }
    .sort-popover-item.is-active { color: var(--primary); }
    .sort-popover-item .sort-label {
      flex: 1;
      white-space: nowrap;
    }

    /* Such-Bar: schmale Pill-Form direkt unter dem Header. Nur sichtbar,
       wenn die Lupe sie aufgeklappt hat. Filter wirkt live aufs Regal. */
    .search-bar {
      padding: 4px 20px 10px;
    }
    .search-inner {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: var(--surface-2);
      border-radius: 999px;
      border: 1px solid var(--border);
    }
    .search-icon { color: var(--text-muted); flex-shrink: 0; }
    .search-bar input {
      flex: 1;
      min-width: 0;
      border: 0;
      background: transparent;
      font-size: 15px;
      color: var(--text);
      outline: none;
      padding: 2px 0;
    }
    .search-close {
      background: transparent;
      border: 0;
      color: var(--text-muted);
      font-size: 16px;
      line-height: 1;
      padding: 4px 6px;
      cursor: pointer;
      flex-shrink: 0;
    }
    .search-close:active { color: var(--text); }

    /* Leerer Such-Zustand: freundliche Info, wenn kein Coin passt. */
    .shelf-empty {
      padding: 40px 24px;
      text-align: center;
      color: var(--text-muted);
      font-size: 14px;
      line-height: 1.5;
    }

    /* ==========================================
       EMPTY-STATE-CARD (Post-it-Stil)
       Erscheint, wenn ein Bereich der App leer ist und der User
       nicht weiß, was zu tun ist. Zwei aktuelle Anwendungen:
         - Sammlung leer (kein Coin außer Heimat)
         - Tab Runden leer (keine Runden gespielt)
       Stil: bewusst wie ein gelbes Post-it, das auf die App geklebt
       wurde — leicht schräg, abgesetzter Schatten, andere Material-
       Anmutung als die App selbst. Macht klar 'das hier gehört
       eigentlich nicht zur App, ist nur ein Hinweis bis du losgelegt
       hast'. Verschwindet automatisch sobald die zugehörige Aktion
       (erster Coin / erste Runde) erfolgt ist.
       ========================================== */
    .empty-state {
      position: relative;
      margin: 24px 20px 16px;
      padding: 28px 22px 26px;
      background: linear-gradient(135deg, #FFF8D9 0%, #FFF1B8 100%);
      border: 1px solid rgba(180, 145, 60, 0.25);
      border-radius: 6px;
      text-align: center;
      color: var(--text);
      transform: rotate(-1.2deg);
      box-shadow:
        0 1px 0 rgba(180, 145, 60, 0.20),
        0 8px 18px rgba(120, 90, 0, 0.18),
        0 16px 32px rgba(120, 90, 0, 0.10);
    }
    /* Sanfte 'Klebe-Ecke' oben links — gibt dem Post-it den
       angepappten Look. */
    .empty-state::before {
      content: '';
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%) rotate(-3deg);
      width: 60px;
      height: 14px;
      background: rgba(255, 255, 255, 0.55);
      border-radius: 2px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
    }
    /* Silberner Coin als Icon oben in der Card — sieht aus wie ein
       echter Tier-Silber-Coin aus der Sammlung. Inneres Symbol in
       Markengrün, deutlich groß (das G geht fast bis zum Rand),
       sodass es als 'echter Coin' lesbar ist. Lichtreflex gibt
       Material-Anmutung. */
    .empty-state-icon {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      margin: 0 auto 16px;
      border-radius: 50%;
      background: linear-gradient(135deg, #F4F4F7 0%, #C8C8D0 50%, #8E8E97 100%);
      border: 2px solid #6E6E76;
      color: var(--primary);
      overflow: hidden;
      box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.7),
        inset 0 -2px 4px rgba(40, 40, 50, 0.20),
        0 4px 10px rgba(0, 0, 0, 0.20);
    }
    .empty-state-icon::before {
      content: '';
      position: absolute;
      inset: -20%;
      background: linear-gradient(125deg,
        transparent 0%,
        transparent 38%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 62%,
        transparent 100%);
      pointer-events: none;
      animation: badge-shimmer 4s linear infinite;
      mix-blend-mode: screen;
    }
    .empty-state-icon svg {
      position: relative;
      z-index: 1;
      width: 42px;
      height: 42px;
      display: block;
    }
    /* Patrick Hand (Google Font) für Headline + Text — sachlich-
       handschriftlich, weniger verspielt als Caveat. Wirkt wie eine
       Notiz auf einem aufgepappten Zettel. fallback: cursive falls
       offline. */
    .empty-state-title {
      font-family: 'Patrick Hand', cursive;
      font-size: 26px;
      font-weight: 400;
      letter-spacing: 0;
      margin-bottom: 8px;
      color: var(--text);
      line-height: 1.2;
    }
    .empty-state-text {
      font-family: 'Patrick Hand', cursive;
      font-size: 19px;
      font-weight: 400;
      color: var(--text);
      line-height: 1.4;
      max-width: 340px;
      margin: 0 auto;
      opacity: 0.92;
    }
    .empty-state-text strong {
      color: var(--primary);
      font-weight: 400;
    }
    /* Dezenter Hinweis unter dem Post-It-Text, führt zur Info-Seite.
       Phase-2-Idee Onboarding-Karten verworfen — User der mehr wissen will
       findet hier den Pfad zur Info-Seite (1 Tap entfernt). Patrick-Hand
       passt zur Post-It-Optik, kleiner als der Haupttext. Nur „hier" ist
       als Link gestyled (grün, unterstrichen) — der Rest bleibt normaler
       Post-It-Text. */
    .empty-state-link {
      margin-top: 12px;
      font-family: 'Patrick Hand', cursive;
      font-size: 16px;
      color: var(--text);
      opacity: 0.85;
    }
    .empty-state-link-a {
      color: var(--primary);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .empty-state-link-a:active {
      opacity: 0.6;
    }
    /* In-Shelf-Variante: Empty-State liegt als Post-it absolut über
       den dahinterliegenden Ghost-Coin-Reihen. Sammelbuch-Tiefen-
       Effekt — der User sieht das Post-it dominant, die Ghosts ragen
       an den Rändern raus und deuten 'hier kommen Coins hin' an.
       Top-Anker bei ~42 % statt 50 % verschiebt das Post-it leicht
       nach oben, sodass die obere Ghost-Reihe stärker überdeckt wird
       (untere Reihe schaut entsprechend mehr raus). */
    .empty-state.in-shelf {
      position: absolute;
      top: 42%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-1.2deg);
      width: 78%;
      max-width: 300px;
      margin: 0;
      z-index: 2;
    }
    /* Icon-Variante 'small': für Empty-States, deren Icon-Symbol
       (Flag, etc.) in den Proportionen den Badge-Icons entsprechen
       soll — also kleineres Symbol im Coin-Container. Sammlung-Card
       behält das Standard-Größenverhältnis (G füllt den Coin), weil
       sie den Sammelmedaille-Charakter trägt. */
    .empty-state-icon.icon-small svg {
      width: 28px;
      height: 28px;
    }
    /* Inline-Plus-Icon im Fließtext: kleiner grüner Kreis mit weißem
       Plus, referenziert das echte Plus-Coin oben rechts. middle
       zentriert auf der x-Höhe der Schrift. */
    .empty-state-text .plus-inline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      vertical-align: middle;
      margin: 0 3px 4px;
      box-shadow: 0 1px 3px rgba(30, 86, 49, 0.35);
    }
    .empty-state-text .plus-inline svg {
      width: 14px;
      height: 14px;
      display: block;
    }

    .back-btn {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 16px 6px 12px;
      color: var(--primary);
      font-weight: 500;
      font-size: 17px;
      min-height: 36px;
    }

    /* ==========================================
       COIN
       ========================================== */
    .coin {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, var(--coin-light) 0%, var(--coin-mid) 55%, var(--coin-dark) 100%);
      border: 1.5px solid var(--coin-border);
      box-shadow: inset 0 2px 4px rgba(255,255,255,0.35), inset 0 -2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.08);
      color: #5C574E;
      font-weight: 700;
      letter-spacing: 0.06em;
      flex-shrink: 0;
      position: relative;
    }
    .coin.gold {
      background: radial-gradient(circle at 30% 30%, var(--coin-gold-light) 0%, var(--coin-gold-mid) 55%, var(--coin-gold-dark) 100%);
      border-color: #8B6F30;
      color: #4A3818;
    }
    .coin-sm { width: 44px; height: 44px; font-size: 11px; }
    .coin-md { width: 72px; height: 72px; font-size: 14px; }
    .coin-shelf { width: 88px; height: 88px; font-size: 15px; }
    .coin-lg { width: 110px; height: 110px; font-size: 18px; }
    .coin-xl { width: 180px; height: 180px; font-size: 24px; }

    /* Herkunfts-Pill für jeden Coin (außer wenn keine Region-Info vorliegt).
       Ausland: Flaggen-Emoji. Inland (DE): KFZ-Kürzel des Bundeslandes
       (HH, NI, BY, SH …) — das jeder Deutsche sowieso auf Autos liest.
       Sitzt unten rechts wie ein Stempel auf einer Briefmarke. */
    .coin-flag {
      position: absolute;
      bottom: -4px;
      right: -4px;
      min-width: 26px;
      height: 18px;
      padding: 0 5px;
      background: #fff;
      border: 1px solid var(--border-strong);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--text);
      line-height: 1;
      box-shadow: 0 1px 3px rgba(0,0,0,0.18);
      pointer-events: none;
      z-index: 2;
      white-space: nowrap;
    }
    /* Emoji-Variante (Flagge) braucht mehr Platz und keinen Text-Letterspacing */
    .coin-flag.is-flag { font-weight: 400; letter-spacing: 0; font-size: 14px; padding: 0 3px; }
    .coin-sm .coin-flag    { min-width: 20px; height: 14px; font-size: 9px;  padding: 0 3px; border-radius: 3px; }
    .coin-sm .coin-flag.is-flag { font-size: 10px; }
    .coin-md .coin-flag    { min-width: 22px; height: 15px; font-size: 10px; padding: 0 3px; }
    .coin-md .coin-flag.is-flag { font-size: 11px; }
    .coin-shelf .coin-flag { min-width: 26px; height: 18px; font-size: 12px; }
    .coin-shelf .coin-flag.is-flag { font-size: 14px; }
    .coin-lg .coin-flag    { min-width: 30px; height: 20px; font-size: 13px; }
    .coin-lg .coin-flag.is-flag { font-size: 16px; }
    .coin-xl .coin-flag    { min-width: 38px; height: 24px; font-size: 15px; padding: 0 6px; border-radius: 5px; }
    .coin-xl .coin-flag.is-flag { font-size: 20px; }
    /* Globaler Pin-Toggle: User kann im Profil die Bundesland-/Länder-
       Pills überall verbergen. Wirkt automatisch auf alle Render-Pfade
       (Regal, Picker, Coin-Detail-Hero, Reveal etc.) — ein Schalter,
       eine Wirkung. Default ist `aus` (also Pins sichtbar). */
    body.no-coin-flags .coin-flag { display: none; }

    /* Coin-Variante 1: einheitlicher Brand-Grün-Coin mit weißen Initialen
       als Fallback. Aktuell ungenutzt im Render-Pfad (alle Coins ohne
       Heimat-Upload tragen das G-Monogramm), bleibt als Klasse erhalten. */
    .coin.has-logo {
      background-image: none;
      background-color: var(--primary);
      color: #fff;
      border-color: rgba(0, 0, 0, 0.20);
      letter-spacing: 0.04em;
      box-shadow:
        inset 0 2px 5px rgba(255, 255, 255, 0.14),
        inset 0 -3px 6px rgba(0, 0, 0, 0.22),
        0 4px 12px rgba(0, 0, 0, 0.15);
    }
    /* Coin-Variante 2: gespielt + echtes Club-Logo als Bitmap.
       Neutraler weißer Hintergrund lässt das Logo frei wirken.
       Das <img> sitzt rund im Coin, object-fit: contain hält Proportionen. */
    .coin.has-image {
      background-image: none;
      background-color: #fff;
      color: transparent;
      border-color: var(--border-strong);
      padding: 0;
      /* overflow: visible — damit die Herkunfts-Pill außen am Rand
         sichtbar bleibt. Das Logo-Bild wird selber rund geclippt. */
      overflow: visible;
      box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.10);
    }

    /* 3D-Coin-Hero: das gerenderte PNG bringt eigenen Rand, eigenen
       Schatten und eigenes Material mit. CSS-Coin-Styling wäre kontra-
       produktiv und würde das Bild umrahmen — daher resetten wir
       background, border, box-shadow und padding auf 0. Bild füllt
       Container, behält Aspect-Ratio. */
    .coin.coin-3d {
      background: transparent !important;
      background-image: none !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0;
      overflow: visible;
    }
    .coin.coin-3d .coin-3d-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      padding: 0;
    }
    /* Flag/Bundesland-Pill am Coin-Rand: Beim 3D-PNG hat das Bild 4 %
       Padding rundum für den Schatten, der eigentliche Coin-Rand sitzt
       also 4 % innerhalb des Containers. Die Standard-Flag-Position
       (bottom/right: -4px) liegt damit deutlich außerhalb des Coin-
       Rands und sieht „abgeschnitten" aus. Hier die Pill um das
       Padding nach innen schieben, damit sie unten rechts am Coin-
       Rand klebt — relative %-Werte funktionieren für coin-xl wie für
       coin-shelf gleich gut. */
    .coin.coin-3d .coin-flag {
      bottom: 4%;
      right: 4%;
    }
    .coin.has-image .coin-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 6%;
      box-sizing: border-box;
      display: block;
      border-radius: 50%;
    }

    /* ==========================================
       COIN-METALL-SYSTEM — Standard Silber, Premium Gold
       --------------------------------------------------------
       Alle Sammelcoins haben einen Edelmetall-Look. Standard ist
       ein dezentes Silber als Coin-Material — alle Plätze sind
       per se Sammlungs-würdig. Top-25-Plätze bekommen Gold als
       Premium-Stufe darüber. Brand-Coin (Marke) bleibt bewusst
       weiß, weil er kein Sammelobjekt ist, sondern Identitäts-
       Anker.

       Heimat-Coin priorisiert über Tier (persönlichste Info).

       Zwei Render-Welten parallel:
         - Brand-G ohne Logo:  Hintergrund (Silber bzw. Gold)
                               trägt das Brand-G in Markengrün
         - Logo-Coin:          weißer Innenkreis bleibt für die
                               Logo-Lesbarkeit, dafür legt sich
                               ein Frame außen rum (Silber für
                               Standard, Gold für Tier, Grün
                               für Heimat)
       ========================================== */

    /* === Brand-G-Coins ohne Logo === */

    /* Standard-Silber: kräftiger 4-stufiger Münz-Gradient mit
       deutlicher Plastik-Wirkung über die Inset-Shadows.
       Gold hebt sich trotzdem klar ab — der Unterschied ist
       primär Farbe (warm vs. kühl), nicht Helligkeit. */
    .coin.has-image.club-coin {
      background-color: transparent;
      background-image: linear-gradient(135deg,
        #F4F4F7 0%,
        #DADAE0 35%,
        #B6B6BF 70%,
        #8E8E97 100%);
      border-color: #6E6E76;
      box-shadow:
        inset 0 2px 5px rgba(255, 255, 255, 0.7),
        inset 0 -3px 6px rgba(40, 40, 50, 0.18),
        0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* Premium-Gold (Tier): kräftiger als Silber, sticht aus dem
       Münzregal heraus. Brand-G bleibt im Markengrün — guter
       Kontrast auf Gold. */
    .coin.has-image.club-coin.coin-tier-gold {
      background-color: transparent;
      background-image: linear-gradient(135deg,
        #FBE9A8 0%,
        #E9C158 35%,
        #C99634 70%,
        #A77B22 100%);
      border-color: #8C6519;
      box-shadow:
        inset 0 2px 5px rgba(255, 245, 200, 0.65),
        inset 0 -3px 6px rgba(80, 50, 0, 0.22),
        0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* === Logo-Coins === */

    /* Standard-Silber-Frame: 4-px-Frame außen, weißer Innenkreis
       bleibt für die Logo-Lesbarkeit. :not(.brand-coin) schließt
       den Marken-Coin aus (der bleibt weiß mit grünem Rand).
       Gleicher 4-stufiger Münz-Gradient wie der Phase-A-Coin —
       der silberne Frame wirkt wie ein metallischer Münzrand. */
    .coin.has-image:not(.club-coin):not(.brand-coin) {
      border: 4px solid transparent;
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #F4F4F7 0%, #DADAE0 35%, #B6B6BF 70%, #8E8E97 100%) border-box;
      box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.10),
        0 0 0 1px rgba(110, 110, 118, 0.30);
    }

    /* Tier-Gold-Frame: kräftiger Gold-Gradient außen, weißer
       Innenkreis bleibt. Höhere Spezifität als Standard-Silber-
       Frame durch zusätzliche Klasse. */
    .coin.has-image:not(.club-coin).coin-tier-gold {
      border: 4px solid transparent;
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #FBE9A8 0%, #E9C158 35%, #C99634 70%, #A77B22 100%) border-box;
      box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.10),
        0 0 0 1px rgba(140, 101, 25, 0.25);
    }

    /* Heimat-Coin mit Logo: 2-px-Markengrün-Rand wie der Brand-Coin —
       der Heimatclub bekommt damit eine eigene Identität, hebt sich
       von den anderen Logo-Coins ab. Greift, wenn der User ein
       eigenes Logo hochgeladen und auf 'logo'-Modus geschaltet hat.
       Steht NACH den Tier-Regeln, damit der grüne Heimat-Frame
       bei gleicher Spezifität über einem Tier-Frame priorisiert
       wird (Heimat = persönlichste Information). background-image
       wird explizit überschrieben, falls gleichzeitig ein Tier-
       Hintergrund gesetzt wäre. */
    .coin.has-image.is-home:not(.club-coin) {
      border: 2px solid var(--primary);
      background-color: #fff;
      background-image: none;
      box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.10);
    }

    /* Heimat-Marker auch für Brand-G-Coins (club-coin): 2-px-grüner
       Außenring um den Mini-Coin in der Runden-Liste, Picker-Vorschau
       und Add-Round-Coin. Bei diesen kleinen Größen (coin-sm) wäre
       der HEIMATPLATZ-Schriftzug-Coin oder das invertierte G nicht
       sinnvoll lesbar — ein klarer Markengrün-Rand sagt unmissverständ-
       lich „das ist mein Heimatclub", ohne Text-Konkurrenz. */
    .coin.has-image.club-coin.is-home {
      border-color: var(--primary);
      border-width: 2px;
    }

    /* Heimat-Coin als invertierter Default-Coin (kein Logo, kein Tier):
       grüner Markenhintergrund + weißes G. Eigene Identitäts-Aussage,
       lizenzrechtlich sauber (kein fremdes Vereinslogo). Höhere
       Spezifität als das normale .club-coin (extra Klasse), damit der
       Markenhintergrund das Silber-Gradient überschreibt. */
    .coin.has-image.club-coin.is-home-inverted {
      background-color: var(--primary);
      background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--primary) 88%, white) 0%,
        var(--primary) 50%,
        color-mix(in srgb, var(--primary) 82%, black) 100%);
      border-color: color-mix(in srgb, var(--primary) 70%, black);
      color: #fff;
      box-shadow:
        inset 0 2px 5px rgba(255, 255, 255, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.18),
        0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .coin.has-image.club-coin.is-home-inverted .brand-g {
      color: #fff;
    }
    /* Optische Korrektur: weiße Form auf grünem Grund wirkt visuell
       schmaler als grüne Form auf weißem Grund (klassische Typografie-
       Optik). Wir skalieren das G geometrisch etwas größer (statt
       Stroke-Trick — der hatte den Pfad an der inneren Kontur
       mitvergrößert und das G dadurch DÜNNER wirken lassen).
       Standard-G-Größe ist 78 % (siehe .coin.club-coin .brand-g),
       hier 84 % — sichtbar, aber subtil. */
    .coin.has-image.club-coin.is-home-inverted .brand-g {
      width: 84%;
      height: 84%;
    }

    /* ==========================================
       BUTTONS
       ========================================== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 56px;
      padding: 14px 24px;
      border-radius: var(--radius-md);
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.01em;
      transition: transform 0.1s, background 0.15s;
      text-align: center;
    }
    .btn:active { transform: scale(0.98); }
    .btn-primary {
      background: var(--primary);
      color: #fff;
    }
    .btn-primary:active { background: #164024; }
    .btn-secondary {
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--border-strong);
    }
    .btn-ghost {
      background: transparent;
      color: var(--primary);
    }
    .btn-block { width: 100%; }
    .btn-danger { color: var(--danger); }

    /* ==========================================
       CARD
       ========================================== */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 20px;
      box-shadow: var(--shadow-1);
    }

    /* ==========================================
       TAB BAR
       ========================================== */
    .tab-bar {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      /* Tab-Bar trägt jetzt den cremigen Body-Ton (--bg, #F7F3EA) statt
         dem helleren --surface-Tint — passt zur Notebook-Einband-Logik:
         App-Hülle ringsherum bleibt cream, nur das Coin-Regal in der
         Sammlung ist hell als „Notebook-Seite". Auf den anderen Screens
         (Runden, Profil etc.) sitzt die Tab-Bar auf cream — kein Sprung. */
      background: rgba(247, 243, 234, 0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-top: 1px solid var(--border);
      /* b138: 3-Spalten-Grid für Coins-Pill / Plus-FAB / Runden-Pill.
         Plus-FAB ist 52px breit (siehe .fab), wird als feste Mittelspalte
         gesetzt. Coins + Runden teilen sich symmetrisch die zwei 1fr-Spalten.
         b139b: Runden-Screen-Tab-Bar (.tab-bar-no-fab) bekommt 2-Spalten-
         Grid, weil dort kein FAB sitzt — Plus ist kontextuell eine Sammlung-
         Aktion, keine Runden-Aktion. */
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 10px;
      padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
      z-index: 50;
    }
    .tab-bar.tab-bar-no-fab {
      grid-template-columns: 1fr 1fr;
    }
    /* Tab-Item: Pill-Buttons im exakt gleichen Stil wie die Filter-
       Pills (Alle/Dieses Jahr/Dieser Monat) in der Runden-Liste.
       Visuelle Konsistenz quer durch die App: Tab-Bar und Filter-
       Pills sind eine Familie, sowohl im aktiven als auch im
       inaktiven Zustand. */
    .tab-item {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 12px 14px;
      min-height: 48px;
      border-radius: 999px;
      background: var(--surface);
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 500;
      line-height: 1;
      border: 1px solid var(--border-strong);
      transition: background-color 220ms ease-out,
                  color 200ms ease-out,
                  border-color 220ms ease-out;
    }
    .tab-item svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; }
    .tab-count {
      font-size: 14px;
      font-weight: 700;
      color: inherit;
    }
    .tab-label {
      font-size: 13px;
      font-weight: 500;
      color: inherit;
      white-space: nowrap;
    }
    /* Aktiver Pill: Soft-Mint-Pattern wie die Filter-Pills bei Runden
       (Alle/Dieses Jahr/Dieser Monat) — Hintergrund in --primary-soft,
       Text + Border in --primary. Konsistente Sprache fuer alle Tab-/
       Filter-Patterns in der App. Vollton-Markengruen bleibt fuer
       Aktions-Elemente reserviert (Plus-Button, primaere CTAs);
       Soft-Mint signalisiert hier nur Aktiv-Status, keine Aktion. */
    .tab-item.active {
      background: var(--primary-soft);
      color: var(--primary);
      border-color: var(--primary);
      font-weight: 600;
    }
    .tab-item.active .tab-count,
    .tab-item.active .tab-label { color: var(--primary); }
    .tab-item:active { transform: scale(0.97); }

    /* b138: Plus-FAB als separater Action-Button mittig zwischen Coins-
       und Runden-Pill (Material-Design-FAB-Pattern). Vorher (b121-b137)
       war der Plus IN der Coins-Pill integriert — wieder rausgenommen,
       weil „Plus-in-Pill" kein etabliertes Pattern ist und einen späteren
       Native-App-Port unnötig erschweren würde.
       margin-top: -30px lässt den FAB visuell aus der Tab-Bar nach oben
       herausragen — der Klassiker. */
    .fab {
      width: 52px; height: 52px;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      /* 3D-Optik: dunkler Ring rundherum + zwei Schatten-Schichten (weiter
         + harter) — gibt dem Button visuelle Tiefe, wie auf dem Mockup. */
      border: 2px solid rgba(0, 0, 0, 0.15);
      box-shadow: 0 6px 14px rgba(30, 86, 49, 0.35), 0 2px 4px rgba(0,0,0,0.12);
      transition: transform 0.1s;
      padding: 0;
    }
    .fab:active { transform: scale(0.94); }
    .fab svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }

    /* ==========================================
       PHOTO LIGHTBOX
       Vollbild-Overlay für ein einzelnes Foto.
       Tap auf Hintergrund schließt; X-Button und
       Share-Button oben rechts.
       ========================================== */
    .photo-lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.92);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
      animation: lightbox-fade 0.18s ease-out;
    }
    .photo-lightbox[hidden] { display: none; }
    @keyframes lightbox-fade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .photo-lightbox-img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      display: block;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      /* b115: eigene Touch-Logik für Pinch-Zoom + Pan + Swipe. iOS-
         Native-Pinch wird unterdrückt, damit unser Pinch-Handler die
         Skalierung steuert. transform-origin: center, damit Pinch
         visuell um die Bild-Mitte zoomt (Apple Photos-Verhalten). */
      touch-action: none;
      transform-origin: center center;
      will-change: transform;
    }
    .photo-lightbox-actions {
      position: absolute;
      top: calc(env(safe-area-inset-top, 0px) + 12px);
      right: 12px;
      display: flex;
      gap: 8px;
      z-index: 2;
    }
    .photo-lightbox-btn {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, transform 0.1s;
    }
    .photo-lightbox-btn:active { transform: scale(0.94); }
    .photo-lightbox-btn:hover { background: rgba(0, 0, 0, 0.75); }
    .photo-lightbox-btn svg {
      width: 22px;
      height: 22px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }
    .photo-lightbox-close { font-size: 28px; line-height: 1; font-weight: 300; }

    /* ==========================================
       QR-SCANNER OVERLAY (Demo)
       Vollbild-Schwarz mit Live-Kamera-Video als Hintergrund,
       Scan-Rahmen mit Eckmarken in Brand-Grün, kurzer Hint und
       großem Schließen-Button oben rechts.
       ========================================== */
    .qr-scanner {
      position: fixed; inset: 0;
      background: #000;
      z-index: 1100;
      display: flex; align-items: center; justify-content: center;
    }
    .qr-scanner[hidden] { display: none; }
    #qr-scanner-video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .qr-scanner-frame {
      position: relative;
      width: min(72vw, 280px);
      aspect-ratio: 1;
      border-radius: 18px;
      box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
    }
    .qr-scanner-corner {
      position: absolute;
      width: 28px; height: 28px;
      border: 3px solid #4ADE80;
    }
    .qr-scanner-corner.tl { top: -3px; left: -3px;
      border-right: none; border-bottom: none;
      border-top-left-radius: 16px; }
    .qr-scanner-corner.tr { top: -3px; right: -3px;
      border-left: none; border-bottom: none;
      border-top-right-radius: 16px; }
    .qr-scanner-corner.bl { bottom: -3px; left: -3px;
      border-right: none; border-top: none;
      border-bottom-left-radius: 16px; }
    .qr-scanner-corner.br { bottom: -3px; right: -3px;
      border-left: none; border-top: none;
      border-bottom-right-radius: 16px; }
    .qr-scanner-hint {
      position: absolute;
      bottom: calc(60px + env(safe-area-inset-bottom, 0px));
      left: 50%; transform: translateX(-50%);
      color: #fff;
      font-size: 15px;
      font-weight: 500;
      padding: 10px 18px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 999px;
      letter-spacing: 0.01em;
      max-width: 86vw;
      text-align: center;
    }
    .qr-scanner-close {
      position: absolute;
      top: calc(16px + env(safe-area-inset-top, 0px));
      right: 16px;
      width: 44px; height: 44px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      font-size: 28px; line-height: 1; font-weight: 300;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
    }

    /* ==========================================
       SCORECARD-SCAN — LOADING-OVERLAY
       Während die OCR läuft, blendet sich ein Vollbild-Overlay ein.
       In der Mitte das gerade aufgenommene Foto mit einem hellgrünen
       Scan-Strahl, der wiederholt von oben nach unten darüber wandert
       — klassische "die KI scannt das gerade"-Optik. Drunter
       wechseln Phasentexte. Visuell konsistent zum Reveal-Backdrop
       (gleiches Grün-Anthrazit + Blur), damit alle App-Overlays
       eine Familie bilden.
       ========================================== */
    .ocr-loading {
      position: fixed; inset: 0;
      z-index: 1300;
      background: radial-gradient(ellipse at center, rgba(50, 70, 58, 0.78) 0%, rgba(28, 42, 34, 0.88) 100%);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 22px;
      padding: 24px;
      animation: reveal-backdrop-in 280ms ease-out 1;
    }
    .ocr-loading[hidden] { display: none; }
    /* Foto-Rahmen: zeigt das Bild in passendem Hochformat. max-height
       sorgt dafür, dass der Rahmen auch auf kleinen Geräten in den
       sichtbaren Bereich passt — das Foto wird mit object-fit: contain
       eingepasst (kein Zuschnitt, immer das ganze Bild zu sehen). */
    .ocr-photo-frame {
      position: relative;
      width: min(72vw, 280px);
      max-height: 50vh;
      aspect-ratio: 3 / 4;
      border-radius: 14px;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.35);
      box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    }
    .ocr-photo-frame img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
    /* Scan-Strahl: heller grünlich-weißer Streifen, der von oben nach
       unten über das Foto wandert. Endlos-Loop bis das Overlay
       geschlossen wird. */
    .ocr-scan-beam {
      position: absolute;
      left: 0; right: 0;
      top: -12%;
      height: 22%;
      pointer-events: none;
      background: linear-gradient(180deg,
        rgba(120, 220, 160, 0) 0%,
        rgba(140, 240, 180, 0.45) 45%,
        rgba(190, 255, 210, 0.85) 50%,
        rgba(140, 240, 180, 0.45) 55%,
        rgba(120, 220, 160, 0) 100%);
      box-shadow: 0 0 24px rgba(140, 240, 180, 0.55);
      animation: ocr-scan-sweep 1800ms cubic-bezier(0.65, 0, 0.35, 1) infinite;
    }
    @keyframes ocr-scan-sweep {
      0%   { top: -12%; opacity: 0; }
      8%   { opacity: 1; }
      92%  { opacity: 1; }
      100% { top: 100%; opacity: 0; }
    }
    .ocr-loading-text {
      color: #fff;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.01em;
      transition: opacity 200ms ease;
    }
    .ocr-loading-hint {
      color: rgba(255, 255, 255, 0.7);
      font-size: 14px;
      font-weight: 400;
      max-width: 280px;
      text-align: center;
    }

    /* ==========================================
       MAGIC REVEAL OVERLAY
       Vollbild-Overlay nach erfolgreichem QR-Scan. Logo skaliert aus
       Zentrum auf, ein dezenter Light-Sweep zieht über das Logo, ein
       weicher Schatten setzt es vom dunklen Backdrop ab. Platzname
       groß darunter, primärer „Coin hinzufügen" / „Coin-Logo
       freischalten" als Gummi-Button, kleiner „Verwerfen"-Link.
       ========================================== */
    .reveal-overlay {
      position: fixed; inset: 0;
      z-index: 1200;
      background: radial-gradient(ellipse at center, rgba(50, 70, 58, 0.78) 0%, rgba(28, 42, 34, 0.88) 100%);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      animation: reveal-backdrop-in 280ms ease-out 1;
    }
    .reveal-overlay[hidden] { display: none; }
    @keyframes reveal-backdrop-in {
      0%   { opacity: 0; }
      100% { opacity: 1; }
    }
    .reveal-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      max-width: 360px;
      width: 100%;
      text-align: center;
    }
    .reveal-logo-wrap {
      position: relative;
      width: 220px;
      height: 220px;
      display: flex; align-items: center; justify-content: center;
      animation: reveal-logo-in 1200ms cubic-bezier(0.34, 1.56, 0.64, 1) 1;
    }
    @keyframes reveal-logo-in {
      0%   { transform: scale(0.2); opacity: 0; }
      60%  { transform: scale(1.08); opacity: 1; }
      100% { transform: scale(1);    opacity: 1; }
    }
    .reveal-logo {
      position: relative;
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      border-radius: 50%;
      background: #fff;
      /* box-shadow folgt dem border-radius: 50% sauber rund ab —
         im Gegensatz zu filter: drop-shadow am Wrapper, der die
         Pixel-Maske von Logo-PNGs mit weißem Hintergrund nimmt
         und damit ein quadratisches Schattenartefakt erzeugen würde. */
      box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.06),
        0 18px 36px rgba(0, 0, 0, 0.35),
        0 6px 16px rgba(30, 86, 49, 0.30);
    }
    /* Heimat-Variante des Reveal-Coins: 2-px-Markengrün-Ring innen
       — konsistent mit dem Heimat-Look in der Sammlung. inset-shadow
       statt border, damit das innere Logo nicht durch Layout-Shift
       verschoben wird. */
    .reveal-logo.is-home {
      box-shadow:
        inset 0 0 0 2px var(--primary),
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.06),
        0 18px 36px rgba(0, 0, 0, 0.35),
        0 6px 16px rgba(30, 86, 49, 0.30);
    }
    .reveal-logo .coin {
      width: 100%; height: 100%;
    }
    /* Logo-Bild: identisches Padding wie .coin.has-image .coin-img
       (6%), damit der Reveal-Coin exakt so aussieht wie nachher in
       der Sammlung — gleiches Mental Model. */
    .reveal-logo .coin-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 6%;
      box-sizing: border-box;
      display: block;
      border-radius: 50%;
    }
    /* Light-Sweep: schräger weißer Streifen, der einmal über das Logo
       zieht. Aufs runde .reveal-logo gesetzt (overflow: hidden +
       border-radius: 50%) — der Sweep wird sauber am Kreisrand
       abgeschnitten und läuft nur über die Coin-Fläche. */
    .reveal-logo::after {
      content: '';
      position: absolute;
      top: -10%;
      left: -60%;
      width: 50%;
      height: 120%;
      background: linear-gradient(115deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%);
      transform: skewX(-18deg);
      pointer-events: none;
      animation: reveal-sweep 1500ms ease-out 600ms 1;
      opacity: 0;
    }
    @keyframes reveal-sweep {
      0%   { left: -60%; opacity: 0; }
      15%  { opacity: 1; }
      85%  { opacity: 1; }
      100% { left: 130%; opacity: 0; }
    }
    /* Pulse-Ring: ersetzt die fehlende Vibrate-API auf iOS. Ein weißer
       Ring pulst einmal vom Logo nach außen, gleichzeitig mit dem
       Reveal-Öffnen — ein eigener kleiner „Tap"-Moment. */
    .reveal-logo-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 3px solid rgba(255, 255, 255, 0.85);
      pointer-events: none;
      animation: reveal-pulse 1100ms ease-out 1;
      opacity: 0;
    }
    @keyframes reveal-pulse {
      0%   { transform: scale(0.92); opacity: 0; }
      30%  { opacity: 0.9; }
      100% { transform: scale(1.35); opacity: 0; }
    }
    .reveal-name {
      color: #fff;
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.2;
      margin-top: 4px;
      animation: reveal-text-in 520ms ease-out 220ms both;
    }
    @keyframes reveal-text-in {
      0%   { opacity: 0; transform: translateY(8px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .reveal-button {
      margin-top: 12px;
      width: 100%;
      max-width: 320px;
      padding: 16px 20px;
      border-radius: 999px;
      border: none;
      background: var(--primary);
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.01em;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(30, 86, 49, 0.45);
      animation: reveal-text-in 520ms ease-out 360ms both;
      transition: transform 120ms ease, box-shadow 120ms ease;
    }
    .reveal-button:active {
      transform: scale(0.97);
      box-shadow: 0 4px 12px rgba(30, 86, 49, 0.35);
    }
    .reveal-cancel {
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.6);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      padding: 8px 16px;
      text-decoration: underline;
      animation: reveal-text-in 520ms ease-out 480ms both;
    }
    .reveal-cancel:active { color: rgba(255, 255, 255, 0.9); }

    /* ==========================================
       BADGE-CELEBRATION OVERLAY
       Vollbild-Magic-Moment beim Tier-Up. Visuelle Familie zum
       Reveal-Overlay (gleicher Backdrop, ähnliche Animations-Choreografie),
       aber inhaltlich anderes: kein Coin, sondern Badge.
       ========================================== */
    .celebration-overlay {
      position: fixed; inset: 0;
      z-index: 1250;
      background: radial-gradient(ellipse at center, rgba(50, 70, 58, 0.78) 0%, rgba(28, 42, 34, 0.88) 100%);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      animation: reveal-backdrop-in 280ms ease-out 1;
    }
    .celebration-overlay[hidden] { display: none; }
    .celebration-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      max-width: 360px;
      width: 100%;
      text-align: center;
    }
    /* Persönliche Anrede über dem Coin: groß, in Marken-Schrift Fraunces
       (wie das App-Lockup), weiß auf dem dunklen Overlay. Erscheint
       sanft kurz vor dem Coin-Pop, damit der Blick zuerst auf die
       Begrüßung fällt und dann auf den Achievement-Coin. */
    .celebration-greeting {
      color: #fff;
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.15;
      font-family: 'Fraunces', Georgia, "Times New Roman", serif;
      padding: 0 16px;
      animation: reveal-text-in 520ms ease-out 80ms both;
    }
    .celebration-badge-wrap {
      position: relative;
      width: 200px;
      height: 200px;
      display: flex; align-items: center; justify-content: center;
      animation: celebration-badge-in 720ms cubic-bezier(0.34, 1.56, 0.64, 1) 1;
    }
    @keyframes celebration-badge-in {
      0%   { transform: scale(0.2); opacity: 0; }
      60%  { transform: scale(1.08); opacity: 1; }
      100% { transform: scale(1);    opacity: 1; }
    }
    /* Das eigentliche Badge — bekommt eine Tier-Klasse (tier-bronze etc.)
       und nutzt die schon existierenden Tier-Farben aus der Badge-Sektion.
       Größer als ein Shelf-Badge, mit stärkerem Outer-Glow. */
    /* Celebration-Badge: gleicher "Plaketten"-Look wie der kleine
       cb-marker-coin im Sammlung-Tab — radial-gradient pro Tier,
       Border in dunklerer Tier-Variante, Inset-Highlights für Tiefe.
       Nur deutlich größer (160 statt 40 px). Diamant behält zusätzlich
       den pulsierenden Außen-Glow + Schimmer für den Magic-Moment. */
    .celebration-badge {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      position: relative;
      overflow: hidden;
      background: var(--surface-2);
      border: 4px solid var(--border);
      color: var(--text-subtle);
      box-shadow:
        inset 0 4px 6px rgba(255, 255, 255, 0.55),
        inset 0 -4px 6px rgba(0, 0, 0, 0.18),
        0 12px 28px rgba(0, 0, 0, 0.35);
    }
    .celebration-badge.tier-bronze {
      background: radial-gradient(circle at 30% 30%, #E8B488 0%, #C48452 55%, #8E5527 100%);
      border-color: #6E3F18;
    }
    .celebration-badge.tier-silber {
      background: radial-gradient(circle at 30% 30%, #E8E8EC 0%, #B8B8C0 55%, #8A8A92 100%);
      border-color: #6A6A72;
    }
    .celebration-badge.tier-gold {
      background: radial-gradient(circle at 30% 30%, #FFE49C 0%, #E9C158 50%, #B58F2C 100%);
      border-color: #8C6A1E;
    }
    .celebration-badge.tier-platin {
      background: radial-gradient(circle at 30% 30%, #F4FBFA 0%, #D6E4E2 45%, #A8B6B5 100%);
      border-color: #6E8482;
    }
    .celebration-badge.tier-diamant {
      background: radial-gradient(circle at 30% 30%, #C4E8FA 0%, #6FB8E0 55%, #2E78B0 100%);
      border-color: #1F5680;
      animation: celebration-badge-in 720ms cubic-bezier(0.34, 1.56, 0.64, 1) 1, diamant-glow-pulse 2.6s ease-in-out 720ms infinite;
    }
    .celebration-badge.tier-diamant::before {
      content: '';
      position: absolute;
      inset: -20%;
      background: linear-gradient(125deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.78) 50%, transparent 62%, transparent 100%);
      pointer-events: none;
      animation: diamant-shimmer 3.5s linear infinite;
      mix-blend-mode: screen;
      z-index: 1;
    }
    /* Symbol im Celebration-Badge größer als im Shelf, damit die
       Wertigkeit beim Magic-Moment ikonisch wirkt. */
    .celebration-badge svg {
      width: 64px;
      height: 64px;
      position: relative;
      z-index: 1;
    }
    /* Schwellen-Zahl im Celebration-Badge — gleiche Typo-Eigenschaften
       wie der kleine cb-marker-coin: Inter, bold, leicht negative
       letter-spacing für kompakte Ziffern. Farbe wird pro Tier in der
       dunkleren Tier-Variante gesetzt (lesbar auf dem Gradient). */
    .celebration-badge-num {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 72px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.03em;
      position: relative;
      z-index: 1;
    }
    /* Bei dreistelligen Zahlen (100) etwas kleiner, damit es ins Badge passt. */
    .celebration-badge-num.three-digits { font-size: 58px; }
    /* Tier-spezifische Schrift-Farbe — gleiche Töne wie im cb-marker-coin
       (dunkle Variante für Lesbarkeit auf dem Tier-Gradient). */
    .celebration-badge.tier-bronze  .celebration-badge-num { color: #4A2A0E; }
    .celebration-badge.tier-silber  .celebration-badge-num { color: #2A2A30; }
    .celebration-badge.tier-gold    .celebration-badge-num { color: #5A3F0A; }
    .celebration-badge.tier-platin  .celebration-badge-num { color: #2C3E3D; }
    .celebration-badge.tier-diamant .celebration-badge-num { color: #0F3858; }
    /* Sparkle-Sterne um das Badge herum, einzeln versetzt aufblitzend.
       Weiß, sehr leicht — geben dem Tier-Up-Moment Funkel ohne den
       Badge zu überlagern. */
    .celebration-spark {
      position: absolute;
      color: rgba(255, 255, 255, 0.85);
      font-size: 24px;
      pointer-events: none;
      opacity: 0;
      animation: celebration-spark-pulse 1800ms ease-in-out infinite;
      text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    }
    .celebration-spark-1 { top:  -8%; left:  20%; animation-delay: 200ms; }
    .celebration-spark-2 { top:  10%; right: -8%; animation-delay: 700ms; }
    .celebration-spark-3 { bottom: -4%; left:  60%; animation-delay: 1200ms; }
    .celebration-spark-4 { bottom: 18%; left: -6%; animation-delay: 1500ms; }
    @keyframes celebration-spark-pulse {
      0%, 100% { opacity: 0; transform: scale(0.6); }
      40%      { opacity: 1; transform: scale(1.2); }
      70%      { opacity: 0.5; transform: scale(0.9); }
    }
    .celebration-tier {
      color: #fff;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.01em;
      animation: reveal-text-in 520ms ease-out 220ms both;
      margin-top: 4px;
    }
    .celebration-label {
      color: rgba(255, 255, 255, 0.85);
      font-size: 16px;
      font-weight: 500;
      animation: reveal-text-in 520ms ease-out 360ms both;
    }
    .celebration-button {
      margin-top: 12px;
      width: 100%;
      max-width: 280px;
      padding: 16px 20px;
      border-radius: 999px;
      border: none;
      background: var(--primary);
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.01em;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(30, 86, 49, 0.45);
      animation: reveal-text-in 520ms ease-out 480ms both;
      transition: transform 120ms ease, box-shadow 120ms ease;
    }
    .celebration-button:active {
      transform: scale(0.97);
      box-shadow: 0 4px 12px rgba(30, 86, 49, 0.35);
    }

    /* ==========================================
       SCREEN 1 — LANDING (überarbeitet 2026-04)
       --------------------------------------------------------
       Mobile-first, Desktop-zentrierte-Spalte (max 640px).
       7 Sektionen: Hero, Abgrenzung, Was wir sind, Eintragen flexibel,
       Coins/Bewertungen/Badges, Stimmen, Final-CTA. Plus Footer mit
       drei Modal-Stubs (Kontakt, Datenschutz, Impressum).
       ========================================== */
    .lp-screen {
      max-width: 640px;
      margin: 0 auto;
    }
    /* Page-Header — sticky, immer am oberen Rand der Landingpage.
       Solange das Hero-CTA „Loslegen" im Viewport ist, zeigt der Header
       nur die Wortmarke. Sobald man am Hero-CTA vorbeigescrollt ist,
       fadet rechts ein kleiner Pill-Button „Loslegen" ein — so kann
       man jederzeit ohne Scrollen einsteigen. Toggle via Body-/Header-
       Klasse `show-cta` aus IntersectionObserver in setupLandingStickyCta(). */
    .lp-header {
      position: sticky;
      top: 0;
      z-index: 50;
      padding: 14px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(247, 243, 234, 0.86);
      -webkit-backdrop-filter: saturate(140%) blur(14px);
      backdrop-filter: saturate(140%) blur(14px);
      border-bottom: 1px solid transparent;
      transition: border-color 220ms ease;
    }
    /* Sobald gescrollt, dezente Trennlinie unter dem Header. */
    .lp-header.scrolled { border-bottom-color: var(--border); }
    .lp-header-lockup {
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--text);
      line-height: 1;
    }
    .lp-header-lockup .accent { color: var(--primary); }
    /* Pill-CTA rechts im sticky Header. Initial unsichtbar — wird via
       `.lp-header.show-cta` Klasse eingefadet, sobald der Hero-CTA aus
       dem Viewport scrollt. */
    .lp-header-cta {
      opacity: 0;
      transform: translateX(6px);
      pointer-events: none;
      padding: 8px 16px;
      border-radius: 999px;
      background: var(--primary);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      font-family: 'Inter', sans-serif;
      letter-spacing: 0;
      transition: opacity 240ms ease, transform 240ms ease;
      cursor: pointer;
    }
    .lp-header.show-cta .lp-header-cta {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }
    .lp-section {
      padding: 56px 24px;
    }
    .lp-section + .lp-section {
      border-top: 1px solid var(--border);
    }
    .lp-eyebrow {
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-muted);
      font-weight: 600;
      margin-bottom: 12px;
    }
    .lp-headline {
      font-size: 36px;
      font-weight: 700;
      letter-spacing: -0.015em;
      line-height: 1.12;
      margin-bottom: 22px;
      color: var(--text);
    }
    /* Grüner Akzent auf je einem Wort pro Sektion-Headline:
       - „Eintragen" (Sektion 2)
       - „Bewerten"  (Sektion 3)
       - „Stimmen"   (Sektion 4)
       Gleiche Logik wie Hero (.accent grün) und Final-CTA. */
    .lp-headline .accent { color: var(--primary); }
    .lp-final h2 .accent { color: var(--primary); }
    .lp-text {
      font-size: 17px;
      color: var(--text-muted);
      line-height: 1.55;
      margin-bottom: 16px;
    }
    .lp-text:last-child { margin-bottom: 0; }
    .lp-text strong { color: var(--text); font-weight: 600; }

    /* ----- Hero (Sektion 1) -----
       Hero füllt den restlichen Viewport unter dem sticky Header.
       --lp-header-h ist die Höhe des sticky Headers (~62px). */
    .lp-hero {
      min-height: calc(100dvh - 62px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px 24px 48px;
      text-align: center;
    }
    @media (min-width: 640px) { .lp-hero { min-height: 640px; } }
    /* Coin-Stapel — Silber-Coin als zentrale Figur (Hauptmotiv:
       das, was der User später auch im Regal hat), Gold-Coin
       leicht hinten rechts versetzt als „Wow-Begleiter". Brand-
       Coin bewusst nicht hier — die Wortmarke oben im Sticky-Header
       trägt die Marken-Kommunikation, der Hero zeigt das Sammel-
       Objekt. */
    .lp-hero-stack {
      position: relative;
      width: 320px;
      height: 240px;
      margin-bottom: 32px;
    }
    /* KEIN separater Ground-Shadow als ::before — der erzeugt egal
       wie tariert eine sichtbare Box-Kante in der Render-Engine.
       Stattdessen kommt die Tiefe aus mehrlagigen drop-shadows
       direkt auf den Coins (besonders auf dem Silber-Front, der
       unten eine zusätzliche, weite Schatten-Lage trägt). */
    .lp-hero-coin {
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      /* Bewusst KEIN overflow: hidden hier. Der Light-Sweep (::after)
         hat selbst border-radius:50% plus einen linear-gradient als
         Background — Backgrounds werden automatisch von border-
         radius geclippt, also keine zusätzliche Maskierung nötig.
         overflow:hidden würde einen Offscreen-Buffer erzwingen,
         dessen Bounding-Box als helleres Rechteck sichtbar wird. */
    }
    .lp-hero-coin img { width: 100%; height: 100%; object-fit: contain; }
    /* Silber-back — kleiner, hinten links versetzt, leicht verdreht.
       Spiegelt im Hero, dass das Sammelbuch viele Silber-Coins
       enthalten wird. */
    .lp-hero-coin.silver-back {
      top: 8px;
      left: -8px;
      transform: scale(0.72) rotate(-10deg);
      opacity: 0.85;
      z-index: 1;
      filter:
        drop-shadow(0 3px 4px rgba(60, 50, 30, 0.22))
        drop-shadow(0 10px 18px rgba(60, 50, 30, 0.12));
    }
    /* Silber-front — Hauptfigur, zentral, voll skaliert. Zwei
       drop-shadow-Lagen wie bei der ursprünglich gut wirkenden
       Brand-Coin-Variante: ein scharfer Kontaktschatten direkt
       unter dem Coin plus eine weichere, weitere Tiefenlage.
       Drei Lagen sind hier zu viel — drop-shadow-Filter stapeln
       sich rekursiv und erzeugen einen dunklen Smudge-Fleck. */
    .lp-hero-coin.silver {
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      filter:
        drop-shadow(0 4px 5px rgba(60, 50, 30, 0.30))
        drop-shadow(0 14px 26px rgba(60, 50, 30, 0.18));
    }
    /* Gold — Begleiter, kleiner, hinten rechts versetzt. Wirkt wie
       ein versprochener Bonus-Coin hinter der zentralen Figur. */
    .lp-hero-coin.gold {
      top: -8px;
      right: -4px;
      transform: scale(0.74) rotate(12deg);
      z-index: 1;
      filter:
        drop-shadow(0 3px 5px rgba(140, 100, 20, 0.32))
        drop-shadow(0 12px 22px rgba(140, 100, 20, 0.18));
    }
    /* Light-Sweep auf dem Silber-Coin (zentrale Figur) — alle 5s
       ein dezenter Glanz diagonal über die Münze. Winkel 70°:
       Streifen lehnen `/`, Bewegung von links nach rechts wirkt
       dadurch wie „aufwärts" (von unten-links nach oben-rechts).
       Schmal (40 % der Coin-Breite) und durch overflow:hidden auf
       die Kreisform geklemmt, damit nichts über den Rand läuft. */
    .lp-hero-coin.silver::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: linear-gradient(
        70deg,
        transparent 40%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 60%
      );
      opacity: 0;
      pointer-events: none;
      animation: lp-coin-sweep 5s ease-in-out infinite;
    }
    @keyframes lp-coin-sweep {
      0%, 60% { opacity: 0; transform: translateX(-30%); }
      70% { opacity: 1; }
      100% { opacity: 0; transform: translateX(30%); }
    }
    .lp-hero h1 {
      font-size: 44px;
      font-weight: 700;
      letter-spacing: -0.018em;
      line-height: 1.08;
      margin: 0 0 16px;
      color: var(--text);
    }
    .lp-hero h1 .accent { color: var(--primary); }
    .lp-hero-sub {
      font-size: 17px;
      color: var(--text-muted);
      max-width: 380px;
      line-height: 1.5;
      margin-bottom: 36px;
    }
    .lp-hero-cta {
      width: 100%;
      max-width: 320px;
    }
    .lp-hero-scroll {
      margin-top: 28px;
      color: var(--text-subtle);
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    /* ----- Eintragen-flexibel-Liste (Sektion 3) ----- */
    .lp-flex-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 24px;
    }
    .lp-flex-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 18px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
    }
    .lp-flex-item-icon {
      flex: 0 0 44px;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      background: var(--primary-soft);
      border-radius: 50%;
    }
    .lp-flex-item-icon svg {
      width: 22px;
      height: 22px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .lp-flex-item-text {
      flex: 1;
    }
    .lp-flex-item-text strong {
      display: block;
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 2px;
    }
    .lp-flex-item-text span {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.4;
    }

    /* ----- Listen (Sektion 2 ✗-Liste, Sektion 4 →-Liste) ----- */
    .lp-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .lp-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 10px 0;
      font-size: 16px;
      line-height: 1.45;
      color: var(--text);
    }
    .lp-list li + li { border-top: 1px solid var(--border); }
    .lp-list .lp-list-marker {
      flex: 0 0 22px;
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
      color: var(--text-subtle);
      font-size: 14px;
    }
    .lp-list.is-negative .lp-list-marker { color: #c23b3b; opacity: 0.7; }
    .lp-list.is-flexible .lp-list-marker { color: var(--primary); }
    .lp-list-feature {
      flex: 1;
    }
    .lp-list-feature strong {
      display: block;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 2px;
    }
    .lp-list-feature span {
      font-size: 14px;
      color: var(--text-muted);
    }

    /* Patrick-Hand-Akzent (Übergangs-Satz nach Abgrenzung) */
    .lp-handwritten {
      font-family: 'Patrick Hand', cursive;
      font-size: 22px;
      color: var(--text);
      line-height: 1.4;
      margin-top: 28px;
      text-align: center;
    }

    /* ----- Coin-Regal-Andeutung (Sektion 3) ----- */
    .lp-shelf-preview {
      margin-top: 24px;
      display: flex;
      gap: 14px;
      justify-content: center;
      align-items: end;
      padding: 16px 12px 12px;
      border-bottom: 2px solid rgba(139, 111, 71, 0.15);
    }
    .lp-shelf-preview .lp-shelf-coin {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      flex: 0 0 auto;
    }
    .lp-shelf-preview .lp-shelf-coin img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    /* ----- Drei-Karten-Block (Sektion 5) ----- */
    .lp-cards {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 24px;
    }
    .lp-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 20px 18px;
    }
    .lp-card h3 {
      font-size: 17px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 8px;
    }
    .lp-card p {
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.5;
    }
    .lp-card-hint {
      display: block;
      font-size: 13px;
      color: var(--text-subtle);
      font-style: italic;
      margin-top: 16px;
      text-align: center;
    }
    /* Mini-Visuals als Anker pro Sammelbuch-Karte. Rechts oder unten in
       der Karte — visueller Beweis für die Behauptung („Sammeln" zeigt
       Coins, „Bewerten" zeigt Sterne, „Entdecken" zeigt Badges). */
    .lp-card-visual {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }
    /* Sammeln-Card: 5 Coins überlappend wie ein Stapel — linke Coins
       vorne, rechte dahinter. z-index per nth-child fallend
       (5,4,3,2,1) ergibt die natürliche Reihenfolge. */
    .lp-card-visual.coins {
      gap: 0;
    }
    .lp-card-visual.coins .lp-mini-coin {
      width: 38px;
      height: 38px;
      flex: 0 0 auto;
      position: relative;
    }
    .lp-card-visual.coins .lp-mini-coin + .lp-mini-coin {
      margin-left: -10px;
    }
    .lp-card-visual.coins .lp-mini-coin:nth-child(1) { z-index: 5; }
    .lp-card-visual.coins .lp-mini-coin:nth-child(2) { z-index: 4; }
    .lp-card-visual.coins .lp-mini-coin:nth-child(3) { z-index: 3; }
    .lp-card-visual.coins .lp-mini-coin:nth-child(4) { z-index: 2; }
    .lp-card-visual.coins .lp-mini-coin:nth-child(5) { z-index: 1; }
    .lp-card-visual.coins .lp-mini-coin img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    /* Ghost-Coin in der Sammeln-Karte — gleiche Größe wie die anderen,
       aber ausgegraut. Suggeriert: hier ist noch ein leerer Slot, den
       du füllen kannst. Konsistent zum Ghost-Pattern in der Sammlung. */
    .lp-card-visual.coins .lp-mini-coin.ghost img {
      filter: grayscale(1) brightness(1.1);
      opacity: 0.45;
    }
    .lp-card-visual.stars svg {
      width: 22px;
      height: 22px;
    }
    .lp-card-visual.stars .star-filled { fill: #E8B546; }
    .lp-card-visual.stars .star-empty  { fill: #D8CDB0; }
    /* Meilensteine-Card: 5 Tier-Coins überlappend, gleiche Stapel-Optik
       wie die Sammeln-Card. Linke Coins vorne, rechte dahinter. Statt
       G-Symbol/Award-Schleife: die Schwelle als Zahl im Tier-farbenen
       Kreis. Klare Trennung zu den G-Coins durch Inhalt (Zahl statt G). */
    .lp-card-visual.badges {
      gap: 0;
    }
    .lp-card-visual.badges .lp-mini-badge {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      position: relative;
      border: 1.5px solid var(--border);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1;
      box-shadow:
        inset 0 1.5px 2px rgba(255, 255, 255, 0.55),
        inset 0 -1.5px 2px rgba(0, 0, 0, 0.15);
    }
    .lp-card-visual.badges .lp-mini-badge + .lp-mini-badge {
      margin-left: -8px;
    }
    .lp-card-visual.badges .lp-mini-badge:nth-child(1) { z-index: 5; }
    .lp-card-visual.badges .lp-mini-badge:nth-child(2) { z-index: 4; }
    .lp-card-visual.badges .lp-mini-badge:nth-child(3) { z-index: 3; }
    .lp-card-visual.badges .lp-mini-badge:nth-child(4) { z-index: 2; }
    .lp-card-visual.badges .lp-mini-badge:nth-child(5) { z-index: 1; }
    .lp-card-visual.badges .lp-mini-badge.tier-bronze {
      background: radial-gradient(circle at 30% 30%, #E8B488 0%, #C48452 55%, #8E5527 100%);
      border-color: #6E3F18;
      color: #4A2A0E;
    }
    .lp-card-visual.badges .lp-mini-badge.tier-silber {
      background: radial-gradient(circle at 30% 30%, #E8E8EC 0%, #B8B8C0 55%, #8A8A92 100%);
      border-color: #6A6A72;
      color: #2A2A30;
    }
    .lp-card-visual.badges .lp-mini-badge.tier-gold {
      background: radial-gradient(circle at 30% 30%, #FFE49C 0%, #E9C158 50%, #B58F2C 100%);
      border-color: #8C6A1E;
      color: #5A3F0A;
    }
    .lp-card-visual.badges .lp-mini-badge.locked {
      background: radial-gradient(circle at 30% 30%, #FAFAFB 0%, #E0E0E5 60%, #C8C8CE 100%);
      border-color: var(--border);
      color: #9A9AA0;
      opacity: 0.6;
    }

    /* ----- Testimonials (Sektion 6) ----- */
    .lp-testimonials {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 24px;
    }
    .lp-testimonial {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 22px 20px;
    }
    .lp-testimonial-quote {
      font-size: 16px;
      line-height: 1.5;
      color: var(--text);
      font-style: italic;
      margin-bottom: 16px;
    }
    .lp-testimonial-who {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .lp-testimonial-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--primary-soft);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.02em;
      flex: 0 0 40px;
    }
    /* Drei verschiedene CI-Farben für die drei Testimonials —
       Markengrün, Akzent-warm, Bronze. Weißer Text auf allen.
       Wirkt persönlicher als der frühere uniforme Daumen-hoch-Look. */
    .lp-testimonial-avatar.var-1 { background: #1E5631; color: #FFF; }
    .lp-testimonial-avatar.var-2 { background: #B8956A; color: #FFF; }
    .lp-testimonial-avatar.var-3 { background: #B87333; color: #FFF; }
    .lp-testimonial-name {
      font-size: 14px;
      color: var(--text-muted);
      font-style: normal;
      line-height: 1.3;
    }
    .lp-testimonial-name strong {
      color: var(--text);
      font-weight: 600;
      display: block;
    }

    /* ----- Pricing (Sektion 7) — Free vs Premium. Zwei Karten
       nebeneinander auf Tablet/Desktop, gestapelt auf Mobile.
       Free hat klassische Surface-Karte, Premium leicht abgehoben
       mit Markengrün-Outline (kein aggressives Highlight, passt
       zur ruhigen Markentonalität). ----- */
    .lp-pricing {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 12px;
    }
    @media (max-width: 600px) {
      .lp-pricing { grid-template-columns: 1fr; }
    }
    .lp-pricing-card {
      background: var(--surface);
      border-radius: 16px;
      padding: 24px 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(20,20,20,0.06);
      display: flex;
      flex-direction: column;
    }
    /* Free ist die Hauptkarte mit Markengrün-Border und CTA — soll
       sofort als „hier startest Du, kostenlos" erkennbar sein.
       Premium bleibt visuell zurückhaltend, sachlich, nicht aufdringlich. */
    .lp-pricing-card.is-free {
      box-shadow: 0 2px 6px rgba(46, 122, 79, 0.08), 0 0 0 2px var(--primary);
    }
    .lp-pricing-cta {
      margin-top: 20px;
      width: 100%;
    }
    .lp-pricing-meta {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid rgba(20,20,20,0.06);
      font-size: 12px;
      color: var(--text-muted);
      text-align: center;
    }
    .lp-pricing-name {
      font-family: 'Fraunces', Georgia, "Times New Roman", serif;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--text);
      margin-bottom: 6px;
    }
    .lp-pricing-name .lp-pricing-star {
      color: #c89800;
      margin-right: 4px;
    }
    .lp-pricing-price {
      font-size: 18px;
      font-weight: 600;
      color: var(--primary);
      line-height: 1.2;
    }
    .lp-pricing-price-sub {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 2px;
      line-height: 1.3;
    }
    .lp-pricing-features {
      list-style: none;
      padding: 0;
      margin: 18px 0 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .lp-pricing-features li {
      font-size: 14px;
      line-height: 1.45;
      color: var(--text);
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .lp-pricing-features li::before {
      content: '✓';
      color: var(--primary);
      font-weight: 700;
      flex-shrink: 0;
      line-height: 1.45;
    }
    .lp-pricing-footer {
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid rgba(20,20,20,0.06);
      font-size: 12px;
      color: var(--text-muted);
      text-align: center;
    }

    /* ----- Final CTA (Sektion 8) ----- */
    /* Final-Outro nach dem Pricing-Block. Bewusst kompakt: oben
       weniger Abstand zum Pricing-Block (war 64px → jetzt 32px),
       weil sonst eine große leere Lücke entsteht. Tighte
       line-height auf der Headline, damit „Starte Deine Sammlung."
       beim Mobile-Umbruch eng bleibt und nicht in zwei
       weit-auseinander-Zeilen zerfällt. Sub und Beta-Hinweis dicht
       gestapelt, weil der CTA-Button jetzt fehlt. */
    .lp-final {
      padding: 32px 24px 40px;
      text-align: center;
    }
    .lp-final h2 {
      font-size: 32px;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.15;
      margin-bottom: 10px;
    }
    .lp-final-sub {
      font-size: 16px;
      color: var(--text-muted);
      margin-bottom: 8px;
      line-height: 1.4;
    }
    .lp-final-cta {
      max-width: 320px;
      margin: 0 auto;
    }
    .lp-final-beta {
      margin-top: 6px;
      font-size: 13px;
      color: var(--text-subtle);
      font-style: italic;
    }

    /* ----- Footer ----- */
    .lp-footer {
      padding: 32px 24px 48px;
      border-top: 1px solid var(--border);
      text-align: center;
    }
    .lp-footer-links {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px 24px;
      margin-bottom: 16px;
    }
    .lp-footer-link {
      font-size: 14px;
      color: var(--text-muted);
      cursor: pointer;
      padding: 4px 0;
      background: none;
      border: 0;
      font-family: inherit;
    }
    .lp-footer-link:hover { color: var(--primary); }
    .lp-footer-copy {
      font-size: 12px;
      color: var(--text-subtle);
      letter-spacing: 0.04em;
    }

    /* ----- Modal-Overlay (für Footer-Stubs) ----- */
    .lp-modal {
      position: fixed;
      inset: 0;
      background: rgba(20, 20, 18, 0.5);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      z-index: 100;
      animation: lp-modal-fade 0.18s ease-out;
    }
    @media (min-width: 640px) { .lp-modal { align-items: center; } }
    .lp-modal[hidden] { display: none; }
    @keyframes lp-modal-fade {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .lp-modal-card {
      background: var(--surface);
      width: 100%;
      max-width: 520px;
      max-height: 80vh;
      overflow-y: auto;
      border-radius: 20px 20px 0 0;
      padding: 28px 24px max(32px, calc(20px + env(safe-area-inset-bottom)));
      animation: lp-modal-slide 0.2s ease-out;
    }
    @media (min-width: 640px) { .lp-modal-card { border-radius: 16px; max-height: 70vh; } }
    @keyframes lp-modal-slide {
      from { transform: translateY(20px); opacity: 0.8; }
      to { transform: translateY(0); opacity: 1; }
    }
    .lp-modal-card h3 {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 14px;
      color: var(--text);
    }
    .lp-modal-card p {
      font-size: 15px;
      line-height: 1.55;
      color: var(--text);
      margin-bottom: 12px;
    }
    .lp-modal-close {
      margin-top: 20px;
      width: 100%;
      min-height: 48px;
      background: var(--primary);
      color: #fff;
      border: 0;
      border-radius: var(--radius-md);
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
    }

    /* ==========================================
       SCREEN 2 — AUTH
       ========================================== */
    .auth-screen {
      min-height: calc(100dvh - 0px);
      padding: 40px 24px 32px;
      display: flex;
      flex-direction: column;
    }
    @media (min-width: 640px) { .auth-screen { min-height: 900px; } }
    .auth-brand {
      margin-top: 32px;
      margin-bottom: 40px;
    }
    /* Auth-Hero verwendet die info-hero-Klassen (info-logo / info-title /
       info-claim) für identische Optik zur Info-Seite — bewusste Doppel-
       Nutzung, damit die Markendarstellung an beiden Stellen synchron
       bleibt. Eigene Auth-Overrides finden hier nicht statt; Änderungen
       an info-hero in Section 4 wirken automatisch mit. */
    /* Reassurance-Zeile: drei Häkchen-Garantien direkt unter dem Claim,
       damit der User nicht in den Anmelde-Trichter mit der Frage
       „kostet das jetzt was?" einsteigt. Dezent grün, nicht aufdringlich. */
    .auth-reassure {
      margin-top: 16px;
      padding: 10px 16px;
      background: rgba(46, 122, 79, 0.08);
      border-radius: 12px;
      font-size: 13px;
      line-height: 1.4;
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .auth-reassure-item {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }
    .auth-reassure-item svg {
      width: 14px;
      height: 14px;
      color: var(--primary);
      flex-shrink: 0;
    }
    .auth-providers { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
    /* Email-Form für Magic-Link, eingeblendet nach Tap auf 'Mit E-Mail
       anmelden'. Initial hidden — zeigt Eingabefeld + Submit + Status. */
    .auth-email-form { margin-top: 0; padding: 16px; background: var(--bg-card, #fff);
                       border: 1px solid var(--border); border-radius: 10px; }
    .auth-email-msg { margin-top: 12px; padding: 10px 12px; background: rgba(0,0,0,0.04);
                      border-radius: 6px; font-size: 13px; line-height: 1.5; }
    /* OTP-Wait-Screen-Blöcke:
       - .auth-otp-status: kompakte Zeile „Mail unterwegs an X" + Action
       - .auth-otp-quick: Hinweis-Card mit Magic-Link-Tipp (Schnellster Weg)
       - .auth-otp-divider: Trenner-Text vor der Code-Eingabe
       - .auth-otp-change: „E-Mail ändern"-Underline-Action (auch im
         Status-Block wiederverwendet) */
    /* Status-Zeile darf bei langen E-Mail-Adressen umbrechen — flex-wrap
       sorgt dafür, dass „E-Mail ändern" bei Bedarf in die zweite Zeile
       rutscht, statt die Adresse mitten im Wort zu brechen. */
    .auth-otp-status {
      display: flex;
      align-items: baseline;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 14px;
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.4;
    }
    .auth-otp-status-text {
      flex: 1 1 100%;
      min-width: 0;
    }
    .auth-otp-status-text strong {
      color: var(--text);
      font-weight: 600;
      /* Sanftes Wrappen nur wenn nötig — kein break-all, das zerbricht
         E-Mail-Adressen mitten im Wort. overflow-wrap bricht erst, wenn
         keine andere Möglichkeit besteht. */
      overflow-wrap: anywhere;
    }
    /* Magic-Link-Box mit zwei Ebenen: Hauptaktion oben (was der User
       tun soll), Status + Korrektur-Action unten (Empfänger + Ändern).
       Spart einen ganzen Status-Block oberhalb und macht die
       Zusammengehörigkeit visuell sichtbar. */
    .auth-otp-quick {
      padding: 14px 16px;
      background: var(--primary-soft);
      border-radius: 10px;
      color: var(--text);
      line-height: 1.5;
      margin-bottom: 18px;
    }
    .auth-otp-quick-main {
      font-size: 14px;
    }
    .auth-otp-quick-main strong {
      color: var(--primary);
      font-weight: 600;
    }
    .auth-otp-quick-meta {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid rgba(46, 122, 79, 0.15);
      font-size: 12px;
      color: var(--text-muted);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
    }
    .auth-otp-quick-meta strong {
      color: var(--text);
      font-weight: 600;
      overflow-wrap: anywhere;
    }
    .auth-otp-quick-sep {
      color: var(--text-subtle);
    }
    .auth-otp-divider {
      text-align: center;
      color: var(--text-muted);
      font-size: 12px;
      letter-spacing: 0.02em;
      margin-bottom: 12px;
    }
    .auth-otp-change {
      flex-shrink: 0;
      background: none;
      border: 0;
      padding: 0;
      color: var(--primary);
      font-size: 13px;
      font-weight: 600;
      text-decoration: underline;
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap;
      line-height: 1.4;
    }
    .auth-provider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 56px;
      border-radius: var(--radius-md);
      background: var(--surface);
      border: 1px solid var(--border-strong);
      font-size: 17px;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
    }
    .auth-provider.google { background: #fff; }
    .auth-provider.apple { background: #000; color: #fff; border-color: #000; }
    .auth-provider.mail { background: var(--surface); color: var(--text); }
    .auth-provider.mail svg { color: var(--text-muted); }
    /* Sekundärer Hint, kommt NACH dem Akzeptanz-Hinweis. Etwas mehr Luft
       zum NB+DSE-Hinweis darüber, damit die Hierarchie klar wird. */
    .auth-hint {
      margin-top: 14px;
      font-size: 13px;
      line-height: 1.5;
      color: var(--text-subtle);
      text-align: center;
      padding: 0 8px;
    }
    /* NB+DSE-Akzeptanz-Hinweis direkt unter dem Submit-Button. Inclusion-by-
       Reference: mit dem Klick auf „Anmelde-Mail senden" akzeptiert der User
       beide Dokumente. Kein Häkchen, kein Modal — Standard-Pattern für die
       meisten Web-Apps. Eng am Submit-Button (margin-top: 16px), damit
       juristisch „im unmittelbaren räumlichen Zusammenhang" erfüllt ist. */
    .auth-terms-notice {
      margin-top: 16px;
      font-size: 12px;
      line-height: 1.45;
      color: var(--text-subtle);
      text-align: center;
      padding: 0 8px;
    }
    .auth-terms-notice a {
      color: var(--text-muted);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .auth-terms-notice a:hover { color: var(--primary); }

    /* ==========================================
       SCREEN 3 — ONBOARDING
       ========================================== */
    .onboarding-screen {
      min-height: calc(100dvh - 0px);
      padding: 20px 24px 0;
      display: flex;
      flex-direction: column;
    }
    @media (min-width: 640px) { .onboarding-screen { min-height: 900px; } }
    /* Bottom-Padding mit höherer Spezifität, damit es die generische
       Regel `.screen.no-tabbar .screen-scroll { padding-bottom: 0 }`
       überschreibt. Berücksichtigt Safe-Area (Home-Indicator) und
       lässt zusätzlich Luft, sodass der Action-Button nicht am
       iOS-Safari-Browser-Chrome klebt. */
    #screen-onboarding .screen-scroll.onboarding-screen {
      padding-bottom: max(56px, calc(32px + env(safe-area-inset-bottom)));
    }
    .onboarding-skip { align-self: flex-end; color: var(--text-muted); font-size: 15px; padding: 12px; }
    .onboarding-main { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 32px 0; }
    .onboarding-main .illustration { margin-bottom: 32px; }
    .onboarding-main h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 16px; line-height: 1.2; }
    .onboarding-main p { font-size: 18px; color: var(--text-muted); max-width: 320px; line-height: 1.5; }
    .onboarding-dots { display: flex; justify-content: center; gap: 8px; margin: 32px 0 24px; }
    .onboarding-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
    .onboarding-dot.active { background: var(--primary); width: 24px; border-radius: 4px; }

    /* Wizard-Slides: pro Slide ein eigener Container, Sichtbarkeit
       per [hidden]-Attribut gesteuert. Layout zentriert, max-Breite
       für ruhiges Auge. .onb-sub ist der Untertext-Hinweis (leiser
       Ton: „optional"), .onb-hcp-input das große HCP-Eingabefeld. */
    .onboarding-main .onb-slide {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }
    .onboarding-main .onb-slide[hidden] { display: none; }
    .onboarding-main .onb-slide h2 {
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -0.01em;
      margin-bottom: 12px;
      line-height: 1.2;
      text-align: center;
    }
    .onboarding-main .onb-slide .onb-sub {
      font-size: 15px;
      color: var(--text-muted);
      max-width: 320px;
      line-height: 1.5;
      text-align: center;
      margin-bottom: 28px;
    }
    .onboarding-main .onb-slide .onb-sub strong {
      font-weight: 600;
      color: var(--text);
    }
    /* Phase 2c: HCP-Auswahl als Bucket-Karten statt freier Zahleneingabe.
       6 Karten untereinander, jede ein großer Tap-Slot. Tap auf eine
       Karte = direkte Auswahl + Onboarding-Ende. */
    .onb-hcp-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      max-width: 340px;
      margin: 0 auto;
    }
    .onb-hcp-card {
      font: inherit;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.01em;
      padding: 12px 10px;
      border-radius: var(--radius-md);
      border: 1.5px solid var(--border-strong);
      background: var(--surface);
      color: var(--text);
      text-align: center;
      cursor: pointer;
      transition: transform .08s ease, border-color .15s ease, background .15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .onb-hcp-card:active { transform: scale(.97); }
    .onb-hcp-card:hover { border-color: var(--primary); }
    .onb-hcp-card.selected {
      border-color: var(--primary);
      background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    }

    /* Land-Pulldown auf Slide 2 — visuelle Verwandtschaft zum HCP-Input
       (gleicher Surface-Hintergrund, Border-Radius, Größe), aber breiter
       und mit dezentem Chevron-Icon rechts. */
    .onb-country-select {
      width: 100%;
      max-width: 320px;
      padding: 16px 44px 16px 18px;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-md);
      font-size: 18px;
      font-weight: 500;
      color: var(--text);
      font-family: inherit;
      -webkit-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6257' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 18px 18px;
      cursor: pointer;
    }
    .onb-country-select:focus { outline: none; border-color: var(--primary); }

    /* Kombi-Slide (Land + Heimatplatz auf einem Slide). Zwei Felder
       gestapelt mit kleinen Eyebrow-Labels darüber, damit der User
       die zwei Fragen klar trennen kann. */
    .onb-combo-field {
      width: 100%;
      max-width: 360px;
      margin-bottom: 18px;
    }
    .onb-combo-field:last-child { margin-bottom: 0; }
    .onb-combo-label {
      display: block;
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      font-weight: 600;
      margin-bottom: 8px;
    }
    /* Im Kombi-Slide ist das Country-Select voll breit (statt 320 px-
       Cap des Stand-alone-Slide), passt sich der Combo-Feld-Breite an. */
    .onb-combo-field .onb-country-select { max-width: none; }
    .onb-combo-field .onb-home-search { margin-bottom: 8px; }
    /* Heimat-Trefferliste im Kombi-Slide etwas niedriger, damit
       beide Felder plus Liste auf den Bildschirm passen. */
    .onb-combo-field .onb-home-list { max-height: 200px; }

    /* Heimat-Picker im Onboarding: Suchfeld oben, Trefferliste darunter.
       Bei langer Liste scrollt sie innerhalb des Containers; max-height
       sorgt dafür, dass der Action-Button unten erreichbar bleibt. */
    /* Phase 2c: Willkommen-Hero auf Slide 1. Zweizeiliges H1 in Fraunces,
       Logo-Monogramm links neben „Golfercoins"-Wortmarke. Subtitel in Inter,
       gedämpft. Konsistent zur Wortmarken-Darstellung in App-Header und
       Auth-Hero. */
    .onb-welcome {
      text-align: center;
      margin-bottom: 24px;
    }
    .onb-welcome-line1 {
      font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
      font-size: 40px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.01em;
      line-height: 1.1;
      margin-bottom: 10px;
    }
    .onb-welcome-line2 {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 32px;
    }
    .onb-welcome-logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      color: var(--primary);
      flex-shrink: 0;
    }
    .onb-welcome-logo .brand-g {
      width: 100%;
      height: 100%;
      display: block;
    }
    .onb-welcome-wordmark {
      font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
      font-size: 40px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.01em;
      line-height: 1;
    }
    .onb-welcome-wordmark .accent {
      color: var(--primary);
    }
    .onb-welcome-sub {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.55;
      margin: 0;
      padding: 0 12px;
    }

    .onb-home-search {
      position: relative;
      width: 100%;
      max-width: 360px;
      margin-bottom: 12px;
    }
    .onb-home-search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      pointer-events: none;
    }
    .onb-home-search-input {
      width: 100%;
      padding: 14px 14px 14px 42px;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-md);
      font-size: 16px;
      color: var(--text);
      font-family: inherit;
    }
    .onb-home-search-input:focus { outline: none; border-color: var(--primary); }
    .onb-home-list {
      width: 100%;
      max-width: 360px;
      max-height: 280px;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--surface);
    }
    .onb-home-list:empty { display: none; }
    .onb-home-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      cursor: pointer;
      border-bottom: 1px solid var(--border);
      transition: background 0.1s;
    }
    .onb-home-item:last-child { border-bottom: 0; }
    .onb-home-item:active { background: var(--surface-2); }
    .onb-home-item.selected {
      background: var(--primary-soft);
    }
    .onb-home-item .onb-home-name {
      flex: 1;
      min-width: 0;
      font-size: 15px;
      color: var(--text);
      font-weight: 500;
      line-height: 1.3;
    }
    .onb-home-item .onb-home-sub {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .onb-home-item .onb-home-check {
      flex: 0 0 auto;
      width: 22px;
      height: 22px;
      color: var(--primary);
      display: none;
    }
    .onb-home-item.selected .onb-home-check { display: block; }
    .onb-home-empty {
      padding: 16px;
      text-align: center;
      font-size: 14px;
      color: var(--text-muted);
    }

    /* ==========================================
       INSTALL-SLIDE (Slide 3) — Drei-Spalten-Zeilen
       --------------------------------------------------------
       Layout: pro Schritt eine Zeile mit drei Spalten:
         - Schritt-Nummer als grüner Kreis links
         - Mini-Crop des relevanten iOS-Elements in der Mitte
         - Anweisungs-Text rechts
       Mini-Crop zeigt NUR das eine Element (Share-Icon, Listen-
       Eintrag, Hinzufügen-Pill), keine ganze UI-Imitation.
       Pulse-Ring umrandet das Element dezent, keine Slide-Animationen.
       ========================================== */
    /* Install-Anleitung: lebt jetzt im Info-Screen (Akkordeon).
       Klassen tragen weiter den onb-Prefix für Konsistenz mit den
       Steps/Outro/iOS-Mini-Crops, sind aber kontextfrei nutzbar. */
    .onb-install-steps {
      display: flex;
      flex-direction: column;
      margin-top: 4px;
    }
    /* Vertikal gestapelter Schritt: Nummer mittig oben, darunter
       der Befehl-Text, darunter das iOS-Mini-Visual. Schritte
       sind durch dezente Haarlinien getrennt (kein Karten-BG),
       damit das Slide ruhig und kompakt wirkt. */
    .onb-install-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      text-align: center;
      padding: 10px 8px;
    }
    .onb-install-step + .onb-install-step {
      border-top: 1px solid rgba(20, 20, 20, 0.08);
    }
    /* Outro: kompakter Abschluss-Block unter den Schritten.
       Icon + Text nebeneinander (statt untereinander) — spart
       eine Zeile und der Doppelpunkt zeigt auf das Icon. */
    .onb-install-outro {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 14px 8px 4px;
      margin-top: 0;
      border-top: 1px solid rgba(20, 20, 20, 0.08);
    }
    .onb-install-outro-text {
      font-size: 13px;
      line-height: 1.35;
      color: var(--text);
      max-width: 200px;
      text-align: left;
    }
    .onb-install-outro .ios-home-tile img {
      width: 52px;
      height: 52px;
      border-radius: 12px;
    }
    .onb-install-outro .ios-home-tile-label {
      font-size: 10px;
    }
    .onb-step-num {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      font-weight: 700;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .onb-step-text {
      font-size: 14px;
      line-height: 1.35;
      color: var(--text);
      max-width: 320px;
    }
    .onb-step-text strong { font-weight: 600; }
    .onb-step-visual {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      margin-top: 2px;
    }
    .onb-step-hint {
      display: block;
      font-size: 12px;
      color: var(--text-muted);
      opacity: 0.85;
      margin-top: 6px;
      max-width: 320px;
      line-height: 1.35;
    }

    /* ----- Schritt 1: Share-Icon in Cream-Pille (wie iOS-Toolbar) ----- */
    .ios-share-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 36px;
      background: #F5F0E5;
      border-radius: 10px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      color: #1c1c1c;
    }
    .ios-share-pill svg {
      width: 18px;
      height: 18px;
    }

    /* ----- Schritt 2: dunkle Listen-Zeile mit Plus-Symbol.
       max-width entfernt, white-space:nowrap behält die ganze
       Zeile zusammen — clippt nicht mehr am Rand. ----- */
    .ios-menu-row {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      background: rgba(60, 60, 60, 0.92);
      border-radius: 8px;
      color: #fff;
      font-size: 13px;
      font-weight: 500;
      white-space: nowrap;
    }
    .ios-menu-row svg {
      width: 18px;
      height: 18px;
      color: #fff;
      flex-shrink: 0;
    }

    /* ----- Schritt 3: blauer „Hinzufügen"-Pill (iOS-Style) ----- */
    .ios-add-pill {
      display: inline-block;
      padding: 6px 16px;
      background: #0a84ff;
      color: #fff;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
    }

    /* ----- Schritt 4: Echte App-Icon-Kachel auf simuliertem
       Home-Bildschirm. Echtes apple-touch-icon.png, damit der
       User wiedererkennt, was er nachher auf dem Home-Bildschirm
       sucht. Label klein darunter wie in iOS. ----- */
    .ios-home-tile {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .ios-home-tile img {
      width: 60px;
      height: 60px;
      border-radius: 14px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.18);
      display: block;
    }
    .ios-home-tile-label {
      font-size: 11px;
      color: var(--text);
      font-weight: 500;
      letter-spacing: 0.1px;
    }

    /* ==========================================
       SCREEN 4 — SAMMLUNG
       ========================================== */
    /* Badges stehen jetzt am Seitenende (nach dem Regal), da Zahlen
       zur Sammlungs-Größe in die Tab-Bar gewandert sind.
       Sektion ist einklappbar: Header zeigt Titel + Mini-Bubbles in
       Tier-Farben, Body zeigt die volle Bubble-Reihe mit Schwellen-Zahlen.
       Toggle via Tap auf Header. */
    .badge-section { padding: 6px 0 6px; }
    .badge-section-header {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 8px 20px;
      background: none;
      border: 0;
      cursor: pointer;
      font: inherit;
      color: inherit;
      text-align: left;
      -webkit-tap-highlight-color: transparent;
    }
    .badge-section-title {
      font-size: 15px;
      letter-spacing: -0.005em;
      color: var(--text);
      font-weight: 600;
      line-height: 1.35;
      flex-shrink: 0;
    }
    /* Mini-Bubbles im Header — fünf farbige Kreise in der Größe Mini,
       analog zum Sterne-Akkordeon. Asymmetrische Opacity-Transition
       (wie .coin-shelf-stars): beim Aufklappen sofort weg, beim
       Zuklappen mit Delay wieder einblenden, damit nicht beide Bubble-
       Größen kurz gleichzeitig sichtbar sind. */
    .badge-section-mini-row {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
      flex-shrink: 0;
      opacity: 1;
      transition: opacity 200ms ease-out 280ms;
    }
    .badge-section.is-open .badge-section-mini-row {
      opacity: 0;
      pointer-events: none;
      transition: opacity 140ms ease-out 0ms;
    }
    .badge-section-mini-row .cb-mini {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      flex-shrink: 0;
      border: 1px solid rgba(0,0,0,0.08);
    }
    .badge-section-mini-row .cb-mini.tier-bronze  { background: #B97339; border-color: #8B5128; }
    .badge-section-mini-row .cb-mini.tier-silber  { background: #B9BCC3; border-color: #8E919A; }
    .badge-section-mini-row .cb-mini.tier-gold    { background: #D9AC4A; border-color: #A77F2A; }
    .badge-section-mini-row .cb-mini.tier-platin  { background: #B0BFBE; border-color: #82928F; }
    .badge-section-mini-row .cb-mini.tier-diamant { background: #6FB6EB; border-color: #4A8FCC; }
    .badge-section-mini-row .cb-mini.locked       { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.10); }
    .badge-section-chevron {
      color: var(--text-subtle);
      transition: transform 220ms ease-out;
      flex-shrink: 0;
    }
    .badge-section.is-open .badge-section-chevron {
      transform: rotate(180deg);
    }
    /* Body: einklappbar via max-height + opacity. */
    .badge-section-body {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 280ms ease-out, opacity 220ms ease-out, padding 280ms ease-out;
      padding-top: 0;
    }
    .badge-section.is-open .badge-section-body {
      max-height: 200px;
      opacity: 1;
      padding-top: 6px;
    }
    /* Untertitel im selben Bullet-Stil wie der Haupt-Titel, dezenter
       gefärbt — "Meine Auszeichnungen · Coins" / "· Runden" etc. */
    .badge-section-sub {
      color: var(--text-muted);
      font-weight: 400;
      margin-left: 2px;
    }
    .badge-strip {
      display: flex;
      gap: 14px;
      overflow-x: auto;
      padding: 2px 20px 4px;
      scrollbar-width: none;
    }
    .badge-strip::-webkit-scrollbar { display: none; }

    /* ──────────────────────────────────────────────────────────────────
       Coin-Badge-Row — vereinfachtes 4-Tier-Achievement-System.
       Vier Marker (3/10/50/100 Coins), Brand-G als Mini-Coin, ghost wenn
       nicht erreicht, Tier-Farbe + Shining-Effekt wenn erreicht. Ersetzt
       das alte 8-Kategorien-Achievements-System für den MVP.
       ────────────────────────────────────────────────────────────────── */
    .coin-badge-row {
      display: flex;
      gap: 14px;
      padding: 2px 20px 4px;
      justify-content: space-between;
    }
    .cb-marker {
      flex: 1 1 0;
      min-width: 0;
      text-align: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      background: none;
      border: none;
      padding: 0;
    }
    .cb-marker-coin {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      /* Dezenter Rahmen wie im alten Badge-System — hebt die Marker
         optisch von den großen Coins im Regal ab und gibt ihnen
         eine eigene "Plaketten"-Identität. */
      border: 2px solid var(--border);
      /* Schwellen-Zahl als Inhalt: groß genug, dass auch "100" lesbar
         bleibt. Letter-spacing leicht negativ für Kompaktheit bei
         3-stelligen Zahlen. */
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1;
      box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.55),
        inset 0 -2px 3px rgba(0, 0, 0, 0.18),
        0 1px 3px rgba(0, 0, 0, 0.10);
      transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .cb-marker:active .cb-marker-coin {
      transform: scale(0.94);
    }
    /* Locked: Ghost-Coin, dezent grau, ohne Shining. Border bleibt
       in der Standard-Border-Farbe (var(--border)). */
    .cb-marker.locked .cb-marker-coin {
      background:
        radial-gradient(circle at 30% 30%, #FAFAFB 0%, #E0E0E5 60%, #C8C8CE 100%);
      border-color: var(--border);
      color: #9A9AA0;
      font-style: italic;
      font-weight: 500;
      opacity: 0.65;
    }
    /* Achieved: Tier-Farbe mit dezentem, langsamen Shining-Effekt.
       Gesamtzyklus 9s — Shining nur in den letzten ~25% der Zeit, lange
       Ruhe-Phase dazwischen. Wirkt edler und nicht hektisch. */
    .cb-marker.achieved .cb-marker-coin::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: linear-gradient(
        110deg,
        transparent 30%,
        rgba(255, 255, 255, 0.5) 48%,
        rgba(255, 255, 255, 0.65) 50%,
        rgba(255, 255, 255, 0.5) 52%,
        transparent 70%
      );
      transform: translateX(-110%);
      animation: cb-shine 9s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes cb-shine {
      0%, 75%, 100% { transform: translateX(-110%); }
      90% { transform: translateX(110%); }
    }
    /* Achieved-Tiers: Tier-Farbe als Coin-Hintergrund + dunklere Variante
       als Border (rahmt den Coin, gibt ihm "Plaketten"-Wertigkeit).
       color steuert die Schwellen-Zahl im Coin. */
    .cb-marker.tier-bronze .cb-marker-coin {
      background: radial-gradient(circle at 30% 30%, #E8B488 0%, #C48452 55%, #8E5527 100%);
      border-color: #6E3F18;
      color: #4A2A0E;
    }
    .cb-marker.tier-silber .cb-marker-coin {
      background: radial-gradient(circle at 30% 30%, #E8E8EC 0%, #B8B8C0 55%, #8A8A92 100%);
      border-color: #6A6A72;
      color: #2A2A30;
    }
    .cb-marker.tier-gold .cb-marker-coin {
      background: radial-gradient(circle at 30% 30%, #FFE49C 0%, #E9C158 50%, #B58F2C 100%);
      border-color: #8C6A1E;
      color: #5A3F0A;
    }
    /* Platin: helles Silber-Weiß mit dezentem Türkis-Schimmer als Hauch
       in den Hochlichtern. Klassischer Platin-Look — kühler als Silber,
       wertiger durch das Türkis-Spiel. */
    .cb-marker.tier-platin .cb-marker-coin {
      background: radial-gradient(circle at 30% 30%, #F4FBFA 0%, #D6E4E2 45%, #A8B6B5 100%);
      border-color: #6E8482;
      color: #2C3E3D;
    }
    .cb-marker.tier-diamant .cb-marker-coin {
      background: radial-gradient(circle at 30% 30%, #C4E8FA 0%, #6FB8E0 55%, #2E78B0 100%);
      border-color: #1F5680;
      color: #0F3858;
    }
    /* Hinweis: .cb-marker-g und .cb-marker-num wurden entfernt — die
       Schwellen-Zahl steht jetzt direkt als Inhalt im .cb-marker-coin
       (siehe oben), kein G-Symbol mehr. Spart eine Zeile und unter-
       scheidet die Marker klar von den Brand-G-Coins im Regal. */
    .badge {
      flex-shrink: 0;
      width: 68px;
      text-align: center;
    }
    .badge-icon {
      width: 44px; height: 44px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 4px;
      /* position: relative ist Pflicht, damit das innere
         .badge-coin-stars (absolut positioniert) sich am Coin
         orientiert und nicht am nächsthöheren positionierten
         Vorfahren — sonst floaten die Sterne über den Screen. */
      position: relative;
      /* Default-Look (kein Tier erreicht): leicht grau, gedämpft.
         Wird von den .tier-*-Klassen überschrieben, sobald eine Stufe
         erreicht ist. */
      background: var(--surface-2);
      border: 2px solid var(--border);
      color: var(--text-subtle);
    }
    .badge-icon svg { width: 22px; height: 22px; }
    /* Legacy locked-Klasse — bleibt für Rückwärtskompatibilität, wird
       durch .badge.tier-locked ersetzt. */
    .badge.locked .badge-icon,
    .badge.tier-locked .badge-icon {
      background: var(--surface-2);
      border-color: var(--border);
      color: var(--text-subtle);
    }

    /* ==========================================
       BADGE-COIN — Tier-Farbe + Symbol + Lichtreflex
       --------------------------------------------------------
       Pure Edelmetall-Anmutung: jeder Coin hat seine eigene Tier-
       Farbe (Bronze/Silber/Gold/Diamant), trägt das Kategorie-
       Symbol zentral, und ein dezenter Lichtreflex zieht alle 3,5 s
       schräg über die Oberfläche — wie auf echten Münzen, die im
       Licht glänzen. Der Lichtreflex macht den Coin als 'edles
       Material' lesbar (statt 'flacher farbiger Button'), auch ohne
       Edelmetall-Konvention zu kennen.

       Alle vier Tiers haben denselben Lichtreflex (gleiche Intensität,
       gleicher Rhythmus) — nur die Farbe unterscheidet sich. Diamant
       bekommt ein etwas helleres Highlight-Band als Hauch von Funkel.

       Doppel-Selektor deckt Sammlungs-Shelf (.badge mit tier-Klasse)
       und Profil-Akkordeon (.badge-icon mit tier-Klasse) ab. */
    .badge.tier-bronze .badge-icon,
    .badge-icon.tier-bronze {
      background: linear-gradient(135deg, #E8A878 0%, #C48452 50%, #8E5527 100%);
      border-color: #6B3F1A;
      color: #4A2810;
      overflow: hidden;
      box-shadow:
        inset 0 2px 3px rgba(255, 230, 200, 0.55),
        inset 0 -2px 3px rgba(60, 25, 0, 0.30),
        0 2px 6px rgba(80, 40, 0, 0.18);
    }
    .badge.tier-silber .badge-icon,
    .badge-icon.tier-silber {
      background: linear-gradient(135deg, #F4F4F7 0%, #C8C8D0 50%, #8E8E97 100%);
      border-color: #6E6E76;
      color: #2A2A2E;
      overflow: hidden;
      box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.7),
        inset 0 -2px 3px rgba(40, 40, 50, 0.20),
        0 2px 6px rgba(0, 0, 0, 0.15);
    }
    .badge.tier-gold .badge-icon,
    .badge-icon.tier-gold {
      background: linear-gradient(135deg, #FBE9A8 0%, #E9C158 50%, #A77B22 100%);
      border-color: #8C6519;
      color: #4A340A;
      overflow: hidden;
      box-shadow:
        inset 0 2px 3px rgba(255, 245, 200, 0.65),
        inset 0 -2px 3px rgba(80, 50, 0, 0.25),
        0 2px 6px rgba(80, 50, 0, 0.20);
    }
    .badge.tier-diamant .badge-icon,
    .badge-icon.tier-diamant {
      background: linear-gradient(135deg, #F0F8FF 0%, #B8E0F0 40%, #6FB8E0 80%, #4090C0 100%);
      border-color: #2E78B0;
      color: #0F3858;
      overflow: hidden;
      box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.85),
        inset 0 -2px 3px rgba(20, 60, 100, 0.22),
        0 2px 6px rgba(0, 0, 0, 0.15);
    }

    /* Lichtreflex auf allen vier Tiers — gleiches Pseudo-Element,
       gleiche Animation, einheitliche Wirkung. overflow: hidden am
       .badge-icon clippt den Reflex am Kreisrand, sodass nichts
       außerhalb glänzt. */
    .badge.tier-bronze .badge-icon::before,
    .badge.tier-silber .badge-icon::before,
    .badge.tier-gold .badge-icon::before,
    .badge.tier-diamant .badge-icon::before,
    .badge-icon.tier-bronze::before,
    .badge-icon.tier-silber::before,
    .badge-icon.tier-gold::before,
    .badge-icon.tier-diamant::before {
      content: '';
      position: absolute;
      inset: -20%;
      background: linear-gradient(125deg,
        transparent 0%,
        transparent 38%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 62%,
        transparent 100%);
      pointer-events: none;
      animation: badge-shimmer 3.5s linear infinite;
      mix-blend-mode: screen;
      z-index: 0;
    }
    /* Diamant darf zusätzlich etwas heller funkeln — heller Reflex
       als Hauch von Edelstein-Charakter. */
    .badge.tier-diamant .badge-icon::before,
    .badge-icon.tier-diamant::before {
      background: linear-gradient(125deg,
        transparent 0%,
        transparent 36%,
        rgba(255, 255, 255, 0.78) 50%,
        transparent 64%,
        transparent 100%);
    }
    /* Symbol-SVG soll vor dem Lichtreflex liegen, sonst überlagert
       der Reflex das Icon. */
    .badge-icon svg {
      position: relative;
      z-index: 1;
    }

    /* Versetzte Animation pro Shelf-Position — verhindert dass alle
       8 Coins gleichzeitig glänzen (würde wuselig wirken). Stattdessen
       läuft eine ruhige Welle durch das Shelf, kein Coin synchron mit
       seinem Nachbarn. Im Profil-Akkordeon (1 Coin pro Zeile sichtbar)
       und Celebration (1 Coin) ist Synchronisation egal. */
    .badge-strip .badge:nth-child(1) .badge-icon::before  { animation-delay: 0s;    }
    .badge-strip .badge:nth-child(2) .badge-icon::before  { animation-delay: 0.4s;  }
    .badge-strip .badge:nth-child(3) .badge-icon::before  { animation-delay: 0.8s;  }
    .badge-strip .badge:nth-child(4) .badge-icon::before  { animation-delay: 1.2s;  }
    .badge-strip .badge:nth-child(5) .badge-icon::before  { animation-delay: 1.6s;  }
    .badge-strip .badge:nth-child(6) .badge-icon::before  { animation-delay: 2.0s;  }
    .badge-strip .badge:nth-child(7) .badge-icon::before  { animation-delay: 2.4s;  }
    .badge-strip .badge:nth-child(8) .badge-icon::before  { animation-delay: 2.8s;  }

    @keyframes badge-shimmer {
      0%   { transform: translate(-50%, -50%); }
      100% { transform: translate(50%, 50%); }
    }

    /* ==========================================
       DIAMANT-CELEBRATION-GLOW (nur Magic-Moment)
       --------------------------------------------------------
       Im Shelf/Profil glänzt der Diamant-Coin im selben Rhythmus
       wie die anderen Tiers — die Tier-Farbe selbst macht den
       Unterschied. Im Celebration-Overlay bekommt er zusätzlich
       einen pulsierenden Außen-Glow als Magic-Moment-Verstärkung. */
    @keyframes diamant-glow-pulse {
      0%, 100% {
        box-shadow:
          inset 0 4px 6px rgba(255, 255, 255, 0.85),
          inset 0 -4px 6px rgba(20, 60, 100, 0.22),
          0 0 0 4px rgba(140, 200, 230, 0.30),
          0 12px 30px rgba(80, 160, 220, 0.45);
      }
      50% {
        box-shadow:
          inset 0 4px 6px rgba(255, 255, 255, 0.85),
          inset 0 -4px 6px rgba(20, 60, 100, 0.22),
          0 0 0 6px rgba(140, 200, 230, 0.45),
          0 12px 40px rgba(180, 220, 255, 0.85);
      }
    }
    /* Tier-Label: Wort-Marker (Bronze, Silber, Gold, Diamant), wird
       im Profil-Akkordeon neben den Sternen angezeigt. */
    .badge-tier-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .badge-tier-label.tier-bronze  { color: #8E5527; }
    .badge-tier-label.tier-silber  { color: #6E6E76; }
    .badge-tier-label.tier-gold    { color: #8C6519; }
    .badge-tier-label.tier-diamant { color: #2E78B0; }
    .badge-tier-label.tier-locked  { color: var(--text-muted); }
    .badge-label {
      font-size: 10px;
      color: var(--text-muted);
      line-height: 1.2;
      font-weight: 500;
      /* Lange Namen wie "Weltenbummler" oder "Deutschland-Tour" dürfen
         in die Breite gehen (68px), aber nicht in den Nachbarn laufen. */
      word-break: break-word;
      overflow-wrap: anywhere;
      hyphens: auto;
    }

    /* Das Regal ist ein festes 3-Reihen-Fenster: immer exakt 9 Coins sichtbar.
       Intern scrollt es per Reihen-Snap — oben verschwindet eine Reihe,
       unten kommt die nächste ins Bild. Dadurch gibt es nie halbe Coins,
       und Header/Stats darüber bleiben ruhig stehen. */
    .shelf {
      /* Default-Höhe (148px) gilt, wenn der Sterne-Toggle aus ist. Mit
         aktiven Mini-Sternen wächst die Cell auf 158px — siehe weiter
         unten die `body.with-shelf-rating .shelf`-Regel. */
      --shelf-row-h: 148px;
      padding: 0 20px;
      height: calc(2 * var(--shelf-row-h));
      overflow-y: auto;
      /* Coin-Regal als hellere „Notebook-Seite" — App-Hülle drumherum
         (Header, Sticky-Coins, Tab-Bar) bleibt im cremigen --bg, sodass
         alle Screens konsistent cream bleiben. Coins liegen visuell auf
         der hellen Seite, Cream-Rahmen = Notebook-Einband. */
      background: var(--surface);
      /* iOS-Overscroll auf .shelf abfangen, damit das Bouncing nicht auf
         den Body propagiert und die obere Sticky-Zone unter die iPhone-
         Statusbar schiebt. `contain` lässt internes Rubber-Band zu, blockt
         aber Scroll-Chaining nach außen. */
      overscroll-behavior-y: contain;
      scroll-snap-type: y mandatory;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      /* position: relative ist nötig, damit das Empty-State-Post-it
         (.empty-state.in-shelf, position: absolute) sich am Shelf-
         Container ausrichtet und nicht an einem höheren Vorfahren. */
      position: relative;
    }
    /* Hinweis: Frühere Versuche, das Row-Padding im Sterne-Modus zu
       reduzieren (8/8 oder 2/6), wurden zurückgenommen. Frank fand das
       aufgequetschte Layout schlechter als die seltenen Fälle, in denen
       der Sterne-Slot eines 2-Zeilen-Label-Coins (St Andrews Old, Royal
       County Down) in der untersten Reihe partiell abgeschnitten wird.
       Tradeoff bewusst zugunsten der Optik. */
    .shelf-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px 12px;
      /* Default padding-bottom 14px — bei aktivem Sterne-Toggle wächst
         es auf 22px (Regel `body.with-shelf-rating .shelf-row` unten).
         So bleibt die Cell bei abgeschaltetem Toggle kompakt. */
      padding: 14px 6px;
      position: relative;
      height: var(--shelf-row-h);
      box-sizing: border-box;
      scroll-snap-align: start;
      scroll-snap-stop: normal;
    }
    /* Sterne-aktiv-Modus: Cell-Höhe + Padding-Bottom wachsen, damit Mini-
       Sterne unter zweizeiligen Namen genug Luft zur Trennlinie haben.
       Body-Klasse `with-shelf-rating` wird automatisch von setShelfShow-
       Rating()/loadProfile() gesetzt. Toggle off → Default 148/14 greift,
       Slot bleibt kompakt. */
    body.with-shelf-rating .shelf {
      --shelf-row-h: 158px;
    }
    body.with-shelf-rating .shelf-row {
      padding-bottom: 22px;
    }
    /* Stufe C des Sammlung-Umbaus (b87, 2026-06-08):
       shelf-fixed ist nicht mehr im Einsatz — Marken-Coin, Heimat und
       Plus sind in Stufe A/B/C in neue Plätze gewandert. Container
       komplett ausgeblendet; der renderFixedRow-Code bleibt als
       no-op stehen falls historische Aufrufer noch drauf zugreifen. */
    .shelf-fixed {
      display: none;
    }
    .shelf-fixed-LEGACY-UNUSED {
      --shelf-row-h: 148px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px 12px;
      padding: 14px 26px;
      height: var(--shelf-row-h);
      box-sizing: border-box;
      position: relative;
    }

    /* Stufe C v2 (b88): + Platz als zentraler Action-Knopf in der Tab-Bar.
       Grüner Kreis (Markengrün), weißes Plus-Icon. Sitzt vertikal
       zentriert in der Tab-Bar-Höhe (nicht erhaben), zwischen den
       Coins- und Runden-Tab-Pills. Sichtbar nur in der Sammlung-Tab-Bar
       (Runden-Tab-Bar hat keinen Add-Knopf — würde sonst als „Runde
       hinzufügen" missverstanden). */
    .tab-add-action {
      flex: 0 0 auto;
      /* 54px — visuell auf Augenhöhe mit den Coins/Runden-Pills (48px
         hoch + Padding) zwischen denen er sitzt. Frank-Feedback nach
         b88-Test: alter 48er wirkte etwas klein. */
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: var(--primary);
      color: #FFF;
      border: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      /* Stärkerer Schatten + leichter weißer Inset-Ring → Knopf-Look,
         hebt den Kreis als Action gegenüber den flachen Pillen ab. */
      box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.18),
        0 4px 10px rgba(0, 0, 0, 0.18),
        0 1px 2px rgba(0, 0, 0, 0.10);
      transition: transform 120ms ease, box-shadow 180ms ease;
      padding: 0;
    }
    .tab-add-action svg {
      width: 26px;
      height: 26px;
      stroke: currentColor;
    }
    .tab-add-action:active {
      transform: scale(0.94);
      box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.22),
        0 2px 4px rgba(0, 0, 0, 0.14);
    }

    /* Fix-Zeile: alle sichtbaren Coins (G-Logo, Heimat-Coin, Plus,
       Ghost) einheitlich 88 × 88. Vorher war der Plus-Button 96
       und damit optisch größer als G und Heimat — jetzt alle gleich.
       Falls ein 3D-PNG-Coin in der Fix-Zeile landet (z. B. künftig
       wieder), bleibt er 88 — das interne 4 % Padding fällt visuell
       kaum auf. */
    .shelf-fixed .coin.coin-3d.coin-shelf,
    .shelf-fixed .coin.coin-shelf,
    .shelf-fixed .coin-add,
    .shelf-fixed .shelf-brand-icon {
      width: 88px;
      height: 88px;
    }
    /* Ghost bleibt mit eigener Logik (78 + 10 margin-top = 88 px netto)
       — gleich hoch wie die anderen Slots, kein Override nötig. */
    .shelf-fixed .coin-ghost {
      margin-top: 0;
      width: 88px;
      height: 88px;
    }
    /* Ghost in der Fix-Zeile: kein margin-top (das war für die
       Regal-Linie im Scroll-Shelf gedacht — die gibt es hier nicht). */
    .shelf-fixed .coin-ghost {
      margin-top: 0;
    }
    /* Reines Marken-G (transparenter Hintergrund, ohne Coin-Frame) als
       Slot-1-Variante. Im Test-Modus ersetzt es den 3D-Brand-Coin —
       falls's nicht gefällt, einfach im JS wieder auf das PNG
       zurückbauen. */
    .shelf-brand-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
    }
    /* Inneres G-SVG füllt den 88-px-Container voll aus. Alle Coin-
       Slots in der Fix-Zeile sind jetzt einheitlich 88 × 88. */
    .shelf-brand-icon .brand-g {
      width: 100%;
      height: 100%;
      display: block;
    }
    .shelf-fixed::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 4px;
      background: linear-gradient(180deg, rgba(139,111,71,0.15), rgba(139,111,71,0.05));
      border-radius: 2px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* ---------- Compact-Header (Scroll-Verhalten) ----------
       Wichtig zur Layout-Architektur: In der Sammlung scrollt nur das
       innere #shelf — Header, Search-Bar und .shelf-fixed sitzen
       AUSSERHALB des Scrollers und bleiben dadurch automatisch oben
       sichtbar (kein position:sticky nötig). Ein JS-Scroll-Listener auf
       #shelf toggelt die .is-compact-Klasse an .shelf-fixed, sobald der
       User im Regal scrollt → Fix-Zeile schrumpft auf eine Pill-Reihe,
       damit mehr Coins im Viewport landen.

       Sticky-Bereich (Header + Shelf-Fixed) bleibt im cremigen --bg —
       konsistent mit Runden, Profil und allen anderen Screens. Der
       Tiefen-Effekt entsteht stattdessen über das Coin-Regal (.shelf),
       das mit --surface heller eingefärbt ist — wirkt wie eine helle
       Notebook-Seite, die Cream-Hülle drumherum als Einband. */
    .shelf-fixed {
      transition: height 220ms ease-out, padding 220ms ease-out;
    }
    .shelf-fixed.is-compact {
      /* height direkt setzen (nicht via --shelf-row-h), damit die height-
         Transition greift — CSS Custom Properties sind nicht transitionable. */
      height: 56px;
      padding: 8px 18px;
      gap: 8px;
    }
    /* Trennlinie unten verschwindet im Compact — Mini-Header braucht
       keinen Bühnenrahmen, der Übergang zum Regal ist visuell ohnehin
       klar. */
    .shelf-fixed.is-compact::after { display: none; }

    /* Slot-Layout in Compact: horizontal (Mini-Icon links, kurzes Label
       rechts), zentriert in der Grid-Spalte. */
    .shelf-fixed.is-compact .shelf-item {
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 0;
    }
    /* Mini-Coins: 32px für alle Slot-Visuals einheitlich. */
    .shelf-fixed.is-compact .coin.coin-3d.coin-shelf,
    .shelf-fixed.is-compact .coin.coin-shelf,
    .shelf-fixed.is-compact .coin-add,
    .shelf-fixed.is-compact .shelf-brand-icon,
    .shelf-fixed.is-compact .coin-ghost {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      transition: width 220ms ease-out, height 220ms ease-out;
    }
    /* Volles Stacked-Label (zweizeilig HEIMATPLATZ/Clubname etc.) blendet
       in Compact aus; stattdessen wird das kompakte Label sichtbar, das
       der Render-Code als zusätzlichen <span class="label-compact"> in
       jeden Slot legt. Außerhalb von Compact ist label-compact unsichtbar.
       !important nötig wegen konkurrierender Regel
       `.shelf-item.home .label.label-stacked { display: block }` (Section
       HEIMAT-SLOT), die sonst spezifitäts-mäßig gewinnt. */
    .label-compact { display: none; }
    .shelf-fixed.is-compact .label,
    .shelf-fixed.is-compact .label-stacked { display: none !important; }
    /* Mini-Flagge im Heimat-Coin in Compact ebenfalls verstecken — Frank's
       Wunsch: „Mini coin ohne flagge", weil die Pill-Reihe sonst visuell
       unruhig wird und die Coin-Identität ohne Pin ausreichend ist. */
    .shelf-fixed.is-compact .coin-flag { display: none; }
    .shelf-fixed.is-compact .label-compact {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      line-height: 1;
    }
    /* Plus-Slot in Compact: gleiches Layout-Schema wie Slot 1 (Info-G)
       und Slot 2 (Heimat-Coin) — Mini-Icon links, Label rechts. Statt
       dunkelgrüner Pill ein grüner 32-px-Kreis mit weißem Plus; die
       Action-Wirkung kommt durchs grüne Plus-Icon, nicht durch ein
       Capsule-Background. Konsistent zur vollen Fix-Zeile, wo der
       Plus-Slot auch ein grüner Kreis ist. */
    .shelf-fixed.is-compact .shelf-item.add .coin-add {
      background: var(--primary);
      color: #fff;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 0;
      box-shadow: none;
      flex-shrink: 0;
    }
    .shelf-fixed.is-compact .shelf-item.add .coin-add svg {
      stroke: #fff;
      /* Plus etwas kleiner als der grüne Kreis — wirkt schlanker und
         passt zur visuellen Größe der Logos in Slot 1 (G-Monogramm)
         und Slot 2 (Mini-Coin), die ihren Container auch nicht voll
         ausfüllen. */
      width: 60%;
      height: 60%;
    }
    .shelf-row::after {
      content: '';
      position: absolute;
      left: -20px; right: -20px; bottom: 0;
      height: 4px;
      background: linear-gradient(180deg, rgba(139,111,71,0.15), rgba(139,111,71,0.05));
      border-radius: 2px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .shelf-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      min-width: 0; /* verhindert Grid-Blow-up bei langen Labels */
    }
    /* Meta-Wrapper unter dem Coin: enthält das Label und (optional) den
       Mini-Sterne-Slot. Reserviert eine fixe Mindest-Höhe, damit alle
       Coin-Slots auf gleicher Basislinie stehen — überschüssiger Platz
       sammelt sich UNTEN, weil der Wrapper Inhalte oben anlegt. So
       kleben Sterne am Namen, nicht an der Regallinie. */
    .shelf-item .shelf-meta {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 2px;
      width: 100%;
      min-height: calc(2 * 1.25em);
    }
    /* Label unter dem Coin: max. 2 Zeilen Platz, bei längeren Namen Ellipsis.
       Bei direkten Kindern von .shelf-item (Brand/Plus/Ghost ohne shelf-meta)
       reserviert das Label selbst 2 Zeilen Höhe — diese Items haben keinen
       Sterne-Slot und brauchen die min-height direkt am Label.
       Innerhalb von .shelf-meta (Coin/Home) lebt die min-height am Wrapper,
       und das Label fällt auf seine natürliche Höhe zurück. */
    .shelf-item .label {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 11px;
      line-height: 1.25;
      color: var(--text-muted);
      text-align: center;
      font-weight: 500;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-word;
      min-height: calc(2 * 1.25em);
      padding: 0 2px;
    }
    .shelf-item .shelf-meta .label { min-height: 0; }

    /* Mini-Sterne-Slot direkt unter dem Label-Text. Wird nur erzeugt,
       wenn der User die Anzeige im Profil eingeschaltet hat (default off).
       Slot-Höhe ist FIX (10px), unabhängig vom Rating — so springt das
       Layout zwischen Coins mit/ohne Bewertung nicht. Bei rating === 0
       bekommt der Slot `is-empty` und wird per `visibility: hidden`
       unsichtbar, behält aber seine Höhe.

       Filled = Gold, Empty = Beige — gleiche Palette wie der Read-Only-
       Stern-Header in der Bewertungs-Akkordeon-Karte. */
    .coin-shelf-stars {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1px;
      height: 10px;
      flex: 0 0 auto;
    }
    .coin-shelf-stars.is-empty { visibility: hidden; }
    .coin-shelf-stars svg {
      width: 9px;
      height: 9px;
      flex: 0 0 auto;
    }
    .coin-shelf-stars svg.filled { fill: #E8B546; }
    .coin-shelf-stars svg.empty  { fill: #D8CDB0; }

    /* Aufblink-Moment direkt nach dem Hinzufügen eines neuen Coins.
       Mehrere Pulse-Wellen über 5 s verteilt — erste kraftvoll, danach
       dezenter, mit langem Halo-Auslaufen, damit der frische Coin
       wirklich auffällt und nicht nach 1 s wieder „verschwindet".
       Läuft einmalig, danach entfernt JS die Klasse wieder. */
    @keyframes coin-just-added {
      0%   { transform: scale(1);    box-shadow: 0 0 0 0   rgba(30, 86, 49, 0.55); }

      /* Welle 1 — kraftvoller Bounce */
      6%   { transform: scale(1.10); box-shadow: 0 0 0 10px rgba(30, 86, 49, 0.30); }
      14%  { transform: scale(1);    box-shadow: 0 0 0 18px rgba(30, 86, 49, 0.08); }

      /* Welle 2 — mittlerer Bounce */
      24%  { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(30, 86, 49, 0.24); }
      34%  { transform: scale(1);    box-shadow: 0 0 0 20px rgba(30, 86, 49, 0.05); }

      /* Welle 3 — sanfter Bounce */
      44%  { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(30, 86, 49, 0.18); }
      54%  { transform: scale(1);    box-shadow: 0 0 0 16px rgba(30, 86, 49, 0.04); }

      /* Halo: ein anhaltender Glow, der langsam ausfadet */
      66%  { transform: scale(1);    box-shadow: 0 0 0 6px  rgba(30, 86, 49, 0.18); }
      80%  { transform: scale(1);    box-shadow: 0 0 0 9px  rgba(30, 86, 49, 0.10); }
      92%  { transform: scale(1);    box-shadow: 0 0 0 12px rgba(30, 86, 49, 0.04); }
      100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(30, 86, 49, 0.00); }
    }
    .shelf-item.just-added .coin {
      animation: coin-just-added 5s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
    }

    /* Pulse-Animation für eine frisch gespeicherte Runde in der Liste.
       Mint-Background-Flash mit zwei sanften Wellen über 5 s — kein Scale
       (würde Listen-Layout zerren). Sanfter als der Coin-Bounce, weil
       die Runden-Card schon eine größere Fläche ist und der Effekt
       sonst zu unruhig wirkt. */
    @keyframes round-just-added {
      0%   { background-color: var(--surface);      box-shadow: 0 0 0 0   rgba(30, 86, 49, 0.00), 0 1px 2px rgba(0,0,0,0.04); }

      /* Welle 1 — kräftiger Flash */
      8%   { background-color: var(--primary-soft); box-shadow: 0 0 0 6px rgba(30, 86, 49, 0.24), 0 1px 2px rgba(0,0,0,0.04); }
      22%  { background-color: var(--primary-soft); box-shadow: 0 0 0 10px rgba(30, 86, 49, 0.08), 0 1px 2px rgba(0,0,0,0.04); }

      /* Welle 2 — sanfter Re-Flash */
      36%  { background-color: var(--primary-soft); box-shadow: 0 0 0 5px rgba(30, 86, 49, 0.18), 0 1px 2px rgba(0,0,0,0.04); }
      54%  { background-color: var(--primary-soft); box-shadow: 0 0 0 8px rgba(30, 86, 49, 0.06), 0 1px 2px rgba(0,0,0,0.04); }

      /* Glow-Halt + langes Ausblenden */
      72%  { background-color: var(--primary-soft); box-shadow: 0 0 0 4px rgba(30, 86, 49, 0.10), 0 1px 2px rgba(0,0,0,0.04); }
      100% { background-color: var(--surface);      box-shadow: 0 0 0 0   rgba(30, 86, 49, 0.00), 0 1px 2px rgba(0,0,0,0.04); }
    }
    .round-row.just-added {
      animation: round-just-added 5s ease-out 1;
    }

    /* Plus-Coin: Slot 1 der Fix-Zeile, öffnet "Platz hinzufügen".
       Solider grüner Kreis mit weißem Plus — klare Aktions-Affordanz,
       nimmt visuell das frühere FAB-Vokabular auf. */
    .shelf-item.add { cursor: pointer; }
    .coin-add {
      width: 88px; height: 88px;
      border-radius: 50%;
      background: var(--primary);
      border: 1.5px solid rgba(0, 0, 0, 0.18);
      display: flex; align-items: center; justify-content: center;
      color: #fff;
      box-shadow:
        inset 0 2px 5px rgba(255, 255, 255, 0.18),
        inset 0 -3px 6px rgba(0, 0, 0, 0.20),
        0 4px 12px rgba(30, 86, 49, 0.30);
      transition: transform 0.1s;
    }
    .shelf-item.add:active .coin-add { transform: scale(0.94); }
    .coin-add svg {
      width: 36px; height: 36px;
      stroke: #fff; stroke-width: 2.4; fill: none;
      stroke-linecap: round;
    }

    /* Ghost-Slot: leerer Sammelbuch-Platz im Panini-Stil. Zeigt das
       Golfercoin-Monogramm als Inline-SVG ausgegraut — stummer Hinweis
       "hier könnte dein nächster Coin stehen", der die Marke fortführt.
       Visuell etwas kleiner (78 px) als die Shelf-Coins (88 px), damit
       der Ghost im Regal nicht dominanter wirkt als die echten Coins.
       Die 3D-Coin-PNGs haben intern 4 % Padding für den Schatten —
       der NETTO sichtbare Coin-Kreis ist also ~80 px. Mit 78 px liegt
       der Ghost-Kreis gleichauf mit dem sichtbaren Coin-Rand. */
    .shelf-item.ghost { cursor: default; }
    .coin-ghost {
      width: 78px; height: 78px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.04);
      border: 1.5px solid rgba(0, 0, 0, 0.08);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      color: rgba(0, 0, 0, 0.22);
      /* Ghost ist 10 px schmaler als die normalen Shelf-Coins (78 vs
         88 px). Mit margin-top: 10px rutscht er nach unten, sodass
         seine Bottom-Kante exakt auf der gleichen Regallinie sitzt
         wie die Bottoms der voll skalierten Coins daneben. Das Label
         darunter (visibility: hidden) bleibt an seiner Position, also
         kein Layout-Shift, nur der visuelle Coin sitzt richtig. */
      margin-top: 10px;
    }
    .coin-ghost .brand-g {
      width: 64%;
      height: 64%;
      display: block;
      pointer-events: none;
    }
    .shelf-item.ghost .label {
      visibility: hidden; /* Platz reservieren, aber unsichtbar */
      user-select: none;
    }

    /* Brand-Coin (Info-Slot) + Club-Coin (Regal-Slots ohne eigenes Logo):
       beide nutzen das Golfercoin-G als Münzmotiv ("Coins sind Coins"),
       cremefarbener Münzkörper (has-image) + grünes G inline.
       Unterschied: Brand-Coin hat einen dezenten grünen Rand zur Abgrenzung
       — der Info-Slot ist keine Platz-Sammlung, sondern die Marke selbst. */
    .coin.brand-coin,
    .coin.club-coin {
      color: var(--primary);
    }
    .coin.brand-coin .brand-g,
    .coin.club-coin .brand-g {
      width: 78%;
      height: 78%;
      display: block;
    }
    .coin.brand-coin {
      border-color: var(--primary);
      border-width: 2px;
    }

    /* Marken-Slot (Slot 1 der Fix-Zeile): Golfercoins-G-Logo als
       Identitäts-Coin am linken Rand. Klick führt zur Info-Seite
       (Landingpage-Content ohne Login/Registrierung). */
    .shelf-item.brand { cursor: pointer; }
    .shelf-item.brand:active .coin { transform: scale(0.97); }

    /* Heimatplatz-Slot (Slot 2): gestaffeltes Label — oben kleine grüne
       Kennzeichnung "HEIMATPLATZ", unten Clubname fett (1 Zeile, Ellipsis).
       Überschreibt das Standard-Label damit die Hierarchie funktioniert.
       width: 100% ist wichtig, damit die Ellipsis am Spaltenrand greift. */
    .shelf-item.home .label.label-stacked {
      -webkit-line-clamp: unset;
      display: block;
      width: 100%;
      max-width: 100%;
      min-height: calc(2 * 1.25em);
      overflow: hidden;
      text-align: center;
    }
    .label-kicker {
      display: block;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--primary);
      line-height: 1.2;
    }
    .label-name {
      display: block;
      font-size: 11px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.2;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Plus-Coin-Label: "Coin" fett, "(Platz hinzufügen)" dezenter in Klammern.
       Gleiche 2-Zeilen-Höhe wie andere Labels. */
    .shelf-item.add .label {
      line-height: 1.2;
    }
    .shelf-item.add .label-hint {
      color: var(--text-muted);
      font-weight: 500;
      display: block;
    }

    /* Toast — dezente, kurz sichtbare Bestätigung am unteren Rand */
    .toast {
      position: fixed;
      left: 50%;
      bottom: calc(100px + env(safe-area-inset-bottom, 0px));
      transform: translateX(-50%);
      background: rgba(30, 40, 34, 0.95);
      color: #fff;
      padding: 10px 18px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      box-shadow: 0 6px 16px rgba(0,0,0,0.2);
      z-index: 200;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s, transform 0.25s;
    }
    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(-4px);
    }

    /* ==========================================
       SCREEN 5 — COIN DETAIL
       --------------------------------------------------------
       Hero-Block (Coin + Clubname + Region/Land) wurde bewusst kompakter
       gehalten als ursprünglich (~22 % Höhe gespart), damit unten mehr
       Platz für Bewertung, Info, Runden bleibt. Der Coin nutzt zwar
       weiter die Klasse coin-xl, ist aber im Hero-Kontext kleiner.
       ========================================== */
    .coin-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 4px 24px 16px;
      text-align: center;
    }
    /* Coin-Hero-Override: 140px statt globaler 180px für coin-xl. Greift
       NUR im coin-detail-Hero — die anderen coin-xl-Verwendungen (Brand-
       Info-Screen, Empty-State) bleiben groß. Das 3D-PNG ist auf 600px
       gerendert und skaliert problemlos auf 140 herunter. */
    .coin-hero .coin-xl { width: 140px; height: 140px; font-size: 22px; }

    /* Coin-Hero-Wrapper: selbst tappbar (öffnet File-Picker für
       eigenes Coin-Bild). Cursor + dezenter :active-Feedback machen
       die Tappbarkeit subtil sichtbar, ohne extra Affordance-Element.
       inline-block, weil flex-Container den Wrapper sonst auf volle
       Breite zieht. */
    /* Coin-Detail-Sticky-Top: Header + Coin-Hero sitzen außerhalb des
       scrollenden Bereichs. Damit bleibt der Coin oben sichtbar, wenn
       der User durch lange Runden-Listen scrollt. flex-shrink: 0 hält
       die Höhe stabil; safe-area-Padding hält die iOS-Statusbar frei. */
    #screen-coin-detail .cd-sticky-top {
      flex-shrink: 0;
      background: var(--bg);
      padding-top: env(safe-area-inset-top, 0px);
    }
    #cd-coin-wrap {
      display: inline-block;
      cursor: pointer;
      transition: transform 0.08s ease;
    }
    #cd-coin-wrap:active { transform: scale(0.97); }
    /* Wrap-Outer ist Anker für den ×-Entfernen-Button. inline-block,
       damit er sich in der Coin-Hero-Flex-Spalte horizontal zentriert
       wie cd-coin-wrap vorher (align-items: center). position:relative,
       damit das × absolut rechts neben dem Flag-Pin sitzen kann. */
    .cd-coin-wrap-outer {
      position: relative;
      display: inline-block;
    }
    /* Reines graues × rechts neben dem Flag-Pin auf dem Hero-Coin.
       Kein Hintergrund, kein Border, kein Schatten — nur das Zeichen
       selbst. Höhe 24px wie die Flag-Pill (.coin-xl .coin-flag), und
       bottom: -4px exakt wie die Flag, damit beide vertikal auf einer
       Linie sitzen. Nur sichtbar wenn ein User-Bild gesetzt ist. */
    .cd-coin-image-x {
      position: absolute;
      bottom: -4px;
      right: -32px;
      width: 24px;
      height: 24px;
      background: none;
      border: 0;
      color: var(--text-muted);
      cursor: pointer;
      padding: 0;
      font-size: 22px;
      line-height: 24px;
      font-family: inherit;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 3;
    }
    .cd-coin-image-x.is-visible { display: flex; }

    /* Edit-Stift-Icon — gleiche Position wie das ×, aber sichtbar wenn
       NOCH KEIN User-Bild gesetzt ist. Kleiner Outline-Stift, signalisiert
       dem User dass der Coin tappbar ist und ein eigenes Bild bekommen
       kann. Klick öffnet wie der Coin selbst den File-Picker. */
    .cd-coin-image-edit {
      position: absolute;
      bottom: -4px;
      right: -32px;
      width: 24px;
      height: 24px;
      background: none;
      border: 0;
      color: var(--text-muted);
      cursor: pointer;
      padding: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 3;
    }
    .cd-coin-image-edit.is-visible { display: flex; }
    .cd-coin-image-edit svg { width: 16px; height: 16px; }
    /* Platzname im Coin-Detail-Hero (#cd-name): explizit Inter, weil
       global h1 → Fraunces gilt. Platznamen bleiben durchgehend neutral
       (siehe .round-row .course-name + .course-row .name). */
    .coin-hero h1 {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 22px;
      font-weight: 700;
      margin-top: 12px;
      letter-spacing: -0.01em;
    }
    .coin-hero .country { color: var(--text-muted); font-size: 14px; margin-top: 3px; }
    /* Klickbarer Klubname bei user-submitted Coins (b107). Wir setzen
       die Klasse in openCoinDetail nur dann, wenn der User editieren
       darf — sonst bleibt der h1 ein normaler Text-Header. Visueller
       Hint: Active-Feedback beim Tap, kein durchgehender Hover-Effekt
       (mobile-PWA hat eh kein Hover). */
    .coin-hero h1.is-editable {
      cursor: pointer;
      -webkit-tap-highlight-color: rgba(30,86,49,0.15);
    }
    .coin-hero h1.is-editable:active { opacity: 0.6; }

    /* Coin-Name-Edit-Modal (b106) — Center-Modal, weicher Backdrop. */
    .name-edit-overlay {
      position: fixed; inset: 0; z-index: 9000;
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
    }
    .name-edit-overlay[hidden] { display: none; }
    .name-edit-backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0.45);
    }
    .name-edit-card {
      position: relative;
      background: var(--surface, #fff);
      border-radius: 16px;
      padding: 22px 20px 18px;
      max-width: 420px;
      width: 100%;
      box-shadow: 0 18px 48px rgba(0,0,0,0.25);
    }
    .name-edit-card h3 {
      margin: 0 0 6px;
      font-size: 18px;
      font-weight: 700;
    }
    .name-edit-hint {
      margin: 0 0 14px;
      color: var(--text-muted);
      font-size: 14px;
      line-height: 1.4;
    }
    .name-edit-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-top: 16px;
    }

    /* Demo-Scan-Zeile direkt unter dem "Region · Land". Im Vor-Unlock-
       Zustand ein dezenter Aktions-Button (mintgrüner Pill mit Kamera-
       Icon), nach Unlock eine Confirm-Zeile + sichtbarer Reset-Link.
       Bewusst klein und unaufdringlich — Demo-Pfad, kein Hauptfeature. */
    .cd-demo {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .cd-demo-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      background: var(--primary-soft);
      color: var(--primary);
      border: 1px solid rgba(30, 86, 49, 0.18);
      cursor: pointer;
      transition: transform 0.08s, background 0.15s;
    }
    .cd-demo-btn:active { transform: scale(0.97); }
    .cd-demo-btn svg {
      width: 14px; height: 14px; stroke: currentColor; stroke-width: 2;
      fill: none; stroke-linecap: round; stroke-linejoin: round;
    }
    .cd-demo-status {
      font-size: 13px;
      color: var(--primary);
      font-weight: 600;
    }
    .cd-demo-reset {
      font-size: 12px;
      color: var(--text-muted);
      text-decoration: underline;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
    }

    /* Picker-Scan-Pill: zentrierter Demo-Scan-Einstieg in der Platz-Suche,
       direkt unter der Course-Liste und vor dem "Platz nicht dabei?"-Knopf.
       Visuell dieselbe Pille wie .cd-demo-btn, aber separat positioniert. */
    .picker-demo-scan {
      display: flex;
      justify-content: center;
      padding: 14px 20px 6px;
    }
    /* Demo-Scan ausgeschaltet im Profil → Picker-Scan-Pill komplett
       weg. Coin-Detail-Pille (#cd-demo) wird zusätzlich in JS
       ausgesteuert (siehe openCoinDetail). */
    body.demo-scan-off .picker-demo-scan { display: none; }

    /* Scorekarten-Scan-Demo: standardmäßig aus. Der OCR-Stub-Button
       im Add-Round-Formular erscheint nur, wenn der Toggle im Profil
       aktiviert wurde. Eigener Toggle, weil Scorekarten-OCR und
       QR-Code-Scan inhaltlich unabhängige Features sind. */
    body.scorecard-scan-off #ar-ocr-btn { display: none; }

    /* "Neue Runde hinzufügen"-Zeile: dunkelgrün, analog zum Plus-Coin auf
       der Startseite. Sitzt als erstes Element oben in der Runden-Liste,
       damit der erste Tap auf einem Club-Screen immer Richtung Eintragen
       führt. */
    .round-row.add-round {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
      cursor: pointer;
      transition: transform 0.08s ease;
    }
    .round-row.add-round:active { transform: scale(0.99); }
    .round-row.add-round .add-icon {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      margin-right: 4px;
    }
    .round-row.add-round .add-icon svg { width: 20px; height: 20px; stroke: #fff; }
    .round-row.add-round .add-label {
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.005em;
    }

    /* Section-Title — Ebene 4 der Typo-Hierarchie. Fraunces 700/20px,
       für In-Screen-Sektionen wie „Runden auf diesem Platz", „Meine
       Bewertung", „Meine Badges". Mehrfach pro Screen, nicht das
       Page-Heading (= .header-title 24px). */
    .section-title {
      font-family: 'Fraunces', Georgia, "Times New Roman", serif;
      font-size: 20px;
      font-weight: 700;
      padding: 8px 20px 12px;
      letter-spacing: -0.01em;
    }
    .round-list { padding: 0 20px 32px; display: flex; flex-direction: column; gap: 10px; }
    .round-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      transition: transform 0.1s;
    }
    .round-row:active { transform: scale(0.99); }
    .round-row .meta { flex: 1; min-width: 0; }
    /* Platzname in der Runden-Liste — bewusst Inter (neutral),
       NICHT Fraunces. Die Marken-Schrift gehört der App, der Platz-
       name ist Inhalt und soll davon optisch getrennt bleiben. */
    .round-row .course-name {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .round-row .date {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 2px;
      /* Lange Notizen werden in der Übersicht auf eine Zeile gekürzt,
         sonst läuft der Text ins Score-Feld rechts. Die volle Notiz
         ist weiterhin in der Runden-Detail-Ansicht sichtbar. */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* Score-Mood-Block rechts: Smiley groß oben, Score klein darunter.
       Frank-Designentscheidung: Spaß (Smiley) führt visuell, Zahl
       (Score) ist sachliche Sub-Info — passt zur Sammelbuch-DNA. */
    .round-row .score-mood {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      flex-shrink: 0;
      min-width: 38px;
    }
    .round-row .score {
      font-size: 14px;
      font-weight: 600;
      color: var(--primary);
      letter-spacing: -0.01em;
      text-align: center;
      line-height: 1.1;
    }
    .round-row .score small {
      font-size: 10px;
      color: var(--text-muted);
      font-weight: 500;
      display: block;
      text-align: center;
      letter-spacing: 0;
    }

    /* Kamera-Indikator: dezenter Hinweis, dass Fotos vorhanden sind.
       Bewusst nicht als CTA gestaltet — gleiche Farbe wie .date, kein
       Rahmen, kein Hintergrund. Nur ein stilles visuelles Lesezeichen.
       Generischer Selektor, damit das Pattern in mehreren Kontexten
       wiederverwendbar ist (Runden-Liste, Coin-Rating-Toggle). */
    .photo-indicator {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      color: var(--text-muted);
      flex-shrink: 0;
    }
    .photo-indicator svg { width: 16px; height: 16px; }

    /* Mood-Smiley als Hauptinfo rechts in der Runden-Zeile. Größer als
       der Score (Frank-Designentscheidung — Stimmung führt visuell).
       Im score-mood-Container gestapelt: Smiley oben, Score klein
       darunter. Bei nicht gesetzter Stimmung: Ghost-Smiley-SVG (Augen,
       kein Mund) — wartet sichtbar auf Eintrag. */
    .round-row .round-mood {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      font-size: 26px;
      line-height: 1;
      flex-shrink: 0;
    }
    /* Ghost-State: gleiches Emoji-Format wie ein gesetztes Mood,
       nur dezent ausgegraut. Subtiler Hinweis "noch keine Stimmung",
       ohne den Layout-Anker zu brechen. */
    .round-row .round-mood.is-ghost {
      opacity: 0.35;
    }

    /* Runden-Badges: dezente Mini-Chips in der ersten Zeile der Runde
       (neben dem Datum). Zeigen Spielfolge (z.B. "AB"), Loch-Modus
       ("9F"/"9B"/"9" — 18 wird nicht angezeigt, weil Default), und
       "T" für Turnierrunden. Keep kompakt — nichts lautes. */
    .round-row .round-badge {
      display: inline-block;
      margin-left: 6px;
      padding: 1px 6px;
      font-size: 10px;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      background: var(--border);
      border-radius: 4px;
      vertical-align: 2px;
    }
    .round-row .round-badge.turn {
      color: var(--primary);
      background: var(--primary-soft);
    }

    /* ==========================================
       SCREEN 6 — RUNDEN
       ========================================== */
    .filter-pills {
      display: flex;
      gap: 8px;
      padding: 4px 20px 8px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .filter-pills::-webkit-scrollbar { display: none; }

    /* Top-Bar des Runden-Tabs: außerhalb des scrollenden Containers,
       gleiche Pattern wie .ar-sticky-top. Header + Such-Bar + Filter +
       Sort sitzen dauerhaft oben, kein iOS-Sticky-Glitch. Safe-Area-
       Padding-Top hält die Statusbar/Dynamic Island frei. */
    .runden-sticky-top {
      flex-shrink: 0;
      background: var(--bg);
      padding-top: env(safe-area-inset-top, 0px);
    }

    /* Kombinierte Filter-/Sort-Zeile auf der Runden-Übersicht: Pills
       links, Pulldown rechts. Eine Zeile statt zwei separater Reihen
       — auf engen Bildschirmen (iPhone SE) bricht der Pulldown via
       flex-wrap in eine zweite Zeile um, mit margin-left: auto bleibt
       er dort rechtsbündig. Pills behalten ihre Original-Klasse mit
       overflow-x: auto, falls die drei Buttons selbst nicht reinpassen. */
    .runden-filter-sort {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      padding: 0 20px 16px;
    }
    .runden-filter-sort .filter-pills {
      flex: 1;
      min-width: 0;
      padding: 0;
    }
    .runden-sort-select {
      flex-shrink: 0;
      max-width: 130px;
      margin-left: auto;
    }
    .pill {
      flex-shrink: 0;
      padding: 8px 16px;
      border-radius: 20px;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      font-size: 14px;
      font-weight: 500;
      color: var(--text-muted);
      /* Smoother Crossfade beim Aktiv/Inaktiv-Wechsel — vorher
         war's ein harter Snap. 220 ms ease-out fühlt sich an wie
         iOS-Segmented-Control. font-weight ist nicht animierbar,
         der visuelle Sprung dort ist klein genug. */
      transition: background-color 220ms ease-out,
                  color 200ms ease-out,
                  border-color 220ms ease-out;
    }
    .pill.active {
      background: var(--primary-soft);
      color: var(--primary);
      border-color: var(--primary);
      font-weight: 600;
    }

    /* ==========================================
       SCREEN 7 — RUNDEN DETAIL
       ========================================== */
    .round-detail-hero {
      padding: 8px 24px 24px;
      text-align: center;
    }
    .round-detail-hero h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
    .round-detail-hero .date { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
    .big-score {
      margin: 20px auto;
      padding: 24px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      width: calc(100% - 40px);
      text-align: center;
    }
    .big-score .num { font-size: 56px; font-weight: 800; color: var(--primary); letter-spacing: -0.04em; line-height: 1; }
    .big-score .label { font-size: 13px; color: var(--text-muted); margin-top: 8px; letter-spacing: 0.06em; text-transform: uppercase; }

    .holes-grid {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      gap: 2px;
      padding: 0 12px;
      margin-bottom: 16px;
    }
    .holes-grid .hole {
      background: var(--surface);
      border: 1px solid var(--border);
      text-align: center;
      padding: 8px 2px;
      font-size: 11px;
    }
    .holes-grid .hole .n { font-size: 10px; color: var(--text-subtle); }
    .holes-grid .hole .s { font-size: 15px; font-weight: 700; color: var(--text); margin-top: 2px; }
    .holes-grid .hole .p { font-size: 11px; color: var(--primary); font-weight: 600; margin-top: 2px; }
    .holes-grid .hole.birdie { background: var(--primary-soft); border-color: var(--primary); }
    .holes-grid .hole.eagle { background: #C9E4D0; border-color: var(--primary); }

    .notes-box {
      margin: 20px;
      padding: 18px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      font-size: 16px;
      color: var(--text);
      line-height: 1.5;
    }
    .notes-box.empty { color: var(--text-subtle); font-style: italic; }

    .photo-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      padding: 0 20px 20px;
    }
    .photo-slot {
      aspect-ratio: 4/3;
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, #b5b1a7, #8a8778);
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.7);
      font-size: 14px;
    }
    .photo-slot.empty {
      background: var(--surface-2);
      border: 2px dashed var(--border-strong);
      color: var(--text-subtle);
    }

    /* ==========================================
       SCREEN 8 — PROFIL & EINSTELLUNGEN
       ========================================== */
    /* Profil-Header bleibt beim Scrollen sticky am oberen Rand kleben.
       Damit ist der Zurück-Button immer erreichbar — auch wenn der User
       in der Badge-Sektion ganz unten gescrollt hat. Background opaque,
       damit der scrollende Inhalt nicht durchscheint. */
    #screen-profil .header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
    }
    /* ===== Identity-Karte: Login-Dot + Name + Email + Abmelden-Link =====
       Eine Zeile, kein doppelter Email-Block mehr. Name ist Button (tap to
       edit) mit Stift-Icon dahinter. Abmelden ist Text-Link, kein Button. */
    .pf-identity-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      margin: 0 16px 8px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
    }
    .pf-auth-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
      background: #ccc;
    }
    /* Eingeloggt: grüner Dot. Ausgeloggt: roter Dot (durch pf-auth-out). */
    .pf-identity-card.pf-auth-in  .pf-auth-dot { background: var(--primary); }
    .pf-identity-card.pf-auth-out .pf-auth-dot { background: #c75a3a; }

    .pf-identity-text {
      flex: 1;
      min-width: 0; /* damit text-overflow auf Children greift */
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    /* Real-Name als Button-Look: kein Default-Button-Styling, Cursor zeigt
       Editierbarkeit. Hover/Active werden subtil hervorgehoben. */
    .pf-real-name-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text);
      font: inherit;
      text-align: left;
      max-width: 100%;
    }
    .pf-real-name-text {
      font-size: 17px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.01em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }
    /* Placeholder-State: wenn Name noch nicht gesetzt → dezenter Text. */
    .pf-real-name-text.is-placeholder {
      color: var(--text-subtle);
      font-weight: 500;
    }
    .pf-real-name-edit {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      color: var(--text-muted);
      opacity: 0.75;
      transition: opacity 0.15s;
    }
    .pf-real-name-btn:active .pf-real-name-edit { opacity: 1; }
    .pf-real-name-btn:active .pf-real-name-text { color: var(--primary); }

    .pf-email {
      font-size: 13px;
      color: var(--text-muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Abmelden/Anmelden als dezenter Text-Link, nicht als wuchtiger Button. */
    .pf-auth-link {
      flex-shrink: 0;
      padding: 4px 0;
      background: none;
      border: none;
      color: var(--primary);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      letter-spacing: 0.01em;
    }
    .pf-auth-link:hover { opacity: 0.85; }
    .pf-identity-card.pf-auth-out .pf-auth-link { color: var(--primary); }

    /* ===== Sammler-Statistik (Profil) ===== */
    /* Wrapper: Toggle-Card + Body in EINEM Container, damit's wie eine
       zusammenhängende Karte aussieht. Goldener Rand + warmer Glow:
       die Statistik soll wie eine kleine Urkunde wirken, hebt sich vom
       Profil-Block visuell ab. Border via Gradient von dunklem zu hellem
       Gold, Glow als sanfter Schatten-Halo. */
    .pf-stats-wrap {
      position: relative;     /* Anker für den absolut platzierten Share-Button */
      margin: 8px 16px 0;
      background: var(--surface);
      border: 2px solid var(--coin-gold-mid);
      border-radius: 12px;
      overflow: hidden;
      box-shadow:
        0 0 0 1px var(--coin-gold-light) inset,
        0 2px 8px rgba(201, 169, 97, 0.18);
    }
    /* Share-Button (Sammlerpass als Bild teilen). Oben rechts in der Karte,
       dezent gefärbt — soll präsent sein, aber nicht den Hero stehlen. */
    .pf-stats-share-btn {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid var(--border);
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: color 0.15s, background 0.15s;
      padding: 0;
      z-index: 2;
    }
    .pf-stats-share-btn:hover {
      color: var(--primary);
      background: rgba(255, 255, 255, 0.95);
    }
    .pf-stats-share-btn svg {
      width: 18px;
      height: 18px;
    }
    .pf-stats-share-btn:disabled {
      opacity: 0.5;
      cursor: wait;
    }
    /* Inline-SVG-Icons für die Detail-Heads (Pin / Globus) — eigene
       Grafiken statt Emojis, damit der Sammlerpass beim Export als
       PNG auf jedem Device identisch aussieht (Emojis variieren stark
       zwischen iOS/Android/Windows). Primary-getintet, gleich groß wie
       die alten Emoji-Glyphen. */
    .pf-stats-icon {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
    }
    .pf-stats-icon svg {
      width: 18px;
      height: 18px;
    }

    /* Detail-Body: vertical Stack mit gleichmäßigem Abstand. WICHTIG:
       hidden-Attribut muss display:none erzwingen (sonst überschreibt display:flex). */
    .pf-stats-body {
      padding: 14px 16px 16px;
      flex-direction: column;
      gap: 20px;
    }
    .pf-stats-body:not([hidden]) {
      display: flex;
    }

    /* Sammlerpass-Karte: oben Brand+Untertitel+Headline+Silber/Gold,
       Mehr-Body unten (Bundesländer/Länder). Padding mehr top weil
       die Brand-Zeile als "Briefkopf" funktioniert. */
    .pf-stats-head {
      padding: 20px 16px 14px;
    }
    /* Hero-Zeile (Sammlerpass V4): prominente Coins-Zahl + Wortmarke
       "Golfercoins". Zahl wird zum visuellen Anker der Karte, Wortmarke
       sekundär daneben — wie ein Diplom-Eintrag. */
    .pf-stats-hero {
      display: flex;
      align-items: baseline;
      gap: 10px;
      flex-wrap: wrap;
    }
    .pf-stats-hero-num {
      /* Inter ExtraBold (800) — fetter als die anderen Zahlen in der Karte
         (700), damit die Hero-Zahl optisch das Gewicht der Fraunces-
         Wortmarke daneben mithält. Fraunces ist bei 700 schon visuell
         "fetter" als Inter 700 — daher der eine Weight-Schritt hoch. */
      font-size: 32px;
      font-weight: 800;
      color: var(--primary);
      line-height: 1;
    }
    .pf-stats-hero-wordmark {
      font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
      font-size: 32px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.01em;
      line-height: 1;
    }
    .pf-stats-hero-wordmark .accent {
      color: var(--primary);
    }
    /* Headline-Satz: prominent, "Frank Stadthöwer hat insgesamt X Coins …".
       Etwas mehr top-margin, weil Brand-Zeile jetzt direkt darüber sitzt
       (kein Subtitel mehr als Puffer dazwischen). 16px Text, damit Silber/
       Gold/Bundesländer/Länder alle auf demselben Label-Größe sitzen. */
    .pf-stats-headline {
      margin-top: 18px;
      font-size: 16px;
      color: var(--text);
      line-height: 1.45;
    }
    /* Period-Wort ("insgesamt" / "2026") im Headline — subtil hervorgehoben,
       damit klar ist, dass es vom Top-Toggle abhängt. */
    .pf-stats-period-word {
      font-weight: 600;
      color: var(--text);
    }
    /* Tier-Row: Silber/Gold-Chunks linksbündig nebeneinander.
       16px Labels — gleich groß wie Headline-Text und Bundesländer/
       Länder-Heads (einheitliches Label-Niveau). Zahlen kommen über
       .pf-stats-tier-chunk .pf-stats-num auf 18px. */
    .pf-stats-tier-row {
      margin-top: 14px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 24px;
      font-size: 16px;
      color: var(--text);
    }
    /* Mehr-Toggle in eigener Zeile, rechtsbündig — knapp unter Tier-Row,
       damit kein leeres Loch entsteht. */
    .pf-stats-more-row {
      margin-top: 2px;
      display: flex;
      justify-content: flex-end;
    }
    /* Coin-Stack mit echten Mini-Coins, leicht versetzt für Tiefe.
       Nutzt .coin.coin-sm (44x44) wie in Runden-Übersicht für 1:1-Optik. */
    .pf-stats-coin-stack {
      position: relative;
      flex-shrink: 0;
      height: 44px;
      width: 92px;
    }
    .pf-stats-coin-stack .coin {
      position: absolute;
      top: 0;
      transform: none;
    }
    .pf-stats-coin-stack .coin:nth-child(1) { left: 0;  z-index: 1; }
    .pf-stats-coin-stack .coin:nth-child(2) { left: 12px; z-index: 2; }
    .pf-stats-coin-stack .coin:nth-child(3) { left: 24px; z-index: 3; }
    .pf-stats-coin-stack .coin:nth-child(4) { left: 36px; z-index: 4; }
    .pf-stats-coin-stack .coin:nth-child(5) { left: 48px; z-index: 5; }
    /* Empty-State: leere gestrichelte Kreise wenn noch keine Coins. */
    .pf-stats-coin-stack.is-empty .coin {
      background: var(--bg) !important;
      background-image: none !important;
      border-style: dashed;
      border-color: var(--border) !important;
      box-shadow: none;
      opacity: 0.45;
    }
    .pf-stats-coin-stack.is-empty .coin .brand-g { opacity: 0.35; }

    .pf-stats-line {
      display: flex;
      align-items: baseline;
      gap: 6px;
      padding: 3px 0;
      font-size: 15px;
      color: var(--text);
      line-height: 1.4;
    }
    .pf-stats-icon-emoji {
      flex-shrink: 0;
      width: 18px;
      text-align: center;
      font-size: 15px;
    }
    .pf-stats-text { flex: 1; }
    .pf-stats-name {
      font-weight: 600;
      color: var(--primary);
    }
    /* Hauptzahlen: prominent, größer als der Begleittext (siehe :where-Override
       für die Detail-Zeilen wo's etwas kleiner sein soll). */
    .pf-stats-num {
      font-weight: 700;
      color: var(--primary);
      font-size: 18px;
    }
    /* Untere Zeile: Period-Pills links, Mehr-Button rechts (space-between) */
    .pf-stats-bottom-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
    }
    .pf-stats-period-row {
      display: flex;
      gap: 8px;
    }
    /* Mehr-Toggle: dezenter Text-Link mit Pfeil, rechts */
    .pf-stats-more {
      padding: 4px 0;
      background: none;
      border: none;
      color: var(--primary);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .pf-stats-more:hover { opacity: 0.85; }
    .pf-stats-wrap.is-open .pf-stats-chevron { transform: rotate(180deg); }
    /* Mehr-Body (Bundesländer/Länder) bekommt wenn sichtbar einen oberen
       Trenner zur Tier-Row. */
    .pf-stats-body:not([hidden]) {
      border-top: 1px solid var(--border);
    }
    .pf-stats-chevron {
      display: inline-block;
      transition: transform 0.2s;
      font-size: 12px;
      color: var(--text-muted);
    }

    /* ===== Detail-Body: 2 visuelle Blöcke (Bundesländer / Länder) =====
       Silber/Gold-Tier-Zeile lebt jetzt im Head, die Detail-Blöcke
       sind nur noch Bundesländer + Länder. Einheitliche Label-Größe
       16px, Counts 18px — siehe .pf-stats-detail-num-Override. */
    .pf-stats-tier-chunk {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .pf-stats-tier-chunk .pf-stats-num {
      font-size: 18px;
    }
    .pf-stats-tier-lbl {
      color: var(--text);
    }
    /* Tier-Coin: echte Silber-/Gold-Münze in Hero-Stack-Größe (44px),
       gerendert über brandGSvg-Helper. */
    .pf-stats-tier-coin {
      display: inline-flex;
      flex-shrink: 0;
    }

    /* Detail-Block: Titel-Zeile + Inhalt darunter. Mehr Luft zwischen
       Head und Pills (10px statt 8px). */
    .pf-stats-detail-block {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    /* Detail-Head: prominenter Untertitel. Begriff in text-color/16px,
       Anzahl davor in primary/bold/16px. Beide gleich groß damit "4
       Bundesländer" wie eine zusammenhängende Überschrift wirkt. */
    .pf-stats-detail-head {
      display: flex;
      align-items: baseline;
      gap: 8px;
      font-size: 16px;
      color: var(--text);
    }
    .pf-stats-detail-head .pf-stats-icon-emoji,
    .pf-stats-detail-head .pf-stats-icon {
      align-self: center;
      font-size: 16px;
    }
    .pf-stats-detail-title {
      color: var(--text);
      font-weight: 500;
    }
    .pf-stats-detail-title .pf-stats-detail-num {
      color: var(--primary);
      font-weight: 700;
      font-size: 18px;     /* gleich groß wie alle anderen Zahlen (47, 10, 32, 14) */
      margin-right: 4px;
    }

    /* Pills (Bundesländer) + Flag-Chips (Länder) — IDENTISCHER Stil:
       leicht grauer Hintergrund, dezenter Border, kleinere Schrift damit
       die Pills nicht die Überschrift überstrahlen (Hierarchie). */
    .pf-stats-pills,
    .pf-stats-flags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .pf-stats-pill,
    .pf-stats-flag-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 11px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 13px;
      color: var(--text);
      line-height: 1.3;
    }
    .pf-stats-pill-count,
    .pf-stats-flag-chip-count {
      color: var(--primary);
      font-weight: 700;
      font-size: 12px;
    }
    .pf-stats-flag-chip-flag {
      font-size: 14px;
      line-height: 1;
    }
    .pf-stats-empty {
      font-size: 13px;
      color: var(--text-subtle);
      padding: 2px 0;
    }


    .profil-stat-row {
      display: flex;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      margin: 20px;
      overflow: hidden;
    }
    .profil-stat {
      flex: 1;
      text-align: center;
      padding: 14px 8px;
    }
    .profil-stat + .profil-stat { border-left: 1px solid var(--border); }
    .profil-stat .v { font-size: 20px; font-weight: 700; color: var(--primary); letter-spacing: -0.02em; line-height: 1; }
    .profil-stat .l { font-size: 11px; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.02em; }
    /* Phase 2c: HCP-Stat zeigt jetzt einen Bucket-Range („0,0 – 9,9"
       etc.), das ist deutlich länger als die alte 4-stellige Zahl.
       Eigene kleinere Schriftgröße, damit der Wert nicht aus dem
       Stat-Slot herausläuft. */
    .profil-stat .v#pf-stat-hcp {
      font-size: 14px;
      white-space: nowrap;
      letter-spacing: -0.01em;
    }

    .badges-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      padding: 0 20px 8px;
    }

    /* ==========================================
       BADGE-AKKORDEON IM PROFIL
       Pro Kategorie eine Zeile (kompakter Header) mit Aufklapp-Pfeil.
       Aufgeklappt zeigt sie alle 4 Tier-Stufen als Liste mit Status
       (✓/○) und Progress. Bei (p.a.)-Kategorien zusätzlich der aktuelle
       Saison-Stand.
       ========================================== */
    .badges-list {
      padding: 0 20px 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .badge-row {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
    }
    .badge-row-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      cursor: pointer;
      user-select: none;
    }
    .badge-row-head .badge-icon {
      width: 36px; height: 36px;
      margin: 0;
      flex-shrink: 0;
    }
    .badge-row-head .badge-icon svg { width: 18px; height: 18px; }
    .badge-row-name {
      flex: 1;
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }
    .badge-row-tier {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      flex-shrink: 0;
    }
    .badge-row-chevron {
      flex-shrink: 0;
      color: var(--text-subtle);
      transition: transform 200ms ease;
    }
    .badge-row.open .badge-row-chevron {
      transform: rotate(90deg);
    }
    .badge-row-body {
      padding: 0 14px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      border-top: 1px solid var(--border);
    }
    .badge-row:not(.open) .badge-row-body {
      display: none;
    }
    .badge-row-body-pa {
      font-size: 12px;
      color: var(--text-muted);
      padding: 8px 0 4px;
      line-height: 1.4;
    }
    .badge-tier-line {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 0;
      font-size: 13px;
    }
    .badge-tier-marker {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
    }
    .badge-tier-marker.achieved {
      color: #fff;
    }
    .badge-tier-marker.achieved.tier-bronze  { background: #C48452; }
    .badge-tier-marker.achieved.tier-silber  { background: #A4A4AC; color: #1F1F23; }
    .badge-tier-marker.achieved.tier-gold    { background: #E9C158; color: #4A340A; }
    .badge-tier-marker.achieved.tier-diamant { background: #6FB8E0; color: #0F3858; }
    .badge-tier-marker.locked {
      background: var(--surface-2);
      color: var(--text-subtle);
      border: 1px solid var(--border);
    }
    .badge-tier-text {
      flex: 1;
      color: var(--text);
    }
    .badge-tier-text .threshold {
      color: var(--text-muted);
      font-size: 12px;
    }
    .badge-tier-progress {
      flex-shrink: 0;
      font-size: 12px;
      color: var(--text-muted);
    }
    .badge-tier-progress.achieved {
      color: var(--primary);
      font-weight: 600;
    }
    .settings-list {
      padding: 0 20px;
    }
    .settings-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      margin-bottom: 16px;
    }
    .setting-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 18px;
      min-height: 56px;
      font-size: 16px;
    }
    .setting-row + .setting-row { border-top: 1px solid var(--border); }
    .setting-row .val { color: var(--text-muted); font-size: 15px; }

    /* Collapsible-Variante einer settings-section: <details>-Wrap mit
       <summary> als Header-Zeile. Wir nutzen das für die Admin-/Demo-
       Buttons, die im Alltag nicht sichtbar sein sollen, aber für
       Tester / Mock-Demos verfügbar bleiben müssen. Default zugeklappt.
       Chevron rotiert beim Aufklappen 90°. */
    details.settings-section { padding: 0; }
    details.settings-section > summary.setting-row {
      list-style: none;
      cursor: pointer;
      user-select: none;
      color: var(--text-muted);
    }
    details.settings-section > summary.setting-row::-webkit-details-marker { display: none; }
    details.settings-section > summary.setting-row::marker { content: ''; }
    details.settings-section > summary.setting-row .admin-chev {
      transition: transform 0.2s ease;
      color: var(--text-subtle);
    }
    details.settings-section[open] > summary.setting-row .admin-chev {
      transform: rotate(90deg);
    }
    /* Trennlinie zwischen Summary und erstem Inhalts-Row, wenn aufgeklappt. */
    details.settings-section[open] > summary.setting-row {
      border-bottom: 1px solid var(--border);
    }

    /* Golfdaten-Block im Profil.
       Wiederverwendet die settings-row-Kachel, aber einige Zeilen brauchen
       breitere inline-Controls (Segment-Toggle, HCP-Input, Tee-Dots). Die
       Label-Spalte bleibt konstant links, die Wert-Spalte rechts skaliert. */
    .setting-row .pf-label { flex-shrink: 0; }
    .setting-row.pf-row-ctl {
      gap: 16px;
    }
    .setting-row.pf-row-ctl .pf-ctl {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      min-width: 0;
    }
    /* 2-Segment-Toggle (Mann/Frau, Schläge/Stableford). Fixe kompakte Breite
       statt flex:1, damit der Block nicht die ganze Zeilenbreite ausfüllt. */
    .pf-seg {
      display: inline-flex;
      gap: 6px;
    }
    .pf-seg-btn {
      padding: 7px 14px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      font-family: inherit;
      transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease, transform 0.05s ease;
    }
    .pf-seg-btn:active { transform: scale(0.98); }
    /* Selection-State: Mint-Outline statt voll-gefülltem Dunkelgrün.
       Bewusster Kontrast zu Action-Buttons (die als einzige
       voll-gefüllt dunkelgrün bleiben — „tap me to commit"). */
    .pf-seg-btn.active {
      background: var(--primary-soft);
      color: var(--primary);
      border-color: var(--primary);
      font-weight: 600;
    }
    /* Pulldown im Profil — dezent, ohne den Native-Look komplett zu
       übermalen. Pfeil bleibt als nativer System-Indicator (Senior-
       Friendly: das Native-Verhalten ist ein bekanntes Mental-Modell). */
    .pf-select {
      padding: 7px 28px 7px 12px;
      border: 1px solid var(--border-strong);
      background: var(--surface);
      color: var(--text);
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      font-family: inherit;
      max-width: 220px;
      -webkit-appearance: menulist;
      appearance: menulist;
    }
    .pf-select:focus {
      outline: none;
      border-color: var(--primary);
    }

    /* Handicap-Eingabe. Kompaktes Zahlenfeld, rechtsbündiger Wert, keine
       Browser-Spin-Buttons (sehen auf mobile unruhig aus). */
    .pf-hcp-input {
      width: 72px;
      padding: 7px 10px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: var(--radius-sm);
      font-size: 15px;
      font-weight: 500;
      text-align: right;
      font-family: inherit;
      -moz-appearance: textfield;
    }
    .pf-hcp-input::-webkit-outer-spin-button,
    .pf-hcp-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .pf-hcp-input:focus {
      outline: none;
      border-color: var(--primary);
    }
    /* Tee-Dots im Profil — identische Optik wie im Add-Round, aber etwas
       enger gesetzt, damit sie in die Settings-Row passen. */
    .pf-tees {
      display: inline-flex;
      gap: 8px;
      align-items: center;
    }
    .pf-tee-dot {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1.5px solid rgba(0, 0, 0, 0.15);
      padding: 0;
      cursor: pointer;
      transition: transform 0.1s ease, box-shadow 0.1s ease;
      flex-shrink: 0;
    }
    .pf-tee-dot.pf-tee-weiss { border-color: rgba(0, 0, 0, 0.25); }
    .pf-tee-dot:active { transform: scale(0.92); }
    .pf-tee-dot.active {
      transform: scale(1.14);
      box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
    }
    /* Heimatplatz-Zeile: rechts Clubname + Chevron wie bei den bestehenden
       Wert-Zeilen (Sprache, Erscheinungsbild). Ghost-State, wenn kein
       Heimatplatz gesetzt ist. */
    .pf-home-val {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--text-muted);
      font-size: 15px;
    }
    .pf-home-val.is-set { color: var(--text); }
    .pf-home-val svg { flex-shrink: 0; color: var(--text-muted); }
    .pf-row-tap { cursor: pointer; }
    .pf-row-tap:active { background: var(--border); }
    .toggle {
      width: 50px; height: 30px;
      background: var(--border-strong);
      border-radius: 15px;
      position: relative;
      flex-shrink: 0;
      transition: background 0.15s;
    }
    .toggle.on { background: var(--primary); }
    .toggle::after {
      content: '';
      position: absolute;
      top: 3px; left: 3px;
      width: 24px; height: 24px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
      transition: transform 0.15s;
    }
    .toggle.on::after { transform: translateX(20px); }

    .danger-section { padding: 8px 20px 28px; text-align: center; }
    .danger-section .btn-danger { width: 100%; font-weight: 500; min-height: 48px; }

    /* ===== Sync-Status-Sub-Zeile (b83, Task #247 Stufe 2 — Relocation) =====
       Direkt unter der Email in der Identity-Karte. Default: 11px grau,
       same Stil wie Email selbst — wird quasi „unsichtbarer Footer".
       Stale-Variante: hellrot, klar als Hinweis lesbar, aber weiterhin
       inside-Card (kein extra Banner-Container). */
    .pf-sync-status { margin-top: 4px; }
    .pf-sync-status[hidden] { display: none; }
    .pf-sync-line { font-size: 11px; color: var(--text-subtle); line-height: 1.4; }
    .pf-sync-status.is-stale .pf-sync-line { color: #b34141; font-weight: 500; }
    .pf-sync-line strong { font-weight: 600; }
    /* Freistehende Variante (b97): wenn der Block direkt im Profil-
       Scroll sitzt (nicht innerhalb der Identity-Card), braucht er
       eigenes seitliches Padding damit der Text nicht am Bildrand klebt.
       Plus etwas mehr Top-Margin als visueller Abstand zur Einstellungen-
       Sektion darüber. */
    .pf-sync-status-bottom {
      margin-top: 18px;
      padding: 0 22px 6px;
      text-align: center;
    }

    /* Info-Screen Sticky-Header — gleiche Pattern wie .ar-sticky-top
       und .runden-sticky-top. Header (Zurück) sitzt außerhalb des
       scrollenden Containers und bleibt dauerhaft sichtbar, ohne
       iOS-Safari Repaint-Glitches. Safe-Area-Padding hält Statusbar
       und Dynamic Island frei. */
    .info-sticky-top,
    .picker-sticky-top {
      flex-shrink: 0;
      background: var(--bg);
      padding-top: env(safe-area-inset-top, 0px);
    }

    /* Info-Screen-Hero: kompaktes horizontales Layout statt großem
       zentriertem Coin. Schlichtes G-Monogramm links, Title + Claim
       rechts daneben. Konsistent zur Sammlung-Startseite, wo der
       Brand-Slot oben links auch das pure G ohne Coin-Frame trägt. */
    /* b94: Info-Seite ohne großen Hero. Brand-Lockup sitzt im Header
       in gleicher Größe wie auf der Sammlung-Startseite (Brand-Guide
       konform 1.10× / 0.30×). info-hero/info-logo Regeln aus b93 sind
       nicht mehr im Einsatz, bleiben aber als Legacy-Container falls
       irgendein Code-Pfad das Element noch referenziert. */
    .info-hero, .info-logo { display: none; }
    /* Brand-Lockup im Info-Header — gleiche Pixel-Werte wie das
       Sammlung-Header-Lockup (Wortmarke 26px Fraunces, Logo 29px,
       Gap 8px). Hier nicht klickbar, deshalb kein Button-Wrapper. */
    .info-sticky-top .header-brand {
      gap: 8px;
    }
    .info-sticky-top .header-brand .header-brand-logo {
      width: 29px;
      height: 29px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      flex-shrink: 0;
    }
    .info-sticky-top .header-brand .header-brand-logo svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .brand-name-info {
      font-family: 'Fraunces', Georgia, "Times New Roman", serif;
      font-size: 26px;
    }

    /* Seiten-Titel als ruhige H1 unter dem Header. Größe matched die
       Section-h2 in den Info-Boxen (20px), damit der Title als sanfter
       Auftakt zur Sektionen-Liste wirkt, nicht als zweiter Hero.
       Zweizeilig: erste Zeile dunkel ('Dein digitales Sammelbuch.'),
       zweite Zeile Markengrün ('Kurz erklärt.'). Mehr Bottom-Padding
       für visuellen Abstand zur ersten info-section. */
    .info-page-title {
      padding: 12px 24px 22px;
    }
    .info-page-title-text {
      font-family: 'Fraunces', Georgia, "Times New Roman", serif;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--text);
      line-height: 1.3;
      margin: 0;
    }
    .info-page-title-text .accent { color: var(--primary); }
    /* info-claim wird nicht mehr unter dem Page-Titel verwendet, bleibt
       als CSS-Regel falls historische Aufrufer noch existieren. */
    .info-claim {
      font-size: 14px;
      color: var(--text-muted);
      margin-top: 6px;
      line-height: 1.4;
    }
    /* Info-Sektionen als eigenständige Karten — heller Surface-
       Hintergrund mit dezentem Schatten und Border-Radius, schwebend
       auf dem Cream-Body. Ersetzt die alte Trenner-Linien-Variante,
       gibt jeder Sektion einen klaren Lese-Anker und passt zur
       Sammelbuch-Marke. Funktioniert für <div class="info-section">
       wie auch <details class="info-section info-section-collapsible">
       identisch (Karte schließt mit auf/zu). */
    .info-section {
      padding: 18px 22px 22px;
      margin: 0 16px;
      background: var(--surface);
      border-radius: 16px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(20, 20, 20, 0.04);
    }
    /* Sektion-Headline: Fraunces 700/20 px (Section-Title-Niveau der
       Typo-Hierarchie), mit kleinem Outline-Icon links. Konsistent mit
       .section-title und .ar-head-row. Hierarchie: Brand-Lockup 30 px →
       Page-Title 24 px → Section-Title 20 px → Body 15 px. */
    .info-section h2 {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--text);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      text-transform: none;
      line-height: 1.15;
    }
    .info-section-icon {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      color: var(--primary);
    }
    .info-section p {
      font-size: 15px;
      line-height: 1.55;
      color: var(--text-muted);
      margin: 0;
    }
    .info-section p strong { color: var(--text); font-weight: 600; }
    /* Karten-Abstände: keine Trenn-Linie mehr, stattdessen vertikaler
       Margin zwischen aufeinanderfolgenden Karten. Die erste Sektion
       direkt unter dem Hero bekommt einen größeren Top-Margin, damit
       der Übergang vom Hero zur ersten Karte sichtbar ist. */
    /* Silber & Gold-Visual: zwei Coins nebeneinander mit Beschriftung,
       als ergänzende Visualisierung zur Text-Erklärung. */
    .info-tier-pair {
      display: flex;
      gap: 28px;
      justify-content: center;
      align-items: flex-start;
      margin-top: 14px;
    }
    .info-tier-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .info-tier-item img {
      width: 64px;
      height: 64px;
      object-fit: contain;
      display: block;
    }
    .info-tier-item span {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .info-section + .info-section,
    .info-section + details.info-section,
    details.info-section + .info-section {
      margin-top: 14px;
    }
    /* Collapsible-Variante (App-auf-Startseite). Nutzt natives
       <details>/<summary>; Chevron rotiert beim Aufklappen. Marker
       wird auf 0 gesetzt, weil Browser sonst den Default-Pfeil zeigt. */
    details.info-section-collapsible {
      /* erbt padding/border von .info-section */
    }
    .info-section-summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 12px;
      user-select: none;
      padding: 0;
      margin: 0;
      font-family: 'Fraunces', Georgia, "Times New Roman", serif;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--text);
      line-height: 1.15;
    }
    .info-section-summary::-webkit-details-marker { display: none; }
    .info-section-summary::marker { content: ''; }
    .info-section-summary-title {
      flex: 1;
    }
    .info-section-chev {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      color: var(--text-muted);
      transition: transform 0.2s ease;
    }
    details.info-section-collapsible[open] .info-section-chev {
      transform: rotate(180deg);
    }
    .info-collapsible-body {
      padding-top: 14px;
    }
    .info-collapsible-intro {
      font-size: 15px;
      line-height: 1.55;
      color: var(--text-muted);
      margin: 0 0 14px;
    }

    /* Install-Section: Plattform-spezifische Sichtbarkeit. data-platform
       Attribute markieren iOS- und Android-Varianten; die Klasse am
       <details> (platform-ios / platform-android) entscheidet welche
       gezeigt wird. Default-Klasse 'platform-ios' steht im HTML, JS
       überschreibt bei Android. */
    .install-section [data-platform="ios"],
    .install-section [data-platform="android"] {
      display: none;
    }
    .install-section.platform-ios [data-platform="ios"],
    .install-section.platform-android [data-platform="android"] {
      display: revert;
    }

    /* Standalone-Banner: nur sichtbar wenn .is-installed gesetzt ist
       (Boot-Detect erkennt App im standalone-Modus). Dezent grün mit
       Häkchen, bestätigt dem User passiv „du hast's installiert" und
       erklärt warum die Anleitung trotzdem im Info-Screen bleibt. */
    .install-installed-banner {
      display: none;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      margin-bottom: 14px;
      background: rgba(46, 122, 79, 0.08);
      border-radius: 8px;
      font-size: 13px;
      line-height: 1.4;
      color: var(--text);
    }
    .install-section.is-installed .install-installed-banner {
      display: flex;
    }
    .install-installed-banner svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      color: var(--primary);
      margin-top: 2px;
    }

    /* Plattform-Switcher: dezenter Text-Button am Ende des Akkordeons.
       Bewusst kein Tab-Cluster oder hervorgehobener Button — passive
       Hilfe, falls Auto-Detection daneben liegt oder die Anleitung
       für ein anderes Gerät gebraucht wird. */
    .install-platform-switch {
      text-align: center;
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid rgba(20, 20, 20, 0.06);
    }
    .install-platform-switch-btn {
      background: none;
      border: none;
      padding: 4px 8px;
      font-size: 12px;
      color: var(--text-muted);
      cursor: pointer;
      text-decoration: underline;
      text-decoration-color: rgba(20, 20, 20, 0.2);
      text-underline-offset: 2px;
      font-family: inherit;
    }
    .install-platform-switch-btn:hover {
      color: var(--text);
    }
    /* Drei Mechanik-Karten unter „So funktioniert's". Row-Layout:
       Text-Spalte links (Heading + Begleitzeile), Mini-Visual rechts
       als Wiedererkennungs-Anker (Coins/Sterne/Badges — wie auf der
       Landingpage). Dezenter Trenn-Strich zwischen den Karten, keiner
       nach der letzten. */
    .info-mini-cards {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 4px;
    }
    .info-mini-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 0;
      border-bottom: 1px solid var(--border);
    }
    .info-mini-card:first-child { padding-top: 4px; }
    .info-mini-card:last-child {
      padding-bottom: 0;
      border-bottom: none;
    }
    .info-mini-card-text {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .info-mini-card strong {
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
    }
    .info-mini-card span {
      font-size: 14px;
      line-height: 1.5;
      color: var(--text-muted);
    }
    /* Mini-Visual rechts in jeder Card. Fixe Breite (~96 px) damit alle
       drei Karten visuell die gleiche Kontur haben, egal wie unter-
       schiedlich der Inhalt ist. */
    .info-mc-visual {
      flex-shrink: 0;
      width: 96px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* Coins-Visual: drei Mini-Coins, leicht überlappend. Letzter ist
       Gold (Hinweis auf Tier-Mechanik). Die PNG-Coins haben intern
       4 % Padding für den Schatten — damit sind 28 px Containergröße
       und -10 px Überlapp ein guter Kompromiss zwischen Sichtbarkeit
       und Kompaktheit. */
    .info-mc-visual.coins {
      gap: 0;
    }
    .info-mc-coin {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      position: relative;
      filter:
        drop-shadow(0 1px 1px rgba(60, 50, 30, 0.20))
        drop-shadow(0 3px 6px rgba(60, 50, 30, 0.10));
    }
    .info-mc-coin + .info-mc-coin {
      margin-left: -10px;
    }
    /* Z-Index-Stapel: linke Coins vorne, rechte dahinter — natürliche
       Lese-Reihenfolge (links nach rechts), wie ein gestapelter Coin-Pfad. */
    .info-mc-coin:nth-child(1) { z-index: 5; }
    .info-mc-coin:nth-child(2) { z-index: 4; }
    .info-mc-coin:nth-child(3) { z-index: 3; }
    .info-mc-coin:nth-child(4) { z-index: 2; }
    .info-mc-coin:nth-child(5) { z-index: 1; }
    .info-mc-coin img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    /* Stars-Visual: 4 gefüllte + 1 leerer Stern in einer Reihe. Gleiche
       SVG-Logik wie auf der Landingpage. */
    .info-mc-visual.stars {
      gap: 1px;
    }
    .info-mc-visual.stars svg {
      width: 14px;
      height: 14px;
    }
    .info-mc-visual.stars svg.filled { fill: #E8B546; }
    .info-mc-visual.stars svg.empty  { fill: #D8CDB0; }
    /* Auszeichnungs-Visual: 5 Mini-Tier-Coins mit Schwelle als Zahl
       (3/10/25/50/100). Bronze/Silber/Gold farbig, Platin/Diamant ghost.
       Etwas größer als zuvor, weil 3-stellige "100" lesbar bleiben muss.
       Leicht überlappend für kompakte Plaketten-Anmutung. */
    .info-mc-visual.badges {
      gap: 0;
    }
    .info-mc-badge {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      border: 1px solid var(--border);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1;
      box-shadow:
        inset 0 1px 1.5px rgba(255, 255, 255, 0.5),
        inset 0 -1px 1.5px rgba(0, 0, 0, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.10);
    }
    .info-mc-badge + .info-mc-badge {
      margin-left: -6px;
    }
    /* Z-Index-Stapel: linke Coins vorne, rechte dahinter — natürliche
       Lese-Reihenfolge des Tier-Pfads (Bronze → Diamant). */
    .info-mc-badge:nth-child(1) { z-index: 5; }
    .info-mc-badge:nth-child(2) { z-index: 4; }
    .info-mc-badge:nth-child(3) { z-index: 3; }
    .info-mc-badge:nth-child(4) { z-index: 2; }
    .info-mc-badge:nth-child(5) { z-index: 1; }
    .info-mc-badge.tier-bronze {
      background: radial-gradient(circle at 30% 30%, #E8B488 0%, #C48452 55%, #8E5527 100%);
      border-color: #6E3F18;
      color: #4A2A0E;
    }
    .info-mc-badge.tier-silber {
      background: radial-gradient(circle at 30% 30%, #E8E8EC 0%, #B8B8C0 55%, #8A8A92 100%);
      border-color: #6A6A72;
      color: #2A2A30;
    }
    .info-mc-badge.tier-gold {
      background: radial-gradient(circle at 30% 30%, #FFE49C 0%, #E9C158 50%, #B58F2C 100%);
      border-color: #8C6A1E;
      color: #5A3F0A;
    }
    .info-mc-badge.locked {
      background: radial-gradient(circle at 30% 30%, #FAFAFB 0%, #E0E0E5 60%, #C8C8CE 100%);
      border-color: var(--border);
      color: #9A9AA0;
      opacity: 0.6;
    }
    /* Mood-Visual: 5 Smileys in einer Reihe — gleiche Reihenfolge wie
       die echten Mood-Buttons in der Add-Round-UI (😞→😄), damit User
       die Optik sofort wiedererkennt. */
    .info-mc-visual.mood {
      gap: 1px;
      width: auto;
    }
    .info-mc-mood {
      font-size: 14px;
      line-height: 1;
      filter: saturate(0.85);
    }
    /* Notiz-+-Foto-Visual: Pencil-Square + Kamera-Icon nebeneinander.
       Outline-Stil wie auf der Landing-Eintragen-Sektion. */
    .info-mc-visual.note-photo {
      gap: 8px;
    }
    .info-mc-visual.note-photo svg {
      width: 22px;
      height: 22px;
      color: var(--primary);
    }
    /* Score-Visual: kleines Mint-Pill mit Beispiel-Score „78". Mint
       statt Vollton-Grün, weil's eine Anzeige ist, kein CTA. */
    .info-mc-score-pill {
      padding: 4px 12px;
      border-radius: 999px;
      background: var(--primary-soft);
      color: var(--primary);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    /* Footnote (Asterisk-Hinweis) — kleiner Italic-Text, unterhalb der
       Karten-Liste. Gleiches Pattern wie auf der Landing. */
    .info-footnote {
      display: block;
      font-size: 12px;
      color: var(--text-subtle);
      font-style: italic;
      margin-top: 12px;
    }
    /* Mail-Link in der Beta-Sektion: grün gefärbt, ohne Unterstrich,
       damit der Tap-Trigger sichtbar bleibt ohne den Lesefluss zu
       brechen. */
    .info-section a {
      color: var(--primary);
      font-weight: 600;
      text-decoration: none;
    }
    .info-footer {
      padding: 18px 20px 32px;
      text-align: center;
      font-size: 12px;
      color: var(--text-subtle);
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
    }
    .info-footer-links {
      display: flex;
      gap: 14px;
      align-items: center;
    }
    .info-footer-link {
      padding: 6px 4px;
      font-size: 13px;
      color: var(--text-muted);
      background: none;
      border: none;
      cursor: pointer;
      font-weight: 500;
    }
    .info-footer-link:active { color: var(--primary); }

    .section-header {
      font-size: 13px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      font-weight: 600;
      padding: 20px 20px 10px;
    }
    .section-header .sym { margin-right: 6px; color: var(--accent); }
    /* Variante mit Action rechts (z.B. Statistik-Header mit Period-Toggle).
       Section-Titel links, beliebige Action rechts (Pills, Buttons, etc.). */
    .section-header--with-action {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .section-header--with-action .section-header-title {
      flex: 1;
      min-width: 0;
    }

    /* ==========================================
       SCREEN 10 — PLATZ SUCHEN
       ========================================== */
    .search-box {
      margin: 4px 20px 16px;
      padding: 12px 16px;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .search-box input { flex: 1; min-height: 32px; font-size: 16px; }
    /* b121: Hilfe-Text im Picker, fängt User die auf der Suche nach
       Runde-Eintragen sind. Dezent in Muted-Color, sitzt direkt unter
       der Suchleiste, vor der Treffer-Liste. */
    .picker-help-text {
      margin: -8px 20px 14px;
      padding: 0;
      font-size: 13px;
      line-height: 1.45;
      color: var(--text-muted);
    }
    .course-list { padding: 0 20px 24px; display: flex; flex-direction: column; gap: 10px; }
    .course-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
    }
    .course-row .info { flex: 1; min-width: 0; }
    /* Platzname im Picker — neutral wie in der Runden-Liste. */
    .course-row .name {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.01em;
    }
    .course-row .meta { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
    /* Picker-Action-Buttons rechts in jeder Listenzeile.
       Zwei klar unterscheidbare Touch-Targets:
       - .course-row-info-btn (Info ⓘ): zur Detail-Vorschau, dezent
       - .course-row-add-btn (Plus ⊕): direkt hinzufügen, in Brand-Grün
       Eintrag-Tap selbst führt ebenfalls zur Detail-Vorschau (= Default
       'sicher'), Plus ist die explizite Schnell-Aktion. */
    /* "✓ Schon in deiner Sammlung"-Hinweis im Picker.
       Dezenter Primary-Ton, klein, direkt unter der Meta-Zeile. */
    .course-row-collected-hint {
      color: var(--primary) !important;
      font-weight: 500;
      font-size: 12px !important;
      margin-top: 2px;
    }

    .course-row-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-shrink: 0;
    }
    .course-row-info-btn,
    .course-row-add-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      transition: transform 100ms ease;
    }
    /* Info-Button (ⓘ): Mint-Tönung in derselben Farbe wie die Info-
       Karte im Coin-Detail-Hero. Visuelle Verbindung „dieses Icon =
       jene Karte" — User landet beim Tap in einer Vorschau, die
       genau diese Mint-Tönung hat. ⓘ-Symbol selbst in Markengrün
       für klares „Info"-Signal. */
    .course-row-info-btn {
      background: #F4F8F0;
      color: var(--primary);
      border: 1px solid #DCE6D2;
    }
    .course-row-info-btn:active {
      background: #DCE6D2;
      transform: scale(0.94);
    }

    /* Ghost-Effekt für Coins im Picker — visuell signalisiert
       „noch nicht gesammelt, das ist eine Vorschau". Standard-Coins
       komplett ausgegraut (saturate 0). Gold-Tier-Coins behalten
       gedimmte Gold-Tönung — User sieht schon im Picker, dass das
       ein besonderer Coin wird. Greift NUR in der Listen-Ansicht;
       Coin-Detail-Preview-Hero bleibt voll gerendert. */
    .course-row .coin.coin-sm {
      filter: saturate(0) opacity(0.55);
    }
    .course-row .coin.coin-sm.coin-tier-gold {
      filter: saturate(0.55) opacity(0.7);
    }
    .course-row-add-btn {
      background: var(--primary);
      color: #fff;
      box-shadow: 0 2px 6px rgba(30, 86, 49, 0.30);
    }
    .course-row-add-btn:active {
      transform: scale(0.94);
      box-shadow: 0 1px 3px rgba(30, 86, 49, 0.40);
    }
    .course-row-info-btn svg,
    .course-row-add-btn svg {
      width: 18px;
      height: 18px;
      display: block;
    }
    .add-new-course {
      margin-top: 8px;
      border: 1px dashed var(--border-strong);
      background: transparent;
      color: var(--primary);
      font-weight: 600;
      justify-content: center;
      padding: 16px;
    }

    /* ==========================================
       SCREEN 11 — PLATZ ANLEGEN
       ========================================== */
    .form-group { padding: 0 20px 18px; }
    .form-label {
      font-size: 13px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      font-weight: 600;
      margin-bottom: 8px;
      display: block;
    }
    .form-label.required::after { content: ' *'; color: var(--danger); }
    .hint { font-size: 13px; color: var(--text-subtle); margin-top: 6px; line-height: 1.45; }
    /* Generischer Form-Input: Text-Input + Select. War zwischenzeitlich
       beim Auth-Refactor versehentlich entfernt worden — daher sah das
       Add-Course-Formular wie zwei kollidierende Elemente aus.
       Vereinheitlicht jetzt Höhe, Padding, Border, Background. */
    .input {
      width: 100%;
      min-height: 52px;
      padding: 14px 16px;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-md);
      font-size: 16px;
      font-family: inherit;
      color: var(--text);
      box-sizing: border-box;
      -webkit-appearance: none;
      appearance: none;
    }
    .input:focus {
      outline: none;
      border-color: var(--primary);
      background: var(--surface);
    }
    .input::placeholder { color: var(--text-subtle); }
    /* Select-Variante des Inputs: Native-Pulldown-Pfeil rechts via
       Background-Image, weil -webkit-appearance:none die System-Pfeile
       entfernt. */
    select.input {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6257' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 18px 18px;
      padding-right: 44px;
      cursor: pointer;
    }
    /* Wenn zwei Inputs in derselben form-group stapeln (z.B. Land-
       Pulldown + Anderes-Land-Freitext), kleiner Abstand dazwischen. */
    .input + .input { margin-top: 10px; }

    /* "Ähnliche Plätze gefunden"-Warnbox im Add-Course-Modal.
       Soll User vor Doubletten warnen wenn der Name an einen
       existierenden Platz erinnert. Zeigt Top-Treffer mit
       "Diesen Platz wählen"-Aktion. */
    .pa-similar {
      margin: -8px 20px 14px;       /* überlappt knapp mit form-group-Bottom */
      padding: 12px 14px;
      background: #fff8e6;          /* dezentes Warn-Gelb */
      border: 1px solid #e8c987;
      border-radius: var(--radius-md);
      font-size: 14px;
      line-height: 1.4;
    }
    .pa-similar-title {
      font-weight: 600;
      color: #6b4d00;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .pa-similar-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .pa-similar-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    .pa-similar-item-text { flex: 1; min-width: 0; }
    .pa-similar-item-name {
      font-weight: 500;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .pa-similar-item-meta {
      font-size: 12px;
      color: var(--text-muted);
    }
    .pa-similar-pick {
      flex-shrink: 0;
      padding: 6px 10px;
      background: var(--primary);
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }
    .pa-similar-pick:hover { opacity: 0.9; }

    .optional-collapsed {
      margin: 0 20px 16px;
      padding: 14px 18px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      font-size: 15px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    /* ==========================================
       SCREEN 12 — NEUE RUNDE (ADD ROUND)
       ==========================================
       Einfaches, progressives Formular. Philosophie:
       - Nur Platz + Datum sind pragmatisch nötig; alles andere optional.
       - Foto ist kein "Beweis" (Scorekarte), sondern ein freier
         Erinnerungs-Slot: Platz, Flight, Scorekarte — egal.
       - Score (Stableford + Schläge) ist eingeklappt, damit Menschen,
         die nur eine Runde eintragen wollen, nicht von Zahlen erschlagen
         werden. Wer mag, klappt es auf. */

    /* Kompakte Kopf-Zeile: "Neue Runde am [Datum-Picker]" inline.
       Spart gegenüber einem separaten Titel + Datum-Form-Group eine
       komplette Zeile. Page-Title-Niveau der Typo-Hierarchie
       (Fraunces 700/24px), weil das funktional die Screen-Identität
       trägt — wie „Meine Runden" auf dem Runden-Tab. Der Picker
       nutzt das native Browser-Date-Widget, bleibt aber optisch
       diskret (nur Schrift, kein schwerer Rahmen). */
    /* Top-Bar des Add-Round-Screens: sitzt AUSSERHALB des scrollenden
       Containers (.screen-scroll) als erstes Flex-Kind der Section.
       Damit ist der Header dauerhaft oben sichtbar, ohne position:sticky.
       sticky hatte iOS-Safari-Repaint-Glitches (Element verschwand
       gelegentlich beim schnellen Scrollen). flex-shrink: 0 verhindert,
       dass der Container vom Geschwister .screen-scroll gequetscht
       wird. padding-top env() zieht die Status-Bar / Dynamic-Island-
       Höhe rein, damit der Header in iOS-Standalone-PWA nicht unter
       die Uhrzeile rutscht. */
    .ar-sticky-top {
      flex-shrink: 0;
      background: var(--bg);
      padding-top: env(safe-area-inset-top, 0px);
    }
    .ar-head-row {
      padding: 2px 20px 16px;
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 6px 10px;
      font-family: 'Fraunces', Georgia, "Times New Roman", serif;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--text);
    }
    /* Datum als weicher grüner Pill-Chip — keine Linie, klar klickbar. */
    .ar-head-row .ar-head-date {
      font: inherit;
      font-size: 22px;
      color: var(--primary);
      background: var(--primary-soft);
      border: 0;
      border-radius: 10px;
      padding: 2px 10px 4px;
      font-family: inherit;
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
    }
    .ar-head-row .ar-head-date:focus { outline: none; box-shadow: 0 0 0 2px rgba(30,86,49,0.18); }
    .ar-head-row .ar-head-date::-webkit-calendar-picker-indicator {
      filter: invert(25%) sepia(24%) saturate(2196%) hue-rotate(93deg) brightness(94%) contrast(88%);
      cursor: pointer;
    }

    /* Platz-Auswahl: zwei Varianten — klickbar (mit Chevron) oder
       display-only (locked, aus Club-Kontext). Gleicher visueller Block,
       damit die Kartenhöhe sich zwischen den Varianten nicht verändert. */
    .ar-course-pick {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 14px;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-md);
      text-align: left;
      font-family: inherit;
      transition: background 0.15s;
    }
    .ar-course-pick.locked {
      cursor: default;
      /* etwas wärmer, damit klar ist: keine Interaktion */
      background: var(--surface-2);
      border-color: var(--border);
    }
    .ar-course-pick .ar-course-info { flex: 1; min-width: 0; }
    .ar-course-pick .ar-course-name {
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .ar-course-pick .ar-course-sub {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .ar-course-pick.empty .ar-course-name { color: var(--text-subtle); font-weight: 500; }

    /* Foto-Grid für die neue Runde: variable Anzahl Thumbs + "+ Foto"-Kachel */
    .ar-photo-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .ar-photo-thumb {
      position: relative;
      aspect-ratio: 1;
      border-radius: var(--radius-md);
      overflow: hidden;
      background: var(--surface-2);
      border: 1px solid var(--border);
    }
    .ar-photo-thumb img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    /* Offline-Placeholder: zeigt sich, wenn das Foto-Blob lokal nicht
       verfügbar ist (kein IDB-Eintrag + offline). Dezent gehalten,
       damit das Coin-Detail nicht „zerschossen" wirkt — der User
       erfährt erst beim Tap, dass das Foto online liegt. */
    .ar-photo-thumb.is-offline-locked {
      background: var(--surface-2, #efeae0);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 4px;
    }
    .ar-photo-thumb.is-offline-locked img { display: none; }
    .ar-photo-thumb.is-offline-locked::before {
      content: "";
      width: 22px;
      height: 22px;
      background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V8a4 4 0 0 1 8 0v3'/></svg>");
      opacity: 0.7;
    }
    .ar-photo-thumb.is-offline-locked::after {
      content: "Online";
      font-size: 10px;
      letter-spacing: 0.04em;
      color: var(--text-muted, #888);
      text-transform: uppercase;
    }
    .ar-photo-thumb .remove {
      position: absolute;
      top: 6px; right: 6px;
      width: 24px; height: 24px;
      border-radius: 50%;
      background: rgba(0,0,0,0.65);
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      border: 0;
      padding: 0;
    }
    .ar-photo-add {
      aspect-ratio: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border-radius: var(--radius-md);
      background: var(--surface-2);
      border: 2px dashed var(--border-strong);
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s;
    }
    .ar-photo-add:active { background: var(--border); }
    .ar-photo-add svg { color: var(--text-muted); }

    /* Score-Header-Zeile: SCORE-Label links, DETAILS-Toggle rechts.
       Spart die Zeile, in der DETAILS vorher allein stand. Beide
       Versalien-Labels sitzen auf einer optischen Linie. */
    .ar-score-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      /* Bottom-Margin gleich wie ein normales form-label, damit das
         Score-Feld darunter im gewohnten Abstand sitzt. */
      margin-bottom: 8px;
    }
    .ar-score-header-row .form-label { margin: 0; }

    /* Primärer Score-Slot: enthält IMMER das Schläge-Feld (unabhängig
       vom Profil-Setting — siehe Kommentar im HTML). Bewusst schmal,
       gerade so breit, dass der Placeholder „Schläge" reinpasst. */
    .ar-score-fields-row {
      /* Kein eigenes Padding — die form-group oben/unten kümmert sich. */
    }
    /* Schmale Score-Box: input bekommt feste Breite statt 100%. Wenn
       das Feld im primary-slot sitzt, greift diese Regel. Der zweite
       Score-Slot im Akkordeon (#ar-score-secondary-slot) übersteuert
       das wieder mit width:100% — siehe weiter unten. Höhe analog zu
       den Mood-Smileys (48 px), damit die Score-Box optisch auf der
       gleichen Linie sitzt wie die Smiley-Reihe darüber. */
    #ar-score-primary-slot .ar-score-field input {
      width: 132px;
      max-width: 100%;
      height: 48px;
    }

    /* DETAILS-Akkordeon-Toggle: kompakter Inline-Button rechts in der
       Score-Header-Zeile. Versalien-Label „Details" + Chevron. */
    .ar-details-toggle {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 0;
      background: transparent;
      border: 0;
      cursor: pointer;
      font-family: inherit;
      /* scrollIntoView nach Aufklappen lässt Element sonst hinter dem
         Sticky-Header verschwinden — scroll-margin verhindert das. */
      scroll-margin-top: 120px;
    }
    .ar-details-toggle .form-label {
      margin: 0;
      cursor: pointer;
    }
    .ar-details-toggle .chev {
      color: var(--text-muted);
      transition: transform 0.2s;
      flex-shrink: 0;
    }
    .ar-details-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
    /* Body des Details-Akkordeons: Karte mit Surface-Hintergrund (wie
       der vorherige .ar-score-body), gleiches Padding und gleicher Gap
       zwischen Sektionen. */
    .ar-details-body {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 16px 18px 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .ar-details-body[hidden] { display: none; }
    .ar-score-field label {
      display: block;
      font-size: 12px;
      color: var(--text-muted);
      margin: 0 0 6px;
      letter-spacing: 0.02em;
    }
    .ar-score-field input {
      width: 100%;
      height: 44px;
      padding: 8px 14px;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      font-family: inherit;
      text-align: center;
      -webkit-appearance: none;
      appearance: none;
    }
    /* Placeholder dezenter: regular weight (statt bold), gleiche
       Größe wie die Eingabe. Senior-Friendly. */
    .ar-score-field input::placeholder {
      font-size: 15px;
      font-weight: 400;
      color: var(--text-muted);
      opacity: 0.75;
    }
    .ar-score-field input::-webkit-outer-spin-button,
    .ar-score-field input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    /* Loch-für-Loch-Grid: 9 Felder pro Reihe, kompakt, ohne Label-Spalte.
       Summe der Felder wird live ins "Schläge"-Feld oben gespiegelt —
       so tippt man entweder nur die Summe oder das Detail; doppelt
       eintippen muss keiner. */
    .ar-holes-title {
      font-size: 12px;
      color: var(--text-muted);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-weight: 600;
    }
    .ar-hole-row {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      gap: 4px;
      align-items: center;
    }
    .ar-hole-row + .ar-hole-row { margin-top: 6px; }
    /* Sichtbarkeit: 9F = nur Front, 9B = nur Back, 9 (Loop) = Front, 18 = beide.
       Das Grid bleibt unten erhalten, damit Inputs ihren Fokus/Wert behalten. */
    .ar-holes.mode-9b > #ar-hole-row-front { display: none; }
    .ar-holes.mode-9f > #ar-hole-row-back  { display: none; }
    .ar-holes.mode-9  > #ar-hole-row-back  { display: none; }
    .ar-hole-cell {
      width: 100%;
      min-width: 0;
      aspect-ratio: 1;
      padding: 0;
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: 6px;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      font-family: inherit;
      -webkit-appearance: none;
      appearance: none;
    }
    .ar-hole-cell:focus {
      outline: none;
      border-color: var(--primary);
      background: var(--primary-soft);
    }
    .ar-hole-cell::-webkit-outer-spin-button,
    .ar-hole-cell::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    /* Gestrichenes Loch (X). Subtil hervorgehoben, damit es im
       Hole-Grid auf einen Blick als „nicht gespielt" lesbar ist. */
    .ar-hole-cell.scratched {
      background: var(--surface-2);
      color: var(--text-muted);
      border-style: dashed;
    }
    /* "Score nicht zählbar"-Hint unter dem Schläge-Feld. Erscheint,
       wenn mindestens ein Loch im Hole-Grid auf X gesetzt ist —
       in dem Fall wird die Schlagzahl gar nicht summiert (Strokes-
       Feld leer), und der Hint kommuniziert klar warum. */
    .ar-strokes-suffix {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 4px;
      font-weight: 500;
      letter-spacing: 0.01em;
      line-height: 1.3;
    }
    .ar-strokes-suffix[hidden] { display: none; }

    /* OCR-Button: Mock-Demo-Pfad in Phase 1 (Wizard of Oz). Aktiver
       Button in Markengrün-Soft mit gestricheltem Outline — signalisiert
       "Aktion möglich" und gleichzeitig "experimentell/Demo". Klick
       öffnet den File-Input (Kamera oder Galerie), die Mock-Logik
       simuliert die OCR-Antwort. Phase 2 ersetzt den Mock durch
       echte Vision-API. */
    .ar-ocr-btn {
      grid-column: 1 / -1;
      margin-top: 14px;
      padding: 12px 14px;
      background: var(--primary-soft);
      border: 1px dashed var(--primary);
      border-radius: var(--radius-sm);
      color: var(--primary);
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: transform 100ms ease;
    }
    .ar-ocr-btn:active {
      transform: scale(0.98);
      background: rgba(30, 86, 49, 0.18);
    }

    /* Delete-Link im Edit-Modus. Zurückhaltend unten, damit er nicht
       als erstes ins Auge springt — er ist eine Notbremse, kein Feature. */
    .ar-delete-bar {
      padding: 4px 20px 16px;
      text-align: center;
    }
    .ar-delete-bar[hidden] { display: none; }
    .ar-delete-btn {
      background: transparent;
      border: 0;
      color: var(--danger);
      font-size: 14px;
      font-weight: 500;
      padding: 10px 14px;
      cursor: pointer;
      font-family: inherit;
    }
    .ar-delete-btn:active { opacity: 0.6; }

    /* "Coin aus Sammlung entfernen" unten im Coin-Detail. Echter Ghost-
       Link: so dezent, dass man ihn nur sieht, wenn man ihn sucht.
       Keine Danger-Farbe im Ruhezustand — die zeigt erst beim Press kurz,
       damit man bei der Tap-Aktion merkt "Moment, das ist destruktiv". */
    .coin-delete-bar {
      padding: 20px 20px 36px;
      text-align: center;
    }
    .coin-delete-btn {
      background: transparent;
      border: 0;
      color: var(--text-subtle);
      font-size: 13px;
      font-weight: 500;
      padding: 8px 14px;
      cursor: pointer;
      font-family: inherit;
      letter-spacing: 0.01em;
    }
    .coin-delete-btn:active { color: var(--danger); opacity: 0.85; }

    /* Preview-Modus auf der Coin-Detail-Seite. Wird gesetzt, wenn der
       User über den Info-Button im Picker auf einen noch nicht gesammelten
       Platz schaut. In diesem Modus:
       - Runden-Sektion + Demo-Scan + Delete-Bar werden ausgeblendet
       - Sticky-CTA zeigt „Coin (Platz) hinzufügen"
       - Info-Akkordeon ist per Default aufgeklappt (Lage, mehr animiert)
       Im Sammlungs-Modus zeigt die CTA „Neue Runde", Akkordeon ist zu. */

    /* Sticky-CTA am unteren Rand: ist ein direkter Geschwister-Block des
       screen-scroll. Da .screen ein flex-Column ist und screen-scroll
       flex:1 hat, sitzt die CTA-Bar automatisch am unteren Rand des
       Screens — ohne position:fixed. Vorteil: kein Konflikt mit
       Multi-Screen-Stacking, kein Spiel mit z-index. Sticky-Effekt
       entsteht alleine durch das Flex-Layout.

       Padding-bottom mit env() respektiert den iOS-Home-Indicator
       (Safe-Area), damit der Button nicht auf der Indicator-Linie
       klebt. Box-Shadow zeigt einen weichen Fade nach oben — das
       trennt den Button optisch vom Inhalt darüber, falls beim
       Scroll Text durchläuft. */
    .coin-cta-bar {
      flex: 0 0 auto;
      padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px));
      background: var(--bg);
      border-top: 1px solid var(--border);
      box-shadow: 0 -10px 18px -12px rgba(0, 0, 0, 0.10);
    }
    .coin-cta-bar .btn { width: 100%; }

    /* Preview-Modus: andere Sektionen verstecken. CTA-Bar ist immer
       sichtbar, Label wird in JS pro Modus gesetzt. */
    #screen-coin-detail.coin-detail-preview #cd-rounds-title,
    #screen-coin-detail.coin-detail-preview #cd-rounds,
    #screen-coin-detail.coin-detail-preview .coin-delete-bar,
    #screen-coin-detail.coin-detail-preview #cd-demo {
      display: none;
    }

    /* ==========================================
       BEWERTUNG-KARTE (Coin-Detail-Seite)
       --------------------------------------------------------
       Persönliche Platz-Bewertung mit Sterne-Rating, Notiz und Fotos.
       Sitzt VOR der Info-Karte (persönliche Meinung zuerst, objektive
       Fakten danach). Wärmerer Cream-Ton (#FAF6EC) als visuelle
       Differenzierung zur mintgetönten Info-Karte. Akkordeon-Pattern
       konsistent — User lernt's einmal, versteht beide Karten.

       Im zugeklappten Header sichtbar: aktuelle Sterne-Bewertung
       (read-only). Im aufgeklappten Body: interaktive Sterne, Notiz
       als Post-it (gelb), Foto-Upload analog Runden-Foto-Pipeline.
       ========================================== */
    .coin-rating {
      margin: 4px 12px 8px;
      background: #F8EED5;
      border: 1px solid #E5D6AE;
      border-radius: 12px;
      overflow: hidden;
    }
    .coin-rating-toggle {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      cursor: pointer;
      user-select: none;
      min-height: 44px;
    }
    /* Header-Anker-Icon (Herz). Outline-Variante: keine Füllung, nur
       eine dünne Linie. Farbe ist ein gedämpftes Taupe-Rose (#B5928A),
       das sich in die Cream-Palette einfügt statt sie zu durchbrechen.
       Bewusst NICHT Gold — sonst Verwechslung mit den Rating-Sternen. */
    .coin-rating-toggle-icon {
      flex: 0 0 20px;
      width: 20px; height: 20px;
      color: #B5928A;
      display: flex; align-items: center; justify-content: center;
    }
    .coin-rating-toggle-icon svg {
      width: 18px; height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .coin-rating-toggle-label {
      flex: 1 1 auto;
      font-weight: 600;
      font-size: 16px;
      color: var(--text);
      letter-spacing: 0.01em;
    }
    /* Sternen-Anzeige im Header (read-only). Read-only Stars sind
       statische SVG-Elemente in Gold (gefüllt) oder gedämpftem Beige
       (leer). */
    .coin-rating-toggle-stars {
      display: flex;
      gap: 2px;
      flex: 0 0 auto;
      /* Default-Transition gilt beim Schließen (zurück zur Sichtbarkeit):
         erst 280ms warten (bis der Body fertig zugeklappt ist), dann sanft
         einblenden. Beim Aufklappen wird diese Regel von .is-open
         überschrieben mit kurzer Dauer + 0ms Delay → Sterne verschwinden
         sofort, parallel zum Aufgehen des Bodys. */
      opacity: 1;
      transition: opacity 200ms ease-out 280ms;
    }
    .coin-rating-toggle-stars svg {
      width: 16px; height: 16px;
    }
    .coin-rating-toggle-stars .star-filled { fill: #E8B546; }
    .coin-rating-toggle-stars .star-empty  { fill: #D8CDB0; }
    .coin-rating-toggle-chevron {
      flex: 0 0 18px;
      color: var(--text-subtle);
      transition: transform 0.2s ease;
      margin-left: 4px;
    }
    .coin-rating.is-open .coin-rating-toggle-chevron {
      transform: rotate(180deg);
    }
    /* Beim Aufklappen verschwinden die Mini-Sterne im Header — die großen
       Sterne im Body übernehmen den Job. Sonst stünden zwei Sterne-Reihen
       sichtbar untereinander. Sterne behalten ihren Platz im Layout
       (Chevron bleibt fest, kein Sprung), nur die Opacity wechselt — mit
       asymmetrischem Timing: beim Öffnen sofort weg, beim Schließen erst
       nach 280ms (Body-Schließ-Animation ist dann fertig) einblenden,
       damit nicht kurz beide Sterne-Reihen gleichzeitig zu sehen sind. */
    .coin-rating.is-open .coin-rating-toggle-stars {
      opacity: 0;
      pointer-events: none;
      transition: opacity 140ms ease-out 0ms;
    }

    /* Aufgeklappter Body: interaktive Sterne, Post-it-Notiz, Fotos.
       Animiert per max-height + padding (statt display:none-Snap). Im
       zugeklappten Zustand 0 Höhe + 0 vertikales Padding + Border
       transparent — visuell unsichtbar, aber im Layout. So lässt sich
       die Höhe sanft transitionen. max-height 1500px ist eine großzügig
       gewählte Obergrenze für Sterne + Notiz + bis zu 4 Fotos. */
    .coin-rating-body {
      max-height: 0;
      overflow: hidden;
      padding: 0 14px;
      border-top: 1px solid transparent;
      transition: max-height 280ms ease-out,
                  padding 280ms ease-out,
                  border-top-color 200ms ease-out;
    }
    .coin-rating.is-open .coin-rating-body {
      max-height: 1500px;
      padding: 4px 14px 14px;
      border-top-color: #E8DDC2;
    }

    /* Interaktive Sterne, größer als die Header-Anzeige. Tap setzt
       Rating; Tap auf den höchsten gesetzten Stern toggelt zurück
       auf 0 (Reset-Mechanik). */
    .coin-rating-stars-edit {
      display: flex;
      gap: 6px;
      justify-content: center;
      padding: 12px 0;
    }
    .coin-rating-stars-edit button {
      width: 40px; height: 40px;
      background: transparent;
      border: 0;
      padding: 4px;
      cursor: pointer;
      transition: transform 0.1s;
    }
    .coin-rating-stars-edit button:active {
      transform: scale(0.92);
    }
    .coin-rating-stars-edit button svg {
      width: 100%; height: 100%;
    }
    .coin-rating-stars-edit button.filled svg { fill: #E8B546; }
    .coin-rating-stars-edit button.empty  svg { fill: #D8CDB0; }
    /* Domino-Effekt beim Hochsetzen der Sterne: jeder Stern bis zum
       getippten skaliert nacheinander kurz auf 1.25 und zurück. Stagger
       wird per inline animation-delay (in setCourseRating) gesetzt.
       Beim Runtersetzen / Reset läuft keine Animation — eine korrektive
       Aktion soll nicht "gefeiert" werden. */
    @keyframes star-domino {
      0%   { transform: scale(1); }
      45%  { transform: scale(1.25); }
      100% { transform: scale(1); }
    }
    .coin-rating-stars-edit button.star-domino {
      animation: star-domino 320ms cubic-bezier(0.34, 1.56, 0.64, 1) 1;
      animation-fill-mode: backwards;
    }

    /* Notiz-Row + Foto-Pipeline im Bewertungs-Body. Wir recyceln die
       Klassen aus dem Add-Round-Block (.ar-notiz-row, .ar-photo-add,
       .ar-photo-grid-compact) — gleiche Optik, gleiches Verhalten.
       Hier nur der äußere Wrapper-Abstand und die Position. */
    .coin-rating-photo-grid {
      margin-top: 10px;
    }
    .coin-rating-photo-grid[hidden] { display: none; }

    /* ==========================================
       INFO-KARTE (Coin-Detail-Seite)
       --------------------------------------------------------
       Eine getönte Karte mit Cream-Mint-Hintergrund (Variante B),
       die alle Platz-Infos enthält. Oben ein „Informationen"-
       Toggle (kleines Info-Icon + Chevron), darunter — wenn offen
       — alle 5 Sektionen direkt nebeneinander sichtbar. Kein
       inneres Akkordeon mehr.

       Default: offen im Picker-Preview-Modus, zu im Sammlungs-Modus
       (steuert JS). Karten-Tönung gibt dem Block eigenen Charakter
       und trennt ihn visuell vom restlichen Coin-Detail.
       ========================================== */
    .coin-info {
      margin: 4px 12px 8px;
      background: #F4F8F0;            /* Cream mit Mint-Hauch */
      border: 1px solid #DCE6D2;      /* dünner Mint-Rand */
      border-radius: 12px;
      overflow: hidden;
    }

    /* Toggle-Header: durchgehend getönt (Karte hat überall denselben
       Hintergrund), Tap togglet die ganze Karte. Min-Höhe wie ein
       Listen-Eintrag, damit der Daumen-Treffer komfortabel ist. */
    .coin-info-toggle {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      cursor: pointer;
      user-select: none;
      min-height: 44px;
    }
    .coin-info-toggle-icon {
      flex: 0 0 20px;
      width: 20px;
      height: 20px;
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .coin-info-toggle-icon svg {
      width: 18px;
      height: 18px;
      stroke-width: 1.8;
    }
    .coin-info-toggle-label {
      flex: 1 1 auto;
      font-weight: 600;
      font-size: 16px;
      color: var(--text);
      letter-spacing: 0.01em;
    }
    .coin-info-toggle-chevron {
      flex: 0 0 18px;
      color: var(--text-subtle);
      transition: transform 0.2s ease;
    }
    .coin-info.is-open .coin-info-toggle-chevron {
      transform: rotate(180deg);
    }

    /* Body: alle Sektionen in einem Rutsch sichtbar. Schmaler
       Trenner zwischen Toggle und erster Sektion. Animiert per
       max-height + padding wie das Rating-Akkordeon (gleiches Muster).
       max-height 2500px großzügig — Info kann lang werden mit
       Adresse, Highlights, Geschichte, Kontakt. */
    .coin-info-body {
      max-height: 0;
      overflow: hidden;
      padding: 0 14px;
      border-top: 1px solid transparent;
      transition: max-height 320ms ease-out,
                  padding 320ms ease-out,
                  border-top-color 240ms ease-out;
    }
    .coin-info.is-open .coin-info-body {
      max-height: 2500px;
      padding: 4px 14px 12px;
      border-top-color: #DCE6D2;
    }

    /* Sektion: Header (Icon + Title) bleibt für Orientierung, aber
       ohne Chevron / Tap-Verhalten — der äußere Toggle steuert
       alles. Body sitzt direkt darunter, ohne extra Indent unter
       dem Icon (mehr Textbreite). */
    .coin-info-section {
      padding: 10px 0;
      border-bottom: 1px solid rgba(220, 230, 210, 0.6);
    }
    .coin-info-section:last-of-type { border-bottom: none; padding-bottom: 4px; }

    .coin-info-section-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 2px 0 6px;
      min-height: 28px;
    }
    .coin-info-section-icon {
      flex: 0 0 20px;
      width: 20px;
      height: 20px;
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .coin-info-section-icon svg {
      width: 18px;
      height: 18px;
      stroke-width: 1.8;
    }
    .coin-info-section-title {
      flex: 1 1 auto;
      font-weight: 600;
      font-size: 15px;
      color: var(--text);
      letter-spacing: 0.01em;
    }
    .coin-info-section-body {
      font-size: 15px;
      line-height: 1.55;
      color: var(--text);
    }

    /* Body-interne Mini-Bausteine: Faktenzeilen, Map-Link, Signature
       Hole. Werden je nach Sektion eingesetzt. */
    .coin-info-fact {
      display: flex;
      gap: 8px;
      margin-bottom: 4px;
    }
    .coin-info-fact-label {
      flex: 0 0 84px;
      color: var(--text-subtle);
      font-size: 14px;
    }
    .coin-info-fact-val {
      flex: 1 1 auto;
      color: var(--text);
      font-size: 15px;
    }
    .coin-info-text {
      margin: 0;
      color: var(--text);
    }
    .coin-info-text + .coin-info-text { margin-top: 6px; }

    /* Signature-Hole / Besondere-Bahn-Block: stärkerer Mint-Akzent
       als die Karte selbst. Kontrast über volle primary-soft +
       grünen Linksbalken, sodass das Sammler-Detail im Cream-Mint-
       Kasten herauspoppt. Beide Varianten teilen sich die Optik —
       nur das Label wechselt. */
    .coin-info-signature {
      background: var(--primary-soft);
      border-left: 3px solid var(--primary);
      border-radius: 6px;
      padding: 8px 10px;
      margin-bottom: 10px;
    }
    .coin-info-signature-label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--primary);
      margin-bottom: 2px;
    }
    .coin-info-signature-text {
      font-size: 15px;
      color: var(--text);
      line-height: 1.45;
    }

    /* Gold-Tier-Block: ganz oben in der Karte (vor allen Sektionen),
       erklärt warum dieser Platz Gold ist. Optisch ähnlich wie
       Signature Hole, aber in Gold-Tönen — passend zum Coin-
       Hintergrund eines Gold-Tier-Coins. Wird nur gerendert, wenn
       course.tier === 'gold' UND tierReason gesetzt. */
    .coin-info-tier {
      background: linear-gradient(135deg, #FBE9A8 0%, #F2D58A 100%);
      border-left: 3px solid #C99634;
      border-radius: 6px;
      padding: 8px 10px;
      margin-bottom: 12px;
    }
    .coin-info-tier-label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #8C6519;
      margin-bottom: 2px;
    }
    .coin-info-tier-text {
      font-size: 15px;
      color: var(--text);
      line-height: 1.45;
    }

    /* Lage: Tap auf den Inhalt öffnet die Karte. Cursor + leichter
       active-State signalisieren Tappbarkeit. Externer-Link-Pfeil
       sitzt rechts neben dem Text. */
    .coin-info-location {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      user-select: none;
    }
    .coin-info-location:active { opacity: 0.7; }
    .coin-info-location-text { flex: 1 1 auto; }
    .coin-info-location-arrow {
      flex: 0 0 16px;
      color: var(--primary);
      transform: translateY(-1px);
    }

    /* Kontakt: Tel klickbar (tel:), Mail klickbar (mailto:),
       Web als reiner Text mit www-Präfix (NICHT klickbar — Frank
       wollte das ausdrücklich so). */
    .coin-info-contact-line {
      display: flex;
      gap: 8px;
      align-items: baseline;
      margin-bottom: 2px;
      font-size: 15px;
    }
    .coin-info-contact-label {
      flex: 0 0 36px;
      color: var(--text-subtle);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .coin-info-contact-val { flex: 1 1 auto; }
    .coin-info-contact-val a {
      color: var(--primary);
      text-decoration: none;
    }
    .coin-info-contact-val a:active { opacity: 0.7; }

    /* Quellen-Fuß (klein, dezent, am Boden der Karte). Lizenz-/
       Transparenz-Information für die spätere LLM-Generierung
       wichtig. Innerhalb der Karte, also keine zusätzliche
       Hintergrund-Tönung nötig. */
    .coin-info-footer {
      padding: 8px 0 0;
      margin-top: 8px;
      border-top: 1px solid rgba(220, 230, 210, 0.6);
      font-size: 12px;
      color: var(--text-subtle);
      letter-spacing: 0.02em;
    }

    .notes-input {
      width: 100%;
      min-height: 100px;
      padding: 16px;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-md);
      font-size: 16px;
      color: var(--text);
      resize: none;
      line-height: 1.5;
      font-family: inherit;
    }

    /* Post-it-Variante: dezentes Creme-Gelb, wirkt wie ein handschriftlicher
       Merkzettel. Bewusst nicht knallgelb — soll zur Sammelbuch-Palette passen. */
    .notes-input.notes-postit {
      background: #FDF6D8;
      border-color: #EADFA8;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 2px 6px rgba(180, 150, 30, 0.08);
    }
    .notes-input.notes-postit::placeholder {
      color: #A8966A;
      opacity: 0.75;
    }

    /* Kompakt-Variante: schmaleres Post-it, gleicht auf 80px mit der
       +Foto-Kachel daneben. Wer mehr schreibt, bekommt Scrollbar. */
    .notes-input.notes-compact {
      min-height: 80px;
      padding: 12px 16px;
    }

    /* Notiz-Row: Post-it links, +Foto-Kachel rechts, beide gleich hoch (80px).
       Sobald Fotos da sind, trägt der Container `.has-photos` und die Inline-
       Kachel verschwindet — die Notiz fliesst auf volle Breite. */
    .ar-notiz-row {
      display: flex;
      gap: 10px;
      align-items: stretch;
    }
    .ar-notiz-row .notes-input {
      flex: 1;
      min-width: 0;
    }
    .ar-notiz-row.has-photos .ar-photo-add-inline {
      display: none;
    }

    /* Mood-Reihe: 5 gleich breite Buttons mit nativen Emojis. Inactive
       Buttons sind desaturiert + halb-transparent — sieht ruhig aus,
       hebt sich aber klar vom Active-State ab. Active bekommt Soft-
       Mint-Hintergrund + Mint-Outline (Filter-Pill-Pattern aus
       Design-Memo: Soft-Mint OK für Aktiv-Status, Vollton-Markengrün
       NUR für echte Aktionen). Min-Höhe 48px für komfortablen Tap. */
    .ar-mood-row {
      display: flex;
      gap: 8px;
    }
    .ar-mood-btn {
      flex: 1;
      min-width: 0;
      height: 48px;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
      padding: 0;
      filter: grayscale(0.55);
      opacity: 0.55;
      transition: filter 0.15s, opacity 0.15s, background 0.15s, border-color 0.15s, transform 0.08s;
      font-family: inherit;
    }
    .ar-mood-btn:active { transform: scale(0.96); }
    .ar-mood-btn.active {
      filter: none;
      opacity: 1;
      background: var(--primary-soft);
      border-color: var(--primary);
    }
    /* Pop-Animation beim Antippen eines Mood-Smileys: kurz auf 1.15
       skalieren, dann zurück. ~280 ms ease-out, einmalig. Wird in
       setRoundMood() per JS auf den eben getippten Button gelegt;
       animationend räumt die Klasse wieder weg. Senior-friendly:
       kurze Dauer, kein wirbliges Nachzucken. */
    @keyframes mood-pop {
      0%   { transform: scale(1); }
      45%  { transform: scale(1.15); }
      100% { transform: scale(1); }
    }
    .ar-mood-btn.mood-pop {
      animation: mood-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 1;
    }

    /* Wetter-Reihe: gleiches Layout-Pattern wie Mood — 5 Buttons in einer
       Reihe, inactive desaturiert + transparent, active mit Soft-Mint und
       voller Sättigung. Native Emojis (☀️ ⛅ ☁️ 💨 🌧️) — werden auf iOS
       als Apple-Wetter-Icons gerendert, auf Android als Material/Noto. */
    .ar-weather-row {
      display: flex;
      gap: 6px;
      flex: 1;
      min-width: 0;
    }
    .ar-weather-btn {
      flex: 1;
      min-width: 0;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      cursor: pointer;
      padding: 0;
      font-size: 22px;
      line-height: 1;
      filter: grayscale(0.45);
      opacity: 0.65;
      transition: opacity 0.15s, background 0.15s, border-color 0.15s, filter 0.15s, transform 0.08s;
      font-family: inherit;
    }
    .ar-weather-btn:active { transform: scale(0.96); }
    .ar-weather-btn.active {
      opacity: 1;
      filter: none;
      background: var(--primary-soft);
      border-color: var(--primary);
    }

    /* Top-Align-Variante der Meta-Zeile: Label fluchtet oben mit der
       ersten Zeile des rechten Inhalts. Wird für Flight (Mitspielende)
       gebraucht, weil die Liste 1-3 Zeilen hoch werden kann und das
       Label immer am ersten Namen kleben soll, nicht mittig zum Stapel.
       Label bekommt die exakte Höhe eines Eingabefelds (44 px) und
       zentriert seinen Text intern — damit fluchtet die Mitte des
       Labels exakt mit der Mitte des ersten Inputs. */
    .ar-meta-row-top {
      align-items: flex-start;
    }
    .ar-meta-row-top .ar-meta-label {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
    }

    /* Sekundäres Score-Feld im Akkordeon: sitzt rechts vom Label und
       füllt die verfügbare Breite. Das innere ar-score-field bekommt
       kein eigenes padding mehr (das hatte es im alten Layout, wo es
       als einzelne Reihe im ar-score-body lebte). */
    .ar-score-secondary-slot {
      flex: 1;
      min-width: 0;
    }

    /* Mitspielende-Liste: dynamisch 1-3 Zeilen, jede mit einem Eingabefeld
       und (an der letzten Zeile, sofern noch Platz und Feld nicht leer)
       einem +Button rechts. Plus-Button ist quadratisch und in Soft-Mint
       gehalten — kein scharfer Akzent, weil es kein Hauptaktion-Knopf ist. */
    .ar-players-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .ar-player-row {
      display: flex;
      align-items: stretch;
      gap: 6px;
      width: 100%;
      min-width: 0;
    }
    .ar-player-input {
      flex: 1;
      min-width: 0;
      height: 44px;
      padding: 8px 14px;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      font-size: 15px;
      color: var(--text);
      font-family: inherit;
      -webkit-appearance: none;
      appearance: none;
    }
    .ar-player-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(30,86,49,0.18);
    }
    /* Placeholder-Stil identisch zu .ar-score-field input — gleiche
       Schriftgröße, Gewicht, Farbe und Opazität. Sonst nutzt der
       Player-Input den Browser-Default, der je nach Plattform anders
       aussieht (andere Graustufe / Opazität). */
    .ar-player-input::placeholder {
      font-size: 15px;
      font-weight: 400;
      color: var(--text-muted);
      opacity: 0.75;
    }
    /* Player-Buttons: beide als schlichte Icon-Buttons ohne Box. Nur die
       Farbe unterscheidet — ✕ grau (Subtile Aktion „Wegnehmen"), + in
       Markengrün (Aktion „Hinzufügen"). 24 px breit, damit Plus auch auf
       engen Bildschirmen sicher in den Sichtbereich passt; 44 px hoch
       für Tap-Region. Gleiche Klassen-Form, damit beide visuell auf
       gleicher Bedeutungsebene sitzen. */
    .ar-player-remove,
    .ar-player-plus {
      width: 24px;
      height: 44px;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 0;
      font-size: 20px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
      padding: 0;
      transition: transform 0.08s, color 0.12s;
    }
    .ar-player-remove { color: var(--text-subtle); }
    .ar-player-remove:hover { color: var(--text); }
    .ar-player-plus { color: var(--primary); }
    .ar-player-plus[hidden] { display: none; }
    .ar-player-remove:active,
    .ar-player-plus:active { transform: scale(0.88); }

    /* Kompakte Foto-Grid-Variante: 80×80px Kacheln im Flex-Wrap-Layout.
       Erscheint unten nur, wenn wirklich Fotos hinzugefügt wurden. */
    .ar-photo-grid-compact {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .ar-photo-grid-compact .ar-photo-thumb {
      width: 80px;
      height: 80px;
      aspect-ratio: auto;
      flex: 0 0 80px;
    }
    /* +Foto-Kachel: self-contained 80×80, funktioniert sowohl inline neben
       der Notiz als auch in der Foto-Grid unten. */
    .ar-photo-add-compact {
      width: 80px;
      height: 80px;
      aspect-ratio: auto;
      flex: 0 0 80px;
      font-size: 12px;
      gap: 4px;
    }

    /* ==========================================
       ADD-ROUND META-BLOCKS
       ==========================================
       - .ar-variant-row: Platz-Varianten-Chips direkt unter der Platz-
         Zeile (kein Label, negativer top-margin, damit sie optisch zum
         Platz gehören).
       - .ar-meta / .ar-meta-row: kompakte Label-Segments-Zeilen (Runde,
         Typ, Abschlag) im Details-Aufklapp innerhalb des Score-Blocks. */
    .ar-variant-row {
      padding: 0 20px 16px;
      margin-top: -10px;
    }
    .ar-variant-row[hidden] { display: none; }
    /* Innenliegender Seg-Container: kein wrap, damit 6 Chips bei Kaden
       (AB/BC/AC/A/B/C) in einer Zeile bleiben. Kleinere min-width pro
       Chip, gap auf 5px reduziert. */
    .ar-variant-row .ar-seg {
      flex-wrap: nowrap;
      gap: 5px;
      overflow-x: auto;
    }
    .ar-variant-chip {
      min-width: 44px !important;
      padding-left: 8px;
      padding-right: 8px;
      flex: 0 1 auto;
    }

    .ar-meta {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .ar-meta-row {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 34px;
    }
    .ar-meta-label {
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      font-weight: 600;
      width: 88px;
      flex-shrink: 0;
    }
    .ar-seg {
      display: flex;
      gap: 6px;
      flex: 1;
      flex-wrap: wrap;
    }
    .ar-seg-btn {
      flex: 1 1 auto;
      min-width: 60px;
      padding: 7px 10px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease, transform 0.05s ease;
      font-family: inherit;
    }
    .ar-seg-btn:active { transform: scale(0.98); }
    /* Selection-State: Mint-Outline (s. .pf-seg-btn.active). Hebt sich
       deutlich von Action-Buttons ab, die als einzige voll-gefüllt
       dunkelgrün bleiben. */
    .ar-seg-btn.active {
      background: var(--primary-soft);
      color: var(--primary);
      border-color: var(--primary);
      font-weight: 600;
    }
    .ar-seg-btn[hidden] { display: none; }

    /* Abschlag-Dots: kleine Kreise in Tee-Farben. Aktive Auswahl bekommt
       einen dezenten Primary-Ring und leichte Skalierung. Weiß braucht
       einen etwas sichtbareren Grundrand, damit der Dot auf hellem Hintergrund
       nicht verschwindet. */
    .ar-tees {
      display: flex;
      gap: 10px;
      flex: 1;
      align-items: center;
    }
    .ar-tee-dot {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1.5px solid rgba(0, 0, 0, 0.15);
      padding: 0;
      cursor: pointer;
      transition: transform 0.1s ease, box-shadow 0.1s ease;
      flex-shrink: 0;
    }
    .ar-tee-dot.ar-tee-white { border-color: rgba(0, 0, 0, 0.25); }
    .ar-tee-dot:active { transform: scale(0.92); }
    .ar-tee-dot.active {
      transform: scale(1.12);
      box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
    }

    .save-bar {
      position: sticky;
      bottom: 0;
      background: rgba(252, 250, 245, 0.95);
      backdrop-filter: blur(10px);
      padding: 16px 20px 20px;
      border-top: 1px solid var(--border);
    }

    /* ==========================================
       UTILITIES
       ========================================== */
    .flex { display: flex; }
    .flex-col { flex-direction: column; }
    .gap-2 { gap: 8px; }
    .px-5 { padding-left: 20px; padding-right: 20px; }
    .py-3 { padding-top: 12px; padding-bottom: 12px; }
    .mb-3 { margin-bottom: 12px; }
    .mb-5 { margin-bottom: 20px; }
    .text-center { text-align: center; }
    .text-muted { color: var(--text-muted); }
    .text-sm { font-size: 14px; }
    .hidden { display: none !important; }

    /* ==========================================
       PORTRAIT-LOCK
       --------------------------------------------------------
       Das Manifest hat zwar `"orientation": "portrait"` gesetzt,
       iOS-Safari ignoriert das in installierten PWAs aber leider.
       Auf Android wirkt das Manifest, auf iOS nicht.

       Lösung: Overlay-Hinweis bei Landscape-Drehung, der den User
       bittet das Handy zurückzudrehen. Das ist Standard-Pattern
       bei iOS-PWAs (Spotify, Instagram etc. machen es genauso).
       Nur auf schmalen Geräten (Phones) aktiv — Tablets und
       Desktop bleiben unangetastet.
       ========================================== */
    .orientation-lock {
      position: fixed;
      inset: 0;
      z-index: 99999;
      background: var(--bg);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 24px;
      padding: 40px 24px;
      text-align: center;
    }
    .orientation-lock-icon {
      width: 72px;
      height: 72px;
      color: var(--primary);
    }
    .orientation-lock-icon svg {
      width: 100%;
      height: 100%;
      animation: orientation-lock-rotate 2.4s ease-in-out infinite;
      transform-origin: center;
    }
    @keyframes orientation-lock-rotate {
      0%, 100% { transform: rotate(-90deg); }
      40%, 60% { transform: rotate(0deg); }
    }
    .orientation-lock-title {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 22px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.25;
      letter-spacing: -0.01em;
    }
    .orientation-lock-sub {
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.5;
      max-width: 280px;
    }
    /* Aktiv nur auf Phone-Geräten (bis ~920px Längere Seite) im Landscape.
       Tablet und Desktop sind explizit ausgenommen — dort soll Landscape
       weiter funktionieren. */
    @media (orientation: landscape) and (max-height: 500px) {
      .orientation-lock { display: flex; }
      body > *:not(.orientation-lock):not(.sw-update-banner) { display: none !important; }
    }
    /* b114: Wenn die Foto-Lightbox offen ist, soll Landscape erlaubt sein
       (Querformat-Bilder größer anschauen, analog zur iOS-Fotos-App).
       Die body.lightbox-open-Klasse setzt openPhotoLightbox; sie überschreibt
       den Portrait-Lock und lässt die Lightbox selbst als einziges Element
       sichtbar. Beim Schließen entfernt closeLightbox die Klasse — das
       Portrait-Lock greift dann wieder normal. */
    @media (orientation: landscape) and (max-height: 500px) {
      body.lightbox-open .orientation-lock { display: none !important; }
      body.lightbox-open .photo-lightbox:not([hidden]) { display: flex !important; }
    }

    /* ==========================================
       SYNC-INDIKATOR
       --------------------------------------------------------
       Erscheint nach Login solange Cloud-Pulls (coin_units,
       collection, rounds, personal, submitted) noch laufen.
       Verschwindet automatisch wenn alle 5 Operationen durch.
       So weiß der User: noch nicht offline gehen, Daten noch
       nicht komplett lokal.
       Sitzt oben, dezenter Cream-Banner mit Mini-Spinner.
       ========================================== */
    .sync-indicator {
      position: fixed;
      left: 12px;
      right: 12px;
      top: calc(12px + env(safe-area-inset-top, 0px));
      z-index: 9997;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 999px;
      box-shadow: 0 4px 16px -4px rgba(42, 42, 42, 0.14);
      padding: 8px 16px 8px 12px;
      display: none;
      align-items: center;
      gap: 10px;
      transform: translateY(-10px);
      opacity: 0;
      transition: transform 220ms ease, opacity 220ms ease;
    }
    .sync-indicator.is-visible {
      display: flex;
      transform: translateY(0);
      opacity: 1;
    }
    @media (min-width: 720px) {
      .sync-indicator {
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(-10px);
        max-width: 360px;
      }
      .sync-indicator.is-visible {
        transform: translateX(-50%) translateY(0);
      }
    }
    .sync-indicator-spinner {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      border: 2px solid var(--primary-soft, #E6EEE8);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: sync-spin 0.9s linear infinite;
    }
    @keyframes sync-spin {
      to { transform: rotate(360deg); }
    }
    .sync-indicator-text {
      font-size: 13px;
      color: var(--text);
      font-weight: 500;
    }

    /* ==========================================
       SERVICE WORKER UPDATE-BANNER
       --------------------------------------------------------
       Erscheint wenn der SW eine neue Version installiert hat,
       aber sie noch nicht aktiv ist (waiting state). User klickt
       "Aktualisieren" → SKIP_WAITING → reload.
       Sitzt unten, schwebt über dem Content, fadet sanft ein.
       ========================================== */
    /* Update-Banner sitzt innerhalb von .app (b110, Frank: "war früher
       schonmal so"). Damit folgt er dem Phone-Frame auf Desktop, statt
       am Viewport-Rand zu kleben. position: absolute zum .app-Container
       (.app hat position: relative im Phone-Frame-Block). */
    .sw-update-banner {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: calc(12px + env(safe-area-inset-bottom, 0px));
      z-index: 9998;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 8px 24px -8px rgba(42, 42, 42, 0.18),
                  0 2px 8px -2px rgba(42, 42, 42, 0.10);
      padding: 12px 14px;
      display: none;
      align-items: center;
      gap: 10px;
      transform: translateY(20px);
      opacity: 0;
      transition: transform 220ms ease, opacity 220ms ease;
    }
    .sw-update-banner.is-visible {
      display: flex;
      transform: translateY(0);
      opacity: 1;
    }
    .sw-update-banner-icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--primary-soft, #E6EEE8);
      color: var(--primary);
      border-radius: 50%;
    }
    .sw-update-banner-icon svg { width: 16px; height: 16px; }
    .sw-update-banner-text {
      flex: 1;
      font-size: 14px;
      line-height: 1.35;
      color: var(--text);
    }
    .sw-update-banner-btn {
      flex-shrink: 0;
      padding: 8px 14px;
      border: 0;
      border-radius: 999px;
      background: var(--primary);
      color: #fff;
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }
    .sw-update-banner-btn:active { transform: scale(0.97); }
    .sw-update-banner-close {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 0;
      color: var(--text-subtle);
      font-size: 18px;
      cursor: pointer;
    }

    /* ==========================================
       INFO-NEU (b132) — neue Info-Seite parallel
       --------------------------------------------------------
       Wird unter #info-neu erreicht (alte #info bleibt intakt).
       Stilistisch nah an den .info-section Klassen, aber mit:
       - explizitem 💡-Tipp-Block
       - Visual-Container für echte Screenshots
       - PWA-Install als details/summary-Akkordeon
       ========================================== */

    /* Sektion als Karte mit Rahmen, abgesetzt durch margin-bottom.
       Background = surface (etwas heller als Page-Cream), gibt sanften
       Karten-Charakter ohne harten weißen Look. */
    .info-neu-section {
      padding: 22px 20px 24px;
      background: var(--surface);
      border: 1px solid var(--border-tertiary);
      border-radius: 14px;
      margin: 0 20px 14px;
    }
    /* Erste Sektion: etwas mehr Abstand zum Page-Title oben */
    .info-neu-section:first-of-type { margin-top: 4px; }

    /* Sektion-Title: gleiche Größe + gleiches Font-Weight wie Page-Title
       für visuelle Hierarchie-Konsistenz. Farbe = primary durchgängig. */
    .info-neu-title {
      font-family: 'Fraunces', Georgia, "Times New Roman", serif;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--primary);
      line-height: 1.3;
      margin: 0 0 12px;
    }
    .info-neu-body {
      font-size: 15.5px;
      color: var(--text);
      line-height: 1.55;
      margin: 0 0 16px;
    }
    .info-neu-body:last-child { margin-bottom: 0; }
    .info-neu-body strong { font-weight: 600; }

    /* Visual: Container für Screenshot-Bilder, mit Border + Border-Radius */
    .info-neu-visual-img {
      border: 1px solid var(--border-tertiary);
      border-radius: 14px;
      margin: 8px 0 0;
      overflow: hidden;
      display: block;
    }
    .info-neu-visual-img img {
      width: 100%;
      display: block;
      height: auto;
    }

    /* Tier-Coins für Sektion 2 (4 Coins nebeneinander mit Labels) */
    .info-neu-tiers {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      justify-items: center;
      background: var(--surface);
      border: 1px solid var(--border-tertiary);
      border-radius: 14px;
      padding: 18px 12px;
      margin: 8px 0 0;
    }
    .info-neu-tier { text-align: center; }
    .info-neu-tier img {
      width: 76px;
      height: 76px;
      object-fit: contain;
      display: block;
    }
    .info-neu-tier-label {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 500;
      margin-top: 4px;
    }
    .info-neu-tier.tier-home .info-neu-tier-label {
      color: var(--primary);
      font-weight: 600;
    }

    /* 💡-Tipp-Block (mint-getönt, mit Markengrün-Border) */
    .info-neu-tipp {
      background: #F4F8F0;
      border: 1px solid #DCE6D2;
      border-radius: 10px;
      padding: 12px 14px;
      font-size: 14px;
      color: var(--text);
      line-height: 1.55;
      margin: 16px 0 0;
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
    .info-neu-tipp-icon { flex-shrink: 0; line-height: 1.3; }
    .info-neu-tipp-body { flex: 1; }

    /* PWA-Install-Akkordeon (zugeklappt by default, native details/summary).
       Größerer Top-Margin (24px statt 14px wie zwischen Karten) damit das
       Akkordeon visuell als „Tooling" vom Content-Block davor abgesetzt ist.
       Horizontale Margins identisch zu .info-neu-section (20px). */
    details.info-neu-install {
      background: var(--surface);
      border: 1px solid var(--border-tertiary);
      border-radius: 14px;
      padding: 16px 20px;
      margin: 24px 20px 14px;
    }
    details.info-neu-install summary {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 19px;
      font-weight: 500;
      color: var(--primary);
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 4px 0;
    }
    details.info-neu-install summary::-webkit-details-marker { display: none; }
    details.info-neu-install summary::after {
      content: '▾';
      margin-left: auto;
      color: var(--text-muted);
      font-size: 16px;
      transition: transform 200ms ease;
    }
    details.info-neu-install[open] summary::after { transform: rotate(180deg); }
    details.info-neu-install[open] summary { margin-bottom: 18px; }
    .info-neu-install-intro {
      font-size: 14.5px;
      color: var(--text);
      margin: 0 0 8px;
      line-height: 1.55;
    }
    .info-neu-install-platform-label {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 15px;
      font-weight: 500;
      color: var(--text);
      margin: 22px 0 6px;
    }
    .info-neu-install-steps { list-style: none; padding: 0; margin: 0; }
    .info-neu-install-steps li {
      font-size: 14px;
      color: var(--text);
      padding: 6px 0;
      line-height: 1.55;
    }
    .info-neu-install-outro {
      margin-top: 22px;
      padding: 14px 16px;
      background: #F4F8F0;
      border: 1px solid #DCE6D2;
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 13.5px;
      color: var(--text);
    }
    .info-neu-install-app-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }
    .info-neu-install-app-icon img {
      width: 56px;
      height: 56px;
      border-radius: 13px;
      display: block;
    }
    .info-neu-install-app-icon span {
      font-size: 11px;
      color: var(--text-muted);
    }