/* Merch-Detailseiten. Bewusst schlank gehalten: Die Seiten sollen schnell
   laden (Core Web Vitals) und funktionieren ohne JavaScript. */
:root { --bg:#050D1F; --fg:#E8EDF7; --dim:#9AA7C2; --akz:#7C5CFF; --akz2:#38D6FF;
        --karte:#0C1730; --linie:rgba(124,92,255,.22); }
* { box-sizing:border-box; min-width:0 }
body { margin:0; background:var(--bg); color:var(--fg);
       font:16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif }
img { max-width:100%; height:auto; display:block }
a { color:var(--akz2) }
.skip { position:absolute; left:-9999px }
.skip:focus { left:8px; top:8px; background:var(--karte); padding:8px 14px; border-radius:8px; z-index:99 }

.ms-kopf { display:flex; justify-content:space-between; align-items:center;
           padding:14px 20px; border-bottom:1px solid var(--linie) }
.ms-marke { font-weight:800; font-size:19px; color:var(--fg); text-decoration:none }
.ms-nav a { text-decoration:none; font-size:14px }
main { max-width:1080px; margin:0 auto; padding:20px }

.ms-brot { font-size:13px; color:var(--dim); margin:6px 0 20px }
.ms-brot a { color:var(--dim) }

.ms-produkt { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start }
.ms-bilder { display:grid; gap:12px }
.ms-bilder img { border-radius:14px; background:var(--karte) }
.ms-info h1 { font-size:clamp(24px,4vw,34px); line-height:1.15; margin:0 0 10px }
.ms-preis { font-size:26px; font-weight:800; margin:0 0 4px }
.ms-versand { font-size:14px; font-weight:400; color:var(--dim) }
.ms-beschr { color:var(--dim) }
.ms-groessen { font-size:14px }
.ms-kauf { display:inline-block; margin:14px 0; padding:14px 24px; border-radius:12px;
           background:linear-gradient(120deg,var(--akz),var(--akz2)); color:#fff;
           font-weight:700; text-decoration:none }
.ms-fakten { padding-left:18px; color:var(--dim); font-size:14.5px }

.ms-text { margin:44px 0; max-width:720px }
.ms-text h2 { font-size:19px; margin:26px 0 8px }
.ms-text p { color:var(--dim) }

.ms-raster { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px }
.ms-kachel { display:block; text-decoration:none; color:var(--fg); background:var(--karte);
             border:1px solid var(--linie); border-radius:14px; overflow:hidden; padding-bottom:10px }
.ms-kachel img { border-radius:14px 14px 0 0 }
.ms-kachel-name { display:block; padding:10px 12px 2px; font-weight:600; font-size:14.5px }
.ms-kachel-preis { display:block; padding:0 12px; color:var(--dim); font-size:13.5px }
.ms-einleitung { color:var(--dim); max-width:720px }
.ms-mehr { margin:36px 0 }
.ms-mehr h2 { font-size:18px }
.ms-mehr ul { padding-left:18px }
.ms-kauf-zeile { margin:28px 0 }

.ms-fuss { border-top:1px solid var(--linie); margin-top:48px; padding:20px;
           text-align:center; font-size:13.5px; color:var(--dim) }
.ms-fuss a { color:var(--dim) }

@media (max-width:760px) { .ms-produkt { grid-template-columns:1fr; gap:20px } }