/* Erscheinungsbild nach futureplan.de: Lato, Violett-Blau-Verlauf, Lichtwolke hinter dem Kopf.
   Wiederkehrendes Motiv ist die Form des Logos, ein Kreis mit spitzer Ecke oben links.
   Die Seite ist ein getönter Grund, Inhalte liegen als weiße Bögen darauf.
   Die CSP erlaubt nur eigene Quellen: keine data:-URIs, keine fremden Schriften, keine style-Attribute. */

/* Lato: SIL Open Font License, siehe /fonts/OFL.txt */
@font-face { font-family: Lato; font-weight: 400; font-display: swap; src: url(../fonts/lato-400.woff2) format("woff2"); }
@font-face { font-family: Lato; font-weight: 700; font-display: swap; src: url(../fonts/lato-700.woff2) format("woff2"); }
@font-face { font-family: Lato; font-weight: 900; font-display: swap; src: url(../fonts/lato-900.woff2) format("woff2"); }

:root {
  --tinte: #1d1d1f;
  --grau: #5f5f68;
  --grund: #f4f3f9;
  --flaeche: #f4f3f9;
  --linie: #e3e1ec;
  --feldrand: #8e8b9c;
  --violett: #5d36ee;
  --violett-hell: #efecfe;
  /* Ende des Verlaufs dunkler als das Blau im Logo (#2197d2), damit weiße Schrift AA erreicht */
  --verlauf: linear-gradient(90deg, #5d36ee, #1878b5);
  --gruen: #14733a;
  --gruen-hell: #e2f4e8;
  --rot: #bf2440;
  --rot-hell: #fbe9ec;
  --orange: #8a4b00;
  --orange-hell: #fdefd6;
  --tropfen: 0 1.25rem 1.25rem 1.25rem;
  --rund: .625rem;
  /* Bögen liegen flach auf dem Grund; nur was über der Seite schwebt, wirft einen weiten Schatten */
  --schatten: 0 1px 2px rgba(45, 30, 110, .06), 0 .75rem 1.5rem -1.25rem rgba(45, 30, 110, .28);
  --schatten-schwebend: 0 1px 2px rgba(45, 30, 110, .08), 0 1.25rem 2.5rem -1rem rgba(45, 30, 110, .38);
  --ziel: 2.75rem; /* kleinste Tippfläche */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font: 400 1.0625rem/1.55 Lato, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--tinte);
  background:
    radial-gradient(58rem 24rem at 42% -8rem, rgba(33, 151, 210, .26), transparent 72%),
    radial-gradient(42rem 22rem at 82% -6rem, rgba(93, 54, 238, .2), transparent 72%),
    var(--grund);
  background-repeat: no-repeat;
}

html { scroll-padding-block: 5rem 12rem; }

:focus-visible { outline: 3px solid var(--violett); outline-offset: 2px; }

a { color: var(--violett); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }

h1 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); font-weight: 900; line-height: 1.15; letter-spacing: -.01em; margin: .5rem 0 1.25rem; text-wrap: balance; }
h1 small { font-size: .55em; font-weight: 400; color: var(--grau); letter-spacing: 0; }
h2 { font-size: 1.25rem; font-weight: 900; line-height: 1.25; margin: 0; }
p { margin: 0 0 1rem; max-width: 42rem; }
small { font-size: .875rem; color: var(--grau); }
code { font-size: .9375em; padding: .1em .35em; background: var(--violett-hell); border-radius: .3rem; }

.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Der erste Tab führt direkt zum Inhalt; beim Fokussieren wird der Sprunglink sichtbar. */
.sprunglink:focus { position: fixed; z-index: 10; top: .75rem; left: 1rem; width: auto; height: auto; clip-path: none; white-space: normal; padding: .65rem 1rem; font-weight: 700; color: var(--violett); background: #fff; border: 2px solid var(--violett); border-radius: var(--rund); }

/* Seitenrahmen */
.kopf-innen, .inhalt { width: 100%; max-width: 72rem; margin: 0 auto; padding: 1rem; }
main.inhalt { flex: 1; padding-bottom: 2rem; }
.kopf-innen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem 1rem; padding-top: 1.25rem; }
.marke { display: inline-flex; align-items: center; gap: .85rem; min-height: var(--ziel); color: var(--tinte); text-decoration: none; }
.marke img { display: block; height: 2.1rem; width: auto; }
.marke-text { font-weight: 700; padding-left: .85rem; border-left: 1px solid var(--feldrand); line-height: 1.3; }
.kopf-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .25rem; }
.kopf-nav form { margin: 0; }
.kopf-link, .knopf-link {
  display: inline-flex; align-items: center; min-height: var(--ziel); padding: 0 .85rem;
  font: inherit; font-weight: 700; color: var(--tinte); background: none; border: 0; border-radius: var(--rund); cursor: pointer; text-decoration: none;
  transition: background-color .15s, color .15s;
}
.kopf-link:hover, .knopf-link:hover { color: var(--violett); background: rgba(255, 255, 255, .7); }
.kopf-link[aria-current] { color: var(--violett); background: #fff; box-shadow: var(--schatten); }

.banner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 1rem; padding: .35rem 1rem; color: #fff; font-weight: 700; text-align: center; background: var(--verlauf); }
.banner form { margin: 0; }
.banner .knopf-link { color: #fff; text-decoration: underline; }
.banner :focus-visible { outline-color: #fff; outline-offset: -3px; }
.banner .knopf-link:hover { color: #fff; background: rgba(0, 0, 0, .2); }

.fuss { color: var(--grau); font-size: .9375rem; border-top: 1px solid var(--linie); margin-top: 2rem; background: #fff; }
.fuss-innen { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; padding-block: 1.5rem; }
.fuss strong { color: var(--tinte); }

/* Bögen: spitze Ecke oben links wie im Logo */
.karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--tropfen); padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: 1.5rem; box-shadow: var(--schatten); }
.karte > :last-child { margin-bottom: 0; }
.karte .karte { box-shadow: none; }
.formular + p { margin-top: 1.25rem; }

.meldung { display: flex; gap: .75rem; align-items: baseline; background: #fff; border: 1px solid var(--linie); border-left: 4px solid var(--violett); border-radius: var(--rund); padding: .85rem 1.25rem; max-width: none; box-shadow: var(--schatten); }
.fehler { color: var(--rot); font-weight: 700; margin: 0; padding: .65rem .9rem; background: var(--rot-hell); border-radius: var(--rund); }
.fehlerkarte { border-color: var(--rot); background: linear-gradient(var(--rot-hell), var(--rot-hell)) 0 0 / 100% .375rem no-repeat, #fff; }
.fehlerliste { color: var(--rot); margin: 0; padding-left: 1.25rem; font-weight: 700; }
.fehlerliste li + li { margin-top: .5rem; }
.fehlerliste a { color: inherit; }

/* Anmeldung: die eine große Geste, wie der Einstieg auf futureplan.de */
.anmeldeseite { max-width: 34rem; margin: clamp(1rem, 7vh, 4.5rem) auto 0; text-align: center; }
.anmeldeseite h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem); margin-bottom: .75rem; }
.anmeldeseite p { margin-inline: auto; }
.anmeldung { display: grid; gap: 1.25rem; max-width: 26rem; margin: 2rem auto 0; text-align: left; box-shadow: var(--schatten-schwebend); }

/* Formulare */
.formular { display: grid; gap: 1.25rem; }
.formular > p { margin: 0; }
.karte.formular { max-width: 42rem; }
.karte.formular-breit { max-width: none; }
label { display: grid; gap: .35rem; font-weight: 700; font-size: .9375rem; }
.hinweis { font-weight: 400; color: var(--grau); }

input, select, textarea {
  width: 100%; min-height: 3rem; padding: .6rem .8rem;
  font: inherit; font-size: 1.0625rem; font-weight: 400; color: var(--tinte);
  background: #fff; border: 1px solid var(--feldrand); border-radius: var(--rund);
  transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--violett); }
input:focus, select:focus, textarea:focus { border-color: var(--violett); box-shadow: 0 0 0 4px var(--violett-hell); }
textarea { resize: vertical; }
select { appearance: none; padding-right: 2.25rem; text-overflow: ellipsis; background: #fff url(../img/pfeil.svg) no-repeat right .8rem center; }

input[type=checkbox] {
  appearance: none; flex: none; width: 1.4rem; height: 1.4rem; min-height: 0; padding: 0; cursor: pointer;
  border: 1.5px solid var(--feldrand); border-radius: 0 .45rem .45rem .45rem; box-shadow: none;
  background: #fff url(../img/haken.svg) center / 0 no-repeat;
  transition: background-size .2s cubic-bezier(.3, 1.6, .5, 1), background-color .15s, border-color .15s;
}
input[type=checkbox]:checked { background-color: var(--violett); border-color: var(--violett); background-size: 90%; }
input[type=checkbox]:disabled { background-color: var(--linie); border-color: var(--linie); cursor: default; }
.auswahl { display: inline-flex; align-items: center; justify-content: center; width: var(--ziel); height: var(--ziel); cursor: pointer; }
.auswahl:has(input:disabled) { cursor: default; }
.haken { grid-template-columns: auto 1fr; gap: .75rem; font-size: 1.0625rem; font-weight: 400; min-height: var(--ziel); padding-block: .55rem; cursor: pointer; }
.haken input { margin-top: .1rem; }
/* Die verbindliche Zusage: hebt sich ab und zeigt, sobald sie gegeben ist */
.bestaetigung { background: var(--flaeche); border: 1.5px solid var(--linie); border-radius: var(--tropfen); padding: .55rem 1.25rem; transition: background-color .15s, border-color .15s; }
.bestaetigung:has(input:checked) { background: var(--violett-hell); border-color: var(--violett); }
.felder { border: 1px solid var(--linie); border-radius: var(--rund); padding: .75rem 1rem; display: grid; gap: .25rem; }
.felder legend { font-weight: 700; padding: 0 .35rem; }

input[type=file] { min-height: var(--ziel); padding: .35rem; }
input[type=file]::file-selector-button {
  min-height: 2.25rem; margin-right: .75rem; padding: 0 .9rem; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--violett); background: var(--violett-hell); border: 0; border-radius: .5rem;
}

/* Ablage für die Druckdatei. Ohne JavaScript bleibt das native Feld sichtbar, es nimmt Dateien auch per Ziehen an.
   Mit JavaScript liegt es unsichtbar über der ganzen Fläche, und portal.js schreibt den Namen der gewählten Datei hinein. */
.ablage-feld { position: relative; display: grid; justify-items: center; gap: .35rem; padding: 1.5rem 1rem; text-align: center; font-weight: 400; font-size: 1.0625rem;
  border: 2px dashed var(--feldrand); border-radius: var(--tropfen); background: var(--flaeche); transition: background-color .15s, border-color .15s; }
.ablage-feld:hover, .ablage-feld.zieht { border-color: var(--violett); background: var(--violett-hell); }
.ablage-zeichen { width: 2.75rem; height: 2.75rem; }
.ablage-text, .ablage-zusatz { display: none; }
.ablage-zusatz { color: var(--grau); font-size: .9375rem; }
.ablage-feld input[type=file] { border: 0; background: none; }
.js .ablage-feld { padding-block: 2rem; }
.js .ablage-text, .js .ablage-zusatz { display: block; overflow-wrap: anywhere; }
.js .ablage-text { font-weight: 700; }
.js .ablage-feld input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; }
.js .ablage-feld:focus-within { outline: 3px solid var(--violett); outline-offset: 2px; }
.ablage-feld.gewaehlt { border-style: solid; border-color: var(--violett); background: #fff; }
.ablage-feld { overflow: hidden; }
.andruck[hidden] { display: none; }
.ablage-andruck { --rand: .75rem; --marke: .5rem; margin-bottom: .25rem; }
.ablage-bild { display: block; width: auto; height: auto; max-width: 100%; max-height: 11rem; background: #fff; box-shadow: 0 .75rem 1.5rem -.75rem rgba(62, 40, 170, .5); }
.ablage-feld.mit-bild .ablage-zeichen { display: none; }
.wartet .ablage-feld { pointer-events: none; }
.ablage-feld::after { content: ""; position: absolute; inset: 0 0 auto; height: 35%; opacity: 0; pointer-events: none;
  background: linear-gradient(transparent, rgba(93, 54, 238, .16) 85%, var(--violett) 85%, var(--violett) 87%, transparent 87%); }
.prueft .ablage-feld::after { opacity: 1; animation: pruefstrahl 1.6s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes pruefstrahl { from { transform: translateY(-100%); } to { transform: translateY(290%); } }

/* Knöpfe */
.knopf, .knopf-zweit, .knopf-rot, .knopf-loeschen {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .55rem 1.4rem;
  font: inherit; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; border-radius: .75rem; cursor: pointer;
  transition: filter .15s, background-color .15s, background-position .45s, box-shadow .15s, transform .1s;
}
.knopf { color: #fff; background: linear-gradient(90deg, #5d36ee, #1878b5, #5d36ee) 0 0 / 200% 100%; border: 0; box-shadow: 0 .5rem 1rem -.5rem rgba(62, 40, 170, .6); }
.knopf-rot { color: #fff; background: var(--rot); border: 0; }
.knopf-zweit { color: var(--violett); background: #fff; border: 1.5px solid var(--violett); }
.knopf-loeschen { color: var(--rot); background: #fff; border: 1.5px solid var(--rot); }
.knopf:hover { background-position: 100% 0; box-shadow: 0 .75rem 1.25rem -.5rem rgba(62, 40, 170, .7); }
.knopf-rot:hover { filter: brightness(1.12); }
.knopf-zweit:hover { background: var(--violett-hell); }
.knopf-loeschen:hover { background: var(--rot-hell); }
.knopf:active, .knopf-zweit:active, .knopf-rot:active, .knopf-loeschen:active { transform: translateY(1px); }
.knopf-klein { min-height: var(--ziel); padding: .3rem .9rem; font-size: .9375rem; }
.wartet button[type=submit] { cursor: progress; }
.fortschritt { display: flex; align-items: center; gap: .75rem; }
.fortschritt[hidden] { display: none; }
.fortschritt progress { appearance: none; flex: 1; height: .625rem; border: 0; border-radius: 1rem; overflow: hidden; background: var(--linie); }
.fortschritt progress::-webkit-progress-bar { background: var(--linie); }
.fortschritt progress::-webkit-progress-value { background: var(--verlauf); border-radius: 1rem; transition: width .2s; }
.fortschritt progress::-moz-progress-bar { background: var(--verlauf); border-radius: 1rem; }
/* Ohne Wert läuft die Druckprüfung: ein Lichtstreifen wandert durch den Balken */
.fortschritt progress:indeterminate { background: linear-gradient(90deg, transparent, var(--violett), transparent) 0 0 / 40% 100% no-repeat, var(--linie); animation: laeuft 1.1s linear infinite; }
.fortschritt progress:indeterminate::-webkit-progress-bar { background: none; }
.fortschritt progress:indeterminate::-moz-progress-bar { background: none; }
@keyframes laeuft { from { background-position: -70% 0, 0 0; } to { background-position: 170% 0, 0 0; } }
.fortschritt-zahl { min-width: 3.25rem; font-weight: 700; text-align: right; }
.upload-fehler { margin: 0; padding: .65rem .9rem; color: var(--rot); font-weight: 700; background: var(--rot-hell); border-radius: var(--rund); }
.upload-fehler:empty { display: none; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .625rem; }
.aktionen-trenner { border-top: 1px solid var(--linie); padding-top: 1.25rem; }
.zeile { margin: 0 0 1rem; }
.zurueck { margin-bottom: .25rem; }
.zurueck a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; text-decoration: none; }
.zurueck a::before { content: ""; width: .5rem; height: .5rem; border-left: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); }
.zurueck a:hover { text-decoration: underline; }

/* Bleibt bei langen Listen am unteren Rand sichtbar und schwebt als eigene Leiste über der Liste */
.aktionsleiste {
  position: sticky; bottom: .75rem; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 1rem;
  margin-top: 1rem; padding: .75rem; background: rgba(255, 255, 255, .92); border: 1px solid var(--linie); border-radius: 1.125rem; box-shadow: var(--schatten-schwebend);
}
@supports (backdrop-filter: blur(1px)) {
  .aktionsleiste { background: rgba(255, 255, 255, .78); backdrop-filter: blur(12px); }
}
/* Beim Bearbeiten langer Tabellen steht Speichern oben: Die Leiste verdeckt beim Einstieg kein Eingabefeld. */
.aktionsleiste-oben { top: .75rem; bottom: auto; margin: 0 0 1rem; }
form:has(.aktionsleiste-oben) .anzeigen th { position: static; }
.auswahl-stand { margin: 0; font-weight: 700; color: var(--grau); }
.auswahl-stand:empty { display: none; }
.auswahl-stand.hat-auswahl { color: var(--violett); }

/* Fortschritt beim Hochladen: Nummern, weil es wirklich eine Reihenfolge ist */
.schritte { display: flex; gap: .5rem; list-style: none; margin: .25rem 0 1.5rem; padding: 0; color: var(--grau); font-size: .9375rem; }
.schritte li { display: flex; align-items: center; gap: .5rem; }
.schritte li + li::before { content: ""; width: clamp(.75rem, 4vw, 2.5rem); height: 2px; margin-right: .25rem; background: var(--feldrand); border-radius: 1px; }
.schritte li.fertig + li::before { background: var(--violett); }
.schritt-zahl { display: grid; place-items: center; width: 2rem; height: 2rem; font-weight: 900; background: #fff; border: 1.5px solid var(--feldrand); border-radius: 0 50% 50% 50%; }
.schritte .aktuell { color: var(--tinte); font-weight: 700; }
.schritte .aktuell .schritt-zahl { color: #fff; background: var(--verlauf); border-color: transparent; box-shadow: 0 .4rem .8rem -.35rem rgba(62, 40, 170, .7); }
.schritte .fertig { color: var(--tinte); }
.schritte .fertig .schritt-zahl { color: var(--violett); background: var(--violett-hell); border-color: var(--violett); }

.schritte-mitte { justify-content: center; margin: 2rem 0 0; }

/* Tabellen: ein Bogen mit getöntem Kopf */
.anzeigen { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 1.5rem; background: #fff; border: 1px solid var(--linie); border-radius: var(--tropfen); box-shadow: var(--schatten); }
.anzeigen th { position: sticky; top: 0; z-index: 1; padding: .7rem .75rem; text-align: left; font-size: .875rem; font-weight: 700; line-height: 1.3; color: var(--grau); background: #faf9fd; border-bottom: 1px solid var(--linie); }
.anzeigen th:last-child { border-top-right-radius: 1.2rem; }
.anzeigen td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid var(--linie); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; transition: background-color .12s; }
.anzeigen th:first-child, .anzeigen td:first-child { padding-left: 1.25rem; }
.anzeigen th:last-child, .anzeigen td:last-child { padding-right: 1.25rem; }
.anzeigen tbody tr:last-child td { border-bottom: 0; }
.anzeigen tbody tr:last-child td:first-child { border-bottom-left-radius: 1.2rem; }
.anzeigen tbody tr:last-child td:last-child { border-bottom-right-radius: 1.2rem; }
.anzeigen tbody tr:hover td { background: var(--flaeche); }
.anzeigen tr:has(input:checked) td { background: var(--violett-hell); }
.anzeigen .inaktiv td { color: var(--grau); }
.anzeigen td a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ziel); min-width: var(--ziel); font-weight: 700; }
.anzeigen form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.anzeigen form input[type=file] { flex: 1 1 14rem; width: auto; min-width: 0; }
.anzeigen td.auswahl-zelle { padding: 0 0 0 .5rem; width: 3.25rem; }
.anzeigen td.leer { padding-block: 2rem; text-align: center; color: var(--grau); }
.anzeigen-waehlbar tr[data-gesperrt="0"] { cursor: pointer; }
/* Tabelle in einem Bogen: Der Bogen trägt Rand und Schatten schon */
.karte .anzeigen { border: 0; border-radius: 0; box-shadow: none; }
.karte .anzeigen th { background: #fff; }
.karte .anzeigen th:first-child, .karte .anzeigen td:first-child { padding-left: .35rem; }
.karte .anzeigen th:last-child, .karte .anzeigen td:last-child { padding-right: .35rem; }
.karte .anzeigen td { border-radius: 0; }

.status { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .7rem .15rem .55rem; font-size: .9375rem; font-weight: 700; line-height: 1.35; text-align: left; background: var(--flaeche); border-radius: 1rem; }
.status::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 0 50% 50% 50%; background: currentColor; }
.status-gruen { color: var(--gruen); background: var(--gruen-hell); }
.status-rot { color: var(--rot); background: var(--rot-hell); }
.status-offen { color: var(--orange); background: var(--orange-hell); }
.ablehnung td { color: var(--rot); background: var(--rot-hell); }
.anzeigen tbody tr.ablehnung:hover td { background: var(--rot-hell); }
.anzeigen tr:has(+ .ablehnung) td { border-bottom-color: transparent; }
.ablehnung-text { white-space: pre-line; }

@media (min-width: 60rem) {
  /* Genug Platz: Wörter bleiben ganz, statt mitten im Wort umzubrechen */
  .anzeigen td { overflow-wrap: break-word; }
  .anzeigen .status, .anzeigen .knopf-klein, .anzeigen td[data-titel=Position] { white-space: nowrap; }
}

/* Anzeigen, die gemeinsam hochgeladen wurden, tragen dieselbe Farbe */
.gruppe-0 { --gruppe: #ed5c6b; }
.gruppe-1 { --gruppe: #5d36ee; }
.gruppe-2 { --gruppe: #62d569; }
tr[class*=gruppe-] td:first-child { box-shadow: inset 4px 0 0 var(--gruppe); }

/* Tablet: Die Tabelle bleibt, rückt aber zusammen und trennt Wörter an Silben statt mittendrin */
@media (min-width: 40.01rem) and (max-width: 59.99rem) {
  .anzeigen th, .anzeigen td { padding-inline: .4rem; font-size: .9375rem; hyphens: auto; }
  .anzeigen th:first-child, .anzeigen td:first-child { padding-left: .75rem; }
  .anzeigen th:last-child, .anzeigen td:last-child { padding-right: .75rem; }
  .anzeigen .knopf-klein { padding-inline: .5rem; overflow-wrap: normal; hyphens: manual; }
  .anzeigen .status { hyphens: manual; overflow-wrap: normal; }
}

@media (max-width: 40rem) {
  .anzeigen thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .anzeigen, .anzeigen tbody, .anzeigen td { display: block; width: 100%; }
  .anzeigen { background: none; border: 0; border-radius: 0; box-shadow: none; }
  /* Jede Zeile wird zum eigenen Bogen */
  .anzeigen tr { display: block; position: relative; padding: .75rem 1rem; margin-bottom: .75rem; background: #fff; border: 1px solid var(--linie); border-radius: var(--tropfen); box-shadow: var(--schatten); }
  .anzeigen tr:has(input:checked) { background: var(--violett-hell); border-color: var(--violett); }
  .anzeigen .inaktiv { background: #faf9fd; box-shadow: none; }
  .anzeigen tbody tr:hover td, .anzeigen tr:has(input:checked) td, .ablehnung td, .anzeigen tbody tr.ablehnung:hover td { background: none; }
  .anzeigen td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .15rem 0; text-align: right; border: 0; border-radius: 0; }
  .anzeigen td:first-child, .anzeigen td:last-child, .karte .anzeigen td:first-child, .karte .anzeigen td:last-child { padding: .15rem 0; border-radius: 0; }
  .anzeigen td:empty { display: none; }
  .anzeigen td::before { content: attr(data-titel); flex: none; color: var(--grau); text-align: left; }
  .anzeigen td[colspan]::before, .anzeigen td.haupt::before, .anzeigen td.auswahl-zelle::before { content: none; }
  .anzeigen td[colspan] { justify-content: flex-start; text-align: left; }
  .anzeigen td.leer { justify-content: center; padding-block: 1rem; }
  /* Der Ablehnungsgrund gehört zum Bogen der Zeile darüber */
  .anzeigen tr.ablehnung { margin-top: -.75rem; border-top: 0; border-radius: 0 0 1.25rem 1.25rem; background: var(--rot-hell); }
  .anzeigen tr:has(+ .ablehnung) { border-bottom: 0; border-radius: 0 1.25rem 0 0; box-shadow: none; }
  .ablehnung td { display: block; }
  .anzeigen td.haupt, .anzeigen td.haupt:first-child { padding-right: 2.75rem; font-size: 1.1875rem; font-weight: 900; line-height: 1.25; justify-content: flex-start; text-align: left; }
  .anzeigen td:has(form) { flex-direction: column; align-items: stretch; text-align: left; }
  .ferien td input, .zeilen td input { flex: 1 1 auto; width: auto; min-width: 0; }
  .anzeigen td.auswahl-zelle { width: auto; padding: 0; }
  /* In der Kundenliste ist die ganze Fläche das Label: Ein Tippen irgendwo wählt die Anzeige aus */
  .anzeigen-waehlbar .auswahl { position: absolute; inset: 0; width: auto; height: auto; padding: .75rem; justify-content: flex-end; align-items: flex-start; }
  .anzeigen-waehlbar td a { position: relative; z-index: 1; }
  tr[class*=gruppe-] { box-shadow: inset 4px 0 0 var(--gruppe), var(--schatten); }
  tr[class*=gruppe-] td:first-child { box-shadow: none; }
  .karte .anzeigen tr { box-shadow: none; }
  .aktionsleiste .knopf, .aktionsleiste .knopf-zweit { width: 100%; }
  .auswahl-stand { width: 100%; text-align: center; }
  .fuss-innen { flex-direction: column; }
}

/* Inhalte */
.filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr)); gap: 1rem; align-items: end; padding: 1.25rem; }
[data-listenfilter][hidden], .anzeigen tr[hidden] { display: none; }
.filter-stand { grid-column: 1 / -1; margin: 0; color: var(--grau); }
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 1.5rem; align-items: start; }
/* Formular mit Hilfe daneben; auf schmalen Bildschirmen rutscht die Hilfe darunter */
.mit-hilfe { display: grid; grid-template-columns: minmax(0, 42rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.mit-hilfe > .karte { margin-bottom: 0; }
.hilfe { display: grid; gap: .75rem; padding: 1.25rem 1.5rem; background: none; border-style: dashed; border-color: var(--feldrand); box-shadow: none; }
.hilfe p { margin: 0; }
.hilfe h2 { font-size: 1.0625rem; }
@media (max-width: 60rem) {
  .mit-hilfe { grid-template-columns: minmax(0, 42rem); }
}
.titelzeile { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin: .5rem 0 1.25rem; }
.titelzeile h1 { margin: 0; }
.werkzeuge { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .625rem 1rem; margin-bottom: 1rem; }
.werkzeuge form, .werkzeuge p { margin: 0; }
.abschnitt { display: grid; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); }
.abschnitt:first-of-type { padding-top: 0; border-top: 0; }
.abschnitt h2 { font-size: 1.0625rem; }
.abschnitt > p { margin: 0; }
.daten { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0 0 1.5rem; }
.daten dt { color: var(--grau); }
.daten dd { margin: 0; overflow-wrap: anywhere; }
.texte { list-style: none; }
.texte li + li { margin-top: .25rem; }
.reiter { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1.5rem; padding: .3rem; background: rgba(255, 255, 255, .7); border: 1px solid var(--linie); border-radius: 1rem; width: fit-content; max-width: 100%; }
.reiter a { display: inline-flex; align-items: center; min-height: var(--ziel); padding: 0 1rem; font-weight: 700; color: var(--tinte); text-decoration: none; border-radius: .75rem; transition: background-color .15s; }
.reiter a:hover { background: var(--violett-hell); }
.reiter a[aria-current] { color: #fff; background: var(--verlauf); }
/* Ferien je Land: Eingabe, darunter der Vergleich mit der aktuellen Fassung */
.ferien { margin-bottom: 1rem; }
.ferien td, .karte .ferien td:first-child, .karte .ferien td:last-child { padding-inline: .35rem; border-bottom: 0; }
.ferien tbody tr:hover td, .zeilen tbody tr:hover td { background: none; }
/* Seitenplan zeilenweise: schmale Felder für Zahlen, der Rest für die Beschreibung */
.zeilen td { padding-inline: .35rem; }
@media (min-width: 40.01rem) {
  .zeilen td:nth-child(2) { width: 4.5rem; }
  .zeilen td:nth-child(3) { width: 8rem; }
  .zeilen td:nth-child(4) { width: 5.5rem; }
  .zeilen td:nth-child(5), .zeilen td:nth-child(6) { width: 9rem; }
}
input[aria-invalid=true] { border-color: var(--rot); box-shadow: inset 0 0 0 1px var(--rot); }
.abgleich { border-top: 1px solid var(--linie); padding-top: 1rem; }
/* Die Entscheidung zum Übernehmen steht abgesetzt da, damit sie unter den Unterschieden nicht untergeht */
label.entscheidung { width: fit-content; max-width: 100%; margin-top: .25rem; padding: .55rem 1rem; font-weight: 700; background: var(--violett-hell); border: 1px solid var(--violett); border-radius: var(--rund); }
p.entscheidung { font-weight: 700; }
.aenderungen { list-style: none; margin: 0 0 1rem; padding: 0; }
.aenderungen li + li { margin-top: .4rem; }
.weitere { margin-bottom: 1.5rem; }
.weitere > summary { padding-block: .65rem; font-weight: 700; cursor: pointer; margin-bottom: .5rem; }
.regel { min-width: 0; margin: 0; padding: 0 0 1rem; border: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: .75rem; align-items: end; border-bottom: 1px solid var(--linie); }
.regel legend { padding: 0 0 .5rem; font-weight: 700; }
.mailtext { white-space: pre-line; }

/* Vorschau: die Anzeige liegt wie ein Andruck auf der Bühne, mit Schnittmarken an den Ecken */
.buehne { display: flex; justify-content: center; margin: 0 0 1.5rem; padding: clamp(.5rem, 3vw, 2rem); border: 1px solid var(--linie); border-radius: var(--tropfen); box-shadow: var(--schatten);
  background: radial-gradient(closest-side, rgba(93, 54, 238, .2), rgba(33, 151, 210, .1) 60%, transparent), #fff; }
.andruck {
  --rand: 1.5rem; --marke: 1rem; --strich: var(--feldrand);
  display: flex; min-width: 0; padding: var(--rand);
  background:
    linear-gradient(var(--strich), var(--strich)) 0 var(--rand) / var(--marke) 1px,
    linear-gradient(var(--strich), var(--strich)) var(--rand) 0 / 1px var(--marke),
    linear-gradient(var(--strich), var(--strich)) 100% var(--rand) / var(--marke) 1px,
    linear-gradient(var(--strich), var(--strich)) calc(100% - var(--rand)) 0 / 1px var(--marke),
    linear-gradient(var(--strich), var(--strich)) 0 calc(100% - var(--rand)) / var(--marke) 1px,
    linear-gradient(var(--strich), var(--strich)) var(--rand) 100% / 1px var(--marke),
    linear-gradient(var(--strich), var(--strich)) 100% calc(100% - var(--rand)) / var(--marke) 1px,
    linear-gradient(var(--strich), var(--strich)) calc(100% - var(--rand)) 100% / 1px var(--marke);
  background-repeat: no-repeat;
}
.vorschaubild { display: block; max-width: 100%; height: auto; }
.datei-fehlt { margin: 0; padding: 1rem 1.25rem; color: var(--rot); background: var(--rot-hell); border-radius: var(--rund); }
.buehne .vorschaubild { max-height: min(70vh, 46rem); width: auto; min-width: 0; object-fit: contain; background: #fff; box-shadow: 0 1.5rem 3rem -1rem rgba(62, 40, 170, .45); }
.vorschau-pdf { width: 100%; aspect-ratio: 154 / 216; border: 1px solid var(--linie); border-radius: var(--rund); }
.vorschau-stapel { position: relative; }
.vorschau-stapel .vorschaubild { box-shadow: 0 0 0 1px var(--linie); }
.vorschau-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (min-width: 60rem) {
  .klebt { position: sticky; top: 1rem; }
}

/* Abschluss: die einzige Bewegung, die von selbst läuft */
.erfolg { max-width: 42rem; margin: clamp(1rem, 6vh, 4rem) auto 1.5rem; text-align: center; padding-block: clamp(2.5rem, 8vw, 4.5rem); box-shadow: var(--schatten-schwebend); }
.erfolg p { margin-inline: auto; }
.erfolg-zeichen { display: block; width: 4.5rem; height: 4.5rem; margin: 0 auto 1.25rem; animation: tropfen .45s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes tropfen { from { transform: scale(.4); opacity: 0; } }
.fehlerseite { max-width: 42rem; margin: clamp(1rem, 6vh, 4rem) auto 0; }

@media (max-width: 30rem) {
  .kopf-nav { gap: 0; margin-left: -.4rem; }
  .kopf-link, .knopf-link { padding: 0 .4rem; font-size: .9375rem; }
  .daten { grid-template-columns: 1fr; gap: 0; }
  .daten dd { margin-bottom: .6rem; }
  .schritte li { flex-direction: column; flex: 1; gap: .25rem; }
  .schritte li + li::before { display: none; }
  .knoepfe > *, .formular > .knopf { width: 100%; }
  .reiter { width: auto; }
  .andruck { --rand: 1rem; --marke: .625rem; }
}

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

/* Format-Zeichen: ein kleines Blatt zeigt, wie viel der Seite die Anzeige einnimmt */
.fz { display: inline-block; flex: none; width: 1.125rem; height: 1.5rem; margin-right: .7rem; vertical-align: -.4rem; padding: 2px;
  border: 1.5px solid var(--violett); border-radius: 0 .25rem .25rem .25rem;
  background: linear-gradient(var(--violett), var(--violett)) bottom / 100% 0 no-repeat content-box, #fff; }
.fz-A5, .fz-Cover, .fz-A5Doppelseite, .fz-Klapptitel { background-size: 100% 100%; }
.fz-Cover { background-image: linear-gradient(160deg, #5d36ee, #1878b5); }
.fz-A5Halb { background-size: 100% 50%; }
.fz-BdW { background-size: 100% 28%; }
.fz-A5Doppelseite { width: 2rem; background-image: linear-gradient(90deg, var(--violett) calc(50% - 1px), #fff 0, #fff calc(50% + 1px), var(--violett) 0); }
.fz-Klapptitel { width: 1.6rem; background-image: linear-gradient(90deg, var(--violett) 62%, #fff 0, #fff calc(62% + 2px), var(--violett-hell) 0); }
.fz-Adressliste { background-image: repeating-linear-gradient(var(--violett) 0 2px, transparent 2px 5px); background-size: 100% 100%; }
.fz-Jahreskalender { background-image: linear-gradient(var(--violett), var(--violett)), repeating-linear-gradient(var(--violett-hell) 0 1.5px, transparent 1.5px 5px), repeating-linear-gradient(90deg, var(--violett-hell) 0 1.5px, transparent 1.5px 5px);
  background-size: 5px 5px, 100% 100%, 100% 100%; background-position: 5px 10px, 0 0, 0 0; }
.inaktiv .fz { border-color: var(--feldrand); filter: grayscale(1); opacity: .7; }

/* Stand über der Kundenliste: ein Feld je Anzeige, sortiert vom Fertigen zum Offenen */
.stand { display: grid; gap: .85rem; padding-block: 1.25rem; }
.stand-titel { margin: 0; max-width: none; font-size: 1.25rem; font-weight: 900; line-height: 1.25; }
.stand-leiste { display: flex; gap: 3px; height: .75rem; animation: aufdecken .8s cubic-bezier(.2, .7, .2, 1) both; }
.stand-leiste span { flex: 1; min-width: 0; border-radius: 0 .375rem .375rem .375rem; background: var(--farbe); }
.stand-legende { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.stand-legende li { display: flex; align-items: center; gap: .45rem; }
.stand-legende li::before { content: ""; flex: none; width: .7rem; height: .7rem; border-radius: 0 50% 50% 50%; background: var(--farbe); }
.s-fertig { --farbe: #1c9a50; }
.s-pruefung { --farbe: var(--violett); }
.s-freigabe { --farbe: #e39a1f; }
.s-abgelehnt { --farbe: #d93452; }
.s-offen { --farbe: #cfcbdd; }
@keyframes aufdecken { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

/* Ergebnis der Druckprüfung: je Mangel eine Zeile, der Mangel fett, darunter Ist und Soll */
.fehlerkarte.befundkarte { border-color: var(--linie); background: #fff; padding-block: .625rem; }
.befunde { padding: 0; list-style: none; color: var(--tinte); font-weight: 400; }
.befunde li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .9rem; align-items: start; padding-block: .9rem; overflow-wrap: anywhere; }
.befunde li + li { margin-top: 0; border-top: 1px solid var(--linie); }
.befunde li::before { content: "×" / ""; display: grid; place-items: center; width: 2rem; height: 2rem; font-size: 1.375rem; font-weight: 900; line-height: 1; color: var(--rot); background: var(--rot-hell); border-radius: 0 50% 50% 50%; }
.befunde strong { display: block; font-weight: 900; }
.befunde .datei { align-items: center; color: var(--grau); }
.befunde .datei::before { content: ""; height: .5rem; width: .5rem; justify-self: center; background: var(--feldrand); }

/* Meldung nach einer Aktion gleitet herein */
.meldung { animation: meldung .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes meldung { from { opacity: 0; transform: translateY(-.5rem); } }

/* Freigabe: Der Knopf bekommt seine Farbe erst mit der Zusage; anklickbar bleibt er, damit der Browser auf das Kästchen zeigt */
.formular:has(.bestaetigung input:not(:checked)) > .knopf { background: var(--grau); box-shadow: none; }

/* Abschluss: der Haken zeichnet sich, Papierschnipsel fallen einmal */
.erfolg { position: relative; overflow: hidden; }
.erfolg-haken { stroke-dasharray: 44; animation: zeichnen .45s .3s ease-out both; }
@keyframes zeichnen { from { stroke-dashoffset: 44; } }
.konfetti { position: absolute; inset: 0; pointer-events: none; }
.konfetti i { position: absolute; top: -1rem; left: calc(var(--x) * 1%); width: .5rem; height: .85rem; opacity: 0; background: var(--violett); border-radius: 0 .2rem .2rem .2rem;
  animation: schnipsel 2.2s calc(var(--d) * 1s) cubic-bezier(.3, .2, .6, 1) both; }
.konfetti i:nth-child(4n+1) { background: #1878b5; }
.konfetti i:nth-child(4n+2) { background: #62d569; }
.konfetti i:nth-child(4n+3) { background: #f5b83d; width: .4rem; height: .4rem; }
.konfetti i:nth-child(1) { --x: 4; --d: .1; } .konfetti i:nth-child(2) { --x: 11; --d: .5; } .konfetti i:nth-child(3) { --x: 17; --d: .25; } .konfetti i:nth-child(4) { --x: 24; --d: .7; }
.konfetti i:nth-child(5) { --x: 30; --d: .05; } .konfetti i:nth-child(6) { --x: 37; --d: .45; } .konfetti i:nth-child(7) { --x: 43; --d: .8; } .konfetti i:nth-child(8) { --x: 50; --d: .2; }
.konfetti i:nth-child(9) { --x: 56; --d: .6; } .konfetti i:nth-child(10) { --x: 63; --d: .15; } .konfetti i:nth-child(11) { --x: 69; --d: .55; } .konfetti i:nth-child(12) { --x: 76; --d: .3; }
.konfetti i:nth-child(13) { --x: 82; --d: .75; } .konfetti i:nth-child(14) { --x: 88; --d: .1; } .konfetti i:nth-child(15) { --x: 93; --d: .4; } .konfetti i:nth-child(16) { --x: 97; --d: .65; }
@keyframes schnipsel {
  from { opacity: 1; transform: translateY(0) rotate(0); }
  70% { opacity: 1; }
  to { opacity: 0; transform: translateY(28rem) rotate(540deg); }
}

/* Seitenwechsel: Die Seite blendet weich über, die Marke des aktuellen Schritts wandert weiter,
   und die gewählte Datei wächst aus der Ablage in die Vorschau. Browser ohne View Transitions wechseln wie bisher. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
.schritte .aktuell .schritt-zahl { view-transition-name: schritt; }
.ablage-bild, .buehne .vorschaubild { view-transition-name: andruck; }
::view-transition-group(schritt), ::view-transition-group(andruck) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

@media (max-width: 40rem) {
  .anzeigen td:not(.haupt) .fz { display: none; }
  .stand-legende { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .konfetti { display: none; }
}

/* Systemfarben und native Haken bleiben auch ohne Hintergrundbilder erkennbar. */
@media (forced-colors: active) {
  input[type=checkbox] { appearance: auto; background: none; }
  select { appearance: auto; background-image: none; }
  .knopf, .knopf-rot { border: 1px solid ButtonText; }
  :focus-visible, .js .ablage-feld:focus-within { outline-color: Highlight; }
}