/* Vertriebstools · Designsystem
   Eine Quelle für Farben, Abstände und Bausteine. Jede Seite lädt nur noch
   diese Datei plus ihre wenigen Besonderheiten – vorher hatte jede Seite
   ihren eigenen CSS-Block mit leicht abweichenden Werten. */

/* ---------- Marken ---------- */
:root{
  /* tecis-CI (Corporate Design Manual V1.0) */
  --navy:#00325B; --sky:#009EE3; --lime:#D3D800; --sand:#CBCDB9;
  --navy-soft:#0A4372;

  /* Abgeleitete Töne */
  --ink:#1c2b38;         /* Fließtext */
  --mut:#5f6d7a;         /* Sekundärtext, WCAG-AA auf Weiß */
  --mut2:#66727C;        /* Tertiärtext, 4,9:1 auf Weiß; vorher #8a959f mit 3,05:1 (27.09.2026), wie --wz-mut2 */
  --bg:#F4F6F5;          /* Seitengrund */
  --flaeche:#F6F8F7;     /* Fläche in Karten */
  --linie:#E4E8E4;       /* Rahmen und Trenner */
  --linie-stark:#DCE0DA; /* Rahmen von Eingaben */
  --weiss:#fff;

  /* Signalfarben für Datenreihen */
  --violett:#7a5cff; --lime-dunkel:#AEB400; --gruen:#5f7a00; --orange:#E8871E; --sand-dunkel:#A9AC93;

  /* Maße */
  --radius:14px; --radius-klein:9px; --radius-gross:16px;
  --schatten:0 1px 2px rgba(0,50,91,.05),0 8px 26px rgba(0,50,91,.06);
  --schrift:'DM Sans',system-ui,-apple-system,sans-serif;
  --schrift-kopf:'Tinos',Georgia,serif;
  --breite:1440px;
}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box;}
html{scrollbar-width:thin;scrollbar-color:var(--rollbalken,#D4D7CE) transparent;}
html,body{margin:0;background:var(--bg);}
body{font-family:var(--schrift);color:var(--ink);}
button{font:inherit;cursor:pointer;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:6px;}

/* ---------- Kopfleiste (auf allen Seiten gleich) ---------- */
.vt-kopf{background:var(--weiss);border-bottom:1px solid var(--linie);}
.vt-kopf__innen{max-width:var(--breite);margin:0 auto;padding:10px clamp(14px,2.4vw,26px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;}
.vt-marke-link{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--mut);
  font-size:12.5px;font-weight:600;}
.vt-marke-link:hover{color:var(--navy);}
.vt-marke-link img{height:23px;display:block;}
.vt-marke-link .vt-teiler{color:var(--schrift-leiser,#D4D8D4);}

/* ---------- Karten ---------- */
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);}
.karte--gross{border-radius:var(--radius-gross);box-shadow:var(--schatten);}

/* ---------- Knöpfe: eine Höhe, eine Formensprache ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 17px;
  border:1px solid transparent;border-radius:var(--radius-klein);font-size:13px;font-weight:600;
  text-decoration:none;transition:background .15s,border-color .15s,color .15s;}
.knopf--haupt{background:var(--navy-flaeche,#00325B);color:#fff;}
/* Beim Zeigen --sky-flaeche: im Dunkeln 4,8:1 statt 3,0:1 (23.09.2026) */
.knopf--haupt:hover:not(:disabled){background:var(--sky-flaeche,var(--sky));}
.knopf--haupt:disabled{background:var(--gesperrt,#C6CCC9);cursor:not-allowed;}
.knopf--rand{background:var(--weiss);border-color:var(--linie-stark);color:var(--navy);}
.knopf--rand:hover{border-color:var(--sky);background:var(--schwebe,#F6F9FB);}
.knopf--leise{background:transparent;color:var(--mut);height:30px;padding:0 10px;font-size:11.5px;}
.knopf--leise:hover{color:var(--navy);background:var(--mulde,#ECEFED);}

/* Auswahl: Chips und Segmente – gleiche Höhen */
.chip{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--linie-stark);
  background:var(--weiss);color:var(--navy);font-size:12px;font-weight:600;border-radius:8px;transition:all .15s;}
.chip:hover{border-color:var(--sky);}
.chip.aktiv{background:var(--navy-flaeche,#00325B);color:#fff;border-color:var(--gewaehlt-rand,#00325B);}
.segment{display:flex;gap:6px;}
.segment button{flex:1;height:36px;border:1px solid var(--linie-stark);background:var(--weiss);color:var(--navy);
  font-size:12.5px;font-weight:600;border-radius:var(--radius-klein);transition:all .15s;}
.segment button:hover{border-color:var(--sky);}
.segment button.aktiv{background:var(--navy-flaeche,#00325B);color:#fff;border-color:var(--gewaehlt-rand,#00325B);}
.schalter{display:flex;background:var(--mulde,#ECEFED);border-radius:var(--radius-klein);padding:3px;gap:3px;}
.schalter button{flex:1;height:30px;border:none;background:transparent;font-size:12px;font-weight:600;
  color:var(--mut);border-radius:7px;transition:all .15s;}
.schalter button.aktiv{background:var(--erhaben,var(--weiss));color:var(--navy);box-shadow:var(--gewaehlt-schatten,0 1px 3px rgba(0,50,91,.14));}

/* ---------- Eingaben ---------- */
.feld{border:1px solid var(--linie-stark);border-radius:8px;background:var(--weiss);font:inherit;font-size:13px;
  color:var(--navy);padding:8px 11px;outline:none;transition:border-color .15s;}
.feld:focus{border-color:var(--sky);}
.feld::placeholder{color:var(--mut2);}
.feld--zahl{width:118px;text-align:right;font-size:15px;font-weight:700;-moz-appearance:textfield;padding:5px 9px;}
.feld--zahl::-webkit-outer-spin-button,.feld--zahl::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* Regler: schlanke Bahn, präziser Knopf */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer;--p:30%;}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--sky) var(--p),var(--bahngrund,#E1E4DE) var(--p));}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--navy);border:3px solid var(--karte,#fff);margin-top:-7px;box-shadow:0 1px 5px rgba(0,50,91,.4);transition:transform .1s;}
input[type=range]:active::-webkit-slider-thumb,input[type=range]:focus-visible::-webkit-slider-thumb{transform:scale(1.18);}
input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:var(--bahngrund,#E1E4DE);}
input[type=range]::-moz-range-progress{height:4px;border-radius:999px;background:var(--sky);}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:3px solid var(--karte,#fff);border-radius:50%;
  background:var(--navy);box-shadow:0 1px 5px rgba(0,50,91,.4);}
/* Geteilte Bahn (Robin, 19.09.2026): eine schmale Luecke an einer Grenze,
   davor und dahinter eigene Farben. Hell ist, was noch nicht zaehlt:
   ungefoerdert oder geplant. So bei der Foerdergrenze von 150 Euro im
   AV-Depot-Rechner und bei geplanten gegen schon lebende Kinder. Das Werkzeug
   setzt die Klasse mitgrenze und --g, den Anteil der Grenze auf der Bahn
   von 0 bis 1; ein negatives --g blendet die Luecke aus. Die Luecke sitzt
   dort, wo die Mitte des Knopfs auf der Grenze steht, denn die Bahn ist um
   den halben Knopf (--kr) eingerueckt. hellvorn tauscht die Farben. */
input[type=range].mitgrenze{--kr:9px;--vorn:var(--sky);--hinten:#9ED6F2;
  --gv:calc(var(--kr) + (100% - 2 * var(--kr)) * var(--g,0) - 1px);
  --gn:calc(var(--kr) + (100% - 2 * var(--kr)) * var(--g,0) + 1px);
  --bahn:linear-gradient(90deg,var(--vorn) 0 min(var(--p),var(--gv)),var(--bahngrund,#E1E4DE) min(var(--p),var(--gv)) var(--gv),
    transparent var(--gv) var(--gn),var(--hinten) var(--gn) max(var(--p),var(--gn)),var(--bahngrund,#E1E4DE) max(var(--p),var(--gn)));}
input[type=range].mitgrenze.hellvorn{--vorn:#9ED6F2;--hinten:var(--sky);}
input[type=range].mitgrenze::-webkit-slider-runnable-track{background:var(--bahn);}
input[type=range].mitgrenze::-moz-range-track{background:var(--bahn);}
input[type=range].mitgrenze::-moz-range-progress{background:transparent;}

/* ---------- Typografie ---------- */
.titel-gross{font-family:var(--schrift-kopf);color:var(--navy);margin:0;line-height:1.05;}
/* Vorzeile in --blau-schrift: Himmelblau trug bei 11,5 Pixeln nur 2,7 bis
   3,0:1, #0075AB traegt 4,6 bis 5,1:1, im Dunkeln Himmelblau 5,6:1
   (Robin, 27.09.2026). */
.vorzeile{font-size:11.5px;font-weight:700;color:var(--blau-schrift,#0075AB);letter-spacing:1.2px;text-transform:uppercase;}
.klein{font-size:12.5px;color:var(--mut);}