:root {
    --tp-primary: #1e5a96;
    --tp-primary-dark: #1e3a5f;
    --tp-border: #d7dce2;
    --tp-danger: #c0392b;
    --tp-leise: #667085;
    --tp-hell: #f3f6fa;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: clip; }

body {
    font-family: system-ui, sans-serif;
    margin: 0;
    color: #1a1a1a;
    background: #fff;
}

h1:focus { outline: none; }
h1 { font-size: 1.4rem; margin: 0.3rem 0 0.8rem; }
h3 { font-size: 1rem; margin: 1.2rem 0 0.4rem; }

.top-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    padding: 0.6rem 1rem;
    background: var(--tp-primary-dark);
    color: white;
}
.top-bar a { color: white; text-decoration: none; }
.top-bar-titel { font-weight: bold; }
.top-bar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.top-bar-user { opacity: 0.85; }

main { padding: 0.8rem; max-width: 1100px; margin: 0 auto; }

.link-button {
    background: none; border: none; color: white; text-decoration: underline;
    cursor: pointer; padding: 0; font: inherit;
}

.btn-primary, .btn-secondary, .btn-danger {
    display: inline-block;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.45rem 0.9rem;
    text-decoration: none;
    line-height: 1.3;
}
.btn-primary { background: var(--tp-primary); color: white; border: 1px solid var(--tp-primary); }
.btn-primary:hover { background: var(--tp-primary-dark); }
.btn-primary:disabled { opacity: 0.5; cursor: default; }
.btn-secondary { background: white; color: var(--tp-primary-dark); border: 1px solid var(--tp-border); }
.btn-secondary:disabled { opacity: 0.5; }
.btn-danger { background: var(--tp-danger); color: white; border: 1px solid var(--tp-danger); }

/* Button, der wie ein Link aussieht (echtes <a href=""> springt wegen <base href="/"> zur Startseite). */
.tp-linkbutton {
    background: none; border: none; padding: 0; font: inherit; color: var(--tp-primary);
    text-decoration: underline; cursor: pointer;
}

.form-feld { margin-bottom: 0.6rem; display: flex; flex-direction: column; gap: 0.2rem; max-width: 320px; flex: 1; }
.form-feld label { font-size: 0.85rem; color: var(--tp-leise); }
input, select, textarea { font: inherit; }
.form-feld input, .form-feld select, .form-feld textarea, .tp-zeile input:not([type=checkbox]):not([type=radio]), textarea.tp-breit {
    padding: 0.4rem; border: 1px solid var(--tp-border); border-radius: 6px; font-size: 16px; /* iOS: kein Auto-Zoom */
}
.tp-breit { width: 100%; max-width: none; }
.text-danger { color: var(--tp-danger); }

table.tp-tabelle { border-collapse: collapse; width: 100%; margin-bottom: 1rem; }
table.tp-tabelle th, table.tp-tabelle td { border-bottom: 1px solid var(--tp-border); padding: 0.4rem 0.6rem; text-align: left; }
.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 10px; font-size: 0.8rem; }
.badge-offen { background: #fde9e9; color: var(--tp-danger); }

.tp-leise { color: var(--tp-leise); }
.tp-klein { font-size: 0.85rem; }
.tp-flex { flex: 1; min-width: 0; }

.tp-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.tp-zeile input:not([type=checkbox]):not([type=radio]) { flex: 1; min-width: 10rem; }
.tp-zeile input.tp-zahl { flex: 0 0 4.5rem; min-width: 0; width: 4.5rem; }

.tp-card {
    display: block; border: 1px solid var(--tp-border); border-radius: 8px;
    padding: 0.7rem 1rem; margin-bottom: 0.6rem; color: inherit; text-decoration: none;
}
.tp-card-link:hover { background: var(--tp-hell); }
.tp-card-titel { font-weight: bold; font-size: 1.1rem; }

.tp-hinweis { background: #fff7e0; border-left: 3px solid #f0b400; padding: 0.4rem 0.6rem; margin: 0.4rem 0; font-size: 0.9rem; }
.tp-meldung { background: #e8f1fb; border-left: 3px solid var(--tp-primary); padding: 0.4rem 0.6rem; margin: 0.4rem 0; cursor: pointer; }

/* ---------- Tour-Seite ---------- */
.tp-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tp-titel { cursor: pointer; margin: 0.2rem 0; }
.tp-vm { padding: 0.35rem; border: 1px solid var(--tp-border); border-radius: 6px; font-size: 16px; }

.tp-karten-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.4rem 0; }
.tp-karte { height: 48vh; min-height: 260px; border: 1px solid var(--tp-border); border-radius: 8px; }

.tp-tabs { display: flex; gap: 0.2rem; margin: 0.6rem 0 0.4rem; border-bottom: 2px solid var(--tp-border); position: sticky; top: 0; background: #fff; z-index: 500; }
.tp-tabs button {
    flex: 1; background: none; border: none; padding: 0.55rem 0.3rem; font: inherit; cursor: pointer;
    color: var(--tp-leise); border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.tp-tabs button.aktiv { color: var(--tp-primary-dark); border-bottom-color: var(--tp-primary); font-weight: 600; }

.tp-listen-optionen { font-size: 0.9rem; }
.tp-markiert-leiste { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; background: var(--tp-hell); padding: 0.3rem 0.5rem; border-radius: 6px; }

.tp-punkt { border-bottom: 1px solid var(--tp-border); }
.tp-punkt-zeile { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.2rem; }
.tp-punkt-zeile input[type=checkbox] { width: 1.2rem; height: 1.2rem; flex: none; }
.tp-punkt-text { flex: 1; min-width: 0; cursor: pointer; overflow-wrap: anywhere; }
.tp-punkt-erledigt .tp-punkt-text { opacity: 0.5; text-decoration: line-through; }
.tp-punkt-aktiv { background: #fff8e1; }

.tp-nr {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.8rem; height: 1.8rem; padding: 0 0.3rem; border-radius: 999px;
    background: var(--farbe); color: #fff; font-weight: 700; font-size: 0.85rem;
}
.tp-nr-klein { min-width: 1.4rem; height: 1.4rem; font-size: 0.75rem; }
.tp-punkt-erledigt .tp-nr { opacity: 0.45; }

.tp-icon { flex: none; background: none; border: 1px solid transparent; border-radius: 6px; font-size: 1.15rem; width: 2.2rem; height: 2.2rem; cursor: pointer; color: #b0b7c3; }
.tp-icon:hover { border-color: var(--tp-border); }
.tp-flag-an { color: #dc2626; }

.tp-editor { padding: 0.4rem 0.4rem 0.8rem 2.2rem; }
.tp-editor .tp-zeile { align-items: flex-end; }
.tp-editor-aktionen button { font-size: 0.9rem; }

.tp-treffer { display: flex; gap: 0.5rem; align-items: center; padding: 0.35rem 0; border-bottom: 1px solid var(--tp-border); font-size: 0.9rem; cursor: pointer; }

.tp-vorschau { border: 2px solid #facc15; border-radius: 8px; padding: 0.4rem 0.8rem; margin-top: 1rem; background: #fffdf2; }
.tp-vorschau-liste { max-height: 16rem; overflow: auto; padding-left: 1.6rem; }

.tp-auswahl-liste { padding-left: 0; list-style: none; }
.tp-auswahl-liste li { display: flex; gap: 0.5rem; align-items: center; padding: 0.2rem 0; }
.tp-navi-knoepfe { display: flex; flex-direction: column; gap: 0.45rem; max-width: 480px; }
.tp-navi-knoepfe h3 { margin-bottom: 0; }
.tp-navi-knoepfe a { text-align: center; }
.tp-weiter { margin-top: 1rem; }

/* Karten-Marker (divIcon, siehe map-interop.js) */
.tp-pin {
    position: relative; width: 26px; height: 26px; border-radius: 50%;
    background: var(--farbe); color: #fff; border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    display: flex; align-items: center; justify-content: center;
    font: 700 11px/1 system-ui, sans-serif;
}
.tp-pin-erledigt { opacity: 0.4; }
.tp-pin-auswahl { border-color: #facc15; box-shadow: 0 0 0 3px #facc15, 0 1px 4px rgba(0, 0, 0, 0.45); }
.tp-pin-aktiv { transform: scale(1.3); border-color: #111; }
.tp-pin-flag { position: absolute; top: -9px; right: -8px; color: #dc2626; font-size: 13px; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }

#blazor-error-ui { display: none; }