/* Design-Tokens 1:1 aus dem PAV-Dashboard, das sie vom tecis AV-Depot-Rechner
   (vertriebs.tools) übernommen hat. Beide Seiten sollen sich gleich anfühlen. */
:root {
  --navy: #00325B;
  --navy-soft: #0A4372;
  --sky: #009EE3;
  --lime: #D3D800;
  --lime-dunkel: #AEB400;
  --sand: #CBCDB9;
  --ink: #1c2b38;
  --bg: #F4F6F5;
  --flaeche: #F6F8F7;
  --linie: #E4E8E4;
  --linie-stark: #DCE0DA;
  --mut: #5f6d7a;
  --mut2: #8a959f;
  --gruen: #5f7a00;
  --orange: #E8871E;
  --weiss: #fff;

  --radius: 14px;
  --radius-klein: 9px;
  --radius-gross: 16px;
  --schatten: 0 1px 2px rgba(0, 50, 91, 0.05), 0 8px 26px rgba(0, 50, 91, 0.06);

  --schrift: "DM Sans", system-ui, -apple-system, sans-serif;
  --schrift-kopf: "Tinos", Georgia, serif;
  --breite: 1280px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--schrift);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--schrift-kopf); color: var(--navy); margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
:is(button, input, select, textarea, a):focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
[hidden] { display: none !important; }
.zahl { font-variant-numeric: tabular-nums; }

.label-klein {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mut);
}
.karte {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius-gross); box-shadow: var(--schatten);
}

/* ---------- Knöpfe ---------- */
.knopf {
  border: none; border-radius: var(--radius-klein); padding: 7px 11px;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.knopf:disabled { opacity: 0.5; cursor: default; }
.knopf-voll { background: var(--navy); color: #fff; }
.knopf-voll:hover:not(:disabled) { background: var(--navy-soft); }
.knopf-rand { background: none; border: 1px solid rgba(0, 50, 91, 0.25); color: var(--navy); }
.knopf-rand:hover:not(:disabled) { background: rgba(0, 50, 91, 0.05); }
.knopf-still { background: none; color: var(--mut); }
.knopf-still:hover:not(:disabled) { background: var(--flaeche); color: var(--navy); }
.knopf-breit { width: 100%; padding: 11px; font-size: 14px; }

.feld {
  height: 38px; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
  background: var(--weiss); padding: 0 12px; font-size: 13.5px;
}
.feld::placeholder { color: var(--mut2); }

.meldung { margin-top: 10px; font-size: 12.5px; font-weight: 500; }
.meldung-gut { color: var(--gruen); }
.meldung-schlecht { color: var(--orange); }

/* ---------- Anmeldung ---------- */
.anmelde-huelle { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.anmelde-karte { width: 100%; max-width: 400px; padding: 28px; }
.anmelde-karte h1 { font-size: 22px; font-weight: 700; }
.anmelde-karte p.hinweis { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--mut); }
.anmelde-karte .feld { width: 100%; margin-top: 6px; }
.anmelde-karte label { display: block; margin-top: 18px; }
.fuss-notiz { margin-top: 16px; text-align: center; font-size: 11.5px; line-height: 1.6; color: var(--mut2); }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.kopf-inhalt {
  max-width: var(--breite); margin: 0 auto; min-height: 56px; padding: 8px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.marke { font-family: var(--schrift-kopf); font-size: 17px; font-weight: 700; color: var(--navy); }
.marke span { color: var(--sky); }
.marke-zusatz { font-size: 12px; color: var(--mut2); margin-left: 6px; }
.kopf-rechts { display: flex; align-items: center; gap: 10px; }
.kopf-mail { font-size: 13px; color: var(--mut); }

.suche-huelle { flex: 1; min-width: 200px; max-width: 420px; position: relative; }
.suche-huelle .feld { width: 100%; padding-left: 34px; }
.suche-zeichen { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--mut2); font-size: 13px; pointer-events: none; }

/* ---------- Gerüst ---------- */
.geruest {
  max-width: var(--breite); margin: 0 auto; padding: 20px 16px 80px;
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start;
}

nav.kapitelnav { position: sticky; top: 76px; }
nav.kapitelnav ol { list-style: none; margin: 0; padding: 0; }
nav.kapitelnav li { margin-bottom: 2px; }
nav.kapitelnav button {
  width: 100%; text-align: left; border: 1px solid transparent; background: none;
  border-radius: var(--radius-klein); padding: 9px 12px; cursor: pointer;
}
nav.kapitelnav button:hover { background: var(--weiss); }
nav.kapitelnav button[aria-current="true"] {
  background: var(--weiss); border-color: var(--linie); box-shadow: var(--schatten);
}
.nav-titel { display: block; font-size: 13.5px; font-weight: 700; color: var(--mut); }
nav.kapitelnav button[aria-current="true"] .nav-titel { color: var(--navy); }
.nav-kurz { display: block; margin-top: 1px; font-size: 11px; color: var(--mut2); line-height: 1.4; }

/* ---------- Kapitel ---------- */
.augenbraue { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky); }
h1.titel { font-size: 26px; font-weight: 700; line-height: 1.2; margin-top: 4px; }
.unterzeile { margin: 8px 0 0; max-width: 68ch; font-size: 13.5px; line-height: 1.7; color: var(--mut); }

.abschnitt { margin-top: 18px; padding: 22px; }
.abschnitt > h2 { font-size: 17px; font-weight: 700; }
.abschnitt > h2 + * { margin-top: 12px; }

.block { margin-top: 14px; }
.block:first-of-type { margin-top: 10px; }
.block-titel { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); margin-bottom: 8px; }

p.fliess { margin: 0 0 10px; font-size: 13.5px; line-height: 1.75; color: var(--ink); max-width: 72ch; white-space: pre-line; }
p.fliess:last-child { margin-bottom: 0; }

.merksatz {
  border-left: 3px solid var(--lime); background: var(--flaeche);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  padding: 12px 16px; font-size: 13.5px; line-height: 1.7; color: var(--navy); font-weight: 500;
}

ul.punkte { margin: 0; padding-left: 0; list-style: none; }
ul.punkte li {
  position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: var(--ink);
}
ul.punkte li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sky);
}

ol.schritte { margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
ol.schritte li {
  counter-increment: schritt; position: relative; padding-left: 38px; padding-bottom: 16px;
}
ol.schritte li:last-child { padding-bottom: 0; }
ol.schritte li::before {
  content: counter(schritt); position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff;
  font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
ol.schritte li::after {
  content: ""; position: absolute; left: 11.5px; top: 28px; bottom: 4px; width: 1px; background: var(--linie);
}
ol.schritte li:last-child::after { display: none; }
.schritt-titel { font-size: 13.5px; font-weight: 700; color: var(--navy); }
.schritt-text { margin-top: 3px; font-size: 13.5px; line-height: 1.7; color: var(--mut); white-space: pre-line; }

.kartengitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.mini-karte {
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche); padding: 14px 16px;
}
.mini-karte h3 { font-size: 14px; font-weight: 700; line-height: 1.3; }
.mini-karte .unter { margin-top: 2px; font-size: 11.5px; color: var(--sky); font-weight: 700; }
.mini-karte p { margin: 8px 0 0; font-size: 13px; line-height: 1.65; color: var(--mut); }
.mini-karte ul.punkte { margin-top: 8px; }
.mini-karte ul.punkte li { font-size: 13px; }

.vorlage { border: 1px solid var(--linie); border-radius: var(--radius-klein); overflow: hidden; }
.vorlage-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: var(--flaeche); border-bottom: 1px solid var(--linie);
}
.vorlage-kopf h3 { font-size: 13.5px; font-weight: 700; }
.vorlage-kopf .unter { font-size: 11.5px; color: var(--mut2); }
.vorlage pre {
  margin: 0; padding: 14px; font-family: var(--schrift); font-size: 13.5px;
  line-height: 1.75; color: var(--ink); white-space: pre-wrap; word-break: break-word; background: var(--weiss);
}

.tabelle-huelle { overflow-x: auto; }
table.inhalt { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.inhalt th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mut); padding: 0 14px 8px 0; white-space: nowrap;
}
table.inhalt td { padding: 11px 14px 11px 0; border-top: 1px solid var(--linie); line-height: 1.6; vertical-align: top; }
table.inhalt td:first-child { font-weight: 700; color: var(--navy); }

.offen {
  border: 1px dashed var(--orange); border-radius: var(--radius-klein);
  background: rgba(232, 135, 30, 0.06); padding: 12px 16px;
  display: flex; gap: 10px; align-items: flex-start;
}
.offen-marke {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--orange); border: 1px solid rgba(232, 135, 30, 0.4); border-radius: 999px; padding: 2px 8px; margin-top: 1px;
}
.offen p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--mut); }

/* ---------- Matrix ---------- */
.stufenwahl { display: flex; flex-wrap: wrap; gap: 6px; }
.stufenwahl button {
  border: 1px solid var(--linie-stark); background: var(--weiss); border-radius: var(--radius-klein);
  padding: 9px 13px; cursor: pointer; text-align: left; flex: 1 1 130px;
}
.stufenwahl button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); }
.stufen-kuerzel { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--mut2); }
.stufenwahl button[aria-pressed="true"] .stufen-kuerzel { color: var(--lime); }
.stufen-name { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy); }
.stufenwahl button[aria-pressed="true"] .stufen-name { color: #fff; }

.stufen-unter { margin: 10px 0 0; font-size: 13px; line-height: 1.7; color: var(--mut); }

.fortschritt { margin-top: 14px; background: var(--navy); border-radius: var(--radius-klein); padding: 12px 16px; }
.fortschritt-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fortschritt-text { font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.72); }
.fortschritt-wert { font-size: 17px; font-weight: 700; color: var(--lime); }
.fortschritt-balken { margin-top: 9px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.fortschritt-balken i { display: block; height: 100%; background: var(--lime); border-radius: 3px; transition: width 0.25s; }

.matrix-gruppe { margin-top: 18px; }
.matrix-gruppe > h3 { font-size: 14.5px; font-weight: 700; }
.matrix-zweck { margin: 2px 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--mut); }

ul.matrix-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: var(--radius-klein); overflow: hidden; }
ul.matrix-liste li { display: flex; align-items: flex-start; gap: 11px; padding: 11px 14px; border-top: 1px solid var(--linie); background: var(--weiss); }
ul.matrix-liste li:first-child { border-top: none; }
ul.matrix-liste li.neu { background: rgba(0, 158, 227, 0.05); }
ul.matrix-liste input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--navy); flex: none; cursor: pointer; }
.matrix-was { font-size: 13.5px; font-weight: 500; color: var(--ink); }
ul.matrix-liste li.erledigt .matrix-was { color: var(--mut2); text-decoration: line-through; }
.matrix-hinweis { display: block; margin-top: 2px; font-size: 12px; line-height: 1.6; color: var(--mut2); }
.matrix-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.pille { border-radius: 999px; padding: 3px 9px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.pille-neu { background: rgba(0, 158, 227, 0.12); color: var(--sky); }
.pille-stufe { background: var(--flaeche); color: var(--mut); }
.verweis { background: none; border: none; padding: 0; font-size: 11.5px; font-weight: 700; color: var(--sky); cursor: pointer; white-space: nowrap; }
.verweis:hover { text-decoration: underline; }

/* ---------- Suche ---------- */
.treffer-kopf { margin-bottom: 4px; }
mark { background: rgba(211, 216, 0, 0.45); color: inherit; border-radius: 3px; padding: 0 2px; }
.leer { padding: 40px 16px; text-align: center; font-size: 13.5px; color: var(--mut2); }

/* ---------- Schutzhinweis und Fuß ---------- */
.schutz {
  margin-top: 24px; background: var(--navy); color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-gross); padding: 16px 20px; font-size: 12.5px; line-height: 1.7; display: flex; gap: 12px;
}
.schutz b { color: #fff; }
.schutz-zeichen { color: var(--lime); font-size: 16px; line-height: 1.3; }

footer.seite { border-top: 1px solid var(--linie); background: var(--weiss); }
footer.seite div { max-width: var(--breite); margin: 0 auto; padding: 20px 16px; font-size: 11.5px; line-height: 1.7; color: var(--mut2); }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
  .geruest { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  nav.kapitelnav { position: static; }
  nav.kapitelnav ol { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  nav.kapitelnav li { margin: 0; }
  nav.kapitelnav button { white-space: nowrap; width: auto; background: var(--weiss); border-color: var(--linie); }
  .nav-kurz { display: none; }
}
@media (max-width: 560px) {
  .marke-zusatz, .kopf-mail { display: none; }
  .abschnitt { padding: 18px 16px; }
  /* Marke und Abmelden in eine Zeile, die Suche darunter ueber die volle Breite. */
  .kopf-inhalt > div:first-child { order: 1; }
  .kopf-rechts { order: 2; margin-left: auto; }
  .suche-huelle { order: 3; flex: 1 0 100%; max-width: none; }
}

@media print {
  .kopf, nav.kapitelnav, .stufenwahl, .verweis, .schutz { display: none !important; }
  .geruest { display: block; padding: 0; }
  .abschnitt { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}