@font-face { font-family: 'Winky';
             src: url('1fonts/Winky.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%}
    body{
      margin:0; display:flex; align-items:center; justify-content:center; padding:32px; background:linear-gradient(180deg,#071022 0%, #08142a 100%); color:#e6eef8;
    }

    .player{
      width:70%; max-width:80%; background:#000000;margin-left:10%;margin-top:135vw;
      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/oldchildsback2.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 384px;
    }
    .meta{flex:1}
    .title{font-size:1vw; font-weight:500; margin:0}
    .artist{color:var(--muted); font-size:1vw; 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}
    .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}
  
  .specialbild
{
width:32%;
padding:0px;
margin:0px
}
.inhlthoerspiel
{
color:#000000;
position:absolute;
top:1vw;
left:18%;
width:82%;
margin:0vw;
padding:1vw;
padding-bottom:2vw;
text-align:left;
background-color:#85acce;
}
  
.ttl 
{
position:fixed;
left:0%;
top:3vw;
width:60%;
text-align:left;
}
.ttllogo 
{
width:29%;
margin-left:0%
}
.titelbild 
{
position:absolute;
width:26%;
left:20%;
top:1vw;
}
html,ul,table,div
{
font-family:'Winky';
font-size:1.2vw;
line-height:1.44vw;
font-weight:420;
}
ul 
{
list-style-type:none;
margin:0px;
padding:0px;
}
li 
{
list-style-type:none;
margin:0px;
padding:0px;
}

@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%}
    body{
      margin:0; display:flex; align-items:center; justify-content:center; padding:32px; background:linear-gradient(180deg,#071022 0%, #08142a 100%); color:#e6eef8;
    }

    .player{
      width:95%; max-width:95%; background:#000000;margin-left:24%;margin-top:360vw;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:3vw; font-weight:500; margin:0}
    .artist{color:var(--muted); font-size:3vw; 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}
  
 .specialbild
{
width:49%;
padding:0px;
margin:0px
}
.inhlthoerspiel
{
top:0vw;
width:70%;
left:25%
}

.ttl 
{
position:fixed;
left:0%;
top:3vw;
width:60%;
text-align:left;
}
.ttllogo 
{
width:38%;
margin-left:0%
}
html,ul,table,div
{
font-family:'Winky';
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;
}


}