/* OB-Doku – Gestaltung angelehnt an genoba-recht.de (Dunkelblau #002337, Weinrot #A21A17, Libre Franklin) */

@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/libre-franklin-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/libre-franklin-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --blau: #002337;
  --blau-2: #0b3a55;
  --blau-hell: #e8eef2;
  --rot: #a21a17;
  --rot-dunkel: #7e1311;
  --rot-hell: #f7e9e8;
  --grau: #5d6b76;
  --grau-hell: #e9e9e9;
  --flaeche: #f4f5f6;
  --linie: #dde2e6;
  --weiss: #fff;
  --ampel-rot: #c0392b;
  --ampel-rot-hell: #fbeaea;
  --ampel-gelb: #d4a017;
  --ampel-gelb-hell: #fdf6e3;
  --ampel-gruen: #2e7d4f;
  --ampel-gruen-hell: #e7f3ec;
  --radius: 4px;
  --schatten: 0 2px 10px rgba(0, 35, 55, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; font: 300 16px/1.6 "Libre Franklin", system-ui, sans-serif; color: var(--blau); background: var(--flaeche);
  display: flex; flex-direction: column; min-height: 100vh; }
strong, b, th, label, legend { font-weight: 600; }
a { color: var(--rot); text-underline-offset: 2px; }
a:hover { color: var(--rot-dunkel); }
h1, h2, h3, h4 { color: var(--blau); font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); margin: 0 0 1rem; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
h2 { font-size: 1.3rem; margin: 0 0 1rem; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
h3 { font-size: 1.05rem; margin: 1rem 0 .4rem; }
h4 { font-size: .95rem; margin: 1rem 0 .4rem; }
small { display: block; color: var(--grau); font-size: .82rem; }
code { background: var(--blau-hell); padding: .1rem .4rem; border-radius: 3px; font-size: .95em; }
p.klein, .klein { font-size: .88rem; color: var(--grau); }

/* Kopf */
.kopf { background: var(--weiss); box-shadow: 0 1px 0 var(--linie); position: sticky; top: 0; z-index: 10; }
.kopf-innen { max-width: 1300px; margin: 0 auto; padding: .9rem 16px; display: flex; align-items: center; gap: 1.5rem 2rem; flex-wrap: wrap; }
.marke { display: flex; align-items: center; gap: 1.1rem; text-decoration: none; }
.marke img { height: 46px; width: auto; display: block; }
.produkt { border-left: 1px solid var(--linie); padding-left: 1.1rem; color: var(--blau); font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
.produkt small { font-weight: 300; font-size: .75rem; }
.kopf nav { display: flex; gap: .3rem 1.4rem; flex-wrap: wrap; align-items: center; }
.kopf nav a { text-decoration: none; color: var(--rot); padding: .3rem 0; border-bottom: 2px solid transparent; font-weight: 400; }
.kopf nav a:hover, .kopf nav a.aktiv { border-bottom-color: var(--rot); color: var(--rot); }
.kopf nav.gast { margin-left: auto; }
.kopf nav a.knopf { color: var(--weiss); padding: .5rem 1.2rem; border: 0; }
.wer { margin-left: auto; display: flex; gap: .4rem 1rem; align-items: center; font-size: .85rem; color: var(--grau); flex-wrap: wrap; }

/* Inhalt */
main { flex: 1; width: 100%; max-width: 1300px; margin: 0 auto; padding: 2rem 16px 3rem; }
main.breit { max-width: none; padding: 0; }
.innen { max-width: 1300px; margin: 0 auto; padding: 0 16px; }
.flash-breit { padding-top: 1rem; }

.karte { background: var(--weiss); border: 1px solid var(--linie); border-top: 3px solid var(--blau); border-radius: var(--radius);
  padding: 1.3rem 1.5rem; margin-bottom: 1.4rem; box-shadow: var(--schatten); }
.karte.schmal { max-width: 460px; margin: 1rem auto; }
.karte h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1.4rem; margin-bottom: 1.4rem; }
.raster .karte { margin-bottom: 0; }
.titelzeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.aktionen { display: flex; gap: .8rem 1rem; align-items: center; flex-wrap: wrap; }

/* Formulare */
label { display: block; font-size: .9rem; margin-bottom: .9rem; }
label small { font-weight: 300; }
input, select, textarea { display: block; width: 100%; margin-top: .3rem; padding: .6rem .7rem; font: 300 1rem "Libre Franklin", system-ui, sans-serif;
  color: var(--blau); border: 1px solid #c6ced5; border-radius: var(--radius); background: var(--weiss); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blau); outline-offset: 0; border-color: var(--blau); }
input[type="checkbox"] { display: inline; width: auto; margin: 0 .5rem 0 0; accent-color: var(--rot); }
label.haken { font-weight: 300; display: flex; align-items: center; }
fieldset { border: 1px solid var(--linie); border-radius: var(--radius); margin: 0 0 .9rem; padding: .6rem 1rem .1rem; }
legend { font-size: .9rem; padding: 0 .3rem; }
.zwei, .drei { display: grid; gap: 0 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); align-items: end; }

button, .knopf { display: inline-block; background: var(--rot); color: var(--weiss); border: 1px solid var(--rot); border-radius: var(--radius);
  padding: .6rem 1.3rem; font: 600 .95rem "Libre Franklin", system-ui, sans-serif; cursor: pointer; text-decoration: none; text-align: center; }
button:hover, .knopf:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); color: var(--weiss); }
button.breit { width: 100%; }
.knopf.gross { padding: .8rem 1.7rem; font-size: 1rem; }
.zweitrangig { background: var(--weiss); color: var(--blau); border-color: var(--blau); }
.zweitrangig:hover { background: var(--blau); color: var(--weiss); border-color: var(--blau); }
.warnung { background: var(--weiss); color: var(--ampel-rot); border-color: var(--ampel-rot); }
.warnung:hover { background: var(--ampel-rot); border-color: var(--ampel-rot); }
button.link { background: none; border: 0; color: var(--rot); padding: 0; font-weight: 400; text-decoration: underline; }
button.link:hover { background: none; color: var(--rot-dunkel); }
button.klein, .knopf.klein { padding: .3rem .7rem; font-size: .8rem; }
form.inline { display: inline-flex; gap: .3rem; align-items: center; margin: 0; }
form.inline input { margin: 0; width: auto; }
.ablehnen input { min-width: 12rem; padding: .3rem .5rem; font-size: .85rem; }
.zeilenformular { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.zeilenformular label { flex: 1; min-width: 240px; margin: 0; }
.filter { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.filter select, .filter input { width: auto; margin: 0; }
.hochladen { background: var(--blau-hell); padding: 1.1rem 1.2rem .3rem; border-radius: var(--radius); margin-bottom: 1.2rem; }
.hochladen button { margin-bottom: .9rem; }

/* Tabellen */
.tabelle-rahmen { overflow-x: auto; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); }
.karte .tabelle-rahmen { border: 0; box-shadow: none; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { background: var(--blau); color: var(--weiss); font-weight: 400; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
tbody tr:hover td { background: #fafbfc; }
tr:last-child td { border-bottom: 0; }
td.zahl, th.zahl { text-align: right; white-space: nowrap; }
td.zeilenaktionen { display: flex; gap: .4rem; flex-wrap: wrap; }
tr.inaktiv td { color: var(--grau); background: var(--flaeche); }
.leer { color: var(--grau); font-style: italic; }

/* Hinweise */
.hinweis { padding: .8rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; border-left: 4px solid; background: var(--weiss); }
.hinweis-ok { background: var(--ampel-gruen-hell); border-color: var(--ampel-gruen); }
.hinweis-fehler { background: var(--ampel-rot-hell); border-color: var(--ampel-rot); }
.hinweis-info { background: var(--blau-hell); border-color: var(--blau); }
.hinweis-geheim { background: var(--ampel-gelb-hell); border-color: var(--ampel-gelb); font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }

/* Ampel und Status */
.ampel { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; padding: .2rem .65rem;
  border-radius: 999px; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.ampel .punkt { width: .7rem; height: .7rem; border-radius: 50%; background: currentColor; }
.ampel-rot { color: var(--ampel-rot); background: var(--ampel-rot-hell); }
.ampel-gelb { color: #8a6a00; background: var(--ampel-gelb-hell); }
.ampel-gelb .punkt { background: var(--ampel-gelb); }
.ampel-gruen { color: var(--ampel-gruen); background: var(--ampel-gruen-hell); }
.ampel-grau { color: var(--grau); background: var(--flaeche); }

.status { font-size: .75rem; font-weight: 600; padding: .2rem .65rem; border-radius: 999px; background: var(--flaeche); color: var(--grau);
  border: 1px solid var(--linie); text-transform: none; letter-spacing: 0; }
.status-eingereicht { background: var(--blau-hell); color: var(--blau); border-color: var(--blau); }
.status-nachforderung { background: var(--rot-hell); color: var(--rot); border-color: var(--rot); }
.status-vollstaendig { background: var(--ampel-gruen-hell); color: var(--ampel-gruen); border-color: var(--ampel-gruen); }
.status-abgeschlossen { background: var(--blau); color: var(--weiss); border-color: var(--blau); }

.dokstatus { font-weight: 600; }
.dokstatus-akzeptiert { color: var(--ampel-gruen); }
.dokstatus-abgelehnt { color: var(--ampel-rot); }
.dokstatus-neu { color: #8a6a00; }

.checkliste { list-style: none; padding: 0; margin: 0; }
.checkliste li { display: flex; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--linie); }
.checkliste li:last-child { border-bottom: 0; }
.checkliste em { font-style: normal; font-size: .72rem; color: var(--grau); border: 1px solid var(--linie); border-radius: 3px; padding: 0 .35rem; margin-left: .3rem; }
.checkliste .symbol { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; margin-top: .05rem; display: grid; place-items: center;
  font-size: .8rem; color: var(--weiss); font-weight: 700; }
.zustand-ok .symbol { background: var(--ampel-gruen); }
.zustand-ok .symbol::after { content: "✓"; }
.zustand-offen .symbol { background: var(--ampel-gelb); }
.zustand-offen .symbol::after { content: "…"; }
.zustand-fehlt .symbol { background: var(--ampel-rot); }
.zustand-fehlt .symbol::after { content: "!"; }

dl.angaben { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: 0; }
dl.angaben dt { color: var(--grau); }
dl.angaben dd { margin: 0; font-weight: 400; }
p.text { margin: .3rem 0; }

.nachricht { border: 1px solid var(--linie); border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: .8rem; max-width: 48rem; background: var(--weiss); }
.nachricht.von-kanzlei { background: var(--blau-hell); margin-left: auto; border-color: #cbd8e1; }
.nachricht.intern { background: var(--ampel-gelb-hell); border-style: dashed; }
.nachricht .meta { font-size: .8rem; color: var(--grau); }

.qr { display: flex; justify-content: center; margin: 1rem 0; }
.qr svg { max-width: 100%; height: auto; }
.schluessel { text-align: center; word-break: break-all; }

/* Anmeldung */
.login-raster { display: grid; grid-template-columns: 1fr minmax(300px, 440px); gap: 2rem; align-items: center; max-width: 980px; margin: 1rem auto; }
.login-info { background: var(--blau); color: var(--weiss); padding: 2.2rem; border-radius: var(--radius); }
.login-info h1 { color: var(--weiss); }
.login-info .dachzeile { color: #e2a3a1; }
.login-info ul { padding-left: 1.2rem; }
.login-info li { margin: .3rem 0; }
.login-info a { color: var(--weiss); }
.login-info .klein { color: #c4d1da; }
.login-karte { margin: 0; }

/* Startseite */
.dachzeile { color: var(--rot); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 600; margin: 0 0 .6rem; }
.held { background: linear-gradient(135deg, var(--blau) 0%, var(--blau-2) 100%); color: var(--weiss); padding: 4.5rem 0; position: relative; overflow: hidden; }
.held::after { content: ""; position: absolute; right: -10%; top: -30%; width: 55%; height: 160%; background: radial-gradient(closest-side, rgba(255,255,255,.07), transparent); }
.held-raster { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; position: relative; z-index: 1; }
.held h1 { color: var(--weiss); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; display: block; }
.held .dachzeile { color: #e2a3a1; }
.einleitung { font-size: 1.15rem; max-width: 36rem; color: #d7e1e8; margin: 0 0 2rem; }
.knopf.hell { background: transparent; border-color: var(--weiss); color: var(--weiss); }
.knopf.hell:hover { background: var(--weiss); color: var(--blau); }

.vorschau { background: var(--weiss); color: var(--blau); border-radius: 6px; padding: 1.3rem 1.4rem; box-shadow: 0 20px 50px rgba(0,0,0,.35);
  transform: rotate(1.5deg); }
.vorschau-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--linie); }
.vorschau-ampel { display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--grau); padding: .8rem 0 .3rem; }

.leiste { background: var(--weiss); border-bottom: 1px solid var(--linie); padding: 2rem 0; }
.drei-saeulen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1.5rem 2.5rem; }
.drei-saeulen h3 { margin-top: 0; padding-left: .8rem; border-left: 3px solid var(--rot); }
.drei-saeulen p { margin: 0; color: var(--grau); }

.abschnitt { padding: 4rem 0; background: var(--weiss); }
.abschnitt.grau { background: var(--flaeche); }
.abschnitt h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 2rem; display: block; }
.zwei-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 2rem 4rem; align-items: center; }
.zwei-spalten h2 { margin-bottom: 1rem; }

.schritte { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1.5rem; counter-reset: none; }
.schritte li { background: var(--flaeche); border-radius: var(--radius); padding: 1.5rem; border-top: 3px solid var(--blau); }
.schritte .nr { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--rot); color: var(--weiss); font-weight: 600; }
.schritte h3 { margin-top: .9rem; }
.schritte p { margin: 0; color: var(--grau); }

.ampel-erklaerung { list-style: none; margin: 0; padding: 0; background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); }
.ampel-erklaerung li { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--linie); }
.ampel-erklaerung li:last-child { border-bottom: 0; }
.ampel-erklaerung .ampel { min-width: 5rem; justify-content: center; font-size: .85rem; }

.pakete { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.5rem; }
.paket { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); box-shadow: var(--schatten); display: flex; flex-direction: column; }
.paket header { background: var(--grau-hell); border-left: 4px solid var(--rot); padding: 1rem 1.3rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--blau); }
.paket header .nr { color: var(--rot); margin-right: .5rem; }
.paket-inhalt { padding: 1.3rem; }
.paket ul { padding-left: 1.1rem; margin: 0; }
.paket li { margin-bottom: .6rem; }
.paket li::marker { color: var(--rot); }
.preis { font-size: 2rem; font-weight: 600; margin: .2rem 0 .1rem; line-height: 1.2; }
.preis .statt { font-size: .95rem; font-weight: 300; color: var(--grau); margin-left: 1rem; text-decoration: line-through; }
.preis .einheit { font-size: 1.2rem; }
.aktion-hinweis { color: var(--rot); font-weight: 600; font-size: .92rem; margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linie); }
.paket-inhalt .klein { margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linie); }
.vorzug { background: var(--blau-hell); border-left: 4px solid var(--blau); padding: .9rem 1.2rem; font-weight: 600; margin: 1.8rem 0 .5rem; }

.merkmale { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1.2rem; }
.merkmale > div { background: var(--weiss); padding: 1.3rem 1.4rem; border-radius: var(--radius); border-left: 3px solid var(--rot); box-shadow: var(--schatten); }
.merkmale h3 { margin-top: 0; }
.merkmale p { margin: 0; color: var(--grau); }

.aufruf { background: var(--blau); color: var(--weiss); }
.aufruf h2 { color: var(--weiss); margin-bottom: .5rem; }
.aufruf p { color: #d7e1e8; margin: 0; }
.aufruf-innen { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }

/* Fuß */
.fuss { background: var(--blau); color: #c4d1da; font-size: .88rem; border-top: 4px solid var(--rot); }
.aufruf + * { border-top: 0; }
.fuss-innen { max-width: 1300px; margin: 0 auto; padding: 1.6rem 16px; display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.fuss strong { color: var(--weiss); }
.fuss a { color: var(--weiss); }
.fuss nav { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }

@media (max-width: 860px) {
  .held { padding: 3rem 0; }
  .held-raster, .login-raster { grid-template-columns: 1fr; }
  .vorschau { transform: none; }
  .kopf nav.gast { margin-left: 0; }
  .wer { margin-left: 0; }
}
@media (max-width: 560px) {
  .marke img { height: 36px; }
  .produkt { padding-left: .8rem; font-size: .95rem; }
  .karte { padding: 1rem; }
  .abschnitt { padding: 2.8rem 0; }
  .kopf nav.gast a:not(.knopf) { display: none; }
}

/* Upload je Checklistenpunkt */
.checkliste .punkt-inhalt { flex: 1; min-width: 0; }
.zustand-sonstig .symbol { background: var(--grau); }
.zustand-sonstig .symbol::after { content: "+"; }
.datei-feld { display: flex; align-items: center; gap: .7rem; margin: .5rem 0 0; font-weight: 300; position: relative; cursor: pointer; flex-wrap: wrap; }
.datei-feld input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.datei-feld:focus-within .knopf { outline: 2px solid var(--blau); outline-offset: 2px; }
.datei-feld .auswahl { font-size: .82rem; color: var(--grau); overflow-wrap: anywhere; }
.datei-feld.gewaehlt .auswahl { color: var(--blau); font-weight: 600; }
.upload-fuss { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linie); }

/* Checkliste mit Abschnitten und Statuskategorien */
.checkliste li.abschnitt-titel { display: block; border: 0; padding: 1.2rem 0 .3rem; font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--rot); border-bottom: 2px solid var(--linie); }
.checkliste li.abschnitt-titel:first-child { padding-top: .2rem; }
.zustand-teilweise .symbol { background: var(--ampel-gelb); }
.zustand-teilweise .symbol::after { content: "½"; }
details.anforderung { margin: .4rem 0 0; font-size: .85rem; }
details.anforderung summary { cursor: pointer; color: var(--rot); font-weight: 400; }
details.anforderung .text { background: var(--flaeche); padding: .7rem .9rem; border-radius: var(--radius); margin: .4rem 0 0; }

/* Fallansicht: kompakte Checkliste rechts, Upload-Bereich darunter */
.checkliste small.status-fehlt { color: var(--ampel-rot); }
.checkliste small.status-teilweise { color: #8a6a00; }
.checkliste small.status-offen { color: var(--blau); }
.checkliste small.status-ok { color: var(--ampel-gruen); }
.checkliste li.abschnitt-titel { padding: .9rem 0 .2rem; font-size: .72rem; }
.checkliste details.anforderung { margin-top: .2rem; font-size: .8rem; }
.upload-zeilen { display: grid; gap: .6rem; }
.upload-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1rem; align-items: end;
  padding-bottom: .6rem; border-bottom: 1px dashed #c6ced5; }
.upload-zeile label { margin: 0; }
.upload-zeile .datei-feld { margin: 0 0 .35rem; }
.hochladen .upload-fuss { border-top: 0; margin-top: .6rem; padding-top: 0; }
@media (max-width: 640px) { .upload-zeile { grid-template-columns: 1fr; } }
.raster > .spalte { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.spalte .karte { margin-bottom: 0; }
.spalte .upload-zeile { grid-template-columns: 1fr; }