/* ============================================================
   Wasch-Wunder — design tokens & shared styles
   Reference: editorial grotesque layout, hairlines, petrol accent
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-soft: #fafaf8;
  --ink: #16191a;
  --muted: #6a7177;
  --hair: #e7e7e3;
  --accent: #e30a17;
  --accent-tint: color-mix(in oklab, var(--accent) 8%, white);
  --accent-tint-strong: color-mix(in oklab, var(--accent) 14%, white);
  --todo-bg: rgba(234, 134, 36, 0.14);
  --todo-line: #d97b16;
  --font-head: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  --font-body: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  --container: 1920px;
  --pad: 28px;
  --nav-h: 62px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0 auto;
  max-width: 1920px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* nichts darf seitlich aus dem Canvas laufen */
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
::selection { background: var(--accent); color: #fff; }
::-moz-selection { background: var(--accent); color: #fff; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 300; color: color-mix(in oklab, var(--accent) 34%, #0d0f12); }
/* Headlines auf dunklem Grund bleiben hell */
.b2b :is(h1, h2, h3, h4), .panel :is(h1, h2, h3, h4) { color: #fff; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

section { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ---------- type scale ---------- */
.h-display {
  font-size: 56px;
  line-height: 63px;
  letter-spacing: -0.02em;
  font-weight: 300;
  font-style: normal;
  text-wrap: balance;
}
.h-section {
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 300;
  text-wrap: balance;
}
.h-card {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.body-muted { color: var(--muted); font-size: 16px; }
.small-muted { color: var(--muted); font-size: 14px; }

/* ---------- badges & buttons ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  background: transparent;
  color: var(--accent);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--accent-tint); }
.btn-fill { background: var(--accent); color: #fff; }
.btn-fill:hover { background: color-mix(in oklab, var(--accent) 86%, black); color: #fff; }
.btn-on-white { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.btn-on-white:hover { background: rgba(255, 255, 255, 0.14); }

/* ---------- TODO placeholders (deck convention: orange brackets) ---------- */
.todo {
  background: var(--todo-bg);
  border-bottom: 1px dotted var(--todo-line);
  border-radius: 2px;
  padding: 0 2px;
  color: inherit;
}
body[data-todos="aus"] .todo {
  background: transparent;
  border-bottom-color: transparent;
  padding: 0;
}

/* ---------- navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hair);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 17px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav-brand strong { font-weight: 500; font-size: 14px; letter-spacing: 0.08em; word-spacing: 0.22em; text-transform: uppercase; color: var(--ink); }
.nav-brand .sep { color: rgba(0, 0, 0, 0.2); font-weight: 300; font-size: 14px; }
.nav-brand .tag { color: rgba(0, 0, 0, 0.55); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* ---------- logo variants (html[data-logo]) ---------- */
.nav .nav-brand { align-items: center; }
/* Brand-Text optisch (nicht mathematisch) zur W-Marke zentrieren –
   die Welle macht die Marke unten schwer, daher leicht nach unten rücken */
.nav-brand .brand-text { display: flex; align-items: center; gap: 11px; transform: translateY(2px); }
.logo-mark { height: 30px; width: auto; display: block; flex: none; transform: translateY(-3px); }
.logo-wordmark { height: 46px; width: auto; display: block; flex: none; }
html[data-logo="welle"] .logo-wordmark { display: none; }
html[data-logo="wortmarke"] .nav .logo-mark,
html[data-logo="wortmarke"] .nav .brand-text { display: none; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15px;
}
.nav-links a { color: var(--ink); transition: color 0.15s ease; }
.nav-links a:hover { color: var(--accent); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
/* Nav-CTA als Outline-Pill (Lustra-Stil): transparent, 1.5px Akzent-Border,
   Pin-Icon links – Hover gefüllt mit weißem Text */
.nav-pill {
  border-width: 1.5px;
  background: transparent;
  color: var(--accent);
  padding-left: 18px;
  padding-right: 20px;
}
.nav-pill:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.nav-pill .pin-icon { width: 15px; height: 15px; flex: none; margin-right: -2px; }
.nav-burger {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
/* Option 1: zwei asymmetrische Striche (oben länger) in Akzentfarbe,
   die beim Öffnen sauber zu einem X zusammenfalten */
.nav-burger span {
  position: absolute;
  left: 50%;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), width 0.26s ease, top 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-burger span:nth-child(1) { top: calc(50% - 4px); width: 22px; }
.nav-burger span:nth-child(2) { top: calc(50% + 4px); width: 14px; }
.nav-burger.open span:nth-child(1) { top: 50%; width: 22px; transform: translateX(-50%) rotate(45deg); }
.nav-burger.open span:nth-child(2) { top: 50%; width: 22px; transform: translateX(-50%) rotate(-45deg); }
.nav-mobile {
  display: none;
  border-bottom: 1px solid var(--hair);
  background: #fff;
}
.nav-mobile.open { display: block; }
.nav-mobile a {
  display: block;
  padding: 14px var(--pad);
  border-top: 1px solid var(--hair);
  font-size: 16px;
}

/* ---------- Rechtsseiten (Impressum / Datenschutz) ----------
   padding-top/-bottom statt Shorthand, damit das horizontale Container-Padding
   erhalten bleibt; min-height verhindert, dass der Footer bei Stub-Inhalt
   nach oben rutscht. */
.legal {
  max-width: 760px;
  padding-top: 72px;
  padding-bottom: 96px;
  min-height: 62vh;
}
@media (max-width: 760px) {
  .legal { padding-top: 48px; padding-bottom: 64px; }
}

/* ---------- farbadaptive Nav: dunkle Variante über dunklen Sektionen ----------
   Inhalt invertiert auf hell; rotes W-Signet bleibt unverändert.
   Sanfte Farb-Transition für alle Nav-Elemente. */
.nav-brand .brand-text strong,
.nav-brand .sep,
.nav-brand .tag,
.nav-links a,
.nav-pill,
.nav-burger,
.nav-burger span {
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.nav--dark {
  background: rgba(20, 22, 26, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
/* Wortmarke hat eine Inline-Farbe – daher !important, um sie im Dark-State zu überschreiben */
.nav--dark .nav-brand .brand-text strong { color: rgba(255, 255, 255, 0.92) !important; }
.nav--dark .nav-brand .sep { color: rgba(255, 255, 255, 0.32); }
.nav--dark .nav-brand .tag { color: rgba(255, 255, 255, 0.64); }
.nav--dark .nav-links a { color: rgba(255, 255, 255, 0.82); }
.nav--dark .nav-links a:hover { color: #fff; }
.nav--dark .nav-pill { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.nav--dark .nav-pill:hover { background: #fff; color: var(--ink); border-color: #fff; }
.nav--dark .nav-burger { border-color: rgba(255, 255, 255, 0.32); }
.nav--dark .nav-burger span { background: #fff; }
.nav--dark.nav .nav-burger.open span { background: #fff; }

/* ---------- hero ---------- */
.hero { padding: 72px 0 64px; }
.hero-badge-row { margin-bottom: 28px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
  gap: 48px;
  align-items: end;
}
.hero-side { display: flex; flex-direction: column; gap: 22px; padding-bottom: 10px; }
.hero-side p { font-size: 16px; color: var(--ink); max-width: 40ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-cta .cta-short { display: none; }
@media (max-width: 480px) {
  .hero-cta .cta-long { display: none; }
  .hero-cta .cta-short { display: inline; }
}

/* ---------- Hero-Primärbutton: Wavy-Liquid-Füllung ----------
   Rote Flüssigkeit mit welliger, horizontal driftender Oberfläche; beim Hover
   steigt der Pegel. Label bleibt zentriert & über der Animation (z-index). */
/* Flüssigkeits-Pegel als animierbare Custom-Property (für weichen Anstieg) */
@property --level {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 80%;
}
.hero-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --level: 80%;
  /* Füllung als Hintergrund-Verlauf mit harter Kante: oben Off-White wie der
     Seitenhintergrund, unten Akzentrot. --level animiert via @property. */
  background: linear-gradient(to top, var(--accent) 0 var(--level), var(--bg) var(--level) 100%);
  border: 1.5px solid var(--accent);
  color: #fff;
  transition: --level 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Hover NICHT abdunkeln (überschreibt .btn-fill:hover) – Welle & Füllung
   bleiben farbgleich; Hover-Feedback ist der Magnet-Effekt. */
.hero-cta:hover {
  background: linear-gradient(to top, var(--accent) 0 var(--level), var(--bg) var(--level) 100%);
  color: #fff;
}
.hero-cta > span,
.hero-cta > .btn-inner { position: relative; z-index: 3; }
.hero-cta .cta-long,
.hero-cta .cta-short { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
/* inneres Label-Wrapper für magnetischen Effekt (separat bewegbar) */
.btn-inner { display: inline-flex; align-items: center; gap: 8px; }
.hero-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--level) - 6px);
  height: 18px;
  z-index: 1;
  /* Wellenform als Maske über Akzent-Hintergrund → Farbe folgt var(--accent) */
  background: var(--accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='18' preserveAspectRatio='none'%3E%3Cpath d='M0 7 C8.75 2 26.25 2 35 7 C43.75 12 61.25 12 70 7 L70 18 L0 18 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='18' preserveAspectRatio='none'%3E%3Cpath d='M0 7 C8.75 2 26.25 2 35 7 C43.75 12 61.25 12 70 7 L70 18 L0 18 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 70px 18px;
  mask-size: 70px 18px;
  transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: heroLiquid 3s linear infinite;
}
@keyframes heroLiquid {
  from { -webkit-mask-position-x: 0; mask-position-x: 0; }
  to { -webkit-mask-position-x: -70px; mask-position-x: -70px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta::after { animation: none; }
}

.hero-photo { margin-top: 56px; }
.media-frame {
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo .media-frame { height: clamp(360px, 48vw, 700px); }

/* ---------- USP row ---------- */
.usp {
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.usp-cell {
  padding: 48px 36px;
  text-align: center;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.usp-cell + .usp-cell { border-left: 1px solid var(--hair); }
.usp-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.usp-icon svg { width: 20px; height: 20px; }
.usp-cell h3 { font-size: 17px; font-weight: 400; line-height: 1.3; }
.usp-cell p { font-size: 14px; color: var(--muted); max-width: 30ch; }

/* ---------- numbers strip removed (Persil-Partner jetzt in USP-Leiste) ---------- */
.usp-logo {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.usp-logo img { height: 44px; width: auto; max-width: 150px; object-fit: contain; }

/* ---------- section headers ---------- */
.section-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.section-head .body-muted { max-width: 56ch; }
.section-head-left { text-align: left; align-items: flex-start; }

/* ---------- services panels ---------- */
.services { padding: 110px 0 0; }
.services .section-head { margin-bottom: 64px; }
.panel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--bg);
}
.panel {
  position: relative;
  min-height: 620px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 36px 28px 32px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.panel img.panel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 22, 24, 0.58);
  z-index: -1;
  transition: background 0.25s ease;
}
.panel:hover::after { background: rgba(13, 22, 24, 0.68); }
.panel-num { font-size: 13px; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.75); }
.panel-mid { display: flex; flex-direction: column; gap: 14px; align-items: center; margin-top: 26px; }
.panel-mid h3 { font-size: 24px; font-weight: 400; letter-spacing: -0.01em; }
.panel-mid p { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.82); max-width: 34ch; }
.panel-foot { display: flex; flex-direction: column; gap: 14px; align-items: center; margin-top: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chip {
  font-size: 12px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}
.panel-link { font-size: 13.5px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.5); padding-bottom: 1px; }
.panel-link:hover { border-bottom-color: #fff; }

/* ---------- price section (zweispaltig) ---------- */
.prices { padding-top: 96px; padding-bottom: 110px; }
.prices-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 56px;
  align-items: start;
}
.prices-aside h3 { font-size: 30px; font-weight: 300; letter-spacing: -0.015em; margin-bottom: 22px; }
.prices-aside .price-note { font-size: 13.5px; color: var(--muted); max-width: 42ch; }
.prices-aside .prices-cta { margin-top: 28px; display: flex; }
.price-table { border: 1px solid var(--hair); background: var(--bg-soft); border-radius: 8px; overflow: hidden; }
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--hair);
}
.price-row:last-child { border-bottom: none; }
.price-row .pos { font-size: 16px; }
.price-row .val {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-align: right;
}
.price-row .val .ab {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 8px;
}
.price-row.hi .pos { font-weight: 500; }
.price-row.hi .val { color: var(--accent); font-size: 21px; }
.price-row.abr .val { color: var(--accent); }

/* ---------- about (accordion left, photo right) ---------- */
.about { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.about-copy { padding: 110px 64px 110px var(--pad); max-width: 720px; margin-left: 0; width: 100%; }
.about-copy .badge { margin-bottom: 24px; }
.about-copy .h-section { margin-bottom: 48px; }
.about-photo { position: relative; min-height: 640px; }
.about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- accordion ---------- */
.acc { border-top: 1px solid var(--hair); }
.acc-item { border-bottom: 1px solid var(--hair); }
.acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: left;
}
.acc-chevron {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  display: grid;
  place-items: center;
  transition: transform 0.25s ease;
}
.acc-chevron svg { width: 12px; height: 12px; }
.acc-item.open .acc-chevron { transform: rotate(180deg); }
.acc-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.acc-body-pad { padding: 0 44px 24px 2px; color: var(--muted); font-size: 15.5px; }

/* ---------- Standortfinder-Teaser ---------- */
.finder { padding: 100px 0; border-bottom: 1px solid var(--hair); }
.finder-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.finder-inner .h-section { max-width: 18ch; }
.finder-inner .body-muted { max-width: 50ch; }
.finder-search { display: flex; gap: 10px; width: 100%; max-width: 520px; margin-top: 10px; }
.finder-search input {
  flex: 1;
  min-width: 0;
  padding: 13px 18px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
}
.finder-search input::placeholder { color: var(--muted); }
.finder-search input:focus { outline: none; border-color: var(--accent); }
.finder-search .btn { white-space: nowrap; }

/* ---------- B2B (dunkles Highlight, invertiert) ---------- */
.b2b { padding: 110px 0; background: #14191b; color: #fff; }
.b2b .section-head { margin-bottom: 56px; }
.b2b .badge { background: color-mix(in oklab, var(--accent) 22%, transparent); color: color-mix(in oklab, var(--accent) 55%, white); }
.b2b .body-muted { color: rgba(255, 255, 255, 0.72); }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.b-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 34px 30px 38px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.b-card .b-num { font-size: 12px; letter-spacing: 0.14em; color: color-mix(in oklab, var(--accent) 55%, white); font-weight: 600; }
.b-card h3 { font-size: 21px; font-weight: 400; letter-spacing: -0.01em; color: #fff; }
.b-card p { color: rgba(255, 255, 255, 0.66); font-size: 15px; }
.cta-strip {
  margin-top: 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 34px 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.cta-strip .lead { font-size: 19px; letter-spacing: -0.01em; max-width: 56ch; font-family: var(--font-head); font-weight: 400; color: #fff; }
.cta-strip .lead .small-muted { display: block; font-family: var(--font-body); font-weight: 400; margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, 0.5); }

/* ---------- offer banner ---------- */
.offer {
  position: relative;
  padding: 130px var(--pad);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.offer > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.offer::after { content: ""; position: absolute; inset: 0; background: rgba(20, 26, 28, 0.18); z-index: -1; }
.offer-card {
  position: relative;
  background: #fff;
  border-radius: 8px;
  max-width: 560px;
  width: 100%;
  padding: 56px 48px 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.offer-card h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.015em; line-height: 1.12; }
.offer-card .offer-text { color: var(--muted); font-size: 15px; max-width: 38ch; }
.offer-price { display: flex; align-items: baseline; gap: 12px; }
.offer-price .new { font-family: var(--font-head); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--accent); }
.offer-price .old { color: var(--muted); font-size: 17px; text-decoration: line-through; }
.cms-flag {
  position: absolute;
  top: -13px;
  right: 18px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--todo-line);
  background: #fff7ee;
  border: 1px dashed var(--todo-line);
  border-radius: 999px;
  padding: 4px 12px;
}
/* Inaktiv/leer: nur die wei\u00dfe Angebots-Karte ausblenden, das Foto bleibt als\n   visueller Break \u2013 aber mit reduzierter H\u00f6he, damit kein leeres Riesenband entsteht */
body[data-banner="aus"] #angebot .offer-card { display: none; }
body[data-banner="aus"] #angebot {
  min-height: clamp(230px, 28vw, 380px);
  padding-top: 0;
  padding-bottom: 0;
}

/* offer banner as hero visual */
.offer-hero { min-height: clamp(440px, 46vw, 680px); }

/* ---------- FAQ (zentriert, Karten) ---------- */
.faq { padding: 110px 0; }
.faq-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin-bottom: 48px; }
.faq-list { max-width: 880px; margin: 0 auto; border-top: none; display: flex; flex-direction: column; gap: 12px; }
.faq-list .acc-item { border: 1px solid var(--hair); background: #fafafa; border-radius: 999px; overflow: hidden; }
.faq-list .acc-item.open { border-radius: 22px; }
.faq-list .acc-head { padding: 20px 30px; }
.faq-list .acc-body-pad { padding: 0 30px 20px; max-width: 72ch; }

/* ---------- kontakt ---------- */
.kontakt { border-top: 1px solid var(--hair); padding: 100px 0; }
.kontakt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.kontakt-intro .badge { margin-bottom: 22px; }
.kontakt-intro .h-section { margin-bottom: 18px; }
.kontakt-intro .body-muted { max-width: 44ch; }
.direkt { border-top: 1px solid var(--hair); }
.direkt-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 2px;
  border-bottom: 1px solid var(--hair);
}
.direkt-row .k { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.direkt-row .v { font-size: 17px; font-family: var(--font-head); font-weight: 500; text-align: right; }
.kontakt-xref { margin-top: 22px; font-size: 14.5px; color: var(--muted); }
.kontakt-xref a { color: var(--accent); border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); }
.kontakt-intro .direkt { margin-top: 32px; }

/* ---------- Anfrage-Formular ---------- */
.anfrage { display: flex; flex-direction: column; gap: 18px; }
.anfrage .field { display: flex; flex-direction: column; gap: 7px; }
.anfrage .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.anfrage label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.anfrage .req { color: var(--accent); }
.anfrage input,
.anfrage select,
.anfrage textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}
.anfrage textarea { min-height: 120px; resize: vertical; }
.anfrage input::placeholder,
.anfrage textarea::placeholder { color: var(--muted); }
.anfrage input:focus,
.anfrage select:focus,
.anfrage textarea:focus { outline: none; border-color: var(--accent); }
.anfrage button { align-self: stretch; width: 100%; margin-top: 8px; }

/* Anfrage-Formular als saubere weiße Karte (Ecken bleiben eckig) */
.kontakt-form {
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(20, 26, 28, 0.07);
  padding: 32px;
}

/* ---------- footer ---------- */
/* Wellen-Divider: eine weiße SVG-Welle bildet die Grenze zum roten Footer;
   sie driftet langsam & nahtlos (Periode kachelt). Eine zweite, dezente Welle
   dahinter gibt Tiefe. Footer-Inhalt sitzt auf sattem Rot, voll lesbar. */
.footer {
  position: relative;
  isolation: isolate;
  background: var(--accent);
  color: rgba(255, 255, 255, 0.86);
}
.footer::before,
.footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
  background-repeat: repeat-x;
  background-position: 0 0;
}
.footer::after {
  z-index: 0;
  height: 140px;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='140' preserveAspectRatio='none'%3E%3Cpath d='M0 80 C100 66 200 66 300 80 C400 94 500 94 600 80 L600 0 L0 0 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 600px 140px;
  animation: footerWaveB 9.5s linear infinite;
}
.footer::before {
  z-index: 1;
  height: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 C100 38 200 38 300 60 C400 82 500 82 600 60 L600 0 L0 0 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 600px 120px;
  animation: footerWaveA 11s linear infinite;
}
@keyframes footerWaveA {
  from { background-position-x: 0; }
  to { background-position-x: -600px; }
}
@keyframes footerWaveB {
  from { background-position-x: 0; }
  to { background-position-x: 600px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer::before, .footer::after { animation: none; }
}
.footer > .container { position: relative; z-index: 2; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 150px 0 64px;
}
.footer-brand .nav-brand { color: #fff; margin-bottom: 18px; }
.footer-brand .nav-brand strong { color: #fff; letter-spacing: 0.4px; }
.footer-brand .nav-brand .sep { color: rgba(255, 255, 255, 0.3); }
.footer-brand .nav-brand .tag { color: rgba(255, 255, 255, 0.6); }
.footer-brand p { font-size: 14.5px; color: rgba(255, 255, 255, 0.72); max-width: 34ch; }
.footer h4 {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 18px;
  font-weight: 600;
}
.footer-col { display: flex; flex-direction: column; gap: 11px; font-size: 15px; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  flex-wrap: wrap;
}
.footer-bottom a:hover { color: #fff; }

/* ---------- demo flag ---------- */
.demo-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--todo-line);
  background: #fff7ee;
  border: 1px dashed var(--todo-line);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ---------- image placeholder fallback ---------- */
img.img-ph { object-fit: cover; }

/* ============================================================
   Nav-Breakpoint ≤ 1180px – Burger, bevor Links und CTA kollidieren
   ============================================================ */
.nav-cta .cta-short { display: none; }
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}

/* ============================================================
   Tablet ≤ 1024px – Preise einspaltig stapeln
   ============================================================ */
@media (max-width: 1024px) {
  .prices-grid { grid-template-columns: 1fr; gap: 32px; }
  .prices-aside .price-note { max-width: none; }
}

/* ============================================================
   Tablet ≤ 980px – Hero einspaltig, bevor die Spalten zu eng werden
   ============================================================ */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-side { padding-bottom: 0; }
  .h-display { max-width: 100% !important; }
}

/* ============================================================
   Mobile ≤ 720px
   ============================================================ */
@media (max-width: 720px) {
  :root { --pad: 20px; --nav-h: 60px; }

  .nav-links { display: none; }
  .nav-burger { display: flex; width: 36px; height: 36px; padding: 7px; }
  .nav-inner { gap: 10px; }
  .nav .nav-brand .tag,
  .nav .nav-brand .sep { display: none; }
  .logo-mark { height: 26px; }
  .logo-wordmark { height: 38px; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn { padding: 8px 12px; font-size: 13px; }

  .h-display { font-size: 40px; line-height: 45px; }
  .h-section { font-size: 32px; }

  .hero { padding: 44px 0 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-side { padding-bottom: 0; }
  .h-display { max-width: 100% !important; height: auto !important; }
  .hero-photo { margin-top: 36px; }
  .hero-photo .media-frame { height: 300px; }

  .usp-grid { grid-template-columns: 1fr; }
  .usp-cell + .usp-cell { border-left: none; border-top: 1px solid var(--hair); }
  .usp-cell { padding: 32px 24px; }

  .panel-grid { grid-template-columns: 1fr; }
  .panel { min-height: 480px; }

  .services { padding-top: 72px; }
  .services .section-head { margin-bottom: 40px; }
  .prices { padding-top: 64px; padding-bottom: 72px; }
  .price-row { padding: 14px 16px; }
  .price-row .pos { font-size: 15px; padding-right: 8px; }

  .about-grid { grid-template-columns: 1fr; }
  .about-copy { padding: 64px var(--pad); }
  .about-photo { min-height: 320px; }

  .b2b { padding: 72px 0; }
  .card-grid { grid-template-columns: 1fr; }
  .cta-strip { padding: 28px 24px; }

  .finder { padding: 64px 0; }
  .finder-search { flex-direction: column; max-width: 100%; }
  .finder-search .btn { width: 100%; }
  .anfrage .field-row { grid-template-columns: 1fr; }

  .offer { padding: 72px var(--pad); }
  .offer-card { padding: 44px 26px 38px; }
  .offer-hero { min-height: 0; }

  .faq { padding: 72px 0; }
  .kontakt { padding: 64px 0; }
  .kontakt-grid { grid-template-columns: 1fr; gap: 36px; }
  .direkt-row { flex-direction: column; gap: 4px; align-items: flex-start; }
  .direkt-row .v { text-align: left; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; padding: 132px 0 44px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ============================================================
   Sehr schmale Phones ≤ 430px – kurzes CTA-Label in der Nav
   ============================================================ */
@media (max-width: 430px) {
  .nav-cta .cta-long { display: none; }
  .nav-cta .cta-short { display: inline; }
}

/* ============================================================
   Tweaks-Floating-Button (nur Mobile) – öffnet/schließt das Panel,
   damit die Design-Optionen auch ohne Host-Toolbar erreichbar sind
   ============================================================ */
.ww-tweaks-fab { display: none; }
@media (max-width: 720px) {
  .ww-tweaks-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2147483647;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    -webkit-tap-highlight-color: transparent;
  }
  .ww-tweaks-fab:active { transform: scale(0.94); }
  .ww-tweaks-fab svg { width: 22px; height: 22px; display: block; }
  /* Panel über dem FAB platzieren, damit der Button antippbar bleibt */
  .twk-panel { bottom: 84px !important; }
}