/* Hallmark · v2.0.0 · theme: studio, kühles Papier mit Erika-Pflaume als einzigem Akzent, Synthese aus D (Typo, Neutralfarben), E (Beispielseite im Rahmen) und F (Aufbau, Befund, invertierte Empfehlung) · posture: restrained · genre modern-minimal · job: check or call, the action in the hero · hero: stage, Kopf und Check links, Beispiel-Website rechts, das echte Ergebnis tritt an ihre Stelle · nav: Wortmarke links, vier Anker und Telefon rechts · footer: eine Zeile, Name und Rechtliches · signature: die Beispiel-Website im Browser- und Handy-Rahmen, die beim Prüfen dem eigenen Befund weicht */
/* critique: hell und ruhig statt dunkel; Dunkel nur im Kontaktband und Fuß; Pflaume nur für Knopf, Empfehlung und Ziffern; Pakete mit gleichen Vergleichszeilen; alles Kleingedruckte in einem Akkordeon; keine Mono-Schrift, kein Punktraster */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2"); }

:root {
  --color-paper: oklch(97.6% 0.004 255); --color-paper-2: oklch(95.2% 0.007 255); --color-paper-3: oklch(91.5% 0.01 255); --color-paper-hi: oklch(99.5% 0.002 255);
  --color-ink: oklch(19% 0.025 275); --color-ink-2: oklch(33% 0.022 272); --color-muted: oklch(46% 0.018 268);
  --color-rule: oklch(88% 0.01 262); --color-rule-2: oklch(72% 0.014 265);
  --color-accent: oklch(44% 0.135 350); --color-accent-hover: oklch(38% 0.13 350); --color-accent-ink: oklch(98.5% 0.006 350);
  --color-accent-tint: oklch(95.5% 0.02 350); --color-accent-soft: oklch(80% 0.07 350);
  --color-good: oklch(55% 0.12 150); --color-mid: oklch(70% 0.13 75); --color-bad: oklch(55% 0.17 27);
  --color-focus: oklch(44% 0.135 350);
  --color-night: oklch(21% 0.028 275); --color-night-2: oklch(17% 0.024 275); --color-night-rule: oklch(33% 0.03 275);
  --color-on-night: oklch(95% 0.008 270); --color-on-night-2: oklch(84% 0.014 270); --color-on-night-muted: oklch(78% 0.016 270);
  --demo-ground: oklch(31% 0.03 60); --demo-ink: oklch(96% 0.012 75); --demo-signal: oklch(90% 0.05 80); --demo-signal-ink: oklch(25% 0.03 60);
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --text-sm: 0.9375rem; --text-base: 1.0625rem; --text-md: 1.25rem; --text-lg: 1.5rem;
  --text-h2: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); --text-h1: clamp(2.5rem, 1.5rem + 4vw, 4.6rem);
  --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1.25rem; --space-lg: 2rem; --space-xl: 3.5rem; --space-2xl: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --wrap: 76rem; --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); --measure: 38rem; --gap-columns: clamp(1.25rem, 3vw, 2.5rem);
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; --rule-hair: 1px;
  --shadow-card: 0 1px 2px color-mix(in oklab, var(--color-ink) 8%, transparent), 0 18px 40px -20px color-mix(in oklab, var(--color-ink) 28%, transparent);
  --shadow-frame: 0 1px 0 color-mix(in oklab, var(--color-ink) 5%, transparent), 0 24px 48px -24px color-mix(in oklab, var(--color-ink) 32%, transparent);
  --dur-short: 150ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
details:not([open]) > :not(summary) { display: none; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--color-rule-2) var(--color-paper); scroll-padding-top: 5rem; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink-2); font: 400 var(--text-base)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
input { caret-color: var(--color-accent); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); letter-spacing: -0.028em; line-height: 1.04; margin: 0; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
h3, h4 { letter-spacing: -0.015em; line-height: 1.18; }
p { margin: 0 0 var(--space-md); max-width: var(--measure); }
a { color: var(--color-ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
a:hover { text-decoration-color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); }
.zahl { font-family: var(--font-display); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.03em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 10; background: color-mix(in oklab, var(--color-paper) 92%, transparent); border-bottom: var(--rule-hair) solid var(--color-rule); backdrop-filter: blur(12px); }
.kopf__zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 4.25rem; }
.marke { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font: 600 1.3rem/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-ink); text-decoration: none; }
.marke__zeichen { width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--color-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nav { display: flex; align-items: center; gap: var(--space-md); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: var(--text-sm); color: var(--color-ink-2); }
.nav a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.nav .tel { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--color-ink); padding-inline: var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); }
.nav .tel:hover { border-color: var(--color-ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.menue { position: relative; }
.menue__liste { position: absolute; top: 100%; left: calc(var(--space-sm) * -1); z-index: 11; display: none; min-width: 15rem; margin: 0; padding: var(--space-xs); list-style: none; background: var(--color-paper-hi); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.menue:hover .menue__liste, .menue:focus-within .menue__liste { display: block; }
.menue__liste a { width: 100%; padding-inline: var(--space-sm); border-radius: var(--radius-sm); }
.menue__liste a:hover { background: var(--color-paper-2); }
.nav .nur-mobil { display: none; }
@media (max-width: 56rem) { .nav .weg { display: none; } .nav .nur-mobil { display: inline-flex; } }

/* Knopf */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 1.6rem;
  font: 600 var(--text-base)/1 var(--font-body); white-space: nowrap; cursor: pointer;
  border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--color-rule-2); background: transparent; color: var(--color-ink);
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.knopf--haupt { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.knopf--haupt:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.knopf:active { transform: translateY(1px); }
.knopf[disabled], .knopf[aria-busy="true"] { background: var(--color-paper-3); border-color: var(--color-rule-2); color: var(--color-muted); cursor: progress; transform: none; }

/* Hero */
.hero { display: grid; align-items: center; min-height: min(100svh - 4.25rem, 52rem); padding-block: clamp(2.5rem, 6vh, 4.5rem); border-bottom: var(--rule-hair) solid var(--color-rule); }
.hero__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
@media (min-width: 62rem) { .hero__raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.5rem, 5vw, 5rem); } }
.hero h1 { font-size: var(--text-h1); max-width: 13ch; }
.hero__satz { font-size: var(--text-md); line-height: 1.5; color: var(--color-ink-2); margin: var(--space-md) 0 0; max-width: 30rem; }

.pruefen { margin-top: var(--space-lg); max-width: 36rem; padding: var(--space-lg); background: var(--color-paper-hi); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.pruefen > label { display: block; font-weight: 600; font-size: var(--text-md); color: var(--color-ink); margin-bottom: var(--space-sm); }
.pruefen__zeile { display: flex; gap: var(--space-xs); }
.pruefen input {
  flex: 1 1 auto; min-width: 0; min-height: 56px; padding: 0 1.1rem; border: 1.5px solid var(--color-muted); border-radius: var(--radius-pill);
  font: 400 var(--text-base)/1 var(--font-body); color: var(--color-ink); background: var(--color-paper);
  transition: border-color var(--dur-short) var(--ease-out);
}
.pruefen input::placeholder { color: var(--color-muted); }
.pruefen input:hover { border-color: var(--color-ink); }
.pruefen input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-color: var(--color-accent); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hinweis { font-size: var(--text-sm); color: var(--color-muted); margin: var(--space-sm) 0 0; }
@media (max-width: 30rem) {
  .pruefen { padding: var(--space-md); }
  .pruefen__zeile { flex-direction: column; }
  .pruefen .knopf { width: 100%; }
}

/* Beispiel-Ergebnis zum Aufklappen */
.beispiel { margin-top: var(--space-sm); max-width: 36rem; }
.beispiel summary { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding-inline: var(--space-lg) 0; cursor: pointer; list-style: none; font-weight: 600; font-size: var(--text-sm); color: var(--color-accent); }
.beispiel summary span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.beispiel summary::-webkit-details-marker { display: none; }
.beispiel summary::after { content: "+"; font: 400 1.25rem/1 var(--font-body); }
.beispiel[open] summary::after { content: "\2212"; }
.beispiel summary:hover { color: var(--color-accent-hover); }
.bogen { margin: var(--space-xs) 0 0; padding: var(--space-md) var(--space-lg); background: var(--color-paper-hi); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-ink) 7%, transparent); }
.bogen__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-md); padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.bogen__note .zahl { font-size: 2.25rem; line-height: 1; color: var(--color-ink); }
.bogen__note small { font-size: var(--text-sm); color: var(--color-muted); }
.bogen__adresse { font-size: var(--text-sm); color: var(--color-muted); }
.bogen__liste { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.bogen__liste li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding-block: 0.45rem; border-bottom: var(--rule-hair) solid var(--color-rule); }
.bogen__liste b { font-weight: 600; color: var(--color-ink); }
.bogen__liste span { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--color-ink-2); text-align: right; }
.bogen__liste span::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--color-rule-2); }
.bogen__liste [data-stufe="gut"] span::before { background: var(--color-good); }
.bogen__liste [data-stufe="mittel"] span::before { background: var(--color-mid); }
.bogen__liste [data-stufe="schlecht"] span::before { background: var(--color-bad); }
.bogen figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.hero__raster:has(.ergebnis:not([hidden])) .beispiel { display: none; }
@media (max-width: 30rem) { .beispiel summary { padding-inline: var(--space-md) 0; } .bogen { padding: var(--space-md); } }

/* Schaufenster: Beispiel-Website im Rahmen */
.bericht { position: relative; min-width: 0; }
.schaufenster { position: relative; margin: 0; padding: 0 2.5rem 0 0; }
.browser { background: var(--color-paper-hi); border-radius: var(--radius-md); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-ink) 7%, transparent), var(--shadow-card); overflow: hidden; }
.browser__leiste { display: flex; align-items: center; gap: var(--space-sm); padding: 0.6rem 0.9rem; background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule); }
.punkte { display: flex; gap: 0.35rem; }
.punkte i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--color-paper-3); }
.adresszeile { flex: 1; font-size: 0.8125rem; color: var(--color-muted); background: var(--color-paper-hi); border-radius: var(--radius-sm); padding: 0.2rem 0.8rem; }
.skizze { padding: var(--space-md) var(--space-lg) var(--space-md); }
.skizze__kopf { display: flex; gap: var(--space-md); align-items: baseline; font-size: 0.8125rem; color: var(--color-muted); padding-bottom: var(--space-md); }
.skizze__kopf b { color: var(--color-ink); font-weight: 600; margin-right: auto; font-size: 0.9375rem; }
.skizze__held { background: var(--demo-ground); border-radius: var(--radius-sm); padding: var(--space-xl) var(--space-lg) var(--space-lg); color: var(--demo-ink); }
.skizze__titel { font: 600 1.6rem/1.12 var(--font-display); letter-spacing: -0.02em; margin: 0 0 var(--space-xs); max-width: 15ch; }
.skizze__knopf { display: inline-block; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--demo-signal); color: var(--demo-signal-ink); font-size: 0.8125rem; font-weight: 600; }
.handy { position: absolute; right: 0; bottom: 2.6rem; width: 9.5rem; padding: 0.45rem; background: var(--color-ink); border-radius: 1.6rem; box-shadow: var(--shadow-frame); }
.handy__schirm { background: var(--color-paper-hi); border-radius: 1.2rem; padding: var(--space-md) var(--space-sm); font-size: 0.75rem; color: var(--color-muted); min-height: 12rem; display: flex; flex-direction: column; gap: var(--space-xs); }
.handy__schirm b { color: var(--color-ink); font-weight: 600; }
.handy__held { margin: 0; padding: var(--space-md) var(--space-sm); border-radius: 0.6rem; background: var(--demo-ground); color: var(--demo-ink); font: 600 1rem/1.15 var(--font-display); letter-spacing: -0.015em; }
.handy__schirm .skizze__knopf { align-self: flex-start; margin-top: auto; background: var(--demo-ground); color: var(--demo-ink); }
.schaufenster figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); max-width: 26rem; }
@media (max-width: 40rem) {
  .hero__raster { gap: var(--space-lg); }
  .schaufenster { padding-right: 0; }
  .skizze { padding: var(--space-sm) var(--space-md) var(--space-md); }
  .skizze__kopf { padding-bottom: var(--space-sm); }
  .skizze__held { padding: var(--space-md); }
  .skizze__titel { font-size: 1.2rem; }
  .skizze__kopf span, .handy { display: none; }
}

/* Echtes Ergebnis, ersetzt das Schaufenster */
.ergebnis { background: var(--color-paper-hi); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-ink) 7%, transparent), var(--shadow-frame); padding: var(--space-lg); }
.ergebnis[hidden] { display: none; }
.bericht:has(.ergebnis:not([hidden])) .schaufenster { display: none; }
.hero__raster:has(.ergebnis:not([hidden])) { align-items: start; }
.hero:has(.ergebnis:not([hidden])) { min-height: 0; }
.ergebnis:focus { outline: none; }
.ergebnis:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.ergebnis .kopfzeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.ergebnis .note { font: 600 clamp(3.25rem, 2.6rem + 2.6vw, 4.5rem)/0.9 var(--font-display); color: var(--color-ink); letter-spacing: -0.04em; font-variant-numeric: lining-nums tabular-nums; }
.ergebnis .note small { margin-left: var(--space-xs); font: 400 var(--text-sm) var(--font-body); color: var(--color-muted); letter-spacing: 0; }
.ergebnis .adresse { font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: anywhere; }
.ergebnis ul { list-style: none; margin: 0; padding: 0; }
.ergebnis li { display: grid; grid-template-columns: 0.55rem 10.5rem minmax(0, 1fr); gap: var(--space-sm); padding-block: 0.6rem; line-height: 1.45; border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.ergebnis li:first-child { border-top: 0; }
.ergebnis li::before { content: ""; width: 0.55rem; height: 0.55rem; margin-top: 0.45rem; border-radius: 50%; background: var(--color-rule-2); }
.ergebnis li::before { margin-top: 0.4rem; }
.ergebnis li[data-stufe="gut"]::before { background: var(--color-good); }
.ergebnis li[data-stufe="mittel"]::before { background: var(--color-mid); }
.ergebnis li[data-stufe="schlecht"]::before { background: var(--color-bad); }
.ergebnis li b { display: block; font-weight: 600; color: var(--color-ink); }
.ergebnis li .stufe { display: block; color: var(--color-muted); }
.ergebnis li > span { color: var(--color-ink-2); }
.ergebnis .weiter { margin: var(--space-md) 0 0; color: var(--color-ink); font-weight: 500; }
.ergebnis .hinweis { margin: 0; }
.ergebnis .fehler { margin: 0; color: var(--color-bad); font-weight: 500; }
@media (max-width: 30rem) { .ergebnis { padding: var(--space-md); } .ergebnis li { grid-template-columns: 0.55rem minmax(0, 1fr); row-gap: 0.25rem; } .ergebnis li > span { grid-column: 2; } }

/* Abschnitte */
.abschnitt { padding-block: var(--space-2xl); }
.abschnitt h2 { font-size: var(--text-h2); margin-bottom: var(--space-xl); max-width: 20ch; }

/* Leistungen */
.leistungen { padding-block: calc(var(--space-2xl) + var(--space-xl) + var(--space-lg)) calc(var(--space-2xl) + var(--space-lg)); }
.leistungen__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg) var(--gap-columns); }
@media (min-width: 44rem) { .leistungen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .leistungen__liste { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.leistungen__liste li { padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); }
.leistungen__liste li.haupt { border-top: 3px solid var(--color-accent); }
.leistungen__liste li.haupt h3 { font-size: var(--text-lg); }
.leistungen__liste h3 { font-size: var(--text-md); margin-bottom: var(--space-sm); }
.leistungen__liste p { margin: 0; }

/* Preise */
.preise { background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.preise__zweit { margin-top: var(--space-2xl); }
.einmalig { width: 100%; max-width: 52rem; border-collapse: collapse; border-top: 2px solid var(--color-ink); }
.einmalig th, .einmalig td { padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); vertical-align: baseline; }
.einmalig th { text-align: left; font: 600 var(--text-md)/1.25 var(--font-display); letter-spacing: -0.012em; color: var(--color-ink); padding-right: var(--space-md); }
.einmalig th span { display: block; font: 400 var(--text-sm)/1.5 var(--font-body); letter-spacing: 0; color: var(--color-muted); margin-top: 0.2rem; }
.einmalig td { text-align: right; white-space: nowrap; font: 500 var(--text-base)/1 var(--font-body); color: var(--color-ink-2); }
.einmalig td .zahl { font-size: var(--text-lg); color: var(--color-ink); }
.preis { font: 500 var(--text-base)/1.2 var(--font-body); color: var(--color-ink); }
.preis .zahl { font-size: 1.3em; }
.preis small { font-size: var(--text-sm); color: var(--color-muted); font-weight: 400; }
.preise__notiz { margin: var(--space-md) 0 0; color: var(--color-muted); font-size: var(--text-sm); }

.abos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
@media (min-width: 58rem) { .abos { column-gap: var(--space-md); } }
@media (min-width: 58rem) { .abos { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; align-items: stretch; } }
.abo { display: flex; flex-direction: column; padding: var(--space-lg); background: var(--color-paper-hi); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); }
.abo h3 { font-size: var(--text-lg); }
.abo .preis { margin: var(--space-xs) 0 var(--space-md); }
.abo .preis .zahl { font-size: 2.5rem; letter-spacing: -0.04em; }
.abo__zeilen { margin: 0; font-size: var(--text-sm); }
.abo__zeilen > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
@media (min-width: 58rem) {
  .abo__zeilen > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; align-content: start; }
  @supports (grid-template-rows: subgrid) {
    .abos { grid-template-rows: repeat(7, auto); row-gap: 0; }
    .abo { display: grid; grid-template-rows: subgrid; grid-row: span 7; }
    .abo__tipp { grid-row: 1; justify-self: start; align-self: start; }
    .abo h3 { grid-row: 2; }
    .abo .preis { grid-row: 3; }
    .abo__zeilen { display: grid; grid-template-rows: subgrid; grid-row: 4 / span 4; }
  }
  @supports not (grid-template-rows: subgrid) { .abo__zeilen > div { min-height: 4.9rem; } .abo:not(.abo--empfohlen) { padding-top: calc(var(--space-lg) + 2.35rem); } }
}
.abo__zeilen dt { color: var(--color-muted); }
.abo__zeilen dd { margin: 0; color: var(--color-ink); font-weight: 500; }
.abo__zeilen dd.ohne { color: var(--color-muted); font-weight: 400; }
.abo__zeilen .zahl { font-size: 1.05em; }
.abo__tipp { align-self: flex-start; margin: 0 0 var(--space-sm); padding: 0.2rem 0.7rem; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-sm); font-weight: 600; }
.abo--empfohlen { background: var(--color-night); border-color: var(--color-night); color: var(--color-on-night-2); box-shadow: var(--shadow-frame); }
.abo--empfohlen h3, .abo--empfohlen .preis, .abo--empfohlen .abo__zeilen dd { color: var(--color-on-night); }
.abo--empfohlen .preis small, .abo--empfohlen .abo__zeilen dt, .abo--empfohlen .abo__zeilen dd.ohne { color: var(--color-on-night-muted); }
.abo--empfohlen .abo__zeilen > div { border-top-color: var(--color-night-rule); }
.abo--empfohlen .abo__tipp { background: var(--color-accent-soft); color: var(--color-night); }
.abo--empfohlen .preis .zahl { color: var(--color-accent-soft); }
@media (min-width: 58rem) { .abo--empfohlen { margin-block: calc(var(--space-md) * -1); padding-block: calc(var(--space-lg) + var(--space-md)); } }
.vorkasse { margin: var(--space-xl) 0 0; max-width: none; color: var(--color-ink-2); }
.vorkasse strong { font-weight: 600; color: var(--color-ink); }

.klein { margin-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); border-bottom: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.klein summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer; color: var(--color-ink); font-weight: 600; font-size: var(--text-base); list-style: none; }
.klein summary::-webkit-details-marker { display: none; }
.klein summary::after { content: "+"; font: 400 1.5rem/1 var(--font-body); color: var(--color-accent); }
.klein[open] summary::after { content: "\2212"; }
.klein summary:hover { color: var(--color-accent); }
.klein p { max-width: 46rem; margin-bottom: var(--space-sm); }
.klein p:last-child { margin-bottom: var(--space-md); }

/* Einfach */
.einfach__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
@media (min-width: 56rem) { .einfach__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.einfach h2 { margin-bottom: var(--space-md); }
.einfach .leise { color: var(--color-muted); margin-bottom: 0; }
.verlauf { margin: 0; padding: var(--space-lg); background: var(--color-paper-hi); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.verlauf__titel { margin: 0 0 var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.blase { margin: 0; padding: 0.8rem 1rem; max-width: 85%; border-radius: 16px; font-size: var(--text-sm); line-height: 1.45; }
.blase--kunde { align-self: flex-start; background: var(--color-paper-3); color: var(--color-ink); border-bottom-left-radius: 4px; }
.blase--wir { align-self: flex-end; background: var(--color-accent); color: var(--color-accent-ink); border-bottom-right-radius: 4px; }

/* Ablauf */
.ablauf { border-top: var(--rule-hair) solid var(--color-rule); }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap-columns); } }
.schritte li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--space-md); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); }
@media (min-width: 56rem) { .schritte li { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xs); } }
.schritte .zahl { grid-row: span 2; font-size: 2.25rem; line-height: 1; color: var(--color-accent); }
@media (min-width: 56rem) { .schritte .zahl { grid-row: auto; } }
.schritte h3 { font-size: var(--text-md); margin-bottom: var(--space-xs); }
.schritte p { margin: 0; }


/* Kontakt, dunkles Band */
.kontakt { background: var(--color-night); color: var(--color-on-night-2); }
.kontakt h2 { color: var(--color-on-night); margin-bottom: var(--space-md); }
.kontakt :focus-visible { outline-color: var(--color-accent-soft); }
.kontakt__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg) var(--gap-columns); align-items: end; }
@media (min-width: 56rem) { .kontakt__raster { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.kontakt__tel { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-ink); font: 600 var(--text-md)/1.2 var(--font-display); text-decoration: none; margin-bottom: var(--space-lg); transition: background-color var(--dur-short) var(--ease-out); }
.kontakt__tel:hover { background: var(--color-on-night); }
.kontakt__tel:focus-visible { outline: 3px solid var(--color-on-night); outline-offset: 3px; }
.kontakt__person { font: 600 var(--text-md)/1.35 var(--font-display); letter-spacing: -0.015em; color: var(--color-on-night); margin-bottom: var(--space-sm); }
.kontakt__text { margin-bottom: var(--space-lg); }
.kontakt__daten { margin: 0; display: grid; gap: var(--space-md); }
.kontakt__daten dt { font-size: var(--text-sm); color: var(--color-on-night-muted); }
.kontakt__daten dd { margin: 0; color: var(--color-on-night); }
.kontakt__daten a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-night); overflow-wrap: anywhere; }

/* Fuß */
.fuss { background: var(--color-night-2); color: var(--color-on-night-muted); font-size: var(--text-sm); }
.fuss__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md) var(--gap-columns); padding-block: var(--space-xl) var(--space-md); }
@media (min-width: 56rem) { .fuss__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.fuss__name { display: block; font: 600 var(--text-md)/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--color-on-night); margin-bottom: var(--space-xs); }
.fuss__marke p { margin: 0; color: var(--color-on-night-muted); }
.fuss__seiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); column-gap: var(--space-lg); }
.fuss__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm) var(--space-lg); padding-block: var(--space-sm) var(--space-md); border-top: var(--rule-hair) solid var(--color-night-rule); }
.fuss__recht { display: flex; gap: var(--space-md); }
.fuss a[aria-current="page"] { color: var(--color-on-night); text-decoration-thickness: 2px; text-decoration-color: var(--color-accent-soft); }
.fuss a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-night-2); }
.fuss :focus-visible { outline-color: var(--color-accent-soft); }

/* Rechtsseiten */
.text { padding-block: var(--space-xl) var(--space-2xl); }
.text h1 { font-size: var(--text-h2); margin-bottom: var(--space-lg); }
.text h2 { font-size: var(--text-md); margin: var(--space-lg) 0 var(--space-sm); }
.text address { font-style: normal; margin-bottom: var(--space-md); }
.text p, .text address { max-width: 68ch; }
.text a { overflow-wrap: anywhere; }
.abschnitt-text { border-top: var(--rule-hair) solid var(--color-rule); }
.abschnitt-text summary { display: flex; align-items: center; min-height: 52px; cursor: pointer; }
.abschnitt-text summary h2 { display: inline; margin: 0 0 0 var(--space-xs); }
.abschnitt-text summary:hover h2 { color: var(--color-accent); }
.kleingedruckt { font-size: var(--text-sm); color: var(--color-muted); }

/* Startseite: Mängel, Branchen, Fragen */
.leistungen__liste h3 a { text-decoration-color: var(--color-rule-2); }
.leistungen__liste h3 a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.maengel { padding-block: calc(var(--space-2xl) + var(--space-lg)); background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.maengel__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg) var(--gap-columns); }
@media (min-width: 56rem) { .maengel__raster { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.maengel h2 { margin-bottom: var(--space-md); }
.maengel__liste { list-style: none; margin: 0; padding: 0; counter-reset: m; }
.maengel__liste li { counter-increment: m; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); }
.maengel__liste li::before { content: counter(m); font: 600 var(--text-lg)/1 var(--font-display); color: var(--color-accent); }
.maengel__liste h3 { font-size: var(--text-md); margin-bottom: var(--space-xs); }
.maengel__liste p { margin: 0; }
.branchen__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
@media (min-width: 44rem) { .branchen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .branchen__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.branchen__liste li { display: flex; flex-direction: column; padding: var(--space-lg); background: var(--color-paper-hi); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); }
.branchen__liste h3 { font-size: var(--text-md); margin-bottom: var(--space-sm); }
.branchen__liste p { margin: 0; }
.branchen__liste .mehr { margin-top: auto; padding-top: var(--space-md); font-weight: 600; }
.fragen { border-top: 2px solid var(--color-ink); max-width: 52rem; }
.fragen details { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.fragen summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 60px; padding-block: var(--space-sm); cursor: pointer; list-style: none; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; flex: none; font: 400 1.5rem/1 var(--font-body); color: var(--color-accent); }
.fragen details[open] summary::after { content: "\2212"; }
.fragen summary h3 { font-size: var(--text-md); }
.fragen summary:hover h3 { color: var(--color-accent); }
.fragen details p { max-width: 44rem; }

/* Unterseiten */
.seitenkopf { padding-block: var(--space-lg) var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.pfad ol { display: flex; flex-wrap: wrap; gap: 0 var(--space-xs); margin: 0 0 var(--space-xl); padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-muted); }
.pfad li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--color-rule-2); }
.pfad a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-muted); }
.pfad [aria-current="page"] { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); }
.seitenkopf h1 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.9rem); max-width: 20ch; }
.seitenkopf__satz { font-size: var(--text-md); line-height: 1.5; margin: var(--space-md) 0 0; max-width: 40rem; }
.seitenkopf__knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.seitenkopf__knoepfe .knopf { text-decoration: none; }
.knopf--rand:hover { border-color: var(--color-ink); }
@media (max-width: 30rem) { .seitenkopf__knoepfe .knopf { width: 100%; } }
.inhalt { padding-block: var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.inhalt--hell { background: var(--color-paper-2); }
.inhalt__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md) var(--gap-columns); }
@media (min-width: 58rem) { .inhalt__raster { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.5fr); } }
.inhalt h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); max-width: 18ch; }
.inhalt h3 { font-size: var(--text-md); margin: var(--space-xl) 0 var(--space-sm); }
.inhalt .fragen summary h3 { margin: 0; }
.inhalt__text { font-size: var(--text-md); line-height: 1.6; }
.inhalt__text > :first-child { margin-top: 0; }
.inhalt__text p, .inhalt__text ul, .inhalt__text ol { max-width: 34rem; }
.liste { margin: 0 0 var(--space-md); padding-left: 1.2rem; }
.liste li { padding-left: 0.3rem; margin-bottom: var(--space-sm); }
.liste li::marker { color: var(--color-accent); }
.liste b, .inhalt__text b { color: var(--color-ink); font-weight: 600; }
.inhalt .einmalig { max-width: 42rem; margin-bottom: var(--space-md); }
.vergleich { width: 100%; max-width: 46rem; border-collapse: collapse; border-top: 2px solid var(--color-ink); font-size: var(--text-sm); margin-bottom: var(--space-md); }
.vergleich th, .vergleich td { padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); text-align: left; vertical-align: top; }
.vergleich thead th { font: 600 var(--text-base)/1.25 var(--font-display); color: var(--color-ink); }
.vergleich thead th span { display: block; font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-accent); }
.vergleich tbody th { font-weight: 600; color: var(--color-ink); width: 9rem; }
.vergleich td b { font: 600 var(--text-md)/1 var(--font-display); color: var(--color-ink); }
@media (max-width: 40rem) {
  .vergleich thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vergleich tr, .vergleich tbody th, .vergleich td { display: block; width: auto; }
  .vergleich tr { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
  .vergleich tbody th, .vergleich td { border: 0; padding: 0.15rem 0; }
  .vergleich tbody th { font-size: var(--text-base); padding-bottom: var(--space-xs); }
  .vergleich td::before { content: attr(data-stufe) ": "; font-weight: 600; color: var(--color-ink); }
}
.merke { margin: var(--space-md) 0; padding: var(--space-md) var(--space-lg); max-width: 42rem; border-left: 3px solid var(--color-accent); background: var(--color-paper-hi); }
.merke p:last-child { margin-bottom: 0; }
.weiterlesen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); max-width: 42rem; }
@media (min-width: 40rem) { .weiterlesen { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.weiterlesen a { display: block; height: 100%; padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-md); text-decoration: none; background: var(--color-paper-hi); }
.weiterlesen a:hover { border-color: var(--color-accent); }
.weiterlesen b { display: block; color: var(--color-ink); font-weight: 600; }
.weiterlesen span { display: block; font-size: var(--text-sm); color: var(--color-muted); }
.sprungliste { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0 0 var(--space-md); padding: 0; list-style: none; }
.sprungliste a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); text-decoration: none; font-weight: 500; }
.sprungliste a:hover { border-color: var(--color-accent); }
.gewerk { padding-top: var(--space-md); margin-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); scroll-margin-top: 5rem; }
.gewerk h3 { margin-top: 0; }
.check__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
@media (min-width: 62rem) { .check__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.seitenkopf .check__raster { margin-top: var(--space-xl); }
.check__raster .pruefen { margin-top: 0; }
.check__raster .bogen { margin: 0; }
.check__raster:has(.ergebnis:not([hidden])) .check__beispiel { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}
.leer { display: inline-block; width: 1rem; height: 2px; vertical-align: middle; background: currentColor; opacity: 0.6; }

/* Runde 5: Reviews Kunde, Recht, Technik */
.springen { position: absolute; left: var(--gutter); top: 0; z-index: 20; padding: var(--space-xs) var(--space-sm); background: var(--color-ink); color: var(--color-paper-hi); border-radius: 0 0 var(--radius-sm) var(--radius-sm); transform: translateY(-110%); }
.springen:focus { transform: none; }
.nav .weg, .nav .nur-mobil { min-width: 44px; justify-content: center; }
.menue.offen .menue__liste { display: block; }
.menue.weg-esc .menue__liste { display: none; }
@media (max-width: 22.5rem) { .kopf__zeile, .nav { gap: var(--space-xs); } .nav .tel { padding-inline: 0.6rem; } }
.leistungen__liste li { position: relative; }
.leistungen__liste h3 a::after { content: ""; position: absolute; inset: 0; }
.hero__gruppen { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.hero__gruppen a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); font-size: var(--text-sm); color: var(--color-ink); text-decoration: none; }
.hero__gruppen a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.hero__ohne { margin: var(--space-md) 0 0; color: var(--color-ink-2); }
.hero__ohne a { font-weight: 600; }
.preise__tipp { margin: calc(var(--space-lg) * -1) 0 var(--space-lg); max-width: 52ch; font-weight: 500; color: var(--color-ink); }
.preise .kleingedruckt { margin-top: var(--space-sm); }
.kontakt__wege { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0 0 var(--space-sm); }
.kontakt__wege .kontakt__tel { margin-bottom: 0; }
.kontakt__anruf { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); border: 1px solid var(--color-on-night-muted); color: var(--color-on-night); font: 600 var(--text-md)/1.2 var(--font-display); text-decoration: none; }
.kontakt__anruf:hover { border-color: var(--color-on-night); }
.kontakt__rueckruf { margin: 0 0 var(--space-lg); font-size: var(--text-sm); color: var(--color-on-night-2); }
.ergebnis__knopf { margin: var(--space-md) 0 0; }
.ergebnis__wa { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-xs) var(--space-md); line-height: 1.25; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; text-decoration: none; }
.ergebnis__wa:hover { background: var(--color-accent-hover); }
.ergebnis .weiter .ergebnis__wa { margin-top: var(--space-sm); }
.ergebnis .kleingedruckt { margin: var(--space-md) 0 0; }
.gebiet { background: var(--color-paper-2); }
.gebiet__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md) var(--gap-columns); }
@media (min-width: 58rem) { .gebiet__raster { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.5fr); } }
.gebiet h2 { margin-bottom: 0; }
.gebiet p { max-width: 62ch; }
.fuss__marke .fuss__marken { margin-top: var(--space-sm); font-size: var(--text-sm); }
.merke-text { padding: var(--space-md); border-left: 3px solid var(--color-accent); background: var(--color-paper-2); }
.inhalt__text > h3:first-child { margin-top: 0; }