/* ORBIORA — Glasoberflächen. Wird NACH styles.css geladen und ändert nur das Aussehen. */

:root{
  --glas-rand:rgba(255,255,255,.15);
  --glas-hell:rgba(255,255,255,.085);
}

/* ---------- Seitenmenü ---------- */
.sidebar{
  background:
    linear-gradient(165deg, var(--glas-hell), rgba(255,255,255,.02) 55%, rgba(41,182,255,.055)),
    rgba(9,12,20,.58) !important;
  border:1px solid var(--glas-rand);
  border-radius:22px;
  margin:14px 0 14px 14px;
  backdrop-filter:blur(20px) saturate(155%);
  -webkit-backdrop-filter:blur(20px) saturate(155%);
  box-shadow:0 26px 64px -34px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.16);
}
.sidebar .nav-item{border-radius:13px;transition:background .22s,color .22s}
.sidebar .nav-item:hover{background:rgba(255,255,255,.06)}
.sidebar .nav-item.is-active{
  background:linear-gradient(90deg, rgba(41,182,255,.24), rgba(255,49,92,.12));
  border:1px solid rgba(41,182,255,.32);
  box-shadow:0 0 26px -8px rgba(41,182,255,.65);
}
.sidebar-signal{
  border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}

/* ---------- Player als Glassäule ---------- */
.player-column{
  background:
    linear-gradient(150deg, var(--glas-hell), rgba(255,255,255,.02) 50%, rgba(255,49,92,.05)),
    rgba(9,12,20,.55) !important;
  border:1px solid var(--glas-rand);
  border-radius:24px;
  margin:14px 14px 14px 0;
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 28px 72px -36px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.18);
}
.player-topline{
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  padding:8px 12px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
/* Cover wie hinter Glas */
.player-cover{
  box-shadow:0 20px 50px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.12),
             inset 0 1px 0 rgba(255,255,255,.2);
}
/* Zurückhaltend: während die Musik läuft fast unsichtbar,
   beim Darüberfahren und in der Pause wieder deutlich. */
.cover-play{
  width:46px !important;height:46px !important;
  background:rgba(6,9,16,.34) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:none !important;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:rgba(255,255,255,.82);
  opacity:.5;
  transition:opacity .28s, transform .22s, background .22s, border-color .22s;
}
body.is-playing .cover-play{opacity:.16}
.visual-stage:hover .cover-play,
.cover-play:hover,
.cover-play:focus-visible{
  opacity:1;
  transform:scale(1.04);
  background:rgba(10,14,22,.55) !important;
  border-color:rgba(255,255,255,.4) !important;
}
.cover-play .play-icon{border-top-width:6px;border-bottom-width:6px;border-left-width:9px}
.cover-play .pause-icon{transform:scale(.86)}

/* Bedienknöpfe als Glasplättchen */
.player-controls button{
  border-radius:50%;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background .2s,border-color .2s,transform .2s;
}
.player-controls button:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}
.player-controls .main-play{
  border-color:rgba(255,255,255,.3);
  box-shadow:0 0 34px -8px rgba(41,182,255,.8), inset 0 1px 0 rgba(255,255,255,.4);
}
.volume-row{
  border-radius:12px;padding:9px 12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.075);
}

/* ---------- Werkzeuge über der Liste ---------- */
.search-box{
  background:rgba(255,255,255,.055) !important;
  border:1px solid var(--glas-rand) !important;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  transition:border-color .22s, box-shadow .22s;
}
.search-box:focus-within{
  border-color:rgba(41,182,255,.55) !important;
  box-shadow:0 0 26px -8px rgba(41,182,255,.75);
}
.random-button,
.filters button{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:12px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background .2s,border-color .2s,transform .2s;
}
.random-button:hover,
.filters button:hover{background:rgba(255,255,255,.10) !important;transform:translateY(-1px)}
.filters button.is-active{
  background:linear-gradient(100deg, rgba(41,182,255,.85), rgba(108,99,255,.85)) !important;
  border-color:transparent !important;color:#05080e;font-weight:700;
  box-shadow:0 0 28px -8px rgba(41,182,255,.85);
}

/* ---------- Songzeilen: leichtes Glas, deutlicher beim Überfahren ---------- */
.track-row{
  border-radius:14px;
  border:1px solid transparent;
  transition:background .2s,border-color .2s,transform .2s;
}
.track-row:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transform:translateX(2px);
}
.track-row.is-current{
  background:linear-gradient(90deg, rgba(41,182,255,.16), rgba(255,49,92,.07)) !important;
  border-color:rgba(41,182,255,.35);
  box-shadow:0 0 30px -14px rgba(41,182,255,.85);
}

/* ---------- Startseite: Knöpfe und Karten aus Glas ---------- */
.hero-primary{
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 0 34px -10px rgba(41,182,255,.8), inset 0 1px 0 rgba(255,255,255,.35);
}
#heroSound,
.hero-video-nav button{
  background:rgba(255,255,255,.06) !important;
  border:1px solid var(--glas-rand) !important;
  border-radius:12px;
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  transition:background .2s,border-color .2s;
}
#heroSound:hover,
.hero-video-nav button:hover{background:rgba(255,255,255,.12) !important}
.hero-video-nav button.is-active{
  border-color:rgba(41,182,255,.6) !important;
  box-shadow:0 0 22px -8px rgba(41,182,255,.85);
}
.latest-card{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .26s,border-color .26s,box-shadow .26s;
}
.latest-card:hover{
  transform:translateY(-4px);
  border-color:rgba(41,182,255,.4);
  box-shadow:0 24px 48px -24px rgba(41,182,255,.6);
}

/* ---------- Handy ---------- */
@media(max-width:900px){
  .sidebar,.player-column{margin:10px;border-radius:18px}
}
/* Wenn der Browser kein Glas kann, bleibt es einfach dunkel und lesbar */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sidebar,.player-column{background:rgba(9,12,20,.92) !important}
}

/* ================= ERGÄNZUNGEN ================= */

/* ---------- Videoarchiv: Gruppen ---------- */
.archive-gruppe{margin-top:44px}
.archive-gruppe:first-child{margin-top:26px}
.archive-gruppe-kopf{
  display:flex;align-items:center;gap:16px;
  padding-bottom:12px;margin-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.archive-gruppe-kopf .section-code{margin:0}
.archive-gruppe-kopf em{
  margin-left:auto;font-style:normal;color:#7d879a;
  font:.6rem/1 ui-monospace,monospace;letter-spacing:.14em;
}
.video-archive-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.video-archive{display:block;margin-top:0}
@media(max-width:760px){.video-archive-raster{grid-template-columns:1fr}}

/* Hochformat-Videos nicht beschneiden */
.archive-video-media video{background:#05070c;object-fit:contain}

/* ---------- Header: weicher Übergang zwischen den drei Filmen ---------- */
.home-hero > video{transition:opacity .5s ease}
.home-hero.wechselt > video{opacity:0}

/* ---------- Über ORBIORA: galaktische Schrift ---------- */
.about-galaxie .about-hero h1{
  font-family:"Orbitron", ui-sans-serif, system-ui, sans-serif;
  font-weight:400;
  letter-spacing:.005em;
  line-height:1.02;
  font-size:clamp(2.4rem,4.6vw,5.2rem);
  text-shadow:0 0 60px rgba(41,182,255,.30);
}
.about-galaxie .about-hero h1 strong{
  font-weight:800;
  filter:drop-shadow(0 0 28px rgba(255,49,92,.38));
}
.about-galaxie .about-hero .section-code{
  font-family:"Orbitron", ui-monospace, monospace;
  letter-spacing:.34em;
}
.about-galaxie .about-hero blockquote{
  font-family:"Orbitron", ui-sans-serif, system-ui, sans-serif;
  font-weight:400;font-size:1.1rem;line-height:1.7;
  text-shadow:0 0 34px rgba(41,182,255,.22);
}
.about-galaxie .about-hero small{
  display:inline-block;margin-top:6px;
  font-family:"Orbitron", ui-monospace, monospace;
  font-weight:600;letter-spacing:.42em;
  color:#dceeff;
  text-shadow:0 0 22px rgba(41,182,255,.65), 0 0 46px rgba(108,99,255,.35);
}
@media(max-width:760px){
  .about-galaxie .about-hero h1{font-size:2.3rem;letter-spacing:0}
  .about-galaxie .about-hero small{letter-spacing:.26em}
}

/* ---------- orbiora.ch anklickbar ---------- */
.orbiora-link{
  color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(41,182,255,.42);
  padding-bottom:1px;
  transition:color .2s, border-color .2s, text-shadow .2s;
}
.orbiora-link:hover,.orbiora-link:focus-visible{
  color:#7fd4ff;
  border-color:#7fd4ff;
  text-shadow:0 0 18px rgba(41,182,255,.75);
}
.about-galaxie .about-hero small .orbiora-link{
  border-bottom-color:rgba(220,238,255,.45);
}

/* ---------- Knopf in der Songzeile: zeigt, was läuft ---------- */
.row-play{transition:background .2s, border-color .2s, color .2s, box-shadow .25s, transform .18s}
.row-play .pause-icon{transform:scale(.62)}
.row-play.is-playing{
  background:linear-gradient(140deg, rgba(41,182,255,.9), rgba(108,99,255,.9)) !important;
  border-color:transparent !important;
  color:#05080e;
  box-shadow:0 0 26px -6px rgba(41,182,255,.85);
}
.track-row:hover .row-play{transform:scale(1.06)}