/* ==========================================================================
   Montag App-Design · gemeinsames Stylesheet für alle Montag-Apps
   Version 1.3 · Nov. 2026
   1.3: Markenvarianten für Gästeseiten anderer Marken (<html data-marke="villa-haar">), Tokens
        --m-zier, --m-card-border, --m-input-border; Bausteine m-brand--wort, m-eyebrow,
        m-choices/m-choice (Auswahl-Kacheln), m-summary, m-field__req, Felder in m-card--pad,
        Absätze in m-note
   1.2: aus der Datenschutz-App: m-field--filled, m-input, m-field__hint/__error, m-field--error,
        m-checks/m-check, m-section-bar, m-logo, Umbruch in Titeln, Symbolgrößen, Druck
   1.1: --m-accent-text (Rot als Schrift, im Dunkelmodus heller für 4,5 : 1), hellere
        Tönungen für Bernstein/Grün (Kontrast), Bausteine m-btn--small/--large, m-card--pad,
        m-note, klickbare m-chip mit aria-pressed, m-empty, m-toast--warn, m-back,
        m-segment--large, m-stepper--large, --m-paper/--m-ink/--m-scrim,
        m-row__icon, m-field--stack, Datumsfelder in m-field, m-stepper mit Eingabefeld
   Lato wird lokal ausgeliefert (DSGVO + offline), Ordner /fonts/ daneben.
   ========================================================================== */

/* ---------- Schrift (selbst gehostet) ---------- */
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/lato-700.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 900; font-style: normal; font-display: swap; src: url("fonts/lato-900.woff2") format("woff2"); }

/* ---------- Tokens: hell ---------- */
:root {
  color-scheme: light dark;

  --m-font: "Lato", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, sans-serif;

  --m-accent: #B3201A;        /* Montag-Rot */
  --m-accent-press: #8A1812;
  --m-on-accent: #FFFFFF;
  --m-accent-tint: #F7E4E2;
  --m-accent-text: #B3201A;   /* Rot als Schrift: Links, Textknöpfe, aktiver Tab */

  --m-bg: #F2F2F7;            /* Seitenhintergrund */
  --m-card: #FFFFFF;          /* Karten, Listen */
  --m-fill: #E9E9EE;          /* Suchfeld, Segment, Sekundärbutton */
  --m-text: #000000;
  --m-text-2: #636366;        /* Nebentext */
  --m-sep: rgba(60, 60, 67, 0.22);
  --m-bar: rgba(249, 249, 251, 0.86);
  --m-seg-on: #FFFFFF;

  --m-warn: #B45309;          /* Bernstein: läuft ab, Achtung */
  --m-warn-tint: #FEF3EA;
  --m-ok: #1F7A4D;            /* Grün: in Ordnung */
  --m-ok-tint: #EBF4EF;
  --m-danger: #B3201A;        /* nur für Löschen o. Ä. */
  --m-zier: var(--m-sep);     /* Zierlinien (Kopf, Fuß); Marken setzen eigene Farbe */
  --m-card-border: 0;         /* Rand um Karten; Marken mit hellem Grund setzen einen */
  --m-input-border: 0;        /* Rand um gefüllte Eingaben; Gästeseiten setzen einen */

  --m-r-s: 8px;               /* Chips, Segmente */
  --m-r-m: 14px;              /* Karten, Buttons */
  --m-r-l: 20px;              /* Sheets */
  --m-r-pill: 999px;

  --m-s1: 4px; --m-s2: 8px; --m-s3: 12px; --m-s4: 16px; --m-s5: 24px; --m-s6: 32px;

  /* Papier und Tinte: Etikettenvorschau, Kamerabild; Abdunklung hinter Blättern. Gleich in hell und dunkel. */
  --m-paper: #FFFFFF;
  --m-ink: #000000;
  --m-scrim: rgba(0, 0, 0, 0.35);

  --m-shadow-seg: 0 1px 3px rgba(0, 0, 0, 0.12);
  --m-shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.16);
  --m-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --m-dur: 220ms;
}

/* ---------- Tokens: dunkel (Graphit) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m-accent: #DE3A30; --m-accent-press: #C22F26; --m-accent-tint: #3A2224; --m-accent-text: #FF6A5F;
    --m-bg: #1B1C20; --m-card: #26272C; --m-fill: #34353B;
    --m-text: #FFFFFF; --m-text-2: #AEAEB2; --m-sep: rgba(84, 84, 88, 0.65);
    --m-bar: rgba(27, 28, 32, 0.86); --m-seg-on: #55565C;
    --m-warn: #F0A04B; --m-warn-tint: #3B2C1C; --m-ok: #5FB98A; --m-ok-tint: #1F3229;
    --m-danger: #FF6A5F;
  }
}
:root[data-theme="dark"] {
  --m-accent: #DE3A30; --m-accent-press: #C22F26; --m-accent-tint: #3A2224; --m-accent-text: #FF6A5F;
  --m-bg: #1B1C20; --m-card: #26272C; --m-fill: #34353B;
  --m-text: #FFFFFF; --m-text-2: #AEAEB2; --m-sep: rgba(84, 84, 88, 0.65);
  --m-bar: rgba(27, 28, 32, 0.86); --m-seg-on: #55565C;
  --m-warn: #F0A04B; --m-warn-tint: #3B2C1C; --m-ok: #5FB98A; --m-ok-tint: #1F3229;
  --m-danger: #FF6A5F;
}

/* ---------- Markenvarianten ----------
   Gästeseiten anderer Marken: <html data-marke="…">. Getauscht werden nur Farben, Bausteine,
   Schrift und Abstände bleiben Montag. Gästeseiten sind immer hell, wie die Websites der Marken.
   Neue Marke: hier einen Block ergänzen (alle Farb-Tokens), Kontrast ≥ 4,5 : 1 prüfen. */
:root[data-marke="villa-haar"] {       /* Villa Haar (villahaar.de): Creme, Graphit, Gold */
  color-scheme: light;
  --m-accent: #1D2025; --m-accent-press: #000000; --m-on-accent: #FFFFFF;
  --m-accent-tint: #F3EBD3; --m-accent-text: #6B5E37;
  --m-bg: #FFFBF2; --m-card: #FFFFFF; --m-fill: #F1ECE0;
  --m-text: #1D2025; --m-text-2: #474A4D; --m-sep: rgba(29, 32, 37, 0.16);
  --m-bar: rgba(255, 251, 242, 0.9); --m-seg-on: #FFFFFF;
  --m-warn: #B45309; --m-warn-tint: #FEF3EA; --m-ok: #1F7A4D; --m-ok-tint: #EBF4EF; --m-danger: #B3201A;
  --m-zier: #D6BB6E;                   /* Gold: nur Linien, nie Schrift (Kontrast) */
  --m-card-border: 1px solid rgba(29, 32, 37, 0.16);
  --m-input-border: 1.5px solid #8A8D91;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--m-bg); color: var(--m-text);
  font-family: var(--m-font); font-size: 17px; line-height: 1.35;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--m-accent-text); }
:focus-visible { outline: 3px solid var(--m-accent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Typografie ---------- */
.m-title    { font-size: 34px; font-weight: 900; letter-spacing: -0.4px; line-height: 1.1; margin: 0; }
.m-heading  { font-size: 22px; font-weight: 700; margin: 0; }
.m-body     { font-size: 17px; font-weight: 400; }
.m-small    { font-size: 13px; color: var(--m-text-2); }
.m-section  { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--m-text-2); padding: 0 var(--m-s4); margin: 0 0 6px; }
.m-num      { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.m-page   { max-width: 720px; margin: 0 auto; padding: var(--m-s5) var(--m-s4) 120px; display: flex; flex-direction: column; gap: var(--m-s4); }
.m-page--wide { max-width: 1200px; }
.m-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* Marke oben links */
.m-brand { display: flex; align-items: center; gap: var(--m-s2); font-size: 15px; font-weight: 700; }
.m-brand::before { content: ""; width: 14px; height: 14px; background: var(--m-accent); }
.m-brand span { font-weight: 400; color: var(--m-text-2); }

/* ---------- Karten & gruppierte Listen ---------- */
.m-card { background: var(--m-card); border-radius: var(--m-r-m); overflow: hidden; border: var(--m-card-border); }
.m-row  { display: flex; align-items: center; gap: var(--m-s3); min-height: 52px; padding: var(--m-s2) var(--m-s4); }
.m-row + .m-row { border-top: 0.5px solid var(--m-sep); }
.m-row__main { flex: 1; min-width: 0; }
.m-row__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-row__chev { width: 8px; height: 14px; color: var(--m-text-2); flex: none; }
a.m-row, button.m-row { width: 100%; border: 0; background: none; text-align: left; color: inherit; text-decoration: none; cursor: pointer; }
a.m-row:active, button.m-row:active { background: var(--m-fill); }

/* Kennzahl-Kachel */
.m-stat { background: var(--m-card); border-radius: var(--m-r-m); padding: var(--m-s3); }
.m-stat__label { font-size: 13px; color: var(--m-text-2); }
.m-stat__value { font-size: 24px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--m-s2);
  min-height: 50px; padding: 0 var(--m-s5); border: 0; border-radius: var(--m-r-m);
  font-size: 17px; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: transform var(--m-dur) var(--m-ease), background var(--m-dur) var(--m-ease);
}
.m-btn:active { transform: scale(0.98); }
.m-btn--primary   { background: var(--m-accent); color: var(--m-on-accent); }
.m-btn--primary:active { background: var(--m-accent-press); }
.m-btn--secondary { background: var(--m-fill); color: var(--m-text); }
.m-btn--plain     { background: transparent; color: var(--m-accent-text); padding: 0 var(--m-s2); }
.m-btn--danger    { background: transparent; color: var(--m-danger); }
.m-btn--block     { width: 100%; }
.m-btn[disabled]  { opacity: 0.4; cursor: default; }

.m-icon-btn { width: 44px; height: 44px; border: 0; border-radius: var(--m-r-pill); background: var(--m-card); color: var(--m-accent-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* Plus/Minus-Zähler */
.m-stepper { display: inline-flex; align-items: center; background: var(--m-fill); border-radius: var(--m-r-pill); }
.m-stepper button { width: 44px; height: 38px; border: 0; background: transparent; color: var(--m-accent-text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.m-stepper output { min-width: 28px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Segment-Umschalter ---------- */
.m-segment { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 2px; border-radius: 10px; background: var(--m-fill); }
.m-segment button { height: 32px; border: 0; border-radius: var(--m-r-s); background: transparent; font-size: 13px; font-weight: 700; cursor: pointer; transition: background var(--m-dur) var(--m-ease); }
.m-segment button[aria-pressed="true"] { background: var(--m-seg-on); box-shadow: var(--m-shadow-seg); }

/* ---------- Formulare ---------- */
.m-field { display: flex; align-items: center; gap: var(--m-s3); min-height: 52px; padding: 0 var(--m-s4); }
.m-field + .m-field { border-top: 0.5px solid var(--m-sep); }
.m-field label { width: auto; min-width: 110px; max-width: 60%; flex: 0 1 auto; }
.m-field input, .m-field select { flex: 1; min-width: 0; border: 0; background: transparent; text-align: right; outline: none; font-size: 17px; }
.m-hint { font-size: 13px; color: var(--m-text-2); padding: 6px var(--m-s4) 0; }

.m-search { display: flex; align-items: center; gap: var(--m-s2); height: 40px; padding: 0 var(--m-s3); border-radius: 12px; background: var(--m-fill); color: var(--m-text-2); }
.m-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 17px; color: var(--m-text); }

/* ---------- Chips & Status ---------- */
.m-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; background: var(--m-fill); font-size: 13px; font-weight: 700; }
.m-chip--accent { background: var(--m-accent-tint); color: var(--m-accent-text); }
.m-chip--warn   { background: var(--m-warn-tint); color: var(--m-warn); }
.m-chip--ok     { background: var(--m-ok-tint); color: var(--m-ok); }

/* ---------- Leisten ---------- */
.m-navbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 var(--m-s4);
  background: var(--m-bar); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 0.5px solid var(--m-sep);
}
.m-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--m-bar); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid var(--m-sep);
}
.m-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 44px; font-size: 10px; font-weight: 700; text-decoration: none; color: var(--m-text-2); }
.m-tabbar a[aria-current="page"] { color: var(--m-accent-text); }
.m-tabbar svg { width: 24px; height: 24px; }

/* Ab Tablet-Breite: Tabbar wird linke Seitenleiste */
@media (min-width: 900px) {
  .m-app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
  .m-tabbar { position: sticky; top: 0; height: 100vh; grid-auto-flow: row; grid-auto-rows: min-content; align-content: start; gap: 4px; padding: var(--m-s5) var(--m-s3); border-top: 0; border-right: 0.5px solid var(--m-sep); }
  .m-tabbar a { flex-direction: row; gap: var(--m-s3); font-size: 15px; padding: 10px var(--m-s3); border-radius: 10px; }
  .m-tabbar a[aria-current="page"] { background: var(--m-accent-tint); }
}

/* ---------- Sheet / Dialog ---------- */
.m-sheet { border: 0; padding: var(--m-s5); width: min(520px, 100vw); border-radius: var(--m-r-l); background: var(--m-card); color: var(--m-text); box-shadow: var(--m-shadow-pop); }
.m-sheet::backdrop { background: var(--m-scrim); }

/* ---------- Toast ---------- */
.m-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); padding: 12px 18px; border-radius: var(--m-r-pill); background: var(--m-text); color: var(--m-bg); font-weight: 700; box-shadow: var(--m-shadow-pop); }

/* ---------- Ergänzungen 1.1 ---------- */
/* Knopfgrößen: klein für Zeilen und Werkzeugleisten, groß für Handschuhe (Lager, Küche) */
.m-btn--small { min-height: 44px; padding: 0 var(--m-s4); font-size: 15px; }
.m-btn--large { min-height: 64px; font-size: 19px; }
.m-btn svg { width: 22px; height: 22px; flex: none; }

/* Karte mit Innenabstand (Text, Formularteile, die keine Zeilen sind) */
.m-card--pad { padding: var(--m-s4); }

/* Zurück-Link oben links mit dem Namen der vorigen Seite */
.m-back { display: inline-flex; align-items: center; gap: var(--m-s1); min-height: 44px; color: var(--m-accent-text); text-decoration: none; font-size: 17px; background: none; border: 0; padding: 0; cursor: pointer; align-self: flex-start; }
.m-back::before { content: ""; width: 10px; height: 10px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); margin: 0 4px 0 6px; }

/* Hinweiskasten: neutral, Achtung (Bernstein), in Ordnung (Grün). Nie Rot. */
.m-note { padding: var(--m-s3) var(--m-s4); border-radius: var(--m-r-m); background: var(--m-fill); color: var(--m-text); font-size: 15px; }
.m-note--warn { background: var(--m-warn-tint); color: var(--m-text); box-shadow: inset 4px 0 0 var(--m-warn); }
.m-note--ok { background: var(--m-ok-tint); color: var(--m-text); box-shadow: inset 4px 0 0 var(--m-ok); }
.m-note svg { width: 20px; height: 20px; vertical-align: -4px; margin-right: var(--m-s1); }

/* Chips als Filter (antippbar, aria-pressed) */
button.m-chip { min-height: 44px; padding: 0 14px; border: 0; color: var(--m-text); cursor: pointer; white-space: nowrap; flex: none; }
button.m-chip[aria-pressed="true"] { background: var(--m-accent-tint); color: var(--m-accent-text); }
.m-chips { display: flex; gap: var(--m-s2); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.m-chips::-webkit-scrollbar { display: none; }

/* Leerer Zustand („Nichts gefunden“) */
.m-empty { padding: var(--m-s6) var(--m-s4); text-align: center; color: var(--m-text-2); }

/* Toast für Fehler und Warnungen */
.m-toast--warn { background: var(--m-warn); color: var(--m-card); }

/* Große Varianten für Handschuhe (Lager, Küche): Segment mit 44 px, zweizeilig erlaubt; Zähler 52 × 48 */
.m-segment--large button { height: auto; min-height: 44px; padding: var(--m-s1) 6px; font-size: 15px; line-height: 1.2; color: var(--m-text); hyphens: auto; }
@media (max-width: 480px) { .m-segment--large button { font-size: 13px; padding: var(--m-s1) 2px; } }
.m-stepper--large button { width: 52px; height: 48px; }
.m-stepper--large output { min-width: 40px; font-size: 20px; }
.m-stepper svg { width: 18px; height: 18px; }
.m-segment button { color: var(--m-text); }

/* Aus der Etiketten-App übernommen (1.1) */
/* m-row__icon (Symbol links in einer Listenzeile, z. B. Auswahl auf der Startseite) */
.m-row__icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--m-r-s); background: var(--m-accent-tint); color: var(--m-accent-text); }
.m-row__icon svg { width: 28px; height: 28px; }
/* m-field--stack (Beschriftung über dem Wert, für lange Texte in einer Formularkarte) */
.m-field--stack { flex-direction: column; align-items: stretch; gap: var(--m-s1); padding: var(--m-s2) var(--m-s4); }
.m-field--stack label { width: auto; max-width: none; font-size: 13px; color: var(--m-text-2); }
.m-field--stack input { text-align: left; min-height: 32px; }
/* m-field-datum (Datum/Uhrzeit in .m-field rechtsbündig, ohne eigenen Kasten in iOS-Safari) */
.m-field input[type="date"], .m-field input[type="datetime-local"], .m-field input[type="time"] { -webkit-appearance: none; appearance: none; min-height: 44px; }
.m-field input::-webkit-date-and-time-value { text-align: right; }
/* m-stepper-eingabe (Zähler mit Eingabefeld statt <output>, z. B. Kopien 1–50; auch --large) */
.m-stepper input { width: 56px; min-height: 38px; border: 0; background: transparent; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; appearance: textfield; }
.m-stepper--large input { width: 64px; min-height: 48px; font-size: 20px; }
.m-stepper input::-webkit-outer-spin-button, .m-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.m-stepper button[disabled] { opacity: 0.4; cursor: default; }

/* ---------- Ergänzungen 1.2 (aus der Datenschutz-App) ---------- */
/* m-field--filled: lange Formulare – fette Beschriftung, gefüllte Eingaben; mit m-field--stack untereinander */
.m-field--filled.m-field--stack > label, .m-field__label { width: auto; max-width: none; font-size: 15px; font-weight: 700; color: var(--m-text); }
.m-input,
.m-field--filled.m-field--stack input:not([type="checkbox"]):not([type="radio"]),
.m-field--filled.m-field--stack select,
.m-field textarea {
  width: 100%; min-height: 44px; padding: var(--m-s2) var(--m-s3); border: var(--m-input-border); border-radius: var(--m-r-s);
  background: var(--m-fill); color: var(--m-text); font-size: 17px; text-align: left; outline: none;
}
.m-input:focus-visible,
.m-field--filled input:focus-visible,
.m-field--filled select:focus-visible,
.m-field textarea:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 0; }
textarea.m-input, .m-field textarea { min-height: 88px; resize: vertical; line-height: 1.4; }
.m-input[disabled], .m-field--filled [disabled] { opacity: 0.6; }
/* Hinweis und Fehler je Feld */
.m-field__hint { font-size: 13px; color: var(--m-text-2); }
.m-field__error { font-size: 13px; font-weight: 700; color: var(--m-warn); }
.m-field__error:empty { display: none; }
.m-field--error > label, .m-field--error .m-field__label { color: var(--m-warn); }
.m-field--error input, .m-field--error select, .m-field--error textarea, .m-field--error .m-checks { box-shadow: inset 0 0 0 2px var(--m-warn); border-radius: var(--m-r-s); }
/* Liste mit Häkchen (Mehrfachauswahl) */
.m-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 var(--m-s4); min-width: 0; margin: 0; padding: 0; border: 0; }
.m-check, .m-field .m-check { display: flex; align-items: center; gap: var(--m-s3); width: auto; min-height: 44px; flex: initial; cursor: pointer; }
.m-check input, .m-field .m-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--m-accent); }
/* Abschnittsüberschrift mit Aktionen rechts */
.m-section-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--m-s1) var(--m-s2); }
.m-section-bar .m-section { margin: 0; }
.m-section-bar__actions { display: flex; flex-wrap: wrap; gap: var(--m-s1); margin-left: auto; }
/* Volles Logo auf Papierfläche (nur Login-Seite), auch im Dunkelmodus lesbar */
.m-logo { display: inline-flex; align-self: center; padding: var(--m-s3); border-radius: var(--m-r-m); background: var(--m-paper); }
.m-logo img { display: block; width: 87px; height: auto; }
/* Lange Wörter in Titeln umbrechen */
.m-title, .m-heading { overflow-wrap: anywhere; hyphens: auto; }
/* Symbolgrößen */
.m-icon-btn svg { width: 24px; height: 24px; }
.m-search svg { width: 20px; height: 20px; flex: none; }
/* Druck: Leisten und Toast weglassen, Seitenleiste auflösen */
@media print {
  .m-tabbar, .m-navbar, .m-toast { display: none !important; }
  .m-app { display: block; }
}

/* ---------- Ergänzungen 1.3 (Gästeseiten) ---------- */
/* Wortmarke statt rotem Quadrat (Gästeseiten anderer Marken): Name in Versalien, Ort darunter */
.m-brand--wort { flex-direction: column; align-items: flex-start; gap: 0; }
.m-brand--wort::before { display: none; }
.m-brand .m-brand__name { font-size: 15px; font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase; color: var(--m-text); }
.m-brand .m-brand__ort { font-size: 13px; font-weight: 400; letter-spacing: 1px; color: var(--m-text-2); }

/* Überzeile über einem Titel („Tischreservierung“, „Schritt 1“) */
.m-eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--m-accent-text); }

/* Auswahl-Kacheln (Radio-Knöpfe: Datum, Uhrzeit, Personen). Gewählt: input:checked oder .is-selected */
.m-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--m-s2); }
.m-choices--wide { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.m-choice {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 64px; padding: var(--m-s2); border-radius: var(--m-r-m); background: var(--m-card); color: var(--m-text);
  box-shadow: inset 0 0 0 1.5px var(--m-sep); cursor: pointer; text-align: center;
}
.m-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.m-choice:focus-within { outline: 3px solid var(--m-accent); outline-offset: 2px; }
.m-choice:has(input:checked), .m-choice.is-selected { background: var(--m-accent-tint); box-shadow: inset 0 0 0 2px var(--m-accent); }
.m-choice--full { background: var(--m-bg); color: var(--m-text-2); box-shadow: none; outline: 1.5px dashed var(--m-sep); outline-offset: -1.5px; }
.m-choice[aria-disabled="true"] { cursor: default; }
.m-choice__top { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.m-choice__main { font-size: 24px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.m-choice__sub { font-size: 13px; color: var(--m-text-2); }
.m-choice:has(input:checked) .m-choice__sub, .m-choice.is-selected .m-choice__sub { color: var(--m-text); }

/* Zusammenfassung (Bezeichnung links, Wert rechts) als <dl> */
.m-summary { display: grid; grid-template-columns: fit-content(42%) minmax(0, 1fr); gap: 6px var(--m-s4); margin: 0; }
.m-summary dt { color: var(--m-text-2); }
.m-summary dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* Pflichtangabe hinter einer Beschriftung */
.m-field__req { font-size: 13px; font-weight: 400; color: var(--m-text-2); }

/* Formularfelder untereinander in einer Karte mit Innenabstand (ohne Zeilenrand) */
.m-card--pad > .m-field--stack { padding: 0; }
.m-card--pad > .m-field + .m-field { border-top: 0; }

/* Absätze im Hinweiskasten */
.m-note > p { margin: 0; }
.m-note > p + p { margin-top: var(--m-s2); }

/* ---------- Kiosk-Displays (Küchen-/Servicemonitor) ---------- */
.m-kiosk { font-size: 24px; }
.m-kiosk .m-title { font-size: 56px; }
.m-kiosk .m-heading { font-size: 34px; }
.m-kiosk .m-small { font-size: 18px; }