/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--farbe-grund);
  border-bottom: 1px solid var(--farbe-linie);
  transition: box-shadow var(--dauer-ui) var(--ease-standard);
}
.site-header.ist-kompakt { box-shadow: var(--schatten-weich); }
.header-inner {
  display: flex; align-items: center; gap: var(--abstand-16);
  min-height: 64px;
  padding-block: var(--abstand-8);
  transition: padding var(--dauer-ui) var(--ease-standard);
}
.header-logo { display: flex; align-items: center; gap: var(--abstand-8); text-decoration: none; }
.header-logo img { width: 44px; height: 44px; }
.header-logo .wortmarke {
  font-family: var(--font-display); font-weight: 800;
  color: var(--farbe-rot); font-size: 1.2rem; line-height: 1.1;
}

.hauptnav ul, .site-footer ul { list-style: none; padding: 0; margin: 0; }
.hauptnav ul { display: flex; gap: var(--abstand-24); }
.hauptnav a {
  text-decoration: none; color: var(--farbe-schwarz);
  font-weight: 500; font-size: 0.95rem; padding: var(--abstand-8) 0;
  background: linear-gradient(var(--farbe-rot), var(--farbe-rot)) no-repeat left calc(100% - 4px) / 0 2px;
  transition: background-size var(--dauer-ui) var(--ease-standard), color var(--dauer-ui) var(--ease-standard);
}
.hauptnav a:hover { color: var(--farbe-rot); background-size: 100% 2px; }
.header-cta { margin-left: auto; }

.nav-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  border-radius: var(--radius-s);
}
.nav-burger svg { width: 26px; height: 26px; }
.nav-burger .icon-schliessen { display: none; }
.nav-burger[aria-expanded="true"] .icon-oeffnen { display: none; }
.nav-burger[aria-expanded="true"] .icon-schliessen { display: block; }

@media (max-width: 959px) {
  .hauptnav {
    position: fixed; inset: 0; top: 64px;
    background: var(--farbe-grund);
    padding: var(--abstand-32) var(--container-pad);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dauer-ui) var(--ease-standard),
                visibility 0s var(--dauer-ui);
    z-index: 40;
  }
  .hauptnav.ist-offen { transform: translateX(0); visibility: visible; transition-delay: 0s; }
  .hauptnav ul { flex-direction: column; gap: var(--abstand-8); }
  .hauptnav a { display: block; font-size: 1.3rem; padding: var(--abstand-12) 0; }
  .header-cta .btn { padding: 8px 16px; font-size: 0.85rem; min-height: 40px; white-space: nowrap; }
}
@media (min-width: 960px) {
  .nav-burger { display: none; }
  .hauptnav { margin-left: auto; }
  .header-cta { margin-left: 0; }
  .header-inner { min-height: 72px; }
  .site-header.ist-kompakt .header-inner { min-height: 60px; padding-block: var(--abstand-4); }
}

/* ===== Sections ===== */
.section { padding-block: clamp(48px, 8vw, 96px); }
.section--flaeche { background: var(--farbe-flaeche); }
.section--kompakt { padding-block: clamp(32px, 5vw, 56px); }
.section-kopf { max-width: 640px; margin-bottom: var(--abstand-32); }
.section-kopf p { color: var(--farbe-grau); margin-top: var(--abstand-12); }

/* Dunkles Band (Awards, CTA) */
.band--dunkel {
  background: var(--farbe-schwarz); color: var(--farbe-hell);
}
.band--dunkel h2 { color: var(--farbe-weiss); }
.band--dunkel a { color: var(--farbe-hell); }

/* Wimpel-Kante: halbrunde „Bisse" der Vorgänger-Fläche in dunkle Bänder —
   Fest- und Pizzarand-Referenz, Signatur-Übergang der Site */
.scallop-oben { position: relative; }
.scallop-oben::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 11px;
  background-image: radial-gradient(circle 11px at 12px 0, var(--scallop-farbe, var(--farbe-grund)) 10px, transparent 11px);
  background-size: 24px 11px; background-repeat: repeat-x;
  pointer-events: none;
}

/* ===== Grids & Splits ===== */
.split { display: grid; gap: var(--abstand-32); align-items: center; }
.grid-2 { display: grid; gap: var(--abstand-24); }
.grid-3 { display: grid; gap: var(--abstand-24); }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--abstand-64); }
  .split--5-7 { grid-template-columns: 5fr 7fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.split-bild picture img { border-radius: var(--radius-m); box-shadow: var(--schatten-stark); }
.split-bild--schmal { max-width: 440px; }

/* Hero */
.hero { padding-block: clamp(40px, 7vw, 88px); overflow: hidden; }
.hero .split { align-items: center; }
.hero .btn-zeile { margin-top: var(--abstand-32); }
.hero-text > p { margin-top: var(--abstand-16); max-width: 52ch; }
.hero-award-zeile {
  display: inline-flex; align-items: center; gap: var(--abstand-8);
  margin-top: var(--abstand-24); font-size: var(--fs-small); font-weight: 600;
  color: var(--farbe-gold);
}

/* Hero-Komposition: roter Logo-Kreis hinter dem Foto + Karikatur als Sticker,
   wie auf dem Trailer — die Marke klebt buchstäblich auf dem Bild */
.hero .split-bild { position: relative; z-index: 0; }
.hero .split-bild::before {
  content: ""; position: absolute; z-index: -1;
  width: 58%; aspect-ratio: 1; border-radius: 50%;
  background: var(--farbe-rot);
  top: -6%; right: -7%;
}
.hero-sticker {
  position: absolute; left: -16px; bottom: 28px;
  width: 104px; height: 104px; border-radius: 50%;
  background: var(--farbe-weiss); border: 4px solid var(--farbe-weiss);
  box-shadow: var(--schatten-stark);
  transform: rotate(-8deg);
}
@media (max-width: 639px) {
  .hero .split-bild::before { top: -4%; right: -5%; }
  .hero-sticker { width: 76px; height: 76px; left: -6px; bottom: 16px; }
}

.btn-zeile { display: flex; flex-wrap: wrap; gap: var(--abstand-12); }

/* ===== Footer ===== */
.site-footer {
  background: var(--farbe-schwarz); color: var(--farbe-hell);
  padding-block: var(--abstand-64) var(--abstand-32);
}
.site-footer .footer-claim {
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 730;
  letter-spacing: -0.02em; color: var(--farbe-weiss); max-width: 20ch;
}
.footer-grid { display: grid; gap: var(--abstand-32); margin-block: var(--abstand-32); }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer h4 {
  font-family: var(--font-body); font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--farbe-gold);
  margin-bottom: var(--abstand-12); font-weight: 600;
}
.site-footer ul li { margin-bottom: var(--abstand-8); }
.site-footer a { color: var(--farbe-hell); text-decoration: none; }
.site-footer a:hover { color: var(--farbe-weiss); text-decoration: underline; }
.footer-rechtszeile {
  border-top: 1px solid var(--farbe-gold);
  padding-top: var(--abstand-24); font-size: var(--fs-small);
  display: flex; flex-wrap: wrap; gap: var(--abstand-16);
  color: rgba(250, 245, 236, 0.75);
}
.footer-logo img { width: 56px; height: 79px; margin-bottom: var(--abstand-16); }

/* Seiten-Hero für Unterseiten */
.seiten-kopf { padding-block: clamp(40px, 6vw, 72px) 0; }
.seiten-kopf p { max-width: 56ch; margin-top: var(--abstand-16); }