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

:root {
    --bg:       #f5f4f0;
    --surface:  #ffffff;
    --border:   #e0deda;
    --text:     #1a1a18;
    --muted:    #6b6a65;
    --accent:   #2563eb;
    --accent-h: #1d4ed8;
    --danger:   #dc2626;
    --warning:  #d97706;
    --success:  #16a34a;
    --radius:   10px;
}

body { font-family: system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.5; background: var(--bg); color: var(--text); min-height: 100dvh; }

/* Login */
.page-login { display:flex;align-items:center;justify-content:center;padding:24px 16px; }
.login-wrap { width:100%;max-width:360px; }
.login-logo { display:flex;align-items:center;gap:10px;margin-bottom:32px;justify-content:center; }
.logo-mark  { width:32px;height:32px;background:var(--accent);border-radius:8px;display:block; }
.logo-text  { font-size:22px;font-weight:600;letter-spacing:-.5px; }
.login-form { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:16px; }

/* Fields */
.field { display:flex;flex-direction:column;gap:6px; }
label  { font-size:14px;font-weight:500;color:var(--muted); }
input[type="email"], input[type="password"], input[type="text"], input[type="date"], textarea, select {
    width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:16px;
    color:var(--text);background:var(--surface);transition:border-color .15s;-webkit-appearance:none;
}
input:focus, textarea:focus, select:focus { outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12); }
textarea { resize:vertical;min-height:80px; }

/* Buttons */
.btn { display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:background .15s;text-decoration:none; }
.btn-primary   { background:var(--accent);color:#fff; }
.btn-primary:hover { background:var(--accent-h); }
.btn-secondary { background:var(--surface);color:var(--text);border-color:var(--border); }
.btn-secondary:hover { background:var(--bg); }
.btn-full { width:100%; }
.btn:disabled { opacity:.45;cursor:not-allowed; }

/* Status buttons */
.status-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0; }
.btn-status { padding:20px 12px;border-radius:var(--radius);font-size:16px;font-weight:600;border:2px solid transparent;cursor:pointer;transition:transform .1s;text-align:center; }
.btn-status:active { transform:scale(.97); }
.btn-status-interesse { background:#dcfce7;color:#15803d;border-color:#16a34a; }
.btn-status-kein      { background:#fee2e2;color:#b91c1c;border-color:#dc2626; }
.btn-status-nichtda   { background:#fef3c7;color:#b45309;border-color:#d97706; }
.btn-status-offen     { background:#f1f5f9;color:#475569;border-color:#94a3b8; }

/* Alerts */
.alert { padding:10px 14px;border-radius:8px;font-size:14px;margin-bottom:12px; }
.alert-error   { background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5; }
.alert-info    { background:#dbeafe;color:#1e40af;border:1px solid #93c5fd; }
.alert-warning { background:#fef3c7;color:#92400e;border:1px solid #fcd34d; }
.alert-success { background:#dcfce7;color:#166534;border:1px solid #86efac; }

/* Navbar */
.navbar { background:var(--surface);border-bottom:1px solid var(--border);padding:0 16px;height:52px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100; }
.navbar-brand { font-weight:600;font-size:16px;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:8px; }
.navbar-brand .logo-mark { width:22px;height:22px;border-radius:5px; }
.navbar-actions { display:flex;align-items:center;gap:8px; }

/* Page */
.page-content { padding:20px 16px;max-width:600px;margin:0 auto; }

/* Map */
.map-wrap { height:calc(100dvh - 52px);width:100%; }
#map { width:100%;height:100%; }

/* Mode cards */
.mode-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px; }
.mode-card { background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);padding:24px 16px;text-align:center;cursor:pointer;text-decoration:none;color:var(--text);transition:border-color .15s;display:block; }
.mode-card:hover { border-color:var(--accent); }
.mode-card-icon { font-size:32px;margin-bottom:10px;display:block; }
.mode-card h2 { font-size:16px;font-weight:600; }
.mode-card p  { font-size:13px;color:var(--muted);margin-top:4px; }

/* Quickmode */
.quickmode-wrap { padding:24px 16px;max-width:480px;margin:0 auto; }
.btn-gps { width:96px;height:96px;border-radius:50%;background:var(--accent);color:#fff;border:none;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 4px 16px rgba(37,99,235,.3);transition:transform .1s; }
.btn-gps:active { transform:scale(.95); }
.gps-status { text-align:center;font-size:13px;color:var(--muted);min-height:20px;margin-top:8px; }

/* Badges */
.badge { display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px; }
.badge-gps     { background:#dcfce7;color:#15803d; }
.badge-address { background:#fef3c7;color:#92400e; }
.badge-manual  { background:#dbeafe;color:#1e40af; }

@media (max-width:400px) {
    .mode-grid   { grid-template-columns:1fr; }
    .status-grid { grid-template-columns:1fr; }
}

/* ── Navbar v2 ───────────────────────────────────────────────── */
.navbar { gap:8px; }
.navbar-brand-text { font-weight:600;font-size:15px; }

.nav-icon-btn {
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:8px;
    color:var(--muted);text-decoration:none;
    transition:background .15s,color .15s;flex-shrink:0;
}
.nav-icon-btn:hover { background:var(--bg);color:var(--text); }
.nav-icon-btn.active { background:var(--bg);color:var(--accent); }
.nav-logout:hover { color:var(--danger); }

/* Mode toggle */
.mode-toggle {
    display:flex;align-items:center;gap:5px;
    padding:5px 10px;border-radius:8px;border:none;
    font-size:12px;font-weight:600;cursor:pointer;
    transition:background .15s,color .15s;flex-shrink:0;
}
.mode-quick { background:#fef3c7;color:#b45309; }
.mode-quick:hover { background:#fde68a; }
.mode-edit  { background:#dbeafe;color:#1e40af; }
.mode-edit:hover  { background:#bfdbfe; }

/* Mode switch animation */
@keyframes modeFlash {
    0%   { opacity:1; }
    40%  { opacity:0; }
    100% { opacity:1; }
}
.map-mode-flash { animation: modeFlash .35s ease; }

/* Zone switcher */
.zone-switcher { position:relative;min-width:0;flex-shrink:1; }
.zone-switcher-btn {
    display:flex;align-items:center;gap:4px;
    padding:5px 8px;border-radius:8px;border:none;
    background:none;cursor:pointer;
    font-size:12px;color:var(--muted);
    transition:background .15s;max-width:140px;
}
.zone-switcher-btn:hover { background:var(--bg); }
.zone-label { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90px; }
.zone-dropdown {
    display:none;position:absolute;top:calc(100% + 4px);right:0;
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);min-width:180px;
    box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:300;overflow:hidden;
}
.zone-dropdown.open { display:block; }
.zone-dropdown-item {
    display:block;width:100%;padding:10px 14px;text-align:left;
    border:none;background:none;cursor:pointer;font-size:14px;
    border-bottom:1px solid var(--border);transition:background .1s;
}
.zone-dropdown-item:last-child { border-bottom:none; }
.zone-dropdown-item:hover { background:var(--bg); }
.zone-dropdown-item.active { font-weight:600;color:var(--accent); }

/* Settings page */
.settings-section { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;overflow:hidden; }
.settings-section-header { padding:14px 16px;font-weight:600;font-size:15px;border-bottom:1px solid var(--border);background:var(--bg); }
.settings-section-body { padding:16px; }
.status-row { display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border); }
.status-row:last-child { border-bottom:none; }
.status-color-dot { width:20px;height:20px;border-radius:50%;flex-shrink:0;border:2px solid rgba(0,0,0,.1); }
.status-row-name { flex:1;font-size:14px; }
.color-input { width:36px;height:28px;padding:0;border:1px solid var(--border);border-radius:6px;cursor:pointer;background:none; }