/* Platzlicht Landingpage (Neubau 12.10.2026, Onepage-Stil seit 14.10.2026)
 * Baut auf ../shared/tokens.css auf (Statusfarben, Figtree). Überschriften: Figtree 800–900, eng gesetzt (wie onepage.io).
 * Stil: reines Weiß, hellgraue Abschnitte (#F4F3F3, Radius 20–32), schwarze Hauptknöpfe (Radius 6), Braun #6F4628 nur als Akzent.
 * Karten flach (1px Linie, keine Schatten), Schatten nur für schwebende Elemente.
 * Kontrast: jeder Text ≥ 4,5:1 gegen seinen Grund (auch auf der dunklen Fläche).
 * Bricolage Grotesque wird nicht mehr verwendet (Dateien bleiben in shared/fonts, Lizenzseite).
 */
:root {
  --lp-display: var(--font, "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --lp-paper: #FFFFFF;
  --lp-sand: #F4F3F3;       /* Abschnittsfläche (hellgrau, früher Sand) */
  --lp-sand-2: #F5EDE5;     /* Markentönung, nur kleine Akzente */
  --lp-hover: #F7F7F7;
  --lp-line: #EAE9E9;
  --lp-line-2: #D6D5D5;
  --lp-ink: #1D1D1B;
  --lp-ink-2: #63636A;      /* 6,0:1 auf Weiß, 5,4:1 auf #F4F3F3 */
  --lp-brand: #6F4628;      /* 8,4:1 auf Weiß */
  --lp-esp: #1D1D1B;        /* dunkle Fläche: neutrales Fast-Schwarz */
  --lp-on-dark: #F4F3F3;
  --lp-on-dark-2: #BDBDC2;  /* 9,0:1 auf #1D1D1B */
  --lp-caramel: #E8D6C5;    /* Braun-Akzent auf dunkler Fläche (11,9:1 auf #1D1D1B) */
  /* Tisch-Status wie in der App (tokens.css --st-*, floor.css --fl-*). Nur hier tauschen. */
  --lp-free: #1B7432; --lp-free-bg: #EAF8EE; --lp-free-edge: #34C759;
  --lp-res: #6F4628;  --lp-res-bg: #F5EDE5;  --lp-res-edge: #6F4628;
  --lp-seat: #3634A3; --lp-seat-bg: #EEEEFB; --lp-seat-edge: #5856D6;
  --fl-seated-fill: #EEEEFB; --fl-seated-edge: #5856D6; --st-seated: #3634A3; --st-seated-bg: #EEEEFB;
  --lp-soon: #C93400; --lp-soon-bg: #FFF1E0; --lp-soon-edge: #FF9500;
  --lp-blocked: #55555C; --lp-blocked-bg: #EAE9E9;
  --lp-wrap: 1200px;
  --lp-gut: 16px;
  --lp-inset: 8px;          /* Abstand der grauen Abschnitte zum Fensterrand */
  --lp-sec-r: 20px;         /* Rundung der grauen Abschnitte */
  --lp-btn-r: 6px;
  --lp-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --lp-ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --lp-shadow: 0 24px 64px rgba(0,0,0,.14), 0 4px 14px rgba(0,0,0,.06);     /* nur schwebende Elemente */
  --lp-shadow-lg: 0 24px 64px rgba(0,0,0,.14), 0 4px 14px rgba(0,0,0,.06);
}
@media (min-width: 640px) { :root { --lp-gut: 24px; --lp-inset: 12px; --lp-sec-r: 28px; } }
@media (min-width: 1024px) { :root { --lp-gut: 32px; --lp-inset: 16px; --lp-sec-r: 32px; } }

html { -webkit-tap-highlight-color: transparent; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: var(--lp-paper); color: var(--lp-ink); font-size: 1rem; line-height: 1.6; overflow-x: clip; }
h1, h2, h3 { font-family: var(--lp-display); color: var(--lp-ink); margin: 0; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }
a, button, [role="tab"], summary { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 3px; box-shadow: none; border-radius: 6px; }
::selection { background: #E8D6C5; color: var(--lp-ink); }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.wrap { width: 100%; max-width: calc(var(--lp-wrap) + 2 * var(--lp-gut)); margin-inline: auto; padding-inline: var(--lp-gut); }
.wrap-wide { max-width: calc(1280px + 2 * var(--lp-gut)); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--lp-ink); color: #fff; padding: 10px 16px; border-radius: var(--lp-btn-r); text-decoration: none; font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- Knöpfe ---------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: var(--lp-btn-r); border: 0;
  font-family: var(--lp-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform 160ms var(--lp-ease), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.lp-btn:active { transform: scale(0.97); }
.lp-ink { background: var(--lp-ink); color: #fff; }
.lp-line { background: rgba(0,0,0,.05); color: var(--lp-ink); }
.lp-lg { min-height: 52px; padding: 0 26px; font-size: 1.0625rem; }
.lp-sm { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
.lp-block { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .lp-ink:hover { background: #3A3A37; }
  .lp-line:hover { background-image: linear-gradient(rgba(0,0,0,.06), rgba(0,0,0,.06)); }
}
.link-arrow { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--lp-display); font-weight: 700; color: var(--lp-brand); text-decoration: none; }
.link-arrow .ic { transition: transform 200ms var(--lp-ease); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover .ic { transform: translateX(3px); } .link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; } }

/* ---------- Aktionsleiste (aus landing.js) ---------- */
.promo-bar { background: var(--lp-ink); color: #fff; }
.promo-bar-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; min-height: 44px; padding: 8px var(--lp-gut); text-decoration: none; font-size: 0.9375rem; text-align: center; }
.promo-text { font-weight: 600; }
.promo-meta { color: var(--lp-on-dark-2); }
.promo-meta:empty { display: none; }
.promo-cta { color: var(--lp-caramel); font-family: var(--lp-display); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.promo-bar-in:focus-visible { outline-color: var(--lp-caramel); outline-offset: -3px; }

/* ---------- Kopfzeile ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
.nav.scrolled { border-bottom-color: var(--lp-line); }
.nav-in { display: flex; align-items: center; gap: 16px; height: 64px; max-width: calc(var(--lp-wrap) + 2 * var(--lp-gut)); margin-inline: auto; padding-inline: var(--lp-gut); }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--lp-ink); text-decoration: none; min-height: 44px; }
.brand .pl-mark { width: 26px; height: 26px; }
.brand .pl-word { height: 20px; width: auto; }
.nav-links { display: none; gap: 4px; margin-inline: auto; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--lp-btn-r); text-decoration: none; font-family: var(--lp-display); font-weight: 600; font-size: 0.9875rem; color: var(--lp-ink-2); transition: color 150ms ease, background-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--lp-ink); background: var(--lp-hover); } }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-login { display: none; align-items: center; min-height: 44px; padding: 0 12px; font-family: var(--lp-display); font-weight: 700; text-decoration: none; color: var(--lp-ink); }
.nav-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--lp-btn-r); border: 0; background: rgba(0,0,0,.05); color: var(--lp-ink); cursor: pointer; }
.nav-toggle[aria-expanded="true"] { background: rgba(0,0,0,.10); }
.nav-menu { border-top: 1px solid var(--lp-line); background: #fff; }
.nav-menu nav { display: grid; padding: 8px var(--lp-gut) 16px; }
.nav-menu a { display: flex; align-items: center; min-height: 48px; font-family: var(--lp-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; text-decoration: none; border-bottom: 1px solid var(--lp-line); }
.nav-menu a:last-child { border-bottom: 0; }
@media (max-width: 379px) { .brand .pl-word { display: none; } }
@media (min-width: 1140px) {
  .nav-links { display: flex; }
  .nav-login { display: inline-flex; }
  .nav-toggle, .nav-menu { display: none !important; }
  .nav-actions { margin-left: 0; }
}

/* ---------- Abschnitte ---------- */
.sec { padding-block: clamp(72px, 9vw, 128px); }
/* Onepage-Stil: graue (und die dunkle) Abschnitte als gerundete Flächen mit etwas Abstand zum Fensterrand.
 * Kein overflow: hidden (sticky Tour-Karte in der Demo bleibt intakt); .dark schneidet selbst ab. */
.price-t, .book, .demo-sec, .how, .dark { margin-inline: var(--lp-inset); border-radius: var(--lp-sec-r); }
.book + .demo-sec { margin-top: var(--lp-inset); } /* zwei graue Flächen direkt untereinander: kleine Fuge */
.sec-head { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 48px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.label { font-family: var(--lp-display); font-weight: 700; font-size: 1rem; color: var(--lp-brand); margin-bottom: 14px; letter-spacing: -0.01em; }
h2 { font-size: clamp(2.125rem, 1.35rem + 2.9vw, 3.75rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; }
h3 { font-size: 1.25rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.lead { margin-top: 16px; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); color: var(--lp-ink-2); max-width: 40rem; }
.sec-head.center .lead { margin-inline: auto; }
.ticks { display: grid; gap: 12px; margin-top: 24px; }
.ticks li { display: flex; gap: 12px; color: var(--lp-ink-2); }
.ticks b { color: var(--lp-ink); font-weight: 700; }
.ticks .ic { margin-top: 2px; color: var(--lp-free); stroke-width: 2.25; }
.fine { margin-top: 20px; font-size: 0.9375rem; color: var(--lp-ink-2); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(40px, 7vw, 88px); position: relative; }
.hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 1rem + 5.4vw, 5.75rem); line-height: 0.96; letter-spacing: -0.035em; font-weight: 700; max-width: 19ch; hyphens: manual; }
.hero-sub { margin-top: 22px; max-width: 34rem; font-size: clamp(1.0625rem, 0.98rem + 0.45vw, 1.3125rem); color: var(--lp-ink-2); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 32px; }
.hero-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 0.9375rem; color: var(--lp-ink-2); }
.hero-note .ic { width: 18px; height: 18px; color: var(--lp-free); stroke-width: 2.25; }
.hero { isolation: isolate; }
@media (max-width: 479px) { .cta-row .lp-btn { flex: 1 1 100%; } }

/* Geräterahmen (Doppelrand) */
.shot { margin: 0; padding: 8px; border-radius: 28px; background: var(--lp-sand); box-shadow: var(--lp-shadow-lg); }
.shot-in { border-radius: 21px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--lp-line); }
.shot-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #F7F7F7; border-bottom: 1px solid var(--lp-line); }
.shot-bar i { width: 11px; height: 11px; border-radius: 50%; background: #D6D5D5; }
.shot-bar span { margin-inline: auto; transform: translateX(-24px); font-size: 12.5px; color: var(--lp-ink-2); background: #fff; border: 1px solid var(--lp-line); border-radius: 999px; padding: 2px 16px; }

/* ---------- App-Nachbau (nah an ui/app: Heute am Computer) ---------- */
.app { display: grid; grid-template-columns: 1fr; font-size: 13px; line-height: 1.4; color: var(--lp-ink); text-align: left; background: #fff; }
.app-side { display: none; flex-direction: column; gap: 2px; padding: 14px 10px; background: var(--lp-sand); border-right: 1px solid var(--lp-line); }
/* Menü-Kästchen wie in der App (ui/app/app.css): neutrales Kästchen, aktiv braun mit weißem Symbol, Zeile weiß, Schrift 600 */
.app-side > span { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 6px; border-radius: 8px; color: var(--lp-ink); font-size: 12.5px; }
.app-side .ic { width: 24px; height: 24px; padding: 4px; border-radius: 7px; color: var(--lp-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--lp-line); }
.app-side .is-on { background: #fff; color: var(--lp-ink); font-weight: 600; }
.app-side .is-on .ic { color: #fff; background: var(--lp-brand); box-shadow: none; }
.app-side .app-logo { height: auto; padding: 2px 8px 10px; gap: 8px; font-family: var(--lp-display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; color: var(--lp-ink); }
.app-logo svg { width: 24px; height: 24px; }
.app-side .app-tenant { height: auto; padding: 8px; margin-bottom: 8px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--lp-line); color: var(--lp-ink); font-weight: 600; }
.app-tenant i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--lp-ink); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; flex: none; }
.app-tenant small { display: block; font-weight: 400; color: #63636A; font-size: 11px; }
.app-col { position: relative; min-width: 0; }
.app-top { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; border-bottom: 1px solid var(--lp-line); background: rgba(255,255,255,.92); }
.app-h1 { font-family: var(--lp-display); font-weight: 700; font-size: 20px; letter-spacing: -0.025em; margin-right: 4px; }
.app-search { display: none; align-items: center; gap: 8px; flex: 1; max-width: 340px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid #D6D5D5; background: #fff; color: #63636A; font-size: 12px; white-space: nowrap; overflow: hidden; }
.app-search .ic { width: 15px; height: 15px; }
.app-top .ui-btn-line { margin-left: auto; }
.ui-btn { display: inline-flex; align-items: center; gap: 6px; justify-content: center; white-space: nowrap; height: 32px; padding: 0 11px; border-radius: 6px; background: var(--lp-ink); color: #fff; font-weight: 600; font-size: 12px; border: 1px solid var(--lp-ink); }
.ui-btn .ic { width: 15px; height: 15px; }
.ui-btn-line { background: #F2F2F2; color: var(--lp-ink); border-color: transparent; }
.ui-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.app-main { display: grid; gap: 16px; min-width: 0; padding: 16px; }
.days-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #63636A; font-size: 12px; }
.days-tools { display: none; gap: 4px; }
.days-tools i { font-style: normal; padding: 4px 9px; border-radius: 6px; border: 0; background: #F2F2F2; color: var(--lp-ink); font-weight: 600; font-size: 11.5px; }
/* Tageskarten mit Wetter (wie ui/app „Heute“, Umbau 12.10.2026) */
.days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.day { display: grid; align-content: start; gap: 1px; min-height: 104px; padding: 10px 14px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--lp-line); }
.day-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.day-top b { font-size: 14px; }
.day-wx { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.day-wx .ic { width: 15px; height: 15px; color: var(--lp-brand); }
.day small { font-size: 12px; color: #63636A; margin-bottom: 6px; }
.day-n { font-size: 12px; color: #63636A; }
.day-n em { font-style: normal; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--lp-ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
.day.is-on { background: var(--lp-ink); border-color: var(--lp-ink); color: #F4F3F3; }
.day.is-on small, .day.is-on .day-n { color: #D6D5D5; }
.day.is-on em, .day.is-on .day-wx, .day.is-on .day-wx .ic { color: #fff; }
.day-x { background: var(--lp-sand); border-color: var(--lp-sand); box-shadow: none; display: none; }
.day:nth-child(n+3) { display: none; }
.app-h2row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 16px; }
.app-date-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.app-h2 { font-family: var(--lp-display); font-weight: 700; font-size: 22px; letter-spacing: -0.025em; }
.wx-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 1px solid #EAE9E9; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wx-chip .ic { width: 16px; height: 16px; color: var(--lp-brand); }
.app-sum { color: #63636A; font-size: 13px; margin-top: 2px; }
.app-acts { display: none; gap: 8px; }
.pill { --dot: .55em; --dot-x: .75em; display: inline-flex; align-items: center; gap: .45em; height: 20px; padding: 0 .75em; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap; }
.pill::before { content: ""; width: var(--dot); height: var(--dot); border-radius: 50%; background: currentColor; }
.p-res { color: var(--lp-res); background: var(--lp-res-bg); }
.p-seat { color: var(--lp-seat); background: var(--lp-seat-bg); }
.p-free { color: var(--lp-free); background: var(--lp-free-bg); }
.p-req { color: var(--lp-soon); background: var(--lp-soon-bg); box-shadow: inset 0 0 0 1px rgba(217,142,0,.4); }
.p-req::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.p-wait { color: var(--lp-blocked); background: var(--lp-blocked-bg); }
/* Tische jetzt: Umschalter Liste | Tischplan, Kacheln als Reihe (Karussell, letzte Kachel angeschnitten) */
.hx-card { display: grid; gap: 10px; min-width: 0; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--lp-line); overflow: hidden; }
.hx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hx-h { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.015em; }
.hx-sum { margin-top: 1px; font-size: 12px; color: #63636A; font-variant-numeric: tabular-nums; }
.hx-sum b { color: var(--lp-free); font-weight: 700; }
.hx-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.hx-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--lp-sand); }
.hx-seg span { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 600; color: #63636A; }
.hx-seg .is-on { background: #fff; color: var(--lp-ink); box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.hx-seg .ic { width: 14px; height: 14px; }
.hx-max { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #63636A; }
.hx-max .ic { width: 16px; height: 16px; }
.hx-room { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; }
.hx-room span { font-weight: 400; color: #63636A; font-size: 11.5px; }
.hx-car { position: relative; margin-right: -14px; overflow: hidden; }
.hx-car::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40px; background: linear-gradient(to left, #fff 10%, rgba(255,255,255,0)); pointer-events: none; }
.hx-chips { display: flex; gap: 8px; width: max-content; }
.hx-chip { --c: var(--lp-ink-2); position: relative; flex: none; width: 152px; display: grid; gap: 3px; padding: 8px 10px 8px 14px; border-radius: 11px; border: 1px solid #EAE9E9; background: #F7F7F7; transition: background-color 500ms ease, border-color 500ms ease; }
.hx-chip::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 3px 3px 0; background: var(--c); }
.hx-chip-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.hx-chip-top b { font-size: 15px; font-weight: 700; color: var(--lp-ink); }
.hx-chip-top small { font-size: 11.5px; color: #63636A; }
.hx-seat .hx-chip-top small { color: var(--lp-seat); } /* auf der Lila-Fläche in der Statusfarbe */
.hx-line { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--c); white-space: nowrap; }
.hx-line .ic { width: 13px; height: 13px; stroke-width: 2; }
.hx-free { --c: var(--lp-free); background: var(--lp-free-bg); border-color: rgba(46,158,85,.35); }
.hx-soon { --c: var(--lp-soon); background: var(--lp-soon-bg); border-color: rgba(217,142,0,.4); }
.hx-res { --c: var(--lp-res); background: var(--lp-res-bg); border-color: rgba(184,92,56,.35); }
.hx-seat { --c: var(--lp-seat); background: var(--lp-seat-bg); border-color: rgba(123,92,224,.35); }
/* Reservierungen heute: volle Breite, Knöpfe direkt an der Zeile */
.hx-arr { display: grid; gap: 8px; }
.hx-arr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hx-arr-head span { font-size: 12px; color: #63636A; }
.hx-group { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; align-items: start; }
.hx-t { padding-top: 13px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hx-row { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px 8px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--lp-line); transition: background-color 600ms ease; }
.hx-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.hx-l1 { display: flex; align-items: center; gap: 8px; }
.hx-l1 b { font-size: 14px; }
.hx-l2 { display: flex; gap: 12px; min-width: 0; overflow: hidden; font-size: 12px; color: #63636A; white-space: nowrap; }
.hx-l2 span { display: inline-flex; align-items: center; gap: 4px; }
.hx-l2 .ic { width: 13px; height: 13px; }
.hx-acts { display: flex; gap: 6px; flex: none; }
.hx-acts .ui-btn { height: 32px; }
.ui-btn-warn { background: #FDECEA; color: #D70015; border-color: transparent; }
.ui-btn-quiet { background: transparent; border-color: transparent; color: #63636A; }
.hx-row.is-flash, .hx-group.is-flash .hx-row { background: var(--lp-sand-2); }
.hx-g-more { display: none; }
@media (min-width: 640px) {
  .days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .day:nth-child(3) { display: grid; }
  .app-main { padding: 20px; }
  .days-tools { display: inline-flex; }
}
@media (min-width: 900px) {
  .days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .day:nth-child(n+3), .day-x { display: grid; }
  .app-acts { display: inline-flex; }
  .app-search { display: inline-flex; }
  .hx-g-more { display: grid; }
}
@media (min-width: 1100px) {
  .app { grid-template-columns: 200px minmax(0, 1fr); }
  .app-side { display: flex; }
}
@media (max-width: 759px) {
  .hx-row { flex-wrap: wrap; row-gap: 8px; }
  .hx-main { flex-basis: 100%; }
  .hx-acts { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .hx-acts .ui-btn { padding: 0 6px; }
  .hx-chip { width: 140px; }
}
@media (max-width: 479px) {
  .app-top .ui-btn-line { display: none; }
  .app-top .ui-btn:last-child { margin-left: auto; }
  .app-main { gap: 14px; padding: 14px 12px; }
  .hx-head { flex-wrap: wrap; gap: 8px; }
  .hx-tools, .hx-seg { width: 100%; }
  .hx-seg span { flex: 1; justify-content: center; }
  .hx-chip { width: 122px; padding-right: 8px; overflow: hidden; }
  .hx-line { font-size: 11px; }
  .hx-card { padding: 12px; }
  .hx-car { margin-right: -12px; }
  .hx-group { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .hx-t { padding-top: 0; font-size: 13px; }
  .hx-seg span { padding: 0 8px; }
  .hx-max { display: none; }
  .hx-acts .ui-btn .ic { display: none; }
  .app-h2 { font-size: 19px; }
}

/* Tischplan-SVG */
.plan { display: block; width: 100%; height: auto; font-family: var(--lp-display); }
.plan .room { fill: #FFFFFF; stroke: var(--lp-line); stroke-width: 2; }
.plan .win { fill: none; stroke: #A9C6DC; stroke-width: 5; stroke-linecap: round; }
.plan .ch { fill: #D6D5D5; stroke: #85858C; stroke-width: 1; }
.plan .stools circle { fill: #EAE9E9; }
.plan .tb { stroke-width: 2.5; transition: fill 400ms ease, stroke 400ms ease; }
.plan .tn { font-size: 17px; font-weight: 700; text-anchor: middle; fill: var(--lp-ink) !important; }
.plan .ts { font-size: 10px; font-weight: 600; text-anchor: middle; font-family: var(--lp-display); transition: fill 400ms ease; }
.plan .bar rect { fill: #EAE9E9; }
.plan .bar text { font-size: 13px; font-weight: 600; fill: var(--lp-ink-2); text-anchor: middle; }
.t-free .tb { fill: var(--lp-free-bg); stroke: var(--lp-free-edge); } .t-free .tn, .t-free .ts { fill: var(--lp-free); }
.t-res .tb { fill: var(--lp-res-bg); stroke: var(--lp-res-edge); } .t-res .tn, .t-res .ts { fill: var(--lp-res); }
.t-seat .tb { fill: var(--lp-seat-bg); stroke: var(--lp-seat-edge); } .t-seat .tn, .t-seat .ts { fill: var(--lp-seat); }
.t-soon .tb { fill: var(--lp-soon-bg); stroke: var(--lp-soon-edge); } .t-soon .tn, .t-soon .ts { fill: var(--lp-soon); }
.plan .t .tb { transform-box: fill-box; transform-origin: center; }
.plan .t-held .tb { fill: var(--lp-soon-bg); stroke: var(--lp-soon-edge); stroke-dasharray: 3 4; }
.plan .t-held .ts { fill: var(--lp-soon); }
/* Freie Tische pulsieren sanft: Ring dehnt sich aus und blendet aus (nur transform/opacity) */
.plan .pr { fill: none; stroke: var(--lp-free-edge); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .plan .t-free .pr { animation: ringPulse 2.2s cubic-bezier(0.23, 1, 0.32, 1) infinite; animation-delay: var(--pd, 0s); }
  .st-free, .p-free, .tj-free { position: relative; }
  .st-free::after, .p-free::after { content: ""; position: absolute; left: var(--dot-x); top: 50%; width: var(--dot); height: var(--dot); margin-top: calc(var(--dot) / -2); border-radius: 50%; background: var(--lp-free); animation: dotPulse 2s cubic-bezier(0.23, 1, 0.32, 1) infinite; animation-delay: var(--pd, 0s); }
}
@keyframes ringPulse { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.32); } }
@keyframes dotPulse { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
.plan .t.pulse .tb { animation: tPulse 900ms var(--lp-ease); }
@keyframes tPulse { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Toast im Hero */
.toast { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--lp-ink); color: #fff; box-shadow: var(--lp-shadow); opacity: 0; transform: translateY(10px) scale(0.98); pointer-events: none; transition: opacity 300ms var(--lp-ease), transform 400ms var(--lp-ease); }
.toast.is-in { opacity: 1; transform: none; }
.toast .ic { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--lp-free); color: #fff; stroke-width: 2.25; }
.toast b { display: block; font-family: var(--lp-display); font-weight: 700; font-size: 14px; }
.toast span span { font-size: 12.5px; color: #D6D5D5; }

@media (min-width: 640px) { .toast { left: auto; right: 20px; bottom: 20px; max-width: 340px; } }

/* Story: Platz für Porträt 4:5 */
.story-photo { aspect-ratio: 4 / 5; }
.story-photo img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Funktionen-Umschalter ---------- */
.tabs-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--lp-gut)) 32px; padding: 4px var(--lp-gut); scrollbar-width: none; overscroll-behavior-x: contain; }
.tabs-scroll::-webkit-scrollbar { display: none; }
.tabs { display: flex; gap: 4px; width: max-content; margin-inline: auto; padding: 5px; border-radius: 999px; background: var(--lp-sand); }
.tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--lp-ink-2); font-family: var(--lp-display); font-weight: 700; font-size: 1rem; cursor: pointer; white-space: nowrap; user-select: none; -webkit-user-select: none; transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.tab .ic { width: 18px; height: 18px; }
.tab[aria-selected="true"] { background: #fff; color: var(--lp-ink); box-shadow: 0 1px 3px rgba(0,0,0,.10); }
@media (hover: hover) and (pointer: fine) { .tab[aria-selected="false"]:hover { background: rgba(0,0,0,.04); color: var(--lp-ink); } }
.panel { display: grid; gap: 32px; align-items: center; }
.panel[hidden] { display: none; }
.panel:focus-visible { outline-offset: 8px; border-radius: 20px; }
.panel.is-entering { animation: panelIn 340ms var(--lp-ease) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.panel-copy h3 { font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; }
.panel-copy > p { margin-top: 14px; color: var(--lp-ink-2); font-size: 1.0625rem; max-width: 34rem; }
.panel-vis { display: grid; gap: 16px; padding: clamp(16px, 3vw, 36px); border-radius: 28px; background: var(--lp-sand); min-width: 0; }
@media (min-width: 960px) { .panel { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; } .panel-vis { min-height: 440px; align-content: center; } }

.moves li, .wait li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--lp-line); }
.moves li:last-child, .wait li:last-child { border-bottom: 0; }
.mv-who b { display: block; font-size: 14px; }
.mv-who small { color: var(--lp-ink-2); font-size: 12px; }
.mv { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.mv i { font-style: normal; padding: 3px 8px; border-radius: 6px; background: var(--lp-sand); color: var(--lp-ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.mv i.to { background: var(--lp-free-bg); color: var(--lp-free); }
.mv .ic { width: 15px; height: 15px; color: var(--lp-ink-2); }
.opt-gain { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--lp-free-bg); color: var(--lp-free); }
.opt-gain .ic { width: 18px; height: 18px; margin-top: 1px; stroke-width: 2.25; }
.opt-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tools span { padding: 5px 10px; border-radius: 6px; border: 0; background: rgba(0,0,0,.05); font-size: 12px; font-weight: 600; color: var(--lp-ink-2); }
.tools .is-on { background: var(--lp-ink); border-color: var(--lp-ink); color: #fff; }
.plan-edit { border-radius: 10px; border: 1px solid var(--lp-line); }
.plan-edit .canvas { fill: url(#dots); }
.plan-edit pattern circle { fill: #D6D5D5; }
.plan-edit .wall { fill: none; stroke: var(--lp-ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.plan-edit .win { stroke-width: 6; }
.plan-edit .et circle, .plan-edit .et rect { fill: #fff; stroke: #85858C; stroke-width: 1.75; }
.plan-edit .et text { fill: var(--lp-ink); font-size: 16px; font-weight: 700; text-anchor: middle; }
.plan-edit .et-sel rect { fill: var(--lp-sand-2); stroke: var(--lp-brand); }
.plan-edit .sel { fill: none; stroke: var(--lp-brand); stroke-width: 1.5; stroke-dasharray: 5 4; }
.plan-edit .hdl { fill: #fff; stroke: var(--lp-brand); stroke-width: 1.5; }
.plan-edit .ebar rect { fill: #EAE9E9; }
.plan-edit .ebar text { fill: var(--lp-ink-2); font-size: 13px; font-weight: 600; text-anchor: middle; }
.inspector, .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.inspector span, .kpis span { padding: 8px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--lp-line); }
.inspector small, .kpis small { display: block; font-size: 11.5px; color: var(--lp-ink-2); }
.inspector b { font-size: 14px; }
.kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.kpis b { font-family: var(--lp-display); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
@media (min-width: 560px) { .inspector { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.funnel { display: grid; gap: 8px; }
.funnel li { display: grid; grid-template-columns: 112px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 12.5px; }
.funnel span { color: var(--lp-ink-2); }
.funnel i { height: 10px; border-radius: 5px; background: var(--lp-brand); width: var(--w); transform-origin: left; }
.funnel b { text-align: right; font-variant-numeric: tabular-nums; }
.panel.is-entering .funnel i { animation: barIn 700ms var(--lp-ease) both; }
@keyframes barIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mail-from { display: flex; align-items: center; gap: 8px; color: var(--lp-ink-2); font-size: 12.5px; font-weight: 600; }
.mail-from .ic { width: 18px; height: 18px; color: var(--lp-brand); }
.mail-logo { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lp-brand); color: #fff; font-family: var(--lp-display); font-weight: 700; font-size: 11px; flex: none; }
.mail-h { margin-top: 10px; font-family: var(--lp-display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.mail-p { margin: 4px 0 12px; color: var(--lp-ink-2); }
@media (min-width: 960px) {
  .panel-vis .mail { justify-self: end; width: 80%; margin-top: -28px; }
  .panel-vis .wait { width: 92%; }
}

/* ---------- Online-Buchung ---------- */
.book { background: var(--lp-sand); }
.book-grid { display: grid; gap: 48px; align-items: center; }
.channels { margin-top: 28px; }
.channels li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--lp-line-2); }
.channels h3 { font-size: 1.0625rem; }
.channels p { color: var(--lp-ink-2); margin-top: 2px; }
.ch-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #fff; color: var(--lp-brand); flex: none; box-shadow: inset 0 0 0 1px var(--lp-line); }
.langs { margin: 8px 0 12px; color: var(--lp-ink-2); font-size: 0.9375rem; }
.book-vis { position: relative; display: grid; justify-items: center; gap: 16px; padding: 24px 0; }

.phone { position: relative; z-index: 1; width: min(300px, 100%); padding: 9px; border-radius: 44px; background: #1D1D1B; box-shadow: var(--lp-shadow-lg); }
.phone-in { border-radius: 36px; background: #fff; padding: 26px 18px 20px; font-size: 13.5px; }
.bk-head { display: grid; justify-items: center; text-align: center; gap: 2px; }
.bk-head .mail-logo { width: 42px; height: 42px; font-size: 14px; margin-bottom: 6px; }
.bk-head b { font-family: var(--lp-display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.bk-head small { color: var(--lp-ink-2); font-size: 12px; }
.bk-steps { display: flex; gap: 5px; margin: 18px 0 16px; }
.bk-steps i { flex: 1; height: 4px; border-radius: 2px; background: #EAE9E9; }
.bk-steps .done { background: var(--lp-brand); }
.bk-steps .cur { background: linear-gradient(90deg, var(--lp-brand) 50%, #EAE9E9 50%); }
.bk-q { font-family: var(--lp-display); font-weight: 700; font-size: 21px; letter-spacing: -0.025em; }
.bk-meta { color: var(--lp-ink-2); font-size: 12.5px; }
.bk-grp { margin-top: 14px; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--lp-ink-2); }
.bk-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bk-times span { display: grid; place-items: center; height: 38px; border: 1px solid var(--lp-line-2); border-radius: 8px; font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.bk-times .off { background: var(--lp-sand); color: var(--lp-ink-2); text-decoration: line-through; border-color: var(--lp-sand); }
.bk-times .on { background: var(--lp-brand); border-color: var(--lp-brand); color: #fff; }
.bk-wait { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--lp-brand); font-size: 12.5px; font-weight: 600; }
.bk-wait .ic { width: 16px; height: 16px; }
.bk-cta { display: grid; place-items: center; height: 46px; margin-top: 14px; border-radius: 10px; background: var(--lp-ink); color: #fff; font-weight: 700; }
.bk-mail { position: relative; z-index: 2; width: min(300px, 100%); }
.bk-mail .mail-p { margin-bottom: 0; }
@media (min-width: 1024px) {
  .book-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
  .bk-mail { position: absolute; right: 0; bottom: 64px; width: 260px; }
}

/* ---------- Story (dunkle Fläche) ---------- */
.dark { position: relative; overflow: hidden; background: var(--lp-esp); color: var(--lp-on-dark); }
.dark h2, .dark h3 { color: #FFFFFF; }
.dark .label { color: var(--lp-caramel); }
.dark :focus-visible { outline-color: var(--lp-caramel); }
.dark-mark { position: absolute; width: 640px; height: 640px; right: -220px; top: -200px; color: rgba(255,255,255,.06); pointer-events: none; }
.story { position: relative; display: grid; gap: 40px; align-items: center; }
.story-photo { max-width: 460px; width: 100%; border-radius: 24px; background: #2B2B29; box-shadow: none; }
.story-copy h2 { font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4rem); }
.story-copy > p:not(.label):not(.sign) { margin-top: 20px; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); color: var(--lp-on-dark-2); max-width: 36rem; }
.sign { margin-top: 28px; display: grid; gap: 2px; color: var(--lp-on-dark-2); font-size: 0.9375rem; }
.sign::before { content: ""; width: 32px; height: 2px; border-radius: 1px; background: var(--lp-caramel); margin-bottom: 12px; }
.sign b { font-family: var(--lp-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: #FFFFFF; }
.principles { position: relative; display: grid; gap: 28px; margin-top: clamp(48px, 7vw, 88px); padding-top: 36px; border-top: 1px solid rgba(255,255,255,.14); }
.principles .ic { width: 28px; height: 28px; color: var(--lp-caramel); margin-bottom: 14px; }
.principles p { margin-top: 8px; color: var(--lp-on-dark-2); }
@media (min-width: 768px) { .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
@media (min-width: 960px) { .story { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; } }

/* ---------- Preise ---------- */
/* Ein Tarif (seit 13.10.2026): eine Karte, links Preis und Knopf, rechts alle Funktionen */
.plan-box { display: flex; flex-direction: column; border-radius: 28px; padding: clamp(24px, 3vw, 40px); background: #fff; }
.plan-one { max-width: 980px; margin-inline: auto; border: 2px solid var(--lp-ink); }
.pb-head h3 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.03em; }
.pb-for { margin-top: 6px; color: var(--lp-ink-2); text-wrap: pretty; }
.pb-price { display: flex; align-items: flex-end; gap: 12px; margin: 22px 0 22px; }
.pb-price b { font-family: var(--lp-display); font-weight: 700; font-size: clamp(3.25rem, 2.4rem + 2.4vw, 4.5rem); line-height: 0.9; letter-spacing: -0.04em; }
.pb-price span { font-size: 0.875rem; color: var(--lp-ink-2); line-height: 1.3; padding-bottom: 4px; }
.pb-logins { display: flex; align-items: flex-start; gap: 8px; margin: -8px 0 20px; font-size: 0.9375rem; color: var(--lp-ink-2); line-height: 1.4; }
.pb-logins .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--lp-free); stroke-width: 2.25; }
.pb-note { margin-top: 12px; font-size: 0.875rem; color: var(--lp-ink-2); text-align: center; }
.pb-body { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--lp-line); }
.pb-sub { font-family: var(--lp-display); font-weight: 700; }
.pb-list { display: grid; gap: 10px; margin-top: 14px; }
.pb-list li { display: flex; gap: 10px; color: var(--lp-ink); font-size: 0.96875rem; }
.pb-list .ic { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--lp-free); stroke-width: 2.25; }
.pb-later { display: flex; gap: 10px; margin-top: 22px; padding: 12px 14px; border-radius: 14px; background: var(--lp-sand); color: var(--lp-ink-2); font-size: 0.9375rem; line-height: 1.45; }
.pb-later b { color: var(--lp-ink); font-weight: 700; }
.pb-later .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--lp-brand); }
@media (min-width: 640px) { .pb-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
@media (min-width: 900px) {
  .plan-one { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.6fr); column-gap: clamp(32px, 4vw, 56px); align-items: start; }
  .plan-one .pb-body { margin-top: 0; padding-top: 0; padding-left: clamp(32px, 4vw, 56px); border-top: 0; border-left: 1px solid var(--lp-line); }
}

/* ---------- So geht's ---------- */
.how { background: var(--lp-sand); }
.steps { position: relative; display: grid; gap: 32px; counter-reset: s; }
.steps li { position: relative; }
.step-n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--lp-ink); color: #fff; font-family: var(--lp-display); font-weight: 700; font-size: 1.25rem; margin-bottom: 18px; position: relative; z-index: 1; box-shadow: 0 0 0 8px var(--lp-sand); }
.steps h3 { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.03em; }
.steps p { margin-top: 8px; color: var(--lp-ink-2); max-width: 22rem; }
@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .steps::before { content: ""; position: absolute; top: 24px; left: 24px; right: 10%; border-top: 2px dashed var(--lp-line-2); }
}

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 32px; }
.faq .sec-head .lp-btn { margin-top: 24px; }
.faq-list { border-top: 1px solid var(--lp-line); }
.faq details { border-bottom: 1px solid var(--lp-line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; font-family: var(--lp-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline-offset: 2px; }
.pm { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--lp-line-2); flex: none; transition: background-color 200ms ease, border-color 200ms ease; }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: var(--lp-ink); transition: transform 240ms var(--lp-ease); }
.pm::after { transform: rotate(90deg); }
details[open] .pm { background: var(--lp-ink); border-color: var(--lp-ink); }
details[open] .pm::before, details[open] .pm::after { background: #fff; }
details[open] .pm::after { transform: rotate(0deg); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover .pm { border-color: var(--lp-ink); } }
.faq-a { padding: 0 48px 22px 0; color: var(--lp-ink-2); max-width: 62ch; }
details[open] .faq-a { animation: faqIn 260ms var(--lp-ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (min-width: 960px) { .faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 64px; } .faq .sec-head { position: sticky; top: 96px; align-self: start; } }

/* ---------- Schluss ---------- */
.end-card { display: grid; gap: 32px; padding: clamp(24px, 5vw, 64px); border-radius: var(--lp-sec-r); background: var(--lp-sand); }
.end-copy h2 { font-size: clamp(2.25rem, 1.3rem + 3.2vw, 3.75rem); }
.end-copy .cta-row { justify-content: flex-start; }
.end-copy .lead { color: var(--lp-ink-2); }
.end-note { margin-top: 24px; font-size: 0.9375rem; color: var(--lp-ink-2); }
.end-book { border-radius: 20px; overflow: hidden; background: #fff; min-width: 0; }
.end-book:empty, .end-book > div:empty { min-height: 0; }
@media (min-width: 1024px) { .end-card { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; } }

/* ---------- Fußzeile ---------- */
.foot { border-top: 1px solid var(--lp-line); padding: 64px 0 calc(32px + env(safe-area-inset-bottom, 0px)); }
.foot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.foot-brand { grid-column: 1 / -1; }
.foot-brand p { margin-top: 10px; color: var(--lp-ink-2); max-width: 22rem; }
.foot-brand .pl-mark { width: 28px; height: 28px; }
.foot-brand .pl-word { height: 21px; width: auto; }
.foot-col { display: grid; align-content: start; }
.foot-col h2 { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; }
.foot-col a, .foot-col button { display: flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--lp-ink-2); text-decoration: none; font-size: 0.9375rem; text-align: left; cursor: pointer; }
.foot-col [hidden] { display: none; } /* „Cookie-Einstellungen“ nur bei aktivem Tracking (shared/tracking.js) */
@media (hover: hover) and (pointer: fine) { .foot-col a:hover, .foot-col button:hover { color: var(--lp-ink); text-decoration: underline; text-underline-offset: 3px; } }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--lp-line); font-size: 0.875rem; color: var(--lp-ink-2); }
@media (min-width: 820px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } .foot-brand { grid-column: auto; } }

.free h2 { font-size: clamp(2.5rem, 1.3rem + 4.4vw, 4.75rem); }
.h-sub { font-size: clamp(1.875rem, 1.3rem + 1.9vw, 2.75rem); font-weight: 700; letter-spacing: -0.035em; }

/* ---------- Hero: Kippen und schwebende Karten ---------- */
.tilt { position: relative; transform-origin: 50% 0; will-change: transform; }
.float-card { position: absolute; z-index: 3; display: none; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; background: #fff; box-shadow: var(--lp-shadow); font-size: 13px; line-height: 1.35; max-width: 270px; }
.float-card .ic { width: 36px; height: 36px; padding: 8px; border-radius: 8px; background: var(--lp-sand-2); color: var(--lp-brand); }
.float-card b { display: block; font-family: var(--lp-display); font-weight: 700; font-size: 14.5px; }
.float-card small { color: var(--lp-ink-2); font-size: 12.5px; }
.float-a { left: -28px; top: 64%; }
.float-b { right: -28px; top: 30%; }
@media (min-width: 1100px) { .float-card { display: flex; } }
.float-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: var(--lp-shadow); font-size: 13px; }
.float-chip b { font-family: var(--lp-display); font-weight: 700; }
.float-chip small { color: var(--lp-ink-2); }
.device { position: relative; }
.float-tab { right: 6%; top: 10%; }
@media (max-width: 639px) { .float-chip { padding: 8px 10px; font-size: 12px; } }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-copy > * { animation: rise 700ms var(--lp-ease) both; }
  .js .hero-copy > :nth-child(2) { animation-delay: 60ms; }
  .js .hero-copy > :nth-child(3) { animation-delay: 120ms; }
  .js .hero-copy > :nth-child(4) { animation-delay: 180ms; }
  .js .hero-shot { animation: riseShot 1000ms var(--lp-ease) 160ms both; }
  .js .rv { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--lp-ease), transform 800ms var(--lp-ease); transition-delay: var(--rd, 0ms); }
  .js .rv.in { opacity: 1; transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes riseShot { from { opacity: 0; transform: translateY(40px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 200ms ease; transform: none; }
  .panel.is-entering { animation: fadeOnly 200ms ease both; }
  .fd-list li.is-new { animation: fadeOnly 200ms ease both; }
}
@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 479px) { .app-date { display: none; } }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--lp-ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; border: 2px solid; }
.lg-free { background: var(--lp-free-bg); border-color: var(--lp-free-edge) !important; }
.lg-res { background: var(--lp-res-bg); border-color: var(--lp-res) !important; }
.lg-seat { background: var(--lp-seat-bg); border-color: var(--lp-seat-edge) !important; }
.lg-soon { background: var(--lp-soon-bg); border-color: var(--lp-soon-edge) !important; }
.plan .ts { font-size: 8.5px; }
.lg-held { background: var(--lp-soon-bg); border-color: var(--lp-soon-edge) !important; border-style: dashed !important; }
.lg-blocked { background: var(--lp-blocked-bg); border-color: var(--lp-blocked) !important; border-style: dashed !important; }
.lg-x { background: var(--lp-sand); border-color: var(--lp-line-2) !important; }

/* ---------- Leistung: Endlos-Animationen außerhalb des Sichtfelds anhalten (landing.js setzt .anim-off) ---------- */
.anim-off *, .anim-off *::before, .anim-off *::after { animation-play-state: paused !important; }

/* Status-Chips (Bento, Warteliste usw.) */
.st { --dot: .52em; --dot-x: .78em; display: inline-flex; align-items: center; gap: .45em; height: 22px; padding: 0 .78em; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; font-style: normal; }
.st::before { content: ""; width: var(--dot); height: var(--dot); border-radius: 50%; background: currentColor; }
.st-free { color: var(--lp-free); background: var(--lp-free-bg); }
.st-res { color: var(--lp-res); background: var(--lp-res-bg); }
.st-seat { color: var(--lp-seat); background: var(--lp-seat-bg); }
.st-soon { color: var(--lp-soon); background: var(--lp-soon-bg); }

.hc-l1 { display: flex; align-items: center; gap: 8px; }
.hc-l1 b { font-size: 17px; }
.hc-free { margin: 2px 0 10px; color: var(--lp-free); font-weight: 600; font-size: 13px; }
.hit-card .ui-btn { height: 36px; font-size: 13px; }

/* Warteliste: Angebots-Mail auf einem kleinen Handy */
.mini-phone { justify-self: center; width: min(250px, 80%); aspect-ratio: 402 / 874; padding: 7px; border-radius: 40px; background: #1D1D1B; box-shadow: var(--lp-shadow); }
.mp-screen { position: relative; height: 100%; border-radius: 33px; background: #fff; padding: 34px 16px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; overflow: hidden; }
.mp-island, .ph-island { position: absolute; top: 9px; left: 50%; width: 30%; height: 20px; margin-left: -15%; border-radius: 12px; background: #000; }
.mp-bar { position: absolute; top: 10px; left: 22px; right: 22px; display: flex; justify-content: space-between; font-size: 11px; }
.mp-bar i, .ph-bar i { width: 18px; height: 9px; border-radius: 3px; border: 1.5px solid var(--lp-ink); }
.mp-from { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--lp-line); }
.mp-from b { display: block; font-size: 13px; }
.mp-from small { color: var(--lp-ink-2); font-size: 11px; }
.mp-subj { font-family: var(--lp-display); font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; }
.mp-text { color: var(--lp-ink-2); }
.mp-hold { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--lp-soon-bg); color: var(--lp-soon); font-weight: 600; }
.mp-hold .ic { width: 15px; height: 15px; flex: none; }
.mp-cta { display: grid; place-items: center; height: 40px; border-radius: 8px; background: var(--lp-ink); color: #fff; font-weight: 700; margin-top: auto; }
.mp-cta-line { margin-top: 0; background: #F2F2F2; color: var(--lp-ink); border: 0; }
@media (min-width: 960px) { #panel-warte .panel-vis { grid-template-columns: minmax(0, 1fr) 230px; align-items: center; } #panel-warte .mini-phone { width: 100%; } }

/* Buchung: Handy in iPhone-16-Pro-Proportionen (402 × 874) */
.phone { width: clamp(280px, 30vw, 360px); aspect-ratio: 402 / 874; padding: 9px; border-radius: 58px; }
.phone-in { position: relative; height: 100%; border-radius: 49px; display: flex; flex-direction: column; padding: 46px 20px 18px; }
.ph-bar { position: absolute; top: 14px; left: 30px; right: 30px; display: flex; justify-content: space-between; font-size: 12px; }
.ph-island { top: 11px; height: 26px; border-radius: 14px; }
.bk-back { margin-top: 2px; color: var(--lp-brand); font-weight: 600; font-size: 13px; }
.bk-times { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bk-times span { height: 44px; }
.bk-cta { margin-top: auto; }
.bk-lang { margin-top: 10px; text-align: center; font-size: 11px; color: var(--lp-ink-2); }
.ph-home { display: block; width: 36%; height: 5px; margin: 10px auto 0; border-radius: 3px; background: var(--lp-ink); }
.book-vis { padding: 0; }
@media (min-width: 1024px) { .bk-mail { right: -8px; bottom: 18%; } }

/* ---------- Hero: Abend-Schleife (landing.js „Hero: der Abend läuft“) ----------
 * Feste Listenhöhe (JS misst die Ausgangslage), neue Zeile schiebt per transform (FLIP), die letzte rutscht unten raus.
 * Rücksetzen: weiche Blende über [data-hero-fade]. Nur opacity/transform. */
.hx-list { display: grid; gap: 8px; overflow: hidden; padding-bottom: 2px; }
@media (max-width: 759px) { .hx-g-early { display: none; } }
.p-ns { color: var(--lp-blocked); background: var(--lp-blocked-bg); box-shadow: inset 0 0 0 1px var(--lp-line-2); }
.hx-row { transition: background-color 600ms ease, border-color 600ms ease; }
.hx-row.is-ns { background: var(--lp-hover); border-color: var(--lp-line); box-shadow: none; }
.hx-row.is-ns .hx-l1 b { color: var(--lp-ink-2); text-decoration: line-through; text-decoration-color: rgba(99,99,106,.5); text-decoration-thickness: 1.5px; }
.hx-chip.is-ping::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 2px var(--c); opacity: 0; pointer-events: none; animation: chipPing 900ms var(--lp-ease); }
@keyframes chipPing { 0% { opacity: .75; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06); } }
.hero-shot .dm-finger { z-index: 6; }
.hero-shot .ui-btn, .tf-card .ui-btn, .tfc-seg span { transition: transform 170ms var(--lp-ease), background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.hero-shot .is-autopress, .tf-card .is-autopress { transform: scale(0.95); }

/* ---------- Tisch finden: Fenster auf der schwebenden Karte (landing.js „Tisch finden“) ----------
 * Alle Ansichten liegen übereinander in einer Rasterzelle: die Karte ist so hoch wie die höchste Ansicht, nichts springt. */
.tf-card { display: grid; overflow: hidden; }
.tfc-view { grid-area: 1 / 1; display: grid; align-content: start; gap: 8px; min-width: 0; opacity: 0; visibility: hidden; transform: translateY(6px) scale(0.985); transform-origin: 50% 0; transition: opacity 180ms ease, transform 180ms var(--lp-ease), visibility 0s linear 180ms; }
.tf-card[data-view="now"] .tfc-now, .tf-card[data-view="form"] .tfc-form, .tf-card[data-view="result"] .tfc-res { opacity: 1; visibility: visible; transform: none; transition: opacity 260ms ease 60ms, transform 320ms var(--lp-ease) 60ms, visibility 0s; }
.tfc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tfc-head b { font-family: var(--lp-display); font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.tfc-head .tf-x { font-size: 15px; width: 26px; height: 26px; color: var(--lp-ink-2); }
.tfc-meta { font-size: 12px; color: var(--lp-ink-2); font-variant-numeric: tabular-nums; }
.tfc-list { display: grid; gap: 6px; }
.tfc-t { --c: var(--lp-ink-2); position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 34px; padding: 6px 10px 6px 14px; border-radius: 10px; border: 1px solid var(--lp-line); background: var(--lp-hover); font-size: 12.5px; transition: background-color 500ms ease, border-color 500ms ease; }
.tfc-t::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 4px; border-radius: 0 3px 3px 0; background: var(--c); }
.tfc-t b { font-size: 13.5px; font-weight: 700; }
.tfc-t span { font-weight: 600; color: var(--c); white-space: nowrap; }
.tfc-t.is-free { --c: var(--lp-free); background: var(--lp-free-bg); border-color: rgba(46,158,85,.3); }
.tfc-t.is-soon { --c: var(--lp-soon); background: var(--lp-soon-bg); border-color: rgba(217,142,0,.35); }
.tfc-t.is-res { --c: var(--lp-res); background: var(--lp-res-bg); border-color: rgba(184,92,56,.3); }
.tfc-t.is-seat { --c: var(--lp-seat); background: var(--lp-seat-bg); border-color: rgba(123,92,224,.3); }
.tfc-t.is-ping::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 2px var(--c); opacity: 0; pointer-events: none; animation: chipPing 900ms var(--lp-ease); }
.tf-card .ui-btn { height: 36px; font-size: 13px; }
.tfc-open, .tfc-go { width: 100%; margin-top: 2px; }
.tfc-lab { font-size: 12px; font-weight: 600; color: var(--lp-ink-2); margin-top: 2px; }
.tfc-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.tfc-seg span { display: grid; place-items: center; height: 34px; border-radius: 6px; border: 1px solid transparent; background: #F2F2F2; font-size: 13px; font-weight: 600; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.tfc-seg span.is-on { background: var(--lp-ink); border-color: var(--lp-ink); color: #fff; }
.tfc-sum { font-size: 12px; color: var(--lp-ink-2); }
.tfc-h { font-size: 13.5px; font-weight: 700; }
.tfc-opt { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--lp-line); }
.tfc-opt.is-best { border: 2px solid var(--lp-free-edge); }
.tfc-opt .hc-free { margin: 0 0 8px; }
.tfc-soon { font-size: 13px; font-weight: 600; color: var(--lp-soon); }
.tfc-toast { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--lp-ink); color: #D6D5D5; font-size: 12.5px; line-height: 1.35; box-shadow: var(--lp-shadow); opacity: 0; transform: translateY(8px) scale(0.98); pointer-events: none; transition: opacity 260ms var(--lp-ease), transform 360ms var(--lp-ease); }
.tfc-toast.is-in { opacity: 1; transform: none; }
.tfc-toast .ic { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--lp-free); color: #fff; stroke-width: 2.25; }
.tfc-toast b { display: block; color: #fff; font-family: var(--lp-display); font-weight: 700; font-size: 13.5px; }
.tf-card .dm-finger { z-index: 6; }
.tf-again { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: 12px; padding: 0 4px; border: 0; background: none; font: inherit; font-family: var(--lp-display); font-weight: 700; color: var(--lp-brand); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 0s linear 300ms; }
.tf-again .ic { width: 16px; height: 16px; }
.tf-again.is-ready { opacity: 1; visibility: visible; transition: opacity 300ms ease, visibility 0s; }
@media (hover: hover) and (pointer: fine) { .tf-again:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (prefers-reduced-motion: reduce) {
  .tfc-view, .tf-card[data-view] .tfc-view { transform: none; }
  .tfc-toast { transform: none; }
  .hero-shot .is-autopress, .tf-card .is-autopress { transform: none; }
  .hx-chip.is-ping::after, .tfc-t.is-ping::after { animation: none; }
}
.hx-group[hidden], .tf-again[hidden] { display: none; }
/* Handy: Hinweis oben einblenden, damit er die neue Zeile unten nicht verdeckt */
@media (max-width: 639px) { .hero-shot .toast { top: 64px; bottom: auto; transform: translateY(-10px) scale(0.98); } .hero-shot .toast.is-in { transform: none; } }
.toast.is-muted .ic { background: var(--lp-blocked); }
/* Knopf unten bündig, damit die Bestätigung ihn genau verdeckt und die Ansichten gleich ruhig stehen */
.tfc-now, .tfc-form { display: flex; flex-direction: column; }
.tfc-open, .tfc-go { margin-top: auto; flex: none; }
.tfc-toast { left: 8px; right: 8px; bottom: 8px; }
/* Karte lässt links Platz für das „AI“-Badge des Fotos */
.hit-card.tf-card { width: min(316px, calc(100% - 64px - 4%)); }


/* ==========================================================================
   Überarbeitung 15.10.2026 (v3): eine Tour im Hero, fokussierte Produktansichten, ruhigere Abschnitte
   ========================================================================== */

/* Gemeinsame Karten der Produktansichten */
.tf-x { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: #F2F2F2; font-size: 1.2em; }
.ui-card { background: #fff; border-radius: 20px; padding: 18px; border: 1px solid var(--lp-line); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.07); font-size: 13.5px; line-height: 1.45; color: var(--lp-ink); }
.ui-h { font-family: var(--lp-display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; margin-bottom: 12px; }
.ui-h-sm { font-size: 14px; margin: 16px 0 8px; }
.ui-sub { display: block; font-family: var(--lp-display); font-weight: 400; font-size: 12.5px; color: var(--lp-ink-2); letter-spacing: 0; }
/* Dezente Hervorhebung des Bedienelements, um das es im Text geht */
.ui-btn.is-focus { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(111,70,40,.38); }

/* ---------- Tisch finden: großer Nachbau (Wortlaut ui/app/views/heute.js) ---------- */
.find { padding-top: clamp(56px, 7vw, 104px); }
.find-grid { display: grid; gap: 40px; align-items: center; }
.find h2 { font-size: clamp(2.25rem, 1.25rem + 3.6vw, 4.25rem); line-height: 1; max-width: 13ch; }
.find .lead { max-width: 34rem; }
.find-points { margin-top: 28px; max-width: 34rem; }
.find-points li { padding: 14px 0 14px 18px; border-top: 1px solid var(--lp-line); color: var(--lp-ink-2); position: relative; }
.find-points li::before { content: ""; position: absolute; left: 0; top: 23px; width: 6px; height: 6px; border-radius: 50%; background: var(--lp-brand); }
.find-points b { color: var(--lp-ink); font-weight: 700; }
.find-vis { margin: 0; padding: clamp(14px, 3vw, 40px); border-radius: var(--lp-sec-r); background: var(--lp-sand); min-width: 0; }
.find-vis figcaption { margin-top: 14px; text-align: center; font-size: 0.875rem; color: var(--lp-ink-2); }
@media (min-width: 1024px) { .find-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 64px; } }

.ft { max-width: 480px; margin-inline: auto; border-radius: 20px; background: #fff; color: var(--lp-ink); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 16px 40px rgba(0,0,0,.08); overflow: hidden; font-size: 15px; line-height: 1.4; }
.ft-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--lp-line); }
.ft-head b { font-family: var(--lp-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.025em; }
.ft-x { display: grid; place-items: center; width: 32px; height: 32px; font-size: 22px; color: var(--lp-ink-2); }
.ft-body { display: grid; gap: 10px; padding: 14px 18px 16px; }
.ft-lab { font-weight: 600; font-size: 0.9375rem; }
.ft-lab span { margin-left: 6px; font-weight: 400; color: var(--lp-ink-2); }
.ft-pers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ft-pers button { height: 48px; padding: 0; border: 1px solid var(--lp-line-2); border-radius: 10px; background: #fff; color: var(--lp-ink); font-size: 1.125rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: transform 160ms var(--lp-ease), background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.ft-pers button:active { transform: scale(0.95); }
.ft-pers button[aria-checked="true"] { background: var(--lp-ink); border-color: var(--lp-ink); color: #fff; }
@media (hover: hover) and (pointer: fine) { .ft-pers button[aria-checked="false"]:hover { border-color: var(--lp-ink); background: var(--lp-hover); } }
.ft-pers button:focus-visible { outline-offset: 2px; }
.ft-time { display: flex; gap: 8px; }
.ft-seg { flex: 1; display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--lp-sand); }
.ft-seg i { flex: 1; display: grid; place-items: center; height: 38px; border-radius: 8px; font-style: normal; font-size: 0.9375rem; color: var(--lp-ink-2); }
.ft-seg .is-on { background: #fff; color: var(--lp-ink); box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.ft-clock { display: grid; place-items: center; padding: 0 14px; border: 1px solid var(--lp-line-2); border-radius: 10px; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.ft-out { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--lp-line); }
.ft-sum { font-size: 0.875rem; color: var(--lp-ink-2); font-variant-numeric: tabular-nums; }
.ft-count { margin: 2px 0 10px; font-weight: 600; color: var(--lp-free); }
.ft-list { display: grid; gap: 8px; }
.ft-opt { display: grid; gap: 2px; padding: 11px 14px; border: 1px solid var(--lp-line); border-radius: 12px; }
.ft-opt.is-sel { padding: 10px 13px; border: 2px solid var(--lp-ink); }
.ft-name { display: flex; align-items: center; gap: 8px; font-family: var(--lp-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; }
.ft-name i { padding: 2px 8px; border-radius: 999px; background: var(--lp-free-bg); color: var(--lp-free); font-style: normal; font-size: 0.75rem; font-weight: 600; letter-spacing: 0; }
.ft-meta { font-size: 0.8125rem; color: var(--lp-ink-2); }
.ft-until { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-weight: 600; color: var(--lp-free); font-variant-numeric: tabular-nums; }
.ft-until .ic { width: 17px; height: 17px; stroke-width: 2.25; }
.ft-until mark { padding: 1px 6px; margin-left: -2px; border-radius: 6px; background: var(--lp-free-bg); color: var(--lp-free); box-shadow: inset 0 0 0 1.5px rgba(27,116,50,.35); }
.is-short .ft-until { color: var(--lp-soon); }
.ft-bar { display: grid; gap: 10px; padding: 14px 18px 18px; border-top: 1px solid var(--lp-line); }
.ft-pick { font-size: 0.9375rem; color: var(--lp-ink-2); font-variant-numeric: tabular-nums; }
.ft-pick b { font-family: var(--lp-display); font-size: 1.25rem; font-weight: 700; color: var(--lp-ink); letter-spacing: -0.02em; }
.ft-wait { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: var(--lp-sand-2); }
.ft-wait[hidden] { display: none; }
.ft-wait p { display: flex; gap: 8px; font-size: 0.875rem; color: var(--lp-ink); }
.ft-wait p .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--lp-brand); }
.ft-wait-btn { display: grid; place-items: center; min-height: 44px; padding: 6px 10px; border-radius: 10px; background: rgba(111,70,40,.10); font-weight: 600; font-size: 0.9375rem; text-align: center; }
.ft-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ft-go { display: grid; place-items: center; height: 50px; padding: 0 8px; border-radius: 10px; background: var(--lp-ink); color: #fff; font-weight: 600; text-align: center; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(111,70,40,.38); }
.ft-go-2 { background: #F2F2F2; color: var(--lp-ink); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .ft-list.is-in .ft-opt { animation: ftIn 280ms var(--lp-ease) both; }
  .ft-list.is-in .ft-opt:nth-child(2) { animation-delay: 40ms; }
  .ft-list.is-in .ft-opt:nth-child(3) { animation-delay: 80ms; }
}
@keyframes ftIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 479px) {
  .ft { font-size: 14.5px; border-radius: 16px; }
  .ft-head, .ft-body, .ft-bar { padding-inline: 14px; }
  .ft-pers { gap: 6px; }
  .ft-pers button { height: 46px; font-size: 1.0625rem; }
  .ft-clock { padding: 0 10px; }
  .ft-seg i { height: 36px; font-size: 0.875rem; }
}

/* ---------- Mehr Gäste (Reiter): Kopf links, Reiter linksbündig ---------- */
.feat-head { max-width: none; display: grid; gap: 16px; }
.feat-head .lead { margin-top: 0; }
@media (min-width: 960px) { .feat-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; } }
.feat .tabs { margin-inline: 0; }
.opt-big { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--lp-free-bg); color: var(--lp-free); }
.opt-big b { font-family: var(--lp-display); font-size: 2rem; line-height: 1; font-weight: 700; letter-spacing: -0.03em; }
.opt-big span { font-weight: 600; }
.opt-listh { margin-top: 14px; font-weight: 700; font-size: 14px; }
.opt-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.wl-h { font-family: var(--lp-display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.wl-free { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--lp-free); font-weight: 600; font-size: 14px; }
.wl-free .ic { width: 16px; height: 16px; }
.wl-leg { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--lp-ink-2); }
.wl-opts { display: grid; gap: 8px; margin-top: 8px; }
.wl-opts li { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--lp-line); border-radius: 12px; }
.wl-opts li.is-on { padding: 11px; border: 2px solid var(--lp-ink); }
.wl-dot { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--lp-line-2); }
.is-on .wl-dot { border: 6px solid var(--lp-ink); }
.wl-opts b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.wl-opts small { display: block; font-size: 12.5px; color: var(--lp-ink-2); }
.wl-badge { padding: 1px 8px; border-radius: 999px; background: var(--lp-free-bg); color: var(--lp-free); font-style: normal; font-size: 11px; font-weight: 600; }
.mp-link { text-align: center; padding: 4px; color: var(--lp-brand); font-weight: 600; font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; }
#panel-warte .mp-hold { color: var(--lp-ink); background: var(--lp-sand); }
#panel-warte .mp-hold .ic { color: var(--lp-brand); }

/* ---------- Onlinebuchung: echte Bestätigung ---------- */
.book .lp-line { margin-top: 8px; background: rgba(0,0,0,.07); }
.bk-ok { display: flex; align-items: center; gap: 8px; font-family: var(--lp-display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.bk-ok .ic { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--lp-free); color: #fff; stroke-width: 2.5; }
.bk-mail .mail-p { margin: 4px 0 0; }
.bk-pay { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--lp-line); font-size: 12.5px; color: var(--lp-ink-2); }
.bk-pay b { display: block; color: var(--lp-ink); font-size: 13px; }

/* ---------- Was sonst noch dabei ist: Liste statt Kacheln ---------- */
.more-grid { display: grid; gap: 40px; }
.more-head h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); }
.guest-card { margin-top: 28px; padding: 18px; border-radius: 24px; background: var(--lp-sand); max-width: 480px; }
.guest { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--lp-line); flex-wrap: wrap; }
.guest b { display: block; }
.guest small { color: var(--lp-ink-2); font-size: 0.8125rem; }
.guest .pill { margin-left: auto; }
.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lp-brand); color: #fff; font-family: var(--lp-display); font-weight: 700; font-size: 14px; flex: none; }
.guest-facts { display: grid; gap: 8px; margin: 8px 0 0; }
.guest-facts div { padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--lp-line); }
.guest-facts dt { font-size: 0.75rem; color: var(--lp-ink-2); }
.guest-facts dd { margin: 0; font-weight: 700; font-size: 0.9375rem; }
.more-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-top: 1px solid var(--lp-line); }
.more-list li:last-child { border-bottom: 1px solid var(--lp-line); }
.more-list .ic { width: 24px; height: 24px; margin-top: 2px; color: var(--lp-brand); }
.more-list h3 { font-size: 1.1875rem; }
.more-list p { margin-top: 4px; color: var(--lp-ink-2); max-width: 38rem; }
@media (min-width: 1024px) {
  .more-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; align-items: start; }
  .more-head { position: sticky; top: 96px; }
}

/* ---------- Gründer: Fläche für das Porträt (wird durch ein echtes Foto ersetzt) ---------- */
.portrait-slot { margin: 0; display: grid; place-items: center; align-content: center; gap: 22px; aspect-ratio: 4 / 5; width: 100%; max-width: 420px; border-radius: 24px; background: #2A2A28; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: var(--lp-caramel); }
.portrait-mark { width: 88px; height: 88px; }
.portrait-slot figcaption { display: grid; gap: 2px; text-align: center; font-size: 0.9375rem; color: var(--lp-on-dark-2); }
.portrait-slot figcaption b { font-family: var(--lp-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #FFFFFF; }
@media (max-width: 959px) { .portrait-slot { aspect-ratio: 16 / 10; max-width: none; } .portrait-mark { width: 64px; height: 64px; } }
.story { align-items: start; }
.story-copy > p:not(.sign) { margin-top: 18px; }
.story-copy h2 + p { margin-top: 24px; }
.dark .principles h3 { font-size: 1.125rem; }

/* ---------- Preis ---------- */
.plan-one .pb-head h2 { font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.5rem); line-height: 1.08; }
.pb-for { margin-top: 12px; }
.pb-calc { width: 100%; margin: 0 0 4px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pb-calc caption { padding-bottom: 6px; text-align: left; font-size: 0.875rem; color: var(--lp-ink-2); }
.pb-calc th, .pb-calc td { padding: 8px 0; border-top: 1px solid var(--lp-line); font-size: 0.9375rem; text-align: left; font-weight: 400; }
.pb-calc td { text-align: right; font-weight: 700; }
.pb-hint { margin: 10px 0 20px; font-size: 0.875rem; color: var(--lp-ink-2); }
.pb-sub { font-size: 1.0625rem; }

/* ---------- So fängst du an (mit Beratungskalender) ---------- */
.start { margin-inline: var(--lp-inset); border-radius: var(--lp-sec-r); background: var(--lp-sand); position: relative; }
.anchor { position: absolute; top: 0; }
.start-grid { display: grid; gap: 40px; }
.start h2 { font-size: clamp(2.25rem, 1.3rem + 3.2vw, 3.75rem); }
.start .steps { grid-template-columns: none; gap: 20px; margin-top: 32px; }
.start .steps::before { display: none; }
.start .steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.start .step-n { width: 44px; height: 44px; margin: 0; font-size: 1.125rem; box-shadow: none; }
.start .steps h3 { font-size: 1.25rem; }
.start .steps p { max-width: 30rem; margin-top: 4px; }
.start .cta-row { justify-content: flex-start; margin-top: 32px; }
.start-book-h { margin-bottom: 12px; font-family: var(--lp-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.015em; }
.start .end-note { margin-top: 12px; }
@media (min-width: 1024px) { .start-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } }
.faq .sec-head .lead { margin-top: 12px; }
.nw { white-space: nowrap; }
@media (max-width: 479px) {
  .hero h1 { font-size: clamp(2rem, 9.3vw, 2.5rem); }
  .tabs-scroll { overflow: visible; margin-inline: 0; padding-inline: 0; }
  .feat .tabs { width: 100%; }
  .feat .tab { flex: 1; justify-content: center; padding: 0 6px; font-size: 0.9375rem; }
  .feat .tab .ic { display: none; }
}
/* Tisch finden: Handy erst Text, dann Nachbau, dann die Punkte; Computer links Text und Punkte, rechts der Nachbau */
@media (min-width: 1024px) {
  .find-grid { grid-template-areas: "copy vis" "pts vis"; grid-template-rows: auto 1fr; row-gap: 0; }
  .find-copy { grid-area: copy; align-self: end; }
  .find-vis { grid-area: vis; align-self: center; }
  .find-points { grid-area: pts; align-self: start; }
}
@media (max-width: 1023px) { .find-points { margin-top: 0; } }
@media (min-width: 640px) and (max-width: 1023px) {
  .find-points { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; max-width: none; }
  .hs-tap .hs-nav { max-width: 520px; }
}

/* Warteliste (Korrektur 15.10.2026): Ablauf untereinander, beide Karten bündig und gleich breit, kein Versatz */
#panel-warte .panel-vis.wl-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; }
.wl-flow .ui-card { width: 100%; margin: 0; }
.wl-step { display: flex; align-items: center; gap: 10px; font-family: var(--lp-display); font-weight: 700; font-size: 0.9375rem; color: var(--lp-ink); }
.wl-step:not(:first-child) { margin-top: 8px; }
.wl-step > span:first-child { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--lp-brand); color: #fff; font-size: 0.8125rem; }
.wl-mail-from { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--lp-line); }
.wl-mail-from b { display: block; font-size: 14px; }
.wl-mail-from small { display: block; color: var(--lp-ink-2); font-size: 12px; }
.wl-mail-subj { margin-top: 10px; font-family: var(--lp-display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.wl-mail-text { margin-top: 4px; color: var(--lp-ink-2); }
.wl-mail-meta { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--lp-sand); font-weight: 600; font-size: 13px; }
.wl-mail-meta .ic { width: 16px; height: 16px; color: var(--lp-brand); }
.wl-mail-acts { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.wl-mail-acts .ui-btn { height: 36px; padding: 0 14px; font-size: 13px; }
.wl-mail-link { color: var(--lp-brand); font-weight: 600; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 960px) { #panel-warte .panel-vis.wl-flow { min-height: 0; } }

/* ---------- Testphase und Launch-Angebot (shared/testphase.js) ----------
 * Etikett: Markenbraun mit weißer Schrift (8,4:1). Balken wie die Aktionsleiste, schließbar.
 * Läuft zusätzlich eine Rabatt-Aktion mit eigener Leiste, hat diese Vorrang (nur eine Leiste). */
.tp-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--lp-brand); color: #fff; font-family: var(--lp-display); font-size: 0.75rem; font-weight: 700; line-height: 1.35; letter-spacing: 0.01em; white-space: nowrap; }
.tp-badge[hidden] { display: none; }
.tp-badge-pb { margin-bottom: 12px; }
.tp-aktion .hero-note .ic { display: none; }
.tp-aktion .hero-note { flex-wrap: wrap; justify-content: center; row-gap: 6px; text-wrap: balance; }
.hero-note > span:last-child { min-width: 0; }
.tp-bar { position: relative; }
.tp-bar .promo-bar-in { padding-inline: calc(var(--lp-gut) + 40px); }
.tp-bar-zu { position: absolute; top: 50%; right: max(4px, calc(var(--lp-gut) - 12px)); transform: translateY(-50%); display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--lp-btn-r); background: transparent; color: var(--lp-on-dark-2); cursor: pointer; transition: color 150ms ease, background-color 150ms ease; }
.tp-bar-zu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tp-bar-zu:focus-visible { outline: 2px solid var(--lp-caramel); outline-offset: -2px; color: #fff; }
.tp-bar-zu:active { transform: translateY(-50%) scale(0.94); }
@media (hover: hover) and (pointer: fine) { .tp-bar-zu:hover { color: #fff; background: rgba(255,255,255,.10); } .tp-bar .promo-bar-in:hover .promo-cta { color: #fff; } }
.promo-bar:not(.tp-bar) ~ .tp-bar, .tp-bar:has(~ .promo-bar:not(.tp-bar)) { display: none; }
@media (prefers-reduced-motion: reduce) { .tp-bar-zu { transition: none; } }
/* Handy: eine schmale Zeile, der ganze Balken ist der Link */
@media (max-width: 559px) { .tp-bar .promo-bar-in { font-size: 0.8125rem; line-height: 1.35; padding-block: 6px; gap: 0; } .tp-bar .promo-cta { display: none; } }

/* ==========================================================================
   Umbau 16.10.2026: neue Reihenfolge nach Konzept (jede Sektion ein Nutzen)
   Alles neu Gesetzte ist über eigene Klassen (.hero-lp, .price-sec, .split, …) begrenzt, weil
   ui/quandoo-alternative.html dieselbe CSS lädt.
   ========================================================================== */

/* ---------- Kopfzeile: Login als zweiter Knopf, auch am Handy sichtbar ---------- */
.lp-ghost { background: #fff; color: var(--lp-ink); box-shadow: inset 0 0 0 1.5px var(--lp-line-2); }
@media (hover: hover) and (pointer: fine) { .lp-ghost:hover { background: var(--lp-sand); box-shadow: inset 0 0 0 1.5px var(--lp-ink); } }
.lp-ghost:active { background: var(--lp-sand); }
.nav .nav-login { display: inline-flex; padding: 0 14px; font-weight: 600; }
@media (max-width: 559px) {
  .nav-in { gap: 10px; }
  .nav-actions { gap: 6px; }
  .nav .nav-login, .nav .nav-cta { padding: 0 12px; font-size: 0.875rem; }
}
@media (max-width: 419px) { .nav .brand .pl-word { display: none; } }

/* ---------- 1 Hero mit „Tisch finden“ ---------- */
.hero-lp { padding-top: clamp(28px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 64px); }
.hero-lp .hero-grid { display: grid; gap: 36px; align-items: center; }
.hero-lp .hero-copy { text-align: left; align-items: flex-start; }
.hero-kicker { margin-bottom: 18px; font-family: var(--lp-display); font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.005em; color: var(--lp-brand); }
.hero-lp h1 { font-size: clamp(2.25rem, 1.15rem + 4.1vw, 4.5rem); line-height: 1; letter-spacing: -0.04em; max-width: 13ch; text-wrap: balance; }
.hero-lp .hero-sub { margin-top: 22px; max-width: 34rem; text-wrap: pretty; }
.hero-lp .cta-row { justify-content: flex-start; margin-top: 30px; }
.hero-lp .hero-note { margin-top: 16px; flex-wrap: wrap; row-gap: 6px; }
.hero-vis { margin: 0; grid-area: auto; }
.hero-vis .ft { width: 100%; }
@media (min-width: 1024px) {
  .hero-lp .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 5vw, 80px); }
  .hero-vis { padding: 28px; }
}
@media (max-width: 1023px) {
  .hero-lp .hero-copy > * { animation: none; } /* Handy und Tablet: oben sofort sichtbar, ohne Einblenden (Min 16.10.2026) */
}
@media (max-width: 559px) {
  .hero-lp .cta-row { flex-direction: column; align-items: stretch; width: 100%; gap: 4px; }
  .hero-lp .cta-row .lp-btn { flex: none; }
  .hero-lp .hero-demo { min-height: 44px; background: transparent; text-decoration: underline; text-decoration-color: rgba(0,0,0,.3); text-underline-offset: 4px; }
  .hero-lp .hero-note { align-self: center; justify-content: center; margin-top: 8px; }
}
@media (max-width: 559px) and (hover: hover) and (pointer: fine) { .hero-lp .hero-demo:hover { background-image: none; text-decoration-color: currentColor; } }

.trust { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: clamp(32px, 4vw, 56px); padding-top: 22px; border-top: 1px solid var(--lp-line); }
.trust li { display: inline-flex; align-items: center; gap: 10px; font-family: var(--lp-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; color: var(--lp-ink); }
.trust .ic { width: 22px; height: 22px; color: var(--lp-brand); }
@media (max-width: 559px) { .trust { display: grid; gap: 12px; } }

/* ---------- 2 Fester Preis statt Provision ---------- */
.price-sec { margin-inline: var(--lp-inset); border-radius: var(--lp-sec-r); background: var(--lp-sand); }
.price-grid { display: grid; gap: 32px; align-items: start; }
.price-copy h2 { max-width: 14ch; }
.price-copy .lead { max-width: 36rem; }
@media (min-width: 1024px) { .price-grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: 56px; } .plan-card { position: sticky; top: 96px; } }

.calc { margin-top: 32px; }
.calc-in { display: grid; gap: 24px; padding: clamp(18px, 3vw, 32px); border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06); }
.calc-field { display: grid; gap: 10px; }
.calc-lab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.calc label { font-weight: 600; color: var(--lp-ink); }
.calc output { font-family: var(--lp-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.calc-scale { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--lp-ink-2); font-variant-numeric: tabular-nums; }
.calc-range { --p: 33.3%; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.calc-range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--lp-brand) var(--p), #E2E1E1 var(--p)); }
.calc-range::-moz-range-track { height: 8px; border-radius: 4px; background: #E2E1E1; }
.calc-range::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--lp-brand); }
.calc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: #fff; border: 2px solid var(--lp-ink); box-shadow: 0 2px 6px rgba(0,0,0,.16); transition: transform 160ms var(--lp-ease); }
.calc-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid var(--lp-ink); box-shadow: 0 2px 6px rgba(0,0,0,.16); }
.calc-range:active::-webkit-slider-thumb { transform: scale(1.1); }
.calc-range:focus-visible { outline: none; }
.calc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--lp-brand); }
.calc-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--lp-brand); }
.calc-fee { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; }
.calc-eur { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 14px 0 4px; border-radius: 10px; border: 1.5px solid var(--lp-line-2); background: #fff; transition: border-color 160ms ease; }
.calc-eur:focus-within { border-color: var(--lp-ink); box-shadow: 0 0 0 3px rgba(111,70,40,.18); }
.calc-eur input { width: 4.5ch; height: 44px; border: 0; background: transparent; font: inherit; font-size: 1.125rem; font-weight: 700; text-align: right; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.calc-eur input:focus { outline: none; }
.calc-eur span { font-weight: 700; color: var(--lp-ink); }
.calc-eur:has(input[aria-invalid="true"]) { border-color: #C2001A; }
.calc-out { display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid var(--lp-line); }
.calc-row p { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.calc-row p span { color: var(--lp-ink-2); font-weight: 600; }
.calc-row b { font-family: var(--lp-display); font-weight: 700; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.calc-pl p span { color: var(--lp-brand); }
.calc-bar { display: block; height: 12px; border-radius: 6px; background: var(--lp-sand); overflow: hidden; }
.calc-bar i { display: block; height: 100%; border-radius: 6px; transform-origin: left; transition: transform 320ms var(--lp-ease); }
.calc-other .calc-bar i { background: #9E9EA4; }
.calc-pl .calc-bar i { background: var(--lp-brand); }
.calc-diff { font-weight: 700; color: var(--lp-ink); }
.calc-hint { margin-top: 12px; font-size: 0.875rem; color: var(--lp-ink-2); }
@media (prefers-reduced-motion: reduce) { .calc-bar i { transition: none; } }
@media (max-width: 479px) { .calc-fee { grid-template-columns: 1fr; } .calc-eur { justify-self: start; } }

.plan-card { display: block; padding: clamp(22px, 3vw, 32px); border-radius: 24px; background: #fff; border: 2px solid var(--lp-ink); }
.plan-name { font-size: 1.25rem; }
.plan-card .pb-price { margin: 14px 0 18px; }
.plan-keys { display: grid; gap: 10px; margin-bottom: 22px; }
.plan-keys li { display: flex; gap: 10px; font-weight: 600; }
.plan-keys .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--lp-free); stroke-width: 2.25; }
.plan-more { margin-top: 18px; border-top: 1px solid var(--lp-line); }
.plan-more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; cursor: pointer; list-style: none; font-family: var(--lp-display); font-weight: 700; }
.plan-more summary::-webkit-details-marker { display: none; }
.plan-more .pb-list { margin: 4px 0 6px; }
.plan-more[open] .pb-list { animation: faqIn 260ms var(--lp-ease); }
@media (hover: hover) and (pointer: fine) { .plan-more summary:hover .pm { border-color: var(--lp-ink); } }

/* ---------- 3 bis 7: Nutzen mit Nachbau, abwechselnd links und rechts ---------- */
.story-sec { padding-block: clamp(64px, 8vw, 112px); }
.story-sec + .story-sec { padding-top: 0; }
.split { display: grid; gap: 36px; align-items: center; }
.split-copy h2 { max-width: 15ch; }
.split-copy .lead { max-width: 36rem; }
.split-copy .ticks { max-width: 36rem; }
.split-vis { display: grid; justify-items: center; align-content: center; gap: 12px; min-width: 0; padding: clamp(18px, 3.5vw, 44px); border-radius: var(--lp-sec-r); background: var(--lp-sand); }
.split-vis > .ui-card, .split-vis > .guest-card { width: 100%; max-width: 500px; }
.split-vis .guest-card { margin: 0; padding: 0; background: transparent; }
.split-vis.wl-flow { justify-items: stretch; }
.split-vis.wl-flow > * { width: 100%; max-width: 500px; justify-self: center; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(48px, 6vw, 88px); }
  .split-rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .split-rev .split-copy { order: 2; }
  .split-vis { min-height: 460px; }
}
.feat-list { display: grid; margin-top: 28px; max-width: 36rem; }
.feat-list li { padding: 16px 0; border-top: 1px solid var(--lp-line); }
.feat-list h3 { font-size: 1.125rem; }
.feat-list p { margin-top: 4px; color: var(--lp-ink-2); }

/* Service: Reservierungen mit großen Knöpfen (Nachbau, Wortlaut wie ui/app „Heute“) */
.svc-card { display: grid; gap: 10px; padding: 16px; }
.svc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.svc-h b { font-family: var(--lp-display); font-size: 16px; letter-spacing: -0.02em; }
.svc-h span { font-size: 12.5px; color: var(--lp-ink-2); }
.svc-res { display: grid; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--lp-line); background: #fff; }
.svc-res.is-seated { background: var(--lp-hover); }
.svc-top { display: flex; gap: 14px; align-items: flex-start; }
.svc-t { font-family: var(--lp-display); font-size: 17px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.svc-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.svc-l1 b { font-size: 15px; }
.svc-l2 { margin-top: 2px; font-size: 12.5px; color: var(--lp-ink-2); }
.svc-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.svc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 8px; border-radius: 10px; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.svc-btn .ic { width: 17px; height: 17px; }
.svc-go { background: var(--lp-ink); color: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(111,70,40,.38); }
.svc-warn { background: #FDECEA; color: #B0001A; }
.svc-quiet { background: #EDEDED; color: var(--lp-ink); }
.is-seated .svc-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-dev { display: flex; align-items: center; gap: 8px; padding: 4px 2px 0; font-size: 12.5px; font-weight: 600; color: var(--lp-ink-2); }
.svc-dev .ic { width: 18px; height: 18px; color: var(--lp-brand); }
@media (max-width: 379px) { .svc-btn { font-size: 12.5px; } .svc-btn .ic { display: none; } }

/* ---------- 8 Umstieg an einem Nachmittag ---------- */
.umstieg-sec .ticks { margin-top: 24px; }
.switch-steps { padding: clamp(20px, 3vw, 36px); border-radius: 24px; background: #fff; }
.switch-h { margin-bottom: 4px; font-family: var(--lp-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.015em; }
.umstieg-sec .steps { margin-top: 18px; }

/* ---------- 9 Gründer: ohne Prinzipien darunter ---------- */
.dark .story { align-items: center; }

/* ---------- 10 Deine Daten bleiben deine ---------- */
.data-grid { display: grid; gap: 32px; }
.data-head h2 { max-width: 12ch; }
.data-list { display: grid; margin: 0; }
.data-list > div { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--lp-line); }
.data-list dt { display: flex; align-items: center; gap: 10px; font-family: var(--lp-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.015em; }
.data-list dt .ic { width: 22px; height: 22px; color: var(--lp-brand); }
.data-list dd { margin: 0 0 0 32px; color: var(--lp-ink-2); max-width: 34rem; }
@media (min-width: 768px) { .data-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 1024px) { .data-grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 64px; align-items: start; } }

/* ---------- 11 Fragen und Beratung ---------- */
.faq-lp { position: relative; padding-top: 0; }
.faq-lp-grid { display: grid; gap: 40px; align-items: start; }
.faq-col h2 { margin-bottom: 24px; }
.faq-book { padding: clamp(18px, 3vw, 32px); border-radius: var(--lp-sec-r); background: var(--lp-sand); min-width: 0; }
.faq-book .start-book-h { margin-bottom: 6px; font-size: 1.25rem; }
.faq-book-p { margin-bottom: 16px; color: var(--lp-ink-2); }
.faq-book .end-note { margin-top: 12px; }
@media (min-width: 1024px) { .faq-lp-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; } }

/* ---------- 12 Schluss ---------- */
.end-lp { margin-inline: var(--lp-inset); margin-bottom: var(--lp-inset); border-radius: var(--lp-sec-r); background: var(--lp-sand); }
.end-lp-in { display: grid; justify-items: center; gap: 24px; text-align: center; }
.end-lp h2 { font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5.25rem); line-height: 0.98; letter-spacing: -0.04em; max-width: 12ch; }
.end-lp-note { margin-top: -10px; font-size: 0.875rem; color: var(--lp-ink-2); }
@media (max-width: 479px) { .end-lp .lp-btn { width: 100%; } }
/* Hero: Nachbau kompakter, damit er am Computer in den ersten Bildschirm passt (Hinweis auf Wartende bleibt der Warteliste vorbehalten) */
.hero-vis .ft-wait { display: none !important; }
@media (min-width: 1024px) {
  .hero-vis { padding: 20px 24px; }
  .hero-vis .ft-head { padding-block: 10px; }
  .hero-vis .ft-body { gap: 8px; padding-block: 12px; }
  .hero-vis .ft-pers button { height: 44px; }
  .hero-vis .ft-opt { padding-block: 9px; }
  .hero-vis .ft-opt.is-sel { padding-block: 8px; }
  .hero-vis .ft-bar { padding-block: 12px 14px; }
  .hero-vis .ft-go { height: 46px; }
  .hero-vis figcaption { margin-top: 10px; }
}

/* ---------- Hero: „Tisch finden“ mit echtem Tischplan (16.10.2026) ----------
 * Steuerung oben, der Plan ist das Hauptbild, darunter Legende und die Auswahlzeile mit den Knöpfen. */
.ft-plan { max-width: none; }
.ft-plan .ft-ctrl { display: grid; gap: 10px; padding: 12px 16px 4px; }
.ft-plan .ft-ctrl-g { display: grid; gap: 6px; min-width: 0; }
.ft-plan .ft-pers button { height: 42px; font-size: 1.0625rem; }
.ft-plan .ft-seg button { flex: 1; display: grid; place-items: center; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 0.9375rem; color: var(--lp-ink-2); cursor: pointer; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--lp-ease); }
.ft-plan .ft-seg button:active { transform: scale(0.96); }
.ft-plan .ft-seg button[aria-checked="true"] { background: #fff; color: var(--lp-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
@media (hover: hover) and (pointer: fine) { .ft-plan .ft-seg button[aria-checked="false"]:hover { color: var(--lp-ink); background: rgba(255,255,255,.6); } }
.ft-plan .ft-seg button:focus-visible { outline-offset: 1px; }
.ft-plan .ft-clock { min-width: 64px; font-weight: 600; }
.ft-plan .ft-out { margin: 0; padding: 10px 16px 0; border-top: 0; }
.ft-plan .ft-sum { color: var(--lp-ink-2); }
.ft-plan .ft-count { margin: 0; display: inline; color: var(--lp-free); font-weight: 700; }
.ft-plan .ft-count.is-none { color: var(--lp-soon); }
.ft-floor { margin: 6px 10px 0; border-radius: 14px; background: var(--lp-hover); overflow: hidden; }
.ft-floor .fl-svg { width: 100%; height: auto; }
.ft-floor .fl-table:not(.fl-dim) { cursor: pointer; }
.ft-floor .fl-table.fl-dim { cursor: default; }
.ft-floor .fl-table .fl-body { transition: stroke-width 160ms var(--lp-ease); }
.ft-legend { margin: 8px 16px 0; }
.ft-legend .lg-seat { border-color: var(--lp-seat-edge) !important; }
.ft-plan .ft-bar { margin-top: 10px; padding: 12px 16px 16px; }
@media (min-width: 1024px) {
  .hero-lp .hero-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
  .hero-vis { padding: 16px; }
  .ft-plan .ft-ctrl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .ft-plan .ft-pers { gap: 6px; }
  .ft-plan .ft-pers button { height: 40px; }
  .ft-plan .ft-seg button { height: 34px; }
  .ft-plan .ft-clock { min-width: 58px; padding: 0 8px; }
  .hero-vis .ft-plan .ft-go { height: 44px; }
}
@media (max-width: 479px) {
  .ft-plan .ft-ctrl { padding-inline: 12px; }
  .ft-plan .ft-out, .ft-plan .ft-bar { padding-inline: 12px; }
  .ft-floor { margin-inline: 8px; }
  .ft-legend { margin-inline: 12px; }
}

/* ---------- Hero-Tischplan: Bewegung (16.10.2026, landing.js „Bewegung im Plan“) ----------
 * Nur transform und opacity. Kamera am Handy als CSS-Transition (umlenkbar), Rest per WAAPI aus landing.js. */
.ft-floor { aspect-ratio: 1018 / 838; }
@media (max-width: 559px) { .ft-floor { aspect-ratio: 640 / 600; } }
.ft-floor.is-crop { position: relative; }
.ft-floor.is-crop .fl-svg { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; will-change: transform; }
.ft-floor.is-cam.is-crop .fl-svg { transition: transform 520ms var(--lp-ease-io); }
.ft-floor .fl-body, .ft-floor .fl-ring, .ft-floor .fl-deco { transform-box: fill-box; transform-origin: 50% 50%; }
.ft-floor.is-pre .fl-table, .ft-floor.is-pre .fl-deco, .ft-floor.is-pre .fl-ring { opacity: 0; }
/* Selbst-Demo: sichtbares Antippen des Personenknopfs */
.ft-pers button { position: relative; }
.ft-pers button.is-demo-press { transform: scale(0.94); }
.ft-pers button.is-demo-ring::after { content: ""; position: absolute; inset: -5px; border-radius: 13px; border: 2px solid var(--lp-brand); pointer-events: none; animation: ftDemoRing 600ms var(--lp-ease) forwards; }
@keyframes ftDemoRing { from { opacity: 0.85; transform: scale(0.9); } to { opacity: 0; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .ft-floor.is-cam.is-crop .fl-svg { transition: none; }
  .ft-pers button.is-demo-ring::after { display: none; }
}

/* ---------- Kopfzeile: Menü „Funktionen“ und Fußzeile mit Funktionsseiten (17.10.2026) ----------
 * Am Computer klappt „Funktionen“ ein kleines Menü mit den drei Funktionsseiten auf (landing.js „Menü Funktionen“),
 * am Handy stehen die drei Seiten im Menü unter der Zwischenüberschrift „Funktionen“. */
.nav-dd { position: relative; }
.nav-dd-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px 0 14px; border: 0; border-radius: var(--lp-btn-r); background: transparent; font-family: var(--lp-display); font-weight: 600; font-size: 0.9875rem; color: var(--lp-ink-2); cursor: pointer; transition: color 150ms ease, background-color 150ms ease; }
.nav-dd-btn .ic { width: 16px; height: 16px; stroke-width: 2; transition: transform 200ms var(--lp-ease); }
.nav-dd-btn[aria-expanded="true"] { color: var(--lp-ink); background: var(--lp-hover); }
.nav-dd-btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .nav-dd-btn:hover { color: var(--lp-ink); background: var(--lp-hover); } }
.nav-dd-panel { position: absolute; top: calc(100% + 8px); left: -8px; z-index: 60; width: 340px; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--lp-line); box-shadow: 0 2px 6px rgba(29,29,27,.06), 0 24px 48px rgba(29,29,27,.12); transform-origin: 40px 0; }
.nav-dd-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .nav-dd-panel:not([hidden]) { animation: ddIn 180ms var(--lp-ease); } }
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
.nav-links .nav-dd-panel a { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 60px; padding: 8px 10px; border-radius: 10px; color: var(--lp-ink); }
.nav-dd-panel img { width: 44px; height: 44px; padding: 5px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--lp-line); }
.nav-dd-panel b { display: block; font-weight: 700; font-size: 0.96875rem; letter-spacing: -0.01em; }
.nav-dd-panel small { display: block; font-family: var(--font, inherit); font-weight: 400; font-size: 0.8125rem; color: var(--lp-ink-2); letter-spacing: 0; }
.nav-dd-panel a[aria-current="page"] { background: var(--lp-sand); }
@media (hover: hover) and (pointer: fine) { .nav-links .nav-dd-panel a:hover { background: var(--lp-hover); color: var(--lp-ink); } }
.nav-menu .nav-menu-h { padding: 14px 0 2px; font-family: var(--lp-display); font-weight: 700; font-size: 0.8125rem; color: var(--lp-ink-2); }
.nav-menu a.nav-menu-sub { min-height: 44px; padding-left: 14px; font-size: 1rem; font-weight: 600; }
.nav-menu a.nav-menu-sub + a:not(.nav-menu-sub) { margin-top: 0; }
@media (min-width: 820px) { .foot-grid-5 { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; } }
.split-copy .lp-more { margin-top: 20px; }
.hero-vis figcaption a { color: var(--lp-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }