src/main/resources/eu/mulk/aendggner/web/style.css

/* SPDX-FileCopyrightText: 2026 Matthias Andreas Benkard <code@mail.matthias.benkard.de>
   SPDX-License-Identifier: AGPL-3.0-or-later */

/* Ein Vordruck nach dem Vorbild der amtlichen Steuerformulare. Dort gilt eine einzige,
   durchgehaltene Regel, und sie steht sogar im Formular selbst: „Weiße Felder bitte
   ausfüllen“. Grau ist, was die Stelle gedruckt hat — Beschriftungen, Leitspalten,
   Abschnittsköpfe, die Verfügung am Ende. Weiß ist, was der Antragsteller beiträgt.
   Diese Regel trägt hier die gesamte Gestaltung.

   Alles andere folgt daraus: schwarze Haarlinien, aneinanderstoßende Zellen ohne Abstand
   und ohne Rundung, kleine enge Groteske, Beschriftung innen oben links im Feld,
   Erläuterungen in noch kleinerer Schrift dahinter, die Vordrucknummer winzig in den
   Fußecken. Schmuckfarbe gibt es nicht: Rot und Grün treten allein dort auf, wo sie etwas
   bedeuten — Fehler und Bestätigung —, und nie als einziger Träger der Aussage. */
:root {
  color-scheme: light dark;
  --fg: #000;
  --papier: #fff;
  --feld: #fff;
  --grund: #d5d5d5;
  --tint: #e4e4e4;
  --linie: #000;
  --muted: #444;
  --tisch: #9a9a9a;
  --warnung: #8b0000;
  --bestaetigung: #005f00;
}

/* Im Dunkeln kehrt sich nicht die Farbe um, sondern das Verhältnis: Der Grund der Stelle
   bleibt heller als das Feld, das auszufüllen ist. */
@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e8e8e8;
    --papier: #1a1a1a;
    --feld: #101010;
    --grund: #333333;
    --tint: #242424;
    --linie: #7a7a7a;
    --muted: #a8a8a8;
    --tisch: #000;
    --warnung: #ffb3b3;
    --bestaetigung: #b3ffb3;
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--tisch);
}

body {
  margin: 0;
  padding: 1.5rem 1rem;
  font-family: Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--fg);
}

/* Der Bogen. Kein Rahmen: Ein Blatt Papier hat keinen, die Kante entsteht aus dem
   Farbunterschied zur Unterlage. */
.bogen {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.75rem 1.75rem 0.75rem;
  background: var(--papier);
}

@media (max-width: 40rem) {
  body { padding: 0; }
  .bogen { padding: 1rem 0.75rem 0.5rem; }
}

h1 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  line-height: 1.35;
}

/* Die Fassungsangabe unter dem Titel; das Datum setzt deploy/webpaket.sh beim Bau ein. */
.fassung {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  color: var(--muted);
}

.stelle {
  margin: 0 0 0.9rem;
  font-size: 0.6875rem;
  color: var(--muted);
}

/* Ohne Schmuckfarbe trägt allein die Unterstreichung das Klick-Signal. */
a {
  color: inherit;
  text-decoration: underline;
}

/* Der Vorgabe-Umriss ist auf dem grauen Raster kaum auszumachen. */
:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 1px;
}

/* „Zur Beachtung“ steht im Muster als weißer Kasten mit fetter Anrede und dichtem
   Fließtext; die Überschrift bleibt in der Zeile des ersten Absatzes. */
.beachtung {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--linie);
  background: var(--feld);
  font-size: 0.75rem;
}

.beachtung h2 {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
}

.beachtung p {
  margin: 0 0 0.5rem;
}

.beachtung p:last-child {
  margin-bottom: 0;
}

.fehlt {
  padding-left: 0.6rem;
  border-left: 3px solid var(--warnung);
  font-weight: bold;
}

/* Der Ausfüllhinweis ist im Muster ein eigener Streifen über dem Feldblock — er erklärt
   genau die Regel, nach der dieses Blatt gesetzt ist. */
.ausfuellhinweis {
  margin: 0.9rem 0 0;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--linie);
  border-bottom: none;
  background: var(--grund);
  font-size: 0.75rem;
  font-weight: bold;
}

.kreuz {
  display: inline-block;
  width: 1.1em;
  border: 1px solid var(--linie);
  background: var(--feld);
  font-weight: bold;
  text-align: center;
}

/* Der Feldblock. Die Rahmen sind halbiert — außen oben und links, an den Zellen unten und
   rechts —, damit zwischen zwei Zellen nur eine einzige Haarlinie steht und nicht zwei. */
.vordruck {
  border-top: 1px solid var(--linie);
  border-left: 1px solid var(--linie);
  background: var(--grund);
}

.block {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
}

/* Der Grund steht ausdrücklich an der Zelle und nicht nur am Block: Im Druck fällt sonst
   die Fläche des Blocks weg und die Leitspalte käme weiß heraus. */
.leitspalte {
  padding: 0.4rem 0.5rem;
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  background: var(--grund);
  font-size: 0.6875rem;
  font-weight: bold;
}

/* Auf dem Telefon nähme die Leitspalte die halbe Zeile. Sie tritt dann über ihre Felder,
   als voller Beschriftungsstreifen — eine Form, die das Muster ebenfalls kennt. */
@media (max-width: 34rem) {
  .block {
    grid-template-columns: 1fr;
  }

  .leitspalte {
    border-right: none;
  }
}

.feld {
  padding: 0.25rem 0.5rem 0.4rem;
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  background: var(--feld);
}

/* Die Beschriftung steht klein im Feld oben links, die Erläuterung noch kleiner dahinter;
   darunter bleibt der Platz für die Eintragung. */
label {
  display: block;
  font-size: 0.6875rem;
  font-weight: bold;
}

.erl {
  font-weight: normal;
  font-size: 0.6875rem;
  color: var(--muted);
}

input[type="file"] {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.75rem;
}

/* Die Eintragung von Hand steht auf einer Linie, wie im gedruckten Vordruck; sie ist kurz,
   weil dort nur eine Artikelnummer hingehört. */
input[type="text"] {
  width: 8rem;
  margin-top: 0.35rem;
  padding: 0.1rem 0.2rem;
  border: none;
  border-bottom: 1px solid var(--linie);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
}

input[type="text"]::placeholder {
  color: var(--muted);
}

/* Der Dateiwähler ist der einzige Knopf im Feld und trägt deshalb die Form der übrigen
   Eintragungsfelder: eckig, haarfein umrandet, weiß. */
input[type="file"]::file-selector-button {
  margin-right: 0.6rem;
  padding: 0.15rem 0.7rem;
  border: 1px solid var(--linie);
  background: var(--feld);
  color: var(--fg);
  font: inherit;
  font-size: 0.6875rem;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background: var(--grund);
}

/* Nebenangaben, die selten auszufüllen sind, stehen hinter einer Klappe. Deren Aufschrift
   tritt an die Stelle der Leitspalte und läuft über die volle Breite — dieselbe Form, die
   die Leitspalte auf dem Telefon ohnehin annimmt. Das Dreieck ist dasselbe wie an der
   Ausfüllhilfe. */
.weitere summary {
  padding: 0.4rem 0.5rem;
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  background: var(--grund);
  font-size: 0.6875rem;
  font-weight: bold;
  cursor: pointer;
  list-style: none;
}

.weitere summary::-webkit-details-marker {
  display: none;
}

.weitere summary::before {
  content: "\25B8\00A0";
}

.weitere[open] summary::before {
  content: "\25BE\00A0";
}

/* Der Nachsatz zu einem Ankreuzfeld steht unter dem Text, nicht neben ihm, und rückt bis
   unter die Aufschrift ein. */
.nachsatz {
  margin: 0.15rem 0 0 1.6rem;
}

/* Das Ankreuzfeld steht vor dem Text und wird angekreuzt, nicht angehakt. */
.ankreuzfeld label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: normal;
  font-size: 0.75rem;
}

.ankreuzfeld input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  border: 1px solid var(--linie);
  background: var(--feld);
  cursor: pointer;
}

.ankreuzfeld input:checked::before {
  content: "\00D7";
  position: absolute;
  inset: 0;
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 0.85rem;
  text-align: center;
  color: var(--fg);
}

.absenden {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding-top: 0.5rem;
}

button {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: bold;
  padding: 0.4rem 1.1rem;
  border: 2px solid var(--linie);
  background: var(--feld);
  color: var(--fg);
  cursor: pointer;
}

/* Umkehr statt brightness(): An einem weißen Knopf richtet die nichts aus. */
button:hover {
  background: var(--fg);
  color: var(--papier);
}

/* grayscale() ist an einem grauen Knopf wirkungslos. */
button[disabled] {
  opacity: 0.5;
  cursor: progress;
}

button[disabled]:hover {
  background: var(--feld);
  color: var(--fg);
}

/* Die Verfügung ist im Muster der Abschnitt, den die Stelle ausfüllt: grau umrandet,
   mit zentrierter fetter Überschrift. Er steht auch dann schon da, wenn er noch leer ist —
   ein Vordruck zeigt seine Abschnitte, bevor sie ausgefüllt sind. */
.verfuegung {
  margin-top: 1.25rem;
  border: 1px solid var(--linie);
  background: var(--grund);
}

.verfuegung h2 {
  margin: 0;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--linie);
  font-size: 0.75rem;
  text-align: center;
}

.verfuegungsfeld {
  padding: 0.5rem;
}

.platzhalter {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

/* Steht eine Meldung, so tritt der Platzhalter zurück. */
#meldung:not([hidden]) + .platzhalter {
  display: none;
}

/* Die Meldung ist die Eintragung der Stelle und deshalb weiß. Ihr Zeichen im Steg — ✓ oder
   ! — trägt den Zustand auch dort, wo die Farbe nicht ankommt. Während der Arbeit steht
   weder Zeichen noch Farbe, weil noch nichts feststeht. */
.meldung {
  margin: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--linie);
  background: var(--feld);
  font-size: 0.8125rem;
}

.meldung.arbeit {
  color: var(--muted);
}

.meldung.fertig,
.meldung.fehler {
  position: relative;
  padding-left: 2rem;
  border-left-width: 4px;
}

.meldung.fertig::before,
.meldung.fehler::before {
  position: absolute;
  left: 0.7rem;
  font-weight: bold;
}

.meldung.fertig {
  border-left-color: var(--bestaetigung);
}

.meldung.fertig::before {
  content: "\2713";
  color: var(--bestaetigung);
}

.meldung.fehler {
  border-left-color: var(--warnung);
  font-weight: bold;
}

.meldung.fehler::before {
  content: "!";
  color: var(--warnung);
}

/* Die Ausfüllhilfe ist ein Merkblatt und liegt dem Vordruck bei, statt in ihm zu stehen. */
.ausfuellhilfe {
  margin-top: 1.25rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--linie);
  background: var(--tint);
  font-size: 0.75rem;
}

.ausfuellhilfe summary {
  font-weight: bold;
  cursor: pointer;
  list-style: none;
}

.ausfuellhilfe summary::-webkit-details-marker {
  display: none;
}

.ausfuellhilfe summary::before {
  content: "\25B8\00A0";
}

.ausfuellhilfe[open] summary::before {
  content: "\25BE\00A0";
}

.ausfuellhilfe > :not(summary) {
  margin: 0.6rem 0 0;
}

.ausfuellhilfe dt {
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--linie);
  font-weight: bold;
}

.ausfuellhilfe dd {
  margin: 0.2rem 0 0;
}

.ausfuellhilfe .erl {
  display: block;
}

/* Im Muster steht unten links die Vordrucknummer und unten rechts der Ausgabestand, beide
   winzig und ohne Zierrat. Die Pflichtangaben stehen dazwischen. */
footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin-top: 1.5rem;
  padding: 0.4rem 0 0.6rem;
  font-size: 0.625rem;
  color: var(--muted);
}

footer nav {
  font-size: 0.6875rem;
}

.vordrucknummer,
.ausgabe {
  white-space: nowrap;
}

/* Impressum und Datenschutz: dieselbe Anmutung, aber Fließtext statt Feldblock. */
.bogen > main {
  padding-bottom: 0.5rem;
  font-size: 0.8125rem;
}

main h1 {
  font-size: 1rem;
}

main h2 {
  margin: 1.1rem 0 0.3rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--linie);
  background: var(--grund);
  font-size: 0.6875rem;
}

main p,
main address {
  margin: 0.4rem 0;
  max-width: 42rem;
}

address {
  font-style: normal;
}

code {
  font-size: 0.9375em;
}

/* Ein Vordruck gehört ausgedruckt: ohne Unterlage, ohne Ränder. Gedruckt wird stets auf
   weißes Papier, auch aus einem dunkel eingestellten Browser heraus — prefers-color-scheme
   gilt im Druck fort. Deshalb ist das ganze Farbgerüst zurückzusetzen und nicht nur ein
   Teil davon. Das Grau selbst muss mitgedruckt werden: Es sagt, welche Felder auszufüllen
   sind, und ist damit keine Zier. */
@media print {
  :root {
    --fg: #000;
    --papier: #fff;
    --feld: #fff;
    --grund: #d5d5d5;
    --tint: #e4e4e4;
    --linie: #000;
    --muted: #333;
    --tisch: #fff;
    --warnung: #8b0000;
    --bestaetigung: #005f00;
  }

  body { padding: 0; font-size: 9pt; }
  .bogen { max-width: none; padding: 0; }
  .ausfuellhilfe { display: none; }
  a { text-decoration: none; }
  .block, .beachtung, .verfuegung { break-inside: avoid; }

  .leitspalte, .ausfuellhinweis, .verfuegung, .verfuegung h2, .kreuz, .ausfuellhilfe,
  .weitere summary {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}