html, body{
  touch-action: pan-x pan-y;
}


/* =========================================================
   Produkte (produkte.php) – Kategorien / Menü / Layout
   ========================================================= */

/* Intro links in products page should look like subtle links */
.page a{
  color: rgba(255,255,255,.9);
  text-decoration-color: rgba(255,255,255,.28);
  text-underline-offset: 3px;
}
.page a:hover{ text-decoration-color: rgba(222,10,23,.55); }

/* =========================================================
   Produkte (produkte.php) – Sticky Category Subnav (under main navbar)
   ========================================================= */

/* Produkte Subnav height (used to offset the hero/content) */
:root{
  --productsSubnavH: 58px;
}

.productsSubnav{
  /* Use fixed instead of sticky so it NEVER scrolls out (sticky breaks if any parent has overflow/transform) */
  position: fixed;
  top: calc(var(--navH) - 13px);
  left: 0;
  right: 0;
  /* Must sit under the main navbar and under the opened mobile dropdown */
  z-index: 998;

  height: var(--productsSubnavH);
  display: flex;
  align-items: center;

  background: transparent;
  margin: 0;
  padding: 0;
}

.productsSubnav::before{
  content: "";
  position: absolute;
  inset: 0 0 -1px 0;
  pointer-events: none;

  background: linear-gradient(
    135deg,
    rgba(12, 12, 12, 0.62),
    rgba(12, 12, 12, 0.32)
  );
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.30);

  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.productsSubnav__inner{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;

  height: var(--productsSubnavH);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap; /* desktop: show all without swiping */
}

/* Neue Kategorie-Navigation – keine Pillen, nur Text, dezentes Underline bei Hover */
.productsSubnav__item{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* no pill look – just text */
  padding: 8px 6px;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;

  color: rgba(255,255,255,.88);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
  white-space: nowrap;

  position: relative;
  transition: color .16s ease, transform .16s ease;
}

/* subtle underline indicator on hover/focus */
.productsSubnav__item::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  border-radius: 999px;
  background: rgba(222,10,23,.0);
  transform: scaleX(.65);
  transform-origin: center;
  transition: background .16s ease, transform .16s ease;
}

.productsSubnav__item:hover,
.productsSubnav__item:focus-visible{
  color: #DE0A17;
  transform: translateY(-1px);
  outline: 0;
}

.productsSubnav__item:hover::after,
.productsSubnav__item:focus-visible::after{
  background: rgba(222,10,23,.9);
  transform: scaleX(1);
}

.productsSubnav__item:active{ transform: translateY(0); }

/* Mobile: swipeable (no wrap) */
@media (max-width: 768px){
  .productsSubnav__inner{
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding: 10px 14px;

    scrollbar-width: none;
  }
  .productsSubnav__inner::-webkit-scrollbar{ display: none; }
}

/* Offset the Produkte hero so it starts BELOW the fixed products subnav */
.productsSubnav + .hero,
.productsSubnav + .hero--products{
  /* IMPORTANT: keep the hero background behind the main navbar (index1 behavior) */
  margin-top: calc(-1 * var(--navH));

  /* Push hero CONTENT down so it clears both navbar + fixed subnav */
  padding-top: calc(var(--navH) + var(--productsSubnavH));
}

/* Ensure normal content right after the subnav doesn't slide under it */
.productsSubnav + .section,
.productsSubnav + main,
.productsSubnav + .page{
  padding-top: var(--productsSubnavH);
}

@media (max-width: 768px){
  :root{ --productsSubnavH: 54px; }
  .productsSubnav__inner{ padding: 0 14px; }
  .productsSubnav{
    top: calc(var(--navH) - 6px);
  }
}

/* Produkte (produkte.php) – CTA Buttons under hero */
.productsHero__cta{
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

/* Base button look for <a> CTAs on products hero */
.productsOrderBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 16px;
  min-height: 44px;
  border-radius: 12px;

  font: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1;

  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);

  box-shadow: none;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.productsOrderBtn:hover,
.productsOrderBtn:focus-visible{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.16);
  box-shadow: var(--shadow-soft);
  outline: 0;
}

.productsOrderBtn:active{ transform: translateY(0); }

/* Secondary (grey glass) */
.productsOrderBtn--secondary{
  background: rgba(255,255,255,.06);
}

/* GloriaFood buttons under category pills (produkte.php) */
.productsHero__order{
  margin-top: 28px;          /* more space above */
  width: 100%;
  display: flex;
  justify-content: center;   /* centered */
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Base look for GloriaFood spans in this block (works even without extra classes) */
.productsHero__order .glf-button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;

  padding: 12px 16px !important;
  min-height: 44px !important;
  border-radius: 12px !important;

  font: inherit !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  line-height: 1 !important;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;

  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;

  box-shadow: none !important;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.productsHero__order .glf-button:hover,
.productsHero__order .glf-button:focus-visible{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: var(--shadow-soft) !important;
  outline: 0;
}

.productsHero__order .glf-button:active{ transform: translateY(0); }

/* Optional: your own classes (primary/secondary) */
.productsHero__order .glf-button.productsOrderBtn--primary{
  background: var(--accent) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 16px 40px rgba(222,10,23,.26) !important;
}

.productsHero__order .glf-button.productsOrderBtn--primary:hover,
.productsHero__order .glf-button.productsOrderBtn--primary:focus-visible{
  background: #f01422 !important;
  box-shadow: 0 22px 56px rgba(222,10,23,.30) !important;
}

.productsHero__order .glf-button.productsOrderBtn--secondary{
  background: rgba(255,255,255,.06) !important;
}

/* Give anchored sections some breathing room below the fixed navbar */
.productCat{ scroll-margin-top: calc(var(--navH) + 68px); }

/* Category blocks */
.productCat{
  margin-top: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  overflow: hidden;

  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 0;
}

/* Alternate layout for a more premium rhythm */
.productCat:nth-of-type(even){
  grid-template-columns: 1.08fr 0.92fr;
}
.productCat:nth-of-type(even) .productCat__media{ order: 2; }
.productCat:nth-of-type(even) .productCat__content{ order: 1; }

.productCat__media{
  position: relative;
  min-height: 260px;
  background: rgba(255,255,255,.03);
  overflow: hidden;
}

.productCat__media::after{
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.55));
  pointer-events: none;
}

.productCat__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .7s ease;
}

.productCat:hover .productCat__media img{
  transform: scale(1.06);
}

.productCat__content{
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.productCat__content .h2{ margin-bottom: 8px; }
.productCat__content .p{ margin-top: 0; }

.productCat__list{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.productCat__list li{
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.82);
  line-height: 1.45;

  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}

/* Two-column story block on products page */
.twoCol{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.twoCol__content{
  border-radius: var(--radius-lg);
  padding: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

.twoCol__media{
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}

.twoCol__media img{
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

/* Map embed on products page (keeps same language as mapWrap but separate class) */
.mapEmbed{
  margin-top: 16px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}

.mapEmbed iframe{
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}

/* Responsive */
@media (max-width: 980px){
  .productCat,
  .productCat:nth-of-type(even){
    grid-template-columns: 1fr;
  }
  .productCat:nth-of-type(even) .productCat__media{ order: 1; }
  .productCat:nth-of-type(even) .productCat__content{ order: 2; }

  .productCat__media{ min-height: 240px; }
  .twoCol{ grid-template-columns: 1fr; }
  .twoCol__media img{ min-height: 260px; }
}

@media (max-width: 768px){
  .mapEmbed iframe{ height: 340px; }
}

@media (max-width: 520px){
  .productCat__content{ padding: 18px; }
  .productCat__list{ gap: 8px; }
  .productCat__list li{ padding: 10px 12px; }

  .twoCol__content{ padding: 18px; }
}
/* Ensure padding doesn't cause horizontal overflow */
*, *::before, *::after{ box-sizing: border-box; }

.navbar {
  width: 100%;
  padding: 14px 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  /* Make the bar itself transparent; glass is drawn by ::before */
  background: transparent;
  border-bottom: 0;
  box-shadow: none;

  z-index: 1000;
}

/* Glass layer (same look as before, but avoids nesting backdrop-filter issues) */
.navbar::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    135deg,
    rgba(12, 12, 12, 0.72),
    rgba(12, 12, 12, 0.45)
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);

  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);

  z-index: 0;
}

/* Keep navbar content above the glass layer */
.nav-content{
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0; /* Abstand kommt vom .navbar Padding */
}

/* Burger-Menü: standardmäßig aus (Desktop), nur mobil einblenden */
.burger-menu{
  display: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.burger-menu span{ display: block; }

.logo{
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.logo img {
  height: 46px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}

/* Entfernt evtl. Trennstrich/Separator neben dem Logo */
.logo,
.logo a{
  border: 0 !important;
  outline: 0 !important;
}

.logo::before,
.logo::after,
.logo a::before,
.logo a::after{
  content: none !important;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto; /* zentriert zwischen Logo & CTA */
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.nav-links li a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.2px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1.1;
  padding: 6px 2px; /* etwas größere Hoverfläche */
}

/* Text-Layer (benötigt <span class="link-text">..</span> im Link) */
.nav-links li a .link-text{
  display: block;
  transform: translateY(0);
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition: transform 160ms ease, opacity 160ms ease, clip-path 160ms ease;
  will-change: transform, opacity, clip-path;
}

/* Ersatz-Layer in Rot (benötigt data-text="..." auf dem <a>) */
.nav-links li a::after{
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transform: translateY(120%);
  opacity: 0;
  clip-path: inset(0 100% 0 0); /* wipe from left to right */
  transition: transform 160ms ease, opacity 160ms ease, clip-path 180ms ease;
  color: #DE0A17;
  will-change: transform, opacity, clip-path;
}

.nav-links li a:hover .link-text,
.nav-links li a:focus-visible .link-text{
  transform: translateY(-120%);
  opacity: 0;
  clip-path: inset(0 0 0 100%); /* wipe out to the right */
}


.nav-links li a:hover::after,
.nav-links li a:focus-visible::after{
  transform: translateY(0);
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* =============================
   Per-letter hover animation (stagger)
   Aktiviert sich nur, wenn die Links im HTML pro Buchstabe Spans besitzen.
   ============================= */
@supports selector(a:has(*)){

/* Wenn per-letter aktiv ist, die alte Wort-Animation abschalten */
.nav-links li a:has(.link-text .char)::after{ content: none; }

.nav-links li a:has(.link-text .char) .link-text{
  position: relative;
  display: inline-block;
  transform: none;
  opacity: 1;
  clip-path: none;
  transition: none;
}

/* Per-letter mode: enforce identical line metrics */
.nav-links li a:has(.link-text .char){
  line-height: 1;
}

.nav-links li a:has(.link-text .char) .link-text,
.nav-links li a:has(.link-text .char) .link-text--alt{
  line-height: 1;
}

.nav-links li a:has(.link-text .char){
  --alt-offset-y: 6px; /* Feintuning: rot exakt auf Baseline */
}

/* Roter Layer liegt exakt über dem weißen Text */
.nav-links li a:has(.link-text .char) .link-text--alt{
  position: absolute;
  inset: 0;
  display: inline-block;
  line-height: 1;
  color: #DE0A17;
  transform: translateY(var(--alt-offset-y, 0px));
  pointer-events: none;
}

/* Basis-Buchstaben (weiß) */
.nav-links li a:has(.link-text .char) .link-text .char{
  display: inline-block;
  transform: translateY(0);
  opacity: 1;
  transition: transform 220ms ease, opacity 220ms ease;
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity;
}

/* Rot-Buchstaben starten unten & unsichtbar */
.nav-links li a:has(.link-text .char) .link-text--alt .char{
  display: inline-block;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity;
}

/* Hover/Fokus: Weiß raus, Rot rein (Buchstabe für Buchstabe) */
.nav-links li a:has(.link-text .char):hover .link-text .char,
.nav-links li a:has(.link-text .char):focus-visible .link-text .char{
  transform: translateY(-120%);
  opacity: 0;
}

.nav-links li a:has(.link-text .char):hover .link-text--alt .char,
.nav-links li a:has(.link-text .char):focus-visible .link-text--alt .char{
  transform: translateY(0);
  opacity: 1;
}
}

.cta-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.cta-buttons .btn {
  width: 48px;              /* Größenbegrenzung */
  height: 44px;
  padding: 0;               /* Icon-Button */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;  /* NUR bei Hover rot */
  color: #ffffff;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.2px;
  border: 0;                /* kein Rahmen */
  box-shadow: none;         /* kein Rahmen/Glow */
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, filter 0.18s ease;
}

/* Icons in den CTA Buttons */
.cta-buttons .btn .btn-icon{
  display: block;
  max-width: 40px;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* phone-icon.png in Weiß einfärben (PNG via Filter) */
.cta-buttons .btn .btn-icon[src*="phone-icon"]{
  filter: brightness(0) invert(1);
}

.cta-buttons .btn:hover,
.cta-buttons .btn:focus-visible {
  background: #DE0A17;
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(222, 10, 23, 0.30);
  filter: brightness(1.05);
}

/* 🔄 Mobile responsive adjustments */
@media (max-width: 768px) {
  /* Mobile: weniger Horizontal-Padding, damit CTA nicht aus dem Viewport rutscht */
  .navbar{
    padding: 12px 14px;
  }

  /* Mobile: engeres Layout */
  .nav-content{
    display: grid;
    /* equal left & right columns so the logo is truly centered */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 12px;
    position: relative;
    min-width: 0;
  }

  /* Mobile: Logo etwas größer */
  .logo img{
    height: 50px;
  }

  /* Mobile: CTA Buttons etwas kompakter */
  .cta-buttons{
    gap: 8px;
    flex: 0 0 auto;
  }

  .cta-buttons .btn{
    width: 42px;
    height: 42px;
    background: transparent;
  }

  .cta-buttons .btn .btn-icon{
    max-width: 34px;
    max-height: 26px;
  }

  /* (grid layout applied above, redundant block removed) */

  /* Burger Menü sichtbar */
  .burger-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    cursor: pointer;

    /* no visible background tile */
    width: 44px;
    height: 44px;
    border-radius: 0;
    border: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    outline: 0;
    padding: 0;
    justify-self: start; /* align to left edge of grid column */
    margin-left: 0;      /* keep left spacing equal to navbar padding */
    margin-right: 0;
  }


  .burger-menu:hover,
  .burger-menu:focus-visible{
    background: transparent;
    box-shadow: none;
  }


  .burger-menu:hover span,
  .burger-menu:focus-visible span{
    background-color: #DE0A17;
  }

  .burger-menu span {
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.92);

    /* animate to X when opened */
    transition: transform 180ms ease, background-color 180ms ease, opacity 180ms ease;
    transform-origin: center;
    will-change: transform, opacity;
  }

  /* No visible focus ring on burger (requested) */
  .burger-menu:focus,
  .burger-menu:focus-visible{
    outline: 0;
  }

  /* Open state: turn the 2 lines into an X */
  .burger-menu[aria-expanded="true"] span{
    background-color: #DE0A17;
  }
  .burger-menu[aria-expanded="true"] span:nth-child(1){
    transform: translateY(4.5px) rotate(45deg);
  }
  .burger-menu[aria-expanded="true"] span:nth-child(2){
    transform: translateY(-4.5px) rotate(-45deg);
  }

  /* Mobile: Logo wirklich mittig zwischen Burger & CTA */
  .logo{
    position: static;
    transform: none;
    margin-right: 0;
    z-index: 2;
    justify-self: center;
  }
  .burger-menu{ grid-column: 1; justify-self: start; }
  .logo{ grid-column: 2; justify-self: center; }
  .cta-buttons{ grid-column: 3; justify-self: end; }

  /* Mobile: Navigation im Burgermenü (Dropdown) */
  .nav-links{
    display: none;
    position: fixed;
    top: calc(var(--navH) + 10px);
    left: 14px;
    right: 14px;

    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;

    padding: 10px;
    margin: 0;

    /* Glass dropdown – visibly blurred */
    background-color: rgba(12, 12, 12, 0.18);
    background: linear-gradient(
      135deg,
      rgba(12, 12, 12, 0.42),
      rgba(12, 12, 12, 0.14)
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,.45);

    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);

    will-change: backdrop-filter;

    z-index: 1001;
    isolation: isolate;
  }





  /* JS setzt aria-expanded / aria-hidden -> dann anzeigen */
  .burger-menu[aria-expanded="true"] ~ .nav-links,
  .nav-links[aria-hidden="false"]{
    display: flex;
  }

  .nav-links li a{
    padding: 12px 10px;
    border-radius: 10px;

    /* Mobile dropdown: keep a fixed full-width link box so text animation never shifts left/right */
    display: block;
    width: 100%;
    text-align: center;
  }


  /* Mobile: per-letter Hover (stagger) */
  @supports selector(a:has(*)){
  .nav-links li a:has(.link-text .char)::after{ content: none; }

  .nav-links li a:has(.link-text .char) .link-text{
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;

    transform: none;
    opacity: 1;
    clip-path: none;
    transition: none;
  }

  .nav-links li a:has(.link-text .char) .link-text--alt{
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;

    line-height: 1;
    color: #DE0A17;
    transform: translateY(var(--alt-offset-y, 0px));
    pointer-events: none;
  }

  .nav-links li a:has(.link-text .char){
    --alt-offset-y: 10px;
    line-height: 1;
  }

  .nav-links li a:has(.link-text .char) .link-text,
  .nav-links li a:has(.link-text .char) .link-text--alt{
    line-height: 1;
  }

  .nav-links li a:has(.link-text .char) .link-text .char{
    display: inline-block;
    transform: translateY(0);
    opacity: 1;
    transition: transform 220ms ease, opacity 220ms ease;
    transition-delay: var(--d, 0ms);
  }

  .nav-links li a:has(.link-text .char) .link-text--alt .char{
    display: inline-block;
    transform: translateY(120%);
    opacity: 0;
    transition: transform 220ms ease, opacity 220ms ease;
    transition-delay: var(--d, 0ms);
  }

  .nav-links li a:has(.link-text .char):hover .link-text .char,
  .nav-links li a:has(.link-text .char):focus-visible .link-text .char{
    transform: translateY(-120%);
    opacity: 0;
  }

  .nav-links li a:has(.link-text .char):hover .link-text--alt .char,
  .nav-links li a:has(.link-text .char):focus-visible .link-text--alt .char{
    transform: translateY(0);
    opacity: 1;
  }
  }

  /* Mobile dropdown: no hover/focus frame around links */
  .nav-links li a:hover,
  .nav-links li a:focus-visible{
    background: transparent;
    box-shadow: none;
    outline: 0;
  }

  /* Also prevent iOS tap highlight from looking like a frame */
  .nav-links li a{
    -webkit-tap-highlight-color: transparent;
  }

  .cta-buttons {
    gap: 10px;
  }
}

/* =========================================================
   INDEX (index1.php) – Dark Glass / Apple-like (Döner Edition)
   ========================================================= */

/* Fonts (Roboto Slab) */
@font-face{
  font-family: "RobotoSlab";
  src: url("/fonts/RobotoSlab-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "RobotoSlab";
  src: url("/fonts/RobotoSlab-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg: #0b0b0c;
  --bg-2: #070708;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --faint: rgba(255,255,255,.55);
  --line: rgba(255,255,255,.10);

  --glass: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.085);
  --glass-3: rgba(255,255,255,.11);

  --shadow: 0 18px 55px rgba(0,0,0,.55);
  --shadow-soft: 0 10px 26px rgba(0,0,0,.40);

  --radius: 18px;
  --radius-lg: 26px;
  --navH: 86px;
  --heroOverhang: 96px;
  --tilesOverlap: 90px;

  --accent: #DE0A17;
  --accent-soft: rgba(222,10,23,.18);
}

html, body{ height: 100%; }

/* Put the global background on `html` so it always spans the full document (fixes iOS “background ends early”). */
html{
  background-color: var(--bg);
}

/* Render the big gradient on a fixed layer to avoid iOS Safari background tiling/restart artifacts on long pages */
html::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(1200px 700px at 16% 4%, rgba(222,10,23,.16), transparent 58%),
    radial-gradient(900px 560px at 92% 6%, rgba(255,255,255,.08), transparent 58%),
    radial-gradient(900px 560px at 60% 120%, rgba(222,10,23,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));

  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: translateZ(0);
}

body{
  margin: 0;
  color: var(--text);
  font-family: "RobotoSlab", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: transparent; /* allow html background to show through */
  overflow-x: hidden;
  position: relative;
}

/* Keep content below fixed navbar */
body{ padding-top: var(--navH); }
@media (max-width: 768px){
  :root{ --navH: 78px; --heroOverhang: 72px; }
  body{ padding-top: var(--navH); }
}

/* Shared layout helpers */
.section{
  padding: 56px 0;
  overflow-x: hidden; /* fallback */
}

@supports (overflow: clip){
  .section{ overflow-x: clip; }
}

/* Consistent inner gutters so content never touches/overruns the background edges */
.wrap{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

@media (max-width: 768px){
  .section{ padding: 44px 0; }
  .wrap{
    max-width: 1200px;
    padding-left: 14px;
    padding-right: 14px;
  }
}

.h2{
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  font-size: clamp(24px, 3vw, 36px);
}
.p{
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 15px;
  max-width: 78ch;
}

/* Buttons (match your CTA style) */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  min-height: 44px;
  line-height: 1;
  vertical-align: middle;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: none;
}
.btn:hover,
.btn:focus-visible{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.16);
  box-shadow: var(--shadow-soft);
}
.btnPrimary{
  background: var(--accent);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 16px 40px rgba(222,10,23,.26);
}
.btnPrimary:hover,
.btnPrimary:focus-visible{
  background: #f01422;
  box-shadow: 0 22px 56px rgba(222,10,23,.30);
}

/* Subtle glass surfaces */
.glass{
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

/* Small unobtrusive glass tile (used e.g. for "Zum Artikel") */
.glassTile{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 12px;
  border-radius: 14px;

  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);

  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);

  color: rgba(255,255,255,.88);
}

/* Link variant */
.glassTile--link{
  text-decoration: none;
  font-weight: 500;
  line-height: 1.1;
  cursor: pointer;
}

.glassTile--link:hover,
.glassTile--link:focus-visible{
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.055));
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
  transform: translateY(-1px);
  outline: 0;
}

.glassTile--link:active{
  transform: translateY(0);
}

/* Optional subtle arrow indicator */
.glassTile--link::after{
  content: "↗";
  font-size: 12px;
  opacity: .8;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce){
  .glassTile--link:hover,
  .glassTile--link:focus-visible,
  .glassTile--link:active{
    transform: none;
  }
}

/* HERO – Fullscreen Video Background (behind navbar, no crop) */
.hero{
  position: relative;

  /* Pull the hero up so the background is visible behind the fixed navbar */
  margin-top: calc(-1 * var(--navH));

  /* Keep hero content starting below the navbar */
  padding: var(--navH) 0 72px;

  /* True fullscreen section (stable viewport height – prevents iOS scroll stretch) */
  height: 100vh;   /* fallback */
  height: 100svh;  /* stable on mobile browsers */
  min-height: 100svh;
  max-height: 100svh;

  display: flex;
  align-items: center;
  overflow: hidden; /* prevents horizontal scroll from 100vw background */
}

/* Background media: full viewport width, even if hero is inside a centered .wrap */
.heroMedia{
  position: absolute;
  inset: 0;

  left: 50%;
  width: 100vw;
  height: 100%;
  max-height: 100%;
  transform: translateX(-50%);

  border: 0;
  background: #000;
  z-index: 0;
  overflow: hidden;
}

.heroMedia video,
.heroMedia img{
  width: 100%;
  height: 100%;
  display: block;

  /* Fullscreen fill (may crop edges) */
  object-fit: cover;
  object-position: center;
}

/* Readability overlay (above video, below content) */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(222,10,23,.16), transparent 62%),
    radial-gradient(900px 520px at 92% 10%, rgba(255,255,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.72));
  pointer-events: none;
}

/* Disable hero video filter/overlay on selected pages */
.hero--no-video-filter::before{
  display: none;
}
.hero--no-video-filter .heroMedia video,
.hero--no-video-filter .heroMedia img{
  filter: none !important;
}

/* Content layer */
.heroGrid{
  /* IMPORTANT: do NOT create a positioning context,
     otherwise .heroMedia becomes relative to this centered grid/wrap */
  position: static;

  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

/* Glass copy card sits on the right on desktop */
.heroCopy{
  justify-self: end;
  width: min(520px, 100%);
  position: relative;
  z-index: 2;
  /* slightly lower */
  margin-top: 22px;

  border-radius: var(--radius-lg);
  padding: 26px;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.heroKicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: rgba(255,255,255,.86);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.heroKicker::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(222,10,23,.16);
}
.heroTitle{
  margin: 0 0 12px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(28px, 4vw, 48px);
}
.heroSub{
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 15px;
}

@media (max-width: 980px){
  .hero{
    padding: var(--navH) 0 62px;
  }
  .heroCopy{
    justify-self: center;
    padding: 22px;
    margin-top: 16px;
  }
}

@media (max-width: 520px){
  .hero{
    padding: var(--navH) 0 56px;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
  }

  /* Mobile: video should fill the iPhone screen height (cropping sides is OK) */
  .heroMedia{
    height: 100%;
    max-height: 100%;
  }
  .heroMedia video,
  .heroMedia img{
    width: 100vw;
    height: 100%;
    max-height: 100%;
  }

  .heroCopy{ width: 100%; }
}

.tiles{
  /* Pull tiles upward so they sit ~50% over the hero video */
  margin-top: calc(-1 * var(--tilesOverlap));
  margin-bottom: 110px; /* mehr Abstand zur nächsten Sektion */
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.tile{
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  position: relative;
  overflow: hidden;
  display: flex;
}
/* Tile hover video background (fills full tile incl. rounded corners) */
.tileVid{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;

  opacity: 0;
  transform: scale(1.03);
  transition: opacity 260ms ease, transform 800ms ease;
  z-index: 0;
  pointer-events: none;

  /* subtle premium tuning */
  filter: saturate(1.05) contrast(1.08) brightness(0.78);
}

/* Text stays above video */
.tileContent,
.tile b,
.tile span{
  position: relative;
  z-index: 2;
}

/* Vertically center the content within the tile */
.tileContent{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tile::before{
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(500px 220px at 20% 0%, rgba(222,10,23,.18), transparent 60%),
    radial-gradient(500px 260px at 100% 40%, rgba(255,255,255,.08), transparent 60%);
  opacity: .55;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
/* Extra dark overlay over the video (keeps text readable) */
.tile::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0,0,0,.22);
  pointer-events: none;
  z-index: 1;
}
.tile b{
  position: relative;
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
}
.tile span{
  position: relative;
  display: block;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}
.tile:hover{
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
  /* reveal background video on hover */
}

.tile:hover .tileVid{
  opacity: 0.72;
  transform: scale(1.08);
}
.tile.is-playing .tileVid{
  opacity: 0.72;
  transform: scale(1.08);
}
/* =========================================================
   Content Tiles (z.B. steakdoener.php) – kein Hero-Overlap
   (eigene Container-Klasse, damit nichts von den Hero-Tiles überschreibt)
   ========================================================= */

.contentTiles{
  /* Normal content flow (no hero overlap) */
  margin-top: 18px;
  margin-bottom: 0;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  position: relative;
  z-index: 1;
}

/* optionaler Zusatzabstand für den 2. Tile-Block */
.contentTiles--mt{
  margin-top: 18px;
}

/* Überschrift über Text (Column Layout) */
.contentTiles .tile{
  /* Keep the same glass look from .tile, but ensure layout is correct */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;

  width: 100%;
  padding: 18px 16px;
  min-height: 136px;
}

/* saubere Typo-Abstände */
.contentTiles .tile b{
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.contentTiles .tile span{
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 980px){
  .contentTiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .contentTiles{ grid-template-columns: 1fr; }
}

/* Reduced motion: keep video hidden */
@media (prefers-reduced-motion: reduce){
  .tileVid{ transition: none; }
  .tile:hover .tileVid,
  .tile.is-playing .tileVid{ opacity: 0; }
}

@media (max-width: 980px){
  :root{ --tilesOverlap: 64px; }
  .tiles:not(.tiles--content){ grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 88px; }
}
@media (max-width: 520px){
  /* Mobile: much more distance to the hero (reduce overlap) */
  :root{ --tilesOverlap: 0px; }

  /* Make all section content (headings + blocks) match the tile width */
  .wrap{
    max-width: 420px;
    /* stronger mobile gutters + safe-area support so content never hits the edges */
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  .tiles:not(.tiles--content){
    grid-template-columns: 1fr;
    margin-top: 28px;   /* extra gap below hero */
    margin-bottom: 72px;
    width: 100%;
  }

  /* a bit taller tiles on mobile */
  .tiles:not(.tiles--content) .tile{
    min-height: 132px;
    padding: 18px 16px 18px;
  }

  /* Section blocks fill the same .wrap width (no extra centering needed) */
  .cards3,
  .story,
  .pillGrid,
  .socials,
  .marquee,
  .mapWrap,
  .faq{
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* Prevent pills (and any long labels) from causing horizontal overflow */
  .pillGrid{ max-width: 100%; }
  .pill{
    max-width: 100%;
    flex: 0 1 auto;
    white-space: normal;
    word-break: break-word;
  }
}

/* Signature Produkte (3 Cards) */
.cards3{
  margin-top: 18px;
  margin-bottom: 110px; /* mehr Abstand zur nächsten Sektion */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.imgCard{
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  position: relative;
  min-height: 320px;
}
.imgCard img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .6s ease;
}
.imgCard:hover img{ transform: scale(1.06); }
.imgCard::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.65));
  pointer-events: none;
}
.imgCard .cap{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(12,12,12,.55);
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.imgCard .cap b{ display:block; font-weight: 500; margin-bottom: 4px; }
.imgCard .cap small{ color: rgba(255,255,255,.70); line-height: 1.4; }

@media (max-width: 980px){
  .cards3{ grid-template-columns: 1fr; margin-bottom: 88px; }
  .imgCard{ min-height: 280px; }
}

@media (max-width: 520px){
  .cards3{ margin-bottom: 72px; }
}

/* Mini Story */
.story{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 16px;
  align-items: stretch;
}
.storyBox{
  border-radius: var(--radius-lg);
  padding: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

/* Mini Story: Abstand zwischen Text und Button */
.storyBox .btn{
  margin-top: 16px;
}
.storyMedia{
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}
.storyMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 980px){
  .story{ grid-template-columns: 1fr; }
}

/* Saucen & Extras – Pills */
.pillGrid{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  box-shadow: 0 8px 22px rgba(0,0,0,.30);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.pill:hover{ border-color: rgba(222,10,23,.35); box-shadow: 0 12px 30px rgba(222,10,23,.14); }

/* Socials */
.socials{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch; /* force equal card heights */
}
.socialCard{
  border-radius: var(--radius-lg);
  padding: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  /* Fixed, equal height for both cards (independent of plugin content) */
  height: clamp(280px, 34vh, 340px);
  display: flex;
  flex-direction: column;
  align-self: stretch;
  overflow: hidden;
}

.socialCard iframe{
  display: block;
  width: 100% !important;
  max-width: 100%;
  /* Show mostly the image area of the RSS carousel (crop the empty part below) */
  height: clamp(200px, 26vh, 250px) !important;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
}


@media (max-width: 980px){
  .socialCard{ height: clamp(280px, 38vh, 360px); }
  .socialCard iframe{ height: clamp(200px, 28vh, 260px) !important; }
}
@media (max-width: 520px){
  .socialCard{ height: clamp(300px, 46vh, 420px); }
  .socialCard iframe{ height: clamp(220px, 34vh, 300px) !important; }
}
.row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.socialCard b{ font-weight: 500; }


@media (max-width: 980px){
  .socials{ grid-template-columns: 1fr; }
}

/* =========================================================
   Socials – Inner Styling (Google Reviews + Instagram Mock)
   (Cards remain unchanged; only inner content)
   ========================================================= */

/* --- Google Reviews Slider --- */
.socialCard .gReviewsSlider{
  margin-top: 10px;
  overflow: hidden;
}

.socialCard .gReviewsTrack{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;

  scrollbar-width: none;
}
.socialCard .gReviewsTrack::-webkit-scrollbar{ display: none; }

.socialCard .gReviewSlide{
  flex: 0 0 86%;
  max-width: 86%;
  scroll-snap-align: start;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.035));

  padding: 14px 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

.socialCard .gReviewSlide strong{
  font-weight: 600;
  color: rgba(255,255,255,.94);
}

.socialCard .gReviewSlide .p{
  color: rgba(255,255,255,.78);
  line-height: 1.55;
  font-size: 14px;
  max-width: none;

  /* Clamp without vendor properties (keeps VS Code validator quiet) */
  --review-lines: 5;
  max-height: calc(1.55em * var(--review-lines));
  overflow: hidden;
}

.socialCard .gReviewsDots{
  margin-top: 8px;
  color: rgba(255,255,255,.62);
  font-size: 12px;
}

/* --- Instagram Mock Grid (Video Posts) --- */
.socialCard .igMock{
  margin-top: 8px;
}

.socialCard .igGrid{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;

  scrollbar-width: none;
}
.socialCard .igGrid::-webkit-scrollbar{ display: none; }

.socialCard .igPost{
  display: block;
  text-decoration: none;
  color: inherit;
  min-width: 0;

  /* One post per "view" (JS can swipe to next) */
  flex: 0 0 100%;
  max-width: 100%;
  scroll-snap-align: start;
}

.socialCard .igThumb{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);

  /* Instagram-style video post ratio (portrait) */
  aspect-ratio: 9 / 16;
  position: relative;
}



.socialCard .igThumb video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(1.05) contrast(1.06) brightness(0.92);
}

/* Subtle IG-like overlay icon */
.socialCard .igThumb::after{
  content: "▶";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  pointer-events: none;
}

.socialCard .igCap{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* ensure ellipsis works reliably in grid */
}

/* Hover feels tappable but stays subtle */
.socialCard .igPost:hover .igThumb,
.socialCard .igPost:focus-visible .igThumb{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 14px 34px rgba(0,0,0,.26);
  transform: translateY(-1px);
}

.socialCard .igPost:active .igThumb{ transform: translateY(0); }

@media (max-width: 520px){
  .socialCard .gReviewSlide{ flex-basis: 92%; max-width: 92%; }
  .socialCard .gReviewSlide .p{ --review-lines: 6; }
  .socialCard .igGrid{ gap: 10px; }
  .socialCard .igThumb{ border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce){
  .socialCard .igPost:hover .igThumb,
  .socialCard .igPost:focus-visible .igThumb{
    transform: none;
  }
}

/* Gallery – Marquee right -> left */
.marquee{
  margin-top: 16px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.track{
  display: flex;
  gap: 12px;
  padding: 14px;
  width: max-content;
  animation: marqueeLeft 42s linear infinite;
  will-change: transform;
}
.gItem{
  width: 260px;
  height: 170px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.gItem img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@keyframes marqueeLeft{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

@media (max-width: 520px){
  .gItem{ width: 210px; height: 140px; }
  .track{ animation-duration: 34s; }
}

/* Maps */
.mapWrap{
  margin-top: 16px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}
.mapWrap iframe{
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}
@media (max-width: 768px){
  .mapWrap iframe{ height: 340px; }
}

/* FAQ */
.faq{
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.faq details{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.36);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  padding: 12px 14px;
}
.faq summary{
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  color: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.80);
  border-bottom: 2px solid rgba(255,255,255,.80);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after{ transform: rotate(225deg); }
.faq details p{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

/* =========================================================
   Über Uns (ueber-uns.php) – Vertical Timeline
   ========================================================= */

.timelinePage .wrap{ overflow: visible; }

/* Center all text on the About page */
.timelinePage .section .wrap{ text-align: center; }
/* Intro ("Eine Geschichte, die weitergeht.") soll vertikal zentriert starten */
.timelinePage .section:first-of-type{
  min-height: calc(100svh - var(--navH));
  display: flex;
  align-items: center;
  padding: 0;
}
.timelinePage .section:first-of-type > .wrap{
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
}
.timelinePage .p{ margin-left: auto; margin-right: auto; }
.timelinePage .h2,
.timelinePage .heroTitle,
.timelinePage .heroKicker{ margin-left: auto; margin-right: auto; }

/* Soft intro fade for the main headline on page load */
@keyframes bdFadeInUp{
  from{ opacity: 0; transform: translate3d(0, 10px, 0); }
  to{ opacity: 1; transform: translate3d(0, 0, 0); }
}
.timelinePage .heroTitle{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  animation: bdFadeInUp 2400ms ease forwards;
  animation-delay: 220ms;
}

.timelinePage .heroKicker{
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  animation: bdFadeInUp 2000ms ease forwards;
  animation-delay: 120ms;
}

/* Text unter dem Hero Title soll ebenfalls sehr langsam & sanft einfaden */

.timelinePage .section:first-of-type .p,
.timelinePage .section:first-of-type .heroSub{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  animation: bdFadeInUp 2400ms ease forwards;
  animation-delay: 420ms;
}

/* Scroll Hint – Pfeil nach unten (unten mittig, leichtes Bounce) */
.timelinePage .scrollHint{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);

  box-shadow: 0 16px 42px rgba(0,0,0,.45);
  z-index: 1200;

  opacity: 0;
  animation: bdHintFade 2400ms ease forwards;
  animation-delay: 1100ms;
}

.timelinePage .scrollHint__chev{
  position: relative;
  width: 14px;
  height: 14px;

  /* Bounce NUR vertikal (kein seitliches Driften) */
  animation: bdHintBounce 1800ms ease-in-out infinite;
  will-change: transform;
}

/* Chevron bleibt stabil rotiert; Bounce passiert am Container oben */
.timelinePage .scrollHint__chev::before{
  content: "";
  position: absolute;
  inset: 0;
  border-right: 3px solid rgba(255,255,255,.86);
  border-bottom: 3px solid rgba(255,255,255,.86);
  transform: rotate(45deg);
}

@keyframes bdHintFade{
  from{ opacity: 0; transform: translateX(-50%) translateY(10px); }
  to{ opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes bdHintBounce{
  0%, 100%{ transform: translate3d(0, 0, 0); }
  50%{ transform: translate3d(0, 2px, 0); }
}

/* Sobald gescrollt wurde -> Hint sanft ausblenden */
.timelinePage.isScrolled .scrollHint{
  animation: none !important;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 180ms ease, transform 180ms ease;
}


@media (prefers-reduced-motion: reduce){
  .timelinePage .heroTitle,
  .timelinePage .heroKicker,
  .timelinePage .section:first-of-type .p,
  .timelinePage .section:first-of-type .heroSub,
  .timelinePage .scrollHint{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .timelinePage .scrollHint{ animation: none !important; opacity: 1 !important; transform: translateX(-50%) !important; }
  .timelinePage .scrollHint__chev{ animation: none !important; }
}

.timeline{
  position: relative;
  padding: 10px 0 10px;

  /* shared geometry for line + pins */
  --t-line-x: 28px;         /* left position of the red line */
  --t-line-w: 4px;          /* width of the red line */
  --t-dot: 14px;            /* dot size */
  --t-gap: 12px;            /* gap between line and date */
}

/* Vertical red line */
.timeline .t-line{
  position: absolute;
  left: var(--t-line-x);
  top: 0;
  bottom: 0;
  width: var(--t-line-w);
  transform: none;
  background: var(--accent, #DE0A17);
  opacity: .95;
  box-shadow:
    0 0 0 1px rgba(222,10,23,.16),
    0 18px 60px rgba(222,10,23,.12);
  z-index: 0;
}

/* Each year gets its own scroll moment */
.t-item{
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0,1fr);
  align-items: center;
  gap: 18px;

  padding: 120px 0;   /* more distance so timing feels clear */
  min-height: 64vh;   /* ensures the point reaches center */
}

/* Pin column */
/* Pin & date are positioned to sit exactly on the red line */
.t-pin{
  grid-column: 1;
  position: relative;
  z-index: 2;
  /* no stacking layout here; dot + date are absolutely positioned */
}

.t-dot{
  width: var(--t-dot);
  height: var(--t-dot);
  border-radius: 999px;
  background: var(--accent, #DE0A17);
  box-shadow:
    0 0 0 6px rgba(222,10,23,.14),
    0 10px 30px rgba(0,0,0,.35);

  position: absolute;
  left: calc(var(--t-line-x) + (var(--t-line-w) / 2) - (var(--t-dot) / 2));
  top: 50%;
  transform: translateY(-50%);
}

.t-year{
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);

  position: absolute;
  left: calc(var(--t-line-x) + var(--t-line-w) + var(--t-gap));
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
}

/* Cards: hidden by default (JS controls opacity/transform) */
/* Year text should NOT look like a tile/card */
.t-card{
  max-width: 760px;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0;

  opacity: 0;
  transform: translate3d(0, 16px, 0);
  will-change: transform, opacity;
}

.t-title{
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

/* Timeline images (e.g. erster-doener.png, erfinder-doener.png) */
.t-img{
  display: block;
  /* smaller size + responsive */
  width: clamp(140px, 22vw, 220px);
  height: auto;
  margin: 14px auto 14px; /* centered above the paragraph */

  border-radius: 16px;
  border: 0;
  box-shadow: none; /* no frame/shadow */

  /* final opacity target */
  opacity: 0;

  /* start slightly off-screen to the right for a dynamic feel */
  transform: translate3d(18px, 0, 0);

  /* subtle premium grading (initially a touch muted) */
  filter: saturate(.65) contrast(1.05) brightness(.95);

  will-change: filter, transform, opacity;
}

/* Reveal the image only when the content is actually shown (Phase 3 / .is-text) */
.t-item.is-text .t-img{
  animation: tImgReveal 1400ms cubic-bezier(.22,1,.36,1) forwards;
}

/* When the year is active (JS adds .is-year), reveal from top->bottom */


@keyframes tImgReveal{
  0%{
    opacity: 0;
    transform: translate3d(18px, 0, 0);
    filter: saturate(.65) contrast(1.05) brightness(.95);
  }
  55%{
    opacity: .55;
  }
  100%{
    opacity: .8;
    transform: translate3d(0, 0, 0);
    filter: saturate(1) contrast(1.06) brightness(1);
  }
}

/* Reduced motion: show image immediately */
@media (prefers-reduced-motion: reduce){
  .t-img{
    transform: none !important;
    animation: none !important;
    opacity: .8 !important;
    filter: none !important;
  }
}

/* Mobile: a bit smaller so it fits nicely */
@media (max-width: 520px){
  .t-img{ width: clamp(130px, 56vw, 200px); }
}

/* Cards always sit to the right of the line */
.t-item .t-card{
  grid-column: 2;
  justify-self: center;
  max-width: 760px;
  text-align: center;
}

/* Mobile: line on the left, cards full width */
@media (max-width: 980px){
  .timeline{ --t-line-x: 18px; }
  .timeline .t-line{ left: var(--t-line-x); transform: none; }

  .t-item{
    /* Wider left column so year + line never collide with the text */
    grid-template-columns: 132px minmax(0,1fr);
    gap: 16px;
    padding: 86px 0;
    min-height: 58vh;
    align-items: center; /* ensures vertical centering */
  }

  /* Pin column: center dot + year vertically relative to the text */
  .t-pin{
    grid-column: 1;
    align-self: center;
    padding-top: 0;
  }

  .t-year{ font-size: 11px; }

  /* Text block: centered, but with breathing room from the year/line */
  .t-card{
    grid-column: 2 !important;
    justify-self: center;
    text-align: center;
    max-width: 560px;
    padding-inline: 10px;
  }
}

@media (max-width: 520px){
  .t-item{ grid-template-columns: 120px minmax(0,1fr); }
  .t-card{ max-width: 520px; }
}

@media (prefers-reduced-motion: reduce){
  .t-card{ transform: none !important; }
}
/* =========================================================
   Über Uns (ueber-uns.php) – Timeline 3-Phase Prep Overrides
   Phase 1: line fills viewport via --lineFill (0..1)
   Phase 2: year appears (add .is-year on .t-item)
   Phase 3: text appears (add .is-text on .t-item)
   ========================================================= */

.timeline{ --lineFill: 0; }

/* Sticky viewport line with track + inner fill */
.timeline .t-line{
  position: sticky;
  top: 0;
  height: 100vh;
  width: var(--t-line-w);
  left: var(--t-line-x);
  background: rgba(222,10,23,.14);
  border-radius: 999px;
  pointer-events: none;
}

.timeline .t-lineFill{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--accent, #DE0A17);
  border-radius: 999px;
  transform-origin: top;
  transform: scaleY(var(--lineFill, 0));
  will-change: transform;
  box-shadow:
    0 0 0 1px rgba(222,10,23,.16),
    0 18px 60px rgba(222,10,23,.12);
}

/* Phase 2: year hidden by default, JS adds .is-year */
.t-year{
  opacity: 0;
  transform: translateY(-50%) translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease;
  will-change: opacity, transform;
}

.t-item.is-year .t-year{
  opacity: 1;
  transform: translateY(-50%);
}

/* Phase 3: text animates in, JS adds .is-text */
.t-card{
  transition: opacity 320ms ease, transform 420ms ease;
}

.t-item.is-text .t-card{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Mobile: keep sticky line aligned */
@media (max-width: 980px){
  .timeline .t-line{ left: var(--t-line-x); }
}
/* =========================================================
   GloriaFood Buttons – consolidated (no duplicates)
   ========================================================= */

/* Base reset: make GloriaFood <span> behave like our buttons */
.glf-button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;

  padding: 12px 16px !important;
  min-height: 44px !important;
  border-radius: 12px !important;

  font: inherit !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  line-height: 1 !important;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;

  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;

  box-shadow: none !important;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.glf-button:hover,
.glf-button:focus-visible{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: var(--shadow-soft) !important;
  outline: 0;
}

.glf-button:active{ transform: translateY(0); }

/* Allow vendor not to force fixed sizing */
.glf-button{
  width: auto !important;
  height: auto !important;
}

/* Optional: primary red if you add .btnPrimary */
.glf-button.btnPrimary{
  background: var(--accent) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 16px 40px rgba(222,10,23,.26) !important;
}
.glf-button.btnPrimary:hover,
.glf-button.btnPrimary:focus-visible{
  background: #f01422 !important;
  box-shadow: 0 22px 56px rgba(222,10,23,.30) !important;
}

/* Helper row for mixed <a.btn> and <span.glf-button> */
.btnRow{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.btnRow > .btn,
.btnRow > .glf-button{
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Keep hero buttons perfectly aligned + identical typography */
.heroCopy .btnRow{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.heroCopy .btn,
.heroCopy .glf-button{
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  font-family: inherit;
}

/* Products page: allow custom classes without fighting the base */
.productsHero__order .glf-button.productsOrderBtn--primary{
  background: var(--accent) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 16px 40px rgba(222,10,23,.26) !important;
}

.productsHero__order .glf-button.productsOrderBtn--primary:hover,
.productsHero__order .glf-button.productsOrderBtn--primary:focus-visible{
  background: #f01422 !important;
  box-shadow: 0 22px 56px rgba(222,10,23,.30) !important;
}

.productsHero__order .glf-button.productsOrderBtn--secondary{
  background: rgba(255,255,255,.06) !important;
}

/* =========================
   Cookie Banner (Glass)
   ========================= */
.cc{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.cc--open{ display: block; }

.cc__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.cc__panel{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(980px, calc(100% - 24px));

  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  box-shadow: 0 18px 50px rgba(0,0,0,.35);

  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  padding: 16px 16px;
}

.cc__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.cc__x{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  font-size: 20px;
  cursor: pointer;
}

.cc__txt{
  margin-top: 10px;
  color: rgba(255,255,255,.80);
  line-height: 1.55;
  font-size: 14px;
  max-width: 70ch;
}

.cc__actions{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cc__actions--settings{
  margin-top: 14px;
}

.cc__settings{
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 14px;
  display: grid;
  gap: 12px;
}

/* Ensure the HTML [hidden] attribute always wins (iOS/Safari safe) */
.cc__settings[hidden]{
  display: none !important;
}

.cc__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.cc__sub{
  margin-top: 3px;
  font-size: 13px;
  opacity: .75;
  line-height: 1.45;
}

.cc__pill{
  font-size: 12px;
  opacity: .85;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
}

.cc__toggle{
  position: relative;
  width: 52px;
  height: 30px;
  display: inline-block;
}
.cc__toggle input{ display:none; }
.cc__toggle span{
  position:absolute; inset:0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  cursor: pointer;
}
.cc__toggle span::after{
  content:"";
  position:absolute;
  width: 24px; height: 24px;
  left: 3px; top: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  transition: transform .22s ease;
}
.cc__toggle input:checked + span{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
.cc__toggle input:checked + span::after{
  transform: translateX(22px);
}

@media (max-width: 520px){
  .cc__panel{ bottom: 12px; border-radius: 18px; }
  .cc__txt{ font-size: 13px; }
}