/* ============================================================
   LaserX Base + Komponenten. Nur var(--lx-*) — keine freien Hexwerte.
   Keine box-shadows (matter Stuck), kein text-shadow, keine Pills,
   kein Glassmorphism, nie ALL-CAPS. Radius max --lx-r-md.
   ============================================================ */

/* ---- Fonts (self-hosted, latin + latin-ext) ---- */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/archivo-v25-latin_latin-ext-700.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/archivo-v25-latin_latin-ext-800.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/caveat-v23-latin_latin-ext-700.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-sans-v4-latin_latin-ext-regular.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/instrument-sans-v4-latin_latin-ext-600.woff2") format("woff2"); }

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--lx-bg);
  color: var(--lx-ink);
  font-family: var(--lx-font-body);
  font-size: var(--lx-text-base);
  line-height: var(--lx-leading-body);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-inline-size: 100%; block-size: auto; }
img { border-radius: var(--lx-r-md); }
input, button, textarea, select { font: inherit; color: inherit; }
:target { scroll-margin-block-start: 6rem; }

/* ---- Typografie ---- */
h1, h2, h3, .lx-display {
  font-family: var(--lx-font-display);
  font-weight: 800;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto; /* greift nur bei langen Komposita auf schmalen Viewports */
}
h1 { font-size: var(--lx-text-h1); line-height: var(--lx-leading-h1); letter-spacing: var(--lx-track-h1); }
h2 { font-size: var(--lx-text-h2); line-height: var(--lx-leading-h2); letter-spacing: var(--lx-track-h2); }
h3 { font-size: var(--lx-text-h3); line-height: var(--lx-leading-h3); letter-spacing: var(--lx-track-h3); font-weight: 700; }
p  { max-inline-size: 65ch; }
.lx-lead { font-size: var(--lx-text-lg); color: var(--lx-ink-soft); }
/* Zonen-Wissen: mehrspaltiger Fließtext über die volle Breite statt halbleerer Spalte */
.lx-deeptext { columns: 2; column-gap: clamp(2rem, 4vw, 4rem); }
.lx-deeptext > p { margin: 0 0 1em; }
.lx-deeptext > p:last-child { margin-block-end: 0; }
.lx-deeptext .lx-lead { font-size: var(--lx-text-base); color: var(--lx-ink-soft); }
@media (max-width: 60rem) { .lx-deeptext { columns: 1; } .lx-deeptext .lx-lead { font-size: var(--lx-text-lg); } }
/* Zitierfähiger Antwortsatz unter H1/H2 (GEO): bewusst unauffällig, KEIN Kasten, keine Farbkante */
.lx-quotable { max-inline-size: 56rem; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); line-height: 1.65; margin-block: 0.4rem 0.6rem; }
.lx-small { font-size: var(--lx-text-sm); }
.lx-fine  { font-size: var(--lx-text-xs); color: var(--lx-ink-soft); }
.lx-mega {
  font-family: var(--lx-font-display); font-weight: 800;
  font-size: var(--lx-text-mega); line-height: 1; letter-spacing: var(--lx-track-h1);
}
.lx-price-accent { color: var(--lx-pink-700); }
a { color: var(--lx-pink-700); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--lx-pink-100); }

/* Label-Betonung: Gewicht + Farbe statt Versalien (nie ALL-CAPS) */
.lx-label { font-weight: 600; font-size: var(--lx-text-sm); color: var(--lx-pink-700); letter-spacing: 0.01em; }
.lx-label--sea { color: var(--lx-sea-700); }

/* ---- Fokus: sichtbar, konsistent ---- */
:focus-visible { outline: 2px solid var(--lx-pink-700); outline-offset: 2px; border-radius: var(--lx-r-sm); }
.lx-dark :focus-visible { outline-color: var(--lx-pink-ondark); }

/* ---- Layout ---- */
.lx-container { inline-size: min(100% - 2 * var(--lx-gutter), var(--lx-container)); margin-inline: auto; }
.lx-container--wide { inline-size: min(100% - 2 * var(--lx-gutter), var(--lx-container-wide)); }
.lx-section { padding-block: var(--lx-space-xl); }
.lx-section--tight { padding-block: var(--lx-space-l); }
.lx-section--alt { background: var(--lx-bg-alt); }
.lx-section--petal { background: var(--lx-pink-100); }
.lx-section--foam { background: var(--lx-sea-100); }

/* Dunkle Sektion: Dämmerung + Korn */
.lx-dark {
  background-color: var(--lx-navy);
  background-image: var(--lx-grain);
  color: var(--lx-text-inv);
  & h1, & h2, & h3 { color: var(--lx-text-inv); }
  & p { color: var(--lx-text-inv-soft); }
  & a { color: var(--lx-pink-ondark); }
  & .lx-accent-sea { color: var(--lx-sea-500); }
  & .lx-accent-peach { color: var(--lx-peach); }
}

/* ---- Horizont-Linie + Sonnenkreis (Markensignatur) ---- */
.lx-horizon { position: relative; block-size: 1px; background: var(--lx-line); border: 0; }
.lx-horizon--sun::after {
  content: ""; position: absolute; inset-inline-end: 12%; inset-block-start: 50%;
  translate: 0 -50%; inline-size: 18px; block-size: 18px; border-radius: 50%;
  background: var(--lx-pink-500);
}
.lx-horizon--sun-peach::after { background: var(--lx-peach); }
/* Dünnes G2-Deko-Band — freistehend zwischen Sektionen, nie an Kartenkanten */
.lx-band { block-size: 3px; background: var(--lx-grad-dusk); border: 0; }

/* ---- Buttons ---- */
.lx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-family: var(--lx-font-display); font-weight: 700;
  font-size: 1.0625rem; letter-spacing: -0.005em;
  line-height: 1.15;
  /* Feste Mindesthöhe statt reiner em-Polsterung: Knöpfe stehen dadurch
     zeilenübergreifend auf derselben Höhe und erfüllen die 48px-Touchgröße. */
  min-block-size: 3rem;
  padding-block: 0.7em; padding-inline: 1.5em;
  border: 0; border-radius: var(--lx-r-md); cursor: pointer;
  text-decoration: none; text-align: center;
  transition: background-color var(--lx-dur-fast) var(--lx-ease),
              border-color var(--lx-dur-fast) var(--lx-ease),
              color var(--lx-dur-fast) var(--lx-ease),
              translate var(--lx-dur-fast) var(--lx-ease);
}
.lx-btn:hover { translate: 0 -1px; }
.lx-btn:active { translate: 0 0; }
/* Sichtbarer Fokus für Tastatur und Screenreader-Navigation. */
.lx-btn:focus-visible {
  outline: 3px solid var(--lx-cta-ring); outline-offset: 3px; translate: 0 0;
}

/* Primär: satte Marken-Rot-Fläche mit Cremeschrift (7,2:1).
   Bewusst ohne Verlauf — ruhige Fläche liest sich schneller und wirkt seriöser. */
.lx-btn--primary { background: var(--lx-cta); color: var(--lx-text-inv); }
.lx-btn--primary:hover, .lx-btn--primary:focus-visible { background: var(--lx-cta-hover); color: var(--lx-text-inv); }

/* Sekundär: Fläche statt Luft, damit die Schrift auf jedem Untergrund sitzt (13,9:1). */
.lx-btn--ghost {
  background: var(--lx-bg); color: var(--lx-ink);
  box-shadow: inset 0 0 0 1.5px var(--lx-ink-soft);
}
.lx-btn--ghost:hover { background: var(--lx-bg-alt); box-shadow: inset 0 0 0 1.5px var(--lx-ink); }
/* Bewusst KEINE eigene Dark-Variante: In Karten, die auf einer dunklen Sektion
   liegen, aber selbst hell sind, stand sonst Cremeschrift auf Cremegrund und der
   Knopf war unsichtbar. Der Geisterknopf bringt seine Fläche jetzt immer mit. */
.lx-dark .lx-btn:focus-visible { outline-color: var(--lx-text-inv); }

/* Ruhige Vertrauens-Variante (Lagoon, 5,7:1) */
.lx-btn--sea { background: var(--lx-sea-700); color: var(--lx-text-inv); }
.lx-btn--sea:hover { background: #0A5A50; }
.lx-btn--big { font-size: var(--lx-text-lg); min-block-size: 3.5rem; padding-block: 0.85em; padding-inline: 1.9em; }

/* ---- Preis-Badge (G1, einmal pro Preissektion) ---- */
.lx-badge {
  display: inline-block; background: var(--lx-grad-cta); color: var(--lx-ink);
  font-weight: 600; font-size: var(--lx-text-sm);
  padding-block: 0.35em; padding-inline: 0.9em; border-radius: var(--lx-r-sm);
}

/* ---- Navigation ---- */
.lx-header {
  position: sticky; inset-block-start: 0; z-index: var(--lx-z-nav);
  background: var(--lx-bg); border-block-end: 1px solid var(--lx-line);
}
.lx-nav { display: flex; align-items: center; gap: var(--lx-space-m); padding-block: 0.75rem; }
.lx-nav__logo {
  font-family: var(--lx-font-display); font-weight: 800; font-size: 1.5rem;
  color: var(--lx-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem;
}
.lx-nav__logo b { color: var(--lx-pink-700); font-weight: 800; }
/* Logo-Sonne: flacher Kreis auf Horizont */
.lx-nav__sun { inline-size: 14px; block-size: 14px; border-radius: 50%;
  background: var(--lx-grad-cta); flex: none; }
.lx-nav__links { display: flex; gap: var(--lx-space-s); list-style: none; padding: 0;
  margin-inline-start: auto; align-items: center; }
.lx-nav__links a { color: var(--lx-ink); text-decoration: none; font-weight: 600; font-size: var(--lx-text-sm); }
.lx-nav__links a:hover, .lx-nav__links a[aria-current="page"] { color: var(--lx-pink-700); }
.lx-nav__toggle { display: none; }
.lx-nav__burger { display: none; }

@media (max-width: 52rem) {
  .lx-nav__burger {
    display: grid; place-items: center; inline-size: 44px; block-size: 44px;
    background: none; border: 1px solid var(--lx-line); border-radius: var(--lx-r-sm);
    margin-inline-start: auto; cursor: pointer;
  }
  .lx-nav__burger span, .lx-nav__burger span::before, .lx-nav__burger span::after {
    content: ""; display: block; inline-size: 18px; block-size: 2px;
    background: var(--lx-ink); position: relative;
    transition: rotate var(--lx-dur-fast) var(--lx-ease), translate var(--lx-dur-fast) var(--lx-ease);
  }
  .lx-nav__burger span::before { position: absolute; inset-block-start: -6px; }
  .lx-nav__burger span::after  { position: absolute; inset-block-start: 6px; }
  .lx-nav__links {
    display: none; position: absolute; inset-inline: 0; inset-block-start: 100%;
    background: var(--lx-bg); border-block-end: 1px solid var(--lx-line);
    flex-direction: column; align-items: flex-start;
    padding: var(--lx-space-m) var(--lx-gutter); margin: 0; gap: var(--lx-space-s);
  }
  /* :has() — Menü offen, Burger wird zum X */
  .lx-header:has(.lx-nav__toggle:checked) .lx-nav__links { display: flex; }
  .lx-header:has(.lx-nav__toggle:checked) .lx-nav__burger span { background: transparent; }
  .lx-header:has(.lx-nav__toggle:checked) .lx-nav__burger span::before { rotate: 45deg; translate: 0 6px; }
  .lx-header:has(.lx-nav__toggle:checked) .lx-nav__burger span::after  { rotate: -45deg; translate: 0 -6px; }
}

/* Sprachwahl */
.lx-lang { display: flex; gap: 0.25rem; list-style: none; padding: 0; margin: 0; }
.lx-lang a {
  display: inline-block; padding: 0.3em 0.55em; border-radius: var(--lx-r-sm);
  font-size: var(--lx-text-xs); font-weight: 600; text-decoration: none; color: var(--lx-ink-soft);
}
.lx-lang a:hover { background: var(--lx-bg-alt); color: var(--lx-ink); }
.lx-lang a[aria-current="true"] { background: var(--lx-pink-100); color: var(--lx-pink-700); }

/* ---- Sticky-CTA-Leiste (mobil unten) ---- */
.lx-stickybar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--lx-z-sticky);
  background: var(--lx-navy); color: var(--lx-text-inv);
  display: flex; align-items: center; gap: var(--lx-space-s);
  padding: 0.6rem var(--lx-gutter);
  border-block-start: 1px solid var(--lx-navy-raised);
  translate: 0 100%; transition: translate var(--lx-dur) var(--lx-ease);
}
.lx-stickybar.is-visible { translate: 0 0; }
.lx-stickybar__price { font-family: var(--lx-font-display); font-weight: 800; font-size: var(--lx-text-lg); }
.lx-stickybar__price small { display: block; font-family: var(--lx-font-body); font-weight: 400; font-size: var(--lx-text-xs); color: var(--lx-text-inv-soft); }
.lx-stickybar .lx-btn { margin-inline-start: auto; flex: none; }
@media (min-width: 64rem) { .lx-stickybar { inset-inline: auto 0; inset-block-end: 0; max-inline-size: 26rem; border-start-start-radius: var(--lx-r-md); border-inline-start: 1px solid var(--lx-navy-raised); } }
body:has(.lx-stickybar.is-visible) { padding-block-end: 4.5rem; }

/* ---- Membercard-Preiskarten ---- */
.lx-cards { container-type: inline-size; }
.lx-cards__grid { display: grid; gap: var(--lx-space-m); grid-template-columns: 1fr; }
@container (min-width: 40rem) { .lx-cards__grid { grid-template-columns: repeat(3, 1fr); } }
.lx-membercard {
  position: relative; border: 1px solid var(--lx-line); border-radius: var(--lx-r-md);
  background: var(--lx-bg); background-image: var(--lx-grain);
  padding: var(--lx-space-m); display: flex; flex-direction: column; gap: var(--lx-space-xs);
}
.lx-membercard--petal { background-color: var(--lx-pink-100); }
.lx-membercard--foam  { background-color: var(--lx-sea-100); }
.lx-membercard__tier { font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-h3); }
.lx-membercard__price { font-family: var(--lx-font-display); font-weight: 800; font-size: var(--lx-text-h1); line-height: 1; }
.lx-membercard__price small { font-size: var(--lx-text-base); font-family: var(--lx-font-body); font-weight: 400; color: var(--lx-ink-soft); }
.lx-membercard__badge { position: absolute; inset-block-start: var(--lx-space-s); inset-inline-end: var(--lx-space-s); }
.lx-membercard ul { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.lx-membercard li { padding-inline-start: 1.5rem; position: relative; font-size: var(--lx-text-sm); }
/* Typografisches Häkchen (Hardrule: keine farbigen Punkte/Icons in Kästen) */
.lx-membercard li::before {
  content: "\2713"; position: absolute; inset-inline-start: 0; inset-block-start: 0;
  color: var(--lx-sea-700); font-weight: 600;
}
.lx-membercard .lx-btn { margin-block-start: auto; }

/* ---- Vergleichstabelle („alles drin") ---- */
.lx-table-wrap { overflow-x: auto; }
.lx-table { border-collapse: collapse; inline-size: 100%; font-size: var(--lx-text-sm); }
.lx-table th, .lx-table td { padding: 0.7rem 0.9rem; text-align: start; border-block-end: 1px solid var(--lx-line); }
.lx-table thead th { font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-base); }
.lx-table tbody tr:hover { background: var(--lx-bg-alt); }
.lx-table .is-featured { background: var(--lx-pink-100); }
.lx-check { color: var(--lx-sea-700); font-weight: 600; }
.lx-no { color: var(--lx-ink-soft); }

/* ---- FAQ Accordion ---- */
.lx-faq { display: grid; gap: 0.5rem; }
.lx-faq details { border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); background: var(--lx-bg); }
.lx-faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--lx-space-s);
  padding: var(--lx-space-s); font-weight: 600;
}
.lx-faq summary::-webkit-details-marker { display: none; }
.lx-faq summary::after {
  content: ""; margin-inline-start: auto; inline-size: 10px; block-size: 10px; flex: none;
  border-inline-end: 2px solid var(--lx-pink-700); border-block-end: 2px solid var(--lx-pink-700);
  rotate: 45deg; transition: rotate var(--lx-dur-fast) var(--lx-ease);
}
.lx-faq details[open] summary::after { rotate: -135deg; }
.lx-faq details[open] { background: var(--lx-bg-alt); }
.lx-faq .lx-faq__body { padding: 0 var(--lx-space-s) var(--lx-space-s); }

/* ---- Marquee (max. 1 pro Seite) ---- */
.lx-marquee { overflow: hidden; background: var(--lx-bg-alt); padding-block: var(--lx-space-s); white-space: nowrap; }
.lx-marquee__track { display: inline-flex; gap: 2.5rem; align-items: center; padding-inline-end: 2.5rem;
  animation: lx-marquee 34s linear infinite; }
.lx-marquee span { font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-h3); }
.lx-marquee i { inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--lx-pink-500); flex: none; }
.lx-marquee:hover .lx-marquee__track { animation-play-state: paused; }
@keyframes lx-marquee { to { translate: -50% 0; } }

/* ---- Ticket-Stub Angebotsmodul ---- */
.lx-ticket {
  display: grid; grid-template-columns: 1fr; gap: var(--lx-space-m);
  border: 1px solid var(--lx-line); border-radius: var(--lx-r-md);
  background: var(--lx-bg); background-image: var(--lx-grain); padding: var(--lx-space-m);
}
@media (min-width: 48rem) {
  .lx-ticket { grid-template-columns: 1fr auto; align-items: center; }
  .lx-ticket__cta { border-inline-start: 1px dashed var(--lx-dune); padding-inline-start: var(--lx-space-m); }
}
.lx-ticket__code { font-family: var(--lx-font-display); font-weight: 800; font-size: var(--lx-text-h2); color: var(--lx-pink-700); }

/* ---- Formulare (Funnel) ---- */
.lx-field { display: grid; gap: 0.35rem; }
.lx-field label { font-weight: 600; font-size: var(--lx-text-sm); }
.lx-input, .lx-select {
  inline-size: 100%; padding: 0.75em 0.9em; border-radius: var(--lx-r-sm);
  border: 1px solid var(--lx-line); background: var(--lx-bg-alt);
  transition: border-color var(--lx-dur-fast) var(--lx-ease);
}
.lx-input:hover, .lx-select:hover { border-color: var(--lx-dune); }
.lx-input:focus, .lx-select:focus { outline: 2px solid var(--lx-pink-700); outline-offset: 0; border-color: var(--lx-pink-700); }
.lx-field .lx-error { display: none; color: var(--lx-pink-700); font-size: var(--lx-text-xs); }
.lx-field.has-error .lx-error { display: block; }
.lx-field.has-error .lx-input { border-color: var(--lx-pink-700); }
/* Options-Kacheln im Funnel */
.lx-choice { position: relative; }
.lx-choice input { position: absolute; opacity: 0; inline-size: 100%; block-size: 100%; inset: 0; cursor: pointer; }
.lx-choice__card {
  border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); padding: var(--lx-space-s);
  background: var(--lx-bg); transition: border-color var(--lx-dur-fast) var(--lx-ease), background var(--lx-dur-fast) var(--lx-ease);
  display: flex; align-items: center; gap: var(--lx-space-xs); font-weight: 500;
}
.lx-choice:hover .lx-choice__card { border-color: var(--lx-dune); }
.lx-choice input:checked + .lx-choice__card { background: var(--lx-pink-100); border-color: var(--lx-pink-700); }
.lx-choice input:focus-visible + .lx-choice__card { outline: 2px solid var(--lx-pink-700); outline-offset: 2px; }

/* ---- Foto-Overlays ---- */
.lx-photo { position: relative; border-radius: var(--lx-r-md); overflow: hidden; }
.lx-photo > img { border-radius: 0; inline-size: 100%; }
/* Jalousie-Streifen: max. 1 Foto pro Seite */
.lx-photo--blinds::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 15%, var(--lx-bg) 15% 17.5%);
  opacity: 0.35;
}
.lx-photo--grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--lx-grain); opacity: 0.5; z-index: 1;
}

/* ---- Scroll-Reveals (IntersectionObserver setzt .is-revealed) ---- */
.lx-reveal { opacity: 0; translate: 0 14px; transition: opacity var(--lx-dur-slow) var(--lx-ease), translate var(--lx-dur-slow) var(--lx-ease); }
.lx-reveal.is-revealed { opacity: 1; translate: 0 0; }
.lx-reveal--late { transition-delay: 120ms; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lx-reveal { opacity: 1; translate: none; transition: none; }
  .lx-marquee__track { animation: none; }
  .lx-stickybar { transition: none; }
  .lx-btn, .lx-btn:hover { translate: none; }
}

/* ---- Footer ---- */
.lx-footer { margin-block-start: var(--lx-space-2xl); }
.lx-footer__grid { display: grid; gap: var(--lx-space-l); grid-template-columns: 1fr; padding-block: var(--lx-space-xl); }
@media (min-width: 48rem) { .lx-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.lx-footer h3 { font-size: var(--lx-text-base); font-weight: 700; margin-block-end: 0.6rem; }
.lx-footer ul { list-style: none; padding: 0; display: grid; gap: 0.35rem; }
.lx-footer a { text-decoration: none; font-size: var(--lx-text-sm); }
.lx-footer a:hover { text-decoration: underline; }
.lx-footer__legal { border-block-start: 1px solid var(--lx-navy-raised); padding-block: var(--lx-space-s); font-size: var(--lx-text-xs); color: var(--lx-text-inv-soft); }

/* ---- Sonstiges ---- */
.lx-grid-2 { display: grid; gap: var(--lx-space-l); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 52rem) { .lx-grid-2 { grid-template-columns: 3fr 2fr; } .lx-grid-2--flip { grid-template-columns: 2fr 3fr; } }
.lx-usp-row { display: grid; gap: var(--lx-space-m); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .lx-usp-row { grid-template-columns: repeat(3, 1fr); } }
.lx-usp { border-inline-start: none; }
.lx-usp h3 { margin-block-end: 0.3rem; }
.lx-usp p { font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.skip-link { position: absolute; inset-inline-start: -999px; }
.skip-link:focus { position: fixed; inset-inline-start: var(--lx-gutter); inset-block-start: var(--lx-gutter); background: var(--lx-bg); padding: 0.5rem 1rem; z-index: 60; border-radius: var(--lx-r-sm); }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Announcement-Ribbon ---- */
.lx-ribbon { background: var(--lx-navy); text-align: center; padding: 0.45rem var(--lx-gutter); }
.lx-ribbon a { color: var(--lx-text-inv); font-size: var(--lx-text-xs); font-weight: 500; text-decoration: none; }
.lx-ribbon a:hover { color: var(--lx-pink-ondark); }

/* ---- Nav-CTA + Logo invers ---- */
.lx-nav__cta { font-size: 0.9375rem; min-block-size: 2.75rem; padding-block: 0.5em; padding-inline: 1.15em; }
.lx-nav__cta-li { margin-inline-start: var(--lx-space-2xs); }
.lx-nav__logo--inv { color: var(--lx-text-inv); }
.lx-nav__logo--inv b { color: var(--lx-pink-ondark); }

/* ---- Sprach-Stub + Switcher ---- */
.lx-lang-stub, .lang-switch-btn {
  background: none; border: 1px solid var(--lx-line); border-radius: var(--lx-r-sm);
  padding: 0.35em 0.6em; font-size: var(--lx-text-xs); font-weight: 600; cursor: pointer;
  color: var(--lx-ink-soft); display: inline-flex; align-items: center; gap: 0.35em;
}
.lx-lang-stub:hover, .lang-switch-btn:hover { border-color: var(--lx-dune); color: var(--lx-ink); }
.lang-switch { position: relative; }
.lang-switch-menu {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px);
  background: var(--lx-bg); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md);
  list-style: none; padding: 0.3rem; margin: 0; display: none; min-inline-size: 10rem; z-index: 60;
}
.lang-switch.open .lang-switch-menu { display: block; }
.lang-switch-menu li { border-radius: var(--lx-r-sm); }
.lang-switch-menu button {
  inline-size: 100%; text-align: start; background: none; border: 0; cursor: pointer;
  padding: 0.45em 0.6em; font-size: var(--lx-text-sm); border-radius: var(--lx-r-sm);
  display: flex; gap: 0.5em; align-items: center;
}
.lang-switch-menu button:hover { background: var(--lx-bg-alt); }
.lang-switch-menu button[aria-current="true"] { background: var(--lx-pink-100); color: var(--lx-pink-700); font-weight: 600; }
.lang-switch-btn.loading { opacity: 0.55; pointer-events: none; }
@media (max-width: 52rem) { .lx-nav__cta-li { margin-inline-start: 0; } .lang-switch { align-self: flex-start; } }

/* ---- HWG-Fußnoten-Overlay (Muster laserazor) ---- */
sup.fn {
  cursor: pointer; color: var(--lx-pink-700); font-weight: 600; font-size: 0.6em;
  padding-inline: 0.15em;
}
.lx-dark sup.fn { color: var(--lx-pink-ondark); }
.fn-overlay {
  position: fixed; inset: 0; display: none; place-items: center; z-index: 80;
  background: color-mix(in srgb, var(--lx-navy) 55%, transparent); padding: var(--lx-gutter);
}
.fn-overlay.open { display: grid; }
.fn-modal {
  background: var(--lx-bg); border-radius: var(--lx-r-md); border: 1px solid var(--lx-line);
  max-inline-size: 34rem; padding: var(--lx-space-m); display: grid; gap: var(--lx-space-s);
}
.fn-modal h3 { font-size: var(--lx-text-h3); }
.fn-modal p { font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.fn-close { justify-self: start; background: var(--lx-cta); color: var(--lx-text-inv);
  border: 0; border-radius: var(--lx-r-md); font-weight: 700; font-family: var(--lx-font-display);
  padding: 0.6em 1.4em; cursor: pointer; }

/* ---- KI-Kennzeichnung (AI Act Art. 50, Muster laserazor) ---- */
.lx-ai-wrap { position: relative; display: inline-block; max-inline-size: 100%; }
.lx-ai-badge {
  position: absolute; inset-inline-end: 6px; inset-block-end: 6px;
  background: color-mix(in srgb, var(--lx-navy) 72%, transparent); color: var(--lx-text-inv);
  font-size: 10px; line-height: 1; padding: 3px 6px; border-radius: var(--lx-r-sm);
  pointer-events: none; letter-spacing: 0.02em;
}

/* ---- Hero (asymmetrischer 60/40-Split, R3 §5.1) ---- */
.lx-hero { background: var(--lx-grad-hero); padding-block: var(--lx-space-l) var(--lx-space-xl); }
.lx-hero__mega { display: flex; align-items: baseline; gap: var(--lx-space-xs); margin-block: var(--lx-space-s); flex-wrap: wrap; }
.lx-hero__permo { font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-h3); line-height: 1.15; }
.lx-hero__permo small { font-family: var(--lx-font-body); font-weight: 400; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.lx-hero__ctas { display: flex; gap: var(--lx-space-s); flex-wrap: wrap; margin-block: var(--lx-space-m) var(--lx-space-xs); }
.lx-hero__img { max-block-size: 34rem; }
.lx-hero__img img { object-fit: cover; block-size: 100%; inline-size: 100%; aspect-ratio: 4 / 5; }
@media (max-width: 52rem) {
  .lx-hero { padding-block: var(--lx-space-m) var(--lx-space-l); }
  /* Art-Direction mobil: 4:5-Bild unter dem Text, kompakter beschnitten */
  .lx-hero__img { max-block-size: 24rem; margin-block-start: var(--lx-space-m); }
  .lx-hero__img img { aspect-ratio: 4 / 5; }
}

/* ---- Sektions-Kopf: Label+H2 links, Lead rechts (Asymmetrie-Rhythmus) ---- */
.lx-sechead { display: grid; gap: var(--lx-space-s); margin-block-end: var(--lx-space-l); align-items: end; }
@media (min-width: 52rem) { .lx-sechead { grid-template-columns: 3fr 2fr; } .lx-sechead > p { margin-block-end: 0.35rem; } }

/* ---- Zonen-Grid ---- */
.lx-zonegrid { display: grid; gap: var(--lx-space-s); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .lx-zonegrid { grid-template-columns: repeat(4, 1fr); } }
.lx-zonecard { display: block; text-decoration: none; color: var(--lx-ink); border-radius: var(--lx-r-md); overflow: hidden; position: relative; border: 1px solid var(--lx-line); background: var(--lx-bg); transition: border-color var(--lx-dur-fast) var(--lx-ease); }
.lx-zonecard:hover { border-color: var(--lx-dune); }
.lx-zonecard img { border-radius: 0; inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover; scale: 1.02; transition: scale var(--lx-dur) var(--lx-ease); }
.lx-zonecard:hover img { scale: 1.05; }
.lx-zonecard__body { display: block; padding: var(--lx-space-xs) var(--lx-space-s); }
.lx-zonecard__body b { display: block; font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-base); }
.lx-zonecard__body span { font-size: var(--lx-text-xs); color: var(--lx-ink-soft); }
.lx-zonecard__body span b, .lx-zonecard .lx-price { color: var(--lx-pink-700); }
@media (prefers-reduced-motion: reduce) { .lx-zonecard img, .lx-zonecard:hover img { transition: none; scale: none; } }

/* ---- Prozess-Schritte mit Riesen-Ziffern (R3 §5.2) ---- */
.lx-steps { list-style: none; padding: 0; display: grid; gap: var(--lx-space-l); grid-template-columns: 1fr; counter-reset: none; }
@media (min-width: 48rem) { .lx-steps { grid-template-columns: repeat(3, 1fr); } }
.lx-steps__num { display: block; font-family: var(--lx-font-display); font-weight: 800; font-size: var(--lx-text-mega); line-height: 1; color: var(--lx-pink-100); -webkit-text-stroke: 2px var(--lx-pink-500); }
.lx-steps h3 { margin-block: var(--lx-space-xs) 0.3rem; }
.lx-steps p { font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }

/* Buttons in dunklen Sektionen: eigene Farben schlagen .lx-dark a */
.lx-dark a.lx-btn--primary { color: var(--lx-text-inv); }
.lx-dark a.lx-btn--sea { color: var(--lx-text-inv); }
/* Membercards behalten Ink-Farben auch in dunklen Sektionen */
.lx-dark .lx-membercard, .lx-dark .lx-membercard p, .lx-dark .lx-membercard h3 { color: var(--lx-ink); }
.lx-dark .lx-membercard .lx-fine, .lx-dark .lx-membercard__price small { color: var(--lx-ink-soft); }
.lx-dark .lx-membercard a { color: inherit; }
/* Hero-Preiszeile: „ab" klein vor der Mega-Zahl, bricht nie */
.lx-hero__ab { font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-h2); align-self: baseline; }
.lx-hero__mega { flex-wrap: nowrap; align-items: baseline; }
.lx-hero__mega .lx-mega { white-space: nowrap; }

/* ---- Zonen-Detail: Stats + Breadcrumb + Care-Listen + 4er-Steps/Cards ---- */
.lx-breadcrumb { font-size: var(--lx-text-xs); color: var(--lx-ink-soft); padding-block: var(--lx-space-xs); }
.lx-breadcrumb a { color: var(--lx-ink-soft); text-decoration: none; }
.lx-breadcrumb a:hover { color: var(--lx-pink-700); text-decoration: underline; }
.lx-statrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lx-space-s); margin-block: var(--lx-space-m); }
@media (min-width: 36rem) { .lx-statrow { grid-template-columns: repeat(4, 1fr); } }
.lx-statrow dt { font-size: var(--lx-text-xs); color: var(--lx-ink-soft); }
.lx-statrow dd { margin: 0; font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-h3); }
.lx-carelist { list-style: none; padding: 0; display: grid; gap: 0.45rem; }
.lx-carelist li { padding-inline-start: 1.5rem; position: relative; font-size: var(--lx-text-sm); }
.lx-carelist li::before { content: "\2713"; position: absolute; inset-inline-start: 0; color: var(--lx-sea-700); font-weight: 600; }
.lx-steps--4 { grid-template-columns: 1fr; }
@media (min-width: 48rem) { .lx-steps--4 { grid-template-columns: repeat(4, 1fr); } }
@container (min-width: 40rem) { .lx-cards__grid--4 { grid-template-columns: repeat(4, 1fr); } }
.lx-table__group th { font-family: var(--lx-font-display); font-weight: 700; padding-block-start: var(--lx-space-m); border-block-end: 1px solid var(--lx-dune); }
.lx-badge-cls { display: inline-block; background: var(--lx-sea-100); color: var(--lx-sea-700); font-weight: 600; font-size: var(--lx-text-xs); padding: 0.15em 0.5em; border-radius: var(--lx-r-sm); }

/* ---- Standorte + Team + Map + Galerie ---- */
.lx-citygrid { display: grid; gap: var(--lx-space-m); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .lx-citygrid { grid-template-columns: 1fr 1fr; } }
.lx-citycard { display: block; border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); overflow: hidden; text-decoration: none; color: var(--lx-ink); background: var(--lx-bg); transition: border-color var(--lx-dur-fast) var(--lx-ease); }
.lx-citycard:hover { border-color: var(--lx-dune); }
.lx-citycard img { border-radius: 0; inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lx-citycard__body { display: grid; gap: 0.4rem; padding: var(--lx-space-s); justify-items: start; }
.lx-citycard__body b { font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-h3); }
.lx-citycard__body span { font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.lx-citycard--soon { background: var(--lx-bg-alt); display: grid; align-content: center; min-block-size: 14rem; }
.lx-address { font-style: normal; line-height: 1.7; }
.lx-map { border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--lx-bg-alt); }
.lx-map iframe { inline-size: 100%; block-size: 100%; border: 0; }
.lx-map__consent { block-size: 100%; display: grid; place-content: center; gap: var(--lx-space-s); padding: var(--lx-space-m); text-align: center; justify-items: center; }
.lx-galgrid { display: grid; gap: var(--lx-space-s); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .lx-galgrid { grid-template-columns: 2fr 1fr 1fr; align-items: stretch; } .lx-galgrid img { block-size: 100%; object-fit: cover; } }
.lx-teamgrid { display: grid; gap: var(--lx-space-m); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .lx-teamgrid { grid-template-columns: repeat(4, 1fr); } }
.lx-teamcard { margin: 0; }
.lx-teamcard img { aspect-ratio: 3 / 4; object-fit: cover; inline-size: 100%; }
.lx-teamcard figcaption { padding-block-start: var(--lx-space-xs); display: grid; gap: 0.1rem; }
.lx-teamcard b { font-family: var(--lx-font-display); font-weight: 700; }
.lx-teamcard span { font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.lx-speclist { display: grid; gap: var(--lx-space-xs); margin-block-start: var(--lx-space-m); }
.lx-speclist div { display: grid; grid-template-columns: 1fr 2fr; gap: var(--lx-space-s); border-block-end: 1px solid var(--lx-navy-raised); padding-block-end: var(--lx-space-xs); }
.lx-speclist dt { color: var(--lx-text-inv-soft); font-size: var(--lx-text-sm); }
.lx-speclist dd { margin: 0; font-weight: 600; }

/* ---- Funnel (V2: firstbook-Embed) ---- */
.lx-funnel-wrap { max-inline-size: 46rem; }
.lx-funnel-head { margin-block-end: var(--lx-space-m); }
.lx-funnel-trust { margin-block-start: var(--lx-space-m); text-align: center; }

/* ---- Rechtstexte ---- */
.lx-legal { max-inline-size: 46rem; }
.lx-legal h2 { font-size: var(--lx-text-h3); margin-block: var(--lx-space-m) var(--lx-space-xs); }
.lx-legal p { margin-block-end: var(--lx-space-xs); }

/* ============================================================
   DESIGN V2 — modern-clean (cohere/duna) × Miami-Pastell × Handdrawn.
   Überschreibt gezielt V1-Regeln (Kaskade).
   ============================================================ */

/* Keine horizontalen Trennlinien mehr — Sections fließen ineinander */
.lx-horizon, .lx-band { display: none; }

/* Headlines: Archivo bold, eng, nüchtern-modern */
h1, h2, h3, .lx-display { hyphens: manual; }
h1 { font-weight: 800; }
.lx-mega { letter-spacing: -0.035em; }

/* Marker-Layer (Caveat) — Annotationen, nie Fließtext */
.lx-mark {
  font-family: var(--lx-font-marker); font-weight: 700;
  font-size: 1.5em; line-height: 1; color: var(--lx-pink-700);
  display: inline-block; rotate: -2deg;
}
.lx-mark--sea { color: var(--lx-sea-700); }
.lx-mark--ondark { color: var(--lx-pink-ondark); }
.lx-mark--big { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }

/* Handgezeichnete Doodles */
.lx-doodle-underline { display: block; inline-size: min(100%, 14rem); block-size: 0.5em; color: var(--lx-pink-500); margin-block-start: 0.1em; }
.lx-annotated { position: relative; display: inline-block; }
.lx-doodle-circle { position: absolute; inset: -0.28em -0.75em; inline-size: calc(100% + 1.5em); block-size: calc(100% + 0.56em); color: var(--lx-pink-700); pointer-events: none; }
.lx-doodle-arrow { inline-size: 3.2rem; block-size: 2.5rem; color: var(--lx-ink-soft); }
.lx-doodle-sparkle { inline-size: 1.6rem; block-size: 1.6rem; color: var(--lx-peach); }
.lx-annotation { display: inline-flex; align-items: flex-end; gap: 0.3rem; }

/* Hand-Icons: frei stehend neben Text, NIE in Kästen */
.lx-icon { inline-size: 2.6rem; block-size: 2.6rem; color: var(--lx-pink-700); flex: none; }
.lx-icon--sea { color: var(--lx-sea-700); }
.lx-usp { display: grid; grid-template-columns: auto 1fr; gap: var(--lx-space-s); align-items: start; }
.lx-usp > .lx-icon { margin-block-start: 0.2rem; }
.lx-usp h3 { grid-column: 2; margin: 0; }
.lx-usp p  { grid-column: 2; }
.lx-usp > .lx-icon + h3 { grid-column: 2; grid-row: 1; }

/* Organische Hintergrund-Felder (Blobs) */
.lx-blobwrap { position: relative; overflow: clip; }
.lx-blob { position: absolute; z-index: 0; pointer-events: none; }
.lx-blob svg { inline-size: 100%; block-size: 100%; }
.lx-blob--petal { color: var(--lx-pink-100); }
.lx-blob--foam { color: var(--lx-sea-100); }
.lx-blob--peach { color: color-mix(in srgb, var(--lx-peach) 38%, var(--lx-bg)); }
.lx-blob--sand { color: var(--lx-bg-alt); }
.lx-blobwrap > .lx-container, .lx-blobwrap > .lx-container--wide { position: relative; z-index: 1; }

/* Fließende Übergänge: Elemente ragen über Section-Grenzen */
.lx-pull-up { position: relative; z-index: 2; margin-block-start: calc(-1 * var(--lx-space-xl)); }
.lx-pull-down { position: relative; z-index: 2; margin-block-end: calc(-1 * var(--lx-space-xl)); }
.lx-tilt-l { rotate: -1.3deg; }
.lx-tilt-r { rotate: 1.2deg; }
.lx-overlap-pad { padding-block-start: calc(var(--lx-space-xl) + var(--lx-space-l)); }

/* Slider (scroll-snap) — „viel sliden" */
.lx-slider { display: flex; gap: var(--lx-space-s); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--lx-space-2xs) var(--lx-gutter) var(--lx-space-s); margin-inline: calc(-1 * var(--lx-gutter)); scrollbar-width: thin; scrollbar-color: var(--lx-dune) transparent; }
.lx-slider > * { scroll-snap-align: start; flex: 0 0 auto; }
.lx-slider .lx-zonecard { inline-size: clamp(11.5rem, 30vw, 15rem); }
.lx-slider .lx-teamcard { inline-size: clamp(11rem, 28vw, 14rem); }
.lx-slider .lx-galitem { inline-size: clamp(16rem, 46vw, 26rem); }
.lx-slider .lx-galitem img { aspect-ratio: 4 / 3; object-fit: cover; inline-size: 100%; }
.lx-slider::-webkit-scrollbar { block-size: 6px; }
.lx-slider::-webkit-scrollbar-thumb { background: var(--lx-dune); border-radius: 3px; }
.lx-slidehint { display: flex; align-items: center; gap: 0.4rem; color: var(--lx-ink-soft); font-family: var(--lx-font-marker); font-weight: 600; font-size: 1.25rem; rotate: -1.5deg; }

/* Karten-Politur: edel, ruhig, 6px */
.lx-membercard { background-image: none; gap: var(--lx-space-s); padding: var(--lx-space-m); }
.lx-membercard__tier { font-size: var(--lx-text-lg); font-weight: 700; }
.lx-membercard__price { letter-spacing: -0.03em; }
.lx-ticket { background-image: none; }
.lx-zonecard { border: 0; background: transparent; }
.lx-zonecard img { border-radius: var(--lx-r-md); }
.lx-zonecard:hover { border: 0; }
.lx-zonecard__body { padding-inline: 0.15rem; }

/* Nav V2: schwebendes Feld */
.lx-header { background: color-mix(in srgb, var(--lx-bg) 88%, transparent); backdrop-filter: blur(8px); border-block-end: 1px solid color-mix(in srgb, var(--lx-line) 70%, transparent); }
.lx-nav__links a { padding: 0.45em 0.7em; border-radius: var(--lx-r-md); transition: background var(--lx-dur-fast) var(--lx-ease), color var(--lx-dur-fast) var(--lx-ease); }
.lx-nav__links a:hover { background: var(--lx-bg-alt); color: var(--lx-ink); }
.lx-nav__links a[aria-current="page"] { background: var(--lx-pink-100); color: var(--lx-pink-700); }
.lx-ribbon { background: var(--lx-navy); }
.lx-ribbon a b { font-family: var(--lx-font-marker); font-weight: 700; font-size: 1.2em; color: var(--lx-pink-ondark); }

/* Hero V2: Blob-Bühne statt Wash-Verlauf */
.lx-hero { background: none; }
.lx-hero .lx-mega { color: var(--lx-ink); }
.lx-hero__img img { border-radius: var(--lx-r-md); }

/* Staggered Grids: Rhythmus statt Reihen */
@media (min-width: 48rem) {
  .lx-zonegrid > :nth-child(4n+2) { translate: 0 var(--lx-space-m); }
  .lx-zonegrid > :nth-child(4n+4) { translate: 0 var(--lx-space-s); }
  .lx-teamgrid > :nth-child(4n+2), .lx-teamgrid > :nth-child(4n+4) { translate: 0 var(--lx-space-m); }
  .lx-zonegrid, .lx-teamgrid { padding-block-end: var(--lx-space-m); }
}
@media (prefers-reduced-motion: reduce) { .lx-tilt-l, .lx-tilt-r { rotate: none; } }

/* Steps-Ziffern: solide Petal-Fläche, Ink-Kontur weg (Archivo wirkt allein) */
.lx-steps__num { -webkit-text-stroke: 0; color: var(--lx-pink-500); opacity: 0.9; }

/* ---- Buchungs-Lightbox + Funnel-Embed ---- */
.lx-bmodal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: clamp(0.5rem, 2vw, 2rem); background: color-mix(in srgb, var(--lx-navy) 62%, transparent); }
.lx-bmodal[hidden] { display: none; }
.lx-bmodal__panel { position: relative; inline-size: min(100%, 46rem); block-size: min(92dvh, 56rem); background: var(--lx-bg); border-radius: var(--lx-r-md); overflow: hidden; display: grid; }
.lx-bmodal__close { position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.6rem; z-index: 3; inline-size: 2.6rem; block-size: 2.6rem; display: grid; place-items: center; background: var(--lx-bg); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); cursor: pointer; color: var(--lx-ink); }
.lx-bmodal__close:hover { background: var(--lx-pink-100); color: var(--lx-pink-700); border-color: var(--lx-pink-500); }
.lx-bmodal__close svg { inline-size: 1.2rem; block-size: 1.2rem; }
.lx-bmodal__loading { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; }
.lx-bmodal__frame, .lx-bmodal__frame iframe { inline-size: 100%; block-size: 100%; border: 0; position: relative; z-index: 2; }
body.lx-modal-open { overflow: hidden; }
.lx-bframe { position: relative; border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); overflow: hidden; background: var(--lx-bg); block-size: min(78dvh, 56rem); margin-block-start: var(--lx-space-m); }
.lx-bframe iframe { inline-size: 100%; block-size: 100%; border: 0; }
.lx-bframe__skel { position: absolute; inset: 0; display: grid; place-items: center; }
.lx-funnel-wrap { max-inline-size: 44rem; padding-block: var(--lx-space-l); }

/* Icon-Farbwrapper */
.lx-iconwrap { display: contents; }
.lx-iconwrap--sea .lx-icon { color: var(--lx-sea-700); }

/* ---- Magazin ---- */
.lx-artwrap { max-inline-size: 46rem; }
.lx-artbody { padding-block: var(--lx-space-l); }
.lx-artbody h2 { margin-block: var(--lx-space-l) var(--lx-space-s); }
.lx-artbody h3 { margin-block: var(--lx-space-m) var(--lx-space-xs); }
.lx-artbody p { margin-block-end: var(--lx-space-s); }
.lx-artbody ul { margin-block: var(--lx-space-s); padding-inline-start: 1.3rem; display: grid; gap: 0.45rem; }
.lx-artbody .lx-table-wrap { margin-block: var(--lx-space-m); }
.lx-artgrid { display: grid; gap: var(--lx-space-l); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .lx-artgrid { grid-template-columns: 1fr 1fr; } }
.lx-artcard { display: block; text-decoration: none; color: var(--lx-ink); }
.lx-artcard img { aspect-ratio: 16 / 9; object-fit: cover; inline-size: 100%; }
.lx-artcard__body { display: grid; gap: 0.3rem; padding-block-start: var(--lx-space-xs); }
.lx-artcard__body b { font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-h3); line-height: 1.25; }
.lx-artcard:hover b { color: var(--lx-pink-700); }
.fn-star-link a { text-decoration: none; font-weight: 700; }
.lx-table--ondark th, .lx-table--ondark td { border-color: var(--lx-navy-raised); }
.lx-table--ondark tbody tr:hover { background: var(--lx-navy-raised); }

/* ============================================================
   DESIGN V3 — EIN durchgehender Miami-Verlauf pro Seite,
   keine harten Querkanten mehr; dunkle Flächen nur angewinkelt.
   ============================================================ */

/* Seitenhintergrund: von Sonnenaufgang (Petal) über Tag (Shell/Foam)
   bis Abendsand — weich, ohne Kanten. Sections werden transparent. */
body {
  background: linear-gradient(180deg,
    #FBF7F0 0%, #F9DCE2 9%, #FCEFE4 20%, #FBF7F0 32%,
    var(--lx-wash-mint) 44%, #DCF0EA 54%, #F3F1E6 66%, #FBF7F0 78%,
    #F5EDE0 90%, var(--lx-wash-sanddeep) 100%);
}
.lx-section--alt, .lx-section--petal, .lx-section--foam, .lx-hero { background: none; }
.lx-header { background: color-mix(in srgb, var(--lx-bg) 82%, transparent); }

/* Angewinkelte Panels: dunkle/kontrastige Flächen nie mehr als gerades Band */
.lx-tiltpanel {
  position: relative; rotate: -1.4deg; margin-inline: -3vw; padding-inline: 3vw;
  margin-block: var(--lx-space-l);
}
.lx-tiltpanel > * { rotate: 1.4deg; }
.lx-dark.lx-tiltpanel { border-radius: var(--lx-r-md); }
.lx-marquee { rotate: -1.2deg; margin-inline: -2vw; inline-size: 104vw; margin-block: var(--lx-space-m); background: color-mix(in srgb, var(--lx-bg-alt) 82%, transparent); }
@media (prefers-reduced-motion: reduce) { .lx-tiltpanel, .lx-tiltpanel > *, .lx-marquee { rotate: none; } }

/* Freigestellte Fotos: flach platziert, ragen über Grenzen */
.lx-cutout { position: relative; z-index: 2; pointer-events: none; }
.lx-cutout img { border-radius: 0; }
.lx-hero__cut { max-block-size: 36rem; margin-block: calc(-1 * var(--lx-space-m)) 0; }
.lx-hero__cut img { block-size: 100%; inline-size: auto; margin-inline: auto; }
@media (max-width: 52rem) { .lx-hero__cut { max-block-size: 20rem; margin-block: var(--lx-space-s) 0; } .lx-hero__cut img { margin-inline: auto; } }
.lx-cut-side { position: absolute; inset-block-end: 0; inline-size: clamp(10rem, 22vw, 18rem); }
.lx-cut-side--r { inset-inline-end: 2vw; }
.lx-cut-side--l { inset-inline-start: 2vw; }
@media (max-width: 64rem) { .lx-cut-side { display: none; } }

/* Handgemalte Icons V2: doppelter, versetzt wiederholter Strich = Filzstift */
.lx-icon { inline-size: 2.9rem; block-size: 2.9rem; }
.lx-icon path, .lx-icon circle { stroke-width: 2.6; }
.lx-icon .ghost { opacity: 0.34; stroke-width: 2; }

/* Footer V3 — professionell, angewinkelter Einstieg, Icon-Reihe, Mega-Wordmark */
.lx-footer { margin-block-start: var(--lx-space-2xl); position: relative; background: none; }
.lx-footer__panel {
  background-color: var(--lx-navy); background-image: var(--lx-grain);
  rotate: -1.2deg; margin-inline: -3vw; padding-inline: 3vw;
  border-start-start-radius: var(--lx-r-md); border-start-end-radius: var(--lx-r-md);
  padding-block-end: var(--lx-space-l);
}
.lx-footer__panel > * { rotate: 1.2deg; }
.lx-footer__trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lx-space-m); padding-block: var(--lx-space-l) var(--lx-space-m); }
@media (min-width: 48rem) { .lx-footer__trust { grid-template-columns: repeat(4, 1fr); } }
.lx-footer__trust div { display: grid; justify-items: start; gap: 0.3rem; }
.lx-footer__trust .lx-icon { color: var(--lx-sea-500); }
.lx-footer__trust b { color: var(--lx-text-inv); font-size: var(--lx-text-sm); }
.lx-footer__trust span { color: var(--lx-text-inv-soft); font-size: var(--lx-text-xs); }
.lx-footer__mega {
  font-family: var(--lx-font-display); font-weight: 800; line-height: 0.9;
  font-size: clamp(4rem, 14vw, 13rem); letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--lx-text-inv) 7%, transparent);
  user-select: none; pointer-events: none; text-align: center; overflow: hidden;
}
.lx-footer__contact { display: grid; gap: 0.35rem; font-size: var(--lx-text-sm); color: var(--lx-text-inv-soft); }
.lx-footer__contact a { color: var(--lx-text-inv); text-decoration: none; }
.lx-footer__contact a:hover { color: var(--lx-pink-ondark); }

/* Switcher mit Flaggen */
.lang-switch-btn svg, .lang-switch-menu svg { border-radius: 2px; flex: none; }
.lang-switch-btn { gap: 0.45em; }

/* Badge-Zweitvariante ohne Gradient (Dosierungs-Cap) */
.lx-badge--sea { background: var(--lx-sea-100); color: var(--lx-sea-700); background-image: none; }
.lx-bmodal__alt { position: absolute; inset-block-end: 0.4rem; inset-inline: 0; text-align: center; z-index: 3; }
.lx-footer__h { font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-base); margin-block-end: 0.6rem; color: var(--lx-text-inv); }

/* ============ V4: CI-Bildwelt (surreal-minimal) + Bewegung ============ */
/* Bild-als-Fläche: Boxen mit Foto-Hintergrund */
.lx-bgbox { position: relative; overflow: hidden; border-radius: var(--lx-r-md); }
.lx-bgbox > img.lx-bgbox__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 0; z-index: 0; }
.lx-bgbox > :not(.lx-bgbox__img) { position: relative; z-index: 1; }
.lx-bgbox--scrim::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--lx-bg) 88%, transparent) 0%, color-mix(in srgb, var(--lx-bg) 55%, transparent) 55%, transparent 100%); }
/* Ambient-Loop: langsamer Ken-Burns auf Foto-Flächen („kleine Videos"-Gefühl) */
@keyframes lx-ambient { 0% { scale: 1; translate: 0 0; } 50% { scale: 1.06; translate: -1.2% 0.8%; } 100% { scale: 1; translate: 0 0; } }
.lx-ambient img, img.lx-ambient { animation: lx-ambient 26s ease-in-out infinite; will-change: transform; }
/* SVG-Animationen: Sonne pulst sanft, Doodle-Linien zeichnen sich */
@keyframes lx-sunpulse { 50% { scale: 1.12; } }
.lx-nav__sun { animation: lx-sunpulse 5s ease-in-out infinite; }
.lx-doodle-underline path, .lx-doodle-circle path, .lx-doodle-arrow path {
  stroke-dasharray: 620; stroke-dashoffset: 620; animation: lx-draw 1.1s ease-out forwards; animation-delay: 0.3s; }
@keyframes lx-draw { to { stroke-dashoffset: 0; } }
@keyframes lx-float { 50% { translate: 0 -10px; } }
.lx-blob { animation: lx-float 14s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .lx-ambient img, img.lx-ambient, .lx-nav__sun, .fsuccess__sun, .lx-blob { animation: none; }
  .lx-doodle-underline path, .lx-doodle-circle path, .lx-doodle-arrow path { stroke-dashoffset: 0; animation: none; }
}
.lx-hero__ci { overflow: hidden; border-radius: var(--lx-r-md); rotate: 1.2deg; }
.lx-hero__ci img, .lx-hero__ci picture { inline-size: 100%; block-size: auto; }
.lx-hero__ci img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 52rem) { .lx-hero__ci { max-block-size: 34rem; } .lx-hero__ci img { block-size: 100%; } }
@media (max-width: 52rem) {
  /* Mobil: natives Seitenverhältnis, KEIN Beschnitt */
  .lx-hero__ci { rotate: 0.8deg; margin-block-start: var(--lx-space-m); }
  .lx-hero__ci img { aspect-ratio: auto; object-fit: contain; }
}

/* Mobile-Härtung: geneigte Vollbreiten-Bänder dürfen nie horizontal scrollen */
html, body { overflow-x: clip; }
@media (max-width: 52rem) {
  .lx-marquee { rotate: -0.8deg; inline-size: 102vw; }
  .lx-tiltpanel, .lx-footer__panel { rotate: -0.8deg; margin-inline: -4vw; padding-inline: 4vw; }
  .lx-tiltpanel > *, .lx-footer__panel > * { rotate: 0.8deg; }
  .lx-bgbox--scrim::after { background: color-mix(in srgb, var(--lx-bg) 82%, transparent); }
  .lx-cut-side { display: none; }
  .lx-hero__img { max-block-size: none; }
  .lx-hero__img img { aspect-ratio: auto; }
}

/* USP-Reihe V2: ruhig, ausgerichtet, einzeilige Headlines */
.lx-usp-row { align-items: start; }
.lx-usp h3 { white-space: nowrap; font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); }
.lx-usp p { max-inline-size: 30ch; }
@media (max-width: 48rem) { .lx-usp h3 { white-space: normal; } }

/* QA10-Politur */
sup.fn { cursor: help; }
.lx-membercard__price small { white-space: nowrap; }
.lx-footer { margin-block-start: var(--lx-space-l); }
.lx-cutout img { filter: drop-shadow(0 18px 14px color-mix(in srgb, var(--lx-navy) 14%, transparent)); }
.lx-cut-side--r { inset-inline-end: 0; inset-block-end: -1rem; }

/* Header ohne eigenen BG: Seiten-Verlauf läuft bis ganz oben durch (immer) */
.lx-header { position: static; background: none; border-block-end: 0; backdrop-filter: none; }
.lx-nav__logo img { border-radius: 0; filter: none; }

/* Blobs V2: transluzente Hand-Linien statt Kugeln */
.lx-blob { opacity: 0.32; }
.lx-blob--petal { color: var(--lx-pink-500); }
.lx-blob--foam { color: var(--lx-sea-500); }
.lx-blob--peach { color: var(--lx-peach); }
.lx-blob--sand { color: var(--lx-dune); }
.lx-blob svg { rotate: -8deg; }

/* ---- FitX-Style Mobile Bottom-Bar + Fullscreen-Menü ---- */
.lx-tabbar { display: none; }
@media (max-width: 52rem) {
  .lx-stickybar { display: none; }
  .lx-tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--lx-z-sticky);
    background: var(--lx-navy); padding: 0.4rem 0.4rem calc(0.4rem + env(safe-area-inset-bottom));
  }
  .lx-tabbar a, .lx-tabbar button {
    display: grid; justify-items: center; gap: 0.15rem; background: none; border: 0;
    color: var(--lx-text-inv-soft); text-decoration: none; font-size: 0.68rem; font-weight: 600;
    padding: 0.35rem 0.2rem; border-radius: var(--lx-r-sm); cursor: pointer;
  }
  .lx-tabbar .lx-icon { inline-size: 1.5rem; block-size: 1.5rem; color: currentColor; }
  .lx-tabbar a[aria-current="page"], .lx-tabbar a:active { color: var(--lx-pink-ondark); }
  .lx-tabbar__cta { color: var(--lx-text-inv) !important; background: var(--lx-cta) !important; }
  body { padding-block-end: 4.6rem; }
  body:has(.lx-stickybar.is-visible) { padding-block-end: 4.6rem; }
  /* Fullscreen-Menü (FitX-artig) */
  .lx-nav__links {
    position: fixed; inset: 0; block-size: auto; padding-block-end: 6rem;
    background: var(--lx-navy); border: 0; padding: 5rem var(--lx-gutter) var(--lx-space-l);
    gap: var(--lx-space-m); z-index: var(--lx-z-nav);
  }
  .lx-nav__links a { color: var(--lx-text-inv); font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-h2); padding: 0; background: none !important; }
  .lx-nav__links a[aria-current="page"] { color: var(--lx-pink-ondark); }
  .lx-nav__cta-li { margin-block-start: var(--lx-space-m); }
  .lx-nav__cta-li a { font-size: var(--lx-text-h3); color: var(--lx-text-inv) !important; background: var(--lx-cta) !important; padding: 0.6em 1em; }
  .lx-header:has(.lx-nav__toggle:checked) { position: relative; z-index: 55; }
  .lx-header:has(.lx-nav__toggle:checked) .lx-nav__burger { position: fixed; inset-block-start: 1rem; inset-inline-end: var(--lx-gutter); z-index: 60; background: var(--lx-navy-raised); border-color: var(--lx-navy-raised); }
  .lx-header:has(.lx-nav__toggle:checked) .lx-nav__burger span { background: transparent; }
  .lx-header:has(.lx-nav__toggle:checked) .lx-nav__burger span::before, .lx-header:has(.lx-nav__toggle:checked) .lx-nav__burger span::after { background: var(--lx-text-inv); }
  body:has(.lx-nav__toggle:checked) { overflow: hidden; }
}

/* Header: oben transparent, ab Scroll-Start Liquid-Glass (Desktop sticky) */
.lx-header, .lx-header .lx-nav { background: none; border: 0; box-shadow: none; }
@media (min-width: 52rem) {
  .lx-header { position: sticky; inset-block-start: 0; z-index: var(--lx-z-nav); transition: background var(--lx-dur) var(--lx-ease), backdrop-filter var(--lx-dur) var(--lx-ease); }
  .lx-header.is-scrolled { background: color-mix(in srgb, var(--lx-bg) 52%, transparent); backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35); border-block-end: 1px solid color-mix(in srgb, var(--lx-line) 55%, transparent); }
}

/* Artikel-Bausteine */
.lx-artfacts, .lx-arttoc { border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); padding: var(--lx-space-s); background: color-mix(in srgb, var(--lx-bg) 70%, transparent); margin-block: var(--lx-space-s); }
.lx-artfacts ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.lx-artfacts li { display: flex; gap: 0.6rem; align-items: center; font-size: var(--lx-text-sm); }
.lx-artfacts .lx-icon { inline-size: 1.6rem; block-size: 1.6rem; }
.lx-arttoc ol { padding-inline-start: 1.2rem; display: grid; gap: 0.3rem; font-size: var(--lx-text-sm); }
.lx-arttoc a { text-decoration: none; } .lx-arttoc a:hover { text-decoration: underline; }
@media (min-width: 52rem) { .lx-artwrap:has(.lx-artfacts) { display: grid; grid-template-columns: 3fr 2fr; gap: var(--lx-space-m); align-items: start; } }
.lx-artauthor { display: grid; grid-template-columns: auto 1fr; gap: var(--lx-space-s); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); padding: var(--lx-space-s); margin-block-start: var(--lx-space-l); align-items: center; }
.lx-artauthor img { inline-size: 4.5rem; aspect-ratio: 3/4; object-fit: cover; }
.lx-artauthor b { font-family: var(--lx-font-display); }
.lx-artauthor span { display: block; font-size: var(--lx-text-xs); color: var(--lx-ink-soft); }

/* ---- Mobile-Fixpaket V5 ---- */
@media (max-width: 52rem) {
  /* Slider: links Luft + Snap-Padding */
  .lx-slider { padding-inline: var(--lx-gutter); scroll-padding-inline-start: var(--lx-gutter); margin-inline: calc(-1 * var(--lx-gutter)); }
  /* Schritte + Pakete swipeable */
  .lx-steps, .lx-cards__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--lx-space-s); padding-inline: var(--lx-gutter); scroll-padding-inline-start: var(--lx-gutter); margin-inline: calc(-1 * var(--lx-gutter)); padding-block-end: var(--lx-space-s); scrollbar-width: thin; scrollbar-color: var(--lx-dune) transparent; }
  .lx-steps > li { flex: 0 0 78vw; scroll-snap-align: start; }
  .lx-cards__grid > * { flex: 0 0 82vw; scroll-snap-align: start; }
  /* Hand-Doodles nicht hinter Hero-Text */
  .lx-hero .lx-blob { display: none; }
  .lx-blob { opacity: 0.18; }
  /* Nur EIN Menü-Zugang: oberer Burger weg, Tabbar übernimmt */
  .lx-nav__burger { display: none !important; }
  /* Sprachwahl im Fullscreen-Menü sichtbar als Reihe */
  .lx-nav__links .lang-switch { position: static; }
  .lx-nav__links .lang-switch-menu { position: static; display: flex !important; flex-wrap: wrap; gap: 0.4rem; background: none; border: 0; padding: 0; min-inline-size: 0; }
  .lx-nav__links .lang-switch-menu button { color: var(--lx-text-inv); font-size: var(--lx-text-base); background: var(--lx-navy-raised); border-radius: var(--lx-r-sm); padding: 0.5em 0.8em; }
  .lx-nav__links .lang-switch-menu button[aria-current="true"] { background: var(--lx-pink-100); color: var(--lx-pink-700); }
  .lx-nav__links .lang-switch-btn { display: none; }
}

/* Preiskarten V3 (Basic-Fit-Anatomie) + Diagonalen */
.lx-membercard { border-width: 2px; border-color: var(--lx-line); gap: var(--lx-space-xs); }
.lx-membercard--petal { border-color: var(--lx-ink); }
.lx-membercard li { display: flex; gap: 0.55rem; align-items: center; padding-inline-start: 0; }
.lx-membercard li::before { display: none; }
.lx-membercard li .lx-icon { inline-size: 1.35rem; block-size: 1.35rem; color: var(--lx-sea-700); flex: none; }
.lx-membercard .lx-btn { inline-size: 100%; }
.lx-billet { display: inline-flex; align-items: center; justify-content: center; line-height: 1; text-align: center; background: var(--lx-navy); color: var(--lx-text-inv); font-size: var(--lx-text-xs); font-weight: 600; padding: 0.3em 0.7em; border-radius: var(--lx-r-sm); }
.lx-diag { clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%); }
.lx-diag--r { clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%); }
.lx-mini-team { display: flex; gap: var(--lx-space-s); align-items: center; }
.lx-mini-team img { inline-size: 4.2rem; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 2px solid var(--lx-bg); }
.lx-mini-team picture { margin-inline-start: -1.2rem; display: inline-block; }
.lx-mini-team picture:first-of-type { margin-inline-start: 0; }

/* Preiskarten V4: Discount-Feeling */
.lx-membercard__photo { margin: calc(-1 * var(--lx-space-m)) calc(-1 * var(--lx-space-m)) 0; }
.lx-membercard__photo img { inline-size: 100%; block-size: clamp(10rem, 17vw, 13rem); object-fit: cover; object-position: center 62%; border-radius: var(--lx-r-md) var(--lx-r-md) 0 0; }
.lx-pricetag { position: relative; display: inline-block; font-family: var(--lx-font-display); font-weight: 800; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; color: var(--lx-ink); }
.lx-pricetag::before { content: attr(data-price); position: absolute; inset: 0; -webkit-text-stroke: 10px var(--lx-bg); z-index: -1; }
.lx-pricetag small { font-family: var(--lx-font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0; -webkit-text-stroke: 0; }
.lx-sticker { position: absolute; inset-block-start: -0.9rem; inset-inline-end: -0.5rem; rotate: 8deg; background: var(--lx-pink-500); color: var(--lx-ink); font-family: var(--lx-font-marker); font-weight: 700; font-size: 1.25rem; padding: 0.2em 0.55em; border-radius: var(--lx-r-sm); border: 2px solid var(--lx-bg); }
.lx-membercard { position: relative; }
.lx-membercard__was { color: var(--lx-ink-soft); font-size: var(--lx-text-sm); }
@media (min-width: 40rem) { .lx-membercard--petal { scale: 1.05; z-index: 2; border-width: 3px; } }

/* ============ Standorte V2 + Reviews + Micro-Animationen ============ */
/* Google-Badge */
.lx-gbadge { display: inline-flex; align-items: center; gap: 0.4em; background: var(--lx-bg); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); padding: 0.35em 0.7em; font-size: var(--lx-text-sm); }
.lx-gbadge b { font-family: var(--lx-font-display); font-weight: 800; }
.lx-gbadge__sub { color: var(--lx-ink-soft); font-size: var(--lx-text-xs); }
.lx-gg { inline-size: 1.05em; block-size: 1.05em; }
.lx-stars { color: var(--lx-peach); letter-spacing: 0.08em; }
.lx-dark .lx-gbadge { background: var(--lx-navy-raised); border-color: var(--lx-navy-raised); color: var(--lx-text-inv); }

/* Review-Karten + Auto-Rotation */
.lx-reviewcard { inline-size: clamp(16rem, 40vw, 21rem); flex: 0 0 auto; scroll-snap-align: start; border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); background: var(--lx-bg); padding: var(--lx-space-s); display: grid; gap: 0.5rem; margin: 0; }
.lx-reviewcard__head { display: flex; align-items: center; gap: 0.4rem; }
.lx-reviewcard blockquote { margin: 0; font-size: var(--lx-text-sm); line-height: 1.55; }
.lx-reviewcard figcaption { display: flex; gap: 0.5rem; align-items: baseline; }
.lx-reviewcard figcaption b { font-family: var(--lx-font-display); }
.lx-reviewcard figcaption span { color: var(--lx-ink-soft); font-size: var(--lx-text-xs); }
@keyframes lx-autoscroll { to { translate: -50% 0; } }
.lx-slider--auto { scroll-snap-type: none; overflow: hidden; }
.lx-slider--auto:hover, .lx-slider--auto:focus-within { overflow-x: auto; scroll-snap-type: x mandatory; }
.lx-slider--auto > * { animation: none; }
.lx-slider--auto { --dur: 55s; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lx-slider--auto { display: flex; }
  .lx-slider--auto:not(:hover):not(:focus-within) { mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
}

/* Standort-Übersicht: Diagonal-Hero mit Overlay-Box */
.lx-lochero { position: relative; margin-block-start: -4.4rem; }
@media (max-width: 52rem) { .lx-lochero { margin-block-start: 0; } }
.lx-lochero__img { clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%); }
.lx-lochero__img img { inline-size: 100%; block-size: clamp(16rem, 42vw, 26rem); object-fit: cover; border-radius: 0; }
.lx-lochero__box { position: relative; margin-block-start: calc(-1 * var(--lx-space-xl)); z-index: 2; background: var(--lx-bg); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); padding: var(--lx-space-m); display: grid; gap: var(--lx-space-s); max-inline-size: 46rem; }
.lx-lochero__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Standort-Karten + Deutschland-Map */
.lx-loccard { border: 2px solid var(--lx-line); border-radius: var(--lx-r-md); overflow: hidden; background: var(--lx-bg); display: grid; text-decoration: none; color: var(--lx-ink); position: relative; transition: border-color var(--lx-dur-fast) var(--lx-ease); }
.lx-loccard:hover { border-color: var(--lx-ink); }
.lx-loccard img { inline-size: 100%; block-size: clamp(9rem, 16vw, 12rem); object-fit: cover; border-radius: 0; }
.lx-loccard__body { padding: var(--lx-space-s); display: grid; gap: 0.45rem; justify-items: start; }
.lx-loccard__city { font-family: var(--lx-font-display); font-weight: 800; font-size: var(--lx-text-h3); }
.lx-loccard__meta { display: flex; flex-wrap: wrap; gap: 0.7rem; color: var(--lx-ink-soft); font-size: var(--lx-text-xs); }
.lx-loccard__meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.lx-loccard__meta .lx-icon { inline-size: 1.1rem; block-size: 1.1rem; }
.lx-loccard--soonface { filter: saturate(0.75); }
.lx-demap { position: relative; }
.lx-demap svg { inline-size: 100%; block-size: auto; color: var(--lx-dune); }
.lx-demap__pin { position: absolute; translate: -50% -90%; display: grid; justify-items: center; gap: 0.1rem; }
.lx-demap__pin .lx-icon { inline-size: 2rem; block-size: 2rem; color: var(--lx-pink-700); }
.lx-demap__pin span { font-size: var(--lx-text-xs); font-weight: 600; background: var(--lx-bg); border: 1px solid var(--lx-line); border-radius: var(--lx-r-sm); padding: 0.1em 0.4em; }
.lx-demap__pin--soon .lx-icon { color: var(--lx-sea-700); }

/* Location-Detail: Kontakt-Boxen, Verfügbarkeit, Countdown */
.lx-infogrid { display: grid; gap: var(--lx-space-s); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .lx-infogrid { grid-template-columns: repeat(3, 1fr); } }
.lx-infobox { border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); background: var(--lx-bg); padding: var(--lx-space-s); display: grid; gap: 0.5rem; align-content: start; }
.lx-infobox__head { display: flex; align-items: center; gap: 0.5rem; font-family: var(--lx-font-display); font-weight: 700; }
.lx-infobox__head .lx-icon { inline-size: 1.6rem; block-size: 1.6rem; }
.lx-infobox table { font-size: var(--lx-text-sm); border-collapse: collapse; inline-size: 100%; }
.lx-infobox td { padding-block: 0.25rem; border-block-end: 1px solid var(--lx-line); }
.lx-infobox td:last-child { text-align: end; }
.lx-btn--wa { background: var(--lx-sea-700); color: var(--lx-text-inv); display: inline-flex; gap: 0.5em; }
.lx-btn--wa svg { inline-size: 1.2em; block-size: 1.2em; }
.lx-availbar { border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); background: var(--lx-bg); padding: var(--lx-space-s); display: grid; gap: 0.5rem; }
.lx-availbar__track { block-size: 10px; border-radius: 5px; background: var(--lx-bg-alt); overflow: hidden; }
.lx-availbar__fill { block-size: 100%; background: var(--lx-grad-cta); border-radius: 5px; transition: width 0.8s var(--lx-ease); }
.lx-availbar b { color: var(--lx-pink-700); }
.lx-countdown { display: flex; gap: 0.6rem; }
.lx-countdown div { display: grid; justify-items: center; background: var(--lx-navy); color: var(--lx-text-inv); border-radius: var(--lx-r-sm); padding: 0.45rem 0.6rem; min-inline-size: 3.2rem; }
.lx-countdown b { font-family: var(--lx-font-display); font-size: var(--lx-text-h3); line-height: 1; }
.lx-countdown span { font-size: 0.6rem; color: var(--lx-text-inv-soft); }
.lx-artcard--slide { inline-size: clamp(15rem, 38vw, 19rem); flex: 0 0 auto; scroll-snap-align: start; }
.lx-artcard--slide img { aspect-ratio: 16/9; object-fit: cover; inline-size: 100%; border-radius: var(--lx-r-md); }

/* Handgezeichnete Micro-Animationen (fein, loopend) */
@keyframes lx-wiggle { 0%,100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
@keyframes lx-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes lx-drawloop { 0% { stroke-dashoffset: 260; opacity: 0.25; } 45%,70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -260; opacity: 0.25; } }
.lx-anim-wiggle { animation: lx-wiggle 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
.lx-anim-bob { animation: lx-bob 2.8s ease-in-out infinite; }
.lx-anim-draw path:not(.ghost) { stroke-dasharray: 260; animation: lx-drawloop 4.5s ease-in-out infinite; }
.lx-usp .lx-icon, .lx-footer__trust .lx-icon, .lx-infobox__head .lx-icon { animation: lx-bob 3.4s ease-in-out infinite; }
.lx-usp:nth-child(2) .lx-icon, .lx-footer__trust div:nth-child(2) .lx-icon { animation-delay: 0.6s; }
.lx-usp:nth-child(3) .lx-icon, .lx-footer__trust div:nth-child(3) .lx-icon { animation-delay: 1.2s; }
.lx-demap__pin .lx-icon { animation: lx-bob 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lx-anim-wiggle, .lx-anim-bob, .lx-anim-draw path, .lx-usp .lx-icon, .lx-footer__trust .lx-icon, .lx-infobox__head .lx-icon, .lx-demap__pin .lx-icon { animation: none; } }

/* Handschrift-Overlay auf dem Hero-Foto */
.lx-heroscript {
  position: absolute; z-index: 2; inset-block-start: 6%; inset-inline-start: -6%;
  font-family: var(--lx-font-marker); font-weight: 700; rotate: -5deg;
  font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); line-height: 1; color: var(--lx-bg);
  -webkit-text-stroke: 0.7px var(--lx-bg);
  text-shadow: 0 2px 10px rgba(25, 29, 58, 0.45), 0 1px 3px rgba(25, 29, 58, 0.35);
  pointer-events: none; white-space: nowrap;
}
/* Seit das Foto auf Mobil randlos läuft, klebte der Schriftzug am Displayrand.
   Etwas eingerückt und eine Spur kleiner, damit er rechts nicht anstößt. */
@media (max-width: 52rem) {
  .lx-heroscript {
    inset-inline-start: 7%; inset-block-start: 4%;
    font-size: clamp(1.85rem, 7.6vw, 2.6rem);
  }
}

/* Review-Box im GroomRoom-Stil: EINE Box, Bewertungen sliden darin */
.lx-reviewbox { border: 2px solid var(--lx-line); border-radius: var(--lx-r-md); background: var(--lx-bg); padding: var(--lx-space-m); max-inline-size: 44rem; margin-inline: auto; display: grid; gap: var(--lx-space-s); }
.lx-reviewbox__head { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.lx-reviewbox__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lx-reviewbox__track::-webkit-scrollbar { display: none; }
.lx-reviewbox__slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; gap: 0.6rem; text-align: center; padding-inline: var(--lx-space-s); }
.lx-reviewbox__slide blockquote { margin: 0; font-size: var(--lx-text-lg); line-height: 1.5; font-weight: 500; }
.lx-reviewbox__slide figcaption { color: var(--lx-ink-soft); font-size: var(--lx-text-sm); }
.lx-reviewbox__dots { display: flex; justify-content: center; gap: 0.45rem; }
.lx-reviewbox__dots button { inline-size: 8px; block-size: 8px; border-radius: 50%; border: 0; background: var(--lx-line); cursor: pointer; padding: 0; }
.lx-reviewbox__dots button[aria-current="true"] { background: var(--lx-pink-500); }
.lx-mappanel { display: grid; gap: var(--lx-space-s); align-content: start; }
.lx-mappanel__chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.lx-mappanel__chips .lx-btn { padding-block: 0.5em; padding-inline: 0.9em; font-size: var(--lx-text-sm); display: inline-flex; gap: 0.4em; }
.lx-mappanel__chips .lx-btn .lx-icon { inline-size: 1.1rem; block-size: 1.1rem; animation: none; }
.lx-mappanel__chips .lx-btn.is-active { border-color: var(--lx-ink); background: var(--lx-bg); }
.lx-map--tall { aspect-ratio: auto; block-size: clamp(22rem, 46vw, 30rem); }

/* ============ Slider-UX: Drag + Wheel + Pfeile, ohne Scrollbar ============ */
.lx-slider, .lx-steps, .lx-cards__grid, .lx-reviewbox__track {
  scrollbar-width: none;
}
.lx-slider::-webkit-scrollbar, .lx-steps::-webkit-scrollbar, .lx-cards__grid::-webkit-scrollbar, .lx-reviewbox__track::-webkit-scrollbar { display: none; }
.lx-slider { cursor: grab; }
.lx-slider.is-dragging, .lx-reviewbox__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.lx-slider.is-dragging a, .lx-slider.is-dragging img { pointer-events: none; }
.lx-sliderwrap { position: relative; }
.lx-sliderarrow {
  position: absolute; inset-block-start: 50%; translate: 0 -50%; z-index: 5;
  inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%;
  border: 1px solid var(--lx-line); background: color-mix(in srgb, var(--lx-bg) 92%, transparent);
  display: grid; place-items: center; cursor: pointer; color: var(--lx-ink);
  transition: opacity var(--lx-dur-fast) var(--lx-ease), background var(--lx-dur-fast) var(--lx-ease);
}
.lx-sliderarrow:hover { background: var(--lx-pink-100); color: var(--lx-pink-700); border-color: var(--lx-pink-500); }
.lx-sliderarrow svg { inline-size: 1.1rem; block-size: 1.1rem; }
.lx-sliderarrow--prev { inset-inline-start: 0.4rem; }
.lx-sliderarrow--next { inset-inline-end: 0.4rem; }
.lx-sliderarrow[hidden] { display: none; }
@media (pointer: coarse) { .lx-sliderarrow { display: none; } }

/* Corner-Ribbon „LEIPZIG OPENING!" (oben rechts, sitewide) */
.lx-cornerribbon {
  position: fixed; inset-block-start: 2.1rem; inset-inline-end: -3.6rem; z-index: 70;
  rotate: 45deg;
  background: var(--lx-grad-cta); color: var(--lx-ink);
  font-family: var(--lx-font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.05em;
  min-inline-size: 15rem; text-align: center;
  padding: 0.5em 3em; text-decoration: none; white-space: nowrap;
  border-block: 2px solid var(--lx-bg);
}
.lx-cornerribbon:hover { filter: brightness(0.96); }
@media (max-width: 74rem) { .lx-nav { padding-inline-end: 3rem; } }
@media (max-width: 52rem) {
  .lx-cornerribbon { font-size: 0.6rem; inset-block-start: 1.7rem; inset-inline-end: -3.4rem; min-inline-size: 12.5rem; padding: 0.45em 2.4em; }
  .lx-nav { padding-inline-end: 2.6rem; }
}

/* ============ Sichtbare Handdrawn-Animationen (Draw-in beim Scrollen) ============ */
.lx-icon path { stroke-dasharray: 300; stroke-dashoffset: 300; }
.lx-icon.lx-inview path { animation: lx-drawin 0.9s var(--lx-ease) forwards; }
.lx-icon.lx-inview path.ghost { animation-delay: 0.15s; }
@keyframes lx-drawin { to { stroke-dashoffset: 0; } }
.lx-doodle-underline path, .lx-doodle-circle path, .lx-doodle-arrow path { stroke-dasharray: 620; stroke-dashoffset: 620; animation: none; }
.lx-doodle-underline.lx-inview path, .lx-doodle-circle.lx-inview path, .lx-doodle-arrow.lx-inview path { animation: lx-draw 1.1s ease-out forwards; }
.lx-sticker { scale: 0; }
.lx-sticker.lx-inview { animation: lx-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes lx-pop { from { scale: 0; rotate: -12deg; } to { scale: 1; rotate: 8deg; } }
.lx-mark { opacity: 0; translate: 0 6px; transition: opacity 0.5s var(--lx-ease), translate 0.5s var(--lx-ease); }
.lx-mark.lx-inview { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .lx-icon path, .lx-doodle-underline path, .lx-doodle-circle path, .lx-doodle-arrow path { stroke-dashoffset: 0; animation: none; }
  .lx-sticker { scale: 1; } .lx-mark { opacity: 1; translate: none; }
}

/* ============ Zonen-Detail V2: plakativ ============ */
.lx-zstat { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: var(--lx-space-s); }
.lx-zstat span { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--lx-line); background: var(--lx-bg); border-radius: var(--lx-r-md); padding: 0.4em 0.75em; font-size: var(--lx-text-sm); font-weight: 600; }
.lx-zstat .lx-icon { inline-size: 1.35rem; block-size: 1.35rem; animation: none; }
.lx-zprice { position: relative; display: inline-grid; gap: 0.15rem; margin-block: var(--lx-space-s); }
.lx-zprice .lx-pricetag { font-size: clamp(3rem, 2.4rem + 2.4vw, 4.2rem); }
.lx-zprice__was { color: var(--lx-ink-soft); font-size: var(--lx-text-sm); }
.lx-zpricepanel { border: 2px solid var(--lx-ink); border-radius: var(--lx-r-md); background: var(--lx-bg); padding: var(--lx-space-m); position: relative; display: grid; gap: var(--lx-space-s); max-inline-size: 34rem; }
.lx-zpricepanel__row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--lx-space-s); align-items: baseline; border-block-end: 1px dashed var(--lx-dune); padding-block-end: 0.6rem; }
.lx-zpricepanel__row:last-of-type { border: 0; padding-block-end: 0; }
.lx-zpricepanel__row b { font-family: var(--lx-font-display); }
.lx-zpricepanel__row .lx-pricetag { font-size: 1.7rem; }
.lx-zpricepanel__row .lx-pricetag::before { -webkit-text-stroke-width: 6px; }
.lx-zpricepanel__save { font-family: var(--lx-font-marker); font-weight: 700; color: var(--lx-pink-700); font-size: 1.15rem; rotate: -2deg; }
.lx-zbenefits { display: grid; gap: var(--lx-space-s); }
.lx-zbenefits li { display: flex; gap: var(--lx-space-s); align-items: flex-start; font-size: var(--lx-text-lg); font-weight: 600; list-style: none; }
.lx-zbenefits .lx-icon { inline-size: 2rem; block-size: 2rem; flex: none; margin-block-start: 0.1rem; }
.lx-zsticker-photo { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; z-index: 3; }

/* ============ Basic-Fit-Hero (Standorte): Foto + kräftige Diagonal-Layer ============ */
.lx-bfhero { position: relative; overflow: clip; }
.lx-bfhero__media img { inline-size: 100%; block-size: clamp(28rem, 46vw, 36rem); object-fit: cover; object-position: center 30%; border-radius: 0; }
.lx-bfhero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--lx-navy) 34%, transparent) 0%, transparent 55%); pointer-events: none; }
.lx-bfhero__panelwrap { position: absolute; inset-block-end: clamp(1.5rem, 4vw, 3rem); inset-inline-start: 0; max-inline-size: none; inline-size: min(100%, calc(max(var(--lx-gutter), (100vw - var(--lx-container)) / 2) + 42rem)); /* wächst mit dem Container-Versatz, sonst kollabiert der Text ab etwa 1.900 px (Jasper 30.10.) */ }
.lx-bfhero__back { position: absolute; inset: 0; translate: 1.1rem 1.1rem; background: var(--lx-navy); clip-path: polygon(0 0, 100% 0, calc(100% - 4.5rem) 100%, 0 100%); }
.lx-bfhero__panel { position: relative; background: var(--lx-grad-cta); color: var(--lx-ink); clip-path: polygon(0 0, 100% 0, calc(100% - 3.6rem) 100%, 0 100%); padding: clamp(1.2rem, 2.2vw, 2rem) clamp(5rem, 7vw, 6.5rem) clamp(1.2rem, 2.2vw, 2rem) max(var(--lx-gutter), calc((100vw - var(--lx-container)) / 2)); }
.lx-bfhero__panel h1 { color: var(--lx-ink); font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); line-height: 1.08; }
.lx-bfhero__panel > p:not(.lx-bfhero__ctas):not(.lx-label) { font-size: var(--lx-text-sm); max-inline-size: 30rem; }
.lx-bfhero__panel p { color: var(--lx-ink); max-inline-size: 34rem; }
.lx-bfhero__ctas { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-block-start: var(--lx-space-s); }
.lx-btn--navy { background: var(--lx-navy); color: var(--lx-text-inv); }
.lx-btn--navy:hover { background: var(--lx-navy-raised); }
.lx-btn--shell { background: var(--lx-bg); color: var(--lx-ink); box-shadow: inset 0 0 0 2px var(--lx-navy); }
.lx-btn--shell:hover { background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--lx-cta); }
.lx-bfhero__badges { display: flex; gap: 0.6rem; flex-wrap: wrap; padding-block: var(--lx-space-s); }
@media (max-width: 52rem) {
  /* Mobil wie das Vorbild: Text liegt AUF dem Foto, Scrim von unten */
  .lx-bfhero__media img { block-size: clamp(30rem, 130vw, 38rem); object-position: 62% 30%; }
  .lx-bfhero__shade { background: linear-gradient(180deg, transparent 12%, color-mix(in srgb, var(--lx-navy) 42%, transparent) 55%, color-mix(in srgb, var(--lx-navy) 86%, transparent) 100%); }
  .lx-bfhero__panelwrap { inset-block-end: 1.1rem; max-inline-size: 100%; inline-size: 100%; }
  .lx-bfhero__back { display: none; }
  .lx-bfhero__panel { background: none; clip-path: none; padding: 0 var(--lx-gutter); color: var(--lx-text-inv); }
  .lx-bfhero__panel .lx-label { color: var(--lx-pink-ondark) !important; }
  .lx-bfhero__panel h1 { color: var(--lx-text-inv); font-size: clamp(2rem, 9vw, 2.6rem); }
  .lx-bfhero__panel > p:not(.lx-bfhero__ctas):not(.lx-label) { color: var(--lx-text-inv); opacity: 0.92; }
  .lx-bfhero__ctas .lx-btn--navy { background: var(--lx-cta); color: var(--lx-text-inv); }
  .lx-bfhero__ctas .lx-btn--shell { border-color: var(--lx-bg); }
}

/* Standorte: 3er-Kartengrid + Map-Band + Wellen-Divider */
.lx-locgrid { display: grid; gap: var(--lx-space-m); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .lx-locgrid { grid-template-columns: repeat(3, 1fr); } .lx-locgrid > :nth-child(2) { translate: 0 var(--lx-space-m); } .lx-locgrid > :nth-child(3) { translate: 0 var(--lx-space-s); } }
.lx-wavediv { inline-size: min(100% - 2 * var(--lx-gutter), 46rem); margin: var(--lx-space-m) auto; color: var(--lx-sea-500); opacity: 0.7; }
.lx-waveline { stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: lx-waveloop 7s ease-in-out infinite; }
@keyframes lx-waveloop { 0% { stroke-dashoffset: 2600; } 55%, 75% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -2600; } }
@media (prefers-reduced-motion: reduce) { .lx-waveline { stroke-dashoffset: 0; animation: none; } }
.lx-mapband { position: relative; border-radius: var(--lx-r-md); overflow: hidden; border: 2px solid var(--lx-line); }
.lx-mapband .lx-map--tall { border: 0; border-radius: 0; block-size: clamp(20rem, 40vw, 27rem); }
.lx-mapband__chips { position: absolute; inset-block-start: 0.8rem; inset-inline-start: 0.8rem; z-index: 5; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.lx-mapband__chips .lx-btn { padding-block: 0.45em; padding-inline: 0.8em; font-size: var(--lx-text-sm); display: inline-flex; gap: 0.4em; border-width: 2px; }
.lx-mapband__chips .lx-btn .lx-icon { inline-size: 1.05rem; block-size: 1.05rem; animation: none; }
.lx-mapband__chips .lx-btn.is-active { border-color: var(--lx-pink-700); color: var(--lx-pink-700); }

/* ============ Loopende Handdrawn-Mini-Animationen (sitewide, dezent) ============ */
.lx-icon.lx-inview { animation: lx-wiggle 4.6s ease-in-out infinite; animation-delay: 1.4s; }
.lx-icon.lx-inview path:not(.ghost) { animation: lx-drawin 0.9s var(--lx-ease) forwards, lx-lineloop 6s 2.4s ease-in-out infinite; }
.lx-icon.lx-inview path.ghost { animation: lx-drawin 0.9s 0.15s var(--lx-ease) forwards, lx-lineloop 6s 2.7s ease-in-out infinite; }
@keyframes lx-lineloop { 0%, 100% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: 34; } }
.lx-doodle-underline.lx-inview path { animation: lx-draw 1.1s ease-out forwards, lx-lineloop 7s 3s ease-in-out infinite; }
.lx-doodle-arrow.lx-inview path { animation: lx-draw 1.1s ease-out forwards, lx-lineloop 5.5s 2.5s ease-in-out infinite; }
.lx-doodle-circle.lx-inview path { animation: lx-draw 1.1s ease-out forwards, lx-lineloop 8s 3.5s ease-in-out infinite; }
.lx-sticker.lx-inview { animation: lx-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, lx-stickerfloat 3.6s 1s ease-in-out infinite; }
@keyframes lx-stickerfloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.lx-stars { animation: lx-twinkle 2.8s ease-in-out infinite; }
@keyframes lx-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.lx-marquee i { animation: lx-sunpulse 3.4s ease-in-out infinite; }
.lx-slidehint .lx-doodle-arrow { color: var(--lx-pink-700); }
.lx-tabbar .lx-icon path { stroke-dashoffset: 0; animation: none; }
.lx-tabbar a[aria-current="page"] .lx-icon, .lx-tabbar .lx-tabbar__cta .lx-icon { animation: lx-bob 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .lx-icon.lx-inview, .lx-icon.lx-inview path, .lx-doodle-underline.lx-inview path, .lx-doodle-arrow.lx-inview path, .lx-doodle-circle.lx-inview path, .lx-sticker.lx-inview, .lx-stars, .lx-marquee i, .lx-tabbar .lx-icon { animation: none; }
}

/* Footer V4: Socials, Awards, Payments */
.lx-social { display: flex; gap: 0.6rem; margin-block-start: var(--lx-space-s); }
.lx-social a { display: grid; place-items: center; inline-size: 2.3rem; block-size: 2.3rem; border-radius: var(--lx-r-md); border: 1px solid var(--lx-navy-raised); color: var(--lx-text-inv); background: var(--lx-navy-raised); transition: background var(--lx-dur-fast) var(--lx-ease), color var(--lx-dur-fast) var(--lx-ease); }
.lx-social a:hover { background: var(--lx-pink-100); color: var(--lx-pink-700); border-color: var(--lx-pink-100); }
.lx-social svg { inline-size: 1.15rem; block-size: 1.15rem; }
.lx-footer__proof { display: grid; gap: var(--lx-space-s); border-block-start: 1px solid var(--lx-navy-raised); padding-block: var(--lx-space-m); }
@media (min-width: 52rem) { .lx-footer__proof { grid-template-columns: auto 1fr; align-items: center; } .lx-footer__pay { justify-content: flex-end; } }
.lx-footer__awards { display: flex; align-items: center; gap: var(--lx-space-s); flex-wrap: wrap; }
.lx-footer__awards img { inline-size: 4.4rem; block-size: 4.4rem; border-radius: 0; background: none; }
.lx-footer__pay { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.lx-paychip { display: grid; place-items: center; background: #FFFFFF; border-radius: var(--lx-r-sm); block-size: 1.9rem; padding-inline: 0.5rem; }
.lx-paychip svg { block-size: 1rem; inline-size: auto; }
.lx-paychip--klarna { background: #FFB3C7; }

/* Mobile-Menü: schließbar (X oben rechts + Tabbar bleibt über dem Overlay) */
.lx-nav__close-li { display: none; }
@media (max-width: 52rem) {
  .lx-tabbar { z-index: 72; }
  .lx-nav__close-li { display: block; position: absolute; inset-block-start: 1rem; inset-inline-end: var(--lx-gutter); margin: 0; }
  .lx-nav__close { display: grid; place-items: center; inline-size: 2.8rem; block-size: 2.8rem; border-radius: var(--lx-r-md); background: var(--lx-navy-raised); color: var(--lx-text-inv); cursor: pointer; }
  .lx-nav__close svg { inline-size: 1.2rem; block-size: 1.2rem; }
}
@media (min-width: 52.01rem) { .lx-nav__close-li { display: none !important; } }

/* ============ QA2-Fixpaket ============ */
@media (max-width: 52rem) {
  /* Ribbon: nicht fixed (verdeckt sonst dauerhaft Ecke) + weg bei offenem Menü */
  .lx-cornerribbon { position: absolute; }
  body:has(.lx-nav__toggle:checked) .lx-cornerribbon { display: none; }
  /* Menü: scrollbar + CTA über der Tabbar (Shorthand-Fix) */
  .lx-nav__links { padding: 4.2rem var(--lx-gutter) 7.5rem; overflow-y: auto; }
  /* Karten-Slider: Sticker nicht abschneiden */
  .lx-cards__grid { padding-block-start: 1.3rem; }
  /* Mobil-Hero-Label kräftig lesbar */
  .lx-bfhero__panel .lx-label { color: var(--lx-bg) !important; font-weight: 700; }
}
/* Review-Dots: größeres Tap-Target */
.lx-reviewbox__dots button { inline-size: 12px; block-size: 12px; }

/* Harte Overflow-Sperre: nie horizontal schiebbar */
html, body { overflow-x: clip; max-inline-size: 100vw; }
@media (max-width: 52rem) {
  html, body { overflow-x: hidden; } /* iOS-sicher; Header ist mobil nicht sticky */
  .lx-marquee { inline-size: 100vw; margin-inline: calc(-1 * var(--lx-gutter)); }
}

/* Native Touch-Sperre gegen horizontales Panning + finale Animations-Ladung */
body { touch-action: pan-y; }
.lx-bmodal__panel, .lx-map iframe, .lx-bframe iframe { touch-action: auto; }
/* Blobs (Gerät/Handstück-Linien) zeichnen sich dauerhaft in Schleife */
.lx-blob svg path { stroke-dasharray: 900; animation: lx-blobdraw 12s ease-in-out infinite; }
@keyframes lx-blobdraw { 0% { stroke-dashoffset: 900; } 45%, 65% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -900; } }
/* Rotierende Hand-Sonne */
.lx-spin-sun { inline-size: clamp(3.2rem, 6vw, 5rem); block-size: auto; color: var(--lx-peach); animation: lx-sunspin 26s linear infinite; }
@keyframes lx-sunspin { to { rotate: 360deg; } }
/* Auto-Unterstreichung unter Sektions-Headlines (per JS injiziert) */
.lx-h2doodle { display: block; inline-size: min(60%, 12rem); block-size: 0.45em; color: var(--lx-pink-500); margin-block-start: 0.15em; }
.lx-sechead:nth-of-type(even) .lx-h2doodle { color: var(--lx-sea-500); }
.lx-h2doodle path { stroke-dasharray: 620; stroke-dashoffset: 620; }
.lx-h2doodle.lx-inview path { animation: lx-draw 1s ease-out forwards, lx-lineloop 7s 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lx-blob svg path, .lx-spin-sun, .lx-h2doodle path { animation: none; stroke-dashoffset: 0; } }
.fn-modal__title { font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-h3); }

/* R2-9: Kontraste + Tap-Targets + i18n ohne CLS */
.lx-dark .lx-gbadge__sub { color: var(--lx-text-inv-soft); }
.lx-dark .lx-gbadge b, .lx-dark .lx-gbadge .lx-stars { color: var(--lx-text-inv); }
.lx-countdown span { color: #D7DBEC; }
.lx-reviewbox__dots button { inline-size: 24px; block-size: 24px; background: none; border: 0; display: grid; place-items: center; }
.lx-reviewbox__dots button::before { content: ""; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--lx-line); }
.lx-reviewbox__dots button[aria-current="true"]::before { background: var(--lx-pink-500); }
html.lx-i18n-pending body { opacity: 0; }
.lx-artauthor--hero { margin-block-start: var(--lx-space-m); max-inline-size: 26rem; background: color-mix(in srgb, var(--lx-bg) 72%, transparent); }
.lx-artauthor--hero img { inline-size: 3.4rem; }

/* R2-10-Politur */
.lx-annotated--tight .lx-doodle-circle { inset: -0.2em -0.35em; inline-size: calc(100% + 0.7em); block-size: calc(100% + 0.4em); }
.lx-bframe { block-size: auto; }
.lx-bframe:has(iframe) { block-size: min(78dvh, 56rem); }
@media (max-width: 52rem) {
  /* Preistabellen: kompakter + Wisch-Affordance */
  .lx-table th, .lx-table td { white-space: nowrap; font-size: var(--lx-text-xs); padding: 0.5rem 0.6rem; }
  .lx-table-wrap { position: relative; }
  .lx-table-wrap::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 2.2rem; background: linear-gradient(270deg, var(--lx-bg), transparent); pointer-events: none; }
  .lx-table-wrap::before { content: "→"; position: absolute; inset-block-start: -1.4rem; inset-inline-end: 0; font-family: var(--lx-font-marker); font-weight: 700; color: var(--lx-pink-700); font-size: 1.1rem; }
}
.lx-availbar { background: var(--lx-bg); }
.lx-availbar b { color: var(--lx-ink); }
.lx-countdown b { color: var(--lx-text-inv); }

/* ============ Breiten-Upgrade: Artikel-Editorial + 2-spaltige FAQs ============ */
.lx-artlayout { display: grid; gap: var(--lx-space-l); padding-block: var(--lx-space-l); grid-template-columns: 1fr; }
@media (min-width: 64rem) {
  .lx-artlayout { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; }
  .lx-artrail { position: sticky; inset-block-start: 5rem; display: grid; gap: var(--lx-space-s); }
  .lx-artmain { max-inline-size: none; }
  .lx-artmain > p, .lx-artmain > ul { max-inline-size: 62ch; }
}
.lx-artrail .lx-artfacts, .lx-artrail .lx-arttoc { margin-block: 0; }
.lx-artrail .lx-artauthor { margin-block-start: 0; }
/* FAQs: zweispaltig auf breiten Screens */
@media (min-width: 64rem) {
  .lx-faq { grid-template-columns: 1fr 1fr; align-items: start; }
  .lx-faq details { break-inside: avoid; }
}
/* Artikel-FAQ + Ticket auf volle Containerbreite */
.lx-artwrap:has(.lx-faq) { max-inline-size: var(--lx-container); }

/* Artikel: Lücken schließen, Magazin-Dichte */
.lx-artlayout { padding-block: var(--lx-space-m) var(--lx-space-l); }
.lx-artmain > :first-child, .lx-artmain > h2:first-child { margin-block-start: 0 !important; }
.lx-artbody h2:first-of-type { margin-block-start: 0; }
article .lx-hero { padding-block-end: var(--lx-space-m); }
@media (min-width: 64rem) {
  .lx-artmain { font-size: var(--lx-text-lg); }
  .lx-artmain .lx-table-wrap, .lx-artmain figure { max-inline-size: none; }
}

/* ============================================================
   Hero-Bühne: Foto + freigestelltes Gerät + Hinweis-Badge
   ============================================================ */
.lx-herostage { position: relative; }
.lx-herostage .lx-hero__ci { position: relative; z-index: 1; }

/* Das Gerät steht vor dem Foto, halb darüber hinaus: es soll aus dem Bild
   heraustreten, nicht darin schwimmen. */
.lx-herodevice {
  position: absolute;
  z-index: 3;
  inset-block-end: -1.5rem;
  inset-inline-start: -3.5rem;
  inline-size: clamp(9rem, 17vw, 14.5rem);
  block-size: auto;
  filter: drop-shadow(0 22px 20px color-mix(in srgb, var(--lx-navy) 22%, transparent));
  pointer-events: none;
}

.lx-whybadge {
  position: absolute;
  z-index: 4;
  /* Sitzt auf der unteren rechten Fotoecke und ragt darüber hinaus: so wirkt er
     wie ein aufgeklebter Sticker und verdeckt nichts vom Motiv. */
  inset-block-end: -2.25rem;
  inset-inline-end: -2.5rem;
  inline-size: clamp(8.5rem, 12vw, 10.5rem);
  aspect-ratio: 1;
  display: block;
  text-decoration: none;
  color: #16130A;
  rotate: -6deg;
  transition: rotate .25s ease, scale .25s ease;
}
.lx-whybadge:hover, .lx-whybadge:focus-visible { rotate: -2deg; scale: 1.04; }
.lx-whybadge__disc {
  display: grid; align-content: center; justify-items: center; gap: 0.28rem;
  inline-size: 100%; block-size: 100%;
  border-radius: 50%;
  padding: 1.15rem 1.35rem;
  text-align: center;
  background: var(--lx-grad-sun);
  box-shadow: 0 14px 26px color-mix(in srgb, var(--lx-navy) 26%, transparent),
              inset 0 0 0 1px color-mix(in srgb, #16130A 12%, transparent);
}
.lx-whybadge__eyebrow {
  font-family: var(--lx-font-body);
  font-size: 0.6875rem; letter-spacing: .04em; opacity: .72;
}
.lx-whybadge__text {
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: clamp(0.78125rem, 0.95vw, 0.875rem);
  line-height: 1.22;
  text-wrap: balance;
}
.lx-whybadge__hint {
  font-family: var(--lx-font-marker);
  font-size: 1rem; line-height: 1;
  opacity: .8;
}

/* Handcursor: ragt von unten rechts in den Badge und tippt ihn an. */
.lx-handcue {
  position: absolute;
  inset-block-end: -0.9rem;
  inset-inline-start: -0.9rem;
  inline-size: clamp(2.7rem, 3.5vw, 3.5rem);
  color: var(--lx-ink);
  scale: -1 1;                 /* Finger zeigt nach rechts oben in den Sticker */
  rotate: 12deg;
  transform-origin: 70% 90%;
  animation: lx-tap 2.6s ease-in-out infinite;
  filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--lx-navy) 26%, transparent));
}
@keyframes lx-tap {
  0%, 62%, 100% { translate: 0 0; }
  72%           { translate: -0.35rem -0.5rem; }
  82%           { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-handcue { animation: none; }
  .lx-whybadge { transition: none; }
}

@media (max-width: 52rem) {
  /* Auf dem Foto steht bereits ein Gerät. Der Freisteller muss deshalb deutlich
     über den Bildrand hinausragen, sonst liest er sich als zweites Gerät in der Szene. */
  .lx-herodevice { inline-size: 9.25rem; inset-inline-start: -1.5rem; inset-block-end: -1.75rem; }
  /* Auf dem Handy komplett im Bild: oben rechts läuft er in den Schriftzug
     „Echter Alexandritlaser!", unten rechts ist die Fläche frei. */
  .lx-whybadge { inline-size: 7.5rem; inset-block-end: 1rem; inset-inline-end: 1rem; }
  .lx-handcue { inline-size: 2.3rem; inset-block-end: -0.8rem; inset-inline-start: -0.6rem; }
}

/* ============================================================
   Lightbox „Warum Alexandrit?"
   ============================================================ */
.lx-whymodal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--lx-navy) 62%, transparent);
  backdrop-filter: blur(6px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lx-whymodal[hidden] { display: none; }
.lx-whymodal__panel {
  position: relative;
  inline-size: min(58rem, 100%);
  max-block-size: min(90dvh, 60rem);
  overflow-y: auto;
  background: var(--lx-bg);
  border-radius: var(--lx-r-md);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  box-shadow: 0 30px 70px color-mix(in srgb, var(--lx-navy) 45%, transparent);
}
.lx-whymodal__close {
  position: absolute; inset-block-start: 0.85rem; inset-inline-end: 0.85rem;
  inline-size: 2.5rem; block-size: 2.5rem;
  display: grid; place-items: center;
  border: 0; border-radius: var(--lx-r-sm);
  background: var(--lx-bg-alt); color: var(--lx-ink);
  cursor: pointer;
}
.lx-whymodal__close svg { inline-size: 1.1rem; block-size: 1.1rem; }
/* Platz für den Schließen-Knopf, sonst läuft die Headline darunter durch. */
.lx-whymodal .lx-label, .lx-whymodal__h { padding-inline-end: 3.25rem; }
.lx-whymodal__h { margin-block: 0.25rem 0.6rem; }
.lx-whymodal .lx-lead { margin-block-end: var(--lx-space-m); }

.lx-whymodal__lead {
  font-size: var(--lx-text-lg); line-height: 1.5; color: var(--lx-ink-soft);
  margin-block: 0 var(--lx-space-s); max-inline-size: 46ch;
}

.lx-whygrid {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-block-end: var(--lx-space-s);
}
.lx-whycard {
  border-radius: var(--lx-r-md);
  padding: 0.95rem 1.05rem 1rem;
  background: var(--lx-sea-100);
}
.lx-whycard--muted { background: var(--lx-bg-alt); }
.lx-whycard__nm {
  font-family: var(--lx-font-display); font-weight: 700;
  font-size: 0.8125rem; letter-spacing: .04em; color: var(--lx-sea-700);
  margin: 0.55rem 0 0.3rem;
}
.lx-whycard--muted .lx-whycard__nm { color: var(--lx-ink-soft); }
.lx-whycard__cl {
  font-family: var(--lx-font-display); font-weight: 700;
  font-size: var(--lx-text-lg); line-height: 1.25; margin: 0 0 0.35rem;
  text-wrap: balance;
}
.lx-whycard__sub {
  font-family: var(--lx-font-marker); font-size: 1.0625rem; line-height: 1;
  color: var(--lx-ink-soft); margin: 0;
}

.lx-whymodal__mid {
  font-family: var(--lx-font-marker); font-size: 1.5rem; line-height: 1;
  margin: 0 0 0.6rem;
}
.lx-whylist { list-style: none; margin: 0 0 var(--lx-space-s); padding: 0; display: grid; gap: 0.4rem; }
.lx-whylist li {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.6rem 0.85rem; border-radius: var(--lx-r-md);
  background: var(--lx-bg-alt);
}
/* Eine Zeile je Alternative: der Vergleich ist so schneller zu erfassen und
   die Lightbox bleibt auf einen Blick lesbar. */
.lx-whylist li span { display: flex; flex-wrap: wrap; gap: 0.1rem 0.5rem; align-items: baseline; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.lx-whylist li b { font-size: var(--lx-text-base); color: var(--lx-ink); }
.lx-whylist__win { background: var(--lx-pink-100); }
.lx-whylist__win b { color: var(--lx-pink-700); }

/* Sketch-Icons zeichnen sich beim Öffnen selbst (pathLength=1 im Markup). */
.lx-sketch { inline-size: 2.75rem; block-size: 2.75rem; color: var(--lx-sea-700); flex: none; }
.lx-whycard--muted .lx-sketch { color: var(--lx-ink-soft); }
.lx-whylist .lx-sketch { inline-size: 2.1rem; block-size: 2.1rem; color: var(--lx-ink-soft); }
.lx-whylist__win .lx-sketch { color: var(--lx-pink-700); }
.lx-sketch path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.lx-whymodal:not([hidden]) .lx-sketch path { animation: lx-draw .7s ease forwards; }
@keyframes lx-draw { to { stroke-dashoffset: 0; } }

/* Inhalt staffelt sich herein, damit das Auge der Reihenfolge folgt. */
.lx-whymodal:not([hidden]) .lx-whycard,
.lx-whymodal:not([hidden]) .lx-whylist li { animation: lx-rise .45s ease both; }
.lx-whymodal:not([hidden]) .lx-whycard:nth-child(1)   { animation-delay: .04s }
.lx-whymodal:not([hidden]) .lx-whycard:nth-child(2)   { animation-delay: .12s }
.lx-whymodal:not([hidden]) .lx-whycard:nth-child(3)   { animation-delay: .2s }
.lx-whymodal:not([hidden]) .lx-whylist li:nth-child(1){ animation-delay: .26s }
.lx-whymodal:not([hidden]) .lx-whylist li:nth-child(2){ animation-delay: .32s }
.lx-whymodal:not([hidden]) .lx-whylist li:nth-child(3){ animation-delay: .38s }
.lx-whymodal:not([hidden]) .lx-whycard:nth-child(2) .lx-sketch path { animation-delay: .12s }
.lx-whymodal:not([hidden]) .lx-whycard:nth-child(3) .lx-sketch path { animation-delay: .2s }
.lx-whymodal:not([hidden]) .lx-whylist li:nth-child(2) .lx-sketch path { animation-delay: .32s }
.lx-whymodal:not([hidden]) .lx-whylist__win .lx-sketch path { animation-delay: .42s; animation-duration: .55s }
@keyframes lx-rise { from { opacity: 0; translate: 0 0.7rem; } to { opacity: 1; translate: 0 0; } }

.lx-whymodal:not([hidden]) .lx-whymodal__panel { animation: lx-pop .3s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes lx-pop { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  .lx-whymodal:not([hidden]) .lx-sketch path,
  .lx-whymodal:not([hidden]) .lx-whycard,
  .lx-whymodal:not([hidden]) .lx-whylist li,
  .lx-whymodal:not([hidden]) .lx-whymodal__panel { animation: none; }
  .lx-sketch path { stroke-dashoffset: 0; }
}

.lx-whymodal__ctas { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-block-start: var(--lx-space-s); }

/* Lightbox auf kleinen Schirmen: kompakter, damit die drei Karten und die
   Alternativenliste ohne langes Scrollen erfassbar bleiben. */
@media (max-width: 40rem) {
  .lx-whymodal__panel { padding: 1.35rem 1.15rem 1.5rem; }
  .lx-whymodal .lx-label, .lx-whymodal__h { padding-inline-end: 2.9rem; }
  .lx-whymodal__lead { font-size: var(--lx-text-base); }
  .lx-whycard { padding: 0.85rem 0.95rem 0.9rem; }
  .lx-sketch { inline-size: 2.25rem; block-size: 2.25rem; }
  .lx-whymodal__ctas .lx-btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   „Wichtig zu wissen": CE-Kennzeichen prüfen
   ============================================================ */
/* Block in der Lightbox */
.lx-checkbox {
  border-radius: var(--lx-r-md);
  padding: 1rem 1.1rem 1.1rem;
  background: var(--lx-bg-alt);
  margin-block-end: var(--lx-space-s);
}
.lx-checkbox__head { display: flex; gap: 0.85rem; align-items: flex-start; margin: 0 0 0.7rem; }
.lx-checkbox__head span { display: grid; gap: 0.2rem; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.lx-checkbox__head b { font-size: var(--lx-text-base); color: var(--lx-ink); }
.lx-checkbox__head .lx-sketch { color: var(--lx-pink-700); }
.lx-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.lx-checklist li {
  position: relative; padding-inline-start: 1.15rem;
  font-size: var(--lx-text-sm); color: var(--lx-ink-soft); line-height: 1.5;
}
.lx-checklist li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.55em;
  inline-size: 0.4rem; block-size: 0.4rem; border-radius: 50%;
  background: var(--lx-ink-soft); opacity: .45;
}
.lx-checklist b { color: var(--lx-ink); }
.lx-checkbox__foot {
  margin: 0.75rem 0 0; font-family: var(--lx-font-marker);
  font-size: 1.0625rem; line-height: 1.35; color: var(--lx-ink);
}

/* Baustein auf der Startseite */
.lx-cenote {
  position: relative; isolation: isolate;
  display: grid; gap: var(--lx-space-m);
  align-items: start;
  border-radius: var(--lx-r-md);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  overflow: hidden;
  background: var(--lx-bg-alt);
}
/* Verlaufsgrafik als Fläche, darüber ein Cremeschleier: die Farbe glimmt in
   den Ecken durch, der Text bleibt auf ruhigem Grund und voll lesbar. */
.lx-cenote__bg {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url("../img/bg-gradient-ce.webp") 18% 68% / cover no-repeat;
  scale: 1.12;
}
.lx-cenote__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(103deg,
      color-mix(in srgb, var(--lx-bg) 86%, transparent) 0%,
      color-mix(in srgb, var(--lx-bg) 72%, transparent) 45%,
      color-mix(in srgb, var(--lx-bg) 52%, transparent) 100%);
}
@media (max-width: 58rem) {
  /* Hochkant liegt der Text über der ganzen Fläche, deshalb gleichmäßiger Schleier. */
  .lx-cenote__scrim {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--lx-bg) 93%, transparent) 0%,
      color-mix(in srgb, var(--lx-bg) 88%, transparent) 55%,
      color-mix(in srgb, var(--lx-bg) 70%, transparent) 100%);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .lx-cenote__bg { display: none; }
}
@media (min-width: 58rem) { .lx-cenote { grid-template-columns: 1fr 1.05fr; gap: clamp(1.5rem, 4vw, 3rem); } }
.lx-cenote h2 { margin-block: 0.3rem 0.5rem; }
.lx-cenote .lx-lead { margin: 0; }
.lx-cenote__ctas { margin-block-start: var(--lx-space-s); }
.lx-cechecks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.lx-cechecks li { display: flex; gap: 0.9rem; align-items: flex-start; }
.lx-cechecks li span { display: grid; gap: 0.15rem; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); line-height: 1.5; }
.lx-cechecks li b { font-size: var(--lx-text-base); color: var(--lx-ink); }
.lx-cechecks .lx-sketch { color: var(--lx-sea-700); margin-block-start: 0.1rem; }
/* Auf der Startseite zeichnen sich die Icons, sobald der Block sichtbar wird. */
.lx-cechecks .lx-sketch path { stroke-dashoffset: 0; }

/* ============================================================
   Hero: Vertrauensblock, Sticker-Größe, randloses Foto auf Mobil
   ============================================================ */
/* Google-Bewertung und Kleingedrucktes waren eine gemeinsame Zeile und sind
   auf schmalen Schirmen ineinandergelaufen. Jetzt: Badge steht für sich,
   der Satz darunter, auf breiten Schirmen nebeneinander. */
.lx-herotrust {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem 0.9rem;
  margin-block-start: var(--lx-space-s);
}
.lx-herotrust .lx-gbadge { flex: none; }
.lx-herotrust .lx-fine { margin: 0; flex: 1 1 16rem; min-inline-size: 0; }
@media (max-width: 52rem) {
  .lx-herotrust { gap: 0.5rem; }
  .lx-herotrust .lx-fine { flex-basis: 100%; }
}

@media (max-width: 52rem) {
  /* Das Hero-Foto läuft auf dem Handy von Rand zu Rand und ein Stück darüber
     hinaus: der Ausschnitt wirkt dadurch wie ein Vollbild, nicht wie eine Karte. */
  .lx-herostage {
    margin-inline: calc(50% - 50vw - 0.5rem);
    inline-size: calc(100vw + 1rem);
    max-inline-size: none;
  }
  .lx-herostage .lx-hero__ci { border-radius: 0; rotate: 0deg; margin-block-start: var(--lx-space-s); }
  .lx-herostage .lx-hero__ci img { inline-size: 100%; }
  /* Sticker größer, damit der Text nicht an die Rundung stößt. */
  .lx-whybadge { inline-size: 9.5rem; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; }
  .lx-whybadge__disc { padding: 1.1rem 1.2rem; }
  .lx-whybadge__text { font-size: 0.875rem; }
  .lx-whybadge__eyebrow { font-size: 0.6875rem; }
  .lx-handcue { inline-size: 2.6rem; inset-block-end: -0.9rem; inset-inline-start: -0.8rem; }
  .lx-herodevice { inline-size: 9rem; inset-inline-start: 0.35rem; inset-block-end: -1.5rem; }
}

/* ============================================================
   Handstück-Karten und Medienreihen (Technologie-Seite)
   ============================================================ */
.lx-hpgrid {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.lx-hpcard {
  border-radius: var(--lx-r-md);
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--lx-bg-alt);
  display: grid; gap: 0.15rem;
}
.lx-hpcard__name {
  font-family: var(--lx-font-display); font-weight: 700;
  font-size: var(--lx-text-lg); margin: 0 0 0.4rem;
}
/* Spot und Watt sind das Argument, deshalb stehen sie groß und nebeneinander. */
.lx-hpcard__spec { display: flex; align-items: baseline; gap: 0.45rem; margin: 0; }
.lx-hpcard__spec b {
  font-family: var(--lx-font-display); font-weight: 800;
  font-size: 1.375rem; line-height: 1.15; color: var(--lx-sea-700);
}
.lx-hpcard__spec span { font-size: var(--lx-text-xs); color: var(--lx-ink-soft); }
.lx-hpcard__nm {
  font-family: var(--lx-font-marker); font-size: 1.0625rem; line-height: 1;
  color: var(--lx-ink-soft); margin: 0.35rem 0 0.3rem;
}
.lx-hpcard__use { font-size: var(--lx-text-sm); color: var(--lx-ink-soft); line-height: 1.5; margin: 0; }

.lx-media-row {
  display: grid; gap: 0.75rem; margin-block-start: var(--lx-space-m);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.lx-media-row--three { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.lx-media-row .lx-photo { margin: 0; }

/* ============================================================
   CTA-Farben verbindlich
   Nav- und Karten-Kontexte setzen eigene Linkfarben (`.lx-nav__links a`,
   `.lx-dark .lx-membercard a`) und haben höhere Spezifität als die
   Varianten oben. Deshalb hier am Ende noch einmal explizit, sonst steht
   dunkle Schrift auf dunkelrotem Grund.
   ============================================================ */
a.lx-btn.lx-btn--primary, button.lx-btn.lx-btn--primary,
.lx-nav__links a.lx-btn--primary, .lx-dark .lx-membercard a.lx-btn--primary { color: var(--lx-text-inv); }
a.lx-btn.lx-btn--primary:hover, button.lx-btn.lx-btn--primary:hover { color: var(--lx-text-inv); background: var(--lx-cta-hover); }
a.lx-btn.lx-btn--sea, a.lx-btn.lx-btn--wa, a.lx-btn.lx-btn--navy { color: var(--lx-text-inv); }
a.lx-btn.lx-btn--shell, .lx-dark a.lx-btn.lx-btn--shell { color: var(--lx-ink); }
a.lx-btn.lx-btn--ghost { color: var(--lx-ink); }
.lx-dark a.lx-btn.lx-btn--ghost { color: var(--lx-ink); }

/* ============================================================
   Wischbare Reihen auf dem Handy
   Drei nebeneinander stehende Karten werden hochkant sonst zu einer langen
   Kolonne, durch die niemand scrollt. Auf schmalen Schirmen laufen sie
   deshalb waagerecht mit Snap-Punkten, ab Tablet wieder als Raster.
   ============================================================ */
@media (max-width: 52rem) {
  .lx-swipe {
    display: flex; flex-wrap: nowrap;
    gap: var(--lx-space-s);
    overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--lx-gutter);
    margin-inline: calc(-1 * var(--lx-gutter));
    padding: 0.25rem var(--lx-gutter) var(--lx-space-s);
    scrollbar-width: none;
  }
  .lx-swipe::-webkit-scrollbar { display: none; }
  .lx-swipe > * {
    flex: 0 0 84%; max-inline-size: 84%;
    scroll-snap-align: center;
    margin: 0;
  }
  /* Karten in der Wischreihe brauchen eine Fläche, sonst franst der Rand aus. */
  .lx-usp-row.lx-swipe > .lx-usp,
  .lx-cechecks.lx-swipe > li {
    background: var(--lx-bg);
    border-radius: var(--lx-r-md);
    padding: 1rem 1.1rem 1.1rem;
    box-shadow: inset 0 0 0 1px var(--lx-line);
  }
  .lx-cechecks.lx-swipe > li { display: grid; gap: 0.5rem; align-content: start; }
  /* Hinweis, dass es weitergeht */
  .lx-swipe::after {
    content: ""; flex: 0 0 0.25rem;
  }
}

/* ============================================================
   Tabellen auf dem Handy
   Beim Wischen nach rechts lief die Beschriftungsspalte aus dem Bild, übrig
   blieben Häkchen ohne Bezug. Zwei Maßnahmen: Vergleichstabellen werden
   hochkant zu Karten (`--cards`), alle übrigen behalten ihre erste Spalte
   klebend im Blick.
   ============================================================ */
@media (max-width: 52rem) {
  /* 1) Vergleichstabellen als Karten, ganz ohne Querscrollen */
  .lx-table--cards, .lx-table--cards thead, .lx-table--cards tbody,
  .lx-table--cards tr, .lx-table--cards th, .lx-table--cards td { display: block; }
  .lx-table--cards thead { display: none; }
  .lx-table--cards tr {
    background: var(--lx-bg); border-radius: var(--lx-r-md);
    box-shadow: inset 0 0 0 1px var(--lx-line);
    padding: 0.9rem 1rem; margin-block-end: 0.6rem;
  }
  .lx-table--cards td:first-child, .lx-table--cards th:first-child {
    font-family: var(--lx-font-display); font-weight: 700;
    font-size: var(--lx-text-base); color: var(--lx-ink);
    padding: 0 0 0.5rem; border: 0;
  }
  .lx-table--cards td:not(:first-child) {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: 0.35rem 0; border: 0;
    font-size: var(--lx-text-sm); color: var(--lx-ink-soft);
  }
  .lx-table--cards td[data-label]::before {
    content: attr(data-label);
    color: var(--lx-ink-soft); font-size: var(--lx-text-xs);
  }
  .lx-table--cards td.is-featured { background: none; color: var(--lx-ink); font-weight: 600; }
  .lx-table--cards .lx-table-wrap { overflow: visible; }

  /* 2) Alle anderen Tabellen: Zeilenbeschriftung bleibt beim Wischen stehen */
  .lx-table:not(.lx-table--cards) th:first-child,
  .lx-table:not(.lx-table--cards) td:first-child {
    position: sticky; inset-inline-start: 0; z-index: 2;
    background: var(--lx-bg);
    box-shadow: 1px 0 0 var(--lx-line);
  }
  .lx-section--alt .lx-table:not(.lx-table--cards) th:first-child,
  .lx-section--alt .lx-table:not(.lx-table--cards) td:first-child { background: var(--lx-bg-alt); }
}

/* ============================================================
   Zonen-Finder auf /preise
   Eine Zone eintippen, Preis sofort sehen. Die Karte ist so knapp gehalten,
   dass sie auf dem Handy ohne Scrollen vollständig ins Bild passt.
   ============================================================ */
.lx-finder {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--lx-bg-alt); border-radius: var(--lx-r-md);
  padding: clamp(1.1rem, 3vw, 1.75rem);
}
/* Verlaufsgrafik als Grund der Suchbox, darüber ein Cremeschleier,
   damit Beschriftung und Eingabefeld ihren Kontrast behalten. */
.lx-finder::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../img/bg-gradient-finder.webp") left top / cover no-repeat;
}
.lx-finder::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--lx-bg-alt) 70%, transparent) 0%,
    color-mix(in srgb, var(--lx-bg-alt) 88%, transparent) 100%);
}
.lx-finder__label {
  display: block; font-family: var(--lx-font-display); font-weight: 700;
  font-size: var(--lx-text-h3); letter-spacing: -0.02em; margin-block-end: 0.7rem;
}
.lx-finder__field { position: relative; }
.lx-finder__input {
  inline-size: 100%; min-block-size: 3.25rem;
  font-size: var(--lx-text-lg); padding-inline: 1rem 2.75rem;
  background: var(--lx-bg); border: 1.5px solid var(--lx-ink-soft); border-radius: var(--lx-r-md);
}
.lx-finder__input:focus-visible { outline: 3px solid var(--lx-cta-ring); outline-offset: 2px; border-color: var(--lx-ink); }
.lx-finder__input::-webkit-search-cancel-button { display: none; }
.lx-finder__clear {
  position: absolute; inset-block: 0; inset-inline-end: 0.4rem; inline-size: 2.25rem;
  background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--lx-ink-soft); cursor: pointer;
}
.lx-finder .lx-fine { margin-block: 0.5rem 0.75rem; }
.lx-finder__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lx-finder__chip {
  font-family: var(--lx-font-body); font-size: var(--lx-text-sm);
  background: var(--lx-bg); color: var(--lx-ink);
  border: 1px solid var(--lx-line); border-radius: var(--lx-r-sm);
  padding: 0.5em 0.85em; cursor: pointer; min-block-size: 2.5rem;
}
.lx-finder__chip:hover { border-color: var(--lx-ink); background: #FFFFFF; }
.lx-finder__chip b { color: var(--lx-cta); }
.lx-finder__empty { font-size: var(--lx-text-sm); color: var(--lx-ink-soft); margin: 0.75rem 0 0.5rem; }

.lx-zprice { margin-block-start: var(--lx-space-s); background: var(--lx-bg); border-radius: var(--lx-r-md); padding: 1.1rem 1.15rem 1.25rem; }
.lx-zprice__head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-block-end: 0.75rem; }
.lx-zprice__head h3 { font-size: var(--lx-text-h3); margin: 0; }
.lx-zprice__head p { margin: 0; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.lx-zprice__grid { display: grid; gap: 0.35rem; }
.lx-zprice__row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0.4rem 0.9rem; align-items: baseline;
  padding: 0.5rem 0.6rem; border-radius: var(--lx-r-sm); background: var(--lx-bg-alt);
}
.lx-zprice__row.is-best { background: var(--lx-pink-100); }
.lx-zprice__label { font-size: var(--lx-text-sm); color: var(--lx-ink); }
.lx-zprice__label i { font-style: normal; color: var(--lx-cta); font-size: var(--lx-text-xs); white-space: nowrap; }
.lx-zprice__label { white-space: nowrap; }
.lx-zprice__val { font-family: var(--lx-font-display); font-weight: 800; font-size: 1.25rem; white-space: nowrap; }
.lx-zprice__val small { font-weight: 500; font-size: 0.75rem; color: var(--lx-ink-soft); margin-inline-start: 0.15rem; }
.lx-zprice__sum { font-size: var(--lx-text-xs); color: var(--lx-ink-soft); white-space: nowrap; text-align: end; }
.lx-zprice__cta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-block: 0.9rem 0.5rem; }
/* Auf dem Handy soll die Karte ohne Scrollen komplett sichtbar sein:
   knappere Beschriftung, engere Zeilen, „gesamt" bleibt in derselben Zeile. */
@media (max-width: 52rem) {
  .lx-finder { padding: 1rem; }
  .lx-finder__label { font-size: var(--lx-text-lg); margin-block-end: 0.5rem; }
  .lx-finder__input { min-block-size: 3rem; font-size: var(--lx-text-base); }
  .lx-finder .lx-fine { margin-block: 0.4rem 0.5rem; font-size: 0.75rem; }
  .lx-zprice { margin-block-start: 0.6rem; padding: 0.85rem 0.9rem 0.95rem; }
  .lx-zprice__head { margin-block-end: 0.5rem; gap: 0.5rem; }
  .lx-zprice__head h3 { font-size: 1.375rem; }
  .lx-zprice__grid { gap: 0.25rem; }
  .lx-zprice__row { padding: 0.4rem 0.55rem; grid-template-columns: 1fr auto auto; }
  .lx-zprice__val { font-size: 1.125rem; }
  .lx-zprice__sum { font-size: 0.6875rem; }
  .lx-zprice__cta { margin-block: 0.7rem 0.35rem; }
  .lx-zprice__cta .lx-btn { flex: 1 1 100%; min-block-size: 2.75rem; }
  .lx-zprice .lx-fine { font-size: 0.6875rem; }
}

/* ============================================================
   Kein horizontales Wegschieben auf dem Handy
   Drei Ursachen, alle hier zusammen abgeräumt:
   1) overflow-x:hidden auf body macht body zum Scrollport (overflow-y wird
      implizit auto) -> die Seite ließ sich per body.scrollLeft wegschieben,
      obwohl "hidden" gesetzt war. overflow-x:clip erzeugt keinen Scrollport.
   2) Grid-Blowout: .lx-artmain/.lx-artrail sind Grid-Items mit
      min-inline-size:auto, konnten also nicht unter ihre min-content-Breite.
      Eine breite Tabelle hat damit die ganze Artikelspalte auf 767px
      aufgeblasen (Text lief aus dem Bild).
   3) Breite Tabellen brauchen ihren eigenen Scrollbereich, sonst schieben
      sie die Seite. Der Karten-Modus setzt overflow:visible, das gilt nur,
      solange die Tabelle wirklich als Karten umbricht.
   ============================================================ */
html, body { overflow-x: hidden; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
.lx-artmain, .lx-artrail { min-inline-size: 0; }
.lx-table-wrap { max-inline-size: 100%; overflow-x: auto; }

/* ============================================================
   Kombi-Pakete im Zonen-Finder (mehrere Zonen in einem Termin)
   Mobil wischbar über .lx-swipe, ab Tablet als Raster.
   ============================================================ */
.lx-combos { margin-block-start: var(--lx-space-m); }
.lx-combos__head { margin-block-end: var(--lx-space-s); }
.lx-combos__head h3 {
  font-family: var(--lx-font-display); font-weight: 800;
  font-size: var(--lx-text-h3); letter-spacing: -0.02em; margin-block: 0.2rem 0.4rem;
}
.lx-combos__head .lx-lead { max-inline-size: 62ch; }
@media (min-width: 52.0625rem) {
  .lx-combos__grid { display: grid; gap: var(--lx-space-s); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 74rem) {
  .lx-combos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lx-combo {
  display: flex; flex-direction: column; gap: 0.35rem;
  background: var(--lx-bg); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md);
  padding: var(--lx-space-s);
  transition: border-color 0.25s var(--lx-ease), background 0.25s var(--lx-ease);
}
@media (max-width: 52rem) {
  .lx-combo { flex: 0 0 min(19rem, 82vw); scroll-snap-align: start; }
}
.lx-combo h4 {
  font-family: var(--lx-font-display); font-weight: 700;
  font-size: var(--lx-text-lg); letter-spacing: -0.01em; line-height: 1.2;
}
.lx-combo .lx-billet { align-self: flex-start; }
/* Karten ohne Auszeichnung bekommen dieselbe erste Zeile, damit alle
   Überschriften im Raster auf gleicher Höhe beginnen. */
.lx-combo:not(:has(.lx-billet))::before { content: ""; display: block; block-size: 1.9rem; }
.lx-combo__meta { font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.lx-combo__best { margin-block-start: 0.2rem; }
.lx-combo__best b { font-family: var(--lx-font-display); font-weight: 800; font-size: 1.75rem; letter-spacing: -0.02em; }
.lx-combo__best small { font-size: var(--lx-text-sm); color: var(--lx-ink-soft); margin-inline-start: 0.3rem; }
.lx-combo__steps { list-style: none; padding: 0; margin-block: 0.4rem; display: grid; gap: 0.2rem; }
.lx-combo__steps li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  font-size: var(--lx-text-sm); padding-block: 0.28rem;
  border-block-end: 1px solid var(--lx-line);
}
.lx-combo__steps li:last-child { border-block-end: 0; }
.lx-combo__steps li i { font-style: normal; color: var(--lx-ink-soft); font-size: var(--lx-text-xs); }
.lx-combo__steps li b { font-weight: 600; white-space: nowrap; }
.lx-combo__steps li.is-best b { font-weight: 800; }
.lx-combo__steps .lx-no { color: var(--lx-ink-soft); font-weight: 400; }
.lx-combo .lx-btn { margin-block-start: auto; }
/* Treffer-Hervorhebung: kräftigerer Rahmen und ruhiger Grundton, keine farbige Kante */
.lx-combo.is-match { border-color: var(--lx-ink); background: var(--lx-bg-alt); }
.lx-combo__match {
  font-family: var(--lx-font-marker); font-weight: 700;
  font-size: var(--lx-text-sm); color: var(--lx-cta);
}
/* Hinweiszeile unter dem Finder-CTA */
.lx-zprice__hint {
  font-size: var(--lx-text-sm); color: var(--lx-ink-soft);
  margin-block-start: 0.35rem; line-height: 1.35;
}

/* Spar-Hinweis in der Preiskarte des Zonen-Finders:
   zeigt das Kombi-Paket, in dem die gesuchte Zone mit ihren Nachbarzonen steckt. */
.lx-zprice__combo {
  margin-block-start: 0.9rem; padding: 0.85rem 0.9rem;
  background: var(--lx-bg-alt); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md);
  display: grid; gap: 0.3rem;
}
.lx-zprice__combo-q {
  font-family: var(--lx-font-marker); font-weight: 700;
  font-size: 1.15rem; color: var(--lx-cta); line-height: 1.1;
}
.lx-zprice__combo-t { font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.lx-zprice__combo-p {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem;
  margin-block-start: 0.1rem;
}
.lx-zprice__combo-p b { font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-lg); letter-spacing: -0.01em; }
.lx-zprice__combo-p span { font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.lx-zprice__combo-s { font-size: var(--lx-text-sm); font-weight: 600; }
.lx-zprice__combo .lx-btn { margin-block-start: 0.35rem; min-block-size: 2.75rem; }
/* Kurze Betonung, wenn aus der Karte zum Kombi-Paket gesprungen wird */
.lx-combo.is-flash { border-color: var(--lx-ink); background: var(--lx-bg-alt); }
@media (prefers-reduced-motion: no-preference) {
  .lx-combo.is-flash { animation: lx-comboflash 1.4s var(--lx-ease); }
  @keyframes lx-comboflash {
    0%, 100% { box-shadow: none; }
    25%, 60% { box-shadow: 0 0 0 3px var(--lx-line); }
  }
}

/* ============================================================
   Preiskarte des Finders: Zahlen sauber untereinander, Spar-Box
   auf breiten Schirmen neben die Preise statt darunter.
   ============================================================ */
.lx-zprice__cols {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem;
  padding: 0 0.7rem 0.15rem;
  font-size: var(--lx-text-xs); color: var(--lx-ink-soft);
}
.lx-zprice__cols span:nth-child(2) { inline-size: 5.5rem; text-align: end; }
.lx-zprice__cols span:nth-child(3) { inline-size: 5rem; text-align: end; }
/* Beträge rechtsbündig und mit gleich breiten Ziffern, damit sie fluchten */
.lx-zprice__val, .lx-zprice__sum {
  text-align: end; font-variant-numeric: tabular-nums;
}
.lx-zprice__val { inline-size: 5.5rem; }
.lx-zprice__sum { inline-size: 5rem; font-size: var(--lx-text-sm); }
@media (min-width: 62rem) {
  .lx-zprice {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
    grid-template-areas: "head head" "main side" "fine fine";
    column-gap: var(--lx-space-s);
  }
  .lx-zprice__head { grid-area: head; }
  .lx-zprice__main { grid-area: main; }
  .lx-zprice__combo { grid-area: side; margin-block-start: 0; align-self: stretch; }
  .lx-zprice > .lx-fine { grid-area: fine; margin-block-start: 0.5rem; }
}
@media (max-width: 30rem) {
  .lx-zprice__cols span:nth-child(2), .lx-zprice__val { inline-size: 4.6rem; }
  .lx-zprice__cols span:nth-child(3), .lx-zprice__sum { inline-size: 4.2rem; }
}

/* ── Lumis Pro (Spec 002): Herstellervideos + Kopf-Grid ─────────────────── */
.lx-video { position: relative; margin: 0; }
.lx-video video { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: var(--lx-r-md); background: var(--lx-ink); }
.lx-video figcaption { padding-block-start: 0.55rem; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); line-height: 1.45; }
.lx-videogrid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.lx-media-row--four { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }


/* ============================================================
   Collage V5 (Spec 003): Duotone-Icons, Tape, Büroklammern, Pins,
   Post-its, Papier-Schnipsel, Polaroids, Collage-Flächen.
   Texturen sind Grafiken (PNG mit Alpha, public/assets/img/collage/,
   verkleinerte -cut-<px>-Fassungen), nie per CSS nachgezeichnet; nur ein
   weicher drop-shadow ist erlaubt. Alle Animationen klein (280 bis 600 ms),
   gestaffelt über --lx-stagger, unter prefers-reduced-motion aus.
   Nichts symmetrisch: jedes Teil hat seinen eigenen Tilt (--tilt).
   ============================================================ */

/* ---- Duotone-Icons: Linie (currentColor) plus versetzte Fläche (--lx-duo) ---- */
.lx-icon2 {
  --lx-duo: var(--lx-pink-100);
  inline-size: 2.5rem; block-size: 2.5rem; flex: none;
  color: var(--lx-ink); overflow: visible; vertical-align: middle;
}
.lx-icon2--sea { --lx-duo: var(--lx-sea-100); }
.lx-icon2--peach { --lx-duo: color-mix(in srgb, var(--lx-peach) 42%, var(--lx-bg)); }
.lx-icon2--sand { --lx-duo: var(--lx-bg-alt); }
.lx-icon2--ink-pink { color: var(--lx-pink-700); }
.lx-icon2--ink-sea { color: var(--lx-sea-700); }
.lx-icon2--s, li > .lx-icon2, .lx-list .lx-icon2 { inline-size: 1.5rem; block-size: 1.5rem; }
.lx-icon2--l { inline-size: 3.25rem; block-size: 3.25rem; }
.lx-dark .lx-icon2 { --lx-duo: var(--lx-navy-raised); color: var(--lx-text-inv); }
.lx-dark .lx-icon2--ink-pink { color: var(--lx-pink-ondark); }
.lx-dark .lx-icon2--ink-sea { color: var(--lx-sea-500); }
/* Icon neben Text: Haken auf der ersten Zeile, Fläche mittig zum Block */
.lx-iconline { display: flex; align-items: flex-start; gap: 0.7rem; }
.lx-iconline > .lx-icon2 { margin-block-start: -0.2rem; }
li > .lx-icon2 { margin-inline-end: 0.5rem; margin-block-start: -0.1rem; }
/* Draw-in: Linie zeichnet sich (pathLength 1), die Fläche blendet kurz danach ein.
   dasharray 1.08 / offset 1.12 statt 1 / 1: so bleibt vor dem Zeichnen auch der
   runde Linienanfang unsichtbar, und am Ende ist die Linie trotzdem vollständig. */
.lx-icon2 .lx-duo-a { stroke-dasharray: 1.08; stroke-dashoffset: 1.12; }
.lx-icon2 .lx-duo-b { opacity: 0; transform: translate(-2px, -1.5px); }
.lx-icon2.lx-inview .lx-duo-a { animation: lx-duodraw 0.6s var(--lx-ease) forwards; animation-delay: var(--lx-stagger, 0ms); }
.lx-icon2.lx-inview .lx-duo-a ~ .lx-duo-a { animation-delay: calc(var(--lx-stagger, 0ms) + 140ms); }
.lx-icon2.lx-inview .lx-duo-a ~ .lx-duo-a ~ .lx-duo-a { animation-delay: calc(var(--lx-stagger, 0ms) + 260ms); }
.lx-icon2.lx-inview .lx-duo-b { animation: lx-duofill 0.45s var(--lx-ease) forwards; animation-delay: calc(var(--lx-stagger, 0ms) + 300ms); }
@keyframes lx-duodraw { to { stroke-dashoffset: 0.04; } }
@keyframes lx-duofill { to { opacity: 1; transform: translate(0, 0); } }

/* ---- Tape: Klebestreifen aus Textur, klebt sich beim Einblenden auf ---- */
.lx-tape {
  position: absolute; z-index: 3; pointer-events: none;
  inline-size: clamp(3.6rem, 30%, 6.2rem); aspect-ratio: 1442 / 389;
  background: url("../img/collage/tape-cream-cut-640.png") center / 100% 100% no-repeat;
  inset-block-start: -0.95rem; inset-inline-start: 0.9rem;
  rotate: var(--tape-tilt, -7deg); transform-origin: 14% 50%; opacity: 0.94;
}
.lx-tape--pink { background-image: url("../img/collage/tape-pink-cut-640.png"); aspect-ratio: 1288 / 281; }
.lx-tape--sea { background-image: url("../img/collage/tape-sea-cut-640.png"); aspect-ratio: 1344 / 375; }
.lx-tape--peach { background-image: url("../img/collage/tape-peach-cut-640.png"); aspect-ratio: 1310 / 414; }
.lx-tape--cream { background-image: url("../img/collage/tape-cream-cut-640.png"); aspect-ratio: 1442 / 389; }
.lx-tape--tr { inset-inline-start: auto; inset-inline-end: 0.9rem; rotate: var(--tape-tilt, 6deg); transform-origin: 86% 50%; }
.lx-tape--top { inset-inline-start: 50%; translate: -50% 0; rotate: var(--tape-tilt, -2.5deg); transform-origin: 50% 50%; }
.lx-tape--bl { inset-block-start: auto; inset-block-end: -0.8rem; rotate: var(--tape-tilt, 5deg); }
.lx-tape--br { inset-block-start: auto; inset-block-end: -0.8rem; inset-inline-start: auto; inset-inline-end: 0.9rem; rotate: var(--tape-tilt, -8deg); transform-origin: 86% 50%; }
.lx-tape { scale: 0.12 1; opacity: 0; }
.lx-tape.lx-inview { animation: lx-tapeon 0.5s var(--lx-ease) forwards; animation-delay: calc(var(--lx-stagger, 0ms) + 160ms); }
@keyframes lx-tapeon {
  0% { scale: 0.12 1; opacity: 0; }
  55% { scale: 1.07 1; opacity: 0.94; }
  100% { scale: 1 1; opacity: 0.94; }
}

/* ---- Büroklammer: oben, über die Kante geschoben ---- */
.lx-clip {
  position: absolute; z-index: 4; pointer-events: none;
  inline-size: 4.6rem; aspect-ratio: 648 / 187;
  background: url("../img/collage/clip-silver-cut-400.png") center / 100% 100% no-repeat;
  inset-block-start: 0.1rem; inset-inline-start: -1.3rem;
  rotate: var(--clip-tilt, -104deg); transform-origin: 50% 50%;
  filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--lx-navy) 22%, transparent));
}
.lx-clip--pink { background-image: url("../img/collage/clip-pink-cut-400.png"); aspect-ratio: 800 / 227; }
.lx-clip--r { inset-inline-start: auto; inset-inline-end: -1.3rem; rotate: var(--clip-tilt, -78deg); }
/* Mit Klammer: Innen-Body rückt so weit ein, dass die Klammer im Rand bleibt und keinen Text verdeckt */
.lx-paper:has(> .lx-clip:not(.lx-clip--r)) .lx-paper__body { padding-inline-start: max(12%, 2.6rem); }
.lx-paper:has(> .lx-clip--r) .lx-paper__body { padding-inline-end: max(12%, 2.6rem); }
/* Klammer schiebt sich beim Einblenden von oben auf das Papier */
:is(.lx-paper, .lx-polaroid, .lx-postit):not(.lx-inview) > .lx-clip { opacity: 0; translate: 0.9rem 0; }
:is(.lx-paper, .lx-polaroid, .lx-postit).lx-inview > .lx-clip { animation: lx-clipon 0.45s var(--lx-ease) both; animation-delay: calc(var(--lx-stagger, 0ms) + 220ms); }
@keyframes lx-clipon { from { opacity: 0; translate: 0.9rem 0; } to { opacity: 1; translate: 0 0; } }

/* ---- Pin: oben mittig, Nadel steckt im Papier ---- */
.lx-pin {
  position: absolute; z-index: 4; pointer-events: none;
  inline-size: 1.9rem; aspect-ratio: 446 / 722;
  background: url("../img/collage/pin-coral-cut-240.png") center / 100% 100% no-repeat;
  inset-block-start: -1.5rem; inset-inline-start: 50%; translate: -44% 0; rotate: var(--pin-tilt, -9deg);
  filter: drop-shadow(0 3px 3px color-mix(in srgb, var(--lx-navy) 24%, transparent));
}
.lx-pin--l { inset-inline-start: 14%; }
.lx-pin--r { inset-inline-start: auto; inset-inline-end: 10%; translate: 0 0; rotate: var(--pin-tilt, 7deg); }
:is(.lx-paper, .lx-polaroid, .lx-postit):not(.lx-inview) > .lx-pin { opacity: 0; scale: 1.5; }
:is(.lx-paper, .lx-polaroid, .lx-postit).lx-inview > .lx-pin { animation: lx-pinin 0.38s var(--lx-ease) both; animation-delay: calc(var(--lx-stagger, 0ms) + 380ms); }
@keyframes lx-pinin { from { opacity: 0; scale: 1.5; } 70% { opacity: 1; scale: 0.96; } to { opacity: 1; scale: 1; } }

/* ---- Post-it: Zettel aus Textur, Handschrift (Caveat), ersetzt .lx-sticker ---- */
.lx-postit {
  position: relative; isolation: isolate;
  display: inline-grid; place-items: center; box-sizing: border-box;
  --ps: 7.5rem; inline-size: var(--ps); aspect-ratio: 1;
  /* Knick sitzt unten rechts, Text bleibt auf der ruhigen Fläche (Abstände aus der eigenen Größe, nie aus dem Elternblock) */
  padding: calc(var(--ps) * 0.1) calc(var(--ps) * 0.1) calc(var(--ps) * 0.12) calc(var(--ps) * 0.1);
  rotate: var(--tilt, -3deg);
  font-family: var(--lx-font-marker); font-weight: 700; font-size: 1.45rem; line-height: 1.02; letter-spacing: -0.01em;
  color: var(--lx-ink); text-align: center; text-decoration: none; vertical-align: middle;
  overflow-wrap: normal; hyphens: manual;
}
.lx-postit::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../img/collage/postit-sun-cut-560.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 5px 7px color-mix(in srgb, var(--lx-navy) 16%, transparent));
}
.lx-postit--petal::before { background-image: url("../img/collage/postit-petal-cut-560.png"); }
.lx-postit--foam::before { background-image: url("../img/collage/postit-foam-cut-560.png"); }
.lx-postit--peach::before { background-image: url("../img/collage/postit-peach-cut-560.png"); }
.lx-postit--s { --ps: 6rem; font-size: 1.15rem; }
.lx-postit--l { --ps: 10rem; font-size: 1.8rem; }
.lx-postit__text { display: block; position: relative; z-index: 1; }
.lx-postit > .lx-tape { inline-size: 66%; inset-block-start: -9%; inset-inline-start: 15%; rotate: var(--tape-tilt, -5deg); }
.lx-postit > .lx-tape.lx-tape--tr { inset-inline-start: auto; inset-inline-end: 12%; rotate: var(--tape-tilt, 7deg); }
.lx-postit > .lx-tape.lx-tape--top { inset-inline-start: 50%; rotate: var(--tape-tilt, -3deg); }
/* Ersatz für die alten Eck-Sticker auf Karten */
.lx-postit--corner { position: absolute; inset-block-start: -1.6rem; inset-inline-end: -1rem; z-index: 3; }
.lx-postit--corner-l { position: absolute; inset-block-start: -1.6rem; inset-inline-start: -1rem; z-index: 3; }
.lx-dark .lx-postit { color: var(--lx-ink); }
/* Pop: von klein und stärker gedreht auf Größe und Tilt, danach ganz langsames Schweben */
.lx-postit { scale: 0.6; opacity: 0; rotate: calc(var(--tilt, -3deg) - 8deg); }
.lx-postit.lx-inview {
  animation: lx-postitpop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, lx-stickerfloat 5.2s ease-in-out infinite;
  animation-delay: var(--lx-stagger, 0ms), calc(var(--lx-stagger, 0ms) + 1.4s);
}
@keyframes lx-postitpop {
  from { scale: 0.6; opacity: 0; rotate: calc(var(--tilt, -3deg) - 8deg); }
  to { scale: 1; opacity: 1; rotate: var(--tilt, -3deg); }
}
@media (hover: hover) {
  .lx-postit { transition: transform var(--lx-dur-fast) var(--lx-ease); }
  .lx-postit::before { transition: filter var(--lx-dur-fast) var(--lx-ease); }
  .lx-postit:hover { transform: translateY(-3px); }
  .lx-postit:hover::before { filter: drop-shadow(0 9px 11px color-mix(in srgb, var(--lx-navy) 20%, transparent)); }
}

/* ---- Papier-Schnipsel als Textbox ---- */
.lx-paper {
  position: relative; isolation: isolate; color: var(--lx-ink);
  rotate: var(--tilt, 0deg);
}
.lx-paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../img/collage/paper-torn-1-cut-960.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--lx-navy) 13%, transparent));
}
/* Innen-Body: Sicherheitsabstand zu den gerissenen Kanten (je Textur gemessen, in % der Breite) */
.lx-paper__body { position: relative; z-index: 1; padding: 8% 9% 10% 9%; }
.lx-paper--white { }
.lx-paper--white::before { background-image: url("../img/collage/paper-torn-2-cut-960.png"); }
.lx-paper--white .lx-paper__body { padding: 8% 9% 10% 9%; }
.lx-paper--mint { }
.lx-paper--mint::before { background-image: url("../img/collage/paper-scrap-mint-cut-960.png"); }
.lx-paper--mint .lx-paper__body { padding: 9% 9% 10% 9%; }
.lx-paper--pink { }
.lx-paper--pink::before { background-image: url("../img/collage/paper-scrap-pink-cut-960.png"); }
.lx-paper--pink .lx-paper__body { padding: 9% 9% 10% 9%; }
.lx-paper--ticket { }
.lx-paper--ticket::before { background-image: url("../img/collage/paper-ticket-cut-960.png"); }
.lx-paper--ticket .lx-paper__body { padding: 9% 12% 10% 12%; }
.lx-paper--tall { }
.lx-paper--tall::before { background-image: url("../img/collage/paper-torn-3-cut-960.png"); }
.lx-paper--tall .lx-paper__body { padding: 12% 11% 12% 11%; }
.lx-paper__body > :first-child { margin-block-start: 0; }
.lx-paper__body > :last-child { margin-block-end: 0; }
.lx-paper__body h2, .lx-paper__body h3, .lx-paper__body h4 { color: var(--lx-ink); }
.lx-paper__body p, .lx-paper__body li { color: var(--lx-ink); }
.lx-paper__body ul { padding-inline-start: 1.1em; }
.lx-paper__body .lx-fine, .lx-paper__body small { color: var(--lx-ink-soft); }
.lx-paper__body a { color: var(--lx-pink-700); }
.lx-paper--ticket .lx-paper__body { text-align: center; }
.lx-paper__kicker { font-family: var(--lx-font-marker); font-weight: 700; font-size: 1.35em; line-height: 1; color: var(--lx-pink-700); display: block; margin-block-end: 0.3em; rotate: -1.5deg; transform-origin: 0 100%; }
.lx-paper--mint .lx-paper__kicker { color: var(--lx-sea-700); }
.lx-dark .lx-paper, .lx-dark .lx-paper p, .lx-dark .lx-paper h2, .lx-dark .lx-paper h3, .lx-dark .lx-paper li { color: var(--lx-ink); }
.lx-dark .lx-paper a { color: var(--lx-pink-700); }
/* Papier-Rise: hebt sich leicht und dreht in seinen Tilt */
.lx-paper { opacity: 0; translate: 0 14px; rotate: calc(var(--tilt, 0deg) + 1.5deg); transition: opacity 0.5s var(--lx-ease), translate 0.5s var(--lx-ease), rotate 0.5s var(--lx-ease); transition-delay: var(--lx-stagger, 0ms); }
.lx-paper.lx-inview { opacity: 1; translate: 0 0; rotate: var(--tilt, 0deg); }

/* ---- Polaroid: Rahmen-Textur über dem 4:5-Foto, Unterschrift in Caveat ---- */
.lx-polaroid {
  position: relative; isolation: isolate; margin: 0;
  inline-size: 100%; max-inline-size: 18rem; aspect-ratio: 767 / 936;
  rotate: var(--tilt, -2deg);
  container-type: inline-size;
}
.lx-polaroid::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: url("../img/collage/polaroid-frame-v11-800.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 12px 14px color-mix(in srgb, var(--lx-navy) 16%, transparent));
}
/* Fenster im Rahmen, gemessen an der Textur (links 7,7 %, oben 7,6 %, rechts 8,3 %, unten 21,4 %) */
.lx-polaroid__img { position: absolute; z-index: 1; inset: 7.6% 8.3% 21.4% 7.7%; overflow: hidden; background: var(--lx-bg-alt); }
.lx-polaroid__img picture { display: contents; }
.lx-polaroid__img img, .lx-polaroid__img video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 0; display: block; }
.lx-polaroid__cap {
  position: absolute; z-index: 3; inset-inline: 9%; inset-block-end: 4.5%; block-size: 15.5%;
  display: grid; place-items: center; text-align: center;
  font-family: var(--lx-font-pen); font-weight: 400; font-size: clamp(0.95rem, 6.6cqi, 1.3rem); line-height: 1.02;
  color: var(--lx-ink); rotate: -1.3deg; overflow: hidden;
}
.lx-polaroid > .lx-tape { inset-block-start: -0.8rem; z-index: 3; }
.lx-polaroid > .lx-tape.lx-tape--top { inline-size: 42%; }
.lx-polaroid--s { max-inline-size: 12rem; }
.lx-polaroid--l { max-inline-size: 24rem; }
.lx-dark .lx-polaroid__cap { color: var(--lx-ink); }
/* Hinlegen: kommt leicht von oben, dreht in seinen Tilt */
.lx-polaroid { opacity: 0; translate: 0 18px; scale: 1.04; rotate: calc(var(--tilt, -2deg) + 4deg); transition: opacity 0.55s var(--lx-ease), translate 0.55s var(--lx-ease), scale 0.55s var(--lx-ease), rotate 0.55s var(--lx-ease); transition-delay: var(--lx-stagger, 0ms); }
.lx-polaroid.lx-inview { opacity: 1; translate: 0 0; scale: 1; rotate: var(--tilt, -2deg); }
@media (hover: hover) {
  .lx-polaroid.lx-inview { transition: transform var(--lx-dur-fast) var(--lx-ease); }
  .lx-polaroid:hover { transform: translateY(-3px); }
}

/* ---- Collage: Fläche, auf der Teile frei überlappen ---- */
.lx-collage { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(1.5rem, auto); grid-auto-flow: dense; }
.lx-collage__item {
  --lx-stagger: calc(var(--i, 0) * 110ms);
  position: relative; z-index: var(--z, 1);
  grid-column: var(--c, auto); grid-row: var(--r, auto);
  align-self: start; display: grid; justify-items: start;
  opacity: 0; transition: opacity 0.45s var(--lx-ease); transition-delay: var(--lx-stagger);
}
.lx-collage__item.lx-inview { opacity: 1; }
.lx-collage__item > .lx-paper, .lx-collage__item > .lx-polaroid { inline-size: 100%; }
/* Sechs Standardplätze, überlappend versetzt, jeder mit eigenem Tilt (−3, 2, −1.5, 4, −2.5, 1) */
.lx-collage__item:nth-child(1) { --c: 1 / span 7; --r: 1 / span 5; --z: 1; --tilt: -3deg; }
.lx-collage__item:nth-child(2) { --c: 7 / span 6; --r: 2 / span 5; --z: 2; --tilt: 2deg; }
.lx-collage__item:nth-child(3) { --c: 2 / span 5; --r: 5 / span 4; --z: 3; --tilt: -1.5deg; }
.lx-collage__item:nth-child(4) { --c: 8 / span 4; --r: 6 / span 4; --z: 4; --tilt: 4deg; }
.lx-collage__item:nth-child(5) { --c: 5 / span 5; --r: 8 / span 4; --z: 5; --tilt: -2.5deg; }
.lx-collage__item:nth-child(6) { --c: 1 / span 4; --r: 9 / span 4; --z: 6; --tilt: 1deg; }
.lx-collage__item:nth-child(n+7) { --c: auto; --r: auto; --z: 7; --tilt: -2deg; grid-column: span 6; }
/* Mobil: wischbare Reihe (Muster .lx-swipe), die Seite scrollt nie quer; gestapelt mit --stack */
@media (max-width: 52rem) {
  .lx-collage {
    display: flex; flex-wrap: nowrap; gap: var(--lx-space-s);
    overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--lx-gutter);
    margin-inline: calc(-1 * var(--lx-gutter));
    padding: 1.8rem var(--lx-gutter) 1.6rem;
    scrollbar-width: none;
  }
  .lx-collage::-webkit-scrollbar { display: none; }
  .lx-collage__item { flex: 0 0 80%; max-inline-size: 80%; scroll-snap-align: center; grid-area: auto; }
  .lx-collage__item:nth-child(n) { --c: auto; --r: auto; }
  .lx-collage::after { content: ""; flex: 0 0 0.25rem; }
  .lx-collage--stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lx-space-m); overflow: visible; margin-inline: 0; padding: 0.5rem 0 0; }
  .lx-collage--stack > .lx-collage__item { flex: none; max-inline-size: none; justify-items: center; }
  .lx-collage--stack::after { content: none; }
}
@media (min-width: 52.01rem) { .lx-collage--tight { grid-auto-rows: minmax(1rem, auto); } }

/* ---- Bewegung aus: alles sofort an seinem Platz ---- */
@media (prefers-reduced-motion: reduce) {
  .lx-icon2 .lx-duo-a, .lx-icon2.lx-inview .lx-duo-a { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .lx-icon2 .lx-duo-b, .lx-icon2.lx-inview .lx-duo-b { opacity: 1; transform: none; animation: none; }
  .lx-tape, .lx-tape.lx-inview { scale: 1 1; opacity: 0.94; animation: none; }
  :is(.lx-paper, .lx-polaroid, .lx-postit) > .lx-clip, :is(.lx-paper, .lx-polaroid, .lx-postit) > .lx-pin { opacity: 1; translate: 0 0; scale: 1; animation: none; }
  .lx-pin, .lx-pin--l { translate: -44% 0; } .lx-pin--r { translate: 0 0; }
  .lx-postit, .lx-postit.lx-inview { scale: 1; opacity: 1; rotate: var(--tilt, -3deg); animation: none; transition: none; }
  .lx-paper, .lx-paper.lx-inview { opacity: 1; translate: 0 0; rotate: var(--tilt, 0deg); transition: none; }
  .lx-polaroid, .lx-polaroid.lx-inview { opacity: 1; translate: 0 0; scale: 1; rotate: var(--tilt, -2deg); transition: none; }
  .lx-collage__item { opacity: 1; transition: none; }
  .lx-postit:hover, .lx-polaroid:hover { transform: none; }
}

/* ---- Collage V5, Teil 2: Logo, Ribbon, Icons in bestehenden Kontexten,
   Seiten-Hooks der anderen Agenten (Technologie, Standorte, Zonen, Team) ---- */

/* Wortmarke „laserx.“ als SVG (viewBox -12 -60 620 174, rund 3,56:1): 30 px hoch (mobil 26 px), Breite folgt dem Seitenverhältnis */
.lx-nav__logo img { block-size: 52px; inline-size: auto; border-radius: 50%; }
.lx-footer .lx-nav__logo--inv img { block-size: 72px; }
@media (max-width: 52rem) { .lx-nav__logo img { block-size: 44px; } .lx-footer .lx-nav__logo--inv img { block-size: 60px; } }

/* Eck-Ribbon ohne Versalien */
.lx-cornerribbon { text-transform: none; letter-spacing: 0.02em; font-size: 0.78rem; }

/* Duotone-Icons dort, wo bisher .lx-icon saß (gleiche Maße, keine Kästen) */
.lx-usp > .lx-icon2 { margin-block-start: 0.15rem; }
.lx-usp > .lx-icon2 + h3 { grid-column: 2; grid-row: 1; }
.lx-footer__trust .lx-icon2 { color: var(--lx-text-inv); --lx-duo: var(--lx-navy-raised); }
.lx-membercard li .lx-icon2 { inline-size: 1.35rem; block-size: 1.35rem; flex: none; }
.lx-artfacts .lx-icon2 { inline-size: 1.6rem; block-size: 1.6rem; }
.lx-loccard__meta .lx-icon2 { inline-size: 1.15rem; block-size: 1.15rem; margin-inline-end: 0.15rem; }
.lx-infobox__head .lx-icon2 { inline-size: 1.6rem; block-size: 1.6rem; }
.lx-zstat .lx-icon2 { inline-size: 1.35rem; block-size: 1.35rem; }
.lx-zbenefits .lx-icon2 { inline-size: 2rem; block-size: 2rem; flex: none; margin-block-start: 0.1rem; }
.lx-gbadge .lx-icon2 { inline-size: 1.35rem; block-size: 1.35rem; }
.lx-btn .lx-icon2, .lx-mappanel__chips .lx-btn .lx-icon2, .lx-mapband__chips .lx-btn .lx-icon2 { inline-size: 1.1rem; block-size: 1.1rem; color: currentColor; }
.lx-label .lx-icon2 { inline-size: 1.25rem; block-size: 1.25rem; margin-inline-end: 0.2rem; }
.lx-small .lx-icon2, .lx-fine .lx-icon2, p > .lx-icon2 { inline-size: 1.2rem; block-size: 1.2rem; margin-inline-end: 0.2rem; }
.lx-hpcard__name .lx-icon2 { inline-size: 1.7rem; block-size: 1.7rem; margin-inline-end: 0.2rem; }
.lx-tabbar .lx-icon2 { inline-size: 1.5rem; block-size: 1.5rem; color: currentColor; }
.lx-tabbar .lx-icon2 .lx-duo-a { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.lx-tabbar .lx-icon2 .lx-duo-b { opacity: 1; transform: none; animation: none; }
/* Karten-Pins: Duotone statt Hand-Icon, gleiches Wippen */
.lx-demap__pin .lx-icon2 { inline-size: 2rem; block-size: 2rem; color: var(--lx-pink-700); animation: lx-bob 2.4s ease-in-out infinite; }
.lx-demap__pin--soon .lx-icon2 { color: var(--lx-sea-700); }
.lx-demap__pin:nth-child(3) .lx-icon2 { animation-delay: 0.5s; }
.lx-demap__pin:nth-child(4) .lx-icon2 { animation-delay: 1.1s; }
.lx-demap__pin:nth-child(5) .lx-icon2 { animation-delay: 0.8s; }
@media (prefers-reduced-motion: reduce) { .lx-demap__pin .lx-icon2 { animation: none; } }

/* Deutschland-Karte auf Papier (Standorte-Übersicht) */
.lx-demap__paper { max-inline-size: 34rem; margin-inline: auto; aspect-ratio: auto; }
.lx-demap__paper .lx-demap { margin-block: 0.5rem 0.75rem; }
.lx-demap__paper .lx-demap svg { color: var(--lx-dune); }

/* Infobox als Papier (Anfahrt) */
.lx-infobox--paper { align-self: start; aspect-ratio: auto; }
.lx-infobox--paper .lx-paper__body { display: grid; gap: 0.45rem; align-content: start; }
.lx-infobox--paper .lx-infobox__head { margin: 0; }
.lx-infobox--paper .lx-small, .lx-infobox--paper .lx-fine { margin: 0; }
@media (min-width: 52rem) { .lx-infogrid > .lx-infobox--paper { margin-block-start: 0.6rem; } }

/* Datenblatt auf weißem Papier, Polaroid daneben */
.lx-grid-2--specs { align-items: start; margin-block-start: var(--lx-space-l); }
.lx-grid-2--specs > div { display: grid; justify-items: center; align-content: center; min-block-size: 100%; }
.lx-paper--specs { aspect-ratio: auto; }
.lx-paper--specs .lx-label { margin-block-end: 0.5rem; }
.lx-table--specs { font-size: var(--lx-text-sm); margin-block: 0.25rem 0.75rem; }
.lx-table--specs th, .lx-table--specs td { padding: 0.45rem 0.5rem; border-block-end: 1px solid color-mix(in srgb, var(--lx-ink) 14%, transparent); vertical-align: top; }
.lx-table--specs th { font-weight: 600; color: var(--lx-ink-soft); inline-size: 42%; }
.lx-table--specs tbody tr:hover { background: none; }
.lx-table--specs tr:last-child th, .lx-table--specs tr:last-child td { border-block-end: 0; }
@media (max-width: 52rem) { .lx-table--specs th, .lx-table--specs td { white-space: normal; font-size: var(--lx-text-xs); padding: 0.4rem 0.4rem; } }

/* Wellenlängen als Tickets */
.lx-hpgrid--tickets { gap: var(--lx-space-m) var(--lx-space-s); align-items: start; padding-block-start: 0.9rem; }
.lx-paper--wl { aspect-ratio: auto; }
.lx-paper--wl .lx-paper__body { display: grid; gap: 0.15rem; justify-items: center; padding: 11% 11% 10%; }
.lx-paper--wl .lx-hpcard__name { display: flex; align-items: center; gap: 0.3rem; margin-block-end: 0.3rem; }
.lx-paper--wl .lx-hpcard__spec { justify-content: center; }
.lx-paper--wl .lx-hpcard__spec b { color: var(--lx-pink-700); }
.lx-paper--wl .lx-hpcard__use { color: var(--lx-ink); }
.lx-paper--wl .lx-hpcard__nm { color: var(--lx-sea-700); }

/* Freisteller in Collagen: Hero (hoch, mit Vorrang), Board (klein), schmal (Stift) */
.lx-cutout--hero img { inline-size: 100%; block-size: auto; max-block-size: 36rem; object-fit: contain; object-position: center bottom; }
.lx-cutout--board { display: grid; justify-items: center; align-self: center; }
.lx-cutout--board img { inline-size: auto; max-inline-size: 100%; block-size: auto; max-block-size: 15rem; }
.lx-cutout--slim img { max-block-size: 17rem; }

/* Hero-Board der Technologie-Seite: Polaroid hinten links, Gerät vorn rechts, Post-it unten */
.lx-hero__board { position: relative; padding-block: 0.5rem 1rem; }
.lx-collage--hero { grid-auto-rows: minmax(1rem, auto); }
.lx-collage--hero > .lx-collage__item:nth-child(1) { --c: 1 / span 7; --r: 2 / span 6; --z: 1; --tilt: -4deg; }
.lx-collage--hero > .lx-collage__item:nth-child(2) { --c: 6 / span 7; --r: 1 / span 9; --z: 2; justify-items: end; }
.lx-collage--hero > .lx-collage__item:nth-child(3) { --c: 2 / span 4; --r: 8 / span 2; --z: 3; --tilt: 5deg; justify-items: center; }
.lx-collage--hero .lx-polaroid { max-inline-size: 15rem; }
@media (max-width: 52rem) {
  .lx-collage--hero { display: grid; overflow: visible; margin-inline: 0; padding: 0.5rem 0 0; gap: 0; }
  .lx-collage--hero > .lx-collage__item { flex: none; max-inline-size: none; grid-column: var(--c); grid-row: var(--r); }
  .lx-collage--hero > .lx-collage__item:nth-child(1) { --c: 1 / span 7; --r: 2 / span 5; }
  .lx-collage--hero > .lx-collage__item:nth-child(2) { --c: 6 / span 7; --r: 1 / span 8; }
  .lx-collage--hero > .lx-collage__item:nth-child(3) { --c: 2 / span 5; --r: 7 / span 2; }
  .lx-collage--hero .lx-polaroid { max-inline-size: 13rem; }
  .lx-cutout--hero img { max-block-size: 24rem; }
}

/* Pinnwände: Polaroids und Freisteller in lockeren Reihen, jede Spalte etwas versetzt */
.lx-collage--board, .lx-collage--gallery, .lx-collage--team, .lx-collage--related { grid-auto-rows: auto; gap: var(--lx-space-m) var(--lx-space-xs); align-items: center; padding-block: 0.6rem 1.6rem; }
:is(.lx-collage--board, .lx-collage--gallery, .lx-collage--team, .lx-collage--related) > .lx-collage__item { grid-column: span 3; grid-row: auto; justify-items: center; }
.lx-collage--team > .lx-collage__item { grid-column: span 4; }
:is(.lx-collage--board, .lx-collage--gallery, .lx-collage--team, .lx-collage--related) > .lx-collage__item:nth-child(4n+1) { --tilt: -3deg; translate: 0 0; }
:is(.lx-collage--board, .lx-collage--gallery, .lx-collage--team, .lx-collage--related) > .lx-collage__item:nth-child(4n+2) { --tilt: 2deg; translate: 0 1.4rem; }
:is(.lx-collage--board, .lx-collage--gallery, .lx-collage--team, .lx-collage--related) > .lx-collage__item:nth-child(4n+3) { --tilt: -1.5deg; translate: 0 -0.6rem; }
:is(.lx-collage--board, .lx-collage--gallery, .lx-collage--team, .lx-collage--related) > .lx-collage__item:nth-child(4n+4) { --tilt: 4deg; translate: 0 1.9rem; }
:is(.lx-collage--board, .lx-collage--gallery, .lx-collage--team, .lx-collage--related) > .lx-collage__item:nth-child(8n+5) { --tilt: -2.5deg; }
:is(.lx-collage--board, .lx-collage--gallery, .lx-collage--team, .lx-collage--related) > .lx-collage__item:nth-child(8n+6) { --tilt: 1deg; }
:is(.lx-collage--board, .lx-collage--gallery, .lx-collage--team, .lx-collage--related) > .lx-collage__item:nth-child(8n+7) { --tilt: 3deg; }
:is(.lx-collage--board, .lx-collage--gallery, .lx-collage--team, .lx-collage--related) > .lx-collage__item:nth-child(8n+8) { --tilt: -1deg; }
.lx-collage--board > .lx-collage__item:last-child { align-self: center; }
.lx-collage--board .lx-polaroid { max-inline-size: 16rem; }
.lx-collage--team .lx-polaroid { max-inline-size: 19rem; }
@media (max-width: 52rem) {
  :is(.lx-collage--board, .lx-collage--gallery, .lx-collage--team, .lx-collage--related) > .lx-collage__item { translate: 0 0; flex-basis: 72%; max-inline-size: 72%; }
  :is(.lx-collage--board, .lx-collage--gallery, .lx-collage--team, .lx-collage--related) > .lx-collage__item:nth-child(even) { translate: 0 0.8rem; }
  .lx-cutout--board img { max-block-size: 13rem; }
}

/* Verwandte Zonen als verlinkte Polaroids */
.lx-zonelink { display: block; inline-size: 100%; max-inline-size: 16rem; text-decoration: none; color: inherit; border-radius: var(--lx-r-md); }
.lx-zonelink > .lx-polaroid { inline-size: 100%; max-inline-size: none; }
.lx-zonelink:focus-visible { outline: 3px solid var(--lx-cta-ring); outline-offset: 6px; }
.lx-collage--related .lx-polaroid__cap { font-size: clamp(0.9rem, 6.8cqi, 1.35rem); inset-inline: 7%; }
@media (hover: hover) { .lx-zonelink:hover .lx-polaroid { transform: translateY(-4px); } }

/* ---- Querscroll mobil (Spec 003): Eck-Ribbon, schräge Panels und Footer ragten 22 bis 38 px
   über den rechten Rand und machten die Seite auf dem Handy quer scrollbar. Der Ribbon sitzt
   jetzt in einem Clip-Rahmen (auf dem Desktop bleibt er fixed und unberührt), main und Footer
   schneiden seitliche Überstände ab; overflow-x: clip erzeugt keinen Scroll-Container, sticky bleibt. ---- */
.lx-cornerwrap { position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 14rem; overflow: clip; pointer-events: none; z-index: 70; }
.lx-cornerwrap > .lx-cornerribbon { pointer-events: auto; }
@media (max-width: 52rem) {
  main, .lx-footer { overflow-x: clip; }
}

/* ============================================================
   Kompakt-Pass V5.1 (Jasper 30.10.2026): vertikal kompakt, Kugelschreiber-
   Handschrift auf Post-its und Notizen, Icons in der Titelzeile integriert,
   Gerät als Board, Ablauf als Dreierreihe mit Polaroids.
   ============================================================ */
@font-face { font-family: "Reenie Beanie"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/reenie-beanie-400.woff2") format("woff2"); }
.lx-postit, .lx-postit__text { font-family: var(--lx-font-pen); font-weight: 400; letter-spacing: 0.01em; }
.lx-postit--s { font-size: 1.45rem; } .lx-postit--m { font-size: 1.85rem; } .lx-postit--l { font-size: 2.4rem; }
.lx-polaroid__cap, .lx-polaroid figcaption { font-family: var(--lx-font-pen); font-weight: 400; }
.lx-paper--note, .lx-note { font-family: var(--lx-font-pen); }
.lx-icon2 .lx-duo-a { stroke-width: 2.7; }
.lx-iconh { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.35rem; }
.lx-iconh .lx-icon2 { inline-size: 2.1rem; block-size: 2.1rem; margin: 0; flex: none; }
.lx-usp-row--v5 { grid-template-columns: 1fr; gap: var(--lx-space-m); }
@media (min-width: 52rem) { .lx-usp-row--v5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lx-usp--v5 { display: block; border: 0; }
.lx-usp--v5 h3 { grid-column: auto; }
.lx-usp--v5 p { margin: 0; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.lx-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem 1.25rem; align-items: start; }
@media (max-width: 62rem) { .lx-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lx-board__col { position: relative; }
.lx-board__col .lx-polaroid { margin: 0 0.4rem; }
.lx-board__col .lx-paper { margin: -1.3rem 0.35rem 0; position: relative; z-index: 2; }
.lx-board__col .lx-paper h3 { font-size: 1.05rem; margin: 0.1rem 0 0.2rem; }
.lx-board__col .lx-paper p { font-size: var(--lx-text-sm); margin: 0; color: var(--lx-ink-soft); }
.lx-statrow--v5 { margin-block-start: var(--lx-space-m); }
.lx-steps3 { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 52rem) { .lx-steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lx-steps3 li { position: relative; padding: 0.6rem 0 0 0.4rem; }
.lx-steps3 li > .lx-postit { position: absolute; inset-block-start: -0.5rem; inset-inline-start: -0.4rem; z-index: 3; }
.lx-steps3 .lx-polaroid { max-inline-size: 17rem; }
.lx-steps3 h3 { margin: 0.75rem 0 0.2rem; }
.lx-steps3 p { margin: 0; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.lx-wl4 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 40rem) { .lx-wl4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .lx-wl4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lx-wl4 .lx-paper b { display: block; margin: 0 0 0.2rem; }
.lx-wl4 .lx-paper p { font-size: var(--lx-text-sm); margin: 0; color: var(--lx-ink-soft); }
.lx-skinstrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-block-start: var(--lx-space-m); }
@media (min-width: 62rem) { .lx-skinstrip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.lx-skinstrip .lx-paper b, .lx-skinstrip .lx-paper span, .lx-skinstrip .lx-paper small { display: block; }
.lx-skinstrip .lx-paper span { font-size: var(--lx-text-sm); }
.lx-skinstrip .lx-paper small { font-family: var(--lx-font-pen); font-size: 1.15rem; color: var(--lx-pink-700); }
.lx-sechead .lx-lead { max-inline-size: 44rem; }
.lx-postit--num { font-size: 2.6rem; font-weight: 400; }
.lx-postit--num .lx-postit__text { line-height: 1; }
.lx-skinstrip .lx-paper small { font-size: 1.35rem; }

/* Technologie kompakt (C2) */
.lx-c2.lx-section { padding-block: 2rem; }
.lx-c2.lx-hero { padding-block-end: var(--lx-space-l); }
.lx-c2 .lx-quotable { line-height: 1.5; }
.lx-c2-ce .lx-section--tight { padding-block: 2rem; }
.lx-c2 .lx-sechead { margin-block-end: var(--lx-space-xs); }
@media (min-width: 52rem) { .lx-c2 .lx-sechead { grid-template-columns: 1fr 1fr; } }
.lx-c2-sub { margin-block-start: var(--lx-space-s); }
.lx-c2 .lx-cutout--hero img { max-block-size: 27rem; }
.lx-c2-intro { display: grid; gap: 0.55rem; align-self: end; }
.lx-c2-intro .lx-lead, .lx-c2-intro .lx-quotable { margin: 0; }
.lx-c2 .lx-fine { margin-block-start: var(--lx-space-s); max-inline-size: none; }
.lx-c2 .lx-usp-row--v5 { gap: var(--lx-space-s) var(--lx-space-m); }
.lx-c2 .lx-usp--v5 .lx-iconh { white-space: normal; }
.lx-c2 .lx-usp--v5 p { max-inline-size: none; }
/* Plattform: sechs USPs links, Datenblatt-Papier rechts daneben, kompakte Zeilen */
.lx-c2-plat { display: grid; gap: var(--lx-space-m); align-items: center; }
@media (min-width: 52rem) {
  .lx-c2-plat { grid-template-columns: 11fr 13fr; gap: var(--lx-space-l); }
  .lx-c2-plat .lx-usp-row--v5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-c2-plat .lx-iconh span { font-size: 1.2rem; }
}
.lx-c2-plat .lx-paper--specs { align-self: center; }
.lx-c2 .lx-table--specs { margin-block: 0.15rem 0.4rem; font-size: var(--lx-text-xs); }
.lx-c2 .lx-table--specs th, .lx-c2 .lx-table--specs td { padding: 0.18rem 0.4rem; line-height: 1.3; }
.lx-c2 .lx-paper--specs .lx-paper__body { padding: 4.5% 6% 5% 8.5%; }
.lx-c2 .lx-table--specs th { inline-size: 38%; }
/* Board: Polaroid mittig, Notiz darunter getuckert */
.lx-c2 .lx-board { margin-block-start: var(--lx-space-xs); gap: 1.5rem 1rem; }
.lx-c2 .lx-board .lx-polaroid { max-inline-size: 12.5rem; margin-inline: auto; }
.lx-c2 .lx-board__col .lx-paper { margin-block-start: -0.6rem; aspect-ratio: auto; }
/* Mobil: Board als Wischreihe, breite Spalten statt zwei schmaler Grid-Spalten */
@media (max-width: 52rem) {
  .lx-c2 .lx-board { display: flex; }
  .lx-c2 .lx-board > .lx-board__col { flex: 0 0 74%; max-inline-size: 74%; }
  .lx-c2 .lx-table--cards td { white-space: normal; }
}
/* Wischreihe: Polaroids und Freisteller an Pin und Klammer, Platz nach oben für Tape und Pin */
.lx-c2-row { padding-block: 1.9rem 0.5rem; align-items: center; gap: var(--lx-space-m); margin-block-start: 0; }
.lx-c2-row__item { inline-size: clamp(8.5rem, 16vw, 9.5rem); }
.lx-c2-row .lx-cutout { display: grid; justify-items: center; }
.lx-c2-row .lx-cutout img { inline-size: auto; block-size: auto; max-block-size: 9.5rem; max-inline-size: 100%; }
.lx-c2-row .lx-cutout--tips > .lx-pin { inset-inline-start: 19%; }
.lx-c2-row .lx-cutout--hand > .lx-clip { inset-inline-start: -0.9rem; inset-block-start: 0.4rem; }
/* Wellenlängen-Tickets und Hauttypen */
.lx-c2 .lx-wl4 { margin-block-start: var(--lx-space-xs); }
.lx-c2 .lx-wl4 .lx-paper .lx-iconh { justify-content: center; margin-block-end: 0.15rem; }
.lx-c2 .lx-wl4 .lx-paper .lx-iconh span { font-size: var(--lx-text-lg); }
.lx-c2 .lx-skinstrip { margin-block-start: var(--lx-space-s); }
/* Anbietervideos: zwei nebeneinander, nie breiter als 36rem */
.lx-c2-videos { margin-block-start: var(--lx-space-m); grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: 36rem; margin-inline: auto; gap: 1rem; }
.lx-c2-videos figcaption { font-size: var(--lx-text-xs); padding-block-start: 0.4rem; }
@media (max-width: 40rem) { .lx-c2-videos { grid-template-columns: 1fr; } }
/* Aufsätze: vier Karten in einer Reihe, Icon in der Titelzeile */
.lx-c2-tips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 62rem) { .lx-c2-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .lx-c2-tips { grid-template-columns: 1fr; } }
.lx-c2-tips .lx-hpcard { padding: 0.9rem 1.1rem 1rem; }
.lx-c2-tips .lx-hpcard .lx-iconh { margin-block-end: 0.2rem; }
.lx-c2-tips .lx-hpcard .lx-iconh span { font-size: var(--lx-text-lg); }
.lx-c2-tips .lx-hpcard .lx-hpcard__spec b { font-size: 1.15rem; }
/* Sicher, kühl, dokumentiert: Text und Dreierreihe links, Polaroid rechts */
.lx-c2-safe { align-items: center; }
.lx-c2-safe .lx-quotable { margin-block: 0.4rem 0; }
.lx-c2-safe .lx-usp-row--v5 { margin-block-start: var(--lx-space-s); }
@media (min-width: 52rem) { .lx-c2-safe { grid-template-columns: 7fr 3fr; } .lx-c2-safe .lx-usp-row--v5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lx-space-s); } }
.lx-c2-aside { display: grid; justify-items: center; align-content: center; gap: 1.5rem; }
.lx-c2-aside .lx-polaroid { max-inline-size: 15rem; }
/* Vergleichstabelle und FAQ: kompaktere Zeilen */
.lx-c2 .lx-table--cards th, .lx-c2 .lx-table--cards td { padding: 0.5rem 0.8rem; }
.lx-c2 .lx-faq { gap: 0.4rem; }
.lx-c2 .lx-faq summary { padding: 0.7rem var(--lx-space-s); }

/* ---- Collage V6 (OC24-Stil): Hero-Collage und Hauttyp-Farbmuster ---- */
.lx-hero__collage { position: relative; }
.lx-hero__collage img { display: block; inline-size: 100%; block-size: auto; }
.lx-herostage--collage { position: relative; }
.lx-skin6 { list-style: none; margin: var(--lx-space-m) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 0.9rem; }
@media (min-width: 62rem) { .lx-skin6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.lx-skin6 li { display: grid; gap: 0.1rem; justify-items: start; }
.lx-skin6 img { inline-size: 100%; block-size: auto; rotate: var(--tilt, 0deg); margin-block-end: 0.5rem; transition: rotate var(--lx-dur) var(--lx-ease), translate var(--lx-dur) var(--lx-ease); }
.lx-skin6 li:hover img { rotate: 0deg; translate: 0 -3px; }
.lx-skin6 b { font-family: var(--lx-font-display); font-size: 1rem; letter-spacing: var(--lx-track-h3); }
.lx-skin6 span { font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.lx-skin6 small { font-family: var(--lx-font-pen); font-size: 1.35rem; color: var(--lx-pink-700); line-height: 1; }

/* ---- Videoschau (Jasper 30.10.: Videos groß und ruhig einbinden, nicht winzig) ---- */
.lx-videoshow { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-block-start: var(--lx-space-m); }
@media (min-width: 52rem) { .lx-videoshow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
.lx-videoshow .lx-video { position: relative; margin: 0; }
.lx-videoshow .lx-video video { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: var(--lx-r-md); background: var(--lx-navy); }
.lx-videoshow .lx-video figcaption { display: flex; align-items: center; gap: 0.6rem; padding-block-start: 0.7rem; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.lx-videoshow .lx-video figcaption b { color: var(--lx-ink); font-family: var(--lx-font-display); font-size: 1rem; }
.lx-videoshow .lx-video figcaption .lx-icon2 { inline-size: 1.6rem; block-size: 1.6rem; margin: 0; flex: none; }

/* ---- Wischreihen (DESIGN.md 30.10.2026): nur horizontal wischen, nichts abschneiden, Schatten haben Platz ---- */
.lx-slider, .lx-swipe, .lx-collage:not(.lx-collage--stack), .lx-c2-row { touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.lx-slider { overflow-y: hidden; padding-block: 1.5rem; margin-block: -1.5rem; }
@media (max-width: 52rem) {
  .lx-swipe, .lx-collage:not(.lx-collage--stack), .lx-c2-row { overflow-y: hidden; padding-block: 1.6rem; margin-block: -1.2rem; }
  .lx-slider { padding-block: 1.6rem; margin-block: -1.4rem; }
}
.lx-slider > *, .lx-swipe > *, .lx-collage__item { align-self: flex-start; }

/* ============================================================
   Mobil-Wischreihen V7 (30.10.2026)
   Auf dem Handy wird nichts mehr zum Stapel: Wellenlängen-Tickets, Hauttyp-
   Muster, die drei Schritte, das Geräte-Board und die Inklusiv-Liste laufen
   waagerecht mit Snap-Punkten. Innenabstand oben/unten fängt Neigung und
   Schatten, negativer Außenabstand gleicht ihn aus (siehe DESIGN.md).
   ============================================================ */
@media (max-width: 52rem) {
  .lx-wl4, .lx-skin6, .lx-steps3, .lx-board.lx-swipe, .lx-table--cards tbody {
    display: flex; flex-wrap: nowrap; align-items: stretch;
    gap: var(--lx-space-s);
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; touch-action: pan-x pan-y;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--lx-gutter);
    margin-inline: calc(-1 * var(--lx-gutter));
    padding: 1.6rem var(--lx-gutter) 1.6rem;
    margin-block: -1.2rem;
    scrollbar-width: none;
  }
  .lx-wl4::-webkit-scrollbar, .lx-skin6::-webkit-scrollbar, .lx-steps3::-webkit-scrollbar, .lx-board.lx-swipe::-webkit-scrollbar, .lx-table--cards tbody::-webkit-scrollbar { display: none; }
  .lx-wl4 > *, .lx-skin6 > *, .lx-steps3 > *, .lx-board.lx-swipe > *, .lx-table--cards tbody > * { flex: 0 0 78%; max-inline-size: 78%; scroll-snap-align: center; margin: 0; }
  .lx-wl4::after, .lx-skin6::after, .lx-steps3::after, .lx-board.lx-swipe::after, .lx-table--cards tbody::after { content: ""; flex: 0 0 0.25rem; }
  .lx-skin6 { margin-block-start: calc(var(--lx-space-s) - 1.2rem); }
  .lx-skin6 > li { flex-basis: 42%; max-inline-size: 42%; scroll-snap-align: start; }
  .lx-steps3 > li { flex-basis: 80%; max-inline-size: 80%; padding: 0.6rem 0 0 0.4rem; }
  .lx-steps3 .lx-polaroid { max-inline-size: none; }
  .lx-board.lx-swipe > .lx-board__col { flex-basis: 76%; max-inline-size: 76%; }
  .lx-table-wrap:has(> .lx-table--cards) { overflow: visible; }
  .lx-table--cards tbody { padding-block: 0.5rem; margin-block: -0.5rem; }
  .lx-table--cards tr { flex-basis: 72%; max-inline-size: 72%; margin-block-end: 0; display: grid; align-content: start; }
}
@media (max-width: 52rem) {
  /* Inklusiv-Liste als Wischkarten: Zeilen umbrechen, kein Pfeil- und Verlaufs-Hinweis der Tabellen-Hülle */
  .lx-table--cards td, .lx-table--cards th { white-space: normal; font-size: var(--lx-text-sm); }
  .lx-table--cards td:first-child { font-size: var(--lx-text-base); line-height: 1.3; }
  .lx-table-wrap:has(> .lx-table--cards) { position: static; }
  .lx-table-wrap:has(> .lx-table--cards)::before, .lx-table-wrap:has(> .lx-table--cards)::after { content: none; }
}


/* ============================================================
   Menü V7 (30.10.2026): rundes Logo, Duotone-Icons in jeder Zeile,
   Unterzeile, Chevron, gestaffeltes Einblenden. Desktop zeigt nur
   Icon + Wort, Handy das volle Blatt.
   ============================================================ */
.lx-nav__link { display: inline-flex; align-items: center; gap: 0.45rem; }
.lx-nav__link .lx-icon2 { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
.lx-nav__link .lx-icon2 .lx-duo-a { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.lx-nav__link .lx-icon2 .lx-duo-b { opacity: 1; transform: none; animation: none; }
.lx-nav__link small, .lx-nav__chev, .lx-nav__head, .lx-nav__item--home, .lx-nav__contact { display: none; }
.lx-nav__cta .lx-icon2 { display: none; }
@media (max-width: 52rem) {
  .lx-nav__links {
    display: none; position: fixed; inset: 0; z-index: var(--lx-z-nav);
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: calc(0.9rem + env(safe-area-inset-top)) var(--lx-gutter) calc(5.2rem + env(safe-area-inset-bottom));
    background: var(--lx-navy); background-image: var(--lx-grain); border: 0; overflow-y: auto; overscroll-behavior: contain;
  }
  .lx-header:has(.lx-nav__toggle:checked) .lx-nav__links { display: flex; }
  .lx-nav__close-li { display: flex; align-items: center; justify-content: space-between; padding-block: 0.2rem 1rem; margin-block-end: 0.4rem; border-block-end: 1px solid color-mix(in srgb, var(--lx-text-inv) 12%, transparent); }
  .lx-nav__head { display: flex; align-items: center; gap: 0.75rem; }
  .lx-nav__head img { inline-size: 46px; block-size: 46px; border-radius: 50%; box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
  .lx-nav__head-txt { display: grid; line-height: 1.15; color: var(--lx-text-inv); font-family: var(--lx-font-display); font-weight: 700; font-size: 1.05rem; }
  .lx-nav__head-txt small { font-family: var(--lx-font-body); font-weight: 400; font-size: 0.78rem; color: var(--lx-text-inv-soft); }
  .lx-nav__close { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--lx-navy-raised); color: var(--lx-text-inv); cursor: pointer; }
  .lx-nav__close svg { inline-size: 1.1rem; block-size: 1.1rem; }
  .lx-nav__item, .lx-nav__item--home { display: block; border-block-end: 1px solid color-mix(in srgb, var(--lx-text-inv) 9%, transparent); }
  .lx-nav__links .lx-nav__link {
    display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: center; gap: 0.85rem;
    padding: 0.8rem 0.1rem; background: none !important; border-radius: 0;
    color: var(--lx-text-inv); font-family: var(--lx-font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.1;
  }
  .lx-nav__links .lx-nav__link[aria-current="page"] { color: var(--lx-pink-ondark); }
  .lx-nav__links .lx-nav__link .lx-icon2 { inline-size: 2.1rem; block-size: 2.1rem; color: var(--lx-pink-ondark); --lx-duo: var(--lx-navy-raised); }
  .lx-nav__links .lx-nav__link[aria-current="page"] .lx-icon2 { color: var(--lx-text-inv); --lx-duo: var(--lx-pink-700); }
  .lx-nav__link small { display: block; font-family: var(--lx-font-body); font-weight: 400; font-size: 0.8rem; color: var(--lx-text-inv-soft); margin-block-start: 0.15rem; letter-spacing: 0; }
  .lx-nav__chev { display: block; inline-size: 1.1rem; block-size: 1.1rem; color: var(--lx-text-inv-soft); opacity: 0.7; }
  .lx-nav__cta-li { margin-block-start: 1.2rem; }
  .lx-nav__cta-li a { display: flex; align-items: center; justify-content: center; gap: 0.6rem; inline-size: 100%; font-size: 1.1rem; color: var(--lx-text-inv) !important; background: var(--lx-cta) !important; padding: 0.95em 1em; }
  .lx-nav__cta .lx-icon2 { display: block; inline-size: 1.5rem; block-size: 1.5rem; color: currentColor; --lx-duo: color-mix(in srgb, #fff 22%, transparent); }
  .lx-nav__links .lang-switch { margin-block-start: 1.1rem; }
  .lx-nav__contact { display: grid; gap: 0.55rem; margin-block-start: 1.4rem; padding-block-start: 1rem; border-block-start: 1px solid color-mix(in srgb, var(--lx-text-inv) 12%, transparent); font-size: 0.88rem; color: var(--lx-text-inv-soft); }
  .lx-nav__contact > * { display: flex; align-items: center; gap: 0.55rem; color: var(--lx-text-inv-soft); text-decoration: none; }
  .lx-nav__contact .lx-icon2 { inline-size: 1.3rem; block-size: 1.3rem; flex: none; color: var(--lx-pink-ondark); --lx-duo: var(--lx-navy-raised); }
  /* gestaffelt einblenden */
  @keyframes lx-menu-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
  .lx-header:has(.lx-nav__toggle:checked) .lx-nav__links > li { animation: lx-menu-in 0.42s var(--lx-ease) both; animation-delay: calc(var(--i, 0) * 40ms + 40ms); }
  .lx-header:has(.lx-nav__toggle:checked) .lx-nav__links .lang-switch { --i: 8; }
  @media (prefers-reduced-motion: reduce) { .lx-header:has(.lx-nav__toggle:checked) .lx-nav__links > li { animation: none; } }
}

/* Kicker mit Duotone-Icon in der Zeile */
.lx-label--ico { display: inline-flex; align-items: center; gap: 0.4rem; }
.lx-label--ico .lx-icon2 { inline-size: 1.35rem; block-size: 1.35rem; margin: 0; flex: none; }
.lx-dark .lx-label--ico .lx-icon2, .lx-label--ico[style*="pink-ondark"] .lx-icon2 { color: var(--lx-pink-ondark); --lx-duo: var(--lx-navy-raised); }
.lx-ticket .lx-label--ico .lx-icon2 { color: var(--lx-pink-700); }
/* Kennzahlen mit Icon */
.lx-statrow dt { display: flex; align-items: center; gap: 0.35rem; }
.lx-statrow dt .lx-icon2 { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
/* Footer-Spalten und FAQ */
.lx-footer__h { display: flex; align-items: center; gap: 0.45rem; }
.lx-footer__h .lx-icon2 { inline-size: 1.3rem; block-size: 1.3rem; color: var(--lx-pink-ondark); --lx-duo: var(--lx-navy-raised); }
.lx-faq summary .lx-icon2 { inline-size: 1.5rem; block-size: 1.5rem; flex: none; color: var(--lx-sea-700); --lx-duo: var(--lx-sea-100); }
.lx-faq summary > span { flex: 1; }
.lx-byline__avatar img { inline-size: 44px; block-size: 44px; border-radius: 50%; display: block; }

/* Rundes Logo als Sticker-Badge (Jasper 30.10.: Logo im Kreis, hier und da als Badge) */
.lx-lbadge { display: inline-block; inline-size: var(--s, 5rem); block-size: var(--s, 5rem); rotate: var(--tilt, -8deg); z-index: 5; pointer-events: none; }
.lx-lbadge img { display: block; inline-size: 100%; block-size: 100%; border-radius: 50%; box-shadow: 0 0 0 3px var(--lx-bg), 0 8px 18px rgba(35, 38, 59, 0.22); background: var(--lx-bg); }
.lx-lbadge--cream img { box-shadow: 0 0 0 3px var(--lx-navy), 0 8px 18px rgba(0,0,0,0.3); background: var(--lx-navy); }
.lx-lbadge.lx-inview { animation: lx-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@media (max-width: 52rem) { .lx-lbadge { --s: 3.6rem !important; } }
/* Menü V7 Feinschliff: Kontaktzeile klein, Tabbar-Duotone auf Navy, Badges nie beschnitten */
@media (max-width: 52rem) {
  .lx-nav__links .lx-nav__contact a, .lx-nav__links .lx-nav__contact span { font-family: var(--lx-font-body); font-weight: 500; font-size: 0.9rem; color: var(--lx-text-inv); }
  .lx-nav__links .lx-nav__contact a:hover { color: var(--lx-pink-ondark); }
  .lx-herostage--collage .lx-lbadge { inset-inline-end: 0.6rem !important; inset-block-start: -0.4rem !important; }
  .lx-ticket .lx-lbadge { inset-block-start: auto !important; inset-block-end: 2rem !important; inset-inline-end: 2rem !important; }
}
.lx-tabbar .lx-icon2 { --lx-duo: var(--lx-navy-raised); }
.lx-tabbar .lx-tabbar__cta .lx-icon2 { --lx-duo: color-mix(in srgb, #fff 22%, transparent); }
.lx-tabbar a[aria-current="page"] .lx-icon2 { --lx-duo: color-mix(in srgb, var(--lx-pink-ondark) 28%, transparent); }

/* ============================================================
   Schatten-Reserve für alle Wischreihen (Jasper 30.10.: Drop-Shadows
   waren unten abgeschnitten). Größter Schatten unten: Polaroid 12+14 px,
   Freisteller 18+14 px, Logo-Badge 8+18 px plus Überhang. Darum 4 rem unten,
   3 rem oben, per negativem Außenabstand neutralisiert (DESIGN.md).
   ============================================================ */
.lx-slider, .lx-c2-row { padding-block: 3rem 4rem; margin-block: -2.5rem -3.5rem; }
@media (max-width: 52rem) {
  .lx-slider, .lx-swipe, .lx-collage:not(.lx-collage--stack), .lx-c2-row,
  .lx-wl4, .lx-skin6, .lx-steps3, .lx-board.lx-swipe { padding-block: 3rem 4rem; margin-block: -2.5rem -3.5rem; }
  .lx-skin6 { margin-block-start: calc(var(--lx-space-s) - 2.5rem); }
  .lx-table--cards tbody { padding-block: 0.6rem; margin-block: -0.6rem; }
}


/* ============================================================
   Gebackene Schatten (30.10.2026): kein filter: drop-shadow mehr an Papier,
   Polaroid, Post-it, Freistellern. Die Texturen tragen den Schatten selbst
   (scripts/collage-v6/bake-shadows.py), die Pseudo-Elemente wachsen per
   negativem Inset genau um den gebackenen Rand, die sichtbare Fläche bleibt.
   Grund: Safari rendert CSS-Filter in Scrollern mal weich, mal hart, mal beschnitten.
   ============================================================ */
.lx-paper::before { filter: none; inset: -3.78% -7.35% -11.35% -7.35%; }
.lx-paper--white::before { inset: -4.49% -6.25% -13.47% -6.25%; }
.lx-paper--mint::before { inset: -3.85% -7.70% -11.55% -7.70%; }
.lx-paper--pink::before { inset: -3.85% -7.69% -11.55% -7.69%; }
.lx-paper--ticket::before { inset: -7.67% -8.28% -23.02% -8.28%; }
.lx-paper--tall::before { inset: -2.70% -8.16% -8.09% -8.16%; }
.lx-polaroid::after { filter: none; inset: -3.28% -8.25% -10.24% -8.25%; }
.lx-postit::before, .lx-postit:hover::before { filter: none; inset: -5.35% -9.29% -13.55% -9.29%; }
.lx-cutout img, .lx-clip, .lx-pin { filter: none; }
/* Freisteller tragen jetzt ~17 % Schattenrand im Bild, Maße deshalb um rund 12 % angehoben */
.lx-cutout--hero img { max-block-size: 40rem; }
.lx-cutout--board img { max-block-size: 17rem; }
.lx-cutout--slim img { max-block-size: 19rem; }
.lx-c2 .lx-cutout--hero img { max-block-size: 30rem; }
.lx-c2-row .lx-cutout img { max-block-size: 10.6rem; }
.lx-cut-side { inline-size: clamp(11rem, 24vw, 20rem); }
@media (max-width: 52rem) { .lx-cutout--hero img { max-block-size: 27rem; } .lx-cutout--board img { max-block-size: 14.5rem; } }

/* ============================================================
   Post-its V8 (Jasper 30.10.: nie mehr als zwei Zeilen, bolder, lesbarer):
   Kalam 700 als Marker-Handschrift, breites Format für alles über 12 Zeichen.
   ============================================================ */
@font-face { font-family: "Kalam"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/kalam-700.woff2") format("woff2"); }
.lx-postit, .lx-postit__text { font-family: "Kalam", var(--lx-font-marker); font-weight: 700; letter-spacing: 0; line-height: 1.08; }
.lx-postit { font-size: 1.3rem; }
.lx-postit--s { font-size: 1.1rem; }
.lx-postit--l { font-size: 1.6rem; }
.lx-postit__text { text-wrap: balance; overflow-wrap: normal; hyphens: manual; }
.lx-postit--wide { --ps: 11rem; aspect-ratio: 560 / 300; font-size: 1.2rem; padding: calc(var(--ps) * 0.07) calc(var(--ps) * 0.07) calc(var(--ps) * 0.09); }
.lx-postit--wide::before { background-image: url("../img/collage/postit-sun-wide-560.png"); inset: -10.00% -9.29% -25.33% -9.29%; }
.lx-postit--wide.lx-postit--petal::before { background-image: url("../img/collage/postit-petal-wide-560.png"); }
.lx-postit--wide.lx-postit--foam::before { background-image: url("../img/collage/postit-foam-wide-560.png"); }
.lx-postit--wide.lx-postit--peach::before { background-image: url("../img/collage/postit-peach-wide-560.png"); }
.lx-postit--wide > .lx-tape { inline-size: 46%; inset-block-start: -14%; inset-inline-start: 27%; }
.lx-postit--num { font-size: 1.5rem; }
@media (max-width: 52rem) { .lx-postit--wide { --ps: 9.5rem; font-size: 1.05rem; } }
/* Sticker auf Fotos: innerhalb der Foto-Kante bleiben (Foto ist overflow:hidden) */
.lx-zsticker-photo { inset-block-start: 1.4rem; inset-inline-end: 1.6rem; }
/* Audit 30.10. abends: letzte Clipping-Treffer bei 390 px */
@media (max-width: 52rem) {
  .lx-cards__grid, .lx-steps { overflow-y: hidden; padding-block: 3rem 4rem; margin-block: -2.5rem -3.5rem; touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
  .lx-herostage--collage .lx-lbadge { inset-inline-end: 2.4rem !important; inset-block-start: -0.2rem !important; }
  .lx-herostage--collage .lx-herocall { --edge: 2.6rem; }
  .lx-herostage--collage .lx-herocall:nth-of-type(1) { inset-inline-start: var(--edge) !important; }
  .lx-herostage--collage .lx-herocall:nth-of-type(2) { inset-inline-end: var(--edge) !important; }
  .lx-ticket .lx-lbadge { inset-block-end: 2.4rem !important; inset-inline-end: 2.2rem !important; }
  .lx-bfhero__panel .lx-lbadge { inset-inline-end: 2.2rem !important; }
}

/* ============================================================
   Post-it-Tinte V9 (Jasper 30.10.: muss aussehen wie mit Kugelschreiber
   draufgeschrieben, teils nicht deckend, mehrere Linien übereinander).
   Kugelschreiber-Schrift, drei leicht versetzte Striche mit Teil-Deckung,
   Multiply auf das Papier, Tinten-Maske mit Korn und Aussetzern (PNG).
   ============================================================ */
@font-face { font-family: "Shadows Into Light Two"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/shadows-into-light-two-400.woff2") format("woff2"); }
:root { --lx-pen-ink: #1C2558; }
.lx-postit, .lx-postit__text { font-family: "Shadows Into Light Two", "Kalam", var(--lx-font-marker); font-weight: 400; letter-spacing: 0.005em; line-height: 1.05; }
.lx-postit { font-size: 1.5rem; }
.lx-postit--s { font-size: 1.22rem; }
.lx-postit--l { font-size: 1.85rem; }
.lx-postit--wide { font-size: 1.36rem; }
.lx-postit--num { font-size: 1.8rem; }
@media (max-width: 52rem) { .lx-postit--wide { font-size: 1.18rem; } }
.lx-postit__text {
  color: color-mix(in srgb, var(--lx-pen-ink) 74%, transparent);
  text-shadow:
    0.75px 0.45px 0 color-mix(in srgb, var(--lx-pen-ink) 52%, transparent),
    -0.6px 0.85px 0 color-mix(in srgb, var(--lx-pen-ink) 40%, transparent),
    0.35px -0.7px 0 color-mix(in srgb, var(--lx-pen-ink) 28%, transparent),
    1.3px 1px 0 color-mix(in srgb, var(--lx-pen-ink) 16%, transparent);
  mix-blend-mode: multiply;
  -webkit-mask-image: url("../img/collage/ink-mask-512.png"); mask-image: url("../img/collage/ink-mask-512.png");
  -webkit-mask-size: 170px 170px; mask-size: 170px 170px; -webkit-mask-repeat: repeat; mask-repeat: repeat;
  rotate: -1.2deg;
}
.lx-postit--num .lx-postit__text { rotate: -4deg; }
/* Ziffern-Zettel: Caveat (die 1 hat eine Fahne), Tinte etwas blauer, Maske dichter */
.lx-postit--num, .lx-postit--num .lx-postit__text { font-family: var(--lx-font-marker); font-weight: 700; font-size: 2rem; }
:root { --lx-pen-ink: #1F2C6E; }
.lx-postit__text { -webkit-mask-size: 130px 130px; mask-size: 130px 130px; }

/* ============================================================
   Spec 004 (Jasper 04.11.2026): knalligere Sommerfarben, echte Studiofotos,
   Footer V8, Polaroid-Handschrift V10, Wellenlängen als Glas-Streifen,
   Ablauf V4, Inklusivleistungen mit Icons, Fokus-Modul, Sprung-Band.
   ============================================================ */
:root {
  --lx-pink-500: #FF6F91;          /* Flamingo kräftiger (nur Deko, Text nie auf hell) */
  --lx-sea-500: #2FC9C3;           /* Türkis kräftiger */
  --lx-vivid-sun: #FFC21A;
  --lx-vivid-coral: #FF7A59;
  --lx-vivid-pink: #FF5C8A;
  --lx-vivid-turq: #19BFD0;
  --lx-vivid-blue: #2F6BFF;
}

/* ---- Polaroid-Handschrift V10: Kugelschreiber wie auf den Post-its, groß genug, mittig im weißen Streifen ---- */
.lx-polaroid__cap, .lx-collage--related .lx-polaroid__cap {
  inset-inline: 10%; inset-block-end: 5%; block-size: 15%;
  font-family: "Shadows Into Light Two", "Kalam", var(--lx-font-marker); font-weight: 400; letter-spacing: 0;
  font-size: clamp(1.05rem, 8.2cqi, 1.75rem); line-height: 0.98; text-wrap: balance; overflow: visible;
  color: color-mix(in srgb, var(--lx-pen-ink) 80%, transparent);
  text-shadow:
    0.7px 0.45px 0 color-mix(in srgb, var(--lx-pen-ink) 50%, transparent),
    -0.55px 0.8px 0 color-mix(in srgb, var(--lx-pen-ink) 36%, transparent),
    0.3px -0.65px 0 color-mix(in srgb, var(--lx-pen-ink) 24%, transparent);
  mix-blend-mode: multiply;
  -webkit-mask-image: url("../img/collage/ink-mask-512.png"); mask-image: url("../img/collage/ink-mask-512.png");
  -webkit-mask-size: 150px 150px; mask-size: 150px 150px;
  rotate: -2deg;
}
.lx-collage--related .lx-polaroid__cap { font-size: clamp(0.95rem, 7cqi, 1.4rem); }

/* ---- Echte Studiofotos: Einzelfoto mit Text-Unterschrift, Reihe zum Wischen ---- */
.lx-shot { margin: 0; display: grid; gap: 0.55rem; align-content: start; }
.lx-shot img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; display: block;
  box-shadow: 0 0 0 1px rgba(25, 29, 58, 0.06), 0 20px 34px -24px rgba(25, 29, 58, 0.42); }
.lx-shot figcaption { display: grid; gap: 0.05rem; padding-inline: 0.15rem; }
.lx-shot figcaption b { font-family: var(--lx-font-display); font-weight: 700; font-size: 1.02rem; color: var(--lx-ink); }
.lx-shot figcaption span { font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.lx-reel__row { padding-block: 0.6rem 2.6rem; margin-block: -0.6rem -2.2rem; overflow-y: hidden; touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.lx-reel__row > .lx-shot { inline-size: clamp(13.5rem, 23vw, 18.5rem); }
.lx-shot--wide img { aspect-ratio: 4 / 3; }
.lx-shot--feature img { aspect-ratio: 4 / 4.2; max-block-size: 30rem; object-position: 50% 20%; }
.lx-dark .lx-shot figcaption b { color: var(--lx-text-inv); }
.lx-dark .lx-shot figcaption span { color: var(--lx-text-inv-soft); }

/* ---- Footer V8: flach, global, drei Spalten, Social, eine Rechtszeile ---- */
.lx-foot { background: var(--lx-navy); color: var(--lx-text-inv-soft); margin-block-start: var(--lx-space-xl); padding-block: clamp(2.6rem, 2rem + 3vw, 4.25rem) 1.6rem; }
.lx-foot a { color: var(--lx-text-inv-soft); text-decoration: none; font-size: var(--lx-text-sm); transition: color 0.15s; }
.lx-foot a:hover { color: var(--lx-text-inv); text-decoration: none; }
.lx-foot__top { display: grid; gap: 2.2rem; }
@media (min-width: 56rem) { .lx-foot__top { grid-template-columns: minmax(17rem, 1fr) minmax(0, 1.9fr); gap: 3rem; } }
.lx-foot__brand { display: grid; gap: 1rem; justify-items: start; align-content: start; }
.lx-foot__logo img { inline-size: 64px; block-size: 64px; display: block; }
.lx-foot__claim { margin: 0; font-family: var(--lx-font-display); font-weight: 700; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); line-height: 1.2; color: var(--lx-text-inv); max-inline-size: 20ch; }
.lx-foot__claim .fn { color: var(--lx-pink-ondark); }
.lx-foot a.lx-foot__cta { color: var(--lx-text-inv); font-size: var(--lx-text-base); display: inline-flex; gap: 0.5rem; align-items: center; }
.lx-foot__cta .lx-icon2 { inline-size: 1.35rem; block-size: 1.35rem; color: currentColor; --lx-duo: rgba(255, 255, 255, 0.22); }
.lx-foot__cols { display: grid; gap: 1.8rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .lx-foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lx-foot__contact { grid-column: 1 / -1; }
@media (min-width: 40rem) { .lx-foot__contact { grid-column: auto; } }
.lx-foot__h { margin: 0 0 0.8rem; font-family: var(--lx-font-display); font-weight: 700; font-size: 0.95rem; color: var(--lx-text-inv); }
.lx-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.lx-foot__contact li { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr); gap: 0.55rem; align-items: start; font-size: var(--lx-text-sm); }
.lx-foot__contact .lx-icon2 { inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: 0.12rem; color: var(--lx-pink-ondark); --lx-duo: var(--lx-navy-raised); }
.lx-foot__mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.1rem 2rem; margin-block-start: 2.4rem; padding-block: 1.4rem; border-block: 1px solid var(--lx-navy-raised); }
.lx-foot__social { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lx-foot__social a { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 44px; padding-inline: 0.85rem 1rem; border-radius: 6px; background: var(--lx-navy-raised); color: var(--lx-text-inv); font-weight: 600; }
.lx-foot__social a:hover { background: #2E3560; }
.lx-foot__social svg { inline-size: 1.2rem; block-size: 1.2rem; flex: none; }
.lx-foot__proof { display: flex; align-items: center; gap: 0.8rem; }
.lx-foot__proof img { inline-size: 2.9rem; block-size: 2.9rem; }
.lx-gbadge--foot { background: var(--lx-navy-raised); border-color: var(--lx-navy-raised); color: var(--lx-text-inv); min-block-size: 44px; }
.lx-gbadge--foot .lx-stars { color: var(--lx-vivid-sun); letter-spacing: 0.05em; }
.lx-foot__pay { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lx-foot__pay .lx-paychip { block-size: 1.75rem; }
.lx-foot__legal { padding-block-start: 1.2rem; font-size: var(--lx-text-xs); display: grid; gap: 0.8rem 2rem; }
@media (min-width: 56rem) { .lx-foot__legal { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .lx-foot__legal .lx-foot__pay { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; max-inline-size: 26rem; } }
.lx-foot__links { margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.3rem; align-items: center; }
.lx-foot__links span { color: var(--lx-text-inv); }
.lx-foot__links a { font-size: var(--lx-text-xs); }
.lx-foot__fine { margin: 0.6rem 0 0; max-inline-size: 92ch; color: color-mix(in srgb, var(--lx-text-inv-soft) 78%, transparent); line-height: 1.5; }
@media (max-width: 52rem) { .lx-foot { padding-block-end: 1.2rem; } .lx-foot__mid { justify-content: flex-start; } }

/* ---- Wellenlängen V5: Porträt hinter vier Glas-Streifen (gebacken), Hauttyp-Skala als eine Zeile ---- */
.lx-wl5 { display: grid; gap: var(--lx-space-m); align-items: center; }
@media (min-width: 56rem) { .lx-wl5 { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 4vw, 4rem); } }
.lx-wl5__glass { position: relative; margin: 0; border-radius: 8px; overflow: hidden; container-type: inline-size; box-shadow: 0 0 0 1px rgba(25, 29, 58, 0.06), 0 26px 44px -30px rgba(25, 29, 58, 0.45); }
.lx-wl5__glass > img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.lx-wl5__labels { position: absolute; inset: auto 0 0 0; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lx-wl5__labels li { display: grid; gap: 0.15rem; align-content: end; padding: 0 2.6cqi 4cqi; color: var(--lx-ink); }
.lx-wl5__labels b { font-family: var(--lx-font-display); font-weight: 800; font-size: clamp(0.82rem, 4.3cqi, 1.5rem); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.lx-wl5__labels span { font-weight: 600; font-size: clamp(0.68rem, 2.9cqi, 0.95rem); line-height: 1.2; }
.lx-wl5__labels small { font-size: clamp(0.62rem, 2.5cqi, 0.82rem); color: var(--lx-ink-soft); line-height: 1.2; }
.lx-wl5__labels li.is-4 { color: var(--lx-text-inv); }
.lx-wl5__labels li.is-4 small { color: var(--lx-text-inv-soft); }
.lx-wl5__text h2 { margin-block: 0.2rem 0.6rem; }
.lx-wl5__text .lx-lead { margin-block-end: var(--lx-space-s); }
.lx-skinscale { list-style: none; margin: 0 0 var(--lx-space-xs); padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; }
.lx-skinscale li { display: grid; justify-items: center; text-align: center; gap: 0.05rem; }
.lx-skinscale img { inline-size: clamp(2.4rem, 5vw, 3.4rem); block-size: auto; margin-block-end: 0.3rem; }
.lx-skinscale b { font-family: var(--lx-font-display); font-weight: 800; font-size: 1.05rem; line-height: 1; }
.lx-skinscale span { font-size: var(--lx-text-xs); color: var(--lx-ink-soft); line-height: 1.2; }
.lx-skinscale small { font-size: 0.72rem; font-weight: 700; color: var(--lx-pink-700); line-height: 1.3; }

/* ---- Ablauf V4: Polaroid mit echtem Foto, Nummer in der Titelzeile, Handschrift ergänzt statt wiederholt ---- */
.lx-steps3--v4 li { padding: 0; display: grid; align-content: start; }
.lx-steps3--v4 .lx-polaroid { max-inline-size: 19rem; inline-size: 92%; margin-inline: 4%; }
.lx-steps3--v4 h3 { display: flex; align-items: baseline; gap: 0.55rem; margin: 1.1rem 0 0.25rem; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
.lx-stepn { font-family: var(--lx-font-display); font-weight: 800; font-size: 1.9em; line-height: 0.8; color: var(--lx-vivid-coral); letter-spacing: -0.04em; }
.lx-steps3--v4 p { max-inline-size: 30ch; }
@media (max-width: 52rem) { .lx-steps3--v4 > li { inline-size: min(78vw, 19rem); } .lx-steps3--v4 .lx-polaroid { inline-size: 100%; margin-inline: 0; } }

/* ---- Inklusivleistungen: Foto links, Icon-Raster rechts, eine Fußzeile ---- */
.lx-incl { display: grid; gap: var(--lx-space-m); align-items: center; }
@media (min-width: 56rem) { .lx-incl { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem); } }
.lx-incl__photo img { aspect-ratio: 4 / 3; }
.lx-incl__photo figcaption { display: none; }
.lx-incl .lx-sechead { margin-block-end: var(--lx-space-s); grid-template-columns: 1fr; }
.lx-incl__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.4rem; }
@media (min-width: 72rem) { .lx-incl__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lx-incl__list h3 { font-size: 1.02rem; margin: 0 0 0.15rem; gap: 0.5rem; }
.lx-incl__list .lx-icon2 { inline-size: 1.7rem; block-size: 1.7rem; color: var(--lx-ink); --lx-duo: var(--lx-vivid-turq); }
.lx-incl__list li:nth-child(3n+2) .lx-icon2 { --lx-duo: var(--lx-vivid-sun); }
.lx-incl__list li:nth-child(3n) .lx-icon2 { --lx-duo: var(--lx-vivid-pink); }
.lx-incl__list p { margin: 0; padding-inline-start: 2.2rem; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.lx-incl__foot { display: flex; gap: 0.55rem; align-items: flex-start; margin: var(--lx-space-s) 0 0; padding-block-start: var(--lx-space-s); border-block-start: 1px solid var(--lx-line); font-size: var(--lx-text-sm); font-weight: 600; }
.lx-incl__foot .lx-icon2 { inline-size: 1.4rem; block-size: 1.4rem; flex: none; --lx-duo: var(--lx-vivid-turq); }

/* ---- Fokus-Modul (nach Pinterest-Vorlage 04.11.): unscharfes Foto, scharfer Ausschnitt, Haarlinien zu Notizen ---- */
.lx-focus { position: relative; border-radius: 8px; overflow: hidden; container-type: inline-size; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(25, 29, 58, 0.06), 0 30px 50px -34px rgba(25, 29, 58, 0.5); }
.lx-focus__stage { position: relative; }
.lx-focus__bg { inline-size: 100%; aspect-ratio: 1 / var(--r); object-fit: cover; display: block; }
.lx-focus__win { position: absolute; z-index: 2; inset-inline-start: calc(var(--x) * 100%); inset-block-start: calc(var(--y) * 100%);
  inline-size: calc(var(--w) * 100cqi); aspect-ratio: 1; overflow: hidden; outline: 1.5px solid rgba(255, 255, 255, 0.95); }
.lx-focus__win picture { display: contents; }
.lx-focus__win img { position: absolute; inset-block-start: calc(-1 * var(--y) * 100cqi * var(--r)); inset-inline-start: calc(-1 * var(--x) * 100cqi);
  inline-size: 100cqi; max-inline-size: none; block-size: auto; display: block; border-radius: 0; }
.lx-focus__lines { position: absolute; inset: 0; z-index: 1; inline-size: 100%; block-size: 100%; pointer-events: none; }
.lx-focus__lines path { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 1; }
.lx-focus__notes { position: absolute; inset: 0; z-index: 3; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.lx-focus__notes li { position: absolute; inset-inline-start: var(--nx, auto); inset-block-start: var(--ny, auto); inset-inline-end: var(--nr, auto); inset-block-end: var(--nb, auto);
  display: flex; gap: 0.55rem; align-items: center; padding: 0.55rem 0.8rem 0.55rem 0.6rem; border-radius: 6px; background: rgba(251, 247, 240, 0.93);
  box-shadow: 0 10px 24px -16px rgba(25, 29, 58, 0.5); font-size: var(--lx-text-xs); color: var(--lx-ink-soft); line-height: 1.25; max-inline-size: 15rem; }
.lx-focus__notes b { display: block; font-family: var(--lx-font-display); font-weight: 700; font-size: 0.95rem; color: var(--lx-ink); }
.lx-focus__notes .lx-icon2 { inline-size: 1.6rem; block-size: 1.6rem; flex: none; --lx-duo: var(--lx-vivid-turq); }
.lx-focus__go { position: absolute; z-index: 4; inset-inline-start: 33%; inset-block-start: 52%; inline-size: clamp(5.5rem, 10cqi, 7.5rem); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; text-align: center; background: var(--lx-navy); color: var(--lx-text-inv); text-decoration: none;
  font-weight: 600; font-size: 0.9rem; line-height: 1.1; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 16px 30px -16px rgba(25, 29, 58, 0.7); rotate: -6deg; transition: scale 0.2s var(--lx-ease); }
.lx-focus__go span { font-family: var(--lx-font-display); font-weight: 800; font-size: 1.7em; color: var(--lx-vivid-sun); }
.lx-focus__go:hover { scale: 1.05; }
.lx-focus__go:focus-visible { outline: 3px solid var(--lx-vivid-sun); outline-offset: 3px; }
@media (max-width: 52rem) {
  .lx-focus { --w: 0.34 !important; --x: 0.45 !important; --y: 0.25 !important; overflow: visible; box-shadow: none; border-radius: 0; container-type: inline-size; }
  .lx-focus__stage { overflow: hidden; border-radius: 8px; }
  .lx-focus__lines { display: none; }
  .lx-focus__notes { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-block-start: 0.9rem; }
  .lx-focus__notes li { position: static; max-inline-size: none; background: var(--lx-bg-alt); box-shadow: none; align-items: flex-start; padding: 0.6rem; }
  .lx-focus__go { inset-inline-start: 1rem; inset-block-start: 1rem; inline-size: 5rem; font-size: 0.78rem; }
}

/* ---- Sprung-Band (nach Pinterest-Vorlage 04.11.): Riesenwort, Farbwolke, springende Person, Mikrotext ---- */
.lx-jump { background: #FFE9EE; overflow: hidden; padding-block: clamp(2.5rem, 5vw, 4rem); }
.lx-jump__in { position: relative; display: grid; min-block-size: clamp(28rem, 38vw, 36rem); align-items: end; container-type: inline-size; }
.lx-jump__word { position: absolute; z-index: 2; inset-inline-start: -0.04em; inset-block-start: 50%; translate: 0 -58%; margin: 0;
  font-family: var(--lx-font-display); font-weight: 800; font-size: clamp(7rem, 27cqi, 22rem); line-height: 0.8; letter-spacing: -0.06em; color: var(--lx-vivid-pink); white-space: nowrap; }
.lx-jump__smoke { position: absolute; z-index: 1; inset-inline-start: 36%; inset-block-start: 50%; translate: -50% -50%; inline-size: clamp(22rem, 48cqi, 40rem); mix-blend-mode: multiply; pointer-events: none; }
.lx-jump__person { position: absolute; z-index: 3; inset-inline-start: 36%; inset-block-end: 0; translate: -50% 0; block-size: 104%; inline-size: auto; max-inline-size: none; }
.lx-jump__copy { position: relative; z-index: 4; justify-self: end; inline-size: min(100%, 23rem); padding: 1.4rem 1.5rem 1.5rem; border-radius: 8px; background: var(--lx-bg);
  box-shadow: 0 0 0 1px rgba(25, 29, 58, 0.06), 0 24px 40px -28px rgba(25, 29, 58, 0.45); margin-block-end: 1.5rem; }
.lx-jump__copy h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0 0 0.5rem; }
.lx-jump__copy p { margin: 0 0 1rem; color: var(--lx-ink-soft); font-size: var(--lx-text-sm); }
.lx-jump__micro { position: absolute; z-index: 4; inset-block-start: 0.4rem; inset-inline-end: 0; list-style: none; margin: 0; padding: 0; display: flex; gap: 1.2rem;
  font-size: 0.72rem; font-weight: 600; color: var(--lx-ink-soft); }
.lx-jump__micro li::before { content: "+ "; color: var(--lx-vivid-pink); }
@media (max-width: 52rem) {
  .lx-jump__in { min-block-size: 0; align-items: start; padding-block-start: 19rem; }
  .lx-jump__word { inset-block-start: 7.5rem; translate: 0 -50%; font-size: 34vw; }
  .lx-jump__smoke { inset-inline-start: 50%; inset-block-start: 9rem; inline-size: 26rem; }
  .lx-jump__person { inset-inline-start: 58%; inset-block-end: auto; inset-block-start: 0; block-size: 20rem; }
  .lx-jump__copy { justify-self: stretch; inline-size: auto; margin-block-end: 0; }
  .lx-jump__micro { display: none; }
}

/* Zonenseite: Behandlungsfoto neben dem Ablauf */
.lx-zablauf { display: grid; gap: var(--lx-space-m); align-items: start; }
@media (min-width: 56rem) {
  .lx-zablauf { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
  .lx-zablauf .lx-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lx-zablauf__photo img { max-block-size: 34rem; }

@media (max-width: 40rem) {
  .lx-skinscale { gap: 0.25rem; align-items: start; }
  .lx-skinscale span { font-size: 0.68rem; }
  .lx-foot__social { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; inline-size: 100%; }
  .lx-foot__social a { justify-content: center; gap: 0.4rem; padding-inline: 0.4rem; font-size: 0.8rem; }
  .lx-incl__list { gap: 0.9rem 1rem; }
  .lx-incl__list p { padding-inline-start: 0; }
}
.lx-reel__more { margin: var(--lx-space-s) 0 0; }

/* ============================================================
   Handschrift V11 (Jasper 04.11.2026: „die Handschrift auf Post-its usw. endlich komplett ersetzen,
   die ist unscharf“): eine scharfe, offene Handschrift für alles (Schoolbell), volle Deckung,
   keine Tinten-Maske, keine versetzten Striche, kein Multiply. Ersetzt Post-it-Tinte V9 und Polaroid V10.
   ============================================================ */
@font-face { font-family: "Schoolbell"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/schoolbell-400.woff2") format("woff2"); }
:root { --lx-font-pen: "Schoolbell", "Segoe Print", cursive; --lx-font-marker: "Schoolbell", "Segoe Print", cursive; --lx-pen-ink: #1E2456; }
.lx-postit, .lx-postit__text, .lx-postit--num, .lx-postit--num .lx-postit__text,
.lx-polaroid__cap, .lx-polaroid figcaption, .lx-collage--related .lx-polaroid__cap, .lx-paper--note, .lx-note {
  font-family: var(--lx-font-pen); font-weight: 400; letter-spacing: 0;
}
.lx-postit__text, .lx-polaroid__cap, .lx-collage--related .lx-polaroid__cap {
  color: var(--lx-pen-ink); text-shadow: none; mix-blend-mode: normal;
  -webkit-mask-image: none; mask-image: none; -webkit-font-smoothing: antialiased;
}
.lx-postit { font-size: 1.3rem; line-height: 1.12; }
.lx-postit--s { font-size: 1.12rem; }
.lx-postit--l { font-size: 1.6rem; }
.lx-postit--wide { font-size: 1.2rem; }
.lx-postit--num, .lx-postit--num .lx-postit__text { font-size: 2rem; }
@media (max-width: 52rem) { .lx-postit--wide { font-size: 1.06rem; } }
.lx-polaroid__cap { font-size: clamp(1rem, 7.4cqi, 1.5rem); line-height: 1.1; rotate: -1.2deg; inset-block-end: 5.5%; block-size: 14%; }
.lx-collage--related .lx-polaroid__cap { font-size: clamp(0.9rem, 6.4cqi, 1.25rem); }
.lx-polaroid::after { filter: none; }

/* ---- Spec 004 b: Gerät mit Teilen, Wellenlängen-Liste, Ablauf als Fotokarten, Datenblatt ohne Zettel ---- */
.lx-anat { display: grid; gap: 1.2rem clamp(2rem, 4vw, 4rem); align-items: start;
  grid-template-columns: minmax(13rem, 4fr) minmax(0, 8fr); grid-template-areas: "dev head" "dev grid" "dev facts" "dev after"; }
.lx-anat__head { grid-area: head; }
.lx-anat__head h2 { margin-block: 0.2rem 0.5rem; }
.lx-anat__head .lx-lead { margin: 0; max-inline-size: 46ch; }
.lx-anat__dev { grid-area: dev; position: relative; margin: 0; display: grid; place-items: center; align-self: center; padding-block: 1rem; }
.lx-anat__sun { position: absolute; inline-size: min(100%, 22rem); inset-block-start: 6%; inset-inline-start: 50%; translate: -50% 0; }
.lx-anat__img { position: relative; block-size: clamp(22rem, 32vw, 28rem); inline-size: auto; max-inline-size: none; }
.lx-anat__grid { grid-area: grid; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.lx-anat__part { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.85rem; align-items: center; padding: 0.7rem; border-radius: 8px;
  background: var(--lx-bg); box-shadow: 0 0 0 1px rgba(25, 29, 58, 0.06), 0 14px 28px -22px rgba(25, 29, 58, 0.45); }
.lx-anat__part img { inline-size: 4.6rem; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }
.lx-anat__part h3 { margin: 0 0 0.15rem; font-size: 1rem; }
.lx-anat__part p { margin: 0; font-size: 0.86rem; color: var(--lx-ink-soft); line-height: 1.4; }
.lx-anat__facts { grid-area: facts; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.8rem; }
.lx-anat__facts li { display: flex; align-items: center; gap: 0.5rem; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.lx-anat__facts b { color: var(--lx-ink); font-family: var(--lx-font-display); font-weight: 700; margin-inline-end: 0.2rem; }
.lx-anat__facts .lx-icon2 { inline-size: 1.5rem; block-size: 1.5rem; --lx-duo: var(--lx-vivid-turq); }
.lx-anat__after { grid-area: after; }
@media (max-width: 56rem) {
  .lx-anat { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "dev" "grid" "facts" "after"; gap: 0.9rem; }
  .lx-anat__dev { padding-block: 0.2rem; }
  .lx-anat__img { block-size: 17rem; }
  .lx-anat__sun { inline-size: 14rem; inset-block-start: 0; }
  .lx-anat__grid { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
}

.lx-wllist { list-style: none; margin: 0 0 var(--lx-space-s); padding: 0; display: grid; gap: 0; }
.lx-wllist li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding-block: 0.75rem; border-block-end: 1px solid var(--lx-line); }
.lx-wllist li:first-child { padding-block-start: 0; }
.lx-wllist b { font-family: var(--lx-font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; white-space: nowrap; }
.lx-wllist li.is-1 b { color: #B07800; } .lx-wllist li.is-2 b { color: var(--lx-pink-700); } .lx-wllist li.is-3 b { color: var(--lx-sea-700); } .lx-wllist li.is-4 b { color: #24307A; }
.lx-wllist span { font-size: var(--lx-text-sm); color: var(--lx-ink-soft); line-height: 1.5; }
.lx-wllist em { display: block; font-style: normal; font-weight: 600; color: var(--lx-ink); }
.lx-wl5--detailed { align-items: start; }

.lx-steps5 { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lx-steps5 li { display: grid; gap: 0.9rem; align-content: start; }
.lx-steps5 img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; box-shadow: 0 0 0 1px rgba(25, 29, 58, 0.06), 0 20px 34px -26px rgba(25, 29, 58, 0.45); }
.lx-steps5 h3 { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.3rem; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); }
.lx-steps5 p { margin: 0; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); max-inline-size: 34ch; }
@media (max-width: 52rem) {
  .lx-steps5 { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .lx-steps5 li { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
  .lx-steps5 img { aspect-ratio: 1; }
  .lx-steps5 h3 { font-size: 1.15rem; }
}

.lx-specs { padding: clamp(1.2rem, 2.5vw, 1.8rem); border-radius: 8px; background: var(--lx-bg); box-shadow: 0 0 0 1px rgba(25, 29, 58, 0.06), 0 24px 44px -32px rgba(25, 29, 58, 0.45); }
.lx-specs .lx-table--specs { margin-block: 0.4rem 0.6rem; }

/* ---- Zonenseiten V5 (Jasper 04.11.2026: kompakter, besser gesetzt): Hero mit echtem Foto und Preistabelle, Wissen plus Vorteile, Ablauf plus Pflege ---- */
.lx-zhero { padding-block: clamp(1rem, 2vw, 2rem) clamp(2rem, 4vw, 3.5rem); }
.lx-zhero__grid { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
@media (min-width: 56rem) { .lx-zhero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.lx-zhero h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1.02; margin-block: 0.3rem 0.8rem; max-inline-size: 16ch; }
.lx-zhero .lx-lead { margin: 0 0 1.2rem; max-inline-size: 52ch; }
.lx-zhero__photo img { aspect-ratio: 4 / 5; max-block-size: 36rem; object-position: 50% 40%; }
.lx-zhero__photo figcaption { display: none; }
.lx-zprice2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem 1.6rem; align-items: center; padding: 1rem 1.2rem; border-radius: 8px; background: var(--lx-bg);
  box-shadow: 0 0 0 1px rgba(25, 29, 58, 0.06), 0 20px 36px -28px rgba(25, 29, 58, 0.45); max-inline-size: 36rem; }
.lx-zprice2__main { margin: 0; display: flex; align-items: baseline; gap: 0.4rem; }
.lx-zprice2__ab { font-size: 1rem; font-weight: 600; color: var(--lx-ink-soft); }
.lx-zprice2__main b { font-family: var(--lx-font-display); font-weight: 800; font-size: clamp(2.4rem, 2rem + 1.4vw, 3.2rem); line-height: 1; letter-spacing: -0.03em; color: var(--lx-ink); }
.lx-zprice2__main span:last-child { font-size: var(--lx-text-xs); color: var(--lx-ink-soft); line-height: 1.25; }
.lx-zprice2__rows { list-style: none; margin: 0; padding: 0 0 0 1.4rem; border-inline-start: 1px solid var(--lx-line); display: grid; gap: 0.2rem; }
.lx-zprice2__rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.2rem; gap: 0.6rem; align-items: baseline; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.lx-zprice2__rows b { color: var(--lx-ink); font-weight: 700; text-align: end; }
.lx-zprice2__rows em { font-style: normal; font-weight: 700; font-size: 0.78rem; color: var(--lx-sea-700); }
.lx-zprice2__rows li.is-best span, .lx-zprice2__rows li.is-best b { color: var(--lx-ink); font-weight: 700; }
.lx-zfacts { list-style: none; margin: 1rem 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; }
.lx-zfacts li { display: flex; align-items: center; gap: 0.45rem; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
.lx-zfacts .lx-icon2 { inline-size: 1.35rem; block-size: 1.35rem; --lx-duo: var(--lx-vivid-turq); }
@media (max-width: 40rem) {
  .lx-zprice2 { grid-template-columns: minmax(0, 1fr); }
  .lx-zprice2__rows { padding: 0.7rem 0 0; border-inline-start: 0; border-block-start: 1px solid var(--lx-line); }
}
.lx-zinfo { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 56rem) { .lx-zinfo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.lx-zinfo__text h2 { margin-block: 0.2rem 0.8rem; }
.lx-zinfo__text p { max-inline-size: 64ch; }
.lx-zinfo__box { padding: 1.3rem 1.4rem; border-radius: 8px; background: var(--lx-bg-alt); }
.lx-zinfo__box h3 { font-size: 1.1rem; margin-block-end: 0.7rem; }
.lx-zinfo__box .lx-zbenefits { margin: 0 0 1rem; }
.lx-zinfo__box .lx-quotable { font-size: var(--lx-text-sm); color: var(--lx-ink-soft); margin: 0; }
.lx-zcare { display: grid; gap: 1rem; margin-block-start: var(--lx-space-m); }
@media (min-width: 48rem) { .lx-zcare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lx-zcare > div { padding: 1.2rem 1.3rem; border-radius: 8px; background: var(--lx-bg); box-shadow: 0 0 0 1px rgba(25, 29, 58, 0.06); }
.lx-zcare h3 { font-size: 1.05rem; margin-block-end: 0.5rem; }
.lx-zcare .lx-carelist { margin: 0; font-size: var(--lx-text-sm); }
.lx-zcards { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 52rem) { .lx-zcards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lx-zcard { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.8rem; align-items: center; padding: 0.6rem; border-radius: 8px; background: var(--lx-bg); text-decoration: none; color: var(--lx-ink);
  box-shadow: 0 0 0 1px rgba(25, 29, 58, 0.06), 0 14px 26px -22px rgba(25, 29, 58, 0.45); transition: translate 0.2s var(--lx-ease); }
.lx-zcard:hover { translate: 0 -2px; }
.lx-zcard img { inline-size: 4.2rem; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }
.lx-zcard b { display: block; font-family: var(--lx-font-display); font-weight: 700; font-size: 0.98rem; }
.lx-zcard small { font-size: var(--lx-text-xs); color: var(--lx-ink-soft); }
.lx-zcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: clamp(1.3rem, 3vw, 2rem) clamp(1.3rem, 3vw, 2.4rem); border-radius: 8px; background: var(--lx-navy); color: var(--lx-text-inv); }
.lx-zcta h2 { color: var(--lx-text-inv); font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); margin: 0 0 0.3rem; }
.lx-zcta p { margin: 0; color: var(--lx-text-inv-soft); font-size: var(--lx-text-sm); }

.lx-zinfo__text p + p { margin-block-start: 0.8rem; }
.lx-zinfo__box .lx-zbenefits { display: grid; gap: 0.5rem; padding: 0; list-style: none; }
.lx-zinfo__box .lx-zbenefits li { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: 0.6rem; align-items: start; font-size: var(--lx-text-sm); font-weight: 600; color: var(--lx-ink); }
.lx-zinfo__box .lx-zbenefits .lx-icon2 { inline-size: 1.3rem; block-size: 1.3rem; margin: 0.1rem 0 0; --lx-duo: var(--lx-vivid-turq); }
.lx-zinfo__box h3 .lx-icon2 { --lx-duo: var(--lx-vivid-sun); }
.lx-zsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 56rem) { .lx-zsteps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lx-zsteps h3 { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.3rem; font-size: 1.08rem; }
.lx-zsteps p { margin: 0; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); }
@media (max-width: 40rem) { .lx-zhero__photo img { aspect-ratio: 4 / 3; } }

/* Kein beiger Streifen unter dem Footer (Jasper 04.11.2026): Platz für Sticky-Leiste und Tabbar liegt im Footer selbst, nicht im body */
body, body:has(.lx-stickybar.is-visible) { padding-block-end: 0 !important; }
.lx-foot { padding-block-end: calc(1.6rem + 4.6rem); }
@media (max-width: 52rem) { .lx-foot { padding-block-end: calc(1.2rem + 4.8rem + env(safe-area-inset-bottom, 0px)); } }

/* Geräte-Clip auf der Startseite: Video links, Karten rechts folgen dem Video */
.lx-anat--clip { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.lx-anat__dev--clip { display: block; padding: 0; align-self: center; }
.lx-anat__clip { position: relative; border-radius: 8px; overflow: hidden; background: #1A1440; aspect-ratio: 16 / 9;
  box-shadow: 0 0 0 1px rgba(25, 29, 58, 0.08), 0 30px 50px -32px rgba(25, 29, 58, 0.6); }
.lx-anat__clip video { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.lx-anat__bars { position: absolute; inset: 0.8rem 0.9rem auto; display: flex; gap: 0.35rem; pointer-events: none; }
.lx-anat__bars i { flex: 1; block-size: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); overflow: hidden; position: relative; }
.lx-anat__bars i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); }
.lx-anat__dev--clip figcaption { margin-block-start: 0.5rem; }
.lx-anat--clip .lx-anat__part { cursor: pointer; transition: box-shadow 0.25s var(--lx-ease), background 0.25s var(--lx-ease); }
.lx-anat--clip .lx-anat__part.is-on { background: #fff; box-shadow: 0 0 0 2px var(--lx-vivid-turq), 0 18px 34px -24px rgba(25, 29, 58, 0.5); }
.lx-anat--clip .lx-anat__part:focus-visible { outline: 3px solid var(--lx-cta-ring); outline-offset: 2px; }
@media (max-width: 56rem) { .lx-anat--clip { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) {
  .lx-anat--clip .lx-anat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .lx-anat--clip .lx-anat__part { grid-template-columns: minmax(0, 1fr); gap: 0.45rem; padding: 0.55rem; align-content: start; }
  .lx-anat--clip .lx-anat__part img { inline-size: 100%; aspect-ratio: 16 / 9; }
  .lx-anat--clip .lx-anat__part h3 { font-size: 0.95rem; }
  .lx-anat--clip .lx-anat__part p { font-size: 0.8rem; }
}

/* Spec 005 V2 (04.11.2026): Footer „Abend über Steglitz“. Jasper: „alles total sanft übergehen in das beige … fotorealistisch … mit Himmel,
   der nach oben ins Beige ausfadet, schön animiert mit Sonnenuntergang, Schatten“. Szene steht oben im Footer, Maske oben über 44 % der Höhe
   (ease, nie linear) in Transparenz, darunter scheint der Seitenverlauf des body durch, also auf jeder Seite das passende Beige. Unten läuft sie
   über der Navy-Fläche aus, die erst bei 80 % beginnt. Auf Seiten mit Innenabstand unter der letzten Sektion liegt der Footer 3 rem auf
   (lx-foot--auflage), damit die Höhe unter 12.000 px bleibt; Magazinseiten ohne Auflage. */
.lx-foot.lx-foot--abend { --fsz-h: clamp(15.5rem, 26vw, 24.4rem); --fsz-y: 39%; position: relative; margin-block-start: 0; padding-block-start: 0;
  background: linear-gradient(to bottom, transparent calc(var(--fsz-h) * .8), var(--lx-navy) calc(var(--fsz-h) * .8)); }
.lx-foot--abend.lx-foot--auflage { margin-block-start: -3rem; }
.lx-foot--abend .lx-foot__mid { margin-block-start: 1.6rem; }
.lx-fsz { position: relative; block-size: var(--fsz-h); margin-block-end: clamp(.4rem, 1vw, 1rem); overflow: hidden; pointer-events: none; -webkit-user-select: none; user-select: none; }
.lx-fsz picture { display: contents; }
.lx-fsz__bild, .lx-fsz__video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; object-position: 50% var(--fsz-y); border: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,.012) 4%,rgba(0,0,0,.05) 8%,rgba(0,0,0,.12) 12%,rgba(0,0,0,.23) 16%,rgba(0,0,0,.37) 20%,rgba(0,0,0,.53) 24%,rgba(0,0,0,.69) 28%,rgba(0,0,0,.82) 32%,rgba(0,0,0,.92) 36%,rgba(0,0,0,.98) 40%,#000 44%,#000 76%,rgba(0,0,0,.97) 79%,rgba(0,0,0,.88) 82%,rgba(0,0,0,.72) 85%,rgba(0,0,0,.52) 88%,rgba(0,0,0,.32) 91%,rgba(0,0,0,.15) 94%,rgba(0,0,0,.04) 97%,rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,.012) 4%,rgba(0,0,0,.05) 8%,rgba(0,0,0,.12) 12%,rgba(0,0,0,.23) 16%,rgba(0,0,0,.37) 20%,rgba(0,0,0,.53) 24%,rgba(0,0,0,.69) 28%,rgba(0,0,0,.82) 32%,rgba(0,0,0,.92) 36%,rgba(0,0,0,.98) 40%,#000 44%,#000 76%,rgba(0,0,0,.97) 79%,rgba(0,0,0,.88) 82%,rgba(0,0,0,.72) 85%,rgba(0,0,0,.52) 88%,rgba(0,0,0,.32) 91%,rgba(0,0,0,.15) 94%,rgba(0,0,0,.04) 97%,rgba(0,0,0,0) 100%); }
.lx-fsz__bild { opacity: 0; transition: opacity 1.2s ease; }
.lx-fsz.ist-da .lx-fsz__bild { opacity: 1; }
.lx-fsz__video { opacity: 0; transition: opacity 1.4s ease; }
.lx-fsz__video.is-an { opacity: 1; }
.lx-fsz__video::-webkit-media-controls-start-playback-button, .lx-fsz__video::-webkit-media-controls { display: none !important; -webkit-appearance: none; }
.lx-fsz__voegel { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 2; }
@media (max-width: 52rem) { .lx-foot.lx-foot--abend { --fsz-h: clamp(14rem, 64vw, 21rem); --fsz-y: 50%; } }
@media (prefers-reduced-motion: reduce) { .lx-fsz__bild { transition: none; } }
@media print { .lx-fsz { display: none; } .lx-foot.lx-foot--abend { background: var(--lx-navy); } }

/* ==== Spec 006: Embleme „Deutschlands beste Preise“ (Schwarz-Rot-Gold, 04.11.2026) ====
 * Bild mit gebackenem Schatten; --k, --ms, --mo, --mu kommen aus img/embleme/margins.json (layout.mjs emblem()).
 * Sichtbare Breite = --s (bis 52 rem --sm), das Bild ragt um den Schattenrand darüber hinaus und wird per negativem Rand neutralisiert. */
.lx-emblem { --w: var(--s); display: inline-block; inline-size: var(--w); line-height: 0; rotate: var(--tilt); z-index: 6;
  transition: scale 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-tap-highlight-color: transparent; }
@media (max-width: 52rem) { .lx-emblem { --w: var(--sm, var(--s)); } }
.lx-emblem img { display: block; max-inline-size: none; inline-size: calc(var(--w) * var(--k)); block-size: auto;
  margin-inline: calc(var(--w) * var(--k) * var(--ms) * -1);
  margin-block-start: calc(var(--w) * var(--k) / var(--r) * var(--mo) * -1);
  margin-block-end: calc(var(--w) * var(--k) / var(--r) * var(--mu) * -1); }
.lx-emblem:hover { scale: 1.06; }
.lx-emblem:focus-visible { outline: 3px solid var(--lx-cta-ring); outline-offset: 4px; border-radius: 8px; }
.lx-emblem.lx-emb-wait { opacity: 0; scale: 0.5; }
.lx-emblem.lx-inview { animation: lx-emb-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes lx-emb-in { from { opacity: 0; scale: 0.5; rotate: calc(var(--tilt) - 14deg); } to { opacity: 1; scale: 1; rotate: var(--tilt); } }
@media (prefers-reduced-motion: reduce) {
  .lx-emblem { transition: none; }
  .lx-emblem.lx-emb-wait { opacity: 1; scale: 1; }
  .lx-emblem.lx-inview { animation: none; }
}
.lx-emblem--hero { position: absolute; inset-block-start: -4%; inset-inline-end: -4%; }
.lx-emblem--prhero { position: absolute; inset-block-start: 6.5rem; inset-inline-end: clamp(0rem, 3vw, 3.5rem); }
@media (min-width: 62rem) { .lx-hero:has(.lx-emblem--prhero) :is(.lx-quotable, .lx-lead) { max-inline-size: min(100% - 20rem, 54rem); } }
@media (max-width: 52rem) {
  .lx-emblem--hero { inset-block-start: 3%; inset-inline-end: 1.4rem; }
  .lx-emblem--prhero { inset-block-start: -0.6rem; inset-inline-end: 0; }
}
.lx-zprice2:has(.lx-emblem--zprice) { position: relative; }
.lx-emblem--zprice { position: absolute; inset-block-start: -3.4rem; inset-inline-end: -3.4rem; }
@media (max-width: 52rem) { .lx-emblem--zprice { inset-block-start: -2.2rem; inset-inline-end: 0; } }
.lx-foot__brandrow { display: flex; align-items: center; gap: 1.1rem; }
.lx-foot__brandrow .lx-emblem { flex: none; }

/* Fix 04.11.2026 (Jasper, iPhone, /preise Ganzkörper): Tabellen auf dunklem Grund. Die klebende erste Spalte hatte Creme-Fläche
 * unter Creme-Schrift (leer und weiß), der Wisch-Hinweis rechts lief als Creme-Verlauf über die Navy-Fläche. */
@media (max-width: 52rem) {
  .lx-dark .lx-table:not(.lx-table--cards) th:first-child,
  .lx-dark .lx-table:not(.lx-table--cards) td:first-child { background-color: var(--lx-navy); background-image: var(--lx-grain); box-shadow: 1px 0 0 var(--lx-navy-raised); }
  .lx-dark .lx-table-wrap::after { background: linear-gradient(270deg, var(--lx-navy), transparent); }
  .lx-dark .lx-table-wrap::before { color: var(--lx-pink-ondark); }
}
@media (max-width: 52rem) { .lx-table-wrap.lx-nowisch::after, .lx-table-wrap.lx-nowisch::before { display: none; } }
.lx-emblem--card { position: absolute; inset-block-start: -3.2rem; inset-inline-start: 0.6rem; z-index: 3; }
@media (max-width: 52rem) { .lx-emblem--card { inset-block-start: -1.4rem; inset-inline-start: 0.4rem; } }