/* =========================================================
   MeatyMunch – Idar-Oberstein
   Farben direkt von den Menütafeln abgenommen:
   Orange #F49D0F · Violett #4A2680 · Creme #F4E6CE · Rot #A33A33
   ========================================================= */

:root{
  --ink:#0B0912;
  --ink-2:#120E1D;
  --surface:#1A1428;
  --line:rgba(255,255,255,.10);

  --violet:#4A2680;
  --violet-lite:#7B4FD0;
  --violet-glow:rgba(123,79,208,.32);

  --orange:#F49D0F;
  --orange-hi:#FFB43A;
  --gold:#F0BE4E;
  --maroon:#A33A33;
  --cream:#F4E6CE;

  --text:#EDE7F3;
  --muted:#A79BBE;

  --wa:#25D366;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;

  --wrap:1180px;
  --pad:clamp(20px,5vw,40px);
  --gutter:max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));

  --display:'Anton', 'Arial Narrow', Impact, sans-serif;
  --body:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:88px}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{max-width:100%; display:block}
a{color:inherit}

h1,h2,h3{margin:0; font-family:var(--display); font-weight:400; letter-spacing:.01em; line-height:.98; text-transform:uppercase}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--orange); color:#1A1004; padding:12px 18px; border-radius:0 0 var(--r-sm) 0; font-weight:700;
}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:4px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:15px 26px; border-radius:999px;
  font-weight:800; font-size:.95rem; letter-spacing:.02em;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:transform .16s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-sm{padding:10px 18px; font-size:.86rem}

.btn-primary{background:var(--orange); color:#1A1004; box-shadow:0 10px 26px -14px var(--orange)}
.btn-primary:hover{background:var(--orange-hi)}

.btn-ghost{background:rgba(255,255,255,.07); color:var(--text); border-color:rgba(255,255,255,.18); backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}

.btn-outline{background:transparent; color:var(--text); border-color:var(--violet-lite)}
.btn-outline:hover{background:var(--violet-lite); color:#0D0818}

.ico{width:18px; height:18px; fill:currentColor; flex:none}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,9,18,.74);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; gap:20px; height:72px}

.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex:none}
.brand-mark{width:42px; height:42px; object-fit:contain}
.brand-word{font-family:var(--display); font-size:1.45rem; letter-spacing:.02em; text-transform:uppercase; color:#fff; line-height:1}
.brand-word-alt{color:var(--orange)}

.nav{margin-left:auto; display:flex; gap:30px}
.nav a{
  text-decoration:none; font-weight:600; font-size:.95rem; color:var(--text);
  padding:6px 0; position:relative; opacity:.85;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--orange); transition:right .25s ease;
}
.nav a:hover{opacity:1}
.nav a:hover::after{right:0}

.header-actions{display:flex; align-items:center; gap:12px}

.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px;
  background:rgba(255,255,255,.05); cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:min(92vh,860px); display:flex; align-items:flex-end; overflow:hidden}
.hero-media{position:absolute; inset:0}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:58% 58%}
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(90% 70% at 85% 20%, var(--violet-glow), transparent 60%),
    linear-gradient(180deg, rgba(11,9,18,.82) 0%, rgba(11,9,18,.35) 32%, rgba(11,9,18,.88) 78%, var(--ink) 100%);
}
.hero-inner{position:relative; z-index:2; padding-block:clamp(48px,10vh,110px)}

.kicker{
  margin:0 0 14px; font-weight:800; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
}
.kicker-light{color:var(--cream)}

.hero-title{
  font-size:clamp(3.2rem,12vw,8.2rem);
  display:flex; flex-direction:column; color:#fff;
  text-shadow:0 6px 40px rgba(0,0,0,.55);
}
.hero-title span{display:block}
.hero-title .hl{
  color:transparent;
  -webkit-text-stroke:2px var(--orange);
  paint-order:stroke fill;
}
@supports not (-webkit-text-stroke: 2px red){ .hero-title .hl{color:var(--orange)} }

.hero-lead{max-width:48ch; margin:22px 0 30px; font-size:1.08rem; color:#DCD5EC}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px}

.hero-facts{
  list-style:none; margin:34px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px 30px;
  font-size:.9rem; color:var(--muted);
}
.hero-facts li{display:flex; gap:.5em; align-items:baseline}
.hero-facts strong{color:#fff; font-weight:700}
.hero-facts li + li{position:relative}
.hero-facts li + li::before{content:'◆'; position:absolute; left:-18px; color:var(--orange); font-size:.6em; top:.35em}

.hero-scroll{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(255,255,255,.06); color:#fff; text-decoration:none;
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ---------- Marquee ---------- */
.marquee{
  background:var(--orange); color:#180E02; overflow:hidden;
  border-block:3px solid #0B0912;
  padding:13px 0;
}
.marquee-track{
  display:flex; align-items:center; gap:26px; width:max-content;
  font-family:var(--display); font-size:1.35rem; letter-spacing:.06em; text-transform:uppercase;
  animation:slide 34s linear infinite;
}
.marquee-track i{font-style:normal; font-size:.65em; opacity:.6}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{padding-block:clamp(64px,10vw,120px)}
.section-alt{background:linear-gradient(180deg,var(--ink) 0%, var(--ink-2) 10%, var(--ink-2) 90%, var(--ink) 100%)}

.sec-head{max-width:660px; margin-bottom:clamp(34px,5vw,56px)}
.sec-head h2{font-size:clamp(2.1rem,5.5vw,3.6rem); color:#fff}
.sec-lead{margin:16px 0 0; color:var(--muted); font-size:1.05rem}

/* ---------- Bestseller Cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:24px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-6px); border-color:rgba(123,79,208,.55); box-shadow:0 28px 60px -32px var(--violet-glow)}
.card-img{aspect-ratio:4/3; overflow:hidden; background:#000}
.card-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.card:hover .card-img img{transform:scale(1.06)}
.card-body{padding:24px 24px 26px; display:flex; flex-direction:column; gap:12px; flex:1}
.card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.card-top h3{font-size:1.32rem; color:#fff; max-width:15ch}
.price{font-family:var(--display); font-size:1.3rem; color:var(--orange); white-space:nowrap; line-height:1.1}
.card p{margin:0; font-size:.95rem; color:var(--muted)}
.tag{
  align-self:flex-start; margin-top:auto;
  font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(240,190,78,.35); border-radius:999px; padding:5px 12px;
}

/* ---------- Birria-Feature ---------- */
.feature{
  background:linear-gradient(120deg, var(--maroon) 0%, #7E2A26 55%, #4A1614 100%);
  padding-block:clamp(56px,8vw,96px);
  position:relative; overflow:hidden;
}
.feature::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(70% 90% at 15% 0%, rgba(255,255,255,.10), transparent 60%);
  pointer-events:none;
}
.feature-inner{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,64px); align-items:center;
}
.feature-media img{
  width:100%; border-radius:var(--r-lg); aspect-ratio:4/3; object-fit:cover;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9);
}
.feature-text h2{font-size:clamp(2.4rem,6vw,4rem); color:var(--cream); margin-bottom:16px}
.feature-text p{color:rgba(244,230,206,.85)}

.feature-prices{display:flex; flex-wrap:wrap; gap:14px; margin:26px 0 12px}
.fp{
  background:rgba(0,0,0,.28); border:1px solid rgba(244,230,206,.3);
  border-radius:var(--r-md); padding:14px 22px; min-width:150px;
}
.fp-best{background:var(--cream); border-color:var(--cream)}
.fp-label{display:block; font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--cream)}
.fp-label em{font-style:normal; opacity:.7}
.fp-best .fp-label{color:var(--maroon)}
.fp-price{display:block; font-family:var(--display); font-size:1.7rem; color:#fff; line-height:1.2; margin-top:4px}
.fp-best .fp-price{color:var(--maroon)}
.feature-note{font-size:.88rem; color:rgba(244,230,206,.72); margin:0 0 24px}

/* ---------- Speisekarte ---------- */
.upgrade-bar{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  padding:16px 22px; margin-bottom:30px;
  border:1px dashed rgba(244,157,15,.45); border-radius:var(--r-md);
  background:rgba(244,157,15,.07);
  font-size:.92rem; color:var(--cream);
}
.ub-item strong{color:var(--orange); font-weight:800; text-transform:uppercase; letter-spacing:.04em}
.ub-halal strong{color:var(--wa)}

.menu-filter{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:38px}
.chip{
  font-family:var(--body); font-size:.85rem; font-weight:700;
  padding:9px 18px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.05); color:var(--muted);
  border:1px solid var(--line); transition:.2s;
}
.chip:hover{color:#fff; border-color:rgba(255,255,255,.3)}
.chip.is-active{background:var(--orange); color:#1A1004; border-color:var(--orange)}

.menu-grid{columns:2; column-gap:56px}
.menu-block{break-inside:avoid; margin-bottom:44px; display:inline-block; width:100%}
.menu-block[hidden]{display:none}
.menu-cat{
  font-size:1.5rem; color:#fff; padding-bottom:12px; margin-bottom:6px;
  border-bottom:2px solid var(--orange);
}
.menu-block .menu-cat ~ .menu-cat{margin-top:38px}
.menu-sub{margin:12px 0 2px; font-size:.85rem; color:var(--gold); font-weight:600}
.menu-list{list-style:none; margin:0; padding:0}
.menu-list li{
  display:flex; align-items:baseline; gap:10px;
  padding:13px 0; border-bottom:1px dashed rgba(255,255,255,.11);
}
.mi-name{display:flex; flex-direction:column; font-weight:600; color:#fff; flex:1}
.mi-name em{font-style:normal; font-weight:500; font-size:.85rem; color:var(--muted); margin-top:3px}
.mi-price{font-family:var(--display); font-size:1.1rem; color:var(--gold); white-space:nowrap}
.mi-price::after{content:' €'; font-size:.8em; opacity:.7}
.menu-hint{margin:12px 0 0; font-size:.85rem; color:var(--muted)}

.menu-note{margin-top:8px; font-size:.92rem; color:var(--muted)}
.menu-note a{color:var(--orange); font-weight:700}

/* ---------- Original-Tafeln ---------- */
.boards-head{margin-top:clamp(46px,7vw,80px)}
.boards-title{font-size:clamp(1.5rem,3.4vw,2.2rem); color:#fff}
.boards-lead{margin:10px 0 22px; font-size:.92rem; color:var(--muted)}
.boards{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:2px 0 22px; padding-inline:var(--gutter);
}
.board{
  flex:0 0 min(78vw,560px); scroll-snap-align:center;
  padding:0; border:1px solid var(--line); border-radius:var(--r-md);
  background:none; cursor:zoom-in; overflow:hidden; line-height:0;
  transition:transform .3s ease, border-color .3s ease;
}
.board:hover{transform:translateY(-5px); border-color:var(--orange)}
.board img{width:100%; height:auto}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:rgba(6,4,10,.94); padding:clamp(16px,5vw,48px);
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%; max-height:88vh; border-radius:var(--r-md); object-fit:contain}
.lb-close{
  position:absolute; top:18px; right:18px; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.08); color:#fff;
  font-size:1.1rem; cursor:pointer;
}
.lb-close:hover{background:rgba(255,255,255,.18)}

/* ---------- Split (Reel / Story) ---------- */
.split-inner{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(32px,6vw,72px); align-items:center}
.split-reverse .split-media{order:2}
.split-text h2{font-size:clamp(2rem,4.6vw,3.2rem); color:#fff; margin-bottom:18px}
.split-text p{color:var(--muted)}

.ticks{list-style:none; margin:26px 0; padding:0; display:grid; gap:12px}
.ticks li{position:relative; padding-left:30px; color:var(--text); font-size:.98rem}
.ticks li::before{content:'◆'; position:absolute; left:0; top:0; color:var(--orange); font-size:.85em}

.phone{
  position:relative; margin-inline:auto; max-width:330px; aspect-ratio:9/16;
  border-radius:30px; overflow:hidden; background:#000;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 90px -40px var(--violet-glow), 0 0 0 8px rgba(74,38,128,.18);
}
.phone video{width:100%; height:100%; object-fit:cover}
.phone-play{
  position:absolute; inset:auto 0 0 0; margin:auto auto 18px; display:grid; place-items:center;
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(244,157,15,.94); color:#1A1004; font-size:1.1rem; padding-left:3px;
  transition:.2s;
}
.phone-play:hover{transform:scale(1.07)}
.phone.is-playing .phone-play{opacity:0; pointer-events:none}
.phone:hover .phone-play{opacity:1; pointer-events:auto}

.story-img{width:100%; border-radius:var(--r-lg); border:1px solid var(--line); aspect-ratio:4/5; object-fit:cover}

.quote{
  margin:30px 0 0; padding:20px 26px; border-left:3px solid var(--orange);
  background:rgba(255,255,255,.04); border-radius:0 var(--r-md) var(--r-md) 0;
  font-family:var(--display); font-size:1.6rem; text-transform:uppercase; color:#fff; line-height:1.15;
}
.q-mark{color:var(--orange); margin-right:.4em; font-size:.6em; vertical-align:middle}

/* ---------- Standorte ---------- */
.loc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:24px}
.loc{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px; display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden;
}
.loc-open{background:linear-gradient(160deg, rgba(74,38,128,.42), var(--surface) 58%)}
.loc-soon{border-style:dashed}
.loc h3{font-size:1.6rem; color:#fff}
.loc-status{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.dot{width:9px; height:9px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 4px rgba(37,211,102,.18)}
.dot-soon{background:var(--gold); box-shadow:0 0 0 4px rgba(240,190,78,.18)}
.loc-adr{margin:0; font-size:1.05rem; color:#fff; font-weight:600}
.loc-text{margin:0; color:var(--muted); font-size:.96rem}
.loc-meta{margin:0; display:grid; gap:14px}
.loc-meta dt{font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:3px}
.loc-meta dd{margin:0; color:var(--text); font-size:.96rem}
.loc-meta a{color:var(--orange); font-weight:700; text-decoration:none}
.muted{color:var(--muted)}
.loc-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:6px}

/* ---------- Galerie ---------- */
.gallery-sec{padding-bottom:clamp(48px,8vw,90px)}
.gallery{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 0 22px; padding-inline:var(--gutter);
}
.gallery figure{margin:0; flex:0 0 clamp(210px,26vw,300px); scroll-snap-align:center}
.gallery img{
  width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r-md);
  border:1px solid var(--line); transition:transform .35s ease, filter .35s ease; filter:saturate(.95);
}
.gallery img:hover{transform:translateY(-6px); filter:saturate(1.1)}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px}
.ccard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 24px; display:flex; flex-direction:column; gap:8px; text-decoration:none; transition:.22s;
}
a.ccard:hover{border-color:var(--violet-lite); transform:translateY(-4px)}
.ccard-label{font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.ccard-value{font-family:var(--display); font-size:1.32rem; color:#fff; line-height:1.15}
.ccard-hint{font-size:.85rem; color:var(--muted); margin-top:auto}
.ccard-wa{background:linear-gradient(160deg, rgba(37,211,102,.2), var(--surface) 60%); border-color:rgba(37,211,102,.35)}
.ccard-wa .ccard-label{color:var(--wa)}

.social-row{display:flex; flex-wrap:wrap; gap:16px; margin-top:26px}
.social{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  padding:14px 22px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.04); transition:.22s;
}
.social:hover{border-color:var(--orange); background:rgba(244,157,15,.1)}
.social svg{width:22px; height:22px; fill:var(--orange); flex:none}
.social span{font-weight:700; color:#fff}
.social em{font-style:normal; font-size:.8rem; color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line); background:var(--ink-2); padding-top:56px}
.footer-inner{display:flex; flex-wrap:wrap; gap:34px; justify-content:space-between; align-items:flex-start}
.footer-brand img{margin-bottom:14px; object-fit:contain}
.footer-slogan{margin:0 0 6px; font-family:var(--display); font-size:1.4rem; text-transform:uppercase; color:#fff}
.footer-small{margin:0; font-size:.88rem; color:var(--muted)}
.footer-nav{display:flex; flex-wrap:wrap; gap:10px 26px}
.footer-nav a{text-decoration:none; font-weight:600; font-size:.93rem; color:var(--muted)}
.footer-nav a:hover{color:var(--orange)}
.footer-bottom{margin-top:44px; padding-block:20px; border-top:1px solid var(--line)}
.footer-bottom p{margin:0; font-size:.82rem; color:var(--muted)}

/* ---------- Mobile Sticky CTA ---------- */
.mobile-cta{
  display:none; position:fixed; left:14px; right:14px; bottom:14px; z-index:95;
  background:var(--wa); color:#06280F; text-align:center; text-decoration:none;
  padding:15px; border-radius:999px; font-weight:800;
  box-shadow:0 14px 34px -14px rgba(37,211,102,.9);
}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(24px)}
.reveal.is-in{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.22,.9,.3,1)}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1000px){
  .menu-grid{columns:1}
  .split-inner, .feature-inner{grid-template-columns:1fr}
  .split-reverse .split-media{order:0}
  .story-img{aspect-ratio:16/11}
}

@media (max-width:820px){
  .nav{
    position:fixed; inset:72px 0 auto; flex-direction:column; gap:0;
    background:rgba(11,9,18,.98); backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line); padding:10px var(--pad) 24px;
    transform:translateY(-140%);
    /* visibility hält die geschlossene Navigation aus Tab-Reihenfolge und Screenreader heraus */
    visibility:hidden;
    transition:transform .3s cubic-bezier(.3,.9,.3,1), visibility .3s;
  }
  .nav.is-open{transform:translateY(0); visibility:visible}
  .nav a{padding:15px 0; border-bottom:1px solid var(--line); font-size:1.05rem}
  .nav a::after{display:none}
  .nav-toggle{display:flex}
  .header-actions .btn{display:none}
  .mobile-cta{display:block}
  body{padding-bottom:74px}
  .hero-scroll{display:none}
  .hero::after{
    background:
      radial-gradient(90% 55% at 80% 12%, var(--violet-glow), transparent 62%),
      linear-gradient(180deg, rgba(11,9,18,.90) 0%, rgba(11,9,18,.62) 40%, rgba(11,9,18,.93) 80%, var(--ink) 100%);
  }
  .hero-facts{gap:8px; flex-direction:column}
  .hero-facts li + li::before{display:none}
  .board{flex-basis:86vw}
}

@media (max-width:520px){
  body{font-size:16px}
  .btn{width:100%}
  .hero-cta{flex-direction:column; align-items:stretch}
  .loc{padding:26px 22px}
  .loc-cta .btn{width:auto; flex:1}
  .quote{font-size:1.3rem}
  .marquee-track{font-size:1.1rem}
  .upgrade-bar{flex-direction:column; gap:8px}
  .fp{flex:1; min-width:0}
  .feature-text .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}

/* ---------- Rechtstexte (Impressum / Datenschutz) ---------- */
.legal{padding-block:clamp(56px,9vw,100px); max-width:760px}
.legal h1{font-size:clamp(2.2rem,6vw,3.4rem); color:#fff; margin-bottom:26px}
.legal h2{font-size:1.35rem; color:var(--orange); margin:38px 0 12px}
.legal p, .legal li{color:var(--muted); font-size:1rem}
.legal a{color:var(--orange); font-weight:600}
.legal address{font-style:normal; color:#fff; line-height:1.8}
.legal .todo{
  display:block; background:rgba(240,190,78,.1); border:1px dashed rgba(240,190,78,.45);
  border-radius:var(--r-sm); padding:14px 16px; margin:14px 0; color:var(--gold); font-size:.92rem;
}
.legal .back{display:inline-block; margin-top:44px; font-weight:700; text-decoration:none}