/* ToHandOn – ruhig, klar, vertrauenswürdig. Keine fremden Schriften, kein CDN. */
:root {
  --tinte: #1d2330; --tinte-2: #3b4352; --grau: #5b6472; --linie: #dfe3ea; --flaeche: #f5f6f8; --weiss: #fff;
  --gruen: #1c7c4f; --gruen-hell: #e7f4ed; --rot: #b42318; --rot-hell: #fdecea; --gelb-hell: #fff6e0; --gelb: #8a5a00;
  --akzent: #22406e; --akzent-hell: #e9eef7;
  --rund: 12px; --schatten: 0 1px 2px rgba(20,30,50,.06), 0 4px 16px rgba(20,30,50,.06);
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--schrift); color: var(--tinte); background: var(--flaeche); line-height: 1.55; font-size: 17px; }
a { color: var(--akzent); }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.15; margin: .2em 0 .5em; letter-spacing: -.01em; }
h2 { font-size: 1.3rem; margin: 1.4em 0 .5em; }
h3 { font-size: 1.05rem; margin: 1.2em 0 .4em; }
p { margin: .5em 0 .9em; }
code, .mono { font-family: var(--mono); }
[hidden] { display: none !important; }

.kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 14px 20px; background: var(--weiss); border-bottom: 1px solid var(--linie); }
.marke { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--tinte); text-decoration: none; letter-spacing: -.01em; }
.kopf nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: .95rem; }
.kopf nav a { text-decoration: none; color: var(--tinte-2); }
.inhalt { max-width: 880px; margin: 0 auto; padding: 28px 18px 60px; }
.inhalt.breit { max-width: 1080px; }
.fuss { text-align: center; color: var(--grau); font-size: .9rem; padding: 30px 16px 40px; }
.fuss a { color: var(--grau); }

.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--rund); padding: 22px; margin: 18px 0; box-shadow: var(--schatten); }
.karte > h2:first-child, .karte > h3:first-child { margin-top: 0; }
.hinweis { background: var(--akzent-hell); border-radius: 10px; padding: 12px 14px; }
.hinweis.gelb { background: var(--gelb-hell); color: #5c3d00; }
.hinweis.rot { background: var(--rot-hell); color: #7a1a12; }
.hinweis.gruen { background: var(--gruen-hell); color: #134e33; }
.klein { font-size: .88rem; color: var(--grau); }

label { display: block; font-weight: 600; margin: 14px 0 6px; }
label.haken { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
label.haken input { margin-top: 5px; width: 18px; height: 18px; flex: none; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #c7ced9; border-radius: 9px; font: inherit; background: var(--weiss); color: var(--tinte);
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid #9db6e0; outline-offset: 1px; }
.eingabe-gross { font-family: var(--mono); font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase; }

button, .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 9px; border: 1px solid var(--akzent);
  background: var(--akzent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 44px; }
button.zweit, .knopf.zweit { background: var(--weiss); color: var(--akzent); }
button.gefahr { background: var(--rot); border-color: var(--rot); }
button.gruen { background: var(--gruen); border-color: var(--gruen); }
button:disabled { opacity: .55; cursor: wait; }
.knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.meldung { margin-top: 12px; min-height: 1.2em; }
.meldung.fehler { color: var(--rot); font-weight: 600; }
.meldung.ok { color: var(--gruen); font-weight: 600; }

.raster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.schritt { display: flex; gap: 14px; align-items: flex-start; }
.schritt .nr { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--akzent); color: #fff; display: grid; place-items: center; font-weight: 700; }
.liste-haken { list-style: none; padding: 0; margin: 0; }
.liste-haken li { padding: 8px 0 8px 32px; position: relative; border-bottom: 1px solid var(--linie); }
.liste-haken li:last-child { border-bottom: 0; }
.liste-haken li::before { content: ''; position: absolute; left: 0; top: 11px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #b8c0cc; }
.liste-haken li.ok::before { background: var(--gruen); border-color: var(--gruen); }
.liste-haken li.ok::after { content: ''; position: absolute; left: 6px; top: 15px; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }

.held { padding: 30px 0 10px; }
.held p.gross { font-size: 1.2rem; color: var(--tinte-2); max-width: 640px; }
.preis { font-size: 2rem; font-weight: 800; }
.preis small { font-size: 1rem; font-weight: 500; color: var(--grau); }

.reiter { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--linie); margin: 10px 0 0; }
.reiter button { background: none; color: var(--tinte-2); border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 10px 12px; min-height: 0; font-weight: 600; }
.reiter button[aria-selected=true] { color: var(--akzent); border-bottom-color: var(--akzent); }
.status { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .85rem; font-weight: 600; background: #eef0f3; color: var(--tinte-2); }
.status.gruen { background: var(--gruen-hell); color: var(--gruen); }
.status.rot { background: var(--rot-hell); color: var(--rot); }
.status.gelb { background: var(--gelb-hell); color: var(--gelb); }
.zeile { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .zeile { grid-template-columns: 1fr; } body { font-size: 16px; } .karte { padding: 16px; } }
.person { border: 1px solid var(--linie); border-radius: 10px; padding: 14px; margin: 10px 0; }
.person .kopfzeile { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.eintrag { border: 1px solid var(--linie); border-radius: 10px; padding: 14px; margin: 12px 0; background: #fbfcfd; }
.code-block { font-family: var(--mono); font-size: .85rem; background: #0f1520; color: #e6edf6; padding: 12px; border-radius: 9px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.wh-code { font-family: var(--mono); font-size: 1.3rem; letter-spacing: .08em; background: var(--weiss); border: 2px dashed var(--akzent); padding: 14px; border-radius: 10px; text-align: center; word-break: break-word; }
.notfall-kopf { background: var(--rot); color: #fff; padding: 18px 22px; border-radius: var(--rund); }
.notfall-kopf h1 { margin: 0; color: #fff; }
.qr { width: 180px; height: 180px; }
.dialog-hg { position: fixed; inset: 0; background: rgba(15,21,32,.55); display: grid; place-items: center; padding: 16px; z-index: 50; }
.dialog { background: var(--weiss); border-radius: var(--rund); padding: 22px; width: min(440px, 100%); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.siegelkarte { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--rund); padding: 20px; box-shadow: var(--schatten); }
.siegelkarte dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.siegelkarte dt { color: var(--grau); }
.siegelkarte dd { margin: 0; }
.laden::after { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: dreh .8s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .laden::after { animation: none; } }

/* ---------- Druck ---------- */
.druck { display: none; }
@media print {
  @page { margin: 0; }
  body { background: #fff; font-size: 11pt; }
  body.drucken > *:not(.druck-aktiv) { display: none !important; }
  .druck.druck-aktiv { display: block !important; }
}
/* Faltbrief: A4 hochkant, in drei Teile gefaltet */
.faltbrief { width: 210mm; height: 297mm; position: relative; font-family: var(--schrift); color: #111; }
.faltbrief .teil { height: 99mm; padding: 10mm 16mm; border-bottom: 1px dashed #bbb; position: relative; overflow: hidden; }
.faltbrief .teil:last-child { border-bottom: 0; }
.faltbrief .aussen { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; transform: rotate(180deg); }
.faltbrief .balken { background: #b42318; color: #fff; font-size: 26pt; font-weight: 800; padding: 6mm 12mm; border-radius: 3mm; letter-spacing: .02em; }
.faltbrief .pw { font-family: var(--mono); font-size: 17pt; letter-spacing: .08em; font-weight: 700; border: 2px solid #111; padding: 3mm 5mm; display: inline-block; margin: 2mm 0; }
.faltbrief .reihe { display: flex; gap: 8mm; align-items: flex-start; }
.faltbrief .qr { width: 34mm; height: 34mm; flex: none; }
/* Urkunde A3/A4 quer */
.urkunde { width: 420mm; height: 297mm; padding: 22mm; text-align: center; position: relative; font-family: Georgia, "Times New Roman", serif; color: #1d2330; }
.urkunde.a4 { width: 297mm; height: 210mm; padding: 14mm; }
.urkunde .rahmen { border: 3mm double #22406e; height: 100%; padding: 16mm 20mm; display: flex; flex-direction: column; justify-content: space-between; }
.urkunde.a4 .rahmen { padding: 10mm 14mm; }
.urkunde .titel { font-size: 54pt; letter-spacing: .02em; margin: 0; color: #1c7c4f; }
.urkunde.a4 .titel { font-size: 38pt; }
.urkunde .firma { font-size: 30pt; margin: 6mm 0; }
.urkunde.a4 .firma { font-size: 22pt; }
.urkunde .fussreihe { display: flex; justify-content: space-between; align-items: flex-end; font-family: var(--schrift); font-size: 11pt; text-align: left; }
.urkunde .qr { width: 40mm; height: 40mm; }
.vollmacht { width: 210mm; min-height: 297mm; padding: 22mm 22mm; font-size: 11pt; line-height: 1.5; color: #111; }
.vollmacht h1 { font-size: 18pt; }
.vollmacht .unterschrift { margin-top: 18mm; display: grid; grid-template-columns: 1fr 1fr; gap: 14mm; }
.vollmacht .unterschrift div { border-top: 1px solid #111; padding-top: 2mm; font-size: 9pt; }
.wh-blatt { width: 210mm; padding: 25mm; font-size: 12pt; }
.vor { white-space: pre-wrap; }
dl.klein { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 6px 0; } dl.klein dd { margin: 0; word-break: break-all; }
.druck-klein { font-size: 9pt; }
.druck-mittel { margin-top: 6mm; font-size: 12pt; }
.klein-druck { font-family: var(--schrift); letter-spacing: .3em; text-transform: uppercase; font-size: 12pt; color: #5b6472; margin: 0; }
.kopfzeile-bereich h1 { margin-bottom: 0; }
.schritt h3 { margin-top: 4px; }
.karte > div:first-child > h2:first-child { margin-top: 0; }