/* ============================================================
   LUMI Haushaltshilfe Köln — style.css
   Zielumgebung: All-Inkl Shared Hosting, Apache + PHP 8
   Keine externen CDNs, keine Build-Tools
   ============================================================ */

/* ---- @font-face (selbst gehostet, DSGVO-konform) ----
   TODO: WOFF2-Dateien in /assets/fonts/ ablegen
   Quelle: fonts.google.com/specimen/Source+Sans+3
*/
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- CSS-Variablen ---- */
:root {
  /* TODO: Exakten Markenwert nach Logo-Lieferung anpassen */
  --c-primary:       #2AB5B0;
  --c-primary-dark:  #1E8F8B;
  --c-primary-light: #E6F7F6;
  --c-text:          #1A2326;
  --c-text-muted:    #4A5C62;
  --c-bg:            #FFFFFF;
  --c-bg-soft:       #F7F5F1;
  --c-border:        rgba(0,0,0,0.10);
  --c-online:        #22C55E;
  --c-offline:       #94A3B8;

  --radius:    16px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.07);
  --shadow-md: 0 6px 28px rgba(0,0,0,0.10);

  --font: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-size-base: 17px;
  --max-w: 1160px;
  --pad-x: clamp(18px, 5vw, 48px);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--font-size-base); scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 767px) { body { padding-bottom: 72px; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; }

.container { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  transition: box-shadow 0.25s;
}
.site-header.scrolled { box-shadow: var(--shadow-md); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-block: 12px;
}

/* Logo */
.logo { display: flex; align-items: center; text-decoration: none; }
.logo__img { width: 48px; height: 48px; object-fit: contain; display: block; }
.logo__mark { font-size: 1.5rem; font-weight: 800; color: var(--c-primary-dark); letter-spacing: -0.03em; }
.logo__sub { font-size: 0.75rem; font-weight: 500; color: var(--c-text-muted); letter-spacing: 0.04em; text-transform: uppercase; }

/* Header-Rechts */
.header-right { display: flex; align-items: center; gap: 12px; }

/* Profilbild + Status */
.header-profile {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
  padding: 4px 8px 4px 4px;
  border-radius: 100px;
  transition: background 0.2s;
}
.header-profile:hover { background: var(--c-primary-light); }

.header-avatar-wrap {
  position: relative; flex-shrink: 0;
  width: 48px; height: 48px;
}
.header-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-primary-light);
}
.header-status-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2.5px solid var(--c-bg);
  background: var(--c-offline);
  transition: background 0.3s;
}
.header-status-dot.online { background: var(--c-online); }

/* Pulsier-Animation für Online-Status */
@keyframes pulse-online {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}
.header-status-dot.online { animation: pulse-online 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .header-status-dot.online { animation: none; }
}

.header-status-text { display: flex; flex-direction: column; line-height: 1.3; }
.header-status-line1 { font-size: 0.8125rem; font-weight: 700; color: var(--c-offline); }
.header-status-line1.online { color: var(--c-online); }
.header-status-line2 { font-size: 0.75rem; color: var(--c-text-muted); }

/* CTA-Button im Header */
.btn-header-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 10px 20px;
  border: none; border-radius: var(--radius);
  background: var(--c-primary-dark); color: #fff;
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
  transition: background 0.2s, transform 0.12s;
}
.btn-header-cta:hover { background: var(--c-primary); transform: translateY(-1px); }

/* Tablet: etwas kompakter */
@media (max-width: 860px) {
  .btn-header-cta { padding: 10px 14px; font-size: 0.875rem; }
}

/* Mobile: Header-CTA einzeilig, niemals umbrechen */
@media (max-width: 600px) {
  .header-status-text { display: none; }
  /* CTA zeigt nur "prüfen" auf Mobile ("Anspruch kostenlos" ausgeblendet) */
  .btn-header-cta {
    padding: 0 14px;
    font-size: 1rem;       /* 16px, gut lesbar */
    white-space: nowrap;   /* KEIN Umbruch */
    text-align: center;
    min-height: 44px;
    height: 44px;
    line-height: 44px;
    max-width: none;       /* keine Breitenbeschränkung */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Header-CTA: kurzer Text "Kostenlos prüfen" ist bereits gesetzt */
}

/* Sehr kleines Mobile: etwas kompakter */
@media (max-width: 380px) {
  .btn-header-cta { font-size: 0.9375rem; padding: 0 10px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { background: var(--c-bg); padding-block: clamp(40px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 860px) {
  .hero-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; }
}

/* Mobile: Funnel zuerst (order 1), Bild danach (order 2) */
.hero-funnel-wrap { order: 1; }
.hero-image       { order: 2; }
/* Desktop: Bild links, Funnel rechts */
@media (min-width: 860px) {
  .hero-image       { order: 1; }
  .hero-funnel-wrap { order: 2; }
}

.hero-image img {
  width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md);
  aspect-ratio: 4/3; object-fit: cover; object-position: center top;
}
.hero-image__caption { font-size: 0.75rem; color: var(--c-text-muted); text-align: center; margin-top: 8px; font-style: italic; }

.hero-headline { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 800; line-height: 1.2; color: var(--c-text); margin-bottom: 14px; letter-spacing: -0.02em; }
.hero-headline em { font-style: normal; color: var(--c-primary-dark); }
.hero-subline { font-size: 1.0625rem; color: var(--c-text-muted); margin-bottom: 28px; line-height: 1.65; }

/* ============================================================
   FUNNEL
   ============================================================ */
.funnel { background: var(--c-bg); border: 1.5px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; }

.funnel-progress { height: 5px; background: var(--c-primary-light); }
.funnel-progress__fill { height: 100%; background: var(--c-primary-dark); border-radius: 0 3px 3px 0; transition: width 0.35s ease; }

.funnel-body { padding: clamp(24px, 4vw, 36px); }

.funnel-step-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }

/* Fortschrittsbalken in den Schritten 2-4 */
.funnel-step-header--with-progress {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 20px;
}
.funnel-step-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.funnel-step-progress-bar {
  height: 6px;
  background: var(--c-primary-light);
  border-radius: 3px;
  overflow: hidden;
}
.funnel-step-progress-bar__fill {
  height: 100%;
  background: var(--c-primary-dark);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* Einleitungstext Schritt 1 */
.funnel-intro {
  margin-bottom: 16px;
}
.funnel-intro__text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-primary-dark);
  line-height: 1.4;
  margin: 0;
}
.funnel-step-label { font-size: 0.8125rem; font-weight: 600; color: var(--c-text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.funnel-back-btn {
  display: none; align-items: center; gap: 4px;
  background: none; border: none; font-size: 0.875rem; color: var(--c-text-muted);
  padding: 4px 8px; border-radius: var(--radius-sm); min-height: 44px;
  transition: color 0.2s, background 0.2s;
}
.funnel-back-btn:hover { color: var(--c-primary-dark); background: var(--c-primary-light); }
.funnel-back-btn.visible { display: inline-flex; }

.funnel-question { font-size: clamp(1.0625rem, 2vw, 1.25rem); font-weight: 700; color: var(--c-text); margin-bottom: 20px; line-height: 1.35; }

.funnel-tiles { display: grid; gap: 12px; }
.funnel-tiles--2col { grid-template-columns: 1fr 1fr; }
.funnel-tiles--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 480px) {
  .funnel-tiles--2col, .funnel-tiles--3col { grid-template-columns: 1fr; }
}

.funnel-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 72px; padding: 14px 16px;
  border: 2px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-bg); font-size: 1rem; font-weight: 600; color: var(--c-text);
  text-align: center; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
/* Mobile: Icon links, Text rechts, volle Breite */
@media (max-width: 767px) {
  .funnel-tile {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    min-height: 64px;
    padding: 14px 16px;
    gap: 12px;
  }
  .funnel-tile__icon { flex-shrink: 0; }
}
.funnel-tile:hover { border-color: var(--c-primary-dark); background: var(--c-primary-light); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.funnel-tile.selected { border-color: var(--c-primary-dark); background: var(--c-primary-dark); color: #fff; }
.funnel-tile.selected svg { color: #fff; }
.funnel-tile svg { color: var(--c-primary-dark); flex-shrink: 0; }
.funnel-tile__icon { width: 32px; height: 32px; border-radius: 50%; background: var(--c-primary-light); display: flex; align-items: center; justify-content: center; }
.funnel-tile.selected .funnel-tile__icon { background: rgba(255,255,255,0.2); }

.funnel-tiles--multi .funnel-tile { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 60px; text-align: left; }
.funnel-tile__check { width: 22px; height: 22px; min-width: 22px; border-radius: 6px; border: 2px solid var(--c-border); display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, background 0.15s; }
.funnel-tile.selected .funnel-tile__check { border-color: #fff; background: rgba(255,255,255,0.25); }
.funnel-tile.selected .funnel-tile__check svg { display: block; }
.funnel-tile__check svg { display: none; color: #fff; }

.funnel-motivator { display: none; background: var(--c-primary-light); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px; font-size: 0.9375rem; color: var(--c-primary-dark); font-weight: 600; line-height: 1.5; }
.funnel-motivator.visible { display: block; }

.funnel-next-btn { display: none; width: 100%; margin-top: 16px; min-height: 60px; padding: 14px 24px; border: none; border-radius: var(--radius); background: var(--c-primary-dark); color: #fff; font-size: 1.0625rem; font-weight: 700; transition: background 0.2s, transform 0.12s; }
.funnel-next-btn:hover { background: var(--c-primary); transform: translateY(-1px); }
.funnel-next-btn.visible { display: block; }

.funnel-tiles--ort { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 480px) { .funnel-tiles--ort { grid-template-columns: 1fr; } }

/* ============================================================
   ERGEBNIS-SCREEN
   ============================================================ */
.result-summary {
  background: var(--c-primary-light);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.result-summary__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-primary-dark);
  margin-bottom: 10px;
}
.result-summary__items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Jedes Item: Häkchen + Label + Wert sauber nebeneinander */
.result-summary__items li {
  display: grid;
  grid-template-columns: 18px auto 1fr;
  align-items: baseline;
  gap: 6px 8px;
  font-size: 0.9375rem;
  color: var(--c-text);
  line-height: 1.5;
}
.result-summary__items li svg {
  color: var(--c-primary-dark);
  flex-shrink: 0;
  margin-top: 3px;
}
.result-summary__items li strong {
  white-space: nowrap;
  color: var(--c-text-muted);
  font-weight: 600;
}

/* Geld-Hinweis: kein Versalien-Label, ruhiger Stil */
.result-kasse {
  background: var(--c-bg);
  border: 1.5px solid var(--c-primary-dark);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.result-kasse__label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--c-primary-dark);
  margin-bottom: 6px;
  /* Kein text-transform uppercase mehr */
}
.result-kasse__text {
  font-size: 0.9375rem;
  color: var(--c-text);
  line-height: 1.65;
}

.result-form-title { font-size: 1.125rem; font-weight: 700; margin-bottom: 16px; }
.form-row { margin-bottom: 14px; }
.form-label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 5px; color: var(--c-text); }
.form-label .req { color: var(--c-primary-dark); }
.form-input, .form-select {
  width: 100%; min-height: 60px; padding: 14px 16px;
  border: 1.5px solid var(--c-border); border-radius: var(--radius);
  font-family: var(--font); font-size: 1rem; color: var(--c-text);
  background: var(--c-bg); appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus, .form-select:focus { outline: none; border-color: var(--c-primary-dark); box-shadow: 0 0 0 3px rgba(30,143,139,0.15); }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5C62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; cursor: pointer; }
.form-input.error { border-color: #C0392B; }

.submit-btn { width: 100%; min-height: 64px; padding: 16px 24px; border: none; border-radius: var(--radius); background: var(--c-primary-dark); color: #fff; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; transition: background 0.2s, transform 0.12s; margin-top: 4px; }
.submit-btn:hover { background: var(--c-primary); transform: translateY(-1px); }
.submit-btn:active { transform: scale(0.98); }

.form-antispam { font-size: 0.8125rem; color: var(--c-text-muted); margin-top: 10px; text-align: center; line-height: 1.5; }
.form-antispam a { color: var(--c-primary-dark); text-decoration: underline; }
.hp-field { display: none !important; visibility: hidden; }

/* Fehler-Meldung vom Server */
.form-server-error { background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px; font-size: 0.9375rem; color: #B91C1C; display: none; }
.form-server-error.visible { display: block; }

/* ============================================================
   ERFOLGS-SCREEN
   ============================================================ */
.funnel-success { display: none; text-align: center; padding: 8px 0; }
.funnel-success.visible { display: block; }
.success-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--c-primary-light); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.success-icon svg { color: var(--c-primary-dark); }
.success-title { font-size: 1.375rem; font-weight: 800; margin-bottom: 12px; color: var(--c-text); }
.success-text { font-size: 1rem; color: var(--c-text-muted); margin-bottom: 8px; line-height: 1.65; }
.success-highlight { background: var(--c-primary-light); border-radius: var(--radius-sm); padding: 16px 18px; margin: 20px 0; font-size: 0.9375rem; color: var(--c-text); line-height: 1.6; text-align: left; }
.success-highlight strong { color: var(--c-primary-dark); }
.success-direct { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--c-border); }
.success-direct p { font-size: 0.9375rem; color: var(--c-text-muted); margin-bottom: 10px; }
.success-tel { display: inline-flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 700; color: var(--c-primary-dark); text-decoration: none; transition: color 0.2s; }
.success-tel:hover { color: var(--c-primary); }

/* ============================================================
   TRUST-SEKTION
   Hintergrund: Weiß (kein Creme/Beige)
   Karten: gleicher Stil wie Funnel-Karte (border, shadow, radius)
   ============================================================ */
.trust-section {
  background: var(--c-bg);
  padding-block: clamp(48px, 7vw, 80px);
}
.trust-section__heading {
  text-align: center;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: var(--c-text);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* Sub-Heading */
.trust-section__sub {
  text-align: center;
  font-size: 1rem;
  color: var(--c-text-muted);
  margin-bottom: 36px;
}

/* Abstands-Raster für die ganze Sektion */
.trust-section > .container > * + * { margin-top: 24px; }

/* Karten: gleicher Stil wie Funnel-Karte */
.trust-badge {
  background: var(--c-bg);
  border-radius: var(--radius);
  padding: 20px 18px;
  box-shadow: var(--shadow-md); /* gleicher Schatten wie Funnel */
  border: 1.5px solid var(--c-border); /* gleiche Border wie Funnel */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  text-align: center;
}
.trust-badge__placeholder-tag { position: absolute; top: 8px; right: 8px; background: #FFF3CD; color: #856404; font-size: 0.625rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.trust-badge__icon { width: 52px; height: 52px; border-radius: 12px; background: var(--c-primary-light); display: flex; align-items: center; justify-content: center; }
.trust-badge__icon svg { color: var(--c-primary-dark); }
.trust-badge__title { font-size: 0.875rem; font-weight: 700; color: var(--c-text); line-height: 1.3; }
.trust-badge__sub { font-size: 0.75rem; color: var(--c-text-muted); line-height: 1.4; }

/* Alte Badge-Grid-Klassen (nicht mehr genutzt, aber nicht löschen) */
.trust-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 0; }
@media (min-width: 640px) { .trust-badges { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) { .trust-badges--3 { grid-template-columns: repeat(3, 1fr); } }

.trust-statements { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .trust-statements { grid-template-columns: repeat(3, 1fr); } }

/* Sub-Heading der Trust-Sektion */
.trust-section__sub {
  text-align: center;
  font-size: 1rem;
  color: var(--c-text-muted);
  margin-top: -20px;
  margin-bottom: 32px;
}

/* Google-Badge (klassisches Review-Badge) */
.trust-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--c-bg);
  border-radius: var(--radius);
  padding: 20px 28px;
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--c-border);
  flex-wrap: wrap;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s;
}
.trust-google:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.13); }

.trust-google__logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.trust-google__middle {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.trust-google__top-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.trust-google__stars {
  display: flex;
  gap: 2px;
}
.trust-google__stars svg {
  width: 22px;
  height: 22px;
}

.trust-google__right {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
}
.trust-google__score {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--c-text);
  line-height: 1;
  letter-spacing: -0.04em;
}
.trust-google__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-text-muted);
}
.trust-google__count {
  font-size: 0.75rem;
  color: var(--c-text-muted);
}

/* Siegel-Reihe */
.trust-siegel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
@media (min-width: 640px) {
  .trust-siegel { grid-template-columns: repeat(3, 1fr); }
}
.trust-siegel__item {
  background: var(--c-bg);
  border-radius: var(--radius);
  padding: 20px 18px;
  box-shadow: var(--shadow-md); /* gleicher Schatten wie Funnel */
  border: 1.5px solid var(--c-border); /* gleiche Border wie Funnel */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trust-siegel__logo-wrap {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.trust-siegel__logo {
  max-height: 80px;  /* DEKRA-Siegel ist hochformatig */
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
.trust-siegel__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--c-text-muted);
}
.trust-siegel__text strong {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-text);
}
.trust-siegel__link {
  color: var(--c-primary-dark);
  text-decoration: underline;
  font-size: 0.8125rem;
}

/* Trennlinie */
.trust-divider {
  border: none;
  margin: 8px 0 28px;
}

/* Conversion-Abschluss der Trust-Sektion */
.trust-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
  padding-top: 28px;
  text-align: center;
}
.trust-cta__text {
  font-size: 1rem;
  color: var(--c-text-muted);
  font-weight: 500;
  margin: 0;
}
@media (max-width: 480px) {
  .trust-cta { flex-direction: column; gap: 12px; }
}

.trust-statement { display: flex; align-items: flex-start; gap: 12px; background: var(--c-bg); border-radius: var(--radius); padding: 18px 16px; box-shadow: var(--shadow-sm); }
.trust-statement__icon { width: 40px; height: 40px; min-width: 40px; border-radius: 10px; background: var(--c-primary-light); display: flex; align-items: center; justify-content: center; }
.trust-statement__icon svg { color: var(--c-primary-dark); }
.trust-statement__body h3 { font-size: 0.9375rem; font-weight: 700; margin-bottom: 3px; color: var(--c-text); }
.trust-statement__body p { font-size: 0.875rem; color: var(--c-text-muted); line-height: 1.5; }

/* ============================================================
   MOBILE STICKY-LEISTE
   ============================================================ */
.mobile-sticky { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 300; background: var(--c-bg); border-top: 1px solid var(--c-border); box-shadow: 0 -4px 20px rgba(0,0,0,0.12); padding: 10px 16px; gap: 10px; border-radius: 16px 16px 0 0; }
@media (max-width: 767px) { .mobile-sticky { display: flex; } }
.mobile-sticky__btn { flex: 1; min-height: 52px; border-radius: var(--radius); font-family: var(--font); font-size: 0.9375rem; font-weight: 700; cursor: pointer; border: none; transition: background 0.2s, transform 0.12s; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.mobile-sticky__btn--call { background: var(--c-bg-soft); color: var(--c-text); border: 1.5px solid var(--c-border); }
.mobile-sticky__btn--call:hover { background: var(--c-primary-light); }
.mobile-sticky__btn--call svg { color: var(--c-primary-dark); }
.mobile-sticky__btn--funnel { background: var(--c-primary-dark); color: #fff; }
.mobile-sticky__btn--funnel:hover { background: var(--c-primary); }

/* ============================================================
   LEISTUNGS-SEKTION
   Layout: 3 Karten, Bilder vollständig sichtbar (kein crop), 16px Radius
   Hintergrund: Weiß
   ============================================================ */
.leistungen-section {
  background: var(--c-bg);
  padding-block: clamp(48px, 7vw, 80px);
}

.leistungen-header {
  text-align: center;
  margin-bottom: 36px;
}
.leistungen-heading {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* Drei Karten: 3 Spalten Desktop, 1 Spalte Mobile */
.leistungen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 16px;
}
@media (min-width: 640px) {
  .leistungen-grid { grid-template-columns: repeat(3, 1fr); }
  .leistungen-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .leistungen-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Karte: 4:3-Bild oben, randlos, Text darunter, alle Karten gleich hoch */
.leistung-card {
  background: var(--c-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--c-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}
.leistung-card:hover {
  box-shadow: 0 10px 36px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}

/* Bild: 4:3, randlos bis an die Kartenkanten, einheitliches Ratio */
.leistung-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Kein border-radius oben — overflow:hidden auf .leistung-card übernimmt das */
}

.leistung-card__body {
  padding: 18px 20px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.leistung-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 6px;
  line-height: 1.3;
  /* Titel immer auf gleicher Höhe: min-height für zwei Zeilen */
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
}
.leistung-card__text {
  font-size: 1rem;
  color: var(--c-text-muted);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

/* Vierte Leistung: schmale Zeile */
.leistung-extra {
  background: var(--c-primary-light);
  border-radius: var(--radius);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.leistung-extra__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-text);
  margin: 0;
  white-space: nowrap;
}
.leistung-extra__text {
  font-size: 1rem;
  color: var(--c-text-muted);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 560px) {
  .leistung-extra { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ============================================================
   GELD-SEKTION (Entlastungsbetrag)
   Hintergrund: Weiß (wie Trust-Sektion)
   Karten: exakt gleicher Stil wie Trust-Sektion und Funnel
   Jahreszahlen und Beträge jährlich prüfen und pflegen!
   ============================================================ */
.money-section {
  background: var(--c-primary-light);
  padding-block: clamp(48px, 7vw, 80px);
}

/* Sektionskopf: gleicher Aufbau wie Trust-Sektion */
.money-header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: 36px;
}
.money-heading {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.money-heading__accent { color: var(--c-primary-dark); }
.money-sub {
  font-size: 1.0625rem;
  color: var(--c-text-muted);
  line-height: 1.65;
}

/* Haupt-Zahlen-Karte: 131 € links | Trennlinie | Zähler rechts */
.money-hero-card {
  background: var(--c-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--c-border);
  margin-bottom: 20px;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1px 1fr;
  align-items: stretch;
  overflow: hidden;
}
@media (max-width: 640px) {
  .money-hero-card {
    grid-template-columns: 1fr;
  }
}

.money-hero-card__amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 28px 32px;
  text-align: center;
  min-width: 160px;
}
.money-hero-card__prefix {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-text-muted);
  letter-spacing: 0.02em;
}
.money-hero-card__number {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--c-primary-dark);
}
.money-hero-card__period {
  font-size: 0.9375rem;
  color: var(--c-text-muted);
  font-weight: 500;
}

/* Trennlinie zwischen 131 € und Zähler */
.money-hero-card__sep {
  background: var(--c-border);
  width: 1px;
  align-self: stretch;
}
@media (max-width: 640px) {
  .money-hero-card__sep {
    width: 100%;
    height: 1px;
  }
}

/* Textrechnung-Zähler */
.money-counter {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

/* Zeile 1: "Januar bis Juli 2026: 7 Monate x 131 €" */
.money-counter__calc {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.4;
  margin: 0;
}

/* Zeile 2: "= bis zu 917 €" */
.money-counter__result {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.money-counter__equals {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-text-muted);
}
.money-counter__prefix {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-text-muted);
}
.money-counter__value {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--c-primary-dark);
  letter-spacing: -0.03em;
  line-height: 1;
}
.money-counter__sub {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text);
  margin: 0;
}

/* Zeile 3: Kontext */
.money-counter__note {
  font-size: 0.9375rem;
  color: var(--c-text-muted);
  line-height: 1.5;
  margin: 4px 0 0;
}
.money-counter__foot {
  font-size: 0.8125rem;
  color: var(--c-text-muted);
  margin: 2px 0 0;
}

/* CTA Mikrozeile */
.money-cta__micro {
  font-size: 0.9375rem;
  color: var(--c-text-muted);
  margin-top: 10px;
  text-align: center;
}

/* Fakten-Reihe: 2 Karten */
.money-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (min-width: 560px) {
  .money-facts { grid-template-columns: 1fr 1fr; }
}

.money-fact-card {
  background: var(--c-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--c-border);
  padding: 24px 22px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.money-fact-card__stat {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}
.money-fact-card__number {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--c-primary-dark);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.money-fact-card__body {
  font-size: 1rem;
  color: var(--c-text);
  line-height: 1.6;
}
.money-fact-card__body strong { color: var(--c-text); }

/* Verhinderungspflege: untergeordnetes Element, kein Chip-Label */
.money-extra {
  background: var(--c-primary-light);
  border-radius: var(--radius);
  border: 1.5px solid rgba(42,181,176,0.25);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.money-extra__heading {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 6px;
}
.money-extra__amount {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--c-primary-dark);
  letter-spacing: -0.02em;
}
.money-extra__text {
  font-size: 1rem;
  color: var(--c-text-muted);
  line-height: 1.6;
  margin-top: 6px;
}

/* Erklär-Zeile */
.money-process {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--c-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--c-border);
  padding: 18px 20px;
  margin-bottom: 28px;
}
.money-process__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--c-primary-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary-dark);
}
.money-process__text {
  font-size: 1rem;
  color: var(--c-text);
  line-height: 1.65;
  margin: 0;
}

/* CTA */
.money-cta { text-align: center; }

/* ============================================================
   FUNNEL-CONVERSION-ELEMENTE
   ============================================================ */

/* Gesicht am Kontaktschritt */
.funnel-contact-face {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-primary-light);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.funnel-contact-face__avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}
.funnel-contact-face__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-primary-light);
}
.funnel-contact-face__dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--c-bg);
  background: var(--c-offline);
}
.funnel-contact-face__dot.online { background: var(--c-online); }
.funnel-contact-face__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.funnel-contact-face__text strong { color: var(--c-text); }
.funnel-contact-face__text span { color: var(--c-text-muted); font-size: 0.8125rem; }

/* Google-Trust unter Submit-Button */
.funnel-google-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--c-text-muted);
  margin-top: 8px;
}
.funnel-google-trust img { flex-shrink: 0; }

/* Feld-Fehlermeldung */
.form-field-error {
  display: block;
  font-size: 0.875rem;
  color: #C0392B;
  margin-top: 4px;
  line-height: 1.4;
}

/* Erfolgs-Screen Mini-Abfolge */
.success-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}
.success-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--c-text);
  line-height: 1.5;
}
.success-step__num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-primary-dark);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ============================================================
   ABLAUF-SEKTION (So einfach geht es)
   Hintergrund: heller Türkis-Tint
   Karten: gleicher Stil wie übrige Seite
   ============================================================ */
.steps-section {
  background: var(--c-bg);
  padding-block: clamp(48px, 7vw, 72px);
}

.steps-header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: 36px;
}
.steps-heading {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.steps-heading__accent {
  color: var(--c-primary-dark);
}

/* Zweispaltiges Layout: Schritte links, Kontakt-Block rechts */
.steps-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
}
@media (max-width: 767px) {
  .steps-layout { grid-template-columns: 1fr; }
}

/* Kontakt-Block rechts */
.steps-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--c-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--c-border);
  padding: 28px 24px;
  min-width: 200px;
  text-align: center;
}
.steps-contact__avatar-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.steps-contact__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-primary-light);
}
.steps-contact__dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2.5px solid var(--c-bg);
  background: var(--c-offline);
}
.steps-contact__dot.online { background: var(--c-online); }
.steps-contact__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text);
  margin: 0;
}
.steps-contact__status {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-offline);
  margin: 0;
}
.steps-contact__status.online { color: var(--c-online); }
.steps-contact__hours {
  font-size: 0.8125rem;
  color: var(--c-text-muted);
  margin: 0;
}
.steps-contact__btn {
  width: 100%;
  white-space: normal;
  text-align: center;
}
.steps-contact__micro {
  font-size: 0.8125rem;
  color: var(--c-text-muted);
  margin: 0;
  line-height: 1.4;
}

/* Schritt-Liste: untereinander, volle Breite (Desktop und Mobile identisch) */
.steps-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 36px;
  background: var(--c-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--c-border);
  overflow: hidden;
}

/* Schritt-Zeile */
.step-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 0;
}
.step-row + .step-row {
  border-top: 1px solid var(--c-border);
}

/* Nummer: groß, türkis, links */
.step-row__num {
  flex-shrink: 0;
  width: 72px;
  min-width: 72px;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--c-primary-dark);
  letter-spacing: -0.04em;
  line-height: 1;
  border-right: 1px solid var(--c-border);
  background: var(--c-primary-light);
  align-self: stretch;
}

.step-row__body {
  flex: 1;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.step-row__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
  margin: 0;
}

.step-row__text {
  font-size: 1rem;
  color: var(--c-text-muted);
  line-height: 1.6;
  margin: 0;
}

.step-row__trust {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-primary-dark);
  line-height: 1.5;
}

/* CTA */
.steps-cta {
  text-align: center;
}
.steps-cta__micro {
  font-size: 0.9375rem;
  color: var(--c-text-muted);
  margin-top: 10px;
}

/* ============================================================
   MOBILE: PAID-TRAFFIC-STANDARD
   Primäre Referenzbreiten: 360px, 390px, 430px
   Abstands-Skala: 8 12 16 24 32 48 56 64px
   ============================================================ */

/* Basis: Kein horizontales Scrollen */
html, body { overflow-x: hidden; max-width: 100%; }
* { min-width: 0; box-sizing: border-box; }
img, video, iframe, table { max-width: 100%; }

/* ---- Abstands-Variablen (Skala) ---- */
:root {
  --sp-1:  8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 56px;
  --sp-8: 64px;
}

@media (max-width: 767px) {

  /* ---- Grundlagen ---- */
  :root { --pad-x: 20px; }
  .container { padding-inline: 20px; }
  body { font-size: 17px; line-height: 1.55; padding-bottom: 88px; }

  /* ---- Typografie ---- */
  /* H1: 28-32px, max. 3 Zeilen */
  h1, .hero-headline {
    font-size: clamp(1.75rem, 8vw, 2rem);
    line-height: 1.2;
  }
  /* H2: 24-28px */
  h2, .money-heading, .trust-section__heading,
  .leistungen-heading, .steps-heading {
    font-size: clamp(1.5rem, 6vw, 1.75rem);
    line-height: 1.25;
  }
  /* Nichts unter 14px */
  small, .hero-image__caption, .money-counter__foot,
  .money-cta__micro, .steps-cta__micro, .steps-contact__micro,
  .footer-copy, .footer-logo-sub, .footer-col__label,
  .funnel-step-label, .form-antispam,
  .trust-siegel__text span { font-size: 0.875rem; } /* = 14px */

  /* Zeilenlänge: Text nutzt volle Breite */
  p, li, span { max-width: 100%; }

  /* ---- HEADER: max. 64px hoch, einzeilig ---- */
  .header-inner { padding-block: 10px; min-height: 0; }
  .header-status-text { display: none; } /* Statustext ausblenden */
  .header-avatar-wrap { width: 40px; height: 40px; }
  .header-avatar { width: 40px; height: 40px; }
  .header-right { gap: 8px; }
  /* Header-CTA ausblenden, Sticky-Leiste übernimmt */
  .header-cta-wrap { display: none; }
  /* Sicherheit: Header nie höher als 64px */
  .site-header { max-height: 64px; overflow: visible; }

  /* ---- HERO ---- */
  .hero { padding-block: var(--sp-5) var(--sp-6); }
  .hero-funnel-wrap { order: 1; }
  .hero-image       { order: 2; }
  .hero-subline { font-size: 1.0625rem; line-height: 1.55; }
  /* Bild: max. 60% Viewport-Höhe */
  .hero-image img { max-height: 60vh; width: 100%; object-fit: cover; object-position: center top; }
  .hero-image__caption { font-size: 0.875rem; margin-top: var(--sp-1); }

  /* ---- BUTTONS: NIEMALS MEHRZEILIG ---- */
  /* Alle Primär-Buttons: volle Breite, einzeilig, 60px hoch */
  .btn-header-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 60px;
    padding: 0 var(--sp-3);
    font-size: 1.0625rem; /* 17px */
    font-weight: 700;
    white-space: nowrap;  /* KEIN Umbruch */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
  }
  /* Buttons sind bereits mit kurzem Text "Kostenlos prüfen" — kein Span-Trick nötig */
  /* CTA-Blöcke: volle Breite, gestapelt */
  .trust-cta,
  .money-cta,
  .steps-cta { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .steps-contact .btn-header-cta { margin-top: var(--sp-2); }
  /* Submit + Next-Buttons */
  .submit-btn, .funnel-next-btn {
    width: 100%; min-height: 60px;
    font-size: 1.0625rem; padding: 0 var(--sp-3);
    white-space: nowrap;
  }

  /* ---- FUNNEL ---- */
  /* Kacheln: volle Breite, einzeilig oder sauber zweizeilig */
  .funnel {
    padding: var(--sp-4);
    border-radius: var(--radius);
  }
  .funnel-tile {
    min-height: 64px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
    font-size: 1.0625rem;
  }
  .funnel-tile__icon { flex-shrink: 0; }
  .funnel-tiles--2col,
  .funnel-tiles--3col,
  .funnel-tiles--ort,
  .funnel-tiles--multi { grid-template-columns: 1fr; gap: var(--sp-2); }
  /* Fortschrittszeile einzeilig */
  .funnel-step-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: nowrap; }
  .funnel-step-label { white-space: nowrap; font-size: 0.875rem; }
  /* Kontaktfelder: 60px hoch, volle Breite */
  .form-input, .form-select {
    min-height: 60px;
    font-size: 1.0625rem;
    padding: 0 var(--sp-3);
  }
  /* Fehlertext: Platz reservieren damit nichts springt */
  .form-field-error {
    min-height: 1.4em;
    font-size: 0.875rem;
  }
  /* Ergebnis-Screen: ruhige vertikale Abfolge */
  .result-summary { padding: var(--sp-3); margin-bottom: var(--sp-3); }
  .result-kasse   { padding: var(--sp-3); margin-bottom: var(--sp-3); }
  .funnel-contact-face { margin-bottom: var(--sp-3); }
  .funnel-google-trust { margin-top: var(--sp-2); }
  /* Motivator */
  .funnel-motivator { font-size: 1rem; padding: var(--sp-3); }

  /* ---- TRUST-SEKTION ---- */
  .trust-section { padding-block: var(--sp-7); }
  .trust-google { gap: var(--sp-2); padding: var(--sp-3); justify-content: flex-start; }
  .trust-google__score { font-size: 1.75rem; }
  .trust-siegel { grid-template-columns: 1fr; gap: var(--sp-3); }
  .trust-statements { grid-template-columns: 1fr; gap: var(--sp-3); }
  .trust-siegel__item,
  .money-fact-card,
  .trust-statement { padding: var(--sp-4) var(--sp-3); }

  /* ---- LEISTUNGS-SEKTION ---- */
  .leistungen-section { padding-block: var(--sp-7); }
  .leistungen-grid--4 { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .leistung-card__body { padding: var(--sp-3) var(--sp-3) var(--sp-4); }

  /* ---- GELD-SEKTION ---- */
  .money-section { padding-block: var(--sp-7); }
  .money-hero-card { grid-template-columns: 1fr; }
  .money-hero-card__amount { padding: var(--sp-4) var(--sp-3); border-right: none; border-bottom: 1px solid var(--c-border); }
  .money-hero-card__sep { display: none; }
  .money-counter { padding: var(--sp-4) var(--sp-3); }
  .money-hero-card__detail, .money-counter { max-width: 100%; }
  .money-facts { gap: var(--sp-3); }

  /* ---- ABLAUF-SEKTION ---- */
  .steps-section { padding-block: var(--sp-7); }
  .steps-layout { grid-template-columns: 1fr; }
  .step-row__num { width: 56px; min-width: 56px; font-size: 1.75rem; }
  .step-row__body { padding: var(--sp-3) var(--sp-3); }
  .steps-contact { width: 100%; }
  .steps-list { margin-bottom: var(--sp-4); }

  /* ---- FOOTER ---- */
  /* Seitenende: genug Abstand über Sticky-Leiste */
  .site-footer { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 88px + var(--sp-4)); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .footer-legal { flex-direction: row; gap: var(--sp-4); flex-wrap: wrap; }
}

/* ---- 360px: engste Referenzbreite ---- */
@media (max-width: 380px) {
  :root { --pad-x: 16px; }
  .container { padding-inline: 16px; }
  /* Zahlen etwas kleiner damit sie nicht umbrechen */
  .money-hero-card__number { font-size: 2.5rem; }
  .money-counter__value    { font-size: 1.625rem; }
  /* Leistungen: einspaltig bei 360px */
  .leistungen-grid--4 { grid-template-columns: 1fr; }
  /* Funnel-Kacheln: Schrift etwas kleiner */
  .funnel-tile { font-size: 1rem; }
  /* Buttons: Schrift minimal kleiner, aber nie unter 16px */
  .btn-header-cta, .submit-btn, .funnel-next-btn { font-size: 1rem; }
}

/* ---- Sticky-Leiste: safe-area-inset-bottom ---- */
@media (max-width: 767px) {
  .mobile-sticky {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .mobile-sticky__btn {
    min-height: 52px;
    font-size: 1rem;
    white-space: nowrap;
    flex: 1;
  }
}

/* ============================================================
   FOOTER
   Variante A: dunkler Türkiston, weiße Schrift (WCAG AA)
   3 Spalten: Wortmarke | Kontakt | Adresse
   ============================================================ */
.site-footer {
  background: var(--c-primary-dark);
  color: rgba(255,255,255,0.85);
  padding-top: clamp(40px, 6vw, 64px);
  padding-bottom: calc(72px + 16px); /* Mobile Sticky + Sicherheitsabstand */
}
@media (min-width: 768px) {
  .site-footer { padding-bottom: clamp(40px, 6vw, 64px); }
}

/* Drei Spalten */
.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .footer-cols {
    grid-template-columns: 1fr;
    gap: 32px;
    /* Mobile-Reihenfolge: Kontakt, Adresse, Wortmarke */
  }
  .footer-col--contact { order: 1; }
  .footer-col--address  { order: 2; }
  .footer-col--brand    { order: 3; }
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Spalten-Label */
.footer-col__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 4px;
}

/* Wortmarke */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.footer-logo {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
}
.footer-logo-sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer-claim {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  margin: 0;
}

/* Telefon: auffälligstes Element im Footer */
.footer-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
  min-height: 44px;
  transition: opacity 0.2s;
  line-height: 1;
}
.footer-tel:hover { opacity: 0.8; }
.footer-tel svg { color: rgba(255,255,255,0.7); flex-shrink: 0; }

/* Footer-Links (E-Mail, Impressum, Datenschutz) */
.footer-link {
  color: rgba(255,255,255,0.8);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,0.3);
  font-size: 0.9375rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 2px 0;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.footer-link:hover {
  color: #fff;
  text-decoration-color: rgba(255,255,255,0.8);
}

/* Normaler Text im Footer */
.footer-text {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
}

/* Adresse */
.footer-address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
}
.footer-address strong {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

/* Schlusszeile */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
  flex-wrap: wrap;
}
.footer-copy {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.4);
  margin: 0;
}
.footer-legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-legal .footer-link {
  font-size: 0.8125rem;
  min-height: 36px;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
:focus-visible { outline: 3px solid var(--c-primary-dark); outline-offset: 3px; }