/*
 * landing.css – Landingpage im „Audit-Report“-Design
 * Agent-Readiness-Check von Online-Marketing.ai
 *
 * Lädt nach /base.css (Tokens, Typografie, Buttons, Formulare, Tabellen, Ampel, Score-Balken, Stufenleiter)
 * und vor /results.css. Präfixe: .site-* (gemeinsame Kopf-/Fußzeile), .lp-* (Landing), .lp-excerpt-* (Berichtsvorschau im Hero).
 * Spezifikation: docs/design/DESIGN.md · Referenz: docs/design/mock-landing.html
 * Alle Abschnitte unterhalb des Heros liegen in #info-cards (app.js blendet ihn aus, solange ein Bericht angezeigt wird).
 */

/* ======================================================================
   1. Gemeinsame Kopfzeile
   ====================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: var(--border-hair);
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: var(--header-h);
}

.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--color-ink);
  text-decoration: none;
}

.brandmark img {
  width: 28px;
  height: 28px;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.wordmark-ai {
  color: var(--color-link);
}

.brandmark-product {
  margin-left: 4px;
  padding-left: 14px;
  border-left: var(--border-strong);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-3);
  white-space: nowrap;
}

.site-nav {
  display: flex;
  gap: var(--space-6);
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: 500;
}

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

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

.site-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Theme-Umschalter: ein Symbol je gespeicherter Einstellung (app.js setzt data-theme-pref) */
.theme-icon {
  display: none;
}

[data-theme-pref='light'] .theme-icon-sun,
[data-theme-pref='dark'] .theme-icon-moon,
[data-theme-pref='system'] .theme-icon-system,
:root:not([data-theme-pref]) .theme-icon-system {
  display: block;
}

@media (max-width: 1099px) {
  .site-nav {
    display: none;
  }
  .site-header-actions {
    margin-left: auto;
  }
}

@media (max-width: 639px) {
  .brandmark-product,
  .hide-sm {
    display: none;
  }
  .site-header-inner {
    gap: var(--space-3);
  }
}

@media (max-width: 380px) {
  .wordmark {
    font-size: 13.5px;
  }
  .brandmark {
    gap: 8px;
  }
}

/* ======================================================================
   2. Hero: Text + Prüfformular links, Berichtsvorschau rechts
   ====================================================================== */

.lp-hero {
  padding-block: clamp(2.25rem, 1rem + 5vw, 5rem) clamp(3rem, 2rem + 4vw, 6rem);
}

.lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
}

/* Two columns from 1024 px (common B2B laptops: 1366 × 768 at 125 % = 1093 CSS px) */
@media (min-width: 1024px) {
  .lp-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
    gap: clamp(2rem, 1rem + 3vw, 6rem);
    align-items: center;
  }
}

@media (min-width: 1140px) {
  .lp-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.96fr);
    gap: clamp(3rem, 1rem + 4vw, 6rem);
  }
}

@media (min-width: 1024px) and (max-width: 1139px) {
  .lp-hero {
    padding-top: 2rem;
  }
  .lp-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  }
}

.lp-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

/* H1 „Die KI empfiehlt / nur, was sie findet.“: der Markenteil beginnt immer in einer eigenen Zeile –
   Desktop zwei Zeilen, Telefon höchstens drei */
.lp-hero h1 {
  max-width: none;
}

.lp-hero h1 .brand {
  display: block;
  color: var(--color-link);
}

/* Produktname neben dem Tag: klein und grau, konkurriert nicht mit der H1 */
.lp-kicker-product {
  font-weight: 500;
}

.lp-hero .lead {
  max-width: 35rem;
  margin-top: var(--space-5);
}

@media (max-width: 559px) {
  .lp-hero .lead {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
  }
}

.lp-hero .lead strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* Prüfformular (#scan-form) */
.lp-form {
  max-width: 35rem;
  margin-top: var(--space-8);
}

.lp-form .field-label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

.lp-form .input-group .btn {
  min-width: 13.5rem;
}

.lp-form .input-group .btn svg {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 559px) {
  .lp-form .input-group .btn {
    min-width: 0;
  }
}

/* Ladezustand im Button: ruhiger Fortschrittsstreifen statt Spinner */
.button-text,
.button-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.button-busy {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 4px;
  overflow: hidden;
  border-radius: 1px;
  background: rgb(255 255 255 / 0.3);
}

.button-busy::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: #fff;
  animation: lp-busy 1.1s var(--ease-in-out) infinite alternate;
}

@keyframes lp-busy {
  to {
    transform: translateX(150%);
  }
}

.lp-form #scan-button:disabled {
  opacity: 1;
  cursor: progress;
  background: var(--color-brand-hover);
}

.lp-form-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

.customize-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-size: var(--text-sm);
  font-weight: 500;
}

.customize-toggle svg {
  width: 15px;
  height: 15px;
}


.lp-micro-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.lp-micro-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lp-micro-trust svg {
  width: 14px;
  height: 14px;
  color: var(--color-ok);
}

.lp-form-hint {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-3);
}

.lp-form .input-group:has(.input[aria-invalid='true']) {
  border-color: var(--color-bad);
}

.lp-form .field-error {
  margin-top: var(--space-3);
}

.lp-form .field-error::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: var(--radius-round);
  background: var(--color-bad-dot);
  -webkit-mask: var(--icon-bang) center / 100% no-repeat;
  mask: var(--icon-bang) center / 100% no-repeat;
}

/* Prüfumfang anpassen (#customize-panel) – Website-Typ als rechteckiges Segment, Prüfpunkte nach Bereich */
.customize-panel {
  margin-top: var(--space-3);
  padding: var(--space-5);
  background: var(--color-paper);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper);
}

.profile-selector {
  display: grid;
  gap: var(--space-2);
}

.profile-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.profile-pills {
  display: inline-flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  background: var(--color-paper);
  border: 1px solid var(--color-line-input);
  border-radius: var(--radius-md);
}

.profile-pill {
  padding: var(--space-2) var(--space-4);
  border-right: 1px solid var(--color-line);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-ink-2);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.profile-pill:last-child {
  border-right: 0;
}

.profile-pill:hover {
  background: var(--color-sunken);
  color: var(--color-ink);
}

.profile-pill[aria-checked='true'],
.profile-pill--active {
  background: var(--color-ink);
  color: var(--color-paper);
}

.profile-pill:focus-visible {
  outline-offset: -4px;
  border-radius: var(--radius-sm);
}

.profile-pill[aria-checked='true']:focus-visible {
  outline-color: var(--color-paper);
}

@media (max-width: 479px) {
  .profile-pills {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  .profile-pill {
    border-right: 0;
    border-bottom: 1px solid var(--color-line);
    text-align: left;
  }
  .profile-pill:last-child {
    border-bottom: 0;
  }
}

.profile-description {
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

.checks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-5) var(--space-6);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-hair);
}

.checks-category {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.checks-category legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

.check-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 3px 0;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-ink);
  cursor: pointer;
}

.check-toggle input {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--color-brand);
}

/* Beleg unter dem Formular: der stärkste B2B-Punkt, als Fußnote mit Quelle */
.lp-proof {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  max-width: 35rem;
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: var(--border-rule);
}

.lp-proof-num {
  font-family: var(--font-display);
  font-size: 3.25rem;
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--color-link);
}

.lp-proof-num .unit,
.lp-band-num .unit,
.lp-context-num .unit {
  margin-left: 0.04em;
  font-size: 0.55em;
  letter-spacing: 0;
}

.lp-proof-text {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-ink);
}

.lp-proof-text .lp-proof-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
}

.lp-proof-src {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-3);
}

.lp-proof-src a,
.lp-src a {
  color: inherit;
}

@media (max-width: 379px) {
  .lp-proof {
    gap: var(--space-4);
  }
  .lp-proof-num {
    font-size: 2.625rem;
  }
}

/* Zweiter Weg (Online-Marketing.ai), bewusst leise im Hero */
.lp-hero-alt {
  max-width: 35rem;
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

.lp-hero-alt a {
  font-weight: 600;
}

/* ======================================================================
   3. Berichtsvorschau (Hero-Bild): Ergebnis-Auszug mit fiktiven Daten (Variante A), rein dekorativ
   Ruhige erste Berichtsseite: Musterfirma, Gesamtergebnis + Stufe, vier Bereiche mit je einer Ampel und
   einem Wort, ein Satz zum Maßnahmenplan. Die figure trägt das aria-label, das Blatt ist aria-hidden.
   Gewichtung: Zahl hell und kleiner als im echten Bericht, Maßnahmenplan grau – der stärkste blaue
   Punkt im ersten Bildschirm bleibt der Button „Prüfbericht erstellen“.
   Drei Dichten, ein Markup: ≥ 1024 px Blatt neben dem Text · < 1024 px gestapelt ohne Fazit und
   Leitfragen · < 560 px kompakter Streifen (≈ 350 px hoch).
   ====================================================================== */

.lp-preview.lp-excerpt {
  container: excerpt / inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 540px;
  margin: 0;
}

/* Desktop: oben an der Headline ausgerichtet statt mittig zur Textspalte */
@media (min-width: 1024px) {
  .lp-preview.lp-excerpt {
    align-self: start;
    justify-self: end;
    margin-top: var(--space-12);
  }
}

.lp-excerpt-sheet {
  position: relative;
  overflow: hidden;
  padding: 24px 32px 0;
  background: var(--color-paper);
  border: var(--border-hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sheet);
  color: var(--color-ink);
}

/* Markenkante oben wie auf einem Berichtsdeckblatt */
.lp-excerpt-sheet::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--color-brand);
}

/* Kopf: Absender + Datum über einer Tintenlinie, darunter die Musterfirma */
.lp-excerpt-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'brand date'
    'domain domain';
  align-items: center;
}

.lp-excerpt-top::before {
  content: '';
  grid-area: 1 / 1 / 2 / 3;
  align-self: end;
  border-bottom: var(--border-rule);
}

.lp-excerpt-brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.lp-excerpt-brand img {
  width: 18px;
  height: 18px;
}

.lp-excerpt-date {
  grid-area: date;
  padding-bottom: 12px;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-3);
}

.lp-excerpt-domain {
  grid-area: domain;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

/* Labels: Inter-Versalien statt Mono */
.lp-excerpt-label {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

/* Gesamtergebnis + Stufe */
.lp-excerpt-score {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 0 var(--space-6);
  margin-top: 16px;
}

.lp-excerpt-num {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 3.875rem;
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}

.lp-excerpt-num span {
  margin-left: 6px;
  font-size: 0.3em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-ink-3);
}

.lp-excerpt-level {
  justify-self: end;
  text-align: right;
}

.lp-excerpt-level-name {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.lp-excerpt .scorebar {
  --bar-h: 6px;
  --gap: 2px;
  margin-top: 14px;
}

.lp-excerpt-count {
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-3);
}

/* Fazit in einem Satz */
.lp-excerpt-summary {
  margin-top: 14px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-ink-2);
  text-wrap: pretty;
}

.lp-excerpt-summary strong {
  color: var(--color-ink);
}

/* Vier Bereiche: eine Ampel, Name, Leitfrage, ein Wort */
.lp-excerpt-areas-title {
  margin-top: 20px;
  padding-bottom: 8px;
  border-bottom: var(--border-rule);
}

.lp-excerpt-areas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-excerpt-areas li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  padding: 9px 0;
  border-bottom: var(--border-hair);
}

.lp-excerpt-areas li:last-child {
  border-bottom: 0;
}

.lp-excerpt-areas .ampel {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}

.lp-excerpt-area {
  grid-column: 2;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.lp-excerpt-q {
  grid-column: 2;
  margin-top: 1px;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--color-ink-3);
}

.lp-excerpt-val {
  grid-column: 3;
  grid-row: 1 / span 2;
  padding-left: var(--space-3);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.lp-excerpt-val--ok {
  color: var(--color-ok);
}

.lp-excerpt-val--warn {
  color: var(--color-warn);
}

.lp-excerpt-val--bad {
  color: var(--color-bad);
}

/* Maßnahmenplan als ruhiges, neutrales Schlussband */
.lp-excerpt-plan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px var(--space-5);
  margin: 4px -32px 0;
  padding: 14px 32px 16px;
  background: var(--color-sunken);
  border-top: var(--border-hair);
}

.lp-excerpt-plan-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-ink-2);
}

.lp-excerpt-plan-text strong {
  font-size: 0.9375rem;
  color: var(--color-ink);
}

/* „Beispiel · fiktive Daten“ direkt an der Musterfirma: auf dem Desktop steht die Bildunterschrift unter
   dem Blatt und damit oft unter dem ersten Bildschirm – gestapelt steht sie darüber, der Tag entfällt */
.lp-excerpt-tag {
  margin-left: var(--space-2);
  vertical-align: middle;
  letter-spacing: 0.01em;
}

@media (max-width: 1023px) {
  .lp-excerpt-tag {
    display: none;
  }
}

/* Bildunterschrift: auf jeder Breite sichtbar – fiktive Daten, keine echte Firma */
.lp-excerpt-cap {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-ink-3);
  text-wrap: balance;
}

/* Zwei Spalten, aber schmale Spalte (1024–1139 px): Leitfragen ausblenden */
@container excerpt (max-width: 479px) {
  .lp-excerpt-q,
  .lp-excerpt-area-tail {
    display: none;
  }
  .lp-excerpt-sheet {
    padding-inline: 24px;
  }
  .lp-excerpt-plan {
    grid-template-columns: minmax(0, 1fr);
    margin-inline: -24px;
    padding-inline: 24px;
  }
  .lp-excerpt-num {
    font-size: 3.5rem;
  }
}

/* Gestapelt (Tablet und Telefon): ein kompakter Streifen statt einer ganzen Berichtsseite */
@media (max-width: 1023px) {
  .lp-preview.lp-excerpt {
    max-width: 35rem; /* so breit wie Formular und Beleg */
  }
  .lp-excerpt-cap {
    order: -1; /* gestapelt steht die Einordnung vor dem Blatt */
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-ink-2);
  }
  .lp-excerpt-summary,
  .lp-excerpt-areas-title,
  .lp-excerpt-q {
    display: none;
  }
  .lp-excerpt-areas {
    margin-top: 14px;
    border-top: var(--border-hair);
  }
}

@media (max-width: 559px) {
  .lp-excerpt-sheet {
    padding: 16px 16px 0;
  }
  .lp-excerpt-top {
    grid-template-areas: 'domain date';
  }
  .lp-excerpt-brand {
    display: none;
  }
  .lp-excerpt-domain {
    margin-top: 0;
    padding-bottom: 10px;
    font-size: 1.125rem;
  }
  .lp-excerpt-date {
    padding-bottom: 10px;
    font-size: 0.75rem;
  }
  .lp-excerpt-score {
    margin-top: 12px;
    gap: 0 var(--space-4);
  }
  .lp-excerpt-num {
    margin-top: 6px;
    font-size: 2.5rem;
  }
  .lp-excerpt-num span {
    font-size: 0.36em;
  }
  .lp-excerpt-level-name {
    font-size: 1.0625rem;
  }
  .lp-excerpt .scorebar {
    margin-top: 12px;
  }
  .lp-excerpt-count {
    display: none;
  }
  .lp-excerpt-areas li {
    column-gap: 10px;
    padding: 7px 0;
  }
  .lp-excerpt-area {
    font-size: 0.875rem;
  }
  /* „Schnittstellen für Agenten“ + „Größtenteils offen“ passen nicht in eine Zeile: kurz „Schnittstellen“ */
  .lp-excerpt-area-tail {
    display: none;
  }
  .lp-excerpt-val {
    font-size: 0.8125rem;
  }
  .lp-excerpt-plan {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    margin: 2px -16px 0;
    padding: 10px 16px;
  }
  .lp-excerpt-plan-tail,
  .lp-excerpt-plan-sub {
    display: none;
  }
  .lp-excerpt-plan-text {
    align-items: end;
  }
  .lp-excerpt-plan-text strong {
    font-size: 0.875rem;
  }
}

/* ======================================================================
   4. Kennzahlenleiste „Was sich bei der Anbietersuche gerade verändert“
   ====================================================================== */

.lp-band {
  background: var(--color-paper);
  border-block: var(--border-hair);
}

.lp-band-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-5) var(--space-4);
  border-bottom: var(--border-rule);
}

.lp-band-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink);
}

.lp-band-note {
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

.lp-band-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-band-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-6) var(--space-6) 0;
}

.lp-band-item + .lp-band-item {
  padding-left: var(--space-6);
  border-left: var(--border-hair);
}

.lp-band-num {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.8rem + 1.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}

.lp-band-num .unit {
  color: var(--color-ink-2);
}

.lp-band-text {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-ink);
}

.lp-band .lp-src {
  margin-top: auto;
}

@media (max-width: 1023px) {
  .lp-band-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp-band-item:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .lp-band-item:nth-child(n + 3) {
    border-top: var(--border-hair);
  }
}

@media (max-width: 559px) {
  .lp-band-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-band-item,
  .lp-band-item + .lp-band-item {
    padding: var(--space-5) 0;
    border-left: 0;
  }
  .lp-band-item + .lp-band-item {
    border-top: var(--border-hair);
  }
}

/* ======================================================================
   5. Abschnitte, Köpfe, Quellenzeilen
   ====================================================================== */

.lp-section {
  padding-block: var(--section-y);
}

.lp-section + .lp-section {
  border-top: var(--border-hair);
}

.lp-section--paper {
  background: var(--color-paper);
}

.lp-head {
  max-width: 46rem;
}

.lp-head h2 {
  margin-top: var(--space-4);
}

.lp-head > p:not(.eyebrow) {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-2);
}

.lp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
}

@media (min-width: 1024px) {
  .lp-split {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-16);
  }
  .lp-split > .lp-head {
    position: sticky;
    top: calc(var(--header-h) + var(--space-8));
    align-self: start;
  }
}

.lp-src {
  padding-top: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-3);
}

/* ======================================================================
   6. 01 Warum jetzt – Feststellungen 1.1–1.6 (lineares Raster, kein Kartenstapel)
   ====================================================================== */

.lp-args {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-rule);
}

.lp-arg {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-8) var(--space-8) 0;
  border-bottom: var(--border-hair);
}

.lp-arg:nth-child(even) {
  padding-right: 0;
  padding-left: var(--space-8);
  border-left: var(--border-hair);
}

.lp-arg-idx {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-link);
}

.lp-arg h3 {
  font-size: var(--text-lg);
  line-height: 1.3;
}

.lp-arg p:not([class]) {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink-2);
}

.lp-arg p strong {
  color: var(--color-ink);
}

.lp-arg .lp-src {
  margin-top: auto;
}

.lp-arg-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

@media (max-width: 719px) {
  .lp-args {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-arg,
  .lp-arg:nth-child(even) {
    padding: var(--space-6) 0;
    border-left: 0;
  }
}

/* ======================================================================
   7. Zwei Wege zu mehr Anfragen – Online-Marketing.ai und Agentur.KI, gleichrangig
   Erster Block in #info-cards, direkt unter dem Hero: zwei gleich gebaute Karten mit gleich starken
   Outline-Buttons, damit „Prüfbericht erstellen“ im Hero die lauteste Handlung bleibt.
   Dasselbe Paar steht im Abschluss-CTA (Abschnitt 15, .lp-cta--ways).
   ====================================================================== */

.lp-ways-band {
  padding-block: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
  border-top: var(--border-hair);
}

.lp-ways-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-rule);
}

.lp-ways-title {
  font-size: var(--text-xl);
  line-height: 1.25;
}

.lp-ways-note {
  max-width: 52ch;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink-3);
}

.lp-ways {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);
}

@media (min-width: 840px) {
  .lp-ways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lp-way {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
  padding: var(--space-6) var(--space-8) var(--space-8);
  background: var(--color-paper);
  border: var(--border-hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-paper);
}

/* gleiche Markenkante für beide Karten – kein Angebot wirkt lauter als das andere */
.lp-way::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--color-brand);
}

.lp-way-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--space-3);
}

.lp-way-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-ink);
}

.lp-way-role {
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

.lp-way h3 {
  font-size: var(--text-lg);
  line-height: 1.3;
}

.lp-way > p:not([class]) {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink-2);
}

.lp-way-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: auto;
  padding-top: var(--space-3);
}

.lp-way-note {
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

.lp-checklist {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--color-ink);
}

.lp-checklist li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}

.lp-checklist svg {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--color-link);
}

.lp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-ink-2);
}

.lp-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lp-trust svg {
  width: 14px;
  height: 14px;
  color: var(--color-link);
}

@media (max-width: 559px) {
  .lp-way {
    padding: var(--space-6) var(--space-5);
  }
  .lp-way-brand {
    flex-direction: column;
  }
  .lp-way-foot .btn {
    width: 100%;
  }
}

/* ======================================================================
   8. 02 Was ist Agent-Readiness? – Definition, vier Fragen, Einordnung, Zitat
   ====================================================================== */

.lp-define {
  padding: var(--space-6) 0 var(--space-6) var(--space-6);
  border-left: 3px solid var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-wrap: pretty;
}

.lp-define strong {
  font-weight: 600;
}

.lp-four {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: var(--space-10) 0 0;
  border-top: var(--border-rule);
}

.lp-four > div {
  --four-indent: 2.75rem;
  padding: var(--space-5) var(--space-6) var(--space-5) 0;
  border-bottom: var(--border-hair);
}

.lp-four > div:nth-child(even) {
  padding-right: 0;
  padding-left: var(--space-6);
  border-left: var(--border-hair);
}

.lp-four dt {
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-ink);
}

.lp-four-idx {
  flex: none;
  width: var(--four-indent);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-link);
}

.lp-four dd {
  margin: var(--space-1) 0 0 var(--four-indent);
  font-size: 0.9375rem;
  color: var(--color-ink-2);
}

.lp-four dd.lp-four-tech {
  margin-top: var(--space-2);
  margin-left: var(--four-indent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

@media (max-width: 719px) {
  .lp-four {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-four > div,
  .lp-four > div:nth-child(even) {
    padding: var(--space-5) 0;
    border-left: 0;
  }
}

.lp-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.lp-context-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-paper);
  border: var(--border-hair);
  border-radius: var(--radius-md);
}

.lp-context-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.lp-context-num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}

.lp-context-text {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-ink);
}

.lp-context .lp-src {
  margin-top: auto;
}

/* A forecast never looks like a measured value: muted number, dashed frame */
.lp-context-pre {
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-ink-3);
}

.lp-context-item--forecast {
  background: transparent;
  border-style: dashed;
}

.lp-context-item--forecast .lp-context-num {
  color: var(--color-ink-3);
}

.lp-context-item--forecast .lp-context-text {
  font-weight: 400;
  color: var(--color-ink-2);
}

@media (max-width: 639px) {
  .lp-context {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

.lp-quote {
  margin: var(--space-10) 0 0;
  padding-top: var(--space-6);
  border-top: var(--border-hair);
}

.lp-quote p {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-ink);
}

.lp-quote footer {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

.lp-quote footer a {
  color: inherit;
}

/* ======================================================================
   9. 03 Methodik – Bereiche, Prüfumfang, Stufen
   ====================================================================== */

.lp-areas {
  margin-top: var(--space-8);
}

.lp-areas tbody th {
  width: 15rem;
}

.lp-areas .lp-areas-tech {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-ink-3);
}

.lp-areas td.is-num {
  width: 6rem;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
}

.lp-areas tr.is-optional th,
.lp-areas tr.is-optional td.is-num {
  color: var(--color-ink-2);
}

.lp-areas th .tag {
  margin-left: var(--space-2);
  vertical-align: 0.1em;
}

@media (max-width: 639px) {
  .lp-areas tbody th {
    width: 100%;
    font-size: var(--text-md);
  }
  .lp-areas td.is-num {
    width: 100%;
    font-family: var(--font-text);
    font-size: var(--text-sm);
  }
}

.lp-scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.lp-scope-col {
  padding: var(--space-5) var(--space-6);
  background: var(--color-paper);
  border: var(--border-hair);
  border-radius: var(--radius-md);
}

.lp-scope-col h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-text);
  font-size: var(--text-base);
  font-weight: 600;
}

.lp-scope ul {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--color-ink-2);
}

.lp-scope li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-2);
}

.lp-scope li svg {
  width: 16px;
  height: 16px;
  margin-top: 4px;
}

.lp-scope-col--yes li svg {
  color: var(--color-ok);
}

.lp-scope-col--no li svg {
  color: var(--color-ink-3);
}

@media (max-width: 719px) {
  .lp-scope {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

.lp-levels {
  margin-top: var(--space-12);
}

.lp-levels-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.lp-level {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.lp-level .ladder-bar {
  height: auto;
  padding: 6px 8px;
  color: var(--color-ink);
}

.lp-level h4 {
  font-family: var(--font-text);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  hyphens: auto;
}

.lp-level p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-ink-3);
  hyphens: auto;
}

/* Sättigung steigt mit der Stufe; Text bleibt AA (Tinte auf hellen Stufen, Weiß auf Blau) */
.lp-level:nth-child(1) .ladder-bar {
  background: var(--color-sunken);
}
.lp-level:nth-child(2) .ladder-bar {
  background: color-mix(in srgb, var(--color-brand) 8%, var(--color-paper));
}
.lp-level:nth-child(3) .ladder-bar {
  background: color-mix(in srgb, var(--color-brand) 16%, var(--color-paper));
}
.lp-level:nth-child(4) .ladder-bar {
  background: color-mix(in srgb, var(--color-brand) 26%, var(--color-paper));
}
.lp-level:nth-child(5) .ladder-bar {
  background: var(--blue-500);
  border-color: transparent;
  color: #fff;
}
.lp-level:nth-child(6) .ladder-bar {
  background: var(--blue-700);
  border-color: transparent;
  color: #fff;
}

@media (max-width: 899px) {
  .lp-levels-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
  }
}

.lp-levels-note {
  max-width: 66ch;
  margin-top: var(--space-6);
  font-size: 0.9375rem;
  color: var(--color-ink-2);
}

.lp-method-note {
  max-width: 72ch;
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--border-hair);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

/* ======================================================================
   10. 04 Dein Prüfbericht – drei Schritte, Inhaltsverzeichnis, Beispiel-Befund
   ====================================================================== */

.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-10) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-rule);
  counter-reset: step;
}

.lp-step {
  counter-increment: step;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-6) var(--space-6) 0;
}

.lp-step + .lp-step {
  padding-left: var(--space-6);
  border-left: var(--border-hair);
}

.lp-step::before {
  content: 'Schritt ' counter(step);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-link);
}

.lp-step h3 {
  font-size: var(--text-lg);
}

.lp-step p {
  font-size: 0.9375rem;
  color: var(--color-ink-2);
}

@media (max-width: 799px) {
  .lp-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-step,
  .lp-step + .lp-step {
    padding: var(--space-5) 0;
    border-left: 0;
  }
  .lp-step + .lp-step {
    border-top: var(--border-hair);
  }
}

.lp-report {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  margin-top: var(--space-12);
}

@media (min-width: 1024px) {
  .lp-report {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
  }
}

.lp-report-title {
  margin-bottom: var(--space-3);
}

.lp-toc {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-rule);
  counter-reset: toc;
}

.lp-toc li {
  counter-increment: toc;
  display: grid;
  grid-template-columns: 2.25rem auto minmax(1.5rem, 1fr) auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: var(--border-hair);
}

.lp-toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-link);
}

.lp-toc-title {
  font-weight: 600;
  color: var(--color-ink);
}

.lp-toc-leader {
  border-bottom: 1.5px dotted var(--color-line-strong);
  transform: translateY(-0.3em);
}

.lp-toc-desc {
  font-size: var(--text-sm);
  text-align: right;
  color: var(--color-ink-3);
}

@media (max-width: 639px) {
  .lp-toc li {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    row-gap: 2px;
  }
  .lp-toc-leader {
    display: none;
  }
  .lp-toc-desc {
    grid-column: 2;
    text-align: left;
  }
}

.lp-finding {
  padding: var(--space-6);
  background: var(--color-paper);
  border: var(--border-hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-paper);
}

.lp-finding-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hair);
}

.lp-finding-head strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
}

.lp-finding dl {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}

.lp-finding dt {
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

.lp-finding dd {
  margin: 0;
  color: var(--color-ink-2);
}

.lp-finding dd code {
  white-space: normal;
}

.lp-finding-note {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-hair);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

@media (max-width: 479px) {
  .lp-finding {
    padding: var(--space-5) var(--space-4);
  }
  .lp-finding dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .lp-finding dd {
    margin-bottom: var(--space-3);
  }
}

/* ======================================================================
   11. 05 Ehrlich gesagt – Einordnung mit Belegen
   ====================================================================== */

.lp-honest-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-rule);
  counter-reset: honest;
}

.lp-honest-item {
  counter-increment: honest;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-content: start;
  gap: 0 var(--space-3);
  padding: var(--space-5) var(--space-6) var(--space-5) 0;
  border-bottom: var(--border-hair);
}

.lp-honest-item:nth-child(even) {
  padding-right: 0;
  padding-left: var(--space-6);
  border-left: var(--border-hair);
}

.lp-honest-item::before {
  content: '5.' counter(honest);
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-link);
}

.lp-honest-item h3 {
  font-family: var(--font-text);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.4;
}

.lp-honest-item p {
  margin-top: var(--space-1);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink-2);
}

@media (max-width: 719px) {
  .lp-honest-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-honest-item,
  .lp-honest-item:nth-child(even) {
    padding: var(--space-5) 0;
    border-left: 0;
  }
}

/* ======================================================================
   12. Umsetzung – Agentur.KI im Kontext des Maßnahmenplans (Rahmen, Outline-Button)
   ====================================================================== */

.lp-section--slim {
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.lp-partner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6) var(--space-8);
  background: var(--color-paper);
  border: var(--border-strong);
  border-radius: var(--radius-lg);
}

@media (min-width: 900px) {
  .lp-partner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.lp-partner-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

.lp-partner h2 {
  margin-top: var(--space-2);
  font-size: var(--text-lg);
  line-height: 1.3;
}

.lp-partner p:not([class]) {
  max-width: 62ch;
  margin-top: var(--space-2);
  font-size: 0.9375rem;
  color: var(--color-ink-2);
}

.lp-partner-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.lp-partner-note {
  margin-top: var(--space-2);
}

.lp-partner-facts strong {
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.lp-partner-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

@media (min-width: 900px) {
  .lp-partner-cta {
    align-items: flex-end;
    text-align: right;
  }
}

@media (max-width: 559px) {
  .lp-partner {
    padding: var(--space-6) var(--space-5);
  }
  .lp-partner-cta,
  .lp-partner-cta .btn {
    width: 100%;
  }
}

/* ======================================================================
   13. 06 Über uns – Register der drei Marken (keine Buttons)
   ====================================================================== */

.lp-register {
  margin: var(--space-6) 0 0;
  border-top: var(--border-rule);
}

.lp-register > div {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: var(--border-hair);
  font-size: 0.9375rem;
}

.lp-register dt {
  font-weight: 600;
  color: var(--color-ink);
}

.lp-register dt .lp-register-role {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-ink-3);
}

.lp-register dd {
  margin: 0;
  color: var(--color-ink-2);
}

.lp-register dd a {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
}

@media (max-width: 559px) {
  .lp-register > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ======================================================================
   14. 07 FAQ – linierte Liste mit eckigem +/– (Markup kompatibel mit app.js: .faq-header + .faq-content)
   ====================================================================== */

.lp-faq {
  border-top: var(--border-rule);
}

.faq-item {
  border-bottom: var(--border-hair);
}

.faq-h {
  margin: 0;
  font: inherit;
  letter-spacing: normal;
  text-wrap: wrap;
}

.faq-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  font-family: var(--font-text);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  color: var(--color-ink);
}

.faq-header:hover {
  color: var(--color-link);
}

.faq-icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border: 1px solid var(--color-line-input);
  border-radius: var(--radius-xs);
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform var(--dur-2) var(--ease-out);
}

.faq-header[aria-expanded='true'] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-content {
  overflow: hidden;
  transition: height var(--dur-3) var(--ease-out);
}

.faq-content-inner {
  max-width: 68ch;
  padding: 0 var(--space-10) var(--space-6) 0;
  color: var(--color-ink-2);
}

.faq-content-inner p + p {
  margin-top: var(--space-3);
}

@media (max-width: 559px) {
  .faq-header {
    font-size: var(--text-base);
  }
  .faq-content-inner {
    padding-right: 0;
  }
}

/* ======================================================================
   15. 08 Nächster Schritt – Abschlussfläche mit beiden Wegen (Online-Marketing.ai und Agentur.KI)
   ====================================================================== */

.lp-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  overflow: hidden;
  padding: clamp(2rem, 1rem + 4vw, 4rem);
  background: var(--color-brand-panel);
  border-radius: var(--radius-lg);
  color: var(--color-on-brand);
}

@media (min-width: 960px) {
  .lp-cta {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: end;
  }
}

.lp-cta::before {
  /* liniertes Papier, sehr dezent */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 31px, rgb(255 255 255 / 0.035) 31px 32px);
  pointer-events: none;
}

.lp-cta > * {
  position: relative;
}

.lp-cta .eyebrow {
  color: rgb(255 255 255 / 0.85);
}

.lp-cta .eyebrow-num,
.lp-cta .eyebrow-num::after {
  color: #fff;
}

.lp-cta h2 {
  max-width: 22ch;
  margin-top: var(--space-4);
  color: #fff;
}

.lp-cta p:not([class]) {
  max-width: 52ch;
  margin-top: var(--space-4);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: rgb(255 255 255 / 0.9);
}

.lp-cta-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.lp-cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-size: var(--text-base);
  font-weight: 600;
  color: #fff;
  text-decoration-color: rgb(255 255 255 / 0.5);
}

.lp-cta-link svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.lp-cta-link:hover {
  color: #fff;
  text-decoration-color: #fff;
}

.btn--on-brand {
  background: #fff;
  color: var(--blue-700);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
}

.btn--on-brand:hover {
  background: var(--blue-50);
  color: var(--blue-800);
}


.lp-cta .lp-trust {
  font-size: var(--text-sm);
  color: rgb(255 255 255 / 0.92);
}

.lp-cta .lp-trust svg {
  color: #fff;
}

.lp-cta :focus-visible {
  outline-color: #fff;
}

/* Zwei gleichrangige Wege auf der Abschlussfläche: Online-Marketing.ai und Agentur.KI, je ein weißer Button */
.lp-cta--ways {
  gap: var(--space-8);
}

@media (min-width: 960px) {
  .lp-cta--ways {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

.lp-cta--ways h2 {
  max-width: 32ch;
}

.lp-cta-ways {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

@media (min-width: 840px) {
  .lp-cta-ways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lp-cta-way {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--radius-md);
}

.lp-cta-way-brand {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.88);
}

.lp-cta-way h3 {
  font-size: var(--text-lg);
  line-height: 1.3;
  color: #fff;
}

.lp-cta .lp-cta-way p:not([class]) {
  max-width: none;
  margin-top: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.lp-cta-way-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: auto;
  padding-top: var(--space-2);
}

.lp-cta--ways .lp-cta-link {
  justify-self: start;
}

@media (max-width: 559px) {
  .lp-cta-way {
    padding: var(--space-5);
  }
  .lp-cta-way-foot .btn {
    width: 100%;
  }
}

@media (max-width: 559px) {
  .lp-cta-side,
  .lp-cta-side .btn {
    width: 100%;
  }
}

/* ======================================================================
   16. 09 Quellen & Methodik – nummerierte Fußnoten, aufklappbar
   ====================================================================== */

.lp-sources-intro {
  max-width: 72ch;
  margin-top: var(--space-4);
  font-size: 0.9375rem;
  color: var(--color-ink-2);
}

.lp-sources-more {
  margin-top: var(--space-6);
  border-top: var(--border-rule);
}

.lp-sources-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: var(--border-hair);
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}

.lp-sources-more > summary::-webkit-details-marker {
  display: none;
}

.lp-sources-more > summary:hover {
  color: var(--color-link);
}

.lp-sources-more[open] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.lp-when-open,
.lp-sources-more[open] .lp-when-closed {
  display: none;
}

.lp-sources-more[open] .lp-when-open {
  display: inline;
}

.lp-sources-list {
  display: grid;
  gap: var(--space-3);
  max-width: 72rem;
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: src;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.lp-sources-list li {
  counter-increment: src;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-2);
}

.lp-sources-list li::before {
  content: '[' counter(src) ']';
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

.lp-sources-note {
  max-width: 72ch;
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

/* ======================================================================
   17. Gemeinsame Fußzeile
   ====================================================================== */

.site-footer {
  padding-block: var(--space-12) var(--space-8);
  background: var(--color-paper);
  border-top: var(--border-rule);
  font-size: var(--text-sm);
}

.site-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

@media (max-width: 959px) {
  .site-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-footer-about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 479px) {
  .site-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.site-footer-about p {
  max-width: 36ch;
  margin-top: var(--space-3);
  color: var(--color-ink-2);
}

.site-footer-about .btn--link {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.site-footer h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

.site-footer ul {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.site-footer ul a {
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
}

.site-footer ul a:hover {
  color: var(--color-link);
  text-decoration: underline;
}

.site-footer .desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

.site-footer-notes {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: var(--border-hair);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

.site-footer-notes p {
  max-width: 90ch;
}

.site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

.noscript-note {
  max-width: 35rem;
  margin: var(--space-4) auto;
  padding: var(--space-3) var(--space-4);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

/* ======================================================================
   18. Berichtsansicht: Hero schrumpft auf eine schlanke Prüfzeile
   (app.js setzt html[data-view="report"], solange Ladezustand, Bericht oder Fehler sichtbar sind;
   :has() greift zusätzlich, falls das Attribut fehlt)
   ====================================================================== */

html[data-view='report'] .site-nav,
body:has(#results:not([hidden])) .site-nav {
  display: none;
}

html[data-view='report'] .site-header-actions,
body:has(#results:not([hidden])) .site-header-actions {
  margin-left: auto;
}

html[data-view='report'] .lp-hero,
main:has(#results:not([hidden])) .lp-hero {
  padding-block: var(--space-4);
  background: var(--color-paper);
  border-bottom: var(--border-hair);
}

html[data-view='report'] .lp-hero-grid,
main:has(#results:not([hidden])) .lp-hero-grid {
  display: block;
}

html[data-view='report'] .lp-hero :is(.lp-kicker, h1, .lead, .lp-proof, .lp-hero-alt, .lp-preview, .lp-micro-trust, .lp-form-hint),
main:has(#results:not([hidden])) .lp-hero :is(.lp-kicker, h1, .lead, .lp-proof, .lp-hero-alt, .lp-preview, .lp-micro-trust, .lp-form-hint) {
  display: none;
}

html[data-view='report'] .lp-form,
main:has(#results:not([hidden])) .lp-form {
  display: grid;
  grid-template-columns: minmax(0, 46rem) auto;
  align-items: end;
  column-gap: var(--space-5);
  max-width: none;
  margin-top: 0;
}

html[data-view='report'] .lp-form > :not(.field, .lp-form-meta),
main:has(#results:not([hidden])) .lp-form > :not(.field, .lp-form-meta) {
  grid-column: 1 / -1;
}

html[data-view='report'] .lp-form-meta,
main:has(#results:not([hidden])) .lp-form-meta {
  margin: 0 0 var(--space-3);
}

html[data-view='report'] .lp-form .input-group .input,
main:has(#results:not([hidden])) .lp-form .input-group .input {
  min-height: 46px;
}

/* Eine laute Handlung pro Moment: im Bericht ist „Prüfbericht erstellen“ ruhig, die Demo im Header bleibt der Primärbutton */
html[data-view='report'] #scan-button,
main:has(#results:not([hidden])) #scan-button {
  background: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-line-input);
  box-shadow: none;
}

html[data-view='report'] #scan-button:hover:not(:disabled),
main:has(#results:not([hidden])) #scan-button:hover:not(:disabled) {
  background: var(--color-sunken);
  color: var(--color-ink);
}

/* app.js trägt die vollständige Adresse ein – das https://-Präfix wäre doppelt */
html[data-view='report'] .lp-form .input-group-prefix,
main:has(#results:not([hidden])) .lp-form .input-group-prefix {
  display: none;
}

@media (max-width: 559px) {
  /* schlanke Prüfzeile auch mobil: Feld und Button nebeneinander, Label nur für Screenreader */
  html[data-view='report'] .lp-form .field-label,
  main:has(#results:not([hidden])) .lp-form .field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html[data-view='report'] .lp-form .input-group,
  main:has(#results:not([hidden])) .lp-form .input-group {
    flex-wrap: nowrap;
  }
  html[data-view='report'] .lp-form .input-group .input,
  main:has(#results:not([hidden])) .lp-form .input-group .input {
    flex-basis: auto;
    min-height: 44px;
    padding-inline: var(--space-3);
  }
  html[data-view='report'] .lp-form .input-group .btn,
  main:has(#results:not([hidden])) .lp-form .input-group .btn {
    flex: none;
    min-height: 36px;
    margin: 4px;
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
  }
  html[data-view='report'] .lp-form .button-text svg,
  main:has(#results:not([hidden])) .lp-form .button-text svg {
    display: none;
  }
}

@media (max-width: 799px) {
  html[data-view='report'] .lp-form,
  main:has(#results:not([hidden])) .lp-form {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-view='report'] .lp-form-meta,
  main:has(#results:not([hidden])) .lp-form-meta {
    margin: var(--space-2) 0 0;
  }
}

/* ======================================================================
   19. Druck: Landing-Elemente nie im Prüfbericht-PDF
   ====================================================================== */

@media print {
  .site-header,
  .site-footer,
  .lp-hero-alt,
  .lp-preview,
  .customize-panel,
  .lp-form-meta,
  .lp-form-hint {
    display: none !important;
  }

  html[data-view='report'] .lp-hero,
  html[data-view='report'] #info-cards,
  main:has(#results:not([hidden])) .lp-hero,
  main:has(#results:not([hidden])) #info-cards {
    display: none !important;
  }

  .lp-section {
    padding-block: 1.5rem;
  }

  .lp-cta {
    background: none;
    color: var(--color-ink);
    border: var(--border-rule);
  }

  .lp-cta h2,
  .lp-cta p:not([class]),
  .lp-cta .eyebrow,
  .lp-cta .lp-trust {
    color: var(--color-ink);
  }
}

/* ======================================================================
   20. Telefon & Touch: Kopfzeile, Abschnitte unterhalb des Heros, Fußzeile
   Telefon = unter 640 px, Touch = (pointer: coarse) in jeder Breite. Nur Bildschirm: Desktop
   (feiner Zeiger, ab 640 px) und Druck bleiben unverändert. Der Hero (Abschnitt 2–3) hat eigene Regeln.
   ====================================================================== */

/* Sicherheitsabstände (viewport-fit=cover): ohne Notch ist env() 0, also alles wie bisher */
.site-header {
  padding-top: env(safe-area-inset-top);
}

.site-footer {
  padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom));
}

/* Touch: jedes Ziel mindestens 44 px hoch, ohne das Bild zu verändern */
@media screen and (pointer: coarse) {
  .brandmark {
    min-height: 44px;
  }

  .site-header-actions .btn--sm {
    --btn-h: 44px;
  }

  .site-nav {
    align-self: stretch;
  }

  .site-nav a {
    display: inline-flex;
    align-items: center;
  }

  .lp-register dd a,
  .lp-cta-link,
  .site-footer-about .btn--link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .lp-register dd a {
    margin-top: 0;
  }

  .site-footer ul {
    gap: 0;
  }

  .site-footer ul a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .site-footer .desc {
    margin-top: -8px;
    padding-bottom: var(--space-2);
  }

  /* Quellenzeilen sind kurz („Quelle · Datum“), der Quellen-Link ist dort das eigentliche Ziel:
     44 px hoch und breit, die Zeile wächst mit – zwei Quellen untereinander überlappen nicht */
  .lp-src a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    margin-inline: -6px;
    padding-inline: 6px;
  }

  /* Hero-Quelle: Zielfläche über Polsterung statt Zeilenhöhe – das Datum bleibt an der Quelle */
  .lp-proof-src a {
    padding-block: 14px;
  }

  /* schlanke Prüfzeile über Bericht und Fehlerseite am Telefon: Button 44 statt 36 px, das Feld
     wächst um die 4 px Einzug mit (überschreibt Abschnitt 18) */
  @media (max-width: 559px) {
    html[data-view='report'] .lp-form .input-group .btn,
    main:has(#results:not([hidden])) .lp-form .input-group .btn {
      min-height: 44px;
    }

    html[data-view='report'] .lp-form .input-group .input,
    main:has(#results:not([hidden])) .lp-form .input-group .input {
      min-height: 52px;
    }
  }

  /* Prüfumfang anpassen: der Umschalter selbst, Website-Typ und Prüfpunkte als 44-px-Zeilen */
  .customize-toggle {
    min-height: 44px;
  }

  .profile-pill {
    min-height: 44px;
  }

  .check-toggle {
    align-items: center;
    min-height: 44px;
    padding: 0;
  }

  .check-toggle input {
    width: 20px;
    height: 20px;
    margin-top: 0;
  }
}

/* Querformat am Telefon: 390 px Höhe – die Kopfzeile scrollt mit, statt ein Sechstel zu belegen */
@media screen and (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .site-header {
    position: relative;
  }
}

/* Nebentext 14 px auf Telefonen – und auf Touch-Tablets und Telefonen im Querformat (bis 1024 px), die
   sonst bei 12–13 px blieben. Nur die Schriftgröße; die Telefon-Layoutregeln bleiben unter 640 px. */
@media screen and (max-width: 639px), screen and (pointer: coarse) and (max-width: 1024px) {
  .lp-proof-src,
  .lp-form-hint,
  .lp-src,
  .lp-way-note,
  .lp-band-note,
  .lp-arg-area,
  .lp-four dd.lp-four-tech,
  .lp-areas .lp-areas-tech,
  .lp-level p,
  .lp-finding-note,
  .lp-trust,
  .lp-partner-note,
  .lp-register dt .lp-register-role,
  .lp-sources-note,
  .site-footer .desc,
  .site-footer-notes,
  .site-footer-bottom {
    font-size: var(--text-sm);
  }
}

@media screen and (max-width: 639px) {
  /* Lesetext 16 px … */
  .lp-band-text,
  .lp-way > p:not([class]),
  .lp-cta .lp-cta-way p:not([class]),
  .lp-arg p:not([class]),
  .lp-four dd,
  .lp-context-text,
  .lp-checklist,
  .lp-scope ul,
  .lp-levels-note,
  .lp-step p,
  .lp-finding dl,
  .lp-honest-item p,
  .lp-partner p:not([class]),
  .lp-register > div,
  .lp-sources-intro {
    font-size: var(--text-base);
  }


  /* Methodik: je Bereich Name + Anzahl in einer Zeile, darunter Leitfrage und Auswahl ohne Label-Spalte */
  .lp-areas tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-4);
  }

  .lp-areas tbody th {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .lp-areas td[data-label] {
    display: block;
    grid-column: 1 / -1;
  }

  .lp-areas td[data-label='Leitfrage'] {
    font-size: var(--text-base);
    color: var(--color-ink-2);
  }

  .lp-areas td[data-label='Leitfrage']::before {
    content: none;
  }

  .lp-areas td.lp-areas-tech::before {
    display: block;
    margin-bottom: 2px;
  }

  .lp-areas td.is-num[data-label] {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    width: auto;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: 1.1;
  }

  .lp-areas td.is-num[data-label]::before {
    font-weight: 500;
  }

  /* Stufen: eine Zeile je Stufe statt zwei schmaler Spalten – keine Trennung mitten im Fachbegriff */
  .lp-levels-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: var(--border-hair);
  }

  .lp-level {
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    gap: 2px var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: var(--border-hair);
  }

  .lp-level .ladder-bar {
    grid-row: 1 / span 2;
    align-self: start;
    justify-content: center;
  }

  .lp-level h4,
  .lp-level p {
    grid-column: 2;
    hyphens: manual;
  }

  /* Prüfumfang anpassen: Prüfpunkte zweispaltig – halb so lang, jede Zeile bleibt 44 px hoch */
  .customize-panel {
    padding: var(--space-4);
  }

  .checks-category {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-3);
  }

  .check-toggle {
    line-height: 1.3;
  }
}

/* Fußzeile am Telefon: Entwickler-Links und Rechtliches nebeneinander statt einer langen Spalte */
@media screen and (max-width: 479px) {
  .site-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }

  .site-footer-grid > nav[aria-labelledby='f-team'] {
    grid-column: 1 / -1;
  }

  /* „Für Entwickler & Agenten“ bricht um: beide Spaltenköpfe gleich hoch, die Links stehen auf einer Linie */
  .site-footer-grid > nav:not([aria-labelledby='f-team']) h2 {
    min-height: calc(2 * 1.15em);
  }
}