/* 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:#8a959f;        /* Tertiärtext */
  --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:#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:#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);color:#fff;}
.knopf--haupt:hover:not(:disabled){background:var(--sky);}
.knopf--haupt:disabled{background:#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:#F6F9FB;}
.knopf--leise{background:transparent;color:var(--mut);height:30px;padding:0 10px;font-size:11.5px;}
.knopf--leise:hover{color:var(--navy);background:#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);color:#fff;border-color:var(--navy);}
.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);color:#fff;border-color:var(--navy);}
.schalter{display:flex;background:#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(--weiss);color:var(--navy);box-shadow: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),#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 #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:#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 #fff;border-radius:50%;
  background:var(--navy);box-shadow:0 1px 5px rgba(0,50,91,.4);}

/* ---------- Typografie ---------- */
.titel-gross{font-family:var(--schrift-kopf);color:var(--navy);margin:0;line-height:1.05;}
.vorzeile{font-size:11.5px;font-weight:700;color:var(--sky);letter-spacing:1.2px;text-transform:uppercase;}
.klein{font-size:12.5px;color:var(--mut);}