/* =====================================================================
   Odenwaelder Festtage 2026 - Buchungsstrecke
   Ergaenzung zu css/style.css. Gleiche CI, gleiche Variablen:
   Festtage-Blau #225F8A - Wiesn-Rot #C11718 - Weiss - Tracht-Braun #A06B3F
   Alle Klassen sind mit "bu-" praefixiert, damit nichts aus style.css
   ueberschrieben wird.
   ===================================================================== */

:root {
  --bu-grau-hell:  #eef3f7;
  --bu-grau-linie: #d6e2ec;
  --bu-belegt:     #9aa9b4;
  --bu-belegt-bg:  #e7edf2;
  --bu-gold:       #f0d68a;
}

/* ---------------------------------------------------------------------
   Breiterer Rahmen - der Saalplan braucht mehr Platz als 1180 px
   --------------------------------------------------------------------- */
.bu-wrap-weit { max-width: 1320px; }

/* ---------------------------------------------------------------------
   Schritt-Rahmen
   --------------------------------------------------------------------- */
.bu-schritt { margin-bottom: 44px; }
.bu-schritt:last-child { margin-bottom: 0; }
.bu-schritt-kopf { margin-bottom: 20px; }
.bu-schritt-kopf h2 { margin-bottom: .35rem; }
.bu-schritt-kopf p { color: var(--grau); margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Schritt 1 - Slot-Reiter
   --------------------------------------------------------------------- */
.bu-slots {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.bu-slot {
  position: relative; display: block; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 2px solid var(--bu-grau-linie); border-radius: var(--radius);
  padding: 16px 18px; font-family: var(--font-body); font-size: 1rem; line-height: normal; color: var(--text);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.bu-slot:hover { border-color: var(--blau); transform: translateY(-3px); box-shadow: var(--shadow); }
.bu-slot[aria-selected="true"] {
  border-color: var(--rot); box-shadow: 0 8px 22px rgba(193,23,24,.22);
  background: #fffafa;
}
.bu-slot[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px;
  background: var(--rot); border-radius: 0 0 var(--radius) var(--radius);
}
.bu-slot-tag, .bu-slot-name, .bu-slot-zeit, .bu-slot-preis { display: block; }
.bu-slot-tag { font-family: var(--font-head); font-weight: 700; color: var(--rot); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.bu-slot-name { font-family: var(--font-head); font-weight: 700; color: var(--blau); font-size: 1.18rem; line-height: 1.2; margin: 2px 0 4px; }
.bu-slot-zeit { font-size: .95rem; color: var(--grau); }
.bu-slot-preis { margin-top: 8px; font-family: var(--font-head); font-weight: 700; color: var(--blau); font-size: .95rem; }
/* Slot nicht im Verkauf (z.B. Sa Mittag: Zelt offen fuer alle) */
.bu-slot-aus { cursor: default; opacity: .75; background: repeating-linear-gradient(-45deg, #fff, #fff 12px, #f4f8fb 12px, #f4f8fb 24px); }
.bu-slot-aus:hover { border-color: inherit; transform: none; box-shadow: none; }
.bu-slot-hinweis { display: block; margin-top: 8px; font-family: var(--font-head); font-weight: 700; color: var(--rot); font-size: .88rem; }
.bu-slot-preis small { display: block; font-weight: 400; color: var(--grau); font-size: .82rem; }
.bu-slot-zaehler {
  position: absolute; top: -10px; right: -8px; min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 999px; background: var(--rot); color: #fff; font-family: var(--font-head);
  font-weight: 700; font-size: .82rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(193,23,24,.4);
}

/* ---------------------------------------------------------------------
   Schritt 2 - Werkzeugleiste ueber dem Plan
   --------------------------------------------------------------------- */
.bu-werkzeuge {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between; margin-bottom: 14px;
}
.bu-wz-gruppe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bu-wz {
  font-family: var(--font-head); font-weight: 500; font-size: .92rem;
  padding: .45em .95em; border-radius: 999px; border: 2px solid var(--bu-grau-linie);
  background: #fff; color: var(--blau); cursor: pointer; transition: .15s;
}
.bu-wz:hover { border-color: var(--blau); }
.bu-wz[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: #fff; }
.bu-wz-rund { width: 38px; height: 38px; padding: 0; font-size: 1.15rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.bu-wz:disabled { opacity: .45; cursor: not-allowed; }
.bu-zoom-wert { font-size: .85rem; color: var(--grau); min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Schritt 2 - Saalplan
   --------------------------------------------------------------------- */
.bu-plan-buehne {
  background: linear-gradient(180deg, #f3f9ff, #fff);
  border: 1px solid #e3eef7; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px; overflow: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.bu-plan-buehne svg { display: block; height: auto; }
.bu-plan-hinweis { font-size: .85rem; color: var(--grau); margin: 8px 2px 0; }
.bu-plan-frueh { font-size: .95rem; font-weight: 600; color: var(--tracht-braun, #A06B3F); margin: 10px 2px 0; }
.bu-vertrauen {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--bu-grau-linie);
  border-radius: 10px;
  background: var(--bu-grau-hell);
}
.bu-vertrauen-zahl { margin: 0 0 6px; font-weight: 600; font-size: .9rem; }
.bu-vertrauen-hinweis { margin: 0; font-size: .83rem; line-height: 1.45; color: var(--grau); }



/* Zeltbau */
.bu-halle       { fill: url(#bu-pat-boden); stroke: var(--blau); stroke-width: .16; }
.bu-anbau       { fill: #eaf3fa; stroke: var(--blau); stroke-width: .12; }
.bu-vip-zone    { fill: #f7f0e7; stroke: var(--braun); stroke-width: .12; stroke-dasharray: .5 .32; }
.bu-vip-trenner { stroke: var(--braun); stroke-width: .06; stroke-dasharray: .3 .3; opacity: .6; }
.bu-buehne      { fill: var(--braun); stroke: #7d5230; stroke-width: .1; }
.bu-einlass     { fill: #eaf3fa; stroke: var(--blau); stroke-width: .12; }
.bu-tanzflaeche { fill: none; stroke: var(--blau); stroke-width: .07; stroke-dasharray: .55 .45; opacity: .38; }

.bu-txt          { font-family: var(--font-head); font-weight: 700; fill: var(--blau); }
.bu-txt-hell     { fill: #fff; }
.bu-txt-braun    { fill: #7d5230; }
.bu-txt-leise    { font-family: var(--font-body); font-weight: 400; fill: var(--grau); }
.bu-txt-mass     { font-family: var(--font-body); font-weight: 400; fill: #93a7b5; }
.bu-massband     { stroke: #93a7b5; stroke-width: .07; }

/* Tische - Grundform */
.bu-tisch { cursor: pointer; }
.bu-tisch .bu-h      { fill: #fff; transition: fill .15s; }
.bu-tisch .bu-rahmen { fill: none; stroke: var(--blau); stroke-width: .1; }
.bu-tisch .bu-teiler { stroke: var(--blau); stroke-width: .05; stroke-dasharray: .18 .16; opacity: .55; }
.bu-tisch .bu-sitz   { fill: #fff; stroke: var(--blau); stroke-width: .05; }
.bu-tisch .bu-nr     { font-family: var(--font-head); font-weight: 700; fill: var(--blau); font-size: .8px;
                       paint-order: stroke; stroke: #ffffff; stroke-width: .16; stroke-linejoin: round; }
.bu-tisch .bu-ab     { font-family: var(--font-body); font-weight: 700; fill: var(--blau); font-size: .4px; opacity: .62; }
.bu-tisch .bu-strich { stroke: var(--bu-belegt); stroke-width: .14; stroke-linecap: round; display: none; }
.bu-tisch .bu-hit    { fill: transparent; }
.bu-tisch .bu-fokus  { fill: none; stroke: none; stroke-width: .16; }

.bu-tisch:hover .bu-rahmen { stroke-width: .18; }

/* Zustand: Haelfte vergeben (Farbe UND Schraffur) */
.bu-tisch .bu-h.is-weg { fill: url(#bu-pat-weg); }
/* Zustand: Haelfte ausgewaehlt (Farbe UND Haken) */
.bu-tisch .bu-h.is-gewaehlt { fill: var(--rot); }
/* Zustand: Verfuegbarkeit unbekannt */
.bu-tisch .bu-h.is-unbekannt { fill: url(#bu-pat-unbekannt); }

.bu-tisch .bu-haken { fill: none; stroke: #fff; stroke-width: .13; stroke-linecap: round; stroke-linejoin: round; display: none; }
.bu-tisch .bu-h.is-gewaehlt + .bu-haken { display: block; }

/* Zustand: ganzer Tisch ausgebucht */
.bu-tisch.is-belegt { cursor: not-allowed; }
.bu-tisch.is-belegt .bu-rahmen { stroke: var(--bu-belegt); }
.bu-tisch.is-belegt .bu-teiler { stroke: var(--bu-belegt); }
.bu-tisch.is-belegt .bu-nr     { fill: #5d6f7c; stroke: #eef2f6; }
.bu-tisch.is-belegt .bu-ab     { display: none; }
.bu-tisch.is-belegt .bu-sitz   { fill: var(--bu-belegt-bg); stroke: var(--bu-belegt); }
.bu-tisch.is-belegt .bu-strich { display: block; }
.bu-tisch.is-belegt:hover .bu-rahmen { stroke-width: .1; }

/* Zustand: halb belegt - zusaetzliche Ecke oben links markiert */
.bu-tisch.is-halb .bu-rahmen { stroke-dasharray: none; }

/* Zustand: mindestens eine Haelfte gewaehlt */
.bu-tisch.is-gewaehlt .bu-rahmen { stroke: var(--rot-dunkel); stroke-width: .2; }
.bu-tisch.is-gewaehlt .bu-nr     { fill: #fff; paint-order: stroke; stroke: var(--rot-dunkel); stroke-width: .16; }
.bu-tisch.is-gewaehlt .bu-ab     { display: none; }

/* Zustand: VIP */
.bu-tisch.is-kontingent .bu-h      { fill: url(#bu-pat-kont); }
.bu-tisch.is-kontingent .bu-rahmen { stroke: var(--blau); stroke-dasharray: .3 .2; }
.bu-tisch.is-kontingent .bu-teiler { display: none; }
.bu-tisch.is-kontingent .bu-nr     { fill: #33566b; stroke: #eef4f8; }
.bu-tisch.is-kontingent .bu-ab     { display: none; }
.bu-karte.is-kontingent { border-color: var(--blau); border-style: dashed; background: #f6fafc; }
.bu-status-pille.p-kont { background: #e3eef5; color: #33566b; }
.bu-tisch.is-vip .bu-h      { fill: url(#bu-pat-vip); }
.bu-tisch.is-vip .bu-rahmen { stroke: var(--braun); stroke-dasharray: .34 .22; }
.bu-tisch.is-vip .bu-teiler { display: none; }
.bu-tisch.is-vip .bu-nr     { fill: #7d5230; stroke: #f7f0e7; }
.bu-tisch.is-vip .bu-ab     { display: none; }
.bu-tisch.is-vip .bu-sitz   { stroke: var(--braun); }
/* 10.10.2026: VIP-Kennzeichnung einzelner Tische (nur optisch) */
.bu-tisch .bu-vipmark { fill: rgba(201,160,92,.16); stroke: var(--braun); stroke-width: .07; stroke-dasharray: .3 .18; pointer-events: none; }

/* Zustand: unbekannt (API nicht erreichbar) */
.bu-tisch.is-unbekannt { cursor: progress; }
.bu-tisch.is-unbekannt .bu-nr { fill: #7c8b96; }

/* Tastaturfokus im Plan */
.bu-tisch:focus { outline: none; }
.bu-tisch:focus-visible .bu-fokus { stroke: #10344f; }
.bu-tisch:focus-visible .bu-rahmen { stroke-width: .2; }

/* kurzes Aufblinken, wenn ein Tisch weggeschnappt wurde */
@keyframes bu-puls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.bu-tisch.is-verloren .bu-rahmen { stroke: var(--rot); stroke-width: .24; animation: bu-puls 1s ease-in-out 3; }

/* ---------------------------------------------------------------------
   Legende
   --------------------------------------------------------------------- */
.bu-legende {
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px;
  padding: 14px 18px; background: #fff; border: 1px solid var(--bu-grau-linie);
  border-radius: var(--radius); font-size: .9rem;
}
.bu-leg { display: flex; align-items: center; gap: 9px; }
.bu-leg-feld {
  width: 40px; height: 22px; border-radius: 5px; border: 2px solid var(--blau);
  background: #fff; flex: none; position: relative;
}
.bu-leg-feld::before {
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 50%;
  border-left: 1px dashed rgba(34,95,138,.5);
}
.bu-leg-halb::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 50%;
  background: repeating-linear-gradient(45deg, #b9c6d0 0 2px, #e7edf2 2px 5px);
}
.bu-leg-belegt {
  border-color: var(--bu-belegt);
  background: repeating-linear-gradient(45deg, #b9c6d0 0 2px, #e7edf2 2px 5px);
}
.bu-leg-belegt::after {
  content: ""; position: absolute; inset: 3px 4px;
  border-top: 2px solid var(--bu-belegt); transform: rotate(-24deg); transform-origin: center;
}
.bu-leg-gewaehlt { border-color: var(--rot-dunkel); background: var(--rot); }
.bu-leg-gewaehlt::before { border-color: rgba(255,255,255,.6); }
.bu-leg-kont {
  border-color: var(--blau); border-style: dashed;
  background: radial-gradient(circle at 4px 4px, #9fb8c8 1.4px, transparent 1.6px) 0 0 / 8px 8px, #eef4f8;
}
.bu-leg-kont::before { display: none; }
.bu-leg-vip {
  border-color: var(--braun); border-style: dashed;
  background: radial-gradient(circle at 4px 4px, #d9bb96 1.4px, transparent 1.6px) 0 0 / 8px 8px, #f7f0e7;
}
.bu-leg-vip::before { display: none; }
.bu-leg-vipmark {
  border-color: var(--braun); border-style: dashed; background: rgba(201,160,92,.16);
}
.bu-leg-vipmark::before { display: none; }

/* ---------------------------------------------------------------------
   Listenansicht
   --------------------------------------------------------------------- */
.bu-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
.bu-liste-block { grid-column: 1 / -1; margin-top: 10px; }
.bu-liste-block:first-child { margin-top: 0; }
.bu-liste-block h3 { font-size: 1.05rem; margin-bottom: 2px; }
.bu-liste-block p { color: var(--grau); font-size: .88rem; margin: 0; }
.bu-karte {
  width: 100%; text-align: left; cursor: pointer; background: #fff;
  border: 2px solid var(--bu-grau-linie); border-radius: 12px; padding: 12px 14px;
  font-family: var(--font-body); color: var(--text); transition: .15s;
}
.bu-karte:hover { border-color: var(--blau); }
.bu-karte:disabled { cursor: not-allowed; opacity: .72; background: #f7fafc; }
.bu-karte-nr { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--blau); }
.bu-karte-preis { font-size: .86rem; color: var(--grau); margin-top: 4px; }
.bu-karte.is-gewaehlt { border-color: var(--rot); background: #fffafa; }
.bu-karte.is-vip { border-color: var(--braun); border-style: dashed; background: #fdfaf6; }

.bu-status-pille {
  display: inline-block; margin-top: 6px; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; padding: .2em .7em; border-radius: 999px;
  background: #e8f4e9; color: #2f7a3b;
}
.bu-status-pille.p-halb   { background: #fff3dc; color: #96650d; }
.bu-status-pille.p-belegt { background: var(--bu-grau-hell); color: #6b7e8a; }
.bu-status-pille.p-vip    { background: #f4e8d9; color: #7d5230; }
.bu-status-pille.p-gewaehlt { background: #fbe7e7; color: var(--rot); }
.bu-status-pille.p-unbekannt { background: var(--bu-grau-hell); color: #6b7e8a; }

/* ---------------------------------------------------------------------
   Auswahl / Warenkorb-Spalte
   --------------------------------------------------------------------- */
.bu-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; }
/* min-width: 0 ist Pflicht - sonst zieht der breite Saalplan im
   Scrollrahmen die Rasterspalte auf und die ganze Seite laeuft ueber. */
.bu-layout > * { min-width: 0; }
.bu-auswahl {
  position: sticky; top: calc(var(--nav-h) + 14px); background: #fff; border: 1px solid #eef3f7;
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 22px;
}
.bu-auswahl h3 { margin-bottom: 12px; }
.bu-auswahl-leer { color: var(--grau); font-size: .95rem; }
.bu-gruppe { margin-bottom: 16px; }
.bu-gruppe-kopf {
  font-family: var(--font-head); font-weight: 700; font-size: .82rem; color: var(--rot);
  text-transform: uppercase; letter-spacing: .07em; padding-bottom: 6px;
  border-bottom: 2px solid #fbe7e7; margin-bottom: 8px;
}
.bu-zeile { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--bu-grau-linie); }
.bu-zeile:last-child { border-bottom: 0; }
.bu-zeile-text { flex: 1 1 auto; min-width: 0; }
.bu-zeile-titel { display: block; font-family: var(--font-head); font-weight: 700; color: var(--blau); }
.bu-zeile-sub { display: block; font-size: .85rem; color: var(--grau); }
.bu-zeile-preis { font-family: var(--font-head); font-weight: 700; white-space: nowrap; }
.bu-weg {
  flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--bu-grau-linie);
  background: #fff; color: var(--grau); cursor: pointer; font-size: 1rem; line-height: 1;
}
.bu-weg:hover { border-color: var(--rot); color: var(--rot); }
.bu-summe {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--bu-grau-linie);
  font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--blau);
}
.bu-summe small { font-family: var(--font-body); font-weight: 400; font-size: .78rem; color: var(--grau); display: block; }
.bu-zahlhinweis { font-size: .86rem; color: var(--grau); margin-top: 12px; }
.bu-auswahl .btn:disabled, .bu-mobilbar .btn:disabled {
  opacity: .45; cursor: not-allowed; box-shadow: none; transform: none;
}
.bu-rechtslinks { font-size: .82rem; color: var(--grau); margin-top: 12px; }
.bu-rechtslinks a { text-decoration: underline; }
.bu-platzhalter { color: #93a7b5; }

/* ---------------------------------------------------------------------
   Status- und Hinweisboxen
   --------------------------------------------------------------------- */
.bu-box { border-radius: 10px; padding: 13px 17px; font-size: .92rem; margin-bottom: 14px; border: 1px solid; }
.bu-box p:last-child { margin-bottom: 0; }
.bu-box-info  { background: #eef5fb; border-color: #c7ddef; color: #1c4b6d; }
.bu-box-warn  { background: #eef5fb; border-color: #c7ddef; border-left: 4px solid var(--rot); color: #1c4b6d; }
.bu-box-fehler{ background: #fdeeee; border-color: #e9b3b3; color: #8f1517; }
.bu-box-ok    { background: #eef8ef; border-color: #b9dcc0; color: #2f6b39; }
.bu-box[hidden] { display: none; }

.bu-datenstand { font-size: .8rem; color: var(--grau); display: flex; align-items: center; gap: 7px; }
.bu-punkt { width: 9px; height: 9px; border-radius: 50%; background: #4c9a5b; flex: none; }
.bu-punkt.p-warn { background: #d79a1b; }
.bu-punkt.p-fehler { background: var(--rot); }

/* ---------------------------------------------------------------------
   Dialoge
   --------------------------------------------------------------------- */
.bu-dlg {
  border: 0; border-radius: var(--radius); padding: 0; width: min(520px, calc(100vw - 32px));
  box-shadow: var(--shadow-lg); color: var(--text); font-family: var(--font-body);
  /* style.css setzt per "*" margin:0 - damit faellt die Mittigstellung
     des Dialogs weg. Deshalb hier ausdruecklich zuruecksetzen. */
  margin: auto;
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: auto;
}
.bu-dlg::backdrop { background: rgba(26,74,110,.55); }
.bu-dlg-inner { padding: 26px 26px 24px; }
.bu-dlg h3 { margin-bottom: 4px; padding-right: 34px; }
.bu-dlg-meta { color: var(--grau); font-size: .93rem; margin-bottom: 16px; }
.bu-dlg-x {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--bu-grau-linie); background: #fff; color: var(--grau);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.bu-dlg-x:hover { border-color: var(--rot); color: var(--rot); }
.bu-dlg-form { margin: 0; }

.bu-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 2px solid var(--bu-grau-linie); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; font-family: var(--font-body); color: var(--text);
  transition: .15s;
}
.bu-opt:hover:not(:disabled) { border-color: var(--rot); background: #fffafa; }
.bu-opt:disabled { opacity: .55; cursor: not-allowed; }
.bu-opt.is-gewaehlt { border-color: var(--rot); background: #fffafa; }
.bu-opt-text { flex: 1 1 auto; }
.bu-opt-titel, .bu-opt-sub { display: block; }
.bu-opt-titel { font-family: var(--font-head); font-weight: 700; color: var(--blau); font-size: 1.05rem; }
.bu-opt-sub { font-size: .87rem; color: var(--grau); }
.bu-opt-preis { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.bu-opt-fig { flex: none; width: 54px; }
.bu-opt-fig svg { display: block; width: 100%; height: auto; }
.bu-fig-rahmen { fill: #fff; stroke: var(--blau); stroke-width: 1.4; }
.bu-fig-teil   { fill: var(--rot); }
.bu-fig-frei   { fill: #fff; }
.bu-fig-weg    { fill: #e7edf2; }
.bu-fig-linie  { stroke: var(--blau); stroke-width: 1; stroke-dasharray: 2 2; }

.bu-dlg-liste { margin: 0 0 14px; padding-left: 20px; font-size: .92rem; }
.bu-dlg-liste li { margin-bottom: 5px; }
.bu-dlg-aktionen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* ---------------------------------------------------------------------
   Mobile Fussleiste
   --------------------------------------------------------------------- */
.bu-mobilbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none;
  align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255,255,255,.97); border-top: 1px solid var(--bu-grau-linie);
  box-shadow: 0 -6px 20px rgba(34,95,138,.14); padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.bu-mobilbar-text { font-family: var(--font-head); font-weight: 700; color: var(--blau); line-height: 1.2; }
.bu-mobilbar-text small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .78rem; color: var(--grau); }
.bu-mobilbar .btn { padding: .65em 1.2em; font-size: .95rem; }

/* ---------------------------------------------------------------------
   Infoteil unter dem Plan
   --------------------------------------------------------------------- */
.bu-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bu-info-karte { background: #fff; border: 1px solid #eef3f7; border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 22px; }
.bu-info-karte h3 { margin-bottom: 8px; font-size: 1.15rem; }
.bu-info-karte p:last-child { margin-bottom: 0; }
.bu-info-karte .bu-ico { display: block; margin-bottom: 8px; }
.bu-info-karte .bu-ico svg { width: 48px; height: 48px; display: block; }

.bu-noscript { margin: 20px 0; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .bu-layout { grid-template-columns: minmax(0, 1fr); }
  .bu-auswahl { position: static; }
}
@media (max-width: 860px) {
  .bu-slots { grid-template-columns: repeat(2, 1fr); }
  .bu-info-grid { grid-template-columns: 1fr; }
  .bu-mobilbar { display: flex; }
  body.bu-hat-mobilbar { padding-bottom: 78px; }
}
@media (max-width: 560px) {
  .bu-slots { grid-template-columns: 1fr; }
  .bu-legende { font-size: .84rem; gap: 8px 16px; }
  .bu-liste { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
  .bu-werkzeuge { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------
   Bewegung reduzieren
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bu-slot:hover, .bu-karte:hover, .bu-opt:hover { transform: none; }
  .bu-slot, .bu-karte, .bu-opt, .bu-wz, .bu-tisch .bu-h { transition: none; }
  .bu-tisch.is-verloren .bu-rahmen { animation: none; }
}

/* Druck: Plan als Uebersicht mitnehmen */
@media print {
  .bu-werkzeuge, .bu-mobilbar, .bu-dlg, .nav { display: none !important; }
  .bu-plan-buehne { overflow: visible; box-shadow: none; }
}

/* ---------------------------------------------------------------
   Plaetze ohne Tisch: Einzelplaetze und Stehplaetze (19.09.2026)
   --------------------------------------------------------------- */
.bu-kont {
  margin-top: 18px; padding: 14px;
  border: 1px solid #e3eef7; border-radius: 12px;
  background: linear-gradient(180deg, #f7fbff, #fff);
}
.bu-kont-kopf {
  font-weight: 700; font-size: .95rem; margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.bu-kont-kopf small { font-weight: 400; color: #6b7e8a; font-size: .78rem; }
.bu-kont-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid #edf4fa;
}
.bu-kont-zeile.is-aus { opacity: .55; }
.bu-kont-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bu-kont-titel { font-weight: 600; font-size: .92rem; }
.bu-kont-sub { color: #6b7e8a; font-size: .78rem; }
.bu-kont-stepper { display: flex; align-items: center; gap: 6px; flex: none; }
.bu-step {
  width: 30px; height: 30px; border: 1px solid #cfe0ee; border-radius: 8px;
  background: #fff; font-size: 1.05rem; line-height: 1; cursor: pointer; color: #225F8A;
}
.bu-step:hover:not(:disabled) { background: #eaf6ff; }
.bu-step:disabled { opacity: .35; cursor: default; }
.bu-step-zahl { min-width: 22px; text-align: center; font-weight: 700; }
.bu-kont-hinweis { margin: 10px 0 0; color: #6b7e8a; font-size: .76rem; }

.bu-speisen        { fill: #f7f0e7; stroke: var(--braun); stroke-width: .12; }
.bu-durchgang-wand { fill: #fbfdff; }
.bu-durchgang      { fill: #fff3dc; stroke: #d9a441; stroke-width: .06; stroke-dasharray: .3 .2; }
.bu-wagen          { fill: #fff; stroke: var(--braun); stroke-width: .1; stroke-dasharray: .4 .25; }

/* Leistungsinhalt in der Slot-Karte (Auftrag Aaron 20.09.2026) */
.bu-slot-inkl { display:block; margin-top:.35em; font-size:.78rem; font-weight:600; color:#1f6f43; }
.bu-slot[aria-selected="true"] .bu-slot-inkl { color:#14582f; }
.bu-inkl-hinweis { margin:.6em 0 0; padding:.7em .9em; background:#eef6f1; border-left:4px solid #1f6f43; border-radius:6px; font-size:.95rem; }
.bu-inkl-hinweis strong { color:#14582f; }

/* HALB BELEGTE TISCHE DEUTLICHER (Auftrag Elias 21.09.2026):
   verkaufte Haelften dunkelgrau schraffiert statt blassgrau, halb belegte Tische mit orangem Rahmen */
#bu-pat-weg rect { fill: #aebbc5; }
#bu-pat-weg path { stroke: #5f707c; }
.bu-tisch.is-belegt .bu-strich { stroke: #4f5f6b; }
.bu-tisch.is-halb .bu-rahmen { stroke: #e8870e; stroke-width: .2; }
.bu-tisch.is-halb .bu-teiler { stroke: #e8870e; opacity: .9; }
.bu-tisch.is-halb:hover .bu-rahmen { stroke-width: .26; }
.bu-tisch.is-halb.is-gewaehlt .bu-rahmen { stroke: var(--rot-dunkel); }
.bu-leg-halb { border-color: #e8870e; }
.bu-leg-halb::after,
.bu-leg-belegt { background: repeating-linear-gradient(45deg, #5f707c 0 2px, #aebbc5 2px 5px); }
.bu-leg-belegt::after { border-top-color: #4f5f6b; }

/* ---------------------------------------------------------------------
   DIREKT-ZUM-PLAN (24.09.2026): Zeile ueber dem Plan mit gewaehltem Tag
   --------------------------------------------------------------------- */
.bu-plan-tag {
  margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
  background: #eef3f7; color: var(--blau); font-size: .95rem; line-height: 1.4;
}
.bu-plan-tag strong { font-family: var(--font-head); }
.bu-plan-tag-zurueck { margin-left: 8px; white-space: nowrap; color: var(--rot, #c8102e); font-weight: 600; }