/* Slyke – Website. Nur CSS, kein JavaScript, keine fremden Schriften oder Dienste.

   Aussehen wie die Prüfoberfläche (docs/OBERFLAECHE.md, „Aussehen“): sehr seriös, ruhig, vertraut wie eine
   Warenwirtschaft. Dunkelblau nur für die Kopfzeile und EINEN Haupt-Knopf je Seite (dazu Verweise im Text).
   Tabellen und feine Linien statt Kacheln, 4 px Rundung, keine Schatten, keine Verläufe, keine Animationen.
   Status immer mit Farbe, Zeichen und Wort – dieselben Zeichen wie in der Prüfoberfläche.

   Schrift: Fließtext in der Standardschrift des Geräts, wie in der Prüfoberfläche. Überschriften in einer
   klassischen Serifenschrift, die schon auf dem Gerät ist (Charter auf Mac und iPhone, Sitka oder Cambria
   unter Windows, sonst Georgia). Geladen wird keine Schrift. */

:root {
  color-scheme: light;
  --blau: #1B3A5C;       /* Hauptfarbe */
  --blau-tief: #13304D;  /* Haupt-Knopf, wenn die Maus darauf steht */
  --hell: #E8EEF4;
  --text: #1A2530;
  --flaeche: #F4F5F7;
  --linie: #C9D1DA;
  --grau: #56616D;       /* leise Schrift; Rand von Knöpfen und Eingabefeldern */
  --gruen: #1E6B3A;      /* Status wie in der Prüfoberfläche */
  --gelb: #8A5A00;
  --rot: #A4262C;
  --rund: 4px;
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --randspalte: 200px;   /* linke Spalte mit dem Namen des Abschnitts */
  --spaltenabstand: 56px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--text); font: 17px/1.6 var(--sans); }
img, svg { display: block; max-width: 100%; }
a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--text); line-height: 1.15; }
h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
h1 em, h2 em { font-style: italic; }
h1, h2, h3 { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
p, figure, dl, dd { margin: 0; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
th { font-weight: 600; }
thead th { background: var(--hell); font-size: .9rem; }

.rahmen { width: min(1160px, 100% - 48px); margin-inline: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.klein { font-size: .9rem; color: var(--grau); }
.abstand-oben { margin-top: 24px; }
.springen {
  position: absolute; left: 16px; top: -100px; z-index: 50;
  padding: 8px 12px; background: #fff; color: var(--blau); border: 1px solid var(--blau); border-radius: var(--rund);
}
.springen:focus { top: 12px; }

/* ---------- Kopfzeile: dunkelblau wie in der Prüfoberfläche ---------- */
.kopf { background: var(--blau); color: #fff; }
.kopf-innen { display: flex; align-items: center; gap: 10px 32px; min-height: 64px; }
.marke {
  display: inline-flex; align-items: center; gap: 11px;
  color: #fff; text-decoration: none; font: 400 1.55rem/1 var(--serif); letter-spacing: .01em;
}
.marke svg { width: 30px; height: 30px; flex: none; }
.hauptnavi { display: flex; flex-wrap: wrap; gap: 4px 26px; margin-left: auto; }
.hauptnavi a { padding: 3px 0; color: #fff; text-decoration: none; font-size: .95rem; border-bottom: 1px solid transparent; }
.hauptnavi a:hover, .hauptnavi a[aria-current] { border-bottom-color: #fff; }
.kopf-knopf {
  padding: 6px 13px; color: #fff; text-decoration: none; white-space: nowrap;
  font-size: .95rem; font-weight: 600; border: 1px solid #fff; border-radius: var(--rund);
}
.kopf-knopf:hover, .kopf-knopf[aria-current] { background: #fff; color: var(--blau); }
.kopf :focus-visible { outline-color: #fff; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; font: 600 1rem/1.25 var(--sans); color: var(--text); text-align: center; text-decoration: none;
  background: #fff; border: 1px solid var(--grau); border-radius: var(--rund); cursor: pointer;
}
.knopf:hover { background: var(--hell); }
.knopf.haupt { color: #fff; background: var(--blau); border-color: var(--blau); }
.knopf.haupt:hover { background: var(--blau-tief); border-color: var(--blau-tief); }
.aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Status: Farbe + Zeichen + Wort ---------- */
.status { display: inline-flex; align-items: flex-start; gap: 5px; font-weight: 600; white-space: nowrap; }
/* Das Zeichen steht mittig neben der ersten Zeile, auch wenn das Wort umbricht */
.status svg {
  width: 16px; height: 16px; flex: none; margin-top: .3em; margin-top: calc((1lh - 16px) / 2);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.status-ok { color: var(--gruen); }
.status-unsicher { color: var(--gelb); }
.status-fehler { color: var(--rot); }
.status-leer { color: var(--grau); font-weight: 400; }
.regelnr { font-weight: 600; color: var(--text); }
.nebenzeile { display: block; margin-top: 2px; font-size: .88rem; font-weight: 400; color: var(--grau); }

/* ---------- Bühne: Überschrift, darunter der Bestelleingang als Tabelle ---------- */
.buehne { padding: 72px 0 64px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.buehne-kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px 64px; align-items: end; }
/* Größe so, dass „Automatisch im Auftrag.“ am breiten Bildschirm in eine Zeile passt */
.buehne h1 { font-size: clamp(2.5rem, calc(5vw - .25rem), 3.75rem); line-height: 1.05; letter-spacing: -.012em; }
.buehne h1 em, .seitenkopf h1 em { display: block; }
.einleitung { font-size: 1.15rem; line-height: 1.55; color: var(--grau); max-width: 36em; }

.eingang { margin-top: 56px; background: #fff; border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; }
.eingang figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px;
  padding: 12px 16px; border-bottom: 1px solid var(--linie);
}
.eingang figcaption b { font-weight: 600; }
.eingang figcaption span { font-size: .85rem; color: var(--grau); }
.eingang td { padding-block: 12px; }
.eingang .zeit { width: 1%; white-space: nowrap; color: var(--grau); }
.eingang .firma { font-weight: 600; }
.eingang .betrag { width: 1%; text-align: right; white-space: nowrap; }
.eingang tbody tr:last-child td { border-bottom: 0; }
.eingang tfoot td { padding-block: 10px; font-size: .88rem; color: var(--grau); background: var(--flaeche); border-top: 1px solid var(--linie); border-bottom: 0; }

.kurzdaten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 40px; }
.kurzdaten div { padding-top: 14px; border-top: 1px solid var(--linie); }
.kurzdaten dt { font-size: .85rem; color: var(--grau); }
.kurzdaten dd { margin-top: 2px; font-weight: 600; }

/* ---------- Abschnitte: links der Name, rechts Überschrift und Inhalt ---------- */
.abschnitt { padding-top: 88px; }
.abschnitt-kopf {
  display: grid; grid-template-columns: var(--randspalte) minmax(0, 1fr); column-gap: var(--spaltenabstand);
  border-top: 1px solid var(--linie);
}
/* Der kurze dicke Strich liegt genau auf der feinen Linie über dem Abschnitt */
.rubrik { margin-top: -2px; padding-top: 16px; border-top: 3px solid var(--text); font-size: .95rem; font-weight: 600; }
.abschnitt-kopf > div { padding-top: 14px; }
.abschnitt-kopf h2 { max-width: 21em; font-size: clamp(1.85rem, 3.2vw, 2.6rem); line-height: 1.12; letter-spacing: -.008em; }
.abschnitt-kopf > div > p { max-width: 38em; margin-top: 16px; font-size: 1.1rem; color: var(--grau); }
.inhalt { margin: 44px 0 0 calc(var(--randspalte) + var(--spaltenabstand)); }

/* Spalten mit einer feinen Linie darüber (keine Kästen) */
.spalten { --anzahl: 3; display: grid; grid-template-columns: repeat(var(--anzahl), minmax(0, 1fr)); gap: 0 36px; padding: 0; list-style: none; }
ol.spalten { margin: 0; }
.spalten.zwei { --anzahl: 2; }
.spalten.vier { --anzahl: 4; }
.punkt { padding: 18px 0 30px; border-top: 1px solid var(--linie); }
.punkt p { margin-top: 8px; }
.abstand { margin-top: 40px; }

/* Ablauf: nummerierte Zeilen */
.schritte { margin: 0; padding: 0; list-style: none; counter-reset: schritt; border-bottom: 1px solid var(--linie); }
.schritte li {
  display: grid; grid-template-columns: 64px minmax(0, 15rem) minmax(0, 1fr); gap: 6px 28px;
  padding: 22px 0 24px; border-top: 1px solid var(--linie); counter-increment: schritt;
}
.schritte li::before { content: counter(schritt); font: 400 2.2rem/1 var(--serif); color: var(--grau); }
.formate { margin-top: 24px; color: var(--grau); }
.formate b { margin-right: 6px; font-weight: 600; color: var(--text); }

/* Tabellen im Rahmen (Prüfregeln, Preise) */
.tabelle { overflow-x: auto; background: #fff; border: 1px solid var(--linie); border-radius: var(--rund); }
.tabelle tbody tr:last-child > * { border-bottom: 0; }
/* Spaltenbreiten nur an den Spaltenköpfen – so lässt sich die Tabelle am Handy leicht umbauen */
.regeln thead .spalte-nr { width: 8.5rem; }
.regeln thead th:nth-child(2) { width: 16rem; }
.regeln .spalte-nr { white-space: nowrap; color: var(--grau); }
.tabellen-notiz { margin-top: 14px; font-size: .92rem; color: var(--grau); }

/* Prüfoberfläche als Beispielbild: Original links, erkannte Daten rechts – wie in oberflaeche/ */
.ansicht { overflow: hidden; font-size: .84rem; line-height: 1.45; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); }
.ansicht-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 8px 14px; color: #fff; background: var(--blau); }
.ansicht-kopf b { margin-right: auto; font-size: .92rem; font-weight: 600; }
.ansicht-titel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 14px 14px 0; }
.ansicht-titel b { font-size: 1.05rem; font-weight: 600; }
.ansicht-inhalt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; padding: 12px 14px 14px; }
.ansicht-original { padding: 16px 18px; background: #fff; border: 1px solid var(--linie); border-radius: var(--rund); }
.brief-firma, .brief-titel { font-weight: 700; }
.brief-titel { margin-top: 14px; }
.brief-leise { font-size: .78rem; color: var(--grau); }
.brief-gruss { margin-top: 14px; font-size: .78rem; color: var(--grau); }
.ansicht-original table { margin-top: 10px; font-size: .8rem; }
.ansicht-original th, .ansicht-original td { padding: 4px 8px 4px 0; background: none; }
.ansicht-daten th, .ansicht-daten td { padding: 7px 10px; }
.ansicht-daten thead th { font-size: .8rem; }
.ansicht-daten tbody th { white-space: nowrap; }
.ansicht-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.knopf-bild { padding: 5px 12px; background: #fff; border: 1px solid var(--grau); border-radius: var(--rund); }
.knopf-bild.haupt { font-weight: 600; color: #fff; background: var(--blau); border-color: var(--blau); }

/* Pilot: drei Schritte */
.pilot-schritte { counter-reset: pilot; }
.pilot-schritte li { counter-increment: pilot; }
.pilot-schritte li::before { content: counter(pilot); display: block; margin-bottom: 10px; font: 400 2.2rem/1 var(--serif); color: var(--grau); }
.pilot-schritte b { display: block; font-weight: 600; }
.pilot-schritte span { display: block; margin-top: 4px; color: var(--grau); }

/* Fragen */
.fragen { max-width: 52rem; border-bottom: 1px solid var(--linie); }
.fragen details { border-top: 1px solid var(--linie); }
.fragen summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 18px 0; font-size: 1.08rem; font-weight: 600; list-style: none; cursor: pointer;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; font: 400 1.5rem/1 var(--serif); color: var(--blau); }
.fragen details[open] summary::after { content: "–"; }
.fragen details p { max-width: 42em; padding-bottom: 22px; }

/* Kontakt */
.kontakt { margin-top: 104px; padding: 72px 0 80px; background: var(--hell); border-top: 1px solid var(--linie); }
.kontakt .aktionen { margin-top: 28px; }
.abschnitt-kopf > div > .mail-zeile { margin-top: 28px; }
.mail-gross { font: 400 clamp(1.6rem, 3.4vw, 2.4rem)/1.2 var(--serif); overflow-wrap: anywhere; }

/* Fuß */
.fuss { padding: 28px 0 44px; font-size: .9rem; color: var(--grau); border-top: 1px solid var(--linie); }
.fuss-innen { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 28px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.fuss a { color: var(--grau); text-decoration: none; }
.fuss a:hover, .fuss a[aria-current] { color: var(--text); text-decoration: underline; }

/* ---------- Unterseiten ---------- */
.seitenkopf { padding: 64px 0 56px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.seitenkopf h1 { max-width: 16em; font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.06; letter-spacing: -.01em; }
.seitenkopf .einleitung { margin-top: 20px; }

/* Preise: eine Preisliste als Tabelle */
.preise { padding-top: 56px; }
.preisliste thead th { padding-block: 18px 14px; vertical-align: bottom; font-size: 1rem; }
.preisliste thead th:not(:first-child) { width: 30%; }
.paketname { display: block; font: 400 1.6rem/1.2 var(--serif); }
.paket-fuer { display: block; margin-top: 6px; font-size: .9rem; font-weight: 400; color: var(--grau); }
.preisliste tbody th { font-weight: 400; }
.preisliste .preiszeile > * { padding-block: 18px; vertical-align: baseline; }
.preisliste .preiszeile b { font: 400 2.1rem/1 var(--serif); }
.preisliste tfoot td { padding-block: 16px 18px; border-bottom: 0; }
.preis-hinweise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; margin-top: 40px; }
.preis-hinweise div { padding: 16px 0 20px; border-top: 1px solid var(--linie); }
.preis-hinweise dt { font-weight: 600; }
.preis-hinweise dd { margin-top: 4px; color: var(--grau); }

/* Kunden-Login */
.anmeldung { padding: 72px 0 96px; background: var(--flaeche); }
.anmelde-feld { max-width: 540px; margin: 0 auto; padding: 36px 40px 32px; background: #fff; border: 1px solid var(--linie); border-radius: var(--rund); }
.anmelde-feld h1 { font-size: 2.2rem; }
.anmelde-feld > p { margin-top: 12px; color: var(--grau); }
.anmelde-formular { display: grid; gap: 8px; margin-top: 26px; }
.anmelde-formular label { font-weight: 600; }
.feld-mit-endung { display: flex; background: #fff; border: 1px solid var(--grau); border-radius: var(--rund); }
.feld-mit-endung:focus-within { outline: 2px solid var(--blau); outline-offset: 2px; }
.feld-mit-endung input { flex: 1; min-width: 0; padding: 11px 12px; font: inherit; color: var(--text); background: transparent; border: 0; border-radius: var(--rund) 0 0 var(--rund); }
.feld-mit-endung input:focus { outline: none; }
.feld-mit-endung span {
  display: flex; align-items: center; padding: 0 12px; white-space: nowrap; color: var(--grau);
  background: var(--flaeche); border-left: 1px solid var(--linie); border-radius: 0 var(--rund) var(--rund) 0;
}
.anmelde-formular .knopf { justify-self: start; margin-top: 14px; }
.anmelde-hinweis { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linie); }
.fehler-hinweis { display: none; margin-top: 18px; padding: 10px 14px; background: #fff; border: 1px solid var(--linie); border-left: 4px solid var(--rot); border-radius: var(--rund); }
.fehler-hinweis:target { display: block; }

/* Rechtstexte und Fehlerseite */
.rechtstext { padding: 64px 0 96px; }
.rechtstext .rahmen { width: min(760px, 100% - 48px); }
.rechtstext h1 { margin-bottom: 28px; font-size: clamp(2.2rem, 4.4vw, 3rem); line-height: 1.08; }
.rechtstext h2 { margin: 36px 0 10px; font-size: 1.4rem; }
.rechtstext p + p { margin-top: 12px; }
.platzhalter { padding: 0 3px; font-weight: 600; background: #FCEFC2; border-radius: 2px; }
.entwurf { margin-bottom: 32px; padding: 12px 16px; background: #fff; border: 1px solid var(--linie); border-left: 4px solid var(--gelb); border-radius: var(--rund); }

/* Seite „Bald verfügbar“ (Vorschau-Modus: alle außer den Adressen in WEBSITE_IPS sehen nur diese Seite) */
.bald { display: flex; align-items: center; min-height: calc(100vh - 64px); padding: 64px 0; background: var(--flaeche); }
.bald h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); line-height: 1.05; }
.bald p { margin-top: 16px; font-size: 1.15rem; color: var(--grau); }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 960px) {
  :root { --spaltenabstand: 32px; }
  .buehne-kopf, .abschnitt-kopf { grid-template-columns: minmax(0, 1fr); }
  .rubrik { justify-self: start; }
  .inhalt { margin-left: 0; }
  .spalten.vier { --anzahl: 2; }
}
@media (max-width: 820px) {
  .kopf-innen { flex-wrap: wrap; justify-content: space-between; min-height: 56px; padding-block: 10px; }
  .hauptnavi { order: 3; width: 100%; margin: 0; gap: 2px 20px; padding-top: 8px; border-top: 1px solid #46617E; }
}
@media (max-width: 720px) {
  .spalten, .spalten.zwei, .spalten.vier { --anzahl: 1; }
  .schritte li { grid-template-columns: 44px minmax(0, 1fr); }
  .schritte li p { grid-column: 2; }
  .kurzdaten, .preis-hinweise { grid-template-columns: minmax(0, 1fr); }
  .ansicht-inhalt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .rahmen, .rechtstext .rahmen { width: calc(100% - 32px); }
  .buehne { padding: 48px 0 44px; }
  .eingang { margin-top: 40px; }
  .eingang .zeit, .eingang .betrag { display: none; }
  .eingang th, .eingang td { padding-inline: 12px; }
  .eingang .status { white-space: normal; }
  .abschnitt { padding-top: 64px; }
  .kontakt { margin-top: 80px; padding: 56px 0 64px; }
  .aktionen .knopf { flex: 1 1 auto; }

  /* Prüfregeln: jede Regel als kleiner Block statt als Tabellenzeile */
  .regeln thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .regeln tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--linie); }
  .regeln tbody tr:last-child { border-bottom: 0; }
  .regeln td, .regeln th { display: block; width: auto; padding: 0; border: 0; }
  .regeln td:last-child { grid-column: 1 / -1; margin-top: 4px; }

  /* Preisliste: schmaler setzen, damit beide Pakete ohne Rollen nebeneinander passen */
  .preisliste { font-size: .9rem; }
  .preisliste th, .preisliste td { padding-inline: 8px; }
  .preisliste thead th:first-child { width: 40%; }
  .preisliste tfoot .knopf { width: 100%; padding-inline: 6px; font-size: .9rem; }
  .preisliste tbody th { hyphens: auto; -webkit-hyphens: auto; }
  .preisliste .status { white-space: normal; }
  .paketname { font-size: 1.3rem; }
  .preisliste .preiszeile b { font-size: 1.6rem; }
  .paket-fuer { display: none; }
  .anmelde-feld { padding: 26px 20px; }
  .anmeldung { padding: 40px 0 64px; }
}
@media (max-width: 480px) {
  .ansicht-original, .ansicht-kopf span { display: none; }
}