/* Einreichungsseite Stamm Adler. Farben aus dem Adlerabzeichen, Schrift Barlow (selbst gehostet). */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/Barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/Barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/BarlowCondensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/BarlowCondensed-700.woff2") format("woff2"); }

:root {
  --tanne: #17512b;
  --tanne-tief: #0f3a1e;
  --rot: #d9261c;
  --rot-druck: #b81d14;
  --blau: #1f5fbf;
  --grund: #f2f5f0;
  --flaeche: #ffffff;
  --tinte: #14201a;
  --leise: #4a5a50;
  --linie: #c6d1c8;
  --linie-fest: #6f8075;
  --platzhalter: #5a6a5f;
  --tint: #e2efe6;
  --warn-grund: #fff2dc;
  --warn-text: #6b2d00;
  --warn-rand: #b45309;
  --auf-tanne: #ffffff;
  --auf-tanne-leise: #d6e6da;
  --schrift: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-schmal: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tanne: #0f3a1e;
    --tanne-tief: #0a2915;
    --rot: #c4211a;
    --rot-druck: #a81a14;
    --blau: #7fb0f5;
    --grund: #0f1712;
    --flaeche: #17221b;
    --tinte: #e9f0ea;
    --leise: #a3b5a8;
    --linie: #2c3d32;
    --linie-fest: #7d9484;
    --platzhalter: #8fa396;
    --tint: #1d3324;
    --warn-grund: #3a2410;
    --warn-text: #ffd9a8;
    --warn-rand: #e0883a;
    --auf-tanne: #ffffff;
    --auf-tanne-leise: #b9d0be;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; scroll-padding-bottom: 120px; }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 400 1.0625rem/1.5 var(--schrift); }
::selection { background: var(--blau); color: #fff; }
input, select, button, textarea { font: inherit; color: inherit; caret-color: var(--blau); }
a { color: var(--blau); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; border-radius: 3px; }
@supports (scrollbar-color: auto) { html { scrollbar-color: var(--linie-fest) var(--grund); } }
.zeichen-satz { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprung { position: absolute; left: -999px; top: 8px; background: var(--flaeche); padding: 8px 12px; z-index: 10; }
.sprung:focus { left: 8px; }

/* Kopf */
.kopf { background: var(--tanne); color: var(--auf-tanne); padding: calc(10px + env(safe-area-inset-top)) 16px 12px; }
.kopf-innen { max-width: 38rem; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.marke { flex: none; display: block; line-height: 0; }
.marke img { display: block; width: 56px; height: 56px; }
.kopf-text { min-width: 0; }
.kopf-name { margin: 2px 0 0; font: 600 0.9375rem/1.1 var(--schrift-schmal); letter-spacing: 0.08em; text-transform: uppercase; color: var(--auf-tanne-leise); }
.titel { margin: 0; font: 700 2rem/1.05 var(--schrift-schmal); letter-spacing: 0.005em; display: flex; align-items: center; gap: 10px; }

/* Fährtenzeichen */
.zeichen { width: 1.5rem; height: 1.5rem; flex: none; }
.zeichen-gross { width: 2.5rem; height: 2.5rem; }

/* Inhalt */
.seite { max-width: 38rem; margin: 0 auto; padding: 14px 16px 0; }
.seite:focus { outline: none; }
.abschnitt { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.abschnitt-titel { margin: 0 0 12px; padding: 0; font: 700 1.5rem/1.15 var(--schrift-schmal); letter-spacing: 0.01em; }
legend.abschnitt-titel { float: left; width: 100%; }
legend.abschnitt-titel + * { clear: both; }
p { margin: 0 0 12px; text-wrap: pretty; }

/* Auswahl: zwei Felder nebeneinander */
.wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.wahl-feld { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; min-height: 64px; background: var(--flaeche); border: 1.5px solid var(--linie-fest); border-radius: 6px; cursor: pointer; }
.wahl-feld input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wahl-feld .zeichen { color: var(--leise); grid-row: 1 / span 2; }
.wahl-titel { font-weight: 600; line-height: 1.15; }
.wahl-sub { display: block; grid-column: 2; color: var(--leise); font-size: 0.875rem; line-height: 1.2; }
.wahl-feld:has(input:checked) { border-color: var(--blau); outline: 2px solid var(--blau); background: var(--flaeche); }
.wahl-feld:has(input:checked) .zeichen { color: var(--blau); }
.wahl-feld:has(input:focus-visible) { outline: 3px solid var(--blau); outline-offset: 2px; }
.wahl .feldfehler { grid-column: 1 / -1; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Felder */
.feld { margin: 0 0 12px; }
.beschriftung { display: block; margin: 0 0 3px; font-weight: 600; font-size: 0.9375rem; }
input[type="text"], input[type="date"], select {
  display: block; width: 100%; min-height: 48px; padding: 8px 12px; background: var(--flaeche);
  border: 1.5px solid var(--linie-fest); border-radius: 6px; font-size: 1.0625rem; appearance: none; -webkit-appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--leise) 50%), linear-gradient(135deg, var(--leise) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
input::placeholder { color: var(--platzhalter); opacity: 1; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--warn-rand); border-width: 2px; background-color: var(--warn-grund); }
.pflicht::after, .pflicht-text::after { content: " *"; font-weight: 700; color: var(--tinte); }
.frei { font-weight: 400; color: var(--leise); font-size: 0.875rem; margin-left: 4px; }
.legende { height: 0; margin: 0; padding-top: 2px; text-align: right; color: var(--leise); font-size: 0.875rem; line-height: 1.2; }
.gespeichert { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; min-height: 48px; padding: 4px 4px 4px 12px; background: var(--flaeche); border: 1.5px solid var(--linie); border-radius: 6px; }
.gespeichert .link { padding: 0 10px; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.hinweis { margin: 6px 0 0; color: var(--leise); font-size: 0.9375rem; }
.bon > .feldfehler { margin: 0 0 10px; }
.feldfehler { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0; padding: 8px 10px; background: var(--warn-grund); color: var(--warn-text); border-radius: 4px; font-size: 0.9375rem; font-weight: 500; }
.feldfehler .zeichen { width: 1.125rem; height: 1.125rem; margin-top: 2px; color: var(--warn-rand); }
.mit-einheit { position: relative; display: block; }
.mit-einheit input { padding-right: 40px; font-variant-numeric: tabular-nums; }
.einheit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--leise); font-weight: 600; pointer-events: none; }
.reihe { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0 12px; }
.reihe .feld-zweck { grid-column: 2; }
form[data-modus="nachreichen"] .reihe .feld-zweck { grid-column: 1 / -1; }
.paar { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 48rem) { .paar { grid-template-columns: 1fr 1fr; gap: 0 12px; } }
.haken { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; margin: 0 0 10px; cursor: pointer; font-size: 0.9375rem; line-height: 1.35; }
.haken input { width: 22px; height: 22px; margin: 0; accent-color: var(--blau); }

/* Beleg */
.bon { position: relative; margin: 0 0 10px; padding: 8px 12px 0; background: var(--flaeche); border: 1.5px solid var(--linie); border-radius: 6px; min-width: 0; }
.bon-kopf { padding: 0; font: 700 1.125rem/1 var(--schrift-schmal); letter-spacing: 0.02em; float: left; width: 100%; margin-bottom: 10px; min-height: 32px; }
.bon-kopf + * { clear: both; }
.bon-aktionen { position: absolute; top: 6px; right: 8px; display: flex; gap: 0; }
.aktion { min-height: 44px; padding: 0 10px; background: none; border: 0; color: var(--leise); font-size: 0.9375rem; text-decoration: underline; cursor: pointer; }
.aktion[hidden] { display: none; }
.aktion-ansehen { display: inline-flex; align-items: center; gap: 6px; margin: 0; min-height: 32px; padding: 0 10px; border: 1.5px solid var(--linie-fest); border-radius: 6px; color: var(--tinte); text-decoration: none; font-weight: 600; }
.aktion-ansehen .zeichen { width: 1.125rem; height: 1.125rem; }
.lupe { position: absolute; right: 3px; bottom: 3px; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--tanne); color: #fff; }
.datei { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; min-height: 72px; padding: 8px; border: 1.5px solid var(--linie-fest); border-radius: 6px; cursor: pointer; background: var(--grund); }
.datei:focus-within { outline: 3px solid var(--blau); outline-offset: 2px; }
.datei.hat-fehler { border-color: var(--warn-rand); background: var(--warn-grund); }
.datei.gewaehlt { border-style: solid; border-color: var(--tanne); }
.datei-eingabe { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; z-index: 1; }
.datei.gewaehlt .datei-vorschau { position: relative; z-index: 2; cursor: zoom-in; }
.datei-vorschau .zeichen { width: 2rem; height: 2rem; }
.datei-vorschau { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 4px; background: var(--flaeche); border: 1.5px solid var(--linie); overflow: hidden; color: var(--leise); font: 700 0.875rem/1 var(--schrift-schmal); letter-spacing: 0.04em; }
.datei-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.datei-titel { display: block; font-weight: 600; overflow-wrap: anywhere; }
.datei-info { display: block; color: var(--leise); font-size: 0.9375rem; overflow-wrap: anywhere; }

/* Betragsvorschlag */
.vorschlag { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; padding: 6px 6px 6px 12px; background: var(--tint); border-radius: 4px; }
.vorschlag-text { font-weight: 500; }
.vorschlag-knoepfe { display: flex; gap: 6px; }
.klein-knopf { min-height: 44px; min-width: 44px; padding: 0 14px; background: var(--flaeche); border: 1.5px solid var(--linie-fest); border-radius: 6px; font-weight: 600; cursor: pointer; }
.klein-knopf:hover { border-color: var(--tinte); }

/* Beleg ansehen */
.betrachter { padding: 0; border: 0; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; background: var(--grund); color: var(--tinte); }
.betrachter::backdrop { background: rgba(0, 0, 0, 0.6); }
.betrachter-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--tanne); color: var(--auf-tanne); height: 60px; }
.betrachter-titel { font: 700 1.25rem/1 var(--schrift-schmal); letter-spacing: 0.02em; }
.betrachter-knoepfe { display: flex; gap: 6px; }
.betrachter-knoepfe .klein-knopf { color: var(--tinte); }
.betrachter-flaeche { overflow: auto; height: calc(100vh - 60px); height: calc(100dvh - 60px); touch-action: pan-x pan-y pinch-zoom; background: #222; }
.betrachter-flaeche img { display: block; max-width: none; height: auto; cursor: zoom-in; }
.zoom1 { width: 100%; }
.zoom2 { width: 200%; }
.zoom3 { width: 300%; }
.zoom4 { width: 450%; }
@media (min-width: 48rem) { .zoom1 { width: min(100%, 60rem); margin: 0 auto; } }

/* Aktionen */
button { font: inherit; }
.haupt, .zweit { display: block; width: 100%; min-height: 52px; padding: 12px 18px; border-radius: 6px; border: 2px solid transparent; font-weight: 600; font-size: 1.125rem; letter-spacing: 0.01em; text-align: center; text-decoration: none; cursor: pointer; }
.haupt { background: var(--rot); color: #fff; }
.haupt:hover { background: var(--rot-druck); }
.haupt:active { transform: translateY(1px); }
.haupt:disabled { opacity: 0.65; cursor: progress; }
.zweit { background: var(--flaeche); color: var(--tinte); border-color: var(--linie-fest); margin: 0 0 12px; min-height: 48px; font-size: 1rem; }
.zweit:hover { border-color: var(--tinte); }
.zweit[hidden] { display: none; }
.link { background: none; border: 0; padding: 8px 4px; min-height: 44px; color: var(--blau); text-decoration: underline; cursor: pointer; }
.loeschen { text-align: center; margin: 0 0 8px; }
.loeschen .link { font-size: 0.9375rem; color: var(--leise); text-wrap: balance; }

/* Feste Leiste mit Summe */
.leiste { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: 7.5rem 1fr; gap: 10px; align-items: center; margin: 0 -16px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--grund); border-top: 1.5px solid var(--linie); }
.summe { margin: 0; display: grid; line-height: 1.1; }
.summe-text { color: var(--leise); font-size: 0.875rem; font-weight: 500; }
.summe-betrag { white-space: nowrap; font: 700 1.5rem/1.1 var(--schrift-schmal); font-variant-numeric: tabular-nums; }
.klein { margin: 12px 0 16px; color: var(--leise); font-size: 0.9375rem; }

/* Fehlerliste */
.fehlerliste { margin: 0 0 24px; padding: 14px 16px; background: var(--warn-grund); color: var(--warn-text); border: 2px solid var(--warn-rand); border-radius: 6px; }
.fehlerliste:focus { outline: 3px solid var(--blau); }
.fehlerliste-titel { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 1.25rem/1.1 var(--schrift-schmal); }
.fehlerliste .zeichen { color: var(--warn-rand); }
.fehlerliste ul { margin: 0; padding-left: 20px; }
.fehlerliste a { color: inherit; }

/* Dankeseite, Liste, Text */
.liste { list-style: none; margin: 0; padding: 0; background: var(--flaeche); border: 1.5px solid var(--linie); border-radius: 6px; }
.liste li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--linie); }
.liste li:last-child { border-bottom: 0; }
.liste-betrag { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.liste-summe { font-weight: 700; }
.als-link { display: block; }
.danke-kopf { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin: 0 0 14px; }
.danke-kopf .zeichen { color: var(--tanne); margin-top: 2px; }
.danke-satz { margin: 0; font-size: 1.125rem; }
.liste { margin-bottom: 16px; }
.text { max-width: 36rem; }
.text .abschnitt-titel { margin-top: 24px; }
.falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Fuß */
.fuss { max-width: 38rem; margin: 0 auto; padding: 4px 16px 28px; display: flex; justify-content: flex-start; gap: 16px; flex-wrap: wrap; color: var(--leise); font-size: 0.9375rem; }
.fuss p { margin: 0; }
@media (prefers-color-scheme: dark) { .danke-kopf .zeichen { color: #6fc588; } }
.fuss-links { display: flex; gap: 16px; flex-wrap: wrap; }
.fuss a { display: inline-block; padding: 12px 0; color: var(--leise); }

/* Modusabhängige Teile */
form[data-modus="erstattung"] .nur-nachreichen { display: none; }
form[data-modus="nachreichen"] .nur-erstattung { display: none; }
[hidden] { display: none !important; }

@media (min-width: 48rem) {
  .titel { font-size: 2.5rem; }
  .kopf { padding-top: 14px; padding-bottom: 14px; }
  .marke img { width: 64px; height: 64px; }
  .leiste { margin: 0; border: 1.5px solid var(--linie); border-radius: 6px; bottom: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .zeile, .datei, input, select, .haupt, .zweit { transition: border-color 0.15s ease-out, background-color 0.15s ease-out; }
}