/* ========================================
   BERLIN DÖNER STEINFURT – MAIN STYLES
   Dark theme matching the reference image
   ======================================== */

:root {
  --bg: #0a0a0a;
  --bg-card: #141414;
  --bg-light: #1a1a1a;
  --red: #e63946;
  --red-dark: #c1121f;
  --green: #2d6a4f;
  --green-light: #40916c;
  --text: #f5f5f5;
  --text-dim: #a0a0a0;
  --border: #2a2a2a;
  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1200px;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
  overflow-x:hidden;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }

/* ── Header ──────────────────────────── */
header {
  position:sticky; top:0; z-index:100;
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border);
}
.nav {
  max-width: var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 20px; gap:20px;
}
.logo img { height:55px; width:auto; }
header nav { display:flex; gap:28px; align-items:center; }
header nav a {
  font-size:0.92rem; font-weight:600; text-transform:uppercase;
  letter-spacing:0.5px; color: var(--text-dim);
  transition: color .2s; position:relative;
}
header nav a:hover, header nav a.active { color: var(--red); }
header nav a.active::after {
  content:''; position:absolute; bottom:-6px; left:0; right:0;
  height:2px; background: var(--red); border-radius:2px;
}
.btn {
  display:inline-flex; align-items:center; gap:8px;
  background: var(--red); color:#fff;
  padding: 10px 22px; border-radius: 50px;
  font-weight:700; font-size:0.85rem;
  text-transform:uppercase; letter-spacing:0.5px;
  border:none; cursor:pointer; transition: all .2s;
}
.btn:hover { background: var(--red-dark); transform: translateY(-1px); }
.btn.alt {
  background: transparent; color: var(--text);
  border: 2px solid var(--border);
}
.btn.alt:hover { border-color: var(--red); color: var(--red); }
.btn.green { background: var(--green); }
.btn.green:hover { background: var(--green-light); }
.toggle {
  display:none; background:none; border:none;
  color: var(--text); font-size:1.6rem; cursor:pointer;
}

/* ── Hero ────────────────────────────── */
.hero {
  position:relative;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a0a0a 50%, #0a0a0a 100%);
  min-height: 92vh; display:flex; align-items:center;
  overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background: url('assets/img/hero-bg.jpg') center/cover no-repeat;
  opacity:0.15; pointer-events:none;
}
.hero-grid {
  max-width: var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: 1fr 1fr; gap:60px;
  padding: 80px 20px; align-items:center; position:relative; z-index:2;
}
.hero .kicker {
  color: var(--red); font-size:0.9rem; font-weight:700;
  text-transform:uppercase; letter-spacing:2px; margin-bottom:12px;
}
.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight:900; line-height:1.05; margin-bottom:16px;
  text-transform:uppercase;
}
.hero h1 .red { color: var(--red); }
.hero .subline {
  font-size:1.1rem; color: var(--text-dim);
  margin-bottom:30px; max-width:500px;
}
.hero .actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:24px; }
.hero .actions .btn { padding: 14px 32px; font-size:0.95rem; }
.hero .badge {
  display:flex; align-items:center; gap:8px;
  color: var(--text-dim); font-size:0.9rem;
}
.hero .badge .stars { color: #ffc107; letter-spacing:2px; }

.hero-features {
  display:flex; gap:30px; margin-top:36px; flex-wrap:wrap;
}
.hero-feature {
  display:flex; align-items:center; gap:10px;
}
.hero-feature .icon {
  width:40px; height:40px; border-radius:50%;
  background: rgba(230,57,70,0.15);
  display:flex; align-items:center; justify-content:center;
  color: var(--red); font-size:1.1rem;
}
.hero-feature span { font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }

.hero-photo {
  position:relative; display:flex; justify-content:center; align-items:center;
}
.hero-photo img {
  border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  max-height:520px; object-fit:cover;
}
.hero-photo::after {
  content:''; position:absolute; bottom:-20px; right:-20px;
  width:200px; height:200px;
  background: radial-gradient(circle, rgba(230,57,70,0.3), transparent 70%);
  border-radius:50%; filter: blur(30px); pointer-events:none;
}

/* ── Info Bar ────────────────────────── */
.info-bar {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.info-bar-grid {
  max-width: var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
}
.info-box {
  padding: 30px 24px; text-align:center;
  border-right: 1px solid var(--border);
}
.info-box:last-child { border-right:none; }
.info-box .icon {
  width:48px; height:48px; margin:0 auto 12px;
  background: rgba(230,57,70,0.1); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--red); font-size:1.3rem;
}
.info-box h3 {
  font-size:0.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; color: var(--text-dim); margin-bottom:6px;
}
.info-box p { font-size:0.85rem; color: var(--text); line-height:1.5; }
.info-box .big { font-size:1.3rem; font-weight:800; color: var(--text); }

/* ── Sections ────────────────────────── */
section { padding: 80px 20px; }
.wrap { max-width: var(--maxw); margin:0 auto; }
.head { text-align:center; margin-bottom:50px; }
.head .kicker {
  color: var(--red); font-size:0.85rem; font-weight:700;
  text-transform:uppercase; letter-spacing:2px; margin-bottom:10px;
}
.head h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight:800;
  text-transform:uppercase; margin-bottom:10px;
}
.head h2 span { color: var(--red); }
.head p { color: var(--text-dim); max-width:500px; margin:0 auto; }

/* ── Categories Grid ─────────────────── */
.cat-grid {
  display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;
}
.cat-card {
  background: var(--bg-card); border-radius: var(--radius);
  overflow:hidden; border: 1px solid var(--border);
  transition: transform .3s, border-color .3s; cursor:pointer;
}
.cat-card:hover { transform: translateY(-6px); border-color: var(--red); }
.cat-card img {
  width:100%; height:200px; object-fit:cover;
  transition: transform .4s;
}
.cat-card:hover img { transform: scale(1.05); }
.cat-card .info { padding: 20px; text-align:center; }
.cat-card h3 { font-size:1.1rem; font-weight:800; margin-bottom:6px; text-transform:uppercase; }
.cat-card p { font-size:0.85rem; color: var(--text-dim); }

/* ── About Section ───────────────────── */
.about-grid {
  display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center;
}
.about-grid h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight:800;
  text-transform:uppercase; margin-bottom:16px;
}
.about-grid h2 span { color: var(--green-light); }
.about-grid p { color: var(--text-dim); margin-bottom:24px; line-height:1.7; }
.about-features { display:flex; gap:24px; flex-wrap:wrap; }
.about-feature {
  display:flex; align-items:center; gap:8px;
}
.about-feature .icon {
  width:36px; height:36px; border-radius:50%;
  background: rgba(45,106,79,0.2);
  display:flex; align-items:center; justify-content:center;
  color: var(--green-light); font-size:0.9rem;
}
.about-feature span { font-size:0.75rem; font-weight:700; text-transform:uppercase; }
.about-img {
  border-radius: var(--radius); overflow:hidden;
  border: 1px solid var(--border);
}
.about-img img { width:100%; height:100%; object-fit:cover; min-height:350px; }

/* ── CTA Banner ──────────────────────── */
.cta-banner {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta-inner {
  max-width: var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:30px; padding: 40px 20px; flex-wrap:wrap;
}
.cta-inner h2 { font-size:1.8rem; font-weight:800; color: var(--red); margin-bottom:4px; }
.cta-inner p { color: var(--text-dim); }
.cta-inner .btn { padding: 14px 36px; font-size:1rem; }

/* ── Footer ──────────────────────────── */
footer {
  background: var(--bg-card); border-top: 1px solid var(--border);
  padding: 60px 20px 30px;
}
.foot {
  max-width: var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: 2fr 1.5fr 1fr; gap:40px;
}
.foot img { height:50px; width:auto; margin-bottom:16px; }
.foot p { color: var(--text-dim); font-size:0.9rem; line-height:1.7; }
.foot h3 {
  font-size:0.9rem; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; margin-bottom:16px; color: var(--text);
}
.foot .links { display:flex; flex-direction:column; gap:10px; }
.foot .links a { color: var(--text-dim); font-size:0.9rem; transition: color .2s; }
.foot .links a:hover { color: var(--red); }
.copyright {
  max-width: var(--maxw); margin:30px auto 0; padding-top:20px;
  border-top: 1px solid var(--border); text-align:center;
  color: var(--text-dim); font-size:0.8rem;
}

/* ── Mobile Bar ──────────────────────── */
.mobilebar {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  display:none;
}
.mobilebar-inner {
  display:flex; justify-content:space-around; align-items:center;
  padding: 8px 0  calc(8px + env(safe-area-inset-bottom));
}
.mobilebar a {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color: var(--text-dim); font-size:0.65rem; font-weight:600;
  text-transform:uppercase; padding: 6px 12px;
}
.mobilebar a span { font-size:1.3rem; }
.mobilebar a.active, .mobilebar a:hover { color: var(--red); }

/* ── Legal Pages ─────────────────────── */
.legal { max-width:800px; margin:0 auto; padding: 60px 20px; }
.legal .kicker { color: var(--red); font-size:0.85rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; margin-bottom:10px; }
.legal h1 { font-size:2rem; font-weight:800; margin-bottom:30px; }
.legal h2 { font-size:1.15rem; font-weight:700; margin: 28px 0 10px; color: var(--text); }
.legal p { color: var(--text-dim); margin-bottom:12px; line-height:1.7; }
.legal .notice {
  background: rgba(230,57,70,0.08); border-left: 3px solid var(--red);
  padding: 14px 18px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 16px 0; color: var(--text-dim); font-size:0.9rem;
}

/* ── Menu Page ───────────────────────── */
.menu-toolbar {
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin-bottom:40px; position:sticky; top:70px; z-index:50;
  background: rgba(10,10,10,0.9); backdrop-filter:blur(10px);
  padding: 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.chip {
  background: var(--bg-card); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 50px;
  padding: 8px 18px; font-size:0.8rem; font-weight:600;
  cursor:pointer; transition: all .2s; white-space:nowrap;
}
.chip:hover, .chip.active {
  background: var(--red); color:#fff; border-color: var(--red);
}
.menu-section { margin-bottom:50px; scroll-margin-top: 140px; }
.menu-section h2 {
  font-size:1.4rem; font-weight:800; text-transform:uppercase;
  margin-bottom:20px; padding-bottom:10px;
  border-bottom: 2px solid var(--red); display:inline-block;
}
.menu-list { display:flex; flex-direction:column; gap:12px; }
.menu-item {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; padding: 16px 20px;
  background: var(--bg-card); border-radius: var(--radius-sm);
  border: 1px solid var(--border); transition: border-color .2s;
}
.menu-item:hover { border-color: var(--red); }
.menu-item h3 { font-size:1rem; font-weight:700; margin-bottom:4px; }
.menu-item p { font-size:0.85rem; color: var(--text-dim); }
.menu-item .price { font-size:1rem; font-weight:800; color: var(--red); white-space:nowrap; }

/* ── Contact / Delivery ──────────────── */
.contact-grid {
  display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:start;
}
.contact-info h2 { font-size:1.5rem; font-weight:800; margin-bottom:16px; }
.contact-info p { color: var(--text-dim); margin-bottom:8px; }
.contact-info .big { font-size:1.8rem; font-weight:800; color: var(--red); margin: 16px 0; }
.zones { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.zone {
  background: var(--bg-light); padding: 8px 16px; border-radius: 50px;
  font-size:0.85rem; font-weight:600; border: 1px solid var(--border);
}
.map-box {
  background: var(--bg-card); border-radius: var(--radius);
  padding: 30px; border: 1px solid var(--border);
}
.map-box h2 { font-size:1.3rem; font-weight:800; margin-bottom:12px; }
.map-box p { color: var(--text-dim); margin-bottom:20px; }

/* ── Responsive ──────────────────────── */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align:center; }
  .hero-photo { order:-1; }
  .hero-photo img { max-height:320px; }
  .hero-features { justify-content:center; }
  .info-bar-grid { grid-template-columns: repeat(2, 1fr); }
  .info-box { border-right:none; border-bottom: 1px solid var(--border); }
  .info-box:nth-child(odd) { border-right: 1px solid var(--border); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; gap:30px; text-align:center; }
  .foot img { margin:0 auto 16px; }
  .contact-grid { grid-template-columns: 1fr; }
  .cta-inner { flex-direction:column; text-align:center; }
}
@media (max-width: 600px) {
  header nav { display:none; position:absolute; top:100%; left:0; right:0;
    background: var(--bg-card); flex-direction:column; padding:20px;
    border-bottom: 1px solid var(--border); gap:16px;
  }
  header nav.open { display:flex; }
  .toggle { display:block; }
  .info-bar-grid { grid-template-columns: 1fr; }
  .info-box { border-right:none !important; }
  .cat-grid { grid-template-columns: 1fr; }
  .mobilebar { display:block; }
  body { padding-bottom: 70px; }
  .hero { min-height: auto; padding: 40px 0; }
  .menu-toolbar { top:60px; }
}


/* ════════════════════════════════════════
   HERO HINTERGRUND - VIDEO / BILD / ANIMIERT
   ════════════════════════════════════════ */

/* ── Video Hintergrund ───────────────── */
.hero-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-image-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  animation: heroZoom 20s ease-in-out infinite alternate;
}

@keyframes heroZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10,10,10,0.85) 0%,
    rgba(10,10,10,0.7) 40%,
    rgba(10,10,10,0.5) 100%
  );
  z-index: 1;
}

/* Wenn Video/Bild aktiv, altes ::before ausblenden */
.hero-video .hero::before,
.hero-image-bg .hero::before {
  display: none !important;
}

/* Hero Headline extra Styling */
.hero-headline {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--red);
  line-height: 1.1;
}

/* ── Floating Particles Animation (CSS-only) ── */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.hero-particles::before,
.hero-particles::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,57,70,0.15), transparent 70%);
  animation: floatParticle 15s ease-in-out infinite;
}

.hero-particles::before {
  top: 20%; right: 10%;
  animation-delay: 0s;
}

.hero-particles::after {
  bottom: 30%; left: 5%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(45,106,79,0.1), transparent 70%);
  animation-delay: -7s;
  animation-duration: 20s;
}

@keyframes floatParticle {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  25% { transform: translate(30px, -20px) scale(1.1); opacity: 0.8; }
  50% { transform: translate(-20px, 30px) scale(0.9); opacity: 0.6; }
  75% { transform: translate(20px, 20px) scale(1.05); opacity: 0.7; }
}

/* ── Ken Burns Effect für Bilder ── */
@keyframes kenBurns {
  0% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.08) translate(-1%, -1%); }
  100% { transform: scale(1) translate(0, 0); }
}

.hero-image-bg.ken-burns {
  animation: kenBurns 25s ease-in-out infinite;
}

/* ── Glitch Text Effect (optional für Headline) ── */
@keyframes glitch {
  0% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, 2px); }
  20% { clip-path: inset(92% 0 1% 0); transform: translate(2px, -2px); }
  40% { clip-path: inset(43% 0 1% 0); transform: translate(-2px, 2px); }
  60% { clip-path: inset(25% 0 58% 0); transform: translate(2px, -2px); }
  80% { clip-path: inset(54% 0 7% 0); transform: translate(-2px, 2px); }
  100% { clip-path: inset(58% 0 43% 0); transform: translate(2px, -2px); }
}

.hero-headline.glitch:hover {
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

/* ── Pulse Glow für Buttons ── */
.btn-pulse {
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.4); }
  50% { box-shadow: 0 0 20px 10px rgba(230, 57, 70, 0); }
}

/* ── Smooth Scroll Indicator ── */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: bounce 2s ease-in-out infinite;
}

.scroll-indicator::after {
  content: '↓';
  font-size: 1.2rem;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}


/* ════════════════════════════════════════
   RESPONSIVE VIDEO & BILD FIXES
   ════════════════════════════════════════ */

/* Mobile: Video/Bild immer verfügbar */
@media (max-width: 600px) {
  .hero-video,
  .hero-image-bg {
    display: block !important;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
  }
  .hero-video {
    object-fit: cover;
  }
  .hero-image-bg {
    background-size: cover;
    background-position: center;
  }
  .hero-video-overlay {
    display: block !important;
    background: linear-gradient(135deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.7) 100%);
  }
  .hero {
    min-height: auto;
    padding: 60px 0;
  }
  .hero-grid {
    padding: 40px 16px;
  }
  .hero-headline {
    font-size: clamp(1.6rem, 6vw, 2.5rem);
  }
  .scroll-indicator {
    display: none;
  }
}

/* Tablet */
@media (max-width: 900px) and (min-width: 601px) {
  .hero-video,
  .hero-image-bg {
    display: block !important;
  }
  .hero-video-overlay {
    display: block !important;
  }
}

/* Desktop: Alles wie gehabt */
@media (min-width: 901px) {
  .hero-video,
  .hero-image-bg {
    display: block;
  }
}

/* Abholer-Angebote Grid responsive */
@media (max-width: 900px) {
  .cat-grid[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .cat-grid[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}

/* Hero Headline fix */
.hero-headline {
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--red);
  line-height: 1.1;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--text-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: bounce 2s ease-in-out infinite;
}
.scroll-indicator::after {
  content: '↓';
  display: block;
  text-align: center;
  font-size: 1.2rem;
  margin-top: 4px;
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}


/* ── Improved mobile navigation ───────────────────────── */
.toggle{width:46px;height:46px;border:1px solid var(--border);border-radius:14px;background:var(--bg-card);align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.toggle span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s,opacity .25s}
.toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.toggle.active span:nth-child(2){opacity:0}
.toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:760px){
  header{position:sticky}.nav{padding:10px 16px;gap:12px}.logo img{height:46px}.toggle{display:flex;margin-left:auto;z-index:3}.header-order{display:none}
  header nav{display:flex;position:fixed;top:67px;left:12px;right:12px;max-height:calc(100vh - 90px);overflow:auto;background:rgba(20,20,20,.98);backdrop-filter:blur(18px);border:1px solid var(--border);border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.55);padding:12px;gap:6px;flex-direction:column;transform:translateY(-12px) scale(.98);opacity:0;visibility:hidden;pointer-events:none;transition:.25s ease}
  header nav.open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  header nav a{width:100%;padding:14px 16px;border-radius:12px;font-size:.92rem;letter-spacing:.3px}
  header nav a:hover,header nav a.active{background:rgba(230,57,70,.12);color:var(--text)}
  header nav a.active::after{display:none}body.menu-open{overflow:hidden}
}

/* ── Offers with real photos ──────────────────────────── */
.offers-section{background:linear-gradient(135deg,#1a0a0a 0%,#0a0a0a 100%)}
.offers-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.offers-grid-compact{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.offer-card{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.offer-card:hover{transform:translateY(-6px);border-color:var(--red);box-shadow:0 18px 45px rgba(0,0,0,.32)}
.offer-image{aspect-ratio:16/10;overflow:hidden;background:var(--bg-light)}
.offer-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.offer-card:hover .offer-image img{transform:scale(1.05)}
.offer-content{padding:22px}.offer-availability{color:var(--red)!important;font-size:.75rem!important;text-transform:uppercase;letter-spacing:1px;font-weight:800;margin-bottom:7px!important}
.offer-content h3{font-size:1.22rem;text-transform:uppercase;margin-bottom:8px}.offer-description{color:var(--text-dim);min-height:48px;margin-bottom:16px}.offer-price{font-size:1.8rem;font-weight:900;color:var(--red)}
.offers-grid-compact .offer-content{padding:18px}.offers-grid-compact .offer-content h3{font-size:1rem}.offers-grid-compact .offer-price{font-size:1.5rem}.offers-grid-compact .offer-description{font-size:.82rem}
.section-action{text-align:center;margin-top:30px}.page-hero{padding:90px 20px 65px;text-align:center;background:linear-gradient(135deg,#0a0a0a,#260b0e)}.page-hero h1{font-size:clamp(2.3rem,6vw,4.5rem);text-transform:uppercase;line-height:1.05}.page-hero .subline{color:var(--text-dim);margin-top:15px}.order-callout{margin-top:42px;padding:26px 30px;border:1px solid var(--border);border-radius:20px;background:var(--bg-card);display:flex;align-items:center;justify-content:space-between;gap:20px}.order-callout p{color:var(--text-dim)}.empty-state{text-align:center;color:var(--text-dim)}
@media(max-width:950px){.offers-grid-compact{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.offers-grid,.offers-grid-compact{grid-template-columns:1fr}.order-callout{flex-direction:column;text-align:center}.offer-description{min-height:0}}

/* video fallback and stacking fixes */
.hero-video{pointer-events:none}.hero-video,.hero-image-bg{inset:0}.hero.hero-video::before,.hero.hero-image::before{display:none}.hero.video-error .hero-video,.hero.video-paused .hero-video{opacity:0}.hero.video-error::before,.hero.video-paused::before{display:block;background-image:linear-gradient(135deg,rgba(10,10,10,.5),rgba(10,10,10,.8)),url('../img/hero-bg.jpg');opacity:1}

/* ── Mobile polish: compact header and cleaner small-screen layout ── */
.header-actions{display:none;align-items:center;gap:8px}
.mobile-order,.nav-order{display:none}

@media (max-width:760px){
  header{height:58px;background:rgba(10,10,10,.97)}
  .nav{height:58px;padding:6px 12px;gap:8px}
  .logo{display:flex;align-items:center;min-width:0}
  .logo img{height:40px;max-width:132px;object-fit:contain}
  .header-actions{display:flex;margin-left:auto}
  .mobile-order{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 13px;border-radius:10px;background:var(--red);color:#fff;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.35px}
  .toggle{width:38px;height:38px;border-radius:10px;gap:4px}
  .toggle span{width:17px;height:2px}
  .toggle.active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .toggle.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .header-order{display:none}

  header nav{top:64px;left:8px;right:8px;padding:8px;border-radius:14px;gap:3px;max-height:calc(100dvh - 78px);box-shadow:0 18px 50px rgba(0,0,0,.65)}
  header nav a{padding:11px 12px;border-radius:9px;font-size:.82rem;letter-spacing:.15px;text-transform:none}
  header nav a.active{background:rgba(230,57,70,.14);color:#fff}
  header nav .nav-order{display:flex;justify-content:center;margin-top:4px;background:var(--red);color:#fff;font-weight:800;text-transform:uppercase}
  header nav .nav-order:hover{background:var(--red-dark);color:#fff}

  section{padding:54px 14px}
  .head{margin-bottom:30px}
  .head h2{font-size:1.65rem;line-height:1.15}
  .head p{font-size:.9rem}
  .hero{padding:24px 0;min-height:calc(100svh - 58px)}
  .hero-grid{padding:34px 14px;gap:24px}
  .hero h1,.hero-headline{font-size:clamp(2rem,10vw,3rem);line-height:1.02}
  .hero .subline{font-size:.95rem;margin-bottom:22px}
  .hero .actions{gap:10px;margin-bottom:18px}
  .hero .actions .btn{width:100%;justify-content:center;padding:12px 18px;font-size:.83rem}
  .hero-features{gap:12px;margin-top:22px;justify-content:center}
  .hero-feature{gap:7px}
  .hero-feature .icon{width:34px;height:34px}
  .hero-feature span{font-size:.68rem}
  .info-box{padding:20px 14px}
  .cat-card img{height:180px}
  .cat-card .info{padding:16px}
  .offer-content{padding:17px}
  .offer-price{font-size:1.55rem}
  .page-hero{padding:58px 14px 42px}
  .page-hero h1{font-size:2.15rem}
  .menu-toolbar{top:66px;margin:0 -4px 28px;padding:8px;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .menu-toolbar::-webkit-scrollbar{display:none}
  .chip{padding:7px 13px;font-size:.72rem}
  .menu-item{padding:14px;gap:12px}
  .menu-item h3{font-size:.92rem}
  .menu-item p{font-size:.78rem;line-height:1.45}
  footer{padding:42px 14px 24px}
  .mobilebar{display:none}
  body{padding-bottom:0}
}

@media (max-width:380px){
  .logo img{height:36px;max-width:112px}
  .mobile-order{height:34px;padding:0 10px;font-size:.66rem}
  .toggle{width:36px;height:36px}
}

/* Klickbare Hero-Inhalte: dekorative Hintergrundebenen dürfen keine Klicks abfangen */
.hero-video,
.hero-image-bg,
.hero-video-overlay,
.hero-particles,
.hero::before,
.hero-photo::after,
.scroll-indicator {
  pointer-events: none !important;
}

.hero-grid {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.hero-grid > *,
.hero .actions,
.hero .actions a,
.hero a,
.hero button {
  position: relative;
  z-index: 11;
  pointer-events: auto !important;
}

/* Verhindert, dass eine transformierte Hintergrundebene einen eigenen Klick-Layer bildet */
.hero-video,
.hero-image-bg,
.hero-video-overlay {
  user-select: none;
  -webkit-user-select: none;
}

/* =========================================================
   ANGEBOTE – SAUBERES RASTER WIE BEI DER SPEISEKARTE
   ========================================================= */

/* Index und Angebotsseite: gleichmäßige Karten auf Desktop */
.offers-grid,
.offers-grid-compact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.offer-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.offer-image {
  width: 100%;
  height: 220px;
  aspect-ratio: auto;
  overflow: hidden;
  background: var(--bg-light);
}

.offer-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.offer-content,
.offers-grid-compact .offer-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}

.offer-availability {
  margin-bottom: 7px !important;
}

.offer-content h3,
.offers-grid-compact .offer-content h3 {
  margin-bottom: 8px;
  font-size: 1.05rem;
  line-height: 1.25;
}

.offer-description,
.offers-grid-compact .offer-description {
  min-height: 0;
  margin-bottom: 18px;
  font-size: 0.86rem;
  line-height: 1.55;
}

.offer-price,
.offers-grid-compact .offer-price {
  margin-top: auto;
  font-size: 1.55rem;
}

/* Tablet: zwei Karten pro Reihe */
@media (max-width: 950px) {
  .offers-grid,
  .offers-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobil: eine Karte pro Reihe */
@media (max-width: 650px) {
  .offers-grid,
  .offers-grid-compact {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .offer-image {
    height: 210px;
  }

  .offer-content,
  .offers-grid-compact .offer-content {
    padding: 17px;
  }
}

/* Speisekarte Berlin Döner */
.menu-page-section{padding-top:35px}.menu-jump{position:sticky;top:76px;z-index:5;display:flex;gap:10px;overflow-x:auto;padding:12px;background:rgba(10,10,10,.94);border:1px solid var(--border);border-radius:16px;backdrop-filter:blur(10px)}.menu-jump a{white-space:nowrap;padding:9px 14px;border-radius:999px;background:var(--bg-card);color:var(--text);font-weight:700}.menu-jump a:hover{background:var(--red);color:#fff}.menu-note{margin:22px 0;color:var(--text-dim);text-align:center}.menu-category{padding:55px 0 0;scroll-margin-top:120px}.menu-category .head{margin-bottom:22px}.menu-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.menu-item{display:grid;grid-template-columns:46px 1fr auto;gap:14px;align-items:start;padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--bg-card)}.menu-number{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--red);color:#fff;font-weight:800}.menu-copy h3{margin:0 0 5px;font-size:1.05rem}.menu-copy p{margin:0;color:var(--text-dim);font-size:.92rem;line-height:1.45}.menu-price{font-weight:800;color:var(--accent,#f4b942);text-align:right;max-width:210px;line-height:1.45}@media(max-width:800px){.menu-list{grid-template-columns:1fr}.menu-item{grid-template-columns:40px 1fr}.menu-price{grid-column:2;text-align:left;max-width:none}.menu-jump{top:64px}}