*{box-sizing:border-box}
body{margin:0;background:#0b0c0e;color:#f6f6f3;font-family:Arial,Helvetica,sans-serif}
a{text-decoration:none;color:inherit}
.shell{width:min(1400px,calc(100% - 40px));margin:auto}
.top{padding:28px 0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff1a}
.brand2 strong{display:block;letter-spacing:.045em;font-size:22px;font-weight:900}.brand2 strong span{color:#108cff}
.brand2 small{font-size:7px;letter-spacing:.2em;color:#8c929b}
.logout{border:1px solid #ffffff26;padding:10px 13px;font-size:8px;letter-spacing:.13em}
.intro2{padding:70px 0 45px}
.intro2 p{font-size:8px;letter-spacing:.24em;color:#777e88;font-weight:700}
.catalog-hint{max-width:720px;font-size:13px!important;letter-spacing:0!important;line-height:1.65;color:#b0bac5!important;font-weight:400!important;margin:22px 0 0}.intro2 h1{font-size:clamp(44px,6vw,84px);line-height:.98;margin:14px 0}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}
.filter{border:1px solid #ffffff20;background:transparent;color:#aaa;padding:10px 15px;font-size:9px;font-weight:700;letter-spacing:.12em;cursor:pointer}
.filter.active,.filter:hover{background:#f2f0e9;color:#111}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-bottom:60px}
.card{min-height:350px;background:var(--bg);border:1px solid #ffffff1a;position:relative;overflow:hidden}
.card[hidden]{display:none}
.card:before{content:"";position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:50%;background:var(--accent);opacity:.25}
.inner{position:relative;z-index:2;min-height:350px;padding:24px;display:flex;flex-direction:column}
.toprow{display:flex;justify-content:space-between;font-size:8px}
.cat{border:1px solid #ffffff2d;padding:6px 8px;text-transform:uppercase;letter-spacing:.12em}
.main{margin-top:auto}
.main h2{font-size:34px;margin:0 0 6px}
.main p{color:var(--accent);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.open{margin-top:24px;border-top:1px solid #ffffff2d;padding-top:15px;display:flex;justify-content:space-between;font-size:9px;font-weight:700}
.open b{background:var(--accent);color:#111;width:30px;height:30px;display:grid;place-items:center}
footer a{color:#c1d6ec;text-decoration:underline}footer{border-top:1px solid #ffffff1a;padding:26px 0 40px;color:#747b84;font-size:8px}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid{grid-template-columns:1fr}.shell{width:calc(100% - 28px)}}

/* Demo-Kartenfarben als Klassen, CSP-konform ohne inline style. */
.demo-card-01{--accent:#b79c7e;--bg:#231f1b;}
.demo-card-02{--accent:#ff5a1f;--bg:#111214;}
.demo-card-03{--accent:#b9684d;--bg:#66705a;}
.demo-card-04{--accent:#b98b43;--bg:#303330;}
.demo-card-05{--accent:#b06d45;--bg:#102538;}
.demo-card-06{--accent:#2f9cff;--bg:#07111c;}
.demo-card-07{--accent:#e12b2b;--bg:#0a0a0a;}
.demo-card-08{--accent:#e7ef55;--bg:#165f42;}
.demo-card-09{--accent:#b38b4d;--bg:#5e1f2d;}


.demo-card-10{--accent:#de6f45;--bg:#1b231d;}
.demo-card-11{--accent:#ed9d4d;--bg:#7b4635;}
.demo-card-12{--accent:#d2687d;--bg:#533b5b;}
.demo-card-13{--accent:#287d76;--bg:#d6e5e2;}
.demo-card-14{--accent:#6d90cf;--bg:#1d2845;}
.demo-card-15{--accent:#8c9e57;--bg:#d5d8c3;}
.demo-card-16{--accent:#ddff56;--bg:#151715;}
.demo-card-17{--accent:#c3a77d;--bg:#101c2a;}
.demo-card-18{--accent:#31a4af;--bg:#0c3940;}
.demo-card-19{--accent:#c39c7c;--bg:#293e3a;}
.demo-card-20{--accent:#a9c6bd;--bg:#274c51;}
.demo-card-21{--accent:#ed604e;--bg:#191b21;}
.card{transition:transform .22s ease,border-color .22s ease}.card:hover{transform:translateY(-6px);border-color:var(--accent)}.card:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.filter:focus-visible{outline:2px solid #108cff;outline-offset:3px}.intro2 p:first-child{color:#108cff}.brand2 small{font-size:10px;line-height:1.5}.intro2 h1{letter-spacing:-.04em}
@media(prefers-reduced-motion:reduce){.card{transition:none}}