*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#d9d7d7;color:#ffebdb;font-family:Arimo;font-size:var(--vasc-text-body,var(--vasc-font-14));line-height:1.65}main{max-width:none;margin:auto;padding:24px}h1,h2,h3,p{margin:0 0 18px}h1{font-size:clamp(32px,4.5vw,58px);line-height:1.12;letter-spacing:-1.5px;max-width:800px}h2{font-size:var(--vasc-text-section,var(--vasc-font-20));line-height:1.25}h3{font-size:var(--vasc-font-20);line-height:1.4}p{max-width:76ch}a{color:inherit}nav{display:flex;gap:28px;color:#40516a;margin:22px 3px;font-size:var(--vasc-font-14)}nav a{text-decoration:none;font-weight:700}nav a:hover{text-decoration:underline}.card{position:relative;background:radial-gradient(ellipse at 0 0,rgba(238,123,44,.18),transparent 430px),linear-gradient(120deg,#082135,#051625);padding:38px;border-radius:22px;margin-bottom:24px;border:1px solid #304253;box-shadow:0 12px 24px #071a2d24,0 2px 3px #071a2d30;overflow:hidden;scroll-margin-top:20px}.eyebrow{display:block;color:#ff9a3d;letter-spacing:1.7px;font-size:var(--vasc-font-12);font-weight:700;margin-bottom:12px}.lead{font-size:var(--vasc-text-body,var(--vasc-font-14));color:#c1cedd;max-width:700px;margin:24px 0 38px}.two{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:start}.step{display:inline-grid;place-items:center;border:1px solid #855f3e;border-radius:50%;width:36px;height:36px;color:#ff9a3d;font-size:var(--vasc-font-12);margin-bottom:15px;flex-shrink:0}.example,.inset{padding:25px;background:#ffffff04;border:1px solid #ffffff16;border-radius:16px}.example svg{width:100%;height:auto;margin:15px 0}.example-months{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;font-size:var(--vasc-font-12);text-align:center;margin-bottom:20px}.example-months strong,.example-months small{display:block}.example-months strong{font-size:clamp(13px,1.6vw,19px);color:#ff9a3d}.example p{font-size:var(--vasc-font-12)}.divider{height:1px;background:#ffffff19;margin:35px 0}.rule{display:flex;gap:16px;align-items:start}.rule>span{font-size:var(--vasc-font-22);color:#ff9a3d}.rule p{font-size:var(--vasc-font-14)}.muted{font-size:var(--vasc-font-12);color:#a1b1c3;margin-top:14px}.assessment{display:flex;gap:18px;border-top:1px solid #ffffff19;padding-top:30px;margin-top:30px}.assessment h2{font-size:var(--vasc-text-section,var(--vasc-font-20))}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:48px;padding:13px 22px;border-radius:10px;font:700 var(--vasc-font-14) Arimo;cursor:pointer;text-decoration:none;white-space:normal;text-align:center}.primary{border:1px solid #ffb06b;color:#17202c;background:linear-gradient(110deg,#ff9a3d,#ff7400);box-shadow:0 4px 14px #ff85251c}.primary:hover{filter:brightness(1.08)}.secondary{border:1px solid #8296ac;color:#e3ebf4;background:#ffffff05}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #8dd6ff;outline-offset:4px}.preview-note{color:#425269;font-size:var(--vasc-font-12);display:flex;gap:15px;flex-wrap:wrap}.preview-note span{font-weight:700}.data-note{border-left:3px solid #ffac69;padding:8px 14px;background:#ff9f4410;color:#d9c7b2;font-size:var(--vasc-font-12);margin-bottom:20px}.asset-head,.asset-row{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:18px;align-items:center;padding:18px 12px;border-bottom:1px solid #ffffff16}.asset-head{font-size:var(--vasc-font-12);color:#a9b9cc}.asset-title{display:flex;gap:12px;align-items:center}.coin{display:grid;place-items:center;width:36px;height:36px;border:1px solid #7588a54d;border-radius:50%;background:#132e47;font-size:var(--vasc-font-20);flex-shrink:0}.asset-title strong,.asset-title small,.quote strong,.quote small{display:block}.asset-title small{color:#97aac0;font-size:var(--vasc-font-12)}.quote strong{font-size:var(--vasc-text-number,var(--vasc-font-16));font-variant-numeric:tabular-nums}.quote small{font-size:var(--vasc-font-12)}.positive{color:#31f08a}.negative{color:#ff5c6c}.money{position:relative;display:block}.money input{width:100%;padding-right:35px}.money>span{position:absolute;right:13px;top:9px;color:#abbcd0}.money input[aria-invalid=true]{border-color:#ff5c6c}input{font:500 var(--vasc-font-16) Arimo;color:white;background:#03121f;border:1px solid #4e6177;border-radius:8px;padding:12px;min-width:0;width:100%}input::placeholder{color:#8393a5}.start{font-size:var(--vasc-font-12);color:#b8c9db}.help{font-size:var(--vasc-font-14);color:#bbcada;margin-top:20px}.form-footer{display:grid;grid-template-columns:1fr 1.4fr auto;gap:22px;align-items:end;padding-top:25px}.form-footer label{font-size:var(--vasc-font-12)}.form-footer input{margin-top:8px}.total small,.total output,.total span{display:block}.total small{font-size:var(--vasc-font-12)}.total output{font-size:var(--vasc-text-number,var(--vasc-font-16));font-weight:700;color:#ff7400;overflow-wrap:anywhere}.total span{font-size:var(--vasc-font-12);color:#aebfd1}#form-error{color:#ff5c6c;margin:18px 0 0}.saved{color:#24573c;font-weight:700;padding:0 12px}summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}summary h2{margin-bottom:12px}.toggle{font-size:var(--vasc-font-22)}details:not([open]) .toggle{transform:rotate(-90deg)}.empty-chart{min-height:235px;border:1px dashed #5c70894f;border-radius:14px;padding:35px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(0deg,#38608410,transparent);margin:24px 0}.empty-chart>span{font-size:var(--vasc-font-30);color:#ffae6a}.empty-chart p{font-size:var(--vasc-font-14);color:#a9bacd;max-width:620px;margin:0}.sentence{font-size:var(--vasc-font-14);color:#c6d3e2}.portfolio-banner{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}.portfolio-banner h3{margin:0;overflow-wrap:anywhere}.portfolio-banner p{font-size:var(--vasc-font-12);margin:0;color:#a9bdd4}.badge{padding:6px 12px;border:1px solid #647d97;border-radius:30px;font-size:var(--vasc-font-12)}.selected-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #ffffff16;font-size:var(--vasc-font-14)}.transactions{padding:20px;background:#ffffff04;border-radius:12px}.transactions p{font-size:var(--vasc-font-14);color:#aebfd1;margin:8px 0 0}.pro{display:flex;align-items:center;flex-wrap:wrap;gap:20px}.pro>div{flex:1;min-width:200px}.pro>.muted{width:100%;margin:0}footer{color:#59677b;text-align:center;font-size:var(--vasc-font-12);padding:14px}[hidden]{display:none!important}@media(max-width:900px){.two{grid-template-columns:1fr;gap:22px}.form-footer{grid-template-columns:1fr 1fr}.form-footer button{grid-column:1/-1}.card{padding:28px}.asset-head,.asset-row{gap:12px;grid-template-columns:1.15fr 1fr 1fr 1fr}}@media(max-width:600px){main{padding:12px}.card{padding:22px 17px;border-radius:17px}.asset-head{display:none}.asset-row{grid-template-columns:1fr 1fr;padding:20px 0;gap:14px}.quote{text-align:right}.start{padding-left:8px}.money:before{content:'Monatlich';display:block;font-size:var(--vasc-font-12);color:#aebfd1;margin-bottom:5px}.money>span{top:32px}.form-footer{grid-template-columns:1fr}.form-footer button{grid-column:auto}.example,.inset{padding:18px}.assessment{gap:12px}.assessment h2{font-size:var(--vasc-text-section,var(--vasc-font-20))}nav{gap:14px;font-size:var(--vasc-font-12);justify-content:space-between}h1{letter-spacing:-.8px}.lead{font-size:var(--vasc-text-body,var(--vasc-font-14))}.primary,.secondary{width:100%;gap:10px}.preview-note{gap:2px}.preview-note span{width:100%}.portfolio-banner{gap:12px}.empty-chart{padding:26px 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body,input,button,select,textarea,svg text{font-family:Arimo}.card{background:radial-gradient(circle at 0 0,rgba(255,116,0,.20),transparent 30%),linear-gradient(145deg,#021324,#041c31);border-color:rgba(255,255,255,.13)}.example,.inset{background:#031a2d}.primary{background:linear-gradient(110deg,#ff9a3d,#ff7400)}.dynamic-example{text-align:center;margin:20px 0 28px;padding:18px 12px;border:1px solid rgba(255,255,255,.13);border-radius:12px;font-size:var(--vasc-font-14)}.flow-source{background:#ff7400;color:#021426;padding:12px;border-radius:8px;font-weight:700}.flow-arrow{padding:15px 0;color:#ffebdb;font-size:var(--vasc-font-12)}.flow-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}.flow-buy,.flow-reserve{padding:14px 8px;border-radius:8px;font-weight:700}.flow-buy{border:1px solid #ff7400;background:#ff740020}.flow-reserve{border:1px solid #8599ad;background:#ffffff06}.flow-split small{display:block;font-weight:400;font-size:var(--vasc-font-12)}.dynamic-example>small{color:rgba(255,235,219,.58);font-size:var(--vasc-font-12)}
#historical-chart svg{display:block;width:100%;height:auto;min-height:220px} .history-legend{display:flex;gap:20px;flex-wrap:wrap;font-size:var(--vasc-font-12);margin-top:25px} @media(max-width:600px){#historical-chart svg{min-height:180px}.history-legend{gap:12px}}
.savings-months{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;text-align:center;margin:24px 0}.savings-month{min-width:0;font-size:var(--vasc-font-12)}.monthly-payment{background:#ff7400;color:#021324;font-weight:700;padding:8px 3px;border-radius:7px;margin-top:10px}.purchase-arrow{display:block;font-size:var(--vasc-font-20);color:#ffebdb}.savings-month small{display:block;font-size:var(--vasc-font-12)}.share-column{height:100px;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid #ffffff40;margin:14px 0 8px}.share-column span{display:block;width:65%;background:linear-gradient(0deg,#ff7400,#ffb020);border-radius:5px 5px 0 0}.share-amount{color:#ffb020;white-space:nowrap}.eth-zone-chart svg{width:100%;height:auto;display:block;margin:20px 0}.zone-explanations{margin-top:20px}.zone-explanations p{font-size:var(--vasc-font-14)}.zone-low{color:#31f08a}.zone-mid{color:#ffb020}.zone-high{color:#ff5c6c}@media(max-width:400px){.savings-months{gap:6px}.savings-month{font-size:var(--vasc-font-12)}.savings-month small{font-size:var(--vasc-font-12)}.share-column{height:80px}}
/* Erklaerung und Beispiel bewusst nacheinander ueber die volle Breite. */
#verstehen > .two{grid-template-columns:minmax(0,1fr);gap:22px}
#verstehen > .two > article{min-width:0}
#verstehen > .two > article > p{max-width:none}
/* Fluides Layout fuer die Einsteigeransicht: Inhalt bestimmt den Umbruch. */
main{width:100%;padding:clamp(10px,2vw,24px)}
.card{container-type:inline-size;padding:clamp(16px,3vw,38px)}
.card :where(article,div,span,label,summary){min-width:0}
h1,h2,h3{max-width:100%;word-break:normal;overflow-wrap:break-word;hyphens:none;text-wrap:balance}
h1{font-size:clamp(1.75rem,4vw,3.1rem);font-size:clamp(1.75rem,4.5cqi,3.1rem);line-height:1.18;letter-spacing:-.025em}
h2,.assessment h2{font-size:var(--vasc-text-section,var(--vasc-font-20));line-height:1.3}
h3{font-size:clamp(1.1rem,2.2cqi,1.3rem);line-height:1.4}
p,.lead{max-width:100%;text-wrap:pretty;overflow-wrap:break-word;word-break:normal;hyphens:auto}
.lead{font-size:var(--vasc-text-body,var(--vasc-font-14))}
.eyebrow{letter-spacing:.1em;line-height:1.5;overflow-wrap:break-word}
.example,.inset{padding:clamp(12px,2.5cqi,25px)}
.example p,.zone-explanations p{font-size:clamp(.9rem,1.6cqi,1rem)}
.asset-head,.asset-row{grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr))}
.asset-title{gap:8px}.asset-title strong{overflow-wrap:break-word;hyphens:auto}
.quote strong,.quote small,.share-amount,.monthly-payment{white-space:nowrap;font-variant-numeric:tabular-nums}
.form-footer{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));align-items:end}
.form-footer button{grid-column:auto}
.primary,.secondary{max-width:100%;line-height:1.4;text-wrap:balance;padding-inline:clamp(12px,2cqi,22px)}
.primary span[aria-hidden],.toggle{flex-shrink:0}
summary{gap:12px}summary>span:first-child{flex:1}
.selected-row{flex-wrap:wrap}.selected-row>*{overflow-wrap:break-word}
.pro>div{min-width:0;flex-basis:260px}
.savings-months{gap:clamp(6px,2cqi,24px)}
.savings-month{font-size:clamp(.75rem,1.8cqi,1rem)}
.savings-month small{font-size:clamp(.7rem,1.5cqi,.9rem)}
.savings-month small span{display:inline-block;white-space:nowrap}
.share-column{height:clamp(80px,14cqi,150px)}
.eth-zone-chart svg{max-width:100%;height:auto}
.zone-explanations strong{display:block}
@media(max-width:800px){
.asset-head{display:none}.asset-row{grid-template-columns:repeat(2,minmax(0,1fr));padding:18px 0;gap:14px}
.quote{text-align:right}.money:before{content:'Monatlich';display:block;font-size:var(--vasc-font-12);color:#aebfd1;margin-bottom:5px}.money>span{top:32px}
}
@media(max-width:380px){.assessment{flex-direction:column;gap:4px}.savings-months{gap:5px}.coin{width:28px;height:28px;font-size:var(--vasc-font-16)}.asset-title{gap:6px}}
.coin{position:relative;overflow:hidden}.coin img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#031a2d}.quote-date{font-size:var(--vasc-font-12);color:#a1b1c3;margin:0 0 18px}.return-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:clamp(.85rem,1.8cqi,1rem)}.return-table caption{text-align:left;font-weight:700;margin-bottom:12px}.return-table th,.return-table td{padding:12px 8px;border-bottom:1px solid #ffffff20}.return-table th{text-align:left;font-weight:500;overflow-wrap:break-word}.return-table td{text-align:right;font-variant-numeric:tabular-nums}.return-table tr:last-child{color:#ffb020;font-weight:700}@media(max-width:450px){.return-table th,.return-table td{display:block;text-align:left;padding:7px 0}.return-table th{border-bottom:0;padding-bottom:0}.return-table td{padding-top:3px}}
/* Zonenerklaerungen: bisherige responsive Schriftgroesse plus 2 px. */
.zone-explanations p{font-size:calc(clamp(.9rem,1.6cqi,1rem) + 2px)}
/* Kurs und Tagesveraenderung nebeneinander; Umbruch nach verfuegbarem Platz. */
.asset-row .quote{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;text-align:left}
.asset-row .quote strong,.asset-row .quote small{display:inline-block;white-space:nowrap}
@container (max-width:700px){
.asset-head{display:none}
.asset-row{grid-template-columns:repeat(2,minmax(0,1fr));padding:18px 0;gap:14px}
.asset-row .quote{justify-content:flex-end}
.money:before{content:'Monatlich';display:block;font-size:var(--vasc-font-12);color:#aebfd1;margin-bottom:5px}
.money>span{top:32px}
}
@container (max-width:430px){
.asset-row .asset-title,.asset-row .quote{grid-column:1/-1}
.asset-row .quote{justify-content:flex-start}
}
@container (max-width:270px){
.asset-row{grid-template-columns:minmax(0,1fr)}
.asset-row .start{padding-left:0}
}
/* Markierte Hinweise im Sparplanformular jeweils +2 px. */
#plan > .help{font-size:var(--vasc-text-body,var(--vasc-font-14))}
#plan .total small,#plan .total #selection{font-size:var(--vasc-font-14)}
/* Historischer Vergleich: markierte Legende und Ergebnissatz +2 px. */
#history .history-legend{font-size:var(--vasc-font-14)}
#history #historical-result{font-size:var(--vasc-text-body,var(--vasc-font-14))}
/* Drei Hinweise unter dem Vergleich: wie Ergebnissatz, kompakte Absatzabstaende. */
#history #historical-summary > .muted,
#history #historical-summary ~ p.muted{font-size:var(--vasc-text-body,var(--vasc-font-14));line-height:1.65;margin:0 0 6px}
#history #historical-summary ~ p.muted:last-child{margin-bottom:0}