
/* =====================================================================
   Videoseite, Stil "Label-Katalog", wie Musik, Buecher und Podcast.

   Jede Regel traegt #vp-root und !important. Nicht aus Uebermut,
   sondern weil die globale style.css sonst durchschlaegt. Das war beim
   Umbau im April schon so und bleibt so.

   Leser sind zwischen 45 und 85: Grundschrift 18 px, hoher Kontrast,
   grosse Klickflaechen, nichts unter 0.85 rem.

   Farbregel wie ueberall: Tuerkis gehoert dem, was abspielt oder Geld
   kostet. Sterne sind gold, weil sie melden statt zu verkaufen.

   WICHTIG: Kein <header>, <footer> oder <nav> im Seiteninhalt. Die
   globale style.css klebt jedes dieser Elemente oben fest und legt es
   ueber das Aufklappmenue im Seitenkopf.
   ===================================================================== */

/* Die alte Regel "main{padding:0}" ist am 23.09.2026 entfallen.
   Der Seitenverlauf soll rundherum sichtbar bleiben. */
#vp-root{
  --grund:transparent;
  --text:var(--tf-text,#FFFFFF);
  --leise:var(--tf-leise,#B6C4D4);
  --linie:var(--tf-linie,rgba(255,255,255,.12));
  --kasse:var(--tf-kasse,#00FFFF);
  --stern:var(--tf-gold,#FFD700);
  width:100% !important;
  background:var(--grund) !important;
  color:var(--text) !important;
  font-family:var(--tf-schrift,'Poppins',Arial,sans-serif) !important;
  font-size:18px !important;
  line-height:1.65 !important;
  text-align:left !important;
  letter-spacing:normal !important;
}
#vp-root *{box-sizing:border-box !important;letter-spacing:normal !important}
#vp-root h1,#vp-root h2,#vp-root h3{
  font-family:inherit !important;text-transform:none !important;text-shadow:none !important;
  animation:none !important;background:none !important;
  -webkit-text-fill-color:currentColor !important;letter-spacing:-.01em !important;
}
#vp-root header,#vp-root footer,#vp-root nav{
  position:static !important;z-index:auto !important;top:auto !important;
}
#vp-root .vp-container{
  max-width:1280px !important;margin:0 auto !important;
  padding:0 clamp(16px,4vw,32px) !important;
}
#vp-root .vp-view{width:100% !important}

/* ================== Aufmacher ================== */
#vp-root .vp-hero{
  position:relative !important;width:100% !important;
  min-height:clamp(360px,54vh,560px) !important;
  display:flex !important;align-items:flex-end !important;
  border-bottom:1px solid var(--linie) !important;
  overflow:hidden !important;
}
/* ACHTUNG: In diesem Markup steht der Text INNERHALB von .vp-hero-bg.
   Ein filter wirkt immer auch auf alle Kindelemente, eine Abdunklung
   hier wuerde also Ueberschrift und Knopf mitdimmen. Abgedunkelt wird
   deshalb ausschliesslich ueber den Schleier darueber. */
#vp-root .vp-hero-bg{
  position:absolute !important;inset:0 !important;
  background-size:cover !important;background-position:center !important;
}
#vp-root .vp-hero-overlay{
  position:absolute !important;inset:0 !important;z-index:1 !important;
  background:
    linear-gradient(180deg,rgba(11,11,15,.25) 0%,rgba(11,11,15,0) 35%,rgba(11,11,15,.78) 90%,var(--grund) 100%),
    linear-gradient(90deg,rgba(11,11,15,.85) 0%,rgba(11,11,15,.4) 52%,rgba(11,11,15,.08) 100%) !important;
}
#vp-root .vp-hero-video{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;object-fit:cover !important;
  display:none !important;background:#000 !important;z-index:3 !important;
}
#vp-root .vp-hero-video.active{display:block !important}
#vp-root .vp-hero-content{
  position:relative !important;z-index:2 !important;
  width:100% !important;max-width:1280px !important;margin:0 auto !important;
  padding:clamp(2rem,5vw,3.4rem) clamp(16px,4vw,32px) !important;
}
#vp-root .vp-hero-badge{
  display:inline-block !important;margin:0 0 1rem !important;
  background:var(--text) !important;color:var(--grund) !important;
  border:0 !important;border-radius:0 !important;
  font-size:.74rem !important;font-weight:600 !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;
  padding:.32rem .72rem !important;
}
#vp-root .vp-hero-title{
  margin:0 !important;font-size:clamp(2rem,5vw,3.6rem) !important;
  font-weight:500 !important;line-height:1.05 !important;color:var(--text) !important;
}
#vp-root .vp-hero-meta{
  margin:.9rem 0 0 !important;font-size:1rem !important;color:var(--leise) !important;
  font-variant-numeric:tabular-nums !important;
}
#vp-root .vp-dot{margin:0 .5rem !important;opacity:.5 !important}
#vp-root .vp-hero-play-btn{
  margin-top:1.6rem !important;font:inherit !important;
  font-size:1.02rem !important;font-weight:500 !important;
  background:var(--kasse) !important;color:#07131A !important;
  border:1px solid var(--kasse) !important;border-radius:0 !important;
  padding:.68rem 1.8rem !important;cursor:pointer !important;
  transition:background .2s,color .2s !important;
}
#vp-root .vp-hero-play-btn:hover{background:transparent !important;color:var(--kasse) !important}

/* ================== MAXR-Band ================== */
#vp-root .vp-maxr-section{
  position:relative !important;width:100% !important;
  padding:clamp(2.6rem,5vw,4rem) 0 !important;
  border-bottom:1px solid var(--linie) !important;overflow:hidden !important;
}
#vp-root .vp-maxr-bg{
  position:absolute !important;inset:0 !important;
  background-size:cover !important;background-position:center !important;
  filter:brightness(.5) !important;
}
#vp-root .vp-maxr-section::after{
  content:"" !important;position:absolute !important;inset:0 !important;z-index:1 !important;
  background:linear-gradient(90deg,rgba(11,11,15,.8) 0%,rgba(11,11,15,.12) 48%,rgba(11,11,15,.55) 100%) !important;
  pointer-events:none !important;
}
#vp-root .vp-maxr-fade-left,
#vp-root .vp-maxr-fade-right{
  position:absolute !important;top:0 !important;bottom:0 !important;width:28% !important;
}
#vp-root .vp-maxr-fade-left{left:0 !important;background:linear-gradient(90deg,var(--grund),transparent) !important}
#vp-root .vp-maxr-fade-right{right:0 !important;background:linear-gradient(270deg,var(--grund),transparent) !important}
#vp-root .vp-maxr-content{
  position:relative !important;z-index:2 !important;
  max-width:1280px !important;margin:0 auto !important;
  padding:0 clamp(16px,4vw,32px) !important;
}
#vp-root .vp-artist-title-big{
  font-size:clamp(2.2rem,6vw,4.2rem) !important;font-weight:500 !important;
  line-height:1 !important;margin:0 !important;color:var(--text) !important;
}

/* ================== Abschnittskoepfe ================== */
#vp-root .vp-section-head{margin-bottom:1.4rem !important}
#vp-root .vp-section-title{
  margin:0 !important;font-size:clamp(1.5rem,3.4vw,2.2rem) !important;
  font-weight:500 !important;line-height:1.15 !important;color:var(--text) !important;
}
#vp-root .vp-section-sub{
  margin:.5rem 0 0 !important;font-size:1rem !important;color:var(--leise) !important;
  line-height:1.6 !important;max-width:60ch !important;
}

/* ================== Kategorie-Knoepfe ================== */
#vp-root .vp-cat-pills-wrap{margin-top:1.6rem !important;overflow-x:auto !important}
#vp-root .vp-cat-pills{display:flex !important;flex-wrap:wrap !important;gap:.6rem 1.4rem !important}
#vp-root .vp-cat-pill{
  display:inline-flex !important;align-items:baseline !important;gap:.5rem !important;
  font:inherit !important;font-size:1rem !important;
  background:transparent !important;color:var(--text) !important;
  border:0 !important;border-bottom:2px solid transparent !important;border-radius:0 !important;
  padding:.35rem 0 !important;cursor:pointer !important;white-space:nowrap !important;
  transition:color .2s,border-color .2s !important;
}
#vp-root .vp-cat-pill:hover{color:var(--kasse) !important;border-bottom-color:var(--kasse) !important}
#vp-root .vp-cat-pill-count{
  font-size:.82rem !important;color:var(--leise) !important;
  font-variant-numeric:tabular-nums !important;
}

/* ================== Die drei anderen Kuenstler ================== */
#vp-root .vp-other-artists{padding:clamp(2.6rem,5vw,4rem) 0 !important}
#vp-root .vp-artists-grid{
  display:grid !important;grid-template-columns:repeat(3,1fr) !important;
  gap:clamp(1rem,2vw,1.6rem) !important;
}
#vp-root .vp-artist-card{
  position:relative !important;min-height:200px !important;
  border:1px solid rgba(0,255,255,.18) !important;border-radius:12px !important;
  overflow:hidden !important;cursor:pointer !important;
  display:flex !important;align-items:flex-end !important;
  transition:border-color .3s ease,box-shadow .3s ease !important;
}
#vp-root .vp-artist-card:hover{
  border-color:rgba(0,255,255,.5) !important;
  box-shadow:0 4px 24px rgba(0,255,255,.12) !important;
}
#vp-root .vp-artist-card-bg{
  position:absolute !important;inset:0 !important;
  background-size:cover !important;background-position:center !important;
  filter:brightness(.72) !important;
}
#vp-root .vp-artist-card-overlay{
  position:absolute !important;inset:0 !important;
  background:linear-gradient(180deg,rgba(11,11,15,0) 30%,rgba(11,11,15,.55) 65%,rgba(11,11,15,.92) 100%) !important;
}
#vp-root .vp-artist-card-inner{
  position:relative !important;z-index:2 !important;padding:1.2rem 1.3rem !important;width:100% !important;
}
#vp-root .vp-artist-card-name{
  margin:0 !important;font-size:1.25rem !important;font-weight:500 !important;color:var(--text) !important;
}
#vp-root .vp-artist-card-count{
  display:block !important;margin-top:.3rem !important;
  font-size:.92rem !important;color:var(--leise) !important;
  font-variant-numeric:tabular-nums !important;
}

/* ================== Kuenstleransicht ================== */
#vp-root .vp-pills-wrap{padding-top:clamp(2rem,4vw,3rem) !important;overflow-x:auto !important}
#vp-root .vp-pills{display:flex !important;flex-wrap:wrap !important;gap:1.6rem !important}
#vp-root .vp-pill{
  font:inherit !important;font-size:1.02rem !important;
  background:transparent !important;color:var(--leise) !important;
  border:0 !important;border-bottom:2px solid transparent !important;border-radius:0 !important;
  padding:.35rem 0 !important;cursor:pointer !important;white-space:nowrap !important;
  transition:color .2s,border-color .2s !important;
}
#vp-root .vp-pill:hover{color:var(--text) !important}
#vp-root .vp-pill.active{color:var(--text) !important;border-bottom-color:var(--text) !important}

#vp-root .vp-artist-header{
  display:flex !important;flex-wrap:wrap !important;gap:1rem 1.6rem !important;
  align-items:baseline !important;justify-content:space-between !important;
  margin-top:1.8rem !important;padding-bottom:1.2rem !important;
  border-bottom:1px solid var(--linie) !important;
}
#vp-root .vp-artist-name{
  margin:0 !important;font-size:clamp(1.9rem,5vw,3.2rem) !important;
  font-weight:500 !important;line-height:1 !important;color:var(--text) !important;
}
#vp-root .vp-back-btn{
  font:inherit !important;font-size:.98rem !important;
  background:transparent !important;color:var(--leise) !important;
  border:0 !important;border-bottom:1px solid var(--linie) !important;border-radius:0 !important;
  padding:.35rem 0 !important;cursor:pointer !important;transition:color .2s,border-color .2s !important;
}
#vp-root .vp-back-btn:hover{color:var(--text) !important;border-bottom-color:var(--text) !important}

#vp-root .vp-tabs-wrap{margin-top:1.4rem !important;overflow-x:auto !important}
#vp-root .vp-tabs{display:flex !important;flex-wrap:wrap !important;gap:.6rem 1.4rem !important}
#vp-root .vp-tabs button{
  font:inherit !important;font-size:1rem !important;
  background:transparent !important;color:var(--leise) !important;
  border:0 !important;border-bottom:2px solid transparent !important;border-radius:0 !important;
  padding:.35rem 0 !important;cursor:pointer !important;white-space:nowrap !important;
  transition:color .2s,border-color .2s !important;
}
#vp-root .vp-tabs button:hover{color:var(--text) !important}
#vp-root .vp-tabs button.active{color:var(--text) !important;border-bottom-color:var(--text) !important}

/* ================== Das Regal ================== */
#vp-root .vp-grid{
  display:grid !important;grid-template-columns:repeat(3,1fr) !important;
  gap:clamp(1.4rem,2.4vw,2.2rem) !important;
  padding:clamp(1.8rem,4vw,2.6rem) 0 clamp(3rem,6vw,4.5rem) !important;
}
#vp-root .vp-card{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(0,255,255,.18) !important;
  border-radius:12px !important;overflow:hidden !important;cursor:pointer !important;
  transition:border-color .3s ease,box-shadow .3s ease !important;
  pointer-events:auto !important;
}
#vp-root .vp-card:hover{
  transform:none !important;
  border-color:rgba(0,255,255,.5) !important;
  box-shadow:0 4px 24px rgba(0,255,255,.12) !important;
}
#vp-root .vp-card-thumb{
  position:relative !important;width:100% !important;
  background:#131A26 !important;overflow:hidden !important;
}
#vp-root .vp-card-thumb.landscape{aspect-ratio:16/9 !important}
#vp-root .vp-card-thumb.portrait{aspect-ratio:16/9 !important}
#vp-root .vp-card-thumb img{
  width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;
}
#vp-root .vp-card-noimg{
  position:absolute !important;inset:0 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  color:#8195A9 !important;font-size:.9rem !important;
}
#vp-root .vp-card-play{
  position:absolute !important;inset:0 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  background:rgba(11,11,15,0) !important;opacity:0 !important;
  transition:opacity .25s ease,background .25s ease !important;
}
#vp-root .vp-card:hover .vp-card-play{opacity:1 !important;background:rgba(11,11,15,.35) !important}
#vp-root .vp-card-play > *{
  display:flex !important;align-items:center !important;justify-content:center !important;
  width:58px !important;height:58px !important;
  border:1px solid var(--text) !important;border-radius:0 !important;
  background:rgba(11,11,15,.55) !important;color:var(--text) !important;
}
#vp-root .vp-card-preview{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;object-fit:cover !important;
  opacity:0 !important;transition:opacity .3s !important;
}
#vp-root .vp-card-preview.vp-visible{opacity:1 !important}
/* Blende zwischen Standbild und Vorschau. Das JavaScript schaltet
   dafuer vp-fading auf die Huelle. */
#vp-root .vp-card-fade{
  position:absolute !important;inset:0 !important;z-index:3 !important;
  background:#000 !important;opacity:0 !important;pointer-events:none !important;
  transition:opacity .45s ease !important;
}
#vp-root .vp-card-thumb.vp-fading .vp-card-fade{opacity:1 !important}
/* Waehrend die Vorschau laeuft, verschwindet das Abspielzeichen */
#vp-root .vp-card.vp-previewing .vp-card-play{opacity:0 !important}
#vp-root .vp-card-dur{
  position:absolute !important;right:.55rem !important;bottom:.55rem !important;z-index:4 !important;
  background:rgba(11,11,15,.85) !important;color:var(--text) !important;
  border:1px solid var(--linie) !important;border-radius:0 !important;
  font-size:.8rem !important;padding:.15rem .45rem !important;
  font-variant-numeric:tabular-nums !important;
}
#vp-root .vp-card-info{padding:1rem 1.1rem 1.2rem !important}
#vp-root .vp-card-title{
  margin:0 !important;font-size:1.06rem !important;font-weight:500 !important;
  line-height:1.35 !important;color:var(--text) !important;
}
#vp-root .vp-card-meta{
  margin:.4rem 0 0 !important;font-size:.9rem !important;color:var(--leise) !important;
  font-variant-numeric:tabular-nums !important;
}
#vp-root .vp-empty{padding:2.4rem 0 !important;color:var(--leise) !important;font-size:1rem !important}

/* ================== Fenster ================== */
#vp-root .vp-modal{
  position:fixed !important;inset:0 !important;z-index:2000 !important;display:none !important;
  align-items:center !important;justify-content:center !important;padding:1rem !important;
}
#vp-root .vp-modal.vp-open{display:flex !important}
#vp-root .vp-modal-backdrop{position:absolute !important;inset:0 !important;background:rgba(6,6,9,.92) !important}
#vp-root .vp-modal-box{
  position:relative !important;z-index:2 !important;
  width:100% !important;max-width:1000px !important;max-height:92vh !important;overflow:auto !important;
  background:#131A26 !important;border:1px solid var(--linie) !important;border-radius:12px !important;
  box-shadow:0 30px 70px rgba(0,0,0,.7) !important;
}
#vp-root .vp-modal-close{
  position:absolute !important;top:.7rem !important;right:.7rem !important;z-index:5 !important;
  width:42px !important;height:42px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  font:inherit !important;font-size:1.5rem !important;line-height:1 !important;
  background:rgba(11,11,15,.7) !important;color:var(--text) !important;
  border:1px solid var(--linie) !important;border-radius:0 !important;cursor:pointer !important;
  transition:border-color .2s,color .2s,transform .3s cubic-bezier(.2,.9,.3,1.3) !important;
}
#vp-root .vp-modal-close:hover{
  border-color:var(--kasse) !important;color:var(--kasse) !important;transform:rotate(90deg) !important;
}
#vp-root .vp-modal-video{position:relative !important;width:100% !important;background:#000 !important}
#vp-root .vp-modal-video video{width:100% !important;display:block !important;max-height:70vh !important;background:#000 !important}
#vp-root .vp-modal-body{padding:clamp(1.2rem,3vw,2rem) !important}
#vp-root .vp-modal-body h2{
  margin:0 0 .5rem !important;font-size:clamp(1.2rem,3vw,1.7rem) !important;
  font-weight:500 !important;line-height:1.3 !important;color:var(--text) !important;
}
#vp-root .vp-modal-meta{
  font-size:.95rem !important;color:var(--leise) !important;
  font-variant-numeric:tabular-nums !important;
}

/* Abspielknopf ueber dem Bild */
#vp-root .vp-play-overlay{
  position:absolute !important;inset:0 !important;z-index:4 !important;
  display:none !important;align-items:center !important;justify-content:center !important;
  cursor:pointer !important;pointer-events:auto !important;
  background:radial-gradient(circle at center,rgba(11,11,15,.45) 0%,rgba(11,11,15,.2) 60%,transparent 100%) !important;
}
#vp-root .vp-play-overlay.vp-show{display:flex !important}
#vp-root .vp-play-btn-big{
  display:flex !important;align-items:center !important;justify-content:center !important;
  width:84px !important;height:84px !important;
  background:var(--kasse) !important;color:#07131A !important;
  border:0 !important;border-radius:0 !important;
  transition:transform .2s ease !important;
}
#vp-root .vp-play-overlay:hover .vp-play-btn-big{transform:scale(1.08) !important}

/* Ende der Vorschau */
#vp-root .vp-preview-end-overlay{
  position:absolute !important;inset:0 !important;z-index:4 !important;display:none !important;
  align-items:center !important;justify-content:center !important;
  padding:clamp(1.2rem,3vw,2rem) !important;
  background:rgba(11,11,15,.94) !important;
}
#vp-root .vp-preview-end-overlay.vp-show{display:flex !important}
#vp-root .vp-peo-inner{max-width:44ch !important;text-align:left !important}
#vp-root .vp-peo-icon{font-size:1.7rem !important;line-height:1 !important;margin-bottom:.7rem !important}
#vp-root .vp-peo-title{
  margin:0 0 .5rem !important;font-size:clamp(1.15rem,3vw,1.5rem) !important;
  font-weight:500 !important;color:var(--text) !important;
}
#vp-root .vp-peo-text{margin:0 0 1.3rem !important;font-size:1rem !important;color:#B6C4D4 !important;line-height:1.7 !important}
#vp-root .vp-peo-btn{
  display:inline-block !important;font:inherit !important;font-size:1rem !important;font-weight:500 !important;
  background:var(--kasse) !important;color:#07131A !important;
  border:1px solid var(--kasse) !important;border-radius:0 !important;
  padding:.62rem 1.6rem !important;text-decoration:none !important;
  transition:background .2s,color .2s !important;
}
#vp-root .vp-peo-btn:hover{background:transparent !important;color:var(--kasse) !important}
#vp-root .vp-peo-login{
  display:inline-block !important;margin-left:.8rem !important;font-size:1rem !important;
  color:var(--text) !important;text-decoration:none !important;
  border:1px solid var(--linie) !important;border-radius:0 !important;padding:.62rem 1.6rem !important;
}
#vp-root .vp-peo-login:hover{border-color:var(--text) !important}
#vp-root .vp-peo-replay{
  display:block !important;margin-top:1.1rem !important;
  font:inherit !important;font-size:.95rem !important;
  background:none !important;color:var(--leise) !important;
  border:0 !important;border-bottom:1px solid var(--linie) !important;border-radius:0 !important;
  padding:.3rem 0 !important;cursor:pointer !important;
}
#vp-root .vp-peo-replay:hover{color:var(--text) !important;border-bottom-color:var(--text) !important}

/* Bezahlschranke unter dem Bild */
#vp-root .vp-modal-paywall{margin-top:1.4rem !important}
#vp-root .vp-pw-title{
  margin:0 0 .4rem !important;font-size:1.05rem !important;font-weight:500 !important;color:var(--text) !important;
}
#vp-root .vp-pw-text{margin:0 0 1rem !important;font-size:.98rem !important;color:var(--leise) !important;line-height:1.65 !important}
#vp-root .vp-pw-btn{
  display:inline-block !important;font-size:1rem !important;font-weight:500 !important;text-decoration:none !important;
  background:var(--kasse) !important;color:#07131A !important;
  border:1px solid var(--kasse) !important;border-radius:0 !important;padding:.6rem 1.5rem !important;
}
#vp-root .vp-pw-btn:hover{background:transparent !important;color:var(--kasse) !important}

/* ================== Bewertungen ================== */
#vp-root .vp-modal-rating{
  margin-top:1.4rem !important;padding-top:1.2rem !important;
  border-top:1px solid var(--linie) !important;
}
#vp-root .vp-rating,#vp-root .vp-rating-display{
  display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:.7rem 1.2rem !important;
}
#vp-root .vp-stars-avg{color:var(--stern) !important;font-size:1.1rem !important;letter-spacing:.06em !important}
#vp-root .vp-rating-num{font-size:1.05rem !important;font-weight:500 !important;color:var(--text) !important;font-variant-numeric:tabular-nums !important}
#vp-root .vp-rating-count{font-size:.95rem !important;color:var(--leise) !important}
#vp-root .vp-rate-btn{
  font:inherit !important;font-size:.98rem !important;
  background:none !important;color:var(--text) !important;
  border:0 !important;border-bottom:1px solid var(--linie) !important;border-radius:0 !important;
  padding:.4rem 0 !important;cursor:pointer !important;transition:border-color .2s !important;
}
#vp-root .vp-rate-btn:hover{border-bottom-color:var(--text) !important}
#vp-root .vp-rating-login-hint{font-size:.95rem !important;color:var(--leise) !important}

/* Sternwahl im Bewertungsfenster */
#vp-root .vp-rating-modal-box{max-width:560px !important}
#vp-root .vp-rating-modal-body{padding:clamp(1.4rem,3vw,2.2rem) !important}
#vp-root .vp-rating-modal-body h3{
  margin:0 0 .8rem !important;font-size:1.3rem !important;font-weight:500 !important;color:var(--text) !important;
}
#vp-root .vp-rating-modal-video{font-size:.95rem !important;color:var(--leise) !important;margin-bottom:1rem !important}
#vp-root .vp-rating-modal-stars{display:flex !important;gap:.5rem !important;margin:.6rem 0 !important}
#vp-root .vp-star-big{
  font-size:2.3rem !important;line-height:1 !important;cursor:pointer !important;
  color:#8195A9 !important;background:none !important;border:0 !important;padding:0 !important;
  transition:color .15s,transform .15s !important;
}
#vp-root .vp-star-big.active,
#vp-root .vp-star-big.hover-active,
#vp-root .vp-star-big:hover{color:var(--stern) !important}
#vp-root .vp-star-big:hover{transform:scale(1.08) !important}
#vp-root .vp-rating-modal-current{font-size:.95rem !important;color:var(--leise) !important;min-height:1.5em !important}
#vp-root .vp-rating-comment-wrap{margin-top:1.2rem !important}
#vp-root .vp-rating-comment-label{display:block !important;font-size:.9rem !important;color:var(--leise) !important;margin-bottom:.4rem !important}
#vp-root .vp-rating-comment{
  width:100% !important;font:inherit !important;font-size:1rem !important;color:var(--text) !important;
  background:transparent !important;border:1px solid var(--linie) !important;border-radius:0 !important;
  padding:.7rem .8rem !important;resize:vertical !important;
}
#vp-root .vp-rating-comment:focus{outline:none !important;border-color:var(--kasse) !important}
#vp-root .vp-rating-comment-counter{margin-top:.35rem !important;font-size:.85rem !important;color:#8195A9 !important;font-variant-numeric:tabular-nums !important}
#vp-root .vp-rating-modal-actions{display:flex !important;flex-wrap:wrap !important;gap:.9rem !important;margin-top:1.3rem !important}
#vp-root .vp-rating-btn-save{
  font:inherit !important;font-size:1rem !important;font-weight:500 !important;
  background:var(--kasse) !important;color:#07131A !important;
  border:1px solid var(--kasse) !important;border-radius:0 !important;
  padding:.62rem 1.6rem !important;cursor:pointer !important;transition:background .2s,color .2s !important;
}
#vp-root .vp-rating-btn-save:hover{background:transparent !important;color:var(--kasse) !important}
#vp-root .vp-rating-btn-save:disabled{opacity:.4 !important;cursor:default !important}
#vp-root .vp-rating-btn-cancel{
  font:inherit !important;font-size:1rem !important;
  background:transparent !important;color:var(--text) !important;
  border:1px solid var(--linie) !important;border-radius:0 !important;
  padding:.62rem 1.6rem !important;cursor:pointer !important;transition:border-color .2s !important;
}
#vp-root .vp-rating-btn-cancel:hover{border-color:var(--text) !important}
#vp-root .vp-rating-modal-msg{margin-top:.9rem !important;font-size:.95rem !important;color:var(--leise) !important}

/* ================== Kommentare ================== */
#vp-root .vp-comments{margin-top:1.4rem !important;padding-top:1.2rem !important;border-top:1px solid var(--linie) !important}
#vp-root .vp-comments-header{
  font-size:.8rem !important;font-weight:600 !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;color:var(--leise) !important;
  margin-bottom:1rem !important;
}
#vp-root .vp-comments-total{color:var(--text) !important;font-variant-numeric:tabular-nums !important}
#vp-root .vp-comments-list{display:grid !important;gap:1.2rem !important}
#vp-root .vp-comments-loading,#vp-root .vp-comments-empty{font-size:.98rem !important;color:var(--leise) !important}
#vp-root .vp-comment-head{display:flex !important;flex-wrap:wrap !important;align-items:baseline !important;gap:.5rem .9rem !important}
#vp-root .vp-comment-user{font-size:.98rem !important;color:var(--text) !important}
#vp-root .vp-comment-date{font-size:.85rem !important;color:#8195A9 !important;font-variant-numeric:tabular-nums !important}
#vp-root .vp-comment-stars{color:var(--stern) !important;letter-spacing:.06em !important;margin-left:auto !important}
#vp-root .vp-comment-text{margin-top:.5rem !important;font-size:1rem !important;color:#B6C4D4 !important;line-height:1.7 !important}
#vp-root .vp-comment-you{
  border-left:2px solid var(--kasse) !important;padding-left:.9rem !important;
  background:transparent !important;
}
#vp-root .vp-comments-footer{margin-top:1.2rem !important}
#vp-root .vp-comments-more{
  font:inherit !important;font-size:.98rem !important;
  background:none !important;color:var(--text) !important;
  border:0 !important;border-bottom:1px solid var(--linie) !important;border-radius:0 !important;
  padding:.4rem 0 !important;cursor:pointer !important;transition:border-color .2s !important;
}
#vp-root .vp-comments-more:hover{border-bottom-color:var(--text) !important}

/* ================== Schmale Geraete ================== */
@media (max-width:1099px){
  #vp-root .vp-grid{grid-template-columns:repeat(2,1fr) !important}
  #vp-root .vp-artists-grid{grid-template-columns:repeat(3,1fr) !important}
}
@media (max-width:767px){
  #vp-root .vp-grid{grid-template-columns:repeat(2,1fr) !important;gap:1rem !important}
  #vp-root .vp-artists-grid{grid-template-columns:1fr !important}
  #vp-root .vp-artist-card{min-height:150px !important}
  #vp-root .vp-hero{min-height:0 !important;align-items:stretch !important}
  #vp-root .vp-hero-overlay{
    background:linear-gradient(180deg,rgba(11,11,15,.5) 0%,rgba(11,11,15,.95) 60%,var(--grund) 100%) !important;
  }
  #vp-root .vp-modal{padding:0 !important}
  #vp-root .vp-modal-box{max-width:100% !important;max-height:100vh !important;border-radius:0 !important;border:0 !important}
  #vp-root .vp-artist-header{flex-direction:column !important;align-items:flex-start !important}
}
@media (max-width:479px){
  #vp-root .vp-grid{grid-template-columns:1fr !important}
}
@media (prefers-reduced-motion:reduce){
  #vp-root *{transition:none !important;animation:none !important}
}

/* =====================================================================
   Am 23.09.2026 auf die Tafel umgestellt, Grundlage assets/css/tafel.css.
   Der blaue Seitenverlauf bleibt sichtbar, der Inhalt sitzt auf einer
   dunklen Tafel, Poppins als Schrift, Farbe ist erlaubt. Der Aufbau
   der Seite ist unveraendert geblieben.
   ===================================================================== */
main.videos-main{
  padding:clamp(10px,2vw,22px) clamp(10px,2vw,20px) clamp(28px,4vw,48px) !important;
  align-items:stretch !important;max-width:100% !important;text-align:left !important;
}
.vp-view{
  /* box-sizing ist hier noetig: ohne das rechnet der Browser das
     Polster auf die 100 Prozent Breite drauf und die Tafel laeuft
     rechts aus dem Fenster. Gefunden am 23.09.2026. */
  box-sizing:border-box;
  width:100%;max-width:1280px;margin:0 auto;
  padding:clamp(26px,4vw,48px) clamp(18px,3vw,44px) clamp(30px,5vw,52px);
  background:linear-gradient(180deg, var(--tf-tafel-1,rgba(10,16,28,.72)) 0%, var(--tf-tafel-2,rgba(6,10,18,.82)) 100%);
  border:1px solid var(--tf-rand,rgba(0,255,255,.16));
  border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  font-size:17px;line-height:1.7;
}
@media (max-width:600px){
  .vp-view{padding:22px 16px 28px;border-radius:16px}
}
