/* Gemeinsames Layout der Leistungsseiten (Privatkredit, Umschuldung, Wohnkredit) */
:root {
  --bg:#f7f7f8; --card:#ffffff; --text:#1c1c1e; --muted:#6b6b70; --border:#e0e0e3;
  --accent:#2f5d8a; --accent-dark:#1b3655; --accent-bg:#eaf1f8; --good:#1e7a3d; --error:#b3261e;
  --radius:12px; --radius-sm:8px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#15161a; --card:#1e2025; --text:#e8e8ea; --muted:#9a9aa2; --border:#33353b; --accent:#7fb0e0; --accent-dark:#a9cbee; --accent-bg:#22303e; --good:#4caf6f; --error:#f2b8b5; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin:0; font-family:'Poppins', -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); line-height:1.55; }
a { color:var(--accent); }
.wrap { max-width:560px; margin:0 auto; padding:32px 16px 72px; }

/* Kopf */
header.hero { text-align:center; margin-bottom:20px; }
.brand-logo { display:block; margin:0 auto 12px; max-width:120px; width:36%; height:auto; background:#fff; border-radius:var(--radius-sm); padding:6px 10px; box-shadow:0 1px 3px rgba(0,0,0,.1); }
.tagline { font-size:.8rem; letter-spacing:.4px; color:var(--accent-dark); font-weight:600; }
h1 { font-size:1.55rem; line-height:1.25; margin:0 0 8px; color:var(--accent-dark); text-align:center; letter-spacing:-.2px; }
.lead { text-align:center; font-size:.92rem; color:var(--muted); margin:0 0 24px; }

/* Karten */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px 20px; margin-bottom:16px; }
.card h2 { font-size:1.05rem; line-height:1.3; margin:0 0 12px; color:var(--accent-dark); }
.card p { margin:0 0 12px; font-size:.9rem; }
.card p:last-child { margin-bottom:0; }
.card ul, .card ol { margin:0 0 12px; padding-left:20px; font-size:.9rem; }
.card ul:last-child, .card ol:last-child { margin-bottom:0; }
.card li { margin-bottom:8px; }
.card li:last-child { margin-bottom:0; }
.small { font-size:.76rem !important; color:var(--muted); }

/* Formular-Karte */
.form-card { border:2px solid var(--accent); box-shadow:0 6px 24px rgba(27,54,85,.08); }
.form-card > h2 { text-align:center; margin-bottom:4px; font-size:1.12rem; }
.trust span { white-space:nowrap; margin:0 5px; }
.trust { text-wrap:balance; text-align:center; font-size:.78rem !important; font-weight:600; color:var(--good); margin:0 0 20px !important; }
.q { display:block; font-size:.8rem; font-weight:600; color:var(--accent-dark); margin:0 0 8px; }
.field { margin-top:16px; }
.field label { display:block; font-size:.8rem; color:var(--muted); margin:0 0 6px; }
.row2 { display:grid; grid-template-columns:3fr 2fr; gap:12px; }

input[type=text], input[type=tel], input[type=email], select {
  width:100%; height:48px; padding:0 14px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:16px; font-family:inherit;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
select { appearance:none; -webkit-appearance:none; padding-right:36px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b6b70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
input:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }

/* Auswahl: Was möchtest du tun? */
.choice { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.choice a { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; text-align:center;
  padding:12px 6px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg);
  color:var(--text); text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:transform .12s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease); }
.choice a:active { transform:scale(.97); }
.choice svg { width:24px; height:24px; color:var(--accent); flex-shrink:0; }
.choice .t { font-size:.8rem; font-weight:600; line-height:1.25; }
.choice .p { font-size:.68rem; color:var(--muted); line-height:1.2; }
.choice a[aria-current="page"] { border:2px solid var(--accent); background:var(--accent-bg); padding:11px 5px 9px; }
.choice a[aria-current="page"] .p { color:var(--accent-dark); font-weight:600; }
@media (hover:hover) { .choice a:not([aria-current="page"]):hover { border-color:var(--accent); } }

.mixed { display:flex; align-items:center; gap:10px; margin-top:10px; padding:12px 14px; border-radius:var(--radius-sm);
  background:var(--accent-bg); color:var(--accent-dark); text-decoration:none; font-size:.82rem; line-height:1.35;
  transition:transform .12s var(--ease); -webkit-tap-highlight-color:transparent; }
.mixed:active { transform:scale(.98); }
.mixed svg { width:20px; height:20px; flex-shrink:0; }
.mixed span { flex:1; }
.mixed strong { display:block; font-size:.86rem; }
.mixed .arrow { flex:0; font-size:1.1rem; color:var(--accent); }

/* Segment (Umschuldung: Privatkredite / Wohnkredit) */
.segment { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:4px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); }
.segment label { margin:0; }
.segment input { position:absolute; opacity:0; pointer-events:none; }
.segment span { display:block; text-align:center; padding:10px 6px; border-radius:6px; font-size:.84rem; font-weight:600; color:var(--muted); cursor:pointer;
  transition:background-color .15s var(--ease), color .15s var(--ease); }
.segment input:checked + span { background:var(--card); color:var(--accent-dark); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.segment input:focus-visible + span { outline:2px solid var(--accent); outline-offset:1px; }

.divider { height:1px; background:var(--border); margin:20px 0 4px; }

/* Live-Rechner */
.live { display:none; margin-top:12px; padding:14px; border-radius:var(--radius-sm); background:var(--accent-bg); color:var(--accent-dark); font-size:.84rem; line-height:1.45; }
.live.show { display:block; animation:liveIn .2s var(--ease); }
.live .big { display:block; font-size:1.35rem; font-weight:700; line-height:1.2; margin:2px 0 4px; }
.live .sub { display:block; color:var(--muted); font-size:.78rem; }
.live .save { color:var(--good); font-weight:700; }
@keyframes liveIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

.consent { display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:.76rem; color:var(--muted); line-height:1.45; }
.consent input { margin-top:2px; width:18px; height:18px; accent-color:var(--accent); flex-shrink:0; }
.btn { width:100%; height:52px; margin-top:16px; background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm); font-size:1.02rem; font-weight:600; font-family:inherit; cursor:pointer;
  transition:transform .12s var(--ease), background-color .15s var(--ease); }
.btn:active { transform:scale(.98); }
a.btn-link { display:flex; align-items:center; justify-content:center; text-decoration:none; }
.btn:disabled { opacity:.6; cursor:not-allowed; }
@media (hover:hover) { .btn:hover { background:var(--accent-dark); } }
.note { font-size:.72rem !important; color:var(--muted); text-align:center; margin:12px 0 0 !important; }
.note a { color:var(--muted); }

/* Tabellen & Listen im Inhalt */
.example { width:100%; border-collapse:collapse; font-size:.84rem; margin:4px 0 12px; }
.example th, .example td { text-align:left; padding:9px 6px; border-bottom:1px solid var(--border); vertical-align:top; }
.example th { color:var(--muted); font-weight:500; font-size:.76rem; }
.example .num { text-align:right; font-weight:600; white-space:nowrap; }
.steps { list-style:none; padding:0 !important; counter-reset:s; }
.steps li { position:relative; padding-left:36px; margin-bottom:12px; counter-increment:s; }
.steps li::before { content:counter(s); position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; font-size:.74rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.mistakes li strong { color:var(--accent-dark); }

.faq-item { padding:14px 0; border-top:1px solid var(--border); }
.faq-item:first-of-type { border-top:none; padding-top:0; }
.faq-q { font-weight:600; color:var(--accent-dark); font-size:.92rem; margin-bottom:4px; }
.faq-a { font-size:.86rem; }

.trust-box { background:var(--accent-bg); border:none; }
.trust-box h2 { font-size:.98rem; }

.cta-block { text-align:center; background:var(--accent-bg); border-radius:var(--radius); padding:24px 20px; margin-bottom:16px; }
.cta-block p { margin:0 0 14px; font-size:.95rem; color:var(--accent-dark); font-weight:600; }
.cta-btn { display:inline-block; background:var(--accent); color:#fff; font-weight:600; padding:14px 26px; border-radius:var(--radius-sm); text-decoration:none; transition:transform .12s var(--ease); }
.cta-btn:active { transform:scale(.97); }
.cta-alt { font-size:.8rem !important; color:var(--muted) !important; font-weight:400 !important; margin:14px 0 0 !important; }
.cta-alt a { color:var(--muted); }

footer { text-align:center; margin-top:32px; font-size:.72rem; color:var(--muted); line-height:1.7; }
footer a { color:var(--muted); }
.call-fab { position:fixed; bottom:20px; right:20px; width:56px; height:56px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,.3); z-index:100; transition:transform .12s var(--ease); }
.call-fab:active { transform:scale(.94); }
.call-fab svg { width:26px; height:26px; }

@media (max-width:380px) {
  .choice { gap:6px; }
  .choice .t { font-size:.74rem; }
  .row2 { grid-template-columns:1fr; gap:0; }
  .row2 > div + div { margin-top:16px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Rechner im Stil eines Kreditvergleichs: Betrag, Laufzeit, Zinsart, Ergebnis */
.lbl { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.lbl label { margin:0 !important; }
.lbl strong { font-size:.86rem; color:var(--accent-dark); }
.amount { position:relative; }
.amount input { padding-right:36px; font-weight:600; font-size:17px !important; }
.amount span { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:600; }
.range { -webkit-appearance:none; appearance:none; width:100%; height:6px; margin:14px 0 4px; border-radius:99px; outline:none; cursor:pointer;
  background:linear-gradient(var(--accent), var(--accent)) 0/var(--fill, 50%) 100% no-repeat, var(--border); }
.range::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--card); border:3px solid var(--accent); box-shadow:0 1px 4px rgba(0,0,0,.2); transition:transform .12s var(--ease); }
.range::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--card); border:3px solid var(--accent); box-shadow:0 1px 4px rgba(0,0,0,.2); }
.range:active::-webkit-slider-thumb { transform:scale(1.12); }
.range:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 4px var(--accent-bg); }
.range-ends, .ticks { display:flex; justify-content:space-between; font-size:.7rem; color:var(--muted); }
.zinsart { display:grid; grid-template-columns:1fr 1fr; border-bottom:2px solid var(--border); }
.zinsart button { background:none; border:none; padding:10px 6px; margin-bottom:-2px; border-bottom:3px solid transparent; font:600 .95rem 'Poppins', sans-serif; color:var(--muted); cursor:pointer; transition:color .15s var(--ease), border-color .15s var(--ease); }
.zinsart button.on { color:var(--accent); border-bottom-color:var(--accent); }
.wohn-only, .fix-only { display:none; }
.show-wohn .wohn-only, .show-fix .fix-only { display:block; }
.result { margin-top:18px; padding:16px; border-radius:var(--radius-sm); background:var(--accent-bg); }
.res-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:4px 0; font-size:.88rem; color:var(--accent-dark); }
.res-row strong { font-size:1.3rem; color:var(--accent); white-space:nowrap; transition:opacity .15s var(--ease); }
.res-row + .res-row strong { font-size:1.05rem; }
.res-sub { margin:8px 0 0 !important; font-size:.78rem !important; color:var(--muted); line-height:1.45; }
.res-sub .save { color:var(--good); font-weight:700; }
.ka-hidden { display:none; }
.ka-reveal { animation:liveIn .3s var(--ease); }

/* Erster Bildschirm kompakt: Titel, eine Zeile Auswahl, Rechner mit sichtbarer Rate */
.wrap > h1 { font-size:1.45rem; margin:0 0 4px; }
.wrap > h1 + .lead { margin-bottom:14px; }
.choice.tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:0 0 12px; }
.choice.tabs a { flex-direction:row; justify-content:center; gap:6px; padding:9px 4px; }
.choice.tabs a[aria-current="page"] { padding:8px 3px; }
.choice.tabs svg { width:18px; height:18px; }
.choice.tabs .t { font-size:.78rem; }
.calc { padding:16px 16px 18px; }
.calc .field { margin-top:12px; }
.calc .field:first-child, .calc #qf > .field:first-of-type { margin-top:0; }
.row-amount { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.row-amount label { margin:0 !important; font-size:.84rem !important; color:var(--accent-dark) !important; font-weight:600; }
.row-amount .amount { width:150px; flex-shrink:0; }
.row-amount input { height:42px !important; text-align:right; }
.calc .range { margin:10px 0 2px; }
.calc .lbl label { font-size:.84rem; color:var(--accent-dark); font-weight:600; }
.calc .zinsart button { padding:7px 6px; font-size:.88rem; }
.calc .result { margin-top:12px; padding:12px 14px; }
.calc .res-row { padding:2px 0; }
.calc .btn { margin-top:12px; }
.trust.after { margin:10px 0 0 !important; font-size:.74rem !important; }
.calc .segment span { padding:8px 6px; }
@media (max-width:360px) { .choice.tabs .t { font-size:.72rem; } .choice.tabs svg { display:none; } }
.choice.tabs { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.choice.tabs a { min-width:0; }
@media (max-width:400px) { .choice.tabs svg { display:none; } .choice.tabs .t { font-size:.78rem; } }
.example small { color:var(--muted); font-size:.74rem; }
.trust.top { margin:0 0 12px !important; font-size:.76rem !important; }

/* Riquadro con foto + Geschenk (Startseite und Wohnkredit) */
.about { text-align:center; }
.avatar { display:block; width:84px; height:84px; border-radius:50%; object-fit:cover; margin:0 auto 10px; box-shadow:0 0 0 3px var(--card), 0 0 0 4px var(--border); }
.about .name { font-weight:600; color:var(--accent-dark); font-size:1rem; }
.about .titles { font-size:.8rem; color:var(--muted); margin:4px 0 0; line-height:1.45; }
.about .story { font-style:italic; font-size:.88rem; margin:0; padding-top:12px; border-top:1px solid var(--border); }
.gift-teaser { display:flex; align-items:center; gap:12px; background: var(--accent-bg); border-radius:12px; padding:14px 16px; margin: 22px 0; text-decoration:none; box-shadow: 0 1px 3px rgba(0,0,0,0.06); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.gift-teaser-icon { font-size:1.4rem; flex-shrink:0; align-self:flex-start; margin-top:1px; }
.gift-teaser-text { flex:1; font-size:0.85rem; font-weight:600; color: var(--accent-dark); line-height:1.4; }
.gift-teaser-arrow { font-size:1.15rem; color: var(--accent); flex-shrink:0; align-self:center; animation: gift-arrow-nudge 1.8s ease-in-out infinite; }
.gift-teaser:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.gift-teaser:hover .gift-teaser-text { text-decoration:underline; }
.gift-teaser:active { transform: scale(0.97); background: var(--accent-bg); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
@keyframes gift-arrow-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .gift-teaser-arrow { animation: none; } }
.wrap > .card.about, .wrap > .gift-teaser { margin-bottom:16px; }