/* ============================================================
   Wildwuchs — Global Stylesheet
   2000px reference viewport, clamp() scaling
   ============================================================ */

/* ─── Font Faces ─────────────────────────────────────────── */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/GeistMono.woff2") format("woff2");
}

@font-face {
  font-family: "Bathorie";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Bathorie.woff2") format("woff2");
}

/* ─── Font Variables ─────────────────────────────────────── */
:root {
  --ww-font-display: "Bathorie", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --ww-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ─── Base Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* KEIN height: 100% auf html/body — bricht Lenis Smooth-Scroll.
   Falls Full-Height-Sections nötig: 100dvh/100vh pro Section verwenden. */

/* Anchor-Scroll smooth (native, keine JS-Lib) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ─── Section-Paragraphen — globale Typo-Regeln ─────────────
   Alle Intros / Subtexte / Fliesstexte werden:
   - voll deckend (keine opacity, immer lesbar)
   - schwarz auf hellen Sections, weiß auf --dark Varianten
   - auf var(--ww-p-max) begrenzt (Theme-Setting, Default 680px)

   Selectors fangen die gängigsten Intro-/Subtext-Klassen ab. */
.ww-feature-main__content p,
.ww-lookbook-intro p,
.ww-services-centered__intro,
.ww-show-gallery__text,
.ww-gallery-grid__text,
.ww-pain-points__headline p,
.ww-faq__header p,
.ww-faq__sub,
.ww-faq__answer,
.ww-process__subtext,
.ww-cta-section p,
.ww-related p,
.ww-page-header p,
.ww-service-methods__intro,
.ww-ptable__note,
.ww-price-list__intro,
.ww-testimonials__header p,
.ww-legal p,
.ww-legal li {
  opacity: 1;
  color: var(--ww-black);
  max-width: var(--ww-p-max);
  margin-left: auto;
  margin-right: auto;
}

/* Dark-BG Varianten: weißer Text statt schwarz */
.ww-feature-main--dark p,
.ww-show-gallery--dark .ww-show-gallery__text,
.ww-gallery-grid--dark .ww-gallery-grid__text,
.ww-related--dark p,
.ww-pain-points p,
.ww-testimonials p,
.ww-services-centered--dark .ww-services-centered__intro,
.ww-faq--dark .ww-faq__sub,
.ww-faq--dark .ww-faq__answer,
/* Lookbook ist by default dunkel — light-Variant hat eigene Klasse */
.ww-lookbook-teaser:not(.ww-lookbook-teaser--light) .ww-lookbook-intro p {
  color: var(--ww-white);
}

/* ─── Reveal-System ───────────────────────────────────────
   Opt-in via [data-reveal]. Default: Fade-Up. Direction-Variants: left/right/down/scale.
   Auto-Stagger: parent mit [data-reveal-stagger="N"] setzt N ms Delay pro Child. */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  /* Webflow-Standard: easeOutCubic, ~0.7s — snappy aber smooth, kein "Bounce" am Ende */
  transition:
    opacity 0.7s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: var(--ww-reveal-delay, 0s);
  will-change: opacity, transform;
}

[data-reveal="left"]  { transform: translate3d(-24px, 0, 0); }
[data-reveal="right"] { transform: translate3d(24px, 0, 0); }
[data-reveal="down"]  { transform: translate3d(0, -20px, 0); }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}
[data-reveal="scale"].is-revealed {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none !important;
    transition: none;
  }
}

/* ═══ Hero Text-Layer Reveal (auf Page-Load) ═══════════════
   Staggered entry: p-alt lines → H1 → Subtext → CTAs
   Body.ww-loaded triggert die Animation. */

/* P-Alt: jede Zeile (via JS gesplittet) bekommt --line-i Index */
.ww-hero-main .p-alt .ww-line {
  display: block;
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.75s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: calc(var(--line-i, 0) * 60ms + 100ms);
  will-change: opacity, transform;
}

/* H1, Subtext, CTAs: einzeln via Delay gesteuert */
.ww-hero-main h1,
.ww-hero-main .ww-hero-subtext,
.ww-hero-main .ww-hero-buttons .ww-btn {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 0.7s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: opacity, transform;
}

.ww-hero-main h1 {
  transition-delay: 350ms;
}
.ww-hero-main .ww-hero-subtext {
  transition-delay: 500ms;
}
.ww-hero-main .ww-hero-buttons .ww-btn:nth-child(1) { transition-delay: 650ms; }
.ww-hero-main .ww-hero-buttons .ww-btn:nth-child(2) { transition-delay: 750ms; }

/* Trigger on body.ww-loaded */
body.ww-loaded .ww-hero-main .p-alt .ww-line,
body.ww-loaded .ww-hero-main h1,
body.ww-loaded .ww-hero-main .ww-hero-subtext,
body.ww-loaded .ww-hero-main .ww-hero-buttons .ww-btn {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .ww-hero-main .p-alt .ww-line,
  .ww-hero-main h1,
  .ww-hero-main .ww-hero-subtext,
  .ww-hero-main .ww-hero-buttons .ww-btn {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ═══ Line-by-line H2 Split Reveal ══════════════════════════
   JS wraps each H2 line in <span class="ww-split-line">
   <span class="ww-split-line__inner">...</span></span>
   Inner schiebt sich von unten hoch innerhalb des clipping-Containers. */

.ww-split-line {
  display: block;
  overflow: hidden;
  line-height: inherit;
}

.ww-split-line__inner {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: calc(var(--line-i, 0) * 60ms);
  will-change: transform;
}

[data-split-h2].is-revealed .ww-split-line__inner {
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .ww-split-line__inner {
    transform: none;
    transition: none;
  }
}

/* ═══ Stats-Bar Counter — Zahlen animieren von 0 hoch ════════
   JS liest aktuelle Zahl + Suffix aus .ww-stats-bar__value
   und animiert mit requestAnimationFrame. Kein extra CSS nötig. */


/* Gutenberg/FSE-Hard-Override (ohne diesen Reset injectet Core Padding-Vars) */
.wp-site-blocks { padding: 0 !important; max-width: none !important; margin: 0 !important; }

/* Standard-Page-Template (Fallback wenn keine Sections gepflegt sind) */
.ww-page-standard {
  padding-block: clamp(3rem, 5vw, 5rem);
  padding-top: calc(var(--ww-header-height) + 2rem);
}

body {
  margin: 0;
  color: var(--ww-black);
  background: var(--ww-white);
  font-size: var(--ww-text-size);
  line-height: 1.4;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* clip statt hidden → kein zusätzlicher Scroll-Container, kompatibel mit Lenis */
  overflow-x: clip;
}

html.ww-menu-open,
html.ww-menu-open body {
  overflow: hidden;
  /* iOS: position:fixed verhindert Body-Scroll während Menü offen ist
     (sonst kann dahinter Touch-Scrolling die fixed-Layer verziehen) */
  position: fixed;
  width: 100%;
  height: 100%;
}

img { max-width: 100%; height: auto; }
:where(p, h1, h2, h3) { margin: 0; }
a { color: inherit; }

/* ─── Layout Utilities ───────────────────────────────────── */
.ww-layout--full {
  width: 100%;
  max-width: none;
}

.ww-layout--container {
  width: 100%;
  max-width: var(--ww-content-max);
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--ww-side-padding);
}

.ww-section-wrap {
  /* No vertical gap between sections */
}

.ww-content {
  width: 100%;
  max-width: var(--ww-content-max);
  margin-left: auto;
  margin-right: auto;
}

.ww-section-pad {
  padding-inline: var(--ww-side-padding);
}

@media (max-width: 768px) {
  .is-hidden-mobile { display: none !important; }
}

/* ─── Typography ─────────────────────────────────────────── */
p, h1 {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--ww-text-size);
  font-weight: 400;
  line-height: 1.4;
}

h2 {
  font-family: "Bathorie", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--ww-h2-size);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.01em;
}

h3 {
  font-family: "Bathorie", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--ww-h3-size);
  font-weight: 700;
  line-height: 0.75;
  letter-spacing: 0.01em;
}

.p-alt {
  font-family: "Bathorie", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--ww-palt-size);
  font-weight: 700;
  line-height: 0.75;
  text-transform: lowercase;
}

.h2-alt {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--ww-text-size);
  font-weight: 400;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
}

/* ─── Buttons (CTA) ─────────────────────────────────────── */
.ww-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.9em 1.25em;
  text-decoration: none;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: calc(var(--ww-text-size) * 0.9);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  will-change: transform;
}

.ww-btn:hover {
  transform: translateY(-1px);
}

.ww-btn--neon {
  background: color-mix(in srgb, var(--ww-accent) 85%, transparent);
  color: var(--ww-black);
}
.ww-btn--neon:hover {
  background: var(--ww-accent);
}

.ww-btn--black {
  background: rgba(0,0,0,0.75);
  color: var(--ww-white);
}
.ww-btn--black:hover {
  background: rgba(0,0,0,0.95);
}

.ww-btn--outline {
  background: transparent;
  color: var(--ww-white);
  border-color: rgba(255,255,255,0.65);
}
.ww-btn--outline:hover {
  border-color: rgba(255,255,255,0.95);
}

/* ─── Page Header (no hero, p-alt + H1) ─────────────────── */
.ww-page-header {
  background: #f5f5f5;
  color: var(--ww-black);
  padding-inline: var(--ww-side-padding);
  padding-top: calc(var(--ww-header-height) + clamp(3rem, 6vw, 6rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  text-align: center;
}

.ww-page-header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.ww-page-header__palt {
  font-family: var(--ww-font-display, "Bathorie"), serif;
  font-size: var(--ww-palt-size);
  text-transform: uppercase;
  line-height: 0.85;
  margin: 0;
}

.ww-page-header__h1 {
  font-family: var(--ww-font-body);
  font-size: var(--ww-text-size);
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0;
  opacity: 0.6;
}
.ww-page-header__h1::before { content: "/ "; }
.ww-page-header__h1::after  { content: "."; }

/* ─── Header / Navigation ────────────────────────────────── */
.ww-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  color: var(--ww-white);
}

.ww-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  min-height: var(--ww-header-height);
  padding-block: clamp(6px, 1vh, 10px);
  padding-inline: var(--ww-side-padding);
  width: 100%;
  gap: clamp(0.6rem, 1.6vw, 1.25rem);
  position: relative;
  /* Muss über dem Menu-Panel liegen, damit Logo + CTA + Toggle-Icon
     im geöffneten Zustand sichtbar bleiben. */
  z-index: 1000;
}

/* Pages without hero — push first section below fixed header */
/* page-header handles its own padding-top */
.ww-header--dark {
  background: #f5f5f5;
}

/* Dark header variant (for light bg pages) */
.ww-header--dark {
  color: var(--ww-black);
}
.ww-header--dark .ww-header__logo img {
  filter: invert(1);
}
.ww-header--dark .ww-menu a {
  color: var(--ww-black);
}
.ww-header--dark .ww-menu .ww-menu__sub {
  background: rgba(255,255,255,0.9);
  border-color: rgba(0,0,0,0.1);
}
.ww-header--dark .ww-menu .ww-menu__sub a {
  color: var(--ww-black);
}
.ww-header--dark .ww-menu .ww-menu__sub a:hover {
  color: var(--ww-accent);
}
.ww-header--dark .ww-menu-toggle__icon {
  color: var(--ww-black);
}
.ww-header--dark.is-scrolled {
  background: rgba(245,245,245,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ww-header__spacer { min-width: 0; }

.ww-header__logo img {
  height: clamp(39px, 4vw, 57px);
  width: auto;
}

.ww-header__logo a {
  text-decoration: none;
  color: inherit;
  font-family: "Bathorie", system-ui, sans-serif;
  font-size: clamp(20px, 2vw, 32px);
}

.ww-header.is-scrolled {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(0,0,0,0.28);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

.ww-header a { color: inherit; }

/* Primary Menu */
.ww-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.6vw, 2.25rem);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: calc(var(--ww-text-size) * 0.95);
}

.ww-menu a {
  color: inherit;
  text-decoration: none;
}
.ww-menu a:hover { opacity: 0.85; }

/* Primary dropdown */
.ww-menu .has-children { position: relative; }
.ww-menu .ww-menu__sub {
  position: absolute;
  top: calc(100% + 20px);
  right: 0;
  left: auto;
  margin: 0;
  padding: 0.75rem 0;
  list-style: none;
  min-width: 260px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
}
.ww-menu .ww-menu__sub::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
}
.ww-menu .ww-menu__sub a {
  display: block;
  padding: 0.5rem 1.25rem;
  font-size: calc(var(--ww-text-size) * 0.9);
  white-space: nowrap;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.ww-menu .ww-menu__sub a:hover {
  color: var(--ww-accent);
  padding-left: 1.5rem;
  opacity: 1;
}
.ww-menu .has-children > a::after {
  content: "▾";
  margin-left: 0.3em;
  font-size: 0.7em;
  opacity: 0.5;
}
.ww-menu .has-children:hover > .ww-menu__sub { display: block; }

/* CTA Nav */
.ww-header__cta-nav .ww-menu { justify-content: flex-end; }
.ww-header__cta-nav .ww-menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.9em 1.25em;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: calc(var(--ww-text-size) * 0.9);
  line-height: 1;
  background: color-mix(in srgb, var(--ww-accent) 85%, transparent);
  color: var(--ww-black);
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease;
}
.ww-header__cta-nav .ww-menu a:hover {
  background: var(--ww-accent);
  transform: translateY(-1px);
  opacity: 1;
}

/* Mobile toggle */
.ww-menu-toggle {
  background: transparent;
  border: 0;
  color: inherit;
  width: 44px;
  height: 44px;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ww-menu-toggle__icon {
  display: inline-block;
  font-size: 28px;
  line-height: 1;
  transform-origin: 50% 50%;
  transition: transform 0.2s ease;
}

.ww-header.is-menu-open .ww-menu-toggle__icon {
  transform: rotate(135deg);
}

.ww-header.is-menu-open {
  background: transparent;
  color: var(--ww-white);
}

/* Open-Menu: Logo weiss, Toggle-Icon weiss */
.ww-header.is-menu-open .ww-header__logo img,
.ww-header.is-menu-open .ww-header__logo a,
.ww-header.is-menu-open .ww-menu-toggle,
.ww-header.is-menu-open .ww-menu-toggle__icon {
  color: var(--ww-white);
}

.ww-header.is-menu-open .ww-header__logo img {
  filter: brightness(0) invert(1);
}

/* Fullscreen panel */
.ww-menu-panel {
  /* Bullet-proof Fullscreen-Layer für iOS Safari + Mobile-Browser:
     - position: fixed an viewport pinnen
     - explizite top/left/right/bottom + height/width Fallback (inset+dvh nicht überall robust)
     - own GPU-Layer via translateZ(0) verhindert Repaint-Glitches bei Scroll
     - eigener Scroll-Container: -webkit-overflow-scrolling für iOS-Momentum */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;        /* Fallback */
  height: 100dvh;       /* Modern: dynamic viewport (iOS URL-Bar-aware) */
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ww-white);
  z-index: 999;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Eigener GPU-Layer, kein Scroll-Repaint-Glitch */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

/* Inhalts-Wrapper: nimmt mindestens volle Resthöhe → kurze Menüs bleiben optisch zentriert,
   lange werden top-aligned + scrollbar. Padding-top hier statt am Panel — sonst
   schiebt's den Scroll-Inhalt rauf. */
.ww-menu-panel > .ww-menu,
.ww-menu-panel > .ww-panel-menu {
  min-height: 100%;
  justify-content: center;
  padding: calc(var(--ww-header-height) + 1.5rem) var(--ww-side-padding) 2rem;
  box-sizing: border-box;
}

.ww-menu-panel .ww-menu,
.ww-menu-panel .ww-panel-menu {
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-family: "Bathorie", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(28px, 7vw, 72px);
  line-height: 1.05;
  text-transform: uppercase;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  text-align: center;
}
.ww-menu-panel .ww-menu li,
.ww-menu-panel .ww-panel-menu li {
  text-align: center;
  width: 100%;
}

.ww-menu-panel .ww-panel-menu a {
  color: var(--ww-white);
  text-decoration: none;
}

.ww-menu-panel .ww-panel__sub {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  background: transparent !important;
  border: 0 !important;
  padding: 0.35rem 0 0;
  min-width: 0;
  list-style: none;
  text-align: center;
}
.ww-menu-panel .ww-panel__sub li {
  text-align: center;
}
.ww-menu-panel .ww-panel__sub a {
  display: block;
  text-align: center;
}

.ww-header.is-menu-open .ww-menu-panel { display: flex; }

@media (max-width: 1023px) {
  .ww-header__inner {
    grid-template-columns: auto 1fr auto auto;
    gap: clamp(0.4rem, 1.2vw, 0.75rem);
  }
  .ww-header__primary-nav { display: none; }
  .ww-menu-toggle { display: inline-flex; }
  /* CTA auf Mobile sichtbar, aber kompakter */
  .ww-header__cta-nav { display: block; }
  .ww-header__cta-nav .ww-menu a {
    /* Mobile: ~10% größer als zuvor (0.78 → 0.86, padding angepasst) */
    padding: 0.78em 1.05em;
    font-size: calc(var(--ww-text-size) * 0.86);
  }
}

/* Sehr schmale Screens: CTA leicht schrumpfen, aber relativ größer als zuvor */
@media (max-width: 480px) {
  .ww-header__cta-nav .ww-menu a {
    padding: 0.66em 0.88em;
    font-size: calc(var(--ww-text-size) * 0.79);
  }
}

@media (min-width: 1024px) {
  .ww-menu-panel { display: none !important; }
  .ww-menu-toggle { display: none !important; }
}

/* ─── Hero Main ──────────────────────────────────────────── */
.ww-hero-main {
  position: relative;
  min-height: 100vh;
  color: var(--ww-white);
  overflow: hidden;
}

.ww-hero-main__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.ww-hero-main__overlay {
  position: absolute;
  inset: 0;
  /* Verlauf: links 50% dunkler, rechts 20% — Text links kontrastreich, rechts Bild sichtbar */
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.60) 0%,
    rgba(0, 0, 0, 0.20) 100%
  );
}

.ww-hero-main__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-inline: var(--ww-side-padding);
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: stretch;
  padding-top: calc(var(--ww-header-height) + clamp(0rem, 0.5vw, 0.4rem));
  padding-bottom: clamp(1.25rem, 3vw, 3rem);
}

.ww-hero-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--ww-hero-mid-gap) * 2);
}

.ww-hero-col-left {
  display: flex;
  justify-content: flex-end;
  text-align: right;
}

.ww-hero-col-right {
  display: flex;
  justify-content: flex-start;
  text-align: left;
}

.ww-hero-main__headline-row .ww-hero-col-left,
.ww-hero-main__headline-row .ww-hero-col-right {
  align-items: flex-end;
}

.ww-hero-main__headline-row {
  align-self: start;
}

.ww-hero-main__headline-row h1 {
  transform: translateY(var(--ww-hero-h1-shift));
}

.ww-hero-main__cta-row .ww-hero-col-right {
  align-items: center;
}

.ww-hero-main__cta-row .ww-hero-subtext {
  max-width: 54ch;
  opacity: 0.95;
}

.ww-hero-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ww-hero-main a,
.ww-hero-main p,
.ww-hero-main h1 {
  color: var(--ww-white);
}

/* Neon-CTA im Hero: Text bleibt schwarz (override des generischen a-Selektors) */
.ww-hero-main .ww-btn--neon {
  color: var(--ww-black);
}

@media (max-width: 768px) {
  .ww-hero-main__inner {
    /* +15px extra Abstand zur Nav damit "CUTS COLORS STYLE" nicht klebt */
    padding-top: calc(var(--ww-header-height) + 0.5rem + 15px);
  }
  .ww-hero-grid {
    grid-template-columns: 1fr;
    row-gap: 0.9rem;
  }
  .ww-hero-main__bg {
    /* Mobile: Bild-Fokus nach rechts verschieben */
    object-position: 68% center;
  }
  .ww-hero-col-left,
  .ww-hero-col-right {
    justify-content: flex-start;
    text-align: left;
  }
  .ww-hero-main__headline-row .ww-hero-col-left {
    order: -1;
  }
  .ww-hero-main__headline-row .ww-hero-col-right {
    order: 1;
    margin-top: 1.5rem;
  }
}

/* ─── Feature Main ───────────────────────────────────────── */
.ww-feature-main {
  position: relative;
  min-height: 100vh;
  background: var(--ww-bg-feature, var(--ww-accent));
  color: var(--ww-black);
  text-align: center;
  padding-inline: var(--ww-side-padding);
}

.ww-feature-main__reviews {
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  font-size: calc(var(--ww-text-size) * 0.8);
  opacity: 0.9;
  text-align: center;
}

.ww-feature-main__content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding-block: clamp(3rem, 5vw, 5rem);
}

.ww-divider img,
.ww-divider svg {
  width: clamp(20px, 2.2vw, 40px);
  height: auto;
}

.ww-feature-main__content p {
  max-width: var(--ww-content-max);
  margin-left: auto;
  margin-right: auto;
}

.ww-feature-main__image img {
  width: clamp(180px, 14vw, 320px);
  height: auto;
}

/* Dark variant (for service pages) */
.ww-feature-main--dark {
  background: var(--ww-black);
  color: var(--ww-white);
  min-height: auto;
  padding-block: clamp(4rem, 8vw, 7rem);
}
.ww-feature-main--dark .ww-feature-main__content {
  min-height: auto;
  padding-top: 0;
}
.ww-feature-main--dark .ww-divider svg {
  fill: var(--ww-white);
}

/* Light variant (light grey bg, black text) */
.ww-feature-main--light {
  background: #f5f5f5;
  color: var(--ww-black);
  min-height: auto;
  padding-block: clamp(4rem, 8vw, 7rem);
}
.ww-feature-main--light .ww-feature-main__content {
  min-height: auto;
  padding-top: 0;
}
.ww-feature-main--light .ww-divider svg {
  fill: var(--ww-black);
}

/* ─── Google Rating (l7-google-profile-sync) ─────────────── */
.l7-rating-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Geist Mono", ui-monospace, monospace;
}

.l7-stars-wrap {
  position: relative;
  display: inline-block;
  font-size: inherit;
}

.l7-stars-bg,
.l7-stars-fg {
  white-space: nowrap;
}

.l7-stars-bg {
  opacity: 0.3;
}

.l7-stars-fg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.l7-rating-text {
  color: inherit;
}

.l7-rating-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── Lookbook Teaser ────────────────────────────────────── */
.ww-lookbook-teaser {
  background: var(--ww-black);
  color: var(--ww-white);
  padding-inline: var(--ww-side-padding);
  padding-block: clamp(4rem, 6vw, 6rem);
}

/* min-height scales with content, no fixed vh */

.ww-lookbook-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.ww-lookbook-intro h2,
.ww-lookbook-intro p {
  margin: 0;
}

.ww-lookbook-intro p {
  max-width: var(--ww-content-max);
  margin-left: auto;
  margin-right: auto;
}

.ww-lookbook-pair {
  max-width: var(--ww-lookbook-max);
  margin: 0 auto clamp(2.25rem, 5vw, 4rem);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.ww-lookbook-pair img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.ww-lookbook-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  padding: 0.75rem 1rem;
  background: rgba(0,0,0,0.35);
  font-size: calc(var(--ww-text-size) * 0.85);
}

.ww-lookbook-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

@media (max-width: 768px) {
  .ww-lookbook-teaser { min-height: auto; }
  .ww-lookbook-pair {
    grid-template-columns: 1fr;
  }
  .ww-lookbook-caption,
  .ww-lookbook-teaser--light .ww-lookbook-caption {
    position: static;
    background: transparent;
    padding: 0.75rem 0 0;
    color: inherit;
  }
}

/* Light variant */
.ww-lookbook-teaser--light {
  background: #f5f5f5;
  color: var(--ww-black);
}
.ww-lookbook-teaser--light .ww-lookbook-intro {
  color: var(--ww-black);
}
/* Light variant behält schwarz-transparenten Caption-Overlay (konsistent mit Dark) */
.ww-lookbook-teaser--light .ww-lookbook-caption {
  color: var(--ww-white);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.35);
  padding: 0.75rem 1rem;
}
.ww-lookbook-teaser--light .ww-divider svg {
  fill: var(--ww-black);
}
.ww-lookbook-teaser--light .ww-btn--outline {
  border-color: var(--ww-black);
  color: var(--ww-black);
}
.ww-lookbook-teaser--light .ww-btn--outline:hover {
  background: var(--ww-black);
  color: var(--ww-white);
}

/* ─── Show Gallery (Pinterest Masonry + Lightbox) ────────── */
.ww-show-gallery {
  background: #f5f5f5;
  color: var(--ww-black);
  padding-inline: var(--ww-side-padding);
  padding-block: clamp(4rem, 8vw, 7rem);
}
.ww-show-gallery--dark {
  background: var(--ww-black);
  color: var(--ww-white);
}

.ww-show-gallery__wrap {
  max-width: var(--ww-content-max);
  margin: 0 auto;
}

.ww-show-gallery__header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.ww-show-gallery__header h2 {
  margin: 0 0 1rem;
}
.ww-show-gallery__header p {
  font-size: var(--ww-text-size);
  opacity: 0.6;
  max-width: 600px;
  margin: 0.75rem auto 0;
  line-height: 1.6;
}
.ww-show-gallery--dark .ww-divider svg { fill: var(--ww-white); }

/* Pinterest Masonry via CSS columns */
.ww-show-gallery__masonry {
  columns: 4;
  column-gap: clamp(6px, 1vw, 12px);
}

.ww-show-gallery__item {
  display: block;
  break-inside: avoid;
  margin-bottom: clamp(6px, 1vw, 12px);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  text-decoration: none;
}

.ww-show-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

.ww-show-gallery__item:hover img {
  transform: scale(1.05);
}

.ww-show-gallery__zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--ww-white);
  background: rgba(0,0,0,0);
  transition: background 0.3s ease;
  pointer-events: none;
}
.ww-show-gallery__item:hover .ww-show-gallery__zoom {
  background: rgba(0,0,0,0.3);
}

/* Placeholder */
.ww-show-gallery__item--empty {
  aspect-ratio: 3 / 4;
  background: rgba(0,0,0,0.05);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  opacity: 0.2;
}
.ww-show-gallery__item--empty:nth-child(2n) { aspect-ratio: 4 / 5; }
.ww-show-gallery__item--empty:nth-child(3n) { aspect-ratio: 1 / 1; }
.ww-show-gallery--dark .ww-show-gallery__item--empty {
  background: rgba(255,255,255,0.05);
}

@media (max-width: 1024px) {
  .ww-show-gallery__masonry { columns: 3; }
}
@media (max-width: 768px) {
  .ww-show-gallery__masonry { columns: 2; }
}

/* ─── Gallery Grid (4-col + Lightbox) ────────────────────── */
.ww-gallery-grid {
  background: #f5f5f5;
  color: var(--ww-black);
  padding-inline: var(--ww-side-padding);
  padding-block: clamp(4rem, 8vw, 7rem);
}
.ww-gallery-grid--dark {
  background: var(--ww-black);
  color: var(--ww-white);
}

.ww-gallery-grid__wrap {
  max-width: var(--ww-content-max);
  margin: 0 auto;
}

.ww-gallery-grid__header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.ww-gallery-grid__header h2 {
  margin: 0 0 1rem;
}
.ww-gallery-grid__header p {
  font-size: var(--ww-text-size);
  opacity: 0.6;
  max-width: 500px;
  margin: 0.75rem auto 0;
}
.ww-gallery-grid--dark .ww-divider svg { fill: var(--ww-white); }

.ww-gallery-grid__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 1vw, 12px);
}

.ww-gallery-grid__item {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  cursor: pointer;
  display: block;
}

.ww-gallery-grid__item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.ww-gallery-grid__item:hover img {
  transform: scale(1.05);
}

.ww-gallery-grid__zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--ww-white);
  background: rgba(0,0,0,0);
  transition: background 0.3s ease;
  pointer-events: none;
}
.ww-gallery-grid__item:hover .ww-gallery-grid__zoom {
  background: rgba(0,0,0,0.3);
}

/* Placeholder empty items */
.ww-gallery-grid__item--empty {
  aspect-ratio: 3 / 4;
  background: rgba(0,0,0,0.05);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  opacity: 0.3;
}
.ww-gallery-grid--dark .ww-gallery-grid__item--empty {
  background: rgba(255,255,255,0.05);
}

/* Lightbox */
.ww-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ww-lightbox[hidden] { display: none; }

.ww-lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 2px;
}

.ww-lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: var(--ww-white);
  font-size: 2.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.5rem;
  z-index: 10;
}

.ww-lightbox__prev,
.ww-lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--ww-white);
  font-size: 3rem;
  cursor: pointer;
  padding: 1rem;
  z-index: 10;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.ww-lightbox__prev:hover,
.ww-lightbox__next:hover { opacity: 1; }
.ww-lightbox__prev { left: 1rem; }
.ww-lightbox__next { right: 1rem; }

@media (max-width: 768px) {
  .ww-gallery-grid__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── Lookbook Service (2x2 grid, white bg) ──────────────── */











.ww-btn--dark {
  border-color: var(--ww-black);
  color: var(--ww-black);
}
.ww-btn--dark:hover {
  background: var(--ww-black);
  color: var(--ww-white);
}

@media (max-width: 768px) {
}

/* ─── Service Intro (H2 left centered, P right offset) ─── */






/* Dark variant */

@media (max-width: 768px) {
}

/* ─── Service Methods (H2 top, 2x2 card grid) ─────────── */
.ww-service-methods {
  padding-inline: var(--ww-side-padding);
  padding-block: clamp(4rem, 6vw, 7rem);
}

.ww-service-methods--dark  { background: var(--ww-black); color: var(--ww-white); }
.ww-service-methods--light { background: var(--ww-white); color: var(--ww-black); }

.ww-service-methods__wrap {
  max-width: var(--ww-content-max);
  margin-inline: auto;
}

.ww-service-methods__headline {
  text-align: left;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.ww-service-methods__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.ww-method-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: clamp(0.8rem, 1.5vw, 1.2rem);
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 4px;
  align-items: start;
}

.ww-service-methods--light .ww-method-card {
  background: #f5f5f5;
}

.ww-service-methods--dark .ww-method-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.ww-method-card__img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 3px;
  overflow: hidden;
}

.ww-method-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ww-method-card__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(146,239,110,0.08);
}

.ww-method-card__img--placeholder span {
  font-family: var(--ww-font-display);
  font-size: clamp(2rem, 3vw, 2.5rem);
  opacity: 0.2;
}

.ww-method-card__number {
  display: block;
  font-family: var(--ww-font-body);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  opacity: 0.35;
  margin-bottom: 0.4rem;
}

.ww-method-card__title {
  font-family: var(--ww-font-body);
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.ww-method-card__text {
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  line-height: 1.55;
  opacity: 0.65;
}

@media (max-width: 768px) {
  .ww-service-methods__grid {
    grid-template-columns: 1fr;
  }
  .ww-method-card {
    grid-template-columns: 90px 1fr;
  }
}



/* ─── Process Steps (Ablauf) ────────────────────────────── */
.ww-process {
  padding-inline: var(--ww-side-padding);
  padding-block: clamp(4rem, 6vw, 7rem);
}

.ww-process--light { background: #f5f5f5; color: var(--ww-black); }
.ww-process--dark  { background: var(--ww-black); color: var(--ww-white); }

.ww-process__inner {
  max-width: var(--ww-content-max);
  margin-inline: auto;
}

.ww-process__headline {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.ww-process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.ww-process__step {
  position: relative;
  padding-top: 1rem;
  text-align: center;
}

.ww-process__num {
  display: block;
  font-family: var(--ww-font-display);
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: 1;
  color: var(--ww-accent);
  margin-bottom: 0.75rem;
}

.ww-process--light .ww-process__num {
  color: rgba(0,0,0,0.2);
}

.ww-process__step h3 {
  font-family: var(--ww-font-mono);
  font-size: calc(var(--ww-text-size) * 1.05);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.ww-process__step p {
  font-size: calc(var(--ww-text-size) * 0.92);
  line-height: 1.6;
  opacity: 0.8;
}

.ww-process__duration {
  margin-top: clamp(2rem, 3vw, 3rem);
  font-family: var(--ww-font-mono);
  font-size: var(--ww-text-size);
  text-align: center;
  letter-spacing: 0.03em;
  opacity: 0.6;
}

@media (max-width: 768px) {
  .ww-process__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .ww-process__grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Core Services ──────────────────────────────────────── */
.ww-core-services {
  background: #f5f5f5;
  color: var(--ww-black);
  padding-inline: var(--ww-side-padding);
  padding-block: clamp(4rem, 8vw, 7rem);
}

.ww-core-services__inner {
  width: 100%;
  max-width: var(--ww-content-max);
  margin-left: auto;
  margin-right: auto;
}

.ww-core-services__list {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(0,0,0,0.25);
}

.ww-core-service-item {
  position: relative;
  padding-block: clamp(1rem, 2vw, 1.75rem);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.ww-core-service-item h3 {
  position: relative;
  z-index: 4;
  transition: color 0.2s ease;
}

.ww-core-service-item h3 a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

.ww-core-service-item:hover,
.ww-core-service-item:focus-within {
  background-color: rgba(0,0,0,0.03);
}

.ww-core-service-item:hover h3,
.ww-core-service-item:focus-within h3 {
  color: var(--ww-hover-text);
}

.ww-core-service-hover-image {
  z-index: 2;
  position: absolute;
  top: 50%;
  right: 0;
  width: 250px;
  height: 250px;
  transform: translateY(-50%);
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.ww-core-service-item:hover .ww-core-service-hover-image,
.ww-core-service-item:focus-within .ww-core-service-hover-image {
  opacity: 1;
}

@media (max-width: 1023px) {
  .ww-core-service-hover-image { display: none !important; }
}

.ww-core-services__outro {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--ww-hero-mid-gap) * 2);
}

.ww-core-services__outro-inner {
  grid-column: 2;
  justify-self: start;
  max-width: 560px;
}

@media (max-width: 1023px) {
  .ww-core-services__outro {
    grid-template-columns: 1fr;
  }
  .ww-core-services__outro-inner {
    grid-column: 1;
  }
}

/* ─── Services Centered (Offbeat.kr 1:1 — Typo-Scroll) ────── */
.ww-services-centered {
  --ww-media-width: clamp(260px, 28vw, 440px);
  --ww-media-aspect: 3 / 4;
  --ww-po: 1.5em; /* clip-path inset */

  background: #dfe0db;
  color: var(--ww-black);
  padding-inline: var(--ww-side-padding);
  /* Oben deutlich weniger als unten — Header rückt näher an die vorherige Section */
  padding-top: clamp(2.5rem, 5vw, 5rem);
  padding-bottom: clamp(4rem, 7vw, 7rem);
  position: relative;
  overflow: hidden;
}

.ww-services-centered--dark {
  background: var(--ww-black);
  color: var(--ww-white);
}

/* White-Variante: matcht Show-Gallery (#f5f5f5) */
.ww-services-centered--white {
  background: #f5f5f5;
  color: var(--ww-black);
}

.ww-services-centered__inner {
  max-width: var(--ww-content-max);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

/* Header: 1:1 wie Lookbook — H2 (default Theme-Style) + X-Divider + P */
.ww-services-centered__header {
  text-align: center;
  margin-bottom: clamp(0.5rem, 1vw, 1rem);
}

.ww-services-centered__headline {
  margin: 0 0 1rem;
}

.ww-services-centered__header .ww-divider {
  display: flex;
  justify-content: center;
  margin: 1rem auto;
}

.ww-services-centered__header .ww-divider svg {
  fill: var(--ww-black);
}
.ww-services-centered--dark .ww-services-centered__header .ww-divider svg {
  fill: var(--ww-white);
}

.ww-services-centered__intro {
  max-width: var(--ww-content-max);
  margin-left: auto;
  margin-right: auto;
}

/* Liste: vertikal gestapelt, normale Scroll-Flow */
.ww-services-centered__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.3rem, 0.8vw, 0.75rem);
  /* Oben knapp, unten moderat Puffer damit letztes Item noch durchs Center scrollen kann.
     Weniger als vorher — der Outro-CTA rückt näher an die Liste. */
  padding-top: clamp(1.5rem, 3vh, 4rem);
  padding-bottom: clamp(4rem, 12vh, 16rem);
  transform: translateZ(0);
}

.ww-services-centered__item {
  position: relative;
  z-index: 0;
  transform: translateZ(0);
  will-change: transform, opacity;
}

.ww-services-centered__item.is-active {
  z-index: 10;
}

/* Link: full-width, flex center → Hover-Zone über gesamte Row */
.ww-services-centered__link {
  display: flex;
  width: 100%;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  padding: 0.05em 0;
  position: relative;
}

/* Titel: default, unter dem Bild (z-index 0) */
.ww-services-centered__title {
  font-family: var(--ww-font-display);
  font-size: clamp(3rem, 10vw, 9.5rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-align: center;
  color: var(--ww-black);
  position: relative;
  z-index: 0;
  transition: color 0.3s ease;
}

.ww-services-centered--dark .ww-services-centered__title {
  color: var(--ww-white);
}

/* Active: Titel ÜBER Bild, weiß + starker Drop-Shadow = IMMER lesbar
   (unabhängig von Bild-Luminanz, kein mix-blend-mode-Problem mehr bei Midtones) */
.ww-services-centered__item.is-active .ww-services-centered__title {
  z-index: 2;
  color: rgba(255, 255, 255, 0.65); /* 35% transparent — Bild scheint stärker durch */
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65);
}

/* Media: pro Item, position:fixed am Viewport-Center.
   Pure Crossfade — kein clip-path, nur opacity. Snappy. */
.ww-services-centered__media {
  position: fixed;
  /* +30px nach unten → mehr Abstand zur Section-Headline */
  top: calc(50% + 30px);
  left: 50%;
  width: var(--ww-media-width);
  aspect-ratio: var(--ww-media-aspect);
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  /* Kein Transition — Instant-Swap */
}

.ww-services-centered__item.is-active .ww-services-centered__media {
  opacity: 1;
}

.ww-services-centered__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Outro */
.ww-services-centered__outro {
  text-align: center;
  margin-top: clamp(1rem, 2vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  position: relative;
  z-index: 20;
}

.ww-services-centered__outro-text {
  font-family: var(--ww-font-body);
  font-size: var(--ww-text-size);
  line-height: 1.65;
  margin: 0;
  max-width: 560px;
  opacity: 0.8;
}

.ww-services-centered__outro-btn {
  align-self: center;
}

/* Mobile: gleiche Scroll-Trigger-Mechanik wie Desktop — fixed Media-Panel am Viewport-Center,
   nur kleiner skaliert + mehr Padding zwischen Items damit Aktivierung beim Scrollen sauber triggert. */
@media (max-width: 768px) {
  .ww-services-centered {
    --ww-media-width: 65vw;
  }
  .ww-services-centered__list {
    gap: clamp(0.75rem, 2vw, 1.5rem);
    /* viel Luft oben/unten, damit jedes Item durch die Viewport-Mitte scrollen kann */
    padding-block: clamp(8rem, 25vh, 40vh);
  }
  .ww-services-centered__title {
    font-size: clamp(2.25rem, 12vw, 4.75rem);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ww-services-centered__media {
    transition: opacity 0.3s ease;
  }
  .ww-services-centered__title {
    transition: none;
  }
}


/* ─── Hero Service ───────────────────────────────────────── */
.ww-hero-service {
  position: relative;
  min-height: 100vh;
  color: var(--ww-white);
  overflow: hidden;
}

.ww-hero-service__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.ww-hero-service__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.20);
}

.ww-hero-service__inner {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding-inline: var(--ww-side-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
}

.ww-hero-service__inner a,
.ww-hero-service__inner p,
.ww-hero-service__inner h1 {
  color: var(--ww-white);
}

/* H1 ist SEO-clean (z. B. „Keratin Glättung in Linz") — der visuelle „/"-Prefix
   und der Punkt am Ende kommen via CSS, damit Google das saubere Keyword sieht. */
.ww-hero-service__inner h1::before {
  content: "/ ";
}
.ww-hero-service__inner h1::after {
  content: ".";
}

@media (max-width: 768px) {
  .ww-hero-service__inner {
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

/* ─── Testimonials (stacked quotes, author right) ────────── */
.ww-testimonials {
  background: var(--ww-black);
  color: var(--ww-white);
  padding-inline: var(--ww-side-padding);
  padding-block: clamp(4rem, 8vw, 7rem);
}

.ww-testimonials__header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.ww-testimonials__header h2 {
  margin: 0 0 1rem;
}
.ww-testimonials__header .ww-divider svg { fill: var(--ww-white); }
.ww-testimonials__header p {
  font-size: var(--ww-text-size);
  margin: 0.75rem auto 0;
}

.ww-testimonials__list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.ww-testimonials__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ww-testimonials__item:first-child {
  border-top: 1px solid rgba(255,255,255,0.08);
}

.ww-testimonials__quote-col {
  display: flex;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  align-items: flex-start;
}


.ww-testimonials__text {
  font-family: var(--ww-font-body);
  font-size: var(--ww-text-size);
  font-weight: 400;
  font-style: italic;
  line-height: 1.7;
  margin: 0;
}

.ww-testimonials__author-col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: right;
  min-width: 120px;
  padding-top: 0.2rem;
}

.ww-testimonials__stars {
  color: var(--ww-accent);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}

.ww-testimonials__author {
  font-family: var(--ww-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
}


@media (max-width: 768px) {
  .ww-testimonials__item {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .ww-testimonials__author-col {
    text-align: left;
    flex-direction: row;
    gap: 0.5rem;
  }
}

/* ─── About ──────────────────────────────────────────────── */




@media (max-width: 768px) {
}

/* ─── CTA Section ────────────────────────────────────────── */
.ww-cta-section {
  background: var(--ww-accent);
  color: var(--ww-black);
  padding-inline: var(--ww-side-padding);
  padding-block: clamp(4rem, 6vw, 6rem);
  text-align: center;
}

.ww-cta-section__inner {
  max-width: var(--ww-content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* ─── FAQ (compact label, full-width accordion) ──────────── */
/* ─── FAQ ────────────────────────────────────────────────── */
.ww-faq {
  background: #f5f5f5;
  padding-inline: var(--ww-side-padding);
  padding-block: clamp(4rem, 8vw, 7rem);
}

.ww-faq__wrap {
  max-width: var(--ww-content-max);
  margin: 0 auto;
}

.ww-faq__header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.ww-faq__header h2 {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

.ww-faq__sub {
  font-family: var(--ww-font-body);
  font-size: var(--ww-text-size);
  line-height: 1.6;
  color: rgba(0,0,0,0.5);
  max-width: 500px;
  margin: 0 auto;
}

.ww-faq__list {
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ww-faq__item {
  background: var(--ww-white);
  border-radius: 10px;
  border: none;
  overflow: hidden;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.ww-faq__item:hover {
  background: var(--ww-black);
  color: var(--ww-white);
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.ww-faq__item:hover .ww-faq__question {
  color: var(--ww-white);
}

.ww-faq__item:hover .ww-faq__chevron::before {
  border-color: var(--ww-white);
}

.ww-faq__item:hover .ww-faq__answer {
  color: rgba(255,255,255,0.7);
}

.ww-faq__item summary {
  padding: clamp(1rem, 2vw, 1.25rem) clamp(1.25rem, 2vw, 1.5rem);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ww-faq__item summary::-webkit-details-marker { display: none; }

.ww-faq__question {
  font-family: var(--ww-font-body);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  letter-spacing: 0.01em;
  color: var(--ww-black);
}

.ww-faq__chevron {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.ww-faq__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(0,0,0,0.35);
  border-bottom: 2px solid rgba(0,0,0,0.35);
  transform: translate(-50%, -65%) rotate(45deg);
  transition: transform 0.3s ease;
}

.ww-faq__item[open] .ww-faq__chevron::before {
  transform: translate(-50%, -35%) rotate(-135deg);
}

.ww-faq__item[open] .ww-faq__question {
  color: var(--ww-black);
}
.ww-faq__item[open]:hover .ww-faq__question {
  color: var(--ww-white);
}

.ww-faq__answer {
  padding: 0 clamp(1.25rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.25rem);
  color: rgba(0,0,0,0.6);
  font-size: var(--ww-text-size);
  line-height: 1.7;
}

/* Dark FAQ variant */
.ww-faq--dark .ww-faq__item {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}
.ww-faq--dark .ww-faq__question {
  color: var(--ww-white);
}
.ww-faq--dark .ww-faq__chevron::before {
  border-color: var(--ww-white);
}
.ww-faq--dark .ww-faq__answer {
  color: rgba(255,255,255,0.7);
}
.ww-faq--dark .ww-faq__item:hover {
  background: rgba(255,255,255,0.1);
}

@media (max-width: 768px) {
}

/* ─── Impressum / Rechtstext ─────────────────────────────── */
.ww-legal {
  padding-inline: var(--ww-side-padding);
  padding-block: clamp(3rem, 5vw, 5rem);
}

.ww-legal__inner {
  max-width: 720px;
  margin: 0 auto;
}

.ww-legal__inner h2 {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: calc(var(--ww-text-size) * 1.05);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.ww-legal__inner h2:first-child {
  margin-top: 0;
}

.ww-legal__inner h3 {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: var(--ww-text-size);
  font-weight: 600;
  line-height: 1.4;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.ww-legal__inner p {
  line-height: 1.6;
  margin-bottom: 1rem;
}

.ww-legal__inner a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ─── Footer ─────────────────────────────────────────────── */
.ww-footer {
  background: var(--ww-black);
  color: var(--ww-white);
  padding-inline: var(--ww-side-padding);
  padding-block: clamp(3rem, 5vw, 4rem);
}

/* Kein max-width-Cap → erste Spalte bündig mit Logo im Header
   (beide haben padding-inline: var(--ww-side-padding) vom Viewport-Rand) */
.ww-footer__inner {
  width: 100%;
}

.ww-footer a {
  color: var(--ww-white);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ww-footer a:hover { color: var(--ww-accent); }

.ww-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}

.ww-footer__col h3 {
  font-family: var(--ww-font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.ww-footer__col p,
.ww-footer__col ul li {
  margin: 0 0 0.4rem;
  line-height: 1.5;
  font-size: calc(var(--ww-text-size) * 0.9);
  opacity: 0.6;
}

.ww-footer__col a {
  opacity: 1;
}

.ww-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ww-footer__tag {
  margin-bottom: 1.5rem !important;
}



.ww-footer__socials {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  list-style: none;
  padding: 0;
}
.ww-footer__socials li { margin: 0 !important; }
.ww-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ww-footer__socials a:hover {
  border-color: var(--ww-accent);
  color: var(--ww-accent) !important;
}
.ww-footer__socials svg {
  width: 18px;
  height: 18px;
}

.ww-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2rem, 3vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}

.ww-footer__copy {
  margin: 0;
  font-size: calc(var(--ww-text-size) * 0.85);
  opacity: 0.55;
}

.ww-footer__made-by {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: calc(var(--ww-text-size) * 0.85);
  color: var(--ww-white) !important;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.ww-footer__made-by:hover {
  opacity: 1;
  color: var(--ww-accent) !important;
}

.ww-footer__made-by-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.ww-footer__made-by-logo {
  display: inline-flex;
  width: 24px;
  height: 12px;
  color: currentColor;
}
.ww-footer__made-by-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ww-footer__made-by-label {
  font-family: var(--ww-font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  .ww-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .ww-footer__grid {
    grid-template-columns: 1fr;
  }
  .ww-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Mobile: H3 auf ~130% → bessere Skalierung im 1-Spalten-Layout */
  .ww-footer__col h3 {
    font-size: clamp(2.6rem, 8vw, 3.9rem);
  }
}

/* ─── Hero Review Bubbles (Manschu-Style, rotating) ─────── */
.ww-hero-review-cards {
  position: absolute;
  z-index: 3;
  left: 15%;
  bottom: clamp(120px, 22vh, 240px);
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  align-items: flex-start;
  pointer-events: none;
}

.ww-hero-review-card {
  max-width: 160px;
  font-size: 10px;
  padding: 0 14px;
  max-height: 0;
  overflow: hidden;
  border-radius: 10px 10px 2px 10px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  line-height: 1.4;
  color: rgba(255,255,255,0.65);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: auto;
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              max-height 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              padding 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Card 1 — small */
.ww-hero-review-card:nth-child(1) {
  max-width: 160px;
  font-size: 10px;
}

/* Card 2 — medium, offset */
.ww-hero-review-card:nth-child(2) {
  max-width: 200px;
  font-size: 11px;
  margin-left: 30px;
}

/* Card 3 — large, more offset */
.ww-hero-review-card:nth-child(3) {
  max-width: 240px;
  font-size: 12px;
  margin-left: 10px;
}

.ww-hero-review-card__name {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  margin-bottom: 2px;
}

.ww-hero-review-card__text {
  font-weight: 500;
}

/* Typing indicator dots */
.ww-hero-review-card__typing {
  display: flex;
  gap: 3px;
  padding: 2px 0;
}
.ww-hero-review-card__typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  animation: wwTypingDot 1.2s infinite;
}
.ww-hero-review-card__typing span:nth-child(2) { animation-delay: 0.2s; }
.ww-hero-review-card__typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes wwTypingDot {
  0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
  30% { opacity: 1; transform: scale(1); }
}

.ww-hero-review-card.is-in {
  opacity: 1;
  transform: translateY(0);
  max-height: 80px;
  padding: 8px 14px;
}

.ww-hero-review-card.is-out {
  opacity: 0;
  max-height: 0;
  padding: 0 14px;
  transform: translateY(-4px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
              max-height 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
              padding 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (max-width: 768px) {
  .ww-hero-review-cards {
    left: 16px;
    bottom: 200px;
  }
  .ww-hero-review-card:nth-child(1) { max-width: 130px; font-size: 9px; }
  .ww-hero-review-card:nth-child(2) { max-width: 160px; font-size: 10px; margin-left: 20px; }
  .ww-hero-review-card:nth-child(3) { max-width: 190px; font-size: 10px; margin-left: 5px; }
}

/* ─── Stats Bar (Ticker / Marquee) ──────────────────────── */
.ww-stats-bar {
  background: var(--ww-black);
  color: var(--ww-white);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  position: relative;
  padding-block: clamp(0.9rem, 1.5vw, 1.25rem);
}

.ww-stats-bar__track {
  display: flex;
  gap: clamp(2rem, 4vw, 4rem);
  width: max-content;
  animation: wwTickerScroll 60s linear infinite;
}

.ww-stats-bar__track:hover {
  animation-play-state: paused;
}

.ww-stats-bar__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.ww-stats-bar__stars {
  color: var(--ww-accent);
  font-size: 1.1em;
  letter-spacing: 0.06em;
}

.ww-stats-bar__value {
  font-family: var(--ww-font-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1;
  color: var(--ww-accent);
}

.ww-stats-bar__label {
  font-size: calc(var(--ww-text-size) * 0.85);
  letter-spacing: 0.03em;
  opacity: 0.7;
}

.ww-stats-bar__divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
}

.ww-stats-bar__review-text {
  font-size: calc(var(--ww-text-size) * 0.85);
  font-style: italic;
  opacity: 0.65;
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ww-stats-bar__review-author {
  font-size: calc(var(--ww-text-size) * 0.75);
  opacity: 0.45;
}

@keyframes wwTickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── Studio Feature (H2 + Text + 2 staggered images) ──── */

.ww-studio-feature--dark  { background: var(--ww-black); color: var(--ww-white); }
.ww-studio-feature--light { background: var(--ww-white); color: var(--ww-black); }









.ww-studio-feature__img1 img,

@media (max-width: 768px) {
  .ww-studio-feature__left,
  .ww-studio-feature__right,
  .ww-studio-feature__img1,
}

/* ─── Gallery Row (centered H2, horizontal scroll) ─────── */

.ww-gallery-row--light { background: var(--ww-white); color: var(--ww-black); }
.ww-gallery-row--dark  { background: var(--ww-black); color: var(--ww-white); }













/* ─── Pain Points ───────────────────────────────────────── */
/* ─── Pain Points (editorial wild style) ─────────────────── */
.ww-pain-points {
  background: var(--ww-black);
  color: var(--ww-white);
  padding: clamp(5rem, 10vw, 9rem) var(--ww-side-padding);
  overflow: hidden;
}

.ww-pain-points__inner {
  max-width: var(--ww-content-max);
  margin-inline: auto;
}

.ww-pain-points__headline {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.ww-pain-points__headline h2 {
  margin-bottom: 1rem;
}

.ww-pain-points__headline .ww-divider svg {
  fill: var(--ww-white);
}

.ww-pain-points__headline p {
  font-size: var(--ww-text-size);
  opacity: 0.5;
  max-width: 500px;
  margin: 0.75rem auto 0;
}

.ww-pain-points__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 700px;
  margin-inline: auto;
}

.ww-pain-point {
  display: grid;
  grid-template-columns: clamp(60px, 8vw, 100px) 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  padding: clamp(2rem, 4vw, 3.5rem) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ww-pain-point:last-child {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ww-pain-point.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ww-pain-point:nth-child(2) { transition-delay: 0.15s; }
.ww-pain-point:nth-child(3) { transition-delay: 0.3s; }

.ww-pain-point:hover .ww-pain-point__num {
  opacity: 1;
  color: var(--ww-accent);
  transition: opacity 0.3s ease;
}

.ww-pain-point__num {
  font-family: var(--ww-font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 0.85;
  color: var(--ww-accent);
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.ww-pain-point__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ww-pain-point__title {
  font-family: var(--ww-font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.ww-pain-point__line {
  width: 40px;
  height: 2px;
  background: var(--ww-accent);
  opacity: 0.5;
  transition: width 0.4s ease, opacity 0.3s ease;
}

.ww-pain-point:hover .ww-pain-point__line {
  width: 80px;
  opacity: 1;
}

.ww-pain-point__text {
  font-size: var(--ww-text-size);
  opacity: 0.6;
  line-height: 1.6;
  max-width: 550px;
}

.ww-pain-points__cta {
  text-align: center;
  margin-top: clamp(3rem, 5vw, 4rem);
}

@media (max-width: 768px) {
  .ww-pain-point {
    grid-template-columns: 50px 1fr;
  }
}

/* ─── Comparison Table ──────────────────────────────────── */

.ww-comparison--dark { background: var(--ww-black); color: var(--ww-white); }
.ww-comparison--light { background: var(--ww-white); color: var(--ww-black); }











@media (max-width: 600px) {
  .ww-comparison__table thead th,
}

/* ─── Screen Reader ──────────────────────────────────────── */
/* ─── Image + Text Section ──────────────────────────────── */
.ww-image-text--light { background: var(--ww-white, #fff); color: var(--ww-black, #000); }
.ww-image-text--dark  { background: var(--ww-black, #000); color: var(--ww-white, #fff); }


/* H2 — Split Letter Reveal */

/* Grid: Bild + Text */

/* Image */

/* Text */
.ww-image-text--light .ww-image-text__cta { color: var(--ww-black); }
.ww-image-text--dark .ww-image-text__cta { color: var(--ww-accent, #92EF6E); }
.ww-image-text__cta:hover { opacity: 0.6; }

/* Scroll Fade Animations */

/* Mobile */
@media (max-width: 768px) {
}

.screen-reader-text {
  border: 0;
  clip: rect(1px,1px,1px,1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ─── Related Services (3 Links) ─────────────────────────── */
.ww-related {
  background: var(--ww-black);
  color: var(--ww-white);
  padding-inline: var(--ww-side-padding);
  padding-block: clamp(4rem, 8vw, 7rem);
  text-align: center;
}
.ww-related--light {
  background: var(--ww-white);
  color: var(--ww-black);
}

/* Kein max-width-Cap → Boxen bündig mit Logo im Header & erster Footer-Spalte
   (padding-inline: var(--ww-side-padding) auf .ww-related übernimmt den Gutter) */
.ww-related__wrap {
  width: 100%;
}

.ww-related h2 {
  margin: 0 0 1rem;
}

.ww-related .ww-divider {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.ww-related--light .ww-divider svg { fill: var(--ww-black); }

.ww-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}

.ww-related__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(2rem, 3vw, 3rem) 1.5rem;
  border: 1px solid rgba(255,255,255,0.1);
  text-decoration: none;
  color: inherit;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.ww-related--light .ww-related__card {
  border-color: rgba(0,0,0,0.08);
}

.ww-related__card:hover {
  background: rgba(146,239,110,0.08);
  border-color: var(--ww-accent);
}

.ww-related__title {
  font-family: var(--ww-font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ww-related__text {
  font-family: var(--ww-font-body);
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  opacity: 0.6;
  line-height: 1.4;
}

.ww-related__arrow {
  font-size: 1.5rem;
  opacity: 0.3;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ww-related__card:hover .ww-related__arrow {
  opacity: 1;
  transform: translateX(4px);
  color: var(--ww-accent);
}

@media (max-width: 768px) {
  .ww-related__grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Checker Grid (Karo-Pattern) ────────────────────────── */
.ww-checker--dark  { background: var(--ww-black); color: var(--ww-white); }
.ww-checker--light { background: #f5f5f5; color: var(--ww-black); }

.ww-checker__header h2 { margin: 0; }



/* Checker pattern alternating colors */
.ww-checker--dark .ww-checker__cell--a  { background: var(--ww-black); color: var(--ww-white); }
.ww-checker--dark .ww-checker__cell--b  { background: var(--ww-white); color: var(--ww-black); }
.ww-checker--light .ww-checker__cell--a { background: var(--ww-white); color: var(--ww-black); }
.ww-checker--light .ww-checker__cell--b { background: var(--ww-black); color: var(--ww-white); }

.ww-checker__cell--image { padding: 0; }





.ww-checker__cell--brand { justify-content: center; align-items: center; }

@media (max-width: 900px) {
  .ww-checker__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Promo Card (Studentenrabatt) ───────────────────────── */
.ww-promo--accent { background: var(--ww-white); }
.ww-promo--dark   { background: var(--ww-black); }
.ww-promo--light  { background: #f5f5f5; }








@media (max-width: 768px) {
}

/* ─── Price List ─────────────────────────────────────────── */
.ww-prices {
  padding-inline: var(--ww-side-padding);
  padding-block: clamp(4rem, 8vw, 7rem);
}
.ww-prices--light { background: #f5f5f5; color: var(--ww-black); }
.ww-prices--dark  { background: var(--ww-black); color: var(--ww-white); }

.ww-prices__inner {
  max-width: var(--ww-content-max);
  margin: 0 auto;
}

.ww-prices__header {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.ww-prices__header h2 { margin: 0 0 0.5rem; }

.ww-prices__intro {
  font-family: var(--ww-font-body);
  font-size: var(--ww-text-size);
  max-width: 560px;
  margin: 0;
  opacity: 0.7;
  line-height: 1.6;
}

.ww-prices__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}

.ww-prices__cat-title {
  font-family: var(--ww-font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  text-transform: uppercase;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid currentColor;
}

.ww-prices__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ww-prices__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px dashed currentColor;
}
.ww-prices--light .ww-prices__item { border-bottom-color: rgba(0,0,0,0.2); }
.ww-prices--dark  .ww-prices__item { border-bottom-color: rgba(255,255,255,0.2); }

.ww-prices__item:last-child { border-bottom: none; }

.ww-prices__label {
  font-family: var(--ww-font-body);
  font-size: var(--ww-text-size);
}

.ww-prices__price {
  font-family: var(--ww-font-mono);
  font-size: var(--ww-text-size);
  font-weight: 500;
  white-space: nowrap;
}

.ww-prices__note {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--ww-font-body);
  font-size: calc(var(--ww-text-size) * 0.9);
  opacity: 0.6;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .ww-prices__grid { grid-template-columns: 1fr; }
  .ww-prices__cat-title {
    font-size: clamp(1.5rem, 2.8vw, 2rem);
  }
  .ww-prices__label,
  .ww-prices__price {
    font-size: calc(var(--ww-text-size) * 0.85);
  }
  .ww-prices__item {
    padding: 0.5rem 0;
  }
}

/* ─── Price Table (Multi-Column: Damen/Herren × Kurz/Mittel/Lang) ── */
.ww-ptable {
  padding-inline: var(--ww-side-padding);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.ww-ptable--dark  { background: var(--ww-black); color: var(--ww-white); }
.ww-ptable--light { background: #f5f5f5; color: var(--ww-black); }

.ww-ptable__inner {
  max-width: var(--ww-content-max);
  margin: 0 auto;
}

.ww-ptable__cat {
  font-family: var(--ww-font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  text-transform: uppercase;
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  letter-spacing: -0.01em;
  line-height: 1;
}

.ww-ptable__wrap {
  overflow-x: auto;
}

.ww-ptable__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--ww-font-mono);
  font-size: calc(var(--ww-text-size) * 0.92);
}

/* Fixed column widths so columns align across all price tables */
.ww-ptable__table col.ww-ptable__col--label { width: 34%; }
.ww-ptable__table col.ww-ptable__col--price { width: 13.2%; }

.ww-ptable__table thead th {
  font-weight: 600;
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: calc(var(--ww-text-size) * 0.75);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.55;
}

/* Group header (Damen / Herren) — Bathorie Display */
.ww-ptable__table thead th.ww-ptable__group {
  font-family: var(--ww-font-display);
  font-size: calc(var(--ww-text-size) * 1.1);
  letter-spacing: 0;
  opacity: 1;
  padding-bottom: 0.25rem;
  text-transform: uppercase;
}

.ww-ptable__subhead th {
  border-bottom: 1px solid currentColor;
}

.ww-ptable__table tbody td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px dashed currentColor;
}
.ww-ptable--dark  .ww-ptable__table tbody td { border-bottom-color: rgba(255,255,255,0.18); }
.ww-ptable--light .ww-ptable__table tbody td { border-bottom-color: rgba(0,0,0,0.18); }

.ww-ptable__label {
  font-family: var(--ww-font-body);
  font-size: var(--ww-text-size);
  padding-right: 1.5rem !important;
  width: 40%;
}

.ww-ptable__note {
  margin-top: 1.5rem;
  font-size: calc(var(--ww-text-size) * 0.85);
  opacity: 0.6;
  line-height: 1.5;
}

/* Mobile: kompakt scaliert, kein Stack, keine data-label */
@media (max-width: 768px) {
  .ww-ptable__table {
    font-size: calc(var(--ww-text-size) * 0.75);
  }
  .ww-ptable__table thead th { padding: 0.35rem 0.25rem; }
  .ww-ptable__table thead th.ww-ptable__group { font-size: calc(var(--ww-text-size) * 0.95); }
  .ww-ptable__table tbody td { padding: 0.45rem 0.25rem; }
  .ww-ptable__label {
    font-size: calc(var(--ww-text-size) * 0.85);
    padding-right: 0.5rem !important;
  }
  .ww-ptable__table col.ww-ptable__col--label { width: 36%; }
  .ww-ptable__table col.ww-ptable__col--price { width: 12.8%; }
}