/* ==========================================================================
   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  Bootstrap-Klassennamen der noch nicht umgebauten Ansichten im neuen Look
     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 {
  /* Farb- und Formvariablen der alten app.css auf die Feldbuch-Tokens umbiegen.
     Noch nicht umgebaute Ansichten (Planer-Assistent, Karten, Profil …) nutzen sie
     in eigenen <style>-Blöcken – ohne das kämen dort der Türkis-Violett-Verlauf und
     das Leuchten zurück. --pt-grad bleibt technisch ein Verlauf (wird als
     background-image und für Verlaufsschrift benutzt), 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 .container, .tp-ui .container-fluid { width: 100%; margin-inline: auto; padding-inline: clamp(16px, 3vw, 40px); }
  .tp-ui .container { max-width: 1320px; }

  /* Raster */
  .tp-ui .row { --gx: 16px; --gy: 0px; display: flex; flex-wrap: wrap; margin-inline: calc(var(--gx) / -2); row-gap: var(--gy); }
  .tp-ui .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-inline: calc(var(--gx) / 2); }
  .tp-ui .g-0 { --gx: 0px; --gy: 0px; } .tp-ui .g-1 { --gx: 4px; --gy: 4px; } .tp-ui .g-2 { --gx: 8px; --gy: 8px; }
  .tp-ui .g-3 { --gx: 16px; --gy: 16px; } .tp-ui .g-4 { --gx: 24px; --gy: 24px; } .tp-ui .g-5 { --gx: 48px; --gy: 48px; }
  .tp-ui .gy-2 { --gy: 8px; } .tp-ui .gy-3 { --gy: 16px; } .tp-ui .gy-4 { --gy: 24px; } .tp-ui .gx-2 { --gx: 8px; } .tp-ui .gx-3 { --gx: 16px; }
  .tp-ui .col { flex: 1 0 0%; }
  .tp-ui .col-auto { flex: 0 0 auto; width: auto; }
  .tp-ui .col-1 { width: 8.333%; } .tp-ui .col-2 { width: 16.667%; } .tp-ui .col-3 { width: 25%; } .tp-ui .col-4 { width: 33.333%; }
  .tp-ui .col-5 { width: 41.667%; } .tp-ui .col-6 { width: 50%; } .tp-ui .col-7 { width: 58.333%; } .tp-ui .col-8 { width: 66.667%; }
  .tp-ui .col-9 { width: 75%; } .tp-ui .col-10 { width: 83.333%; } .tp-ui .col-11 { width: 91.667%; } .tp-ui .col-12 { width: 100%; }
  @media (min-width: 576px) {
    .tp-ui .col-sm { flex: 1 0 0%; } .tp-ui .col-sm-auto { flex: 0 0 auto; width: auto; }
    .tp-ui .col-sm-3 { width: 25%; } .tp-ui .col-sm-4 { width: 33.333%; } .tp-ui .col-sm-6 { width: 50%; } .tp-ui .col-sm-8 { width: 66.667%; } .tp-ui .col-sm-12 { width: 100%; }
  }
  @media (min-width: 768px) {
    .tp-ui .col-md { flex: 1 0 0%; } .tp-ui .col-md-auto { flex: 0 0 auto; width: auto; }
    .tp-ui .col-md-1 { width: 8.333%; } .tp-ui .col-md-2 { width: 16.667%; } .tp-ui .col-md-3 { width: 25%; } .tp-ui .col-md-4 { width: 33.333%; }
    .tp-ui .col-md-5 { width: 41.667%; } .tp-ui .col-md-6 { width: 50%; } .tp-ui .col-md-7 { width: 58.333%; } .tp-ui .col-md-8 { width: 66.667%; }
    .tp-ui .col-md-9 { width: 75%; } .tp-ui .col-md-10 { width: 83.333%; } .tp-ui .col-md-12 { width: 100%; }
  }
  @media (min-width: 992px) {
    .tp-ui .col-lg { flex: 1 0 0%; } .tp-ui .col-lg-auto { flex: 0 0 auto; width: auto; }
    .tp-ui .col-lg-2 { width: 16.667%; } .tp-ui .col-lg-3 { width: 25%; } .tp-ui .col-lg-4 { width: 33.333%; } .tp-ui .col-lg-5 { width: 41.667%; }
    .tp-ui .col-lg-6 { width: 50%; } .tp-ui .col-lg-7 { width: 58.333%; } .tp-ui .col-lg-8 { width: 66.667%; } .tp-ui .col-lg-9 { width: 75%; } .tp-ui .col-lg-12 { width: 100%; }
  }
  @media (min-width: 1200px) {
    .tp-ui .col-xl-3 { width: 25%; } .tp-ui .col-xl-4 { width: 33.333%; } .tp-ui .col-xl-6 { width: 50%; } .tp-ui .col-xl-8 { width: 66.667%; }
  }

  /* Anzeige & Flex */
  .tp-ui .d-none { display: none !important; } .tp-ui .d-block { display: block !important; } .tp-ui .d-inline { display: inline !important; }
  .tp-ui .d-inline-block { display: inline-block !important; } .tp-ui .d-flex { display: flex !important; } .tp-ui .d-inline-flex { display: inline-flex !important; } .tp-ui .d-grid { display: grid !important; }
  @media (min-width: 576px) { .tp-ui .d-sm-none { display: none !important; } .tp-ui .d-sm-inline { display: inline !important; } .tp-ui .d-sm-inline-flex { display: inline-flex !important; } .tp-ui .d-sm-flex { display: flex !important; } .tp-ui .d-sm-block { display: block !important; } }
  @media (min-width: 768px) { .tp-ui .d-md-none { display: none !important; } .tp-ui .d-md-flex { display: flex !important; } .tp-ui .d-md-inline-flex { display: inline-flex !important; } .tp-ui .d-md-block { display: block !important; } .tp-ui .d-md-inline { display: inline !important; } }
  @media (min-width: 992px) { .tp-ui .d-lg-none { display: none !important; } .tp-ui .d-lg-flex { display: flex !important; } .tp-ui .d-lg-inline-flex { display: inline-flex !important; } .tp-ui .d-lg-block { display: block !important; } }
  .tp-ui .flex-wrap { flex-wrap: wrap !important; } .tp-ui .flex-nowrap { flex-wrap: nowrap !important; } .tp-ui .flex-column { flex-direction: column !important; } .tp-ui .flex-row { flex-direction: row !important; }
  .tp-ui .flex-grow-1 { flex-grow: 1 !important; } .tp-ui .flex-shrink-0 { flex-shrink: 0 !important; } .tp-ui .flex-fill { flex: 1 1 auto !important; }
  @media (min-width: 768px) { .tp-ui .flex-md-row { flex-direction: row !important; } .tp-ui .flex-md-nowrap { flex-wrap: nowrap !important; } }
  .tp-ui .justify-content-start { justify-content: flex-start !important; } .tp-ui .justify-content-end { justify-content: flex-end !important; }
  .tp-ui .justify-content-center { justify-content: center !important; } .tp-ui .justify-content-between { justify-content: space-between !important; } .tp-ui .justify-content-around { justify-content: space-around !important; }
  .tp-ui .align-items-start { align-items: flex-start !important; } .tp-ui .align-items-end { align-items: flex-end !important; } .tp-ui .align-items-center { align-items: center !important; }
  .tp-ui .align-items-baseline { align-items: baseline !important; } .tp-ui .align-items-stretch { align-items: stretch !important; }
  .tp-ui .align-self-start { align-self: flex-start !important; } .tp-ui .align-self-center { align-self: center !important; } .tp-ui .align-self-end { align-self: flex-end !important; }
  .tp-ui .gap-0 { gap: 0 !important; } .tp-ui .gap-1 { gap: 4px !important; } .tp-ui .gap-2 { gap: 8px !important; } .tp-ui .gap-3 { gap: 16px !important; } .tp-ui .gap-4 { gap: 24px !important; } .tp-ui .gap-5 { gap: 48px !important; }
  .tp-ui .vstack { display: flex; flex-direction: column; } .tp-ui .hstack { display: flex; align-items: center; }

  /* Abstände: 0 · 4 · 8 · 16 · 24 · 48 wie Bootstrap-Stufen, aber auf dem Token-Raster */
  .tp-ui .m-0 { margin: 0 !important; } .tp-ui .m-auto { margin: auto !important; }
  .tp-ui .mt-0 { margin-top: 0 !important; } .tp-ui .mt-1 { margin-top: 4px !important; } .tp-ui .mt-2 { margin-top: 8px !important; } .tp-ui .mt-3 { margin-top: 16px !important; } .tp-ui .mt-4 { margin-top: 24px !important; } .tp-ui .mt-5 { margin-top: 48px !important; } .tp-ui .mt-auto { margin-top: auto !important; }
  .tp-ui .mb-0 { margin-bottom: 0 !important; } .tp-ui .mb-1 { margin-bottom: 4px !important; } .tp-ui .mb-2 { margin-bottom: 8px !important; } .tp-ui .mb-3 { margin-bottom: 16px !important; } .tp-ui .mb-4 { margin-bottom: 24px !important; } .tp-ui .mb-5 { margin-bottom: 48px !important; }
  .tp-ui .ms-0 { margin-left: 0 !important; } .tp-ui .ms-1 { margin-left: 4px !important; } .tp-ui .ms-2 { margin-left: 8px !important; } .tp-ui .ms-3 { margin-left: 16px !important; } .tp-ui .ms-auto { margin-left: auto !important; }
  .tp-ui .me-0 { margin-right: 0 !important; } .tp-ui .me-1 { margin-right: 4px !important; } .tp-ui .me-2 { margin-right: 8px !important; } .tp-ui .me-3 { margin-right: 16px !important; } .tp-ui .me-auto { margin-right: auto !important; }
  .tp-ui .mx-1 { margin-inline: 4px !important; } .tp-ui .mx-2 { margin-inline: 8px !important; } .tp-ui .mx-auto { margin-inline: auto !important; }
  .tp-ui .my-0 { margin-block: 0 !important; } .tp-ui .my-1 { margin-block: 4px !important; } .tp-ui .my-2 { margin-block: 8px !important; } .tp-ui .my-3 { margin-block: 16px !important; } .tp-ui .my-4 { margin-block: 24px !important; } .tp-ui .my-5 { margin-block: 48px !important; }
  .tp-ui .p-0 { padding: 0 !important; } .tp-ui .p-1 { padding: 4px !important; } .tp-ui .p-2 { padding: 8px !important; } .tp-ui .p-3 { padding: 16px !important; } .tp-ui .p-4 { padding: 24px !important; } .tp-ui .p-5 { padding: 48px !important; }
  .tp-ui .px-0 { padding-inline: 0 !important; } .tp-ui .px-1 { padding-inline: 4px !important; } .tp-ui .px-2 { padding-inline: 8px !important; } .tp-ui .px-3 { padding-inline: 16px !important; } .tp-ui .px-4 { padding-inline: 24px !important; }
  .tp-ui .py-0 { padding-block: 0 !important; } .tp-ui .py-1 { padding-block: 4px !important; } .tp-ui .py-2 { padding-block: 8px !important; } .tp-ui .py-3 { padding-block: 16px !important; } .tp-ui .py-4 { padding-block: 24px !important; } .tp-ui .py-5 { padding-block: 48px !important; }
  .tp-ui .pt-0 { padding-top: 0 !important; } .tp-ui .pt-2 { padding-top: 8px !important; } .tp-ui .pt-3 { padding-top: 16px !important; } .tp-ui .pt-4 { padding-top: 24px !important; }
  .tp-ui .pb-0 { padding-bottom: 0 !important; } .tp-ui .pb-2 { padding-bottom: 8px !important; } .tp-ui .pb-3 { padding-bottom: 16px !important; } .tp-ui .pb-5 { padding-bottom: 48px !important; }
  .tp-ui .ps-2 { padding-left: 8px !important; } .tp-ui .ps-3 { padding-left: 16px !important; } .tp-ui .pe-2 { padding-right: 8px !important; }

  /* Text */
  .tp-ui .small, .tp-ui small { font-size: .875rem; }
  .tp-ui .lead { font-size: 1.15rem; line-height: 1.5; color: var(--muted); }
  .tp-ui .h1 { font: 700 clamp(2.4rem, 4.2vw, 4rem)/.98 var(--f-display); letter-spacing: -.04em; }
  .tp-ui .h2 { font: 700 clamp(1.6rem, 2.4vw, 2.2rem)/1.08 var(--f-display); letter-spacing: -.02em; }
  .tp-ui .h3 { font: 700 1.35rem/1.1 var(--f-display); } .tp-ui .h4 { font: 700 1.15rem/1.15 var(--f-display); letter-spacing: -.01em; }
  .tp-ui .h5 { font: 700 1rem/1.2 var(--f-display); } .tp-ui .h6 { font: 700 .92rem/1.2 var(--f-display); }
  .tp-ui .display-4, .tp-ui .display-5, .tp-ui .display-6 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
  .tp-ui .display-4 { font-size: 3.4rem; } .tp-ui .display-5 { font-size: 2.8rem; } .tp-ui .display-6 { font-size: 2.2rem; }
  .tp-ui .fw-normal { font-weight: 400 !important; } .tp-ui .fw-semibold, .tp-ui .fw-bold, .tp-ui .fw-bolder { font-weight: 700 !important; }
  .tp-ui .fs-1 { font-size: 2.4rem !important; } .tp-ui .fs-2 { font-size: 2rem !important; } .tp-ui .fs-3 { font-size: 1.6rem !important; } .tp-ui .fs-4 { font-size: 1.3rem !important; } .tp-ui .fs-5 { font-size: 1.1rem !important; } .tp-ui .fs-6 { font-size: 1rem !important; }
  .tp-ui .text-muted, .tp-ui .text-body-secondary, .tp-ui .text-secondary { color: var(--muted) !important; }
  .tp-ui .text-body { color: var(--ink) !important; } .tp-ui .text-white { color: #fff !important; }
  .tp-ui .text-primary { color: var(--primary) !important; } .tp-ui .text-success { color: var(--ok) !important; }
  .tp-ui .text-danger { color: var(--err) !important; } .tp-ui .text-warning { color: var(--warn) !important; } .tp-ui .text-info { color: var(--info) !important; }
  .tp-ui .text-center { text-align: center !important; } .tp-ui .text-end { text-align: right !important; } .tp-ui .text-start { text-align: left !important; }
  @media (min-width: 768px) { .tp-ui .text-md-end { text-align: right !important; } .tp-ui .text-md-start { text-align: left !important; } }
  .tp-ui .text-nowrap { white-space: nowrap !important; } .tp-ui .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tp-ui .text-decoration-none { text-decoration: none !important; } .tp-ui .text-uppercase { text-transform: uppercase !important; letter-spacing: .08em; }
  .tp-ui .text-break { overflow-wrap: anywhere !important; }
  .tp-ui .font-monospace { font-family: var(--f-data) !important; }

  /* Größe, Lage, Rahmen */
  .tp-ui .w-25 { width: 25% !important; } .tp-ui .w-50 { width: 50% !important; } .tp-ui .w-75 { width: 75% !important; } .tp-ui .w-100 { width: 100% !important; } .tp-ui .w-auto { width: auto !important; }
  .tp-ui .h-100 { height: 100% !important; } .tp-ui .mw-100 { max-width: 100% !important; } .tp-ui .min-vh-100 { min-height: 100vh !important; }
  .tp-ui .position-relative { position: relative !important; } .tp-ui .position-absolute { position: absolute !important; } .tp-ui .position-sticky { position: sticky !important; }
  .tp-ui .sticky-top { position: sticky; top: 0; z-index: 20; }
  .tp-ui .top-0 { top: 0 !important; } .tp-ui .end-0 { right: 0 !important; } .tp-ui .start-0 { left: 0 !important; } .tp-ui .bottom-0 { bottom: 0 !important; }
  .tp-ui .overflow-hidden { overflow: hidden !important; } .tp-ui .overflow-auto { overflow: auto !important; }
  .tp-ui .border { border: 1px solid var(--line) !important; } .tp-ui .border-top { border-top: 1px solid var(--line) !important; } .tp-ui .border-bottom { border-bottom: 1px solid var(--line) !important; } .tp-ui .border-0 { border: 0 !important; }
  .tp-ui .rounded, .tp-ui .rounded-2, .tp-ui .rounded-3 { border-radius: var(--r-ctl) !important; } .tp-ui .rounded-circle { border-radius: 50% !important; } .tp-ui .rounded-pill { border-radius: 999px !important; }
  .tp-ui .shadow, .tp-ui .shadow-sm { box-shadow: var(--shadow-1) !important; }
  .tp-ui .bg-light, .tp-ui .bg-body-tertiary, .tp-ui .bg-body-secondary { background: var(--surface) !important; }
  .tp-ui .bg-white, .tp-ui .bg-body { background: var(--elev) !important; }
  .tp-ui .opacity-50 { opacity: .5 !important; } .tp-ui .opacity-75 { opacity: .75 !important; }
  .tp-ui .img-fluid { max-width: 100%; height: auto; }
  .tp-ui .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
  .tp-ui .ratio { position: relative; width: 100%; } .tp-ui .ratio::before { content: ""; display: block; padding-top: 56.25%; }
  .tp-ui .ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; } .tp-ui .ratio-1x1::before { padding-top: 100%; } .tp-ui .ratio-4x3::before { padding-top: 75%; }

  /* Knöpfe – Formensprache der Bausteine (tp-btn), nicht Bootstrap */
  .tp-ui .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; text-decoration: none; white-space: nowrap;
    background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer;
    transition: background-color var(--t-schnell), box-shadow var(--t-schnell), transform var(--t-schnell), color var(--t-schnell);
  }
  .tp-ui .btn:hover { background: var(--surface); color: var(--ink); }
  .tp-ui .btn:active { transform: scale(.97); }
  .tp-ui .btn:disabled, .tp-ui .btn.disabled { opacity: .5; pointer-events: none; }
  .tp-ui .btn-sm { min-height: 36px; padding: 0 12px; font-size: .86rem; border-radius: 7px; }
  .tp-ui .btn-lg { min-height: 52px; padding: 0 24px; font-size: 1.02rem; }
  .tp-ui .btn-primary, .tp-ui .btn-success, .tp-ui .btn-dark { background: var(--primary); color: var(--on-primary); box-shadow: none; }
  .tp-ui .btn-primary:hover, .tp-ui .btn-success:hover, .tp-ui .btn-dark:hover { background: var(--primary-hover); color: var(--on-primary); }
  .tp-ui .btn-danger { background: var(--err); color: #fff; box-shadow: none; }
  .tp-ui .btn-outline-primary, .tp-ui .btn-outline-success { color: var(--primary); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 55%, transparent); }
  .tp-ui .btn-outline-primary:hover, .tp-ui .btn-outline-success:hover { background: var(--primary-soft); color: var(--primary); }
  .tp-ui .btn-outline-danger { color: var(--err); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--err) 50%, transparent); }
  .tp-ui .btn-outline-danger:hover { background: var(--err-soft); color: var(--err); }
  .tp-ui .btn-outline-secondary, .tp-ui .btn-outline-dark, .tp-ui .btn-outline-light, .tp-ui .btn-secondary, .tp-ui .btn-light { color: var(--ink); }
  .tp-ui .btn-link { box-shadow: none; color: var(--primary); padding-inline: 4px; min-height: 0; }
  .tp-ui .btn-link:hover { background: transparent; text-decoration: underline; }
  .tp-ui .btn-close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; position: relative; cursor: pointer; }
  .tp-ui .btn-close::before, .tp-ui .btn-close::after { content: ""; position: absolute; left: 9px; right: 9px; top: 15px; height: 2px; background: var(--ink); transform: rotate(45deg); }
  .tp-ui .btn-close::after { transform: rotate(-45deg); }
  .tp-ui .btn-group { display: inline-flex; box-shadow: inset 0 0 0 1px var(--line); border-radius: 10px; padding: 3px; background: var(--surface); gap: 2px; }
  .tp-ui .btn-group > .btn { box-shadow: none; border-radius: 7px; min-height: 36px; font-size: .88rem; color: var(--muted); }
  .tp-ui .btn-group > .btn.active, .tp-ui .btn-group > .btn-check:checked + .btn, .tp-ui .btn-group > .btn-primary { background: var(--elev); color: var(--ink); box-shadow: var(--shadow-1); }
  .tp-ui .btn-group > .btn-primary:hover { background: var(--elev); color: var(--ink); }
  .tp-ui .btn-check { position: absolute; opacity: 0; pointer-events: none; }

  /* Karten: im Feldbuch eine ruhige Fläche mit Haarlinie, ohne Schatten */
  .tp-ui .card { background: var(--elev); border: 1px solid var(--line-soft); border-radius: 14px; color: var(--ink); min-width: 0; display: flex; flex-direction: column; box-shadow: none; }
  .tp-ui .card-body { padding: var(--s-lg); flex: 1 1 auto; }
  .tp-ui .card.card-body { padding: var(--s-lg); }
  .tp-ui .card-header { padding: 12px var(--s-lg); border-bottom: 1px solid var(--line-soft); background: transparent; font-weight: 700; }
  .tp-ui .card-footer { padding: 12px var(--s-lg); border-top: 1px solid var(--line-soft); }
  .tp-ui .card-title { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; margin-bottom: 6px; }
  .tp-ui .card-text { color: var(--muted); }
  .tp-ui .card-img-top { border-radius: 13px 13px 0 0; display: block; width: 100%; object-fit: cover; }

  /* Formulare */
  .tp-ui .form-label { display: block; font-size: .84rem; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
  .tp-ui .form-text { font-size: .8rem; color: var(--muted); margin-top: 4px; }
  .tp-ui .form-control, .tp-ui .form-select {
    display: block; 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-ui .form-control::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
  .tp-ui .form-control:focus, .tp-ui .form-select:focus { outline: none; border-bottom-color: var(--primary); background: var(--elev); box-shadow: none; }
  .tp-ui .form-control-sm, .tp-ui .form-select-sm { min-height: 36px; padding: 6px 10px; font-size: .9rem; }
  .tp-ui .form-control[type="file"] { padding: 8px; }
  .tp-ui textarea.form-control { min-height: 88px; resize: vertical; }
  .tp-ui .form-select { 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-ui .form-check { display: flex; align-items: center; gap: 10px; min-height: 32px; }
  .tp-ui .form-check-input { width: 20px; height: 20px; accent-color: var(--primary); margin: 0; flex: none; }
  .tp-ui .form-switch .form-check-input { width: 36px; }
  .tp-ui .form-check-label { font-size: .95rem; }
  .tp-ui .form-range { width: 100%; accent-color: var(--primary); }
  .tp-ui .input-group { display: flex; align-items: stretch; }
  .tp-ui .input-group > .form-control { flex: 1 1 auto; min-width: 0; }
  .tp-ui .input-group-text { display: flex; align-items: center; padding: 0 12px; background: var(--surface); border-bottom: 2px solid var(--line); color: var(--muted); font-size: .9rem; }
  .tp-ui .was-validated .form-control:invalid, .tp-ui .form-control.is-invalid { border-bottom-color: var(--err); }
  .tp-ui .invalid-feedback { color: var(--err); font-size: .82rem; }

  /* Hinweise: linke Signalkante statt farbiger Kasten */
  .tp-ui .alert { position: relative; padding: 12px 16px 12px 18px; margin-bottom: var(--s-md); border: 0; border-radius: 10px;
    background: var(--surface); color: var(--ink); box-shadow: inset 4px 0 0 var(--muted); font-size: .94rem; }
  .tp-ui .alert-success { background: var(--ok-soft); box-shadow: inset 4px 0 0 var(--ok); }
  .tp-ui .alert-warning { background: var(--warn-soft); box-shadow: inset 4px 0 0 var(--warn); }
  .tp-ui .alert-danger { background: var(--err-soft); box-shadow: inset 4px 0 0 var(--err); }
  .tp-ui .alert-info, .tp-ui .alert-primary { background: var(--info-soft); box-shadow: inset 4px 0 0 var(--info); }
  .tp-ui .alert-secondary, .tp-ui .alert-light { background: var(--surface); }
  .tp-ui .alert-link { font-weight: 700; color: inherit; }

  /* Abzeichen */
  .tp-ui .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; line-height: 1.3;
    background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); vertical-align: .1em; }
  .tp-ui .bg-primary, .tp-ui .text-bg-primary { background: var(--primary) !important; color: var(--on-primary) !important; box-shadow: none; }
  .tp-ui .bg-success, .tp-ui .text-bg-success { background: var(--ok-soft) !important; color: var(--ok) !important; box-shadow: none; }
  .tp-ui .bg-danger, .tp-ui .text-bg-danger { background: var(--err-soft) !important; color: var(--err) !important; box-shadow: none; }
  .tp-ui .bg-warning, .tp-ui .text-bg-warning { background: var(--warn-soft) !important; color: var(--warn) !important; box-shadow: none; }
  .tp-ui .bg-info, .tp-ui .text-bg-info { background: var(--info-soft) !important; color: var(--info) !important; box-shadow: none; }
  .tp-ui .bg-secondary, .tp-ui .text-bg-secondary, .tp-ui .text-bg-light, .tp-ui .bg-dark { background: var(--surface) !important; color: var(--muted) !important; }
  .tp-ui .text-dark { color: var(--ink) !important; }

  /* Listen & Tabellen */
  .tp-ui .list-group { display: flex; flex-direction: column; padding: 0; margin: 0; border-top: 1px solid var(--line-soft); }
  .tp-ui .list-group-item { display: block; padding: 12px 4px; border-bottom: 1px solid var(--line-soft); color: var(--ink); background: transparent; text-decoration: none; }
  .tp-ui .list-group-item-action:hover { background: var(--surface); }
  .tp-ui .list-group-flush { border-top: 0; }
  .tp-ui .list-unstyled { list-style: none; padding-left: 0; }
  .tp-ui .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tp-ui .table { width: 100%; border-collapse: collapse; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: var(--s-md); }
  .tp-ui .table > :where(thead) th { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); border-bottom: 1px solid var(--line); text-align: left; }
  .tp-ui .table :where(th, td) { padding: 12px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
  .tp-ui .table-sm :where(th, td) { padding: 7px 8px; }
  .tp-ui .table.align-middle :where(td, th), .tp-ui .align-middle { vertical-align: middle; }
  .tp-ui .table-hover tbody tr:hover { background: var(--surface); }
  .tp-ui .table-striped tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--surface) 70%, transparent); }
  .tp-ui .table-warning { background: var(--warn-soft); }

  /* Aufklappen & Menüs (Verhalten: tp.js, falls kein Bootstrap-JS geladen ist) */
  .tp-ui .collapse:not(.show) { display: none; }
  .tp-ui .collapsing { height: 0; overflow: hidden; transition: height var(--t-blatt) var(--kurve); }
  .tp-ui .dropdown { position: relative; }
  .tp-ui .dropdown-menu { display: none; position: absolute; z-index: 60; top: 100%; left: 0; min-width: 12rem; margin-top: 6px; padding: 6px;
    background: var(--elev); color: var(--ink); border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: var(--shadow-2); }
  .tp-ui .dropdown-menu.show { display: block; }
  .tp-ui .dropdown-menu-end { left: auto; right: 0; }
  .tp-ui .dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-align: left; text-decoration: none; }
  .tp-ui .dropdown-item:hover { background: var(--surface); }
  .tp-ui .dropdown-divider { height: 1px; background: var(--line-soft); margin: 6px 0; border: 0; }

  /* Reiter */
  .tp-ui .nav { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
  .tp-ui .nav-tabs, .tp-ui .nav-pills { gap: 20px; border-bottom: 1px solid var(--line); }
  .tp-ui .nav-link { display: block; padding: 10px 0; color: var(--muted); text-decoration: none; font-weight: 700; border: 0; background: none; }
  .tp-ui .nav-link.active, .tp-ui .nav-link:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--primary); }

  /* Fortschritt & Warten */
  .tp-ui .progress { display: flex; height: 10px; overflow: hidden; background: var(--surface); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-soft); }
  .tp-ui .progress-bar { 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-ui .spinner-border { 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-ui .spinner-border-sm { width: 1rem; height: 1rem; border-width: 2px; }
  .tp-ui .placeholder { display: inline-block; min-height: 1em; background: var(--line-soft); border-radius: 4px; }
  @keyframes tp-dreh { to { transform: rotate(360deg); } }

  /* Modal (einzelne Ansichten) */
  .tp-ui .modal { position: fixed; inset: 0; z-index: 1050; display: none; overflow: auto; background: color-mix(in srgb, #000 45%, transparent); }
  .tp-ui .modal.show { display: block; }
  .tp-ui .modal-dialog { max-width: 560px; margin: 8vh auto; padding: 0 16px; }
  .tp-ui .modal-content { background: var(--elev); border-radius: var(--r-blatt); box-shadow: var(--shadow-2); }
  .tp-ui .modal-header, .tp-ui .modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
  .tp-ui .modal-body { padding: 0 20px 16px; }
  .tp-ui .accordion-item { border-bottom: 1px solid var(--line-soft); }
  .tp-ui .accordion-button { width: 100%; text-align: left; padding: 14px 0; border: 0; background: none; font-weight: 700; color: var(--ink); }
}

/* ======================================================================== */
@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; }
  .tp-ui-schalter { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: .78rem; color: var(--rail-muted); background: color-mix(in srgb, var(--sun) 16%, transparent); }
  .tp-ui-schalter button { margin-left: auto; border: 0; background: none; color: var(--rail-ink); font-weight: 700; font-size: .78rem; cursor: pointer; text-decoration: underline; padding: 0; }

  /* 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, .tp-ui-schalter) { 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); }

  .tp-fuss { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: var(--s-lg) clamp(16px, 3.4vw, 56px) var(--s-xl); color: var(--muted); font-size: .84rem; border-top: 1px solid var(--line-soft); }
  .tp-fuss a { color: var(--muted); text-decoration: none; }
  .tp-fuss a:hover { color: var(--ink); }
  .tp-fuss-recht { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
  @media (max-width: 640px) { .tp-fuss-recht { margin-left: 0; flex-basis: 100%; } }
  .tp-fuss-ui { margin: 0; }
  .tp-fuss-ui button { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer; }
  @media (min-width: 900px) { .tp-fuss-ui { display: none; } }

  /* 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-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; }
  .rs-foto-bearb[open] { position: absolute; z-index: 20; left: 0; top: 0; width: min(360px, 88vw); padding: 14px; border-radius: 14px; background: var(--elev); box-shadow: var(--shadow-2); }
  .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 .form-select, .rs-seite .pt-bulkbar .form-control { 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; }
  .rs-seite .card { background: transparent; border: 0; border-radius: 0; }
  .rs-seite .card.card-body, .rs-seite .card-body { padding: 0; }
  .rs-seite section.card { padding: var(--s-lg) 0 !important; border-top: 1px solid var(--line-soft) !important; margin: 0 !important; }
  .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 { align-items: center; 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; }
  @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); }
  .rl:has(.ub-leer) .rl-neu-feld { position: static; margin-top: 10px; width: min(100%, 640px); }
  .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; }
  .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; }

  /* 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; } }
}

/* ---- 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; }