/* Klassenpost – Gestaltung. Mobile zuerst; warm und ruhig, große Touch-Ziele.
   1 Werte · 2 Grundlage · 3 Gerüst · 4 Navigation · 5 Bausteine · 6 Formulare · 7 Listen und Tabellen
   8 Beiträge · 9 Druck */

/* 1 Werte ------------------------------------------------------------------------------------------- */
:root {
  --hintergrund: #F7F4EE;
  --karte: #FFFFFF;
  --rand: #E6E0D4;
  --text: #1F1D1A;
  --text-leise: #6B665E;
  --akzent: #2E6B4F;
  --akzent-dunkel: #24563F;
  --akzent-hell: #E3EFE8;
  --wichtig-rand: #E9B44C;
  --wichtig-hg: #FCEBCB;
  --wichtig-text: #6B4100;
  --fehler: #A33B2B;
  --fehler-hg: #F8E4E0;
  --rund: 12px;
  --rund-gross: 16px;
  --abstand: 16px;
  --schrift: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --navigation-hoehe: 64px;
}

/* 2 Grundlage --------------------------------------------------------------------------------------- */
@font-face {
  font-family: "Nunito";
  src: url("../schrift/nunito-latin.166202cc391c.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--hintergrund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.5;
  padding-bottom: calc(var(--navigation-hoehe) + env(safe-area-inset-bottom));
}
/* Ohne !important hebt jede Klasse mit display (z. B. .knopf) das hidden-Attribut wieder auf. */
[hidden] { display: none !important; }
a { color: var(--akzent); }
a:hover { color: var(--akzent-dunkel); }
/* Dunkelgrün statt Gelb: hebt sich mit mindestens 3:1 von Hintergrund, Karten und Hinweisflächen ab. */
:focus-visible { outline: 3px solid var(--akzent-dunkel); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75em; }
img { max-width: 100%; height: auto; }
.symbol { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
.leise { color: var(--text-leise); }
.klein { font-size: .9rem; }
.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 8px; top: 8px; z-index: 10; background: var(--karte); padding: 8px 12px; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 3 Gerüst ------------------------------------------------------------------------------------------ */
.kopfleiste {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px var(--abstand) 6px; max-width: 720px; margin: 0 auto;
}
.marke { font-weight: 800; font-size: 1.15rem; color: var(--akzent); text-decoration: none; }
.kopfleiste__klasse { color: var(--text-leise); font-size: .9rem; }
.inhalt { max-width: 720px; margin: 0 auto; padding: 8px var(--abstand) 24px; }
.inhalt--schmal { max-width: 480px; }
.fuss {
  max-width: 720px; margin: 0 auto; padding: 8px var(--abstand) 24px;
  display: flex; gap: 16px; font-size: .85rem;
}
.fuss a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-leise); }
.seitenkopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 16px; }
.seitenkopf h1 { margin: 0; }
.zurueck { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }

/* 4 Navigation -------------------------------------------------------------------------------------- */
.navigation {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; justify-content: space-around;
  background: var(--karte); border-top: 1px solid var(--rand);
  padding-bottom: env(safe-area-inset-bottom);
}
.navigation__punkt {
  position: relative; flex: 1; max-width: 160px; min-height: var(--navigation-hoehe);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--text-leise); text-decoration: none; font-size: .8rem; font-weight: 600;
}
.navigation__punkt .symbol { width: 24px; height: 24px; }
.navigation__punkt.aktiv { color: var(--akzent); }
.navigation__zahl {
  position: absolute; top: 8px; left: 55%; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--wichtig-rand); color: var(--text); font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
}

/* 5 Bausteine --------------------------------------------------------------------------------------- */
.karte {
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--rund-gross);
  padding: var(--abstand); margin-bottom: 12px;
}
.karte > :last-child { margin-bottom: 0; }
.karte--akzent { background: var(--akzent-hell); border-color: #C9DED1; }
.karte--wichtig { border: 2px solid var(--wichtig-rand); }
.abschnitt { margin: 24px 0 8px; font-size: 1rem; color: var(--text-leise); text-transform: none; }
.stapel > * + * { margin-top: 12px; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: var(--rund);
  border: 1px solid var(--rand); background: var(--karte); color: var(--text);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.knopf:hover { border-color: var(--akzent); color: var(--text); }
.knopf--haupt { background: var(--akzent); border-color: var(--akzent); color: #FFFFFF; }
.knopf--haupt:hover { background: var(--akzent-dunkel); color: #FFFFFF; }
.knopf--still { background: transparent; border-color: transparent; color: var(--akzent); }
.knopf--gefahr { color: var(--fehler); }
.knopf--gefahr:hover { border-color: var(--fehler); color: var(--fehler); }
/* Klein heißt: schmaler und kleinere Schrift – zum Tippen bleibt er 44 px hoch. */
.knopf--klein { min-height: 44px; padding: 6px 12px; font-size: .9rem; }
.knopf--breit { width: 100%; }
.knopfzeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.inline { display: inline; }

.meldungen { margin: 0 0 12px; }
.meldung { padding: 12px 14px; border-radius: var(--rund); background: var(--akzent-hell); margin: 0 0 8px; }
.meldung--error { background: var(--fehler-hg); color: var(--fehler); }
.meldung--warning { background: var(--wichtig-hg); color: var(--wichtig-text); }

.etikett {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700;
  background: var(--akzent-hell); color: var(--akzent-dunkel);
}
.etikett--wichtig { background: var(--wichtig-hg); color: var(--wichtig-text); }
.etikett--leise { background: #EFEBE3; color: var(--text-leise); }

.leer { text-align: center; color: var(--text-leise); padding: 24px 12px; }
.leer strong { display: block; color: var(--text); margin-bottom: 4px; }

.angaben { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.angaben dt { color: var(--text-leise); }
.angaben dd { margin: 0; }

.fortschritt { display: flex; align-items: center; gap: 10px; }
.fortschritt progress {
  flex: 1; height: 10px; border: 0; border-radius: 5px; background: #EFEBE3; overflow: hidden;
  -webkit-appearance: none; appearance: none;
}
.fortschritt progress::-webkit-progress-bar { background: #EFEBE3; border-radius: 5px; }
.fortschritt progress::-webkit-progress-value { background: var(--akzent); border-radius: 5px; }
.fortschritt progress::-moz-progress-bar { background: var(--akzent); border-radius: 5px; }

.code { font-size: 1.6rem; letter-spacing: .3em; font-weight: 800; }
.kopierfeld { display: flex; gap: 8px; align-items: stretch; }
.kopierfeld input { flex: 1; }

.dialog {
  border: 1px solid var(--rand); border-radius: var(--rund-gross); padding: 20px; max-width: 420px;
  width: calc(100% - 32px);
}
.dialog::backdrop { background: rgba(31, 29, 26, .4); }

/* Aufklappen per Tippen: Die ganze Zeile ist das Ziel. Kein display:flex, sonst fehlt in Chrome das Dreieck. */
summary { min-height: 44px; padding: 11px 0; cursor: pointer; }

/* 6 Formulare --------------------------------------------------------------------------------------- */
.formular .feld { margin-bottom: 14px; }
.formular label, .formular legend { display: block; font-weight: 700; margin-bottom: 4px; }
.formular .hilfe { display: block; color: var(--text-leise); font-size: .9rem; margin-top: 2px; }
.formular .fehler { color: var(--fehler); font-size: .9rem; margin: 4px 0 0; }
.formular fieldset { border: 0; padding: 0; margin: 0 0 14px; }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=url],
input[type=date], input[type=time], input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--text);
  background: var(--karte); border: 1px solid #CFC7B8; border-radius: var(--rund);
}
textarea { min-height: 140px; resize: vertical; }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; accent-color: var(--akzent); }
.ankreuzen { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.ankreuzen input { margin-top: 2px; flex: none; }
.auswahlgitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; }
.auswahlgitter label { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 0; }
.errorlist { list-style: none; padding: 0; margin: 4px 0 0; color: var(--fehler); font-size: .9rem; }

/* 7 Listen und Tabellen ----------------------------------------------------------------------------- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { padding: 12px 0; border-bottom: 1px solid var(--rand); }
.liste > li:last-child { border-bottom: 0; }
.liste__zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.liste__haupt { font-weight: 700; }
.liste a.liste__haupt { text-decoration: none; color: var(--text); }
/* Handys zeigen keine Scrollleiste. Ist die Tabelle breiter als die Hülle, zeigt ein Schatten am Rand, dass
   es weitergeht: Die weißen Verläufe wandern mit dem Inhalt (local) und decken den Schatten am jeweiligen
   Ende ab. Einzelangaben statt „background“, damit die Farbe einer Karte (.karte.tabelle-huelle) bleibt. */
.tabelle-huelle {
  overflow-x: auto;
  background-image:
    linear-gradient(to right, var(--karte) 40%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--karte) 40%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(31, 29, 26, .22), rgba(31, 29, 26, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(31, 29, 26, .22), rgba(31, 29, 26, 0));
  background-position: left center, right center, left center, right center;
  background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
/* Die Hülle schneidet an ihrem Innenrand ab, und die äußeren Zellen haben keinen Abstand (siehe unten). Ohne
   eigenen Rand fehlte dem Fokusrahmen (3 px + 2 px Abstand) an Links und Feldern der ersten und letzten Spalte
   eine Seite. Der negative Außenabstand holt den Rand aus der Karte zurück: Die Tabelle steht bündig wie zuvor
   und hat genauso viel Platz. Eine Hülle, die selbst Karte ist (.karte.tabelle-huelle), hat Abstand genug. */
.tabelle-huelle:not(.karte) { padding: 0 6px; margin: 0 -6px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabelle th, .tabelle td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--rand); vertical-align: top; }
/* Außen gibt die Karte schon Abstand – so bleibt auf dem Handy mehr Platz für die Spalten. */
.tabelle th:first-child, .tabelle td:first-child { padding-left: 0; }
.tabelle th:last-child, .tabelle td:last-child { padding-right: 0; }
.tabelle th { color: var(--text-leise); font-weight: 700; }
.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle tfoot td { font-weight: 800; border-bottom: 0; }
/* Schmale Bildschirme: kleinere Schrift, Spaltenköpfe dürfen umbrechen und (Seite ist lang="de") trennen,
   damit z. B. „Noch frei“ in der Kuchenliste ohne Wischen zu sehen ist. Die Zahlen selbst brechen nie um. */
@media (max-width: 30rem) {
  .tabelle { font-size: .85rem; }
  .tabelle th, .tabelle td { padding-left: 4px; padding-right: 4px; }
  .tabelle th { -webkit-hyphens: auto; hyphens: auto; }
  .tabelle th.zahl { white-space: normal; }
}

/* 8 Beiträge ---------------------------------------------------------------------------------------- */
.beitrag h2 { margin-bottom: 4px; }
.beitrag h2 a { color: var(--text); text-decoration: none; }
.beitrag__kopf { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 8px; color: var(--text-leise); font-size: .9rem; }
.text { overflow-wrap: anywhere; }
.text ul, .text ol { padding-left: 1.3em; margin: 0 0 .75em; }
.text li { margin-bottom: .25em; }
.text h1, .text h2, .text h3 { font-size: 1.05rem; margin-top: 1em; }
.anhaenge { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; }
.anhaenge a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }

/* 9 Druck ------------------------------------------------------------------------------------------- */
@media print {
  body { background: #FFFFFF; padding: 0; font-size: 11pt; }
  .navigation, .kopfleiste, .fuss, .knopfzeile, .meldungen, .nicht-drucken { display: none !important; }
  .inhalt { max-width: none; padding: 0; }
  .karte { border: 0; padding: 0; }
  .tabelle-huelle { overflow: visible; background-image: none; }
  /* Im Druck schneidet die Hülle nicht ab; der Rand für den Fokus ragte sonst über die Seite hinaus. */
  .tabelle-huelle:not(.karte) { padding: 0; margin: 0; }
  a { color: inherit; text-decoration: none; }
  .tabelle th, .tabelle td { border-bottom: 1px solid #999999; }
}
.etiketten { display: grid; grid-template-columns: repeat(auto-fill, minmax(62mm, 1fr)); gap: 4mm; }
.etiketten__stueck {
  border: 1px dashed #999999; border-radius: 6px; padding: 4mm; break-inside: avoid; min-height: 30mm;
}
.etiketten__stueck strong { display: block; font-size: 13pt; }