/* =========================================================================
   PFAUMEDIA Aufnahme-Portal - Design
   CI: Happyyellow #F7BD1E, Aubergine #4F3A46, Energetic Pink #DC4162,
   Nearly Black #2B2C2E. Roboto selbst gehostet, strenge CSP, kein CDN.
   Internes Werkzeug: dichter als das Kundenportal, aber gleiche Handschrift.
   ========================================================================= */

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/roboto-400.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/roboto-500.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/roboto-700.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; font-display: swap; src: url('/static/fonts/roboto-900.woff2') format('woff2'); }

:root {
  --gelb: #F7BD1E;
  --gelb-dunkel: #E5A70C;
  --gelb-weich: #FEF3D7;
  --aubergine: #4F3A46;
  --pink-text: #C4324F;
  --text: #2B2C2E;
  --text-weich: #6B6A6E;
  --linie: #ECEAE7;
  --bg: #FFFFFF;
  --bg-sanft: #FBFAF8;
  --gruen: #1F8A54;
  --gruen-text: #1A6E44;
  --gruen-weich: #E7F4EC;
  --schatten: 0 1px 2px rgba(43,44,46,.04), 0 6px 20px rgba(43,44,46,.05);
  --schatten-karte: 0 1px 3px rgba(43,44,46,.05), 0 10px 30px rgba(43,44,46,.055);
  --radius: 14px;
  --radius-klein: 10px;
  --max: 900px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Roboto', -apple-system, 'Segoe UI', system-ui, Arial, sans-serif;
  color: var(--text); background: var(--bg-sanft);
  line-height: 1.6; font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--aubergine); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--pink-text); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--aubergine); outline-offset: 2px; border-radius: 4px;
}

/* ---- Kopfleiste --------------------------------------------------------- */
.marke { background: var(--bg); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 20; }
.marke-inner { max-width: var(--max); margin: 0 auto; padding: 13px 20px; display: flex; align-items: center; gap: 12px; }
.marke .wortmarke { height: 19px; width: auto; display: block; flex: none; }
.marke-titel { font-size: 14px; font-weight: 700; color: var(--text); border-left: 1px solid var(--linie); padding-left: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marke-rechts { margin-left: auto; font-size: 13px; color: var(--text-weich); display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.marke-rechts button { background: none; border: none; font: inherit; color: var(--aubergine); cursor: pointer; text-decoration: underline; padding: 0; }
.zurueck { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--text-weich); text-decoration: none; }
.zurueck:hover { background: var(--bg-sanft); color: var(--text); }
.zurueck svg { width: 20px; height: 20px; }

main { max-width: var(--max); margin: 0 auto; padding: 26px 20px 80px; }

/* ---- Reiter -------------------------------------------------------------- */
.reiter { background: var(--bg); border-bottom: 1px solid var(--linie); position: sticky; top: 47px; z-index: 18; overflow-x: auto; }
.reiter-inner { max-width: var(--max); margin: 0 auto; padding: 0 20px; display: flex; gap: 4px; }
.reiter button {
  background: none; border: none; border-bottom: 3px solid transparent; font: inherit;
  padding: 12px 14px; cursor: pointer; color: var(--text-weich); font-weight: 500;
  white-space: nowrap; display: flex; align-items: center; gap: 8px;
}
.reiter button:hover { color: var(--text); }
.reiter button.aktiv { color: var(--text); font-weight: 700; border-bottom-color: var(--gelb); }
.reiter .ring { flex: none; width: 22px; height: 22px; }
.reiter .ring circle { fill: none; stroke-width: 3; }
.reiter .ring .bahn { stroke: #EDEBE8; }
.reiter .ring .voll { stroke: var(--gelb); transition: stroke-dasharray .4s; }
.reiter .ring.fertig .voll { stroke: var(--gruen); }

/* ---- Karten -------------------------------------------------------------- */
.karte { background: var(--bg); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px; margin: 16px 0; box-shadow: var(--schatten-karte); }
.karte.leer { text-align: center; color: var(--text-weich); box-shadow: var(--schatten); }
.karte h2 { font-size: 19px; font-weight: 700; margin: 0 0 4px; }

h1 { font-size: clamp(25px, 5vw, 33px); font-weight: 900; letter-spacing: -.015em; line-height: 1.12; margin: 0 0 10px; }
.unter { color: var(--text-weich); margin: 0 0 22px; max-width: 60ch; }

/* ---- Anmeldung ----------------------------------------------------------- */
.anmelden { max-width: 380px; margin: 6vh auto 0; }
.anmelden .hero-logomark { width: 54px; height: 54px; display: block; margin: 0 0 20px; }

/* ---- Vorgangsliste ------------------------------------------------------- */
.liste { display: grid; gap: 12px; }
.vorgang { display: flex; align-items: center; gap: 16px; background: var(--bg); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--schatten); text-decoration: none; color: inherit; transition: border-color .15s, transform .05s; }
.vorgang:hover { border-color: #D9D6D2; color: inherit; }
.vorgang:active { transform: translateY(1px); }
.vorgang-haupt { flex: 1; min-width: 0; }
.vorgang-name { font-size: 17px; font-weight: 700; margin: 0; }
.vorgang-meta { font-size: 13px; color: var(--text-weich); margin: 3px 0 0; }
.vorgang-stand { display: flex; gap: 14px; flex: none; }
.stand-teil { text-align: center; font-size: 11px; color: var(--text-weich); font-weight: 500; }
.stand-teil .zahl { display: block; font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.stand-teil.voll .zahl { color: var(--gruen-text); }

.status-marke { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.status-offen { background: var(--gelb-weich); color: #7A5C10; }
.status-fertig { background: var(--gruen-weich); color: var(--gruen-text); }
.status-archiviert { background: #F1F0EE; color: var(--text-weich); }

/* ---- Abschnitte im Formular ---------------------------------------------- */
.abschnitt { background: var(--bg); border: 1px solid var(--linie); border-radius: var(--radius); margin: 16px 0; box-shadow: var(--schatten-karte); overflow: hidden; }
.abschnitt > summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; align-items: center; gap: 12px; user-select: none; }
.abschnitt > summary::-webkit-details-marker { display: none; }
.abschnitt > summary h2 { font-size: 17px; font-weight: 700; margin: 0; flex: 1; min-width: 0; }
.abschnitt > summary .chev { width: 18px; height: 18px; color: var(--text-weich); transition: transform .2s; flex: none; }
.abschnitt[open] > summary .chev { transform: rotate(180deg); }
.abschnitt .zaehler { font-size: 12px; font-weight: 700; color: var(--text-weich); background: var(--bg-sanft); border: 1px solid var(--linie); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; flex: none; }
.abschnitt .zaehler.voll { background: var(--gruen-weich); border-color: #CDE9D8; color: var(--gruen-text); }
.abschnitt-koerper { padding: 0 20px 20px; border-top: 1px solid var(--linie); }
.abschnitt-intro { font-size: 14px; color: var(--text-weich); margin: 14px 0 0; }

/* ---- Felder -------------------------------------------------------------- */
.feld { margin: 18px 0 0; }
.feld > label, .feld-titel { display: block; font-size: 15px; font-weight: 700; margin-bottom: 3px; color: var(--text); }
.feld .stern { color: var(--pink-text); margin-left: 2px; }
.feld .hilfe { font-size: 13.5px; color: var(--text-weich); margin: 0 0 8px; line-height: 1.5; max-width: 68ch; }
/* Nicht auf [type=text] einschraenken - sonst faellt das Passwortfeld der
   Anmeldung heraus und schrumpft auf Standardbreite. */
.feld input:not([type=checkbox]):not([type=radio]), .feld textarea, .feld select {
  width: 100%; padding: 10px 12px; font-size: 16px; color: var(--text); font-family: inherit;
  border: 1.5px solid var(--linie); border-radius: var(--radius-klein); background: var(--bg);
  transition: border-color .15s, box-shadow .15s;
}
.feld textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
.feld input:hover, .feld textarea:hover, .feld select:hover { border-color: #D9D6D2; }
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: none; border-color: var(--aubergine); box-shadow: 0 0 0 3px rgba(79,58,70,.28); }
.feld input::placeholder, .feld textarea::placeholder { color: var(--text-weich); opacity: .7; }

/* Mehrfachauswahl und Ja/Nein */
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl label {
  display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500;
  border: 1.5px solid var(--linie); border-radius: 999px; padding: 7px 14px; cursor: pointer;
  background: var(--bg); transition: border-color .15s, background .15s;
}
.wahl label:hover { border-color: #D9D6D2; }
.wahl label.an { border-color: var(--aubergine); background: var(--gelb-weich); font-weight: 700; }
.wahl input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Listenfeld */
.zeilen { display: grid; gap: 7px; }
.zeile { display: flex; gap: 7px; align-items: center; }
.zeile input { flex: 1; }
.weg {
  flex: none; width: 34px; height: 34px; border: 1.5px solid var(--linie); background: var(--bg);
  border-radius: 8px; cursor: pointer; color: var(--text-weich); display: grid; place-items: center;
}
.weg:hover { border-color: var(--pink-text); color: var(--pink-text); }
.weg svg { width: 15px; height: 15px; }
.dazu {
  margin-top: 8px; background: var(--bg-sanft); border: 1.5px dashed var(--linie); border-radius: var(--radius-klein);
  padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 500; color: var(--aubergine); cursor: pointer;
}
.dazu:hover { border-color: var(--aubergine); background: var(--gelb-weich); }

/* Tabellenfeld */
.tab-wrap { overflow-x: auto; }
.tab { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 480px; }
.tab th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-weich); font-weight: 700; padding: 0 6px 6px; }
.tab td { padding: 0 3px 6px 0; vertical-align: top; }
.tab td:first-child { padding-left: 0; }
.tab input { width: 100%; padding: 8px 10px; font-size: 15px; border: 1.5px solid var(--linie); border-radius: 8px; font-family: inherit; color: var(--text); }
.tab input:focus { outline: none; border-color: var(--aubergine); box-shadow: 0 0 0 3px rgba(79,58,70,.28); }
.tab .weg { width: 30px; height: 30px; }

/* Shot-Matrix */
.matrix { display: grid; gap: 10px; }
.matrix-zeile { border: 1.5px solid var(--linie); border-radius: var(--radius-klein); padding: 13px 15px; background: var(--bg); }
.matrix-zeile.erfuellt { border-color: #CDE9D8; background: var(--gruen-weich); }
.matrix-zeile.verfehlt { border-color: #F3C9D3; }
.matrix-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.matrix-name { font-size: 15.5px; font-weight: 700; flex: 1; min-width: 140px; }
.matrix-zahlen { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-weich); }
.matrix-zahlen label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.matrix-zahlen input { width: 62px; padding: 6px 8px; font-size: 15px; text-align: center; border: 1.5px solid var(--linie); border-radius: 8px; font-family: inherit; font-variant-numeric: tabular-nums; color: var(--text); }
.matrix-zahlen input:focus { outline: none; border-color: var(--aubergine); box-shadow: 0 0 0 3px rgba(79,58,70,.28); }
.matrix-art { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--gelb-weich); color: #7A5C10; }
.matrix-art.max { background: #F1F0EE; color: var(--text-weich); }
.matrix-was { font-size: 13.5px; color: var(--text-weich); margin: 7px 0 0; line-height: 1.5; max-width: 72ch; }

/* ---- Hinweiskasten ------------------------------------------------------- */
.merk { margin: 16px 0; padding: 14px 17px; background: var(--gelb-weich); border-radius: var(--radius-klein); font-size: 14px; line-height: 1.55; color: #5C4A2A; }
.merk strong { color: #4A3A18; }
.merk a { color: #5C4A2A; font-weight: 700; }

/* ---- Knöpfe -------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; gap: 8px; background: var(--gelb); color: #000; border: none;
  border-radius: var(--radius-klein); padding: 11px 20px; font-size: 15.5px; font-weight: 700; cursor: pointer;
  font-family: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: background .15s, transform .05s;
}
.knopf:hover { background: var(--gelb-dunkel); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: .5; cursor: default; }
.knopf svg { width: 16px; height: 16px; }
.knopf.stiller { background: var(--bg); color: var(--text); border: 1.5px solid var(--linie); box-shadow: none; }
.knopf.stiller:hover { border-color: var(--aubergine); background: var(--bg-sanft); }
.knopf-reihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }

.fehlermeldung { color: var(--pink-text); font-size: 14.5px; font-weight: 500; margin: 12px 0 0; }
.speicherstand.gespeichert { color: var(--gruen-text); }
.speicherstand.fehler { color: var(--pink-text); font-weight: 700; }

/* ---- Ausgaben ------------------------------------------------------------ */
.ausgabe { border: 1px solid var(--linie); border-radius: var(--radius-klein); margin: 10px 0; overflow: hidden; background: var(--bg); }
.ausgabe > summary { list-style: none; cursor: pointer; padding: 13px 16px; display: flex; align-items: center; gap: 12px; }
.ausgabe > summary::-webkit-details-marker { display: none; }
.ausgabe .a-titel { font-weight: 700; font-size: 15.5px; }
.ausgabe .a-ziel { font-size: 13px; color: var(--text-weich); }
.ausgabe .chev { width: 17px; height: 17px; color: var(--text-weich); margin-left: auto; flex: none; transition: transform .2s; }
.ausgabe[open] .chev { transform: rotate(180deg); }
.ausgabe pre {
  margin: 0; padding: 16px; background: #2B2C2E; color: #F4F2EF; font-size: 12.5px; line-height: 1.55;
  overflow-x: auto; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; max-height: 460px;
}
.ausgabe .a-fuss { padding: 12px 16px; border-top: 1px solid var(--linie); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---- Fehlliste ----------------------------------------------------------- */
.fehlt-liste { margin: 10px 0 0; padding-left: 20px; font-size: 14.5px; color: var(--text-weich); }
.fehlt-liste li { margin-bottom: 3px; }

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

@media (max-width: 620px) {
  main { padding: 20px 15px 70px; }
  .marke-inner { padding: 11px 15px; gap: 9px; }
  .marke-titel { font-size: 13px; }
  .reiter { top: 43px; }
  .reiter-inner { padding: 0 15px; }
  .karte, .abschnitt { border-radius: 12px; }
  .abschnitt > summary { padding: 14px 16px; }
  .abschnitt-koerper { padding: 0 16px 16px; }
  .vorgang { padding: 14px; gap: 12px; flex-wrap: wrap; }
  .vorgang-stand { gap: 12px; }
}