/* TDP – Track of the Day Portal */

/* ══════════════════════════════════════════════════════════════
   Design tokens
   ══════════════════════════════════════════════════════════════ */
:root {
    /* Brand / accent – TD orange (#FF8C00 = WPF "Orange") */
    --tdp-accent:  #ff8c00;
    --tdp-accent2: #cf6a00;

    /* Navbar & page chrome */
    --tdp-dark:    #111111;
    --tdp-mid:     #1a1a1a;
    --tdp-light:   #0f3460;
    --tdp-text:    #d8d8d8;
    --tdp-muted:   #888888;

    /* ── Dark sidebar palette (neutral grays, no blue tint) ── */
    --sb-bg:       #1e1e1e;   /* main sidebar background          */
    --sb-bg2:      #272727;   /* inputs, cards, elevated surfaces */
    --sb-bg3:      #141414;   /* tab bar, deepest surfaces        */
    --sb-border:   #383838;   /* dividers, input borders          */
    --sb-text:     #d0d0d0;   /* primary text                     */
    --sb-muted:    #787878;   /* labels, section titles           */
    --sb-dim:      #505050;   /* placeholder, disabled            */
}

/* ══════════════════════════════════════════════════════════════
   Global reset
   ══════════════════════════════════════════════════════════════ */
html {
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: #f4f6f8; /* canvas fallback for light pages */
}
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f4f6f8;
    color: #333;
}

/* ══════════════════════════════════════════════════════════════
   Navbar
   ══════════════════════════════════════════════════════════════ */
.tdp-navbar {
    background: var(--tdp-dark);
    border-bottom: 2px solid var(--tdp-accent);
    padding: .5rem 1rem;
}
.tdp-navbar .nav-link       { color: var(--tdp-text) !important; font-size: .9rem; transition: color .15s; }
.tdp-navbar .nav-link:hover { color: var(--tdp-accent) !important; }

/* Navigationsleiste: UMBRECHEN statt ueberlaufen (2026-08-22).
   navbar-expand-lg schaltet ab 992px auf die waagerechte Leiste, aber die Eintraege eines
   angemeldeten Nutzers (Routenplaner … Hilfe plus Theme/Sprache/Cookie/Name/Abmelden)
   brauchen rund 1400px. Bootstraps .navbar-nav steht auf flex-wrap: nowrap — dazwischen
   wurde die Leiste breiter als das Fenster, und damit bekam die GANZE Seite einen
   waagerechten Scrollbalken: Inhalt nach links verschoben, Marke und erste Tabellenspalte
   angeschnitten. Betraf JEDE Seite, nicht nur den Preset-Editor.
   min-width: 0 braucht es an BEIDEN Stellen (Huelle UND Liste): ein Flex-Kind steht per
   Vorgabe auf min-width: auto und schrumpft nie unter seine Inhaltsbreite — sonst bliebe die
   Liste zu breit und wuerde nur abgeschnitten statt umgebrochen.
   BEWUSST OHNE Medienabfrage: die Leiste bleibt hier auch unterhalb von 992px waagerecht
   (der Umschaltpunkt greift durch eigenes CSS nicht), eine @media-Klammer haette die Regel
   genau dort ausgeschaltet, wo der Platz am knappsten ist. In der eingeklappten Ansicht
   (Spaltenrichtung, unbegrenzte Hoehe) sind beide Angaben wirkungslos. */
.tdp-navbar .navbar-collapse { min-width: 0; }
.tdp-navbar .navbar-nav      { flex-wrap: wrap; row-gap: .15rem; min-width: 0; }

.tdp-brand {
    color: var(--tdp-text) !important;
    font-size: 1.3rem; font-weight: 700; letter-spacing: 1px;
    text-decoration: none; display: flex; align-items: center; gap: .4rem;
}
.tdp-logo-icon  { color: var(--tdp-accent); font-size: 1.5rem; }
.tdp-brand-sub  { font-size: .95rem; color: var(--tdp-accent); font-weight: 600; letter-spacing: .5px; margin-left: .3rem; }
.tdp-username   { color: var(--tdp-muted) !important; font-size: .85rem; }

/* Hamburger toggler — visible on dark background */
.tdp-toggler {
    border-color: #555 !important;
    padding: .3rem .5rem;
}
.tdp-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.tdp-toggler:focus { box-shadow: 0 0 0 2px var(--tdp-accent) !important; }

/* Collapsed menu on small screens */
@media (max-width: 991.98px) {
    #tdpNavCollapse {
        background: var(--tdp-dark);
        border-top: 1px solid #2a2a2a;
        padding: .5rem 0;
    }
    #tdpNavCollapse .nav-link {
        padding: .5rem 1rem !important;
        border-bottom: 1px solid #1a1a1a;
    }
    #tdpNavCollapse .navbar-nav:last-child .nav-link:last-child { border-bottom: none; }
    #tdpNavCollapse .tdp-lang-dropdown { padding: .25rem 1rem; }
}

/* ══════════════════════════════════════════════════════════════
   Login
   ══════════════════════════════════════════════════════════════ */
.tdp-login-wrap {
    min-height: calc(100vh - 60px);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--tdp-dark) 0%, var(--tdp-mid) 50%, var(--tdp-light) 100%);
}
.tdp-login-card {
    background: #fff; border-radius: 12px; padding: 2.5rem 2rem;
    width: 100%; max-width: 400px; box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.tdp-login-card h2                { color: var(--tdp-dark); margin-bottom: 1.5rem; font-weight: 700; }
.tdp-login-card .btn-primary      { background: var(--tdp-accent); border-color: var(--tdp-accent); }
.tdp-login-card .btn-primary:hover{ background: var(--tdp-accent2); border-color: var(--tdp-accent2); }

/* ══════════════════════════════════════════════════════════════
   Cookie banner
   ══════════════════════════════════════════════════════════════ */
.tdp-cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0;
    /* 21.10.2026: eigene Farben statt --tdp-text — das helle Schema setzt --tdp-text dunkel, der Grund
       (--tdp-dark) blieb dunkel → dunkle Schrift auf dunklem Grund. Hell: heller Grund, dunkle Schrift. */
    background: #111111; color: #e6e6e6;
    border-top: 2px solid var(--tdp-accent); z-index: 9999; padding: .6rem 1.2rem;
}
[data-theme="light"] .tdp-cookie-banner {
    background: #ffffff; color: #1a1a1a;
    box-shadow: 0 -2px 10px rgba(0,0,0,.12);
}
.tdp-cookie-banner a { color: #ffb347; }
[data-theme="light"] .tdp-cookie-banner a { color: #a85400; }
.tdp-cookie-inner { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .85rem; }
.btn-tdp-sm {
    background: var(--tdp-accent); color: #fff; border: none; border-radius: 5px;
    padding: .3rem .8rem; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.btn-tdp-sm:hover { background: var(--tdp-accent2); }

/* ── Logo image ── */
.tdp-logo-img  { height: 30px; width: 30px; object-fit: contain; border-radius: 3px; flex-shrink: 0; }
.tdp-brand-name{ font-size: 1.25rem; font-weight: 700; color: var(--tdp-text); letter-spacing: 1px; }

/* ══════════════════════════════════════════════════════════════
   General page layout (non-planner pages)
   ══════════════════════════════════════════════════════════════ */
.tdp-page       { padding: 1.5rem; max-width: 1100px; margin: 0 auto; }
.tdp-page-title { color: var(--tdp-dark); font-weight: 700; margin-bottom: 1.2rem; }
.dark-body .tdp-page-title { color: #d8d8d8; }
.dark-body .tdp-page-title small { color: #686868; }

/* ══════════════════════════════════════════════════════════════
   Dark content pages (Community, Tracks, Routes, AiRoute)
   ══════════════════════════════════════════════════════════════ */
.dark-body { background: #1a1a1a !important; color: #d0d0d0; min-height: 100vh; color-scheme: dark; }
/* Weisser Streifen am Seitenende (User-Befund 05.08.): der html-Canvas hinter dem body
   und die UA-Scrollleisten blieben hell. html folgt jetzt dem dunklen Body, Scrollbars
   rendern per color-scheme dunkel; Light-Theme kehrt beides um. */
html:has(body.dark-body) { background: #1a1a1a; }
html[data-theme="light"]:has(body.dark-body) { background: #f0f2f5; }
[data-theme="light"] .dark-body { color-scheme: light; }

/* Explicit background so scrolled content beyond the viewport stays dark */
.tdp-dark-page { min-height: calc(100vh - 56px); padding: 1.5rem; background: #1a1a1a; }
.tdp-dark-inner { max-width: 1200px; margin: 0 auto; }

.tdp-dark-page .tdp-page-title {
    color: #e0e0e0; font-size: 1.4rem; font-weight: 700;
    margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem;
}
.tdp-dark-page .tdp-page-title small { color: #686868; font-size: .83rem; font-weight: 400; }

/* Search card */
.tdp-dark-search {
    background: #222; border: 1px solid #363636;
    border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1.2rem;
}
.tdp-dark-search .form-control,
.tdp-dark-search .form-select {
    background: #1a1a1a; border-color: #404040; color: #d0d0d0; font-size: .85rem;
}
.tdp-dark-search .form-control:focus,
.tdp-dark-search .form-select:focus {
    background: #1e1e1e; border-color: var(--tdp-accent);
    color: #d0d0d0; box-shadow: 0 0 0 .18rem rgba(255,140,0,.2);
}
.tdp-dark-search .form-control::placeholder { color: #505050; }
.tdp-dark-search label { color: #888; font-size: .78rem; font-weight: 600; margin-bottom: .2rem; display: block; }
.tdp-dark-search .form-check-label { color: #a0a0a0; font-size: .82rem; }
.tdp-dark-search .form-check-input { background-color: #1a1a1a; border-color: #505050; }
.tdp-dark-search .form-check-input:checked { background-color: var(--tdp-accent); border-color: var(--tdp-accent); }

/* Section sub-heading */
.tdp-dark-sub {
    font-size: .9rem; font-weight: 700; color: var(--tdp-accent);
    margin: 1.2rem 0 .55rem; padding-bottom: .4rem;
    border-bottom: 1px solid #363636;
}

/* Dark table */
.tdp-dark-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tdp-dark-table th {
    background: #141414; color: #c8c8c8;
    padding: .65rem .8rem; font-weight: 600;
    font-size: .74rem; text-transform: uppercase; letter-spacing: .6px;
    border-bottom: 2px solid var(--tdp-accent);
    white-space: nowrap; user-select: none;
}
.tdp-dark-table th.sortable        { cursor: pointer; transition: color .12s; }
.tdp-dark-table th.sortable:hover  { color: var(--tdp-accent); }
.tdp-dark-table th.sort-active     { color: var(--tdp-accent); }
.sort-ind { font-size: .8em; margin-left: .25rem; opacity: .7; }
.tdp-dark-table td {
    padding: .6rem .8rem; border-bottom: 1px solid #282828;
    vertical-align: middle; color: #c0c0c0;
}
.tdp-dark-table tbody tr:hover td { background: #222; }
.tdp-dark-table strong { color: #e0e0e0; }
.tdp-dark-table .tdp-desc { color: #787878; font-size: .76rem; }

/* Larger action icon buttons */
.btn-icon {
    background: none; border: none; cursor: pointer;
    padding: .3rem .4rem; border-radius: 6px;
    font-size: 1.35rem; transition: background .12s; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon:hover        { background: #2e2e2e; }
.btn-icon-danger:hover { background: #2a1000 !important; }

/* Dark edit row */
.tdp-dark-table .tdp-edit-row td { background: #1c2618 !important; }
.tdp-dark-table .tdp-edit-row .form-control {
    background: #141414; border-color: #404040; color: #d0d0d0; font-size: .82rem;
}
.tdp-dark-table .tdp-edit-row label { color: #787878; }

/* Dark badges */
.tdp-dark-page .badge-track   { background: #142030; color: #70b8e8; }
.tdp-dark-page .badge-route   { background: #251800; color: var(--tdp-accent); }
.tdp-dark-page .badge-public  { background: #152015; color: #60b870; }
.tdp-dark-page .badge-private { background: #252000; color: #c8a800; }

/* Data rows are double-clickable → show pointer on non-action cells */
.tdp-dark-table tbody tr[id^="row-"] { cursor: pointer; }
.tdp-dark-table tbody tr[id^="row-"] td:last-child { cursor: default; }

/* ── Split layout (Tracks / Routes / Community) ─────────────────────────── */
.tdp-split-outer {
    display: flex;
    height: calc(100vh - 57px);
    overflow: hidden;
    background: var(--sb-bg);
}
.tdp-split-list {
    width: 46%;
    min-width: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid #2a2a2a;
    padding: 1rem 1.2rem;
    flex-shrink: 0;

    /* Die Liste ist per Ziehgriff frei breit — nicht die Fensterbreite entscheidet
       ueber das Layout, sondern die Breite der Liste selbst. */
    container-type: inline-size;
    container-name: tdplist;
}
/* ── Split-list table: Name + Actions immer sichtbar ──────────────────── */
.tdp-split-list .table-responsive { overflow-x: hidden; padding-right: 10px; }

/* Desktop (≥ 768px): table-layout: fixed → Name bekommt den Rest, Actions immer sichtbar */
@media (min-width: 768px) {
    /* table-layout: auto — NICHT fixed: bei fixed ignoriert der Browser das
       min-width der Namensspalte, sie fiel dadurch auf 0 zusammen. Die festen
       Spalten schrumpfen per width:1% + nowrap auf ihren Inhalt (Datum und
       Dauer damit immer vollständig), der Name bekommt den Rest. */
    .tdp-split-list .tdp-dark-table { width: 100%; table-layout: auto; }
    .tdp-split-list .tdp-dark-table th.tdp-col-actions,
    .tdp-split-list .tdp-dark-table th.tdp-col-xs-hide,
    .tdp-split-list .tdp-dark-table th.tdp-col-xxs-hide,
    .tdp-split-list .tdp-dark-table th.tdp-col-sm-hide,
    .tdp-split-list .tdp-dark-table th.tdp-col-narrow-hide,
    .tdp-split-list .tdp-dark-table th.tdp-col-user { width: 1%; white-space: nowrap; }
    /* Name: mindestens 16 Zeichen, nie Buchstabe für Buchstabe umbrechen,
       sondern einzeilig mit Auslassungspunkten */
    /* Namensspalte: first-child (Community) ODER die Zelle hinter der
       Check-Spalte (Tracks/Routes mit Mehrfach-Loeschen) */
    .tdp-split-list .tdp-dark-table th:first-child:not(.tdp-col-check),
    .tdp-split-list .tdp-dark-table th.tdp-col-check + th { width: 100%; }
    .tdp-split-list .tdp-dark-table th:first-child:not(.tdp-col-check),
    .tdp-split-list .tdp-dark-table td:first-child:not(.tdp-col-check),
    .tdp-split-list .tdp-dark-table th.tdp-col-check + th,
    .tdp-split-list .tdp-dark-table td.tdp-col-check + td {
        max-width: 0; min-width: 16ch;
        white-space: nowrap; word-break: normal;
        overflow: hidden; text-overflow: ellipsis;
    }
    .tdp-split-list .tdp-dark-table td:first-child strong,
    .tdp-split-list .tdp-dark-table td:first-child .tdp-desc,
    .tdp-split-list .tdp-dark-table td.tdp-col-check + td strong,
    .tdp-split-list .tdp-dark-table td.tdp-col-check + td .tdp-desc {
        display: block; white-space: nowrap; word-break: normal;
        overflow: hidden; text-overflow: ellipsis;
    }
    .tdp-split-list .tdp-dark-table th:not(:first-child),
    .tdp-split-list .tdp-dark-table td:not(:first-child) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tdp-split-list .tdp-dark-table td.tdp-col-actions { overflow: visible; padding-left: 4px; padding-right: 4px; text-overflow: clip; }
}
/* ≤ 767px: Flex-Layout für Datenzeilen — Name links, Buttons rechts, garantiert sichtbar */
@media (max-width: 767px) {
    /* Tabelle und tbody als Block */
    .tdp-split-list .tdp-dark-table,
    .tdp-split-list .tdp-dark-table tbody { display: block !important; width: 100%; }
    .tdp-split-list .tdp-dark-table thead { display: none !important; }

    /* Datenzeilen als Flex-Container (Tracks/Routes rows + Community rows) */
    .tdp-split-list .tdp-dark-table tr[id^="row-"],
    .tdp-split-list .tdp-dark-table tr[data-item-id] {
        display: flex !important;
        align-items: center;
        width: 100%;
        min-height: 2.8rem;
        padding: .4rem 0;
        border: none !important;
        border-bottom: 1px solid var(--sb-border) !important;
        box-sizing: border-box;
        cursor: pointer;
        background: transparent;
    }
    /* Alle td-Borders entfernen */
    .tdp-split-list .tdp-dark-table tr[id^="row-"] > td,
    .tdp-split-list .tdp-dark-table tr[data-item-id] > td {
        display: none !important;
        border: none !important;
        padding: 0 !important;
    }
    /* Name: flex-grow, Beschreibung einzeilig */
    .tdp-split-list .tdp-dark-table tr[id^="row-"] > td.tdp-col-check,
    .tdp-split-list .tdp-dark-table tr[data-item-id] > td.tdp-col-check {
        display: flex !important;
        flex: 0 0 auto;
        width: auto;   /* nicht der 1%-Trick der Tabelle: die Zelle waere schmaler als das Kaestchen */
        align-items: center;
        padding: 0 .55rem 0 .15rem !important;
        border: none !important;
    }
    .tdp-split-list .tdp-dark-table tr[id^="row-"] > td:first-child:not(.tdp-col-check),
    .tdp-split-list .tdp-dark-table tr[data-item-id] > td:first-child:not(.tdp-col-check),
    .tdp-split-list .tdp-dark-table tr[id^="row-"] > td.tdp-col-check + td,
    .tdp-split-list .tdp-dark-table tr[data-item-id] > td.tdp-col-check + td {
        display: block !important;
        flex: 1 1 0;
        min-width: 0;
        padding-right: .5rem !important;
        border: none !important;
    }
    .tdp-split-list .tdp-dark-table tr[id^="row-"] > td:first-child .tdp-desc,
    .tdp-split-list .tdp-dark-table tr[data-item-id] > td:first-child .tdp-desc,
    .tdp-split-list .tdp-dark-table tr[id^="row-"] > td.tdp-col-check + td .tdp-desc,
    .tdp-split-list .tdp-dark-table tr[data-item-id] > td.tdp-col-check + td .tdp-desc {
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    /* Aktionen: immer sichtbar, zentriert — reicht der Platz neben dem Namen nicht, rutschen
       sie rechtsbuendig in eine zweite Zeile und brechen dort selbst um (siehe @container) */
    .tdp-split-list .tdp-dark-table tr[id^="row-"],
    .tdp-split-list .tdp-dark-table tr[data-item-id] { flex-wrap: wrap; }
    .tdp-split-list .tdp-dark-table tr[id^="row-"] > td.tdp-col-actions,
    .tdp-split-list .tdp-dark-table tr[data-item-id] > td.tdp-col-actions {
        display: flex !important;
        flex-shrink: 0;
        align-items: center;
        white-space: nowrap;
        border: none !important;
        padding: 0 !important;
        flex-wrap: wrap; justify-content: flex-end;
        margin-left: auto; max-width: 100%;
    }
    /* Hover */
    .tdp-split-list .tdp-dark-table tr[id^="row-"]:hover,
    .tdp-split-list .tdp-dark-table tr[data-item-id]:hover { background: #1e1e1e !important; }
    [data-theme="light"] .tdp-split-list .tdp-dark-table tr[id^="row-"]:hover,
    [data-theme="light"] .tdp-split-list .tdp-dark-table tr[data-item-id]:hover { background: #f0f4f8 !important; }
    /* Community Use-Button: auf Mobile nur Icon zeigen */
    .tdp-use-label { display: none; }
    .tdp-use-icon  { display: inline; font-size: .9rem; }
    .tdp-use-btn   { padding: .25rem .5rem !important; min-width: 28px; }
}
/* ── Schmale Liste (unabhängig von der Fensterbreite) ─────────────────────
   Sobald die Liste zu schmal für die Tabellenspalten wird, wird jede Zeile zu
   einer Flex-Zeile: links der Name (mindestens 16 Zeichen), rechts die Buttons.
   Die Spalten Datum/Distanz/Dauer/Sichtbarkeit weichen — sie sind rekonstruier-
   bar, die Aktionen nicht. Ohne das schoben die festen Spaltenbreiten die
   Buttons aus dem sichtbaren Bereich. */
@container tdplist (max-width: 430px) {
    .tdp-split-list .tdp-dark-table,
    .tdp-split-list .tdp-dark-table tbody { display: block !important; width: 100%; }
    .tdp-split-list .tdp-dark-table thead { display: none !important; }

    .tdp-split-list .tdp-dark-table tr[id^="row-"],
    .tdp-split-list .tdp-dark-table tr[data-item-id] {
        display: flex !important;
        align-items: center;
        width: 100%;
        min-height: 2.8rem;
        padding: .4rem 0;
        border: none !important;
        border-bottom: 1px solid var(--sb-border) !important;
        box-sizing: border-box;
        cursor: pointer;
        background: transparent;
    }
    .tdp-split-list .tdp-dark-table tr[id^="row-"] > td,
    .tdp-split-list .tdp-dark-table tr[data-item-id] > td {
        display: none !important;
        border: none !important;
        padding: 0 !important;
    }
    /* Name: nimmt den Rest, zeigt aber immer mindestens 16 Zeichen */
    .tdp-split-list .tdp-dark-table tr[id^="row-"] > td.tdp-col-check,
    .tdp-split-list .tdp-dark-table tr[data-item-id] > td.tdp-col-check {
        display: flex !important;
        flex: 0 0 auto;
        width: auto;   /* nicht der 1%-Trick der Tabelle: das Kaestchen ragte sonst in den Namen */
        align-items: center;
        padding: 0 .55rem 0 .15rem !important;
        border: none !important;
    }
    .tdp-split-list .tdp-dark-table tr[id^="row-"] > td:first-child:not(.tdp-col-check),
    .tdp-split-list .tdp-dark-table tr[data-item-id] > td:first-child:not(.tdp-col-check),
    .tdp-split-list .tdp-dark-table tr[id^="row-"] > td.tdp-col-check + td,
    .tdp-split-list .tdp-dark-table tr[data-item-id] > td.tdp-col-check + td {
        display: block !important;
        flex: 1 1 16ch;
        min-width: 16ch;
        overflow: hidden;
        padding-right: .5rem !important;
        border: none !important;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .tdp-split-list .tdp-dark-table tr[id^="row-"] > td:first-child strong,
    .tdp-split-list .tdp-dark-table tr[data-item-id] > td:first-child strong,
    .tdp-split-list .tdp-dark-table tr[id^="row-"] > td:first-child .tdp-desc,
    .tdp-split-list .tdp-dark-table tr[data-item-id] > td:first-child .tdp-desc,
    .tdp-split-list .tdp-dark-table tr[id^="row-"] > td.tdp-col-check + td strong,
    .tdp-split-list .tdp-dark-table tr[data-item-id] > td.tdp-col-check + td strong,
    .tdp-split-list .tdp-dark-table tr[id^="row-"] > td.tdp-col-check + td .tdp-desc,
    .tdp-split-list .tdp-dark-table tr[data-item-id] > td.tdp-col-check + td .tdp-desc {
        display: block;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        word-break: normal;
    }
    /* Aktionen: bleiben immer sichtbar. Passen sie nicht mehr neben die 16 Zeichen des
       Namens, rutschen sie rechtsbuendig in eine zweite Zeile und brechen dort selbst um.
       Vorher schnitt der Listenrand die letzten Knoepfe ab — Loeschen war unerreichbar
       (28.10.2026). */
    .tdp-split-list .tdp-dark-table tr[id^="row-"],
    .tdp-split-list .tdp-dark-table tr[data-item-id] { flex-wrap: wrap; }
    .tdp-split-list .tdp-dark-table tr[id^="row-"] > td.tdp-col-actions,
    .tdp-split-list .tdp-dark-table tr[data-item-id] > td.tdp-col-actions {
        display: flex !important;
        flex-shrink: 0;
        align-items: center;
        white-space: nowrap;
        border: none !important;
        padding: 0 !important;
        flex-wrap: wrap; justify-content: flex-end;
        margin-left: auto; max-width: 100%;
    }
    .tdp-split-list .tdp-dark-table tr[id^="row-"]:hover,
    .tdp-split-list .tdp-dark-table tr[data-item-id]:hover { background: #1e1e1e !important; }
    [data-theme="light"] .tdp-split-list .tdp-dark-table tr[id^="row-"]:hover,
    [data-theme="light"] .tdp-split-list .tdp-dark-table tr[data-item-id]:hover { background: #f0f4f8 !important; }
    /* Community Use-Button: nur Icon */
    .tdp-split-list .tdp-use-label { display: none; }
    .tdp-split-list .tdp-use-icon  { display: inline; font-size: .9rem; }
    .tdp-split-list .tdp-use-btn   { padding: .25rem .5rem !important; min-width: 28px; }
}

.tdp-split-map {
    flex: 1;
    position: relative;
    background: #111;
}

/* ── Resizable split handle ─────────────────────────────────────────────── */
.tdp-split-handle {
    width: 6px; flex-shrink: 0; cursor: col-resize;
    position: relative; z-index: 5;
    background: transparent;
    touch-action: none;
}
/* Waehrend des Ziehens (tdp-common.js): keine Breiten-Animation — die Liste hing sonst der
   Maus hinterher —, keine Textauswahl, die Karte faengt keine Zeigerereignisse */
.tdp-split-outer.tdp-resizing .tdp-split-list { transition: none !important; }
.tdp-split-outer.tdp-resizing, .tdp-split-outer.tdp-resizing * { user-select: none !important; cursor: col-resize !important; }
.tdp-split-outer.tdp-resizing .tdp-split-map { pointer-events: none; }
.tdp-panel-collapsed .tdp-split-handle { display: none; }
.tdp-split-handle::after {
    content: ''; position: absolute;
    top: 0; bottom: 0; left: 2px; width: 2px;
    background: #2a2a2a;
    transition: background .15s, width .1s, left .1s;
}
.tdp-split-handle:hover::after,
.tdp-split-handle.dragging::after {
    background: var(--tdp-accent); width: 4px; left: 1px;
}
/* Grip dots */
.tdp-split-handle::before {
    content: ''; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 2px; height: 32px;
    background: repeating-linear-gradient(
        to bottom, #555 0 2px, transparent 2px 5px
    );
    border-radius: 1px; opacity: .6;
    transition: opacity .15s;
}
.tdp-split-handle:hover::before { opacity: 1; }
@media (max-width: 991px) { .tdp-split-handle { display: none !important; } }
[data-theme="light"] .tdp-split-handle::after { background: #c5c9cf; }
[data-theme="light"] .tdp-split-handle:hover::after,
[data-theme="light"] .tdp-split-handle.dragging::after { background: var(--tdp-accent); }
[data-theme="light"] .tdp-split-handle::before { background: repeating-linear-gradient(to bottom, #b0b7bf 0 2px, transparent 2px 5px); }
#splitMapCanvas { width: 100%; height: 100%; }
.tdp-split-hint {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #3a3a3a;
    font-size: .95rem;
    gap: .4rem;
    pointer-events: none;
}
.tdp-split-hint svg { opacity: .18; }
/* Hashtag chips in community search */
.badge-chip {
    background: #1e2d1e; color: #7ec87e; border: 1px solid #2f4a2f;
    border-radius: 12px; padding: 2px 10px; font-size: .73rem;
    cursor: pointer; white-space: nowrap;
    transition: background .15s, color .15s;
}
.badge-chip:hover { background: var(--tdp-accent); color: #fff; border-color: var(--tdp-accent); }

/* Selected row highlight */
.tdp-dark-table tbody tr.preview-active td { background: #1f2d1a !important; }

/* Last-loaded row highlight (Tracks / Routes list) */
.tdp-dark-table tbody tr.tdp-last-loaded td:first-child strong::before,
.tdp-dark-table tbody tr.tdp-last-loaded td.tdp-col-check + td strong::before {
    content: '▶';
    color: var(--tdp-accent);
    font-size: .65rem;
    margin-right: .35rem;
    vertical-align: middle;
    display: inline-block;
}

/* Dark modals */
.modal-dark .modal-content { background: #1e1e1e; border: 1px solid #363636; color: #d0d0d0; }
.modal-dark .modal-header  { background: #141414; border-bottom-color: #363636; }
.modal-dark .modal-title   { color: #d0d0d0; }
.modal-dark .modal-footer  { background: #141414; border-top-color: #363636; }

/* Empty state */
.tdp-dark-empty { color: #505050; font-size: .9rem; text-align: center; padding: 3rem; }

/* GPX import status badge */
.tdp-import-status {
    font-size: .8rem; font-weight: 600; padding: .3rem .7rem;
    border-radius: 5px; max-width: 400px; word-break: break-word;
}
.tdp-import-status.import-ok  { background: #152015; color: #60b870; border: 1px solid #1a5a2a; }
.tdp-import-status.import-err { background: #251400; color: #e06020; border: 1px solid #5a2a00; }

/* Tables */
.tdp-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.tdp-table th { background: var(--tdp-mid); color: var(--tdp-text); padding: .55rem .75rem; text-align: left; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; }
.tdp-table td { padding: .5rem .75rem; border-bottom: 1px solid #e9ecef; vertical-align: middle; }
.tdp-table tr:hover td { background: #f8f9fa; }
.tdp-table .badge-type { font-size: .7rem; padding: .2rem .45rem; border-radius: 4px; font-weight: 600; }
.badge-track   { background: #e8f0fe; color: #1a73c8; }
.badge-route   { background: #fce8e6; color: #c01800; }
.badge-public  { background: #e6f4ea; color: #137333; }
.badge-private { background: #fef7e0; color: #9a6d00; }
.tdp-table .btn-icon { background: none; border: none; cursor: pointer; padding: .2rem .3rem; border-radius: 4px; transition: background .12s; }
.tdp-table .btn-icon:hover { background: #dee2e6; }
.btn-icon-danger:hover { background: #fce8e6 !important; color: #c01800; }

.tdp-edit-row td { background: #f0f4ff !important; }
.tdp-edit-row input, .tdp-edit-row textarea { font-size: .83rem; }

.tdp-search-card { background: #fff; border-radius: 10px; padding: 1.2rem; box-shadow: 0 2px 8px rgba(0,0,0,.06); margin-bottom: 1.5rem; }
.tdp-filter-row  { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-top: .75rem; }
.tdp-filter-row .form-group { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; }
.tdp-filter-row label { font-weight: 600; color: #555; }

.tdp-profile-card { background: #fff; border-radius: 10px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,.06); margin-bottom: 1.5rem; max-width: 520px; }
.tdp-profile-card h5 { color: var(--tdp-mid); font-weight: 700; margin-bottom: 1rem; }

.tdp-desc { font-size: .75rem; color: #666; cursor: pointer; line-height: 1.4; max-width: 420px; }
.tdp-desc.collapsed { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdp-desc.collapsed::after { content: ' ▾'; color: var(--tdp-accent); font-size: .65rem; }
.tdp-desc.expanded::after  { content: ' ▴'; color: var(--tdp-accent); font-size: .65rem; }

/* ══════════════════════════════════════════════════════════════
   Planner layout
   ══════════════════════════════════════════════════════════════ */
.tdp-planner {
    display: flex;
    height: calc(100vh - 60px);
    overflow: hidden;
}

/* ── Sidebar shell ── */
.tdp-sidebar {
    /* Breite als Variable: der Trenner (TDP.initPanelResize) setzt --tdp-sidebar-w am
       .tdp-planner; Standard 680px (= das Doppelte der frueheren 340px, Nutzerwunsch
       08.10.2026), auf schmalen Fenstern hoechstens die halbe Breite. Vorher feste 340px
       (max 400) — mit Pause-, Lautsprecher-, Kommentar-, Geocode- und Entfernen-Knopf blieb
       vom Namensfeld nur noch „We" uebrig. Die gezogene Breite liegt im Cookie
       tdp_planner_sidebar_w. */
    width: var(--tdp-sidebar-w, min(680px, 50vw));
    min-width: 320px;
    max-width: 75vw;
    background: var(--sb-bg);
    border-right: 1px solid var(--sb-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 2px 0 12px rgba(0,0,0,.35);
    z-index: 10;
}

/* ── Ziehbarer Trenner zwischen Seitenleiste und Karte ── */
.tdp-splitter {
    width: 7px;
    flex-shrink: 0;
    cursor: col-resize;
    background: var(--sb-border);
    border-left: 1px solid rgba(0,0,0,.25);
    position: relative;
    z-index: 11;
    touch-action: none;
    transition: background .15s;
}
.tdp-splitter::after {            /* drei Griffpunkte in der Mitte */
    content: "";
    position: absolute; left: 2px; top: 50%;
    width: 3px; height: 28px; margin-top: -14px;
    border-radius: 2px;
    background: repeating-linear-gradient(to bottom, #8a8a8a 0 3px, transparent 3px 7px);
}
.tdp-splitter:hover, .tdp-planner.tdp-resizing .tdp-splitter { background: var(--tdp-accent); }
.tdp-splitter:hover::after, .tdp-planner.tdp-resizing .tdp-splitter::after {
    background: repeating-linear-gradient(to bottom, #fff 0 3px, transparent 3px 7px);
}
/* Waehrend des Ziehens keine Breiten-Animation, keine Textauswahl, Karte faengt keine Mausereignisse */
.tdp-planner.tdp-resizing .tdp-sidebar { transition: none !important; }
.tdp-planner.tdp-resizing, .tdp-planner.tdp-resizing * { user-select: none !important; }
.tdp-planner.tdp-resizing .tdp-map { pointer-events: none; }
.tdp-panel-collapsed .tdp-splitter { display: none; }
[data-theme="light"] .tdp-splitter { background: #c5c9cf; border-left-color: rgba(0,0,0,.08); }
[data-theme="light"] .tdp-splitter::after { background: repeating-linear-gradient(to bottom, #6b7280 0 3px, transparent 3px 7px); }

.tdp-sidebar-header {
    background: var(--sb-bg3);
    color: var(--tdp-text);
    padding: .75rem 1rem;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .5px;
    border-bottom: 2px solid var(--tdp-accent);
    flex-shrink: 0;
}

/* kept for non-planner sidebar use */
.tdp-sidebar-body {
    padding: 1rem;
    flex: 1;
    overflow-y: auto;
    background: var(--sb-bg);
    color: var(--sb-text);
}

.tdp-map { flex: 1; position: relative; }
#map     { width: 100%; height: 100%; }

/* ── Tab nav ── */
.tdp-planner-tabs {
    background: var(--sb-bg3);
    border-bottom: 1px solid var(--sb-border);
    flex-shrink: 0;
}
.tdp-planner-tabs .nav-link {
    font-size: .82rem;
    font-weight: 600;
    color: var(--sb-muted);
    border-radius: 0;
    padding: .5rem 1rem;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s;
}
.tdp-planner-tabs .nav-link:hover  { color: var(--sb-text); }
.tdp-planner-tabs .nav-link.active {
    color: var(--tdp-accent);
    border-bottom-color: var(--tdp-accent);
    background: var(--sb-bg);
}

/* ── Tab content ── */
.tdp-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: .9rem 1rem;
    background: var(--sb-bg);
    color: var(--sb-text);
}

/* Scrollbar */
.tdp-tab-content::-webkit-scrollbar        { width: 4px; }
.tdp-tab-content::-webkit-scrollbar-track  { background: var(--sb-bg3); }
.tdp-tab-content::-webkit-scrollbar-thumb  { background: var(--sb-border); border-radius: 2px; }

/* ── Labels & form controls inside sidebar ── */
.tdp-sidebar-body label,
.tdp-tab-content label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--sb-muted);
    margin-bottom: .2rem;
    display: block;
}

.tdp-sidebar-body .form-control,
.tdp-sidebar-body .form-select,
.tdp-tab-content .form-control,
.tdp-tab-content .form-select {
    font-size: .84rem;
    background-color: var(--sb-bg2);
    border: 1px solid var(--sb-border);
    color: var(--sb-text);
    border-radius: 5px;
}
.tdp-tab-content .form-control::placeholder { color: var(--sb-dim); }
.tdp-tab-content .form-control:focus,
.tdp-tab-content .form-select:focus {
    background-color: var(--sb-bg2);
    border-color: var(--tdp-accent);
    color: var(--sb-text);
    box-shadow: 0 0 0 .18rem rgba(233,69,96,.25);
    outline: none;
}

/* Autofill override (Chrome/Edge) */
.tdp-tab-content .form-control:-webkit-autofill,
.tdp-tab-content .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px var(--sb-bg2) inset !important;
    -webkit-text-fill-color: var(--sb-text) !important;
}

/* Select arrow colour */
.tdp-tab-content .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236a6d88' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ── Section titles ── */
.tdp-section-title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sb-muted);
    margin-top: 1rem;
    margin-bottom: .45rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--sb-border);
}

/* hr inside sidebar */
.tdp-tab-content hr { border-color: var(--sb-border); opacity: 1; }

/* ── Placeholders / empty states ── */
.tdp-no-content-msg {
    color: var(--sb-dim);
    font-size: .83rem;
    text-align: center;
    padding: 2.5rem 1rem;
    line-height: 1.8;
}

/* ── Track / Route name banner ── */
.tdp-track-name,
.tdp-route-name {
    font-weight: 700;
    font-size: .88rem;
    color: var(--sb-text);
    padding: .35rem .6rem;
    background: var(--sb-bg2);
    border-left: 3px solid var(--tdp-accent);
    border-radius: 4px;
}

/* ── Track stat table ── */
.tdp-track-stat-table { width: 100%; font-size: .83rem; border-collapse: collapse; }
.tdp-track-stat-table td { padding: .28rem .1rem; }
.tdp-track-stat-table td:first-child { color: var(--sb-muted); width: 55%; }
.tdp-track-stat-table td:last-child  { font-weight: 600; color: var(--sb-text); }

/* ── Checkboxes ── */
.tdp-tab-content .form-check-label { color: var(--sb-text); font-size: .82rem; }
.tdp-tab-content .form-check-input {
    background-color: var(--sb-bg2);
    border-color: var(--sb-border);
}
.tdp-tab-content .form-check-input:checked {
    background-color: var(--tdp-accent);
    border-color: var(--tdp-accent);
}

/* ── Disabled checkboxes (Thrilling mode) ── */
.tdp-check-disabled { opacity: .3; pointer-events: none; }

/* ── Info hint (Thrilling warning) ── */
.tdp-info-hint {
    font-size: .76rem;
    color: #d4a800;
    background: #252010;
    border: 1px solid #4a3a00;
    border-radius: 5px;
    padding: .35rem .55rem;
    margin-bottom: .5rem;
    line-height: 1.4;
}

/* ── Alert overrides inside sidebar ── */
.tdp-tab-content .alert-warning {
    background: #252010;
    border-color: #4a3a00;
    color: #d4a800;
    font-size: .82rem;
}
.tdp-tab-content .alert-success {
    background: #0d2018;
    border-color: #1a4a2a;
    color: #4caf7a;
    font-size: .82rem;
}

/* ── Buttons ── */
.btn-tdp {
    background: var(--tdp-accent);
    color: #fff !important;
    border: none;
    border-radius: 5px;
    padding: .45rem .9rem;
    font-size: .84rem;
    font-weight: 600;
    transition: background .15s;
    width: 100%;
    margin-top: .7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.btn-tdp:hover { background: var(--tdp-accent2); color: #fff; }

.btn-tdp-success       { background: #28a745 !important; }
.btn-tdp-success:hover { background: #218838 !important; }
.btn-tdp-primary       { background: #0d6efd !important; color: #fff !important; }
.btn-tdp-primary:hover { background: #0b5ed7 !important; color: #fff !important; }

.btn-tdp-secondary {
    background: #2e2e2e;
    color: var(--sb-text);
    border: 1px solid var(--sb-border);
    border-radius: 5px;
    padding: .35rem .7rem;
    font-size: .8rem;
    font-weight: 500;
    transition: background .15s, border-color .15s;
    cursor: pointer;
}
.btn-tdp-secondary:hover { background: #3a3a3a; border-color: var(--tdp-accent); color: #fff; }

/* ── Mehrfach-Loeschen in den Listen (Nutzer-Spec 04.09.2026): roter Knopf mit
      weisser Muelltonne, nur sichtbar wenn mindestens eine Zeile markiert ist. ── */
.tdp-delete-selected-btn {
    background: #c62828 !important;
    border-color: #c62828 !important;
    color: #fff !important;
    font-weight: 600;
}
.tdp-delete-selected-btn:hover { background: #a91f1f !important; border-color: #a91f1f !important; }
.tdp-dark-table th.tdp-col-check,
.tdp-dark-table td.tdp-col-check {
    /* 1%-Trick: in width:100%-Tabellen mit Auto-Layout wird eine feste
       Pixelbreite von der Ueberschussverteilung aufgeblasen. Der Praefix
       .tdp-dark-table hebt die Spezifitaet ueber die Padding-Grundregel. */
    width: 1%; white-space: nowrap; text-align: center;
    padding-left: .6rem; padding-right: .35rem;
}
.tdp-col-check .tdp-row-check {
    width: 17px; height: 17px;
    background-color: #2a2a2a;
    border-color: #5a5a5a;
    cursor: pointer;
}
.tdp-col-check .tdp-row-check:checked { background-color: #c62828; border-color: #c62828; }

.btn-tdp-danger            { background: #8b1500 !important; }
.btn-tdp-danger:hover      { background: #6e1000 !important; }

/* ── Waypoint rows ── */
.tdp-waypoint-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .45rem;
}
.tdp-waypoint-row .waypoint-icon {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700; flex-shrink: 0; color: #fff;
}
.waypoint-icon.start   { background: #28a745; }
.waypoint-icon.end     { background: var(--tdp-accent); }
.waypoint-icon.via     { background: var(--tdp-light); }
.waypoint-icon.shaping {
    background: #555870;
    border-radius: 3px;
    transform: rotate(45deg);
    font-size: .6rem;
}
.waypoint-icon.shaping span { transform: rotate(-45deg); display: inline-block; }

/* ── Drag handle ── */
.wp-drag-handle {
    cursor: grab;
    color: var(--sb-muted);
    font-size: 1rem;
    padding: 0 .25rem;
    flex-shrink: 0;
    user-select: none;
    transition: color .12s;
}
.wp-drag-handle:hover  { color: var(--sb-text); }
.wp-drag-handle:active { cursor: grabbing; }

/* ── Pause- und Lautsprecher-Button in der Wegpunktzeile ──
   Angleich an den TDM-Routeneditor (Nutzer-Spec 03.09.2026): Der Pausen-Button
   zeigt ohne Pause das ⏸-Symbol (zwei graue Balken) und mit Pause die Minutenzahl
   in der DAUER-Farbe aus TD8s Referenztabelle; der Lautsprecher ist orange bei
   Via-Punkten und grau gemutet bei Shaping-Punkten. */
.wp-pause-btn, .wp-speaker-btn {
    width: 30px; height: 29px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 2px;
    line-height: 1;
}
.wp-pause-bar {
    display: inline-block;
    width: 3px; height: 12px;
    border-radius: 1px;
    background: #888888;
}

/* ── Kommentar-Knopf in der Wegpunktzeile (Spezifikation 08.10.2026, alle Produkte) ──
   Sprechblase als Inline-SVG mit fill:currentColor: hellgrau ohne Kommentar, orange mit
   Kommentar (Klasse has-comment). Start/Ziel (statisches Markup) tragen die Hoehe des
   grossen Eingabefelds. Die :hover-Regel von .btn-tdp-secondary darf die Farbe nicht
   ueberschreiben — sonst wuerde orange beim Zeigen weiss. */
.wp-comment-btn {
    width: 30px; height: 29px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
}
.wp-comment-btn, .wp-comment-btn:hover { color: #a0a0a0; }
.wp-comment-btn.has-comment, .wp-comment-btn.has-comment:hover { color: #ffa500; }
.wp-comment-btn:disabled { opacity: .45; cursor: default; }
.wp-comment-btn-lg { width: 36px; height: calc(1.5em + .75rem + 2px); }

/* Dialog „Zuletzt verwendete Kommentare" */
.wp-recent-item { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border-bottom: 1px solid #363636; }
.wp-recent-item:last-child { border-bottom: 0; }
.wp-recent-text { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; font-size: .84rem; cursor: pointer; color: #e0e0e0; }
.wp-recent-text:hover { color: #fff; }
.wp-recent-empty { color: #888; font-size: .84rem; padding: .4rem .2rem; }

/* ── Result panel ── */
.tdp-result-inline {
    background: var(--sb-bg3);
    color: var(--sb-text);
    border: 1px solid var(--sb-border);
    border-radius: 5px;
    padding: .55rem .9rem;
    font-size: .84rem;
    margin-top: .7rem;
}
.tdp-result-inline .stat        { display: inline-block; margin-right: 1.2rem; }
.tdp-result-inline .stat-label  { color: var(--sb-muted); font-size: .72rem; display: block; }
.tdp-result-inline .stat-value  { font-weight: 700; font-size: .95rem; color: var(--sb-text); }

/* ── Via toggle ── */
#viaToggleRow .btn-tdp-secondary {
    background: transparent;
    border-color: var(--sb-border);
    color: var(--sb-muted);
    font-size: .77rem;
    border-radius: 4px;
}
#viaToggleRow .btn-tdp-secondary:hover { background: var(--sb-bg2); color: var(--sb-text); border-color: #505050; }

/* ── Map layer section ── */
.tdp-maplayer-section { flex-shrink: 0; border-top: 1px solid var(--sb-border); }

.tdp-maplayer-toggle {
    width: 100%;
    background: var(--sb-bg3);
    border: none;
    border-top: 1px solid var(--sb-border);
    padding: .45rem 1rem;
    font-size: .77rem;
    font-weight: 600;
    color: var(--sb-muted);
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}
.tdp-maplayer-toggle:hover { background: var(--sb-bg2); color: var(--sb-text); }
#mapLayerContent { padding: .5rem 1rem .75rem; background: var(--sb-bg); }

.tdp-maplayer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .35rem;
    margin-bottom: .4rem;
}
.tdp-maplayer-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .4rem .15rem;
    border: 1px solid var(--sb-border);
    border-radius: 7px;
    background: var(--sb-bg2);
    color: var(--sb-muted);
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    line-height: 1.1;
}
.tdp-maplayer-btn:hover {
    border-color: var(--tdp-accent);
    background: #2e2e2e;
    color: var(--tdp-accent);
}
.tdp-maplayer-btn.active {
    border-color: var(--tdp-accent);
    background: var(--tdp-accent);
    color: #fff;
}
.tdp-maplayer-btn.active .tdp-maplayer-icon { background: rgba(255,255,255,.2); }

.tdp-maplayer-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 5px; font-size: .95rem; color: #fff;
}
.tdp-ml-road    { background: #4a90d9; }
.tdp-ml-sat     { background: #2d6a2d; }
.tdp-ml-hybrid  { background: #3a5a3a; }
.tdp-ml-terrain { background: #7a5c2e; }
.tdp-ml-topplus { background: #c06010; }
.tdp-ml-michelin{ background: #c00; }

.tdp-ml-google-road    { background: #4285F4; }
.tdp-ml-google-terrain { background: #5a8a3a; }
.tdp-ml-google-hybrid  { background: #2d5a1a; }

.tdp-ml-here-road    { background: #1a73c8; }
.tdp-ml-here-night   { background: #1a1a3e; }
.tdp-ml-here-lite    { background: #7ab0e0; }
.tdp-ml-here-sat     { background: #2a5a1a; }
.tdp-ml-here-topo    { background: #8a6a30; }
.tdp-ml-here-traffic { background: #c04000; }
.tdp-ml-sv           { background: #1a73e8; }

/* Overlay toggle button — does not replace base layer, just toggles */
.tdp-overlay-btn { border: 2px solid transparent; }
.tdp-overlay-btn.active { border-color: #1a73e8 !important; background: rgba(26,115,232,.15) !important; }

/* Map layer section labels (Google / HERE) */
.tdp-section-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #6ab0e0;
    margin-top: .65rem;
    margin-bottom: .35rem;
    padding: .18rem .4rem;
    background: #1e1e1e;
    border-radius: 3px;
    border-left: 3px solid #1a73c8;
}
.tdp-section-label-google {
    color: #90c0f8;
    background: #1e1e1e;
    border-left-color: #4285F4;
}

/* ══════════════════════════════════════════════════════════════
   Route export modal
   ══════════════════════════════════════════════════════════════ */
.tdp-export-dialog {
    margin-left: calc(340px + max(1rem, (100vw - 340px - 860px) / 2));
    margin-top: 70px;
}

/* On narrow screens: reset sidebar margin, constrain height, list scrolls internally */
@media (max-width: 900px) {
    .tdp-export-dialog {
        margin: 5px auto !important;
        max-width: calc(100vw - 1rem) !important;
        width: calc(100vw - 1rem) !important;
    }

    /* Explicit height (not max-height) so flex children can derive their size */
    .tdp-export-dialog .modal-content {
        height: calc(100vh - 10px) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    .tdp-export-dialog .modal-header { flex-shrink: 0 !important; }
    .tdp-export-dialog .modal-footer { flex-shrink: 0 !important; }
    .tdp-export-dialog .modal-body {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: .6rem !important;
    }

    /* Description hidden; list takes full width and scrolls */
    .exp-desc-pane    { display: none !important; }
    .exp-dialog-panes {
        height: 100% !important;
    }
    .exp-profile-list {
        width: 100% !important;
        height: 100% !important;
        overflow-y: auto !important;
    }
}

.exp-dialog-panes {
    display: flex;
    gap: 1rem;
    height: 650px;
}

.exp-profile-list {
    width: 260px;
    flex-shrink: 0;
    overflow-y: auto;
    height: 100%;
    border: 1px solid #2e2e2e;
    border-radius: 6px;
    background: #161616;
}

.exp-cat-label {
    font-size: .67rem;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .5rem .75rem .2rem;
}

.exp-profile-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .75rem;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background .12s;
    position: relative;
}
.exp-profile-item:hover { background: #202020; }
.exp-profile-item.active {
    background: #1e1800;
    border-left-color: var(--tdp-accent);
}

.exp-edit-btn {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity .15s, color .15s, background .15s;
    line-height: 1;
}
.exp-profile-item:hover .exp-edit-btn { opacity: 1; }
.exp-edit-btn:hover { color: var(--tdp-accent); background: #2a2a2a; }

.exp-edit-label {
    font-size: .74rem;
    font-weight: 600;
    color: #888;
    display: block;
    margin-bottom: .25rem;
}

/* Settings section – bordered box like TD Desktop */
.exp-edit-section {
    border: 1px solid #2e2e2e;
    border-radius: 6px;
    overflow: hidden;
}
.exp-edit-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .8rem;
    border-bottom: 1px solid #222;
}
.exp-edit-row:last-child { border-bottom: none; }
.exp-edit-row-label {
    font-size: .8rem;
    color: #888;
    width: 140px;
    flex-shrink: 0;
}
.exp-edit-row-val { flex: 1; min-width: 0; }

.exp-edit-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .8rem;
    border-bottom: 1px solid #222;
}
.exp-edit-check:last-child { border-bottom: none; }
.exp-edit-check label {
    font-size: .8rem;
    color: #c0c0c0;
    cursor: pointer;
    margin: 0;
}
.exp-edit-cb {
    width: 15px; height: 15px;
    accent-color: var(--tdp-accent);
    cursor: pointer;
    flex-shrink: 0;
}

.exp-edit-reset {
    font-size: .72rem;
    color: #555;
    background: none;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 2px 10px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.exp-edit-reset:hover { color: #888; border-color: #555; }

.tdp-dark-input {
    background: #111 !important;
    border: 1px solid #333 !important;
    color: #ccc !important;
    font-size: .82rem !important;
}
.tdp-dark-input:focus {
    background: #161616 !important;
    border-color: var(--tdp-accent) !important;
    box-shadow: none !important;
    color: #e0e0e0 !important;
}
.tdp-dark-input option { background: #1a1a1a; }
.exp-prof-icon {
    font-size: 1rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.exp-prof-name {
    font-size: .82rem;
    font-weight: 600;
    color: #d0d0d0;
    line-height: 1.2;
}
.exp-prof-sub {
    font-size: .7rem;
    color: #686868;
    margin-top: .05rem;
}

.exp-desc-pane {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.exp-desc-img {
    width: 100%;
    flex: 1;
    min-height: 0;
    max-height: 500px;
    object-fit: contain;
    background: #111;
    border-radius: 5px;
    margin-bottom: .55rem;
    display: block;
}

.exp-desc-title {
    flex-shrink: 0;
    font-size: .88rem;
    font-weight: 700;
    color: #d8d8d8;
    margin-bottom: .35rem;
}

.exp-desc-text {
    flex-shrink: 0;
    font-size: .73rem;
    color: #a0a0a0;
    line-height: 1.45;
    overflow-y: auto;
    max-height: 130px;
    padding-right: 4px;
}

.exp-desc-box {
    font-size: .8rem;
    color: #a0a0a0;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   POI details table
   ══════════════════════════════════════════════════════════════ */
.tdp-poi-table { width:100%; border-collapse:collapse; font-size:.83rem; }
.tdp-poi-table td { padding:.35rem .4rem; border-bottom:1px solid #303030; vertical-align:top; color:#d0d0d0; }
.tdp-poi-table td:first-child { color:#888; white-space:nowrap; padding-right:.75rem; width:35%; }
[data-theme="light"] .tdp-poi-table td { color:#222; border-bottom-color:#ddd; }
[data-theme="light"] .tdp-poi-table td:first-child { color:#444; }

/* ── Leaflet POI Popup – Dark Theme ─────────────────────────────── */
.leaflet-popup-content-wrapper {
    background: #1e1e1e !important;
    color: #d0d0d0 !important;
    border: 1px solid #363636 !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.55) !important;
    border-radius: 8px !important;
}
.leaflet-popup-tip { background: #1e1e1e !important; }
.leaflet-popup-close-button { color: #888 !important; font-size: 1.1rem !important; }
.leaflet-popup-close-button:hover { color: #fff !important; }

[data-theme="light"] .leaflet-popup-content-wrapper {
    background: #fff !important;
    color: #1a1a1a !important;
    border: none !important;
    box-shadow: 0 3px 14px rgba(0,0,0,.2) !important;
}
[data-theme="light"] .leaflet-popup-tip { background: #fff !important; }
[data-theme="light"] .leaflet-popup-close-button { color: #555 !important; }

/* ══════════════════════════════════════════════════════════════
   Context menu (waypoint right-click)
   ══════════════════════════════════════════════════════════════ */
.tdp-context-menu {
    position: fixed;
    z-index: 9000;
    background: var(--sb-bg2);
    border: 1px solid var(--sb-border);
    border-radius: 7px;
    box-shadow: 0 6px 20px rgba(0,0,0,.55);
    min-width: 170px;
    overflow: hidden;
}
.tdp-ctx-header {
    background: var(--sb-bg3);
    color: var(--sb-text);
    font-size: .77rem;
    font-weight: 600;
    padding: .45rem .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--sb-border);
}
.tdp-ctx-item {
    padding: .42rem .75rem;
    font-size: .82rem;
    cursor: pointer;
    color: var(--sb-text);
    white-space: nowrap;
    transition: background .1s;
}
/* Markierung in der Akzentfarbe mit dunklem Text. Das bisherige #2e3048 war so
   dunkel, dass der helle Text darauf kaum noch zu lesen war. Dunkler Text auf
   Orange liegt bei rund 8:1 Kontrast — weiss laege unter 3:1. */
.tdp-ctx-item:hover   { background: var(--tdp-accent); color: #1a1200; }
.tdp-ctx-danger       { color: #e06060; }
/* Beim Loeschen bleibt es rot, sonst verliert der Eintrag seine Warnwirkung. */
.tdp-ctx-danger:hover { background: #b3261e !important; color: #ffffff !important; }

/* Im hellen Theme ist #e06060 auf hellem Grund zu blass (rund 3:1). */
[data-theme="light"] .tdp-ctx-danger { color: #b3261e; }
.tdp-ctx-divider      { height: 1px; background: var(--sb-border); margin: .15rem 0; }
/* A/Z-Plaketten im Karten-Kontextmenue (Als Start / Als Ziel), verkleinerte waypoint-icon. */
.tdp-ctx-wpicon       { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
                        border-radius:50%; color:#fff; font-size:.68rem; font-weight:700; vertical-align:-4px; margin:0; }
/* „Route berechnen“ bei veralteter Route (AutoRouting aus): pulsierender Rand. */
.tdp-btn-attention    { box-shadow: 0 0 0 2px var(--tdp-accent), 0 0 10px var(--tdp-accent); animation: tdp-attention 1.4s ease-in-out infinite; }
@keyframes tdp-attention { 50% { box-shadow: 0 0 0 2px var(--tdp-accent), 0 0 2px var(--tdp-accent); } }

/* ══════════════════════════════════════════════════════════════
   Description modal
   ══════════════════════════════════════════════════════════════ */
.tdp-desc-dialog {
    margin-left: calc(340px + max(1rem, (100vw - 340px - 820px) / 2));
    margin-top: 80px;
}
.tdp-desc-header {
    background: var(--sb-bg3);
    color: var(--tdp-text);
    border-bottom: 2px solid var(--tdp-accent);
    padding: .65rem 1rem;
}
.tdp-desc-body {
    padding: 1rem;
    background: #1a1b24;
}
.tdp-desc-body .form-control {
    background: var(--sb-bg2);
    border-color: var(--sb-border);
    color: var(--sb-text);
}
.tdp-desc-body .form-control:focus {
    background: var(--sb-bg2);
    border-color: var(--tdp-accent);
    color: var(--sb-text);
    box-shadow: 0 0 0 .18rem rgba(233,69,96,.25);
}
.tdp-desc-footer {
    background: var(--sb-bg3);
    border-top: 1px solid var(--sb-border);
    padding: .65rem 1rem;
}
.tdp-btn-save {
    background: var(--tdp-accent);
    border-color: var(--tdp-accent);
    color: #fff;
    font-weight: 600;
}
.tdp-btn-save:hover { background: var(--tdp-accent2); border-color: var(--tdp-accent2); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   Ai-Route page
   ══════════════════════════════════════════════════════════════ */
.air-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 3rem;
    color: #d0d0d0;
    background: #1a1a1a;
    min-height: calc(100vh - 56px);
}

/* Header */
.air-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--tdp-accent);
    margin-bottom: .35rem;
}
.air-subtitle {
    font-size: .84rem;
    color: #888;
    line-height: 1.5;
    max-width: 820px;
    margin-bottom: 1rem;
}

/* Inputs */
.air-inputs { max-width: 900px; }
.air-input-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .6rem;
}
.air-label {
    width: 36px;
    font-size: .88rem;
    font-weight: 700;
    color: #888;
    flex-shrink: 0;
    text-align: right;
}
.air-input {
    background: #1e1e1e;
    border: 1px solid #383838;
    color: #d0d0d0;
    font-size: .88rem;
}
.air-input:focus {
    background: #242424;
    border-color: var(--tdp-accent);
    color: #d0d0d0;
    box-shadow: 0 0 0 .18rem rgba(233,69,96,.25);
}

/* Buttons */
.air-buttons {
    display: flex;
    gap: .6rem;
    margin: .9rem 0 1rem;
    flex-wrap: wrap;
}
.btn-air-primary, .btn-air-secondary, .btn-air-danger, .btn-air-icon {
    border: none;
    border-radius: 5px;
    padding: .42rem 1rem;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.btn-air-primary   { background: var(--tdp-accent); color: #fff; }
.btn-air-primary:hover   { background: var(--tdp-accent2); }
.btn-air-primary:disabled{ background: #555; cursor: not-allowed; }
.btn-air-secondary { background: #2e2e2e; color: #d0d0d0; border: 1px solid #484848; }
.btn-air-secondary:hover { background: #3a3a3a; }
.btn-air-danger    { background: #5a1400; color: #d0d0d0; }
.btn-air-danger:hover    { background: #7a1a00; }
.btn-air-icon {
    background: #2e2e2e; color: #aaa; border: 1px solid #383838;
    padding: .3rem .55rem; font-size: .85rem;
}
.btn-air-icon:hover { background: #3a3a3a; color: #d0d0d0; }

/* Progress */
.air-progress-wrap {
    max-width: 900px;
    margin-bottom: .75rem;
}
.air-progress-bar {
    height: 5px;
    width: 0%;
    background: var(--tdp-accent);
    border-radius: 3px;
    transition: width .4s ease;
}
.air-progress-label {
    font-size: .78rem;
    color: #888;
    display: block;
    margin-top: .3rem;
}

/* Prompt editor */
.air-prompt-section { max-width: 900px; margin-bottom: 1rem; }
.air-prompt-toggle {
    background: #1e1e1e;
    border: 1px solid #383838;
    color: #888;
    font-size: .82rem;
    font-weight: 600;
    padding: .35rem .7rem;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background .12s;
}
.air-prompt-toggle:hover { background: #272727; color: #d0d0d0; }
.air-prompt-editor { margin-top: .5rem; }
.air-prompt-toolbar {
    display: flex;
    gap: .5rem;
    margin-bottom: .4rem;
    align-items: center;
}
.air-prompt-select {
    background: #1e1e1e;
    border-color: #383838;
    color: #d0d0d0;
    font-size: .82rem;
    flex: 1;
}
.air-prompt-text {
    background: #1a1a1a;
    border-color: #383838;
    color: #c8c8c8;
    font-size: .80rem;
    font-family: 'Consolas', 'Courier New', monospace;
    resize: vertical;
}
.air-prompt-text:focus {
    background: #1e1e1e;
    border-color: var(--tdp-accent);
    color: #d0d0d0;
    box-shadow: 0 0 0 .18rem rgba(233,69,96,.2);
}

/* Result */
.air-result-wrap {
    border: 1px solid #383838;
    border-radius: 6px;
    overflow: hidden;
    margin-top: .5rem;
}
.air-result-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem;
    background: #141414;
    border-bottom: 1px solid #383838;
}
.air-result-label {
    font-size: .78rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .5px;
    flex: 1;
}
.air-result-frame {
    width: 100%;
    height: 65vh;
    border: none;
    background: #1a1a1a;
    display: block;
}

/* Navbar AI link accent */
.tdp-nav-ai { color: var(--tdp-accent) !important; font-weight: 600; }
.tdp-nav-ai:hover { color: #fff !important; }

/* ── Language / flag selector ──────────────────────────────────────────────── */
.tdp-flag-icon       { width: 20px; height: 13px; object-fit: cover; border-radius: 2px; display: block; }
.tdp-lang-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 .5rem !important;
    height: 30px !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    border-radius: 6px !important;
    line-height: 1 !important;
    transition: background .15s, border-color .15s;
}
.tdp-lang-toggle:hover { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.5) !important; }
.tdp-lang-menu       { min-width: 180px; background: #1e1e1e; border: 1px solid #383838; border-radius: 6px; padding: 4px 0; }
.tdp-lang-item       { display: flex; align-items: center; gap: 8px; color: #d0d0d0 !important; font-size: .85rem; padding: 5px 12px; }
.tdp-lang-item:hover { background: #2a2a2a; color: #fff !important; }
.tdp-lang-item.active{ color: var(--tdp-accent) !important; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   Google Maps attribution (required by Google Maps Platform TOS)
   ══════════════════════════════════════════════════════════════ */
.tdp-google-attrib {
    background: transparent !important;
    padding: 2px 4px !important;
    box-shadow: none !important;
    pointer-events: auto;
}
.tdp-google-logo { height: 20px; display: block; }

/* Copyright bar – centered at the very bottom of the map */
.tdp-google-copy-bar {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(255,255,255,0.78);
    font-size: 11px;
    color: #333;
    padding: 1px 10px;
    white-space: nowrap;
    border-radius: 2px 2px 0 0;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   Street View overlay
   ══════════════════════════════════════════════════════════════ */
.tdp-sv-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background: #000;
}
.tdp-sv-toolbar {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .9rem;
    background: #141414;
    border-bottom: 2px solid var(--tdp-accent);
    flex-shrink: 0;
}
.tdp-sv-icon  { font-size: 1.1rem; }
.tdp-sv-title { color: #d0d0d0; font-size: .88rem; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdp-sv-ext   {
    color: #888; font-size: 1rem; text-decoration: none; padding: .1rem .3rem;
    border: 1px solid #383838; border-radius: 4px; line-height: 1; transition: color .15s, border-color .15s;
}
.tdp-sv-ext:hover { color: #d0d0d0; border-color: #606060; }
.tdp-sv-close {
    background: none; border: none; color: #888; font-size: 1.5rem;
    cursor: pointer; line-height: 1; padding: 0 .2rem; transition: color .15s;
}
.tdp-sv-close:hover { color: #fff; }
.tdp-sv-frame { flex: 1; border: none; overflow: hidden; }

/* ══════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .tdp-desc-dialog { margin-left: 1rem; margin-right: 1rem; }
}
@media (max-width: 600px) {
    .tdp-planner { flex-direction: column; }
    .tdp-sidebar { width: 100% !important; min-width: 0; max-width: none; height: auto; max-height: 55vh; overflow-y: auto; flex-shrink: 0; }
    .tdp-map     { flex: 1; min-height: 35vh; }
    .tdp-splitter { display: none; }   /* untereinander: kein Trenner */
}

/* Community Use-Button: ab 768px Text zeigen */
@media (min-width: 768px) {
    .tdp-use-label { display: inline; }
    .tdp-use-icon  { display: none; }
    .tdp-use-btn   { padding: .3rem .8rem !important; }
}

/* ── Collapsible routing section (Planner sidebar) ─────────────────────── */
.tdp-section-collapsible {
    cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: space-between;
}
.tdp-section-collapsible:hover { color: var(--tdp-accent); }
.tdp-caret {
    flex-shrink: 0;
    transition: transform .2s ease;
    opacity: .9;
    width: 22px;
    height: 22px;
}
.tdp-section-collapsible.tdp-collapsed .tdp-caret { transform: rotate(-90deg); }

/* ── Compact action buttons (Route + Track tabs) ─────────────────────────── */
.tdp-action-btns {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.tdp-action-btns .btn-tdp,
.tdp-action-btns .btn-tdp-secondary,
.tdp-action-btns .btn-tdp-danger {
    margin-top: 0 !important;
    width: 100%;
}
/* On narrow screens (mobile sidebar full-width): icon-only buttons in a row */
@media (max-width: 599px) {
    .tdp-action-btns {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: .3rem;
    }
    .tdp-action-btns .btn-tdp,
    .tdp-action-btns .btn-tdp-secondary,
    .tdp-action-btns .btn-tdp-danger {
        flex: 1; min-width: 0;
        font-size: 1.15rem !important;
        padding: .45rem .1rem !important;
        line-height: 1;
        justify-content: center;
    }
    .tdp-action-btns .tdp-btn-label { display: none; }
}

/* ── Collapsible left panel (Planner + Split pages) ────────────────────── */
.tdp-sidebar,
.tdp-split-list {
    transition: width .22s cubic-bezier(.4,0,.2,1),
                min-width .22s cubic-bezier(.4,0,.2,1),
                padding .22s cubic-bezier(.4,0,.2,1);
}
/* Collapse button inside panel header */
.tdp-panel-collapse-btn {
    background: none; border: none; color: #888; cursor: pointer;
    padding: .15rem .3rem; border-radius: 4px;
    line-height: 1; flex-shrink: 0;
    transition: color .15s, background .15s;
    display: flex; align-items: center;
}
.tdp-panel-collapse-btn:hover { color: #fff; background: rgba(255,255,255,.1); }
/* Thin expand strip (always present in DOM, 0 width when panel is open) */
.tdp-panel-strip {
    width: 0; overflow: hidden;
    background: var(--sb-bg);
    border-right: 1px solid var(--sb-border);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    flex-shrink: 0; cursor: pointer; z-index: 15;
    transition: width .22s cubic-bezier(.4,0,.2,1);
}
.tdp-panel-strip:hover { background: var(--sb-bg2); }
.tdp-panel-strip button {
    background: none; border: none;
    color: #666; padding: 0; cursor: pointer;
    display: flex; align-items: center;
}
.tdp-panel-strip:hover button { color: #bbb; }
/* Collapsed state (desktop only — mobile handled separately) */
.tdp-panel-collapsed .tdp-sidebar,
.tdp-panel-collapsed .tdp-split-list {
    width: 0 !important; min-width: 0 !important;
    height: 0 !important;
    padding: 0 !important; border-right: none; overflow: hidden;
}
.tdp-panel-collapsed .tdp-panel-strip { width: 20px; }

/* Panel-Collapse nur auf Desktop (>= 992px) — auf Mobile führt Einklappen zu leerer Seite */
@media (max-width: 991.98px) {
    .tdp-panel-collapse-btn { display: none !important; }
    .tdp-panel-strip        { display: none !important; }
    /* Sicherheits-Reset: eingeklappter Zustand wird auf Mobile rückgängig gemacht (via JS) */
}

/* ── Responsive split layout (Tracks / Routes / Community) ─────────────── */
/* Toggle button — visible only on narrow screens */
.tdp-map-toggle-btn { display: none; }
/* Close button inside the map overlay */
.tdp-map-close-btn {
    display: none;
    position: absolute;
    /* z-index ueber Leaflets Ebenen (Kartenebene 400, Steuerelemente bis 1000): mit 10 lag der
       Knopf unsichtbar unter den Kacheln — anklickbar, aber nicht zu sehen (28.10.2026) */
    top: .75rem; right: .75rem; z-index: 1001;
    background: rgba(0,0,0,.82); color: #ccc;
    border: 1px solid #444; border-radius: 6px;
    padding: .32rem .8rem; font-size: .83rem; cursor: pointer;
    align-items: center; gap: .35rem;
    transition: background .15s;
}
.tdp-map-close-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

@media (max-width: 991.98px) {
    /* Show toggle button */
    .tdp-map-toggle-btn {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
    }
    /* List expands to full width */
    .tdp-split-list {
        width: 100% !important;
        min-width: 0;
        border-right: none;
    }
    /* Map becomes a full-screen overlay */
    .tdp-split-map {
        display: none;
        position: fixed;
        top: 57px; left: 0; right: 0; bottom: 0;
        z-index: 1050;
    }
    .tdp-split-map.tdp-map-open { display: block; }
    .tdp-map-close-btn { display: flex; }
}

/* ── Spalten-Priorität für Split-Liste (Breakpoints auf Viewport-Basis)
   Die Split-Liste = ~46% Viewport → hohe Schwellwerte nötig!
   1. Dauer + Hashtags  < 1600px (tdp-col-narrow-hide) — Liste erst ab ~698px breit genug
   2. Sichtbarkeit      < 1150px (tdp-col-sm-hide)     — Liste erst ab ~491px breit genug
   3. Datum / Land      <  768px (tdp-col-xs-hide)     — mobile Vollbreite
   4. Distanz           <  600px (tdp-col-xxs-hide)    — mobile Vollbreite
   5. ≤ 767px: nur Name + Aktionen (safety-net, siehe unten) ──────────────── */
@media (max-width: 1599px) {
    th.tdp-col-narrow-hide, td.tdp-col-narrow-hide { display: none; }
}
@media (max-width: 1149px) {
    th.tdp-col-sm-hide, td.tdp-col-sm-hide { display: none; }
}
@media (max-width: 767px) {
    th.tdp-col-xs-hide, td.tdp-col-xs-hide { display: none; }
}
@media (max-width: 599px) {
    th.tdp-col-xxs-hide, td.tdp-col-xxs-hide { display: none; }
}

/* Dieselbe Staffelung noch einmal auf Basis der LISTENBREITE — die Liste ist per
   Ziehgriff frei einstellbar, die Viewport-Schwellen oben treffen sie deshalb
   nicht zuverlässig. Reihenfolge wie oben; unterhalb von ~430px bleiben nur
   Name und Aktionen (siehe @container-Block weiter oben). */
@container tdplist (max-width: 1000px) {
    .tdp-split-list th.tdp-col-narrow-hide,
    .tdp-split-list td.tdp-col-narrow-hide { display: none; }
}
@container tdplist (max-width: 820px) {
    .tdp-split-list th.tdp-col-sm-hide,
    .tdp-split-list td.tdp-col-sm-hide { display: none; }
}
@container tdplist (max-width: 700px) {
    .tdp-split-list th.tdp-col-xs-hide,
    .tdp-split-list td.tdp-col-xs-hide { display: none; }
}
@container tdplist (max-width: 560px) {
    .tdp-split-list th.tdp-col-xxs-hide,
    .tdp-split-list td.tdp-col-xxs-hide { display: none; }
}
/* Umgekehrt: ist die Liste breit genug, wird die Spalte gezeigt — auch wenn das
   Fenster unter der alten Viewport-Schwelle liegt. Sonst fehlt z. B. die Dauer
   auf einem 1400px-Bildschirm, obwohl die Liste 1200px breit ist. */
@container tdplist (min-width: 1001px) {
    .tdp-split-list th.tdp-col-narrow-hide,
    .tdp-split-list td.tdp-col-narrow-hide { display: table-cell; }
}
@container tdplist (min-width: 821px) {
    .tdp-split-list th.tdp-col-sm-hide,
    .tdp-split-list td.tdp-col-sm-hide { display: table-cell; }
}
@container tdplist (min-width: 701px) {
    .tdp-split-list th.tdp-col-xs-hide,
    .tdp-split-list td.tdp-col-xs-hide { display: table-cell; }
}
@container tdplist (min-width: 561px) {
    .tdp-split-list th.tdp-col-xxs-hide,
    .tdp-split-list td.tdp-col-xxs-hide { display: table-cell; }
}

/* CSS-Fallback für iOS Safari (kein requestFullscreen support) */
.tdp-split-map.tdp-map-fullscreen,
.tdp-map.tdp-map-fullscreen {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    z-index: 2000 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* ── Fullscreen button (custom Leaflet control) ─────────────────────────── */
.tdp-fs-btn {
    background: rgba(18,18,18,.88);
    color: #bbb;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 5px;
    width: 30px; height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-bottom: 10px;
    transition: background .15s, color .15s;
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.tdp-fs-btn:hover { background: rgba(0,0,0,.95); color: #fff; }

/* ── Hinweis auf der Karte (planner.js zeigeKartenHinweis, z. B. Michelin gestoert) ─── */
.tdp-map-notice {
    display: flex; align-items: flex-start; gap: .5rem;
    max-width: min(360px, calc(100vw - 90px));
    padding: .5rem .55rem .5rem .7rem;
    background: rgba(18,18,18,.92); color: #e6e6e6;
    border: 1px solid rgba(255,255,255,.18); border-left: 4px solid var(--tdp-accent);
    border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.45);
    font-size: .82rem; line-height: 1.35;
}
.tdp-map-notice-icon  { color: var(--tdp-accent); font-size: 1rem; line-height: 1.1; flex-shrink: 0; }
.tdp-map-notice-text  { flex: 1; }
.tdp-map-notice-close {
    flex-shrink: 0; background: none; border: none; padding: 0 .15rem;
    color: #aaa; font-size: .9rem; line-height: 1.2; cursor: pointer;
}
.tdp-map-notice-close:hover { color: #fff; }
[data-theme="light"] .tdp-map-notice { background: rgba(255,255,255,.96); color: #1a1a1a; border-color: #c5c9cf; border-left-color: var(--tdp-accent); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
[data-theme="light"] .tdp-map-notice-close { color: #555; }
[data-theme="light"] .tdp-map-notice-close:hover { color: #000; }

/* ── GPX Waypoint POI markers (shown when a Track with <wpt> is loaded) ─── */
.tdp-gpx-wpt-marker {
    display: flex; flex-direction: column; align-items: center;
    pointer-events: none;
}
.tdp-gpx-wpt-pin {
    width: 14px; height: 14px; border-radius: 50%;
    background: #ff8c00; border: 2px solid #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.5);
}
.tdp-gpx-wpt-label {
    margin-top: 3px; padding: 1px 5px;
    background: rgba(0,0,0,.72); color: #fff;
    font-size: 10px; font-weight: 600;
    border-radius: 3px; white-space: nowrap;
    max-width: 120px; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none;
}
[data-theme="light"] .tdp-gpx-wpt-label {
    background: rgba(0,0,0,.62);
}

/* ── POI Category Icon Button (in sidebar list) ─────────────────────────── */
.tdp-poi-cat-icon-btn {
    background: none; border: none; cursor: pointer;
    padding: 1px; border-radius: 3px; flex-shrink: 0;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s;
}
.tdp-poi-cat-icon-btn:hover { background: var(--sb-bg3); }

/* ── POI Icon Picker (floating panel) ───────────────────────────────────── */
.tdp-poi-icon-picker {
    position: fixed; z-index: 10000;
    background: var(--sb-bg2);
    border: 1px solid var(--sb-border);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,.55);
    padding: .5rem;
    width: 296px;
    max-height: 380px;
    overflow-y: auto;
}
.tdp-poi-picker-hdr {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .79rem; font-weight: 700; color: var(--sb-text);
    margin-bottom: .35rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--sb-border);
}
.tdp-poi-picker-hdr button {
    background: none; border: none; cursor: pointer;
    color: var(--sb-muted); font-size: .95rem; line-height: 1; padding: 2px 4px;
    border-radius: 3px;
}
.tdp-poi-picker-hdr button:hover { background: var(--sb-bg3); color: var(--sb-text); }
.tdp-poi-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
}
.tdp-poi-picker-item {
    display: flex; align-items: center; justify-content: center;
    padding: 4px 2px; border-radius: 5px; cursor: pointer;
    border: 2px solid transparent;
    transition: background .1s, border-color .1s;
}
.tdp-poi-picker-item img { width: 44px; height: 44px; object-fit: contain; display: block; }
.tdp-poi-picker-item:hover { background: var(--sb-bg3); }
.tdp-poi-picker-item.selected { border-color: var(--tdp-accent); }
.tdp-poi-picker-none {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 2px dashed var(--sb-border); border-radius: 6px;
    color: var(--sb-muted); font-size: 1.1rem; font-weight: 700;
}
[data-theme="light"] .tdp-poi-icon-picker { background: #fff; }

/* ── POI PNG Map Icons ──────────────────────────────────────────────────── */
.tdp-poi-img-icon {
    background: none !important;
    border: none !important;
}
.tdp-poi-img-icon img {
    display: block;
}

/* ── POIs der Route: eingebettete Symbole mit Grund ──────────────────────── */
/* ★★★ WOFUER DER GRUND: In TD 8 gibt es viele WEISSE POI-Symbole
   (gas-station-white.png, Parking-White.png), und der Nutzer darf sich eigene malen.
   Ein weisses Symbol auf der hellen Karte ist unsichtbar. Der Grund richtet sich
   deshalb nach dem BILD.
   ★★★ DIE FARBE STEHT ABSICHTLICH NICHT HIER, sondern kommt als style-Angabe vom
   Server: Er misst die mittlere Helligkeit der nicht durchsichtigen Bildpunkte und
   leitet die Schwelle aus genau diesen beiden Farben ab (PoiSymbolResolver). Stuenden
   sie zusaetzlich hier, waeren es zwei Stellen — und die Schwelle waere ab der ersten
   Aenderung falsch, ohne dass es auffiele.
   ★ Nur EINGEBETTETE Symbole bekommen einen Grund. Die 45 Portal-Symbole sind fertige
   farbige Stecknadeln mit deckendem Koerper; ein Teller dahinter waere ein Klotz. */
.tdp-route-poi-icon { background: none !important; border: none !important; }
.tdp-route-poi-plate {
    width: 32px; height: 32px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
}
.tdp-route-poi-plate-on {
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.tdp-route-poi-thumb {
    width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; display: block;
}
.tdp-route-poi-thumb-plate { border-radius: 4px; padding: 1px; }

/* ── POI Map Pin Markers ─────────────────────────────────────────────────── */
.tdp-poi-pin {
    display: flex;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
    pointer-events: none;
}

/* ── POI Category List (sidebar) ─────────────────────────────────────────── */
.tdp-poi-cat-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .32rem .2rem;
    border-bottom: 1px solid var(--sb-border);
    font-size: .81rem;
}
.tdp-poi-cat-row:last-child { border-bottom: none; }
.tdp-poi-cat-dot {
    width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.tdp-poi-cat-name {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--sb-text);
}
.tdp-poi-cat-count {
    font-size: .71rem; color: var(--sb-muted);
    background: var(--sb-bg2);
    padding: 1px 6px; border-radius: 8px; flex-shrink: 0;
}
.tdp-poi-cat-btn {
    background: none; border: none; cursor: pointer;
    color: var(--sb-muted); padding: .15rem .2rem;
    border-radius: 3px; display: flex; align-items: center;
    flex-shrink: 0; line-height: 1;
}
.tdp-poi-cat-btn:hover { background: var(--sb-bg2); color: var(--sb-text); }
.tdp-poi-cat-del:hover { color: #e94560 !important; }

/* ── Waypoint autosuggest dropdown ──────────────────────────────────── */
.tdp-suggest-dropdown {
    position: absolute; z-index: 9050;
    background: var(--sb-bg2); border: 1px solid var(--sb-border);
    border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.5);
    max-height: 320px; overflow-y: auto; min-width: 240px;
}
.tdp-suggest-item {
    padding: .35rem .6rem; cursor: pointer;
    border-bottom: 1px solid var(--sb-border);
    color: var(--sb-text); font-size: .82rem; line-height: 1.25;
}
.tdp-suggest-item:last-child { border-bottom: none; }
.tdp-suggest-item:hover, .tdp-suggest-item.active {
    background: var(--sb-bg3); color: var(--tdp-accent);
}
.tdp-suggest-title  { font-weight: 600; }
.tdp-suggest-sub    { font-size: .72rem; color: var(--sb-muted); margin-top: 1px; }
.tdp-suggest-icon   { display: inline-block; width: 12px; margin-right: .35rem; opacity: .7; }
.tdp-suggest-empty  { padding: .5rem .6rem; color: var(--sb-muted); font-size: .78rem; font-style: italic; }
[data-theme="light"] .tdp-suggest-item { color: #222; }
[data-theme="light"] .tdp-suggest-sub  { color: #666; }
[data-theme="light"] .tdp-suggest-item:hover,
[data-theme="light"] .tdp-suggest-item.active { background: #f0f0f0; color: #d97700; }

/* ── Passes tab ─────────────────────────────────────────────────────── */
.tdp-pass-stats {
    display: flex; align-items: center; gap: .4rem;
    padding: .5rem .2rem .8rem; font-size: .9rem; font-weight: 700;
    color: var(--sb-text); border-bottom: 1px solid var(--sb-border);
    margin-bottom: .6rem;
}
.tdp-pass-stats .tdp-muted { font-weight: 400; }
.tdp-pass-mini-btn {
    background: var(--sb-bg2); border: 1px solid var(--sb-border); border-radius: 6px;
    color: var(--sb-text); cursor: pointer; font-size: .76rem;
    padding: .2rem .55rem; margin-left: auto;
}
.tdp-pass-mini-btn:hover { background: var(--sb-bg3); border-color: var(--tdp-accent); }

.tdp-pass-filter-group {
    border: 1px solid var(--sb-border); border-radius: 6px;
    background: var(--sb-bg2); margin-bottom: .45rem;
}
.tdp-pass-filter-group > summary {
    padding: .45rem .7rem; cursor: pointer; font-size: .82rem; font-weight: 600;
    color: var(--sb-text); list-style: none; user-select: none;
}
.tdp-pass-filter-group > summary::-webkit-details-marker { display: none; }
.tdp-pass-filter-group > summary::before {
    content: "▶"; display: inline-block; margin-right: .5rem; font-size: .65rem;
    color: var(--sb-muted); transition: transform .15s;
}
.tdp-pass-filter-group[open] > summary::before { transform: rotate(90deg); }
.tdp-pass-filter-body {
    padding: .4rem .8rem .65rem; border-top: 1px solid var(--sb-border);
    display: flex; flex-direction: column; gap: .3rem;
}
.tdp-pass-chk {
    display: flex; align-items: center; gap: .45rem; font-size: .82rem;
    color: var(--sb-text); cursor: pointer; user-select: none;
}
/* Kaestchen und Schalter sitzen rechnerisch mittig, wirken aber zu hoch: die
   Zeilenbox ist hoeher als das Kaestchen, und Unterlaengen ziehen die sichtbare
   Schrift nach unten. Ein Pixel Ausgleich, wie beim Ebenen-Schalter. */
.tdp-pass-chk input,
.tdp-pass-country-row input {
    margin: 0; flex-shrink: 0; position: relative; top: 1px; cursor: pointer;
}

.tdp-pass-row-label {
    display: grid; grid-template-columns: 80px 1fr 60px; align-items: center;
    gap: .4rem; font-size: .78rem; color: var(--sb-text);
}
.tdp-pass-row-label input[type=range] { width: 100%; }
.tdp-pass-country-bulk { display: flex; gap: .35rem; margin-bottom: .35rem; }
.tdp-pass-country-bulk .tdp-pass-mini-btn { margin-left: 0; }
.tdp-pass-country-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem .4rem;
    max-height: 220px; overflow-y: auto; overflow-x: hidden;
}
.tdp-pass-country-row {
    display: flex; align-items: center; gap: .35rem; font-size: .78rem;
    color: var(--sb-text); cursor: pointer; user-select: none;
    min-width: 0;
}
/* Lange Laendernamen werden gekuerzt, statt die Zeile zu sprengen — sonst
   entsteht ein waagerechter Rollbalken und die Pass-Anzahl verschwindet. */
.tdp-pass-country-row > span:nth-of-type(2) {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Farbbalken des Landes. Frueher ein 12-px-Kreis — der wurde in der schmalen
   Leiste zusammengequetscht und war kaum zu erkennen, ausserdem draengte er die
   Pass-Anzahl aus der Zeile. Der schmale, hohe Balken ist deutlicher sichtbar
   UND braucht weniger Platz. */
.tdp-pass-country-swatch {
    flex: 0 0 6px; width: 6px; height: 15px; border-radius: 3px;
    border: none; align-self: center;
}
.tdp-pass-country-count { font-size: .68rem; color: var(--sb-muted); flex: 0 0 auto; }

.tdp-pass-list {
    margin-top: .6rem; max-height: 50vh; overflow-y: auto;
    border-top: 1px solid var(--sb-border); padding-top: .4rem;
}
.tdp-pass-list-row {
    display: flex; align-items: center; gap: .4rem;
    padding: .35rem .2rem; border-bottom: 1px solid var(--sb-border);
    font-size: .78rem; cursor: pointer; color: var(--sb-text);
}
.tdp-pass-list-row:hover { background: var(--sb-bg2); }
.tdp-pass-list-row /* Farbbalken des Landes. Frueher ein 12-px-Kreis — der wurde in der schmalen
   Leiste zusammengequetscht und war kaum zu erkennen, ausserdem draengte er die
   Pass-Anzahl aus der Zeile. Der schmale, hohe Balken ist deutlicher sichtbar
   UND braucht weniger Platz. */
.tdp-pass-country-swatch {
    flex: 0 0 6px; width: 6px; height: 15px; border-radius: 3px;
    border: none; align-self: center;
}
.tdp-pass-list-name  { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdp-pass-list-ele   { font-size: .68rem; color: var(--sb-muted); margin-left: .3rem; }

/* ── Pässe-Marker (Form 1:1 wie GS-Route und TDM) ────────────────────────── */
.tdp-pass-pin svg {
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
/* Cluster: farbiger Kreis mit Halo, weißem Ring und Anzahl */
.tdp-pass-cluster-halo {
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.tdp-pass-cluster {
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 2px solid #fff;
    color: #fff; font-weight: 700; box-sizing: border-box;
    text-shadow: 0 0 2px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.6);
}
/* Name + Höhe ab Zoom 11. Dunkle Schrift mit weißem Halo — auf den hellen
   Kartenkacheln deutlich besser lesbar als weiße Schrift mit Schatten. */
.tdp-pass-label {
    position: absolute; left: 50%; top: 100%;
    transform: translate(-50%, 2px);
    white-space: nowrap; font-size: 11px; font-weight: 600;
    color: #1a1a1a; pointer-events: none;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 1px 0 #fff;
}
.tdp-pass-label small { font-weight: 400; opacity: .85; }

/* ── Routen-Aktionen im Pässe-Popup (Farben wie im GS-Route-Dialog) ──────── */
.tdp-pass-actions { display: flex; flex-direction: column; gap: 4px; margin-top: .5rem; }
.tdp-pass-act {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: .35rem .5rem; border: 0; border-radius: 4px;
    color: #fff; font-size: .76rem; font-weight: 600; cursor: pointer; text-align: center;
}
.tdp-pass-act:disabled { opacity: .4; cursor: default; }
.tdp-pass-act-start  { background: #2E7D32; }
.tdp-pass-act-append { background: #C62828; }
.tdp-pass-act-via    { background: #1565C0; }
/* Hover ändert nur die Farbe, nie die Größe */
.tdp-pass-act-start:hover:not(:disabled)  { background: #388E3C; color: #fff; }
.tdp-pass-act-append:hover:not(:disabled) { background: #B71C1C; color: #fff; }
.tdp-pass-act-via:hover:not(:disabled)    { background: #1976D2; color: #fff; }
.tdp-pass-popup-table { font-size: .8rem; line-height: 1.45; }
.tdp-pass-popup-table td:first-child { color: var(--sb-muted); padding-right: .7rem; }

/* Light theme overrides */
[data-theme="light"] .tdp-pass-list-row { color: #222; }
[data-theme="light"] .tdp-pass-country-row {
    display: flex; align-items: center; gap: .35rem; font-size: .78rem;
    color: var(--sb-text); cursor: pointer; user-select: none;
    min-width: 0;
}
/* Lange Laendernamen werden gekuerzt, statt die Zeile zu sprengen — sonst
   entsteht ein waagerechter Rollbalken und die Pass-Anzahl verschwindet. */
.tdp-pass-country-row > span:nth-of-type(2) {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-theme="light"] .tdp-pass-chk { color: #222; }
[data-theme="light"] .tdp-pass-filter-group > summary { color: #222; }
[data-theme="light"] .tdp-pass-popup-table td:first-child { color: #555; }

/* Map cursor: default arrow normally, grabbing while panning */
.leaflet-container { cursor: default !important; }
.leaflet-container.tdp-sv-active { cursor: crosshair !important; }
/* Arrow cursor instead of fist while dragging a waypoint marker */
.leaflet-marker-icon.wp-dragging { cursor: default !important; }
.leaflet-container.wp-marker-dragging { cursor: default !important; }

/* ── Street View panorama panel ─────────────────────────────────── */
.tdp-sv-panel {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 44vh; min-height: 260px;
    display: none; flex-direction: column;
    z-index: 9500;
    background: #111;
    box-shadow: 0 -4px 24px rgba(0,0,0,.7);
    border-top: 2px solid var(--tdp-accent, #e94560);
}
.tdp-sv-panel.open { display: flex; }
.tdp-sv-panel-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: .3rem .8rem; background: #1c1c1c; color: #bbb;
    font-size: .82rem; flex-shrink: 0; border-bottom: 1px solid #333;
}
.tdp-sv-panel-hdr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdp-sv-panel-close {
    background: none; border: none; color: #999; cursor: pointer;
    font-size: 1.1rem; line-height: 1; margin-left: .5rem; flex-shrink: 0;
}
.tdp-sv-panel-close:hover { color: #fff; }
.tdp-sv-panel-pano { flex: 1; overflow: hidden; }

/* Fullscreen state via Browser Fullscreen API */
.tdp-split-map:fullscreen,
.tdp-map:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
}
/* Ensure Leaflet canvas fills the fullscreen container */
.tdp-split-map:fullscreen #splitMapCanvas,
.tdp-map:fullscreen #map {
    width: 100% !important;
    height: 100% !important;
}
/* WebKit prefix (Safari) */
.tdp-split-map:-webkit-full-screen,
.tdp-map:-webkit-full-screen { width: 100vw !important; height: 100vh !important; display: block !important; }
.tdp-split-map:-webkit-full-screen #splitMapCanvas,
.tdp-map:-webkit-full-screen #map { width: 100% !important; height: 100% !important; }
/* Im Vollbild fuehrt „← Liste" nirgendwohin — die Vollbildregeln halten die Karte offen.
   Je Pseudoklasse eine eigene Regel: ein unbekannter Selektor verwirft sonst die ganze Liste. */
.tdp-split-map:fullscreen .tdp-map-close-btn { display: none; }
.tdp-split-map:-webkit-full-screen .tdp-map-close-btn { display: none; }
.tdp-split-map.tdp-map-fullscreen .tdp-map-close-btn { display: none; }

/* ══════════════════════════════════════════════════════════════
   Light / high-contrast theme  [data-theme="light"]
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
    --sb-bg:     #ffffff;
    --sb-bg2:    #f0f2f5;
    --sb-bg3:    #e2e6ea;
    --sb-border: #c5c9cf;
    --sb-text:   #1a1a1a;
    --sb-muted:  #4a4a4a;
    --sb-dim:    #777;
    --tdp-text:  #1a1a1a;
    --tdp-muted: #555;
}

/* Page backgrounds */
[data-theme="light"] body,
[data-theme="light"] .dark-body { background: #f0f2f5 !important; color: #1a1a1a !important; }
[data-theme="light"] .tdp-split-outer { background: #f0f2f5; }

/* Sidebar */
[data-theme="light"] .tdp-sidebar {
    background: #fff;
    border-right-color: #c5c9cf;
    box-shadow: 2px 0 8px rgba(0,0,0,.12);
}
[data-theme="light"] .tdp-sidebar-header {
    background: #e2e6ea;
    color: #1a1a1a;
    border-bottom-color: var(--tdp-accent);
}
[data-theme="light"] .tdp-sidebar-body { background: #fff; color: #1a1a1a; }

/* Split list */
[data-theme="light"] .tdp-split-list {
    background: #fff;
    border-right-color: #c5c9cf;
}

/* Tabs */
[data-theme="light"] .tdp-planner-tabs { border-bottom-color: #c5c9cf !important; background: #e2e6ea; }
[data-theme="light"] .tdp-planner-tabs .nav-link { color: #444 !important; }
[data-theme="light"] .tdp-planner-tabs .nav-link.active {
    background: #fff !important; color: #1a1a1a !important; border-color: #c5c9cf #c5c9cf #fff !important;
}

/* Section titles */
[data-theme="light"] .tdp-section-title { color: #555 !important; border-bottom-color: #ddd !important; }
[data-theme="light"] .tdp-section-collapsible:hover { color: var(--tdp-accent) !important; }

/* Form controls in sidebar */
[data-theme="light"] .tdp-sidebar .form-control,
[data-theme="light"] .tdp-sidebar .form-select {
    background: #f8f9fa; border-color: #bcc0c6; color: #1a1a1a;
}
[data-theme="light"] .tdp-sidebar .form-control:focus,
[data-theme="light"] .tdp-sidebar .form-select:focus {
    background: #fff; border-color: var(--tdp-accent); color: #1a1a1a;
    box-shadow: 0 0 0 .18rem rgba(255,140,0,.25);
}
[data-theme="light"] .tdp-sidebar label,
[data-theme="light"] .tdp-sidebar .form-check-label { color: #444 !important; }
[data-theme="light"] .tdp-sidebar label.btn-tdp { color: #fff !important; }
[data-theme="light"] .tdp-sidebar .form-check-input { background-color: #fff; border-color: #aaa; }

/* Track stat table */
[data-theme="light"] .tdp-track-stat-table td { color: #333 !important; border-color: #ddd !important; }
[data-theme="light"] .tdp-track-stat-table td:first-child { color: #666 !important; }

/* Route name, waypoints */
[data-theme="light"] .tdp-route-name { color: #1a1a1a !important; background: #e8ecf0 !important; border-color: var(--tdp-accent) !important; }
[data-theme="light"] .tdp-waypoint-row .form-control { background: #f8f9fa !important; color: #1a1a1a !important; border-color: #bcc0c6 !important; }
[data-theme="light"] .tdp-info-hint { background: #fff8e6; color: #7a5000; border-color: #f0c060 !important; }

/* Map hint */
[data-theme="light"] .tdp-split-hint { color: #bbb; }

/* Dark tables — full override */
[data-theme="light"] .tdp-split-list { background: #fff !important; color: #1a1a1a !important; }
[data-theme="light"] .tdp-dark-table { color: #1a1a1a !important; background: #fff !important; }
[data-theme="light"] .tdp-dark-table thead tr { background: #e2e6ea !important; border-bottom-color: var(--tdp-accent) !important; }
[data-theme="light"] .tdp-dark-table thead th { color: #222 !important; background: #e2e6ea !important; }
[data-theme="light"] .tdp-dark-table tbody tr { background: #fff !important; }
[data-theme="light"] .tdp-dark-table tbody tr td { color: #1a1a1a !important; border-color: #e0e0e0 !important; background: #fff !important; }
[data-theme="light"] .tdp-dark-table tbody tr td strong { color: #111 !important; }
[data-theme="light"] .tdp-dark-table tbody tr:hover td { background: #f0f4f8 !important; color: #1a1a1a !important; }
[data-theme="light"] .tdp-dark-table tbody tr.preview-active td { background: #fff3e0 !important; }
[data-theme="light"] .tdp-dark-table tbody tr.tdp-last-loaded td:first-child strong::before,
[data-theme="light"] .tdp-dark-table tbody tr.tdp-last-loaded td.tdp-col-check + td strong::before { color: var(--tdp-accent); }
[data-theme="light"] .tdp-page-title { color: #1a1a1a !important; }
[data-theme="light"] .tdp-page-title small { color: #666 !important; }

/* Dark search */
[data-theme="light"] .tdp-dark-search { background: #fff; border-color: #c5c9cf; }
[data-theme="light"] .tdp-dark-search .form-control,
[data-theme="light"] .tdp-dark-search .form-select { background: #f8f9fa; border-color: #bcc0c6; color: #1a1a1a; }
[data-theme="light"] .tdp-dark-search label { color: #555; }
[data-theme="light"] .tdp-dark-search .form-check-label { color: #333; }
[data-theme="light"] .tdp-dark-search .form-check-input { background-color: #fff; border-color: #aaa; }

/* Checkboxen im hellen Theme: orange Hintergrund + weißer Checkmark sichtbar */
[data-theme="light"] .form-check-input:checked {
    background-color: var(--tdp-accent) !important;
    border-color: var(--tdp-accent) !important;
}
[data-theme="light"] .form-check-input:focus {
    border-color: var(--tdp-accent) !important;
    box-shadow: 0 0 0 .2rem rgba(255,140,0,.25) !important;
}

/* Dark page / split list content */
[data-theme="light"] .tdp-dark-sub { color: var(--tdp-accent); border-bottom-color: #ddd; }
[data-theme="light"] .tdp-dark-empty { color: #999; }
[data-theme="light"] .tdp-desc { color: #555 !important; }

/* Map layer panel */
[data-theme="light"] .tdp-maplayer-toggle { background: #e2e6ea !important; color: #333 !important; border-color: #c5c9cf !important; }
[data-theme="light"] .tdp-maplayer-toggle:hover { background: #d0d5db !important; }
[data-theme="light"] .tdp-maplayer-grid { background: #f0f2f5 !important; border-color: #c5c9cf !important; }
[data-theme="light"] .tdp-maplayer-btn { background: #fff !important; color: #333 !important; border-color: #c5c9cf !important; }
[data-theme="light"] .tdp-maplayer-btn:hover { background: #e8ecf0 !important; }
[data-theme="light"] .tdp-maplayer-btn.active { background: var(--tdp-accent) !important; color: #fff !important; }

/* Panel strip & collapse */
[data-theme="light"] .tdp-panel-strip { background: #e2e6ea; border-color: #c5c9cf; }
[data-theme="light"] .tdp-panel-collapse-btn { color: #555; }
[data-theme="light"] .tdp-panel-collapse-btn:hover { color: #1a1a1a; background: rgba(0,0,0,.08); }

/* Modal */
[data-theme="light"] .modal-dark .modal-content { background: #fff; border-color: #c5c9cf; color: #1a1a1a; }
[data-theme="light"] .modal-dark .modal-header,
[data-theme="light"] .modal-dark .modal-footer  { background: #f0f2f5; border-color: #c5c9cf; }
[data-theme="light"] .modal-dark .modal-title   { color: #1a1a1a; }

/* Navbar switches to light style */
[data-theme="light"] .tdp-navbar               { background: #fff !important; border-bottom-color: var(--tdp-accent); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
[data-theme="light"] .tdp-navbar .nav-link     { color: #333 !important; }
[data-theme="light"] .tdp-navbar .nav-link:hover { color: var(--tdp-accent) !important; }
[data-theme="light"] .tdp-brand,
[data-theme="light"] .tdp-brand-name           { color: #1a1a1a !important; }
[data-theme="light"] .tdp-brand-sub            { color: var(--tdp-accent) !important; }
[data-theme="light"] .tdp-username             { color: #666 !important; }
[data-theme="light"] .tdp-toggler              { border-color: #bbb !important; }
[data-theme="light"] .tdp-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2850,50,50,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
[data-theme="light"] #tdpNavCollapse           { background: #fff !important; border-top-color: #e0e0e0 !important; }
[data-theme="light"] #tdpNavCollapse .nav-link { color: #333 !important; border-bottom-color: #eee !important; }
[data-theme="light"] .tdp-nav-ai              { color: #333 !important; }
[data-theme="light"] .tdp-lang-menu           { background: #fff !important; border-color: #ddd !important; box-shadow: 0 4px 12px rgba(0,0,0,.12) !important; }
[data-theme="light"] .tdp-lang-item           { color: #333 !important; }
[data-theme="light"] .tdp-lang-item:hover,
[data-theme="light"] .tdp-lang-item:focus     { background: #f0f2f5 !important; color: #1a1a1a !important; }
[data-theme="light"] .tdp-lang-item.active    { background: var(--tdp-accent) !important; color: #fff !important; }
[data-theme="light"] .tdp-theme-btn  { border-color: rgba(0,0,0,.2) !important; color: #333; }
[data-theme="light"] .tdp-lang-toggle { border-color: rgba(0,0,0,.2) !important; }
[data-theme="light"] .tdp-lang-toggle:hover { background: rgba(0,0,0,.06) !important; border-color: rgba(0,0,0,.35) !important; }

/* AiRoute page */
[data-theme="light"] .air-page          { background: #f0f2f5 !important; color: #1a1a1a !important; }
[data-theme="light"] .air-subtitle      { color: #555 !important; }
[data-theme="light"] .air-label         { color: #555 !important; }
[data-theme="light"] .air-input         { background: #fff !important; border-color: #bcc0c6 !important; color: #1a1a1a !important; }
[data-theme="light"] .air-input:focus   { background: #fff !important; border-color: var(--tdp-accent) !important; color: #1a1a1a !important; }
[data-theme="light"] .air-prompt-toggle { background: #e8ecf0 !important; color: #333 !important; border-color: #bcc0c6 !important; }
[data-theme="light"] .air-prompt-toggle:hover { background: #d8dde3 !important; color: #1a1a1a !important; }
[data-theme="light"] .air-prompt-select { background: #fff !important; border-color: #bcc0c6 !important; color: #1a1a1a !important; }
[data-theme="light"] .air-prompt-text   { background: #fff !important; border-color: #bcc0c6 !important; color: #1a1a1a !important; }
[data-theme="light"] .air-prompt-toolbar { background: #e8ecf0 !important; border-color: #bcc0c6 !important; }
[data-theme="light"] .air-result-wrap   { background: #fff !important; border-color: #bcc0c6 !important; }
[data-theme="light"] .air-result-toolbar { background: #e8ecf0 !important; border-color: #bcc0c6 !important; }
[data-theme="light"] .air-result-label  { color: #555 !important; }
[data-theme="light"] .air-result-frame  { background: #fff !important; }
[data-theme="light"] .btn-air-danger    { background: #8b1500 !important; color: #fff !important; }
[data-theme="light"] .btn-air-danger:hover { background: #6e1000 !important; }

/* General dark-page / dark-body content */
[data-theme="light"] .tdp-dark-page     { background: #f0f2f5 !important; color: #1a1a1a !important; }
[data-theme="light"] .tdp-dark-inner    { color: #1a1a1a; }

/* Dark-page badges → light versions in light theme */
[data-theme="light"] .tdp-dark-page .badge-track   { background: #e8f0fe !important; color: #1a73c8 !important; }
[data-theme="light"] .tdp-dark-page .badge-route   { background: #fce8e6 !important; color: #c01800 !important; }
[data-theme="light"] .tdp-dark-page .badge-public  { background: #d4edda !important; color: #155724 !important; }
[data-theme="light"] .tdp-dark-page .badge-private { background: #fff3cd !important; color: #856404 !important; }

/* Dark buttons → light in light theme */
[data-theme="light"] .btn-tdp-secondary {
    background: #e8ecf0 !important; color: #1a1a1a !important;
    border-color: #bcc0c6 !important;
}
[data-theme="light"] .btn-tdp-secondary:hover {
    background: #d8dde3 !important; border-color: var(--tdp-accent) !important; color: #1a1a1a !important;
}
/* Kommentar-Knopf: die Signalfarbe (grau = kein, orange = Kommentar) gilt in BEIDEN Themes —
   die !important-Textfarbe von .btn-tdp-secondary darueber darf sie nicht ueberschreiben. */
[data-theme="light"] .wp-comment-btn,
[data-theme="light"] .wp-comment-btn:hover { color: #a0a0a0 !important; }
[data-theme="light"] .wp-comment-btn.has-comment,
[data-theme="light"] .wp-comment-btn.has-comment:hover { color: #ffa500 !important; }
[data-theme="light"] .btn-air-secondary {
    background: #e8ecf0 !important; color: #1a1a1a !important;
    border-color: #bcc0c6 !important;
}
[data-theme="light"] .btn-air-secondary:hover {
    background: #d8dde3 !important; color: #1a1a1a !important;
}
[data-theme="light"] .btn-air-icon {
    background: #e8ecf0 !important; color: #333 !important;
    border-color: #bcc0c6 !important;
}
[data-theme="light"] .btn-air-icon:hover { background: #d8dde3 !important; color: #1a1a1a !important; }
[data-theme="light"] .btn-icon {
    background: none !important; color: #444 !important;
}
[data-theme="light"] .btn-icon:hover { background: #e0e4e8 !important; }
[data-theme="light"] .btn-icon-danger:hover { background: #fce8e6 !important; color: #c01800 !important; }
[data-theme="light"] #viaToggleRow .btn-tdp-secondary {
    background: #e8ecf0 !important; color: #333 !important; border-color: #bcc0c6 !important;
}
[data-theme="light"] #viaToggleRow .btn-tdp-secondary:hover {
    background: #d8dde3 !important; border-color: var(--tdp-accent) !important;
}
[data-theme="light"] .btn-air-primary:disabled { background: #bbb !important; }

/* ── Modal border — separates overlapping dark dialogs ───────────────────── */
.tdp-dark-modal { border: 1px solid #555 !important; border-radius: 10px !important; overflow: hidden !important; }

/* ── Export & Settings Modal (light theme) ───────────────────────────────── */
[data-theme="light"] .tdp-dark-modal                  { background: #fff !important; color: #1a1a1a !important; border: 1px solid #c5c9cf !important; border-radius: 10px !important; overflow: hidden !important; }
[data-theme="light"] .tdp-dark-modal .modal-body      { background: #f8f9fa !important; }
[data-theme="light"] .tdp-dark-modal .modal-footer    { background: #e2e6ea !important; border-top-color: #c5c9cf !important; }
[data-theme="light"] .tdp-dark-modal .modal-header    { background: #e2e6ea !important; border-bottom-color: var(--tdp-accent) !important; }
[data-theme="light"] .tdp-dark-modal .modal-title     { color: #1a1a1a !important; }
[data-theme="light"] .tdp-dark-modal .btn-close-white { filter: invert(1) !important; }

/* Export profile list */
[data-theme="light"] .exp-profile-list               { background: #fff !important; border-color: #c5c9cf !important; }
[data-theme="light"] .exp-cat-label                  { color: #666 !important; }
[data-theme="light"] .exp-profile-item:hover         { background: #f0f2f5 !important; }
[data-theme="light"] .exp-profile-item.active        { background: #fff3e0 !important; border-left-color: var(--tdp-accent) !important; }
[data-theme="light"] .exp-edit-btn                   { color: #555 !important; }
[data-theme="light"] .exp-edit-btn:hover             { background: #e0e4e8 !important; color: var(--tdp-accent) !important; }

/* Export description pane */
[data-theme="light"] .exp-desc-box                   { color: #555 !important; }
[data-theme="light"] .exp-desc-box h6                { color: #1a1a1a !important; }
[data-theme="light"] .exp-desc-box img               { border-color: #c5c9cf !important; }

/* Settings dialog rows */
[data-theme="light"] .exp-edit-label                 { color: #555 !important; }
[data-theme="light"] .exp-edit-section               { border-color: #c5c9cf !important; background: #fff !important; }
[data-theme="light"] .exp-edit-row                   { border-bottom-color: #e0e4e8 !important; }
[data-theme="light"] .exp-edit-row-label             { color: #555 !important; }
[data-theme="light"] .exp-edit-check                 { border-bottom-color: #e0e4e8 !important; }
[data-theme="light"] .exp-edit-check label           { color: #1a1a1a !important; }
[data-theme="light"] .exp-edit-section .form-control,
[data-theme="light"] .exp-edit-section .form-select  { background: #f8f9fa !important; border-color: #bcc0c6 !important; color: #1a1a1a !important; }
[data-theme="light"] #expError                       { background: #fde8d8 !important; color: #7a2e00 !important; border-color: #f5c6a0 !important; }
[data-theme="light"] #expStatus                      { color: #555 !important; }

/* Theme toggle button */
.tdp-theme-btn {
    background: none; border: 1px solid rgba(255,255,255,.3);
    color: var(--tdp-text); border-radius: 6px;
    padding: 0 .5rem; height: 30px; cursor: pointer; font-size: 1rem;
    line-height: 1; transition: background .15s, border-color .15s;
    display: flex; align-items: center; justify-content: center;
}
.tdp-theme-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }


/* ══════════════════════════════════════════════════════════════
   Freunde, Profile und Nutzersuche  (/Friends/*)
   ══════════════════════════════════════════════════════════════ */
.tdp-friends-page,
.tdp-profile-page,
.tdp-profile-view { max-width: 1180px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

.tdp-friends-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ── Reiter ─────────────────────────────────────────────────── */
.tdp-tabs { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--sb-border); margin: .75rem 0 1.25rem; }
.tdp-tab {
    padding: .55rem .95rem; border-radius: 6px 6px 0 0; text-decoration: none;
    color: var(--sb-muted); border: 1px solid transparent; border-bottom: none;
    display: inline-flex; align-items: center; gap: .4rem;
}
.tdp-tab:hover  { color: var(--tdp-accent); }
.tdp-tab.active { color: var(--tdp-accent); background: var(--sb-bg2); border-color: var(--sb-border); }
[data-theme="light"] .tdp-tab        { color: #5a6a7b; }
[data-theme="light"] .tdp-tab.active { background: #ffffff; border-color: #dde3e9; color: var(--tdp-accent); }

.tdp-badge {
    background: var(--tdp-accent); color: #fff; border-radius: 999px;
    font-size: .75rem; line-height: 1; padding: .2rem .45rem; font-weight: 700;
}

/* ── Karten ─────────────────────────────────────────────────── */
.tdp-card {
    background: var(--sb-bg2); border: 1px solid var(--sb-border); border-radius: 10px;
    padding: 1.1rem 1.25rem; margin-bottom: 1.25rem;
}
[data-theme="light"] .tdp-card { background: #ffffff; border-color: #dde3e9; }

.tdp-card-title { font-size: 1.05rem; font-weight: 600; color: var(--tdp-accent); margin: .35rem 0 .75rem; }
.tdp-section-title { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 .75rem; color: var(--sb-text); }
[data-theme="light"] .tdp-section-title { color: #22303f; }

.tdp-hint  { display: block; color: var(--sb-muted); font-size: .85rem; margin: .15rem 0 .5rem; }
.tdp-empty { color: var(--sb-muted); font-style: italic; padding: .75rem 0; }
.tdp-profile-lead { color: var(--sb-muted); max-width: 62ch; }
.tdp-profile-alert { max-width: 62ch; }

/* ── Profilbild ─────────────────────────────────────────────── */
.tdp-avatar {
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 2px solid var(--sb-border); background: var(--sb-bg3);
}
.tdp-avatar-lg { width: 128px; height: 128px; }
.tdp-avatar-empty {
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff; font-size: 1.4rem;
    background: linear-gradient(135deg, var(--tdp-accent), var(--tdp-accent2));
    border-color: transparent;
}
.tdp-avatar-lg.tdp-avatar-empty { font-size: 3rem; }

.tdp-avatar-block   { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.tdp-avatar-actions { display: flex; flex-direction: column; gap: .6rem; min-width: 240px; flex: 1; }
.tdp-avatar-form    { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ── Formular ───────────────────────────────────────────────── */
.tdp-field        { margin-bottom: 1rem; }
.tdp-field-narrow { max-width: 320px; }
.tdp-check        { margin-bottom: .9rem; }
.tdp-form-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* ── Chips zum Ankreuzen ────────────────────────────────────── */
.tdp-chip-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.tdp-chip {
    display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
    padding: .4rem .75rem; border-radius: 999px; margin: 0;
    border: 1px solid var(--sb-border); background: var(--sb-bg3); color: var(--sb-text);
    font-size: .9rem; user-select: none;
}
.tdp-chip:hover { border-color: var(--tdp-accent); }
.tdp-chip input { margin: 0; }
.tdp-chip:has(input:checked) {
    border-color: var(--tdp-accent); background: rgba(255,140,0,.14); color: var(--tdp-accent);
}
[data-theme="light"] .tdp-chip { background: #f5f7f9; border-color: #dde3e9; color: #22303f; }
[data-theme="light"] .tdp-chip:has(input:checked) { background: rgba(255,140,0,.12); color: #b45f00; }

/* ── Suche und Filter ───────────────────────────────────────── */
.tdp-search-panel  { margin-bottom: 1.25rem; }
.tdp-search-row    { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.tdp-search-row .form-control { max-width: 380px; }
.tdp-filter-details  { border: 1px solid var(--sb-border); border-radius: 10px; padding: .75rem 1rem; background: var(--sb-bg2); }
[data-theme="light"] .tdp-filter-details { background: #ffffff; border-color: #dde3e9; }
.tdp-filter-details summary { cursor: pointer; font-weight: 600; color: var(--tdp-accent); }
.tdp-filter-group  { margin-top: 1rem; }
.tdp-filter-group h3 { font-size: .95rem; color: var(--sb-muted); margin-bottom: .5rem; }
.tdp-filter-narrow { max-width: 320px; }
.tdp-filter-actions { margin-top: .5rem; }
.tdp-result-count  { color: var(--sb-muted); font-size: .9rem; }

/* ── Nutzerkarten ───────────────────────────────────────────── */
.tdp-user-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.tdp-user-card {
    background: var(--sb-bg2); border: 1px solid var(--sb-border); border-radius: 10px;
    padding: 1rem; display: flex; flex-direction: column; gap: .7rem;
}
[data-theme="light"] .tdp-user-card { background: #ffffff; border-color: #dde3e9; }

.tdp-user-card-head  { display: flex; gap: .8rem; align-items: center; text-decoration: none; color: inherit; }
.tdp-user-card-head:hover .tdp-user-card-name { color: var(--tdp-accent); }
.tdp-user-card-names { display: flex; flex-direction: column; min-width: 0; }
.tdp-user-card-name  { font-weight: 600; font-size: 1.05rem; color: var(--sb-text); overflow: hidden; text-overflow: ellipsis; }
[data-theme="light"] .tdp-user-card-name { color: #22303f; }
.tdp-user-card-handle,
.tdp-user-card-location { font-size: .85rem; color: var(--sb-muted); }

.tdp-user-card-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.tdp-tag {
    font-size: .78rem; padding: .18rem .55rem; border-radius: 999px;
    border: 1px solid var(--sb-border); color: var(--sb-muted); white-space: nowrap;
}
.tdp-tag-interest { border-color: rgba(255,140,0,.5); color: var(--tdp-accent); }
.tdp-tag-region   { border-color: rgba(90,150,220,.5); color: #6fa8dc; }
.tdp-tag-native   { border-color: rgba(80,190,120,.6); color: #64c37d; }

.tdp-user-card-meta { display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; margin: 0; font-size: .85rem; }
.tdp-user-card-meta dt { color: var(--sb-muted); font-weight: 500; }
.tdp-user-card-meta dd { margin: 0; color: var(--sb-text); overflow: hidden; text-overflow: ellipsis; }
[data-theme="light"] .tdp-user-card-meta dd { color: #22303f; }

.tdp-user-card-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: auto; }
.tdp-user-card-actions form { margin: 0; display: inline-flex; gap: .4rem; align-items: center; }

.tdp-rel-state { font-size: .82rem; color: var(--sb-muted); }
.tdp-rel-friends { color: #64c37d; }
.tdp-rel-blocked { color: #e06c6c; }

/* ── Garage ─────────────────────────────────────────────────── */
.tdp-garage-form {
    display: grid; gap: .5rem; margin-top: .9rem;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    align-items: center;
}
.tdp-garage-table td, .tdp-garage-table th { vertical-align: middle; }
.tdp-garage-table form { margin: 0; }
.tdp-garage-list { list-style: none; padding: 0; margin: 0; }
.tdp-garage-list li { padding: .35rem 0; border-bottom: 1px solid var(--sb-border); }
.tdp-garage-list li:last-child { border-bottom: none; }
.tdp-garage-year { color: var(--sb-muted); margin-left: .5rem; }
.tdp-garage-nick { color: var(--tdp-accent); margin-left: .5rem; font-style: italic; }

/* ── Profilansicht ──────────────────────────────────────────── */
.tdp-profile-header  { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.5rem; }
.tdp-profile-headtext { display: flex; flex-direction: column; gap: .4rem; min-width: 260px; flex: 1; }
.tdp-profile-bio     { white-space: pre-wrap; margin: 0; max-width: 70ch; }
.tdp-back-link       { margin-top: 1.5rem; }
.tdp-back-link a     { color: var(--sb-muted); text-decoration: none; }
.tdp-back-link a:hover { color: var(--tdp-accent); }

/* ── Mobil ──────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .tdp-avatar-lg { width: 96px; height: 96px; }
    .tdp-avatar-lg.tdp-avatar-empty { font-size: 2.2rem; }
    .tdp-user-grid { grid-template-columns: 1fr; }
    .tdp-search-row .form-control { max-width: none; }
}

/* Die Sidebar-Variante von .btn-tdp ist voll breit — in den Freunde-Seiten
   sollen Schaltflaechen nur so breit sein wie ihr Text. */
.tdp-friends-page .btn-tdp,
.tdp-profile-page .btn-tdp,
.tdp-profile-view .btn-tdp {
    width: auto; margin-top: 0; display: inline-flex; white-space: nowrap;
}
.tdp-friends-page .btn-tdp.btn-sm,
.tdp-profile-page .btn-tdp.btn-sm,
.tdp-profile-view .btn-tdp.btn-sm { font-size: .8rem; padding: .35rem .7rem; }


/* ══════════════════════════════════════════════════════════════
   Stufe 2 und 3: Sichtbarkeit, Feed, Mitarbeit
   ══════════════════════════════════════════════════════════════ */

/* Dritte Sichtbarkeitsstufe neben badge-private / badge-public */
.badge-friends { background: rgba(90,150,220,.18); color: #6fa8dc; border: 1px solid rgba(90,150,220,.45); }
.badge-edited  { background: rgba(255,140,0,.16);  color: var(--tdp-accent); border: 1px solid rgba(255,140,0,.45);
                 margin-left: .35rem; }
[data-theme="light"] .badge-friends { background: #e8f0fa; color: #2c6ca8; }
[data-theme="light"] .badge-edited  { background: #fdf0e0; color: #b45f00; }

/* Aktives Mitarbeit-Symbol in der Aktionsspalte */
.btn-icon-active { color: var(--tdp-accent); }

.tdp-social-alert { max-width: 62ch; margin: .75rem auto; }

/* ── Feed und Freigaben ─────────────────────────────────────── */
.tdp-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.tdp-feed-item {
    display: flex; align-items: center; gap: .85rem; padding: .75rem 1rem;
    background: var(--sb-bg2); border: 1px solid var(--sb-border); border-radius: 10px;
}
[data-theme="light"] .tdp-feed-item { background: #ffffff; border-color: #dde3e9; }
.tdp-feed-icon { font-size: 1.3rem; flex-shrink: 0; }
.tdp-feed-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tdp-feed-name { font-weight: 600; color: var(--sb-text); text-decoration: none;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdp-feed-name:hover { color: var(--tdp-accent); }
[data-theme="light"] .tdp-feed-name { color: #22303f; }
.tdp-feed-meta { font-size: .82rem; color: var(--sb-muted); }

/* ── Einladungsdialog ───────────────────────────────────────── */
.tdp-modal { background: var(--sb-bg2); border: 1px solid var(--sb-border); color: var(--sb-text); }
[data-theme="light"] .tdp-modal { background: #ffffff; border-color: #dde3e9; color: #22303f; }
.tdp-modal .modal-header, .tdp-modal .modal-footer { border-color: var(--sb-border); }
.tdp-collab-route { font-weight: 600; color: var(--tdp-accent); margin: 0 0 .75rem; }
.tdp-collab-label { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em;
                    color: var(--sb-muted); margin: 0 0 .35rem; }
.tdp-collab-list  { list-style: none; padding: 0; margin: 0 0 1rem; }
.tdp-collab-list li { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
                      padding: .35rem 0; border-bottom: 1px solid var(--sb-border); font-size: .9rem; }
.tdp-collab-list li:last-child { border-bottom: none; }

/* ── Hinweisstreifen im Planer ──────────────────────────────── */
.tdp-collab-banner {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .7rem 1rem; margin: 0 0 .5rem;
    background: rgba(255,140,0,.12); border: 1px solid rgba(255,140,0,.45);
    border-radius: 8px; color: var(--sb-text);
}
[data-theme="light"] .tdp-collab-banner { background: #fdf3e6; color: #22303f; }
.tdp-collab-banner-icon { font-size: 1.3rem; }
.tdp-collab-banner-text { flex: 1; min-width: 240px; font-size: .9rem; line-height: 1.45; }
.tdp-collab-comment { max-width: 320px; }
.tdp-collab-banner .btn-tdp { width: auto; margin-top: 0; display: inline-flex; white-space: nowrap; }
.tdp-collab-banner-done { opacity: .55; }

@media (max-width: 575px) {
    .tdp-collab-comment { max-width: none; width: 100%; }
    .tdp-feed-item { flex-wrap: wrap; }
}


/* Seit Stufe 2/3 stehen in "Meine Tracks" und "Meine Routen" bis zu sechs Symbole
   in der Aktionsspalte (Sichtbarkeit, Benachrichtigen, Mitarbeit). Die alte Breite
   von 178 px reichte dafuer nicht — die letzten Symbole fielen aus dem Panel. */
@media (min-width: 768px) {
    .tdp-split-list .tdp-dark-table th.tdp-col-actions { width: 236px; }
    .tdp-split-list .tdp-dark-table th.tdp-col-sm-hide { width: 138px; }
}
.tdp-split-list .tdp-dark-table td.tdp-col-actions .btn-icon { padding-left: 2px; padding-right: 2px; }
.tdp-split-list .tdp-dark-table .badge-type { white-space: nowrap; }


/* Blaetter-Leiste unter der Trefferliste */
.tdp-pager { display: flex; align-items: center; justify-content: center; gap: .75rem;
             margin: 1.5rem 0 .5rem; flex-wrap: wrap; }
.tdp-pager-state { color: var(--sb-muted); font-size: .9rem; }
.tdp-pager-off { opacity: .35; cursor: default; pointer-events: none; }

/* ── Cloud-Archiv ──────────────────────────────────────────────────────────
   Zweispaltig: Ordnerbaum links, Inhalt rechts. Unter 900px stapeln sie sich,
   damit die Liste auf dem Telefon die volle Breite bekommt. */
.tdp-arc-head       { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin-bottom:.25rem; }
.tdp-arc-quota      { color: var(--sb-muted); font-size:.9rem; font-variant-numeric: tabular-nums; }
.tdp-arc-intro      { max-width: 70ch; margin-bottom: 1rem; }

.tdp-arc-layout     { display:flex; gap:1.25rem; align-items:flex-start; }
.tdp-arc-tree       { flex:0 0 250px; min-width:0; }
.tdp-arc-content    { flex:1; min-width:0; }
@media (max-width: 900px) {
  .tdp-arc-layout   { flex-direction:column; }
  .tdp-arc-tree     { flex:1 1 auto; width:100%; }
}

.tdp-arc-folders    { list-style:none; margin:0 0 .75rem; padding:0; }
.tdp-arc-folder     { display:flex; align-items:center; gap:.45rem; padding:.35rem .5rem; border-radius:4px;
                      color: var(--sb-text); text-decoration:none; font-size:.92rem; }
.tdp-arc-folder:hover  { background: rgba(255,140,0,.12); color: var(--sb-text); }
.tdp-arc-folder.active { background: rgba(255,140,0,.20); color: var(--tdp-accent); font-weight:600; }
.tdp-arc-folder-name   { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tdp-arc-folder-count  { color: var(--sb-muted); font-size:.8rem; font-variant-numeric: tabular-nums; }

.tdp-arc-newfolder  { display:flex; gap:.35rem; }
.tdp-arc-toolbar    { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin-bottom:.75rem; }
.tdp-arc-folder-title { margin:0; font-size:1.05rem; }
.tdp-arc-actions    { display:flex; gap:.5rem; align-items:center; }
.tdp-arc-danger     { color:#e06c6c; }
.tdp-arc-type       { margin-left:.35rem; opacity:.75; }
.tdp-arc-bulk       { display:flex; align-items:center; gap:.75rem; margin-top:.75rem; flex-wrap:wrap; }

.tdp-quota-badge    { margin-left:.5rem; font-size:.72rem; color: var(--sb-muted);
                      border:1px solid var(--sb-border); border-radius:10px; padding:.1rem .5rem;
                      font-variant-numeric: tabular-nums; vertical-align:middle; white-space:nowrap; }.tdp-arc-sep        { flex:0 0 1px; align-self:stretch; background: var(--sb-border); margin:0 .35rem; }
.tdp-arc-selectall  { display:flex; align-items:center; gap:.4rem; font-size:.85rem; color: var(--sb-muted); }.tdp-arc-rename     { display:flex; gap:.35rem; align-items:center; }
.tdp-arc-rename input { width: 190px; }
/* ── Bearbeitete Fassungen ─────────────────────────────────────────────────
   Ordnerdarstellung wie im Dateiexplorer: Original als Zeile, Fassungen
   eingerueckt darunter, jede in ihrer Palettenfarbe aus GS-Route. */
.tdp-ver-toggle   { background:none; border:none; padding:0 .35rem 0 0; cursor:pointer; color: var(--sb-muted);
                    font-size:.9rem; line-height:1; }
.tdp-ver-toggle:hover { color: var(--tdp-accent); }
.tdp-ver-sign     { font-weight:700; margin-right:.15rem; font-variant-numeric: tabular-nums; }
.tdp-ver-folder   { font-size:.95rem; }

.tdp-ver-row      { background: rgba(255,255,255,.03); }
.tdp-ver-name     { padding-left: 2.2rem !important; }
/* Das Kaestchen traegt die Farbe der Fassung (accent-color) und schaltet sie
   zugleich auf der Karte ein — deshalb gibt es keinen separaten Vorschau-Knopf. */
.tdp-ver-check    { width:14px; height:14px; margin:0 .5rem 0 0; vertical-align:middle;
                    position:relative; top:1px; flex-shrink:0; cursor:pointer; }
.tdp-ver-editor   { font-size:.9rem; }
.tdp-ver-comment  { color: var(--sb-muted); font-size:.8rem; font-style:italic; margin-top:.15rem;
                    overflow:hidden; text-overflow:ellipsis; }
.tdp-ver-delta    { color: var(--sb-muted); font-size:.78rem; margin-left:.35rem; font-variant-numeric: tabular-nums; }
/* ── TDM-Debug-Seite ───────────────────────────────────────────────────────
   Breiter Container, gleich breite Schaltflächen und Spalten, die von rechts
   nach links verschwinden. Session und Schaltflächen bleiben immer stehen. */
.tdp-dbg-wrap     { width:100%; max-width:1800px; margin:0 auto; padding-left:1rem; padding-right:1rem; }

.tdp-dbg-table    { width:100%; }
.tdp-dbg-id       { font-size:.75rem; }

/* Vier gleich große Symbolschaltflächen nebeneinander. Symbole statt Text
   halten die Spalte in jeder Sprache gleich breit — Wortlängen schwanken
   stark (»Download« vs. »Скачать« vs. »ダウンロード«). Der Sinn steht im
   Tooltip und ist damit übersetzbar, ohne das Layout zu verschieben. */
.tdp-dbg-btns          { display:flex; flex-direction:row; gap:.25rem; align-items:center; }
.tdp-dbg-btns form     { display:inline-flex; margin:0; }
.tdp-dbg-btns .btn-icon { width:34px; height:34px; display:inline-flex; align-items:center;
                          justify-content:center; font-size:1rem; line-height:1; }
.tdp-dbg-actions       { width:1%; white-space:nowrap; vertical-align:middle; }

/* Lange Kommentare werden gekürzt statt umgebrochen; vollständig im Details-Fenster. */
.tdp-dbg-comment  { max-width:520px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Filter, Haken und Sammel-Loeschen (02.11.2026) */
.tdp-dbg-filter .form-label { font-size:.8rem; color: var(--sb-muted); margin-bottom:.2rem; }
.tdp-dbg-check    { width:1%; vertical-align:middle; padding-right:.25rem; }
.tdp-dbg-check .form-check-input { cursor:pointer; }
.tdp-dbg-sort     { color:inherit; text-decoration:none; }
.tdp-dbg-sort:hover { text-decoration:underline; color:inherit; }
.tdp-dbg-userlink { color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; }
.tdp-dbg-userlink:hover { color: var(--tdp-accent, #e07020); }
.tdp-dbg-bulk     { font-size:.9rem; }

.tdp-dbg-dl       { display:grid; grid-template-columns:auto 1fr; gap:.3rem 1rem; margin-bottom:1rem; }
.tdp-dbg-dl dt    { color: var(--sb-muted); font-weight:600; font-size:.85rem; }
.tdp-dbg-dl dd    { margin:0; word-break:break-all; }
#dbgD_comment     { white-space:pre-wrap; }

/* Von rechts nach links ausblenden: Größe → Dateien → Kommentar → Datum → Nutzer */
@media (max-width: 1500px) { .tdp-dbg-comment { max-width:340px; } }
@media (max-width: 1280px) { .tdp-dbg-h1 { display:none; } }
@media (max-width: 1100px) { .tdp-dbg-h2 { display:none; } }
@media (max-width:  920px) { .tdp-dbg-h3 { display:none; } }
@media (max-width:  760px) { .tdp-dbg-h4 { display:none; } }
@media (max-width:  620px) { .tdp-dbg-h5 { display:none; } }
/* Ebenen-Schalter oben in den Planer-Tabs (Pässe, POIs) */
.tdp-layer-toggle       { display:flex; align-items:center; gap:.5rem; padding:.45rem .55rem; margin-bottom:.6rem;
                          border:1px solid var(--sb-border); border-radius:6px; cursor:pointer;
                          font-size:.85rem; font-weight:600; color: var(--sb-text); }
.tdp-layer-toggle:hover { border-color: var(--tdp-accent); }
/* Rechnerisch sitzt das Kaestchen exakt mittig — optisch wirkt es zu hoch, weil
   die Zeilenbox (20,4 px) hoeher ist als das Kaestchen (13 px) und Unterlaengen
   wie in "anzeigen" die sichtbare Schrift nach unten ziehen. 1 px Ausgleich. */
.tdp-layer-toggle input { margin:0; cursor:pointer; position:relative; top:1px; flex-shrink:0; }
/* ── Auswahlzeilen in den Planer-Tabs ──────────────────────────────────────
   Die Sammelregel „.tdp-tab-content label { display:block }" weiter oben ist
   spezifischer als eine reine Klasse und setzt sonst Flexbox ausser Kraft —
   dadurch verschwindet der Abstand zwischen Kaestchen und Text, und das
   Kaestchen faellt auf die Grundlinie. Deshalb hier mit gleicher Spezifitaet
   dagegenhalten. */
.tdp-tab-content label.tdp-pass-chk,
.tdp-tab-content label.tdp-pass-country-row,
.tdp-tab-content label.tdp-layer-toggle,
.tdp-sidebar-body label.tdp-pass-chk,
.tdp-sidebar-body label.tdp-pass-country-row,
.tdp-sidebar-body label.tdp-layer-toggle {
    display: flex; align-items: center; margin-bottom: 0;
    font-weight: 600; color: var(--sb-text);
}
.tdp-tab-content label.tdp-pass-chk,
.tdp-sidebar-body label.tdp-pass-chk          { gap: .45rem; font-size: .82rem; }
.tdp-tab-content label.tdp-pass-country-row,
.tdp-sidebar-body label.tdp-pass-country-row  { gap: .35rem; font-size: .78rem; font-weight: 500; }
.tdp-tab-content label.tdp-layer-toggle,
.tdp-sidebar-body label.tdp-layer-toggle      { gap: .5rem;  font-size: .85rem; }
/* ── Gemeinsame Bearbeitung: Abstammung, Verlauf, Papierkorb ───────────────── */
.badge-locked        { background: rgba(255,140,0,.18); color: var(--tdp-accent); border:1px solid rgba(255,140,0,.35); }
.tdp-ver-parent      { color: var(--sb-muted); font-size:.75rem; margin-left:.4rem; }
.tdp-ver-section     { margin:1rem 0 .5rem; font-size:.9rem; color: var(--sb-muted);
                       text-transform:uppercase; letter-spacing:.06em; }
.tdp-ver-section:first-child { margin-top:0; }
.tdp-ver-history     { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.tdp-ver-history li  { font-size:.88rem; }
.tdp-ver-hist-at     { color: var(--sb-muted); font-size:.78rem; margin-right:.4rem;
                       font-variant-numeric: tabular-nums; }
.tdp-ver-trash-row   { display:flex; align-items:center; gap:.75rem; padding:.35rem 0;
                       border-bottom:1px solid var(--sb-border); font-size:.88rem; }
.tdp-ver-trash-row form { margin:0; margin-left:auto; }.tdp-shared-version   { padding-left:2.2rem; background: rgba(255,255,255,.02); }
.tdp-ver-swatch-static{ display:inline-block; width:6px; height:22px; border-radius:3px; flex-shrink:0; }
/* Tab „Für mich freigegeben": Liste links, Vorschau rechts — wie „Meine Routen" */
.tdp-shared-split { display:flex; gap:1rem; align-items:stretch; }
.tdp-shared-list  { flex:1 1 46%; min-width:0; }
.tdp-shared-map   { flex:1 1 54%; min-width:0; }
#sharedMapCanvas  { width:100%; height:calc(100vh - 260px); min-height:360px; border-radius:8px; }
.tdp-shared-row   { cursor:pointer; }
.tdp-shared-row.preview-active { outline:2px solid var(--tdp-accent); outline-offset:-2px; }
@media (max-width: 991px) {
  .tdp-shared-split { flex-direction:column; }
  #sharedMapCanvas  { height:50vh; }
}
/* ── Hilfeseite „Freunde" ──────────────────────────────────────────────────
   Lesetext: schmale Spalte (rund 70 Zeichen), großzügige Abstände. */
.tdp-help-wrap      { max-width:70ch; margin:0 auto; padding:2rem 1.25rem 4rem; }
.tdp-help-intro     { font-size:1.05rem; line-height:1.65; color: var(--sb-text); margin-bottom:2rem; }
.tdp-help-sec       { margin-bottom:1.75rem; }
.tdp-help-sec h2    { font-size:1.15rem; margin:0 0 .4rem; color: var(--sb-text); }
.tdp-help-sec p     { margin:0; line-height:1.65; color: var(--sb-muted); }
.tdp-help-sec-main  { border-left:3px solid var(--tdp-accent); padding-left:1rem; }
.tdp-help-steps     { margin:.75rem 0 0; padding-left:1.25rem; display:flex; flex-direction:column; gap:.5rem;
                      line-height:1.6; color: var(--sb-muted); }
.tdp-help-steps li::marker { color: var(--tdp-accent); font-weight:700; }
.tdp-help-back      { margin-top:2.5rem; }
[data-theme="light"] .tdp-help-sec p,
[data-theme="light"] .tdp-help-steps { color:#3a444f; }

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN — NUTZUNGSSTATISTIK (/Admin/Stats)
   Serienfarben stammen aus der geprueften Standardpalette der Diagramm-
   Richtlinie (Blau/Orange/Aqua). Die dunklen Stufen sind eigene Werte fuer
   den dunklen Untergrund, keine automatische Umkehrung.
   ══════════════════════════════════════════════════════════════════════════ */
.tdp-stats {
    --series-1: #3987e5;   /* dunkles Thema ist die Vorgabe des Portals */
    --series-2: #d95926;
    --series-3: #199e70;
    /* Drei Ebenen statt einer: Seite am dunkelsten, Karten daueber, die Zeichenflaeche
       wieder etwas tiefer. Vorher lagen Seite und Karte fast auf derselben Helligkeit —
       dann steht das Diagramm ohne erkennbaren Rahmen im Nichts. */
    --stats-bg:     #131517;
    --stats-card:   #1e2124;
    --stats-plot:   #17191c;
    --stats-line:   #363b40;
    --stats-ink:    #eceff1;
    --stats-ink-2:  #aab3bb;   /* heller als zuvor: Achsen mussten lesbar bleiben */
    background: var(--stats-bg);
    margin: 0; padding: 1.2rem max(1rem, calc((100% - 1500px) / 2)) 3rem;
    min-height: 100vh;
}
[data-theme="light"] .tdp-stats {
    --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a;
    --stats-bg: #f4f6f8; --stats-card: #ffffff; --stats-plot: #fafbfc;
    --stats-line: #e2e6ea; --stats-ink: #1d2733; --stats-ink-2: #5d6975;
}

.tdp-stats-head { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.tdp-period-switch { display:flex; gap:.25rem; background:var(--stats-card); border:1px solid var(--stats-line);
                     border-radius:10px; padding:.25rem; }
.tdp-period { padding:.4rem .85rem; border-radius:7px; font-size:.85rem; font-weight:600;
              color:var(--stats-ink-2); text-decoration:none; white-space:nowrap; }
.tdp-period:hover  { color:var(--tdp-accent); }
.tdp-period.active { background:var(--tdp-accent); color:#fff; }
.tdp-stats-range { color:var(--stats-ink-2); font-size:.85rem; margin:.6rem 0 1.2rem; }
.tdp-stats-muted { color:var(--stats-ink-2); }
.tdp-stats-error { background:#5a1f1f; color:#ffd7d7; padding:.8rem 1rem; border-radius:8px; margin:1rem 0; }

/* Kennzahlen */
.tdp-kpi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.8rem; margin-bottom:1.5rem; }
.tdp-kpi { background:var(--stats-card); border:1px solid var(--stats-line); border-radius:12px;
           padding:.9rem 1rem; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.tdp-kpi-label { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--stats-ink-2); }
.tdp-kpi-value { font-size:1.85rem; font-weight:700; color:var(--stats-ink); line-height:1.25; font-variant-numeric:tabular-nums; }
.tdp-kpi-delta { font-size:.78rem; font-weight:600; }
.tdp-kpi-delta.up      { color:#1baf7a; }
.tdp-kpi-delta.down    { color:#e34948; }
.tdp-kpi-delta.neutral { color:var(--stats-ink-2); font-weight:500; }
.tdp-kpi-prev { color:var(--stats-ink-2); font-weight:500; margin-left:.35rem; }

/* Karten */
.tdp-chart-card { background:var(--stats-card); border:1px solid var(--stats-line); border-radius:12px;
                  padding:1rem 1.2rem 1.2rem; margin-bottom:1.2rem;
                  box-shadow:0 1px 3px rgba(0,0,0,.35); }
.tdp-chart-card h2 { font-size:1rem; font-weight:700; color:var(--stats-ink); margin:0 0 .9rem; }
.tdp-chart-head { display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:baseline; justify-content:space-between; }
.tdp-legend { display:flex; flex-wrap:wrap; gap:.9rem; font-size:.8rem; color:var(--stats-ink-2); }
.tdp-legend-item { display:inline-flex; align-items:center; gap:.35rem; }
.tdp-legend-swatch { width:10px; height:10px; border-radius:3px; display:inline-block; }
.tdp-legend-value { color:var(--stats-ink); font-variant-numeric:tabular-nums; }

/* Diagrammflaeche mit beschrifteter Werteachse — die Achse muss auch auf Papier
   ablesbar sein, deshalb feste Beschriftung statt nur Hinweistext bei Mausberuehrung. */
.tdp-chart-picker { display:flex; gap:.4rem; align-items:center; }
.tdp-select { background:var(--stats-card); color:var(--stats-ink); border:1px solid var(--stats-line);
              border-radius:8px; padding:.35rem .6rem; font-size:.85rem; font-weight:600; min-width:190px; }
.tdp-select:focus { outline:2px solid var(--tdp-accent); outline-offset:1px; }
.tdp-select-go { margin-left:.3rem; }
.tdp-chart-sub { font-size:.82rem; color:var(--stats-ink-2); margin:-.4rem 0 .8rem; }

.tdp-plot { display:flex; gap:.5rem; height:240px; }
.tdp-yaxis { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;
             width:4.2rem; flex:0 0 auto; font-size:.7rem; color:var(--stats-ink-2);
             font-variant-numeric:tabular-nums; padding-bottom:1px; }
.tdp-yaxis span { line-height:1; transform:translateY(-.35em); }
.tdp-yaxis span:last-child { transform:none; }
.tdp-plot-area { position:relative; flex:1; background:var(--stats-plot);
                 border:1px solid var(--stats-line); border-radius:6px; }
.tdp-hline { position:absolute; left:0; right:0; height:1px; background:var(--stats-line); opacity:.55; }

.tdp-bars { position:absolute; inset:0; display:flex; align-items:flex-end; gap:2px; padding:0 2px; }
.tdp-bar-group { flex:1 1 0; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.tdp-bar-stack { display:flex; align-items:flex-end; justify-content:center; gap:2px; height:100%; }
.tdp-bar { width:100%; max-width:34px; min-height:2px; border-radius:4px 4px 0 0; transition:opacity .12s; }
.tdp-bar:hover { opacity:.65; }

/* Rubrikenachse unterhalb der Flaeche, gleiche Spaltenbreite wie die Balken */
.tdp-xaxis { display:flex; gap:2px; padding-left:4.7rem; margin-top:.35rem; }
.tdp-xaxis span { flex:1 1 0; text-align:center; font-size:.66rem; color:var(--stats-ink-2);
                  white-space:nowrap; overflow:hidden; text-overflow:clip; }
.tdp-axis-note { font-size:.72rem; color:var(--stats-ink-2); margin-top:.6rem; }
.tdp-kpi-unit { font-size:1rem; font-weight:600; color:var(--stats-ink-2); }
.tdp-kpi-quality .tdp-kpi { border-left:3px solid var(--series-1); }

/* Linien */
.tdp-line-chart { flex:1; height:100%; display:block; background:var(--stats-plot);
                  border:1px solid var(--stats-line); border-radius:6px; }
.tdp-grid-line { stroke:var(--stats-line); stroke-width:.5; vector-effect:non-scaling-stroke; }
.tdp-line-labels { position:relative; height:1.1rem; margin-top:.3rem; margin-left:4.7rem; }
.tdp-line-labels span { position:absolute; transform:translateX(-50%); font-size:.68rem; color:var(--stats-ink-2); white-space:nowrap; }

/* Tabellen */
.tdp-two-col   { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.2rem; }
.tdp-three-col { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.2rem; }
.tdp-fact-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.tdp-fact-table td { padding:.42rem .2rem; border-bottom:1px solid var(--stats-line); color:var(--stats-ink-2); }
.tdp-fact-table td:last-child { text-align:right; color:var(--stats-ink); font-weight:600; font-variant-numeric:tabular-nums; }
.tdp-fact-table tr:last-child td { border-bottom:none; }

/* Ranglisten */
.tdp-rank { display:flex; flex-direction:column; gap:.45rem; }
.tdp-rank-row { display:grid; grid-template-columns:8.5rem 1fr 4rem; align-items:center; gap:.6rem; font-size:.82rem; }
.tdp-rank-label { color:var(--stats-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tdp-rank-track { background:var(--stats-plot); border:1px solid var(--stats-line);
                  border-radius:4px; height:12px; overflow:hidden; }
.tdp-rank-fill  { display:block; height:100%; border-radius:4px; }
.tdp-rank-value { text-align:right; color:var(--stats-ink); font-weight:600; font-variant-numeric:tabular-nums; }

@media (max-width:600px) {
    .tdp-kpi-value { font-size:1.5rem; }
    .tdp-rank-row  { grid-template-columns:6.5rem 1fr 3.4rem; }
}
.tdp-product-switch { display:flex; align-items:center; gap:.45rem; font-size:.82rem; color:var(--stats-ink-2); }
.tdp-stats-head { gap:.8rem; }

/* Portalaktivität — kompakte Zahlenreihe, bewusst ohne Diagramm: sechs Werte lesen
   sich als Zahl schneller als als Balken. */
.tdp-pulse-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.7rem; }
.tdp-pulse { background:var(--stats-plot); border:1px solid var(--stats-line);
             border-radius:10px; padding:.7rem .8rem; }
.tdp-pulse-value { font-size:1.5rem; font-weight:700; color:var(--stats-ink); font-variant-numeric:tabular-nums; }
.tdp-pulse-label { font-size:.76rem; color:var(--stats-ink-2); }
.tdp-pulse-card  { border-left:3px solid var(--series-3); }

/* Die Seitenueberschrift erbt sonst eine Farbe aus dem globalen Stylesheet, die auf dem
   neuen, dunkleren Grund fast verschwindet. */
.tdp-stats .tdp-page-title { color: var(--stats-ink); }

/* ── Menuezeile (19.10.2026): einheitliche Icons fuer ALLE Eintraege (Hauptmenue + Kontomenue) ── */
.tdp-nav-ico { display: inline-block; width: 1.35em; margin-right: .3em; text-align: center; font-size: 1em; line-height: 1; font-style: normal; }
.tdp-cookie-btn { text-decoration: none; }
.tdp-nav-back { white-space: nowrap; }

/* ── Kopplungs-/Loeschseiten: in _Layout und _LayoutStoreSafe gleich (vorher nur im Store-Layout) ── */
.tdp-safe-main   { max-width: 880px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.tdp-safe-footer { border-top: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); font-size: .85rem; padding: 1rem; text-align: center; }
.tdp-safe-footer a { color: var(--bs-secondary-color); margin: 0 .6rem; }
.tdp-safe-footer a:hover { color: var(--tdp-accent); }
/* Fussleisten-Kontrast nach WCAG AA (22.10.2026): feste Farben je Schema statt --bs-secondary-color,
   das je nach data-bs-theme hellgrau auf hellem Grund ergab. */
.tdp-safe-footer, .tdp-safe-footer a { color: #b8b8b8; }
.tdp-safe-footer a:hover, .tdp-safe-footer a:focus-visible { color: var(--tdp-accent); }
[data-theme="light"] .tdp-safe-footer, [data-theme="light"] .tdp-safe-footer a { color: #3d3d3d; }
[data-theme="light"] .tdp-safe-footer a:hover, [data-theme="light"] .tdp-safe-footer a:focus-visible { color: #9a4d00; }
/* Immer hell: QR-Code (dunkle Module, heller Grund, Ruhezone) und grosse Code-Anzeige — in beiden Schemata lesbar. */
.tdp-light-box { background: #fff !important; color: #111 !important; color-scheme: light; border: 1px solid #d0d4d9; }
.tdp-qr { background: #fff; padding: 8px; border-radius: 6px; }
.tdp-qr svg { display: block; width: 100%; height: 100%; }
.tdp-ico { width: 1.1em; height: 1.1em; vertical-align: -.15em; fill: currentColor; }

/* ── Abschnitt „Meine Geräte" unter den Lizenzen (Profil, Lizenzen) ── */
.tdp-dev-section .tdp-dev-rows .list-group-item { background: transparent; color: inherit; border-color: rgba(128,128,128,.25); padding-left: 0; padding-right: 0; }
.tdp-dev-section .tdp-dev-rows .text-muted { color: inherit !important; opacity: .65; }
.tdp-dev-section h6 { margin: .9rem 0 0; font-weight: 600; }