/* Frauen investieren: Seiten Rechner, Lexikon, Über uns, Kontakt, Rechtstexte, 404.
   Tokens and helpers come from site.css; this file only adds the blocks of these pages. */

@keyframes pg-rise{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes pg-flash{0%{background-color:rgba(31,74,43,.2)}100%{background-color:rgba(31,74,43,0)}}

code{font:600 .88em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--paper-2);padding:.08em .38em;border-radius:var(--r);overflow-wrap:anywhere}

/* ---------- shared page head ---------- */
.pg-head{padding:clamp(44px,7vw,108px) 0 clamp(28px,4vw,60px);align-items:end}
.pg-head .eyebrow{grid-column:1/-1}
.pg-head h1{grid-column:1/11;margin:0 0 .2em;font-size:clamp(2.6rem,7vw,6.4rem)}
.pg-head .lead{grid-column:1/8;margin:.6rem 0 0}
.tbl-wrap{overflow-x:auto}

/* ---------- legal documents: ~68ch text column, numbered sections, ruled ---------- */
.doc-head{padding:clamp(44px,6vw,92px) 0 clamp(24px,3.4vw,48px);align-items:end}
.doc-head .eyebrow{grid-column:1/-1}
.doc-head h1{grid-column:1/10;margin:0;font-size:clamp(2.4rem,5.6vw,5rem)}
.doc-meta{grid-column:10/-1;justify-self:end;margin:0 0 .6rem;font:600 .85rem/1.2 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:right}
.doc{counter-reset:ds}
.doc-sec{counter-increment:ds;border-top:1px solid var(--rule);padding:clamp(28px,3.4vw,56px) 0;align-items:start}
.doc-sec:first-child{border-top:0}
.doc-sec::before{content:counter(ds,decimal-leading-zero);grid-column:1/4;grid-row:1;position:sticky;top:104px;font:800 clamp(2.4rem,5vw,4.4rem)/.9 var(--f-display);letter-spacing:-.04em;color:var(--accent)}
.doc-t{grid-column:4/11;grid-row:1;min-width:0}
.doc-t--wide{grid-column:4/-1}
.doc-sec{scroll-margin-top:96px}
.doc-t h2,.doc-t.prose h2{font-size:clamp(1.5rem,2.4vw,2.1rem);margin:0 0 .7em}
.doc-t h3,.doc-t.prose h3{font:700 1.08rem/1.3 var(--f-display);letter-spacing:-.005em;margin:1.7em 0 .4em}
.doc-t p,.doc-t li{max-width:68ch}
.doc-t ul,.doc-t ol{padding-left:1.2em;margin:0 0 1em}
.doc-t li{margin:.35em 0}
.doc-intro{font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:1.5;color:var(--ink-2);max-width:62ch}
.doc-form{border:1px solid var(--rule-strong);background:var(--paper-2);padding:1.1rem 1.4rem .4rem;max-width:68ch;font-size:.98rem}
.doc-form p{border-bottom:1px dotted var(--rule-strong);padding-bottom:.9rem;margin:0 0 .9rem}
.doc-form p:last-child{border-bottom:0}

/* tables of the legal pages (cookies, retention) */
.ck{font-size:.98rem;margin:1.2rem 0 0}
.ck th,.ck td{vertical-align:top;text-align:left;padding:.85rem 1.2rem .85rem 0;border-top:1px solid var(--rule)}
.ck thead th{border-top:1px solid var(--rule-strong);border-bottom:0;padding-top:.7rem}
.ck tbody tr:last-child th,.ck tbody tr:last-child td{border-bottom:1px solid var(--rule-strong)}
.ck tbody th{font:600 .98rem/1.4 var(--f-display);letter-spacing:0;text-transform:none;color:var(--ink)}
.ck td{color:var(--ink-2)}

/* ---------- 404 ---------- */
.nf{padding:clamp(36px,5vw,80px) 0 0;align-items:start}
.nf-code{grid-column:1/-1;margin:0;display:flex;font:800 clamp(9rem,30vw,27rem)/.78 var(--f-display);letter-spacing:-.02em;color:var(--ink);user-select:none}
.nf-code span{display:inline-block;animation:pg-rise .8s cubic-bezier(.2,.7,.2,1) both}
.nf-code span:nth-child(2){animation-delay:.1s}
.nf-code span:nth-child(3){animation-delay:.2s}
.nf-o{color:var(--accent)}
.nf-text{grid-column:1/9;margin-top:clamp(28px,3.4vw,52px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--rule-strong)}
.nf-text h1{font-size:clamp(2rem,4.2vw,3.6rem);margin-bottom:.4em}
.nf-search{margin:2rem 0 1.6rem;max-width:34rem}
.nf-row{display:flex;gap:0}
.nf-row input{border-right:0;border-radius:var(--r) 0 0 var(--r)}
.nf-row .btn{border-radius:0 var(--r) var(--r) 0}
.nf-links{display:flex;flex-wrap:wrap;gap:.6rem 2rem;list-style:none;margin:0;padding:0;font:600 1.05rem var(--f-display)}

/* ---------- Kontakt ---------- */
.kt-ways{list-style:none;margin:0;padding:0}
.kt-way{border-bottom:1px solid var(--rule);padding:clamp(24px,3vw,46px) 0;align-items:start}
.kt-n{grid-column:1/3;font:800 clamp(2.4rem,5vw,4.4rem)/.9 var(--f-display);letter-spacing:-.04em;color:var(--accent)}
.kt-body{grid-column:3/11;min-width:0}
.kt-body h2{font:600 .85rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:.5rem 0 1rem}
.kt-big{font:700 clamp(1.5rem,3.6vw,3.2rem)/1.1 var(--f-display);letter-spacing:-.02em;overflow-wrap:anywhere;margin:0 0 .6em}
.kt-addr{font-style:normal;font:500 1.25rem/1.5 var(--f-display);margin:0 0 .8em}
.kt-body p{max-width:56ch}
.kt-topics{padding:clamp(40px,5vw,84px) 0 clamp(24px,3vw,40px);align-items:start}
.kt-topics-h{grid-column:1/5}
.kt-topics-h h2{margin:0}
.kt-dl{grid-column:5/12;margin:0}
.kt-dl>div{display:grid;grid-template-columns:minmax(9rem,13rem) 1fr;gap:1rem 2rem;border-top:1px solid var(--rule);padding:1.2rem 0}
.kt-dl>div:last-child{border-bottom:1px solid var(--rule)}
.kt-dl dt{font:700 1.15rem/1.3 var(--f-display)}
.kt-dl dd{margin:0;max-width:56ch}
.kt-dl a{color:var(--accent-ink)}
.kt-limit{padding:clamp(24px,3vw,40px) 0 0;align-items:start}
.kt-limit-t{grid-column:1/5;font:600 .85rem/1.2 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:.3rem 0 0}
.kt-limit p:last-child{grid-column:5/12;margin:0;max-width:58ch}

/* ---------- Über uns ---------- */
.ab-head{padding:clamp(40px,6vw,96px) 0 clamp(32px,5vw,72px);align-items:end}
.ab-head-t{grid-column:1/9}
.ab-head h1{font-size:clamp(2.4rem,5.4vw,5rem);margin-bottom:.4em}
.ab-head .lead{max-width:44ch;margin:0}
.ab-hero-ph{grid-column:9/-1;margin-right:calc(-1 * (var(--gutter) + max(0px,(100vw - var(--wrap))/2)));overflow:hidden}
.ab-hero-ph img{width:100%;height:auto;aspect-ratio:5/6;object-fit:cover;animation:zoomout 1.4s ease both}
.ab-sec{padding:clamp(36px,5vw,84px) 0;align-items:start}
.ab-n{grid-column:1/5;margin:0;position:sticky;top:96px;font:800 clamp(6rem,13vw,12rem)/.8 var(--f-display);letter-spacing:-.06em;color:var(--accent)}
.ab-body{grid-column:5/12;min-width:0}
.ab-body h2{margin:0 0 .7em}
.ab-dl{margin:0 0 1.4rem}
.ab-dl>div{display:grid;grid-template-columns:minmax(9rem,13rem) 1fr;gap:.6rem 2rem;border-top:1px solid var(--rule);padding:1.1rem 0}
.ab-dl>div:last-child{border-bottom:1px solid var(--rule)}
.ab-dl dt{font:700 1.1rem/1.3 var(--f-display)}
.ab-dl dd{margin:0;max-width:52ch}
.ab-more{color:var(--ink-2)}
.ab-more a{color:var(--accent-ink)}
.ab-photo{margin:clamp(12px,3vw,48px) 0}
.ab-photo img{width:100%;height:clamp(220px,32vw,480px);object-fit:cover;object-position:center 35%}
.ab-not{list-style:none;margin:0;padding:0}
.ab-not li{border-top:1px solid var(--rule);padding:1.2rem 0;max-width:56ch}
.ab-not li:last-child{border-bottom:1px solid var(--rule)}
.ab-not strong{display:block;font:700 1.15rem/1.3 var(--f-display);margin-bottom:.2rem}
.ab-not a{color:var(--accent-ink)}
.ab-fact{font:600 clamp(1.3rem,2.3vw,2rem)/1.3 var(--f-display);letter-spacing:-.015em;max-width:30ch;margin:0 0 1.4em}
.ab-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem;margin:0}
.ab-imp{margin-left:.6rem;font:600 1rem var(--f-display)}

/* ---------- Lexikon ---------- */
.lx-az{position:sticky;top:67px;z-index:5;background:var(--paper);border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule)}
.lx-az ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.lx-az a,.lx-az span{display:grid;place-items:center;width:clamp(30px,2.9vw,44px);height:46px;font:700 1rem var(--f-display);text-decoration:none}
.lx-az a{color:var(--ink);transition:background .2s,color .2s}
.lx-az a:hover{background:var(--ink);color:var(--paper)}
.lx-az span{color:rgba(20,24,31,.32)}
.lx{margin-top:clamp(8px,2vw,24px)}
.lx-group{border-top:1px solid var(--rule-strong);padding:clamp(20px,2.4vw,36px) 0 clamp(24px,3vw,48px);align-items:start;scroll-margin-top:120px}
.lx-group:first-child{border-top:0}
.lx-letter{grid-column:1/5;position:sticky;top:130px;margin:0;font:800 clamp(5rem,12vw,11rem)/.8 var(--f-display);letter-spacing:-.05em;color:var(--ink)}
.lx-list{grid-column:5/12;min-width:0}
.lx-entry{padding:clamp(18px,2vw,28px) 0;border-top:1px solid var(--rule);scroll-margin-top:130px}
.lx-entry:first-child{border-top:0;padding-top:.6rem}
.lx-entry:target h3{background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 3px no-repeat}
.lx-entry h3{display:inline-block;font-size:clamp(1.5rem,2.4vw,2.1rem);margin:0 0 .25em}
.lx-aka{font-style:italic;color:var(--muted);margin:0 0 .8em}
.lx-entry p{max-width:60ch}
.lx-more{font:600 1rem var(--f-display);margin:.2em 0 0}
.lx-more a{color:var(--accent-ink)}
.lx-note{padding:clamp(24px,3vw,48px) 0 0;border-top:1px solid var(--rule-strong)}
.lx-note p{grid-column:5/12;margin:0;max-width:60ch}
.lx-note a{color:var(--accent-ink)}

/* ---------- Sparrechner ---------- */
.rc{padding:clamp(28px,4vw,64px) 0;align-items:start}
.rc-form{grid-column:1/6;position:sticky;top:96px}
.rc-h{font-size:1.1rem;letter-spacing:.02em;margin:0 0 1.2rem}
.rc-fields{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 1.2rem}
.rc-in{position:relative}
.rc-in input{padding-right:4.6rem;font:600 1.2rem var(--f-display);font-variant-numeric:tabular-nums lining-nums}
.rc-in span{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);font:600 .85rem var(--f-display);color:var(--muted);pointer-events:none}
.rc-hint{font-size:.92rem;color:var(--muted);margin:1.2rem 0 0;max-width:42ch}
.rc-note{font-size:.95rem;color:var(--err);margin:.8rem 0 0;font-weight:500}
.rc-note[hidden]{display:none}
.rc-submit{margin-top:1.2rem}
.js .rc-submit{display:none}
.rc-out{grid-column:7/13;min-width:0}
.rc-kicker{font:600 .82rem/1.2 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem}
.rc-hero{font:800 clamp(2.8rem,5.6vw,5.2rem)/1.05 var(--f-display);letter-spacing:-.04em;margin:0 0 .35em;overflow-wrap:anywhere}
.rc-hero.l{font-size:clamp(2.2rem,4.2vw,3.8rem)}
.rc-hero.xl{font-size:clamp(1.8rem,3.2vw,2.9rem)}
.rc-hero small{font-size:.4em;letter-spacing:-.01em;font-weight:700;color:var(--ink-2)}
.rc-hero.bump{animation:pg-flash .9s ease-out}
.rc-dl{margin:0}
.rc-dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;border-top:1px solid var(--rule);padding:.85rem 0}
.rc-dl>div:last-child{border-bottom:1px solid var(--rule)}
.rc-dl dt{font:600 .98rem/1.3 var(--f-display);color:var(--ink-2)}
.rc-dl dd{margin:0;font:700 clamp(1.1rem,1.7vw,1.4rem) var(--f-display);letter-spacing:-.01em;text-align:right;white-space:nowrap}
.rc-vor{font-size:.95rem;color:var(--muted);margin:.7rem 0 0}
.rc-warn{background:var(--paper-2);border:1px solid var(--rule);border-left:4px solid var(--ink);padding:1.1rem 1.3rem 1rem;margin:1.6rem 0 0}
.rc-warn p{font-size:.98rem;margin:0 0 .6em}
.rc-warn p:last-child{margin-bottom:0}
.rc-warn-t{font:700 1.08rem/1.3 var(--f-display)}
.rc-warn a{color:var(--accent-ink)}
.rc-fig{margin:2rem 0 0}
.rc-fig figcaption{font:600 .82rem/1.2 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.rc-svg{display:block;width:100%;height:auto;overflow:visible}
.rc-grid{stroke:var(--rule);stroke-width:1}
.rc-axis{stroke:var(--ink);stroke-width:1.5}
.rc-lab{font:500 13px var(--f-display);fill:var(--muted)}
.rc-area{fill:var(--accent);fill-opacity:.16}
.rc-line-paid{fill:none;stroke:var(--muted);stroke-width:2;stroke-dasharray:6 5}
.rc-line-val{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.rc-dot{fill:var(--accent);stroke:var(--paper);stroke-width:2}
.rc-legend{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;list-style:none;margin:.9rem 0 0;padding:0;font:600 .88rem var(--f-display);color:var(--ink-2)}
.rc-legend i{display:inline-block;vertical-align:middle;margin-right:.5rem}
.rc-legend .k-paid{width:24px;border-top:2px dashed var(--muted)}
.rc-legend .k-val{width:24px;border-top:3px solid var(--ink)}
.rc-legend .k-gain{width:16px;height:12px;background:rgba(31,74,43,.16);border:1px solid rgba(31,74,43,.4)}

.rc-sec{padding:clamp(32px,4.4vw,72px) 0;align-items:start}
.rc-sn{grid-column:1/5;margin:0;position:sticky;top:96px;font:800 clamp(5rem,10vw,9rem)/.8 var(--f-display);letter-spacing:-.06em;color:var(--accent)}
.rc-sb{grid-column:5/13;min-width:0}
.rc-sb h2{margin:0 0 .8em}
.rc-tbl{font-size:1rem}
.rc-tbl th,.rc-tbl td{padding:.6rem .8rem;text-align:right}
.rc-tbl thead th{border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);vertical-align:bottom}
.rc-tbl th:first-child,.rc-tbl td:first-child{text-align:left;padding-left:0}
.rc-tbl tbody th{font:600 1rem var(--f-display);letter-spacing:0;text-transform:none;color:var(--ink)}
.rc-tbl tbody tr:hover{background:var(--paper-2)}
.rc-tbl tbody tr:last-child{font-weight:700;border-bottom:1px solid var(--rule-strong)}
.rc-tbl tbody tr:last-child td,.rc-tbl tbody tr:last-child th{border-bottom:1px solid var(--rule-strong)}
.rc-list{list-style:none;margin:0;padding:0;counter-reset:rl}
.rc-list li{counter-increment:rl;position:relative;border-top:1px solid var(--rule);padding:1.1rem 0 1.1rem 3rem;margin:0;max-width:62ch}
.rc-list li:last-child{border-bottom:1px solid var(--rule)}
.rc-list li::before{content:counter(rl);position:absolute;left:0;top:1.05rem;font:800 1.5rem/1 var(--f-display);color:var(--accent)}
.rc-formula{font-size:1.15rem;background:var(--paper-2);border-left:4px solid var(--ink);padding:1rem 1.2rem;max-width:none;overflow-wrap:anywhere}

/* ---------- narrower screens: keep it usable, not designed for ---------- */
@media(max-width:980px){
  .pg-head h1,.pg-head .lead,.doc-head h1,.ab-head-t,.nf-text{grid-column:1/-1}
  .doc-meta{grid-column:1/-1;justify-self:start;text-align:left;margin-top:1rem}
  .doc-sec::before{grid-column:1/-1;grid-row:auto;position:static;margin-bottom:.6rem}
  .doc-t,.doc-t--wide{grid-column:1/-1;grid-row:auto}
  .kt-n{grid-column:1/-1}.kt-body{grid-column:1/-1}
  .kt-topics-h,.kt-dl,.kt-limit-t,.kt-limit p:last-child{grid-column:1/-1}
  .ab-hero-ph{grid-column:1/-1;margin:2rem calc(-1 * var(--gutter)) 0}
  .ab-n,.ab-body,.lx-letter,.lx-list,.lx-note p,.rc-sn,.rc-sb{grid-column:1/-1}
  .ab-n,.lx-letter,.rc-sn{position:static;margin-bottom:.4em}
  .rc-form,.rc-out{grid-column:1/-1}
  .rc-form{position:static;margin-bottom:2rem}
  .lx-az{top:61px}
  .kt-dl>div,.ab-dl>div{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .nf-code span,.rc-hero.bump,.ab-hero-ph img{animation:none}
  .lx-az a{transition:none}
}