/* SECULATOR – Oberfläche
   Farbwelt: Tiefes Schieferblau als Chrom, Markenblau als einziger Akzent, heller
   Arbeitsgrund. Daten und Beträge durchgehend in Mono – Zeiten und Zahlen sollen
   untereinander stehen wie in einem Dienstplan.

   Die Werte unten sind dieselben wie auf der Website (Design 2). Wer hier etwas
   ändert, ändert es auch dort – siehe claude/design-2-tokens.md im Projekt.

   Zustandsfarben (gruen, warn, rot) sind bewusst vom Akzent getrennt: Ein
   Warnhinweis darf nicht dieselbe Farbe haben wie der Hauptknopf, sonst ist er
   kein Warnhinweis. */

:root{
  --tinte:#0F2C41;
  --schiefer:#1E3D53;
  --schiefer-hell:#3A5A72;
  --papier:#F3F7FC;
  --karte:#FFFFFF;
  --linie:#DCE4EC;
  --linie-stark:#B6C2CE;
  --text:#0F2C41;
  --text-leise:#45494C;
  --signal:#4888F4;
  --signal-tief:#2E6BD0;
  --signal-zart:#EAF1FE;
  --gruen:#1E7A55;
  --gruen-zart:#E6F2EC;
  --warn:#8A5A12;
  --warn-zart:#FDF3E3;
  --warn-linie:#E9CFA4;
  --rot:#B23A2F;
  --rot-zart:#FBEBE9;
  --blau:#4888F4;
  --blau-zart:#EAF1FE;
  --radius:12px;
  --radius-knopf:9px;
  --radius-klein:8px;
  /* Schrift im blauen Knopf. Nicht Weiß und nicht --tinte: Weiß auf Markenblau
     ergibt 3,4:1, --tinte 4,2:1 – beides unter den 4,5:1 nach WCAG AA. */
  --knopf-tinte:#08131C;
  --font-kopf:"Nunito","Trebuchet MS",system-ui,sans-serif;
  --font-text:"Lato",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-zahl:"IBM Plex Mono","Courier New",monospace;
}

*{box-sizing:border-box}

/* Ein Regler für die gesamte Schriftgröße.
   Alle Schriftgrößen im Stylesheet stehen in rem und hängen an dieser Zahl:
   112,5 % von 16 px sind 18 px, aus 15 px Grundschrift werden knapp 17.
   Prozent statt Pixel, damit eine im Browser eingestellte größere Schrift
   nicht überschrieben wird.
   Für den Druck wird der Regler im Druckblock weiter unten auf 16 px
   zurückgesetzt – ein Angebotsblatt soll auf Papier aussehen wie bisher. */
html{font-size:112.5%}

body{
  margin:0;
  background:var(--papier);
  color:var(--text);
  font-family:var(--font-text);
  font-size:0.9375rem;
  line-height:1.6;
  padding-bottom:96px;
}

.sec-wrap{width:100%;max-width:1350px;margin:0 auto;padding:0 20px}

/* ---------- Kopfzeile ---------- */
.sec-top{background:var(--tinte);color:#E8EDF2;padding:12px 0}
.sec-brand{
  font-weight:600;letter-spacing:.16em;font-size:0.9375rem;
  color:#fff;text-decoration:none;
}
.sec-brand:hover{color:var(--signal)}
.sec-vorgang{font-size:0.8125rem;color:#9FB0C0;display:flex;gap:8px;align-items:center;min-width:0}
.sec-vorgang-typ{
  background:var(--schiefer-hell);color:#CFDCE8;border-radius:999px;
  padding:2px 10px;font-size:0.6875rem;letter-spacing:.05em;white-space:nowrap;
}
.sec-link{color:#9FB0C0;text-decoration:none;font-size:0.8125rem;padding:4px 8px;border-radius:6px}
.sec-link:hover{color:#fff;background:var(--schiefer-hell)}

/* ---------- Kontrollpunkt-Leiste (Streifengang) ---------- */
.sec-rail{background:var(--schiefer);padding:14px 0 16px;overflow-x:auto}
.sec-rail-list{
  list-style:none;display:flex;margin:0;padding:0;gap:0;min-width:640px;
  counter-reset:cp;
}
.sec-cp{flex:1 1 0;position:relative;text-align:center}
.sec-cp a,.sec-cp span.sec-cp-inner,.sec-cp>span{
  display:block;text-decoration:none;color:inherit
}
/* Verbindungslinie = Streifenroute */
.sec-cp::before{
  content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;
  background:var(--schiefer-hell);
}
.sec-cp:first-child::before{display:none}
.sec-cp-done::before{background:var(--signal)}
.sec-cp-now::before{background:linear-gradient(90deg,var(--signal),var(--schiefer-hell))}

.sec-cp-dot{
  position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--schiefer);border:2px solid var(--schiefer-hell);
  color:#8FA2B4;font-size:0.75rem;font-weight:500;
  font-family:var(--font-zahl);
  transition:transform .18s ease,background .18s ease;
}
.sec-cp-name{display:block;font-size:0.75rem;color:#8FA2B4;margin-top:6px;letter-spacing:.02em}
.sec-cp-done .sec-cp-dot{background:var(--signal);border-color:var(--signal);color:#fff}
.sec-cp-done .sec-cp-name{color:#C7D4E0}
.sec-cp-now .sec-cp-dot{
  background:#fff;border-color:var(--signal);color:var(--signal-tief);
  box-shadow:0 0 0 4px rgba(72,136,244,.24);
}
.sec-cp-now .sec-cp-name{color:#fff;font-weight:500}
.sec-cp a:hover .sec-cp-dot{transform:scale(1.1)}

/* ---------- Inhalt ---------- */
.sec-main{padding:32px 0 24px}

h1{font-size:1.625rem;font-weight:600;letter-spacing:-.01em;margin:0 0 6px}
h2{font-size:1.125rem;font-weight:600;margin:0 0 4px}
.sec-lead{color:var(--text-leise);margin:0 0 26px;max-width:62ch}

.sec-karte{
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:22px 24px;margin-bottom:18px;
}
.sec-karte-kopf{display:flex;align-items:baseline;gap:8px;margin-bottom:16px}
.sec-karte-kopf h2{margin:0}
.sec-karte-hinweis{font-size:0.8125rem;color:var(--text-leise);margin:-8px 0 16px}

/* Auswahlkarten Schritt 1 */
.sec-wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.sec-wahl-karte{
  display:block;background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--radius);padding:24px;text-decoration:none;color:inherit;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
  position:relative;overflow:hidden;
}
.sec-wahl-karte::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--linie);
  transition:background .18s ease;
}
.sec-wahl-karte:hover{border-color:var(--linie-stark);transform:translateY(-2px);box-shadow:0 8px 22px rgba(27,40,54,.09)}
.sec-wahl-karte:hover::after{background:var(--signal)}
.sec-wahl-karte:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
/* Eine Wahl, die es noch nicht gibt: sichtbar, aber ohne Angebot.
   Kein Zeigefinger, kein Anheben beim Überfahren – sonst greift jemand
   danach und nichts geschieht. `pointer-events:none` allein genügt nicht,
   weil die Karte dann auch nicht vorgelesen werden kann; deshalb bleibt
   sie im Fluss und nur das Feld ist `disabled`. */
.sec-wahl-karte-aus{opacity:.55;cursor:not-allowed;background:var(--papier)}
.sec-wahl-karte-aus:hover{border-color:var(--linie);transform:none;box-shadow:none}
.sec-wahl-karte-aus:hover::after{background:var(--linie)}
.sec-wahl-titel{font-size:1.125rem;font-weight:600;margin:0 0 6px}
.sec-wahl-text{font-size:0.8438rem;color:var(--text-leise);margin:0 0 14px}
.sec-wahl-meta{
  font-family:var(--font-zahl);font-size:0.7188rem;
  color:var(--signal-tief);background:var(--signal-zart);
  border-radius:6px;padding:4px 8px;display:inline-block;
}

/* Erklärtext ohne Bootstrap – siehe assets/seculator.js. */
.sec-info-auf{
  display:block;margin:6px 0;padding:8px 10px;border-radius:8px;
  background:var(--signal-zart);border:1px solid var(--linie);
  font-size:0.8125rem;font-weight:400;line-height:1.5;color:var(--text);
}

/* ---------- Zeitraum: ein Kalender für zwei Felder ----------
   Gebaut in assets/seculator.js. Erscheint nur, wenn das Skript läuft –
   ohne es stehen die beiden Datumsfelder da wie eh und je. */
.sec-zr{position:relative;display:flex;align-items:stretch;gap:6px}
.sec-zr-knopf{
  flex:1 1 auto;text-align:left;background:#fff;border:1px solid var(--linie);
  border-radius:8px;padding:.5rem .7rem;font:inherit;color:var(--text);cursor:pointer;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.sec-zr-knopf:hover{border-color:var(--linie-stark)}
.sec-zr-knopf:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.sec-zr-text{font-family:var(--font-zahl);font-size:0.9062rem}
.sec-zr-dauer{font-size:0.75rem;color:var(--text-leise);white-space:nowrap}
.sec-zr-leeren{
  flex:0 0 auto;width:36px;background:#fff;border:1px solid var(--linie);border-radius:8px;
  color:var(--text-leise);font-size:1.1rem;line-height:1;cursor:pointer;
}
.sec-zr-leeren:hover{border-color:var(--linie-stark);color:var(--rot)}

.sec-zr-blatt{
  position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:290px;
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(27,40,54,.16);padding:12px;
}
.sec-zr-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sec-zr-monat{font-weight:600;font-size:0.9062rem}
.sec-zr-pfeil{
  width:30px;height:30px;border:1px solid var(--linie);border-radius:8px;background:#fff;
  cursor:pointer;color:var(--text);line-height:1;font-size:1.05rem;
}
.sec-zr-pfeil:hover{border-color:var(--linie-stark)}
.sec-zr-wochentage,.sec-zr-gitter{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.sec-zr-wochentage span{
  text-align:center;font-size:0.6875rem;color:var(--text-leise);padding-bottom:4px;
}
.sec-zr-tag{
  border:0;background:transparent;border-radius:7px;padding:6px 0;cursor:pointer;
  font:inherit;font-size:0.8125rem;font-family:var(--font-zahl);color:var(--text);
}
.sec-zr-tag:hover{background:var(--signal-zart)}
.sec-zr-tag.heute{box-shadow:inset 0 0 0 1px var(--linie-stark)}
/* Der gewählte Zeitraum: die Ränder kräftig, das Dazwischen zart – so sieht
   man mit einem Blick, was gewählt ist, und nicht nur zwei einzelne Tage. */
.sec-zr-tag.drin{background:var(--signal-zart);border-radius:0}
.sec-zr-tag.rand{background:var(--signal);color:var(--knopf-tinte);font-weight:600}
.sec-zr-tag.anfang{border-top-right-radius:0;border-bottom-right-radius:0}
.sec-zr-tag.schluss{border-top-left-radius:0;border-bottom-left-radius:0}
.sec-zr-tag.anfang.schluss{border-radius:7px}
.sec-zr-fuss{font-size:0.6875rem;color:var(--text-leise);margin-top:8px}

/* ---------- Formulare ---------- */
.form-label{font-size:0.8125rem;font-weight:500;color:var(--text);margin-bottom:4px}
.form-control,.form-select{
  border-color:var(--linie);border-radius:8px;font-size:0.9062rem;padding:.5rem .7rem;
}
.form-control:focus,.form-select:focus{
  border-color:var(--signal);box-shadow:0 0 0 3px rgba(72,136,244,.22)
}
.sec-mono,input.sec-mono,td.sec-mono{font-family:var(--font-zahl)}
.sec-feldhilfe{font-size:0.75rem;color:var(--text-leise);margin-top:3px}

/* Info-Punkt */
.info-dot{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;
  background:var(--blau);color:#fff;border:0;
  font-size:0.6875rem;font-weight:600;font-family:var(--font-text);
  line-height:1;cursor:pointer;vertical-align:middle;margin-left:5px;padding:0;
  transition:transform .15s ease,background .15s ease;
}
.info-dot:hover{background:#1B4E86;transform:scale(1.15)}
.info-dot:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.popover{border-color:var(--linie);border-radius:10px;max-width:340px;box-shadow:0 10px 30px rgba(15,23,32,.15)}
.popover-header{background:var(--blau-zart);color:var(--tinte);font-size:0.8438rem;font-weight:600;border-bottom-color:var(--linie)}
.popover-body{font-size:0.8125rem;color:var(--text);line-height:1.6}

/* ---------- Tabellen ---------- */
.sec-tab{width:100%;border-collapse:collapse;font-size:0.875rem}
.sec-tab th{
  font-size:0.7188rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-leise);text-align:left;padding:8px 10px;border-bottom:1px solid var(--linie);
  white-space:nowrap;
}
.sec-tab td{padding:6px 10px;border-bottom:1px solid var(--linie)}
.sec-tab tbody tr:last-child td{border-bottom:0}
.sec-tab .zahl{text-align:right;font-family:var(--font-zahl)}
.sec-tab input.form-control{padding:.3rem .5rem;font-size:0.8438rem}
.sec-tab tfoot td{font-weight:600;border-top:2px solid var(--linie-stark);padding-top:10px}

/* ---------- Ergebnisblöcke ---------- */
.sec-zeile{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid var(--linie)}
.sec-zeile:last-child{border-bottom:0}
.sec-zeile-wert{font-family:var(--font-zahl);white-space:nowrap}
.sec-zeile-stark{font-weight:600;font-size:1rem}
.sec-zeile-stark .sec-zeile-wert{color:var(--gruen)}

.sec-untergrenze{background:var(--rot-zart);border-left:3px solid var(--rot);padding:10px 14px;border-radius:0 8px 8px 0}
.sec-untergrenze .sec-zeile-wert{color:var(--rot)}

.sec-ampel{border-radius:var(--radius);padding:14px 18px;font-weight:500;margin-bottom:18px;border:1px solid}
.sec-ampel-ok{background:var(--gruen-zart);border-color:#B9DFCC;color:#14603E}
.sec-ampel-achtung{background:var(--warn-zart);border-color:var(--warn-linie);color:var(--warn)}
.sec-ampel-stopp{background:var(--rot-zart);border-color:#EDC0BA;color:#8A2A21}

/* Vorschau eines E-Mail-Textes: Zeilenumbrüche stehen lassen, aber lange
   Zeilen umbrechen, damit die Seite nicht seitwärts scrollt. */
.sec-vorschau{
  background:var(--papier);border:1px solid var(--linie);border-radius:10px;
  padding:16px 18px;margin:0;font-family:var(--font-zahl);font-size:0.8125rem;
  line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text);
}

/* Große Kennzahl */
.sec-gross{font-family:var(--font-zahl);font-size:2.375rem;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.sec-gross-label{font-size:0.75rem;color:var(--text-leise);letter-spacing:.05em;text-transform:uppercase}

/* ---------- Fußleiste ---------- */
.sec-bottom{
  position:fixed;bottom:0;left:0;right:0;background:var(--karte);
  border-top:1px solid var(--linie);padding:12px 0;z-index:20;
  box-shadow:0 -4px 18px rgba(15,23,32,.06);
}
.sec-kpi{display:flex;flex-direction:column;line-height:1.2}
.sec-kpi-label{font-size:0.6875rem;color:var(--text-leise);letter-spacing:.04em;text-transform:uppercase}
.sec-kpi-wert{font-family:var(--font-zahl);font-size:1.0625rem;font-weight:500}

.btn-signal{
  background:var(--signal);border-color:var(--signal);color:var(--knopf-tinte);font-weight:500;
  padding:.5rem 1.6rem;border-radius:var(--radius-knopf);
}
.btn-signal:hover{background:var(--signal-tief);border-color:var(--signal-tief);color:#fff}
.btn-signal:focus-visible{outline:3px solid var(--tinte);outline-offset:2px}

/* ---------- Grundwerte (bewusst zurückhaltend) ---------- */
.sec-gruppe{margin-bottom:26px}
.sec-gruppe-titel{
  font-size:0.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-leise);
  border-bottom:1px solid var(--linie);padding-bottom:6px;margin-bottom:12px;
}

/* ---------- Angebot / Druck ---------- */
.sec-angebot{background:#fff;padding:36px 40px;border:1px solid var(--linie);border-radius:var(--radius)}
.sec-angebot h1{font-size:1.375rem}


@media (max-width:640px){
  .sec-wrap{padding:0 14px}
  .sec-main{padding:20px 0}
  .sec-karte{padding:18px 16px}
  .sec-gross{font-size:1.875rem}
  .sec-vorgang{display:none}
}

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

/* Auswahlkarten als Buttons */
button.sec-wahl-karte{
  width:100%;text-align:left;font:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
}
/* Eine gesperrte Auswahlkarte ist ein Knopf – und `button.sec-wahl-karte`
   oben ist spezifischer als `.sec-wahl-karte-aus`. Ohne diese Zeile bliebe
   der Zeigefinger stehen und die Karte sähe anklickbar aus. */
button.sec-wahl-karte-aus,
button.sec-wahl-karte[disabled]{cursor:not-allowed}
button.sec-wahl-karte .sec-wahl-titel,
button.sec-wahl-karte .sec-wahl-text,
button.sec-wahl-karte .sec-wahl-meta{display:block}
button.sec-wahl-karte .sec-wahl-meta{margin-top:auto}

/* Mehrfachauswahl der Leistungsarten */
.sec-la-wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.sec-la-karte{
  display:flex;align-items:flex-start;gap:2px;cursor:pointer;
  border:1px solid var(--linie);border-radius:8px;padding:10px 12px;background:#fff;
  transition:border-color .15s ease,background .15s ease;
}
.sec-la-karte:hover{border-color:var(--linie-stark)}
/* Markierung folgt dem tatsächlichen Zustand des Feldes, nicht einer
   beim Laden gesetzten Klasse – sonst bleibt die alte Wahl hervorgehoben. */
.sec-la-karte:has(input:checked){border-color:var(--signal);background:var(--signal-zart)}
.sec-la-karte:has(input:focus-visible){outline:2px solid var(--signal);outline-offset:2px}
.sec-la-karte:has(input:disabled){opacity:.55;cursor:default}
.sec-la-karte .form-check-input{margin-top:3px;flex:0 0 auto}
.sec-la-karte .sec-feldhilfe{margin-top:1px}

/* Wochentagsauswahl im Postenplan */
.sec-tage{white-space:nowrap}
.sec-tage label{display:inline-block;margin:0 2px 0 0;cursor:pointer}
.sec-tage label input{position:absolute;opacity:0;width:0;height:0}
.sec-tage label span{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:6px;
  border:1px solid var(--linie);background:#fff;
  font-size:0.7188rem;font-weight:500;color:var(--text-leise);
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.sec-tage label:hover span{border-color:var(--linie-stark)}
.sec-tage label input:checked + span{background:var(--signal);border-color:var(--signal);color:#fff}
.sec-tage label input:focus-visible + span{outline:2px solid var(--tinte);outline-offset:2px}

/* Dokumentensymbole */
.sec-dok-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:40px;border-radius:4px;
  font-size:0.5938rem;font-weight:600;letter-spacing:.02em;
  font-family:var(--font-zahl);color:#fff;
  background:var(--text-leise);position:relative;
}
.sec-dok-icon::after{
  content:"";position:absolute;top:0;right:0;
  border-width:0 0 8px 8px;border-style:solid;
  border-color:transparent transparent rgba(255,255,255,.45) transparent;
}
.sec-dok-pdf{background:#B23A2F}
.sec-dok-bild{background:#1B8A5A}
.sec-dok-text{background:#2563A8}
.sec-dok-tabelle{background:#1B7A4D}
.sec-dok-praesentation{background:#C4571F}
.sec-dok-archiv{background:#6B5B95}
.sec-dok-email{background:#8A6D1F}
.sec-dok-sonstige{background:#5D6B7A}

/* Feld-Kennungen im Debugmodus */
.sec-feldid{
  display:inline-block;font-family:var(--font-zahl);font-size:0.625rem;
  background:#0F1720;color:#F08A24;border-radius:3px;padding:0 4px;margin-left:4px;
  vertical-align:middle;user-select:all;cursor:text;
}
.sec-karteid{
  position:absolute;top:6px;right:8px;font-family:var(--font-zahl);font-size:0.625rem;
  background:#0F1720;color:#F08A24;border-radius:3px;padding:1px 5px;user-select:all;
}
body.sec-debug .sec-karte{position:relative}


/* Debugmodus: Fußleiste über die Debugleiste heben, damit die Knöpfe klickbar bleiben */
body.sec-debug{padding-bottom:150px}
body.sec-debug .sec-bottom{bottom:34px}

/* Gestaltbare Größen */
.sec-wrap{max-width:var(--breite,1350px)}

/* kurzes Aufblitzen, wenn ein Feld automatisch gefüllt wurde */
@keyframes sec-blitz{0%{background:var(--signal-zart)}100%{background:#fff}}
.sec-blitz{animation:sec-blitz .7s ease-out}
@media (prefers-reduced-motion:reduce){.sec-blitz{animation:none}}

/* Platzhalterknöpfe im Vorlageneditor */
.sec-platzhalter{
  background:#fff;border:1px solid var(--linie);border-radius:8px;
  padding:6px 10px;text-align:left;cursor:pointer;font:inherit;
  transition:border-color .15s ease,background .15s ease;
}
.sec-platzhalter:hover{border-color:var(--signal);background:var(--signal-zart)}
.sec-platzhalter .sec-mono{font-size:0.75rem;color:var(--signal-tief)}
.ql-toolbar.ql-snow{border-color:var(--linie);border-radius:8px 8px 0 0;background:#fff}
.ql-container.ql-snow{border-color:var(--linie);border-radius:0 0 8px 8px;font-family:inherit;font-size:0.9062rem}
.ql-editor{min-height:400px;line-height:1.65}

/* ---------- Angebotsmappe ---------- */
.sec-blatt{
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius);
  padding:42px 52px;margin-bottom:20px;position:relative;
}
.sec-brief-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;margin-bottom:34px}
.sec-brief-logo img{max-height:64px;max-width:240px}
.sec-brief-absender{font-size:0.7188rem;color:var(--text-leise);line-height:1.55;text-align:right;white-space:pre-line}
.sec-brief-fenster{display:flex;justify-content:space-between;gap:40px;margin-bottom:28px}
.sec-brief-anschrift{font-size:0.9062rem;line-height:1.5;white-space:pre-line;min-height:70px}
.sec-brief-ruecksender{
  font-size:0.5938rem;color:var(--text-leise);border-bottom:.5px solid var(--linie-stark);
  padding-bottom:2px;margin-bottom:10px;display:inline-block;
}
.sec-brief-info{font-size:0.75rem;line-height:1.7;min-width:230px}
.sec-brief-info dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:0}
.sec-brief-info dt{color:var(--text-leise)}
.sec-brief-info dd{margin:0;font-family:var(--font-zahl)}
.sec-brief-betreff{font-weight:600;font-size:0.9688rem;margin:0 0 18px}
.sec-brief-text{font-size:0.9062rem;line-height:1.7}
.sec-brief-text p{margin:0 0 12px}
.sec-brief-text ul,.sec-brief-text ol{margin:0 0 12px;padding-left:20px}
.sec-brief-text li{margin-bottom:4px}
.sec-brief-text h2{font-size:0.9375rem;font-weight:600;margin:22px 0 8px}
.sec-brief-text h3{font-size:0.875rem;font-weight:600;margin:18px 0 6px}
.sec-brief-text table{width:100%;border-collapse:collapse;font-size:0.8438rem;margin:0 0 12px}
.sec-brief-text th,.sec-brief-text td{border:1px solid var(--linie);padding:5px 8px;text-align:left}

.sec-pos{width:100%;border-collapse:collapse;font-size:0.8438rem;margin-bottom:6px}
.sec-pos thead th{
  font-size:0.6562rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-leise);
  text-align:left;padding:0 8px 6px;border-bottom:1.5px solid var(--tinte);font-weight:500;
}
.sec-pos td{padding:7px 8px;border-bottom:.5px solid var(--linie);vertical-align:top}
.sec-pos .zahl{text-align:right;font-family:var(--font-zahl);white-space:nowrap}
.sec-pos .pos-nr{color:var(--text-leise);width:26px;font-family:var(--font-zahl)}
.sec-pos tbody tr:last-child td{border-bottom:0}
.sec-pos-gruppe td{
  padding-top:16px;font-weight:600;font-size:0.75rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-leise);border-bottom:.5px solid var(--linie-stark);
}
.sec-summe{margin-left:auto;width:320px;font-size:0.875rem;margin-top:14px}
.sec-summe div{display:flex;justify-content:space-between;gap:12px;padding:5px 0}
/* Die Beschriftung darf umbrechen, der Betrag nicht: „1.032,92" und „€" auf
   zwei Zeilen liest sich wie zwei Zahlen. */
.sec-summe span:first-child{min-width:0}
.sec-summe span:last-child{white-space:nowrap}
.sec-summe .gesamt{
  border-top:1.5px solid var(--tinte);margin-top:4px;padding-top:8px;
  font-weight:600;font-size:1rem;
}
.sec-summe span:last-child{font-family:var(--font-zahl)}
.sec-fuss{
  font-size:0.5938rem;color:var(--text-leise);line-height:1.6;
  border-top:.5px solid var(--linie);padding-top:8px;margin-top:32px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.sec-fuss strong{display:block;color:var(--text);font-weight:500;margin-bottom:2px}
.sec-fuss>div{white-space:pre-line}


/* Offene Kalkulation */
.sec-pos-summe td{border-top:.5px solid var(--linie-stark);font-weight:600}
.sec-pos-summe td.pos-nr{font-weight:400}


/* ============================================================
   Druckausgabe
   Ein Blatt je Seite, keine Bedienelemente, keine Debughilfen.
   ============================================================ */
@media print{
  @page{size:A4;margin:18mm 16mm 16mm}

  /* Der Regler aus dem Kopf dieser Datei zurück auf 16 px: Alle Größen in rem
     hängen daran, und das Angebotsblatt soll auf Papier so aussehen wie bisher.
     Getrennt von body, weil body seine eigene Druckgröße in pt bekommt. */
  html{font-size:16px;background:#fff;margin:0;padding:0}

  body{
    background:#fff;padding:0;margin:0;
    font-size:10.5pt;line-height:1.5;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }

  /* Alles, was zur Bedienung gehört, verschwindet */
  .sec-top,.sec-rail,.sec-bottom,.sec-mappe-wahl,.sec-noprint,
  .info-dot,.sec-karteid,.sec-feldid,.sec-debugleiste,
  .nav,.btn,button,input,select,textarea,form.sec-noprint,
  .ql-toolbar,.ql-container{display:none!important}

  /* Karten der Oberfläche werden nicht gedruckt, nur die Blätter */
  .sec-karte{display:none!important}

  .sec-wrap{max-width:none;width:auto;padding:0;margin:0}
  .sec-main{padding:0}

  .sec-blatt{
    border:0;border-radius:0;padding:0;margin:0;
    page-break-after:always;break-after:page;
    box-shadow:none;
  }
  .sec-blatt:last-of-type{page-break-after:auto;break-after:auto}

  /* Kopf und Fuß eines Blattes bleiben zusammen */
  .sec-brief-kopf,.sec-brief-fenster,.sec-fuss,.sec-summe{
    page-break-inside:avoid;break-inside:avoid;
  }
  .sec-brief-betreff{page-break-after:avoid;break-after:avoid}
  h1,h2,h3{page-break-after:avoid;break-after:avoid}

  /* Tabellen sauber umbrechen */
  .sec-pos thead,.sec-tab thead{display:table-header-group}
  .sec-pos tfoot,.sec-tab tfoot{display:table-footer-group}
  .sec-pos tr,.sec-tab tr{page-break-inside:avoid;break-inside:avoid}
  .sec-pos td,.sec-pos th{padding:5px 7px}

  /* Absätze nicht mit einer Restzeile umbrechen */
  p,li{orphans:3;widows:3}

  /* Verweise als reiner Text */
  a{text-decoration:none;color:inherit}
  a[href]:after{content:""}

  .sec-fuss{margin-top:24pt;border-top:.5pt solid #B9C5D1}
  .sec-brief-logo img{max-height:52pt}
}

/* ============================================================
   Feinschliff der Blätter
   ============================================================ */
.sec-blatt{
  max-width:820px;margin-left:auto;margin-right:auto;
  box-shadow:0 2px 14px rgba(15,23,32,.06);
}
.sec-blatt + .sec-blatt{margin-top:26px}

/* Trennlinie zwischen Blättern in der Bildschirmvorschau */
.sec-blatt-trenner{
  text-align:center;font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-leise);margin:-8px 0 18px;
}

.sec-brief-kopf{border-bottom:1px solid var(--linie);padding-bottom:18px}
.sec-brief-info dt{white-space:nowrap}
.sec-brief-betreff{letter-spacing:-.01em}

/* Positionstabelle */
.sec-pos thead th{border-bottom:1.5px solid var(--tinte);padding-bottom:7px}
.sec-pos tbody td{line-height:1.45}
.sec-pos-gruppe td{
  background:transparent;padding-top:18px;padding-bottom:4px;
  border-bottom:1px solid var(--linie-stark);
}
.sec-pos tbody tr:first-child.sec-pos-gruppe td{padding-top:4px}

.sec-summe{border-top:0}
.sec-summe div{border-bottom:.5px solid var(--linie)}
.sec-summe div:last-child{border-bottom:0}
.sec-summe .gesamt{background:var(--papier);margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px}

.sec-fuss{column-gap:20px}
.sec-fuss>div{white-space:pre-line;line-height:1.55}

@media (max-width:820px){
  .sec-blatt{padding:24px 20px}
  .sec-brief-kopf{flex-direction:column;gap:14px}
  .sec-brief-absender{text-align:left}
  .sec-fuss{grid-template-columns:1fr}
}

/* ============================================================
   Satz der Angebotsblätter
   Wenige Linien, viel Weißraum, Zahlen auf gleicher Achse.
   Graustufenfest: keine Akzentfarbe, damit Kopie und Bürolaser
   dasselbe Bild ergeben wie der gute Drucker.
   ============================================================ */

.sec-blatt{
  --blatt-linie:#C8D0D8;
  --blatt-stark:#0F2C41;
  --blatt-leise:#45494C;
}
.blatt-grau{
  --signal:#0F2C41;
  --signal-tief:#0F2C41;
  --gruen:#0F2C41;
  --rot:#0F2C41;
}

/* ---------- Kopfzeile ---------- */
/* Der Kopf des Blattes trägt drei Dinge nebeneinander: Wortmarke oder Logo,
   den Titel und den Infoblock mit Nummer und Datum.

   Bis 1.59.0 konnte keines davon nachgeben: Die Wortmarke stand auf `nowrap`,
   der Infoblock auf `min-width:230px`, und schrumpfen durfte nur der Titel –
   bis auf null. Bei „GARANDUS Sicherheitsdienste West GmbH" und einem
   Veranstaltungsnamen war der Titelkasten dann 0 px breit, und sein Text lief
   quer über Nummer und Datum. Gemessen, nicht vermutet: 448 + 230 + 56 Pixel
   Zwischenraum in einem 714 Pixel breiten Kopf.

   Jetzt darf der Kopf umbrechen, die Wortmarke ebenso, und der Titel behält
   eine Mindestbreite, unter die er nicht fällt. */
.sec-blatt .sec-brief-kopf{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 28px;
  border-bottom:.75px solid var(--blatt-stark);
  padding-bottom:14px;margin-bottom:30px;
}
.blatt-logo-rechts .sec-brief-kopf{flex-direction:row-reverse}
.blatt-logo-rechts .sec-brief-absender{text-align:left}
.blatt-logo-rechts .sec-brief-info{margin-right:auto;margin-left:0}

.sec-brief-logo{flex:0 1 auto;min-width:0}
.sec-brief-logo img{max-height:56px;max-width:210px;display:block}
.sec-wortmarke{
  font-size:1.0625rem;font-weight:600;letter-spacing:.06em;
  color:var(--blatt-stark);
  /* Ein Firmenname ist so lang, wie er ist – er darf umbrechen. */
  max-width:22rem;overflow-wrap:break-word;
}
.sec-blatt-titel{flex:1 1 11rem;min-width:0}
.sec-blatt-gattung{
  font-size:0.5938rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blatt-leise);margin-bottom:5px;
}
.sec-blatt-name{
  font-size:1.375rem;font-weight:400;letter-spacing:-.015em;
  line-height:1.2;color:var(--blatt-stark);
  overflow-wrap:break-word;
}
.sec-blatt-unter{font-size:0.8125rem;color:var(--blatt-leise);margin-top:3px}
.sec-blatt .sec-brief-absender{
  flex:0 0 auto;font-size:0.6562rem;color:var(--blatt-leise);line-height:1.6;
}

/* ---------- Anschreiben ---------- */
.blatt-serif .sec-brief-betreff,
.blatt-serif .sec-brief-text{font-family:"IBM Plex Serif",Georgia,"Times New Roman",serif}
.sec-blatt .sec-brief-betreff{
  font-size:1rem;font-weight:600;letter-spacing:0;
  margin:0 0 20px;color:var(--blatt-stark);
}
.sec-blatt .sec-brief-text{font-size:0.875rem;line-height:1.78;color:var(--blatt-stark)}
.sec-blatt .sec-brief-text p{margin:0 0 13px}
.sec-blatt .sec-brief-text h2{
  font-family:var(--font-text);
  font-size:0.6562rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blatt-leise);margin:26px 0 9px;
}
.sec-blatt .sec-brief-text ul{margin:0 0 13px;padding-left:17px}
.sec-blatt .sec-brief-text li{margin-bottom:5px}

/* Nummer und Datum geben ihre Breite nicht her und stehen rechts – auch dann,
   wenn der Kopf umbricht und sie in einer eigenen Zeile landen. */
.sec-brief-info{font-size:0.7188rem;line-height:1.75}
.sec-blatt .sec-brief-info{flex:0 0 auto;margin-left:auto}
.sec-brief-info dt{color:var(--blatt-leise)}
.sec-brief-info dd{font-family:var(--font-zahl);font-variant-numeric:tabular-nums}

/* ---------- Positionstabelle: nur zwei Linien ---------- */
.sec-blatt .sec-pos{
  width:100%;border-collapse:collapse;font-size:0.7812rem;
  font-variant-numeric:tabular-nums;margin-bottom:4px;
}
.sec-blatt .sec-pos thead th{
  font-size:0.5938rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--blatt-leise);text-align:left;
  border-bottom:.75px solid var(--blatt-stark);padding:0 9px 8px;
}
.sec-blatt .sec-pos td{
  border:0;padding:7px 9px;vertical-align:top;line-height:1.5;
  color:var(--blatt-stark);
}
.sec-blatt .sec-pos .zahl{
  text-align:right;font-family:var(--font-zahl);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.sec-blatt .sec-pos .pos-nr{color:var(--blatt-leise);width:30px}
.sec-blatt .sec-pos-gruppe td{
  padding:22px 9px 5px;font-size:0.5938rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blatt-leise);
  border-bottom:0;background:none;
}
.sec-blatt .sec-pos tbody tr:first-child .sec-pos-gruppe td,
.sec-blatt .sec-pos tbody tr.sec-pos-gruppe:first-child td{padding-top:6px}
.sec-blatt .sec-pos-summe td{
  border-top:.5px solid var(--blatt-linie);font-weight:600;padding-top:8px;
}

/* ---------- Summenblock ---------- */
.sec-blatt .sec-summe{
  margin-left:auto;width:290px;font-size:0.8125rem;margin-top:22px;
  font-variant-numeric:tabular-nums;
}
.sec-blatt .sec-summe div{
  display:flex;justify-content:space-between;gap:20px;
  padding:5px 0;border:0;background:none;margin:0;
}
.sec-blatt .sec-summe span:last-child{font-family:var(--font-zahl)}
.sec-blatt .sec-summe .gesamt{
  border-top:.75px solid var(--blatt-stark);
  margin-top:6px;padding-top:9px;font-weight:600;font-size:0.9375rem;
}

/* ---------- Fuß ---------- */
.sec-blatt .sec-fuss{
  font-size:0.5312rem;color:var(--blatt-leise);line-height:1.65;
  border-top:.5px solid var(--blatt-linie);
  padding-top:9px;margin-top:34px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.sec-blatt .sec-fuss strong{
  display:block;font-size:0.5312rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blatt-leise);margin-bottom:3px;
}

@media print{
  .sec-blatt{--blatt-linie:#BBB;--blatt-stark:#000;--blatt-leise:#555}
  .sec-blatt .sec-brief-text{font-size:10.5pt}
  .sec-blatt .sec-pos{font-size:9.5pt}
  .sec-blatt .sec-fuss{font-size:6.5pt}
}

/* Rechtshinweise und Metaangaben auf den Blättern */
.sec-blatt-rechtstext{
  font-size:0.6562rem;color:var(--blatt-leise);line-height:1.7;
  margin-top:30px;clear:both;max-width:62ch;
}
.sec-blatt-rechtstext p{margin:0 0 7px}
.sec-blatt-rechtstext p:last-child{margin:0}
.sec-blatt-anlagen{margin-top:30px;font-size:0.7812rem;color:var(--blatt-stark)}
.sec-blatt-anlagen strong{
  display:block;font-size:0.5938rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blatt-leise);margin-bottom:5px;
}
.sec-blatt-anlagen ul{margin:0;padding-left:17px}
.sec-blatt .sec-pos-meta{margin-bottom:26px;font-size:0.7812rem}
.sec-blatt .sec-pos-meta td{padding:3px 0;border:0}
.sec-blatt .sec-pos-meta .meta-label{
  width:160px;color:var(--blatt-leise);padding-right:14px;
}

/* Editierstift und Papierkorb in Tabellen */
.sec-stift{
  background:none;border:1px solid var(--linie);border-radius:7px;
  width:30px;height:30px;line-height:1;cursor:pointer;color:var(--text-leise);
  font-size:0.875rem;transition:all .15s ease;
}
.sec-stift:hover{border-color:var(--signal);color:var(--signal-tief);background:var(--signal-zart)}
.sec-stift.an{background:var(--signal);border-color:var(--signal);color:#fff}
.sec-muell{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:1px solid var(--linie);border-radius:7px;
  margin-left:4px;cursor:pointer;color:var(--text-leise);font-size:0.875rem;
}
.sec-muell input{position:absolute;opacity:0;width:0;height:0}
.sec-muell:has(input:checked){background:var(--rot-zart);border-color:var(--rot);color:var(--rot)}
tr[data-offen]{background:var(--signal-zart)}
tr[data-offen] td{border-color:var(--linie-stark)}

/* ============================================================
   Corporate Design
   Blau #4888F4 als einziger Akzent, Navy #0F2C41 als Chrom,
   gerundete Headline-Schrift, Lato als Grundschrift.
   ============================================================ */

h1,h2,h3,.sec-brand,.sec-blatt-name,.sec-gross,.sec-kpi-wert{
  font-family:var(--font-kopf);
  font-weight:700;
  letter-spacing:-.015em;
}
h1{font-size:1.6875rem}
h2{font-size:1.125rem;font-weight:600}
.sec-lead,.sec-feldhilfe,.sec-karte-hinweis{font-family:var(--font-text)}

/* Wortmarke wie im Logo: Sec blau, ulator hell */
.sec-brand{
  font-family:var(--font-kopf);font-weight:700;
  font-size:1.25rem;letter-spacing:-.02em;color:#FFFFFF;
}
.sec-brand span{color:var(--signal)}
.sec-brand:hover{color:#FFFFFF}
.sec-brand:hover span{color:#7FAEF8}

/* Kacheloptik des Logos: weichere Ecken, klare Flächen */
.sec-karte{border-radius:var(--radius)}
.btn,.form-control,.form-select{border-radius:var(--radius-klein)}
.sec-la-karte,.sec-wahl-karte{border-radius:11px}
.btn-signal{border-radius:var(--radius-knopf);font-family:var(--font-kopf);font-weight:600;letter-spacing:.01em}
.btn-signal:hover{background:var(--signal-tief);border-color:var(--signal-tief)}

/* Kontrollpunkte in Markenblau */
.sec-cp-dot{font-family:var(--font-zahl)}
.sec-cp-now .sec-cp-dot{box-shadow:0 0 0 4px rgba(72,136,244,.24)}

/* Zahlen durchgehend in Ziffernbreite */
.sec-mono,.sec-tab .zahl,.sec-zeile-wert,.sec-kpi-wert,.sec-gross{
  font-variant-numeric:tabular-nums;
}

/* Info-Punkt im Markenblau */
.info-dot{background:var(--blau);font-family:var(--font-kopf);font-weight:700}
.info-dot:hover{background:var(--signal-tief)}

/* Blätter: gleiche Schriftwelt, kein Serifenzwang */
.sec-blatt{font-family:var(--font-text)}
.sec-blatt-name,.sec-blatt .sec-brief-betreff{font-family:var(--font-kopf)}
.sec-wortmarke{font-family:var(--font-kopf);font-weight:700;letter-spacing:-.02em}
.sec-wortmarke::first-letter{color:inherit}

/* Blaues Band am Fuß der Blätter, wie auf dem Briefpapier */
.sec-blatt{position:relative;overflow:hidden;padding-bottom:56px}
.sec-blatt::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:14px;
  background:var(--signal);
}
.blatt-grau::after{background:var(--tinte)}
.sec-blatt .sec-fuss{margin-bottom:6px}

@media print{
  .sec-blatt{padding-bottom:0}
  .sec-blatt::after{display:none}
}

/* ============================================================
   Lohntabelle: gleich breite Spalten, mehrzeilige Überschrift
   Die Basisregel .sec-tab th setzt nowrap – hier ausdrücklich
   aufgehoben, sonst wird jede Spalte so breit wie ihr Name.
   ============================================================ */
.sec-tarif{width:auto}

.sec-tarif th.la,
.sec-tarif td.la{
  width:112px;min-width:112px;max-width:112px;
  padding-left:7px;padding-right:7px;
}
.sec-tarif th.la{
  white-space:normal;
  vertical-align:bottom;
  text-align:right;
  line-height:1.3;
  padding-bottom:9px;
}
.sec-tarif th.la .la-kuerzel{
  display:block;
  font-size:0.6875rem;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--text);
  overflow-wrap:anywhere;
}
.sec-tarif th.la .la-name{
  display:block;
  font-size:0.625rem;font-weight:400;line-height:1.28;
  text-transform:none;letter-spacing:0;color:var(--text-leise);
  overflow-wrap:anywhere;hyphens:auto;
  margin-top:3px;
}
.sec-tarif th.la .la-einheit{
  display:block;
  font-size:0.5938rem;font-weight:400;line-height:1.3;
  text-transform:none;letter-spacing:0;color:var(--linie-stark);
  margin-top:3px;white-space:nowrap;
}
.sec-tarif td.la input{width:100%;padding-left:6px;padding-right:6px}

.sec-tarif th:first-child,
.sec-tarif td:first-child{
  width:210px;min-width:210px;
  position:sticky;left:0;background:var(--karte);z-index:2;
  white-space:normal;
}
.sec-tarif thead th:first-child{z-index:3;vertical-align:bottom}
.sec-tarif td:first-child{border-right:1px solid var(--linie)}
.sec-tarif thead th:first-child{border-right:1px solid var(--linie)}

/* Anmeldung */
.sec-anmeldung{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--papier);padding:24px;
}
/* Anmeldung unterhalb einer Kopfzeile: nicht die ganze Bildschirmhöhe, sonst
   schiebt sie die Seite über den Rand. Der Abstand nach oben setzt die Karte
   tiefer, damit sie nicht an der Kopfzeile klebt. */
.sec-anmeldung.sec-anmeldung-eingebettet{
  min-height:auto;align-items:flex-start;padding:80px 0 32px;
}
@media (max-width:576px){
  .sec-anmeldung.sec-anmeldung-eingebettet{padding:40px 0 24px}
}
.sec-anmeldung-karte{
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:36px 34px;width:100%;max-width:430px;
  box-shadow:0 6px 30px rgba(15,44,65,.07);
}
.sec-anmeldung-marke{
  font-family:var(--font-kopf);font-weight:700;font-size:1.625rem;letter-spacing:-.02em;
  color:var(--tinte);margin-bottom:24px;
}
.sec-anmeldung-marke span{color:var(--signal)}
.sec-anmeldung h1{font-size:1.25rem;margin-bottom:6px}
.sec-anmeldung .sec-lead{font-size:0.875rem;margin-bottom:20px}

/* Benutzer in der Kopfzeile */
.sec-benutzer{
  font-size:0.8125rem;color:#C7D4E0;display:flex;flex-direction:column;line-height:1.15;
  padding:0 6px;
}
.sec-benutzer .sec-rolle{font-size:0.6562rem;color:#7E93A6;letter-spacing:.04em}

/* Herstellerzugang: unübersehbar für den, der ihn nutzt */
.sec-herstellerband{
  background:repeating-linear-gradient(135deg,#0F2C41,#0F2C41 12px,#173A55 12px,#173A55 24px);
  color:#EAF1FE;font-size:0.75rem;letter-spacing:.04em;
  padding:5px 20px;text-align:center;
  font-family:var(--font-text);
}
.sec-herstellerband .sec-mono{color:var(--signal)}
@media print{.sec-herstellerband{display:none}}

/* Programmstand, unaufdringlich am Seitenende */
.sec-version{
  text-align:center;font-size:0.6562rem;color:var(--linie-stark);
  padding:10px 0 4px;letter-spacing:.06em;
  font-family:var(--font-zahl);
}
@media print{.sec-version{display:none}}

/* Texteditor im Debugmodus */
.sec-textschalter{
  background:none;border:1px solid #3A5A72;border-radius:6px;
  color:#9FB0C0;font-size:0.6875rem;padding:2px 9px;margin-left:10px;cursor:pointer;
  font-family:var(--font-text);
}
.sec-textschalter:hover{border-color:var(--signal);color:var(--signal)}
.sec-textschalter.an{background:var(--signal);border-color:var(--signal);color:#fff}

body.sec-textedit [contenteditable="true"]{
  outline:1px dashed var(--signal);outline-offset:2px;border-radius:3px;cursor:text;
}
body.sec-textedit [contenteditable="true"]:focus{
  outline:2px solid var(--signal);background:var(--signal-zart);
}
body.sec-textedit [contenteditable="true"].text-geaendert{outline-color:var(--gruen)}
body.sec-textedit [contenteditable="true"].text-fehler{outline-color:var(--rot)}
body.sec-textedit .btn,body.sec-textedit .sec-link{pointer-events:auto}
@media print{.sec-textschalter{display:none}}

.sec-pflicht{color:var(--rot)}

/* Rückmeldung des Texteditors */
#sec-textmeldung{
  position:fixed;left:50%;transform:translateX(-50%);bottom:64px;z-index:80;
  background:var(--tinte);color:#fff;font-size:0.7812rem;
  padding:7px 16px;border-radius:20px;opacity:0;transition:opacity .25s ease;
  pointer-events:none;box-shadow:0 4px 16px rgba(15,44,65,.24);
}
#sec-textmeldung.schlecht{background:var(--rot)}
body.sec-textedit .text-knopf{
  outline:1px dashed var(--signal);outline-offset:2px;cursor:pointer;
}
body.sec-textedit .text-knopf.text-geaendert{outline-color:var(--gruen)}

/* Spaltenbreiten der Eingabetabellen
   ----------------------------------
   Der Browser verteilt überschüssige Breite gleichmäßig auf alle Spalten. Das
   ging zu Lasten der Auswahlfelder: „Objektschutz" stand als „Objektschut" da,
   „Eigene Angebotsposition" abgeschnitten – während daneben ein Zahlenfeld für
   vier Ziffern die halbe Zeile einnahm.

   Deshalb zwei Sorten Spalten. `feld-zahl` bekommt `width:1px`; das ist keine
   echte Breite, sondern die übliche Art, einer Spalte zu sagen: nimm nur, was
   dein Inhalt braucht. Der freigewordene Platz geht an die Spalten mit
   `spalte-weit` und `spalte-breit`, die eine großzügige Mindestbreite haben.

   Die Breiten stehen in ch – ein ch ist die Breite einer Ziffer in der
   laufenden Schrift. „Platz für vier Ziffern" bleibt damit Platz für vier
   Ziffern, auch wenn am Schriftregler gedreht wird. */
.sec-tab th.feld-zahl,
.sec-tab td.feld-zahl{width:1px;white-space:nowrap;padding-left:6px;padding-right:6px}
.sec-tab td.feld-zahl input{width:100%;min-width:0;padding-left:6px;padding-right:6px}

/* Ziffern plus Beiwerk: Nachkommastellen, Trennzeichen und die Pfeilchen
   eines Zahlenfeldes. Deshalb liegt die Breite über der reinen Ziffernzahl. */
.sec-tab td.feld-3 input{width:7ch}
.sec-tab td.feld-4 input{width:8ch}
.sec-tab td.feld-5 input{width:10ch}

.sec-tab th.spalte-weit,
.sec-tab td.spalte-weit{min-width:16rem}
.sec-tab th.spalte-breit,
.sec-tab td.spalte-breit{min-width:22rem}

/* Beträge brauchen Platz für Werte im fünfstelligen Bereich samt
   Nachkommastellen. (`zahl-schmal` stand hier bis 1.52.0 für Menge und Faktor;
   die beiden Spalten nehmen jetzt `feld-zahl` und geben ihren Platz ab.) */
.sec-tab th.zahl-geld,
.sec-tab td.zahl-geld{min-width:8.5rem}
/* Die Betragszelle enthält reinen Text, keine Eingabe – sie darf nicht
   umbrechen, sonst rutscht der Wert aus dem sichtbaren Bereich. */
.sec-tab td.zahl-geld{white-space:nowrap}
/* Auch hier stand die längste Auswahl („Pauschale") nur als „Pausch" da.
   In rem, damit die Spalte mit dem Schriftregler mitwächst – bei einer
   Breite in Pixeln würde sie mit jeder größeren Schrift wieder zu eng. */
.sec-tab th.einheit-spalte,
.sec-tab td.einheit-spalte{min-width:10rem}
.sec-tab td.zahl-geld input{width:100%;padding-left:6px;padding-right:6px}
.sec-tab th.zahl-geld .sec-feldhilfe{
  text-transform:none;letter-spacing:0;font-weight:400;margin-top:1px;
}

/* Einheitenhinweis in Tabellenköpfen */
.sec-tab th .la-einheit{
  display:block;font-size:0.5938rem;font-weight:400;line-height:1.3;
  text-transform:none;letter-spacing:0;color:var(--linie-stark);margin-top:2px;
}

/* Hinweis auf künftige Tarifsätze in der Lohntabelle */
.tarif-kommend{
  display:block;font-size:0.625rem;line-height:1.25;margin-top:3px;
  color:var(--signal-tief);text-align:right;
  font-family:var(--font-zahl);
}

/* Ausnahmen bei Zuschlägen: Grundwert des Bundeslands unter dem Feld */
.sec-tab td.az-zelle{vertical-align:top}
.az-basis{
  display:block;font-size:0.625rem;line-height:1.3;margin-top:3px;
  color:var(--linie-stark);font-family:var(--font-zahl);white-space:nowrap;
}
.az-basis.abweichend{color:var(--signal-tief);font-weight:500}

/* Statusfilter und Statusanzeige */
.sec-filter{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:20px;text-decoration:none;
  border:1px solid var(--linie);background:var(--karte);
  font-size:0.8125rem;color:var(--text-leise);
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.sec-filter:hover{border-color:var(--linie-stark);color:var(--text)}
.sec-filter.an{
  border-color:var(--f,var(--signal));
  background:var(--f,var(--signal));
  color:#fff;font-weight:500;
}
.sec-filter-zahl{
  font-family:var(--font-zahl);font-size:0.7188rem;
  background:var(--papier);color:var(--text-leise);
  padding:1px 7px;border-radius:10px;
}
.sec-filter.an .sec-filter-zahl{background:rgba(255,255,255,.24);color:#fff}

.sec-status{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:500;color:var(--f,var(--text));white-space:nowrap;
}
.sec-status::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--f,var(--text-leise));flex:0 0 auto;
}

/* Kleine Marke hinter einem Eintrag: „fehlt", „ohne Beschreibung".
   Kein Ampelkasten – die Aussage gilt einer Zeile, nicht der ganzen Seite. */
.sec-marke{
  display:inline-block;font-size:0.6875rem;font-weight:600;line-height:1.4;
  padding:1px 8px;border-radius:999px;margin-left:6px;white-space:nowrap;
  background:var(--papier);color:var(--text-leise);border:1px solid var(--linie);
}
/* Zustandsfarben, nicht der Akzent – dieselbe Trennung wie bei den Ampeln:
   Ein Hinweis darf nicht aussehen wie der Hauptknopf, sonst ist er keiner. */
.sec-marke-achtung{background:var(--warn-zart);color:var(--warn);border-color:var(--warn-linie)}
.sec-marke-stopp{background:var(--rot-zart);color:var(--rot);border-color:#EDC0BA}

/* Verwaltung: Einstiegskacheln */
.sec-verw-karte{
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:20px 22px;height:100%;display:flex;flex-direction:column;
  transition:border-color .15s ease;
}
.sec-verw-karte:hover{border-color:var(--linie-stark)}
.sec-verw-titel{
  font-family:var(--font-kopf);font-weight:700;font-size:1.0625rem;letter-spacing:-.015em;
  color:var(--tinte);text-decoration:none;
}
.sec-verw-titel:hover{color:var(--signal-tief)}
.sec-verw-text{font-size:0.8125rem;color:var(--text-leise);line-height:1.6;margin:6px 0 12px}
.sec-verw-werte{
  display:flex;flex-wrap:wrap;gap:16px;font-size:0.7812rem;color:var(--text-leise);
  margin-top:auto;padding-top:10px;border-top:1px solid var(--linie);
}
.sec-verw-werte strong{color:var(--text);font-weight:600;font-size:0.875rem}
.sec-verw-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:0.7812rem}
.sec-verw-links a{color:var(--signal-tief);text-decoration:none}
.sec-verw-links a:hover{text-decoration:underline}

/* Verwaltung rechts absetzen */
.sec-link-rechts{margin-left:auto}

/* Verwaltung: zweistufige Navigation */
.sec-verw-nav{margin-bottom:26px}
.sec-verw-unter{
  display:flex;flex-wrap:wrap;gap:2px;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--linie);
}
.sec-unterpunkt{
  padding:5px 12px;border-radius:7px;text-decoration:none;
  font-size:0.8125rem;color:var(--text-leise);
  transition:background .15s ease,color .15s ease;
}
.sec-unterpunkt:hover{background:var(--papier);color:var(--text)}
.sec-unterpunkt.an{background:var(--signal-zart);color:var(--signal-tief);font-weight:500}

/* Trenner auf der Anmeldeseite */
.sec-anmeldung-trenner{
  display:flex;align-items:center;gap:12px;margin:22px 0 18px;
  color:var(--text-leise);font-size:0.7812rem;
}
.sec-anmeldung-trenner::before,
.sec-anmeldung-trenner::after{
  content:"";flex:1;height:1px;background:var(--linie);
}

/* Wunschadresse im Portal */
.sec-adresse{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.sec-adresse input{max-width:260px;border-top-right-radius:0;border-bottom-right-radius:0}
.sec-adresse-rest{
  padding:9px 12px;border:1px solid var(--linie);border-left:0;
  border-radius:0 10px 10px 0;background:var(--papier);
  font-family:var(--font-zahl);font-size:0.8125rem;color:var(--text-leise);white-space:nowrap;
}
.sec-adresse-stand{
  margin-left:12px;font-size:0.7812rem;font-weight:500;
  padding:3px 11px;border-radius:20px;
}
.sec-adresse-stand.pruefe{background:var(--papier);color:var(--text-leise)}
.sec-adresse-stand.frei{background:var(--gruen-zart);color:var(--gruen)}
.sec-adresse-stand.belegt{background:var(--rot-zart);color:var(--rot)}
.sec-adresse-vorschau{
  margin-top:10px;padding:12px 14px;border-radius:10px;
  background:var(--signal-zart);border:1px solid var(--linie);
}
.sec-adresse-vorschau .sec-mono{font-size:0.8125rem;color:var(--signal-tief);word-break:break-all}

/* Aktueller Punkt in der Kopfzeile */
.sec-top .sec-link.an{color:#fff;position:relative}
.sec-top .sec-link.an::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;
  height:2px;background:var(--signal);border-radius:1px;
}

/* Welcher Bereich ist das? Kennzeichen neben der Wortmarke */
.sec-mandant{
  margin-left:12px;padding:3px 11px;border-radius:20px;
  background:rgba(72,136,244,.18);color:#9FC4FF;
  font-family:var(--font-zahl);font-size:0.7188rem;letter-spacing:.01em;
  white-space:nowrap;
}
.sec-mandant-eigen{background:rgba(255,255,255,.1);color:#9FB0C0}

/* ---- Feiertagsmatrix (1.67.0) ----------------------------------------
   Zwanzig Spalten passen auf keinen Bildschirm. Die Tabelle darf deshalb
   als einzige quer laufen – aber nur sie, nicht die Seite: Sonst wandert
   beim Blättern der ganze Text mit, und man sucht die Überschrift wieder.
   Die erste Spalte bleibt stehen, sonst weiß man beim vierten Feiertag
   nicht mehr, in welchem Bundesland man ist. */
.sec-tab-breit{overflow-x:auto;overflow-y:visible}
.sec-feiertage{min-width:1100px}
.sec-feiertage th,.sec-feiertage td{padding:8px 6px;border-bottom:1px solid var(--linie)}
.sec-feiertage thead th{vertical-align:bottom;font-size:0.75rem;line-height:1.25;font-weight:600}
.sec-ft-ecke,.sec-ft-land{position:sticky;left:0;background:var(--flaeche);text-align:left;
  white-space:nowrap;z-index:1;box-shadow:1px 0 0 var(--linie)}
.sec-ft-kuerzel{display:inline-block;min-width:2.1em;font-weight:700;color:var(--signal)}
.sec-ft-regel{font-weight:400;color:var(--text-leise);font-size:0.6875rem;margin-top:2px}
.sec-ft-termin{font-weight:400;color:var(--text-leise);font-size:0.6875rem;
  font-family:'IBM Plex Mono',monospace}
.sec-ft-regional{background:var(--signal-zart)}
.sec-ft-summe{color:var(--text-leise)}
.sec-feiertage tbody tr:hover td,.sec-feiertage tbody tr:hover .sec-ft-land{background:var(--signal-zart)}
/* Der erkannte Feiertag unter dem Schichtdatum. Leise, aber lesbar: Er
   erklärt einen Haken, den das Programm gesetzt hat. */
.sec-ft-hinweis{font-size:0.6875rem;color:var(--signal-tief);margin-top:2px;line-height:1.2}
/* Lohnspalten im Schichtplan (1.68.0). Schmal halten: Die beiden
   Feiertagsspalten sind dafür weggefallen, aber Kästchen sind schmaler als
   Zahlenfelder, und die Tabelle war schon vorher gut gefüllt. */
.feld-lohn{min-width:5rem;max-width:6.5rem}
.sec-tab thead th.feld-lohn{white-space:normal}

/* Bootstrap bringt .table-responsive mit. Kommt Bootstrap nicht an – gesperrtes
   Netz, Ausfall des Anbieters –, lief die Tabelle bisher aus dem Bild heraus,
   und die letzte Spalte war nicht mehr erreichbar. Derselbe Befund wie 1.57.0,
   nur an anderer Stelle: Was ohne den Anbieter kaputtgeht, gehört ins eigene
   Blatt. */
.table-responsive{overflow-x:auto}
/* Eine Zeile mit eigenem Lohn rechnet nicht nach Tarif. Das muss man beim
   Überfliegen sehen, ohne jede Zelle zu lesen. */
.sec-lohn-eigen [data-sf="lohn"]{border-color:var(--signal);background:var(--signal-zart)}
.sec-lohn-eigen [data-lohn-tarif]{color:var(--text-leise);text-decoration:line-through}

/* Preis je Schicht, nach Zeitkategorien aufgeteilt (1.69.0).
   Die Schichtzeile trägt, die Kategoriezeilen erklären. Deshalb tritt die
   Aufteilung optisch zurück – sonst sucht man beim Überfliegen die Schichten
   zwischen ihren eigenen Bestandteilen. */
.sec-schichtpreis .sec-sp-schicht > td{border-top:1px solid var(--linie-stark);padding-top:10px}
.sec-schichtpreis .sec-sp-schicht > td:first-child{font-weight:600}
.sec-schichtpreis .sec-sp-teil > td{border-top:0;color:var(--text-leise);font-size:0.8125rem}
.sec-schichtpreis .sec-sp-teil > td:first-child{padding-left:1.5rem}
/* Der Mischsatz bleibt lesbar, tritt aber zurück: Er ist eine Auskunft, kein
   Satz, den man aufruft. */
.sec-sp-mittel{color:var(--text-leise)}
.sec-sp-null{color:var(--linie-stark)}

/* Das Ø vor einem gemittelten Satz (1.71.0). Es steht direkt vor der Zahl und
   darf sie nicht überstimmen: Wer die Spalte überfliegt, soll die Zahl lesen
   und das Zeichen bemerken, nicht umgekehrt. */
.sec-mittel{color:var(--text-leise);font-weight:400;cursor:help}
/* Das Zeichen kostet zwei Zeichen Breite. Ohne diese Zeile rutscht in der
   engsten Spalte das €-Zeichen in die zweite Zeile und der Satz sieht aus wie
   zwei Zahlen. */
.sec-tab tr[data-gemischt="1"] td.zahl{white-space:nowrap}

/* Preis je Zeitkategorie: die Tätigkeiten darunter (1.72.0).
   Dieselbe Ordnung wie in „Preis je Schicht": Die Summenzeile trägt, die
   Tätigkeiten erklären – sonst sucht man beim Überfliegen die Kategorien
   zwischen ihren eigenen Bestandteilen. */
.sec-st-auf{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.sec-st-auf:hover .sec-st-pfeil{color:var(--text)}
.sec-st-pfeil{color:var(--text-leise);display:inline-block;width:1em}
.sec-st-zahl{display:block;margin-left:1em;color:var(--text-leise);font-size:0.8125rem}
/* `display:block` schlaegt das eingebaute [hidden] des Browsers. Ohne diese
   Zeile stuenden beide Beschriftungen untereinander – einmal im Bild gesehen
   genuegt. */
.sec-st-zahl[hidden]{display:none}
/* Die erste Spalte trägt jetzt Etikett, Pfeil und Anzahl. Ohne Mindestbreite
   bricht „Werktag Tag" auf drei Zeilen um und die Tabelle sieht zerrissen aus –
   im Browser nachgesehen, nicht geraten. */
.sec-stufen td:first-child,.sec-stufen th:first-child{min-width:12rem}
.sec-st-auf,.sec-st-zahl{white-space:nowrap}

/* Der Schalter zwischen den beiden Ansichten (1.74.0). Zwei Knöpfe, aneinander
   gesetzt – der gewählte tritt hervor. Er steht im Kartenkopf rechts, weil er
   zur Tabelle gehört und nicht zur Überschrift. */
/* Nur dieser Kartenkopf – eine Regel ohne Eingrenzung träfe jede Karte im
   Programm, und die Überschriften stünden überall anders. */
[data-kennung="preis-stufen"] .sec-karte-kopf{justify-content:space-between;flex-wrap:wrap;
  align-items:center}
.sec-ansicht{display:inline-flex;border:1px solid var(--linie-stark);border-radius:6px;overflow:hidden}
/* `display:inline-flex` schlägt das eingebaute [hidden] des Browsers. Ohne
   diese Zeile stand der Schalter ohne JavaScript sichtbar da und tat nichts –
   im Bild gefunden, nicht am Quelltext. */
.sec-ansicht[hidden]{display:none}
.sec-ansicht-knopf{background:none;border:0;padding:4px 12px;font:inherit;font-size:0.8125rem;
  color:var(--text-leise);cursor:pointer}
.sec-ansicht-knopf + .sec-ansicht-knopf{border-left:1px solid var(--linie-stark)}
.sec-ansicht-knopf[aria-pressed="true"]{background:var(--flaeche-tief,#eef2f7);color:var(--text);font-weight:600}
.sec-tab .sec-st-teil > td{border-top:0;color:var(--text-leise);font-size:0.8125rem}
.sec-tab .sec-st-teil > td:first-child{padding-left:2em}

/* Vereinbarter Stundensatz (1.70.0).
   Zwei Zeilen zum Ankreuzen statt Karten: Die Wahl ist eine Kleinigkeit
   gegenüber der Zahl daneben, und sie soll nicht wie die Hauptsache aussehen. */
.sec-wahl-schmal{display:flex;flex-direction:column;gap:4px}
.sec-wahl-zeile{display:flex;align-items:center;gap:8px;font-size:0.875rem;cursor:pointer}
/* Die Zahl, die getroffen werden sollte, wird hervorgehoben – sonst sucht man
   zwischen zwei Sätzen den, um den es gerade geht. */
.sec-ziel-treffer{font-weight:700;color:var(--signal-tief)}

/* ==================================================================
   Schnellrechner (1.76.0)
   ==================================================================
   Eine dunkle Tafel auf hellem Grund. Das ist Absicht: Sie wird
   angesteuert, nicht gelesen, und soll sich vom Rest der Seite abheben,
   ohne aus der Farbwelt auszubrechen – das Schieferblau ist dasselbe wie
   in der Kopfleiste. Die eigenen Namen (--sr-…) stehen dafür, dass die
   Tafel auch auf der alleinstehenden Seite gilt, wo es das übrige
   Stylesheet nicht unbedingt gibt.

   Zustandsfarben sind heller als im Programm: Auf dunklem Grund braucht
   Grün und Rot mehr Helligkeit, sonst liest man sie nicht. */
.sec-sr{
  --sr-oben:#12314A; --sr-unten:#0C2235;
  --sr-text:#EDF4FB; --sr-leise:#9EB7CC; --sr-linie:rgba(255,255,255,.13);
  --sr-feld:rgba(255,255,255,.07);
  --sr-signal:#6FA5FF; --sr-gruen:#4FCB95; --sr-rot:#F08A7B; --sr-warn:#E8B860;
  --sr-b1:#8FB0C9; --sr-b2:#6D90AC; --sr-b3:#4F718D; --sr-b4:#37576F;
  background:linear-gradient(160deg,var(--sr-oben),var(--sr-unten));
  color:var(--sr-text); border-radius:16px;
  box-shadow:0 14px 34px -18px rgba(9,28,43,.7), 0 2px 6px rgba(9,28,43,.16);
  padding:18px 20px 20px; overflow:hidden;
}
.sec-sr-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sec-sr-kopf h2{
  font-family:var(--font-kopf);font-weight:800;font-size:1.28rem;margin:0;
  letter-spacing:-.01em;flex:none;color:var(--sr-text);
}
.sec-sr-waehler{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.sec-sr-waehler select{
  font-family:var(--font-text);font-size:.82rem;color:var(--sr-text);
  background:var(--sr-feld);border:1px solid var(--sr-linie);
  border-radius:99px;padding:6px 11px;max-width:100%;
}
.sec-sr-waehler select option{background:#0C2235;color:#EDF4FB}
.sec-sr :focus-visible{outline:2px solid var(--sr-signal);outline-offset:2px}

.sec-sr-buehne{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.sec-sr-k{
  font-family:var(--font-zahl);font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sr-leise);
}
.sec-sr-v{
  font-family:var(--font-zahl);font-variant-numeric:tabular-nums;font-weight:600;
  font-size:clamp(2.3rem,8vw,3.2rem);line-height:1;letter-spacing:-.02em;
}
.sec-sr-eur{font-size:.44em;font-weight:500;color:var(--sr-leise);margin-left:.14em}
.sec-sr-gewinn{margin-left:auto;text-align:right}
.sec-sr-v2{
  font-family:var(--font-zahl);font-variant-numeric:tabular-nums;font-weight:600;
  font-size:clamp(1.5rem,5vw,2rem);line-height:1.1;
}
.sec-sr-z{font-size:.72rem;color:var(--sr-leise)}
.sec-sr-vl{
  font-family:var(--font-zahl);font-variant-numeric:tabular-nums;font-weight:600;
  font-size:clamp(1.5rem,5vw,2rem);line-height:1.1;color:var(--sr-text);white-space:nowrap;
}
/* Der Pfeil sitzt auf der Grundlinie der beiden Zahlen, nicht mittig im Block –
   sonst schwebt er zwischen ihnen statt sie zu verbinden. */
.sec-sr-pfeilzu{color:var(--sr-leise);font-size:1.3rem;line-height:1;
  padding-bottom:.28em;align-self:flex-end}
.sec-sr-hinweis{margin:10px 0 0;font-size:.72rem;color:var(--sr-leise);line-height:1.45}

.sec-sr-balken{
  position:relative;display:flex;height:13px;border-radius:99px;overflow:hidden;
  margin:16px 0 8px;background:var(--sr-feld);
}
.sec-sr-balken > div{min-width:0}
.sec-sr-grenze{
  position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--sr-text);
  border-radius:2px;pointer-events:none;box-shadow:0 0 0 2px rgba(12,34,53,.55);
}
.sec-sr-grenze[hidden]{display:none}
.sec-sr-legende{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.72rem;color:var(--sr-leise)}
.sec-sr-legende span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.sec-sr-legende i{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.sec-sr-legende b{font-family:var(--font-zahl);color:var(--sr-text);font-weight:500}

.sec-sr-hebel{margin-top:18px;display:flex;flex-direction:column;gap:22px}
.sec-sr-zeile{display:flex;align-items:baseline;gap:10px;margin-bottom:2px}
.sec-sr-name{font-weight:700;font-size:.82rem}
.sec-sr-wert{margin-left:auto;font-family:var(--font-zahl);
  font-variant-numeric:tabular-nums;font-size:.86rem}
.sec-sr-zurueck{
  font-family:var(--font-text);font-size:.7rem;color:var(--sr-leise);background:none;
  border:1px solid var(--sr-linie);border-radius:99px;padding:2px 9px;cursor:pointer;
}
.sec-sr-zurueck:hover{color:var(--sr-text);border-color:var(--sr-text)}
.sec-sr-zurueck[hidden]{display:none}
.sec-sr-spur{position:relative;height:28px}
.sec-sr input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;
  margin:0;display:block;cursor:ew-resize;position:relative;z-index:2;
}
.sec-sr input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:transparent}
.sec-sr input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:transparent}
.sec-sr input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:#fff;border:4px solid var(--sr-griff,var(--sr-signal));margin-top:-9px;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.sec-sr input[type=range]::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:#fff;
  border:4px solid var(--sr-griff,var(--sr-signal));box-shadow:0 2px 8px rgba(0,0,0,.45);
}
/* Die Spur wird selbst gezeichnet und füllt sich von der Marke aus in die
   Richtung, in die man zieht. Damit sagt schon der Balken, ob man über oder
   unter dem kalkulierten Satz liegt – bevor man die Zahl liest. */
.sec-sr-gleis{position:absolute;left:0;right:0;top:11px;height:6px;border-radius:99px;
  background:var(--sr-feld);z-index:0}
.sec-sr-fuell{position:absolute;top:11px;height:6px;border-radius:99px;z-index:1;
  background:var(--sr-fuellfarbe,var(--sr-signal))}
.sec-sr-nulle{position:absolute;top:6px;height:16px;width:2px;background:var(--sr-linie);
  z-index:1;transform:translateX(-50%)}
.sec-sr-nulle::after{
  content:attr(data-text);position:absolute;top:18px;left:50%;transform:translateX(-50%);
  font-family:var(--font-zahl);font-size:.6rem;color:var(--sr-leise);white-space:nowrap;
}
.sec-sr-skala{display:flex;justify-content:space-between;font-family:var(--font-zahl);
  font-size:.65rem;color:var(--sr-leise);margin-top:12px}

.sec-sr-ampel{
  display:flex;gap:9px;align-items:center;margin-top:16px;padding:9px 13px;
  border-radius:10px;font-size:.82rem;background:var(--sr-feld);
  border-left:3px solid var(--sr-ampelfarbe,var(--sr-gruen));
}
.sec-sr-ampel b{font-weight:700}

/* ---- Der ausklappbare Unterbau, wieder auf hellem Grund ---- */
.sec-sr-mehr{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.sec-sr-klapp{background:var(--karte);border:1px solid var(--linie);border-radius:10px}
.sec-sr-klapp summary{
  list-style:none;cursor:pointer;padding:11px 15px;font-family:var(--font-kopf);
  font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:9px;color:var(--text);
}
.sec-sr-klapp summary::-webkit-details-marker{display:none}
.sec-sr-pfeil{color:var(--text-leise);font-size:.8rem;display:inline-block;transition:transform .16s ease}
.sec-sr-klapp[open] .sec-sr-pfeil{transform:rotate(90deg)}
.sec-sr-zusatz{margin-left:auto;font-family:var(--font-zahl);font-size:.72rem;color:var(--text-leise)}
.sec-sr-inhalt{padding:0 15px 15px}
.sec-sr-spalten{display:grid;grid-template-columns:1.15fr 1fr;gap:20px}
@media (max-width:640px){.sec-sr-spalten{grid-template-columns:1fr}}
.sec-sr-tab{font-size:.84rem}
.sec-sr-tab caption{caption-side:top;text-align:left;font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-leise);padding-bottom:6px;font-family:var(--font-zahl)}
.sec-sr-tab .sec-sr-leise td{color:var(--text-leise)}
.sec-sr-tab .sec-sr-summe td{font-weight:700}
.sec-sr-fuss{margin:10px 0 0;font-size:.82rem;color:var(--text-leise)}

.sec-sr-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.sec-sr-felder label{display:block;font-size:.84rem;font-weight:700}
.sec-sr-feldhilfe{display:block;font-size:.74rem;color:var(--text-leise);font-weight:400;margin:1px 0 5px}
.sec-sr-eingabe{display:flex;align-items:stretch;border:1px solid var(--linie-stark);
  border-radius:var(--radius-klein);overflow:hidden;background:var(--karte)}
.sec-sr-eingabe input{
  flex:1;min-width:0;border:0;padding:7px 9px;font-family:var(--font-zahl);
  font-size:.9rem;text-align:right;color:var(--text);background:transparent;
}
.sec-sr-eingabe i{display:flex;align-items:center;padding:0 9px;font-style:normal;
  font-size:.82rem;color:var(--text-leise);background:var(--papier);border-left:1px solid var(--linie)}

@media (prefers-reduced-motion:no-preference){
  .sec-sr-v,.sec-sr-v2{transition:color .16s ease}
  .sec-sr-balken > div,.sec-sr-fuell{transition:flex-basis .1s linear,width .1s linear,background-color .16s ease}
}

/* Die Feiertage des gewählten Bundeslands (1.77.0). Zwölf Namen sind eine
   Liste und keine Tabelle – sie fließen, damit die Karte nicht in die Länge
   wächst, sobald jemand ein Bundesland wählt. */
.sec-feiertagsliste{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;
  padding:9px 12px;border:1px solid var(--linie);border-radius:var(--radius-klein);
  background:var(--papier);font-size:.8125rem}
.sec-feiertagsliste[hidden]{display:none}
.sec-feiertagsjahr{font-family:var(--font-zahl);font-size:.7rem;letter-spacing:.1em;
  color:var(--text-leise);margin-right:4px}
.sec-feiertag{white-space:nowrap;color:var(--text-leise)}
.sec-feiertag b{font-family:var(--font-zahl);font-weight:500;color:var(--text)}

/* ================================================================
   Der Fuhrpark (1.78.0)
   ================================================================ */

/* Eine Zeile je Auto: Name und Kilometersatz auf einer Höhe, darunter leise
   Kennzeichen und Antrieb. Der Satz steht rechts, weil man Fahrzeuge danach
   vergleicht – untereinander gelesen fällt der Unterschied sofort auf. */
.sec-fz-zeile{display:block;padding:7px 9px;margin:0 -9px;border-radius:var(--radius-klein);
  color:var(--text);text-decoration:none;border:1px solid transparent}
.sec-fz-zeile:hover{background:var(--papier)}
.sec-fz-zeile.sec-fz-aktiv{background:var(--papier);border-color:var(--linie)}
.sec-fz-zeile.sec-fz-aktiv .sec-fz-name{font-weight:600;color:var(--signal-tief)}

/* Der Kilometersatz, ausgeschrieben. Wer 0,344 € sieht und nicht weiß, woraus
   sie entsteht, kann sie nicht beurteilen – deshalb steht die Rechnung daneben
   und nicht nur ihr Ergebnis. */
.sec-fz-satz{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;
  justify-content:space-between;padding:11px 14px;border:1px solid var(--linie);
  border-radius:var(--radius-klein);background:var(--papier)}
.sec-fz-rechnung{font-size:.8125rem;color:var(--text-leise)}
.sec-fz-summe{font-size:1.35rem;font-weight:600;color:var(--text);white-space:nowrap}

/* Die fünf Zahlen von Hand. Verborgen, sobald ein Fahrzeug gewählt ist.
   Das [hidden] steht ausdrücklich daneben: Dreimal in Folge – bei .sec-st-zahl,
   .sec-ansicht und dem Schnellrechner – hat eine eigene display-Regel das
   hidden-Attribut geschlagen, und dreimal war es nur im Bildschirmfoto zu
   sehen, nie im Quelltext. */
.sec-fz-hand{display:block}
.sec-fz-hand[hidden]{display:none}
/* Kein Ergebnis, sondern eine Auskunft: „aus den Werten unten" ist ein Satz und
   keine Zahl und wird deshalb nicht im Zahlengrad gesetzt. */
.sec-fz-summe.sec-fz-leise{font-size:.8125rem;font-weight:400;color:var(--text-leise)}

/* ================================================================
   Die Einsatztage des Revierdienstes (1.79.0)
   ================================================================

   Zwei Zeilen Kästchen über denselben sieben Spalten:
     „Wird gefahren"    – an diesem Wochentag fährt der Wagen.
     „auch am Feiertag" – und auch dann, wenn der Tag ein Feiertag ist.

   Die zweite Zeile ist ein Zusatz zur ersten, kein eigener Einsatz. Wer
   samstags nicht fährt, fährt auch an einem Feiertagssamstag nicht – das
   Kästchen ist dort gesperrt und nicht nur wirkungslos. */
.sec-tagegitter{display:grid;grid-template-columns:max-content repeat(7,52px);
  gap:5px 6px;align-items:center;margin:4px 0 2px;justify-content:start}
.sec-tg-name{font-size:.8125rem;color:var(--text-leise);padding-right:10px;
  white-space:nowrap;justify-self:start}
.sec-tg-feld{position:relative;display:block;margin:0}
.sec-tg-feld input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.sec-tg-feld span{display:block;text-align:center;padding:7px 4px;
  font-family:var(--font-zahl);font-size:.8125rem;border-radius:var(--radius-klein);
  border:1px solid var(--linie-stark);background:var(--karte);color:var(--text-leise);
  cursor:pointer;user-select:none}
.sec-tg-feld input:checked + span{background:var(--signal-zart);border-color:var(--signal-tief);
  color:var(--signal-tief);font-weight:600}
.sec-tg-fei input:checked + span{background:var(--rot-zart);border-color:var(--rot);color:var(--rot)}
.sec-tg-feld input:focus-visible + span{outline:2px solid var(--signal-tief);outline-offset:2px}
.sec-tg-feld input:disabled + span{opacity:.38;cursor:not-allowed}

/* Auf dem Telefon ist neben sieben Tagen kein Platz für eine Beschriftung.
   Sie rückt über das Gitter, statt die Sonntagsspalte aus dem Bild zu schieben. */
@media (max-width:640px){
  .sec-tagegitter{grid-template-columns:repeat(7,1fr)}
  .sec-tg-name{grid-column:1/-1;padding-right:0;margin-top:6px}
  .sec-tg-name:first-child{margin-top:0}
}

/* ================================================================
   Eine Kontrolle, Posten für Posten (1.79.0)
   ================================================================

   Links die eine Kontrolle, rechts die Leiter: mal Kontrollen je Tag, mal
   Einsatztage, geteilt durch zwölf. Die Leiter macht sichtbar, dass alles
   daneben eine Multiplikation ist und keine neue Rechnung. */
.sec-kontrolle{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px}
.sec-posten-titel{font-family:var(--font-zahl);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-leise);margin:14px 0 2px}
.sec-posten-titel:first-child{margin-top:0}
.sec-posten-zeile{display:grid;grid-template-columns:1fr auto auto auto;gap:4px 12px;
  align-items:baseline;padding:5px 0;font-size:.9375rem}
.sec-posten-zeile > :nth-child(2),.sec-posten-zeile > :nth-child(3){
  font-family:var(--font-zahl);font-size:.8125rem;color:var(--text-leise);text-align:right}
.sec-posten-zeile > :nth-child(4){font-family:var(--font-zahl);text-align:right;
  min-width:84px;font-weight:500}
.sec-posten-gruppe{border-top:1px solid var(--linie);margin-top:4px;padding-top:8px;font-weight:700}
.sec-posten-ergebnis{border-top:2px solid var(--linie-stark);margin-top:6px;padding-top:9px;
  font-weight:700;font-size:1.0625rem}
.sec-posten-ergebnis > :nth-child(4){color:var(--signal-tief);font-size:1.2rem}

.sec-leiter-zeile{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--linie);font-size:.9375rem}
.sec-leiter-zeile span:last-child{font-family:var(--font-zahl);font-weight:500;
  text-align:right;white-space:nowrap}
.sec-leiter-zeile small{display:block;font-size:.8125rem;color:var(--text-leise)}
.sec-leiter-stark{background:var(--signal-zart);border-bottom:0;margin:6px -10px 0;
  padding:10px;border-radius:var(--radius-klein)}
.sec-leiter-stark span:last-child{color:var(--signal-tief);font-size:1.15rem;font-weight:600}

@media (max-width:820px){
  .sec-kontrolle{grid-template-columns:1fr}
}