:root {
  /* Dieselben Werte stehen in CertificatePdfService.cs – beide zusammen ändern. */
  --brand: #7EBE1B;
  --brand-dark: #5F8F14;
  --brand-tint: #F2F9E6;
  --brand-line: #CDE5A4;
  --gray: #615D5C;
  --dark: #3D3A39;
  --light: #9B9895;
  --bg: #fafaf8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Calibri, Arial, sans-serif;
  color: var(--dark);
  background: var(--bg);
  line-height: 1.55;
}

/* 860px auf den Kundenseiten ist Absicht: laengere Zeilen liest niemand gern. */
.container { max-width: 860px; margin: 0 auto; padding: 0 20px; }

/* Der Admin ist eine Arbeitsflaeche, kein Lesetext – breite Tabellen brauchen Platz.
   Wird laut Christian nur am Laptop/Tablet geoeffnet. */
body.seite-admin .container { max-width: 1500px; }

.site-header { background: #fff; border-bottom: 3px solid var(--brand); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--gray); font-weight: 600; font-size: 1.05rem; }
.brand img { flex-shrink: 0; }
.site-header nav a { margin-left: 18px; text-decoration: none; color: var(--gray); font-weight: 500; white-space: nowrap; }
.site-header nav a:hover { color: var(--brand-dark); }

/* Hamburger – am Desktop nicht vorhanden */
.nav-schalter { display: none; }

main { padding: 32px 20px 56px; min-height: 60vh; }

h1 { color: var(--gray); font-size: 1.7rem; margin-bottom: .4em; }
h2 { color: var(--brand-dark); font-size: 1.2rem; margin-top: 1.6em; }

.card {
  background: #fff; border: 1px solid #e6e6e2; border-radius: 10px;
  padding: 24px 28px; margin: 18px 0; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* Alle Buttons ueber die volle Breite ihres Containers: am Handy bequem zu treffen,
   ueberall gleich. box-sizing, damit das Padding die 100% nicht sprengt. */
.btn {
  display: block; width: 100%; box-sizing: border-box;
  background: var(--brand); color: #fff; border: none;
  padding: 12px 28px; border-radius: 8px; font-size: 1rem; font-weight: 600;
  cursor: pointer; text-decoration: none; text-align: center;
}
.btn:hover { background: var(--brand-dark); }
.btn:disabled { opacity: .6; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.btn-secondary { background: #fff; color: var(--gray); border: 1.5px solid var(--gray); }
.btn-secondary:hover { background: #f5f5f2; color: var(--brand-dark); border-color: var(--brand-dark); }

/* Ghost: die leisere Nebenaktion neben einem gruenen Hauptknopf. Zurueckhaltender
   als btn-secondary, damit klar ist, welcher Knopf der Hauptweg ist. */
.btn-ghost {
  background: transparent; color: var(--gray);
  border: 1.5px solid var(--brand-line);
}
.btn-ghost:hover { background: var(--brand-tint); color: var(--brand-dark); border-color: var(--brand); }

/* Mehrere Buttons nebeneinander teilen sich die Zeile; unter ~220px je Button
   rutschen sie untereinander. */
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-row .btn { flex: 1 1 220px; }

/* Ausnahme: steht in einer Tabellenzeile neben einem Eingabefeld –
   volle Breite waere dort sinnlos. */
.btn-klein {
  display: inline-block; width: auto; flex: 0 0 auto;
  padding: 6px 14px; font-size: .85rem;
}

/* Spinner fuer laufende Aktionen (Mailversand) */
.spinner {
  display: inline-block; width: .85em; height: .85em; margin-right: .5em;
  vertical-align: -.1em; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

.resend-form { display: flex; gap: 6px; align-items: center; margin: 0; }
/* Ohne feste Breite quetscht die Tabelle das Feld auf "chno29" zusammen. */
.resend-form .resend-mail {
  width: 210px; min-width: 210px; max-width: none;
  padding: 5px 8px; font-size: .88rem;
}

/* Der Admin ist eine Arbeitsflaeche: Daten dicht, aber nichts soll umbrechen,
   was zusammengehoert. */
body.seite-admin table.admin td,
body.seite-admin table.admin th { padding: 7px 10px; }
body.seite-admin table.admin td:first-child { white-space: nowrap; }

/* Zugriffsprotokoll: Erfolg/Fehlschlag auf einen Blick.
   Nicht nur Farbe - der Punkt hat auch einen Titel fuer Screenreader. */
.log-punkt {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px;
}
.log-punkt.gut { background: var(--brand); }
.log-punkt.schlecht { background: #b3261e; }

label { display: block; font-weight: 600; margin: 14px 0 4px; color: var(--gray); }
input[type=text], input[type=email] {
  width: 100%; max-width: 420px; padding: 10px 12px; border: 1.5px solid #ccc;
  border-radius: 8px; font-size: 1rem;
}
input:focus { outline: 2px solid var(--brand); border-color: var(--brand); }

/* Feld steht fest (z. B. der an den Code gebundene Name) – sieht aus wie Text,
   nicht wie ein Eingabefeld, damit niemand vergeblich hineintippt. */
.feld-fest {
  background: #f4f4f1; border-style: dashed; color: var(--gray); cursor: default;
}

.error { color: #b3261e; background: #fdeceb; border: 1px solid #f5c6c3; border-radius: 8px; padding: 10px 14px; margin: 12px 0; }
.success { color: #2e6b0e; background: #f2f9e6; border: 1px solid #cde5a4; border-radius: 8px; padding: 10px 14px; margin: 12px 0; }
.muted { color: var(--light); font-size: .9em; }

/* EU-Emblem samt Fundstelle neben dem Einleitungstext.
   Bewusst Flex statt float: Bei float fliesst der Absatz um die Flagge herum und die
   letzte Zeile rutscht darunter – das sah aus wie ein Satzfehler. Als zwei Spalten
   bleibt der Text als Block beisammen. */
.intro { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 1em; }
.intro > p { margin: 0; }

.rechtsgrundlage {
  margin: 0; padding: 0;
  flex: 0 0 auto;           /* nicht schrumpfen, die Flagge bleibt lesbar */
  display: flex; align-items: center; gap: 12px;
}
.rechtsgrundlage img {
  display: block; border: 1px solid #d8d8d4; border-radius: 2px;
}
.rechtsgrundlage figcaption {
  font-size: .78rem; line-height: 1.35; color: var(--gray); font-weight: 600;
  white-space: nowrap;      /* "Verordnung (EU) 2024/1689" nicht umbrechen */
}
.rechtsgrundlage figcaption span { font-weight: 400; color: var(--light); }

/* Am Handy nebeneinander zu eng – dann untereinander.
   align-items MUSS hier zurück auf stretch: In column-Richtung würde flex-start den
   Absatz auf seine max-content-Breite aufblasen, statt ihn auf Containerbreite zu
   halten – die Seite lief dadurch seitlich über. */
@media (max-width: 640px) {
  .intro { flex-direction: column; align-items: stretch; gap: 14px; }
  .rechtsgrundlage { align-self: flex-start; }
}

/* Quiz */
.question { background: #fff; border: 1px solid #e6e6e2; border-radius: 10px; padding: 18px 22px; margin: 14px 0; }
.question h3 { margin: 0 0 10px; font-size: 1.02rem; color: var(--dark); }
.question .cat { color: var(--light); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.option { display: block; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.option:hover { background: var(--brand-tint); }
.option input { margin-right: 10px; }

.timer-bar {
  position: sticky; top: 0; z-index: 10; background: var(--gray); color: #fff;
  padding: 10px 16px; border-radius: 0 0 10px 10px; display: flex; justify-content: space-between; align-items: center;
}
.timer-bar strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.timer-bar.warn { background: #b3261e; }

.score-big { font-size: 3rem; font-weight: 700; color: var(--brand-dark); }
.score-big.fail { color: #b3261e; }

/* Nachbesprechung falscher Antworten (nur bei bestandenem Test) */
.review-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 8px; margin: 4px 0; }
.review-label { flex: 0 0 100px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--light); }
.review-given { background: #fdeceb; }
.review-correct { background: #f2f9e6; }
.review-correct span:last-child { font-weight: 600; color: #2e6b0e; }
.review-why { margin: 10px 0 0; padding-left: 10px; border-left: 3px solid var(--brand); color: var(--gray); font-size: .93rem; }

/* Kategorie-Auswertung (nur bei nicht bestandenem Test) */
.cat-row + .cat-row { margin-top: 14px; }
.cat-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; font-size: .95rem; }
.cat-head strong { font-variant-numeric: tabular-nums; color: var(--gray); }
.cat-bar { background: #ececea; border-radius: 5px; height: 9px; overflow: hidden; }
.cat-fill { background: var(--brand); height: 100%; border-radius: 5px; }
.cat-fill.weak { background: #e0a03a; }

table.admin { width: 100%; border-collapse: collapse; background: #fff; }
table.admin th, table.admin td { border: 1px solid #e6e6e2; padding: 8px 10px; text-align: left; font-size: .92rem; }
table.admin th { background: var(--brand); color: #fff; }
table.admin tr:nth-child(even) td { background: #f7f7f4; }
code.code {
  background: var(--brand-tint); border: 1px solid var(--brand-line);
  padding: 2px 8px; border-radius: 6px; font-size: 1.05em;
  white-space: nowrap;   /* "KIT-7QJ7-CSTZ" darf nicht an den Bindestrichen brechen */
}

.site-footer { border-top: 3px solid var(--brand); background: #fff; padding: 18px 0 26px; text-align: center; color: var(--gray); font-size: .9rem; }
.fuss-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 22px; margin-bottom: 12px; }
.fuss-links a { color: var(--brand-dark); text-decoration: none; font-weight: 600; }
.fuss-links a:hover { text-decoration: underline; }

/* ============================================================
   Rechtstexte (Impressum, AGB, Datenschutz)
   ============================================================ */
.rechts-liste { margin: 0; display: grid; grid-template-columns: 200px 1fr; gap: 10px 18px; }
.rechts-liste dt { font-weight: 600; color: var(--gray); }
.rechts-liste dd { margin: 0; }
@media (max-width: 560px) {
  .rechts-liste { grid-template-columns: 1fr; gap: 2px; }
  .rechts-liste dd { margin-bottom: 12px; }
}

/* Hinweis, den man gelesen haben muss - nicht wegdesignen. */
.note-hinweis, .note-warnung {
  border-left: 3px solid var(--brand); background: var(--brand-tint);
  padding: 14px 16px; margin: 16px 0; border-radius: 0 6px 6px 0;
}
.note-warnung { border-left-color: #e0a03a; background: #fdf6e9; }
.note-hinweis p:first-child, .note-warnung p:first-child { margin-top: 0; }
.note-hinweis p:last-child, .note-warnung p:last-child { margin-bottom: 0; }

.card h3 { color: var(--dark); font-size: 1rem; margin: 1.4em 0 .4em; }
.card h3:first-of-type { margin-top: .8em; }

/* ============================================================
   Handy
   ============================================================ */
@media (max-width: 640px) {

  /* Der Schalter: drei Balken aus einem Element (Mitte = der Balken selbst,
     oben/unten = ::before/::after). Wird beim Oeffnen zum X. */
  .nav-schalter {
    display: block; position: relative;
    width: 44px; height: 44px;          /* 44px: bequeme Trefferflaeche am Daumen */
    flex-shrink: 0;
    background: none; border: none; padding: 0; cursor: pointer;
  }
  .nav-balken, .nav-balken::before, .nav-balken::after {
    position: absolute; left: 11px; width: 22px; height: 2px;
    background: var(--gray); border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
  }
  .nav-balken { top: 21px; }
  .nav-balken::before { content: ""; left: 0; top: -7px; }
  .nav-balken::after  { content: ""; left: 0; top:  7px; }

  .nav-schalter[aria-expanded="true"] .nav-balken { background: transparent; }
  .nav-schalter[aria-expanded="true"] .nav-balken::before { top: 0; transform: rotate(45deg); }
  .nav-schalter[aria-expanded="true"] .nav-balken::after  { top: 0; transform: rotate(-45deg); }

  .nav-schalter:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

  /* Navigation klappt unter den Kopf */
  .header-inner { flex-wrap: wrap; padding: 10px 16px; }
  .site-header nav {
    display: none;
    flex-basis: 100%; order: 3;
    border-top: 1px solid #e6e6e2; margin-top: 10px; padding-top: 6px;
  }
  .site-header nav.offen { display: block; }
  html.kein-js .site-header nav { display: block; }   /* ohne JS immer sichtbar */
  html.kein-js .nav-schalter { display: none; }

  .site-header nav a {
    display: block; margin: 0; padding: 12px 4px;
    border-bottom: 1px solid #f0f0ec;
  }
  .site-header nav a:last-child { border-bottom: none; }

  .brand span { font-size: .95rem; }
  .brand img { height: 42px; }

  main { padding: 22px 16px 44px; }
  .container { padding: 0 16px; }
  .card { padding: 18px 16px; }
  h1 { font-size: 1.4rem; }

  /* Lange Woerter wie "KI-Kompetenznachweis" duerfen umbrechen statt rauszuragen */
  h1, h2, p, li { overflow-wrap: break-word; }
}

/* Nichts darf die Seite seitlich aufziehen – der haeufigste Grund fuer
   waagrechtes Scrollen am Handy. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg { max-width: 100%; }

/* ---------- Verkaufsseite ---------------------------------------------------- */

/* Paketauswahl. Das Radio bleibt ein echtes Radio (nur optisch versteckt), damit
   Tastatur und Screenreader unveraendert funktionieren - die Auswahl wird ueber
   :has() am Label sichtbar gemacht, nicht ueber JS. */
.pakete { display: grid; gap: 10px; }
.paket {
  display: block; margin: 0; font-weight: 400; cursor: pointer;
  border: 1.5px solid #ddd; border-radius: 10px; padding: 14px 16px;
  transition: border-color .12s, background .12s;
}
.paket:hover { border-color: var(--brand-line); background: var(--brand-tint); }
.paket:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.paket:has(input:focus-visible) { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.paket input { position: absolute; opacity: 0; pointer-events: none; }

.paket-inhalt { display: block; }
.paket-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.paket-name { font-weight: 600; color: var(--dark); }
/* tabular-nums: Preise stehen untereinander, die Ziffern sollen fluchten. */
.paket-preis {
  font-weight: 700; color: var(--brand-dark); font-size: 1.15rem;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.paket-text { display: block; margin-top: 4px; color: var(--gray); font-size: .92rem; }

.zahlart { border: 1.5px solid var(--brand); background: var(--brand-tint); border-radius: 10px; padding: 14px 16px; }

/* ---------- Zahlweise-Auswahl (Kreditkarte / Ueberweisung) -------------------
   Zwei Kacheln mit Symbol. Der gewaehlte Zustand ist bewusst deutlich: dickerer
   gruener Rahmen, Tint-Hintergrund, farbiges Symbol und ein Haken oben rechts.
   Das Radio bleibt echt (nur versteckt) - Auswahl per :has(input:checked). */
.zahlwahl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .zahlwahl { grid-template-columns: 1fr; } }

.zw-option {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  margin: 0; padding: 16px; cursor: pointer; font-weight: 400;
  border: 2px solid #dcdcd8; border-radius: 12px; background: #fff;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.zw-option:hover { border-color: var(--brand-line); background: var(--brand-tint); }
.zw-option:has(input:checked) {
  border-color: var(--brand); background: var(--brand-tint);
  box-shadow: 0 0 0 3px rgba(126, 190, 27, .18);
}
.zw-option:has(input:focus-visible) { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.zw-option input { position: absolute; opacity: 0; pointer-events: none; }

/* Symbol: grau, wird bei Auswahl gruen. */
.zw-icon { flex: 0 0 auto; color: var(--light); line-height: 0; margin-top: 2px; }
.zw-option:has(input:checked) .zw-icon { color: var(--brand-dark); }

.zw-text { display: block; }
.zw-titel { display: block; font-weight: 700; color: var(--dark); }
.zw-option:has(input:checked) .zw-titel { color: var(--brand-dark); }
.zw-sub { display: block; margin-top: 3px; color: var(--gray); font-size: .86rem; line-height: 1.4; }

/* Haken oben rechts - nur sichtbar, wenn gewaehlt. */
.zw-haken {
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.6); transition: opacity .12s, transform .12s;
}
.zw-option:has(input:checked) .zw-haken { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .zw-haken { transition: none; } }

/* Zustimmungshaken: Text neben statt unter dem Kaestchen, und der ganze Block
   ist klickbar. */
.haken {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  font-weight: 400; color: var(--dark); margin: 14px 0; cursor: pointer;
}
.haken input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand); }

.pflicht { color: #b3261e; font-weight: 700; }
.feld-hinweis { color: var(--light); font-size: .86rem; margin: 4px 0 0; max-width: 420px; }

/* PLZ und Ort teilen sich eine Zeile - zusammen sind sie ein Feld.
   min-width:0 ist hier PFLICHT, nicht Kosmetik: Flex-Kinder haben min-width:auto und
   schrumpfen nicht unter die Eigenbreite des input (~190px). Am Handy passen 120px +
   Abstand + 190px nicht in die Karte -> das Ort-Feld lief rechts heraus. */
.feld-paar { display: flex; gap: 12px; max-width: 420px; }
.feld-paar > div { min-width: 0; }
.feld-paar > div:first-child { flex: 0 0 100px; }
.feld-paar > div:last-child { flex: 1; }
.feld-paar input { max-width: none; min-width: 0; }

/* IBAN wird abgetippt: Festbreite, damit die Vierergruppen fluchten. */
.iban { font-size: 1.05rem; letter-spacing: .04em; }
code {
  font-family: Consolas, "Courier New", monospace;
  background: #f4f4f1; padding: 2px 6px; border-radius: 4px;
}

/* ---------- Bestellungen im Admin -------------------------------------------- */

/* Offene Bestellungen sind die Arbeitsliste - sie muessen im Ueberflug auffallen.
   Nicht allein ueber Farbe: Der Status steht als Wort ("offen") daneben. */
.badge-offen {
  display: inline-block; margin-left: 10px; padding: 2px 10px;
  background: #fdf6e9; border: 1px solid #e0a03a; border-radius: 999px;
  color: #8a5d10; font-size: .75rem; font-weight: 700; vertical-align: 2px;
}
tr.zeile-offen > td { background: #fffdf7; }
.warn-text { color: #8a5d10; }

/* Zahlweise-Pille: Karte (gruen, kommt automatisch) vs. Ueberweisung (blaugrau,
   wartet auf Zahlungseingang) - auf einen Blick unterscheidbar. */
.zahlweise {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.zahlweise.karte { background: var(--brand-tint); color: var(--brand-dark); border: 1px solid var(--brand-line); }
.zahlweise.ueberw { background: #eef2f7; color: #46586b; border: 1px solid #d5dde6; }


/* ---------- Verteilseite des Kaeufers ---------------------------------------- */

/* Name + Mail + Knopf in einer Zeile. Ab ~700px bricht es um, sonst quetscht die
   Tabelle die Felder auf wenige Zeichen. min-width:0 wie bei .feld-paar: sonst
   schrumpfen die inputs nicht unter ihre Eigenbreite und die Zeile laeuft ueber. */
/* Zuweis-Zelle als ruhiges Raster statt gequetschtem flex-wrap: Felder in einer
   Zeile, Knoepfe darunter. max-width, damit das Formular in der breiten Person-
   Spalte nicht ueber die halbe Seite gezogen wird. */
.zuweis-form { display: grid; gap: 8px; margin: 0; max-width: 440px; }
.zuweis-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zuweis-form input {
  width: 100%; min-width: 0; max-width: none;
  padding: 8px 11px; font-size: .9rem;
}
.zuweis-knoepfe { display: flex; gap: 8px; }

/* Am Handy die zwei Felder untereinander - nebeneinander werden sie sonst zu schmal. */
@media (max-width: 560px) {
  .zuweis-felder { grid-template-columns: 1fr; }
}

/* Die Codes-Tabelle wird am Handy zu gestapelten Karten: Vier Spalten passen nicht
   auf 390px, und der Senden-Knopf wurde sonst rechts abgeschnitten. Kundenseite -
   muss am Telefon funktionieren. */
@media (max-width: 640px) {
  .codes-tabelle thead { display: none; }
  .codes-tabelle, .codes-tabelle tbody, .codes-tabelle tr, .codes-tabelle td { display: block; width: auto; }
  .codes-tabelle tr {
    border: 1px solid #e6e6e2; border-radius: 10px;
    padding: 12px 14px; margin-bottom: 12px; background: #fff;
  }
  .codes-tabelle td { border: none; padding: 4px 0; }
  /* Label vor Status/Zertifikat, damit ohne Spaltenkopf klar ist, was das ist. */
  .codes-tabelle td[data-label="Status"]::before,
  .codes-tabelle td[data-label="Zertifikat"]::before {
    content: attr(data-label) ": "; font-weight: 600; color: var(--gray);
  }
  .codes-tabelle .zelle-code { font-size: 1.05rem; margin-bottom: 6px; }
  .zuweis-form { max-width: none; }
}

/* Neutraler Statuspunkt - .log-punkt kennt bisher nur gut/schlecht. "Laeuft" ist
   weder das eine noch das andere; ohne eigene Klasse waere der Punkt unsichtbar. */
.log-punkt.neutral { background: var(--light); }

/* Zertifikats-Musterbild: wie ein Dokument praesentiert - schmaler, mit Rahmen und
   leichtem Schatten, zentriert. Hochformat (A4), deshalb Breite begrenzen. */
.zert-vorschau { margin: 0; text-align: center; }
.zert-vorschau img {
  max-width: 380px; width: 100%; height: auto;
  border: 1px solid #e0e0dc; border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
}
.zert-vorschau figcaption {
  margin-top: 10px; color: var(--light); font-size: .86rem;
}