/*
Theme Name: Hanzo Theme
Theme URI: https://gute-digital.de
Author: Gute Digital
Description: Eigenstaendiges Theme fuer Gute Digital - Websites fuer Malerbetriebe in Berlin.
Version: 8.10.0
Requires at least: 6.4
Requires PHP: 8.0
License: Unlicense
Text Domain: hanzo-theme
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  /* Handwerker-Palette: warmes Kalkweiss, Petrol-Anthrazit, erdiges Terrakotta.
     Materialnah statt Tech-Look — Putz, Pigment, Werkstatt. */
  --color-bg: #F4EEE4;          /* Kalkweiss — Body & helle Sections */
  --color-surface: #FFFFFF;     /* Karten heben sich vom Kalkweiss ab */
  --color-text: #2A2724;        /* warmes Anthrazit statt reinem Schwarz */
  --color-text-soft: rgba(42, 39, 36, 0.80);
  --color-border: rgba(42, 39, 36, 0.14);
  --color-dark-bg: #1A1D1F;     /* Anthrazit — dunkle Baender & Footer */
  --color-dark-text: #ffffff;
  --color-dark-text-soft: rgba(255, 255, 255, 0.66);
  --color-dark-border: rgba(255, 255, 255, 0.16);

  --color-primary: #1A1D1F;
  --color-primary-dark: #0E1112;
  --color-accent: #C8341E;      /* Signalrot — Akzente, Labels, Icons */
  --color-accent-dark: #A32717;
  /* Gefuellte Buttons nutzen den tieferen Ton, damit weisser Text WCAG AA erreicht */
  --color-accent-btn: #B02C18;
  --color-accent-btn-hover: #8F2313;
  /* Kleiner Text in Terrakotta braucht mehr Tiefe bzw. Helligkeit fuer WCAG AA */
  --color-accent-text: #A32717;        /* auf Kalkweiss: 6.4:1 */
  --color-accent-text-dark: #F08A70;   /* auf Anthrazit: 6.9:1 */
  /* Semantische Statusfarbe: nur Verfuegbarkeits-Punkt und Haken.
     Bewusst kein dritter Markenakzent. */
  --color-status-ok: #3F7D52;
  --color-status-ok-light: #7FB98F;

  /* Zwei Familien aus einer Sippe - siehe fonts.css. Der Unterschied zwischen
     Ueberschrift und Text kommt aus der Verengung, nicht aus einer fremden
     Gattung: Barlow Condensed baut schmal und hoch, Barlow daneben ruhig und
     breit. Die Ersatzschriften halten dieses Verhaeltnis, damit ein fehlender
     Download es nicht umdreht - Arial Narrow bleibt schmal, Helvetica breit.
     Ohne diese Ruecksicht faellt eine Seite, deren Schrift noch nicht da ist,
     im Verhaeltnis auseinander. */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-text: 'Barlow', Helvetica, Arial, sans-serif;

  /* --font-body und --font-mono sind die alten Namen. Sie bleiben als Verweis
     stehen, statt an 17 Stellen ersetzt zu werden: eine Umbenennung quer durch
     die Datei ist reines Risiko ohne Gewinn, und wer hier --font-mono liest,
     soll sofort sehen, dass es keine Schreibmaschinenschrift mehr gibt. Die
     Kapitel-Label liefen bisher auf Fragment Mono; sie tragen jetzt Barlow und
     unterscheiden sich ueber Laufweite und Versalien, nicht ueber die Gattung. */
  --font-body: var(--font-text);
  --font-mono: var(--font-text);
  --font-serif: var(--font-display);

  /* Eine Skala, die vom Fliesstext deutlich abhebt. Die Ueberschriften duerfen
     hier deutlich groesser stehen als vorher, weil Barlow Condensed schmal
     baut: 64px in einer verengten Schrift belegen ungefaehr so viel Zeile wie
     42px in der breiten Vorgaengerin, tragen aber sichtbar mehr Gewicht.
     Groesse ohne Breite - das ist der ganze Grund fuer eine Condensed. */
  --fs-h1: clamp(40px, 5.5vw, 64px);
  --fs-h2: clamp(30px, 4vw, 44px);
  --fs-h3: clamp(24px, 2vw, 28px);
  --fs-lead: 17px;
  --fs-body: 17px;
  --fs-klein: 15px;
  --fs-label: 13px;

  --radius-pill: 999px;
  --radius-badge: 999px;
  --radius-card: 14px;

  --container-max: 1440px;
  --gutter: 48px;

  --ease-appear: cubic-bezier(0.44, 0, 0.56, 1);
  --dur-appear: 1s;

  --ease-ui: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-ui: 0.3s;
}

@media (max-width: 809.98px) {
  :root { --gutter: 20px; }
}
@media (min-width: 810px) and (max-width: 1439.98px) {
  :root { --gutter: 32px; }
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.4;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
}

/* ==========================================================================
   Eyebrow label
   ========================================================================== */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
/* ==========================================================================
   Buttons (pill, layered soft shadow like Framer's default button)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 15px;
  padding: 12px 20px 12px 24px;
  transition: transform var(--dur-ui) var(--ease-ui), background var(--dur-ui) var(--ease-ui);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--color-accent-btn);
  color: #fff;
  box-shadow:
    0 0.6px 1.8px -0.4px rgba(0,0,0,0.18),
    0 1.4px 4.5px -0.8px rgba(0,0,0,0.18),
    0 3.5px 9px -1.25px rgba(0,0,0,0.16),
    0 8px 18px -1.7px rgba(0,0,0,0.14);
}
.btn-primary:hover { background: var(--color-accent-btn-hover); }
.band--dark .btn-primary { background: var(--color-accent-btn); color: #fff; }
.band--dark .btn-primary:hover { background: var(--color-accent-btn-hover); }
.btn-tab {
  background: rgba(42,39,36,0.05);
  color: var(--color-text);
}
.btn-tab:hover { background: rgba(42,39,36,0.09); }
.band--dark .btn-tab { background: rgba(255,255,255,0.08); color: #fff; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.001);
  transition: background var(--dur-ui) var(--ease-ui), backdrop-filter var(--dur-ui) var(--ease-ui);
}
.site-header.is-scrolled {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--color-border);
}
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 20px;
  padding-block: 16px;
}
.site-logo { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--color-primary); }

.primary-nav { display: none; justify-self: center; }
.primary-nav ul { display: flex; align-items: center; gap: 4px; }
.primary-nav a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text);
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  transition: background var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui);
}
.primary-nav a:hover { background: rgba(26,29,31,0.07); color: var(--color-primary); }

.site-header__contact { display: none; align-items: center; gap: 10px; justify-self: end; }
.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: var(--color-primary);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background var(--dur-ui) var(--ease-ui);
}
.site-header__phone:hover { background: var(--color-primary-dark); }
.site-header__phone svg { width: 15px; height: 15px; color: #fff; flex-shrink: 0; }
.site-header__whatsapp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: #25d366; color: #fff; flex-shrink: 0;
  transition: background var(--dur-ui) var(--ease-ui);
}
.site-header__whatsapp:hover { background: #1ebc5a; }
.site-header__whatsapp svg { width: 18px; height: 18px; }
@media (min-width: 810px) {
  .site-header__contact { display: flex; }
}
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-cta { display: none; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--color-border);
}
.nav-toggle svg { width: 16px; height: 16px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle.is-active .icon-menu { display: none; }
.nav-toggle.is-active .icon-close { display: block; }

.mobile-nav {
  position: fixed; inset: 0; z-index: 49;
  background: #fff;
  padding: 96px 24px 40px;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui), visibility var(--dur-ui);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-nav a { font-size: 28px; font-weight: 500; padding-block: 14px; border-bottom: 1px solid var(--color-border); }
.mobile-nav .btn { margin-top: 24px; align-self: flex-start; }

@media (min-width: 810px) {
  .primary-nav { display: block; }
  .header-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding-top: clamp(48px, 8vw, 96px); padding-bottom: 64px; overflow: hidden; }
.hero__content { max-width: 718px; position: relative; z-index: 2; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.2vw, 80px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hero-icon-chip {
  display: inline-flex;
  vertical-align: middle;
  width: 0.72em;
  height: 0.72em;
  margin: 0 0.04em;
  border-radius: 0.16em;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.hero-icon-chip svg { width: 100%; height: 100%; display: block; }
.hero-word-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  background: var(--color-text);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 0.02em 0.32em 0.06em;
  font-size: 0.72em;
  font-weight: 500;
  transition: opacity 0.35s var(--ease-ui);
}
.hero-word-pill.is-fading { opacity: 0; }
.hero__lead {
  margin-top: 24px;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--color-text-soft);
  max-width: 480px;
}
.hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }

.hero__slideshow {
  margin-top: 56px;
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 16/8.5;
  background: #1A1D1F;
}
.hero__slideshow img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.9s var(--ease-appear);
}
.hero__slideshow img.is-active { opacity: 1; }
.hero__slideshow-arrows { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 8px; z-index: 3; }
.hero__slideshow-arrows button {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
}
.hero__slideshow-arrows img { width: 14px; height: 14px; }

/* ==========================================================================
   Hero — editorial / collage variant
   ========================================================================== */
/* ==========================================================================
   Hero — direkt/konkret, Handwerker-tauglich (Schliep-Vorbild)
   ========================================================================== */
.hero--direct { padding-top: clamp(28px, 5vw, 64px); padding-bottom: clamp(32px, 5vw, 56px); position: relative; overflow: hidden; }
.hero-direct__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero-direct__grid { grid-template-columns: 1.05fr 1fr; gap: 56px; } }

.hero-direct__headline {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}
.hero-direct__lead { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--color-text-soft); max-width: 46ch; }

.hero-direct__bullets { margin-top: 18px; display: flex; flex-wrap: wrap; row-gap: 8px; column-gap: 18px; }
.hero-direct__bullets li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--color-text); white-space: nowrap; }
.hero-direct__bullets svg { width: 17px; height: 17px; color: #fff; background: var(--color-accent); border-radius: 50%; padding: 3px; flex-shrink: 0; box-sizing: border-box; }

.hero-direct__actions { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.hero-direct__phone {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px; color: var(--color-primary);
  background: #fff; border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-pill); padding: 12px 22px;
}
.hero-direct__phone svg { width: 19px; height: 19px; color: var(--color-accent); flex-shrink: 0; }

.hero-direct__media { position: relative; }

/* --------------------------------------------------------------------------
   Bildflaechen — Fotos folgen spaeter.
   Bis dahin steht hier eine beschriftete Flaeche im Seitenverhaeltnis des
   spaeteren Fotos, damit das Layout jetzt schon stimmt und beim Einsetzen
   nichts springt.
   -------------------------------------------------------------------------- */
.bildflaeche {
  position: relative;
  aspect-ratio: var(--bf-ratio, 4 / 3);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.bildflaeche img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bildflaeche:not(.bildflaeche--leer) { box-shadow: 0 30px 60px -24px rgba(26, 29, 31, 0.28); }

.bildflaeche--leer {
  background-color: rgba(42, 39, 36, 0.035);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 11px,
    rgba(42, 39, 36, 0.05) 11px 12px
  );
  border: 1.5px dashed rgba(42, 39, 36, 0.28);
}
.bildflaeche__inhalt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px clamp(16px, 4vw, 34px);
  text-align: center;
}
.bildflaeche__icon { width: 30px; height: 30px; color: rgba(42, 39, 36, 0.42); flex-shrink: 0; }
.bildflaeche__text {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(42, 39, 36, 0.78);
  max-width: 34ch;
}
.bildflaeche__hinweis {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* 0.72 statt 0.5: bei 11px Versalien muss der Kontrast ueber 4.5:1 liegen. */
  color: rgba(42, 39, 36, 0.72);
}

/* Auf dunklen Baendern dreht sich der Kontrast um. */
.band--dark .bildflaeche--leer {
  background-color: rgba(255, 255, 255, 0.04);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 11px,
    rgba(255, 255, 255, 0.07) 11px 12px
  );
  border-color: rgba(255, 255, 255, 0.3);
}
.band--dark .bildflaeche__icon { color: rgba(255, 255, 255, 0.5); }
.band--dark .bildflaeche__text { color: rgba(255, 255, 255, 0.88); }
.band--dark .bildflaeche__hinweis { color: rgba(255, 255, 255, 0.6); }

.hero--editorial { padding-top: clamp(72px, 11vw, 128px); padding-bottom: clamp(64px, 9vw, 112px); }
.hero-editorial__inner {
  position: relative;
  z-index: 1;
  max-width: 980px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-editorial__label {
  background: #F4EEE4;
  border-color: var(--color-border);
}
.hero-editorial__headline {
  margin-top: 32px;
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(36px, 6.4vw, 84px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.hero-editorial__headline .word { display: inline-block; }
.hero-editorial__headline .word--muted { color: rgba(42,39,36,0.38); }
.hero-editorial__headline .char {
  display: inline-block;
  opacity: 0;
  animation: hero-char-in 0.7s var(--ease-appear) forwards;
}
@keyframes hero-char-in {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-editorial__headline .char { opacity: 1; animation: none; filter: none; transform: none; }
}

.hero-card {
  display: inline-flex;
  vertical-align: middle;
  width: clamp(72px, 9vw, 116px);
  height: clamp(50px, 6.2vw, 78px);
  margin: 0 6px -6px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(42,39,36,0.16);
  background: #1A1D1F;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.10),
    0 8px 16px -4px rgba(0,0,0,0.18),
    0 20px 34px -8px rgba(0,0,0,0.16);
  position: relative;
}
.hero-card--slideshow[data-reveal] { opacity: 0.001; transform: translate(-14px, -30px) rotate(-16deg); }
.hero-card--slideshow[data-reveal].is-visible { opacity: 1; transform: rotate(-6deg); }
.hero-card--slideshow img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1s var(--ease-appear);
}
.hero-card--slideshow img.is-active { opacity: 1; }
.hero-card--marquee { background: #EBE3D6; }
.hero-card--marquee[data-reveal] { opacity: 0.001; transform: translate(14px, -22px) rotate(14deg); }
.hero-card--marquee[data-reveal].is-visible { opacity: 1; transform: rotate(4deg); }
.hero-card__marquee-track {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  animation: hero-marquee-vertical 9s linear infinite;
}
.hero-card__marquee-track span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(42,39,36,0.55);
  padding-block: 9px;
  white-space: nowrap;
}
@keyframes hero-marquee-vertical { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.hero-editorial__desc {
  margin-top: 28px;
  max-width: 480px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-soft);
}

@media (max-width: 809.98px) {
  .hero-card { width: 64px; height: 44px; margin: 0 3px -4px; border-radius: 12px; }
  .hero-card__marquee-track span { font-size: 9px; padding-block: 6px; }
}

/* ==========================================================================
   Logo ticker / marquee ("Trusted by Leaders")
   ========================================================================== */
/* ==========================================================================
   Why us — 3 konkrete Vertrauensgruende statt abstrakter Galerie
   ========================================================================== */
/* --------------------------------------------------------------------------
   Einwand-Zeilen: die Ueberschrift beginnt den Satz, drei Zeilen fuehren ihn
   zu Ende. Links die Fortsetzung samt Antwort, rechts die Belege. Haarlinien
   trennen die Zeilen — keine Karten, keine Icons, keine Hervorhebung.
   -------------------------------------------------------------------------- */
.why-us { padding-block: clamp(56px, 8vw, 96px); }

.why-us__zeilen { margin-top: clamp(36px, 5vw, 52px); }
.why-us__zeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding-block: clamp(28px, 3.6vw, 40px);
}
.why-us__zeile:first-child { padding-top: 0; }
.why-us__zeile + .why-us__zeile { border-top: 1px solid var(--color-border); }
@media (min-width: 810px) {
  .why-us__zeile {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(40px, 6vw, 110px);
    align-items: start;
  }
}

/* Die Fortsetzung ist der Inhalt, nicht ein Kartentitel — entsprechend gross. */
.why-us__satz h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 29px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-primary);
  max-width: 24ch;
}
.why-us__satz p {
  margin-top: 12px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--color-text-soft);
  max-width: 52ch;
}

/* Belege als scanbare Haekchen-Liste */
.why-us__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.why-us__list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
}
.why-us__list svg {
  width: 17px; height: 17px;
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--color-status-ok);
}
@media (min-width: 810px) {
  /* Erste Zeile der Belege buendig mit der Satz-Oberkante. */
  .why-us__list { padding-top: 7px; }
}

.why-us__link { margin-top: 20px; }
.text-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 15px; color: var(--color-accent);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-ui) var(--ease-ui);
}
.text-link:hover { border-color: var(--color-accent); }

.ticker-section { padding-block: 48px; border-block: 1px solid var(--color-border); }
.ticker-section .eyebrow { text-align: center; }
.ticker { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker__track { display: flex; align-items: center; gap: 14px; width: max-content; animation: ticker-scroll 34s linear infinite; }
.ticker__track span {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(26,29,31,0.06);
  border: 1px solid rgba(26,29,31,0.12);
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  flex-shrink: 0;
  white-space: nowrap;
}
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   Bands
   ========================================================================== */
.band { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.band--dark { background: var(--color-dark-bg); color: var(--color-dark-text); }
.band--white { background: var(--color-bg); }
/* Kapitel-Labels auf dunklem Petrol brauchen den helleren Terrakotta-Ton (5.0:1) */
.band--dark .manifest__label,
.band--dark .mitarbeiter__label,
.band--dark .contact-option__num { color: var(--color-accent-text-dark); }
.band--dark .color-soft { color: var(--color-dark-text-soft); }
.color-soft { color: var(--color-text-soft); }

.section-head { max-width: 620px; }
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.section-head--center { max-width: 620px; margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { text-align: center; }

/* ==========================================================================
   Manifest — poetic competence statement with floating skill chips
   ========================================================================== */
.manifest {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-block: clamp(56px, 10vw, 120px);
}
.manifest-texture {
  position: absolute; inset: 0; z-index: 0; opacity: 0.5;
  background-image: radial-gradient(rgba(42,39,36,0.07) 1px, transparent 1.4px);
  background-size: 24px 24px;
}
.manifest__inner {
  position: relative;
  z-index: 1;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.manifest__label-row {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 420px;
}
.manifest__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-accent-text);
}
.manifest__line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--color-border)); }
.manifest__line--right { background: linear-gradient(to right, var(--color-border), transparent); }
/* Im dunklen Band (Mitarbeiter, Zusicherungen) braucht die Linie mehr Helligkeit. */
.band--dark .manifest__line { background: linear-gradient(to right, transparent, var(--color-dark-border)); }
.band--dark .manifest__line--right { background: linear-gradient(to right, var(--color-dark-border), transparent); }

/* ==========================================================================
   Mitarbeiter — das eigentliche Kaufmotiv, deshalb direkt unter dem Hero.
   Bewusst eine Liste und kein Karten-Karussell: vier Punkte, die man auf
   dem Handy in einem Rutsch liest.
   ========================================================================== */
/* Das einzige Kapitel-Label der Seite: schlicht, ohne Zierlinien. */
.mitarbeiter__label {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mitarbeiter__heading {
  margin-top: 26px;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.mitarbeiter__intro {
  margin-top: 18px;
  max-width: 54ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-dark-text-soft);
}

/* Links der Grund, rechts die vier Bausteine. Am Schreibtisch bleibt die
   linke Spalte stehen (position: sticky), waehrend die Karten daran
   vorbeiziehen: die Ueberschrift und der Button sind die ganze Strecke
   ueber da. Kein Eingriff ins Scrollen — die Seite laeuft normal weiter.
   Damit sticky ueberhaupt Weg hat, muss die Spalte die volle Zeilenhoehe
   bekommen (align-items: stretch), sonst ist sie so hoch wie ihr Inhalt
   und klebt an nichts. */
.mitarbeiter__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 48px);
  align-items: start;
}
@media (min-width: 900px) {
  .mitarbeiter__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: stretch;
  }
  /* 102px: der klebende Kopfbereich ist 71px hoch, der Rest ist Luft. */
  .mitarbeiter__fest { position: sticky; top: 102px; }
}
.mitarbeiter__aktion { margin-top: 30px; }

.mitarbeiter__liste { display: flex; flex-direction: column; gap: 22px; }
/* Der Haken sitzt auf der Linie, die Karte daneben. Der Abstand von 22px
   und die 24px Hakenbreite ergeben zusammen den Einzug, an dem sich das
   Foto unter den Karten ausrichtet. */
.mitarbeiter__punkt {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
.mitarbeiter__punkt > svg {
  width: 24px; height: 24px;
  flex-shrink: 0;
  margin-top: 24px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--color-accent-btn);
  color: #fff;
}
/* Die Karte hebt den Baustein vom weissen Abschnitt ab — auf Kalkweiss,
   nicht auf Weiss: der Abschnitt selbst steht ja schon auf Weiss. */
.mitarbeiter__karte {
  flex: 1;
  min-width: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 24px clamp(20px, 2.2vw, 28px);
}
.mitarbeiter__punkt strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}
.mitarbeiter__punkt-text {
  display: block;
  margin-top: 7px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--color-dark-text-soft);
}

/* Das Foto liegt als Hintergrund in der unteren linken Ecke des sichtbaren
   Rahmens — genau dort, wo unter dem Button ohnehin Platz frei ist, und auf
   derselben Seite wie der Text, den es bebildert.

   Es haengt an .pin-halt und nicht am Abschnitt: waehrend des Festhaltens
   ist der Rahmen das, was man sieht, der Abschnitt selbst ist gut 1.500px
   lang. Am Abschnitt wuerde das Bild hinter dem stehenden Text vorbeiziehen.

   Zwei Masken uebereinander blenden es nach oben und nach rechts aus, damit
   es nirgends eine Kante gibt und weder Text noch Karten etwas abbekommen.
   Wo es am kraeftigsten ist, steht ohnehin nichts.

   Das :not(.ist-gepinnt) haelt hier nur die Falle zu, in die der Ablauf
   weiter unten schon einmal getreten ist: position:relative und das
   position:sticky aus Abschnitt 14 haben dieselbe Spezifitaet, es
   entscheidet die Zeilennummer. Hier steht die Bildregel oben und verliert,
   dort stand sie unten und gewann - und der Abschnitt hielt nicht mehr.
   Ausgeschlossen statt zufaellig ueberstimmt. */
.mitarbeiter--mit-bild:not(.ist-gepinnt) .pin-halt { position: relative; }
.mitarbeiter--mit-bild .pin-halt > .container { position: relative; z-index: 1; }
.mitarbeiter--mit-bild .pin-halt::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: min(58%, 460px);
  z-index: 0;
  pointer-events: none;
  background-image: var(--mitarbeiter-bild);
  background-size: 150%;
  background-position: 50% 62%;
  /* Auf dem Foto ist ein Handy zu sehen, und auf dem Handy steht Text. Ohne
     Weichzeichner bleibt der lesbar und streitet sich mit dem echten Text
     daneben — es sah aus wie ein aufgeklebter Screenshot. Weichgezeichnet
     bleibt die Form (Hand, Geraet, Baustelle dahinter), die Schrift darauf
     nicht. Etwas entsaettigt, damit das Blau des Handys nicht gegen das
     Terrakotta des Buttons anlaeuft. */
  filter: blur(4px) saturate(0.8);
  opacity: 0.18;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 100%);
}
@media (min-width: 900px) {
  .mitarbeiter--mit-bild .pin-halt::before {
    width: min(64%, 900px);
    height: min(92%, 800px);
    background-size: 140%;
    background-position: 28% 60%;
    filter: blur(5px) saturate(0.78);
    opacity: 0.24;
    -webkit-mask-image:
      linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.4) 48%, transparent 94%),
      linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.48) 52%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.4) 48%, transparent 94%),
      linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.48) 52%, transparent 100%);
    mask-composite: intersect;
  }
}

.manifest__text {
  margin-top: 40px;
  max-width: 920px;
  font-family: var(--font-body);
  font-size: clamp(26px, 3.7vw, 46px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
/* Das Manifest steht jetzt auf Kalkweiss. Der gedaempfte Zustand bleibt
   bewusst ueber 4.5:1 — die Animation soll das Lesen nicht behindern. */
.mword { color: var(--color-text); transition: color 0.4s ease-out; }
.mword.is-muted { color: rgba(42, 39, 36, 0.68); }
.band--dark .mword { color: #fff; }
.band--dark .mword.is-muted { color: rgba(255, 255, 255, 0.55); }
@media (prefers-reduced-motion: reduce) {
  .mword, .mword.is-muted { color: var(--color-text); transition: none; }
  .band--dark .mword, .band--dark .mword.is-muted { color: #fff; }
}

.skill-chip-field {
  position: static;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}
.skill-chip {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  box-shadow: 0 10px 22px -12px rgba(26,29,31,0.18);
  white-space: nowrap;
}
.skill-chip .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

[data-reveal^="chip-"] { opacity: 0.001; transform: translateY(16px); }
[data-reveal^="chip-"].is-visible { opacity: 1; transform: translateY(0); }

/* Process */
.process__cards {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.process-card {
  border: 1px solid rgba(255,255,255,0.14);
  background: #1A1D1F;
  border-radius: var(--radius-card);
  padding: 32px;
}
.process-card__num {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--color-dark-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
}
.process-card h3 { margin-top: 24px; font-size: 20px; font-weight: 600; }
.process-card p { margin-top: 10px; color: var(--color-dark-text-soft); font-size: 15px; }

@media (min-width: 810px) {
  .process__cards {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
  /* The fan rotation lives on the -slot wrapper, kept separate from
     .process-card's own [data-reveal] transform so the two never fight
     over the same `transform` property. */
  .process-card-slot {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    transition: transform 0.4s var(--ease-ui), z-index 0.4s;
  }
  .process-card-slot:nth-child(1) { transform: rotate(-6deg) translate(-64px, 6px); z-index: 1; }
  .process-card-slot:nth-child(2) { transform: rotate(0deg) translate(0, -10px); z-index: 3; }
  .process-card-slot:nth-child(3) { transform: rotate(6deg) translate(64px, 6px); z-index: 2; }
  .process-card-slot:hover { transform: rotate(0deg) translate(0, -20px) !important; z-index: 4 !important; }
}

/* ==========================================================================
   Process v2 — light, tilted card arrangement with hand-drawn arrows
   ========================================================================== */
.process-v2__heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 500;
  letter-spacing: -0.01em;
  max-width: 720px;
}
.process-v2__row {
  position: relative;
  margin-top: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 810px) {
  .process-v2__row { grid-template-columns: repeat(3, 1fr); gap: 48px; }
}

/* ==========================================================================
   Testimonials split — two columns, asymmetric rhythm
   ========================================================================== */
.testimonials-split__grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
.testimonials-split__divider { display: none; }
.testimonials-split__col blockquote {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.testimonials-split__meta { margin-top: 26px; display: flex; align-items: center; gap: 14px; }
.testimonials-split__meta img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testimonials-split__avatar-placeholder {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: #EBE3D6; border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center; color: var(--color-text-soft);
}
.testimonials-split__avatar-placeholder svg { width: 22px; height: 22px; }
.testimonials-split__name { font-weight: 600; font-size: 15px; }
.testimonials-split__role { color: var(--color-text-soft); font-size: 13px; margin-top: 2px; }

@media (min-width: 810px) {
  .testimonials-split__grid { grid-template-columns: 1fr auto 1fr; gap: 64px; align-items: start; }
  .testimonials-split__divider { display: block; width: 1px; align-self: stretch; background: var(--color-border); }
  .testimonials-split__col--offset { margin-top: 64px; }
}

/* Testimonials */
.testimonial-card {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.testimonial-card__avatar {
  width: 64px; height: 64px; border-radius: 50%;
  margin-inline: auto;
  overflow: hidden;
}
.testimonial-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-card blockquote {
  margin: 24px 0 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.testimonial-card__name { margin-top: 20px; font-weight: 600; }
.testimonial-card__role { color: var(--color-text-soft); font-size: 14px; margin-top: 2px; }

/* Case studies grid */
.project-grid { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 24px; }
.project-card { border-radius: var(--radius-card); overflow: hidden; }
.project-card__media { aspect-ratio: 4/3; overflow: hidden; }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-ui); }
.project-card:hover .project-card__media img { transform: scale(1.04); }
.project-card__body { padding: 20px 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-card__body h3 { font-size: 17px; font-weight: 600; }
.project-card__tags { display: flex; gap: 8px; }
.project-card__tags span {
  font-size: 12px; font-weight: 500; color: var(--color-text-soft);
  border: 1px solid var(--color-border); border-radius: var(--radius-badge); padding: 4px 12px;
}
@media (min-width: 810px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Work v2 — editorial 2-up portfolio grid with cursor hint
   ========================================================================== */
.work-v2__heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 500;
  letter-spacing: -0.01em;
  max-width: 720px;
}

.work-v2__grid {
  margin-top: clamp(44px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px 40px;
}
.work-v2__card { display: block; }
.work-v2__media {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.5s var(--ease-ui), box-shadow 0.5s var(--ease-ui);
}
.work-v2__media .bildflaeche { border-radius: 24px; }
.work-v2__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease-ui);
}
a.work-v2__card .work-v2__media { cursor: pointer; }
a.work-v2__card:hover .work-v2__media {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -22px rgba(0,0,0,0.25);
}
a.work-v2__card:hover .work-v2__media img { transform: scale(1.05); }

/* Entwurfskarte: nicht verlinkt, sichtbar als Entwurf markiert. */
.work-v2__entwurf {
  position: absolute;
  top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--color-dark-bg);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.work-v2__entwurf::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent-text-dark);
}
.work-v2__card--entwurf .work-v2__meta h3 { opacity: 0.9; }

.work-v2__note {
  margin-top: 40px;
  margin-inline: auto;
  max-width: 62ch;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
}

.work-v2__hint {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-ui), transform 0.3s var(--ease-ui);
  white-space: nowrap;
}
.work-v2__card:hover .work-v2__hint { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.work-v2__meta {
  margin-top: 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.work-v2__meta h3 { font-size: 18px; font-weight: 600; color: var(--color-primary); }
.work-v2__tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.work-v2__tags span {
  font-size: 12px; font-weight: 500; color: var(--color-text-soft);
  border: 1px solid var(--color-border); border-radius: var(--radius-badge); padding: 4px 12px;
  white-space: nowrap;
}

@media (min-width: 810px) {
  .work-v2__grid { grid-template-columns: repeat(2, 1fr); }
}

/* About */
.about__grid { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.about__photo { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 1; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__bio p { font-size: 16px; line-height: 1.6; color: var(--color-text-soft); }
.about__socials { margin-top: 24px; display: flex; gap: 10px; }
.about__socials a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
}
.about__socials svg { width: 16px; height: 16px; }
.experience-list { margin-top: 8px; }
.experience-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-block: 18px; border-top: 1px solid var(--color-border);
}
.experience-item:last-child { border-bottom: 1px solid var(--color-border); }
.experience-item__role { font-weight: 600; }
.experience-item__org { color: var(--color-text-soft); font-size: 14px; }
.experience-item__years { font-family: var(--font-mono); font-size: 13px; color: var(--color-text-soft); white-space: nowrap; }
@media (min-width: 810px) { .about__grid { grid-template-columns: 320px 1fr; } }

/* ==========================================================================
   About v2 — personal two-column intro with rotated portrait frame
   ========================================================================== */
.about-v2 { background: #F4EEE4; }
.about-v2__heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 500;
  letter-spacing: -0.01em;
  max-width: 720px;
}

.about-v2__grid {
  margin-top: clamp(44px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start;
}
@media (min-width: 810px) {
  .about-v2__grid { grid-template-columns: 1fr 1fr; gap: 80px; }
}

.about-v2__col-photo { max-width: 420px; margin-inline: auto; width: 100%; }
.about-v2__frame {
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 8px solid #fff;
  box-shadow: 0 30px 70px -24px rgba(0,0,0,0.22), 0 0 0 1px var(--color-border);
}
.about-v2__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Der weisse Rahmen bringt den Radius schon mit, die Bildflaeche darin nicht doppelt. */
.about-v2__frame .bildflaeche { border-radius: 0; height: 100%; }
.about-v2__frame .bildflaeche--leer { border: none; }
.about-v2__caption { margin-top: 18px; text-align: center; font-size: 13px; color: var(--color-text-soft); }

[data-reveal="about-photo"] { opacity: 0.001; transform: translateY(34px) rotate(7deg); }
[data-reveal="about-photo"].is-visible { opacity: 1; transform: rotate(-3deg); }

.about-v2__intro {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.01em;
}
.about-v2__body { margin-top: 20px; font-size: 16px; line-height: 1.7; color: var(--color-text-soft); max-width: 520px; }

.about-v2__experience {
  margin-top: 44px;
  padding-left: 24px;
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.about-v2__exp-item { display: flex; flex-direction: column; gap: 3px; }
.about-v2__exp-years { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-soft); }
.about-v2__exp-role { font-size: 15px; font-weight: 600; }
.about-v2__exp-desc { font-size: 13.5px; color: var(--color-text-soft); line-height: 1.5; }

/* Pricing */
.pricing { position: relative; overflow: hidden; }
.pricing__gradient {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(45deg, #fff 0%, #fff 20%, rgba(255,255,255,0.5) 30%, #E2D9C9 60%, #fff 100%);
}
.pricing .container { z-index: 1; }
.pricing-toggle {
  margin-top: 40px; display: inline-flex; padding: 4px;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
}
.pricing-toggle button {
  padding: 10px 24px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500;
}
.pricing-toggle button.is-active { background: var(--color-text); color: #fff; }
.pricing-card {
  margin-top: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: 1fr; gap: 32px;
  background: #fff;
}
.pricing-card__price { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); font-weight: 500; }
.pricing-card__price span { font-size: 18px; font-weight: 400; color: var(--color-text-soft); }
.pricing-card__badge { margin-top: 12px; }
.pricing-card__cta { margin-top: 24px; }
.pricing-card__features { display: grid; grid-template-columns: 1fr; gap: 14px; align-content: start; }
.pricing-card__features li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.pricing-card__features svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-status-ok); }
@media (min-width: 810px) { .pricing-card { grid-template-columns: 1.1fr 1fr; } }

.benefits-strip { margin-top: 64px; display: grid; grid-template-columns: 1fr; gap: 24px; text-align: center; }
.benefits-strip span { font-weight: 500; font-size: 15px; }
@media (min-width: 810px) { .benefits-strip { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   Pricing v2 — two-tier comparison with billing toggle + trust grid
   ========================================================================== */
.pricing-v2 { position: relative; overflow: hidden; }
.pricing-v2__heading {
  font-family: var(--font-display); font-size: clamp(28px, 4vw, 46px); font-weight: 500;
  letter-spacing: -0.01em; max-width: 720px;
}

.pricing-v2__toggle {
  margin: 40px auto 0; width: fit-content; display: inline-flex; padding: 4px;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: #fff;
}
.pricing-v2__toggle button {
  padding: 10px 20px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-soft);
}
.pricing-v2__toggle button.is-active { background: var(--color-text); color: #fff; }
.pricing-v2__save {
  font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  background: rgba(63,125,82,0.16); color: #2F5E3E;
}
.pricing-v2__toggle button.is-active .pricing-v2__save { background: rgba(255,255,255,0.2); color: #fff; }

.pricing-v2__cards {
  margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 28px; align-items: stretch;
}
/* Drei Karten nebeneinander brauchen Breite. Darunter stehen sie
   untereinander statt zu zweit mit einem Nachzuegler in der zweiten Reihe —
   das mittlere Paket verliert sonst seine Mitte. */
@media (min-width: 810px) and (max-width: 1079.98px) {
  .pricing-v2__cards { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
}
@media (min-width: 1080px) {
  .pricing-v2__cards { grid-template-columns: repeat(3, 1fr); max-width: 1280px; margin-inline: auto; }
  .pricing-v2__card  { padding: clamp(28px, 2.6vw, 40px); }
}

.pricing-v2__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 28px;
  padding: clamp(34px, 4.2vw, 52px);
  display: flex; flex-direction: column;
}
.pricing-v2__card--highlight {
  background: var(--color-primary); color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 34px 70px -26px rgba(26,29,31,0.35);
}
.pricing-v2__badge {
  position: absolute; top: -13px; left: 32px;
  background: #fff; color: var(--color-text);
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--color-border);
}
.pricing-v2__plan-name { font-family: var(--font-display); font-size: 25px; font-weight: 600; }
.pricing-v2__plan-tag { margin-top: 10px; font-size: 15.5px; line-height: 1.5; color: var(--color-text-soft); max-width: 32ch; }
.pricing-v2__card--highlight .pricing-v2__plan-tag { color: rgba(255,255,255,0.62); }
.pricing-v2__price { margin-top: 22px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px; }
.pricing-v2__prefix { font-size: 14px; font-weight: 600; opacity: 0.6; }
.pricing-v2__amount { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 36px); font-weight: 700; }
.pricing-v2__amount--text { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.pricing-v2__currency { font-size: 17px; font-weight: 700; opacity: 0.75; margin-left: 1px; }
.pricing-v2__period { font-size: 13px; color: var(--color-text-soft); margin-left: 6px; }
.pricing-v2__card--highlight .pricing-v2__period { color: rgba(255,255,255,0.6); }
.pricing-v2__cta { margin-top: 24px; align-self: flex-start; }
.pricing-v2__features { margin-top: 30px; display: flex; flex-direction: column; gap: 15px; }
.pricing-v2__features li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.pricing-v2__features svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-status-ok); }
.pricing-v2__card--highlight .pricing-v2__features svg { color: var(--color-status-ok-light); }
.pricing-v2__note { margin-top: 24px; font-size: 12px; color: var(--color-text-soft); }
.pricing-v2__note--light { color: rgba(255,255,255,0.55); }

/* Die Leistungszeilen laufen seit den ausfuehrlicheren Paketen oft ueber zwei
   Zeilen. Der Haken gehoert dann an die erste Zeile, nicht in die Mitte des
   Blocks — deshalb flex-start statt center. */
.pricing-v2__features li { align-items: flex-start; line-height: 1.45; }
.pricing-v2__features svg { margin-top: 3px; }

/* Die erste Zeile der Pakete 2 und 3 nennt das Paket darunter. Sie traegt den
   ganzen Preisunterschied und steht deshalb abgesetzt ueber der Liste, statt
   als einer von sieben gleich aussehenden Haken unterzugehen. */
.pricing-v2__feature--basis {
  font-weight: 700;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(42, 39, 36, 0.14);
}
.pricing-v2__card--highlight .pricing-v2__feature--basis {
  border-bottom-color: rgba(255, 255, 255, 0.20);
}

/* Monatsrate direkt unter dem Einmalpreis, nicht als Kleingedrucktes. */
.pricing-v2__rate {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-soft);
}
.pricing-v2__card--highlight .pricing-v2__rate { color: rgba(255, 255, 255, 0.72); }

/* Laufende Kosten stehen offen da, statt im Erstgespraech nachgereicht zu werden.
   Die Breite folgt der Kartenreihe darueber, sonst steht der Kasten schmaler
   in der Gegend als das, worauf er sich bezieht. */
.pricing-v2__laufend {
  margin-top: 32px;
  margin-inline: auto;
  max-width: 1280px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: clamp(20px, 2.4vw, 26px) clamp(22px, 2.6vw, 30px);
}
.pricing-v2__laufend-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
}
.pricing-v2__laufend-titel { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.pricing-v2__laufend-preis { font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.pricing-v2__laufend-text { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--color-text-soft); max-width: 62ch; }

.pricing-v2__individuell {
  margin-top: 26px;
  margin-inline: auto;
  max-width: 62ch;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
}
.pricing-v2__individuell .text-link { font-size: 16px; white-space: nowrap; }

/* FAQ */
.faq__list { margin-top: 40px; max-width: 800px; }
.faq-item { border-top: 1px solid var(--color-border); }
.faq-item:last-child { border-bottom: 1px solid var(--color-border); }
.faq-item summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 28px; font-weight: 600; font-size: 20px; cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--color-border); position: relative;
  transition: transform var(--dur-ui) var(--ease-ui);
}
.faq-item__icon::before, .faq-item__icon::after {
  content: ''; position: absolute; background: currentColor; top: 50%; left: 50%;
}
.faq-item__icon::before { width: 13px; height: 1.6px; transform: translate(-50%, -50%); }
.faq-item__icon::after { width: 1.6px; height: 13px; transform: translate(-50%, -50%); transition: opacity var(--dur-ui); }
.faq-item[open] .faq-item__icon::after { opacity: 0; }
.faq-item[open] .faq-item__icon { transform: rotate(180deg); }
.faq-item__panel { overflow: hidden; }
.faq-item__panel-inner { padding-bottom: 28px; color: var(--color-text-soft); font-size: 17px; max-width: 680px; line-height: 1.65; }
.faq__contact { margin-top: 40px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ==========================================================================
   FAQ v2 — label + heading + 2-col (contact card / accordion)
   ========================================================================== */
.faq-v2__heading {
  font-family: var(--font-display); font-size: clamp(28px, 4vw, 46px); font-weight: 500;
  letter-spacing: -0.01em;
}

.faq-v2__grid {
  margin-top: clamp(44px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
@media (min-width: 810px) {
  .faq-v2__grid { grid-template-columns: 300px 1fr; gap: 72px; }
}

.faq-v2__contact-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 40px 34px;
  box-shadow: 0 26px 55px -22px rgba(0,0,0,0.16);
}
.faq-v2__contact-kicker { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.faq-v2__contact-text { margin-top: 10px; font-size: 15.5px; color: var(--color-text-soft); line-height: 1.6; }
.faq-v2__contact-btn { margin-top: 22px; }

/* Foto oben in der Kontaktkarte.
   Quer beschnitten, nicht im Hochformat des Originals - und das ist die
   eigentliche Entscheidung hier. Eine knappe Bildschirmhoehe weiter oben
   steht im Ueber-mich-Abschnitt bereits ein grosses 4:5-Portrait desselben
   Mannes. Zweimal dasselbe Format waere eine Bilderstrecke; quer liest sich
   als andere Rolle: dort das Portrait mit Namen, hier der Beleg fuer den
   einen Satz, der auf dieser Karte etwas verspricht.

   Am Bildausschnitt gewinnt man dabei nichts und verliert nichts: object-fit
   skaliert nach der Breite, das Gesicht ist im Quadrat exakt so gross wie im
   4:3. Weg faellt nur der Schreibtisch unten, der nichts erzaehlt.

   Die Breite ist gedeckelt, obwohl die Karte am Schreibtisch ohnehin schmal
   ist. Zwischen 600 und 810px faellt das Raster auf eine Spalte und die Karte
   wird rund 600px breit; ein mitwachsendes Bild machte sie dort ueber 1000px
   hoch, also einen ganzen Bildschirm nur Kontaktkarte. Gemessen, nicht
   geschaetzt.

   Der Deckel haelt ausserdem die Kippung im Zaum: die Karte steht schraeg,
   und je hoeher sie wird, desto weiter schwingt sie seitlich aus. Am Handy
   bleiben zwischen Karte und Containerkante nur wenige Pixel - der Body steht
   auf overflow-x: clip, ein Ueberstand wuerde also lautlos abgeschnitten. */
.faq-v2__contact-foto {
  margin-bottom: 22px;
  max-width: 300px;
}
.faq-v2__contact-foto img {
  display: block;
  width: 100%;
  /* height: auto ist hier nicht Kosmetik, sondern noetig: wp_get_attachment_image()
     schreibt width und height als Attribute ins Markup (gut, das verhindert
     Layoutspruenge). Das height-Attribut wirkt aber als Praesentationshinweis
     auf die height-Eigenschaft und schlaegt damit aspect-ratio - ohne diese
     Zeile bleibt das Bild 1402px hoch und die Karte wird 1738px lang. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Der Kopf sitzt im Original in der oberen Haelfte. Mittig beschnitten
     landete die Schnittkante im Gesicht. Nur der senkrechte Wert wirkt: das
     Bild ist schmaler als der Rahmen und wird deshalb allein in der Hoehe
     beschnitten. */
  object-position: 50% 16%;
  /* Etwas enger als die Karte selbst (14px). Das Bild liegt 34px innerhalb
     ihres Randes, die Radien stehen also nicht konzentrisch zueinander -
     gleicher Wert saehe hier groesser aus als am Kartenrand. */
  border-radius: 11px;
  /* Grund fuer die Ladezeit, in der noch nichts da ist: das Kalkweiss der
     Seite, nicht das Weiss der Karte - sonst blitzt an der Stelle ein
     unsichtbarer Kasten. */
  background: var(--color-bg);
}

/* Tablet hochkant: dort faellt das Raster des Abschnitts auf eine Spalte und
   die Karte wird rund 600px breit. Uebereinander gestapelt stuende das Foto
   dann klein oben links und rechts daneben bliebe eine leere Flaeche. Also
   Bild links, Text rechts - dieselbe Aufteilung, die der Abschnitt am
   Schreibtisch ohnehin hat, nur eine Ebene tiefer.
   Nur mit Foto: ohne Bild gibt es keine erste Spalte zu fuellen. */
@media (min-width: 600px) and (max-width: 809.98px) {
  .faq-v2__contact-card--mit-foto {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: 34px;
    align-items: center;
  }
  .faq-v2__contact-card--mit-foto .faq-v2__contact-foto {
    margin-bottom: 0;
    max-width: none;
  }
}

.faq-v2__list .faq-item:first-child { border-top: 1px solid var(--color-border); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { position: relative; overflow: hidden; }
.site-footer__cta { text-align: center; max-width: 560px; margin-inline: auto; }

.contact-v2__success {
  max-width: 560px; margin: 24px auto 0; text-align: center;
  background: rgba(124,140,107,0.15); border: 1px solid rgba(124,140,107,0.4);
  color: #fff; padding: 14px 20px; border-radius: var(--radius-card); font-size: 14px; font-weight: 600;
}

.contact-v2__error {
  max-width: 560px; margin: 24px auto 0; text-align: center;
  background: rgba(200,52,30,0.20); border: 1px solid #C8341E;
  color: #fff; padding: 14px 20px; border-radius: var(--radius-card); font-size: 14px; font-weight: 600;
}

/* Datenschutzhinweis unter dem Absenden-Button. */* Honigtopf gegen Spam: fuer Menschen unsichtbar, fuer Skripte ein Koeder. *
/* WhatsApp ist die erste Kontaktoption, nicht eine von zweien nebeneinander:
   volle Breite ueber dem Formular, das Telefon darunter als zweite Wahl. */
.contact-v2__quickbar {
  margin: 48px auto 0;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-v2__quick-whatsapp {
  display: flex; align-items: center; gap: 14px;
  min-height: 44px;
  padding: 16px 22px;
  box-sizing: border-box;
  /* Dunkleres Gruen als das WhatsApp-Signalgruen: erst damit halten
     Beschriftung und Zusatzzeile in Weiss die 4.5:1. */
  background: #146237;
  border-radius: var(--radius-card);
  color: #fff;
  text-align: left;
  transition: background var(--dur-ui) var(--ease-ui);
}
.contact-v2__quick-whatsapp:hover { background: #0E4A29; }
.contact-v2__quick-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-v2__quick-label { font-weight: 700; font-size: 16px; line-height: 1.3; }
.contact-v2__quick-hint { font-size: 13.5px; line-height: 1.35; color: #fff; }

.contact-v2__quick-phone {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px;
  padding: 13px 22px;
  box-sizing: border-box;
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-card);
  font-weight: 700; font-size: 15px; color: #fff;
  transition: background var(--dur-ui) var(--ease-ui);
  white-space: nowrap;
}
.contact-v2__quick-phone:hover { background: rgba(255,255,255,0.08); }
.contact-v2__quick-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.18); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.contact-v2__quick-icon svg { width: 18px; height: 18px; }
.contact-v2__quick-phone svg { width: 18px; height: 18px; color: var(--color-accent-text-dark); flex-shrink: 0; }

.contact-v2__calendar-link { margin-top: 16px; text-align: center; }
.contact-v2__calendar-link a {
  font-size: 13.5px; color: rgba(255,255,255,0.68);
  text-decoration: underline; text-underline-offset: 3px;
}
.contact-v2__calendar-link a:hover { color: #fff; }

.contact-v2__configurator-wrap {
  margin: 40px auto 0;
  max-width: 560px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-card);
  padding: clamp(28px, 4vw, 40px);
}

.contact-option {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 34px);
}
.contact-option__num { font-family: var(--font-mono); font-size: 13px; color: var(--color-accent); font-weight: 700; }
.contact-option h3 { margin-top: 12px; font-size: 20px; font-weight: 700; }
.contact-option p { margin-top: 10px; font-size: 14.5px; color: var(--color-dark-text-soft); line-height: 1.55; }
.contact-option__actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.contact-option__btn { font-size: 14px; }
.contact-option__btn svg { width: 16px; height: 16px; }
.band--dark .btn-tab { background: rgba(255,255,255,0.1); color: #fff; }
.band--dark .btn-tab:hover { background: rgba(255,255,255,0.16); }

/* Configurator (Schritt-fuer-Schritt-Kontaktformular) *@keyframes config-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }/* Sichtbares Label ueber dem Feld statt Platzhalter-als-Beschriftung. */.site-footer__cta .btn { margin-top: 28px; }
.site-footer__nav {
  margin-top: 88px; padding-top: 48px; border-top: 1px solid var(--color-dark-border);
  display: grid; grid-template-columns: 1fr; gap: 36px;
}
@media (min-width: 700px) { .site-footer__nav { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } }
.site-footer__col h4 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  /* Signalrot auf Anthrazit kam nur auf 3.2:1 — hier die aufgehellte Variante. */
  color: var(--color-accent-text-dark); margin-bottom: 16px;
}
.site-footer__col ul { display: flex; flex-direction: column; gap: 11px; }
.site-footer__col a { font-size: 14.5px; color: rgba(255,255,255,0.72); transition: color var(--dur-ui) var(--ease-ui); }
.site-footer__col a:hover { color: #fff; }
.site-footer__col--brand p { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--color-dark-text-soft); max-width: 34ch; }
.site-footer__bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--color-dark-border);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.site-footer .site-logo { color: #fff; }

/* ==========================================================================
   Scroll-reveal (exact Framer appear registry values)
   opacity 0.001 -> 1, translate/rotate -> 0 (or small residual rotate),
   tween, 1s, cubic-bezier(0.44,0,0.56,1), stagger delay 0 / 0.6 / 1s
   ========================================================================== */
[data-reveal] {
  opacity: 0.001;
  transition: opacity var(--dur-appear) var(--ease-appear), transform var(--dur-appear) var(--ease-appear);
  will-change: transform, opacity;
}
[data-reveal].is-visible { opacity: 1; }

[data-reveal="up"] { transform: translateY(48px); }
[data-reveal="up"].is-visible { transform: translateY(0); }

[data-reveal="up-lg"] { transform: translateY(128px); }
[data-reveal="up-lg"].is-visible { transform: translateY(0); }

[data-reveal="down"] { transform: translateY(-48px); }
[data-reveal="down"].is-visible { transform: translateY(0); }

[data-reveal="fade"] { transform: none; }

[data-reveal="tilt-left"] { transform: translate(-9px, -43px) rotate(-13deg); }
[data-reveal="tilt-left"].is-visible { transform: rotate(-2deg); }

[data-reveal="tilt-right"] { transform: translate(12px, -18px) rotate(6deg); }
[data-reveal="tilt-right"].is-visible { transform: rotate(2deg); }

[data-reveal-delay="0.6"] { transition-delay: 0.6s; }
[data-reveal-delay="1"] { transition-delay: 1s; }

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

/* ==========================================================================
   Unterseiten (Leistungen, Impressum, Blog ...)
   ========================================================================== */
.subpage { padding-block: clamp(56px, 8vw, 104px); }
.subpage__inner { max-width: 820px; }
/* Die H1 der Unterseiten (Impressum, Datenschutz, Blog). Bewusst nicht auf
   der vollen H1-Skala bis 64px: dort steht "Datenschutzerklaerung", ein
   einzelnes langes Wort, das bei 64px in einer Condensed die halbe Zeile
   belegt und nichts dazugewinnt. Gewicht 600 wie alle Ueberschriften. */
.subpage__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--color-primary);
}
.subpage__lead { margin-top: 12px; font-size: 16.5px; }

.post-list { margin-top: 44px; display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 700px) { .post-list { grid-template-columns: 1fr 1fr; } }
.post-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 26px;
  transition: transform var(--dur-ui) var(--ease-ui), box-shadow var(--dur-ui) var(--ease-ui);
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -22px rgba(26,29,31,0.25); }
.post-card__date { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-soft); }
.post-card h2 { margin-top: 10px; font-size: 20px; font-weight: 700; color: var(--color-primary); line-height: 1.3; }
.post-card p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--color-text-soft); }
.post-card .text-link { margin-top: 16px; font-size: 14px; }
.post-pagination { margin-top: 40px; display: flex; gap: 10px; flex-wrap: wrap; }
.post-pagination a, .post-pagination span {
  padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); font-size: 14px; font-weight: 600;
}
.post-pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ==========================================================================
   Generic page content
   ========================================================================== */
.page-content h2 { font-size: 24px; font-weight: 600; margin-top: 32px; margin-bottom: 12px; }
.page-content p { margin-bottom: 14px; color: var(--color-text-soft); line-height: 1.7; }
.page-content a { text-decoration: underline; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Mobil- und Tabletfeinschliff
   Ergaenzt das bestehende mobile-first Layout. Der Desktop bleibt unberuehrt.
   ========================================================================== */

/* Sicherheitsnetz gegen seitliches Verrutschen. "clip" statt "hidden":
   erzeugt keinen Scroll-Container und laesst position:sticky/fixed intakt. */
body { overflow-x: clip; }

@media (max-width: 809.98px) {

  /* Das geneigte Portraetfoto ragte im Ausgangszustand der Einblendung
     ueber den rechten Rand hinaus (7 Grad bei 335px Breite = 384px
     Bounding-Box). Flachere Neigung, gleiche Wirkung, kein Ueberlauf. */
  [data-reveal="about-photo"] { transform: translateY(34px) rotate(3deg); }
  [data-reveal="about-photo"].is-visible { transform: rotate(-2.5deg); }
  /* Tap-Ziele auf mindestens 44px bringen (WCAG 2.5.8 fordert 24px,
     44px ist die bequeme Groesse fuer Daumen). */
  .nav-toggle { width: 44px; height: 44px; }

  .btn,
  .hero-direct__phone,
  .faq-item summary {
    min-height: 44px;
    box-sizing: border-box;
  }
  .btn, .hero-direct__phone { align-items: center; }

  /* Das Wortmarken-Logo ist der Heim-Link im klebenden Kopf. */
  .site-header .site-logo { display: inline-flex; align-items: center; min-height: 44px; }

  
ite-footer__socials a { width: 44px; height: 44px; }

  .site-footer__col ul a { display: inline-block; padding-block: 7px; }

  .text-link { min-height: 24px; }
}

/* Tablet hochkant: bisher fiel hier alles auf eine Spalte und wurde auf
   volle Breite gestreckt - das sah aus wie eine vergroesserte Handyansicht.
   Zweispaltig, wo es das Raster hergibt; sonst mittig begrenzt. */
@media (min-width: 600px) and (max-width: 809.98px) {

  .about-v2__grid { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

  .work-v2__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 28px; }

  .pricing-v2__cards { max-width: 560px; margin-inline: auto; }
  .faq-v2__grid    { max-width: 660px; margin-inline: auto; }
  .site-footer__cta { max-width: 620px; }
}
/* ==========================================================================
   Ablauf: drei offene Schritte auf dem Band
   Keine Kartenrahmen, keine gebauten Grafiken. Grosse Slab-Ziffer, Titel,
   Text. Eine gestrichelte Linie verbindet die Ziffern am Schreibtisch.
   ========================================================================== */
.process-v2__schritt { position: relative; }

/* Die Schiene: eine durchgehende Haarlinie ueber allen drei Schritten. Sie
   steht von Anfang an da und gibt dem Abschnitt seine Ordnung, auch wenn die
   Schritte noch nicht erschienen sind. Nur ab Desktopbreite, wo die drei
   nebeneinanderstehen und die Linie tatsaechlich etwas verbindet. */
@media (min-width: 810px) {
  .process-v2__row::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--color-border);
    pointer-events: none;
  }
}

/* Auf der Schiene faehrt je Schritt ein Abschnitt in Gruen mit, sobald der
   Leser ihn erreicht. Gruen ist auf dieser Seite die Farbe fuer Erledigtes
   (Haken, Weg im Mitarbeiter-Abschnitt) - hier heisst sie dasselbe.
   Der Balken zeichnet sich langsamer als der Schritt einblendet, damit man
   die Bewegung sieht und nicht nur das Ergebnis. */
.process-v2__schritt::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-status-ok);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--ease-appear);
}
.process-v2__schritt.is-da::before { transform: scaleX(1); }

/* Die Ziffer ist der Anker des Schrittes, nicht seine Verzierung: gross,
   in Anthrazit, mit Ziffern gleicher Breite, damit die drei exakt
   uebereinanderstehen wuerden. */
.process-v2__ziffer {
  display: block;
  margin-top: clamp(20px, 2.2vw, 28px);
  font-family: var(--font-display);
  font-size: clamp(54px, 5.6vw, 78px);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.035em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--color-text);
}

.process-v2__title {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700; line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-text);
}
.process-v2__schritt p { margin-top: 10px; color: var(--color-text-soft); font-size: 15px; line-height: 1.55; max-width: 34ch; }

@media (prefers-reduced-motion: reduce) {
  .process-v2__schritt::before { transform: scaleX(1); transition: none; }
}

/* ==========================================================================
   Umbau 2026-08 — Typo-Skala, Header-CTA, Outline-Buttons, neue Baender.
   Steht bewusst am Dateiende: schlaegt die Regeln oben bei gleicher
   Spezifitaet, ohne dass dort etwas herausgeschnitten werden muss.
   ========================================================================== */
:root {
  --fs-h3: clamp(26px, 2.4vw, 32px);
  --fs-h4: 22px;
}

/* Sektionsueberschriften standen auf Gewicht 500 und wirkten dadurch weich. */
.section-head h2,
.process-v2__heading,
.work-v2__heading,
.about-v2__heading,
.pricing-v2__heading,
.faq-v2__heading,
.stats__heading,
.trust__heading,
.contact-section__heading {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.hero-direct__headline { font-weight: 700; letter-spacing: -0.005em; }
.eyebrow { font-family: var(--font-display); font-weight: 700; }

/* Zwischenebene: Kartentitel lagen bei 18-19px und waren vom Fliesstext
   kaum zu unterscheiden. Die Luecke 46px -> 19px war das eigentliche Problem. */
.process-v2__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.work-v2__meta h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.2;
}
.pricing-v2__plan-name { font-size: var(--fs-h4); font-weight: 700; }
.faq-item summary { font-family: var(--font-display); font-size: 21px; font-weight: 700; }

/* --- Header: sichtbarer Handlungsaufruf statt reiner Navigation --- */
.site-header__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-btn); color: #fff;
  font-weight: 700; font-size: 14.5px; white-space: nowrap;
  border: 1.5px solid transparent;
  transition: background var(--dur-ui) var(--ease-ui);
}
.site-header__cta:hover { background: var(--color-accent-btn-hover); }
/* Telefon tritt zurueck, damit es dem roten Button nicht die Schau stiehlt. */
.site-header__phone {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  padding: 10px 16px;
  font-size: 14.5px;
}
.site-header__phone:hover { background: rgba(26,29,31,0.06); border-color: rgba(26,29,31,0.30); }
.site-header__phone svg { color: var(--color-accent-text); }
/* Telefon und WhatsApp bleiben auch auf dem Handy im Header sichtbar:
   Anrufen ist bei dieser Zielgruppe der haeufigste Conversion-Pfad.
   Der Textbutton braucht mehr Platz und kommt erst ab 700px dazu. */
.site-header__contact { display: flex; }
.site-header__cta { display: none; }
@media (min-width: 700px) { .site-header__cta { display: inline-flex; } }
@media (max-width: 899px) { .site-header__phone span { display: none; } }

/* --- Preiskarten: Geister-Buttons (5% Deckkraft) waren praktisch unsichtbar --- */
.btn-primary { border: 1.5px solid transparent; }
.btn-tab {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid rgba(26,29,31,0.32);
}
.btn-tab:hover { background: rgba(26,29,31,0.06); border-color: var(--color-text); }
.band--dark .btn-tab { background: transparent; border-color: rgba(255,255,255,0.40); color: #fff; }
.band--dark .btn-tab:hover { background: rgba(255,255,255,0.10); border-color: #fff; }

/* --- Kennzahlen-Band (ersetzt die Wort-Chips im Ansatz-Abschnitt) --- */
.stats-row {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card); overflow: hidden;
}
@media (min-width: 820px) { .stats-row { grid-template-columns: repeat(4, 1fr); } }
.stats-row__item { background: var(--color-surface); padding: 30px 22px; text-align: center; }
.band--dark .stats-row { background: var(--color-dark-border); border-color: var(--color-dark-border); }
.band--dark .stats-row__item { background: var(--color-dark-bg); }
/* Zwei der vier Werte sind jetzt ganze Aussagen statt Zahlen — deshalb
   kleiner gesetzt, damit "Bei Google in Ihrem Bezirk" nicht dreizeilig bricht. */
.stats-row__value {
  display: block; font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 26px); font-weight: 700;
  line-height: 1.2; letter-spacing: -0.01em; color: var(--color-primary);
  text-wrap: balance;
}
.stats-row__label {
  display: block; margin-top: 10px;
  font-size: 14px; line-height: 1.4; color: var(--color-text-soft);
}
.band--dark .stats-row__value { color: #fff; }
.band--dark .stats-row__label { color: var(--color-dark-text-soft); }

/* --- Vertrauensband vor den Preisen --- */
.trust__grid { margin-top: 56px; display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px)  { .trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .trust__grid { grid-template-columns: repeat(4, 1fr); } }
.trust__item {
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-card);
  padding: 28px 24px; background: rgba(255,255,255,0.03);
}
.trust__icon {
  width: 42px; height: 42px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); color: var(--color-accent-text-dark);
}
.trust__icon svg { width: 20px; height: 20px; }
.trust__item h3 {
  margin-top: 18px; font-family: var(--font-display);
  font-size: 20px; font-weight: 700; color: #fff;
}
.trust__item p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--color-dark-text-soft); }
.trust__note {
  margin-top: 34px; text-align: center; font-size: 13.5px;
  color: var(--color-dark-text-soft); max-width: 640px; margin-inline: auto;
}

/* --- Kontaktabschnitt: war vorher im Footer vergraben --- */
.contact-section__inner { max-width: 880px; margin-inline: auto; text-align: center; }
.contact-section__heading {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1; color: #fff;
}
.contact-section__text { margin-top: 14px; font-size: 17px; color: var(--color-dark-text-soft); }
.contact-section .contact-v2__configurator-wrap { margin-top: 40px; text-align: left; }
.contact-section .contact-v2__quickbar { margin-top: 30px; }
/* Ueberschriften der neuen Baender: Groesse und Zentrierung */
.trust__heading,
.stats__heading {
  margin-top: 28px; text-align: center;
  font-size: clamp(28px, 4vw, 46px); line-height: 1.1;
  max-width: 760px; margin-inline: auto; color: #fff;
}

/* Touch-Zielgroesse: mindestens 44px, sonst ist die Nummer am Handy schwer zu treffen. */
.site-header__phone { min-height: 44px; box-sizing: border-box; }
.site-header__whatsapp { width: 44px; height: 44px; }

/* ==========================================================================
   Umbau 2026-08 (III) — auf die Zielgruppe gerechnet.
   Malermeister zwischen 40 und 60. Alterssichtigkeit ist in dieser Gruppe
   die Regel, nicht die Ausnahme: groessere Grundschrift, mehr Zeilenabstand,
   das lange Kaufmotiv nicht mehr in weisser Schrift auf Anthrazit.
   Rot bekommt genau eine Bedeutung: hier kann man klicken.
   ========================================================================== */

/* --- 1. Lesbarkeit: Grundschrift 16 -> 17px, Zeilen luftiger --- */
body { font-size: 17px; line-height: 1.6; }

.hero-direct__lead        { font-size: 18px; line-height: 1.6; }
.hero-direct__bullets li  { font-size: 15.5px; }
.mitarbeiter__punkt strong     { font-size: 18px; }
.mitarbeiter__punkt-text       { font-size: 16.5px; line-height: 1.6; }
.why-us__satz p           { font-size: 16.5px; line-height: 1.65; }
.why-us__list li          { font-size: 16px; line-height: 1.5; }
.process-v2__schritt p    { font-size: 16.5px; line-height: 1.6; }
.pricing-v2__plan-tag     { font-size: 16.5px; line-height: 1.55; max-width: 34ch; }
.pricing-v2__features li  { font-size: 16.5px; }
.pricing-v2__laufend-text { font-size: 16.5px; line-height: 1.6; }
.pricing-v2__note         { font-size: 13.5px; line-height: 1.5; }
.about-v2__body           { font-size: 17px; line-height: 1.7; }
.about-v2__caption        { font-size: 14px; }
.faq-v2__contact-text     { font-size: 16.5px; }
.faq-item__panel-inner    { font-size: 17.5px; line-height: 1.7; }

/* --- 2. Rot nur fuer Klickbares ---------------------------------------
   Vorher war Terrakotta Button, Icon, Label und Haken zugleich. Damit
   verliert der Button seine Signalwirkung. Buttons und Textlinks bleiben
   rot, alles Dekorative geht auf Anthrazit, alle Haken auf Gruen. */
.mitarbeiter__label,
.manifest__label { color: rgba(42, 39, 36, 0.62); }
.band--dark .manifest__label { color: rgba(255, 255, 255, 0.66); }

/* Ein Haken, eine Farbe. Vorher waren die Haken im Hero rot und die in
   den Einwandkarten gruen — auf derselben Seite. */
.hero-direct__bullets svg,
.mitarbeiter__punkt > svg { background: var(--color-status-ok); color: #fff; }
.why-us__list svg,
.pricing-v2__features svg { color: var(--color-status-ok); }
/* --- 3. Mitarbeiter-Band auf Kalkweiss --------------------------------
   Der Abschnitt ist der laengste Fliesstext der Seite. Heller Text auf
   Anthrazit ist genau das, was Augen ab 40 am meisten anstrengt. */
.mitarbeiter.band--light .mitarbeiter__intro { color: var(--color-text-soft); }
.mitarbeiter.band--light .mitarbeiter__punkt strong { color: var(--color-text); }
.mitarbeiter.band--light .mitarbeiter__punkt-text { color: var(--color-text-soft); }

/* --- 4. Einwaende: Ueberschrift beginnt den Satz ---------------------- */
.why-us__heading {
  font-family: var(--font-display); font-size: clamp(28px, 4vw, 46px);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.005em;
  max-width: 760px;
}
.why-us__link { margin-top: 20px; }

/* --- 5. Preise: der Ratenaufschlag steht an der Karte -----------------
   Ein Aufschlag, der sich erst beim Nachrechnen zeigt, kostet genau das
   Vertrauen, das dieses Angebot verkauft. Also steht er da. Das Skonto
   ist aus dem Angebot heraus, entsprechend auch aus der Karte. */
.pricing-v2__subline {
  margin: 14px 0 0; max-width: 60ch;
  font-size: 17px; line-height: 1.6; color: var(--color-text-soft);
}
.pricing-v2__rate { margin-top: 8px; font-size: 14.5px; font-weight: 500; line-height: 1.45; }

/* --- 6. Person und Zusagen in einem Abschnitt -------------------------
   Vorher standen "Zufriedenheitsgarantie" und "fester Ansprechpartner"
   in zwei Baendern direkt hintereinander. Jetzt einmal, neben dem Gesicht. */
.about-v2__zusagen {
  margin-top: 40px; padding-top: 30px;
  border-top: 1px solid var(--color-border);
}
.about-v2__zusagen-titel {
  font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.25;
}
.about-v2__zusagen-liste { margin-top: 22px; display: flex; flex-direction: column; gap: 18px; }
.about-v2__zusagen-liste strong { display: block; font-size: 17px; font-weight: 700; line-height: 1.35; }
.about-v2__zusagen-text { display: block; margin-top: 5px; font-size: 16px; line-height: 1.6; color: var(--color-text-soft); }
.about-v2__zusagen-note { margin-top: 26px; font-size: 14.5px; line-height: 1.55; color: var(--color-text-soft); }

/* --- 7. Telefonnummer bleibt am Handy lesbar --------------------------
   Ein blosses Hoerer-Symbol ist kein Vertrauenssignal. Eine ausgeschriebene
   Berliner Festnetznummer schon. Unter 480px weicht dafuer das WhatsApp-
   Symbol im Kopf — unten steht es ohnehin in der festen Leiste. */
@media (min-width: 480px) { .site-header__phone span { display: inline; } }
@media (max-width: 479.98px) {
  .site-header__phone span { display: inline; }
  .site-header__phone { padding: 8px 12px; font-size: 14px; gap: 6px; }
  .site-header__whatsapp { display: none; }
}

/* --- 8. Feste Anrufleiste am Handy -----------------------------------
   Die Seite ist lang. Wer auf halber Hoehe ueberzeugt ist, soll nicht erst
   nach oben scrollen muessen, um die Nummer zu finden. */
.rufleiste { display: none; }
@media (max-width: 809.98px) {
  .rufleiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(244, 238, 228, 0.95);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -8px 24px -16px rgba(42, 39, 36, 0.5);
  }
  .rufleiste__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px; box-sizing: border-box;
    border-radius: var(--radius-pill);
    font-weight: 700; font-size: 16px;
  }
  .rufleiste__btn svg { width: 19px; height: 19px; flex-shrink: 0; }
  .rufleiste__btn--tel { background: var(--color-accent-btn); color: #fff; }
  .rufleiste__btn--wa  { background: #146237; color: #fff; }

  /* Die Leiste darf den Footer nicht abschneiden. */
  body { padding-bottom: 80px; }
  .mobile-nav { padding-bottom: 96px; }
}
/* Bei geoeffnetem Menue tritt die Leiste zurueck. */
.mobile-nav.is-open ~ .rufleiste { display: none; }

/* --- 9. Gliederung ohne dunkle Baender -------------------------------
   Die beiden Anthrazit-Baender haben die Seite frueher in Kapitel geteilt.
   Ohne sie lagen sechs Abschnitte in identischem Kalkweiss hintereinander.
   Neuer Wechsel: Abschnitte ohne Karten stehen auf Weiss, Abschnitte mit
   weissen Karten bleiben auf Kalkweiss, damit die Karten sich abheben. */
.mitarbeiter.band--light,
.about-v2.band--light { background: var(--color-surface); }

/* Der Ablauf lag im selben Kalkweiss wie die Einwaende darueber - zwei
   gleiche Flaechen hintereinander, dazwischen nur eine Haarlinie. Auf Weiss
   ist er als eigenes Kapitel erkennbar, und der Wechsel laeuft ab hier
   durchgehend: weiss, kalkweiss, weiss, kalkweiss. */
.process-v2.band--white { background: var(--color-surface); }

/* Der weisse Passepartout wird auf Weiss unsichtbar — auf Kalkweiss umstellen. */
.about-v2.band--light .about-v2__frame { border-color: var(--color-bg); }

/* Keine Haarlinien mehr an den Kapitelgrenzen: ueberall dort, wo ein
   Abschnitt endet, wechselt jetzt ohnehin die Flaeche. Eine Linie genau auf
   dem Farbwechsel sieht aus wie ein Versehen. */

/* --- 10. Hero: alles Entscheidende im ersten Bildschirm ---------------
   Die Ueberschrift lief mit 79px statt der vorgesehenen 46px und mit
   Gewicht 500 statt 700: `.hero h1` aus dem alten Hero-Entwurf (0,1,1)
   schlaegt `.hero-direct__headline` (0,1,0) in der Spezifitaet. Ergebnis
   waren fuenf Zeilen Ueberschrift, die den Handlungsaufruf auf 1280x900
   bis 873px hinuntergedrueckt haben — also unter die Falz. Hier gewinnt
   die gewollte Groesse per Klassenkombination zurueck. */
.hero--direct .hero-direct__headline {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-top: 12px;
}

/* Der Hero sitzt hoeher und dichter: weniger Vorlauf ueber dem Label,
   engere Abstaende zwischen den Bloecken. Maszstab ist der 1366x768-
   Laptop, also rund 660px sichtbare Hoehe — dort muss die Zeile mit der
   Telefonnummer noch ueber der Kante liegen, nicht nur die Buttons. */
.hero--direct { padding-top: clamp(18px, 2vw, 26px); }
.hero--direct .hero-direct__lead    { margin-top: 10px; }
.hero--direct .hero-direct__bullets { margin-top: 14px; }
.hero--direct .hero-direct__actions { margin-top: 16px; row-gap: 12px; }

@media (max-width: 809.98px) {
  /* Die Telefonnummer steht am Handy dauerhaft in der festen Leiste unten.
     Ein dritter Button im Hero kostet nur 60px und sagt dasselbe. */
  .hero-direct__phone { display: none; }
  .hero-direct__grid { gap: 32px; }
}

/* Auf flachen Bildschirmen (1366x768-Laptop: rund 660px sichtbar) passt die
   Telefonzeile nur noch mit drei Pixeln Rest ueber die Kante — zu knapp, das
   kippt bei jeder abweichenden Schriftmetrik. Dort faellt die Zeile weg: die
   Nummer steht ohnehin dauerhaft im klebenden Kopfbereich. */
@media (min-width: 810px) and (max-height: 730px) {
  .hero-direct__phone { display: none; }
}

/* --- 12. Mitarbeiter: der Weg zeichnet sich beim Scrollen mit --------
   Vorher erschienen alle vier Punkte gemeinsam als Block. Jetzt laeuft
   eine Linie durch die vier Stationen, die sich beim Herunterscrollen
   fuellt; jede Station springt auf Gruen, sobald der Leser sie erreicht,
   und ihr Text schiebt sich von links herein. Der Besucher legt die
   Strecke selbst zurueck, statt eine fertige Liste vorgesetzt zu bekommen.

   Wichtig: ohne JavaScript fehlt die Klasse .js-reise, dann steht hier der
   fertige Weg mit vier gruenen Stationen. Nichts bleibt unsichtbar. */
.mitarbeiter__reise { position: relative; }
/* Der Abstand zwischen den Karten ist die Geschwindigkeit der Reise:
   Die Linie wird ueber diese Hoehe abgescrollt, also bestimmt der Abstand,
   wie viel Weg zwischen zwei Stationen liegt. 30px waren zu hastig — alle
   vier waren in gut einer Radumdrehung durch. Seit die Bausteine als
   Karten stehen, bringt die Karte selbst schon Hoehe mit. */
.mitarbeiter__reise .mitarbeiter__liste { gap: 24px; }
@media (min-width: 900px) { .mitarbeiter__reise .mitarbeiter__liste { gap: 44px; } }

/* Die Linie laeuft genau durch die Mitte der 24px-Haken (links 11px + 2px
   Breite = Mitte bei 12px). JavaScript setzt top und height exakt auf die
   erste und letzte Station; die Werte hier sind der Stand ohne Skript:
   36px ist die Mitte des ersten Hakens (24px Abstand + 12px halbe Hoehe). */
.mitarbeiter__pfad {
  position: absolute;
  left: 11px; top: 36px; bottom: 36px;
  width: 2px; z-index: 0;
  background: rgba(42, 39, 36, 0.14);
  border-radius: 2px;
  overflow: hidden;
}
.mitarbeiter__pfad-fuellung {
  display: block; width: 100%; height: 0;
  background: var(--color-status-ok);
}
.mitarbeiter__reise .mitarbeiter__punkt > svg { position: relative; z-index: 1; }

/* Der Anfangszustand steht direkt im Stylesheet, nicht erst in einer Klasse,
   die JavaScript nachtraegt: sonst blitzen beim Laden vier gruene Haken auf
   und werden erst danach hohl. Ohne JavaScript setzt der noscript-Block in
   front-page.php den fertigen Weg zurueck. */
.mitarbeiter__reise .mitarbeiter__punkt > svg {
  background: var(--color-surface);
  color: rgba(42, 39, 36, 0.22);
  box-shadow: inset 0 0 0 2px rgba(42, 39, 36, 0.15);
  transition: background 300ms var(--ease-ui), color 300ms var(--ease-ui), box-shadow 300ms var(--ease-ui);
}
.mitarbeiter__reise .mitarbeiter__punkt.is-erreicht > svg {
  background: var(--color-status-ok);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(63, 125, 82, 0.16);
}

/* Die Station erscheint als Ganzes, wenn der Weg sie erreicht — nicht schon
   dann, wenn der Block irgendwo am unteren Bildrand auftaucht. Vorher hing
   der Text am Sichtbarkeitsmelder und alle vier Punkte standen auf einen
   Schlag da, waehrend sich die Linie noch fuellte. */
.mitarbeiter__reise .mitarbeiter__punkt {
  opacity: 0.001;
  transform: translateX(-18px);
  transition: opacity 560ms var(--ease-appear), transform 560ms var(--ease-appear);
}
.mitarbeiter__reise .mitarbeiter__punkt.is-erreicht { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mitarbeiter__pfad-fuellung { height: 100% !important; }
  .mitarbeiter__reise .mitarbeiter__punkt {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .mitarbeiter__reise .mitarbeiter__punkt > svg {
    background: var(--color-status-ok) !important;
    color: #fff !important;
    box-shadow: none !important;
    transition: none !important;
  }
}

/* --- 13. Ablauf: sechs Stufen, eine nach der anderen ------------------
   Schritt links, sein Text, Schritt Mitte, dessen Text, Schritt rechts,
   dessen Text. Der Absatz liegt im Fluss und ist nur durchsichtig, damit
   sein Platz von Anfang an steht und beim Erscheinen nichts springt.
   Ohne JavaScript hebt der noscript-Block in front-page.php alles auf. */
/* Der Schritt selbst blendet nicht mehr als Ganzes ein. Vorher war vor dem
   Scrollen nichts zu sehen ausser der Ueberschrift, und die Ziffern hatten
   nie einen Zustand "noch nicht erreicht". Jetzt stehen Schiene und Ziffern
   von Anfang an da - blass - und werden beim Scrollen eingeholt:
   die Ziffer nimmt Farbe an, der gruene Balken faehrt aus, Titel und Text
   schieben sich herein. Die sechs Stufen aus main.js bleiben unveraendert. */
.process-v2__schritt[data-stufe] .process-v2__ziffer {
  color: rgba(42, 39, 36, 0.19);
  transition: color 620ms var(--ease-appear);
}
.process-v2__schritt[data-stufe].is-da .process-v2__ziffer { color: var(--color-text); }

.process-v2__schritt[data-stufe] .process-v2__title {
  opacity: 0.001;
  transform: translateY(12px);
  transition: opacity 560ms var(--ease-appear), transform 560ms var(--ease-appear);
}
.process-v2__schritt[data-stufe].is-da .process-v2__title { opacity: 1; transform: none; }

.process-v2__schritt p[data-stufe] {
  opacity: 0.001;
  transform: translateY(8px);
  transition: opacity 520ms var(--ease-appear), transform 520ms var(--ease-appear);
}
.process-v2__schritt p[data-stufe].is-da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .process-v2__schritt[data-stufe] .process-v2__ziffer { color: var(--color-text); transition: none; }
  .process-v2__schritt[data-stufe] .process-v2__title,
  .process-v2__schritt p[data-stufe] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* --- 13.1 Das passt zu Ihnen: eine Zeile nach der anderen -------------
   Die Zeile ist die Einheit, nicht ihre zwei Haelften: links die Antwort,
   rechts die Belege dazu. Beides erscheint in einer Bewegung, sonst
   liest sich die Liste wie eine eigene Meldung neben dem Text.

   Die Zeile liegt im Fluss und ist nur durchsichtig - ihr Platz steht
   also von Anfang an, es springt beim Erscheinen nichts. Die Haarlinie
   zwischen den Zeilen gehoert zur Zeile und kommt mit ihr; das ist
   richtig so, denn eine Trennlinie zu einer unsichtbaren Zeile trennt
   nichts. Ohne JavaScript hebt der noscript-Block in front-page.php
   alles auf. */
.why-us__zeile[data-zeile] {
  opacity: 0.001;
  transform: translateY(16px);
  transition: opacity 640ms var(--ease-appear), transform 640ms var(--ease-appear);
}
.why-us__zeile[data-zeile].is-da { opacity: 1; transform: none; }

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

/* --- 14. Abschnitt festhalten, waehrend die Stufen erscheinen ---------
   Kein Eingriff in das Scrollen selbst: die Seite scrollt ganz normal
   weiter, der Abschnitt bleibt darin nur stehen (position: sticky), bis
   seine Strecke abgefahren ist. Danach laeuft die Seite weiter. Wer die
   Radbewegung wirklich abfaengt, zerlegt Tastatur, Vorlesesoftware und
   den Schwung auf dem Handy — das waere hier der falsche Preis.

   pin-bahn und pin-halt liegen ohne Wirkung im Markup. Erst wenn
   JavaScript ist-gepinnt setzt — und das tut es nur, wenn der Inhalt
   nachweislich in einen Bildschirm passt — greifen die Regeln hier. */
.pin-bahn { position: relative; }

.ist-gepinnt { padding-block: 0; overflow: visible; }
.ist-gepinnt .pin-halt {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 88px;
  padding-bottom: 32px;
  box-sizing: border-box;
}
.ist-gepinnt .pin-halt > .container { width: 100%; }

/* Waehrend des Festhaltens zaehlt jeder Pixel Hoehe: der Abschnitt muss
   ganz in einen Bildschirm passen, sonst wird oben oder unten etwas
   abgeschnitten. Deshalb hier eine gedrungenere Fassung. */
.ist-gepinnt .mitarbeiter__heading { margin-top: 16px; font-size: clamp(24px, 2.5vw, 34px); }
.ist-gepinnt .mitarbeiter__intro   { margin-top: 12px; max-width: 46ch; }
.ist-gepinnt .mitarbeiter__aktion  { margin-top: 22px; }
.ist-gepinnt .mitarbeiter__reise .mitarbeiter__liste { gap: 24px; }
.ist-gepinnt .mitarbeiter__karte   { padding: 18px clamp(18px, 2vw, 24px); }
/* Die Kartentexte laufen seit dem Inhaltswechsel 08/2026 auf zwei Zeilen -
   vier Karten mal eine Zeile mehr sind gut 100px, und genau um die riss die
   Messung oben: auf einem 900er-Bildschirm mit Lesezeichenleiste haette sich
   der Abschnitt nicht mehr festgehalten. Im gedrungenen Zustand eine halbe
   Stufe kleiner zu setzen holt das zurueck; im normalen Fluss (Handy, flache
   Fenster) bleiben die Texte bei voller Groesse. */
.ist-gepinnt .mitarbeiter__punkt-text { font-size: 15.5px; line-height: 1.5; }
.ist-gepinnt .mitarbeiter__punkt > svg { margin-top: 20px; }
.ist-gepinnt .process-v2__heading  { margin-top: 18px; font-size: clamp(24px, 2.6vw, 34px); }

/* Beim Festhalten zaehlt jeder Pixel: passt der Abschnitt nicht in einen
   Bildschirm, wird er gar nicht erst festgehalten und der Scroll-Effekt
   faellt aus. Deshalb hier eine gedrungenere Fassung der Ziffernzeile. */
.ist-gepinnt .process-v2__ziffer { margin-top: 18px; font-size: clamp(46px, 4.6vw, 64px); }
.ist-gepinnt .process-v2__title  { margin-top: 14px; }/* ==========================================================================
   15. Typografie — eine Sippe, zwei Breiten
   ==========================================================================
   Diese Datei ist die einzige Stelle, an der Typografie festgelegt wird, und
   dieser Abschnitt ist die letzte Schicht darin. Was hier steht, gilt: alles
   weiter oben wird von hier ueberschrieben. Wer eine Groesse aendern will,
   aendert sie hier und nirgends sonst.

   Vorher liefen hier drei Schriften aus drei Gattungen nebeneinander (Zilla
   Slab, Atkinson Hyperlegible, Fragment Mono). Der Unterschied zwischen den
   Ebenen kam aus der Gattung. Das trug, hatte aber einen Preis: drei Familien
   sind drei Downloads, und drei Zeichnungen, die miteinander auskommen
   muessen, ohne je zusammen entworfen worden zu sein.

   Jetzt kommen beide Stimmen aus derselben Sippe:

     Ueberschrift   Barlow Condensed, Gewicht 600. Schmal und hoch. Weil sie
                    wenig Zeile braucht, darf sie gross stehen - 64px belegen
                    hier ungefaehr so viel Breite wie vorher 42px, tragen aber
                    sichtbar mehr Gewicht. Groesse ohne Platzverbrauch, das
                    ist der ganze Grund fuer eine verengte Schrift.
     Erklaerung     Barlow, Gewicht 400. Dieselbe Zeichnung ohne die
                    Verengung. Ueberschrift und Text gehoeren damit sichtbar
                    zusammen, ohne gleich auszusehen - der Unterschied kommt
                    aus der Breite, nicht aus einer fremden Gattung.
     Beschriftung   Barlow, Gewicht 600, versal und weit gesperrt. Hier muss
                    die Kennzeichnung aus der Behandlung kommen, weil keine
                    dritte Familie mehr da ist, die sie uebernimmt.

   Gewichte: 600 fuer Ueberschriften und alles Betonte, 500 fuer Navigation
   und Telefonnummern, 400 fuer Fliesstext. 700 steht an genau zwei Stellen -
   Preiszahlen und Ablaufziffern. Dort geht es um einzelne Zeichen, die aus
   der Entfernung lesbar sein muessen, nicht um Saetze.
   ========================================================================== */

/* Die alte Zwischenskala aus dem Umbau 08/2026 wird hier abgeloest.
   --fs-h3 steht in dieser Datei an drei Stellen (Zeile 66, 1873 und hier);
   es gilt die letzte. Der Wert ist mit dem oben deshalb gleichgezogen, damit
   niemand beim Lesen der ersten Definition eine falsche Zahl mitnimmt. */
:root {
  --fs-h3: clamp(24px, 2vw, 28px);
  --fs-h4: 19px;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
}

/* --- Beschriftungen: Barlow, versal, gesperrt -------------------------
   Bisher trugen diese Zeilen Fragment Mono und hoben sich ueber die Gattung
   ab - eine Schreibmaschinenschrift neben einer Serifenschrift neben einer
   Grotesk. Mit nur noch zwei Familien faellt dieser Unterschied weg, also
   muss er woanders herkommen: aus Versalien, weiter Sperrung und Gewicht.
   Das ist der aeltere und ruhigere Weg, ein Label als Label zu kennzeichnen.

   Gewicht 600 statt 400: gesperrte Versalien in kleiner Groesse wirken
   duenn, weil zwischen den Buchstaben mehr Weiss steht als in ihnen. */
.mitarbeiter__label,
.manifest__label {
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
}
/* Das Paket-Label sitzt auf der Preiskarte und hat dort weniger Platz -
   deshalb 12px und etwas enger gesperrt als die Kapitel-Label. */
.pricing-v2__badge {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Die Bildunterschrift ist kein Label, sondern Kleingedrucktes: sie nennt
   Name, Alter und Ort. Also normal gesetzt, nicht versal. */
.about-v2__caption {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* --- Ueberschriften: Barlow Condensed ---------------------------------
   Durchgehend Gewicht 600, nicht 700. In einer verengten Schrift schliessen
   die Buchstaben ohnehin dicht auf; das schwerere Gewicht macht daraus bei
   diesen Groessen einen Block, in dem die Innenraeume zulaufen. 700 bleibt
   den Preiszahlen und den Ablaufziffern vorbehalten, wo es um Einzelzeichen
   geht und nicht um ganze Saetze.

   Und keine Versalien: eine Condensed in Grossbuchstaben liest sich wie eine
   Warntafel. Die Ueberschriften hier sind Saetze, keine Schilder. */
.hero--direct .hero-direct__headline {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  /* 1.02 ist knapp unter der Schriftgroesse. Bei einer Condensed geht das
     auf, weil die Oberlaengen schmal sind und wenig ineinanderlaufen; bei
     der breiten Vorgaengerin haetten sich hier die Zeilen beruehrt. */
  line-height: 1.02;
  letter-spacing: -0.005em;
}

.mitarbeiter__heading,
.why-us__heading,
.work-v2__heading,
.process-v2__heading,
.about-v2__heading,
.pricing-v2__heading,
.faq-v2__heading,
.trust__heading,
.contact-section__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.005em;
}

.process-v2__title,
.work-v2__meta h3,
.pricing-v2__plan-name,
.pricing-v2__laufend-titel,
.about-v2__zusagen-titel,
.faq-v2__contact-kicker,
.trust__item h3,
.why-us__satz h3,
.faq-item summary {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

/* Stationen und Zusagen stehen mitten im Fliesstext und leiten einen Absatz
   ein - sie gehoeren zur Textstimme, nicht zur Ueberschriftenstimme. Deshalb
   Barlow statt Barlow Condensed: eine verengte Schrift mitten in einem Satz
   liest sich wie ein Fremdkoerper. Gewicht 600 statt 700, weil 700 hier neben
   dem Fliesstext danebensteht wie ein Ausruf. */
.mitarbeiter__punkt strong,
.about-v2__zusagen-liste strong {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: 0;
}

/* Jede andere Fettung im Fliesstext ebenfalls auf 600. Der Browser setzt
   <strong> und <b> von sich aus auf 700; in Barlow ist das ein sichtbarer
   Sprung, waehrend 600 sich als Betonung liest statt als Anschreien. */
strong,
b {
  font-weight: 600;
}

/* --- Preise: die einzige Stelle, an der 700 steht --------------------
   Der Preis ist die Zahl, wegen der die Seite ueberhaupt gelesen wird. Er
   darf deshalb schwerer und deutlich groesser stehen als jede Ueberschrift
   in seiner Naehe - in einer Condensed geht das, ohne die Karte zu sprengen.

   tabular-nums, weil drei Karten nebeneinanderstehen: mit proportionalen
   Ziffern haetten 1.490, 2.490 und 4.490 unterschiedliche Breiten, und die
   Waehrungszeichen daneben staenden nicht auf einer Linie. Beim Vergleichen
   von Preisen faellt genau das auf. */
.pricing-v2__amount {
  font-family: var(--font-display);
  font-size: clamp(42px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.pricing-v2__currency {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
}
/* "einmalig", der Vorsatz "ab" und die Ratenzeile begleiten den Preis, sie
   sind nicht der Preis. Also Textstimme, klein und gedaempft - die Farbe
   steht schon richtig und bleibt unangetastet. */
.pricing-v2__period,
.pricing-v2__prefix,
.pricing-v2__rate {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}
.pricing-v2__laufend-preis { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.site-logo { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }
/* Das Zitat im Ueber-mich-Abschnitt stand auf der Anzeigeschrift mit Gewicht
   400. Barlow Condensed gibt es hier nur in 600 und 700 - der Browser haette
   das fehlende Gewicht kuenstlich duenn gerechnet, was Kanten ausfranst.
   Ein Zitat ist ohnehin gesprochener Text und gehoert zur Textstimme. */
.about-v2__intro {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.45;
  letter-spacing: 0;
}

/* --- Erklaerungen: Barlow, mit Luft und begrenzter Zeilenlaenge --------
   46 Zeichen je Zeile statt bisher 62. Das ist eng, und es ist Absicht: die
   Zeilenhoehe steht auf 1.6, und je laenger die Zeile, desto haeufiger findet
   das Auge beim Ruecksprung die falsche. 46 Zeichen sind rund zwei Handbreit
   Text - man liest sie, ohne den Kopf zu bewegen.

   ch bezieht sich auf die Breite der Ziffer Null der jeweiligen Schrift. Barlow
   baut schmaler als die Vorgaengerin, dieselbe Zahl ergibt hier also weniger
   Pixel - der Wert ist nicht einfach von der alten Fassung uebernommen. */
.hero-direct__lead { font-size: var(--fs-lead); line-height: 1.6; max-width: 46ch; }
.mitarbeiter__intro,
.pricing-v2__subline { font-size: var(--fs-lead); line-height: 1.6; max-width: 46ch; }
.why-us__satz p,
.process-v2__schritt p,
.about-v2__body,
.faq-item__panel-inner,
.mitarbeiter__punkt-text,
.about-v2__zusagen-text { font-size: 17px; line-height: 1.6; max-width: 46ch; }
/* Aufzaehlungen sind keine Absaetze: sie werden ueberflogen, nicht gelesen.
   Eine Stufe kleiner und enger gesetzt macht sichtbar, dass hier Belege
   stehen und keine Erklaerung. */
.pricing-v2__features li,
.why-us__list li,
.hero-direct__bullets li { font-size: 15px; line-height: 1.5; font-weight: 400; }

/* Das Kleingedruckte steht in derselben Groesse wie die Ratenzeile und die
   Bildunterschrift - alles, was eine Einschraenkung nennt, sieht gleich aus.
   Kleiner als 13px wird es nicht: was nicht gelesen werden kann, kann auch
   nicht zugesagt worden sein. */
.pricing-v2__note { font-size: 13px; line-height: 1.45; font-weight: 400; }
.pricing-v2__plan-tag { font-size: 16px; line-height: 1.6; }

/* --- Bedienelemente ---------------------------------------------------
   Buttons und Navigation trennen sich jetzt im Gewicht: der Knopf ist eine
   Aufforderung und traegt 600, die Navigation ist ein Angebot und traegt 500.
   Vorher standen beide auf 700, weil Atkinson Hyperlegible keine
   Zwischengewichte hatte und alles darunter auf 400 zurueckgefallen waere.
   Barlow hat 500 und 600, also kann der Unterschied wieder gemacht werden. */
/* .mobile-nav .btn steht mit im Selektor, weil .mobile-nav a die Menuepunkte
   auf 28px setzt und in der Spezifitaet ueber .btn liegt. Der Knopf am Ende
   des Handy-Menues lief dadurch schon vorher als 28px-Menuepunkt mit - er sah
   aus wie ein weiterer Eintrag der Liste, obwohl er der Abschluss ist. */
.btn,
.mobile-nav .btn,
.site-header__cta,
.text-link {
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Der Kopf-Knopf hat weniger Platz als die im Fliesstext. */
.site-header__cta { font-size: 14.5px; }
/* Das :not(.btn) ist noetig, nicht huebsch: in der Handy-Navigation steht
   unten ein Knopf, und .mobile-nav a schlaegt .btn in der Spezifitaet. Ohne
   den Ausschluss traegt genau der Knopf, der dort etwas ausloesen soll, das
   Gewicht eines Menuepunkts. */
.primary-nav a,
.mobile-nav a:not(.btn) {
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}
.hero-direct__bullets li,
.contact-v2__quick-label { font-weight: 500; }

/* Telefonnummern mit Ziffern gleicher Dickte: sonst wandert die Nummer im
   Kopf beim Umschalten zwischen Seiten um ein paar Pixel, weil die 1 schmaler
   baut als die 0. Faellt nur auf, wenn man es einmal gesehen hat. */
.site-header__phone,
.rufleiste__btn,
.hero-direct__phone,
.contact-v2__quick-phone,
.contact-v2__quick-value,
.site-footer a[href^="tel:"] {
  font-family: var(--font-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* --- Mehr Luft, damit der rote Faden Platz zum Atmen hat --------------- */
.band { padding-block: clamp(76px, 10vw, 152px); }

/* Nur die Mitarbeiter-Ueberschrift folgt noch auf ein Kapitel-Label. */
.mitarbeiter__heading { margin-top: 24px; }

.mitarbeiter__intro { margin-top: 20px; }
/* Kein margin-top mehr am Mitarbeiter-Raster: Kapitel, Ueberschrift und
   Einleitung stehen jetzt in dessen linker Spalte, es ist also selbst der
   Anfang des Abschnitts. Die 68px waren tote Hoehe — und Hoehe entscheidet
   hier darueber, ob der Abschnitt festgehalten werden kann. */
.why-us__zeilen     { margin-top: clamp(44px, 5.5vw, 64px); }
.process-v2__row    { margin-top: clamp(44px, 5.5vw, 64px); }
.pricing-v2__cards  { margin-top: clamp(40px, 5vw, 60px); }
.about-v2__grid     { margin-top: clamp(48px, 6vw, 80px); }
.pricing-v2__subline { margin-top: 20px; }

/* Am Handy ist der Kopf zu eng fuer die breitere Wortmarke. */
@media (max-width: 479.98px) {
  .site-logo { font-size: 18px; }
}

/* Zeilenhoehe 1.7 ist fuer Fliesstext richtig und fuer alles falsch, was
   aus einer einzigen Zeile besteht: die Preiszahl stand sonst in einer
   61px hohen Zeile und schwamm in ihrer eigenen Karte. */
.pricing-v2__price { line-height: 1.05; }
/* Die Zahl selbst steht auf 1: sie ist eine einzige Zeile, und jeder
   Zehntelpunkt darueber ist Luft, in der sie in ihrer Karte schwimmt. */
.pricing-v2__amount { line-height: 1; }
.pricing-v2__currency,
.pricing-v2__period,
.pricing-v2__prefix { line-height: 1.05; }
.pricing-v2__laufend-kopf { line-height: 1.2; }

.site-footer__col h4 {
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
}
.site-footer__col ul a,
.site-footer__col--brand p { font-size: 15.5px; line-height: 1.6; }

/* --- 11. Kopfbereich am Handy niedriger ------------------------------
   Seit die Nummer auch bei 375px ausgeschrieben steht, war es im Kopf zu
   eng: die Wortmarke brach auf zwei Zeilen um und machte den Kopf 96px
   hoch statt 76px — 20px, die dem Hero oben fehlten. Nummer und Logo
   etwas kleiner, engere Spalten, und die Wortmarke bricht nie um. */
.site-logo { white-space: nowrap; line-height: 1.2; }

@media (max-width: 809.98px) {
  .site-header__inner { padding-block: 12px; }
}
@media (max-width: 479.98px) {
  .site-header__inner { gap: 12px; }
  .site-logo { font-size: 19px; }
  .site-header__phone { padding: 8px 10px; font-size: 13.5px; }
}

/* --- Fuer wen wir bauen: Raster ohne Kapitelkopf -----------------------
   Kapitelzeile und Ueberschrift sind aus dem Abschnitt heraus. Der Abstand
   darueber gehoerte ihnen: ohne sie beginnt das Raster direkt unter dem
   Bandabstand, sonst klafft oben eine leere Zeile Hoehe. *
/* --- Allgemeines Kontaktformular am Seitenende -------------------------
   Platzhalter fuer den ausgebauten Konfigurator: ein schlichtes Formular
   mit sichtbaren Beschriftungen statt Platzhaltertexten. Bewusst
   schmucklos, wird spaeter ueberarbeitet. */
.kontaktformular-wrap {
  margin: 40px auto 0;
  max-width: 560px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-card);
  padding: clamp(28px, 4vw, 40px);
  text-align: left;
}
.kontaktformular { display: flex; flex-direction: column; gap: 18px; }
.kontaktformular__feld { display: flex; flex-direction: column; gap: 7px; }
.kontaktformular__feld label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}
.kontaktformular__feld input,
.kontaktformular__feld textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-dark-border);
  border-radius: 10px;
  padding: 12px 14px;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
}
.kontaktformular__feld textarea { resize: vertical; min-height: 120px; }
.kontaktformular__feld input:focus-visible,
.kontaktformular__feld textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.kontaktformular__submit { align-self: flex-start; }
.kontaktformular__privacy {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-dark-text-soft);
}
.kontaktformular__privacy a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* Honigtopf: fuer Menschen unsichtbar, fuer Skripte ausfuellbar. */
.kontaktformular__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 809.98px) {
  /* 16px verhindert, dass iOS beim Antippen ins Feld hineinzoomt. */
  .kontaktformular__feld input,
  .kontaktformular__feld textarea { font-size: 16px; }
  .kontaktformular__submit { align-self: stretch; justify-content: center; }
}

/* ==========================================================================
   Handy: Kopfbereich und Preise
   ==========================================================================
   Zwei Stellen, an denen die Seite am Handy ihr eigenes Versprechen gebrochen
   hat. Im Kopfbereich stand erst eine Textwand und weit darunter das Foto —
   im ersten Bildschirm war von der Baustelle nichts zu sehen. Und die drei
   Pakete lagen untereinander: rund 4.000px Scrollstrecke, in denen sich
   nichts vergleichen laesst. Wer mobiltaugliche Seiten verkauft, darf das
   ausgerechnet auf dem Handy nicht vorfuehren.
   ========================================================================== */
@media (max-width: 809.98px) {

  /* --- Kopfbereich: erst das Bild, dann die Botschaft -------------------- */
  .hero.hero--direct { padding-top: 0; }

  /* minmax(0, 1fr) statt 1fr: eine 1fr-Spalte darf nicht schmaler werden als
     ihr breitester Inhalt. Der dritte Stichpunkt steht auf white-space:nowrap
     und ist am Handy 375px breit — damit hat er die Spalte auf 375px
     aufgezogen, obwohl in den Container nur 335px passen. Folge: der
     komplette Kopftext stand 20px zu weit rechts und lief unter dem
     rechten Rand hinaus, wo `overflow-x: clip` am Body ihn abgeschnitten
     hat. Sichtbar war davon nichts — nur der letzte Stichpunkt hoerte
     mitten im Wort auf. */
  .hero-direct__grid { gap: 0; grid-template-columns: minmax(0, 1fr); }

  /* Und der Stichpunkt selbst darf umbrechen. Am Schreibtisch haelt nowrap
     die drei in einer Zeile zusammen, am Handy steht ohnehin jeder fuer
     sich — dort kostet es nur den abgeschnittenen Text. */
  .hero-direct__bullets { flex-direction: column; align-items: flex-start; row-gap: 7px; }
  .hero-direct__bullets li { white-space: normal; }

  /* Randlos statt eingerueckt: mit 14px Radius und Schatten sah das Foto aus
     wie eine Abbildung im Text. Ueber die volle Breite ist es der Einstieg.
     Der negative Rand haengt an --gutter, damit er der Innenkante des
     Containers folgt und nicht an einer festen Zahl klebt. */
  .hero-direct__media {
    order: -1;
    margin-inline: calc(var(--gutter) * -1);
  }
  /* 16:10 statt der 4:3 des Originals: flach genug, dass der Knopf unter dem
     Text im ersten Bildschirm bleibt, hoch genug, dass die Baustelle noch
     eine Baustelle ist und keine Zierleiste. */
  .hero-direct__media .bildflaeche {
    aspect-ratio: 16 / 10;
    border-radius: 0;
    box-shadow: none;
  }
  /* Der Maler mit dem Handy steht rechts, sein Kopf sitzt weit oben: der
     Beschnitt geht deshalb unten weg, nicht mittig — sonst faellt genau das
     Gesicht heraus, das die Seite verkauft. */
  .hero-direct__media .bildflaeche img { object-position: 58% 30%; }

  /* Der Text rueckt unter das Bild und schiebt das Label darueber. Damit
     haengen Foto und Botschaft zusammen, statt aufeinanderzufolgen. */
  .hero-direct__content {
    position: relative;
    z-index: 2;
    margin-top: -19px;
  }
  .hero-direct__label { box-shadow: 0 6px 18px rgba(42, 39, 36, 0.18); }

  /* Enger gesetzt, damit der Knopf im ersten Bildschirm bleibt - aber nicht
     mehr so klein wie zuvor. Barlow Condensed bringt bei gleicher Zeilenzahl
     deutlich mehr Groesse unter als die breite Vorgaengerin: 33px hier
     belegen die Zeile ungefaehr so weit wie vorher 27px. Die Marke ist die
     Zeilenzahl der Ueberschrift bei 375px, nicht die Zahl im Stylesheet.
     Der Fliesstext bleibt bei 16px - darunter liest sich am Handy nichts
     mehr angenehm, und Barlow baut kleiner als Atkinson Hyperlegible. */
  .hero--direct .hero-direct__headline { font-size: clamp(30px, 8.8vw, 38px); line-height: 1.06; margin-top: 15px; }
  .hero--direct .hero-direct__lead     { font-size: 16px; line-height: 1.55; margin-top: 10px; }
  .hero--direct .hero-direct__bullets  { margin-top: 13px; row-gap: 6px; }
  .hero--direct .hero-direct__actions  { margin-top: 17px; }
  /* Ein Knopf ueber die volle Breite trifft man mit dem Daumen. */
  .hero-direct__actions .btn { flex: 1 1 100%; justify-content: center; }

  /* --- Preise: drei Karten nebeneinander, zum Wischen -------------------- */
  .pricing-v2__cards {
    display: flex;
    grid-template-columns: none;
    max-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 6px var(--gutter) 22px;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pricing-v2__cards::-webkit-scrollbar { display: none; }
  /* 82% laesst die naechste Karte sichtbar hereinragen — das ist der
     Hinweis, dass hier gewischt wird. Ein Punkt darunter allein reicht
     nicht, eine angeschnittene Karte versteht jeder sofort. */
  .pricing-v2__card {
    flex: 0 0 82%;
    max-width: 330px;
    scroll-snap-align: start;
  }

  /* Enger gesetzt: sonst ist jede Karte mehr als doppelt so hoch wie der
     Schirm, und aus dem Wischen wird wieder Scrollen. */
  .pricing-v2__features { margin-top: 22px; gap: 11px; }
  .pricing-v2__features li { font-size: 15px; }
  .pricing-v2__feature--basis { padding-bottom: 10px; }

  .pricing-v2__punkte {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 2px;
  }
  /* Der Knopf ist 28x30px gross, zu sehen sind davon 8px. Ein Punkt in
     Daumengroesse saehe albern aus, ein 8px grosser Knopf trifft niemand —
     also traegt der Knopf die Flaeche und ::before den Punkt. */
  .pricing-v2__punkt {
    width: 28px;
    height: 30px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
  }
  .pricing-v2__punkt::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(42, 39, 36, 0.24);
    transition: width 0.2s ease, background-color 0.2s ease;
  }
  .pricing-v2__punkt.ist-aktiv::before {
    width: 22px;
    border-radius: 4px;
    background: var(--color-accent);
  }
}

/* Ab dem Schreibtisch gibt es nichts zu wischen — dort stehen die drei
   Pakete nebeneinander, und die Punkte waeren eine Bedienung ins Leere. */
@media (min-width: 810px) {
  .pricing-v2__punkte { display: none; }
}

/* --- Kopfbereich im Tabletbereich ---------------------------------------
   Zwischen 810px und dem Schreibtisch steht der Kopf schon in seiner vollen
   Fassung: Logo, Navigation, Knopf, Telefonnummer und WhatsApp. Zusammen
   brauchen die rund 940px — auf einem iPad im Hochformat (820px) sind es
   gut 130px zu viel. Sichtbar war der Fehler nicht, weil `overflow-x: clip`
   am Body den Ueberhang abschneidet: die Telefonnummer war angeschnitten
   und der WhatsApp-Knopf ganz weg, also ausgerechnet die beiden Wege, ueber
   die hier jemand Kontakt aufnimmt.

   Der Knopf weicht, nicht die Nummer: derselbe Knopf steht wenige Zentimeter
   tiefer noch einmal im Kopfbereich der Seite, die Nummer nicht. */
@media (min-width: 810px) and (max-width: 1023.98px) {
  .site-header__cta { display: none; }
}

/* ==========================================================================
   16. Vier Stellen, an denen die Seite zu leise war
   ==========================================================================
   Die Einwaende standen offen zwischen Haarlinien, der Ablauf war Anthrazit
   auf Weiss, der Kasten mit den laufenden Kosten so breit wie die drei
   Pakete darueber, und zwischen Formular und Fussbereich klaffte ein
   Vierteljahrhundert Leere. Vier Eingriffe, jeder mit eigenem Grund.
   ========================================================================== */

/* --- 16.1 Einwaende: zwei Kaesten, die sich gegenseitig nachgeben --------
   Satz und Beleg gehoerten inhaltlich zusammen, sahen aber aus wie zwei
   Absaetze, die zufaellig nebeneinander stehen. Jetzt ist jede Haelfte ein
   eigener Kasten: links die Fortsetzung des Satzes samt Antwort, rechts die
   Belege dazu.

   Zeigt man auf einen der beiden, waechst er und der gegenueberliegende
   gibt im selben Zug etwas nach. Das ist kein Zoom um des Effekts willen,
   sondern eine Waage: man liest den Satz, der Beleg tritt zurueck; man
   prueft den Beleg, der Satz tritt zurueck. Damit ist sichtbar, dass die
   beiden zusammengehoeren, ohne dass ein Wort dafuer noetig waere.

   Die Ausschlaege sind klein - drei Prozent hin, zweieinhalb zurueck.
   Groesser sah es aus, als sprange die Zeile, und beim Lesen verliert man
   dann die Stelle. */
.why-us__zeile {
  padding-block: 0;
  gap: 14px;
  align-items: stretch;
}
.why-us__zeile:first-child { padding-top: 0; }
/* Die Haarlinie hat getrennt, solange nichts eingerahmt war. Zwischen zwei
   Kastenreihen ist sie eine Linie zu viel - der Abstand trennt schon. */
.why-us__zeile + .why-us__zeile { border-top: 0; margin-top: 14px; }
@media (min-width: 810px) {
  .why-us__zeile {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 18px;
  }
}

.why-us__satz,
.why-us__list {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: clamp(22px, 2.6vw, 30px);
  transition:
    transform 420ms var(--ease-ui),
    box-shadow 420ms var(--ease-ui),
    border-color 420ms var(--ease-ui),
    opacity 420ms var(--ease-ui);
}
/* Die Belegliste ist kuerzer als der Satz daneben. Mittig gesetzt steht sie
   nicht als angebrochener Block oben im Kasten. */
.why-us__list { justify-content: center; }
@media (min-width: 810px) {
  /* Hebt die frueher noetige Feinjustierung auf: die Oberkanten richten
     sich jetzt ueber die gleiche Kastenpolsterung aus, nicht ueber 7px. */
  .why-us__list { padding-top: clamp(22px, 2.6vw, 30px); }
}

/* Seit der Textstraffung 08/2026 sind die Beleglisten leer: ihre Punkte
   standen fast wortgleich im Ablauf und in den FAQ. Ohne Liste traegt der
   Satz-Kasten die Zeile allein - volle Breite statt halb leer, und innen
   uebernimmt er die alte Zweiteilung: links die Satz-Fortsetzung, rechts
   die Antwort. Faellt wieder eine Liste ins Feld, greift :only-child nicht
   mehr und alles steht wie vorher. */
.why-us__zeile > .why-us__satz:only-child { grid-column: 1 / -1; }
@media (min-width: 810px) {
  .why-us__zeile > .why-us__satz:only-child {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
  }
  .why-us__zeile > .why-us__satz:only-child p { margin-top: 0; }
}

/* Nur dort, wo wirklich gezeigt wird. Am Handy gibt es kein Gegenueber,
   das nachgeben koennte, und ein haengengebliebener Hover-Zustand nach
   dem Antippen sieht aus wie ein Fehler. */
@media (hover: hover) and (pointer: fine) {
  .why-us__satz:hover,
  .why-us__list:hover {
    transform: scale(1.03);
    border-color: rgba(42, 39, 36, 0.22);
    box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.34);
    z-index: 1;
  }
  .why-us__zeile:has(.why-us__satz:hover) .why-us__list,
  .why-us__zeile:has(.why-us__list:hover) .why-us__satz {
    transform: scale(0.975);
    opacity: 0.86;
  }
}

/* Wer Bewegung abbestellt hat, bekommt trotzdem eine Rueckmeldung - nur
   ueber Rahmen und Schatten statt ueber Groesse. */
@media (prefers-reduced-motion: reduce) {
  .why-us__satz,
  .why-us__list { transition: border-color 420ms var(--ease-ui), box-shadow 420ms var(--ease-ui); }
  .why-us__satz:hover,
  .why-us__list:hover { transform: none; }
  .why-us__zeile:has(.why-us__satz:hover) .why-us__list,
  .why-us__zeile:has(.why-us__list:hover) .why-us__satz { transform: none; opacity: 1; }
}

/* --- 16.2 Ablauf: ein Foto dahinter statt Anthrazit auf Weiss -----------
   Der Abschnitt hatte nach dem Umbau grosse Ziffern, eine Schiene und einen
   gruenen Balken - aber sonst keine Farbe. Zwischen den Einwaenden darueber
   und den Preisen darunter, die beide ebenso ruhig sind, las er sich wie
   eine Zwischenseite.

   Das Bild haengt an .pin-halt und nicht am Abschnitt - aus demselben Grund
   wie beim Kaufmotiv weiter oben: waehrend des Festhaltens ist der Rahmen
   das, was man sieht, der Abschnitt selbst ist ein Vielfaches davon lang.
   Am Abschnitt wuerde das Foto hinter dem stehenden Text vorbeiziehen.

   Kein overflow am Abschnitt: .ist-gepinnt setzt dort ausdruecklich
   overflow: visible, und ein Clip daran nimmt dem sticky darunter die
   Wirkung. Die Maske uebernimmt das Ausblenden.

   Der Ausschnitt liegt links im Bild, auf Fassade und Geruest. Der Mann mit
   dem Handy steht rechts und oben im Hero schon einmal - noch einmal
   dahinter waere eine Wiederholung statt eines zweiten Blickes.

   Das :not(.ist-gepinnt) ist kein Beiwerk, sondern der ganze Punkt: dieses
   position:relative stand blank hier unten und schlug damit das
   position:sticky aus Abschnitt 14 - gleiche Spezifitaet, spaetere Zeile.
   Der Ablauf hat sich also nicht mehr festgehalten, sobald ein Foto
   hinterlegt war: die Schritte zuendeten weiter nach Scrollstrecke, aber
   der Abschnitt fuhr dabei nach oben aus dem Bild. Die letzten beiden
   Schritte erschienen erst, als von ihnen nichts mehr zu sehen war.
   Gebraucht wird das relative nur ungepinnt - gepinnt ist sticky selbst
   schon ein positioniertes Element, das ::before findet seinen Bezug. */
.process-v2--mit-bild:not(.ist-gepinnt) .pin-halt { position: relative; }
.process-v2--mit-bild .pin-halt > .container { position: relative; z-index: 1; }
.process-v2--mit-bild .pin-halt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--prozess-bild);
  background-size: 165%;
  /* Oben links: heller Himmel und weisse Fassade. Dort, wo die Schritttexte
     stehen, bleibt der Grund damit hell genug fuer graue Schrift. */
  background-position: 26% 24%;
  /* Weichgezeichnet, weil im Bild ein Handy mit lesbarem Text vorkommt.
     Scharf streitet der sich mit dem echten Text davor. */
  filter: blur(7px) saturate(0.86);
  opacity: 0.17;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 38%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 38%, #000 100%);
}
@media (min-width: 900px) {
  .process-v2--mit-bild .pin-halt::before {
    background-size: 135%;
    background-position: 22% 28%;
    opacity: 0.20;
  }
}

/* --- 16.3 Laufende Kosten: der Kasten war so breit wie drei Pakete -------
   Er bezieht sich auf die Pakete, ist aber nicht selbst eines. Ueber die
   volle Reihenbreite gesetzt bekam er dasselbe Gewicht wie sie und las sich
   wie ein viertes Angebot. Auf halber Breite steht er als das da, was er
   ist: eine Fussnote zum Preis, die offen bleibt statt im Erstgespraech
   nachgereicht zu werden. */
.pricing-v2__laufend {
  max-width: 640px;
  padding: clamp(16px, 1.9vw, 21px) clamp(18px, 2.1vw, 24px);
}
.pricing-v2__laufend-titel { font-size: 17px; }
.pricing-v2__laufend-preis { font-size: 19px; }
.pricing-v2__laufend-text {
  margin-top: 7px;
  font-size: 14.5px;
  line-height: 1.5;
  max-width: none;
}

/* --- 16.4 Ueber mich: naeher heran, und beim Zeigen noch ein Stueck ------
   Das Foto lag unbeschnitten im Rahmen. Weil Bild und Rahmen beide 4:5
   haben, sass es vollstaendig darin - mitsamt Boden, Decke und dem halben
   Werkstattregal. Worum es geht, der Handschlag und das Gesicht, war
   entsprechend klein.

   scale(1.25) mit dem Ursprung bei 58%/36% schneidet unten den Boden und
   links ein Stueck des Ruecken weg und laesst beides gross stehen: das
   Gesicht rechts oben, den Handschlag in der Mitte. Der Malerkollege bleibt
   angeschnitten im Bild - ohne ihn waere es ein Portraet und kein Termin.

   Beim Zeigen geht es auf 1.34 weiter. Der Rahmen schneidet ohnehin ab
   (overflow: hidden), es waechst also der Inhalt im Rahmen und nicht der
   Rahmen auf der Seite - daneben verrutscht dadurch nichts. */
.about-v2__frame img {
  transform: scale(1.25);
  transform-origin: 58% 36%;
  transition: transform 620ms var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) {
  .about-v2__frame:hover img { transform: scale(1.34); }
}
@media (prefers-reduced-motion: reduce) {
  .about-v2__frame img { transition: none; }
  .about-v2__frame:hover img { transform: scale(1.25); }
}

/* --- 16.5 Unter dem Formular: rund 300px Leere ---------------------------
   Kontaktabschnitt und Fussbereich sind beide dunkel und stossen direkt
   aneinander. Der eine endete mit bis zu 152px Polsterung, der andere
   begann mit ebenso viel, und die Spaltennavigation setzte noch einmal 88px
   Abstand oben drauf. Weil die Flaeche durchgehend dieselbe Farbe hat, war
   davon keine Kante zu sehen - nur ein sehr langer leerer Streifen, in dem
   die Seite zu Ende schien, bevor sie es war.

   Der Abschluss bleibt luftig, aber er hoert auf, eine Wanderung zu sein. */
.contact-section { padding-bottom: clamp(44px, 5vw, 72px); }
.site-footer { padding-top: clamp(40px, 4.5vw, 64px); }
.site-footer__nav { margin-top: 0; }

/* ==========================================================================
   17. Drei Abschnitte, die ihren Platz falsch verteilt haben
   ==========================================================================
   Die Preise waren am Handy nicht zu benutzen, "Das passt zu Ihnen" stand als
   sechs weisse Kaesten auf weissem Band, und im Ueber-uns-Abschnitt lief die
   rechte Spalte rund 900px weiter als die linke. Drei Eingriffe, jeder mit
   eigenem Grund.
   ========================================================================== */

/* --- 17.1 Passt zu Ihnen: dasselbe Foto wie im Ablauf, nur leiser ---------
   Der Abschnitt hatte als einziger im mittleren Drittel gar kein Bild. Statt
   ein fremdes Motiv einzufuehren nimmt er dasselbe Hero-Foto wie der Ablauf,
   nur an anderer Stelle beschnitten: dort die Fassade mit dem Geruest, hier
   die linke Bildhaelfte mit den beiden Malern. Ohne Weichzeichner streitet
   das Handy im Bild mit dem echten Text davor. */
.why-us--mit-bild { position: relative; overflow: hidden; }
.why-us--mit-bild > .container { position: relative; z-index: 1; }
.why-us--mit-bild::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: min(52%, 420px);
  z-index: 0;
  pointer-events: none;
  background-image: var(--passt-bild);
  /* Eng genug, dass die rechte Bildhaelfte gar nicht ins Fenster faellt: dort
     steht der Mann mit dem Handy, der im Kopfbereich schon gross zu sehen ist,
     und als Schemen hinter dem Text sah er aus wie ein Versehen. Bei 200%
     reicht das Fenster nur bis etwa 58% der Bildbreite, also bis zum Geruest. */
  background-size: 200%;
  background-position: 15% 58%;
  filter: blur(5px) saturate(0.8);
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.4) 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.4) 58%, transparent 100%);
}
@media (min-width: 900px) {
  .why-us--mit-bild::before {
    width: min(58%, 820px);
    height: min(88%, 760px);
    background-size: 185%;
    background-position: 13% 60%;
    opacity: 0.26;
    -webkit-mask-image:
      linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.38) 52%, transparent 96%),
      linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.45) 50%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.38) 52%, transparent 96%),
      linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.45) 50%, transparent 100%);
    mask-composite: intersect;
  }
}
/* Die Kaesten liegen jetzt auf einem Bild, nicht mehr auf blankem Weiss.
   Vollflaechig weiss wirkten sie davor wie ausgeschnitten; leicht durch-
   scheinend nehmen sie das Motiv auf, ohne dass der Text darunter leidet. */
.why-us--mit-bild .why-us__satz,
.why-us--mit-bild .why-us__list {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Die Belege standen senkrecht mittig in einem Kasten, der so hoch war wie
   der Satz daneben. Bei drei Punkten und einem Satz von zwei Zeilen waren das
   oben und unten je 40px Leere. Oben ausgerichtet stehen beide Haelften auf
   derselben Linie. */
.why-us__list { justify-content: flex-start; }

/* --- 17.2 Zusagen ueber die volle Breite ---------------------------------
   Sie standen in der rechten Spalte unter dem Fliesstext. Die Fotospalte links
   war nach 560px zu Ende und der Rest blieb leer. Unter beiden Spalten tragen
   sie nebeneinander, und der Abschnitt endet auf beiden Seiten gleichzeitig.
   Die Spaltenzahl muss zur Zahl der Zusagen passen: bei vieren fuellt eine
   Viererreihe die Breite, drei Spalten liessen die zweite Reihe zu zwei
   Dritteln leer. Wer hier Zusagen ergaenzt oder streicht, prueft die Regel
   unten mit. */
.about-v2__zusagen {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(28px, 3vw, 40px);
}
.about-v2__zusagen-liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px 40px;
}
@media (min-width: 620px) {
  .about-v2__zusagen-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1120px) {
  .about-v2__zusagen-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Im Raster begrenzt die Spalte die Zeilenlaenge, die 46ch aus der Typografie
   wuerden hier nur eine zweite, engere Grenze daneben setzen. */
.about-v2__zusagen-liste .about-v2__zusagen-text { max-width: none; }
.about-v2__zusagen-note { max-width: 78ch; }

/* --- 17.3 Preise am Handy ------------------------------------------------
   Die Karten waren mehr als doppelt so hoch wie der Schirm, und von der
   naechsten ragten 50px herein, in denen jede Zeile mitten im Wort abbrach.
   Das sah nach Fehler aus, nicht nach Wischhinweis. Die Texte sind jetzt
   kuerzer; dazu kommt mehr von der naechsten Karte ins Bild und die
   Innenabstaende ruecken zusammen. */
@media (max-width: 809.98px) {
  /* 86% statt 82%: der Anschnitt zeigt jetzt eine erkennbare Kartenkante mit
     Ueberschrift statt eines Streifens abgehackter Buchstaben. */
  .pricing-v2__card {
    flex: 0 0 86%;
    max-width: 340px;
    padding: 24px 22px 26px;
  }
  .pricing-v2__plan-tag { margin-top: 8px; font-size: 15px; }
  .pricing-v2__price { margin-top: 18px; }
  .pricing-v2__cta { margin-top: 18px; }
  .pricing-v2__features { margin-top: 18px; gap: 10px; }
  .pricing-v2__note { margin-top: 18px; }

  /* Die Einleitung stand als neun Zeilen ueber den Karten: ein halber Schirm
     Text, bevor der erste Preis zu sehen war. Enger gesetzt und mit Grenze,
     damit sie eine Einleitung bleibt und keine Vorrede wird. */
  .pricing-v2__subline { font-size: 15.5px; line-height: 1.5; }

  /* Der Kasten mit der laufenden Betreuung stand mit Titel und Preis in einer
     Zeile; bei 390px passte "Laufende Betreuung" plus "89 EUR im Monat" nicht
     nebeneinander und der Preis rutschte an den Titel. */
  .pricing-v2__laufend-kopf { flex-wrap: wrap; row-gap: 4px; }
}

/* ==========================================================================
   18. Preise v3 — Preistafel mit Zahlweise-Umschalter
   --------------------------------------------------------------------------
   Aufbau nach dem Vorbild einer klassischen Preistafel: mittig gesetzter
   Kopf, darunter der Umschalter zwischen Einmalzahlung und Raten, darunter
   drei gleich hohe Karten, die gefuellte in der Mitte.

   Drei Dinge sind gegenueber v2 anders und sollen es bleiben:
   1. Die Ratenzeile steht nicht mehr in jeder Karte, sondern im Umschalter.
      Drei Zeilen "oder 12 x 129 EUR (1.548 EUR gesamt, 58 EUR Aufschlag)"
      waren der laengste Text der Karte und standen ueber dem Knopf.
   2. Das Kleingedruckte steht einmal als Fusszeile statt dreimal an den
      Karten. Dreimal dieselbe Zeile liest niemand.
   3. Der Kopf ist mittig. Bei drei gleichwertigen Spalten hat eine linke
      Ueberschrift keinen Bezugspunkt.

   Die alten .pricing-v2__*-Regeln weiter oben greifen nicht mehr, weil die
   Klassen im Markup nicht mehr vorkommen. Sie stehen bewusst noch da: sie
   liegen ueber zwoelf Kapitel verstreut, und ein Ausbau quer durch die Datei
   waere reines Risiko ohne sichtbaren Gewinn.
   ========================================================================== */
.pricing-v3 { position: relative; overflow: hidden; }

/* --- Kopf ---------------------------------------------------------------- */
.pricing-v3__kopf { max-width: 720px; margin-inline: auto; text-align: center; }
.pricing-v3__label {
  display: block;
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--color-accent-text);
}
.pricing-v3__heading {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.pricing-v3__subline {
  margin: 18px auto 0;
  max-width: 54ch;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--color-text-soft);
}

/* --- Umschalter ----------------------------------------------------------
   Der Hinweis unter dem Umschalter steht in einer Zeile fester Hoehe, sonst
   springen die Karten beim Umschalten um seine Hoehe nach unten. */
.pricing-v3__schalter {
  margin-top: clamp(28px, 3.4vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pricing-v3__schalter-reihe { display: flex; align-items: center; gap: 14px; }
.pricing-v3__wort {
  padding: 6px 2px;
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-soft);
  transition: color var(--dur-ui) var(--ease-ui);
}
.pricing-v3__wort.ist-aktiv { color: var(--color-text); }
.pricing-v3__pille {
  position: relative;
  width: 56px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: rgba(42, 39, 36, 0.22);
  transition: background-color var(--dur-ui) var(--ease-ui);
}
.pricing-v3__pille::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pricing-v3.ist-raten .pricing-v3__pille { background: var(--color-accent-btn); }
.pricing-v3.ist-raten .pricing-v3__pille::after { transform: translateX(26px); }
/* Steht dauerhaft, nicht erst beim Umschalten: der Rabatt der Einmalzahlung
   soll werben, bevor jemand die Raten ueberhaupt anfasst. */
.pricing-v3__schalter-hinweis {
  min-height: 20px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-soft);
}

/* --- Karten -------------------------------------------------------------- */
.pricing-v3__karten {
  margin-top: clamp(36px, 4.4vw, 56px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 620px;
  margin-inline: auto;
  align-items: stretch;
}
@media (min-width: 1080px) {
  .pricing-v3__karten { grid-template-columns: repeat(3, 1fr); max-width: 1120px; gap: 22px; }
}
.pricing-v3__karte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 22px;
  padding: clamp(26px, 2.6vw, 34px) clamp(24px, 2.4vw, 32px) clamp(30px, 3vw, 38px);
  transition: box-shadow var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui);
}
.pricing-v3__karte:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -18px rgba(42, 39, 36, 0.30); }
/* Die gefuellte Karte traegt die Empfehlung. Anthrazit statt eines vierten
   Farbtons: die Seite kennt Kalkweiss, Weiss, Anthrazit und Terrakotta. */
.pricing-v3__karte--voll {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-dark-text);
  box-shadow: 0 30px 64px -28px rgba(26, 29, 31, 0.55);
}
.pricing-v3__karte--voll:hover { box-shadow: 0 34px 70px -26px rgba(26, 29, 31, 0.60); }

/* Die Auszeichnung bekommt eine eigene Zeile, die alle drei Karten haben —
   sonst laufen Paketname und Auszeichnung im Deutschen ineinander. */
.pricing-v3__karte-kopf { display: flex; align-items: center; justify-content: flex-end; min-height: 26px; }
.pricing-v3__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-family: var(--font-text);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Ohne feste Zeilenhoehe erbt die Auszeichnung die 1.65 des Fliesstextes,
     wird 29px hoch und schiebt den Preis der mittleren Karte 3px unter die
     beiden anderen. Drei Preise, die sich vergleichen lassen sollen, muessen
     auf einer Linie stehen. */
  line-height: 1;
}
.pricing-v3__badge svg { width: 10px; height: 10px; flex-shrink: 0; }

.pricing-v3__paket {
  display: block;
  margin-top: 12px;
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--color-text-soft);
}
.pricing-v3__karte--voll .pricing-v3__paket { color: rgba(255, 255, 255, 0.66); }
.pricing-v3__paket-text {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--color-text-soft);
}
.pricing-v3__karte--voll .pricing-v3__paket-text { color: rgba(255, 255, 255, 0.72); }
/* Drei Karten, drei verschieden lange Kurzbeschreibungen: ohne Mindesthoehe
   stehen die drei Preise auf drei verschiedenen Hoehen und lassen sich nicht
   mehr vergleichen. Das ist der einzige Zweck der Zahl — sie entspricht drei
   Zeilen, die laengste Kurzbeschreibung braucht so viele. Am Handy liegen die
   Karten in einer Wischreihe nebeneinander, dort gilt dasselbe. */
.pricing-v3__paket-text { min-height: 72px; }
@media (min-width: 1080px) {
  .pricing-v3__paket-text { min-height: 74px; }
}

/* --- Preis ---------------------------------------------------------------
   Beide Zahlweisen liegen im selben Rasterfeld uebereinander. Die inaktive
   ist unsichtbar, belegt aber ihren Platz: so springt beim Umschalten nichts,
   und visibility: hidden nimmt sie zugleich aus dem Vorlesebaum. */
.pricing-v3__preis {
  margin-top: 22px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1.5px solid var(--color-border);
}
.pricing-v3__karte--voll .pricing-v3__preis { border-color: rgba(255, 255, 255, 0.16); }
.pricing-v3__stapel { display: grid; }
.pricing-v3__stapel > * { grid-area: 1 / 1; }
.pricing-v3__stapel--fein { margin-top: 8px; min-height: 20px; }
.pricing-v3__wert {
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1.05;
}
.pricing-v3__wert[data-modus="raten"],
.pricing-v3__feinzeile[data-modus="raten"] { opacity: 0; visibility: hidden; }
.pricing-v3.ist-raten .pricing-v3__wert[data-modus="einmal"],
.pricing-v3.ist-raten .pricing-v3__feinzeile[data-modus="einmal"] { opacity: 0; visibility: hidden; }
.pricing-v3.ist-raten .pricing-v3__wert[data-modus="raten"],
.pricing-v3.ist-raten .pricing-v3__feinzeile[data-modus="raten"] { opacity: 1; visibility: visible; }
.pricing-v3__wert,
.pricing-v3__feinzeile { transition: opacity 0.2s var(--ease-ui); }
.pricing-v3__vorsatz { font-size: 15px; font-weight: 600; color: var(--color-text-soft); }
.pricing-v3__zahl {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 54px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pricing-v3__waehrung {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.pricing-v3__zusatz {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-soft);
  margin-left: 4px;
}
.pricing-v3__karte--voll .pricing-v3__zusatz { color: rgba(255, 255, 255, 0.62); }
.pricing-v3__feinzeile {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-soft);
}
.pricing-v3__karte--voll .pricing-v3__feinzeile { color: rgba(255, 255, 255, 0.58); }

/* --- Knopf und Leistungen ------------------------------------------------ */
.pricing-v3__cta {
  display: flex;
  width: 100%;
  justify-content: center;
  padding-block: 14px;
}
.pricing-v3__leistungen {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.pricing-v3__leistungen li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15.5px;
  line-height: 1.45;
}
.pricing-v3__karte--voll .pricing-v3__leistungen li { color: rgba(255, 255, 255, 0.88); }
/* Ein Haken, eine Farbe — Gruen, auf der dunklen Karte die hellere Stufe.
   Der Kreis dahinter ersetzt das freistehende Haekchen: bei sieben Zeilen
   untereinander gibt er der Liste eine Kante. */
.pricing-v3__haken {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(63, 125, 82, 0.13);
  color: var(--color-status-ok);
}
.pricing-v3__karte--voll .pricing-v3__haken {
  background: rgba(127, 185, 143, 0.20);
  color: var(--color-status-ok-light);
}
.pricing-v3__haken svg { width: 11px; height: 11px; }
/* Die erste Zeile der Pakete 2 und 3 nennt das Paket darunter. Sie traegt den
   Preisunterschied und wird als Zwischenzeile gesetzt, nicht als Haken. */
.pricing-v3__leistung--basis {
  font-weight: 600;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.pricing-v3__karte--voll .pricing-v3__leistung--basis { border-color: rgba(255, 255, 255, 0.16); }

/* --- Unter den Karten ---------------------------------------------------- */
.pricing-v3__laufend {
  margin: clamp(30px, 3.4vw, 44px) auto 0;
  max-width: 720px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 18px;
  padding: 20px clamp(20px, 2.2vw, 28px);
}
.pricing-v3__laufend-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  line-height: 1.2;
}
.pricing-v3__laufend-titel { font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.pricing-v3__laufend-preis {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pricing-v3__laufend-text { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--color-text-soft); }

.pricing-v3__fuss {
  margin: clamp(22px, 2.6vw, 32px) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-soft);
  text-align: center;
}
.pricing-v3__fuss svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-status-ok); }
.pricing-v3__individuell {
  margin: 14px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--color-text-soft);
}
.pricing-v3__individuell .text-link { white-space: nowrap; }

/* --- Wischreihe am Handy -------------------------------------------------
   Gestapelt waeren die drei Pakete fuenf Bildschirme, in denen sich nichts
   vergleichen laesst.

   Die Karte rastet mittig ein, nicht am linken Rand. Damit liegt links und
   rechts von ihr je ein Streifen der Nachbarkarte im Bild, und wer auf dem
   mittleren Paket steht, sieht auf einen Blick, dass es in beide Richtungen
   weitergeht. Am linken Rand eingerastet war nur die naechste Karte zu ahnen,
   die vorherige gar nicht.

   proximity statt mandatory: mandatory zieht die Reihe nach jedem Wisch auf
   den naechsten Rastpunkt: bei 300px breiten Karten muss man ueber 150px
   wischen, alles darunter schnappt an den Ausgangspunkt zurueck. Das sieht
   aus, als sei die Reihe festgeklemmt. proximity rastet nur ein, wenn der
   Finger ohnehin in der Naehe eines Punktes loslaesst. */
@media (max-width: 1079.98px) {
  .pricing-v3__karten {
    display: flex;
    max-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 6px var(--gutter) 22px;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pricing-v3__karten::-webkit-scrollbar { display: none; }
  .pricing-v3__karte {
    flex: 0 0 80%;
    max-width: 330px;
    scroll-snap-align: center;
  }
  .pricing-v3__karte:hover { transform: none; box-shadow: none; }
  .pricing-v3__karte--voll:hover { box-shadow: 0 30px 64px -28px rgba(26, 29, 31, 0.55); }
}
@media (max-width: 809.98px) {
  .pricing-v3__subline { font-size: 15.5px; line-height: 1.55; }
  .pricing-v3__paket-text { font-size: 15px; }
  .pricing-v3__leistungen { margin-top: 22px; gap: 10px; }
  .pricing-v3__leistungen li { font-size: 15px; }
  .pricing-v3__laufend-kopf { flex-wrap: wrap; row-gap: 4px; }
  /* Haken und drei durch Punkte getrennte Angaben passen bei 390px nicht in
     eine Zeile — der Haken bleibt oben, der Text bricht darunter um. */
  .pricing-v3__fuss { align-items: flex-start; text-align: left; }
  .pricing-v3__fuss svg { margin-top: 3px; }
}

/* Die Punkte unter der Wischreihe: gleiche Bauweise wie in v2, nur an die
   neuen Klassennamen gehaengt. Der Knopf ist 28x30px gross, zu sehen sind
   davon 8px — ein Punkt in Daumengroesse saehe albern aus, ein 8px grosser
   Knopf trifft niemand. */
.pricing-v3__punkte { display: flex; justify-content: center; gap: 0; margin-top: 2px; }
.pricing-v3__punkt {
  width: 28px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
}
.pricing-v3__punkt::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(42, 39, 36, 0.24);
  transition: width 0.2s ease, background-color 0.2s ease;
}
.pricing-v3__punkt.ist-aktiv::before { width: 22px; border-radius: 4px; background: var(--color-accent); }
/* Ab dem Schreibtisch stehen die drei nebeneinander, dort waeren die Punkte
   eine Bedienung ins Leere. */
@media (min-width: 1080px) {
  .pricing-v3__punkte { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-v3__karte,
  .pricing-v3__pille::after,
  .pricing-v3__wert,
  .pricing-v3__feinzeile,
  .pricing-v3__schalter-hinweis { transition: none; }
}

/* ==========================================================================
   Umbau 8.9.0 - Roter Faden: Kapitelzeile ueber jedem Abschnitt, Luft im Hero
   ========================================================================== */

/* Eine kleine Zeile Einordnung ueber jeder Abschnittsueberschrift, gesetzt
   wie das Label ueber den Preisen. Der Besucher sieht an jeder Station, wo
   er gerade steht: Passt das zu mir - Der Ablauf - Preise - Wer dahinter
   steht - Ihre Fragen. Der Kopfbereich traegt dieselbe Zeile als Einstieg:
   was hier verkauft wird, steht damit im ersten Satz der Seite. */
.hero-direct__kicker,
.abschnitt-label {
  display: block;
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--color-accent-text);
}
.abschnitt-label { margin-bottom: 14px; }

/* Mehr Luft zwischen den Textbloecken im Kopfbereich. Nur am Schreibtisch:
   am Handy zaehlt, dass der rote Knopf im ersten Bildschirm bleibt, dort
   gelten weiter die engen Abstaende aus dem Handy-Block. */
@media (min-width: 810px) {
  .hero--direct .hero-direct__headline { margin-top: 16px; }
  .hero--direct .hero-direct__lead     { margin-top: 22px; line-height: 1.6; }
  .hero--direct .hero-direct__bullets  { margin-top: 28px; row-gap: 10px; }
  .hero--direct .hero-direct__actions  { margin-top: 32px; }
}

/* Am Handy steht das Foto zuerst, und der Textblock rueckt 19px darueber
   (siehe Handy-Block weiter oben). Der Kicker landet damit auf der
   Unterkante des Fotos. Als nackte Zeile stuende er im Bild; als weisse
   Pille mit Schatten sitzt er bewusst auf der Kante, so wie es das alte
   Hero-Label tat, fuer das der Ueberhang gebaut wurde. */
@media (max-width: 809.98px) {
  .hero-direct__kicker {
    display: inline-block;
    background: #fff;
    padding: 7px 12px;
    border-radius: var(--radius-pill);
    box-shadow: 0 6px 18px rgba(42, 39, 36, 0.18);
    font-size: 11.5px;
  }
}