/* ==========================================================================
   SecurePlus – Dispokredit-Optionen Bedarfserhebung
   Design "Kontoblatt": warmes Papier, Tintenlinien, ein Tannengrün-Akzent.
   Kosten-Farben (Bernstein) sind bewusst NICHT der Akzent.
   ========================================================================== */

/* Schriften lokal gehostet (keine Verbindung zu Google beim Seitenaufruf). SIL Open Font License. */
@font-face{ font-family:"Instrument Sans"; font-style:normal; font-weight:400 600; font-display:swap; src:url(fonts/instrument-sans-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Instrument Sans"; font-style:normal; font-weight:400 600; font-display:swap; src:url(fonts/instrument-sans-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Newsreader"; font-style:normal; font-weight:500 600; font-display:swap; src:url(fonts/newsreader-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Newsreader"; font-style:normal; font-weight:500 600; font-display:swap; src:url(fonts/newsreader-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root{
  --paper:#F6F3EC; --surface:#FFFDF8; --surface-sunk:#EFEBE1;
  --line:#D9D3C5; --line-strong:#827A6D;
  --ink:#1C211F; --ink-muted:#555B57; --ink-faint:#62675F;
  --accent:#1F5A4A; --accent-hover:#174739; --accent-tint:#E3ECE7; --on-accent:#FFFDF8;
  --cost-ink:#5A3E1B; --cost-bg:#F3E6CF; --cost-line:#D8BF92;
  --error:#A3271F; --error-bg:#FBE9E6;
  --success:#2B6A3F; --success-bg:#E4F0E6;
  --focus-ring:#1F5A4A;
  --bank-bg:#E8EEF0; --bank-ink:#24404A;
  --offset-opacity:.6;

  --f-display:"Newsreader", Georgia, "Times New Roman", serif;
  --f-ui:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-display:32px; --t-h2:26px; --t-h3:17px; --t-body:16px;
  --t-label:15px; --t-help:14px; --t-legal:14px; --t-meta:13px;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --gutter:16px;

  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-sheet:cubic-bezier(.32,.72,0,1);
  --d-press:120ms; --d-fast:160ms; --d-base:220ms; --d-step:280ms;

  color-scheme:light;
}


@media (min-width:768px){
  :root{ --t-display:48px; --t-h2:32px; --t-h3:18px; --t-body:17px; --gutter:24px; }
}
@media (min-width:1200px){ :root{ --gutter:32px; } }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:120px; scroll-padding-bottom:24px; }
@media (max-width:767px){ html{ scroll-padding-bottom:200px; } }
.input,.select,.check input{ scroll-margin-block:120px 200px; }
body{
  margin:0; min-height:100dvh; display:flex; flex-direction:column;
  background:var(--paper); color:var(--ink);
  font-family:var(--f-ui); font-size:var(--t-body); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:var(--accent-tint); color:var(--ink); }
img,svg{ display:block; max-width:100%; }
h1,h2,h3,p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ padding:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; }
@media (hover:hover) and (pointer:fine){ a:hover{ text-decoration-thickness:2px; } }
:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:2px; }
[hidden]{ display:none !important; }
.num{ font-variant-numeric:tabular-nums; }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:var(--gutter); top:-100px; z-index:100; background:var(--surface); color:var(--ink); padding:var(--s-3) var(--s-4); border:1px solid var(--line-strong); border-radius:var(--r-sm); }
.skip:focus{ top:8px; }
html{ scrollbar-color:var(--line-strong) var(--paper); }
input{ caret-color:var(--accent); }

/* Placeholder marker: sichtbar unfertig */
.ph{
  background:var(--cost-bg); color:var(--cost-ink); border-radius:2px;
  font-family:var(--f-ui); font-weight:600; padding:0 .25em; font-size:.94em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

.shell{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.topbar__in{ height:56px; display:flex; align-items:center; gap:var(--s-3); }
.wordmark{
  font-family:var(--f-display); font-weight:600; font-size:19px; letter-spacing:-.005em;
  color:var(--ink); text-decoration:none; margin-right:auto; white-space:nowrap;
}
.back-link{
  display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 var(--s-2) 0 0;
  background:none; border:0; color:var(--ink-muted); font-size:var(--t-label); font-weight:500; cursor:pointer;
}
.back-link svg{ width:16px; height:16px; }
@media (hover:hover) and (pointer:fine){ .back-link:hover{ color:var(--ink); } }

/* ---------- Cost badge ---------- */
.cost-badge{
  position:relative; display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px; flex:none;
  background:var(--cost-bg); color:var(--cost-ink); border:1px solid var(--cost-line); border-radius:999px;
  font-size:var(--t-meta); font-weight:500; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap;
  cursor:pointer; transition:transform var(--d-press) var(--ease-out), border-color var(--d-fast) ease;
}
.cost-badge::after{ content:""; position:absolute; inset:-6px 0; }
.cost-badge svg{ width:14px; height:14px; flex:none; }
.cost-badge:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){ .cost-badge:hover{ border-color:var(--cost-ink); } }
.cost-badge .cb-short{ display:none; }
@media (max-width:359px){
  .cost-badge .cb-long{ display:none; }
  .cost-badge .cb-short{ display:inline; }
  .cost-badge svg{ display:none; }
}

/* ---------- Cost dialog (Popover / Bottom-Sheet) ---------- */
.cost-dialog{
  border:1px solid var(--cost-line); background:var(--surface); color:var(--ink);
  padding:0; border-radius:var(--r-lg); width:min(380px, calc(100vw - 2 * var(--gutter)));
  position:fixed; inset:64px var(--gutter) auto auto; margin:0;
  box-shadow:0 12px 32px -12px rgb(28 33 31 / .22);
  opacity:0; transform:scale(.96); transform-origin:top right;
  transition:opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.cost-dialog[open].is-shown{ opacity:1; transform:none; }
.cost-dialog::backdrop{ background:rgb(20 23 22 / .28); }
@media (max-width:767px){
  .cost-dialog{
    inset:auto 0 0 0; width:100%; max-width:none; border-radius:var(--r-lg) var(--r-lg) 0 0;
    border-width:1px 0 0; transform:translateY(100%); opacity:1;
    transition:transform var(--d-step) var(--ease-sheet);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .cost-dialog[open].is-shown{ transform:none; }
  .cost-dialog.is-closing{ transition-duration:var(--d-fast); }
}
.cost-dialog__in{ padding:var(--s-5); display:grid; gap:var(--s-4); }
.cost-dialog h2{ font-family:var(--f-display); font-weight:500; font-size:22px; line-height:1.2; }
.cost-dialog__price{ font-family:var(--f-display); font-weight:600; font-size:28px; color:var(--cost-ink); font-variant-numeric:tabular-nums; }
.cost-dialog__close{ justify-self:start; }

/* ---------- Definition list (Kosten) ---------- */
.deflist{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-2) var(--s-4); font-size:var(--t-help); }
.deflist dt{ color:var(--ink-muted); }
.deflist dd{ color:var(--ink); font-weight:500; }

/* ---------- Progress ---------- */
.progress{ padding-top:var(--s-4); }
.progress__label{ font-size:var(--t-meta); font-weight:500; color:var(--ink-muted); margin-bottom:var(--s-2); }
.progress__list{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.progress__item{ display:grid; gap:6px; }
.progress__bar{ height:4px; border-radius:var(--r-sm); background:var(--line); overflow:hidden; position:relative; }
.progress__item[data-status="open"] .progress__bar{ background:var(--line-strong); }
.progress__fill{
  position:absolute; inset:0; background:var(--accent); transform-origin:left; transform:scaleX(0);
  transition:transform var(--d-step) var(--ease-in-out);
}
.progress__item[data-status="done"] .progress__fill{ transform:scaleX(1); }
.progress__item[data-status="current"] .progress__fill{ transform:scaleX(.5); }
.progress__name{
  display:none; font-size:var(--t-meta); color:var(--ink-muted); background:none; border:0; padding:0;
  text-align:left; font-weight:500; line-height:1.3;
}
.progress__item[aria-current="step"] .progress__name{ color:var(--ink); }
button.progress__name{ cursor:pointer; color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
@media (min-width:768px){ .progress__name{ display:block; } }

/* ---------- Main + steps ---------- */
main{ flex:1 0 auto; width:100%; overflow-x:clip; }
.step{
  transition:opacity var(--d-step) var(--ease-out) 60ms, transform var(--d-step) var(--ease-out) 60ms;
}
.step[data-state="enter-fwd"]{ opacity:0; transform:translateX(24px); transition:none; }
.step[data-state="enter-back"]{ opacity:0; transform:translateX(-24px); transition:none; }
.step[data-state="exit-fwd"]{ opacity:0; transform:translateX(-16px); transition:opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out); }
.step[data-state="exit-back"]{ opacity:0; transform:translateX(16px); transition:opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out); }
.step .group{ transition:opacity var(--d-step) var(--ease-out), transform var(--d-step) var(--ease-out); transition-delay:calc(60ms + var(--i, 0) * 40ms); }
.step[data-state^="enter"] .group{ opacity:0; transform:translateY(8px); transition:none; }

/* ---------- Landing ---------- */
.landing{ display:grid; gap:var(--s-6); padding-block:var(--s-5) var(--s-7); }
.landing__art{
  height:240px; border-radius:var(--r-lg); overflow:hidden; background:var(--surface-sunk);
  border:1px solid var(--line);
}
.landing__art svg{ width:100%; height:100%; }
@media (max-width:479px){ .landing__art{ height:140px; } }
.landing__content{ display:grid; gap:var(--s-5); align-content:center; max-width:560px; }
.display{
  font-family:var(--f-display); font-weight:500; font-size:var(--t-display); line-height:1.08;
  letter-spacing:-.015em; text-wrap:balance; font-optical-sizing:auto;
}
.lead{ font-size:var(--t-body); color:var(--ink-muted); max-width:62ch; }
.landing__secure{
  display:grid; gap:var(--s-2); padding:var(--s-4); border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--cost-line); font-size:var(--t-help);
}
.landing__secure strong{ font-weight:600; }
.landing__secure .price{ color:var(--cost-ink); font-weight:600; font-variant-numeric:tabular-nums; }
.warning-line{ font-size:var(--t-help); font-weight:600; color:var(--ink); }
.landing__notes{ display:grid; gap:var(--s-2); font-size:var(--t-legal); color:var(--ink-muted); }
@media (min-width:1024px){
  .landing{ grid-template-columns:7fr 5fr; gap:var(--s-7); padding-block:var(--s-6); min-height:calc(100dvh - 57px); align-items:stretch; }
  .landing__art{ height:auto; min-height:560px; }
  .landing__art svg{ height:100%; }
}

/* ---------- Form layout ---------- */
.form-layout{ display:grid; gap:var(--s-7); padding-block:var(--s-5) var(--s-7); }
.form-col{ width:100%; max-width:560px; min-width:0; }
.sidebar{ display:none; }
@media (min-width:1024px){
  .form-layout{ grid-template-columns:repeat(12, minmax(0,1fr)); }
  .form-col{ grid-column:1 / span 8; }
  .sidebar{ display:block; grid-column:9 / span 4; position:sticky; top:150px; align-self:start; }
}
.step-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-5); }
.step-title{
  font-family:var(--f-display); font-weight:500; font-size:var(--t-h2); line-height:1.15; letter-spacing:-.01em; text-wrap:balance;
}
.step-title:focus{ outline:none; }
.step-title:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:4px; }
.step-intro{ color:var(--ink-muted); margin-top:var(--s-2); max-width:62ch; font-size:var(--t-help); }
.spot{ width:160px; flex:none; display:none; }
@media (min-width:480px){ .spot{ display:block; } }

.group{ padding-block:var(--s-7) 0; }
.group + .group{ border-top:1px solid var(--line); margin-top:var(--s-7); }
.group:first-of-type{ padding-top:var(--s-2); }
.group__title{ font-size:var(--t-h3); font-weight:600; line-height:1.3; margin-bottom:var(--s-5); }
.group__note{ font-size:var(--t-help); color:var(--ink-muted); margin:calc(var(--s-5) * -1 + var(--s-2)) 0 var(--s-5); max-width:62ch; }
fieldset{ border:0; margin:0; padding:0; min-width:0; }
legend{ padding:0; }

/* ---------- Fields ---------- */
.field{ display:grid; gap:var(--s-2); }
.field + .field, .row + .field, .field + .row, .row + .row{ margin-top:var(--s-5); }
.row{ display:grid; gap:var(--s-5); }
@media (min-width:480px){
  .row--street{ grid-template-columns:3fr 1fr; }
  .row--plz{ grid-template-columns:1fr 2fr; }
  .row--half{ grid-template-columns:1fr 1fr; }
}
.label{ font-size:var(--t-label); font-weight:500; line-height:1.3; }
.label .opt, .opt{ color:var(--ink-muted); font-weight:400; }
.help{ font-size:var(--t-help); line-height:1.45; color:var(--ink-muted); margin-top:-2px; }
.error{
  display:flex; gap:6px; align-items:flex-start; font-size:var(--t-help); line-height:1.45; color:var(--error); font-weight:500;
  animation:err-in var(--d-fast) var(--ease-out);
}
.error svg{ width:16px; height:16px; flex:none; margin-top:2px; }
@keyframes err-in{ from{ opacity:0; transform:translateY(-4px); } }

.control{ position:relative; display:flex; }
.input, .select{
  width:100%; height:52px; padding:0 14px; font-size:16px;
  background:var(--surface-sunk); border:1px solid var(--line-strong); border-radius:var(--r-sm);
  color:var(--ink); outline:none; appearance:none; -webkit-appearance:none;
  transition:border-color var(--d-fast) ease, box-shadow var(--d-fast) ease, background-color var(--d-fast) ease;
}
.input::placeholder{ color:var(--ink-faint); opacity:1; }
@media (hover:hover) and (pointer:fine){ .input:hover, .select:hover{ border-color:var(--ink-muted); } }
.input:focus, .select:focus{
  background-color:var(--surface); border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.input:focus-visible, .select:focus-visible{ box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring); }
.input:disabled, .select:disabled{ opacity:.5; cursor:default; }
.select{
  padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23555B57' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}



.field.is-invalid .input, .field.is-invalid .select{
  border-color:var(--error); border-width:1.5px; padding-left:13.5px;
  background-color:color-mix(in srgb, var(--error-bg) 40%, var(--surface-sunk));
}
.field.is-invalid .input:focus, .field.is-invalid .select:focus{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--error) 20%, transparent);
}
.field.is-valid .control--check::after{
  content:""; position:absolute; right:14px; top:50%; width:16px; height:16px; margin-top:-8px; pointer-events:none;
  background:var(--success);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.field.is-valid .control--check .input{ padding-right:40px; }
.control__suffix, .control__meta{
  position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none;
  color:var(--ink-muted); font-size:var(--t-label);
}
.control__meta{ font-size:var(--t-meta); font-weight:500; }
.control--suffix .input{ padding-right:40px; text-align:left; }
.field.is-valid .control--meta::after{ display:none; }
.control--meta .input{ padding-right:96px; }
.input--iban{ letter-spacing:.02em; font-variant-numeric:tabular-nums; text-transform:uppercase; }

/* Phone: Ländervorwahl + Nummer mit gemeinsamer Außenkante */
.phone{
  display:flex; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface-sunk);
  transition:border-color var(--d-fast) ease, box-shadow var(--d-fast) ease, background-color var(--d-fast) ease;
}
.phone:focus-within{ background:var(--surface); border-color:var(--accent); box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring); }
.phone .select, .phone .input{ border:0; background-color:transparent; box-shadow:none !important; height:50px; }
.phone .select{ width:auto; flex:none; padding:0 30px 0 12px; background-position:right 8px center; border-right:1px solid var(--line); border-radius:var(--r-sm) 0 0 var(--r-sm); font-variant-numeric:tabular-nums; }
.phone .input{ border-radius:0 var(--r-sm) var(--r-sm) 0; }
.field.is-invalid .phone{ border-color:var(--error); border-width:1.5px; background-color:color-mix(in srgb, var(--error-bg) 40%, var(--surface-sunk)); }
.field.is-invalid .phone .input, .field.is-invalid .phone .select{ border-width:0; padding-left:14px; background-color:transparent; }
.field.is-invalid .phone .select{ border-right:1px solid var(--line); padding-left:12px; }

/* Datum: TT / MM / JJJJ */
.date3{ display:grid; grid-template-columns:72px 72px 104px; gap:var(--s-2); align-items:end; }
.date3 label{ display:grid; gap:4px; font-size:var(--t-meta); color:var(--ink-muted); font-weight:500; }
.date3 .input{ text-align:center; padding:0 8px; font-variant-numeric:tabular-nums; }
.date2{ grid-template-columns:72px 104px; }

/* Segmented control (Anrede) */
.segmented{
  display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line-strong); border-radius:var(--r-md);
  overflow:hidden; background:var(--line);
  gap:1px;
}
@media (min-width:480px){ .segmented{ grid-template-columns:repeat(4,1fr); } }
.segmented label{ position:relative; display:block; }
.segmented input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.segmented span{
  display:flex; align-items:center; justify-content:center; height:48px; padding:0 var(--s-2);
  background:var(--surface-sunk); font-size:var(--t-label); font-weight:500; text-align:center; line-height:1.2;
  transition:background-color var(--d-fast) ease, color var(--d-fast) ease, box-shadow var(--d-fast) ease;
  cursor:pointer;
}
@media (hover:hover) and (pointer:fine){ .segmented label:hover span{ background:var(--surface); } }
.segmented input:checked + span{ background:var(--accent-tint); color:var(--accent); font-weight:600; box-shadow:inset 0 0 0 2px var(--accent); }
.segmented input:focus-visible + span{ outline:2px solid var(--focus-ring); outline-offset:-4px; }
.field.is-invalid .segmented{ border-color:var(--error); }

/* ---------- Checkboxes ---------- */
.check{
  display:grid; grid-template-columns:22px 1fr; gap:var(--s-3); align-items:start;
  min-height:44px; padding-block:var(--s-2); cursor:pointer;
}
.check input{
  appearance:none; -webkit-appearance:none; width:22px; height:22px; margin:1px 0 0; flex:none; cursor:pointer;
  border:1.5px solid var(--line-strong); border-radius:4px; background:var(--surface);
  display:grid; place-content:center; transition:background-color var(--d-press) ease, border-color var(--d-press) ease;
}
.check input::after{
  content:""; width:14px; height:14px;
  background:var(--on-accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5l3 3 6-6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5l3 3 6-6.5'/%3E%3C/svg%3E") center/contain no-repeat;
  clip-path:inset(0 100% 0 0); transition:clip-path var(--d-fast) var(--ease-out);
}
.check input:checked{ background:var(--accent); border-color:var(--accent); }
.check input:checked::after{ clip-path:inset(0 0 0 0); }
.check input:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.check__text{ font-size:var(--t-label); line-height:1.5; max-width:60ch; }
.check__tag{ display:block; font-size:var(--t-meta); font-weight:500; color:var(--ink-muted); margin-top:2px; }
.field.is-invalid .check input{ border-color:var(--error); }
.field--check + .field--check{ margin-top:var(--s-3); }
.field--check .error, .field--check .help{ padding-left:34px; }
.field--apart{ margin-top:var(--s-5) !important; }
.ext::after{
  content:""; display:inline-block; width:.8em; height:.8em; margin-left:.2em; vertical-align:-.05em; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h4v4M13 3L7 9M11 9.5V13H3V5h3.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h4v4M13 3L7 9M11 9.5V13H3V5h3.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  height:52px; min-width:160px; padding:0 var(--s-5); border-radius:var(--r-md);
  font-size:16px; font-weight:600; line-height:1; text-decoration:none; cursor:pointer;
  border:1px solid transparent; white-space:nowrap;
  transition:background-color var(--d-fast) ease, border-color var(--d-fast) ease, transform var(--d-fast) var(--ease-out);
}
.btn:active{ transform:scale(.97); transition-duration:var(--d-press); }
.btn svg{ width:16px; height:16px; flex:none; }
.btn--primary{ background:var(--accent); color:var(--on-accent); }
@media (hover:hover) and (pointer:fine){ .btn--primary:hover{ background:var(--accent-hover); } }
.btn--secondary{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
@media (hover:hover) and (pointer:fine){ .btn--secondary:hover{ border-color:var(--ink); } }
.btn[aria-busy="true"]{ cursor:progress; }
.btn[aria-busy="true"] .chev{ display:none; }
.btn .spinner{ display:none; width:14px; height:14px; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin 600ms linear infinite; }
.btn[aria-busy="true"] .spinner{ display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn-text{
  background:none; border:0; padding:0; min-height:44px; color:var(--accent); font-weight:500; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; font-size:var(--t-label);
}

/* Action bar */
.actionbar{
  margin-top:var(--s-7); display:grid; gap:var(--s-3);
}
.actionbar__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); }
.actionbar__cost{ font-size:var(--t-help); color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.actionbar__cost strong{ color:var(--cost-ink); font-weight:600; }
.save-note{ font-size:var(--t-meta); color:var(--ink-muted); }
@media (max-width:767px){
  .actionbar{
    position:sticky; bottom:0; z-index:10; margin-inline:calc(var(--gutter) * -1);
    padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background:var(--surface);
    box-shadow:0 -1px 0 var(--line), 0 -8px 24px -12px rgb(28 33 31 / .12);
  }
  .actionbar__row{ flex-direction:column-reverse; align-items:stretch; gap:var(--s-1); }
  .actionbar__row .btn--primary{ width:100%; }
  .actionbar__row .btn--secondary{ border:0; height:44px; min-width:0; color:var(--ink-muted); font-weight:500; }
  .save-note-outside{ margin-top:var(--s-3); }
}

/* ---------- Notice boxes ---------- */
.notice{
  display:grid; grid-template-columns:20px 1fr; gap:var(--s-3); align-items:start;
  padding:var(--s-4); border-radius:var(--r-md); background:var(--surface-sunk);
  border:1px solid var(--line); border-top:2px solid var(--accent);
  font-size:var(--t-help); line-height:1.5;
}
.notice svg{ width:20px; height:20px; color:var(--accent); margin-top:1px; }
.notice strong{ font-weight:600; }
.notice--warn{ border-top-color:var(--error); background:var(--error-bg); }
.notice--warn svg{ color:var(--error); }
.notice .btn-text{ min-height:0; }

.error-summary{
  margin-bottom:var(--s-5); padding:var(--s-4) var(--s-5); border-radius:var(--r-md);
  background:var(--error-bg); border:1px solid color-mix(in srgb, var(--error) 40%, transparent); color:var(--ink);
}
.error-summary:focus{ outline:2px solid var(--error); outline-offset:2px; }
.error-summary h3{ font-size:var(--t-label); font-weight:600; color:var(--error); margin-bottom:var(--s-2); }
.error-summary ul{ list-style:none; display:grid; gap:2px; font-size:var(--t-help); }
.error-summary a{ color:var(--error); }

/* ---------- How it works ---------- */
.howto{ list-style:none; display:grid; }
.howto li{ display:grid; grid-template-columns:32px 1fr; gap:var(--s-3); position:relative; padding-bottom:var(--s-5); }
.howto li:last-child{ padding-bottom:0; }
.howto li::before{
  content:""; position:absolute; left:15.5px; top:34px; bottom:2px; width:1px; background:var(--line-strong);
}
.howto li:last-child::before{ display:none; }
.howto__n{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center;
  font-family:var(--f-display); font-size:18px; font-weight:500; line-height:1; background:var(--surface);
  font-variant-numeric:tabular-nums;
}
.howto__t{ font-size:var(--t-label); font-weight:500; padding-top:5px; }
.howto__d{ display:block; font-size:var(--t-help); color:var(--ink-muted); font-weight:400; margin-top:2px; }
.howto-details{ margin-bottom:var(--s-5); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.howto-details summary{
  min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:0 var(--s-4); cursor:pointer; font-weight:500; font-size:var(--t-label); list-style:none;
}
.howto-details summary::-webkit-details-marker{ display:none; }
.howto-details summary svg{ width:16px; height:16px; transition:transform var(--d-fast) var(--ease-out); }
.howto-details[open] summary svg{ transform:rotate(180deg); }
.howto-details .howto{ padding:var(--s-2) var(--s-4) var(--s-4); }
@media (min-width:1024px){ .howto-details{ display:none; } }

.side-panel{ padding:var(--s-5); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); display:grid; gap:var(--s-4); }
.side-panel h2{ font-size:var(--t-h3); font-weight:600; line-height:1.3; }
.side-panel--cost{ border-color:var(--cost-line); }
.side-panel .cost-dialog__price{ font-size:24px; }
.side-contact{ font-size:var(--t-help); color:var(--ink-muted); padding-top:var(--s-4); border-top:1px solid var(--line); }

/* ---------- Cost overview boxes (step 3) ---------- */
.box{ border-radius:var(--r-lg); padding:var(--s-5); display:grid; gap:var(--s-4); }
.box + .box{ margin-top:var(--s-4); }
.box__head{ display:flex; gap:var(--s-3); align-items:flex-start; }
.box__head svg{ width:28px; height:28px; flex:none; }
.box__title{ font-family:var(--f-display); font-weight:500; font-size:18px; line-height:1.25; }
.box--bank{ background:var(--bank-bg); color:var(--bank-ink); }
.box--bank p{ font-size:var(--t-help); }
.box--bank ul{ list-style:none; display:grid; gap:4px; font-size:var(--t-help); }
.box--bank li{ padding-left:14px; position:relative; }
.box--bank li::before{ content:""; position:absolute; left:0; top:.65em; width:6px; height:1px; background:currentColor; }
.box--secure{ background:var(--surface); border:1px solid var(--cost-line); padding:var(--s-4); gap:var(--s-3); }
.box__price{ font-size:var(--t-label); color:var(--cost-ink); }
.box--secure .price-big{ font-family:var(--f-display); font-weight:600; font-size:28px; line-height:1.1; color:var(--cost-ink); font-variant-numeric:tabular-nums; }
.box--secure .deflist{ font-size:var(--t-label); align-items:baseline; }
.box__statement{ font-size:var(--t-help); padding:var(--s-3) var(--s-4); border-radius:var(--r-sm); background:var(--cost-bg); color:var(--cost-ink); }
.box__choice{ border-top:1px solid var(--line); padding-top:var(--s-3); }

.legal-text{ font-size:var(--t-legal); line-height:1.55; color:var(--ink); max-width:68ch; display:grid; gap:var(--s-3); }
.legal-text h4{ font-size:var(--t-label); font-weight:600; }
.legal-box{ background:var(--surface-sunk); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-5); }
.legal-box + .legal-box{ margin-top:var(--s-4); }
.sepa{ margin-top:var(--s-3); }
.sepa .deflist{ font-size:var(--t-help); }

/* Summary (Ihre Angaben) */
.summary{ display:grid; gap:var(--s-4); }
.summary__block{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:var(--s-4) var(--s-5); }
.summary__head{ display:flex; justify-content:space-between; align-items:center; gap:var(--s-3); margin-bottom:var(--s-2); }
.summary__head h4{ font-size:var(--t-label); font-weight:600; }
.summary .deflist{ grid-template-columns:minmax(0,10em) 1fr; }
.summary .deflist dd{ overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }

/* Final key facts directly above the button (§ 8 Abs 1 FAGG) */
.keyfacts{
  margin-top:var(--s-7); padding:var(--s-4) var(--s-5); border-radius:var(--r-lg);
  background:var(--cost-bg); color:var(--cost-ink); border:1px solid var(--cost-line);
  font-size:var(--t-help); display:grid; gap:4px;
}
.keyfacts strong{ font-weight:600; }
.keyfacts--free{ background:var(--surface-sunk); color:var(--ink); border-color:var(--line); }
.final .actionbar{ margin-top:var(--s-4); }

/* ---------- Toast ---------- */
.toast-region{ position:fixed; top:68px; left:0; right:0; z-index:15; pointer-events:none; }
.toast-region .shell{ display:flex; }
@media (max-width:767px){ .toast-region{ top:auto; bottom:calc(var(--sticky-h, 96px) + 8px); } }
.toast{
  pointer-events:auto; max-width:560px; width:100%;
  display:grid; grid-template-columns:20px 1fr; gap:var(--s-3); align-items:start;
  padding:var(--s-3) var(--s-4); border-radius:var(--r-md); background:var(--success-bg); color:var(--ink);
  border:1px solid color-mix(in srgb, var(--success) 35%, transparent);
  font-size:var(--t-help); box-shadow:0 8px 24px -12px rgb(28 33 31 / .2);
  opacity:0; transform:translateY(-100%); transition:opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.toast.is-shown{ opacity:1; transform:none; transition-duration:var(--d-base); }
.toast svg{ width:20px; height:20px; color:var(--success); }
.toast{ grid-template-columns:20px 1fr 32px; }
.toast__close{ width:32px; height:32px; margin:-6px -8px -6px 0; display:grid; place-items:center; background:none; border:0; border-radius:var(--r-sm); color:var(--ink-muted); cursor:pointer; }
.toast__close svg{ width:16px; height:16px; color:currentColor; }
@media (max-width:767px){ .toast{ transform:translateY(16px); } .toast.is-shown{ transform:none; } }

/* ---------- Confirmation ---------- */
.confirm{ max-width:640px; padding-block:var(--s-6) var(--s-8); display:grid; gap:var(--s-5); }
.confirm__art{ width:100%; max-width:280px; }
.ref{ display:inline-grid; gap:2px; padding:var(--s-3) var(--s-4); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); justify-self:start; }
.ref span{ font-size:var(--t-meta); color:var(--ink-muted); font-weight:500; }
.ref strong{ font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.steps-list{ padding-left:1.4em; display:grid; gap:var(--s-2); }
.steps-list li::marker{ font-family:var(--f-display); font-weight:600; }
.withdraw-cta{
  display:inline-flex; align-items:center; gap:var(--s-2); color:var(--ink); font-weight:500; font-size:var(--t-label);
}
.withdraw-cta svg{ width:16px; height:16px; }

/* Draw animation (only longer animation, plays once) */
.draw{ stroke-dasharray:1; stroke-dashoffset:1; }
.is-drawn .draw{ animation:draw 900ms var(--ease-out) 200ms forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line); background:var(--paper); padding-block:var(--s-6) var(--s-7); margin-top:auto; }
.site-footer .shell{ display:grid; gap:var(--s-4); }
.footer-links{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-5); font-size:var(--t-help); }
.footer-links a{ display:inline-flex; min-height:44px; align-items:center; color:var(--ink-muted); }
.footer-links a[aria-current="page"]{ color:var(--ink); font-weight:600; }
.footer-withdraw a{
  display:inline-flex; align-items:center; gap:var(--s-2); min-height:44px;
  color:var(--ink); font-size:15px; font-weight:500;
}
.footer-withdraw svg{ width:16px; height:16px; }
.footer-meta{ font-size:var(--t-meta); color:var(--ink-muted); line-height:1.5; max-width:90ch; }
.footer-meta strong{ color:var(--ink); font-weight:600; }

/* ---------- Legal pages (reading mode) ---------- */
.reading{ max-width:68ch; padding-block:var(--s-6) var(--s-8); }
.reading h1{ font-family:var(--f-display); font-weight:500; font-size:var(--t-h2); line-height:1.15; letter-spacing:-.01em; margin-bottom:var(--s-3); text-wrap:balance; }
.reading h2{ font-family:var(--f-display); font-weight:500; font-size:22px; line-height:1.25; margin:var(--s-7) 0 var(--s-3); }
.reading h3{ font-size:var(--t-h3); font-weight:600; margin:var(--s-5) 0 var(--s-2); }
.reading p, .reading li{ font-size:var(--t-body); }
.reading p + p, .reading p + ul, .reading ul + p, .reading ol + p, .reading p + ol{ margin-top:var(--s-3); }
.reading ul, .reading ol{ padding-left:1.25em; display:grid; gap:var(--s-1); }
.reading .meta{ font-size:var(--t-meta); color:var(--ink-muted); }
.reading .draft{ margin:var(--s-5) 0; }
.reading .deflist{ font-size:var(--t-body); grid-template-columns:minmax(0,14em) 1fr; }
.reading .deflist dd{ font-weight:400; }
.reading .back{ display:inline-flex; align-items:center; gap:4px; min-height:44px; font-size:var(--t-label); }
.reading .back svg{ width:16px; height:16px; }
@media (max-width:479px){ .reading .deflist, .summary .deflist{ grid-template-columns:1fr; gap:0 0; } .reading .deflist dd, .summary .deflist dd{ margin-bottom:var(--s-2); } }

/* Widerruf page */
.withdraw{ max-width:560px; padding-block:var(--s-6) var(--s-8); display:grid; gap:var(--s-5); }
.withdraw__art{ width:200px; }
.withdraw .step-title{ margin-bottom:0; }
.withdraw form{ display:grid; gap:0; }
.withdraw .actionbar{ margin-top:var(--s-6); }
.success-box{ padding:var(--s-5); border-radius:var(--r-lg); background:var(--success-bg); border:1px solid color-mix(in srgb, var(--success) 35%, transparent); display:grid; gap:var(--s-3); }
.success-box h2{ font-family:var(--f-display); font-weight:500; font-size:24px; line-height:1.2; }
.success-box pre{ white-space:pre-wrap; font-family:var(--f-ui); font-size:var(--t-help); background:var(--surface); padding:var(--s-4); border-radius:var(--r-sm); border:1px solid var(--line); margin:0; }

/* ---------- Illustrations ("Kontoblatt") ---------- */
.ill{ color:var(--ink); }
.ill *{ fill:none; stroke:none; }
.ill .k{ stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ill .kl{ stroke:var(--line-strong); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.ill .kln{ stroke:var(--line); stroke-width:1; }
.ill .ka{ stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ill .ks{ stroke:var(--success); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.ill .kc{ stroke:var(--cost-line); stroke-width:1.25; }
.ill .kd{ stroke-dasharray:4 5; }
.ill .kd2{ stroke-dasharray:3 4; }
.ill .f-surface{ fill:var(--surface); }
.ill .f-sunk{ fill:var(--surface-sunk); }
.ill .f-paper{ fill:var(--paper); }
.ill .f-tint{ fill:var(--accent-tint); }
.ill .f-cost{ fill:var(--cost-bg); }
.ill .f-bank{ fill:var(--bank-bg); }
.ill .f-success{ fill:var(--success-bg); }
.ill .f-accent{ fill:var(--accent); }
.ill .f-ink{ fill:currentColor; }
.ill .f-ls{ fill:var(--line-strong); }
.ill .f-costink{ fill:var(--cost-ink); }
.ill .offset{ fill:var(--line); opacity:var(--offset-opacity); }

.ill text{ font-family:var(--f-ui); font-weight:600; font-size:13px; font-variant-numeric:tabular-nums; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .step, .step[data-state]{ transform:none !important; }
  .step{ transition:opacity 120ms ease !important; }
  .step .group, .step[data-state^="enter"] .group{ transform:none !important; opacity:1 !important; transition:none !important; }
  .btn:active, .cost-badge:active{ transform:none; }
  .cost-dialog, .cost-dialog[open].is-shown{ transform:none !important; transition:opacity 120ms ease !important; }
  @media (max-width:767px){ .cost-dialog{ opacity:0; } .cost-dialog[open].is-shown{ opacity:1; } }
  .toast{ transform:none !important; }
  .error{ animation:none; }
  .draw{ stroke-dashoffset:0 !important; animation:none !important; }
  .progress__fill{ transition-duration:0ms; }
  .check input::after{ transition:none; }
  .btn .spinner{ animation-duration:1.6s; }
}

@media print{
  .topbar, .site-footer, .actionbar, .cost-dialog, .toast-region{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* Conditional reveal (BIC): grid-rows 0fr -> 1fr */
.reveal{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out); }
.reveal.is-open{ grid-template-rows:1fr; opacity:1; }
.reveal__in{ overflow:hidden; min-height:0; }
.reveal.is-open .reveal__in{ overflow:visible; }
@media (prefers-reduced-motion:reduce){ .reveal{ transition:opacity 120ms ease; } }

.toast--warn{ background:var(--error-bg); border-color:color-mix(in srgb, var(--error) 35%, transparent); }
.toast--warn svg{ color:var(--error); }
.row > .field{ margin-top:0 !important; }
.back{ display:inline-flex; align-items:center; gap:4px; min-height:44px; font-size:var(--t-label); }
.back svg{ width:16px; height:16px; flex:none; }
@media (max-width:419px){
  .topbar__in{ gap:var(--s-2); }
  .back-link{ min-width:44px; justify-content:center; padding:0; margin-left:-12px; }
  .back-link span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .back-link svg{ width:20px; height:20px; }
  .cost-badge{ padding:0 10px; gap:6px; }
  .cost-badge svg{ display:none; }
}
.box, .box > *, .legal-box, .legal-text{ min-width:0; }
.box dd, .legal-text dd{ overflow-wrap:anywhere; }
@media (max-width:479px){
  .box{ padding:var(--s-4); }
  .box .deflist, .legal-box .deflist{ grid-template-columns:1fr; gap:0; }
  .box .deflist dd, .legal-box .deflist dd{ margin-bottom:var(--s-2); }
  .legal-box{ padding:var(--s-4); }
}
@media (max-width:767px){
  /* "Zurück" sitzt mobil in der Top-Bar; die Sticky-Leiste bleibt schlank */
  .actionbar__row .btn--secondary{ display:none; }
  .actionbar .save-note{ display:none; }
}
.save-note--static{ display:none; margin-top:var(--s-5); }
@media (max-width:767px){ .save-note--static{ display:block; } }
/* D7: Start-Button linksbündig zur Textspalte */
.landing__form .actionbar__row{ justify-content:flex-start; }

/* ==========================================================================
   Hell & freundlich (2026-11): heller Himmel-Verlauf, weiße Karten, weiche Bewegung
   ========================================================================== */
:root{
  --paper:#F3F8FB; --surface:#FFFFFF; --surface-sunk:#F1F6F9;
  --line:#DDE6EC; --line-strong:#8A98A2;
  --ink:#16222C; --ink-muted:#4D5B66; --ink-faint:#5F6C76;
  --accent:#0E7A5F; --accent-hover:#0B6650; --accent-tint:#E1F4EC; --on-accent:#FFFFFF;
  --bank-bg:#E4EFFA; --bank-ink:#234461;
  --focus-ring:#0E7A5F;
  --offset-opacity:.45;
  --f-display:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-md:12px; --r-lg:20px;
  --card-shadow:0 1px 2px rgb(22 34 44 / .04), 0 12px 32px -16px rgb(22 34 44 / .16);
  --blob-1:rgb(126 200 227 / .35); --blob-2:rgb(140 214 180 / .30); --blob-3:rgb(255 214 165 / .30);
  --ease-soft:cubic-bezier(.34,1.4,.64,1);
}



/* Hintergrund: sanfte Farbflächen, fixiert */
body{ background-color:var(--paper); position:relative; isolation:isolate; }
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 8% 0%, var(--blob-1), transparent 70%),
    radial-gradient(50vw 45vh at 100% 20%, var(--blob-2), transparent 70%),
    radial-gradient(55vw 45vh at 60% 105%, var(--blob-3), transparent 70%);
}

/* Header: hell, leicht durchscheinend */
.topbar{ background:color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom-color:color-mix(in srgb, var(--line) 70%, transparent); }
.wordmark{ font-family:var(--f-ui); font-weight:600; font-size:18px; color:var(--accent); letter-spacing:-.01em; }

/* Überschriften freundlich-fett statt Serif */
.display{ font-weight:600; letter-spacing:-.025em; line-height:1.1; }
.step-title, .reading h1, .reading h2, .cost-dialog h2, .success-box h2{ font-weight:600; letter-spacing:-.015em; }

/* Weiße Karten */
.form-col, .reading, .withdraw, .confirm, .landing__content{
  background:var(--surface); border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius:var(--r-lg); box-shadow:var(--card-shadow);
}
.form-col{ padding:var(--s-6) var(--s-5) var(--s-7); }
.landing__content{ padding:var(--s-6) var(--s-5); }
.reading, .withdraw, .confirm{ padding:var(--s-6) var(--s-5) var(--s-7); margin-block:var(--s-5) var(--s-7); }
@media (min-width:768px){
  .form-col, .landing__content{ padding:var(--s-7) var(--s-7) var(--s-7); }
  .reading, .withdraw, .confirm{ padding:var(--s-7); }
}
@media (max-width:479px){
  .form-col, .landing__content, .reading, .withdraw, .confirm{ padding-inline:var(--s-4); border-radius:var(--r-md); }
}
.form-col{ max-width:640px; }
.sidebar > *{ box-shadow:var(--card-shadow); border-radius:var(--r-lg); }
.landing__content{ max-width:600px; }
.landing__art{ background:linear-gradient(160deg, #EAF6FF 0%, #E9F8F0 55%, #FFF4E6 100%); border:0; box-shadow:var(--card-shadow); }


.site-footer{ background:color-mix(in srgb, var(--surface) 70%, transparent); }

/* Felder: weiß mit weichem Fokus */
.input, .select{ background-color:var(--surface); border-radius:var(--r-md); }
.input:focus, .select:focus{ box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.box{ border-radius:var(--r-lg); }

/* Buttons: weich, mit kleinem Lift */
.btn{ border-radius:999px; transition:background-color var(--d-fast) ease, border-color var(--d-fast) ease, transform var(--d-base) var(--ease-soft), box-shadow var(--d-base) ease; }
.btn--primary{ box-shadow:0 6px 16px -6px color-mix(in srgb, var(--accent) 55%, transparent); }
@media (hover:hover) and (pointer:fine){
  .btn:hover{ transform:translateY(-2px); }
  .btn--primary:hover{ box-shadow:0 10px 22px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
  .btn--primary:hover .chev{ transform:translateX(3px); }
}
.btn .chev{ transition:transform var(--d-base) var(--ease-soft); }
.btn:active{ transform:scale(.97); }

/* Checkbox: kleiner Hüpfer beim Anhaken */
.check input:checked{ animation:pop 320ms var(--ease-soft); }
@keyframes pop{ 0%{ transform:scale(.8); } 100%{ transform:scale(1); } }

/* Schrittwechsel: sanftes Einblenden von unten */
.step[data-state="enter-fwd"], .step[data-state="enter-back"]{ transform:translateY(14px) scale(.99); }
.step{ transition:opacity var(--d-step) var(--ease-out) 60ms, transform 420ms var(--ease-soft) 60ms; }
.step .group{ transition:opacity 360ms var(--ease-out), transform 480ms var(--ease-soft); }
.step[data-state^="enter"] .group{ transform:translateY(14px); }

/* Illustrationen: farbiger und mit ruhigem Schweben */
.ill .f-tint{ fill:#CFEFE2; }
.ill .f-bank{ fill:#D6E8FA; }
.ill .f-cost{ fill:#FFE3BF; }
.landing__art svg, .spot svg, .confirm__art svg, .withdraw__art svg{ animation:float 6s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.landing__art, .landing__content{ animation:rise 700ms var(--ease-soft) both; }
.landing__content{ animation-delay:120ms; }
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } }

@media (prefers-reduced-motion:reduce){
  .landing__art svg, .spot svg, .confirm__art svg, .withdraw__art svg, .landing__art, .landing__content, .check input:checked{ animation:none !important; }
  .btn:hover{ transform:none; }
}
.landing__art .ill > .f-sunk{ fill:transparent; }
.row > .field{ align-content:start; }
.phone{ background:var(--surface); border-radius:var(--r-md); }
.phone:focus-within{ box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }

/* ==========================================================================
   Hell mit Holz-Hintergrund + Comic-Begleiter (2026-11-03). Immer hell.
   ========================================================================== */
:root{ color-scheme:light; --paper:#EDEAE5; }
body::before{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E %3Cfilter id='g' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.0022' numOctaves='4' seed='11' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0.30 0 0 0 0.70 0.30 0 0 0 0.67 0.30 0 0 0 0.62 0 0 0 0 1'/%3E%3C/filter%3E %3Cfilter id='f' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0 0 0 0'/%3E%3C/filter%3E %3Crect width='720' height='720' filter='url(%23g)'/%3E %3Crect width='720' height='720' filter='url(%23f)'/%3E %3Cg fill='%23A89E90' opacity='.55'%3E%3Crect x='0' width='2' height='720'/%3E%3Crect x='180' width='2' height='720'/%3E%3Crect x='360' width='2' height='720'/%3E%3Crect x='540' width='2' height='720'/%3E%3C/g%3E %3Cg fill='%23A89E90' opacity='.4'%3E%3Crect x='2' y='300' width='178' height='2'/%3E%3Crect x='182' y='560' width='178' height='2'/%3E%3Crect x='362' y='120' width='178' height='2'/%3E%3Crect x='542' y='430' width='178' height='2'/%3E%3C/g%3E %3C/svg%3E") center top / 720px 720px repeat, #DDD6CC; }
.topbar{ background:rgb(255 255 255 / .9); }
.site-footer{ background:rgb(255 255 255 / .88); }
.landing__art{ background:linear-gradient(180deg, #DDF0FF 0%, #F1F9FF 55%, #FFFFFF 100%); border:1px solid rgb(255 255 255 / .8); }
.landing__art .scene{ width:100%; height:100%; }

/* Pflichtfelder */
.label.req::after, .req-star{ content:"*"; color:#D32F2F; font-weight:700; margin-left:3px; }
.req-star{ margin:0 1px; }
.check__tag--req{ color:#D32F2F; }
.check__tag--req::before{ content:"* "; font-weight:700; }

/* Comic-Begleiter */
.guide{ display:flex; align-items:flex-end; gap:var(--s-3); flex:0 1 330px; min-width:0; }
.guide__fig{ width:84px; height:auto; flex:none; overflow:visible; }
.guide__bubble{
  position:relative; background:#FFF7E0; border:2px solid #2B2F36; border-radius:18px; padding:10px 14px;
  font-size:var(--t-help); line-height:1.4; font-weight:500; color:var(--ink); margin-bottom:56px;
  animation:bubble-in 520ms var(--ease-soft) 240ms both;
}
.guide__bubble::before{ content:""; position:absolute; left:-11px; bottom:14px; width:16px; height:16px; background:#FFF7E0; border-left:2px solid #2B2F36; border-bottom:2px solid #2B2F36; transform:rotate(45deg); border-radius:0 0 0 4px; }
@keyframes bubble-in{ from{ opacity:0; transform:translateY(8px) scale(.9); } }
.step-head{ flex-wrap:wrap; }
@media (max-width:599px){ .guide{ flex-basis:100%; } .guide__fig{ width:64px; } .guide__bubble{ margin-bottom:40px; } }
.withdraw__art{ width:auto; }
.confirm__art{ max-width:240px; }
.guide__fig--cheer{ width:100%; }

/* Figuren-Animationen */
.person{ animation:bob 2.8s ease-in-out infinite; }
.p-right{ animation-delay:-1.4s; }
.eyes{ transform-box:fill-box; transform-origin:center; animation:blink 4.2s infinite; }
.arm{ transform-origin:0 0; }
.wave{ animation:wave 1.6s ease-in-out infinite; }
.nudge{ animation:nudge 1.8s ease-in-out infinite; }
.shake{ animation:shake 1.2s ease-in-out infinite; }
.cheerL{ animation:cheerL .9s ease-in-out infinite; }
.cheerR{ animation:cheerR .9s ease-in-out infinite; }
.guide__fig--cheer .person{ animation:jump .9s var(--ease-soft) infinite; }
.confetti{ animation:confetti 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.confetti.c0{ fill:#F2C14E; } .confetti.c1{ fill:#38B48B; } .confetti.c2{ fill:#E86A5A; } .confetti.c3{ fill:#4A86D8; }
.confetti:nth-child(2n){ animation-delay:-.8s; } .confetti:nth-child(3n){ animation-delay:-1.6s; }
.cloud{ animation:drift 14s ease-in-out infinite alternate; }
.cloud.c2{ animation-duration:18s; animation-direction:alternate-reverse; }
.sun{ transform-box:fill-box; transform-origin:center; animation:pulse 4s ease-in-out infinite; }
.tag{ animation:bob 3.4s ease-in-out infinite; }
.plant{ transform-box:fill-box; transform-origin:50% 100%; animation:sway 3.6s ease-in-out infinite; }
.plant.p2{ animation-delay:-1.8s; }
.landing__art svg, .spot svg, .confirm__art svg, .withdraw__art svg{ animation:none; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@keyframes blink{ 0%,92%,100%{ transform:scaleY(1); } 95%{ transform:scaleY(.1); } }
@keyframes wave{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(-22deg); } }
@keyframes nudge{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(-10deg); } }
@keyframes shake{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(8deg); } }
@keyframes cheerL{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(18deg); } }
@keyframes cheerR{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(-18deg); } }
@keyframes jump{ 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(-10px); } }
@keyframes confetti{ 0%,100%{ transform:translateY(0) rotate(0); opacity:1; } 50%{ transform:translateY(10px) rotate(90deg); opacity:.7; } }
@keyframes drift{ from{ transform:translateX(-12px); } to{ transform:translateX(16px); } }
@keyframes pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
@keyframes sway{ 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(3deg); } }
@media (prefers-reduced-motion:reduce){
  .person, .eyes, .arm, .confetti, .cloud, .sun, .tag, .plant, .guide__bubble{ animation:none !important; }
}
.segmented{ grid-template-columns:repeat(3,1fr) !important; }
@media (min-width:1024px){ .form-layout:not(:has(.sidebar)) .form-col{ grid-column:3 / span 8; } }
.kf-head{ word-spacing:.08em; }

/* Eine zentrierte Karte pro Seite, ohne Seitenspalte */
.form-layout{ display:block; }
.form-layout .sidebar{ display:none !important; }
@media (min-width:1024px){ .howto-details{ display:block; } }
.form-col, .confirm, .withdraw, .reading{ margin-inline:auto; }
.progress{ max-width:calc(640px + 2 * var(--gutter)); }
.landing{ grid-template-columns:minmax(0,1fr); }
@media (min-width:1024px){ .landing{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); } }
@media (max-width:479px){
  .btn{ min-width:0; max-width:100%; white-space:normal; height:auto; min-height:52px; padding-block:12px; text-align:center; line-height:1.25; }
  .landing__content, .form-col{ padding-inline:var(--s-4); }
}
.landing__content{ grid-template-columns:minmax(0,1fr); }
@media (max-width:767px){ .display{ font-size:clamp(26px, 8.4vw, 40px); } }

/* Fortschritt: ganze Schritt-Fläche anklickbar (zurück jederzeit, vor nur nach Prüfung) */
.progress__item{ position:relative; }
button.progress__name::after{ content:""; position:absolute; inset:-10px 0 -6px; }
button.progress__name--next{ color:var(--ink-muted); text-decoration:none; }
@media (hover:hover) and (pointer:fine){
  .progress__item:has(button.progress__name):hover .progress__bar{ background:color-mix(in srgb, var(--accent) 35%, var(--line)); }
  button.progress__name--next:hover{ color:var(--ink); }
}
@media (max-width:767px){
  button.progress__name{ display:block; font-size:0; line-height:0; height:0; padding:0; }
  .progress__list{ gap:6px; }
  .progress__bar{ height:6px; }
}

/* Mittig: Bestätigung, Header-Marke, Footer */
.confirm{ justify-items:center; text-align:center; }
.confirm .ref{ justify-self:center; }
.confirm .steps-list{ text-align:left; max-width:520px; }
.confirm__art{ margin-inline:auto; }
.topbar__in{ position:relative; justify-content:center; }
.topbar__in .back-link{ position:absolute; left:var(--gutter); top:50%; transform:translateY(-50%); }
.wordmark{ margin-right:0; }
.site-footer .shell{ justify-items:center; text-align:center; }
.footer-links{ justify-content:center; }