@font-face { font-family: 'sanscode';
             src: url('1fonts/sanscode.ttf') format('truetype'); }

    :root{
      --bg:#0f1724; --card:#0b1220; --accent:#7dd3fc; --muted:#94a3b8; --glass: rgba(255,255,255,0.03);
      --focus: 2px solid rgba(125,211,252,0.25);
 }
    *{box-sizing:border-box}
    html,body{height:100%;color:#eeeeff}

    .player{
      width:50%; max-width:80%; background:#000000;margin-left:16%;margin-top:12vw;
      border-radius:14px; padding:18px; box-shadow:0 8px 30px rgba(2,6,23,0.6); border:1px solid rgba(255,255,255,0.03);
      display:grid; gap:12px; grid-template-columns: 1fr 320px;
      background-image: url("1pic/elevatorsback2.jpg");
  background-position: 0 0;
  background-attachment:fixed;
  background-repeat: no-repeat;
  background-size: cover;
    }

    /* Left: controls */
    .controls{padding:12px}
    .now{display:flex; gap:12px; align-items:center;}
    .cover{
border-radius:8px; background:linear-gradient(135deg,#071a2a,#022b3b); display:flex; align-items:center; justify-content:center; color:var(--muted);
      font-weight:600; font-size:1vw; flex:0 0 450px;
    }
    .meta{flex:1}
    .title{font-size:0vw; font-weight:500; margin:0}
    .artist{color:var(--muted); font-size:0vw; margin-top:4px}

    .big-controls{display:flex; align-items:center; gap:8px; margin-top:12px}
    button.ctrl{background:var(--glass); border:0; padding:10px 12px; border-radius:10px; cursor:pointer; color:inherit; font-size:1vw}
    button.ctrl:focus{outline:none; box-shadow:var(--focus)}

    .play-btn{font-size:1vw; padding:12px 16px}

    .progress-wrap{margin-top:12px}
    .time-row{display:flex; justify-content:space-between; font-size:1vw; color:var(--muted)}
    .progress{width:100%; height:8px; background:rgba(255,255,255,0.04); border-radius:8px; overflow:hidden; margin-top:8px; cursor:pointer}
    .progress > .bar{height:100%; width:0%; background:linear-gradient(90deg,var(--accent), #60a5fa)}

    .row{display:flex; gap:8px; align-items:center}

    .right{padding:12px;     background-image: url("1pic/elevatorsback2.jpg");
  background-position: 0 0;
  background-attachment:fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
    .playlist{background:transparent; border-radius:8px; padding:8px; max-height:420px; overflow:auto;}
    .track{display:flex; gap:10px; align-items:center; padding:8px; border-radius:8px; cursor:pointer;}
    .track:hover{background:rgba(255,255,255,0.01)}
    .track.active{background:linear-gradient(90deg, rgba(125,211,252,0.08), rgba(96,165,250,0.02));}
    .track .tidx{width:28px; text-align:center; color:var(--muted); font-size:1vw}
    .track .info{flex:1}
    .track .tname{font-weight:600}
    .track .tmeta{font-size:1vw; color:var(--muted)}

    .controls-bottom{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:10px}
    input[type=range]{-webkit-appearance:none; appearance:none; width:140px}
    input[type=range]::-webkit-slider-runnable-track{height:6px; background:rgba(255,255,255,0.06); border-radius:6px}
    input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; margin-top:-4px}

    /* small screens */
    @media (max-width:880px){
      .player{grid-template-columns:1fr;}
      .right{order:2}
    }

    /* Accessibility helpers */
    .sr-only{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
  
.elevatorsbody
{
background-color:#000000; 
background-image: url("1pic/elevatorsback.jpg");
  background-position: 0 0;
  background-attachment:fixed;
  background-repeat: no-repeat;
  background-size: cover;
  }
.titelbild 
{
position:absolute;
width:11%;
left:19%;
top:0vw;
opacity:0.8;
padding-top:2vw
}
.titeltext
{
position:absolute;
width:30%;
left:18%;
top:5vw;
font-weight:bold;
background-color:#000000;
opacity:0.7
}
.titeltext2
{
font-size:3.5vw;
line-height:3.5vw;
position:absolute;
width:50%;
left:28%;
top:8vw;
color:#95bcde;
}
.vorhernachhershow
{
position:absolute;
top:3vw;
left:75%;
width:23%;
margin:0vw;
 background-image: url("1pic/elevatorsback2.jpg");
  background-position: 0 0;
  background-attachment:fixed;
  background-repeat: no-repeat;
  background-size: cover;
color:#eeeeff
}
.vorhernachhershowtxt
{
color:#eeeeff;
margin:0vw;
padding:1.2vw;
padding-bottom:1vw;
text-align:left;
background:none;
opacity:0.85;
}


@media only screen and (max-width: 600px) 
{


   :root{
      --bg:#0f1724; --card:#0b1220; --accent:#7dd3fc; --muted:#94a3b8; --glass: rgba(255,255,255,0.03);
      --focus: 2px solid rgba(125,211,252,0.25);
 }
    *{box-sizing:border-box}
    html,body{height:100%}
    .player{
      width:95%; max-width:95%; background:#000000;margin-left:5%;margin-top:50vw;opacity:0.9;
      border-radius:14px; padding:18px; box-shadow:0 8px 30px rgba(2,6,23,0.6); border:1px solid rgba(255,255,255,0.03);
      display:grid; gap:12px; grid-template-columns: 1fr 320px;
    }

    /* Left: controls */
    .controls{padding:12px}
    .now{display:flex; gap:12px; align-items:center;}
    .cover{
border-radius:8px; background:linear-gradient(135deg,#071a2a,#022b3b); display:flex; align-items:center; justify-content:center; color:var(--muted);
      font-weight:600; font-size:3vw; flex:0 0 284px;
    }
    .meta{flex:1}
    .title{font-size:0vw; font-weight:500; margin:0}
    .artist{color:var(--muted); font-size:0vw; margin-top:4px}

    .big-controls{display:flex; align-items:center; gap:8px; margin-top:12px}
    button.ctrl{background:var(--glass); border:0; padding:10px 12px; border-radius:10px; cursor:pointer; color:inherit; font-size:3vw}
    button.ctrl:focus{outline:none; box-shadow:var(--focus)}

    .play-btn{font-size:3vw; padding:12px 16px}

    .progress-wrap{margin-top:12px}
    .time-row{display:flex; justify-content:space-between; font-size:3vw; color:var(--muted)}
    .progress{width:100%; height:8px; background:rgba(255,255,255,0.04); border-radius:8px; overflow:hidden; margin-top:8px; cursor:pointer}
    .progress > .bar{height:100%; width:0%; background:linear-gradient(90deg,var(--accent), #60a5fa)}

    .row{display:flex; gap:8px; align-items:center}

    .right{padding:12px}
    .playlist{background:transparent; border-radius:8px; padding:8px; max-height:420px; overflow:auto;}
    .track{display:flex; gap:10px; align-items:center; padding:8px; border-radius:8px; cursor:pointer;}
    .track:hover{background:rgba(255,255,255,0.01)}
    .track.active{background:linear-gradient(90deg, rgba(125,211,252,0.08), rgba(96,165,250,0.02));}
    .track .tidx{width:28px; text-align:center; color:var(--muted); font-size:3vw}
    .track .info{flex:1}
    .track .tname{font-weight:600}
    .track .tmeta{font-size:3vw; color:var(--muted)}

    .controls-bottom{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:10px}
    input[type=range]{-webkit-appearance:none; appearance:none; width:140px}
    input[type=range]::-webkit-slider-runnable-track{height:6px; background:rgba(255,255,255,0.06); border-radius:6px}
    input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; margin-top:-4px}

    /* small screens */
    @media (max-width:880px){
      .player{grid-template-columns:1fr;}
      .right{order:2}
    }

    /* Accessibility helpers */
    .sr-only{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
  
  
.ttl 
{
position:fixed;
left:0%;
top:3vw;
width:60%;
text-align:left;
}
.ttllogo 
{
width:38%;
margin-left:0%
}
.titelbild 
{
position:absolute;
width:40%;
left:50%;
top:6vw;
z-index:10;
padding-top:0vw

}
.titeltext
{
width:80%;
left:13%;
top:38vw;
opacity:0.8
}
.titeltext2
{
font-size:9.5vw;
line-height:10vw;
position:absolute;
width:90%;
left:12%;
top:37vw;
color:#95bcde;
}

html,ul,table,div
{
font-family:'sanscode';
font-size:3vw;
line-height:3vw;
font-weight:420;
}
ul 
{
list-style-type:none;
margin:0px;
padding:0px;
}
li 
{
list-style-type:none;
margin:0px;
padding:0px;
}
.vorhernachhershow
{
position:absolute;
top:277vw;
left:5%;
width:95%;
margin:0vw;
 background-image: url("1pic/elevatorsback2.jpg");
  background-position: 0 0;
  background-attachment:fixed;
  background-repeat: no-repeat;
  background-size: cover;
color:#eeeeff;
padding-bottom:20vw
}
.vorhernachhershowtxt
{
color:#eeeeff;
margin:0vw;
padding:1.2vw;
padding-bottom:1vw;
text-align:left;
background:none;
opacity:0.85;
text-align:left
}


}