/* ═══════════════════════════════════════════════════════════
   MapPlaner – Light & Elegant
   ══════════════════════════════════════════════════════════ */

:root {
  --bg-base:     #f0f4f8;
  --bg-surface:  #ffffff;
  --bg-card:     #ffffff;
  --bg-hover:    #f1f5f9;
  --bg-active:   #e6faf5;

  --border:      #e2e8f0;
  --border-mid:  #cbd5e1;

  --text-1: #0f172a;
  --text-2: #475569;
  --text-3: #94a3b8;

  --accent:      #04bc8c;
  --accent-lite: #028160;
  --accent-soft: rgba(4,188,140,.07);
  --accent-glow: rgba(4,188,140,.22);

  --green:       #16a34a;
  --green-soft:  rgba(22,163,74,.08);
  --green-border:rgba(22,163,74,.22);

  --red:         #dc2626;
  --red-soft:    rgba(220,38,38,.07);

  --r-xs: 5px; --r-sm: 8px; --r: 12px; --r-lg: 18px;

  --sh-xs: 0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --sh-sm: 0 2px 8px rgba(15,23,42,.08),0 1px 3px rgba(15,23,42,.05);
  --sh:    0 4px 16px rgba(15,23,42,.10),0 2px 6px rgba(15,23,42,.06);
  --sh-lg: 0 8px 32px rgba(15,23,42,.14),0 4px 12px rgba(15,23,42,.08);

  --header-h:  58px;
  --footer-h:  44px;
  --sidebar-w: 314px;

  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}

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

html,body { height:100%; overflow:hidden; font-family:var(--font);
  color:var(--text-1); background:var(--bg-base); -webkit-font-smoothing:antialiased; }

/* Globale hidden-Klasse – gilt für alle Elemente */
.hidden { display:none !important; }

/* ══════════════════════════ LANDING ════════════════════════ */
#landing-screen {
  position:fixed; inset:0; z-index:9998;
  background: linear-gradient(135deg, #e6faf5 0%, #f8fafc 55%, #f0fdf4 100%);
  display:flex; align-items:center; justify-content:center;
}
#landing-screen.hidden { display:none !important; }

#landing-center {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:0;
  background:#fff; border:1.5px solid var(--border);
  border-radius:var(--r-lg); padding:48px 52px 44px;
  box-shadow: 0 20px 60px rgba(15,23,42,.10), 0 4px 16px rgba(15,23,42,.06);
  max-width:480px; width:100%;
}

#landing-title {
  font-size:28px; font-weight:900; color:var(--text-1);
  letter-spacing:-.8px; margin:16px 0 10px;
}

#landing-sub {
  font-size:14px; color:var(--text-2); line-height:1.7;
  margin-bottom:24px;
}

#landing-features-row {
  display:flex; flex-wrap:wrap; gap:7px; justify-content:center;
  margin-bottom:28px;
}
.lf-chip {
  background:var(--bg-hover); border:1.5px solid var(--border);
  border-radius:20px; padding:4px 12px;
  font-size:12px; font-weight:600; color:var(--text-2);
}

.btn-landing-cta {
  padding:12px 32px; font-size:15px; gap:8px;
  border-radius:var(--r); width:100%; justify-content:center;
}

/* ══════════════════════════ LOGIN ══════════════════════════ */
#login-screen {
  position:fixed; inset:0; z-index:9999;
  background: linear-gradient(135deg,#e6faf5 0%,#f8fafc 55%,#f0fdf4 100%);
  display:flex; align-items:center; justify-content:center;
}
#login-screen.hidden { display:none; }

#login-card {
  background:var(--bg-surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  padding:40px 36px 36px;
  width:360px;
  box-shadow: 0 20px 60px rgba(15,23,42,.12), 0 4px 16px rgba(15,23,42,.07);
  display:flex; flex-direction:column; gap:0;
}

#login-logo {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin-bottom:32px;
}
.login-app-name { font-size:22px; font-weight:800; letter-spacing:-.5px; color:var(--text-1); }
.login-app-sub  { font-size:13px; color:var(--text-3); }

.login-field { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.login-field label { font-size:12px; font-weight:600; color:var(--text-2); }
.login-field input {
  background:var(--bg-hover); border:1.5px solid var(--border);
  border-radius:var(--r-sm); color:var(--text-1);
  font-size:14px; font-family:var(--font);
  padding:10px 12px; outline:none; transition:all .15s;
}
.login-field input:focus {
  border-color:var(--accent); background:var(--bg-surface);
  box-shadow:0 0 0 3px var(--accent-soft);
}

#login-error {
  background:var(--red-soft); border:1.5px solid rgba(220,38,38,.2);
  border-radius:var(--r-sm); padding:9px 12px;
  color:var(--red); font-size:13px; font-weight:500;
  margin-bottom:14px;
}
#login-error.hidden { display:none; }

.btn-login {
  width:100%; justify-content:center;
  padding:11px; font-size:14px; margin-top:4px;
}

/* ══════════════════════════ APP ════════════════════════════ */
#app {
  height:100%; display:flex; flex-direction:column;
}

/* ── Header ──────────────────────────────────────────────── */
#header {
  height:var(--header-h); background:var(--bg-surface);
  border-bottom:1px solid var(--border); box-shadow:var(--sh-xs);
  display:flex; align-items:center; gap:10px;
  padding:0 16px; flex-shrink:0; z-index:10;
}

#logo {
  display:flex; align-items:center; gap:7px;
  font-size:15px; font-weight:800; letter-spacing:-.4px; flex-shrink:0;
}

#route-name {
  max-width:200px; background:var(--bg-hover);
  border:1.5px solid transparent; border-radius:var(--r-sm);
  color:var(--text-1); font-size:13.5px; font-weight:600;
  padding:6px 10px; outline:none; transition:all .15s;
}
#route-name:hover { border-color:var(--border-mid); }
#route-name:focus { border-color:var(--accent); background:var(--bg-surface); box-shadow:0 0 0 3px var(--accent-soft); }

#tech-bar {
  display:flex; align-items:center; gap:6px;
  color:var(--text-3); flex-shrink:0;
}
#tech-select {
  background:var(--bg-hover); border:1.5px solid var(--border);
  border-radius:var(--r-sm); color:var(--text-1);
  font-size:13px; font-weight:600; font-family:var(--font);
  padding:6px 10px; outline:none; cursor:pointer; transition:all .15s;
  max-width:170px;
}
#tech-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

#header-actions { display:flex; align-items:center; gap:7px; margin-left:auto; }

#user-badge {
  display:flex; align-items:center; gap:6px;
  background:var(--bg-hover); border:1.5px solid var(--border);
  border-radius:var(--r-sm); padding:5px 10px 5px 10px;
}
#user-name-label { font-size:12px; font-weight:700; color:var(--text-2); }
#btn-logout {
  background:transparent; border:none; cursor:pointer;
  color:var(--text-3); display:flex; align-items:center;
  padding:0; transition:color .15s;
}
#btn-logout:hover { color:var(--red); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:var(--r-sm);
  font-size:13px; font-weight:600; border:none;
  cursor:pointer; transition:all .15s; white-space:nowrap;
  font-family:var(--font); letter-spacing:-.1px;
}
.btn:disabled { opacity:.38; cursor:not-allowed; }

.btn-primary {
  background:var(--accent); color:#fff;
  box-shadow:0 1px 4px var(--accent-glow);
}
.btn-primary:hover:not(:disabled) { background:#028160; transform:translateY(-1px); box-shadow:0 3px 10px var(--accent-glow); }

.btn-secondary {
  background:var(--bg-surface); color:var(--text-2);
  border:1.5px solid var(--border);
}
.btn-secondary:hover:not(:disabled) { border-color:var(--border-mid); color:var(--text-1); background:var(--bg-hover); }

.btn-ghost {
  background:transparent; color:var(--text-2);
}
.btn-ghost:hover:not(:disabled) { background:var(--bg-hover); color:var(--text-1); }

.btn-outline-accent {
  width:100%; justify-content:center; background:transparent;
  color:var(--accent); border:1.5px dashed #99e8d4;
  border-radius:var(--r-sm); font-size:13px;
}
.btn-outline-accent:hover { background:var(--accent-soft); border-color:var(--accent-lite); }

/* ── Sidebar ─────────────────────────────────────────────── */
#sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--bg-surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
}

#sidebar-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px 10px; border-bottom:1px solid var(--border); flex-shrink:0;
}
#stop-count-label { font-size:12px; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:.4px; }
#total-km-label   { font-size:12px; font-weight:700; color:var(--accent); }

#stops-list {
  flex:1; overflow-y:auto;
  padding:10px 10px 6px;
  display:flex; flex-direction:column;
}
#stops-list::-webkit-scrollbar       { width:3px; }
#stops-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; padding:48px 20px; text-align:center; color:var(--text-3);
}
.empty-state p     { font-size:13px; font-weight:600; color:var(--text-2); }
.empty-state small { font-size:12px; line-height:1.55; }

/* Home-Karte (Start/End Techniker) */
.home-card {
  background:var(--green-soft);
  border:1.5px solid var(--green-border);
  border-left:3px solid var(--green);
  border-radius:var(--r-sm);
  padding:9px 11px 9px 12px;
  display:flex; align-items:center; gap:10px;
  box-shadow:var(--sh-xs);
  animation:fadeSlide .18s ease;
}
.home-icon {
  width:22px; height:22px; border-radius:50%;
  background:var(--green); color:#fff; font-size:13px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.home-info   { flex:1; min-width:0; }
.home-label  { font-size:10px; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:.5px; }
.home-name   { font-size:13px; font-weight:700; color:var(--text-1); }
.home-plz    { font-size:11px; color:var(--text-3); margin-top:1px; }

/* Stop-Karte */
.stop-card {
  background:var(--bg-card); border:1.5px solid var(--border);
  border-left:3px solid var(--accent); border-radius:var(--r-sm);
  padding:9px 9px 9px 8px;
  display:flex; align-items:flex-start; gap:9px;
  cursor:pointer; transition:all .15s;
  box-shadow:var(--sh-xs); animation:fadeSlide .18s ease;
}
.stop-card:hover {
  border-color:var(--border-mid); border-left-color:var(--accent);
  background:var(--bg-active); box-shadow:var(--sh-sm); transform:translateX(2px);
}
.stop-card.dragging  { opacity:.35; }
.stop-card.drag-over { border-color:var(--accent); background:var(--bg-active);
  box-shadow:0 0 0 2px var(--accent-soft); transform:translateX(2px); }

.drag-handle {
  font-size:16px; color:var(--text-3); cursor:grab;
  padding:2px 2px 0; flex-shrink:0; user-select:none;
  line-height:1; margin-top:1px;
  transition:color .12s;
}
.drag-handle:hover  { color:var(--accent); }
.drag-handle:active { cursor:grabbing; }

@keyframes fadeSlide {
  from { opacity:0; transform:translateY(-5px); }
  to   { opacity:1; transform:none; }
}

.stop-number {
  width:22px; height:22px; border-radius:50%; background:var(--accent);
  color:#fff; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px; box-shadow:0 1px 4px var(--accent-glow);
}
.stop-info  { flex:1; min-width:0; }
.stop-name  { font-size:13px; font-weight:700; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stop-plz   { font-size:11px; color:var(--text-3); margin-top:2px; }
.stop-notes { font-size:11px; color:var(--text-2); font-style:italic; margin-top:2px; }

.stop-actions { display:flex; flex-direction:column; gap:2px; flex-shrink:0; }
.stop-btn {
  width:22px; height:22px; border:none; border-radius:var(--r-xs);
  background:transparent; color:var(--text-3); font-size:12px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .12s; line-height:1; font-family:var(--font);
}
.stop-btn:hover:not(:disabled) { background:var(--bg-hover); color:var(--text-1); }
.stop-btn:disabled { opacity:.2; cursor:not-allowed; }
.stop-btn-del:hover:not(:disabled) { background:#fee2e2; color:var(--red); }

/* Connector (km zwischen Stops) */
.stop-connector {
  display:flex; align-items:center; gap:8px;
  padding:0 10px 0 22px; min-height:28px; flex-shrink:0;
}
.conn-vline {
  width:1.5px; flex-shrink:0; align-self:stretch;
  background:var(--border-mid); border-radius:1px;
  margin:0 3px;
}
.conn-badge {
  display:flex; align-items:center; gap:4px;
  background:var(--bg-hover); border:1.5px solid var(--border);
  border-radius:20px; padding:3px 9px 3px 7px;
  font-size:11px; font-weight:700; color:var(--text-2);
  white-space:nowrap; transition:all .15s; cursor:default;
}
.conn-badge svg { color:var(--text-3); flex-shrink:0; }
.conn-badge.road { color:var(--accent); border-color:#99e8d4; background:var(--accent-soft); }
.conn-badge.road svg { color:var(--accent); }
.conn-loading { font-size:11px; color:var(--text-3); padding-left:4px; font-style:italic; }

#sidebar-bottom { padding:6px 10px 10px; flex-shrink:0; display:flex; flex-direction:column; gap:6px; }

.btn-optimize {
  width:100%; justify-content:center;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color:#fff;
  border-radius:var(--r-sm);
  font-size:13px;
  box-shadow: 0 1px 4px rgba(124,58,237,.3);
  transition: all .15s;
}
.btn-optimize:hover:not(:disabled) {
  transform:translateY(-1px);
  box-shadow: 0 4px 12px rgba(124,58,237,.4);
}
.btn-optimize:disabled {
  background: var(--bg-hover);
  color: var(--text-3);
  box-shadow: none;
}

/* Optimierungs-Animation auf den Karten */
.stop-card.optimizing {
  animation: optimPulse .6s ease infinite alternate;
}
@keyframes optimPulse {
  from { border-left-color: #7c3aed; background: var(--bg-active); }
  to   { border-left-color: #4f46e5; background: #f5f3ff; }
}

/* ── History Controls (Undo / Redo) ─────────────────────── */
#history-controls {
  display:flex; align-items:center; gap:3px; flex-shrink:0;
}
.btn-history {
  width:30px; height:30px;
  background:transparent; border:1.5px solid var(--border);
  border-radius:var(--r-sm); color:var(--text-3);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.btn-history:hover:not(:disabled) {
  background:var(--bg-hover); color:var(--text-1); border-color:var(--border-mid);
}
.btn-history:disabled { opacity:.3; cursor:not-allowed; }

/* ── Map ──────────────────────────────────────────────────── */
#main        { display:flex; flex:1; overflow:hidden; }
#map-wrapper { flex:1; position:relative; overflow:hidden; }
#map         { width:100%; height:100%; }

#drop-overlay {
  position:absolute; inset:0;
  background:rgba(248,250,252,.9); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  z-index:500; opacity:0; pointer-events:none; transition:opacity .2s;
}
#drop-overlay.active { opacity:1; pointer-events:auto; }
#drop-box {
  border:2px dashed var(--accent); border-radius:var(--r-lg);
  padding:44px 60px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:var(--accent); font-size:15px; font-weight:600; text-align:center;
  background:rgba(255,255,255,.8); animation:dpulse 1.8s ease infinite;
}
@keyframes dpulse {
  0%,100% { border-color:var(--accent); color:var(--accent); }
  50%      { border-color:#7c3aed; color:#7c3aed; }
}

/* ── Optimize Preview Banner ─────────────────────────────── */
#optimize-banner {
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  z-index:400; background:var(--bg-surface);
  border:1.5px solid var(--border); border-radius:var(--r);
  box-shadow:var(--sh-lg); padding:12px 16px;
  display:flex; align-items:center; gap:16px;
  min-width:340px; animation:mIn .2s ease;
}
#optimize-banner.hidden { display:none; }

#opt-info { display:flex; flex-direction:column; gap:5px; flex:1; min-width:0; }
#opt-legend { display:flex; align-items:center; gap:14px; }

.opt-legend-old {
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; color:var(--text-3);
}
.opt-legend-old::before {
  content:''; display:inline-block; width:22px; height:2px;
  background: repeating-linear-gradient(90deg,#94a3b8 0 8px,transparent 8px 14px);
  border-radius:1px;
}
.opt-legend-new {
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; color:var(--accent);
}
.opt-legend-new::before {
  content:''; display:inline-block; width:22px; height:2.5px;
  background:var(--accent); border-radius:1px;
}

#opt-stats {
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--text-2);
}
.opt-saved {
  background:var(--green-soft); border:1.5px solid var(--green-border);
  color:var(--green); border-radius:20px;
  padding:2px 10px; font-size:12px; font-weight:700; margin-left:2px;
}
.opt-saved.neutral {
  background:var(--bg-hover); border-color:var(--border); color:var(--text-3);
}

#opt-actions { display:flex; gap:8px; flex-shrink:0; }

#map-controls { position:absolute; bottom:28px; right:12px; z-index:400; }
#btn-fit {
  width:34px; height:34px; background:var(--bg-surface);
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  color:var(--text-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-sm); transition:all .15s;
}
#btn-fit:hover { color:var(--accent); border-color:var(--accent-lite); }

/* Marker */
.marker-pin {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff;
  border:2.5px solid #fff;
  box-shadow:0 2px 8px rgba(4,188,140,.4),0 0 0 1px rgba(4,188,140,.12);
}
.marker-home {
  width:28px; height:28px; border-radius:50%;
  background:var(--green);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; border:2.5px solid #fff;
  box-shadow:0 2px 8px rgba(22,163,74,.4);
}

/* Leaflet */
.leaflet-popup-content-wrapper {
  background:var(--bg-surface) !important; color:var(--text-1) !important;
  border:1.5px solid var(--border) !important; border-radius:var(--r) !important;
  box-shadow:var(--sh-lg) !important;
}
.leaflet-popup-tip     { background:var(--bg-surface) !important; }
.leaflet-popup-content { font-family:var(--font) !important; font-size:13px !important; line-height:1.5 !important; margin:10px 14px !important; }
.popup-name  { font-weight:700; font-size:14px; color:var(--text-1); }
.popup-sub   { font-size:12px; color:var(--text-3); margin-top:3px; }
.popup-notes { font-size:12px; color:var(--text-2); font-style:italic; margin-top:3px; }

.leaflet-control-zoom a { background:var(--bg-surface) !important; color:var(--text-2) !important; border-color:var(--border) !important; }
.leaflet-control-zoom a:hover { background:var(--bg-hover) !important; color:var(--accent) !important; }
.leaflet-control-attribution { background:rgba(255,255,255,.85) !important; color:var(--text-3) !important; font-size:10px !important; }

/* ── Footer ──────────────────────────────────────────────── */
#footer {
  height:var(--footer-h); background:var(--bg-surface);
  border-top:1px solid var(--border);
  display:flex; align-items:center; padding:0 20px; flex-shrink:0;
}
.footer-stat    { display:flex; align-items:center; gap:7px; padding:0 14px; }
.footer-label   { font-size:11px; color:var(--text-3); text-transform:uppercase; letter-spacing:.5px; font-weight:600; }
.footer-val     { font-size:14px; font-weight:700; color:var(--text-1); }
.footer-divider { width:1px; height:18px; background:var(--border); }

/* ── Modals ──────────────────────────────────────────────── */
#modal-overlay {
  position:fixed; inset:0;
  background:rgba(15,23,42,.3); backdrop-filter:blur(8px);
  z-index:1000; display:flex; align-items:center; justify-content:center;
}
#modal-overlay.hidden { display:none; }

.modal {
  background:var(--bg-surface); border:1.5px solid var(--border);
  border-radius:var(--r-lg); width:440px;
  max-width:calc(100vw - 32px); max-height:calc(100vh - 64px);
  display:flex; flex-direction:column;
  box-shadow:var(--sh-lg); animation:mIn .2s ease;
}
.modal.modal-wide { width:640px; }
.modal.hidden     { display:none; }

@keyframes mIn {
  from { opacity:0; transform:scale(.96) translateY(-8px); }
  to   { opacity:1; transform:none; }
}

.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:17px 20px 13px; border-bottom:1px solid var(--border);
}
.modal-header h3 { font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px; }
.modal-close {
  width:28px; height:28px; background:transparent; border:none;
  border-radius:6px; color:var(--text-3); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .12s;
}
.modal-close:hover { background:var(--bg-hover); color:var(--text-1); }

.modal-body   { padding:18px 20px; overflow-y:auto; flex:1; }
.modal-footer { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:13px 20px; border-top:1px solid var(--border); }

/* Forms */
.form-group { display:flex; flex-direction:column; gap:5px; margin-bottom:13px; }
.form-group label { font-size:12px; font-weight:600; color:var(--text-2); display:flex; align-items:center; gap:5px; }
.required      { color:var(--red); }
.optional-hint { font-size:11px; font-weight:400; color:var(--text-3); }

.form-group input,
.form-group textarea {
  background:var(--bg-hover); border:1.5px solid var(--border);
  border-radius:var(--r-sm); color:var(--text-1);
  font-size:13px; font-family:var(--font);
  padding:8px 11px; outline:none; transition:all .15s;
}
.form-group input:focus,
.form-group textarea:focus { border-color:var(--accent); background:var(--bg-surface); box-shadow:0 0 0 3px var(--accent-soft); }
.form-group textarea { min-height:58px; resize:vertical; }

.plz-input-row { display:flex; gap:8px; }
.plz-input-row input { flex:1; font-size:17px; font-weight:700; letter-spacing:2px; padding:9px 12px; background:var(--bg-surface); border-color:var(--border-mid); }

#plz-results { margin-bottom:14px; display:flex; flex-direction:column; gap:6px; }
#plz-results.hidden { display:none; }

.plz-searching { display:flex; align-items:center; gap:8px; padding:10px 12px; color:var(--text-3); font-size:13px; }
.plz-no-result { padding:10px 13px; background:var(--red-soft); border:1.5px solid rgba(220,38,38,.2); border-radius:var(--r-sm); color:var(--red); font-size:13px; }
.plz-section-label { font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.5px; }

.plz-option {
  display:flex; align-items:center; gap:11px;
  padding:10px 13px; background:var(--bg-hover);
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  cursor:pointer; transition:all .15s; user-select:none;
}
.plz-option:hover { background:var(--bg-active); border-color:var(--accent-lite); }
.plz-option.selected { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent-soft); }
.plz-flag    { font-size:21px; line-height:1; flex-shrink:0; }
.plz-info    { flex:1; min-width:0; }
.plz-city    { font-size:14px; font-weight:700; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plz-country { font-size:11px; color:var(--text-3); margin-top:1px; }
.plz-check   { width:19px; height:19px; border-radius:50%; background:var(--accent); display:none; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:800; flex-shrink:0; }
.plz-option.selected .plz-check { display:flex; }

.plz-auto-info {
  display:flex; align-items:center; gap:8px;
  padding:9px 13px; background:var(--green-soft);
  border:1.5px solid var(--green-border); border-radius:var(--r-sm);
  color:var(--green); font-size:13px; font-weight:600;
}

/* Prompt */
.prompt-instructions {
  background:var(--accent-soft); border:1.5px solid rgba(4,188,140,.15);
  border-radius:var(--r-sm); padding:11px 14px;
  font-size:12.5px; color:var(--text-2); line-height:1.65; margin-bottom:12px;
}
.prompt-instructions strong { color:var(--accent); }
.prompt-instructions em     { color:var(--text-1); font-style:normal; font-weight:600; }
.prompt-instructions code   { background:var(--bg-hover); padding:1px 5px; border-radius:4px; font-family:monospace; font-size:11px; }
.prompt-box { background:var(--bg-hover); border:1.5px solid var(--border); border-radius:var(--r-sm); max-height:340px; overflow-y:auto; }
#prompt-text { padding:13px; font-size:11.5px; font-family:'Consolas','Fira Code',monospace; color:var(--text-2); white-space:pre-wrap; word-break:break-word; line-height:1.6; }

/* Gespeicherte Touren Liste */
.saved-route-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; background:var(--bg-hover);
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  margin-bottom:8px; transition:all .15s;
}
.saved-route-item:hover { border-color:var(--border-mid); }
.sri-info    { flex:1; min-width:0; }
.sri-name    { font-size:14px; font-weight:700; color:var(--text-1); }
.sri-meta    { font-size:11px; color:var(--text-3); margin-top:2px; }
.sri-actions { display:flex; gap:6px; flex-shrink:0; }
.routes-empty { padding:32px; text-align:center; color:var(--text-3); font-size:13px; }

/* Notification */
#notification {
  position:fixed; bottom:56px; left:50%;
  transform:translateX(-50%) translateY(12px);
  background:var(--bg-surface); border:1.5px solid var(--border);
  border-radius:var(--r); padding:9px 18px;
  font-size:13px; font-weight:600; color:var(--text-1);
  box-shadow:var(--sh-lg); z-index:2000; opacity:0;
  transition:all .22s ease; pointer-events:none;
}
#notification.show { opacity:1; transform:translateX(-50%) translateY(0); }
#notification.hidden { display:none; }
#notification.success { border-left:3px solid var(--green); }
#notification.error   { border-left:3px solid var(--red); }
#notification.info    { border-left:3px solid var(--accent); }

/* ══════════════════════════ ADMIN PANEL ════════════════════ */
#admin-overlay {
  position:fixed; inset:0; z-index:1100;
  background:rgba(15,23,42,.35); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
}
#admin-overlay.hidden { display:none; }

#modal-admin {
  background:var(--bg-surface); border:1.5px solid var(--border);
  border-radius:var(--r-lg); width:680px;
  max-width:calc(100vw - 32px); max-height:calc(100vh - 64px);
  display:flex; flex-direction:column;
  box-shadow:var(--sh-lg); animation:mIn .2s ease; overflow:hidden;
}

/* ── Admin Tabs ──────────────────────────────────────────── */
.admin-tabs-bar {
  display:flex; gap:0;
  border-bottom:1px solid var(--border);
  background:var(--bg-hover); flex-shrink:0;
  padding:0 6px;
}
.admin-tab {
  display:flex; align-items:center; gap:6px;
  background:transparent; border:none;
  border-bottom:2.5px solid transparent;
  padding:11px 16px; margin-bottom:-1px;
  font-size:13px; font-weight:600; color:var(--text-3);
  cursor:pointer; transition:all .15s; font-family:var(--font);
  white-space:nowrap;
}
.admin-tab:hover   { color:var(--text-1); }
.admin-tab.active  { color:var(--accent); border-bottom-color:var(--accent); }

/* ── Body / Panes ────────────────────────────────────────── */
.admin-modal-body { flex:1; overflow-y:auto; }
.admin-modal-body::-webkit-scrollbar       { width:3px; }
.admin-modal-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.admin-tab-pane        { display:flex; flex-direction:column; }
.admin-tab-pane.hidden { display:none; }

.admin-section {
  padding:18px 22px;
  border-bottom:1px solid var(--border);
}
.admin-section:last-child { border-bottom:none; }
.admin-section-list { flex:1; }

.admin-section-title {
  font-size:11px; font-weight:700; color:var(--text-3);
  text-transform:uppercase; letter-spacing:.5px;
  margin-bottom:12px;
}

/* ── Add Form ────────────────────────────────────────────── */
.admin-add-form {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.ainp {
  background:var(--bg-hover); border:1.5px solid var(--border);
  border-radius:var(--r-sm); color:var(--text-1);
  font-size:13px; font-family:var(--font);
  padding:8px 11px; outline:none; transition:all .15s;
  min-width:0;
}
.ainp:focus { border-color:var(--accent); background:var(--bg-surface); box-shadow:0 0 0 3px var(--accent-soft); }
.ainp-grow { flex:1; }
.ainp-plz  { width:130px; flex-shrink:0; letter-spacing:1px; font-weight:700; }

.admin-cb-label {
  display:flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; color:var(--text-2);
  cursor:pointer; white-space:nowrap; flex-shrink:0;
  padding:0 4px;
}
.admin-cb-label input[type=checkbox] { cursor:pointer; width:14px; height:14px; accent-color:var(--accent); }

/* ── List Items ──────────────────────────────────────────── */
.admin-list { display:flex; flex-direction:column; gap:7px; }
.admin-list-empty {
  text-align:center; padding:24px 16px;
  color:var(--text-3); font-size:13px; font-style:italic;
}

.admin-item {
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; background:var(--bg-hover);
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  transition:border-color .15s;
}
.admin-item:hover { border-color:var(--border-mid); }

.admin-item-avatar {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.admin-item-avatar.tech { background:var(--green-soft);  border:1.5px solid var(--green-border); }
.admin-item-avatar.user { background:var(--accent-soft); border:1.5px solid rgba(4,188,140,.18); }

.admin-item-info { flex:1; min-width:0; }
.admin-item-name { font-size:13.5px; font-weight:700; color:var(--text-1); }
.admin-item-sub  { font-size:11.5px; color:var(--text-3); margin-top:2px; }

.badge-role {
  border-radius:20px; padding:3px 10px;
  font-size:10.5px; font-weight:700; letter-spacing:.2px;
  white-space:nowrap; flex-shrink:0;
}
.badge-role.admin { background:linear-gradient(135deg,#7c3aed,#4f46e5); color:#fff; }
.badge-role.user  { background:var(--bg-surface); color:var(--text-3); border:1.5px solid var(--border); }

.admin-btn-del {
  width:30px; height:30px; flex-shrink:0;
  background:transparent; border:1.5px solid var(--border);
  border-radius:var(--r-sm); color:var(--text-3);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .12s;
}
.admin-btn-del:hover:not(:disabled) { background:#fee2e2; color:var(--red); border-color:#fca5a5; }
.admin-btn-del:disabled { opacity:.22; cursor:not-allowed; }

/* Loading dots */
.loading-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:currentColor; animation:dotB .75s ease infinite; }
.loading-dot:nth-child(2) { animation-delay:.15s; }
.loading-dot:nth-child(3) { animation-delay:.3s; }
@keyframes dotB { 0%,100%{transform:translateY(0);opacity:.3} 50%{transform:translateY(-4px);opacity:1} }