/* ---- Schriften: self-hosted, Latin-Subset, SIL OFL (Lizenz in _assets/fonts/) ---- */
@font-face{
  font-family:'Montserrat';
  src:url('../fonts/montserrat-var-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-var-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ============================================================
   ProfitWerk — main.css
   Grundgeruest: Tokens + minimaler Reset. Kein Framework.

   ACHTUNG: Die Werte unten sind PLATZHALTER. CLAUDE.md enthaelt
   keine Design-Tokens (geprueft am 09.09.2026). Sobald das Design
   steht, nur den :root-Block ersetzen — der Rest der Datei haengt
   ausschliesslich an diesen Variablen.
   ============================================================ */

:root {
  /* --- Farben --------------------------------------------- */
  --color-bg: var(--flaeche);
  --color-surface: var(--flaeche-alt);
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --color-border: var(--linie);
  --color-accent: var(--rot);
  --color-accent-hover: var(--rot-dunkel);
  --color-focus: var(--rot);

  /* --- Typografie ----------------------------------------- */
  --font-sans: var(--font-text);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: var(--h2-size);
  --text-3xl: var(--h1-size);

  --leading-tight: 1.15;
  --leading-normal: 1.6;
  --tracking-tight: -0.01em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* --- Abstaende (4px-Raster) ------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* --- Layout --------------------------------------------- */
  --wrap-max: 1200px;
  --wrap-narrow: 720px;
  --wrap-gutter: var(--space-6);

  /* --- Form ----------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --border-width: 1px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* --- Bewegung ------------------------------------------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Reset — minimal, nur was wirklich stoert
   ============================================================ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;  /* nie 100vh (iOS-Sprung, CLAUDE.md §5) */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  hyphens: none;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: break-word;
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p, li { text-wrap: pretty; }

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease);
}

a:hover { color: var(--color-accent-hover); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button { cursor: pointer; }

ul, ol { padding: 0; list-style: none; }

table { border-collapse: collapse; width: 100%; }

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

/* ============================================================
   Layout-Grundlagen
   ============================================================ */

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--wrap-gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

.site-header {
  border-bottom: var(--border-width) solid var(--color-border);
  padding-block: var(--space-4);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.logo {
  color: var(--color-text);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  text-decoration: none;
}

.site-nav ul {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--color-text);
  text-decoration: none;
}

.site-nav a:hover { color: var(--color-accent); }

.hero {
  padding-block: var(--space-24);
}

.site-footer {
  border-top: var(--border-width) solid var(--color-border);
  margin-top: var(--space-24);
  padding-block: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.site-footer ul {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.copyright { color: var(--color-text-muted); }

/* ---- Signatur: Kalkulationszeile (Zahlen wie im Aufmassblatt) ---- */
.zahlen { font-variant-numeric: tabular-nums; }

/* ============================================================
   C3 · Typo-Hero (Referenz-Prinzipien: Ink-CTA-Disziplin,
   Zeilen statt Karten; Signatur: Kalkulationszeile)
   ============================================================ */

.logo {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .05em;
  font-size: var(--text-18);
}

.hero {
  padding-block: var(--s14) var(--s8);
  background: var(--flaeche);
}

.hero .kicker {
  display: block;
  font-family: var(--font-text);
  font-size: var(--text-14);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rot);
  margin-bottom: var(--s2);
}

.hero h1 {
  max-width: 16ch;
  margin-bottom: var(--s3);
  font-weight: 800;
}

.hero-satz {
  max-width: 44ch;
  font-size: var(--text-18);
  color: var(--color-text);
  margin-bottom: var(--s4);
}

.kalkzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s2);
  width: fit-content;
  border-top: 2px solid var(--rot);   /* der rote Strich aus der Wortmarke */
  border-bottom: 1px solid var(--linie);
  padding: var(--s2) 0;
  margin-bottom: var(--s6);
  font-size: var(--text-14);
  color: var(--muted);
}

.kalkzeile .wert { font-weight: 600; color: var(--ink); }
.kalkzeile .op { color: var(--rot); font-weight: 700; }
.kalkzeile .ergebnis { color: var(--rot); }

.cta {
  display: inline-block;
  background: var(--rot);
  color: #fff;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--text-16);
  padding: 14px 28px;
  border-radius: var(--radius-s);
  text-decoration: none;
  transition: background var(--t-hover) var(--ease);
  min-height: 40px;
}

.cta:hover { background: var(--rot-dunkel); color: #fff; }

/* Reveal: CSS-only, Endzustand im Markup sichtbar, kein JS noetig */
@media (prefers-reduced-motion: no-preference) {
  .hero .kicker, .hero h1, .hero-satz, .kalkzeile, .hero-usp, .hero .cta, .hero-media {
    animation: hero-reveal var(--t-reveal) var(--ease) backwards;
  }
  .hero h1 { animation-delay: 60ms; }
  .hero-satz { animation-delay: 140ms; }
  .kalkzeile, .hero-usp { animation-delay: 220ms; }
  .hero .cta { animation-delay: 300ms; }
  .hero-media { animation-delay: 380ms; }
}

@keyframes hero-reveal {
  from { clip-path: inset(0 0 100% 0); transform: translateY(10px); }
  to   { clip-path: inset(0 0 -20% 0); transform: none; }
}

@media (max-width: 640px) {
  .hero { padding-block: var(--s8) var(--s6); }
  .hero-satz { font-size: var(--text-16); }
}

/* ---- Sektion: Die Rechnung (Oversized-Zeilen, kein Kasten) ---- */
.rechnung {
  background: var(--flaeche-alt);
  padding-block: var(--s14);
}

.rechnung h2 {
  max-width: 22ch;
  margin-bottom: var(--s6);
}

.rechnung .zeile {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s2) var(--s6);
  align-items: baseline;
  border-top: 1px solid var(--linie);
  padding-block: var(--s4);
}

.rechnung .zeile:last-child { border-bottom: 1px solid var(--linie); }

.rechnung h3 {
  font-size: var(--text-22);
  font-weight: 700;
  line-height: 1.25;
}

.rechnung p {
  margin: 0;
  max-width: 52ch;
  color: var(--color-text);
}

@media (max-width: 980px) {
  .rechnung .zeile { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .rechnung { padding-block: var(--s8); }
}

/* ---- Sektion: So kommen Auftraege (Sticky-Scrollytelling, Signatur) ---- */
.eyebrow {
  font-size: var(--text-14);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rot);
  margin-bottom: var(--s1);
}

.scrolly { padding-block: var(--s14); }
.scrolly h2 { max-width: 20ch; margin-bottom: var(--s6); }

.scrolly-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s8);
  align-items: start;
}

.schritte { counter-reset: none; display: flex; flex-direction: column; gap: var(--s8); }

.schritt { position: relative; padding-left: calc(var(--s6) + var(--s2)); }
.schritt .nr {
  position: absolute; left: 0; top: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-22);
  color: var(--rot);
  border-bottom: 2px solid var(--rot);
  line-height: 1.4;
}
.schritt h3 { font-size: var(--text-22); margin-bottom: var(--s1); }
.schritt p { max-width: 44ch; }
.schritt-fig { margin: var(--s3) 0 0; }
.schritt-fig svg { width: 100%; max-width: 340px; height: auto; display: block; background: var(--flaeche-alt); border-radius: var(--radius-m); }

.panel { position: sticky; top: var(--s6); }
.panel-fig { margin: 0; }
.panel-fig svg { width: 100%; height: auto; display: block; background: var(--flaeche-alt); border-radius: var(--radius-l); }

/* Ohne JS: alle drei Panels sichtbar (gestapelt). Mit JS: Wechsel-Logik. */
.js .panel { min-height: 300px; }
.js .panel-fig {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
}
.js .panel-fig.aktiv { opacity: 1; transform: none; }

/* Desktop zeigt das Panel, die Schritt-Bilder verschwinden — mobil umgekehrt */
@media (min-width: 981px) {
  .js .schritt-fig { display: none; }
}
@media (max-width: 980px) {
  .scrolly-grid { grid-template-columns: 1fr; }
  .panel { display: none; }
  .scrolly { padding-block: var(--s8); }
}

@media (prefers-reduced-motion: reduce) {
  .js .panel-fig { transition: none; transform: none; }
}

/* ---- Mobile Navigation (Burger als Textknopf, kein Icon-Schmuck) ---- */
.nav-toggle {
  background: none;
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  padding: 8px 14px;
  font-weight: 600;
  font-size: var(--text-14);
  min-height: 40px;
  display: none;
}

@media (max-width: 980px) {
  .js .nav-toggle { display: inline-block; }
  .js .site-nav { display: none; width: 100%; padding-top: var(--s2); }
  .js .site-header.nav-offen .site-nav { display: block; }
  .js .site-nav ul { flex-direction: column; gap: var(--s2); }
}

.site-nav a[aria-current="page"] {
  color: var(--rot);
  font-weight: 600;
}

/* ---- Unterseiten: kleiner Hero, FAQ, CTA-Band, Formular ---- */
.hero--klein { padding-block: var(--s8) var(--s6); }
.hero--klein h1 { font-size: var(--h2-size); max-width: 24ch; }

.rechnung .einleitung { max-width: 55ch; }

.faq { padding-block: var(--s8); background: var(--flaeche-alt); }
.faq h2 { margin-bottom: var(--s4); }
.faq details { border-top: 1px solid var(--linie); padding-block: var(--s2); max-width: 720px; }
.faq details:last-child { border-bottom: 1px solid var(--linie); }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; position: relative; padding-right: var(--s4); min-height: 40px; display: flex; align-items: center; }
.faq summary::after { content: "▾"; position: absolute; right: 0; color: var(--rot); transition: transform var(--t-hover) var(--ease); }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p { margin-top: var(--s1); max-width: 65ch; }

.cta-band { background: var(--ink); color: #fff; padding-block: var(--s8); }
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.cta-band p { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-22); max-width: 30ch; }

.formular { padding-block: var(--s6) var(--s14); }
.formular form { max-width: 560px; display: flex; flex-direction: column; gap: var(--s3); }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label { font-weight: 600; font-size: var(--text-14); }
.feld input, .feld textarea {
  border: 1px solid var(--linie); border-radius: var(--radius-s);
  padding: 12px; background: var(--flaeche); min-height: 44px;
}
.feld input:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--rot); outline-offset: 1px; }
.feld--consent { flex-direction: row; align-items: flex-start; gap: var(--s2); font-size: var(--text-14); }
.feld--consent input { min-height: 0; width: 18px; height: 18px; margin-top: 3px; }
.formular .cta { border: 0; cursor: pointer; align-self: flex-start; }
.hp { position: absolute; left: -9999px; }

/* ---- Preisseite ---- */
.preise { padding-block: var(--s6) 0; }
.preistabelle { max-width: 720px; margin-top: var(--s3); border-collapse: collapse; }
.preistabelle th, .preistabelle td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.preistabelle th { font-size: var(--text-14); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.preistabelle td:nth-child(2) { font-weight: 700; white-space: nowrap; }
.preistabelle .summe td { border-top: 2px solid var(--rot); border-bottom: 0; font-weight: 700; }
.preistabelle .summe td:nth-child(2) { color: var(--rot); }
.hinweis { font-size: var(--text-13); color: var(--muted); max-width: 65ch; margin-top: var(--s2); }
.rechnung--grenze { background: var(--flaeche-alt); }
.gruender { padding-block: var(--s8) var(--s14); }
.gruender p { max-width: 60ch; margin-bottom: var(--s4); }
.gruender .zahlen { color: var(--rot); }

/* ---- Logo mit Monogramm ---- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo img { display: block; height: 44px; width: auto; }
.rechtstext { padding-block: 0 var(--s14); }
.rechtstext .wrap { max-width: 780px; }
.rechtstext h2 { margin-top: var(--s6); }
.rechtstext h3 { font-size: var(--text-18); margin-top: var(--s4); margin-bottom: var(--s1); }
.rechtstext h4 { font-size: var(--text-16); margin-top: var(--s3); margin-bottom: var(--s1); }
.rechtstext p { max-width: 72ch; }

/* ---- Rechtsseiten: ruhige Typo, Zwischentitel als fette Labels (Vorbild-Layout) ---- */
.rechtstext h2, .rechtstext h3, .rechtstext h4 {
  font-family: var(--font-text);
  font-size: var(--text-18);
  font-weight: 700;
  letter-spacing: 0;
  margin: var(--s4) 0 var(--s1);
}
.rechtstext h3, .rechtstext h4 { font-size: var(--text-16); }
.rechtstext p { font-size: var(--text-16); margin-bottom: var(--s2); }

/* ---- Rechtsseiten-Feinschliff nach Vorbild-Messung (52px-H1, Luft, 16px-Labels) ---- */
.hero--recht { padding-block: var(--s14) var(--s4); }
.hero--recht h1 { font-size: clamp(30px, 4vw, 52px); font-weight: 700; hyphens: manual; overflow-wrap: normal; }
.rechtstext h2, .rechtstext h3, .rechtstext h4 { font-size: var(--text-16); margin: var(--s4) 0 var(--s1); }
.rechtstext p { line-height: 1.6; }
.rechtstext a { color: var(--ink); text-decoration: underline; }
.rechtstext a:hover { color: var(--rot); }

/* Rechtstext buendig zur H1: gleiche Wrapper-Linie, Zeilenbreite ueber die Elemente */
.rechtstext .wrap { max-width: var(--wrapper); }

/* ---- Abbinder nach Vorbild: Logo-Zeile, vier Spalten, Copyright ---- */
.site-footer { background: var(--flaeche-alt); margin-top: var(--s14); padding-block: var(--s8); color: var(--color-text); font-size: var(--text-14); }
.footer-kopf { border-bottom: 1px solid var(--linie); padding-bottom: var(--s4); margin-bottom: var(--s6); }
.footer-spalten { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s6); }
.footer-info p { max-width: 40ch; margin-bottom: var(--s2); }
.footer-claim { font-weight: 700; font-size: var(--text-16); }
.footer-adresse { color: var(--muted); }
.footer-label { color: var(--muted); margin-bottom: var(--s2); }
.footer-spalten ul { display: block; }
.footer-spalten li { margin-bottom: var(--s2); }
.footer-spalten a, .footer-info a { color: var(--color-text); text-decoration: none; }
.footer-spalten a:hover, .footer-info a:hover { color: var(--rot); }
.site-footer .copyright { margin-top: var(--s6); border-top: 1px solid var(--linie); padding-top: var(--s4); color: var(--muted); }
@media (max-width: 980px) { .footer-spalten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-spalten { grid-template-columns: 1fr; } }

.form-fehler { background: #FBEAEA; border-left: 3px solid var(--rot); padding: var(--s2) var(--s3); max-width: 560px; }

/* ---- Luft-Balance vor dem Abbinder (Befund Jonas, /preise/) ---- */
.gruender { padding-block: var(--s8); }          /* statt s8 + s14: kein Leerlauf unter dem CTA */
.site-footer { margin-top: 0; }                   /* Sektionen bringen ihren Abstand selbst mit */

/* ---- Sektion: Der Unterschied (Vorher/Nachher, Muster „Alter Weg / Neuer Weg") ---- */
.effekt { background: var(--flaeche-alt); padding-block: var(--s14); }
.effekt h2 { max-width: 24ch; margin-bottom: var(--s6); }

.effekt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s4);
  align-items: stretch;
}

.effekt-karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  padding: var(--s4);
}
.effekt-karte--nachher { border-color: var(--rot); }

.karte-label {
  font-size: var(--text-13);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s1);
}
.effekt-karte--nachher .karte-label { color: var(--rot); }
.effekt-karte h3 { font-size: var(--text-22); margin-bottom: var(--s1); }
.effekt-karte > p { font-size: var(--text-14); color: var(--muted); max-width: 40ch; }

.effekt-pfeil {
  align-self: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}

.plan-scroll { overflow-x: auto; margin-top: var(--s3); }
.plan { border-collapse: collapse; width: 100%; font-size: 11px; }
.plan th, .plan td { border: 1px solid var(--linie); padding: 6px; text-align: center; white-space: nowrap; }
.plan th { color: var(--muted); font-weight: 600; }
.plan th[scope="row"] { text-align: left; }
.plan .frei { color: var(--muted); background: var(--flaeche-alt); }

.chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-s);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}
.effekt-karte--nachher .chip { background: var(--rot); }

.karte-fuss { font-size: var(--text-13); font-weight: 600; margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--linie); }
.karte-fuss--warn { color: var(--muted); }
.karte-fuss--gut { color: var(--rot); }

.effekt .hinweis { margin-top: var(--s4); }

/* Reveal: Chips der Nachher-Karte bauen sich gestaffelt auf. Ohne JS: alles sichtbar. */
.js [data-reveal]:not(.sichtbar) .effekt-karte--nachher .chip { opacity: 0; transform: translateY(6px); }
.effekt-karte--nachher .chip { transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }

@media (max-width: 980px) {
  .effekt-grid { grid-template-columns: minmax(0, 1fr); }   /* minmax(0): Karte darf nicht am Tabellen-Mindestmass wachsen */
  .effekt { padding-block: var(--s8); }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not(.sichtbar) .effekt-karte--nachher .chip { opacity: 1; transform: none; }
  .effekt-karte--nachher .chip { transition: none; }
}

/* ---- Feinschliff „Der Unterschied" (Befund Jonas 10.09.) ---- */
/* Roter Schimmer als weicher Schatten — bewusste Ausnahme von site-taste §4, dezent gehalten */
.effekt-karte--nachher {
  box-shadow: 0 0 0 1px rgba(200, 16, 46, .22), 0 14px 48px rgba(200, 16, 46, .16);
}

/* Chips: sanfter Einlauf (Skalierung statt Sprung), Welle je Zeile per JS-Delay */
.js [data-reveal]:not(.sichtbar) .effekt-karte--nachher .chip {
  opacity: 0;
  transform: scale(.92) translateY(4px);
}
.effekt-karte--nachher .chip {
  transition: opacity 500ms var(--ease), transform 700ms var(--ease); /* A&M-Messwerte 10.09. */
}

/* ---- Welle auch fuer die schwarzen Kacheln (beide Karten, Vorher zuerst) ---- */
.js [data-reveal]:not(.sichtbar) .effekt-karte .chip { opacity: 0; transform: scale(.92) translateY(4px); }
.effekt-karte .chip { transition: opacity 500ms var(--ease), transform 700ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not(.sichtbar) .effekt-karte .chip { opacity: 1; transform: none; }
  .effekt-karte .chip { transition: none; }
}

/* ---- Effekt-Sektion: Status-Pillen, Leer-Kacheln, Hinweis mittig (Vorbild-Abgleich) ---- */
.karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); margin-bottom: var(--s1); }
.karte-kopf .karte-label { margin-bottom: 0; }

.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-13); font-weight: 600;
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--warn { color: var(--warnton); background: var(--warn-flaeche); }
.status--gut  { color: var(--gruen);   background: var(--gruen-flaeche); }

.chip--leer { background: var(--linie); min-width: 56px; min-height: 21px; padding: 3px 8px; }

.effekt .hinweis { text-align: center; margin-inline: auto; }

/* ---- Effekt-Sektion: zentrierter Kopf mit grosser zweifarbiger Headline, Kacheln nach Vorbildmass ---- */
.effekt-kopf { text-align: center; margin-bottom: var(--s8); }
.effekt-kopf .eyebrow { margin-bottom: var(--s2); }
.effekt-kopf h2 {
  max-width: 22ch;
  margin: 0 auto var(--s3);
  font-size: clamp(32px, 4.5vw, 56px);
  letter-spacing: -0.045em; /* am Vorbild gemessen (.amv-title) */
}
.effekt-kopf .rot { color: var(--rot); }
.effekt-sub { max-width: 52ch; margin: 0 auto; font-size: var(--text-18); color: var(--muted); }

.plan { font-size: 12px; }
.plan th, .plan td { padding: 9px 8px; }
.chip { padding: 7px 14px; font-size: 12px; font-weight: 700; border-radius: var(--radius-m); }
.chip--leer { min-width: 64px; min-height: 30px; }

/* ---- Plan-Kopfzeile: Einsatzplanung / Ansicht (Vorbild-Detail) ---- */
.plan-kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2);
  margin-top: var(--s3);
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--linie);
  font-size: var(--text-13);
}
.plan-kopf span:first-child { font-weight: 700; }
.plan-ansicht { color: var(--muted); font-weight: 600; }
.plan-kopf + .plan-scroll { margin-top: var(--s2); }

/* ---- Effekt-Sektion: breiter Block, festes Spaltenraster, Kacheln fuellen die Zelle (Vorbild) ---- */
.effekt .wrap { max-width: 1400px; }
.effekt-karte { padding: var(--s3); }

.plan { table-layout: fixed; width: 100%; min-width: 560px; }
.plan th:first-child { width: 64px; }
.plan th, .plan td { padding: 6px 4px; }
.plan th[scope="row"] { padding-left: 8px; }

.chip { display: block; width: 100%; box-sizing: border-box; padding: 9px 4px; text-align: center; font-size: 12px; }
.chip--leer { min-width: 0; min-height: 34px; }

@media (min-width: 981px) {
  .plan { min-width: 0; }            /* Desktop: alle sechs Spalten sichtbar, kein Scrollen */
  .plan-scroll { overflow: visible; }
}

/* ---- Plan-Kasten mit Fussband + Schlusszeile je Karte (Vorbild-Details) ---- */
.plan-box { border: 1px solid var(--linie); border-radius: var(--radius-m); margin-top: var(--s3); }
.plan-box .plan-kopf { margin-top: 0; padding: 10px 12px; border-bottom: 1px solid var(--linie); }
.plan-box .plan-scroll { margin-top: 0; }
.plan-box .plan { min-width: 560px; }
.plan-box .plan th, .plan-box .plan td { border-left: 0; border-right: 0; }

.karte-fuss { margin: 0; padding: 10px 12px; border-top: 1px solid var(--linie); font-size: var(--text-13); font-weight: 700; }
.karte-fuss--warn { background: var(--warn-flaeche); color: var(--rot); text-align: right; border-radius: 0 0 var(--radius-m) var(--radius-m); }
.karte-fuss--gut { display: flex; align-items: center; gap: 12px; color: var(--rot); }

.vorlauf-linie { flex: 1; height: 4px; border-radius: 2px; background: var(--rot); transform-origin: left center; }
.js [data-reveal]:not(.sichtbar) .vorlauf-linie { transform: scaleX(0); }
.vorlauf-linie { transition: transform 900ms var(--ease) 2400ms; }   /* waechst, nachdem die Kacheln stehen */

.karte-schluss { margin: var(--s3) 0 0; font-size: var(--text-14); font-weight: 600; }
.karte-schluss--frage { color: var(--ink); }
.karte-schluss--gut { color: var(--gruen); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not(.sichtbar) .vorlauf-linie { transform: none; }
  .vorlauf-linie { transition: none; }
}

/* Schlusszeilen: Vorrang vor der gedaempften Kartenfarbe (.effekt-karte > p) */
.effekt-karte .karte-schluss--frage { color: var(--ink); }
.effekt-karte .karte-schluss--gut { color: var(--gruen); }

/* ==== Effekt-Sektion: Farb- und Massabgleich nach Vorbild-Messung (10.09.2026) ==== */
.plan-box .plan-kopf span:first-child { color: var(--plan-titel); font-size: 13px; font-weight: 800; }
.plan-box .plan-ansicht { color: var(--plan-ansicht); font-size: 11px; font-weight: 600; }

.plan tr:first-child th { color: var(--plan-kopf-text); font-size: 10px; font-weight: 800; padding: 9px 3px; }
.plan th[scope="row"] { background: var(--plan-team-bg); color: var(--plan-team-text); font-size: 10px; font-weight: 800; padding: 0 8px; }
.plan td { padding: 10px 4px; }
.plan .frei {
  color: var(--plan-frei-text); font-size: 9px; font-weight: 700;
  background-color: #FFFFFF;
  background-image: repeating-linear-gradient(135deg, #FFFFFF, #FFFFFF 5px, #FAFAFA 5px, #FAFAFA 10px);
}

.chip {
  display: flex; align-items: center; justify-content: center;
  height: 28px; min-height: 0; padding: 0 4px;
  border-radius: 5px; font-size: 10px; font-weight: 800;
  background-color: var(--plan-ink);
}
.effekt-karte--nachher .chip { background-color: transparent; background-image: linear-gradient(90deg, var(--plan-rot-a), var(--plan-rot-b)); }
.effekt-karte--nachher .chip--hell { background-image: linear-gradient(90deg, var(--plan-rot-hell-a), var(--plan-rot-hell-b)); }
.chip--leer { width: 35px; margin: 0 auto; background-color: var(--plan-leer); background-image: none; }

.status { font-size: 11px; font-weight: 800; padding: 8px 11px; }
.status--warn { color: var(--warnband-text); background: var(--warn-pill-bg); }
.status--warn::before { background: var(--warn-punkt); }
.status--gut { color: var(--gut-pill-text); background: var(--gut-pill-bg); }
.status--gut::before { background: var(--gut-punkt); }

.karte-fuss--warn { background: var(--warnband-bg); color: var(--warnband-text); font-size: 10px; font-weight: 800; }
.karte-fuss--gut { background: var(--balken-bg); color: var(--balken-text); font-size: 10px; font-weight: 700; border-radius: 0 0 var(--radius-m) var(--radius-m); }
.vorlauf-linie { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--balken-a), var(--balken-b)); }

.karte-schluss { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.kreis {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kreis-bg); color: var(--kreis-text); font-size: 12px; font-weight: 700;
}
.kreis--gut { background: var(--gruen-kreis-bg); color: var(--gruen-kreis-text); }
.effekt-karte .karte-schluss--gut { color: var(--gruen-zeile); }

/* Effekt-Sektion: 112px Luft darueber (seit 15.09. folgt sie direkt auf den Hero), darunter -20 % */
@media (min-width: 981px) {
  .effekt { padding-block: var(--s14) var(--s8); }
}

/* Kapazitaets-Zelle (Vorbild: getoente Zelle statt Kachel) */
.plan .kap { background: var(--plan-kap-bg); color: var(--plan-kap-text); font-size: 9px; font-weight: 700; }

/* ==== Effekt-Sektion: Details, die das Vorbild auf Desktop UND Handy zeigt (Messung 15.09.2026) ==== */
.plan tr:first-child th { background: var(--plan-team-bg); }                 /* Kopfzeile getoent wie Team-Spalte */
.plan-box .plan-kopf span:first-child { display: inline-flex; align-items: center; gap: 9px; }
.plan-box .plan-kopf span:first-child::before {                               /* Kalender-Symbol: 15x14, 1px Rand, Radius 3 */
  content: ""; width: 15px; height: 14px; border: 1px solid currentColor; border-radius: 3px; box-sizing: border-box;
}
.plan-scroll > .karte-fuss { border-top: 1px solid var(--linie); }

/* Verbindungs-Element: Linie – Kreis mit Kuerzel und Pfeil – Linie */
.effekt-mitte { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; }
.effekt-linie { display: block; width: 1px; height: 70px; background: var(--linie); }
.effekt-pfeil {
  width: 68px; height: 68px; flex-direction: column; gap: 0;
  background: var(--plan-ink); box-shadow: 0 12px 30px rgba(17, 18, 22, .18);
}
.pfeil-marke { font-size: 11px; font-weight: 900; letter-spacing: .05em; line-height: 1.6; }
.effekt-pfeil b { font-size: 24px; font-weight: 700; line-height: 1; margin-top: -2px; }

/* Kartenkopf: Label + H3 + Pille (Desktop: Pille rechts oben, H3 volle Breite) */
.karte-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s2); row-gap: 0; }
.karte-kopf .karte-label { grid-area: 1 / 1; }
.karte-kopf .status { grid-area: 1 / 2; }
.karte-kopf h3 { grid-column: 1 / -1; margin: var(--s1) 0 0; }
.effekt-karte h3 + p, .karte-kopf + p { margin-top: var(--s1); }

/* ==== Handy-Abgleich nach Vorbild-Messung bei 375 px (15.09.2026) ==== */
@media (max-width: 980px) {
  .effekt { padding: 60px 0 58px; }
  .effekt-kopf { margin-bottom: 38px; }
  .effekt-kopf .eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .13em; margin-bottom: 18px; }
  .effekt-kopf h2 { font-size: 34px; font-weight: 800; line-height: 1.08; }
  .effekt-sub { font-size: 16px; line-height: 1.55; margin-top: 22px; }

  .effekt-grid { gap: 22px; }
  .effekt-karte { min-width: 0; padding: 19px 14px; border-radius: 18px; text-align: center; box-shadow: 0 18px 55px rgba(17, 18, 22, .07); }
  .effekt-karte--nachher { border-color: rgba(226, 31, 47, .38); box-shadow: 0 20px 64px rgba(226, 31, 47, .10); }

  .karte-kopf { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 0; }
  .karte-kopf .karte-label { margin: 0; }
  .karte-kopf h3 { margin: 0; font-size: 25px; font-weight: 800; line-height: 1.12; letter-spacing: -.025em; }
  .effekt-karte > p { max-width: none; font-size: 15px; line-height: 1.55; margin: 15px 0 24px; }

  .plan-box { margin-top: 0; border-radius: 14px; background: #FBFBFC; }
  .effekt-karte--nachher .plan-box { background: #fff; border-color: rgba(226, 31, 47, .24); }
  .plan-box .plan-kopf { padding: 13px 15px; }
  .plan-box .plan-ansicht { display: none; }                                   /* Vorbild blendet die Ansicht auf dem Handy aus */

  .plan, .plan-box .plan { min-width: 420px; }                                 /* 54 + 6 x 61 wie beim Vorbild, seitlich scrollbar */
  .plan th:first-child { width: 54px; }
  .plan td { padding: 7px 3px 8px; }                                           /* 28 + 15 + 1 = Zeilenhoehe 44 */
  .chip { font-size: 7px; }                                                    /* Vorbildmass; bewusste Ausnahme von site-taste (>= 11px) */
  .plan-scroll > .karte-fuss { min-width: 420px; box-sizing: border-box; }     /* Band laeuft mit dem Raster mit */
  .karte-fuss--warn { text-align: right; }

  .effekt-karte > .karte-schluss { justify-content: center; margin: 20px 0 0; font-size: 12px; font-weight: 750; gap: 9px; }
  .kreis { width: 18px; height: 18px; font-size: 10px; }
  .effekt .hinweis { font-size: 11px; line-height: 1.5; margin-top: 24px; padding: 0 10px; }

  .effekt-mitte { flex-direction: row; height: 56px; }
  .effekt-linie { width: 48px; height: 1px; }
  .effekt-pfeil { width: 56px; height: 56px; transform: none; }
  .effekt-pfeil b { transform: rotate(90deg); }
}

/* ==== Hero zweispaltig nach Vorbild-Messung am-beratung.de (15.09.2026): Text | Video, Siegel darunter ==== */
.hero--split { padding-block: 55px 46px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.hero--split h1 { max-width: none; font-size: 38px; line-height: 1.2; margin-bottom: 24px; }
.hero--split .hero-satz { max-width: none; font-size: 20px; line-height: 1.6; margin-bottom: 32px; }

.hero-usp { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hero-usp li { display: flex; align-items: center; gap: 12px; font-size: 18px; line-height: 1.4; color: var(--ink); }
.usp-check { color: var(--check-gruen); font-size: 20px; font-weight: 700; line-height: 1; }

.cta--hero { padding: 16px 28px; font-weight: 500; line-height: 1.4; }

.hero-media { min-width: 0; }
.hero-video {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: var(--plan-ink); box-shadow: 0 0 14px 7px rgba(0, 0, 0, .10);
  display: flex; align-items: center; justify-content: center;
}
.hero-play {                                   /* Play-Kachel wie im Vorbild-Player: schwarz, weisses Dreieck */
  width: 130px; height: 70px; background: #000; display: flex; align-items: center; justify-content: center;
}
.hero-play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 15px 0 15px 26px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
.hero-marker { position: absolute; left: 14px; bottom: 12px; font-size: 12px; color: rgba(255, 255, 255, .7); }

.hero-bild { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 18%; border-radius: 18px; box-shadow: 0 0 14px 7px rgba(0, 0, 0, .10); }  /* 2:3-Portrait auf Quadrat beschnitten: Kopf und Schultern */
.hero-siegel { display: flex; justify-content: center; align-items: center; gap: 11px; margin-top: 23px; }
.hero-siegel .siegel--partner { width: auto; min-height: 0; border: 0; background: none; padding: 0; box-shadow: none; }
.hero-siegel .siegel--google {                 /* wie Vorbild-Badge 141 x 40: G-Logo, Sterne, Wertung */
  width: 141px; min-height: 0; height: 40px; padding: 0 8px; gap: 6px; justify-content: flex-start;   /* Proportionen aus dem Vorbild-Badge 1000 x 285 auf 141 x 40 */
  border: 1px solid var(--linie); border-radius: 7px; background: #fff; color: var(--ink); text-decoration: none; text-align: left;
}
.hero-siegel .siegel--google:hover { border-color: var(--ink); }
.google-text { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.g-logo { flex: none; width: 22px; height: 22px; }
.sterne { display: inline-flex; gap: 2px; }
.google-wert { font-size: 10px; font-weight: 600; color: #000; white-space: nowrap; letter-spacing: -.01em; }   /* offizielles Abzeichen (gstatic 2026), selbst gehostet, Link auf das Partner-Profil */
.siegel--partner img { display: block; width: 70px; height: auto; }
.siegel {
  width: 141px; min-height: 56px; display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px solid var(--linie); border-radius: 7px; background: #fff;
  font-size: 11px; line-height: 1.3; color: var(--muted);
}

@media (max-width: 980px) {
  .hero--split { padding-block: 35px 20px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero--split h1 { font-size: 30px; line-height: 1.2; margin-bottom: 10px; }
  .hero--split .hero-satz { font-size: 14px; line-height: 1.6; margin-bottom: 10.5px; }
  .cta--hero { display: block; text-align: center; }
  .hero-media { margin-top: 25px; }
  .hero-play { width: 116px; height: 66px; }
  .hero-siegel { margin-top: 10px; }
  .siegel { width: 102px; min-height: 50px; font-size: 10px; }
  .hero-siegel .siegel--partner { width: auto; min-height: 0; }
  .hero-siegel .siegel--google { width: 141px; height: 40px; font-size: 10px; }
}

/* ==== Gewerke-Leiste unter dem Hero (Vorbild-Messung 15.09.2026: 6 Felder, skew -12deg, 430px, Rand -64px) ==== */
.gewerke-leiste { height: 430px; overflow: hidden; }
.leiste { display: flex; height: 100%; }
.leiste-feld { flex: 1 1 0; position: relative; overflow: hidden; transform: skew(-12deg); }
.leiste-feld--erstes { margin-left: -64px; }
.leiste-feld--letztes { margin-right: -64px; }
.leiste-innen { position: absolute; inset: 0 -64px; transform: skew(12deg); }
.leiste-bild { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }

/* Bis die Bilder da sind: dunkle Felder mit Gewerk-Name, jedes zweite etwas heller */
.leiste-platzhalter { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--plan-ink); color: #fff; text-align: center; }
.leiste-feld:nth-child(even) .leiste-platzhalter { background: #3A3D45; }
.leiste-gewerk { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.leiste-marker { font-size: 12px; color: rgba(255, 255, 255, .55); }

@media (max-width: 980px) {
  .gewerke-leiste { display: none; }   /* wie beim Vorbild: auf dem Handy ausgeblendet */
}

/* ==== Unsere Leistungen: 4 Kacheln (Vorbild-Messung 15.09.2026: 280px, Luecke 30, Hoehe 300, Radius 20, Schatten 2 2 5 2 / .2) ==== */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.leistungen-kacheln { padding-block: var(--s8) 80px; background: var(--flaeche); }
.leistungen-kacheln h2 { text-align: center; max-width: none; font-family: var(--font-text); font-size: 35px; font-weight: 600; line-height: 1.4; margin: 0 auto 34px; color: #000; }
.kachel-raster { display: grid; grid-template-columns: repeat(3, 280px); gap: 30px; justify-content: center; }   /* Kachelbreite wie Vorbild */
.kachel {
  min-height: 300px; padding: 20px; border-radius: 20px; background: var(--flaeche);
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, .2);
  display: flex; flex-direction: column; align-items: flex-start;
}
.kachel-nr {                                     /* rotes Feld 50x50 mit eigenem Strich-Icon (Wunsch Jonas 15.09., bewusste site-taste-Ausnahme) */
  width: 50px; height: 50px; border-radius: 5px; background: var(--rot); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: .02em;
}
.kachel-icon { display: block; width: 28px; height: 28px; }
.kachel h3 { font-family: var(--font-text); font-size: 20px; font-weight: 600; line-height: 1.4; margin: 10px 0 4px; color: #000; }
.kachel p { font-size: 16px; line-height: 1.2; color: var(--ink); margin: 0; }
.cta--kachel { margin-top: auto; padding-top: 22px; padding: 9px 15px; font-weight: 600; border-radius: 5px; min-height: 0; margin-top: 22px; }
.kachel .cta--kachel { margin-top: auto; }
.kachel p { margin-bottom: 22px; }

/* ==== Unsere Methode im Vergleich (Vorbild-Messung: 5 Spalten x 240, Kopf 100, Zeilen 64, Trennlinie #EAECF0, Wir-Spalte mit 2px rotem Rahmen) ==== */
.vergleich { padding-block: 80px 50px; background: var(--flaeche); }                      /* Vorbild: 40 Rand + 40 Innen oben */
.vergleich .wrap { max-width: calc(1200px + 2 * var(--wrap-gutter)); }                   /* Tabelle exakt 1200 = 5 x 240 */
.vergleich h2 { text-align: center; max-width: none; font-family: var(--font-text); font-size: 35px; font-weight: 500; line-height: 1.4; margin: 0 auto 70px; color: #000; }
.vergleich-scroll { overflow-x: auto; }
.vergleich-tabelle { width: 100%; max-width: 1200px; margin-inline: auto; border-collapse: collapse; table-layout: fixed; min-width: 720px; }
.vergleich-tabelle th, .vergleich-tabelle td { height: 64px; padding: 0 24px; text-align: center; border-bottom: 1px solid #EAECF0; font-family: var(--font-text); }
.vergleich-tabelle thead th { height: 100px; border-bottom: 0; font-size: 16px; font-weight: 400; color: var(--ink); vertical-align: middle; }
.vergleich-tabelle thead th .logo { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; }
.vergleich-tabelle thead th .logo img { width: 44px; height: auto; }
.vergleich-tabelle tbody th { text-align: left; padding: 0 48px 0 24px; font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.vergleich-tabelle tbody tr:last-child th, .vergleich-tabelle tbody tr:last-child td { border-bottom: 0; }
.vergleich-tabelle .ist-wir { box-shadow: inset 2px 0 0 var(--rot), inset -2px 0 0 var(--rot); }
.vergleich-tabelle thead .ist-wir { box-shadow: inset 2px 2px 0 var(--rot), inset -2px 0 0 var(--rot); }
.vergleich-tabelle tbody tr:last-child .ist-wir { box-shadow: inset 2px 0 0 var(--rot), inset -2px -2px 0 var(--rot); }
.ja, .nein { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 0; }   /* Vorbild: 24px */
.ja { background: var(--check-gruen); }
.ja::before { content: "\2713"; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; }
.nein::before { content: "\2715"; color: var(--rot); font-size: 16px; font-weight: 700; line-height: 1; }

@media (max-width: 980px) {
  .kachel-raster { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .kachel { min-height: 0; }
  .leistungen-kacheln h2, .vergleich h2 { font-size: 28px; margin-bottom: 24px; }
  .vergleich-tabelle th, .vergleich-tabelle td { padding: 0 12px; }
  .vergleich-tabelle tbody th { padding: 0 16px; }
}

/* ==== Branchen-Liste 1:1 nach Vorbild: 2 x 584, Luecke 32, Zeile 72 = Fotohoehe (Korrektur 20.09.2026: die 46 px der ersten Messung galten nur, solange die Vorbild-Fotos nicht geladen waren), Foto 130x72, Label 3px Rahmen, Innenabstand 24, Pfeilfeld 40x40 mittig ==== */
.gewerke { padding-block: 80px 50px; background: var(--flaeche); }
.gewerke .wrap { max-width: calc(1200px + 2 * var(--wrap-gutter)); }
.gewerke h2 { text-align: center; max-width: 800px; font-family: var(--font-text); font-size: 35px; font-weight: 500; line-height: 1.4; margin: 0 auto 60px; color: #000; }
.gewerke-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.branche { display: flex; align-items: stretch; height: 72px; text-decoration: none; color: #000; }
.branche:hover .branche-label { background: #F9FAFB; }
.branche-bild { flex: none; width: 130px; height: 72px; border-radius: 14px; object-fit: cover; }
.branche-platzhalter { display: flex; align-items: center; justify-content: center; background: #EAECF0; color: #8A8E96; font-size: 12px; }
.branche-label { flex: 1; display: flex; align-items: center; justify-content: space-between; min-width: 0; padding: 0 24px; border: 3px solid #EAECF0; }
.branche-name { font-family: var(--font-text); font-size: 18px; font-weight: 600; line-height: 1.4; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.branche-pfeil { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: #EAECF0; color: rgba(255, 255, 255, .86); margin-left: 16px; }

/* ==== Erstgespraech: 3 Karten (Vorbild: 379 x 324, Rahmen 3px #EAECF0, Innen 24, schwarzes Quadrat 48, Linie 4px) ==== */
.gespraech { padding-block: 80px 50px; background: var(--flaeche); }
.gespraech .wrap { max-width: calc(1200px + 2 * var(--wrap-gutter)); }
.gespraech h2 { text-align: center; max-width: none; font-family: var(--font-text); font-size: 35px; font-weight: 500; line-height: 1.4; margin: 0 auto 70px; color: #000; }
.schritt-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 32px; position: relative; }
.schritt-karten::before { content: ""; position: absolute; z-index: 1; left: calc((100% - 64px) / 6); right: calc((100% - 64px) / 6); top: calc(32px + 3px + 24px + 24px - 2px); height: 4px; background: #000; }   /* von Symbolmitte 1 bis Symbolmitte 3 (halbe Kartenbreite Einzug) */   /* von Quadrat 1 bis Quadrat 3, ueber den Karten */
.schritt-karte { position: relative; min-height: 324px; padding: 24px; border: 3px solid #EAECF0; background: var(--flaeche); text-align: center; display: flex; flex-direction: column; align-items: center; }
.schritt-quadrat { position: relative; z-index: 2; width: 48px; height: 48px; margin-bottom: 32px; background: #000; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.schritt-quadrat svg { width: 24px; height: 24px; }
.schritt-karte h3 { font-family: var(--font-text); font-size: 20px; font-weight: 600; line-height: 1.4; margin: 0 0 8px; color: #000; }
.schritt-karte p { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0; max-width: 325px; }

/* ==== Kontakt-Block (Vorbild: schwarz, 400 hoch, Text 600 breit, H2 36/700, Satz 18, Button 300 x 42, Telefon 18/600) ==== */
.kontakt-band { background: #000; color: #F2F4F7; min-height: 400px; display: flex; align-items: center; padding-block: 80px; }
.kontakt-band .wrap { max-width: calc(1200px + 2 * var(--wrap-gutter)); position: relative; }
.kontakt-logo { position: absolute; right: var(--wrap-gutter); top: 50%; transform: translateY(-50%); width: 600px; height: 287px; display: flex; justify-content: flex-end; opacity: .15; pointer-events: none; }   /* Vorbild: Logo-Wasserzeichen rechts, 600 x 287, 15 % */
.kontakt-logo img { display: none; }
.kontakt-logo::before {                        /* Logo als Helligkeitsmaske: nur die weissen Buchstaben bleiben, Kante 2 % nach aussen geschoben */
  content: ""; display: block; width: 296px; height: 287px; background: #fff;
  -webkit-mask: url("../img/logo-pw.png") center / 104% 104% no-repeat; mask: url("../img/logo-pw.png") center / 104% 104% no-repeat;
  -webkit-mask-mode: luminance; mask-mode: luminance;
}   /* schwarze Flaeche verschwindet auf Schwarz, die PW-Buchstaben bleiben */
.kontakt-text { max-width: 600px; position: relative; }
.kontakt-band h2 { color: #fff; font-family: var(--font-text); font-size: 36px; font-weight: 700; line-height: 1.4; max-width: none; margin: 0 0 12px; }
.kontakt-band p { font-size: 18px; line-height: 1.6; margin: 0 0 28px; color: #F2F4F7; }
.cta--band { display: inline-flex; align-items: center; justify-content: center; min-width: 300px; min-height: 0; height: 42px; padding: 10px 20px; font-weight: 500; line-height: 1.4; border-radius: 0; }
.kontakt-telefon { display: flex; align-items: center; gap: 20px; margin-top: 20px; font-size: 18px; font-weight: 600; line-height: 1.6; color: rgba(255, 255, 255, .86); text-decoration: none; }
.kontakt-telefon svg { flex: none; width: 20px; height: 20px; }
.kontakt-telefon:hover { color: #fff; }

@media (max-width: 980px) {
  .gewerke h2, .gespraech h2 { font-size: 28px; margin-bottom: 32px; }
  .gewerke-liste { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .branche-label { padding: 0 12px; }
  .branche-name { font-size: 16px; white-space: normal; hyphens: manual; overflow-wrap: normal; }   /* Trennstellen stehen im HTML (&shy;, <wbr>) */
  .schritt-karten { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .schritt-karten::before { display: none; }
  .schritt-karte { min-height: 0; }
  .kontakt-band { min-height: 0; padding-block: 60px; }
  .kontakt-logo { display: none; }
  .kontakt-band h2 { font-size: 30px; }
  .cta--band { width: 100%; }
}

.bildnachweise { font-size: var(--text-14); color: var(--muted); padding-left: 1.2em; }
.bildnachweise li { margin-bottom: 6px; }

/* ==== Preisseite im Karten-Stil (16.09.2026) ==== */
.preise, .rechnung--preis, .grenze { padding-block: 64px; }
.preise { background: var(--flaeche); }
.rechnung--preis { background: var(--flaeche-alt); }
.grenze { background: var(--flaeche-alt); }
.preise h2, .rechnung--preis h2, .grenze h2 { text-align: center; max-width: none; font-family: var(--font-text); font-size: 35px; font-weight: 500; line-height: 1.4; margin: 0 auto 12px; color: #000; }
.preis-sub { text-align: center; max-width: 60ch; margin: 0 auto 40px; font-size: 18px; line-height: 1.6; color: var(--muted); }

.preis-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; max-width: 900px; margin: 0 auto; }
.preis-karte { padding: 32px 28px; border: 3px solid #EAECF0; border-radius: 20px; background: var(--flaeche); box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, .06); display: flex; flex-direction: column; }
.preis-label { font-family: var(--font-text); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.preis-label--rot { color: var(--rot); }
.preis-betrag { font-family: var(--font-display); font-size: 40px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.preis-betrag span { font-family: var(--font-text); font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.preis-note { font-size: 14px; color: var(--muted); margin: 6px 0 20px; padding-bottom: 20px; border-bottom: 1px solid #EAECF0; }
.preis-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.preis-liste li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--ink); }
.preis-check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--check-gruen); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.preis-summe { max-width: 900px; margin: 24px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 28px; border: 2px solid var(--rot); border-radius: 12px; font-size: 18px; }
.preis-summe strong { color: var(--rot); font-size: 22px; }

.rechnung--preis .preis-sub { margin: 0 auto 40px; max-width: 60ch; }          /* Vorrang vor .rechnung p (margin 0, 52ch) */
.rechnung--preis .hinweis--mittig { margin: 24px auto 0; max-width: 60ch; }
.rechnung--preis .kalk-label { margin: 0 0 8px; max-width: none; }
.rechnung--preis .kalk-fuss { margin: 12px 0 8px; max-width: none; font-size: 13px; color: var(--muted); }
.kalk-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; max-width: 900px; margin: 0 auto; align-items: start; }
.kalkblatt--gewinn { border-color: rgba(200, 16, 46, .35); }
.kalkblatt { margin: 0; padding: 24px 28px 8px; border: 3px solid #EAECF0; border-radius: 20px; background: var(--flaeche); box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, .06); }
.kalk-label { font-family: var(--font-text); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rot); margin: 0 0 8px; }
.kalk-zeile { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #EAECF0; font-size: 16px; }
.kalk-zeile strong { font-weight: 700; white-space: nowrap; }
.kalk-summe { border-top: 2px solid var(--rot); border-bottom: 0; margin-top: 4px; }
.kalk-summe span { font-weight: 700; }
.kalk-summe strong { color: var(--rot); }
.hinweis--mittig { text-align: center; margin: 24px auto 0; max-width: 60ch; }

.grenze-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; max-width: 900px; margin: 0 auto; }
.grenze-karte { padding: 28px; border: 3px solid #EAECF0; border-radius: 20px; background: var(--flaeche); text-align: center; }
.grenze-x { width: 40px; height: 40px; border-radius: 50%; background: #FBEAEA; color: var(--rot); font-size: 18px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.grenze-karte h3 { font-family: var(--font-text); font-size: 20px; font-weight: 600; line-height: 1.4; margin: 0 0 8px; color: #000; }
.grenze-karte p { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0; }
.grenze-schluss { text-align: center; max-width: 60ch; margin: 32px auto 0; font-size: 18px; font-weight: 600; }

.gruender { padding-block: 64px 80px; }
.gruender-karte { max-width: 900px; margin: 0 auto; padding: 40px; border: 2px solid var(--rot); border-radius: 20px; background: var(--flaeche); box-shadow: 0 20px 64px rgba(226, 31, 47, .10); text-align: center; }
.gruender-karte h2 { max-width: 22ch; margin: 0 auto 16px; font-size: 32px; }
.gruender-karte h2 .zahlen { color: var(--rot); }
.gruender-karte p { max-width: 60ch; margin: 0 auto 24px; font-size: 16px; line-height: 1.6; }
.gruender-karte .preis-label--rot { margin-bottom: 16px; }

@media (max-width: 980px) {
  .preise, .rechnung--preis, .grenze { padding-block: 48px; }
  .preise h2, .rechnung--preis h2, .grenze h2 { font-size: 28px; }
  .preis-karten, .grenze-karten, .kalk-karten { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .preis-summe { flex-direction: column; text-align: center; }
  .gruender { padding-block: 48px 64px; }
  .gruender-karte { padding: 28px 20px; }
  .gruender-karte h2 { font-size: 26px; }
}

/* Zentrierter Unterseiten-Kopf (Preisseite, Wunsch 16.09.) */
.hero--mittig .wrap { text-align: center; }
.hero--mittig h1 { max-width: 24ch; margin-inline: auto; }
.hero--mittig .hero-satz { max-width: 52ch; margin-inline: auto; }

/* ==== Sektion "Warum so effektiv" nach Vorbild (18.09.2026): Kopf links, Grafik Betrieb - ProfitWerk - Region mit aufsteigenden Anfrage-Blasen, Button, 3 Karten ==== */
.wirkung { padding-block: 80px 60px; background: var(--flaeche); }
.wirkung .wrap { max-width: calc(1200px + 2 * var(--wrap-gutter)); }
.wirkung-tag { font-size: 16px; font-weight: 500; color: #667085; margin: 0 0 13px; }
.wirkung h2 { max-width: none; font-family: var(--font-text); font-size: 35px; font-weight: 500; line-height: 1.4; color: #000; margin: 0 0 20px; }
.wirkung h2 .rot { color: var(--rot); font-weight: 700; }

.wirkung-grafik { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 0; padding-top: 130px; max-width: 920px; margin: 0 auto; }
.wirkung-knoten { flex: none; width: 170px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.wirkung-kachel { width: 160px; height: 160px; border-radius: 30px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(17, 18, 22, .16); }
.wirkung-kachel--rot { background: var(--rot); }
.wirkung-kachel--mitte { background: #181818; overflow: hidden; }
.wirkung-kachel--mitte img { width: 176px; max-width: none; height: auto; mix-blend-mode: screen; }   /* groesser als die Kachel: Bildkanten liegen ausserhalb */
.wirkung-kachel svg { width: 104px; height: 104px; }
.wirkung-linie { flex: 1; height: 1px; background: #D0D5DD; margin-top: 80px; }
.wirkung-name { font-size: 16px; color: #667085; }
.wirkung-name--stark { font-weight: 700; color: #000; }

.wirkung-blasen { position: absolute; left: 0; top: 0; width: 230px; height: 130px; pointer-events: none; }
.wirkung-blasen span { position: absolute; left: 50%; bottom: 8px; transform: translate(-50%, 0); white-space: nowrap; padding: 6px 16px; border-radius: 999px; background: #E4F1D1; color: #2F6B1E; font-size: 14px; font-weight: 500; opacity: 0; animation: blase-steigt 6s linear infinite; }
.wirkung-blasen span:nth-child(2) { animation-delay: 2s; }
.wirkung-blasen span:nth-child(3) { animation-delay: 4s; }
@keyframes blase-steigt {
  0%   { opacity: 0; transform: translate(-50%, 10px); }
  12%  { opacity: 1; transform: translate(-50%, -6px); }
  70%  { opacity: 1; transform: translate(-50%, -78px); }
  100% { opacity: 0; transform: translate(-50%, -112px); }
}
@media (prefers-reduced-motion: reduce) {
  .wirkung-blasen span { animation: none; opacity: 1; }
  .wirkung-blasen span:nth-child(1) { transform: translate(-50%, -84px); }
  .wirkung-blasen span:nth-child(2) { transform: translate(-50%, -46px); }
  .wirkung-blasen span:nth-child(3) { transform: translate(-50%, -8px); }
}

.wirkung-cta { text-align: center; margin: 48px 0 0; }
.wirkung-cta .cta--band { min-width: 0; }
.wirkung-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 64px; }
.wirkung-karte { min-height: 247px; padding: 24px; border: 3px solid #EAECF0; background: var(--flaeche); text-align: left; }
.wirkung-karte .schritt-quadrat { margin-bottom: 32px; }
.wirkung-karte h3 { font-family: var(--font-text); font-size: 20px; font-weight: 600; line-height: 1.4; margin: 0 0 8px; color: #000; }
.wirkung-karte p { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0; }

@media (max-width: 980px) {
  .wirkung { padding-block: 56px 40px; }
  .wirkung h2 { font-size: 26px; }
  .wirkung-grafik { padding-top: 110px; }
  .wirkung-knoten { width: 92px; gap: 10px; }
  .wirkung-kachel { width: 88px; height: 88px; border-radius: 18px; }
  .wirkung-kachel svg { width: 58px; height: 58px; }
  .wirkung-kachel--mitte img { width: 98px; }
  .wirkung-linie { margin-top: 44px; }
  .wirkung-name { font-size: 13px; text-align: center; }
  .wirkung-blasen { width: 180px; left: -20px; }
  .wirkung-blasen span { font-size: 12px; padding: 5px 12px; }
  .wirkung-karten { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 40px; }
  .wirkung-karte { min-height: 0; }
}

/* ==== Kontakt: "Das erwartet Sie" + zwei Wege zum Erstgespraech (Termin bei Calendly als Link, Rueckruf per Formular), 20.09.2026 ==== */
.wege { padding-block: var(--s6) var(--s4); }
.wege-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: start; }
.wege h2, .formular-titel { font-family: var(--font-text); font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0 0 var(--s3); color: #000; }
.wege-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.wege-liste li { position: relative; padding-left: 36px; line-height: 1.55; }
.wege-liste li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 4px; background: var(--check-gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8'/%3E%3C/svg%3E") center / 16px 16px no-repeat; }
.wege-wahl { display: flex; flex-direction: column; gap: var(--s2); }
.weg { display: flex; align-items: flex-start; gap: var(--s2); padding: 18px 20px; border: 3px solid #EAECF0; background: #fff; color: #000; text-decoration: none; }
.weg:hover, .weg:focus-visible { border-color: #000; }
.weg-marke { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: #000; color: #fff; font-weight: 700; font-size: 14px; border-radius: 4px; }
.weg-text { display: flex; flex-direction: column; gap: 4px; }
.weg-text strong { font-size: 18px; font-weight: 600; line-height: 1.35; }
.weg-text span { font-size: var(--text-14); color: #475467; line-height: 1.5; }
.feld-optional { font-weight: 400; color: #667085; }
.formular[id] { scroll-margin-top: 96px; }
@media (max-width: 980px) {
  .wege-raster { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .wege h2, .formular-titel { font-size: 21px; }
}

/* ==== Kopfleiste laeuft beim Scrollen mit (wie beim Vorbild), 20.09.2026 ==== */
:root { --header-h: 77px; }
html { scroll-padding-top: calc(var(--header-h) + 16px); }
.site-header { position: sticky; top: 0; z-index: 100; background: var(--color-bg, #fff); }
.panel { top: calc(var(--header-h) + var(--s3)); }
.formular[id] { scroll-margin-top: 0; }

/* ==== Knopf in der Kopfleiste (Vorbild-Messung 20.09.2026: 15px/600, Innenabstand 13px 20px, Rot #C8102E) ==== */
.site-nav ul { align-items: center; }
.site-nav a.header-cta, .site-nav a.header-cta[aria-current="page"] { display: inline-block; background: var(--rot); color: #fff; font-family: var(--font-text); font-size: 15px; font-weight: 600; line-height: 17.25px; padding: 13px 20px; border-radius: var(--radius-s); text-decoration: none; border: 0; }
.site-nav a.header-cta:hover { background: var(--rot-dunkel); color: #fff; }
@media (max-width: 980px) {
  .js .site-nav ul { align-items: flex-start; }
}

/* ==== Gewerke-Leiste als ein fertiges Bild (von Jonas geliefert 20.09.2026, 2000x425, Schraegen sind im Bild): volle Breite, Hoehe folgt dem Seitenverhaeltnis, damit links und rechts niemand abgeschnitten wird ==== */
.gewerke-leiste--bild { height: auto; line-height: 0; }
.leiste-gesamt { display: block; width: 100%; height: auto; aspect-ratio: 2000 / 425; object-fit: cover; }

/* ==== Wirkung-Grafik, Feinschliff 20.09.2026: Blasen mittig ueber der Kachel "Ihr Betrieb" (Behaelter so breit wie der Knoten, 170px), mehr Luft unter der Headline (Vorbild 70px, hier 48px) ==== */
.wirkung h2 { margin-bottom: 48px; }
.wirkung-blasen { left: 0; width: 170px; }
@media (max-width: 980px) {
  .wirkung h2 { margin-bottom: 28px; }
  .wirkung-blasen { left: -20px; width: 180px; }
}

/* ==== Wirkung, Abstaende und Trennlinie nach Vorbild (Messung 20.09.2026: Linie 1px #EAECF0 ueber 1200px, 80px unter den Karten; Knopf und Karten mit mehr Luft) ==== */
.wirkung { padding-bottom: 0; }
.wirkung-cta { margin-top: 72px; }
.wirkung-karten { padding-top: 80px; }
.wirkung .wrap::after { content: ""; display: block; height: 1px; background: #EAECF0; margin-top: 80px; }
@media (max-width: 980px) {
  .wirkung-cta { margin-top: 48px; }
  .wirkung-karten { padding-top: 48px; }
  .wirkung .wrap::after { margin-top: 48px; }
}

/* ==== Erstgespraech-Karten: Abstand zum schwarzen Kontakt-Block verdoppelt (50 -> 100px), Jonas 20.09.2026 ==== */
.gespraech { padding-bottom: 100px; }
@media (max-width: 980px) { .gespraech { padding-bottom: 64px; } }

/* ==== Rote Knoepfe: Schriftglaettung wie beim Vorbild (dort "auto", bei uns global "antialiased" = sichtbar duennere weisse Schrift), 20.09.2026 ==== */
.cta, .site-nav a.header-cta { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }


/* ==== Ablauf: Grafikfeld mit festem Seitenverhaeltnis (kein Ueberstand mehr), aktiver Schritt hervorgehoben, 20.09.2026 ==== */
.js .panel { min-height: 0; aspect-ratio: 340 / 220; }
@media (min-width: 981px) {
  .js .scrolly .schritt[data-schritt] { cursor: pointer; opacity: .45; transition: opacity var(--t-reveal) var(--ease); }
  .js .scrolly .schritt[data-schritt].schritt--aktiv { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .scrolly .schritt[data-schritt] { opacity: 1; transition: none; }
}

/* ==== Leistungsseite Webseiten: eine einzelne Preiskarte, mittig ==== */
.preis-karten--eine { grid-template-columns: minmax(0, 420px); justify-content: center; }

/* ==== Methode-Seite: Formelzeile im mittigen Hero zentriert ==== */
.hero--mittig .kalkzeile { margin-inline: auto; justify-content: center; }

/* ==== Kontakt: Bloecke untereinander, Rueckruf-Formular klappt erst nach Klick auf Weg B auf (ohne JS bleibt es sichtbar), 20.09.2026 ==== */
.wege-raster--gestapelt { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.wege-raster--gestapelt > * { max-width: 760px; }
.wege + .formular[hidden] { display: none; }
.wege { padding-bottom: var(--s8); }

/* ==== Kontaktseite mittig (Jonas 20.09.2026): Hero, Bloecke und Formular zentriert, Listentext bleibt linksbuendig lesbar ==== */
.wege-raster--gestapelt > * { margin-inline: auto; width: 100%; }
.wege-raster--gestapelt h2 { text-align: center; }
.wege-raster--gestapelt .wege-liste { width: 100%; max-width: 820px; margin-inline: auto; } /* feste Breite statt fit-content: fit-content sprang beim Font-Swap seitlich (CLS 0,19 Erstgespräch Desktop, Gate 22.09.2026) */
.wege + .formular .formular-titel { text-align: center; }
.wege + .formular form { margin-inline: auto; }
.wege + .formular .cta { align-self: center; }
.wege + .formular .form-fehler { max-width: 560px; margin-inline: auto; }

/* ==== Kontakt: mehr Luft zwischen "Das erwartet Sie" und den zwei Wegen (48 -> 88px), Jonas 20.09.2026 ==== */
.wege-raster--gestapelt { gap: 88px; }
@media (max-width: 980px) { .wege-raster--gestapelt { gap: 56px; } }

/* ==== Kontakt nach CRO-Wissen (Vault: Risiko-Reduzierer direkt am Button, naechster Schritt klar): Auswahl zuerst, darunter Ansprechpartner + "kostenfrei, 30 Minuten" + Telefon; Formular klappt direkt unter der Auswahl auf; "Das erwartet Sie" folgt danach ==== */
.hero--mittig + .wege { padding-top: 0; }
.hero.hero--klein.hero--mittig:has(+ .wege) { padding-bottom: var(--s6); }
.weg-sicherheit { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); padding: 4px 4px 0; text-align: left; }
.weg-sicherheit img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.weg-sicherheit p { margin: 0; font-size: var(--text-14); line-height: 1.55; color: #475467; }
.weg-sicherheit strong { color: #000; font-weight: 600; }
.weg-sicherheit a { color: #000; font-weight: 600; white-space: nowrap; }
.wege--erwartet { padding-top: var(--s4); }

/* ==== Webseiten-Pakete (Aufbau nach Vorbild m1-website.de auf Jonas' Wunsch, 20.09.2026: drei Karten, gleiche Gliederung, Knopf "Kostenlose Beratung", dritte Karte hervorgehoben; eigene Farben und Texte) ==== */
.pakete { padding-block: var(--s8); background: var(--flaeche-alt); }
.pakete h2 { font-family: var(--font-text); font-size: 35px; font-weight: 500; line-height: 1.4; text-align: center; max-width: none; margin: 0 0 12px; color: #000; }
.pakete-sub { text-align: center; max-width: 62ch; margin: 0 auto var(--s6); color: #475467; }
.pakete-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: stretch; }
.paket { position: relative; display: flex; flex-direction: column; padding: 40px 36px 36px; background: #fff; border: 1px solid #D0D5DD; }
.paket--top { background: #E9ECEF; border-color: #E9ECEF; }
.paket--top::after { content: ""; position: absolute; top: 0; right: 32px; width: 34px; height: 46px; background: var(--rot); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }
.paket-kopf { padding-bottom: 28px; margin-bottom: 32px; border-bottom: 1px solid #D0D5DD; }
.paket-kopf h3 { font-family: var(--font-text); font-size: 28px; font-weight: 500; line-height: 1.2; margin: 0 0 6px; color: #000; }
.paket-kopf p { margin: 0; color: #475467; }
.paket-preis { font-family: var(--font-text); font-size: 32px; font-weight: 800; line-height: 1.1; margin: 0 0 6px; color: #000; }
.paket-takt { margin: 0 0 28px; color: #344054; }
.paket h4 { font-family: var(--font-text); font-size: 16px; font-weight: 700; color: var(--rot); margin: 24px 0 12px 30px; }
.paket-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.paket-liste li { position: relative; padding-left: 30px; line-height: 1.5; color: #1D2939; }
.paket-liste li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border: 1.5px solid #1D2939; border-radius: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231D2939' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.6 3.6L16 6'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
.paket-cta { margin-top: auto; display: block; text-align: center; padding: 18px 20px; border: 1.5px solid var(--rot); color: var(--rot); font-weight: 700; font-size: 18px; text-decoration: none; border-radius: var(--radius-s); }
.paket .paket-liste:last-of-type { margin-bottom: 40px; }
.paket-cta:hover { background: var(--rot); color: #fff; }
.paket-cta--voll { background: var(--rot); color: #fff; -webkit-font-smoothing: auto; }
.paket-cta--voll:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); }
.pakete-fuss { margin: var(--s4) 0 0; font-size: var(--text-14); color: #667085; }
@media (max-width: 980px) {
  .pakete h2 { font-size: 28px; }
  .pakete-raster { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .paket { padding: 28px 22px 24px; }
}

/* ==== Kontakt: "Das erwartet Sie" breiter, damit der erste Punkt am Desktop in eine Zeile passt (Jonas 20.09.2026) ==== */
.wege--erwartet .wege-raster--gestapelt > * { max-width: 960px; }

/* ==== Mobile-Durchgang Runde 1 (20.09.2026, 390 px): Blasen starteten im Kachelbereich und ueberdeckten "Ihr Betrieb"; Telefon-Link unter 40 px Tipphoehe ==== */
@media (max-width: 980px) {
  .wirkung-grafik { padding-top: 124px; }
  .wirkung-blasen { height: 124px; left: -12px; width: 116px; }
  .wirkung-blasen span { bottom: 14px; font-size: 11px; padding: 4px 10px; }   /* schmaler, sonst ragt die breiteste Blase links aus dem Bild */
}
.kontakt-telefon { min-height: 44px; }

/* ==== Referenzen: Bewertungs-Karten (Aufbau nach Vorbild space-rocket-berlin.de, eigene Gestaltung) + Einblend-Kaertchen mit echten Bewertungen, 20.09.2026 ==== */
.rezensionen { padding-block: 0 var(--s8); }
.rez-summe { text-align: center; margin: 0 0 var(--s6); font-size: 18px; color: #344054; }
.rez-summe strong { color: #000; } .rez-summe span { color: #667085; font-size: var(--text-14); }
.rez-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rez-karte { display: flex; flex-direction: column; padding: 28px; background: #FAFAFA; border: 1px solid #EAECF0; border-radius: 20px; }
.rez-name { margin: 0 0 14px; font-weight: 600; font-size: 18px; color: #000; }
.rez-sterne { margin: 0 0 10px; color: #F5B301; font-size: 22px; letter-spacing: 2px; line-height: 1; }
.rez-text { margin: 0 0 6px; line-height: 1.55; color: #1D2939; }
.rez-mehr { color: #98A2B3; font-size: var(--text-14); text-decoration: none; margin-bottom: 20px; }
.rez-mehr:hover { color: #000; text-decoration: underline; }
.rez-quelle { margin: auto 0 0; display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1.35; color: #667085; }
.rez-g { flex: none; }
.rez-alle { text-align: center; margin: var(--s6) 0 var(--s3); }
.rez-hinweis { max-width: 78ch; margin: 0 auto; text-align: center; font-size: 13px; line-height: 1.55; color: #667085; }
@media (max-width: 980px) { .rez-raster { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

.rez-toast { position: fixed; left: 20px; bottom: 20px; z-index: 90; display: flex; align-items: center; gap: 14px; max-width: 360px; padding: 14px 40px 14px 16px; background: #fff; border-radius: 18px; box-shadow: 0 12px 32px rgba(17, 18, 22, .18); text-decoration: none; color: #1D2939; opacity: 0; transform: translateY(16px); transition: opacity 450ms var(--ease), transform 450ms var(--ease); pointer-events: none; }
.rez-toast.sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.rez-toast-text { font-size: 14px; line-height: 1.45; }
.rez-toast-text strong { color: #000; }
.rez-toast-text small { display: block; margin-top: 4px; font-size: 12px; color: #667085; }
.rez-toast-text small b { color: #F5B301; font-weight: 400; letter-spacing: 1px; }
.rez-toast-zu { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; border: 0; background: none; color: #98A2B3; font-size: 18px; line-height: 1; cursor: pointer; }
@media (max-width: 640px) { .rez-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .rez-toast { transition: none; transform: none; } }

/* ==== Kontakt: kleine Richtungspfeile (Hero -> Auswahl, Auswahl -> "Das erwartet Sie"), sanftes Wippen, 20.09.2026 ==== */
.pfeil-runter { display: flex; justify-content: center; margin-top: var(--s3); color: var(--rot); }
.pfeil-runter--unten { margin-top: var(--s4); color: #98A2B3; }
.hero.hero--klein.hero--mittig:has(.pfeil-runter) { padding-bottom: var(--s3); }
@media (prefers-reduced-motion: no-preference) {
  .pfeil-runter svg { animation: pfeil-wippt 1.8s var(--ease) infinite; }
}
@keyframes pfeil-wippt { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ==== Erstgespraech: Schritt-fuer-Schritt-Ablauf (Eigenbau nach dem Prinzip des Vorbild-Formulars), klassische Kontaktseite, Danke-Varianten, 20.09.2026 ==== */
.eg { padding-block: var(--s6) var(--s8); min-height: 70dvh; }
.eg-wrap { max-width: calc(760px + 2 * var(--wrap-gutter)); }
.eg-balken { height: 4px; background: #EAECF0; border-radius: 2px; margin-bottom: var(--s6); overflow: hidden; }
.eg-balken span { display: block; height: 100%; width: 0; background: var(--rot); transition: width 300ms var(--ease); }
.eg-form { display: flex; flex-direction: column; gap: var(--s6); }
.eg-schritt { border: 0; margin: 0; padding: 0; min-width: 0; }
.eg-schritt[hidden] { display: none; }
.eg-schritt h1, .eg-schritt legend { font-family: var(--font-text); font-size: 30px; font-weight: 600; line-height: 1.25; color: #000; margin: 0 0 var(--s3); padding: 0; }
.eg-nr { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 10px; background: #000; color: #fff; font-size: 14px; font-weight: 700; border-radius: 4px; vertical-align: 4px; }
.eg-lead { margin: 0 0 var(--s3); color: #344054; font-size: 18px; }
.eg-klein { margin: var(--s4) 0 0; color: #667085; font-size: var(--text-14); }
.eg-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.eg-chips--breit { grid-template-columns: minmax(0, 1fr); }
.eg-chip { position: relative; display: block; cursor: pointer; }
.eg-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.eg-chip span { display: block; padding: 14px 18px; min-height: 52px; border: 2px solid #EAECF0; background: #fff; font-weight: 600; line-height: 1.35; color: #000; }
.eg-chip:hover span { border-color: #98A2B3; }
.eg-chip input:checked + span { border-color: #000; background: #F9FAFB; }
.eg-chip input:focus-visible + span { outline: 2px solid var(--rot); outline-offset: 2px; }
.eg-chip--weg span b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 10px; background: #000; color: #fff; font-size: 13px; border-radius: 4px; }
.eg-chip--weg small { display: block; margin: 4px 0 0 36px; font-size: var(--text-14); font-weight: 400; color: #475467; }
.eg-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.eg-rueckruf { margin-top: var(--s3); }
.eg-rueckruf[hidden] { display: none; }
.eg .feld select { min-height: 48px; padding: 0 12px; border: 1px solid #D0D5DD; background: #fff; font: inherit; }
.eg .feld--consent { margin-top: var(--s3); }
.eg-nav [hidden] { display: none; }
.eg-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.eg-nav .cta { border: 0; cursor: pointer; margin-left: auto; }
.eg-zurueck { border: 0; background: none; padding: 12px 4px; font: inherit; font-weight: 600; color: #475467; cursor: pointer; }
.eg-zurueck:hover { color: #000; }
.eg-sicherheit { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid #EAECF0; }
.eg .form-fehler { margin-bottom: var(--s3); }
@media (max-width: 640px) {
  .eg-schritt h1, .eg-schritt legend { font-size: 24px; }
  .eg-felder, .eg-chips--breit { grid-template-columns: minmax(0, 1fr); }
  .eg-chips { gap: 8px; }
  .eg-chips:not(.eg-chips--breit) .eg-chip span { padding: 12px; font-size: 14px; min-height: 60px; display: flex; align-items: center; }
}

.kontakt-seite { padding-block: 0 var(--s8); }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); align-items: start; }
.kontakt-daten h2, .kontakt-hinweis h3 { font-family: var(--font-text); font-size: 24px; font-weight: 600; margin: 0 0 var(--s3); color: #000; }
.kontakt-zeile { margin: 0 0 var(--s3); line-height: 1.6; }
.kontakt-zeile span { display: block; font-size: var(--text-14); color: #667085; }
.kontakt-zeile a { color: #000; font-weight: 600; font-size: 18px; text-decoration: none; }
.kontakt-zeile a:hover { text-decoration: underline; }
.kontakt-hinweis { margin-top: var(--s6); padding: 24px; border: 3px solid #EAECF0; }
.kontakt-hinweis h3 { font-size: 20px; margin-bottom: 8px; }
.kontakt-hinweis p { margin: 0 0 var(--s3); color: #344054; }
.formular--seite { padding: 0; }
.formular--seite form { max-width: none; }
@media (max-width: 980px) { .kontakt-raster { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } }

.danke-termin { margin-top: var(--s4); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.danke-termin[hidden] { display: none; }
.danke-termin small { color: #667085; }

/* ==== Erstgespraech, Startbildschirm (Jonas 20.09.2026): die drei Punkte einzeilig, alles mittig, Knopf mittig darunter. Die Fragen-Schritte bleiben 760px breit. ==== */
.eg-wrap { max-width: calc(1000px + 2 * var(--wrap-gutter)); }
.eg-balken, .eg-schritt:not([data-schritt-nr="0"]), .eg-nav, .eg-sicherheit, .eg .form-fehler { max-width: 760px; margin-inline: auto; width: 100%; }
.eg-schritt[data-schritt-nr="0"] { text-align: center; }
.eg-schritt[data-schritt-nr="0"] .wege-liste { width: 100%; max-width: 820px; margin-inline: auto; text-align: left; }
.eg-form--js:has(.eg-schritt[data-schritt-nr="0"]:not([hidden])) .eg-nav { justify-content: center; }
.eg-form--js:has(.eg-schritt[data-schritt-nr="0"]:not([hidden])) .eg-nav .cta { margin-left: 0; }
.eg-form--js:has(.eg-schritt[data-schritt-nr="0"]:not([hidden])) { gap: var(--s4); }
/* CLS-Schutz (Gate 22.09.2026): main.js läuft mit defer erst nach dem ersten Bildaufbau und blendet Schritt 1-4 aus,
   dadurch sprang alles darunter nach oben (CLS 0,29). Ein Inline-Skript im <head> setzt html.js vor dem ersten Paint;
   bis main.js die Klasse eg-form--js setzt, gelten diese Regeln. Ohne JS (kein html.js) bleibt das lange Formular. */
html.js .eg-form:not(.eg-form--js) .eg-schritt:not([data-schritt-nr="0"]) { display: none; }
html.js .eg-form:not(.eg-form--js) { gap: var(--s4); }
html.js .eg-form:not(.eg-form--js) .eg-nav { min-height: 54px; justify-content: center; }

/* ==== Formulare nach Vorbild-Formular (20.09.2026): rotes Pflicht-Sternchen, Felder paarweise, Auswahl "Ich interessiere mich fuer" ==== */
.pflicht { color: #DC2626; font-weight: 600; }
.feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.feld--wahl { border: 0; margin: 0; padding: 0; min-width: 0; }
.feld--wahl legend { padding: 0; margin-bottom: 10px; font-weight: 600; font-size: var(--text-14); }
.wahl-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.wahl { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.wahl input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--rot); }
.eg-feld--breit { grid-column: 1 / -1; }
@media (max-width: 640px) { .feld-paar { grid-template-columns: minmax(0, 1fr); } }

/* ==== Kontaktseite: Erstgespraech-Kasten steht oben (CRO, 20.09.2026). Ablauf: E-Mail erst in Schritt 4 ==== */
.kontakt-daten .kontakt-hinweis { margin: 0 0 var(--s6); border-color: #000; }
.eg-mail { margin-top: var(--s3); }
[data-mail-optional][hidden], [data-mail-pflicht][hidden] { display: none; }

/* ==== Trust-Symbole (Google-Bewertung + Google Partner) auch auf Kontakt und Erstgespraech, direkt am Knopf bzw. unter dem Ansprechpartner ==== */
.hero-siegel--seite { justify-content: flex-start; margin-top: var(--s3); }
.hero-siegel--mittig { justify-content: center; max-width: 760px; margin: var(--s3) auto 0; }

/* ==== Leistungsseiten nach Vorbild-Aufbau (20.09.2026): Ergebnis statt Fachbegriff. Hero mit Bild, eine Kundenstimme, ein Block mit drei Punkten, FAQ ==== */
.lp-hero { padding-block: var(--s8) var(--s6); }
.lp-hero-raster, .lp-block-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: center; }
.lp-hero h1 { margin-bottom: var(--s3); }
.lp-hero .hero-satz { max-width: 52ch; margin-bottom: var(--s4); }
.lp-bild { margin: 0; }
.lp-bild svg { display: block; width: 100%; height: auto; background: var(--flaeche-alt); border-radius: var(--radius-l); }
.lp-stimme { padding-block: var(--s6); background: var(--flaeche-alt); text-align: center; }
.lp-stimme h2, .lp-block h2 { font-family: var(--font-text); font-size: 30px; font-weight: 600; line-height: 1.3; color: #000; margin: 0 0 var(--s3); max-width: none; }
.lp-zitat { margin: 0 auto; max-width: 720px; }
.lp-zitat blockquote { margin: 0 0 12px; font-size: 22px; line-height: 1.45; color: #000; }
.lp-zitat figcaption { color: #475467; font-size: var(--text-14); }
.lp-mehr { margin: var(--s3) 0 0; }
.lp-mehr a { color: #000; font-weight: 600; }
.lp-block { padding-block: var(--s8); }
.lp-block-raster { align-items: start; }
.lp-block p { color: #344054; line-height: 1.65; margin: 0; }
.lp-detail { margin-top: var(--s4) !important; font-size: var(--text-14); color: #667085 !important; }
.lp-detail a { color: #000; }
.leistungen-kacheln--hub { padding-top: 0; }
@media (max-width: 980px) {
  .lp-hero-raster, .lp-block-raster { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .lp-hero { padding-block: var(--s6) var(--s4); }
  .lp-stimme h2, .lp-block h2 { font-size: 24px; }
  .lp-zitat blockquote { font-size: 19px; }
}

/* ==== FAQ mittig (Jonas 20.09.2026): Ueberschrift zentriert, Fragenblock 760px breit in der Seitenmitte, Text in den Antworten bleibt linksbuendig ==== */
.faq h2 { text-align: center; max-width: none; }
.faq details { max-width: 760px; margin-inline: auto; }
.faq details p { max-width: none; }

/* ==== Logo mit Claim "Agentur fuer Auftraege & Mitarbeiter" (neues Logo-Paket vom 18.09.2026, Jonas 20.09.2026). Als Text gesetzt: scharf, leicht, lesbar fuer Screenreader. Die SVG-Dateien des Pakets enthalten nur eingebettete Pixelbilder und taugen nicht fuers Web. ==== */
.logo-text { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.logo-text::before { content: ""; display: block; width: 100%; height: 2px; margin-bottom: 5px; background: var(--rot); border-radius: 1px; }
.logo-name { font-size: 20px; letter-spacing: .04em; }
.logo-claim { margin-top: 4px; font-family: var(--font-text); font-weight: 500; font-size: 10px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
@media (max-width: 640px) {
  .logo-name { font-size: 17px; }
  .logo-claim { font-size: 8.5px; }
}

/* Schmale Desktop-Breiten (981 bis 1240 px): mit dem breiteren Logo brach die Kopfleiste um. Abstaende und Schrift leicht verkleinert. */
@media (min-width: 981px) and (max-width: 1240px) {
  .site-header .wrap { flex-wrap: nowrap; gap: 16px; }
  .site-nav ul { gap: 14px; flex-wrap: nowrap; }
  .site-nav a { font-size: 15px; white-space: nowrap; }
  .site-nav a.header-cta { padding: 11px 14px; font-size: 14px; }
  .logo-name { font-size: 18px; }
  .logo-claim { font-size: 9px; }
}

/* Befund 20.09.2026: Zwischen 981 und rund 1300 px ragte die Einsatzplan-Tabelle (min-width 560) 12 px aus der Karte und erzeugte seitliches Scrollen. Tabelle darf schrumpfen, Rest scrollt in der Box. */
.effekt .plan-scroll { overflow-x: auto; max-width: 100%; }
@media (min-width: 981px) { .effekt .plan { min-width: 0; } }

/* ---------- Mobile Runde 2 (21.09.2026): Tipp-Flächen, Lesbarkeit, fester Knopf ---------- */
.mobil-leiste { display: none; }
@media (max-width: 640px) {
  .site-footer nav ul a, .site-footer .footer-info a { display: inline-block; padding-block: 12px; }
  .site-footer nav ul li { margin: 0; }
  .footer-recht a, .site-footer .footer-unten a { display: inline-block; padding-block: 12px; }
  .rez-mehr { display: inline-block; padding-block: 11px; }
  .leistungen-detail a, .lp-mehr a { display: inline-block; padding-block: 9px; }
  .google-wert { font-size: 12px; }
  .kalk-label { font-size: 12px; }
  .logo-claim { font-size: 9px; }
  .prosa, .recht, main p, main li { overflow-wrap: anywhere; }
  main table { max-width: 100%; }

  .mobil-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -6px 20px rgba(17, 18, 22, .12); transform: translateY(110%); transition: transform 300ms var(--ease); }
  .mobil-leiste.sichtbar { transform: none; }
  .mobil-leiste a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: var(--radius-s); font-family: var(--font-text); font-weight: 600; font-size: 15px; text-decoration: none; }
  .mobil-leiste .ml-anruf { border: 1.5px solid #181818; color: #181818; background: #fff; }
  .mobil-leiste .ml-termin { background: var(--rot); color: #fff; }
  .mobil-leiste svg { width: 18px; height: 18px; flex: none; }
  body.hat-mobil-leiste { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.hat-mobil-leiste .rez-toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .mobil-leiste { transition: none; } }
.paket-auf { display: none; }
@media (max-width: 640px) {
  .paket { padding: 28px 22px 24px; }
  .paket-kopf { padding-bottom: 18px; margin-bottom: 20px; }
  .paket-auf { display: block; width: 100%; min-height: 48px; margin: 20px 0 16px; padding: 10px 16px; border: 0; border-top: 1px solid #D0D5DD; border-bottom: 1px solid #D0D5DD; background: none; font-family: var(--font-text); font-size: 15px; font-weight: 600; color: #181818; text-align: left; cursor: pointer; }
  .paket-auf::after { content: "+"; float: right; font-size: 20px; line-height: 1; }
  .paket-auf[aria-expanded="true"]::after { content: "\2212"; }
  .paket-mehr[hidden] { display: none; }
  .paket-mehr { order: 0; margin-bottom: 24px; }
  .paket .paket-mehr .paket-liste:last-of-type { margin-bottom: 0; }
  .leistungen-hub-detail a, .detail-links a { display: inline-block; padding-block: 9px; }
}
@media (max-width: 640px) { .rechnung .zeile h3 a { display: inline-block; padding-block: 9px; } }
/* Kopfleiste Handy: Logo mit Claim und Menü-Knopf in einer Zeile (vorher rutschte der Knopf in die zweite Zeile) */
@media (max-width: 640px) {
  .site-header .wrap { column-gap: 10px; padding-inline: 16px; }
  .site-header .logo { gap: 8px; min-width: 0; }
  .site-header .nav-toggle { margin-left: auto; min-height: 44px; }
}
@media (max-width: 374px) {
  .site-header .logo img { width: 36px; height: auto; }
  .site-header .logo-name { font-size: 17px; }
  .site-header .logo-claim { font-size: 7.5px; }
}
@media (max-width: 374px) { .cta--band { max-width: 100%; white-space: normal; text-align: center; padding-inline: 16px; } }

/* ---------- Sprachwahl DE | EN (21.09.2026), rechts aussen in der Kopfleiste ---------- */
.site-nav .nav-sprache { display: inline-flex; align-items: center; gap: 0; margin-left: 4px; font-family: var(--font-text); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.site-nav .nav-sprache > * { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 32px; padding: 0 6px; border: 1px solid #D0D5DD; text-decoration: none; color: #475467; background: #fff; }
.site-nav .nav-sprache > * + * { border-left: 0; }
.site-nav .nav-sprache > :first-child { border-radius: var(--radius-s) 0 0 var(--radius-s); }
.site-nav .nav-sprache > :last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.site-nav .nav-sprache .sprache-aktiv { background: #181818; border-color: #181818; color: #fff; }
.site-nav .nav-sprache a:hover { color: #000; background: var(--flaeche-alt); }
.site-nav .nav-sprache a::after { display: none; }
.hinweis-uebersetzt { font-size: var(--text-14); color: #667085; }
@media (max-width: 980px) {
  .site-nav .nav-sprache { margin: 12px 0 4px; }
  .site-nav .nav-sprache > * { min-width: 56px; min-height: 44px; font-size: 15px; }
}

/* Befund Jonas 21.09.2026: Seit der Sprachwahl brach die deutsche Kopfleiste ab 1241 px um (Logo oben, Menü darunter).
   Die deutsche Leiste ist breiter als die englische (Werkbank, längerer Knopf). Ab 981 px nie umbrechen, Abstände enger. */
@media (min-width: 1241px) {
  .site-header .wrap { flex-wrap: nowrap; gap: 20px; }
  .site-nav ul { flex-wrap: nowrap; gap: 18px; }
  .site-nav a { white-space: nowrap; }
  .site-nav .nav-sprache { margin-left: 0; }
}
/* 981 bis 1080 px: deutsche Leiste mit Sprachwahl ragte 19 px über den Rand. Noch etwas enger. */
@media (min-width: 981px) and (max-width: 1080px) {
  .site-header .wrap { gap: 12px; }
  .site-nav ul { gap: 10px; }
  .site-nav a { font-size: 14px; }
  .site-nav a.header-cta { padding: 10px 10px; font-size: 13px; }
  .site-nav .nav-sprache { margin-left: 0; font-size: 12px; }
  .site-nav .nav-sprache > * { min-width: 30px; padding: 0 4px; }
}

/* Webseiten-Hero (28.09.2026): echtes Projekt im Browser-Rahmen statt gezeichneter Skizze */
.lp-fenster { border: 1px solid #18181824; border-radius: var(--radius-l); overflow: hidden; background: #fff; box-shadow: 0 18px 40px rgba(17, 18, 22, .10); }
.lp-fenster-leiste { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #F1F1EF; }
.lp-fenster-leiste i { width: 8px; height: 8px; border-radius: 50%; background: #C9CBD0; }
.lp-fenster img { display: block; width: 100%; height: auto; }
.lp-bild figcaption { margin-top: 12px; font-size: var(--text-14); line-height: 1.4; color: #5B5F66; text-align: center; }

/* Einwilligungsfenster (29.09.2026): Fenster in der Seitenmitte mit drei Reitern und Schaltern je Zweck.
   "Ablehnen" und "Alle zulassen" sind bewusst gleich gestaltet (Vault: Website-Recht, kein Nudging). */
html.ew-offen { overflow: hidden; }
.ew-schleier { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(17, 18, 22, .62); animation: ew-ein 200ms var(--ease); }
.ew-schleier[hidden] { display: none; }
.ew-fenster { display: flex; flex-direction: column; width: 100%; max-width: 760px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); background: #fff; color: var(--ink); border-radius: var(--radius-m); box-shadow: 0 24px 60px rgba(17, 18, 22, .35); overflow: hidden; font-family: var(--font-text); font-size: var(--text-16); line-height: 1.55; }
.ew-fenster:focus { outline: none; }
.ew-kopf { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-bottom: 1px solid var(--linie); font-family: var(--font-display); font-weight: 800; font-size: var(--text-16); letter-spacing: .04em; }
.ew-kopf img { width: 30px; height: auto; }
.ew-reiter { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--linie); flex: none; }
.ew-reiter button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 14px 8px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.ew-reiter button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.ew-reiter button:hover { color: var(--ink); }
.ew-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px 0; }
.ew-inhalt p { margin: 0 0 12px; max-width: none; }
.ew-inhalt a { color: var(--ink); text-decoration: underline; }
.ew-titel { font-weight: 700; }
.ew-inhalt [role="tabpanel"] > .ew-titel:not(:first-child) { margin-top: 22px; }
.ew-klein { font-size: var(--text-14); color: var(--muted); }
.ew-zwecke { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px -24px 0; border-top: 1px solid var(--linie); }
.ew-zweck { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 12px 22px; text-align: center; cursor: pointer; }
.ew-zweck + .ew-zweck { border-left: 1px solid var(--linie); }
.ew-zweck-name { font-weight: 600; }
.ew-zweck-name small { display: block; font-weight: 400; font-size: var(--text-13); color: var(--muted); }
.ew-schalter { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ew-bahn { position: relative; flex: none; margin-top: auto; width: 56px; height: 30px; border-radius: 30px; background: #C9CBD0; transition: background var(--t-hover) var(--ease); }
.ew-bahn::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(17, 18, 22, .3); transition: transform var(--t-hover) var(--ease); }
.ew-schalter:checked + .ew-bahn { background: var(--ink); }
.ew-schalter:checked + .ew-bahn::after { transform: translateX(26px); }
.ew-schalter:disabled + .ew-bahn { opacity: .55; }
.ew-schalter:focus-visible + .ew-bahn { outline: 2px solid var(--rot); outline-offset: 3px; }
.ew-zweck:has(.ew-schalter:disabled) { cursor: default; }
.ew-tabelle { margin: 0 0 8px; border: 1px solid var(--linie); border-radius: var(--radius-s); font-size: var(--text-14); }
.ew-zeile { display: grid; grid-template-columns: 1.1fr 1.3fr 2fr 1.2fr; gap: 12px; padding: 9px 12px; }
.ew-zeile + .ew-zeile { border-top: 1px solid var(--linie); }
.ew-zeile--kopf { font-weight: 600; background: var(--flaeche-alt); }
.ew-zeile code { font-size: var(--text-13); overflow-wrap: anywhere; }
.ew-knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px 24px 22px; border-top: 1px solid var(--linie); flex: none; background: #fff; }
.ew-knopf { appearance: none; min-height: 52px; padding: 12px 16px; border: 2px solid var(--ink); border-radius: var(--radius-s); background: var(--ink); color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.ew-knopf:hover { background: #000; border-color: #000; }
.ew-knopf--rand { background: #fff; color: var(--ink); }
.ew-knopf--rand:hover { background: var(--flaeche-alt); border-color: var(--ink); }
.ew-knopf:focus-visible, .ew-reiter button:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }
@keyframes ew-ein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ew-schleier { animation: none; } .ew-bahn, .ew-bahn::after { transition: none; } }
@media (max-width: 640px) {
  .ew-schleier { padding: 10px; align-items: end; }
  .ew-fenster { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); font-size: 15px; }
  .ew-kopf { padding: 10px 16px; font-size: var(--text-14); }
  .ew-kopf img { width: 24px; }
  .ew-reiter button { padding: 11px 4px; font-size: var(--text-14); }
  .ew-inhalt { padding: 16px 16px 0; }
  .ew-zwecke { grid-template-columns: 1fr; margin: 12px -16px 0; }
  .ew-zweck { flex-direction: row; justify-content: space-between; padding: 11px 16px; text-align: left; }
  .ew-zweck + .ew-zweck { border-left: 0; border-top: 1px solid var(--linie); }
  .ew-zweck-name small { display: inline; margin-left: 6px; }
  .ew-bahn { width: 48px; height: 26px; margin-top: 0; }
  .ew-bahn::after { width: 20px; height: 20px; }
  .ew-schalter:checked + .ew-bahn::after { transform: translateX(22px); }
  .ew-zeile { grid-template-columns: 1fr; gap: 2px; }
  .ew-zeile--kopf { display: none; }
  .ew-zeile span[data-kopf]::before { content: attr(data-kopf) ": "; color: var(--muted); }
  .ew-knoepfe { grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px 14px; }
  .ew-knopf { min-height: 46px; padding: 8px 10px; }
  .ew-knopf--rand { grid-column: 1 / -1; order: 3; min-height: 42px; }
}

/* Branchenseiten /branchen/<slug>/ (30.09.2026), Vorbild am-beratung.de/branchen/kuechen, reduziert.
   Seiten entstehen aus scripts/branchen.py. Blau der zweiten Pille ist eine Vorbild-Ausnahme (kein Token). */
.br-hero { padding-block: 96px 64px; }
.br-hero .hero-grid { gap: 64px; align-items: start; }
.br-hero .hero-text { padding-top: 36px; }
.br-hero .kicker { font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #667085; margin-bottom: 28px; }
.br-hero h1 { font-size: clamp(36px, 3.6vw, 52px); line-height: 1.15; margin-bottom: 28px; hyphens: manual; overflow-wrap: normal; text-wrap: wrap; }   /* Trennstellen kommen aus branchen_daten.py, nie mitten im Wort */
.br-hero h1.br-h1--lang { font-size: clamp(30px, 3.05vw, 44px); }   /* lange Einzelwoerter (Photovoltaikanlagen) passen so in eine Zeile */
.br-hero .hero-satz { max-width: 34em; }
.br-knoepfe { display: flex; flex-wrap: wrap; gap: 20px; margin: 0 0 28px; }
.br-knoepfe .cta { display: inline-flex; align-items: center; justify-content: center; min-width: 210px; border: 2px solid var(--rot); border-radius: 0; }
.br-knoepfe .cta:hover { border-color: var(--rot-dunkel); }
.cta--rand, .br-knoepfe .cta--rand { background: #fff; color: var(--ink); border-color: #D0D5DD; }
.cta--rand:hover, .br-knoepfe .cta--rand:hover { background: var(--flaeche-alt); color: var(--ink); border-color: var(--ink); }
.br-hero .hero-siegel { justify-content: flex-start; margin-top: 0; }
.br-media { position: relative; padding-bottom: 12px; }
.br-bild { display: block; width: 92%; margin-left: 8%; aspect-ratio: 473 / 407; object-fit: cover; object-position: 50% 62%; }
.br-bild--leer { display: grid; place-items: center; background: var(--flaeche-alt); border: 1px dashed #C9CBD0; color: #98A2B3; font-size: var(--text-14); }
.br-bild--leer span { transform: translate(60px, -90px); }
.br-karten { position: relative; display: grid; gap: 20px; width: 56%; margin-top: -42%; }
.br-karte { position: relative; padding: 18px 18px 20px; background: #fff; border: 2px solid #EAECF0; box-shadow: 0 8px 22px rgba(17, 18, 22, .06); }
.br-pille { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 18px; padding: 3px 10px; border: 1px solid #EAECF0; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.4; }
.br-pille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.br-pille--gruen { color: #067647; }
.br-pille--blau { color: #175CD3; }
.br-symbol { position: absolute; top: 18px; right: 18px; color: #475467; }
.br-karte dl { display: flex; justify-content: space-between; gap: 16px; margin: 0; }
.br-karte dt { font-size: var(--text-14); color: #667085; margin-bottom: 4px; }
.br-karte dd { margin: 0; font-weight: 600; font-size: var(--text-16); color: #000; }
.br-karte dl div + div { text-align: right; }
.br-hinweis { margin: 14px 0 0 8%; }
.wirkung--mittig .wirkung-tag, .wirkung--mittig h2 { text-align: center; }
.wirkung--mittig .wirkung-cta { margin-top: 40px; }
.wirkung--mittig .wirkung-karten { padding-top: 64px; }
.wirkung--mittig { padding-bottom: 40px; }
.rezensionen--branche { padding-block: 80px 40px; }
.rezensionen--branche h2 { text-align: center; max-width: none; font-family: var(--font-text); font-size: 35px; font-weight: 500; line-height: 1.4; margin: 0 auto 20px; color: #000; }
@media (max-width: 980px) {
  .br-hero { padding-block: 40px 32px; }
  .br-hero .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .br-hero .hero-text { padding-top: 0; }
  .br-hero .kicker { margin-bottom: 14px; }
  .br-hero h1, .br-hero h1.br-h1--lang { font-size: clamp(28px, 8vw, 40px); margin-bottom: 18px; }
  .br-knoepfe { gap: 12px; }
  .br-knoepfe .cta { flex: 1 1 100%; min-width: 0; }
  .br-bild { width: 100%; margin-left: 0; aspect-ratio: 16 / 10; }
  .br-bild--leer span { transform: translateY(-46px); }
  .br-karten { width: auto; margin: -64px 16px 0; gap: 12px; }
  .br-hinweis { margin-left: 16px; }
  .rezensionen--branche { padding-block: 48px 24px; }
  .rezensionen--branche h2 { font-size: 26px; }
}

/* Sehr schmale Handys (bis 380 px): H1 der Startseite so klein, dass „Handwerksbetriebe“ in eine Zeile passt (30.09.2026) */
@media (max-width: 380px) { .hero--split:not(.br-hero) h1 { font-size: 27px; } }

/* Startseite, Ablauf als Weg einer Anfrage in vier Stationen (30.09.2026, Auftrag Jonas: „super einfach").
   Ersetzt auf / und /en/ die Sektion .scrolly. Klasse .auftragsweg, weil .weg schon die Auswahlkarten auf /erstgespraech/ sind; .scrolly bleibt fuer Methode und Leistungsseiten bestehen. */
.auftragsweg { padding-block: 80px 70px; background: var(--flaeche); }
.auftragsweg .wrap { max-width: calc(1200px + 2 * var(--wrap-gutter)); }
.auftragsweg h2 { text-align: center; max-width: none; font-family: var(--font-text); font-size: 35px; font-weight: 500; line-height: 1.4; color: #000; margin: 0 auto 12px; }
.weg-unter { text-align: center; max-width: 46em; margin: 0 auto 56px; font-size: 18px; color: #475467; }
.weg-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.weg-schritt { position: relative; }
.weg-bild { position: relative; height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; background: var(--flaeche-alt); border: 3px solid #EAECF0; }
.weg-schritt:not(:last-child) .weg-bild::after { content: ""; position: absolute; right: -36px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23C8102E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5l5 5-5 5'/%3E%3C/svg%3E") center / 16px no-repeat; border: 2px solid #EAECF0; z-index: 2; }
.weg-schritt h3 { font-family: var(--font-text); font-size: 20px; font-weight: 600; line-height: 1.35; margin: 22px 0 8px; color: #000; }
.weg-schritt p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); max-width: none; }
.weg-mehr { text-align: center; max-width: none; margin: 48px 0 0; font-size: 16px; color: #475467; }
.weg-mehr a { color: var(--ink); font-weight: 600; }
.w-suche { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #fff; border: 1px solid #D0D5DD; border-radius: 999px; font-size: 15px; color: #000; box-shadow: 0 2px 8px rgba(17, 18, 22, .06); }
.w-suche svg { flex: none; color: #667085; }
.w-echt { display: block; width: 100%; height: 128px; overflow: hidden; background: #fff; border: 1px solid #EAECF0; box-shadow: 0 2px 8px rgba(17, 18, 22, .06); }
/* Anzeige groesser: Bild breiter als der Rahmen, weisser Rand links und rechts faellt weg */
.weg-bild--anzeige { padding: 10px 8px 12px; }
.weg-bild--anzeige .w-echt { height: 142px; }
.w-echt img { display: block; width: 114%; max-width: none; height: auto; margin-left: -4%; }
.w-hinweis { font-size: 12px; line-height: 1.3; color: #667085; }
.w-seite { display: block; width: 100%; background: #fff; border: 1px solid #D0D5DD; box-shadow: 0 2px 8px rgba(17, 18, 22, .06); }
.w-seite i { display: flex; gap: 4px; padding: 6px 8px; background: #F1F1EF; }
.w-seite i::before, .w-seite i::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #C9CBD0; }
.w-seite > span { display: block; padding: 12px 14px 14px; text-align: left; }
.w-seite b { display: block; font-size: 14px; color: #000; margin-bottom: 10px; }
.w-seite em { display: inline-block; font-style: normal; font-size: 12px; font-weight: 600; color: #fff; background: var(--rot); padding: 6px 10px; }
.w-meldung { display: block; width: 100%; padding: 12px 14px 14px; background: #fff; border: 2px solid #EAECF0; box-shadow: 0 8px 22px rgba(17, 18, 22, .06); text-align: left; }
.w-meldung .br-pille { margin: 0 0 12px; font-size: 13px; white-space: nowrap; }
.w-zeile { display: flex; justify-content: space-between; gap: 12px; }
.w-zeile small { display: block; font-size: 12px; color: #667085; }
.w-zeile b { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; color: #000; }
@media (max-width: 1100px) { .weg-liste { gap: 28px; } .weg-schritt:not(:last-child) .weg-bild::after { right: -30px; } }
@media (max-width: 980px) {
  .auftragsweg { padding-block: 48px 40px; }
  .auftragsweg h2 { font-size: 26px; }
  .weg-unter { font-size: 16px; margin-bottom: 32px; }
  .weg-liste { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 460px; margin-inline: auto; }
  .weg-bild { height: auto; min-height: 120px; padding: 18px 16px 22px; }
  .weg-bild--anzeige { padding: 14px 12px 18px; }
  .weg-bild--anzeige .w-echt { height: 200px; }
  .weg-schritt:not(:last-child) .weg-bild::after { right: auto; left: 50%; top: auto; bottom: -16px; margin: 0 0 0 -13px; transform: rotate(90deg); }
  .weg-schritt h3 { margin-top: 26px; }
}