/* ============================================================
   Manoberg – Design-Tokens für alle Seiten des Routenplaners
   (Karte, Auswertung, Planung, Anmeldung).

   Übernommen aus der Manoberg-Verwaltung
   (manoberg-commerce/apps/storefront/src/app/[verwaltung]/verwaltung.css),
   nicht nachempfunden – dieselben Werte, damit Routenplaner und Verwaltung
   nebeneinander wie ein Haus aussehen. Die Begründung je Farbe steht dort.

   Farben/Abstände/Radien stehen NUR hier, damit die Seiten nicht
   auseinanderdriften. Seitenspezifisches CSS bleibt in der Seite.
   ============================================================ */

/* Alle drei Schriften liegen im Repo unter marke/, keine über ein CDN:
   die Inhaltsrichtlinie (CSP) bleibt damit ohne Ausnahme für Fremdhosts,
   und das Tool läuft auch im Firmennetz ohne Internetzugang. Herkunft und
   Lizenzen (alle SIL OFL 1.1) in marke/LIZENZ.txt. */
@font-face{font-family:"Archivo";src:url("marke/archivo-wght-normal.woff2") format("woff2");
           font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("marke/instrument-sans-wght-normal.woff2") format("woff2");
           font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("marke/jetbrains-mono-wght-normal.woff2") format("woff2");
           font-weight:400 700;font-style:normal;font-display:swap}

:root{
  /* Marke. Rot ist die EINZIGE Akzentfarbe (Knöpfe, Fokus, aktive Navigation).
     Blau ist Struktur und trägt nie eine Interaktion – wer darauf klickt, hat
     sich verlaufen. */
  --tinte:#080A14; --tinte-700:#171B2E; --tinte-500:#5C6480; --tinte-050:#E4E6EE;
  --akzent:#C42020; --akzent-600:#A21A1A; --akzent-050:#FCEBEB;
  --struktur:#3B62D4; --struktur-text:#2749B0;

  /* Flächen & Text */
  --bg:#EDEEF2; --surface:#ffffff; --surface-2:#F6F7FA; --surface-3:#E9EBF1;
  --line:#D4D8E3; --line-strong:#B9BFD0;
  --text:#080A14; --text-2:#3A4058; --muted:#5C6480;

  /* Schriften: Archivo für Überschriften (schwer, eng), Instrument Sans für
     alles Gelesene, JetBrains Mono nur für Etiketten und Zahlenschlüssel. */
  --schrift:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --schrift-anzeige:"Archivo","Helvetica Neue",Arial,sans-serif;
  --schrift-daten:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,monospace;

  /* Status – jeweils Farbe + heller Hintergrund für Badges */
  --st-offen:#2749B0;      --st-offen-bg:#E7ECFA;
  --st-plan:#8A5A00;       --st-plan-bg:#FBF0DA;
  --st-fertig:#1F6B43;     --st-fertig-bg:#E4F3EA;
  --st-sperr:#AA1818;      --st-sperr-bg:#FDF2F2;
  --danger:#AA1818;        --danger-bg:#FDF2F2;

  /* Abstände: 4er-Raster */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  /* Radien wie in der Verwaltung: 10 Eingaben, 18 Karten, 26 grosse Flächen,
     Pille für Knöpfe – die Pille ist das auffälligste Erkennungszeichen. */
  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:26px; --r-pill:999px;

  --shadow-sm:0 1px 2px 0 rgb(8 10 20 / .05);
  --shadow-md:0 4px 6px -1px rgb(8 10 20 / .08), 0 2px 4px -2px rgb(8 10 20 / .05);
  --shadow-lg:0 10px 15px -3px rgb(8 10 20 / .1), 0 4px 6px -4px rgb(8 10 20 / .05);
  --schein-akzent:0 12px 30px -14px rgb(196 32 32 / .85);

  --t:160ms cubic-bezier(.2,.9,.25,1);
  --z-map:400; --z-panel:600; --z-results:1200; --z-bar:1400; --z-modal:2000; --z-light:3000;
}

/* Zahlen in Tabellen und Summen springen beim Ändern nicht */
.num,.kpi,.kpi-val,.obj-facts{font-variant-numeric:tabular-nums}

/* Überschriften: Archivo 800, eng geführt – eine Zeile soll wie eine Setzung
   aussehen und nicht wie ein grösserer Absatz. */
h1,h2,h3,h4{font-family:var(--schrift-anzeige);font-weight:800;letter-spacing:-.025em}

/* Etikett: Grossbuchstaben, weit gesperrt, klein – das Kennzeichen der Marke. */
.etikett{font-family:var(--schrift-daten);font-size:10.5px;font-weight:500;
         letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Die Farbleiste ersetzt ein Logo dort, wo keines hinpasst. Reihenfolge und
   Anteile sind aus der Verwaltung übernommen. */
.farbleiste{height:3px;border-radius:var(--r-pill);
  background:linear-gradient(to right,#C42020 0 30%,#E8352F 30% 48%,#3B62D4 48% 78%,#000057 78% 100%)}

:root{
  /* Jahresreihen im Diagramm: geordnete Reihe, das laufende Jahr trägt die
     Markenfarbe, ältere Jahre sind bewusst gedämpft (Form "Betonung", nicht
     bunte Kategorien). Die Ordnung ist dieselbe wie vorher, nur in den
     Manoberg-Farben: Grau → Struktur-Blau → Marken-Rot. */
  --serie-alt2:#8A90A6;   /* vorletztes Jahr – gedämpftes Blaugrau */
  --serie-alt1:#3B62D4;   /* Vorjahr – Struktur-Blau */
  --serie-jetzt:#C42020;  /* laufendes Jahr – Marken-Rot, betont */

  /* Statusfarben der Kartenmarker – EINE Quelle für Karte, Legende und Kacheln,
     damit "offen/geplant/erledigt" überall gleich aussieht. */
  --mk-offen:#3B62D4; --mk-plan:#C08217; --mk-fertig:#1F6B43; --mk-route:#C42020;

  --grid:#DFE2EC;
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:1ms !important;animation-duration:1ms !important}
}


/* ---------------- Grundelemente (Formulare, Knöpfe, Tabellen, Marken) ----------------
   Stehen hier, damit Karte und Auswertung nicht auseinanderdriften. */

label{display:block;font-size:12.5px;font-weight:600;margin:var(--sp-3) 0 5px;color:var(--text-2)}
label:first-child{margin-top:0}
select,input[type=text],input[type=number],input[type=date],input[type=password],textarea{
  width:100%;min-height:38px;padding:8px 11px;font-size:14px;font-family:inherit;
  color:var(--text);background:#fff;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);transition:border-color var(--t),box-shadow var(--t);
}
textarea{min-height:64px;resize:vertical;line-height:1.5}
select:hover,input:hover,textarea:hover{border-color:var(--tinte-500)}
select:focus,input:focus,textarea:focus{
  outline:none;border-color:var(--akzent);box-shadow:0 0 0 3px rgb(196 32 32 / .22);
}
.row{display:flex;gap:var(--sp-2)}
.row>*{flex:1;min-width:0}
.hint{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.45}
.hint a{color:var(--akzent-600);font-weight:600}

.btn{
  width:100%;min-height:44px;margin-top:var(--sp-4);padding:0 var(--sp-4);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--akzent);color:#fff;border:1px solid var(--akzent);border-radius:var(--r-pill);
  font-size:14.5px;font-weight:700;font-family:inherit;cursor:pointer;
  transition:background var(--t),transform var(--t),opacity var(--t);
}
/* Knopf NEBEN Eingabefeldern statt darunter.
   .btn ist als Vollbreiten-Knopf ausgelegt (width:100%, margin-top). In einer
   flex-Zeile verlangt er damit die ganze Breite, schrumpft nicht und legt sich
   ueber die Felder - genau das war im Standort-Formular zu sehen. */
.btn.inline{
  width:auto;flex:0 0 auto;margin-top:0;min-height:38px;
  padding:0 var(--sp-3);font-size:13px;white-space:nowrap
}
.btn:hover:not(:disabled){background:var(--akzent-600)}
.btn:active:not(:disabled){transform:scale(.995)}
.btn:focus-visible{outline:3px solid rgb(196 32 32 / .45);outline-offset:2px}
.btn:disabled{opacity:.5;cursor:default}
.btn.sec{background:#fff;color:var(--tinte);border:1px solid var(--line-strong);
         border-radius:var(--r-pill);margin-top:var(--sp-2);font-size:13px;min-height:38px}
.btn.sec:hover:not(:disabled){background:var(--surface-2);border-color:var(--tinte-500)}
.btn.ghost{background:none;color:var(--akzent-600);border:1px solid transparent;min-height:34px;font-size:13px;
           margin-top:var(--sp-2)}
.btn.ghost:hover:not(:disabled){background:var(--akzent-050)}
/* .danger muss auch Schriftfarbe und Rahmen setzen: sonst bleibt bei "btn sec danger"
   die dunkle Schrift von .btn.sec auf rotem Grund stehen. */
.btn.danger{background:#fff;color:var(--danger);border-color:var(--danger)}
.btn.danger:hover:not(:disabled){background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger svg{color:currentColor}
.btn svg{flex:none}
.utable{width:100%;border-collapse:collapse;font-size:13px}
.utable th{text-align:left;font-family:var(--schrift-daten);font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;
           color:var(--muted);font-weight:800;padding:0 8px 7px;border-bottom:1px solid var(--line)}
.utable td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
.utable tbody tr{transition:background var(--t)}
.utable tbody tr:hover{background:var(--surface-2)}
.utable .ua{display:flex;gap:4px;justify-content:flex-end}
.utable .ua button{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;border-radius:var(--r-xs);cursor:pointer;
  color:var(--muted);transition:background var(--t),color var(--t),border-color var(--t);
}
.utable .ua button:hover{background:var(--akzent);color:#fff;border-color:var(--akzent)}
.utable .ua button.del:hover{background:var(--danger);border-color:var(--danger)}
.inaktiv{opacity:.5}
.tag{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:var(--r-xs);
     background:var(--surface-3);color:var(--muted);letter-spacing:.2px}
.tag.z{background:var(--st-plan-bg);color:#8a5510}
.tag.o{background:var(--danger-bg);color:var(--danger)}
.tag.g{background:var(--danger-bg);color:var(--danger)}
.tag.ok{background:var(--st-fertig-bg);color:var(--st-fertig)}
.status-pill{
  display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;
  padding:2px 9px;border-radius:var(--r-pill);letter-spacing:.3px;
}
.status-pill.offen{background:var(--st-offen-bg);color:#1d5cb8}
.status-pill.angemeldet{background:var(--st-plan-bg);color:#8a5510}
.status-pill.erledigt{background:var(--st-fertig-bg);color:var(--st-fertig)}
/* "entfaellt": gilt als abgeschlossen, war aber keine Wartung - neutral statt gruen. */
.status-pill.entfallen{background:var(--surface-3);color:var(--text-2)}

.adm-sec{padding-bottom:var(--sp-4);margin-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.adm-sec:last-child{padding-bottom:0;margin-bottom:0;border-bottom:none}
.adm-sec h3{margin:0 0 10px;font-family:var(--schrift-daten);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
            color:var(--muted);font-weight:800;display:flex;align-items:center;gap:7px}
.adm-sec h3 svg{color:var(--tinte-500)}
.xl-state{background:var(--surface-3);border-radius:var(--r-md);padding:11px 13px;
          font-size:13px;line-height:1.55;margin-bottom:10px}
.xl-state b{color:var(--tinte)}
.xl-state.bad{background:var(--st-plan-bg);color:#7a4a08}
.xl-state.bad b{color:#7a4a08}
.xl-state.good{background:var(--st-fertig-bg)}
input[type=file]{width:100%;min-height:38px;padding:7px 9px;border:1px solid var(--line-strong);
                 border-radius:var(--r-sm);font-size:13px;background:#fff;font-family:inherit}
code{background:var(--surface-3);padding:1px 5px;border-radius:5px;font-size:12px;
     font-family:var(--schrift-daten)}
.empty{color:var(--muted);font-size:13px;text-align:center;margin-top:48px;line-height:1.6}
.empty svg{color:var(--line-strong);margin-bottom:var(--sp-3)}
.num,.summary,.stop .meta,.obj-facts,.kpi{font-variant-numeric:tabular-nums}