/* ==========================================================================
   Marktplaner – Design
   Ruhige, helle Flächen, Glas-Effekte, Lila als Akzent, sanfte Bewegungen.
   Hell/Dunkel über prefers-color-scheme bzw. [data-theme].
   ========================================================================== */
:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #ebebf0;
  --input: #ffffff;
  --line: rgba(0, 0, 0, .08);
  --line-strong: rgba(0, 0, 0, .14);
  --text: #1d1d1f;
  --text-2: #424245;
  --muted: #6e6e73;
  --accent: #8a3ffc;
  --accent-hover: #7a2ff0;
  --accent-text: #7a2ff0;
  --accent-soft: rgba(138, 63, 252, .10);
  --accent-ring: rgba(138, 63, 252, .28);
  --accent-grad: linear-gradient(135deg, #b16cff 0%, #8a3ffc 50%, #6a2bd9 100%);
  --ok: #248a3d; --ok-soft: rgba(52, 199, 89, .14);
  --warn: #b25000; --warn-soft: rgba(255, 159, 10, .16);
  --danger: #e0301e; --danger-soft: rgba(255, 59, 48, .10);
  --glass: rgba(255, 255, 255, .74);
  --glass-strong: rgba(255, 255, 255, .88);
  --glass-border: rgba(255, 255, 255, .7);
  --glass-dark: rgba(29, 29, 31, .78);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .04);
  --shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .08), 0 32px 80px rgba(0, 0, 0, .16);
  --r-sm: 9px; --r: 12px; --r-lg: 18px; --r-xl: 22px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --top: 56px;
  --panel-w: 344px;
  --map-bg: #e8e8ed;
  color-scheme: light;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --surface-3: #3a3a3c; --input: #2c2c2e;
    --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .16);
    --text: #f5f5f7; --text-2: #d1d1d6; --muted: #98989d;
    --accent: #a66bff; --accent-hover: #b583ff; --accent-text: #c29bff;
    --accent-soft: rgba(166, 107, 255, .16); --accent-ring: rgba(166, 107, 255, .35);
    --ok: #30d158; --ok-soft: rgba(48, 209, 88, .16); --warn: #ffb340; --warn-soft: rgba(255, 159, 10, .18);
    --danger: #ff6961; --danger-soft: rgba(255, 69, 58, .16);
    --glass: rgba(28, 28, 30, .72); --glass-strong: rgba(28, 28, 30, .9); --glass-border: rgba(255, 255, 255, .08);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 2px 8px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .4);
    --shadow-lg: 0 24px 80px rgba(0, 0, 0, .6); --map-bg: #1c1c1e; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --surface-3: #3a3a3c; --input: #2c2c2e;
  --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .16);
  --text: #f5f5f7; --text-2: #d1d1d6; --muted: #98989d;
  --accent: #a66bff; --accent-hover: #b583ff; --accent-text: #c29bff;
  --accent-soft: rgba(166, 107, 255, .16); --accent-ring: rgba(166, 107, 255, .35);
  --ok: #30d158; --ok-soft: rgba(48, 209, 88, .16); --warn: #ffb340; --warn-soft: rgba(255, 159, 10, .18);
  --danger: #ff6961; --danger-soft: rgba(255, 69, 58, .16);
  --glass: rgba(28, 28, 30, .72); --glass-strong: rgba(28, 28, 30, .9); --glass-border: rgba(255, 255, 255, .08);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 2px 8px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .4);
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, .6); --map-bg: #1c1c1e; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent-ring); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.r { text-align: right; }
.nowrap { white-space: nowrap; }
.warn { color: var(--warn); font-weight: 600; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
.theme-anim, .theme-anim * { transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease) !important; }

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
}
.glass-dark {
  background: var(--glass-dark); color: #fff;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}

/* ---------- Kopfzeile ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--top); z-index: 1000;
  display: flex; align-items: center; gap: 16px; padding: 0 18px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none;
  background: var(--accent-grad); box-shadow: 0 4px 14px rgba(138, 63, 252, .35);
  transition: transform .4s var(--spring), box-shadow .3s;
}
.brand-mark img { width: 34px; height: 34px; display: block; }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); box-shadow: 0 6px 20px rgba(138, 63, 252, .5); }
.brand-title { font-weight: 700; letter-spacing: -.01em; font-size: 15px; }
.brand-sub { font-size: 11px; color: var(--muted); }

.market-switch { display: flex; gap: 6px; align-items: center; }
.select-pill select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%238e8e93' stroke-width='3' stroke-linecap='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid transparent; border-radius: 999px; padding: 7px 32px 7px 14px; max-width: 360px; font-weight: 500;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.select-pill select:hover { background-color: var(--surface-3); }

.tabs {
  position: relative; display: flex; gap: 0; margin-left: auto; padding: 3px;
  background: var(--surface-2); border-radius: 999px;
}
.tab-indicator {
  position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 999px;
  background: var(--accent-grad); box-shadow: 0 2px 8px rgba(138, 63, 252, .35), 0 6px 18px rgba(138, 63, 252, .18);
  transition: transform .45s var(--spring), width .45s var(--spring);
}
.tabs button {
  position: relative; z-index: 1; background: none; border: 0; color: var(--muted);
  padding: 6px 14px; border-radius: 999px; cursor: pointer; font-weight: 500; font-size: 13px;
  transition: color .25s var(--ease);
}
.tabs button:hover { color: var(--text); }
.tabs button.active { color: #fff; font-weight: 600; }
.tabs button.active:hover { color: #fff; }
.top-actions { display: flex; align-items: center; gap: 2px; }
.save-state { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); white-space: nowrap; margin-left: 8px; min-width: 92px; }
.save-state i { width: 7px; height: 7px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 3px rgba(52, 199, 89, .18); transition: background .3s; }
.save-state.dirty i { background: #ff9f0a; box-shadow: 0 0 0 3px rgba(255, 159, 10, .2); animation: pulse 1s infinite; }
.save-state.error i { background: #ff3b30; }

main { position: fixed; inset: var(--top) 0 0 0; }
.view { display: none; height: 100%; overflow: auto; }
.view.active { display: block; animation: viewIn .5s var(--ease) both; }
#view-plan { overflow: hidden; }
#view-plan.active { animation: fadeIn .35s var(--ease) both; }

/* ---------- Buttons & Formulare ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  padding: 7px 15px; border-radius: 999px; cursor: pointer; font-weight: 500; line-height: 1.2; white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease), color .2s;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--accent); border-color: transparent; color: #fff; box-shadow: 0 2px 10px rgba(138, 63, 252, .3); }
.btn.primary:hover { background: var(--accent-hover); box-shadow: 0 4px 16px rgba(138, 63, 252, .4); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); border-color: transparent; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.small { padding: 4px 11px; font-size: 12px; }
.btn.icon { width: 34px; height: 34px; padding: 0; }
.btn.icon.round { border-radius: 50%; }
.btn.icon.small { width: 26px; height: 26px; }

input, select, textarea {
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px 11px; background: var(--input); width: 100%; outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
input[type=color] { padding: 3px; height: 34px; width: 48px; cursor: pointer; }
input[type=checkbox] { width: auto; accent-color: var(--accent); }
input[type=range] { padding: 0; border: 0; box-shadow: none; accent-color: var(--accent); background: transparent; }
input[type=file] { padding: 6px; }
label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 5px; font-weight: 500; }
label.check { display: flex; gap: 8px; align-items: center; color: var(--text); font-size: 13px; }
textarea { resize: vertical; }

/* iOS-Schalter */
input.switch {
  appearance: none; -webkit-appearance: none; width: 42px; height: 25px; border-radius: 999px; padding: 0; border: 0;
  background: var(--surface-3); position: relative; cursor: pointer; flex: none; transition: background .25s var(--ease);
}
input.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .3s var(--spring);
}
input.switch:checked { background: #34c759; }
input.switch:checked::after { transform: translateX(17px); }
input.switch:focus { box-shadow: 0 0 0 4px var(--accent-ring); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid.three { grid-template-columns: repeat(3, 1fr); }
.form-grid .full { grid-column: 1 / -1; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.row-input { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row-input select, .row-input input:not([type=file]) { flex: 1; min-width: 0; }

/* ---------- Lageplan ---------- */
.plan-wrap { position: relative; height: 100%; }
#map { position: absolute; inset: 0; background: var(--map-bg); }
#map.crosshair, #map.crosshair .leaflet-interactive { cursor: crosshair !important; }
#map.no-base { background-color: var(--map-bg); background-image: radial-gradient(var(--line-strong) 1px, transparent 1px); background-size: 22px 22px; }
.leaflet-container { font-family: inherit; -webkit-user-select: none; user-select: none; }
.leaflet-tile-pane { transition: filter .3s; }

.toolbar {
  position: absolute; left: 14px; top: 14px; z-index: 800;
  display: flex; flex-direction: column; gap: 2px; padding: 5px; border-radius: var(--r-lg);
  animation: slideInLeft .6s var(--ease) backwards .1s;
}
.tool-indicator {
  position: absolute; left: 5px; right: 5px; top: 0; border-radius: 13px;
  background: var(--accent-grad); box-shadow: 0 4px 14px rgba(138, 63, 252, .4);
  transition: transform .45s var(--spring), height .3s var(--ease);
}
.toolbar button {
  position: relative; z-index: 1; width: 60px; height: 54px; border: 0; background: none; border-radius: 13px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-2);
  transition: color .25s var(--ease), background-color .2s, transform .15s var(--ease);
}
.toolbar button svg { width: 20px; height: 20px; }
.toolbar button em { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .01em; }
.toolbar button:hover:not(.active) { background: var(--accent-soft); color: var(--accent-text); }
.toolbar button:active { transform: scale(.92); }
.toolbar button.active { color: #fff; }
.toolbar hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }

.mode-hint {
  position: absolute; left: calc((100% - var(--panel-w) - 24px) / 2); top: 14px; transform: translateX(-50%); z-index: 800;
  max-width: 60%; padding: 9px 18px; border-radius: 999px; font-size: 12.5px; font-weight: 500; box-shadow: var(--shadow); white-space: nowrap;
}
.mode-hint.pop { animation: popDown .45s var(--spring) both; }
.mode-options {
  position: absolute; left: calc((100% - var(--panel-w) - 24px) / 2); bottom: 26px; transform: translateX(-50%); z-index: 800;
  width: max-content; max-width: min(760px, calc(100% - var(--panel-w) - 140px)); max-height: 40%; overflow: auto;
  border-radius: var(--r-lg); padding: 12px 16px 14px;
}
.mode-options.pop { animation: popUp .5s var(--spring) both; }
.mo-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.mo-dims { max-width: 420px; margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-strong); background: var(--surface);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; font-weight: 500;
  transition: all .2s var(--ease);
}
.chip:hover { border-color: var(--accent); }
.chip:active { transform: scale(.95); }
.chip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; box-shadow: 0 0 0 3px var(--accent-soft); }
.measure-out { display: flex; flex-direction: column; align-items: center; padding: 2px 20px; }
.measure-out span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.measure-out b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Ebenen-Umschalter */
.layer-switch { position: absolute; right: calc(var(--panel-w) + 26px); bottom: 26px; z-index: 850; }
.ls-toggle {
  display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 16px; cursor: pointer; color: var(--text);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.ls-toggle:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.ls-toggle:active { transform: scale(.97); }
.ls-toggle svg { transition: transform .35s var(--spring); color: var(--muted); }
.layer-switch.open .ls-toggle svg { transform: rotate(180deg); }
.ls-name { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.ls-name b { font-size: 13px; font-weight: 600; }
.ls-name small { font-size: 11px; color: var(--muted); }
.ls-thumb {
  width: 44px; height: 44px; border-radius: 11px; overflow: hidden; flex: none; display: block;
  background: var(--surface-3) radial-gradient(var(--line-strong) 1px, transparent 1px); background-size: 8px 8px;
}
.ls-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-thumb.broken img { display: none; }
.ls-pop {
  position: absolute; right: 0; bottom: calc(100% + 10px); width: 360px; padding: 12px; border-radius: var(--r-xl);
  opacity: 0; transform: translateY(10px) scale(.96); transform-origin: bottom right; pointer-events: none;
  transition: opacity .25s var(--ease), transform .4s var(--spring);
}
.layer-switch.open .ls-pop { opacity: 1; transform: none; pointer-events: auto; }
.ls-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.ls-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px; border-radius: 14px;
  border: 1.5px solid transparent; background: transparent; cursor: pointer; text-align: left; color: var(--text);
  transition: background .2s, border-color .2s, transform .15s var(--ease);
}
.ls-card .ls-thumb { width: 100%; height: 66px; margin-bottom: 5px; }
.ls-card b { font-size: 12px; font-weight: 600; }
.ls-card small { font-size: 10.5px; color: var(--muted); }
.ls-card:hover { background: var(--surface-2); }
.ls-card:active { transform: scale(.96); }
.ls-card.active { border-color: var(--accent); background: var(--accent-soft); }
.switch-row, .range-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 6px; color: var(--text); font-size: 13px; border-top: 1px solid var(--line); }
.range-row input { width: 140px; }

/* Seitenleiste */
.panel {
  position: absolute; right: 12px; top: 12px; bottom: 12px; width: var(--panel-w); overflow: auto; z-index: 820;
  border-radius: var(--r-xl); background: var(--glass-strong);
  animation: slideInRight .6s var(--ease) backwards .15s;
  scrollbar-width: thin;
}
.panel.swap > * { animation: panelIn .45s var(--ease) both; }
.panel.swap > *:nth-child(2) { animation-delay: .03s; }
.panel.swap > *:nth-child(3) { animation-delay: .06s; }
.panel.swap > *:nth-child(4) { animation-delay: .09s; }
.panel.swap > *:nth-child(n+5) { animation-delay: .12s; }
.panel-sec { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel-sec:last-child { border-bottom: 0; }
.panel-sec.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.panel-sec h3 { margin: 2px 0 3px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 6px; }
.panel-sec h3.title-lg { font-size: 21px; line-height: 1.2; }
.panel-sec h3 input.inline { width: 96px; font-size: 19px; font-weight: 700; padding: 3px 8px; }
.panel-sec > label:first-child { margin-top: 0; }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--accent-text); font-weight: 650; margin-bottom: 4px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats.two { grid-template-columns: 1fr 1fr; }
.stats div { background: var(--surface-2); border-radius: var(--r); padding: 10px 11px; transition: transform .2s var(--ease); }
.stats div:hover { transform: translateY(-1px); }
.stats div.wide { grid-column: 1 / -1; }
.stats div.accent { background: var(--accent-grad); color: #fff; box-shadow: 0 6px 18px rgba(138, 63, 252, .3); }
.stats div.accent span { color: rgba(255, 255, 255, .8); }
.stats b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats span { font-size: 11px; color: var(--muted); }
.occ { margin-top: 14px; }
.occ-bar { display: flex; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.occ-bar i { width: var(--w); transform-origin: left; animation: grow .9s var(--ease) both .2s; }
.occ-bar i.v { background: linear-gradient(90deg, #34c759, #30d158); }
.occ-bar i.r { background: linear-gradient(90deg, #ff9f0a, #ffb340); }
.occ-legend { display: flex; gap: 12px; margin-top: 7px; font-size: 11.5px; color: var(--muted); }
.occ-legend span { display: flex; align-items: center; gap: 5px; }
.occ-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); }
.occ-legend i.v { background: #34c759; } .occ-legend i.r { background: #ff9f0a; }
.alert { background: var(--danger-soft); border-radius: var(--r); padding: 10px 12px; font-size: 12.5px; color: var(--text); display: flex; flex-direction: column; gap: 3px; }
.alert b { color: var(--danger); }
.alert-row { text-align: left; background: none; border: 0; padding: 3px 0; cursor: pointer; color: var(--text-2); border-radius: 6px; }
.alert-row:hover { color: var(--danger); }
.legend { list-style: none; margin: 0; padding: 0; }
.legend li { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.legend i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.legend span { flex: 1; }
.legend em { font-style: normal; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.search-res { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.search-res button { text-align: left; border: 0; background: var(--surface-2); border-radius: var(--r-sm); padding: 7px 10px; cursor: pointer; animation: fadeUp .25s var(--ease) both; }
.search-res button:hover { background: var(--accent-soft); color: var(--accent-text); }
.help div { font-size: 12px; color: var(--muted); line-height: 2; }
kbd { background: var(--surface); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; font-size: 11px; font-family: inherit; color: var(--text-2); }
.seg { display: flex; background: var(--surface-2); border-radius: 10px; padding: 2px; gap: 2px; }
.seg button { flex: 1; border: 0; background: transparent; padding: 6px; cursor: pointer; font-size: 12.5px; border-radius: 8px; color: var(--muted); font-weight: 500; transition: all .25s var(--ease); }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); font-weight: 600; }
.seg button.active[data-v=reserviert] { color: var(--warn); }
.seg button.active[data-v=vergeben] { color: var(--ok); }
.rot-range { margin-top: 10px; }
.actions-row { display: flex; gap: 6px; flex-wrap: wrap; }
table.mini { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.mini td { padding: 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.mini td.r { font-variant-numeric: tabular-nums; }
table.mini tr.sum td { font-weight: 700; border-bottom: 0; padding-top: 8px; font-size: 14px; }

/* Karte: Stände, Beschriftungen, Griffe */
.stand-path { transition: fill-opacity .25s, stroke .2s, stroke-width .2s; }
.stand-new { transform-box: fill-box; transform-origin: center; animation: standIn .55s var(--spring) both; }
.stand-path.is-sel { filter: drop-shadow(0 0 6px rgba(191, 90, 242, .85)); animation: selGlow 1.8s ease-in-out infinite; }
.zone-path { transition: fill-opacity .25s; }
.stand-label { pointer-events: none; }
.stand-label b, .stand-label span { display: none; }
.z-labels .stand-label b {
  display: block; transform: translate(-50%, -50%); width: max-content;
  color: #fff; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.z-labels .stand-label.conflict b { background: rgba(255, 69, 58, .85); }
.z-detail .stand-label b { transform: translate(-50%, -85%); }
.z-detail .stand-label span {
  display: block; transform: translate(-50%, -40%); width: max-content; max-width: 92px; text-align: center;
  color: #fff; font-size: 10px; font-weight: 600; text-shadow: 0 0 3px rgba(0, 0, 0, .9), 0 0 2px #000; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zone-label {
  pointer-events: none; color: #fff; font-weight: 700; font-size: 12px; white-space: nowrap;
  transform: translate(-50%, -50%); width: max-content !important;
  text-shadow: 0 0 4px rgba(0, 0, 0, .9), 0 0 2px #000;
}
.temp-label {
  width: max-content !important; transform: translate(14px, -30px);
  background: var(--glass-dark); color: #fff; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  font-variant-numeric: tabular-nums;
}
.temp-label.tl-seg { transform: translate(-50%, -50%); background: rgba(10, 132, 255, .85); font-size: 11px; }
.rot-handle {
  background: #fff; color: #8a3ffc; border-radius: 50%; display: grid !important; place-items: center;
  box-shadow: 0 0 0 2px #bf5af2, 0 3px 10px rgba(0, 0, 0, .35); cursor: grab; transition: box-shadow .2s var(--ease), background .2s;
}
/* Wichtig: kein transform/animation auf Marker-Elementen selbst – Leaflet positioniert sie per transform */
.rot-handle svg { animation: popIn .4s var(--spring) both; }
.rot-handle:hover { background: #f3e8ff; box-shadow: 0 0 0 3px #bf5af2, 0 0 0 7px rgba(191, 90, 242, .25), 0 3px 10px rgba(0, 0, 0, .35); }
.vertex { background: #fff; border: 2.5px solid #bf5af2; border-radius: 50%; cursor: move; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: box-shadow .2s; }
.vertex:hover { box-shadow: 0 0 0 5px rgba(191, 90, 242, .35), 0 2px 6px rgba(0, 0, 0, .3); }
.poi span {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); font-size: 14px; transition: transform .2s var(--spring), box-shadow .2s;
  animation: popIn .4s var(--spring) both;
}
.poi:hover span { transform: scale(1.15); }
.poi.selected span { box-shadow: 0 0 0 3px #bf5af2, 0 2px 8px rgba(0, 0, 0, .35); }
.leaflet-tooltip.tip {
  border-radius: 12px; padding: 8px 11px; font-size: 12px; line-height: 1.5; color: var(--text);
  background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.leaflet-tooltip.tip::before { display: none; }
.tip-title { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.tip-title i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tip-price { font-weight: 600; color: var(--accent-text); }
.tip-warn { color: var(--danger); font-weight: 600; margin-top: 3px; }

.leaflet-bar { border: 0 !important; box-shadow: var(--shadow) !important; border-radius: 12px !important; overflow: hidden; }
.leaflet-bar a {
  background: var(--glass-strong) !important; color: var(--text) !important; border-bottom-color: var(--line) !important;
  width: 34px !important; height: 34px !important; line-height: 34px !important; font-weight: 400;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: background .2s;
}
.leaflet-bar a:hover { background: var(--surface) !important; color: var(--accent-text) !important; }
.leaflet-bottom.leaflet-left { margin: 0 0 14px 6px; }
.leaflet-control-scale-line { background: var(--glass-strong); border-color: var(--text-2); color: var(--text); border-radius: 0 0 4px 4px; font-size: 10.5px; }
.leaflet-bottom.leaflet-right { right: calc(var(--panel-w) + 14px); }
.leaflet-control-attribution { background: var(--glass) !important; color: var(--muted); border-radius: 8px 8px 0 0; font-size: 10px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.leaflet-control-attribution a { color: var(--text-2); }

.print-legend { display: none; }

/* ---------- Seiten (Listen, Einstellungen) ---------- */
.page { max-width: 1280px; margin: 0 auto; padding: 36px 28px 60px; }
.page.narrow { max-width: 960px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { margin: 0; font-size: 38px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.page-head .eyebrow { font-size: 12px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page-head .actions input, .page-head .actions select { width: auto; min-width: 160px; border-radius: 999px; padding: 7px 14px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi {
  background: var(--surface); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); animation: fadeUp .5s var(--ease) both;
}
.kpi:nth-child(2) { animation-delay: .05s; } .kpi:nth-child(3) { animation-delay: .1s; } .kpi:nth-child(4) { animation-delay: .15s; } .kpi:nth-child(5) { animation-delay: .2s; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.kpi span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.kpi b { font-size: 26px; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.kpi:first-child b { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.table-wrap { background: var(--surface); border-radius: var(--r-lg); overflow: auto; box-shadow: var(--shadow-sm); }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 600; background: var(--surface); position: sticky; top: 0; z-index: 1; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); }
.table th, .table td { padding: 11px 14px; vertical-align: middle; }
.table td { border-bottom: 1px solid var(--line); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color .15s; }
.table tbody tr:hover { background: var(--surface-2); }
.table td.r { font-variant-numeric: tabular-nums; }
.table td.empty { text-align: center; color: var(--muted); padding: 48px; }
.table.anim tbody tr { animation: fadeUp .45s var(--ease) both; }
.table.anim tbody tr:nth-child(1) { animation-delay: .02s; } .table.anim tbody tr:nth-child(2) { animation-delay: .04s; }
.table.anim tbody tr:nth-child(3) { animation-delay: .06s; } .table.anim tbody tr:nth-child(4) { animation-delay: .08s; }
.table.anim tbody tr:nth-child(5) { animation-delay: .10s; } .table.anim tbody tr:nth-child(6) { animation-delay: .12s; }
.table.anim tbody tr:nth-child(7) { animation-delay: .14s; } .table.anim tbody tr:nth-child(8) { animation-delay: .16s; }
.table.anim tbody tr:nth-child(9) { animation-delay: .18s; } .table.anim tbody tr:nth-child(n+10) { animation-delay: .2s; }
.table.compact td { padding: 6px 7px; }
.table.compact input, .table.compact select { padding: 6px 8px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.badge.vergeben, .badge.bezahlt { background: var(--ok-soft); color: var(--ok); }
.badge.reserviert, .badge.offen { background: var(--warn-soft); color: var(--warn); }
.badge.storniert { background: var(--danger-soft); color: var(--danger); text-decoration: line-through; }
.tag { border: 0; background: var(--accent-soft); color: var(--accent-text); border-radius: 7px; padding: 2px 8px; cursor: pointer; font-weight: 600; font-size: 12px; transition: transform .15s var(--ease), background .2s; }
.tag:hover { background: var(--accent); color: #fff; }
.tag:active { transform: scale(.94); }
.status-select { width: auto; padding: 4px 26px 4px 10px; font-size: 12px; font-weight: 600; border-radius: 999px; border-color: transparent; }
.status-select.bezahlt { background-color: var(--ok-soft); color: var(--ok); }
.status-select.offen { background-color: var(--warn-soft); color: var(--warn); }
.status-select.storniert { background-color: var(--danger-soft); color: var(--danger); }
.card { background: var(--surface); border-radius: var(--r-lg); padding: 20px 24px 24px; margin-bottom: 16px; box-shadow: var(--shadow-sm); animation: fadeUp .5s var(--ease) both; }
.card:nth-of-type(2) { animation-delay: .05s; } .card:nth-of-type(3) { animation-delay: .1s; } .card:nth-of-type(n+4) { animation-delay: .15s; }
.card h2 { font-size: 17px; margin: 0 0 6px; letter-spacing: -.01em; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.card-head h2 { margin: 0; }
.logo-prev { height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 3px; background: #fff; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .25s var(--ease);
}
.modal-backdrop.show { opacity: 1; }
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--surface); border-radius: var(--r-xl); width: min(620px, 100%); max-height: calc(100vh - 32px);
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
  transform: translateY(16px) scale(.96); opacity: 0; transition: transform .45s var(--spring), opacity .25s var(--ease);
}
.modal-backdrop.show .modal { transform: none; opacity: 1; }
.modal.wide { width: min(1000px, 100%); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px 10px; }
.modal-head h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.modal-body { padding: 4px 22px 20px; overflow: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line); }
.modal-foot .danger { margin-right: auto; }

.inv-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; margin-bottom: 14px; }
.inv-meta .static { padding: 6px 0; line-height: 1.45; }
.inv-editor .items { margin: 8px 0; border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.inv-editor .items th { background: var(--surface-2); }
.inv-editor .items td { padding: 5px 6px; border-bottom: 1px solid var(--line); }
.inv-editor .items input { padding: 6px 8px; }
.inv-bottom { display: grid; grid-template-columns: 1fr 290px; gap: 22px; margin-top: 12px; }
.totals div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.totals .grand { font-size: 17px; border-bottom: 0; padding-top: 10px; }
.totals .grand b { color: var(--accent-text); }

.toast {
  position: fixed; bottom: 26px; left: 50%; z-index: 3000; display: flex; align-items: center; gap: 14px;
  background: var(--glass-dark); color: #fff; padding: 11px 12px 11px 18px; border-radius: 999px; box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  font-weight: 500; font-size: 13px;
  transform: translate(-50%, 30px) scale(.95); opacity: 0; pointer-events: none;
  transition: transform .5s var(--spring), opacity .3s var(--ease);
}
.toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast:not(:has(#toast-action:not([hidden]))) { padding-right: 18px; }
.toast button { border: 0; background: rgba(255, 255, 255, .16); color: #fff; border-radius: 999px; padding: 5px 12px; font-weight: 600; cursor: pointer; }
.toast button:hover { background: var(--accent); }

/* ---------- Animationen ---------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes viewIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes panelIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes popDown { from { opacity: 0; transform: translate(-50%, -12px) scale(.94); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes popUp { from { opacity: 0; transform: translate(-50%, 16px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes popIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes standIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes selGlow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(191, 90, 242, .7)); } 50% { filter: drop-shadow(0 0 10px rgba(191, 90, 242, 1)); } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pulse { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Rechnungsdokument (Druck, immer hell) ---------- */
#print-area { display: none; }
.invoice-doc { width: 210mm; min-height: 297mm; padding: 18mm 20mm 14mm 25mm; background: #fff; color: #111; font-size: 10.5pt; line-height: 1.45; position: relative; page-break-after: always; }
.invoice-doc header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14mm; }
.invoice-doc .org { display: flex; gap: 10px; align-items: center; font-size: 12pt; }
.invoice-doc .org img { max-height: 18mm; max-width: 45mm; }
.invoice-doc .org-addr { text-align: right; font-size: 9pt; color: #444; }
.invoice-doc .addr-row { display: flex; justify-content: space-between; align-items: flex-start; min-height: 45mm; }
.invoice-doc .sender-line { font-size: 7.5pt; color: #666; border-bottom: 1px solid #aaa; margin-bottom: 3mm; padding-bottom: 1mm; width: 85mm; }
.invoice-doc .meta td { padding: 1px 0 1px 10px; font-size: 9.5pt; }
.invoice-doc .meta td:first-child { color: #555; }
.invoice-doc h1 { font-size: 16pt; margin: 6mm 0 1mm; }
.invoice-doc .subject { margin-top: 0; }
.invoice-doc table.items { width: 100%; border-collapse: collapse; margin: 5mm 0 3mm; }
.invoice-doc table.items th { text-align: left; border-bottom: 1.5px solid #111; padding: 4px 4px; font-size: 9pt; }
.invoice-doc table.items td { border-bottom: 1px solid #ddd; padding: 4px 4px; vertical-align: top; }
.invoice-doc .r { text-align: right; white-space: nowrap; }
.invoice-doc table.sum { margin-left: auto; width: 80mm; border-collapse: collapse; }
.invoice-doc table.sum td { padding: 3px 4px; }
.invoice-doc table.sum td:last-child { text-align: right; }
.invoice-doc table.sum .grand td { border-top: 1.5px solid #111; font-weight: 700; font-size: 11.5pt; }
.invoice-doc footer {
  position: absolute; left: 25mm; right: 20mm; bottom: 12mm; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4mm;
  font-size: 7.5pt; color: #555; border-top: 1px solid #ccc; padding-top: 3mm;
}

/* ---------- Druck ---------- */
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; color: #111; }
  body.printing-invoice > *:not(#print-area) { display: none !important; }
  body.printing-invoice #print-area { display: block; }

  body.printing-plan .topbar, body.printing-plan .toolbar, body.printing-plan .panel, body.printing-plan .layer-switch,
  body.printing-plan .mode-hint, body.printing-plan .mode-options, body.printing-plan .leaflet-control-zoom,
  body.printing-plan #modal, body.printing-plan .toast { display: none !important; }
  body.printing-plan main { position: static; }
  body.printing-plan .view { display: none !important; animation: none !important; }
  body.printing-plan #view-plan { display: block !important; height: auto; }
  body.printing-plan .plan-wrap { height: 270mm; width: 190mm; margin: 10mm; }
  body.printing-plan #map { inset: 0 0 32mm 0; }
  body.printing-plan .leaflet-bottom.leaflet-right { right: 0; }
  body.printing-plan .print-legend { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 30mm; font-size: 9pt; }
  .print-legend h2 { margin: 2mm 0 1mm; font-size: 13pt; }
  .print-legend ul { list-style: none; padding: 0; margin: 2mm 0; display: flex; flex-wrap: wrap; gap: 2mm 6mm; }
  .print-legend li { display: flex; align-items: center; gap: 2mm; }
  .print-legend i { width: 4mm; height: 4mm; display: inline-block; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .leaflet-container, .leaflet-pane * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .stand-path.is-sel { filter: none; animation: none; }
}

/* ---------- Kleinere Bildschirme ---------- */
@media (max-width: 1180px) {
  .brand-text, .save-state span { display: none; }
  .brand { min-width: 0; }
  .save-state { min-width: 0; }
  .tabs button { padding: 6px 10px; }
}
@media (max-width: 860px) {
  :root { --top: 100px; --panel-w: 0px; }
  .topbar { flex-wrap: wrap; height: var(--top); padding: 6px 10px; gap: 6px; align-content: flex-start; }
  .brand-text, .save-state { display: none; }
  .market-switch { flex: 1; min-width: 0; }
  .select-pill { flex: 1; min-width: 0; }
  .select-pill select { max-width: none; width: 100%; }
  .top-actions .btn.icon { width: 30px; height: 30px; }
  .tabs { margin-left: 0; order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .toolbar { left: 8px; top: 8px; padding: 4px; }
  .toolbar button { width: 44px; height: 42px; }
  .toolbar button em { display: none; }
  .leaflet-control-zoom { display: none; }
  .panel { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; height: 42%; }
  .layer-switch { right: 10px; bottom: calc(42% + 20px); }
  .ls-pop { width: min(340px, calc(100vw - 20px)); }
  .leaflet-bottom.leaflet-right { right: 0; }
  .leaflet-bottom.leaflet-left { bottom: 42%; }
  .mode-hint { left: 50%; top: auto; bottom: calc(42% + 84px); white-space: normal; max-width: 90%; }
  .mode-options { left: 50%; bottom: calc(42% + 18px); max-width: calc(100% - 24px); }
  .toast { max-width: calc(100% - 32px); border-radius: 18px; }
  .form-grid, .inv-meta, .inv-bottom { grid-template-columns: 1fr; }
  .page { padding: 24px 16px 40px; }
  .page-head h1 { font-size: 30px; }
}

/* ==========================================================================
   Erweiterungen v3: Dropdowns, Planansicht, Sperren, Schilder, Ablage,
   Schreiben, Organisation, Druckunterlagen
   ========================================================================== */

/* Native Selects einheitlich mit Chevron */
select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%238e8e93' stroke-width='3' stroke-linecap='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* Dropdown-Menü */
.dd-menu {
  position: fixed; z-index: 4000; padding: 5px; border-radius: 14px; min-width: 180px; max-height: 60vh; overflow: auto;
  background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top left;
  transition: opacity .18s var(--ease), transform .3s var(--spring);
}
.dd-menu.up { transform-origin: bottom left; transform: translateY(6px) scale(.97); }
.dd-menu.show { opacity: 1; transform: none; }
.dd-item {
  display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; text-align: left; cursor: pointer;
  padding: 8px 11px; border-radius: 9px; font-size: 13px; color: var(--text); white-space: nowrap;
}
.dd-item span { flex: 1; }
.dd-item:hover { background: var(--accent); color: #fff; }
.dd-item:hover .dd-dot { box-shadow: 0 0 0 2px #fff; }
.dd-item.active { font-weight: 600; }
.dd-item svg { color: var(--accent-text); }
.dd-item:hover svg { color: #fff; }
.dd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.dd-dot.ok { background: #34c759; } .dd-dot.warn { background: #ff9f0a; } .dd-dot.bad { background: #ff3b30; } .dd-dot.accent { background: var(--accent); }

.status-pill {
  display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; white-space: nowrap;
  padding: 5px 10px 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); color: var(--muted); transition: transform .15s var(--ease), filter .2s, box-shadow .2s;
}
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-pill svg { opacity: .7; }
.status-pill:hover { box-shadow: 0 0 0 3px var(--line); }
.status-pill:active { transform: scale(.95); }
.status-pill.ok { background: var(--ok-soft); color: var(--ok); }
.status-pill.warn { background: var(--warn-soft); color: var(--warn); }
.status-pill.bad { background: var(--danger-soft); color: var(--danger); }
.status-pill.accent { background: var(--accent-soft); color: var(--accent-text); }
.select-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 11px; border-radius: var(--r-sm); cursor: pointer; text-align: left;
  border: 1px solid var(--line-strong); background: var(--input); color: var(--text);
}
.select-btn svg:last-child { margin-left: auto; color: var(--muted); }
.h-ico { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; flex: none; }
.h-ico svg { width: 22px; height: 22px; }

/* Planansicht-Auswahl */
.view-switch { position: absolute; left: 92px; top: 14px; z-index: 805; animation: fadeUp .5s var(--ease) backwards .2s; }
.vs-btn {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 14px; cursor: pointer; color: var(--text);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.vs-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.vs-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text); font-weight: 650; }
.vs-btn b { font-size: 13.5px; }
.vs-btn svg { color: var(--muted); }
.mode-hint { top: 70px; }

/* Stände in Neben-Plänen gedimmt */
.stands-dim .stand-label { display: none; }

/* Drehgriff: Winkelanzeige */
.rot-handle[data-deg]::after {
  content: attr(data-deg); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  background: var(--glass-dark); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.leaflet-marker-dragging.rot-handle, .rot-handle:active { cursor: grabbing; }

/* Punkte: Emoji / Verkehrszeichen */
.poi .emo { font-size: 14px; line-height: 1; }
.poi.sign span { background: transparent; box-shadow: none; width: 28px; height: 28px; }
.poi.sign span svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.poi.sign.selected span svg { filter: drop-shadow(0 0 0 #bf5af2) drop-shadow(0 0 5px #bf5af2); }
.poi em {
  position: absolute; right: -8px; top: -8px; font-style: normal; font-size: 10px; font-weight: 800; color: #fff;
  background: var(--accent); border-radius: 999px; padding: 1px 5px; box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.chip-ico { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; }
.chip-ico svg { width: 18px; height: 18px; }
.mode-options .mo-title:not(:first-child) { margin-top: 10px; }
.line-ico { display: inline-block; width: 22px; height: 5px; border-radius: 2px; background: var(--c); vertical-align: middle; }
.line-ico.stripe { background: repeating-linear-gradient(90deg, var(--c) 0 5px, #fff 5px 10px); outline: 1px solid var(--c); }
.line-label {
  pointer-events: none; transform: translate(-50%, -150%); width: max-content !important; white-space: nowrap;
  background: rgba(255, 59, 48, .92); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
}
.zone-label, .line-label { height: auto !important; line-height: 1.45; }
.zone-label.park { background: #0058a9; padding: 2px 9px; border-radius: 6px; text-shadow: none; }
.ovl-handle { background: #fff; border: 3px solid #bf5af2; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.4); cursor: nwse-resize; }
.ovl-handle.move { border-radius: 50%; cursor: move; background: #bf5af2; border-color: #fff; }
.ls-ovl { border-top: 1px solid var(--line); padding: 10px 6px 4px; display: flex; flex-direction: column; gap: 6px; }
.ls-ovl .switch-row, .ls-ovl .range-row { border-top: 0; padding: 4px 0; }
.ls-ovl-head b { display: block; font-size: 13px; }
.ls-ovl-head small { font-size: 11px; color: var(--muted); }
.ls-pop { max-height: calc(100vh - 140px); overflow: auto; }
.ls-grid { grid-template-columns: repeat(3, 1fr); }

/* Dateiablage */
.filebox { display: flex; flex-direction: column; gap: 10px; }
.dropzone {
  display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px 18px; border-radius: var(--r); cursor: pointer;
  border: 1.5px dashed var(--line-strong); background: var(--surface-2); color: var(--muted); transition: all .25s var(--ease);
}
.dropzone b { color: var(--text); }
.dropzone small { display: block; font-size: 11.5px; }
.dropzone svg { color: var(--accent-text); flex: none; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.over { transform: scale(1.01); }
.files { display: flex; flex-direction: column; gap: 6px; }
.files-empty { font-size: 12.5px; color: var(--muted); padding: 2px 4px; }
.file {
  display: flex; align-items: center; gap: 12px; padding: 7px 8px 7px 7px; border-radius: 12px; background: var(--surface-2);
  animation: fadeUp .35s var(--ease) both; transition: background .2s;
}
.file:hover { background: var(--surface-3); }
.file-thumb { border: 0; padding: 0; background: none; cursor: pointer; flex: none; }
.file-thumb i {
  display: grid; place-items: center; width: 38px; height: 46px; border-radius: 7px; font-style: normal; font-size: 10px; font-weight: 800;
  color: #fff; background: var(--c); letter-spacing: .03em; box-shadow: inset 0 -10px 0 rgba(0,0,0,.12);
}
.file-thumb img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; display: block; }
.file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.file-meta b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta small { font-size: 11.5px; color: var(--muted); }
.file-act { display: flex; gap: 2px; opacity: .6; transition: opacity .2s; }
.file:hover .file-act { opacity: 1; }
.files.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.files.gallery .file { flex-direction: column; align-items: stretch; padding: 6px; gap: 6px; position: relative; }
.files.gallery .file-thumb img, .files.gallery .file-thumb i { width: 100%; height: 120px; }
.files.gallery .file-thumb i { font-size: 16px; }
.files.gallery .file-act { position: absolute; top: 10px; right: 10px; background: var(--glass-strong); border-radius: 999px; opacity: 0; }
.files.gallery .file:hover .file-act { opacity: 1; }
.files.gallery .file-meta { padding: 0 4px 2px; }

/* Seiten-Layout breit */
.page.wide { max-width: 1360px; }

/* Schreiben */
.letters { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
.tpl-list { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; padding: 14px; }
.tpl-group { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text); font-weight: 650; margin: 10px 8px 4px; }
.tpl-group:first-child { margin-top: 0; }
.tpl-item { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-weight: 500; color: var(--text-2); transition: all .2s var(--ease); }
.tpl-item:hover { background: var(--surface-2); color: var(--text); }
.tpl-item.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 650; }
.tpl-list .btn { margin-top: 10px; }
.letter-card { padding: 22px 26px 26px; }
.letter-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.letter-top h2 { font-size: 24px; margin: 0; letter-spacing: -.02em; }
.ltr-recipient { background: var(--surface-2); border-radius: var(--r); padding: 4px 14px 14px; margin: 10px 0 4px; }
.ltr-recipient .chips { margin-bottom: 8px; }
.chips.small .chip { padding: 3px 10px; font-size: 12px; }
.letter-body { font-size: 14px; line-height: 1.6; min-height: 340px; }
.letter-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ph-list { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 10px 0; }
.ph { border: 0; background: var(--accent-soft); color: var(--accent-text); border-radius: 6px; padding: 2px 7px; font-size: 11.5px; font-family: ui-monospace, Menlo, monospace; cursor: pointer; transition: transform .15s; }
.ph:hover { background: var(--accent); color: #fff; }
.ph:active { transform: scale(.94); }
.tpl-editor textarea { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; line-height: 1.55; }

/* Organisation */
.orga { display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: start; }
.orga-nav { position: sticky; top: 16px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.orga-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px;
  color: var(--text-2); font-weight: 500; font-size: 13px; text-decoration: none; transition: all .2s var(--ease);
}
.orga-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.orga-nav a.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 650; }
.pbadge { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pbadge.part { background: var(--warn-soft); color: var(--warn); }
.pbadge.ok { background: var(--ok-soft); color: var(--ok); }
.orga-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.orga-sec { margin: 0; scroll-margin-top: 16px; }
.orga-sec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.orga-sec-head h2 { font-size: 21px; margin: 0; letter-spacing: -.02em; }
.orga-sec-head p { margin: 4px 0 0; font-size: 13px; }
.sub-h { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 650; margin: 20px 0 8px; }
.form-grid .span2 { grid-column: span 2; }
.field.full { grid-column: 1 / -1; }
.progress-ring {
  --p: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-3) 0); transition: --p 1s;
}
.progress-ring span { width: 36px; height: 36px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.chk-bar { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin: 4px 0 12px; }
.chk-bar i { display: block; height: 100%; background: var(--accent-grad); border-radius: 999px; transition: width .6s var(--ease); }
.chk-group { margin-bottom: 10px; }
.chk-gtitle { font-size: 12px; font-weight: 650; color: var(--muted); margin: 8px 0 4px; }
.chk { display: flex; align-items: center; gap: 10px; padding: 3px 4px; border-radius: 10px; transition: background .2s; }
.chk:hover { background: var(--surface-2); }
.chk-box { margin: 0; position: relative; cursor: pointer; flex: none; }
.chk-box input { position: absolute; opacity: 0; }
.chk-box i {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong);
  transition: all .3s var(--spring);
}
.chk-box input:checked + i { background: #34c759; border-color: #34c759; transform: scale(1.05); }
.chk-box input:checked + i::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); animation: popIn .3s var(--spring); }
.chk-box input:focus-visible + i { box-shadow: 0 0 0 4px var(--accent-ring); }
.chk-text { border-color: transparent; background: transparent; padding: 6px 8px; }
.chk-text:hover { border-color: var(--line); }
.chk.done .chk-text { color: var(--muted); text-decoration: line-through; }
.chk-due { width: 150px; flex: none; border-color: transparent; background: transparent; color: var(--muted); font-size: 12.5px; }
.chk-due:hover { border-color: var(--line); }
.chk-due.overdue { color: var(--danger); font-weight: 600; }
.chk-add { margin-top: 8px; }
.chk-add select { max-width: 180px; }
.app-stats { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.app-stat { background: var(--surface-2); border-radius: var(--r); padding: 8px 14px; min-width: 96px; }
.app-stat b { display: block; font-size: 20px; }
.app-stat span { font-size: 11.5px; color: var(--muted); }
.app-stat.ok b { color: var(--ok); } .app-stat.warn b { color: var(--warn); } .app-stat.bad b { color: var(--danger); }
.etable-wrap { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.etable { background: var(--surface-2); border-radius: var(--r); overflow: hidden; }
.etable th { background: var(--surface-2); }
.etable td { padding: 4px 6px; }
.etable td.c { text-align: center; }
.etable input { border-color: transparent; background: transparent; padding: 6px 8px; }
.etable input:hover { border-color: var(--line-strong); background: var(--input); }
.etable input:focus { background: var(--input); }
.contracts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.contract { background: var(--surface-2); border-radius: var(--r); padding: 6px 14px 12px; animation: fadeUp .4s var(--ease) both; }
.contract-head { display: flex; align-items: center; gap: 8px; }
.contract-head .field { flex: 1; }
.contract-head .title input { font-weight: 700; font-size: 16px; border-color: transparent; background: transparent; padding-left: 0; }
.contract-head .title input:hover { border-color: var(--line); }
.contract .form-grid input { background: var(--input); }
.contract-files { margin-top: 10px; }
.contract-files summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent-text); padding: 4px 0; list-style: none; }
.contract-files summary::before { content: "▸ "; display: inline-block; transition: transform .2s; }
.contract-files[open] summary::before { transform: rotate(90deg); }
.contract-files .filebox { margin-top: 8px; }
.mini-list { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-item { display: inline-flex; align-items: center; gap: 7px; border: 0; background: var(--surface-2); border-radius: 999px; padding: 4px 12px 4px 6px; cursor: pointer; font-size: 12.5px; }
.mini-item svg { width: 18px; height: 18px; }
.mini-item em { font-style: normal; color: var(--muted); font-weight: 600; }
.mini-item:hover { background: var(--accent-soft); }
.compare { margin: 10px 0; font-size: 13px; padding: 8px 12px; border-radius: 10px; background: var(--ok-soft); display: inline-block; }
.compare.bad { background: var(--danger-soft); }
.plan-btns { margin-top: 12px; }
.material { margin: 0 0 10px; padding-left: 18px; line-height: 1.8; }
.embed-letter { background: var(--surface-2); border-radius: var(--r); padding: 14px 16px; margin-top: 8px; }
.embed-subj small { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.embed-body { white-space: pre-wrap; font-size: 13px; line-height: 1.6; max-height: 260px; overflow: auto; margin: 10px 0 12px; padding: 12px; background: var(--surface); border-radius: 10px; }
.hint-box { background: var(--accent-soft); color: var(--text); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin-top: 12px; }
.doc-choice { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.choice {
  display: flex; align-items: center; gap: 14px; margin: 0; padding: 12px 14px; border-radius: var(--r); cursor: pointer;
  border: 1.5px solid var(--line); color: var(--text); transition: all .2s var(--ease);
}
.choice:hover { border-color: var(--accent); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice.disabled { opacity: .5; cursor: not-allowed; }
.choice b { display: block; font-size: 14px; }
.choice small { font-size: 12px; color: var(--muted); }
.ch-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 17px; flex: none; }

/* ---------- Druckunterlagen (Bildschirm: versteckt) ---------- */
.pg { background: #fff; color: #111; }
.pg.portrait { width: 210mm; min-height: 297mm; }
.pg.landscape { width: 297mm; height: 209mm; overflow: hidden; }
.doc { padding: 12mm 16mm 10mm; font-size: 10pt; line-height: 1.45; font-family: Inter, -apple-system, "Segoe UI", Arial, sans-serif; position: relative; min-height: 297mm; }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #ddd; padding-bottom: 4mm; margin-bottom: 6mm; }
.doc-org { display: flex; gap: 10px; align-items: center; font-size: 11pt; }
.doc-org img { max-height: 14mm; max-width: 40mm; }
.doc-org-addr { text-align: right; font-size: 8.5pt; color: #555; }
.doc-eyebrow { font-size: 9pt; text-transform: uppercase; letter-spacing: .1em; color: #8a3ffc; font-weight: 700; }
.doc-title { font-size: 20pt; margin: 1mm 0 0; letter-spacing: -.02em; }
.doc-sub { color: #555; margin-bottom: 5mm; }
.doc-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3mm; margin-bottom: 3mm; }
.doc-grid div { background: #f5f5f7; border-radius: 3mm; padding: 2.5mm 3mm; }
.doc-grid small { display: block; font-size: 7.5pt; color: #777; text-transform: uppercase; letter-spacing: .05em; }
.doc-grid b { display: block; font-size: 10pt; }
.doc-grid span { font-size: 8.5pt; color: #555; }
.doc-table { width: 100%; border-collapse: collapse; margin-bottom: 4mm; font-size: 9.5pt; }
.doc-table td { padding: 1.5mm 2mm; border-bottom: 1px solid #e5e5e5; }
.doc-map { border-radius: 3mm; overflow: hidden; }
.doc-map-cap { font-size: 8pt; color: #666; margin: 1.5mm 0 4mm; }
.doc-foot { font-size: 8pt; color: #666; border-top: 1px solid #ddd; padding-top: 2mm; margin-top: 3mm; }
.smap { position: relative; overflow: hidden; background: #e8e8ed; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.smap .sm-base { position: absolute; max-width: none; }
.smap > svg { position: absolute; left: 0; top: 0; }   /* nur die Zeichenebene – nicht Kompass/Symbole */
.smap .sm-no { font: 700 10px Inter, Arial, sans-serif; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 2.5px; }
.smap .sm-callout { font: 800 13px Inter, Arial, sans-serif; fill: #fff; text-anchor: middle; }
.sm-poi { position: absolute; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 11px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.sm-poi.sign { background: none; box-shadow: none; }
.sm-poi svg { width: 20px; height: 20px; }
.sm-north { position: absolute; right: 10px; top: 10px; width: 34px; height: 40px; background: rgba(255,255,255,.92); border-radius: 8px; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.sm-north svg { display: block; }
.sm-scale { position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,.9); border-radius: 4px; padding: 3px 6px; font: 600 9px Arial; color: #111; }
.sm-scale i { display: block; height: 4px; border: 1.5px solid #111; border-top: 0; margin-bottom: 1px; }
.sm-attr { position: absolute; right: 6px; bottom: 4px; font: 8px Arial; color: #fff; text-shadow: 0 0 2px #000; }

/* Standschild */
.sign { width: 297mm; height: 209mm; display: flex; flex-direction: column; font-family: Inter, -apple-system, Arial, sans-serif; color: #111; }
.sign-band { background: var(--c); color: #fff; display: flex; justify-content: space-between; padding: 7mm 14mm; font-size: 15pt; font-weight: 700; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sign-body { flex: 1; display: flex; align-items: center; gap: 14mm; padding: 10mm 16mm; }
.sign-no { width: 62mm; height: 62mm; border-radius: 50%; border: 3mm solid var(--c); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; }
.sign-no small { font-size: 14pt; text-transform: uppercase; letter-spacing: .15em; color: #666; }
.sign-no b { font-size: 60pt; line-height: 1; letter-spacing: -.03em; }
.sign-main { min-width: 0; }
.sign-cat { display: inline-block; font-size: 13pt; font-weight: 700; color: var(--c); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3mm; }
.sign-name { font-size: 52pt; font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
.sign-name.long { font-size: 38pt; }
.sign-sort { font-size: 22pt; margin-top: 5mm; color: #333; line-height: 1.25; }
.sign-addr { font-size: 13pt; color: #555; margin-top: 8mm; line-height: 1.5; }
.sign-foot { display: flex; align-items: center; gap: 8mm; justify-content: space-between; padding: 5mm 14mm; border-top: 1px solid #ddd; font-size: 10pt; color: #555; }
.sign-foot img { max-height: 12mm; }

/* Bewerbungsformular */
.af-h { font-size: 11pt; margin: 6mm 0 2mm; color: #8a3ffc; }
.af-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm 8mm; }
.af-field.wide { grid-column: 1 / -1; }
.af-field span { display: block; font-size: 8pt; color: #666; }
.af-field i { display: block; border-bottom: 1px solid #999; height: 7mm; }
.af-cats { display: flex; flex-wrap: wrap; gap: 2mm 7mm; margin: 2mm 0 3mm; font-size: 9.5pt; }
.af-box { display: inline-flex; align-items: center; gap: 2mm; }
.af-box i { width: 3.5mm; height: 3.5mm; border: 1px solid #555; display: inline-block; }
.af-text { font-size: 9pt; color: #333; }
.sign-row { margin-top: 10mm; }

/* Brief */
.doc.letter { font-size: 10.5pt; }
.letter-addr { min-height: 40mm; margin-top: 4mm; }
.letter-addr .sender-line { font-size: 7.5pt; color: #666; border-bottom: 1px solid #aaa; margin-bottom: 3mm; padding-bottom: 1mm; width: 85mm; }
.letter-date { text-align: right; margin-bottom: 8mm; }
.letter-subj { font-weight: 700; margin-bottom: 6mm; }
.letter-text { white-space: pre-wrap; line-height: 1.55; }

@page landscape { size: A4 landscape; margin: 0; }
@media print {
  body.printing-docs > *:not(#print-area) { display: none !important; }
  body.printing-docs #print-area { display: block; }
  body.printing-docs .pg { page-break-after: always; break-after: page; }
  body.printing-docs .pg:last-child { page-break-after: auto; break-after: auto; }
  body.printing-docs .pg.landscape { page: landscape; }
  .pg .doc { min-height: 0; }
}

@media (max-width: 1180px) {
  .tabs button { padding: 6px 8px; font-size: 12.5px; }
  .letters, .orga { grid-template-columns: 1fr; }
  .tpl-list, .orga-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .tpl-group { width: 100%; }
}
@media (max-width: 860px) {
  .view-switch { left: 64px; top: 8px; }
  .vs-eyebrow { display: none; }
}
@media print {
  body.printing-docs .pg.portrait { min-height: 0; height: 296mm; overflow: hidden; }
  body.printing-docs .invoice-doc { min-height: 296mm; }
}

/* ==========================================================================
   v4: Dokumentenablage mit Kategorien, DOP-Import
   ========================================================================== */
.ablage { display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: start; }
.ab-cats { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 8px; }
.ab-cat {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 8px 8px 10px; border-radius: 10px; border: 1.5px solid transparent;
  background: none; cursor: pointer; text-align: left; color: var(--text-2); font-weight: 500; font-size: 13px; transition: all .2s var(--ease);
}
.ab-cat i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.ab-cat span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-cat em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; }
.ab-cat:hover { background: var(--surface-2); color: var(--text); }
.ab-cat.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 650; }
.ab-cat.active em { background: var(--surface); }
.ab-cat.drop-over { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.03); }
.ab-cat-menu { border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 6px; padding: 0 5px; font-size: 16px; line-height: 1; opacity: 0; transition: opacity .2s; }
.ab-cat:hover .ab-cat-menu, .ab-cat.active .ab-cat-menu { opacity: 1; }
.ab-cat-menu:hover { background: var(--surface-3); color: var(--text); }
.ab-newcat { display: flex; gap: 6px; margin-top: 8px; }
.ab-newcat input { padding: 6px 10px; }
.ab-tip { margin: 8px 4px 0; line-height: 1.4; }
.ab-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ab-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ab-toolbar input[type=search] { flex: 1; min-width: 180px; border-radius: 999px; }
.ab-toolbar select { width: auto; border-radius: 999px; }
.ab-seg { min-width: 290px; }
.ab-seg button { white-space: nowrap; padding: 6px 12px; }
.ab-global { margin: 0; font-size: 12.5px; color: var(--muted); }
.ab-file { cursor: grab; }
.ab-file.dragging { opacity: .4; }
.cat-pill, .scope-pill {
  display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer; white-space: nowrap; max-width: 220px;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
}
.cat-pill { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.cat-pill:hover { background: color-mix(in srgb, var(--c) 24%, transparent); }
.scope-pill { background: var(--surface-3); color: var(--muted); }
.scope-pill.global { background: var(--accent-soft); color: var(--accent-text); }
.scope-pill:hover { box-shadow: 0 0 0 2px var(--line-strong); }
.ls-import { width: 100%; margin: 2px 0 8px; }

/* DOP-Import */
.dop-head { margin: 14px 0 8px; display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.dop-grid { display: grid; gap: 3px; margin-bottom: 8px; max-width: 100%; width: max-content; overflow: auto; }
.dop-ax { font-size: 9.5px; color: var(--muted); text-align: center; align-self: center; font-variant-numeric: tabular-nums; }
.dop-cell { aspect-ratio: 1; width: clamp(18px, calc((100vw - 400px) / 22), 46px); border-radius: 5px; border: 1.5px solid transparent; background: var(--surface-3); cursor: pointer; transition: all .15s var(--ease); }
.dop-cell:hover:not(:disabled) { border-color: var(--accent); transform: scale(1.08); }
.dop-cell.none { background: transparent; cursor: default; }
.dop-cell.noimg { background: repeating-linear-gradient(45deg, var(--surface-2) 0 3px, var(--surface-3) 3px 6px); cursor: not-allowed; }
.dop-cell.market { box-shadow: inset 0 0 0 2px #ff9f0a; }
.dop-cell.done { background: color-mix(in srgb, #34c759 35%, var(--surface-3)); }
.dop-cell.sel { background: var(--accent); }
.dop-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-bottom: 12px; }
.dop-legend span { display: flex; align-items: center; gap: 5px; }
.dop-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--surface-3); display: inline-block; }
.dop-legend i.sel { background: var(--accent); } .dop-legend i.market { box-shadow: inset 0 0 0 2px #ff9f0a; }
.dop-legend i.done { background: color-mix(in srgb, #34c759 35%, var(--surface-3)); }
.dop-legend i.noimg { background: repeating-linear-gradient(45deg, var(--surface-2) 0 2px, var(--surface-3) 2px 4px); }
.dop-progress { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12.5px; }
.dop-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.dop-bar i { display: block; height: 100%; width: 0; background: var(--accent-grad); transition: width .3s var(--ease); }
.alert { margin-top: 12px; }

@media (max-width: 1180px) { .ablage { grid-template-columns: 1fr; } .ab-cats { position: static; flex-direction: row; flex-wrap: wrap; } .ab-cat { width: auto; } }
/* Haarlinien zwischen Kacheln bei Zwischen-Zoomstufen vermeiden (Kacheln minimal überlappen) */
.seamless-256 .leaflet-tile { mix-blend-mode: normal !important; width: 257px !important; height: 257px !important; }
.seamless-512 .leaflet-tile { mix-blend-mode: normal !important; width: 513px !important; height: 513px !important; }

/* ==========================================================================
   v5: Rechnung (neues Layout), Gestattung
   ========================================================================== */
.inv2 { padding: 14mm 18mm 30mm 22mm; font-family: Inter, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 10pt; color: #1d1d1f; }
.inv2.void::before { content: "STORNIERT"; position: absolute; top: 120mm; left: 40mm; font-size: 64pt; font-weight: 800; color: rgba(255,59,48,.18); transform: rotate(-24deg); }
.inv2-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10mm; }
.inv2-brand { display: flex; align-items: center; gap: 3.5mm; }
.inv2-brand > img { max-height: 18mm; max-width: 45mm; }
.inv2-mark { width: 13mm; height: 13mm; border-radius: 3mm; background: linear-gradient(135deg, #b16cff, #8a3ffc 50%, #6a2bd9); display: grid; place-items: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.inv2-mark img { width: 12mm; height: 12mm; }
.inv2-brand b { display: block; font-size: 12pt; }
.inv2-brand span { font-size: 9pt; color: #6e6e73; }
.inv2-org { text-align: right; font-size: 8.5pt; color: #6e6e73; line-height: 1.5; }
.inv2-addr { display: flex; justify-content: space-between; align-items: flex-end; min-height: 40mm; }
.inv2-addr .sender-line { font-size: 7.5pt; color: #6e6e73; font-style: italic; border-bottom: 1px solid #c7c7cc; margin-bottom: 3mm; padding-bottom: 1mm; width: 88mm; }
.inv2-addr .recipient { line-height: 1.45; }
.inv2-date { font-size: 10pt; }
.inv2-title { margin: 9mm 0 4mm; }
.inv2-kicker { font-size: 9pt; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8a3ffc; }
.inv2-title h1 { font-size: 20pt; margin: 1mm 0 2mm; letter-spacing: -.02em; }
.inv2-title p { margin: 0; color: #424245; }
.inv2-bar { display: flex; justify-content: space-between; background: #f2f2f7; border-radius: 2.5mm; padding: 2.5mm 4mm; margin-bottom: 4mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.inv2-facts { width: 100%; border-collapse: collapse; margin-bottom: 4mm; }
.inv2-facts th { text-align: left; font-weight: 500; color: #6e6e73; width: 40mm; padding: 1mm 0; vertical-align: top; }
.inv2-facts td { padding: 1mm 0; }
.inv2-items { width: 100%; border-collapse: collapse; }
.inv2-items th { text-align: left; font-size: 8pt; text-transform: uppercase; letter-spacing: .06em; color: #6e6e73; border-bottom: 1.5px solid #1d1d1f; padding: 1.5mm 1mm; }
.inv2-items td { padding: 2mm 1mm; border-bottom: 1px solid #e5e5ea; vertical-align: top; }
.inv2-items td small { display: block; color: #6e6e73; font-size: 8.5pt; }
.inv2-items .r { text-align: right; white-space: nowrap; }
.inv2-sum { margin: 3mm 0 0 auto; width: 82mm; }
.inv2-sum div { display: flex; justify-content: space-between; padding: 1mm 1mm; }
.inv2-sum .muted { color: #6e6e73; font-size: 9pt; }
.inv2-sum .grand { margin-top: 1.5mm; padding: 2.5mm 3mm; border-radius: 2.5mm; background: #1d1d1f; color: #fff; font-weight: 700; font-size: 12pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.inv2-pay { margin-top: 7mm; background: #f5f0ff; border-left: 1.2mm solid #8a3ffc; border-radius: 2mm; padding: 3mm 4mm; line-height: 1.55; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.inv2-pay-row { display: flex; justify-content: space-between; gap: 6mm; }
.inv2-pay-row b { font-size: 11pt; white-space: nowrap; }
.inv2-ref { margin-top: 1.5mm; font-weight: 600; }
.inv2-notes { margin-top: 6mm; line-height: 1.55; color: #1d1d1f; }
.inv2-next { margin-top: 4mm; font-weight: 600; }
.inv2-contact { margin-top: 6mm; color: #424245; line-height: 1.5; }
.inv2 footer { left: 22mm; right: 18mm; }

.permit-doc { font-size: 10.5pt; }
.permit-title { font-size: 15pt; line-height: 1.3; margin: 1mm 0 6mm; letter-spacing: -.01em; }
.permit-box { display: grid; grid-template-columns: 32mm 1fr 1fr; grid-template-areas: "no name name" "no event inv"; gap: 3mm; margin-bottom: 7mm; }
.permit-box > div { background: #f5f5f7; border-radius: 3mm; padding: 3mm 4mm; min-width: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.permit-box .pb-no { grid-area: no; background: #8a3ffc; color: #fff; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.permit-box .pb-no small { color: rgba(255,255,255,.85); }
.permit-box .pb-no b { font-size: 26pt; line-height: 1.1; }
.permit-box .pb-name { grid-area: name; } .permit-box .pb-event { grid-area: event; } .permit-box .pb-inv { grid-area: inv; }
.permit-box small { display: block; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .06em; color: #6e6e73; margin-bottom: .5mm; }
.permit-box b { display: block; font-size: 11pt; overflow-wrap: anywhere; }
.permit-box span { display: block; font-size: 9pt; color: #6e6e73; }
.permit-text { line-height: 1.6; margin-bottom: 7mm; }
.permit-legal { font-size: 8.5pt; color: #424245; border-top: 1px solid #e5e5ea; padding-top: 3mm; margin-bottom: 10mm; line-height: 1.5; }
.permit-sign { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12mm; line-height: 1.5; }
.permit-signer { font-weight: 700; }
.permit-foot { border: 1px solid #c7c7cc; border-radius: 2.5mm; padding: 3mm 4mm; font-size: 8pt; color: #424245; line-height: 1.6; }

/* Rechnungs-Editor */
.inv-editor .items .desc-in { font-weight: 600; }
.inv-editor .items .detail-in { margin-top: 3px; font-size: 12px; color: var(--muted); padding: 4px 8px; }
.permit-toggle { margin: 0 0 0 10px; }
.pn-check { margin: 8px 0 0; }
.num-preview { padding: 9px 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Pläne in Blättern drucken ---------- */
@page a4p { size: A4 portrait; margin: 0; }
@page a4l { size: A4 landscape; margin: 0; }
@page a3p { size: A3 portrait; margin: 0; }
@page a3l { size: A3 landscape; margin: 0; }
.pg.sheet { padding: 8mm; display: flex; flex-direction: column; overflow: hidden; font-family: Inter, -apple-system, Arial, sans-serif; color: #1d1d1f; }
.pg.sheet-a4p { width: 210mm; height: 296mm; } .pg.sheet-a4l { width: 297mm; height: 209mm; }
.pg.sheet-a3p { width: 297mm; height: 419mm; } .pg.sheet-a3l { width: 420mm; height: 296mm; }
@media print {
  body.printing-docs .pg.sheet-a4p { page: a4p; } body.printing-docs .pg.sheet-a4l { page: a4l; }
  body.printing-docs .pg.sheet-a3p { page: a3p; } body.printing-docs .pg.sheet-a3l { page: a3l; }
  body.printing-docs .pg.sheet { min-height: 0; }
}
.sheet-head { height: 16mm; display: flex; align-items: center; gap: 6mm; border-bottom: 1px solid #d1d1d6; margin-bottom: 0; }
.sheet-head > div:first-child { flex: 1; font-size: 10pt; }
.sheet-head .doc-eyebrow { font-size: 8pt; }
.sheet-id { font-size: 20pt; font-weight: 800; color: #8a3ffc; letter-spacing: -.02em; }
.sheet-scale { font-size: 9pt; text-align: right; font-weight: 600; }
.sheet-map { flex: none; margin: 0; }
.sheet-map .smap { border-radius: 0; }
.sheet-foot { height: 12mm; display: flex; align-items: center; justify-content: space-between; gap: 6mm; border-top: 1px solid #d1d1d6; font-size: 7.5pt; overflow: hidden; }
.sheet-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1mm 4mm; }
.sheet-legend li { display: flex; align-items: center; gap: 1.5mm; white-space: nowrap; }
.sheet-legend i { width: 3mm; height: 3mm; border-radius: 1px; display: inline-block; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sheet-legend .line-ico { width: 6mm; height: 1.4mm; }
.sheet-legend .lg-ico svg, .sheet-legend .lg-ico .emo { width: 4mm; height: 4mm; font-size: 9pt; display: inline-block; }
.sheet-meta { white-space: nowrap; color: #6e6e73; }
.smap .sm-sheet { font: 800 34px Inter, Arial, sans-serif; fill: #8a3ffc; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 5px; }
.smap .sm-name { font: 600 8.5px Inter, Arial, sans-serif; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.65); stroke-width: 2.5px; }

/* Druckdialog */
.plan-print { display: grid; grid-template-columns: 1fr 300px; gap: 24px; }
.pp-form .seg { flex-wrap: wrap; }
.pp-preview { background: var(--surface-2); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; justify-content: center; }
.pp-sheets { display: grid; gap: 3px; }
.pp-sheets span { background: var(--surface); border: 1.5px solid var(--accent); border-radius: 3px; display: grid; place-items: center; font-weight: 700; font-size: 11px; color: var(--accent-text); animation: popIn .3s var(--spring) both; }
#pp-info { text-align: center; line-height: 1.6; }

/* Bewerbungsformular (Vordruck) */
.doc.af { font-size: 9.5pt; }
.af-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #8a3ffc; padding-bottom: 4mm; margin-bottom: 6mm; }
.af-titlerow { display: flex; justify-content: space-between; align-items: flex-start; gap: 8mm; margin-bottom: 2mm; }
.af-title { font-size: 21pt; line-height: 1.12; margin: 0 0 1mm; letter-spacing: -.02em; }
.af-online { background: #f5f0ff; border-radius: 4mm; padding: 4mm 5mm; min-width: 55mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.af-online small { display: block; font-size: 7.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #8a3ffc; }
.af-online b { display: block; font-size: 12pt; }
.af-online span { font-weight: 600; }
.doc.af .af-h { display: flex; align-items: baseline; gap: 3mm; font-size: 12pt; margin: 6mm 0 2mm; color: #1d1d1f; }
.af-h em { font-style: normal; color: #8a3ffc; font-weight: 800; }
.doc.af .af-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6mm; margin-bottom: 1.5mm; }
.doc.af .af-grid.g-2-1 { grid-template-columns: 2fr 1fr; } .doc.af .af-grid.g-3-2 { grid-template-columns: 3fr 2fr; }
.doc.af .af-grid.g-2-3 { grid-template-columns: 2fr 3fr; } .doc.af .af-grid.g-3 { grid-template-columns: 1fr 1fr 1fr; }
.doc.af .af-grid.g-1 { grid-template-columns: 1fr; } .doc.af .af-grid.g-1-3 { grid-template-columns: 1fr 3fr; }
.doc.af .af-field i { display: block; border-bottom: 1px solid #b38dfd; height: 8mm; }
.doc.af .af-field span { display: block; font-size: 7.5pt; color: #6e6e73; margin-top: .8mm; }
.af-yn { display: flex; align-items: center; gap: 8mm; margin: 2mm 0; }
.af-yn > span:first-child { width: 80mm; }
.af-small { font-size: 8pt; color: #6e6e73; margin-top: 2mm; }
.af-kw { display: inline-flex; align-items: flex-end; gap: 2mm; }
.af-kw i { display: inline-block; width: 16mm; border-bottom: 1px solid #555; height: 4mm; }

/* ---------- Seitenleisten ein-/ausblenden ---------- */
.edge-toggle {
  position: absolute; top: 50%; z-index: 830; width: 22px; height: 54px; margin-top: -27px; padding: 0; border-radius: 11px;
  display: grid; place-items: center; cursor: pointer; color: var(--muted);
  transition: left .45s var(--spring), right .45s var(--spring), color .2s, background .2s;
}
.edge-toggle:hover { color: var(--accent-text); }
.edge-toggle svg { transition: transform .45s var(--spring); }
.edge-toggle.left { left: 92px; }
.edge-toggle.right { right: calc(var(--panel-w) + 20px); }
.toolbar, .panel, .view-switch, .layer-switch { transition: transform .45s var(--spring), opacity .3s var(--ease), left .45s var(--spring), right .45s var(--spring); }
.plan-wrap.tools-hidden .toolbar { transform: translateX(calc(-100% - 20px)); opacity: 0; pointer-events: none; }
.plan-wrap.tools-hidden .edge-toggle.left { left: 10px; }
.plan-wrap.tools-hidden .edge-toggle.left svg { transform: rotate(180deg); }
.plan-wrap.tools-hidden .view-switch { left: 42px; }
.plan-wrap.panel-hidden { --panel-w: 0px; }
.plan-wrap.panel-hidden .panel { transform: translateX(calc(100% + 24px)); opacity: 0; pointer-events: none; }
.plan-wrap.panel-hidden .edge-toggle.right { right: 10px; }
.plan-wrap.panel-hidden .edge-toggle.right svg { transform: rotate(180deg); }
.panel { --panel-w: 344px; }
@media (max-width: 860px) { .edge-toggle { display: none; } }

/* ---------- Plan-Vorlagen ---------- */
.tpl2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.tpl2 h3 { font-size: 15px; margin: 4px 0 10px; }
.tpl2-list { display: flex; flex-direction: column; gap: 8px; }
.tpl2-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--surface-2); border-radius: var(--r); padding: 10px 12px; animation: fadeUp .3s var(--ease) both; }
.tpl2-item b { display: block; }
.tpl2-item small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.tpl2-new { background: var(--surface-2); border-radius: var(--r); padding: 12px 16px 16px; }
.tpl2-new label.check { margin: 6px 0; }
.tpl2-new .btn { margin-top: 6px; }
@media (max-width: 860px) { .tpl2, .plan-print { grid-template-columns: 1fr; } }

/* ---------- Einheitliche Auswahlfelder (SelectUI) ---------- */
.sui-native { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; overflow: hidden; }
.sui-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; text-align: left; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px 11px; background: var(--input); color: var(--text);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.sui-btn .sui-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sui-btn svg { color: var(--muted); flex: none; transition: transform .3s var(--spring); }
.sui-btn:hover { border-color: var(--muted); }
.sui-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.sui-btn:disabled { opacity: .5; cursor: not-allowed; }
.sui-btn.placeholder .sui-label { color: var(--muted); }
.sui-btn:has(+ *) {}
.page-head .actions .sui-btn { width: auto; min-width: 170px; border-radius: 999px; padding: 7px 14px; }
.select-pill .sui-btn { background: var(--surface-2); border-color: transparent; border-radius: 999px; padding: 7px 14px; max-width: 360px; font-weight: 500; }
.select-pill .sui-btn:hover { background: var(--surface-3); }
.row-input .sui-btn { flex: 1; min-width: 0; }
.table.compact .sui-btn, .etable .sui-btn, .inv-editor .items .sui-btn { min-height: 32px; padding: 6px 8px; }
.ab-toolbar .sui-btn { width: auto; border-radius: 999px; }
.chk-add .sui-btn { max-width: 200px; }
.dd-menu { display: flex; flex-direction: column; padding: 5px; }
.dd-search { margin: 0 0 5px; border-radius: 9px; padding: 7px 10px; }
.dd-list { overflow: auto; max-height: min(55vh, 380px); display: flex; flex-direction: column; gap: 1px; }
.dd-item.kb:not(:hover) { background: var(--accent-soft); }
.dd-item[hidden] { display: none; }

/* ==========================================================================
   v5: Logo als Home, Benutzer, Login, Startseite, Lesemodus
   ========================================================================== */
.brand { cursor: pointer; border-radius: 12px; padding: 4px 8px 4px 4px; margin-left: -4px; transition: background .2s; }
.brand:hover { background: var(--surface-2); }
.brand:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.tab-indicator { transition: transform .45s var(--spring), width .45s var(--spring), opacity .3s var(--ease); }

.user-btn { display: flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; padding: 3px 10px 3px 3px; border-radius: 999px; margin-left: 4px; color: var(--text); transition: background .2s; }
.user-btn:hover { background: var(--surface-2); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--accent-grad); flex: none; letter-spacing: .02em; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; display: inline-grid; vertical-align: middle; margin-right: 4px; }
.user-meta { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.user-meta b { font-size: 12.5px; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta small { font-size: 10.5px; color: var(--muted); }
@media (max-width: 1280px) { .user-meta { display: none; } }

/* ---------- Login ---------- */
body.locked { overflow: hidden; }
body.locked .topbar, body.locked main { filter: blur(6px); pointer-events: none; }
.login { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; overflow: hidden; background: #120a24; opacity: 0; transition: opacity .5s var(--ease); }
.login.show { opacity: 1; }
.login.leave { opacity: 0; transform: scale(1.04); transition: opacity .55s var(--ease), transform .6s var(--ease); }
.login-bg { position: absolute; inset: -5%; opacity: .55; filter: saturate(.9) blur(1.5px); animation: kenburns 40s ease-in-out infinite alternate; }
.login-bg .smap { width: 100% !important; height: 100% !important; background: transparent; }
.login-bg .sm-north, .login-bg .sm-scale, .login-bg .sm-attr { display: none; }
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1.5%); } }
.login-shade { position: absolute; inset: 0; background:
  radial-gradient(1200px 700px at 20% 10%, rgba(177, 108, 255, .45), transparent 60%),
  radial-gradient(900px 600px at 90% 90%, rgba(106, 43, 217, .55), transparent 60%),
  linear-gradient(180deg, rgba(18, 10, 36, .35), rgba(18, 10, 36, .8)); }
.login-card {
  position: relative; width: min(400px, calc(100vw - 32px)); padding: 34px 32px 24px; border-radius: 26px; color: #fff;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .45); animation: loginIn .8s var(--spring) both .1s;
}
@keyframes loginIn { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
.login-card.shake { animation: shake .45s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
.login-logo { width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 18px; background: var(--accent-grad); display: grid; place-items: center; box-shadow: 0 12px 34px rgba(138, 63, 252, .55); }
.login-logo img { width: 60px; height: 60px; }
.login-card h1 { text-align: center; margin: 0; font-size: 28px; letter-spacing: -.03em; }
.login-sub { text-align: center; margin: 4px 0 20px; color: rgba(255, 255, 255, .7); font-size: 13.5px; }
.login-card label { color: rgba(255, 255, 255, .75); }
.login-card input:not([type=checkbox]) { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: #fff; padding: 11px 13px; border-radius: 12px; }
.login-card input::placeholder { color: rgba(255, 255, 255, .45); }
.login-card input:focus { border-color: #c9a2ff; box-shadow: 0 0 0 4px rgba(177, 108, 255, .35); background: rgba(255, 255, 255, .16); }
.login-card .check { color: rgba(255, 255, 255, .85); }
.pw { position: relative; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; opacity: .6; font-size: 15px; }
.pw-eye:hover { opacity: 1; }
.login-hint { background: rgba(255, 255, 255, .12); border-radius: 12px; padding: 10px 12px; font-size: 13px; margin-bottom: 4px; }
.login-error { color: #ffb4ad; font-size: 12.5px; min-height: 18px; margin-top: 8px; }
.login-go { width: 100%; margin-top: 8px; padding: 12px; font-size: 15px; border-radius: 14px; gap: 8px; }
.login-go svg { transition: transform .3s var(--spring); }
.login-go:hover svg { transform: translateX(4px); }
.login-go.busy { opacity: .75; pointer-events: none; }
.login-go.busy span::after { content: " …"; }
.login-foot { text-align: center; margin-top: 18px; font-size: 11.5px; color: rgba(255, 255, 255, .5); }

/* ---------- Benutzerverwaltung ---------- */
.roles-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.role-card { background: var(--surface-2); border-radius: var(--r); padding: 10px 12px; border-top: 3px solid var(--muted); }
.role-card.admin { border-color: var(--accent); } .role-card.editor { border-color: #34c759; }
.role-card b { display: block; } .role-card span { font-size: 12px; color: var(--muted); }
.form-grid.four { grid-template-columns: repeat(4, 1fr); }
.users-table td { vertical-align: middle; }

/* ---------- Startseite ---------- */
.home-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.home-hero h1 { font-size: 44px; margin: 2px 0 6px; letter-spacing: -.035em; line-height: 1.05;
  background: linear-gradient(90deg, var(--text) 0%, var(--text) 55%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-hero p { margin: 0; font-size: 15px; }
.home-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.hk { background: var(--surface); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); animation: fadeUp .5s var(--ease) both; transition: transform .3s var(--ease), box-shadow .3s; }
.hk:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.hk:nth-child(2) { animation-delay: .05s; } .hk:nth-child(3) { animation-delay: .1s; } .hk:nth-child(4) { animation-delay: .15s; }
.hk span { display: block; font-size: 12.5px; color: var(--muted); }
.hk b { display: block; font-size: 30px; letter-spacing: -.03em; margin: 2px 0; font-variant-numeric: tabular-nums; }
.hk small { color: var(--muted); font-size: 12px; } .hk small em { color: var(--danger); font-style: normal; font-weight: 600; }
.hk.accent { background: var(--accent-grad); color: #fff; box-shadow: 0 10px 30px rgba(138, 63, 252, .35); }
.hk.accent span, .hk.accent small { color: rgba(255, 255, 255, .8); }
.hk-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 8px; }
.hk-bar i { display: block; height: 100%; width: var(--w); background: var(--accent-grad); border-radius: 999px; transform-origin: left; animation: grow 1s var(--ease) both .2s; }
.home-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
.home-grid .card { margin: 0; }
.home-grid h2 { margin-bottom: 12px; }
.qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.qa { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; border: 0; cursor: pointer; padding: 14px; border-radius: 16px; background: var(--surface-2); color: var(--text); transition: transform .25s var(--spring), background .2s, box-shadow .2s; }
.qa:hover { transform: translateY(-3px); background: var(--accent-soft); box-shadow: var(--shadow-sm); }
.qa:active { transform: scale(.97); }
.qa-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-grad); color: #fff; margin-bottom: 6px; box-shadow: 0 4px 12px rgba(138, 63, 252, .3); }
.qa b { font-size: 14px; } .qa small { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.home-map { border-radius: var(--r); overflow: hidden; cursor: pointer; background: var(--surface-2); transition: transform .3s var(--ease); }
.home-map:hover { transform: scale(1.01); }
.home-map .smap { width: 100% !important; max-width: 100%; }
.hm-list { display: flex; flex-direction: column; gap: 6px; }
.hm { display: flex; align-items: center; gap: 14px; border: 1.5px solid transparent; background: var(--surface-2); border-radius: 14px; padding: 10px 14px; cursor: pointer; text-align: left; color: var(--text); transition: all .2s var(--ease); }
.hm:hover { border-color: var(--line-strong); transform: translateX(2px); }
.hm.active { border-color: var(--accent); background: var(--accent-soft); }
.hm-date { width: 44px; text-align: center; flex: none; }
.hm-date b { display: block; font-size: 20px; line-height: 1; } .hm-date span { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.hm-main { flex: 1; min-width: 0; } .hm-main b { display: block; } .hm-main small { color: var(--muted); font-size: 12px; }
.hm-main .hk-bar { height: 4px; margin-top: 6px; }
.hm-num { text-align: right; } .hm-num b { display: block; font-size: 18px; } .hm-num small { font-size: 11px; color: var(--muted); }
.todo { list-style: none; margin: 0; padding: 0; }
.todo li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.todo li:last-child { border-bottom: 0; }
.todo li i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; }
.todo li span { flex: 1; } .todo li em { font-style: normal; font-size: 12px; color: var(--muted); }
.todo li.late em { color: var(--danger); font-weight: 600; }
@media (max-width: 1100px) { .home-kpis { grid-template-columns: repeat(2, 1fr); } .home-grid { grid-template-columns: 1fr; } .roles-info, .form-grid.four { grid-template-columns: 1fr 1fr; } }

/* ---------- Lesezugriff ---------- */
body.ro .toolbar [data-mode]:not([data-mode=select]):not([data-mode=measure]),
body.ro #btn-templates, body.ro .dropzone, body.ro .ab-global, body.ro .ab-newcat, body.ro .ab-cat-menu,
body.ro #btn-ex-new, body.ro #btn-inv-batch, body.ro #btn-market-new, body.ro #btn-market-edit,
body.ro [data-del], body.ro [data-cdel], body.ro [data-chkdel], body.ro .chk-add, body.ro #pn-del, body.ro #pn-dup,
body.ro .rot-handle, body.ro .vertex, body.ro #tpl-new, body.ro #tpl-edit { display: none !important; }
body.ro .panel input, body.ro .panel textarea, body.ro .panel .sui-btn, body.ro .panel .seg, body.ro .orga-main input, body.ro .letter-card input:not([readonly]) { pointer-events: none; opacity: .75; }
body.ro .topbar::after { content: "Lesezugriff"; position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; background: var(--warn-soft); color: var(--warn); padding: 2px 10px; border-radius: 999px; }
.login[hidden] { display: none; }
/* Kopfzeile kompakter (mehr Reiter + Benutzer) */
.brand-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.select-pill .sui-btn { max-width: 280px; }
.top-actions { flex: none; }
.topbar { gap: 12px; }
@media (max-width: 1560px) { .user-meta { display: none; } .save-state span { display: none; } .save-state { min-width: 0; } }
@media (max-width: 1440px) { .brand-text { display: none; } .select-pill .sui-btn { max-width: 230px; } }
.hk b.date { font-size: 20px; line-height: 1.25; }
@media (max-width: 1440px) { .brand { min-width: 0; } }

/* ==========================================================================
   v6: Rechnung nach DIN 5008 (Form B) – passt ins Fensterkuvert, mit Falzmarken
   ========================================================================== */
.invoice-doc.inv2 { position: relative; width: 210mm; height: 297mm; min-height: 0; padding: 0; overflow: hidden; font-size: 9.5pt; line-height: 1.42; }
.inv2 .fold { position: absolute; left: 0; width: 6mm; border-top: 0.3mm solid #8e8e93; }
.inv2 .fold.f1 { top: 105mm; } .inv2 .fold.f2 { top: 210mm; } .inv2 .fold.hole { top: 148.5mm; width: 9mm; }
.inv2-head { position: absolute; top: 12mm; left: 25mm; right: 20mm; height: 28mm; margin: 0; display: flex; justify-content: space-between; align-items: flex-start; }
.inv2-window { position: absolute; top: 45mm; left: 20mm; width: 85mm; height: 45mm; padding: 0 5mm; }
.inv2-window .sender-line { position: absolute; top: 12mm; left: 5mm; right: 5mm; width: auto; margin: 0; font-size: 7pt; font-style: normal; color: #6e6e73; border-bottom: 0.2mm solid #aeaeb2; padding-bottom: .6mm; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv2-recipient { position: absolute; top: 17.7mm; left: 5mm; right: 5mm; font-size: 10pt; line-height: 1.38; }
.inv2-info { position: absolute; top: 50mm; left: 125mm; width: 70mm; border-collapse: collapse; font-size: 9pt; }
.inv2-info th { text-align: left; font-weight: 500; color: #6e6e73; padding: .8mm 3mm .8mm 0; white-space: nowrap; vertical-align: top; }
.inv2-info td { padding: .8mm 0; }
.inv2-body { position: absolute; top: 98mm; left: 25mm; right: 20mm; bottom: 24mm; overflow: hidden; }
.inv2 .inv2-title { margin: 0 0 3mm; }
.inv2 .inv2-title h1 { font-size: 1.75em; margin: .5mm 0 1mm; }
.inv2 .inv2-facts { margin-bottom: 3mm; }
.inv2 .inv2-facts th { width: 34mm; }
.inv2 .inv2-items td { padding: 1.4mm 1mm; }
.inv2 .inv2-sum { margin-top: 2mm; width: 78mm; }
.inv2 .inv2-sum div { padding: .6mm 1mm; }
.inv2 .inv2-sum .grand { padding: 2mm 3mm; font-size: 1.15em; }
.inv2 .inv2-pay { margin-top: 4mm; padding: 2.5mm 4mm; }
.inv2 .inv2-notes { margin-top: 4mm; font-size: .95em; line-height: 1.45; }
.inv2 .inv2-next { margin-top: 2.5mm; }
.inv2 .inv2-contact { margin-top: 4mm; font-size: .95em; }
.inv2 footer { position: absolute; left: 25mm; right: 20mm; bottom: 8mm; padding-top: 2.5mm; font-size: 7pt; }
.inv2.void::before { top: 140mm; }

/* Brief (Schreiben) ebenfalls mit Falzmarken */
.doc.letter { position: relative; }

/* ---------- Gestattung: Rabatt, Hinweise, Siegel ---------- */
.permit-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin-top: 6px; transition: opacity .2s; }
.permit-row.off { opacity: .35; pointer-events: none; }
.permit-fee { text-align: right; padding-bottom: 6px; }
.permit-fee small { display: block; font-size: 11px; color: var(--muted); }
.permit-fee b { font-size: 15px; }
.permit-disc { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; transition: opacity .2s; }
.permit-disc input { width: 70px; padding: 5px 8px; }
.permit-disc.off { opacity: .35; pointer-events: none; }
.warn-box { background: var(--warn-soft); }
.permit-hint { margin-top: 10px; }
.permit-sign { align-items: flex-end; }
.permit-seal { width: 24mm; height: 24mm; flex: none; border: 0.4mm dashed #aeaeb2; border-radius: 50%; display: grid; place-items: center; color: #aeaeb2; font-size: 6.5pt; text-transform: uppercase; letter-spacing: .06em; box-sizing: border-box; }
.permit-sigline { width: 60mm; border-bottom: 0.3mm solid #1d1d1f; height: 12mm; margin-bottom: 1mm; }

/* ---------- Startseite: Unterlängen (g, p) nicht abschneiden ---------- */
.home-hero h1 { line-height: 1.16; padding-bottom: .1em; margin-bottom: 0; }

/* ---------- Login: Planungs-Atmosphäre ---------- */
.login-bg { opacity: 1; filter: none; inset: -6%; }
.login-bg .lb-map { position: absolute; inset: 0; filter: saturate(1.1) contrast(1.05) brightness(.82); }
.login-bg.noimg .lb-map .sm-base { display: none; }
.login-bg.noimg .lb-map .smap { background: radial-gradient(circle at 30% 30%, #2a1650, #120a24 70%); }
.login-bg .lb-deco { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-shade { background:
  radial-gradient(ellipse at center, rgba(18, 10, 36, .15) 0%, rgba(18, 10, 36, .55) 55%, rgba(18, 10, 36, .9) 100%),
  linear-gradient(135deg, rgba(138, 63, 252, .38), rgba(40, 14, 90, .35)); }
.lb-deco .grid { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.lb-deco .grid.major { stroke: rgba(255, 255, 255, .13); }
.lb-deco .meas { stroke: #64d2ff; stroke-width: 2.5; stroke-dasharray: 8 6; animation: dash 3s linear infinite; }
.lb-deco .meas-dot { fill: #fff; stroke: #64d2ff; stroke-width: 3; }
.lb-deco .tag { fill: rgba(18, 10, 36, .82); }
.lb-deco .tag-t { fill: #fff; font: 700 13px Inter, Arial, sans-serif; }
.lb-deco .stand { fill: rgba(191, 90, 242, .28); stroke: #d7a6ff; stroke-width: 2; filter: drop-shadow(0 0 8px rgba(191, 90, 242, .9)); animation: pulseStand 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lb-deco .handle { fill: #fff; stroke: #bf5af2; stroke-width: 2.5; }
.lb-deco .barrier { stroke-width: 7; }
@keyframes dash { to { stroke-dashoffset: -28; } }
@keyframes pulseStand { 50% { fill: rgba(191, 90, 242, .42); } }

.inv2-body .inv2-items td small { font-size: .88em; }
.inv2-body .inv2-items th { font-size: .82em; }
.inv2-body .inv2-pay-row b { font-size: 1.1em; }
.smap .sm-lead { stroke: #1d1d1f; stroke-width: 1; opacity: .8; }
.smap .sm-tag { fill: #fff; stroke: #1d1d1f; stroke-width: .8; }
.smap .sm-tag-t { font: 700 9px Inter, Arial, sans-serif; fill: #1d1d1f; text-anchor: middle; }
.stale-tag { border: 0; background: var(--warn-soft); color: var(--warn); font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; margin-top: 3px; cursor: pointer; animation: pulse 2s ease-in-out infinite; }
.stale-tag:hover { background: var(--warn); color: #fff; animation: none; }
.permit-badge { background: var(--accent-soft); color: var(--accent-text); }
.stale-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
input[type=radio] { width: auto; accent-color: var(--accent); flex: none; padding: 0; }
.choice input[type=radio], .choice input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; box-shadow: none; }
.server-mode .local-only { display: none !important; }