/*
 * Gestaltung im Stil des Café Bryggan: hell, skandinavisch-ländlich.
 * Weiss und Naturholz, Salbeigrün als Akzent, zarte Pastellfarben, Titel in «Amatic SC».
 * Optimiert für Touch-Bedienung auf Tablet und Handy. Bewusst nur ein heller Modus.
 */

@font-face {
  font-family: "Amatic SC";
  src: url("../fonts/AmaticSC-Regular.c4c985708dbf.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Amatic SC";
  src: url("../fonts/AmaticSC-Bold.fe9630dffddd.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --akzent: #56755c;          /* Salbeigrün (Stühle) – Hauptfarbe für Knöpfe */
  --akzent-dunkel: #445e4a;
  --holz: #b89b7a;            /* Naturholz */
  --rosa: #e9c9cd;            /* zartes Rosa (Tisch, Tassen) */
  --creme: #f4f2ee;           /* gebrochenes Weiss – Seitenhintergrund */
  --weiss: #ffffff;
  --text: #2e2e2e;            /* Anthrazit wie die Schrift der Website */
  --grau: #6b6660;
  --linie: #e2ddd5;
  --rot: #b3261e;
  --gruen: #2e7d32;
  --radius: 12px;
  --titel: "Amatic SC", "Segoe Print", cursive;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  background: var(--creme);
  color: var(--text);
}

h1 { font-family: var(--titel); font-weight: 700; font-size: 2.4rem; line-height: 1.1; margin: 0 0 1rem; letter-spacing: .02em; }

/* Kopfzeile: weiss mit feiner Linie, wie die Website */
.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .5rem 1rem;
  background: var(--weiss);
  color: var(--text);
  border-bottom: 1px solid var(--linie);
}
.kopf-name {
  color: var(--text); font-family: var(--titel); font-weight: 700; font-size: 2rem; line-height: 1;
  text-decoration: none; letter-spacing: .03em;
}
.kopf-name .kranz { color: var(--akzent); font-family: system-ui, sans-serif; font-size: 1.2rem; vertical-align: middle; }
.kopf-user { display: flex; align-items: center; gap: .75rem; font-size: .95rem; color: var(--grau); }
.kopf-user form { margin: 0; }

.inhalt { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem; }

/* Knöpfe */
.knopf {
  display: inline-block;
  border: 0;
  border-radius: var(--radius);
  background: var(--akzent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: .7rem 1.2rem;
  cursor: pointer;
  min-height: 44px;
}
.knopf:hover { background: var(--akzent-dunkel); }
a.knopf { text-decoration: none; }
.knopf-gross { width: 100%; padding: .9rem; font-size: 1.1rem; }
.knopf-klein { padding: .35rem .8rem; min-height: 0; font-size: .9rem; background: var(--linie); color: var(--text); }
.knopf-klein:hover { background: var(--linie); filter: brightness(.95); }

/* Karten & Formulare */
.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.karte-schmal { max-width: 420px; margin: 2rem auto; }

.formular { display: flex; flex-direction: column; gap: .4rem; }
.formular label { font-weight: 600; margin-top: .6rem; }
.formular input {
  font: inherit;
  padding: .7rem .8rem;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--creme);
  color: var(--text);
}
.formular button { margin-top: 1.2rem; }

/* Meldungen */
.meldung { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; background: var(--linie); }
.meldung-error { background: #fbe9e7; color: var(--rot); }
.meldung-success { background: #e8f5e9; color: var(--gruen); }

/* Kacheln auf der Startseite */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}
.kachel {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.25rem;
  min-height: 160px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}
a.kachel:hover { border-color: var(--akzent); }
.kachel strong { font-size: 1.15rem; }
.kachel span { color: var(--grau); font-size: .95rem; }
.kachel-icon { font-size: 2rem; }
.kachel-bald { opacity: .6; }
.abzeichen {
  font-size: .8rem !important;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--linie);
}
.kachel .abzeichen { margin-top: auto; align-self: flex-start; }
.abzeichen-rot { background: #fbe9e7; color: var(--rot) !important; }

h2 { font-size: 1.25rem; margin: 0 0 .75rem; }
h3 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
.hinweis { color: var(--grau); font-size: .95rem; }
.hinweis a { color: var(--akzent-dunkel); }

.knopf-hell { background: var(--linie); color: var(--text); }
.knopf-hell:hover { background: var(--linie); filter: brightness(.95); }
.knopf-rot { background: var(--rot); }
.knopf:disabled { opacity: .45; cursor: not-allowed; }

/* ================= Kasse ================= */

.kasse-nav { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.kasse-nav a {
  color: var(--grau); text-decoration: none; padding: .4rem .8rem; border-radius: 8px; font-weight: 500;
}
.kasse-nav a:hover { color: var(--text); background: var(--creme); }
.kasse-nav a.aktiv { color: var(--akzent-dunkel); background: #e6eee7; font-weight: 700; }
.kasse-nav .bediener { display: flex; align-items: center; gap: .5rem; margin: 0 0 0 .75rem; font-size: .95rem; }

/* Kassenansicht füllt genau den Bildschirm; Abmelden ist über die Startseite erreichbar */
body.vollbild { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
body.vollbild .kopf-user { display: none; }
body.vollbild .inhalt { max-width: none; width: 100%; padding: .75rem; flex: 1; min-height: 0; display: flex; flex-direction: column; }

.kasse {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: .75rem;
  flex: 1;
  min-height: 0;
}
.sortiment { display: flex; flex-direction: column; min-height: 0; }
.kat-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .75rem; }
.kat-tabs button {
  font: inherit; font-weight: 600; border: 2px solid var(--kat-farbe); background: var(--weiss);
  color: var(--text); border-radius: 999px; padding: .55rem 1.1rem; cursor: pointer; min-height: 44px;
}
.kat-tabs button.aktiv { background: var(--kat-farbe); color: #fff; }

.artikel-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-auto-rows: 100px;
  gap: .6rem;
  overflow-y: auto;
}
.artikel-knopf {
  font: inherit; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  text-align: left; padding: .75rem; border: 0; border-left: 6px solid var(--kat-farbe);
  border-radius: var(--radius); background: var(--weiss); color: var(--text); cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.08); touch-action: manipulation;
}
.artikel-knopf:active { transform: scale(.97); background: var(--linie); }
.artikel-name { font-weight: 600; line-height: 1.25; }
.artikel-preis { color: var(--grau); }

.bon {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: .75rem;
}
.umschalter { display: flex; gap: .4rem; }
.umschalter button, .umschalter label {
  flex: 1; font: inherit; font-weight: 600; padding: .6rem; min-height: 44px; border-radius: 8px;
  border: 1px solid var(--linie); background: var(--creme); color: var(--text); cursor: pointer; text-align: center;
}
.umschalter button.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; }

.bon-zeilen { list-style: none; margin: .75rem 0; padding: 0; flex: 1; overflow-y: auto; }
.bon-leer { color: var(--grau); text-align: center; padding: 2rem 1rem; }
.bon-zeile {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .5rem;
  padding: .5rem 0; border-bottom: 1px solid var(--linie);
}
.bon-text small { display: block; color: var(--grau); }
.bon-menge { display: flex; align-items: center; gap: .35rem; }
.bon-menge span { min-width: 1.4rem; text-align: center; font-weight: 600; }
.bon-betrag { min-width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.rund {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linie); background: var(--creme);
  color: var(--text); font-size: 1.2rem; cursor: pointer; touch-action: manipulation;
}

.bon-summe { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; }
.bon-summe strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.bon-aktionen { display: grid; grid-template-columns: auto 1fr 1fr; gap: .5rem; }
.knopf-bezahlen { font-size: 1.1rem; padding: .9rem .5rem; }

/* Dialoge */
.dialog {
  border: 0; border-radius: var(--radius); padding: 1.5rem; width: min(440px, 92vw);
  background: var(--weiss); color: var(--text); box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.dialog::backdrop { background: rgba(0,0,0,.45); }
.dialog h2 { margin-top: 0; }
.dialog label { display: block; font-weight: 600; margin-top: .75rem; }
.dialog-knoepfe { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.25rem; }
.dialog-knoepfe .knopf { flex: 1; }
.gross-betrag { font-size: 2.2rem; font-weight: 700; margin: .5rem 0; font-variant-numeric: tabular-nums; }
.eingabe-gross {
  width: 100%; font: inherit; font-size: 1.6rem; padding: .6rem .8rem; border-radius: 8px;
  border: 1px solid var(--linie); background: var(--creme); color: var(--text);
}
.vorschlaege { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.vorschlaege .knopf { flex: 1 0 auto; min-width: 70px; }
.rueckgeld { font-size: 1.3rem; margin-top: 1rem; }
.optionen-liste { display: flex; flex-direction: column; gap: .5rem; }
.option {
  display: flex !important; align-items: center; gap: .75rem; padding: .75rem; margin: 0 !important;
  border: 1px solid var(--linie); border-radius: 8px; cursor: pointer; font-weight: 500 !important;
}
.option input { width: 22px; height: 22px; }
.option em { margin-left: auto; font-style: normal; color: var(--grau); }
.dialog-fertig { text-align: center; }
.gross-nummer { font-size: 3rem; font-weight: 800; margin: 0; color: var(--akzent); }
.rueckgeld-gross { font-size: 1.6rem; }

/* PIN-Eingabe */
.pin-form { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; align-items: start; }
.personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.person input { position: absolute; opacity: 0; }
.person span {
  display: block; padding: 1.25rem .75rem; text-align: center; font-weight: 600; cursor: pointer;
  background: var(--weiss); border: 2px solid var(--linie); border-radius: var(--radius);
}
.person input:checked + span { border-color: var(--akzent); background: var(--akzent); color: #fff; }
.pin-anzeige { text-align: center; letter-spacing: .4em; margin-bottom: .6rem; }
.ziffernblock { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ziffernblock button {
  font: inherit; font-size: 1.5rem; height: 64px; border-radius: var(--radius); border: 1px solid var(--linie);
  background: var(--weiss); color: var(--text); cursor: pointer; touch-action: manipulation;
}
.ziffernblock .ok { background: var(--akzent); color: #fff; border: 0; font-weight: 700; }
.ziffernblock .leise { color: var(--grau); }

/* Listen, Tabellen */
.liste { display: flex; flex-direction: column; gap: .5rem; }
.bestellung { padding: .75rem 1rem; }
.bestellung summary { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; cursor: pointer; }
.bestellung .nr { font-weight: 700; min-width: 4rem; }
.bestellung .betrag { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.bestellung.storniert summary { opacity: .6; text-decoration: line-through; }
.positionen { list-style: none; padding: 0; margin: .75rem 0; }
.positionen li { display: flex; justify-content: space-between; padding: .2rem 0; border-bottom: 1px dashed var(--linie); }
.storno-form { display: flex; gap: .5rem; }
.storno-form input { flex: 1; font: inherit; padding: .5rem .7rem; border: 1px solid var(--linie); border-radius: 8px; background: var(--creme); color: var(--text); }

.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.zahlen { width: 100%; border-collapse: collapse; }
.zahlen td, .zahlen th { padding: .35rem 0; border-bottom: 1px solid var(--linie); text-align: left; }
.zahlen td:not(:first-child), .zahlen th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.zahlen .summe td { font-weight: 700; }
.zahlen .fehler td, .differenz.fehler { color: var(--rot); font-weight: 700; }
.zahlen .ok td, .differenz.ok { color: var(--gruen); font-weight: 700; }
.soll { font-size: 1.1rem; margin: .75rem 0 0; }
.liste-einfach { padding-left: 1.2rem; }
.liste-einfach a { color: var(--akzent); }

/* Titel in der Café-Schrift */
h2, .dialog h2 { font-family: var(--titel); font-weight: 700; font-size: 1.9rem; line-height: 1.1; letter-spacing: .02em; }
.gross-nummer { font-family: var(--titel); font-size: 4.5rem; font-weight: 700; }
.kachel strong { font-family: var(--titel); font-size: 1.9rem; font-weight: 700; line-height: 1.1; }

/* Bezahlknöpfe: SumUp im Holzton, damit sie sich von Bar unterscheiden */
#bezahlen-sumup { background: #8a6d4f; }
#bezahlen-sumup:hover { background: #735a40; }

/* Bon mit leichtem Rosa-Akzent wie die Tassen im Café */
.bon { border-top: 4px solid var(--rosa); }

/* ================= Einsatzplanung ================= */

/* Wochentagsfarben wie im Papierplan: Do rosa, Fr türkis, Sa gelb */
.tag-4 { --tagfarbe: #f7dbe4; }
.tag-5 { --tagfarbe: #cfeaea; }
.tag-6 { --tagfarbe: #f5edb5; }
.tag-0, .tag-1, .tag-2, .tag-3 { --tagfarbe: #e9e6e0; }

.abschnitt { margin-bottom: 2rem; }
.hinweis-balken {
  display: block; padding: .8rem 1rem; margin-bottom: 1.25rem; border-radius: var(--radius);
  background: #fff4e0; border: 1px solid #f0c987; color: var(--text); text-decoration: none; font-weight: 600;
}
.einsatz { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; }
.einsatz-link { flex-direction: row; justify-content: space-between; align-items: center; color: var(--text); text-decoration: none; }
.einsatz-freigegeben { border: 2px dashed #e39b3a; }
.einsatz-kopf { display: flex; flex-direction: column; border-left: 6px solid var(--tagfarbe); padding-left: .75rem; }
.einsatz-kopf span { color: var(--grau); }
.freigabe summary { cursor: pointer; color: var(--akzent-dunkel); font-weight: 600; padding: .3rem 0; }
.freigabe .formular { margin-top: .5rem; }
.fehlt { color: var(--rot); font-weight: 600; }
.abzeichen-gruen { background: #e3efe5; color: var(--akzent-dunkel) !important; }

.monatsnav { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.monatsnav h1 { margin: 0; }
.monatsnav .knopf { font-size: 1.4rem; padding: .3rem 1rem; }

.plan-info { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; font-size: .95rem; }
.plan-info a { color: var(--akzent-dunkel); }

.plan-huelle { overflow-x: auto; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); }
body:has(.plan-huelle) .inhalt { max-width: none; }
.plan { border-collapse: collapse; font-size: .95rem; }
.plan th, .plan td { border: 1px solid var(--linie); padding: 0; text-align: center; }
.plan thead th { background: #dfe9df; padding: .35rem .4rem; position: sticky; top: 0; }
.plan-person { min-width: 92px; line-height: 1.2; }
.plan-person small { display: block; font-weight: 400; color: var(--grau); font-size: .75rem; }
.plan-datum { position: sticky; left: 0; background: var(--tagfarbe, #dfe9df); padding: .3rem .6rem !important; white-space: nowrap; text-align: left !important; z-index: 1; }
.plan tbody tr { background: var(--tagfarbe); }
.plan .zelle select {
  width: 46px; height: 36px; border: 0; background: transparent; font: inherit; font-weight: 700; text-align: center;
  color: var(--text); cursor: pointer; appearance: none; -webkit-appearance: none; text-align-last: center;
}
.plan .zelle select.besetzt { background: rgba(255,255,255,.55); }
.plan .zelle.freigegeben { outline: 3px solid #e39b3a; outline-offset: -3px; }
.plan .wochentrenner td { background: var(--weiss); height: 10px; border-left: 0; border-right: 0; }
.plan .ferien { color: var(--grau); font-style: italic; }
.plan-status { padding: .2rem .5rem !important; white-space: nowrap; text-align: left !important; font-size: .85rem; }
.plan-status span { display: block; }
.plan-status .ok { color: var(--akzent-dunkel); }
.plan-status .warn { color: var(--rot); font-weight: 700; }

/* Wünsche im Plan: Ecke oben rechts */
.plan .zelle { position: relative; }
.plan .zelle.wunsch-gerne::after, .plan .zelle.wunsch-nicht::after {
  content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 12px 12px 0; pointer-events: none;
}
.plan .zelle.wunsch-gerne::after { border-color: transparent #3f8f4f transparent transparent; }
.plan .zelle.wunsch-nicht::after { border-color: transparent var(--rot) transparent transparent; }
.plan .zelle.wunsch-nicht select.besetzt { color: var(--rot); }

/* Wunscherfassung */
.wunsch-muster { padding: 0 .35rem; border-radius: 4px; white-space: nowrap; }
.wunsch-muster.gerne { background: #dcefdf; color: #2d6b3a; }
.wunsch-muster.nicht { background: #fbe3e1; color: var(--rot); }
.wunsch-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .5rem; }
.wunsch-tag {
  display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border-radius: var(--radius);
  background: var(--tagfarbe);
}
.wunsch-datum { font-weight: 600; min-width: 5.5rem; }
.wunsch-knopf {
  flex: 1; min-height: 48px; font: inherit; font-weight: 700; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--linie); background: var(--weiss); color: var(--grau); touch-action: manipulation;
}
.wunsch-knopf.gerne { background: #3f8f4f; border-color: #3f8f4f; color: #fff; }
.wunsch-knopf.nicht { background: var(--rot); border-color: var(--rot); color: #fff; }
.muster-form { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; margin: 0; }
.muster-tabelle tr { background: var(--tagfarbe); }
.muster-tabelle td { padding: .4rem .6rem; }
details.karte > summary { cursor: pointer; }
.formular textarea {
  font: inherit; padding: .7rem .8rem; border: 1px solid var(--linie); border-radius: 8px; background: var(--creme); color: var(--text);
}

/* ================= Tischplan ================= */

.tischplan-layout { display: grid; grid-template-columns: minmax(280px, 480px) 1fr; gap: 1.5rem; align-items: start; }
.raum {
  position: relative; width: 100%; background: var(--weiss); border: 3px solid var(--text); border-radius: 6px;
}
.raumelement, .tisch { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.raumelement { background: #eeeae3; color: var(--grau); font-size: .8rem; border: 1px solid var(--linie); }
.raumelement span { transform: rotate(0); }
.tisch {
  background: #e3efe5; border: 2px solid var(--akzent); border-radius: 6px; color: var(--text); line-height: 1.1;
  font-size: .9rem; text-align: center;
}
.tisch.rund { border-radius: 50%; }
.tisch small { color: var(--grau); }
.tisch.teilweise { background: #fff1d6; border-color: #d69a2d; }
.tisch.voll { background: #f6d5d2; border-color: var(--rot); }
.tisch.nicht-online { border-style: dashed; }

/* ================= Reservationen ================= */

.karte-mittel { max-width: 560px; margin: 1rem auto; }
.formular select {
  font: inherit; padding: .7rem .8rem; border: 1px solid var(--linie); border-radius: 8px; background: var(--creme); color: var(--text);
}
.formular .checkbox { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
.formular .checkbox input { width: 20px; height: 20px; }
.unsichtbar { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.teilen-frage { background: #fff4e0; border: 1px solid #f0c987; }
.reservation-text { font-size: 1.15rem; font-weight: 600; }
.datum-wahl input { font: inherit; padding: .4rem .6rem; border: 1px solid var(--linie); border-radius: 8px; }
.monatsnav { flex-wrap: wrap; }
.zeit-wahl { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.zeit-wahl a {
  padding: .35rem .6rem; border-radius: 8px; background: var(--weiss); border: 1px solid var(--linie);
  color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums;
}
.zeit-wahl a.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.reservation { padding: .75rem 1rem; }
.reservation summary { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; cursor: pointer; }
.reservation .nr { font-weight: 700; font-variant-numeric: tabular-nums; }
.reservation.storniert summary { opacity: .55; text-decoration: line-through; }
.meldung-warning { background: #fff4e0; color: #7a4d00; }

/* ================= Hilfe ================= */

.hilfe-link {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: auto;
  border-radius: 50%; border: 2px solid var(--akzent); color: var(--akzent-dunkel); font-weight: 800; font-size: 1.1rem;
  text-decoration: none; flex-shrink: 0;
}
.hilfe-link:hover { background: var(--akzent); color: #fff; }
body.vollbild .hilfe-link { margin-left: .5rem; }
.hilfe-inhalt { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; position: sticky; top: 0; background: var(--creme); padding: .5rem 0; z-index: 2; }
.hilfe-inhalt a {
  padding: .4rem .8rem; border-radius: 999px; background: var(--weiss); border: 1px solid var(--linie);
  color: var(--text); text-decoration: none; font-weight: 600;
}
.hilfe-abschnitt { margin-bottom: 1.25rem; scroll-margin-top: 4rem; }
.hilfe-abschnitt ol, .hilfe-abschnitt ul { padding-left: 1.3rem; }
.hilfe-abschnitt li { margin-bottom: .35rem; }
.fragen dt { font-weight: 700; margin-top: .75rem; }
.fragen dd { margin: .2rem 0 0; color: var(--grau); }

/* Schmale Bildschirme (Handy, Tablet hochkant) */
@media (max-width: 800px) {
  body.vollbild { height: auto; }
  .kasse { grid-template-columns: 1fr; }
  .artikel-raster { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); overflow: visible; }
  .bon { position: sticky; bottom: 0; max-height: 60vh; }
  .pin-form, .zwei-spalten, .tischplan-layout { grid-template-columns: 1fr; }
}