/* ==========================================================================
   BUSSAL & KAMERA — Landingpage
   Design-Tokens 1:1 aus HPG_Bussal_Kamera_Brandboard_v1.pdf
   Inhalte aus dem Folder 100x210 v1
   ========================================================================== */

/* ---------- Fonts (Brandboard: Thierry Leonie HL / Montserrat Fließtext) --- */
@font-face {
  font-family: "Thierry Leonie";
  src: url("../fonts/ThierryLeonie-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens -------------------------------------------------------- */
:root {
  /* Farbpalette Brandboard */
  --rot: #e44026;
  --orange: #ed7a45;
  --creme: #f8ece0;
  --navy: #232c53;
  --schwarz: #031210;
  --wein: #7d2542;

  --creme-2: #fdf7f1;
  --creme-3: #f1ded0;
  --navy-70: rgba(35, 44, 83, 0.7);
  --navy-45: rgba(35, 44, 83, 0.45);

  --bg: var(--creme);
  --ink: var(--navy);

  --font-hl: "Thierry Leonie", "Arial Black", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1240px;
  --wrap-narrow: 880px;
  --gutter: clamp(1.15rem, 4vw, 3rem);

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 42px;

  --shadow-s: 0 2px 10px rgba(3, 18, 16, 0.07);
  --shadow-m: 0 14px 40px -18px rgba(3, 18, 16, 0.35);
  --shadow-l: 0 34px 80px -34px rgba(3, 18, 16, 0.55);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

  --header-h: 100px;
}

/* ---------- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 14px);
  /* `clip` statt `hidden`: verhindert das seitliche Wischen, macht das Element
     aber NICHT zum Scroll-Container – sonst würde der sticky Header brechen. */
  overflow-x: clip;
  overscroll-behavior-x: none;
  width: 100%;
  max-width: 100%;
}
body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overscroll-behavior-x: none;
  width: 100%;
  max-width: 100%;
  position: relative;
  touch-action: pan-y pinch-zoom;   /* kein seitliches Wischen, Zoom bleibt erlaubt */
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Typo ---------------------------------------------------------- */
.hl, h1, h2, h3, .pkg__name, .step__no, .btn, .eyebrow, .stat__value {
  font-family: var(--font-hl);
  font-weight: 400;
  text-transform: uppercase;      /* Brandboard: nur Versalien */
  letter-spacing: 0.1em;          /* Brandboard: Laufweite +100 */
  line-height: 1.1;
}
h1 { line-height: 1.16; }   /* Thierry Leonie setzt Umlaute hoch – braucht Luft */
h2 { line-height: 1.1; }
h1 { font-size: clamp(2.6rem, 1.1rem + 6.4vw, 6.1rem); }
h2 { font-size: clamp(1.85rem, 1.05rem + 2.6vw, 3.3rem); }
h3 { font-size: clamp(1.28rem, 1.05rem + 0.9vw, 1.72rem); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.79rem;
  letter-spacing: 0.19em;
  color: var(--rot);
  text-transform: uppercase;
  line-height: 1.4;
}
.eyebrow--light { color: var(--orange); }
.lead {
  font-size: clamp(1.05rem, 0.98rem + 0.42vw, 1.28rem);
  line-height: 1.62;
  color: var(--navy-70);
  max-width: 62ch;
}
.lead--light { color: rgba(248, 236, 224, 0.82); }
strong, b { font-weight: 700; }
.u-rot { color: var(--rot); }
.u-orange { color: var(--orange); }
.u-creme { color: var(--creme); }

/* ---------- Layout -------------------------------------------------------- */
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - var(--gutter) * 2, var(--wrap-narrow)); margin-inline: auto; }
section { position: relative; }
.section { padding-block: clamp(4.2rem, 2rem + 8vw, 8.5rem); }
.section--tight { padding-block: clamp(3rem, 1.6rem + 5vw, 5.5rem); }
.section--navy { background: var(--navy); color: var(--creme); }
.section--navy .lead { color: rgba(248, 236, 224, 0.78); }
/* dunkle Sektion in Bordeaux statt Navy – gleiche Textregeln */
.section--wein { background: var(--wein); }
.section--creme2 { background: var(--creme-2); }
.section__head { max-width: 44rem; margin-bottom: clamp(2.2rem, 1rem + 3vw, 3.6rem); }
.section__head--center { max-width: 52rem; margin-inline: auto; text-align: center; }
.section__head .eyebrow { margin-bottom: 0.85rem; display: block; }
.section__head .lead { margin-top: 1.15rem; }
.section__head--center .lead { margin-inline: auto; }

/* Papierkorn — gibt der Fläche Textur wie im Print-Folder */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  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.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  --btn-bg: var(--rot);
  --btn-ink: var(--creme);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1.02em 1.7em 0.94em;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.08rem);
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 0;
  /* Sticker-Form aus dem Brandboard: drei Ecken gerundet (37 % der Höhe), unten links eckig */
  border-radius: 1.15em 1.15em 1.15em 0;
  cursor: pointer;
  text-align: center;
  transition: transform 0.32s var(--ease-spring),
    background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
  box-shadow: none;   /* Buttons bewusst flach – wie die Marken-Sticker */
  will-change: transform;
}
.btn:hover { transform: translateY(-3px) rotate(-0.6deg) scale(1.02); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn--navy { --btn-bg: var(--navy); --btn-ink: var(--creme); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-ink: var(--creme);
  border: 2px solid rgba(248, 236, 224, 0.55);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(248, 236, 224, 0.14); border-color: var(--creme); box-shadow: none; }
.btn--ghost-dark { --btn-bg: transparent; --btn-ink: var(--navy); border: 2px solid rgba(35, 44, 83, 0.3); box-shadow: none; }
.btn--ghost-dark:hover { background: rgba(35, 44, 83, 0.07); border-color: var(--navy); box-shadow: none; }
.btn--wa { --btn-bg: #25d366; --btn-ink: #06331a; }
.btn--sm { padding: 0.78em 1.25em 0.72em; font-size: 0.86rem; }
.btn--block { width: 100%; }
.btn__ico { width: 1.15em; height: 1.15em; flex: none; }

/* Video anstelle eines Bildes – füllt seinen Rahmen wie ein Foto */
video.fill { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Sticker (Brandboard „Elemente") ------------------------------- */
/* Marken-Sticker bewusst ohne Schatten – flach, wie im Brandboard */
.sticker { display: block; height: auto; }
.sticker--float { position: absolute; z-index: 3; pointer-events: none; will-change: transform; }

/* ---------- Header -------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--wein);
  transition: background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.header--stuck {
  background: rgba(125, 37, 66, 0.95);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 30px -22px rgba(3, 18, 16, 0.7);
}
.header__inner { display: flex; align-items: center; gap: 1.5rem; }
.header__logo { display: block; flex: none; transition: transform 0.3s var(--ease-spring); }
.header__logo img { height: 74px; width: auto; transition: height 0.35s var(--ease-out); }
.header--stuck .header__logo img { height: 62px; }
.header__logo:hover { transform: rotate(-2deg) scale(1.04); }
.nav { margin-left: auto; display: flex; gap: clamp(0.8rem, 1.6vw, 1.9rem); align-items: center; }
.nav a {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--creme);
  position: relative;
  padding: 0.35rem 0;
  transition: color 0.25s var(--ease-out);
}
.nav a:hover { color: var(--orange); }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--orange);
  transition: right 0.35s var(--ease-out);
}
.nav a:hover::after { right: 0; }
.header .btn { flex: none; }

/* ---------- Burger + mobiles Menü ---------------------------------------- */
/* Balken wie mit dem Marker gezogen: unterschiedlich lang, leicht schief,
   ungleichmäßig gerundet – dieselbe Handschrift wie die Marken-Sticker */
.burger {
  display: none;
  width: 48px; height: 48px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 51;
  flex: none;
  -webkit-tap-highlight-color: transparent;
}
.burger span {
  position: absolute;
  left: 50%;
  height: 4px;
  background: var(--creme);
  border-radius: 4px 6px 5px 3px;
  transform-origin: center;
  /* gleiche Bewegung in beide Richtungen */
  transition: transform 0.45s var(--ease-spring), width 0.4s var(--ease-spring),
    opacity 0.2s var(--ease-out), background-color 0.3s var(--ease-out);
}
.burger span:nth-child(1) { width: 28px; top: 15px; transform: translateX(-50%) rotate(-1.6deg); }
.burger span:nth-child(2) { width: 21px; top: 23px; transform: translateX(-50%) rotate(1.2deg); }
.burger span:nth-child(3) { width: 26px; top: 31px; transform: translateX(-50%) rotate(-0.8deg); }
.burger:active span:nth-child(2) { width: 28px; }

.mnav-open .burger span { background: var(--creme); }
.mnav-open .burger span:nth-child(1) { width: 29px; transform: translateX(-50%) translateY(8px) rotate(45deg); }
.mnav-open .burger span:nth-child(2) { opacity: 0; transform: translateX(-50%) scaleX(0.2); }
.mnav-open .burger span:nth-child(3) { width: 29px; transform: translateX(-50%) translateY(-8px) rotate(-45deg); }

.mnav {
  position: fixed;
  inset: 0;
  height: 100svh;
  z-index: 65;
  background: var(--navy);
  padding: calc((var(--header-h) - 74px) / 2) var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  overflow-y: auto;
  overscroll-behavior: contain;   /* fängt das Scrollen im Overlay ab */
  visibility: hidden;
  /* Kreis-Enthüllung vom Burger aus. Schließen läuft exakt gespiegelt:
     gleiche Dauer, gespiegelte Beschleunigungskurve. */
  clip-path: circle(0% at calc(100% - 42px) 40px);
  transition: clip-path 0.6s cubic-bezier(0.8, 0, 0.34, 1), visibility 0.6s;
}
.mnav-open .mnav {
  visibility: visible;
  clip-path: circle(150% at calc(100% - 42px) 40px);
  transition: clip-path 0.6s cubic-bezier(0.66, 0, 0.2, 1), visibility 0.6s;
}

/* Inhalte kommen gestaffelt nach, sobald die Fläche offen ist */
.mnav__links a,
.mnav__cta > *,
.mnav__contact a,
.mnav__sticker {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
.mnav-open .mnav__links a,
.mnav-open .mnav__cta > *,
.mnav-open .mnav__contact a,
.mnav-open .mnav__sticker { opacity: 1; transform: none; }
/* Öffnen: von oben nach unten */
.mnav-open .mnav__links a:nth-child(1) { transition-delay: 0.18s; }
.mnav-open .mnav__links a:nth-child(2) { transition-delay: 0.24s; }
.mnav-open .mnav__links a:nth-child(3) { transition-delay: 0.30s; }
.mnav-open .mnav__links a:nth-child(4) { transition-delay: 0.36s; }
.mnav-open .mnav__links a:nth-child(5) { transition-delay: 0.42s; }
.mnav-open .mnav__cta > *:nth-child(1) { transition-delay: 0.48s; }
.mnav-open .mnav__cta > *:nth-child(2) { transition-delay: 0.54s; }
.mnav-open .mnav__contact a:nth-child(1) { transition-delay: 0.58s; }
.mnav-open .mnav__contact a:nth-child(2) { transition-delay: 0.62s; }
.mnav-open .mnav__sticker { transition-delay: 0.66s; }

/* Schließen: exakt umgekehrte Reihenfolge, unten zuerst */
.mnav__links a:nth-child(1) { transition-delay: 0.48s; }
.mnav__links a:nth-child(2) { transition-delay: 0.42s; }
.mnav__links a:nth-child(3) { transition-delay: 0.36s; }
.mnav__links a:nth-child(4) { transition-delay: 0.30s; }
.mnav__links a:nth-child(5) { transition-delay: 0.24s; }
.mnav__cta > *:nth-child(1) { transition-delay: 0.18s; }
.mnav__cta > *:nth-child(2) { transition-delay: 0.12s; }
.mnav__contact a:nth-child(1) { transition-delay: 0.08s; }
.mnav__contact a:nth-child(2) { transition-delay: 0.04s; }
.mnav__sticker { transition-delay: 0.00s; }
/* Das Overlay legt sich über ALLES, auch über die Kopfzeile – die Welle läuft
   dadurch über die ganze Seite und nicht unter dem Balken durch.
   Logo und Schließen-Kreuz bringt das Menü deshalb selbst mit. */
/* Der Kopfbereich wird NICHT eingeblendet und NICHT versetzt: Das Logo sitzt
   pixelgenau dort, wo es auch im Header steht – die Welle deckt es einfach auf,
   dadurch wirkt es fixiert statt hereinfliegend. */
.mnav__top {
  opacity: 1;
  transform: none;
  transition: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.4rem, 4vw, 2.6rem);
}
.mnav__logo { height: 74px; width: auto; }
.mnav__close {
  width: 48px; height: 48px;
  flex: none;
  border: 0;
  background: transparent;
  color: var(--creme);
  display: grid;
  place-items: center;
  cursor: pointer;
  margin-right: -12px;
  transition: transform 0.35s var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.mnav__close svg { width: 26px; height: 26px; }
.mnav__close:hover, .mnav__close:focus-visible { transform: rotate(90deg); }
@media (max-width: 620px) {
  .mnav__logo { height: 58px; }
  .mnav { padding-top: calc((var(--header-h) - 58px) / 2); }
}
.mnav__links { display: grid; gap: 0.2rem; }
.mnav__links a {
  font-family: var(--font-hl);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: clamp(1.6rem, 1.1rem + 3.4vw, 2.4rem);
  color: var(--creme);
  padding: 0.35rem 0;
  /* muss opacity und transform mitnehmen, sonst überschreibt diese Regel die
     Staffelung und die Links springen statt einzublenden */
  transition: color 0.25s var(--ease-out),
              opacity 0.4s var(--ease-out),
              transform 0.5s var(--ease-out);
}
.mnav__links a:active, .mnav__links a:focus-visible { color: var(--orange); }
.mnav__cta { display: grid; gap: 0.6rem; margin-top: auto; }
.mnav__contact { display: grid; gap: 0.6rem; font-size: 0.92rem; color: rgba(248, 236, 224, 0.8); }
.mnav__contact a { display: flex; align-items: center; gap: 0.6rem; }
.mnav__contact svg { width: 18px; height: 18px; color: var(--orange); flex: none; }
.mnav__sticker { width: 150px; margin-top: 0.4rem; }

@media (max-width: 1000px) {
  .nav { display: none; }
  .burger { display: block; margin-left: auto; }
  .header__cta { margin-left: 0; }
}
@media (max-width: 560px) { .header__cta { display: none; } }

/* Scroll-Fortschritt */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--rot), var(--orange));
  z-index: 70;
  will-change: transform;
}

/* ---------- Hero ---------------------------------------------------------- */
.hero {
  position: relative;
  /* so hoch, dass Header + Hero + Laufband exakt den ersten Bildschirm füllen */
  min-height: calc(100svh - var(--header-h) - var(--marquee-h, 76px));
  display: flex;
  align-items: center;
  padding-block: clamp(3.2rem, 2rem + 6vw, 5.5rem);
  overflow: clip;
  isolation: isolate;
  background: var(--navy);
}
.hero__media { position: absolute; inset: -8% 0 -8%; z-index: 0; will-change: transform; }
.hero__media > * { position: absolute; inset: 0; }
.hero__media video, .hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 32%;
}
/* Das Video liegt über dem Foto und blendet weich auf, sobald es läuft.
   Ohne Quelle bleibt es transparent, dann steht das Foto darunter. */
.hero__media video { z-index: 2; opacity: 0; transition: opacity 1s var(--ease-out); }
.hero__media video.is-live { opacity: 1; }
.hero__media img { z-index: 1; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(3, 18, 16, 0.55) 0%, rgba(3, 18, 16, 0.12) 30%, rgba(35, 44, 83, 0.38) 70%, rgba(35, 44, 83, 0.88) 100%),
    linear-gradient(100deg, rgba(35, 44, 83, 0.82) 0%, rgba(35, 44, 83, 0.38) 42%, rgba(35, 44, 83, 0.04) 68%);
}
.hero__inner { position: relative; z-index: 4; color: var(--creme); }
.hero__grid { display: grid; gap: clamp(1.2rem, 2.2vw, 2.2rem); max-width: min(100%, 70rem); }
.hero h1 { font-size: clamp(1.95rem, 0.9rem + 5.2vw, 4.8rem); }
/* Zweitrangige Textteile erst ab Tablet zeigen – hält den Hero mobil kompakt */
.only-md { display: none; }
@media (min-width: 700px) { .only-md { display: inline; } }

/* Für Screenreader und Text-Extraktoren sichtbar, optisch nicht vorhanden.
   Trägt die Paketnamen, die sonst nur als Grafik existieren.               */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 1100px) { .hero h1 .l { white-space: nowrap; } }
.hero h1 .l { display: block; }
.hero h1 .l:last-child { color: var(--orange); }
.hero__sub { max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.hero__note { font-size: 0.83rem; color: rgba(248, 236, 224, 0.68); display: flex; align-items: center; gap: 0.45rem; }

.trustbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
  align-items: center;
  padding-top: 0.6rem;
}
.trust {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.83rem;
  font-weight: 600;
  color: rgba(248, 236, 224, 0.9);
}
.trust svg { width: 17px; height: 17px; flex: none; color: var(--orange); }

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 5;
  display: grid;
  place-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(248, 236, 224, 0.65);
}
.hero__scroll span:last-child {
  width: 1px; height: 40px;
  background: linear-gradient(var(--orange), transparent);
  animation: scrolldown 1.9s var(--ease-out) infinite;
}
@keyframes scrolldown { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 46%, 100% { transform: scaleY(0); transform-origin: bottom; } }

/* SERVAS oben, FESCH! weiter unten – beide rechts neben der Headline */
.hero .sticker--1 { top: 19%; right: 14%; width: clamp(105px, 11vw, 175px); }
.hero .sticker--2 { bottom: 33%; right: 21%; width: clamp(120px, 13vw, 190px); }
.hero .sticker--3 { display: none; }
@media (max-width: 900px) {
  .hero .sticker--1 { top: auto; bottom: 9%; right: 4%; width: 132px; }
  .hero .sticker--2 { display: none; }
}
@media (max-width: 620px) {
  :root { --header-h: 80px; }
  /* Sticker nach unten rechts, damit er die Eyebrow-Zeile nicht überdeckt */
  .hero .sticker--1 { top: auto; bottom: 7%; right: 3%; width: 112px; }
  .hero__grid { gap: 1.1rem; }
  .eyebrow { font-size: 0.72rem; letter-spacing: 0.16em; }
  .hero .lead { font-size: 1rem; }
  .header__logo img { height: 58px; }
  .header--stuck .header__logo img { height: 52px; }
  .hero { padding-block: 2.2rem 3rem; }   /* Höhe: voller erster Bildschirm, siehe .hero oben */
  .hero__scroll { display: none; }
  .trustbar { gap: 0.35rem 1rem; }
  .trust { font-size: 0.76rem; }
}

/* ---------- Marquee ------------------------------------------------------- */
.marquee {
  overflow: hidden;
  background: var(--rot);
  padding-block: 0.75rem;
  position: relative;
  z-index: 5;
}
.marquee__track { display: flex; width: max-content; will-change: transform; animation: slide 34s linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-hl);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: clamp(1.05rem, 0.9rem + 0.9vw, 1.9rem);
  color: var(--creme);
  padding-inline: 1.1rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  white-space: nowrap;
}
.marquee__item svg { width: 0.7em; height: 0.7em; color: var(--navy); flex: none; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Kollage (Fotos + laufender Clip) ------------------------------ */
.warum-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 2rem + 3vw, 5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.warum-text { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); max-width: 34rem; }

/* Prinzip & Handschrift – aufgeklebte Zettel mit Sticker-Etikett */
.statement {
  position: relative;
  border-radius: 1.15em 1.15em 1.15em 0;
  padding: clamp(1.7rem, 1.3rem + 1vw, 2.2rem) clamp(1.3rem, 1rem + 1vw, 1.9rem) clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  transition: transform 0.45s var(--ease-spring);
}
.statement p {
  font-style: italic;
  font-size: clamp(0.97rem, 0.93rem + 0.2vw, 1.06rem);
  line-height: 1.55;
  color: var(--navy);
}
.statement__tag {
  position: absolute;
  top: -0.8rem;
  left: clamp(1rem, 2vw, 1.6rem);
  font-family: var(--font-hl);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: clamp(0.76rem, 0.7rem + 0.25vw, 0.92rem);
  line-height: 1;
  color: var(--creme);
  padding: 0.55rem 0.85rem 0.45rem;
  border-radius: 0.8em 0.8em 0.8em 0;
  white-space: nowrap;
}
.statement--prinzip { background: #fff; transform: rotate(-1.2deg); }
.statement--prinzip .statement__tag { background: var(--orange); transform: rotate(-1.6deg); }
.statement--handschrift { background: var(--creme-3); transform: rotate(0.9deg); }
.statement--handschrift .statement__tag { background: var(--navy); transform: rotate(1.4deg); }
.statement:hover { transform: rotate(0deg) scale(1.015); }
@media (max-width: 420px) {
  .statement__tag { white-space: normal; max-width: calc(100% - 2rem); }
}
@media (max-width: 900px) {
  .warum-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .warum-text { max-width: none; }
}

.collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  aspect-ratio: 1 / 0.94;
}
.collage__it {
  position: relative;
  overflow: hidden;
  border: 9px solid #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-m);
  will-change: transform;
}
.collage__it > img,
.collage__it > video { width: 100%; height: 100%; object-fit: cover; }
.collage__it--a { grid-area: 1 / 1 / 8 / 10;  transform: rotate(-2.2deg); z-index: 1; }
.collage__it--b { grid-area: 4 / 7 / 13 / 13; transform: rotate(2.6deg);  z-index: 3; border-radius: 26px; }
.collage__it--c { grid-area: 7 / 1 / 12 / 6;  transform: rotate(3.4deg);  z-index: 2; }

/* „Läuft."-Marker am Clip */
.collage__tag {
  position: absolute;
  left: 0.7rem; bottom: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--rot);
  color: var(--creme);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32rem 0.65rem;
  border-radius: 99px;
}
.collage__tag::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--creme);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }

.collage__sticker {
  position: absolute;
  left: -5%; bottom: -4%;
  width: clamp(115px, 26%, 195px);
  z-index: 4;
  pointer-events: none;
  will-change: transform;
}
/* gestapelt: etwas Luft, damit Drehung und Sticker nicht am Rand abgeschnitten werden */
@media (max-width: 900px) {
  .collage { width: 88%; margin-inline: auto; }
}
@media (max-width: 560px) {
  .collage { aspect-ratio: 1 / 1.02; }
  .collage__it { border-width: 6px; }
  .collage__sticker { left: -4%; width: 118px; }
}

/* ---------- Problem / Versprechen ----------------------------------------- */
/* kompakte Einwand-Punkte im Handschrift-Block */
.promise__top {
  display: grid;
  grid-template-columns: 1.5fr 0.85fr;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
  position: relative;
}
.promise__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2.4vw, 2.4rem);
  margin-top: clamp(1.3rem, 2vw, 1.9rem);
  padding-top: clamp(1.3rem, 2vw, 1.9rem);
  border-top: 1px solid rgba(248, 236, 224, 0.18);
  position: relative;
}
.ppoint { display: grid; grid-template-columns: 34px 1fr; gap: 0.8rem; align-items: start; }
.ppoint__ico {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(237, 122, 69, 0.2);
  color: var(--orange);
  margin-top: 2px;
}
.ppoint__ico svg { width: 18px; height: 18px; }
.ppoint h3 {
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  line-height: 1.28;
  color: var(--creme);
  margin-bottom: 0.3rem;
}
.ppoint p { font-size: 0.87rem; line-height: 1.5; color: rgba(248, 236, 224, 0.72); }
@media (max-width: 860px) {
  .promise__top { grid-template-columns: 1fr; }
  .promise__points { grid-template-columns: 1fr; gap: 1.1rem; }
}

.promise {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3.4rem);
  background: var(--navy);
  color: var(--creme);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 1rem + 2vw, 2.6rem) clamp(1.6rem, 1rem + 2.4vw, 3rem);
  position: relative;
  overflow: hidden;
}
.promise::before {
  content: "";
  position: absolute;
  inset: auto -12% -60% auto;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(237, 122, 69, 0.4), transparent 62%);
}
.promise__q {
  font-family: var(--font-hl);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1.05rem, 0.85rem + 0.95vw, 1.65rem);
  line-height: 1.2;
  position: relative;
  margin-top: 0.7rem;
}
.promise__sig { position: relative; }
.promise__sig img { width: 100%; max-width: 400px; margin-inline: auto; }
@media (max-width: 780px) { .promise { grid-template-columns: 1fr; } }

/* ---------- Stat-Reihe ---------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(1rem, 2vw, 2rem); text-align: center; }
.stat__value { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem); color: var(--rot); display: block; }
.stat__label { font-size: 0.83rem; font-weight: 600; color: var(--navy-70); letter-spacing: 0.02em; margin-top: 0.35rem; }
.section--navy .stat__value { color: var(--orange); }
.section--navy .stat__label { color: rgba(248, 236, 224, 0.7); }

/* ---------- Video-Testimonials -------------------------------------------- */
.vids {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, 2vw, 1.9rem);
  max-width: 1020px;
  margin-inline: auto;
}
.vid {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: var(--navy);
  cursor: pointer;
  border: 0; padding: 0;
  width: 100%;
  display: block;
  text-align: left;
  box-shadow: var(--shadow-m);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
  will-change: transform;
}
.vid:hover { transform: translateY(-8px) scale(1.012); box-shadow: var(--shadow-l); }
.vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out), filter 0.6s var(--ease-out); }
.vid:hover img { transform: scale(1.07); }
.vid__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 18, 16, 0.45) 0%, transparent 32%, rgba(3, 18, 16, 0.15) 55%, rgba(3, 18, 16, 0.88) 100%); }
.vid__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--rot);
  display: grid; place-items: center;
  color: var(--creme);
  box-shadow: 0 12px 30px -8px rgba(3, 18, 16, 0.6);
  transition: transform 0.4s var(--ease-spring), background-color 0.3s;
}
.vid__play svg { width: 26px; height: 26px; margin-left: 3px; }
.vid:hover .vid__play { transform: translate(-50%, -50%) scale(1.12); background: var(--orange); }
.vid__play::after {
  content: "";
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(248, 236, 224, 0.55);
  animation: ring 2.6s var(--ease-out) infinite;
}
@keyframes ring { 0% { transform: scale(0.85); opacity: 0.9; } 70%, 100% { transform: scale(1.25); opacity: 0; } }
.vid__body { position: absolute; inset: auto 0 0 0; padding: 1.15rem 1.25rem 1.3rem; color: var(--creme); }
.vid__quote { font-size: 0.97rem; line-height: 1.45; font-weight: 500; }
.vid__meta { margin-top: 0.6rem; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--orange); }
.vid__dur {
  position: absolute; top: 0.9rem; right: 0.9rem;
  background: rgba(3, 18, 16, 0.6);
  backdrop-filter: blur(6px);
  color: var(--creme);
  font-size: 0.7rem; font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 99px;
}
.chip-ph {
  position: absolute; top: 0.9rem; left: 0.9rem;
  z-index: 4;
  background: var(--rot);
  color: var(--creme);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.32rem 0.6rem;
  border-radius: 99px;
}
.stars { display: inline-flex; gap: 2px; color: var(--orange); }
.stars svg { width: 15px; height: 15px; }

/* ---------- WhatsApp ------------------------------------------------------ */
.wa-band { background: var(--creme-3); position: relative; overflow: hidden; }
.wa-scroller {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  justify-content: safe center;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* volle Breite, aber mit demselben Seitenrand wie der Rest der Seite */
  margin-inline: calc(50% - 50vw);
  padding: 0.6rem max(var(--gutter), calc(50vw - var(--wrap) / 2)) 1.6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--rot) transparent;
}
.wa-scroller::-webkit-scrollbar { height: 8px; }
.wa-scroller::-webkit-scrollbar-thumb { background: var(--rot); border-radius: 99px; }
.wa-scroller::-webkit-scrollbar-track { background: rgba(35, 44, 83, 0.1); border-radius: 99px; }
.wa {
  flex: 0 0 auto;
  width: clamp(190px, 22vw, 250px);
  scroll-snap-align: center;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 8px solid var(--navy);
  box-shadow: var(--shadow-m);
  cursor: zoom-in;
  position: relative;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
  will-change: transform;
}
.wa:nth-child(odd) { transform: rotate(-1.4deg); }
.wa:nth-child(even) { transform: rotate(1.2deg); }
.wa:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); box-shadow: var(--shadow-l); z-index: 2; }
.wa img { width: 100%; aspect-ratio: 19 / 32; object-fit: cover; }
.wa-hint { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--navy-70); font-weight: 600; margin-top: 0.4rem; }
.wa-hint svg { width: 16px; height: 16px; }

/* ---------- Pakete -------------------------------------------------------- */
/* stretch: alle drei Karten gleich hoch, CTA-Buttons auf einer Linie */
.pkgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.1rem, 2vw, 1.8rem); align-items: stretch; }
.pkg {
  background: var(--creme-2);
  border: 2px solid rgba(35, 44, 83, 0.12);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.4s;
  will-change: transform;
}
.pkg:hover { transform: translateY(-8px); box-shadow: var(--shadow-l); border-color: rgba(228, 64, 38, 0.35); }
/* Empfehlungs-Paket: weißer Grund hebt es aus der cremefarbenen Fläche heraus */
.pkg--hero { border-color: var(--rot); box-shadow: var(--shadow-m); background: #fff; }
.pkg__flag {
  position: absolute; top: 1.05rem; left: 1rem;
  background: var(--rot);
  color: var(--creme);
  font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  z-index: 4;
}
.pkg__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.pkg__media img,
.pkg__media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.pkg:hover .pkg__media img,
.pkg:hover .pkg__media video { transform: scale(1.06); }
.pkg__body {
  padding: clamp(1.2rem, 0.9rem + 0.9vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
  position: relative;   /* muss über .pkg__media liegen, sonst wird der Sticker überdeckt */
  z-index: 2;
}
/* Der Paket-Sticker ist die Überschrift – er ragt ins Bild, genau wie im gedruckten Folder */
.pkg__name {
  margin-top: clamp(-3.6rem, -1.4vw - 2.2rem, -2.7rem);
  height: 3.4rem;
  display: flex;
  align-items: flex-end;
  line-height: 0;
}
.pkg__name .pkg__badge {
  height: clamp(38px, 3.4vw, 47px);
  width: auto;
  max-width: 100%;
  transition: transform 0.45s var(--ease-spring);
}
.pkg:hover .pkg__name .pkg__badge { transform: rotate(-2deg) scale(1.03); }
.pkg__type { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rot); }
.pkg__desc { font-size: 0.95rem; color: var(--navy-70); }
/* hält Preis- und Leistungsblock der drei Karten auf einer Höhe */
@media (min-width: 940px) { .pkg__desc { min-height: 6.7em; } .pkg__type { min-height: 3.4em; } }
.pkg__price { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.pkg__price b { font-family: var(--font-hl); font-weight: 400; letter-spacing: 0.04em; font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); color: var(--rot); }
.pkg__price s { color: var(--navy-45); font-size: 0.98rem; font-weight: 600; }
.pkg__pricenote { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--navy-45); }
.pkg__list { display: grid; gap: 0.4rem; font-size: 0.9rem; line-height: 1.45; }
.pkg__list li { display: grid; grid-template-columns: 18px 1fr; gap: 0.5rem; align-items: start; }
.pkg__list svg { width: 16px; height: 16px; color: var(--rot); margin-top: 3px; }
.pkg__more { border-top: 1px dashed rgba(35, 44, 83, 0.22); padding-top: 0.9rem; }
.pkg__more summary {
  cursor: pointer;
  font-size: 0.79rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy); list-style: none;
  display: flex; align-items: center; gap: 0.5rem;
}
.pkg__more summary::-webkit-details-marker { display: none; }
.pkg__more summary::after { content: "+"; margin-left: auto; font-size: 1.2rem; line-height: 1; transition: transform 0.3s var(--ease-out); }
.pkg__more[open] summary::after { transform: rotate(45deg); }
.pkg__more ul { margin-top: 0.75rem; display: grid; gap: 0.4rem; font-size: 0.9rem; color: var(--navy-70); }
.pkg__more li::before { content: "+ "; color: var(--orange); font-weight: 800; }
.pkg__cta { margin-top: auto; padding-top: 0.4rem; }
.pkg-note { margin-top: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.pkg-note div { background: rgba(35, 44, 83, 0.06); border-radius: var(--r-md); padding: 1rem 1.2rem; font-size: 0.87rem; color: var(--navy-70); }
.pkg-note b { display: block; color: var(--navy); font-weight: 800; letter-spacing: 0.02em; margin-bottom: 0.2rem; }

/* ---------- Ablauf: Zickzack mit handgezeichneten Pfeilen ----------------- */
/* links Foto + Prinzip, rechts der Zickzack-Ablauf */
.ablauf-grid {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.steps-side { position: relative; }
.steps-photo { position: relative; }
.steps-side img,
.steps-side video { border-radius: var(--r-xl); width: 100%; display: block; }
.steps-side .img-wipe { box-shadow: var(--shadow-l); }
@media (min-width: 901px) {
  .steps-side { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}
@media (max-width: 900px) {
  .ablauf-grid { grid-template-columns: 1fr; gap: 3.5rem; }
}

.flow {
  position: relative;
  max-width: 46rem;
  display: grid;
}
.flow__step { position: relative; max-width: 26rem; }
.flow__step--l { justify-self: start; }
.flow__step--r { justify-self: end; text-align: right; }
.flow__step h3 {
  color: var(--orange);
  letter-spacing: 0.09em;
  margin-bottom: 0.5rem;
}
.flow__no { color: var(--creme); }
.flow__step p { color: rgba(248, 236, 224, 0.78); }
.flow__step--r p { margin-left: auto; }

/* der Pfeil sitzt unter dem Schritt und zeigt zum nächsten */
.flow__arrow {
  display: block;
  width: clamp(74px, 9vw, 120px);
  height: auto;
  color: var(--creme);
  margin-block: clamp(0.4rem, 1vw, 1rem);
  overflow: visible;
}
.flow__arrow--r { margin-left: 55%; }
.flow__arrow--l { margin-right: 55%; margin-left: auto; transform: scaleX(-1); }

/* Pfeil zeichnet sich beim Einblenden */
.flow__ln { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 0.9s var(--ease-out) 0.15s; }
.flow__hd { stroke-dasharray: 70; stroke-dashoffset: 70; transition: stroke-dashoffset 0.45s var(--ease-out) 0.85s; }
.flow__step.is-in .flow__ln,
.flow__step.is-in .flow__hd { stroke-dashoffset: 0; }

.flow__sticker {
  position: absolute;
  right: -34%; bottom: -1rem;
  width: clamp(120px, 18vw, 185px);
  pointer-events: none;
  will-change: transform;
}
.quote-card--center {
  max-width: 44rem;
  margin: clamp(2.5rem, 4vw, 4rem) auto 0;
  text-align: center;
  border-left: 0;
  border-top: 6px solid var(--rot);
}

@media (max-width: 720px) {
  .flow__step { max-width: none; }
  .flow__step--r { text-align: left; }
  .flow__arrow--r { margin-left: 34%; }
  .flow__arrow--l { margin-right: 34%; }
  .flow__sticker { right: -4%; bottom: -2.5rem; width: 132px; }
}

/* ---------- Handschrift / Team -------------------------------------------- */
.hs-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(1.8rem, 4vw, 4rem); align-items: center; }
@media (max-width: 900px) { .hs-grid { grid-template-columns: 1fr; } }
.hs-media { position: relative; }
.hs-media img,
.hs-media video { border-radius: var(--r-xl); box-shadow: var(--shadow-l); width: 100%; display: block; }
.hs-media .hs-media__2 {
  position: absolute;
  right: -6%; bottom: -12%;
  width: 46%;
  border: 8px solid var(--creme);
  border-radius: var(--r-lg);
}
/* gestapelt darf das zweite Bild nicht über den Rand ragen, sonst lässt sich
   die Seite auf dem Handy seitlich schieben */
@media (max-width: 900px) {
  .hs-media .hs-media__2 { right: 0; bottom: -9%; width: 42%; }
}
.hs-media .sticker--float { top: -6%; left: -6%; width: clamp(110px, 16vw, 175px); }
/* Zitatfeld in Markenform: Sticker-Ecken, flach, Überschrift in der Hausschrift */
.quote-card {
  --qc-ink: var(--navy);
  --qc-line: rgba(35, 44, 83, 0.26);
  --qc-label: var(--rot);
  background: transparent;
  border: 2px solid var(--qc-line);
  border-radius: 1.15em 1.15em 1.15em 0;
  padding: 1.15rem 1.4rem 1.25rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--qc-ink);
  box-shadow: none;
}
.section--navy .quote-card {
  --qc-ink: rgba(248, 236, 224, 0.86);
  --qc-line: rgba(248, 236, 224, 0.3);
  --qc-label: var(--orange);
}
.quote-card b {
  display: block;
  font-family: var(--font-hl);
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--qc-label);
  margin-bottom: 0.55rem;
}
.hs-quotes { display: grid; gap: 1rem; margin-top: 1.6rem; }
.owners { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.6rem; }
.owner { font-size: 0.9rem; }
.owner b { display: block; font-family: var(--font-hl); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 400; font-size: 1.15rem; }
.owner span { color: var(--navy-70); }

/* ---------- Galerie ------------------------------------------------------- */
.gal { overflow: hidden; padding-block: 0.5rem; }
.gal__row { display: flex; gap: clamp(0.7rem, 1.4vw, 1.2rem); width: max-content; will-change: transform; }
.gal__row img,
.gal__row video {
  height: clamp(190px, 26vw, 330px);
  width: auto;
  border-radius: var(--r-md);
  object-fit: cover;
  box-shadow: var(--shadow-s);
  transition: transform 0.5s var(--ease-out), filter 0.5s;
  display: block;
  flex: none;
}
.gal__row img:hover,
.gal__row video:hover { transform: scale(1.03) rotate(-0.7deg); }
.gal__row + .gal__row { margin-top: clamp(0.7rem, 1.4vw, 1.2rem); }

/* ---------- FAQ ----------------------------------------------------------- */
.faq { display: grid; gap: 0.7rem; }
.faq details {
  background: var(--creme-2);
  border: 2px solid rgba(35, 44, 83, 0.1);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.faq details[open] { border-color: rgba(228, 64, 38, 0.4); box-shadow: var(--shadow-s); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 1.3rem;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  margin-left: auto;
  width: 13px; height: 13px;
  flex: none;
  border-right: 3px solid var(--rot);
  border-bottom: 3px solid var(--rot);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.35s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq__body { padding: 0 1.3rem 1.25rem; color: var(--navy-70); max-width: 72ch; }

/* ---------- Formular ------------------------------------------------------ */
.cta-final { position: relative; overflow: hidden; }
.cta-final::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(228, 64, 38, 0.4), transparent 62%);
  pointer-events: none;
}
.form-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; position: relative; z-index: 2; }
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } }
.form {
  background: var(--creme);
  color: var(--navy);
  border-radius: var(--r-xl);
  padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  box-shadow: var(--shadow-l);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
/* Rasterzellen dürfen kleiner werden als ihr Inhalt – sonst schiebt das native
   Datumsfeld (hat eine breite Mindestgröße) die erste Zeile über den Rand. */
.form__row > * { min-width: 0; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 0.35rem; margin-bottom: 0.9rem; min-width: 0; }
.field label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--navy-70); }
.field label b { color: var(--rot); font-weight: 800; margin-right: 0.15em; }
/* zweizeilige Fragen sollen die Felder daneben nicht verschieben */
@media (min-width: 561px) { .form__row .field label { display: block; min-height: 2.5em; } }
.field__hint { font-size: 0.74rem; color: var(--navy-45); }

/* Abschnittstrenner im Formular */
.form__step {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-hl);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 1.05rem;
  color: var(--navy);
  margin: 0.4rem 0 1.1rem;
}
.form__step + * { margin-top: 0; }
.form__step span {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  background: var(--rot);
  color: var(--creme);
  padding: 0.3rem 0.6rem;
  border-radius: 99px;
}
.form__step:not(:first-of-type) { margin-top: 1.6rem; padding-top: 1.5rem; border-top: 2px dashed rgba(35, 44, 83, 0.16); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.82rem 0.95rem;
  border: 2px solid rgba(35, 44, 83, 0.16);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.25s, box-shadow 0.25s;
  font-size: 0.98rem;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  cursor: pointer;
  color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e44026' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 15px;
}
.field select:invalid { color: var(--navy-45); }
.field textarea { min-height: 110px; resize: vertical; }
/* iOS gibt Datumsfeldern eine eigene Mindestbreite und eigenes Innenleben */
.field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  display: block;
}
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--rot);
  box-shadow: 0 0 0 4px rgba(228, 64, 38, 0.14);
}
.form__consent { display: grid; grid-template-columns: 22px 1fr; gap: 0.65rem; font-size: 0.8rem; color: var(--navy-70); margin-block: 0.5rem 1.1rem; }
.form__consent input { width: 20px; height: 20px; accent-color: var(--rot); margin-top: 2px; }
.form__consent a { text-decoration: underline; }
.form__foot { font-size: 0.78rem; color: var(--navy-45); margin-top: 0.85rem; text-align: center; }
/* Spam-Falle unsichtbar, aber ohne Platz außerhalb des Viewports zu erzeugen */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.form__ok {
  display: none;
  background: rgba(37, 211, 102, 0.14);
  border: 2px solid rgba(37, 211, 102, 0.5);
  color: #0f5132;
  border-radius: var(--r-md);
  padding: 1rem 1.2rem;
  font-size: 0.93rem;
  margin-bottom: 1rem;
}
.form.is-sent .form__ok { display: block; }
.contact-list { display: grid; gap: 1rem; margin-top: 1.8rem; }
.contact-list a { display: flex; gap: 0.85rem; align-items: center; font-weight: 600; }
.contact-list svg { width: 20px; height: 20px; color: var(--orange); flex: none; }

/* ---------- Footer -------------------------------------------------------- */
.footer { background: var(--navy); color: rgba(248, 236, 224, 0.72); padding-block: clamp(2.6rem, 2rem + 3vw, 4.2rem) 6.5rem; font-size: 0.88rem; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(1.6rem, 3vw, 3rem); }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
.footer img.logo { width: 190px; height: auto; margin-bottom: 0.9rem; }
.footer__slogan { width: 260px; max-width: 100%; height: auto; margin-bottom: 1.2rem; }
.footer h4 { font-family: var(--font-hl); font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.95rem; color: var(--creme); margin-bottom: 0.9rem; }
.footer a:hover { color: var(--orange); }
.footer ul { display: grid; gap: 0.5rem; }
.footer__legal { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(248, 236, 224, 0.14); display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-size: 0.78rem; color: rgba(248, 236, 224, 0.5); }
.socials { display: flex; gap: 0.7rem; margin-top: 1rem; }
.socials a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(248, 236, 224, 0.1); transition: background-color 0.3s, transform 0.3s var(--ease-spring); }
.socials a:hover { background: var(--rot); transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; color: var(--creme); }

/* ---------- Mobile Sticky CTA --------------------------------------------- */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: none;
  gap: 0.55rem;
  padding: 0.6rem 0.7rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(248, 236, 224, 0.94);
  backdrop-filter: blur(14px);
  border-top: 2px solid rgba(35, 44, 83, 0.14);
  transform: translateY(110%);
  transition: transform 0.45s var(--ease-out);
}
.mobile-cta.is-on { transform: translateY(0); }
.mobile-cta .btn { flex: 1; padding: 0.9em 0.6em 0.84em; font-size: 0.84rem; }
/* Ausgeblendet – mobil übernimmt jetzt die WhatsApp-Bubble. Markup und Logik
   bleiben liegen: zum Zurückholen hier `display: flex` setzen und die
   Footer-Polsterung wieder aktivieren.                                      */
@media (max-width: 780px) { .mobile-cta { display: none; } }

/* ---------- WhatsApp-Bubble -------------------------------------------------
   Der dauerhafte Kontaktpunkt auf allen Breiten – sie hat die mobile
   Sticky-Leiste abgelöst, damit unten nicht zwei grüne Buttons konkurrieren.
   Kein Fremdanbieter, kein Cookie, kein Nachladen: nur der wa.me-Link.       */
.wabub {
  position: fixed;
  right: clamp(1rem, 1.6vw, 1.7rem);
  /* env() hält den Button über dem Home-Indicator moderner iPhones */
  bottom: calc(clamp(1rem, 1.6vw, 1.7rem) + env(safe-area-inset-bottom));
  z-index: 54;                     /* unter Menü (65) und Lightbox (100) */
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.32s var(--ease-out), visibility 0.32s;
}
.wabub.is-on { visibility: visible; opacity: 1; }

/* Zurücktreten, solange das Anfrageformular im Bild oder die Lightbox offen
   ist – dort steht bereits ein WhatsApp-Button. Das JS nimmt vorher `is-open`
   ab, damit der Teaser die Sichtbarkeit nicht zurückholt.                    */
/* Bewusst über die Klasse `lb-open` statt über `body:has(#lightbox.is-open)`:
   Ein Selektor, den ein Browser nicht parsen kann, macht die GESAMTE
   Selektorliste ungültig – ohne :has()-Unterstützung wäre damit auch das
   Zurücktreten vorm Formular ausgefallen. Die Klasse setzt die Lightbox.     */
.wabub.is-on.is-quiet,
body.lb-open .wabub.is-on { visibility: hidden; opacity: 0; }
/* Die Sprechblase setzt weiter unten selbst `visibility: visible` und würde das
   `hidden` des Containers sonst aushebeln – hier explizit nachziehen.        */
.wabub.is-on.is-quiet .wabub__teaser,
body.lb-open .wabub.is-on .wabub__teaser { visibility: hidden; }

/* ---- Runder Button ---- */
.wabub__fab {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  background: #25d366;
  color: #06331a;
  /* Sticker-Logik des Brandboards auf den Kreis übertragen: drei Ecken rund,
     eine eckig – ergibt nebenbei die Silhouette einer Sprechblase. */
  border-radius: 50% 50% 50% 10px;
  box-shadow: var(--shadow-m);
  transform: translateY(18px) scale(0.65);
  transition: transform 0.55s var(--ease-spring), box-shadow 0.3s var(--ease-out);
  will-change: transform;
}
.wabub__fab svg { width: 28px; height: 28px; fill: currentColor; }
.wabub.is-on .wabub__fab { transform: none; }
.wabub.is-on .wabub__fab:hover,
.wabub.is-on .wabub__fab:focus-visible { transform: translateY(-3px) scale(1.06); box-shadow: var(--shadow-l); }

/* Aufmerksamkeits-Punkt: bewusst ohne Zahl – eine „1" würde eine Nachricht
   behaupten, die es nicht gibt. Läuft dreimal und gibt dann Ruhe.           */
.wabub__dot {
  position: absolute;
  top: 1px; right: 1px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--rot);
  border: 2.5px solid var(--creme);
}
.wabub.is-on .wabub__dot { animation: wa-puls 2.6s var(--ease-out) 1s 3; }
@keyframes wa-puls {
  0%, 55%, 100% { transform: scale(1); }
  12% { transform: scale(1.4); }
  24% { transform: scale(1); }
  36% { transform: scale(1.28); }
}

/* ---- Teaser-Sprechblase ---- */
.wabub__teaser {
  position: absolute;              /* nimmt keinen Platz ein, wenn sie zu ist */
  right: 0;
  bottom: calc(100% + 0.85rem);
  /* min() statt fixer Breite: auf schmalen Geräten (320 px) würde die Blase
     sonst über den rechten Rand hinauslaufen und die Seite scrollbar machen. */
  width: min(316px, calc(100vw - 2.5rem));
  padding: 1.05rem 1.15rem 1.1rem;
  background: var(--creme-2);
  color: var(--navy);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 6px;
  box-shadow: var(--shadow-l);
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  transform-origin: 100% 100%;
  transition: transform 0.5s var(--ease-spring), opacity 0.35s var(--ease-out), visibility 0.5s;
}
.wabub.is-open .wabub__teaser { visibility: visible; opacity: 1; transform: none; }

.wabub__head { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 0.85rem; }
.wabub__ava { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--creme-3); padding: 6px; }
.wabub__txt { font-size: 0.88rem; line-height: 1.45; color: var(--navy-70); padding-right: 1.1rem; }
.wabub__txt strong { color: var(--navy); font-weight: 700; }
/* navy-70 statt navy-45: bei 0.72rem gilt die normale AA-Grenze von 4.5:1,
   navy-45 auf creme-2 erreicht nur 2.56:1, navy-70 kommt auf 5.08:1.        */
.wabub__meta { margin-top: 0.6rem; font-size: 0.72rem; letter-spacing: 0.03em; color: var(--navy-70); text-align: center; }

.wabub__close {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  /* Das X ist bei transparentem Grund das einzige erkennbare Merkmal des
     Bedienelements – WCAG 1.4.11 verlangt dafür 3:1. navy-70 liefert 5.08:1. */
  color: var(--navy-70);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.wabub__close:hover { background: rgba(35, 44, 83, 0.09); color: var(--navy); }
.wabub__close svg { width: 13px; height: 13px; }
/* Am Handy gibt es keinen Hover-Zustand als Hilfe – dort braucht das × eine
   Trefferfläche, die man mit dem Daumen sicher erwischt.                    */
@media (max-width: 780px) {
  .wabub__close { width: 38px; height: 38px; top: 0.3rem; right: 0.3rem; }
  .wabub__close svg { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .wabub__fab, .wabub__teaser { transform: none !important; transition: opacity 0.2s linear, visibility 0.2s; }
  .wabub__dot { animation: none !important; }
}

/* ---------- Lightbox ------------------------------------------------------ */
.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(3, 18, 16, 0.92);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb__inner { max-width: min(96vw, 1100px); max-height: 86svh; transform: scale(0.94); transition: transform 0.4s var(--ease-spring); }
.lb.is-open .lb__inner { transform: scale(1); }
.lb video, .lb img { max-height: 86svh; width: auto; max-width: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-l); }
.lb__close {
  position: absolute;
  top: clamp(0.7rem, 2vw, 1.6rem); right: clamp(0.7rem, 2vw, 1.6rem);
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--rot);
  color: var(--creme);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform 0.3s var(--ease-spring);
}
.lb__close:hover { transform: rotate(90deg) scale(1.06); }
.lb__close svg { width: 20px; height: 20px; }

/* ==========================================================================
   Scroll-Animationen
   ========================================================================== */
.reveal { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out); will-change: opacity, transform; }
.reveal[data-rev="left"] { transform: translate3d(-46px, 0, 0); }
.reveal[data-rev="right"] { transform: translate3d(46px, 0, 0); }
.reveal[data-rev="scale"] { transform: scale(0.9); }
.reveal[data-rev="tilt"] { transform: translate3d(0, 40px, 0) rotate(-2.5deg); }
.reveal[data-rev="blur"] { filter: blur(12px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out); }
/* muss nach den Varianten stehen, sonst gewinnt die Startposition */
.reveal.is-in,
.reveal[data-rev].is-in { opacity: 1; transform: none; filter: none; }

/* Paket-Karten bleiben bewusst leicht schräg – wie hingelegte Fotos */
.pkg.reveal.is-in { transform: rotate(-2.5deg); }
.pkg.reveal.is-in:hover { transform: translateY(-8px) rotate(-2.5deg); }
/* mobil untereinander wirkt die Schräge unruhig – dort stehen sie gerade */
@media (max-width: 700px) {
  .pkg.reveal,
  .pkg.reveal.is-in,
  .pkg.reveal.is-in:hover { transform: none !important; }
}

/* Kaskaden-Effekt für Listen/Grids */
.stagger > * { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.stagger.is-in > * { opacity: 1; transform: none; }
.stagger.is-in > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.is-in > *:nth-child(2) { transition-delay: 0.14s; }
.stagger.is-in > *:nth-child(3) { transition-delay: 0.23s; }
.stagger.is-in > *:nth-child(4) { transition-delay: 0.32s; }
.stagger.is-in > *:nth-child(5) { transition-delay: 0.41s; }
.stagger.is-in > *:nth-child(6) { transition-delay: 0.5s; }
.stagger.is-in > *:nth-child(n + 7) { transition-delay: 0.58s; }

/* Zeilenweiser Headline-Reveal — Padding verhindert, dass Umlaute clippen */
.hl-mask { display: block; overflow: hidden; padding-block: 0.22em; margin-block: -0.22em; }
.hl-mask > .l { display: block; transform: translate3d(0, 115%, 0); transition: transform 1.05s var(--ease-out); }
.is-in .hl-mask > .l, .hl-mask.is-in > .l { transform: none; }
.hl-mask > .l:nth-child(2) { transition-delay: 0.1s; }
.hl-mask > .l:nth-child(3) { transition-delay: 0.2s; }
.hl-mask > .l[style*="--d"] { transition-delay: var(--d); }

/* Bild-Reveal mit Wisch */
.img-wipe { position: relative; overflow: hidden; border-radius: var(--r-xl); }
.img-wipe::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--rot);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 1s var(--ease-out);
  z-index: 2;
}
.img-wipe.is-in::after { transform: scaleX(0); }
.img-wipe img,
.img-wipe video { transform: scale(1.16); transition: transform 1.4s var(--ease-out); }
.img-wipe.is-in img,
.img-wipe.is-in video { transform: scale(1); }

/* Parallax-Container */
[data-para] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .stagger > *, .hl-mask > .l, .img-wipe img { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .pkg.reveal { transform: rotate(-2.5deg) !important; }
  .img-wipe::after { display: none; }
  .marquee__track, .gal__row { animation: none !important; transform: none !important; }
  .hero__scroll span:last-child, .vid__play::after { animation: none !important; }
  [data-para] { transform: none !important; }
  * { scroll-behavior: auto !important; }
}