/* ==========================================================================
   BUHA — Komponenten (Designsystem 6, 10)
   Buttons, Cards, Teaser, Vorteile, Prozess, Formulare, Hinweisbox,
   Trust-Elemente, Akkordeon, Kostenrechner, Cookie-Banner u. a.
   ========================================================================== */

/* ==========================================================================
   Icon-Basis (Designsystem 8.3)
   Jedes .icon ist standardmäßig 1.25rem groß; einzelne Kontexte überschreiben.
   Das injizierte SVG füllt den .icon-Container vollständig.
   ========================================================================== */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  line-height: 1;
}

.icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================================================
   6.1 Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 48px;
  padding-inline: var(--s-5);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 150ms ease-out, transform 150ms ease-out,
    border-color 150ms ease-out;
}

.btn .icon {
  width: 20px;
  height: 20px;
}

.btn--lg {
  height: 56px;
  padding-inline: var(--s-6);
}

.btn--sm {
  height: 40px;
  padding-inline: var(--s-4);
  font-size: 0.9375rem;
}

/* Primär — Bernstein-Fläche, NAVY-Text (Designsystem 2.6 / 6.1) */
.btn--primary {
  background: var(--c-amber-500);
  color: var(--c-navy-900);
}

.btn--primary:hover {
  background: var(--c-amber-400);
  color: var(--c-navy-900);
  transform: translateY(-1px);
}

.btn--primary:active {
  background: var(--c-amber-600);
  transform: translateY(0);
}

/* Sekundär — weiße Fläche, Navy-Rahmen */
.btn--secondary {
  background: var(--c-surface);
  color: var(--c-navy-700);
  border-color: var(--c-navy-700);
}

.btn--secondary:hover {
  background: var(--c-navy-050);
  color: var(--c-navy-700);
}

.btn--secondary:active {
  background: var(--c-navy-100);
}

/* Tertiär / Text */
.btn--text {
  height: auto;
  padding: 0;
  background: none;
  color: var(--c-navy-600);
  font-weight: 600;
}

.btn--text:hover {
  color: var(--c-navy-700);
  text-decoration: underline;
}

/* Auf-Dunkel sekundär */
.btn--ondark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.btn--ondark:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* WhatsApp-Button (Designsystem 6.12) — dunkles Label */
.btn--whatsapp {
  background: var(--c-whatsapp);
  color: var(--c-navy-900);
}

.btn--whatsapp:hover {
  background: var(--c-whatsapp-dark);
  color: var(--c-navy-900);
}

/* Ghost-Icon-Button (Header Telefon/WhatsApp) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  color: var(--c-navy-700);
  background: transparent;
  text-decoration: none;
}

.btn-icon:hover {
  background: var(--c-navy-050);
  color: var(--c-navy-700);
}

.btn-icon.btn-icon--whatsapp:hover {
  background: rgba(37, 211, 102, 0.12);
}

/* Telefon-Link im Header (Tertiär) */
.phone-link {
  align-items: center;
  gap: var(--s-2);
  color: var(--c-navy-700);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
}

.phone-link:hover {
  color: var(--c-navy-600);
}

/* Deaktiviert (alle Varianten) */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--c-line);
  color: var(--c-ink-300);
  border-color: var(--c-line);
  cursor: not-allowed;
  transform: none;
}

/* Lade-Zustand */
.btn[aria-busy="true"] {
  position: relative;
  color: transparent !important;
}

.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--c-navy-900);
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.btn-block {
  width: 100%;
}

/* Volle Breite mobil bei Button-Paaren */
@media (max-width: 599px) {
  .hero-actions .btn,
  .cta-band .hero-actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   6.4 / 6.5 Cards & Leistungs-Teaser
   ========================================================================== */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media (min-width: 1024px) {
  .card {
    padding: var(--s-6);
  }
}

.card h2,
.card h3 {
  margin-bottom: var(--s-2);
}

.card p {
  color: var(--c-ink-700);
}

/* klickbare Karte */
.card--link {
  text-decoration: none;
  transition: box-shadow 150ms ease-out, border-color 150ms ease-out,
    transform 150ms ease-out;
}

.card--link:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--c-navy-100);
  transform: translateY(-2px);
}

.card-link-more {
  margin-top: auto;
  padding-top: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--c-navy-600);
  font-weight: 600;
  font-size: 0.9375rem;
}

.card--link:hover .card-link-more {
  color: var(--c-navy-700);
}

/* Icon-Kreis (Leistungs-Teaser) */
.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-navy-100);
  color: var(--c-navy-700);
  display: grid;
  place-items: center;
  margin-bottom: var(--s-4);
}

.card-icon .icon {
  width: 28px;
  height: 28px;
}

/* ==========================================================================
   K3  Branchen-Kachel  .card--branche   (Kundendokument 07.09.2026)
   --------------------------------------------------------------------------
   Schlanke Variante der Leistungskachel fuer das Sechser-Raster „Auch bei
   besonderen Branchenanforderungen". Weniger Innenabstand, kleinerer
   Icon-Kreis, zwei bis drei Zeilen Text — damit alle sechs Kacheln auf dem
   Desktop in einer ruhigen 3x2-Flaeche stehen und nicht wie sechs
   vollwertige Leistungsangebote wirken.
   Markup: <a class="card card--link card--branche" href="…"> wie die uebrigen
   Kacheln, damit Hover, Fokus und der Unterstreichungs-Reset greifen.
   ========================================================================== */
.card--branche {
  padding: var(--s-4);
}

@media (min-width: 1024px) {
  .card--branche {
    padding: var(--s-5);
  }
}

.card--branche .card-icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--s-3);
}

.card--branche .card-icon .icon {
  width: 22px;
  height: 22px;
}

.card--branche h3 {
  font-size: 1.0625rem;
}

.card--branche p {
  font-size: 0.9375rem;
}

.card--branche .card-link-more {
  padding-top: var(--s-3);
  font-size: 0.875rem;
}

/* Zweispaltige Haekchen-Liste (K3): „Unsere Leistungen auf einen Blick".
   Acht kurze Punkte stehen einspaltig zu lang untereinander — ab 768px
   laufen sie in zwei Spalten, mobil bleibt es bei einer. */
.list-checks--2 {
  gap: var(--s-4);
}

@media (min-width: 768px) {
  .list-checks--2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--s-7);
    row-gap: var(--s-4);
  }
}

.list-checks--2 li span {
  color: var(--c-ink-700);
}

/* ==========================================================================
   K4  Leistungsumfang-Karte  .card--umfang   (Inhaber-Feedback 07.09.2026)
   --------------------------------------------------------------------------
   Der Abschnitt „Der Leistungsumfang im Detail" stand als .split: links vier
   Zeilen Einleitung, rechts eine Liste mit 7 bis 14 Punkten. Weil .split
   vertikal zentriert (layout.css Zeile 107/110), blieben in der linken Spalte
   gemessene 60–81 % Leerflaeche stehen, waehrend rechts eine Bleiwueste lief.
   Der Abschnitt war damit der einzige der Seite ohne Rhythmus.
   Neu: Einleitung und „Ihr Nutzen" wandern in einen zentrierten .section-head,
   die Punkte werden thematisch in 3–4 Karten gruppiert. Kein Inhalt entfaellt.

   Diese Karte ist eine reine INHALTSKARTE, kein Link: deshalb ohne
   .card--link, ohne Hover-Anhebung, ohne .card-link-more. Sie erbt Flaeche,
   Rahmen, Radius, Schatten und Innenabstand unveraendert von .card und
   uebernimmt den 44px-Icon-Kreis 1:1 aus .card--branche. Neu ist allein die
   Aufzaehlung im Kartenkoerper — keine neue Designsprache, nur eine Variante.
   ========================================================================== */
.card--umfang {
  /* Lang-Wort-Schutz im Raster („Umsatzsteuer-Voranmeldung", „Gueterkraft-
     verkehrserlaubnis") — ohne min-width:0 sprengt ein Wort die Spalte. */
  min-width: 0;
}

/* Icon-Kreis wie bei der Branchen-Kachel: 44px statt 56px. Er ist hier
   Gruppen-Marker, nicht Blickfang — der Inhalt der Karte ist die Liste. */
.card--umfang .card-icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--s-3);
}

.card--umfang .card-icon .icon {
  width: 22px;
  height: 22px;
}

/* Gruppentitel: semantisch <h3> (die Sektion fuehrt die <h2>), visuell die
   H4-Stufe der Skala (18px, Designsystem 3.2/3.5). Groesser als bei
   .card--branche (17px), weil hier eine Liste darunter haengt und der Titel
   sie tragen muss. */
.card--umfang h3 {
  font-size: 1.125rem;
  margin-bottom: var(--s-4);
  text-wrap: balance;
}

/* Aufzaehlung im Kartenkoerper: dieselben 6px-Bernstein-Quadrate wie ueberall
   sonst, nur enger eingerueckt — die Karte bringt ihren eigenen Innenabstand
   mit. Abstand --s-4 statt --s-3, weil jeder Punkt zweiteilig ist
   (Beschreibung + Nutzenzeile) und sonst ineinanderliefe. */
.card--umfang .list-bullets {
  gap: var(--s-4);
}

.card--umfang .list-bullets li {
  padding-left: var(--s-4);
  font-size: 0.9375rem; /* Body-S 15px — kleinste Groesse in dieser Karte */
  line-height: 1.55;
  color: var(--c-ink-700);
  overflow-wrap: break-word;
}

.card--umfang .list-bullets li strong {
  color: var(--c-navy-700);
}

/* Nutzensatz: stand bisher kursiv mitten im Fliesstext — das widerspricht
   Designsystem 3.3 („keine Kursive im Fliesstext ausser in echten Zitaten")
   und war in der langen Liste kaum als eigene Aussage lesbar. Er bekommt
   jetzt eine eigene Zeile, die Sekundaerfarbe und einen 8x2px-Bernsteinstrich
   als Marker — dieselbe Formsprache wie das 6px-Quadrat, eine Ebene tiefer. */
.card--umfang .list-bullets li em {
  position: relative;
  display: block;
  margin-top: var(--s-1);
  padding-left: 16px;
  font-style: normal;
  color: var(--c-ink-500);
}

.card--umfang .list-bullets li em::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 2px;
  background: var(--c-amber-500);
}

/* B2B-Karte: Amber-Marker oben (Designsystem 6.5) */
.card--b2b {
  border-top: 4px solid var(--c-amber-500);
}

/* ==========================================================================
   6.6 Vorteils-Kacheln
   ========================================================================== */
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.feature .feature-icon {
  color: var(--c-amber-600);
  margin-bottom: var(--s-2);
}

/* Icon-Größe 32px in allen .feature-icon-Kontexten (Vorteile + Prozess) */
.feature-icon .icon {
  width: 32px;
  height: 32px;
}

/* Kachel-Titel: semantisch <h3>, visuell t-h4-Stil (Design-System 3.5/6.6,
   Rev. 2 — Klärung D-2). Markup: <h3 class="t-h4">…</h3>. h4 bleibt als
   Selektor erhalten für Hinweisbox-Titel innerhalb von .feature (falls genutzt). */
.feature h3,
.feature h4 {
  color: var(--c-navy-700);
}

.feature p {
  font-size: 0.9375rem;
  color: var(--c-ink-700);
}

/* ==========================================================================
   6.7 Prozess-Schritte
   ========================================================================== */
.process {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  position: relative;
}

@media (min-width: 1024px) {
  .process {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-8);
  }
}

.process-step {
  position: relative;
}

.process-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3rem;
  line-height: 1;
  color: var(--c-amber-400);
  -webkit-text-stroke: 1px var(--c-amber-500);
  margin-bottom: var(--s-3);
}

.process-step .feature-icon {
  color: var(--c-navy-700);
  margin-bottom: var(--s-3);
}

/* Schritt-Titel: semantisch <h3>, visuell t-h4-Stil (Design-System 3.5/6.7,
   Rev. 2 — Klärung D-2). Markup: <h3 class="t-h4">…</h3>. */
.process-step h3,
.process-step h4 {
  margin-bottom: var(--s-2);
}

/* Verbindungslinie Desktop */
@media (min-width: 1024px) {
  .process::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 16%;
    right: 16%;
    border-top: 2px dashed var(--c-navy-100);
    z-index: 0;
  }
  .process-step {
    z-index: 1;
  }
}

/* ==========================================================================
   6.9 Hinweisbox / Trust-Box / § 6 StBerG-Box
   ========================================================================== */
.notice {
  border-radius: var(--r-md);
  padding: var(--s-5);
  display: flex;
  gap: var(--s-4);
}

.notice .notice-icon {
  flex-shrink: 0;
}

.notice .notice-icon .icon {
  width: 24px;
  height: 24px;
}

/* Box-Titel: Hinweis-/Trust-Box-Titel sind Labels, keine Gliederungs-
   Headings (Design-System 6.9, Rev. 2) — gesetzt als
   <p class="box-title t-h4">. Die Regel sichert den t-h4-Stil mit
   ausreichender Spezifität gegen kontextbezogene .notice/.embed p-Regeln.
   h4 bleibt als Selektor für Abwärtskompatibilität erhalten. */
p.box-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--c-navy-700);
}

.notice h4,
.notice .box-title {
  margin-bottom: var(--s-2);
}

.notice p:not(.box-title) {
  font-size: 0.9375rem;
}

/* Info-/Trust-Box */
.notice--info {
  background: var(--c-navy-050);
  border-left: 4px solid var(--c-navy-600);
}

.notice--info .notice-icon {
  color: var(--c-navy-700);
}

/* § 6 StBerG-Hinweisbox — bewusst der leiseste Kasten der Seite.
   Rev. 3 (06.09.2026, Inhaber-Wunsch): Die Leistungsabgrenzung ist eine
   sachliche Transparenz-Angabe, keine Warnung. Deshalb kein Amber-Alarm-
   Look und kein 4px-Akzentbalken mehr, sondern zarte Blau-Tönung mit
   Haarlinien-Rahmen und gedämpftem Icon. Rangfolge der Hinweiskästen:
   notice--error (laut) > notice--success > notice--info > notice--stberg. */
.notice--stberg {
  background: var(--c-navy-050);
  border: 1px solid var(--c-navy-100);
  color: var(--c-ink-700);
}

.notice--stberg .notice-icon {
  color: var(--c-ink-500);
}

.notice--stberg .notice-icon .icon {
  width: 20px;
  height: 20px;
}

.notice--stberg h4,
.notice--stberg .box-title {
  color: var(--c-navy-700);
  font-weight: 600;
}

/* Steht der Kasten in einer weichen Sektion, ist die Blau-Toenung mit dem
   Sektionshintergrund identisch — dort traegt eine weisse Flaeche die
   gleiche ruhige Wirkung und bleibt trotzdem abgesetzt. */
.section--soft .notice--stberg,
.bg-soft .notice--stberg {
  background: var(--c-surface);
}

/* Erfolg / Fehler */
.notice--success {
  background: var(--c-success-bg);
  border-left: 4px solid var(--c-success);
}

.notice--success .notice-icon { color: var(--c-success); }

.notice--error {
  background: var(--c-error-bg);
  border-left: 4px solid var(--c-error);
}

.notice--error .notice-icon { color: var(--c-error); }

/* Entwickler-/Redaktions-Hinweis (Lohn-Seite, § 6 Nr. 4 StBerG) */
.dev-note {
  background: repeating-linear-gradient(
    45deg,
    var(--c-warning-bg),
    var(--c-warning-bg) 16px,
    #f7e0c2 16px,
    #f7e0c2 32px
  );
  border: 2px dashed var(--c-amber-600);
  border-radius: var(--r-md);
  padding: var(--s-5);
  color: var(--c-navy-900);
}

.dev-note strong {
  color: var(--c-navy-900);
}

.dev-note .dev-note-label {
  display: inline-block;
  background: var(--c-amber-600);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px var(--s-2);
  border-radius: 4px;
  margin-bottom: var(--s-2);
}

/* ==========================================================================
   6.10 Trust-/Vertrauens-Elemente
   ========================================================================== */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 40px;
  padding-inline: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-navy-700);
  white-space: nowrap;
}

.trust-badge .icon {
  width: 18px;
  height: 18px;
  color: var(--c-success);
}

/* auf dunklem Grund */
.hero--dark .trust-badge,
.section--navy .trust-badge {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.hero--dark .trust-badge .icon,
.section--navy .trust-badge .icon {
  color: var(--c-amber-400);
}

/* Pill / Tag / Kategorie */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--c-navy-100);
  color: var(--c-navy-700);
}

.pill--amber {
  background: var(--c-amber-100);
  color: var(--c-amber-600);
}

/* Reaktionszeit-Versprechen-Badge */
.response-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-success);
}

/* Testimonial-Card */
.testimonial {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-6);
  position: relative;
}

.testimonial::before {
  content: "\201C";
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 0.6;
  color: var(--c-amber-100);
  position: absolute;
  top: var(--s-5);
  left: var(--s-5);
}

.testimonial blockquote {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--c-ink-900);
  position: relative;
  margin-bottom: var(--s-4);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-navy-100);
  display: grid;
  place-items: center;
  color: var(--c-navy-700);
  font-weight: 600;
  flex-shrink: 0;
}

.testimonial-author cite {
  font-style: normal;
}

.testimonial-author .ta-name {
  display: block;
  font-weight: 600;
  color: var(--c-navy-700);
}

.testimonial-author .ta-role {
  display: block;
  font-size: 0.8125rem;
  color: var(--c-ink-500);
}

/* Qualifikations-Block */
.qual-card {
  display: flex;
  gap: var(--s-5);
  align-items: flex-start;
  background: var(--c-navy-050);
  border-radius: var(--r-md);
  padding: var(--s-6);
}

.qual-card .qual-photo {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: var(--r-md);
  background: var(--c-navy-100);
  display: grid;
  place-items: center;
  color: var(--c-navy-700);
}

/* ==========================================================================
   6.8 Formulare & Inputs
   ========================================================================== */
.form-field {
  margin-bottom: var(--s-5);
}

.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-ink-700);
  margin-bottom: var(--s-2);
}

.form-label .req {
  color: var(--c-error);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  font-size: 1rem; /* verhindert iOS-Zoom */
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-ink-900);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--c-ink-300);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-width: 2px;
  border-color: var(--c-navy-600);
  box-shadow: 0 0 0 3px rgba(30, 74, 140, 0.2);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background: var(--c-bg-soft);
  color: var(--c-ink-300);
}

.form-help {
  margin-top: var(--s-2);
  font-size: 0.9375rem;
  color: var(--c-ink-500);
}

/* Fehlerzustand */
.form-field.has-error .form-input,
.form-field.has-error .form-select,
.form-field.has-error .form-textarea {
  border-width: 2px;
  border-color: var(--c-error);
}

.form-error {
  display: none;
  margin-top: var(--s-2);
  font-size: 0.9375rem;
  color: var(--c-error);
  align-items: center;
  gap: var(--s-1);
}

.form-field.has-error .form-error {
  display: flex;
}

.form-error .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Checkbox / Radio */
.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: 44px;
  padding-block: var(--s-2);
  cursor: pointer;
}

.choice input {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--c-navy-700);
  cursor: pointer;
}

.choice span {
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Einwilligung zur Datenverarbeitung */
.consent {
  font-size: 0.875rem;
}

/* Formular-Aktionen */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

@media (min-width: 600px) {
  .form-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 599px) {
  .form-actions .btn {
    width: 100%;
  }
}

/* Fehlerzusammenfassung */
.form-summary-error {
  display: none;
}

.form-summary-error.is-visible {
  display: flex;
}

/* ==========================================================================
   6.13 Akkordeon / FAQ
   ========================================================================== */
.accordion {
  border-top: 1px solid var(--c-line);
}

.accordion-item {
  border-bottom: 1px solid var(--c-line);
}

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4) var(--s-3);
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--c-navy-700);
}

.accordion-trigger:hover {
  background: var(--c-navy-050);
}

.accordion-trigger .acc-icon {
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.accordion-trigger[aria-expanded="true"] .acc-icon {
  transform: rotate(180deg);
}

.accordion-panel {
  overflow: hidden;
  padding: 0 var(--s-3);
  max-height: 0;
  transition: max-height 250ms ease, padding 250ms ease;
}

.accordion-panel[hidden] {
  display: block; /* override, wir steuern per max-height */
}

.accordion-item.is-open .accordion-panel {
  max-height: 600px;
  padding-bottom: var(--s-5);
}

.accordion-panel p {
  font-size: 0.9375rem;
  color: var(--c-ink-700);
}

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

/* ==========================================================================
   6.12 Klick-to-load Embed-Platzhalter (Terminbuchung / Karte)
   ========================================================================== */
.embed-placeholder {
  background: var(--c-navy-050);
  border: 1px dashed var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-7) var(--s-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}

.embed-placeholder .icon {
  width: 40px;
  height: 40px;
  color: var(--c-navy-700);
}

.embed-placeholder h4,
.embed-placeholder .box-title {
  color: var(--c-navy-700);
}

.embed-placeholder p:not(.box-title) {
  font-size: 0.9375rem;
  max-width: 32rem;
}

.embed-loaded {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-line);
}

.embed-loaded iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* ==========================================================================
   6.14 Modal / Dialog
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(11, 27, 51, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}

.modal-overlay.is-open {
  display: flex;
}

.modal {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  max-width: 560px;
  width: 100%;
  padding: var(--s-6);
  position: relative;
  z-index: var(--z-modal);
}

.modal-close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
}

/* ==========================================================================
   Consent-Banner — Klaro in BUHA-Optik (K6, 10-Consent-Konzept.md)
   --------------------------------------------------------------------------
   Bis 07.09.2026 stand hier .cookie-banner, der Eigenbau aus partials.js.
   Ersetzt durch Klaro (assets/klaro/). klaro.css bringt nur das Grundgeruest
   mit; alles Sichtbare wird hier auf unsere Tokens gezogen.

   EINE REGEL IST NICHT VERHANDELBAR: "Alle ablehnen" und "Alle akzeptieren"
   muessen gleich gross, gleich kontrastreich und gleich auffaellig sein
   (OLG Koeln 6 U 80/23). Ein dezenterer Ablehnen-Knopf waere hier zwar der
   naheliegende Designreflex — die Bernstein-Farbe fuehrt sonst immer die
   Hauptaktion —, macht die Einwilligung aber angreifbar. Beide Knoepfe
   tragen deshalb bewusst dieselbe Gestalt.
   ========================================================================== */

/* Klaro bringt ein DUNKLES Standardthema mit. Seine Farbvariablen heissen
   deshalb aus unserer Sicht verdreht: `--dark*` ist der Hintergrund von
   Leiste und Dialog, `--light*` die Schrift DARAUF. Wer das uebersieht,
   baut sich dunkle Schrift auf dunklem Grund — genau das ist beim ersten
   Anlauf passiert. Wir drehen das Thema hier auf hell:
     --dark1  Flaeche von Leiste und Dialog   -> unser Surface
     --dark2  Trennlinien, Nebentext          -> unsere Linienfarbe
     --dark3  weiterer Nebentext              -> gedaempftes Navy
     --light1 Schrift auf der Flaeche         -> Navy
     --light2 helle Trennlinien               -> Linienfarbe
     --light3 Nebentext auf heller Flaeche    -> gedaempftes Navy
   Die Knopffarben stehen weiter unten explizit und haengen nicht an diesen
   Variablen — sie sind rechtlich zu wichtig, um sie ueber drei Ecken zu
   setzen. */
#klaro,
.klaro {
  --font-family: var(--font-body, inherit);
  --font-size: 0.9375rem;
  --border-radius: var(--r-md, 10px);
  --border-width: 1px;
  --border-style: solid;

  --dark1: var(--c-surface);
  --dark2: var(--c-line);
  --dark3: var(--c-navy-700);
  --light1: var(--c-navy-900);
  --light2: var(--c-line);
  --light3: var(--c-navy-700);
  --white2: var(--c-surface);
  --white3: var(--c-surface);
  --blue1: var(--c-navy-900);
  --blue2: var(--c-navy-900);
  --green1: var(--c-navy-900);
  --green2: #fff;
  --green3: var(--c-amber-500);
}

/* Schrift im Dialog und in der Leiste eindeutig festnageln — unabhaengig
   davon, welche Variable Klaro an welcher Stelle einsetzt. */
.klaro .cookie-modal .cm-modal,
.klaro .cookie-modal .cm-modal .cm-body,
.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal p,
.klaro .cookie-modal .cm-modal span,
.klaro .cookie-modal .cm-modal li,
.klaro .cookie-notice p,
.klaro .cookie-notice span {
  color: var(--c-navy-900);
}

.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-modal .cm-modal .cm-header h1.title,
.klaro .cookie-modal .cm-modal .cm-header h2 {
  color: var(--c-navy-900);
}

/* Der Schliessen-Knopf steht auf heller Flaeche — sonst weisses X auf Weiss. */
.klaro .cookie-modal .cm-modal .hide svg {
  stroke: var(--c-navy-700);
}

/* --- Hinweisleiste (Ebene 1) --------------------------------------------- */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  max-width: none;
  z-index: var(--z-cookie);
  background: var(--c-surface);
  color: var(--c-navy-900);
  border-top: 2px solid var(--c-navy-700);
  border-radius: 0;
  box-shadow: 0 -16px 48px rgba(11, 27, 51, 0.16);
  padding: var(--s-5);
}

@media (min-width: 1024px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    padding: var(--s-5) var(--s-6);
  }
}

/* Inhalt auf Containerbreite zentrieren und ab Desktop nebeneinander legen —
   wie zuvor beim Eigenbau-Banner. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

@media (min-width: 1024px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.klaro .cookie-notice p,
.klaro .cookie-modal p {
  color: var(--c-navy-700);
  margin: 0 0 var(--s-2);
}

.klaro .cookie-notice a,
.klaro .cookie-modal a {
  color: var(--c-navy-900);
  text-decoration: underline;
}

/* --- Knopfreihe ---------------------------------------------------------- */
.klaro .cookie-notice .cn-ok,
.klaro .cookie-modal .cm-footer-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}

.klaro .cn-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0;
}

/* Gemeinsame Grundgestalt fuer ALLE Consent-Knoepfe. */
.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-btn {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.75rem 1.25rem;
  min-height: 44px;              /* Touch-Ziel */
  border: 2px solid var(--c-navy-900);
  border-radius: var(--r-md, 10px);
  cursor: pointer;
  margin: 0;
  opacity: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Ablehnen UND Akzeptieren: identische Groesse, identisches Gewicht.
   Der einzige Unterschied ist die Fuellung — nicht die Prominenz. */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept-all,
.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cm-btn-danger,
.klaro .cm-btn.cn-decline {
  flex: 1 1 auto;
  min-width: 11.5rem;
  text-align: center;
  justify-content: center;
}

.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-success-var,
.klaro .cm-btn.cm-btn-accept,
.klaro .cm-btn.cm-btn-accept-all {
  background: var(--c-navy-900);
  color: #fff;
}

.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-success-var:hover,
.klaro .cm-btn.cm-btn-accept:hover,
.klaro .cm-btn.cm-btn-accept-all:hover {
  background: var(--c-navy-700);
  color: #fff;
}

.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cm-btn-danger,
.klaro .cm-btn.cn-decline {
  background: var(--c-surface);
  color: var(--c-navy-900);
}

.klaro .cm-btn.cm-btn-decline:hover,
.klaro .cm-btn.cm-btn-danger:hover,
.klaro .cm-btn.cn-decline:hover {
  background: var(--c-line);
  color: var(--c-navy-900);
}

/* "Einstellungen" ist die Nebenaktion und darf zurueckhaltender sein — sie
   ist keine Einwilligung. */
.klaro .cm-btn.cm-btn-lern-more,
.klaro .cn-learn-more {
  background: transparent;
  border-color: transparent;
  color: var(--c-navy-700);
  text-decoration: underline;
  flex: 0 0 auto;
  min-width: 0;
  padding-inline: var(--s-2);
}

.klaro .cm-btn:focus-visible,
.klaro .cookie-modal input:focus-visible + .cm-list-label .slider {
  outline: 3px solid var(--c-amber-500);
  outline-offset: 2px;
}

/* --- Detail-Dialog (Ebene 2) --------------------------------------------- */
.klaro .cookie-modal .cm-bg {
  background: rgba(11, 27, 51, 0.55);
}

.klaro .cookie-modal .cm-modal {
  background: var(--c-surface);
  color: var(--c-navy-900);
  border-radius: var(--r-lg, 14px);
  box-shadow: 0 24px 64px rgba(11, 27, 51, 0.28);
}

.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header h2,
.klaro .cookie-notice h2 {
  font-family: var(--font-display, inherit);
  color: var(--c-navy-900);
}

.klaro .cookie-modal li.cm-purpose,
.klaro .cookie-modal li.cm-service {
  border-color: var(--c-line);
}

/* Schalter in Bernstein, wenn aktiv — der einzige Ort im Banner, an dem die
   Akzentfarbe etwas aussagt: "dieser Dienst laeuft". */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
  background: var(--c-amber-500);
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::after {
  background: var(--c-navy-900);
}

/* --- Kollision mit der mobilen Bottom-Bar (Designsystem 6.11) -------------
   Bottom-Bar (z 60) und Banner (z 120) sitzen beide fixiert am unteren Rand.
   Ohne Regel liegt der Banner exakt ueber der Bar: die Bar ist unbenutzbar,
   und auf kleinen Geraeten frisst sie zusaetzlich die untere Knopfreihe an.
   Loesung: solange der Banner offen ist, traegt <html> die Klasse
   .has-consent-notice (gesetzt von ui.js) — die Bar tritt zurueck. Nach der
   Auswahl ist sie sofort wieder da.
   Sicherheitsnetz: greift die Klasse einmal nicht, haelt der Banner
   trotzdem Abstand nach unten und ueberdeckt die Bar nicht. */
@media (max-width: 1199px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    bottom: 64px;                                  /* Hoehe der Bottom-Bar */
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    max-height: 70vh;
    overflow-y: auto;
  }

  html.has-consent-notice .bottom-bar {
    display: none;
  }

  html.has-consent-notice .klaro .cookie-notice:not(.cookie-modal-notice) {
    bottom: 0;
    bottom: env(safe-area-inset-bottom, 0px);
  }
}

@media (max-width: 599px) {
  /* Achtung Spezifitaet: klaro.css adressiert diese Knoepfe ueber
     `.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons`.
     Ein kuerzerer Selektor verliert und bewirkt nichts — die Knoepfe standen
     dann bei 184px von 390px halb rechts angeschnitten. Deshalb hier bewusst
     dieselbe Selektorform.

     Inhaltlich: auf dem Handy untereinander und ueber die volle Breite. Ein
     rechtlich gleichwertiger Ablehnen-Knopf, der schmaler ist als der Daumen,
     ist keiner. Klaro selbst stellt erst ab 384px um und setzt dann
     `width: calc(50% - 0.5em)` — zwei halbe Knoepfe nebeneinander, was auf
     384-599px gar nicht greift. */
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    justify-content: stretch;
    align-items: stretch;
    flex-direction: column;
  }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--s-3);
  }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  .klaro .cookie-modal .cm-modal .cm-footer-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn {
    width: 100%;
    min-width: 0;
  }
}

/* Der Schalter im Dialog muss im AUS-Zustand als Schalter erkennbar sein —
   ohne Rahmen ist es ein weisses Oval auf weisser Flaeche. */
.klaro .cookie-modal .cm-list-label .slider {
  background: var(--c-line);
  border: 1px solid var(--c-navy-700);
}

.klaro .cookie-modal .cm-list-label .slider::before,
.klaro .cookie-modal .cm-list-label .slider::after {
  background: var(--c-navy-700);
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before {
  background: var(--c-navy-900);
}

/* --- Footer-Link "Cookie-Einstellungen" ----------------------------------
   Ein <button>, der aussehen muss wie die Links daneben (partials.js). */
.footer-linkbtn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.72);
  text-align: left;
  cursor: pointer;
}

.footer-linkbtn:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-linkbtn:focus-visible {
  outline: 3px solid var(--c-amber-500);
  outline-offset: 2px;
}

/* ==========================================================================
   Toast (Formular-Feedback)
   ========================================================================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  background: var(--c-navy-900);
  color: #fff;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  font-size: 0.9375rem;
}

.toast[hidden] {
  display: none;
}

/* ==========================================================================
   Statistik-/Fakten-Reihe
   ========================================================================== */
.stat-row {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .stat-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat {
  text-align: center;
}

.stat .stat-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.25rem;
  color: var(--c-navy-700);
  line-height: 1.1;
}

.section--navy .stat .stat-num {
  color: var(--c-amber-400);
}

.stat .stat-label {
  font-size: 0.875rem;
  color: var(--c-ink-500);
  margin-top: var(--s-1);
}

.section--navy .stat .stat-label {
  color: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   Temporäres Strapi-Termin-Widget (TEST) — 2026-07-08
   ========================================================================== */
.termin-widget {
  display: block;
  text-align: left;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.termin-widget__test-note {
  font-size: 0.875rem;
  color: var(--c-amber-600);
  background: var(--c-amber-100);
  border-radius: var(--r-sm);
  padding: 0.625rem 0.875rem;
  margin-bottom: 1.25rem;
}
.termin-widget__test-note .icon { vertical-align: -3px; }
.termin-widget__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}
.termin-widget__row .form-label { width: 100%; margin-bottom: 0.25rem; }
.termin-widget__row .form-input { flex: 1 1 12rem; }
.termin-widget__slots { margin-top: 1.25rem; }
.termin-widget__slothint { margin-top: 0.25rem; margin-bottom: 0.75rem; }
.termin-widget__slotgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  gap: 0.75rem 0.75rem;
  margin-top: 0.5rem;
}
.termin-widget__slot {
  appearance: none;
  border: 1px solid var(--c-line);
  background: var(--c-bg-soft);
  color: var(--c-ink-900);
  border-radius: var(--r-sm);
  padding: 0.625rem 0.5rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.termin-widget__slot:hover { border-color: var(--c-amber-400); }
.termin-widget__slot.is-selected {
  background: var(--c-amber-500);
  border-color: var(--c-amber-500);
  /* Weißer Text auf Bernstein ist laut Designsystem 2.6 verboten (2,4:1).
     Dunkles Navy ergibt ~7:1 — konsistent mit dem Primär-Button. */
  color: var(--c-navy-900);
}
.termin-widget__form { margin-top: 1.5rem; }
.termin-widget__chosen {
  font-size: 0.9375rem;
  color: var(--c-ink-900);
  margin-bottom: 1rem;
}
.termin-widget__chosen .icon { vertical-align: -3px; color: var(--c-amber-600); }
.termin-widget__msg { margin-bottom: 1rem; }
.termin-widget__success { text-align: center; padding: 1rem 0; }
.termin-widget__success .icon { color: var(--c-success); width: 2.5rem; height: 2.5rem; }

/* ==========================================================================
   V2 — Komponenten aus dem Kundengespräch (07-V2-Kundengespraech)
   --------------------------------------------------------------------------
   Alle Werte aus tokens.css. Farbsystem: Navy #15315F (--c-navy-700),
   Bernstein #E08A1E (--c-amber-500). WCAG 2.1 AA, sichtbare Fokuszustände,
   prefers-reduced-motion wird respektiert.
   Zum Zeitpunkt der Umsetzung enthielt 02-Designsystem.md noch keine
   Spezifikation dieser Komponenten — gebaut nach den bestehenden
   Konventionen dieser Datei. Eine spätere Designsystem-Spezifikation hat
   Vorrang und ersetzt diesen Block.
   ========================================================================== */

/* ==========================================================================
   V2-1  Vertrauensleiste  .trust-values   (V2 3.)
   --------------------------------------------------------------------------
   Vier Werte: Sorgfalt · Transparenz · Verantwortung · GOBD-konform.
   Icon + Titel + einzeilige Erklärung.
   Raster: 1 Spalte mobil, 2 ab sm (600px), 4 ab lg (1024px).

   Markup:
   <ul class="trust-values">
     <li class="trust-value">
       <span class="trust-value-icon">
         <span class="icon" data-icon="check-circle"></span></span>
       <h3 class="trust-value-title">Sorgfalt</h3>
       <p class="trust-value-text">Jede Buchung wird geprüft, …</p>
     </li> …
   </ul>
   ========================================================================== */
/* .trust-values wird im CMS als Klasse auf die <section> gesetzt
   (<section class="section trust-values">) und umschliesst dort ein
   .grid-Raster. Deshalb trägt die Klasse SELBST kein Layout — sonst würden
   .container und .section-head zu Grid-Items. Das Werte-Raster ist entweder
   das innenliegende .grid oder eine eigenständige Liste .trust-values-list
   (bzw. <ul class="trust-values">). */
.trust-values .grid,
.trust-values-list,
ul.trust-values {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 600px) {
  .trust-values .grid,
  .trust-values-list,
  ul.trust-values {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .trust-values .grid,
  .trust-values-list,
  ul.trust-values {
    /* Vier Werte seit 2026-09-05 (Wert "DSGVO-konform" entfernt) — das
       Raster muss mitgehen, sonst bleibt auf Desktop eine leere Spalte. */
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-6);
  }
}

/* Einzelner Wert — funktioniert sowohl mit der eigenen Item-Klasse
   .trust-value als auch mit der bereits im CMS gepflegten .feature-Kachel. */
.trust-value,
.trust-values .feature {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 2px solid var(--c-amber-500);
}

.trust-value-icon,
.trust-values .feature .feature-icon {
  color: var(--c-navy-700);
  margin-bottom: 0;
}

.trust-value-icon .icon,
.trust-values .feature .feature-icon .icon {
  width: 28px;
  height: 28px;
}

.trust-value-title,
.trust-values .feature h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--c-navy-700);
  margin: 0;
}

.trust-value-text,
.trust-values .feature p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-ink-700);
  margin: 0;
}

/* auf dunklem Grund (Navy-Sektion) */
.section--navy .trust-value,
.trust-values.section--navy .feature {
  border-top-color: var(--c-amber-400);
}

.section--navy .trust-value-icon,
.trust-values.section--navy .feature .feature-icon {
  color: var(--c-amber-400);
}

.section--navy .trust-value-title,
.trust-values.section--navy .feature h3 {
  color: #fff;
}

.section--navy .trust-value-text,
.trust-values.section--navy .feature p {
  color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   V2-2  Sechs-Schritte-Prozess  .process--six   (V2 4.)
   --------------------------------------------------------------------------
   Nummeriert. Mobil vertikale Timeline mit Verbindungslinie, ab md (768px)
   3×2-Raster. Baut auf .process / .process-step / .process-num auf.

   Markup:
   <ol class="process process--six">
     <li class="process-step">
       <div class="process-num">1</div>
       <h3 class="t-h4">Erstgespräch</h3>
       <p>Kostenlos und unverbindlich: …</p>
     </li> …
   </ol>
   ========================================================================== */
.process--six {
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

/* Die gestrichelte Horizontallinie der 3-Spalten-Variante passt nicht zum
   3×2-Raster — für --six abschalten. */
.process--six::before {
  display: none;
}

.process--six .process-step {
  position: relative;
  padding-left: 56px;
  padding-bottom: var(--s-6);
}

.process--six .process-step:last-child {
  padding-bottom: 0;
}

/* vertikale Timeline-Linie (mobil) */
.process--six .process-step::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: var(--c-navy-100);
}

.process--six .process-step:last-child::before {
  display: none;
}

/* Nummer als Kreis statt als großer Display-Ziffer */
.process--six .process-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-navy-700);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1;
  -webkit-text-stroke: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .process--six {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-7) var(--s-6);
  }
  .process--six .process-step {
    padding-left: 0;
    padding-bottom: 0;
  }
  .process--six .process-step::before {
    display: none;
  }
  .process--six .process-num {
    position: static;
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    margin-bottom: var(--s-4);
  }
}

@media (min-width: 1024px) {
  .process--six {
    gap: var(--s-8) var(--s-7);
  }
}

/* ==========================================================================
   V2-3  Umsatzstaffel  .price-tiers   (V2 5.1 / 5.2)
   --------------------------------------------------------------------------
   Ab md (768px) echte Tabelle, mobil Karten (dieselbe <table>, per CSS
   umgebrochen — deshalb tragen die <td> ein data-label).
   .price-tiers.is-placeholder markiert die Beträge sichtbar als Platzhalter,
   solange der Kunde die echten Preise nicht geliefert hat (V2 5.1).

   Markup:
   <div class="price-tiers is-placeholder">
     <table class="price-tiers-table">
       <caption class="visually-hidden">Preise nach Jahresumsatz</caption>
       <thead><tr>
         <th scope="col">Jahresumsatz (netto)</th>
         <th scope="col">Preis pro Monat</th>
         <th scope="col">Hinweis</th></tr></thead>
       <tbody>
         <tr><th scope="row">bis 30.000 €</th>
             <td class="pt-price" data-label="Preis pro Monat">ca. 79 – 119 €</td>
             <td data-label="Hinweis">Einsteigerstufe</td></tr>
         …
         <tr class="price-tier--individual"><th scope="row">über 500.000 €</th>
             <td class="pt-price" data-label="Preis pro Monat">Individuelles Angebot</td>
             <td data-label="Hinweis">kein Listenpreis</td></tr>
       </tbody>
     </table>
     <p class="price-tiers-surcharge">…Belegmengen-Aufschlag…</p>
   </div>
   ========================================================================== */
.price-tiers {
  --pt-border: var(--c-line);
}

.price-tiers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

/* --- mobil: Karten ------------------------------------------------------ */
@media (max-width: 767px) {
  .price-tiers-table,
  .price-tiers-table tbody,
  .price-tiers-table tr,
  .price-tiers-table th,
  .price-tiers-table td {
    display: block;
  }
  .price-tiers-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .price-tiers-table tbody tr {
    background: var(--c-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    padding: var(--s-4);
    margin-bottom: var(--s-3);
  }
  .price-tiers-table tbody th[scope="row"] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--c-navy-700);
    text-align: left;
    margin-bottom: var(--s-2);
  }
  .price-tiers-table tbody td {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-1) var(--s-3);
    padding-block: var(--s-1);
    color: var(--c-ink-700);
  }
  .price-tiers-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--c-ink-500);
  }
  .price-tiers-table tbody td:empty {
    display: none;
  }
}

/* --- ab md: Tabelle ----------------------------------------------------- */
@media (min-width: 768px) {
  .price-tiers-table thead th {
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ink-500);
    padding: 0 var(--s-4) var(--s-3);
    border-bottom: 2px solid var(--c-navy-700);
  }
  .price-tiers-table tbody th,
  .price-tiers-table tbody td {
    padding: var(--s-4);
    border-bottom: 1px solid var(--pt-border);
    vertical-align: baseline;
  }
  .price-tiers-table tbody th[scope="row"] {
    text-align: left;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--c-navy-700);
    white-space: nowrap;
  }
  .price-tiers-table tbody td {
    color: var(--c-ink-700);
  }
  .price-tiers-table tbody tr:nth-child(even) {
    background: var(--c-navy-050);
  }
}

.price-tiers-table .pt-price {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--c-ink-900);
}

/* Nur in der Tabellendarstellung darf der Betrag nicht umbrechen. In der
   Kartendarstellung (< md) muss er umbrechen dürfen, sonst schiebt die
   Preiszelle das Layout über die Viewport-Breite hinaus. */
@media (min-width: 768px) {
  .price-tiers-table .pt-price {
    white-space: nowrap;
  }
}

/* Stufe 6 — individuelles Angebot statt Listenpreis */
.price-tier--individual .pt-price {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--c-amber-600);
}

@media (min-width: 768px) {
  .price-tier--individual th,
  .price-tier--individual td {
    border-bottom: none;
  }
  .price-tiers-table tbody tr.price-tier--individual {
    background: var(--c-amber-100);
  }
}

/* Sichtbare Platzhalter-Kennzeichnung der Beträge (V2 5.1) */
.price-tiers.is-placeholder .pt-price::after {
  content: "Platzhalter";
  display: inline-block;
  margin-left: var(--s-2);
  padding: 1px 6px;
  border: 1px dashed var(--c-amber-600);
  border-radius: 4px;
  background: var(--c-amber-100);
  color: var(--c-amber-600);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.price-tiers.is-placeholder .price-tier--individual .pt-price::after {
  content: none;
}

/* Zeile/Hinweis für den Belegmengen-Aufschlag (V2 5.2) */
.price-tiers-surcharge {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: var(--c-navy-050);
  border-left: 4px solid var(--c-amber-500);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--c-ink-700);
}

.price-tiers-surcharge .icon {
  color: var(--c-amber-600);
  flex-shrink: 0;
}

.price-tiers-surcharge strong {
  color: var(--c-navy-700);
}

/* ==========================================================================
   V2-4  Rezensionen  .reviews / .review-card   (V2 6.)
   --------------------------------------------------------------------------
   Statisch gerendert, KEIN Drittanbieter-Skript, kein Embed, kein Cookie.
   Sterne aus dem eigenen Icon-Set (SVG, data-icon="star").

   Markup:
   <div class="reviews">
     <article class="review-card">
       <p class="review-stars" role="img" aria-label="5 von 5 Sternen">
         <span class="icon" data-icon="star"></span> …5×…
       </p>
       <blockquote class="review-text"><p>„…"</p></blockquote>
       <p class="review-meta">
         <span class="review-name">M. K.</span>
         <time class="review-date" datetime="2026-05-12">Mai 2026</time></p>
     </article> …
   </div>
   <p class="reviews-source">
     <a href="…Google-Unternehmensprofil…" target="_blank" rel="noopener">
       Alle Bewertungen bei Google ansehen</a></p>
   ========================================================================== */
/* Wie .trust-values wird auch .reviews im CMS als Klasse auf die <section>
   gesetzt (<section class="section section--soft reviews" hidden>) und
   umschliesst ein .grid-Raster mit [data-reviews]. Die Klasse selbst trägt
   deshalb kein Layout. */
.reviews .grid,
.reviews-list,
[data-reviews] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 600px) {
  .reviews .grid,
  .reviews-list,
  [data-reviews] {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
  }
}

@media (min-width: 1024px) {
  .reviews .grid,
  .reviews-list,
  [data-reviews] {
    grid-template-columns: repeat(3, 1fr);
  }
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: var(--s-5);
  transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}

.review-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Sterne — reines CSS/SVG aus dem eigenen Icon-Set */
.review-stars {
  display: flex;
  gap: 2px;
  margin: 0;
  /* Designsystem Rev. 3: Sterne sind informationstragende Grafik und brauchen
     mindestens 3:1. Amber-500 auf Weiss liegt bei 2,7:1 -> Amber-600. */
  color: var(--c-amber-600);
}

.review-stars .icon {
  width: 18px;
  height: 18px;
}

/* Der Stern wird gefüllt dargestellt (Icon-Set liefert Outline). */
.review-stars .icon svg {
  fill: currentColor;
}

/* nicht vergebener Stern */
.review-stars .icon.is-empty {
  color: var(--c-ink-300);
}

.review-stars .icon.is-empty svg {
  fill: none;
}

.review-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--c-ink-700);
}

.review-text p {
  margin: 0;
}

.review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  margin: auto 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  font-size: 0.875rem;
}

.review-name {
  font-weight: 600;
  color: var(--c-navy-700);
}

.review-date {
  color: var(--c-ink-500);
}

/* Textlink zum Google-Unternehmensprofil (externer Link, kein Embed) */
.reviews-source {
  margin-top: var(--s-5);
  font-size: 0.9375rem;
}

.reviews-source a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-navy-600);
  font-weight: 600;
}

.reviews-source a:hover {
  color: var(--c-navy-700);
}

/* ==========================================================================
   V2-5  Karte „Individuelle Lösung"  .card--individual   (V2 1.3)
   --------------------------------------------------------------------------
   Abgesetzt durch einen Bernstein-Akzentrahmen (#E08A1E) — bewusst KEINE
   Vollfläche, damit die Karte sich vom Leistungsraster abhebt, ohne den
   Kontrast der Fließtexte zu gefährden (weisser Text auf Bernstein wäre
   laut Designsystem 2.6 unzulässig).
   Markup: <a class="card card--link card--individual" …> wie die übrigen
   Leistungskarten.
   ========================================================================== */
.card--individual {
  border: 2px solid var(--c-amber-500);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
}

/* Die Karte wird im CMS teils als <a class="card card--individual"> ohne
   .card--link gepflegt — dann fehlt der Unterstreichungs-Reset der
   Link-Karte. Hier abfangen, damit der Fliesstext nicht unterstrichen ist. */
a.card--individual {
  text-decoration: none;
  color: inherit;
  transition: box-shadow 150ms ease-out, border-color 150ms ease-out,
    transform 150ms ease-out;
}

a.card--individual:hover {
  transform: translateY(-2px);
}

.card--individual .card-icon {
  background: var(--c-amber-100);
  color: var(--c-amber-600);
}

.card--individual .card-link-more {
  color: var(--c-amber-600);
}

.card--individual:hover {
  border-color: var(--c-amber-600);
  box-shadow: var(--shadow-md);
}

.card--individual:hover .card-link-more {
  color: var(--c-amber-600);
}

/* kleines Label oben rechts — optional:
   <span class="card-individual-tag">Individuell</span> */
.card-individual-tag {
  align-self: flex-start;
  margin-bottom: var(--s-3);
  padding: 2px var(--s-3);
  border-radius: var(--r-pill);
  background: var(--c-amber-100);
  color: var(--c-amber-600);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==========================================================================
   V2-6  KI-Kennzeichnung  .notice--ai / .badge--ai   (V2 7.)
   --------------------------------------------------------------------------
   Freiwilliger Transparenz-Hinweis für KI-unterstützte Beiträge. Kein
   Warn-, sondern ein Informationsstil — daher Navy-Ton, nicht Amber.

   Markup Hinweis (Artikelende):
   <div class="notice notice--ai">
     <span class="notice-icon"><span class="icon" data-icon="sparkles"></span></span>
     <div><p class="box-title">Hinweis zur Erstellung</p>
       <p>Dieser Beitrag wurde mit KI-Unterstützung erstellt und
          redaktionell geprüft.</p></div></div>

   Markup Badge (Artikel-Karte / Kopfzeile):
   <span class="badge--ai"><span class="icon" data-icon="sparkles"></span>
     KI-unterstützt</span>
   ========================================================================== */
.notice--ai {
  background: var(--c-navy-050);
  border-left: 4px solid var(--c-navy-600);
  font-size: 0.9375rem;
}

.notice--ai .notice-icon {
  color: var(--c-navy-600);
}

.notice--ai .box-title,
.notice--ai h4 {
  color: var(--c-navy-700);
}

.badge--ai {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 3px var(--s-3);
  border: 1px solid var(--c-navy-100);
  border-radius: var(--r-pill);
  background: var(--c-navy-050);
  color: var(--c-navy-700);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.badge--ai .icon {
  width: 14px;
  height: 14px;
  color: var(--c-navy-600);
}

/* ==========================================================================
   V2 — gemeinsame Fokus- und Bewegungsregeln
   ========================================================================== */
.trust-value a:focus-visible,
.price-tiers a:focus-visible,
.review-card a:focus-visible,
.reviews-source a:focus-visible,
.card--individual:focus-visible {
  outline: 2px solid var(--c-navy-600);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  .review-card,
  .card--individual {
    transition: none;
  }
  .review-card:hover,
  .card--individual:hover {
    transform: none;
  }
}

/* ==========================================================================
   Mehrstufiges Angebotsformular (Designsystem 11.4)
   ========================================================================== */
.form-steps {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: var(--s-5);
}

@media (min-width: 768px) {
  .form-steps {
    padding: var(--s-7);
  }
}

/* Stepper-Leiste */
.stepper-bar {
  display: flex;
  align-items: center;
  margin-bottom: var(--s-6);
}

.stepper-bar-item {
  display: flex;
  align-items: center;
  flex: 1;
}

.stepper-bar-item:last-child {
  flex: 0;
}

.stepper-dot {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

.stepper-dot .sd-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-navy-100);
  color: var(--c-navy-700);
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.stepper-dot .sd-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-ink-500);
  display: none;
}

@media (min-width: 600px) {
  .stepper-dot .sd-label {
    display: inline;
  }
}

.stepper-bar-line {
  flex: 1;
  height: 2px;
  background: var(--c-navy-100);
  margin-inline: var(--s-3);
}

/* aktueller Schritt */
.stepper-bar-item.is-current .sd-circle {
  background: var(--c-amber-500);
  color: var(--c-navy-900);
}

.stepper-bar-item.is-current .sd-label {
  color: var(--c-navy-700);
}

/* erledigter Schritt */
.stepper-bar-item.is-done .sd-circle {
  background: var(--c-navy-700);
  color: #fff;
}

.stepper-bar-item.is-done .stepper-bar-line {
  background: var(--c-navy-700);
}

/* mobile Fortschritts-Anzeige */
.step-progress-mobile {
  display: none;
  margin-bottom: var(--s-5);
}

@media (max-width: 599px) {
  .stepper-bar {
    display: none;
  }
  .step-progress-mobile {
    display: block;
  }
}

.step-progress-mobile .spm-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-navy-700);
  margin-bottom: var(--s-2);
}

.step-progress-mobile .spm-bar {
  height: 6px;
  background: var(--c-navy-100);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.step-progress-mobile .spm-fill {
  height: 100%;
  background: var(--c-amber-500);
  border-radius: var(--r-pill);
  transition: width 200ms ease-out;
}

/* Schritt-Panels */
.form-step-panel {
  display: none;
}

.form-step-panel.is-active {
  display: block;
}

.form-step-panel h3 {
  margin-bottom: var(--s-2);
}

.form-step-panel > p {
  margin-bottom: var(--s-5);
  color: var(--c-ink-700);
}

/* Navigations-Buttons */
.form-step-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.form-step-nav .btn-back {
  margin-right: auto;
}

@media (max-width: 599px) {
  .form-step-nav {
    flex-direction: column-reverse;
  }
  .form-step-nav .btn {
    width: 100%;
  }
}

/* Trust-Spalte (Sticky) */
.form-trust-aside {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

@media (min-width: 1024px) {
  .form-trust-aside {
    position: sticky;
    top: 104px;
  }
}

/* Vorbefüllt-Hinweis */
.prefill-note {
  display: none;
  background: var(--c-success-bg);
  border-left: 4px solid var(--c-success);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  font-size: 0.9375rem;
}

.prefill-note.is-visible {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}

.prefill-note .icon {
  color: var(--c-success);
  flex-shrink: 0;
}

/* ==========================================================================
   K5  Vorher-Nachher-Vergleich  .compare   (Kundendokument 07.09.2026)
   --------------------------------------------------------------------------
   Für das Rechenbeispiel „80 Eingangsrechnungen im Monat" auf der Seite
   „Prozess- & Strukturoptimierung": links der Ist-Zustand, rechts das
   Ergebnis nach der Optimierung, darunter eine abgesetzte Ergebniszeile.

   Die beiden Spalten sind Inhaltskarten in der Formsprache von .card
   (1px-Rahmen, --r-md, --shadow-sm, --s-5/--s-6 Innenabstand), aber ohne
   Hover-Anhebung — es ist nichts anklickbar. Unterschieden werden sie nur
   über Fläche und Marker: „Vorher" steht gedämpft auf --c-bg-soft mit
   neutralen Bullets, „Nachher" steht auf --c-surface mit dem 4px-Bernstein-
   Balken oben (dieselbe Auszeichnung wie .card--b2b), stärkerem Schatten und
   den regulären Bernstein-Bullets. Amber bleibt damit auch hier die Farbe
   des erwünschten Zustands, nicht bloße Dekoration.

   Kontrast: Label und Fließtext laufen in Navy-700 bzw. Ink-700/-500 —
   alle über 5:1. Bernstein trägt nie Fließtext (--c-amber-600 erreicht auf
   Weiß nur 3.7:1) und wird deshalb ausschließlich für Icon und Balken
   verwendet (nicht-textliches Element, AA ab 3:1).

   Markup:
   <div class="compare">
     <div class="compare-col compare-col--vorher">
       <span class="compare-label"><span class="icon"
         data-icon="alert-triangle"></span>Vorher</span>
       <h3 class="t-h4">…</h3>
       <ul class="list-bullets"><li>…</li></ul></div>
     <div class="compare-col compare-col--nachher"> … </div>
   </div>
   <p class="compare-ergebnis"><strong>Das Ergebnis:</strong> …</p>
   ========================================================================== */
.compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

/* Ab Tablet zwei Spalten nebeneinander. align-items bleibt beim Grid-Default
   „stretch", damit beide Karten trotz unterschiedlich langer Listen exakt
   gleich hoch stehen. */
@media (min-width: 768px) {
  .compare {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
  }
}

.compare-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  /* Lang-Wort-Schutz wie bei .card--umfang („Eingangsrechnungen") */
  min-width: 0;
}

@media (min-width: 1024px) {
  .compare-col {
    padding: var(--s-6);
  }
}

.compare-col h3 {
  margin-bottom: var(--s-4);
  text-wrap: balance;
}

.compare-col .list-bullets li {
  font-size: 0.9375rem; /* Body-S 15px */
  line-height: 1.55;
  color: var(--c-ink-700);
  overflow-wrap: break-word;
}

/* Label über der Überschrift: Overline-Stufe (Designsystem 3.3), aber in der
   jeweiligen Zustandsfarbe statt pauschal Bernstein. */
.compare-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.compare-label .icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* --- Vorher: gedämpft, neutral ---------------------------------------- */
.compare-col--vorher {
  background: var(--c-bg-soft);
  box-shadow: none;
}

.compare-col--vorher .compare-label,
.compare-col--vorher .compare-label .icon {
  color: var(--c-ink-500); /* 5.1:1 auf --c-bg-soft */
}

.compare-col--vorher h3 {
  color: var(--c-ink-700);
}

/* Bullets ohne Bernstein — der Ist-Zustand ist kein Angebot. */
.compare-col--vorher .list-bullets li::before {
  background: var(--c-ink-500);
}

/* --- Nachher: in der Akzentfarbe hervorgehoben ------------------------- */
.compare-col--nachher {
  background: var(--c-surface);
  border-top: 4px solid var(--c-amber-500);
  box-shadow: var(--shadow-md);
}

.compare-col--nachher .compare-label {
  color: var(--c-navy-700); /* 12.8:1 auf Weiß */
}

.compare-col--nachher .compare-label .icon {
  color: var(--c-amber-600); /* nicht-textlich, 3.7:1 auf Weiß */
}

/* --- Ergebniszeile ----------------------------------------------------- */
.compare-ergebnis {
  max-width: var(--container-read);
  margin: var(--s-6) auto 0;
  padding-top: var(--s-5);
  text-align: center;
  color: var(--c-ink-700);
  text-wrap: pretty;
}

/* Bernstein-Strich als Trenner: dieselbe Formsprache wie der 8x2px-Marker in
   .card--umfang, nur breiter und zentriert. */
.compare-ergebnis::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 0 auto var(--s-4);
  background: var(--c-amber-500);
}

.compare-ergebnis strong {
  color: var(--c-navy-700);
}