/* ============================================================
   PREMIUM POLISH LAYER – Pizza Backhaus
   Additive Veredelung: edler, moderner, hochwertiger.
   Lädt NACH style.css & home.css – nur feine Überschreibungen.
   ============================================================ */

:root{
  --lux-gold-1:#f6dca0;
  --lux-gold-2:#e3b873;
  --lux-gold-3:#c79a45;
  --lux-gold-deep:#9c7522;
  --lux-shadow-soft:0 2px 8px rgba(60,42,12,.06), 0 12px 32px rgba(60,42,12,.08);
  --lux-shadow-lift:0 6px 18px rgba(60,42,12,.10), 0 26px 60px rgba(60,42,12,.16);
  --lux-hairline:rgba(156,117,34,.22);
}

/* ---- Feineres Text-Rendering global ---- */
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
body{ letter-spacing:.002em; }

/* ---- Premium Textauswahl & Scrollbar ---- */
::selection{ background:rgba(199,154,69,.26); color:#241a13; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:#f1e9dc; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--lux-gold-2),var(--lux-gold-deep)); border-radius:8px; border:2px solid #f1e9dc; }
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,var(--lux-gold-1),var(--lux-gold-3)); }

/* ---- Eyebrow Labels: edler, weiter gesperrt, Gold-Hairlines ---- */
.eyebrow{
  letter-spacing:.42em !important;
  font-weight:600;
  background:linear-gradient(90deg,var(--lux-gold-3),var(--lux-gold-deep));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--lux-gold-deep);
  display:inline-flex; align-items:center; gap:.85em;
}
.eyebrow::before,.eyebrow::after{
  content:''; width:2.2em; height:1px;
  background:linear-gradient(90deg,transparent,var(--lux-gold-3));
  opacity:.8;
}
.eyebrow::after{ background:linear-gradient(90deg,var(--lux-gold-3),transparent); }

/* ---- Gold-Akzent / kursive Headlines: metallischer Gold-Verlauf ---- */
.accent, h1 em, h2 em, h3 em, .hero-title em{
  background:linear-gradient(100deg,var(--lux-gold-1) 0%,var(--lux-gold-2) 38%,var(--lux-gold-3) 70%,var(--lux-gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 1px rgba(120,86,20,.18));
}

/* ---- Primary Buttons: Luxus-Gold mit Sheen & weichem Lift ---- */
.btn-primary, .nav-cta{
  background:linear-gradient(145deg,var(--lux-gold-1) 0%,var(--lux-gold-2) 45%,var(--lux-gold-3) 100%) !important;
  color:#3a2a0c !important;
  border:1px solid rgba(156,117,34,.55) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 8px 22px rgba(156,117,34,.28), 0 2px 6px rgba(60,42,12,.12) !important;
  position:relative; overflow:hidden;
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1), filter .3s ease;
}
.btn-primary::after, .nav-cta::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
  transform:translateX(-120%); transition:transform .8s cubic-bezier(.16,1,.3,1); pointer-events:none;
}
.btn-primary:hover, .nav-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 14px 34px rgba(156,117,34,.36), 0 4px 10px rgba(60,42,12,.16) !important;
  filter:saturate(1.05) brightness(1.02);
}
.btn-primary:hover::after, .nav-cta:hover::after{ transform:translateX(120%); }

/* ---- Sekundär-/Ghost-Buttons: feine Gold-Hairline ---- */
.btn:not(.btn-primary){
  border:1px solid var(--lux-hairline) !important;
  transition:border-color .35s ease, background .35s ease, transform .35s ease;
}
.btn:not(.btn-primary):hover{ border-color:rgba(156,117,34,.5) !important; transform:translateY(-1px); }

/* ---- Cards: tiefere, weichere Luxus-Schatten + Gold-Hairline beim Hover ---- */
[class*="card"], .spec-card, .klassiker-card, .kueche-card{
  box-shadow:var(--lux-shadow-soft);
  transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1);
}
[class*="card"]:hover, .spec-card:hover, .klassiker-card:hover, .kueche-card:hover{
  box-shadow:var(--lux-shadow-lift);
}

/* ---- Navbar: feine Gold-Hairline unten, edleres Glas ---- */
header, .site-header, nav.navbar, .glass-nav{
  border-bottom:1px solid var(--lux-hairline);
}

/* ---- Logo Akzent: metallischer Gold-Verlauf ---- */
.logo .accent, .brand .accent, a.logo em{
  background:linear-gradient(100deg,var(--lux-gold-1),var(--lux-gold-2) 50%,var(--lux-gold-3));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ---- Feine goldene Trennlinien (hr) ---- */
hr{ border:none; height:1px; background:linear-gradient(90deg,transparent,var(--lux-hairline),transparent); }

/* ---- Bilder in Cards: dezenter, edler Zoom ---- */
figure img, .kueche-card img, .spec-card img{ transition:transform .8s cubic-bezier(.16,1,.3,1); }

/* ---- Reduced Motion respektieren ---- */
@media (prefers-reduced-motion: reduce){
  .btn-primary, .nav-cta, [class*="card"], figure img{ transition:none !important; }
  .btn-primary::after, .nav-cta::after{ display:none; }
  .btn-primary:hover, .nav-cta:hover, [class*="card"]:hover{ transform:none; }
}


/* ===================== PBHPRO ENHANCE START =====================
   Site-wide Pro-Max polish + mobile responsiveness.
   Self-contained, easy rollback: delete from START to END marker.
   ============================================================== */
html{scroll-behavior:smooth;}
*{-webkit-tap-highlight-color:transparent;}
img{max-width:100%;height:auto;}
/* Accessible focus rings */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold,#e7b86b);outline-offset:2px;border-radius:6px;}
/* Comfortable tap targets on touch devices */
@media(hover:none) and (pointer:coarse){
  a.btn,button,.btn,.nav-toggle,.nav-links a,[role=button]{min-height:44px;}
}
/* Buttons: smoother motion + press feedback (only where .btn used) */
.btn{transition:transform .18s var(--ease-out,ease),box-shadow .18s var(--ease-out,ease),background .2s ease;will-change:transform;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
/* Cards: gentle hover lift for interactive cards */
a .spec-card,a.card,.spec-card,.classic-card,.review-card{transition:transform .25s var(--ease-out,ease),box-shadow .25s var(--ease-out,ease);}
@media(hover:hover){
  a:hover>.spec-card,a.card:hover,.classic-card:hover{transform:translateY(-4px);}
}
/* FAQ accordion smoothness */
.faq-item,.faq-q,details summary{transition:background .2s ease,border-color .2s ease;}
/* ---- Tablet ---- */
@media(max-width:768px){
  :root{--pad-page:1.1rem;}
}
/* ---- Phone ---- */
@media(max-width:600px){
  :root{--pad-page:1rem;}
  .btn{width:auto;}
  h1{line-height:1.05;}
  .hero h1,h1.hero-title{word-break:break-word;}
  section{padding-left:1rem;padding-right:1rem;}
}
/* ---- Small phone ---- */
@media(max-width:400px){
  :root{--pad-page:.85rem;}
  body{font-size:15px;}
}
/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .btn,.spec-card,a.card,.classic-card{transition:none!important;transform:none!important;}
}
/* ===================== PBHPRO ENHANCE END ===================== */


/* ===================== PBHPRO ENHANCE v2 START =====================
   Higher-impact Pro-Max refinements: fluid type, rhythm, card polish.
   Conservative & token-based; rollback = delete to v2 END marker.
   ================================================================== */
/* (Base heading sizes left to the site's own design; we only refine rhythm & polish) */
p,li{line-height:1.6;}
/* Slightly richer card depth + rounder corners where cards exist */
.spec-card,.classic-card,.review-card,.faq-item,.info-card,.hours-card{border-radius:18px;}
@media(hover:hover){
  .spec-card,.classic-card,.review-card{box-shadow:0 6px 22px rgba(40,20,8,.10);}
  .spec-card:hover,.classic-card:hover,.review-card:hover{box-shadow:0 14px 40px rgba(40,20,8,.18);}
}
/* Primary CTA shimmer-free, just a refined gold focus + lift consistency */
.btn-primary,.nav-cta,a.nav-cta{letter-spacing:.04em;}
/* Section vertical rhythm: keep generous but consistent */
@media(min-width:901px){
  section{scroll-margin-top:88px;}
}
/* Anchor offset so jump links aren't hidden behind sticky nav */
[id]{scroll-margin-top:80px;}
/* ---- Phone refinements ---- */
@media(max-width:600px){
  h1{letter-spacing:-.01em;}
  .btn,.nav-cta,a.nav-cta,button.btn{width:100%;justify-content:center;}
  .hero-actions,.cta-row,.btn-row{flex-direction:column;gap:.7rem;}
  .grid-2,.grid-3,.two-col,.three-col{grid-template-columns:1fr!important;}
  section{padding-top:2.4rem;padding-bottom:2.4rem;}
}
/* ===================== PBHPRO ENHANCE v2 END ===================== */

/* ===================== PBHPRO ENHANCE v3 START =====================
   Brand: Warm-Editorial family (terracotta / cream / clay on warm dark).
   Goal: accessibility + tasteful polish. Additive only; does NOT alter
   the intentional desktop hero type scale. Fully reversible (remove block).
   ================================================================== */

/* --- a11y: stronger keyboard focus ring (visible on warm dark) --- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold-bright, #f5c453);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- a11y: tap targets >= 44px for nav + footer + inline links --- */
.nav-links a, .site-footer a, footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* --- a11y: contrast bump for small muted inline links --- */
.site-footer a, footer a {
  color: var(--ink-primary, #f3ece3);
  text-decoration-color: rgba(245,196,83,0.45);
  transition: color .18s var(--ease-out, ease), text-decoration-color .18s ease;
}
.site-footer a:hover, footer a:hover {
  color: var(--gold-bright, #f5c453);
  text-decoration-color: var(--gold-bright, #f5c453);
}

/* --- polish: consistent pressed/active feedback on buttons --- */
button:active, .btn:active, a.btn:active,
[class*='cta']:active, [class*='Cta']:active {
  transform: translateY(1px) scale(0.995);
}

/* --- polish: link underline offset for readability --- */
p a, .prose a, article a {
  text-underline-offset: 3px;
}

/* --- mobile rhythm: comfortable touch spacing on phones --- */
@media (max-width: 600px) {
  .nav-links a, .site-footer a, footer a { min-height: 46px; }
  .btn, a.btn, button { min-height: 46px; }
}

/* ===================== PBHPRO ENHANCE v3 END ===================== */


/* ============================================================
   PBHPRO READABLE v4 — Menu price legibility
   Goal: prices clearly readable; size labels (24/27/30/34x46..)
   visually separated from the price number. Additive only.
   ============================================================ */
.m-prices{
  font-style: normal !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  color: #241a13 !important;
  letter-spacing: 0 !important;
  line-height: 1.7 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end;
  gap: 0.32rem 0.9rem !important;
}
.m-prices .pbh-pp{
  display: inline-flex !important;
  align-items: baseline;
  gap: 0.30rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700 !important;
  font-style: normal !important;
  color: #1f1611 !important;
}
.m-prices .pbh-size-lbl{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #7d5e22 !important;
  opacity: 1 !important;
  vertical-align: baseline !important;
  background: rgba(184,154,85,0.18);
  border: 1px solid rgba(184,154,85,0.45);
  border-radius: 5px;
  padding: 0.16em 0.36em;
  margin-right: 0.30rem !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (max-width: 600px){
  .m-prices{ font-size: 0.95rem !important; gap: 0.3rem 0.62rem !important; justify-content: flex-start; }
  .m-prices .pbh-size-lbl{ font-size: 0.6rem !important; padding: 0.14em 0.32em; }
}


/* ============================================================
   PBH MENU LAYOUT v7 — Speisekarte Zeilen-Layout
   Punkt-Leader verbindet Gericht mit Preisen; ruhigerer Rhythmus.
   ============================================================ */
@media (min-width: 860px){
  .m-item{ align-items:center; gap:0; }
  .m-body{ flex:1 1 auto; display:flex; align-items:baseline; min-width:0; padding-right:6px; }
  .m-body::after{
    content:""; flex:1 1 12px; margin:0 12px; min-width:18px;
    border-bottom:2px dotted rgba(140,110,60,0.30);
    transform:translateY(-3px);
  }
  .m-item:hover .m-body::after{ border-bottom-color:rgba(176,141,87,0.6); }
  .m-prices{ flex:0 0 auto !important; white-space:nowrap; }
}
.m-item{ margin:5px 0; padding-top:13px; padding-bottom:13px; }


/* ============================================================
   PBH HERO + CONTROLS v8 — Speisekarte Hero & Steuer-Panel
   Hero bekommt unteren Verlauf (Lesbarkeit); Toggle + Hinweis +
   Favoriten/Teilen/Drucken werden zu einem Panel gruppiert.
   ============================================================ */
.page-header{ position:relative; }
.page-header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:42%;
  background:linear-gradient(to bottom, rgba(13,11,10,0) 0%, rgba(13,11,10,0.55) 70%, rgba(13,11,10,0.92) 100%);
  pointer-events:none; z-index:0;
}
.page-header-inner{ position:relative; z-index:1; }
.page-header h1{ text-shadow:0 2px 24px rgba(0,0,0,0.45); }
.page-header-inner p, .page-header p{ color:#f3e9da !important; text-shadow:0 1px 12px rgba(0,0,0,0.6); }

.pbh-pt-wrap{
  max-width:760px; margin:22px auto 0; padding:20px 20px 16px;
  background:linear-gradient(180deg, rgba(255,253,250,0.97), rgba(250,244,235,0.97));
  border:1px solid rgba(176,141,87,0.28); border-bottom:none;
  border-radius:18px 18px 0 0;
  box-shadow:0 -1px 0 rgba(255,255,255,0.6) inset;
}
.pbh-f2-toolbar{
  max-width:760px; margin:0 auto 26px; padding:6px 20px 18px;
  background:rgba(250,244,235,0.97);
  border:1px solid rgba(176,141,87,0.28); border-top:none;
  border-radius:0 0 18px 18px;
  box-shadow:0 14px 36px rgba(60,42,12,0.12);
}


/* ============================================================
   PBH STRUCTURE v9 — Einheitliche Inhaltsspalte (980px)
   Alle Bloecke unter dem Hero teilen denselben linken/rechten
   Rand wie die Gerichteliste -> sauberes, professionelles Raster.
   ============================================================ */
.pbh-pt-wrap,
.pbh-f2-toolbar,
.pbh-search-wrap{
  max-width:980px; width:100%;
  margin-left:auto; margin-right:auto;
  box-sizing:border-box;
}
.pbh-pt-wrap{ margin-top:26px; margin-bottom:0; padding:18px 26px 14px; border-radius:18px 18px 0 0; border-bottom:none; }
.pbh-f2-toolbar{ margin-top:0; margin-bottom:30px; padding:8px 26px 18px; border-radius:0 0 18px 18px; border-top:none; }

.pbh-alg-head{
  max-width:980px; margin:10px auto 0;
  display:flex; justify-content:flex-start; text-align:left; padding:0;
}
.pbh-f3-bar{
  max-width:980px; width:100%; margin:6px auto 0;
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:flex-start; align-items:center; padding:0;
}
.pbh-search-wrap{ margin-top:14px; margin-bottom:34px; }
.pbh-search{ max-width:none; width:100%; }
.pbh-reco{ max-width:980px; margin-left:auto; margin-right:auto; }


/* ===== PBH STRUCTURE FIX v10 ===== */
/* Override JS-injected inline styles so the under-hero blocks share one 980px content column */
.pbh-pt-wrap,.pbh-f2-toolbar,.pbh-search-wrap,.pbh-f3-bar,.pbh-reco{max-width:980px !important;margin-left:auto !important;margin-right:auto !important;box-sizing:border-box !important;width:100% !important;}
.pbh-f3-bar{justify-content:flex-start !important;padding-left:16px !important;padding-right:16px !important;}
.pbh-alg-head{justify-content:flex-start !important;padding-left:0 !important;}
.pbh-search-wrap{padding-left:16px !important;padding-right:16px !important;}
/* remove faint ghost-text glow behind the section eyebrow */
.section-header .eyebrow{text-shadow:none !important;}
.section-header .eyebrow::before,.section-header .eyebrow::after{text-shadow:none !important;}
/* ===== end PBH STRUCTURE FIX v10 ===== */


/* ==========================================================
   RESPONSIVE FIX - Menu rows on tablet & phone
   Added to make the size/price block reflow cleanly on
   small screens instead of cramming 5 columns in one line.
   ========================================================== */

@media (max-width: 760px){
  .m-item{ flex-wrap: wrap; align-items: flex-start; }
  .m-body{ flex: 1 1 100%; }
  .m-leader, .m-dots{ display: none !important; }
  .m-prices{ flex: 1 1 100%; justify-content: flex-start !important; margin-top: 8px; gap: 0.4rem 0.8rem !important; }
  .pbh-fav, .m-addbtn{ flex: 0 0 auto; }
}

@media (max-width: 560px){
  .m-item{ padding: 14px 14px !important; gap: 10px !important; }
  .m-name{ font-size: 1rem !important; }
  .m-prices{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px !important; text-align: center; width: 100%; }
  .m-prices .pbh-pp{ flex-direction: column; align-items: center !important; gap: 2px !important; justify-content: center; }
  .m-addbtn{ width: 42px !important; height: 42px !important; }
}

/* ==========================================================
   FILTERLEISTE v3 - Handy: Filter einklappbar, .pbh-reco bleibt
   Statt die ganze Gruppe zu verstecken, blenden wir im
   geschlossenen Zustand gezielt nur die Filter-Kinder aus.
   .pbh-reco (Beliebt diese Woche) bleibt immer sichtbar.
   ========================================================== */

.pbh-f3-toggle{ display: none; }

@media (max-width: 760px){
  .pbh-f3-toggle{
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 28px);
    max-width: 520px;
    margin: 10px auto 0;
    padding: 13px 16px;
    font: inherit;
    font-weight: 600;
    font-size: 1rem;
    color: #7d5e22;
    background: rgba(184,154,85,0.12);
    border: 1px solid rgba(184,154,85,0.5);
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
  }
  .pbh-f3-toggle:hover{ background: rgba(184,154,85,0.2); }
  .pbh-f3-tg-arrow{ transition: transform 0.2s; font-size: 0.8em; }
  .pbh-f3-toggle.is-open .pbh-f3-tg-arrow{ transform: rotate(180deg); }

  /* Gruppe selbst ist nur Container (kein eigenes Layout erzwingen) */
  .pbh-f3-group{ display: block !important; }

  /* Geschlossen: alle Filter-Kinder ausblenden, .pbh-reco bleibt */
  .pbh-f3-group > .pbh-f3-bar,
  .pbh-f3-group > .pbh-alg,
  .pbh-f3-group > .pbh-alg-panel,
  .pbh-f3-group > .pbh-active-wrap,
  .pbh-f3-group > .pbh-search-wrap{ display: none !important; }

  /* Geoeffnet: Filter-Kinder anzeigen, sauber gestapelt */
  .pbh-f3-group.pbh-f3-open > .pbh-f3-bar{ display: flex !important; flex-direction: column; gap: 8px; width: calc(100% - 28px); max-width: 520px; margin: 10px auto 0 !important; padding: 0 !important; }
  .pbh-f3-group.pbh-f3-open > .pbh-alg,
  .pbh-f3-group.pbh-f3-open > .pbh-active-wrap,
  .pbh-f3-group.pbh-f3-open > .pbh-search-wrap{ display: block !important; width: calc(100% - 28px); max-width: 520px; margin: 10px auto 0 !important; }
  .pbh-f3-group.pbh-f3-open > .pbh-alg-panel{ width: calc(100% - 28px); max-width: 520px; margin: 0 auto !important; }

  .pbh-f3-group .pbh-f3-chip,
  .pbh-f3-group .pbh-f3-sel,
  .pbh-f3-group .pbh-jump{ width: 100%; box-sizing: border-box; padding: 11px 14px; font-size: 0.96rem; }
}


/* ==========================================================
   KONTAKTFORMULAR-POLISH - helle, edle Eingabefelder
   Additiv & reversibel. Ueberschreibt nur #contact-form Felder.
   ========================================================== */
#contact-form input,#contact-form textarea{background:linear-gradient(180deg,#fffdf8,#f6efe2)!important;border:1px solid rgba(191,155,48,.35)!important;border-radius:14px!important;color:#3a2c16!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 14px -10px rgba(120,86,20,.4)!important;transition:border-color .3s ease,box-shadow .3s ease!important;padding:14px 16px!important;}
#contact-form input::placeholder,#contact-form textarea::placeholder{color:#a08a5e!important;opacity:.9!important;}
#contact-form input:focus,#contact-form textarea:focus{outline:0!important;border-color:rgba(191,155,48,.75)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 3px rgba(191,155,48,.15)!important;}
/* ============ Ende KONTAKTFORMULAR-POLISH ============ */


/* === RECHTSSEITEN-HEADER-FIX (Impressum/Datenschutz) === */
.page-header--plain{
  padding-top: 120px;
  padding-bottom: 32px;
}
@media (max-width: 600px){
  .page-header--plain{
    padding-top: 96px;
    padding-bottom: 24px;
  }
}
/* === Ende RECHTSSEITEN-HEADER-FIX === */


/* === FEINSCHLIFF-RUNDE: Rhythmus Rechtsseiten === */
.legal-content h2{
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(230,178,94,0.22);
}
.legal-content h2:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.legal-content p{
  line-height: 1.8;
}
@media (max-width: 600px){
  .legal-content h2{ margin-top: 1.9rem; padding-top: 1.3rem; }
}
/* === Ende FEINSCHLIFF-RUNDE === */


/* === LINK-ARROW-UX: bessere Tappbarkeit + Hover-Affordance === */
.link-arrow{
  transition: transform .18s ease, color .18s ease;
  will-change: transform;
}
.link-arrow:hover,
.link-arrow:focus-visible{
  transform: translateX(4px);
}
@media (max-width: 600px){
  .link-arrow{
    padding-top: 6px;
    padding-bottom: 6px;
  }
}
/* === Ende LINK-ARROW-UX === */


/* === WARENKORB-UX: Z-Index, Tap-Targets, Entfernen-Button === */
/* 1) Warenkorb-Overlay & Panel ueber die sticky Navigation legen,
      damit Titel und Schliessen-Button nicht verdeckt werden */
.cart-overlay{ z-index: 1100 !important; }
.cart-panel{ z-index: 1101 !important; }

/* 2) Mengen-Stepper: groessere, fingerfreundliche Tap-Flaeche */
.cart-panel .qty button{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
}

/* 3) Schliessen-Button etwas groesser & besser tappbar */
.cart-close{
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 4) 'Entfernen' klarer als interaktives Element + groessere Tap-Flaeche */
.cart-row-del{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s ease, opacity .15s ease;
}
.cart-row-del:hover,
.cart-row-del:focus-visible{
  color: #b4452f;
  opacity: 1;
}
/* === Ende WARENKORB-UX === */


/* === VORAUSSICHTLICH-BOX-KOMPAKT: Info-/Trinkgeld-Box im Warenkorb verschlanken === */
.pbh-cart-box{
  padding: 9px 13px !important;
}
/* Abstaende zwischen den Bloecken reduzieren */
.pbh-cart-box .pbh-prog{
  margin-top: 6px !important;
  margin-bottom: 8px !important;
}
.pbh-cart-box .pbh-tip-head{
  margin-top: 7px !important;
}
.pbh-cart-box .pbh-tip-row{
  margin-top: 6px !important;
  gap: 6px !important;
}
.pbh-cart-box .pbh-mini-act{
  margin-top: 6px !important;
}
/* Trinkgeld-Buttons kompakter (bleiben gut tappbar) */
.pbh-cart-box .pbh-tip-row button{
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
}
/* 'Bestellung kopieren' etwas flacher */
.pbh-mini-act{
  min-height: 34px !important;
}
/* === Ende VORAUSSICHTLICH-BOX-KOMPAKT === */


/* === TRINKGELD-BOX-NOCH-KOMPAKTER: weiter verschlanken === */
/* 'Bestellung kopieren' als flacher Textlink statt grossem Button */
.pbh-mini-act{
  min-height: 0 !important;
  padding: 2px 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  width: auto !important;
  justify-content: flex-start !important;
}
.pbh-cart-box .pbh-mini-act{ margin-top: 4px !important; }

/* Trinkgeld-Buttons noch etwas kompakter */
.pbh-cart-box .pbh-tip-row button{
  min-height: 30px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  font-size: .82rem !important;
}
.pbh-cart-box .pbh-tip-row{ gap: 5px !important; margin-top: 5px !important; }

/* ETA-Zeile, Gratis-Text & Fortschritt enger setzen */
.pbh-cart-box .pbh-prog{ margin-top: 5px !important; margin-bottom: 6px !important; }
.pbh-cart-box .pbh-tip-head{ margin-top: 5px !important; }
/* === Ende TRINKGELD-BOX-NOCH-KOMPAKTER === */


/* === CARD-TIEFE-3D (additiv, reversibel) === */
/* Verfeinert die Tiefe der Kueche-Cards: mehrschichtiger, weicher Ruheschatten
   und ein harmonisierter, eindeutiger Hover-Lift. !important, da konkurrierende
   .cat-card Schatten-Regeln in style.css/home.css existieren. */
.cat-card{
  box-shadow:0 1px 2px rgba(60,42,12,0.05),
             0 6px 16px rgba(60,42,12,0.08),
             0 14px 32px rgba(60,42,12,0.06) !important;
}
.cat-card:hover,
.cat-card:focus-within{
  transform:translateY(-6px) !important;
  box-shadow:0 4px 10px rgba(60,42,12,0.10),
             0 18px 36px rgba(60,42,12,0.16),
             0 28px 56px rgba(60,42,12,0.12) !important;
}
@media (max-width:600px){
  .cat-card{box-shadow:0 1px 2px rgba(60,42,12,0.05),0 6px 14px rgba(60,42,12,0.07) !important;}
}
/* === Ende CARD-TIEFE-3D === */