:root{
    color-scheme: dark;

    --bg:#0f1115; --fg:#e9edf5; --muted:#a7b0c2; --line:#222737;
    --btn:#1c2333; --btn2:#141a27; --accent:#5aa7ff;
    --r:20px;
  }



body{
  margin:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(1400px 900px at 30% 10%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(1200px 900px at 80% 30%, rgba(0,0,0,.12), transparent 55%),
    linear-gradient(180deg, #316FB3, #2a5f9c);
    padding:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--fg);

}

  .rhm-player{
    width:100%;
    max-width:980px;
    margin:0 32px;
  }

  .rhm-player{
    --btn:#1c2333; --btn2:#141a27; --accent:#5aa7ff;
    --r:20px;

    background: rgba(15,17,21,.94);
    border:1px solid rgba(34,39,55,.9);
    border-radius:var(--r);

    padding: 36px;
    display:grid;
    gap: 28px;

    align-items:center;

    width: min(92vw, 1180px);
    grid-template-columns: clamp(200px, 18vw, 260px) 1fr;

    box-shadow: 0 32px 110px rgba(0,0,0,.6);
    backdrop-filter: blur(6px);

    position: relative; /* für Footer-Links + "Aktualisiert" */
  }

  /* -------- COVER (DESKTOP größer) -------- */
  .rhm-cover{
    width: clamp(200px, 18vw, 260px);
    height: clamp(200px, 18vw, 260px);
    border-radius: 22px;
    overflow:hidden;
    background: linear-gradient(135deg, #1b2233, #0f1115);
    border:1px solid rgba(34,39,55,.9);
    position:relative;
  }

  .rhm-cover-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition: opacity 360ms ease;
    opacity:0;
  }
  .rhm-cover-img.active{ opacity:1; }

  .rhm-home-link{
    text-decoration:none;
    cursor:pointer;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .rhm-home-link:hover{ transform: translateY(-2px); }
  .rhm-home-link:active{ transform: translateY(0); }
  .rhm-home-link:hover{ box-shadow: 0 20px 60px rgba(0,0,0,.65); }

  /* -------- META luftiger -------- */
  .rhm-title{
    font-weight:700;
    font-size: clamp(22px, 1.8vw, 30px);
    line-height:1.25;
    letter-spacing:.4px;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
  }

  .rhm-home{
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    transition:opacity .15s ease;
  }
  .rhm-home:hover{ opacity:.85; }

  .rhm-sub{
    color:var(--muted);
    font-size: clamp(16px, 1.3vw, 19px);
    margin-top:14px;
    min-height:1.4em;
  }

  .rhm-controls{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-top:28px;
    align-items:center;
  }
  
  
  .rhm-overlay{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    z-index: 9999;
  }
  .rhm-overlay.open{ display:flex; }

  .rhm-sheet{
    width: min(860px, 96vw);
    max-height: 82vh;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(34,39,55,.9);
    background: rgba(15,17,21,.98);
    box-shadow: 0 32px 110px rgba(0,0,0,.65);
    display: flex;
    flex-direction: column;
  }
  .rhm-sheet-body{ padding:16px; overflow:auto; }  


  .rhm-sheet-body{
    padding:16px;
    overflow:auto;
    color: rgba(233,237,245,.92);
    font-size:14px;
    line-height:1.55;
  }

  /* Typografie */
  .rhm-sheet-body h1,
  .rhm-sheet-body h2,
  .rhm-sheet-body h3{
    margin: 18px 0 8px 0;
    font-weight:800;
    color: var(--fg);
  }

  .rhm-sheet-body p{
    margin: 10px 0;
  }

  .rhm-sheet-body ul{
    margin: 10px 0 10px 18px;
  }

  .rhm-sheet-body li{
    margin: 4px 0;
  }

  .rhm-sheet-body a{
    color: var(--accent);
    text-decoration:none;
  }
  .rhm-sheet-body a:hover{
    text-decoration:underline;
  }

  .rhm-sheet-body table{
    width:100%;
    border-collapse: collapse;
    margin: 12px 0;
  }
  .rhm-sheet-body td,
  .rhm-sheet-body th{
    border:1px solid rgba(34,39,55,.9);
    padding:6px 8px;
    font-size:13px;
  }

  .rhm-sheet-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    border-bottom:1px solid rgba(34,39,55,.9);
  }

  .rhm-sheet-title{
    font-weight:800;
    font-size:16px;
  }

  .rhm-sheet-close{
    background: rgba(255,255,255,.04);
    border:1px solid rgba(34,39,55,.9);
    color: var(--fg);
    border-radius: 12px;
    padding: 8px 10px;
    cursor:pointer;
  }
  .rhm-sheet-close:hover{
    border-color: rgba(90,167,255,.35);
  }

  /* -------- BUTTONS -------- */
  .rhm-btn{
    background:var(--btn);
    color:var(--fg);
    border:1px solid rgba(34,39,55,.9);
    border-radius: 18px;
    padding: 16px 22px;
    cursor:pointer;
    font-weight:600;
    font-size:16px;
    line-height:1;
    transition: all .15s ease;
  }

  .rhm-btn:hover{ border-color: rgba(90,167,255,.35); }
  .rhm-btn:active{ transform: translateY(1px); }

  .rhm-btn-secondary{
    background:var(--btn2);
    font-size:15px;
    padding:14px 20px;
  }

  .rhm-btn-primary{
    background: rgba(90,167,255,.18);
    border-color: rgba(90,167,255,.5);
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
    padding: 18px 28px;
    font-size:17px;
  }
  .rhm-btn-primary:hover{
    background: rgba(90,167,255,.24);
    border-color: rgba(90,167,255,.65);
  }

  .rhm-source{
    display:flex;
    gap:14px;
    padding: 14px 18px;
    border-radius: 18px;
    border:1px solid rgba(34,39,55,.9);
    background: rgba(255,255,255,.02);
  }

  .rhm-radio{
    display:flex;
    gap:8px;
    align-items:center;
    color:var(--muted);
    font-size:15px;
    user-select:none;
  }
  .rhm-radio input{ accent-color: var(--accent); }

  .rhm-status{
    margin-top:18px;
    color: rgba(167,176,194,.9);
    font-size:14px;
    min-height:20px;
  }

  /* -------- Footer links links unten -------- */
  .rhm-legal{
    position:absolute;
    left: 18px;
    bottom: 14px;
    display:flex;
    gap:10px;
    align-items:center;
    font-size:12px;
    color: rgba(167,176,194,.65);
    user-select:none;
    z-index: 5;
  }
  .rhm-legal a{
    color: rgba(167,176,194,.75);
    text-decoration:none;
    user-select:auto;
  }
  .rhm-legal a:hover{
    color: var(--fg);
    text-decoration:underline;
  }
  .rhm-legal .sep{
    opacity:.45;
    pointer-events:none;
  }

  /* -------- "Aktualisiert" rechts unten -------- */
  .rhm-updated{
    position:absolute;
    right: 18px;
    bottom: 14px;
    font-size: 12px;
    color: rgba(167,176,194,.65);
    user-select:none;
    pointer-events:none;
    min-height: 16px;
    z-index: 4;
  }
  
  .rhm-build{
    font-size:11px;
    opacity:.6;
    margin-top:4px;
  }  




  /* ================= MOBILE ================= */
  @media (max-width: 520px){
    body{
      padding: 22px 14px 80px 14px;
      align-items:flex-start;
    }

    .rhm-player{
      width:100%;
      grid-template-columns:1fr;
      text-align:center;

      padding:18px;
      gap:16px;
      overflow:visible;
    }

    .rhm-cover{
      width:62vw;
      height:62vw;
      max-width:260px;
      max-height:260px;

      margin:-34px auto 6px auto;
      border-radius:20px;

      box-shadow:0 16px 50px rgba(0,0,0,.55);
    }

    .rhm-title{ font-size:20px; }
    .rhm-sub{
      font-size:15px;
      margin-top:8px;
    }

    .rhm-controls{
      justify-content:center;
      gap:8px;
      margin-top:14px;
      flex-wrap:nowrap;
    }

    .rhm-btn{
      padding:10px 14px;
      font-size:14px;
      border-radius:14px;
    }

    .rhm-btn-primary{
      padding:10px 16px;
      font-size:14px;
      box-shadow:none;
    }

    .rhm-source{
      padding:8px 12px;
      border-radius:14px;
    }

    .rhm-radio{ font-size:13px; }

    .rhm-status{
      margin-top:10px;
      font-size:12px;
    }

    .rhm-legal{
      left: 14px;
      bottom: 10px;
      font-size: 11px;
    }

    .rhm-updated{
      right: 14px;
      bottom: 10px;
      font-size: 11px;
    }
	  .rhm-legal,
  .rhm-updated{
    position: static;
  }

  .rhm-player{
    padding-bottom: 28px;
  }

  .rhm-meta{
    display:flex;
    flex-direction:column;
  }

  .rhm-footer-row{
    display:flex;
    justify-content:space-between;
    margin-top:14px;
    font-size:11px;
    opacity:.7;
  }
  }