/* Generated bundle. Edit the source files listed below and rebuild this file. */

/* Source: global.css */
/* ============================================================
   PORTOLA GRILL — global.css
   Zentrale Variablen, Fonts, Basis, Buttons, Utilities
   ============================================================ */

/* ---------- Self-hosted Fonts (kein externes Google Fonts) ---------- */
@font-face {
  font-family: "Portola Display";
  src: url("../fonts/anton-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Portola Script";
  src: url("../fonts/kaushan-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Portola Sans";
  src: url("../fonts/manrope-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Portola Sans";
  src: url("../fonts/manrope-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Portola Sans";
  src: url("../fonts/manrope-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Portola Sans";
  src: url("../fonts/manrope-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---------- Design-Variablen (in Elementor global anpassbar) ---------- */
:root {
  /* Farben */
  --portola-black:  #080d11;
  --portola-dark:   #0c151b;
  --portola-char:   #17232b;   /* dunkler Schiefer / Karten */
  --portola-stone:  #1e2c35;
  --portola-cream:  #f4ead8;
  --portola-beige:  #d8c9ab;
  --portola-yellow: #f7b928;   /* Pommes-Gelb Akzent */
  --portola-orange: #e8611c;
  --portola-red:    #c92f24;
  --portola-white:  #ffffff;
  --portola-muted:  #94a0a6;

  /* Schrift */
  --portola-font-display: "Portola Display", "Arial Narrow", sans-serif;
  --portola-font-script:  "Portola Script", "Segoe Script", cursive;
  --portola-font-body:    "Portola Sans", system-ui, sans-serif;

  /* Radien */
  --portola-radius-small:  12px;
  --portola-radius-medium: 24px;
  --portola-radius-large:  40px;

  /* Abstände */
  --portola-section-spacing: clamp(80px, 10vw, 160px);
  --portola-gap: clamp(20px, 3vw, 48px);
  --portola-container: 1240px;
  --portola-pad-x: clamp(20px, 5vw, 64px);

  /* Sonstiges */
  --portola-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
  --portola-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--portola-font-body);
  background: var(--portola-black);
  color: var(--portola-cream);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: .98; font-weight: 400; }

/* ---------- Layout Utilities ---------- */
.portola-container {
  width: 100%;
  max-width: var(--portola-container);
  margin-inline: auto;
  padding-inline: var(--portola-pad-x);
}
.portola-section { padding-block: var(--portola-section-spacing); position: relative; }

/* ---------- Überschriften ---------- */
.portola-display {
  font-family: var(--portola-font-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .9;
}
.portola-script {
  font-family: var(--portola-font-script);
  color: var(--portola-yellow);
  text-transform: none;
  line-height: 1;
}
.portola-eyebrow {
  font-family: var(--portola-font-body);
  font-weight: 800;
  text-transform: none;
  letter-spacing: .06em;
  font-size: .76rem;
  color: var(--portola-yellow);
  display: inline-flex;
  align-items: center;
  gap: .62rem;
  line-height: 1;
}
.portola-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--portola-yellow);
  box-shadow: 3px 3px 0 var(--portola-red);
  transform: rotate(45deg);
}

/* Nummerierte Abschnittsmarker als kompakter Küchenbon statt Eyebrow-Label. */
.portola-section .portola-eyebrow {
  padding: .58rem .82rem .54rem;
  margin-bottom: 1.2rem;
  border: 1px solid rgba(8, 13, 17, .9);
  border-radius: 2px;
  background: var(--portola-yellow);
  color: var(--portola-black);
  box-shadow: 4px 4px 0 var(--portola-red);
  transform: rotate(-.6deg);
  transform-origin: center;
  vertical-align: top;
}
.portola-section .portola-eyebrow::before {
  width: 6px;
  height: 6px;
  border: 1px solid var(--portola-black);
  border-radius: 50%;
  background: rgba(8, 13, 17, .16);
  box-shadow: none;
  transform: none;
}
.portola-section-title {
  font-family: var(--portola-font-display);
  text-transform: uppercase;
  font-size: clamp(2.6rem, 7vw, 6rem);
  color: var(--portola-cream);
}
.portola-lead {
  color: var(--portola-muted);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  max-width: 52ch;
}

/* ---------- Buttons ---------- */
.portola-btn {
  --btn-bg: var(--portola-yellow);
  --btn-fg: var(--portola-black);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 1.05em 1.9em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .86rem;
  white-space: nowrap;
  border: 2px solid var(--btn-bg);
  border-radius: 999px;
  transition: transform .4s var(--portola-ease),
              background-color .3s var(--portola-ease),
              color .3s var(--portola-ease),
              box-shadow .4s var(--portola-ease);
  will-change: transform;
}
.portola-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -10px rgba(247,185,40,.6); }
.portola-btn:active { transform: translateY(0); }
.portola-btn svg { width: 18px; height: 18px; }
.portola-btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--portola-cream);
  border-color: rgba(244,234,216,.35);
}
.portola-btn--outline:hover {
  background: var(--portola-cream);
  color: var(--portola-black);
  box-shadow: none;
}
.portola-btn--red { --btn-bg: var(--portola-red); --btn-fg: var(--portola-white); }
.portola-btn--red:hover { box-shadow: 0 14px 30px -10px rgba(201,47,36,.6); }

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

.portola-skip-link {
  position: fixed;
  right: max(1.25rem, calc(env(safe-area-inset-right) + 1.25rem));
  bottom: max(1.25rem, calc(env(safe-area-inset-bottom) + 1.25rem));
  z-index: 1000;
  width: 58px;
  height: 58px;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(244,234,216,.72);
  border-radius: 50%;
  background: rgba(8,13,17,.64);
  color: var(--portola-cream);
  font-size: 0;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0,0,0,.34);
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
  transform: translateY(12px) scale(.9);
  transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
}
.portola-skip-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, -38%) rotate(45deg);
}
.portola-skip-link::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  width: 2px;
  height: 22px;
  border-radius: 2px;
  background: currentColor;
  transform: translateX(-50%);
}
.portola-skip-link:focus-visible {
  opacity: 1;
  clip-path: none;
  pointer-events: auto;
  border-radius: 50%;
  transform: translateY(0) scale(1);
}

/* ---------- Marquee (editorial laufband) ---------- */
.portola-marquee {
  overflow: hidden;
  border-block: 2px solid rgba(244,234,216,.14);
  background: var(--portola-red);
  color: var(--portola-white);
  padding-block: .55em;
}
.portola-marquee__track {
  display: inline-flex;
  gap: 2.4rem;
  white-space: nowrap;
  will-change: transform;
  animation: portola-marquee 32s linear infinite;
}
.portola-marquee__track span {
  font-family: var(--portola-font-display);
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  display: inline-flex;
  align-items: center;
  gap: 2.4rem;
}
.portola-marquee__track span::after {
  content: "◆";
  color: var(--portola-yellow);
  font-size: .7em;
}
@keyframes portola-marquee {
  to { transform: translateX(-50%); }
}

/* ---------- Scroll-Reveal (Vanilla, IntersectionObserver) ---------- */
.portola-reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .9s var(--portola-ease), transform .9s var(--portola-ease);
  will-change: transform, opacity;
}
.portola-reveal.is-visible { opacity: 1; transform: none; }

/* Zahl / Kapitel */
.portola-chapter-num {
  font-family: var(--portola-font-display);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(216,201,171,.35);
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 1;
  display: block;
}

.portola-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: .05;
  mix-blend-mode: overlay;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .portola-marquee__track { animation: none; }
  .portola-reveal { opacity: 1; transform: none; transition: none; }
}

/* Source: header.css */
/* ============================================================
   PORTOLA GRILL — header.css
   Schwebende Navigation + Hintergrundbild + Smoke-Video
   ============================================================ */

.portola-header {
  --portola-nav-morph: cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  top: max(clamp(14px, 2vw, 26px), calc(env(safe-area-inset-top) + 8px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: min(1120px, calc(100% - 2 * clamp(16px, 4vw, 40px)));
  transition: width .68s var(--portola-nav-morph);
  will-change: width;
}

.portola-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .5rem .5rem .5rem 1.25rem;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(12,19,24,.46);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 12px 40px -20px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07);
  transition:
    min-height .68s var(--portola-nav-morph),
    padding .68s var(--portola-nav-morph),
    border-radius .68s var(--portola-nav-morph),
    box-shadow .55s var(--portola-nav-morph),
    border-color .45s ease,
    background-color .55s ease,
    backdrop-filter .55s ease;
  isolation: isolate;
  will-change: border-radius, padding;
}
.portola-nav.is-scrolled {
  background: rgba(8,13,17,.78);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 20px 55px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
}

/* --- Ebenen: 1) Bild 2) Overlay 3) Smoke-Video 4) Inhalt --- */
.portola-nav__bg {
  position: absolute; inset: 0; z-index: -3;
  background: var(--portola-dark);
  opacity: .55;
}
.portola-nav-sentinel {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 41px; opacity: 0; pointer-events: none;
}
.portola-nav__overlay {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(140% 240% at 88% -70%, rgba(247,185,40,.18), transparent 52%),
    radial-gradient(120% 200% at 6% 150%, rgba(201,47,36,.14), transparent 50%),
    linear-gradient(180deg, rgba(8,13,17,.5), rgba(8,13,17,.78));
}
.portola-nav__overlay::after {
  content: "";
  position: absolute;
  inset: -100% -45%;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.28) 0 7%, rgba(247,185,40,.16) 18%, transparent 54%);
  transform: translateX(-48%) scale(.72);
}
.portola-header.is-menu-context .portola-nav__overlay::after {
  animation: portola-nav-liquid-in .82s var(--portola-nav-morph) both;
}
.portola-header.is-menu-leaving .portola-nav__overlay::after {
  animation: portola-nav-liquid-out .68s var(--portola-nav-morph) both;
}
@keyframes portola-nav-liquid-in {
  0% { opacity: 0; transform: translateX(-52%) scale(.68); }
  38% { opacity: .8; }
  100% { opacity: 0; transform: translateX(52%) scale(1.12); }
}
@keyframes portola-nav-liquid-out {
  0% { opacity: 0; transform: translateX(52%) scale(1.02); }
  42% { opacity: .58; }
  100% { opacity: 0; transform: translateX(-52%) scale(.74); }
}
.portola-nav__smoke {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .12;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .6s var(--portola-ease);
}
@media (hover: hover) {
  .portola-nav:hover .portola-nav__smoke { opacity: .32; }
}

/* --- Logo --- */
.portola-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: .5ch;
  font-family: var(--portola-font-display);
  text-transform: uppercase;
  color: var(--portola-cream);
  font-size: 1.15rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
.portola-brand,
.portola-nav__links,
.portola-nav__actions {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transition:
    opacity .3s ease .16s,
    filter .44s var(--portola-nav-morph) .1s,
    visibility 0s linear 0s;
}
.portola-brand b { color: var(--portola-yellow); font-weight: 400; }
.portola-brand__dot { color: var(--portola-red); }
.portola-brand__img {
  width: 81px;
  height: auto;
  max-width: none;
  flex: none;
  display: block;
  /* Recolours the white SVG to the site's cream text colour. */
  filter: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(455%) hue-rotate(338deg) brightness(105%) contrast(91%);
  transition: transform .4s var(--portola-ease), opacity .3s;
}
.portola-brand:hover .portola-brand__img { transform: scale(1.04); opacity: .9; }

/* --- Links --- */
.portola-nav__links {
  display: flex;
  align-items: center;
  gap: .3rem;
  list-style: none;
  margin: 0; padding: 0;
}
.portola-nav__links a {
  display: inline-block;
  padding: .55rem .95rem;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  color: rgba(244,234,216,.82);
  border-radius: 999px;
  position: relative;
  transition: color .3s var(--portola-ease), background-color .3s var(--portola-ease);
}
.portola-nav__links a::after {
  content: "";
  position: absolute; left: 50%; bottom: .28rem;
  width: 0; height: 2px;
  background: var(--portola-yellow);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width .35s var(--portola-ease);
}
.portola-nav__links a:hover { color: var(--portola-cream); background: rgba(255,255,255,.06); }
.portola-nav__links a.is-active { color: var(--portola-yellow); }
.portola-nav__links a.is-active::after { width: 40%; }

.portola-nav__actions { display: flex; align-items: center; gap: .6rem; }
.portola-nav__menu-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: .3rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: blur(12px);
  clip-path: inset(18% 47% round 999px);
  transform: scale(.72);
  transform-origin: center;
  transition:
    opacity .2s ease,
    filter .34s ease,
    clip-path .55s var(--portola-nav-morph),
    transform .55s var(--portola-nav-morph),
    visibility 0s linear .56s;
}
.portola-nav__menu-track { position: relative; width: 100%; min-width: 0; }
.portola-nav__menu-track::before,
.portola-nav__menu-track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 62px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.portola-nav__menu-track::before {
  left: 0;
  background: linear-gradient(90deg, rgba(8,13,17,.98) 22%, rgba(8,13,17,0));
}
.portola-nav__menu-track::after {
  right: 0;
  background: linear-gradient(270deg, rgba(8,13,17,.98) 22%, rgba(8,13,17,0));
}
.portola-nav__menu-slot.is-scrollable:not(.is-at-start) .portola-nav__menu-track::before,
.portola-nav__menu-slot.is-scrollable:not(.is-at-end) .portola-nav__menu-track::after { opacity: 1; }
.portola-nav__menu-scroll {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(247,185,40,.68);
  border-radius: 50%;
  background: rgba(8,13,17,.9);
  color: var(--portola-yellow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(.86);
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.portola-nav__menu-scroll::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.portola-nav__menu-scroll--previous { left: .42rem; }
.portola-nav__menu-scroll--previous::before { transform: translateX(2px) rotate(-135deg); }
.portola-nav__menu-scroll--next { right: .42rem; }
.portola-nav__menu-scroll--next::before { transform: translateX(-2px) rotate(45deg); }
.portola-nav__menu-slot.is-scrollable:not(.is-at-start) .portola-nav__menu-scroll--previous,
.portola-nav__menu-slot.is-scrollable:not(.is-at-end) .portola-nav__menu-scroll--next {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}
.portola-nav__menu-scroll:hover { background: var(--portola-yellow); color: var(--portola-black); }
.portola-language-switch { padding: .5rem .65rem; color: var(--portola-yellow); font-size: .74rem; font-weight: 800; letter-spacing: .1em; }
.portola-mobile-menu .portola-language-switch { width: max-content; border: 1px solid rgba(244,234,216,.2); border-radius: 999px; padding: .45rem .8rem; font-family: var(--portola-font-body); font-size: .8rem; }
.portola-nav__cta { padding: .8em 1.4em; font-size: .78rem; }

/* Im Speisekarten-Bereich wird die Hauptnavigation zur Kategorienleiste. */
.portola-header.is-menu-context {
  width: min(780px, calc(100% - 2 * clamp(18px, 4vw, 36px)));
}
.portola-header.is-menu-context .portola-nav {
  min-height: 64px;
  padding: .42rem;
  border-radius: 999px;
  border-color: rgba(255,255,255,.2);
  background: rgba(8,13,17,.82);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 18px 50px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.15);
}
.portola-header.is-menu-context .portola-brand,
.portola-header.is-menu-context .portola-nav__links,
.portola-header.is-menu-context .portola-nav__actions {
  opacity: 0;
  visibility: hidden;
  filter: blur(10px);
  pointer-events: none;
  transition:
    opacity .18s ease,
    filter .3s ease,
    visibility 0s linear .3s;
}
.portola-header.is-menu-context .portola-nav__menu-slot {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  filter: blur(0);
  clip-path: inset(0 0 round 999px);
  transform: scale(1);
  transition:
    opacity .28s ease .1s,
    filter .42s var(--portola-nav-morph) .08s,
    clip-path .62s var(--portola-nav-morph) .04s,
    transform .62s var(--portola-nav-morph) .04s,
    visibility 0s linear 0s;
}
.portola-header.is-menu-leaving .portola-nav__menu-slot {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  filter: blur(0);
  clip-path: inset(0 0 round 999px);
  transform: scale(1);
  transition: none;
}
.portola-nav__menu-slot .portola-menu__tabs {
  width: 100%;
  margin: 0;
  padding: .3rem 3.1rem;
  gap: .4rem;
  flex-wrap: nowrap;
  justify-content: center;
  opacity: 1;
  transform: none;
  transition: none;
}
.portola-nav__menu-slot .portola-tab {
  min-height: 40px;
  padding: .72em 1.15em;
  font-size: .74rem;
}
.portola-header.is-menu-context .portola-nav__menu-slot .portola-tab {
  animation: portola-pill-transfer .5s var(--portola-nav-morph) reverse both;
}
.portola-header.is-menu-context .portola-nav__menu-slot .portola-tab:nth-child(2) { animation-delay: .025s; }
.portola-header.is-menu-context .portola-nav__menu-slot .portola-tab:nth-child(3) { animation-delay: .05s; }
.portola-header.is-menu-context .portola-nav__menu-slot .portola-tab:nth-child(4) { animation-delay: .075s; }
.portola-header.is-menu-context .portola-nav__menu-slot .portola-tab:nth-child(5) { animation-delay: .1s; }
.portola-header.is-menu-context .portola-nav__menu-slot .portola-tab:nth-child(6) { animation-delay: .125s; }
.portola-header.is-menu-leaving .portola-nav__menu-slot .portola-tab {
  animation: portola-pill-transfer .5s var(--portola-nav-morph) both;
}
.portola-header.is-menu-leaving .portola-nav__menu-slot .portola-tab:nth-child(1) { animation-delay: .125s; }
.portola-header.is-menu-leaving .portola-nav__menu-slot .portola-tab:nth-child(2) { animation-delay: .1s; }
.portola-header.is-menu-leaving .portola-nav__menu-slot .portola-tab:nth-child(3) { animation-delay: .075s; }
.portola-header.is-menu-leaving .portola-nav__menu-slot .portola-tab:nth-child(4) { animation-delay: .05s; }
.portola-header.is-menu-leaving .portola-nav__menu-slot .portola-tab:nth-child(5) { animation-delay: .025s; }
@keyframes portola-pill-transfer {
  from {
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0 0 0 0 round 999px);
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    filter: blur(5px);
    clip-path: inset(0 0 0 100% round 999px);
    transform: translateX(12px) scale(.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portola-header,
  .portola-nav,
  .portola-brand,
  .portola-nav__links,
  .portola-nav__actions,
  .portola-nav__menu-slot { transition: none; }
  .portola-header.is-menu-context .portola-nav__overlay::after,
  .portola-header.is-menu-leaving .portola-nav__overlay::after,
  .portola-header.is-menu-context .portola-nav__menu-slot .portola-tab,
  .portola-header.is-menu-leaving .portola-nav__menu-slot .portola-tab { animation: none; }
}

/* --- Burger (mobile) --- */
.portola-nav__toggle {
  display: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(244,234,216,.25);
  background: rgba(8,13,17,.46);
  position: relative;
}
.portola-nav__toggle span,
.portola-nav__toggle span::before,
.portola-nav__toggle span::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 2px;
  background: var(--portola-cream);
  transform: translate(-50%, -50%);
  transition: transform .35s var(--portola-ease), opacity .2s;
}
.portola-nav__toggle span::before { transform: translate(-50%, -7px); }
.portola-nav__toggle span::after  { transform: translate(-50%, 5px); }
.portola-nav.is-open .portola-nav__toggle span { background: transparent; }
.portola-nav.is-open .portola-nav__toggle span::before { transform: translate(-50%,-50%) rotate(45deg); }
.portola-nav.is-open .portola-nav__toggle span::after  { transform: translate(-50%,-50%) rotate(-45deg); }

/* --- Mobile Panel --- */
.portola-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(8,13,17,.98);
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: .4rem;
  padding: max(5.5rem, env(safe-area-inset-top)) var(--portola-pad-x) max(2rem, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-102%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .55s var(--portola-ease), visibility 0s linear .55s;
}
.portola-mobile-menu.is-open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.portola-mobile-menu a:not(.portola-btn) {
  font-family: var(--portola-font-display);
  text-transform: uppercase;
  white-space: nowrap;
  font-size: clamp(2rem, 9vw, 3.2rem);
  color: var(--portola-cream);
  padding: .2em 0;
  border-bottom: 1px solid rgba(244,234,216,.1);
  transition: color .3s, padding-left .3s var(--portola-ease);
}
.portola-mobile-menu a:not(.portola-btn):hover { color: var(--portola-yellow); padding-left: .3em; }
.portola-mobile-menu__actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-top: 1.2rem; }
.portola-mobile-menu__actions a.portola-language-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-height: 42px;
  padding: .45rem .8rem;
  border: 1px solid rgba(244,234,216,.2);
  border-radius: 999px;
  font-family: var(--portola-font-body);
  font-size: .8rem;
  line-height: 1.2;
}
.portola-mobile-menu__actions a.portola-language-switch:hover { padding-left: .8rem; }
.portola-mobile-menu .portola-btn { align-self: center; }

/* Source: hero.css */
/* ============================================================
   PORTOLA GRILL — hero.css
   Scroll-Hero mit Sticky-Verkleinerung + fallende Pommes
   ============================================================ */

/* Äußerer Scroll-Wrapper: gibt der Sticky-Animation Strecke */
.portola-hero-scroll {
  position: relative;
  height: 160vh;            /* kürzere, direktere Sticky-Zone */
  background:
    radial-gradient(80% 65% at 50% 88%, rgba(74, 101, 116, .34), transparent 72%),
    linear-gradient(180deg, var(--portola-black) 0%, var(--portola-dark) 44%, var(--portola-stone) 100%);
}

/* Sticky-Bühne */
.portola-hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Der eigentliche Hero-Container (wird per JS skaliert / gerundet) */
.portola-hero-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  transform-origin: center center;
  background: var(--portola-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, border-radius;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}

/* Hintergrundbild + Overlay */
.portola-hero-inner__bg {
  position: absolute; inset: 0;
  display: block;
  transform: scale(1.08);
  will-change: transform;
}
.portola-hero-inner__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.portola-hero-inner__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,13,17,.55) 0%, rgba(8,13,17,.34) 40%, rgba(8,13,17,.87) 100%);
}
.portola-hero-inner__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(8,13,17,.72) 100%);
  pointer-events: none;
}

/* Fallende Pommes: 3 Tiefen-Ebenen */
.portola-fries-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.portola-fries-layer--back  { z-index: 1; }
.portola-fries-layer--mid   { z-index: 2; }
.portola-fries-layer--front { z-index: 4; }

.portola-fry {
  position: absolute;
  top: -18%;
  width: 120px;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  filter: drop-shadow(0 14px 16px rgba(0,0,0,.4));
  user-select: none;
  scale: 1;
  transition:
    opacity .42s cubic-bezier(.22,.61,.36,1),
    scale .58s cubic-bezier(.34,1.56,.64,1),
    visibility 0s linear;
  transition-delay: var(--fry-toggle-delay, 0ms);
}
.portola-fry.is-count-hidden {
  opacity: 0 !important;
  scale: .22;
  visibility: hidden;
  transition:
    opacity .28s cubic-bezier(.55,.06,.68,.19),
    scale .36s cubic-bezier(.55,.06,.68,.19),
    visibility 0s linear .36s;
  transition-delay: var(--fry-toggle-delay, 0ms);
}
.portola-fries-layer--back .portola-fry  { width: 74px;  opacity: .5;  filter: none; }
.portola-fries-layer--mid .portola-fry   { width: 118px; opacity: .95; }
.portola-fries-layer--front .portola-fry { width: 190px; opacity: 1;   filter: drop-shadow(0 20px 24px rgba(0,0,0,.5)); }

/* Hero-Inhalt */
.portola-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 1000px;
  padding-inline: var(--portola-pad-x);
  margin-inline: auto;
}
.portola-hero-content .portola-eyebrow { color: var(--portola-yellow); margin-bottom: 1.4rem; }

.portola-hero-title {
  font-family: var(--portola-font-display);
  text-transform: uppercase;
  color: var(--portola-cream);
  font-size: clamp(3.2rem, 11vw, 9rem);
  line-height: .84;
  letter-spacing: -.01em;
  text-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.portola-hero-title .line { display: block; overflow: hidden; }
.portola-hero-title .line > span { display: block; }
.portola-hero-title em {
  font-style: normal;
  color: var(--portola-yellow);
}
.portola-hero-title .stroke {
  color: transparent;
  -webkit-text-stroke: 2px var(--portola-cream);
}

.portola-hero-sub {
  margin: 1.6rem auto 0;
  max-width: 40ch;
  color: var(--portola-beige);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
}
.portola-hero-actions {
  margin-top: 2.2rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Scroll-Hinweis */
.portola-hero-scrollcue {
  position: absolute;
  bottom: max(26px, calc(env(safe-area-inset-bottom) + 12px)); left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: var(--portola-beige);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .28em;
}
.portola-hero-scrollcue .dot {
  width: 22px; height: 34px;
  border: 2px solid rgba(244,234,216,.5);
  border-radius: 999px;
  position: relative;
}
.portola-hero-scrollcue .dot::after {
  content: "";
  position: absolute; left: 50%; top: 7px;
  width: 4px; height: 8px;
  background: var(--portola-yellow);
  border-radius: 4px;
  transform: translateX(-50%);
  animation: portola-scrollcue 1.6s var(--portola-ease) infinite;
}

/* Desktop-Werkzeug: Anzahl der animierten Pommes einstellen */
.portola-fries-control {
  display: none;
  position: absolute; right: clamp(20px, 3vw, 44px); bottom: 24px; z-index: 7;
  width: min(240px, 22vw); padding: .8rem 1rem;
  border: 1px solid rgba(244,234,216,.18); border-radius: 16px;
  background: rgba(8,13,17,.76); color: var(--portola-cream);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.portola-fries-control label { display: flex; justify-content: space-between; gap: 1rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.portola-fries-control output { color: var(--portola-yellow); }
.portola-fries-control input { width: 100%; margin: .55rem 0 0; accent-color: var(--portola-yellow); cursor: pointer; }
.portola-fries-control > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .portola-fries-control { display: block; }
}
@keyframes portola-scrollcue {
  0% { opacity: 0; transform: translate(-50%, 0); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .portola-hero-scroll { height: auto; }
  .portola-hero-sticky { position: relative; height: 100vh; height: 100dvh; min-height: 100svh; }
  .portola-hero-scrollcue .dot::after { animation: none; }
  .portola-fry { top: auto; transition: none; }
}

/* Source: sections.css */
/* ============================================================
   PORTOLA GRILL — sections.css
   Highlights, Speisekarte, Featured, About, Galerie,
   Standort, Kontakt, Footer
   ============================================================ */

/* ---------------- HIGHLIGHTS (redaktionelles, ungleiches Layout) ---------------- */
.portola-highlights { background: var(--portola-dark); }
.portola-highlights__head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.portola-highlights__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--portola-gap);
}
.portola-hcard {
  position: relative;
  overflow: hidden;
  border-radius: var(--portola-radius-medium);
  min-height: 260px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.6rem;
  color: var(--portola-cream);
  text-decoration: none;
  isolation: isolate;
}
.portola-hcard img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--portola-ease);
}
.portola-hcard::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,13,17,.05) 30%, rgba(8,13,17,.92) 100%);
}
.portola-hcard:hover img { transform: scale(1.07); }
.portola-hcard__cat {
  font-family: var(--portola-font-display);
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}
.portola-hcard__desc { color: var(--portola-beige); font-size: .92rem; margin-top: .3rem; }
.portola-hcard__more {
  margin-top: .9rem; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--portola-yellow);
  display: inline-flex; align-items: center; gap: .5em;
}
.portola-hcard--tall  { grid-column: span 4; min-height: 460px; }
.portola-hcard--wide  { grid-column: span 8; min-height: 300px; }
.portola-hcard--std   { grid-column: span 4; min-height: 300px; }
.portola-hcard--half  { grid-column: span 6; }

/* ---------------- SPEISEKARTE ---------------- */
.portola-menu {
  --portola-menu-image: url("../images/background-menue.webp");
  background-color: var(--portola-black);
  background-image:
    linear-gradient(180deg,
      var(--portola-dark) 0%,
      rgba(8, 13, 17, .7) 8%,
      rgba(8, 13, 17, .8) 92%,
      var(--portola-dark) 100%),
    var(--portola-menu-image);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
.portola-menu__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.portola-menu__head .portola-script { font-size: clamp(1.6rem, 4vw, 2.6rem); display:block; margin-bottom:.2rem; }

/* Kategorien-Tabs (horizontal, mobil scrollbar) */
.portola-menu__tabs {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  padding-top: 4px;
  padding-bottom: .6rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  scrollbar-width: none;
  justify-content: center;
  flex-wrap: wrap;
}
.portola-menu__tabs::-webkit-scrollbar { display: none; }
.portola-menu-tabs-placeholder { position: relative; height: 0; }
.portola-menu-tabs-placeholder > .portola-menu__tabs--source-ghost {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  margin: 0;
  pointer-events: none;
}
.portola-menu__tabs--source-ghost .portola-tab {
  animation: portola-pill-transfer .5s var(--portola-nav-morph) both;
  animation-play-state: paused;
}
.portola-menu__tabs--source-ghost.is-animating .portola-tab { animation-play-state: running; }
.portola-menu__tabs--source-ghost .portola-tab:nth-child(2) { animation-delay: .025s; }
.portola-menu__tabs--source-ghost .portola-tab:nth-child(3) { animation-delay: .05s; }
.portola-menu__tabs--source-ghost .portola-tab:nth-child(4) { animation-delay: .075s; }
.portola-menu__tabs--source-ghost .portola-tab:nth-child(5) { animation-delay: .1s; }
.portola-menu__tabs--source-ghost .portola-tab:nth-child(6) { animation-delay: .125s; }
.portola-menu__tabs.is-returning .portola-tab {
  animation: portola-pill-transfer .5s var(--portola-nav-morph) reverse both;
}
.portola-menu__tabs.is-returning .portola-tab:nth-child(1) { animation-delay: .125s; }
.portola-menu__tabs.is-returning .portola-tab:nth-child(2) { animation-delay: .1s; }
.portola-menu__tabs.is-returning .portola-tab:nth-child(3) { animation-delay: .075s; }
.portola-menu__tabs.is-returning .portola-tab:nth-child(4) { animation-delay: .05s; }
.portola-menu__tabs.is-returning .portola-tab:nth-child(5) { animation-delay: .025s; }
.portola-tab {
  flex: 0 0 auto;
  padding: .7em 1.3em;
  border-radius: 999px;
  border: 1px solid rgba(244,234,216,.2);
  background: transparent;
  color: var(--portola-cream);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .8rem;
  transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--portola-ease);
}
.portola-tab:hover { transform: translateY(-2px); border-color: var(--portola-yellow); }
.portola-tab.is-active { background: var(--portola-yellow); color: var(--portola-black); border-color: var(--portola-yellow); }

.portola-menu__panel { display: none; }
.portola-menu__panel.is-active { display: block; animation: portola-fade .5s var(--portola-ease); }
@keyframes portola-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .portola-menu__tabs--source-ghost .portola-tab,
  .portola-menu__tabs.is-returning .portola-tab { animation: none; }
}

.portola-menu__group + .portola-menu__group { margin-top: clamp(2.2rem, 4vw, 3.4rem); }
.portola-menu__group-title {
  font-family: var(--portola-font-script);
  color: var(--portola-yellow);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin-bottom: 1.3rem;
}
.portola-menu__group-note { color: var(--portola-muted); font-size: .9rem; max-width: 60ch; margin: -.6rem 0 1.4rem; }

.portola-menu__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .2rem 3rem;
}
.portola-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .4rem 1rem;
  padding: .95rem 0;
  border-bottom: 1px dashed rgba(216,201,171,.16);
}
.portola-item__name {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--portola-cream);
  font-size: .98rem;
}
.portola-item__tag {
  display: inline-block;
  margin-left: .5em;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  padding: .2em .5em;
  border-radius: 4px;
  vertical-align: middle;
}
.portola-item__tag--vegan { background: #3c6e2f; color: #eaffdf; }
.portola-item__tag--neu   { background: var(--portola-red); color: #fff; }
.portola-item__tag--tipp  { background: var(--portola-yellow); color: var(--portola-black); }
.portola-item__price {
  font-family: var(--portola-font-display);
  color: var(--portola-yellow);
  font-size: 1.1rem;
  white-space: nowrap;
}
.portola-item__price small { font-size: .6em; vertical-align: super; margin-left: 1px; }
.portola-item__desc { grid-column: 1 / -1; color: var(--portola-muted); font-size: .84rem; margin-top: .15rem; }
.portola-item__sizes { grid-column: 1 / -1; display: flex; gap: 1.4rem; margin-top: .5rem; flex-wrap: wrap; }
.portola-size { display: inline-flex; align-items: baseline; gap: .4em; }
.portola-size b { color: var(--portola-cream); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.portola-size span { font-family: var(--portola-font-display); color: var(--portola-yellow); }

.portola-menu__legend {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(244,234,216,.12);
  border-radius: var(--portola-radius-small);
  color: var(--portola-muted);
  font-size: .74rem;
  line-height: 1.8;
}
.portola-menu__legend b { color: var(--portola-beige); }
.portola-menu__disclaimer { color: var(--portola-muted); font-size: .78rem; text-align:center; margin-top: 1.5rem; }

/* ---------------- FEATURED / hervorgehobene Gerichte ---------------- */
.portola-featured {
  position: relative;
  background: linear-gradient(180deg,
    var(--portola-dark) 0%,
    var(--portola-dark) 76%,
    var(--portola-black) 100%);
}
.portola-featured__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--portola-gap);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.portola-fcard {
  position: relative;
  border-radius: var(--portola-radius-medium);
  overflow: hidden;
  min-height: 440px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 2rem;
  isolation: isolate;
}
.portola-fcard img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--portola-ease);
}
.portola-fcard::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(8,13,17,0) 25%, rgba(8,13,17,.94) 100%);
}
.portola-fcard:hover img { transform: scale(1.06); }
.portola-fcard__spot {
  position: absolute; top: 1.45rem; right: 1.4rem; z-index: 1;
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--portola-yellow); color: var(--portola-black);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; text-align: center;
  font-family: var(--portola-font-display); line-height: 1;
  transform: rotate(-5deg);
  border: 2px solid rgba(8,13,17,.16);
  box-shadow: 0 12px 30px -8px rgba(247,185,40,.55), inset 0 0 0 3px rgba(255,255,255,.12);
  transition: transform .4s var(--portola-ease), box-shadow .4s var(--portola-ease);
}
.portola-fcard:hover .portola-fcard__spot { transform: rotate(0) scale(1.04); box-shadow: 0 16px 34px -8px rgba(247,185,40,.65), inset 0 0 0 3px rgba(255,255,255,.16); }
.portola-fcard__spot span { display: block; font-size: 1.75rem; line-height: .9; font-variant-numeric: tabular-nums; }
.portola-fcard__spot small { display: block; font-size: .56rem; line-height: 1; letter-spacing: .14em; }
.portola-fcard__title { font-family: var(--portola-font-display); text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--portola-cream); }
.portola-fcard__desc { color: var(--portola-beige); font-size: .92rem; margin-top: .4rem; max-width: 42ch; }

/* ---------------- ABOUT ---------------- */
.portola-about {
  background: linear-gradient(180deg,
    var(--portola-black) 0%,
    var(--portola-black) 76%,
    var(--portola-dark) 100%);
}
.portola-about__wrap {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.portola-about__big {
  font-family: var(--portola-font-display);
  text-transform: uppercase;
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  color: var(--portola-cream);
  margin: 1.2rem 0 1.6rem;
}
.portola-about__big em { color: var(--portola-yellow); font-style: normal; }
.portola-about p { color: var(--portola-beige); margin-bottom: 1rem; max-width: 52ch; }
.portola-about__stats { display: flex; gap: 2.5rem; margin-top: 2rem; flex-wrap: wrap; }
.portola-stat b { font-family: var(--portola-font-display); font-size: clamp(2rem,4vw,3rem); color: var(--portola-yellow); display:block; }
.portola-stat span { color: var(--portola-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.portola-about__media {
  position: relative;
  border-radius: var(--portola-radius-large);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.portola-about__media img { width: 100%; height: 100%; object-fit: cover; }
.portola-about__badge {
  position: absolute; left: -14px; bottom: 24px;
  background: var(--portola-red); color: var(--portola-white);
  font-family: var(--portola-font-display); text-transform: uppercase;
  padding: .7em 1.2em; border-radius: 8px; font-size: 1.1rem;
  transform: rotate(-4deg);
}

/* ---------------- GALERIE (masonry-artig, ungleich) ---------------- */
.portola-gallery {
  background: linear-gradient(180deg,
    var(--portola-dark) 0%,
    var(--portola-dark) 76%,
    var(--portola-black) 100%);
}
.portola-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 14px;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.portola-gallery__grid figure { margin: 0; overflow: hidden; border-radius: var(--portola-radius-small); position: relative; }
.portola-gallery__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--portola-ease); }
.portola-gallery__grid figure:hover img { transform: scale(1.08); }
.g-a { grid-column: span 2; grid-row: span 2; }
.g-b { grid-column: span 2; grid-row: span 1; }
.g-c { grid-column: span 1; grid-row: span 2; }
.g-d { grid-column: span 1; grid-row: span 1; }

/* Transparenzhinweise für KI-generiertes bzw. KI-bearbeitetes Bildmaterial */
.portola-ai-note {
  margin: 1.25rem 0 0; color: var(--portola-muted); font-size: .78rem;
  text-align: center; letter-spacing: .02em;
}
.portola-ai-label {
  display: inline-flex; width: max-content; max-width: 100%; margin-top: 1rem;
  padding: .45rem .75rem; border: 1px solid rgba(244,234,216,.22); border-radius: 999px;
  background: rgba(8,13,17,.76); color: var(--portola-beige); font-size: .68rem;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.portola-hero-content .portola-ai-label { margin-inline: auto; }
.portola-about__media .portola-ai-label { position: absolute; left: 1rem; top: 1rem; z-index: 2; }

/* ---------------- STANDORT ---------------- */
.portola-location { background: var(--portola-black); }
.portola-location__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--portola-gap); }
.portola-location__info { display: flex; flex-direction: column; gap: 1.4rem; }
.portola-info-row { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(244,234,216,.12); }
.portola-info-row__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--portola-char); display: grid; place-items: center; color: var(--portola-yellow); }
.portola-info-row__icon svg { width: 20px; height: 20px; }
.portola-info-row h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; color: var(--portola-muted); margin-bottom: .3rem; font-family: var(--portola-font-body); font-weight: 700; }
.portola-info-row p, .portola-info-row a { color: var(--portola-cream); font-size: 1rem; }
.portola-info-row .ph { color: var(--portola-red); font-style: italic; }
.opening-hours table { width: 100%; border-collapse: collapse; color: var(--portola-cream); font-style: normal; }
.opening-hours th, .opening-hours td {padding: 0.35rem 0; text-align: left; vertical-align: top;}
.opening-hours th {font-weight: 600;}
.opening-hours td {text-align: right;}
.portola-location__map {
  border-radius: var(--portola-radius-medium);
  overflow: hidden; position: relative; min-height: 380px;
  border: 1px solid rgba(244,234,216,.12);
  background:
    linear-gradient(135deg, rgba(201,47,36,.1), rgba(247,185,40,.06)),
    repeating-linear-gradient(45deg, #111b22 0 22px, #18262f 22px 44px);
  display: grid; place-items: center; text-align: center; padding: 2rem;
}
.portola-location__map .pin { width: 60px; height: 60px; border-radius: 50% 50% 50% 0; background: var(--portola-red); transform: rotate(-45deg); margin-bottom: 1.6rem; box-shadow: 0 16px 30px -8px rgba(201,47,36,.6); position: relative; }
.portola-location__map .pin::after { content:""; position:absolute; inset: 18px; background: var(--portola-cream); border-radius: 50%; }
.portola-location__map p { color: var(--portola-beige); font-size: .9rem; }
.portola-location__map-placeholder { display: grid; justify-items: center; max-width: 370px; }
.portola-location__map-placeholder[hidden] { display: none; }
.portola-location__map-placeholder a { margin-top: 1rem; color: var(--portola-yellow); font-size: .82rem; text-decoration: underline; }
.portola-location__map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  filter: invert(.9) hue-rotate(180deg) saturate(.65) contrast(.92) brightness(.82);
}

/* ---------------- KONTAKT ---------------- */
.portola-contact { background: var(--portola-red); color: var(--portola-cream); text-align: center; }
.portola-contact .portola-eyebrow {
  color: var(--portola-black);
  box-shadow: 4px 4px 0 var(--portola-black);
}
.portola-contact .portola-eyebrow::before {
  border-color: var(--portola-black);
  background: rgba(8, 13, 17, .16);
}
.portola-contact__title { font-family: var(--portola-font-display); text-transform: uppercase; font-size: clamp(2.6rem, 8vw, 6rem); color: var(--portola-cream); margin: 1rem 0; }
.portola-contact__lead { color: rgba(255,255,255,.9); max-width: 46ch; margin: 0 auto 2rem; }
.portola-contact__row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.2rem; }
.portola-contact .portola-btn { --btn-bg: var(--portola-black); --btn-fg: var(--portola-cream); }
.portola-contact .portola-btn--outline { --btn-bg: transparent; --btn-fg: var(--portola-cream); border-color: rgba(8,13,17,.4); }
.portola-contact .portola-btn--outline:hover { background: var(--portola-black); color: var(--portola-cream); }
.portola-socials { display: inline-flex; gap: .8rem; }
.portola-socials a { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(8,13,17,.4); display: grid; place-items: center; transition: background-color .3s, color .3s, transform .3s var(--portola-ease); }
.portola-socials a:hover { background: var(--portola-black); color: var(--portola-yellow); transform: translateY(-3px); }
.portola-socials svg { width: 20px; height: 20px; }

/* ---------------- FOOTER ---------------- */
.portola-footer { background: var(--portola-black); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; border-top: 1px solid rgba(244,234,216,.1); }
.portola-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--portola-gap); }
.portola-footer__brand .portola-brand { font-size: 1.7rem; }
.portola-footer__brand .portola-brand__img { height: 92px; width: auto; }
.portola-footer__brand p { color: var(--portola-muted); font-size: .9rem; margin-top: 1rem; max-width: 32ch; }
.portola-footer h2,
.portola-footer h5 { font-size: .76rem; text-transform: uppercase; letter-spacing: .18em; color: var(--portola-yellow); margin-bottom: 1.2rem; font-family: var(--portola-font-body); font-weight: 800; }
.portola-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.portola-footer ul a, .portola-footer ul li { color: var(--portola-beige); font-size: .92rem; transition: color .3s; }
.portola-footer ul a:hover { color: var(--portola-yellow); }
.portola-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid rgba(244,234,216,.1); color: var(--portola-muted); font-size: .8rem; }
.portola-footer__bottom a { color: var(--portola-muted); }
.portola-footer__bottom a:hover { color: var(--portola-cream); }
.footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.footer-hours li span:last-child {
  white-space: nowrap;
}

/* Source: responsive.css */
/* ============================================================
   PORTOLA GRILL — responsive.css
   Breakpoints: 1024, 768, 375
   ============================================================ */

@media (max-width: 1024px) {
  .portola-menu { --portola-menu-image: url("../images/background-menue-1280.webp"); }
  .portola-nav__links, .portola-nav__cta { display: none; }
  .portola-nav__toggle { display: block; }
  .portola-nav { min-height: 58px; padding: .6rem; }
  .portola-nav > .portola-brand {
    position: absolute;
    left: 50%;
    flex: none;
    transform: translateX(-50%);
  }
  .portola-nav > .portola-brand .portola-brand__img { width: 81px; height: auto; max-width: none; }
  .portola-nav__actions { margin-left: auto; }
  .portola-header.is-menu-context {
    width: calc(100% - 48px);
  }
  .portola-header.is-menu-context .portola-nav {
    min-height: 68px;
    padding: .3rem;
    border-radius: 999px;
  }
  .portola-header.is-menu-context .portola-nav__menu-slot .portola-menu__tabs {
    justify-content: flex-start;
    padding: .45rem 3.15rem;
    scroll-padding-inline: 3.15rem;
  }
  .portola-header.is-menu-context .portola-nav__menu-slot .portola-tab {
    min-height: 44px;
  }

  .portola-highlights__grid { grid-template-columns: repeat(6, 1fr); }
  .portola-hcard--tall { grid-column: span 6; min-height: 340px; }
  .portola-hcard--wide { grid-column: span 6; }
  .portola-hcard--std  { grid-column: span 3; }
  .portola-hcard--half { grid-column: span 3; }

  .portola-featured__grid { gap: 18px; }
  .portola-about__wrap { grid-template-columns: 1fr; }
  .portola-about__media { max-width: 460px; }
  .portola-location__wrap { grid-template-columns: 1fr; }
  .portola-gallery__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; }
  .portola-footer__grid { grid-template-columns: 1fr 1fr; row-gap: 2.4rem; }
}

@media (max-width: 768px) {
  .portola-menu { --portola-menu-image: url("../images/background-menue-960.webp"); }
  .portola-menu__items { grid-template-columns: 1fr; gap: 0; }
  .portola-featured__grid { grid-template-columns: 1fr; }
  .portola-fcard { min-height: 380px; }

  .portola-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .g-a { grid-column: span 2; grid-row: span 2; }
  .g-b, .g-c, .g-d { grid-column: span 1; grid-row: span 1; }

  .portola-footer__grid { grid-template-columns: 1fr 1fr; }
  .portola-footer__brand { grid-column: 1 / -1; }

  /* Mobile Hero: kürzere Scrollstrecke, kaum Verkleinerung */
  .portola-hero-scroll { height: 128vh; height: 128svh; }

  /* Smoke-Video auf Mobil deaktiviert */
  .portola-nav__smoke { display: none; }

  /* große Vordergrund-Pommes reduzieren */
  .portola-fries-layer--front .portola-fry { width: 130px; }

  /* Mobil bleiben sämtliche Pommes hinter Text und Bedienelementen. */
  .portola-fries-layer--back,
  .portola-fries-layer--mid,
  .portola-fries-layer--front { z-index: 2; }
}

@media (max-width: 350px) {
  .portola-nav > .portola-brand { display: none; }
}

@media (max-width: 480px) {
  .portola-gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .g-a, .g-b, .g-c, .g-d { grid-column: span 1; grid-row: span 1; }
  .portola-footer__grid { grid-template-columns: 1fr; }
  .portola-about__stats { gap: 1.6rem; }
  .portola-hero-actions .portola-btn { width: 100%; justify-content: center; }
  .portola-contact__row .portola-btn { width: 100%; justify-content: center; }
}

@media (max-width: 768px) and (max-height: 700px) {
  .portola-hero-content .portola-eyebrow { margin-bottom: .8rem; }
  .portola-hero-title { font-size: clamp(2.7rem, 11vw, 3.2rem); }
  .portola-hero-sub { margin-top: 1rem; font-size: .95rem; }
  .portola-hero-content .portola-ai-label { margin-top: .7rem; padding-block: .35rem; }
  .portola-hero-actions { margin-top: 1.2rem; gap: .65rem; }
  .portola-hero-actions .portola-btn { padding-block: .85em; }
  .portola-hero-scrollcue { display: none; }
  .portola-mobile-menu { justify-content: flex-start; gap: .2rem; }
  .portola-mobile-menu a:not(.portola-btn) { font-size: clamp(1.65rem, 7vh, 2.35rem); }
  .portola-mobile-menu__actions { margin-top: .6rem; }
}

/* Source: legal.css */
.portola-subpage { padding-top: 0; }
.portola-legal-hero { padding: clamp(150px, 16vw, 210px) 0 55px; background: radial-gradient(circle at 80% 20%, rgba(201,47,36,.18), transparent 38%), var(--portola-dark); border-bottom: 1px solid rgba(244,234,216,.12); }
.portola-legal-hero h1 { margin-top: 1rem; font-family: var(--portola-font-display); text-transform: uppercase; font-size: clamp(3rem, 10vw, 7rem); color: var(--portola-cream); }
.portola-legal { padding: clamp(55px, 8vw, 100px) 0; }
.portola-legal__content { max-width: 850px; }
.portola-legal h2 { margin: 2.8rem 0 1rem; font-family: var(--portola-font-display); text-transform: uppercase; font-size: clamp(1.7rem, 4vw, 2.6rem); color: var(--portola-yellow); }
.portola-legal h3 { margin: 2rem 0 .6rem; font-size: 1.05rem; font-family: var(--portola-font-body); font-weight: 800; color: var(--portola-cream); }
.portola-legal p, .portola-legal li { color: var(--portola-beige); }
.portola-legal p { margin: 0 0 1rem; }
.portola-legal ul { padding-left: 1.3rem; }
.portola-legal a { color: var(--portola-yellow); text-decoration: underline; text-underline-offset: .18em; }
.portola-utility { min-height: 100vh; display: grid; place-items: center; padding: 130px var(--portola-pad-x) 70px; background: radial-gradient(circle at 50% 20%, rgba(247,185,40,.12), transparent 35%), var(--portola-black); text-align: center; }
.portola-utility-page { min-height: 100vh; display: flex; flex-direction: column; }
.portola-utility-page .portola-utility { min-height: 80vh; min-height: 80svh; flex: 0 0 auto; width: 100%; }
.portola-utility-page .portola-footer { flex: 0 0 auto; width: 100%; }
.portola-utility__code { font-family: var(--portola-font-display); font-size: clamp(6rem, 24vw, 15rem); line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--portola-red); }
.portola-utility h1 { margin: 1rem 0; font-family: var(--portola-font-display); font-size: clamp(2.3rem, 7vw, 5rem); text-transform: uppercase; }
.portola-utility p { max-width: 48ch; margin: 0 auto 2rem; color: var(--portola-beige); }
@media (max-width: 768px) { .portola-legal-hero { padding-top: 130px; } }

/* Source: consent.css */
.portola-consent[hidden] { display: none; }
.portola-consent {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: end center;
  padding: 20px; background: rgba(0,0,0,.62); backdrop-filter: blur(5px);
}
.portola-consent__panel {
  width: min(760px, calc(100vw - 40px)); min-width: 0; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); overflow: auto;
  padding: clamp(22px, 4vw, 38px); border: 1px solid rgba(244,234,216,.16);
  border-radius: 24px; background: var(--portola-char); color: var(--portola-cream);
  box-shadow: var(--portola-shadow);
}
.portola-consent__eyebrow { color: var(--portola-yellow); font-weight: 800; text-transform: uppercase; letter-spacing: .18em; font-size: .7rem; }
.portola-consent h2 { margin: .5rem 0 1rem; font-family: var(--portola-font-display); font-size: clamp(2rem, 6vw, 3.4rem); text-transform: uppercase; }
.portola-consent p { margin: 0; color: var(--portola-beige); }
.portola-consent a { color: var(--portola-yellow); text-decoration: underline; }
.portola-consent__details { margin: 1.4rem 0; padding-top: 1rem; border-top: 1px solid rgba(244,234,216,.14); }
.portola-consent__details[hidden] { display: none; }
.portola-consent__option { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(244,234,216,.1); }
.portola-consent__option strong { display: block; margin-bottom: .25rem; }
.portola-consent__option small { display: block; color: var(--portola-muted); line-height: 1.45; }
.portola-consent__option input { width: 24px; height: 24px; accent-color: var(--portola-yellow); }
.portola-consent__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.portola-consent__actions .portola-btn { justify-content: center; }
.portola-consent__actions [hidden] { display: none; }
.portola-cookie-settings { border: 0; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.portola-cookie-settings:hover { color: var(--portola-yellow); }
@media (max-width: 560px) {
  .portola-consent { padding: 10px; }
  .portola-consent__panel { width: calc(100vw - 20px); max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); border-radius: 18px; }
  .portola-consent h2 { font-size: 1.75rem; overflow-wrap: anywhere; }
  .portola-consent__actions { flex-direction: column; }
  .portola-consent__actions .portola-btn { width: 100%; }
}