/* belege.vanlaack.at. Kühles Papier, Stempeltinte als einziger Akzent, Haarlinien statt Karten.
   Radien: Bedienelemente 8px, Ergebnisfeld 12px, Schnellwahl als Pille. */

:root {
  color-scheme: light dark;
  --grund: oklch(0.975 0.006 255);
  --feld: oklch(0.995 0.003 255);
  --linie: oklch(0.885 0.012 258);
  --linie-stark: oklch(0.78 0.016 258);
  --text: oklch(0.235 0.025 262);
  --text-2: oklch(0.46 0.025 262);
  --tinte: oklch(0.47 0.135 262);
  --tinte-stark: oklch(0.40 0.14 262);
  --tinte-weich: oklch(0.935 0.032 262);
  --tinte-text: oklch(0.985 0.008 262);
  --warn: oklch(0.50 0.16 30);
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --aus: cubic-bezier(0.23, 1, 0.32, 1);
  --r: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: oklch(0.19 0.02 262);
    --feld: oklch(0.225 0.022 262);
    --linie: oklch(0.31 0.024 262);
    --linie-stark: oklch(0.42 0.026 262);
    --text: oklch(0.93 0.01 262);
    --text-2: oklch(0.73 0.02 262);
    --tinte: oklch(0.73 0.12 262);
    --tinte-stark: oklch(0.80 0.10 262);
    --tinte-weich: oklch(0.29 0.055 262);
    --tinte-text: oklch(0.17 0.03 262);
    --warn: oklch(0.77 0.12 35);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--grund);
  color: var(--text);
  font: 400 1rem/1.5 var(--schrift);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--linie-stark) transparent;
  caret-color: var(--tinte);
}

body { margin: 0; }
::selection { background: var(--tinte-weich); color: var(--text); }

h1, h2, p, ul, fieldset { margin: 0; }
h1 { font-size: 1.75rem; line-height: 1.2; font-weight: 650; letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 650; letter-spacing: -0.01em; text-wrap: balance; }

a { color: var(--tinte); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--tinte-stark); text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; border-radius: 4px; }

.seite { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem 5rem; }

.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--linie);
}
.marke { font-weight: 650; letter-spacing: -0.01em; }
.marke span { font-weight: 400; color: var(--text-2); margin-left: 0.25rem; }

.abschnitt + .abschnitt { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--linie); }
.einleitung { margin-top: 0.5rem; color: var(--text-2); max-width: 60ch; }
.hinweis { color: var(--text-2); font-size: 0.9375rem; margin-top: 0.75rem; max-width: 62ch; }
.leer { color: var(--text-2); margin-top: 0.75rem; }

/* Formular ------------------------------------------------------------------------------------------ */

.formular { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend, label { font-weight: 600; font-size: 0.9375rem; }
legend { padding: 0; margin-bottom: 0.5rem; }
.feld { display: grid; gap: 0.375rem; align-content: start; }
.feld-hilfe { font-size: 0.875rem; color: var(--text-2); }
.feld-fehler { font-size: 0.9375rem; color: var(--warn); font-weight: 500; }

input[type="text"], input[type="password"], input[type="date"] {
  font: inherit; color: var(--text); background: var(--feld);
  height: 2.75rem; padding: 0 0.75rem; width: 100%;
  border: 1px solid var(--linie-stark); border-radius: var(--r);
  font-variant-numeric: tabular-nums;
  transition: border-color 150ms ease;
}
input:hover { border-color: var(--text-2); }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
input:focus-visible { outline-offset: 1px; border-color: var(--tinte); }
input[aria-invalid="true"] { border-color: var(--warn); }

.wahl { display: grid; border-block: 1px solid var(--linie); }

.wahl-zeile {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start;
  padding: 0.75rem 0; cursor: pointer; font-weight: 400;
}
.wahl-zeile + .wahl-zeile { border-top: 1px solid var(--linie); }
.wahl-zeile:hover .wahl-name { color: var(--tinte-stark); }
.wahl-zeile:has(input:focus-visible) { outline: 2px solid var(--tinte); outline-offset: 2px; border-radius: 4px; }
.wahl-zeile input { width: 1.125rem; height: 1.125rem; margin: 0.15rem 0 0; accent-color: var(--tinte); }
.wahl-zeile input:focus-visible { outline: none; }
.wahl-text { display: grid; gap: 0.125rem; min-width: 0; }
.wahl-name { font-weight: 600; }
.wahl-adresse { color: var(--text-2); font-size: 0.875rem; overflow-wrap: anywhere; }

.schnellwahl { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.875rem; }
.datum-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; max-width: 28rem; }
.datum-paar label { font-weight: 500; color: var(--text-2); }

/* Knöpfe --------------------------------------------------------------------------------------------- */

.knopf {
  font: inherit; font-weight: 600; font-size: 0.9375rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 1.125rem; white-space: nowrap;
  color: var(--text); background: var(--feld);
  border: 1px solid var(--linie-stark); border-radius: var(--r);
  text-decoration: none; cursor: pointer;
  transition: transform 140ms var(--aus), background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.knopf:hover { border-color: var(--text-2); color: var(--text); text-decoration: none; }
.knopf:active { transform: scale(0.98); }
.knopf:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.knopf--haupt:disabled { opacity: 1; background: var(--tinte-weich); border-color: var(--linie-stark); color: var(--text-2); }

.knopf--haupt { background: var(--tinte); border-color: var(--tinte); color: var(--tinte-text); justify-self: start; }
.knopf--haupt:hover { background: var(--tinte-stark); border-color: var(--tinte-stark); color: var(--tinte-text); }

.knopf--leise { border-color: transparent; background: transparent; color: var(--text-2); font-weight: 500; padding: 0 0.5rem; }
.knopf--leise:hover { border-color: transparent; color: var(--text); text-decoration: underline; }

.knopf--chip { min-height: 2.25rem; padding: 0 0.875rem; border-radius: 999px; font-weight: 500; }
.knopf--chip[aria-pressed="true"] { background: var(--tinte-weich); border-color: var(--tinte); color: var(--tinte-stark); }

.formular-fuss { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.gespeichert { color: var(--text-2); font-size: 0.9375rem; }

/* Ergebnisfeld --------------------------------------------------------------------------------------- */

.ergebnis {
  margin-top: 1.75rem; padding: 1.25rem 1.25rem 1.125rem;
  background: var(--feld); border: 1px solid var(--linie-stark); border-radius: 12px;
  display: grid; gap: 0.625rem;
  transition: opacity 220ms var(--aus), transform 220ms var(--aus);
  @starting-style { opacity: 0; transform: translateY(6px); }
}
.ergebnis--fehler, .ergebnis--unvollstaendig { border-color: var(--warn); }
.ergebnis-zeitraum { color: var(--text-2); font-size: 0.875rem; }
.ergebnis-titel { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.summe { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin-right: 0.125rem; }
.ergebnis-wo { color: var(--text); overflow-wrap: anywhere; }
.ergebnis-zahlen { color: var(--text-2); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.ergebnis-aktion { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.25rem; }
.groesse { color: var(--text-2); font-variant-numeric: tabular-nums; }

.linie { height: 3px; background: var(--linie); border-radius: 2px; overflow: hidden; }
.linie span {
  display: block; height: 100%; background: var(--tinte);
  transform: scaleX(var(--anteil, 0.03)); transform-origin: left;
  transition: transform 700ms var(--aus);
}

.warnung { border-top: 1px solid var(--linie); padding-top: 0.75rem; }
.warnung strong { color: var(--warn); }
.warnung ul { margin-top: 0.375rem; padding-left: 1.25rem; overflow-wrap: anywhere; }
.nochmals { margin-top: 0.75rem; }

.aufstellung { margin-top: 0.25rem; border-top: 1px solid var(--linie); padding-top: 0.75rem; }
.aufstellung summary {
  cursor: pointer; color: var(--text-2); font-size: 0.9375rem; width: fit-content;
  list-style: none; display: flex; align-items: center; gap: 0.5rem;
}
.aufstellung summary::-webkit-details-marker { display: none; }
.pfeil {
  width: 0.45rem; height: 0.45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform 180ms var(--aus);
}
.aufstellung[open] .pfeil { transform: rotate(45deg); }
.aufstellung summary:hover { color: var(--tinte); }
.aufstellung table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-variant-numeric: tabular-nums; font-size: 0.9375rem; }
.aufstellung caption { text-align: left; font-weight: 600; padding-bottom: 0.375rem; }
.aufstellung caption span { font-weight: 400; color: var(--text-2); margin-left: 0.375rem; font-size: 0.875rem; }
.aufstellung th, .aufstellung td { padding: 0.3rem 0; text-align: right; vertical-align: top; }
.aufstellung th:first-child { text-align: left; font-weight: 400; padding-right: 1rem; overflow-wrap: anywhere; }
.aufstellung thead th { color: var(--text-2); font-weight: 500; font-size: 0.8125rem; }
.aufstellung td { width: 5rem; }
.aufstellung tfoot th, .aufstellung tfoot td { border-top: 1px solid var(--linie); font-weight: 600; padding-top: 0.5rem; }
.aufstellung tfoot th:first-child { font-weight: 600; }
.zeile-fehler, .zeile-fehler th { color: var(--warn); }
.zeile-grund { display: block; font-size: 0.8125rem; }

/* Erstellte ZIPs ------------------------------------------------------------------------------------- */

.zips { list-style: none; padding: 0; margin-top: 1rem; }
.zip {
  display: grid; grid-template-columns: 1fr auto auto; column-gap: 1.25rem; row-gap: 0.125rem;
  grid-template-areas: "link pdfs groesse" "wer wann wann";
  padding: 0.75rem 0; font-variant-numeric: tabular-nums;
}
.zip + .zip { border-top: 1px solid var(--linie); }
.zip-link { grid-area: link; font-weight: 600; }
.zip-wer { grid-area: wer; color: var(--text-2); font-size: 0.875rem; }
.zip-pdfs { grid-area: pdfs; text-align: right; }
.zip-groesse { grid-area: groesse; text-align: right; color: var(--text-2); }
.zip-wann { grid-area: wann; text-align: right; color: var(--text-2); font-size: 0.875rem; }
.zip-warnung { color: var(--warn); font-weight: 600; }

@media (max-width: 30rem) {
  .zip { grid-template-columns: 1fr auto; grid-template-areas: "link pdfs" "wer groesse" "wann wann"; }
  .zip-wann { text-align: left; }
}

/* Anmeldung ------------------------------------------------------------------------------------------ */

.anmeldung { max-width: 24rem; margin-top: 3rem; }
.anmeldung .hinweis { margin-top: 0.5rem; }
.widmung { margin-top: 0.375rem; color: var(--tinte); font-weight: 500; }

@media (max-width: 30rem) {
  .seite { padding: 0 1rem 4rem; }
  .kopf { margin-bottom: 2rem; }
  h1 { font-size: 1.5rem; }
  .abschnitt + .abschnitt { margin-top: 2.75rem; padding-top: 2rem; }
  .knopf--haupt { justify-self: stretch; }
  .aufstellung caption span { display: block; margin: 0.125rem 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ergebnis, .linie span, .knopf, .pfeil { transition: none; }
  .knopf:active { transform: none; }
}