*{box-sizing:border-box}body{margin:0;background:linear-gradient(145deg,#07111f,#0b1e33);color:#f7fbff;font-family:Arial,Helvetica,sans-serif;min-height:620px}body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% 0,#1689e826,transparent 40%);pointer-events:none}.login{max-width:560px;margin:70px auto;padding:45px 38px;text-align:center;border:1px solid #27547c;border-radius:22px;background:#08182aee;box-shadow:0 20px 70px #0008}.lock{width:76px;height:76px;margin:auto;border:1px solid #55baff;border-radius:50%;display:grid;place-items:center;font-size:38px;color:#6bc4ff;box-shadow:0 0 30px #1689e855}.eyebrow{letter-spacing:.24em;font-size:11px;color:#6bc4ff}.login h1,.inside h1{font-size:34px;margin:10px 0}.login p{color:#b9cde0}.login form{display:grid;gap:12px;margin-top:28px}.login input{padding:15px;border-radius:8px;border:1px solid #31516d;background:#06111e;color:white;font-size:16px}.login button,.logout{padding:14px;border:0;border-radius:8px;background:linear-gradient(#1a9cff,#0b5fa6);color:white;font-weight:700;letter-spacing:.08em;cursor:pointer}.error{color:#ff9d9d}.inside{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:32px 38px;border-bottom:1px solid #20405e}.inside p{margin:3px 0;color:#b9cde0}.logout{white-space:nowrap}.wave{height:54px;opacity:.5;background:repeating-linear-gradient(90deg,#1597ef 0 2px,transparent 2px 8px);mask:linear-gradient(transparent,#000,transparent)}.tracks{padding:20px 38px 50px;display:grid;gap:18px}.track{display:flex;gap:22px;align-items:center;background:#08182add;border:1px solid #183b5d;border-radius:16px;padding:18px}.cover{width:100px;height:100px;flex:0 0 100px;border-radius:12px;background:linear-gradient(145deg,#0e3153,#1689e8);display:grid;place-items:center;font-size:32px;font-weight:bold;box-shadow:0 8px 25px #0006}.cover span{font-size:12px;align-self:end;margin-bottom:9px;position:absolute}.meta{flex:1}.meta small{color:#6bc4ff;letter-spacing:.14em}.meta h2{margin:5px 0 12px;font-size:21px}.meta audio{width:100%}.empty{padding:35px;text-align:center;border:1px dashed #31516d;border-radius:14px;color:#b9cde0}code{color:#6bc4ff}@media(max-width:620px){.login{margin:25px 14px;padding:32px 20px}.inside{align-items:flex-start;flex-direction:column;padding:24px}.tracks{padding:18px}.track{align-items:flex-start}.cover{width:70px;height:70px;flex-basis:70px}.meta h2{font-size:18px}}
/* Responsive Ergänzung */
img,svg,video,canvas{max-width:100%;height:auto}audio{max-width:100%}
@media(max-width:700px){body{overflow-x:hidden}.wrap,.container,main{max-width:100%;padding-left:14px!important;padding-right:14px!important}.demo-item,.card{max-width:100%}h1{font-size:clamp(1.6rem,8vw,2.4rem)}}

/* Drei nebeneinanderliegende Demo-Kategorien */
.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:24px 38px 55px;align-items:start}
.category-column{min-width:0;background:#08182a99;border:1px solid #255077;border-radius:18px;padding:17px}
.category-heading{font-size:23px;margin:2px 0 20px;border-bottom:2px solid #1689e8;padding-bottom:14px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.category-heading span{font-size:12px;color:#a4c9e9;font-weight:normal;white-space:nowrap}
.category-tracks{display:grid;gap:14px}.category-column .track{display:block;padding:15px}.category-column .cover{width:64px;height:64px;font-size:22px;float:left;margin:0 13px 12px 0;position:relative}.category-column .cover span{font-size:10px}.category-column .meta{min-width:0}.category-column .meta h3{font-size:18px;line-height:1.35;margin:6px 0 16px;overflow-wrap:anywhere}.category-column audio{display:block;width:100%;clear:both}.category-empty{color:#b9cde0;font-size:14px}
@media(max-width:950px){.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:20px}}
@media(max-width:650px){.category-grid{grid-template-columns:1fr;padding:16px}.category-column{padding:14px}}

.demo-registration-cta{margin-top:32px;padding-top:23px;border-top:1px solid #31516d}.demo-registration-cta h2{font-size:20px;color:#8ed1ff}.demo-registration-cta p{line-height:1.5}.demo-register-button{display:inline-block;background:#1689e8;color:white;text-decoration:none;border-radius:9px;padding:14px 23px;font-weight:bold}.demo-register-button:hover,.demo-register-button:focus{background:#0b65af}

.track-reserved{border:1px solid #e74747!important;background:rgba(145,25,35,.14)!important}.track-reserved h3,.reserved-label{color:#ff6565!important}.reserved-label{display:block;font-weight:800;letter-spacing:.05em;margin-top:12px}

.login label{text-align:left;font-size:14px;font-weight:700;color:#b9d9f3;margin-top:8px}.login input:focus-visible{outline:3px solid #87d4ff;outline-offset:2px}