/* Design „Arbeitsbereich v2“ (Kurz Bauernhof, 2026-11-06). Keine externen Ressourcen:
   Schriften liegen unter app/assets/fonts (SIL Open Font License, siehe LICENSE-*.txt). */

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/roboto-condensed-latin-400-normal-712b47c1.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: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/roboto-condensed-latin-ext-400-normal-da0223c1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/roboto-condensed-latin-500-normal-66eeefb3.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: "Roboto Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/roboto-condensed-latin-ext-500-normal-0550c05d.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/roboto-condensed-latin-600-normal-5ebd018f.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: "Roboto Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/roboto-condensed-latin-ext-600-normal-cdd69771.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/roboto-condensed-latin-700-normal-dfb993f6.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: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/roboto-condensed-latin-ext-700-normal-1221b3f2.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
@font-face {
  font-family: "Delius";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/delius-latin-400-normal-eb37a8f8.woff2") format("woff2");
}

/* Farben: hell als Grundeinstellung, dunkel per Schalter (data-theme) oder Systemeinstellung. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --side: #f4f4f4;
  --surface: #ffffff;
  --surface2: #fafafa;
  --raised: #f4f4f4;
  --border: #dcdcdc;
  --border-strong: #c4c4c4;
  --text: #3c3c3b;
  --text2: #555554;
  --muted: #6b6b6a;
  --accent: #c0181d;
  --accent-hover: #9e1317;
  --on-accent: #ffffff;
  --link: #c0181d;
  --brand-soft: #ffffff;
  --soft: #f0f4e3;
  --soft-border: #dbe5bf;
  --soft-text: #4a6618;
  --red: #c0181d;
  --warn-bg: #fbf0d9;
  --warn-text: #7a4f00;
  --logo-bg: transparent;
  --sidebar: 248px;
  --schrift: "Roboto Condensed", "Arial Narrow", sans-serif;
  --schrift-titel: Delius, "Roboto Condensed", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b1b1a;
  --side: #232322;
  --surface: #262625;
  --surface2: #2c2c2b;
  --raised: #2e2e2d;
  --border: #3a3a39;
  --border-strong: #4b4b4a;
  --text: #f2f2f0;
  --text2: #d0d0cc;
  --muted: #a5a5a0;
  --accent: #d43b40;
  --accent-hover: #e0504f;
  --on-accent: #ffffff;
  --link: #f2898b;
  --brand-soft: #2e2e2d;
  --soft: #1c2014;
  --soft-border: #343c22;
  --soft-text: #bcd27a;
  --red: #f07a7c;
  --warn-bg: #302b20;
  --warn-text: #f2d493;
  --logo-bg: #fbfaf6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1b1b1a;
    --side: #232322;
    --surface: #262625;
    --surface2: #2c2c2b;
    --raised: #2e2e2d;
    --border: #3a3a39;
    --border-strong: #4b4b4a;
    --text: #f2f2f0;
    --text2: #d0d0cc;
    --muted: #a5a5a0;
    --accent: #d43b40;
    --accent-hover: #e0504f;
    --on-accent: #ffffff;
    --link: #f2898b;
    --brand-soft: #2e2e2d;
    --soft: #1c2014;
    --soft-border: #343c22;
    --soft-text: #bcd27a;
    --red: #f07a7c;
    --warn-bg: #302b20;
    --warn-text: #f2d493;
    --logo-bg: #fbfaf6;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}

a {
  color: var(--link);
  text-underline-offset: 4px;
}

a:hover {
  color: var(--text);
}

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

::selection {
  color: var(--on-accent);
  background: var(--accent);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82em;
  overflow-wrap: anywhere;
}

p {
  margin: 0 0 1rem;
}

h1, h2, h3 {
  line-height: 1.2;
  font-weight: 400;
  text-wrap: balance;
}

h1 {
  margin: 0 0 .6rem;
  font-family: var(--schrift-titel);
  font-size: clamp(1.9rem, 3vw, 2.25rem);
  color: var(--accent);
}

h1 .leise {
  font-family: var(--schrift);
  font-size: .6em;
}

h2 {
  margin: 2.5rem 0 .9rem;
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
  color: var(--text);
}

h3 {
  margin: 1.5rem 0 .6rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.sprunglink {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  padding: .75rem 1rem;
  color: var(--on-accent);
  background: var(--accent);
  transform: translateY(-200%);
}

.sprunglink:focus {
  transform: none;
}

/* Seitenleiste */
.kopfzeile {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  padding: 20px 16px 16px;
  background: var(--side);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.marke {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 6px;
  color: var(--muted);
  text-decoration: none;
}

.marke:hover {
  color: var(--text);
}

.logo {
  display: block;
  flex-shrink: 0;
  padding: 3px;
  background: var(--logo-bg);
}

.logo img {
  display: block;
  width: 64px;
  height: 64px;
}

.markenuntertitel {
  font-size: 13px;
  line-height: 1.35;
}

.nav-label, .eyebrow {
  margin: 0 0 .5rem;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.eyebrow.punkt {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eyebrow.punkt::before {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--red);
}

nav {
  margin-top: 28px;
}

.nav-label {
  margin: 0 0 10px 12px;
  font-size: 11.5px;
}

nav ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 12px 8px 25px;
  color: var(--text2);
  font-size: 16px;
  text-decoration: none;
}

nav a:hover {
  color: var(--text);
  background: var(--surface);
}

nav a[aria-current] {
  color: var(--accent);
  background: var(--brand-soft);
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--accent);
}

.konto {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
}

.darstellung {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 3px;
  background: var(--raised);
  border-radius: 2px;
}

.darstellung form {
  display: contents;
}

.konto .darstellung button {
  min-height: 0;
  padding: 6px 0;
  color: var(--text2);
  background: transparent;
  border: 0;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.konto .darstellung button:hover {
  color: var(--text);
  background: var(--surface);
}

.konto .darstellung button[aria-pressed="true"] {
  color: var(--text);
  background: var(--surface);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  cursor: default;
}

.profil {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.profilzeichen {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--soft-text);
  font-weight: 700;
}

.angemeldet {
  min-width: 0;
  font-size: 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.angemeldet strong, .angemeldet .leise {
  display: block;
}

.angemeldet .leise {
  font-size: 13px;
}

.kontoaktionen {
  display: flex;
  gap: 8px;
}

.kontoknopf, .menueknopf {
  display: none;
}

.kontoaktionen > a, .kontoaktionen form {
  flex: 1;
}

.kontoaktionen > a, .konto .kontoaktionen button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 8px 0;
  color: var(--text2);
  background: transparent;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}

.kontoaktionen > a:hover, .konto .kontoaktionen button:hover {
  color: var(--text);
  background: var(--raised);
  border-color: var(--border);
}

main {
  max-width: 1400px;
  min-width: 0;
  min-height: calc(100vh - 110px);
  margin-left: var(--sidebar);
  padding: 40px 40px 56px;
}

main:focus {
  outline: none;
}

.fusszeile {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-left: var(--sidebar);
  padding: 1rem 40px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}

/* Kopf einer Seite und Abschnitte */
.seitenkopf, .abschnittskopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}

.seitenkopf {
  margin-bottom: 28px;
}

.seitenkopf h1 {
  font-size: 2.5rem;
  line-height: 1.15;
}

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

.seitenkopf .knopf {
  flex-shrink: 0;
}

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 0 0 36px;
}

.kennzahl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}

.kennzahl:hover {
  color: var(--text);
  border-color: var(--accent);
}

.kennzahl-label {
  color: var(--text2);
  font-size: 14px;
}

.kennzahl strong {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}

.kennzahl-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  color: var(--muted);
  font-size: 13px;
}

.kennzahl-link span {
  color: var(--accent);
}

.abschnittskopf {
  align-items: center;
  margin-bottom: 16px;
}

.abschnittskopf h2 {
  margin: 0;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  color: var(--soft-text);
  background: var(--soft);
  border: 1px solid var(--soft-border);
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
}

.bereiche {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Einfache Einträge (Admin-Bereich) als Karten */
.bereiche > li:not(:has(.bereichskarte)) {
  padding: 20px;
  color: var(--text2);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14.5px;
}

.bereiche > li:not(:has(.bereichskarte)) > a:first-child {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
}

.bereichskarte {
  display: flex;
  height: 100%;
  min-height: 130px;
  padding: 20px;
  gap: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
}

.bereichskarte:hover {
  color: var(--text);
  background: var(--surface2);
  border-color: var(--accent);
}

.bereichsnummer {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--on-accent);
  background: var(--accent);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bereichstext {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
}

.bereichstext strong {
  font-size: 16px;
  font-weight: 700;
}

.bereichstext > span {
  color: var(--text2);
  font-size: 14px;
  text-wrap: pretty;
}

.bereichspfeil {
  align-self: flex-end;
  color: var(--accent);
}

.ergaenzende-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 24px;
  margin: 1rem 0 1.5rem;
  font-size: 14px;
}

.ergaenzende-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.zweispaltig {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
  align-items: start;
}

.zweispaltig h2 {
  margin-top: 0;
}

.punktliste {
  margin: 0;
  padding: 6px 20px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
}

.punktliste li {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  color: var(--text2);
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
  text-wrap: pretty;
}

.punktliste li:last-child {
  border-bottom: 0;
}

.punktliste li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
}

/* Tabellen */
.tabellenrahmen {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  margin: 1rem 0;
  border: 1px solid var(--border);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

th, td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

th:first-child, td:first-child {
  padding-left: 20px;
}

th:last-child, td:last-child {
  padding-right: 20px;
}

thead th {
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--text2);
  background: var(--raised);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody tr:last-child > * {
  border-bottom: 0;
}

tbody tr:hover {
  background: var(--surface2);
}

td {
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}

td a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-weight: 600;
}

tfoot th, tfoot td {
  color: var(--text);
  background: var(--soft);
  border-top: 2px solid var(--border-strong);
  font-weight: 700;
}

.zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.leer, .leise, .feldname {
  color: var(--muted);
}

.legende {
  color: var(--muted);
  font-size: 13.5px;
  max-width: 78ch;
  text-wrap: pretty;
}

.hinweis {
  padding: 14px 18px;
  color: var(--text2);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14.5px;
}

.hinweis-inline {
  display: inline-block;
  color: var(--muted);
  font-size: 13.5px;
}

.warnung {
  padding: 1px 8px;
  color: var(--warn-text);
  background: var(--warn-bg);
  font-size: .9em;
}

p.warnung {
  padding: 14px 18px;
  font-size: 14px;
}

.zurueck {
  margin: 0 0 .75rem;
  font-size: 14px;
}

.zurueck a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Formulare und Knöpfe */
.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin: 1.25rem 0;
  padding: 24px;
  background: var(--raised);
  border: 1px solid var(--border);
}

.feld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.filter .feld {
  flex: 1 1 150px;
}

label {
  color: var(--text2);
  font-size: 13.5px;
  font-weight: 600;
}

input, select, textarea, button {
  font: inherit;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]), select, textarea {
  width: 100%;
  min-height: 44px;
  max-width: 100%;
  padding: 0 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0;
}

textarea {
  padding: 10px 12px;
}

input:hover, select:hover, textarea:hover {
  border-color: var(--muted);
}

input[type="checkbox"], input[type="radio"] {
  margin: 0;
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

.aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
}

.aktionen > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.knopf, .knopf-leise, input[type="submit"], button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.knopf.primaer {
  min-height: 46px;
}

.knopf:hover, input[type="submit"]:hover, button:hover {
  color: var(--on-accent);
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.knopf-leise {
  color: var(--text2);
  background: transparent;
  border-color: var(--border-strong);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.knopf-leise:hover {
  color: var(--text);
  background: var(--raised);
  border-color: var(--border-strong);
}

button:disabled, input:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.seiten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 12px;
  margin: 1rem 0;
  color: var(--muted);
  font-size: 14px;
}

.seiten .bereich {
  color: var(--muted);
}

.seiten a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  color: var(--soft-text);
  border: 1px solid var(--border);
  font-weight: 600;
  text-decoration: none;
}

.seiten a:hover {
  color: var(--text);
  background: var(--raised);
}

dl.felder {
  display: grid;
  grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
  gap: 0;
  margin: 1rem 0 2rem;
  padding: 4px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14.5px;
}

dl.felder dt, dl.felder dd {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}

dl.felder dt {
  color: var(--muted);
  padding-right: 20px;
}

dl.felder dd {
  margin: 0;
  color: var(--text);
}

dl.felder dt:nth-last-child(2), dl.felder dd:last-child {
  border-bottom: 0;
}

dl.felder .hinweis-inline {
  margin-left: .5rem;
}

/* Prüfungen */
.pruefung {
  margin: 0;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.pruefung + .pruefung {
  border-top: 0;
}

.pruefung h3 {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 4px;
  font-size: 15.5px;
}

.pruefung .anzahl {
  display: inline-flex;
  justify-content: center;
  min-width: 44px;
  padding: 3px 10px;
  color: var(--warn-text);
  background: var(--warn-bg);
  border-radius: 2px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pruefung .anzahl.null {
  color: var(--soft-text);
  background: var(--soft);
}

.pruefung .erwartung {
  margin: .25rem 0;
  color: var(--text2);
  font-size: 14px;
}

.beispiele {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin: .5rem 0 0;
  padding-left: 1.25rem;
  font-size: 14px;
}

.meldung {
  padding: 14px 18px;
  color: var(--text2);
  background: var(--soft);
  border: 1px solid var(--soft-border);
  border-left: 4px solid var(--soft-text);
}

.meldung.alert {
  color: var(--warn-text);
  background: var(--warn-bg);
  border-color: var(--warn-bg);
  border-left-color: var(--accent);
}

.fehler {
  margin: 0 0 1rem;
  padding: 14px 18px;
  color: var(--warn-text);
  background: var(--warn-bg);
  border-left: 4px solid var(--accent);
}

.fehler p, .fehler ul {
  margin: .25rem 0;
}

.formular {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 34rem;
  margin: 1.5rem 0;
}

.formular .feld.auswahl {
  flex-direction: row;
  align-items: center;
  gap: .75rem;
  min-height: 44px;
}

.formular .feld.auswahl label {
  padding: .5rem 0;
}

/* Zellen, die nicht umbrechen sollen (etwa Bestellnummern) */
.ohne-umbruch {
  white-space: nowrap;
}

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

input.feld-fehler, select.feld-fehler {
  border: 2px solid var(--accent) !important;
}

/* Anmeldung als eigenständiger, ruhiger Einstieg. */
.anmeldung-layout .kopfzeile {
  position: static;
  width: auto;
  flex-direction: row;
  align-items: center;
  padding: 1.25rem clamp(1.25rem, 6vw, 6rem);
  border-right: 0;
  border-bottom: 1px solid var(--border);
}

.anmeldung-layout .konto {
  flex-direction: row;
  margin: 0 0 0 auto;
  padding: 0;
}

.anmeldung-layout .darstellung {
  width: 160px;
}

.anmeldung-layout main, .anmeldung-layout .fusszeile {
  margin-left: 0;
}

.anmeldung-layout main {
  max-width: 1200px;
  min-height: calc(100vh - 230px);
  margin: 0 auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.anmeldung {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.anmeldung-intro {
  padding: 2rem 0;
}

.anmeldung-intro h2 {
  margin: 1rem 0 0;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  color: var(--text);
}

.anmeldung-leitsatz {
  margin-bottom: 1.5rem;
  color: var(--accent);
  font-family: var(--schrift-titel);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1.2;
}

.anmeldung-intro > p:not(.eyebrow):not(.anmeldung-leitsatz) {
  max-width: 37ch;
  color: var(--text2);
}

.anmeldung-intro .status {
  margin-top: 1.5rem;
}

.anmeldung-formular {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: inset 0 4px 0 var(--accent);
}

.anmeldung-formular h1 {
  font-size: 1.9rem;
}

.anmeldung-formular .aktionen, .anmeldung-formular input[type="submit"] {
  width: 100%;
}

@media (min-width: 1800px) {
  main {
    margin-right: auto;
  }
}

@media (max-width: 1200px) {
  :root {
    --sidebar: 216px;
  }
  .seitenkopf {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .kopfzeile {
    position: static;
    width: auto;
    padding: 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }
  .logo img {
    width: 48px;
    height: 48px;
  }
  nav {
    margin: 1rem -.25rem 0;
    min-width: 0;
  }
  .nav-label {
    display: none;
  }
  nav ul {
    flex-direction: row;
    overflow-x: auto;
    padding: .25rem .25rem .65rem;
    gap: .35rem;
  }
  nav li {
    flex-shrink: 0;
  }
  nav a {
    padding: .55rem .85rem;
  }
  nav a[aria-current] {
    box-shadow: inset 0 -3px 0 var(--accent);
  }
  /* Kompakter Kopf im Seitenfluss; Navigation und Konto nur bei Bedarf öffnen. */
  .angemeldet-layout .kopfzeile {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
  }
  .angemeldet-layout .marke {
    flex: 1 1 auto;
    padding: 0;
  }
  .angemeldet-layout nav {
    flex: 1 1 100%;
    margin-top: .5rem;
  }
  .kopfzeile.mit-kontomenue .kontoknopf {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--soft);
    color: var(--soft-text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
  }
  .kopfzeile.mit-kontomenue .kontoknopf[aria-expanded="true"] {
    box-shadow: 0 0 0 2px var(--accent);
  }
  .kopfzeile.mit-kontomenue .menueknopf {
    display: inline-flex;
    gap: .5rem;
    padding: 0 .75rem;
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
  }
  .kopfzeile.mit-kontomenue nav:not(.offen) {
    display: none;
  }
  .kopfzeile.mit-kontomenue nav ul {
    flex-direction: column;
    overflow: visible;
    padding: .5rem 0 0;
    border-top: 1px solid var(--border);
  }
  .kopfzeile.mit-kontomenue nav a {
    min-height: 44px;
  }
  .kopfzeile.mit-kontomenue nav a[aria-current] {
    box-shadow: inset 3px 0 0 var(--accent);
  }
  .konto {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin: .5rem 0 0;
    padding-top: .65rem;
    border-top: 1px solid var(--border);
  }
  .angemeldet-layout .konto {
    flex: 1 1 100%;
    padding-bottom: .5rem;
  }
  .kopfzeile.mit-kontomenue .konto:not(.offen) {
    display: none;
  }
  .darstellung {
    flex: 0 0 140px;
  }
  .profil {
    border: 0;
    margin: 0 auto 0 0;
    padding: 0;
  }
  .profilzeichen {
    display: none;
  }
  .kontoaktionen {
    flex: 1 1 100%;
  }
  .kopfzeile .konto .darstellung button, .konto .kontoaktionen button, .kontoaktionen > a {
    min-height: 44px;
  }
  main {
    margin-left: 0;
    min-height: 55vh;
    padding: 1.75rem 16px;
  }
  .fusszeile {
    margin-left: 0;
    padding: 1rem 16px;
  }
  .seitenkopf h1 {
    font-size: 2rem;
  }
  .kennzahlen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 2rem;
  }
  .kennzahl {
    padding: 1rem;
    overflow-wrap: anywhere;
  }
  .kennzahl strong {
    font-size: 2rem;
  }
  .zweispaltig {
    grid-template-columns: minmax(0, 1fr);
  }
  .abschnittskopf {
    align-items: flex-start;
    flex-direction: column;
    gap: .75rem;
  }
  .anmeldung-layout .kopfzeile {
    flex-wrap: wrap;
    gap: 1rem;
  }
  .anmeldung-layout main {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }
  .anmeldung {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .anmeldung-intro {
    padding: .5rem 0;
  }
  .anmeldung-intro h2 {
    margin-top: .5rem;
  }
  .anmeldung-intro .status {
    margin-top: 0;
  }
  .filter {
    padding: 16px;
  }
  .seitenkopf > *, .aktionen, .aktionen > *, .filter > * {
    min-width: 0;
    max-width: 100%;
  }
  .knopf, .knopf-leise, button, input[type="submit"] {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .marktwahl label, .auswahlreihe label, td a, .seiten a {
    min-height: 44px;
  }
  .filter .feld {
    flex-basis: calc(50% - 1rem);
  }
  th, td {
    padding: 10px 12px;
  }
}

@media (max-width: 440px) {
  .kennzahlen {
    grid-template-columns: 1fr;
  }
  .bereiche {
    grid-template-columns: 1fr;
  }
  .bereichskarte {
    min-height: 110px;
  }
  .seitenkopf .knopf {
    width: 100%;
  }
  .filter .feld, .filter .aktionen {
    flex-basis: 100%;
  }
  .filter .aktionen input[type="submit"] {
    flex: 1;
  }
  dl.felder {
    grid-template-columns: 1fr;
  }
  dl.felder dt {
    border: 0;
    padding-bottom: 0;
  }
  dl.felder dd {
    padding-top: .25rem;
  }
}

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

/* Auswertung Sonderbestellungen: je Markt und Abholdatum ein Block */
.sonderblock {
  margin: 1.5rem 0 2rem;
}
.sonderblock h2 {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  align-items: baseline;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.sonderblock h2 .ort {
  font-style: italic;
}
.sonderbestellung {
  margin: 0.75rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--text2);
}
.sonderbestellung .kunde {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  align-items: baseline;
  margin: 0 0 0.25rem;
}
.sonderbestellung .kunde .nummer {
  font-weight: 700;
}
.sonderpositionen {
  width: 100%;
  border-collapse: collapse;
}
.sonderpositionen th, .sonderpositionen td {
  padding: 3px 8px;
  border: 0;
  text-align: left;
}
.sonderpositionen .zahl {
  text-align: right;
}
.sonderpositionen .einheit {
  font-size: 0.85em;
}
.sonderpositionen .artikelnummer {
  font-size: 0.8em;
  color: var(--muted);
}
/* Kompakt-Liste: je Artikel Summe und Stück je Tag, zweispaltig */
.filter .marktwahl {
  flex: 1 1 100%;
  flex-direction: row;
}
.marktwahl {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  border: 0;
}
.marktwahl legend {
  width: 100%;
  margin-bottom: 4px;
  color: var(--text2);
  font-size: 13.5px;
  font-weight: 600;
}
.marktwahl label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-weight: 400;
}
.marktwahl input[type="checkbox"] {
  width: auto;
}
/* Liste selbst wie der frühere Bericht „Bestell-Liste nach Datum“: Arial, fett, Summe rot,
   Mengen rechtsbündig mit kleinem „Stk.“, zwei Spalten fester Breite */
.kompaktliste {
  margin: 1.5rem 0;
  color: #000;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.kompaktliste .druckkopf {
  margin: 0 0 14px;
  padding-bottom: 4px;
  border-bottom: 2px solid #1a237e;
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 700;
}
.kompaktspalten {
  columns: 2 330px;
  column-gap: 40px;
  max-width: 760px;
}
.kompaktartikel {
  break-inside: avoid;
  max-width: 330px;
  margin: 0 0 18px;
}
.kompaktartikel h3 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 3px;
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.25;
  color: #000;
}
.kompaktartikel h3 .warnung {
  display: block;
  font-size: 11px;
  font-weight: 400;
}
.kompaktartikel .summe {
  min-width: 3.5em;
  text-align: right;
  color: #d50000;
}
.kompaktartikel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.kompaktartikel li {
  display: grid;
  grid-template-columns: 90px 30px 1fr;
  gap: 0 8px;
  font-size: 14.5px;
  line-height: 1.45;
}
.kompaktartikel .menge {
  text-align: right;
}
.kompaktartikel .einheit {
  font-family: "Times New Roman", Times, serif;
  font-size: 12px;
}
.kompaktartikel .tag {
  padding-left: 36px;
}
.kompaktartikel .nur-gewicht {
  margin: 2px 0 0 98px;
  font-size: 12px;
  color: #444;
}
:root[data-theme="dark"] .kompaktliste,
:root[data-theme="dark"] .kompaktartikel h3 {
  color: var(--text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kompaktliste,
  :root:not([data-theme="light"]) .kompaktartikel h3 {
    color: var(--text);
  }
}

/* Marktliste je Markt und Tag */
.nummernhinweis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: space-between;
}
.nummernhinweis p {
  margin: 0;
}
.marktliste, .alphaliste, .etikett {
  color: #000;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.marktliste {
  max-width: 820px;
  margin: 1.5rem 0;
}
.marktkopf {
  display: flex;
  gap: 70px;
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #9fa8da;
  font-family: "Times New Roman", Times, serif;
  font-size: 24px;
  font-weight: 700;
}
.marktkopf .ort {
  font-style: italic;
}
.marktbestellung {
  break-inside: avoid;
  padding: 4px 0 6px;
  border-bottom: 1px solid #9fa8da;
}
.marktbestellung .kopf {
  display: grid;
  grid-template-columns: 52px 195px 165px 1fr;
  align-items: baseline;
  font-size: 15.5px;
}
.marktbestellung .nr {
  font-size: 18px;
  font-weight: 700;
}
.marktbestellung .telefon {
  font-size: 12px;
}
.marktbestellung .position {
  display: grid;
  grid-template-columns: 82px 32px 260px 1fr;
  align-items: baseline;
  gap: 0 4px;
  font-size: 15.5px;
  line-height: 1.6;
}
.marktbestellung .anzahl {
  justify-self: end;
  padding: 0 4px 0 30px;
  font-size: 18px;
  font-weight: 700;
}
.marktbestellung .anzahl.mehrere {
  color: #d50000;
  background: #ffff99;
}
.marktbestellung .einheit {
  font-family: "Times New Roman", Times, serif;
  font-size: 13px;
}
.marktbestellung .bemerkung {
  margin: 2px 0 0 52px;
  font-size: 13px;
}
.marktbestellung.ohne-nummer .nr {
  color: #b00020;
}
/* Alphabetische Liste wie die Excel-Tabelle */
.alphaliste {
  margin: 1.5rem 0;
}
.alphakopf {
  margin: 0 0 6px;
  color: #d50000;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
}
.alphaliste table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.alphaliste th, .alphaliste td {
  padding: 3px 6px;
  border: 1px solid #555;
  text-align: left;
  vertical-align: top;
  color: #000;
  background: #fff;
}
.alphaliste .nr {
  text-align: right;
  font-size: 19px;
}
.alphaliste th {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}
.alphaliste table {
  border: 1px solid #555;
}
/* Etiketten Avery Zweckform 3653: 105 × 42,3 mm, 2 × 7 je A4-Bogen */
.etiketten {
  margin: 1.5rem 0;
}
.etikettenbogen {
  display: grid;
  grid-template-columns: repeat(2, 105mm);
  grid-auto-rows: 42.3mm;
  width: 210mm;
  height: 297mm;
  box-sizing: border-box;
  padding-top: 0.45mm;
  margin-bottom: 1.5rem;
  background: #fff;
  outline: 1px solid var(--border);
}
.etikett {
  display: grid;
  grid-template-columns: 26mm 1fr 22mm;
  grid-template-areas: "nr name name" "nr ort datum" "artikel artikel artikel";
  grid-template-rows: auto auto 1fr;
  align-content: center;
  box-sizing: border-box;
  padding: 3mm 6mm;
  overflow: hidden;
  outline: 1px dashed #ccc;
}
.etikett .nr {
  grid-area: nr;
  align-self: center;
  justify-self: end;
  padding-right: 1.5mm;
  font-size: 34pt;
  font-weight: 700;
  line-height: 1;
}
.etikett .nachname {
  grid-area: name;
  font-size: 17pt;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.etikett .ort, .etikett .datum {
  font-family: "Times New Roman", Times, serif;
  font-size: 10pt;
  font-weight: 700;
}
.etikett .ort {
  grid-area: ort;
}
.etikett .datum {
  grid-area: datum;
}
.etikett .artikel {
  grid-area: artikel;
  margin-top: 1mm;
  font-size: 12.5pt;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root[data-theme="dark"] .marktliste {
  color: var(--text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marktliste {
    color: var(--text);
  }
}

.auftragsformular td.haken, .auftragsformular th.haken {
  text-align: center;
}

@media print {
  :root, :root[data-theme="dark"] {
    color-scheme: light;
    --bg: #fff;
    --surface: #fff;
    --surface2: #fff;
    --raised: #f0f0f0;
    --text: #222;
    --text2: #333;
    --muted: #555;
    --border: #bbb;
    --accent: #c0181d;
    --link: #222;
  }
  .kopfzeile, .sprunglink, .filter, .fusszeile, .seitenkopf .knopf, .seiten,
  .druckknopf, .ansichtswahl, .tageswahl, .meldung {
    display: none;
  }
  /* Bestellzettel: jeder Abholtag auf einer neuen Seite, Tabellen nicht zerreißen */
  .zettel-tag + .zettel-tag {
    break-before: page;
  }
  .zettel-tag h2 {
    margin-top: 0;
  }
  /* Marktliste, alphabetische Liste, Etiketten: nur der Bericht */
  main:has(.marktliste, .alphaliste, .etiketten) :is(.seitenkopf, .zurueck, .legende, .nummernhinweis, .hinweis) {
    display: none;
  }
  .marktliste, .alphaliste {
    margin: 0;
    color: #000;
  }
  main:has(.etiketten) {
    padding: 0 !important;
  }
  .etiketten {
    margin: 0;
  }
  .etikettenbogen {
    margin: 0;
    outline: 0;
    break-after: page;
  }
  .etikettenbogen:last-child {
    break-after: auto;
  }
  .etikett {
    outline: 0;
  }
  /* Kompakt-Liste: nur der Bericht; Kopf und Fuß der Seite über @page (Ansicht) */
  main:has(.kompaktliste) .seitenkopf,
  main:has(.kompaktliste) .zurueck,
  main:has(.kompaktliste) .legende,
  main:has(.kompaktliste) .hinweis {
    display: none;
  }
  .kompaktliste {
    margin: 0;
    color: #000;
  }
  .kompaktspalten {
    columns: 2;
    column-gap: 12mm;
    max-width: none;
  }
  .kompaktartikel {
    max-width: none;
  }
  .kompaktartikel h3 {
    color: #000;
  }
  .kompaktartikel .summe {
    color: #d50000;
  }
  /* Sonderbestellungen: eine Bestellung nicht über zwei Seiten zerreißen */
  .sonderbestellung, .sonderblock h2 {
    break-inside: avoid;
  }
  .sonderblock h2 {
    break-after: avoid;
  }
  .sonderpositionen thead {
    display: none;
  }
  table {
    font-size: 12pt;
  }
  tr {
    break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  main {
    margin: 0;
    padding: 1rem 0;
  }
  .tabellenrahmen {
    overflow: visible;
  }
}

/* Auswahl in Linkzeilen (etwa Filter im Artikelstamm) */
.ergaenzende-links a[aria-current] {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  box-shadow: inset 0 -3px 0 var(--accent);
}

/* Hell/Dunkel als Sonne und Mond */
.konto .darstellung button {
  gap: 6px;
  min-height: 34px;
}

.darstellung svg {
  display: block;
  flex-shrink: 0;
}

/* Formular „Neue Bestellung“ nach dem Papier-Bestellschein */
.auftragsformular fieldset {
  margin: 0 0 24px;
  padding: 16px 20px 20px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.auftragsformular legend {
  padding: 0 6px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.feldreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}

.auswahlreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  min-height: 44px;
  align-items: center;
}

.auswahlreihe label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
}

table.positionen td {
  padding: 6px 8px;
}

table.positionen input.schmal {
  width: 6rem;
}

.erfasste-bestellungen {
  margin-bottom: 36px;
}

/* Tabellenzelle in normaler Textfarbe statt gedämpft (statt style-Attribut, wegen der Content-Security-Policy) */
td.volltext { color: var(--text); }

/* Positionen auf dem Handy als beschriftete Eingabeblöcke statt einer breiten Zeile.
   Nur am Bildschirm: Druckansichten behalten ihre Tabellen. */
@media screen and (max-width: 760px) {
  .auftragsformular fieldset {
    min-width: 0;
    padding: 12px;
  }
  .feldreihe {
    grid-template-columns: minmax(0, 1fr);
  }
  .auftragsformular .tabellenrahmen {
    border: 0;
    overflow: visible;
  }
  table.positionen, table.positionen tbody {
    display: block;
  }
  table.positionen thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  table.positionen tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid var(--border);
    background: var(--surface2);
  }
  table.positionen td {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    border: 0;
    text-align: left;
  }
  table.positionen td:nth-child(2), table.positionen td:nth-child(4), table.positionen td.haken {
    grid-column: 1 / -1;
  }
  table.positionen label.unsichtbar {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  table.positionen td.haken {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
  }
  table.positionen input.schmal {
    width: 100%;
  }
}