:root{
  /* Markenpalette */
  --navy:#003049; --navy-dark:#00253A; --navy-700:#1E6091;
  --red:#C1121F; --red-900:#780000;
  --cream:#FDF0D5; --steel:#669BBC;
  --green:#52B69A; --green-soft:#99D98C; --teal:#34A0A4; --blue:#1A759F;

  /* Flaechen (warmer Cremeton) */
  --bg:#FBF4E6; --surface:#ffffff; --surface-2:#F5EEDF; --surface-3:#ECE3CF;
  --border:#E7DEC8; --border-strong:#D7CBAD;

  /* Text */
  --text:#16242E; --muted:#5E6B72; --faint:#98A1A6;

  /* Aktion / Links */
  --primary:#003049; --primary-dark:#00253A; --primary-ink:#ffffff; --link:#1A759F;

  /* Semantik */
  --info-bg:#E4EDF4; --info-text:#1E6091;
  --success-bg:#E6F3DF; --success-text:#2F6B4F; --success-strong:#52B69A;
  --warning-bg:#FBEFCB; --warning-text:#8A6310;
  --danger-bg:#F8E0DD; --danger-text:#9E0B14;
  --neu-bg:#ECE3CF; --neu-text:#6E6450;

  --radius:10px; --radius-lg:14px; --radius-pill:99px;
  --shadow:0 1px 2px rgba(16,36,48,.05);
  --shadow-card:0 2px 12px rgba(16,36,48,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:24px; font-weight:600; margin:0; color:var(--text)}
h3{font-size:16px; font-weight:600; margin:0 0 14px; color:var(--text)}
code{background:var(--surface-2); padding:1px 6px; border-radius:6px; font-size:.9em}
.muted{color:var(--muted)} .small{font-size:13px}

/* Top-Navigation – dunkles Navy */
.topnav{background:var(--navy)}
.topnav-inner{max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:24px; padding:0 24px; height:62px}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; color:var(--cream)}
.brand:hover{text-decoration:none}
.brand-badge{width:30px; height:30px; border-radius:8px; background:var(--steel); color:var(--navy-dark); display:flex; align-items:center; justify-content:center}
.mainnav{display:flex; gap:4px; flex:1}
.mainnav a{color:#AFC6D6; padding:8px 13px; border-radius:8px; font-size:14px}
.mainnav a:hover{background:rgba(255,255,255,.08); color:#fff; text-decoration:none}
.mainnav a.active{background:rgba(255,255,255,.14); color:#fff}
.topnav-right{display:flex; align-items:center; gap:12px}
.user-chip{font-size:13px; color:#AFC6D6}
.topnav .btn{border-color:rgba(255,255,255,.28); color:var(--cream); background:transparent}
.topnav .btn:hover{background:rgba(255,255,255,.10)}

.container{max-width:1280px; margin:0 auto; padding:28px 24px 64px}
.page-head{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px}

/* Karten */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px 24px; box-shadow:var(--shadow-card)}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px}

/* Kennzahlen-Karten */
.metric-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:22px}
.metric{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 18px; box-shadow:var(--shadow-card)}
.metric-label{font-size:13px; color:var(--muted)}
.metric-num{font-size:28px; font-weight:600; line-height:1.2; margin-top:2px}
.metric-sub{font-size:12px; color:var(--faint); margin-top:2px}
.metric-accent{background:var(--success-bg); border-color:transparent}
.metric-accent .metric-label,.metric-accent .metric-num,.metric-accent .metric-sub{color:var(--success-text)}

.big-stat{font-size:32px; font-weight:600; margin:6px 0 12px}
.big-stat span{font-size:14px; font-weight:400; color:var(--muted)}
.quick-links{display:flex; flex-direction:column; gap:2px}
.quick-links a{padding:9px 11px; border-radius:8px; color:var(--text)}
.quick-links a:hover{background:var(--surface-2); text-decoration:none}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:7px; justify-content:center; cursor:pointer;
  font-size:14px; font-weight:500; padding:10px 18px; border-radius:10px;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text); transition:.12s}
.btn:hover{background:var(--surface-2); text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary); border-color:var(--primary); color:var(--primary-ink)}
.btn-primary:hover{background:var(--primary-dark)}
.btn-success{background:var(--success-strong); border-color:var(--success-strong); color:#fff}
.btn-ghost{background:transparent; border-color:var(--border-strong)}
.btn-sm{padding:7px 12px; font-size:13px}
.btn-block{width:100%}

/* Formulare */
label{display:block; font-size:13px; color:var(--muted); margin:12px 0 5px}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=datetime-local],input[type=date],select,textarea{
  width:100%; font:inherit; font-size:14px; color:var(--text); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:9px; padding:10px 12px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--steel); box-shadow:0 0 0 3px rgba(102,155,188,.22)}
textarea{resize:vertical}
input[type=file]{font-size:14px}

/* Hinweise */
.flash{padding:12px 15px; border-radius:10px; font-size:14px; margin-bottom:14px}
.flash-info{background:var(--info-bg); color:var(--info-text)}
.flash-success{background:var(--success-bg); color:var(--success-text)}
.flash-warning{background:var(--warning-bg); color:var(--warning-text)}
.flash-danger{background:var(--danger-bg); color:var(--danger-text)}

/* Status-Pillen */
.pill{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:500; padding:3px 10px; border-radius:var(--radius-pill)}
.pill-neu{background:var(--neu-bg); color:var(--neu-text)}
.pill-info{background:var(--info-bg); color:var(--info-text)}
.pill-success{background:var(--success-bg); color:var(--success-text)}
.pill-warning{background:var(--warning-bg); color:var(--warning-text)}
.pill-danger{background:var(--danger-bg); color:var(--danger-text)}

/* Tabellen */
table.data{width:100%; border-collapse:collapse; font-size:14px}
table.data th{text-align:left; color:var(--muted); font-weight:500; font-size:12px; padding:9px 10px; border-bottom:1px solid var(--border)}
table.data td{padding:11px 10px; border-bottom:1px solid var(--border)}
table.data tr:hover td{background:var(--surface-2)}

.empty-state{text-align:center; color:var(--muted); padding:44px 20px}

/* Telefonblock */
.block-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px}
.block-timer{font-size:13px; color:var(--muted)}
.progress{height:9px; background:var(--surface-3); border-radius:99px; overflow:hidden; margin:8px 0 18px}
.progress > i{display:block; height:100%; background:var(--navy-700)}
.funnel{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px}
.phone-big{display:flex; align-items:center; gap:10px; background:var(--surface-2); border-radius:12px; padding:14px 18px; margin:12px 0}
.phone-big a{font-size:24px; font-weight:600; color:var(--navy)}
.phone-big a:hover{text-decoration:none}
.chips{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:12px 0}
.chip{font-size:13px; padding:5px 13px; border-radius:99px; border:1px solid var(--border-strong); background:var(--surface); cursor:pointer; color:var(--muted); user-select:none}
.chip.on{background:var(--info-bg); color:var(--info-text); border-color:transparent}
.outcomes{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0}
.btn-outcome-termin{background:var(--success-bg); color:var(--success-text); border-color:var(--success-strong)}

/* Erinnerungen / Toasts */
#tak-toasts{position:fixed; right:18px; bottom:18px; z-index:9999; display:flex; flex-direction:column; gap:10px; max-width:310px}
.tak-toast{background:var(--surface); border:1px solid var(--border-strong); border-left:4px solid var(--red); border-radius:10px; padding:12px 15px; box-shadow:0 8px 26px rgba(16,36,48,.16); font-size:14px; transition:opacity .4s}
.tak-toast a{font-weight:500}

/* Agenda / Kalender */
.agenda-group{margin-bottom:24px}
.agenda-item{display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--border)}
.agenda-item:last-child{border-bottom:none}
.agenda-time{font-size:13px; color:var(--muted); min-width:118px}
.agenda-overdue h3{color:var(--danger-text)}
.agenda-overdue .card{border-color:var(--danger-bg); box-shadow:inset 3px 0 0 var(--red)}
.agenda-overdue .agenda-time{color:var(--danger-text); font-weight:500}
.funnel-mini{display:flex; gap:16px; flex-wrap:wrap}
.funnel-mini span{font-size:13px; color:var(--muted)}
.funnel-mini strong{color:var(--text)}

/* Anmeldung / Installer */
.auth-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px}
.auth-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px; width:100%; max-width:400px; box-shadow:0 8px 30px rgba(16,36,48,.10)}
.auth-card-wide{max-width:460px}
.auth-brand{font-size:21px; font-weight:600; color:var(--navy)}
.auth-sub{color:var(--muted); font-size:14px; margin:4px 0 18px}

/* Import-Zuordnung & Filter */
.map-grid{display:grid; grid-template-columns:180px 1fr; gap:10px 16px; align-items:center; margin:16px 0 20px}
.map-grid label{margin:0}
.filters{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px}
.filters .f{display:flex; flex-direction:column; gap:4px}
.filters .f label{margin:0; font-size:12px; color:var(--muted)}

@media(max-width:640px){
  .topnav-inner{gap:10px; padding:0 14px}
  .mainnav a{padding:8px 9px}
  .container{padding:18px 14px 50px}
  .funnel{grid-template-columns:repeat(2,1fr)}
}