/* =====================================================================
   kredit.css  —  Unterseite Kreditvermittlung (§ 34c). Eigenstaendige,
   statische Seite nach dem Muster der Kostenseiten: gleiche CI, gleiche
   Fonts (selbst gehostet), root-relative Pfade (/assets ...), noindex.
   KEINE Karussell-Mechanik — das Trio steht still.
   ===================================================================== */
@font-face { font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/anton-regular.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/inter-regular.woff2') format('woff2'); }

:root {
  --navy:#2d3e9e; --navy-d:#1d2a63; --orange:#c97b28; --cyan:#4ab5e8;
  --bg:#faf8f4; --ink:#1d2a63;
  --dur:700ms; --ease:cubic-bezier(0.4,0,0.2,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--ink); line-height:1.7; overflow-x:hidden; }
a { color:inherit; }

/* Textlink mit Cyan-Pfeil (wie auf der Startseite) */
.k-link { display:inline-flex; align-items:center; gap:7px; font-weight:600; text-decoration:none; color:var(--navy); }
.k-link .k-arrow { display:inline-block; transition:transform 150ms ease; }
.k-link:hover .k-arrow { transform:translateX(4px); }

/* Antrag-Button (Anton-Pille, weisse Fuellung, Navy-Text — der einzige Weg) */
.k-btn {
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:'Anton',sans-serif; font-synthesis: none; font-weight:400;
  font-size:clamp(18px,2.6vw,26px); letter-spacing:.01em; text-transform:uppercase;
  color:var(--navy-d); background:#fff; text-decoration:none; border:0;
  padding:14px 28px; border-radius:999px;
  transition:transform 150ms ease, box-shadow 150ms ease;
  box-shadow:0 6px 20px rgba(0,0,0,0.18);
}
.k-btn:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,0.24); }
.k-btn:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.k-btn svg { width:22px; height:22px; }

/* ---------- 1 HERO (Navy, Ghost KREDIT, Trio still, unten verankert) ---------- */
.k-hero {
  position:relative; background:var(--navy); color:#fff;
  min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column;
}
.k-brand {
  position:relative; z-index:4;
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  padding:clamp(18px,3vw,30px) clamp(16px,4vw,44px) 0;
  align-self:flex-start;
}
.k-brand img { height:clamp(40px,6vw,54px); width:auto; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.25)); }
.k-brand .bw { display:flex; flex-direction:column; gap:3px; }
/* Wortmarke (CI): Name laut in Anton, Claim leise in Inter */
.k-brand .bn { font-family:'Anton',sans-serif; font-weight: 400; font-synthesis: none; font-size:clamp(15px,1.9vw,18px); letter-spacing:0.08em; text-transform:uppercase; color:#fff; opacity:1; line-height:1; }
.k-brand .bc { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(10px,1.4vw,12px); letter-spacing:0.14em; text-transform:uppercase; color:#fff; opacity:0.85; line-height:1; }

/* ---------- NAVIGATION (gespiegelt aus start-hero.css .hnav, damit /kredit/
   dieselbe Kopfnavigation mit Burger hat wie die Startseite) ---------- */
.hnav {
  position: absolute; top: 20px; right: 16px; z-index: 61;
  display: flex; align-items: center; gap: 22px;
}
@media (min-width: 640px) { .hnav { top: 34px; right: 32px; gap: 30px; } }
.hnav-links { display: none; list-style: none; align-items: center; gap: 28px; }
@media (min-width: 860px) { .hnav-links { display: flex; } }
.hnav-links a {
  position: relative; display: block;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; text-decoration: none;
  opacity: 0.82; transition: opacity 200ms var(--ease);
}
.hnav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px;
  background: #fff; transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease);
}
.hnav-links a:hover, .hnav-links a[aria-current] { opacity: 1; }
.hnav-links a:hover::after, .hnav-links a[aria-current]::after { transform: scaleX(1); }
.hnav a:focus-visible, .hnav button:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.hnav-ig {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.55); color: #fff;
  opacity: 0.85; transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.hnav-ig:hover { opacity: 1; transform: scale(1.08); }
.hnav-ig svg { width: 17px; height: 17px; }
.hnav-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 34px; height: 34px; padding: 0;
  background: none; border: none; cursor: pointer;
}
@media (min-width: 860px) { .hnav-toggle { display: none; } }
.hnav-toggle span {
  display: block; height: 1.5px; width: 22px; background: #fff;
  transition: transform 260ms var(--ease), opacity 200ms var(--ease);
}
.hnav.open .hnav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hnav.open .hnav-toggle span:nth-child(2) { opacity: 0; }
.hnav.open .hnav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 859px) {
  .hnav.open .hnav-links {
    display: flex; flex-direction: column; align-items: flex-end; gap: 18px;
    position: absolute; top: 46px; right: 0;
    padding: 22px 24px; border-radius: 10px;
    background: rgba(20, 26, 60, 0.82);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .hnav.open .hnav-links a { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hnav-links a, .hnav-links a::after, .hnav-ig, .hnav-toggle span { transition: none; }
}

/* DREI-BAENDER-HERO (Ueberlagerung aufgegeben — das Trio ist zu breit):
   Band 1 = Kopf (Logo, s.o.), Band 2 = Ghost KREDIT frei ueber volle Breite
   (NICHTS davor, vollstaendig lesbar), Band 3 = Hauptband (Text links, Trio
   rechts, gemeinsame Ober-/Unterkante). Trio kleiner -> Fusslinie mit Luft. */

/* Band 2: Ghost KREDIT — eigenes Band, zentriert, nichts davor */
.k-ghost {
  position:relative; z-index:1;
  display:flex; justify-content:center; align-items:center;
  padding:clamp(4px,1.5vh,16px) 12px 0;
  pointer-events:none; user-select:none;
}
.k-ghost span {
  font-family:'Anton',sans-serif; font-weight: 400; font-synthesis: none;
  font-size:clamp(50px, 15vw, 204px);   /* ~15% kleiner als zuvor */
  line-height:0.9; letter-spacing:-0.01em; text-transform:uppercase; white-space:nowrap;
  color:#fff; opacity:0.95;             /* Farbe/Deckkraft unveraendert */
}

/* Band 3: Hauptband */
.k-hero-grid {
  flex:1; min-height:0;
  display:grid; grid-template-columns:1fr; align-items:stretch;
}
.k-hero-media { order:-1; }                  /* Mobil: Trio ueber dem Text */
@media (min-width:860px) {
  .k-hero-grid { grid-template-columns:1fr 1fr; }
  .k-hero-media { order:0; }
}

/* Bildzone: Trio unten verankert, GROESSER + HOEHER (Fusslinie ~ Unterkante
   des Kleingedruckten, nicht darunter -> mehr padding-bottom hebt die Fuesse) */
/* Basis = Mobil: Trio im Fluss, unten verankert, mit Luft darunter */
.k-hero-media {
  position:relative; display:flex; align-items:flex-end; justify-content:center;
  min-height:0; overflow:hidden;
  padding:0 clamp(12px,3vw,28px) clamp(14px,2.4vh,26px);
}
.k-fig {
  display:block; width:auto; max-width:100%;
  max-height:min(52vh,460px); height:auto;
  object-fit:contain; object-position:bottom; opacity:1;
}

/* Textzone: oben ausgerichtet -> H1 rueckt nah an den Ghost (kein Loch) */
.k-hero-text {
  position:relative; z-index:4;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:clamp(10px,1.5vh,20px) clamp(16px,4vw,44px) clamp(24px,4vw,44px);
  max-width:640px;
}
@media (min-width:860px) {
  /* Desktop: groesserer Abstand Ghost->H1 + ganzen Textblock tiefer setzen
     (padding-top). Ghost-Band bleibt unberuehrt. Nur Desktop; Mobil unveraendert. */
  .k-hero-text { padding-left:clamp(28px,5vw,64px); padding-top:clamp(56px,9vh,104px); }
  /* Desktop: Trio ABSOLUT — Fusslinie folgt dem tieferen Textblock (~722px vom
     Hero-Top). Kappung per max(): auf niedrigen Fensterhoehen rutschen die Fuesse
     NICHT unter den Viewport (>=24px Rand) -> nie angeschnitten. Groesser; darf
     oben RECHTS neben KREDIT ragen. Absolut = kein Aufblaehen des Bandes. */
  .k-hero-media { overflow:visible; padding:0; }
  .k-fig {
    position:absolute; left:50%; transform:translateX(-50%);
    bottom:max(56px, calc(100vh - 722px));
    height:min(58vh,520px); max-height:none; width:auto;
  }
}
.k-hero-text h1 {
  font-family:'Anton',sans-serif; font-synthesis: none; font-weight:400;
  font-size:clamp(34px,6.2vw,62px); line-height:1.02; letter-spacing:-0.02em;
  text-transform:uppercase; margin-bottom:12px;
}
.k-hero-text .k-hsub {
  font-size:clamp(17px,2.4vw,22px); line-height:1.5; color:rgba(255,255,255,0.92);
  margin-bottom:clamp(18px,3vh,26px);
}
/* hzeile ENTKASTET: freie Zeile ohne Hintergrundflaeche (wie der Kostenblock im Mobil-Hero) */
.k-hero-text .k-hzeile {
  display:block; font-size:clamp(14px,1.9vw,17px); font-weight:600;
  color:#fff; margin-bottom:clamp(18px,3vh,26px);
}
.k-hero-text .k-btn { align-self:flex-start; margin-bottom:clamp(16px,2.6vh,22px); }
.k-fine {
  font-size:12.5px; line-height:1.6; color:rgba(255,255,255,0.72); max-width:560px;
}
.k-fine a { color:var(--cyan); }
/* Persoenliches Video (natives <video>, kein vslot auf /kredit/) */
.k-video { display:block; width:100%; max-width:760px; margin:0 auto; border-radius:16px;
  background:#000; aspect-ratio:16/9; }
/* Erstinfo-PDF: optisch als Link, aber NICHT klickbar (PDF fehlt, Blocker B4) */
.k-pdflink { color:var(--cyan); text-decoration:underline; cursor:default; }

/* Mobil: Baender stapeln (Kopf, Ghost, Trio, Text). Ghost fuellt die Breite,
   Trio kleiner mit Luft unter der Fusslinie. */
@media (max-width:859px) {
  .k-ghost span { font-size:clamp(48px, 18vw, 128px); }   /* ~15% kleiner */
}

/* ---------- generische Sektionen ---------- */
.k-sec { padding:clamp(56px,10vh,120px) clamp(16px,5vw,44px); }
.k-inner { max-width:840px; margin:0 auto; }
.k-h2 {
  font-family:'Anton',sans-serif; font-synthesis: none; font-weight:400;
  font-size:clamp(30px,5.5vw,60px); line-height:1.04; letter-spacing:-0.02em;
  text-transform:uppercase; color:var(--navy-d); margin-bottom:clamp(18px,3vh,28px);
}
.k-sec p { font-size:clamp(16px,2vw,19px); line-height:1.75; color:#2a3670; max-width:660px; margin-bottom:16px; }
.k-sec p:last-child { margin-bottom:0; }

/* ---------- 3 DREI SCHRITTE (grosse Ziffern) ---------- */
.k-steps { background:#fff; }
.k-step {
  display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,4vw,34px); align-items:start;
  padding:clamp(24px,4vh,42px) 0; border-top:1px solid rgba(45,62,158,0.14);
}
.k-step .n {
  font-family:'Anton',sans-serif; font-weight: 400; font-synthesis: none; font-size:clamp(48px,11vw,104px);
  line-height:0.85; color:var(--orange); opacity:0.9;
}
.k-step h3 {
  font-family:'Anton',sans-serif; font-synthesis: none; font-weight:400;
  font-size:clamp(20px,3.2vw,32px); line-height:1.2; text-transform:uppercase;
  color:var(--navy); margin-bottom:8px;
}
.k-step p { font-size:clamp(15.5px,1.9vw,18px); line-height:1.7; color:#2a3670; max-width:560px; margin:0; }
.k-steps-cta { margin-top:clamp(28px,5vh,44px); }

/* ---------- 5 ABGRENZUNGSBAND (ruhig, wie ein Hinweis) ---------- */
.k-band {
  background:#f2ede3; border-top:1px solid #e0d8c9; border-bottom:1px solid #e0d8c9;
  padding:clamp(40px,7vh,76px) clamp(16px,5vw,44px);
}
.k-band-inner { max-width:720px; margin:0 auto; }
.k-band h2 {
  font-family:'Anton',sans-serif; font-synthesis: none; font-weight:400;
  font-size:clamp(20px,3vw,30px); line-height:1.15; text-transform:uppercase;
  letter-spacing:0.01em; color:var(--navy-d); margin-bottom:14px;
}
.k-band p { font-size:14.5px; line-height:1.7; color:#5a648f; max-width:640px; margin-bottom:16px; }
.k-band .k-link { color:var(--navy); font-size:15px; }

/* ---------- 6 CTA (Navy) ---------- */
.k-cta-sec { background:linear-gradient(165deg,var(--navy-d) 0%,var(--navy) 72%,#26347f 100%); color:#fff; }
.k-cta-sec .k-h2 { color:#fff; }
.k-cta-sec p { color:rgba(255,255,255,0.90); }
.k-cta-sec .k-btn { margin-top:clamp(24px,4vh,36px); }

/* ---------- 7 RUECKKEHR-FLAECHE (klein, ruhig, unter dem CTA) ---------- */
.k-return { background:var(--navy-d); color:rgba(255,255,255,0.72); padding:0 clamp(16px,5vw,44px) clamp(40px,7vh,72px); }
.k-return-inner { max-width:840px; margin:0 auto; padding-top:clamp(24px,4vh,36px); border-top:1px solid rgba(255,255,255,0.14); }
.k-return p { font-size:14.5px; line-height:1.7; max-width:620px; }
.k-return .k-link { color:var(--cyan); margin-top:8px; }

/* ---------- 8 FAQ (Akkordeon, Antworttext im initialen HTML) ---------- */
.k-faq { background:#fff; }
.k-faq .k-h2 { margin-bottom:clamp(24px,4vh,40px); }
.k-faq details { border-bottom:1px solid rgba(45,62,158,0.14); }
.k-faq summary {
  list-style:none; cursor:pointer; position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:clamp(18px,3vh,26px) 40px clamp(18px,3vh,26px) 0;
  font-family:'Anton',sans-serif; font-synthesis: none; font-weight:400;
  font-size:clamp(17px,2.4vw,24px); line-height:1.25; text-transform:uppercase;
  color:var(--navy);
}
.k-faq summary::-webkit-details-marker { display:none; }
.k-faq summary::after {
  content:''; position:absolute; right:4px; top:50%; width:12px; height:12px;
  margin-top:-9px; border-right:2px solid var(--orange); border-bottom:2px solid var(--orange);
  transform:rotate(45deg); transition:transform 200ms var(--ease);
}
.k-faq details[open] summary::after { transform:rotate(-135deg); }
.k-faq summary:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
.k-faq .k-faq-a { padding:0 0 clamp(20px,3vh,28px); }
.k-faq .k-faq-a p { font-size:clamp(15.5px,1.9vw,17.5px); line-height:1.75; color:#2a3670; max-width:660px; margin-bottom:12px; }
.k-faq .k-faq-a p:last-child { margin-bottom:0; }

/* ---------- FOOTER (minimal, wie die Kostenseiten) ---------- */
.k-foot { background:var(--bg); color:#5a648f; text-align:center; padding:clamp(28px,5vh,48px) 20px; font-size:13.5px; border-top:1px solid #e6e2d8; }
.k-foot a { color:var(--navy); text-decoration:none; }
.k-foot a:hover { text-decoration:underline; }

/* ---------- Scroll-Reveal (nur transform/opacity) ---------- */
.rv { opacity:0; transform:translateY(24px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.rv.in { opacity:1; transform:none; }
.rv.d1 { transition-delay:100ms; } .rv.d2 { transition-delay:200ms; } .rv.d3 { transition-delay:300ms; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity:1; transform:none; transition:none; }
  .k-btn, .k-link .k-arrow, .k-faq summary::after { transition:none !important; }
}