:root{
  --bg0:#070a12;
  --bg1:#0b1020;

  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.10);

  --text:#e9f0fb;
  --muted:#a7b3c2;

  --accent:#28d7ff;
  --accent2:#8a5cff;

  --good:#26d07c;
  --bad:#ff4d6d;

  /* Timeline / Seek */
  --timeline-fill:#ff9b2f;
  --timeline-rest:rgba(255,255,255,.12);

  --shadow: 0 10px 40px rgba(0,0,0,.55);
  --shadow2: 0 12px 55px rgba(0,0,0,.62);

  --r:18px;
  --r2:22px;

  --maxw:1100px;
  --pad:18px;

  --font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --footer-space: calc(96px + env(safe-area-inset-bottom));
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  overflow:hidden;

  font-size:16px;
  line-height:1.55;
  letter-spacing:.1px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(138,92,255,.22), transparent 60%),
    radial-gradient(1000px 600px at 70% 30%, rgba(40,215,255,.16), transparent 55%),
    radial-gradient(900px 700px at 50% 95%, rgba(40,215,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{color:inherit}
code,pre{font-family:var(--font-mono)}
img{max-width:100%; height:auto; display:block}

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 18px;
}

.app{
  height:100vh;
  min-height:0;
  display:flex;
  flex-direction:column;
}

@supports (height: 100svh){
  .app{ height:100svh; }
}
@supports (height: 100dvh){
  .app{ height:100dvh; }
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
}
.skip-link:focus{left:10px; z-index:9999}

/* =========================================================
   Header / Nav
   ========================================================= */
header.site-header{
  flex:0 0 auto;
  background:linear-gradient(180deg, rgba(6,9,16,.92), rgba(6,9,16,.62));
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.brand-avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand .name{
  font-weight:900;
  letter-spacing:.2px;
  font-size:16px;
}
.brand .tag{
  color:var(--muted);
  font-size:13px;
  margin-top:4px;
}

.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.nav a{
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  color:var(--text);
  opacity:.92;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition:transform .06s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.nav a:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.20);
  opacity:1;
}
.nav a:active{transform:translateY(1px)}
.nav a.active{
  color:var(--accent);
  border-color:rgba(40,215,255,.30);
  background: linear-gradient(180deg, rgba(40,215,255,.16), rgba(40,215,255,.08));
  opacity:1;
}
.nav a:focus{outline:none}
.nav a:focus-visible{outline:2px solid rgba(40,215,255,.35); outline-offset:3px}

/* =========================================================
   Main / Footer
   ========================================================= */
.site-content{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling: touch;

  padding:26px 0 calc(26px + var(--footer-space));
  scroll-behavior:smooth;
}

.footer{
  flex:0 0 auto;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(0deg, rgba(6,9,16,.94), rgba(6,9,16,.62));
  backdrop-filter: blur(10px);
  padding:18px 0 calc(18px + env(safe-area-inset-bottom));
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.footer-title{color:var(--text); font-weight:900}

.footer-sub{
  margin-top:4px;
  font-size:13px;
  color:var(--muted);

  display:flex;
  align-items:baseline;
  gap:6px;
  flex-wrap:wrap;
}
.footer-copy{ color:var(--muted); }
.footer-domain{ color:var(--muted); }
.footer-sep{ opacity:.4; }

.footer-link{color:var(--muted); text-decoration:none}
.footer-link:hover{color:var(--text)}
.dot{opacity:.4; margin:0 6px}

.footer-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:14px;
  text-decoration:none;

  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  color:var(--text);
  opacity:.92;

  box-shadow: 0 10px 22px rgba(0,0,0,.30);
  transition:transform .06s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.footer-btn:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07));
  border-color:rgba(255,255,255,.22);
  opacity:1;
}
.footer-btn:active{transform:translateY(1px)}
.footer-btn:focus{outline:none}
.footer-btn:focus-visible{outline:2px solid rgba(40,215,255,.35); outline-offset:3px}

/* =========================================================
   Footer v2: Buttons oben, Brand + 3D-Counter unten
   ========================================================= */
.footer-inner.footer-layout{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    ". . nav"
    "left counter .";
  align-items:center;
  gap:10px 14px;
}
.footer-layout .footer-left{ grid-area:left; }
.footer-layout .footer-counter{ grid-area:counter; justify-self:center; }
.footer-layout .footer-right{ grid-area:nav; justify-self:end; }

/* Mini-Branding (minimaler Glow/Tracking) */
.footer-layout .footer-title{
  letter-spacing:.08em;
  text-shadow:0 0 10px rgba(40,215,255,.18);
}

/* 3D-Zähler (klein & schick) */
.footer-counter{ min-width:118px; }
.counter3d{ position:relative; display:inline-block; width:132px; height:28px; }
.counter3d-svg{ position:absolute; inset:0; width:100%; height:100%; }
.counter3d-digits{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:0 10px;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing:.18em;
  font-weight:900;
  font-size:13px;
  color:var(--text);
  text-shadow:0 1px 0 rgba(0,0,0,.65);
}

/* =========================================================
   Cards / Typography helpers
   ========================================================= */
.card{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r2);
  padding:var(--pad);
  box-shadow:var(--shadow2);
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--r2);
  pointer-events:none;
  background:
    radial-gradient(600px 120px at 10% 0%, rgba(40,215,255,.12), transparent 60%),
    radial-gradient(480px 120px at 70% 0%, rgba(138,92,255,.12), transparent 60%);
  opacity:.7;

  z-index:0;
}
.card > *{
  position:relative;
  z-index:1;
}
.card.soft{box-shadow: var(--shadow)}

.card.card-col{
  display:flex;
  flex-direction:column;
}
.card-actions{
  margin-top:auto;
  padding-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.h1{
  margin:0;
  font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing:.15px;
  line-height:1.15;
  font-weight:950;
}
.h2{margin:0; font-size:20px; font-weight:900}
.h3{margin:0; font-size:16px; font-weight:850}
.p{margin:10px 0 0; color:var(--text); opacity:.95; line-height:1.65}
.small{font-size:13px; color:var(--muted); line-height:1.5}

.accent{color:var(--accent)}
.section-gap{margin-top:16px}

/* =========================================================
   Fallback-Richtext
   ========================================================= */
.card h1,.card h2,.card h3{margin:0}
.card h1{font-size: clamp(26px, 3.2vw, 38px); font-weight:950; line-height:1.15}
.card h2{font-size:20px; font-weight:900; margin-top:14px}
.card h3{font-size:16px; font-weight:850; margin-top:12px}
.card p{margin:10px 0 0; color:var(--text); opacity:.95; line-height:1.65}
.card ul,.card ol{margin:10px 0 0; padding-left:18px; color:var(--text); opacity:.95}
.card li{margin-top:6px}
.card hr{
  margin:16px 0;
  border:0;
  border-top:1px solid rgba(255,255,255,.10);
}

.hr{
  height:1px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  margin:14px 0;
}

.notice{
  margin-top:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:12px 14px;
}
.notice strong{color:var(--text)}
.notice ul{margin:10px 0 0; padding-left:18px}
.notice li{margin-top:6px}

/* =========================================================
   Site Layout: Sections / Grids / Hero / Boxes / Buttons
   ========================================================= */
.section{margin-top:18px}
.stack{display:flex; flex-direction:column; gap:14px}

.grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.grid.two{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid.one{grid-template-columns:1fr}

@media (max-width: 900px){
  .grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .grid.three{grid-template-columns:repeat(2, minmax(0,1fr))}
}

@media (max-width: 900px){
  .card-areas{
    grid-template-columns: 1fr !important;
  }
}

.hero{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  display:grid;
  grid-template-columns: .85fr 1.15fr;
  grid-template-areas: "media content";
  gap:16px;
  align-items:start;
}
.hero.card::before{
  opacity:.28;
  background:
    radial-gradient(620px 150px at 12% 0%, rgba(40,215,255,.10), transparent 62%),
    radial-gradient(620px 150px at 88% 0%, rgba(138,92,255,.10), transparent 62%);
}
.hero-content{grid-area:content}
.hero-media{
  grid-area:media;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
}

.hero-portrait{
  width:min(360px, 100%);
  aspect-ratio: 1 / 1;
  object-fit:cover;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  position:relative;
  z-index:2;
}
.hero-ring{
  position:absolute;
  inset:10px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.10);
  opacity:.55;
  z-index:1;
  pointer-events:none;
  background:none;
}

.hero-title{margin:0}
.hero-lead{margin-top:12px; color:var(--text); opacity:.92; line-height:1.7}
.hero-actions{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.hero-kpis{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}

.kpi{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:12px;
}
.kpi .kpi-l{color:var(--muted); font-size:12px}
.kpi .kpi-v{margin-top:4px; font-weight:950; font-size:14px}

.kpi-top{font-weight:950; font-size:14px; letter-spacing:.1px}
.kpi-sub{margin-top:6px; color:var(--muted); font-size:12px; line-height:1.5}

@media (max-width: 900px){
  .hero{
    grid-template-columns:1fr;
    grid-template-areas:
      "media"
      "content";
  }
  .hero-media{
    justify-content:center;
  }

  .hero-portrait{
    width:min(260px, 82vw);
  }
  .hero-ring{
    inset:14px;
  }

  .hero-kpis{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .hero-kpis .kpi:nth-child(3):last-child{
    grid-column:1 / -1;
    justify-self:center;
    width: calc((100% - 10px) / 2);
  }

  .kpi-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .kpi-grid .kpi:nth-child(3):last-child{
    grid-column:1 / -1;
    justify-self:center;
    width: calc((100% - 14px) / 2);
  }
}

.boxes{
  margin-top:16px;
}
.box{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding:14px;
}
.box-title{
  font-weight:950;
  letter-spacing:.1px;
}
.box-text{
  margin-top:8px;
  color:var(--text);
  opacity:.92;
  line-height:1.65;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:11px 14px;
  border-radius:16px;
  text-decoration:none;

  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  color:var(--text);
  font-weight:900;
  letter-spacing:.1px;

  box-shadow: 0 14px 28px rgba(0,0,0,.28);
  transition: transform .07s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07));
  border-color: rgba(255,255,255,.22);
}
.btn:active{transform: translateY(1px)}
.btn:focus{outline:none}
.btn:focus-visible{outline:2px solid rgba(40,215,255,.35); outline-offset:3px}

.btn-primary{
  border-color: rgba(40,215,255,.30);
  background: linear-gradient(180deg, rgba(40,215,255,.22), rgba(40,215,255,.10));
}
.btn-primary:hover{
  border-color: rgba(40,215,255,.42);
  box-shadow: 0 0 0 1px rgba(40,215,255,.18), 0 18px 40px rgba(0,0,0,.35);
}
.btn-ghost{
  background: rgba(255,255,255,.04);
}

.card.soft > a.btn{
  margin-top:12px;
  width:100%;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}
.label{font-weight:850; color:var(--text)}
.input, .textarea, select{
  width:100%;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
.textarea{min-height:140px; resize:vertical}
.input:focus, .textarea:focus, select:focus{
  border-color: rgba(40,215,255,.35);
  box-shadow: 0 0 0 3px rgba(40,215,255,.12);
}
.help{color:var(--muted); font-size:13px; line-height:1.5}

.table-wrap{overflow:auto; border-radius:18px}
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
th,td{
  text-align:left;
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
th{color:var(--muted); font-size:13px; font-weight:900}
tr:hover td{background: rgba(255,255,255,.03)}

/* =========================================================
   Visually hidden
   ========================================================= */
.music-visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =========================================================
   ✅ Marquee
   ========================================================= */
.marquee{
  position:relative;
  overflow:hidden;
  white-space:nowrap;
  min-width:0;
  max-width:100%;
  display:block;
}
.marquee .marquee-inner{
  display:inline-block;
  padding-right:56px;
  transform:translateX(0);
}
.marquee.is-marquee{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.marquee.is-marquee .marquee-inner{
  animation: marquee var(--marquee-dur, 14s) linear infinite;
}
@keyframes marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(calc(-1 * (var(--marquee-dist, 0px) + 56px))); }
}
@media (prefers-reduced-motion: reduce){
  .marquee.is-marquee .marquee-inner{ animation:none; }
}

/* =========================================================
   ✅ Seekbar unified
   ========================================================= */
.seek-range{
  width:100%;
  appearance:none;
  height:10px;
  border-radius:999px;
  outline:none;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(90deg,
    var(--timeline-fill) 0%,
    var(--timeline-fill) var(--seek-pct, 0%),
    var(--timeline-rest) var(--seek-pct, 0%),
    var(--timeline-rest) 100%
  );
}
.seek-range::-webkit-slider-thumb{
  appearance:none;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  border:2px solid rgba(0,0,0,.35);
  cursor:pointer;
}
.seek-range::-moz-range-thumb{
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  border:2px solid rgba(0,0,0,.35);
  cursor:pointer;
}

/* =========================================================
   Trackliste (global)
   ========================================================= */
.tracklist{margin-top:12px; display:flex; flex-direction:column; gap:10px}
.track{
  display:flex; gap:12px; align-items:center; padding:12px;
  border-radius:18px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05); cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
  text-align:left;
}
.track:hover{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12)}
.track.is-active{
  border-color:rgba(40,215,255,.28);
  background:rgba(40,215,255,.07);
}
.track-inner{display:flex; align-items:center; gap:12px; width:100%}
.track-cover{
  width:44px;
  height:44px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(15,23,42,.9);
  flex-shrink:0;
}
.track-cover img{width:100%; height:100%; object-fit:cover; display:block}
.track-text{flex:1; min-width:0}
.track-title{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.track-artist{
  margin-top:2px;
  color:#9aa6b2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:.95rem;
  font-weight:500;
}
.sr-status{margin-top:10px; color:var(--muted); font-size:13px}

/* =========================================================
   ✅ Player Wrapper
   ========================================================= */
.player-wrap{width:100%; display:block}

/* =========================================================
   ✅ Unified Player (Desktop + Mobile)
   ========================================================= */
body.page-music .mplayer-inline{
  display:block;
  margin-top:14px;

  border-radius:26px;
  border:1px solid rgba(255,255,255,.10);

  background: linear-gradient(180deg, rgba(11,16,32,.98), rgba(7,10,18,.98));
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  padding:14px;

  position:relative;
}

@media (max-width: 900px){
  body.page-music .mplayer-inline{
    position:sticky;
    top:12px;
    z-index:50;
    backdrop-filter: blur(6px);
  }
}

body.page-music .mplayer-start-head{
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:10px;
}
body.page-music .mplayer-full[hidden]{ display:none !important; }

/* =========================================================
   ✅ Player-Überschrift (oben im Player)
   ========================================================= */
body.page-music .mplayer-bar{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;

  padding:8px 8px 12px;
  margin:0 0 12px;
  border-bottom:1px solid rgba(255,255,255,.08);

  /* Platz lassen, damit der Download oben rechts nie überlappt */
  padding-right:160px;
}
body.page-music .mplayer-bar-title{
  font-weight:950;
  letter-spacing:.18px;
  font-size:15px;
  line-height:1.1;
}
body.page-music .mplayer-bar-sub{
  color:var(--muted);
  font-size:13px;
  font-weight:650;
  white-space:nowrap;
  opacity:.95;
}
@media (max-width: 520px){
  body.page-music .mplayer-bar{ padding-right:132px; }
  body.page-music .mplayer-bar-sub{ display:none; }
}

/* =========================================================
   ✅ Download oben rechts am Player-Rand (mobil + desktop)
   ========================================================= */
body.page-music .mplayer-download-float{
  position:absolute;
  top:12px;
  right:calc(12px + env(safe-area-inset-right));
  z-index:5;

  height:40px;
  padding:0 14px;
  border-radius:16px;

  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  font-weight:900;
  white-space:nowrap;
  font-size:13px;

  box-shadow: 0 12px 26px rgba(0,0,0,.28);
  transition: transform .07s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
body.page-music .mplayer-download-float:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}
body.page-music .mplayer-download-float:active{ transform: translateY(1px); }
body.page-music .mplayer-download-float:focus{ outline:none; }
body.page-music .mplayer-download-float:focus-visible{
  outline:2px solid rgba(40,215,255,.35);
  outline-offset:3px;
}
@media (max-width: 520px){
  body.page-music .mplayer-download-float{
    top:10px;
    right:calc(10px + env(safe-area-inset-right));
    height:36px;
    padding:0 12px;
    border-radius:15px;
    font-size:12.5px;
  }
}

/* Header */
body.page-music .mplayer-header{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap:12px;
  align-items:center;
}
body.page-music .mplayer-coverbox{
  width:110px;
  height:110px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
}
body.page-music .mcover-btn{
  width:100%;
  height:100%;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  display:block;
}
body.page-music .mcover-btn:focus-visible{
  outline:2px solid rgba(40,215,255,.35);
  outline-offset:3px;
  border-radius:18px;
}
body.page-music .mplayer-coverbox img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

body.page-music .mplayer-head-meta{
  min-width:0;
  overflow:hidden;
}
body.page-music .mplayer-title{
  font-weight:950;
  font-size:18px;
  line-height:1.15;
  min-width:0;
  max-width:100%;
}
body.page-music .mplayer-artist{
  margin-top:4px;
  color:var(--muted);
  font-style:italic;
  font-weight:600;
  min-width:0;
  max-width:100%;
}
body.page-music .mplayer-published{ margin-top:8px; }

/* Top Actions */
body.page-music .mplayer-top-actions{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px;
  align-items:center;
}
body.page-music .mplayer-topbtn{
  height:40px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:850;
  white-space:nowrap;
  font-size:13px;
  padding:0 10px;
}
body.page-music .mplayer-topbtn:focus-visible{
  outline:2px solid rgba(40,215,255,.35);
  outline-offset:3px;
}

@media (min-width: 901px){
  body.page-music .mplayer-top-actions{
    grid-template-columns: repeat(3, max-content);
    justify-content:start;
  }
  body.page-music .mplayer-topbtn{
    padding:0 12px;
  }
}

#uLike.is-active{
  border-color:rgba(38,208,124,.85);
  background: linear-gradient(180deg, rgba(38,208,124,.22), rgba(38,208,124,.10));
  box-shadow:0 0 0 1px rgba(38,208,124,.55), 0 0 18px rgba(38,208,124,.35);
}
#uDislike.is-active{
  border-color:rgba(255,77,109,.85);
  background: linear-gradient(180deg, rgba(255,77,109,.22), rgba(255,77,109,.10));
  box-shadow:0 0 0 1px rgba(255,77,109,.55), 0 0 18px rgba(255,77,109,.35);
}

/* Chips */
body.page-music .mplayer-chips{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:8px;
}
body.page-music .mchip{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding:10px 10px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
body.page-music .mchip-l{ color:var(--muted); font-size:12px; white-space:nowrap; }
body.page-music .mchip-v{ font-weight:950; white-space:nowrap; }

@media (max-width: 520px){
  body.page-music .mplayer-chips{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  body.page-music .mplayer-chips .mchip:nth-child(3){
    grid-column: 1 / -1;
  }
}

/* Seek */
body.page-music .mplayer-seek{ margin-top:14px; }
body.page-music .mplayer-time{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--muted);
  font-size:12px;
  margin-bottom:8px;
}
body.page-music .mplayer-time-sep{ opacity:.6; }

/* Controls */
body.page-music .mplayer-ctl-row{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
}
body.page-music .mplayer-ctl{
  height:50px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  font-size:18px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 12px 26px rgba(0,0,0,.28);
}
body.page-music .mplayer-ctl:focus-visible{
  outline:2px solid rgba(40,215,255,.35);
  outline-offset:3px;
}
body.page-music .mplayer-ctl-primary{
  border-color: rgba(40,215,255,.30);
  background: linear-gradient(180deg, rgba(40,215,255,.18), rgba(40,215,255,.08));
}

/* SVG Icon styling */
body.page-music .uicon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
}
body.page-music .uicon svg{
  width:24px;
  height:24px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

/* Actions (nur Download) */
body.page-music .mplayer-action-row{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
body.page-music .mplayer-act{
  height:46px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:850;
  white-space:nowrap;
  font-size:14px;
}
body.page-music .mplayer-act:focus-visible{
  outline:2px solid rgba(40,215,255,.35);
  outline-offset:3px;
}

body.page-music .mplayer-desc-block{
  margin-top:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding:10px 12px;
}
body.page-music .mplayer-desc-title{
  font-weight:950;
  letter-spacing:.1px;
}

body.page-music .mplayer-list-panel{
  margin-top:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:12px 12px;

  /* ✅ KEIN Scroll mehr – Liste wächst vollständig */
  max-height:none;
  overflow:visible;
}

body.page-music .utabs{
  margin-top:12px;
  display:flex;
  width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  overflow:hidden;
}
body.page-music .utab{
  flex:1;
  height:44px;
  border:0;
  border-right:1px solid rgba(255,255,255,.10);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-weight:950;
  letter-spacing:.2px;
}
body.page-music .utab:last-child{ border-right:0; }
body.page-music .utab:focus-visible{
  outline:2px solid rgba(40,215,255,.35);
  outline-offset:-2px;
}
body.page-music .utab.is-active{
  color:var(--text);
  background: linear-gradient(180deg, rgba(40,215,255,.18), rgba(40,215,255,.08));
  box-shadow: inset 0 -2px 0 rgba(40,215,255,.55);
}
body.page-music .upanel{ margin-top:0; }

body.page-music .uvol-wrap{
  width:100%;
  position:relative;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
}
body.page-music .uvol-wrap .mplayer-ctl{
  width:100%;
}

body.page-music .uvol-panel{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:220px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(7,10,18,.96);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  opacity:0;
  transform: translateY(-6px);
  pointer-events:none;
  transition: opacity .14s ease, transform .14s ease;
}
body.page-music .uvol-panel input[type="range"]{ width:100%; }
@media (pointer: fine){
  body.page-music .uvol-wrap:hover .uvol-panel,
  body.page-music .uvol-wrap:focus-within .uvol-panel{
    opacity:1;
    transform: translateY(0);
    pointer-events:auto;
  }
}
@media (pointer: coarse){
  body.page-music .uvol-panel{ display:none; }
}

@media (min-width: 901px){
  body.page-music .mplayer-header{
    grid-template-columns: 170px 1fr;
    align-items:start;
  }
  body.page-music .mplayer-coverbox{
    width:170px;
    height:170px;
    border-radius:22px;
  }
  body.page-music .mplayer-title{ font-size:20px; }

  /* ✅ bleibt ohne max-height */
  body.page-music .mplayer-list-panel{ max-height:none; }

  body.page-music .mplayer-full{
    display:grid;
    grid-template-columns: 170px 1fr;
    column-gap:16px;
    row-gap:12px;
  }
  body.page-music .mplayer-full > *{ min-width:0; }

  body.page-music .mplayer-header,
  body.page-music .mplayer-seek,
  body.page-music .mplayer-ctl-row,
  body.page-music .mplayer-action-row,
  body.page-music .utabs,
  body.page-music #panelDesc,
  body.page-music #panelList{
    grid-column: 1 / -1;
  }

  body.page-music .mplayer-chips{
    grid-column: 1;
    margin-top:0;
    grid-template-columns: 1fr;
    align-self:start;
  }
}

@media (max-width: 520px){
  .footer-inner{
    flex-wrap:nowrap;
    align-items:flex-start;
    gap:10px;
  }

  .footer-left{
    flex:1 1 auto;
    min-width:0;
  }

  .footer-title{ display:none; }

  .footer-sub{
    margin-top:0;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    min-width:0;
  }

  .footer-domain{
    order:0;
    font-weight:900;
    color:var(--text);
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }

  .footer-copy{
    order:1;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }

  .footer-sep{ display:none; }

  .footer-right{
    flex:0 0 auto;
    margin-left:auto;
    gap:8px;
    white-space:nowrap;
  }

  .footer-btn{
    padding:8px 10px;
    font-size:13px;
  }
}
@media (max-width: 360px){
  .footer-btn{
    padding:7px 9px;
    font-size:12px;
  }
}

/* Footer v2: Mobile 2-zeilig (oben Buttons, unten Brand+Counter) */
@media (max-width: 520px){
  .footer-inner.footer-layout{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "nav nav"
      "left counter";
    align-items:center;
  }

  /* Alte Mobile-Regeln (Footer v1) ueberschreiben */
  .footer-layout .footer-title{ display:block; }
  .footer-layout .footer-sub{ margin-top:2px; flex-direction:column; align-items:flex-start; gap:2px; }
  .footer-layout .footer-sep,
  .footer-layout .footer-domain{ display:none; }

  .footer-layout .footer-right{ gap:8px; flex-wrap:nowrap; }
  .footer-layout .footer-btn{ padding:7px 10px; font-size:12.5px; }

  .footer-layout .counter3d{ width:118px; height:26px; }
  .footer-layout .counter3d-digits{ font-size:12px; letter-spacing:.16em; }
}

/* =========================================================
   ✅ Player Desktop Rework (Cover/Stats links, Player rechts)
   ========================================================= */

body.page-music .mplayer-full{
  display:block !important;
}

body.page-music .mplayer-inline{
  --mcover:110px;
}
@media (min-width: 901px){
  body.page-music .mplayer-inline{
    --mcover:190px;
  }
}

body.page-music .mplayer-top{
  display:grid;
  grid-template-columns: var(--mcover) minmax(0, 1fr);
  gap:16px;
  align-items:start;
}

body.page-music .mplayer-side{
  width:var(--mcover);
  min-width:0;
}

body.page-music .mplayer-coverbox{
  width:var(--mcover) !important;
  height:var(--mcover) !important;
  border-radius:22px;
}

/* Published 2 Zeilen */
body.page-music .mplayer-published{
  margin-top:10px;
}
body.page-music .mplayer-pub-label{
  color:var(--muted);
  font-size:12px;
  line-height:1.25;
}
body.page-music .mplayer-pub-date{
  margin-top:2px;
  font-size:13px;
}

/* ✅ Veröffentlicht am: IMMER zentriert unter dem Cover (mobil + desktop) */
body.page-music .mplayer-published--side{
  text-align:center;
}

@media (max-width: 520px){
  body.page-music .mplayer-pub-label{ font-size:11px; }
  body.page-music .mplayer-pub-date{ font-size:12px; }
}

@media (min-width: 901px){
  body.page-music .mplayer-published--meta{ display:none !important; }
}
@media (max-width: 900px){
  body.page-music .mplayer-published--meta{ display:none !important; }
  body.page-music .mplayer-published--side{ display:block !important; }
}

/* kleiner Abstand zum Statistik-Bereich */
body.page-music .mplayer-published--side{
  margin-bottom:10px;
}

/* Stats: keine Boxen, nur Textzeilen */
body.page-music .mplayer-chips{
  margin-top:8px;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
}
body.page-music .mchip{
  background:transparent !important;
  border:0 !important;
  padding:6px 0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  display:flex !important;
  justify-content:space-between !important;
  align-items:baseline !important;
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.page-music .mchip:last-child{
  border-bottom:0;
}
body.page-music .mchip-l{
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}
body.page-music .mchip-v{
  font-weight:950;
  font-size:13px;
  white-space:nowrap;
}
@media (max-width: 520px){
  body.page-music .mchip-l{ font-size:11px; }
  body.page-music .mchip-v{ font-size:12px; }
}

@media (min-width: 901px){
  body.page-music .mplayer-seek,
  body.page-music .mplayer-ctl-row,
  body.page-music .mplayer-action-row{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* Controls: Desktop = Gruppe mittig, Volume rechts */
body.page-music .mplayer-ctl-row{
  margin-top:12px;
  display:grid !important;
  grid-template-columns: 1fr 74px;
  gap:10px;
  align-items:stretch;
}
body.page-music .mplayer-ctl-group{
  display:grid;
  grid-template-columns: 74px minmax(160px, 1fr) 74px;
  gap:10px;
  align-items:stretch;
}
@media (min-width: 901px){
  body.page-music .mplayer-ctl-group{
    max-width:540px;
    margin:0 auto;
    grid-template-columns: 74px minmax(220px, 1fr) 74px;
  }
}
body.page-music .mplayer-ctl{
  height:44px !important;
  border-radius:15px !important;
}
body.page-music .mplayer-ctl-primary{
  max-width:260px;
  justify-self:center;
  width:100%;
}

/* ✅ Mobile: Prev / Play / Next / Volume = 4 gleich große Buttons, nix kann mehr raus ragen */
@media (max-width: 900px){
  body.page-music .mplayer-ctl-row{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  /* Gruppe belegt 3 Spalten, innen 3 gleiche Buttons */
  body.page-music .mplayer-ctl-group{
    grid-column: 1 / span 3;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  /* Volume in Spalte 4 */
  body.page-music .uvol-wrap{
    grid-column: 4;
    width:auto !important;
  }

  body.page-music .mplayer-ctl{
    width:100% !important;
    height:44px !important;
    border-radius:15px !important;
    font-size:16px !important;
  }

  /* Play NICHT größer als die anderen */
  body.page-music .mplayer-ctl-primary{
    max-width:none !important;
    width:100% !important;
    justify-self:stretch !important;
  }

  body.page-music .uicon,
  body.page-music .uicon svg{
    width:22px;
    height:22px;
  }
}

/* Download Button kompakter */
body.page-music .mplayer-action-row{
  margin-top:16px !important;
  display:flex !important;
  justify-content:flex-start !important;
  gap:10px;
}
body.page-music .mplayer-act{
  height:44px !important;
  width:auto !important;
  padding:0 14px !important;
  border-radius:16px !important;
}

body.page-music .mplayer-panels{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
body.page-music .upanel.mplayer-subcard{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:12px;
}

body.page-music .upanel.mplayer-subcard .mplayer-desc-block,
body.page-music .upanel.mplayer-subcard .mplayer-list-panel{
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin-top:0 !important;
}

@media (min-width: 901px){
  body.page-music .mplayer-panels{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
    align-items:stretch;
  }

  body.page-music #panelDesc,
  body.page-music #panelList{
    grid-column:auto !important;
  }

  body.page-music .upanel.mplayer-subcard{
    height:100%;
  }

  body.page-music .utabs{
    display:none !important;
  }
}

/* =========================================================
   ✅ Admin / CV / Legacy Forms – fehlende Klassen + Fallback
   (nichts entfernen – nur ergänzen)
   ========================================================= */

/* ---------- Kontaktformular (contact.php) ---------- */
.cform-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:12px;
}
@media (max-width: 900px){
  .cform-grid{ grid-template-columns:1fr; }
}

.cform-row{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cform-help{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

/* Honeypot unsichtbar */
.cform-hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

.cform-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* optionaler Statusbereich */
.cform-status{
  margin-top:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:12px 14px;
  color:var(--text);
}
.cform-status.is-ok{
  border-color:rgba(38,208,124,.35);
  background: linear-gradient(180deg, rgba(38,208,124,.12), rgba(255,255,255,.03));
}
.cform-status.is-err{
  border-color:rgba(255,77,109,.35);
  background: linear-gradient(180deg, rgba(255,77,109,.12), rgba(255,255,255,.03));
}

/* ---------- Fallback: Forms ohne .field/.input Klassen ---------- */
/* sorgt dafür, dass z.B. cv/request.php & Admin-Formulare trotzdem sauber aussehen */
.site-content form label:not(.label){
  display:block;
  margin-top:12px;
  font-weight:850;
  color:var(--text);
}

/* Text-/Email-/Password-/etc Inputs (ohne deine .input Klasse) */
.site-content form input:not([type="hidden"])
  :not([type="checkbox"])
  :not([type="radio"])
  :not([type="range"])
  :not([type="file"])
  :not(.input){
  width:100%;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}

/* Select/textarea (ohne deine Klassen) */
.site-content form select:not(.input),
.site-content form textarea:not(.textarea){
  width:100%;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
.site-content form textarea:not(.textarea){
  min-height:140px;
  resize:vertical;
}

/* Focus wie bei deinen .input/.textarea */
.site-content form input:not([type="hidden"])
  :not([type="checkbox"])
  :not([type="radio"])
  :not([type="range"])
  :not([type="file"])
  :not(.input):focus,
.site-content form select:not(.input):focus,
.site-content form textarea:not(.textarea):focus{
  border-color: rgba(40,215,255,.35);
  box-shadow: 0 0 0 3px rgba(40,215,255,.12);
}

/* File-Input (Admin Uploads etc.) */
.site-content form input[type="file"]{
  width:100%;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:var(--muted);
  outline:none;
}
.site-content form input[type="file"]:focus{
  border-color: rgba(40,215,255,.35);
  box-shadow: 0 0 0 3px rgba(40,215,255,.12);
}

/* Checkbox/Radio optisch passend */
.site-content form input[type="checkbox"],
.site-content form input[type="radio"]{
  accent-color: var(--accent);
}

/* Kleine Hilfetexte in Forms */
.site-content form small,
.site-content form .help,
.site-content form .form-help,
.site-content form .hint{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

/* Buttons in Forms, wenn sie NICHT .btn benutzen */
.site-content form button:not(.btn)
  :not(.mplayer-ctl)
  :not(.mplayer-topbtn)
  :not(.mplayer-act),
.site-content form input[type="submit"]:not(.btn),
.site-content form input[type="button"]:not(.btn){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:11px 14px;
  border-radius:16px;
  text-decoration:none;

  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  color:var(--text);
  font-weight:900;
  letter-spacing:.1px;

  box-shadow: 0 14px 28px rgba(0,0,0,.28);
  cursor:pointer;
  transition: transform .07s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.site-content form button:not(.btn)
  :not(.mplayer-ctl)
  :not(.mplayer-topbtn)
  :not(.mplayer-act):hover,
.site-content form input[type="submit"]:not(.btn):hover,
.site-content form input[type="button"]:not(.btn):hover{
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07));
  border-color: rgba(255,255,255,.22);
}
.site-content form button:not(.btn)
  :not(.mplayer-ctl)
  :not(.mplayer-topbtn)
  :not(.mplayer-act):active,
.site-content form input[type="submit"]:not(.btn):active,
.site-content form input[type="button"]:not(.btn):active{
  transform: translateY(1px);
}
.site-content form button:not(.btn)
  :not(.mplayer-ctl)
  :not(.mplayer-topbtn)
  :not(.mplayer-act):focus-visible,
.site-content form input[type="submit"]:not(.btn):focus-visible,
.site-content form input[type="button"]:not(.btn):focus-visible{
  outline:2px solid rgba(40,215,255,.35);
  outline-offset:3px;
}

/* ---------- Optionale Layout-Helper (falls Admin/CV sie nutzen) ---------- */
.form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 900px){
  .form-grid{ grid-template-columns:1fr; }
}
.form-row{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.form-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Status/Alerts (für Admin-Ausgaben, Validierung etc.) */
.alert{
  margin-top:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:12px 14px;
}
.alert.ok{
  border-color:rgba(38,208,124,.35);
  background: linear-gradient(180deg, rgba(38,208,124,.12), rgba(255,255,255,.03));
}
.alert.err{
  border-color:rgba(255,77,109,.35);
  background: linear-gradient(180deg, rgba(255,77,109,.12), rgba(255,255,255,.03));
}

/* Badges/Tags (Admin Listen) */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color:var(--text);
  font-size:12.5px;
  font-weight:850;
}
.badge.ok{ border-color:rgba(38,208,124,.35); }
.badge.err{ border-color:rgba(255,77,109,.35); }
.badge.muted{ color:var(--muted); }

/* Tabellen: falls Admin eigene Klassen nutzt */
.table,
.admin-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.table th,.table td,
.admin-table th,.admin-table td{
  text-align:left;
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.table th,.admin-table th{
  color:var(--muted);
  font-size:13px;
  font-weight:900;
}
.table tr:hover td,
.admin-table tr:hover td{
  background: rgba(255,255,255,.03);
}

/* =========================================================
   ✅ Missing blocks: Forms / CV / Admin helpers (append-only)
   - Scoped to NOT affect the music player (body.page-music)
   - Fixes plain HTML forms (no .field/.input classes)
   - Fixes <select> white/white issue (e.g. "Anrede")
   - Adds common admin helpers: .table, .badge, .alert, toolbars
   ========================================================= */

/* ---------- Global form fallback (only outside music page) ---------- */
:where(body:not(.page-music)) .site-content form{
  margin-top: 12px;
  color-scheme: dark;
}

:where(body:not(.page-music)) .site-content form .form-grid{
  display:grid;
  gap:12px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px){
  :where(body:not(.page-music)) .site-content form .form-grid.cols-2{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  :where(body:not(.page-music)) .site-content form .form-grid.cols-3{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

:where(body:not(.page-music)) .site-content form .form-row{
  display:flex;
  flex-direction:column;
  gap:8px;
}

:where(body:not(.page-music)) .site-content form label{
  font-weight:850;
  color:var(--text);
}

:where(body:not(.page-music)) .site-content form .help,
:where(body:not(.page-music)) .site-content form small{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

/* ---------- Inputs (plain HTML) ---------- */
:where(body:not(.page-music)) .site-content form
  :is(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    textarea,
    select
  ){
  width:100%;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline:none;
  box-shadow: none;
  color-scheme: dark; /* ✅ helps on some mobile browsers */
}

/* ✅ Select "Anrede" white/white fix + consistent dropdown */
:where(body:not(.page-music)) .site-content form select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(233,240,251,.85) 50%),
    linear-gradient(135deg, rgba(233,240,251,.85) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 12px) 55%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:40px;
}

/* Dropdown options (best-effort; some browsers limit styling) */
:where(body:not(.page-music)) .site-content form option{
  background: #0b1020;
  color: #e9f0fb;
}

:where(body:not(.page-music)) .site-content form textarea{
  min-height: 140px;
  resize: vertical;
}

:where(body:not(.page-music)) .site-content form
  :is(input, textarea, select):focus{
  border-color: rgba(40,215,255,.35);
  box-shadow: 0 0 0 3px rgba(40,215,255,.12);
}

/* Placeholder */
:where(body:not(.page-music)) .site-content form ::placeholder{
  color: rgba(167,179,194,.80);
}

/* Disabled */
:where(body:not(.page-music)) .site-content form
  :is(input, textarea, select, button)[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

/* ---------- Checkboxes / radios ---------- */
:where(body:not(.page-music)) .site-content form input[type="checkbox"],
:where(body:not(.page-music)) .site-content form input[type="radio"]{
  width:18px;
  height:18px;
  accent-color: var(--accent);
}

:where(body:not(.page-music)) .site-content form .checkline{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

:where(body:not(.page-music)) .site-content form .checkline label{
  font-weight:700;
  color:var(--text);
}

/* ---------- File input ---------- */
:where(body:not(.page-music)) .site-content form input[type="file"]{
  width:100%;
  padding:10px 10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
}

/* ---------- Fieldset ---------- */
:where(body:not(.page-music)) .site-content form fieldset{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius:18px;
  padding:12px;
}
:where(body:not(.page-music)) .site-content form legend{
  padding:0 8px;
  color:var(--muted);
  font-weight:900;
  letter-spacing:.1px;
}

/* ---------- Form actions / buttons (fallback if not using .btn) ---------- */
:where(body:not(.page-music)) .site-content form .form-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

:where(body:not(.page-music)) .site-content form
  :is(button, input[type="submit"], input[type="button"], a.button):not(.btn){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:11px 14px;
  border-radius:16px;
  text-decoration:none;

  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  color:var(--text);
  font-weight:900;
  letter-spacing:.1px;

  box-shadow: 0 14px 28px rgba(0,0,0,.28);
  transition: transform .07s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .12s ease;
  cursor:pointer;
}

:where(body:not(.page-music)) .site-content form
  :is(button, input[type="submit"], input[type="button"], a.button):not(.btn):hover{
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07));
  border-color: rgba(255,255,255,.22);
}
:where(body:not(.page-music)) .site-content form
  :is(button, input[type="submit"], input[type="button"], a.button):not(.btn):active{
  transform: translateY(1px);
}
:where(body:not(.page-music)) .site-content form
  :is(button, input[type="submit"], input[type="button"], a.button):not(.btn):focus-visible{
  outline:2px solid rgba(40,215,255,.35);
  outline-offset:3px;
}

/* Primary helper */
:where(body:not(.page-music)) .site-content form .btn-primary,
:where(body:not(.page-music)) .site-content form .button-primary{
  border-color: rgba(40,215,255,.30);
  background: linear-gradient(180deg, rgba(40,215,255,.22), rgba(40,215,255,.10));
}
:where(body:not(.page-music)) .site-content form .btn-danger,
:where(body:not(.page-music)) .site-content form .button-danger{
  border-color: rgba(255,77,109,.35);
  background: linear-gradient(180deg, rgba(255,77,109,.18), rgba(255,77,109,.08));
}

/* ---------- Alerts / messages ---------- */
:where(body:not(.page-music)) .site-content .alert{
  margin-top:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:12px 14px;
  color:var(--text);
}
:where(body:not(.page-music)) .site-content .alert strong{ color:var(--text); }
:where(body:not(.page-music)) .site-content .alert--success{
  border-color: rgba(38,208,124,.30);
  background: rgba(38,208,124,.10);
}
:where(body:not(.page-music)) .site-content .alert--error{
  border-color: rgba(255,77,109,.30);
  background: rgba(255,77,109,.10);
}
:where(body:not(.page-music)) .site-content .alert--info{
  border-color: rgba(40,215,255,.28);
  background: rgba(40,215,255,.08);
}

/* ---------- Admin tables / utility ---------- */
:where(body:not(.page-music)) .site-content .table-wrap,
:where(body:not(.page-music)) .site-content .admin-table-wrap{
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

:where(body:not(.page-music)) .site-content table.table,
:where(body:not(.page-music)) .site-content table.admin-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

:where(body:not(.page-music)) .site-content table.table th,
:where(body:not(.page-music)) .site-content table.table td,
:where(body:not(.page-music)) .site-content table.admin-table th,
:where(body:not(.page-music)) .site-content table.admin-table td{
  text-align:left;
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
}

:where(body:not(.page-music)) .site-content table.table th,
:where(body:not(.page-music)) .site-content table.admin-table th{
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  letter-spacing:.1px;
  white-space:nowrap;
}

:where(body:not(.page-music)) .site-content table.table tr:hover td,
:where(body:not(.page-music)) .site-content table.admin-table tr:hover td{
  background: rgba(255,255,255,.03);
}

/* Badges */
:where(body:not(.page-music)) .site-content .badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color:var(--text);
  font-weight:900;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
:where(body:not(.page-music)) .site-content .badge--ok{
  border-color: rgba(38,208,124,.35);
  background: rgba(38,208,124,.12);
}
:where(body:not(.page-music)) .site-content .badge--bad{
  border-color: rgba(255,77,109,.35);
  background: rgba(255,77,109,.12);
}
:where(body:not(.page-music)) .site-content .badge--info{
  border-color: rgba(40,215,255,.30);
  background: rgba(40,215,255,.10);
}

/* Admin toolbar / action rows */
:where(body:not(.page-music)) .site-content .admin-toolbar,
:where(body:not(.page-music)) .site-content .toolbar{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}

:where(body:not(.page-music)) .site-content .admin-actions,
:where(body:not(.page-music)) .site-content .actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Tiny helpers for "cards inside cards" */
:where(body:not(.page-music)) .site-content .card-sub{
  margin-top:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:12px;
}

/* Contact form helper classes (if you use them) */
:where(body:not(.page-music)) .site-content .cform-grid{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
}
@media (min-width: 720px){
  :where(body:not(.page-music)) .site-content .cform-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  :where(body:not(.page-music)) .site-content .cform-grid .span-2{
    grid-column: 1 / -1;
  }
}
:where(body:not(.page-music)) .site-content .cform-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
:where(body:not(.page-music)) .site-content .cform-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Ensure long values don't break layouts */
:where(body:not(.page-music)) .site-content :is(input, select, textarea){
  min-width:0;
}

/* =========================================================
   ✅ FIX: Fehlende Formular-Control-Styles (Inputs/Textarea/File/Checkbox)
   Problem: Seiten wie cv_request.php & admin/music.php nutzen <input>/<textarea>
   ohne class="input"/"textarea" (teilweise sogar ohne type="...").
   -> Browser-Default (hell). Dieser Block stellt das Dark-Design wieder her.
   ========================================================= */

/* Scope bewusst: Content-Bereich + Cards (damit nix "global" kaputt geht) */
.site-content form,
.card form{
  max-width:100%;
}

/* Standard-Formlayout (sorgt für saubere Abstände bei "plain" Formularen) */
.site-content form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Labels wie deine .label-Optik */
.site-content form label,
.card form label{
  display:block;
  font-weight:850;
  color:var(--text);
}

/* Abstand zwischen Label und Control (wenn sie direkte Geschwister sind) */
.site-content form label[for] + input,
.site-content form label[for] + select,
.site-content form label[for] + textarea,
.card form label[for] + input,
.card form label[for] + select,
.card form label[for] + textarea{
  margin-top:6px;
}

/* ✅ Dunkle Controls – inkl. <input> OHNE type="" */
.site-content form input:not([type]),
.site-content form input[type="text"],
.site-content form input[type="email"],
.site-content form input[type="password"],
.site-content form input[type="url"],
.site-content form input[type="tel"],
.site-content form input[type="number"],
.site-content form input[type="search"],
.site-content form input[type="date"],
.site-content form input[type="time"],
.site-content form input[type="datetime-local"],
.site-content form select,
.site-content form textarea,
.card form input:not([type]),
.card form input[type="text"],
.card form input[type="email"],
.card form input[type="password"],
.card form input[type="url"],
.card form input[type="tel"],
.card form input[type="number"],
.card form input[type="search"],
.card form input[type="date"],
.card form input[type="time"],
.card form input[type="datetime-local"],
.card form select,
.card form textarea{
  width:100%;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* Textarea wie früher */
.site-content form textarea,
.card form textarea{
  min-height:140px;
  resize:vertical;
}

/* Focus wie bei deinen .input/.textarea */
.site-content form input:not([type]):focus,
.site-content form input[type="text"]:focus,
.site-content form input[type="email"]:focus,
.site-content form input[type="password"]:focus,
.site-content form input[type="url"]:focus,
.site-content form input[type="tel"]:focus,
.site-content form input[type="number"]:focus,
.site-content form input[type="search"]:focus,
.site-content form input[type="date"]:focus,
.site-content form input[type="time"]:focus,
.site-content form input[type="datetime-local"]:focus,
.site-content form select:focus,
.site-content form textarea:focus,
.card form input:not([type]):focus,
.card form input[type="text"]:focus,
.card form input[type="email"]:focus,
.card form input[type="password"]:focus,
.card form input[type="url"]:focus,
.card form input[type="tel"]:focus,
.card form input[type="number"]:focus,
.card form input[type="search"]:focus,
.card form input[type="date"]:focus,
.card form input[type="time"]:focus,
.card form input[type="datetime-local"]:focus,
.card form select:focus,
.card form textarea:focus{
  border-color:rgba(40,215,255,.35);
  box-shadow: 0 0 0 3px rgba(40,215,255,.12);
}

/* Placeholder (damit es nicht "zu hell" wirkt) */
.site-content form input::placeholder,
.site-content form textarea::placeholder,
.card form input::placeholder,
.card form textarea::placeholder{
  color:rgba(167,179,194,.70);
}

/* Disabled */
.site-content form input:disabled,
.site-content form select:disabled,
.site-content form textarea:disabled,
.card form input:disabled,
.card form select:disabled,
.card form textarea:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* ✅ Checkbox-Optik + bessere Ausrichtung (u.a. "Download erlauben") */
.site-content form input[type="checkbox"],
.card form input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:var(--accent);
}

/* Checkbox-Zeilen: label ohne [for] (typisch: <label><input type="checkbox"> Text</label>) */
.site-content form label:not([for]) ,
.card form label:not([for]){
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;

  /* leicht "chip"-artig, wirkt aufgeräumter (falls du es neutraler willst: sag kurz Bescheid) */
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}

/* ✅ File-Inputs (Cover/Audio Upload in admin/music.php) */
.site-content form input[type="file"],
.card form input[type="file"]{
  width:100%;
  padding:10px 12px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color:var(--muted);
}

.site-content form input[type="file"]::file-selector-button,
.card form input[type="file"]::file-selector-button{
  margin-right:10px;
  padding:9px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}
.site-content form input[type="file"]::file-selector-button:hover,
.card form input[type="file"]::file-selector-button:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07));
  border-color:rgba(255,255,255,.22);
}

/* Optional Helper (falls du im Admin 2-Spalten willst): */
.form-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (max-width: 900px){
  .form-grid{ grid-template-columns:1fr; }
}
.form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:6px;
}

/* =========================================================
   ✅ CV Request Form – modern, schmaler Desktop, 1-spaltig mobil
   (append-only)
   ========================================================= */

.cv-request{
  /* Form nicht “endlos breit” wirken lassen */
}

.cv-request .cv-form{
  max-width: 860px;     /* Desktop angenehmer */
  margin: 0 auto;       /* zentriert im Content */
}

.cv-request .cv-subcard{
  border-radius: 18px;
}

.cv-request .cv-subhead{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}

.cv-request .cv-subtitle{
  font-weight:950;
  letter-spacing:.12px;
  font-size:15px;
}

.cv-request .cv-grid{
  display:grid;
  gap:14px;
  grid-template-columns: 1fr; /* mobile default */
}

.cv-request .cv-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

/* Desktop 2/3 Spalten */
@media (min-width: 900px){
  .cv-request .cv-grid.cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cv-request .cv-grid.cols-3{
    grid-template-columns: 140px repeat(2, minmax(0, 1fr));
  }
  .cv-request .cv-grid .span-2{
    grid-column: 1 / -1;
  }
}

/* VAT one-field look (prefix + input) */
.cv-request .vat-row{
  display:flex;
  align-items:center;
  gap:10px;

  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding:10px 12px;
}

.cv-request .vat-prefix{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;

  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight:950;
  letter-spacing:.14px;
  min-width:52px;
  flex:0 0 auto;
}

.cv-request .vat-row input{
  border:0 !important;
  background: transparent !important;
  padding:0 !important;
  outline:none !important;
  box-shadow:none !important;
  min-width:0;
}

/* Checkbox line: clean & readable */
.cv-request .cv-checkline{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.cv-request .cv-checkline input[type="checkbox"]{
  margin-top:2px;
  width:18px;
  height:18px;
}

.cv-request .cv-link{
  color: var(--accent);
  text-decoration:none;
}
.cv-request .cv-link:hover{
  text-decoration:underline;
}

/* Action row */
.cv-request .cv-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Make alerts look consistent here */
.cv-request .alert{
  margin-top:0;
  border-radius:16px;
}
.cv-request .alert--success{
  border-color: rgba(38,208,124,.30);
  background: rgba(38,208,124,.10);
}
.cv-request .alert--error{
  border-color: rgba(255,77,109,.30);
  background: rgba(255,77,109,.10);
}
.cv-request .alert--info{
  border-color: rgba(40,215,255,.28);
  background: rgba(40,215,255,.08);
}

/* =========================================================
   ✅ Admin: Checkbox (Download erlauben) optisch sauber zentrieren
   - override inline justify-content (admin/music.php)
   ========================================================= */
.site-content label.form-check{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important; /* gewünschte Zentrierung */
  gap:10px !important;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}

/* ✅ Safety: Wenn global Downloads AUS sind, niemals Download-UI zeigen */
#playerRoot[data-dl-global="0"] #uDownload,
#playerRoot[data-dl-global="0"] #uDlChip{
  display:none !important;
}

/* ===============================
   Cookie Consent (Modal)
   =============================== */
html.consent-pending,
html.consent-open,
html.consent-pending body,
html.consent-open body{
  overflow:hidden;
}

html.consent-pending .app{
  pointer-events:none;
  user-select:none;
  filter: blur(1.2px);
  opacity:.25;
}

.consent-backdrop{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.72);
  z-index:20000;
}
.consent-backdrop.open{ display:flex; }

.consent-modal{
  width:min(720px, 100%);
  border-radius:var(--r2);
  background:rgba(11,16,32,.92);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow2);
  padding:18px 18px 14px;
}

.consent-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}

.consent-kicker{
  font-size:.85rem;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.consent-x{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
}

.consent-text{ margin:0 0 14px; }

.consent-cats{
  display:grid;
  gap:12px;
  margin:0 0 14px;
}

.consent-cat{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:12px 12px;
}

.consent-toggle{ cursor:pointer; }

.consent-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.consent-name{ font-weight:700; }
.consent-desc{ font-size:.95rem; color:var(--muted); margin-top:2px; }

.consent-pill{
  font-size:.85rem;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  white-space:nowrap;
}

.consent-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin:0 0 10px;
}

.consent-links{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  color:var(--muted);
  font-size:.95rem;
}

.consent-switch{
  position:relative;
  width:54px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.consent-switch input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.consent-switch > span{
  width:54px;
  height:30px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  position:relative;
  transition:background .18s ease, border-color .18s ease;
}

.consent-switch > span:before{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:24px;
  height:24px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  transition:transform .18s ease;
}

.consent-switch input:checked + span{
  background:rgba(40,215,255,.20);
  border-color:rgba(40,215,255,.35);
}

.consent-switch input:checked + span:before{
  transform:translateX(24px);
}

@media (max-width:520px){
  .consent-actions{ justify-content:stretch; }
  .consent-actions .btn{ width:100%; }
}

.footer-title{
  font-weight:800;
  letter-spacing:.12em;
  text-transform: lowercase;
  text-shadow: 0 0 10px rgba(40,215,255,.22), 0 0 18px rgba(138,92,255,.14);
}