/* ==========================================================================
   TripPhoto „Feldbuch“ – Designsystem der neuen Oberfläche (UI-Redesign 14.09.2026)

   Konzept: https://claude.ai/code/artifact/ce3ed759-d170-4404-9461-40ae3b0e1a83
   Entscheidung: Richtung „Feldbuch, mutiger“ – Karte als Fläche, Petrol als
   einzige Markenfarbe (flächig in der Seitenleiste), Bernstein nur für Licht,
   Zahlen in Mono, kein Verlauf.

   Ebenen (niedrig → hoch). Eine spätere Ebene gewinnt IMMER, unabhängig von der
   Spezifität. Nur die Hilfsklassen der Brücke tragen !important – wie ihr
   Bootstrap-Vorbild, damit mb-0 auch neben einer Komponente wirkt:
     grund    Knopf-/Feld-Rücksetzung und Icongröße – UNTER legacy, damit alte
                 Knöpfe (Diashow, Leuchtkasten, 3D-Gelände …) ihre Farbe behalten
     legacy      app.css (Leuchtkasten, Kartenmarken, Sterne …), per @import im Layout
     tp.basis    Reset, Token, Typografie
     tp.bruecke  Variablen der alten app.css auf die Feldbuch-Tokens (Bootstrap seit 16.09.2026 entfernt)
     tp.bausteine eigene Komponenten (tp-*)
     tp.rahmen   Seitenleiste, Reiterleiste, Seitenraster
     tp.seiten   seitenspezifisch (Reise-Seite)
   Leaflet bleibt ohne Ebene und wird am Dateiende gezielt angepasst.
   ========================================================================== */
@layer grund, legacy, tp.basis, tp.bruecke, tp.bausteine, tp.rahmen, tp.seiten;

/* Schriften (selbst ausgeliefert, OFL). Bricolage kommt aus fonts.css. */
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/atkinson-hyperlegible-next-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/atkinson-hyperlegible-next-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ======================================================================== */
/* Rücksetzungen, die alte Bausteine überschreiben dürfen.
   Standen bis 14.09.2026 in tp.basis – und eine spätere Ebene gewinnt immer:
   „color: inherit“ schlug damit .pt-show-btn { color:#fff } aus app.css, die
   Diashow-Knöpfe zeichneten dunkle Icons auf dunklem Grund. Gleiches galt für
   gut 20 weitere alte Knöpfe. Hier unten gelten sie nur, wo nichts anderes
   etwas sagt. */
@layer grund {
  .tp-ui :where(button, input, select, textarea) { font: inherit; color: inherit; }
  .tp-ui svg.lucide { width: 1.1em; height: 1.1em; vertical-align: -.16em; flex: none; }
}

@layer tp.basis {
  /* ---- Token: Hell (Kartenpapier) ----
     Kontraste gegen --bg nachgerechnet (WCAG 2.2): Text 15,2 · gedämpft 5,7 ·
     Petrol 5,8 · Weiß auf Petrol 6,8 · Seitenleiste Text 9,6. */
  :root {
    --bg: #EAEEEC; --surface: #F6F8F7; --elev: #FFFFFF;
    --ink: #0E1A1D; --muted: #4E5F63; --line: #C4CFCD; --line-soft: #D9E1DF;
    --primary: #0A6570; --primary-hover: #08535C; --on-primary: #FFFFFF; --primary-soft: #D1E8E9;
    --rail: #07434A; --rail-ink: #E6F2F1; --rail-muted: #9CC4C4; --rail-active: #CFEDEC; --rail-active-ink: #07434A;
    --sun: #9A5800; --sun-soft: #F4E3C6;
    --ok: #1E7A44; --ok-soft: #DCEFE3; --warn: #8F5200; --warn-soft: #F4E6CF;
    --err: #B42318; --err-soft: #F7DEDB; --info: #1F5FAF; --info-soft: #DCE7F6;
    --route: #2A63D6;
    --shadow-1: 0 1px 2px rgba(14, 26, 29, .07);
    --shadow-2: 0 14px 34px -14px rgba(14, 26, 29, .32);
    --focus: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent);

    --f-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
    --f-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --f-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Abstände XS … XXL */
    --s-xs: 4px; --s-sm: 8px; --s-md: 16px; --s-lg: 24px; --s-xl: 32px; --s-xxl: 48px; --s-sek: 72px;
    --r-ctl: 8px; --r-blatt: 18px;
    --t-schnell: 120ms; --t-blatt: 220ms; --kurve: cubic-bezier(.2, .8, .2, 1);
    --rail-w: 244px; --rail-w-zu: 72px;

    color-scheme: light;
  }
  /* ---- Token: Dunkel (Nachtkarte) – eigener Entwurf, nicht invertiert ---- */
  :root[data-bs-theme="dark"] {
    --bg: #0A1214; --surface: #111C1F; --elev: #182528;
    --ink: #EAF2F0; --muted: #97A9AA; --line: #28393D; --line-soft: #1E2D31;
    --primary: #5CD0D5; --primary-hover: #7DDDE1; --on-primary: #04292C; --primary-soft: #113A3E;
    --rail: #06292E; --rail-ink: #E6F2F1; --rail-muted: #8FB5B6; --rail-active: #5CD0D5; --rail-active-ink: #04292C;
    --sun: #F0B45B; --sun-soft: #3A2B14;
    --ok: #5BC98A; --ok-soft: #12301F; --warn: #E7C15A; --warn-soft: #362C10;
    --err: #FF8A7A; --err-soft: #3A1714; --info: #8AB4FF; --info-soft: #14253F;
    --route: #7FA8FF;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-2: 0 18px 44px -18px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
  /* Ohne JavaScript entscheidet das System. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme]) {
      --bg: #0A1214; --surface: #111C1F; --elev: #182528;
      --ink: #EAF2F0; --muted: #97A9AA; --line: #28393D; --line-soft: #1E2D31;
      --primary: #5CD0D5; --primary-hover: #7DDDE1; --on-primary: #04292C; --primary-soft: #113A3E;
      --rail: #06292E; --rail-active: #5CD0D5; --rail-active-ink: #04292C;
      --sun: #F0B45B; --sun-soft: #3A2B14; --ok: #5BC98A; --ok-soft: #12301F; --warn: #E7C15A; --warn-soft: #362C10;
      --err: #FF8A7A; --err-soft: #3A1714; --info: #8AB4FF; --info-soft: #14253F; --route: #7FA8FF;
      color-scheme: dark;
    }
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body.tp-ui {
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: var(--f-body); font-size: 1rem; line-height: 1.55;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  .tp-ui :where(h1, h2, h3, h4, h5, h6) { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; margin: 0 0 .4em; text-wrap: balance; color: var(--ink); }
  .tp-ui :where(h1) { font-size: clamp(2.4rem, 4.2vw, 4rem); letter-spacing: -.04em; line-height: .98; }
  .tp-ui :where(h2) { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
  .tp-ui :where(h3) { font-size: 1.35rem; }
  .tp-ui :where(h4) { font-size: 1.15rem; }
  .tp-ui :where(h5, h6) { font-size: 1rem; letter-spacing: -.01em; }
  .tp-ui :where(p) { margin: 0 0 1em; }
  .tp-ui :where(a) { color: var(--primary); text-underline-offset: .18em; text-decoration-thickness: 1px; }
  .tp-ui :where(a:hover) { color: var(--primary-hover); }
  .tp-ui :where(img, svg, video) { max-width: 100%; }
  .tp-ui :where(hr) { border: 0; border-top: 1px solid var(--line); margin: var(--s-lg) 0; }
  .tp-ui :where(code, kbd) { font-family: var(--f-data); font-size: .88em; }
  .tp-ui :where(kbd) { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 .35em; background: var(--surface); }
  .tp-ui :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
  .tp-ui ::selection { background: color-mix(in srgb, var(--primary) 30%, transparent); }
  .tp-ui [hidden] { display: none !important; }
  /* app.css malt Farbflecken hinter die Seite – im Feldbuch nicht. */
  body.tp-ui::before, body.tp-ui::after { content: none; display: none; }

  .tp-data, .tp-ui .pt-count { font-family: var(--f-data); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
  .tp-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
  .tp-gedaempft { color: var(--muted); }
  .tp-nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

/* ======================================================================== */
/* Brückenschicht: Bootstrap-Klassennamen der noch nicht umgebauten Ansichten,
   gestaltet im Feldbuch-Look. Nur die tatsächlich benutzten (gezählt über alle
   72 Ansichten). Wird mit jeder umgebauten Seite kleiner und fällt am Ende weg. */
@layer tp.bruecke {
  /* Bis 16.09.2026 stand hier die Brücke für Bootstrap-Klassennamen (Raster,
     Abstände, Knöpfe, Karten …). Alle Ansichten sind umgebaut, Bootstrap ist
     entfernt. Geblieben ist, was nicht Bootstrap ist:

     1. Farb- und Formvariablen der alten app.css auf die Feldbuch-Tokens
        umbiegen. app.css gestaltet weiter viele Bausteine (pt-*) – ohne das
        kämen der Türkis-Violett-Verlauf und das Leuchten zurück. --pt-grad
        bleibt technisch ein Verlauf, ist aber einfarbig. */
  .tp-ui {
    --pt-flach: var(--primary);
    --pt-accent-1: var(--primary); --pt-accent-2: var(--primary-hover); --pt-accent-3: var(--sun);
    --pt-grad: linear-gradient(var(--pt-flach), var(--pt-flach));
    --pt-glow: none;
    --pt-bg: var(--bg); --pt-fg: var(--ink); --pt-muted-fg: var(--muted);
    --pt-surface: var(--elev); --pt-surface-solid: var(--elev); --pt-border: var(--line-soft);
    --pt-hover: var(--surface); --pt-muted-bg: var(--surface);
    --pt-shadow: var(--shadow-1); --pt-shadow-lg: var(--shadow-2);
    --pt-font-sans: var(--f-body); --pt-font-display: var(--f-display);
  }
  .tp-ui small { font-size: .875rem; }
}

/* 2. Kleine Hilfsklassen mit eigenem Namen (ersetzen d-flex, mt-4, text-muted …)
      und die Zustände, die Skripte setzen (tp-weg, Fortschritt, Dreher). */
@layer tp.bausteine {
  .tp-weg { display: none !important; }
  .tp-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .tp-reihe--weit { gap: 16px; }
  .tp-spalte { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 16px; }
  .tp-wachsen { flex-grow: 1; min-width: 0; }
  .tp-luft-oben { margin-top: 24px; }
  .tp-luft-oben-klein { margin-top: 8px; }
  .tp-luft-unten { margin-bottom: 8px; }
  .tp-luft-unten-klein { margin-bottom: 4px; }
  .tp-luft-unten-gross { margin-bottom: 16px; }
  .tp-ohne-rand { margin: 0; }
  .tp-klein { font-size: .875rem; }
  .tp-fett { font-weight: 700; }
  .tp-rechts { text-align: right; }
  .tp-titel-3 { font: 700 1.35rem/1.1 var(--f-display); }
  .tp-titel-4 { font: 700 1.15rem/1.15 var(--f-display); letter-spacing: -.01em; }
  .tp-titel-5 { font: 700 1rem/1.2 var(--f-display); }
  .tp-platzhalter { display: inline-block; min-height: 1em; background: var(--line-soft); border-radius: 4px; }
  .tp-vorschau { border: 1px solid var(--line); border-radius: var(--r-ctl); }
  .tp-regler { width: 100%; accent-color: var(--primary); }
  .tp-fortschritt { display: flex; height: 10px; overflow: hidden; background: var(--surface); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-soft); }
  .tp-fortschritt-balken { display: flex; align-items: center; justify-content: center; background: var(--primary); color: var(--on-primary); font-size: .72rem; font-family: var(--f-data); white-space: nowrap; transition: width .3s var(--kurve); }
  .tp-dreher { display: inline-block; width: 2rem; height: 2rem; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tp-dreh .75s linear infinite; }
  .tp-dreher--klein { width: 1rem; height: 1rem; border-width: 2px; }
  @keyframes tp-dreh { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .tp-dreher { animation-duration: 2.5s; } }
}

/* ======================================================================== */
@layer tp.bausteine {
  /* Knopf */
  .tp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-ctl);
    font-family: var(--f-body); font-weight: 700; font-size: .95rem; line-height: 1.1; white-space: nowrap; text-decoration: none; cursor: pointer;
    background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line);
    transition: background-color var(--t-schnell), box-shadow var(--t-schnell), transform var(--t-schnell), color var(--t-schnell);
  }
  .tp-btn:hover { background: var(--surface); color: var(--ink); }
  .tp-btn:active { transform: scale(.97); }
  .tp-btn:disabled, .tp-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
  .tp-btn--pri { background: var(--primary); color: var(--on-primary); box-shadow: none; }
  .tp-btn--pri:hover { background: var(--primary-hover); color: var(--on-primary); }
  .tp-btn--leise { box-shadow: none; color: var(--primary); padding-inline: 8px; }
  .tp-btn--leise:hover { background: var(--primary-soft); color: var(--primary); }
  .tp-btn--gefahr { color: var(--err); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--err) 50%, transparent); }
  .tp-btn--gefahr:hover { background: var(--err-soft); color: var(--err); }
  .tp-btn--klein { min-height: 36px; padding: 0 12px; font-size: .86rem; border-radius: 7px; }
  .tp-btn--gross { min-height: 52px; padding: 0 24px; font-size: 1.02rem; border-radius: 12px; }
  .tp-btn--rund { width: 44px; padding: 0; border-radius: 50%; }
  .tp-btn--rund.tp-btn--klein { width: 36px; }
  .tp-btn--schwebend { background: var(--elev); box-shadow: var(--shadow-2); }
  .tp-btn--schwebend:hover { background: var(--elev); }
  .tp-btn.is-an { background: var(--primary-soft); color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); }

  /* Eingaben */
  .tp-feld { display: grid; gap: 6px; min-width: 0; }
  .tp-feld > label, .tp-feld > .tp-feld-t { font-size: .84rem; font-weight: 700; }
  .tp-feld > small { color: var(--muted); font-size: .8rem; }
  .tp-eingabe, .tp-auswahl, .tp-text {
    width: 100%; min-height: 44px; padding: 10px 12px; background: var(--surface); color: var(--ink);
    border: 0; border-bottom: 2px solid var(--line); border-radius: var(--r-ctl) var(--r-ctl) 2px 2px;
    transition: border-color var(--t-schnell), background-color var(--t-schnell);
  }
  .tp-eingabe:focus, .tp-auswahl:focus, .tp-text:focus { outline: none; border-bottom-color: var(--primary); background: var(--elev); box-shadow: none; }
  .tp-text { min-height: 88px; resize: vertical; }
  /* Passwort anzeigen (app.js legt .pw-wrap/.pw-eye um jedes Passwortfeld).
     Statt des Emojis ein Augen-Symbol als Maske, durchgestrichen wenn sichtbar. */
  .pw-wrap { position: relative; display: block; }
  .pw-wrap > input { padding-right: 48px; }
  .pw-eye { position: absolute; top: 0; right: 0; width: 46px; height: 100%; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; font-size: 0; color: var(--muted); border-radius: var(--r-ctl); }
  .pw-eye::before { content: ""; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; }
  .pw-eye[aria-pressed="true"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/%3E%3Cpath d='M6.61 6.61A13.53 13.53 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cline x1='2' x2='22' y1='2' y2='22'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/%3E%3Cpath d='M6.61 6.61A13.53 13.53 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cline x1='2' x2='22' y1='2' y2='22'/%3E%3C/svg%3E"); }
  .pw-eye:hover { color: var(--ink); }
  .pw-eye:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; }
  .tp-auswahl { appearance: none; padding-right: 36px;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
  .tp-eingabe--klein, .tp-auswahl--klein { min-height: 36px; padding-block: 6px; font-size: .9rem; }
  .tp-haken { display: flex; align-items: center; gap: 10px; min-height: 32px; font-size: .93rem; cursor: pointer; }
  .tp-haken input { width: 20px; height: 20px; accent-color: var(--primary); margin: 0; flex: none; }

  /* Segmente */
  .tp-seg { display: inline-grid; grid-auto-flow: column; gap: 2px; padding: 3px; background: var(--surface); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
  .tp-seg > * { min-height: 36px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: .88rem; font-weight: 700; cursor: pointer; }
  .tp-seg > [aria-pressed="true"], .tp-seg > .is-an { background: var(--elev); color: var(--ink); box-shadow: var(--shadow-1); }

  /* Chips & Abzeichen */
  .tp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border-radius: 999px; font-size: .84rem; background: var(--elev); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
  .tp-chip i.tp-punkt { width: 9px; height: 9px; border-radius: 50%; background: currentColor; display: block; }
  .tp-marke { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; background: var(--surface); color: var(--muted); }
  .tp-marke--an { background: var(--primary-soft); color: var(--primary); }
  .tp-marke--ok { background: var(--ok-soft); color: var(--ok); }
  .tp-marke--warn { background: var(--warn-soft); color: var(--warn); }
  .tp-marke--pro { background: var(--sun-soft); color: var(--sun); }
  .tp-licht { color: var(--sun); font-weight: 700; }

  /* Messwerte */
  .tp-messleiste { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); border-block: 1px solid var(--line-soft); }
  .tp-messwert { display: grid; gap: 2px; padding: 12px 16px 12px 0; align-content: start; }
  .tp-messwert + .tp-messwert { padding-left: 16px; border-left: 1px solid var(--line-soft); }
  .tp-messwert b { font-family: var(--f-data); font-weight: 500; font-variant-numeric: tabular-nums; font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -.03em; line-height: 1.05; }
  .tp-messwert b small { font-size: .5em; color: var(--muted); margin-left: 2px; letter-spacing: 0; }
  .tp-messwert .pt-count { font-size: inherit; line-height: inherit; }
  .tp-messwert span { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Hinweis */
  .tp-hinweis { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px 12px 18px; border-radius: 10px; background: var(--surface); box-shadow: inset 4px 0 0 var(--muted); font-size: .94rem; }
  .tp-hinweis--ok { background: var(--ok-soft); box-shadow: inset 4px 0 0 var(--ok); }
  .tp-hinweis--warn { background: var(--warn-soft); box-shadow: inset 4px 0 0 var(--warn); }
  .tp-hinweis--info { background: var(--info-soft); box-shadow: inset 4px 0 0 var(--info); }
  .tp-hinweis svg.lucide { margin-top: .2em; }

  /* Reiter-Leiste (Sprungmarken) */
  .tp-reiter { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
  .tp-reiter::-webkit-scrollbar { display: none; }
  .tp-reiter a { display: inline-flex; align-items: center; gap: 6px; padding: 12px 0; color: var(--muted); font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap; }
  .tp-reiter a:hover, .tp-reiter a.is-an { color: var(--ink); box-shadow: inset 0 -2px 0 var(--primary); }
  .tp-reiter a .tp-zahl { font-family: var(--f-data); font-size: .78rem; color: var(--muted); }

  /* Aufklapper (details) */
  .tp-klapp { border-top: 1px solid var(--line-soft); }
  .tp-klapp > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; font-weight: 700; }
  .tp-klapp > summary::-webkit-details-marker { display: none; }
  .tp-klapp > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform var(--t-schnell); }
  .tp-klapp[open] > summary::after { transform: rotate(45deg); }
  .tp-klapp > summary .tp-zahl { font-family: var(--f-data); color: var(--muted); font-weight: 500; }
  .tp-klapp-inhalt { padding-bottom: var(--s-lg); }

  /* Menü (details als Popover) */
  .tp-menue { position: relative; }
  .tp-menue > summary { list-style: none; cursor: pointer; }
  .tp-menue > summary::-webkit-details-marker { display: none; }
  .tp-menue-panel { position: absolute; z-index: 70; min-width: 15rem; padding: 6px; margin-top: 8px; right: 0; background: var(--elev); color: var(--ink);
    border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow-2); animation: tp-auf var(--t-blatt) var(--kurve); }
  .tp-menue-panel--oben { bottom: 100%; top: auto; margin: 0 0 8px; left: 0; right: auto; }
  .tp-menue-panel a, .tp-menue-panel button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-decoration: none; font-size: .93rem; text-align: left; cursor: pointer; }
  .tp-menue-panel a:hover, .tp-menue-panel button:hover { background: var(--surface); }
  .tp-menue-panel .tp-gefahr { color: var(--err); }
  .tp-menue-trenn { height: 1px; background: var(--line-soft); margin: 6px 4px; }
  .tp-menue-gruppe { padding: 8px 10px 4px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
  @keyframes tp-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

  /* Tabelle */
  .tp-tabelle-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tp-tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  .tp-tabelle th { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); text-align: left; padding: 8px; border-bottom: 1px solid var(--line); }
  .tp-tabelle td { padding: 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
  .tp-tabelle tr.is-markiert td { background: var(--warn-soft); }

  /* Zeilen-Liste */
  .tp-zeile { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .tp-zeile b { display: block; }
  .tp-zeile small { color: var(--muted); }

  /* Leer / Laden */
  .tp-leer { display: grid; gap: 8px; justify-items: start; padding: var(--s-xl) 0; color: var(--muted); }
  .tp-leer b { color: var(--ink); font-family: var(--f-display); font-size: 1.2rem; }
  .tp-skelett { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--line-soft), var(--line), var(--line-soft)); background-size: 200% 100%; animation: tp-schimmer 1.4s linear infinite; }
  @keyframes tp-schimmer { to { background-position: -200% 0; } }

  /* Sektionskopf */
  .tp-kopf { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: var(--s-md); }
  .tp-kopf h2 { margin: 0; }
}

/* ======================================================================== */
@layer tp.rahmen {
  .tp-sprung { position: absolute; left: -999px; top: 8px; z-index: 200; padding: 8px 12px; background: var(--elev); border-radius: 8px; }
  .tp-sprung:focus { left: 8px; }

  .tp-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
  @media (min-width: 900px) { .tp-shell { grid-template-columns: var(--rail-w) minmax(0, 1fr); } }
  @media (min-width: 900px) { body.tp-rail-zu .tp-shell { grid-template-columns: var(--rail-w-zu) minmax(0, 1fr); } }

  /* Seitenleiste – flächiges Petrol als Anker, in beiden Modi */
  .tp-rail { display: none; }
  @media (min-width: 900px) {
    .tp-rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 18px 12px 14px; background: var(--rail); color: var(--rail-ink); z-index: 40; }
  }
  .tp-marke-kopf { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; color: var(--rail-ink); text-decoration: none; font-family: var(--f-display); font-weight: 700; font-size: 1.22rem; letter-spacing: -.02em; }
  .tp-marke-kopf img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
  .tp-marke-kopf:hover { color: var(--rail-ink); }
  .tp-rail-suche { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; margin: 0 0 10px; border-radius: 10px; color: var(--rail-muted); text-decoration: none; font-size: .92rem; background: color-mix(in srgb, var(--rail-ink) 9%, transparent); }
  .tp-rail-suche:hover { color: var(--rail-ink); background: color-mix(in srgb, var(--rail-ink) 14%, transparent); }
  .tp-rail-suche kbd { margin-left: auto; border-color: color-mix(in srgb, var(--rail-ink) 25%, transparent); background: transparent; color: var(--rail-muted); font-size: .72rem; }
  .tp-rail-nav { display: flex; flex-direction: column; gap: 2px; }
  .tp-rail-link { position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: 10px; color: var(--rail-ink); text-decoration: none; font-weight: 700; font-size: 1rem; }
  .tp-rail-link svg.lucide { width: 21px; height: 21px; }
  .tp-rail-link:hover { background: color-mix(in srgb, var(--rail-ink) 10%, transparent); color: var(--rail-ink); }
  .tp-rail-link.is-an { background: var(--rail-active); color: var(--rail-active-ink); }
  .tp-rail-unter { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 8px 33px; padding-left: 12px; border-left: 1px solid color-mix(in srgb, var(--rail-ink) 22%, transparent); }
  .tp-rail-unter a { padding: 5px 8px; border-radius: 7px; color: var(--rail-muted); text-decoration: none; font-size: .88rem; }
  .tp-rail-unter a:hover, .tp-rail-unter a.is-an { color: var(--rail-ink); background: color-mix(in srgb, var(--rail-ink) 9%, transparent); }
  .tp-rail-fuss { margin-top: auto; display: grid; gap: 6px; }
  .tp-rail-knopf { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--rail-muted); font-size: .9rem; cursor: pointer; text-align: left; }
  .tp-rail-knopf:hover { background: color-mix(in srgb, var(--rail-ink) 10%, transparent); color: var(--rail-ink); }
  .tp-konto > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; border-radius: 12px; color: var(--rail-ink); background: color-mix(in srgb, var(--rail-ink) 8%, transparent); }
  .tp-konto > summary:hover { background: color-mix(in srgb, var(--rail-ink) 14%, transparent); }
  .tp-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--rail-active); color: var(--rail-active-ink); font-weight: 700; font-size: .9rem; }
  .tp-konto-name { min-width: 0; display: grid; line-height: 1.2; }
  .tp-konto-name b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tp-konto-name small { color: var(--rail-muted); font-size: .76rem; }

  /* Eingeklappt: nur Icons */
  body.tp-rail-zu .tp-rail :is(.tp-marke-kopf span, .tp-rail-link span, .tp-rail-suche span, .tp-rail-suche kbd, .tp-rail-unter, .tp-konto-name, .tp-rail-knopf span) { display: none; }
  body.tp-rail-zu .tp-rail :is(.tp-rail-link, .tp-rail-suche, .tp-rail-knopf) { justify-content: center; padding: 0; }
  body.tp-rail-zu .tp-konto > summary { justify-content: center; padding: 6px 0; background: none; }

  .tp-main { min-width: 0; padding-bottom: 88px; }
  @media (min-width: 900px) { .tp-main { padding-bottom: 0; } }
  /* Volle Breite (Wunsch 14.09.): keine feste Maximalbreite mehr für den Inhalt.
     Lesetext begrenzt sich selbst über .lead/.tp-gedaempft, Raster füllen die Fläche. */
  .tp-inhalt { padding: clamp(20px, 3.4vw, 48px) clamp(16px, 3.4vw, 56px) var(--s-xxl); }
  .tp-inhalt--voll { padding: 0; max-width: none; }

  /* Mobile Kopfzeile & Reiterleiste */
  .tp-mobilkopf { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft); }
  .tp-mobilkopf .tp-marke-kopf { color: var(--ink); padding: 0; font-size: 1.1rem; }
  .tp-mobilkopf .tp-marke-kopf:hover { color: var(--ink); }
  @media (min-width: 900px) { .tp-mobilkopf { display: none; } }
  .tp-reiterleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 4px calc(env(safe-area-inset-bottom, 0px) + 6px); background: color-mix(in srgb, var(--elev) 94%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--line-soft); }
  @media (min-width: 900px) { .tp-reiterleiste { display: none; } }
  .tp-reiterleiste a { display: grid; justify-items: center; gap: 3px; min-height: 52px; padding-top: 6px; color: var(--muted); text-decoration: none; font-size: .7rem; font-weight: 700; }
  .tp-reiterleiste a svg.lucide { width: 23px; height: 23px; }
  .tp-reiterleiste a.is-an { color: var(--primary); }

  /* Fußzeile in Gruppen (19.09.2026): Marke + Gruppen nebeneinander, Links je Gruppe untereinander */
  .tp-fuss { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px 28px; align-items: start;
    padding: var(--s-xl) clamp(16px, 3.4vw, 56px) var(--s-lg); color: var(--muted); font-size: .88rem; border-top: 1px solid var(--line-soft); }
  .tp-fuss a { color: var(--muted); text-decoration: none; }
  .tp-fuss a:hover, .tp-fuss a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .tp-fuss-marke { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
  .tp-fuss-marke .tp-marke-kopf { color: var(--ink); padding: 0; font-size: 1rem; text-decoration: none; }
  .tp-fuss-marke .tp-social { margin-block: 0; }
  .tp-fuss-gruppe h2 { margin: 0 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
  .tp-fuss-gruppe ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
  .tp-fuss-gruppe a { display: inline-block; padding-block: 5px; line-height: 1.35; }
  @media (max-width: 560px) { .tp-fuss { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .tp-social { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-block: -8px; }
  .tp-social a { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--muted); }
  .tp-social a:hover, .tp-social a:focus-visible { color: var(--primary); background: var(--primary-soft); }
  .tp-social svg { width: 18px; height: 18px; }
  .tp-fuss-recht { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }

  /* Alte Seitenköpfe der Brücke: Eyebrow und Display-Titel im neuen Maß */
  .tp-ui .pt-eyebrow { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
  .tp-ui .pt-display { font-family: var(--f-display); font-weight: 700; letter-spacing: -.045em; line-height: .95; }
  .tp-ui .pt-hero { padding: 0 0 var(--s-lg); background: none; text-align: left; }
}

/* ======================================================================== */
/* Reise-Seite (Master 3): Karte klebt links, Inhalt scrollt rechts. */
@layer tp.seiten {
  .rs { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
  @media (min-width: 1100px) { .rs { grid-template-columns: minmax(0, 1fr) clamp(460px, 38vw, 640px); } }

  .rs-buehne { position: relative; height: 62vh; min-height: 380px; background: var(--surface); }
  @media (min-width: 1100px) { .rs-buehne { position: sticky; top: 0; height: 100vh; } }
  .rs-buehne #map { position: absolute; inset: 0; height: 100% !important; border-radius: 0 !important; margin: 0 !important; z-index: 1; }

  .rs-oben { position: absolute; z-index: 5; top: 16px; left: 16px; right: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; pointer-events: none; }
  .rs-oben > * { pointer-events: auto; }
  .rs-krume { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 6px; border-radius: 12px; background: var(--elev); box-shadow: var(--shadow-2); color: var(--muted); text-decoration: none; font-size: .88rem; font-weight: 700; }
  .rs-krume:hover { color: var(--ink); }
  .rs-aktionen { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

  .rs-unten { position: absolute; z-index: 5; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 8px; pointer-events: none; }
  .rs-unten > * { pointer-events: auto; }
  .rs-zeit { display: grid; grid-template-columns: auto auto auto 1fr; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: var(--elev); box-shadow: var(--shadow-2); }
  .rs-zeit .form-range, .rs-zeit input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--primary); margin: 0; }
  .rs-zeit #trip-scrub-pos { font-family: var(--f-data); font-size: .78rem; color: var(--muted); justify-self: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .rs-zeit .pt-scrub-preview { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
  .rs-zeit .pt-scrub-preview img { width: 54px; height: 40px; object-fit: cover; border-radius: 6px; }
  .rs-farbe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .rs-farbe .colorby, .rs-farbe .speed-scale { background: var(--elev); box-shadow: var(--shadow-2); border-radius: 10px; padding: 4px 6px; }

  .rs-seite { min-width: 0; background: var(--bg); border-left: 1px solid var(--line); }
  .rs-kopf { padding: clamp(20px, 3vw, 36px) clamp(16px, 2.6vw, 36px) 0; display: grid; gap: 14px; }
  .rs-kopf h1 { margin: 0; font-size: clamp(2.4rem, 3.6vw, 3.6rem); }
  /* Titelbild randlos hinter Titel und Messwerten – in beiden Modi dunkel
     abgedeckt, damit weiße Schrift immer trägt. Das Bild selbst ist die
     Atmosphäre; kein Glas, kein Leuchten. */
  .rs-kopf--bild { position: relative; isolation: isolate; color: #fff; padding-top: clamp(96px, 16vh, 180px); padding-bottom: 20px;
    --ink: #FFFFFF; --muted: rgba(255, 255, 255, .78); --line-soft: rgba(255, 255, 255, .22); --line: rgba(255, 255, 255, .3); --elev: rgba(10, 18, 20, .55); --sun: #F0B45B; }
  .rs-kopf--bild::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--kopf-bild) center / cover no-repeat; }
  @media (max-width: 800px) { .rs-kopf--bild::before { background-image: var(--kopf-bild-klein, var(--kopf-bild)); } }
  .rs-kopf--bild::after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(6, 14, 16, .15) 0%, rgba(6, 14, 16, .55) 42%, rgba(6, 14, 16, .92) 100%); }
  .rs-kopf--bild h1 { color: #fff; font-size: clamp(2.8rem, 4.4vw, 4.6rem); text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
  .rs-kopf--bild .tp-marke { background: rgba(255, 255, 255, .16); color: #fff; }
  .rs-kopf--bild .tp-marke--an { background: rgba(92, 208, 213, .28); color: #E6FBFC; }
  .rs-kopf--bild .rs-modi .mode-chip { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); color: #fff; }
  .rs-kopf--bild .pt-star { color: rgba(255, 255, 255, .35); }
  .rs-kopf--bild .pt-star.on { color: var(--sun); }
  .rs-kopf--bild + .rs-reiter { margin-top: 0; }
  .rs-kopf .tp-gedaempft { margin: 0; font-size: 1.02rem; }
  .rs-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--f-data); font-size: .8rem; color: var(--muted); }
  .rs-kopf .tp-messleiste { margin-top: 6px; grid-template-columns: minmax(150px, 1.7fr) repeat(3, minmax(80px, 1fr)); }
  .rs-kopf .tp-messwert b { font-size: clamp(1.4rem, 1.9vw, 1.9rem); }
  .rs-modi { display: flex; flex-wrap: wrap; gap: 6px; }
  .rs-bewertung { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

  .rs-reiter { position: sticky; top: 0; z-index: 12; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); padding: 0 clamp(16px, 2.6vw, 36px); margin-top: 18px; }
  .rs-abschnitt { padding: var(--s-lg) clamp(16px, 2.6vw, 36px); scroll-margin-top: 56px; }
  .rs-anker { display: block; position: relative; top: -56px; height: 0; }
  .rs-abschnitt + .rs-abschnitt { border-top: 1px solid var(--line-soft); }
  .rs-abschnitt > h2 { font-size: 1.5rem; margin: 0 0 4px; }
  .rs-abschnitt > .tp-gedaempft { margin: 0 0 14px; font-size: .92rem; }
  .rs-hinweise { display: grid; gap: 8px; padding: 14px clamp(16px, 2.6vw, 36px) 0; }

  /* Tage */
  .rs-werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .rs-tag { padding: 16px 0 18px; border-top: 1px solid var(--line-soft); }
  .rs-tag:first-of-type { border-top: 0; }
  .rs-tag-kopf { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; margin-bottom: 12px; }
  .rs-tag-nr { font-family: var(--f-data); line-height: 1; color: var(--muted); font-size: .72rem; }
  .rs-tag-nr b { display: block; font-size: 1.9rem; color: var(--ink); letter-spacing: -.04em; font-weight: 500; }
  .rs-tag-kopf h3 { font-size: 1.1rem; margin: 0 0 2px; }
  .rs-tag-kopf p { margin: 0; color: var(--muted); font-size: .86rem; font-family: var(--f-data); }
  .rs-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 2px; margin-inline: calc(clamp(16px, 2.6vw, 36px) * -1); }
  @media (min-width: 1100px) { .rs-fotos { margin-inline: 0; border-radius: 10px; overflow: hidden; } }
  .rs-foto { position: relative; background: var(--surface); }
  /* height: auto – app.css setzt height 170px; mit aspect-ratio wurde die Kachel 170px BREIT und ragte aus schmalen Zellen (bzw. füllte breite nicht) */
  .rs-foto .photo-frame { position: relative; aspect-ratio: 1; width: 100%; height: auto; overflow: hidden; margin: 0 !important; border-radius: 0; }
  .rs-foto .photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--kurve); }
  .rs-foto:hover .photo-frame img { transform: scale(1.03); }
  .rs-foto .photo-frame.no-exif { box-shadow: inset 0 0 0 3px var(--err); }
  .rs-foto .photo-zoom { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; background: transparent; cursor: zoom-in; z-index: 1; }
  .rs-foto .pt-fav-btn { position: absolute; z-index: 2; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, #000 38%, transparent); color: #fff; cursor: pointer; opacity: 0; transition: opacity var(--t-schnell); }
  .rs-foto:hover .pt-fav-btn, .rs-foto .pt-fav-btn.on, .rs-foto .pt-fav-btn:focus-visible { opacity: 1; }
  .rs-foto .pt-fav-btn.on { color: #ff8a9a; }
  .rs-foto .pt-fav-btn svg { width: 16px; height: 16px; }
  .rs-foto .pt-fav-btn.on svg { fill: currentColor; }
  .rs-foto .pt-bulk-check { position: absolute; z-index: 3; bottom: 40px; right: 6px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: var(--elev); }
  .rs-foto .pt-bulk-check input { width: 18px; height: 18px; accent-color: var(--primary); }
  .rs-foto :is(.pt-cover-badge, .pt-maponly-badge, .no-exif-badge, .light-badge) { position: absolute; z-index: 2; left: 6px; top: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; font-size: .68rem; font-weight: 700; background: color-mix(in srgb, #000 55%, transparent); color: #fff; }
  .rs-foto .light-badge.golden { background: color-mix(in srgb, #7a4500 80%, transparent); }
  .rs-foto .pt-cover-badge { left: auto; right: 44px; }
  .rs-foto :is(.pt-cover-badge, .pt-maponly-badge, .no-exif-badge, .light-badge) svg { width: 12px; height: 12px; }
  .rs-foto .photo-frame img { border-radius: 0; }
  .rs-foto-ort { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 34px; display: flex; align-items: flex-end; padding: 0 8px 6px;
    color: #fff; font-size: .76rem; font-weight: 700; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: auto;
    background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
  .rs-foto-ort:hover { color: #fff; text-decoration: underline; }
  .rs-foto-unter { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 30px; padding: 0 8px; font-size: .78rem; min-width: 0; }
  .rs-foto-unter .pt-star { font-size: .86rem; }
  .rs-foto-bearb { padding: 0 8px 8px; }
  .rs-foto-bearb > summary { list-style: none; font-size: .78rem; color: var(--primary); font-weight: 700; cursor: pointer; padding: 4px 0; }
  .rs-foto-bearb > summary::-webkit-details-marker { display: none; }
  /* Offen als Blatt über der Seite, nicht in der Kachel: In der Kachel wurde es
     vom Fotoraster abgeschnitten – Karte, Speichern und die unteren Felder
     waren nicht erreichbar, und die Seite scrollte nicht mit (15.09.2026).
     Fest positioniert und mit eigenem Scrollbereich bleibt alles erreichbar. */
  .rs-foto-bearb[open] { position: fixed; z-index: 1200; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding: 0 16px 16px; border-radius: 14px; background: var(--elev);
    box-shadow: var(--shadow-2), 0 0 0 100vmax color-mix(in srgb, #000 40%, transparent); }
  .rs-foto-bearb[open] > summary { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center;
    margin: 0 -16px 8px; padding: 12px 16px; background: var(--elev); border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
  .rs-foto-bearb[open] > summary::after { content: "✕"; font-size: 1rem; color: var(--muted); }
  /* .rs-seite bildet mit z-index 6 eine eigene Ebene – darin läge das Blatt
     unter dem Mobilkopf. Solange es offen ist, hebt sich die Seite darüber. */
  .rs-seite:has(.rs-foto-bearb[open]) { z-index: 1200; }
  .rs-foto-bearb form { display: grid; gap: 8px; }
  .rs-foto-bearb .rs-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

  .rs-sterne .pt-stars { display: inline-flex; gap: 0; }
  .tp-ui .pt-star { border: 0; background: none; color: var(--line); font-size: 1rem; padding: 0 1px; cursor: pointer; line-height: 1; }
  .tp-ui .pt-star.on { color: var(--sun); }
  .tp-ui .pt-stars.lg .pt-star { font-size: 1.5rem; }
  .tp-ui .mode-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
  .tp-ui .mode-chip svg { width: 14px; height: 14px; }
  .tp-ui .rs-modi .mode-chip { min-height: 30px; padding: 0 11px; border-radius: 999px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-family: var(--f-data); font-weight: 500; }

  /* Mengenleiste */
  .rs-seite .pt-bulkbar { position: sticky; bottom: 12px; z-index: 15; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; margin-bottom: 12px; border-radius: 14px; background: var(--elev); box-shadow: var(--shadow-2); }
  .rs-seite .pt-bulkbar .tp-auswahl, .rs-seite .pt-bulkbar .tp-eingabe { width: auto; }

  /* Formularblöcke im Seitenpaneel */
  .rs-form { display: grid; gap: 12px; }
  .rs-form .rs-reihe { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; }
  /* Werkzeuge (Abschnitte, Verorten, Import) auf der Reise-Seite: Abschnitte mit Haarlinie statt Karten */
  .rs-seite .rw-block { background: transparent; box-shadow: none; border-radius: 0; padding: var(--s-lg) 0; border-top: 1px solid var(--line-soft); margin: 0; }
  .rs-teilen-link { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .rs-person { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line); font-size: .88rem; }
  .rs-person form { margin: 0; }
  .rs-person button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
  .rs-person button:hover { background: var(--surface); color: var(--err); }
  .rs-wegpunkt { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .rs-wegpunkt-pin { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
  .rs-wegpunkt small { color: var(--muted); font-family: var(--f-data); font-size: .76rem; }
  .rs-wegpunkt-akt { display: flex; gap: 2px; align-items: start; }
  .rs-video { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
  .rs-video iframe { width: 100%; height: 100%; border: 0; display: block; }
  .rs-kommentar { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
  .rs-kommentar .pt-comment-av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--surface); color: var(--muted); }
  .rs-kommentar .pt-comment-av img { width: 100%; height: 100%; object-fit: cover; }
  .rs-kommentar-kopf { display: flex; justify-content: space-between; gap: 8px; font-size: .86rem; }
  .rs-kommentar-kopf time { font-family: var(--f-data); font-size: .74rem; color: var(--muted); }
  .rs-kommentar p { margin: 4px 0 0; }

  /* Warten-Overlay beim Upload */
  .tp-ui .pt-wait { position: fixed; inset: 0; z-index: 2000; display: none; place-content: center; justify-items: center; gap: 12px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(6px); color: var(--ink); }
  .tp-ui .pt-wait.show { display: grid; }
  .tp-ui .pt-wait-text { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; }
  .tp-ui .pt-wait-sub { font-family: var(--f-data); color: var(--muted); font-size: .86rem; }

  /* Unter 1100 px: Karte oben, Inhalt als Blatt darüber gezogen */
  @media (max-width: 1099px) {
    .rs-seite { border-left: 0; border-radius: var(--r-blatt) var(--r-blatt) 0 0; margin-top: -22px; position: relative; z-index: 6; box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .35); }
    .rs-seite::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 3px; background: var(--line); margin: 10px auto 0; }
    .rs-oben .rs-aktionen .tp-btn span { display: none; }
    .rs-unten { bottom: 34px; }
    .rs-reiter { top: calc(env(safe-area-inset-top, 0px) + 57px); }   /* unter der Handy-Kopfzeile */
  }
  @media (max-width: 600px) {
    .rs-kopf .tp-messleiste { grid-template-columns: 1fr 1fr; }
    .rs-kopf .tp-messwert:nth-child(odd) { padding-left: 0; border-left: 0; }
    .rs-kopf .tp-messwert:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  }
}

/* ======================================================================== */
/* Öffentliches Layout + neue Startseite (UI-Redesign 14.09.2026) */
@layer tp.rahmen {
  .tp-kopfleiste { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 24px;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) clamp(16px, 4vw, 56px) 12px;
    background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
  .tp-kopfleiste .tp-marke-kopf { color: var(--ink); padding: 0; font-size: 1.15rem; }
  .tp-kopfleiste .tp-marke-kopf:hover { color: var(--ink); }
  .tp-kopfleiste-nav { display: none; gap: 22px; }
  @media (min-width: 860px) { .tp-kopfleiste-nav { display: flex; } }
  .tp-kopfleiste-nav a { color: var(--muted); text-decoration: none; font-weight: 700; font-size: .93rem; }
  .tp-kopfleiste-nav a:hover { color: var(--ink); }
  .tp-kopfleiste-aktion { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  @media (max-width: 420px) {
    .tp-kopfleiste { gap: 10px; }
    .tp-kopfleiste .tp-marke-kopf span { display: none; }
    .tp-kopfleiste-aktion { gap: 4px; }
  }
  .tp-kopfleiste-sprache { font-family: var(--f-data); font-size: .8rem; color: var(--muted); text-decoration: none; padding: 0 6px; }
  .tp-nur-breit { display: none; }
  @media (min-width: 560px) { .tp-nur-breit { display: inline-flex; } }
  .tp-fuss--oeffentlich { padding-inline: clamp(16px, 4vw, 56px); }
}

@layer tp.seiten {
  .sp-lede { font-size: clamp(1.05rem, 1.3vw, 1.22rem); line-height: 1.55; color: var(--muted); max-width: 58ch; margin: 0; }
  .sp-akzent { color: var(--primary); }
  .sp-aufrufe { display: flex; flex-wrap: wrap; gap: 10px; }
  .sp-fein { font-size: .84rem; color: var(--muted); margin: 0; }

  /* Einstieg */
  .sp-held { position: relative; overflow: hidden; display: grid; gap: clamp(32px, 5vw, 64px); align-items: center;
    grid-template-columns: 1fr; padding: clamp(40px, 7vw, 104px) clamp(16px, 4vw, 56px) clamp(48px, 6vw, 88px); }
  @media (min-width: 1000px) { .sp-held { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: min(86vh, 860px); } }
  .sp-held-topo { position: absolute; inset: 0; width: 100%; height: 100%; color: color-mix(in srgb, var(--primary) 16%, transparent); z-index: 0; pointer-events: none; }
  .sp-held > :not(.sp-held-topo) { position: relative; z-index: 1; }
  .sp-held-text { display: grid; gap: 22px; align-content: center; }
  .sp-held h1 { margin: 0; font-size: clamp(3.1rem, 7.2vw, 6.6rem); line-height: .92; letter-spacing: -.05em; }
  .sp-held h1 .sp-akzent { display: inline-block; margin-top: .08em; font-size: .62em; line-height: 1; letter-spacing: -.04em; }

  .sp-geraete { position: relative; height: clamp(440px, 52vw, 640px); }
  .sp-handy { position: absolute; margin: 0; width: clamp(180px, 19vw, 280px); aspect-ratio: 1320 / 2868; padding: 7px;
    border-radius: clamp(28px, 3.2vw, 44px); background: #0B1214; box-shadow: 0 40px 80px -40px rgba(7, 30, 34, .55), inset 0 0 0 1.5px #2A3A3E; }
  .sp-handy img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: clamp(22px, 2.7vw, 37px); }
  .sp-handy--vorn { left: 50%; top: 0; transform: translateX(-50%); z-index: 3; }
  .sp-handy--hinten-links { left: 50%; top: 9%; transform: translateX(-118%) rotate(-7deg); z-index: 2; filter: saturate(.9); }
  .sp-handy--hinten-rechts { left: 50%; top: 11%; transform: translateX(18%) rotate(7deg); z-index: 1; filter: saturate(.9); }
  @media (max-width: 560px) {
    .sp-geraete { height: 470px; }
    .sp-handy { width: 190px; }
    .sp-handy--hinten-links { transform: translateX(-104%) rotate(-7deg); }
    .sp-handy--hinten-rechts { transform: translateX(4%) rotate(7deg); }
  }

  /* Abschnitte */
  .sp-abschnitt { padding: clamp(56px, 8vw, 120px) clamp(16px, 4vw, 56px); }
  .sp-abschnitt--flaeche { background: var(--surface); border-block: 1px solid var(--line-soft); }
  .sp-kopf { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 52px); max-width: 860px; }
  .sp-kopf h2 { margin: 0; font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: .98; letter-spacing: -.04em; }
  .sp-kopf--mitte { margin-inline: auto; text-align: center; justify-items: center; }
  .sp-kopf--zeile { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; max-width: none; }

  .sp-modi { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); }
  .sp-modus { display: grid; gap: 8px; align-content: start; padding: 26px 24px 26px 0; border-bottom: 1px solid var(--line); }
  @media (max-width: 1239px) { .sp-modi { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 719px) { .sp-modi { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 760px) { .sp-modus { padding-right: 32px; } }
  .sp-modus-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
  .sp-modus-ic svg.lucide { width: 24px; height: 24px; }
  .sp-modus h3 { margin: 6px 0 0; font-size: 1.3rem; }
  .sp-modus p { margin: 0; color: var(--muted); }

  .sp-schritte { list-style: none; margin: 0 auto; padding: 0; max-width: 1320px; display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .sp-schritt { position: relative; display: grid; gap: 10px; align-content: start; padding: 30px 26px 34px; background: var(--elev); }
  .sp-schritt:first-child { border-radius: 16px 0 0 16px; } .sp-schritt:last-child { border-radius: 0 16px 16px 0; }
  @media (max-width: 1060px) { .sp-schritt { border-radius: 14px !important; } .sp-schritte { gap: 10px; } }
  .sp-schritt-nr { position: absolute; top: 18px; right: 22px; font-size: 3.4rem; line-height: 1; color: var(--line); }
  .sp-schritt-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); }
  .sp-schritt h3 { margin: 10px 0 0; font-size: 1.35rem; }
  .sp-schritt p { margin: 0; color: var(--muted); }

  /* Karte: dunkel, randlos – in beiden Modi */
  .sp-karte { position: relative; min-height: clamp(560px, 78vh, 820px); background: #061013; color: #EAF2F0; overflow: hidden; isolation: isolate; }
  .sp-karte-map { position: absolute; inset: 0; z-index: 0; background: #061013; }
  .sp-karte::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(6, 16, 19, .96) 0%, rgba(6, 16, 19, .82) 32%, rgba(6, 16, 19, 0) 62%), linear-gradient(0deg, rgba(6, 16, 19, .7), transparent 30%); }
  .sp-karte-text { position: relative; z-index: 2; display: grid; gap: 18px; align-content: center; min-height: inherit; max-width: 560px; padding: clamp(56px, 8vw, 110px) clamp(16px, 4vw, 56px); pointer-events: none; }
  .sp-karte-text > * { pointer-events: auto; }
  .sp-karte-text .tp-label { color: #8FB5B6; }
  .sp-karte-text h2 { margin: 0; color: #fff; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: .95; letter-spacing: -.045em; }
  .sp-karte-text p { margin: 0; color: rgba(234, 242, 240, .78); font-size: 1.1rem; max-width: 46ch; }
  .sp-karte-werte { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; border-block: 1px solid rgba(255, 255, 255, .16); }
  .sp-karte-werte div { display: grid; gap: 2px; padding: 12px 26px 12px 0; }
  .sp-karte-werte div + div { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .16); }
  .sp-karte-werte b { font-size: clamp(1.6rem, 2.6vw, 2.4rem); color: #fff; letter-spacing: -.03em; font-weight: 500; }
  .sp-karte-werte span { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8FB5B6; }
  .sp-karte-stopps { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .92rem; color: rgba(234, 242, 240, .86); }
  .sp-karte-stopps li { display: inline-flex; align-items: center; gap: 6px; }
  .sp-karte-stopps li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; background: #5CD0D5; color: #04292C; }
  .sp-karte-stopps em { font-style: normal; font-size: .8rem; }
  .sp-sonne { color: #F0B45B; } .sp-abend { color: #F0B45B; opacity: .7; }
  @media (max-width: 999px) {
    .sp-karte { min-height: 0; display: grid; }
    .sp-karte-map { position: relative; height: 380px; order: 2; }
    .sp-karte::after { background: linear-gradient(180deg, rgba(6, 16, 19, .0) 60%, rgba(6, 16, 19, .9)); top: auto; height: 380px; }
    .sp-karte-text { max-width: none; min-height: 0; }
  }

  /* App + Website */
  .sp-zwei { display: grid; gap: clamp(28px, 5vw, 80px); grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 1000px) { .sp-zwei { grid-template-columns: 1.1fr 1fr; } .sp-zwei .sp-kopf { margin-bottom: 0; } }
  .sp-listen { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .sp-listen h3 { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
  .sp-haken { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .sp-haken li { position: relative; padding-left: 30px; font-size: 1.02rem; }
  .sp-haken li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: var(--primary-soft); }
  .sp-haken li::after { content: ""; position: absolute; left: 7px; top: .42em; width: 6px; height: 10px; border: solid var(--primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }

  /* Planen */
  .sp-plan { display: grid; gap: clamp(28px, 5vw, 80px); grid-template-columns: 1fr; align-items: center; background: var(--surface); border-block: 1px solid var(--line-soft); }
  @media (min-width: 1000px) { .sp-plan { grid-template-columns: 1fr 1fr; } .sp-plan .sp-kopf { margin-bottom: 0; } }
  .sp-plan .sp-kopf { gap: 18px; }
  .sp-licht { display: grid; gap: 14px; padding: clamp(24px, 3vw, 40px); border-radius: 22px; background: #061013; color: #EAF2F0; box-shadow: var(--shadow-2); }
  .sp-licht-zeile { display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: center; font-size: 1.05rem; }
  .sp-licht-zeile .tp-data { color: rgba(234, 242, 240, .8); }
  .sp-licht-punkt { width: 14px; height: 14px; border-radius: 50%; }
  .sp-licht-punkt--gold { background: #F0B45B; } .sp-licht-punkt--blau { background: #6F8FE8; }
  .sp-licht-bahn { position: relative; height: 56px; margin-top: 10px; border-radius: 12px;
    background: linear-gradient(90deg, #0D1B2A 0%, #6F8FE8 20%, #F0B45B 26%, #E8EEF0 36%, #E8EEF0 70%, #F0B45B 78%, #6F8FE8 84%, #0D1B2A 100%); }
  .sp-licht-bahn i { position: absolute; top: -6px; bottom: -6px; width: 3px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 3px rgba(6, 16, 19, .6); }
  .sp-licht-achse { display: flex; justify-content: space-between; font-size: .72rem; color: rgba(234, 242, 240, .6); }

  /* Galerie */
  .sp-galerie { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .sp-reise { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--primary-soft); color: #fff; text-decoration: none; }
  .sp-reise img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--kurve); }
  .sp-reise:hover img { transform: scale(1.04); }
  .sp-reise::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0, 0, 0, .72)); }
  .sp-reise-text { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 2px; }
  .sp-reise-text b { font-family: var(--f-display); font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.05; }
  .sp-reise-text small { color: rgba(255, 255, 255, .82); font-size: .76rem; }
  .sp-reise:hover { color: #fff; }

  /* Datenschutz */
  .sp-privat { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 3vw, 36px); align-items: start; max-width: 980px; padding: clamp(28px, 4vw, 48px); border-radius: 22px; background: var(--primary-soft); }
  .sp-privat-ic { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); }
  .sp-privat-ic svg.lucide { width: 28px; height: 28px; }
  .sp-privat h2 { margin: 0 0 10px; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.03em; }
  .sp-privat .sp-lede { color: var(--ink); opacity: .82; margin-bottom: 12px; }
  .sp-privat a { font-weight: 700; }

  /* Schluss */
  .sp-schluss { display: grid; justify-items: center; gap: 18px; text-align: center; padding: clamp(72px, 10vw, 140px) clamp(16px, 4vw, 56px); background: var(--rail); color: #E6F2F1; }
  .sp-schluss h2 { margin: 0; color: #fff; max-width: 18ch; font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: .96; letter-spacing: -.045em; }
  .sp-schluss p { margin: 0; color: #9CC4C4; font-size: 1.15rem; }
  .sp-schluss .tp-btn--pri { background: #5CD0D5; color: #04292C; }
  .sp-schluss .tp-btn--pri:hover { background: #7DDDE1; color: #04292C; }
  .sp-btn-hell { color: #E6F2F1; box-shadow: inset 0 0 0 1.5px rgba(230, 242, 241, .4); }
  .sp-btn-hell:hover { background: rgba(230, 242, 241, .1); color: #fff; }

  /* ---- Bildmarke auf der Seite (neu/_marke.php) ----
     Der Pin steckt in Höhenlinien wie eine Markierung auf der Wanderkarte; die
     Blende öffnet sich beim Laden. Farben aus den Tokens, Öffnung in Sonnenfarbe. */
  .mk { display: block; overflow: visible; --mk-pin: var(--primary); --mk-scheibe: var(--rail); --mk-blatt: #EAF6F5; --mk-loch: var(--sun); --mk-schatten: var(--ink); }
  .mk-pin { fill: var(--mk-pin); }
  .mk-scheibe { fill: var(--mk-scheibe); }
  .mk-blatt { fill: var(--mk-blatt); }
  .mk-fuge { stroke: var(--mk-scheibe); }
  .mk-loch { fill: var(--mk-loch); }
  .mk-ringe { stroke: var(--mk-pin); }
  .mk-schatten { fill: var(--mk-schatten); }
  /* Seitenleiste ist in beiden Themen dunkel: Pin hell, Scheibe tiefer als die Leiste */
  .tp-rail .mk { --mk-pin: #5CD0D5; --mk-scheibe: #04292C; --mk-loch: #F0B45B; }
  .tp-marke-kopf .mk--zeichen { width: 26px; height: 29px; flex: none; }
  .mk-blaetter, .mk-loch, .mk-pinfall, .mk-schatten { transform-box: fill-box; transform-origin: center; }
  .mk-pinfall { transform-origin: 50% 100%; }

  .sp-stempel { display: flex; align-items: flex-end; gap: clamp(14px, 1.6vw, 22px); }
  .sp-stempel .mk { width: clamp(92px, 9.5vw, 136px); height: auto; margin-bottom: -6px; }
  .sp-stempel-text { display: grid; gap: 6px; padding-bottom: clamp(10px, 1.2vw, 16px); }
  .sp-stempel-name { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.9rem, 3.1vw, 2.9rem); line-height: .9; letter-spacing: -.045em; color: var(--ink); }

  .sp-stempel .mk-pinfall { animation: mk-einstecken .7s cubic-bezier(.3, 1.5, .5, 1) .15s both; }
  .sp-stempel .mk-schatten { animation: mk-schatten .7s cubic-bezier(.3, 1.5, .5, 1) .15s both; }
  .sp-stempel .mk-ringe ellipse { animation: mk-ring .9s ease-out both; }
  .sp-stempel .mk-ringe ellipse:nth-child(3) { animation-delay: .55s; }
  .sp-stempel .mk-ringe ellipse:nth-child(2) { animation-delay: .65s; }
  .sp-stempel .mk-ringe ellipse:nth-child(1) { animation-delay: .75s; }
  .sp-stempel .mk-blaetter { animation: mk-blaetter 1s cubic-bezier(.2, .8, .2, 1) .85s both; }
  .sp-stempel .mk-loch { animation: mk-loch 1s cubic-bezier(.2, .8, .2, 1) .85s both; }
  /* Domain-Bildmarke statt Pin: gleiche Größe, fällt ebenso ein, ohne Höhenlinien darunter. */
  .sp-stempel .mk--bild { margin-bottom: 0; border-radius: 22%; box-shadow: 0 10px 26px rgb(10 18 20 / .22); animation: mk-einstecken .7s cubic-bezier(.3, 1.5, .5, 1) .15s both; }
  @keyframes mk-einstecken { from { transform: translateY(-38%); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
  @keyframes mk-schatten { from { transform: scale(2.4); opacity: 0; } to { transform: none; opacity: .2; } }
  @keyframes mk-ring { from { stroke-width: 0; } to { stroke-width: 3; } }
  @keyframes mk-blaetter { from { transform: rotate(-80deg); } to { transform: none; } }
  @keyframes mk-loch { from { transform: scale(.25); } to { transform: none; } }

  /* Kopfleiste: Logo erst zeigen, wenn der Stempel aus dem Bild ist (tp.js) */
  .tp-kopfleiste .tp-marke-kopf { transition: opacity .35s ease, transform .35s ease; }
  .tp-kopfleiste .tp-marke-kopf.ist-versteckt { opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none; }

  /* Schluss: großer Schriftzug, das „o“ ist die Blende */
  .sp-riesenmarke { margin-top: clamp(40px, 6vw, 88px); font-family: var(--f-display); font-weight: 700; font-size: clamp(4.2rem, 17.5vw, 18rem); line-height: .8; letter-spacing: -.065em;
    color: color-mix(in srgb, #5CD0D5 20%, var(--rail)); white-space: nowrap; user-select: none; }
  .sp-riesenmarke .mk { display: inline-block; width: .74em; height: .74em; margin: 0 .03em 0 .01em; vertical-align: -.02em; }
  .sp-riesenmarke .mk { --mk-scheibe: #5CD0D5; --mk-blatt: var(--rail); --mk-loch: #F0B45B; }
  .sp-riesenmarke .mk-fuge { stroke-width: 6; }
  .sp-riesenmarke .mk-blaetter, .sp-riesenmarke .mk-loch { transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
  .sp-riesenmarke.ist-bereit:not(.ist-offen) .mk-blaetter { transform: rotate(-80deg); }
  .sp-riesenmarke.ist-bereit:not(.ist-offen) .mk-loch { transform: scale(.25); }

  /* ======================================================================
     Anmeldung (neu/login.php): Bühne mit Globus, Formular im iPhone.
     Immer dunkel – die Szene ist Nacht über der Erde, unabhängig vom Thema.
     ====================================================================== */
  body.tp-buehne {
    --bg: #0A1214; --surface: #111C1F; --elev: #182528;
    --ink: #EAF2F0; --muted: #97A9AA; --line: #2E4146; --line-soft: #1E2D31;
    --primary: #5CD0D5; --primary-hover: #7DDDE1; --on-primary: #04292C; --primary-soft: #113A3E;
    --rail: #06292E; --sun: #F0B45B; --sun-soft: #3A2B14;
    --ok: #5BC98A; --ok-soft: #12301F; --warn: #E7C15A; --warn-soft: #362C10;
    --err: #FF8A7A; --err-soft: #3A1714; --info: #8AB4FF; --info-soft: #14253F;
    color-scheme: dark; background: #04090B; color: var(--ink);
  }
  .tp-buehne .tp-kopfleiste { position: absolute; left: 0; right: 0; background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
  .tp-buehne .tp-kopfleiste .tp-marke-kopf .mk { --mk-scheibe: #04292C; }

  .lg-buehne { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: grid; align-items: center; justify-items: center; gap: clamp(28px, 4vw, 64px);
    padding: calc(env(safe-area-inset-top, 0px) + 96px) clamp(16px, 5vw, 88px) 48px;
    background: radial-gradient(120% 90% at 68% 62%, #0B2429 0%, #061114 45%, #04090B 75%); }
  .lg-globus { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; --globus-x: .5; --globus-y: .64; --globus-r: .5; opacity: .92; }
  .lg-text { display: grid; gap: 18px; max-width: 34rem; text-align: center; justify-items: center; }
  .lg-text h1 { margin: 0; color: #fff; font-size: clamp(2.5rem, 5vw, 4.6rem); line-height: .95; letter-spacing: -.045em; text-wrap: balance; }
  .lg-text .sp-lede { color: #B7C8C8; margin: 0; }
  .lg-notiz { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: .86rem; color: #9DB3B3; text-align: left; }
  .lg-notiz-punkt { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 0 rgba(240, 180, 91, .6); animation: lg-puls 2.6s ease-out infinite; }
  @keyframes lg-puls { 70% { box-shadow: 0 0 0 10px rgba(240, 180, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(240, 180, 91, 0); } }

  @media (min-width: 1000px) {
    .lg-buehne { grid-template-columns: minmax(0, 1fr) auto; justify-items: start; column-gap: clamp(40px, 6vw, 120px); padding-right: clamp(40px, 9vw, 160px); }
    .lg-text { text-align: left; justify-items: start; }
    .lg-globus { --globus-x: .7; --globus-y: .6; --globus-r: .52; }
  }

  /* Das Gerät */
  .lg-handy { position: relative; width: min(372px, calc((100svh - 150px) * .4615)); min-width: 320px; aspect-ratio: 9 / 19.5; padding: 12px; border-radius: 60px;
    background: linear-gradient(150deg, #34464B 0%, #0D1517 18%, #0B1214 70%, #2B3C41 100%);
    box-shadow: inset 0 0 0 1.5px #435659, inset 0 0 0 5px #0B1214, 0 70px 120px -50px rgba(0, 0, 0, .95), 0 0 90px -20px rgba(92, 208, 213, .28); }
  .lg-handy::before, .lg-handy::after { content: ""; position: absolute; width: 4px; border-radius: 2px; background: #2B3C41; }
  .lg-handy::before { left: -3px; top: 22%; height: 9%; box-shadow: 0 calc(100% + 18px) 0 #2B3C41; }
  .lg-handy::after { right: -3px; top: 28%; height: 13%; }
  .lg-handy-status { position: absolute; z-index: 2; top: 12px; left: 12px; right: 12px; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 4px 32px 0 40px; font-size: .95rem; font-weight: 700; color: var(--ink); pointer-events: none; }
  .lg-insel { position: absolute; left: 50%; top: 14px; width: 112px; height: 32px; margin-left: -56px; border-radius: 20px; background: #000; }
  .lg-handy-symbole { display: flex; gap: 5px; }
  .lg-handy-symbole svg.lucide { width: 16px; height: 16px; }
  .lg-bildschirm { position: absolute; inset: 12px; border-radius: 48px; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 16px;
    padding: 76px 24px 12px; background: radial-gradient(120% 60% at 50% 0%, #10292D 0%, var(--bg) 55%); }
  .lg-bildschirm::-webkit-scrollbar { display: none; }
  .lg-kopf { display: grid; justify-items: center; gap: 4px; text-align: center; margin-bottom: 6px; }
  .lg-stempel { text-decoration: none; color: inherit; margin-bottom: clamp(4px, 1.5vw, 18px); }
  .lg-stempel:hover .sp-stempel-name { color: #fff; }
  .lg-stempel .tp-label { color: #9DB3B3; }
  .lg-stempel .mk { --mk-scheibe: #04292C; }
  .lg-stempel:focus-visible { outline: 2px solid var(--primary); outline-offset: 6px; border-radius: 8px; }
  .lg-kopf { padding-top: 8px; }
  .lg-kopf h2 { margin: 0; font-size: 1.65rem; letter-spacing: -.03em; color: #fff; }
  .lg-kopf p { margin: 0; color: var(--muted); font-size: .95rem; }
  .lg-formular { display: grid; gap: 14px; }
  .lg-formular .tp-eingabe { font-size: 1rem; min-height: 50px; }
  .lg-feldkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .lg-feldkopf label { font-size: .84rem; font-weight: 700; }
  .lg-feldkopf a { font-size: .8rem; color: var(--primary); }
  .lg-los { width: 100%; margin-top: 4px; }
  .lg-oder { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
  .lg-oder::before, .lg-oder::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  .lg-weitere { display: grid; gap: 10px; }
  .lg-weitere .tp-btn { width: 100%; }
  .lg-fuss { margin: 4px 0 0; text-align: center; font-size: .9rem; color: var(--muted); }
  .lg-fuss a { color: var(--primary); font-weight: 700; }
  .lg-heimleiste { flex: none; align-self: center; width: 132px; height: 5px; margin-top: auto; border-radius: 3px; background: rgba(234, 242, 240, .55); }
  .lg-nachsenden { margin-top: 10px; }
  .lg-buehne .tp-hinweis { font-size: .88rem; }
  .tp-hinweis--fehler { background: var(--err-soft); box-shadow: inset 4px 0 0 var(--err); }
  /* Honeypot der Registrierung: für Menschen unsichtbar, auch nicht für Screenreader erreichbar */
  .pt-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
  .lg-formular--eng { gap: 10px; }
  .lg-formular--eng .tp-eingabe { min-height: 46px; }
  .lg-fehler { color: var(--err); font-size: .8rem; }
  .lg-buehne .tp-eingabe[aria-invalid="true"] { border-bottom-color: var(--err); }
  .lg-buehne .tp-eingabe[readonly] { color: var(--muted); }
  .lg-klein { color: var(--muted); font-size: .82rem; }
  .lg-code { text-align: center; font-family: var(--f-data); font-size: 1.7rem !important; letter-spacing: .3em; min-height: 64px !important; }
  .lg-ergebnis { display: grid; justify-items: center; gap: 12px; text-align: center; margin-block: auto; padding-block: 12px; }
  .lg-ergebnis h2 { margin: 4px 0 0; font-size: 1.5rem; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
  .lg-ergebnis p { margin: 0 0 8px; color: var(--muted); font-size: .95rem; }
  .lg-ergebnis-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); margin-bottom: 4px; }
  .lg-ergebnis-ic svg.lucide { width: 30px; height: 30px; }
  .lg-ergebnis-ic--ok { background: var(--ok-soft); color: var(--ok); }
  .lg-ergebnis-ic--fehler { background: var(--err-soft); color: var(--err); }

  /* Handy: Das Display ist schon das Gerät – kein Rahmen, Globus oben, Formular als Blatt */
  @media (max-width: 759px) {
    .lg-buehne { align-items: end; gap: 0; padding: 0; min-height: 100svh; grid-template-rows: 1fr auto; background: #04090B; }
    .lg-globus { height: 62svh; --globus-x: .5; --globus-y: .62; --globus-r: .56; }
    .lg-text { align-self: end; padding: 110px 20px 22px; gap: 10px; }
    .lg-text .sp-lede, .lg-notiz { display: none; }
    .lg-text h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); text-shadow: 0 2px 22px #04090B, 0 0 6px #04090B; }
    .lg-text .tp-label { color: #B7C8C8; text-shadow: 0 0 8px #04090B; }
    .lg-text { padding-top: 84px; }
    .lg-handy { width: 100%; min-width: 0; aspect-ratio: auto; padding: 0; border-radius: 26px 26px 0 0; background: none; box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, .8); }
    .lg-handy::before, .lg-handy::after, .lg-handy-status, .lg-heimleiste { display: none; }
    .lg-text { justify-items: start; text-align: left; }
    .lg-stempel .mk { width: 64px; }
    .lg-stempel .sp-stempel-name { font-size: 1.7rem; text-shadow: 0 0 14px #04090B; }
    .lg-bildschirm { position: static; overflow: visible; border-radius: 26px 26px 0 0; padding: 26px 20px calc(env(safe-area-inset-bottom, 0px) + 26px);
      background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(16px); border-top: 1px solid var(--line-soft); }
    .lg-kopf { justify-items: start; text-align: left; }
  }

  /* ======================================================================
     Inhaltsseiten (neu/pages/…): Funktionen, Anleitung, App, Rechtstexte
     ====================================================================== */
  .ip-kopf { padding-bottom: clamp(28px, 4vw, 56px); }
  .ip-kopf .sp-kopf { margin-bottom: 0; max-width: 980px; }
  .ip-kopf h1 { margin: 0; font-size: clamp(2.8rem, 6.6vw, 5.8rem); line-height: .94; letter-spacing: -.05em; text-wrap: balance; }
  .ip-kopf .sp-aufrufe { margin-top: 8px; }
  .ip-folge { padding-top: 0; }

  /* Funktionen: eine lange, ruhige Liste mit Haarlinien statt 33 Karten */
  .ip-katalog { list-style: none; margin: 0 auto; padding: 0; max-width: 1320px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); column-gap: 32px; border-top: 1px solid var(--line); }
  .ip-katalog li { border-bottom: 1px solid var(--line); }
  .ip-katalog a { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; row-gap: 6px; height: 100%; padding: 22px 8px 22px 0; color: inherit; text-decoration: none; }
  .ip-katalog h2 { margin: 0; align-self: center; font-size: 1.18rem; letter-spacing: -.02em; transition: color var(--t-schnell); }
  .ip-katalog p { grid-column: 2; margin: 0; color: var(--muted); font-size: .95rem; }
  .ip-katalog a:hover h2 { color: var(--primary); }

  /* Vergleichstabelle (partials/plan_matrix.php) */
  .pt-eyebrow { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
  .pt-eyebrow svg.lucide { width: 14px; height: 14px; }
  .pm { max-width: 1320px; margin: 0 auto; }
  .pm > h2 { margin: 10px 0 12px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.04em; }
  .pm > p { max-width: 62ch; }
  .pm-scroll { overflow-x: auto; margin-top: 24px; border-radius: 16px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft), var(--shadow-1); }
  .pm-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: .93rem; }
  .pm-table th, .pm-table td { padding: 12px 16px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--line-soft); }
  .pm-table thead th { font-weight: 700; white-space: nowrap; }
  .pm-super th { padding-top: 18px; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); border-bottom: 0; }
  .pm-super th svg.lucide { width: 14px; height: 14px; }
  .pm-feat { width: 42%; text-align: left !important; font-weight: 700; }
  .pm-note { display: block; margin-top: 2px; font-weight: 400; font-size: .8rem; color: var(--muted); }
  .pm-group th { text-align: left; padding-top: 22px; background: var(--surface); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
  .pm-table .pm-pro { background: color-mix(in srgb, var(--primary) 7%, transparent); }
  .pm-group .pm-pro { background: var(--surface); }
  .pm-y { color: var(--ok); font-weight: 800; }
  .pm-n { color: var(--muted); }
  .pm-v { font-family: var(--f-data); font-variant-numeric: tabular-nums; }
  .pm-table tbody tr:last-child > * { border-bottom: 0; }

  /* Anleitung: Inhalt klebt links, Kapitel rechts */
  .ip-anleitung { display: grid; gap: clamp(28px, 4vw, 64px); max-width: 1320px; margin: 0 auto; box-sizing: content-box; }
  @media (min-width: 1000px) { .ip-anleitung { grid-template-columns: 290px minmax(0, 1fr); align-items: start; } }
  .ip-inhalt { display: grid; gap: 12px; align-content: start; }
  @media (min-width: 1000px) { .ip-inhalt { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 8px; } }
  .ip-inhalt ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  @media (max-width: 999px) { .ip-inhalt ol { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
  .ip-inhalt a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: .92rem; font-weight: 700; }
  .ip-inhalt a svg.lucide { width: 16px; height: 16px; color: var(--primary); flex: none; }
  .ip-inhalt a:hover { background: var(--surface); color: var(--ink); }
  .ip-kapitel { display: grid; gap: 0; max-width: 820px; }
  .ip-kapitel-teil { scroll-margin-top: 88px; padding: 30px 0 34px; border-top: 1px solid var(--line); }
  .ip-kapitel-teil:first-child { border-top: 0; padding-top: 0; }
  .ip-kapitel-kopf { display: flex; align-items: center; gap: 14px; }
  .ip-kapitel-kopf h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.03em; }
  .ip-kapitel-kurz { margin: 12px 0 16px; color: var(--muted); font-size: 1.05rem; }
  .ip-schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: grid; gap: 10px; }
  .ip-schritte li { counter-increment: schritt; position: relative; padding-left: 44px; line-height: 1.55; }
  .ip-schritte li::before { content: counter(schritt); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-family: var(--f-data); font-size: .8rem; font-weight: 500; }

  /* App */
  .ip-app h1 { margin: 0; font-size: clamp(2.8rem, 6.4vw, 5.8rem); line-height: .94; letter-spacing: -.05em; text-wrap: balance; }
  .ip-stores { display: flex; flex-wrap: wrap; gap: 12px; }
  .ip-store { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 10px 16px; border-radius: 14px; background: var(--ink); color: var(--bg); }
  .ip-store svg.lucide { width: 26px; height: 26px; }
  .ip-store span { display: grid; line-height: 1.1; }
  .ip-store small { font-size: .7rem; opacity: .75; }
  .ip-store b { font-size: 1.1rem; letter-spacing: -.01em; }
  .ip-store em { position: absolute; top: -9px; right: -8px; padding: 3px 8px; border-radius: 999px; background: var(--sun); color: #fff; font-style: normal; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
  .ip-store--spaeter { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
  .ip-store--spaeter em { background: var(--muted); }
  .sp-modi.ip-drei { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 999px) { .sp-modi.ip-drei { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 599px) { .sp-modi.ip-drei { grid-template-columns: 1fr; } }
  .ip-drei .sp-modus h2 { margin: 6px 0 0; font-size: 1.3rem; }

  /* Rechtstexte: ruhige Lesespalte */
  .ip-lesen { padding: clamp(40px, 6vw, 96px) clamp(16px, 4vw, 56px) clamp(56px, 8vw, 120px); }
  .ip-lesen .pt-legal { max-width: 70ch !important; margin: 0 auto !important; font-size: 1.02rem; line-height: 1.7; }
  .ip-lesen .pt-legal h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: .98; letter-spacing: -.045em; margin-bottom: 12px !important; }
  .ip-lesen .pt-legal h2 { margin-top: 2.4em !important; margin-bottom: .5em; font-size: 1.3rem; letter-spacing: -.02em; }
  .ip-lesen .pt-legal a { color: var(--primary); }
  .ip-lesen .pt-legal ul { padding-left: 1.2em; }
  .ip-lesen .pt-legal li { margin-bottom: .4em; }

  /* ======================================================================
     Öffentliche Reise-Story (neu/story.php)
     Titelbild randlos, Route als Linie, Karte über die ganze Breite, Tage als
     Kapitel. app.css liegt darunter (Zeitleiste, Lupe, Druck).
     ====================================================================== */
  .sy { --sy-rand: clamp(16px, 4vw, 56px); --sy-breite: 1440px; }
  .sy .st-poster-print, .sy .st-colophon { display: none; }
  .sy-poster { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: min(90svh, 940px); margin: 0; border: 0; border-radius: 0; box-shadow: none; background: #0A1214; color: #fff; }
  .sy .st-poster-bg { position: absolute; inset: 0; background: var(--poster) center / cover no-repeat; transform: scale(1.03); }
  @media (max-width: 800px) { .sy .st-poster-bg { background-image: var(--poster-klein, var(--poster)); } }
  .sy-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 9, 11, .15) 0%, rgba(4, 9, 11, .25) 40%, rgba(4, 9, 11, .88) 100%); }
  .sy-poster-in { position: relative; z-index: 2; width: 100%; max-width: var(--sy-breite); margin: 0 auto; padding: 120px var(--sy-rand) clamp(28px, 4vw, 56px); }
  .sy-augenbraue { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: #F0B45B; }
  .sy-augenbraue svg.lucide { width: 15px; height: 15px; }
  /* Folgen-Knopf auf dem Titelbild: muss auf jedem Foto lesbar sein */
  .sy-folgen { margin: 2px 0; }
  .sy-folgen .tp-btn { background: rgba(6, 16, 19, .55); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .sy-folgen .tp-btn:hover { background: rgba(6, 16, 19, .75); }
  .sy-folgen .sy-folgen-an { background: #F0B45B; color: #1B1204; box-shadow: none; }
  .sy-folgen .sy-folgen-an:hover { background: #F5C57A; }
  .sy-titel { margin: .25em 0 .18em; max-width: 15ch; color: #fff; font-size: clamp(3rem, 8.4vw, 8rem); line-height: .9; letter-spacing: -.05em; text-wrap: balance; }
  .sy-spanne { margin: 0; color: rgba(255, 255, 255, .82); font-size: clamp(.9rem, 1.4vw, 1.05rem); }
  .sy-werte { display: flex; flex-wrap: wrap; row-gap: 16px; margin: clamp(22px, 3vw, 36px) 0 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .22); }
  .sy-werte .st-stat { display: flex; flex-direction: column-reverse; gap: 6px; padding-right: clamp(18px, 3vw, 40px); margin-right: clamp(18px, 3vw, 40px); border-right: 1px solid rgba(255, 255, 255, .18); }
  .sy-werte .st-stat:last-child { border-right: 0; margin-right: 0; }
  @media (max-width: 640px) {
    .sy-werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 12px; }
    .sy-werte .st-stat { padding: 0; margin: 0; border: 0; }
  }
  .sy-werte dd { margin: 0; color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.8rem); line-height: 1; }
  .sy-werte dt { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: rgba(255, 255, 255, .7); }

  .sy-band { max-width: var(--sy-breite); margin: 0 auto; padding: 22px var(--sy-rand); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; border-bottom: 1px solid var(--line); }
  .sy-linie-box { flex: 1 1 420px; min-width: 0; display: grid; gap: 10px; }
  .sy-linie { list-style: none; margin: 0; padding: 2px 0 8px; display: flex; align-items: center; gap: 10px; overflow-x: auto; scrollbar-width: thin; }
  .sy-linie li { flex: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; background: none; border: 0; padding: 0; }
  .sy-linie li:not(:last-child)::after { content: ""; width: 26px; height: 2px; margin-left: 2px; border-radius: 1px; background: color-mix(in srgb, var(--primary) 55%, transparent); }
  .sy-linie .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); font-size: .72rem; }
  .sy-linie-mehr { color: var(--muted); font-size: .85rem; }
  .sy-werkzeug { display: flex; gap: 8px; flex: none; margin: 0; }

  .sy-teilen { max-width: var(--sy-breite); margin: 18px auto 0; padding: 0 var(--sy-rand); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .sy-teilen .tp-seg svg.lucide { width: 15px; height: 15px; }
  .sy-link { display: flex; align-items: center; gap: 8px; }
  .sy-link .tp-eingabe { width: min(46vw, 340px); min-height: 36px; font-size: .82rem; }

  .sy-abschnitt { max-width: var(--sy-breite); margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--sy-rand) 0; display: grid; gap: 14px; }
  .sy .st-facts { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 28px; border-top: 1px solid var(--line); }
  @media (min-width: 700px) { .sy .st-facts { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1200px) { .sy .st-facts { grid-template-columns: repeat(6, 1fr); } }
  .sy .st-fact { margin: 0; padding: 18px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .sy .st-fact-k { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
  .sy .st-fact-k svg.lucide { width: 15px; height: 15px; color: var(--primary); }
  .sy .st-fact-v { margin: 8px 0 0; font-family: var(--f-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }

  .sy-karte { margin-top: clamp(40px, 6vw, 88px); }
  .sy-karte-map { width: 100%; height: clamp(420px, 68vh, 760px); }
  .sy-zeit { max-width: var(--sy-breite); margin: 0 auto; padding: 16px var(--sy-rand) 0; display: grid; gap: 10px; }
  .sy .pt-timeline { display: grid; gap: 10px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
  .sy-zeit-kopf, .sy-zeile { display: flex; align-items: center; gap: 10px; }
  .sy-zeit-pos { margin-left: auto; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .82rem; }
  .sy .form-range { width: 100%; margin: 0; accent-color: var(--primary); }
  .sy .pt-scrub-preview { display: flex; align-items: center; gap: 10px; }
  .sy .pt-scrub-preview[hidden] { display: none; }
  .sy .pt-scrub-preview img { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; }

  .sy-zahlen { gap: clamp(28px, 4vw, 44px); }
  .sy .pt-stats, .sy .pt-records, .sy .pt-profile, .sy .pt-daystages { display: grid; gap: 10px; margin: 0; }
  .sy .pt-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0 24px; border-top: 1px solid var(--line); }
  .sy .pt-stat { display: grid; gap: 4px; align-content: start; padding: 14px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .sy .pt-stat .k { font-size: .76rem; color: var(--muted); }
  .sy .pt-stat .k svg.lucide { width: 13px; height: 13px; }
  .sy .pt-stat .v { font-size: 1.35rem; font-weight: 500; color: var(--ink); }
  .sy .pt-daystages > div:first-child { margin: 0; }
  .sy .pt-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
  .sy .pt-day { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; background: none; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .sy .pt-day .n { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-family: var(--f-data); font-size: .72rem; }
  .sy .pt-day .dt { font-family: var(--f-data); font-size: .86rem; }
  .sy .pt-day .meta { color: var(--muted); font-size: .88rem; }

  /* Tage als Kapitel: Kopf klebt links, Fotos rechts */
  .sy-tage { max-width: var(--sy-breite); margin: 0 auto; padding: clamp(56px, 8vw, 120px) var(--sy-rand) 0; }
  .sy-tage-kopf { padding-bottom: 14px; }
  .sy-tag { display: grid; gap: 18px 48px; margin: 0; padding: clamp(28px, 5vw, 64px) 0; border-top: 1px solid var(--line); scroll-margin-top: 64px; }
  @media (min-width: 1000px) {
    .sy-tag { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
    .sy-tag-kopf { position: sticky; top: 92px; }
  }
  .sy-tag-kopf { display: grid; gap: 6px; align-content: start; margin: 0; }
  .sy .sy-tag-nr { display: flex; align-items: baseline; gap: 10px; background: none; -webkit-text-fill-color: currentColor; color: var(--primary); font-size: clamp(3.2rem, 6vw, 5.4rem); font-weight: 500; line-height: .9; }
  .sy-tag-nr small { font-family: var(--f-body); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
  .sy-tag-nr--pin svg.lucide { width: 44px; height: 44px; }
  .sy .st-stage-place { margin: 8px 0 0; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.05; letter-spacing: -.03em; }
  .sy .st-stage-date { margin: 0; color: var(--muted); font-size: .86rem; font-weight: 500; }
  .sy .st-auto { margin: 10px 0 0; padding: 0; border: 0; background: none; color: var(--ink); font-size: .95rem; line-height: 1.55; }
  .sy .st-note { margin: 6px 0 0; color: var(--muted); font-size: .95rem; }
  .sy-mosaik { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows: 190px; grid-auto-flow: dense; gap: 8px; }
  .sy-mosaik .photo-thumb { display: block; position: relative; overflow: hidden; border-radius: 10px; line-height: 0; background: var(--surface); }
  .sy-mosaik .photo-thumb img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 0; transition: transform .5s var(--kurve); }
  .sy-mosaik .photo-thumb:hover img { transform: scale(1.03); }
  .sy-mosaik .big { grid-column: span 2; grid-row: span 2; }
  /* Tag mit nur einem Foto: über die ganze Breite statt halb und daneben leer */
  .sy-mosaik .big:only-child { grid-column: 1 / -1; grid-row: span 3; }
  /* Zwei Fotos: nebeneinander, gleich groß */
  .sy-mosaik .big:first-child:nth-last-child(2) + .photo-thumb { grid-column: span 2; grid-row: span 2; }
  @media (max-width: 560px) { .sy-mosaik { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; gap: 6px; } }
  .sy-wegpunkte { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }

  /* Kommentare */
  .sy-kommentare { max-width: 760px; margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--sy-rand) clamp(56px, 8vw, 96px); display: grid; gap: 18px; }
  .sy-kommentare > h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.03em; }
  .sy-kommentare > h2 .tp-data { color: var(--muted); font-size: .6em; }
  .sy-kommentar-form { display: grid; gap: 10px; }
  .sy-kommentar-form .tp-btn { justify-self: end; }
  .sy-hinweis { margin: 0; color: var(--muted); }
  .sy-kommentar-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .sy .sy-kommentar { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 16px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .sy .pt-comment-av { width: 38px; height: 38px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--surface); color: var(--muted); }
  .sy .pt-comment-av img { width: 100%; height: 100%; object-fit: cover; }
  .sy-kommentar-text { flex: 1; min-width: 0; }
  .sy-kommentar-text .sy-zeile { justify-content: space-between; }
  .sy .pt-comment-body { margin-top: 4px; overflow-wrap: anywhere; }
  .sy-klein { color: var(--muted); font-size: .76rem; }
  .sy-melden .tp-menue-panel form { display: grid; gap: 8px; padding: 6px; }
  .sy-melden .tp-menue-panel .tp-btn { width: 100%; justify-content: center; }
  .sy .st-cta { margin: 0; border-radius: 0; border: 0; box-shadow: none; }

  @media print {
    .sy-poster { min-height: 0 !important; }
    .sy-poster::after, .sy-band, .sy-karte .sy-zeit, .sy-kommentar-form, .sy-melden, .sy .photo-zoom,
    .tp-oeffentlich > .tp-kopfleiste, .tp-oeffentlich > .tp-fuss, .tp-sprung { display: none !important; }
    .sy-tag { display: block !important; }
    .sy-tag-kopf { position: static !important; margin-bottom: 4mm !important; }
    .sy .sy-tag-nr { color: #000 !important; }
    .sy-mosaik { grid-auto-rows: auto !important; }
    .sy-werte .st-stat { border-color: #bbb !important; }
    .sy-werte dd, .sy-werte dt, .sy-titel, .sy-spanne { color: #000 !important; }
    .sy-karte-map { height: 110mm !important; }
  }

  /* ======================================================================
     Übersicht (neu/dashboard.php) – eingeloggte Startseite
     ====================================================================== */
  .ub { max-width: 1320px; padding: clamp(24px, 3.4vw, 48px) clamp(16px, 3.4vw, 56px) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 36px); }
  .ub-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
  .ub-kopf h1 { margin: 6px 0 0; font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: .95; letter-spacing: -.045em; }
  .ub-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
  .ub-zahlen { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 640px) { .ub-zahlen { grid-template-columns: repeat(2, 1fr); } .ub-zahlen .tp-messwert:nth-child(3) { padding-left: 0; border-left: 0; } }
  .ub-zahlen .tp-messwert { color: inherit; text-decoration: none; transition: background-color var(--t-schnell); }
  .ub-zahlen .tp-messwert:hover b { color: var(--primary); }
  .ub-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
  @media (min-width: 1100px) { .ub-raster { grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); } }
  .ub-abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .ub-abschnitt-kopf h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; }
  .ub-reisen, .ub-seite { display: grid; gap: 10px; align-content: start; }
  .ub-seite { gap: clamp(26px, 3vw, 40px); }

  .ub-reise-gross { display: grid; margin-bottom: 8px; border-radius: 16px; overflow: hidden; background: var(--elev); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-soft); color: inherit; text-decoration: none; }
  .ub-reise-bild { position: relative; display: block; aspect-ratio: 16 / 8; background: var(--primary-soft); overflow: hidden; }
  .ub-reise-bild > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--kurve); }
  .ub-reise-gross:hover .ub-reise-bild > img { transform: scale(1.03); }
  .ub-reise-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(4, 9, 11, .78)); }
  .ub-reise-bild.ist-leer { display: grid; place-items: center; color: var(--primary); }
  .ub-reise-bild.ist-leer::after { display: none; }
  .ub-reise-bild.ist-leer > svg.lucide { width: 40px; height: 40px; opacity: .6; }
  .ub-reise-titel { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 16px; display: grid; gap: 4px; color: #fff; }
  .ub-reise-bild.ist-leer .ub-reise-titel { color: var(--ink); }
  .ub-reise-titel b { font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; letter-spacing: -.035em; }
  .ub-reise-titel small { font-size: .8rem; opacity: .85; }
  .ub-flagge { width: 28px; height: 19px; border-radius: 3px; object-fit: cover; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
  .ub-reise-werte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 14px 20px; font-size: .9rem; color: var(--muted); }
  .ub-reise-werte > span { display: inline-flex; align-items: center; gap: 6px; }
  .ub-reise-werte svg.lucide { width: 16px; height: 16px; color: var(--primary); }
  .ub-weiter { margin-left: auto; color: var(--primary); font-weight: 700; }
  .ub-reise-gross:hover .ub-weiter svg.lucide { transform: translateX(3px); transition: transform var(--t-schnell); }

  .ub-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .ub-liste > li { border-bottom: 1px solid var(--line); }
  .ub-zeile, .ub-meilenstein { display: flex; align-items: center; gap: 14px; padding: 12px 4px; color: inherit; text-decoration: none; }
  .ub-reisen > .ub-zeile { border-bottom: 1px solid var(--line); }
  .ub-reisen > .ub-reise-gross + .ub-zeile { border-top: 1px solid var(--line); }
  a.ub-zeile:hover b { color: var(--primary); }
  .ub-zeile-bild { width: 88px; height: 62px; flex: none; border-radius: 8px; overflow: hidden; background: var(--primary-soft); display: grid; place-items: center; color: var(--primary); }
  .ub-zeile-bild--klein { width: 52px; height: 52px; }
  .ub-zeile-bild img { width: 100%; height: 100%; object-fit: cover; }
  .ub-zeile-bild svg.lucide { width: 20px; height: 20px; opacity: .7; }
  .ub-zeile-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .ub-zeile-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--t-schnell); }
  .ub-zeile-text small { color: var(--muted); font-size: .84rem; }
  .ub-zeile--leer small { color: var(--primary); font-size: .9rem; }
  .ub-pfeil { width: 18px; height: 18px; color: var(--muted); flex: none; }
  .ub-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
  .ub-ic svg.lucide { width: 19px; height: 19px; }
  .ub-ic--gold { background: var(--sun-soft); color: var(--sun); }
  .ist-ziel .ub-ic { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); }
  .ub-balken { display: block; height: 5px; margin-top: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
  .ub-balken > span { display: block; height: 100%; border-radius: 3px; background: var(--sun); }
  .ub-punkte { flex: none; min-width: 38px; padding: 4px 8px; border-radius: 999px; text-align: center; font-size: .82rem; background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
  .ub-punkte.ist-hoch { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
  .ub-punkte.ist-mittel { background: var(--warn-soft); color: var(--warn); box-shadow: none; }

  .ub-leer { display: grid; justify-items: start; gap: 12px; max-width: 640px; padding: clamp(24px, 4vw, 44px); border-radius: 18px; background: var(--primary-soft); }
  .ub-leer h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.03em; }
  .ub-leer p { margin: 0; color: var(--muted); }
  .ub-schritte { list-style: none; counter-reset: s; margin: 4px 0 8px; padding: 0; display: grid; gap: 10px; }
  .ub-schritte li { counter-increment: s; position: relative; padding-left: 40px; display: grid; }
  .ub-schritte li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); font-family: var(--f-data); font-size: .8rem; }
  .ub-schritte span { color: var(--muted); font-size: .92rem; }

  /* ======================================================================
     Reiseliste (neu/trips/index.php)
     ====================================================================== */
  .rl { max-width: 1320px; padding: clamp(24px, 3.4vw, 48px) clamp(16px, 3.4vw, 56px) clamp(32px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2.4vw, 28px); }
  .rl-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
  .rl-kopf h1 { margin: 6px 0 0; font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: .95; letter-spacing: -.045em; }
  .rl-anzahl { font-size: .4em; font-weight: 500; color: var(--muted); letter-spacing: 0; vertical-align: .6em; }

  .rl-neu { position: relative; }
  .rl-neu > summary { list-style: none; }
  .rl-neu > summary::-webkit-details-marker { display: none; }
  .rl-neu[open] > summary { background: var(--primary-hover); }
  .rl-neu-feld { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(92vw, 640px); display: grid; gap: 0;
    background: var(--elev); border-radius: 16px; box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line-soft); animation: tp-auf var(--t-blatt) var(--kurve); }
  /* Noch keine Reise: Willkommen links, Formulare gleich daneben (statt aufgeklapptem Menü im Kopf) */
  .rl-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: stretch; max-width: 1180px; }
  .rl-start .ub-leer { max-width: none; align-content: start; }
  .rl-start .rl-neu-feld { position: static; width: auto; animation: none; align-content: start; }
  @media (max-width: 860px) { .rl-start { grid-template-columns: minmax(0, 1fr); } }
  .rl-neu-form { display: grid; gap: 12px; padding: 20px 22px; }
  .rl-neu-form--import { border-top: 1px solid var(--line-soft); background: var(--surface); border-radius: 0 0 16px 16px; }
  .rl-neu-form strong { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 1.1rem; }
  .rl-neu-form strong svg.lucide { width: 18px; height: 18px; color: var(--primary); }
  .rl-neu-form > .tp-btn { justify-self: start; }
  .rl-klein { color: var(--muted); font-size: .82rem; }
  @media (max-width: 640px) { .rl-neu { width: 100%; } .rl-neu > summary { width: 100%; } .rl-neu-feld { position: static; width: 100%; margin-top: 10px; } }

  .rl-werkzeug { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
  .rl-werkzeug[hidden] { display: none; }
  .rl-suche { position: relative; flex: 1 1 280px; max-width: 420px; }
  .rl-suche svg.lucide { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
  .rl-suche .tp-eingabe { padding-left: 40px; }
  .rl-werkzeug .tp-seg > * { white-space: nowrap; }
  @media (max-width: 640px) { .rl-werkzeug .tp-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .rl-suche { max-width: none; } }

  .rl-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(14px, 2vw, 22px); }
  .rl-karte[hidden] { display: none; }
  .rl-karte > a { display: grid; height: 100%; grid-template-rows: auto 1fr auto; border-radius: 14px; overflow: hidden; background: var(--elev);
    box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-soft); color: inherit; text-decoration: none; transition: transform var(--t-schnell), box-shadow var(--t-schnell); }
  .rl-karte > a:hover { transform: translateY(-2px); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line-soft); }
  .rl-karte > a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
  .rl-bild { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--primary-soft); overflow: hidden; }
  .rl-bild > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--kurve); }
  .rl-karte > a:hover .rl-bild > img { transform: scale(1.04); }
  .rl-bild.ist-leer { display: grid; place-items: center; color: var(--primary); }
  .rl-bild.ist-leer > svg.lucide { width: 34px; height: 34px; opacity: .55; }
  .rl-sicht { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(4, 9, 11, .55); color: #fff; backdrop-filter: blur(6px); }
  .rl-sicht svg.lucide { width: 15px; height: 15px; }
  .rl-text { display: grid; gap: 4px; align-content: start; padding: 14px 16px 6px; }
  .rl-text b { font-family: var(--f-display); font-size: 1.22rem; line-height: 1.15; letter-spacing: -.02em; }
  .rl-text small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .84rem; }
  .rl-flagge { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; flex: none; }
  .rl-werte { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px 14px; font-size: .84rem; color: var(--muted); }
  .rl-werte > span { display: inline-flex; align-items: center; gap: 5px; }
  .rl-werte svg.lucide { width: 14px; height: 14px; color: var(--primary); }
  .rl-leer { margin: 0; color: var(--muted); }
  .rl-geteilt { display: grid; gap: 14px; margin-top: clamp(16px, 3vw, 32px); }
  .rl-geteilt h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.4rem; letter-spacing: -.02em; }
  .rl-geteilt h2 svg.lucide { width: 20px; height: 20px; color: var(--primary); }

  /* Planer-Liste (neu/plans/index.php): Routen-Silhouetten statt Titelbild */
  .pl-intro { margin: 10px 0 0; max-width: 56ch; color: var(--muted); }
  .pl-bild { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; color: var(--primary);
    --pl-punkt: color-mix(in srgb, var(--primary) 16%, transparent);
    background-color: var(--surface); background-image: radial-gradient(var(--pl-punkt) 1px, transparent 1.2px); background-size: 14px 14px; }
  .pl-bild > svg { width: 100%; height: 100%; padding: 10px 14px; overflow: visible; }
  .pl-bild > svg.lucide { width: 34px; height: 34px; padding: 0; opacity: .5; }
  .pl-linie { fill: none; stroke: var(--primary); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .pl-linie-schatten { fill: none; stroke: var(--elev); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .pl-start { fill: var(--sun); stroke: var(--elev); stroke-width: 2; vector-effect: non-scaling-stroke; }
  .pl-ende { fill: var(--primary); stroke: var(--elev); stroke-width: 2; vector-effect: non-scaling-stroke; }
  .rl-karte > a:hover .pl-linie { stroke: var(--primary-hover); stroke-width: 3.2; }
  .pl-punkte { position: absolute; top: 10px; right: 10px; }
  .pl-karte { position: relative; }
  .pl-wahl { position: absolute; z-index: 2; top: 10px; left: 10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--elev); box-shadow: var(--shadow-1); cursor: pointer; }
  .pl-wahl[hidden] { display: none; }
  .pl-wahl input { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; }
  .ist-wahl .pl-karte:has(input:checked) > a { box-shadow: 0 0 0 2px var(--primary), var(--shadow-2); }
  .pl-leiste { position: sticky; bottom: 16px; z-index: 30; justify-self: center; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; border-radius: 999px;
    background: var(--ink); color: var(--bg); box-shadow: var(--shadow-2); font-size: .9rem; }
  .pl-leiste[hidden] { display: none; }
  .pl-leiste [aria-disabled="true"] { opacity: .5; pointer-events: auto; cursor: not-allowed; }
  @media (max-width: 899px) { .pl-leiste { bottom: 84px; } }

  /* Entdecken: Foto-Karte und Community-Spots (neu/photomap.php, neu/discover/*) */
  .ek-reiter { justify-self: start; }
  /* Drei Reiter (Fotos / Spots / Sehenswertes, 18.09.2026): auf dem Handy kürzer und ohne Symbole, sonst brechen sie um. */
  .ek-reiter > a { white-space: nowrap; }
  .ek-reiter .ek-kurz { display: none; }
  @media (max-width: 560px) {
    .ek-reiter { justify-self: stretch; }
    .ek-reiter > a { justify-content: center; padding: 0 10px; }
    .ek-reiter .ek-lang { display: none; }
    .ek-reiter .ek-kurz { display: inline; }
    .ek-reiter > a svg.lucide { display: none; }
  }
  .tp-seg > a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
  .tp-seg > a svg.lucide { width: 15px; height: 15px; }
  .ek-land .tp-auswahl { min-width: 200px; }
  .ek-karte { width: 100%; height: clamp(320px, 46vh, 460px); border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-soft); }
  .ek-karte--gross { height: clamp(420px, 72vh, 780px); }
  .ek-gold { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--sun); color: #fff; font-size: .76rem; }
  .ek-gold svg.lucide { width: 13px; height: 13px; }
  .ek-anteil { margin-left: auto; }
  .ek-balken { display: inline-block; width: 44px; height: 5px; margin-right: 4px; border-radius: 3px; background: var(--line-soft); overflow: hidden; vertical-align: middle; }
  .ek-balken > span { display: block; height: 100%; background: var(--sun); border-radius: 3px; }
  .ek-mehr { display: flex; justify-content: center; }
  .ek-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
  .ek-filter .tp-auswahl { width: auto; min-width: 170px; }
  .ek-datum { display: grid; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--muted); }
  .ek-datum .tp-eingabe { width: 160px; }

  /* Entdecken → Sehenswertes (neu/discover/sehenswert.php, 18.09.2026) */
  .sw-werkzeug { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .sw-suche { position: relative; flex: 1 1 260px; max-width: 420px; }
  .sw-suche > svg.lucide { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
  .sw-suche .tp-eingabe { width: 100%; padding-left: 38px; }
  .sw-werkzeug .tp-auswahl { width: auto; min-width: 200px; max-width: 100%; }
  .sw-arten { display: flex; flex-wrap: wrap; gap: 6px; }
  .sw-arten .tp-chip { cursor: pointer; border: 0; font: inherit; font-size: .84rem; }
  .sw-arten .tp-chip.ist-an { background: var(--primary); color: var(--on-primary); box-shadow: none; }
  .sw-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
  @media (min-width: 1000px) {
    .sw-raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .sw-karte-rahmen { position: sticky; top: 16px; }
    .sw-karte { height: calc(100vh - 32px); max-height: 760px; min-height: 420px; }
  }
  .sw.ist-laedt .sw-liste { opacity: .55; transition: opacity .2s; }
  .sw-status { margin: 0 0 8px; color: var(--muted); font-size: .88rem; }
  .sw-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .sw-ort { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: 14px; background: var(--elev);
    box-shadow: inset 0 0 0 1px var(--line-soft); scroll-margin: 16px; }
  .sw-ort.ist-an { box-shadow: inset 0 0 0 2px var(--primary); }
  .sw-bild { width: 96px; height: 96px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--surface); color: var(--muted); }
  .sw-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .sw-text { display: grid; gap: 4px; min-width: 0; align-content: start; }
  .sw-text h3 { margin: 0; font-size: 1.02rem; line-height: 1.25; letter-spacing: -.01em; }
  .sw-name { all: unset; cursor: pointer; text-wrap: balance; }
  .sw-name:hover { text-decoration: underline; text-underline-offset: 3px; }
  .sw-name:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
  .sw-meta { color: var(--muted); font-size: .8rem; }
  .sw-kurz { margin: 2px 0 0; font-size: .9rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .sw-nachweis { color: var(--muted); font-size: .72rem; overflow-wrap: anywhere; }
  .sw-nachweis a { color: inherit; }
  .sw-aktionen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  @media (max-width: 520px) { .sw-ort { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; } .sw-bild { width: 72px; height: 72px; } }
  .sw-meldung { position: sticky; bottom: 16px; z-index: 40; justify-self: center; margin: 0; padding: 10px 18px; border-radius: 999px;
    background: var(--ink); color: var(--bg); box-shadow: var(--shadow-2); font-size: .9rem; max-width: min(640px, calc(100vw - 32px)); }
  .sw-meldung a { color: inherit; font-weight: 700; }
  @media (max-width: 899px) { .sw-meldung { bottom: 84px; } }
  .sw-dialog { width: min(440px, calc(100vw - 32px)); border: 0; border-radius: 16px; padding: 22px; background: var(--elev); color: var(--ink); box-shadow: var(--shadow-2); }
  .sw-dialog::backdrop { background: rgb(0 0 0 / .45); }
  .sw-dialog form { display: grid; gap: 14px; }
  .sw-dialog h2 { margin: 0; font-size: 1.2rem; }
  .sw-dialog-ort { margin: -8px 0 0; color: var(--muted); }
  .sw-dialog .tp-auswahl { width: 100%; }
  .sw-dialog-fehler { margin: 0; color: var(--err); font-size: .88rem; }
  .pk-karten.ist-laedt { opacity: .5; transition: opacity .2s; pointer-events: none; }
  .pk-muss-status { min-height: 1.2em; margin: 6px 0 0; }
  .wz-vorgemerkt { margin: 0 0 14px; justify-self: start; white-space: normal; }
  .sw-dialog-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

  /* Einstellungen (neu/settings.php) */
  .es-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
  @media (min-width: 1000px) { .es-raster { grid-template-columns: 220px minmax(0, 860px); } .es-inhalt { position: sticky; top: 24px; } }
  @media (max-width: 999px) { .es-inhalt ol { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
  .es-bereiche { display: grid; gap: 0; }
  /* Grids ohne Spaltenangabe wachsen auf die breiteste Inhaltsbreite – auf dem Handy
     schob das die Seite über den Rand. Jede Ebene bekommt eine schrumpfbare Spalte. */
  .es-bereiche, .es-bereich, .es-block, .es-zeilen { grid-template-columns: minmax(0, 1fr); }
  .es-bereich { scroll-margin-top: 24px; display: grid; gap: 14px; padding: 28px 0 34px; border-top: 1px solid var(--line); }
  .es-bereich:first-child { border-top: 0; padding-top: 0; }
  .es-bereich > h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -.03em; }
  .es-text { margin: -6px 0 0; color: var(--muted); max-width: 62ch; }
  .es-block { display: grid; gap: 14px; padding: clamp(16px, 2.4vw, 24px); border-radius: 14px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); }
  .es-block > h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 1.08rem; letter-spacing: -.01em; }
  .es-block > .tp-btn, .es-block > form > .tp-btn { justify-self: start; }
  .es-zeilen { display: grid; border-top: 1px solid var(--line-soft); }
  .es-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
  .es-zeile-t { font-weight: 700; }
  .es-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px 16px; }
  .es-voll { grid-column: 1 / -1; }
  .es-zwei { grid-column: span 2; }
  @media (max-width: 560px) { .es-zwei { grid-column: 1 / -1; } }
  .es-klein { margin: 0; color: var(--muted); font-size: .86rem; }
  .es-klein svg.lucide { width: 15px; height: 15px; vertical-align: -3px; }
  .es-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .es-inline .tp-eingabe { width: auto; min-width: 0; flex: 1 1 200px; max-width: 320px; }
  /* Dateiauswahl: Der native Inhalt (Knopf + Dateiname) läuft sonst unsichtbar über und macht die Seite breiter. */
  .tp-ui input[type="file"] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .es-avatar { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
  .es-avatar-bild { width: 88px; height: 88px; flex: none; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--surface); color: var(--muted); }
  .es-avatar-bild svg.lucide { width: 34px; height: 34px; }
  .es-avatar-aktion { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; flex: 1 1 200px; min-width: 0; }
  .es-inline { min-width: 0; }
  .es-karte { height: 280px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-soft); }
  .es-schalter { display: flex; align-items: center; gap: 10px; font-size: .92rem; cursor: pointer; }
  .es-schalter input { width: 20px; height: 20px; accent-color: var(--primary); }
  .es-status { padding: 2px 10px; border-radius: 999px; font-family: var(--f-body); font-size: .72rem; font-weight: 700; background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
  .es-status.ist-an { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
  .es-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin-top: 8px; }
  .es-codes code, .es-geheim { padding: 4px 8px; border-radius: 6px; background: var(--elev); color: var(--ink); font-size: .88rem; word-break: break-all; }
  .es-2fa { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
  .es-qr { flex: none; padding: 10px; border-radius: 12px; background: #fff; line-height: 0; }
  .es-qr img, .es-qr canvas { display: block; }
  .es-2fa-schritte { display: grid; gap: 10px; flex: 1; min-width: 240px; }
  .es-code { max-width: 140px !important; text-align: center; letter-spacing: .2em; font-size: 1.1rem; }
  .es-listeneintrag { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px; }
  .es-listeneintrag > span { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .es-listeneintrag svg.lucide { width: 17px; height: 17px; color: var(--primary); }
  .es-listeneintrag small { color: var(--muted); font-size: .8rem; }
  .es-leer { color: var(--muted); }

  /* Fotografen-Profil (neu/profile.php) */
  .pf-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
  .pf-bild { width: 96px; height: 96px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--elev), 0 0 0 5px var(--line); }
  .pf-bild--initial { display: grid; place-items: center; background: var(--primary); color: var(--on-primary); font-family: var(--f-display); font-size: 2.6rem; font-weight: 700; }
  .pf-kopf-text { display: grid; gap: 6px; flex: 1 1 280px; min-width: 0; }
  .pf-kopf-text h1 { margin: 0; font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: .95; letter-spacing: -.045em; overflow-wrap: anywhere; }
  .pf-stufe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
  .pf-abzeichen { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 9px; border-radius: 999px; background: var(--sun-soft); color: var(--sun); font-weight: 700; font-size: .86rem; }
  .pf-abzeichen svg.lucide { width: 16px; height: 16px; }
  .pf-fortschritt { display: block; width: min(240px, 100%); height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
  .pf-fortschritt > span { display: block; height: 100%; background: var(--sun); border-radius: 3px; }
  .pf-stufe small { color: var(--muted); font-size: .8rem; }
  .pf-bearbeiten { align-self: flex-start; }
  .pf-zahlen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pf-zahlen .tp-messwert span { white-space: normal; overflow-wrap: anywhere; }
  @media (max-width: 900px) { .pf-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pf-zahlen .tp-messwert:nth-child(4) { padding-left: 0; border-left: 0; } }
  .pf-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
  @media (min-width: 1000px) { .pf-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .pf-abschnitt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
  .pf-abschnitt h2 { margin: 0; font-size: 1.3rem; letter-spacing: -.02em; }
  .pf-abschnitt h3 { margin: 10px 0 0; font-size: 1rem; }
  .pf-abschnitt .ub-abschnitt-kopf { margin: 10px 0 0; }

  /* Licht als ein Band; Farben folgen dem Tageslauf */
  .pf-licht--night { background: #26363C; }
  .pf-licht--twilight { background: #6C7E9C; }
  .pf-licht--blue { background: #3F6FC6; }
  .pf-licht--golden { background: var(--sun); }
  .pf-licht--day { background: var(--primary); }
  .pf-band { display: flex; height: 22px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--line-soft); }
  .pf-band-teil { min-width: 3px; }
  .pf-legende { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
  .pf-legende li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 44px; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: .92rem; }
  .pf-legende b { font-weight: 500; }
  .pf-legende small { color: var(--muted); text-align: right; font-size: .78rem; }
  .pf-punkt { width: 12px; height: 12px; border-radius: 3px; }

  .pf-rang { list-style: none; counter-reset: rang; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
  .pf-rang li { counter-increment: rang; display: grid; grid-template-columns: 22px minmax(0, 1.2fr) minmax(0, 1fr) 40px; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
  .pf-rang li::before { content: counter(rang); font-family: var(--f-data); font-size: .8rem; color: var(--muted); }
  .pf-rang-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pf-rang-balken { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
  .pf-rang-balken > span { display: block; height: 100%; border-radius: 4px; background: var(--primary); }
  .pf-rang b { text-align: right; font-weight: 500; }
  .pf-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .pf-chips svg.lucide { width: 14px; height: 14px; color: var(--primary); }
  .pf .ach { margin-top: clamp(8px, 2vw, 20px) !important; }

  /* Nachschlagewerk (neu/library/*) */
  .bi-kategorien { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bi-kategorien h2 { margin: 0; font-size: 1.2rem; }
  .bi-chip { text-decoration: none; color: var(--ink); }
  .bi-chip b { font-weight: 500; color: var(--muted); font-size: .8em; }
  a.bi-chip:hover { box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary); }
  .bi-chip.is-an { background: var(--primary); color: var(--on-primary); box-shadow: none; }
  .bi-chip.is-an b { color: inherit; opacity: .8; }
  .bi-verwalten > summary { list-style: none; }
  .bi-verwalten > summary::-webkit-details-marker { display: none; }
  .bi-kategorien > .ub-abschnitt-kopf { flex-wrap: wrap; }
  .bi-verwalten[open] { flex-basis: 100%; }
  .bi-verwalten-liste { margin-top: 10px; }
  .bi-verwalten-liste .es-listeneintrag { flex-wrap: wrap; }
  .bi-verwalten-liste .es-inline { flex: 1 1 240px; }
  .bi-laender { display: flex; flex-wrap: wrap; gap: 6px; }
  .bi-land { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .bi-land > h2 { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -.03em; }
  .bi-land > h2 .rl-flagge { width: 28px; height: 19px; }
  .bi-region { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 14px 0 6px; }
  .bi-highlights { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .84rem; color: var(--muted); }
  .bi-highlights svg.lucide { width: 14px; height: 14px; color: var(--sun); }
  .bi-highlights a { color: var(--primary); font-weight: 700; text-decoration: none; }
  .bi-highlights a:hover { text-decoration: underline; }
  .bi-orte { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .bi-orte > li { border-bottom: 1px solid var(--line-soft); }
  .bi-orte a { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 18px; align-items: center; gap: 14px; padding: 10px 4px; color: inherit; text-decoration: none; }
  .bi-orte a:hover { background: var(--surface); }
  .bi-orte a:hover b { color: var(--primary); }
  .bi-bild { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
  .bi-bild img { width: 100%; height: 100%; object-fit: cover; }
  .bi-bild svg.lucide { width: 20px; height: 20px; opacity: .7; }
  .bi-text { display: grid; gap: 2px; min-width: 0; }
  .bi-text b { transition: color var(--t-schnell); }
  .bi-text b small { margin-left: 6px; font-weight: 500; color: var(--muted); font-size: .8rem; }
  .bi-text > small { color: var(--muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bi-fotos { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .84rem; }
  .bi-fotos svg.lucide { width: 14px; height: 14px; color: var(--primary); }
  .bi-auszug { color: var(--muted); font-family: var(--f-body); font-size: .86rem; }
  @media (max-width: 560px) { .bi-orte a { grid-template-columns: 44px minmax(0, 1fr) auto; } .bi-orte .ub-pfeil { display: none; } .bi-bild { width: 44px; height: 44px; } }

  /* Ausrüstung (neu/equipment.php) */
  .au-neu > summary { list-style: none; width: fit-content; }
  .au-neu[open] > summary { margin-bottom: 12px; }
  .au-neu > summary::-webkit-details-marker { display: none; }
  .au-neu[open] > summary { background: var(--elev); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
  .au-formular { width: 100%; max-width: 920px; box-sizing: border-box; grid-template-columns: minmax(0, 1fr); align-items: end; }
  @media (min-width: 760px) { .au-formular { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.4fr) auto; } }
  .au-gruppen { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 36px); }
  @media (min-width: 1100px) { .au-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 56px); } }
  .au-gruppen h2 { display: flex; align-items: center; gap: 10px; }
  .au-gruppen h2 svg.lucide { width: 20px; height: 20px; color: var(--primary); }
  .au-zahl { color: var(--muted); font-size: .9rem; }
  .au-liste > li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 2px; }
  .au-liste .bi-bild { width: 44px; height: 44px; }
  .au-liste .bi-text small { white-space: normal; font-size: .8rem; }
  .au-liste form { margin: 0; }
  .au-liste .tp-btn--leise:hover { color: var(--err); }

  /* Pro (neu/pro.php) */
  .pr-plaene { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
  @media (min-width: 860px) { .pr-plaene { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
  .pr-plan { display: grid; align-content: start; gap: 16px; padding: clamp(20px, 3vw, 32px); border-radius: 18px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); }
  .pr-plan h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); }
  .pr-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .pr-plan li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; line-height: 1.4; }
  .pr-plan li svg.lucide { width: 18px; height: 18px; margin-top: 1px; color: var(--primary); }
  .pr-plan--pro { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-1); }
  .pr-plan--pro h2 { color: inherit; }
  .pr-plan--pro li svg.lucide { color: inherit; opacity: .78; }
  .pr-plan--pro .tp-chip { background: color-mix(in srgb, var(--on-primary) 16%, transparent); color: inherit; box-shadow: none; font-family: var(--f-body); letter-spacing: 0; }
  @media (min-width: 1360px) { .pr-plan--pro ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
  .pr-los { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--on-primary) 22%, transparent); }
  .pr-los p { margin: 0; }
  .pr-los .tp-btn { background: var(--on-primary); color: var(--primary); box-shadow: none; }
  .pr .pm { margin: clamp(16px, 3vw, 32px) 0 0; max-width: none; }

  /* Suche (neu/search.php) */
  .su-feld { position: relative; display: flex; align-items: center; gap: 10px; max-width: 760px; }
  .su-feld > svg.lucide { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
  .su-feld .tp-eingabe { flex: 1 1 auto; min-width: 0; min-height: 52px; padding-left: 46px; font-size: 1.08rem; }
  .su-feld .tp-btn { min-height: 52px; }
  .su h2 svg.lucide { width: 20px; height: 20px; color: var(--primary); }
  .su-liste a { grid-template-columns: 44px minmax(0, 1fr) auto 18px; }
  .su-liste .bi-bild { width: 44px; height: 44px; }
  .su-fotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .su-fotos a { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface); color: #fff; text-decoration: none; }
  .su-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--kurve); }
  .su-fotos a:hover img { transform: scale(1.04); }
  .su-foto-leer { display: grid; place-items: center; height: 100%; color: var(--muted); }
  .su-foto-text { position: absolute; inset: auto 0 0; padding: 22px 10px 8px; font-size: .8rem; line-height: 1.25; background: linear-gradient(transparent, rgba(0, 0, 0, .66)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Einladen (neu/invite/index.php) */
  .ei-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
  @media (min-width: 900px) { .ei-raster { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
  .ei-stand h2 { margin: 0; font-size: 1.08rem; }
  .ei-zahl { display: flex; align-items: baseline; gap: 8px; margin: 0; }
  .ei-zahl b { font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.04em; color: var(--ink); }
  .ei-zahl span { color: var(--muted); font-size: 1.2rem; }
  .ei-balken { width: 100%; height: 8px; border-radius: 4px; }
  .ei-balken > span { border-radius: 4px; }
  .ei-werte { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: .88rem; }
  .ei-werte svg.lucide { width: 15px; height: 15px; vertical-align: -3px; color: var(--primary); }
  .ei-pro { background: var(--sun-soft); color: var(--sun); box-shadow: none; font-weight: 700; }
  .ei-liste > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 16px; padding: 12px 2px; }
  .ei-mail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
  .ei-status svg.lucide { width: 14px; height: 14px; }
  .ei-status--aktiv { background: var(--primary-soft); color: var(--primary); box-shadow: none; }
  .ei-status--an { background: var(--info-soft); color: var(--info); box-shadow: none; }
  .ei-datum { color: var(--muted); font-size: .82rem; }
  @media (max-width: 560px) { .ei-liste > li { grid-template-columns: minmax(0, 1fr) auto; } .ei-datum { grid-column: 1; grid-row: 2; } .ei-status { grid-row: 1 / span 2; grid-column: 2; } }

  /* Ortsseite (neu/library/place.php) */
  .oo-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
  .oo-aktionen form, .oo-zeile form { margin: 0; }
  .oo-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
  @media (min-width: 980px) { .oo-raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
  .oo-spalte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .oo-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font-size: 1.08rem; letter-spacing: -.01em; }
  .oo-status { font-size: .74rem; min-height: 24px; }
  .oo-status svg.lucide { width: 13px; height: 13px; }
  .oo-status--ok { background: var(--primary-soft); color: var(--primary); box-shadow: none; }
  .oo-status--offen { background: var(--sun-soft); color: var(--sun); box-shadow: none; }
  .oo-wiki { display: flow-root; }
  .oo-wiki p { margin: 0 0 .6em; max-width: 68ch; }
  .oo-wiki a svg.lucide { width: 14px; height: 14px; vertical-align: -2px; }
  .oo-wiki-bild { float: right; width: clamp(96px, 30%, 160px); margin: 0 0 10px 16px; border-radius: 10px; }
  .oo-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .oo-zeile .tp-eingabe { flex: 1 1 180px; min-width: 0; }
  .oo-kat { gap: 4px; padding-right: 4px; }
  .oo-kat form { margin: 0; display: inline-flex; }
  .oo-kat button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
  .oo-kat button:hover { background: var(--err-soft); color: var(--err); }
  .oo-kat button svg.lucide { width: 13px; height: 13px; }
  .oo-fotos { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
  .oo-fotos li { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--surface); }
  .oo-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .oo-stamm { border-top: 0; }
  .oo-stamm > summary { min-height: 0; }
  .oo-formular { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
  @media (min-width: 560px) { .oo-formular { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .oo-formular > .tp-btn { justify-self: start; }
  .oo-karte { height: 240px; border-radius: 10px; overflow: hidden; }
}

/* ---- Ohne Ebene: gezielte Anpassungen an Leaflet (sein CSS hat keine Ebene) ---- */
.tp-ui .leaflet-container { font-family: var(--f-body); background: var(--surface); }
.tp-ui .leaflet-bar { border: 0; box-shadow: var(--shadow-2); border-radius: 10px; overflow: hidden; }
.tp-ui .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; background: var(--elev); color: var(--ink); border-bottom-color: var(--line-soft); }
.tp-ui .leaflet-popup-content-wrapper { border-radius: 12px; background: var(--elev); color: var(--ink); box-shadow: var(--shadow-2); }
.tp-ui .leaflet-popup-tip { background: var(--elev); }
.tp-ui .leaflet-control-attribution { background: color-mix(in srgb, var(--elev) 80%, transparent); color: var(--muted); font-size: 10px; }
.tp-ui .leaflet-control-attribution a { color: var(--muted); }
/* Nachtkarte: Kacheln im dunklen Modus umkehren. Muss ohne Ebene stehen –
   leaflet.css setzt filter: inherit ohne Ebene und schlüge sonst jede Ebene. */
:root[data-bs-theme="dark"] .tp-ui .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.55); }
.tp-ui .rs-buehne .leaflet-top { top: 72px; }
.tp-ui .rs-buehne .leaflet-bottom { bottom: 132px; }

/* Startseite: Kacheln der Beispielreise immer als Nachtkarte, Stopps in Petrol */
.tp-ui .sp-karte .leaflet-container { background: #061013; }
.tp-ui .sp-karte .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(.72) contrast(1.05) saturate(.35); }
.tp-ui .sp-karte .leaflet-control-attribution { background: rgba(6, 16, 19, .6); color: rgba(234, 242, 240, .6); }
.tp-ui .sp-karte .leaflet-control-attribution a { color: rgba(234, 242, 240, .7); }
.tp-ui .leaflet-div-icon.sp-marke { background: transparent; border: 0; }
.tp-ui .sp-marke span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #5CD0D5; color: #04292C;
  font: 500 13px/1 "IBM Plex Mono", ui-monospace, monospace; box-shadow: 0 0 0 4px rgba(6, 16, 19, .75), 0 8px 20px -6px rgba(0, 0, 0, .6); }

/* ---- Ohne Ebene: 3D-Gelände (MapLibre) ----
   maplibre-gl.css wird beim ersten Antippen nachgeladen und hat keine Ebene.
   Sein .maplibregl-map { position: relative } schlug deshalb die Regel aus
   app.css (Ebene legacy): Die Karte hatte 0 px Höhe, zu sehen war nur der
   schwarze Grund der Vollbild-Ebene (gemeldet 14.09.2026). */
.tp3d .tp3d-map { position: absolute; inset: 0; }

/* Verkehrsmittel per Klick auf die Linie (Reise-Seite, nur Eigentümer). */
.tp-modeklick { display: grid; gap: 8px; min-width: 250px; }
.tp-modeklick-modi { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-modeklick-status { font-size: 12px; color: var(--muted); min-height: 1em; }
.tp-modeklick button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Verkehrsmittel-Wechsel auf der Karte: dieselben Lucide-Symbole wie die
   Legende, in der Farbe des Verkehrsmittels (.mode-car usw. setzt color). */
.mode-pin span { border-color: currentColor; }
.mode-pin span svg { width: 16px; height: 16px; stroke-width: 2.25; }
.tp-modeklick-t { font-size: 12px; color: var(--muted); }

/* Einstellungen → Deine Daten: Konto löschen deutlich abgesetzt (KW 42). */
.es-block.es-gefahr { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--err) 45%, transparent); }
.es-block.es-gefahr > h3 { color: var(--err); }

/* Pro: Preise und Single Trip Pass (KW 44). */
.pr-preis { margin: 0; display: grid; gap: 2px; }
.pr-preis strong { font-size: 1.6rem; }
.pr-oder { opacity: .82; font-size: .92rem; }
.pr-los .tp-btn[disabled] { opacity: .75; cursor: not-allowed; }
.pr-pass { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 16px;
  padding: clamp(20px, 3vw, 28px); border-radius: 18px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); }
.pr-pass > div { display: grid; gap: 8px; max-width: 62ch; }
.pr-pass h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.6rem); display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.pr-pass p { margin: 0; color: var(--muted); }
.pr-pass .pr-pass-reise { color: var(--ink); font-weight: 600; }
.pr-pass-reise svg.lucide { width: 16px; height: 16px; vertical-align: -3px; color: var(--primary); }
.pr-pass .tp-btn[disabled] { opacity: .7; cursor: not-allowed; }

/* Linie von Hand korrigieren: der ziehbare Punkt (RouteKorrektur). Groß genug
   für den Finger, mit Ring, damit er auf jeder Kartenfarbe sichtbar bleibt. */
.tp-linie-punkt span { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--primary, #0f766e);
  border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 4px 10px rgba(0, 0, 0, .3); cursor: grab; }
.tp-linie-punkt span:active { cursor: grabbing; }

/* Tagestexte (Apple Intelligence / von Hand): Herkunft klein darunter, Bearbeiten nur für den Eigentümer. */
.sy .st-auto-quelle { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: .75rem; color: var(--muted); }
.sy .st-auto-quelle svg.lucide { width: 12px; height: 12px; }
.sy .sy-text-bearb { margin-top: 8px; font-size: .85rem; }
.sy .sy-text-bearb summary { cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.sy .sy-text-bearb summary svg.lucide { width: 13px; height: 13px; }
.sy .sy-text-bearb form { display: grid; gap: 8px; margin-top: 8px; max-width: 62ch; }
@media print { .sy .sy-text-bearb { display: none; } }

/* Fehler- und „nichts gefunden“-Seiten (16.09.2026). Eine Spalte, mittig, kurz:
   Oft ist das die erste Seite, die jemand von TripPhoto sieht. */
.fe-seite { max-width: 46ch; margin-inline: auto; text-align: center; display: grid; gap: 14px; justify-items: center; }
.fe-seite h1 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.fe-seite p { margin: 0; }
.fe-zahl { font-size: clamp(3rem, 12vw, 5.5rem); line-height: 1; font-weight: 600; color: var(--muted); }
.fe-seite .sp-modus-ic svg.lucide { width: 26px; height: 26px; }

/* Länderseite: Filterreihe, Ortszeilen, Galerie (16.09.2026). */
.ld-orte { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); margin-bottom: 8px; }
.ld-ort { display: flex; gap: 14px; padding: 14px; border-radius: 16px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); }
.ld-ort img { width: 86px; height: 86px; object-fit: cover; border-radius: 12px; flex: none; }
.ld-ort h3 { margin: 0 0 4px; font-size: 1rem; }
.ld-ort p { margin: 6px 0 0; color: var(--muted); font-size: .9rem; }
.ld-ort .tp-chip { margin-right: 6px; }
.ld-galerie { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-galerie .gallery-item img { height: 120px; width: auto; border-radius: 12px; display: block; }

/* „Wo war das?“ (16.09.2026): Auswahl, Treffer, Wikipedia – eine ruhige Spalte. */
.wo { max-width: 60rem; margin-inline: auto; display: grid; gap: 20px; }
.wo-kopf { display: grid; gap: 8px; text-align: center; justify-items: center; }
.wo-kopf h1 { margin: 0; }
.wo-wahl { display: grid; gap: 10px; justify-items: center; padding: clamp(18px, 3vw, 26px);
  border-radius: 18px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); }
.wo-wahl label { width: min(100%, 26rem); }
.wo-wahl .tp-btn { width: 100%; justify-content: center; }
.wo-wahl .es-klein svg.lucide { width: 13px; height: 13px; vertical-align: -2px; }
.wo-ergebnis { display: grid; gap: 14px; }
.wo-treffer { display: flex; gap: 14px; align-items: flex-start; }
.wo-treffer h2 { margin: 0 0 4px; font-size: clamp(1.1rem, 2.4vw, 1.5rem); }
.wo-treffer p { margin: 0; }
.wo-wiki { display: flex; gap: 14px; padding: 14px; border-radius: 16px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); }
.wo-wiki img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; }
.wo-wiki p { margin: 6px 0; }

/* Spot-Seite (16.09.2026): Kopf mit Bewertung, Kennzahlen, Karte neben dem
   besten Licht, Astronomie in drei Blöcken, Nachbarschaft als Kacheln. */
.sq { display: grid; gap: 22px; }
.sq .rl-kopf { align-items: flex-end; }
.sq-arten { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sq-kopf-rechts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sq-zahlen { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.sq-zahlen .tp-messwert { padding: 14px; border-radius: 16px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); }
.sq-zwei { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.sq-drei { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.sq-block { padding: 16px; border-radius: 18px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); display: grid; gap: 8px; align-content: start; }
.sq-block .tp-label { margin-bottom: 2px; }
.sq-label-zeile { display: flex; justify-content: space-between; gap: 10px; }
.sq-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.sq-zeile:last-child { border-bottom: 0; }
.sq-zeile svg.lucide { width: 16px; height: 16px; vertical-align: -3px; }
.sq-stark { margin: 0; font-weight: 600; }
.sq-block p { margin: 0; }
.sq-block .es-klein svg.lucide { width: 13px; height: 13px; vertical-align: -2px; }
.sq-ja { color: var(--ok, #2e7d5b); }
.sq-admin { margin: 0; }
.sq-felder { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); align-items: end; }
.sq-zwei-listen { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.sq-nah { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.sq-nah .pt-tile { height: 100%; display: block; }
.sq-nah .pt-tile-body { padding: 10px 12px; display: grid; gap: 4px; }
.sq-nah .pt-tile-body b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-nah .pt-tile-body svg.lucide { width: 11px; height: 11px; vertical-align: -1px; }
@media (max-width: 860px) { .sq-zwei { grid-template-columns: 1fr; } }

/* Stadtseite (16.09.2026): Highlights als Zeilen, Formular daneben. */
.sd { display: grid; gap: 20px; }
.sd-zwei { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
.sd-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sd-liste li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px;
  background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); }
.sd-liste li > div { flex: 1 1 auto; min-width: 0; }
.sd-liste p { margin: 4px 0 0; }
.sd-liste form { margin: 0; }
.st-chip--hl { background: color-mix(in oklab, var(--primary) 16%, transparent); }
.st-chip--gem { background: color-mix(in oklab, var(--ok, #2e7d5b) 16%, transparent); }
.st-chip--tipp { background: color-mix(in oklab, var(--warn, #b8860b) 18%, transparent); }
.sd-block { padding: 16px; border-radius: 18px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); }
.sd-block h2 { margin: 0 0 12px; font-size: 1.05rem; }
.sd-koord { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .sd-zwei { grid-template-columns: 1fr; } }

/* Planer (16.09.2026): Plan-Seite, Kandidaten, Vergleich. Die eigenen
   Bausteine (pt-tl-*, opt-*, cmp-*, wz-*) bleiben – hier steht nur der Rahmen. */
.pz, .pk, .pv { display: grid; gap: 20px; }
.pz .rl-kopf, .pk .rl-kopf { align-items: flex-end; }
.pz-kopf-rechts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.pz-zahlen { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.pz-zahlen .tp-messwert { padding: 14px; border-radius: 16px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); }
.pz-knopfleiste { display: flex; flex-wrap: wrap; gap: 8px; }
.pz-tag { display: grid; gap: 12px; }
.pz-tag-zahlen { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.pz-weg { padding: 4px 8px; flex: none; }
.pz-neu h2 { display: flex; align-items: center; gap: 8px; }
.pz-suche { display: grid; gap: 8px; max-width: 560px; }
.pz-suche > label { font-size: .78rem; font-weight: 700; color: var(--muted); }
.pz-treffer { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pz-treffer li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface); }
.pz-treffer img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.pz-treffer-text { display: grid; min-width: 0; flex: 1; }
.pz-treffer-text b, .pz-treffer-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-treffer-text small { color: var(--muted); font-size: .78rem; }
.pz-treffer .pz-leer { color: var(--muted); font-size: .88rem; background: none; padding: 4px 0; }
.pz-oder { margin: 6px 0 0; }
.pz-loeschen { margin-top: 8px; }
.pk-karten { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.pk-gruende { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pk-waehlen { margin-top: 12px; }
.pk-waehlen .tp-btn { width: 100%; justify-content: center; }
.pk-wi-form { display: inline; margin: 0; }
.pv .cmp-grid a { text-decoration: none; }
.pv .es-klein svg.lucide, .pz .es-klein svg.lucide { width: 13px; height: 13px; vertical-align: -2px; }
/* Assistent: der eine Abstand, der vorher aus Bootstrap kam. */
.wz-abstand { margin-bottom: 16px; }

/* Atlas, Rückblick, Wärmekarte (16.09.2026). Die eigenen Bausteine (at-*,
   recap-bar, pt-scratch) bleiben; hier steht nur der Rahmen. */
.at, .rk, .wk { display: grid; gap: 22px; }
.at section { display: grid; gap: 10px; }
.at-kratz { display: grid; gap: 12px; }
.at-kratz-zahlen { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
.at-kratz-zahlen b { font-size: 1.5rem; margin-right: 6px; }
.at-laender { display: flex; flex-wrap: wrap; gap: 8px; }
.at-laender .tp-chip { text-decoration: none; }
.rk .rl-kopf { align-items: flex-end; }
.rk-jahre { color: var(--muted); font-size: 1rem; font-weight: 400; }
.rk-jahr { margin: 0; }
.rk-zahlen { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.rk-zahl { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 16px 12px; border-radius: 16px;
  background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); }
.rk-zahl b { font-size: 2rem; line-height: 1; }
.rk-teilen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rk-zwei { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; }
.rk-ort { display: grid; gap: 4px; margin-bottom: 10px; }
.rk-ort-kopf { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.rk-ort-kopf span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk .recap-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .9rem; }
.rk .recap-facts svg.lucide { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.wk .rl-kopf { align-items: flex-end; }
.wk-jahre > a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.wk-zahlen { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* Planer: Kurzbeschreibung einer Sehenswürdigkeit unter dem Stopp (16.09.2026) */
.opt-stop { flex-wrap: wrap; }
.opt-stop-text { flex-basis: 100%; padding-left: 3.6em; font-size: .8rem; line-height: 1.35; color: var(--muted); white-space: normal; }

/* Entdecken + White-Label-Reisen „Feldbuch“ (16.09.2026) */
.ex-raster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ex-karte { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--elev);
  box-shadow: inset 0 0 0 1px var(--line-soft); color: inherit; text-decoration: none; transition: box-shadow var(--t-schnell); }
.ex-karte:hover, .ex-karte:focus-visible { box-shadow: inset 0 0 0 1px var(--primary); }
.ex-bild { flex: none; width: 60px; height: 40px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.ex-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ex-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-text small { color: var(--muted); font-size: .82rem; }
.ex-reisen { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.ex-reise { display: grid; border-radius: 16px; overflow: hidden; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); color: inherit; text-decoration: none; }
.ex-reise:hover, .ex-reise:focus-visible { box-shadow: inset 0 0 0 1px var(--primary); }
.ex-reise-bild { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); overflow: hidden; }
.ex-reise-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-reise .ex-text { padding: 10px 12px 12px; }

/* Admin „Feldbuch“ (16.09.2026) */
.ad { display: grid; gap: 18px; }
.ad-block { display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); min-width: 0; }
.ad-block--alarm { box-shadow: inset 0 0 0 2px var(--err); }
.ad-block .ub-abschnitt-kopf { flex-wrap: wrap; gap: 8px; }
.ad-block form { margin: 0; }
.ad-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-aktionen form { margin: 0; }
.ad-knoepfe { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ad-leise { color: var(--muted); }
.ad-nowrap { white-space: nowrap; }
.ad-rechts { text-align: right; }
.ad-mitte { text-align: center; }
.ad-inhalt { white-space: pre-wrap; max-width: 44rem; font-size: .88rem; }
.ad-klein { font-size: .86rem; }
.ad .tp-tabelle td { padding: 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.ad .tp-tabelle svg.lucide { width: 15px; height: 15px; vertical-align: -2px; }
.ad-gruppe th { background: var(--surface); }
.ad-ok { color: var(--ok); }
.ad-schlecht { color: var(--err); }
.ad-zahlen { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.ad-zahlen > div { display: grid; gap: 2px; }
.ad-zahlen small { color: var(--muted); font-size: .78rem; }
.ad-balken { height: 8px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.ad-balken > span { display: block; height: 100%; background: var(--primary); }
.ad-unter { margin: 8px 0 0; font-size: .95rem; }
.ad-unter--fehler { color: var(--err); }
.ad-formular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.ad-formular .tp-feld { flex: 1 1 11rem; }
.ad-knoepfe { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.ad-bearbeiten-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; font-weight: 600; }
.ad-bearbeiten-kopf small { font-weight: 400; flex-basis: 100%; }
.ad-bearbeiten-kopf svg { width: 1rem; height: 1rem; }

/* ---- Farbwahl (Einstellungen + Admin, Migration 090) ---- */
.farb { display: grid; gap: 16px; }
.farb-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; border: 0; margin: 0; padding: 0; }
.farb-karte { position: relative; display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--elev); cursor: pointer; font-weight: 600; font-size: .9rem; }
.farb-karte input { position: absolute; opacity: 0; pointer-events: none; }
.farb-karte:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.farb-karte:has(input:focus-visible) { box-shadow: var(--focus); }
.farb-streifen { display: flex; height: 22px; border-radius: 6px; overflow: hidden; }
.farb-streifen i { flex: 1; }
.farb-streifen--eigen { align-items: center; justify-content: center; background: conic-gradient(from 90deg, #0A6570, #5B3A86, #B23A48, #9A5800, #2F6B3A, #0A6570); color: #fff; }
.farb-streifen--eigen svg { width: 16px; height: 16px; }
.farb-klein { margin: 0; color: var(--muted); font-size: .9rem; }
.farb-eigen { display: grid; gap: 10px; }
.farb-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.farb-spalte { display: grid; gap: 6px; border: 1px solid var(--line-soft); border-radius: var(--r-ctl); padding: 10px 12px; margin: 0; }
.farb-spalte legend { font-weight: 700; padding: 0 4px; }
.farb-farbe { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; }
.farb-farbe input[type=color] { width: 40px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.farb-farbe code { font-size: .8rem; color: var(--muted); }
.farb-kontraste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: .85rem; }
.farb-kontraste .is-gut { color: var(--ok); }
.farb-kontraste .is-schlecht { color: var(--err); font-weight: 700; }
.farb-vorschau { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.farb-probe { --fw-bg: #EAEEEC; --fw-ink: #0E1A1D; display: grid; grid-template-columns: 96px 1fr; min-height: 150px; border-radius: var(--r-ctl); overflow: hidden; border: 1px solid var(--line); background: var(--fw-bg); color: var(--fw-ink); }
.farb-probe-leiste { display: grid; align-content: start; gap: 4px; padding: 10px 8px; background: var(--fw-rail); color: color-mix(in srgb, var(--fw-rail-ink) 65%, var(--fw-rail)); font-size: .8rem; font-weight: 600; }
.farb-probe-leiste span { padding: 4px 8px; border-radius: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.farb-probe-aktiv { background: var(--fw-rail-active); color: var(--fw-rail-active-ink); }
.farb-probe-blatt { display: grid; align-content: start; gap: 6px; padding: 12px; }
.farb-probe-blatt small { color: color-mix(in srgb, var(--fw-ink) 64%, var(--fw-bg)); }
.farb-probe-blatt svg { width: 100%; max-width: 160px; height: 24px; stroke: var(--fw-route); }
.farb-probe-zeile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.farb-probe-knopf { padding: 6px 10px; border-radius: 6px; background: var(--fw-primary); color: var(--fw-on-primary); font-weight: 700; font-size: .85rem; }
.farb-probe-sonne { padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--fw-sun) 18%, var(--fw-bg)); color: var(--fw-sun); font-size: .8rem; font-weight: 700; }
.farb-formular { display: grid; gap: 14px; }
.farb-formular .tp-feld { max-width: 360px; }

/* ---- Auftritt je Domain (Admin + Domain-Seite, Migration 093) ---- */
.af-formular { display: grid; gap: 14px; }
.af-formular > .tp-feld { max-width: 360px; }
.af-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.af-spalte { display: grid; gap: 10px; border: 1px solid var(--line-soft); border-radius: var(--r-ctl); padding: 10px 12px; margin: 0; }
.af-spalte legend { font-weight: 700; padding: 0 4px; }
.af-spalte textarea { resize: vertical; min-height: 120px; }
.af-bild { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.af-bild img { width: 240px; max-width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--r-ctl); border: 1px solid var(--line); }
.af-bild-felder { flex: 1; min-width: 240px; display: grid; gap: 10px; }
.af-seo { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 12px 14px; margin: 0; }
.af-seo legend { font-weight: 700; padding: 0 4px; display: inline-flex; gap: 6px; align-items: center; }
.af-seo legend svg { width: 1rem; height: 1rem; }
.af-zaehler { font-weight: 400; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.af-zaehler.ist-zu-lang { color: var(--err); font-weight: 700; }
.af-google { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--elev); border: 1px solid var(--line-soft); font-family: Arial, sans-serif; }
.af-google small { color: #4d5156; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-google b { color: #1a0dab; font-weight: 400; font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-google span { color: #4d5156; font-size: .85rem; line-height: 1.4; }
:root[data-bs-theme="dark"] .af-google small, :root[data-bs-theme="dark"] .af-google span { color: #bdc1c6; }
:root[data-bs-theme="dark"] .af-google b { color: #8ab4f8; }
.ex-titelbild { position: relative; margin: 0 0 20px; border-radius: var(--r-blatt); overflow: hidden; background: var(--primary-soft); }
.ex-titelbild img { display: block; width: 100%; aspect-ratio: 21 / 8; object-fit: cover; max-height: 420px; }
.ex-titelbild figcaption { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .75rem; }
.ex-intro { display: grid; gap: 10px; max-width: 68ch; }
.ex-intro p { margin: 0; }
@media (max-width: 640px) { .ex-titelbild img { aspect-ratio: 16 / 9; } }
.ad-zwei { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.ad-liste { display: grid; }
.ad-listenzeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.ad-listenzeile:last-child { border-bottom: 0; }
.ad-listenzeile:hover span:first-child { color: var(--primary); }
.ad .tp-seg > a { display: inline-flex; align-items: center; text-decoration: none; }

/* Werkzeuge auf der Reise-Seite (Abschnitte, Verorten, Import) ohne Bootstrap (16.09.2026) */
.rw-block { display: grid; gap: 10px; margin-bottom: 20px; padding: 16px 18px; border-radius: 16px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); scroll-margin-top: 80px; min-width: 0; }
.rw-block form { margin: 0; }
.rw-kopf { display: flex; align-items: center; gap: 8px; }
.rw-hinweis { font-size: .88rem; padding-block: 8px; }
.rw-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rw-inline { display: inline; margin: 0; }
.rw-leise { color: var(--muted); }
.rw-rechts { text-align: right; }
.rw-tabelle td { padding: 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; font-size: .9rem; }
.rw-formular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.rw-formular .tp-feld { flex: 1 1 12rem; }
.rw-formular .rw-breit { flex: 2 1 16rem; }
.rw-knopf { flex: 0 0 auto; }
.rw-abstand { margin-bottom: 8px; }
.rw-oben { margin-top: 12px; }
.rw-start { justify-self: start; }

/* Gespeicherter Plan: Kurzbeschreibung einer Sehenswürdigkeit unter dem Namen (16.09.2026) */
.pl-stopp-text { margin: 2px 0 4px; font-size: .86rem; line-height: 1.4; color: var(--muted); max-width: 60ch; }

/* Routen-Vorschläge kompakt: Karte, Tagesbalken, Tagesliste zum Aufklappen (16.09.2026) */
.pk-karte { height: 180px; margin: 10px 0 8px; border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-soft); }
.pk-tage { display: flex; align-items: flex-end; gap: 3px; height: 44px; padding: 4px 0; }
.pk-tag { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 4px; }
.pk-tag > span { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--primary); opacity: .75; }
.pk-tag.ist-lang > span { background: var(--warn); opacity: 1; }
.pk-tag.ist-leer > span { background: var(--line); }
.pk-tage-info { margin: 2px 0 10px; }
.pk-warn { color: var(--warn); font-weight: 700; }
.pk-tagesliste { margin-top: 4px; }
.pk-tagesliste > summary { font-size: .9rem; }

/* Wetter eines Reisetags (Migration 079) */
.wt-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 0; font-size: .84rem; color: var(--muted); }
.wt-lage { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }
.wt-lage svg.lucide { width: 15px; height: 15px; color: var(--primary); }
.wt-lage .tp-data { color: var(--muted); }
.wt-pfeil { color: var(--line); }
.wt-extra { flex-basis: auto; }
.pt-day .wt-tag { flex-basis: 100%; margin-left: 2.4em; }
.pt-day:has(.wt-tag) { flex-wrap: wrap; }
.wt-sicht { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pk-dauer { flex: none; padding: 0 6px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: .72rem; white-space: nowrap; }

/* Admin: Sehenswürdigkeiten (Migration 081) */
.ad-orte { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.ad-ort { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-soft); color: inherit; text-decoration: none; min-width: 0; }
.ad-ort:hover, .ad-ort:focus-visible { box-shadow: inset 0 0 0 1px var(--primary); }
.ad-ort.ist-aus { opacity: .6; }
.ad-ort-bild { flex: none; width: 72px; height: 54px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--surface); color: var(--muted); }
.ad-ort-bild img { width: 100%; height: 100%; object-fit: cover; }
.ad-ort-text { display: grid; gap: 2px; min-width: 0; }
.ad-ort-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-ort-text small { color: var(--muted); font-size: .8rem; }
.ad-marken { display: flex; flex-wrap: wrap; gap: 4px; }
.ad-gruppe-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.ad-gruppe-kopf form { margin: 0 0 0 auto; }
.ad-regionen { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-regionen form { margin: 0; }
.ad-regionen .tp-chip { cursor: pointer; border: 0; }
.ad-regionen .tp-chip.ist-an { background: var(--primary); color: var(--on-primary); }
/* Läuft über eine White-Label-Domain mit, ohne selbst freigeschaltet zu sein (18.09.2026). */
.ad-regionen .tp-chip.ist-mit { box-shadow: inset 0 0 0 1.5px var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--elev)); outline: 1px dashed var(--primary); outline-offset: 2px; }
.ad-regionen .tp-chip small { font-size: .74rem; opacity: .75; }
.ad-warteschlange { margin-top: 8px; max-width: 640px; }
/* Stand je Gruppe und offene Orte je Region (18.09.2026) */
.ad-legende { margin: 4px 0 0; }
.ad-offen { opacity: .8; font-style: normal; }
.ad-regionen .tp-chip.ist-an .ad-offen { color: inherit; }
.ad-gruppe-stand { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .86rem; color: var(--muted); margin: 2px 0 8px; }
.ad-gruppe-stand > span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ad-gruppe-stand b { color: var(--ink); font-weight: 700; }
.ad-balken { display: inline-block; width: 90px; height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.ad-balken > i { display: block; height: 100%; background: var(--primary); border-radius: 3px; }
.ad-cron tr.ist-fehler td { color: var(--err); }
.ad-cron tr.ist-leise td { color: var(--muted); }
.ad-cron td { white-space: nowrap; }
.ad-cron td:last-child { white-space: normal; min-width: 180px; }
.ad-warteschlange caption { caption-side: top; text-align: left; padding-bottom: 6px; }
.ad-bild { margin: 0; display: grid; gap: 6px; }
.ad-bild img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 12px; }
.ad-felder { display: grid; gap: 12px; }
.pl-bildnachweis, .opt-see-nachweis { display: block; margin: 0; font-size: .68rem; line-height: 1.3; color: var(--muted); }
.ad-block { align-content: start; }

/* Themen-Domains (Migration 087): Touren, Sehenswertes, Verweis auf TripPhoto */
.ex-abschnitt { display: grid; gap: 12px; }
.ex-ort .ex-text b { white-space: normal; }
.ex-ort-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; color: var(--ink, inherit); }
.ex-nachweis { font-size: .72rem; }
.ex-nachweis a { color: inherit; }
/* Reise planen auf Regionsdomains (19.09.2026) */
.ex-plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: clamp(16px, 2.6vw, 24px);
  border-radius: 16px; background: color-mix(in srgb, var(--primary) 9%, var(--elev)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent); }
.ex-plan h2 { margin: 0 0 4px; }
.ex-plan p { margin: 0; max-width: 62ch; color: var(--muted); }
.ex-plan-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
/* Reisezeit & Klima (19.09.2026) */
.kl-sprung { display: flex; flex-wrap: wrap; gap: 6px; }
.kl-sprung .tp-chip { text-decoration: none; }
.kl-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; }
.kl-l { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; }
.kl-l--hoch { background: var(--sun); } .kl-l--tief { background: var(--info); } .kl-l--regen { height: 10px; background: color-mix(in srgb, var(--primary) 45%, transparent); }
.kl-liste { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.kl-stadt { display: grid; gap: 8px; padding: clamp(14px, 2.4vw, 20px); border-radius: 16px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); scroll-margin-top: 16px; }
.kl-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.kl-kopf h2 { margin: 0; font-size: 1.2rem; }
.kl-kopf small { color: var(--muted); }
.kl-satz { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: .92rem; }
.kl-satz svg.lucide { width: 16px; height: 16px; vertical-align: -3px; color: var(--sun); }
.kl-heiss { color: var(--err); } .kl-heiss svg.lucide { color: var(--err); }
.kl-svg { width: 100%; height: auto; display: block; }
.kl-gitter { stroke: var(--line-soft); stroke-width: 1; }
.kl-achse, .kl-monat { fill: var(--muted); font-size: 11px; font-family: inherit; }
.kl-achse--regen { fill: color-mix(in srgb, var(--primary) 70%, var(--muted)); }
@media (max-width: 560px) { .kl-achse, .kl-monat { font-size: 17px; } .kl-einheit { display: none; } }
.kl-regen { fill: color-mix(in srgb, var(--primary) 40%, transparent); }
.kl-hoch { fill: none; stroke: var(--sun); stroke-width: 2.5; stroke-linejoin: round; }
.kl-tief { fill: none; stroke: var(--info); stroke-width: 2.5; stroke-linejoin: round; }
.kl-hoch-punkt { fill: var(--sun); } .kl-tief-punkt { fill: var(--info); }
.kl-tabelle summary { cursor: pointer; font-size: .88rem; color: var(--muted); }
.kl-tabelle th[scope="row"] { white-space: nowrap; }
.kl-quelle { margin: 0; }
.ex-klima-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.ex-klima-liste a { display: grid; padding: 10px 12px; border-radius: 12px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); color: inherit; text-decoration: none; }
.ex-klima-liste span { color: var(--muted); font-size: .86rem; }

/* Beispielrouten (Migration 096, 19.09.2026) */
.ro-liste { list-style: none; margin: 0; padding: 0; }
.ro-liste > li { display: grid; }
.ro-kurz { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; color: var(--ink); margin-top: 4px; }
.pz-beschreibung { max-width: 70ch; display: grid; gap: 10px; }
.pz-beschreibung p { margin: 0; line-height: 1.55; }
.pz-beispiel-hinweis { margin: 0; }
.pz-frage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pz-beispiel-form { display: grid; gap: 12px; max-width: 640px; padding-bottom: 14px; }
.pz-schalter { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ex-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
          padding: 18px 20px; border-radius: 16px; background: var(--primary-soft); }
.ex-cta > div { flex: 1 1 280px; display: grid; gap: 4px; }
.ex-cta p { margin: 0; max-width: 60ch; }
.dk-karte { height: clamp(320px, 58vh, 540px); border-radius: 16px; overflow: hidden; background: var(--primary-soft);
            box-shadow: inset 0 0 0 1px var(--line-soft); }
.dk-karte.ist-fehler { display: none; }
.dk-hinweis { margin: 0; font-size: .82rem; color: var(--muted); }
.dk-ort { width: 14px; height: 14px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--elev, #fff), 0 1px 3px rgb(0 0 0 / .35); }
.dk-popup { display: grid; gap: 4px; max-width: 240px; }
.dk-popup p { margin: 0; line-height: 1.4; }
.dk-bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.dk-nachweis { font-size: .7rem; color: var(--muted); }
.dk-link { font-weight: 600; }

/* Wohnmobil als Reiseart (Migration 088) */
.tp-schalter-zeile { display: flex; align-items: center; gap: 8px; font-size: .92rem; cursor: pointer; }
.tp-schalter-zeile input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.tp-schalter-zeile svg { width: 18px; height: 18px; color: var(--primary); }
.sy-fahrzeug { display: inline-flex; align-items: center; gap: 6px; }
.sy-fahrzeug svg { width: 1.1em; height: 1.1em; }

/* Reisevorbereitung USA (19.09.2026) */
.rv { display: grid; gap: 18px; }
.rv-stand { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: .85rem; color: var(--muted); }
.rv-stand svg { width: 16px; height: 16px; color: var(--primary); }
.rv-plan, .rv-thema { display: grid; gap: 10px; padding: clamp(14px, 2.4vw, 20px); border-radius: 16px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); scroll-margin-top: 16px; }
.rv-plan-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.rv-plan h2, .rv-thema h2 { margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }
.rv-thema h2 svg { width: 20px; height: 20px; color: var(--primary); flex: none; }
.rv-zaehler { font-size: .9rem; color: var(--muted); }
.rv-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 20px; }
.rv-gruppe h3 { margin: 0 0 6px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rv-gruppe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rv-gruppe li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; }
.rv-gruppe input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--primary); }
.rv-gruppe input:checked + label { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.rv-merkt { margin: 0; }
.rv-leeren { background: none; border: 0; padding: 0; color: var(--primary); font: inherit; text-decoration: underline; cursor: pointer; }
.rv-themen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.rv-thema ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; line-height: 1.5; }
.rv-thema p { margin: 0; }
.rv-quellen a { color: var(--primary); overflow-wrap: anywhere; }

/* Lernen aus Plänen (Migration 101, 19.09.2026) */
.opt-see-beliebt { display: flex; align-items: center; gap: 4px; padding: 0 .45rem .3rem; font-size: .7rem; color: var(--primary); }
.opt-see-beliebt svg { width: 12px; height: 12px; flex: none; }
.pz-auch { display: grid; gap: 8px; padding: clamp(14px, 2.4vw, 20px); border-radius: 16px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); margin-block: 16px; }
.pz-auch h2 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.pz-auch h2 svg { width: 18px; height: 18px; color: var(--primary); }
.pz-auch p { margin: 0; }
.pz-auch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pz-auch li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.pz-auch li small { display: block; color: var(--muted); }
.pz-auch form { margin: 0; }

/* Route 66 (19.09.2026) */
.r66 { display: grid; gap: 20px; }
.r66-aufrufe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.r66-fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0; }
.r66-fakten div { padding: 12px 14px; border-radius: 14px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); }
.r66-fakten dt { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.r66-fakten dd { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.r66-karte { height: clamp(260px, 42vw, 420px); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line-soft); }
.r66-block { display: grid; gap: 10px; padding: clamp(14px, 2.4vw, 20px); border-radius: 16px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-soft); }
.r66-block h2 { margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }
.r66-block h2 svg { width: 20px; height: 20px; color: var(--primary); flex: none; }
.r66-block p { margin: 0; }
.r66-streifen-rahmen { overflow-x: auto; }
.r66-streifen { border-collapse: separate; border-spacing: 3px; font-size: .8rem; font-variant-numeric: tabular-nums; min-width: 560px; width: 100%; }
.r66-streifen th { font-weight: 600; color: var(--muted); text-align: center; }
.r66-streifen tbody th { text-align: left; white-space: nowrap; padding-right: 6px; }
.r66-streifen tbody th a { color: var(--ink); }
.r66-k { text-align: center; padding: 5px 2px; border-radius: 6px; }
.r66-k--gut { background: color-mix(in srgb, var(--ok, #2e9d6a) 55%, transparent); }
.r66-k--ok { background: color-mix(in srgb, var(--ok, #2e9d6a) 25%, transparent); }
.r66-k--nass { background: color-mix(in srgb, var(--muted) 16%, transparent); }
.r66-k--heiss { background: color-mix(in srgb, var(--err, #c44) 40%, transparent); }
.r66-k--kalt { background: color-mix(in srgb, var(--info, #3b7bd4) 35%, transparent); }
.r66-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.r66-legende span { display: inline-flex; align-items: center; gap: 5px; }
.r66-legende i.r66-k { display: inline-block; width: 14px; height: 14px; padding: 0; }
.r66-staaten { margin: 0; padding-left: 1.4em; display: grid; gap: 14px; }
.r66-staaten > li::marker { font-weight: 700; color: var(--primary); }
.r66-staaten h3 { margin: 0 0 2px; font-size: 1.05rem; }
.r66-orte { margin: 6px 0 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: .92rem; }
.r66-orte span { color: var(--muted); }
.r66-tipps { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }

/* Cookie-Einwilligung (19.09.2026) – Hinweis unten, blockiert nichts; Dialog mit Schaltern */
.ew-hinweis { position: fixed; z-index: 2000; left: 16px; right: 16px; bottom: 16px; max-width: 760px; margin-inline: auto; display: grid; gap: 12px;
  padding: 16px 18px; border-radius: 16px; background: var(--elev); color: var(--ink); box-shadow: 0 12px 40px rgba(0,0,0,.28), inset 0 0 0 1px var(--line-soft); }
.ew-hinweis[hidden] { display: none; }
.ew-hinweis h2 { margin: 0 0 4px; font-size: 1.05rem; }
.ew-hinweis p { margin: 0; font-size: .92rem; line-height: 1.5; }
.ew-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.ew-knoepfe .tp-btn { flex: 1 1 auto; justify-content: center; }
.ew-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 18px; background: var(--elev); color: var(--ink);
  box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.ew-dialog { overflow: auto; overscroll-behavior: contain; }
.ew-dialog::backdrop { background: rgba(0,0,0,.45); }
.ew-form { display: grid; gap: 12px; padding: 18px 20px 20px; }
.ew-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ew-kopf h2 { margin: 0; font-size: 1.2rem; }
.ew-form > p { margin: 0; }
.ew-kat { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.ew-kat-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ew-kat h3 { margin: 0; font-size: 1rem; }
.ew-kat p { margin: 0; font-size: .9rem; color: var(--muted); line-height: 1.5; }
.ew-details summary { cursor: pointer; font-size: .85rem; color: var(--primary); }
.ew-details ul { margin: 6px 0 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: .85rem; }
.ew-details code { font-size: .8rem; overflow-wrap: anywhere; }
.ew-schalter { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.ew-schalter input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.ew-schalter span { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--muted) 45%, transparent); transition: background .15s; }
.ew-schalter span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.ew-schalter input:checked + span { background: var(--primary); }
.ew-schalter input:checked + span::after { transform: translateX(20px); }
.ew-schalter input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--primary) 60%, transparent); outline-offset: 2px; }
.ew-video { aspect-ratio: 16 / 9; display: grid; place-content: center; gap: 10px; padding: 16px; border-radius: 12px; text-align: center;
  background: color-mix(in srgb, var(--muted) 12%, transparent); box-shadow: inset 0 0 0 1px var(--line-soft); }
.ew-video p { margin: 0; font-size: .88rem; max-width: 46ch; }
.ew-video .ew-knoepfe { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .ew-schalter span, .ew-schalter span::after { transition: none; } }

/* Campingplätze am Tagesziel (Migration 102) */
.pz-camping { margin-top: 10px; }
.pz-camping summary svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--primary); }
.pz-camping ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.pz-camping li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.pz-camping li small { display: block; color: var(--muted); }
.pz-camping-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.pz-camping-knoepfe form { margin: 0; }

/* Ratgeber Wohnmobil (19.09.2026) */
.wm-vermieter { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wm-vermieter a { display: inline-block; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-soft); color: var(--ink); text-decoration: none; }
.wm-vermieter a:hover, .wm-vermieter a:focus-visible { box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); }
.wm-breit { grid-column: 1 / -1; }
.wm-tabelle-rahmen { overflow-x: auto; }
.wm-tabelle { border-collapse: collapse; font-size: .88rem; min-width: 520px; width: 100%; }
.wm-tabelle caption { text-align: left; font-weight: 700; padding: 6px 0; }
.wm-tabelle th, .wm-tabelle td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); text-align: center; }
.wm-tabelle tbody th, .wm-tabelle thead th:first-child { text-align: left; white-space: nowrap; }
.wm-tabelle thead th { font-size: .78rem; color: var(--muted); font-weight: 600; }
.wm-ja { color: var(--primary); font-weight: 600; }
.wm-leer { color: var(--muted); }

/* Familien-Themenseiten (19.09.2026) */
.fam-gebiete { margin: 0; padding-left: 1.4em; display: grid; gap: 16px; }
.fam-gebiete > li { scroll-margin-top: 80px; }
.fam-gebiete > li::marker { font-weight: 700; color: var(--primary); }
.fam-gebiete h3 { margin: 0 0 2px; font-size: 1.05rem; }
.fam-orte { margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 5px; font-size: .92rem; }
.fam-typ { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: .78rem; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-soft); }
.fam-text { color: var(--muted); }
.fam-nr span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: .9rem; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.fam-routen { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.fam-routen a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 12px; border-radius: 12px; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-soft); }
.fam-routen a:hover, .fam-routen a:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); }
.fam-routen .tp-data { color: var(--muted); }