/* ══════════════════════════════════════════════════════════
   CASA D – Mitgliederbereich (Login, Team, VIP, Admin)
   Mobil zuerst, Markenfarben und Schriften der Website.
══════════════════════════════════════════════════════════ */

/*
Font: 		Chevalon
Style: 		Light
URL: 		https://youworkforthem.com/font/T15720/chevalon
Foundry: 	Asenbayu
Foundry: 	https://youworkforthem.com/designer/1468/asenbayu
Copyright:	Copyright Chevalon fonts © asenbayu 2022. All Rights Reserved
Version: 	18
Created:	April 09, 2026
License: 	https://www.youworkforthem.com/font-license
License: 	The WebFont(s) listed in this document must follow the YouWorkForThem
			WebFont license rules. All other parties are strictly restricted
			from using the WebFonts(s) listed without a purchased license.
			All details above must always remain unaltered and visible in your CSS.
*/
@font-face {
  font-family: 'Chevalon';
  src: url('/chevalon-light.woff2') format('woff2'), url('/chevalon-light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
/* Inter (SIL OFL, selbst gehostet, keine Google-Anfrage): für Vietnamesisch, weil CASAD Sans und Chevalon
   die vietnamesischen Zeichen nicht haben und der Browser sonst mischt (seit 22.10.2026) */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter/InterVariable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'CasadSans';
  src: url('/CASADSans-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --blau: #131883;
  --gold: #eec900;
  --beige: #e9dcbe;
  --creme: #f5f0e6;
  --dunkel: #101010;
  --orange: #ea5b0b;
  --gruen: #0C2E00;
  --weiss: #ffffff;
  --grau: #6b6658;
  --linie: #e2d6ba;
  --ok: #2f6b1f;
  --font-serif: 'Chevalon', Georgia, serif;
  --font-sans: 'CasadSans', 'Segoe UI', Arial, sans-serif;
}
html[lang="vi"] {
  --font-serif: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-sans: 'Inter', 'Segoe UI', Arial, sans-serif;
}
html[lang="vi"] h1, html[lang="vi"] h2 { font-weight: 600; letter-spacing: -0.01em;
  --radius: 16px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--creme); color: var(--dunkel);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
  min-height: 100vh; min-height: 100svh;
}
a { color: var(--blau); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---- Kopf ---- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: var(--blau); color: var(--creme);
  padding: 12px 16px calc(12px);
  padding-top: max(12px, env(safe-area-inset-top));
}
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1080px; margin: 0 auto; }
.kopf-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.kopf-logo img { height: 20px; width: auto; filter: brightness(0) invert(94%) sepia(8%) saturate(300%); }
.kopf-rolle {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid rgba(245, 240, 230, 0.5); border-radius: 999px; padding: 2px 9px;
}
.kopf-rechts { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; }
.kopf-name { opacity: 0.85; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf .knopf-klein { color: var(--creme); border-color: rgba(245, 240, 230, 0.55); }
/* Burgermenü im Kopf (Team + Admin, seit 24.10.2026) */
.kopf-rechts { position: relative; display: flex; align-items: center; gap: 8px; }
.kopf-sprache { min-width: 44px; height: 36px; padding: 0 10px; border-radius: 10px; font-weight: 600; letter-spacing: 0.04em; }
.kopf-burger { width: 40px; height: 36px; border: 1px solid rgba(245, 240, 230, 0.55); border-radius: 10px; background: transparent; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; }
.kopf-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; }
.kopf-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kopf-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kopf-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.admin-seite .kopf-burger { border-color: rgba(238, 201, 0, 0.6); }
.kopf-menue { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: #fff; color: var(--blau);
  border: 1px solid var(--linie); border-radius: 14px; box-shadow: 0 14px 34px rgba(19, 24, 131, 0.18); padding: 6px; z-index: 30; display: flex; flex-direction: column; gap: 2px; }
.kopf-menue__eintrag, .kopf-menue__zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--blau); font: inherit; font-size: 0.92rem; padding: 10px 12px; border-radius: 10px; cursor: pointer; text-decoration: none; }
.kopf-menue__eintrag:hover { background: var(--creme); }
.kopf-menue__zeile { cursor: default; }
.kopf-menue__zeile .knopf-klein { color: var(--blau); border-color: var(--linie); }
.kopf-menue [data-abmelden] { color: #b04400; border-top: 1px solid var(--linie); border-radius: 0 0 10px 10px; margin-top: 2px; }
@media (max-width: 959px) { .nur-breit { display: none !important; } }
@media (max-width: 420px) {
  .kopf-zeile { gap: 8px; }
  .kopf-rechts { gap: 5px; }
  .kopf .knopf-klein { padding: 5px 9px; font-size: 0.76rem; }
  .kopf-logo { gap: 6px; }
  .kopf-logo img { height: 17px; }
  .kopf-rolle { font-size: 0.6rem; padding: 2px 7px; }
}

/* Admin-Bereich: blaue Leiste mit gelber Schrift wie Team */
.admin-seite .kopf { background: var(--blau); color: var(--gold); }
.admin-seite .kopf .logo-maske { opacity: 0.95; }
.admin-seite .kopf-rolle { border-color: rgba(19, 24, 131, 0.55); color: var(--blau); }
.admin-seite .kopf .knopf-klein { color: var(--gold); border-color: rgba(238, 201, 0, 0.6); }
.admin-seite .kopf .knopf-klein:hover { background: rgba(255, 255, 255, 0.1); }

/* VIP-Bereich: blaue Leiste mit gelber Schrift */
.vip-seite .kopf { background: var(--blau); }
.vip-seite .kopf .knopf-klein { border-color: rgba(238, 201, 0, 0.6); }
.vip-seite .kopf .knopf-klein:hover { background: rgba(255, 255, 255, 0.15); }

/* Logo als Maske: nimmt die Schriftfarbe (currentColor) des Bereichs an */
.logo-maske {
  display: inline-block; height: 20px; aspect-ratio: 396 / 83; background: currentColor; flex: 0 0 auto;
  -webkit-mask: url('/mitglieder/logo.svg') center / contain no-repeat; mask: url('/mitglieder/logo.svg') center / contain no-repeat;
}
@media (max-width: 420px) { .kopf .logo-maske { height: 17px; } }

/* Farben je Bereich (oben in der Leiste)
   Team:  alles Gelb auf Blau, Abzeichen gelb gefüllt mit blauer Schrift
   Admin: Blau auf Gelb, Abzeichen umgekehrt (blau gefüllt, gelbe Schrift)
   VIP:   alles Gelb auf Orange, Abzeichen gelb umrandet */
.kopf { color: var(--gold); }
.kopf .knopf-klein { color: var(--gold); border-color: rgba(238, 201, 0, 0.6); }
.kopf .kopf-rolle { background: var(--gold); color: var(--blau); border-color: var(--gold); }
.admin-seite .kopf { color: var(--gold); }
.admin-seite .kopf .kopf-rolle { background: var(--blau); color: var(--gold); border-color: var(--gold); }
.vip-seite .kopf { color: var(--gold); }
.vip-seite .kopf .kopf-rolle { background: transparent; color: var(--gold); border-color: var(--gold); }
/* VIP-Karte: Blau wie die Kopfleiste, Logo/VIP/Name/Nummer in Gold, Mond oben rechts in Gold */
.vip-seite .vip-karte {
  background: linear-gradient(135deg, #1a2096 0%, var(--blau) 50%, #0e1266 100%);
  color: var(--gold); box-shadow: 0 18px 40px rgba(19, 24, 131, 0.35);
}
.vip-seite .vip-karte::after { display: none; }
.vip-karte-mond { position: absolute; z-index: 1; right: 20px; top: 18px; width: 64px; height: 64px; fill: var(--gold); pointer-events: none; }
.vip-karte-logo { height: 22px; align-self: flex-start; position: relative; z-index: 1; color: var(--gold); }
.vip-seite .vip-karte .vip-titel { color: var(--gold); }

/* ---- Reiter: gleich grosse Kacheln wie Tasten an einem DJ-Pult, jede mit eigener Farbe,
   damit man sie mit dem Auge und aus dem Gedaechtnis trifft (Kundenwunsch 24.10.2026) ---- */
.reiter {
  background: var(--creme); border-bottom: 1px solid var(--linie);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible;
  padding: 8px 10px;
}
.reiter::-webkit-scrollbar { display: none; }
.reiter button {
  --t: var(--blau);
  min-width: 0; min-height: 50px; border: 1.5px solid var(--t);
  background: color-mix(in srgb, var(--t) 14%, #fff);
  border-radius: 12px; padding: 6px 4px; cursor: pointer; position: relative;
  font-size: 0.72rem; line-height: 1.15; font-weight: 600; color: var(--t);
  white-space: normal; overflow-wrap: anywhere; hyphens: auto; text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.reiter button[aria-selected="true"] { background: var(--t); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--t) 40%, transparent); }
.reiter button .zaehler { position: absolute; top: -6px; right: -4px; margin: 0; box-shadow: 0 0 0 2px var(--creme); }
/* Farben je Reiter (Admin und Team teilen sich die Namen) */
.reiter [data-ziel="uebersicht"], .reiter [data-ziel="aktuell"] { --t: #131883; }
.reiter [data-ziel="reservierungen"] { --t: #ea5b0b; }
.reiter [data-ziel="dienstplan"] { --t: #1f7a3f; }
.reiter [data-ziel="checklisten"] { --t: #0b7a86; }
.reiter [data-ziel="aufgaben"] { --t: #b8860b; }
.reiter [data-ziel="zeiten"] { --t: #6a3fa0; }
.reiter [data-ziel="team"], .reiter [data-ziel="wissen"] { --t: #c2185b; }
.reiter [data-ziel="barbook"], .reiter [data-ziel="bar"] { --t: #8b1a1a; }
.reiter [data-ziel="backbar"] { --t: #a0522d; }
.reiter [data-ziel="kueche"] { --t: #d2491c; }
.reiter [data-ziel="service"] { --t: #2d6cdf; }
.reiter [data-ziel="lager"] { --t: #6b5b3e; }
.reiter [data-ziel="guide"] { --t: #0f8f8f; }
.reiter [data-ziel="einkauf"] { --t: #5b7a1a; }
.reiter [data-ziel="vip"] { --t: #a88700; }
.reiter [data-ziel="gaeste"] { --t: #8e4b9e; }
.reiter [data-ziel="mitglieder"] { --t: #3b4a6b; }
.reiter [data-ziel="einstellungen"], .reiter [data-ziel="konto"] { --t: #5c5c5c; }
.reiter [data-ziel="sicherheit"] { --t: #b22222; }
@media (max-width: 479px) { .reiter { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* Handy: 3 Spalten, sonst bricht Reservierungen im Wort um */
.zaehler {
  display: inline-block; min-width: 18px; height: 18px; line-height: 18px; text-align: center;
  border-radius: 9px; background: var(--orange); color: var(--weiss); font-size: 0.7rem; margin-left: 6px; padding: 0 5px;
}

/* ---- Inhalt ---- */
main { max-width: 1080px; margin: 0 auto; padding: 20px 16px 64px; }
.bereich { display: none; }
.bereich.aktiv { display: block; }
h1, h2 { font-family: var(--font-serif); font-weight: 300; color: var(--blau); line-height: 1.12; }
h1 { font-size: clamp(2rem, 8vw, 3rem); margin-bottom: 8px; }
h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); margin: 6px 0 14px; }
h3 { font-size: 1.02rem; font-weight: 500; color: var(--dunkel); margin-bottom: 4px; }
.einleitung { color: var(--grau); margin-bottom: 18px; max-width: 60ch; }
.klein { font-size: 0.82rem; color: var(--grau); }
.vorzeile { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grau); }
.leer { color: var(--grau); padding: 18px 0; }
.abschnitt { margin-bottom: 34px; }

.karte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 16px; margin-bottom: 12px;
}
.karte.wichtig { border-color: var(--orange); box-shadow: inset 4px 0 0 var(--orange); }
.karte-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.karte p + p { margin-top: 8px; }
.text { white-space: pre-line; }
.raster { display: grid; gap: 12px; }
@media (min-width: 720px) { .raster.zwei { grid-template-columns: 1fr 1fr; } }

.marke {
  display: inline-block; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px; background: var(--beige); color: var(--dunkel); white-space: nowrap;
}
.marke.offen { background: #ffd9a8; color: #5a3000; }
.marke.genehmigt, .marke.beantwortet, .marke.aktiv, .marke.zu { background: #dcebd2; color: var(--ok); }
.marke.abgelehnt, .marke.gesperrt, .marke.ab { background: #f7d9c8; color: #8a3200; }
.marke.blau { background: var(--blau); color: var(--creme); }

/* ---- Formulare ---- */
.feld { display: block; margin-bottom: 14px; }
.feld > span { display: block; font-size: 0.82rem; color: var(--grau); margin-bottom: 5px; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="tel"],
input[type="time"], input[type="number"], select, textarea {
  width: 100%; border: 1px solid var(--linie); background: var(--weiss);
  border-radius: 12px; padding: 12px 14px; font-size: 16px; /* 16px: kein Zoom auf dem iPhone */
  outline: none; -webkit-appearance: none; appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--blau) 50%), linear-gradient(135deg, var(--blau) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
textarea { min-height: 110px; resize: vertical; }
.pw-feld { position: relative; display: block; }
.pw-feld input { padding-right: 52px; }
.pw-auge {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 40px; border: 0; background: transparent; color: var(--grau);
  display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px;
}
.pw-auge:hover, .pw-auge[aria-pressed="true"] { color: var(--blau); }
.pw-auge:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }
input:focus, select:focus, textarea:focus { border-color: var(--blau); box-shadow: 0 0 0 3px rgba(19, 24, 131, 0.12); }
.haken { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; font-size: 0.9rem; }
.haken input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--blau); flex: 0 0 auto; }
.haken-reihe { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; }
.haken-reihe .haken { margin-bottom: 6px; }
.zeile { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--blau); background: var(--blau); color: var(--creme);
  border-radius: 999px; padding: 12px 22px; cursor: pointer; text-decoration: none;
  font-size: 0.95rem; min-height: 46px;
}
.knopf:disabled { opacity: 0.5; cursor: default; }
.knopf.hell { background: transparent; color: var(--blau); }
.knopf.voll { width: 100%; }
.knopf.warnung { background: transparent; border-color: #b04400; color: #b04400; }
.knopf-klein {
  text-decoration: none; display: inline-block;
  border: 1px solid var(--linie); background: transparent; color: var(--blau);
  border-radius: 999px; padding: 5px 12px; font-size: 0.8rem; cursor: pointer; white-space: nowrap;
}
.knopf-klein.warnung { color: #b04400; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.meldung { border-radius: 12px; padding: 11px 14px; margin-bottom: 14px; font-size: 0.92rem; }
.meldung.fehler { background: #f7d9c8; color: #6e2700; }
.meldung.ok { background: #dcebd2; color: #1f4a14; }
.meldung.info { background: var(--beige); }

/* Hinweis unten (Toast) */
.toast {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px);
  background: var(--dunkel); color: var(--creme); padding: 11px 18px; border-radius: 999px;
  font-size: 0.9rem; opacity: 0; transition: opacity 0.25s, transform 0.25s; z-index: 50; pointer-events: none;
  max-width: calc(100% - 32px);
}
.toast.zeigen { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Aufklappbar (FAQ, Formulare) */
details.karte summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 10px; font-weight: 500; }
details.karte summary::-webkit-details-marker { display: none; }
details.karte summary::after { content: '+'; color: var(--blau); font-size: 1.3rem; line-height: 1; }
details.karte[open] summary::after { content: '−'; }
details.karte[open] summary { margin-bottom: 10px; }
.kategorie { margin: 22px 0 10px; }

/* ---- Anmeldeseiten ---- */
.anmelde-seite { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.anmelde-kopf { background: var(--blau); color: var(--creme); padding: 36px 20px 30px; text-align: center; }
.anmelde-kopf img { height: 26px; filter: brightness(0) invert(94%) sepia(8%) saturate(300%); }
.anmelde-kopf p { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 10px; opacity: 0.8; }
.anmelde-box { width: 100%; max-width: 420px; margin: 0 auto; padding: 28px 20px 40px; flex: 1; }
.anmelde-box h1 { font-size: 2.2rem; }
.anmelde-fuss { text-align: center; padding: 20px; font-size: 0.8rem; color: var(--grau); }
.anmelde-fuss a { color: var(--grau); }
/* VIP-Anmeldung: eigener Auftritt (Blau, Gold-Sonne), getrennt vom Team */
.vip-anmelden { background: var(--blau); }
.vip-anmelde-kopf { position: relative; overflow: hidden; color: var(--creme); text-align: center; padding: 40px 20px 34px; }
.vip-anmelde-kopf::before {
  content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%;
  background: var(--gold); right: -70px; top: -90px; opacity: 0.95;
}
.vip-anmelde-kopf > * { position: relative; }
.vip-anmelde-kopf img { height: 24px; filter: brightness(0) invert(94%) sepia(8%) saturate(300%); }
.vip-wort { font-family: var(--font-serif); font-weight: 300; font-size: 3rem; line-height: 1; color: var(--gold); margin-top: 14px; letter-spacing: 0.04em; }
.vip-unterzeile { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.8; margin-top: 8px; }
.vip-box { background: var(--creme); border-radius: 26px 26px 0 0; max-width: 520px; padding-left: 24px; padding-right: 24px; }
.vip-anmelden .anmelde-fuss { background: var(--creme); max-width: 520px; width: 100%; margin: 0 auto; }
.vip-knopf { background: var(--blau); }
.code-eingabe { letter-spacing: 0.4em; text-align: center; font-size: 1.4rem !important; }

/* ---- Dienstplan ---- */
.woche-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.woche-nav strong { font-weight: 500; text-align: center; }
.tag { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.tag.heute { border-color: var(--blau); }
.tag-kopf { display: flex; justify-content: space-between; padding: 9px 14px; background: var(--beige); font-size: 0.86rem; }
.tag.heute .tag-kopf { background: var(--blau); color: var(--creme); }
.schicht { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid #f0e8d6; font-size: 0.92rem; }
.schicht:first-of-type { border-top: 0; }
.schicht .punkt { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.schicht .zeit { font-variant-numeric: tabular-nums; min-width: 96px; }
.schicht .wer { flex: 1; }
.schicht .bereich-name { color: var(--grau); font-size: 0.8rem; }
.schicht.meine { background: #eef0fb; font-weight: 500; }
.schicht.abw { color: var(--grau); font-style: italic; }
.filter { display: flex; gap: 6px; margin-bottom: 12px; }

/* ---- Wochentabelle (Dienstplan) ---- */
.wt-rahmen {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  margin: 0 -2px 14px;
}
.wt { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; table-layout: fixed; font-size: 0.8rem; }
.wt th, .wt td { border-bottom: 1px solid #efe6d2; border-left: 1px solid #efe6d2; padding: 5px; vertical-align: top; }
.wt thead th { background: var(--beige); font-weight: 500; text-align: center; line-height: 1.25; padding: 8px 4px; position: sticky; top: 0; }
.wt thead th.heute { background: var(--blau); color: var(--creme); }
.wt td.heute { background: #f3f4fc; }
.wt .wt-name {
  position: sticky; left: 0; z-index: 2; background: var(--weiss); border-left: 0;
  width: 92px; text-align: left; font-weight: 500; line-height: 1.25; word-break: break-word;
}
.wt thead .wt-name { background: var(--beige); z-index: 3; }
.wt .wt-name small { display: block; color: var(--grau); font-weight: 500; font-size: 0.7rem; }
.wt .wt-name .punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
.wt tr.meine .wt-name { background: #eef0fb; color: var(--blau); }
.wt tr.meine td { background: #f6f7fd; }
.wt tbody tr:last-child th, .wt tbody tr:last-child td { border-bottom: 0; }
.wt-schicht {
  display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--blau);
  background: #f0f1fb; border-radius: 6px; padding: 4px 5px; margin-bottom: 4px;
  font-variant-numeric: tabular-nums; line-height: 1.25; font-size: 0.78rem; color: var(--dunkel);
}
button.wt-schicht { cursor: pointer; }
.wt-schicht small { display: block; color: var(--grau); font-size: 0.68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-abw { display: block; width: 100%; border: 0; text-align: left; background: repeating-linear-gradient(135deg, #f4ede0, #f4ede0 5px, #ece2cd 5px, #ece2cd 10px); border-radius: 6px; padding: 4px 5px; margin-bottom: 4px; color: var(--grau); font-size: 0.72rem; }
button.wt-abw { cursor: pointer; }
.wt-plus { display: block; width: 100%; border: 1px dashed var(--linie); background: transparent; border-radius: 6px; color: var(--blau); cursor: pointer; font-size: 1rem; line-height: 1.4; }
.wt-plus:hover { border-color: var(--blau); }
.wt-summe { color: var(--grau); font-size: 0.7rem; text-align: center; }
@media (max-width: 560px) {
  .wt { min-width: 500px; font-size: 0.74rem; }
  .wt .wt-name { width: 76px; }
  .wt th, .wt td { padding: 4px 3px; }
  .wt-schicht { font-size: 0.72rem; padding: 3px 4px; }
}
.wt-legende { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.78rem; color: var(--grau); margin-bottom: 8px; }

/* ---- Kacheln (Aktuell, Wünsche) ---- */
.kacheln { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kacheln.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 720px) { .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.kachel-info, .kachel-wunsch {
  position: relative; display: flex; flex-direction: column; text-align: left; overflow: hidden;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 12px; cursor: pointer; color: inherit; min-width: 0;
}
.kachel-info { aspect-ratio: 4 / 3; }
.kachel-wunsch { aspect-ratio: 1 / 1; padding: 10px; }
.kachel-info:hover, .kachel-wunsch:hover { border-color: var(--blau); }
.kachel-info.wichtig { border-color: var(--orange); box-shadow: inset 0 4px 0 var(--orange); }
.kachel-info h3 { font-size: 0.92rem; line-height: 1.25; margin-bottom: 4px; }
.ki-text { font-size: 0.8rem; color: var(--grau); line-height: 1.4; white-space: pre-line; overflow: hidden; flex: 1; min-height: 0;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.ki-fuss { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.72rem; color: var(--grau); }
.ki-mehr { color: var(--blau); font-weight: 500; white-space: nowrap; }
.kachel-info .marke, .kachel-wunsch .marke { font-size: 0.6rem; padding: 2px 7px; }
.kw-typ { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau); }
.kw-name { font-size: 0.92rem; font-weight: 500; line-height: 1.2; margin: 3px 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kw-datum { font-size: 0.78rem; font-variant-numeric: tabular-nums; line-height: 1.3; }
.kw-unten { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 4px; }
.kw-symbol { font-family: var(--font-serif); font-size: 1.6rem; line-height: 1; color: var(--blau); }
.kachel-wunsch.genehmigt { background: #f3f8ef; }
.kachel-wunsch.abgelehnt { background: #fbf1ec; }
.kachel-wunsch.offen { border-color: #e8cf6d; }
@media (max-width: 400px) {
  .kachel-wunsch { padding: 8px; border-radius: 12px; }
  .kw-name { font-size: 0.82rem; }
  .kw-datum { font-size: 0.7rem; }
  .kw-symbol { font-size: 1.25rem; }
}

/* ---- Reservierungsbuch ---- */
.bu-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bu-tagnav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bu-tagnav strong { font-weight: 500; min-width: 0; }
.bu-datumwahl { position: relative; display: inline-flex; align-items: center; }
.bu-datumwahl input { width: auto; padding: 6px 10px; font-size: 0.85rem; border-radius: 999px; }
.bu-info { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.85rem; color: var(--grau); margin: 4px 0 12px; }
.bu-info strong { color: var(--dunkel); font-weight: 500; }
.bu-umschalter { display: inline-flex; border: 1px solid var(--linie); border-radius: 999px; overflow: hidden; margin: 14px 0 12px; background: var(--weiss); }
.bu-umschalter button { border: 0; background: transparent; padding: 7px 16px; cursor: pointer; color: var(--blau); font-size: 0.86rem; }
.bu-umschalter button[aria-pressed="true"] { background: var(--blau); color: var(--creme); }
.bu-liste { display: grid; gap: 8px; }
@media (min-width: 1100px) { .bu-liste { grid-template-columns: 1fr 1fr; } }
.bu-karte {
  display: flex; align-items: stretch; gap: 8px; width: 100%;
  background: var(--weiss); border: 1px solid var(--linie); border-left: 4px solid var(--blau); border-radius: 14px;
  padding: 10px 12px; color: inherit;
}
.bu-karte__haupt {
  flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1.3fr) auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; text-align: left;
  background: transparent; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit;
}
.bu-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-pax { font-size: 0.82rem; color: var(--blau); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bu-infos { font-size: 0.8rem; color: var(--grau); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-infos:empty { display: none; }
.bu-karte__haupt .bu-tisch { font-size: 0.82rem; color: var(--grau); white-space: nowrap; }
.bu-karte__haupt .bu-tisch em { font-style: italic; }
@media (max-width: 520px) {
  /* Handy: Zeile 1 Uhrzeit · Name · PAX, Zeile 2 Infos · Tisch */
  .bu-karte__haupt { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 8px; }
  .bu-uhr { font-size: 1rem; }
  .bu-infos { grid-column: 1 / 3; grid-row: 2; }
  .bu-infos:empty { display: block; }
  .bu-karte__haupt .bu-tisch { grid-column: 3; grid-row: 2; }   /* nur die Karten-Zelle, nicht die Tischauswahl im Dialog (Fehler 23.10. behoben) */
  .bu-karte__haupt .marke { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
  .bu-karte { padding: 8px 8px 8px 10px; gap: 6px; }
  .bu-haken { padding-left: 6px; gap: 6px; }
}
.bu-karte:hover { border-color: var(--blau); }
/* Häkchen rechts: da / weg; erledigte Zeilen durchgestrichen */
/* Häkchen nebeneinander: grüner Haken (da), rotes Kreuz (weg), etwas größer */
.bu-haken { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: 0 0 auto; padding-left: 10px; border-left: 1px solid var(--linie); }
.bu-haken label { position: relative; width: 30px; height: 30px; cursor: pointer; }
.bu-haken input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bu-haken label span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--linie); background: var(--weiss); font-size: 1.1rem; font-weight: 700; line-height: 1; color: transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.bu-haken .bu-haken__da span { border-color: #2f8f4e; background: #dff3e4; }   /* blassgrün, leer (Kundenwunsch 23.10.) */
.bu-haken .bu-haken__weg span { border-color: #c62d1f; background: #fbe0dc; }   /* blassrot, leer */
.bu-haken .bu-haken__da input:checked + span { background: #2f8f4e; color: #fff; }
.bu-haken .bu-haken__weg input:checked + span { background: #c62d1f; color: #fff; }
/* Gegangen (grau): erscheint, sobald die Gäste da sind (25.10.2026) */
.bu-haken .bu-haken__gegangen span { border-color: #8a8a8a; background: #ececec; color: #666; }
.bu-haken .bu-haken__gegangen input:checked + span { background: #6f6f6f; color: #fff; }
.bu-haken input:disabled + span { cursor: default; }
.bu-abschnitt--da { color: #2f8f4e; }
.bu-karte.gegangen .bu-karte__haupt { opacity: 0.55; }
.marke.grau { background: #e6e6e6; color: #555; }
.bu-tabelle td, .bu-tabelle th { padding: 6px 8px; font-size: 0.86rem; white-space: nowrap; }
.bu-tabelle tr.ab td { opacity: 0.55; }
.tabelle-scroll { overflow-x: auto; }
.bu-balken-liste { display: grid; gap: 4px; max-width: 520px; }
.bu-balken { display: grid; grid-template-columns: 56px 1fr 32px; align-items: center; gap: 8px; font-size: 0.84rem; }
.bu-balken i { display: block; height: 14px; border-radius: 7px; background: var(--blau); opacity: 0.75; min-width: 3px; }
.bu-balken b { text-align: right; }
button.link { border: 0; background: none; color: var(--blau); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.bu-haken label:hover span { color: var(--grau); }
.bu-haken input:focus-visible + span { outline: 2px solid var(--blau); outline-offset: 2px; }
.bu-karte.erledigt .bu-karte__haupt { text-decoration: line-through; opacity: 0.6; }
.bu-karte.erledigt .bu-karte__haupt .marke { text-decoration: none; }
.bu-sonder { font-size: 0.95rem; margin: -6px 0 6px; color: var(--dunkel); }
.m-dialog.breit, .m-dialog:has(#bu-popup-liste) { width: min(720px, calc(100% - 24px)); }
.kal-tag:disabled { cursor: default; opacity: 0.4; }
.kal-tag:disabled:hover { transform: none; border-color: var(--linie); box-shadow: none; }
.bu-karte.angefragt { border-left-color: var(--orange); background: #fff6ee; }
.bu-karte.angekommen { border-left-color: var(--ok); }
.bu-karte.nicht_erschienen { border-left-color: #b04400; opacity: 0.75; }
.bu-karte.weg { opacity: 0.55; border-left-color: var(--linie); }
.bu-uhr { font-size: 1.1rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--blau); line-height: 1.2; }
.bu-uhr small { display: block; font-size: 0.68rem; color: var(--grau); font-weight: 500; }
.bu-mitte { min-width: 0; }
.bu-mitte strong { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-zeile { display: block; font-size: 0.82rem; color: var(--grau); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bu-rechts small { font-size: 0.68rem; color: var(--grau); }
.bu-details { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin-top: 12px; font-size: 0.92rem; }
.bu-details dt { color: var(--grau); font-size: 0.8rem; padding-top: 2px; }
.bu-details dd { white-space: pre-line; overflow-wrap: anywhere; }
.bu-mail-ok { color: var(--ok); font-weight: 600; }
.bu-mail-fehler { color: #b02020; font-weight: 600; }
.bu-tische { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.bu-tisch { display: flex; gap: 6px; align-items: center; background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; padding: 7px 8px; cursor: pointer; }
.bu-tisch input { width: 18px; height: 18px; accent-color: var(--blau); flex: 0 0 auto; }
.bu-tisch strong { display: block; font-weight: 500; font-size: 0.88rem; }
.bu-tisch small { display: block; font-size: 0.7rem; color: var(--grau); }
.bu-tisch.belegt { background: #fbf1ec; border-color: #e9c3ad; }
.bu-tisch:has(input:checked) { border-color: var(--blau); background: #eef0fb; }
/* Tischübersicht als Zeitleiste */
.tl-rahmen { overflow-x: auto; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); }
.tl { position: relative; min-width: 720px; padding: 4px 0 8px; }
.tl-zeile { display: grid; grid-template-columns: 84px 1fr; align-items: center; min-height: 40px; border-bottom: 1px solid #f1e9d8; }
.tl-zeile.aus { opacity: 0.45; }
.tl-name { padding: 0 8px; font-size: 0.85rem; font-weight: 500; line-height: 1.15; position: sticky; left: 0; background: var(--weiss); z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.tl-name small { font-size: 0.68rem; color: var(--grau); font-weight: 500; }
.tl-spur { position: relative; height: 34px; margin-right: 10px;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--h, 13) - 1px), #f1e9d8 calc(100% / var(--h, 13) - 1px), #f1e9d8 calc(100% / var(--h, 13))); }
.tl-kopf { min-height: 26px; }
.tl-stunden { height: 22px; background: none; }
.tl-stunden span { position: absolute; top: 2px; transform: translateX(-50%); font-size: 0.7rem; color: var(--grau); }
.tl-stunden span:first-child { transform: none; }
.tl-stunden span:last-child { transform: translateX(-100%); }
.tl-bereich { position: sticky; left: 0; width: max-content; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grau); padding: 10px 8px 4px; }
.tl-block {
  position: absolute; top: 3px; bottom: 3px; border: 0; border-radius: 8px; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: #dfe2f7; color: var(--blau); font-size: 0.74rem; text-align: left; cursor: pointer; border-left: 3px solid var(--blau);
}
.tl-block.angefragt { background: #fdf0c2; color: #6b5200; border-left-color: #e8b900; }
.tl-block.angekommen { background: #dcebd2; color: var(--ok); border-left-color: var(--ok); }
.tl-jetzt { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--orange); z-index: 3; pointer-events: none; }
/* Tischplan bearbeiten */
.tp-kopf, .tp-zeile { display: grid; grid-template-columns: 1fr 70px 110px auto 34px; gap: 6px; align-items: center; }
.tp-kopf { font-size: 0.72rem; color: var(--grau); margin: 12px 0 4px; }
.tp-zeile { margin-bottom: 6px; }
.tp-zeile input[type="text"], .tp-zeile input[type="number"], .tp-zeile select { padding: 8px 10px; font-size: 16px; }
.tp-aktiv { display: flex; gap: 4px; align-items: center; font-size: 0.78rem; color: var(--grau); }
@media (max-width: 520px) {
  .tp-kopf { display: none; }
  .tp-zeile { grid-template-columns: 1fr 64px 34px; padding: 8px 0; border-bottom: 1px solid #efe6d2; }
  .tp-zeile [data-feld="name"] { grid-column: 1; grid-row: 1; }
  .tp-zeile [data-feld="plaetze"] { grid-column: 2; grid-row: 1; }
  .tp-zeile [data-aktion="tp-weg"] { grid-column: 3; grid-row: 1; }
  .tp-zeile [data-feld="bereich"] { grid-column: 1; grid-row: 2; }
  .tp-zeile .tp-aktiv { grid-column: 2 / 4; grid-row: 2; }
}
.tp-aktiv input { accent-color: var(--blau); }

/* ---- Einkaufsliste ---- */
.ek-karte { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; }
.ek-karte.dringend { border-left: 4px solid #b04400; }
.ek-karte.erledigt { opacity: 0.6; }
.ek-karte.erledigt .ek-mitte strong { text-decoration: line-through; }
.ek-haken { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--blau); background: var(--weiss); color: var(--ok); font-size: 1rem; cursor: pointer; margin-top: 2px; }
.ek-karte.erledigt .ek-haken { background: #dcebd2; border-color: var(--ok); }
.ek-mitte { min-width: 0; }
.ek-mitte strong { display: block; font-weight: 500; }
.ek-menge { color: var(--grau); font-weight: 500; }
.ek-zeile { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--grau); }
.ek-zeile .marke { margin-right: 2px; }
.ek-weg { border: 0; background: transparent; color: var(--grau); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 2px 6px; }
.ek-weg:hover { color: #b04400; }
@media (max-width: 560px) { #ek-form .zeile { grid-template-columns: 1fr !important; } }

/* ---- Dialog ---- */
.m-dialog {
  margin: auto; /* der globale Reset nimmt <dialog> sonst die Zentrierung */
  border: 0; border-radius: 20px; padding: 0; width: min(520px, calc(100% - 24px)); max-height: calc(100% - 40px);
  background: var(--creme); color: var(--dunkel); box-shadow: 0 30px 80px rgba(16, 16, 16, 0.35);
}
.m-dialog::backdrop { background: rgba(16, 16, 16, 0.45); }
.m-dialog .d-innen { padding: 22px 20px 20px; }
.m-dialog .d-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.m-dialog h2 { margin: 0; font-size: 1.7rem; }
.m-dialog .d-zu { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; color: var(--blau); cursor: pointer; padding: 2px 6px; }
.m-dialog .d-zurueck { border: 0; background: transparent; color: var(--blau); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 6px 8px 2px 2px; flex: 0 0 auto; }   /* schlichtes Dreieck wie das X, ohne Knopf (Kundenwunsch 25.10.) */
.m-dialog .d-zurueck:hover { color: var(--orange); }
.m-dialog .d-kopf h2 { flex: 1 1 auto; }

/* ---- VIP ---- */
.vip-karte {
  position: relative; overflow: hidden; border-radius: 20px; padding: 22px;
  background: var(--blau); color: var(--creme); aspect-ratio: 85.6 / 54; max-width: 420px;
  display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 26px;
  box-shadow: 0 18px 40px rgba(19, 24, 131, 0.25);
}
.vip-karte::after {
  content: ''; position: absolute; right: -40px; top: -40px; width: 170px; height: 170px; border-radius: 50%;
  background: var(--gold); opacity: 0.9;
}
.vip-karte img { height: 22px; width: auto; align-self: flex-start; filter: brightness(0) invert(94%) sepia(8%) saturate(300%); position: relative; z-index: 1; }
/* Karte: Schriftzug CASA CLUB CARD direkt unter dem Logo, kein grosser Titel mehr (Kundenwunsch 24.10.2026) */
.vip-karte .vip-kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; z-index: 1; }
.vip-karte .vip-titel { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.32em; line-height: 1; position: relative; z-index: 1; opacity: 0.95; }
.vip-karte .vip-unten { display: flex; justify-content: space-between; align-items: flex-end; font-size: 0.85rem; position: relative; z-index: 1; }
.vip-karte .vip-nummer { letter-spacing: 0.14em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Holo-Effekt der VIP-Karte (vip-karte.js) ----
   Karte neigt sich in 3D, darüber eine schimmernde Folie in Gold, Orange,
   Creme und Blau, die am Zeiger hängt, plus Glanzpunkt; darunter ein
   Bodenschatten, der gegen die Neigung wandert. */
.holo { position: relative; max-width: 420px; margin-bottom: 36px; perspective: 1100px; }
.holo__schatten {
  position: absolute; left: 8%; right: 8%; bottom: -26px; height: 44px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(19, 24, 131, 0.38), transparent 70%); will-change: transform;
}
.holo .vip-karte { margin-bottom: 0; transform-style: preserve-3d; will-change: transform; touch-action: none; outline: none; cursor: grab; }
.holo .vip-karte:focus-visible { box-shadow: 0 0 0 3px var(--creme), 0 0 0 6px var(--blau); }
.holo .vip-karte::after { z-index: 0; }
.holo__inhalt { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; height: 100%; transform: translateZ(1px); }
.holo__folie {
  /* Folie wie beim Original-Baustein (feine Rake-Struktur + konischer
     Farbverlauf am Zeiger), in den Farben von Metallic-Lack: sattes
     Blau, Hellblau, Silber und Weiß. */
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 1px, transparent 1px, transparent 5px),
    conic-gradient(from 210deg at calc(var(--holo-px, 0.5) * 100%) calc(var(--holo-py, 0.5) * 100%),
      #0f2fb4 0deg, #4fa0ff 70deg, #eaf4ff 120deg, #2b7bff 170deg, #081d80 230deg, #a9d0ff 290deg, #0f2fb4 360deg);
  mix-blend-mode: screen; opacity: 0.3;
  filter: saturate(1.05); transform: translateZ(0);
}
.holo__glanz {
  /* Lackreflex: heller silbrig-weißer Kern mit weichem Hof */
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(60px circle at calc(var(--holo-px, 0.5) * 100%) calc(var(--holo-py, 0.5) * 100%), rgba(255,255,255,0.95), rgba(255,255,255,0) 100%),
    radial-gradient(220px circle at calc(var(--holo-px, 0.5) * 100%) calc(var(--holo-py, 0.5) * 100%), rgba(200,220,255,0.55), transparent 68%);
  mix-blend-mode: screen; opacity: var(--holo-glanz-o, 0.35); transform: translateZ(0);
}
.vip-seite .vip-karte {
  background:
    radial-gradient(120% 90% at 20% 0%, #1b2498 0%, transparent 55%),
    linear-gradient(135deg, var(--blau) 0%, #0e1266 55%, #080b48 100%);
}
@media (forced-colors: active) { .holo__folie, .holo__glanz, .holo__schatten { display: none; } }

/* ---- Admin ---- */
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabelle th { text-align: left; font-weight: 500; color: var(--grau); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 6px; border-bottom: 1px solid var(--linie); }
.tabelle td { padding: 10px 6px; border-bottom: 1px solid #efe6d2; vertical-align: top; }
.kachel-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 22px; }
.kachel { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px; cursor: pointer; text-align: left; }
.kachel strong { display: block; font-size: 1.9rem; font-weight: 500; color: var(--blau); line-height: 1.15; font-variant-numeric: tabular-nums; }
.kachel span { font-size: 0.82rem; color: var(--grau); }
.kachel.hinweis strong { color: var(--orange); }
.link-box { display: flex; gap: 8px; margin-top: 10px; }
.link-box input { font-size: 0.8rem; padding: 9px 10px; }
.qr-box { background: var(--weiss); display: inline-block; padding: 10px; border-radius: 12px; border: 1px solid var(--linie); }
.qr-box svg { width: 190px; height: 190px; display: block; }
.geheim { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.08em; background: var(--beige); padding: 6px 10px; border-radius: 8px; display: inline-block; word-break: break-all; }
.karten-liste { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.karten-liste label { display: inline-flex; gap: 6px; align-items: center; background: var(--weiss); border: 1px solid var(--linie); border-radius: 999px; padding: 4px 10px; font-size: 0.8rem; font-family: ui-monospace, Consolas, monospace; }

/* Ab Tablet quer / Desktop: Reiter als feste Leiste links an der Seite,
   auf dem Handy bleiben sie oben als wischbare Reihe */
@media (min-width: 960px) {
  .kopf-zeile { max-width: none; }
  main { margin-left: 232px; max-width: 1160px; padding: 32px 44px 64px; }
}
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---- Reservierungen: Monatskalender mit Kreisen (seit 20.10.2026) ---- */
.kal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 4px; justify-items: center; margin: 6px 0 10px;
  background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: 12px 10px 14px; box-shadow: 0 6px 18px rgba(19,24,131,0.06); }   /* weiße Karte wie im Vorbild (Kundenwunsch 20.10.) */
.kal-wt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau); padding: 4px 0 2px; }
.kal-tag {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--linie); background: #fff;
  color: var(--dunkel); font-size: 0.95rem; font-variant-numeric: tabular-nums; cursor: pointer; position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kal-tag:hover { transform: scale(1.08); border-color: var(--blau); }
.kal-tag.vorbei { opacity: 0.55; background: #fff; border-color: var(--linie); color: var(--grau); box-shadow: none; animation: none; }   /* Vergangenheit ohne Farben und Pochen (Kundenwunsch 23.10.) */
.kal-tag.ruhetag { border-style: dashed; color: var(--grau); }
.kal-tag.s1 { background: #cfe9d5; border-color: #2f8f4e; color: #114d26; }
.kal-tag.s2 { background: #ffd9a8; border-color: #e07a00; color: #5a3000; }
.kal-tag.s3 { background: #f7b8ad; border-color: #c62d1f; color: #5e0f08; }
.kal-tag.heute { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--blau); font-weight: 600; }
.kal-tag.pocht { animation: kal-pochen 1.6s ease-in-out infinite; border-color: var(--orange); border-width: 2.5px; }   /* kräftiges Orange statt Gelb (Kundenwunsch 23.10.) */
@keyframes kal-pochen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 91, 11, 0.95); }
  50% { box-shadow: 0 0 0 8px rgba(234, 91, 11, 0); }
}
.kal-tag.pocht.heute { animation: kal-pochen-heute 1.6s ease-in-out infinite; }
@keyframes kal-pochen-heute {
  0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--blau), 0 0 0 4.5px rgba(234, 91, 11, 0.95); }
  50% { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--blau), 0 0 0 11px rgba(234, 91, 11, 0); }
}
/* Legende als Fußleiste */
.kal-fuss { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 0.74rem; color: var(--grau); margin: 0 0 10px; padding: 10px 12px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; }
.kal-fuss > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.kal-zeichen { font-style: normal; font-weight: 700; font-size: 0.8rem; line-height: 1; }
.kal-zeichen.special { color: var(--orange); }
.kal-zeichen.geschlossen { color: var(--grau); }
.kal-zahl { display: block; }
.kal-info, .kal-marke { display: none; }
.kal-tag.zu { background: #e9e6df; color: var(--grau); text-decoration: line-through; }
.kal-tag.zu .kal-info, .kal-tag.zu .kal-marke { text-decoration: none; }
.kal-tagkopf__marke { display: inline-flex; gap: 4px; align-items: center; font-size: 0.82rem; color: var(--dunkel); margin-top: 2px; }
/* Tablet und PC: Kacheln statt Kreise, mit Platz für Infos */
@media (min-width: 700px) {
  .kal { justify-items: stretch; gap: 6px; }
  .kal-tag { width: auto; min-height: 72px; border-radius: 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 6px 8px; text-align: left; gap: 2px; }
  .kal-tag:hover { transform: none; box-shadow: 0 0 0 2px var(--blau) inset; }
  .kal-zahl { font-weight: 600; font-size: 0.95rem; }
  .kal-info { display: block; font-size: 0.72rem; color: inherit; opacity: 0.85; line-height: 1.25; }
  .kal-info em { font-style: normal; color: var(--orange); font-weight: 600; }
  .kal-marke { display: flex; align-items: center; gap: 4px; max-width: 100%; font-size: 0.72rem; line-height: 1.2; }
  .kal-marke__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kal-tag.heute { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blau); }
  .kal-tag.pocht { animation: kal-pochen 1.6s ease-in-out infinite; }
  .kal-tag.pocht.heute { animation: kal-pochen-heute 1.6s ease-in-out infinite; }
}
/* Handy: kleiner Punkt oben rechts für markierte Tage */
@media (max-width: 699px) {
  .kal-tag .kal-marke { display: block; position: absolute; top: -3px; right: -3px; }
  .kal-tag .kal-marke__text { display: none; }
  .kal-tag .kal-marke .kal-zeichen { font-size: 0.7rem; }
}
.kal-punkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--linie); background: var(--weiss); vertical-align: middle; }
.kal-punkt.heute { box-shadow: 0 0 0 1.5px var(--creme), 0 0 0 3px var(--blau); }
.kal-punkt.s1 { background: #cfe9d5; border-color: #2f8f4e; }
.kal-punkt.s2 { background: #ffd9a8; border-color: #e07a00; }
.kal-punkt.s3 { background: #f7b8ad; border-color: #c62d1f; }
.kal-punkt.pocht { animation: kal-pochen 1.6s ease-in-out infinite; border-color: var(--orange); }
.kal-punkt.ruhetag { border-style: dashed; }
.kal-tagkopf { display: flex; align-items: center; gap: 14px; margin: 4px 0 8px; }
.kal-tagkopf__zahl { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--linie); background: var(--weiss); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 500; color: var(--blau); flex: 0 0 auto; }
.kal-tagkopf__zahl.heute { box-shadow: 0 0 0 2px var(--creme), 0 0 0 4.5px var(--blau); }
.kal-tagkopf__text { display: flex; flex-direction: column; line-height: 1.25; }
.kal-tagkopf__text strong { font-weight: 500; font-size: 1.05rem; }
.kal-tagkopf__text span { color: var(--grau); font-size: 0.9rem; }
.bu-abschnitt { font-size: 0.9rem; margin: 14px 0 8px; }
.pocht-text { color: var(--orange); }
@media (prefers-reduced-motion: reduce) { .kal-tag.pocht, .kal-tag.pocht.heute, .kal-punkt.pocht { animation: none; outline: 2px solid var(--orange); outline-offset: 2px; } }
@media (max-width: 420px) { .kal-tag { width: 36px; height: 36px; font-size: 0.88rem; } }

/* ---- Sitzplan (sitzplan.js, seit 21.10.2026) ---- */
.sp-swiper { width: 100%; }
.sp-swiper .swiper-pagination { position: static; margin-top: 6px; }
.sp-swiper .swiper-pagination-bullet { background: var(--blau); opacity: 0.3; }
.sp-swiper .swiper-pagination-bullet-active { opacity: 1; }
.sp-titel { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grau); margin: 0 0 4px; }
.sp-plan { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--linie); border-radius: 14px; }
.sp-plan.zu { opacity: 0.55; }
.sp-raum { fill: #fbd08a; stroke: #101010; stroke-width: 2.5; stroke-linejoin: round; }
.sp-wand { stroke: #101010; stroke-width: 3; stroke-linecap: round; }
.sp-theke { fill: #101010; }
.sp-theke-text { fill: #555; font-size: 20px; font-weight: 700; letter-spacing: 4px; }
.sp-lounge { fill: #ffe39a; }
.sp-sofa { fill: #777; }
.sp-bank { fill: #7a1a12; }
.sp-bank-linie { stroke: #7a1a12; stroke-width: 18; stroke-linecap: butt; }
/* Elemente (seit 24.10.2026): alles gedrehte Rechtecke */
.sp-wand-el { fill: #101010; }
.sp-exit-el { fill: #19d61e; }
.sp-tuer-el { fill: #5a4bb7; }
.sp-deko-rund { fill: #5a5a5a; }
.pe-svg .sp-el, .pe-svg .sp-el-text { cursor: move; }
.pe-svg .sp-el.gewaehlt rect { stroke: #131883; stroke-width: 2; stroke-dasharray: 4 3; }
/* Griffe am gewählten Teil: Ecken drehen, Seiten ziehen die Größe (24.10.2026) */
.pe-griff { fill: #fff; stroke: var(--blau); stroke-width: 2; }
.pe-griff-dreh { cursor: grab; }
.pe-griff-groesse { cursor: ew-resize; fill: var(--gold); }
.pe-griff:hover { fill: var(--blau); }
.pe-band { fill: rgba(19, 24, 131, 0.08); stroke: var(--blau); stroke-width: 1.5; stroke-dasharray: 5 4; pointer-events: none; }
.pe-svg .sp-stuhl.gewaehlt { fill: var(--blau); stroke: #cfe0ff; stroke-width: 2; }
.sp-stuhl { fill: #7d7d7d; }
.sp-tisch { cursor: pointer; }
.sp-tisch rect, .sp-tisch circle, .sp-tisch rect, .sp-tisch ellipse { fill: #d6d6d6; stroke: #9a9a9a; stroke-width: 1; transition: fill 0.15s, stroke 0.15s; }
.sp-tisch:hover rect, .sp-tisch:hover circle, .sp-tisch:focus-visible rect, .sp-tisch:focus-visible circle { stroke: var(--blau); stroke-width: 2; }
.sp-tisch.belegt rect, .sp-tisch.belegt circle, .sp-tisch.belegt rect, .sp-tisch.belegt ellipse { fill: #ffd9a8; stroke: #e07a00; stroke-width: 1.5; }
.sp-tisch.gewaehlt rect, .sp-tisch.gewaehlt circle, .sp-tisch.gewaehlt rect, .sp-tisch.gewaehlt ellipse { fill: #cfe0ff; stroke: var(--blau); stroke-width: 3; }
.sp-tisch.fehlt { cursor: not-allowed; }
.sp-tisch.fehlt rect, .sp-tisch.fehlt circle, .sp-tisch.fehlt rect, .sp-tisch.fehlt ellipse { fill: #eee; stroke-dasharray: 3 3; }
.sp-nr { font-size: 11px; font-weight: 700; fill: #333; pointer-events: none; font-family: inherit; }
.sp-zeit { font-size: 9px; fill: #b04a00; font-weight: 700; pointer-events: none; }
.sp-exit { stroke: #19d61e; stroke-width: 5; }
.sp-exit-text { fill: #19d61e; font-size: 16px; font-weight: 700; letter-spacing: 2px; }
.sp-tuer { stroke: #5a4bb7; stroke-width: 5; }
.sp-tuer-text { fill: #5a4bb7; font-size: 18px; font-weight: 700; letter-spacing: 2px; }
.sp-zu { font-size: 16px; fill: #b04400; font-weight: 700; }
.sp-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; background: #eef0fb; border: 1px solid var(--blau); border-radius: 12px; padding: 8px 12px; margin: 0 0 10px; font-size: 0.9rem; }
.sp-hinweis { margin: 6px 0 0; }

/* Warteliste, Walk-in, Gastprofil */
.bu-karte.wl { border-left-color: #2f8f4e; }
.bu-karte.wl.gerufen { border-left-color: var(--orange); }
.bu-karte.wl.weg { opacity: 0.55; }
.bu-gast { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linie); }
.bu-hund { align-items: end; margin-top: 6px; }
.bu-hund .haken { align-self: center; }
a.knopf-klein { text-decoration: none; display: inline-block; }

/* ---- Bar Book: Tabellen (Kundenwunsch: tabellarisch für die Arbeit an der Theke) ---- */
.bb-karte summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.bb-name { font-weight: 600; font-size: 1.02rem; letter-spacing: 0.02em; text-transform: uppercase; }
.bb-kopfinfo { font-size: 0.8rem; color: var(--grau); }
.bb-kopfinfo b { color: var(--blau); font-weight: 600; margin-right: 3px; }
.bb-innen { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px 18px; margin-top: 8px; align-items: start; }   /* Tabelle oben, Zeilen dicht (Kundenwunsch 21.10.) */
.bb-tabelle { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.bb-tabelle { height: auto; align-self: start; }
.bb-tabelle td { padding: 3px 8px; border-bottom: 1px solid var(--linie); vertical-align: top; line-height: 1.35; }
.bb-tabelle tr:last-child td { border-bottom: 0; }
.bb-menge { width: 64px; font-weight: 600; color: var(--blau); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.bb-seite p { margin: 0 0 6px; }
.bb-seite b { color: var(--blau); }
.bb-hinweis { color: #b04400; }
.bb-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 18px; padding: 10px 12px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; font-size: 0.74rem; color: var(--grau); }
.bb-legende b { color: var(--blau); margin-right: 3px; }
.filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.filter .knopf-klein[aria-pressed="true"] { background: var(--blau); color: var(--creme); border-color: var(--blau); }
@media (max-width: 560px) { .bb-innen { grid-template-columns: 1fr; } }

/* Bild beim Rezept: wie der Drink am Ende aussehen soll */
.bb-bild { display: block; width: 100%; max-width: 220px; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; border: 1px solid var(--linie); background: var(--weiss); margin: 0 0 10px; padding: 0; cursor: pointer; }
.bb-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-bild--leer { display: flex; align-items: center; justify-content: center; border: 2px dashed rgba(19,24,131,0.3); background: var(--creme); cursor: default; }
.bb-bild--leer span { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grau); }
.bb-bild-gross { width: 100%; height: auto; border-radius: 12px; display: block; }

/* Gäste-Tags */
.bu-tags { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 5px; flex: 0 0 auto; }
.bu-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; line-height: 1; background: #e9e6df; color: #444; }
.bu-tags.gross { margin: 4px 0 8px; gap: 6px; flex-wrap: wrap; display: flex; }
.bu-tags.gross .bu-tag { height: 24px; padding: 0 9px; font-size: 0.76rem; }
.bu-tag-stammgast { background: #cfe9d5; color: #114d26; }
.bu-tag-vip { background: #fdf0c2; color: #6b4f00; }
.bu-tag-nachbar { background: #e4dcf5; color: #3e2a80; }
.bu-tag-problem { background: #f7d9c8; color: #8a3200; }
.bu-tag-clique { background: #f9dde6; color: #8a2a4a; }
.bu-tag-friends { background: #d7f0f4; color: #0b5563; }
.haken.bu-tag-problem span { color: #8a3200; }
.kal-torte { font-size: 0.75em; margin-left: 2px; }
.kal-tag.geburtstag { box-shadow: inset 0 0 0 2px #e07a00; }
.kal-tag.geburtstag.heute { box-shadow: inset 0 0 0 2px #e07a00, 0 0 0 2px #fff, 0 0 0 4.5px var(--blau); }
/* Sitzplan: Tag-Zeichen am Tisch, Ziehen */
.sp-tags { font-size: 10px; font-weight: 700; fill: #8a3200; pointer-events: none; }
.sp-tisch.belegt { cursor: grab; }
.sp-plan.sp-ziehen { cursor: grabbing; }
.sp-plan.sp-ziehen .sp-tisch { cursor: grabbing; }
.sp-tisch.ziel rect, .sp-tisch.ziel circle, .sp-tisch.ziel rect, .sp-tisch.ziel ellipse { stroke: #2f8f4e; stroke-width: 3; fill: #cfe9d5; }
.sp-geist { position: fixed; z-index: 1000; pointer-events: none; background: var(--blau); color: var(--creme); padding: 4px 10px; border-radius: 999px; font-size: 0.82rem; box-shadow: 0 6px 18px rgba(0,0,0,0.3); }
.sp-plan { touch-action: pan-y; }
.sp-tisch.belegt { touch-action: none; }

/* Anfragen: Schnellknöpfe „Beantworten“ / „Bereits bestätigt“ (22.10.2026) */
.bu-schnell { flex: 1 0 100%; display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 0 2px; }
.bu-nachrichten { margin-top: 10px; }
.bu-nachricht { background: var(--creme); border-radius: 10px; padding: 8px 10px; margin-top: 6px; }
.bu-nachricht small { color: var(--grau); }
.bu-nachricht p { margin: 2px 0 0; white-space: pre-line; }
.bu-haken input:disabled + span { opacity: 0.55; }
.nur-lesen { background: #fff7df; border: 1px solid #e8d79a; color: #5b4a00; border-radius: 12px; padding: 8px 12px; font-size: 0.85rem; margin: 0 0 12px; }
.bu-karte.angefragt { flex-wrap: wrap; }

/* Einkaufslisten je Bereich, Artikel und Bestand (22.10.2026) */
.ek-zaehler { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 0.72rem; line-height: 18px; text-align: center; margin-left: 4px; }
.filter .knopf-klein[aria-pressed="true"] .ek-zaehler { background: var(--creme); color: var(--blau); }
.ek-art { display: grid; grid-template-columns: minmax(0, 1fr) 118px 56px 60px auto; gap: 8px; align-items: center; background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 8px 10px; margin-bottom: 6px; }
.ek-art--kopf { background: transparent; border: 0; padding: 0 10px; margin-bottom: 2px; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grau); }
.ek-art.knapp { border-left: 4px solid #b04400; background: #fff4ef; }
.ek-art__name { min-width: 0; }
.ek-art__name strong { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-art__name small { display: block; color: var(--grau); font-size: 0.74rem; }
.ek-art__name .ek-art__mb { display: none; }
.ek-art__best { display: flex; align-items: center; gap: 4px; margin: 0; }
.ek-art__best input { width: 68px; padding: 6px 6px; border: 1px solid var(--linie); border-radius: 8px; font: inherit; }
.ek-art__best em { font-style: normal; font-size: 0.74rem; color: var(--grau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44px; }
.ek-art__min, .ek-art__bm { text-align: center; font-size: 0.9rem; }
.ek-art__kn { display: flex; gap: 2px; align-items: center; }
@media (max-width: 560px) {
  .ek-art { grid-template-columns: minmax(0, 1fr) 104px auto; }
  .ek-art__min, .ek-art__bm, .ek-art--kopf span:nth-child(3), .ek-art--kopf span:nth-child(4) { display: none; }
  .ek-art__name .ek-art__mb { display: block; }
}
/* Service-Guide */
.guide-punkte { margin: 8px 0 0; padding-left: 18px; }
.guide-punkte li { margin: 0 0 6px; line-height: 1.45; }
.guide-beispiel { background: var(--creme); border-radius: 10px; padding: 8px 10px; margin-top: 6px; }
.guide-beispiel b { display: block; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--blau); margin-bottom: 2px; }
.guide-beispiel p { margin: 0; line-height: 1.45; }

/* Feste Tischkombinationen (22.10.2026) */
.kb-zeile { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.bu-kombi.belegt { opacity: 0.5; text-decoration: line-through; }
.bu-kombi small { color: var(--grau); margin-left: 2px; }

/* Betrieb: Checklisten, HACCP, Stempeln, Aufgaben (22.10.2026) */
.bt-punkt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--linie); cursor: pointer; }
.bt-punkt:first-of-type { border-top: 0; }
.bt-punkt input { width: 22px; height: 22px; accent-color: var(--ok); flex: 0 0 auto; margin-top: 1px; }
.bt-punkt > span { flex: 1; min-width: 0; }
.bt-punkt.erledigt > span { text-decoration: line-through; opacity: 0.7; }
.bt-punkt .text { display: block; text-decoration: none; opacity: 1; margin-top: 2px; white-space: pre-line; }
.bt-wer { display: block; font-size: 0.74rem; color: var(--grau); text-decoration: none; margin-top: 2px; }
.bt-wer.fehlt { color: #b04400; }
.bt-geraet { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linie); }
.bt-geraet:first-child { border-top: 0; }
.bt-geraet small { display: block; font-size: 0.74rem; color: var(--grau); }
.bt-temp { display: flex; gap: 6px; align-items: center; }
.bt-temp input { width: 76px; padding: 7px 8px; border: 1px solid var(--linie); border-radius: 8px; font: inherit; }
.bt-aufgabe.wichtig { border-left: 4px solid var(--orange); }
.bt-aufgabe.erledigt { opacity: 0.65; }
.bt-aufgabe .bt-punkt { border-top: 0; padding: 0; }
.bt-admin-liste summary { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bt-punkt-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto auto 30px; gap: 6px; align-items: center; margin-bottom: 6px; }
.bt-punkt-zeile input, .bt-punkt-zeile select { padding: 8px 10px; font-size: 16px; }
.bt-freigabe { background: var(--creme); border-radius: 12px; padding: 10px 12px; margin-top: 12px; }
.bt-freigabe .knoepfe { gap: 14px; align-items: center; }
.bt-geraet-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto 72px auto 30px; gap: 6px; align-items: center; margin-bottom: 6px; }
.bt-geraet-zeile input { padding: 8px 10px; font-size: 16px; }
.tabelle-scroll { overflow-x: auto; }
.bt-tabelle { border-collapse: collapse; width: 100%; font-size: 0.86rem; background: var(--weiss); }
.bt-tabelle th, .bt-tabelle td { border: 1px solid var(--linie); padding: 6px 8px; text-align: left; vertical-align: top; }
.bt-tabelle th { background: var(--creme); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; }
.bt-aus { color: #b00000; font-weight: 700; }
@media (max-width: 560px) {
  .bt-punkt-zeile { grid-template-columns: minmax(0, 1fr) 30px; }
  .bt-punkt-zeile select { grid-column: 1 / span 2; }
  .bt-geraet-zeile { grid-template-columns: minmax(0, 1fr) 30px; }
  .bt-geraet-zeile input[type="number"], .bt-geraet-zeile span { grid-column: auto; }
}

/* Stühle als Sitzplätze (22.10.2026) */
.sp-stuhl.waehlbar { cursor: pointer; }
.sp-stuhl.waehlbar:hover { fill: #5a5a5a; }
.sp-stuhl.belegt-tisch { fill: #e9b98a; }
.sp-stuhl.belegt { fill: #e07a00; }
.sp-stuhl.gewaehlt { fill: var(--blau); stroke: #cfe0ff; stroke-width: 2; }
.bu-plan-knopf { display: inline-flex; align-items: center; gap: 6px; }
/* Dashboard-Layout ab Tablet: Reiter links als Seitenleiste, Inhalt rechts (Kundenwunsch 22.10.2026) */
@media (min-width: 760px) and (min-height: 500px) {
  .reiter { position: fixed; left: 0; top: var(--kopf-h, 52px); bottom: 0; width: 232px; grid-template-columns: minmax(0, 1fr); align-content: start; overflow-y: auto; overflow-x: hidden; border-right: 1px solid var(--linie); border-bottom: 0; padding: 14px 12px; gap: 6px; z-index: 15; }
  .reiter button { min-height: 46px; font-size: 0.84rem; border-radius: 12px; padding: 6px 10px; }   /* Tablet/Desktop: eine Kachel je Reihe untereinander (Kundenwunsch 24.10.) */
  main { margin-left: 232px; max-width: none; padding: 22px 32px 64px; }
  .kopf-zeile { max-width: none; padding: 0 16px; }
}
/* Tablet (bis 999px): Seitenleiste schmaler (Kundenwunsch 24.10.) */
@media (min-width: 760px) and (max-width: 999px) and (min-height: 500px) { .reiter { width: 176px; padding: 12px 8px; } .reiter button { min-height: 44px; font-size: 0.88rem; padding: 5px 6px; } main { margin-left: 176px; padding: 20px 20px 64px; } }
@media (min-width: 1400px) { main { max-width: 1180px; margin-left: calc(232px + (100vw - 232px - 1180px) / 2); } }

/* Sitzplan-Popup breit: links Infos, Mitte Plan, rechts Knöpfe (22.10.2026) */
.m-dialog.breit-plan, .m-dialog.breit-plan:has(#bu-popup-liste) { width: min(1500px, calc(100% - 16px)); }
.bu-popup-knoepfe { margin: 0; }
@media (min-width: 900px) {
  /* Sitzplan-Popup seit 24.10.2026: Knöpfe oben und unten, Plan volle Breite */
  .bu-popup-oben { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
  .bu-popup-oben p { margin: 0; }
  .bu-popup-oben .bu-umschalter { margin: 0 !important; }
  .bu-popup-oben .knoepfe { margin: 0; }
}
/* Plan-Editor */
/* Plan-Editor seit 24.10.2026: Leiste oben, Plan volle Breite, Grundriss unten */
.pe-oben { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 8px; }
/* feste Höhe, einzeilig: sonst springt der Dialog beim Auswählen und das Ziehen greift daneben (24.10.2026) */
.pe-seite { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 14px; height: 50px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; margin-bottom: 8px; padding: 0 10px; background: var(--creme); border-radius: 10px; }
.pe-seite .vorzeile { margin: 0; white-space: nowrap; }
.pe-seite .knoepfe { flex-wrap: nowrap; }
.pe-seite p { margin: 0; }
.pe-seite .feld { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; }
.pe-seite .feld span { font-size: 0.78rem; }
.pe-seite { user-select: none; -webkit-user-select: none; }
.pe-seite .feld input[type=range] { width: 120px; touch-action: none; margin: 0 4px; cursor: pointer; accent-color: var(--blau); }
/* Skala-Linie weg (Kundenwunsch 25.10.2026): Wert nur noch über Pfeile hoch/runter, −/+ und Eintippen; der Regler bleibt unsichtbar als Träger des Werts */
.pe-seite .feld input[type=range] { display: none; }
.pe-zahl__feld { width: 66px; height: 34px; font-size: 0.95rem; }
.pe-zahl__feld::-webkit-inner-spin-button { opacity: 1; height: 30px; cursor: pointer; }
.pe-seite .feld input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; }
.pe-seite .feld input[type=range]::-moz-range-thumb { width: 26px; height: 26px; }
.pe-zahl { display: inline-flex; align-items: center; gap: 2px; }
.pe-zahl__feld { width: 56px; height: 30px; padding: 2px 4px; border: 1px solid var(--linie); border-radius: 8px; font: inherit; font-size: 0.85rem; text-align: center; font-variant-numeric: tabular-nums; background: #fff; }
.pe-zahl b { font-weight: 600; font-size: 0.8rem; }
.pe-schritt { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--blau); background: #fff; color: var(--blau); font-size: 1.2rem; line-height: 1; cursor: pointer; touch-action: manipulation; }
.pe-schritt:active { background: var(--blau); color: #fff; }
.pe-seite .knoepfe { margin: 0; }
.pe-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 8px; }
.pe-svg { touch-action: none; cursor: default; }
.pe-svg .sp-tisch { cursor: move; }
.pe-svg .sp-stuhl { cursor: move; }
.pe-svg .sp-tisch.gewaehlt rect, .pe-svg .sp-tisch.gewaehlt circle, .pe-svg .sp-tisch.gewaehlt ellipse { stroke-dasharray: 4 3; }
#pe-seite input[type="range"] { width: 100%; }

/* Gästeliste im Tages-Popup (23.10.2026) */
.bu-gastzeile { padding: 8px 0; border-top: 1px solid var(--linie); }
.bu-gastzeile:first-of-type { border-top: 0; }
.bu-gastzeile .klein { margin-top: 2px; }

/* Hinweisleiste „Neue Reservierungsanfrage“ (23.10.2026): oben, über allem, auf jedem Reiter */
#m-hinweise { position: fixed; top: calc(var(--kopf-h, 52px) + 8px); left: 50%; transform: translateX(-50%); z-index: 60; width: min(560px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.m-hinweis { display: flex; align-items: stretch; background: var(--orange); color: #fff; border-radius: 14px; box-shadow: 0 12px 30px rgba(16, 16, 16, 0.35); pointer-events: auto; animation: m-hinweis-rein 0.35s ease-out, kal-pochen 1.6s ease-in-out 3; }
.m-hinweis__text { flex: 1; border: 0; background: transparent; color: inherit; text-align: left; padding: 10px 14px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 2px; }
.m-hinweis__titel { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; }
.m-hinweis__zu { border: 0; background: transparent; color: #fff; font-size: 1.4rem; padding: 0 14px; cursor: pointer; }
@keyframes m-hinweis-rein { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .m-hinweis { animation: none; } }

/* Gästeverzeichnis A bis Z (23.10.2026) */
.gz { display: grid; grid-template-columns: minmax(0, 1fr) 26px; gap: 8px; align-items: start; }
.gz-liste { max-height: 62vh; overflow-y: auto; background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 0 0 6px; }
.gz-buchstabe { position: sticky; top: 0; background: var(--creme); color: var(--blau); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.12em; padding: 6px 12px; border-bottom: 1px solid var(--linie); z-index: 1; }
.gz-eintrag { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--linie); background: transparent; padding: 9px 12px; cursor: pointer; font: inherit; color: inherit; }
.gz-eintrag:hover { background: #eef0fb; }
.gz-name { font-weight: 500; }
.gz-info { font-size: 0.78rem; color: var(--grau); }
.gz-leiste { position: sticky; top: 8px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.gz-leiste button { border: 0; background: transparent; color: var(--blau); font-size: 0.7rem; font-weight: 600; line-height: 1.3; padding: 0 4px; cursor: pointer; }
.gz-leiste button:disabled { color: #c8c3b4; cursor: default; }
.gz-res { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid var(--linie); background: var(--weiss); border-radius: 10px; padding: 8px 10px; margin-top: 6px; cursor: pointer; font: inherit; color: inherit; font-size: 0.9rem; }
.gz-res:hover { border-color: var(--blau); }
.bu-tischwahl-knopf { border: 1px solid var(--blau); background: var(--weiss); color: var(--blau); border-radius: 999px; padding: 3px 12px; font: inherit; font-weight: 500; cursor: pointer; }
.bu-tischwahl-knopf:hover { background: #eef0fb; }

/* Wetterleiste (23.10.2026) */
.wx-box { margin: 0 0 16px; }
.wx { background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 10px 12px; }
.wx-jetzt { display: flex; align-items: center; gap: 10px; }
.wx-jetzt .wx-symbol { font-size: 1.9rem; line-height: 1; }
.wx-jetzt strong { display: block; font-weight: 500; font-size: 1.05rem; }
.wx-jetzt small { display: block; color: var(--grau); font-size: 0.76rem; margin-top: 1px; }
/* Kein seitliches Wischen: Stunden und Tage als Raster, das in jede Breite passt (Kundenwunsch 24.10.) */
.wx-stunden, .wx-tage { display: grid; gap: 4px; margin-top: 10px; }
.wx-stunden { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wx-tage { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.wx-stunde, .wx-tag { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 6px 2px; border-radius: 10px; background: var(--creme); font-size: 0.72rem; line-height: 1.2; }
.wx-stunde.rand { display: none; }
@media (min-width: 560px) { .wx-stunden { grid-template-columns: repeat(8, minmax(0, 1fr)); } .wx-stunde.rand { display: flex; } .wx-stunde, .wx-tag { font-size: 0.78rem; padding: 6px 4px; } }
.wx-stunde b, .wx-tag b { font-weight: 600; font-size: 0.72rem; color: var(--blau); }
.wx-stunde em, .wx-tag em { font-style: normal; font-weight: 500; }
.wx-stunde small, .wx-tag small { color: var(--grau); font-size: 0.68rem; white-space: nowrap; }
.wx-stunde.nass, .wx-tag.nass { background: #e3ecfa; }
.wx-zeile { margin-top: 4px; }

/* Wichtige Telefonnummern (23.10.2026) */
.tel-kasten { background: var(--weiss); border: 2px solid var(--blau); border-radius: 14px; padding: 10px 12px 4px; margin: 0 0 18px; }
.tel-kasten .vorzeile { margin: 0 0 6px; }
.tel-zeile { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; column-gap: 12px; padding: 8px 0; border-top: 1px solid var(--linie); text-decoration: none; color: inherit; }
.tel-zeile:first-of-type { border-top: 0; }
.tel-name { min-width: 0; font-weight: 500; }
.tel-hinweis { grid-column: 1 / -1; color: var(--grau); font-size: 0.74rem; }
.tel-nummer { flex: 0 0 auto; font-weight: 600; color: var(--blau); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tel-pflege { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr) 30px; gap: 6px; align-items: center; margin-bottom: 6px; }
.tel-pflege input { padding: 8px 10px; font-size: 16px; }
@media (max-width: 600px) { .tel-pflege { grid-template-columns: minmax(0, 1fr) 30px; } .tel-pflege input { grid-column: 1; } .tel-pflege .ek-weg { grid-column: 2; grid-row: 1; } }
.tel-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.tel-kachel { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--linie); text-decoration: none; color: inherit; }
.tel-kachel .tel-nummer { font-size: 1rem; color: var(--blau); }
.tel-kachel .tel-name { font-size: 0.9rem; color: var(--dunkel); }
.tel-kacheln + .tel-zeile { border-top: 0; }
.tel-kasten .tel-zeile:first-of-type { border-top: 0; }

/* Tablet im Lokal: PIN-Feld auf der Anmeldeseite (23.10.2026) */
.pin-anzeige { display: flex; justify-content: center; gap: 14px; margin: 18px 0 22px; }
.pin-anzeige span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--blau); background: var(--weiss); transition: background 0.1s; }
.pin-anzeige span.voll { background: var(--blau); }
.pin-tasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 300px; margin: 0 auto; }
.pin-tasten button { height: 68px; border-radius: 16px; border: 1px solid var(--linie); background: var(--weiss); font-size: 1.6rem; font-weight: 500; color: var(--blau); cursor: pointer; }
.pin-tasten button:active { background: var(--blau); color: var(--creme); }

/* Übersicht und Aktuell: ab Tablet zwei Spalten, links Wetter und Nummern, rechts der Rest (Kundenwunsch 24.10.) */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
@media (min-width: 1000px) and (min-height: 500px) {
  .dash { grid-template-columns: minmax(300px, 34%) minmax(0, 1fr); align-items: start; }
  .dash-links { position: sticky; top: calc(var(--kopf-h, 52px) + 70px); }
  .dash-rechts h1 { margin-top: 0; }
}