/* ==================================================================
   KredPal — Messeseiten (Uebergabe 08.10.2026)
   Alle neuen Bauteile der vier Messeseiten (Softwarepartner, Hersteller, Grosshaendler, Verbaende).
   Wird NACH kredpal.css geladen und nutzt nur deren Token. Aus den Prototypen zusammengefuehrt;
   identische Regeln einmal, keine Regel widerspricht einer anderen (geprueft).
   ================================================================== */

/* Ihre Kunden: dunkel wie der fruehere Video-Abschnitt der Startseite; Text links, Video rechts. */
.kunden-vorteile{background:var(--bento-grund);--fokus-farbe:var(--auf-dunkel-stark);}
.kunden-vorteile__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--abstand-spalten);align-items:center;}
.kunden-vorteile .eyebrow{color:var(--gold-400);}
.kunden-vorteile__kopf{margin:0 0 var(--abstand-kopf);}
.kunden-vorteile h2{color:#fff;font-size:var(--heading-h2);font-weight:800;line-height:var(--zeile-titel);margin:0 0 var(--abstand-m);}
.kunden-vorteile__absatz{color:var(--auf-dunkel);font-size:var(--text-lead);line-height:var(--zeile-text);margin:0;max-width:480px;}
.kunden-vorteile__video video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--radius-karte);
  box-shadow:var(--schatten-geraet);background:var(--navy-dunkel);}
@media (max-width:900px){
  .kunden-vorteile__raster{grid-template-columns:1fr;}
  .kunden-vorteile__video{order:-1;}
}

/* Kontakt: dunkler Grund wie das Bento, damit der Gold-Knopf der einzige der Ansicht bleibt. */
.kontakt{background:var(--bento-grund);--fokus-farbe:var(--auf-dunkel-stark);}
.kontakt__raster{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--abstand-spalten);align-items:center;}
.kontakt .eyebrow{color:var(--gold-400);}
.kontakt h2{color:#fff;font-size:var(--heading-h2);font-weight:800;line-height:var(--zeile-titel);margin:0 0 var(--abstand-m);}
.kontakt__text p{color:var(--auf-dunkel);font-size:var(--text-lead);line-height:var(--zeile-text);max-width:520px;}
.kontakt__karte{background:var(--verlauf-licht),var(--verlauf-karte);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-karte);padding:var(--abstand-karte);}
.kontakt__rolle{font-family:var(--mono);font-size:var(--text-caption);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-400);margin:0 0 10px;}
.kontakt__name{font-family:var(--disp);font-size:var(--heading-h3);font-weight:800;color:#fff;margin:0;}
.kontakt__funktion{color:var(--auf-dunkel);font-size:var(--text-small);margin:4px 0 var(--abstand-m);}
.kontakt__knopf{width:100%;justify-content:center;min-height:48px;}
.kontakt__wege{list-style:none;margin:var(--abstand-m) 0 0;padding:0;display:grid;gap:4px;}
.kontakt__wege a{display:inline-flex;align-items:center;min-height:44px;color:var(--auf-dunkel-stark);font-size:var(--text-body);text-decoration:underline;text-underline-offset:3px;}
@media (max-width:900px){
  .kontakt__raster{grid-template-columns:1fr;}
}

/* Erinnerung: heller Grund, Navy-Knopf, Nebenaktionen als Links (kein zweiter Gold-Knopf). */
.erinnerung{background:var(--card);border-top:1px solid var(--line);}
.erinnerung__raster{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--abstand-spalten);align-items:center;}
.erinnerung h2{color:var(--accent-500);font-size:var(--heading-h2);font-weight:800;line-height:var(--zeile-titel);margin:0 0 var(--abstand-m);}
.erinnerung p{color:var(--ink-muted);font-size:var(--text-body);line-height:var(--zeile-text);}
.erinnerung__aktionen{display:flex;flex-direction:column;align-items:flex-start;gap:var(--abstand-xs);}
.erinnerung__knopf{min-height:48px;padding:12px 24px;}
.erinnerung__link{background:none;border:none;padding:0;font:inherit;font-size:var(--text-body);color:var(--accent-500);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;}
.erinnerung__status{min-height:1.4em;font-size:var(--text-small);color:var(--ink-muted);margin:0;}
@media (hover:hover){
  .erinnerung__link:hover{color:var(--accent-600);}
  .kontakt__wege a:hover{color:#fff;}
}
@media (max-width:900px){
  .erinnerung__raster{grid-template-columns:1fr;}
}

/* Partner-Hero: dunkler Verlauf statt Foto, Text links, Angebotskarte rechts.
   Oben Luft fuer die feste Kopfleiste (sie liegt ueber dem Hero wie auf der Startseite). */
.partner-hero{background:var(--verlauf-navy);padding:calc(var(--abstand-section-gross) + 56px) 0 var(--abstand-section-gross);--fokus-farbe:var(--auf-dunkel-stark);}
.partner-hero__raster{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--abstand-spalten);align-items:center;}
.partner-hero .eyebrow{color:var(--gold-400);}
.partner-hero__titel{font-size:var(--heading-hero);font-weight:800;line-height:var(--zeile-hero);letter-spacing:-0.005em;color:#fff;margin:0;}
.partner-hero__sub{margin-top:22px;font-size:var(--heading-hero-sub);font-weight:500;line-height:var(--zeile-text-eng);color:var(--auf-dunkel-stark);max-width:520px;text-wrap:balance;}

/* Gleicher Abstand wie zwischen H1 und Unterzeile (22px), Wunsch 08.10.2026. */
.partner-hero__sub strong{display:block;font-weight:700;color:#fff;margin-top:22px;}
.partner-hero__cta{display:flex;gap:14px;margin-top:var(--abstand-block);flex-wrap:wrap;}
.partner-hero__cta .btn-gold{background:var(--gold-cta-hero);font-size:var(--text-button);font-weight:800;padding:16px 26px;min-height:44px;letter-spacing:.8px;line-height:var(--zeile-kompakt);}
.partner-hero__cta .btn-navy{min-height:44px;}

/* Angebotskarte: Illustration. Innenmasse unter 24 px bleiben roh, Schriften aus --mock-*. */
.angebot-karte{background:var(--creme-050);border-radius:var(--radius-flaeche);padding:18px 18px 16px;box-shadow:var(--schatten-geraet);
  color:var(--ink);font-family:var(--body);max-width:460px;justify-self:end;width:100%;}
.angebot-karte__kopf{display:flex;justify-content:space-between;font-family:var(--mono);font-size:var(--mock-10-5);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin:0 4px 14px;}
.angebot-karte__kopf span:last-child{text-transform:none;letter-spacing:0;color:var(--navy-900);}
.angebot-karte__papier{background:#fff;border-radius:var(--radius-karte);padding:18px 20px 14px;box-shadow:var(--schatten-karte);}
.angebot-karte__betrieb{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line);}
.angebot-karte__logo{width:36px;height:36px;border-radius:8px;background:var(--paper);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--mock-14);color:var(--navy-900);}
.angebot-karte__betrieb b{display:block;font-size:var(--mock-12);font-weight:700;}
.angebot-karte__betrieb em{display:block;font-style:normal;font-size:var(--mock-9-5);color:var(--ink-muted);}
.angebot-karte__beispiel{font-family:var(--mono);font-size:var(--mock-8-5);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);}
.angebot-karte__nr{margin-top:14px;font-family:var(--mono);font-size:var(--mock-9-5);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);}
.angebot-karte__titel{font-family:var(--disp);font-size:var(--mock-22);font-weight:800;line-height:1.2;color:var(--navy-900);margin:6px 0 12px;}
.angebot-karte__zeile{display:flex;justify-content:space-between;gap:12px;font-size:var(--mock-11);padding:8px 0;border-top:1px solid var(--line);}
.angebot-karte__summe{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0 12px;border-top:1px solid var(--line);}
.angebot-karte__summe b{display:block;font-size:var(--mock-12);}
.angebot-karte__summe em{display:block;font-style:normal;font-size:var(--mock-9-5);color:var(--ink-muted);}
.angebot-karte__summe strong{font-family:var(--disp);font-size:var(--mock-20);font-weight:800;color:var(--navy-900);}

/* KredPal-Block: Platz ist immer reserviert; nur Deckkraft und ein kleiner Versatz werden animiert. */
.angebot-karte__kredpal{background:var(--verlauf-licht),var(--verlauf-karte);border-radius:var(--radius-kachel);padding:14px 16px 12px;color:#fff;
  opacity:0;transform:translateY(8px);transition:opacity var(--dauer-lang) var(--kurve),transform var(--dauer-lang) var(--kurve);}
.angebot-karte__kredpal.da{opacity:1;transform:none;}
.angebot-karte__kredpal-kopf{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:var(--mock-8-5);letter-spacing:.1em;text-transform:uppercase;color:var(--auf-dunkel);margin-bottom:12px;}
.angebot-karte__marke{font-family:var(--disp);font-size:var(--mock-14);font-weight:800;letter-spacing:0;text-transform:none;color:#fff;}
.angebot-karte__raten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);}
.angebot-karte__raten li{padding:0 10px;border-left:1px solid rgba(255,255,255,.18);}
.angebot-karte__raten li:first-child{padding-left:0;border-left:none;}
.angebot-karte__raten strong{display:block;font-family:var(--disp);font-size:var(--mock-24);font-weight:800;line-height:1.1;white-space:nowrap;}
@media (max-width:420px){
  .angebot-karte__raten strong{font-size:var(--mock-19);}
  .angebot-karte__raten li{padding:0 6px;}
}
.angebot-karte__raten span{display:block;font-size:var(--mock-9-5);color:var(--auf-dunkel);margin-top:4px;}
.angebot-karte__fussnote{margin:12px 0 0;font-size:var(--mock-8-5);line-height:1.45;color:var(--auf-dunkel);}
.angebot-karte__hinweis{margin:12px 4px 0;text-align:center;font-size:var(--mock-10-5);color:var(--ink-muted);}
@media (max-width:1100px){
  .partner-hero__raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--abstand-block);}
}
@media (max-width:900px){
  .partner-hero{padding-top:calc(var(--abstand-section) + 56px);}
}
@media (max-width:839px){
  .partner-hero__raster{grid-template-columns:1fr;}
  .angebot-karte{justify-self:stretch;max-width:none;}
}
@media (prefers-reduced-motion:reduce){
  .angebot-karte__kredpal{transform:none;transition:opacity var(--dauer-kurz) var(--kurve);}
}

/* Handwerkskunden: weisser Grund, vier Punkte mit Linie oben und goldenem Haken, darunter der Beleg. */
.handwerkskunden{background:var(--card);}
.handwerkskunden h2{color:var(--accent-500);font-size:var(--heading-h2);font-weight:800;line-height:var(--zeile-titel);margin:0 0 var(--abstand-block);}
.hk-punkte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--abstand-block);}
.hk-punkt{border-top:1px solid var(--line);padding-top:var(--abstand-ml);}

/* v18: Haken im goldenen Kreis (F320). Navy statt Weiss auf Gold, Kontrastregel wie bei Text. 44 px wie die Touch-Ziele, auch wenn nicht klickbar. */
.hk-punkt__haken{display:block;width:44px;height:44px;padding:11px;border-radius:var(--radius-kreis);background:var(--gold-500);color:var(--navy-dunkel);margin-bottom:18px;}
.hk-punkt h3{font-family:var(--disp);font-size:var(--heading-h3);font-weight:700;line-height:var(--zeile-normal);color:var(--navy-900);margin:0 0 10px;}
.hk-punkt p{font-size:var(--text-body);line-height:var(--zeile-lesen);color:var(--ink-muted);margin:0;}
.beleg{display:grid;grid-template-columns:auto 1fr;gap:var(--abstand-block);align-items:center;margin-top:var(--abstand-block-gross);
  padding:var(--abstand-karte);background:var(--paper);border-radius:var(--radius-flaeche);}
.beleg__zahl{margin:0;padding-right:var(--abstand-block);border-right:1px solid var(--line);}
.beleg__vor{display:block;font-size:var(--text-body);font-weight:500;color:var(--ink);margin-bottom:4px;}
.beleg__wert{font-family:var(--disp);font-size:var(--stat-zahl);font-weight:800;line-height:var(--zeile-zahl);letter-spacing:-.03em;color:var(--navy-900);}
.beleg__suffix{font-size:var(--stat-zahl-suffix-scale);color:var(--gold-text);margin-left:.08em;}
.beleg__text .eyebrow{margin-bottom:10px;}
.beleg__titel{font-family:var(--disp);font-size:var(--heading-h3);font-weight:800;color:var(--navy-900);margin:0 0 8px;}
.beleg__text p{margin:0 0 8px;font-size:var(--text-body);line-height:var(--zeile-text);color:var(--ink);}
.beleg__text .beleg__quelle{font-size:var(--text-xs);color:var(--ink-muted);margin:0;}
@media (max-width:1100px){
  .hk-punkte{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .hk-punkte{grid-template-columns:1fr;gap:var(--abstand-m);}
  .beleg{grid-template-columns:1fr;gap:var(--abstand-m);}
  .beleg__zahl{padding-right:0;border-right:none;border-bottom:1px solid var(--line);padding-bottom:var(--abstand-m);}
}

/* Partnerabschnitt (v24): heller Grund, grosse dunkle Umsatzkarte, darunter drei helle Karten. */
.partner-umsatz{background:var(--card);border-top:1px solid var(--line);}
.partner-umsatz h2{color:var(--accent-500);font-size:var(--heading-h2);font-weight:800;line-height:var(--zeile-titel);margin:0 0 var(--abstand-m);}
.partner-umsatz__einleitung{max-width:640px;font-size:var(--text-lead);line-height:var(--zeile-text);color:var(--ink-muted);margin:0 0 var(--abstand-block);}
.umsatz-karte{background:var(--verlauf-licht),var(--verlauf-karte);border-radius:var(--radius-flaeche);padding:var(--abstand-karte-gross);color:#fff;--fokus-farbe:var(--auf-dunkel-stark);}
.umsatz-karte__oben{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--abstand-block);align-items:center;
  padding-bottom:var(--abstand-block);border-bottom:1px solid rgba(255,255,255,.16);}
.umsatz-karte__kicker{font-family:var(--mono);font-size:var(--text-caption);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-400);margin:0 0 12px;}
.umsatz-karte h3{font-family:var(--disp);font-size:var(--heading-h3);font-weight:800;color:#fff;margin:0 0 10px;}
.umsatz-karte__text p:not(.umsatz-karte__kicker){color:var(--auf-dunkel);font-size:var(--text-body);line-height:var(--zeile-text);margin:0;max-width:460px;}
.umsatz-karte__zahl{margin:0;text-align:center;}
.umsatz-karte__wert{display:block;font-family:var(--disp);font-size:var(--stat-zahl);font-weight:800;line-height:var(--zeile-zahl);color:#fff;}
.umsatz-karte__prozent{font-size:var(--stat-zahl-suffix-scale);color:var(--gold-400);margin-left:.06em;}
.umsatz-karte__label{display:block;margin-top:10px;font-size:var(--text-small);color:var(--auf-dunkel-stark);}
.umsatz-karte__beispiel{padding-top:var(--abstand-block);}
.umsatz-karte__beispiel .umsatz-karte__kicker{color:#fff;}
.umsatz-karte__rechnung{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin:0 0 12px;font-size:var(--text-lead);color:#fff;}
.umsatz-karte__rechnung strong{font-weight:800;}
.umsatz-karte__gross{font-family:var(--disp);font-size:var(--heading-h3);}
.umsatz-karte__pfeil{color:var(--gold-400);font-weight:700;}
.umsatz-karte__fuss{font-size:var(--text-xs);color:var(--auf-dunkel);margin:0;}
.umsatz-punkte{list-style:none;margin:var(--abstand-gitter) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--abstand-gitter);}
.umsatz-punkt{background:var(--paper);border-radius:var(--radius-flaeche);padding:var(--abstand-karte);}
.umsatz-punkt__kicker{font-family:var(--mono);font-size:var(--text-caption);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text);margin:0 0 14px;}
.umsatz-punkt h3{font-family:var(--disp);font-size:var(--heading-h3);font-weight:800;line-height:var(--zeile-ueberschrift);color:var(--navy-900);margin:0 0 12px;}
.umsatz-punkt p:not(.umsatz-punkt__kicker){font-size:var(--text-body);line-height:var(--zeile-lesen);color:var(--ink-muted);margin:0;}
@media (max-width:900px){
  .umsatz-karte__oben{grid-template-columns:1fr;}
  .umsatz-karte__zahl{text-align:left;}
  .umsatz-punkte{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .umsatz-karte{padding:var(--abstand-karte);}

  /* Rechnung untereinander, Pfeil zeigt nach unten: sonst landet er allein am Zeilenende. */
  .umsatz-karte__rechnung{flex-direction:column;align-items:flex-start;gap:4px;}
  .umsatz-karte__pfeil{display:inline-block;transform:rotate(90deg);}
}

/* Einstieg und Kontakt (v26): Kopf ueber volle Breite, drei Spalten mit Linie, darunter Aufruf links und Kontaktkarte rechts. */
.kontakt__kopf{max-width:820px;margin-bottom:var(--abstand-block);}
.kontakt__einleitung{color:var(--auf-dunkel-stark);font-size:var(--text-lead);line-height:var(--zeile-text);margin:0;}
.einstieg{list-style:none;margin:0 0 var(--abstand-block-gross);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--abstand-block);}
.einstieg__punkt{border-top:1px solid rgba(255,255,255,.18);padding-top:var(--abstand-m);}
.einstieg__kicker{font-family:var(--mono);font-size:var(--text-caption);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-400);margin:0 0 14px;}
.einstieg__punkt h3{font-family:var(--disp);font-size:var(--heading-h3);font-weight:800;line-height:var(--zeile-ueberschrift);color:#fff;margin:0 0 12px;}
.einstieg__punkt p:not(.einstieg__kicker){color:var(--auf-dunkel-stark);font-size:var(--text-body);line-height:var(--zeile-text);margin:0;}
.einstieg__punkt p.einstieg__notiz{margin-top:var(--abstand-m);font-size:var(--text-small);color:var(--auf-dunkel);}
.kontakt__text .kontakt__aufruf{font-family:var(--disp);font-size:var(--heading-h3);font-weight:800;line-height:var(--zeile-ueberschrift);color:#fff;margin:0;max-width:460px;}

/* ==== Hersteller (v2, 08.10.2026): drei dunkle Karten, Modelle, Sterne. Nur Token. ==== */
.hersteller-vorteile{background:var(--card);border-top:1px solid var(--line);}
.hersteller-vorteile h2{color:var(--accent-500);font-size:var(--heading-h2);font-weight:800;line-height:var(--zeile-titel);margin:0 0 var(--abstand-m);}
.hersteller-vorteile__einleitung{max-width:640px;font-size:var(--text-lead);line-height:var(--zeile-text);color:var(--ink-muted);margin:0 0 var(--abstand-block);}
.hersteller-karten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--abstand-gitter);}
.hersteller-karte{background:var(--verlauf-licht),var(--verlauf-karte);border-radius:var(--radius-flaeche);padding:var(--abstand-karte);}
.hersteller-karte__kicker{font-family:var(--mono);font-size:var(--text-caption);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-400);margin:0 0 14px;}
.hersteller-karte h3{font-family:var(--disp);font-size:var(--heading-h3);font-weight:800;line-height:var(--zeile-ueberschrift);color:#fff;margin:0 0 12px;}
.hersteller-karte p:not(.hersteller-karte__kicker){color:var(--auf-dunkel-stark);font-size:var(--text-body);line-height:var(--zeile-text);margin:0;}

/* Stufen (v6, ab v7 mit Einstieg und Kontakt): dunkler Grund, drei Stufen mit Verbindungslinie; je Stufe etwas kraeftigerer Rand. */
.stufen-abschnitt{background:var(--bento-grund);color:#fff;--fokus-farbe:var(--auf-dunkel-stark);}
.stufen-abschnitt .eyebrow{color:var(--gold-400);}
.stufen-abschnitt h2{color:#fff;font-size:var(--heading-h2);font-weight:800;line-height:var(--zeile-titel);margin:0 0 var(--abstand-m);}
.stufen-abschnitt__einleitung{max-width:640px;color:var(--auf-dunkel-stark);font-size:var(--text-lead);line-height:var(--zeile-text);margin:0 0 var(--abstand-block);}
@media (max-width:900px){
  .hersteller-karten{grid-template-columns:1fr;}
}
.stufen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--abstand-gitter);counter-reset:none;}
.stufe{position:relative;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-flaeche);padding:var(--abstand-karte);background:rgba(255,255,255,.03);}
.stufe--2{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.05);}
.stufe--3{border-color:var(--gold-500);background:rgba(255,255,255,.07);}
.stufe__marke{display:flex;align-items:center;gap:10px;margin:0 0 16px;}
.stufe__zahl{display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;border-radius:var(--radius-voll);background:var(--gold-500);color:var(--navy-dunkel);
  font-family:var(--mono);font-size:var(--text-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase;}

/* Pfeil zeigt zur naechsten Stufe: sitzt auf der Kartenkante, damit die Verbindung sichtbar wird. */
.stufe__pfeil{position:absolute;right:calc(-1 * var(--abstand-gitter) / 2 - 9px);top:calc(var(--abstand-karte) + 7px);color:var(--gold-400);background:var(--navy-dunkel);border-radius:50%;}
.stufe__kicker{font-family:var(--mono);font-size:var(--text-caption);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-400);margin:0 0 10px;}
.stufe h3{font-family:var(--disp);font-size:var(--heading-h3);font-weight:800;line-height:var(--zeile-ueberschrift);color:#fff;margin:0 0 12px;}
.stufe p:not(.stufe__kicker):not(.stufe__marke){color:var(--auf-dunkel-stark);font-size:var(--text-body);line-height:var(--zeile-text);margin:0;}
.stufen-abschnitt__schluss{margin:var(--abstand-block) 0 0;font-size:var(--text-body);color:var(--auf-dunkel-stark);max-width:720px;}
@media (max-width:900px){
  .stufen{grid-template-columns:1fr;}
  .hersteller-karten,.stufen{grid-template-columns:1fr;}

  /* Untereinander zeigt der Pfeil nach unten, zwischen die Karten. */
  .stufe__pfeil{right:auto;left:calc(50% - 9px);top:auto;bottom:calc(-1 * var(--abstand-gitter) / 2 - 9px);transform:rotate(90deg);}
}

/* Einstieg im Stufen-Block (v7): Trennlinie, Ueberschrift, ein Absatz, dann Aufruf und Kontaktkarte. */
/* Sprungziel ist ein div, kein section[id]: gleicher Abstand unter der festen Kopfleiste wie bei den Abschnitten. */
.stufen-einstieg{scroll-margin-top:96px;margin-top:var(--abstand-block-gross);padding-top:var(--abstand-block-gross);border-top:1px solid rgba(255,255,255,.16);}
.stufen-einstieg__titel{font-family:var(--disp);font-size:var(--heading-h2);font-weight:800;line-height:var(--zeile-titel);color:#fff;margin:0 0 var(--abstand-m);}
.kontakt__text .stufen-einstieg__text{max-width:520px;color:var(--auf-dunkel-stark);font-size:var(--text-lead);line-height:var(--zeile-text);margin:0 0 var(--abstand-block);}
@media (max-width:900px){
  .einstieg{grid-template-columns:1fr;gap:var(--abstand-m);margin-bottom:var(--abstand-block);}
}

/* Kalender-Dialog (08.10.2026): natives <dialog> (Fokusfalle, Esc, Hintergrund vom Browser). Ebene ueber allem.
   margin:auto ausdruecklich, weil das gemeinsame Stylesheet Abstaende zuruecksetzt und der Dialog sonst oben links klebt. */
.kalender-dialog{margin:auto;border:none;padding:0;background:transparent;width:calc(100% - 2 * var(--abstand-rand));max-width:480px;max-height:calc(100dvh - 32px);overflow:visible;color:var(--ink);}
.kalender-dialog::backdrop{background:rgba(11,18,32,.62);}
.kalender-dialog__karte{position:relative;background:var(--card);border-radius:var(--radius-flaeche);padding:var(--abstand-karte);box-shadow:var(--schatten-schweben);max-height:calc(100dvh - 32px);overflow:auto;}
.kalender-dialog .eyebrow{color:var(--gold-text);padding-right:48px;}
.kalender-dialog__titel{font-family:var(--disp);font-size:var(--heading-h2);font-weight:800;line-height:var(--zeile-titel);color:var(--navy-900);margin:0 0 var(--abstand-m);}
.kalender-dialog__text{font-size:var(--text-body);line-height:var(--zeile-text);color:var(--ink);margin:0 0 var(--abstand-block);}
.kalender-dialog__zu{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:var(--radius-kreis);border:1px solid rgba(31,48,70,.22);
  background:rgba(31,48,70,.04);color:var(--navy-dunkel);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.kalender-feld{display:block;margin:0 0 20px;}
.kalender-feld__label{display:block;font-size:var(--text-small);font-weight:500;color:var(--ink);margin:0 0 8px;}
.kalender-feld__eingabe{display:block;width:100%;box-sizing:border-box;font-family:var(--body);font-size:var(--text-input);color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-kachel);padding:13px 16px;min-height:48px;transition:border-color var(--dauer-sofort) var(--kurve);}

/* Fokus wie im Wizard des Partnerbereichs (Entscheidung v310): Rand in Accent, dazu ein innerer 1-px-Ring.
   Eine Linie statt zwei, Feldgroesse bleibt gleich. */
.kalender-feld__eingabe:focus{border-color:var(--accent-500);}
.kalender-feld__eingabe:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--accent-500);}
.kalender-dialog__knoepfe{display:grid;gap:12px;margin-top:var(--abstand-block);}
.kalender-dialog__knopf{width:100%;justify-content:center;min-height:52px;}
.kalender-dialog__knopf--rand{display:inline-flex;align-items:center;border:1.5px solid var(--navy-dunkel);background:transparent;color:var(--navy-dunkel);
  border-radius:var(--radius-voll);font:inherit;font-weight:700;font-size:var(--text-button);cursor:pointer;}
.kalender-dialog__status{min-height:1.4em;margin:var(--abstand-m) 0 0;font-size:var(--text-xs);line-height:1.6;color:var(--ink-muted);}
@media (hover:hover){
  .kalender-dialog__zu:hover{background:rgba(31,48,70,.09);border-color:rgba(31,48,70,.4);}
  .kalender-dialog__knopf--rand:hover{background:rgba(31,48,70,.05);}
}

/* Oeffnen: kurze Blende mit kleinem Versatz; Layout bleibt stehen. */
.kalender-dialog[open] .kalender-dialog__karte{animation:kalenderAuf var(--dauer) var(--kurve);}
@keyframes kalenderAuf{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .kalender-dialog[open] .kalender-dialog__karte{animation:kalenderBlende var(--dauer-kurz) var(--kurve);}
}
@keyframes kalenderBlende{from{opacity:0;}to{opacity:1;}}
@media (max-width:900px){
  :root{--text-lead:16px;--zeile-text:1.55;--zeile-text-eng:1.35;--zeile-ueberschrift:1.12;--abstand-karte:24px;--abstand-karte-gross:24px;--abstand-block:28px;--abstand-gitter:20px;}
}
@media (max-width:640px){
  :root{--heading-h2:26px;--text-body:14px;--text-lead:15px;--zeile-text:1.45;--zeile-text-eng:1.3;--zeile-titel:1.1;--zeile-ueberschrift:1.1;--abstand-rand:18px;--abstand-karte:20px;--abstand-karte-gross:20px;--abstand-block:24px;--abstand-gitter:16px;}
}

/* ==== Verbaende (v1, 08.10.2026) ==== */
/* Einstieg ohne Stufen: keine Trennlinie oben, Ueberschrift als h2. */
.stufen-einstieg--allein{margin-top:0;padding-top:0;border-top:none;}

/* Mustertext: heller Grund, Karte mit Goldkante links wie in der Skizze. */
.mustertext{background:var(--card);border-top:1px solid var(--line);}
.mustertext h2{color:var(--accent-500);font-size:var(--heading-h2);font-weight:800;line-height:var(--zeile-titel);margin:0 0 var(--abstand-m);}
.mustertext__einleitung{font-size:var(--text-lead);line-height:var(--zeile-text);color:var(--ink-muted);margin:0 0 var(--abstand-block);}
.mustertext__karte{margin:0;max-width:760px;background:var(--paper);border-left:3px solid var(--gold-500);border-radius:var(--radius-flaeche);padding:var(--abstand-karte-gross);}
.mustertext__kicker{font-family:var(--mono);font-size:var(--text-caption);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 var(--abstand-m);}
.mustertext__brief{margin:0;}
.mustertext__brief p{font-size:var(--text-body);line-height:var(--zeile-text);color:var(--ink);margin:0 0 var(--abstand-m);}
.mustertext__brief .mustertext__anrede{font-family:var(--disp);font-size:var(--heading-h3);font-weight:800;color:var(--navy-900);}
.mustertext__hinweis{font-size:var(--text-xs);color:var(--ink-muted);margin-top:var(--abstand-m);}

/* Band fuer Handwerker: dunkel, mittig, weisser Knopf. */
.handwerker-band{background:var(--bento-grund);text-align:center;--fokus-farbe:var(--auf-dunkel-stark);}
.handwerker-band .eyebrow{color:var(--gold-400);}
.handwerker-band h2{color:#fff;font-size:var(--heading-hero);font-weight:800;line-height:var(--zeile-hero);margin:0 0 var(--abstand-m);}
.handwerker-band p{color:var(--auf-dunkel-stark);font-size:var(--text-lead);line-height:var(--zeile-text);max-width:640px;margin:0 auto var(--abstand-block);}
.handwerker-band__knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 28px;border-radius:var(--radius-voll);
  background:#fff;color:var(--navy-dunkel);font-weight:700;font-size:var(--text-button);text-decoration:none;}
@media (hover:hover){
  .handwerker-band__knopf:hover{background:var(--creme-050);}
}

/* So arbeiten wir zusammen (Grosshaendler v3): zwei kurze Listen auf dunklem Grund, links ueber dem Aufruf. */
.zusammenarbeit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-m);margin:0 0 var(--abstand-block);}
.zusammenarbeit__kicker{font-family:var(--mono);font-size:var(--text-caption);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-400);margin:0 0 8px;}
.zusammenarbeit ul{margin:0;padding-left:1.1em;display:grid;gap:6px;}
.zusammenarbeit li{color:var(--auf-dunkel-stark);font-size:var(--text-small);line-height:var(--zeile-text-eng);}
@media (max-width:640px){
  .zusammenarbeit{grid-template-columns:1fr;}
}