/* Aktiendepot24 – gemeinsame Blöcke der LP-Seiten (Vergleichskarten, Einschätzung, Finder, Methodik, Kurz gesagt, FAQ, Links, Quellen, Inhalt, Feature-Tabelle)
   Gemeinsame Datei: Änderungen hier wirken auf allen eingebundenen Seiten. Stand 24.10.2026 */
/* Vergleichsrechner-Feinschliff 24.10.2026 */
.cmpsec .lead{max-width:760px}
/* Typ-Badges in den Kopf (spart eine Zeile pro Karte), gleiche rechteckig-runde Form wie Tabs/Chips */
.drow .dc-id .card-badges{margin-top:6px;gap:6px}
.drow .card-badges .badge{border-radius:7px;padding:3px 9px;font-size:var(--fs-sm);font-weight:500}
.drow .mrow{margin-top:14px}
.drow .plogo{border-color:var(--line);box-shadow:none}
.drow .pn{font-size:19px}
.drow .ptag{font-size:var(--fs-md);color:var(--ink)}
/* Abstände */
.drow .card-pc{margin-top:12px}
.drow .card-toggles{margin-top:10px}
/* rechte Spalte: Inhalt mittig statt oben gedrängt */
@media(min-width:861px){.drow .dc-action{align-self:start}}
/* Sticky-Leiste: weicher Schatten statt harter Kante */
@media(min-width:861px){
  .ftool.stuck{box-shadow:0 -20px 0 var(--bg),-24px 0 0 var(--bg),40px 0 0 var(--bg),-24px -20px 0 var(--bg),40px -20px 0 var(--bg)}
  .ftool.stuck::after{content:"";position:absolute;left:-24px;right:-40px;top:100%;height:22px;background:linear-gradient(var(--bg),rgba(255,255,255,0));pointer-events:none}
}
@media(max-width:640px){.drow .card-pc{display:grid;grid-template-columns:1fr;gap:6px}.drow .card-pc .card-features{gap:6px}}
.drow .ctgl-body p.small+p.small{border-top:0;margin-top:6px;padding-top:0}
/* Unsere Einschätzung: Zitat-Karte */
.article .take{position:relative;grid-template-columns:52px 1fr;gap:2px 18px;align-items:center;margin:28px 0 6px;padding:24px 28px 26px;border-radius:18px;background:var(--navy-soft);overflow:hidden}
.article .take::after{content:"\201C";position:absolute;right:26px;top:14px;font-size:96px;line-height:.8;font-weight:700;color:#fff;opacity:.9;pointer-events:none}
.article .take-h{grid-column:2;font-size:var(--fs-md);color:var(--ink);padding:0}
.article .take-h b{display:block;font-size:var(--fs-base);color:var(--head)}
.article .take p{grid-column:1/-1;margin-top:14px;font-size:var(--fs-lg);line-height:1.65;position:relative;z-index:1}
@media(max-width:560px){.article .take::after{display:none}.article .take{padding:20px}.article .take{grid-template-columns:44px 1fr}}
/* Depot-Finder: ruhigere Optionen, lesbare Texte */
#finder .fit{border:0;padding:32px 34px 26px;border-radius:20px}
#finder .fit .fs{font-size:var(--fs-md);color:var(--ink);margin:6px 0 26px;max-width:680px}
#finder .amf-q{margin-bottom:24px}
#finder .amf-qt{display:flex;align-items:center;font-size:var(--fs-base);margin-bottom:12px}
#finder .amf-qt .amf-n{width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-size:var(--fs-sm);display:inline-grid;place-items:center;margin-right:10px;flex:none}
#finder .amf-hint{margin:-6px 0 12px 36px;font-size:var(--fs-md);color:var(--ink)}
#finder .amf-opts,#finder .amf-opts.q3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#finder .amf-opts .amf-opt{min-width:0;width:100%;background:#fff;border:1.5px solid transparent;border-radius:14px;padding:14px 16px 14px 14px;box-shadow:0 1px 2px rgba(20,34,75,.05);transition:border-color .15s,box-shadow .15s}
#finder .amf-opt.kd span{font-size:var(--fs-md);font-weight:600;color:var(--head)}
#finder .amf-opt.kd small{font-size:var(--fs-md);color:var(--ink);margin-top:2px}
#finder .amf-opt::before{width:18px;height:18px;margin-top:1px}
#finder .amf-opt:hover{border-color:var(--navy-line);box-shadow:0 6px 16px rgba(20,34,75,.08)}
#finder .amf-opt[aria-pressed="true"]{border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(40,72,159,.10)}
#finder .amf-res{border-radius:16px;padding:22px 24px}
#finder .amf-disc{font-size:var(--fs-sm);color:var(--ink);margin-top:20px;padding-top:16px;border-top:1px solid var(--navy-line)}
@media(max-width:760px){#finder .amf-opts,#finder .amf-opts.q3{grid-template-columns:1fr}#finder .fit{padding:22px 18px 18px}#finder .amf-hint{margin-left:0}}
/* Wie unsere Noten entstehen: graue Info-Kachel ohne Linien, Kosten hervorgehoben */
#methodik .mweights.two{border:0;background:var(--bg-2);border-radius:18px;padding:26px 28px 22px;column-gap:44px;row-gap:18px;margin-top:22px}
#methodik .mw,#methodik .mweights.two .mw:nth-child(8){padding:0;border:0}
#methodik .mw-t{font-size:var(--fs-base);margin-bottom:8px}
#methodik .mw-t span:last-child{font-weight:700}
#methodik .mbar{height:8px;background:#fff;border-radius:99px}
#methodik .mbar i{background:var(--navy-mid)}
#methodik .mw:nth-child(-n+2) .mbar i{background:var(--navy)}
#methodik .mw:nth-child(-n+2) .mw-t span:first-child::after{content:"Kosten";margin-left:8px;font-size:var(--fs-sm);font-weight:600;color:var(--navy);background:#fff;padding:2px 7px;border-radius:6px;vertical-align:2px}
#methodik .mband{margin-top:14px;padding:24px 28px;border-radius:18px;gap:16px 32px}
#methodik .mband h3{font-size:var(--fs-lg);margin-bottom:6px}
#methodik .mband .btn{background:#fff;border-color:transparent}
#methodik .mband .btn:hover{background:var(--navy);color:#fff}
@media(max-width:760px){#methodik .mweights.two{padding:20px 18px;row-gap:16px}#methodik .mband{padding:20px}}
/* Kurz gesagt / Haken-Listen (.keybox, .kgrid4): siehe assets/ad24-common-blocks.css */
/* FAQ: leicht – feine Trennlinien, kompakte Zeilen */
/* Passende Vergleiche: gleich breite Link-Kacheln */
.relbox{padding:22px 24px;border-radius:16px}
.relbox h3{margin-bottom:12px}
.relbox .rel{display:flex;flex-wrap:wrap;gap:8px}
.relbox .rel a{display:inline-flex;align-items:center;gap:6px;margin:0;padding:8px 14px;border-radius:9px;background:#fff;border:0;font-size:var(--fs-md);font-weight:500;color:var(--head);text-decoration:none;box-shadow:0 1px 2px rgba(20,34,75,.05);transition:background .15s,color .15s}
.relbox .rel a::after{content:"→";color:var(--navy);transition:transform .15s}
.relbox .rel a:hover{background:var(--navy);color:#fff}
.relbox .rel a:hover::after{color:#fff;transform:translateX(2px)}
@media(max-width:760px){.relbox{padding:20px}}
/* Quellen */
#quellen{margin-top:34px}
#quellen .src-acc summary{display:inline-flex;align-items:center;gap:8px;padding:6px 0;background:none;border:0;border-radius:6px;font-size:var(--fs-md);font-weight:600;color:var(--navy);cursor:pointer;outline:none!important;box-shadow:none!important}
#quellen .src-acc summary:hover{text-decoration:underline;text-underline-offset:3px}
body.kbd #quellen .src-acc summary:focus-visible{outline:2px solid var(--navy)!important;outline-offset:3px}
#quellen .src-acc ul{margin-top:16px;display:grid;gap:10px}
#quellen .src-acc li{font-size:var(--fs-md);line-height:1.55;color:var(--ink)}
#quellen .src-acc li svg{color:var(--green-deep)}
#quellen .src-acc li a{font-weight:600}
#quellen .src-note{font-size:var(--fs-md);line-height:1.6;color:var(--ink);margin-top:20px;padding-top:16px}
/* Abstand zwischen Inhalt/Sidebar und Footer */
.shell{padding-bottom:72px}
@media(max-width:760px){.shell{padding-bottom:48px}}
/* Inhaltsverzeichnis 1 px größer */
.railcol .toc-l{font-size:var(--fs-md);line-height:1.3;padding-right:2px;gap:8px}
/* Feature-Matrix: ruhige Tabelle in Karte (wie „Alle Depots auf einen Blick") */
@media(min-width:761px){
.tscroll:has(>.ztab){margin-top:20px;background:#fff;border-radius:18px;box-shadow:0 1px 2px rgba(20,34,75,.04),0 6px 20px rgba(20,34,75,.06);overflow-x:auto}
.tscroll>.ztab{margin:0;border-top:0;width:100%}
.ztab thead th{background:var(--bg-3);font-size:var(--fs-sm);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);padding:14px 12px;border-bottom:0;vertical-align:bottom}
.ztab thead th:first-child{padding-left:20px}
.ztab tbody th,.ztab td{padding:13px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.ztab tbody th{padding-left:20px}
.ztab tbody tr:last-child>*{border-bottom:0}
.ztab tbody tr:hover{background:var(--bg-2)}
.ztab td small{display:block;font-size:var(--fs-sm);color:var(--muted);line-height:1.3;margin-top:1px}
}
/* Weiche / Typen-Liste (.mlist): getönte Karten mit Nummer statt Linien */
.article .mlist{border-top:0;display:grid;gap:12px;margin:22px 0 10px;counter-reset:ml}
.article .mlist>div{position:relative;background:var(--bg-2);border:0;border-radius:16px;padding:20px 24px 20px 72px;counter-increment:ml}
.article .mlist>div::before{content:counter(ml);position:absolute;left:24px;top:19px;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--navy);font-size:var(--fs-md);font-weight:700;display:grid;place-items:center}
.article .mlist h3{font-size:var(--fs-lg);font-weight:600;line-height:1.35;margin:4px 0 6px}
.article .mlist p{font-size:var(--fs-base);line-height:1.6}
.article .mlist p.lever{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:var(--fs-md)}
.article .mlist p.lever a{font-weight:600;color:var(--navy);text-decoration:none;border-bottom:1.5px solid var(--navy-line)}
.article .mlist p.lever a:hover{border-bottom-color:var(--navy)}
@media(max-width:640px){.article .mlist>div{padding:18px 18px 18px 60px}.article .mlist>div::before{left:16px;top:17px;width:30px;height:30px}}
.article .mlist.aa-typen>div{padding-left:24px}
.article .mlist.aa-typen>div::before{display:none}
/* Hinweise unter der Vergleichsliste: klein und ruhig statt Fließtextgröße */
.cmpsec .cmp-main>p.small,.cmpsec .cmp-main>p.disc{font-size:var(--fs-md);line-height:1.6;color:var(--muted);max-width:900px;margin-top:14px}
.cmpsec .cmp-main>p.small+p.small,.cmpsec .cmp-main>p.small+p.disc{margin-top:8px}
.cmpsec .cmp-main>p.small a,.cmpsec .cmp-main>p.disc a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:2px}
.cmpsec .cmp-main>p.small b{color:var(--ink);font-weight:600}
.cmpsec .cmp-more{margin-top:6px}
/* Interaktive Rechner (.calc): flaches Navy-soft-Panel ohne Rahmen, weiße Kacheln, Regler mit Füllung */
.article .calc{border:0;border-radius:20px;padding:28px 30px 24px}
.article .calc .cs{border-radius:14px;padding:16px 18px 18px}
.article .calc .cs label{font-size:var(--fs-md);font-weight:500;color:var(--ink)}
.article .calc .cs label output{font-weight:700;color:var(--head)}
.article .calc .cs .hint{font-size:var(--fs-md);color:var(--muted)}
.article .calc input[type=range]{-webkit-appearance:none;appearance:none;height:8px;border-radius:99px;background:linear-gradient(var(--navy),var(--navy)) 0/var(--p,50%) 100% no-repeat,var(--bg-3);outline:none;cursor:pointer}
.article .calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--navy);box-shadow:0 2px 6px rgba(20,34,75,.2)}
.article .calc input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--navy)}
.article .calc input[type=range]:focus-visible{outline:2px solid var(--navy);outline-offset:6px}
.article .calc .csum>div{background:#fff}
.article .calc .cres .ctable th{font-size:var(--fs-sm);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.article .calc .cres .ctable tbody tr:hover{background:var(--bg-2)}
@media(max-width:640px){.article .calc{padding:20px 16px}}
/* Weiche vor dem Vergleich (.presec): volle Breite, Karten nebeneinander */
.presec .article{max-width:none}
.presec .article>p{max-width:820px}
@media(min-width:900px){
  .presec .mlist{grid-template-columns:repeat(3,minmax(0,1fr))}
  .presec .mlist:has(>div:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .presec .mlist>div{display:flex;flex-direction:column;padding:22px 24px}
  .presec .mlist>div::before{position:static;margin:0 0 12px}
  .presec .mlist p.lever{margin-top:auto;padding-top:12px}
  .presec .mlist>div>p:not(.lever){margin-bottom:12px}
}
/* Finder: bei genau 4 Antworten 2×2 statt 3+1 */
@media(min-width:761px){#finder .amf-opts:has(>.amf-opt:nth-child(4):last-child),#finder .amf-opts:has(>.amf-opt:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Methodik mit nur einem Kosten-Kriterium (Klasse k1) */
#methodik .mweights.k1 .mw:nth-child(2) .mbar i{background:var(--navy-mid)}
#methodik .mweights.k1 .mw:nth-child(2) .mw-t span:first-child::after{content:none}
/* Varianten-Karten (.vsg): Zielgruppe als Plakette, kompaktere Liste */
.article .vsg h3{font-size:18px;font-weight:600;margin:0 0 8px}
.article .vsg .vfor{margin:-4px 0 14px;color:var(--navy);font-size:var(--fs-md);font-weight:500;line-height:1.4}
.article .vsg li{padding:4px 0;font-size:var(--fs-md)}
.article .vsg li .mk{background:#fff}
.article .vsg .vex{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
/* Fußzeile (.vex) unten bündig, damit Trennlinien nebeneinanderliegender Karten auf einer Höhe liegen (25.10.2026) */
.article .vsg>div{display:flex;flex-direction:column}
.article .vsg>div>.vfor{align-self:flex-start}
.article .vsg>div>ul{margin-bottom:14px}
.article .vsg>div>ul:last-child{margin-bottom:0}
.article .vsg>div>.vex{margin-top:auto}
.article .vsg .vex a{color:var(--navy);text-decoration:none;border-bottom:1.5px solid var(--navy-line)}
.article .vsg .vex a:hover{border-bottom-color:var(--navy)}
/* drei Karten untereinander (.v3): Kopf oben, Liste volle Breite — keine leere Spalte links (25.10.2026) */
.article .vsg.v3>div>h3{margin-bottom:6px}
.article .vsg.v3>div>ul{margin-top:0}
/* Warn-Panel (rot getönt): Punkte als kleines rotes × im weißen Kreis wie Pro/Contra */
.article .kk-warn{padding:24px 26px 22px;border-radius:16px}
.article .kk-warn h3{font-size:var(--fs-lg);margin:0 0 14px}
.article .kk-warn .flist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.article .kk-warn .flist li{position:relative;margin:0;padding:0 0 0 36px;font-size:var(--fs-base);line-height:1.6}
.article .kk-warn .flist li::before{content:"";position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3261E' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/11px no-repeat;color:transparent}
@media(max-width:640px){.article .kk-warn{padding:20px 18px}}
/* „Was sich zuletzt geändert hat" (.news): Datum als Plakette, ruhigere Linien */
.article .news{border-radius:16px;padding:22px 24px 10px}
.article .news h3{margin:0 0 8px}
.article .news li{grid-template-columns:76px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.article .news .nd{justify-self:start;align-self:start;background:#fff;font-size:var(--fs-md);padding:3px 9px;border-radius:7px}
@media(max-width:640px){.article .news li{grid-template-columns:1fr;gap:6px}}
/* Hinweise direkt in Vergleichskarten (außerhalb der Aufklapp-Panels): klein und gedämpft statt Fließtextgröße (25.10.2026) */
.drow .dc-main>p.small,.drow .card-toggles>p.small{flex-basis:100%;width:100%;font-size:var(--fs-sm);line-height:1.55;color:var(--muted);font-weight:400;margin:10px 0 0}
.drow .dc-main>p.small b,.drow .card-toggles>p.small b{color:var(--ink);font-weight:600}
.drow .dc-main>p.small a,.drow .card-toggles>p.small a{color:var(--navy);font-weight:500;text-decoration:underline;text-decoration-color:var(--navy-line);text-underline-offset:2px}
.drow .card-toggles:has(>p.small){flex-wrap:wrap}
.drow .card-toggles>p.small+p.small{margin-top:4px}
.drow .dc-main>p.small[data-consors-uptrade]{background:var(--bg-2);border-radius:10px;padding:10px 14px;margin-top:12px}
/* Zins-Tabelle: Zinssatz-Spalte zentriert, ohne Umbruch (25.10.2026) */
@media(min-width:761px){.ztab.zins3 thead th:nth-child(2),.ztab.zins3 td:nth-child(2){text-align:center;white-space:nowrap;width:150px}}
/* Tabellen in der Karte (.tscroll) passen in die Inhaltsspalte: Zellen dürfen umbrechen, Anbietername bleibt einzeilig (25.10.2026) */
@media(min-width:761px){:where(.tscroll>.ztab) td,:where(.tscroll>.ztab td) *{white-space:normal}:where(.tscroll>.ztab) thead th{white-space:normal}}
@media(min-width:761px){:where(.tscroll>.ztab) tbody th{white-space:normal}}
/* breite Tabellen kompakter, damit sie ohne Querscrollen in die Karte passen (25.10.2026) */
@media(min-width:761px){
 .tscroll>.ztab.plat8 thead th,.tscroll>.ztab.plat8 td{padding-left:7px;padding-right:7px}
 .tscroll>.ztab.open5 td:nth-child(2){min-width:140px}
 .tscroll>.ztab.open5 td:nth-child(3),.tscroll>.ztab.open5 td:nth-child(4){min-width:96px}
 .tscroll>.ztab.open5 td,.tscroll>.ztab.open5 thead th{padding-left:9px;padding-right:9px}
 .tscroll>table[class="ctable ztab"] td,.tscroll>table[class="ctable ztab"] thead th{padding-left:9px;padding-right:9px;font-size:var(--fs-md)}
 .tscroll>table[class="ctable ztab"] thead th{font-size:var(--fs-sm)}
 .tscroll>table[class="ctable ztab"] tbody th,.tscroll>.ztab.open5 tbody th,.tscroll>.ztab.plat8 tbody th{white-space:normal;padding-right:8px}
}
@media(min-width:761px){:where(.tscroll>.ztab) td{hyphens:auto;-webkit-hyphens:auto}}
@media(min-width:761px){.tscroll>.ztab thead th:first-child{padding-left:20px}}
@media(min-width:761px){.tscroll>.ztab tr.hl th{padding-left:20px;border-radius:0}.tscroll>.ztab tr.hl td:last-child{border-radius:0}}
/* „Die häufigsten Fehler" (.flist.fehler): getönte Karten untereinander, rotes × im weißen Kreis, Fehler als eigene Zeile (25.10.2026) */
.article .flist.fehler{display:grid;gap:10px;margin:16px 0 10px}
.article .flist.fehler li{margin:0;background:var(--bg-2);border-radius:14px;padding:16px 22px 17px 62px;font-size:var(--fs-base);line-height:1.6;color:var(--ink)}
.article .flist.fehler li::before{left:20px;top:16px;width:26px;height:26px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3261E' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/11px no-repeat}
.article .flist.fehler li b{display:block;font-size:var(--fs-base);font-weight:600;color:var(--head);line-height:1.4;margin:2px 0 4px}
@media(max-width:640px){.article .flist.fehler li{padding:14px 16px 15px 52px}.article .flist.fehler li::before{left:14px;top:14px;width:24px;height:24px}}
/* Quellen je Anbieter unter Tabellen: aufklappbar statt Textwand (25.10.2026) */
.srcbox .src-i{border-top:1px solid var(--line);padding-top:12px}
.srcbox .src-i>b{display:block;font-size:var(--fs-md);font-weight:600;color:var(--head);margin-bottom:3px}
.srcbox .src-i p b{color:var(--ink);font-weight:600}
/* „Was sich zuletzt geändert hat" heller: fast weißer Grund, Datum als Navy-soft-Chip (25.10.2026) */
.article .news li{border-top-color:var(--line)}
.article .news .nd{background:var(--navy-soft)}
/* Weiche-Karten: Fußzeile (p.lever) über alle Karten einer Reihe auf gleicher Höhe; Titel+Text fließen normal (Subgrid), 25.10.2026 */
@media(min-width:900px){@supports(grid-template-rows:subgrid){
  .presec .mlist:has(>div>.ml-b){grid-auto-rows:auto;row-gap:12px}
  .presec .mlist:has(>div>.ml-b)>div{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
  .presec .mlist>div>.ml-b>p{margin-bottom:12px}
  .presec .mlist:has(>div>.ml-b) p.lever{margin-top:0;align-self:start}
}}
.presec .article>p{max-width:940px;text-wrap:pretty}
/* Alle LP-Rechner (25.10.2026): Regler ohne eigene Kacheln direkt auf dem Navy-soft-Panel, weiße Reglerspur,
   Kopf der Ergebnisspalte rechtsbündig über den Beträgen — wie Robo- und Broker-Rechner */
.article .calc .cs{background:transparent;padding:0;border-radius:0;box-shadow:none}
.article .calc input[type=range]{background:linear-gradient(var(--navy),var(--navy)) 0/var(--p,50%) 100% no-repeat,#fff}
.article .calc .cres .ctable thead th:last-child{text-align:right}
@media(max-width:640px){.article .calc .csum>div{min-width:0}.article .calc .csum .k{min-width:0;flex:1 1 auto}}
/* Quellen-Aufklapper im Rechner: schlichter Textlink statt grauer Box; aufgeklappt in weißer Karte (25.10.2026) */
.calc .srcbox[open] .src-l{background:#fff;border-radius:14px;padding:4px 18px 16px;margin-top:8px}
/* Interaktive Checkliste (.chk) wie die Rechner: Navy-soft-Panel, fetter Titel, Fortschritt direkt unter der Liste (25.10.2026) */
.article .chk:has(>.chk-list){background:var(--navy-soft);border:0;border-radius:20px;padding:26px 30px 22px}
.article .chk .tool-head .fs{font-size:18px;font-weight:600;color:var(--head)}
.article .chk .chk-list li{border-top-color:var(--navy-soft-2)}
.article .chk .chk-prog{border-top-color:var(--navy-soft-2)}
.article .chk .chk-bar{background:#fff}
.article .chk+p.small{margin-top:10px}
@media(max-width:640px){.article .chk:has(>.chk-list){padding:20px 16px 18px}}
.presec .mlist p.lever b{color:var(--head);font-weight:600}
/* Vergleichskopf: Lead zuerst, Noten-Hinweis klein darunter, gleiche Breite (25.10.2026) */
.cmpsec>.wrap>p.lead{max-width:900px;margin-bottom:6px}
.cmpsec>.wrap>p.small[data-rating-context]{max-width:900px;font-size:var(--fs-md);color:var(--muted);margin:0 0 22px}
.cmpsec>.wrap>p.small[data-rating-context] a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--navy-line);text-underline-offset:2px}
/* Forex-/CFD-Kostenmodell (.fx-model) im Look der übrigen Rechner (25.10.2026): kein Rahmen, Titel wie Rechner-Kopf,
   Regler mit Füllung, Ergebnis in weißer Karte, „Formel und Annahmen" als Textlink */
.article .fx-model{background:var(--navy-soft);border:0;border-radius:20px;padding:28px 30px 24px}
.article .fx-model .cm-title{font-size:18px;font-weight:600;color:var(--head)}
.article .fx-model .cm-help{font-size:var(--fs-md);color:var(--muted)}
.article .fx-model .cm-grid{gap:24px 40px}
.article .fx-model label{font-size:var(--fs-md);font-weight:500;color:var(--ink);margin-bottom:12px}
.article .fx-model output{font-size:18px;font-weight:700;color:var(--head)}
.article .fx-model .cm-hint{font-size:var(--fs-md);color:var(--muted);margin-top:10px}
.article .fx-model .cm-divider{font-size:var(--fs-md);color:var(--head);border-top-color:var(--line-2);margin-top:24px}
.article .fx-model input[type=range]{-webkit-appearance:none;appearance:none;height:8px;border-radius:99px;background:linear-gradient(var(--navy),var(--navy)) 0/var(--p,50%) 100% no-repeat,#fff;outline:none}
.article .fx-model input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--navy);box-shadow:0 2px 6px rgba(20,34,75,.2)}
.article .fx-model input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--navy)}
.article .fx-model input[type=range]:focus-visible{outline:2px solid var(--navy);outline-offset:6px}
.article .fx-model .cm-results{background:#fff;border-radius:0 0 14px 14px;padding:0 20px 8px;margin:0}
.article .fx-model .cm-results>div{font-size:var(--fs-md);border-bottom-color:var(--line-soft);padding:11px 0}
.article .fx-model .cm-results>div:last-child{border-bottom:0}
.article .fx-model #calcDiff{font-size:var(--fs-md);margin:14px 0 6px}
.article .fx-model .cm-note>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-md);font-weight:600;color:var(--navy);padding:6px 0}
.article .fx-model .cm-note>summary::-webkit-details-marker{display:none}
.article .fx-model .cm-note>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-4px 0 0 2px}
.article .fx-model .cm-note[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
.article .fx-model .cm-note p{font-size:var(--fs-md);line-height:1.6;color:var(--muted);background:#fff;border-radius:12px;padding:12px 16px;margin:8px 0 0}
@media(max-width:640px){.article .fx-model{padding:20px 16px}.article .fx-model .cm-grid{gap:20px}}
/* Vergleichskarten: Vorteile immer untereinander, Notenbasis leise (25.10.2026) */
.drow .card-features{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.drow p.small[data-rating-origin]{color:var(--muted)}
.cmpsec .cmp-main p.small[data-cfd-fx-sort-note],.cmpsec .cmp-main p.disc{font-size:var(--fs-md)!important;line-height:1.6;color:var(--muted)}
/* Methodik-Protokoll (CFD/Forex): nummerierte Karten im Raster, Hinweis als Navy-soft-Box (25.10.2026) */
[data-cfd-fx-protocol] .mlist.protocol{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-cfd-fx-protocol] .mlist.protocol>div:last-child:nth-child(odd){grid-column:1/-1}
[data-cfd-fx-protocol] .mlist.protocol h3{font-size:var(--fs-lg);margin:4px 0 4px}
[data-cfd-fx-protocol] .mlist.protocol p{font-size:var(--fs-md);line-height:1.55;margin:0}
[data-cfd-fx-protocol] .protocol-note{border-radius:16px;padding:20px 24px}
[data-cfd-fx-protocol] .protocol-note h3{font-size:var(--fs-lg);margin:0 0 6px}
[data-cfd-fx-protocol] .protocol-note p{font-size:var(--fs-md);line-height:1.6;margin:0}
@media(max-width:760px){[data-cfd-fx-protocol] .mlist.protocol{grid-template-columns:1fr}}
[data-cfd-fx-protocol] .protocol-note h3{text-transform:none;letter-spacing:0;color:var(--head);font-weight:600}
.drow .ctgl-body p.small.src{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
/* Depotübertrag-Rechner: siehe ad24-rechner.css. */
/* Depotwechsel-Checkliste: Titel je Punkt als eigene Zeile, Beschreibung darunter (25.10.2026) */
#checkliste .chk-t b{display:block;color:var(--head);font-weight:600;margin-bottom:2px}
#checkliste .chk-t{font-size:var(--fs-md);line-height:1.55;color:var(--ink)}
/* Schritte in getönter Box (.keybox): Nummernkreise weiß statt unsichtbar navy-soft auf navy-soft; Box-Titel als normale Überschrift (25.10.2026) */
.article .keybox.esc>h3{font-size:18px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--head);margin-bottom:18px}
/* Stolperfallen (.prob2): Karten im 2er-Raster, Nummer im weißen Kreis, Lösung mit grünem Haken statt grüner Box (25.10.2026) */
.article .prob2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 8px}
.article .prob2>div{position:relative;background:var(--bg-2);border-radius:16px;padding:20px 22px 20px 66px;display:flex;flex-direction:column}
.article .prob2 .pb-n{position:absolute;left:20px;top:19px;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--navy);font-size:var(--fs-md);font-weight:700;display:grid;place-items:center}
.article .prob2 h3{font-size:var(--fs-lg);line-height:1.4;margin:3px 0 6px;color:var(--head)}
.article .prob2 p{margin:0;font-size:var(--fs-md);line-height:1.6;color:var(--ink)}
.article .prob2 p b{color:var(--head);font-weight:600}
.article .prob2 p:not(.pb-fix){margin-bottom:12px}
.article .prob2 p.pb-fix{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.article .prob2 p.pb-fix b{color:var(--green-deep)}
@media(max-width:760px){.article .prob2{grid-template-columns:1fr}.article .prob2>div{padding:18px 16px 18px 56px}.article .prob2 .pb-n{left:14px;top:17px}}
/* Forex-/CFD-Kostenmodell (.cfd-model) im Look der übrigen Rechner (25.10.2026): kein Rahmen, Titel wie Rechner-Kopf,
   Regler mit Füllung, Ergebnis in weißer Karte, „Formel und Annahmen" als Textlink */
.article .cfd-model{background:var(--navy-soft);border:0;border-radius:20px;padding:28px 30px 24px}
.article .cfd-model .cm-title{font-size:18px;font-weight:600;color:var(--head)}
.article .cfd-model .cm-help{font-size:var(--fs-md);color:var(--muted)}
.article .cfd-model .cm-grid{gap:24px 40px}
.article .cfd-model label{font-size:var(--fs-md);font-weight:500;color:var(--ink);margin-bottom:12px}
.article .cfd-model output{font-size:18px;font-weight:700;color:var(--head)}
.article .cfd-model .cm-hint{font-size:var(--fs-md);color:var(--muted);margin-top:10px}
.article .cfd-model .cm-divider{font-size:var(--fs-md);color:var(--head);border-top-color:var(--line-2);margin-top:24px}
.article .cfd-model input[type=range]{-webkit-appearance:none;appearance:none;height:8px;border-radius:99px;background:linear-gradient(var(--navy),var(--navy)) 0/var(--p,50%) 100% no-repeat,#fff;outline:none}
.article .cfd-model input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--navy);box-shadow:0 2px 6px rgba(20,34,75,.2)}
.article .cfd-model input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--navy)}
.article .cfd-model input[type=range]:focus-visible{outline:2px solid var(--navy);outline-offset:6px}
.article .cfd-model .cm-results{background:#fff;border-radius:0 0 14px 14px;padding:0 20px 8px;margin:0}
.article .cfd-model .cm-results>div{font-size:var(--fs-md);border-bottom-color:var(--line-soft);padding:11px 0}
.article .cfd-model .cm-results>div:last-child{border-bottom:0}
.article .cfd-model #calcDiff{font-size:var(--fs-md);margin:14px 0 6px}
.article .cfd-model .cm-note>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-md);font-weight:600;color:var(--navy);padding:6px 0}
.article .cfd-model .cm-note>summary::-webkit-details-marker{display:none}
.article .cfd-model .cm-note>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-4px 0 0 2px}
.article .cfd-model .cm-note[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
.article .cfd-model .cm-note p{font-size:var(--fs-md);line-height:1.6;color:var(--muted);background:#fff;border-radius:12px;padding:12px 16px;margin:8px 0 0}
@media(max-width:640px){.article .cfd-model{padding:20px 16px}.article .cfd-model .cm-grid{gap:20px}}
.article #fxCalc.fx-model,.article #cfdCalc.cfd-model{border:0;border-radius:20px;padding:28px 30px 24px}
@media(max-width:640px){.article #fxCalc.fx-model,.article #cfdCalc.cfd-model{padding:20px 16px}}
.calc .srcbox .src-i:only-child{border-top:0;padding-top:4px}
/* 25.10.2026: Rechner-Segment-Label (Wertpapierkredite) wie Slider-Labels */
/* 25.10.2026: „Was sich zuletzt geändert hat" (.news) im Design des ETF-Sparplan-Rechners (.chg):
   ruhige Fläche, Datum als navy Text ohne Plakette, schmale Datumsspalte */
.article .news{background:var(--bg-2);border-radius:var(--r-lg,20px);padding:18px 22px 10px;margin:10px 0 8px}
.article .news h3{font-size:var(--fs-lg);line-height:1.4;margin:0 0 6px;color:var(--head)}
.article .news li{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;padding:10px 0;margin:0;border-top:1px solid var(--line);font-size:var(--fs-md);line-height:1.6;color:var(--ink)}
.article .news li::before{display:none}
.article .news li:first-child{border-top:0}
.article .news .nd{background:none;padding:0;border-radius:0;font-size:inherit;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.article .news li b{color:var(--head);font-weight:600}
@media(max-width:560px){.article .news{padding:16px 16px 8px}.article .news li{grid-template-columns:1fr;gap:2px}}
/* Datumsspalte über alle Zeilen gleich breit, auch bei Einträgen wie „04/2026" oder „BIZ-Daten" */
@media(min-width:561px){@supports(grid-template-columns:subgrid){
  .article .news ul{display:grid;grid-template-columns:minmax(58px,max-content) minmax(0,1fr);column-gap:12px}
  .article .news li{grid-column:1/-1;grid-template-columns:subgrid}
}}
/* 25.10.2026: ETF-Sparplan-Rechner (.calc.esr) an die übrigen Rechner angleichen */
.calc.esr input[type=range]{-webkit-appearance:none;appearance:none;height:8px;border-radius:99px;background:linear-gradient(var(--navy),var(--navy)) 0/var(--p,50%) 100% no-repeat,var(--bg-3);outline:none;cursor:pointer;margin:6px 0 2px}
.calc.esr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--navy);box-shadow:0 2px 6px rgba(20,34,75,.2)}
.calc.esr input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--navy)}
.calc.esr input[type=range]:focus-visible{outline:2px solid var(--navy);outline-offset:6px}
.esr-foot{grid-column:1/-1;padding:2px 4px 0}
/* 25.10.2026: ETF-Sparplan-Rechner, Abschnitt „Welche Rendite ist realistisch?“
   Szenario-Kacheln (interaktiv: navy-soft, ohne Rahmen) + Index-Karten */
.rscen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 8px}
.rscen button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:2px;background:var(--navy-soft);border-radius:16px;padding:16px 18px;transition:background .15s,box-shadow .15s}
.rscen button:hover{background:var(--navy-soft-2)}
.rscen button[aria-pressed=true]{background:#fff;box-shadow:0 0 0 2px var(--navy)}
.rscen button:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.rscen .rs-k{font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.rscen .rs-p{font-size:var(--fs-md);font-weight:600;color:var(--head)}
.rscen .rs-v{font-size:24px;font-weight:700;color:var(--head);font-variant-numeric:tabular-nums;margin-top:6px;line-height:1.2}
.rscen .rs-a{font-size:var(--fs-md);font-weight:600;color:var(--navy);margin-top:8px}
.rscen button[aria-pressed=true] .rs-a{color:var(--muted)}
.article p.rs-note{font-size:var(--fs-md);line-height:1.55;color:var(--muted);margin:0 0 26px}
.article .idx-h{font-size:18px;font-weight:600;color:var(--head);margin:8px 0 12px}
.idx3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 18px}
.idx3>div{background:var(--bg-2);border-radius:16px;padding:18px 18px 16px;display:flex;flex-direction:column}
.article .idx3 h4{font-size:var(--fs-lg);font-weight:600;color:var(--head);margin:0 0 10px}
.idx3 dl{margin:0 0 12px;display:grid;gap:0}
.idx3 dl>div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.idx3 dl>div:first-child{border-top:0;padding-top:0}
.idx3 dt{font-size:var(--fs-md);color:var(--muted);margin:0}
.idx3 dd{font-size:var(--fs-md);font-weight:600;color:var(--head);margin:0;text-align:right}
.article .idx3 p{font-size:var(--fs-md);line-height:1.6;color:var(--ink);margin:0 0 12px}
.idx3 a{margin-top:auto;font-size:var(--fs-md);font-weight:600}
@media(max-width:760px){.rscen,.idx3{grid-template-columns:1fr}.rscen button{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:10px}.rscen .rs-v{margin-top:0;font-size:20px;margin-left:auto}.rscen .rs-a{flex-basis:100%;margin-top:4px}}
@media(min-width:761px){.idx3 dl>div{display:block;padding:8px 0}.idx3 dd{text-align:left;margin-top:1px}}
/* Rechner-Aufschlüsselung (.cr): Wertspalte fest, damit alle Balken gleich lang sind */
.calc.esr .cr{grid-template-columns:minmax(0,1.35fr) minmax(50px,1fr) 100px}
/* Sticky-Ergebnisspalte darf den Hinweis unter dem Rechner nicht überdecken: Spalten in eigenem Container */
.calc.esr .esr-main{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:16px;align-items:start;min-width:0}
@media(max-width:900px){.calc.esr .esr-main{grid-template-columns:1fr}}
/* 25.10.2026: Nummerierte Schritte (.steps) sind nach assets/ad24-common-blocks.css umgezogen (gemeinsam für LP, Review, Ratgeber). */
/* 25.10.2026: Formel-Boxen (.formel) und Excel-Formeln (.xlbox) liegen in assets/ad24-common-blocks.css */

/* 29.10.2026 – Tabellen-Regel (alle Vergleichstabellen .tscroll>.ztab):
   1) keine Silbentrennung in Kopf und Zellen; 2) Kopf kurz (1–2 Wörter, max. 2 Zeilen), Zusatz als <small> in eigener Zeile;
   3) Kopf richtet sich wie die Spalte aus (Zahlen/Haken mittig = .c-num); 4) Zellen: Hauptwert + <small> statt langer Sätze. */
.tscroll>.ztab th,.tscroll>.ztab td{-webkit-hyphens:manual!important;hyphens:manual!important;overflow-wrap:break-word}
.tscroll>.ztab thead th small{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--muted);margin-top:1px}
@media(min-width:761px){.tscroll>.ztab thead th.c-num{text-align:center}}
/* 29.10.2026: Tabellenkopf vertikal mittig (nicht unten), Zellen ebenfalls mittig */
.tscroll>.ztab thead th{vertical-align:middle}
.tscroll>.ztab tbody th,.tscroll>.ztab td{vertical-align:middle}