/* ═══════════════════════════════════════════════════════════════════════
   HANSEKREDIT — Startseiten-Slideshow
   Aufbau und Bedienung übernommen von der STRUCTON-Startseite (Calvins
   ausdrückliche Vorgabe 08.09.2026): linke Bildschirmhälfte blättert
   zurück, rechte vor, dazu Wischen, Pfeiltasten, Punkte, Autoplay mit
   Fortschrittsbalken und Fortschrittsring am Zeiger.

   Was NICHT übernommen wurde, und warum: Structons Versalien-Display-
   Schrift und sein Rot. Hansekredit spricht DM Sans in gemischter
   Schreibung und akzentuiert in Orange — eine 1:1-Kopie der Typografie
   hätte die Marke des Kunden gegen die der Agentur getauscht.

   Farben kommen aus den :root-Tokens der Startseite (--orange, --white).
   Keine Hex-Werte doppeln, außer für die Verläufe der Freihalte-Ebene.
   ═══════════════════════════════════════════════════════════════════════ */

.hslides {
  /* 12.09.2026: Das flache #001233 wirkte düster (Calvin). Ersetzt durch den
     DREISTUFIGEN Verlauf der Produktseiten-Heros — dieselben drei Farben wie
     auf eigentuemerkredit/modernisierungskredit/beamtenkredit, damit die
     Startseite und die Landeseiten denselben Himmel haben. */
  --hs-ink: #001e6e;                         /* Markenblau, dunkle Stufe */
  --hs-blue: #003d99;                        /* = --blue-dark der Seite */
  --hs-bright: #0060d4;                      /* helle Stufe */
  --hs-gutter: clamp(20px, 5vw, 64px);
  --hs-mute: rgba(255, 255, 255, .93);   /* 10.09.: von .74 angehoben — auf Fotos war .74 zu schwach */
  position: relative;
  /* Der Kopf der Seite ist sticky und steht ÜBER der Slideshow — volle
     100svh würden Punkte und Fortschrittsbalken unter die Bildkante
     schieben (gemessen: 74 px zu viel). Die tatsächliche Kopfhöhe setzt
     homeslides.js als --hs-header; der Wert hier ist nur der Rückfall. */
  height: calc(100svh - var(--hs-header, 74px));
  /* Kein großer Mindestwert mehr: Er war der Grund, warum in niedrigen
     Fenstern (Notebook mit offener Konsole, Handy quer) unten etwas
     abgeschnitten wurde. Der Inhalt passt sich stattdessen an — siehe die
     höhenabhängigen Größen weiter unten. */
  /* Der Boden darf nie höher sein als der Platz, der überhaupt da ist —
     sonst ragt die Sektion beim Handy im Querformat unter die Bildkante. */
  min-height: min(420px, calc(100svh - var(--hs-header, 74px)));
  max-height: 1100px;
  background: linear-gradient(135deg, var(--hs-ink) 0%, var(--hs-blue) 40%, var(--hs-bright) 100%);
  color: var(--white);
  overflow: hidden;
  touch-action: pan-y;                        /* vertikal scrollen bleibt frei */
}
@media (pointer: fine) { .hslides.has-cursor { cursor: none; } }

.hslide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .95s ease, visibility 0s linear .95s;
}
.hslide.is-active {
  opacity: 1; visibility: visible; z-index: 1;
  transition: opacity .95s ease;
}

/* ── Bild/Video ───────────────────────────────────────────────────── */
.hslide__media { position: absolute; inset: 0; }
.hslide__media img,
.hslide__media video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transform: scale(1.07);
  transition: transform 8s linear;            /* langsamer Zoom, solange sichtbar */
}
.hslide.is-active .hslide__media img,
.hslide.is-active .hslide__media video { transform: scale(1); }

/* Freihalte-Ebene: Text steht IMMER auf abgedunkeltem Verlauf, egal wie
   hell das Foto an dieser Stelle ist. Zwei Verläufe — von unten für die
   Textzone, von links für die Lesekante. */
.hslide__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  /* 10.09.2026 kräftiger gezogen. Vorher endete der Verlauf bei 64 % und
     ließ die Überschrift auf hellen Fotos (Glasfassade, Himmel) fast
     verschwinden — auf dem Handy, wo der Text weiter nach oben reicht,
     besonders. Gemessen auf der hellsten Folie stieg der Kontrast der
     Fließtextzeile damit von 3,1:1 auf über 7:1. */
  /* 12.09.2026: Der TON wandert mit — vorher lag über jedem Foto dasselbe
     fast schwarze Navy, und genau das machte die Slideshow düster. Nach
     oben hin wird der Schleier jetzt heller und blauer.

     ⚖️ Die Deckkraft ist die Waage zwischen Lesbarkeit und Foto. Erst auf
     .96/.84 gezogen, um den Kontrast des alten Navy exakt zu halten — das
     übertönte aber die Aufnahme, die Fassade verschwand unter einem
     Blaufilter. Jetzt .95/.76: Der Titel steht im schlechtesten Fall
     (Folie 4) bei 4,44:1, der Fließtext bei 8,1–11,2:1. Die Überschrift
     ist fett und mindestens 24,8 px, zählt also als Großschrift — dort
     verlangt AA 3:1. Der Abstand ist bewusst großzügig, nicht knapp.
     Gemessen am 12.09. pixelweise über alle sechs Folien. */
  background:
    linear-gradient(to top, rgba(0, 30, 110, .95) 0%, rgba(0, 30, 110, .76) 34%, rgba(0, 45, 135, .34) 62%, rgba(0, 96, 212, .18) 100%),
    linear-gradient(100deg, rgba(0, 30, 110, .72) 0%, rgba(0, 61, 153, .28) 45%, transparent 68%);
}

/* ── Text ─────────────────────────────────────────────────────────── */
.hslide__copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  width: min(100%, 1200px); margin-inline: auto;
  /* Der untere Abstand ist die Höhe der Bedienleiste plus Luft. So kann der
     Text die Punkte und den Fortschrittsbalken nie überdecken, egal wie hoch
     der Bildschirm ist. */
  /* Der untere Abstand hält ZWEI Dinge frei: die Bedienleiste der Slideshow
     und den schwebenden WhatsApp-Knopf unten links. Bei niedrigen Fenstern
     lag der Knopf sonst auf dem KI-Hinweis — auf einer Pflichtangabe
     (gemessen bei 812×375). Deshalb ein Mindestwert, kein reines clamp. */
  padding: 0 var(--hs-gutter) max(clamp(3.6rem, 9svh, 7.5rem), 6.5rem);
  max-height: 100%;
}
.hslide__kicker {
  font-size: clamp(.94rem, 1.6svh, 1rem); font-weight: 600; letter-spacing: .12em;   /* Boden 15 px */
  text-transform: uppercase; color: var(--orange);
  display: flex; align-items: center; gap: .6em;
  margin: 0 0 clamp(.5rem, 1.4svh, .9rem);
}
.hslide__kicker::before {
  content: ''; width: 22px; height: 2px; background: currentColor; flex: none;
}
.hslide__title {
  font-weight: 800; line-height: 1.08; letter-spacing: -1px;
  margin: 0; color: var(--white);
  /* Zweite Absicherung neben dem Verlauf: greift genau dort, wo ein Foto
     eine helle Stelle direkt hinter einem Buchstaben hat. */
  text-shadow: 0 1px 2px rgba(0, 18, 51, .45), 0 2px 18px rgba(0, 18, 51, .35);
  /* Die Größe hängt an der KLEINEREN der beiden Achsen. Nur an der Breite
     gebunden wächst eine Überschrift auf einem breiten, niedrigen Fenster
     über die verfügbare Höhe hinaus — genau dort reißt so ein Hero sonst. */
  font-size: clamp(1.55rem, min(5.2vw, 7.4svh), 4.2rem);
  max-width: 18ch;
  overflow-wrap: break-word;                 /* lange Wörter wie „Immobilieneigentümer" */
}
/* ── Schreibmaschine in der Überschrift (12.09.2026) ──────────────
   Nur auf der ersten Folie. Was vorgelesen wird, hält das aria-label der
   H1 fest; hier läuft die Schau.

   🔑 JEDE FRAGE STEHT AUF EINER ZEILE, auf jeder Bildschirmbreite, und
   keine ragt über den Rand (Calvin 12.09.).

   Zwei Dinge zusammen erreichen das, und eines allein reicht nicht:
   `white-space: nowrap` verbietet den Umbruch — für sich genommen würde
   die Frage damit aber aus dem Bild laufen, denn `.hslides` schneidet ab.
   Die Größe muss also zur längsten Frage passen, und die hängt nicht an
   der Fensterbreite allein: Die Textspalte ist bei 1200 px gedeckelt, ein
   reiner vw-Wert liefe darüber hinaus ins Leere. Deshalb MISST
   homeslides.js die längste Frage und setzt --hs-tw-size.

   ⚠️ `max-width` muss weg. Die 18ch der normalen Überschrift sind genau
   das, was die längste Frage vorher in die zweite Zeile zwang.

   Vor der Messung bleibt der Umbruch erlaubt: Lieber eine zweite Zeile für
   den Bruchteil einer Sekunde als ein Satz, der aus dem Bild ragt. Sichtbar
   wird das nicht — die Textspalte blendet ohnehin erst nach 250 ms ein. */
.hslide__title--tw {
  max-width: none;
}
.hslide__title--tw.hs-tw-bereit {
  font-size: var(--hs-tw-size);
}
.hslide__title--tw.hs-tw-bereit .hs-tw {
  white-space: nowrap;
}
.hs-tw { display: block; }
/* Der Balken blinkt nur, solange getippt wird — ein Dauerblinken neben
   stehendem Text liest sich wie ein Fehler. */
.hs-tw::after {
  content: '';
  display: inline-block;
  width: .06em; height: .82em;
  margin-left: .06em;
  vertical-align: -.06em;
  background: var(--orange);
  animation: hs-tw-blink 1.05s steps(1, end) infinite;
}
.hs-tw[data-tw-tippt]::after { animation: none; opacity: 1; }
@keyframes hs-tw-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Weniger Bewegung: kein Tippen, kein Blinken — der erste Satz steht. */
@media (prefers-reduced-motion: reduce) {
  .hs-tw::after { animation: none; }
}
.hslide__lead {
  font-size: clamp(1rem, min(1.4vw, 2.2svh), 1.2rem); line-height: 1.6;
  color: var(--hs-mute); max-width: 56ch; margin: clamp(.5rem, 1.4svh, 1rem) 0 0;
  text-shadow: 0 1px 2px rgba(0, 18, 51, .5);
  /* Bei wenig Höhe auf drei Zeilen begrenzen statt den Block wachsen lassen */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
}
/* Der erste Satz trägt seit dem 12.09. die Aussage, die vorher in der
   Überschrift stand — die stellt jetzt nur noch Fragen. Deshalb etwas mehr
   Gewicht und volles Weiß: Er ist keine Betonung im Fließtext, sondern das,
   was der Hero überhaupt anbietet. */
.hslide__lead strong {
  font-weight: 600;
  color: var(--white);
}

.hslide__ctas {
  display: flex; gap: .7rem; flex-wrap: wrap;
  margin-top: clamp(.9rem, 2.4svh, 1.7rem);
}

/* Offenlegung nach Art. 50 Abs. 4 UAbs. 1 KI-VO für die erzeugte Aufnahme.
   Bewusst NICHT kleingedruckt weggeschoben: Abs. 5 verlangt sie in klarer
   und eindeutiger Weise und barrierefrei. Weiß auf dem abgedunkelten
   Verlauf liegt deutlich über dem AA-Kontrast. */
.hslide__kihinweis {
  margin: clamp(.6rem, 1.6svh, 1rem) 0 0;
  font-size: .9375rem; line-height: 1.45;  /* 15 px — Untergrenze der ganzen Seite, und eine Pflichtangabe erst recht */
  color: rgba(255, 255, 255, .82);
  letter-spacing: .01em;
}

/* Textzeilen steigen beim Aktivieren gestaffelt auf */
.hslide__copy > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
}
.hslide.is-active .hslide__copy > *:nth-child(1) { transition-delay: .25s; }
.hslide.is-active .hslide__copy > *:nth-child(2) { transition-delay: .34s; }
.hslide.is-active .hslide__copy > *:nth-child(3) { transition-delay: .43s; }
.hslide.is-active .hslide__copy > *:nth-child(4) { transition-delay: .52s; }
.hslide.is-active .hslide__copy > *:nth-child(5) { transition-delay: .61s; }
.hslide.is-active .hslide__copy > * { opacity: 1; transform: none; }

/* ── Bedienung: Zähler, Punkte, Fortschritt ──────────────────────── */
/* Zähler und Punkte stehen BEIDE rechts — anders als bei Structon.
   Grund: Unten links schwebt der WhatsApp-Knopf dieser Website und lag
   genau auf dem Zähler (gemessen, nicht vermutet). */
.hslides__ui {
  position: absolute; z-index: 3; left: 0; right: 0;
  bottom: clamp(1.1rem, 3svh, 1.9rem);
  display: flex; align-items: center; justify-content: flex-end;
  gap: clamp(.9rem, 2vw, 1.6rem);
  padding-inline: var(--hs-gutter); pointer-events: none;
}
.hslides__count { font-size: .9375rem; letter-spacing: .12em; color: var(--hs-mute); }
.hslides__count b { color: var(--white); font-weight: 600; }
.hslides__dots { display: flex; gap: .45rem; pointer-events: auto; }
.hdot {
  position: relative; width: 32px; height: 24px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.hdot::before {
  content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 2px;
  background: rgba(255, 255, 255, .3); border-radius: 2px;
  transition: background .3s, transform .3s;
}
.hdot:hover::before { background: rgba(255, 255, 255, .62); }
.hdot.is-on::before { background: var(--orange); transform: scaleY(1.6); }
.hdot:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

.hslides__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3;
  background: rgba(255, 255, 255, .1);
}
.hslides__bar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #FFD166, var(--orange));
  transform-origin: left; transform: scaleX(0);
}

/* ── Eigener Zeiger: links zurück, rechts vor ─────────────────────── */
.hcursor {
  position: fixed; z-index: 80; width: 58px; height: 58px; border-radius: 999px;
  background: rgba(0, 18, 51, .55);
  border: 1px solid rgba(255, 255, 255, .25);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: grid; place-items: center; pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.5);
  transition: opacity .22s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
}
.hcursor.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hcursor.is-down { transform: translate(-50%, -50%) scale(.82); }
.hcursor svg {
  width: 22px; height: 22px; stroke: var(--white); stroke-width: 1.8; fill: none;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.hcursor.is-left svg { transform: rotate(180deg); }
/* Fortschrittsring auf dem Kreisrand: startet oben, läuft im Uhrzeigersinn.
   `pathLength="1"` macht den Versatz direkt aus dem Autoplay-Fortschritt
   setzbar. Die eigene Regel schlägt die 22px oben — sonst wäre der Ring
   so groß wie der Pfeil. */
.hcursor .hcursor__ring {
  position: absolute; inset: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  transform: rotate(-90deg);
}
.hcursor.is-left .hcursor__ring { transform: rotate(-90deg); }  /* Pfeil dreht, Ring nicht */
.hcursor .hcursor__ring circle {
  fill: none; stroke: var(--orange); stroke-width: 2;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}

/* 📌 Zum seitlichen Scrollen auf Handys: Es kommt NICHT aus dieser Slideshow.
   Gemessen bei 320 px Breite: `#hkNavMobile` (die geschlossene mobile
   Navigationsschublade, fest positioniert, um 320 px nach rechts geschoben)
   und eine absolut gesetzte Grafik weiter unten auf der Seite reichen über
   den Rand. Ein `overflow-x: clip` auf `html` wurde versucht und hat es
   NICHT behoben — deshalb steht es hier nicht drin. Die Ursache gehört an
   die Navigation, nicht in ein Slideshow-Stylesheet.

/* ── Vertrauensband direkt unter der Slideshow ────────────────────── */
/* Die Merkmale und Kennzahlen standen vorher im alten Hero. Sie sind
   Konversionsträger und gehen mit dem Umbau nicht verloren, sondern
   rücken als schmales Band darunter. */
.hs-trust {
  background: var(--hs-ink, #001233);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: clamp(1.1rem, 2.6vw, 1.6rem) var(--hs-gutter, 24px);
}
.hs-trust__inner {
  width: min(100%, 1200px); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .6rem clamp(1rem, 3vw, 2.4rem);
}
.hs-trust__badge {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .9375rem; font-weight: 500; color: rgba(255, 255, 255, .84);
  white-space: nowrap;
}
.hs-trust__badge i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none;
}
/* ⚠️ 10.09.2026: Hier standen DREI Kennzahlen mit `white-space: nowrap`,
   auf dem Handy zusätzlich mit `justify-content: space-between` und voller
   Breite. Auf 390 px brauchten sie zusammen rund 470 px — sie liefen
   sichtbar ineinander („27+Jahre Erfahru4,9★ Bewertu240+Bewertungen").
   Jetzt sind es zwei, und sie dürfen umbrechen. */
.hs-trust__stats {
  display: flex; flex-wrap: wrap;
  gap: .4rem clamp(1rem, 3vw, 2.2rem);
  margin-left: auto;
}
.hs-trust__stat { display: flex; align-items: baseline; gap: .45em; white-space: nowrap; }
.hs-trust__stat b { font-size: 1.05rem; font-weight: 800; color: var(--white); }
.hs-trust__stat span { font-size: .9375rem; color: rgba(255, 255, 255, .74); }
@media (max-width: 860px) {
  .hs-trust__stats { margin-left: 0; width: 100%; justify-content: flex-start; }
}

/* ── Feinschliff kleine Schirme ───────────────────────────────────── */
@media (max-width: 700px) {
  /* Hier stand `min-height: 560px` — das schlug den Boden oben und machte die
     Sektion auf kleinen Geräten wieder zu hoch (gemessen: 560 statt 494 bei
     320×568). Der Boden gehört an EINE Stelle. */
  .hslide__copy { padding-bottom: clamp(4.2rem, 12svh, 6rem); }
  .hslide__lead { max-width: 42ch; }
  .hslides__count { display: none; }
  .hslides__ui { justify-content: center; }
  .hslide__ctas .hero-cta,
  .hslide__ctas .hero-cta-secondary { font-size: 16px; padding: 15px 24px; }
}
/* Niedrige Fenster in Stufen — nicht an die Ausrichtung gebunden, denn ein
   halbhohes Notebook-Fenster hat dasselbe Problem wie ein Handy im Querformat.
   Was zuerst weicht, ist der Fließtext; was NIE weicht, ist der KI-Hinweis:
   Er ist eine Pflichtangabe, kein Schmuck. */
@media (max-height: 640px) {
  .hslide__lead { -webkit-line-clamp: 2; }
  /* Auf Folie 1 trägt der erste Satz die Aussage des Hauses. Zwei Zeilen
     schnitten ihn mitten im Wort ab („…und Finanzierungen für" — Ende),
     und das liest sich wie ein Fehler. Hier weicht deshalb der Rest des
     Absatzes ganz, und der erste Satz steht vollständig. Drei Zeilen
     passen: gemessen bei 320×568, der Hero bleibt im Schirm. */
  .hslide__lead--tw { -webkit-line-clamp: 3; }
  .hslide__lead--tw .hs-lead-rest { display: none; }
  .hslide__ctas .hero-cta,
  .hslide__ctas .hero-cta-secondary { font-size: 15px; padding: 13px 22px; }
}
@media (max-height: 520px) {
  .hslide__lead { display: none; }
  .hslide__kicker { margin-bottom: .45rem; }
  .hslides__bar { height: 2px; }
}

/* Sehr schmale Geräte: Knöpfe untereinander statt gequetscht nebeneinander */
@media (max-width: 380px) {
  .hslide__ctas { flex-direction: column; align-items: stretch; }
  .hslide__ctas .hero-cta,
  .hslide__ctas .hero-cta-secondary { justify-content: center; }
}

/* ── Bewegung reduzieren ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hslide, .hslide.is-active { transition: none; }
  .hslide__media img, .hslide__media video,
  .hslide.is-active .hslide__media img,
  .hslide.is-active .hslide__media video { transform: none; transition: none; }
  .hslide__copy > * { opacity: 1; transform: none; transition: none; }
  .hcursor { display: none; }
}