/* ============================================================
       PHILIPPS WELT — GEMEINSAMES DESIGN-SYSTEM (LIQUID GLASS, DARK MODE)
       Von allen Seiten (index.html, reisen.html, reise-detail.html)
       gemeinsam genutztes Stylesheet — eine Änderung hier wirkt überall.
       ============================================================ */

    :root {
      --bg-gradient: linear-gradient(135deg, #09090b 0%, #1e1b4b 100%);
      --surface-overlay: rgba(9, 9, 11, 0.55);
      --surface-overlay-strong: rgba(9, 9, 11, 0.92);
      --glass-bg: rgba(255, 255, 255, 0.03);
      --glass-border-light: rgba(255, 255, 255, 0.12);
      --glass-border-dark: rgba(255, 255, 255, 0.02);
      --glass-blur: blur(24px);
      --glass-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);

      --text-primary: #f8fafc;
      --text-secondary: #94a3b8;
      --accent-cyan: #22d3ee;
      --accent-purple: #c084fc;
      /* Gleiche Farben als "r, g, b"-Komponenten — nötig, um sie in
         rgba(var(--accent-cyan-rgb), X) einzusetzen (z.B. in Keyframes),
         wo eine Hex-Variable direkt nicht funktioniert. */
      --accent-cyan-rgb: 34, 211, 238;
      --accent-purple-rgb: 192, 132, 252;

      /* Weltkarte: Ozean-Grund + Land-Einfärbung im Dunkel-Modus (siehe
         renderCountryGlow()) — zieht mit den Themen mit. */
      --map-ocean: #0b0b12;
      --map-land: rgba(255, 255, 255, 0.045);
      --map-land-border: rgba(255, 255, 255, 0.16);

      --radius: 20px;
      --nav-height: 76px;
    }

    /* ---------------------------------------------------------- */
    /* Easter-Egg-Farbthemen — Klick auf das Logo oben links       */
    /* rotiert durch: Standard → Beige/Braun → Rot/Rubin → Weiß →   */
    /* Standard. Jedes Thema definiert nur dieselben Variablen neu  */
    /* (siehe :root oben), der Rest des CSS bleibt unverändert —    */
    /* Variablennamen (--accent-cyan/--accent-purple) sind bewusst  */
    /* stabile IDs, nicht Farbbeschreibungen. Die Weltkarte (Ozean/  */
    /* Land/Pins) liest --map-* und --accent-*-rgb zur Laufzeit per JS */
    /* aus (siehe renderCountryGlow()/getPinColors()) und zieht damit */
    /* ebenfalls mit. Bewusst weiterhin NICHT themed: Scrims/Overlays */
    /* (Modal, Hero-Video-Abdunklung, Leaflet-Popups) — die bleiben   */
    /* überall dunkel, genau wie ein Modal-Backdrop auch in hellen    */
    /* Apps üblicherweise dunkel bleibt. */
    :root[data-theme="beige"] {
      --bg-gradient: linear-gradient(135deg, #1b1410 0%, #3d2a1a 100%);
      --surface-overlay: rgba(20, 14, 10, 0.55);
      --surface-overlay-strong: rgba(20, 14, 10, 0.92);
      --glass-bg: rgba(255, 245, 230, 0.05);
      --glass-border-light: rgba(255, 235, 210, 0.14);
      --glass-border-dark: rgba(0, 0, 0, 0.08);
      --glass-shadow: 0 30px 60px rgba(20, 10, 0, 0.5);
      --text-primary: #f5e9d8;
      --text-secondary: #c2a582;
      --accent-cyan: #d9a441;
      --accent-purple: #dba066;
      --accent-cyan-rgb: 217, 164, 65;
      --accent-purple-rgb: 219, 160, 102;
      --map-ocean: #150f0b;
      --map-land: rgba(255, 235, 210, 0.05);
      --map-land-border: rgba(255, 225, 195, 0.18);
    }

    :root[data-theme="ruby"] {
      --bg-gradient: linear-gradient(135deg, #1a0508 0%, #450a1e 100%);
      --surface-overlay: rgba(20, 4, 8, 0.55);
      --surface-overlay-strong: rgba(20, 4, 8, 0.92);
      --glass-bg: rgba(255, 230, 235, 0.04);
      --glass-border-light: rgba(255, 210, 220, 0.14);
      --glass-border-dark: rgba(0, 0, 0, 0.08);
      --glass-shadow: 0 30px 60px rgba(20, 0, 5, 0.55);
      --text-primary: #fdf2f4;
      --text-secondary: #d9a3ad;
      --accent-cyan: #f6708f;
      --accent-purple: #e56a89;
      --accent-cyan-rgb: 246, 112, 143;
      --accent-purple-rgb: 229, 106, 137;
      --map-ocean: #130308;
      --map-land: rgba(255, 220, 225, 0.045);
      --map-land-border: rgba(255, 200, 210, 0.16);
    }

    :root[data-theme="white"] {
      --bg-gradient: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
      --surface-overlay: rgba(255, 255, 255, 0.7);
      --surface-overlay-strong: rgba(255, 255, 255, 0.94);
      --glass-bg: rgba(15, 23, 42, 0.035);
      --glass-border-light: rgba(15, 23, 42, 0.1);
      --glass-border-dark: rgba(15, 23, 42, 0.04);
      --glass-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
      --text-primary: #0f172a;
      --text-secondary: #4f5b70;
      --accent-cyan: #0369a1;
      --accent-purple: #c2410c;
      --accent-cyan-rgb: 3, 105, 161;
      --accent-purple-rgb: 194, 65, 12;
      --map-ocean: #eef1f8;
      --map-land: rgba(15, 23, 42, 0.05);
      --map-land-border: rgba(15, 23, 42, 0.18);
    }

    /* ---------------------------------------------------------- */
    /* Reset & Grundlagen                                          */
    /* ---------------------------------------------------------- */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* Muss vor allen anderen Regeln stehen bzw. mit !important gelten:
       ohne das gewinnt z.B. ".modal-overlay { display: flex }" gegen die
       Browser-Standardregel "[hidden]{display:none}", weil beide dieselbe
       Spezifität haben und Autor-Styles Browser-Styles sonst überstimmen —
       Elemente mit [hidden] blieben dadurch sichtbar. */
    [hidden] {
      display: none !important;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
      background: var(--bg-gradient);
      color: var(--text-primary);
      min-height: 100vh;
      overflow-x: hidden;
      position: relative;
    }

    /* Schwebende "Aurora"-Blobs hinter allem — geben dem Glas Tiefe & Farbe */
    body::before,
    body::after {
      content: "";
      position: fixed;
      z-index: -1;
      border-radius: 50%;
      filter: blur(90px);
      opacity: 0.5;
      pointer-events: none;
    }

    body::before {
      width: 45vw;
      height: 45vw;
      top: -10%;
      left: -10%;
      background: var(--accent-purple);
      animation: float-a 22s ease-in-out infinite alternate;
    }

    body::after {
      width: 40vw;
      height: 40vw;
      bottom: -15%;
      right: -10%;
      background: var(--accent-cyan);
      animation: float-b 26s ease-in-out infinite alternate;
    }

    @keyframes float-a {
      0%   { transform: translate(0, 0) scale(1); }
      100% { transform: translate(8vw, 10vh) scale(1.15); }
    }

    @keyframes float-b {
      0%   { transform: translate(0, 0) scale(1); }
      100% { transform: translate(-6vw, -8vh) scale(1.1); }
    }

    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }
    img, video { max-width: 100%; display: block; }

    .section {
      padding: 120px 6vw;
      max-width: 1280px;
      margin: 0 auto;
      position: relative;
      /* Ohne das landet die Sektions-Überschrift + der Button beim
         Klick auf einen Nav-Link (#map/#status/...) exakt unter der
         fixierten Navbar und wird von ihr verdeckt — nur der Inhalt
         darunter (z.B. die Karte) bleibt sichtbar. */
      scroll-margin-top: calc(var(--nav-height) + 16px);
    }

    .section-header {
      margin-bottom: 48px;
      text-align: center;
    }

    .section-label {
      display: inline-block;
      font-size: 0.8rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent-cyan);
      margin-bottom: 12px;
    }

    .section-title {
      font-size: clamp(1.8rem, 3.5vw, 2.6rem);
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .section-subtitle {
      color: var(--text-secondary);
      margin-top: 10px;
      font-size: 1rem;
    }

    /* ---------------------------------------------------------- */
    /* Liquid Glass — Basiskomponente                              */
    /* ---------------------------------------------------------- */
    .glass-card {
      background: var(--glass-bg);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-radius: var(--radius);
      border-top: 1px solid var(--glass-border-light);
      border-left: 1px solid var(--glass-border-light);
      border-bottom: 1px solid var(--glass-border-dark);
      border-right: 1px solid var(--glass-border-dark);
      box-shadow: var(--glass-shadow);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .glass-card:hover {
      transform: translateY(-5px) scale(1.01);
      box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
    }

    /* ---------------------------------------------------------- */
    /* Navigation                                                   */
    /* ---------------------------------------------------------- */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: var(--nav-height);
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 6vw;
      /* Vorher nur var(--surface-overlay) — ein neutraler dunkel/hell-Ton,
         keine Akzentfarbe. Dadurch wirkte die Leiste bei jedem Thema fast
         gleich gräulich und Themen mit ähnlicher Helligkeit (z.B. Beige vs.
         Standard, beide dunkel) waren an der immer sichtbaren Navbar kaum
         zu unterscheiden. Jetzt zusätzlich ein sanfter Verlauf aus den
         beiden Akzentfarben oben drauf, damit jedes Thema hier klar erkennbar
         seine eigene Farbe zeigt. */
      background: linear-gradient(120deg, rgba(var(--accent-cyan-rgb), 0.16), rgba(var(--accent-purple-rgb), 0.12)), var(--surface-overlay);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--glass-border-light);
    }

    .navbar__logo {
      font-weight: 700;
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .navbar__logo span {
      color: var(--accent-cyan);
    }

    /* Logo-Mark: "PK"-Monogramm (Philipp Kleemeyer) mit gemeinsamem
       vertikalem Strich für P und K. Der umgebende Ring ist meistens ein
       geschlossener Kreis; periodisch drehen sich die Buchstaben einmal
       komplett, während der Ring sich zu einem rotierenden Ladebalken-
       Segment zusammenzieht — und schließt sich danach wieder zum vollen
       Kreis, sobald die Buchstaben wieder aufrecht stehen. Zieht die
       Theme-Farben automatisch über var() mit. Verstecktes Easter Egg:
       Klick rotiert das Farbthema durch (siehe initThemeToggle() im
       Skript) — bewusst ohne optischen Hinweis, dass hier ein Button sitzt. */
    .logo-mark {
      width: 30px;
      height: 30px;
      cursor: pointer;
      overflow: visible;
    }

    .logo-mark__letters {
      transform-box: fill-box;
      transform-origin: 50% 50%;
      animation: logo-letters-spin 8s ease-in-out infinite;
    }

    .logo-mark__ring {
      /* Umfang bei r=14: 2·π·14 ≈ 88 — auf diese Zahl sind die
         stroke-dasharray-Werte unten abgestimmt. */
      animation: logo-ring-cycle 8s ease-in-out infinite;
    }

    @keyframes logo-letters-spin {
      0%, 28%  { transform: rotate(0deg); }
      72%      { transform: rotate(360deg); }
      100%     { transform: rotate(360deg); }
    }

    @keyframes logo-ring-cycle {
      0%, 22%  { stroke-dasharray: 88 0;  stroke-dashoffset: 0; }
      30%      { stroke-dasharray: 20 68; stroke-dashoffset: 0; }
      70%      { stroke-dasharray: 20 68; stroke-dashoffset: -176; }
      78%, 100% { stroke-dasharray: 88 0; stroke-dashoffset: -176; }
    }

    @media (prefers-reduced-motion: reduce) {
      .logo-mark__letters,
      .logo-mark__ring {
        animation: none;
      }
    }

    .navbar__links {
      display: flex;
      gap: 32px;
      font-size: 0.9rem;
      color: var(--text-secondary);
    }

    /* Entfernt den nativen grauen/blauen Tap-Flash mobiler Browser bei
       <button>-Elementen (Profil-Menü: Trigger + "Berechtigungen"/"Passwort
       ändern"/"Abmelden") — <a>/<summary> (Reise/Ich/Dashboard) zeigen den
       standardmäßig nicht, ohne diese Regel sah ein Tap auf "philipp ▾" auf
       dem Handy kurz anders aus als ein Tap auf "Ich"/"Dashboard". */
    .navbar__auth,
    .auth-menu button,
    .auth-menu a {
      -webkit-tap-highlight-color: transparent;
    }

    /* Liquid-Glass-Hover statt Unterstrich: ein zartes Glas-Pill hinter
       dem Wort, mit Blur + Cyan-Glow — passt zur restlichen Glass-Optik. */
    .navbar__links a,
    .navbar__auth {
      display: inline-flex;
      align-items: center;
      padding: 7px 16px;
      border-radius: 999px;
      border: 1px solid transparent;
      background: none;
      appearance: none;
      -webkit-appearance: none;
      font: inherit;
      font-weight: 600;
      color: inherit;
      cursor: pointer;
      transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease,
        box-shadow 0.25s ease;
    }

    .navbar__links a:hover,
    .navbar__auth:hover {
      color: var(--text-primary);
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-color: var(--glass-border-light);
      box-shadow: 0 0 16px rgba(var(--accent-cyan-rgb), 0.25);
    }

    .navbar__toggle {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      background: none;
      appearance: none;
      -webkit-appearance: none;
      border: 1px solid transparent;
      padding: 12px;
      border-radius: 999px;
      transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .navbar__toggle:hover {
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-color: var(--glass-border-light);
      box-shadow: 0 0 16px rgba(var(--accent-cyan-rgb), 0.25);
    }

    .navbar__toggle span {
      width: 24px;
      height: 2px;
      background: var(--text-primary);
      border-radius: 2px;
    }

    /* "Dashboard"-Aufklapppunkt in der Navbar (Raspberry Pi / Minecraft):
       <details>/<summary> statt eigenem JS-Toggle — nativ klickbar UND per
       Tastatur bedienbar, ohne dass jede Seite eigenes Skript dafür bräuchte. */
    .navbar__dropdown {
      position: relative;
    }

    .navbar__dropdown > summary {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 16px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-weight: 600;
      cursor: pointer;
      list-style: none;
      transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease,
        box-shadow 0.25s ease;
    }

    .navbar__dropdown > summary::-webkit-details-marker {
      display: none;
    }

    .navbar__dropdown > summary:hover {
      color: var(--text-primary);
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-color: var(--glass-border-light);
      box-shadow: 0 0 16px rgba(var(--accent-cyan-rgb), 0.25);
    }

    .navbar__dropdown-chevron {
      display: inline-block;
      font-size: 1.1em;
      transition: transform 0.25s ease;
    }

    .navbar__dropdown[open] > summary .navbar__dropdown-chevron {
      transform: rotate(180deg);
    }

    /* Ausklapp-Animation, gemeinsam für "Ich"/"Dashboard" (native
       <details>) UND "Profil" (.auth-menu, JS-gesteuert per [hidden]) —
       zwei Varianten, weil .navbar__dropdown-menu zusätzlich horizontal
       zentriert (translateX(-50%)) sein muss und .auth-menu nicht (rechts-
       bündig am eigenen Auslöser, siehe Kommentar dort); eine reine
       translateY-Keyframe würde bei .navbar__dropdown-menu sonst kurzzeitig
       die Zentrierung "vergessen". CSS-Animationen laufen zuverlässig an,
       sobald ein Element von display:none auf sichtbar wechselt (bei
       <details> durchs [open]-Attribut, bei .auth-menu durchs Wegfallen von
       [hidden]) — dafür reicht hier reines CSS, ohne JS-Timing. */
    @keyframes navbar-dropdown-in-centered {
      from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
      to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }
    @keyframes navbar-dropdown-in-right {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .navbar__dropdown[open] > .navbar__dropdown-menu {
      animation: navbar-dropdown-in-centered 0.18s ease;
    }
    .auth-menu {
      animation: navbar-dropdown-in-right 0.18s ease;
    }

    /* Eigene Glas-Optik statt der geteilten .glass-card-Klasse: die hätte
       via .glass-card:hover ("transform: translateY(-5px) scale(1.01)")
       das zentrierende "transform: translateX(-50%)" hier unten komplett
       überschrieben, sobald man über einen Link im Menü hovert — das Menü
       "vergaß" seine Zentrierung und sprang um seine halbe Breite nach
       rechts (+ leicht hoch/größer). Deshalb absichtlich EIGENE, feste
       Werte ohne :hover-Transform. */
    .navbar__dropdown-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 150;
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 8px;
      min-width: 190px;
      /* Stärker abgedunkelt + stärker geblurt als der normale --glass-bg-Ton
         (nur 3% Tönung) — das Menü schwebt über wechselndem Hintergrund
         (Hero-Video, Seiteninhalt beim Scrollen), da reichte die normale
         Glasoptik nicht für zuverlässig lesbaren Text. Bleibt bewusst
         durchscheinend (kein --surface-overlay-strong) statt blickdicht,
         damit der Liquid-Glass-Look erhalten bleibt. */
      background: var(--surface-overlay);
      border-radius: var(--radius);
      border-top: 1px solid var(--glass-border-light);
      border-left: 1px solid var(--glass-border-light);
      border-bottom: 1px solid var(--glass-border-dark);
      border-right: 1px solid var(--glass-border-dark);
      backdrop-filter: blur(60px) saturate(150%);
      -webkit-backdrop-filter: blur(60px) saturate(150%);
      box-shadow: var(--glass-shadow);
    }

    .navbar__dropdown-menu a {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      border-radius: 8px;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 0.85rem;
      white-space: nowrap;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .navbar__dropdown-menu a:hover {
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-primary);
    }

    /* ---------------------------------------------------------- */
    /* Hero                                                          */
    /* ---------------------------------------------------------- */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
    }

    .hero__media {
      position: absolute;
      inset: 0;
      z-index: -2;
    }

    .hero__video,
    .hero__poster {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero__poster {
      background: radial-gradient(circle at 30% 20%, rgba(var(--accent-purple-rgb), 0.25), transparent 55%),
                  radial-gradient(circle at 75% 75%, rgba(var(--accent-cyan-rgb), 0.22), transparent 55%),
                  var(--bg-gradient);
    }

    .hero__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(9, 9, 11, 0.35) 0%, rgba(9, 9, 11, 0.85) 100%);
      z-index: -1;
    }

    .hero__content {
      padding: 0 24px;
      max-width: 720px;
    }

    .hero__badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 18px;
      border-radius: 999px;
      font-size: 0.78rem;
      letter-spacing: 0.05em;
      margin-bottom: 28px;
      color: var(--text-primary);
    }

    .hero__badge-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent-cyan);
      box-shadow: 0 0 12px var(--accent-cyan);
    }

    .hero__title {
      font-size: clamp(2.4rem, 6vw, 4.2rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.05;
      background: linear-gradient(120deg, var(--text-primary) 40%, var(--accent-cyan) 70%, var(--accent-purple) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 18px;
    }

    /* Blinkender Cursor hinter dem getippten Hero-Titel (siehe
       typeHeroTitle() im <script> von index.html) — eigenes Element statt
       Teil des Textes, weil .hero__title den Text per background-clip auf
       transparent setzt (Gradient-Optik) und der Cursor stattdessen deckend
       bleiben soll. */
    .hero__cursor {
      display: inline-block;
      width: 0.06em;
      margin-left: 0.05em;
      background: var(--accent-cyan);
      box-shadow: 0 0 10px var(--accent-cyan);
      /* An die Zeilenhöhe des Titel-Texts angeglichen statt fixer px-Höhe,
         damit der Strich bei jeder clamp()-Schriftgröße passt. */
      height: 0.82em;
      vertical-align: -0.08em;
      animation: hero-cursor-blink 1s step-end infinite;
    }

    /* Nach dem letzten Zeichen blinkt der Cursor noch genau 2x (statt
       endlos weiter) — animationend in typeHeroTitle() hängt danach
       .hero__cursor--done dran. */
    .hero__cursor--finishing {
      animation: hero-cursor-blink 1s step-end 2;
    }

    .hero__cursor--done {
      animation: none;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    @keyframes hero-cursor-blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero__cursor {
        animation: none;
        opacity: 1;
      }
    }

    .hero__subtitle {
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: var(--text-secondary);
      margin-bottom: 36px;
    }

    .hero__subtitle strong {
      color: var(--text-primary);
      font-weight: 600;
    }

    .hero__scroll {
      position: absolute;
      bottom: 36px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: var(--text-secondary);
      font-size: 0.75rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      animation: bounce 2.4s ease-in-out infinite;
    }

    .hero__scroll-line {
      width: 1px;
      height: 32px;
      background: linear-gradient(180deg, var(--accent-cyan), transparent);
    }

    @keyframes bounce {
      0%, 100% { transform: translate(-50%, 0); }
      50%      { transform: translate(-50%, 8px); }
    }

    /* ---------------------------------------------------------- */
    /* Badges — Kenntnisse (Lebenslauf) & Tech-Stack (Person)         */
    /* ---------------------------------------------------------- */
    .badge-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--glass-border-light);
      font-size: 0.88rem;
      color: var(--text-primary);
      cursor: default;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Badges, die echte Links sind (z.B. Demo-Projekte), zeigen einen
       Zeigefinger-Cursor statt des Default-Cursors der übrigen Badges. */
    .badge[href] { cursor: pointer; }

    .badge__icon { font-size: 1rem; line-height: 1; }

    .badge:hover {
      transform: translateY(-3px);
      border-color: var(--accent-cyan);
      box-shadow: 0 0 18px rgba(var(--accent-cyan-rgb), 0.45), 0 0 36px rgba(var(--accent-cyan-rgb), 0.15);
      color: var(--accent-cyan);
    }


    /* ---------------------------------------------------------- */
    /* Weltkarte / Leaflet                                          */
    /* ---------------------------------------------------------- */

    /* Wiederverwendbares Status-Pill (Reise-Status auf Zeitleiste,       */
    /* Kacheln & Detailseite). */
    .trip-status {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 0.68rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .trip-status--aktiv     { background: rgba(var(--accent-cyan-rgb), 0.15); color: var(--accent-cyan); }
    .trip-status--geplant   { background: rgba(var(--accent-purple-rgb), 0.15); color: var(--accent-purple); }
    .trip-status--abgeschlossen { background: rgba(148, 163, 184, 0.15); color: var(--text-secondary); }

    /* Karte bewusst NICHT mit voller .glass-card-Ausstattung (kein
       backdrop-filter-Blur, keine doppelte Hell/Dunkel-Randkante) — bei
       einer großen, satten Kartenfläche wirkt das schnell wie ein dicker
       Rahmen. Stattdessen: ein schlanker, einheitlicher Rand, sauber
       abgerundet, gleiche Formsprache wie die übrigen Fenster.
       Standardhöhe passt für die Dashboard-Seite (reisen.html); die
       Startseiten-Vorschau und die Detailseiten-Karte sind kleiner. */
    /* Leaflet setzt intern hohe z-index-Werte (Zoom-/Ebenen-Controls:
       1000, Karten-Panes: bis 700) OHNE selbst eine eigene Stacking-
       Context zu öffnen (".leaflet-container" hat position:relative,
       aber keinen eigenen z-index). Dadurch "entkommen" diese Werte
       nach oben und wurden mit der fixierten .navbar (z-index: 100)
       im gemeinsamen Eltern-Kontext verglichen — die Leaflet-Controls
       (+/- Zoom, Ebenen-Umschalter, Leaflet-Logo) lagen dadurch beim
       Scrollen ÜBER dem Header statt dahinter. Fix: .map-container
       bekommt selbst eine eigene Stacking-Context (position + z-index),
       die alles aus Leaflet einschließt — die Karte kann so nie mehr
       über den Header ragen, egal welchen z-index Leaflet intern nutzt. */
    .map-container {
      position: relative;
      z-index: 0;
      height: 520px;
      overflow: hidden;
      border-radius: var(--radius);
      border: 1px solid var(--glass-border-light);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
      transition: filter 0.3s ease;
    }

    .map-container--preview { height: 420px; }
    .map-container--detail { height: 340px; }

    /* Leaflet nutzt intern CSS-Transforms (translate3d) fürs Kacheln-
       Pannen/Zoomen — dadurch läuft die Karte in einer eigenen GPU-
       Compositing-Ebene, die "backdrop-filter" auf dem Modal-Overlay in
       vielen Browsern NICHT mitblurrt (bekannte Einschränkung, kein Bug
       in unserem CSS). Fix: Statt uns auf backdrop-filter zu verlassen,
       bekommt die Karte selbst einen direkten filter:blur(), sobald das
       "Neue Reise"-Modal offen ist (siehe initAddTripUi()/openTripModal()
       im Skript weiter unten). */
    .map-container--blurred {
      filter: blur(14px);
    }

    #leaflet-map,
    .leaflet-container {
      width: 100%;
      height: 100%;
      background: var(--map-ocean);
      border-radius: var(--radius);
    }

    /* Leaflet Popup im Glass-Look */
    .leaflet-popup-content-wrapper {
      background: rgba(15, 15, 20, 0.85) !important;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      color: var(--text-primary) !important;
      border: 1px solid var(--glass-border-light);
      border-radius: 14px !important;
    }

    .leaflet-popup-tip {
      background: rgba(15, 15, 20, 0.85) !important;
    }

    .leaflet-popup-content b { color: var(--accent-cyan); }

    .map-popup__title { font-weight: 700; margin-bottom: 4px; }
    .map-popup__meta { font-size: 0.78rem; color: var(--text-secondary); }

    /* Namens-Label über den Pins einer Karten-Kachel (initMapTiles() in
       reise-detail.html, "Ortsnamen anzeigen" aktiviert) — dauerhaft
       sichtbares Leaflet-Tooltip statt Hover-Popup, im selben Glas-Look
       wie .leaflet-popup-content-wrapper, nur kompakter. */
    .map-tile-label {
      background: rgba(15, 15, 20, 0.85) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      color: var(--text-primary) !important;
      border: 1px solid var(--glass-border-light) !important;
      border-radius: 8px !important;
      padding: 2px 8px !important;
      font-size: 0.72rem !important;
      font-weight: 600;
      box-shadow: none !important;
    }

    .map-tile-label::before {
      border-top-color: rgba(15, 15, 20, 0.85) !important;
    }

    /* Liquid-Glass-Pinnadel (SVG divIcon): schlanke Tropfenform mit
       diagonalem Glas-Glanz, facettiertem Kern (Ring + Radial-Glanz) und
       farbigem Glow — Farbe kommt pro Marker über die CSS-Variable
       --glow-color aus dem JS-Aufruf. Nur der Startort einer Reise
       bekommt diese große Pinnadel, weitere Stopps die kleine
       .glass-waypoint (siehe unten). */
    .glass-pin-wrap {
      filter: drop-shadow(0 0 8px var(--glow-color)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
      animation: pin-float 2.6s ease-in-out infinite;
      transform-origin: bottom center;
    }

    @keyframes pin-float {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-3px); }
    }

    .glass-pin-wrap--draft {
      animation: pin-float 1s ease-in-out infinite;
    }

    /* Kleine Wegpunkt-Pinnadel für weitere Stopps einer Mehr-Orte-Reise
       (alles außer dem Startort) — ruhiger Punkt statt Tropfen, damit der
       Startort visuell klar hervorsticht. */
    .glass-waypoint {
      filter: drop-shadow(0 0 5px var(--glow-color)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    }

    /* Länder-Grenzen (GeoJSON): besuchte Länder leuchten, der Rest bleibt
       nahezu unsichtbar und stört die Basiskarte nicht. */
    /* Weicher Glow statt scharfer Polygon-Kante: blur() rundet die
       eigentlich eckige Landesgrenze zu einem "leuchtenden" Umriss ab. */
    .country-visited {
      animation: country-pulse 3.2s ease-in-out infinite;
    }

    @keyframes country-pulse {
      0%, 100% {
        filter: blur(2.5px)
                drop-shadow(0 0 6px rgba(var(--accent-cyan-rgb), 0.6))
                drop-shadow(0 0 16px rgba(var(--accent-cyan-rgb), 0.35));
      }
      50% {
        filter: blur(3.5px)
                drop-shadow(0 0 14px rgba(var(--accent-cyan-rgb), 1))
                drop-shadow(0 0 30px rgba(var(--accent-cyan-rgb), 0.6));
      }
    }

    /* ---------------------------------------------------------- */
    /* "Neue Reise"-Button, Platzierungs-Hinweis & Formular-Modal   */
    /* ---------------------------------------------------------- */
    .section-header--row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      text-align: left;
      flex-wrap: wrap;
    }

    .section-header--row .section-header-text { text-align: left; }

    .btn-primary,
    .btn-ghost {
      display: inline-block;
      font: inherit;
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      border-radius: 12px;
      padding: 11px 20px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      white-space: nowrap;
    }

    .btn-primary {
      background: rgba(var(--accent-cyan-rgb), 0.12);
      border: 1px solid var(--accent-cyan);
      color: var(--accent-cyan);
    }

    .btn-primary:hover {
      background: rgba(var(--accent-cyan-rgb), 0.2);
      box-shadow: 0 0 18px rgba(var(--accent-cyan-rgb), 0.45), 0 0 36px rgba(var(--accent-cyan-rgb), 0.15);
      transform: translateY(-2px);
    }

    .btn-ghost {
      background: transparent;
      border: 1px solid var(--glass-border-light);
      color: var(--text-secondary);
    }

    .btn-ghost:hover {
      color: var(--text-primary);
      border-color: var(--text-secondary);
    }

    /* Für destruktive Aktionen (z.B. "Reise löschen" bestätigen) — gleiche
       Form wie .btn-primary, nur in Warnrot statt Cyan. */
    .btn-danger {
      display: inline-block;
      font: inherit;
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      border-radius: 12px;
      padding: 11px 20px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      white-space: nowrap;
      background: rgba(251, 113, 133, 0.12);
      border: 1px solid #fb7185;
      color: #fb7185;
    }

    .btn-danger:hover {
      background: rgba(251, 113, 133, 0.2);
      box-shadow: 0 0 18px rgba(251, 113, 133, 0.45), 0 0 36px rgba(251, 113, 133, 0.15);
      transform: translateY(-2px);
    }

    .btn-danger:disabled {
      opacity: 0.6;
      cursor: default;
      transform: none;
      box-shadow: none;
    }

    /* Kleiner "Löschen"-Button auf der Reise-Detailseite — dezent, bis er
       gehovert wird (dann klar erkennbar als destruktive Aktion). */
    .trip-detail__delete {
      flex-shrink: 0;
    }

    .trip-detail__delete:hover {
      color: #fb7185;
      border-color: #fb7185;
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(9, 9, 11, 0.68);
      /* -webkit-Präfix nicht vergessen: ohne ihn bleibt der Blur auf
         manchen (v.a. WebKit-basierten) Browsern komplett wirkungslos —
         das war der eigentliche Bug, durch den die Karte im Hintergrund
         unscharf-los "durchschien". */
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .modal-card {
      width: 100%;
      max-width: 480px;
      max-height: 88vh;
      padding: 32px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      overflow: hidden;
      /* .glass-card liefert nur var(--glass-bg) — bei allen Themes absichtlich
         fast durchsichtig, weil es normalerweise auf der eigenen (schon
         themefarbenen) Seite sitzt. Ein Modal schwebt aber über
         .modal-overlay, das FEST dunkel abgedunkelt ist (siehe dort) —
         dadurch schien im Weiß-Theme dieses feste Dunkel durch die fast
         durchsichtige Kachel, während der Text (dunkles Navy fürs Weiß-
         Theme) fürs GEGENTEIL gedacht war: dunkler Text auf fast schwarzem
         Grund, kaum lesbar. var(--surface-overlay-strong) ist wie --glass-bg
         auch je Thema definiert, aber fast deckend — die Kachel setzt sich
         so unabhängig vom dunklen Overlay dahinter klar als HELL (dunkle
         Themes) bzw. DUNKEL (Weiß-Theme) durch, passend zur Textfarbe. */
      background: var(--surface-overlay-strong);
    }

    /* Nur die Felder scrollen — Titel und Speichern/Abbrechen-Buttons
       bleiben immer sichtbar, egal wie lang das Formular ist. */
    .modal-fields {
      display: flex;
      flex-direction: column;
      gap: 16px;
      overflow-y: auto;
      min-height: 0;
      padding-right: 4px;
    }

    .modal-card:hover {
      transform: none;
    }

    .modal-card h3 {
      font-size: 1.3rem;
      margin-bottom: 4px;
    }

    /* .modal-fields kommt normalerweise innerhalb eines .modal-card vor —
       einstellungen.html nutzt dieselbe Klasse aber auch für das "Zugang
       hinzufügen"-Formular direkt in einer .info-tile (kein Modal). Deshalb
       greifen die folgenden Regeln zusätzlich auf .modal-fields selbst,
       nicht nur auf .modal-card, sonst blieben diese Felder auf
       ungestyltem Browser-Standard hängen (winzig, ohne Rahmen/Fokus-Glow). */
    .modal-card label,
    .modal-fields label {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 0.82rem;
      color: var(--text-secondary);
    }

    .modal-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .modal-card input,
    .modal-card select,
    .modal-card textarea,
    .modal-fields input,
    .modal-fields select,
    .modal-fields textarea {
      font: inherit;
      font-size: 0.9rem;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--glass-border-light);
      border-radius: 10px;
      padding: 10px 12px;
      color: var(--text-primary);
      resize: vertical;
    }

    .modal-card input:focus,
    .modal-card select:focus,
    .modal-card textarea:focus,
    .modal-fields input:focus,
    .modal-fields select:focus,
    .modal-fields textarea:focus {
      outline: none;
      border-color: var(--accent-cyan);
      box-shadow: 0 0 0 3px rgba(var(--accent-cyan-rgb), 0.18);
    }

    .modal-card input::placeholder,
    .modal-card textarea::placeholder,
    .modal-fields input::placeholder,
    .modal-fields textarea::placeholder {
      color: rgba(148, 163, 184, 0.55);
    }

    /* Farbthema-Editor (einstellungen.html, "Farben bearbeiten"-Modal):
       <input type="color"> ignoriert Padding/Rahmen-Radius des generischen
       .modal-card-input-Stylings oben (der native Farbwähler-Swatch würde
       sonst gequetscht/verzerrt wirken) — eigene, kompakte Kachel-Optik
       stattdessen. */
    .modal-card input[type="color"],
    .modal-fields input[type="color"] {
      padding: 4px;
      width: 100%;
      height: 40px;
      cursor: pointer;
    }

    .modal-card input[type="color"]::-webkit-color-swatch-wrapper {
      padding: 0;
    }

    .modal-card input[type="color"]::-webkit-color-swatch {
      border: none;
      border-radius: 6px;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      padding-top: 16px;
      border-top: 1px solid var(--glass-border-light);
      flex-shrink: 0;
    }

    .modal-error {
      font-size: 0.82rem;
      color: #fb7185;
    }

    .modal-hint {
      font-size: 0.76rem;
      color: var(--text-secondary);
    }

    /* Ort-Suche (Nominatim-Autocomplete) */
    .place-field {
      position: relative;
    }

    .place-results {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      z-index: 10;
      max-height: 220px;
      overflow-y: auto;
      background: rgba(15, 15, 20, 0.96);
      border: 1px solid var(--glass-border-light);
      border-radius: 12px;
      box-shadow: var(--glass-shadow);
    }

    .place-result {
      padding: 10px 14px;
      font-size: 0.85rem;
      color: var(--text-primary);
      cursor: pointer;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .place-result:last-child { border-bottom: none; }

    .place-result:hover {
      background: rgba(var(--accent-cyan-rgb), 0.1);
      color: var(--accent-cyan);
    }

    .place-result small {
      display: block;
      color: var(--text-secondary);
      font-size: 0.72rem;
      margin-top: 2px;
    }

    /* Mehrere Orte pro Reise: Startort (große Pinnadel) + beliebig viele
       Wegpunkte (kleine Pinnadeln), per "+"-Button hinzugefügt und optisch
       über gestrichelte Verbindungslinien-Punkte im Formular angedeutet —
       spiegelt die gestrichelte Route auf der Karte. */
    .destinations-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .destinations-field__label {
      font-size: 0.82rem;
      color: var(--text-secondary);
    }

    .destination-rows {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .destination-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .destination-row .place-field {
      flex: 1;
      min-width: 0;
    }

    .destination-row__dot {
      position: relative;
      flex-shrink: 0;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--accent-cyan);
      box-shadow: 0 0 6px rgba(var(--accent-cyan-rgb), 0.7);
    }

    .destination-row__dot--stop {
      width: 6px;
      height: 6px;
      margin-left: 2px;
      background: rgba(var(--accent-cyan-rgb), 0.85);
    }

    /* Gestrichelter Verbinder zwischen zwei Orts-Zeilen — visuelles Echo
       der gestrichelten Route auf der Karte. */
    .destination-row:not(:first-child) .destination-row__dot::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 100%;
      width: 0;
      height: 20px;
      border-left: 2px dashed rgba(var(--accent-cyan-rgb), 0.45);
      transform: translateX(-50%);
    }

    .destination-row__remove {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--glass-border-light);
      color: var(--text-secondary);
      font-size: 1rem;
      line-height: 1;
      cursor: pointer;
    }

    .destination-row__remove:hover {
      color: #fb7185;
      border-color: #fb7185;
    }

    .btn-add-destination {
      align-self: flex-start;
      background: rgba(var(--accent-cyan-rgb), 0.08);
      border: 1px dashed var(--glass-border-light);
      border-radius: 10px;
      padding: 8px 14px;
      font-size: 0.82rem;
      font-family: inherit;
      color: var(--accent-cyan);
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }

    .btn-add-destination:hover {
      background: rgba(var(--accent-cyan-rgb), 0.14);
      border-color: var(--accent-cyan);
    }

    /* Breitere Modal-Variante fürs Profil-Formular (Lebenslauf hat deutlich
       mehr Felder als Titel/Datum/Ort einer Reise). */
    .modal-card--wide {
      max-width: 720px;
    }

    /* Wiederverwendbare Formular-Zeile mit "×"-Entfernen-Button — Basis für
       Werdegang-/Schul-Stationen, Sprachen/IT-Tags und Freizeit-Einträge im
       Profil-Formular (ähnliches Muster wie .destination-row, nur mit
       beliebigen Feldern statt nur einem Ort-Input). */
    .edit-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 14px 0;
      border-bottom: 1px solid var(--glass-border-light);
    }

    .edit-row:last-child {
      border-bottom: none;
    }

    .edit-row__fields {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .edit-row__fields .modal-row {
      gap: 8px;
    }

    /* Tech-Stack-Kategorie im Profil-Formular: Titel-Input + eingerückte
       Badge-Liste darunter, damit die Zugehörigkeit (welche Badges gehören
       zu welcher Kategorie) auf einen Blick klar bleibt. */
    .techstack-group__title { font-weight: 700; }

    .techstack-group__items {
      margin-left: 4px;
      padding-left: 14px;
      border-left: 2px dashed var(--glass-border-light);
    }

    .techstack-group__items:empty { display: none; }

    .techstack-group__add-item {
      font-size: 0.78rem;
      padding: 6px 12px;
    }

    /* ---------------------------------------------------------- */
    /* Leaflet-Steuerelemente im Glass-Look (Ebenen-Umschalter,     */
    /* Zoom-Buttons, Attribution)                                    */
    /* ---------------------------------------------------------- */
    .leaflet-control-layers {
      background: rgba(15, 15, 20, 0.92) !important;
      color: var(--text-primary) !important;
      border: 1px solid var(--glass-border-light) !important;
      border-radius: 12px !important;
      box-shadow: var(--glass-shadow);
    }

    .leaflet-control-layers-toggle {
      filter: invert(1) brightness(1.7);
    }

    .leaflet-control-layers-expanded {
      padding: 10px 14px;
    }

    .leaflet-control-layers label {
      font-size: 0.85rem;
      margin-bottom: 6px;
    }

    .leaflet-control-layers-separator {
      border-top: 1px solid var(--glass-border-light);
    }

    .leaflet-bar a {
      background: rgba(15, 15, 20, 0.9) !important;
      color: var(--text-primary) !important;
      border-bottom: 1px solid var(--glass-border-light) !important;
    }

    .leaflet-bar a:hover {
      background: rgba(var(--accent-cyan-rgb), 0.15) !important;
      color: var(--accent-cyan) !important;
    }

    .leaflet-bar {
      border: 1px solid var(--glass-border-light) !important;
    }

    .leaflet-control-attribution {
      background: rgba(15, 15, 20, 0.75) !important;
      color: var(--text-secondary) !important;
    }

    .leaflet-control-attribution a { color: var(--accent-cyan) !important; }



    /* ---------------------------------------------------------- */
    /* Freizeit & Ausgleich                                          */
    /* ---------------------------------------------------------- */
    .freizeit-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 24px;
    }

    .freizeit-card {
      position: relative;
      padding: 28px;
      text-align: center;
    }

    .freizeit-card__icon {
      font-size: 2rem;
      margin-bottom: 14px;
    }

    .freizeit-card__title {
      font-weight: 600;
      margin-bottom: 8px;
    }

    .freizeit-card__list {
      font-size: 0.82rem;
      color: var(--text-secondary);
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
    }

    .freizeit-card__list span {
      padding: 4px 10px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--glass-border-light);
    }

    /* Klickbare Freizeit-Kachel (aktuell nur "Gym-Training" -> sport.html) */
    .freizeit-card--link {
      display: block;
      cursor: pointer;
      text-decoration: none;
      color: inherit;
      border-radius: var(--radius);
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .freizeit-card--link:hover {
      transform: translateY(-4px);
      box-shadow: 0 0 18px rgba(var(--accent-cyan-rgb), 0.25);
      border: 1px solid var(--accent-cyan);
    }

    .freizeit-card__hint {
      margin-top: 10px;
      font-size: 0.74rem;
      color: var(--accent-cyan);
    }

    /* Volle Freizeit-Seite (freizeit.html) — größere Variante derselben
       Karten wie die Vorschau auf person.html, mit sanftem Hover-Lift statt
       der flachen Vorschau-Kacheln dort. */
    .freizeit-grid--large {
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 28px;
    }

    .freizeit-card--large {
      padding: 36px 28px;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .freizeit-card--large:hover {
      transform: translateY(-4px);
      box-shadow: 0 0 18px rgba(var(--accent-cyan-rgb), 0.2);
    }

    .freizeit-card--large .freizeit-card__icon {
      font-size: 2.6rem;
    }

    .freizeit-card--large .freizeit-card__title {
      font-size: 1.1rem;
    }

    /* ---------------------------------------------------------- */
    /* Schnellzugriff — Link-Kacheln (Startseite)                    */
    /* Kernblock (.tile-carousel-track/.tile-card + Breakpoints) 1:1  */
    /* wie vorgegeben, nur Farb-/Radius-Literale durch bestehende     */
    /* Tokens ersetzt. */
    /* ---------------------------------------------------------- */
    .tile-carousel-track{
      display:grid;
      grid-auto-flow:column;
      grid-auto-columns:calc(20% - 13px);
      gap:14px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      scroll-behavior:smooth;
      scrollbar-width:none;
      /* Puffer für den Hover-Lift der Karten (.tile-card:hover translateY):
         "overflow-x:auto" ohne explizites overflow-y zwingt Browser dazu,
         auch overflow-y intern auf "auto" zu setzen (CSS-Spec-Regel gegen
         gemischtes visible/non-visible) — ohne diesen Puffer würde der Lift
         also trotzdem oben abgeschnitten. .tile-carousel-viewport gleicht
         den zusätzlichen Platzbedarf mit einem negativen Margin wieder aus,
         damit sich am sichtbaren Abstand zu Kopfzeile/nächster Sektion
         nichts ändert.
      */
      padding-block:8px;
    }
    .tile-carousel-track::-webkit-scrollbar{ display:none; }
    .tile-card{
      scroll-snap-align:start;
      aspect-ratio:1/1;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      background:var(--glass-bg);
      border:1px solid var(--glass-border-light);
      border-radius:var(--radius);
      backdrop-filter:var(--glass-blur);
      -webkit-backdrop-filter:var(--glass-blur);
      color:var(--text-primary);
      padding:14px;
      text-decoration:none;
      transition:transform .25s ease, border-color .25s ease;
    }
    .tile-card:hover{ transform:translateY(-4px); border-color:var(--accent-cyan); }
    .tile-card:focus-visible{ outline:2px solid var(--accent-cyan); outline-offset:2px; }

    /* Bild-Fläche oben in jeder Dienst-Kachel (index.html, "Meine Dienste")
       — zwei CSS-Background-Layer: ein hochgeladenes Foto (/uploads/…, per
       Einstellungen -> Bilder & Videos mit dem passenden Dateinamen
       hochgeladen) liegt über einem Icon-Platzhalter; fehlt das Foto
       (404), fällt der Layer einfach weg und das Icon bleibt als
       Platzhalter sichtbar — kein JS/Fallback-Handling nötig. */
    .tile-card__cover {
      flex: 1;
      min-height: 0;
      border-radius: calc(var(--radius) - 6px);
      background-repeat: no-repeat, no-repeat;
      background-position: center, center;
      background-size: cover, 40%;
      margin-bottom: 10px;
    }
    .tile-nav-btn:disabled{ opacity:.35; cursor:default; }
    @media (max-width:760px){ .tile-carousel-track{ grid-auto-columns:calc(42% - 8px); } }
    @media (max-width:460px){ .tile-carousel-track{ grid-auto-columns:calc(65% - 6px); } }
    @media (prefers-reduced-motion: reduce){
      .tile-carousel-track{ scroll-behavior:auto; }
      .tile-card{ transition:none; }
    }

    /* Ergänzt: Kopfzeile, Pfeil-Buttons-Basisoptik, Titel/Beschreibung,
       Drag-Cursor — fasst den Kernblock oben nicht an. */
    .tile-carousel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
      margin-bottom: 32px;
    }
    .tile-carousel-head h2 {
      font-size: clamp(1.8rem, 3.5vw, 2.6rem);
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .tile-carousel-nav { display: flex; gap: 10px; }

    .tile-nav-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border-light);
      color: var(--text-primary);
      font: inherit;
      font-size: 1.2rem;
      line-height: 1;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .tile-nav-btn:hover:not(:disabled) { border-color: var(--accent-cyan); color: var(--accent-cyan); }
    .tile-nav-btn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 3px; }

    /* Nur die X-Achse geclippt (Scrollen übernimmt ohnehin
       .tile-carousel-track mit eigenem overflow-x). margin-block gleicht das
       padding-block von .tile-carousel-track aus (siehe Kommentar dort). */
    .tile-carousel-viewport { overflow-x: hidden; overflow-y: visible; margin-block: -8px; }

    .tile-carousel-track { cursor: grab; }
    .tile-carousel-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }

    .tile-card-title { font-weight: 700; font-size: 0.92rem; }
    .tile-card-desc { font-size: 0.74rem; color: var(--text-secondary); margin-top: 4px; }

    /* ---------------------------------------------------------- */
    /* System Status (Pi 5 Live Dashboard)                          */
    /* ---------------------------------------------------------- */
    .status-panel {
      padding: 28px 32px;
      display: flex;
      flex-wrap: wrap;
      gap: 28px;
      align-items: center;
      justify-content: space-between;
    }

    .status-panel__title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.95rem;
      color: var(--text-secondary);
    }

    .status-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #4ade80;
      box-shadow: 0 0 10px #4ade80;
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0.4; }
    }

    .status-metrics {
      display: flex;
      gap: 32px;
      flex-wrap: wrap;
    }

    .status-metric {
      text-align: center;
      min-width: 90px;
    }

    .status-metric__value {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--accent-cyan);
    }

    .status-metric__label {
      font-size: 0.72rem;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-top: 4px;
    }


    /* ---------------------------------------------------------- */
    /* Footer                                                        */
    /* ---------------------------------------------------------- */
    .footer {
      padding: 48px 6vw 32px;
      text-align: center;
      color: var(--text-secondary);
      font-size: 0.82rem;
      border-top: 1px solid var(--glass-border-light);
    }

    .footer a { color: var(--accent-cyan); }

    /* ---------------------------------------------------------- */
    /* Responsive                                                    */
    /* ---------------------------------------------------------- */
    @media (max-width: 860px) {
      .map-container { height: 420px; }
      .trip-detail__grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 720px) {
      .section { padding: 90px 6vw; }

      .navbar__links {
        position: fixed;
        top: var(--nav-height);
        right: 0;
        left: 0;
        flex-direction: column;
        gap: 4px;
        background: var(--surface-overlay-strong);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        padding: 12px 6vw 24px;
        transform: translateY(-110%);
        /* "-110%" der EIGENEN Höhe reichte schon bei 3 Einträgen nicht ganz,
           um im geschlossenen Zustand komplett aus dem Navbar-Bereich zu
           verschwinden (Rest-Stück ragt rechnerisch weiterhin hinein) — mit
           dem 4. Eintrag (Profil, siehe .navbar__auth-wrap unten) reichte
           das nicht mehr aus: das teils-transparente Blur-Panel überlagerte
           sichtbar Logo/Burger-Icon ("Header wirkt leer/transparent"). Fix:
           visibility zusätzlich zu transform — komplett unsichtbar UND
           nicht mehr treffbar im geschlossenen Zustand, unabhängig von der
           tatsächlichen Höhe. Der Delay auf visibility sorgt dafür, dass
           beim ÖFFNEN sofort sichtbar wird (0s-Übergang), beim SCHLIESSEN
           aber erst NACH der Slide-Transition (0.35s) verschwindet, damit
           die Animation selbst sichtbar bleibt. */
        transition: transform 0.35s ease, visibility 0s linear 0.35s;
        visibility: hidden;
        pointer-events: none;
      }

      .navbar__links.is-open {
        transform: translateY(0);
        transition: transform 0.35s ease;
        visibility: visible;
        pointer-events: auto;
      }

      /* Gleiche Pille + Glow-Hover wie "Ich"/"Dashboard" auf Desktop
         (siehe .navbar__links a Basisregel) — hier nur volle Breite statt
         Inline-Pille, mit Abstand per gap statt harter Trennlinie. */
      .navbar__links a {
        padding: 12px 14px;
        width: 100%;
      }

      .navbar__toggle { display: flex; }

      /* Dashboard-Dropdown im mobilen Flyout: volle Breite, flach in die
         Liste eingegliedert statt schwebend, damit es nicht wie eine
         zweite, versetzte Glaskachel über dem Menü wirkt. */
      .navbar__dropdown { width: 100%; }
      .navbar__dropdown > summary {
        padding: 12px 14px;
        width: 100%;
        justify-content: space-between;
      }
      .navbar__dropdown-menu {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        box-shadow: none;
        padding: 0 0 4px 14px;
        min-width: 0;
        /* Die translateX/Y-Fade-Animation (siehe navbar-dropdown-in-*)
           würde hier kurz mit dem "transform: none" oben kollidieren —
           im Flyout übernimmt schon .navbar__links.is-open die Animation. */
        animation: none;
      }

      .status-panel { flex-direction: column; align-items: flex-start; }

      .section-header--row { flex-direction: column; align-items: flex-start; }
      .modal-row { grid-template-columns: 1fr; }
    }

    /* ---------------------------------------------------------- */
    /* Zeitleiste (Reisen chronologisch, horizontal scrollbar)      */
    /* ---------------------------------------------------------- */
    .timeline {
      padding: 22px 20px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .timeline-nav__btn {
      flex-shrink: 0;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--glass-border-light);
      color: var(--text-primary);
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .timeline-nav__btn:hover {
      border-color: var(--accent-cyan);
      color: var(--accent-cyan);
    }

    .timeline-scroll {
      flex: 1;
      min-width: 0;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scroll-behavior: smooth;
    }

    .timeline-scroll::-webkit-scrollbar { height: 6px; }
    .timeline-scroll::-webkit-scrollbar-thumb { background: var(--glass-border-light); border-radius: 4px; }

    .timeline-track {
      position: relative;
      display: flex;
      min-width: max-content;
      padding: 10px 12px;
    }

    .timeline-track::before {
      content: "";
      position: absolute;
      left: 12px;
      right: 12px;
      top: 21px;
      height: 2px;
      background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
      opacity: 0.3;
    }

    .timeline-item {
      flex: 0 0 auto;
      width: 168px;
      padding: 0 14px;
      text-align: center;
      cursor: pointer;
    }

    .timeline-item__dot {
      position: relative;
      width: 12px;
      height: 12px;
      margin: 0 auto 12px;
      border-radius: 50%;
      background: var(--accent-cyan);
      box-shadow: 0 0 10px rgba(var(--accent-cyan-rgb), 0.8);
      transition: transform 0.25s ease;
    }

    .timeline-item--geplant .timeline-item__dot {
      background: var(--accent-purple);
      box-shadow: 0 0 10px rgba(var(--accent-purple-rgb), 0.8);
    }

    .timeline-item--wohnen .timeline-item__dot {
      background: #4ade80;
      box-shadow: 0 0 10px rgba(74, 222, 128, 0.8);
    }

    .timeline-item:hover .timeline-item__dot {
      transform: scale(1.3);
    }

    .timeline-item__date {
      font-size: 0.7rem;
      color: var(--text-secondary);
      margin-bottom: 4px;
      white-space: nowrap;
    }

    .timeline-item__title {
      font-size: 0.85rem;
      font-weight: 600;
      transition: color 0.2s ease;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .timeline-item:hover .timeline-item__title {
      color: var(--accent-cyan);
    }

    /* ---------------------------------------------------------- */
    /* Reise-Kacheln (Übersicht aller Reisen als Grid)               */
    /* ---------------------------------------------------------- */
    /* grid-auto-rows als feste Basiseinheit (statt "auto"), damit eine
       "2x2"-Kachel (grid-row:span 2, inline per JS gesetzt, siehe
       renderTripTiles()) auch tatsächlich sichtbar größer wird — bei reinem
       "auto" würde jede Zeile nur so hoch wie ihr Inhalt, ein Row-Span hätte
       dann oft keinen sichtbaren Effekt. minmax(…, auto) statt fester Höhe,
       damit ungewöhnlich viel Inhalt (z.B. lange Route) die Zeile trotzdem
       aufstoßen kann statt abgeschnitten zu werden. */
    .trip-tiles {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      grid-auto-rows: minmax(240px, auto);
      gap: 20px;
    }

    .trip-tile {
      position: relative;
      padding: 22px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      cursor: pointer;
    }

    .trip-tile__header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    /* Wie .tile-tabs__panel geclampt — ein sehr langer Titel (z.B. Link-
       Name, Textblock-Titel) sonst mit derselben "Kachel zieht ins
       Unendliche"-Wirkung wie ungeclampter Text, siehe dort. */
    .trip-tile__title {
      font-weight: 700;
      font-size: 1.02rem;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .trip-tile__chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .trip-tile__chip {
      padding: 3px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--glass-border-light);
      font-size: 0.72rem;
      color: var(--text-secondary);
      white-space: nowrap;
    }

    .trip-tile__route {
      font-size: 0.78rem;
      color: var(--accent-cyan);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .trip-tile__notes {
      font-size: 0.82rem;
      color: var(--text-secondary);
      line-height: 1.5;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .trip-tile--placeholder {
      align-items: center;
      justify-content: center;
      text-align: center;
      color: var(--text-secondary);
      cursor: default;
      min-height: 140px;
    }

    .trip-tile--placeholder .trip-tile__title {
      font-size: 1.4rem;
      margin-bottom: 4px;
    }

    /* Auge-Button unten rechts (nur Admins, .auth-only) — blendet eine
       Reise für alle ohne Bearbeitungsrechte auf "reisen" aus. Eigenes
       Klassen-Präfix statt .trip-tile__edit (das teilen sich Kacheln hier
       UND auf reise-detail.html), damit die Position unabhängig bleibt.
       Erscheint wie .trip-tile__edit erst beim Hover, bleibt aber bei
       bereits ausgeblendeten Reisen dauerhaft sichtbar+eingefärbt, damit
       Admins den Zustand auch ohne Hover erkennen. */
    .trip-tile__visibility {
      position: absolute;
      bottom: 10px;
      right: 10px;
      z-index: 2;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: rgba(9, 9, 11, 0.55);
      border: 1px solid var(--glass-border-light);
      color: var(--text-secondary);
      opacity: 0;
      cursor: pointer;
      transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .trip-tile:hover .trip-tile__visibility {
      opacity: 1;
    }

    .trip-tile__visibility:hover {
      border-color: var(--accent-cyan);
      color: var(--text-primary);
    }

    /* Ausgeblendete Reise: Inhalt grau + gedimmt, Button dauerhaft in Amber
       sichtbar — nur für Admins sichtbar, siehe is_hidden-Filter in
       list_trips() (backend/main.py). filter/opacity auf .trip-tile selbst
       würde per Compositing auch den Button mit ausgrauen (ein Kind kann
       das über eigene filter/opacity-Werte NICHT rückgängig machen) — daher
       hier gezielt auf die Inhalts-Kinder statt auf die Kachel selbst. */
    .trip-tile--hidden > *:not(.trip-tile__visibility):not(.trip-tile__resize):not(.trip-tile__size-menu) {
      filter: grayscale(1);
      opacity: 0.55;
    }

    .trip-tile--hidden .trip-tile__visibility {
      opacity: 1;
      color: rgb(251, 191, 36);
      border-color: rgba(251, 191, 36, 0.6);
    }

    /* Resize-Button — sitzt direkt über dem Auge (gleiche rechte Spalte,
       38px Abstand = Button-Höhe 30px + 8px Lücke), erscheint wie das Auge
       nur beim Hover über die Kachel. Klick öffnet .trip-tile__size-menu
       statt direkt zu zykeln (siehe openSizeMenu() in reisen.html). */
    .trip-tile__resize {
      position: absolute;
      bottom: 48px;
      right: 10px;
      z-index: 2;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: rgba(9, 9, 11, 0.55);
      border: 1px solid var(--glass-border-light);
      color: var(--text-secondary);
      opacity: 0;
      cursor: pointer;
      transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .trip-tile:hover .trip-tile__resize {
      opacity: 1;
    }

    .trip-tile__resize:hover,
    .trip-tile__resize.is-open {
      border-color: var(--accent-cyan);
      color: var(--text-primary);
      opacity: 1;
    }

    /* Kleines Einstellungsfenster mit den 4 Größenstufen (siehe
       TRIP_TILE_SIZE_CYCLE in reisen.html) — öffnet sich über dem Resize-
       Button, bleibt offen bis eine Option gewählt oder außerhalb geklickt
       wird (siehe document-Klick-Handler in reisen.html). [hidden] braucht
       hier eine eigene Regel wie bei .auth-only[hidden], weil "display:flex"
       unten sonst die UA-Default-Regel fürs hidden-Attribut überstimmt. */
    .trip-tile__size-menu {
      position: absolute;
      bottom: 86px;
      right: 10px;
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 116px;
      padding: 6px;
      border-radius: 10px;
      background: rgba(9, 9, 11, 0.9);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--glass-border-light);
      box-shadow: var(--glass-shadow);
    }

    .trip-tile__size-menu[hidden] {
      display: none;
    }

    .trip-tile__size-option {
      appearance: none;
      -webkit-appearance: none;
      border: none;
      background: none;
      color: var(--text-secondary);
      font: inherit;
      font-size: 0.8rem;
      text-align: left;
      padding: 6px 10px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .trip-tile__size-option:hover {
      background: rgba(255, 255, 255, 0.08);
      color: var(--text-primary);
    }

    .trip-tile__size-option.is-active {
      color: var(--accent-cyan);
      font-weight: 700;
    }

    /* ---------------------------------------------------------- */
    /* Orts-Kacheln auf reise-detail.html (Bild/Video, Link, Text,   */
    /* Galerie, je besuchtem Ort) — EIGENES Klassen-Präfix           */
    /* ".dest-tiles" statt ".trip-tiles", weil letzteres auch die    */
    /* Reise-Übersichtskarten auf reisen.html (id="trip-tiles")      */
    /* einfärbt — eine gemeinsame Grid-Definition hätte deren große  */
    /* Infokarten auf die hier gewünschte kleine, einheitliche       */
    /* Kachelgröße zusammengeschrumpft. Fluides 9-Spalten-Raster     */
    /* (repeat(9, 1fr)) statt fester Pixel-Zellen: eine 1x1-Kachel   */
    /* ist so IMMER exakt 1/9 der Zeilenbreite — ob die Seite den    */
    /* vollen Bildschirm einnimmt oder nur die Hälfte, es passen     */
    /* anteilig immer 9 kleine Kacheln in eine Reihe. Größere        */
    /* Kacheln spannen entsprechend mehrere der 9 Spalten (siehe     */
    /* grid-column/grid-row je nach Größen-Auswahl, inline gesetzt   */
    /* in tileCardHtml(), reise-detail.html) — .trip-tile selbst     */
    /* bleibt (Basis-Optik von reisen.html mitgenutzt), nur mit      */
    /* eigenem, kleinerem Padding je Kacheltyp unten (siehe          */
    /* .trip-tile--media/--link/--text/--gallery/--add).             */
    /* ---------------------------------------------------------- */
    .dest-tiles {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      grid-auto-rows: 104px;
      gap: 12px;
    }

    /* "+"-Kachel (Admin-Bearbeitungsmodus, .auth-only) am Ende jeder
       Orts-Kachel-Reihe auf reise-detail.html — bewusst dieselbe
       .glass-card-Optik wie die übrigen Kacheln (z.B. .trip-detail__info
       mit den Reise-Infos), nur zentrierter Inhalt statt Text/Felder, damit
       sie sich als Teil derselben Kachel-Reihe liest statt als Fremdkörper. */
    .trip-tile--add {
      align-items: center;
      justify-content: center;
      color: var(--accent-cyan);
      font: inherit;
      font-size: 0.85rem;
      padding: 12px;
    }

    .trip-tile--add:hover {
      border-color: var(--accent-cyan);
    }

    .trip-tile--add__plus {
      font-size: 2.2rem;
      font-weight: 300;
      line-height: 1;
    }

    /* Kleiner Ecken-Bearbeiten-Button auf jeder echten Kachel (Admin-
       Bearbeitungsmodus, .auth-only) — erscheint erst beim Hover über die
       Kachel, damit die Ansicht für alle übrigen Besucher:innen (kein
       .auth-only) unverändert bleibt. Öffnet das Kachel-Formular erneut,
       vorbefüllt (siehe openTileForm() in reise-detail.html) — Ersetzen/
       Löschen liegt dort im Formular, nicht mehr direkt hier. */
    .trip-tile__edit {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 2;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: rgba(9, 9, 11, 0.55);
      border: 1px solid var(--glass-border-light);
      opacity: 0;
      cursor: pointer;
      transition: opacity 0.2s ease, border-color 0.2s ease;
    }

    /* .icon-glass hat serienmäßig margin-right (für Icon+Text nebeneinander)
       — hier steht der Stift aber allein im Kästchen, die Marge würde ihn
       optisch nach links verschieben statt ihn zu zentrieren. */
    .trip-tile__edit .icon-glass {
      margin-right: 0;
    }

    .trip-tile:hover .trip-tile__edit {
      opacity: 1;
    }

    .trip-tile__edit:hover {
      border-color: var(--accent-cyan);
    }

    /* Vorschau des aktuellen Bilds/Videos im Kachel-Bearbeiten-Formular. */
    .tile-edit-preview {
      width: 100%;
      max-height: 160px;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 10px;
    }

    .tile-edit-preview img,
    .tile-edit-preview video {
      width: 100%;
      max-height: 160px;
      object-fit: cover;
      display: block;
    }

    /* Link-Kachel: großer Name + Icon, zentriert — das eigentliche Ziel
       steckt nur im data-tile-link-Attribut (siehe reise-detail.html),
       nicht sichtbar in der Kachel. */
    .trip-tile--link {
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 12px;
    }

    .trip-tile--link .trip-tile__title {
      font-size: 1.05rem;
    }

    /* Bild-/Video-Kachel: Medium füllt die Kachel randlos. Die Höhe kommt
       jetzt komplett vom .dest-tiles-Raster (grid-auto-rows + inline
       gesetztem grid-column/grid-row-Span, siehe tileCardHtml() in
       reise-detail.html) statt einem eigenen aspect-ratio — object-fit:cover
       schneidet das Bild einfach auf die per Größen-Auswahl gewählte
       Kachelform zu. */
    .trip-tile--media {
      padding: 0;
      overflow: hidden;
    }

    /* Randlos wie .trip-tile--media: das Mosaik füllt die Kachel bis zum
       Rand, overflow:hidden übernimmt das Eckenabrunden von der Kachel
       selbst statt einem eigenen (kleineren) Radius auf dem Mosaik. */
    .trip-tile--gallery {
      padding: 0;
      overflow: hidden;
    }

    .trip-tile--gallery .trip-tile__title {
      padding: 10px 10px 0;
    }

    /* Karten-Kachel: randlos wie .trip-tile--media, füllt sich per JS
       (initMapTiles() in reise-detail.html) mit einer kleinen, nicht
       interaktiven Leaflet-Karte. Leaflet braucht ein Element mit
       tatsächlicher Höhe zum Initialisieren — kommt hier vom
       .dest-tiles-Raster (grid-auto-rows + Größen-Span), nicht von CSS. */
    .trip-tile--map {
      padding: 0;
      overflow: hidden;
      cursor: default;
    }

    /* position:absolute/inset:0 statt width/height:100% — .trip-tile ist
       ein Flex-Column-Container (siehe .trip-tile-Basisregel), darin würde
       eine prozentuale Höhe auf dem Leaflet-Container nicht zuverlässig
       gegen die tatsächliche (von .dest-tiles kommende) Kachelhöhe
       auflösen. Mit position:absolute füllt die Karte IMMER exakt die
       ganze (position:relative) Kachel, unabhängig vom Flex-Layout. */
    .trip-tile__map-canvas {
      position: absolute;
      inset: 0;
    }

    /* Reiseinfos-Kachel: Aufenthaltsdauer/km-Stand/Freitext zu einem Ort,
       je Zeile mit vorangestelltem Deko-Icon (".trip-tile-info__row" —
       die "Stecknadel" ist hier rein optisch, keine echte Markierung auf
       der großen Karte oben). */
    .trip-tile--info {
      padding: 16px;
      gap: 8px;
      cursor: default;
    }

    .trip-tile-info__row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.85rem;
      color: var(--text-primary);
    }

    .trip-tile-info__notes {
      font-size: 0.8rem;
      color: var(--text-secondary);
      line-height: 1.5;
      white-space: pre-wrap;
    }

    /* Dezenter Lade-Indikator für Bild-/Video- und Galerie-Vorschau-Kacheln
       — nur sichtbar, solange das jeweilige Medium noch lädt. Bild/Video
       selbst bleibt bis dahin unsichtbar (opacity 0) statt scheibchenweise
       reinzuladen; initMediaTiles() setzt "is-loaded" nach load/loadeddata
       bzw. sofort für bereits gecachte Medien. */
    .trip-tile--media img,
    .trip-tile--media video,
    .tile-gallery-preview__cell img,
    .tile-gallery-preview__cell video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    .trip-tile--media.is-loaded img,
    .trip-tile--media.is-loaded video,
    .tile-gallery-preview__cell.is-loaded img,
    .tile-gallery-preview__cell.is-loaded video {
      opacity: 1;
    }

    .tile-media-loading {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.03);
      z-index: 1;
    }

    .tile-media-loading::after {
      content: "";
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 3px solid rgba(255, 255, 255, 0.15);
      border-top-color: var(--accent-cyan);
      animation: tile-media-loading-spin 0.8s linear infinite;
    }

    .is-loaded .tile-media-loading {
      display: none;
    }

    @keyframes tile-media-loading-spin {
      to { transform: rotate(360deg); }
    }

    /* Reiter-Leiste einer Textblock-Kachel. */
    .tile-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .tile-tabs__btn {
      padding: 4px 12px;
      border-radius: 999px;
      border: 1px solid var(--glass-border-light);
      background: rgba(255, 255, 255, 0.04);
      color: var(--text-secondary);
      font: inherit;
      font-size: 0.74rem;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .tile-tabs__btn.is-active {
      border-color: var(--accent-cyan);
      color: var(--accent-cyan);
      background: rgba(var(--accent-cyan-rgb), 0.12);
    }

    .tile-tabs__panel {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.5;
      white-space: pre-wrap;
    }

    /* Textblock-Kachel: die Höhe kommt komplett vom .dest-tiles-Raster
       (grid-auto-rows + gewählter Zeilen-Span), nicht mehr von einer festen
       Höhe hier — bei mehr Text als reinpasst wird innerhalb der Kachel
       gescrollt statt (wie bei den anderen Kacheltypen) den Inhalt
       abzuschneiden. "min-height:0" ist nötig, weil Flex-Kinder sonst nie
       kleiner als ihr Inhalt werden und "overflow-y:auto" wirkungslos
       bliebe. Die Lesevorschau (#tile-text-modal-overlay, siehe
       openTextPreview() in reise-detail.html) bleibt zusätzlich für eine
       größere Leseansicht bei kleinen Kacheln. */
    .trip-tile--text {
      padding: 12px;
    }

    .trip-tile--text .tile-tabs__panel:not([hidden]) {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
    }

    /* Foto-Galerie-Kachel: 2×2-Mosaik der ersten vier Bilder/Videos, "+N"
       auf der letzten Vorschau-Zelle bei mehr Inhalten — Klick öffnet die
       Lightbox mit allen Elementen der Galerie. */
    .tile-gallery-preview {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
    }

    .tile-gallery-preview__cell {
      position: relative;
      aspect-ratio: 1;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.04);
    }

    .tile-gallery-preview__more {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(9, 9, 11, 0.55);
      color: #fff;
      font-weight: 700;
      font-size: 1.1rem;
    }

    /* Trennlinie zwischen den Kachel-Gruppen mehrerer Orte einer Reise
       ("———— Sydney ————") — nur gerendert, wenn eine Reise mehr als
       einen Ort hat (siehe renderDestinationTiles() in reise-detail.html). */
    .trip-location-divider {
      display: flex;
      align-items: center;
      gap: 16px;
      margin: 32px 0 20px;
      scroll-margin-top: calc(var(--nav-height) + 24px);
    }

    .trip-location-divider:first-child {
      margin-top: 0;
    }

    .trip-location-divider span:not(.trip-location-divider__label) {
      flex: 1;
      height: 1px;
      background: var(--glass-border-light);
    }

    .trip-location-divider__label {
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--text-primary);
      white-space: nowrap;
    }

    /* Mini-Zeitleiste rechts außen (reise-detail.html, nur bei mehreren
       Orten) — Sprungmarken zu den Orts-Trennlinien. Fix positioniert,
       unabhängig vom restlichen Seiteninhalt, blendet sich per
       .is-visible ein/aus, sobald der Kachel-Bereich im Viewport ist
       (siehe updateLocationJumpNav() im Skript).

       Zusätzlich, solange .is-visible: die Punkte (+ Verbindungslinie)
       bleiben immer sichtbar — nur die Namen (.trip-location-jumpnav__label)
       sind standardmäßig ausgeblendet und laufen erst beim Hovern der
       Seitenleiste von unter ihrem (feststehenden) Punkt nach links aus,
       siehe :hover-Regeln unten. Der ::before-Blur-Halo ist rein optisch
       (pointer-events:none), damit er keine Klicks auf dahinterliegende
       Seiteninhalte abfängt. */
    .trip-location-jumpnav {
      position: fixed;
      right: 22px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 60;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .trip-location-jumpnav.is-visible {
      opacity: 1;
      pointer-events: auto;
    }

    /* "mask-image" statt "border-radius:50%" fürs Oval — border-radius
       schneidet den Blur an der Box-Kante hart ab (das Oval hatte eine
       sichtbare Kante), die radiale Maske lässt Hintergrund/Blur zur Mitte
       hin voll und zum Rand hin weich auf 0 auslaufen, statt abrupt zu enden. */
    .trip-location-jumpnav::before {
      content: "";
      position: absolute;
      inset: -40px -70px;
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
      mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
      z-index: -1;
    }

    .trip-location-jumpnav:hover::before {
      opacity: 1;
    }

    /* Die Punkte selbst bleiben immer sichtbar und an derselben Stelle
       (nur ihre Größe ändert sich per Lupen-Effekt, siehe [data-distance]
       unten) — eingeklappt wird nur noch das Label, nicht mehr die ganze
       Liste zu einem künstlichen Ersatzpunkt. */
    .trip-location-jumpnav__items {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .trip-location-jumpnav__line {
      position: absolute;
      right: 4px;
      top: 9px;
      bottom: 9px;
      width: 1px;
      background: var(--glass-border-light);
      z-index: -1;
    }

    /* row-reverse: Punkt bleibt (DOM-Reihenfolge Punkt-dann-Label) rechts
       am fixen, äußeren Rand — die Reihe füllt per Grid-"stretch" immer die
       volle Nav-Breite, der Punkt landet also unabhängig von der
       Label-Länge stets an derselben x-Position. Label steht davor (links).
       transform-origin:right, damit auch der Lupen-Effekt (Skalierung
       unten) am Punkt verankert bleibt statt ihn mitzuverschieben. */
    .trip-location-jumpnav__item {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      gap: 10px;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      font: inherit;
      color: var(--text-secondary);
      transform-origin: right center;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Lupen-Effekt: der aktive (gerade sichtbare) Ort ist am größten, mit
       zunehmendem Abstand (siehe [data-distance] in updateLocationJumpNav(),
       reise-detail.html) wird's kleiner — Stufe 3 deckt "3 oder mehr
       Abstand" ab, damit nicht jede zusätzlich entfernte Kachel eine eigene
       Regel bräuchte. */
    .trip-location-jumpnav__item[data-distance="0"] {
      transform: scale(1.4);
    }

    .trip-location-jumpnav__item[data-distance="1"] {
      transform: scale(1.15);
    }

    .trip-location-jumpnav__item[data-distance="2"] {
      transform: scale(0.95);
    }

    .trip-location-jumpnav__item[data-distance="3"] {
      transform: scale(0.85);
    }

    .trip-location-jumpnav__dot {
      flex-shrink: 0;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--surface-overlay);
      border: 1px solid var(--glass-border-light);
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }

    /* Standardmäßig ausgeblendet (Punkte allein bilden die eingeklappte
       Mini-Zeitleiste) — läuft erst beim Hover über die Seitenleiste ein,
       von unter dem (feststehenden) Punkt nach links raus. */
    .trip-location-jumpnav__label {
      font-size: 0.76rem;
      white-space: nowrap;
      color: var(--text-secondary);
      opacity: 0;
      transform: translateX(10px);
      transition: color 0.2s ease, opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .trip-location-jumpnav:hover .trip-location-jumpnav__label {
      opacity: 1;
      transform: translateX(0);
    }

    .trip-location-jumpnav__item:hover .trip-location-jumpnav__label,
    .trip-location-jumpnav__item.is-active .trip-location-jumpnav__label {
      color: var(--accent-cyan);
    }

    .trip-location-jumpnav__item:hover .trip-location-jumpnav__dot,
    .trip-location-jumpnav__item.is-active .trip-location-jumpnav__dot {
      background: var(--accent-cyan);
      border-color: var(--accent-cyan);
      transform: scale(1.3);
    }

    @media (max-width: 900px) {
      .trip-location-jumpnav { display: none; }
    }

    /* Kachel-Typ-Auswahl (2×2-Grid im "+"-Modal) — Look wie .theme-option,
       nur kompakter für vier Icon-Optionen statt Farbthema-Vorschauen. */
    .tile-type-picker {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin: 16px 0 20px;
    }

    .tile-type-picker__option {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 20px 12px;
      border-radius: var(--radius);
      border: 1px solid var(--glass-border-light);
      background: var(--glass-bg);
      color: var(--text-primary);
      font: inherit;
      font-size: 0.85rem;
      cursor: pointer;
      transition: transform 0.2s ease, border-color 0.2s ease;
    }

    .tile-type-picker__option:hover {
      transform: translateY(-3px);
      border-color: var(--accent-cyan);
    }

    /* Größen-Auswahl im Kachel-Formular — ein 9×3-Raster (9 Spalten/3
       Zeilen, wie .dest-tiles selbst), Bedienung wie die "Tabellengröße
       einfügen"-Raster aus Office: oben links ist immer 1×1, Hovern über
       eine Zelle markiert das Rechteck von dort bis (1,1), ein Klick
       übernimmt genau diese Breite×Höhe (setTileSize() in reise-detail.
       html baut das Raster und hält die aktuell gewählte Größe fest, damit
       ein mouseleave die Markierung auf die Auswahl statt auf 1×1 zurücksetzt). */
    .tile-size-grid {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      grid-template-rows: repeat(3, 44px);
      gap: 6px;
    }

    .tile-size-grid__cell {
      padding: 0;
      border-radius: 6px;
      border: 1px solid var(--glass-border-light);
      background: var(--glass-bg);
      cursor: pointer;
      transition: background 0.12s ease, border-color 0.12s ease;
    }

    .tile-size-grid__cell.is-active {
      border-color: var(--accent-cyan);
      background: rgba(var(--accent-cyan-rgb), 0.35);
    }

    /* Kleine Vorschau-Kachel neben dem Breite×Höhe-Label — zeigt die
       gewählte Größe zusätzlich als EIN durchgehendes Rechteck (statt der
       einzeln umrandeten Raster-Zellen), damit die tatsächliche Kachelform
       auf einen Blick erkennbar ist. --w/--h werden von setTileSize() /
       highlightTileSizeGrid() (reise-detail.html) gesetzt. */
    .tile-size-shape-preview {
      display: inline-block;
      vertical-align: middle;
      margin-left: 8px;
      width: calc(var(--w, 1) * 12px);
      height: calc(var(--h, 1) * 12px);
      background: var(--accent-cyan);
      border-radius: 3px;
      transition: width 0.15s ease, height 0.15s ease;
    }

    /* Lightbox — Vollbild-Ansicht für Bild-/Video- und Galerie-Kacheln.
       Eigenständiges Overlay statt .modal-card, da der Inhalt (ein Bild
       oder Video) randlos so groß wie möglich stehen soll, nicht in eine
       Formular-Kartenbreite gezwängt. */
    .tile-lightbox {
      flex-direction: column;
      background: rgba(9, 9, 11, 0.9);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .tile-lightbox__body {
      max-width: min(92vw, 1100px);
      max-height: 82vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .tile-lightbox__body img,
    .tile-lightbox__body video {
      max-width: 100%;
      max-height: 82vh;
      border-radius: 12px;
      object-fit: contain;
    }

    .tile-lightbox__close {
      position: absolute;
      top: 20px;
      right: 24px;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid var(--glass-border-light);
      color: #fff;
      font-size: 1.4rem;
      line-height: 1;
      cursor: pointer;
    }

    .tile-lightbox__close:hover {
      border-color: var(--accent-cyan);
      color: var(--accent-cyan);
    }

    .tile-lightbox__nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid var(--glass-border-light);
      color: #fff;
      font-size: 1.8rem;
      line-height: 1;
      cursor: pointer;
    }

    .tile-lightbox__nav:hover {
      border-color: var(--accent-cyan);
      color: var(--accent-cyan);
    }

    .tile-lightbox__nav--prev { left: 20px; }
    .tile-lightbox__nav--next { right: 20px; }

    /* Lesevorschau für Textblock-Kacheln (#tile-text-modal-overlay) — eigenes
       schmales .modal-card statt der breiten Media-Lightbox, da hier Lesbarkeit
       (schmale Zeilenlänge, Scroll statt Zuschneiden) zählt statt möglichst
       großer Bild-/Videofläche. */
    .tile-text-modal__body {
      overflow-y: auto;
      max-height: 55vh;
      font-size: 0.9rem;
      line-height: 1.6;
      color: var(--text-secondary);
      white-space: pre-wrap;
    }

    .tile-lightbox__counter {
      margin-top: 14px;
      font-size: 0.82rem;
      color: var(--text-secondary);
    }

    /* ---------------------------------------------------------- */
    /* Reise-Detailseite (reise-detail.html) — eine Vorlage für     */
    /* alle Reisen.                                                  */
    /* ---------------------------------------------------------- */
    .trip-detail__header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }

    .trip-detail__title {
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 700;
      letter-spacing: -0.01em;
      margin: 10px 0 12px;
    }

    .trip-detail__grid {
      display: grid;
      grid-template-columns: 360px 1fr;
      gap: 24px;
      align-items: stretch;
      margin-bottom: 32px;
    }

    .trip-detail__info {
      position: relative;
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Derselbe kleine Ecken-Bearbeiten-Button wie auf den Reise-Kacheln
       (.trip-tile__edit, siehe dort) — hier zusätzlich per eigenem
       Hover-Trigger, weil diese Kachel kein .trip-tile ist. */
    .trip-detail__info:hover .trip-tile__edit {
      opacity: 1;
    }

    .trip-detail__field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .trip-detail__field-label {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-secondary);
    }

    .trip-detail__field-value {
      font-size: 0.95rem;
    }

    .trip-detail__extra {
      margin-top: 8px;
    }

    .trip-detail__empty {
      text-align: center;
      padding: 80px 20px;
      color: var(--text-secondary);
    }

    /* ---------------------------------------------------------- */
    /* Muskelgruppen-Körpergrafik (sport-kategorie.html) — ersetzt  */
    /* im .trip-detail__grid die Kartenspalte. Gleiche Glass-Optik  */
    /* wie .map-container, aber ohne feste Höhe (SVG skaliert über  */
    /* die eigene viewBox statt über einen Karten-Tile-Layer).      */
    /* ---------------------------------------------------------- */
    .body-container {
      border-radius: var(--radius);
      border: 1px solid var(--glass-border-light);
      background: var(--glass-bg);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      padding: 24px;
      min-height: 340px;
    }

    .muscle-figure {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      flex: 1;
      max-width: 220px;
    }

    .muscle-figure__svg {
      width: 100%;
      height: auto;
      max-height: 480px;
    }

    .muscle-figure__label {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-secondary);
    }

    /* Flat-Design, genau 2 Farben: neutrales Hellgrau für Körper +
       inaktive Muskeln, Orange nur für die aktive(n) Gruppe(n). Beides
       feste Werte (kein Theme-Bezug) — soll wie eine einfache Vektor-
       grafik wirken, nicht wie der Rest der (Glass-)Oberfläche. Klare
       Outlines statt Verlauf/Schatten trennen die Regionen. */
    .muscle-figure__base {
      fill: #d4d4d8;
      stroke: #3f3f46;
      stroke-width: 2;
      stroke-linejoin: round;
    }

    .muscle-region {
      fill: #d4d4d8;
      stroke: #3f3f46;
      stroke-width: 1.25;
      stroke-linejoin: round;
      transition: fill 0.2s ease;
    }

    .muscle-region.is-active {
      fill: #f97316;
    }

    /* Nur auf der 7-Tage-Übersicht (tracking.html, "Zuletzt trainierte
       Muskelgruppen"): nicht trainierte Muskelgruppen zusätzlich gelb
       markieren, statt nur im neutralen Körper-Grau zu verschwinden — auf
       sport-kategorie.html (einzelne Kategorie) bleibt es bei den
       ursprünglichen 2 Farben, dort ist "nicht aktiv" der Normalzustand. */
    #muscle-overview-body .muscle-region:not(.is-active) {
      fill: #facc15;
    }

    .muscle-legend {
      display: flex;
      gap: 16px;
      margin-bottom: 14px;
    }

    .muscle-legend__item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.78rem;
      color: var(--text-secondary);
    }

    .muscle-legend__dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      display: inline-block;
    }

    @media (max-width: 480px) {
      .body-container { flex-direction: column; }
      .muscle-figure { max-width: 260px; }
    }

    /* ---------------------------------------------------------- */
    /* Person-Seite (person.html) — Info-Kacheln (Freizeit,        */
    /* Lebenslauf, ...)                                              */
    /* ---------------------------------------------------------- */
    .info-tiles {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 24px;
      align-items: start;
    }

    .info-tile {
      padding: 32px;
    }

    /* Nimmt die volle Zeilenbreite ein — für Kacheln mit viel Inhalt
       (z.B. den Lebenslauf) statt sie in eine schmale Spalte zu quetschen. */
    .info-tile--wide {
      grid-column: 1 / -1;
    }

    .info-tile__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .info-tile__title {
      font-size: 1.15rem;
      font-weight: 700;
    }

    /* Unterüberschrift innerhalb einer Kachel (z.B. "Angefragt" / "Genehmigte
       Zugänge" innerhalb der Zugänge-Kachel in einstellungen.html) — kleiner
       als .info-tile__title, aber deutlicher als reiner Fließtext. */
    .accounts-subheading {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text-primary);
      margin: 0;
    }

    /* Ein-/ausklappbarer Unterabschnitt innerhalb der Zugänge-Kachel (z.B.
       "Zugriffs-Verlauf", der bei bis zu 200 Zeilen sonst viel Platz
       einnimmt) — natives <details>/<summary>, dieselbe Sprache wie
       .navbar__dropdown, nur ohne dessen Menü-Positionierung. */
    .accounts-collapsible {
      margin-top: 32px;
    }

    .accounts-collapsible > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      cursor: pointer;
      list-style: none;
    }

    .accounts-collapsible > summary::-webkit-details-marker {
      display: none;
    }

    .accounts-collapsible__chevron {
      color: var(--text-secondary);
      transition: transform 0.25s ease;
    }

    .accounts-collapsible[open] .accounts-collapsible__chevron {
      transform: rotate(180deg);
    }

    .accounts-collapsible__body {
      margin-top: 4px;
    }

    /* ---------------------------------------------------------- */
    /* Einstellungen (einstellungen.html) — Farbthema-Auswahl        */
    /* ---------------------------------------------------------- */
    .theme-options {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 16px;
      margin-top: 16px;
    }

    .theme-option {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      padding: 16px;
      border-radius: var(--radius);
      border: 1px solid var(--glass-border-light);
      background: var(--glass-bg);
      cursor: pointer;
      font: inherit;
      color: var(--text-primary);
      text-align: left;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .theme-option:hover {
      transform: translateY(-3px);
      border-color: var(--glass-border-light);
    }

    /* Der Ring nutzt die AKTUELL aktive Akzentfarbe (var(--accent-cyan)) —
       zeigt also automatisch die Farbe des gerade gewählten Themas, ohne
       dass wir das hier gesondert berechnen müssten. */
    .theme-option.is-active {
      border-color: var(--accent-cyan);
      box-shadow: 0 0 0 2px rgba(var(--accent-cyan-rgb), 0.35);
    }

    .theme-option__swatch {
      width: 100%;
      height: 48px;
      border-radius: 12px;
      border: 1px solid var(--glass-border-light);
    }

    .theme-option__label {
      font-weight: 600;
      font-size: 0.92rem;
    }

    /* Lebenslauf: Abschnitte (Persönliche Daten, Werdegang, ...) mit
       eigener Überschrift + vertikaler Zeitleiste pro Eintrag. */
    .cv-section {
      margin-top: 28px;
    }

    .cv-section:first-child {
      margin-top: 0;
    }

    .cv-section__title {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--accent-cyan);
      margin-bottom: 16px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--glass-border-light);
    }

    .cv-fact-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px;
    }

    .cv-timeline {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .cv-entry {
      position: relative;
      padding-left: 20px;
      border-left: 2px solid rgba(var(--accent-cyan-rgb), 0.3);
    }

    .cv-entry::before {
      content: "";
      position: absolute;
      left: -5px;
      top: 4px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent-cyan);
      box-shadow: 0 0 6px rgba(var(--accent-cyan-rgb), 0.7);
    }

    .cv-entry__period {
      font-size: 0.72rem;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 4px;
    }

    .cv-entry__title {
      font-weight: 700;
      font-size: 0.95rem;
    }

    .cv-entry__org {
      font-size: 0.82rem;
      color: var(--accent-purple);
      margin: 2px 0 6px;
    }

    .cv-entry__desc {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.55;
    }

    .cv-knowledge-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 24px;
    }

    .cv-knowledge__label {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin-bottom: 10px;
    }

    @media (max-width: 640px) {
      .info-tile--wide { grid-column: auto; }
    }

    /* ============================================================ */
    /* AUTH — Login-Button in der Navbar + Login/Passwort-Modals      */
    /* (Markup wird von /assets/auth.js zur Laufzeit eingehängt,      */
    /* gilt für alle Seiten: index/reisen/reise-detail/person)         */
    /* ============================================================ */
    /* Positionierungs-Kontext für .auth-menu — genau wie .navbar__dropdown
       (Ich/Dashboard) das Menü an SEINEM eigenen Auslöser verankert statt an
       einem zufällig übereinstimmenden Navbar-Padding-Wert. */
    .navbar__auth-wrap {
      position: relative;
      flex-shrink: 0;
      /* Jetzt letztes <li> in .navbar__links (siehe auth.js) statt eigenes
         Geschwister-Element — auf Desktop per auto-margin trotzdem ganz
         rechts vorm Burger-Button, optisch identisch zu vorher. Auf dem
         Handy (≤720px, siehe Media Query unten) fällt der Margin weg und
         "Profil" reiht sich normal ins aufgeklappte Burger-Menü ein. */
      margin-left: auto;
      list-style: none;
    }

    .navbar__auth {
      gap: 6px;
    }

    /* Rotiert wie .navbar__dropdown-chevron beim Öffnen der "Ich"/
       "Dashboard"-<details> — hier per Klasse statt [open], da der
       Profil-Button ein <button> statt <details>/<summary> ist. */
    .navbar__auth .navbar__dropdown-chevron.is-open {
      transform: rotate(180deg);
    }

    /* Elemente, die nur eingeloggt bedienbar sein sollen (Reise anlegen,
       Profil bearbeiten, Reise löschen). Eigene Regel statt uns auf das
       [hidden]-Attribut allein zu verlassen: .btn-primary/.btn-ghost setzen
       bereits "display", was die UA-Default-Regel für [hidden] sonst
       überstimmen würde. */
    .auth-only[hidden] {
      display: none !important;
    }

    /* Verhindert ein kurzes Aufblitzen von echtem Seiteninhalt, bevor
       /assets/auth.js (am Ende von <body>) den Login-Gate einhängt und den
       tatsächlichen Login-Stand kennt: bis dahin ist ALLES außer dem Gate
       selbst unsichtbar (das Gate existiert zu diesem Zeitpunkt noch nicht
       im DOM, der Selektor greift also erst, sobald injectAuthUi() es
       eingehängt hat — vorher ist die Seite dank dieser Regel schlicht
       leer). injectAuthUi() setzt "auth-ready" auf <body>, sobald der Gate
       + alle Auth-Elemente eingehängt sind — danach übernimmt reines
       JS/[hidden] die Sichtbarkeit. */
    body:not(.auth-ready) > *:not(#auth-gate-overlay) {
      visibility: hidden;
    }

    /* ============================================================ */
    /* LOGIN-GATE: deckt bis zum Login die komplette Seite ab — anders  */
    /* als die übrigen .modal-overlay Dialoge bewusst NICHT schließbar  */
    /* (kein Abbrechen/Klick-außerhalb/Escape) und mit deckendem statt   */
    /* nur unscharfem Hintergrund, damit dahinter wirklich nichts        */
    /* erkennbar bleibt.                                                 */
    /* ============================================================ */
    .auth-gate-overlay {
      z-index: 500;
      /* Fallback-Hintergrund, falls das Video (noch) nicht geladen ist oder
         der Browser <video> hier blockiert — bleibt hinter Video + dunklem
         Scrim einfach unsichtbar. */
      background: var(--bg-gradient);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      overflow: hidden;
    }

    /* Gleiche Aufnahme wie im Hero-Bereich (.hero__video) — deckt hier den
       gesamten Gate ab statt nur den Hero-Ausschnitt. Bewusst KEIN
       object-fit:cover-Crop-Unterschied zum Hero, damit es wie derselbe
       Hintergrund wirkt, nicht wie ein zweites, anderes Video. */
    .auth-gate-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }

    /* Abdunklung fürs Login-Karten-Kontrast — feste dunkle Werte statt
       Theme-Variablen (wie .hero__overlay), weil das Video selbst auch bei
       Weiß-Theme dunkel abgedunkelt werden muss, damit die Karte lesbar bleibt. */
    .auth-gate-video-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(9, 9, 11, 0.55) 0%, rgba(9, 9, 11, 0.82) 100%);
      z-index: 1;
    }

    .auth-gate-card {
      position: relative;
      z-index: 2;
      max-width: 400px;
    }

    /* .modal-actions hat sonst überall einen border-top als Trenner zu den
       Feldern darüber (sinnvoll bei langen Formularen) — im Gate mit nur
       2 Feldern wirkte das wie ein Strich direkt unterm Passwortfeld. */
    .auth-gate-card .modal-actions {
      border-top: none;
      padding-top: 4px;
    }

    /* Info-Aufklapper (Login-Gate): Hinweistext steht erst nach Klick da,
       statt permanent Platz zu beanspruchen. */
    .info-collapsible {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .info-collapsible__toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      align-self: center;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-secondary);
      font: inherit;
      font-size: 0.76rem;
      padding: 4px 8px;
      border-radius: 999px;
      transition: color 0.2s ease, background 0.2s ease;
    }

    .info-collapsible__toggle:hover {
      color: var(--text-primary);
      background: rgba(255, 255, 255, 0.06);
    }

    .info-collapsible__text {
      text-align: center;
      margin: 0;
    }

    .auth-gate-brand {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 1.3rem;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .auth-gate-brand__mark {
      font-size: 1.6rem;
    }

    .auth-gate-brand__text span {
      background: linear-gradient(120deg, var(--accent-cyan), var(--accent-purple));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .auth-gate-card h3 {
      text-align: center;
    }

    .auth-gate-card .modal-hint {
      text-align: center;
    }

    .modal-actions--split {
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }

    /* Gleiche Glas-Optik wie .navbar__dropdown-menu ("Ich"/"Dashboard"),
       bewusst eigene feste Werte statt der geteilten .glass-card-Klasse —
       siehe Kommentar bei .navbar__dropdown-menu (Hover-Transform würde
       hier genauso die Positionierung durcheinanderbringen). */
    .auth-menu {
      position: absolute;
      top: calc(100% + 8px);
      /* Rechtsbündig am eigenen Auslöser (.navbar__auth-wrap), statt zentriert
         wie bei "Ich"/"Dashboard" — der Profil-Button sitzt am rechten Rand,
         mittig würde das Menü über den Viewport-Rand hinausragen. */
      right: 0;
      z-index: 150;
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 8px;
      min-width: 200px;
      background: var(--surface-overlay);
      border-radius: var(--radius);
      border-top: 1px solid var(--glass-border-light);
      border-left: 1px solid var(--glass-border-light);
      border-bottom: 1px solid var(--glass-border-dark);
      border-right: 1px solid var(--glass-border-dark);
      backdrop-filter: blur(60px) saturate(150%);
      -webkit-backdrop-filter: blur(60px) saturate(150%);
      box-shadow: var(--glass-shadow);
    }

    .auth-menu button,
    .auth-menu a {
      display: flex;
      align-items: center;
      width: 100%;
      gap: 8px;
      font: inherit;
      font-size: 0.85rem;
      text-align: left;
      text-decoration: none;
      white-space: nowrap;
      background: transparent;
      /* Native Button-Optik (grauer Rand/Hintergrund je nach Browser)
         vollständig aus, sonst überstimmt sie stellenweise unser flaches
         Hover — genau wie bei .navbar__dropdown-menu a (dort kein Thema,
         weil <a> von Haus aus keine UA-Button-Chrome mitbringt). */
      appearance: none;
      -webkit-appearance: none;
      border: none;
      color: var(--text-secondary);
      padding: 9px 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .auth-menu button:hover,
    .auth-menu a:hover {
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-primary);
    }

    /* 👁-Button zum Ein-/Ausblenden des Passwort-Klartexts in den
       Login-/Passwort-ändern-Feldern. */
    .password-field {
      position: relative;
    }

    .password-field input {
      width: 100%;
      padding-right: 42px !important;
    }

    .password-toggle {
      position: absolute;
      top: 50%;
      right: 4px;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      font-size: 1rem;
      line-height: 1;
      padding: 6px;
      color: var(--text-secondary);
      border-radius: 6px;
    }

    .password-toggle:hover {
      color: var(--text-primary);
    }

    /* Zugänge-Tabellen (einstellungen.html, Abschnitt "Zugänge"): sowohl
       "Genehmigte Zugänge" als auch "Angefragt" teilen sich dieses Layout —
       Benutzername/Passwort/Rolle je Zeile + Aktions-Buttons am Ende. */
    .accounts-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.92rem;
    }

    .accounts-table th {
      text-align: left;
      font-size: 0.75rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-secondary);
      padding: 0 12px 8px;
      font-weight: 600;
    }

    .accounts-table td {
      padding: 12px;
      border-top: 1px solid var(--glass-border-light);
      vertical-align: middle;
    }

    .accounts-table td:first-child,
    .accounts-table th:first-child {
      padding-left: 0;
    }

    .accounts-table__password--fresh {
      font-family: monospace;
      color: var(--accent-cyan);
    }

    .accounts-table__password--hidden {
      color: var(--text-secondary);
      font-style: italic;
    }

    /* Bilder-Kachel (einstellungen.html) — kleine Vorschau je Zeile. */
    .uploads-table__thumb {
      width: 56px;
      height: 40px;
      object-fit: cover;
      border-radius: 6px;
      display: block;
      background: rgba(255, 255, 255, 0.04);
    }

    /* Icons — ersetzen nach und nach die Emoji im UI (siehe einstellungen.html
       "Icons"-Kachel, austauschbar pro Icon-Key über /api/icons). Bewusst
       OHNE Kasten/Hintergrund ums Symbol — nur der Glyph selbst, einheitlich
       ausgerichtet neben dem Fließtext. --icon-accent (RGB-Tripel je
       Einbindung) ist aktuell ungenutzt, bleibt aber gesetzt für eine
       mögliche spätere Verwendung (z.B. ein farbiger Rand bei :hover). */
    .icon-glass {
      --icon-accent: 34, 211, 238;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.15em;
      height: 1.15em;
      flex-shrink: 0;
      vertical-align: -0.2em;
      margin-right: 0.32em;
    }

    .icon-glass img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
    }

    /* Etwas größere Variante für Vorschau-Zellen (z.B. Icons-Kachel-Tabelle). */
    .icon-glass--lg {
      width: 2.2em;
      height: 2.2em;
      margin-right: 0;
    }

    /* Ladebalken beim Hochladen (einstellungen.html, Bilder-&-Videos-Kachel). */
    .upload-progress {
      margin-top: 10px;
    }

    .upload-progress__bar {
      width: 100%;
      height: 8px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 4px;
      overflow: hidden;
    }

    .upload-progress__fill {
      height: 100%;
      width: 0%;
      background: var(--accent-cyan);
      transition: width 0.15s ease;
    }

    .accounts-table__role {
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 3px 9px;
      border-radius: 999px;
      border: 1px solid var(--glass-border-light);
      color: var(--text-secondary);
      white-space: nowrap;
    }

    .accounts-table__role--admin {
      color: var(--accent-cyan);
      border-color: var(--accent-cyan);
    }

    /* Zugriffs-Verlauf (Status-Spalte): grüner Punkt + Badge für gerade
       laufende Besuche, sonst schlicht "Beendet". */
    .accounts-table__role--active {
      color: #4ade80;
      border-color: #4ade80;
    }

    .accounts-table__status-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #4ade80;
      margin-right: 5px;
      box-shadow: 0 0 6px #4ade80;
    }

    .accounts-table__actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .accounts-table__actions .btn-ghost,
    .accounts-table__actions .btn-primary,
    .accounts-table__actions .btn-danger {
      padding: 7px 12px;
      font-size: 0.8rem;
      white-space: nowrap;
    }

    @media (max-width: 720px) {
      /* WICHTIG: dieser Block muss NACH den Basis-Regeln .navbar__auth-wrap/
         .navbar__auth/.auth-menu weiter oben in der Datei stehen (gleiche
         Selektor-Spezifität wie dort — bei einem Unentschieden gewinnt bei
         CSS immer die spätere Quellreihenfolge, EGAL ob @media oder nicht).
         Ein früherer Versuch, diese Overrides in den ERSTEN
         @media(max-width:720px)-Block oben (bei .navbar__links) zu packen,
         wurde von den Basis-Regeln hier unten wieder überschrieben, obwohl
         die Media Query aktiv war — sichtbarer Bug: "philipp ▾" blieb auf
         dem Handy ein schwebendes position:absolute-Panel statt sich wie
         "Ich"/"Dashboard" ins Flyout einzureihen. */
      .navbar__auth { font-size: 0.8rem; padding: 12px 14px; width: 100%; justify-content: space-between; }

      /* "Profil" ist das letzte <li> in .navbar__links (siehe auth.js) —
         hier an die anderen Flyout-Einträge angeglichen: volle Breite statt
         rechtsbündiger Pille, dezente Trennlinie drüber statt eigenem
         Abstand. */
      .navbar__auth-wrap {
        margin-left: 0;
        width: 100%;
        border-top: 1px solid var(--glass-border-light);
        padding-top: 8px;
        margin-top: 4px;
      }

      /* Das Profil-Dropdown-Menü reiht sich genauso wie "Ich"/"Dashboard"
         ins Flyout ein (siehe .navbar__dropdown-menu-Override weiter oben)
         statt als eigenes schwebendes position:absolute-Panel zu rendern —
         Inhalt wird nach unten verschoben statt überlagert. */
      .auth-menu {
        position: static;
        transform: none;
        left: auto;
        right: auto;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        box-shadow: none;
        padding: 0 0 4px 14px;
        min-width: 0;
        animation: none;
      }

      .accounts-table { font-size: 0.82rem; }
      .accounts-table td { padding: 8px 6px; }
      .accounts-table__actions { justify-content: flex-start; }
    }

    /* ============================================================ */
    /* SPORT — Kalender, Kategorie-Kacheln, Trainingsplan             */
    /* ============================================================ */
    .sport-calendar {
      padding: 28px;
      margin-top: 24px;
    }

    .sport-calendar__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
    }

    .sport-calendar__header h3 {
      font-size: 1.05rem;
      font-weight: 700;
      text-transform: capitalize;
    }

    .sport-calendar__weekdays {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px;
      font-size: 0.72rem;
      color: var(--text-secondary);
      text-align: center;
      margin-bottom: 8px;
    }

    .sport-calendar__grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px;
    }

    .cal-day {
      aspect-ratio: 1;
      border-radius: 10px;
      border: 1px solid var(--glass-border-light);
      background: rgba(255, 255, 255, 0.02);
      color: var(--text-primary);
      font: inherit;
      font-size: 0.82rem;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }

    .cal-day:hover {
      border-color: var(--accent-cyan);
      transform: translateY(-2px);
    }

    .cal-day--outside {
      opacity: 0.32;
    }

    .cal-day--today {
      border-color: var(--accent-cyan);
      box-shadow: 0 0 0 1px var(--accent-cyan) inset;
    }

    .cal-day__icons {
      font-size: 0.68rem;
      line-height: 1;
    }

    .sport-tiles {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 16px;
      margin-top: 24px;
    }

    .sport-tile {
      align-items: center;
      text-align: center;
      gap: 8px;
    }

    .sport-tile__icon {
      font-size: 1.8rem;
    }

    .sport-tile__label {
      font-weight: 700;
    }

    .sport-tile__count {
      font-size: 0.76rem;
      color: var(--text-secondary);
    }

    .sport-tile--active {
      border-color: var(--accent-cyan) !important;
      box-shadow: 0 0 18px rgba(var(--accent-cyan-rgb), 0.3);
    }

    .sport-plan {
      padding: 28px;
      margin-top: 24px;
    }

    .sport-exercise-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 16px;
    }

    .sport-exercise {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--glass-border-light);
      flex-wrap: wrap;
    }

    .sport-exercise__name {
      font-weight: 600;
      margin-right: 10px;
    }

    .sport-exercise__meta {
      font-size: 0.8rem;
      color: var(--text-secondary);
    }

    .sport-exercise__weight {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      color: var(--accent-cyan);
      white-space: nowrap;
    }

    .sport-exercise__plus {
      padding: 6px 12px;
      font-size: 0.76rem;
    }

    .sport-exercise__empty {
      color: var(--text-secondary);
      font-size: 0.85rem;
    }

    /* Detailliertere Übungs-Karte (sport-kategorie.html) — Name + Muskel-
       gruppen-Badge oben, Sätze/Wdh./Gewicht als eigene Zeile darunter,
       statt einer einzigen flachen Zeile. */
    .sport-exercise--detailed {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }

    .sport-exercise__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .sport-exercise__head .sport-exercise__name {
      font-size: 1rem;
      margin-right: 0;
    }

    .sport-exercise__stats {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .sport-exercise__badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    /* Muskelgruppen-Checkboxen im "Übungen bearbeiten"-Formular
       (sport-kategorie.html) — eine Übung kann mehrere Muskelgruppen
       gleichzeitig markieren (z.B. Laufen), statt nur einer einzelnen. */
    .muscle-checkbox-group__label {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-secondary);
      margin: 10px 0 6px;
    }

    .muscle-checkbox-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 14px;
    }

    .muscle-checkbox {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.82rem;
      cursor: pointer;
    }

    .muscle-checkbox input {
      width: auto;
      accent-color: var(--accent-cyan);
    }

    /* Aktivitäten-Übersicht (tracking.html) — Gym/Schwimmen/Laufen je
       eine Karte, Kategorien (Push/Pull/Leg, …) als Buttons darin. */
    .activity-card {
      padding: 20px 24px;
      margin-top: 16px;
    }

    .activity-card:first-child {
      margin-top: 0;
    }

    .activity-card__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 14px;
    }

    .activity-card__title {
      font-weight: 700;
      font-size: 1rem;
    }

    .activity-card__categories {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    /* Kategorie-Button + "+" als EINE zusammenhängende Pille (statt zwei
       getrennter Buttons mit Lücke dazwischen) — sonst ist auf den ersten
       Blick nicht klar, zu welcher Kategorie das "+" gehört. Die Pille
       trägt den .btn-primary-Look, Link und Button selbst sind innen
       transparent/randlos, nur ein dünner Trenner zwischen beiden. */
    .activity-card__category-group {
      display: flex;
      align-items: stretch;
      border-radius: 12px;
      background: rgba(var(--accent-cyan-rgb), 0.12);
      border: 1px solid var(--accent-cyan);
      overflow: hidden;
      transition: box-shadow 0.3s ease;
    }

    .activity-card__category-group:hover {
      box-shadow: 0 0 18px rgba(var(--accent-cyan-rgb), 0.45), 0 0 36px rgba(var(--accent-cyan-rgb), 0.15);
    }

    .activity-card__category-group > a.btn-primary {
      background: none;
      border: none;
      border-radius: 0;
    }

    .activity-card__category-group > a.btn-primary:hover {
      background: none;
      box-shadow: none;
      transform: none;
    }

    .activity-card__quick-add {
      width: auto;
      padding: 0 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      font-weight: 700;
      border: none;
      border-left: 1px solid rgba(var(--accent-cyan-rgb), 0.4);
      border-radius: 0;
      background: none;
      color: var(--accent-cyan);
      flex-shrink: 0;
    }

    .activity-card__quick-add:hover {
      background: rgba(var(--accent-cyan-rgb), 0.25);
    }

    /* ---------------------------------------------------------- */
    /* Showcase-Kacheln (gaming.html, fotografie.html, …) — generische  */
    /* "Cover + Badge + Meta"-Karte, wiederverwendet für alle Freizeit-  */
    /* Unterseiten mit demselben Aufbau. Eigene Akzentfarbe je Karte     */
    /* über --showcase-color/--showcase-color-rgb (Inline-Style,        */
    /* gleiches Muster wie --glow-color bei den Reise-Pinnadeln).       */
    /* ---------------------------------------------------------- */
    .showcase-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 24px;
      margin-top: 32px;
    }

    .showcase-card {
      position: relative;
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    }

    a.showcase-card { cursor: pointer; }

    .showcase-card:hover {
      transform: translateY(-6px);
      border-color: var(--showcase-color);
      box-shadow: 0 0 26px rgba(var(--showcase-color-rgb), 0.4), 0 20px 40px rgba(0, 0, 0, 0.35);
    }

    .showcase-card__cover {
      position: relative;
      height: 130px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(var(--showcase-color-rgb), 0.4), rgba(var(--showcase-color-rgb), 0.06));
      overflow: hidden;
    }

    .showcase-card__cover::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
      transform: translateX(-120%);
      transition: transform 0.7s ease;
    }

    .showcase-card:hover .showcase-card__cover::after {
      transform: translateX(120%);
    }

    .showcase-card__icon {
      font-size: 3.2rem;
      filter: drop-shadow(0 0 14px rgba(var(--showcase-color-rgb), 0.6));
    }

    .showcase-card__badge {
      position: absolute;
      top: 12px;
      right: 12px;
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 0.66rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(4px);
      color: #fff;
    }

    .showcase-card__live-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: #4ade80;
      box-shadow: 0 0 6px #4ade80;
      animation: mc-pulse 1.4s ease-in-out infinite;
    }

    .showcase-card__body {
      padding: 18px 20px 22px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .showcase-card__title {
      font-weight: 700;
      font-size: 1.05rem;
    }

    .showcase-card__rank {
      font-size: 0.8rem;
      color: var(--showcase-color);
      font-weight: 600;
    }

    .showcase-card__desc {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin: 0;
    }

    .showcase-card__meta {
      display: flex;
      justify-content: space-between;
      font-size: 0.78rem;
      color: var(--text-secondary);
    }

    .showcase-card__xp-bar {
      height: 6px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      overflow: hidden;
    }

    .showcase-card__xp-fill {
      height: 100%;
      border-radius: 999px;
      background: var(--showcase-color);
      box-shadow: 0 0 8px rgba(var(--showcase-color-rgb), 0.6);
      transition: width 0.4s ease;
    }

    .showcase-card__hint {
      margin-top: 2px;
      font-size: 0.74rem;
      color: var(--showcase-color);
    }

    /* Geräte-Leiste (gaming.html, oberhalb der Statistik-Kacheln) — eigene
       Gaming-Hardware als kompakte Chip-Reihe. */
    .device-row {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin: 20px 0 28px;
    }

    .device-chip {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      border-radius: 999px;
    }

    .device-chip__icon {
      font-size: 1.3rem;
    }

    .device-chip__label {
      font-weight: 600;
      font-size: 0.85rem;
    }

    .device-chip__note {
      font-size: 0.72rem;
      color: var(--text-secondary);
    }

    /* Verbundene-Dienste-Leiste (gaming.html, ganz oben) — kleinere,
       klickbare Variante der Geräte-Chips (echte Links statt reiner
       Anzeige, daher dezenter Hover-Effekt). */
    .link-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 16px;
    }

    .link-chip {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 999px;
      text-decoration: none;
      color: inherit;
      font-size: 0.82rem;
      font-weight: 600;
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .link-chip:hover {
      transform: translateY(-2px);
      border-color: var(--accent-cyan);
      box-shadow: 0 0 14px rgba(var(--accent-cyan-rgb), 0.3);
    }

    .link-chip__icon {
      font-size: 1rem;
    }

    .day-modal-entry {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--glass-border-light);
      margin-bottom: 8px;
      font-size: 0.85rem;
    }

    @media (max-width: 640px) {
      .sport-calendar { padding: 20px; }
      .cal-day { font-size: 0.72rem; }
    }

    /* Monat/Woche-Umschalter über dem Kalender-Grid. */
    .cal-view-toggle {
      display: flex;
      gap: 6px;
      justify-content: center;
      margin-bottom: 16px;
    }

    .cal-view-toggle__btn {
      font: inherit;
      font-size: 0.78rem;
      font-weight: 600;
      padding: 6px 16px;
      border-radius: 999px;
      border: 1px solid var(--glass-border-light);
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .cal-view-toggle__btn.is-active {
      border-color: var(--accent-cyan);
      color: var(--accent-cyan);
      background: rgba(var(--accent-cyan-rgb), 0.12);
    }

    /* Wochenansicht: größere, breitere Zellen statt eines quadratischen
       Monatsrasters — dieselbe .cal-day-Optik, nur mit fixer Höhe. */
    .sport-calendar__grid--week {
      grid-template-rows: 120px;
    }

    .sport-calendar__grid--week .cal-day {
      aspect-ratio: auto;
    }

    /* Kategorien-Filter (Checkbox-Chips) unter dem Kalender. */
    .cal-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .cal-filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid var(--glass-border-light);
      font-size: 0.85rem;
      cursor: pointer;
      user-select: none;
      transition: border-color 0.2s ease, color 0.2s ease;
    }

    .cal-filter-chip input {
      accent-color: var(--accent-cyan);
      width: auto;
    }

    .cal-filter-chip:has(input:checked) {
      border-color: var(--accent-cyan);
      color: var(--text-primary);
    }

    .cal-filter-chip:not(:has(input:checked)) {
      color: var(--text-secondary);
      opacity: 0.6;
    }

    /* Zugriff-festlegen-Modal (einstellungen.html): pro Seite (Reise/
       Kalender/Tracking/Dashboard/Minecraft) eine eigene Zeile mit
       unabhängigem Kein-Zugriff/Lesen/Admin-Dropdown, statt einer
       einzelnen Rolle für den ganzen Zugang. */
    .access-page-rows {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .access-page-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 12px;
      border-radius: 10px;
      border: 1px solid var(--glass-border-light);
      background: rgba(255, 255, 255, 0.03);
    }

    .access-page-row span {
      font-size: 0.88rem;
      color: var(--text-primary);
    }

    .access-page-row select {
      width: auto;
      min-width: 130px;
      font-size: 0.85rem !important;
      padding: 6px 10px !important;
    }

    /* Hover-Vorschau: schwebt über dem Kalender, positioniert per JS
       (position:fixed + left/top aus getBoundingClientRect der Zelle). */
    .cal-day-preview {
      position: fixed;
      transform: translateX(-50%);
      z-index: 300;
      min-width: 200px;
      max-width: 260px;
      padding: 14px 16px;
      border-radius: 12px;
      background: var(--surface-overlay-strong);
      border: 1px solid var(--glass-border-light);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      box-shadow: var(--glass-shadow);
      pointer-events: none;
    }

    .cal-day-preview__date {
      font-weight: 700;
      font-size: 0.85rem;
      margin-bottom: 8px;
      text-transform: capitalize;
    }

    .cal-day-preview__list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 0.8rem;
      color: var(--text-secondary);
      list-style: none;
    }

    .cal-day-preview__empty {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin: 0;
    }

    @media (max-width: 640px) {
      .cal-day-preview { display: none; }
    }


    /* ---------------------------------------------------------- */
    /* Dashboard (dashboard.html)                                    */
    /* Bewusst dieselben Bausteine wie die Person-Seite (info-tile/   */
    /* cv-section/cv-timeline/freizeit-card) statt eigener Kachel-    */
    /* Optik — gleiche Ränder, Schriftgrößen & Abstände wie überall.  */
    /* ---------------------------------------------------------- */
    /* Suchleiste als ganz normale info-tile (siehe dashboard.html) — kein
       eigener Pillen-/Card-Rahmen mehr, nur die Zeile aus Icon + Input. */
    .dash-search-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .dash-search-row input {
      width: 100%;
      background: transparent;
      border: none;
      outline: none;
      color: var(--text-primary);
      font: inherit;
      font-size: 1.1rem;
      padding: 4px 0;
    }

    .dash-search-row input::placeholder { color: var(--text-secondary); }
    .dash-search-icon { color: var(--text-secondary); flex-shrink: 0; font-size: 1.2rem; }

    /* Dienst-Kacheln: dieselbe .freizeit-card wie bei den Hobbys auf
       der Person-Seite, nur mit Status-Punkt oben rechts. */
    .dash-service-dot {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--text-secondary);
    }

    .dash-service-dot[data-state="running"] { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
    .dash-service-dot[data-state="stopped"] { background: #fb7185; box-shadow: 0 0 8px #fb7185; }

    .freizeit-card[hidden] { display: none; }

    .dash-empty {
      text-align: center;
      color: var(--text-secondary);
      padding: 20px;
    }

    /* Systemwerte: reiner Text in derselben cv-fact-grid/trip-detail__field
       Optik wie "Persönliche Daten" im Lebenslauf — keine eigenen Ring-SVGs
       mehr (blieben als schwarze Fläche hängen). */
    #dash-metrics .trip-detail__field-value {
      font-size: 1.1rem;
      font-weight: 700;
    }

    #dash-metrics .trip-detail__field-value[data-level="warn"] { color: #fbbf24; }
    #dash-metrics .trip-detail__field-value[data-level="critical"] { color: #fb7185; }

    .dash-metric-extra {
      display: block;
      font-size: 0.72rem;
      color: var(--text-secondary);
      margin-top: 2px;
    }

    /* Zeitraum-Regler über den Verlauf-Charts (5 Min ... 7 Tage). */
    .dash-range-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px;
    }

    .dash-range-slider {
      flex: 1;
      -webkit-appearance: none;
      appearance: none;
      height: 4px;
      border-radius: 999px;
      background: var(--glass-border-light);
      outline: none;
    }

    .dash-range-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--accent-cyan);
      box-shadow: 0 0 8px rgba(var(--accent-cyan-rgb), 0.6);
      cursor: pointer;
      transition: transform 0.15s ease;
    }

    .dash-range-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }

    .dash-range-slider::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border: none;
      border-radius: 50%;
      background: var(--accent-cyan);
      box-shadow: 0 0 8px rgba(var(--accent-cyan-rgb), 0.6);
      cursor: pointer;
    }

    .dash-range-slider::-moz-range-track {
      height: 4px;
      border-radius: 999px;
      background: var(--glass-border-light);
    }

    .dash-range-value {
      flex-shrink: 0;
      min-width: 64px;
      text-align: right;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--accent-cyan);
    }

    /* Verlauf-Charts: schlanker Rand statt vollem Glass-Card-Look (wie
       .map-container) — sonst wirkt es wie Karte-in-Karte. */
    .dash-charts {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 16px;
    }

    .dash-chart-card {
      padding: 16px 18px;
      border: 1px solid var(--glass-border-light);
      border-radius: var(--radius);
    }

    .dash-chart-card__head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 10px;
    }

    .dash-chart-card__title { font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); }
    .dash-chart-card__value { font-size: 0.95rem; font-weight: 700; color: var(--accent-cyan); }

    .dash-chart-card svg { display: block; width: 100%; height: 60px; }
    .dash-chart-line { fill: none; stroke: var(--accent-cyan); stroke-width: 2; }
    .dash-chart-fill { fill: rgba(var(--accent-cyan-rgb), 0.12); stroke: none; }

    .dash-chart-hint {
      text-align: center;
      color: var(--text-secondary);
      font-size: 0.76rem;
      margin: 12px 0 0;
    }

    /* Laufzeiten: dieselbe Zeitleiste wie Werdegang/Schulbildung im
       Lebenslauf (cv-timeline/cv-entry) — Status statt Organisation. */
    .cv-entry__org[data-state="running"] { color: #4ade80; }
    .cv-entry__org[data-state="stopped"] { color: var(--text-secondary); }

    /* ---------------------------------------------------------- */
    /* Minecraft-Übersicht (minecraft.html) — Pelican-Panel-Anbindung */
    /* ---------------------------------------------------------- */
    .mc-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 32px;
    }

    .mc-summary-chip {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 20px;
      border-radius: 999px;
    }

    .mc-summary-chip__value {
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--accent-cyan);
    }

    .mc-summary-chip__label {
      font-size: 0.78rem;
      color: var(--text-secondary);
    }

    /* ---------------------------------------------------------- */
    /* Tracking-Seite (tracking.html) — gleiche Chip-Optik wie die   */
    /* Minecraft-Zusammenfassung oben, generisch benannt statt an     */
    /* .mc-* gekoppelt, weil sie hier mit anderen Kennzahlen wiederverwendet wird. */
    /* ---------------------------------------------------------- */
    .stat-row {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 32px;
    }

    .stat-chip {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 20px;
      border-radius: 999px;
    }

    .stat-chip__value {
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--accent-cyan);
    }

    .stat-chip__label {
      font-size: 0.78rem;
      color: var(--text-secondary);
    }

    /* ---------------------------------------------------------- */
    /* Habit Tracker (tracking.html) — 30-Tage-Heatmap je Kategorie   */
    /* ---------------------------------------------------------- */
    .habit-card {
      padding: 24px 28px;
    }

    .habit-card + .habit-card {
      margin-top: 20px;
    }

    .habit-card__head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 14px;
    }

    .habit-card__title {
      font-size: 1rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .habit-card__meta {
      font-size: 0.78rem;
      color: var(--text-secondary);
    }

    .habit-card__meta strong {
      color: var(--accent-cyan);
      font-weight: 700;
    }

    .habit-heatmap {
      display: grid;
      grid-template-columns: repeat(15, 1fr);
      gap: 4px;
    }

    .habit-heatmap__cell {
      aspect-ratio: 1;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--glass-border-light);
    }

    .habit-heatmap__cell.is-active {
      background: var(--accent-cyan);
      border-color: var(--accent-cyan);
      box-shadow: 0 0 6px rgba(var(--accent-cyan-rgb), 0.5);
    }

    .habit-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.76rem;
      color: var(--text-secondary);
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid var(--glass-border-light);
      margin-top: 12px;
    }

    @media (max-width: 480px) {
      .habit-heatmap { grid-template-columns: repeat(10, 1fr); }
    }

    /* Trainingsvolumen/Woche (tracking.html, "Sport-Fortschritt") — ein
       schmaler Balken je Woche, gleiche Karten-Optik wie .habit-card. */
    .weekly-bars {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      align-items: flex-end;
      gap: 4px;
      height: 60px;
    }

    .weekly-bars__col {
      display: flex;
      align-items: flex-end;
      height: 100%;
      border-radius: 3px 3px 0 0;
      background: rgba(255, 255, 255, 0.06);
    }

    .weekly-bars__fill {
      display: block;
      width: 100%;
      min-height: 2px;
      border-radius: 3px 3px 0 0;
      background: var(--accent-cyan);
      box-shadow: 0 0 6px rgba(var(--accent-cyan-rgb), 0.4);
    }

    @media (max-width: 480px) {
      .weekly-bars { grid-template-columns: repeat(6, 1fr); grid-auto-flow: column; }
    }

    /* Gewichtsverlauf je Übung / Gesundheitswerte — kleiner Inline-SVG-
       Linienchart (siehe lineChartSvg() in tracking.html), kein externes
       Chart-Framework nötig. */
    .line-chart {
      display: block;
    }

    .mc-server-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
    }

    .mc-server-card {
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .mc-server-card__head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .mc-server-card__name {
      font-size: 1.15rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .mc-server-card__desc {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin-top: 2px;
    }

    /* Statuspille — dieselbe Farblogik wie .dash-service-dot (grün =
       läuft, rot = kritisch/offline), plus ein pulsierender Zwischenstand
       für "startet/stoppt gerade". */
    .mc-status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 0.78rem;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 999px;
      border: 1px solid var(--glass-border-light);
      color: var(--text-secondary);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .mc-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--text-secondary);
      flex-shrink: 0;
    }

    .mc-status[data-state="running"] { color: #4ade80; border-color: rgba(74, 222, 128, 0.4); }
    .mc-status[data-state="running"] .mc-status-dot { background: #4ade80; box-shadow: 0 0 8px #4ade80; }

    .mc-status[data-state="crashed"] { color: #fb7185; border-color: rgba(251, 113, 133, 0.4); }
    .mc-status[data-state="crashed"] .mc-status-dot { background: #fb7185; box-shadow: 0 0 8px #fb7185; }

    .mc-status[data-state="starting"],
    .mc-status[data-state="stopping"] { color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); }
    .mc-status[data-state="starting"] .mc-status-dot,
    .mc-status[data-state="stopping"] .mc-status-dot {
      background: #fbbf24;
      box-shadow: 0 0 8px #fbbf24;
      animation: mc-pulse 1s ease-in-out infinite;
    }

    @keyframes mc-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.35; }
    }

    @media (prefers-reduced-motion: reduce) {
      .mc-status-dot { animation: none; }
    }

    .mc-connect {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--glass-border-light);
    }

    .mc-connect__label {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-secondary);
      flex-shrink: 0;
    }

    .mc-connect__address {
      font-family: monospace;
      font-size: 0.92rem;
      color: var(--accent-cyan);
      flex: 1;
      overflow-wrap: anywhere;
    }

    .mc-connect__copy {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-secondary);
      font-size: 0.95rem;
      padding: 4px 6px;
      border-radius: 6px;
      flex-shrink: 0;
      transition: color 0.2s ease, background 0.2s ease;
    }

    .mc-connect__copy:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }

    .mc-idle-hint {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin: 0;
    }

    .mc-player-names {
      font-size: 0.78rem;
      color: var(--text-secondary);
      overflow-wrap: anywhere;
    }

    .mc-server-icon {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      image-rendering: pixelated;
      flex-shrink: 0;
      cursor: zoom-in;
      transition: transform 0.15s ease;
    }

    .mc-server-icon:hover { transform: scale(1.1); }

    /* Hochaufgelöstes Icon (über die Webseite hochgeladen): normal weich
       skalieren statt pixelig — pixelated nur für das 64x64-Original. */
    .mc-server-icon.is-hires,
    .tile-lightbox__body img.mc-icon-large.is-hires {
      image-rendering: auto;
    }

    /* Minecraft-Vorschau auf der Startseite (index.html) */
    .mc-preview-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
    }

    .mc-preview-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 18px 20px;
      color: inherit;
      text-decoration: none;
      flex-wrap: wrap;
      transition: transform 0.2s ease, border-color 0.2s ease;
    }

    .mc-preview-card:hover { transform: translateY(-2px); }

    .mc-preview-card__icon {
      width: 56px;
      height: 56px;
      border-radius: 10px;
      image-rendering: pixelated;
      flex-shrink: 0;
    }

    .mc-preview-card__icon.is-hires,
    .mc-preview-card__icon.is-fallback { image-rendering: auto; }

    .mc-preview-card__body {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      flex: 1;
      min-width: 0;
    }

    .mc-preview-card__name {
      font-weight: 700;
      font-size: 1.05rem;
      overflow-wrap: anywhere;
    }

    .mc-preview-card__facts {
      display: flex;
      gap: 20px;
    }

    .mc-preview-card__facts > div {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .mc-preview-card__label {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-secondary);
    }

    .mc-preview-card__value {
      font-weight: 600;
      white-space: nowrap;
    }

    .mc-live-map {
      margin-top: 24px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .mc-live-map__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .mc-live-map__badge {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-secondary);
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid var(--glass-border-light);
    }

    .mc-live-map__stage {
      min-height: 320px;
      border-radius: 12px;
      border: 1px dashed var(--glass-border-light);
      background: rgba(255, 255, 255, 0.03);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 24px;
      text-align: center;
      color: var(--text-secondary);
      font-size: 0.9rem;
    }

    .mc-live-map__placeholder-icon {
      transform: scale(1.6);
      opacity: 0.8;
    }

    /* 64x64-Original hochskaliert — pixelated hält die Pixel scharf statt
       sie weichzuzeichnen, wie in Minecraft selbst. */
    .tile-lightbox__body img.mc-icon-large {
      width: min(80vw, 60vh, 448px);
      height: auto;
      image-rendering: pixelated;
    }

    .mc-whitelist-open {
      width: 100%;
    }

    .mc-whitelist-card {
      max-width: 440px;
    }

    .mc-whitelist__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .mc-whitelist__controls {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .mc-whitelist__add {
      display: flex;
      gap: 8px;
    }

    .mc-whitelist__add input {
      flex: 1;
      min-width: 0;
    }

    .mc-whitelist__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      overflow-y: auto;
      min-height: 0;
    }

    .mc-whitelist__player {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--glass-border-light);
    }

    .mc-whitelist__head-img {
      width: 28px;
      height: 28px;
      border-radius: 4px;
      image-rendering: pixelated;
      flex-shrink: 0;
    }

    .mc-whitelist__name {
      flex: 1;
      font-family: monospace;
      overflow-wrap: anywhere;
    }

    .mc-whitelist__remove {
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px 6px;
      border-radius: 6px;
      flex-shrink: 0;
      transition: background 0.2s ease;
    }

    .mc-whitelist__remove:hover:not(:disabled) { background: rgba(248, 113, 113, 0.12); }
    .mc-whitelist__remove:disabled { opacity: 0.4; cursor: not-allowed; }

    .mc-whitelist__subhead {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-secondary);
      margin: 4px 0 -6px;
    }

    .mc-whitelist__requests {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .mc-whitelist__meta {
      display: block;
      font-family: inherit;
      font-size: 0.72rem;
      color: var(--text-secondary);
    }

    .mc-whitelist__pending {
      font-size: 0.72rem;
      color: #fbbf24;
      flex-shrink: 0;
    }

    .mc-whitelist__approve {
      background: none;
      border: none;
      cursor: pointer;
      color: #4ade80;
      font-size: 1rem;
      padding: 4px 8px;
      border-radius: 6px;
      flex-shrink: 0;
      transition: background 0.2s ease;
    }

    .mc-whitelist__approve:hover:not(:disabled) { background: rgba(74, 222, 128, 0.12); }
    .mc-whitelist__approve:disabled { opacity: 0.4; cursor: not-allowed; }

    .mc-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      margin-left: 8px;
      border-radius: 999px;
      background: #f87171;
      color: #fff;
      font-size: 0.72rem;
      font-weight: 700;
    }

    .mc-whitelist__empty {
      color: var(--text-secondary);
      font-size: 0.85rem;
      padding: 6px 2px;
    }

    .mc-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .mc-actions button {
      flex: 1;
      min-width: 96px;
    }

    .mc-actions button:disabled {
      opacity: 0.4;
      cursor: default;
      transform: none;
      box-shadow: none;
    }

    .mc-empty-state {
      text-align: center;
      padding: 60px 24px;
      color: var(--text-secondary);
    }

    .mc-empty-state__icon {
      font-size: 2.4rem;
      margin-bottom: 14px;
    }

    .mc-empty-state code {
      font-family: monospace;
      background: rgba(255, 255, 255, 0.06);
      padding: 2px 6px;
      border-radius: 4px;
      color: var(--accent-cyan);
    }

    /* ================================================================
       BUCKET LIST (bucketlist.html): 200 frei schwebende Karten, bei
       jedem Laden clientseitig neu zufällig über eine hohe Scroll-Fläche
       verteilt (siehe Layout-Algorithmus im Skript dort) — nur die
       Erledigt-Markierung selbst kommt vom Server, die Bildschirm-Position
       ist reiner Zufall pro Seitenaufruf.
       ================================================================ */
    .bucket-progress {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 8px;
    }

    .bucket-progress__bar {
      flex: 1;
      height: 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      overflow: hidden;
      max-width: 320px;
    }

    .bucket-progress__fill {
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
      transition: width 0.4s ease;
    }

    .bucket-progress__label {
      font-size: 0.85rem;
      color: var(--text-secondary);
      white-space: nowrap;
    }

    .bucket-canvas {
      position: relative;
      width: 100%;
      margin-top: 12px;
    }

    /* Jede Karte bekommt per Inline-Style ihre zufällige Position
       (left/top) + individuelle Schwebe-Parameter (--fx/--fy/--fr/
       --fdur/--fdelay) — dieselben zwei Keyframes reichen für alle 200
       Karten, weil Amplitude/Rotation/Dauer/Verzögerung pro Karte über
       CSS-Variablen variieren statt über eigene @keyframes-Regeln. */
    .bucket-item {
      position: absolute;
      width: 168px;
      padding: 12px 14px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.14), rgba(var(--accent-purple-rgb), 0.1)), var(--glass-bg);
      border: 1px solid var(--glass-border-light);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      cursor: pointer;
      animation: bucket-float var(--fdur, 9s) ease-in-out infinite;
      animation-delay: var(--fdelay, 0s);
      transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    }

    .bucket-item:hover {
      border-color: var(--accent-cyan);
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
      z-index: 5;
    }

    @keyframes bucket-float {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      50% { transform: translate(var(--fx, 10px), var(--fy, -12px)) rotate(var(--fr, 1.5deg)); }
    }

    @media (prefers-reduced-motion: reduce) {
      .bucket-item { animation: none; }
    }

    .bucket-item__cat {
      font-size: 1rem;
      line-height: 1;
      margin-bottom: 6px;
      display: block;
    }

    .bucket-item__text {
      font-size: 0.78rem;
      line-height: 1.35;
      color: var(--text-primary);
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .bucket-item.is-done {
      opacity: 0.5;
    }

    .bucket-item.is-done .bucket-item__text {
      color: var(--text-secondary);
    }

    .bucket-item__check {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: var(--accent-cyan);
      color: #04202a;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.78rem;
      font-weight: 700;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .bucket-add-fab {
      position: fixed;
      right: 20px;
      bottom: 84px;
      z-index: 40;
      border-radius: 999px;
      padding: 14px 20px;
      font-weight: 600;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    }

    @media (max-width: 640px) {
      .bucket-item { width: 138px; padding: 10px 12px; }
      .bucket-item__text { font-size: 0.72rem; }
      .bucket-add-fab { right: 14px; bottom: 78px; padding: 12px 16px; font-size: 0.85rem; }
    }

    .bucket-detail-category {
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }

    .bucket-detail-text {
      font-size: 1.05rem;
      line-height: 1.5;
      color: var(--text-primary);
    }

    /* Ideensammlung (bucketlist.html): Vorschläge von Zugängen mit nur
       Lesezugriff — normale (nicht schwebende) Karten-Liste unterhalb der
       eigentlichen Bucket List, "+" oben rechts übernimmt vollständig. */
    .bucket-suggestions {
      margin-top: 56px;
    }

    .bucket-suggestion-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .bucket-suggestion-card {
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .bucket-suggestion-card__text {
      margin: 0;
      font-size: 0.9rem;
      color: var(--text-primary);
      flex: 1;
      min-width: 160px;
    }

    /* Ablehnen + Übernehmen nebeneinander, gleiche Höhe/Ausrichtung —
       dasselbe Muster wie .accounts-table__actions in einstellungen.html. */
    .bucket-suggestion-card__actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .bucket-suggestion-card__promote {
      font-weight: 700;
    }

    /* "Idee vorschlagen" (bucketlist.html) / "Reise vorschlagen" (reisen.html)
       — sitzt unten in der Ideensammlung statt als schwebender Button, damit
       er im Kontext der Vorschläge steht, für die er gedacht ist. */
    .bucket-suggestions__suggest-btn {
      margin-top: 16px;
    }

    /* Inline-Bearbeiten im Detail-Modal (statt eines eigenen Dialogs). */
    .bucket-detail-edit-textarea {
      width: 100%;
      min-height: 90px;
      font: inherit;
      font-size: 0.95rem;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--glass-border-light);
      border-radius: 10px;
      padding: 10px 12px;
      color: var(--text-primary);
      resize: vertical;
    }

    .bucket-detail-edit-textarea:focus {
      outline: none;
      border-color: var(--accent-cyan);
      box-shadow: 0 0 0 3px rgba(var(--accent-cyan-rgb), 0.18);
    }

    /* ------------------------------------------------------------------
       Minecraft-Katze (public/assets/mc-cat.js, nur auf minecraft.html):
       läuft unten am Rand entlang. z-index unter Navigation (100) und
       Modals (200), damit sie nie über Dialogen herumläuft.
       ------------------------------------------------------------------ */
    .mc-cat {
      position: fixed;
      left: 0;
      bottom: env(safe-area-inset-bottom, 0px);
      z-index: 90;
      padding: 0;
      margin: 0;
      border: none;
      background: none;
      line-height: 0;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      will-change: transform;
      /* 1-px-Kontur rundherum (hebt das schwarze Fell auf dunklen Themes
         ab) + leichter Schatten nach unten */
      filter:
        drop-shadow(1px 0 0 rgba(200, 200, 215, 0.55))
        drop-shadow(-1px 0 0 rgba(200, 200, 215, 0.55))
        drop-shadow(0 -1px 0 rgba(200, 200, 215, 0.55))
        drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35));
    }

    .mc-cat:focus-visible {
      outline: 2px solid var(--accent-cyan);
      outline-offset: 4px;
      border-radius: 4px;
    }

    .mc-cat.is-away { visibility: hidden; }

    .mc-cat__frame { display: none; }
    .mc-cat[data-pose="walkA"] .mc-cat__frame--walkA,
    .mc-cat[data-pose="walkB"] .mc-cat__frame--walkB,
    .mc-cat[data-pose="sit"] .mc-cat__frame--sit { display: block; }

    /* Sprite schaut nach rechts — beim Laufen nach links spiegeln */
    .mc-cat.is-left .mc-cat__frame { transform: scaleX(-1); }

    .mc-cat-heart {
      position: fixed;
      z-index: 91;
      pointer-events: none;
      line-height: 0;
      opacity: 0;
      animation: mc-cat-heart 1.3s ease-out forwards;
    }

    @keyframes mc-cat-heart {
      0%   { opacity: 0; transform: translateY(0) scale(0.6); }
      15%  { opacity: 1; transform: translateY(-8px) scale(1); }
      100% { opacity: 0; transform: translateY(-60px) scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
      .mc-cat-heart { animation-name: mc-cat-heart-fade; }
      @keyframes mc-cat-heart-fade {
        0%, 60% { opacity: 1; }
        100%    { opacity: 0; }
      }
    }