:root{--bg:#f5f7fa;--ink:#1f2b3a;--muted:#5b6b7a;--card:#fff;--brand:#0b2a46;--sidebar-w:300px}*{box-sizing:border-box}body,html{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;margin:0;padding:0}.site-header{padding:clamp(24px,6vw,56px) 5vw 10px}.site-header h1{font-size:clamp(28px,5vw,46px);margin:0 0 6px}.lead{color:var(--muted);margin:0}.tips{color:#3a4a5a;margin-top:8px}.compare{display:grid;gap:24px;grid-template-columns:1fr;padding:24px 5vw}.panel{background:var(--card);border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.06);padding:16px}.panel h2{font-size:1.25rem;margin:0 0 12px}.layout{display:grid;gap:16px;grid-template-columns:var(--sidebar-w) 1fr}.main,.sidebar{background:#fff;border:1px solid #e8eef5;border-radius:12px;padding:14px}.main h3,.sidebar h3{margin:0 0 12px}.card{display:grid;gap:12px;margin-bottom:14px}.card img{border-radius:8px;height:180px;object-fit:cover;width:100%}.card .desc{color:#586779}.actions{display:flex;flex-wrap:wrap;gap:8px}.btn{border:0;border-radius:10px;cursor:pointer;padding:10px 14px}.btn.primary{background:var(--brand);color:#fff}.btn.ghost{background:#e8eef5;color:var(--brand)}@media (min-width:900px){.old .card{align-items:center;grid-template-columns:1fr 1.2fr}.old .card img{height:100%}}.old .sidebar .card{outline:2px dashed #e88787;outline-offset:6px}.old .sidebar .card .desc:after{color:#b85c5c;content:"  (gequetscht durch Viewport‑MQ)";font-weight:600}.new .card.cq{container-type:inline-size}@container (min-width: 480px){.new .card.cq{align-items:center;grid-template-columns:1fr 1.2fr}.new .card.cq img{height:100%}}@container (min-width: 720px){.new .card.cq{gap:18px;grid-template-columns:1.2fr 1.3fr}.new .card.cq h4{font-size:1.2rem}.new .card.cq .desc{font-size:1.05rem;line-height:1.6}}.timeline{gap:12px 18px;margin-top:8px}.timeline,.timeline .event{display:grid;grid-template-columns:120px 1fr}.timeline .event{align-items:start;border-bottom:1px solid #e9eef5;gap:8px 14px;padding:10px 0}.timeline .event:last-child{border-bottom:0}.time{color:var(--brand);font-weight:600}.content{display:grid;gap:6px}.content h5{margin:0}.content p{color:#586779;margin:0}.controls{margin-top:6px}@supports (grid-template-columns:subgrid){.new .timeline.use-subgrid .event{column-gap:inherit;grid-column:1/-1;grid-template-columns:subgrid}}.site-footer{color:#7a8694;padding:40px 5vw 80px}@media (max-width:1000px){.compare{grid-template-columns:1fr}}@media (max-width:760px){:root{--sidebar-w:100%}.layout{grid-template-columns:1fr}}