/* MDXF Invest — invest.mdxf.at
   Im Stil von mdxf.de (B2B): Papier, schwarze Schrift, weiße Karten, DM Sans/Mono.
   B2C-Unterschiede: grünes INVEST-Zeichen, große grüne Live-Zahlen, Du-Form, eckigere Knöpfe statt Pills. */

/* ── Schriften (selbst gehostet) ── */
@font-face{ font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap;
  src:url(/fonts/dm-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:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap;
  src:url(/fonts/dm-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/dm-mono-400-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:'DM Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/dm-mono-400-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'DM Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url(/fonts/dm-mono-500-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:'DM Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url(/fonts/dm-mono-500-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ── Grundlagen ── */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
:root{
  --paper:#F6F5F2; --paper-2:#EFEDE8; --white:#FFFFFF;
  --ink:#1B1B18; --ink-2:#3A3936; --dim:#6B6A64; --line:#E6E3DC; --line-2:#D9D6CE;
  --amber:#F0B830; --amber-dark:#8A6400; --amber-soft:#FFF6D6; --amber-line:#F3DFA0;
  --gruen:#157A45; --gruen-soft:#E3F3EA; --gruen-line:#BFE3CD; --rot:#B3382E; --rot-soft:#FBE9E6;
  --font:'DM Sans', -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
  --mono:'DM Mono', "SF Mono", ui-monospace, Menlo, monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:18px;
  --eck:12px;
  --rand:clamp(18px,4vw,44px);
}
html{ background:var(--paper); scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ background:var(--paper); color:var(--ink); font-family:var(--font); line-height:1.6; overflow-x:clip;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
section[id], header[id]{ scroll-margin-top:72px; }
::selection{ background:var(--amber); color:var(--ink); }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }
b,strong{ font-weight:700; }
button{ font:inherit; color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--amber-dark); outline-offset:3px; border-radius:4px; }
.plus{ color:var(--gruen); } .minus{ color:var(--rot); }
.nw{ white-space:nowrap; }

/* ── Navigation (wie mdxf.de) ── */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px var(--rand); padding-top:calc(14px + env(safe-area-inset-top,0px));
  background:var(--paper); /* ohne Weichzeichner: der kostet am iPhone Leistung */
  border-bottom:1px solid transparent; transition:border-color .4s; }
.nav.scrolled{ border-bottom-color:var(--line); }
.mark{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; letter-spacing:.14em; font-size:15px; color:var(--ink); }
.mark .sq{ width:28px; height:28px; border-radius:7px; flex:none; background:url(/logo.svg) center/contain no-repeat; box-shadow:0 1px 0 rgba(27,27,24,.08); }
.mark b{ color:var(--amber-dark); font-weight:800; }
/* B2C-Kennzeichen: grün statt Amber (mdxf.de/privat hat „PRIVAT“ in Amber) */
.mark i{ margin-left:-2px; padding:3px 8px 2px; border:1px solid var(--gruen-line); border-radius:6px; background:var(--gruen-soft);
  font-family:var(--mono); font-style:normal; font-size:10.5px; font-weight:500; letter-spacing:.18em; line-height:1.4; text-transform:uppercase; color:var(--gruen); }
.nav-links{ display:flex; align-items:center; gap:22px; }
.nav-links a{ text-decoration:none; font-size:14px; color:var(--ink-2); opacity:.85; transition:opacity .3s; }
.nav-links a:hover{ opacity:1; }
.nav-links a.bereich{ display:none; } /* andere MDXF-Bereiche: nur Handy-Menü und Fußzeile, die Desktop-Navigation bleibt schlank */
.nav-links a[aria-current]:not(.nav-cta){ opacity:1; color:var(--ink); position:relative; }
.nav-links a[aria-current]:not(.nav-cta)::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; border-radius:2px; background:var(--amber); }
.nav-cta{ display:inline-flex; align-items:center; min-height:38px; padding:0 16px; border-radius:10px; background:var(--ink); color:var(--white) !important; opacity:1 !important; font-weight:600; white-space:nowrap; }
.nav-cta:hover{ background:#000; }
.burger{ display:none; position:relative; flex:none; width:44px; height:44px; margin-right:-10px; padding:0; border:0; border-radius:12px;
  background:transparent; color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent; }
@media (hover:hover){ .burger:hover{ background:rgba(27,27,24,.05); } }
.burger-box{ position:absolute; left:50%; top:50%; width:22px; height:12px; transform:translate(-50%,-50%); }
.burger-box i{ position:absolute; right:0; height:2px; border-radius:2px; background:currentColor; transition:top .45s var(--ease), transform .45s var(--ease), width .45s var(--ease); }
.burger-box i:nth-child(1){ top:0; width:22px; }
.burger-box i:nth-child(2){ top:10px; width:14px; }
.nav-open .burger-box i{ top:5px; width:22px; }
.nav-open .burger-box i:nth-child(1){ transform:rotate(45deg); }
.nav-open .burger-box i:nth-child(2){ transform:rotate(-45deg); }
.mnav{ display:none; }
@media (max-width:820px){
  .nav{ gap:10px; }
  .nav-links{ margin-left:auto; }
  .nav-links a:not(.nav-cta){ display:none; }
  .nav-cta .lang{ display:none; }
  .burger{ display:block; }
  .nav-cta{ transition:opacity .3s, visibility 0s linear .3s, background .3s; }
  .nav-open .nav-cta{ opacity:0 !important; visibility:hidden; }
  .nav-open .nav{ border-bottom-color:var(--line); }
  html.nav-open, html.nav-open body{ overflow:hidden; }
  .mnav{ display:block; position:fixed; inset:0; z-index:99; overflow-y:auto; overscroll-behavior:contain;
    background:radial-gradient(120% 60% at 100% 0%, rgba(21,122,69,.10), rgba(21,122,69,0) 55%), var(--paper);
    visibility:hidden; opacity:0; transition:opacity .28s ease-out, visibility 0s linear .28s; }
  .nav-open .mnav{ visibility:visible; opacity:1; transition:opacity .28s ease-out, visibility 0s; }
  .mnav-in{ min-height:100%; max-width:560px; margin:0 auto; display:flex; flex-direction:column;
    padding:calc(92px + env(safe-area-inset-top,0px)) var(--rand) calc(28px + env(safe-area-inset-bottom,0px)); }
  .mnav-list{ list-style:none; border-top:1px solid var(--line-2); }
  .mnav-list li{ border-bottom:1px solid var(--line); }
  .mnav-list a{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:baseline; column-gap:8px; padding:17px 0 16px; text-decoration:none; color:var(--ink); -webkit-tap-highlight-color:transparent; }
  .mnav-list .n{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--amber-dark); }
  .mnav-list .t{ font-size:clamp(30px,8.6vw,40px); font-weight:800; letter-spacing:-.035em; line-height:1.04; }
  .mnav-list .s{ grid-column:2; margin-top:5px; font-size:14px; color:var(--dim); }
  .mnav-list .a{ grid-column:3; grid-row:1; align-self:center; font-size:20px; color:var(--line-2); }
  .mnav-list a[aria-current] .t{ color:var(--amber-dark); }
  .mnav .mnav-cta{ margin-top:28px; width:100%; }
  .mnav-bereiche{ padding-top:30px; }
  .mnav-bereiche a{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; padding:12px 0; border-top:1px solid var(--line);
    text-decoration:none; color:var(--ink); -webkit-tap-highlight-color:transparent; }
  .mnav-bereiche a:last-child{ border-bottom:1px solid var(--line); }
  .mnav-bereiche .t{ font-size:18px; font-weight:700; letter-spacing:-.01em; }
  .mnav-bereiche .s{ grid-column:1; font-size:13px; color:var(--dim); }
  .mnav-bereiche .a{ grid-column:2; grid-row:1 / span 2; align-self:center; color:var(--dim); }
  .mnav-kontakt{ margin-top:auto; padding-top:36px; }
  .mnav-kontakt .direkt{ margin-top:10px; }
  .mnav-fuss{ margin-top:16px; font-size:12.5px; color:var(--dim); }
  .mnav-list li, .mnav .mnav-cta, .mnav-bereiche, .mnav-kontakt{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .nav-open .mnav-list li, .nav-open .mnav .mnav-cta, .nav-open .mnav-bereiche, .nav-open .mnav-kontakt{ opacity:1; transform:none; transition-delay:calc(var(--i,0) * 55ms + 90ms); }
}
@media (max-width:359px){ .mark i{ display:none; } }

/* ── Layout und Schrift (wie mdxf.de) ── */
.wrap{ max-width:1120px; margin:0 auto; padding:0 var(--rand); }
.section{ padding:clamp(64px,9vw,120px) 0; border-top:1px solid var(--line); }
/* Kapitelmarke: Mono, Amber, Großbuchstaben wie auf mdxf.de */
.label{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--amber-dark); }
.label b{ font-weight:500; }
.label span{ color:var(--dim); }
h1{ margin-top:18px; font-size:clamp(38px,4.6vw,58px); line-height:1.02; letter-spacing:-.03em; font-weight:800; text-wrap:balance; }
h2{ margin-top:14px; font-size:clamp(28px,4vw,44px); line-height:1.12; letter-spacing:-.02em; font-weight:800; max-width:22ch; text-wrap:balance; }
h1 em, h2 em{ font-style:normal; color:var(--amber-dark); }
h3{ font-size:19px; font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.lead{ margin-top:18px; font-size:clamp(16px,1.6vw,19px); color:var(--ink-2); max-width:60ch; }
.fein{ margin-top:18px; font-size:12.5px; color:var(--dim); max-width:84ch; }
.fein a, .tlink{ color:var(--amber-dark); }
.karte{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); }

/* Live-Punkt */
.live{ position:relative; display:inline-block; width:8px; height:8px; flex:none; border-radius:50%; background:var(--gruen); }
.live::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid var(--gruen); opacity:0; animation:puls 2.4s var(--ease) infinite; }
@keyframes puls{ 0%{ opacity:.6; transform:scale(.4); } 70%,100%{ opacity:0; transform:scale(1.5); } }

/* Knöpfe: wie mdxf.de, aber eckiger */
.knoepfe{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 22px; border-radius:var(--eck);
  background:var(--ink); color:var(--white); border:1px solid var(--ink); text-decoration:none; font-weight:600; font-size:15px; cursor:pointer;
  transition:transform .3s var(--ease), background .3s; -webkit-tap-highlight-color:transparent; }
.btn:hover{ background:#000; transform:translateY(-1px); }
.btn.zweit{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn.zweit:hover{ background:var(--white); }
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }
.btn[disabled]{ opacity:.55; cursor:default; transform:none; }
.btn.klein{ min-height:44px; padding:0 18px; font-size:14.5px; }

/* Ladezustand: Platzhalter gleich hoch wie der echte Inhalt */
.laedt .wartet{ color:transparent !important; background:linear-gradient(90deg,var(--paper-2),var(--line),var(--paper-2)); background-size:200% 100%;
  border-radius:6px; animation:schimmer 1.4s linear infinite; }
@keyframes schimmer{ to{ background-position:-200% 0; } }
.fehler .wartet{ visibility:hidden; }
.fehlerbox{ display:none; margin-top:22px; padding:16px 20px; border-left:2px solid var(--rot); border-radius:0 12px 12px 0; background:var(--rot-soft); color:var(--ink); font-size:14.5px; }
.fehler .fehlerbox{ display:block; }
.fehler .lb, .fehler #satz, .fehler .ergebnis{ display:none; }

/* ── Startseite: Hero ── */
.hero{ position:relative; padding:150px 0 76px; }
.hero::before{ content:""; position:absolute; inset:0 0 auto 0; height:640px; pointer-events:none; z-index:-1;
  background:radial-gradient(45% 55% at 82% 22%, rgba(21,122,69,.08), rgba(21,122,69,0) 70%); }
.hero .wrap{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); grid-template-areas:"text live" "aktion live"; column-gap:clamp(28px,5vw,64px); }
.hero-text{ grid-area:text; align-self:end; }
.hero-aktion{ grid-area:aktion; align-self:start; }
.hero-live{ grid-area:live; align-self:center; }
@media (max-width:900px){
  .hero{ padding:116px 0 56px; }
  .hero .wrap{ grid-template-columns:minmax(0,1fr); grid-template-areas:"text" "live" "aktion"; row-gap:30px; }
  .hero-aktion .knoepfe{ margin-top:0; }
}
.hinweise{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:24px; font-size:13.5px; color:var(--dim); }
.hinweise span{ display:inline-flex; align-items:center; gap:8px; }
.hinweise span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gruen); }

/* Live-Karte (wie die Demo-Karte auf mdxf.de) */
.ls{ position:relative; display:block; padding:20px 22px 0; background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 30px 60px -40px rgba(27,27,24,.35); text-decoration:none; color:inherit; transition:border-color .3s, transform .4s var(--ease); }
@media (hover:hover){ .ls:hover{ border-color:var(--line-2); transform:translateY(-2px); } }
.ls-kopf{ display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px dashed var(--line-2); font-family:var(--mono); font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.ls-kopf .stand{ margin-left:auto; text-transform:none; letter-spacing:.02em; white-space:nowrap; }
.ls{ container-type:inline-size; }
.ls-zahl{ margin-top:18px; height:1em; line-height:1; font-size:min(92px, calc(100cqw / 5.2)); font-weight:800; letter-spacing:-.05em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ls-seit{ margin-top:12px; font-size:14.5px; color:var(--ink-2); }
.ls-kurve{ position:relative; height:clamp(110px,14vw,150px); margin:14px -4px 0; }
.ls-fuss{ display:flex; align-items:center; padding:14px 0; border-top:1px solid var(--line); font-size:14.5px; }
.ls-fuss .los{ margin-left:auto; font-weight:600; white-space:nowrap; }
.ls-fuss .los .arr{ display:inline-block; color:var(--amber-dark); transition:transform .35s var(--ease); }
.ls:hover .los .arr{ transform:translateX(3px); }
.ls .fehlerhinweis{ display:none; padding:36px 0; color:var(--dim); font-size:14.5px; }
.ls.fehler .fehlerhinweis{ display:block; }
.ls.fehler .ls-zahl, .ls.fehler .ls-seit, .ls.fehler .ls-kurve, .ls.fehler .ls-fuss{ display:none; }

/* ── Ablauf als Zeitleiste ── */
.zeitleiste{ position:relative; list-style:none; margin-top:48px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 18px; }
.zeitleiste.vier{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.zeitleiste::before{ content:""; position:absolute; left:0; right:0; top:7px; height:2px; background:var(--line); }
.zeitleiste::after{ content:""; position:absolute; left:0; top:7px; height:2px; width:100%; background:var(--amber); transform:scaleX(0); transform-origin:left;
  transition:transform 1.6s var(--ease) .2s; }
.reveal.in .zeitleiste::after{ transform:none; }
.zeitleiste li{ position:relative; padding:34px 18px 0 0; }
.zeitleiste li::before{ content:""; position:absolute; z-index:1; top:0; left:0; width:16px; height:16px; border-radius:50%; background:var(--white); border:2px solid var(--amber); }
.zeitleiste li:last-child::before{ background:var(--amber); }
.zeitleiste .min{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--amber-dark); }
.zeitleiste b{ display:block; margin-top:8px; font-size:18px; letter-spacing:-.01em; line-height:1.3; }
.zeitleiste p{ margin-top:8px; font-size:14.5px; color:var(--dim); }
@media (max-width:900px){
  .zeitleiste, .zeitleiste.vier{ grid-template-columns:minmax(0,1fr); gap:0; margin-top:40px; padding-left:34px; }
  .zeitleiste::before, .zeitleiste::after{ left:7px; right:auto; top:8px; bottom:8px; width:2px; height:auto; }
  .zeitleiste::after{ transform:scaleY(0); transform-origin:top; }
  .reveal.in .zeitleiste::after{ transform:none; }
  .zeitleiste li{ padding:0 0 28px; }
  .zeitleiste li:last-child{ padding-bottom:0; }
  .zeitleiste li::before{ left:-34px; top:4px; }
  .zeitleiste b{ margin-top:2px; }
}

/* ── Preisliste (weiße Karte mit Zeilen) ── */
.preise{ margin-top:40px; padding:0 26px; background:var(--white); border:1px solid var(--line); border-radius:var(--r); }
.preis + .preis{ border-top:1px solid var(--line); }
.preis summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,auto) minmax(24px,1fr) auto; grid-template-areas:"name punkte wert" "dauer dauer zeichen";
  align-items:baseline; column-gap:14px; row-gap:4px; padding:22px 0 18px; -webkit-tap-highlight-color:transparent; }
.preis summary::-webkit-details-marker{ display:none; }
.p-name{ grid-area:name; font-size:clamp(19px,2.2vw,24px); font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.p-punkte{ grid-area:punkte; align-self:end; height:1px; margin-bottom:.4em; background-image:linear-gradient(90deg,var(--line-2) 50%,transparent 0); background-size:6px 1px; }
.p-wert{ grid-area:wert; justify-self:end; text-align:right; font-size:clamp(19px,2.2vw,24px); font-weight:800; letter-spacing:-.02em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.p-dauer{ grid-area:dauer; font-family:var(--mono); font-size:12px; color:var(--dim); }
.p-zeichen{ grid-area:zeichen; justify-self:end; font-family:var(--mono); font-size:12px; color:var(--amber-dark); }
.p-zeichen::after{ content:"Details +"; }
.preis[open] .p-zeichen::after{ content:"Schließen −"; }
.p-inhalt{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:16px 44px; padding:0 0 24px; }
@media (max-width:760px){ .p-inhalt{ grid-template-columns:minmax(0,1fr); } .preise{ padding:0 18px; } }
.p-inhalt p{ color:var(--ink-2); font-size:15px; }
.p-inhalt ul{ list-style:none; }
.p-inhalt li{ position:relative; padding:7px 0 7px 18px; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-2); }
.p-inhalt li:first-child{ border-top:0; padding-top:0; }
.p-inhalt li::before{ content:""; position:absolute; left:0; top:15px; width:6px; height:6px; border-radius:50%; background:var(--amber); }
.p-inhalt li:first-child::before{ top:8px; }
.p-inhalt .btn{ margin-top:16px; }
.preis.haupt .p-name::after{ content:"Der Einstieg"; display:inline-block; margin-left:10px; padding:2px 7px; border:1px solid var(--amber-line); border-radius:6px;
  background:var(--amber-soft); font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.06em; color:var(--amber-dark); vertical-align:middle; }
@media (max-width:420px){ .preis.haupt .p-name::after{ display:none; } }
.ehrlich{ margin-top:22px; padding:18px 22px; border-left:2px solid var(--amber); border-radius:0 14px 14px 0; background:var(--white); color:var(--ink-2); font-size:14.5px; max-width:80ch; }
.ehrlich b{ color:var(--ink); }

/* Band: eine Zeile mit Link (Startseite → Rechner), als ruhige Karte */
.band{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 40px; margin-top:22px; padding:26px 30px;
  background:var(--amber-soft); border:1px solid var(--amber-line); border-radius:var(--r); text-decoration:none; color:inherit; transition:border-color .3s; }
.band:hover{ border-color:var(--amber); }
.band .satz-text{ max-width:26ch; }
.band .los{ display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:15.5px; color:var(--ink); white-space:nowrap; }
.band .los .arr{ transition:transform .35s var(--ease); }
.band:hover .los .arr{ transform:translateX(4px); }
@media (max-width:760px){ .band{ padding:22px; } }

/* ── Satz-Rechner ── */
.satz-text{ font-size:clamp(28px,4.2vw,48px); font-weight:800; letter-spacing:-.03em; line-height:1.2; max-width:22ch; text-wrap:pretty; }
.satz-text.klein{ font-size:clamp(21px,2.6vw,30px); line-height:1.3; letter-spacing:-.02em; }
.feld{ display:inline; padding:0 .12em; border:0; border-radius:.18em; background:var(--amber-soft); font:inherit; letter-spacing:inherit; color:var(--amber-dark); cursor:pointer;
  text-decoration:underline; text-decoration-thickness:.06em; text-underline-offset:.14em; text-decoration-color:var(--amber);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background .25s; -webkit-tap-highlight-color:transparent; }
.feld::after{ content:""; display:inline-block; width:.3em; height:.3em; margin:0 .02em .16em .16em; border-right:.07em solid currentColor; border-bottom:.07em solid currentColor; transform:rotate(45deg); opacity:.75; }
.feld:hover{ background:#FFEDB0; }
.ergebnis{ margin-top:30px; padding:26px 26px 22px; }
@media (max-width:600px){ .ergebnis{ padding:20px 18px 18px; } }
.ergebnis{ container-type:inline-size; }
.r-datum{ height:19px; line-height:19px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Größe nach dem längsten Wert des Szenarios (--zeichen, per JS), damit die Zahl nie umbricht */
.ergebnis-zahl{ margin-top:10px; height:1em; line-height:1; font-size:min(104px, calc(100cqw / (var(--zeichen, 8) * .62))); font-weight:800; letter-spacing:-.045em;
  white-space:nowrap; font-variant-numeric:tabular-nums; }
.r-werte{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; max-width:460px; }
.r-werte dt{ height:18px; line-height:18px; font-size:12.5px; color:var(--dim); white-space:nowrap; }
/* Spalten-Zahlen schrumpfen erst bei sehr langen Beträgen (eigener Betrag), sonst 17px */
.r-werte dd{ height:26px; line-height:26px; margin-top:2px; font-size:min(17px, calc((min(100cqw, 460px) - 14px) / 2 / ((var(--zeichen, 8) + 1) * .6))); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.nur-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.r-kurve{ position:relative; height:clamp(220px,34vw,340px); margin-top:24px; }
.legende{ display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:12px; font-family:var(--mono); font-size:12px; color:var(--dim); }
.legende span{ display:inline-flex; align-items:center; gap:8px; }
.legende i{ width:16px; height:3px; border-radius:2px; background:#D69A10; }
.legende i.ein{ background:repeating-linear-gradient(90deg,#A8A49B 0 4px,transparent 4px 7px); }
.unterwegs{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-2); max-width:72ch; min-height:64px; }
.r-aktion{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:18px; }
.r-aktion .hinweis{ font-size:13px; color:var(--dim); }

/* Vergleich: alle Werte im selben Szenario, wie eine Watchlist */
.vergleich{ margin-top:34px; padding:0 8px; background:var(--white); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.v-zeile{ display:grid; grid-template-columns:30px minmax(0,1fr) 72px minmax(88px,auto); align-items:center; gap:14px; width:100%; padding:13px 12px;
  border:0; background:none; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s; }
.v-zeile + .v-zeile{ border-top:1px solid var(--line); }
.v-zeile:hover{ background:var(--paper); }
.v-zeile .nr{ font-family:var(--mono); font-size:12px; color:var(--dim); }
.v-zeile .n b{ display:block; font-size:16px; font-weight:600; }
.v-zeile .n b{ line-height:1.35; }
.v-zeile .n small{ display:block; margin-top:1px; font-size:12.5px; line-height:1.35; color:var(--dim); text-wrap:pretty; }
.v-zeile svg{ width:72px; height:26px; overflow:visible; }
.v-zeile .w{ text-align:right; font-variant-numeric:tabular-nums; }
.v-zeile .w b{ display:block; font-size:16px; font-weight:700; }
.v-zeile .w small{ display:block; font-size:12.5px; }
.v-zeile[aria-current="true"]{ background:var(--amber-soft); box-shadow:inset 3px 0 0 var(--amber); }
.v-zeile[aria-current="true"] .nr{ color:var(--amber-dark); }
.vergleich:not(.alle) .v-zeile:nth-child(n+7){ display:none; }
.mehr-zeigen{ margin-top:16px; }
@media (max-width:420px){ .v-zeile{ grid-template-columns:24px minmax(0,1fr) 48px minmax(76px,auto); gap:8px; padding:12px 8px; } .v-zeile svg{ width:48px; } .v-zeile .w b{ font-size:15px; } }

/* Auswahl-Blätter (am Handy von unten, am Computer in der Mitte).
   --frei = sichtbare Höhe, beim Öffnen gemessen (satz.js): Am iPhone verdecken die Browser-Leisten einen Teil von 100vh,
   deshalb nie vh. Die Seite dahinter steht still, solange ein Blatt offen ist. */
html{ scrollbar-gutter:stable; }
html:has(dialog.blatt[open]){ overflow:hidden; }
dialog.blatt{ position:fixed; inset:auto 0 var(--unten, 0px) 0; width:100%; max-width:none; max-height:calc(var(--frei, 100svh) - 48px); margin:0; padding:0; border:1px solid var(--line); border-bottom:0;
  border-radius:18px 18px 0 0; background:var(--white); color:var(--ink); overflow:hidden; box-shadow:0 -20px 50px -20px rgba(27,27,24,.35); }
dialog.blatt::backdrop{ background:rgba(27,27,24,.45); }
dialog.blatt[open]{ display:flex; flex-direction:column; animation:blattAuf .4s var(--ease); }
@keyframes blattAuf{ from{ transform:translateY(48px); opacity:0; } }
@media (min-width:700px){
  dialog.blatt{ inset:0 0 var(--unten, 0px) 0; margin:auto; width:min(560px, calc(100% - 48px)); max-height:min(760px, calc(var(--frei, 100svh) - 96px)); border-radius:var(--r); border-bottom:1px solid var(--line); }
}
.blatt-kopf{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 14px 14px 22px; border-bottom:1px solid var(--line); }
.blatt-kopf h3{ font-size:17px; }
.blatt-zu{ display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:10px; background:transparent; color:var(--dim); font-size:22px; line-height:1; cursor:pointer; }
.blatt-zu:hover{ background:var(--paper); color:var(--ink); }
.blatt-inhalt{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:6px 0 calc(18px + env(safe-area-inset-bottom,0px)); }
.blatt-gruppe{ padding:16px 22px 6px; font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber-dark); }
.wahl{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; width:100%; min-height:56px; padding:10px 22px; border:0;
  background:none; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s; }
.wahl + .wahl{ box-shadow:inset 0 1px 0 var(--line); }
.wahl:hover{ background:var(--paper); }
.wahl b{ display:block; font-size:16px; font-weight:600; }
.wahl small{ display:block; font-size:12.5px; color:var(--dim); }
.wahl .r{ text-align:right; font-variant-numeric:tabular-nums; }
.wahl .r b{ font-size:15px; }
.wahl[aria-pressed="true"]{ background:var(--amber-soft); box-shadow:inset 3px 0 0 var(--amber); }
.wahl[aria-pressed="true"] > span:first-child b{ color:var(--amber-dark); }
.wahl:focus-visible{ outline-offset:-3px; border-radius:6px; } /* Fokus innerhalb der Zeile, nicht über den Rand hinaus */
.raster{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:16px 22px; }
.raster.drei{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.raster button{ min-height:50px; border:1px solid var(--line-2); border-radius:10px; background:var(--paper); font-size:15.5px; font-weight:600;
  font-variant-numeric:tabular-nums; cursor:pointer; transition:border-color .2s, background .2s; -webkit-tap-highlight-color:transparent; }
.raster button:hover{ border-color:var(--ink); background:var(--white); }
.raster button[aria-pressed="true"]{ border-color:var(--amber); background:var(--amber-soft); color:var(--amber-dark); }
.raster button:disabled{ opacity:.35; cursor:default; }
.raster button:disabled:hover{ border-color:var(--line-2); background:var(--paper); }
.blatt-hinweis{ padding:4px 22px 0; font-size:12.5px; color:var(--dim); }
/* Eigener Betrag (unter den festen Beträgen) */
.eigen{ padding:6px 22px 4px; }
.eigen label{ display:block; margin-bottom:8px; font-size:13px; color:var(--dim); }
.eigen-reihe{ display:flex; gap:10px; }
.eigen-feld{ position:relative; flex:1 1 auto; min-width:0; }
.eigen-feld input{ width:100%; height:50px; padding:0 38px 0 14px; border:1px solid var(--line-2); border-radius:10px; background:var(--paper); color:var(--ink);
  font:inherit; font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; }
.eigen-feld input::placeholder{ color:var(--dim); font-weight:400; opacity:.8; }
.eigen-feld input:focus{ outline:none; border-color:var(--ink); background:var(--white); }
.eigen-feld input[aria-invalid="true"]{ border-color:var(--rot); }
.eigen-feld span{ position:absolute; right:14px; top:50%; transform:translateY(-50%); font-weight:600; color:var(--dim); pointer-events:none; }
.eigen .btn{ flex:none; min-height:50px; }
.eigen-hinweis{ margin-top:8px; font-size:12.5px; color:var(--dim); }
.eigen-hinweis.fehler{ color:var(--rot); }

/* ── Kontoseite ── */
.kopf{ padding:140px 0 0; }
@media (max-width:900px){ .kopf{ padding-top:112px; } }
.kopf .satz-text{ margin-top:20px; }
.lb{ margin-top:30px; padding:26px 26px 18px; background:var(--white); border:1px solid var(--line); border-radius:var(--r); box-shadow:0 30px 60px -44px rgba(27,27,24,.3); }
@media (max-width:600px){ .lb{ padding:20px 18px 14px; } }
/* Über der Kurve: jede Zeile hat eine feste Höhe und bricht nie um → beim Ablesen bewegt sich nichts */
.lb{ container-type:inline-size; }
.lb-datum{ height:19px; line-height:19px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-zahl{ margin-top:10px; height:1em; line-height:1; font-size:min(128px, calc(100cqw / 4.6)); font-weight:800; letter-spacing:-.05em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lb-tag{ margin-top:12px; height:24px; line-height:24px; font-size:15px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.zeitraum{ display:flex; gap:4px; margin-top:22px; border-bottom:1px solid var(--line); }
.zeitraum button{ position:relative; min-width:52px; min-height:44px; padding:0 12px; border:0; background:none; color:var(--dim);
  font-family:var(--mono); font-size:13px; cursor:pointer; transition:color .25s; -webkit-tap-highlight-color:transparent; }
.zeitraum button:hover{ color:var(--ink); }
.zeitraum button[aria-pressed="true"]{ color:var(--ink); font-weight:500; }
.zeitraum button[aria-pressed="true"]::after{ content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:var(--amber); }
.lb-kurve{ position:relative; height:clamp(240px,40vw,400px); margin-top:20px; }
.lb-hilfe{ margin-top:10px; font-family:var(--mono); font-size:11.5px; color:var(--dim); }

/* Kurze ehrliche Punkte */
.kurz{ list-style:none; margin-top:30px; max-width:780px; }
.kurz li{ position:relative; padding:14px 0 14px 32px; border-top:1px solid var(--line); font-size:15.5px; color:var(--ink-2); }
.kurz li:first-child{ border-top:0; }
.kurz li::before{ content:""; position:absolute; left:0; top:17px; width:18px; height:18px; border-radius:50%; background:var(--gruen-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23157A45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size:11px; background-position:center; background-repeat:no-repeat; }
.kurz li b{ color:var(--ink); }
.kurz li b.minus{ color:var(--rot); }

/* Schluss: großer Satz mit Knopf (wie das Privat-Band auf mdxf.de) */
.schluss{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 40px; padding:30px; border:1px solid var(--amber-line);
  border-radius:var(--r); background:var(--amber-soft); }
.schluss h2{ margin-top:0; font-size:clamp(24px,3vw,32px); }
.schluss p{ margin-top:10px; font-size:15.5px; color:var(--ink-2); max-width:52ch; }
.schluss .btn{ flex:none; }
@media (max-width:760px){ .schluss{ padding:22px; } }

/* ── Fragen (wie mdxf.de) ── */
.fragen{ margin-top:34px; border-top:1px solid var(--line); max-width:880px; }
.fragen details{ border-bottom:1px solid var(--line); }
.fragen summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:20px 0;
  font-weight:600; font-size:16.5px; -webkit-tap-highlight-color:transparent; }
.fragen summary::-webkit-details-marker{ display:none; }
.fragen summary::after{ content:"+"; flex:none; font-family:var(--mono); font-size:20px; color:var(--dim); transition:transform .3s; }
.fragen details[open] summary::after{ transform:rotate(45deg); }
.fragen .a{ padding:0 0 22px; color:var(--dim); font-size:15px; max-width:70ch; }

/* ── Anfrage (wie mdxf.de) ── */
.kontakt{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-areas:"text form" "info form";
  column-gap:clamp(24px,4vw,56px); margin-top:38px; align-items:start; }
.k-text{ grid-area:text; } .k-info{ grid-area:info; } .kontakt form{ grid-area:form; }
@media (max-width:860px){ .kontakt{ grid-template-columns:minmax(0,1fr); grid-template-areas:"text" "form" "info"; row-gap:24px; margin-top:28px; } }
.k-text .lead{ margin-top:0; }
.direkt{ margin-top:22px; }
.direkt a{ display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid var(--line); font-weight:600; text-decoration:none; }
.direkt a:last-child{ border-bottom:1px solid var(--line); }
.direkt svg{ width:18px; height:18px; fill:none; stroke:var(--ink); stroke-width:1.7; flex:none; }
form.anfrage{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:26px; }
@media (max-width:560px){ form.anfrage{ padding:20px; } }
.gruppe{ border:0; padding:0; margin:0 0 20px; min-width:0; }
.gruppe legend{ padding:0; margin-bottom:10px; font-size:13px; color:var(--dim); }
.optionen{ border:1px solid var(--line-2); border-radius:var(--eck); overflow:hidden; background:var(--paper); }
.option{ display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:14px; min-height:52px; padding:10px 16px; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:background .2s; }
.option + .option{ border-top:1px solid var(--line); }
.option:hover{ background:var(--white); }
.option input{ -webkit-appearance:none; appearance:none; display:grid; place-items:center; width:18px; height:18px; margin:0; border:1.5px solid var(--line-2);
  border-radius:50%; background:var(--white); cursor:pointer; }
.option input::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ink); transform:scale(0); transition:transform .2s var(--ease); }
.option input:checked{ border-color:var(--ink); }
.option input:checked::after{ transform:none; }
.option.an{ background:var(--white); }
.option span{ font-size:15px; }
.option small{ font-family:var(--mono); font-size:11.5px; color:var(--dim); white-space:nowrap; }
.reihe{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (max-width:560px){ .reihe{ grid-template-columns:minmax(0,1fr); } }
.f{ display:flex; flex-direction:column; gap:6px; }
.reihe + .reihe, .reihe + .f, .f + .f, .f + .reihe{ margin-top:14px; }
.f label{ font-size:13px; color:var(--dim); }
.f input, .f textarea{ width:100%; font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--line-2); border-radius:10px; background:var(--paper); color:var(--ink); }
.f input:focus, .f textarea:focus{ border-color:var(--ink); background:var(--white); outline:none; }
.f textarea{ min-height:100px; resize:vertical; }
.zustimmung{ display:flex; gap:12px; align-items:flex-start; margin-top:18px; font-size:13.5px; color:var(--ink-2); }
.zustimmung input{ flex:none; width:16px; height:16px; margin-top:4px; accent-color:var(--ink); }
.zustimmung a{ color:var(--amber-dark); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.fmeldung{ margin-top:14px; min-height:20px; font-size:14px; }
.fmeldung.fehler{ color:var(--rot); }
.fertig{ display:none; padding:8px 0; }
.fertig.da{ display:block; }
.fertig h3{ font-size:22px; }
.fertig p{ margin-top:10px; color:var(--dim); font-size:15px; }

/* ── Diagramme: Kurve einmal gezeichnet, Ablesen über eigene Ebenen (flüssig am Handy) ── */
.kurve{ position:relative; touch-action:pan-y; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.k-flaeche{ position:absolute; inset:0; }
.k-flaeche svg{ display:block; width:100%; height:100%; overflow:visible; }
.kurve .basis{ stroke:var(--line-2); stroke-width:1; stroke-dasharray:3 5; }
.kurve .ende-text{ fill:var(--dim); font-family:var(--mono); font-size:11px; }
.kurve .marke{ font-family:var(--mono); font-size:11.5px; font-weight:500; }
.k-linie{ position:absolute; left:0; width:1px; margin-left:-.5px; background:rgba(27,27,24,.35); opacity:0; pointer-events:none; will-change:transform; transition:opacity .15s; }
.k-punkt{ position:absolute; left:0; top:0; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; box-shadow:0 0 0 3px var(--white), 0 2px 8px rgba(27,27,24,.25);
  opacity:0; pointer-events:none; will-change:transform; transition:opacity .15s; }
.kurve.zeigt .k-linie, .kurve.zeigt .k-punkt{ opacity:1; }

/* ── Fußzeile (wie mdxf.de) ── */
footer{ border-top:1px solid var(--line); padding:44px 0 calc(56px + env(safe-area-inset-bottom,0px)); color:var(--dim); font-size:14px; }
footer .oben{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px 40px; align-items:flex-start; }
footer small{ display:block; margin-top:8px; font-size:13px; }
footer .links{ display:flex; flex-wrap:wrap; gap:10px 20px; }
footer .links a{ text-decoration:none; color:var(--ink-2); }
footer .links a:hover{ text-decoration:underline; }
footer .risiko{ margin-top:30px; padding-top:22px; border-top:1px solid var(--line); font-size:12.5px; line-height:1.65; max-width:96ch; }
@media (max-width:820px){ footer .links a{ padding-block:9px; margin-block:-9px; } }

/* ── 404 ── */
.leer{ min-height:72vh; display:flex; align-items:center; padding:140px 0 80px; }

/* ── Einblenden ── */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .live::after{ animation:none; display:none; }
  .burger-box i, .mnav, .mnav-list li, .mnav .mnav-cta, .mnav-kontakt, .nav-cta, .zeitleiste::after{ transition:none !important; }
  .mnav-list li, .mnav .mnav-cta, .mnav-bereiche, .mnav-kontakt{ transform:none !important; }
  dialog.blatt[open]{ animation:none; }
}