/* ============================================================
   SANDAL · KONZEPT — Edel-maritim, dunkle Basis
   Aufbauend auf sandal.css. Neue Tokens, Neon, Motive,
   Card-/Button-Varianten für die Explorations-Seite.
   ============================================================ */

:root{
  /* dunkle Basis (aus dem echten Raum: schwarze Decke, Navy) */
  --k-bg:        #0a121b;
  --k-bg-2:      #0d1925;
  --k-panel:     #112230;
  --k-panel-2:   #16293a;
  --k-line:      rgba(217,200,168,.16);
  --k-line-soft: rgba(233,238,242,.08);

  /* Neon-Blau (LED unter der Theke + Logo-Wasser) */
  --neon:        #2ec5f0;
  --neon-bright: #6fe0ff;
  --neon-deep:   #0a6fb0;
  --neon-glow:   rgba(46,197,240,.55);

  /* warmes Gold/Bernstein (Geflecht-Lampen, Holz) — aufgehellt, harmoniert mit --gold */
  --amber:       #e6ae55;
  --amber-glow:  #f6d590;
  /* Hinweis: --gold-line, --gold-soft, --paper, --paper-2 kommen jetzt zentral aus sandal.css
     (Single Source of Truth) — hier bewusst NICHT mehr redefiniert. */

  /* Terrakotta (Stühle) — sehr sparsam */
  --rust:        #b5613f;

  --on-k:        #eef3f7;
  --on-k-soft:   #9fb2c0;
  --on-k-mute:   #647a8a;
}

/* ---------- Page shell der Konzept-Seite ---------- */
body.konzept{
  background:var(--k-bg);
  color:var(--on-k);
}
.konzept ::selection{ background:var(--neon-glow); color:#04121b; }

/* feine Fischschuppen-Textur als wiederverwendbare Fläche */
.scales{
  position:relative;
}
.scales::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23d9c8a8' stroke-width='1' opacity='0.14'%3E%3Cpath d='M0 22a11 11 0 0 1 22 0 11 11 0 0 1 22 0'/%3E%3Cpath d='M-22 0a11 11 0 0 1 22 0 11 11 0 0 1 22 0 11 11 0 0 1 22 0 11 11 0 0 1 22 0'/%3E%3Cpath d='M-22 44a11 11 0 0 1 22 0 11 11 0 0 1 22 0 11 11 0 0 1 22 0 11 11 0 0 1 22 0'/%3E%3C/g%3E%3C/svg%3E");
}
.scales>*{ position:relative; z-index:1; }

/* sanfter Neon-Schein als Radiallicht hinter Sektionen */
.glow-tl::after,.glow-tr::after,.glow-c::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
}
.glow-tl::after{ background:radial-gradient(760px 360px at 8% 0%, rgba(46,197,240,.16), transparent 62%); }
.glow-tr::after{ background:radial-gradient(820px 380px at 92% 6%, rgba(46,197,240,.14), transparent 60%); }
.glow-c::after{ background:radial-gradient(900px 420px at 50% 30%, rgba(217,154,78,.12), transparent 64%); }

/* ---------- Typo-Auffrischung auf dunkel ---------- */
.konzept h1,.konzept h2,.konzept h3,.konzept h4{ color:var(--on-k); }
.konzept .lead{ color:var(--on-k-soft); }
/* Helle Sektionen (Papier): Überschriften + Lead wieder kontrastreich (sonst hell auf hell → unsichtbar) */
.konzept .s-paper h1,.konzept .s-paper h2,.konzept .s-paper h3,.konzept .s-paper h4{ color:var(--blue-ink); }
.konzept .s-paper .lead{ color:var(--on-light-soft); }
.eyebrow.neon{ color:var(--neon-bright); }
.eyebrow.neon::before{ background:var(--neon); opacity:.9; box-shadow:0 0 8px var(--neon-glow); }

/* Neon-Wortmarke / Schriftzug */
.neon-word{
  font-family:var(--serif); font-weight:600; line-height:.95;
  color:#eafaff;
  text-shadow:
    0 0 4px rgba(255,255,255,.5),
    0 0 14px var(--neon-glow),
    0 0 34px rgba(46,197,240,.45),
    0 0 60px rgba(46,197,240,.28);
}
.neon-word.amber{
  color:#fff5e6;
  text-shadow:0 0 4px rgba(255,255,255,.5),0 0 16px rgba(240,201,135,.55),0 0 40px rgba(217,154,78,.4);
}
@keyframes neonBreath{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.18); } }
.neon-breath{ animation:neonBreath 5.5s ease-in-out infinite; }
@media(prefers-reduced-motion:reduce){ .neon-breath{ animation:none; } }

/* dünne Neon-Tube-Linie */
.neon-rule{
  height:2px; width:100%; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);
  box-shadow:0 0 10px var(--neon-glow);
}
.neon-rule.short{ width:64px; }
.neon-rule.amber{ background:linear-gradient(90deg,transparent,var(--amber-glow),transparent); box-shadow:0 0 10px rgba(240,201,135,.5); }

/* ---------- Wellenlinien-Divider ---------- */
.wave-div{
  height:34px; width:100%;
  background-repeat:repeat-x; background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34' viewBox='0 0 120 34'%3E%3Cpath d='M0 17 Q30 2 60 17 T120 17' fill='none' stroke='%23d8be86' stroke-width='1.4' opacity='0.55'/%3E%3C/svg%3E");
}
.wave-div.neon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34' viewBox='0 0 120 34'%3E%3Cpath d='M0 17 Q30 2 60 17 T120 17' fill='none' stroke='%232ec5f0' stroke-width='1.4' opacity='0.7'/%3E%3C/svg%3E");
  filter:drop-shadow(0 0 6px var(--neon-glow));
}

/* ---------- Fischernetz in Ecken ---------- */
.net-corner{
  position:absolute; width:230px; height:230px; pointer-events:none; z-index:1; opacity:.5;
  background-repeat:no-repeat; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23d9c8a8' stroke-width='0.8' opacity='0.5'%3E%3Cpath d='M0 0 L40 40 M40 0 L80 40 M80 0 L120 40 M120 0 L160 40 M160 0 L200 40 M0 40 L40 80 M40 40 L80 80 M80 40 L120 80 M120 40 L160 80 M160 40 L200 80 M0 0 L-40 40 M0 40 L40 0 M40 40 L80 0 M80 40 L120 0 M120 40 L160 0 M160 40 L200 0 M0 80 L40 40 M40 80 L80 40 M80 80 L120 40 M120 80 L160 40 M160 80 L200 40'/%3E%3C/g%3E%3C/svg%3E");
}
.net-corner.tr{ top:0; right:0; transform:scaleX(-1); }
.net-corner.tl{ top:0; left:0; }

/* ---------- Goldfisch-Parallax-Layer ---------- */
.fish-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.goldfish{
  position:absolute; opacity:.5;
  filter:drop-shadow(0 6px 18px rgba(217,154,78,.35));
  will-change:transform;
}
.goldfish svg{ display:block; }
@keyframes finWobble{ 0%,100%{ transform:rotate(-2deg); } 50%{ transform:rotate(3deg); } }
.goldfish.swim{ animation:finWobble 6s ease-in-out infinite; }
@media(prefers-reduced-motion:reduce){ .goldfish.swim{ animation:none; } }

/* ---------- Panels / Cards (Konzept) ---------- */
.k-panel{
  background:var(--k-panel); border:1px solid var(--k-line);
  border-radius:12px; padding:clamp(22px,3vw,34px);
}

/* Card-Variante A — dunkel, Neon-Randglow beim Hover */
.card-a{
  position:relative; background:var(--k-panel); border:1px solid var(--k-line);
  border-radius:12px; overflow:hidden; transition:.45s var(--ease);
}
.card-a .ph{ aspect-ratio:5/4; overflow:hidden; }
.card-a .ph img{ width:100%; height:100%; object-fit:cover; transition:.7s var(--ease); }
.card-a .body{ padding:18px 20px 22px; }
.card-a::after{
  content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent; transition:.45s var(--ease);
}
.card-a:hover{ transform:translateY(-5px); border-color:transparent; }
.card-a:hover::after{ box-shadow:inset 0 0 0 1px var(--neon), 0 0 0 1px var(--neon), 0 18px 50px -22px rgba(46,197,240,.5); }
.card-a:hover .ph img{ transform:scale(1.06); }

/* Card-Variante B — Foto, Goldrahmen erscheint + Zoom */
.card-b{
  position:relative; border-radius:12px; overflow:hidden; min-height:330px;
  display:flex; align-items:flex-end; color:#fff; isolation:isolate;
}
.card-b img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.7s var(--ease); z-index:-2; }
.card-b::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(8,16,24,0) 35%,rgba(8,16,24,.9)); }
.card-b .frame{ position:absolute; inset:12px; border:1px solid rgba(217,154,78,0); border-radius:8px; transition:.45s var(--ease); pointer-events:none; }
.card-b .body{ padding:24px; }
.card-b:hover img{ transform:scale(1.07); }
.card-b:hover .frame{ border-color:var(--gold-soft); inset:16px; }

/* Card-Variante C — clean, nur Hairline + Lift, ohne Foto-Zoom */
.card-c{
  background:var(--k-bg-2); border:1px solid var(--k-line-soft); border-radius:12px;
  padding:26px; transition:.4s var(--ease);
}
.card-c:hover{ transform:translateY(-4px); border-color:var(--gold-line); box-shadow:0 24px 60px -34px #000; }

/* ---------- Buttons (Konzept) ---------- */
.kbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1em 1.9em; border-radius:var(--radius); cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:.84rem;
  letter-spacing:.14em; text-transform:uppercase; line-height:1;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease); border:1px solid transparent; position:relative;
}
/* primär: strahlendes Metallic-Gold, Hover hebt + warmer Schein */
.kbtn--gold{ background:var(--grad-gold); color:var(--on-gold); border-color:var(--gold-deep); }
.kbtn--gold:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -16px var(--gold-glow), 0 0 0 1px var(--gold-bright) inset; }
/* sekundär: Outline, Hover = Neon-Tube leuchtet auf */
.kbtn--neon{ background:transparent; color:var(--on-k); border-color:var(--k-line); }
.kbtn--neon:hover{ border-color:var(--neon); color:var(--neon-bright);
  box-shadow:0 0 0 1px var(--neon), 0 0 18px -2px var(--neon-glow); text-shadow:0 0 10px var(--neon-glow); }
/* geist auf hell */
.kbtn--ghost{ background:transparent; color:var(--on-light); border-color:var(--paper-line); }
.kbtn--ghost:hover{ border-color:var(--gold-line); transform:translateY(-2px); }

/* ---------- Live-Dot „frisch heute" ---------- */
.live{ display:inline-flex; align-items:center; gap:.6em; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--neon-bright); }
.live .dot{ width:8px; height:8px; border-radius:50%; background:var(--neon); box-shadow:0 0 0 0 var(--neon-glow); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 var(--neon-glow); } 70%{ box-shadow:0 0 0 9px rgba(46,197,240,0); } 100%{ box-shadow:0 0 0 0 rgba(46,197,240,0); } }

/* ---------- Explorations-Gerüst (Chrome) ---------- */
.x-head{
  position:sticky; top:0; z-index:40; background:rgba(10,18,27,.86); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--k-line-soft);
}
.x-head .wrap{ display:flex; align-items:center; gap:18px; min-height:64px; }
.x-head .brand{ display:flex; align-items:center; gap:10px; }
.x-head .brand img{ height:34px; }
.x-head .brand b{ font-family:var(--serif); letter-spacing:.3em; font-size:1rem; color:var(--gold-soft); }
.x-head nav{ margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; }
.x-head nav a{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-k-soft); padding:.5em .7em; border-radius:4px; transition:.25s var(--ease); }
.x-head nav a:hover{ color:var(--neon-bright); background:rgba(46,197,240,.08); }
@media(max-width:900px){ .x-head nav{ display:none; } }

.x-section{ border-top:1px solid var(--k-line-soft); }
.x-label{ display:flex; align-items:center; gap:16px; padding:30px 0 6px; flex-wrap:wrap; }
.x-label .num{ font-family:var(--serif); font-size:1.1rem; color:var(--neon); border:1px solid var(--k-line); border-radius:50%; width:40px; height:40px; display:grid; place-items:center; flex:none; box-shadow:0 0 16px -4px var(--neon-glow); }
.x-label h2{ font-size:clamp(1.5rem,2.6vw,2.2rem); }
.x-label .sub{ color:var(--on-k-mute); font-size:.92rem; flex-basis:100%; margin:0; }
.variant-tag{
  display:inline-flex; align-items:center; gap:.5em; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-soft); border:1px solid var(--k-line); border-radius:100px; padding:.4em .9em; background:rgba(217,154,78,.06);
}
.variant-tag b{ color:var(--neon-bright); font-weight:700; }
.variant-note{ color:var(--on-k-mute); font-size:.86rem; max-width:62ch; margin:.4em 0 0; }
.variant-block{ margin:18px 0 40px; }
.variant-frame{
  border:1px solid var(--k-line-soft); border-radius:14px; overflow:hidden; margin-top:14px;
  box-shadow:0 30px 80px -50px #000; position:relative;
}

/* Mini-Demo Flächen */
.demo-dark{ background:var(--k-bg-2); }
.demo-paper{ background:var(--paper); color:var(--on-light); }
.demo-paper h2,.demo-paper h3{ color:var(--blue-ink); }
.demo-pad{ padding:clamp(30px,5vw,68px); }

/* Anker-Motiv klein */
.anchor-mark{ color:var(--gold-line); opacity:.8; }

/* Tau / Seil */
.rope{
  height:8px; width:100%; border-radius:8px;
  background:repeating-linear-gradient(45deg, #b8975f 0 6px, #9c7c46 6px 12px);
  opacity:.55; box-shadow:0 1px 0 rgba(0,0,0,.3) inset;
}

/* Galerie-Spalten Masonry-ish */
.gal-cols{ columns:3; column-gap:10px; }
.gal-cols img{ width:100%; border-radius:8px; margin-bottom:10px; break-inside:avoid; transition:.5s var(--ease); }
.gal-cols a{ display:block; position:relative; overflow:hidden; border-radius:8px; }
.gal-cols a:hover img{ transform:scale(1.04); filter:brightness(1.08); }
@media(max-width:760px){ .gal-cols{ columns:2; } }

/* Speisekarte-Listenzeile (ohne Preis, edel) */
.menu-line{ display:flex; align-items:baseline; gap:.7em; padding:.7em 0; border-bottom:1px solid var(--k-line-soft); }
.menu-line .nm{ font-family:var(--serif); font-size:1.25rem; color:var(--on-k); }
.menu-line .ds{ color:var(--on-k-mute); font-size:.9rem; }
.menu-line .pr{ margin-left:auto; font-family:var(--serif); color:var(--gold-soft); font-size:1.1rem; white-space:nowrap; }

/* Takeaway-Produktkarte */
.ta-card{ background:var(--k-panel); border:1px solid var(--k-line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; transition:.4s var(--ease); }
.ta-card .ph{ aspect-ratio:4/3; overflow:hidden; }
.ta-card .ph img{ width:100%; height:100%; object-fit:cover; transition:.6s var(--ease); }
.ta-card:hover .ph img{ transform:scale(1.05); }
.ta-card .body{ padding:16px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
.ta-card .add{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ta-card .pill-add{ width:34px; height:34px; border-radius:50%; border:1px solid var(--neon); color:var(--neon-bright); display:grid; place-items:center; background:transparent; cursor:pointer; transition:.3s var(--ease); }
.ta-card .pill-add:hover{ background:var(--neon); color:#04121b; box-shadow:0 0 16px -2px var(--neon-glow); }

/* Theke-des-Tages „frisch" Strip */
.fresh-strip{ display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; }
.fresh-strip::-webkit-scrollbar{ height:6px; }
.fresh-strip::-webkit-scrollbar-thumb{ background:var(--k-line); border-radius:6px; }
.fresh-card{ flex:0 0 220px; scroll-snap-align:start; background:var(--k-bg-2); border:1px solid var(--k-line); border-radius:12px; overflow:hidden; }
.fresh-card .ph{ aspect-ratio:1; overflow:hidden; }
.fresh-card .ph img{ width:100%; height:100%; object-fit:cover; }
.fresh-card .body{ padding:14px 16px; }

/* ---------- Bewertungen (Reviews) ---------- */
.rev-card{ background:var(--paper-2); border:1px solid var(--paper-line); border-radius:12px; padding:28px; display:flex; flex-direction:column; gap:14px; }
.rev-stars{ color:#e0a51c; letter-spacing:3px; font-size:1.05rem; }
.rev-card p{ margin:0; font-size:.98rem; color:var(--on-light-soft); line-height:1.7; }
.rev-author{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.rev-author .av{ width:42px; height:42px; border-radius:50%; background:var(--ink); color:var(--gold-soft); display:grid; place-items:center; font-family:var(--serif); font-size:1.1rem; font-weight:600; flex:none; }
.rev-author b{ font-weight:600; font-size:.92rem; color:var(--on-light); }
.rev-author span{ font-size:.78rem; color:var(--on-light-mute); }
.google-head{ display:inline-flex; align-items:center; gap:12px; }
.google-head .g-rating{ font-family:var(--serif); font-size:2rem; font-weight:600; color:var(--blue-ink); }

/* ---------- Instagram-Raster ---------- */
.insta-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.insta-grid a{ aspect-ratio:1; overflow:hidden; position:relative; border-radius:6px; }
.insta-grid img{ width:100%; height:100%; object-fit:cover; transition:.5s var(--ease); }
.insta-grid a::after{ content:""; position:absolute; inset:0; background:rgba(46,197,240,0); transition:.4s var(--ease); }
.insta-grid a:hover img{ transform:scale(1.08); }
.insta-grid a:hover::after{ background:rgba(46,197,240,.22); }
@media(max-width:760px){ .insta-grid{ grid-template-columns:repeat(3,1fr); } }

/* kleine Helfer */
.k-eyebrow{ font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-soft); display:inline-flex; gap:.7em; align-items:center; }
.k-eyebrow::before{ content:""; width:28px; height:1px; background:var(--gold-line); opacity:.7; }
.swatch{ height:64px; border-radius:8px; border:1px solid var(--k-line-soft); display:flex; align-items:flex-end; padding:8px; font-size:.66rem; letter-spacing:.04em; }
.pin{ position:absolute; z-index:2; }

/* ---------- Nav: Bestellen-Outline-Button (sitewide) ---------- */
.konzept .nav-actions .btn--ghost{ --bg:transparent; --fg:var(--on-k); --bd:var(--k-line); }
.konzept .nav-actions .btn--ghost:hover{ --bd:var(--neon); color:var(--neon-bright); box-shadow:0 0 0 1px var(--neon), 0 0 14px -2px var(--neon-glow); }

/* ---------- Button-Paare: gleich breit & hoch ---------- */.hero-cta, .btn-pair{ display:flex; gap:12px; flex-wrap:wrap; align-items:stretch; max-width:520px; }
.hero-cta.center, .btn-pair.center{ margin-inline:auto; justify-content:center; }
.hero-cta > a, .hero-cta > button, .btn-pair > a, .btn-pair > button{ flex:1 1 0; min-width:150px; }
.hero-cta > a, .hero-cta > button{ justify-content:center; }

/* ---------- Mobile Floating-Bar (sitewide, einheitlich) ---------- */
/* ===== Mobile Floating: Reservier-Mini-Widget + Speisekarte/Bestellen ===== */
.mfab{ position:fixed; left:0; right:0; bottom:0; z-index:76; display:none; flex-direction:column; align-items:stretch;
  padding:0 12px calc(10px + env(safe-area-inset-bottom)); pointer-events:none;
  opacity:0; transform:translateY(12px); transition:opacity .28s var(--ease), transform .28s var(--ease); }
@media(max-width:720px){
  .mfab{ display:flex; }
  /* Über dem Hero unsichtbar; erst wenn unter den Hero gescrollt wird sichtbar. */
  body[data-past-hero="true"] .mfab{ opacity:1; transform:none; }
  body:not([data-past-hero="true"]) .mfab{ pointer-events:none; }
}
@media(prefers-reduced-motion:reduce){ .mfab{ transition:none; } }
.mfab>*{ pointer-events:auto; }
.mfab-reserve{ align-self:flex-end; width:auto; margin-bottom:9px; background:var(--k-panel);
  border:1.6px solid var(--gold-deep); border-radius:15px; box-shadow:0 20px 48px -20px rgba(0,0,0,.75); overflow:hidden;
  animation:mfabPulse 2.4s ease-in-out infinite; transition:width .28s var(--ease); }
/* Aufgeklappt (Schritt 2/3/Fallback sichtbar) darf das Widget breiter werden */
.mfab[data-resv="open"] .mfab-reserve{ width:min(288px,86%); }
.mfab[data-resv="open"] .mfab-reserve[data-wide="true"]{ width:min(380px,96%); }
@keyframes mfabPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(231,193,115,0), 0 20px 48px -20px rgba(0,0,0,.75); border-color:var(--gold-deep); }
  50%{ box-shadow:0 0 0 3px rgba(231,193,115,.30), 0 20px 48px -20px rgba(0,0,0,.75); border-color:var(--gold-bright); }
}
@media(prefers-reduced-motion:reduce){ .mfab-reserve{ animation:none; } }
.mfab-resv-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 14px;
  background:rgba(231,193,115,.09); border:0; color:var(--gold-soft); font-family:var(--sans); font-weight:700; font-size:.92rem; cursor:pointer; }
.mfab-resv-head span{ display:inline-flex; align-items:center; gap:.5em; }
.mfab-resv-head .chev{ transition:transform .25s var(--ease); flex:none; }
.mfab[data-resv="closed"] .mfab-resv-head .chev{ transform:rotate(180deg); }
.mfab-resv-body{ padding:12px 14px 14px; display:grid; gap:9px; }
.mfab[data-resv="closed"] .mfab-resv-body{ display:none; }
.mfab-controls{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mfab-controls select{ width:100%; padding:.62em .55em; border-radius:9px; background:var(--k-bg-2); border:1px solid var(--k-line);
  color:var(--on-k); font-family:var(--sans); font-size:.9rem; -webkit-appearance:none; appearance:none; }
.mfab-controls select.full{ grid-column:1 / -1; }
.mfab-controls select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(231,193,115,.16); }
.mfab-step{ display:grid; gap:9px; }
.mfab-step[hidden]{ display:none; }
.mfab-resv-body .kbtn{ width:100%; }
.mfab-resv-body .kbtn[disabled]{ opacity:.55; cursor:default; }
.mfab-ok{ margin:2px 0 6px; font-size:.86rem; color:var(--neon-bright); text-align:center; line-height:1.4; }
/* Schritt 2 — Kontaktfelder */
.mfab-input{ width:100%; padding:.68em .7em; border-radius:9px; background:var(--k-bg-2); border:1px solid var(--k-line);
  color:var(--on-k); font-family:var(--sans); font-size:.9rem; }
.mfab-input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(231,193,115,.16); }
.mfab-chip{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--k-bg-2);
  border:1px solid var(--k-line); border-radius:9px; padding:9px 11px; }
.mfab-chip b{ color:var(--gold-soft); font-family:var(--serif); font-size:.96rem; font-weight:600; }
.mfab-chip button{ background:none; border:0; color:var(--neon-bright); cursor:pointer; font-size:.8rem; font-family:var(--sans); }
.mfab-check{ display:flex; gap:8px; align-items:flex-start; font-size:.76rem; color:var(--on-k-soft); cursor:pointer; margin:1px 0; }
.mfab-check input{ margin-top:2px; accent-color:var(--gold); flex:none; }
.mfab-err{ margin:0; font-size:.8rem; color:#f0a48f; }
.mfab-again{ display:block; text-align:center; font-size:.84rem; color:var(--neon-bright); text-decoration:underline; }
.mfab-phone-txt{ margin:0; font-size:.82rem; color:var(--on-k-soft); text-align:center; line-height:1.45; }
/* Floating-Bar: KEIN eigener Container/Hintergrund — nur die beiden Buttons.
   Die Buttons tragen ihre eigene Hintergrundfarbe; die Leiste selbst ist transparent. */
.mfab-bar{ display:flex; gap:10px; padding:0; background:transparent; backdrop-filter:none;
  border:0; border-radius:0; box-shadow:none; }
.mfab-btn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.4em; padding:.98em 1em; border-radius:12px;
  font-family:var(--sans); font-weight:700; font-size:.94rem; letter-spacing:.02em;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.7); }
.mfab-btn.menu{ flex:1; background:var(--k-panel); border:1px solid var(--neon); color:var(--neon-bright); }
.mfab-btn.order{ flex:1; background:var(--grad-gold); color:var(--on-gold); border:1px solid var(--gold-deep); box-shadow:0 12px 28px -12px var(--gold-glow); }

/* ---------- Standort-Sektion (Mitten in Hamburg) ---------- */
.standort-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,54px); align-items:center; }
@media(max-width:820px){ .standort-grid{ grid-template-columns:1fr; } }