/* Finanzieren: drei Wege mit Berater-Figuren */
.fz{max-width:1240px;margin:0 auto;padding:36px 22px 110px}
.fz-head{text-align:center;max-width:720px;margin:0 auto 26px}
.fz-head h1{font-size:clamp(30px,4.6vw,48px);letter-spacing:-.035em;line-height:1.08;margin:0 0 10px}
.fz-head p{color:var(--muted);font-size:17px;margin:0}
.fz-cols{display:flex;gap:16px;align-items:stretch;min-height:540px}
.fz-col{--c:var(--accent-2);--cs:color-mix(in srgb,var(--c) 14%,var(--surface));flex:1 1 0;min-width:0;position:relative;background:linear-gradient(170deg,var(--cs),var(--surface) 65%);border-radius:28px;padding:22px;box-shadow:0 1px 2px rgba(80,50,20,.05),0 10px 28px rgba(80,50,20,.07);transition:flex .55s cubic-bezier(.2,.8,.2,1),transform .3s ease,box-shadow .3s ease,opacity .4s ease;cursor:pointer;overflow:hidden;outline:none}
.fz-col.c-lease{--c:#19c3c0}.fz-col.c-loan{--c:#1f3b5c}.fz-col.c-cash{--c:#e6b84a}
:root[data-theme="dark"] .fz-col.c-loan{--c:#6f95c7}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fz-col.c-loan{--c:#6f95c7}}
.fz-cols:not(.is-focus) .fz-col:hover,.fz-cols:not(.is-focus) .fz-col:focus-visible{flex-grow:1.35;transform:translateY(-4px);box-shadow:0 18px 40px rgba(80,50,20,.14)}
.fz-col .fig{width:150px;height:auto;display:block;margin:6px auto 8px;transition:width .5s ease}
.fz-col h2{text-align:center;font-size:24px;margin:4px 0 2px;letter-spacing:-.02em}
.fz-col .tag{text-align:center;color:var(--muted);font-size:14.5px;margin:0 0 14px}
.fz-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:16px}
.fz-chips span{font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
.fz-open{display:block;margin:0 auto;border:0;border-radius:999px;padding:10px 20px;font-weight:600;background:var(--c);color:#fff;cursor:pointer}
.c-cash .fz-open{color:#3b2a05}
.fz-detail{display:none}
/* Fokus: eine Spalte groß, die anderen schmal */
.fz-cols.is-focus .fz-col{flex-grow:.42;cursor:pointer}
.fz-cols.is-focus .fz-col.on{flex-grow:5;cursor:default}
.fz-cols.is-focus .fz-col:not(.on) .tag,.fz-cols.is-focus .fz-col:not(.on) .fz-chips,.fz-cols.is-focus .fz-col:not(.on) .fz-open{display:none}
.fz-cols.is-focus .fz-col:not(.on) .fig{width:70px}
.fz-cols.is-focus .fz-col:not(.on) h2{font-size:15px;writing-mode:vertical-rl;transform:rotate(180deg);margin:10px auto 0}
.fz-cols.is-focus .fz-col:not(.on):hover{opacity:.85}
.fz-col.on .fz-intro{display:none}
.fz-col.on .fz-detail{display:block;animation:fz-in .5s ease both}
@keyframes fz-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fz-back{border:0;background:var(--surface);border-radius:999px;padding:7px 14px;font-weight:600;cursor:pointer;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.fz-desk{display:grid;grid-template-columns:200px 1fr;gap:22px;margin-top:14px;align-items:start}
.fz-desk .fig{width:190px;margin:0}
.fz-advisor{position:sticky;top:90px;text-align:center}
.fz-advisor small{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.fz-chat{display:flex;flex-direction:column;gap:10px}
.bubble{background:var(--surface);border-radius:18px 18px 18px 6px;padding:12px 16px;font-size:16px;line-height:1.55;max-width:640px;box-shadow:0 2px 10px rgba(80,50,20,.07);border-left:4px solid var(--c);animation:bub .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes bub{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.fz-chat-ctrl{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.fz-chat-ctrl .btn{background:var(--c)}
.c-cash .fz-chat-ctrl .btn{color:#3b2a05}
.fz-more{display:none;margin-top:18px}
.fz-more.show{display:block;animation:fz-in .5s ease both}
.pc2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.pc2>div{background:var(--surface);border-radius:18px;padding:14px 16px}
.pc2 h4{margin:0 0 6px;font-size:15px}
.pc2 ul{margin:0;padding-left:18px;font-size:14.5px;line-height:1.5}
.pc2 .pro h4{color:var(--good)} .pc2 .con h4{color:var(--bad)}
.fit{background:color-mix(in srgb,var(--c) 10%,var(--surface));border-radius:18px;padding:14px 16px;font-size:15px;margin:12px 0}
.mini{background:var(--surface);border-radius:18px;padding:14px 16px;margin:12px 0}
.mini h4{margin:0 0 8px;font-size:15px}
.mini-g{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.mini-g label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
.mini-g input{width:120px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:15px;background:var(--surface);color:var(--ink)}
.mini-out{font-size:16px;margin-top:10px}
.mini-out b{font-size:20px}
.fz-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
/* Figuren: ruhige, dezente Bewegung */
.fig-lease .float{animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.fig-lease .tablet{animation:tab 5s ease-in-out infinite;transform-origin:87px 114px;transform-box:view-box}
@keyframes tab{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
.fig-loan .coin{animation:coin 3.6s ease-in-out infinite;opacity:0}
@keyframes coin{0%{opacity:0;transform:translateY(-6px)}25%{opacity:1}60%{opacity:1;transform:translateY(26px)}70%,100%{opacity:0;transform:translateY(28px)}}
.fig-loan .seal{animation:seal 3.6s ease-in-out infinite}
@keyframes seal{0%,60%,100%{opacity:1}68%{opacity:.4}}
.fig-cash .notes{animation:notes 4.5s ease-in-out infinite}
@keyframes notes{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (max-width:860px){
  .fz-cols{flex-direction:column;min-height:0}
  .fz-cols.is-focus .fz-col:not(.on){display:none}
  .fz-desk{grid-template-columns:1fr}
  .fz-advisor{position:static;display:flex;align-items:center;gap:12px;text-align:left}
  .fz-desk .fig{width:90px}
  .pc2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.fig *{animation:none!important}.fz-col,.bubble{transition:none;animation:none}}

/* Handy: Karten nicht zusammenfallen lassen (flex-basis 0 + overflow:hidden ließ sie auf 0 schrumpfen) */
@media (max-width:860px){
  .fz{padding:22px 14px 90px}
  .fz-cols{gap:12px}
  .fz-col{flex:none!important;overflow:visible;padding:18px;cursor:pointer}
  .fz-intro{display:grid;grid-template-columns:84px 1fr;gap:4px 14px;align-items:center;text-align:left}
  .fz-intro .fig{width:84px;margin:0;grid-row:1/4}
  .fz-col h2{text-align:left;font-size:20px;margin:0}
  .fz-col .tag{text-align:left;margin:0}
  .fz-chips{justify-content:flex-start;margin:6px 0 0;grid-column:2}
  .fz-open{grid-column:1/-1;margin:12px 0 0;width:100%;padding:12px}
  .fz-col.on{padding:16px}
  .fz-detail .fig{width:64px}
  .fz-advisor{position:static;display:flex;align-items:center;gap:12px;text-align:left;margin-bottom:6px}
  .bubble{font-size:15px}
  .fz-chat-ctrl{position:sticky;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);background:color-mix(in srgb,var(--surface) 92%,transparent);padding:8px;border-radius:14px;backdrop-filter:blur(6px);z-index:3}
  .fz-chat-ctrl .btn{flex:1}
  .mini-g input{width:100%}
  .mini-g label{flex:1 1 40%}
  .fz-cta .btn{flex:1;text-align:center}
}