/* ═══════════════════════════════════════════════════════════════════════
   HANSEKREDIT — Gestaltungsebene (Redesign 09.09.2026)

   Auftrag Calvin: nicht umdesignen, sondern redesignen. Die Struktur der
   Seiten bleibt; Farbe, Typografie, Rhythmus und Bewegung werden gehoben.
   Anker ist die Startseiten-Slideshow (assets/homeslides.css).

   Diese Datei wird NACH den seiteneigenen <style>-Blöcken geladen und
   gewinnt deshalb bei gleicher Spezifität. Sie ist bewusst additiv: Sie
   setzt Token, hebt Untergrenzen an und ergänzt Bausteine — sie schreibt
   keine bestehenden Layouts um.

   Entscheidungen vom 09.09.2026:
   · Palette bleibt, wird abgestuft (keine neue Markenfarbe)
   · Zweitschrift für Überschriften, DM Sans bleibt Fließtext
   · Bewegung spürbar, aber ruhig — ohne Animationsbibliothek
   · Untergrenze 15 px, Fließtext mobil 17 px
   · Im Zweifel gewinnt Seriosität vor Effekt
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Die Marke bleibt. Ergänzt sind nur Zwischenstufen — sie machen den
     Unterschied zwischen „Baukasten" und „gebaut". */
  --hk-blue-900: #001233;
  --hk-blue-800: #002050;
  --hk-blue-700: #00307a;
  --hk-blue-600: #0047b3;
  --hk-blue:     #005fd9;
  --hk-blue-400: #4a90ec;
  --hk-blue-200: #b3d1f7;
  --hk-blue-50:  #eaf2fd;

  --hk-orange:     #FF5F00;
  --hk-orange-600: #e04f00;
  --hk-orange-100: #ffe8db;

  /* Warme Neutraltöne statt reinem Grau: Flächen wirken damit ruhiger
     und weniger technisch — der Unterschied ist klein und sofort sichtbar. */
  --hk-paper:   #ffffff;
  --hk-sand-50: #faf8f5;
  --hk-sand-100:#f4f0ea;
  --hk-sand-200:#e8e2d9;

  --hk-ink:       #10131a;
  --hk-ink-muted: #55606f;
  --hk-line:      rgba(16, 19, 26, .10);

  /* Rhythmus: EIN Maßsystem für Abstände, damit Abschnitte gleich atmen */
  --hk-s1: .5rem;  --hk-s2: 1rem;   --hk-s3: 1.5rem;
  --hk-s4: 2.5rem; --hk-s5: 4rem;   --hk-s6: 6rem;
  --hk-section: clamp(3.5rem, 8vw, 7rem);
  --hk-gutter:  clamp(20px, 5vw, 64px);

  --hk-radius:   14px;
  --hk-radius-l: 22px;
  --hk-shadow:   0 1px 2px rgba(16,19,26,.04), 0 8px 28px rgba(16,19,26,.07);
  --hk-shadow-l: 0 2px 6px rgba(16,19,26,.05), 0 24px 60px rgba(16,19,26,.12);

  --hk-ease: cubic-bezier(.16, 1, .3, 1);

  /* Schriften */
  --hk-font-text:    'DM Sans', system-ui, -apple-system, sans-serif;
  --hk-font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
}

/* ── Typografie ──────────────────────────────────────────────────────── */
/* Überschriften bekommen eine eigene Stimme. Fraunces ist eine moderne
   Serif mit optischer Größenachse: groß gesetzt wirkt sie souverän, klein
   bleibt sie lesbar. Der Fließtext bleibt DM Sans — die Kombination aus
   Serif-Überschrift und geometrischer Grotesk ist das, was Banken von
   Baukastenseiten unterscheidet. */
h1, h2, h3,
.hslide__title, .section-title, .hero h1 {
  font-family: var(--hk-font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-wrap: balance;               /* keine Schusterjungen in Überschriften */
}
h1, .hslide__title { font-weight: 600; }
h2 { line-height: 1.16; }
h3 { font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }

/* Untergrenzen. Auf einem iPhone 8 war ein Viertel der Seite unter 12 px —
   bei einer Zielgruppe 50+ ist das kein Detail, sondern der Unterschied
   zwischen lesen und weiterwischen. */
body { font-family: var(--hk-font-text); }
@media (max-width: 760px) {
  body { font-size: 17px; line-height: 1.62; }
  p, li { font-size: max(1em, 16px); line-height: 1.65; }
}

/* ── Schutzregeln fürs Handy ─────────────────────────────────────────── */
/* Drei Zeilen, die den Großteil der Überläufe abfangen: Flex- und
   Grid-Kinder dürfen schrumpfen, Medien bleiben im Rahmen, lange Wörter
   brechen. Gemessen bei 375 px liefen sonst Karten bis 494 px hinaus. */
@media (max-width: 900px) {
  *, *::before, *::after { min-width: 0; }
  img, svg, video, canvas, iframe, table { max-width: 100%; }
  h1, h2, h3, h4, p, li, td, th, dd, dt, figcaption, label, button, a {
    overflow-wrap: break-word;
  }
}
/* Fingerflächen: alles Anklickbare mindestens 44 px hoch (WCAG 2.2) */
@media (pointer: coarse) {
  a[class*="btn"], a[class*="cta"], button, .hdot {
    min-height: 44px;
  }
}

/* ── Bewegung: spürbar, aber ruhig ───────────────────────────────────── */
/* Kein GSAP, keine Bibliothek — IntersectionObserver in assets/reveal.js
   setzt `.is-in`, den Rest macht CSS. Gesamtkosten: rund 3 KB. */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s var(--hk-ease);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal][data-reveal-delay="4"] { transition-delay: .32s; }

/* Sanfter Gegenlauf auf großen Bildern — sehr dezent, kein Jahrmarkt */
[data-parallax] { will-change: transform; }

/* ── Abschnitts-Rhythmus und Flächen ─────────────────────────────────── */
/* Abwechselnde Flächen geben der Seite Takt, ohne etwas umzubauen.
   Wird über eine Klasse gesetzt, nie über Elementtypen — so kann es
   nichts Bestehendes überschreiben. */
.hk-surface       { background: var(--hk-paper); }
.hk-surface--sand { background: var(--hk-sand-50); }
.hk-surface--deep { background: var(--hk-blue-900); color: #fff; }
.hk-surface--deep h1, .hk-surface--deep h2, .hk-surface--deep h3 { color: #fff; }

/* Feine Trennlinie mit Farbverlauf statt harter Kante */
.hk-hairline {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--hk-line) 18%, var(--hk-line) 82%, transparent);
}

/* Akzentkante an Karten — ein Detail, das teuer aussieht und nichts kostet */
.hk-accent-edge { position: relative; }
.hk-accent-edge::before {
  content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px;
  border-radius: 3px; background: linear-gradient(180deg, var(--hk-orange), var(--hk-blue));
}

/* ── Partnerband: am 09.09.2026 wieder entfernt ──────────────────────
   Calvin: die Logos sind verbuggt, erst einmal raus. Die Stile sind mit
   entfernt statt auskommentiert — toter Code, den niemand pflegt, ist
   schlimmer als ein Neuaufbau, wenn die Freigaben da sind. Die Struktur
   steht im Git-Verlauf (Commit 26499bf). ── */

/* ── Kopfbereich der Unterseiten ─────────────────────────────────────── */
/* Der neue Seitenkopf im Ton der Vorlagen: Kennzeichnung, Überschrift,
   fette Zusage, Absatz, Dreiklang. Bewusst eigene Klassen — die alten
   Hero-Stile der Seiten bleiben unangetastet daneben bestehen. */
.hk-lede { max-width: 62ch; }
.hk-lede__kicker {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hk-orange); margin: 0 0 var(--hk-s2);
}
.hk-lede__kicker::before { content: ''; width: 22px; height: 2px; background: currentColor; }
.hk-lede__claim {
  font-family: var(--hk-font-text);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 700; line-height: 1.35;
  margin: 0 0 var(--hk-s2);
}
.hk-lede__text { font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.65; color: var(--hk-ink-muted); margin: 0; }
.hk-surface--deep .hk-lede__text { color: rgba(255,255,255,.78); }
.hk-lede__triad {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  margin: var(--hk-s3) 0 0; padding: 0; list-style: none;
  font-weight: 700; font-size: clamp(1rem, 1.2vw, 1.05rem);
}
.hk-lede__triad li { display: flex; align-items: center; gap: .5em; }
.hk-lede__triad li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--hk-orange); flex: none;
}

/* ── Nachjustierung nach dem Anheben der Schriftgrößen ───────────────── */
/* 517 Deklarationen unter 15 px wurden angehoben. An einer Stelle rächt
   sich das sofort: Kennzahlen-Kärtchen tragen Beschriftungen in Versalien
   mit weiter Laufweite — bei 15 px statt 11 px brechen die um.
   Die Schrift bleibt groß, stattdessen wird die Laufweite enger und der
   Zeilenabstand kleiner. Lesbarkeit gewinnt, Form bleibt. */
[class*="stat"][class*="label"],
[class*="stat-label"], [class*="counter-label"],
.step-label-sm, .about-stat-label, .hero-stat-label, .ks-counter-label {
  letter-spacing: .04em;
  line-height: 1.28;
  hyphens: auto;
}

/* Fußzeilen und Rechtstexte: 15 px, aber ruhiger gesetzt */
footer small, .legal-note, [class*="disclaimer"], [class*="rechtlich"] {
  line-height: 1.6;
  color: var(--hk-ink-muted);
}

/* 🔴 09.09.2026: Die Untergrenze wurde beim Redesign in den Quelldateien
   gesetzt — an 517 Deklarationen. Genau daran vorbei kam `<small>` aus
   `kreditantrag.js`, das der Browser selbst auf 0,8 em verkleinert: 12,5 px,
   im Formular, wo es am wenigsten hingehört. Diese Regel ist das Netz
   darunter, damit dasselbe nicht beim nächsten erzeugten Markup passiert. */
small { font-size: max(15px, .875em); }

/* ── Letzter Rest seitlicher Verschiebung ────────────────────────────── */
/* Nach dem Beheben der Menüschublade blieben 3 px (375) bis 21 px (320)
   Restversatz. Ein ungeklemmter Verursacher war nicht auffindbar — es sind
   Randfälle aus Innenabständen und Rundung.
   🔑 `clip` statt `hidden`: `hidden` würde einen Scroll-Container erzeugen
   und den sticky Seitenkopf brechen. `clip` schneidet nur ab. */
/* ⚠️ 10.09.2026 ergänzt: `html` muss mit. Gescrollt wird das Wurzelelement,
   nicht der Körper — `overflow-x` allein auf `body` hält die Seite deshalb
   nicht fest. Auf „Über uns" ließ sie sich bei 360 px weiterhin 11 px zur
   Seite schieben, obwohl der Verursacher (die schiebbare Merkmalszeile)
   längst sauber begrenzt war.
   🔑 `clip` und nicht `hidden`: `hidden` würde einen Scroll-Container
   erzeugen und `position:sticky` im Inneren brechen. `clip` schneidet nur ab. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* ── Schrittanzeige im Formular ──────────────────────────────────────── */
/* 🔴 09.09.2026: Nach dem Anheben von 9 px auf 15 px überlappten sich die
   Beschriftungen — sie standen auf `white-space: nowrap` und waren damit
   breiter als ihre Spalte. Statt die Schrift zurückzunehmen (sie ist eine
   Untergrenze, kein Vorschlag) dürfen sie jetzt umbrechen. Auf dem Handy
   passen fünf Wörter ohnehin nie nebeneinander: dort steht nur der
   aktuelle Schritt, die übrigen bleiben als Kreise sichtbar. */
.step-label-sm {
  /* Versalien kosten rund ein Fünftel Breite. Ohne sie passen alle fünf
     Wörter bei 15 px in je eine Zeile — mit ihnen trennte es zu
     „SITUA-TION" und „EI-GEN-TUM", was schlimmer aussah als die
     Überlappung davor. Gemischte Schreibung ist hier auch die ruhigere. */
  text-transform: none;
  white-space: nowrap;
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0;
  hyphens: manual;
  max-width: none;
}
.step-connector { width: clamp(16px, 4vw, 44px) !important; }
@media (max-width: 640px) {
  /* Fünf Wörter passen auf einem Handy nie nebeneinander: dort steht nur
     der aktuelle Schritt, die übrigen bleiben als Kreise erkennbar. */
  .step-node .step-label-sm { display: none; }
  .step-node.active .step-label-sm { display: block; }
}

/* ── Bewegung sichtbarer ─────────────────────────────────────────────── */
/* Die erste Fassung war so zurückhaltend, dass sie niemandem auffiel
   („man sieht keine Scroll-Animationen"). Etwas mehr Weg, eine Spur
   Maßstab, längere Dauer — immer noch ruhig, aber wahrnehmbar. */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px) scale(.985);
  transition: opacity .85s ease, transform .85s var(--hk-ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Karten reagieren auf den Zeiger — das ist die zweite Art Lebendigkeit,
   die man wirklich bemerkt, weil sie auf Handlung antwortet. */
@media (hover: hover) and (pointer: fine) {
  [class*="-card"], [class*="-tile"], [class*="-box"], [class*="benefit"] {
    transition: transform .28s var(--hk-ease), box-shadow .28s ease;
  }
  [class*="-card"]:hover, [class*="-tile"]:hover, [class*="benefit"]:hover {
    transform: translateY(-4px);
    box-shadow: var(--hk-shadow-l);
  }
}

/* Zahlen, die hochzählen, dürfen beim Zählen nicht springen */
[data-count] { font-variant-numeric: tabular-nums; }

/* ── Sprungmarken laufen nicht mehr unter den Kopf ───────────────────── */
/* 🔴 09.09.2026: Wer auf „Jetzt anfragen" klickt, landete mit der
   Überschrift HINTER dem sticky Seitenkopf — sie war schlicht abgeschnitten.
   `scroll-margin-top` hält den Abstand frei, den der Kopf einnimmt. */
[id] { scroll-margin-top: 96px; }
@media (max-width: 700px) { [id] { scroll-margin-top: 84px; } }

/* ── Bildbänder ──────────────────────────────────────────────────────── */
/* 🔴 09.09.2026 ergänzt. Vier öffentliche Seiten hatten überhaupt kein
   Bild, mehrere nur eines — und die Bibliothek war restlos verbraucht.
   Statt jede Seite mit eigenem Bild-Raster zu versehen (jede hat ihr
   eigenes, gewachsenes CSS), sitzt hier EIN Band, das zwischen die
   bestehenden Abschnitte gesetzt wird. Es fasst nichts an, was schon da
   ist — genau darum ist es sicher. */
.hk-bild {
  max-width: 1120px;
  margin: clamp(44px, 6vw, 84px) auto;
  padding: 0 var(--hk-gutter, 20px);
}

/* 🔑 Warum das Band eine eigene Fläche mitbringt statt direkt auf der
   Seite zu liegen: Gemessen am 09.09. stand die Bildunterschrift auf
   kapitalbeschaffung.html dunkelgrau auf dunkelblauem Grund — Kontrast
   2,9 gegen die geforderten 4,5. Eine Sonderfarbe pro Seite wäre eine
   Regel, die beim nächsten Hintergrundwechsel still bricht. Die eigene
   Fläche stimmt dagegen unabhängig davon, was dahinterliegt. */
.hk-bild figure {
  margin: 0;
  background: var(--hk-sand-50, #faf8f5);
  border: 1px solid var(--hk-line, rgba(16,19,26,.10));
  border-radius: var(--hk-radius-l, 22px);
  padding: 12px 12px 4px;
}

.hk-bild__rahmen {
  position: relative;
  overflow: hidden;
  border-radius: var(--hk-radius, 14px);
  background: var(--hk-sand-100, #f4f0ea);
  aspect-ratio: 3 / 2;
}
.hk-bild--hoch .hk-bild__rahmen { aspect-ratio: 4 / 3; }

/* Das Bild steht bewusst 8 % höher als sein Rahmen. Der Gegenlauf aus
   reveal.js verschiebt es um bis zu 26 px — ohne diese Reserve käme an
   der Kante der Hintergrund zum Vorschein. */
.hk-bild__rahmen img {
  position: absolute;
  inset: -4% 0;
  width: 100%;
  height: 108%;
  object-fit: cover;
  display: block;
}

.hk-bild figcaption {
  margin: 14px 6px 14px;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hk-ink-muted, #55606f);
}

/* Pflichthinweis nach Art. 50 Abs. 4 UAbs. 1 KI-VO: Er steht AN der Folge
   des Bildes, in derselben Größe wie die Bildunterschrift — nicht kleiner,
   nicht im Impressum versteckt. Nur die Farbe nimmt sich zurück. */
.hk-bild__hinweis {
  color: var(--hk-ink-muted, #55606f);
  opacity: .78;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .hk-bild__rahmen,
  .hk-bild--hoch .hk-bild__rahmen { aspect-ratio: 4 / 3; }
  .hk-bild figure { padding: 10px 10px 2px; }
  .hk-bild__hinweis { white-space: normal; }
}

/* ══════════════════════════════════════════════════════════════════════
   HERO UND KOPFZEILE — 10.09.2026
   ══════════════════════════════════════════════════════════════════════

   Zwei Beschwerden vom Live-Stand, beide messbar:

   1. Die Kopfzeile stand ÜBER dem Hero statt darauf. Sie ist seit heute
      durchsichtig — über weißem Grund wurde daraus ein grauer Balken.
      Der Hero rückt deshalb um die Kopfhöhe nach oben und liegt darunter.

   2. Der Hero war höher als der Bildschirm: gemessen 1028 px auf einem
      iPhone mit 844 px. Man sah nie den ganzen Einstieg, sondern immer
      einen abgeschnittenen. Die Kennzahlen-Kacheln waren der größte
      Posten (150 px), weil die Beschriftungen in Versalien mit weiter
      Laufweite bei 15 px in eine 106 px schmale Spalte umbrechen.

   🔑 Die Schriftgröße bleibt bei 15 px. Sie wurde am 09.09. an 517
   Stellen bewusst angehoben (BFSG/WCAG) — dieser Fehler wird NICHT
   durch kleinere Schrift gelöst, sondern durch weniger Versalien,
   engere Innenabstände und ruhigere Abstände zwischen den Bausteinen.
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* Höhe der Leiste. ⚠️ Muss zu nav.js passen — dort stehen dieselben
     Werte (10.09.2026 vergrößert: 96 px am Rechner, 82 px am Handy).
     Der Hero liegt unter der Leiste und holt sich seinen oberen Abstand
     aus dieser Zahl; läuft sie auseinander, sitzt die Brotkrume unter
     dem Logo. */
  --hk-head-h: 96px;
}
@media (max-width: 900px) { :root { --hk-head-h: 82px; } }

/* Die Leiste schwebt (position:fixed in nav.js) und belegt keinen Platz
   mehr. Der erste Abschnitt beginnt damit bei 0 und liegt unter ihr — genau
   das ist gewollt, solange sein Inhalt die Kopfhöhe als Luft bekommt. */
.header-wrap + main > section:first-child [class$="-hero-content"],
.header-wrap ~ main > section:first-child [class$="-hero-content"],
[class$="-hero"] > [class$="-hero-content"],
[class$="-hero"] > [class$="-hero-inner"] {
  padding-top: calc(var(--hk-head-h) + 20px);
}

/* Seiten ohne Hero (Partnerbereich, Anwendungsseiten) haben nichts, worunter
   die Leiste liegen könnte — sie brauchen den Platz als Abstand. */
.pl-main, .pp-main { padding-top: var(--hk-head-h); }

/* ── Handy: die Bausteine des Heros enger setzen ─────────────────────── */
@media (max-width: 900px) {

  /* Brotkrume: eine Zeile genügt. */
  .breadcrumb { margin-bottom: 17px !important; line-height: 1.35 !important; }

  /* Der Hero endet unten dichter — die Sektion darunter trägt ihren
     eigenen Abstand, hier stand er doppelt. */
  /* ⚠️ 10.09.2026, nachjustiert. Die erste Fassung hat so lange Abstände
     gekürzt, bis der Hero passte — und wirkte danach zusammengedrückt
     (Calvin: „die Seite an sich ist sehr gequetscht ... allgemein mehr
     Platz und Raum lassen"). Die Abstände sind deshalb wieder größer.
     Damit die Sektion trotzdem den Schirm ausfüllt statt irgendwo mittendrin
     zu enden, ist sie jetzt mindestens einen Bildschirm hoch und der Inhalt
     steht senkrecht mittig: Bleibt Platz übrig, verteilt er sich oben und
     unten, statt als leere Fläche unter dem Hero zu stehen. */
  /* ⚠️ Grid, nicht Flex. Mit `display:flex` verlieren Kinder, die
     `margin-inline:auto` tragen (so zentriert `.au-hero-inner`), die
     Streckung und werden inhaltsbreit — auf „Über uns" wurde der Kasten
     dadurch 654 px breit auf einem 360-px-Schirm und schob die Seite
     seitlich weg. Im Grid zentriert dieselbe Angabe, ohne die Breite
     aufzublähen. `align-content:center` leistet dasselbe wie
     `justify-content` im Flex-Spaltenfluss. */
  [class$="-hero"] {
    min-height: 100svh;
    display: grid !important;
    /* 🔑 `minmax(0, 1fr)`, nicht `1fr`. Eine Spur mit `auto`/`1fr` misst sich
       am größten Inhalt — und die schiebbare Merkmalszeile meldet trotz
       `overflow-x:auto` ihre volle Inhaltsbreite an. Auf „Über uns" wurde
       der Kasten dadurch 654 px breit auf 360 px Schirm. Mit `minmax(0,…)`
       darf die Spur schrumpfen, und die Zeile scrollt, wie vorgesehen. */
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: center !important;
  }
  [class$="-hero"] > * { min-width: 0; }
  /* 🔑 `width:100%` ist hier nicht überflüssig. `.au-hero-inner` trägt
     `margin: 0 auto` — automatische Ränder schalten im Grid (wie im Flex)
     die Streckung ab, der Kasten misst sich dann wieder an seinem Inhalt
     und wuchs auf 654 px, obwohl die Spur nur 312 px breit war. Mit einer
     ausdrücklichen Breite füllt er die Spur, die automatischen Ränder
     fallen auf 0 — und die schiebbare Merkmalszeile darin scrollt endlich,
     statt die Seite seitlich wegzuschieben. */
  [class$="-hero"] [class$="-hero-inner"],
  [class$="-hero"] [class$="-hero-content"] { min-width: 0; width: 100%; }
  [class$="-hero"] > [class$="-hero-content"],
  [class$="-hero"] > [class$="-hero-inner"] {
    padding-top: calc(var(--hk-head-h) + 12px) !important;
    /* Der Fuß ist der einzige Abstand, der nichts trennt — die Sektion
       darunter bringt ihren eigenen mit. Hier zu sparen kostet keinen Raum
       zwischen den Elementen, und genau die 8 px fehlten, nachdem die
       Leiste am 10.09. von 66 auf 82 px gewachsen ist. */
    padding-bottom: 22px !important;
  }

  /* ── Vertrauensmerkmale ───────────────────────────────────────────
     Gemessen bei 360 px: drei Merkmale brachen auf DREI Zeilen um und
     kosteten 126–144 px — nach dem Absatz der zweitgrößte Posten im Hero.
     Sie bleiben vollständig, laufen aber in EINER Zeile und lassen sich
     seitlich schieben. Der Balken wird ausgeblendet, die Merkmale reichen
     bis an den Rand, damit sichtbar ist, dass es weitergeht. */
  .trust-badges {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 calc(var(--hk-gutter) * -1) 19px !important;
    padding: 0 var(--hk-gutter) !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .trust-badges::-webkit-scrollbar { display: none; }
  .trust-badges { justify-content: flex-start !important; }
  .trust-badge {
    flex: 0 0 auto !important;
    padding: 6px 11px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* Der Dreiklang stand untereinander (92 px). Nebeneinander mit Punkt
     dazwischen sagt er dasselbe in einer bis zwei Zeilen. */
  .hk-lede__triad {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    column-gap: .85rem !important;
    row-gap: .2rem !important;
  }

  /* Seitenspezifische Blöcke, die im Hero am meisten Platz kosteten. */
  .urgency-bar { padding: 15px 17px !important; margin-bottom: 19px !important; }

  /* Die Merkmale auf „Über uns" standen als Raster über vier Zeilen und
     kosteten 185 px — der größte Posten dort. Als schiebbare Zeile sind es
     rund 40 px, ohne dass eines wegfällt. Gehört an die BREITE: bei
     360×780 greift der Block für niedrige Fenster nicht. */
  .au-hero-badges {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 7px !important;
    margin-bottom: 12px !important;
  }
  .au-hero-badges > * { flex: 0 0 auto !important; white-space: nowrap !important; }
  /* ⚠️ `justify-content` MUSS zurückgesetzt werden. Die Seite zentriert die
     Merkmale; in einer schiebbaren Zeile verteilt sich der Überhang dann auf
     BEIDE Seiten — der erste Eintrag stand 132 px links außerhalb und war
     durch Schieben nicht erreichbar (scrollLeft konnte nicht negativ werden). */
  .au-hero-badges { justify-content: flex-start !important; }
  .au-hero-badges { margin-bottom: 19px !important; }
  .au-hero-badges::-webkit-scrollbar { display: none; }

  /* Der Dreiklang lief noch mit dem Zeilenabstand des Fließtexts. */
  .hk-lede__triad { row-gap: .1rem !important; line-height: 1.25 !important; }
  .hk-lede__triad li { line-height: 1.25 !important; }
  /* Der Scroll-Hinweis ist Dekoration und kostete 100 px. */
  .au-scroll-hint { display: none !important; }

  /* Anspruch und Dreiklang: gleicher Text, ruhigerer Abstand. */
  .hk-lede__claim { margin-bottom: 17px !important; }
  .hk-lede__triad { gap: .35rem 1rem !important; margin: 10px 0 14px !important; }

  /* Bewertungszeile: sie stand mit 32 px Abstand allein auf weiter Flur. */
  .stars-row { margin-bottom: 19px !important; gap: 10px !important; line-height: 1.3 !important; }

  /* Handlungsknöpfe: volle Breite, aber ohne den doppelten Innenabstand.
     ⚠️ Die 44 px Mindesthöhe für Fingerflächen (WCAG 2.2) bleiben — hier
     wird der Abstand DAZWISCHEN kleiner, nicht die Fläche selbst. */
  .hero-ctas { gap: 11px !important; margin-bottom: 18px !important; }
  .hero-ctas > a {
    padding-top: 13px !important; padding-bottom: 13px !important;
    min-height: 48px !important;
  }

  /* Dreiklang und Anspruch: derselbe Text, ruhigerer Takt. */
  .hk-lede__triad { margin: 11px 0 14px !important; }
  .hk-lede__triad li { line-height: 1.3 !important; }

  /* ── Kennzahlen-Kacheln ───────────────────────────────────────────
     Der eigentliche Übeltäter. Versalien + .05em Laufweite brauchen in
     „Maximales Kreditvolumen" rund 172 px; die Spalte ist 106 px breit.
     Ergebnis waren vier Zeilen mit Trennstrichen mitten im Wort.
     Ohne Versalien und ohne Sperrung passt derselbe Text bei
     unveränderten 15 px in zwei Zeilen. */
  [class*="counter-row"] { gap: 10px !important; }
  [class*="counter-row"] > [class*="counter"] {
    /* Gemessen bei 390 px: Die Spalte ist 110 px breit, „Kreditvolumen"
       braucht bei 15 px rund 95 px. Mit 9 px Seitenabstand blieben 92 px —
       zwei Pixel zu wenig. Mit 6 px passt die Zeile. */
    padding: 15px 8px !important;
    border-radius: 14px !important;
  }
  [class*="counter-val"] { letter-spacing: -.5px !important; }
  [class*="counter-label"] {
    font-size: 15px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    margin-top: 4px !important;
  }
  /* ⚠️ Hier stand `[class*="counter-label"] br { display: none }`. Das war
     falsch: Nach einem <br> folgt ein TEXTKNOTEN, kein Element — die
     nachgeschobene Regel `br + *` griff also nie, und aus
     „Maximales<br>Kreditvolumen" wurde das unteilbare Wort
     „MaximalesKreditvolumen", das die Kachel seitlich abschnitt.
     Die Umbrüche bleiben deshalb stehen. Sie schaden auch nicht mehr:
     ohne Versalien und Sperrung passt jede Zeile in die Spalte. */
  /* `anywhere` brach mitten im Wort („Kreditvolu|men"). Richtig ist die
     Silbentrennung des Browsers: Die Seiten sind lang="de", damit trennt er
     nach deutschen Regeln („Kredit-volumen"). `break-word` bleibt nur als
     Notnagel für Wörter, die auch getrennt nicht passen. */
  [class*="counter-label"] {
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    overflow-wrap: break-word;
  }

  /* „300.000 €" ist der breiteste Wert und lief bei 25 px aus der Spalte.
     Die Größe hängt jetzt an der Bildschirmbreite statt an einer festen
     Zahl — damit bleibt der Wert einzeilig, auch auf 320 px. */
  [class*="counter-val"] { font-size: clamp(17px, 5.4vw, 25px) !important; }
}

/* Sehr schmale Geräte (320–360 px): die Kacheln untereinander wären zu
   hoch, deshalb bleiben es drei Spalten — nur noch enger. */
@media (max-width: 380px) {
  [class*="counter-row"] { gap: 6px !important; }
  [class*="counter-row"] > [class*="counter"] { padding: 9px 4px !important; }
  [class*="counter-val"] { font-size: clamp(16px, 5.2vw, 22px) !important; }
}

/* ── Sehr kleine Geräte (≤ 400 px) ───────────────────────────────────── */
/* Gemessen bei 360×780: der Hero lag noch 3–151 px über dem Schirm. Der
   größte verbliebene Posten ist der Einleitungsabsatz (160–185 px). Er
   bleibt vollständig stehen — statt ihn zu kürzen, wird der Zeilenabstand
   von 1,7 auf 1,5 gesetzt und der Takt zwischen den Bausteinen enger.
   1,5 ist der Wert, den WCAG als Mindestabstand für Fließtext nennt. */
@media (max-width: 400px) {
  [class$="-hero"] > [class$="-hero-content"],
  [class$="-hero"] > [class$="-hero-inner"] {
    /* Die Leiste ist seit dem Vergrößern (10.09., 66 → 82 px) selbst
       luftig genug — der Abstand darunter darf kleiner sein, ohne dass es
       gedrängt wirkt. Genau daran fehlten auf dem Beamtenkredit 12 px. */
    padding-top: calc(var(--hk-head-h) + 6px) !important;
    padding-bottom: 15px !important;
  }
  [class$="-hero"] h1 { line-height: 1.12 !important; margin-bottom: 15px !important; }
  [class$="-hero"] p { line-height: 1.55 !important; margin-bottom: 18px !important; }
  .hk-lede__claim { line-height: 1.35 !important; margin-bottom: 14px !important; }
  .trust-badges { margin-bottom: 15px !important; }
  .hk-lede__triad { margin: 11px 0 15px !important; }
  .stars-row { margin-bottom: 15px !important; }
  .hero-ctas { gap: 10px !important; margin-bottom: 18px !important; }
  .hero-ctas > a { padding-top: 13px !important; padding-bottom: 13px !important; }
  .urgency-bar { padding: 13px 15px !important; margin-bottom: 15px !important; }
}



/* ── Große Schirme: der Hero bleibt im Bild ──────────────────────────── */
/* Gemessen bei 1440×900 (verbreitete Notebook-Auflösung): Nur eine Seite
   lief noch über — beamtenkredit mit 947 px. Der Überschuss steckte
   ausschließlich in Weißraum, nicht im Inhalt. Gekürzt wird deshalb nur
   dieser: Fußabstand des Heros, Brotkrume, Bewertungszeile. */
@media (min-width: 901px) {
  [class$="-hero"] > [class$="-hero-content"],
  [class$="-hero"] > [class$="-hero-inner"] {
    padding-bottom: 24px !important;
  }
  [class$="-hero"] .breadcrumb { margin-bottom: 16px !important; }
  [class$="-hero"] .stars-row  { margin-bottom: 18px !important; }
}

/* ── Kennzahlen-Kacheln: Versalien raus ──────────────────────────────── */
/* Auch auf dem Desktop trennte „Erste Rückmeldung garantiert" mitten im
   Wort („ERSTE RÜCKMEL-DUNG"). Ursache sind Versalien mit .05em Laufweite
   in einer 200 px schmalen Spalte. Ohne beides passt derselbe Text bei
   unveränderter Schriftgröße sauber in zwei Zeilen. */
[class*="counter-label"] {
  text-transform: none !important;
  letter-spacing: .01em !important;
}

/* ── Niedrige Fenster (≤ 800 px Höhe) ────────────────────────────────
   ⚠️ Dieser Block steht bewusst GANZ AM ENDE der Datei. Er konkurriert
   mit dem Desktop-Block weiter oben, und beide arbeiten mit !important —
   bei gleicher Spezifität gewinnt der spätere. Ein niedriges Fenster ist
   die engere Bedingung, also muss sie zuletzt greifen. Vorher stand er
   davor, und auf 1280×720 lief der Hero dadurch wieder über.
   Der ursprüngliche Anlass ────────────────────────────────── */
/* Betrifft das iPhone SE (667 px) und jedes Handy im Querformat. Dort
   reicht enger Satz allein nicht — gemessen fehlten je nach Seite 26 bis
   122 px. Was hier zusätzlich greift, ist bewusst gewählt:

   · Die Vertrauensmerkmale treten zurück, WO Kennzahlen-Kacheln stehen.
     Auf diesen Seiten sagen beide dasselbe („Seit 1997" ↔ „25+ Jahre
     Erfahrung", „24h Ersteinschätzung" ↔ „24h Erste Rückmeldung").
     Auf Seiten OHNE Kacheln bleiben sie stehen — dort sind sie der
     einzige Vertrauensbeleg. Genau dafür ist :has() da.
   · Der Einleitungsabsatz bleibt vollständig. Er ist der Text, wegen dem
     jemand bleibt, und er ist für die Suche relevant. */
@media (max-height: 800px) {
  [class$="-hero"] > [class$="-hero-content"],
  [class$="-hero"] > [class$="-hero-inner"] {
    padding-top: calc(var(--hk-head-h) + 6px) !important;
    padding-bottom: 14px !important;
  }
  /* ⚠️ Ohne Breiten-Klammer. Ich hatte sie hier auf `max-width:900`
     eingeschränkt mit der Begründung „breiter Schirm, genug Platz
     nebeneinander" — das geht am Problem vorbei: Die Merkmale brauchen eine
     eigene ZEILE, und die kostet dieselbe Höhe, egal wie breit der Schirm
     ist. Auf einem 1280×720-Notebook lief der Hero dadurch weiter über.
     Ausgeblendet wird nur, wo Kacheln dieselbe Aussage schon tragen
     („Seit 1997" ↔ „25+ Jahre Erfahrung", „24h" ↔ „24h Rückmeldung"). */
  [class$="-hero"]:has([class*="counter-row"]) .trust-badges { display: none !important; }

  /* Auf Seiten OHNE Kacheln (Kapitalbeschaffung, Zwangsversteigerung) sind
     die Merkmale der einzige Vertrauensbeleg — sie bleiben und laufen
     stattdessen in einer schiebbaren Zeile, auch am Rechner. Genau diese
     beiden Seiten liefen bei 1280×720 und auf dem iPhone SE noch über. */
  [class$="-hero"]:not(:has([class*="counter-row"])) .trust-badges {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 7px !important;
    margin-bottom: 12px !important;
  }
  [class$="-hero"]:not(:has([class*="counter-row"])) .trust-badge {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 6px 12px !important;
  }
  [class$="-hero"]:not(:has([class*="counter-row"])) .trust-badges::-webkit-scrollbar { display: none; }
  [class$="-hero"]:not(:has([class*="counter-row"])) .trust-badges { justify-content: flex-start !important; }

  /* Letzter Weißraum, der ohne Verlust weichen kann. */
  [class$="-hero"] .breadcrumb { margin-bottom: 10px !important; }
  [class$="-hero"] h1 { line-height: 1.08 !important; }
  .au-hero-badges { margin-bottom: 10px !important; }
  [class$="-hero"] h1 { margin-bottom: 10px !important; }
  [class$="-hero"] p { line-height: 1.45 !important; margin-bottom: 12px !important; }
  .hk-lede__claim { margin-bottom: 8px !important; }
  .hk-lede__triad { margin: 5px 0 9px !important; }
  .stars-row { margin-bottom: 9px !important; }
  .hero-ctas { gap: 8px !important; margin-bottom: 10px !important; }
  [class*="counter-row"] > [class*="counter"] { padding: 8px 7px !important; }
  [class*="counter-val"] { font-size: clamp(16px, 5.2vw, 21px) !important; }
  .urgency-bar { padding: 9px 11px !important; margin-bottom: 9px !important; }
  /* Die Kleinzeile im Dringlichkeitsband („Vertraulich, ohne Vorleistung –
     erste Einschätzung innerhalb von 24 Stunden") brach auf drei Zeilen um
     und kostete rund 60 px. Beide Aussagen stehen unmittelbar darüber schon
     als Merkmale („Kostenlos & unverbindlich", „24h Ersteinschätzung") —
     auf einem 667 px hohen Schirm ist das eine Wiederholung zu viel. */
  .urgency-micro { display: none !important; }
}

/* ── Kaufmanns-Und in Überschriften ──────────────────────────────────── */
/* Fraunces setzt das „&" als geschwungene Ligatur. Groß und auf einem
   Handy gelesen wirkt das nicht edel, sondern defekt — Calvin am
   10.09.2026: „Dieses & Zeichen sieht auch sehr verbuggt aus."
   Es bekommt deshalb die Grotesk des Fließtexts. Nur dieses eine Zeichen;
   die Überschrift bleibt sonst Fraunces. */
.hk-amp {
  font-family: var(--hk-font-text);
  font-weight: 700;
  font-size: .88em;          /* die Grotesk baut größer, das gleicht aus */
  letter-spacing: 0;
  padding: 0 .04em;
}