/* Karl Lorenz — Finanzierungs-Check unter /immobilien/finanzierungs-check/ (DE und RU).
   Die Seite laeuft in der Huelle der Website: Kopf, Menue und Fuss gehoeren dem Theme,
   hier steht nur der Inhalt. Alles ist unter .fin gekapselt, Zuruecksetzungen stehen in
   :where(), damit eigene Klassen nie verlieren.
   Das Kreuz in den Antwortfeldern kommt aus dem Papierbogen der Maklerin („setzen Sie ein X"). */

.fin{
  --paper:#F6F1E8;
  --paper-2:#EFE7DA;
  --cream:#F3ECE1;
  --white:#fff;
  --ink:#1E1915;
  --ink-soft:#453D36;
  --muted:#8A8177;
  --line:#E2D9CB;
  --accent:#D15B3E;
  --accent-2:#B0431F;
  --e-display:cubic-bezier(.16,1,.3,1);
  --e-body:cubic-bezier(.25,.46,.45,.94);
  --e-ui:cubic-bezier(.4,0,.2,1);
  --serif:ivypresto-display,"Playfair Display",Georgia,serif;
  --gut:clamp(18px,4.4vw,40px);
  position:relative;
  background:var(--cream);
  color:var(--ink);
  font-family:'Open Sans',system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  overflow-x:clip;
}
.fin *,.fin *::before,.fin *::after{box-sizing:border-box}
.fin :where(h1,h2,h3,p,ul,li,dl,figure,figcaption,fieldset,legend){margin:0;padding:0;border:0}
.fin :where(h1,h2,h3){font-family:var(--serif);font-weight:300;letter-spacing:-.018em;line-height:1.1;color:inherit;text-transform:none}
.fin :where(ul){list-style:none}
.fin :where(a){color:inherit;text-decoration:none}
.fin :where(a:hover){text-decoration:underline}
.fin :where(legend){display:block;width:100%;float:none}
.fin-wrap{width:100%;max-width:1120px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.fin-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}

/* Das Theme malt Radios und Haken als Pseudo-Element am label und faerbt eigene Knoepfe um.
   Auf dieser Seite zeichnen wir selbst, deshalb hier alles abschalten (Grabeln vom 22.09.2026). */
.fin input[type=radio],.fin input[type=checkbox]{box-shadow:none!important;background-image:none!important}
.fin .fin-opt::before,.fin .fin-opt::after,
.fin .fin-check::before,.fin .fin-check::after{content:none!important;display:none!important}
.fin .fin-opt input[type=radio]{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;border:0!important;appearance:none!important;-webkit-appearance:none!important}
.fin .fin-opt input[type=radio]::before,.fin .fin-opt input[type=radio]::after{content:none!important;display:none!important}
.fin .fin-btn{font-family:inherit!important;text-transform:none!important;letter-spacing:0!important}

/* ---------- Kopf der Seite: Tinte, darunter Papier. Der Tonwechsel traegt den Stoss. ---------- */
.fin-hero{position:relative;background:var(--ink);color:var(--cream);overflow:clip}
.fin-hero::after{content:"";position:absolute;inset:auto 0 0;height:140px;background:radial-gradient(120% 100% at 18% 100%,rgba(209,91,62,.22),transparent 68%);pointer-events:none}
.fin-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(220px,.7fr);gap:clamp(24px,3.6vw,54px);align-items:end;padding-top:clamp(26px,3.4vw,44px);padding-bottom:clamp(40px,5.4vw,68px)}
.fin-crumbs{font-size:13px;color:rgba(243,236,225,.58);margin-bottom:clamp(20px,2.6vw,30px)}
.fin-crumbs a{border-bottom:1px solid transparent;transition:border-color .25s var(--e-ui)}
.fin-crumbs a:hover{text-decoration:none;border-color:rgba(243,236,225,.5)}
.fin-crumbs span{opacity:.5;padding:0 6px}
.fin-kicker{display:flex;align-items:center;gap:13px;font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#E79274}
.fin-kicker::before{content:"";width:32px;height:1px;background:currentColor;flex:none;opacity:.7}
.fin-h1{margin-top:20px;font-size:clamp(38px,6.6vw,86px);line-height:.9;letter-spacing:-.028em}
.fin-line{display:block;clip-path:inset(-.3em -100vw -.05em -100vw)}
.fin-line>span{display:block}
.fin-lead{margin-top:clamp(20px,2.6vw,32px);max-width:44ch;font-size:clamp(16.5px,1.3vw,19px);line-height:1.62;color:rgba(243,236,225,.84)}
.fin-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:clamp(22px,2.6vw,30px);padding-top:18px;border-top:1px solid rgba(243,236,225,.16);font-size:14px;color:rgba(243,236,225,.7)}
.fin-trust li{display:flex;align-items:center;gap:8px}
.fin-trust li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
/* Sprachwechsel: die zweite Fassung ist einen Klick weit weg, auch wenn die Sprache automatisch kommt */
.fin-lang{position:absolute;top:clamp(20px,2.6vw,34px);right:var(--gut);z-index:2;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,236,225,.72);padding:9px 15px;border:1px solid rgba(243,236,225,.26);border-radius:999px;transition:border-color .3s var(--e-ui),color .3s var(--e-ui)}
.fin-lang:hover{text-decoration:none;color:var(--cream);border-color:rgba(243,236,225,.6)}
/* Portraet: ueber die Unterkante hinaus, damit der Kopf Masse hat und nicht Illustration bleibt */
.fin-face{position:relative;justify-self:end;align-self:end;width:min(100%,300px);margin-bottom:calc(clamp(40px,5.4vw,68px) * -1)}
.fin-face img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 16%;filter:contrast(1.04) saturate(.96)}
.fin-face figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;background:linear-gradient(180deg,rgba(30,25,21,0),rgba(30,25,21,.88) 62%);font-size:13px;line-height:1.35}
.fin-face figcaption b{display:block;font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:-.01em}
.fin-face figcaption span{color:rgba(243,236,225,.72)}

/* ---------- Bogen ---------- */
.fin-main{padding:clamp(34px,4.6vw,58px) 0 clamp(40px,5vw,70px)}
.fin-intro{max-width:58ch;color:var(--ink-soft);font-size:16px}
.fin-form{position:relative;margin-top:clamp(22px,2.6vw,30px);background:var(--white);border-radius:20px;box-shadow:0 34px 76px -46px rgba(30,25,21,.42),0 1px 0 rgba(30,25,21,.05);padding:clamp(22px,3vw,40px)}
.fin-prog{display:flex;align-items:center;gap:16px;margin-bottom:clamp(22px,2.6vw,32px)}
.fin-prog-rail{position:relative;flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.fin-prog-rail i{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 1%);background:var(--accent);transition:width .55s var(--e-body)}
.fin-prog-txt{flex:none;font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}

/* Weg ohne JavaScript: die Weiterleitung landet auf #fehler-<code>, :target zeigt den Satz */
.fin-alert{display:none;margin:0 0 20px;padding:14px 18px;border-radius:12px;background:#FBE9E3;border-left:3px solid var(--accent-2);color:#7E2F13;font-size:15px;font-weight:600;line-height:1.5}
.fin-alert:target{display:block}

.fin-step{display:block;min-width:0}
.fin-step+.fin-step{margin-top:clamp(34px,4vw,52px);padding-top:clamp(30px,3.4vw,44px);border-top:1px solid var(--line)}
.fin-js .fin-step{display:none}
.fin-js .fin-step+.fin-step{margin-top:0;padding-top:0;border-top:0}
.fin-js .fin-step.is-on{display:block;animation:fin-in .5s var(--e-display) both}
@keyframes fin-in{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.fin-step-h{display:block;margin-bottom:clamp(22px,2.4vw,30px)}
.fin-eyebrow{display:block;font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-2);margin-bottom:10px}
.fin-step-q{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(25px,3.2vw,38px);line-height:1.06;letter-spacing:-.02em}

.fin-field+.fin-field{margin-top:clamp(22px,2.4vw,30px)}
.fin-field[hidden]{display:none}
.fin-q{font-size:16px;font-weight:600;line-height:1.45;color:var(--ink)}
.fin-q i{font-style:normal;color:var(--accent)}
.fin-hint{margin-top:6px;font-size:14px;line-height:1.55;color:var(--muted)}

/* Antwortfelder: das Kreuz aus dem Papierbogen */
.fin-opts{display:grid;gap:10px;margin-top:14px}
@media (min-width:760px){.fin-opts{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}}
.fin-opt{position:relative;display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 18px 12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--white);cursor:pointer;font-size:16px;font-weight:400;line-height:1.4;color:var(--ink);letter-spacing:0;text-transform:none;
  transition:border-color .25s var(--e-ui),background-color .25s var(--e-ui),box-shadow .25s var(--e-ui)}
.fin-opt-box{position:relative;flex:none;width:24px;height:24px;border:1.5px solid #C9BCA7;border-radius:4px;background:var(--paper);transition:border-color .25s var(--e-ui),background-color .25s var(--e-ui)}
.fin-opt-box::before,.fin-opt-box::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:2px;background:var(--accent);border-radius:2px;scale:0 1;transition:scale .26s var(--e-display)}
.fin-opt-box::before{rotate:45deg}
.fin-opt-box::after{rotate:-45deg;transition-delay:.07s}
.fin-opt:hover{border-color:#CFC2AE;background:#FDFBF7}
.fin-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.fin-opt:has(input:checked){border-color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
.fin-opt:has(input:checked) .fin-opt-box{border-color:var(--ink);background:var(--white)}
.fin-opt:has(input:checked) .fin-opt-box::before,.fin-opt:has(input:checked) .fin-opt-box::after{scale:1 1}

/* Eingaben */
.fin-in{position:relative;margin-top:14px;max-width:360px}
.fin-in input{width:100%;height:56px;min-height:56px;padding:0 16px;margin:0;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font-family:inherit;font-size:17px;line-height:normal;box-shadow:none;
  transition:border-color .2s var(--e-ui),background-color .2s var(--e-ui),box-shadow .2s var(--e-ui)}
.fin-in--eur input{padding-right:46px;font-variant-numeric:tabular-nums}
.fin-eur{position:absolute;right:16px;top:50%;translate:0 -50%;color:var(--muted);font-size:17px;pointer-events:none}
.fin-in input::placeholder{color:#AEA49A}
.fin-in input:hover{border-color:#CFC2AE}
.fin-in input:focus{outline:0;background:var(--white);border-color:var(--ink);box-shadow:0 0 0 3px rgba(209,91,62,.18)}
.fin-field--int .fin-in{max-width:150px}

.fin-err{margin-top:8px;font-size:14px;font-weight:600;color:var(--accent-2)}
.fin-err[hidden]{display:none}
.fin-err::before{content:"✕ ";font-weight:700}
.fin-field.is-bad .fin-in input,.fin-field.is-bad .fin-opt{border-color:var(--accent-2)}

/* Einwilligungen */
.fin-consents{margin-top:clamp(26px,3vw,34px);padding-top:clamp(22px,2.4vw,28px);border-top:1px solid var(--line);display:grid;gap:16px}
.fin-check{display:flex;flex-direction:row;gap:14px;align-items:flex-start;font-size:14.5px;font-weight:400;line-height:1.55;color:var(--ink-soft);cursor:pointer;letter-spacing:0;text-transform:none;margin:0}
.fin-check input{flex:none;width:24px;height:24px;min-height:0;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
.fin-check a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.fin-check em{display:block;margin-top:4px;font-style:normal;color:var(--muted);font-size:13.5px}

/* Steuerung: auf dem Telefon in der Daumenzone */
.fin-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:clamp(28px,3vw,38px)}
/* Das Theme faerbt jeden Knopf selbst und mit Nachdruck, deshalb hier ebenso nachdruecklich. */
.fin .fin-btn,.fin button.fin-btn,.fin button.fin-btn:focus{appearance:none;border:0!important;min-height:56px;height:auto;padding:0 30px!important;border-radius:999px!important;background:var(--ink)!important;color:var(--cream)!important;font-size:16.5px!important;font-weight:700;line-height:1.2;cursor:pointer;box-shadow:none;
  transition:background-color .22s var(--e-ui),transform .14s var(--e-ui),box-shadow .22s var(--e-ui)}
.fin button.fin-btn:hover{background:#2C241E!important;color:var(--cream)!important;box-shadow:0 14px 26px -16px rgba(30,25,21,.7)}
.fin button.fin-btn:active{transform:scale(.985)}
.fin button.fin-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fin button.fin-btn--send,.fin button.fin-btn--send:focus{background:var(--accent)!important}
.fin button.fin-btn--send:hover{background:var(--accent-2)!important}
.fin button.fin-btn--ghost,.fin button.fin-btn--ghost:focus{background:transparent!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--line);padding:0 24px!important}
.fin button.fin-btn--ghost:hover{background:var(--paper)!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px #CFC2AE}
.fin-btn[hidden]{display:none}
.fin-btn.is-busy{opacity:.6;pointer-events:none}
.fin-err--form{margin-top:14px}

/* Danke-Block: ohne JavaScript per Anker, mit JavaScript an Stelle des Bogens */
.fin-done{display:none;margin-top:clamp(22px,2.6vw,30px);background:var(--ink);color:var(--cream);border-radius:20px;padding:clamp(26px,3.4vw,44px)}
.fin-done:target,.fin-done.is-on{display:block;animation:fin-in .55s var(--e-display) both}
.fin-done:focus{outline:none}   /* den Fokus bekommt der Block nur, damit Vorleser ihn ansagen */
.fin-done h2{font-size:clamp(28px,3.6vw,42px);line-height:1.04}
.fin-done p{margin-top:14px;max-width:48ch;color:rgba(243,236,225,.84)}
.fin-done-c{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:22px}
.fin-done-c a{font-weight:700;border-bottom:1px solid rgba(243,236,225,.4);padding-bottom:2px}
.fin-done-c a:hover{text-decoration:none;border-color:var(--cream)}
.fin-form:has(~ .fin-done:target),.fin-form.is-done{display:none}

/* Pflichthinweis */
.fin-hinweis{margin-top:clamp(30px,3.4vw,44px);padding:clamp(22px,2.6vw,32px);background:var(--paper-2);border-radius:16px;border-left:3px solid var(--accent)}
.fin-hinweis h2{font-size:21px;letter-spacing:-.01em}
.fin-hinweis p{margin-top:12px;font-size:14.5px;line-height:1.62;color:var(--ink-soft)}

/* Kontaktzeile am Ende des Inhalts (der Fuss der Website steht darunter) */
.fin-kontakt{background:var(--ink);color:var(--cream);padding:clamp(34px,4vw,54px) 0}
.fin-kontakt-h{font-family:var(--serif);font-size:clamp(21px,2.4vw,28px);font-weight:300}
.fin-kontakt-c{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:24px;padding-top:22px;border-top:1px solid rgba(243,236,225,.16)}
.fin-kontakt-c a{display:block}
.fin-kontakt-c b{display:block;font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:-.01em}
.fin-kontakt-c span{font-size:13px;color:rgba(243,236,225,.62)}

/* ---------- Telefon ---------- */
@media (max-width:860px){
  .fin-hero-grid{grid-template-columns:1fr;align-items:start;padding-bottom:clamp(30px,6vw,40px)}
  .fin-h1{font-size:clamp(34px,8.6vw,52px)}
  /* Der Anschnitt des Portraets traegt auf schmalen Schirmen nicht: aus dem angeschnittenen
     Bild wird eine Zeile — Gesicht links, Name rechts. */
  /* Das Theme zentriert jede figure auf schmalen Schirmen, deshalb hier mit mehr Gewicht. */
  .fin .fin-face{order:-1;justify-self:stretch;width:auto;max-width:none;margin:0 0 24px;display:grid!important;grid-template-columns:92px minmax(0,1fr);align-items:center!important;justify-items:start;gap:14px;text-align:left}
  .fin .fin-face img{flex:none;width:92px;height:92px;margin:0;border-radius:12px}
  .fin .fin-face figcaption{position:static;min-width:0;width:auto;padding:0;margin:0;background:none;text-align:left}
  .fin .fin-face figcaption b{font-size:17px}
  .fin .fin-face figcaption span{display:block;font-size:13px;line-height:1.35;margin-top:2px}
  .fin-lang{top:auto;bottom:clamp(14px,3vw,20px);right:var(--gut);padding:7px 12px;font-size:11.5px}
  .fin-trust{gap:6px 16px;font-size:13.5px}
  .fin-form{border-radius:16px;padding:20px 16px 24px}
  .fin-in,.fin-field--int .fin-in{max-width:100%}
  .fin-js .fin-nav{position:sticky;bottom:0;margin:26px -16px -24px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);z-index:5}
  .fin-js .fin-btn{flex:1;padding:0 18px}
  .fin-js .fin-btn--ghost{flex:0 0 auto}
}
@media (max-width:420px){
  .fin-opt{padding:12px 14px;gap:12px;font-size:15.5px}
  .fin-prog-txt{font-size:11.5px;letter-spacing:.08em}
}

/* ---------- Bewegung nur, wenn sie erwuenscht ist ---------- */
@media (prefers-reduced-motion:no-preference){
  .fin-line>span{animation:fin-rise .9s var(--e-display) both}
  .fin-h1 .fin-line:nth-child(2)>span{animation-delay:.08s}
  .fin-lead,.fin-trust li{animation:fin-fade .7s var(--e-body) both;animation-delay:var(--d,.16s)}
  @keyframes fin-rise{from{translate:0 108%}to{translate:0 0}}
  @keyframes fin-fade{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
}
@media (prefers-reduced-motion:reduce){
  .fin-js .fin-step.is-on,.fin-done:target,.fin-done.is-on{animation:fin-plain .01s both}
  @keyframes fin-plain{to{opacity:1}}
  .fin-prog-rail i{transition:none}
  .fin-opt-box::before,.fin-opt-box::after{transition:none}
}