/* ═══════════ MODERN CSS RESET ═══════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  min-height: 100vh;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  overflow-wrap: break-word;
}

video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

textarea {
  white-space: revert;
}

/* ═══════════ FONTS (self-hosted woff2, kein externes CDN → DSGVO) ═══════════ */

/* Space Grotesk — Display / Headlines */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/space-grotesk-600.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-700.woff2") format("woff2");
}

/* Inter — Body / UI */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-600.woff2") format("woff2");
}

/* ═══════════ CUSTOM PROPERTIES — KÜHL-NEUTRAL + SIGNALBLAU ═══════════ */

:root {
  /* Markenfarben */
  --ink: #1f2a33; /* Slate, Text */
  --ink-soft: #52606b; /* gedämpfter Text */
  --paper: #ffffff; /* weißer Hintergrund (Kundenlogos brauchen Weiß) */
  --surface: #f5f7f8; /* sehr helle kühle Fläche für Cards */
  --line: #e6e8ec; /* kühle Haarlinie */
  --line-strong: #cdd2d8;
  --primary: #00708c; /* Petrol-Blau aus dem Rankland-Logo (Signatur) */
  --primary-dark: #00576e;
  --accent: #213a47; /* dunkles Petrol-Slate (Sekundär) */
  --accent-dark: #162c37;
  --accent2: #00708c; /* Logo-Petrol (Karten-Variante) */
  --pop: #8fdfff; /* heller Cyan-Akzent (C-Palette; Hero-Wort auf Dunkel) */
  --pop-ink: #0a2a36;
  --gold: #fbbc04; /* Google-Sterne (Google-Gelb) */
  --dark: #213a47; /* dunkle Sektionen (Hero, CTA, Stats, Footer) */
  --dark-2: #162c37;

  /* Semantische Aliase */
  --color-bg: var(--paper);
  --color-surface: var(--surface);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-soft);
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-dark);
  --color-border: var(--line);
  --color-bg-alt: var(--surface);
  --color-success: #0e9488;
  --color-error: #dc2626;

  /* Typografie */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;

  /* Fluide Typo-Skala */
  --step--1: clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.18rem, 1.08rem + 0.45vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.25rem + 0.95vw, 2rem);
  --step-3: clamp(1.85rem, 1.5rem + 1.7vw, 2.9rem);
  --step-4: clamp(2.3rem, 1.75rem + 2.9vw, 4.1rem);
  --step-5: clamp(2.8rem, 1.95rem + 4.4vw, 5.4rem);

  /* Abstände */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2.5rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;
  --section-pad: clamp(4rem, 3rem + 6vw, 8rem);

  /* Maße */
  --container-max: 1200px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);

  /* Radien — weiche Geometrie */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 26px;
  --radius-xl: 32px;   /* Cookie-Modal (_cookie-consent.css) — war nie definiert, die Zeile fiel still aus */
  --radius-pill: 999px;

  /* Schatten — kühl, weich */
  --shadow: 0 1px 2px rgba(21, 23, 28, 0.05), 0 12px 34px -16px rgba(21, 23, 28, 0.22);
  --shadow-lg: 0 36px 64px -24px rgba(21, 23, 28, 0.28);
  --ring: 0 0 0 3px rgba(30, 64, 175, 0.4);
}

/* ═══════════ HTML ═══════════ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

/* ═══════════ BODY ═══════════ */

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection {
  background: var(--accent);
  color: var(--surface);
}

/* ═══════════ CONTAINER ═══════════ */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--narrow {
  max-width: 760px;
}

/* ═══════════ HEADINGS ═══════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  /* Deutsche Komposita: mit Bindestrich trennen statt hart umbrechen (overflow-wrap im Reset) */
  hyphens: auto;
}

/* Display-Größen (von Komponenten genutzt) */
.display-1 { font-size: var(--step-5); font-weight: 700; line-height: 1.0; }
.display-2 { font-size: var(--step-4); font-weight: 600; line-height: 1.04; }
.display-3 { font-size: var(--step-3); font-weight: 600; line-height: 1.1; }

/* ═══════════ EYEBROW / LABEL (technisches Register) ═══════════ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.eyebrow::before {
  content: "";
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
}

.eyebrow--indigo::before { background: var(--accent2); }
/* Auf dunklem Grund: Schrift hell (Paper), Dot im Cyan-Akzent (sonst unsichtbar). */
.eyebrow--on-dark { color: var(--paper); }
.eyebrow--on-dark::before { background: var(--pop); }

/* ═══════════ LEAD / INTRO-TEXT ═══════════ */

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* ═══════════ LINKS ═══════════ */

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
  transition: color 0.15s ease;
}
a:hover { color: var(--primary-dark); }

/* ═══════════ BUTTONS ═══════════ */

/* inline-block statt inline-flex: der Pfeil bleibt so im Textfluss und klebt
   am letzten Wort, statt bei mehrzeiligem Label an den rechten Rand zu rutschen. */
.btn {
  --btn-bg: var(--primary);
  --btn-fg: #ffffff;
  display: inline-block;
  padding: 1rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
  border: 2px solid var(--btn-bg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.btn .btn__arrow {
  display: inline-block;
  margin-inline-start: 0.55em;
  transition: transform 0.18s ease;
}
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--accent { --btn-bg: var(--accent); }
.btn--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #ffffff; }

.btn--neon {
  --btn-bg: var(--neon);
  --btn-fg: var(--neon-ink);
}
.btn--neon:hover {
  background: color-mix(in srgb, var(--neon) 84%, var(--ink));
  border-color: color-mix(in srgb, var(--neon) 84%, var(--ink));
  color: var(--neon-ink);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: none;
}

.btn--on-dark.btn--ghost {
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 40%, transparent);
}
.btn--on-dark.btn--ghost:hover {
  color: var(--paper);
  border-color: var(--paper);
}

/* ═══════════ GEOMETRISCHE DEKO-FORMEN ═══════════ */

.shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.shape--circle { border-radius: 50%; }
.shape--quarter { border-radius: 0 100% 0 0; }
.shape--ring { border-radius: 50%; background: transparent; }

/* ═══════════ PROSE (Markdown-Seiten, Blog, Recht) ═══════════ */

/* Text-/Rechtsseiten (page.njk: Impressum, Datenschutz, …): konsistenter vertikaler
   Abstand zu Nav und Footer. .page hatte zuvor kein Padding → Inhalt klebte am Footer. */
.page { padding-block: clamp(3rem, 6vw, 5rem); }
.page > .prose > :first-child { margin-block-start: 0; }

.prose { font-size: var(--step-1); }
.prose > * + * { margin-block-start: var(--space-md); }
/* Tabellen in Prose: sauber gestylt + auf Mobil horizontal scrollbar statt abgeschnitten */
.prose table { display: block; width: max-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; margin-block: var(--space-md); font-size: var(--step--1); }
.prose th, .prose td { padding: 0.7rem 1rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose thead th { background: color-mix(in srgb, var(--primary) 7%, #fff); font-weight: 600; color: var(--ink); white-space: nowrap; }
.prose tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--primary) 3%, #fff); }
.prose h1 { font-size: var(--step-4); margin-block: var(--space-lg) var(--space-md); }
.prose h2 { font-size: var(--step-3); margin-block: var(--space-lg) var(--space-sm); }
.prose h3 { font-size: var(--step-2); margin-block: var(--space-lg) var(--space-sm); }
.prose h4 { font-size: var(--step-1); margin-block: var(--space-md) var(--space-xs); }
.prose p, .prose ul, .prose ol { color: var(--ink); line-height: 1.7; }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li { margin-block-end: 0.4em; }
.prose li::marker { color: var(--primary); }
.prose a { font-weight: 500; }
.prose blockquote {
  border-inline-start: 4px solid var(--primary);
  padding-inline-start: var(--space-md);
  color: var(--ink-soft);
  font-style: italic;
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}
.prose pre {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-md);
  border-radius: var(--radius);
  overflow-x: auto;
}
.prose pre code { background: none; border: none; padding: 0; color: inherit; }

/* ═══════════ SKIP LINK ═══════════ */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  z-index: 200;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: var(--space-sm); }

/* ═══════════ FOCUS ═══════════ */

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ═══════════ REDUCED MOTION ═══════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════ SYSTEMSEITEN (Danke, Fehler, 404) ═══════════
   Vier Seiten, die früher jede ihre eigenen Inline-Styles hatten und dadurch
   unterschiedlich aussahen: Absätze klebten aneinander, weil der Reset p-Margins
   entfernt und hier nichts sie zurückgab. Eine Klasse für alle vier. */
.systemseite {
  max-inline-size: 38rem;
  margin-inline: auto;
  padding-block: var(--space-xl) var(--space-2xl);
  text-align: center;
}

.systemseite h1 {
  margin-block-end: var(--space-md);
}

.systemseite p {
  margin-block-end: var(--space-sm);
  line-height: 1.65;
}

/* Der Rückweg braucht Abstand zum Text, sonst liest er sich als vierter Satz. */
.systemseite p:last-child {
  margin-block: var(--space-lg) 0;
}

/* ═══════════ SEKTIONS-BASIS ═══════════ */

/* Sternreihe mit Teilfüllung (starRow-Macro): gedimmte Basisreihe + gelbe
   Füllreihe, deren width dem Rating entspricht (4,7 -> 94%). Kontextklassen
   (hero__stars, reviews__stars, …) steuern weiterhin Größe/Farbe/gap; die
   Reihen erben den gap vom Container. Regeln stehen VOR den Kontextregeln,
   damit deren svg-Styles gewinnen. */
.stars { position: relative; display: inline-flex; gap: 2px; color: var(--gold); }
.stars__row { display: inline-flex; gap: inherit; }
.stars__row svg { flex: none; width: 18px; height: 18px; }
.stars__row--base svg { opacity: 0.32; }
.stars__row--fill { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; }

.section {
  padding-block: var(--section-pad);
  position: relative;
}
/* Zwei hintergrundlose Sektionen: obere behält ihr unteres Padding, die untere
   gibt ihr oberes ab → Block-Abstand = --section-pad (kein Doppel-Abstand). */
.section + .section { padding-block-start: 0; }
/* An einer Farbkante (Tint/Grid grenzt an andersfarbige Sektion) wird der Abstand
   geteilt: jede Seite bekommt das halbe Section-Padding. So bleibt der Block-Abstand
   gleich (= --section-pad), die Kante sitzt optisch mittig, und KEIN Inhalt klebt an
   der Kante (das passiert sonst bei alternierenden Bändern an der weißen Seite). */
.section + .section--tint,
.section + .section--grid       { padding-block-start: calc(var(--section-pad) / 2); }
.section:has(+ .section--tint),
.section:has(+ .section--grid)  { padding-block-end:   calc(var(--section-pad) / 2); }
.section--tint + .section,
.section--grid + .section       { padding-block-start: calc(var(--section-pad) / 2); }
.section--tint:has(+ .section),
.section--grid:has(+ .section)  { padding-block-end:   calc(var(--section-pad) / 2); }
.section--tint { background: color-mix(in srgb, var(--primary) 5%, #ffffff); }
/* Wrapper-Blöcke mit eigenem Abstand (.cta = Panel, .cta-band = margin-basiert,
   .contact = heller Formular-Block) liegen außerhalb des .section-Kollaps. Damit
   kein doppelter Leerraum entsteht, gibt die angrenzende Sektion ihr Padding ab –
   sowohl davor (vorausgehende Sektion) als auch danach (folgende Sektion). */
.section:not(.section--tint):not(.section--grid):has(+ .cta),
.section:not(.section--tint):not(.section--grid):has(+ .cta-band) { padding-block-end: 0; }
.cta + .section,
.cta-band + .section,
.contact + .section { padding-block-start: 0; }
/* .contact ist nur dezent getönt (surface): Abstand mittig teilen wie an Tint-Kanten,
   sonst klebt das letzte FAQ-/Sektions-Element an der Farbkante. */
.section:has(+ .contact) { padding-block-end: calc(var(--section-pad) / 2); }
.section + .contact { padding-block-start: calc(var(--section-pad) / 2); }

.section-head { max-width: 62ch; margin-block-end: var(--space-lg); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .section-head__intro { margin-inline: auto; }
.section-head__title { margin-block: 0.4em 0; max-width: 18ch; }
.section-head--center .section-head__title { max-width: 24ch; }
.section-head__intro { margin-block-start: var(--space-md); }

/* ═══════════ SCROLL-REVEAL ═══════════ */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ═══════════ HERO ═══════════ */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 2.5rem + 6vw, 7rem) clamp(4rem, 3rem + 6vw, 8rem);
  overflow: hidden;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.hero__title {
  margin-block: 0.5em 0;
  max-width: 16ch;
}
.hero__title .accent { color: var(--primary); }
.hero__title .accent-petrol { color: var(--accent); }
.hero__subtitle {
  margin-block-start: var(--space-md);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 44ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.7rem;
  margin-block-start: var(--space-sm);
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.hero__meta li { display: flex; align-items: flex-start; gap: 0.5em; }
.hero__meta li::before {
  content: "";
  width: 6px; height: 6px;
  margin-block-start: 0.55em;
  background: var(--pop);
  border-radius: 50%;
  flex: none;
}

/* Hero-Grafik */
.hero__figure {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
}
.herofig { position: relative; width: min(420px, 100%); aspect-ratio: 1 / 0.9; }
.herofig__ring {
  position: absolute;
  inset: 4% 6% auto auto;
  width: 62%; aspect-ratio: 1;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
}
.herofig__quarter {
  position: absolute;
  left: -4%; bottom: 8%;
  width: 34%; aspect-ratio: 1;
  background: var(--accent2);
  border-radius: 0 100% 0 0;
}
.herofig__dot {
  position: absolute;
  right: 10%; top: 6%;
  width: 16%; aspect-ratio: 1;
  background: color-mix(in srgb, var(--accent) 16%, var(--paper));
  border-radius: 50%;
}
.herofig__chart {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 40px rgba(26, 23, 20, 0.14));
}
.herofig__bars rect {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 2.5;
  transform-origin: bottom;
  animation: barRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.herofig__bars rect:nth-child(1) { animation-delay: 0.05s; }
.herofig__bars rect:nth-child(2) { animation-delay: 0.17s; }
.herofig__bars rect:nth-child(3) { animation-delay: 0.29s; fill: color-mix(in srgb, var(--accent2) 22%, var(--surface)); }
.herofig__bars rect:nth-child(4) { animation-delay: 0.41s; fill: var(--primary); stroke: var(--primary-dark); }
.herofig__curve {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: drawCurve 0.9s ease 0.5s forwards;
}
.herofig__peak {
  fill: var(--paper);
  stroke: var(--primary);
  stroke-width: 4;
  opacity: 0;
  animation: popIn 0.4s ease 1.2s forwards;
}
@keyframes barRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes drawCurve { to { stroke-dashoffset: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

/* ═══════════ TRUST-BAR ═══════════ */

.trustbar { padding-block: var(--space-lg); border-block: 1px solid var(--line); }
.trustbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
}
.trustbar__label {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
  flex: none;
}
.trustbar__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  list-style: none;
  margin: 0; padding: 0;
}
.trustbar__item {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--ink);
  opacity: 0.85;
}

/* ═══════════ LEISTUNGS-GRID ═══════════ */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none;
  margin: 0; padding: 0;
}
.section--grid { background: #ffffff; }
.svc-grid__more { margin-block-start: clamp(1.75rem, 3vw, 2.5rem); text-align: center; }
.svc-grid__more a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--primary);
  text-decoration: none;
  transition: gap 0.18s ease;
}
.svc-grid__more a:hover { gap: 0.75em; }

/* ═══════════ TOOLS / APPS SHOWCASE ═══════════ */
.tools-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
@media (min-width: 720px) { .tools-grid { grid-template-columns: 1fr 1fr; } }
.tool-card {
  display: flex;
  gap: 1.25rem;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
.tool-card__icon { width: 60px; height: 60px; border-radius: 14px; flex: none; object-fit: contain; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
.tool-card__body { min-width: 0; }
.tool-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin-block-end: 0.5rem; }
.tool-card__name { font-family: var(--font-display); font-size: var(--step-1); margin: 0; }
.tool-card__badge { font-size: var(--step--1); font-weight: 600; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, #ffffff); padding: 0.15rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.tool-card__desc { color: var(--ink-soft); margin: 0 0 var(--space-md); line-height: 1.6; }
.tool-card__link { font-family: var(--font-display); font-weight: 600; color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35em; transition: gap 0.18s ease; }
.tool-card__link:hover { gap: 0.6em; }
.tools-note { max-width: 64ch; margin-block-start: clamp(1.75rem, 3vw, 2.5rem); color: var(--ink-soft); }

/* ═══════════ LANDING-HERO (mit Bild, wiederverwendbar) ═══════════ */
.lhero { background: var(--dark); color: #fff; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.lhero__inner { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 880px) { .lhero__inner { grid-template-columns: 1.05fr 0.95fr; } }
.lhero__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--step--1); color: color-mix(in srgb, var(--paper) 58%, transparent); margin-block-end: var(--space-md); }
.lhero__crumbs a { color: inherit; text-decoration: none; }
.lhero__crumbs a:hover { color: var(--pop); }
.lhero__sep { opacity: 0.5; }
/* Nutzt die gemeinsame .eyebrow .eyebrow--on-dark (siehe _base.css); hier nur der Abstand. */
.lhero__eyebrow { margin: 0 0 var(--space-md); }
.lhero__title { font-family: var(--font-display); font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.08; letter-spacing: -0.02em; color: #fff; margin: 0; text-wrap: balance; }
.lhero__title .accent { color: var(--pop); }
.lhero__intro { margin: var(--space-md) 0 0; max-width: 48ch; color: color-mix(in srgb, var(--paper) 82%, transparent); font-size: var(--step-1); line-height: 1.6; }
.lhero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-lg); }
.lhero__rating { display: flex; align-items: center; gap: 0.5rem; margin-block-start: var(--space-md); font-size: var(--step-0); color: color-mix(in srgb, var(--paper) 85%, transparent); }
.lhero__tel { display: inline-flex; align-items: center; gap: 0.55rem; margin-block-start: var(--space-md); font-size: var(--step--1); color: color-mix(in srgb, var(--paper) 78%, transparent); }
.lhero__tel a { color: var(--paper); font-weight: 600; white-space: nowrap; }
.lhero__tel a:hover { color: var(--pop); }
.lhero__stars { display: inline-flex; gap: 2px; }
.lhero__stars svg { width: 16px; height: 16px; color: var(--gold); }
.lhero__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: block; }
/* Hero ohne Bild: einspaltig, Inhalt nutzt die Breite (kein leerer rechter Bereich). */
.lhero--solo .lhero__inner { grid-template-columns: 1fr; }
.lhero--solo .lhero__title { max-width: 20ch; }
.lhero--solo .lhero__intro { max-width: 62ch; }

/* ═══════════ STATEMENT (Signature, persönlich) ═══════════ */
.statement {
  background: var(--dark);
  color: #fff;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.statement .container { max-width: 1040px; }
.statement__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pop);
  margin-block-end: var(--space-lg);
}
.statement__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pop); }
.statement__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.85rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: balance;
}
.statement__quote .accent { color: var(--pop); }
.statement__foot {
  margin-block-start: clamp(2rem, 5vw, 3.25rem);
  padding-block-start: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 3rem;
}
.statement__by { display: flex; flex-direction: column; gap: 0.15rem; }
.statement__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: #fff; }
.statement__role { font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); }
.statement__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.5rem;
}
.statement__points li {
  position: relative;
  padding-inline-start: 1.05rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}
.statement__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pop);
}

/* ═══════════ KONTAKT ═══════════ */
.contact { background: var(--surface); padding-block: var(--section-pad); }
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 860px) {
  .contact__grid { grid-template-columns: 0.95fr 1.05fr; }
}
.contact__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-block: 0.4rem 1rem;
  color: var(--ink);
}
.contact__lead { color: var(--ink-soft); max-width: 42ch; margin-block-end: var(--space-lg); }
.contact__details { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: grid; gap: 0.85rem; }
.contact__details li { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--ink); }
.contact__details svg { width: 20px; height: 20px; margin-block-start: 0.15em; color: var(--primary); flex-shrink: 0; }
.contact__details a { color: var(--ink); text-decoration: none; font-weight: 500; }
.contact__details a:hover { color: var(--primary); }
.contact__trust { display: flex; align-items: center; gap: 0.6rem; color: var(--ink-soft); font-size: 0.95rem; }
.contact__stars { display: inline-flex; gap: 2px; }
.contact__stars svg { width: 16px; height: 16px; color: var(--gold); }
.contact__trust strong { color: var(--ink); }
.contact__card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-lg);
}
.contact__card .lead-form { border: none; padding: 0; margin: 0; max-width: none; background: none; }

/* ═══════════ INTRO nach dem Hero (zentriert: kurze Headline + Subtitle + Such-Chips + USP-Reihe) ═══════════ */
.svc-intro__inner { display: grid; gap: clamp(1.8rem, 4vw, 2.6rem); max-width: 860px; margin-inline: auto; text-align: center; }
.svc-intro__lead { display: grid; gap: var(--space-sm); justify-items: center; }
.svc-intro__lead > p:first-child {
  color: var(--ink); font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-2); line-height: 1.3; letter-spacing: -0.015em; max-width: 26ch; margin: 0;
}
.svc-intro__lead > p { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.65; max-width: 50ch; margin: 0; }
.svc-intro__lead strong { color: var(--ink); font-weight: 600; }
.svc-intro__lead a { color: var(--primary); font-weight: 500; }

/* Lokale Suchanfragen als sichtbare Such-Chips — das thematische Visual für Local SEO */
.svc-searches { display: grid; gap: 0.85rem; justify-items: center; }
.svc-searches__label {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.svc-searches__row { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; }
.svc-search {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.9rem; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font-size: var(--step--1); color: var(--ink);
}
.svc-search svg { width: 15px; height: 15px; color: var(--primary); flex: none; }

/* USPs als offene, zentrierte 3er-Reihe: freistehendes Petrol-Icon (KEIN Kasten) + dünne
   vertikale Trennlinien. Design wie gehabt, nur bewusst größer (Icon, Headline, Beschreibung). */
.svc-usps-row {
  list-style: none; margin: clamp(2.4rem, 5vw, 3.6rem) 0 0;
  padding: clamp(1.9rem, 3.2vw, 2.6rem) 0 0; border-block-start: 1px solid var(--line);
  display: grid; gap: clamp(1.8rem, 3.4vw, 2.6rem);
}
@media (min-width: 720px) { .svc-usps-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } }
.svc-usp { display: grid; justify-items: center; text-align: center; gap: 0.85rem; align-content: start; min-width: 0; padding: 0.2rem clamp(0.8rem, 1.6vw, 1.4rem); }
@media (min-width: 720px) { .svc-usp + .svc-usp { border-inline-start: 1px solid var(--line); } }
.svc-usp__ic { --svc-accent: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
.svc-usp__ic .svc-icon { width: 52px; height: 52px; }
.svc-usp b { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.8rem); color: var(--ink); line-height: 1.2; max-width: 100%; overflow-wrap: break-word; }
.svc-usp__desc { font-size: var(--step-0); color: var(--ink-soft); line-height: 1.6; max-width: 34ch; }

/* ═══════════ MID-CTA (Conversion-Anker, dunkel) ═══════════ */
.midcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.75rem, 3.5vw, 2.6rem) clamp(1.75rem, 4vw, 3rem);
  background: var(--dark); border-radius: var(--radius-lg); }
.midcta__text { margin: 0; max-width: 30ch; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.3; color: #fff; }
.midcta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.midcta__rating { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--step--1); color: color-mix(in srgb, var(--paper) 85%, transparent); white-space: nowrap; }
.midcta__rating svg { width: 15px; height: 15px; fill: var(--gold); }
/* CTA-Kasten in einem Artikel: .prose p ist spezifischer als .midcta__text und
   faerbte den Text dunkel auf dunklem Grund. Beides hier explizit zurueckholen,
   sonst ist der Kasten in jedem Blog- und Ratgeber-Beitrag unlesbar. */
.prose .midcta { margin-block: var(--space-xl); }
.prose .midcta__text, .prose .midcta p { color: #fff; }
.prose .midcta__actions .btn { color: var(--ink); }

/* ═══════════ ROWS (Akzent-Streifen statt Standard-Kacheln) ═══════════ */
/* Redaktionelle Liste statt Kartenstapel: kein Kasten, kein Akzentstreifen an der
   linken Kante, kein Hover-Versatz. Der Streifen ist genau das Muster, an dem man
   generierten Layouts ansieht, dass sie generiert sind (Regel im Master-Template).
   Struktur kommt hier über Haarlinie, Ziffer und Abstand. */
.rows { display: grid; gap: 0; border-block-start: 1px solid var(--line); }
.row-item { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: baseline;
  padding-block: clamp(1.6rem, 3.2vw, 2.4rem); background: none; border: 0;
  border-block-end: 1px solid var(--line); border-radius: 0; }
/* Ohne Ziffer: reine Gliederung fuer Gegenueberstellungen und Kategorien, bei denen
   eine Nummerierung eine Reihenfolge behaupten wuerde, die es nicht gibt. */
.rows--plain .row-item { grid-template-columns: 1fr; }
.row-item__num { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
  font-variant-numeric: tabular-nums; letter-spacing: 0.06em; color: var(--primary);
  line-height: 1.5; padding-block-start: 0.1em; }
/* min-width: 0 verhindert Grid-Blowout durch lange Wörter (1fr-Spalte hat sonst
   min-width: auto und drückt die Karte aus dem Container -> mobiler H-Scroll). */
.row-item__body { min-width: 0; hyphens: auto; }
.row-item__body h3 { font-family: var(--font-display); font-size: var(--step-1); margin: 0 0 0.4rem; color: var(--ink); }
.row-item__body p { margin: 0; color: var(--ink-soft); line-height: 1.65; font-size: var(--step-1); }
.row-item__body a { color: var(--primary); font-weight: 500; }

/* ═══════════ REGION-BAND (dunkel, lokale Verankerung) ═══════════ */
.region { background: var(--dark); color: #fff; border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.5rem); }
.region__head { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.02em; margin: 0 0 var(--space-md); color: #fff; }
.region__places { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-end: var(--space-md); }
.region__place { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
  padding: 0.5rem 0.95rem; border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); border-radius: 8px; color: var(--pop); }
.region__place::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pop); flex: none; }
.region__body { color: color-mix(in srgb, var(--paper) 84%, transparent); line-height: 1.7; font-size: var(--step-0); }
.region__body > * + * { margin-block-start: var(--space-sm); }
.region__body a { color: var(--pop); }
.region--split .region__head { margin-block-end: var(--space-md); }
@media (min-width: 820px) {
  .region--split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .region--split .region__places { margin-block-end: 0; }
}

/* ═══════════ CALLOUT (Statement-Zitat, hell mit Petrol-Akzent) ═══════════ */
.callout {
  position: relative;
  background: color-mix(in srgb, var(--primary) 5%, #fff);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-inline-start: 5px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: clamp(3.5rem, 5vw, 4.75rem) clamp(2rem, 4vw, 3.5rem) clamp(2.25rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
/* Großes Anführungszeichen für jedes Callout (auch ohne <blockquote>) */
.callout::before { content: "\201C"; position: absolute; inset-block-start: clamp(0.35rem, 2vw, 0.9rem); inset-inline-start: clamp(2.1rem, 5vw, 3.5rem); font-family: var(--font-display); font-weight: 700; font-size: clamp(3.25rem, 5.5vw, 4.5rem); line-height: 1; color: var(--primary); pointer-events: none; }
.callout p { position: relative; margin: 0; max-width: 56ch; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 2.3vw, 1.8rem); line-height: 1.38; letter-spacing: -0.015em; }
.callout p + p { margin-block-start: 0.6em; }
.callout a { color: var(--primary); text-decoration: none; }
.callout a:hover { text-decoration: underline; }
/* Callout als Zitat (Zitatsymbol kommt global von .callout::before) */
.callout blockquote { position: relative; margin: 0; }
.callout cite { display: block; margin-block-start: var(--space-md); font-family: var(--font-body); font-style: normal; font-weight: 600; font-size: var(--step--1); letter-spacing: 0; color: var(--ink-soft); }

/* ═══════════ DETAIL-GRID (Inhalt, statt Textwüste) ═══════════ */
.detail__lead {
  max-width: 68ch;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.6;
  color: var(--ink-soft);
  margin-block-end: clamp(2rem, 4vw, 3rem);
}
/* CTA direkt unter dem Lead-Text: nah am Text, klarer Abstand zum Detail-Grid darunter. */
.detail__lead:has(+ .detail__cta) { margin-block-end: 1.25rem; }
.detail__cta { margin-block: 0 clamp(2.5rem, 5vw, 3.5rem); }
.detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3vw, 2.75rem) clamp(2rem, 4vw, 4rem);
}
@media (min-width: 760px) { .detail__grid { grid-template-columns: 1fr 1fr; } }
.detail__item { padding-block-start: 1.1rem; border-block-start: 2px solid var(--primary); }

/* ═══════════ BRANCHEN-/TAG-CHIPS (kantig, keine Pills) ═══════════ */
.chips { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-block-start: var(--space-lg); padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pop); flex: none; }
.chip:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, #ffffff); }
.detail__item h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-block-end: 0.55rem;
}
.detail__item p { color: var(--ink-soft); line-height: 1.65; margin: 0; }
.detail__note {
  max-width: 64ch;
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding-block-start: var(--space-lg);
  border-block-start: 1px solid var(--line);
  color: var(--ink-soft);
}

.svc-card {
  --svc-accent: var(--primary);
  position: relative;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--dark) 5%, transparent);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.svc-card--accent { --svc-accent: var(--accent); }
.svc-card--accent2 { --svc-accent: var(--accent2); }
.svc-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--svc-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--svc-accent) 40%, var(--line));
}
.svc-card:hover::before { transform: scaleX(1); }
.svc-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-lg);
  text-decoration: none;
  color: var(--ink);
}
.svc-card__icon {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--svc-accent) 14%, var(--surface));
  margin-block-end: var(--space-md);
}
.svc-card__title { font-size: var(--step-1); margin: 0 0 0.5rem; }
.svc-card__text { color: var(--ink-soft); margin: 0 0 var(--space-md); font-size: var(--step-0); }
.svc-card__more {
  margin-block-start: auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--svc-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.svc-card__more span { transition: transform 0.2s ease; }
.svc-card:hover .svc-card__more span { transform: translateX(4px); }

/* Geometrische Leistungs-Marke */
.svc-icon { width: 34px; height: 34px; }
.svc-icon__line { stroke: var(--svc-accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; fill: none; }
.svc-icon__fill { fill: var(--svc-accent); }
.svc-icon__fill-stroke { stroke: var(--svc-accent); stroke-width: 2.4; stroke-linecap: round; }

/* ═══════════ FEATURE-SPLIT ═══════════ */

.featuresplit__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.featuresplit--flip .featuresplit__copy { order: 2; }
.featuresplit__body { color: var(--ink-soft); margin-block: var(--space-md); font-size: var(--step-1); line-height: 1.7; }
.featuresplit__body > * + * { margin-block-start: var(--space-sm); }
.featuresplit .display-3 { margin-block-start: 0.4em; }
.featuresplit .btn { margin-block-start: var(--space-md); }

/* Checkliste */
.checklist { list-style: none; margin: var(--space-md) 0; padding: 0; display: grid; gap: var(--space-sm); }
.checklist li {
  position: relative;
  padding-inline-start: 2rem;
  color: var(--ink);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.15em;
  width: 1.2rem; height: 1.2rem;
  background: var(--primary);
  border-radius: 5px;
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 0.4rem; top: 0.42em;
  width: 0.32rem; height: 0.62rem;
  border: solid #ffffff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.checklist--sm li { font-size: var(--step--1); padding-inline-start: 1.7rem; }
.checklist--sm li::before { width: 1rem; height: 1rem; top: 0.2em; }
.checklist--sm li::after { left: 0.34rem; top: 0.4em; height: 0.5rem; width: 0.28rem; }

/* Feature-Medien (Bild bevorzugt, sonst ruhige Platzhalter-Grafik) */
.featuresplit__media {
  --fm-accent: var(--accent);
  position: relative;
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--fm-accent) 9%, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.featuresplit__media--primary { --fm-accent: var(--primary); }
.featuresplit__media--accent2 { --fm-accent: var(--accent2); }
.featuresplit__media--photo { background: none; border: none; }
.featuresplit__media--photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
/* Porträt-Variante: Hochformat-Rahmen passend zum freigestellten Foto,
   Bildausschnitt oben verankert (Kopf bleibt, nichts wird oben abgeschnitten). */
.featuresplit__media--portrait { aspect-ratio: 4 / 5; background: var(--surface); }
.featuresplit__media--portrait img { object-position: center top; }
/* UI-Mockup/Screenshot: Bild frei stellen (eigener heller Grund), nur dezenter Schatten, kein Rahmen-Kasten */
.featuresplit__media--shot { aspect-ratio: auto; background: none; border: none; padding: 0; box-shadow: none; overflow: visible; }
.featuresplit__media--shot img { width: 100%; aspect-ratio: auto; height: auto; object-fit: contain; border-radius: var(--radius-lg); box-shadow: 0 18px 48px -12px color-mix(in srgb, var(--dark) 28%, transparent); }
/* Mockups bekommen die breitere Spalte, damit der Screenshot groß genug wirkt */
@media (min-width: 768px) {
  .featuresplit--mediawide .featuresplit__inner { grid-template-columns: 0.78fr 1.22fr; gap: clamp(2rem, 4vw, 3.5rem); }
  .featuresplit--mediawide.featuresplit--flip .featuresplit__inner { grid-template-columns: 1.22fr 0.78fr; }
}
.featmedia { position: absolute; inset: 0; display: grid; place-items: center; }
.featmedia__ring {
  width: 46%; aspect-ratio: 1;
  border: 2px solid color-mix(in srgb, var(--fm-accent) 50%, var(--line));
  border-radius: 50%;
}
.featmedia__dot {
  position: absolute;
  width: 20%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--fm-accent);
}

/* ═══════════ SHOWCASE (breites UI-Mockup mit kurzem Intro) ═══════════ */
.showcase__intro { max-width: 720px; margin-inline: auto; margin-block-end: var(--space-lg); }
/* Nur die Überschrift zentriert, der Fließtext bleibt linksbündig (liest sich besser) */
.showcase__intro .display-3 { text-align: center; margin-block-end: var(--space-md); }
.showcase__intro .prose { text-align: left; }
.showcase__intro .prose > * + * { margin-block-start: var(--space-md); }
.showcase__intro .prose p { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.7; }
.showcase__intro .prose > p:first-child { color: var(--ink); }
.showcase__intro .prose strong { color: var(--ink); font-weight: 600; }
.showcase__intro .prose a { color: var(--primary); font-weight: 500; }
.showcase__intro .prose ul { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: 0.8rem; }
.showcase__intro .prose li { position: relative; padding-inline-start: 1.6rem; color: var(--ink-soft); line-height: 1.6; }
.showcase__intro .prose li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.5em; width: 7px; height: 7px; border-radius: 2px; background: var(--primary); }
.showcase__intro .prose li strong { color: var(--ink); }
/* Optionaler Textabsatz UNTER dem Bild (rahmt das Mockup redaktionell ein) */
.showcase__after { max-width: 720px; margin-inline: auto; margin-block-start: var(--space-lg); }
.showcase__after p { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.7; }
.showcase__after strong { color: var(--ink); font-weight: 600; }
.showcase__after a { color: var(--primary); font-weight: 500; }
.showcase__figure { margin: 0; }
.showcase__figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: 0 26px 64px -20px color-mix(in srgb, var(--dark) 34%, transparent);
}
.showcase__caption {
  margin-block-start: var(--space-sm);
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: 760px;
}
.showcase__caption::before { content: "› "; color: var(--primary); font-weight: 700; }

/* ═══════════ COMPARE (Gegenüberstellung Lokal/National) ═══════════ */
.compare { display: grid; gap: var(--space-md); margin-block-start: var(--space-lg); }
@media (min-width: 720px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__col {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff;
}
.compare__col--accent {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  background: color-mix(in srgb, var(--primary) 4%, #fff);
}
.compare__label {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
  color: var(--ink); margin: 0 0 var(--space-md); display: flex; align-items: center; gap: 0.55rem;
}
.compare__col--accent .compare__label { color: var(--primary); }
.compare__col--accent .compare__label::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--primary); }
.compare__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.compare__list li { position: relative; padding-inline-start: 1.4rem; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.5; }
.compare__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.compare__col--accent .compare__list li::before { background: var(--primary); }
.compare__note { margin-block-start: var(--space-lg); color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; max-width: 70ch; }
.compare__note a { color: var(--primary); font-weight: 500; }

/* ═══════════ TECH-LOGOS (Damit arbeite ich) ═══════════ */
/* Tools-Band: etwas deutlichere Tönung (hebt sich gegen weisse Nachbarn ab), nutzt section--tint fürs Padding-Kollaps */
.techlogos-band { background: color-mix(in srgb, var(--primary) 6%, #fff); }
/* Getöntes Band: symmetrisches Padding behalten, auch wenn .cta folgt (sonst kleben die Logos am unteren Rand) */
.techlogos-band:has(+ .cta), .techlogos-band:has(+ .cta-band) { padding-block-end: calc(var(--section-pad) / 2); }
.techlogos { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(2rem, 4.5vw, 3.6rem); max-width: 980px; }
.techlogos li { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.techlogos img { height: 30px; width: auto; object-fit: contain; opacity: 0.82; transition: opacity 0.2s ease; }
.techlogos img.is-icon { height: 48px; }
.techlogos img:hover { opacity: 1; }

/* ═══════════ STATS-BAND ═══════════ */

.statsband__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-lg);
  list-style: none;
  margin: 0; padding: clamp(2rem, 4vw, 3.5rem) 0;
  border-block: 2px solid var(--ink);
}
.statsband__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  padding-inline: var(--space-md);
  border-inline-start: 1px solid var(--line);
}
.statsband__item:first-child { border-inline-start: none; }
.statsband__rule { width: 28px; height: 2px; border-radius: 2px; background: var(--primary); margin-block: 0.1rem; }
.statsband__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.06;
  color: var(--primary);
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.16em;
  white-space: nowrap;
}
.statsband__suffix { font-size: 0.46em; font-weight: 600; letter-spacing: 0; color: var(--accent2); }
.statsband__label { font-size: var(--step-0); color: var(--ink-soft); line-height: 1.4; }

/* ═══════════ PROZESS ═══════════ */

.process__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: step;
}
@media (min-width: 1024px) { .process__list { grid-template-columns: repeat(var(--steps, 5), 1fr); } }
.process__step { position: relative; padding-block-start: var(--space-md); }
.process__step::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--line);
}
.process__step::after {
  content: "";
  position: absolute;
  top: -4px; left: 0;
  width: 11px; height: 11px;
  background: var(--primary);
  border-radius: 50%;
}
.process__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  color: color-mix(in srgb, var(--accent) 35%, var(--paper));
  letter-spacing: -0.02em;
}
.process__title { font-size: var(--step-1); margin: var(--space-sm) 0 0.4rem; }
.process__text { color: var(--ink-soft); margin: 0; }

/* ═══════════ TESTIMONIALS ═══════════ */

.testimonials__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none;
  margin: 0; padding: 0;
}
.testimonial {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: 0.1em; right: 0.3em;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: color-mix(in srgb, var(--accent2) 45%, var(--surface));
}
.testimonial__quote { margin: 0 0 var(--space-md); font-size: var(--step-1); line-height: 1.4; }
.testimonial__cite { display: flex; flex-direction: column; margin: 0; }
.testimonial__name { font-family: var(--font-display); font-weight: 600; }
.testimonial__role { font-size: var(--step--1); color: var(--ink-soft); }

/* ═══════════ PRICING ═══════════ */

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}
.price-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.price-card--featured {
  border: 2px solid var(--primary);
  box-shadow: var(--shadow);
}
.price-card__badge {
  position: absolute;
  top: -0.85rem; left: var(--space-lg);
  background: var(--primary);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
}
.price-card__name { font-size: var(--step-2); margin: 0; }
.price-card__tagline { color: var(--ink-soft); margin: 0 0 var(--space-sm); }
.price-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  color: var(--ink);
  margin: var(--space-sm) 0 0;
  letter-spacing: -0.02em;
}
.price-card__prefix { font-size: var(--step-0); font-weight: 500; color: var(--ink-soft); margin-inline-end: 0.3em; }
.price-card__unit { font-size: var(--step-0); font-weight: 500; color: var(--ink-soft); }
.price-card__sub { font-size: var(--step--1); color: var(--ink-soft); margin: 0.2rem 0 var(--space-sm); }
.price-card .checklist { margin-block: var(--space-md); }
.price-card .btn { margin-block-start: auto; justify-content: center; }
.pricing__note {
  margin-block-start: var(--space-lg);
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: center;
  max-width: 64ch;
  margin-inline: auto;
}

/* ═══════════ FAQ ═══════════ */

.faq__list { display: grid; gap: var(--space-sm); }
.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 var(--space-md);
}
.faq__item[open] { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__sign { position: relative; width: 18px; height: 18px; flex: none; }
.faq__sign::before, .faq__sign::after {
  content: "";
  position: absolute;
  background: var(--primary);
  border-radius: 2px;
  transition: transform 0.2s ease;
}
.faq__sign::before { top: 8px; left: 0; width: 18px; height: 2.5px; }
.faq__sign::after { left: 8px; top: 0; width: 2.5px; height: 18px; }
.faq__item[open] .faq__sign::after { transform: scaleY(0); }
.faq__a { padding: 0 0 var(--space-md); color: var(--ink-soft); }
.faq__a > * + * { margin-block-start: var(--space-sm); }

/* ═══════════ CTA-BAND ═══════════ */

/* ═══════════ CTA (zentriert, mit Trust-Zeile) ═══════════ */
.cta { padding-block: var(--section-pad); }
.cta__panel {
  background: var(--dark);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2.75rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}
.cta__eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pop);
  margin: 0 0 var(--space-sm);
}
.cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.cta__text {
  margin: var(--space-md) auto 0;
  max-width: 52ch;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
  font-size: var(--step-1);
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-block-start: clamp(1.75rem, 3vw, 2.25rem);
}
.cta__trust {
  list-style: none;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: var(--space-lg) 0 0;
  border-block-start: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2.5rem;
}
.cta__trust li {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--step-0);
  color: color-mix(in srgb, var(--paper) 85%, transparent);
}
.cta__trust strong { color: #fff; }
.cta__trust-icon { width: 18px; height: 18px; flex: none; color: var(--pop); margin-top: 0.15em; }
.cta__trust-icon--star { color: var(--gold); }

.cta-band {
  --cta-bg: var(--primary);
  --cta-fg: var(--paper);
  margin-block: var(--section-pad);
  position: relative;
}
.cta-band--accent { --cta-bg: var(--accent); }
.cta-band--ink { --cta-bg: var(--ink); }
.cta-band__inner {
  position: relative;
  background: var(--cta-bg);
  color: var(--cta-fg);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
  gap: var(--space-lg) clamp(2rem, 5vw, 4.5rem);
  overflow: hidden;
}
@media (max-width: 760px) { .cta-band__inner { grid-template-columns: 1fr; } }
.cta-band__shape {
  position: absolute;
  right: -60px; top: -60px;
  width: 220px; aspect-ratio: 1;
  border: 36px solid color-mix(in srgb, var(--paper) 14%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.cta-band__copy { position: relative; z-index: 1; max-width: 42ch; }
.cta-band__title { color: var(--cta-fg); margin: 0; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; }
.cta-band__text { margin: var(--space-sm) 0 0; color: color-mix(in srgb, var(--paper) 88%, transparent); font-size: var(--step-1); }
.cta-band__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: var(--space-md) 0 0;
  font-size: var(--step-0);
  color: color-mix(in srgb, var(--paper) 90%, transparent);
}
.cta-band__note strong { color: var(--paper); }
.cta-band__stars { display: inline-flex; gap: 2px; }
.cta-band__stars svg { width: 16px; height: 16px; color: var(--gold); }
.cta-band__actions { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-sm); }
.cta-band__actions .btn { justify-content: center; }
@media (max-width: 760px) { .cta-band__actions { flex-direction: row; flex-wrap: wrap; } }
.btn--invert { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--invert:hover { background: var(--surface); color: var(--ink); border-color: var(--surface); }

/* ═══════════ RESPONSIVE ═══════════ */

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__figure { min-height: 260px; margin-block-start: var(--space-sm); }
  .herofig { width: min(340px, 80%); }
  .featuresplit__inner { grid-template-columns: 1fr; }
  .featuresplit--flip .featuresplit__copy { order: 0; }
}

@media (max-width: 560px) {
  .statsband__item { border-inline-start: none; padding-inline: 0; }
  .cta-band__inner { padding: var(--space-lg); }
}

/* ═══════════ HERO-FOTO ═══════════ */

.hero__figure--photo { min-height: 0; }
.hero__photo {
  position: relative;
  width: min(440px, 100%);
  margin-inline: auto;
  aspect-ratio: 1;
}
.hero__photo img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.hero__photo::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -7%; bottom: -7%;
  width: 58%; aspect-ratio: 1;
  background: color-mix(in srgb, var(--primary) 16%, var(--paper));
  border-radius: var(--radius-lg);
}
.hero__photo-accent {
  position: absolute;
  z-index: 2;
  left: -16px; top: 26px;
  width: 60px; height: 60px;
  border: 3px solid var(--neon);
  border-radius: 50%;
}

/* ═══════════ TRUST-BAR LOGOS ═══════════ */

.trustbar__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-xl);
  list-style: none;
  margin: 0; padding: 0;
}
.trustbar__logos li { display: flex; }
.trustbar__logos img {
  height: 40px; width: auto;
  max-width: 170px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.trustbar__logos li:hover img { filter: grayscale(0); opacity: 1; }

/* ═══════════ AKZENTE ═══════════ */

.svc-card:hover {
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--svc-accent) 35%, transparent);
}

/* ═══════════ HERO (dunkel, Slate) ═══════════ */

.hero { background: var(--dark); color: #f6f2e8; overflow: hidden; }
.hero .eyebrow { color: color-mix(in srgb, var(--paper) 78%, transparent); }
.hero .eyebrow::before { background: var(--pop); }
.hero__title { color: #f7f3ea; letter-spacing: -0.03em; }
.hero__title .accent { color: var(--pop); }
.hero__subtitle { color: color-mix(in srgb, var(--paper) 80%, transparent); }
.hero__meta { color: color-mix(in srgb, var(--paper) 75%, transparent); }
.hero__meta li::before { background: var(--pop); }

/* Hero-Buttons auf Dunkel */
.hero__actions .btn:first-child {
  background: #fff; border-color: #fff; color: var(--ink);
}
.hero__actions .btn:first-child:hover {
  background: color-mix(in srgb, #fff 86%, var(--ink));
  border-color: color-mix(in srgb, #fff 86%, var(--ink));
  color: var(--ink);
}
.hero__actions .btn--ghost {
  color: #f6f2e8;
  border-color: color-mix(in srgb, var(--paper) 38%, transparent);
}
.hero__actions .btn--ghost:hover { color: #fff; border-color: #f6f2e8; }

/* Hero-Foto: scharfer Rahmen, dezenter Teal-Block, kein Kreis */
.hero__photo {
  width: min(440px, 100%);
  aspect-ratio: auto;
}
.hero__photo img {
  display: block;
  width: 100%; height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.hero__photo::before { display: none; }
.hero__photo-accent { display: none; }

/* Google-Bewertung im Hero */
.hero__rating {
  display: flex; align-items: center; gap: 0.6rem;
  margin-block-start: var(--space-lg);
}
.hero__stars { display: inline-flex; gap: 3px; }
.hero__stars svg { width: 22px; height: 22px; fill: var(--gold); }
.hero__rating-text { font-size: var(--step-0); color: color-mix(in srgb, var(--paper) 82%, transparent); }
.hero__rating-text strong { color: #f6f2e8; font-family: var(--font-display); font-weight: 600; }
.hero__rating + .hero__meta { margin-block-start: var(--space-sm); }
/* Mobil: Sterne ueber den Bewertungstext stapeln (sonst schweben Sterne mittig neben 2-Zeilen-Umbruch) */
@media (max-width: 600px) {
  .hero__rating { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .hero__rating-text { font-size: var(--step--1); line-height: 1.35; }
}

/* ═══════════ LOGO-MARQUEE (animierte Kundenlogos) ═══════════ */

.trustbar__marquee { position: relative; width: 100%; overflow: hidden; }
/* Rand-Fade als statische Overlays (NICHT als mask-image) – Maske wuerde den animierten Track pro Frame neu compositen und stottern lassen. rgba(...,0) statt transparent, sonst graeulicher Saum. */
.trustbar__marquee::before,
.trustbar__marquee::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 8%;
  z-index: 2;
  pointer-events: none;
}
.trustbar__marquee::before { inset-inline-start: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.trustbar__marquee::after { inset-inline-end: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.trustbar__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-scroll 58s linear infinite;
  will-change: transform;
}
.trustbar__group {
  display: flex;
  align-items: center;
  gap: 84px;
  padding-inline-end: 84px;
  margin: 0;
  padding-block: 0;
  padding-inline-start: 0;
  list-style: none;
  flex: none;
}
.trustbar__marquee:hover .trustbar__track { animation-play-state: paused; }
.trustbar__group li { flex: none; display: flex; align-items: center; }
.trustbar__group img {
  max-width: 240px; width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.72;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.trustbar__group li:hover img { filter: grayscale(0%); opacity: 1; }
/* translate3d (statt translateX) haelt den GPU-Layer durchgehend – translateX wuerde den translateZ-Hint pro Frame ueberschreiben und die Animation auf den Main-Thread zurueckfallen lassen (Stutter). */
@keyframes logo-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
/* Mobil: Tempo bleibt wie Desktop (58s, geerbt); das fruehere "Schneckentempo" kam vom Ruckeln ohne GPU-Layer, nicht vom Tempo. Nur der Rand-Fade schmaler, damit Logos am Rand nicht zu frueh ausfaden. */
@media (max-width: 640px) {
  .trustbar__marquee::before,
  .trustbar__marquee::after { width: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .trustbar__track { animation: none; width: 100%; }
  .trustbar__group:nth-child(2) { display: none; }
  .trustbar__group { flex-wrap: wrap; justify-content: center; row-gap: 24px; padding-inline-end: 0; }
}
.trustbar__label--center { text-align: center; margin-block-end: var(--space-md); }

/* ═══════════ CTA-BAND (dunkel + Neon) ═══════════ */

.cta-band--dark .cta-band__inner { background: var(--dark); color: #f6f2e8; }
.cta-band--dark .cta-band__title { color: #f7f3ea; }
.cta-band--dark .cta-band__text { color: color-mix(in srgb, var(--paper) 82%, transparent); }

/* ═══════════ FEATURE-SPLIT OHNE BILD (einspaltig) ═══════════ */
.featuresplit--nomedia .featuresplit__inner { grid-template-columns: 1fr; max-width: 920px; }
.featuresplit--nomedia .checklist { grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-lg); }
@media (max-width: 640px) { .featuresplit--nomedia .checklist { grid-template-columns: 1fr; } }

/* ═══════════ NEON-HIGHLIGHT (Marker hinter Schlüsselwörtern) ═══════════ */
.hl {
  background: var(--pop);
  color: var(--ink);
  padding: 0.02em 0.22em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ═══════════ C-SKIN: dunkles Stats-Band ═══════════ */
.statsband.section { background: var(--dark); padding-block: clamp(3rem, 5vw, 4.25rem); }
.statsband + .section { padding-block-start: var(--section-pad); }
/* Dunkle Stats-Band hat eigenen Hintergrund: Bottom-Padding NICHT kollabieren lassen (sonst klebt der Inhalt an der Kante vor CTA) */
.statsband.section:not(.section--tint):not(.section--grid):has(+ .cta),
.statsband.section:not(.section--tint):not(.section--grid):has(+ .cta-band) { padding-block-end: clamp(3rem, 5vw, 4.25rem); }
.statsband__list { border-block: none; padding-block: 0; align-items: start; }
.statsband__item { border-inline-start-color: color-mix(in srgb, var(--paper) 16%, transparent); }
.statsband__rule { background: var(--pop); }
.statsband__value { color: #ffffff; }
.statsband__suffix { color: color-mix(in srgb, #ffffff 82%, transparent); }
.statsband__label { color: color-mix(in srgb, var(--paper) 72%, transparent); }

/* ═══════════ GOOGLE-BEWERTUNGEN ═══════════ */
.reviews__summary { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-block-end: var(--space-lg); font-size: var(--step-0); color: var(--ink-soft); }
.reviews__summary strong { color: var(--ink); font-family: var(--font-display); }
.reviews__stars { display: inline-flex; gap: 2px; }
.reviews__stars svg { width: 18px; height: 18px; fill: var(--gold); }
/* Masonry via CSS columns statt Grid: ungerade Kartenzahl (z.B. 5) hinterlässt
   keine leere Grid-Zelle, unterschiedlich hohe Karten stapeln kompakt. */
.reviews__list { columns: 3 300px; column-gap: clamp(1rem, 2vw, 1.5rem); list-style: none; margin: 0; padding: 0; }
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-lg); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; break-inside: avoid; margin-block-end: clamp(1rem, 2vw, 1.5rem); }
.review:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
.review__stars { display: inline-flex; gap: 2px; margin-block-end: var(--space-sm); }
.review__stars svg { width: 18px; height: 18px; fill: var(--gold); }
.review__text { margin: 0 0 var(--space-md); color: var(--ink); line-height: 1.55; }
.review__cite { display: flex; flex-direction: column; margin: 0; }
.review__name { font-family: var(--font-display); font-weight: 600; }
.review__src { font-size: var(--step--1); color: var(--ink-soft); }

/* ═══════════ SEITEN-HEADER (Unterseiten) ═══════════ */
/* pageHeader an den lhero angeglichen: kühles Weiß (finale Richtung), gleiche Crumbs. */
.page-header { background: var(--dark); color: #fff; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.page-header__title { color: #fff; margin-block: 0.3em 0; max-width: 22ch; }
.page-header__intro { color: color-mix(in srgb, var(--paper) 82%, transparent); margin-block-start: var(--space-md); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--step--1); margin-block-end: var(--space-md); color: color-mix(in srgb, var(--paper) 58%, transparent); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--pop); }
.crumbs__sep { opacity: 0.5; }

/* ═══════════ KONTAKT ═══════════ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
/* Beide Spalten-H2 (Kontaktdaten + Formular) gleich gross: einheitliche Hierarchie */
.contact-grid .display-3, .contact-grid .lead-form__heading { font-size: var(--step-2); }
.contact-info .lead { margin-block: var(--space-md) var(--space-lg); }
/* Formular-Box bündig mit der Kontaktdaten-Spalte: kein Box-Versatz, füllt die Spalte */
.contact-grid .lead-form { margin-block: 0; max-width: none; }
.contact-grid .contact-info { padding-block-start: var(--space-lg); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.contact-list li { display: grid; gap: 0.2rem; }
.contact-list__label { font-family: var(--font-display); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.contact-list a { font-size: var(--step-1); font-family: var(--font-display); text-decoration: none; }
.contact-list address { font-style: normal; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

/* Kontakt: Erstgespräch-Buchung (Calendly-Embed) */
.book-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(1.4rem, 3vw, 2rem); }
.book-head .eyebrow { justify-content: center; }
.book-head__h { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); color: var(--ink); margin: 0.4rem 0 0.6rem; }
.book-head__lead { font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); margin: 0; }
/* Calendly-Embed ohne widget.js: feste Hoehe, da ohne Loader kein Auto-Resize stattfindet */
.cal-embed { position: relative; min-width: 320px; height: 700px; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.cal-embed iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; }
/* liegt hinter dem iframe und ist nur sichtbar, solange der noch leer ist */
.cal-embed__placeholder { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
@media (max-width: 600px) { .cal-embed { height: 820px; } }
.book-head__fallback { text-align: center; font-size: var(--step--1); color: var(--ink-soft); margin: var(--space-sm) 0 0; }
.book-head__fallback a { color: var(--primary); }

/* Startseite: Case-Study-Teaser (Guide) */
.case-teaser__inner { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; background: var(--accent); color: #fff; border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 3rem); }
.case-teaser__h { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1.1; color: #fff; margin: var(--space-sm) 0 var(--space-md); }
.case-teaser__lead { font-size: var(--step-1); line-height: 1.55; color: rgba(255, 255, 255, 0.82); margin: 0 0 var(--space-lg); max-width: 50ch; }
.case-teaser__stats { display: grid; gap: var(--space-md); }
.case-teaser__stat { border-left: 3px solid var(--pop); padding-left: var(--space-md); }
.case-teaser__num { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); color: var(--pop); line-height: 1; margin-bottom: 0.35rem; }
.case-teaser__lbl { font-size: var(--step--1); line-height: 1.4; color: rgba(255, 255, 255, 0.7); }
@media (max-width: 760px) { .case-teaser__inner { grid-template-columns: 1fr; } }
/* Case-Chart-Karten: weiße Karten mit echtem (anonymisiertem) Sistrix-Verlauf.
   Eine Serie in Marken-Petrol, Fläche gedimmt, Endpunkt mit weißem Ring. */
.case-teaser__cards { display: grid; gap: var(--space-sm); }
.case-card { background: #fff; border-radius: var(--radius-lg); padding: 1.1rem 1.1rem 0.85rem; }
.case-card__head { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0 0 0.7rem; font-size: var(--step--1); line-height: 1.45; color: var(--ink-soft); }
.case-card__badge { flex: none; background: color-mix(in srgb, var(--primary) 12%, #fff); color: var(--primary); font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); padding: 0.2rem 0.55rem; border-radius: var(--radius-sm); white-space: nowrap; }
.case-card__chart { display: block; width: 100%; height: auto; }
.case-card__base { stroke: var(--line); stroke-width: 1; }
.case-card__area { fill: color-mix(in srgb, var(--primary) 12%, transparent); }
.case-card__line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.case-card__dot { fill: var(--primary); stroke: #fff; stroke-width: 2; }
.case-card__meta { display: flex; justify-content: space-between; gap: 1rem; margin: 0.45rem 0 0; font-size: 0.78rem; color: var(--ink-soft); }
.case-teaser__note { grid-column: 1 / -1; margin: var(--space-md) 0 0; font-size: var(--step--1); color: rgba(255, 255, 255, 0.6); }

/* ═══════════ MOBILE: CTA-REIHEN & TRUST-ZEILEN ═══════════ */

/* Auf schmalen Viewports stehen Buttons untereinander und teilen sich eine
   Breite, statt je nach Labellänge unterschiedlich breit zu sein. */
@media (max-width: 560px) {
  .hero__actions,
  .lhero__actions,
  .cta__actions,
  .cta-band__actions,
  .midcta__actions {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .hero__actions .btn,
  .lhero__actions .btn,
  .cta__actions .btn,
  .cta-band__actions .btn,
  .midcta__actions .btn {
    width: 100%;
  }
  .midcta__rating { justify-content: center; }

  /* Trust-Liste: Icons in einer Spalte, Text linksbündig, Block bleibt zentriert. */
  .cta__trust {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    inline-size: fit-content;
    max-inline-size: 100%;
    margin-inline: auto;
  }
  .cta__trust li { text-align: start; }
}

/* ============================================================
   Sichtbarkeitscheck — Teaser-Band + Tool (Free-Tool)
   Ampel markenkonform ueber --vc (Petrol/Gold/Slate, kein Gruen/Rot-Flaechen)
   ============================================================ */

/* — Teaser-Band (dezent + hell + zentriert) -> /sichtbarkeitscheck/.
   Kein eigenes padding-block: nutzt das .section-System (siehe _sections.css). — */
.vischeck-teaser__inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: color-mix(in srgb, var(--primary) 5%, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(2rem, 5vw, 3rem);
}
.vischeck-teaser .eyebrow { color: var(--primary); }
.vischeck-teaser__title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; margin: 0.5rem 0 0.5rem; color: var(--ink); max-width: 30rem; }
.vischeck-teaser__lead { color: var(--ink-soft); margin: 0 0 1.4rem; max-width: 40rem; }
.vischeck-teaser__btn { margin: 0; }
@media (max-width: 560px) { .vischeck-teaser__btn { width: 100%; } }

/* — Tool-Sektion (eigene Seite). Kein eigenes padding-block: nutzt das .section-System. — */
.vischeck-band__intro { max-width: 44rem; margin: 0 auto var(--space-md); text-align: center; }
.vischeck-band__title { font-family: var(--font-display); font-size: var(--step-3); margin: 0.3rem 0 0.5rem; }
.vischeck-band__lead { color: var(--ink-soft); font-size: var(--step-1); margin: 0; }

.vischeck { max-width: 52rem; margin: 0 auto; }
.vischeck__form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.vischeck__input {
  flex: 1 1 16rem; min-width: 0; font: inherit; font-size: var(--step-1);
  padding: 0.85rem 1.1rem; border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm); background: #fff; color: var(--ink);
}
.vischeck__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 112, 140, 0.15); }
.vischeck__btn { flex: 0 0 auto; }
.vischeck__hint { color: var(--ink-soft); font-size: var(--step--1); margin: 0.7rem 0 0; }
.vischeck__quota { color: var(--primary); font-weight: 600; font-size: var(--step--1); margin: 0.35rem 0 0; }
.vischeck__quota:empty { display: none; }

/* — Ergebnis — */
.vischeck__result { margin-top: var(--space-md); }
.vischeck__loading { display: flex; align-items: center; gap: 0.7rem; color: var(--ink-soft); padding: var(--space-md) 0; }
.vischeck__spinner {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 2px solid var(--line-strong); border-top-color: var(--primary);
  animation: vc-spin 0.7s linear infinite;
}
@keyframes vc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vischeck__spinner { animation-duration: 2s; } }

.vischeck__msg {
  border: 1px solid var(--line); border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm); padding: var(--space-md); background: var(--surface);
}
.vischeck__msg p { margin: 0 0 var(--space-sm); }
.vischeck__msg p:last-child { margin-bottom: 0; }

.vischeck__head { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.vischeck__domain { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--ink); word-break: break-all; }
.vischeck__meta { display: inline-flex; align-items: center; gap: 0.1rem; flex: none; }
.vischeck__date { color: var(--ink-soft); font-size: var(--step--1); flex: none; }

/* Quellen-Info: dezentes Icon + CSS-Popover (Hover auf Desktop, Fokus auf Touch/Tastatur) */
.vischeck__src { display: inline-flex; align-items: center; }
.vischeck__src-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--ink-soft); cursor: pointer; -webkit-appearance: none; appearance: none;
}
.vischeck__src-btn svg { width: 15px; height: 15px; }
.vischeck__src-btn:hover { color: var(--primary); }
.vischeck__src-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; color: var(--primary); }
.vischeck__src-pop {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 6;
  width: min(20rem, 80vw); padding: 0.7rem 0.85rem;
  background: var(--accent); color: #fff;
  font-family: var(--font-sans); font-size: var(--step--1); font-weight: 400; line-height: 1.5; text-align: start;
  border-radius: var(--radius-sm); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity 0.13s ease, transform 0.13s ease, visibility 0.13s;
}
.vischeck__src:hover .vischeck__src-pop,
.vischeck__src:focus-within .vischeck__src-pop { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .vischeck__src-pop { transition: none; } }

.vischeck__score {
  --vc: var(--primary);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 4vw, 2.5rem); align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  border-top: 5px solid var(--vc); padding: clamp(1.2rem, 4vw, 2rem); background: #fff;
}
.vischeck__score.is-strong, .vischeck__score.is-verygood, .vischeck__score.is-good { --vc: var(--primary); }
.vischeck__score.is-solid, .vischeck__score.is-start { --vc: var(--gold); }
.vischeck__score.is-low { --vc: var(--ink-soft); }
.vischeck__score-main { text-align: center; }
.vischeck__si { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 9vw, 3.6rem); line-height: 1; color: var(--vc); }
.vischeck__si-cap { display: block; color: var(--ink-soft); font-size: var(--step--1); margin-top: 0.3rem; }
.vischeck__score-side { min-width: 0; }
.vischeck__grade { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--ink); }
.vischeck__trend { display: inline-block; font-size: var(--step--1); font-weight: 600; margin-top: 0.25rem; }
.vischeck__trend.is-up { color: var(--primary); }
.vischeck__trend.is-down { color: #b23b2e; }
.vischeck__trend.is-flat { color: var(--ink-soft); }
.vischeck__spark { display: block; width: 100%; height: 40px; margin-top: 0.6rem; }
.vischeck__spark.is-up polyline { stroke: var(--primary); }
.vischeck__spark.is-down polyline { stroke: #b23b2e; }
.vischeck__spark.is-flat polyline { stroke: var(--ink-soft); }

.vischeck__explain { color: var(--ink-soft); margin: var(--space-md) 0; line-height: 1.6; }

.vischeck__dist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: var(--space-md) 0; }
.vischeck__dist--two { grid-template-columns: repeat(2, 1fr); }
.vischeck__dist-item { text-align: center; padding: 0.9rem 0.5rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.vischeck__dist-num { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--ink); }
.vischeck__dist-item.is-good .vischeck__dist-num { color: var(--primary); }
.vischeck__dist-lbl { display: block; color: var(--ink-soft); font-size: var(--step--1); margin-top: 0.2rem; }

.vischeck__rankings { margin: var(--space-md) 0; }
.vischeck__rank-title { font-family: var(--font-display); font-size: var(--step-1); margin: 0 0 0.6rem; }
.vischeck__rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.vischeck__rank-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.9rem; background: var(--surface); border-radius: var(--radius-sm); }
.vischeck__rank-kw { color: var(--ink); font-weight: 500; word-break: break-word; }
.vischeck__rank-pos { flex: none; font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); color: #fff; background: var(--primary); padding: 0.2rem 0.65rem; border-radius: var(--radius-pill); }

.vischeck__cta { margin-top: var(--space-md); padding-top: var(--space-lg); padding-bottom: var(--space-md); border-top: 1px solid var(--line); text-align: center; }
.vischeck__cta p { margin: 0 0 1rem; color: var(--ink); font-weight: 500; }

@media (max-width: 560px) {
  .vischeck__score { grid-template-columns: 1fr; text-align: center; }
  .vischeck__head { flex-direction: column; gap: 0.2rem; align-items: flex-start; }
  .vischeck__btn { width: 100%; }
}

/* ════════ Landing-Blöcke (Sichtbarkeitscheck) — Größen aus --step-*, Farben aus Tokens ════════ */
.vc-wrap { max-width: 940px; margin-inline: auto; }
.vc-lead { font-size: var(--step-1); color: var(--ink); line-height: 1.6; margin: 0 0 var(--space-xl); }
.vc-h2 { font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; line-height: 1.1; color: var(--ink); margin: 0 0 0.5rem; }
.vc-h2--spaced { margin-top: var(--space-xl); }
.vc-h2--center { text-align: center; max-width: 22ch; margin-inline: auto; }
.vc-sub { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.6; margin: 0 0 var(--space-lg); }
.vc-sub--center { text-align: center; max-width: 62ch; margin-inline: auto; }
.vc-note { color: var(--ink-soft); font-size: var(--step-0); text-align: center; max-width: 60ch; margin: var(--space-md) auto 0; }
.vc-note--left { text-align: left; max-width: 74ch; margin-inline: 0; font-size: var(--step--1); line-height: 1.6; }
.eyebrow--center { display: flex; justify-content: center; }

/* Definition: Text + dunkle Beispiel-Karte */
.vc-define { display: grid; grid-template-columns: 1.45fr 1fr; gap: var(--space-lg); align-items: center; }
.vc-define__text .eyebrow { margin-bottom: 0.3rem; }
.vc-define__text p { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.65; margin: 0 0 1rem; }
.vc-define__card { background: var(--accent); color: #fff; border-radius: var(--radius); padding: var(--space-lg); }
.vc-define__cap { display: block; font-size: var(--step--1); color: var(--pop); margin-bottom: 0.4rem; }
.vc-define__num { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--step-5); line-height: 1; color: #fff; margin-bottom: var(--space-md); }
.vc-define__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vc-define__meta li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--step--1); border-top: 1px solid rgba(255, 255, 255, 0.14); padding-block: 0.6rem; }
.vc-define__meta span { color: rgba(255, 255, 255, 0.7); }
.vc-define__meta strong { color: #fff; font-weight: 600; }

/* Formel-Visualisierung */
.vc-formula { display: flex; align-items: stretch; justify-content: center; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); }
.vc-formula__item { flex: 1 1 200px; max-width: 250px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-md); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.vc-formula__item svg { width: 34px; height: 34px; color: var(--primary); }
.vc-formula__item--result { background: color-mix(in srgb, var(--primary) 7%, #fff); border-color: color-mix(in srgb, var(--primary) 30%, #fff); }
.vc-formula__t { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--ink); }
.vc-formula__d { font-size: var(--step--1); color: var(--ink-soft); }
.vc-formula__op { align-self: center; font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--ink-soft); }

/* SI-Skala (Signature) — diskrete Ampelzonen, kein Verlauf */
.vc-scale { margin-top: var(--space-lg); }
.vc-scale__track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.vc-scale__zone { padding: var(--space-md) 0.3rem var(--space-sm); border-radius: var(--radius-sm); text-align: center; display: flex; flex-direction: column; gap: 0.2rem; color: #fff; }
.vc-scale__zone.is-low { background: var(--ink-soft); }
.vc-scale__zone.is-start { background: color-mix(in srgb, var(--gold) 65%, var(--ink-soft)); }
.vc-scale__zone.is-solid { background: var(--gold); color: var(--ink); }
.vc-scale__zone.is-good { background: color-mix(in srgb, var(--primary) 45%, var(--gold)); color: var(--ink); }
.vc-scale__zone.is-verygood { background: color-mix(in srgb, var(--primary) 70%, #fff); }
.vc-scale__zone.is-strong { background: var(--primary); }
@media (max-width: 560px) { .vc-scale__track { grid-template-columns: repeat(3, 1fr); } }
.vc-scale__val { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); }
.vc-scale__lbl { font-size: var(--step--1); opacity: 0.95; }

/* Nutzen-Karten */
.vc-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.vc-benefit { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-lg); }
.vc-benefit__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--primary) 10%, #fff); color: var(--primary); margin-bottom: var(--space-sm); }
.vc-benefit__icon svg { width: 26px; height: 26px; }
.vc-benefit__h { font-family: var(--font-display); font-size: var(--step-1); margin: 0 0 0.4rem; color: var(--ink); }
.vc-benefit p { color: var(--ink-soft); line-height: 1.65; margin: 0; font-size: var(--step-0); }

/* Pro/Contra */
.vc-judge { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.vc-judge__col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-lg); }
.vc-judge__col--pro { border-top: 4px solid var(--primary); }
.vc-judge__col--con { border-top: 4px solid var(--line-strong); }
.vc-judge__h { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: var(--step-1); margin: 0 0 var(--space-sm); color: var(--ink); }
.vc-judge__h svg { width: 22px; height: 22px; flex: none; }
.vc-judge__col--pro .vc-judge__h svg { color: var(--primary); }
.vc-judge__col--con .vc-judge__h svg { color: var(--ink-soft); }
.vc-judge ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.vc-judge li { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.5; padding-inline-start: 1.1rem; position: relative; }
.vc-judge li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.vc-judge__col--con li::before { background: var(--line-strong); }

/* Schritt-Cards */
.vc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.vc-step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-lg) var(--space-md); }
.vc-step__num { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--primary); margin-bottom: var(--space-sm); }
.vc-step__h { font-family: var(--font-display); font-size: var(--step-1); margin: 0 0 0.3rem; color: var(--ink); }
.vc-step p { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.55; margin: 0; }

/* Hilfe-CTA nach den Schritten — markante dunkle Box (persönlich) */
.vc-help { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-lg); margin-top: var(--space-lg); padding: var(--space-lg) clamp(1.5rem, 4vw, 2.5rem); background: var(--accent); border-radius: var(--radius); }
.vc-help__text { max-width: 56ch; }
.vc-help .eyebrow { margin-bottom: 0.55rem; }
.vc-help p { margin: 0; color: color-mix(in srgb, var(--paper) 86%, transparent); line-height: 1.6; font-size: var(--step-1); }
.vc-help .btn { flex: none; }
@media (max-width: 760px) { .vc-help { grid-template-columns: 1fr; } }

/* Callout mit Icon */
.vc-callout { display: flex; gap: var(--space-md); margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); background: #fff; border: 1px solid var(--line); border-inline-start: 4px solid var(--primary); border-radius: var(--radius-sm); }
.vc-callout svg { width: 28px; height: 28px; flex: none; color: var(--primary); margin-top: 0.15rem; }
.vc-callout p { margin: 0; color: var(--ink-soft); line-height: 1.65; font-size: var(--step-0); }
.vc-callout strong { color: var(--ink); }

@media (max-width: 860px) {
  .vc-define { grid-template-columns: 1fr; }
  .vc-benefits { grid-template-columns: 1fr; }
  .vc-steps { grid-template-columns: 1fr 1fr; }
  .vc-judge { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .vc-formula { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .vc-formula__item { max-width: none; width: 100%; }
  .vc-formula__op { transform: none; }
  .vc-scale__track { grid-template-columns: 1fr 1fr; }
  .vc-steps { grid-template-columns: 1fr; }
  .vc-help { grid-template-columns: 1fr; }
}

/* E-Mail-Capture im Ergebnis (Lead-Funnel) */
.vc-optin { margin-top: var(--space-md); padding: var(--space-lg); background: color-mix(in srgb, var(--primary) 6%, #fff); border: 1px solid color-mix(in srgb, var(--primary) 18%, #fff); border-radius: var(--radius); }
.vc-optin__h { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--ink); margin: 0 0 0.3rem; }
.vc-optin__lead { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.55; margin: 0 0 var(--space-sm); }
.vc-optin__form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.vc-optin__input { flex: 1 1 14rem; min-width: 0; font: inherit; font-size: var(--step-0); padding: 0.7rem 0.9rem; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
.vc-optin__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 112, 140, 0.15); }
.vc-optin__hint { font-size: var(--step--1); color: var(--ink-soft); margin: 0.6rem 0 0; }
.vc-optin__hint a { color: var(--primary); }
.vc-optin__msg:not(:empty) { font-size: var(--step-0); color: var(--primary); margin-top: 0.7rem; font-weight: 500; }
@media (max-width: 480px) { .vc-optin__form .btn { width: 100%; } }

/* Newsletter-Signup (wiederverwendbar: band für Sektionen, compact für Footer) */
.nl-signup__h { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin: 0 0 0.3rem; }
.nl-signup__lead { color: var(--ink-soft); margin: 0 0 var(--space-sm); line-height: 1.55; }
.nl-signup__form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.nl-signup__input { flex: 1 1 13rem; min-width: 0; font: inherit; font-size: var(--step-0); padding: 0.7rem 0.9rem; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
.nl-signup__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 112, 140, 0.15); }
.nl-signup__hint { font-size: var(--step--1); color: var(--ink-soft); margin: 0.6rem 0 0; }
.nl-signup__hint a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.nl-signup__msg:not(:empty) { font-size: var(--step-0); color: var(--primary); margin-top: 0.7rem; font-weight: 500; }

.nl-signup--band { max-width: 620px; margin-inline: auto; text-align: center; background: color-mix(in srgb, var(--primary) 6%, #fff); border: 1px solid color-mix(in srgb, var(--primary) 18%, #fff); border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.4rem); }
.nl-signup--band .nl-signup__h { font-size: var(--step-2); }
.nl-signup--band .nl-signup__lead { font-size: var(--step-1); max-width: 46ch; margin-inline: auto; margin-bottom: var(--space-md); }
.nl-signup--band .nl-signup__form { max-width: 30rem; margin-inline: auto; }

.nl-signup--compact .nl-signup__h { font-size: var(--step-0); color: #fff; }
.nl-signup--compact .nl-signup__lead { font-size: var(--step--1); color: color-mix(in srgb, var(--paper) 72%, transparent); margin-bottom: 0.7rem; }
.nl-signup--compact .nl-signup__input { font-size: var(--step--1); padding: 0.55rem 0.75rem; flex-basis: 11rem; }
.nl-signup--compact .nl-signup__hint { color: color-mix(in srgb, var(--paper) 55%, transparent); }
.nl-signup--compact .nl-signup__hint a { color: var(--pop); text-decoration: underline; text-underline-offset: 2px; }
.nl-signup--compact .nl-signup__msg:not(:empty) { color: var(--pop); }

@media (max-width: 480px) { .nl-signup__form .btn { width: 100%; } }

/* Newsletter im Footer: Text links, Formular rechts */
.site-footer__newsletter { padding-block: 0 clamp(1.6rem, 4vw, 2.4rem); border-bottom: 1px solid rgba(255, 255, 255, 0.12); margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.site-footer__newsletter .nl-signup { display: grid; grid-template-columns: 1fr 24rem; column-gap: var(--space-xl); row-gap: 0.3rem; align-items: center; }
.site-footer__newsletter .nl-signup__form { gap: 0.7rem 0.5rem; }
.site-footer__newsletter .nl-signup__h { grid-column: 1; grid-row: 1; align-self: end; }
.site-footer__newsletter .nl-signup__lead { grid-column: 1; grid-row: 2; align-self: start; margin: 0; }
.site-footer__newsletter .nl-signup__form { grid-column: 2; grid-row: 1 / span 2; }
.site-footer__newsletter .nl-signup__hint { grid-column: 1 / -1; grid-row: 3; margin-top: 0.5rem; }
.site-footer__newsletter .nl-signup__msg { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .site-footer__newsletter .nl-signup { grid-template-columns: 1fr; }
  .site-footer__newsletter .nl-signup__form, .site-footer__newsletter .nl-signup__hint, .site-footer__newsletter .nl-signup__h, .site-footer__newsletter .nl-signup__lead { grid-column: 1; grid-row: auto; }
}

/* ═══════════ FREE-TOOLS (SERP-Snippet, Schema-Generator) ═══════════ */

.tool-wrap { max-width: 1120px; margin-inline: auto; }

/* ── Tools-Trio (Startseite: 3 Tool-Karten) ── */
.tools-trio { display: grid; gap: var(--space-md); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .tools-trio { grid-template-columns: 1fr; } }
.tools-trio__card { display: flex; flex-direction: column; gap: 0.55rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-lg); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.tools-trio__card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); }
.tools-trio__icon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 10%, var(--paper)); color: var(--primary); margin-bottom: 0.3rem; }
.tools-trio__icon svg { width: 22px; height: 22px; }
.tools-trio__h { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); margin: 0; }
.tools-trio__card p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; flex: 1; }
.tools-trio__link { font-weight: 600; font-size: var(--step--1); color: var(--primary); display: inline-flex; align-items: center; gap: 0.35rem; }
.tools-trio__card:hover .tools-trio__link span { transform: translateX(3px); }
.tools-trio__link span { transition: transform 0.15s; }

/* ── SERP-Snippet-Tool ── */
.serp {
  display: grid; gap: var(--space-lg);
  grid-template-columns: 1fr;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
@media (min-width: 960px) {
  .serp { grid-template-columns: minmax(0, 1fr) 636px; align-items: start; }
  .serp__import-box { grid-column: 1 / -1; }
}

/* Abgesetzte URL-Import-Box (Schnellstart) */
.serp__import-box {
  background: color-mix(in srgb, var(--primary) 5%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: var(--radius); padding: var(--space-md);
  display: flex; flex-direction: column; gap: 0.55rem;
}
.serp__import-head { display: flex; align-items: center; gap: 0.5rem; }
.serp__import-head svg { width: 19px; height: 19px; color: var(--primary); flex: none; }
.serp__import-head b { font-size: var(--step--1); color: var(--ink); font-weight: 700; }
.serp__import-head span { font-size: var(--step--1); color: var(--ink-soft); }

.serp__form { display: flex; flex-direction: column; gap: var(--space-md); }
.serp__field { display: flex; flex-direction: column; gap: 0.4rem; }
.serp__label { font-weight: 600; font-size: var(--step--1); color: var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.serp__label small { color: var(--ink-soft); font-weight: 400; }
.serp__input, .serp__area {
  width: 100%; font: inherit; font-size: var(--step-0); color: var(--ink);
  background: #fbfcfd; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem; transition: border-color 0.15s, box-shadow 0.15s;
}
.serp__area { resize: vertical; min-height: 5.5rem; line-height: 1.5; }
.serp__input:focus, .serp__area:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }

/* Meter (Pixel/Zeichen-Ampel) */
.serp__meter { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.6rem; align-items: center; margin-top: 0.15rem; }
.serp__meter-track { grid-column: 1 / -1; height: 5px; background: var(--line); border-radius: 999px; overflow: hidden; }
.serp__meter-bar { height: 100%; width: 0; border-radius: 999px; transition: width 0.18s ease, background 0.18s; }
.serp__meter.is-ok .serp__meter-bar { background: #1a8a3a; }
.serp__meter.is-warn .serp__meter-bar { background: var(--gold); }
.serp__meter.is-over .serp__meter-bar { background: #d33a2c; }
.serp__meter-cap { font-size: var(--step--1); color: var(--ink-soft); }
.serp__meter-val { font-size: var(--step--1); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.serp__meter.is-over .serp__meter-val { color: #d33a2c; }

/* Vorschau-Seite */
.serp__preview { display: flex; flex-direction: column; gap: var(--space-sm); }
.serp__tabs { display: inline-flex; gap: 2px; background: var(--line); padding: 3px; border-radius: var(--radius-pill); align-self: flex-start; }
.serp__tab { font: inherit; font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); background: transparent; border: 0; padding: 0.35rem 0.9rem; border-radius: var(--radius-pill); cursor: pointer; }
.serp__tab.is-active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }

.serp-prev { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.serp-prev[hidden] { display: none; }
.serp-prev--d { max-width: 636px; }
.serp-prev--m { max-width: 412px; }
.serp-prev__url { font-size: 14px; color: #202124; line-height: 1.3; display: flex; align-items: center; gap: 7px; }
.serp-prev__fav { width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); display: grid; place-items: center; flex: none; }
.serp-prev__fav svg { width: 15px; height: 15px; color: var(--primary); }
.serp-prev__url span { color: #4d5156; }
.serp-prev__title { font-family: Arial, sans-serif; color: #1a0dab; font-size: 20px; line-height: 1.3; margin: 3px 0 2px; font-weight: 400; }
.serp-prev--m .serp-prev__title { font-size: 18px; }
.serp-prev__desc { font-family: Arial, sans-serif; color: #4d5156; font-size: 14px; line-height: 1.58; }
.serp-prev__title b, .serp-prev__desc b { font-weight: 700; color: inherit; }

.serp__hint { font-size: var(--step--1); padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); line-height: 1.45; }
.serp__hint.is-ok { background: color-mix(in srgb, #1a8a3a 9%, var(--paper)); color: #15672c; }
.serp__hint.is-warn { background: color-mix(in srgb, var(--gold) 16%, var(--paper)); color: #7a5b00; }

/* Snippet-Score */
.serp-score { display: flex; flex-direction: column; gap: 0.55rem; border-top: 1px solid var(--line); padding-top: var(--space-sm); }
.serp-score__head { display: flex; align-items: center; gap: 0.6rem; }
.serp-score__ring { --p: 0; width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--line) 0); }
.serp-score__ring span { width: 36px; height: 36px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font-weight: 700; font-size: var(--step--1); color: var(--ink); font-variant-numeric: tabular-nums; }
.serp-score__lbl { font-weight: 600; color: var(--ink); }
.serp-score__lbl small { display: block; font-weight: 400; font-size: var(--step--1); color: var(--ink-soft); }
.serp-score__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.serp-score__list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.4; }
.serp-score__list svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.serp-score__list .is-pass svg { color: #1a8a3a; }
.serp-score__list .is-fail svg { color: var(--ink-soft); opacity: 0.6; }
.serp-score__list .is-fail { color: var(--ink-soft); }

/* Laengen-Karten (Title/Description Limits) */
.serp-limits { display: grid; gap: var(--space-md); grid-template-columns: 1fr; margin-block: var(--space-lg); }
@media (min-width: 720px) { .serp-limits { grid-template-columns: 1fr 1fr; } }
.serp-limits__card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--shadow); }
.serp-limits__tag { display: inline-block; font-weight: 700; font-size: var(--step--1); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--paper)); padding: 0.25rem 0.7rem; border-radius: var(--radius-pill); margin-bottom: 0.9rem; }
.serp-limits__row { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0.2rem 0.8rem; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.serp-limits__row span { color: var(--ink-soft); font-size: var(--step--1); }
.serp-limits__row strong { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); justify-self: end; }
.serp-limits__row small { grid-column: 2; color: var(--ink-soft); font-size: 0.8rem; justify-self: end; }
.serp-limits__note { margin-top: 0.9rem; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.45; }

/* ═══════════ SCHEMA-GENERATOR + CHECKER ═══════════ */
.schema {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.schema__modes { display: inline-flex; gap: 2px; background: var(--line); padding: 3px; border-radius: var(--radius-pill); margin-bottom: var(--space-lg); }
.schema__mode { font: inherit; font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); background: transparent; border: 0; padding: 0.45rem 1.2rem; border-radius: var(--radius-pill); cursor: pointer; }
.schema__mode.is-active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }

.schema-panel[hidden] { display: none; }
.schema-gen { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 920px) { .schema-gen { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Typ-Auswahl */
.schema-types { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--space-md); }
.schema-type { font: inherit; font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); background: #fbfcfd; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0.5rem 0.9rem; cursor: pointer; transition: all 0.15s; }
.schema-type.is-active { color: var(--paper); background: var(--primary); border-color: var(--primary); }

.sf-form[hidden] { display: none; }
.sf-form { display: flex; flex-direction: column; gap: var(--space-sm); }
.sf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.sf-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.sf-field { display: flex; flex-direction: column; gap: 0.35rem; }
.sf-field label { font-weight: 600; font-size: var(--step--1); color: var(--ink); }
.sf-faq__pair { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; position: relative; }
.sf-faq__rm { align-self: flex-end; font: inherit; font-size: var(--step--1); color: var(--ink-soft); background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0; }
.sf-faq__add { align-self: flex-start; font: inherit; font-weight: 600; font-size: var(--step--1); color: var(--primary); background: none; border: 1.5px dashed var(--primary); border-radius: var(--radius-sm); padding: 0.5rem 0.9rem; cursor: pointer; }

/* Output-Code-Box */
.schema-output { display: flex; flex-direction: column; gap: 0.6rem; }
.schema-output__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.schema-output__cap { font-weight: 600; font-size: var(--step--1); color: var(--ink); }
.schema-out { margin: 0; background: #182630; color: #d7e3ea; border-radius: var(--radius); padding: 1rem 1.1rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.82rem; line-height: 1.55; overflow-x: auto; white-space: pre; max-height: 460px; overflow-y: auto; }
.schema-copy { font: inherit; font-weight: 600; font-size: var(--step--1); white-space: nowrap; background: var(--ink); color: var(--paper); border: 0; border-radius: var(--radius-sm); padding: 0.45rem 1rem; cursor: pointer; transition: background 0.15s; }
.schema-copy:hover { background: var(--primary); }
.schema-output__hint { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.45; }

/* Checker */
.schema-check__form { display: flex; gap: 0.5rem; margin-bottom: var(--space-md); }
.schema-check__form .serp__input { flex: 1; }
.schema-check__go { font: inherit; font-weight: 600; white-space: nowrap; background: var(--primary); color: var(--paper); border: 0; border-radius: var(--radius-sm); padding: 0 1.3rem; cursor: pointer; transition: background 0.15s; }
.schema-check__go:hover { background: var(--ink); }
.schema-check__go:disabled { opacity: 0.55; cursor: wait; }
.schema-check__head { border-radius: var(--radius-sm); padding: 0.8rem 1rem; font-size: var(--step-0); line-height: 1.4; }
.schema-check__head.is-ok { background: color-mix(in srgb, #1a8a3a 9%, var(--paper)); color: #15672c; }
.schema-check__head.is-warn { background: color-mix(in srgb, var(--gold) 16%, var(--paper)); color: #7a5b00; }
.schema-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.schema-badge { display: inline-block; font-size: var(--step--1); font-weight: 600; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); }
.schema-badge.is-found { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--paper)); }

/* Gefundene Typen mit Erklaerung */
.schema-found { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.schema-found__row { display: flex; align-items: flex-start; gap: 0.55rem; font-size: var(--step--1); line-height: 1.4; }
.schema-found__row svg { width: 17px; height: 17px; flex: none; color: #1a8a3a; margin-top: 1px; }
.schema-found__row strong { color: var(--ink); font-weight: 600; }
.schema-found__row em { color: var(--ink-soft); font-style: normal; }
.schema-found__row em::before { content: "· "; }

/* Weiterfuehrung zu den offiziellen Validatoren */
.schema-check__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--line); }
.schema-check__links span { font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.schema-check__links a { font-size: var(--step--1); font-weight: 600; color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; }
.schema-check__links a::after { content: "↗"; font-size: 0.85em; }
.schema-check__links a:hover { text-decoration: underline; }
.schema-check__sub { margin-top: var(--space-md); font-weight: 600; color: var(--ink); font-size: var(--step--1); }
.schema-check__missing { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.schema-check__missing li { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.4; padding-left: 1.1rem; position: relative; }
.schema-check__missing li::before { content: "+"; position: absolute; left: 0; color: var(--primary); font-weight: 700; }
.schema-check__missing strong { color: var(--ink); }
.schema-check__msg { font-size: var(--step--1); color: var(--ink-soft); }
.schema-check__msg.is-err { color: #d33a2c; }

/* ═══════════ RICH-SNIPPETS-/SCHEMA-CHECKER ═══════════ */
.rsc { max-width: 880px; margin-inline: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.25rem, 3vw, 2.25rem); }
.rsc__form { display: flex; gap: 0.5rem; }
.rsc__form .serp__input { flex: 1; }
.rsc__go { font: inherit; font-weight: 600; white-space: nowrap; background: var(--primary); color: var(--paper); border: 0; border-radius: var(--radius-sm); padding: 0 1.4rem; cursor: pointer; transition: background 0.15s; }
.rsc__go:hover { background: var(--ink); }
.rsc__go:disabled { opacity: 0.55; cursor: wait; }
.rsc__hint { font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.6rem; }

.rsc-msg { font-size: var(--step-0); color: var(--ink-soft); margin-top: var(--space-md); }
.rsc-msg.is-err { color: #d33a2c; }

/* Potential-Score-Kopf */
.rsc-score { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); padding: var(--space-md); background: color-mix(in srgb, var(--primary) 5%, var(--paper)); border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line)); border-radius: var(--radius); }
.rsc-score__ring { --p: 0; width: 62px; height: 62px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--line) 0); }
.rsc-score__ring span { width: 48px; height: 48px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); color: var(--ink); }
.rsc-score__txt { display: flex; flex-direction: column; gap: 0.15rem; }
.rsc-score__txt strong { color: var(--ink); font-size: var(--step-1); }
.rsc-score__txt span { color: var(--ink-soft); font-size: var(--step--1); }

.rsc-h { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); margin: var(--space-lg) 0 var(--space-sm); }

/* Chancen-Karten */
.rsc-opps { display: grid; gap: var(--space-md); }
.rsc-opp { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-md); }
.rsc-opp.is-used { background: color-mix(in srgb, #1a8a3a 5%, var(--paper)); border-color: color-mix(in srgb, #1a8a3a 18%, var(--line)); }
.rsc-opp.is-incomplete { background: color-mix(in srgb, var(--gold) 8%, var(--paper)); border-color: color-mix(in srgb, var(--gold) 32%, var(--line)); }
.rsc-opp__head { display: flex; gap: 0.7rem; align-items: flex-start; }
.rsc-opp__head > svg { width: 22px; height: 22px; flex: none; color: var(--primary); margin-top: 1px; }
.rsc-opp.is-used .rsc-opp__head > svg { color: #1a8a3a; }
.rsc-opp.is-incomplete .rsc-opp__head > svg { color: #b8860b; }
.rsc-opp__fix { margin: 0.6rem 0 0; padding-left: calc(22px + 0.7rem); font-size: var(--step--1); color: #7a5b00; line-height: 1.45; }
.rsc-opp__label { font-family: var(--font-display); font-size: var(--step-0); color: var(--ink); margin: 0 0 0.15rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.rsc-opp__head p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.5; }
.rsc-opp__tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15rem 0.5rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--gold) 22%, var(--paper)); color: #7a5b00; }
.rsc-opp__tag.is-used { background: color-mix(in srgb, #1a8a3a 14%, var(--paper)); color: #15672c; }
.rsc-opp__tag.is-warn { background: color-mix(in srgb, #e8820e 20%, var(--paper)); color: #9a4f00; }
.rsc-opp__ex { margin-top: var(--space-sm); padding-left: calc(22px + 0.7rem); }
.rsc-opp__excap { display: block; font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0.4rem; }

/* Vorschau-Mock (nutzt .serp-prev) */
.rsc-mock { max-width: 460px; }
.serp-prev__crumb { font-size: 13px; color: #4d5156; margin-bottom: 2px; }
.rsc-stars { color: var(--gold); letter-spacing: 1px; }
.rsc-stars__half { position: relative; display: inline-block; color: var(--line-strong); }
.rsc-faq { margin-top: 0.5rem; border-top: 1px solid var(--line); }
.rsc-faq__q { display: flex; justify-content: space-between; padding: 0.45rem 0; border-bottom: 1px solid var(--line); font-size: 14px; color: #1a0dab; }
.rsc-faq__q span { color: var(--ink-soft); }
.rsc-search { margin-top: 0.6rem; display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 0.4rem 0.9rem; font-size: 13px; color: var(--ink-soft); }
.rsc-search svg { width: 14px; height: 14px; }

/* Lead-CTA */
.rsc-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-lg); padding: var(--space-lg); background: var(--accent); border-radius: var(--radius); }
.rsc-cta div { color: color-mix(in srgb, var(--paper) 90%, transparent); font-size: var(--step-0); line-height: 1.55; max-width: 60ch; }
.rsc-cta strong { color: var(--paper); }
.rsc-cta .btn { flex: none; }

/* Gefundene Typen (aufklappbar) */
.rsc-details { margin-top: var(--space-md); }
.rsc-details summary { cursor: pointer; font-weight: 600; font-size: var(--step--1); color: var(--primary); }
.rsc-found { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: 0.4rem; }
.rsc-found__row { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--step--1); line-height: 1.4; }
.rsc-found__row svg { width: 16px; height: 16px; flex: none; color: #1a8a3a; margin-top: 1px; }
.rsc-found__row strong { color: var(--ink); font-weight: 600; }
.rsc-found__row em { color: var(--ink-soft); font-style: normal; }
.rsc-found__row em::before { content: "· "; }

.rsc-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--line); }
.rsc-links span { font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.rsc-links a { font-size: var(--step--1); font-weight: 600; color: var(--primary); text-decoration: none; }
.rsc-links a::after { content: " ↗"; }
.rsc-links a:hover { text-decoration: underline; }

@media (max-width: 600px) { .rsc-opp__ex { padding-left: 0; } .rsc-cta { flex-direction: column; align-items: flex-start; } }

/* URL-Import-Zeile */
.serp__import { display: flex; gap: 0.5rem; margin-bottom: var(--space-sm); }
.serp__import .serp__input { flex: 1; }
.serp__import-btn { font: inherit; font-weight: 600; font-size: var(--step--1); white-space: nowrap; background: var(--ink); color: var(--paper); border: 0; border-radius: var(--radius-sm); padding: 0 1.1rem; cursor: pointer; transition: background 0.15s; }
.serp__import-btn:hover { background: var(--primary); }
.serp__import-btn:disabled { opacity: 0.55; cursor: wait; }
.serp__import-msg { font-size: var(--step--1); color: var(--ink-soft); margin-top: -0.3rem; min-height: 1.2em; }
.serp__import-msg.is-err { color: #d33a2c; }

/* ─────────────────────────────────────────────────────────
   Responsive Images — Base Styles
   Add these rules to your main stylesheet.
   Required for proper responsive behavior and CLS prevention.
   ───────────────────────────────────────────────────────── */

/* Core responsive image behavior + CLS prevention */
img {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}

/* Ensure <picture> wrapper doesn't break layout */
picture {
  display: block;
}

/* ─────────────────────────────────────────────────────────
   Hero Image — Optional utility class
   Apply to the hero <img> or wrapping <picture> element.
   Use with eleventy:pictureattr:class="hero-image" on the <img>.
   ───────────────────────────────────────────────────────── */
.hero-image {
  inline-size: 100%;
}

.hero-image img {
  inline-size: 100%;
  block-size: auto;
  object-fit: cover;
}

/* ─────────────────────────────────────────────────────────
   Content Images — Optional styling
   Images within the main content column.
   ───────────────────────────────────────────────────────── */
.content img,
.prose img {
  border-radius: 4px;
  margin-block: 1.5rem;
}

/* ─────────────────────────────────────────────────────────
   Thumbnail / Card Images — Optional
   For card grid layouts with fixed aspect ratio.
   ───────────────────────────────────────────────────────── */
.card-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* ═══════════ SITE-HEADER (sticky) ═══════════ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(10px);
  border-block-end: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  border-block-end-color: var(--line);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 68px;
}

/* ── Marke ── */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
}
.brand:hover { color: var(--ink); }
.brand__logo { height: 34px; width: auto; display: block; }

/* ── Primär-Navigation ── */
.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.75rem);
}
.primary-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.5vw, 1.25rem);
  list-style: none;
  margin: 0; padding: 0;
}
.primary-nav__item { position: relative; }
.primary-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.5rem 0.25rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.primary-nav__link:hover { color: var(--primary); }
.primary-nav__link[aria-current="page"] { color: var(--primary); }
.caret {
  width: 0.5em; height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.subnav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; margin: 0; padding: 0.5rem 0.2rem;
  color: var(--ink); cursor: pointer;
}
.subnav-toggle:hover { color: var(--primary); }

/* ── Dropdown ── */
.subnav {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -0.75rem;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.5rem;
  list-style: none;
  margin: 0;
  display: grid;
  gap: 0.15rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.has-sub:hover .subnav,
.has-sub:focus-within .subnav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.has-sub:hover .caret,
.has-sub:focus-within .caret { transform: translateY(1px) rotate(225deg); }
.subnav a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s ease;
}
.subnav a:hover { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--ink); }
.subnav a[aria-current="page"] { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.subnav__label { font-family: var(--font-display); font-weight: 500; display: block; }
.subnav__hint { font-size: var(--step--1); color: var(--ink-soft); }

/* ── Telefon-CTA ── */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55rem 1.1rem;
  border: 2px solid var(--primary);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.nav-phone:hover { background: var(--primary); color: var(--paper); border-color: var(--primary); }
.nav-phone__icon {
  width: 16px; height: 16px;
  color: var(--primary);
  flex: none;
}
.nav-phone:hover .nav-phone__icon { color: var(--paper); }

/* ── Mobile-Toggle ── */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle__box { position: relative; display: block; width: 20px; height: 14px; margin: 0 auto; }
.nav-toggle__line, .nav-toggle__box::before, .nav-toggle__box::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle__box::before { top: 0; }
.nav-toggle__line { top: 6px; }
.nav-toggle__box::after { bottom: 0; }

/* ═══════════ MOBILE ═══════════ */

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .primary-nav {
    position: fixed;
    inset: 72px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    background: var(--paper);
    border-block-end: 1px solid var(--line);
    padding: var(--space-lg) var(--container-padding) var(--space-xl);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }
  .site-header.is-open .primary-nav { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .site-header.is-open .nav-toggle__line { opacity: 0; }
  .site-header.is-open .nav-toggle__box::before { transform: translateY(6px) rotate(45deg); }
  .site-header.is-open .nav-toggle__box::after { transform: translateY(-6px) rotate(-45deg); }

  .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .primary-nav__item { border-block-end: 1px solid var(--line); }
  .primary-nav__link { padding: 0.9rem 0; font-size: var(--step-1); }

  /* Leistungen-Item als Akkordeon: Label (Link) + Caret-Button in einer Reihe, Submenu darunter */
  .primary-nav__item.has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .has-sub .primary-nav__link { flex: 1 1 auto; }
  .subnav-toggle { flex: 0 0 auto; width: 46px; height: 46px; padding: 0; color: var(--ink); }
  .has-sub .caret { transform: rotate(45deg); }
  .has-sub.is-expanded .caret { transform: rotate(-135deg); }

  .subnav {
    flex-basis: 100%;
    display: none;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0.5rem 0.5rem;
    margin: 0;
    min-width: 0;
  }
  .has-sub.is-expanded .subnav { display: grid; }
  .subnav a { padding: 0.5rem 0; }
  .subnav__hint { display: none; }

  .nav-phone { margin-block-start: var(--space-md); justify-content: center; }
}

/* ═══════════ SITE-FOOTER ═══════════ */

.site-footer {
  background: var(--ink);
  color: color-mix(in srgb, var(--paper) 82%, transparent);
  padding-block: clamp(2.25rem, 4vw, 3.5rem) var(--space-lg);
  border-block-start: 3px solid var(--primary);
}
.site-footer a { color: color-mix(in srgb, var(--paper) 82%, transparent); text-decoration: none; }
.site-footer a:hover { color: var(--pop); }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--space-lg);
}

.site-footer__brandlink { display: inline-block; margin-block-end: var(--space-md); }
.site-footer__logo { height: 34px; width: auto; display: block; }
.site-footer__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: var(--space-md);
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}
.site-footer__rating strong { color: var(--paper); }
.site-footer__stars { display: inline-flex; gap: 2px; }
.site-footer__stars svg { width: 15px; height: 15px; color: var(--gold); }

/* ProvenExpert-Siegel (nativ, markenkonform) — Daten aus _data/provenexpert.js */
.pe-seal {
  display: inline-flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-start;
  margin-block-end: var(--space-md);
  padding: 0.65rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--paper) 4%, transparent);
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}
.pe-seal:hover { border-color: var(--pop); background: color-mix(in srgb, var(--paper) 8%, transparent); }
.pe-seal__mark { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); color: var(--paper); letter-spacing: -0.01em; }
.pe-seal__tm { font-size: 0.6em; vertical-align: super; opacity: 0.65; }
.pe-seal__row { display: inline-flex; align-items: center; gap: 0.45rem; }
.pe-seal__stars { display: inline-flex; gap: 2px; color: var(--gold); }
.pe-seal__stars svg { width: 14px; height: 14px; }
.pe-seal__score { font-size: var(--step--1); color: color-mix(in srgb, var(--paper) 80%, transparent); }
.pe-seal__score strong { color: var(--paper); font-weight: 700; }
.pe-seal__label { font-size: var(--step--1); color: color-mix(in srgb, var(--paper) 60%, transparent); }

.site-footer__tagline { max-width: 36ch; line-height: 1.6; margin-block-end: var(--space-md); }
.site-footer__region {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
}

.site-footer__heading {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--pop);
  letter-spacing: 0.1em;
  margin-block-end: var(--space-md);
}
.site-footer__heading--spaced { margin-block-start: var(--space-lg); }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-footer__contact address { font-style: normal; line-height: 1.9; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  margin-block-start: clamp(2rem, 4vw, 3.5rem);
  padding-block-start: var(--space-lg);
  border-block-start: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--paper) 64%, transparent);
}
.site-footer__legal { display: flex; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.site-footer__cookie-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.site-footer__cookie-btn:hover { color: var(--pop); }

@media (max-width: 860px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* WhatsApp Floating-Button (niedrigschwelliger Kontakt) */
.wa-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: #25d366; color: #fff; text-decoration: none;
  padding: 0.7rem 1.1rem; border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--step--1);
  box-shadow: 0 8px 24px -6px rgba(18, 140, 70, 0.5);
  transition: transform 0.15s, box-shadow 0.15s;
}
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(18, 140, 70, 0.6); color: #fff; }
.wa-fab svg { width: 23px; height: 23px; flex: none; }
@media (max-width: 640px) {
  .wa-fab { padding: 0.85rem; right: 16px; bottom: 16px; gap: 0; }
  .wa-fab__label { display: none; }
}

/* ═══════════ LEAD FORM ═══════════ */

.lead-form {
  max-width: 32rem;
  margin: var(--space-lg) auto;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.lead-form__heading {
  margin: 0 0 var(--space-md);
  font-size: 1.5rem;
}

.lead-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.lead-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.lead-form__field label {
  font-size: 0.875rem;
  font-weight: 600;
}

.lead-form__field input,
.lead-form__field textarea,
.lead-form__field select {
  padding: var(--space-sm) 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
}

.lead-form__field input:focus,
.lead-form__field textarea:focus,
.lead-form__field select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.lead-form__consent {
  font-size: 0.8125rem;
}

.lead-form__consent a {
  color: var(--color-primary);
}

.lead-form__turnstile {
  min-height: 65px; /* Layout-Shift vermeiden, bis das Widget lädt */
}

.lead-form__noscript {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #666);
}

.lead-form__submit {
  width: 100%;
  justify-content: center;
}

/* ═══════════ ONBOARDING-FORMULAR (/onboarding/) ═══════════
   Laenger als ein Kontaktformular, deshalb gestaltet statt nur funktionsfaehig:
   Abschnitte als abgesetzte Bloecke mit Nummer, ruhige Felder, klare Pflichtangaben.
   Ein Bogen, den man in einem Zug ausfuellen soll, darf nicht wie ein Amtsformular
   aussehen, sonst bricht der Kunde in der Mitte ab. */
/* Kopfbereich der Seite. Der Reset nimmt allen Elementen ihre Abstaende, und ohne die
   Regeln hier kleben Eyebrow, Ueberschrift und Einleitung aneinander. Verhaeltnis wie
   ueberall im System: Der Abstand UEBER einer Ueberschrift ist groesser als der darunter,
   weil sie zum folgenden Text gehoert, nicht zum vorherigen. */
.onb-kopf .eyebrow {
  margin-block-end: 0.6rem;
}

.onb-kopf h1 {
  margin-block-end: var(--space-md);
}

.onb-kopf .lead {
  margin-block-end: 0;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.onb {
  margin-block-start: var(--space-xl);
  padding-block-end: var(--space-2xl);
  counter-reset: onbschritt;
}

/* Jeder Abschnitt eine eigene Flaeche. Das gliedert den langen Bogen sichtbar und
   gibt beim Scrollen das Gefuehl, Etappen zu schaffen. */
.onb h2 {
  counter-increment: onbschritt;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--step-2);
  font-weight: 600;
  margin-block: var(--space-xl) var(--space-md);
  padding-block-end: var(--space-sm);
  border-block-end: 1px solid var(--color-border);
}

/* Nummer als Kreis vor der Ueberschrift, aus dem Zaehler erzeugt: Die Ziffern im Text
   koennen dadurch nicht mehr mit der tatsaechlichen Reihenfolge auseinanderlaufen. */
.onb h2::before {
  content: counter(onbschritt);
  flex: none;
  inline-size: 1.9em;
  block-size: 1.9em;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full, 999px);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.62em;
  font-weight: 700;
}

.onb h2:first-of-type {
  margin-block-start: var(--space-lg);
}

.onb label {
  display: block;
  margin-block-end: var(--space-md);
  font-weight: 500;
  line-height: 1.4;
}

.onb input,
.onb textarea {
  display: block;
  inline-size: 100%;
  margin-block-start: 0.4rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  font-weight: var(--weight-normal, 400);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.onb input:hover,
.onb textarea:hover {
  border-color: var(--color-primary);
}

.onb input:focus-visible,
.onb textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.onb textarea {
  resize: vertical;
  min-block-size: 5rem;
}

/* Pflichtangabe steht NEBEN der Beschriftung, nicht darunter. Als ::after am Label
   landete sie unter dem Eingabefeld und sah aus wie eine Fehlermeldung (15.08.2026). */
.onb .pflicht {
  color: var(--color-text-muted);
  font-size: var(--step--1);
  font-weight: 400;
}

/* Die Hinweise zwischen den Feldern sind normaler Fliesstext, keine Fussnote: Sie
   erklaeren, was im Preis enthalten ist und woran der Zeitrahmen haengt. In kleiner
   Schrift standen im Bogen zwei Textgroessen durcheinander, und ausgerechnet die
   Saetze mit den Konditionen waren die kleinsten. Nur die Zeile unter dem Absenden
   bleibt klein, das ist wirklich eine Fussnote. */
.onb .hin {
  font-size: inherit;
  color: var(--color-text-muted);
  margin-block: var(--space-sm) var(--space-lg);
  line-height: 1.6;
}

.onb > .hin:last-child {
  font-size: var(--step--1);
}

/* Absaetze ohne eigene Klasse, also die Erklaerungen im Zugaenge-Block. Der Reset
   setzt p-Margins auf null; ohne diese Regel standen sie mit 0px Abstand direkt
   aufeinander und lasen sich als eine einzige Textwand. */
.onb > p:not(.hin):not(.onb__sicher) {
  margin-block: 0 var(--space-md);
}

/* Frueher zog ein negativer Margin die Hinweise dicht an das Feld darueber (8px).
   Das passt fuer eine Bemerkung zu genau einem Feld, aber alle Hinweise in diesem
   Bogen beziehen sich auf den ganzen Abschnitt (Rechnung, Mail-Umzug, Zeitrahmen)
   und wirkten dadurch faelschlich wie eine Fussnote zur letzten Zeile. */

/* Das Sicherheitsversprechen bei den Zugaengen. Es stand zuvor in der kleinen,
   grauen Hinweisgroesse und ging damit unter, obwohl davon abhaengt, ob der Kunde
   ueberhaupt etwas eintraegt. Jetzt normale Textgroesse und als eigener Block
   abgesetzt, damit die Zusage beim Ueberfliegen haengen bleibt. */
.onb__sicher {
  margin-block: var(--space-md) var(--space-lg);
  padding: var(--space-md);
  border-inline-start: 3px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
  line-height: 1.6;
}

/* Auswahlgruppen (Ja/Nein und aehnliches). Ersetzen die frueheren Textfelder, in
   denen der Ausfueller die Antwort selbst formulieren musste und im Platzhalter
   "ja / nein / weiss ich nicht" stand. Anklicken geht schneller, und die Antworten
   kommen einheitlich an statt als "jo", "eher nicht", "kA".
   Aussenabstaende wie ein Label, damit der Rhythmus des Bogens gleich bleibt. */
.onb__wahl {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-md);
}

.onb__wahl legend {
  padding: 0;
  margin-block-end: 0.55rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
}

/* Als `.onb__opt` allein verliert die Regel gegen `.onb label` (gleiche Anzahl
   Klassen, aber dort zusaetzlich der Typ) und die Optionen standen 20px statt 7px
   auseinander: die Gruppe fiel auseinander und man sah nicht mehr, welche Optionen
   zusammengehoeren. Deshalb hier mit dem Elementtyp qualifiziert. */
label.onb__opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-end: 0.45rem;
  font-weight: 400;
  cursor: pointer;
}

label.onb__opt:last-child {
  margin-block-end: 0;
}

/* Ohne diese Regel erben Radio und Checkbox die Feldbreite von 100% aus
   `.onb input` und werden zu einem Balken ueber die ganze Zeile. */
.onb__opt input {
  display: inline-block;
  /* Etwas groesser als die Voreinstellung: Die Zielgruppe ist ueberwiegend nicht
     jung, und ein 13px-Knopf ist auf dem Handy schwer zu treffen. */
  inline-size: 1.15em;
  block-size: 1.15em;
  flex: none;
  margin: 0;
  padding: 0;
  accent-color: var(--color-primary);
}

.onb__wenn[hidden] {
  display: none;
}

/* Die Zugangsfelder sind eingeklappt, weil der bevorzugte Weg die Einladung ist.
   Aufgeklappt stehen dort zehn Felder, davon vier fuer Passwoerter, und das wirkt
   abschreckender als der Bogen tatsaechlich ist. */
.onb__aufklapp {
  margin-block: var(--space-md) var(--space-lg);
}

.onb__aufklapp > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.onb__aufklapp > summary:hover {
  border-color: var(--color-primary);
}

/* Der eigene Marker, weil display:inline-flex den Standard-Pfeil des Browsers
   unterdrueckt. Ohne ihn sieht der Knopf aus wie ein Link ins Nichts. */
.onb__aufklapp > summary::marker,
.onb__aufklapp > summary::-webkit-details-marker {
  content: "";
  display: none;
}

.onb__aufklapp > summary::after {
  content: "";
  inline-size: 0.5em;
  block-size: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -0.15em;
  transition: rotate 0.15s ease;
}

.onb__aufklapp[open] > summary::after {
  rotate: -135deg;
  translate: 0 0.1em;
}

.onb__aufklapp[open] > summary {
  margin-block-end: var(--space-md);
}

.onb__zugang {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg) 0;
  margin-block-end: var(--space-md);
  background: color-mix(in srgb, var(--color-primary) 3%, transparent);
}

.onb__zugang legend {
  padding-inline: 0.6rem;
  font-weight: 600;
  color: var(--color-primary);
}

.onb__zugang label:last-of-type {
  margin-block-end: var(--space-md);
}

.onb input[name="_gotcha"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.onb .cf-turnstile {
  margin-block: var(--space-md);
}

.onb button[type="submit"] {
  inline-size: 100%;
  margin-block: var(--space-lg) var(--space-sm);
  padding-block: 0.9rem;
  font-size: var(--step-1);
}

.onb > .hin:last-child {
  margin-block: var(--space-sm) 0;
  text-align: center;
}

@media (min-width: 48rem) {
  /* Einspaltig bleibt lesbar, nur breiter: bei 40rem wurden lange Beschriftungen
     zweizeilig. Der Absendeknopf darf dann wieder seine natuerliche Breite haben. */
  .onb {
    max-inline-size: 46rem;
  }

  .onb button[type="submit"] {
    inline-size: auto;
    padding-inline: var(--space-lg);
  }
}

/* ═══════════════════════════════ BLOG ═══════════════════════════════ */
/* Archiv-Grid, Artikel-Layout und Inline-Konventionsklassen für Beiträge.
   Nur Design-Tokens aus _base.css, keine Hardcodes (außer #fff). */

/* ─────────────── Archiv: Karten-Grid ─────────────── */

.post-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
}

.post-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.post-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}
.post-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.post-card:hover .post-card__media img { transform: scale(1.04); }

.post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.post-card__cat {
  color: var(--primary-dark);
  padding-inline-start: 0.6rem;
  border-inline-start: 1px solid var(--line-strong);
}

.post-card__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
  margin: 0 0 var(--space-sm);
  color: var(--ink);
}
.post-card:hover .post-card__title { color: var(--primary-dark); }

.post-card__excerpt {
  margin: 0 0 var(--space-md);
  color: var(--ink-soft);
  font-size: var(--step-0);
}

.post-card__more {
  margin-block-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--primary);
}
.post-card__arrow { transition: transform 0.18s ease; }
.post-card:hover .post-card__arrow { transform: translateX(4px); }

/* Leerer Zustand (noch keine Beiträge) */
.post-empty {
  font-size: var(--step-1);
  color: var(--ink-soft);
  text-align: center;
  max-width: 46ch;
  margin-inline: auto;
  padding-block: var(--space-lg);
}

/* ─────────────── Artikel: Kopf & Meta ─────────────── */

.post-header {
  padding-block: clamp(2.5rem, 4vw, 4rem) var(--space-lg);
  border-block-end: 1px solid var(--line);
}
.post-header .eyebrow { margin-block-end: var(--space-sm); }
.post-header__title {
  font-size: var(--step-4);
  line-height: 1.06;
  margin: 0.2em 0 0;
  max-width: 22ch;
}

/* Brotkrumen auf hellem Grund (Basis-.crumbs ist für dunkle Bänder) */
.crumbs--light a { color: var(--ink-soft); }
.crumbs--light a:hover { color: var(--primary); }
.crumbs--light [aria-current="page"] { color: var(--ink); }
.crumbs--light .crumbs__sep { color: var(--line-strong); }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: var(--space-md);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.post-meta time { font-variant-numeric: tabular-nums; }
.post-meta__dot { color: var(--line-strong); }
.post-meta__author { font-weight: 500; color: var(--ink); }

/* Titelbild des Artikels */
.post__figure {
  margin: 0;
  padding-block: var(--space-lg);
}
.post__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.post__figure figcaption {
  margin-block-start: var(--space-sm);
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: center;
}

/* ─────────────── Artikel: lesefreundlicher Textkörper ─────────────── */

.post-body {
  max-width: 70ch;
  margin-inline: auto;
  padding-block: var(--space-lg);
  line-height: 1.75;
}
/* Bilder im Fließtext */
.post-body figure { margin-block: var(--space-lg); }
.post-body figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.post-body figcaption {
  margin-block-start: var(--space-sm);
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: center;
}

/* ─────────────── Inline-Konventionsklassen für Autoren ─────────────── */

/* .post-box — Info-/Hinweis-Box (heller Petrol-Tint, Akzentkante links) */
.post-box {
  margin-block: var(--space-lg);
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  background: color-mix(in srgb, var(--primary) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-inline-start: 3px solid var(--primary);
  border-radius: var(--radius-sm);
}
.post-box > :first-child { margin-block-start: 0; }
.post-box > :last-child { margin-block-end: 0; }
.post-box__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--primary-dark);
  margin-block-end: var(--space-xs);
}
/* Key-Takeaway-Variante (Gold-Akzent) */
.post-box--key {
  background: color-mix(in srgb, var(--gold) 10%, #fff);
  border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
  border-inline-start-color: var(--gold);
}
.post-box--key .post-box__title { color: var(--ink); }

/* .post-cta — auffällige CTA-Box im Artikel (dunkles Band) */
.post-cta {
  margin-block: var(--space-xl);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--dark);
  color: #fff;
  border-radius: var(--radius-lg);
  text-align: center;
}
.post-cta__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: #fff;
  margin: 0 0 var(--space-sm);
}
.post-cta p { color: color-mix(in srgb, #fff 82%, transparent); margin-block: 0 var(--space-md); }
.post-cta .btn {
  --btn-bg: var(--pop);
  --btn-fg: var(--pop-ink);
  color: var(--pop-ink);
}
.post-cta .btn:hover {
  background: color-mix(in srgb, var(--pop) 84%, var(--ink));
  border-color: color-mix(in srgb, var(--pop) 84%, var(--ink));
  color: var(--pop-ink);
}

/* .post-steps — nummerierte Schritt-Liste mit Petrol-Nummern */
.post-steps {
  list-style: none;
  counter-reset: post-step;
  margin-block: var(--space-lg);
  padding: 0;
  display: grid;
  gap: var(--space-md);
}
.post-steps li {
  counter-increment: post-step;
  position: relative;
  padding-inline-start: 3.25rem;
  min-height: 2.25rem;
}
.post-steps li::before {
  content: counter(post-step, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  color: #fff;
  background: var(--primary);
  border-radius: var(--radius-sm);
}
.post-steps li > strong:first-child {
  display: block;
  font-family: var(--font-display);
  color: var(--ink);
}

/* ─────────────── Artikel: Autor-Box ─────────────── */

.post-author {
  margin-block: var(--space-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--primary) 5%, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.post-author__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  margin: 0;
  color: var(--ink);
}
.post-author__role {
  margin: 0.1rem 0 var(--space-sm);
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.post-author__bio {
  margin: 0 0 var(--space-md);
  color: var(--ink-soft);
}
.post-author__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
}
.post-author__links span { color: var(--line-strong); }

/* ── SEO-Guide (Lead-Magnet, dokument-artig) ── */
.guide-wrap { max-width: 760px; }

/* Cover: dunkles Dokument-Cover */
.guide-cover { background: var(--accent); color: #fff; padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.4rem, 6vw, 4rem); position: relative; }
.guide-cover .container { max-width: 860px; }
.guide-cover__crumbs { font-size: var(--step--1); color: rgba(255, 255, 255, 0.55); margin: 0 0 clamp(1.6rem, 5vw, 3rem); }
.guide-cover__crumbs a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.guide-cover__crumbs a:hover { color: var(--pop); }
.guide-cover__crumbs span[aria-hidden] { margin: 0 0.4em; color: rgba(255, 255, 255, 0.3); }
.guide-cover__eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pop); margin: 0 0 var(--space-md); }
.guide-cover__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pop); }
.guide-cover__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 var(--space-lg); color: #fff; }
.guide-cover__sub { font-size: var(--step-1); line-height: 1.55; color: rgba(255, 255, 255, 0.82); max-width: 40rem; margin: 0 0 clamp(1.8rem, 5vw, 2.6rem); }
.guide-cover__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; font-size: var(--step--1); color: rgba(255, 255, 255, 0.6); }
.guide-cover__by { color: rgba(255, 255, 255, 0.92); font-weight: 600; }
.guide-cover__sep { color: rgba(255, 255, 255, 0.3); }
.guide-cover__print { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 0.5rem 0.9rem; font: inherit; font-size: var(--step--1); font-weight: 600; cursor: pointer; transition: background 0.15s; }
.guide-cover__print:hover { background: rgba(143, 223, 255, 0.18); border-color: var(--pop); color: var(--pop); }
.guide-cover__inner { display: flex; flex-direction: column; gap: clamp(1.6rem, 5vw, 2.6rem); }
.guide-cover__brand { display: none; } /* am Bildschirm zeigt der Site-Header das Logo; im PDF (Print) wird es eingeblendet */
.guide-cover__logo { height: 34px; width: auto; display: block; }
.guide-cover__hero .guide-cover__sub { margin-bottom: 0; }
.guide-cover__download { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: clamp(1.6rem, 5vw, 2.4rem); background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; padding: 0.7rem 1.15rem; font-size: var(--step--1); font-weight: 600; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.guide-cover__download:hover { background: rgba(143, 223, 255, 0.18); border-color: var(--pop); color: var(--pop); }
.guide-cover__download svg { flex: none; }
.guide-cover__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.35rem 1rem; padding-top: clamp(1.1rem, 4vw, 1.6rem); border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: var(--step--1); }
.guide-cover__by { color: rgba(255, 255, 255, 0.92); font-weight: 600; }
.guide-cover__site { color: var(--pop); }

/* Kontakt-Abschluss (nur im PDF/Print) */
.guide-contact { display: none; }
.guide-contact__card { background: var(--accent); color: #fff; border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.2rem); }
.guide-contact__eyebrow { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pop); margin: 0 0 0.5rem; }
.guide-contact__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: #fff; margin: 0 0 0.6rem; }
.guide-contact__text { font-size: var(--step-0); line-height: 1.6; color: rgba(255, 255, 255, 0.85); margin: 0 0 var(--space-md); max-width: 46rem; }
.guide-contact__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.guide-contact__rows li { display: flex; align-items: baseline; gap: 0.8rem; font-size: var(--step-0); }
.guide-contact__rows span { flex: 0 0 5.5rem; color: var(--pop); font-size: var(--step--1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.guide-contact__rows strong { color: #fff; font-weight: 600; }

/* Intro / Outro */
.section.guide-intro, .section.guide-outro { padding-block: clamp(2.4rem, 6vw, 4rem); }
.guide-lead { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1.3; color: var(--ink); margin: 0 0 var(--space-md); letter-spacing: -0.01em; }
.guide-intro p, .guide-outro p { font-size: var(--step-1); line-height: 1.65; color: var(--ink-soft); margin: 0 0 var(--space-md); }
.guide-sign { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--primary); margin-top: var(--space-md) !important; }

/* Inhaltsübersicht (Vorwort-Seite) */
.guide-toc { margin-top: clamp(1.6rem, 4vw, 2.4rem); padding-top: clamp(1.4rem, 4vw, 2rem); border-top: 1px solid var(--line); }
.guide-toc__h { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); margin: 0 0 var(--space-md); }
.guide-toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.guide-toc__list li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.9rem; align-items: baseline; }
.guide-toc__n { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); line-height: 1; color: color-mix(in srgb, var(--primary) 45%, #fff); }
.guide-toc__txt { font-size: var(--step-0); line-height: 1.5; color: var(--ink-soft); }
.guide-toc__txt strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--ink); margin-bottom: 0.1rem; }

/* Kapitel */
.section.guide-chapter { padding-block: clamp(2.6rem, 7vw, 4.5rem); }
.guide-chapter--alt { background: var(--surface); }
.guide-chapter__head { margin-bottom: clamp(1.8rem, 5vw, 2.8rem); }
.guide-chapter__kicker { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); margin-bottom: 0.6rem; }
.guide-chapter__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--space-sm); }
.guide-chapter__intro { font-size: var(--step-1); line-height: 1.6; color: var(--ink-soft); max-width: 44rem; margin: 0; }

/* Teil 1: Hebel-Cards */
.guide-hebel { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.4rem); }
.guide-hebel__card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 1.9rem); }
.guide-hebel__num { display: flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--accent); color: var(--pop); font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); margin-bottom: var(--space-sm); }
.guide-hebel__h { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--ink); margin: 0 0 0.5rem; }
.guide-hebel__t { font-size: var(--step-0); line-height: 1.6; color: var(--ink-soft); margin: 0 0 var(--space-sm); }
.guide-hebel__check { font-size: var(--step--1); line-height: 1.55; color: var(--ink); background: color-mix(in srgb, var(--primary) 7%, #fff); border-left: 3px solid var(--primary); border-radius: 0 6px 6px 0; padding: 0.7rem 0.85rem; margin: 0; }
.guide-hebel__check-lbl { display: block; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72em; margin-bottom: 0.2rem; }

/* Teil 2: Steps */
.guide-steps { list-style: none; counter-reset: none; margin: 0; padding: 0; display: grid; gap: clamp(0.8rem, 2vw, 1.2rem); }
.guide-steps__item { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 2.5vw, 1.5rem); align-items: start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 1.6rem) clamp(1.3rem, 3vw, 1.8rem); }
.guide-steps__num { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1; color: color-mix(in srgb, var(--primary) 30%, #fff); }
.guide-steps__h { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--ink); margin: 0 0 0.35rem; }
.guide-steps__body p { font-size: var(--step-0); line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* Teil 3: Flags (Signature-Element) */
.guide-flags { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.4rem); margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.guide-flags__col { border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 1.8rem); border: 1px solid var(--line); }
.guide-flags__col--good { background: color-mix(in srgb, var(--primary) 6%, #fff); border-color: color-mix(in srgb, var(--primary) 22%, #fff); }
.guide-flags__col--bad { background: color-mix(in srgb, #c0392b 5%, #fff); border-color: color-mix(in srgb, #c0392b 18%, #fff); }
.guide-flags__h { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); margin: 0 0 var(--space-sm); }
.guide-flags__col--good .guide-flags__h { color: var(--primary-dark, #00576e); }
.guide-flags__col--bad .guide-flags__h { color: #b3402f; }
.guide-flags__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.guide-flags__col li { position: relative; padding-left: 1.4rem; font-size: var(--step-0); line-height: 1.5; color: var(--ink); }
.guide-flags__col li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; }
.guide-flags__col--good li::before { background: var(--primary); }
.guide-flags__col--bad li::before { background: #c0392b; }

/* Drei Fragen */
.guide-ask { background: var(--accent); color: #fff; border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.2rem); }
.guide-ask__h { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: #fff; margin: 0 0 var(--space-sm); }
.guide-ask__item { font-size: var(--step-1); line-height: 1.5; color: rgba(255, 255, 255, 0.9); margin: 0 0 0.7rem; padding-left: 1.7rem; position: relative; }
.guide-ask__item:last-child { margin-bottom: 0; }
.guide-ask__item span { position: absolute; left: 0; font-family: var(--font-display); font-weight: 700; color: var(--pop); }

@media (max-width: 640px) {
  .guide-hebel, .guide-flags { grid-template-columns: 1fr; }
  .guide-cover__print { margin-left: 0; }
}

/* Teil 2: Methode (Cards) */
.guide-method { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.4rem); }
.guide-method__item { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 1.7rem); }
.guide-method__h { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--ink); margin: 0 0 0.5rem; }
.guide-method__t { font-size: var(--step-0); line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* Teil 3: Cases (Story-Blöcke) */
.guide-case { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.2rem); margin-bottom: clamp(1rem, 2.5vw, 1.4rem); }
.guide-case:last-child { margin-bottom: 0; }
.guide-case__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: var(--space-sm); }
.guide-case__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--ink); margin: 0; }
.guide-case__domain { font-size: var(--step--1); font-weight: 600; color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, #fff); padding: 0.25rem 0.6rem; border-radius: 6px; white-space: nowrap; }
.guide-case__intro { font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); margin: 0 0 var(--space-md); }
.guide-case__label { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); margin: 0 0 0.6rem; }
.guide-case__steps { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; gap: 0.5rem; }
.guide-case__steps li { position: relative; padding-left: 1.5rem; font-size: var(--step-0); line-height: 1.5; color: var(--ink); }
.guide-case__steps li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 2px; background: var(--primary); }
.guide-case__result { font-size: var(--step-1); line-height: 1.5; color: var(--ink); background: color-mix(in srgb, var(--primary) 7%, #fff); border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0; padding: 0.9rem 1.1rem; margin: 0 0 0.6rem; }
.guide-case__result strong { color: var(--primary-dark, #00576e); }
.guide-case__proof { font-size: var(--step--1); color: var(--ink-soft); margin: 0; font-style: italic; }
@media (max-width: 640px) { .guide-method { grid-template-columns: 1fr; } }

/* ── Lead-Magnet-Landing (/seo-guide/) ── */
.section.guide-lp-hero { background: var(--accent); color: #fff; padding-block: clamp(2.6rem, 6vw, 4.8rem); }
.section.guide-lp-toc-sec { padding-block: clamp(2.6rem, 7vw, 4.5rem); }
.section.guide-lp-author-sec { padding-block: clamp(2.4rem, 6vw, 4rem); }

.guide-lp-hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.guide-lp-crumbs { font-size: var(--step--1); color: rgba(255, 255, 255, 0.55); margin: 0 0 var(--space-md); }
.guide-lp-crumbs a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.guide-lp-crumbs a:hover { color: var(--pop); }
.guide-lp-crumbs span[aria-hidden] { margin: 0 0.4em; color: rgba(255, 255, 255, 0.3); }
.guide-lp-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pop); margin: 0 0 var(--space-md); }
.guide-lp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pop); }
.guide-lp-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.06; letter-spacing: -0.02em; color: #fff; margin: 0 0 var(--space-md); }
.guide-lp-sub { font-size: var(--step-1); line-height: 1.55; color: rgba(255, 255, 255, 0.82); margin: 0; max-width: 42ch; }

.guide-lp-card { background: #fff; border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2rem); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); }
.guide-lp-card__h { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--ink); margin: 0 0 var(--space-sm); }
.guide-lp-card__trust { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; font-size: var(--step--1); color: var(--ink-soft); margin: var(--space-sm) 0 0; padding-top: var(--space-sm); border-top: 1px solid var(--line); }
.guide-lp-card__trust strong { color: var(--ink); }
.guide-lp-stars { display: inline-flex; color: var(--gold); }
.guide-lp-stars svg { width: 15px; height: 15px; }
.nl-signup--card .nl-signup__form { flex-direction: column; align-items: stretch; }
.nl-signup--card .nl-signup__input { flex: 0 0 auto; }
.nl-signup--card .nl-signup__form .btn { width: 100%; justify-content: center; }

.guide-lp-kicker { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); margin: 0 0 0.5rem; }
.guide-lp-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 clamp(1.6rem, 4vw, 2.4rem); }
.guide-lp-toc { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.4rem); }
.guide-lp-toc__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 1.8rem); }
.guide-lp-toc__num { display: flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--accent); color: var(--pop); font-family: var(--font-display); font-weight: 700; margin-bottom: var(--space-sm); }
.guide-lp-toc__item h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--ink); margin: 0 0 0.4rem; }
.guide-lp-toc__item p { font-size: var(--step-0); line-height: 1.55; color: var(--ink-soft); margin: 0; }

.guide-lp-author { display: flex; align-items: center; gap: clamp(1.4rem, 4vw, 2.5rem); flex-wrap: wrap; }
.guide-lp-author__img { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); }
.guide-lp-author__body { flex: 1 1 22rem; }
.guide-lp-author__text { font-size: var(--step-1); line-height: 1.55; color: var(--ink); margin: 0 0 var(--space-sm); font-style: italic; }
.guide-lp-author__name { font-family: var(--font-display); font-weight: 700; color: var(--primary); margin: 0 0 var(--space-md); }

@media (max-width: 820px) {
  .guide-lp-hero__inner { grid-template-columns: 1fr; }
  .guide-lp-toc { grid-template-columns: 1fr; }
}

/* Print: sauberes, gebrandetes PDF-Layout */
@media print {
  .site-header, .site-footer, .cta-band, .guide-cover__crumbs, .guide-cover__print, .guide-cover__download, [data-cc] { display: none !important; }

  /* Hintergründe/Farben drucken */
  .guide-cover, .guide-ask, .guide-contact__card, .guide-flags__col--good, .guide-flags__col--bad, .guide-case__result, .guide-hebel__num {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* Cover: vollflächiges dunkles Markencover (Seite 1) */
  .guide-cover { background: var(--accent) !important; color: #fff !important; padding: 0 !important; border: none !important; break-after: page; }
  .guide-cover .container { max-width: none; }
  .guide-cover__inner { min-height: 252mm; justify-content: space-between; gap: 0; }
  .guide-cover__brand { display: block; }
  .guide-cover__logo { height: 42px; }
  .guide-cover__hero { margin-block: auto; }
  .guide-cover__eyebrow { color: var(--pop) !important; }
  .guide-cover__dot { background: var(--pop) !important; }
  .guide-cover__title { color: #fff !important; font-size: 38pt; line-height: 1.04; margin: 0 0 6mm; }
  .guide-cover__sub { color: rgba(255, 255, 255, 0.86) !important; font-size: 12.5pt; line-height: 1.5; max-width: 150mm; }
  .guide-cover__foot { border-top-color: rgba(255, 255, 255, 0.24); font-size: 9pt; padding-top: 4mm; }
  .guide-cover__by { color: #fff !important; }
  .guide-cover__site { color: var(--pop) !important; }

  /* Fluss + Umbrüche: jeder Teil startet sauber, keine verwaisten Überschriften */
  .section.guide-chapter, .section.guide-intro, .section.guide-outro, .guide-contact { padding-block: 0.4rem !important; }
  .guide-chapter__head { margin-bottom: 0.8rem; break-after: avoid; break-inside: avoid; }
  .guide-chapter__intro { margin-bottom: 0; }
  .guide-chapter--alt, .guide-hebel__card, .guide-steps__item { background: #fff !important; }
  .guide-steps { gap: 0.45rem; }
  .guide-steps__item { padding: 0.65rem 1rem; }
  .guide-hebel, .guide-method { gap: 0.6rem; }
  .guide-case { padding: 1.1rem 1.3rem; margin-bottom: 0.8rem; }
  .guide-hebel__card, .guide-steps__item, .guide-method__item, .guide-ask, .guide-flags, .guide-case, .guide-case__steps, .guide-case__result, .guide-case__head { break-inside: avoid; }

  /* Kontakt-Abschluss im PDF zeigen */
  .guide-contact { display: block !important; break-inside: avoid; }
}

/* ═══════════ COOKIE CONSENT OVERRIDES ═══════════ */

:root {
  --cc-bg: var(--color-bg);
  --cc-text: var(--color-text);
  --cc-btn-primary-bg: var(--color-primary);
  --cc-btn-primary-text: #fff;
  --cc-btn-primary-hover-bg: var(--color-primary-hover);
  --cc-btn-secondary-bg: var(--color-bg-alt);
  --cc-btn-secondary-text: var(--color-text);
  --cc-btn-secondary-hover-bg: var(--color-border);
  --cc-toggle-bg-on: var(--color-primary);
  --cc-link: var(--color-primary);
  --cc-link-hover: var(--color-primary-hover);
  --cc-cookie-category-block-bg: var(--color-bg-alt);
  --cc-overlay-bg: rgba(0, 0, 0, 0.5);
  --cc-font-family: var(--font-sans);
  --cc-modal-border-radius: var(--radius-xl);
}

.site-footer__cookie-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.site-footer__cookie-btn:hover {
  color: var(--color-primary);
}