:root{color-scheme:dark;--bg:#0b1120;--panel:#121a2b;--panel-2:#182235;--text:#f8fafc;--muted:#9ba8bb;--border:#2b3850;--accent:#ef4444;--accent-2:#fb7185;--shadow:0 14px 35px rgba(0,0,0,.18)}
:root.light{color-scheme:light;--bg:#eef2f7;--panel:#fff;--panel-2:#f7f9fc;--text:#172033;--muted:#687386;--border:#d6dde8;--accent:#d92d3b;--accent-2:#f05261;--shadow:0 12px 28px rgba(31,41,55,.09)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.app-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem max(1rem,calc((100vw - 1100px)/2));background:linear-gradient(135deg,var(--panel),var(--panel-2));border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.eyebrow{margin:0 0 .25rem;color:var(--accent-2);font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em}h1{font-size:clamp(1.25rem,4vw,1.9rem);margin:0}.subtitle{margin:.25rem 0 0;color:var(--muted);font-size:.9rem}
.app-shell{width:min(1100px,100%);margin:auto;padding:1rem}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1rem}.metrics article{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:.9rem;box-shadow:var(--shadow)}.metrics span{display:block;color:var(--muted);font-size:.76rem;margin-bottom:.3rem}.metrics strong{font-size:1.25rem}
.tabs{display:flex;gap:.55rem;overflow-x:auto;padding-bottom:.55rem;margin-bottom:.8rem;scrollbar-width:thin}.tab,.secondary,.primary,.icon-button,.file-button{border:1px solid var(--border);border-radius:13px;padding:.7rem .95rem;background:var(--panel);color:var(--text);white-space:nowrap;text-decoration:none}.tab.active,.primary{background:var(--accent);border-color:var(--accent);color:#fff}.icon-button{font-size:1.15rem;padding:.62rem .8rem}
.panel{display:none;background:var(--panel);border:1px solid var(--border);border-radius:22px;padding:1rem;box-shadow:var(--shadow);margin-bottom:1rem}.panel.active{display:block}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.section-heading>div{display:flex;align-items:center;gap:.7rem}.section-heading h2{font-size:1.15rem;margin:0}.step{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:.78rem}
.grid{display:grid;gap:.9rem}.grid.two,.axle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.axle-grid{display:grid;gap:1rem;margin-bottom:1rem}.subsection,.brand-block{border:1px solid var(--border);border-radius:18px;padding:1rem;background:var(--panel-2)}.subsection h3,.brand-block h3{margin:0 0 .9rem;color:var(--accent-2)}.brand-block{margin-top:1rem}
label{display:block;color:var(--muted);font-size:.84rem}input,select,textarea{width:100%;margin-top:.35rem;border:1px solid var(--border);border-radius:12px;padding:.72rem .78rem;background:var(--panel-2);color:var(--text);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}textarea{resize:vertical}.conditional{animation:fade .15s ease}@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.slider-list{display:grid;gap:.85rem;margin-bottom:1rem}.slider-item{border:1px solid var(--border);background:var(--panel-2);border-radius:15px;padding:.75rem}.slider-title{display:flex;justify-content:space-between;margin-bottom:.5rem;color:var(--text)}input[type=range]{padding:0;border:0;background:transparent}.advice{margin-top:1rem;border-left:4px solid var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel-2));padding:1rem;border-radius:12px;line-height:1.55}
.action-bar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:.85rem;position:sticky;bottom:.7rem;box-shadow:var(--shadow);z-index:10}.file-button input{display:none}#status{color:var(--muted);font-size:.85rem}
.setup-list{display:grid;gap:.75rem;margin-top:1rem}.setup-card{display:flex;justify-content:space-between;gap:1rem;border:1px solid var(--border);border-radius:16px;padding:.9rem;background:var(--panel-2)}.setup-card h3{font-size:1rem;margin:0 0 .3rem}.setup-card p{color:var(--muted);margin:0;font-size:.82rem}.card-actions{display:flex;gap:.45rem;align-items:center}.small-btn{padding:.55rem .7rem;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--text)}.muted{color:var(--muted)}
.compare-table-wrap{overflow:auto;margin-top:1rem}.compare-table{width:100%;border-collapse:collapse;min-width:640px}.compare-table th,.compare-table td{padding:.7rem;border-bottom:1px solid var(--border);text-align:left}.compare-table th{color:var(--muted);font-size:.82rem}.compare-table tr.changed td{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.install-banner{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);width:min(680px,calc(100% - 2rem));z-index:50;background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;box-shadow:0 20px 50px rgba(0,0,0,.3)}.install-banner span{display:block;color:var(--muted);font-size:.82rem;margin-top:.2rem}.install-actions{display:flex;gap:.5rem}
@media(max-width:720px){.metrics{grid-template-columns:repeat(2,1fr)}.grid.two,.axle-grid{grid-template-columns:1fr}.setup-card{flex-direction:column}.card-actions{align-self:flex-end}.install-banner{align-items:flex-start;flex-direction:column}.action-bar{position:static}}
@media print{:root{color-scheme:light;--bg:#fff;--panel:#fff;--panel-2:#fff;--text:#000;--muted:#333;--border:#bbb;--shadow:none}.app-header,.tabs,.action-bar,.install-banner,[data-panel="vergleich"],[data-panel="bibliothek"]{display:none!important}body{background:#fff}.app-shell{width:100%;padding:0}.metrics{grid-template-columns:repeat(4,1fr)}.panel{display:block!important;break-inside:avoid;border-radius:0;margin:0 0 10px;padding:10px}input,select,textarea{border:0;padding:.15rem;background:#fff;color:#000}.subsection,.brand-block{background:#fff}}