/* ==========================================================================
   Ruben Pizza: Corporate Design
   Farben:  #e8422b Highlight · #282827 Text · #f9b233 / #f59e24 Gelb & Orange
   Schrift: Pacifico (Titel) · Nexa Text Black / Extra Bold / Book
   Formen:  organische SVGs aus assets/img/icons
   ========================================================================== */

/* --------------------------------------------------------------- Fonts -- */
/* Pacifico liegt selbst gehostet im Projekt (kein Google-CDN, DSGVO). */
@font-face {
  font-family: "Pacifico";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pacifico-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: "Pacifico";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pacifico-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Nexa Text kommt über Adobe Fonts (Webprojekt, Familie "nexa-text").
   Das Kit wird per <link> in index.html geladen, die Dateien liegen bei Adobe
   und dürfen laut Lizenz nicht selbst gehostet werden.

   Adobe verteilt die 9 Schnitte auf font-weight 100 bis 900:
     Nexa Text Book       -> 400
     Nexa Text Extra Bold -> 700
     Nexa Text Black      -> 900
   Deshalb steht im ganzen Stylesheet 700 für Extra Bold, nicht 800.

   Die @font-face-Regeln unten sind nur ein Auffangnetz: sie greifen, wenn die
   Schrift lokal installiert ist (z. B. per Creative Cloud auf dem Design-Rechner)
   oder wenn irgendwann lizenzierte Webfont-Dateien in assets/fonts/ liegen.
   Ohne beides greift der System-Fallback aus --font-sans. */
@font-face {
  font-family: "Nexa Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Nexa Text Book"), local("NexaText-Book"), local("Nexa Text Book Regular"),
       url("../fonts/nexa-text-book.woff2") format("woff2");
}
@font-face {
  font-family: "Nexa Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Nexa Text Extra Bold"), local("NexaText-ExtraBold"), local("Nexa Text ExtraBold"),
       url("../fonts/nexa-text-extrabold.woff2") format("woff2");
}
@font-face {
  font-family: "Nexa Text";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local("Nexa Text Black"), local("NexaText-Black"),
       url("../fonts/nexa-text-black.woff2") format("woff2");
}

:root {
  /* Marke */
  --c-highlight: #e8422b;
  --c-yellow: #f9b233;
  --c-orange: #f59e24;
  --c-ink: #282827;

  /* Abgeleitet */
  --c-highlight-dark: #c9331e;
  --c-highlight-deep: #a52716;
  --c-highlight-soft: #fce3de;
  --c-orange-dark: #d8830f;
  --c-yellow-soft: #fdefd2;
  --c-ink-soft: #63615d;

  /* Funktional (nur Kennzeichnung vegetarisch / vegan) */
  --c-green: #97bc31;
  --c-green-soft: #eaf2d3;
  --c-green-ink: #4a5f14;

  /* Flächen */
  --c-bg: #ffffff;
  --c-card: #ffffff;
  --c-line: #e9e5df;

  /* Weißes Holz: breite helle Dielen, sehr zurückhaltend */
  --wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='600' viewBox='0 0 960 600'%3E%3Crect width='960' height='600' fill='%23ffffff'/%3E%3Cg fill='none' stroke='%23282827' stroke-opacity='.05' stroke-width='1.1'%3E%3Cpath d='M0 28c160 14 300-16 470-6s310 16 490 2'/%3E%3Cpath d='M0 62c210-14 330 14 520 8s290-16 440-4'/%3E%3Cpath d='M0 96c150 12 280-12 450-4s320 14 510 2'/%3E%3Cpath d='M0 178c190 15 340-16 520-6s280 15 440 3'/%3E%3Cpath d='M0 214c170-13 310 13 500 7s300-15 460-5'/%3E%3Cpath d='M0 248c220 12 350-13 530-5s260 14 430 2'/%3E%3Cpath d='M0 328c160 14 300-15 480-5s300 15 480 3'/%3E%3Cpath d='M0 364c200-13 330 13 510 7s290-15 450-5'/%3E%3Cpath d='M0 398c140 12 290-12 460-4s330 14 500 2'/%3E%3Cpath d='M0 478c200 15 340-16 520-6s280 15 440 3'/%3E%3Cpath d='M0 514c180-13 320 13 500 7s300-15 460-5'/%3E%3Cpath d='M0 548c210 12 340-13 520-5s270 14 440 2'/%3E%3C/g%3E%3Cg fill='none' stroke='%23282827' stroke-opacity='.045' stroke-width='1.2'%3E%3Cpath d='M0 150h960M0 300h960M0 450h960'/%3E%3Cpath d='M355 0v150M690 150v150M180 300v150M615 450v150'/%3E%3C/g%3E%3C/svg%3E");

  /* Organische Formen */
  --shape-gelbe-acht: url("../img/icons/gelbe-acht.svg");
  --shape-gelbe-bubble: url("../img/icons/gelbe-bubble.svg");
  --shape-gelbes-viereck: url("../img/icons/gelbes-viereck.svg");
  --shape-rote-bubble: url("../img/icons/rote-bubble.svg");
  --shape-rotes-dreieck: url("../img/icons/rotes-rundesdreieck.svg");

  /* Layout */
  --wrap: 1180px;
  --radius: 20px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow: 0 2px 4px rgba(40, 40, 39, .05), 0 12px 28px rgba(40, 40, 39, .08);
  --shadow-lg: 0 4px 8px rgba(40, 40, 39, .07), 0 22px 44px rgba(40, 40, 39, .14);

  /* Kopfzeile: gross am Seitenanfang, kompakt beim Scrollen */
  --logo-h: 175px;
  --nav-h: 199px;
  --logo-h-compact: 56px;
  --nav-h-compact: 80px;

  --font-title: "Pacifico", "Segoe Script", "Brush Script MT", cursive;
  /* "nexa-text" = Adobe Fonts, "Nexa Text" = lokal installiert oder selbst gehostet */
  --font-sans: "nexa-text", "Nexa Text", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  padding-top: var(--nav-h); /* Platz für die fixierte Kopfzeile */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-bg);
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--c-highlight); }
a:hover { color: var(--c-highlight-dark); }

h1 {
  font-family: var(--font-title);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0;
  margin: 0 0 .35em;
  font-size: clamp(2rem, 1.1rem + 3.5vw, 4rem);
}

h2 {
  font-family: var(--font-sans);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 .4em;
  font-size: clamp(1.85rem, 1.3rem + 2.4vw, 3rem);
}

h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 .4em;
}
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem); }

p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }

/* ------------------------------------------------------- Fokus & a11y -- */
:focus-visible {
  outline: 3px solid var(--c-highlight);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 8px; top: -100px;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--c-highlight);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; color: #fff; }

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

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

/* ------------------------------------------------------------ Layout -- */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.section { padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0; }
.section--alt { background: var(--wood); background-size: 960px 600px; }

.section__head { max-width: 62ch; margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
.section__head p { color: var(--c-ink-soft); font-size: 1.08em; }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-highlight);
  background: var(--c-yellow-soft);
  padding: .4rem .95rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1rem;
}

/* Handgemalter Unterstrich unter Überschriften.
   isolation: isolate ist nötig: sonst rutscht der Strich mit z-index -1 hinter
   den Hintergrund des Abschnitts und ist auf .section--alt unsichtbar. */
.swash { position: relative; display: inline-block; isolation: isolate; }
.swash::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.12em;
  height: .28em;
  background: var(--c-yellow);
  border-radius: var(--radius-pill);
  transform: rotate(-.8deg);
  z-index: -1;
}

/* Organische Formen als Deko-Element */
.blob {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

/* ------------------------------------------------------------ Buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-family: var(--font-sans);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Sticker-Optik: harte Kante nach unten, die beim Klick eingedrückt wird */
.btn--primary { background: var(--c-highlight); color: #fff; box-shadow: 0 4px 0 var(--c-highlight-dark), var(--shadow); }
.btn--primary:hover { background: var(--c-highlight-dark); color: #fff; box-shadow: 0 6px 0 var(--c-highlight-deep), var(--shadow-lg); }
.btn--primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--c-highlight-deep); }

.btn--outline { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn--outline:hover { background: var(--c-ink); color: #fff; }

.btn--sun { background: var(--c-yellow); color: var(--c-ink); box-shadow: 0 4px 0 var(--c-orange-dark), var(--shadow); }
.btn--sun:hover { background: var(--c-orange); color: var(--c-ink); box-shadow: 0 6px 0 var(--c-orange-dark), var(--shadow-lg); }
.btn--sun:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--c-orange-dark); }

.btn--sm { padding: .6rem 1.15rem; font-size: .92rem; }
.btn--lg { padding: 1.05rem 2rem; font-size: 1.06rem; }

.btn .icon {
  width: 1.35em; height: 1.35em;
  flex: none;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.btn:hover .icon { transform: rotate(-14deg) scale(1.1); }

/* -------------------------------------------------------------- Navbar -- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(12px);
  transition: height .28s ease, box-shadow .28s ease;
}
/* Farbkante statt grauer Linie: setzt oben gleich ein Markensignal. */
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--c-yellow) 0%, var(--c-orange) 30%,
    var(--c-highlight) 62%, var(--c-yellow) 100%);
  transform-origin: left center;
}
/* Beim Scrollen schrumpft die Leiste, der Inhalt darunter bleibt stehen. */
.nav.is-compact { height: var(--nav-h-compact); box-shadow: var(--shadow); }

.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.nav__logo { display: flex; align-items: center; text-decoration: none; flex: none; }
.nav__logo img {
  height: var(--logo-h);
  width: auto;
  transition: height .28s ease;
}
.nav.is-compact .nav__logo img { height: var(--logo-h-compact); }

.nav__panel {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin: 0;   /* margin-bottom der globalen ul-Regel überschreiben */
  list-style: none;
  padding: 0;
}
.nav__menu a {
  display: flex;
  align-items: center;
  padding: .5rem .95rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease;
}
.nav__menu a:hover { background: var(--c-yellow-soft); color: var(--c-ink); }
.nav__menu a[aria-current="true"] { background: var(--c-yellow); color: var(--c-ink); }

.nav__cta { flex: none; }

/* Burger: auf Desktop aus, ab 820px an. Das hidden-Attribut nimmt JS weg,
   ohne JS bleibt der Knopf also weg und das Menü stattdessen sichtbar. */
.nav__burger { display: none; }

.nav__burger-icon {
  position: relative;
  display: block;
  width: 22px; height: 2.5px;
  border-radius: 2px;
  background: var(--c-ink);
  transition: background-color .2s ease;
}
.nav__burger-icon::before,
.nav__burger-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px; height: 2.5px;
  border-radius: 2px;
  background: var(--c-ink);
  transition: transform .25s ease;
}
.nav__burger-icon::before { top: -7px; }
.nav__burger-icon::after { top: 7px; }

.nav.is-open .nav__burger-icon { background: transparent; }
.nav.is-open .nav__burger-icon::before { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger-icon::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  :root { --logo-h: 128px; --nav-h: 148px; --logo-h-compact: 48px; --nav-h-compact: 68px; }
}

@media (max-width: 820px) {
  /* Der Burger macht die Zeile frei, deshalb darf das Logo hier gross sein. */
  :root { --logo-h: 140px; --nav-h: 160px; --logo-h-compact: 52px; --nav-h-compact: 72px; }
  .nav__inner { gap: .75rem; }

  .nav__burger:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 50px; height: 50px;
    margin-left: auto;
    padding: 0;
    border: 2px solid var(--c-line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--c-ink);
    cursor: pointer;
  }
  .nav__burger:not([hidden]):hover { border-color: var(--c-highlight); }

  /* Klappmenü unter der Leiste. Nur mit JS, sonst bliebe es unerreichbar. */
  .nav--js .nav__panel {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: .3rem;
    margin: 0;
    padding: 1rem 1.25rem 1.35rem;
    background: #fff;   /* deckend, sonst scheint der Hero durch */
    border-bottom: 2px solid var(--c-line);
    box-shadow: var(--shadow);
  }
  .nav--js.is-open .nav__panel { display: flex; }

  .nav--js .nav__menu { flex-direction: column; align-items: stretch; gap: .2rem; }
  .nav--js .nav__menu a {
    padding: .85rem 1rem;
    font-size: 1.05rem;
    border-radius: var(--radius-sm);
  }
  .nav--js .nav__cta { justify-content: center; margin-top: .55rem; }

  /* Ohne JS: das alte, seitlich scrollbare Menü als Rückfallebene. */
  .nav:not(.nav--js) .nav__menu { gap: 0; overflow-x: auto; scrollbar-width: none; }
  .nav:not(.nav--js) .nav__menu::-webkit-scrollbar { display: none; }
  .nav:not(.nav--js) .nav__menu a { padding: .45rem .7rem; font-size: .9rem; }
  .nav:not(.nav--js) .nav__cta { display: none; }
}

@media (max-width: 560px) {
  :root { --logo-h: 122px; --nav-h: 142px; --logo-h-compact: 48px; --nav-h-compact: 66px; }
}

/* ---------------------------------------------------------------- Hero -- */
.hero {
  position: relative;
  /* Der Hintergrund soll bis unter die durchscheinende Kopfzeile laufen. */
  margin-top: calc(var(--nav-h) * -1);
  padding: calc(var(--nav-h) + clamp(2.5rem, 1.4rem + 3.6vw, 5rem)) 0 clamp(4rem, 2.75rem + 5.5vw, 7rem);
  background: var(--c-bg);
  overflow: hidden;
}

/* Organische Formen als Hintergrunddeko, dezent an den Rändern */
/* Deko-Form unten links, vollständig sichtbar und nie angeschnitten.
   Sie darf hinter die Merkmal-Pills reichen, die sind deckend weiß. Fließtext
   und Buttons bleiben frei. Achtung: die Drehung vergrößert das umschließende
   Rechteck um rund ein Drittel, dazu kommen 8 px Hub der Animation.

   Standardmäßig aus: unterhalb von 1100px bliebe zu wenig Platz, die Form
   schrumpfte auf Fleckgröße und wirkte eher wie ein Versehen. */
.hero__blob--1 {
  display: none;
  aspect-ratio: 98.33 / 83.63;
  background-image: var(--shape-rotes-dreieck);
  opacity: .9;
  transform: rotate(-16deg);
  animation: treiben 12s linear infinite;
}

/* Zwei weitere Formen im freien Rand rechts. Sie tragen Farbe in die sonst
   leere Fläche neben der Pizza und laufen mit eigenen Rhythmen, damit die
   Komposition lebt statt gleichförmig zu wippen. */
.hero__blob--2,
.hero__blob--3 { display: none; }

@keyframes treiben2 {
  0%, 100% { transform: translateY(0) rotate(11deg); }
  50%      { transform: translateY(12px) rotate(5deg); }
}
@keyframes treiben3 {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-9px) rotate(-2deg); }
}

/* Ab hier steht der Inhalt zweispaltig und unten links wird genug Platz frei,
   dass die Form deutlich größer werden kann. Sie reicht dann hinter die
   Merkmal-Pills. Darunter bliebe sie in den gestapelten Pills hängen. */
@media (min-width: 1100px) {
  /* Abstände müssen mit der Größe wachsen, sonst schiebt die Drehung die
     Form über den Rand: sie dehnt das Rechteck je Seite um 0,115 bzw. 0,143
     der eingestellten Höhe. */
  .hero__blob--1 {
    display: block;
    left: clamp(20px, 2.2vw, 44px);
    bottom: clamp(30px, 2.8vw, 58px);
    /* Zweiter Term füllt den freien Rand links neben dem Inhalt: der ist
       (100vw - 1180px) / 2 breit, minus 48px Abstand zum Text. Geteilt durch
       2,812, weil die Drehung aus der Höhe eine 1,406-fache Breite macht. */
    height: clamp(96px, max(9vw, (100vw - 1228px) / 2.812), 300px);
  }
}

/* Erst ab hier ist der Rand rechts neben der Pizza breit genug. Darunter
   verschwänden die beiden Formen hinter dem Pizzafoto. */
@media (min-width: 1400px) {
  .hero__blob--2 {
    display: block;
    right: clamp(16px, 1.8vw, 40px);
    top: calc(var(--nav-h) + clamp(20px, 3vw, 70px));
    height: clamp(64px, max(5.5vw, (100vw - 1228px) / 4.4), 190px);
    aspect-ratio: 94.52 / 102.6;
    background-image: var(--shape-gelbe-acht);
    transform: rotate(11deg);
    animation: treiben2 9s ease-in-out infinite;
  }
  .hero__blob--3 {
    display: block;
    right: clamp(28px, 3.2vw, 76px);
    bottom: clamp(24px, 2.6vw, 54px);
    height: clamp(44px, max(3.6vw, (100vw - 1228px) / 6.4), 118px);
    aspect-ratio: 99.81 / 60.29;
    background-image: var(--shape-rote-bubble);
    transform: rotate(-8deg);
    animation: treiben3 15s ease-in-out infinite;
  }
}
@keyframes treiben {
  0%, 100% { transform: translateY(0) rotate(-16deg); }
  50%      { transform: translateY(-8px) rotate(-11deg); }
}
.hero .wrap { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(2.5rem, 1.2rem + 4vw, 5rem);
  align-items: center;
}
/* Ohne min-width:0 zwingt die Eigenbreite des Pizzabilds das Grid auseinander. */
.hero__grid > * { min-width: 0; }

/* Der Markenname steht in Pacifico. Das trägt nur, weil er kurz ist:
   Schreibschrift wird ab etwa 20 Zeichen unruhig. Längere Texte gehören
   deshalb in die H2 und in den Fließtext, beide in Nexa. */
.hero h1 {
  margin-bottom: .18em;
  font-size: clamp(2rem, 1.05rem + 3.4vw, 3.8rem);
  text-wrap: nowrap;
}
.hero h1 em { font-style: normal; color: var(--c-highlight); }

/* Nexa als klarer Gegenpol zur Schreibschrift darüber. */
.hero__claim {
  margin: 0 0 clamp(1.4rem, 1rem + 1.4vw, 2.25rem);
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(1rem, .88rem + .5vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--c-highlight);
}

@media (max-width: 460px) {
  /* Auf sehr schmalen Displays darf der Name umbrechen statt zu überlaufen. */
  .hero h1 { text-wrap: wrap; }
}

.hero__lead {
  font-size: clamp(1.08rem, 1rem + .5vw, 1.3rem);
  color: var(--c-ink-soft);
  max-width: 46ch;
  text-wrap: pretty;   /* verhindert ein einzelnes Wort in der letzten Zeile */
  margin-bottom: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: clamp(2.5rem, 1.8rem + 2.2vw, 3.75rem);
}
.hero__actions .btn--outline { box-shadow: 0 4px 0 var(--c-ink); }
.hero__actions .btn--outline:hover { box-shadow: 0 6px 0 var(--c-ink); }
.hero__actions .btn--outline:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--c-ink); }

.hero__art { position: relative; }
/* Die Pizza liegt auf einer organischen Form, satt in der Markenfarbe. */
.hero__art::before {
  content: "";
  position: absolute;
  inset: -13%;
  background: var(--shape-gelbes-viereck) center/contain no-repeat;
  transform: rotate(-7deg);
  z-index: 0;
  animation: wiegen 16s ease-in-out infinite;
}
/* Sehr langsames Wiegen, gegenläufig zum Schweben der Pizza. */
@keyframes wiegen {
  0%, 100% { transform: rotate(-7deg) scale(1); }
  50%      { transform: rotate(-2.5deg) scale(1.035); }
}
.hero__art img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  animation: schweben 7s ease-in-out infinite;
}
/* Ruhiges Auf und Ab statt Drehung. */
@keyframes schweben {
  0%, 100% { transform: translateY(-9px); }
  50%      { transform: translateY(9px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__art img { animation: none; }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { max-width: min(380px, 100%); margin-inline: auto; order: -1; }
}


/* -------------------------------------------------------- Entry-Effekt -- */
/* Gestaffeltes Einblenden beim Laden. Steht bewusst hinter allen Hero-Regeln,
   sonst überschreiben deren animation-Kurzschreibweisen die Kombinationen hier.

   Gekapselt in prefers-reduced-motion: no-preference, damit nichts auf
   opacity 0 stehen bleibt, wenn Animationen unerwünscht sind.

   Die Keyframes definieren nur "from". Der Zielwert ist damit automatisch der
   eigene berechnete Wert des Elements. Das ist bei den Formen wichtig: eine
   steht auf opacity .9, die anderen auf 1. */
@keyframes textEin  { from { opacity: 0; transform: translateY(14px); } }
@keyframes bildEin  { from { opacity: 0; transform: scale(.94); } }
@keyframes formEin  { from { opacity: 0; } }
@keyframes kanteEin { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: no-preference) {
  .hero h1,
  .hero__claim,
  .hero__lead,
  .hero__actions {
    animation: textEin .75s cubic-bezier(.22, .68, .35, 1) both;
  }
  .hero h1       { animation-delay: .08s; }
  .hero__claim   { animation-delay: .18s; }
  .hero__lead    { animation-delay: .28s; }
  .hero__actions { animation-delay: .38s; }

  /* backwards statt both: nach dem Einblenden soll wieder das Schweben greifen.
     Mit both bliebe die Endpose des Entry dauerhaft stehen und würde es
     blockieren, weil beide dieselbe Eigenschaft animieren. */
  .hero__art img {
    animation: schweben 7s ease-in-out infinite,
               bildEin .9s cubic-bezier(.22, .68, .35, 1) .15s backwards;
  }
  .hero__art::before {
    animation: wiegen 16s ease-in-out infinite,
               formEin .9s ease-out .1s backwards;
  }

  /* Bei den Formen animiert der Entry die Deckkraft und das Treiben die
     Transformation. Zwei verschiedene Eigenschaften, deshalb kein Konflikt. */
  .hero__blob--1 { animation: treiben 12s linear infinite, formEin .9s ease-out .55s both; }
  .hero__blob--2 { animation: treiben2 9s ease-in-out infinite, formEin .9s ease-out .65s both; }
  .hero__blob--3 { animation: treiben3 15s ease-in-out infinite, formEin .9s ease-out .75s both; }

  .nav::after { animation: kanteEin .9s cubic-bezier(.22, .68, .35, 1) .1s both; }
}

/* ------------------------------------------------------------ Über uns -- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* Kein Hover: die Kacheln sind nicht anklickbar. Statt eines Icons trägt jede
   Karte eine farbige Oberkante, das kann optisch nicht kippen. */
.card {
  position: relative;
  overflow: hidden;
  background: var(--c-card);
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  padding: 2rem 1.75rem 1.75rem;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 7px;
  background: var(--c-yellow);
}
.cards .card:nth-child(2)::before { background: var(--c-highlight); }
.cards .card:nth-child(3)::before { background: var(--c-orange); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--c-ink-soft); margin: 0; }

/* Merkmale statt Zahlen. Standen früher im Hero, dort war es zu voll.
   Unter den Karten fassen sie die Sektion zusammen. */
.marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  padding: 0;
  margin: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem) 0 0;
  list-style: none;
}
.marks li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .95rem;
  border: 2px solid var(--c-yellow);
  border-radius: var(--radius-pill);
  background: var(--c-yellow-soft);
  font-size: .88rem;
  font-weight: 700;
  color: var(--c-ink);
}
.marks svg { width: 1.05em; height: 1.05em; flex: none; color: var(--c-highlight); }

/* ------------------------------------------------------ Speisekarte -- */
/* Sprungmarken zu den Kategorien.
   Bewusst nicht sticky: zusammen mit der Kopfzeile ginge zu viel Viewport weg. */
.menu-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .9rem;
  margin-bottom: 2rem;
  padding: 1rem 1.15rem;
  background: var(--c-card);
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
}
.menu-nav__label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.menu-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-nav a {
  display: inline-flex;
  align-items: center;
  padding: .5rem 1rem;
  border: 2px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.menu-nav a:hover {
  background: var(--c-highlight);
  border-color: var(--c-highlight);
  color: #fff;
}

.menu-group { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.menu-group__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-bottom: .75rem;
  border-bottom: 3px solid var(--c-ink);
}
.menu-group__head h3 { margin: 0; font-weight: 900; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem); }
.menu-group__note { font-size: .9rem; color: var(--c-ink-soft); font-weight: 400; }

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
  gap: 1.25rem;
}

.dish {
  display: flex;
  flex-direction: column;
  background: var(--c-card);
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.dish[hidden] { display: none; }

.dish__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--c-yellow-soft);
}
.dish__media img { width: 100%; height: 100%; object-fit: cover; }
.dish__media .dish__nr { position: absolute; top: .6rem; left: .6rem; }

/* Fällt für Gerichte ohne Foto zurück: Nummer neben den Titel. */
.dish__head { display: flex; align-items: baseline; gap: .6rem; }

.dish__nr {
  flex: none;
  min-width: 2.1rem;
  padding: .12rem .5rem;
  text-align: center;
  background: var(--c-ink);
  color: #fff;
  font-weight: 700;
  font-size: .78rem;
  border-radius: var(--radius-pill);
}

.dish__body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.dish__title { margin: 0; font-size: 1.06rem; font-weight: 700; line-height: 1.25; }
.dish__ing { margin: 0; font-size: .9rem; color: var(--c-ink); }
.dish__desc { margin: 0; font-size: .87rem; color: var(--c-ink-soft); }
.dish__foot { margin-top: auto; padding-top: .45rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

/* Unterabschnitt innerhalb einer Gruppe (Dressings, Salat-Extras, Alkohol) */
.menu-sub {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .7rem;
  margin: 1.75rem 0 .8rem;
  font-size: 1.05rem;
  font-weight: 700;
}
.menu-sub span { font-size: .85rem; font-weight: 400; color: var(--c-ink-soft); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .18rem .6rem;
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tag--veg { background: var(--c-green-soft); color: var(--c-green-ink); }
.tag--vegan { background: var(--c-green); color: var(--c-ink); }
.tag--hot { background: var(--c-highlight-soft); color: var(--c-highlight-dark); }

.allergens { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.allergens__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--c-ink-soft); letter-spacing: .06em; }
.allergen {
  display: inline-grid;
  place-items: center;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 .3rem;
  border: 2px solid var(--c-line);
  border-radius: 7px;
  background: #fff;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--c-ink);
  cursor: help;
}
.allergen--none { border-style: dashed; color: var(--c-ink-soft); font-weight: 400; }
/* Zusatzstoffe sind Ziffern und sollen sich von den Allergenbuchstaben abheben. */
.allergen--zusatz { border-color: var(--c-yellow); background: var(--c-yellow-soft); }

/* Kompakte Listen (Extras & Getränke).
   300px als Mindestbreite ergibt drei Spalten statt vier, sonst bleibt für den
   Namen zu wenig Platz und er bricht auf drei Zeilen um. */
.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: .6rem;
}
.list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .7rem;
  padding: .7rem .9rem;
  background: var(--c-card);
  border: 2px solid var(--c-line);
  border-radius: var(--radius-sm);
}
.list-item[hidden] { display: none; }
.list-item__nr { flex: none; font-size: .72rem; font-weight: 700; color: var(--c-ink-soft); min-width: 2.2rem; }
.list-item__text { flex: 1 1 12ch; min-width: 0; display: flex; flex-direction: column; }
.list-item__name { font-weight: 700; font-size: .95rem; }
.list-item__note { font-size: .8rem; line-height: 1.4; color: var(--c-ink-soft); }
.list-item__thumb { flex: none; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--c-yellow-soft); }
/* In den Listen steht das Wort "Allergene" sonst 37-mal und nimmt dem Namen die
   Zeile weg. Der Screenreader-Text und der Tooltip am Kürzel bleiben erhalten. */
.list-item .allergens { flex: none; margin-left: auto; }
.list-item .allergens__label { display: none; }

/* Allergen-Legende */
.legend {
  margin-top: 2.5rem;
  padding: 1.75rem;
  background: var(--c-yellow-soft);
  border-radius: var(--radius);
}
.legend h3 { margin-bottom: 1rem; }
.legend__sub { margin: 0 0 .7rem; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-soft); }
.legend__grid + .legend__sub { margin-top: 1.5rem; }
.legend__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .5rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
.legend__grid li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; }
.legend__grid b {
  display: inline-grid; place-items: center;
  width: 1.7rem; height: 1.7rem;
  background: #fff;
  border-radius: 7px;
  font-size: .8rem;
  font-weight: 700;
  flex: none;
}
.legend__note { font-size: .85rem; color: var(--c-ink-soft); margin: 0; }

/* Fußnote unter der Karte, bewusst zurückhaltend. */
.menu-note {
  margin: 1.25rem 0 0;
  font-size: .82rem;
  color: var(--c-ink-soft);
}
.menu-note span { font-weight: 700; color: var(--c-highlight); }

/* --------------------------------------------------------- Standorte -- */
.finder {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, .75rem + 2vw, 2rem);
  background: var(--c-ink);
  color: #fff;
  border-radius: var(--radius);
  margin-bottom: 2rem;
}
.finder__blob {
  top: -46px; right: -46px;
  width: 190px; height: 160px;
  background-image: var(--shape-rotes-dreieck);
  opacity: .5;
  transform: rotate(14deg);
}
.finder h3 { color: #fff; margin-bottom: .35rem; position: relative; }
.finder p { color: rgba(255, 255, 255, .72); font-size: .95rem; margin-bottom: 1.25rem; position: relative; }

.finder__form { display: flex; flex-wrap: wrap; gap: .65rem; position: relative; }
/* Umrandete Buttons stehen hier auf dunklem Grund. */
.finder .btn--outline { border-color: #fff; color: #fff; }
.finder .btn--outline:hover { background: #fff; color: var(--c-ink); }
.finder #finder-reset { border-color: rgba(255, 255, 255, .4); color: rgba(255, 255, 255, .8); }
.finder #finder-reset:hover { background: rgba(255, 255, 255, .9); color: var(--c-ink); }
.finder__field { flex: 1 1 250px; position: relative; }
.finder__field input {
  width: 100%;
  padding: .9rem 1.1rem;
  font: inherit;
  font-family: var(--font-sans);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--c-ink);
}
.finder__field input:focus-visible { outline-color: var(--c-yellow); }

.finder__status {
  margin-top: 1rem;
  font-size: .92rem;
  font-weight: 700;
  color: var(--c-yellow);
  min-height: 1.5em;
  position: relative;
}

.locations { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.25rem; }

.loc {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.5rem;
  background: var(--c-card);
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
}
.loc--nearest { border-color: var(--c-highlight); box-shadow: var(--shadow); }

.loc__top { display: flex; align-items: flex-start; gap: .75rem; }
.loc__name { margin: 0; font-size: 1.15rem; font-weight: 700; flex: 1; }
.loc__badge {
  flex: none;
  padding: .2rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--c-highlight);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.loc__dist {
  flex: none;
  padding: .2rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--c-yellow-soft);
  color: var(--c-highlight-dark);
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
}

.loc__addr { margin: 0; font-style: normal; color: var(--c-ink-soft); font-size: .95rem; }
.loc__addr .plz { font-weight: 700; color: var(--c-ink); }
.loc__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.loc__maps { font-size: .88rem; font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; }
.loc__maps svg { width: 1em; height: 1em; }

.empty {
  padding: 2.5rem;
  text-align: center;
  background: var(--c-card);
  border: 2px dashed var(--c-line);
  border-radius: var(--radius);
  color: var(--c-ink-soft);
}

/* ----------------------------------------------------------------- FAQ -- */
.faq { max-width: 820px; }
.faq details {
  background: var(--c-card);
  border: 2px solid var(--c-line);
  border-radius: var(--radius-sm);
  margin-bottom: .75rem;
  overflow: hidden;
}
.faq summary {
  padding: 1.1rem 1.25rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; font-weight: 700; color: var(--c-highlight); line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { background: var(--c-yellow-soft); }
.faq p { padding: 1rem 1.25rem 0; margin: 0 0 1rem; color: var(--c-ink-soft); }

/* ------------------------------------------------------ Rechtstexte -- */
/* Impressum und Datenschutz brauchen jeweils eine eigene H1. Pacifico passt
   für Rechtstexte nicht, deshalb bekommt die H1 hier bewusst die H2-Optik. */
.legal__titel {
  font-family: var(--font-sans);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 .4em;
  font-size: clamp(1.85rem, 1.3rem + 2.4vw, 3rem);
}
.legal__body { max-width: 72ch; }
.legal__body h3 {
  margin-top: 2.25rem;
  margin-bottom: .5rem;
  font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem);
}
.legal__body h3:first-child { margin-top: 0; }
.legal__body p { color: var(--c-ink-soft); }
/* Offene Pflichtangaben sollen beim Korrekturlesen ins Auge springen. */
.legal__body mark {
  background: var(--c-highlight-soft);
  color: var(--c-highlight-dark);
  padding: .1em .45em;
  border-radius: var(--radius-sm);
  font-weight: 700;
}

/* -------------------------------------------------------------- Footer -- */
.footer {
  background: var(--c-ink);
  color: rgba(255, 255, 255, .78);
  padding: 3.5rem 0 2rem;
  font-size: .93rem;
}
.footer a { color: var(--c-yellow); }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-bottom: 2.5rem; }
.footer h4 { color: #fff; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .9rem; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .45rem; }
.footer__logo { height: 104px; width: auto; margin-bottom: .75rem; }
.footer__bottom {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .85rem;
}

/* -------------------------------------------------- Einwilligung -- */
/* Kein Cookie-Wall: der Banner legt sich unten an, verdeckt den Inhalt nicht
   und beide Schaltflächen sind gleich prominent. Ablehnen muss genauso
   leicht sein wie Zustimmen. */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  padding: clamp(.75rem, .5rem + 1vw, 1.5rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.consent.is-offen { opacity: 1; visibility: visible; transform: none; }

.consent__box {
  /* Bewusst schmal: der Hinweis soll die Seite nicht zumauern. Die Einzelheiten
     stehen in der Datenschutzerklärung, hier steht nur das Nötigste. */
  width: min(100%, 25rem);
  margin-inline: auto;
  padding: 1.1rem 1.2rem;
  background: #fff;
  border: 2px solid var(--c-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  /* Auf kurzen Displays darf der Text scrollen, aber die Knöpfe müssen sichtbar
     bleiben: sonst kann man weder zustimmen noch ablehnen. */
  max-height: calc(100dvh - 2 * clamp(.75rem, .5rem + 1vw, 1.5rem));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.consent__titel {
  margin: 0 0 .3rem;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 1rem;
  color: var(--c-ink);
}
.consent__text {
  margin: 0 0 .9rem;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
}
.consent__buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Basis klein genug, dass beide Knöpfe auch in der schmalen Box nebeneinander passen. */
.consent__buttons .btn { flex: 1 1 8rem; justify-content: center; }
.consent__links { margin: .7rem 0 0; font-size: .78rem; color: var(--c-ink-soft); }

/* Widerruf-Schalter in der Fußzeile: sieht aus wie die Links daneben. */
.footer [data-consent-open] {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--c-yellow);
  text-decoration: underline;
  cursor: pointer;
}
.footer [data-consent-open]:hover { color: #fff; }

/* ------------------------------------------------------------ Utility -- */
.mt-0 { margin-top: 0; }
.noscript {
  padding: 1rem 1.25rem;
  background: var(--c-yellow-soft);
  border-radius: var(--radius-sm);
  font-weight: 400;
}