/* Tourenwerk – Oberfläche (Desktop, Vollbild) */
:root {
    --tw-bg: #efede6;
    --tw-paper: #fffaf2;
    --tw-ink: #1f2a2a;
    --tw-muted: #5d6b6a;
    --tw-line: rgba(31, 55, 53, 0.16);
    --tw-petrol: #214745;
    --tw-rust: #b9683f;
    --tw-red: #b3362a;
    --tw-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.4 var(--tw-font); color: var(--tw-ink); background: var(--tw-bg); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.tw-button { padding: 0.4rem 0.8rem; border: 1px solid var(--tw-petrol); border-radius: 999px; background: #fff; color: var(--tw-petrol); cursor: pointer; white-space: nowrap; }
.tw-button:hover { background: rgba(33, 71, 69, 0.08); }
.tw-button:disabled { opacity: 0.45; cursor: default; }
.tw-button--primary { background: var(--tw-petrol); color: var(--tw-paper); }
.tw-button--primary:hover { background: #1a3736; }
.tw-button--ghost { border-color: var(--tw-line); color: var(--tw-ink); }
.tw-button--small { padding: 0.25rem 0.6rem; font-size: 0.82rem; }
.tw-button--danger { color: var(--tw-red); border-color: rgba(179, 54, 42, 0.5); }
.tw-button[aria-pressed="true"] { background: var(--tw-petrol); color: var(--tw-paper); }

/* Anmeldung */
.tw-login { position: fixed; inset: 0; display: grid; place-items: center; background: var(--tw-bg); z-index: 50; }
.tw-login__card { width: min(22rem, 92vw); padding: 1.6rem 1.8rem; border-radius: 14px; background: var(--tw-paper); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); }
.tw-login__card h1 { margin: 0; font-size: 1.5rem; }
.tw-login__site { margin: 0 0 1rem; color: var(--tw-muted); }
.tw-login__card label { display: block; margin: 0 0 0.7rem; font-size: 0.85rem; color: var(--tw-muted); }
.tw-login__card input { display: block; width: 100%; margin-top: 0.2rem; padding: 0.5rem 0.6rem; border: 1px solid var(--tw-line); border-radius: 8px; }
.tw-login__error { color: var(--tw-red); font-size: 0.85rem; }
.tw-login__hint { margin: 1rem 0 0; font-size: 0.78rem; color: var(--tw-muted); }

/* Rahmen */
.tw-app { display: flex; flex-direction: column; height: 100%; }
.tw-header { display: flex; align-items: center; gap: 1rem; padding: 0.45rem 1rem; background: var(--tw-paper); border-bottom: 1px solid var(--tw-line); }
.tw-header__brand { display: flex; flex-direction: column; line-height: 1.1; }
.tw-header__brand span { font-size: 0.75rem; color: var(--tw-muted); }
.tw-header__tour { display: flex; align-items: center; gap: 0.4rem; flex: 1; }
.tw-header__tour select { min-width: 20rem; max-width: 36rem; padding: 0.35rem 0.5rem; border: 1px solid var(--tw-line); border-radius: 8px; background: #fff; }
.tw-header__actions { display: flex; align-items: center; gap: 0.6rem; }
.tw-header__dirty { font-size: 0.78rem; color: var(--tw-rust); font-weight: 600; }
.tw-header__user { font-size: 0.82rem; color: var(--tw-muted); }

.tw-body { display: flex; flex: 1; min-height: 0; }
.tw-side { width: 22rem; display: flex; flex-direction: column; background: var(--tw-paper); border-right: 1px solid var(--tw-line); }
.tw-tabs { display: flex; border-bottom: 1px solid var(--tw-line); }
.tw-tabs button { flex: 1; padding: 0.5rem 0.2rem; border: 0; border-bottom: 3px solid transparent; background: none; font-size: 0.82rem; font-weight: 600; color: var(--tw-muted); cursor: pointer; }
.tw-tabs button.is-active { color: var(--tw-petrol); border-bottom-color: var(--tw-rust); }
.tw-panel { flex: 1; overflow: auto; padding: 0.7rem 0.8rem; }
.tw-panel__hint { margin: 0 0 0.6rem; font-size: 0.78rem; color: var(--tw-muted); }
.tw-field { display: block; margin: 0 0 0.6rem; font-size: 0.78rem; color: var(--tw-muted); }
.tw-field > span { display: block; margin-bottom: 0.15rem; }
.tw-field input, .tw-field select, .tw-field textarea { display: block; width: 100%; padding: 0.35rem 0.5rem; border: 1px solid var(--tw-line); border-radius: 8px; background: #fff; color: var(--tw-ink); font-size: 0.88rem; }
.tw-field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.tw-check { display: flex; align-items: center; gap: 0.4rem; margin: 0.15rem 0; font-size: 0.82rem; }
.tw-search { width: 100%; margin-bottom: 0.5rem; padding: 0.35rem 0.5rem; border: 1px solid var(--tw-line); border-radius: 8px; }

.tw-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tw-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.4rem 0.6rem; background: var(--tw-paper); border-bottom: 1px solid var(--tw-line); }
.tw-season { padding: 0.25rem 0.4rem; border: 1px solid var(--tw-line); border-radius: 8px; background: #fff; font-size: 0.82rem; }
.tw-library { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.2rem; }
.tw-library__item { display: grid; grid-template-columns: 0.9rem 1fr auto; gap: 0.5rem; align-items: center; padding: 0.25rem 0.3rem; border-radius: 6px; font-size: 0.82rem; }
.tw-library__item.is-editing { background: rgba(185, 104, 63, 0.14); }
.tw-library__actions { display: flex; flex-direction: column; gap: 0.2rem; align-items: stretch; }
.tw-library__actions .tw-button { padding: 0.15rem 0.45rem; font-size: 0.74rem; }
.tw-library__item.is-candidate { background: rgba(95, 143, 58, 0.12); }
.tw-library__item.is-used { opacity: 0.55; }
.tw-library__bar { width: 0.9rem; height: 1.6rem; border-radius: 3px; }
.tw-library__meta { display: block; font-size: 0.74rem; color: var(--tw-muted); }
.tw-season-badge { display: inline-block; padding: 0 0.35rem; border-radius: 4px; font-size: 0.68rem; font-weight: 600; color: #fff; vertical-align: 1px; }
.tw-layer { margin-left: auto; padding: 0.25rem 0.4rem; border: 1px solid var(--tw-line); border-radius: 8px; background: #fff; font-size: 0.82rem; }
.tw-map { flex: 1; min-height: 20rem; background: #e8ece6; outline: none; }
.tw-map.is-lasso, .tw-map.is-lasso .leaflet-interactive, .tw-map.is-lasso .tw-marker { cursor: crosshair; touch-action: none; }
.tw-map.is-busy, .tw-map.is-busy .leaflet-interactive, .tw-map.is-busy .tw-marker { cursor: progress; }
.tw-profile { position: relative; height: 150px; background: var(--tw-paper); border-top: 1px solid var(--tw-line); }
.tw-profile canvas { display: block; width: 100%; height: 150px; }
.tw-profile__meta { position: absolute; right: 0.6rem; top: 0.3rem; font-size: 0.75rem; color: var(--tw-muted); }
.tw-status { margin: 0; padding: 0.3rem 0.8rem; font-size: 0.8rem; color: var(--tw-muted); background: var(--tw-paper); border-top: 1px solid var(--tw-line); min-height: 1.9rem; }
.tw-status.is-error { color: var(--tw-red); }

/* Griffe (Stützpunkte) */
.tw-marker { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 3px solid var(--tw-petrol); border-radius: 999px; background: var(--tw-paper); box-shadow: 0 2px 8px rgba(15, 26, 28, 0.24); font: 700 10px/1 var(--tw-font); color: var(--tw-paper); }
.tw-marker.is-selected { border-color: var(--tw-rust); transform: scale(1.18); }
.tw-marker--start, .tw-marker--end { font-size: 11px; }
.tw-marker--start { background: var(--tw-petrol); border-color: var(--tw-paper); box-shadow: 0 0 0 2px var(--tw-petrol), 0 2px 8px rgba(15, 26, 28, 0.3); }
.tw-marker--end { background: var(--tw-rust); border-color: var(--tw-paper); box-shadow: 0 0 0 2px var(--tw-rust), 0 2px 8px rgba(15, 26, 28, 0.3); }
.tw-marker--fix:not(.tw-marker--start):not(.tw-marker--end) { width: 22px; height: 22px; margin: -2px 0 0 -2px; background: var(--tw-petrol); border-color: var(--tw-paper); box-shadow: 0 0 0 2px var(--tw-petrol), 0 2px 8px rgba(15, 26, 28, 0.3); }
.tw-marker.is-open::after { content: ''; position: absolute; inset: -7px; border: 2px dashed var(--tw-rust); border-radius: 999px; opacity: 0.8; pointer-events: none; }
.tw-marker__label { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 7px; padding: 2px 6px; border-radius: 4px; background: rgba(255, 250, 242, 0.94); color: var(--tw-ink); font: 600 11px/1.2 var(--tw-font); white-space: nowrap; box-shadow: 0 1px 3px rgba(15, 26, 28, 0.25); pointer-events: none; }
.tw-km { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 2px solid var(--tw-rust); border-radius: 999px; background: var(--tw-paper); color: #3a2d1c; font: 700 10px/1 var(--tw-font); pointer-events: none; }

/* Katalog-Pins */
.tw-pin { width: 14px; height: 14px; border: 2px solid var(--tw-paper); border-radius: 3px; transform: rotate(45deg); background: #8a5a2b; box-shadow: 0 0 0 1.5px #8a5a2b, 0 1px 4px rgba(15, 26, 28, 0.3); cursor: pointer; }
.tw-pin--huette { background: #b3362a; box-shadow: 0 0 0 1.5px #b3362a, 0 1px 4px rgba(15, 26, 28, 0.3); }
.tw-pin--gipfel { background: #3d3d3d; box-shadow: 0 0 0 1.5px #3d3d3d, 0 1px 4px rgba(15, 26, 28, 0.3); }
.tw-pin--joch { background: #5b6b8c; box-shadow: 0 0 0 1.5px #5b6b8c, 0 1px 4px rgba(15, 26, 28, 0.3); }
.tw-pin--abzweigung { background: #c48a1f; box-shadow: 0 0 0 1.5px #c48a1f, 0 1px 4px rgba(15, 26, 28, 0.3); }
.tw-pin--see, .tw-pin--wasser { background: #2b7a9e; box-shadow: 0 0 0 1.5px #2b7a9e, 0 1px 4px rgba(15, 26, 28, 0.3); }
.tw-pin--alm { background: #5f8f3a; box-shadow: 0 0 0 1.5px #5f8f3a, 0 1px 4px rgba(15, 26, 28, 0.3); }
.tw-pin--ort, .tw-pin--parkplatz, .tw-pin--haltestelle { background: #6b4f8a; box-shadow: 0 0 0 1.5px #6b4f8a, 0 1px 4px rgba(15, 26, 28, 0.3); }
.tw-pin--punkt { background: #9a9a9a; box-shadow: 0 0 0 1.5px #9a9a9a, 0 1px 4px rgba(15, 26, 28, 0.3); width: 10px; height: 10px; }
.tw-pin__label { position: absolute; left: 100%; top: 50%; transform: rotate(-45deg) translate(2px, -14px); transform-origin: left top; margin-left: 6px; padding: 1px 5px; border-radius: 3px; background: rgba(255, 250, 242, 0.9); color: #3a2d1c; font: 500 10px/1.2 var(--tw-font); white-space: nowrap; pointer-events: none; }

/* Fenster */
.tw-popup { min-width: 16rem; font: 13px/1.35 var(--tw-font); }
.tw-popup__title { margin: 0 0 0.3rem; font-weight: 700; font-size: 0.92rem; }
.tw-popup__meta { margin: 0 0 0.5rem; color: var(--tw-muted); font-size: 0.78rem; }
.tw-popup label { display: block; margin: 0 0 0.4rem; font-size: 0.78rem; color: #3f4a49; }
.tw-popup input[type="text"], .tw-popup select, .tw-popup textarea { display: block; width: 100%; margin-top: 0.15rem; padding: 0.3rem 0.4rem; border: 1px solid rgba(31, 55, 53, 0.3); border-radius: 6px; font: inherit; }
.tw-popup__actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.tw-popup__actions .tw-button { padding: 0.3rem 0.6rem; font-size: 0.78rem; }
.tw-popup__error { margin: 0.4rem 0 0; color: var(--tw-red); font-size: 0.78rem; }
.tw-popup__images { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0; }
.tw-popup__images img { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; }

/* Listen */
.tw-waypoints, .tw-segments, .tw-catalog { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.15rem; }
.tw-waypoints__item, .tw-segments__item, .tw-catalog__item { display: grid; align-items: center; gap: 0.5rem; padding: 0.2rem 0.3rem; border-radius: 6px; font-size: 0.84rem; }
.tw-waypoints__item { grid-template-columns: 1.6rem 1fr auto auto; }
.tw-waypoints__item.is-selected, .tw-segments__item.is-selected { background: rgba(185, 104, 63, 0.14); }
.tw-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 999px; background: var(--tw-petrol); color: var(--tw-paper); font-size: 0.7rem; font-weight: 700; }
.tw-badge--end { background: var(--tw-rust); }
.tw-link-button { border: 0; padding: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.tw-link-button:hover { text-decoration: underline; }
.tw-link-button small { color: var(--tw-muted); font-weight: 400; }
.tw-km-text { color: var(--tw-muted); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.78rem; }
.tw-order button { border: 1px solid rgba(31, 55, 53, 0.25); background: #fff; border-radius: 4px; width: 1.5rem; height: 1.4rem; font-size: 0.75rem; cursor: pointer; }
.tw-order button:disabled { opacity: 0.35; cursor: default; }
.tw-segments__item { grid-template-columns: 1.6rem 1fr auto; }
.tw-segments__shared { font-size: 0.72rem; color: var(--tw-rust); }
.tw-swatch { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.15); vertical-align: -2px; margin-right: 0.2rem; }
.tw-palette { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.2rem 0 0.5rem; align-items: center; }
.tw-palette button { width: 1.6rem; height: 1.6rem; border: 2px solid transparent; border-radius: 6px; cursor: pointer; padding: 0; }
.tw-palette button.is-active { border-color: var(--tw-ink); }
.tw-palette button[data-color=""] { background: repeating-linear-gradient(45deg, #fff 0 4px, #ddd 4px 8px); }
.tw-palette input[type="color"] { width: 2.2rem; height: 1.6rem; padding: 0; border: 1px solid var(--tw-line); border-radius: 6px; background: #fff; }
.tw-catalog__item { grid-template-columns: 1fr auto; }
.tw-catalog__item small { color: var(--tw-muted); }
.tw-segment-form { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--tw-line); }
.tw-segment-form h4 { margin: 0 0 0.4rem; font-size: 0.9rem; }
.tw-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.3rem; margin-bottom: 0.4rem; }
.tw-fields input { padding: 0.25rem 0.4rem; border: 1px solid var(--tw-line); border-radius: 6px; font-size: 0.8rem; }
.tw-images { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0; }
.tw-images figure { margin: 0; width: 7rem; font-size: 0.7rem; color: var(--tw-muted); }
.tw-images img { width: 7rem; height: 5rem; object-fit: cover; border-radius: 6px; display: block; }
.tw-stats { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; margin: 0.6rem 0; font-size: 0.82rem; }
.tw-stats dt { color: var(--tw-muted); }
.tw-stats dd { margin: 0; font-weight: 600; }
.tw-overlay-label { background: rgba(255, 250, 242, 0.85); padding: 1px 5px; border-radius: 3px; font: 500 10px/1.2 var(--tw-font); color: #555; white-space: nowrap; }