/* BurgerPause One-Pager */

/* ---------- Schriften (lokal gehostet) ---------- */
/* Inter: SIL Open Font License. Road Rage (Youssef Habchi): nur privat frei, für gewerbliche Nutzung Lizenz nötig. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Road Rage';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/road-rage.woff') format('woff');
}

/* ---------- Animationssprache ---------- */
:root { --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-micro: 300ms; --dur-reveal: 600ms; --dur-intro: 900ms; --rv-offset: 20px; --stagger: 80ms; --lift-card: -4px; --lift-btn: -2px; }

/* ---------- Basis ---------- */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: #0B0B0D; color: #FAFAF7; font-family: 'Inter', sans-serif; }
a { color: #F97316; text-decoration: none; transition: color var(--dur-micro) var(--ease); }
::selection { background: #F97316; color: #0B0B0D; }

/* ---------- Responsive Header & Bestellleiste ---------- */
@media (max-width: 1200px) {
  .bp-nav { display: none !important; }
  .bp-telnum { display: none !important; }
  .bp-burger { display: flex !important; }
}
@media (max-width: 900px) {
  .bp-mobilebar { display: flex !important; }
  .bp-hdr-wa { display: none !important; }
  .bp-footer-inner { padding-bottom: 96px !important; } /* Platz für die feste Bestell-Leiste, sonst verdeckt sie die letzten Footer-Zeilen */
  .bp-consent { left: 10px; right: 10px; bottom: 10px; }
  .bp-mobilebar.is-visible ~ .bp-consent { bottom: 86px; }
}
.bp-menu[hidden] { display: none !important; }
/* Datenschutz-Hinweis (Startseite): fest unten, auf Mobil über der Bestell-Leiste */
.bp-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70; transition: bottom var(--dur-micro) var(--ease); }
.bp-consent[hidden] { display: none !important; }
.bp-mobilebar { transform: translateY(110%); transition: transform var(--dur-micro) var(--ease); }
.bp-mobilebar.is-visible { transform: translateY(0); }

/* ---------- Reveals & Intro ---------- */
@keyframes bpFadeUp { from { opacity: 0; transform: translateY(var(--rv-offset)); } to { opacity: 1; transform: none; } }
@keyframes bpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bpBreathe { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
[data-rv]:not(.rv-done), [data-hero]:not(.rv-done) { opacity: 0; transform: translateY(var(--rv-offset)); }
[data-rvf]:not(.rv-done), [data-hero-poster]:not(.rv-done) { opacity: 0; }
.rv-up { animation: bpFadeUp var(--dur-reveal) var(--ease) both; }
.rv-fade { animation: bpFade var(--dur-reveal) var(--ease) both; }
.rv-intro { animation: bpFadeUp var(--dur-intro) var(--ease) both; }
.rv-introfade { animation: bpFade var(--dur-intro) var(--ease) both; }
.bp-breathe { animation: bpBreathe 8s var(--ease) infinite; }

/* ---------- Header ---------- */
.bp-header { transition: border-color var(--dur-micro) var(--ease); }
.bp-header.is-scrolled { border-bottom-color: #232328 !important; }
.bp-hshadow { opacity: 0; transition: opacity var(--dur-micro) var(--ease); }
.bp-header.is-scrolled .bp-hshadow { opacity: 1; }
.bp-menu { animation: bpFade var(--dur-micro) var(--ease); }
.bp-link { position: relative; }
.bp-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: #F97316; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-micro) var(--ease); pointer-events: none; }

/* ---------- Buttons & Links ---------- */
.bp-flink, .bp-icon { transition: color var(--dur-micro) var(--ease); }
.bp-secondary { transition: color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); }
.bp-primary { transition: background-color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.bp-mapbtn { transition: background-color var(--dur-micro) var(--ease); }

/* ---------- Google Maps (Zwei-Klick-Lösung) ---------- */
.bp-map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity var(--dur-reveal) var(--ease); }
.bp-map.is-loaded { opacity: 1; }

/* ---------- Hero-Video (Schwarz im Video verschmilzt per lighten mit dem Hintergrund) ---------- */
.bp-hero-media { position: absolute; top: 0; right: max(0px, calc(50% - 600px)); height: 100%; aspect-ratio: 9 / 16; pointer-events: none; }
.bp-hero-glow { position: absolute; inset: 25% 5% 5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(249,115,22,.22), transparent); }
.bp-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 88%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 88%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
/* Fallszene und Rauch-Schleife liegen übereinander, sichtbar ist immer nur eine */
.bp-hero-idle:not(.is-on), .bp-hero-video.is-off { visibility: hidden; }
/* Schmal: Video unten mittig, der Text endet über dem geschlossenen Burger (ab 37 % Videohöhe) */
@media (max-width: 900px) {
  .bp-hero-media { top: auto; bottom: 0; left: 0; right: 0; margin: 0 auto; width: min(100vw, 460px); height: auto; }
  .bp-hero-video { -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 46%, #000 92%, transparent), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to bottom, transparent 20%, #000 46%, #000 92%, transparent), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
  .bp-hero-inner { padding-bottom: calc(min(100vw, 460px) * 1.12 + 16px) !important; }
}

/* ---------- Cards ---------- */
.bp-lift { position: relative; transition: transform var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); }
.bp-lift::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 10px 32px rgba(249,115,22,.1); opacity: 0; transition: opacity var(--dur-micro) var(--ease); pointer-events: none; }

/* ---------- Burger-Rad (Swiper) ---------- */
.bp-wheel { --card-w: 280px; --wheel-r: 880px; --swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-inactive-color: #3a3a42; --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-color: #F97316; margin-inline: calc(50% - 50vw); }
.bp-wheel-swiper { height: calc(var(--card-w) * 16 / 9 + 80px); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent); }
.bp-wheel .swiper-slide { overflow: visible; pointer-events: none; display: flex; justify-content: center; padding-top: 8px; box-sizing: border-box; }
.bp-wcard { position: relative; width: var(--card-w); aspect-ratio: 9 / 16; margin: 0; border-radius: 16px; overflow: hidden; background: #0B0B0D; border: 1px solid #232328; box-shadow: 0 30px 60px rgba(0,0,0,.45); pointer-events: auto; user-select: none; transition-property: transform, opacity; transition-timing-function: var(--ease); }
.bp-wheel .swiper-slide:not(.swiper-slide-active) .bp-wcard { cursor: pointer; }
.bp-wcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.bp-wcard-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 80px 20px 20px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(to top, rgba(11,11,13,.95) 0%, rgba(11,11,13,.85) 55%, rgba(11,11,13,0) 100%); transition: opacity var(--dur-micro) var(--ease); }
.bp-wheel .swiper-slide:not(.swiper-slide-active) .bp-wcard-info { opacity: 0; }
.bp-wheel-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 28px; }
.bp-wheel-btn { width: 48px; height: 48px; padding: 0; border-radius: 999px; border: 1px solid #3a3a42; background: transparent; color: #FAFAF7; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bp-wheel-dots { position: static; width: auto !important; display: flex; align-items: center; gap: 12px; }
.bp-wheel-dots .swiper-pagination-bullet { position: relative; margin: 0; cursor: pointer; transition: background-color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.bp-wheel-dots .swiper-pagination-bullet::after { content: ''; position: absolute; inset: -6px; }
.bp-wheel-dots .swiper-pagination-bullet-active { transform: scale(1.35); }
@media (max-width: 640px) {
  .bp-wheel { --card-w: min(62vw, 260px); --wheel-r: 560px; }
}

/* ---------- Hover nur auf Geräten mit echtem Hover ---------- */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: #FB923C; }
  .bp-flink:hover { color: #FAFAF7 !important; }
  .bp-link:hover::after { transform: scaleX(1); }
  .bp-icon:hover { color: #F97316 !important; }
  .bp-secondary:hover { border-color: #F97316 !important; color: #FB923C !important; }
  .bp-primary:hover { background: #FB923C !important; transform: translateY(var(--lift-btn)); }
  .bp-primary:active { transform: none; transition-duration: 0s; }
  .bp-mapbtn:hover { background: rgba(249,115,22,.1) !important; }
  .bp-lift.rv-done:hover { transform: translateY(var(--lift-card)); }
  .bp-lift.rv-done:hover::before { opacity: 1; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-rv], [data-rvf], [data-hero], [data-hero-poster] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .bp-primary:hover, .bp-lift:hover { transform: none !important; }
}

/* ---------- Rechtstexte (impressum.html, datenschutz.html) ---------- */
.bp-legal { max-width: 760px; margin: 0 auto; padding: clamp(40px,6vw,72px) clamp(20px,4.5vw,40px) clamp(64px,8vw,96px); color: #D1D5DB; font-size: 16px; line-height: 1.7; }
.bp-legal h1 { margin: 8px 0 24px; font-family: 'Road Rage', cursive; font-weight: 400; font-size: clamp(30px,8vw,56px); line-height: 1.05; color: #FAFAF7; hyphens: auto; overflow-wrap: anywhere; }
.bp-legal h2 { margin: 40px 0 12px; font-family: 'Road Rage', cursive; font-weight: 400; font-size: 28px; line-height: 1.15; color: #F97316; }
.bp-legal h3 { margin: 24px 0 8px; font-size: 17px; font-weight: 700; color: #FAFAF7; }
.bp-legal p, .bp-legal ul { margin: 0 0 14px; }
.bp-legal ul { padding-left: 20px; }
.bp-legal li { margin-bottom: 4px; }
.bp-legal a { text-decoration: underline; text-underline-offset: 3px; }
.bp-legal address { font-style: normal; }
.bp-legal strong { color: #FAFAF7; }