/* Zentral Bar Tischreservierung – Frontend
   Alle Farben/Größen als Variablen; Elementor überschreibt sie pro Widget. */
/* Farben: Elementor setzt --zb-*-l (hell) bzw. --zb-*-d (dunkel); hier wird je nach Modus gewählt. */
.zb{
  --zb-primary:var(--zb-primary-l,#5F0000);
  --zb-primary-ink:var(--zb-primary-ink-l,#FFFFFF);
  --zb-primary-hover:var(--zb-primary-hover-l,#480000);
  --zb-primary-soft:var(--zb-primary-soft-l,#F5E6E6);
  --zb-primary-text:var(--zb-primary-text-l,#5F0000);
  --zb-accent:var(--zb-accent-l,#5F0000);
  --zb-dot-ring:var(--zb-dot-ring-l,transparent);
  --zb-bg:var(--zb-bg-l,#FFFFFF);
  --zb-sunken:var(--zb-sunken-l,#F8F5F5);
  --zb-fg:var(--zb-fg-l,#221A1B);
  --zb-muted:var(--zb-muted-l,#6B5E60);
  --zb-line:var(--zb-line-l,#E2D8D9);
  --zb-line-strong:var(--zb-line-strong-l,#C9BBBD);
  --zb-err:var(--zb-err-l,#B3261E);
  --zb-ok:var(--zb-ok-l,#2E7D4F);
  --zb-head-bg:var(--zb-head-bg-l,transparent);
  --zb-foot-bg:var(--zb-foot-bg-l,var(--zb-sunken));
  --zb-choice-bg:var(--zb-choice-bg-l,var(--zb-bg));
  --zb-choice-fg:var(--zb-choice-fg-l,var(--zb-fg));
  --zb-choice-border:var(--zb-choice-border-l,var(--zb-line));
  --zb-choice-hover:var(--zb-choice-hover-l,var(--zb-primary));
  --zb-input-bg:var(--zb-input-bg-l,var(--zb-bg));
  --zb-input-fg:var(--zb-input-fg-l,var(--zb-fg));
  --zb-input-border:var(--zb-input-border-l,var(--zb-line-strong));
  --zb-focus:var(--zb-focus-l,var(--zb-primary-text));
  --zb-cta-bg:var(--zb-cta-bg-l,var(--zb-primary));
  --zb-cta-fg:var(--zb-cta-fg-l,var(--zb-primary-ink));
  --zb-cta-bg-h:var(--zb-cta-bg-h-l,var(--zb-primary-hover));
  --zb-cta-fg-h:var(--zb-cta-fg-h-l,var(--zb-cta-fg));
  --zb-back:var(--zb-back-l,var(--zb-line-strong));
  --zb-back-fg:var(--zb-back-fg-l,var(--zb-fg));
  --zb-chip-bg:var(--zb-chip-bg-l,var(--zb-bg));
  --zb-chip-border:var(--zb-chip-border-l,var(--zb-line));
  --zb-pg-bg:var(--zb-pg-bg-l,var(--zb-primary));
  --zb-pg-fg:var(--zb-pg-fg-l,var(--zb-primary-ink));
  --zb-px:16px; --zb-py:10px; --zb-gap:8px;
  --zb-r-choice:7px; --zb-w-day:38px; --zb-h-pbtn:38px; --zb-h-slot:34px; --zb-w-slot:54px; --zb-g-choice:5px;
  --zb-h-input:36px; --zb-r-input:7px;
  --zb-h-cta:34px; --zb-px-cta:15px; --zb-r-cta:999px;
  --zb-h-chip:34px; --zb-r-chip:8px; --zb-py-foot:10px; --zb-s-pg:30px;
  box-sizing:border-box; width:100%; max-width:100%; margin:0; container-type:inline-size; container-name:zb;
  background:var(--zb-bg); color:var(--zb-fg); color-scheme:light;
  border:1px solid var(--zb-line); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column;
  font-size:13.5px; line-height:1.35; text-align:left;
  transition:background-color .25s,color .25s,border-color .25s;
}
.zb.zb--dark{
  --zb-primary:var(--zb-primary-d,#5F0000);
  --zb-primary-ink:var(--zb-primary-ink-d,#FFFFFF);
  --zb-primary-hover:var(--zb-primary-hover-d,#7A0000);
  --zb-primary-soft:var(--zb-primary-soft-d,#3A1F1F);
  --zb-primary-text:var(--zb-primary-text-d,#E69999);
  --zb-accent:var(--zb-accent-d,#5F0000);
  --zb-dot-ring:var(--zb-dot-ring-d,rgba(255,255,255,.6));
  --zb-bg:var(--zb-bg-d,#1D1718);
  --zb-sunken:var(--zb-sunken-d,#171213);
  --zb-fg:var(--zb-fg-d,#EFE7E8);
  --zb-muted:var(--zb-muted-d,#A8999B);
  --zb-line:var(--zb-line-d,#352B2D);
  --zb-line-strong:var(--zb-line-strong-d,#4A3D3F);
  --zb-err:var(--zb-err-d,#F2827A);
  --zb-ok:var(--zb-ok-d,#7BCB9B);
  --zb-head-bg:var(--zb-head-bg-d,transparent);
  --zb-foot-bg:var(--zb-foot-bg-d,var(--zb-sunken));
  --zb-choice-bg:var(--zb-choice-bg-d,var(--zb-bg));
  --zb-choice-fg:var(--zb-choice-fg-d,var(--zb-fg));
  --zb-choice-border:var(--zb-choice-border-d,var(--zb-line));
  --zb-choice-hover:var(--zb-choice-hover-d,var(--zb-primary-text));
  --zb-input-bg:var(--zb-input-bg-d,var(--zb-bg));
  --zb-input-fg:var(--zb-input-fg-d,var(--zb-fg));
  --zb-input-border:var(--zb-input-border-d,var(--zb-line-strong));
  --zb-focus:var(--zb-focus-d,var(--zb-primary-text));
  --zb-cta-bg:var(--zb-cta-bg-d,var(--zb-primary));
  --zb-cta-fg:var(--zb-cta-fg-d,var(--zb-primary-ink));
  --zb-cta-bg-h:var(--zb-cta-bg-h-d,var(--zb-primary-hover));
  --zb-cta-fg-h:var(--zb-cta-fg-h-d,var(--zb-cta-fg));
  --zb-back:var(--zb-back-d,var(--zb-line-strong));
  --zb-back-fg:var(--zb-back-fg-d,var(--zb-fg));
  --zb-chip-bg:var(--zb-chip-bg-d,var(--zb-bg));
  --zb-chip-border:var(--zb-chip-border-d,var(--zb-line));
  --zb-pg-bg:var(--zb-pg-bg-d,var(--zb-primary));
  --zb-pg-fg:var(--zb-pg-fg-d,var(--zb-primary-ink));
  color-scheme:dark;
}
.zb *,.zb *::before,.zb *::after{box-sizing:border-box}
.zb [hidden]{display:none!important}
.zb button{font-family:inherit;margin:0;text-transform:none;letter-spacing:normal;line-height:1.2}
.zb p{margin:0}
.zb svg{width:1em;height:1em;flex:0 0 auto}

/* Kopf */
.zb-head{padding:10px var(--zb-px) 8px;display:flex;flex-direction:column;gap:7px;border-bottom:1px solid var(--zb-line);background:var(--zb-head-bg)}
.zb-title{display:flex;justify-content:space-between;align-items:baseline;gap:2px 12px;flex-wrap:wrap}
.zb-title h2{font-weight:800;font-size:20px;line-height:1.05;margin:0;text-transform:uppercase;letter-spacing:.01em;color:var(--zb-fg)}
.zb-title p{font-size:11.5px;color:var(--zb-muted)}
.zb-title a{color:var(--zb-fg);font-weight:600;text-decoration:none;border-bottom:1px solid var(--zb-line-strong);white-space:nowrap}
.zb-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;list-style:none;margin:0;padding:0}
.zb-steps li{display:flex;flex-direction:column;gap:3px;min-width:0;margin:0;padding:0}
.zb-steps li::before,.zb-steps li::marker{content:none}
.zb-steps .bar{height:3px;border-radius:3px;background:var(--zb-line);overflow:hidden;display:block}
.zb-steps .bar i{display:block;height:100%;width:0;background:var(--zb-primary);transition:width .3s ease}
.zb-steps li.on .bar i,.zb-steps li.done .bar i{width:100%}
.zb-steps button{all:unset;cursor:pointer;font-size:10.5px;font-weight:600;color:var(--zb-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:3px}
.zb-steps button:disabled{cursor:default}
.zb-steps li.on button{color:var(--zb-fg)}
.zb-steps li.done button{color:var(--zb-primary-text)}
.zb-steps button:focus-visible{outline:2px solid var(--zb-focus);outline-offset:2px}

/* Hell/Dunkel-Umschalter */
.zb-tr{display:flex;align-items:center;gap:10px;margin-left:auto}
.zb-theme{position:relative;display:inline-flex;align-items:center;width:54px;height:28px;border-radius:999px;border:1px solid var(--zb-line-strong);background:var(--zb-sunken);padding:2px;margin:0;cursor:pointer;flex:0 0 auto;box-shadow:none;transition:border-color .15s}
.zb-theme:hover,.zb-theme:focus{border-color:var(--zb-primary-text);background:var(--zb-sunken)}
.zb-theme::before{content:"";position:absolute;top:2px;left:2px;width:24px;height:22px;border-radius:999px;background:var(--zb-primary);transition:transform .2s ease}
.zb.zb--dark .zb-theme::before{transform:translateX(24px)}
.zb .zb-theme svg{position:relative;z-index:1;width:24px;height:14px;display:block;color:var(--zb-muted);transition:color .2s}
.zb:not(.zb--dark) .zb-theme .sun,.zb.zb--dark .zb-theme .moon{color:var(--zb-primary-ink)}

/* Folien */
.zb-viewport{overflow:hidden;position:relative;transition:height .25s ease}
.zb-track{display:flex;transition:transform .32s cubic-bezier(.4,0,.2,1);align-items:flex-start}
.zb-slide{flex:0 0 100%;min-width:0;padding:var(--zb-py) var(--zb-px) calc(var(--zb-py) + 1px);display:flex;flex-direction:column;gap:var(--zb-gap)}
.zb-slide[aria-hidden="true"]{visibility:hidden}
.zb-q{font-size:13.5px;font-weight:700;display:flex;justify-content:space-between;align-items:baseline;gap:8px;color:var(--zb-fg)}
.zb-q{align-items:center}
.zb-pager{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--zb-muted)}
.zb-pg{width:var(--zb-s-pg);height:var(--zb-s-pg);border-radius:50%;border:1px solid var(--zb-line-strong);background:var(--zb-bg);color:var(--zb-fg);display:inline-grid;place-items:center;cursor:pointer;padding:0;margin:0;font-size:calc(var(--zb-s-pg) * .46);box-shadow:none;transition:border-color .15s,background .15s}
.zb-pg:hover:not(:disabled){border-color:var(--zb-primary-text);background:var(--zb-bg);color:var(--zb-fg)}
.zb-pg.next:not(:disabled),.zb-pg.next:not(:disabled):hover{background:var(--zb-pg-bg);border-color:var(--zb-pg-bg);color:var(--zb-pg-fg)}
.zb-pg:disabled{opacity:.3;cursor:default}

/* Auswahl-Buttons gemeinsam */
.zb-day,.zb-pbtn,.zb-slot{
  border:1px solid var(--zb-choice-border); background:var(--zb-choice-bg); color:var(--zb-choice-fg);
  border-radius:var(--zb-r-choice); cursor:pointer; padding:0; transition:border-color .15s,background .15s,color .15s; box-shadow:none;
}
.zb-day:hover:not(:disabled),.zb-pbtn:hover,.zb-slot:hover:not(:disabled){border-color:var(--zb-choice-hover);background:var(--zb-choice-bg);color:var(--zb-choice-fg)}
.zb-day[aria-pressed="true"],.zb-pbtn[aria-pressed="true"],.zb-slot[aria-pressed="true"]{background:var(--zb-primary);border-color:var(--zb-primary);color:var(--zb-primary-ink)}
.zb-day:disabled,.zb-slot:disabled{cursor:not-allowed;background:var(--zb-sunken);color:var(--zb-muted);opacity:.5}

/* 1 Tag */
.zb-days{display:flex;gap:var(--zb-g-choice);padding:1px}
.zb-day{flex:1 0 var(--zb-w-day);scroll-snap-align:start;padding:7px 2px 6px;display:flex;flex-direction:column;align-items:center;position:relative}
.zb-day .dw{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--zb-muted);font-weight:600;line-height:1.2}
.zb-day .dn{font-weight:800;font-size:23px;line-height:1.05}
.zb-day[aria-pressed="true"] .dw{color:var(--zb-primary-ink)}
.zb-day:disabled .dn{text-decoration:line-through;text-decoration-thickness:1px}
.zb-day .hol{position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--zb-accent);box-shadow:0 0 0 1px var(--zb-dot-ring)}
.zb-day[aria-pressed="true"] .hol{background:var(--zb-primary-ink)}
.zb-info{display:flex;flex-wrap:wrap;gap:4px}
.zb-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 7px;border-radius:999px;background:var(--zb-sunken);border:1px solid var(--zb-line);font-variant-numeric:tabular-nums;color:var(--zb-muted)}
.zb-pill b{color:var(--zb-fg);font-weight:600}
.zb-pill.k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--zb-accent);box-shadow:0 0 0 1px var(--zb-dot-ring)}
.zb-pill.h{background:var(--zb-primary-soft);border-color:transparent;color:var(--zb-fg)}

/* 2 Personen */
.zb-pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--zb-g-choice)}
.zb-pbtn{min-height:var(--zb-h-pbtn);font-weight:800;font-size:18px;font-variant-numeric:tabular-nums}
.zb-note{font-size:11.5px;color:var(--zb-muted)}

/* 3 Uhrzeit */
.zb-slotwrap{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.zb-seg{display:inline-flex;background:var(--zb-sunken);border:1px solid var(--zb-line);border-radius:999px;padding:2px}
.zb-seg button{border:0;background:transparent;color:var(--zb-muted);padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;cursor:pointer;min-height:24px;box-shadow:none}
.zb-seg button:hover{background:transparent;color:var(--zb-fg)}
.zb-seg button[aria-pressed="true"]{background:var(--zb-bg);color:var(--zb-fg);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.zb-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--zb-w-slot),1fr));gap:var(--zb-g-choice);width:100%}
.zb-slot{min-height:var(--zb-h-slot);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;position:relative}
.zb-slot .kd{position:absolute;top:3px;right:3px;width:4px;height:4px;border-radius:50%;background:var(--zb-accent);box-shadow:0 0 0 1px var(--zb-dot-ring)}
.zb-slot[aria-pressed="true"] .kd{background:var(--zb-primary-ink)}
.zb-legend{display:inline-flex;align-items:center;gap:5px}
.zb-legend i{width:5px;height:5px;border-radius:50%;background:var(--zb-accent);display:inline-block;box-shadow:0 0 0 1px var(--zb-dot-ring)}
.zb-empty{color:var(--zb-muted);padding:10px;border:1px dashed var(--zb-line-strong);border-radius:8px;text-align:center;width:100%}

/* 4 Kontakt */
.zb-fields{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px}
.zb-fields .full{grid-column:1/-1}
@container zb (max-width:440px){.zb-fields{grid-template-columns:1fr}}
@container zb (min-width:760px){.zb-fields{grid-template-columns:1.2fr 1fr 1fr}.zb-fields .full{grid-column:auto}}
.zb-f{display:flex;flex-direction:column;gap:2px;min-width:0}
.zb-f label{font-size:11px;font-weight:600;color:var(--zb-muted);margin:0}
.zb-iw{position:relative}
.zb .zb-iw input{width:100%;min-height:var(--zb-h-input);height:auto;margin:0;border:1px solid var(--zb-input-border);background:var(--zb-input-bg);color:var(--zb-input-fg);border-radius:var(--zb-r-input);padding:6px 28px 6px 9px;font-size:16px;line-height:1.3;box-shadow:none;transition:border-color .15s,box-shadow .15s}
.zb .zb-iw input::placeholder{color:var(--zb-muted);opacity:.7}
.zb .zb-iw input:focus{outline:none;border-color:var(--zb-focus);box-shadow:0 0 0 3px var(--zb-primary-soft)}
.zb-iw .st{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;display:none;color:var(--zb-ok)}
.zb-f.good .st{display:block}
.zb .zb-f.bad input{border-color:var(--zb-err)}
.zb-msg{font-size:11px;color:var(--zb-err)}
.zb-msg:empty{display:none}
.zb-consent{display:flex;gap:7px;align-items:flex-start;font-size:11px;color:var(--zb-muted);cursor:pointer;margin:0}
.zb-consent a{color:inherit;text-decoration:underline}
.zb-consent input{margin:0;width:15px;height:15px;accent-color:var(--zb-primary);flex:0 0 auto;cursor:pointer}
.zb-consent.bad{color:var(--zb-err)}
.zb-hint{font-size:11.5px;color:var(--zb-err)}
.zb-hint:empty{display:none}
.zb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.zb button:focus-visible,.zb-consent input:focus-visible{outline:2px solid var(--zb-focus);outline-offset:2px}

/* Fuß */
.zb-foot{background:var(--zb-foot-bg);border-top:1px solid var(--zb-line);padding:var(--zb-py-foot) var(--zb-px);display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.zb-sum{flex:1 1 280px;min-width:0;display:flex;flex-wrap:wrap;gap:6px}
.zb-chip{display:inline-flex;align-items:baseline;gap:6px;min-height:var(--zb-h-chip);padding:6px 11px;border-radius:var(--zb-r-chip);background:var(--zb-chip-bg);border:1px solid var(--zb-chip-border);font-size:15px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--zb-fg)}
.zb-chip small{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--zb-muted)}
.zb-chip.miss{border-style:dashed;background:transparent;color:var(--zb-muted);font-weight:500}
.zb-btns{display:flex;gap:6px;flex:0 0 auto;margin-left:auto}
@container zb (max-width:440px){.zb-chip:not(.g) small{display:none}.zb-chip{font-size:14px;padding:5px 9px}}
.zb-back{background:transparent;border:1px solid var(--zb-back);color:var(--zb-back-fg);border-radius:999px;min-height:var(--zb-h-cta);width:var(--zb-h-cta);padding:0;cursor:pointer;display:inline-grid;place-items:center;font-size:14px;box-shadow:none}
.zb-back:hover{background:var(--zb-sunken);color:var(--zb-back-fg)}
.zb-cta{background:var(--zb-cta-bg);color:var(--zb-cta-fg);border:0;border-radius:var(--zb-r-cta);min-height:var(--zb-h-cta);padding:0 var(--zb-px-cta);font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .15s,transform .1s;box-shadow:none}
.zb-cta svg{font-size:14px}
.zb-cta:hover,.zb-cta:focus{background:var(--zb-cta-bg-h);color:var(--zb-cta-fg-h)}
.zb-cta:active{transform:translateY(1px)}
.zb-cta:disabled{opacity:.6;cursor:progress}

/* Bestätigung */
.zb-done{padding:12px var(--zb-px) 14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.zb-dh{display:flex;align-items:center;gap:10px}
.zb-badge{width:30px;height:30px;border-radius:50%;background:var(--zb-primary);color:var(--zb-primary-ink);display:grid;place-items:center;flex:0 0 auto;font-size:16px}
.zb-done h3{margin:0;font-weight:800;font-size:20px;text-transform:uppercase;line-height:1.05;color:var(--zb-fg)}
.zb-done p{color:var(--zb-muted);font-size:12.5px}
.zb-ticket{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;border:1px solid var(--zb-line);border-radius:8px;padding:8px 10px;font-size:12.5px;font-variant-numeric:tabular-nums;width:100%;margin:0}
.zb-ticket dt{color:var(--zb-muted);margin:0;font-weight:400}
.zb-ticket dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
.zb-rnr{color:var(--zb-muted);font-weight:500;font-size:.9em;white-space:nowrap}
.zb-again{background:transparent;border:1px solid var(--zb-line-strong);color:var(--zb-fg);border-radius:999px;min-height:32px;padding:0 13px;font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:none}
.zb-again:hover{background:var(--zb-sunken);color:var(--zb-fg)}

@container zb (max-width:400px){.zb-day .dw{font-size:9px;letter-spacing:.02em}.zb-day .dn{font-size:20px}.zb-day{padding:6px 1px 5px}}
@container zb (min-width:600px){.zb-pgrid{grid-template-columns:repeat(var(--zb-pcols,10),1fr)}}
@media (prefers-reduced-motion:reduce){.zb *{transition:none!important;scroll-behavior:auto!important}}