/* ==========================================================================
   Kevins Feuerstelle — kevins-feuerstelle.at
   Eigenständiges Stylesheet, ersetzt WordPress/OceanWP/Elementor.
   Werte 1:1 aus der bisherigen Seite übernommen (siehe DESIGN-SPEC.md).
   ========================================================================== */

/* --------------------------------------------------------------- Schrift */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 100 900;              /* Variable Font, deckt alle Schnitte ab */
  font-display: swap;
  src: url('../fonts/exo2-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;
}

/* --------------------------------------------------------------- Tokens */
:root {
  --c-black:  #000000;
  --c-red:    #de1a1a;   /* Akzent: Überschriften-Teil, Preise, Links */
  --c-maroon: #8f2e2f;   /* Vorbestellen-Panel, aktiver Menüpunkt, Tab aktiv */
  --c-white:  #ffffff;
  --c-slate:  #31363b;   /* Sektion "Unsere Mission" */
  --c-panel:  #6c2121;   /* schräge Fläche "Vorbestellen", aus der Grafik gemessen */
  --c-card:   #1c1c1c;   /* Speisekarten-Container */
  --c-grey:   #bfbfbf;   /* Fließtext Catering */
  --c-grey-2: #cccccc;   /* Allergen-Zeile Speisekarte */
  --c-wa:     #25d366;   /* WhatsApp */

  /* Gestufte Flächen statt einer flachen Box — gibt Tiefe ohne neue Farben */
  --surface-1: #0b0b0c;
  --surface-2: #131315;
  --surface-3: #1a1a1d;

  /* Haarlinien statt kräftiger Rahmen */
  --line:      rgb(255 255 255 / .08);
  --line-warm: rgb(255 138 96 / .18);

  --text-soft: #b8b2ad;  /* warmes Grau für Fließtext */
  --text-dim:  #857f7a;  /* Allergene, Kleinstschrift */

  --container:      1140px;
  --container-wide: 1190px;

  --header-h: 100px;

  /* Ein Vertikalmaß für alle Sektionen statt der ererbten 80/100/130/132 */
  --sec-y: 110px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--c-black);
  /* Reinweiß auf Schwarz flimmert im Fließtext — minimal zurückgenommen.
     Überschriften bleiben reinweiß. */
  color: #ece8e5;
  font-family: 'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

/* Sichtbarer Fokus für Tastaturbedienung — auf der alten Seite nicht vorhanden */
:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 0; left: 0; z-index: 200;
  padding: 12px 20px;
  background: var(--c-white); color: var(--c-black);
  font-weight: 600; text-decoration: none;
  transform: translateY(-120%);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --------------------------------------------------------------- Layout */
/* Die Maße sind Inhaltsbreiten wie im Original (1140 bzw. 1190).
   Das seitliche Polster kommt oben drauf, sonst wird der Inhalt schmaler. */
.container      { width: 100%; max-width: calc(var(--container) + 40px);      margin-inline: auto; padding-inline: 20px; }
.container--wide{ width: 100%; max-width: calc(var(--container-wide) + 40px); margin-inline: auto; padding-inline: 20px; }

.section { position: relative; }

/* --------------------------------------------------------------- Typografie */
.eyebrow {
  font-size: 29px; font-weight: 500; line-height: 1;
  color: var(--c-red);
}

/* Zweiteilige Überschrift: erster Teil weiß, zweiter rot. Prägt die ganze Seite. */
.headline {
  font-size: 40px; font-weight: 600; line-height: 1.2;
  color: var(--c-white);
  letter-spacing: -.005em;
  text-wrap: balance;
}
.headline em { font-style: normal; color: var(--c-red); }

.lead   { font-size: 18px; line-height: 1.8; }
.body   { font-size: 16px; line-height: 1.8; }

/* --------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px;
  border: 0; border-radius: 100px;
  font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), color .25s var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--light {
  background: linear-gradient(180deg, #ffffff 0%, #ececec 100%);
  color: var(--c-black);
  box-shadow: 0 2px 10px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .9);
}
.btn--light:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 255 255 / .18);
}

.btn--dark {
  background: linear-gradient(180deg, #1a1a1d 0%, #0a0a0b 100%);
  color: var(--c-white);
  box-shadow: 0 2px 10px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .1);
}
.btn--dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .16);
}

.btn--red { background: var(--c-red); color: var(--c-white); }
.btn--red:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgb(222 26 26 / .35); }

/* --------------------------------------------------------------- Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  padding-inline: 30px;
  background: var(--c-black);
  border-bottom: 1px solid rgb(255 255 255 / .12);
  transition: height .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-stuck { height: 74px; background: rgb(0 0 0 / .92); backdrop-filter: blur(8px); }

.site-header__inner {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.site-logo { display: inline-flex; align-items: center; flex: none; }
.site-logo img { width: 229px; transition: width .3s var(--ease); }
.site-header.is-stuck .site-logo img { width: 190px; }

/* Navigation */
.nav__list { display: flex; align-items: center; gap: 36px; }
.nav__link {
  position: relative;
  display: inline-block; padding: 6px 2px;
  font-size: 19px; line-height: 1.4;
  color: var(--c-white); text-decoration: none;
  transition: color .2s var(--ease);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--c-maroon);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease), background-color .28s var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); background: var(--c-red); }
.nav__link[aria-current='page']::after { transform: scaleX(1); }

/* Menü-Schalter (nur mobil) */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
}
.nav__toggle span {
  display: block; position: relative;
  width: 24px; height: 2px; background: var(--c-white);
  transition: background-color .2s var(--ease);
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: ''; position: absolute; left: 0;
  width: 24px; height: 2px; background: var(--c-white);
  transition: transform .28s var(--ease);
}
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after  { top:  7px; }
.nav__toggle[aria-expanded='true'] span { background: transparent; }
.nav__toggle[aria-expanded='true'] span::before { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] span::after  { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------- Hero */
/* Die Höhe gibt das Foodtruck-Bild vor, nicht eine feste Mindesthöhe.
   Polsterung so gewählt, dass die Textspalte auf derselben Höhe startet
   wie bisher (~237px ab Seitenanfang) — vorher war hier zu viel Luft. */
.hero {
  position: relative; isolation: isolate;
  display: flex; align-items: center;
  padding-block: 56px 90px;
  background: var(--c-black);
  overflow: hidden;
}
/* Linienornament — eine Grafik, die beide Seiten enthält, als Ebene über Schwarz */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: url('../img/ornament.webp') bottom center / cover no-repeat;
  opacity: .4;
}

.hero__inner { display: flex; align-items: center; gap: 0; }
.hero__text  { flex: 1 1 50%; min-width: 0; padding: 10px; }
.hero__media { flex: 1 1 50%; min-width: 0; padding: 10px; display: flex; justify-content: center; }
.hero__media img { width: 87%; }

.hero__title {
  margin-block: 4px 0;
  font-size: 65px; font-weight: 600; line-height: 1;
  text-transform: uppercase;
}
.hero__sub {
  margin-top: 14px;
  font-size: 25px; font-weight: 400; line-height: 1.2;
  text-transform: uppercase; color: var(--c-red);
}
.hero__cta { margin-top: 40px; }

/* --------------------------------------------------------------- Vorbestellen */
.preorder { background: var(--c-black); padding-bottom: 83px; }

.preorder__panel {
  position: relative;
  display: flex; align-items: center;
  min-height: 393px;
}
/* Die schräge Fläche als SVG statt als Bild: skaliert mit dem Container,
   die Rundungen verziehen sich nicht und der Text bleibt immer drin. */
.preorder__shape {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  color: var(--c-panel);
  pointer-events: none;
}
.preorder__media,
.preorder__text { position: relative; z-index: 1; }

.preorder__media {
  flex: 0 0 40%;
  display: flex; justify-content: center;
  margin-bottom: 80px;
}
.preorder__media img {
  width: 47%;
  margin: -20px 0 -58px;
  transition: transform .4s var(--ease);
}
.preorder__media img:hover { transform: rotate(5deg); }

/* Unten ausrichten, nicht mittig: die Oberkante der Fläche verläuft schräg,
   mittig zentriert steht der Kicker über der Schräge statt darin. */
.preorder__text {
  flex: 0 0 60%;
  align-self: flex-end;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end;
  padding: 0 50px 62px 0;
}
.preorder__kicker { font-size: 24px; font-weight: 300; line-height: 1.2; }
.preorder__title  { margin-top: 12px; font-size: 41px; font-weight: 600; line-height: 1.2; }
.preorder__cta    { margin-top: 34px; }

/* --------------------------------------------------------------- Feature-Sektionen */
/* "Jetzt Neu", "Der Fleckenpass", "Geschenk Gutschein" */
.feature {
  display: flex; align-items: center; gap: 48px;
  padding-block: 55px;
  min-height: 227px;
  background: var(--c-black);
}
.feature__media { flex: 0 0 387px; max-width: 387px; }
.feature__media img {
  width: 100%; border-radius: 20px;
  box-shadow: 0 18px 40px rgb(0 0 0 / .5);
}
.feature__text  { flex: 1 1 auto; min-width: 0; }
.feature--reverse { flex-direction: row-reverse; }

.feature__title { margin-bottom: 18px; }
.feature__desc  { font-size: 18px; line-height: 1.8; }

/* Vorteilsliste mit rotem Chevron */
.checklist { margin-top: 22px; display: grid; gap: 10px; }
.checklist li {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 15px; line-height: 1.6;
  color: rgb(255 255 255 / .86);
}
/* Feineres Winkelzeichen statt des klobigen 2px-Rahmens */
.checklist li::before {
  content: ''; flex: none;
  width: 7px; height: 7px; margin-top: 1px;
  border-right: 1.5px solid var(--c-red);
  border-bottom: 1.5px solid var(--c-red);
  transform: rotate(-45deg);
  opacity: .9;
}

/* --------------------------------------------------------------- Mission */
.mission {
  position: relative;
  background: var(--c-slate);
  padding-block: var(--sec-y);
}
/* Keil oben und unten — im Original SVG-Shape-Divider, hier als clip-path */
.mission__shape {
  position: absolute; left: 0; right: 0; z-index: 1;
  pointer-events: none;
  background: var(--c-black);
}
.mission__shape--top    { top: 0;    height: 10px; }
.mission__shape--bottom { bottom: 0; height: 89px; clip-path: polygon(0 100%, 50% 0, 100% 100%); }

.mission__inner { display: flex; align-items: center; gap: 30px; }
.mission__media { flex: 1 1 50%; min-width: 0; padding: 10px; }
.mission__media img {
  width: 337px; max-width: 100%; border-radius: 20px;
  box-shadow: 0 18px 40px rgb(0 0 0 / .45);
}
.mission__text  { flex: 1 1 50%; min-width: 0; padding: 10px; }

.mission__label { font-size: 20px; font-weight: 600; line-height: 1; color: var(--c-red); }
.mission__title { margin-block: 14px 24px; font-size: 50px; font-weight: 600; line-height: 1.2; }
.mission__body  { font-style: italic; }
.mission__body p + p { margin-top: 0; }

/* --------------------------------------------------------------- Speisekarte */
.menu { background: var(--c-black); padding-block: var(--sec-y); }
.menu__head  { text-align: center; }
.menu__title { font-size: 46px; font-weight: 600; line-height: 1.2; }
.menu__note  { margin-top: 10px; font-size: 18px; }

.menu__tabs {
  display: flex; gap: 30px;
  margin: 44px 0 0;
}
/* Facelift: gleiche Pillen, gleiche Maße — nur Fläche, Rand und Tiefe sauberer.
   Das Graublau des inaktiven Reiters lag außerhalb der Palette und war der
   auffälligste Baukasten-Rest; ersetzt durch ein dunkles Neutral. */
.menu__tab {
  flex: 1 1 0;
  padding: 15px 30px;
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--surface-3); color: var(--text-soft);
  font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.menu__tab:not([aria-selected='true']):hover {
  background: #212125; color: var(--c-white); border-color: rgb(255 255 255 / .14);
}
.menu__tab[aria-selected='true'] {
  background: linear-gradient(180deg, #a2363a 0%, var(--c-maroon) 100%);
  color: var(--c-white);
  border-color: rgb(222 26 26 / .45);
  box-shadow: 0 6px 18px rgb(143 46 47 / .38),
              inset 0 1px 0 rgb(255 255 255 / .14);
}

.menu__panel[hidden] { display: none; }

/* Facelift: Maße und Aufbau unverändert. Der 2px-Vollrahmen war das
   Baumarkt-Detail — jetzt Haarlinie in Rot plus weicher Schein darunter. */
.menu-card {
  max-width: 600px; margin: 34px auto 0;
  padding: 15px;
  background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-1) 100%);
  border: 1px solid rgb(222 26 26 / .5); border-radius: 10px;
  box-shadow: 0 20px 44px rgb(0 0 0 / .55),
              0 0 32px rgb(222 26 26 / .1),
              inset 0 1px 0 rgb(255 255 255 / .06);
}
.menu-list li {
  margin-bottom: 20px; padding-bottom: 15px;
  border-bottom: 1px dashed rgb(222 26 26 / .3);
  border-radius: 6px;
  transition: background-color .22s var(--ease);
}
/* Statt des harten scale(1.02) im Original ein ruhiger Farbanflug */
.menu-list li:hover { background: rgb(222 26 26 / .05); }

.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.menu-item__name  { font-size: 16px; font-weight: 600; line-height: 1.8; letter-spacing: .005em; }
.menu-item__price {
  flex: none;
  padding: 5px 11px; border-radius: 6px;
  background: linear-gradient(180deg, #e7332e 0%, #c8151a 100%);
  color: var(--c-white);
  font-size: 16px; font-weight: 700; line-height: 1.8;
  font-variant-numeric: tabular-nums;   /* Preise stehen sauber untereinander */
  box-shadow: 0 2px 10px rgb(222 26 26 / .3),
              inset 0 1px 0 rgb(255 255 255 / .2);
}
.menu-item__note {
  margin-top: 5px;
  font-size: 13px; line-height: 1.6; color: var(--text-dim);
  letter-spacing: .03em;
}

/* --------------------------------------------------------------- Catering */
.catering {
  position: relative; isolation: isolate;
  padding-block: var(--sec-y);
  background: url('../img/catering-bg.webp') center center / cover no-repeat;
}
.catering::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgb(0 0 0 / .7);
}
.catering__shape {
  position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
  background: var(--c-black);
}
.catering__shape--top    { top: 0;    height: 15px; }
.catering__shape--bottom { bottom: 0; height: 90px; clip-path: polygon(0 100%, 50% 0, 100% 100%); }

.catering__inner { max-width: 595px; }
.catering__label { font-size: 50px; font-weight: 500; line-height: 1; color: var(--c-red); }
.catering__title { margin-block: 10px 20px; font-size: 51px; font-weight: 600; line-height: 1.05; }
.catering__desc  { font-size: 17px; line-height: 1.8; color: var(--c-grey); }
.catering__cta   { margin-top: 30px; }

/* --------------------------------------------------------------- Standorte-Leiste */
/* Vorher ein weicher weißer Lichtbalken (box-shadow) — als scharfe
   Haarlinien oben und unten deutlich sauberer. */
.locbar {
  padding-block: 30px;
  background: var(--c-black);
  border-top: 1px solid rgb(255 255 255 / .16);
  border-bottom: 1px solid rgb(255 255 255 / .16);
  text-align: center;
}
.locbar a {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 15px; font-weight: 300; line-height: 1.5;
  text-decoration: none;
}
.locbar a strong { font-weight: 300; color: var(--c-red); transition: color .2s var(--ease); }
.locbar a:hover strong { color: var(--c-white); }
.locbar a::after {
  content: '›'; color: var(--c-red); font-size: 18px;
  transition: transform .25s var(--ease);
}
.locbar a:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------- Footer */
.site-footer { background: var(--c-black); padding-block: 34px 26px; text-align: center; }

.social { display: flex; justify-content: center; gap: 22px; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--c-white);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.social a:hover { color: var(--c-red); background: rgb(255 255 255 / .06); }
.social svg { width: 22px; height: 22px; fill: currentColor; }

.site-footer__legal {
  margin-top: 22px;
  font-size: 14px; line-height: 1.9;
}
.site-footer__legal a {
  /* Vorher #333 auf Schwarz und damit praktisch unlesbar. */
  color: rgb(255 255 255 / .72);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.site-footer__legal a:hover { color: var(--c-white); text-decoration: underline; }
.site-footer__legal .sep { margin-inline: 10px; color: rgb(255 255 255 / .35); }

/* --------------------------------------------------------------- Unterseiten */
.page-head {
  padding-block: 130px 60px;
  background: var(--c-black);
  text-align: center;
}
.page-head__title { font-size: 50px; font-weight: 600; line-height: 1.2; }

.page-body { padding-bottom: 90px; background: var(--c-black); }

/* Rechtstexte */
.prose { max-width: 860px; margin-inline: auto; font-size: 16px; line-height: 1.85; }
.prose h2 { margin-block: 40px 12px; font-size: 28px; font-weight: 600; line-height: 1.3; color: var(--c-white); }
.prose h3 { margin-block: 28px 10px; font-size: 21px; font-weight: 600; line-height: 1.35; color: var(--c-white); }
.prose h4 { margin-block: 22px 8px; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--c-white); }
.prose p  { margin-bottom: 16px; color: rgb(255 255 255 / .82); }
.prose ul { margin-bottom: 16px; display: grid; gap: 6px; }
.prose ul li { padding-left: 18px; position: relative; color: rgb(255 255 255 / .82); }
.prose ul li::before { content: ''; position: absolute; left: 0; top: .75em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-red); }
.prose a  { color: var(--c-red); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--c-white); }
.prose strong { color: var(--c-white); }

/* --------------------------------------------------------------- Standorte */
.loc { display: flex; gap: 40px; align-items: flex-start; }
.loc__list { flex: 0 0 400px; max-width: 400px; }
.loc__map  { flex: 1 1 auto; min-width: 0; }

#map-container {
  width: 100%; height: 640px;
  border: 2px solid var(--c-red); border-radius: 10px;
  background: var(--c-card);
}

.custom-marker-list { display: grid; gap: 4px; }
.custom-marker-list li { display: block; }
.custom-marker-list .spacer { height: 14px; }

/* Scrollbare Terminliste. Höhe an die Karte daneben angeglichen, damit
   Liste und Karte oben und unten bündig stehen. Der Hinweis darunter
   bleibt stehen und scrollt nicht mit. */
.custom-marker-list {
  max-height: 640px;
  overflow-y: auto;
  padding-right: 10px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--c-red) rgb(255 255 255 / .08);
}
.custom-marker-list::-webkit-scrollbar { width: 8px; }
.custom-marker-list::-webkit-scrollbar-track {
  background: rgb(255 255 255 / .08);
  border-radius: 4px;
}
.custom-marker-list::-webkit-scrollbar-thumb {
  background: var(--c-red);
  border-radius: 4px;
}
.custom-marker-list::-webkit-scrollbar-thumb:hover { background: #f03a3a; }

.custom-marker-list button {
  width: 100%;
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 14px;
  background: var(--c-card); border: 1px solid transparent; border-radius: 6px;
  text-align: left; cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.custom-marker-list button:hover { border-color: rgb(222 26 26 / .5); transform: translateX(3px); }
.custom-marker-list button.active { background: #241416; border-color: var(--c-red); }
.custom-marker-list .date {
  flex: none; min-width: 52px;
  font-weight: 700; color: var(--c-red);
  font-variant-numeric: tabular-nums;
}
.custom-marker-list .name { font-size: 15px; line-height: 1.5; }

.loc__hint {
  margin-top: 16px;
  font-size: 13px; line-height: 1.6; color: var(--text-dim);
}

/* --------------------------------------------------------------- Kontakt */
.contact { display: flex; gap: 56px; align-items: flex-start; }
.contact__intro { flex: 1 1 50%; min-width: 0; }
.contact__form  { flex: 1 1 50%; min-width: 0; }

.contact__lead { font-size: 18px; line-height: 1.8; }
.contact__lead strong { color: var(--c-red); font-weight: 600; }

.contact__points { margin-top: 32px; display: grid; gap: 14px; }
.contact__points a {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 18px; text-decoration: none;
  transition: color .2s var(--ease);
}
.contact__points a:hover { color: var(--c-red); }
.contact__points svg { width: 20px; height: 20px; flex: none; fill: var(--c-red); }

.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field > label { font-size: 15px; font-weight: 500; }
.field input, .field textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--c-card);
  border: 1px solid rgb(255 255 255 / .16); border-radius: 6px;
  color: var(--c-white);
  font: inherit; font-size: 16px; line-height: 1.5;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: rgb(255 255 255 / .38); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--c-red); background: #201316;
}
.field textarea { min-height: 150px; resize: vertical; }

.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
.field--check input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--c-red); }
.field--check label { font-size: 14px; line-height: 1.6; color: rgb(255 255 255 / .82); }
.field--check label a { color: var(--c-red); }

/* Honeypot gegen Spam-Bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: 16px; font-size: 15px; line-height: 1.6; }
.form-status:empty { margin-top: 0; }
.form-status.is-ok   { color: #6ee7a8; }
.form-status.is-fail { color: #ff8a8a; }

/* --------------------------------------------------------------- Nach-oben */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(255 255 255 / .1);
  border: 1px solid rgb(255 255 255 / .2); border-radius: 6px;
  color: var(--c-white); cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease),
              background-color .2s var(--ease), transform .2s var(--ease);
  backdrop-filter: blur(6px);
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--c-red); border-color: var(--c-red); transform: translateY(-2px); }
.to-top svg { width: 18px; height: 18px; fill: currentColor; }

/* --------------------------------------------------------------- Einblenden beim Scrollen */
/* Ersetzt die Elementor-Entrance-Animationen (fadeInUp/Left/Right).
   Wichtig: Der Startzustand hängt an .has-reveal auf <html>. Diese Klasse
   setzt ein Inline-Skript im <head> nur, wenn das Einblenden auch sicher
   laufen kann. Klemmt irgendetwas, ist der Inhalt schlicht sofort sichtbar —
   niemals eine Seite, die auf opacity:0 hängen bleibt. */
.has-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}
.has-reveal .reveal--left  { transform: translateX(-32px); }
.has-reveal .reveal--right { transform: translateX(32px); }

.has-reveal .reveal {
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.has-reveal .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Tablet — bis 1024px
   ========================================================================== */
@media (max-width: 1024px) {
  .hero { min-height: 0; padding-block: 80px; }
  .hero__inner { flex-direction: column; gap: 40px; text-align: center; }
  .hero__text, .hero__media { flex: 1 1 auto; width: 100%; }
  .hero__media { max-width: 520px; margin-inline: auto; }
  .hero__title { font-size: 51px; }
  .eyebrow     { font-size: 23px; }
  .hero__sub   { font-size: 22px; }
  .hero__cta   { display: flex; justify-content: center; }

  .preorder__panel { min-height: 0; padding-block: 40px; background-size: cover; }
  .preorder__media img { width: 70%; margin: 0 0 -60px; }
  .preorder__text  { padding: 0 0 33px; align-items: center; text-align: center; }
  .preorder__title { font-size: 38px; }

  .feature { flex-direction: column; gap: 30px; text-align: center; padding-block: 50px; }
  .feature--reverse { flex-direction: column; }
  .feature__media { flex: 0 0 auto; max-width: 420px; width: 100%; margin-inline: auto; }
  .checklist li { justify-content: center; }

  .mission__inner { flex-direction: column; gap: 34px; }
  .mission__media, .mission__text { flex: 1 1 auto; width: 100%; }
  .mission__title { font-size: 40px; }
  .mission__shape--bottom { height: 60px; }

  .menu { padding-block: 80px; }
  .menu__title { font-size: 39px; }

  .catering { padding-block: 80px; }
  .catering__inner { max-width: none; }
  .catering__label { font-size: 40px; }
  .catering__title { font-size: 40px; }
  .catering__shape--top { height: 10px; }
  .catering__shape--bottom { height: 60px; }

  .loc { flex-direction: column; }
  .loc__list { flex: 1 1 auto; max-width: none; width: 100%; }
  .loc__map { flex: 1 1 auto; width: 100%; }
  .custom-marker-list { max-height: 420px; }
  #map-container { height: 480px; }

  .contact { flex-direction: column; gap: 44px; }
  .contact__intro, .contact__form { flex: 1 1 auto; width: 100%; }

  .page-head { padding-block: 110px 50px; }
  .page-head__title { font-size: 40px; }
}

/* ==========================================================================
   Mobil — bis 767px
   ========================================================================== */
@media (max-width: 767px) {
  :root { --header-h: 74px; }

  .site-header { padding-inline: 18px; }
  .site-logo img { width: 175px; }

  .nav__toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: rgb(0 0 0 / .97);
    border-bottom: 1px solid rgb(255 255 255 / .12);
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s var(--ease);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 18px 22px; }
  .nav__link { padding: 15px 4px; font-size: 20px; border-bottom: 1px solid rgb(255 255 255 / .08); }
  .nav__link::after { display: none; }
  .nav__link[aria-current='page'] { color: var(--c-red); }

  .hero { padding-block: 60px 70px; }
  /* Das Ornament ist 1600x889 und trägt seine Schwünge an den Rändern, die
     Mitte ist leer. Mit "cover" wird es auf einem schmalen Schirm so weit
     hochskaliert, dass nur die leere Mitte im Bild bleibt — dann sieht man
     gar nichts. "100% auto" legt die volle Bildbreite an, dadurch stehen
     beide Schwünge im Bild. */
  .hero::before {
    background-size: 100% auto;
    background-position: center;
    opacity: .55;
  }
  .hero__title { font-size: 38px; }
  .eyebrow     { font-size: 20px; }
  .hero__sub   { font-size: 17px; }
  .hero__cta   { margin-top: 30px; }

  .preorder { padding-bottom: 40px; }
  .preorder__panel { flex-direction: column; padding-block: 30px 0; background-size: cover; }
  .preorder__media { flex: 1 1 auto; margin-bottom: 0; }
  /* Der negative Rand zog den Text über das Handyfoto. Auf schmalen
     Schirmen bleibt dafür kein Platz — Text kommt jetzt sauber darunter. */
  .preorder__media img { width: 52%; margin: 0; }
  .preorder__text  { flex: 1 1 auto; padding: 24px 0 40px; }
  .preorder__kicker{ font-size: 19px; }
  .preorder__title { font-size: 30px; }

  .feature { padding-block: 44px; }
  .feature__title { font-size: 30px; }
  .feature__desc  { font-size: 16px; }

  .mission { padding-block: 50px 80px; }
  .mission__title { font-size: 30px; }
  .mission__label { font-size: 17px; }
  .mission__shape--bottom { height: 30px; }

  .menu { padding-block: 50px; }
  .menu__title { font-size: 30px; }
  .menu__note  { font-size: 16px; }
  .menu__tabs  { gap: 12px; margin-top: 32px; }
  .menu__tab   { padding: 12px 10px; font-size: 14px; }
  .menu-card   { padding: 12px; }
  .menu-item   { flex-wrap: wrap; }
  .menu-item__name  { font-size: 15px; flex: 1 1 62%; }
  .menu-item__price { font-size: 15px; }

  .catering { padding-block: 50px; }
  .catering__label { font-size: 30px; }
  .catering__title { font-size: 30px; }
  .catering__shape--bottom { height: 30px; }

  .locbar { padding-block: 22px; }

  .page-head { padding-block: 90px 40px; }
  .page-head__title { font-size: 32px; }

  .custom-marker-list { max-height: 340px; }
  #map-container { height: 380px; }

  .prose h2 { font-size: 23px; }
  .prose h3 { font-size: 19px; }

  .to-top { right: 14px; bottom: 14px; }
}

/* ==========================================================================
   Bewegung reduzieren — respektiert die Systemeinstellung
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}