/* ============================================================
   SALICETI VIDEO — Stylesheet (video.saliceti.de)
   Schriften liegen lokal unter /assets/fonts (keine Verbindung zu
   Google Fonts, DSGVO-freundlich).
   ============================================================ */
@font-face{font-family:'Fraunces Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/fraunces-latin-ext-opsz-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/fraunces-latin-opsz-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* ============================================================
   SALICETI VIDEO — DESIGN TOKENS
   Farbwelt: tiefes Kino-Schwarz + warmes Gold ("Saliceti"-Siegel)
   ============================================================ */
:root{
  --bg:            #09090b !important;
  --bg-elevated:   #131316 !important;
  --surface:       #18181b !important;
  --surface-hi:    #202024 !important;
  --surface-hi-2:  #2a2a2f !important;
  --border:        #27272a !important;
  --text:          #f4f4f5 !important;
  --text-dim:      #a1a1aa !important;
  --text-faint:    #6b6b70 !important;
  --accent:        #e4e4e7 !important;
  --accent-2:      #e4e4e7 !important;
  --accent-hover:  #ffffff !important;
  --accent-dim:    #3f3f46 !important;
  --live:          #ef4444 !important;
  --focus:         #d4d4d8 !important;
  --gradient-brand: var(--accent-hover) !important;
  --font-display: 'Fraunces Variable', 'Fraunces', Georgia, serif !important;
  --font-body: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  --radius-s: 6px !important;
  --radius-m: 10px !important;
  --radius-l: 16px !important;
  --header-h: 64px !important;
  --sidebar-w: 240px !important;
  --sidebar-w-collapsed: 76px !important;
}
*{box-sizing:border-box !important; margin:0 !important; padding:0 !important;}
/* WICHTIG: bewusst KEIN height:100% auf html/body — das führt dazu,
   dass body zu einem eigenen, vom Fenster getrennten Scroll-Container
   wird (body scrollt dann intern, während fixierte Elemente wie Header/
   Sidebar sich am Fenster orientieren und "hängen bleiben" -> Seite
   wirkt wie abgeschnitten, obwohl mehr Inhalt da ist). Für horizontalen
   Schutz reicht overflow-x:hidden völlig aus. */
html,body{width:100% !important; overflow-x:hidden !important; max-width:100vw !important;}
body{
  min-height:100vh !important;
  background:var(--bg) !important;
  color:var(--text) !important;
  font-family:var(--font-body) !important;
  -webkit-font-smoothing:antialiased !important;
}
/* Eigener, in sich geschlossener Scroll-Container für die gesamte App
   (siehe #sv-app-root im HTML). Macht uns komplett unabhängig davon,
   was IONOS/WEB.DE mit dem eigentlichen html/body-Scroll-Verhalten
   anstellt. Bewusst position:fixed statt height:100vh in normalem
   Fluss: so nimmt unsere App NULL Platz im Seitenfluss von IONOS ein
   und kann die äußere Seite niemals über einen Viewport hinaus
   wachsen lassen (das verursachte vorher 2 Scrollbalken + einen
   sichtbaren Rand am Seitenende). position:fixed-Kinder (Header/
   Sidebar/Tabbar/Modale) bleiben davon unberührt und richten sich
   weiterhin ganz normal am echten Browser-Viewport aus. */
#sv-app-root{
  position:fixed !important; inset:0 !important;
  width:100% !important; max-width:100vw !important;
  overflow-y:auto !important; overflow-x:hidden !important;
  background:var(--bg) !important;
  -webkit-overflow-scrolling:touch !important;
}
::selection{ background:var(--accent-dim) !important; color:var(--text) !important; }
a{color:inherit !important; text-decoration:none !important;}
button{font-family:inherit !important; cursor:pointer !important;}
img{display:block !important; max-width:100% !important;}
::-webkit-scrollbar{width:10px !important; height:10px !important;}
::-webkit-scrollbar-track{background:transparent !important;}
::-webkit-scrollbar-thumb{background:var(--surface-hi-2) !important; border-radius:8px !important;}
::-webkit-scrollbar-thumb:hover{background:var(--text-faint) !important;}
:focus-visible{ outline:2px solid var(--focus) !important; outline-offset:2px !important; border-radius:4px !important; }
.hidden.hidden{ display:none !important; }
.visually-hidden{
  position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important;
}
/* ============================================================
   HOST-RESET (z.B. gegen IONOS/WEB.DE-eigenes globales CSS)
   Manche Website-Baukästen setzen eigene, generische Regeln wie
   "div, p, span { text-align:center !important; }" für ihre
   Inhalts-Blöcke. Da unsere App per Doppelte-Klasse-Selektoren
   dagegen nicht zuverlässig ankommt (ID schlägt Klasse in der
   Spezifität), erzwingen wir hier über die Container-IDs unserer
   App linksbündigen Text und unsere eigene Schriftart — mit
   Ausnahme der Überschriften, die absichtlich die Zierschrift
   (Fraunces) behalten.
   ============================================================ */
#app-header *:not(.empty-state):not(.empty-state *):not(.sv-locked):not(.sv-locked *),
#sidebar *:not(.empty-state):not(.empty-state *):not(.sv-locked):not(.sv-locked *),
#main *:not(.empty-state):not(.empty-state *):not(.sv-locked):not(.sv-locked *),
#modal-overlay *:not(.modal-switch),
#membership-modal-overlay *:not(.membership-hero):not(.membership-hero *),
#external-link-modal-overlay *,
#design-modal-overlay *,
#coins-modal-overlay *,
#user-menu *,
#toast{
  text-align:left !important;
}
#app-header *:not(.page-heading):not(.watch-title):not(.channel-name):not(.empty-state):not(.empty-state *):not(.profile-avatar):not(.profile-name):not(.sv-locked-title):not(.comments-heading):not(.admin-section-title),
#sidebar *:not(.page-heading):not(.watch-title):not(.channel-name):not(.empty-state):not(.empty-state *):not(.profile-avatar):not(.profile-name):not(.sv-locked-title):not(.comments-heading):not(.admin-section-title),
#main *:not(.page-heading):not(.watch-title):not(.channel-name):not(.empty-state):not(.empty-state *):not(.profile-avatar):not(.profile-name):not(.sv-locked-title):not(.comments-heading):not(.admin-section-title),
#modal-overlay *:not(.modal-title),
#membership-modal-overlay *:not(.modal-title),
#external-link-modal-overlay *:not(.modal-title),
#design-modal-overlay *:not(.modal-title),
#coins-modal-overlay *:not(.modal-title),
#user-menu *,
#toast{
  font-family:var(--font-body) !important;
}
/* ============================================================
   HEADER
   ============================================================ */
#app-header{
  position:fixed !important; top:0 !important; left:0 !important; right:0 !important; height:var(--header-h) !important;
  z-index:100 !important;
  display:flex !important; align-items:center !important; gap:24px !important;
  padding:0 20px !important;
  background:rgba(10,10,16,0.82) !important;
  backdrop-filter:blur(16px) saturate(150%) !important; -webkit-backdrop-filter:blur(16px) saturate(150%) !important;
  border-bottom:1px solid var(--border) !important;
}
.header-left{ display:flex !important; align-items:center !important; gap:8px !important; flex-shrink:0 !important; min-width:200px !important;}
#burger-btn{
  width:40px !important; height:40px !important; border:none !important; background:transparent !important; border-radius:50% !important;
  display:flex !important; align-items:center !important; justify-content:center !important; color:var(--text) !important;
  transition:background .15s ease !important;
}
#burger-btn:hover{ background:var(--surface-hi) !important; }
#burger-btn svg{ width:22px !important; height:22px !important; }
.brand{ display:flex !important; align-items:center !important; }
.brand img{ height:38px !important; width:auto !important; }
.header-center{
  flex:1 !important; display:flex !important; justify-content:center !important;
}
.search-form{
  display:flex !important; width:100% !important; max-width:600px !important;
}
.search-form input{
  flex:1 !important;
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-right:none !important;
  color:var(--text) !important;
  padding:0 16px !important;
  height:40px !important;
  border-radius:20px 0 0 20px !important;
  font-size:14px !important;
}
.search-form input::placeholder{ color:var(--text-faint) !important; }
.search-form input:focus{ border-color:var(--accent-dim) !important; outline:none !important; }
.search-form button{
  width:56px !important; height:40px !important;
  border:1px solid var(--border) !important;
  background:var(--surface-hi) !important;
  border-radius:0 20px 20px 0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  color:var(--text-dim) !important;
  transition:color .15s ease, background .15s ease !important;
}
.search-form button:hover{ color:var(--accent) !important; background:var(--surface-hi-2) !important; }
.search-form svg{ width:18px !important; height:18px !important; }
.header-right{ display:flex !important; align-items:center !important; gap:10px !important; flex-shrink:0 !important; min-width:200px !important; justify-content:flex-end !important;}
.btn{
  border:1px solid var(--border) !important;
  background:transparent !important;
  color:var(--text) !important;
  height:38px !important; padding:0 16px !important;
  border-radius:8px !important;
  font-size:14px !important; font-weight:600 !important;
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  transition:background .15s ease, border-color .15s ease !important;
}
.btn:hover{ background:var(--surface-hi) !important; border-color:var(--surface-hi-2) !important; }
.btn-accent{
  background:var(--accent-hover) !important;
  color:#0a0a0b !important;
  border-color:transparent !important;
  transition:background .15s ease !important;
}
.btn-accent:hover{ background:#ffffff !important; }
.btn-ghost{ border:none !important; }
.btn svg{ width:17px !important; height:17px !important; }
#auth-area{ display:flex !important; align-items:center !important; gap:10px !important; }
.avatar-btn{
  width:36px !important; height:36px !important; border-radius:50% !important; overflow:hidden !important;
  border:2px solid var(--border) !important; background:var(--surface-hi-2) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-weight:700 !important; font-size:14px !important; color:var(--accent-hover) !important;
  flex-shrink:0 !important; transition:box-shadow .2s ease, border-color .2s ease !important;
}
.avatar-btn:hover{ border-color:var(--accent-dim) !important; box-shadow:0 0 0 3px rgba(124,92,255,0.18) !important; }
.avatar-btn img{ width:100% !important; height:100% !important; object-fit:cover !important; }
/* ============================================================
   SIDEBAR
   ============================================================ */
#sidebar{
  position:fixed !important; top:var(--header-h) !important; left:0 !important; bottom:0 !important;
  width:var(--sidebar-w) !important;
  background:linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 220px) !important;
  border-right:1px solid var(--border) !important;
  overflow-y:auto !important;
  display:flex !important; flex-direction:column !important;
  padding:12px 8px !important;
  transition:width .18s ease, transform .18s ease !important;
  z-index:90 !important;
}
#sidebar.collapsed{ width:var(--sidebar-w-collapsed) !important; }
.side-section{ padding:8px 4px 14px !important; border-bottom:1px solid var(--border) !important; margin-bottom:10px !important; flex-shrink:0 !important; }
.side-section:last-child{ border-bottom:none !important; margin-bottom:0 !important; }
/* Auth-Bereich in der Sidebar: nur auf Mobile sichtbar (siehe Media Query),
   auf Desktop bleibt Anmelden/Registrieren/Avatar im Header */
#sidebar-auth-section{ display:none !important; }
.sidebar-auth-guest{ display:flex !important; flex-direction:column !important; gap:8px !important; }
.sidebar-auth-guest .btn{ width:100% !important; justify-content:center !important; }
.sidebar-auth-user-row{ display:flex !important; align-items:center !important; gap:12px !important; padding:4px !important; margin-bottom:10px !important; }
.sidebar-auth-avatar{
  width:42px !important; height:42px !important; border-radius:50% !important; flex-shrink:0 !important;
  background:var(--surface-hi-2) !important; display:flex !important; align-items:center !important; justify-content:center !important;
  font-weight:700 !important; font-size:16px !important; color:var(--accent) !important; overflow:hidden !important;
}
.sidebar-auth-avatar img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.sidebar-auth-name{ font-size:14px !important; font-weight:700 !important; color:var(--text) !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
.sidebar-auth-email{ font-size:12px !important; color:var(--text-faint) !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
.side-help{
  display:flex !important; align-items:flex-start !important; gap:9px !important;
  margin-top:auto !important; margin-bottom:16px !important; flex-shrink:0 !important;
  padding:11px 10px !important; border-radius:var(--radius-m) !important;
  background:var(--surface) !important; border:1px solid var(--border) !important;
}
.side-help svg{ width:16px !important; height:16px !important; color:var(--text-faint) !important; flex-shrink:0 !important; margin-top:1px !important; }
.side-help p{ font-size:11.5px !important; line-height:1.5 !important; color:var(--text-faint) !important; }
.side-help a{ color:var(--text-dim) !important; font-weight:600 !important; text-decoration:underline !important; text-underline-offset:2px !important; }
.side-help a:hover{ color:var(--text) !important; }
.side-legal{
  display:flex !important; flex-direction:column !important; gap:2px !important;
  padding:10px 4px 4px !important; flex-shrink:0 !important;
  border-top:1px solid var(--border) !important;
}
.side-legal a{
  display:flex !important; align-items:center !important; gap:10px !important;
  padding:7px 8px !important; border-radius:var(--radius-s) !important;
  font-size:12.5px !important; font-weight:500 !important; color:var(--text-faint) !important;
  transition:background .15s ease, color .15s ease !important;
}
.side-legal a:hover{ background:var(--surface-hi) !important; color:var(--text-dim) !important; }
.side-legal a svg{ width:15px !important; height:15px !important; flex-shrink:0 !important; }
.side-link{
  display:flex !important; align-items:center !important; gap:20px !important;
  padding:10px 12px !important; border-radius:var(--radius-m) !important;
  color:var(--text) !important; font-size:14px !important; font-weight:500 !important;
  white-space:nowrap !important; overflow:hidden !important;
  position:relative !important; transition:background .15s ease, color .15s ease !important;
}
.side-link:hover{ background:var(--surface-hi) !important; }
.side-link.active{
  background:var(--surface-hi-2) !important;
  font-weight:700 !important; color:var(--text) !important;
}
.side-link.active::before{
  content:'' !important; position:absolute !important; left:0 !important; top:18% !important; bottom:18% !important; width:3px !important;
  border-radius:0 3px 3px 0 !important; background:var(--accent-hover) !important;
}
.side-link svg{ width:22px !important; height:22px !important; flex-shrink:0 !important; }
#sidebar.collapsed .side-link{ justify-content:center !important; padding:12px 4px !important; }
#sidebar.collapsed .side-link span{ display:none !important; }
#sidebar.collapsed .side-title{ display:none !important; }
.side-title{
  font-size:12px !important; text-transform:uppercase !important; letter-spacing:0.06em !important;
  color:var(--text-faint) !important; font-weight:700 !important; padding:6px 12px 8px !important;
}
.side-empty{
  font-size:12.5px !important; color:var(--text-faint) !important; padding:6px 12px !important; line-height:1.5 !important;
}
#sidebar-overlay{
  position:fixed !important; inset:0 !important; background:rgba(0,0,0,0.55) !important; z-index:89 !important; display:none !important;
}
/* ============================================================
   MOBILE TAB-LEISTE
   ============================================================ */
#mobile-tabbar{ display:none !important; }
@media (max-width:860px){
  #mobile-tabbar{
    display:flex !important; position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; z-index:88 !important;
    background:rgba(11,12,15,0.97) !important; backdrop-filter:blur(10px) !important;
    border-top:1px solid var(--border) !important;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .tab-item{
    flex:1 !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:3px !important;
    padding:6px 2px !important; border:none !important; background:none !important;
    color:var(--text-faint) !important; font-size:10.5px !important; font-weight:600 !important;
    border-radius:10px !important; transition:color .15s ease !important;
  }
  .tab-item svg{ width:21px !important; height:21px !important; }
  .tab-item.active{ color:var(--accent) !important; }
}
/* ============================================================
   LAYOUT / MAIN
   ============================================================ */
#main{
  margin-top:var(--header-h) !important;
  margin-left:var(--sidebar-w) !important;
  min-height:calc(100vh - var(--header-h)) !important;
  transition:margin-left .18s ease !important;
  padding:24px 28px 60px !important;
}
#main.sidebar-collapsed{ margin-left:var(--sidebar-w-collapsed) !important; }
.view{ display:none !important; animation:fadeIn .38s cubic-bezier(.16,1,.3,1) !important; }
.view.active{ display:block !important; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(10px) scale(0.99);} to{opacity:1; transform:translateY(0) scale(1);} }
.page-heading{
  font-family:var(--font-display) !important;
  font-size:26px !important; font-weight:600 !important;
  margin-bottom:20px !important;
  display:flex !important; align-items:center !important; gap:10px !important;
}
.page-heading .accent-dot{ color:var(--accent) !important; }
/* ============================================================
   VIDEO GRID / CARDS
   ============================================================ */
.chip-row{
  display:flex !important; gap:10px !important; overflow-x:auto !important; padding-bottom:16px !important; margin-bottom:6px !important;
}
.chip{
  flex-shrink:0 !important;
  background:var(--surface-hi) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
  padding:8px 16px !important; border-radius:8px !important;
  font-size:13.5px !important; font-weight:600 !important;
  white-space:nowrap !important;
}
.chip.active{ background:var(--gradient-brand) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 3px 12px rgba(124,92,255,0.35) !important; }
.chip:hover:not(.active){ background:var(--surface-hi-2) !important; }
.video-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap:24px 16px !important;
}
.video-card{ cursor:pointer !important; }
.thumb-wrap{
  position:relative !important;
  width:100% !important; aspect-ratio:16/9 !important;
  border-radius:var(--radius-m) !important;
  overflow:hidden !important;
  background:var(--surface-hi) !important;
  margin-bottom:10px !important;
  border:1px solid var(--border) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 20px rgba(0,0,0,0.35) !important;
  transition:border-color .25s ease, box-shadow .25s ease !important;
}
.video-card:hover .thumb-wrap{
  border-color:var(--surface-hi-2) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 24px rgba(0,0,0,0.5) !important;
}
.thumb-wrap img{ width:100% !important; height:100% !important; object-fit:cover !important; transition:transform .5s cubic-bezier(.2,.8,.2,1) !important; }
.video-card:hover .thumb-wrap img{ transform:scale(1.04) !important; }
.thumb-scrub{
  position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; height:3px !important;
  background:var(--gradient-brand) !important;
  transform:scaleX(0) !important; transform-origin:left !important;
  transition:transform .35s ease !important;
}
.video-card:hover .thumb-scrub{ transform:scaleX(1) !important; }
.thumb-badges-tr{
  position:absolute !important; top:8px !important; right:8px !important;
  display:flex !important; flex-direction:column !important; align-items:flex-end !important; gap:4px !important;
}
.yt-badge, .member-badge, .stream-badge{
  height:20px !important; box-sizing:border-box !important;
  background:rgba(8,9,11,0.92) !important; color:#fff !important;
  font-size:10.5px !important; font-weight:700 !important; letter-spacing:0.03em !important;
  padding:0 7px !important; border-radius:4px !important;
  display:flex !important; align-items:center !important; gap:4px !important;
  border:1px solid rgba(255,255,255,0.1) !important;
}
.member-badge{ color:var(--accent) !important; }
.member-badge svg{ width:11px !important; height:11px !important; }
.stream-badge{
  position:absolute !important; top:8px !important; left:8px !important; gap:5px !important;
}
.stream-badge svg{ width:11px !important; height:11px !important; }
/* Verstärkte Fassung derselben Regeln über die #main-ID, damit die
   Badges auch gegen generisches globales Host-CSS (z.B. IONOS)
   zuverlässig gewinnen — ID-Spezifität schlägt reine Klassen-Regeln
   selbst wenn beide Seiten !important verwenden. */
#main .thumb-badges-tr, #watch-sidebar .thumb-badges-tr{
  position:absolute !important; top:8px !important; right:8px !important; left:auto !important; bottom:auto !important;
  display:flex !important; flex-direction:column !important; align-items:flex-end !important; gap:4px !important;
  margin:0 !important; padding:0 !important; float:none !important; line-height:normal !important;
}
#main .yt-badge, #main .member-badge, #main .stream-badge,
#watch-sidebar .yt-badge, #watch-sidebar .member-badge, #watch-sidebar .stream-badge{
  height:20px !important; box-sizing:border-box !important; min-height:20px !important; max-height:20px !important;
  background:rgba(8,9,11,0.92) !important; color:#fff !important;
  font-size:10.5px !important; font-weight:700 !important; letter-spacing:0.03em !important;
  padding:0 7px !important; margin:0 !important; border-radius:4px !important;
  display:flex !important; align-items:center !important; gap:4px !important;
  border:1px solid rgba(255,255,255,0.1) !important; line-height:normal !important; vertical-align:top !important;
  float:none !important; top:auto !important; bottom:auto !important;
}
#main .stream-badge, #watch-sidebar .stream-badge{
  position:absolute !important; top:8px !important; left:8px !important; right:auto !important; bottom:auto !important; gap:5px !important;
}
#main .yt-badge svg, #main .member-badge svg, #main .stream-badge svg,
#watch-sidebar .yt-badge svg, #watch-sidebar .member-badge svg, #watch-sidebar .stream-badge svg{
  width:11px !important; height:11px !important; display:block !important; margin:0 !important; flex-shrink:0 !important;
}
.vc-meta{ display:flex !important; gap:10px !important; }
.vc-avatar{
  width:36px !important; height:36px !important; border-radius:50% !important; overflow:hidden !important; flex-shrink:0 !important;
  background:var(--surface-hi-2) !important; margin-top:2px !important;
}
.vc-avatar img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.vc-title{ font-size:14.5px !important; font-weight:600 !important; line-height:1.35 !important; margin-bottom:4px !important;
  display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; }
.vc-channel{ font-size:13px !important; color:var(--text-dim) !important; display:flex !important; align-items:center !important; gap:4px !important; }
.verified-badge{ color:var(--accent) !important; flex-shrink:0 !important; display:inline-flex !important; }
.verified-badge img{ width:14px !important; height:14px !important; display:block !important; object-fit:contain !important; }
.vc-sub{ font-size:12.5px !important; color:var(--text-faint) !important; }
/* ============================================================
   MUSIK-ÜBERSICHT (bewusst andere Optik als das Video-Grid:
   kompakte Zeilen statt Karten-Raster, wie eine Playlist)
   ============================================================ */
.music-list{ display:flex !important; flex-direction:column !important; max-width:640px !important; }
.music-row{
  display:flex !important; align-items:center !important; gap:14px !important;
  padding:9px 10px !important; border-radius:var(--radius-m) !important; cursor:pointer !important;
  transition:background .15s ease !important;
}
.music-row:hover{ background:var(--surface-hi) !important; }
.music-row-index{
  width:22px !important; flex-shrink:0 !important; text-align:center !important;
  font-size:12.5px !important; color:var(--text-faint) !important; font-variant-numeric:tabular-nums !important;
}
.music-row:hover .music-row-index{ display:none !important; }
.music-row-playicon{
  width:22px !important; height:22px !important; flex-shrink:0 !important; display:none !important;
  align-items:center !important; justify-content:center !important; color:var(--accent) !important;
}
.music-row:hover .music-row-playicon{ display:flex !important; }
.music-row-playicon svg{ width:14px !important; height:14px !important; }
.music-row-cover{
  width:48px !important; height:48px !important; border-radius:6px !important; overflow:hidden !important;
  flex-shrink:0 !important; background:var(--surface-hi-2) !important;
}
.music-row-cover img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.music-row-info{ flex:1 !important; min-width:0 !important; }
.music-row-title{
  font-size:14px !important; font-weight:600 !important; color:var(--text) !important;
  overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
}
.music-row-artist{
  font-size:12.5px !important; color:var(--text-faint) !important;
  overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; margin-top:2px !important;
}
.music-row-artist a{ color:var(--text-faint) !important; }
.music-row-artist a:hover{ color:var(--text-dim) !important; text-decoration:underline !important; }
.music-row-badge{
  flex-shrink:0 !important; font-size:10.5px !important; font-weight:700 !important; color:var(--accent) !important;
  background:rgba(227,178,60,0.12) !important; padding:3px 8px !important; border-radius:20px !important;
  display:flex !important; align-items:center !important; gap:4px !important;
}
.music-row-badge svg{ width:10px !important; height:10px !important; }
.empty-state{
  border:1px dashed var(--border) !important; border-radius:var(--radius-l) !important;
  padding:60px 24px !important; text-align:center !important; color:var(--text-dim) !important;
  display:flex !important; flex-direction:column !important; align-items:center !important; gap:10px !important;
}
.empty-state svg{ width:40px !important; height:40px !important; color:var(--text-faint) !important; }
.empty-state strong{ color:var(--text) !important; font-size:16px !important; font-family:var(--font-display) !important; font-weight:600 !important; }
.empty-state p{ font-size:13.5px !important; max-width:360px !important; line-height:1.5 !important; }
.skeleton{ background:linear-gradient(100deg, var(--surface) 30%, var(--surface-hi) 50%, var(--surface) 70%) !important;
  background-size:200% 100% !important; animation:shimmer 1.3s ease-in-out infinite !important; }
@keyframes shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
.skel-thumb{ width:100% !important; aspect-ratio:16/9 !important; border-radius:var(--radius-m) !important; margin-bottom:10px !important; }
.skel-line{ height:12px !important; border-radius:4px !important; margin-bottom:6px !important; }
/* ============================================================
   WATCH VIEW
   ============================================================ */
.watch-layout{ display:grid !important; grid-template-columns:minmax(0,1fr) 380px !important; gap:24px !important; align-items:start !important; }
@media (max-width:1080px){ .watch-layout{ grid-template-columns:minmax(0,1fr) !important; } }
.player-wrap{
  width:100% !important; max-width:100% !important; min-width:0 !important; aspect-ratio:16/9 !important; background:#000 !important;
  border-radius:var(--radius-l) !important; overflow:hidden !important; margin-bottom:16px !important;
  border:1px solid var(--border) !important;
}
.player-wrap video, .player-wrap iframe{ width:100% !important; height:100% !important; max-width:100% !important; display:block !important; background:#000 !important; border:none !important; }
.player-wrap.is-music{ /* nutzt wieder das normale 16:9-Format */ }
/* ============================================================
   CUSTOM VIDEO PLAYER (nur für eigene MP4s, nicht YouTube)
   ============================================================ */
.sv-player{ position:relative !important; width:100% !important; height:100% !important; background:#000 !important; }
.sv-player video{ width:100% !important; height:100% !important; object-fit:contain !important; background:#000 !important; display:block !important; }
.sv-bigplay{
  position:absolute !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) scale(1) !important;
  width:72px !important; height:72px !important; border-radius:50% !important;
  background:rgba(11,12,15,0.55) !important; backdrop-filter:blur(6px) !important;
  border:1px solid rgba(255,255,255,0.15) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  color:var(--accent) !important; cursor:pointer !important; z-index:3 !important;
  transition:opacity .2s ease, transform .2s ease, background .15s ease !important;
}
.sv-bigplay:hover{ background:rgba(11,12,15,0.75) !important; transform:translate(-50%,-50%) scale(1.06) !important; }
.sv-bigplay svg{ width:28px !important; height:28px !important; }
.sv-player.is-playing .sv-bigplay{ opacity:0 !important; pointer-events:none !important; transform:translate(-50%,-50%) scale(0.85) !important; }
.sv-controls{
  position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; z-index:2 !important;
  padding:28px 14px 10px !important;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%) !important;
  opacity:1 !important; transition:opacity .25s ease !important;
}
.sv-player.controls-hidden .sv-controls{ opacity:0 !important; pointer-events:none !important; }
.sv-player.controls-hidden{ cursor:none !important; }
.sv-progress-wrap{
  position:relative !important; height:12px !important; display:flex !important; align-items:center !important;
  cursor:pointer !important; margin-bottom:6px !important;
}
.sv-progress-track{ position:relative !important; width:100% !important; height:4px !important; border-radius:2px !important; background:rgba(255,255,255,0.22) !important; overflow:visible !important; transition:height .12s ease !important; }
.sv-progress-wrap:hover .sv-progress-track{ height:6px !important; }
.sv-progress-buffered{ position:absolute !important; left:0 !important; top:0 !important; bottom:0 !important; width:0%; background:rgba(255,255,255,0.35) !important; border-radius:2px !important; }
.sv-progress-filled{ position:absolute !important; left:0 !important; top:0 !important; bottom:0 !important; width:0%; background:var(--accent) !important; border-radius:2px !important; }
.sv-progress-thumb{
  position:absolute !important; top:50% !important; left:0%; width:13px !important; height:13px !important; border-radius:50% !important;
  background:var(--accent) !important; transform:translate(-50%,-50%) scale(0) !important; transition:transform .12s ease !important;
  box-shadow:0 0 0 4px rgba(227,178,60,0.2) !important;
}
.sv-progress-wrap:hover .sv-progress-thumb{ transform:translate(-50%,-50%) scale(1) !important; }
.sv-controls-row{ display:flex !important; align-items:center !important; gap:6px !important; }
.sv-ctrl-btn{
  background:none !important; border:none !important; color:#fff !important; cursor:pointer !important;
  width:34px !important; height:34px !important; border-radius:6px !important;
  display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important;
  transition:color .15s ease, background .15s ease !important;
}
.sv-ctrl-btn:hover{ color:var(--accent) !important; background:rgba(255,255,255,0.08) !important; }
.sv-ctrl-btn svg{ width:19px !important; height:19px !important; }
.sv-volume-group{ display:flex !important; align-items:center !important; gap:2px !important; }
.sv-volume-slider{
  width:0px !important; opacity:0 !important; accent-color:var(--accent) !important; cursor:pointer !important;
  transition:width .18s ease, opacity .18s ease, margin-left .18s ease !important; margin-left:0 !important;
}
.sv-volume-group:hover .sv-volume-slider{ width:64px !important; opacity:1 !important; margin-left:2px !important; }
.sv-time{ font-size:12.5px !important; color:#e6e7ea !important; font-variant-numeric:tabular-nums !important; white-space:nowrap !important; padding:0 4px !important; }
/* Musik-Player: Cover statt Video-Bild */
.sv-music-cover{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  object-fit:cover !important; z-index:0 !important; background:var(--surface-hi) !important;
}
.sv-music-scrim{
  position:absolute !important; inset:0 !important; z-index:1 !important;
  background:linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.8) 100%) !important;
  pointer-events:none !important;
}
.sv-music-meta{
  position:absolute !important; left:0 !important; right:0 !important; bottom:56px !important; z-index:2 !important;
  padding:0 16px !important; color:#fff !important; pointer-events:none !important;
}
.sv-music-title{ font-family:var(--font-display) !important; font-size:16px !important; font-weight:600 !important; margin-bottom:2px !important; text-shadow:0 2px 8px rgba(0,0,0,0.6) !important; }
.sv-music-artist{ font-size:12.5px !important; color:rgba(255,255,255,0.75) !important; text-shadow:0 2px 8px rgba(0,0,0,0.6) !important; }
@media (max-width:520px){
  .sv-bigplay{ width:56px !important; height:56px !important; }
  .sv-bigplay svg{ width:22px !important; height:22px !important; }
  .sv-volume-group{ display:none !important; } /* auf Mobile per Systemlautstärke geregelt */
  .sv-controls{ padding:20px 8px 8px !important; }
  .sv-progress-wrap{ height:26px !important; } /* größere Tipp-Fläche für Finger */
  .sv-progress-track{ height:5px !important; }
  .sv-progress-thumb{ transform:translate(-50%,-50%) scale(1) !important; } /* dauerhaft sichtbar, da kein Hover auf Touch */
  .sv-ctrl-btn{ width:38px !important; height:38px !important; }
  .sv-music-meta{ bottom:96px !important; }
}
/* Sperrbildschirm für Mitglieder-exklusive Videos */
.sv-locked{
  width:100% !important; height:100% !important; position:relative !important;
  background-color:#000 !important; background-size:cover !important; background-position:center !important;
}
.sv-locked-scrim{
  position:absolute !important; inset:0 !important;
  background:rgba(11,12,15,0.86) !important; backdrop-filter:blur(3px) !important;
  display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important;
  text-align:center !important; padding:24px !important;
}
.sv-locked-icon{
  width:52px !important; height:52px !important; border-radius:50% !important; background:rgba(227,178,60,0.12) !important;
  display:flex !important; align-items:center !important; justify-content:center !important; color:var(--accent) !important; margin-bottom:14px !important;
}
.sv-locked-icon svg{ width:24px !important; height:24px !important; }
.sv-locked-title{ font-family:var(--font-display) !important; font-size:19px !important; font-weight:600 !important; color:var(--text) !important; margin-bottom:8px !important; }
.sv-locked-text{ font-size:13.5px !important; color:var(--text-dim) !important; max-width:360px !important; line-height:1.5 !important; margin-bottom:18px !important; }
.watch-title{ font-family:var(--font-display) !important; font-size:21px !important; font-weight:600 !important; margin-bottom:12px !important; line-height:1.3 !important; }
.watch-channel-row{
  display:flex !important; align-items:center !important; justify-content:space-between !important; gap:16px !important;
  padding-bottom:16px !important; border-bottom:1px solid var(--border) !important; margin-bottom:16px !important;
  flex-wrap:wrap !important;
}
.watch-channel-left{ display:flex !important; align-items:center !important; gap:12px !important; }
.watch-avatar{ width:48px !important; height:48px !important; border-radius:50% !important; overflow:hidden !important; background:var(--surface-hi-2) !important; flex-shrink:0 !important;}
.watch-avatar img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.watch-channel-name{ font-size:15px !important; font-weight:700 !important; display:flex !important; align-items:center !important; gap:5px !important; }
.watch-channel-sub{ font-size:12.5px !important; color:var(--text-faint) !important; }
.watch-actions{ display:flex !important; align-items:center !important; gap:10px !important; }
/* ============================================================
   VIDEOINFO (Beschreibung) + COLLAB — Neuaufbau v3
   - Absaetze als echte <p> mit CSS-Margin (kein pre-wrap)
   - ALLE Regeln zusaetzlich per #main-ID verstaerkt, da IONOS
     eigene Wrapper-IDs mit generischen p/div-Regeln einsetzt,
     die reine Klassen-Regeln sonst schlagen wuerden
   - Sichtbarkeit von Aufrufe-Zeile & Collab-Box wird NICHT ueber
     eine CSS-Klasse gesteuert, sondern per JS direkt als Inline-
     Style mit !important gesetzt (element.style.setProperty) -
     das ist im gesamten Projekt bisher der einzige Weg, der
     IONOS zuverlaessig aussticht.
   ============================================================ */
.vi-box{
  background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--radius-m) !important;
  padding:16px !important; margin:0 0 14px 0 !important;
}
#main .vi-box{ padding:16px !important; margin:0 0 14px 0 !important; display:block !important; }
.vi-stats{
  display:flex !important; align-items:center !important; gap:6px !important;
  font-size:12.5px !important; font-weight:600 !important; color:var(--text) !important;
  margin:0 0 12px 0 !important; padding:0 0 12px 0 !important; border-bottom:1px solid var(--border) !important;
}
#main .vi-stats{ margin:0 0 12px 0 !important; padding:0 0 12px 0 !important; display:flex !important; line-height:normal !important; }
.vi-stats svg{ width:14px !important; height:14px !important; color:var(--text-faint) !important; flex-shrink:0 !important; }
.vi-text{ font-size:13.5px !important; color:var(--text-dim) !important; line-height:1.6 !important; }
#main .vi-text{ margin:0 !important; padding:0 !important; display:block !important; line-height:1.6 !important; }
.vi-para{ margin:0 0 12px 0 !important; }
#main .vi-para{
  margin:0 0 12px 0 !important; padding:0 !important; display:block !important;
  line-height:1.6 !important; white-space:normal !important; float:none !important; position:static !important;
}
#main .vi-para:last-child{ margin:0 !important; }
.vi-link{ color:var(--accent) !important; text-decoration:underline !important; text-underline-offset:2px !important; cursor:pointer !important; }
.vi-link:hover{ color:var(--accent-hover) !important; }
.vi-collab{
  display:flex !important; align-items:center !important; gap:12px !important;
  background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--radius-m) !important;
  padding:12px 14px !important; margin:0 0 24px 0 !important;
  transition:background .15s ease, border-color .15s ease !important;
}
#main .vi-collab{ margin:0 0 24px 0 !important; padding:12px 14px !important; }
.vi-collab:hover{ background:var(--surface-hi) !important; border-color:var(--surface-hi-2) !important; }
.vi-collab:hover .vi-collab-chevron{ transform:translateX(2px) !important; }
.vi-collab-avatar{ width:38px !important; height:38px !important; border-radius:50% !important; overflow:hidden !important; background:var(--surface-hi-2) !important; flex-shrink:0 !important; display:block !important; }
.vi-collab-avatar img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.vi-collab-body{ min-width:0 !important; display:block !important; }
.vi-collab-eyebrow{ font-size:11px !important; color:var(--text-faint) !important; text-transform:uppercase !important; letter-spacing:0.04em !important; font-weight:700 !important; display:block !important; margin:0 0 2px 0 !important; }
.vi-collab-name{ font-size:13.5px !important; font-weight:700 !important; color:var(--text) !important; display:block !important; }
.vi-collab-chevron{ width:16px !important; height:16px !important; color:var(--text-faint) !important; margin-left:auto !important; flex-shrink:0 !important; transition:transform .15s ease !important; }
/* Externer-Link-Warnhinweis */
#external-link-modal-overlay{
  position:fixed !important; inset:0 !important; background:rgba(6,7,9,0.75) !important; backdrop-filter:blur(3px) !important;
  display:none !important; align-items:center !important; justify-content:center !important; z-index:200 !important; padding:20px !important;
}
#external-link-modal-overlay.active{ display:flex !important; }
#external-link-modal-overlay .external-link-modal-title,
#external-link-modal-overlay .external-link-modal-subtitle{ text-align:center !important; }
.external-link-icon{
  width:52px !important; height:52px !important; border-radius:50% !important; margin:0 auto 16px !important;
  background:rgba(227,178,60,0.12) !important; color:var(--accent) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.external-link-icon svg{ width:22px !important; height:22px !important; }
.external-link-url{
  margin-top:10px !important; padding:9px 12px !important; background:var(--surface) !important; border:1px solid var(--border) !important;
  border-radius:var(--radius-s) !important; font-size:12px !important; color:var(--text-dim) !important; word-break:break-all !important;
}
/* Design-Modal */
#design-modal-overlay{
  position:fixed !important; inset:0 !important; background:rgba(6,7,9,0.75) !important; backdrop-filter:blur(3px) !important;
  display:none !important; align-items:center !important; justify-content:center !important; z-index:200 !important; padding:20px !important;
}
#design-modal-overlay.active{ display:flex !important; }
.theme-options{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:14px !important; margin-top:6px !important; }
.theme-option{
  position:relative !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:10px !important;
  padding:14px !important; border-radius:var(--radius-m) !important; border:2px solid var(--border) !important; background:var(--surface) !important;
  transition:border-color .15s ease, background .15s ease, transform .15s ease !important;
}
.theme-option:hover{ transform:translateY(-2px) !important; border-color:var(--surface-hi-2) !important; }
.theme-option.active{ border-color:var(--accent) !important; }
.theme-option-label{ font-size:13.5px !important; font-weight:700 !important; color:var(--text) !important; }
.theme-option-check{
  position:absolute !important; top:8px !important; right:8px !important; width:20px !important; height:20px !important; border-radius:50% !important;
  background:var(--gradient-brand) !important; color:#fff !important; padding:4px !important; opacity:0 !important; transform:scale(0.6) !important;
  transition:opacity .15s ease, transform .15s ease !important;
}
.theme-option.active .theme-option-check{ opacity:1 !important; transform:scale(1) !important; }
.theme-preview{
  width:100% !important; aspect-ratio:16/10 !important; border-radius:8px !important; overflow:hidden !important;
  display:flex !important; flex-direction:column !important; padding:8px !important; gap:6px !important; position:relative !important;
}
.theme-preview-classic{ background:#0b0c0f !important; border:1px solid #23262e !important; }
.theme-preview-classic .theme-preview-bar{ height:8px !important; width:60% !important; border-radius:4px !important; background:#1e2129 !important; }
.theme-preview-classic .theme-preview-chip{ height:16px !important; width:40% !important; border-radius:20px !important; background:linear-gradient(135deg, #7c5cff, #ff4d94) !important; }
.theme-preview-aero{
  background:linear-gradient(160deg, #06131f 0%, #0a2438 55%, #06131f 100%) !important;
  border:1px solid rgba(255,255,255,0.25) !important;
}
.theme-preview-aero::before{
  content:'' !important; position:absolute !important; inset:0 !important;
  background:radial-gradient(ellipse at 75% 15%, rgba(80,190,255,0.55), transparent 55%),
             radial-gradient(ellipse at 15% 90%, rgba(110,230,170,0.4), transparent 55%) !important;
}
.theme-preview-aero .theme-preview-bar{
  position:relative !important; z-index:1 !important; height:8px !important; width:60% !important; border-radius:4px !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.15)) !important;
}
.theme-preview-aero .theme-preview-chip{
  position:relative !important; z-index:1 !important; height:16px !important; width:40% !important; border-radius:20px !important;
  background:linear-gradient(180deg, #8fd4f7, #2f8fc9 60%, #1c5a8a) !important;
  box-shadow:0 0 8px rgba(80,190,255,0.7) !important;
}
/* Coins-Modal */
#coins-modal-overlay{
  position:fixed !important; inset:0 !important; background:rgba(6,7,9,0.75) !important; backdrop-filter:blur(3px) !important;
  display:none !important; align-items:center !important; justify-content:center !important; z-index:200 !important; padding:20px !important;
}
#coins-modal-overlay.active{ display:flex !important; }
.coins-balance-box{
  display:flex !important; align-items:center !important; gap:14px !important; margin:18px 0 !important;
  padding:16px !important; border-radius:var(--radius-m) !important; background:var(--surface) !important; border:1px solid var(--border) !important;
}
.coins-balance-box svg{ width:34px !important; height:34px !important; color:var(--accent) !important; flex-shrink:0 !important; }
.coins-balance-label{ font-size:11px !important; color:var(--text-faint) !important; text-transform:uppercase !important; letter-spacing:0.04em !important; font-weight:700 !important; margin-bottom:3px !important; }
.coins-balance-value{ font-family:var(--font-display) !important; font-size:24px !important; font-weight:600 !important; color:var(--text) !important; }
#coins-claim-btn:disabled{ opacity:0.45 !important; cursor:not-allowed !important; }
.coins-claim-hint{ text-align:center !important; font-size:12px !important; color:var(--text-faint) !important; margin-top:10px !important; }
/* Coins-Badge im Kontomenü */
.user-menu-item{ position:relative !important; }
.um-coins-badge{
  margin-left:auto !important; font-size:11.5px !important; font-weight:700 !important; color:var(--accent) !important;
  background:rgba(227,178,60,0.12) !important; padding:2px 8px !important; border-radius:20px !important;
}
/* Mitgliedschaft: Hinweis zum Bezahlen mit Coins */
.membership-coins-note{
  display:flex !important; align-items:center !important; gap:9px !important;
  background:rgba(227,178,60,0.08) !important; border:1px solid rgba(227,178,60,0.25) !important; border-radius:var(--radius-m) !important;
  padding:11px 13px !important; font-size:12.5px !important; color:var(--text-dim) !important; margin-bottom:16px !important; line-height:1.5 !important;
}
.membership-coins-note svg{ width:18px !important; height:18px !important; color:var(--accent) !important; flex-shrink:0 !important; }
.membership-coins-note strong{ color:var(--text) !important; }
/* ============================================================
   KOMMENTARE
   ============================================================ */
.comments-heading{ font-family:var(--font-display) !important; font-size:18px !important; font-weight:600 !important; margin-bottom:20px !important; }
.comment-form{ display:flex !important; gap:12px !important; margin-bottom:8px !important; }
.comment-avatar{
  width:38px !important; height:38px !important; border-radius:50% !important; flex-shrink:0 !important;
  background:var(--surface-hi-2) !important; color:var(--accent) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-weight:700 !important; font-size:14px !important; overflow:hidden !important;
}
.comment-avatar img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.comment-form-body{ flex:1 !important; min-width:0 !important; }
#comment-input{
  width:100% !important; background:transparent !important; border:none !important; border-bottom:1px solid var(--border) !important;
  color:var(--text) !important; font-family:var(--font-body) !important; font-size:14px !important; line-height:1.5 !important;
  padding:6px 0 8px !important; resize:none !important; transition:border-color .15s ease !important;
}
#comment-input:focus{ outline:none !important; border-color:var(--accent) !important; }
#comment-input::placeholder{ color:var(--text-faint) !important; }
.comment-form-actions{ display:flex !important; justify-content:flex-end !important; gap:10px !important; margin-top:10px !important; }
.comment-form-actions .btn{ padding:0 16px !important; height:34px !important; font-size:12.5px !important; }
.comment-login-prompt{
  font-size:13px !important; color:var(--text-faint) !important; padding:10px 0 !important;
  border-bottom:1px solid var(--border) !important; margin-bottom:8px !important;
}
.comment-login-prompt a{ color:var(--accent) !important; font-weight:600 !important; }
.comment-login-prompt a:hover{ text-decoration:underline !important; }
.comment-list{ display:flex !important; flex-direction:column !important; margin-top:14px !important; }
.comment-item{ display:flex !important; gap:12px !important; padding:14px 0 !important; border-bottom:1px solid var(--border) !important; }
.comment-item:last-child{ border-bottom:none !important; }
.comment-body{ flex:1 !important; min-width:0 !important; }
.comment-meta{ display:flex !important; align-items:baseline !important; gap:8px !important; margin-bottom:3px !important; }
.comment-username{ font-size:13px !important; font-weight:700 !important; color:var(--text) !important; }
.comment-date{ font-size:11.5px !important; color:var(--text-faint) !important; }
.comment-text{ font-size:13.5px !important; color:var(--text-dim) !important; line-height:1.55 !important; white-space:pre-wrap !important; word-break:break-word !important; }
.comment-delete-btn{
  flex-shrink:0 !important; width:28px !important; height:28px !important; border-radius:50% !important;
  border:none !important; background:transparent !important; color:var(--text-faint) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  opacity:0 !important; transition:opacity .15s ease, color .15s ease, background .15s ease !important;
}
.comment-item:hover .comment-delete-btn{ opacity:1 !important; }
.comment-delete-btn:hover{ background:var(--surface-hi) !important; color:#ff9d92 !important; }
.comment-delete-btn svg{ width:15px !important; height:15px !important; }
.comment-empty{ font-size:13px !important; color:var(--text-faint) !important; padding:20px 0 !important; text-align:center !important; }
.comment-loading{ font-size:13px !important; color:var(--text-faint) !important; padding:14px 0 !important; }
/* ============================================================
   ADMIN-PANEL
   ============================================================ */
.admin-denied{
  display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important;
  padding:60px 24px !important; color:var(--text-dim) !important;
}
.admin-denied svg{ width:36px !important; height:36px !important; color:var(--text-faint) !important; margin-bottom:14px !important; }
.admin-tabs{ display:flex !important; gap:8px !important; margin-bottom:22px !important; border-bottom:1px solid var(--border) !important; }
.admin-tab{
  background:none !important; border:none !important; color:var(--text-faint) !important; font-weight:600 !important; font-size:14px !important;
  padding:10px 4px !important; margin-right:20px !important; border-bottom:2px solid transparent !important; cursor:pointer !important;
}
.admin-tab.active{ color:var(--text) !important; border-bottom-color:var(--accent) !important; }
.admin-panel-header{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin-bottom:18px !important; flex-wrap:wrap !important; }
.admin-panel-header .admin-section-title{ font-family:var(--font-display) !important; font-size:18px !important; font-weight:600 !important; }
.admin-header-actions{ display:flex !important; align-items:center !important; gap:10px !important; }
.admin-select{
  background:var(--surface-hi) !important; border:1px solid var(--border) !important; color:var(--text) !important;
  border-radius:var(--radius-s) !important; padding:0 12px !important; height:38px !important; font-size:13px !important; font-family:var(--font-body) !important;
}
.admin-form{
  background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--radius-m) !important;
  padding:18px !important; margin-bottom:20px !important; display:flex !important; flex-direction:column !important; gap:14px !important;
}
.admin-form-row{ display:flex !important; flex-direction:column !important; gap:6px !important; }
.admin-form-row label{ font-size:12px !important; font-weight:600 !important; color:var(--text-dim) !important; }
.admin-form-row input[type="text"], .admin-form-row input[type="url"], .admin-form-row textarea, .admin-form-row select{
  background:var(--surface-hi) !important; border:1px solid var(--border) !important; color:var(--text) !important;
  border-radius:var(--radius-s) !important; padding:9px 12px !important; font-size:13.5px !important; font-family:var(--font-body) !important;
}
.admin-form-row textarea{ resize:vertical !important; min-height:60px !important; }
.admin-form-row input:focus, .admin-form-row textarea:focus, .admin-form-row select:focus{ outline:none !important; border-color:var(--accent) !important; }
.admin-form-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:14px !important; }
@media (max-width:640px){ .admin-form-grid{ grid-template-columns:1fr !important; } }
.admin-form-check{ display:flex !important; align-items:center !important; gap:8px !important; font-size:13px !important; color:var(--text-dim) !important; }
.admin-form-actions{ display:flex !important; justify-content:flex-end !important; gap:10px !important; }
.admin-form-error{ font-size:12.5px !important; color:#ff9d92 !important; }
.admin-list{ display:flex !important; flex-direction:column !important; gap:8px !important; }
.admin-list-item{
  display:flex !important; align-items:center !important; gap:12px !important;
  padding:11px 14px !important; background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--radius-m) !important;
}
.admin-list-thumb{ width:56px !important; height:32px !important; border-radius:5px !important; overflow:hidden !important; flex-shrink:0 !important; background:var(--surface-hi-2) !important; }
.admin-list-thumb.is-round{ width:36px !important; height:36px !important; border-radius:50% !important; }
.admin-list-thumb img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.admin-list-info{ flex:1 !important; min-width:0 !important; }
.admin-list-title{ font-size:13.5px !important; font-weight:600 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
.admin-list-meta{ font-size:11.5px !important; color:var(--text-faint) !important; margin-top:2px !important; display:flex !important; align-items:center !important; gap:6px !important; }
.admin-type-tag{ font-size:10px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:0.03em !important; padding:2px 7px !important; border-radius:20px !important; background:var(--surface-hi-2) !important; color:var(--text-faint) !important; }
.admin-list-actions{ display:flex !important; gap:6px !important; flex-shrink:0 !important; }
.admin-icon-btn{
  width:32px !important; height:32px !important; border-radius:8px !important; border:none !important; background:transparent !important;
  color:var(--text-faint) !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important;
}
.admin-icon-btn:hover{ background:var(--surface-hi) !important; color:var(--text) !important; }
.admin-icon-btn.is-danger:hover{ color:#ff9d92 !important; }
.admin-icon-btn svg{ width:16px !important; height:16px !important; }
.admin-empty{ font-size:13px !important; color:var(--text-faint) !important; padding:30px 0 !important; text-align:center !important; }
/* Inhalte-Tabelle (Admin-Panel) */
.admin-table-wrap{ overflow-x:auto !important; border:1px solid var(--border) !important; border-radius:var(--radius-m) !important; }
.admin-table{ width:100% !important; border-collapse:collapse !important; min-width:760px !important; }
.admin-table thead th{
  text-align:left !important; font-size:11px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:0.04em !important;
  color:var(--text-faint) !important; padding:12px 14px !important; border-bottom:1px solid var(--border) !important; background:var(--surface) !important;
  white-space:nowrap !important;
}
.admin-table thead th.col-video{ min-width:320px !important; }
.admin-table thead th.col-actions{ width:80px !important; }
.admin-table-row{ border-bottom:1px solid var(--border) !important; transition:background .15s ease !important; }
.admin-table-row:last-child{ border-bottom:none !important; }
.admin-table-row:hover{ background:var(--surface) !important; }
.admin-table-row td{ padding:12px 14px !important; vertical-align:top !important; font-size:12.5px !important; color:var(--text-dim) !important; white-space:nowrap !important; }
.admin-table-row td.col-video{ white-space:normal !important; }
.admin-table-video-cell{ display:flex !important; gap:12px !important; }
.admin-table-thumb{ width:100px !important; aspect-ratio:16/9 !important; border-radius:6px !important; overflow:hidden !important; flex-shrink:0 !important; background:var(--surface-hi-2) !important; }
.admin-table-thumb img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.admin-table-video-info{ min-width:0 !important; }
.admin-table-title{ font-size:13.5px !important; font-weight:600 !important; color:var(--text) !important; margin-bottom:3px !important; line-height:1.35 !important; }
.admin-table-desc{
  font-size:12px !important; color:var(--text-faint) !important; margin-bottom:6px !important; line-height:1.4 !important;
  overflow:hidden !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important;
}
.admin-visibility{ display:inline-flex !important; align-items:center !important; gap:6px !important; color:var(--text-dim) !important; }
.admin-visibility svg{ width:14px !important; height:14px !important; flex-shrink:0 !important; }
.admin-visibility.is-members{ color:var(--accent) !important; }
.admin-table-date, .admin-table-views{ font-variant-numeric:tabular-nums !important; }
.admin-table-row .admin-list-actions{ display:flex !important; gap:4px !important; }
.side-video-item{ display:flex !important; gap:10px !important; margin-bottom:14px !important; cursor:pointer !important; }
.side-video-thumb{ width:160px !important; aspect-ratio:16/9 !important; border-radius:var(--radius-s) !important; overflow:hidden !important; flex-shrink:0 !important; background:var(--surface-hi) !important;}
.side-video-thumb img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.side-video-info .vc-title{ font-size:13.5px !important; }
.side-video-info .vc-channel{ font-size:12px !important; }
/* ============================================================
   CHANNEL VIEW
   ============================================================ */
.channel-banner{
  position:relative !important;
  /* bricht aus dem Innenabstand von #main aus -> wirkt wie ein Hintergrund,
     nicht wie eine eigenständige Box; Werte entsprechen #main's padding */
  width:calc(100% + 56px) !important;
  margin:-24px -28px 0 -28px !important;
  aspect-ratio:1842 / 456 !important; /* Bannerformat 1842×456 */
  border-radius:0 !important;
  background:linear-gradient(135deg, #1c1e26 0%, #15161b 55%, #101114 100%) !important;
  background-size:cover !important; background-position:center !important;
  border:none !important;
  overflow:hidden !important;
}
@media (max-width:860px){
  .channel-banner{
    width:calc(100% + 36px) !important;
    margin:-18px -18px 0 -18px !important;
  }
}
@media (max-width:700px){
  .channel-banner{ min-height:80px !important; } /* verhindert einen zu schmalen Streifen auf kleinen Screens */
}
.channel-banner::after{
  content:'' !important; position:absolute !important; inset:0 !important;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, #000000 100%) !important;
  pointer-events:none !important;
}
.channel-head{ display:flex !important; align-items:center !important; gap:20px !important; padding:22px 4px 26px !important; flex-wrap:wrap !important; }
.channel-avatar{
  width:88px !important; height:88px !important; border-radius:50% !important; overflow:hidden !important;
  border:3px solid var(--border) !important; background:var(--surface-hi-2) !important; flex-shrink:0 !important;
  box-shadow:0 6px 18px rgba(0,0,0,0.35) !important;
}
.channel-avatar img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.channel-name{ font-family:var(--font-display) !important; font-size:26px !important; font-weight:600 !important; display:flex !important; align-items:center !important; gap:8px !important; }
.channel-sub{ font-size:13px !important; color:var(--text-faint) !important; margin-top:5px !important; }
.channel-social-footer{
  display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:10px !important;
  margin-top:36px !important; padding-top:22px !important; border-top:1px solid var(--border) !important;
}
.channel-social-footer a{
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  padding:7px 14px !important; border-radius:20px !important;
  background:var(--surface) !important; border:1px solid var(--border) !important;
  color:var(--text-faint) !important; font-size:12.5px !important; font-weight:600 !important;
  transition:color .15s ease, background .15s ease, border-color .15s ease !important;
}
.channel-social-footer a:hover{ color:var(--text) !important; background:var(--surface-hi) !important; border-color:var(--surface-hi-2) !important; }
.channel-social-footer svg{ width:14px !important; height:14px !important; flex-shrink:0 !important; }
#channel-chip-row{ border-top:1px solid var(--border) !important; padding-top:20px !important; margin-top:2px !important; }
/* ============================================================
   PROFIL — Dashboard-artiges Layout
   ============================================================ */
.profile-hero{
  display:flex !important; align-items:center !important; gap:18px !important;
  padding-bottom:22px !important; margin-bottom:22px !important; border-bottom:1px solid var(--border) !important;
}
.profile-avatar{
  width:60px !important; height:60px !important; border-radius:50% !important; flex-shrink:0 !important;
  background:var(--surface-hi-2) !important; border:1px solid var(--border) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-family:var(--font-body) !important; font-size:22px !important; font-weight:700 !important; color:var(--text) !important;
}
.profile-hero-info{ min-width:0 !important; }
.profile-name{ font-family:var(--font-body) !important; font-size:19px !important; font-weight:700 !important; letter-spacing:-0.01em !important; }
.profile-email{ font-size:13px !important; color:var(--text-faint) !important; margin-top:3px !important; }
.profile-section-title{ font-family:var(--font-body) !important; font-size:15px !important; font-weight:700 !important; }
.profile-stats{ display:grid !important; grid-template-columns:repeat(3, 1fr) !important; gap:12px !important; margin-bottom:22px !important; max-width:640px !important; }
.profile-stat{
  display:block !important; padding:16px !important; border-radius:var(--radius-m) !important;
  background:var(--surface) !important; border:1px solid var(--border) !important;
  transition:border-color .15s ease, background .15s ease !important;
}
a.profile-stat:hover{ border-color:var(--surface-hi-2) !important; background:var(--surface-hi) !important; }
.profile-stat-icon{ width:17px !important; height:17px !important; color:var(--text-faint) !important; margin-bottom:10px !important; }
.profile-stat-value{ font-size:17px !important; font-weight:700 !important; color:var(--text) !important; margin-bottom:2px !important; }
.profile-stat-value.is-good{ color:#7ed99a !important; }
.profile-stat-value.is-warn{ color:#ffb648 !important; }
.profile-stat-label{ font-size:11.5px !important; color:var(--text-faint) !important; text-transform:uppercase !important; letter-spacing:0.03em !important; }
@media (max-width:480px){
  .profile-stats{ grid-template-columns:1fr 1fr !important; }
  .profile-actions{ flex-direction:column !important; }
  .profile-actions .btn{ min-width:0 !important; width:100% !important; }
  .watch-channel-row{ align-items:stretch !important; }
  .watch-actions{ width:100% !important; }
  .watch-actions #subscribe-btn{ flex:1 !important; justify-content:center !important; }
  .watch-actions #share-btn{ justify-content:center !important; }
}
.profile-actions{ display:flex !important; flex-wrap:wrap !important; gap:10px !important; margin-bottom:28px !important; max-width:640px !important; }
.profile-actions .btn{ flex:1 !important; justify-content:center !important; min-width:160px !important; }
.profile-card{
  background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--radius-l) !important;
  padding:24px !important; max-width:640px !important; margin-bottom:20px !important;
}
/* Profil: Mitgliedschaften-Übersicht */
.membership-card-header{ margin-bottom:20px !important; }
.membership-card-header .profile-section-title{ margin-bottom:3px !important; }
.membership-empty{
  display:flex !important; align-items:flex-start !important; gap:10px !important;
  padding:14px !important; background:var(--surface) !important; border:1px dashed var(--border) !important; border-radius:var(--radius-m) !important;
}
.membership-empty svg{ width:18px !important; height:18px !important; color:var(--text-faint) !important; flex-shrink:0 !important; margin-top:1px !important; }
.membership-empty p{ font-size:12.5px !important; color:var(--text-faint) !important; line-height:1.5 !important; }
.membership-list{ display:flex !important; flex-direction:column !important; gap:8px !important; }
.membership-row{
  cursor:pointer !important;
  display:flex !important; align-items:center !important; gap:14px !important;
  padding:14px 16px !important; border-radius:12px !important;
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
}
.membership-row:hover{ border-color:var(--surface-hi-2) !important; background:var(--surface-hi) !important; box-shadow:0 6px 18px rgba(0,0,0,0.28) !important; }
.membership-row-avatar{
  width:46px !important; height:46px !important; border-radius:12px !important; overflow:hidden !important; flex-shrink:0 !important;
  background:var(--surface-hi-2) !important;
}
.membership-row-avatar img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.membership-row-body{ flex:1 !important; min-width:0 !important; }
.membership-row-top{ display:flex !important; align-items:center !important; gap:8px !important; margin-bottom:4px !important; }
.membership-row-name{ font-size:14.5px !important; font-weight:700 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
.membership-status{
  display:inline-flex !important; align-items:center !important; gap:6px !important; flex-shrink:0 !important;
  font-size:11px !important; font-weight:600 !important; color:var(--text-faint) !important;
}
.membership-status-dot{ width:6px !important; height:6px !important; border-radius:50% !important; background:var(--text-faint) !important; flex-shrink:0 !important; }
.membership-status.is-active{ color:#7ed99a !important; }
.membership-status.is-active .membership-status-dot{ background:#7ed99a !important; box-shadow:0 0 0 3px rgba(126,217,154,0.16) !important; }
.membership-status.is-expired{ color:#ff9d92 !important; }
.membership-status.is-expired .membership-status-dot{ background:#ff9d92 !important; }
.membership-row-date{
  display:flex !important; align-items:center !important; gap:5px !important;
  font-size:12px !important; color:var(--text-faint) !important;
}
.membership-row-date svg{ width:12px !important; height:12px !important; flex-shrink:0 !important; }
.membership-row-arrow{ width:16px !important; height:16px !important; color:var(--text-faint) !important; flex-shrink:0 !important; transition:transform .15s ease !important; }
.membership-row:hover .membership-row-arrow{ transform:translateX(2px) !important; color:var(--text-dim) !important; }
/* ============================================================
   MODAL (Login / Register)
   ============================================================ */
#modal-overlay{
  position:fixed !important; inset:0 !important; background:rgba(6,7,9,0.75) !important; backdrop-filter:blur(3px) !important;
  display:none !important; align-items:center !important; justify-content:center !important; z-index:200 !important; padding:20px !important;
}
#modal-overlay.active{ display:flex !important; }
.modal-box{
  background:var(--bg-elevated) !important; border:1px solid var(--border) !important; border-radius:var(--radius-l) !important;
  width:100% !important; max-width:400px !important; padding:28px 26px 26px !important; position:relative !important;
  box-shadow:0 20px 60px rgba(0,0,0,0.5) !important;
}
.modal-close{
  position:absolute !important; top:14px !important; right:14px !important; width:32px !important; height:32px !important; border-radius:50% !important;
  border:none !important; background:transparent !important; color:var(--text-dim) !important; display:flex !important; align-items:center !important; justify-content:center !important;
}
.modal-close:hover{ background:var(--surface-hi) !important; color:var(--text) !important; }
.modal-brand{ display:flex !important; align-items:center !important; gap:10px !important; margin-bottom:6px !important; }
.modal-brand img{ height:26px !important; }
.modal-title{ font-family:var(--font-body) !important; font-size:20px !important; font-weight:700 !important; margin-bottom:6px !important; line-height:1.3 !important; letter-spacing:-0.01em !important; }
.modal-subtitle{ font-size:13px !important; color:var(--text-dim) !important; line-height:1.5 !important; margin-bottom:22px !important; }
#login-form-wrap .modal-title, #login-form-wrap .modal-subtitle,
#register-form-wrap .modal-title, #register-form-wrap .modal-subtitle{
  text-align:center !important;
}
.field{ margin-bottom:14px !important; }
.field label{ display:block !important; font-size:11.5px !important; font-weight:600 !important; color:var(--text-faint) !important; margin-bottom:6px !important; text-transform:uppercase !important; letter-spacing:0.04em !important; }
.field input{
  width:100% !important; height:44px !important; border-radius:var(--radius-s) !important; border:1px solid var(--border) !important;
  background:var(--surface) !important; color:var(--text) !important; padding:0 14px !important; font-size:14.5px !important;
  transition:border-color .15s ease, box-shadow .15s ease !important;
}
.field input::placeholder{ color:var(--text-faint) !important; }
.field input:focus{ border-color:var(--text-dim) !important; outline:none !important; box-shadow:0 0 0 3px rgba(244,244,245,0.08) !important; }
.field-hint{ font-size:12px !important; margin-top:6px !important; min-height:16px !important; display:flex !important; align-items:center !important; gap:5px !important; }
.field-hint.checking{ color:var(--text-faint) !important; }
.field-hint.available{ color:#7ed99a !important; }
.field-hint.taken{ color:#ff9d92 !important; }
.form-error{
  background:rgba(228,72,58,0.1) !important; border:1px solid rgba(228,72,58,0.4) !important; color:#ff9d92 !important;
  font-size:12.5px !important; padding:9px 12px !important; border-radius:var(--radius-s) !important; margin-bottom:14px !important; line-height:1.4 !important;
}
.form-msg{
  background:rgba(227,178,60,0.1) !important; border:1px solid rgba(227,178,60,0.35) !important; color:var(--accent) !important;
  font-size:12.5px !important; padding:9px 12px !important; border-radius:var(--radius-s) !important; margin-bottom:14px !important; line-height:1.4 !important;
}
.modal-submit{ width:100% !important; height:46px !important; border-radius:var(--radius-s) !important; margin-top:4px !important; font-size:14.5px !important; justify-content:center !important; }
.modal-submit:disabled{ opacity:0.45 !important; cursor:not-allowed !important; }
.modal-step-actions{ display:flex !important; gap:10px !important; margin-top:4px !important; }
.modal-step-actions .btn{ flex:1 !important; justify-content:center !important; height:46px !important; border-radius:var(--radius-s) !important; margin-top:0 !important; }
.modal-switch{ text-align:center !important; font-size:13px !important; color:var(--text-dim) !important; margin-top:18px !important; }
.modal-switch button{ color:var(--accent) !important; background:none !important; border:none !important; font-weight:700 !important; font-size:13px !important; }
/* OAuth-Login (Google/Discord) */
.oauth-buttons{ display:flex !important; flex-direction:column !important; gap:9px !important; }
.oauth-btn{
  display:flex !important; align-items:center !important; justify-content:center !important; gap:10px !important;
  width:100% !important; height:42px !important; border-radius:var(--radius-s) !important;
  background:transparent !important; border:1px solid var(--border) !important; color:var(--text-dim) !important;
  font-size:13.5px !important; font-weight:600 !important; transition:background .15s ease, border-color .15s ease, color .15s ease !important;
}
.oauth-btn:hover{ background:var(--surface-hi) !important; border-color:var(--surface-hi-2) !important; color:var(--text) !important; }
.oauth-btn:disabled{ opacity:0.5 !important; cursor:not-allowed !important; }
.oauth-divider{
  display:flex !important; align-items:center !important; gap:12px !important; margin:18px 0 !important;
  font-size:11.5px !important; color:var(--text-faint) !important; text-transform:uppercase !important; letter-spacing:0.04em !important;
}
.oauth-divider::before, .oauth-divider::after{ content:'' !important; flex:1 !important; height:1px !important; background:var(--border) !important; }
/* ============================================================
   MODAL: KANALMITGLIEDSCHAFT
   ============================================================ */
#membership-modal-overlay{
  position:fixed !important; inset:0 !important; background:rgba(6,7,9,0.75) !important; backdrop-filter:blur(3px) !important;
  display:none !important; align-items:center !important; justify-content:center !important; z-index:200 !important; padding:20px !important;
}
#membership-modal-overlay.active{ display:flex !important; }
.membership-modal-box{ padding:0 !important; overflow:hidden !important; }
.membership-hero{
  position:relative !important; overflow:hidden !important;
  padding:34px 26px 24px !important; text-align:center !important;
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-elevated) 100%) !important;
  border-bottom:1px solid var(--border) !important;
}
.membership-hero-glow{
  position:absolute !important; top:-60px !important; left:50% !important; transform:translateX(-50%) !important;
  width:260px !important; height:160px !important;
  background:radial-gradient(ellipse, rgba(227,178,60,0.28), transparent 72%) !important;
  pointer-events:none !important;
}
.membership-modal-avatar{
  position:relative !important; z-index:1 !important;
  width:68px !important; height:68px !important; border-radius:50% !important; margin:0 auto 12px !important;
  background-color:var(--surface-hi-2) !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important;
  border:3px solid var(--bg-elevated) !important;
  box-shadow:0 0 0 1px rgba(227,178,60,0.4), 0 10px 24px rgba(0,0,0,0.45) !important;
}
.membership-eyebrow{
  position:relative !important; z-index:1 !important;
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  font-size:11px !important; font-weight:700 !important; letter-spacing:0.08em !important; text-transform:uppercase !important;
  color:var(--accent) !important; margin-bottom:8px !important;
}
.membership-eyebrow svg{ width:12px !important; height:12px !important; }
.membership-hero .modal-title{
  position:relative !important; z-index:1 !important; margin-bottom:12px !important;
}
#membership-modal-status{
  position:relative !important; z-index:1 !important;
  display:inline-flex !important; align-items:center !important; gap:6px !important; font-size:12.5px !important; font-weight:700 !important;
  padding:5px 12px !important; border-radius:20px !important;
  background:rgba(227,178,60,0.12) !important; color:var(--accent) !important; width:fit-content !important;
}
#membership-modal-status.is-member{ background:rgba(126,217,154,0.14) !important; color:#7ed99a !important; }
#membership-modal-status.is-expired{ background:rgba(228,72,58,0.14) !important; color:#ff9d92 !important; }
.membership-body{ padding:24px 26px 26px !important; }
.membership-section-label{
  font-size:11px !important; font-weight:700 !important; letter-spacing:0.08em !important; text-transform:uppercase !important;
  color:var(--text-faint) !important; margin-bottom:13px !important;
}
.membership-advantages{ list-style:none !important; margin-bottom:18px !important; display:flex !important; flex-direction:column !important; gap:12px !important; }
.membership-advantages li{
  display:flex !important; align-items:flex-start !important; gap:11px !important;
  font-size:13.5px !important; color:var(--text) !important; line-height:1.5 !important;
}
.membership-advantages .adv-icon{
  width:22px !important; height:22px !important; border-radius:50% !important; flex-shrink:0 !important; margin-top:1px !important;
  background:rgba(227,178,60,0.14) !important; color:var(--accent) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.membership-advantages .adv-icon svg{ width:12px !important; height:12px !important; }
.membership-notice{
  display:flex !important; align-items:flex-start !important; gap:9px !important;
  background:rgba(227,178,60,0.06) !important; border:1px solid rgba(227,178,60,0.22) !important; border-radius:var(--radius-m) !important;
  padding:12px 13px !important; font-size:12px !important; color:var(--text-dim) !important; line-height:1.5 !important; margin-bottom:20px !important;
}
.membership-notice svg{ width:15px !important; height:15px !important; color:var(--accent) !important; flex-shrink:0 !important; margin-top:1px !important; }
.membership-notice.is-blocked{ background:rgba(228,72,58,0.08) !important; border-color:rgba(228,72,58,0.3) !important; }
.membership-notice.is-blocked svg{ color:#ff9d92 !important; }
.membership-body .modal-submit{ margin-top:0 !important; }
/* Modals auf Mobile: Bottom-Sheet statt schwebender Box —
   rutscht von unten rein, fühlt sich "nativer" an */
@media (max-width:600px){
  #modal-overlay, #membership-modal-overlay{
    align-items:flex-end !important; padding:0 !important;
  }
  #modal-overlay .modal-box, #membership-modal-overlay .modal-box{
    width:100% !important; max-width:100% !important;
    border-radius:20px 20px 0 0 !important;
    max-height:88vh !important; overflow-y:auto !important;
    padding-bottom:calc(26px + env(safe-area-inset-bottom, 0px)) !important;
    animation:sheetUp .28s cubic-bezier(.2,.8,.2,1) !important;
  }
  #modal-overlay .modal-box::before, #membership-modal-overlay .modal-box::before{
    content:'' !important; display:block !important; width:36px !important; height:4px !important;
    border-radius:3px !important; background:var(--surface-hi-2) !important;
    margin:0 auto 16px !important;
  }
  .membership-modal-box::before{ position:absolute !important; top:10px !important; left:50% !important; transform:translateX(-50%) !important; margin:0 !important; z-index:2 !important; }
}
@keyframes sheetUp{ from{ transform:translateY(24px) !important; opacity:0 !important; } to{ transform:translateY(0) !important; opacity:1 !important; } }
/* Registrierung: Fortschritts-Anzeige */
.step-indicator{ display:flex !important; align-items:center !important; gap:6px !important; margin-bottom:24px !important; }
.step-dot{
  width:8px !important; height:8px !important; border-radius:50% !important; background:var(--surface-hi-2) !important;
  flex-shrink:0 !important; transition:background .2s ease, transform .2s ease !important;
}
.step-dot.done{ background:var(--accent) !important; }
.step-dot.active{ background:var(--accent) !important; transform:scale(1.25) !important; }
.step-line{ flex:1 !important; height:1px !important; background:var(--border) !important; }
/* Registrierung: Nutzungsbedingungen-Checkbox */
.terms-check{
  display:flex !important; align-items:flex-start !important; gap:10px !important; cursor:pointer !important;
  background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--radius-m) !important;
  padding:14px !important; font-size:13px !important; color:var(--text-dim) !important; line-height:1.5 !important;
}
.terms-check input{ margin-top:2px !important; width:16px !important; height:16px !important; accent-color:var(--accent) !important; flex-shrink:0 !important; cursor:pointer !important; }
.terms-check a{ color:var(--accent) !important; text-decoration:underline !important; }
/* Registrierung: E-Mail-Bestätigung */
.verify-icon{
  width:56px !important; height:56px !important; border-radius:50% !important; background:rgba(227,178,60,0.12) !important;
  display:flex !important; align-items:center !important; justify-content:center !important; margin:0 auto 18px !important; color:var(--accent) !important;
}
.verify-icon svg{ width:26px !important; height:26px !important; }
/* user menu dropdown */
#user-menu{
  position:absolute !important; top:calc(var(--header-h) - 4px) !important; right:20px !important; width:230px !important;
  background:var(--bg-elevated) !important; border:1px solid var(--border) !important; border-radius:var(--radius-m) !important;
  box-shadow:0 14px 40px rgba(0,0,0,0.5) !important; overflow:hidden !important; z-index:150 !important; display:none !important;
}
#user-menu.active{ display:block !important; }
.user-menu-head{ padding:14px 16px !important; border-bottom:1px solid var(--border) !important; }
.user-menu-head .um-name{ font-weight:700 !important; font-size:14px !important; }
.user-menu-head .um-email{ font-size:12px !important; color:var(--text-faint) !important; margin-top:2px !important; }
.user-menu-item{
  display:flex !important; align-items:center !important; gap:12px !important; padding:11px 16px !important;
  font-size:13.5px !important; color:var(--text) !important; width:100% !important; background:none !important; border:none !important; text-align:left !important;
}
.user-menu-item:hover{ background:var(--surface-hi) !important; }
.user-menu-item svg{ width:18px !important; height:18px !important; color:var(--text-dim) !important; }
/* ============================================================
   WARTUNGSMODUS (service/server.is-active === false)
   ============================================================ */
#service-down-screen{
  display:none !important; position:fixed !important; inset:0 !important; z-index:500 !important;
  width:100% !important; height:100% !important; margin:0 !important;
  background:var(--bg) !important; align-items:center !important; justify-content:center !important; padding:24px !important;
  text-align:center !important;
}
#service-down-screen.active{ display:flex !important; }
/* Jedes Kindelement einzeln über den ID-Vorfahren verstärkt, damit
   IONOS/WEB.DE-eigenes globales CSS (float/position/display auf
   generischen Tags) hier nichts verschieben kann. */
#service-down-screen .service-down-box{
  max-width:420px !important; width:100% !important; text-align:center !important;
  margin:0 auto !important; position:relative !important; float:none !important; display:block !important;
}
#service-down-screen .service-down-logo{
  height:38px !important; width:auto !important; max-width:none !important; margin:0 auto 32px !important;
  display:block !important; position:static !important; float:none !important;
}
#service-down-screen #service-down-title{
  font-family:var(--font-display) !important; font-size:24px !important; font-weight:600 !important;
  margin:0 0 12px !important; text-align:center !important; display:block !important; float:none !important; position:static !important;
}
#service-down-screen #service-down-text{
  font-size:14px !important; color:var(--text-dim) !important; line-height:1.6 !important;
  margin:0 0 26px !important; text-align:center !important; display:block !important; float:none !important; position:static !important;
}
#service-down-screen #service-down-retry{
  margin:0 auto !important; display:inline-flex !important; float:none !important; position:static !important;
}
/* ============================================================
   LOADING / TOAST
   ============================================================ */
#global-loader{
  position:fixed !important; top:0 !important; left:0 !important; height:3px !important; background:var(--accent) !important;
  width:0% !important; z-index:300 !important; transition:width .3s ease, opacity .3s ease !important;
}
#toast{
  position:fixed !important; bottom:24px !important; left:50% !important; transform:translateX(-50%) translateY(20px) !important;
  background:var(--bg-elevated) !important; border:1px solid var(--border) !important; color:var(--text) !important;
  padding:12px 20px !important; border-radius:var(--radius-m) !important; font-size:13.5px !important; font-weight:500 !important;
  box-shadow:0 10px 30px rgba(0,0,0,0.5) !important; z-index:400 !important; opacity:0 !important; pointer-events:none !important;
  transition:opacity .25s ease, transform .25s ease !important;
}
#toast.active{ opacity:1 !important; transform:translateX(-50%) translateY(0) !important; }
/* ============================================================
   RESPONSIVE
   ============================================================ */
#mobile-search-btn{
  display:none !important;
  width:40px !important; height:40px !important; border-radius:50% !important;
  background:transparent !important; border:none !important; color:var(--text) !important;
  align-items:center !important; justify-content:center !important; flex-shrink:0 !important;
}
#mobile-search-btn svg{ width:20px !important; height:20px !important; }
#mobile-search-btn:hover{ background:var(--surface-hi) !important; }
@media (max-width:860px){
  :root{ --sidebar-w:230px !important; }
  .header-left{ min-width:0 !important; }
  #auth-area{ display:none !important; } /* Anmelden/Registrieren/Avatar wandert auf Mobile in die Sidebar */
  .brand{
    position:absolute !important; left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important;
  }
  .header-center{
    display:none !important;
    position:absolute !important; top:100% !important; left:0 !important; right:0 !important;
    padding:12px !important; margin:0 !important;
    background:rgba(11,12,15,0.97) !important; backdrop-filter:blur(10px) !important;
    border-bottom:1px solid var(--border) !important;
  }
  #app-header.mobile-search-active .header-center{ display:flex !important; }
  #mobile-search-btn{ display:flex !important; margin-left:auto !important; }
  .search-form{ max-width:none !important; }
  #main{ margin-left:0 !important; padding:18px 18px calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
  .chip-row{
    mask-image:linear-gradient(90deg, #000 90%, transparent 100%) !important;
    -webkit-mask-image:linear-gradient(90deg, #000 90%, transparent 100%) !important;
  }
  #sidebar{ transform:translateX(-100%) !important; }
  #sidebar.mobile-open{ transform:translateX(0) !important; }
  #sidebar-overlay.active{ display:block !important; }
  #sidebar-auth-section{ display:block !important; }
  #chip-row{ display:none !important; } /* Kanal-Filterleiste auf der Startseite nicht auf Mobile */
}
@media (max-width:640px){
  .video-grid{ grid-template-columns:1fr !important; gap:22px !important; }
}
@media (max-width:520px){
  #app-header{ gap:6px !important; padding:0 12px !important; }
  .header-right{ gap:6px !important; }
  .brand img{ height:32px !important; }
  #auth-area .btn{ padding:0 12px !important; font-size:12.5px !important; height:34px !important; }
  #auth-area .avatar-btn{ width:32px !important; height:32px !important; }
}
@media (max-width:420px){
  #auth-area #open-register-btn{ display:none !important; }
}
/* ============================================================
   MINIPLAYER
   ============================================================ */
#mini-player{
  position:fixed !important; right:20px !important; bottom:20px !important; z-index:150 !important;
  width:300px !important; max-width:calc(100vw - 40px) !important;
  background:var(--bg-elevated) !important; border:1px solid var(--border) !important; border-radius:var(--radius-l) !important;
  overflow:hidden !important; box-shadow:0 16px 44px rgba(0,0,0,0.55) !important;
  animation:miniPlayerIn .3s cubic-bezier(.16,1,.3,1) !important;
}
#mini-player.hidden{ display:none !important; }
@keyframes miniPlayerIn{ from{ opacity:0; transform:translateY(18px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } }
.mini-player-actions{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  padding:6px 6px 6px 10px !important; border-bottom:1px solid var(--border) !important; background:var(--surface) !important;
}
.mini-player-actions button{
  display:flex !important; align-items:center !important; gap:6px !important;
  background:none !important; border:none !important; color:var(--text-dim) !important;
  font-size:12px !important; font-weight:600 !important; padding:6px 8px !important; border-radius:6px !important;
  transition:background .15s ease, color .15s ease !important;
}
.mini-player-actions button:hover{ background:var(--surface-hi) !important; color:var(--text) !important; }
#mini-player-close{ padding:6px !important; }
#mini-player-expand svg{ width:14px !important; height:14px !important; flex-shrink:0 !important; }
#mini-player-close svg{ width:15px !important; height:15px !important; }
.mini-player-media{ position:relative !important; width:100% !important; aspect-ratio:16/9 !important; background:#000 !important; cursor:pointer !important; }
.mini-player-media video, .mini-player-media img{ width:100% !important; height:100% !important; object-fit:contain !important; background:#000 !important; display:block !important; }
.mini-player-media img{ object-fit:cover !important; }
.mini-player-play-overlay{
  position:absolute !important; inset:0 !important; display:flex !important; align-items:center !important; justify-content:center !important;
  background:rgba(0,0,0,0.4) !important; color:#fff !important; pointer-events:none !important;
}
.mini-player-play-overlay svg{ width:32px !important; height:32px !important; }
.mini-player-info{ padding:10px 12px 12px !important; }
.mini-player-title{
  font-size:12.5px !important; font-weight:700 !important; color:var(--text) !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; margin-bottom:2px !important;
}
.mini-player-channel{ font-size:11.5px !important; color:var(--text-faint) !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
@media (max-width:640px){
  #mini-player{ right:10px !important; left:10px !important; bottom:calc(64px + 10px + env(safe-area-inset-bottom,0px)) !important; width:auto !important; max-width:none !important; }
}
/* ============================================================
   THEME: AERO (Windows Vista Aero Glass — "Classic" ist der
   normale Look von oben, dieser Block überschreibt gezielt bei
   aktivem body.theme-aero)
   ============================================================ */
body.theme-aero{
  --aero-blue-light:#8fd4f7 !important; --aero-blue:#3d94d1 !important; --aero-blue-dark:#1c5a8a !important;
  --aero-green:#5ad18e !important; --aero-glass:rgba(20,42,64,0.42) !important; --aero-border:rgba(255,255,255,0.28) !important;
  --aero-text:#eef6fb !important;
}
/* Animierter Aurora-Hintergrund (angelehnt an das klassische Vista-
   Standardhintergrundbild: schwarz mit blau-grünen Licht-Schlieren) */
body.theme-aero{ background:#000208 !important; }
body.theme-aero::before, body.theme-aero::after{
  content:'' !important; position:fixed !important; border-radius:50% !important;
  filter:blur(90px) !important; pointer-events:none !important;
}
body.theme-aero::before{
  width:65vw !important; height:65vw !important; top:-24% !important; right:-14% !important;
  background:radial-gradient(circle, rgba(61,148,209,0.55), transparent 70%) !important;
  animation:aeroFloat1 17s ease-in-out infinite alternate !important; z-index:-1 !important;
}
body.theme-aero::after{
  width:55vw !important; height:55vw !important; bottom:-22% !important; left:-12% !important;
  background:radial-gradient(circle, rgba(90,209,142,0.4), transparent 70%) !important;
  animation:aeroFloat2 21s ease-in-out infinite alternate !important; z-index:-1 !important;
}
@keyframes aeroFloat1{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(-6%,8%) scale(1.08); } }
@keyframes aeroFloat2{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(8%,-6%) scale(1.1); } }
/* Vista-Wallpaper NUR im Hauptbereich (nicht Header/Sidebar, die haben
   ihre eigene Glas-Optik) — 10% Deckkraft. Die Deckkraft wird über einen
   dunklen Overlay-Layer im selben background-image-Stapel erreicht statt
   über die CSS-Eigenschaft "opacity", damit der eigentliche Inhalt von
   #main (Videos, Texte, ...) davon unberührt bleibt und weiterhin voll
   sichtbar/lesbar ist. background-attachment:fixed lässt es beim Scrollen
   wie eine feste Tapete stehen bleiben, statt mitzuscrollen. */
body.theme-aero #main{
  background-image:
    linear-gradient(rgba(0,2,8,0.9), rgba(0,2,8,0.9)),
    url("https://cdn.website-editor.net/f8ec695807554cdb9cf9357216d0d327/dms3rep/multi/vistatrends+%281%29.jpg") !important;
  background-size:cover !important;
  background-position:center !important;
  background-attachment:fixed !important;
  background-repeat:no-repeat !important;
}
/* Glas-Kopfleiste + Sidebar */
body.theme-aero #app-header{
  background:linear-gradient(180deg, rgba(255,255,255,0.16), rgba(10,30,48,0.25)), var(--aero-glass) !important;
  backdrop-filter:blur(20px) saturate(160%) !important; -webkit-backdrop-filter:blur(20px) saturate(160%) !important;
  border-bottom:1px solid var(--aero-border) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 8px 30px rgba(0,0,0,0.45) !important;
}
body.theme-aero #sidebar{
  background:linear-gradient(180deg, rgba(255,255,255,0.09), rgba(6,20,32,0.4)), var(--aero-glass) !important;
  backdrop-filter:blur(20px) saturate(160%) !important; -webkit-backdrop-filter:blur(20px) saturate(160%) !important;
  border-right:1px solid var(--aero-border) !important;
}
body.theme-aero #mobile-tabbar{
  background:linear-gradient(180deg, rgba(255,255,255,0.1), rgba(6,20,32,0.55)) !important;
  backdrop-filter:blur(20px) saturate(160%) !important; -webkit-backdrop-filter:blur(20px) saturate(160%) !important;
  border-top:1px solid var(--aero-border) !important;
}
body.theme-aero .side-link.active{ background:linear-gradient(180deg, rgba(61,148,209,0.35), rgba(61,148,209,0.12)) !important; color:var(--aero-blue-light) !important; box-shadow:0 0 0 1px rgba(255,255,255,0.2) inset !important; }
body.theme-aero .tab-item.active{ color:var(--aero-blue-light) !important; }
body.theme-aero .side-link:hover{ background:rgba(255,255,255,0.08) !important; }
/* Glanz-Buttons mit Wisch-Animation beim Hover */
body.theme-aero .btn{
  background:linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0.04)) !important;
  border:1px solid rgba(255,255,255,0.4) !important; color:var(--aero-text) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.45) inset, 0 3px 10px rgba(0,0,0,0.3) !important;
  position:relative !important; overflow:hidden !important;
}
body.theme-aero .btn::after{
  content:'' !important; position:absolute !important; inset:0 !important;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%) !important;
  transform:translateX(-130%) !important; transition:transform .6s ease !important; pointer-events:none !important;
}
body.theme-aero .btn:hover::after{ transform:translateX(130%) !important; }
body.theme-aero .btn-accent{
  background:linear-gradient(180deg, var(--aero-blue-light), var(--aero-blue) 55%, var(--aero-blue-dark)) !important;
  border-color:rgba(255,255,255,0.55) !important; color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,0.35) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 16px rgba(61,148,209,0.5) !important;
}
body.theme-aero .avatar-btn{
  background:linear-gradient(180deg, var(--aero-blue-light), var(--aero-blue-dark)) !important;
  border-color:rgba(255,255,255,0.5) !important; box-shadow:0 0 0 2px rgba(61,148,209,0.35) !important;
}
body.theme-aero .chip.active{ background:linear-gradient(180deg, var(--aero-blue-light), var(--aero-blue)) !important; border-color:rgba(255,255,255,0.5) !important; color:#08202f !important; }
body.theme-aero .chip{ background:rgba(255,255,255,0.06) !important; border-color:var(--aero-border) !important; backdrop-filter:blur(6px) !important; }
/* Glas-Karten: Video-Thumbnails, Kanal-Header, Profil-Karten, Kommentare */
body.theme-aero .thumb-wrap, body.theme-aero .channel-avatar, body.theme-aero .watch-avatar,
body.theme-aero .vc-avatar, body.theme-aero .profile-card, body.theme-aero .vi-box, body.theme-aero .vi-collab,
body.theme-aero .comment-form, body.theme-aero .admin-form, body.theme-aero .admin-list-item,
body.theme-aero .membership-row, body.theme-aero .music-row-cover, body.theme-aero .watch-desc,
body.theme-aero .player-wrap{
  border-color:var(--aero-border) !important;
}
body.theme-aero .profile-card, body.theme-aero .vi-box, body.theme-aero .vi-collab, body.theme-aero .admin-form,
body.theme-aero .admin-list-item, body.theme-aero .membership-row{
  background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(10,30,48,0.3)), var(--aero-glass) !important;
  backdrop-filter:blur(14px) saturate(150%) !important; -webkit-backdrop-filter:blur(14px) saturate(150%) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.15) inset !important;
}
body.theme-aero .thumb-wrap{ border-radius:14px !important; border:1px solid var(--aero-border) !important; box-shadow:0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 18px rgba(0,0,0,0.4) !important; }
body.theme-aero .video-card:hover .thumb-wrap{ box-shadow:0 1px 0 rgba(255,255,255,0.35) inset, 0 10px 26px rgba(61,148,209,0.35) !important; }
body.theme-aero .player-wrap{ border-radius:16px !important; border:1px solid var(--aero-border) !important; box-shadow:0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 30px rgba(0,0,0,0.45) !important; }
/* Glas-Modale (Login/Register/Mitgliedschaft/Extern-Link/Design) */
body.theme-aero .modal-box{
  background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(6,20,32,0.6)), var(--aero-glass) !important;
  backdrop-filter:blur(26px) saturate(170%) !important; -webkit-backdrop-filter:blur(26px) saturate(170%) !important;
  border:1px solid var(--aero-border) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.35) inset, 0 24px 70px rgba(0,0,0,0.55) !important;
}
body.theme-aero .field input, body.theme-aero .comment-form input, body.theme-aero #comment-input,
body.theme-aero .admin-form-row input, body.theme-aero .admin-form-row textarea, body.theme-aero .admin-form-row select,
body.theme-aero .search-form input, body.theme-aero .admin-select{
  background:rgba(255,255,255,0.06) !important; border-color:var(--aero-border) !important; color:var(--aero-text) !important;
}
body.theme-aero .field input:focus{ border-color:var(--aero-blue-light) !important; box-shadow:0 0 0 3px rgba(61,148,209,0.25) !important; }
/* Akzentfarbe global auf Aero-Blau umstellen (Links, Fokus-Ringe, etc.) */
body.theme-aero{ --accent:#3d94d1 !important; --accent-hover:#5aa9df !important; --accent-dim:#1c5a8a !important; --focus:#8fd4f7 !important; --gradient-brand:linear-gradient(135deg, #8fd4f7 0%, #5ad18e 100%) !important; }
body.theme-aero .verified-badge{ filter:hue-rotate(180deg) saturate(1.3) !important; }

/* ============================================================
   v5.0 — video.saliceti.de: echte Links, SEO-Vorschau, Admin-SEO
   ============================================================ */
a.thumb-wrap{ display:block !important; color:inherit !important; }
a.vc-title{ color:var(--text) !important; }
a.vc-title:hover{ text-decoration:underline !important; text-underline-offset:3px !important; }
a.side-video-item{ color:inherit !important; }
.verified-badge svg{ width:14px !important; height:14px !important; display:block !important; }
.noscript-note{ position:relative !important; z-index:600 !important; padding:14px 18px !important; background:#3f1d1d !important; color:#fff !important; font:500 14px/1.5 var(--font-body) !important; text-align:center !important; }

/* Vorgerenderter Inhalt der statischen SEO-Seiten. Sichtbar, bis die
   App ihre Daten geladen hat, danach wird er entfernt. */
body.ssr-pending #main > .view{ display:none !important; }
.ssr{ max-width:980px !important; color:var(--text) !important; font-size:15px !important; line-height:1.65 !important; }
#main #ssr h1, .ssr h1{ font-family:var(--font-display) !important; font-size:clamp(24px,3vw,32px) !important; font-weight:600 !important; line-height:1.2 !important; margin:0 0 14px !important; }
.ssr h2{ font-size:17px !important; font-weight:600 !important; margin:30px 0 12px !important; }
.ssr p{ color:var(--text-dim) !important; margin:0 0 12px !important; max-width:70ch !important; }
.ssr a{ color:var(--text) !important; }
.ssr a:hover{ text-decoration:underline !important; }
.ssr-crumbs{ font-size:13px !important; color:var(--text-faint) !important; margin:0 0 12px !important; }
.ssr-media{ margin:0 0 14px !important; max-width:880px !important; }
.ssr-media video, .ssr-media img{ width:100% !important; aspect-ratio:16/9 !important; object-fit:cover !important; border-radius:var(--radius-l) !important; background:#000 !important; border:1px solid var(--border) !important; }
.ssr-media audio{ width:100% !important; margin-top:10px !important; }
.ssr-note{ margin-top:10px !important; }
.ssr-meta{ font-size:13.5px !important; }
.ssr-desc p{ color:var(--text) !important; }
.ssr-list{ list-style:none !important; display:grid !important; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important; gap:16px !important; }
.ssr-list li a{ display:block !important; font-weight:600 !important; font-size:14px !important; }
.ssr-list li img{ width:100% !important; aspect-ratio:16/9 !important; object-fit:cover !important; border-radius:var(--radius-m) !important; margin-bottom:6px !important; border:1px solid var(--border) !important; }
.ssr-list small{ display:block !important; color:var(--text-dim) !important; font-size:12.5px !important; }
.ssr-channels{ list-style:none !important; display:flex !important; flex-wrap:wrap !important; gap:8px !important; }
.ssr-channels a{ display:inline-block !important; padding:6px 12px !important; border:1px solid var(--border) !important; border-radius:999px !important; font-size:13px !important; }
.ssr-channel{ display:flex !important; align-items:center !important; gap:14px !important; margin-bottom:10px !important; }
.ssr-channel img{ width:72px !important; height:72px !important; border-radius:50% !important; object-fit:cover !important; }
.ssr-channel h1{ margin:0 !important; }

/* Admin: SEO & Google */
.seo-stats{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) !important; gap:12px !important; margin:0 0 18px !important; }
.seo-stat{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--radius-m) !important; padding:14px 16px !important; }
.seo-stat b{ display:block !important; font-size:24px !important; font-weight:700 !important; color:var(--text) !important; }
.seo-stat span{ font-size:12.5px !important; color:var(--text-dim) !important; }
.seo-stat.is-warn b{ color:#f5c26b !important; }
.seo-stat.is-good b{ color:#86efac !important; }
.seo-steps{ margin:8px 0 14px 20px !important; color:var(--text-dim) !important; font-size:13.5px !important; line-height:1.65 !important; }
.seo-steps li{ margin:4px 0 !important; }
.seo-steps b{ color:var(--text) !important; }
.seo-progress{ font-size:13px !important; color:var(--text-dim) !important; align-self:center !important; }
.seo-issues{ display:grid !important; gap:8px !important; margin-top:10px !important; }
.seo-issue{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--radius-m) !important; padding:12px 14px !important; }
.seo-issue-title{ font-size:14px !important; font-weight:600 !important; margin-bottom:6px !important; }
.seo-issue-title span{ font-weight:400 !important; color:var(--text-dim) !important; }
.seo-issue-list{ display:flex !important; flex-wrap:wrap !important; gap:6px !important; }
.seo-issue-list span{ font-size:12px !important; padding:3px 9px !important; border-radius:999px !important; background:rgba(245,194,107,.1) !important; color:#f5c26b !important; border:1px solid rgba(245,194,107,.25) !important; }
@media (max-width:860px){ .ssr{ font-size:14.5px !important; } }

/* Qualitätsauswahl im Player */
.sv-quality{ position:relative !important; }
.sv-quality[hidden]{ display:none !important; }
.sv-quality-badge{ position:absolute !important; top:2px !important; right:-2px !important; font-size:8.5px !important; font-weight:800 !important; line-height:1 !important; padding:1px 3px !important; border-radius:3px !important; background:#e11d48 !important; color:#fff !important; letter-spacing:.02em !important; }
.sv-quality-badge:empty{ display:none !important; }
#sv-quality-btn{ position:relative !important; }
.sv-quality-menu{ position:absolute !important; right:0 !important; bottom:44px !important; min-width:170px !important; padding:6px !important; border-radius:12px !important; background:rgba(18,18,22,.96) !important; border:1px solid rgba(255,255,255,.1) !important; box-shadow:0 12px 32px rgba(0,0,0,.5) !important; z-index:5 !important; -webkit-backdrop-filter:blur(10px) !important; backdrop-filter:blur(10px) !important; }
.sv-quality-menu[hidden]{ display:none !important; }
.sv-quality-title{ font-size:11.5px !important; font-weight:600 !important; color:rgba(255,255,255,.55) !important; padding:6px 10px 6px !important; text-transform:uppercase !important; letter-spacing:.06em !important; }
.sv-quality-item{ width:100% !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; padding:9px 10px !important; border:none !important; border-radius:8px !important; background:none !important; color:#fff !important; font-size:14px !important; font-weight:500 !important; cursor:pointer !important; text-align:left !important; }
.sv-quality-item:hover{ background:rgba(255,255,255,.08) !important; }
.sv-quality-item small{ font-size:9.5px !important; font-weight:800 !important; color:#e11d48 !important; margin-left:4px !important; vertical-align:2px !important; }
.sv-quality-item svg{ width:16px !important; height:16px !important; flex-shrink:0 !important; }
.sv-quality-item.active{ color:var(--accent) !important; }
.sv-quality-sep{ height:1px !important; background:rgba(255,255,255,.1) !important; margin:6px 4px !important; }
.admin-form-check.is-disabled{ opacity:.45 !important; cursor:not-allowed !important; }
.admin-form-hint{ font-size:12.5px !important; line-height:1.5 !important; color:#f5c26b !important; background:rgba(245,194,107,.08) !important; border:1px solid rgba(245,194,107,.25) !important; border-radius:8px !important; padding:8px 10px !important; margin-top:-4px !important; }
/* ============================================================
   v5.9 — SPOTLIGHT (Hero oben auf der Startseite)
   ============================================================ */
.chip.active{ color:#0a0a0b !important; box-shadow:0 4px 14px rgba(255,255,255,0.12) !important; } /* "Alle" war weiß auf weiß */
.home-spotlight:empty{ display:none !important; }
.spotlight-skeleton{ height:clamp(380px, 36vw, 540px) !important; border-radius:22px !important; margin-bottom:26px !important; }
.spotlight{
  position:relative !important; isolation:isolate !important; margin:0 0 28px !important;
  animation:spotIn .8s cubic-bezier(.16,1,.3,1) both !important;
}
.spotlight-ambient{
  position:absolute !important; left:5% !important; top:12% !important; width:90% !important; height:92% !important;
  object-fit:cover !important; z-index:-1 !important; pointer-events:none !important;
  filter:blur(70px) saturate(1.6) !important; opacity:.42 !important; transform:translateZ(0) !important;
}
.spotlight-card{
  position:relative !important; overflow:hidden !important; border-radius:22px !important;
  height:clamp(380px, 36vw, 540px) !important; background:#0d0d10 !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  box-shadow:0 40px 90px -40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.spotlight-media{ position:absolute !important; inset:0 !important; display:block !important; overflow:hidden !important; background:#0d0d10 !important; }
.spotlight-img, .spotlight-video{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  object-fit:cover !important; display:block !important;
}
.spotlight-img{ animation:spotKen 16s cubic-bezier(.2,.6,.2,1) both !important; transform-origin:70% 40% !important; }
.spotlight-video{ opacity:0 !important; transition:opacity 1s ease !important; background:transparent !important; }
.spotlight-card.is-previewing .spotlight-video{ opacity:1 !important; }
.spotlight-shade{
  position:absolute !important; inset:0 !important; pointer-events:none !important;
  background:
    linear-gradient(90deg, rgba(9,9,11,0.95) 0%, rgba(9,9,11,0.82) 26%, rgba(9,9,11,0.35) 54%, rgba(9,9,11,0) 74%),
    linear-gradient(0deg, rgba(9,9,11,0.9) 0%, rgba(9,9,11,0) 46%),
    linear-gradient(180deg, rgba(9,9,11,0.35) 0%, rgba(9,9,11,0) 22%) !important;
}
.spotlight-content{
  position:absolute !important; left:0 !important; top:0 !important; bottom:0 !important; z-index:2 !important;
  width:min(620px, 62%) !important; padding:clamp(28px, 3.4vw, 54px) !important;
  display:flex !important; flex-direction:column !important; justify-content:flex-end !important; gap:14px !important;
}
.spotlight-content > *{ animation:spotUp .8s cubic-bezier(.16,1,.3,1) both !important; }
.spotlight-content > :nth-child(1){ animation-delay:.12s !important; }
.spotlight-content > :nth-child(2){ animation-delay:.2s !important; }
.spotlight-content > :nth-child(3){ animation-delay:.28s !important; }
.spotlight-content > :nth-child(4){ animation-delay:.36s !important; }
.spotlight-content > :nth-child(5){ animation-delay:.44s !important; }
.spotlight-eyebrow{
  align-self:flex-start !important; display:inline-flex !important; align-items:center !important; gap:9px !important;
  padding:6px 13px 6px 11px !important; border-radius:999px !important;
  background:rgba(255,255,255,0.1) !important; border:1px solid rgba(255,255,255,0.18) !important;
  backdrop-filter:blur(14px) saturate(1.4) !important; -webkit-backdrop-filter:blur(14px) saturate(1.4) !important;
  color:#fff !important; font-size:11.5px !important; font-weight:700 !important; letter-spacing:.16em !important; text-transform:uppercase !important;
}
.spotlight-dot{
  width:7px !important; height:7px !important; border-radius:50% !important; background:#fff !important; flex-shrink:0 !important;
  box-shadow:0 0 0 0 rgba(255,255,255,0.7) !important; animation:spotPulse 2.2s ease-out infinite !important;
}
.spotlight-title{
  margin:0 !important; font-family:var(--font-display) !important; font-weight:600 !important;
  font-size:clamp(30px, 3.7vw, 56px) !important; line-height:1.04 !important; letter-spacing:-0.02em !important;
  color:#fff !important; text-wrap:balance !important; text-shadow:0 2px 30px rgba(0,0,0,0.45) !important;
  display:-webkit-box !important; -webkit-line-clamp:3 !important; -webkit-box-orient:vertical !important; overflow:hidden !important;
}
.spotlight-title a{ color:inherit !important; text-decoration:none !important; }
.spotlight-meta{
  display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:8px 10px !important;
  font-size:13.5px !important; color:rgba(255,255,255,0.74) !important; font-variant-numeric:tabular-nums !important;
}
.spotlight-channel{ display:inline-flex !important; align-items:center !important; gap:8px !important; color:#fff !important; font-weight:600 !important; text-decoration:none !important; }
.spotlight-channel:hover .spotlight-channel-name{ text-decoration:underline !important; text-underline-offset:3px !important; }
.spotlight-avatar{
  width:26px !important; height:26px !important; border-radius:50% !important; overflow:hidden !important; flex-shrink:0 !important;
  background:var(--surface-hi-2) !important; box-shadow:0 0 0 2px rgba(255,255,255,0.18) !important; display:block !important;
}
.spotlight-avatar img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
.spotlight-sep{ width:3px !important; height:3px !important; border-radius:50% !important; background:rgba(255,255,255,0.45) !important; }
.spotlight-tag{
  display:inline-flex !important; align-items:center !important; gap:5px !important; padding:3px 8px !important; border-radius:6px !important;
  border:1px solid rgba(255,255,255,0.22) !important; font-size:10.5px !important; font-weight:700 !important;
  letter-spacing:.08em !important; text-transform:uppercase !important; color:#fff !important;
}
.spotlight-tag svg{ width:11px !important; height:11px !important; }
.spotlight-tag.is-member{ color:#f5c26b !important; border-color:rgba(245,194,107,0.45) !important; }
.spotlight-text{
  margin:0 !important; max-width:52ch !important; font-size:15px !important; line-height:1.55 !important; color:rgba(255,255,255,0.78) !important;
  display:-webkit-box !important; -webkit-line-clamp:3 !important; -webkit-box-orient:vertical !important; overflow:hidden !important;
}
.spotlight-actions{ display:flex !important; flex-wrap:wrap !important; gap:12px !important; margin-top:6px !important; }
.spotlight-btn{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:9px !important;
  height:48px !important; padding:0 24px !important; border-radius:999px !important;
  font-size:15px !important; font-weight:700 !important; text-decoration:none !important; white-space:nowrap !important;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.spotlight-btn svg{ width:19px !important; height:19px !important; margin-left:-4px !important; }
.spotlight-btn.is-primary{ background:#fff !important; color:#0a0a0b !important; box-shadow:0 10px 30px -12px rgba(255,255,255,0.5) !important; }
.spotlight-btn.is-primary:hover{ transform:translateY(-2px) !important; box-shadow:0 16px 36px -12px rgba(255,255,255,0.6) !important; }
.spotlight-btn.is-ghost{
  background:rgba(255,255,255,0.1) !important; color:#fff !important; border:1px solid rgba(255,255,255,0.2) !important;
  backdrop-filter:blur(14px) !important; -webkit-backdrop-filter:blur(14px) !important;
}
.spotlight-btn.is-ghost:hover{ background:rgba(255,255,255,0.18) !important; transform:translateY(-2px) !important; }
.spotlight-sound{
  position:absolute !important; right:22px !important; bottom:24px !important; z-index:3 !important;
  width:44px !important; height:44px !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important;
  background:rgba(9,9,11,0.45) !important; color:#fff !important; border:1px solid rgba(255,255,255,0.25) !important;
  backdrop-filter:blur(12px) !important; -webkit-backdrop-filter:blur(12px) !important;
  animation:spotUp .5s ease both !important; transition:background .2s ease !important;
}
.spotlight-sound:hover{ background:rgba(255,255,255,0.18) !important; }
.spotlight-sound svg{ width:19px !important; height:19px !important; }
.spotlight-sound.hidden{ display:none !important; }
.spotlight-progress{
  position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; height:3px !important; z-index:3 !important;
  background:rgba(255,255,255,0.08) !important; opacity:0 !important; transition:opacity .6s ease !important;
}
.spotlight-progress span{
  display:block !important; height:100% !important; background:rgba(255,255,255,0.75) !important;
  transform:scaleX(0); transform-origin:left center !important; transition:transform .3s linear !important;
}
.spotlight-card.is-previewing .spotlight-progress{ opacity:1 !important; }
.spotlight-card.is-unmuted .spotlight-progress{ opacity:0 !important; }
.spotlight-btn:focus-visible, .spotlight-sound:focus-visible{ outline:2px solid #fff !important; outline-offset:3px !important; }
@keyframes spotIn{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes spotUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes spotKen{ from{ transform:scale(1.09); } to{ transform:scale(1); } }
@keyframes spotPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,0.7); } 70%{ box-shadow:0 0 0 9px rgba(255,255,255,0); } 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); } }
@media (max-width:1100px){
  .spotlight-content{ width:min(600px, 74%) !important; }
}
@media (max-width:720px){
  .spotlight{ margin-bottom:24px !important; }
  .spotlight-skeleton{ height:420px !important; }
  .spotlight-ambient{ top:4% !important; height:70% !important; opacity:.32 !important; }
  .spotlight-card{ height:auto !important; display:flex !important; flex-direction:column !important; border-radius:18px !important; }
  .spotlight-media{ position:relative !important; inset:auto !important; aspect-ratio:16/9 !important; flex-shrink:0 !important; }
  .spotlight-shade{ background:linear-gradient(0deg, #0d0d10 0%, rgba(13,13,16,0.6) 22%, rgba(13,13,16,0) 55%) !important; }
  .spotlight-content{
    position:relative !important; inset:auto !important; width:auto !important;
    padding:0 18px 20px !important; margin-top:-34px !important; gap:11px !important; justify-content:flex-start !important;
  }
  .spotlight-eyebrow{ font-size:10.5px !important; padding:5px 11px 5px 9px !important; }
  .spotlight-title{ font-size:clamp(24px, 7vw, 30px) !important; }
  .spotlight-text{ font-size:14px !important; }
  .spotlight-meta{ font-size:12.5px !important; }
  .spotlight-actions{ gap:10px !important; }
  .spotlight-btn{ flex:1 1 0 !important; height:46px !important; padding:0 16px !important; font-size:14.5px !important; }
  .spotlight-sound{ top:12px !important; right:12px !important; bottom:auto !important; width:38px !important; height:38px !important; }
  .spotlight-progress{ bottom:auto !important; top:calc((100vw - 36px) * 9 / 16 - 3px) !important; }
}
@media (prefers-reduced-motion: reduce){
  .spotlight, .spotlight-img, .spotlight-content > *, .spotlight-dot, .spotlight-sound{ animation:none !important; }
}
body.theme-aero .spotlight-card{ border-color:var(--aero-border) !important; box-shadow:0 40px 90px -40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.25) !important; }
body.theme-aero .spotlight-ambient{ opacity:.55 !important; }
/* Admin-Tab "Spotlight" */
.spot-status{
  display:flex !important; align-items:center !important; flex-wrap:wrap !important; gap:8px !important; margin-bottom:14px !important;
  padding:10px 14px !important; border-radius:10px !important; border:1px solid var(--border) !important; background:var(--surface) !important;
  font-size:13.5px !important; color:var(--text-dim) !important;
}
.spot-status b{ color:var(--text) !important; }
.spot-status span:not(.spot-status-dot){ color:var(--text-faint) !important; }
.spot-status-dot{ width:8px !important; height:8px !important; border-radius:50% !important; background:var(--text-faint) !important; }
.spot-status.is-on .spot-status-dot{ background:#4ade80 !important; box-shadow:0 0 0 4px rgba(74,222,128,0.15) !important; }
.spot-form{ display:flex !important; flex-direction:column !important; gap:14px !important; }
.admin-form-row input[type="number"]{
  background:var(--surface-hi) !important; border:1px solid var(--border) !important; color:var(--text) !important;
  border-radius:var(--radius-s) !important; padding:9px 12px !important; font-size:13.5px !important; font-family:var(--font-body) !important;
}
.admin-form-row input[type="number"]:focus{ outline:none !important; border-color:var(--accent) !important; }
.admin-form-row input[type="number"]:disabled{ opacity:.45 !important; }
.spot-count{ align-self:flex-end !important; font-size:11.5px !important; color:var(--text-faint) !important; font-variant-numeric:tabular-nums !important; }
.admin-form-note{ font-size:12.5px !important; line-height:1.5 !important; color:var(--text-faint) !important; margin-top:-6px !important; }
.admin-form-note.is-warn{ color:#f5c26b !important; }
.spot-rules{
  margin:8px 0 0 !important; padding:10px 12px !important; border-radius:8px !important; background:var(--bg) !important;
  border:1px solid var(--border) !important; color:var(--text) !important; font-size:12px !important; white-space:pre !important; overflow-x:auto !important; user-select:all !important;
}
.spot-admin-preview{ position:relative !important; margin-top:12px !important; pointer-events:none !important; }
.spot-admin-preview .spotlight{ margin:0 !important; }
.spot-admin-preview .spotlight-card{ height:clamp(300px, 30vw, 440px) !important; }
.spot-admin-preview .spotlight, .spot-admin-preview .spotlight *{ animation:none !important; }
.spot-admin-preview.is-off .spotlight{ opacity:.4 !important; filter:grayscale(1) !important; }
.spot-off-badge{
  position:absolute !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important;
  padding:8px 14px !important; border-radius:999px !important; background:rgba(9,9,11,0.85) !important;
  border:1px solid var(--border) !important; font-size:13px !important; font-weight:600 !important; color:var(--text) !important;
}
@media (max-width:720px){ .spot-admin-preview .spotlight-card{ height:auto !important; } }
/* Titel in der Display-Schrift (überstimmt die globale #main-Schriftregel) */
#main #home-spotlight .spotlight-title, #main #home-spotlight .spotlight-title a,
#main #spot-admin-preview .spotlight-title, #main #spot-admin-preview .spotlight-title a{ font-family:var(--font-display) !important; }
/* ============================================================
   v5.11 — LADEBILDSCHIRM (statt vorgerendertem SEO-Text)
   ============================================================ */
#sv-splash{
  position:fixed !important; inset:0 !important; z-index:100000 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background:radial-gradient(ellipse 60% 45% at 50% 46%, rgba(255,255,255,0.045), transparent 70%), var(--bg) !important;
  transition:opacity .45s ease, visibility 0s linear .45s !important;
}
#sv-splash.is-done{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
.sv-splash-inner{
  display:flex !important; flex-direction:column !important; align-items:center !important; gap:30px !important;
  animation:svSplashIn .5s cubic-bezier(.16,1,.3,1) both !important;
}
.sv-splash-logo{
  height:52px !important; width:auto !important; max-width:70vw !important; display:block !important;
  opacity:0 !important; transform:translateY(4px) !important; transition:opacity .4s ease, transform .4s ease !important;
}
.sv-splash-logo.is-loaded{ opacity:1 !important; transform:none !important; }
.sv-splash-spinner{
  width:30px !important; height:30px !important; border-radius:50% !important; display:block !important;
  border:2.5px solid rgba(255,255,255,0.12) !important; border-top-color:#fff !important;
  animation:svSpin .8s linear infinite !important;
}
@keyframes svSpin{ to{ transform:rotate(360deg); } }
@keyframes svSplashIn{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .sv-splash-spinner{ animation-duration:1.6s !important; }
  .sv-splash-inner{ animation:none !important; }
}
body.theme-aero #sv-splash{ background:#000208 !important; }
/* ============================================================
   v5.12 — LADE-ANZEIGE IM PLAYER + ADMIN "VIDEO-CHECK"
   ============================================================ */
.sv-buffering{
  position:absolute !important; left:50% !important; top:50% !important; z-index:4 !important;
  width:64px !important; height:64px !important; margin:-32px 0 0 -32px !important; border-radius:50% !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background:rgba(9,9,11,0.45) !important; backdrop-filter:blur(6px) !important; -webkit-backdrop-filter:blur(6px) !important;
  opacity:0 !important; pointer-events:none !important; transition:opacity .2s ease !important;
}
.sv-buffering span{
  width:34px !important; height:34px !important; border-radius:50% !important; display:block !important;
  border:3px solid rgba(255,255,255,0.18) !important; border-top-color:#fff !important;
  animation:svSpin .8s linear infinite !important;
}
/* kurz verzögert einblenden -> kein Flackern, wenn es sofort losgeht */
.sv-player.is-buffering .sv-buffering{ opacity:1 !important; transition-delay:.25s !important; }
.sv-player.is-buffering .sv-bigplay{ opacity:0 !important; pointer-events:none !important; }
/* Admin: Video-Check */
.vc-intro{ font-size:13.5px !important; line-height:1.6 !important; color:var(--text-dim) !important; margin:0 0 14px !important; max-width:820px !important; }
.vc-table-wrap{ overflow-x:auto !important; border:1px solid var(--border) !important; border-radius:12px !important; }
.vc-table{ width:100% !important; border-collapse:collapse !important; font-size:13px !important; }
.vc-table th{ text-align:left !important; font-weight:600 !important; color:var(--text-faint) !important; font-size:11.5px !important; text-transform:uppercase !important; letter-spacing:.06em !important; padding:10px 12px !important; border-bottom:1px solid var(--border) !important; white-space:nowrap !important; }
.vc-table td{ padding:11px 12px !important; border-bottom:1px solid var(--border) !important; vertical-align:top !important; color:var(--text) !important; }
.vc-table tr:last-child td{ border-bottom:none !important; }
.vc-name{ font-weight:600 !important; }
.vc-file{ font-size:11.5px !important; color:var(--text-faint) !important; word-break:break-all !important; margin-top:2px !important; }
.vc-num{ font-variant-numeric:tabular-nums !important; white-space:nowrap !important; }
.vc-pill{ display:inline-flex !important; align-items:center !important; gap:5px !important; padding:2px 8px !important; border-radius:999px !important; font-size:11.5px !important; font-weight:600 !important; white-space:nowrap !important; }
.vc-pill.ok{ background:rgba(74,222,128,0.12) !important; color:#4ade80 !important; }
.vc-pill.warn{ background:rgba(245,194,107,0.12) !important; color:#f5c26b !important; }
.vc-pill.bad{ background:rgba(248,113,113,0.13) !important; color:#f87171 !important; }
.vc-pill.wait{ background:var(--surface-hi) !important; color:var(--text-faint) !important; }
.vc-hints{ margin:6px 0 0 !important; padding:0 !important; list-style:none !important; font-size:12.5px !important; line-height:1.5 !important; color:var(--text-dim) !important; }
.vc-hints li{ margin-top:3px !important; }
.vc-hints li::before{ content:'→ ' !important; color:var(--text-faint) !important; }
.vc-drop{
  margin-top:14px !important; border:1.5px dashed var(--surface-hi-2) !important; border-radius:12px !important; padding:26px 18px !important;
  text-align:center !important; color:var(--text-dim) !important; font-size:13.5px !important; cursor:pointer !important; transition:border-color .15s ease, background .15s ease !important;
}
.vc-drop:hover, .vc-drop.is-over{ border-color:var(--accent) !important; background:var(--surface) !important; }
.vc-drop b{ color:var(--text) !important; }
.vc-result{ margin-top:12px !important; }
.vc-progress{ font-size:12.5px !important; color:var(--text-faint) !important; font-variant-numeric:tabular-nums !important; }
.vc-actions{ display:flex !important; gap:8px !important; flex-wrap:wrap !important; margin-top:8px !important; }
.vc-actions .btn{ height:32px !important; font-size:12.5px !important; padding:0 12px !important; }
/* ============================================================
   v5.14 — SALICETI STUDIO (Kanalverwaltung)
   ============================================================ */
body.studio-mode #view-admin > .page-heading{ display:none !important; }
@media (min-width:861px){
  body.studio-mode #sidebar{ display:none !important; }
  body.studio-mode #main, body.studio-mode #main.sidebar-collapsed{ margin-left:0 !important; padding:0 !important; }
}
.studio{ display:grid !important; grid-template-columns:256px minmax(0,1fr) !important; min-height:calc(100vh - var(--header-h)) !important; }
body.studio-collapsed .studio{ grid-template-columns:76px minmax(0,1fr) !important; }
.studio-nav{
  position:sticky !important; top:var(--header-h) !important; align-self:start !important;
  height:calc(100vh - var(--header-h)) !important; overflow-y:auto !important; overflow-x:hidden !important;
  display:flex !important; flex-direction:column !important; gap:6px !important;
  padding:22px 12px 16px !important; border-right:1px solid var(--border) !important; background:var(--bg) !important;
}
.studio-channel{ position:relative !important; display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; gap:12px !important; padding:4px 4px 18px !important; }
.studio-avatar{
  width:108px !important; height:108px !important; border-radius:50% !important; overflow:hidden !important; display:flex !important; align-items:center !important; justify-content:center !important;
  background:var(--surface-hi-2) !important; box-shadow:0 0 0 1px var(--border), 0 12px 32px -12px rgba(0,0,0,.8) !important; transition:transform .2s ease !important;
}
.studio-avatar:hover{ transform:scale(1.03) !important; }
.studio-avatar img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
.studio-avatar span{ font-size:40px !important; font-weight:700 !important; color:var(--text-dim) !important; }
.studio-channel-meta{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:2px !important; min-width:0 !important; max-width:100% !important; }
.studio-channel-label{ font-size:12.5px !important; font-weight:600 !important; color:var(--text) !important; }
.studio-channel-name{
  display:inline-flex !important; align-items:center !important; gap:5px !important; max-width:100% !important;
  background:none !important; border:none !important; color:var(--text-dim) !important; font-size:12.5px !important; padding:3px 8px !important; border-radius:6px !important;
}
.studio-channel-name span{ overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
.studio-channel-name.is-switch{ cursor:pointer !important; }
.studio-channel-name.is-switch:hover{ background:var(--surface-hi) !important; color:var(--text) !important; }
.studio-channel-name svg{ width:14px !important; height:14px !important; flex-shrink:0 !important; }
.studio-channel-name:disabled{ cursor:default !important; opacity:1 !important; }
.studio-switch-menu{
  position:absolute !important; top:calc(100% - 10px) !important; left:4px !important; right:4px !important; z-index:30 !important;
  background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:12px !important; padding:6px !important;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.85) !important; text-align:left !important;
}
.studio-switch-menu[hidden]{ display:none !important; }
.studio-switch-search{ width:100% !important; margin:2px 0 6px !important; background:var(--bg) !important; border:1px solid var(--border) !important; color:var(--text) !important; border-radius:8px !important; padding:8px 10px !important; font-size:13px !important; }
.studio-switch-list{ max-height:300px !important; overflow-y:auto !important; display:flex !important; flex-direction:column !important; gap:2px !important; }
.studio-switch-item{ display:flex !important; align-items:center !important; gap:10px !important; width:100% !important; padding:8px !important; border-radius:8px !important; background:none !important; border:none !important; color:var(--text) !important; font-size:13.5px !important; text-align:left !important; }
.studio-switch-item:hover, .studio-switch-item.active{ background:var(--surface-hi) !important; }
.studio-switch-item[hidden]{ display:none !important; }
.studio-switch-item svg{ width:16px !important; height:16px !important; margin-left:auto !important; color:var(--text-dim) !important; }
.studio-switch-avatar{ width:28px !important; height:28px !important; border-radius:50% !important; overflow:hidden !important; background:var(--surface-hi-2) !important; flex-shrink:0 !important; }
.studio-switch-avatar img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.studio-switch-name{ overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
.studio-links{ display:flex !important; flex-direction:column !important; gap:2px !important; }
.studio-link{
  position:relative !important; display:flex !important; align-items:center !important; gap:16px !important; width:100% !important;
  height:46px !important; padding:0 14px !important; border-radius:10px !important; border:none !important; background:none !important;
  color:var(--text-dim) !important; font-size:14.5px !important; font-weight:500 !important; text-decoration:none !important; text-align:left !important; white-space:nowrap !important;
  transition:background .15s ease, color .15s ease !important;
}
.studio-link svg{ width:22px !important; height:22px !important; flex-shrink:0 !important; }
.studio-link:hover{ background:var(--surface) !important; color:var(--text) !important; }
.studio-link.active{ background:var(--surface-hi) !important; color:var(--text) !important; font-weight:600 !important; }
.studio-link.active::before{ content:'' !important; position:absolute !important; left:-12px !important; top:10px !important; bottom:10px !important; width:3px !important; border-radius:0 3px 3px 0 !important; background:#fff !important; }
.studio-link.is-small{ height:40px !important; font-size:13.5px !important; }
.studio-link.is-small svg{ width:19px !important; height:19px !important; }
.studio-nav-sep{ margin:14px 6px 6px !important; padding-top:14px !important; border-top:1px solid var(--border) !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--text-faint) !important; }
.studio-nav-bottom{ margin-top:auto !important; padding-top:12px !important; border-top:1px solid var(--border) !important; display:flex !important; flex-direction:column !important; gap:2px !important; }
body.studio-collapsed .studio-link span, body.studio-collapsed .studio-channel-meta, body.studio-collapsed .studio-nav-sep span{ display:none !important; }
body.studio-collapsed .studio-link{ justify-content:center !important; padding:0 !important; }
body.studio-collapsed .studio-avatar{ width:44px !important; height:44px !important; }
body.studio-collapsed .studio-avatar span{ font-size:18px !important; }
body.studio-collapsed .studio-nav-sep{ margin:10px 4px 6px !important; padding-top:10px !important; }
.studio-main{ min-width:0 !important; padding:26px 32px 64px !important; }
.studio-head{ display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:16px !important; flex-wrap:wrap !important; margin-bottom:20px !important; }
.studio-title{ margin:0 !important; font-size:27px !important; font-weight:600 !important; letter-spacing:-0.01em !important; color:var(--text) !important; line-height:1.2 !important; }
#main #admin-content .studio-title, #main #admin-content .sd-big{ font-family:var(--font-display) !important; }
.studio-sub{ margin-top:4px !important; font-size:13px !important; color:var(--text-faint) !important; }
.studio-head-actions{ display:flex !important; align-items:center !important; gap:10px !important; flex-wrap:wrap !important; }
.studio-head-actions .btn, .sd-actions .btn{ border-radius:999px !important; }
.studio-head-actions .btn:disabled{ opacity:.4 !important; cursor:not-allowed !important; }
.studio-head-actions .btn-accent:disabled{ background:var(--surface-hi-2) !important; color:var(--text-faint) !important; }
.studio-create{ position:relative !important; }
.studio-create-btn{ border-color:var(--surface-hi-2) !important; }
.studio-menu{
  position:absolute !important; top:calc(100% + 6px) !important; left:0 !important; z-index:40 !important; min-width:230px !important;
  background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:12px !important; padding:6px !important;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.85) !important;
}
.studio-menu.is-right, .studio-head-actions .studio-menu{ left:auto !important; right:0 !important; }
.studio-menu[hidden]{ display:none !important; }
.studio-menu button{ display:flex !important; align-items:center !important; gap:12px !important; width:100% !important; padding:10px 12px !important; border:none !important; background:none !important; border-radius:8px !important; color:var(--text) !important; font-size:14px !important; text-align:left !important; white-space:nowrap !important; }
.studio-menu button:hover{ background:var(--surface-hi) !important; }
.studio-menu button svg{ width:19px !important; height:19px !important; color:var(--text-dim) !important; }
.studio-menu button.is-danger, .studio-menu button.is-danger svg{ color:#f87171 !important; }
.st-kebab{ width:38px !important; padding:0 !important; justify-content:center !important; }
.st-kebab svg{ width:18px !important; height:18px !important; }
/* Dashboard */
.sd-grid{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)) !important; gap:18px !important; align-items:start !important; }
.sd-card{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:14px !important; padding:20px !important; min-width:0 !important; }
.sd-wide{ grid-column:1 / -1 !important; }
.sd-card-title{ display:flex !important; align-items:center !important; gap:8px !important; font-size:16px !important; font-weight:600 !important; color:var(--text) !important; margin-bottom:14px !important; }
.sd-card-title .sd-muted{ font-weight:400 !important; font-size:12.5px !important; }
.sd-muted{ font-size:12.5px !important; color:var(--text-faint) !important; line-height:1.5 !important; }
.sd-count{ min-width:22px !important; height:22px !important; padding:0 7px !important; border-radius:999px !important; background:rgba(245,194,107,.15) !important; color:#f5c26b !important; font-size:12px !important; font-weight:700 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
.sd-latest-media{ display:block !important; width:100% !important; padding:0 !important; border:none !important; background:none !important; margin-bottom:12px !important; cursor:pointer !important; }
.sd-latest-thumb{ position:relative !important; display:block !important; width:100% !important; aspect-ratio:16/9 !important; border-radius:10px !important; overflow:hidden !important; background:var(--surface-hi-2) !important; }
.sd-latest-thumb.is-square{ aspect-ratio:16/9 !important; }
.sd-latest-title{ font-size:15px !important; font-weight:600 !important; line-height:1.35 !important; margin-bottom:3px !important; }
.sd-rows{ margin-top:12px !important; border-top:1px solid var(--border) !important; }
.sd-row{ display:flex !important; justify-content:space-between !important; gap:10px !important; padding:9px 0 !important; border-bottom:1px solid var(--border) !important; font-size:13.5px !important; color:var(--text-dim) !important; }
.sd-row b{ color:var(--text) !important; font-weight:600 !important; font-variant-numeric:tabular-nums !important; }
.sd-actions{ display:flex !important; gap:8px !important; flex-wrap:wrap !important; margin-top:14px !important; }
.sd-big-label{ font-size:13px !important; color:var(--text-dim) !important; }
.sd-big{ font-size:40px !important; font-weight:600 !important; line-height:1.1 !important; margin:2px 0 4px !important; font-variant-numeric:tabular-nums !important; }
.sd-top{ list-style:none !important; margin:0 !important; padding:0 !important; display:flex !important; flex-direction:column !important; gap:4px !important; }
.sd-top button{ display:flex !important; align-items:center !important; gap:12px !important; width:100% !important; padding:6px !important; border:none !important; background:none !important; border-radius:8px !important; color:var(--text) !important; text-align:left !important; }
.sd-top button:hover{ background:var(--surface-hi) !important; }
.sd-rank{ width:16px !important; font-size:13px !important; font-weight:700 !important; color:var(--text-faint) !important; text-align:center !important; flex-shrink:0 !important; }
.sd-top-thumb{ position:relative !important; width:72px !important; aspect-ratio:16/9 !important; border-radius:6px !important; overflow:hidden !important; background:var(--surface-hi-2) !important; flex-shrink:0 !important; }
.sd-top-title{ flex:1 !important; min-width:0 !important; font-size:13.5px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
.sd-top-views{ font-size:12.5px !important; color:var(--text-dim) !important; font-variant-numeric:tabular-nums !important; }
.sd-link{ margin-top:10px !important; background:none !important; border:none !important; color:var(--text) !important; font-size:13px !important; font-weight:600 !important; padding:6px 0 !important; text-decoration:underline !important; text-underline-offset:3px !important; }
.sd-todo{ list-style:none !important; margin:0 !important; padding:0 !important; display:flex !important; flex-direction:column !important; gap:2px !important; }
.sd-todo button{ display:flex !important; gap:10px !important; width:100% !important; padding:8px !important; border:none !important; background:none !important; border-radius:8px !important; text-align:left !important; color:var(--text) !important; }
.sd-todo button:hover{ background:var(--surface-hi) !important; }
.sd-todo b{ display:block !important; font-size:13.5px !important; font-weight:600 !important; }
.sd-todo small{ display:block !important; font-size:12px !important; color:var(--text-faint) !important; margin-top:2px !important; }
.sd-todo-icon svg{ width:18px !important; height:18px !important; color:#f5c26b !important; }
.sd-allgood{ display:flex !important; gap:10px !important; align-items:flex-start !important; font-size:13.5px !important; color:var(--text-dim) !important; line-height:1.5 !important; }
.sd-allgood svg{ width:20px !important; height:20px !important; color:#4ade80 !important; flex-shrink:0 !important; }
.sd-empty{ display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; gap:10px !important; padding:24px 8px !important; color:var(--text-dim) !important; font-size:13.5px !important; }
.sd-empty > svg{ width:40px !important; height:40px !important; color:var(--text-faint) !important; }
.sd-comments{ list-style:none !important; margin:0 !important; padding:0 !important; display:grid !important; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)) !important; gap:6px 24px !important; }
.sd-comments li{ display:flex !important; gap:12px !important; padding:10px 0 !important; border-bottom:1px solid var(--border) !important; }
.sd-c-avatar{ width:34px !important; height:34px !important; border-radius:50% !important; background:var(--surface-hi-2) !important; color:var(--text) !important; display:flex !important; align-items:center !important; justify-content:center !important; font-weight:700 !important; font-size:14px !important; flex-shrink:0 !important; }
.sd-c-body{ min-width:0 !important; flex:1 !important; }
.sd-c-head{ display:flex !important; gap:8px !important; align-items:baseline !important; font-size:13px !important; }
.sd-c-head span{ color:var(--text-faint) !important; font-size:12px !important; }
.sd-c-text{ font-size:13.5px !important; color:var(--text-dim) !important; line-height:1.45 !important; margin:3px 0 6px !important; word-break:break-word !important; }
.sd-c-video{ display:inline-flex !important; align-items:center !important; gap:8px !important; font-size:12px !important; color:var(--text-faint) !important; text-decoration:none !important; max-width:100% !important; }
.sd-c-video:hover{ color:var(--text) !important; }
.sd-c-video > span:last-child{ overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
.sd-c-thumb{ position:relative !important; width:44px !important; aspect-ratio:16/9 !important; border-radius:4px !important; overflow:hidden !important; background:var(--surface-hi-2) !important; flex-shrink:0 !important; }
.sd-c-thumb .st-badge{ display:none !important; }
/* Vorschaubilder (gemeinsam) */
.st-thumb, .sd-latest-thumb, .sd-top-thumb, .sd-c-thumb{ display:block !important; }
.st-thumb img, .sd-latest-thumb img, .sd-top-thumb img, .sd-c-thumb img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
.st-thumb-empty{ width:100% !important; height:100% !important; display:flex !important; align-items:center !important; justify-content:center !important; color:var(--text-faint) !important; }
.st-thumb-empty svg{ width:26% !important; height:auto !important; max-width:34px !important; }
.st-badge{ position:absolute !important; right:5px !important; bottom:5px !important; padding:1px 5px !important; border-radius:4px !important; background:rgba(0,0,0,.82) !important; color:#fff !important; font-size:10.5px !important; font-weight:700 !important; font-style:normal !important; letter-spacing:.02em !important; }
.st-badge.is-yt{ background:#cc0000 !important; }
/* Tabs, Filter, Tabelle */
.st-tabs{ display:flex !important; gap:4px !important; border-bottom:1px solid var(--border) !important; margin-bottom:0 !important; overflow-x:auto !important; }
.st-tab{ position:relative !important; display:inline-flex !important; align-items:center !important; gap:8px !important; padding:12px 16px !important; border:none !important; background:none !important; color:var(--text-dim) !important; font-size:14.5px !important; font-weight:600 !important; white-space:nowrap !important; }
.st-tab span{ font-size:11.5px !important; font-weight:700 !important; color:var(--text-faint) !important; background:var(--surface-hi) !important; padding:1px 7px !important; border-radius:999px !important; }
.st-tab:hover{ color:var(--text) !important; }
.st-tab.active{ color:var(--text) !important; }
.st-tab.active::after{ content:'' !important; position:absolute !important; left:12px !important; right:12px !important; bottom:-1px !important; height:3px !important; border-radius:3px 3px 0 0 !important; background:#fff !important; }
.st-filter{ display:flex !important; align-items:center !important; gap:12px !important; padding:10px 6px !important; border-bottom:1px solid var(--border) !important; margin-bottom:0 !important; }
.st-filter svg{ width:22px !important; height:22px !important; color:var(--text-dim) !important; flex-shrink:0 !important; }
.st-filter input{ flex:1 !important; background:none !important; border:none !important; color:var(--text) !important; font-size:14px !important; padding:6px 0 !important; outline:none !important; }
.st-table-wrap{ overflow-x:auto !important; }
.st-table{ width:100% !important; border-collapse:collapse !important; min-width:820px !important; }
.st-table th{ text-align:left !important; font-size:12px !important; font-weight:600 !important; color:var(--text-dim) !important; padding:12px 14px !important; border-bottom:1px solid var(--border) !important; white-space:nowrap !important; user-select:none !important; }
.st-table th.is-sortable{ cursor:pointer !important; }
.st-table th.is-sortable:hover, .st-table th.is-sorted{ color:var(--text) !important; }
.st-table th svg{ width:14px !important; height:14px !important; vertical-align:-2px !important; margin-left:4px !important; }
.st-table th.num, .st-table td.num{ text-align:right !important; font-variant-numeric:tabular-nums !important; }
.st-table td{ padding:12px 14px !important; border-bottom:1px solid var(--border) !important; vertical-align:top !important; font-size:13.5px !important; color:var(--text-dim) !important; }
.st-table tbody tr{ transition:background .12s ease !important; }
.st-table tbody tr:hover{ background:var(--surface) !important; }
.st-table tbody tr[hidden]{ display:none !important; }
.st-table .col-video{ width:48% !important; min-width:360px !important; }
.st-video{ display:flex !important; gap:16px !important; }
.st-thumb-btn{ padding:0 !important; border:none !important; background:none !important; cursor:pointer !important; flex-shrink:0 !important; }
.st-thumb{ position:relative !important; width:124px !important; aspect-ratio:16/9 !important; border-radius:8px !important; overflow:hidden !important; background:var(--surface-hi-2) !important; }
.st-thumb.is-square img{ object-fit:contain !important; background:#000 !important; }
.st-info{ min-width:0 !important; flex:1 !important; position:relative !important; }
.st-title{ display:block !important; padding:0 !important; border:none !important; background:none !important; text-align:left !important; color:var(--text) !important; font-size:14px !important; font-weight:500 !important; line-height:1.35 !important; margin-bottom:4px !important; cursor:pointer !important; }
.st-title:hover{ text-decoration:underline !important; text-underline-offset:3px !important; }
.st-desc{ font-size:12.5px !important; color:var(--text-faint) !important; line-height:1.45 !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; }
.st-add{ font-style:normal !important; }
.st-actions{ display:none !important; gap:2px !important; margin-top:2px !important; }
.st-actions button, .st-actions a, .st-icon-btn{ width:36px !important; height:36px !important; border-radius:50% !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border:none !important; background:none !important; color:var(--text-dim) !important; }
.st-actions button:hover, .st-actions a:hover, .st-icon-btn:hover{ background:var(--surface-hi-2) !important; color:var(--text) !important; }
.st-actions .is-danger:hover{ color:#f87171 !important; }
.st-actions svg, .st-icon-btn svg{ width:19px !important; height:19px !important; }
@media (hover:hover){ .st-table tbody tr:hover .st-desc{ display:none !important; } .st-table tbody tr:hover .st-actions{ display:flex !important; } }
@media (hover:none){ .st-actions{ display:flex !important; } }
.st-vis{ display:inline-flex !important; align-items:center !important; gap:8px !important; color:var(--text) !important; white-space:nowrap !important; }
.st-vis svg{ width:18px !important; height:18px !important; color:var(--text-dim) !important; }
.st-vis.is-members svg{ color:#f5c26b !important; }
.st-hint{ display:inline-flex !important; align-items:center !important; gap:6px !important; color:#f5c26b !important; font-size:12.5px !important; white-space:nowrap !important; cursor:help !important; }
.st-hint svg{ width:16px !important; height:16px !important; }
.st-dash{ color:var(--text-faint) !important; }
.st-date{ color:var(--text) !important; white-space:nowrap !important; font-variant-numeric:tabular-nums !important; }
.st-date-sub{ font-size:12px !important; color:var(--text-faint) !important; margin-top:2px !important; }
.st-foot{ display:flex !important; justify-content:flex-end !important; padding:14px !important; font-size:12.5px !important; color:var(--text-faint) !important; }
.st-empty{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:8px !important; padding:56px 16px !important; text-align:center !important; color:var(--text-dim) !important; font-size:13.5px !important; }
.st-empty svg{ width:44px !important; height:44px !important; color:var(--text-faint) !important; margin-bottom:4px !important; }
.st-empty b{ color:var(--text) !important; font-size:16px !important; }
.st-pill{ display:inline-flex !important; padding:2px 9px !important; border-radius:999px !important; font-size:12px !important; font-weight:600 !important; }
.st-pill.is-on{ background:rgba(74,222,128,.12) !important; color:#4ade80 !important; }
.chs-cell{ display:flex !important; align-items:center !important; gap:12px !important; }
.chs-cell b{ color:var(--text) !important; font-weight:600 !important; margin-right:4px !important; }
.chs-cell small{ display:block !important; font-size:12px !important; color:var(--text-faint) !important; margin-top:2px !important; }
.chs-avatar{ width:40px !important; height:40px !important; border-radius:50% !important; overflow:hidden !important; background:var(--surface-hi-2) !important; display:flex !important; align-items:center !important; justify-content:center !important; font-weight:700 !important; color:var(--text-dim) !important; flex-shrink:0 !important; }
.chs-avatar img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.chs-actions{ white-space:nowrap !important; text-align:right !important; }
.chs-actions .btn{ height:34px !important; border-radius:999px !important; font-size:13px !important; }
/* Editor */
.st-back{ display:inline-flex !important; align-items:center !important; gap:10px !important; border:none !important; background:none !important; color:var(--text-dim) !important; font-size:14px !important; font-weight:600 !important; padding:6px 10px 6px 4px !important; border-radius:8px !important; margin:-6px 0 10px -4px !important; }
.st-back:hover{ color:var(--text) !important; background:var(--surface) !important; }
.st-back svg{ width:20px !important; height:20px !important; }
.st-editor{ display:grid !important; grid-template-columns:minmax(0,1fr) 360px !important; gap:28px !important; align-items:start !important; }
.st-ed-main{ display:flex !important; flex-direction:column !important; gap:18px !important; min-width:0 !important; }
.st-ed-side{ position:sticky !important; top:calc(var(--header-h) + 20px) !important; display:flex !important; flex-direction:column !important; gap:16px !important; }
.st-box{ display:flex !important; flex-direction:column !important; gap:6px !important; border:1px solid var(--surface-hi-2) !important; border-radius:10px !important; padding:10px 14px 8px !important; transition:border-color .15s ease !important; }
.st-box:focus-within{ border-color:#fff !important; }
.st-box-label{ font-size:12px !important; font-weight:600 !important; color:var(--text-dim) !important; }
.st-box textarea, .st-box input{ background:none !important; border:none !important; outline:none !important; color:var(--text) !important; font-size:14.5px !important; line-height:1.55 !important; resize:vertical !important; padding:0 !important; width:100% !important; font-family:var(--font-body) !important; }
.st-box textarea[readonly]{ color:var(--text-dim) !important; resize:none !important; cursor:default !important; }
.st-box-foot{ display:flex !important; align-items:center !important; gap:6px !important; font-size:11.5px !important; color:var(--text-faint) !important; }
.st-box-foot svg{ width:13px !important; height:13px !important; flex-shrink:0 !important; }
.st-box-foot em{ margin-left:auto !important; font-style:normal !important; font-variant-numeric:tabular-nums !important; }
.st-field-label, .st-section-title{ font-size:15px !important; font-weight:600 !important; color:var(--text) !important; }
.st-section{ display:flex !important; flex-direction:column !important; gap:8px !important; }
.st-section-sub{ font-size:12.5px !important; color:var(--text-faint) !important; line-height:1.5 !important; }
.st-section-sub code{ font-size:11.5px !important; background:var(--surface-hi) !important; padding:1px 5px !important; border-radius:4px !important; color:var(--text-dim) !important; }
.st-input{ width:100% !important; background:var(--surface) !important; border:1px solid var(--surface-hi-2) !important; color:var(--text) !important; border-radius:10px !important; padding:11px 14px !important; font-size:14px !important; font-family:var(--font-body) !important; transition:border-color .15s ease !important; }
.st-input:focus{ outline:none !important; border-color:#fff !important; }
.st-date-input{ max-width:220px !important; color-scheme:dark !important; }
.st-seg{ display:inline-flex !important; gap:4px !important; padding:4px !important; background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:12px !important; margin-top:8px !important; flex-wrap:wrap !important; }
.st-seg button{ display:inline-flex !important; align-items:center !important; gap:8px !important; padding:9px 16px !important; border:none !important; border-radius:9px !important; background:none !important; color:var(--text-dim) !important; font-size:14px !important; font-weight:600 !important; }
.st-seg button svg{ width:18px !important; height:18px !important; }
.st-seg button.active{ background:#fff !important; color:#0a0a0b !important; }
.st-thumb-picker{ display:flex !important; gap:14px !important; align-items:center !important; }
.st-thumb-preview{ width:168px !important; aspect-ratio:16/9 !important; border-radius:10px !important; border:1px dashed var(--surface-hi-2) !important; overflow:hidden !important; flex-shrink:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:4px !important; color:var(--text-faint) !important; font-size:11.5px !important; background:var(--surface) !important; }
.st-thumb-preview.is-square{ width:100px !important; aspect-ratio:1 !important; }
.st-thumb-preview svg{ width:24px !important; height:24px !important; }
.st-thumb-preview img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.st-thumb-preview.is-broken{ border-color:#f87171 !important; }
.st-thumb-preview.is-broken img{ display:none !important; }
.st-thumb-preview.is-broken::after{ content:'Bild nicht ladbar' !important; color:#f87171 !important; font-size:11.5px !important; }
.st-check{ display:inline-flex !important; align-items:center !important; gap:10px !important; font-size:13.5px !important; color:var(--text-dim) !important; cursor:pointer !important; }
.st-check[hidden]{ display:none !important; }
.st-check input{ width:18px !important; height:18px !important; accent-color:#fff !important; }
.st-note{ font-size:12.5px !important; color:var(--text-dim) !important; background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:8px !important; padding:8px 12px !important; line-height:1.5 !important; }
.st-note.is-warn{ color:#f5c26b !important; background:rgba(245,194,107,.07) !important; border-color:rgba(245,194,107,.25) !important; }
.st-note[hidden]{ display:none !important; }
.st-radio-cards{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; }
.st-radio{ display:flex !important; align-items:flex-start !important; gap:12px !important; padding:14px !important; border:1px solid var(--surface-hi-2) !important; border-radius:12px !important; cursor:pointer !important; transition:border-color .15s ease, background .15s ease !important; }
.st-radio:hover{ background:var(--surface) !important; }
.st-radio:has(input:checked){ border-color:#fff !important; background:var(--surface) !important; }
.st-radio input{ margin-top:3px !important; accent-color:#fff !important; width:16px !important; height:16px !important; flex-shrink:0 !important; }
.st-radio-icon svg{ width:22px !important; height:22px !important; color:var(--text-dim) !important; }
.st-radio b{ display:block !important; font-size:14px !important; color:var(--text) !important; font-weight:600 !important; }
.st-radio small{ display:block !important; font-size:12px !important; color:var(--text-faint) !important; margin-top:3px !important; line-height:1.45 !important; }
.st-radio.is-disabled{ opacity:.4 !important; cursor:not-allowed !important; }
.st-preview-card{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:14px !important; overflow:hidden !important; }
.st-preview-media{ aspect-ratio:16/9 !important; background:#000 !important; position:relative !important; }
.st-preview-media video, .st-preview-media iframe{ width:100% !important; height:100% !important; display:block !important; background:#000 !important; }
.st-media-empty{ position:absolute !important; inset:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:8px !important; color:var(--text-faint) !important; font-size:12.5px !important; background:var(--surface-hi) !important; }
.st-media-empty svg{ width:34px !important; height:34px !important; }
.st-yt-preview{ position:absolute !important; inset:0 !important; display:block !important; }
.st-yt-preview img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.st-yt-play{ position:absolute !important; left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important; width:64px !important; height:44px !important; border-radius:12px !important; background:#cc0000 !important; color:#fff !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.st-yt-play svg{ width:24px !important; height:24px !important; }
.st-yt-preview em{ position:absolute !important; left:10px !important; bottom:10px !important; font-style:normal !important; font-size:12px !important; font-weight:600 !important; color:#fff !important; background:rgba(0,0,0,.7) !important; padding:3px 8px !important; border-radius:6px !important; }
.st-music-preview{ position:absolute !important; inset:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:12px !important; padding:14px !important; background:var(--surface-hi) !important; color:var(--text-faint) !important; }
.st-music-preview img{ height:60% !important; aspect-ratio:1 !important; object-fit:cover !important; border-radius:8px !important; }
.st-music-preview > svg{ width:40px !important; height:40px !important; }
.st-music-preview audio{ width:100% !important; height:36px !important; }
.st-preview-rows{ padding:6px 16px 10px !important; }
.st-preview-row{ padding:10px 0 !important; border-bottom:1px solid var(--border) !important; }
.st-preview-row:last-child{ border-bottom:none !important; }
.st-preview-row > span{ display:block !important; font-size:12px !important; color:var(--text-faint) !important; margin-bottom:3px !important; }
.st-preview-val{ font-size:13.5px !important; color:var(--text) !important; word-break:break-all !important; }
.st-copy{ display:flex !important; align-items:center !important; gap:6px !important; min-width:0 !important; }
.st-copy a{ flex:1 !important; min-width:0 !important; font-size:13.5px !important; color:#7cc4ff !important; text-decoration:none !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
.st-copy a:hover{ text-decoration:underline !important; }
.st-copy button{ width:34px !important; height:34px !important; border-radius:50% !important; border:none !important; background:none !important; color:var(--text-dim) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; }
.st-copy button:hover{ background:var(--surface-hi-2) !important; color:var(--text) !important; }
.st-copy button svg{ width:18px !important; height:18px !important; }
.st-google{ background:#fff !important; border-radius:14px !important; padding:16px !important; color:#202124 !important; font-family:Arial, Helvetica, sans-serif !important; }
#main #admin-content .st-google, #main #admin-content .st-google *{ font-family:Arial, Helvetica, sans-serif !important; }
.st-google-label{ font-size:11px !important; font-weight:700 !important; letter-spacing:.08em !important; text-transform:uppercase !important; color:#70757a !important; margin-bottom:10px !important; }
.st-google-site{ display:flex !important; align-items:center !important; gap:10px !important; margin-bottom:6px !important; }
.st-google-fav{ width:26px !important; height:26px !important; border-radius:50% !important; background:#f1f3f4 url("/videopage/assets/sv-icon-48.png") center/18px no-repeat !important; border:1px solid #dadce0 !important; flex-shrink:0 !important; }
.st-google-site b{ display:block !important; font-size:13.5px !important; font-weight:400 !important; color:#202124 !important; }
.st-google-site small{ display:block !important; font-size:12px !important; color:#4d5156 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; max-width:260px !important; }
.st-google-title{ font-size:19px !important; line-height:1.3 !important; color:#1a0dab !important; margin-bottom:4px !important; }
.st-google-desc{ font-size:13.5px !important; line-height:1.55 !important; color:#4d5156 !important; }
.st-google-desc.is-off{ font-style:italic !important; color:#9aa0a6 !important; }
/* Anpassen */
.cz-grid{ display:grid !important; grid-template-columns:minmax(0,1fr) 340px !important; gap:28px !important; align-items:start !important; margin-top:22px !important; }
.cz-main{ display:flex !important; flex-direction:column !important; gap:14px !important; min-width:0 !important; }
.cz-block{ display:flex !important; flex-direction:column !important; gap:12px !important; padding:20px !important; background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:14px !important; }
.cz-block h3{ margin:0 !important; font-size:16px !important; font-weight:600 !important; color:var(--text) !important; }
.cz-block > p{ margin:0 !important; font-size:13px !important; color:var(--text-faint) !important; line-height:1.55 !important; }
.cz-row{ display:flex !important; align-items:center !important; gap:14px !important; }
.cz-row .btn{ border-radius:999px !important; flex-shrink:0 !important; }
.cz-avatar-prev{ width:84px !important; height:84px !important; border-radius:50% !important; overflow:hidden !important; background:var(--surface-hi-2) !important; display:flex !important; align-items:center !important; justify-content:center !important; color:var(--text-faint) !important; flex-shrink:0 !important; }
.cz-avatar-prev svg, .cz-banner-prev svg{ width:26px !important; height:26px !important; }
.cz-avatar-prev img, .cz-banner-prev img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
.cz-banner-prev{ width:100% !important; aspect-ratio:6.2/1 !important; border-radius:10px !important; overflow:hidden !important; background:var(--surface-hi-2) !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; color:var(--text-faint) !important; font-size:12.5px !important; }
.cz-side{ position:sticky !important; top:calc(var(--header-h) + 20px) !important; display:flex !important; flex-direction:column !important; gap:12px !important; }
.cz-preview-label{ font-size:12px !important; font-weight:700 !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:var(--text-faint) !important; }
.cz-preview{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:14px !important; overflow:hidden !important; }
.cz-prev-banner{ aspect-ratio:4/1 !important; background:linear-gradient(135deg, var(--surface-hi-2), var(--surface-hi)) !important; }
.cz-prev-banner img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
.cz-prev-head{ display:flex !important; align-items:center !important; gap:12px !important; padding:14px 16px 16px !important; }
.cz-prev-avatar{ width:56px !important; height:56px !important; border-radius:50% !important; overflow:hidden !important; background:var(--surface-hi-2) !important; display:flex !important; align-items:center !important; justify-content:center !important; font-weight:700 !important; font-size:20px !important; color:var(--text-dim) !important; flex-shrink:0 !important; margin-top:-34px !important; border:3px solid var(--surface) !important; }
.cz-prev-avatar img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.cz-prev-name{ display:flex !important; align-items:center !important; gap:5px !important; font-size:16px !important; font-weight:600 !important; color:var(--text) !important; }
.cz-prev-meta{ font-size:12px !important; color:var(--text-faint) !important; margin-top:2px !important; }
.cz-note{ display:flex !important; gap:8px !important; font-size:12.5px !important; color:var(--text-faint) !important; line-height:1.5 !important; margin:0 !important; }
.cz-note svg{ width:15px !important; height:15px !important; flex-shrink:0 !important; margin-top:2px !important; }
.cz-kv{ display:flex !important; justify-content:space-between !important; align-items:center !important; gap:16px !important; padding:8px 0 !important; border-bottom:1px solid var(--border) !important; font-size:13.5px !important; color:var(--text-dim) !important; }
.cz-kv b{ color:var(--text) !important; font-weight:600 !important; }
.cz-kv .st-copy{ max-width:65% !important; }
.cz-muted{ font-size:13px !important; color:var(--text-faint) !important; }
.cz-chips{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; }
.cz-chip{ display:inline-flex !important; align-items:center !important; gap:8px !important; padding:5px 6px 5px 10px !important; border-radius:999px !important; background:var(--surface-hi) !important; border:1px solid var(--border) !important; font-size:12.5px !important; color:var(--text) !important; max-width:100% !important; }
.cz-chip svg{ width:15px !important; height:15px !important; color:var(--text-dim) !important; flex-shrink:0 !important; }
.cz-chip code{ font-size:12px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
.cz-chip em{ font-style:normal !important; font-size:11px !important; font-weight:700 !important; color:#0a0a0b !important; background:#fff !important; border-radius:999px !important; padding:0 6px !important; }
.cz-chip button{ width:22px !important; height:22px !important; border-radius:50% !important; border:none !important; background:none !important; color:var(--text-dim) !important; font-size:16px !important; line-height:1 !important; }
.cz-chip button:hover{ background:var(--surface-hi-2) !important; color:#f87171 !important; }
.cz-socials{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important; }
.cz-social{ display:flex !important; flex-direction:column !important; gap:6px !important; }
.cz-social > span{ display:flex !important; align-items:center !important; gap:8px !important; font-size:12.5px !important; font-weight:600 !important; color:var(--text-dim) !important; }
.cz-social > span svg{ width:16px !important; height:16px !important; }
.st-switch{ display:flex !important; align-items:flex-start !important; gap:14px !important; cursor:pointer !important; padding:4px 0 !important; }
.st-switch input{ position:absolute !important; opacity:0 !important; width:1px !important; height:1px !important; }
.st-switch-ui{ position:relative !important; width:40px !important; height:22px !important; border-radius:999px !important; background:var(--surface-hi-2) !important; flex-shrink:0 !important; transition:background .2s ease !important; margin-top:1px !important; }
.st-switch-ui::after{ content:'' !important; position:absolute !important; left:3px !important; top:3px !important; width:16px !important; height:16px !important; border-radius:50% !important; background:var(--text-dim) !important; transition:transform .2s ease, background .2s ease !important; }
.st-switch input:checked + .st-switch-ui{ background:#fff !important; }
.st-switch input:checked + .st-switch-ui::after{ transform:translateX(18px) !important; background:#0a0a0b !important; }
.st-switch input:focus-visible + .st-switch-ui{ outline:2px solid #fff !important; outline-offset:2px !important; }
.st-switch b{ display:block !important; font-size:14px !important; color:var(--text) !important; font-weight:600 !important; }
.st-switch small{ display:block !important; font-size:12.5px !important; color:var(--text-faint) !important; margin-top:2px !important; }
.st-field-inline{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; font-size:13.5px !important; color:var(--text-dim) !important; }
.st-field-inline .st-input{ max-width:160px !important; }
/* Dialog */
.st-modal-backdrop{ position:fixed !important; inset:0 !important; z-index:2000 !important; background:rgba(0,0,0,.6) !important; backdrop-filter:blur(4px) !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:16px !important; animation:fadeIn .2s ease !important; }
.st-modal{ width:min(520px, 100%) !important; max-height:calc(100vh - 32px) !important; overflow-y:auto !important; background:var(--bg-elevated) !important; border:1px solid var(--border) !important; border-radius:16px !important; padding:24px !important; display:flex !important; flex-direction:column !important; gap:14px !important; box-shadow:0 30px 80px -20px rgba(0,0,0,.9) !important; font-family:var(--font-body) !important; color:var(--text) !important; }
.st-modal h3{ margin:0 0 4px !important; font-size:20px !important; font-weight:600 !important; font-family:var(--font-display) !important; }
.st-modal-actions{ display:flex !important; justify-content:flex-end !important; gap:10px !important; margin-top:6px !important; }
.st-modal-actions .btn{ border-radius:999px !important; }
/* Bestehende Werkzeuge (Spotlight, Video-Check, SEO) im Studio */
.studio-main .admin-panel-header{ margin-bottom:18px !important; }
.studio-main .admin-panel-header .admin-section-title{ font-size:27px !important; }
/* Mobil */
@media (max-width:1180px){
  .st-editor, .cz-grid{ grid-template-columns:minmax(0,1fr) !important; }
  .st-ed-side, .cz-side{ position:static !important; }
}
@media (max-width:860px){
  .studio, body.studio-collapsed .studio{ grid-template-columns:minmax(0,1fr) !important; min-height:0 !important; }
  .studio-nav{ position:static !important; height:auto !important; overflow:visible !important; border-right:none !important; border-bottom:1px solid var(--border) !important; padding:12px 0 0 !important; gap:0 !important; }
  .studio-channel{ flex-direction:row !important; text-align:left !important; gap:12px !important; padding:0 2px 12px !important; }
  .studio-avatar{ width:44px !important; height:44px !important; }
  .studio-avatar span{ font-size:18px !important; }
  .studio-channel-meta{ align-items:flex-start !important; }
  .studio-channel-name{ padding:2px 0 !important; font-size:14px !important; color:var(--text) !important; font-weight:600 !important; }
  .studio-switch-menu{ top:100% !important; }
  .studio-links{ flex-direction:row !important; overflow-x:auto !important; gap:4px !important; padding-bottom:8px !important; scrollbar-width:none !important; }
  .studio-links::-webkit-scrollbar{ display:none !important; }
  .studio-link{ width:auto !important; height:38px !important; padding:0 14px !important; gap:8px !important; border-radius:999px !important; background:var(--surface) !important; font-size:13.5px !important; flex-shrink:0 !important; }
  .studio-link svg{ width:18px !important; height:18px !important; }
  .studio-link.active{ background:#fff !important; color:#0a0a0b !important; }
  .studio-link.active::before{ display:none !important; }
  .studio-nav-sep{ display:flex !important; align-items:center !important; margin:0 4px !important; padding:0 !important; border-top:none !important; border-left:1px solid var(--border) !important; }
  .studio-nav-sep span{ display:none !important; }
  .studio-nav-bottom{ display:none !important; }
  .studio-main{ padding:18px 0 40px !important; }
  .studio-title{ font-size:23px !important; }
  .sd-grid{ grid-template-columns:minmax(0,1fr) !important; }
  .st-radio-cards, .cz-socials{ grid-template-columns:1fr !important; }
  .st-thumb-picker, .cz-row{ flex-direction:column !important; align-items:stretch !important; }
  .st-thumb-preview{ width:100% !important; }
  .st-thumb-preview.is-square{ width:140px !important; }
  .cz-avatar-prev{ align-self:center !important; }
  .st-table{ min-width:640px !important; }
  .st-table .col-video{ min-width:280px !important; }
  .st-thumb{ width:96px !important; }
  .studio-head-actions{ width:100% !important; }
}
@media (max-width:640px){
  .st-table, .st-table tbody{ display:block !important; min-width:0 !important; width:auto !important; }
  .st-table thead{ display:none !important; }
  .st-table tbody tr{ display:grid !important; grid-template-columns:100px auto auto minmax(0,1fr) !important; column-gap:12px !important; row-gap:6px !important; align-items:center !important; padding:14px 0 12px !important; border-bottom:1px solid var(--border) !important; }
  .st-table tbody tr:hover{ background:none !important; }
  .st-table td{ display:block !important; border:none !important; padding:0 !important; font-size:12px !important; min-width:0 !important; width:auto !important; }
  .st-table td.col-video{ grid-column:1 / -1 !important; }
  .st-table td:nth-child(2){ grid-column:2 !important; }
  .st-table td:nth-child(4){ grid-column:3 !important; }
  .st-table td:nth-child(5){ grid-column:4 !important; text-align:left !important; }
  .st-table td:nth-child(3), .st-table td:nth-child(6){ display:none !important; }
  .st-table td.num::after{ content:' Aufrufe' !important; color:var(--text-faint) !important; }
  .st-table td .st-date-sub{ display:none !important; }
  .st-table td .st-date{ color:var(--text-dim) !important; }
  .st-vis > span{ display:none !important; }
  .st-vis svg{ width:16px !important; height:16px !important; }
  .st-thumb{ width:100px !important; }
  .st-video{ gap:12px !important; }
  .st-desc{ display:none !important; }
  /* Kanalliste */
  .st-table tr[data-ch]{ grid-template-columns:52px auto auto minmax(0,1fr) !important; }
  .st-table tr[data-ch] td:nth-child(2){ grid-column:2 !important; }
  .st-table tr[data-ch] td:nth-child(2)::after{ content:' Inhalte' !important; color:var(--text-faint) !important; }
  .st-table tr[data-ch] td:nth-child(3){ display:block !important; grid-column:3 !important; }
  .st-table tr[data-ch] td:nth-child(3)::after{ content:' Abos' !important; color:var(--text-faint) !important; }
  .st-table tr[data-ch] td:nth-child(4), .st-table tr[data-ch] td:nth-child(5), .st-table tr[data-ch] td:nth-child(6){ display:none !important; }
  .st-table tr[data-ch] td.chs-actions{ grid-column:4 !important; display:flex !important; justify-content:flex-end !important; gap:4px !important; }
}
/* ============================================================
   v5.15 — KOSTENPFLICHTIGE KANALMITGLIEDSCHAFTEN
   ============================================================ */
#membership-paid.hidden{ display:none !important; }
.mp-card{ display:flex !important; flex-direction:column !important; gap:14px !important; padding:16px !important; border:1px solid var(--surface-hi-2) !important; border-radius:14px !important; background:var(--surface) !important; margin:14px 0 4px !important; }
.mp-price{ display:flex !important; align-items:baseline !important; flex-wrap:wrap !important; gap:4px 10px !important; }
.mp-price b{ font-size:24px !important; font-weight:700 !important; color:var(--text) !important; font-variant-numeric:tabular-nums !important; }
.mp-price span{ font-size:12.5px !important; color:var(--text-faint) !important; }
.mp-seller{ border:1px solid rgba(245,194,107,.35) !important; background:rgba(245,194,107,.06) !important; border-radius:12px !important; padding:12px 14px !important; display:flex !important; flex-direction:column !important; gap:4px !important; }
.mp-seller-label{ font-size:11px !important; font-weight:700 !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:#f5c26b !important; }
.mp-seller-name{ font-size:15.5px !important; font-weight:700 !important; color:var(--text) !important; }
.mp-seller-addr{ font-size:12.5px !important; line-height:1.5 !important; color:var(--text-dim) !important; }
.mp-seller-addr a, .mp-seller-links a, .mp-confirm a, .mb-legal a{ color:var(--text) !important; text-decoration:underline !important; text-underline-offset:2px !important; }
.mp-seller-type{ font-size:12px !important; line-height:1.5 !important; color:var(--text-faint) !important; margin-top:4px !important; }
.mp-seller-type b{ color:var(--text-dim) !important; }
.mp-seller-links{ display:flex !important; flex-wrap:wrap !important; gap:4px 14px !important; font-size:12.5px !important; margin-top:2px !important; }
.mp-platform{ margin:0 !important; font-size:12.5px !important; line-height:1.5 !important; color:var(--text-dim) !important; }
.mp-platform b{ color:var(--text) !important; }
.mp-steps{ margin:0 !important; padding-left:20px !important; display:flex !important; flex-direction:column !important; gap:8px !important; font-size:12.5px !important; line-height:1.5 !important; color:var(--text-dim) !important; }
.mp-email{ display:flex !important; align-items:center !important; gap:8px !important; margin-top:5px !important; }
.mp-email code{ font-size:12.5px !important; background:var(--bg) !important; border:1px solid var(--border) !important; border-radius:6px !important; padding:4px 8px !important; color:var(--text) !important; word-break:break-all !important; }
.mp-email button{ font-size:12px !important; font-weight:600 !important; border:1px solid var(--border) !important; background:none !important; color:var(--text) !important; border-radius:999px !important; padding:4px 10px !important; flex-shrink:0 !important; }
.mp-warn{ font-size:12.5px !important; line-height:1.5 !important; color:#f5c26b !important; background:rgba(245,194,107,.08) !important; border:1px solid rgba(245,194,107,.25) !important; border-radius:8px !important; padding:8px 10px !important; }
.mp-confirm{ display:flex !important; align-items:flex-start !important; gap:10px !important; font-size:12.5px !important; line-height:1.5 !important; color:var(--text-dim) !important; cursor:pointer !important; }
.mp-confirm input{ width:17px !important; height:17px !important; margin-top:1px !important; flex-shrink:0 !important; accent-color:#fff !important; }
.mp-confirm b{ color:var(--text) !important; }
.mp-card .modal-submit:disabled{ opacity:.45 !important; cursor:not-allowed !important; }
.mp-or{ display:flex !important; align-items:center !important; gap:10px !important; margin:14px 0 4px !important; font-size:12px !important; color:var(--text-faint) !important; }
.mp-or::before, .mp-or::after{ content:'' !important; flex:1 !important; height:1px !important; background:var(--border) !important; }
#membership-continue-btn.hidden{ display:none !important; }
/* Studio: Mitglieder */
.mb-admin, .mb-pending{ display:flex !important; gap:10px !important; align-items:flex-start !important; padding:12px 14px !important; border-radius:12px !important; margin-bottom:16px !important; font-size:13.5px !important; line-height:1.5 !important; }
.mb-admin{ background:var(--surface) !important; border:1px solid var(--border) !important; color:var(--text-dim) !important; }
.mb-admin svg, .mb-pending svg{ width:18px !important; height:18px !important; flex-shrink:0 !important; margin-top:2px !important; }
.mb-admin .sd-link{ margin:0 !important; padding:0 !important; }
.mb-pending{ background:rgba(74,222,128,.08) !important; border:1px solid rgba(74,222,128,.25) !important; color:var(--text-dim) !important; }
.mb-pending svg{ color:#4ade80 !important; }
.mb-pending b{ display:block !important; color:var(--text) !important; }
.mb-intro{ display:grid !important; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) !important; gap:16px !important; margin-bottom:20px !important; }
.mb-steps{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; }
.mb-step{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:14px !important; padding:16px !important; }
.mb-step span{ display:inline-flex !important; width:26px !important; height:26px !important; border-radius:50% !important; background:#fff !important; color:#0a0a0b !important; font-weight:700 !important; font-size:13px !important; align-items:center !important; justify-content:center !important; margin-bottom:10px !important; }
.mb-step b{ display:block !important; font-size:14.5px !important; color:var(--text) !important; margin-bottom:4px !important; }
.mb-step p{ margin:0 !important; font-size:12.5px !important; line-height:1.5 !important; color:var(--text-faint) !important; }
.mb-legal{ border:1px solid rgba(245,194,107,.35) !important; background:rgba(245,194,107,.05) !important; border-radius:14px !important; padding:16px 18px !important; font-size:13px !important; line-height:1.55 !important; color:var(--text-dim) !important; }
.mb-legal-title{ display:flex !important; align-items:center !important; gap:8px !important; margin-bottom:8px !important; }
.mb-legal-title svg{ width:18px !important; height:18px !important; color:#f5c26b !important; flex-shrink:0 !important; }
.mb-legal-title b{ color:var(--text) !important; font-size:14.5px !important; }
.mb-legal p{ margin:0 0 8px !important; }
.mb-legal ul{ margin:0 0 8px !important; padding-left:18px !important; }
.mb-legal li{ margin-bottom:3px !important; }
.mb-legal b{ color:var(--text) !important; }
.mb-form, .mb-add{ display:flex !important; flex-direction:column !important; gap:14px !important; background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:14px !important; padding:20px !important; margin-bottom:20px !important; }
.mb-add.hidden{ display:none !important; }
.mb-form-title{ font-size:17px !important; font-weight:600 !important; color:var(--text) !important; }
.mb-form fieldset{ border:none !important; padding:0 !important; margin:0 !important; display:flex !important; flex-direction:column !important; gap:12px !important; }
.mb-form legend{ font-size:12px !important; font-weight:700 !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:var(--text-faint) !important; margin-bottom:10px !important; padding:0 !important; }
.mb-form fieldset + fieldset{ border-top:1px solid var(--border) !important; padding-top:16px !important; }
.mb-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important; }
.mb-grid-3{ grid-template-columns:1fr 2fr 1.4fr !important; }
.mb-select{ background:none !important; border:none !important; color:var(--text) !important; font-size:14.5px !important; padding:2px 0 !important; outline:none !important; font-family:var(--font-body) !important; }
.mb-select option{ background:var(--surface) !important; }
.st-box input[readonly]{ color:var(--text-dim) !important; }
.st-box.hidden{ display:none !important; }
.mb-preview{ font-size:12.5px !important; color:var(--text-faint) !important; margin-top:-4px !important; }
.mb-preview b{ color:#f5c26b !important; }
.mb-checks .mp-confirm{ font-size:13px !important; }
.mb-submit{ display:flex !important; justify-content:flex-end !important; gap:10px !important; }
.mb-submit .btn{ border-radius:999px !important; }
.mb-summary{ display:grid !important; grid-template-columns:1fr 1fr 2fr !important; gap:14px !important; margin-bottom:18px !important; }
.mb-stat{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:14px !important; padding:16px 18px !important; display:flex !important; flex-direction:column !important; gap:4px !important; min-width:0 !important; }
.mb-stat > span{ font-size:12.5px !important; color:var(--text-faint) !important; }
.mb-stat > b{ font-size:22px !important; font-weight:700 !important; color:var(--text) !important; font-variant-numeric:tabular-nums !important; }
.mb-stat-wide > b{ font-size:16px !important; }
.mb-stat small{ font-size:12px !important; color:var(--text-faint) !important; }
.mb-member{ display:flex !important; align-items:center !important; gap:10px !important; color:var(--text) !important; word-break:break-all !important; }
.mb-note{ max-width:220px !important; font-size:12.5px !important; word-break:break-word !important; }
.st-pill.is-off{ background:rgba(248,113,113,.12) !important; color:#f87171 !important; }
.mb-table .chs-actions .btn{ height:32px !important; font-size:12.5px !important; margin-right:4px !important; }
.mb-foot{ display:flex !important; gap:8px !important; font-size:12.5px !important; color:var(--text-faint) !important; line-height:1.5 !important; margin-top:16px !important; }
.mb-foot svg{ width:15px !important; height:15px !important; flex-shrink:0 !important; margin-top:2px !important; }
@media (max-width:1000px){ .mb-intro{ grid-template-columns:minmax(0,1fr) !important; } .mb-summary{ grid-template-columns:1fr 1fr !important; } .mb-stat-wide{ grid-column:1 / -1 !important; } }
@media (max-width:640px){
  .mb-steps, .mb-grid, .mb-grid-3{ grid-template-columns:minmax(0,1fr) !important; }
  .mb-table tbody tr{ grid-template-columns:auto minmax(0,1fr) !important; }
  .mb-table td:nth-child(2){ grid-column:1 / -1 !important; }
  .mb-table td:nth-child(3), .mb-table td:nth-child(4){ display:none !important; }
  .mb-table td.chs-actions{ grid-column:1 / -1 !important; display:flex !important; gap:6px !important; }
}
.membership-modal-box{ max-width:440px !important; max-height:calc(100vh - 40px) !important; max-height:calc(100dvh - 40px) !important; overflow-y:auto !important; overscroll-behavior:contain !important; }
.mb-form.hidden{ display:none !important; }
/* v5.16 — Antrag als PDF */
.mb-next{ background:var(--surface) !important; border:1px solid rgba(74,222,128,.3) !important; border-radius:14px !important; padding:20px !important; margin-bottom:20px !important; }
.mb-next-steps{ list-style:none !important; counter-reset:mbn !important; margin:14px 0 0 !important; padding:0 !important; display:flex !important; flex-direction:column !important; gap:14px !important; }
.mb-next-steps li{ counter-increment:mbn !important; position:relative !important; padding-left:40px !important; display:flex !important; flex-direction:column !important; gap:4px !important; font-size:13.5px !important; color:var(--text-dim) !important; line-height:1.5 !important; }
.mb-next-steps li::before{ content:counter(mbn) !important; position:absolute !important; left:0 !important; top:-2px !important; width:26px !important; height:26px !important; border-radius:50% !important; background:#fff !important; color:#0a0a0b !important; font-weight:700 !important; font-size:13px !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.mb-next-steps li:first-child::before{ content:'✓' !important; background:#4ade80 !important; }
.mb-next-steps b{ color:var(--text) !important; font-size:14.5px !important; }
.mb-next-steps .btn{ align-self:flex-start !important; border-radius:999px !important; margin-top:4px !important; height:36px !important; font-size:13px !important; }
.mb-next-actions{ display:flex !important; gap:8px !important; flex-wrap:wrap !important; margin-top:4px !important; }
.mb-next-actions .btn{ margin-top:0 !important; }
.mb-submit{ align-items:center !important; }
.mb-submit-note{ margin-right:auto !important; font-size:12.5px !important; color:var(--text-faint) !important; }
@media (max-width:640px){ .mb-submit{ flex-direction:column-reverse !important; align-items:stretch !important; } .mb-submit-note{ margin:0 !important; text-align:center !important; } }
/* ============================================================
   v5.17 — Kanalmitgliedschaft-Modal: überarbeitete Optik
   (Angebotskarte, Ablauf, Verkäuferkarte, fixierter Kaufbereich)
   ============================================================ */
#membership-modal-overlay{ --mp-gold:#e8bd5f !important; --mp-gold-soft:rgba(232,189,95,.12) !important; --mp-gold-line:rgba(232,189,95,.32) !important; background:rgba(4,4,6,.78) !important; backdrop-filter:blur(6px) !important; }
#membership-modal-overlay.active .membership-modal-box{ animation:mpIn .26s cubic-bezier(.2,.8,.2,1) !important; }
@keyframes mpIn{ from{ transform:translateY(10px) scale(.985); opacity:0; } to{ transform:none; opacity:1; } }
.membership-modal-box{
  max-width:480px !important; border-radius:20px !important; border-color:rgba(255,255,255,.07) !important;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4) !important;
  scrollbar-width:thin !important; scrollbar-color:var(--surface-hi-2) transparent !important;
}
.membership-modal-box .modal-close{
  z-index:5 !important; background:rgba(9,9,11,.55) !important; color:#e4e4e7 !important;
  backdrop-filter:blur(8px) !important; border:1px solid rgba(255,255,255,.08) !important;
}
.membership-modal-box .modal-close:hover{ background:rgba(39,39,42,.9) !important; color:#fff !important; }
.membership-modal-box .modal-close svg{ width:16px !important; height:16px !important; }

/* Kopfbereich */
.membership-hero{ padding:38px 28px 26px !important; background:radial-gradient(120% 90% at 50% 0%, #1d1a14 0%, var(--bg-elevated) 70%) !important; border-bottom:1px solid rgba(255,255,255,.06) !important; }
.membership-hero-banner{
  position:absolute !important; inset:0 !important; background-size:cover !important; background-position:center !important;
  opacity:0 !important; transform:scale(1.08) !important; filter:blur(14px) saturate(1.1) !important; pointer-events:none !important;
}
.membership-hero.has-banner .membership-hero-banner{ opacity:.42 !important; }
.membership-hero::after{
  content:'' !important; position:absolute !important; inset:0 !important; pointer-events:none !important;
  background:linear-gradient(180deg, rgba(19,19,22,.15) 0%, rgba(19,19,22,.55) 55%, var(--bg-elevated) 100%) !important;
}
.membership-hero > *:not(.membership-hero-banner):not(.membership-hero-glow){ position:relative !important; z-index:1 !important; }
.membership-hero-glow{ position:absolute !important; z-index:0 !important; top:-70px !important; width:300px !important; height:180px !important; background:radial-gradient(ellipse, rgba(232,189,95,.22), transparent 70%) !important; }
.membership-modal-avatar{ width:76px !important; height:76px !important; margin-bottom:14px !important; border:3px solid var(--bg-elevated) !important; box-shadow:0 0 0 2px var(--mp-gold-line), 0 12px 30px rgba(0,0,0,.55) !important; }
.membership-eyebrow{ color:var(--mp-gold) !important; font-size:10.5px !important; letter-spacing:.14em !important; margin-bottom:6px !important; }
.membership-hero .modal-title{ font-size:24px !important; letter-spacing:-.02em !important; margin-bottom:14px !important; }
#membership-modal-status{ font-size:12px !important; font-weight:600 !important; padding:6px 12px !important; border:1px solid var(--mp-gold-line) !important; background:var(--mp-gold-soft) !important; color:var(--mp-gold) !important; }
#membership-modal-status.is-member{ border-color:rgba(126,217,154,.3) !important; }
#membership-modal-status.is-expired{ border-color:rgba(255,157,146,.3) !important; }

/* Inhalt */
.membership-body{ padding:22px 24px 24px !important; }
.membership-body.has-paid > .membership-section-label,
.membership-body.has-paid > #membership-advantages{ display:none !important; }
#membership-paid{ display:flex !important; flex-direction:column !important; gap:22px !important; }
#membership-paid.hidden{ display:none !important; }
#membership-paid i{ font-style:normal !important; }

/* Angebotskarte */
#membership-paid .mp-plan{
  position:relative !important; overflow:hidden !important; border-radius:16px !important; padding:18px 18px 14px !important;
  background:linear-gradient(160deg, rgba(232,189,95,.10) 0%, rgba(24,24,27,.9) 45%, var(--surface) 100%) !important;
  border:1px solid var(--mp-gold-line) !important;
}
#membership-paid .mp-plan::before{ content:'' !important; position:absolute !important; top:0 !important; left:18px !important; right:18px !important; height:1px !important; background:linear-gradient(90deg, transparent, rgba(232,189,95,.7), transparent) !important; }
#membership-paid .mp-plan-top{ display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:12px !important; flex-wrap:wrap !important; }
#membership-paid .mp-kicker{ font-size:11px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--mp-gold) !important; margin-bottom:6px !important; }
#membership-paid .mp-amount{ display:flex !important; align-items:baseline !important; gap:4px !important; color:var(--text) !important; line-height:1 !important; }
#membership-paid .mp-amount b{ font-size:38px !important; font-weight:700 !important; letter-spacing:-.03em !important; font-variant-numeric:tabular-nums !important; }
#membership-paid .mp-amount .mp-amount-text{ font-size:22px !important; letter-spacing:-.01em !important; }
#membership-paid .mp-cur{ font-size:22px !important; font-weight:600 !important; color:var(--text) !important; }
#membership-paid .mp-per{ font-size:13px !important; color:var(--text-dim) !important; margin-left:6px !important; }
#membership-paid .mp-tags{ display:flex !important; gap:6px !important; flex-wrap:wrap !important; }
#membership-paid .mp-tags span{ font-size:11.5px !important; font-weight:600 !important; color:var(--text-dim) !important; padding:4px 9px !important; border-radius:999px !important; background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.08) !important; white-space:nowrap !important; }
#membership-paid .mp-perks{ list-style:none !important; margin:16px 0 0 !important; padding:14px 0 0 !important; border-top:1px solid rgba(255,255,255,.07) !important; display:flex !important; flex-direction:column !important; gap:10px !important; }
#membership-paid .mp-perks li{ display:flex !important; align-items:flex-start !important; gap:10px !important; font-size:14px !important; line-height:1.45 !important; color:var(--text) !important; }
#membership-paid .mp-perks i{ width:20px !important; height:20px !important; border-radius:50% !important; flex-shrink:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; background:var(--mp-gold) !important; color:#1a1408 !important; margin-top:0 !important; }
#membership-paid .mp-perks i svg{ width:11px !important; height:11px !important; }
#membership-paid .mp-plan-foot{ margin-top:14px !important; font-size:12px !important; color:var(--text-faint) !important; }

/* Abschnitte */
#membership-paid .mp-h{ margin:0 0 12px !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--text-faint) !important; }

/* Ablauf */
#membership-paid .mp-flow{ list-style:none !important; margin:0 !important; padding:0 !important; display:flex !important; flex-direction:column !important; }
#membership-paid .mp-flow li{ position:relative !important; display:flex !important; gap:14px !important; padding-bottom:16px !important; }
#membership-paid .mp-flow li:last-child{ padding-bottom:0 !important; }
#membership-paid .mp-flow li:not(:last-child)::before{ content:'' !important; position:absolute !important; left:17px !important; top:38px !important; bottom:4px !important; width:1px !important; background:linear-gradient(var(--surface-hi-2), rgba(42,42,47,.2)) !important; }
#membership-paid .mp-flow li > i{ width:35px !important; height:35px !important; border-radius:11px !important; flex-shrink:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; background:var(--surface) !important; border:1px solid var(--surface-hi-2) !important; color:var(--text) !important; }
#membership-paid .mp-flow li > i svg{ width:17px !important; height:17px !important; }
#membership-paid .mp-flow li > div{ min-width:0 !important; flex:1 !important; padding-top:1px !important; }
#membership-paid .mp-flow b{ display:block !important; font-size:14px !important; font-weight:600 !important; color:var(--text) !important; margin-bottom:2px !important; }
#membership-paid .mp-flow span{ font-size:12.5px !important; line-height:1.5 !important; color:var(--text-dim) !important; }
#membership-paid .mp-email{ display:flex !important; align-items:center !important; gap:0 !important; margin-top:9px !important; height:38px !important; border-radius:10px !important; background:var(--bg) !important; border:1px solid var(--surface-hi-2) !important; overflow:hidden !important; }
#membership-paid .mp-email .mp-email-val{ flex:1 !important; min-width:0 !important; padding:0 12px !important; font-size:13px !important; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; color:var(--text) !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
#membership-paid .mp-email button{ display:flex !important; align-items:center !important; gap:6px !important; height:100% !important; padding:0 13px !important; border:none !important; border-left:1px solid var(--surface-hi-2) !important; border-radius:0 !important; background:var(--surface) !important; color:var(--text) !important; font-size:12.5px !important; font-weight:600 !important; cursor:pointer !important; flex-shrink:0 !important; transition:background .15s ease !important; }
#membership-paid .mp-email button:hover{ background:var(--surface-hi) !important; }
#membership-paid .mp-email button svg{ width:14px !important; height:14px !important; }
#membership-paid .mp-email button span{ font-size:12.5px !important; color:inherit !important; }

/* Verkäuferkarte */
#membership-paid .mp-seller{ display:block !important; padding:0 !important; gap:0 !important; border-radius:16px !important; border:1px solid var(--border) !important; background:var(--surface) !important; overflow:hidden !important; }
#membership-paid .mp-seller-head{ display:flex !important; align-items:center !important; gap:12px !important; padding:14px 16px !important; border-bottom:1px solid var(--border) !important; background:linear-gradient(90deg, rgba(232,189,95,.07), transparent 70%) !important; }
#membership-paid .mp-seller-ic{ width:40px !important; height:40px !important; border-radius:50% !important; flex-shrink:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; background:var(--mp-gold-soft) !important; border:1px solid var(--mp-gold-line) !important; color:var(--mp-gold) !important; }
#membership-paid .mp-seller-ic svg{ width:19px !important; height:19px !important; }
#membership-paid .mp-seller-id{ flex:1 !important; min-width:0 !important; }
#membership-paid .mp-seller-label{ font-size:10.5px !important; letter-spacing:.12em !important; color:var(--mp-gold) !important; margin-bottom:2px !important; }
#membership-paid .mp-seller-name{ font-size:15px !important; font-weight:700 !important; line-height:1.3 !important; color:var(--text) !important; overflow-wrap:anywhere !important; }
#membership-paid .mp-badge{ flex-shrink:0 !important; font-size:11px !important; font-weight:600 !important; padding:4px 9px !important; border-radius:999px !important; color:var(--text-dim) !important; background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.09) !important; }
#membership-paid .mp-badge.is-biz{ color:#7ec8f0 !important; background:rgba(126,200,240,.08) !important; border-color:rgba(126,200,240,.25) !important; }
#membership-paid .mp-dl{ display:grid !important; grid-template-columns:96px minmax(0,1fr) !important; gap:10px 12px !important; margin:0 !important; padding:14px 16px !important; }
#membership-paid .mp-dl dt{ font-size:12px !important; color:var(--text-faint) !important; padding-top:1px !important; }
#membership-paid .mp-dl dd{ margin:0 !important; font-size:13px !important; line-height:1.5 !important; color:var(--text) !important; overflow-wrap:anywhere !important; }
#membership-paid .mp-dl a{ color:var(--text) !important; text-decoration:underline !important; text-decoration-color:rgba(255,255,255,.3) !important; text-underline-offset:3px !important; }
#membership-paid .mp-dl a:hover{ text-decoration-color:var(--text) !important; }
#membership-paid .mp-links{ display:flex !important; flex-wrap:wrap !important; gap:4px 14px !important; }
#membership-paid .mp-links a{ display:inline-flex !important; align-items:center !important; gap:4px !important; }
#membership-paid .mp-links svg{ width:12px !important; height:12px !important; opacity:.7 !important; }
#membership-paid .mp-seller-type{ margin:0 !important; padding:12px 16px 14px !important; border-top:1px solid var(--border) !important; font-size:12px !important; line-height:1.55 !important; color:var(--text-faint) !important; background:rgba(0,0,0,.15) !important; }
#membership-paid .mp-seller-type b{ color:var(--text-dim) !important; }

/* Plattform-Hinweis & Warnung */
#membership-paid .mp-platform, #membership-paid .mp-warn{ display:flex !important; gap:11px !important; align-items:flex-start !important; padding:12px 14px !important; border-radius:12px !important; }
#membership-paid .mp-platform{ background:rgba(255,255,255,.025) !important; border:1px dashed rgba(255,255,255,.1) !important; }
#membership-paid .mp-platform i, #membership-paid .mp-warn i{ flex-shrink:0 !important; display:flex !important; margin-top:1px !important; }
#membership-paid .mp-platform i{ color:var(--text-dim) !important; }
#membership-paid .mp-platform svg, #membership-paid .mp-warn svg{ width:18px !important; height:18px !important; }
#membership-paid .mp-platform p, #membership-paid .mp-warn p{ margin:0 !important; font-size:12.5px !important; line-height:1.55 !important; color:var(--text-dim) !important; }
#membership-paid .mp-platform b{ color:var(--text) !important; }
#membership-paid .mp-warn{ background:rgba(232,189,95,.08) !important; border:1px solid var(--mp-gold-line) !important; color:var(--mp-gold) !important; font-size:inherit !important; }
#membership-paid .mp-warn i{ color:var(--mp-gold) !important; }
#membership-paid .mp-warn b{ color:var(--mp-gold) !important; }

/* Fixierter Kaufbereich */
#membership-paid .mp-checkout{
  position:sticky !important; bottom:0 !important; z-index:3 !important;
  margin:0 -24px -24px !important; padding:16px 24px 20px !important;
  background:rgba(19,19,22,.94) !important; backdrop-filter:blur(12px) !important;
  border-top:1px solid rgba(255,255,255,.07) !important; box-shadow:0 -14px 30px rgba(0,0,0,.35) !important;
  display:flex !important; flex-direction:column !important; gap:14px !important;
}
#membership-paid .mp-checkout.has-more{ margin-bottom:0 !important; }
#membership-paid .mp-confirm{ display:flex !important; gap:11px !important; align-items:flex-start !important; font-size:12.5px !important; line-height:1.5 !important; color:var(--text-dim) !important; cursor:pointer !important; }
#membership-paid .mp-confirm input{
  -webkit-appearance:none !important; appearance:none !important; width:19px !important; height:19px !important; margin:1px 0 0 !important; flex-shrink:0 !important;
  border-radius:6px !important; border:1.5px solid #52525b !important; background:var(--bg) !important; cursor:pointer !important;
  display:grid !important; place-content:center !important; transition:background .15s ease, border-color .15s ease !important;
}
#membership-paid .mp-confirm input::after{ content:'' !important; width:10px !important; height:10px !important; transform:scale(0) !important; transition:transform .12s ease !important;
  background:#1a1408 !important; clip-path:polygon(14% 44%, 0 59%, 39% 100%, 100% 22%, 85% 8%, 38% 68%) !important; }
#membership-paid .mp-confirm input:checked{ background:var(--mp-gold) !important; border-color:var(--mp-gold) !important; }
#membership-paid .mp-confirm input:checked::after{ transform:scale(1) !important; }
#membership-paid .mp-confirm input:focus-visible{ outline:2px solid var(--mp-gold) !important; outline-offset:2px !important; }
#membership-paid .mp-confirm input:disabled{ opacity:.4 !important; cursor:not-allowed !important; }
#membership-paid .mp-confirm b{ color:var(--text) !important; }
#membership-paid .mp-confirm a{ color:var(--text) !important; text-decoration:underline !important; text-underline-offset:2px !important; }
#membership-paid .mp-buy{
  display:flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; width:100% !important; height:50px !important;
  border:none !important; border-radius:14px !important; cursor:pointer !important;
  font-size:15px !important; font-weight:700 !important; letter-spacing:-.005em !important; color:#17120a !important;
  background:linear-gradient(180deg, #f3cf7a 0%, #e2b14c 100%) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px rgba(232,189,95,.22) !important;
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease !important;
}
#membership-paid .mp-buy span{ color:inherit !important; font-size:inherit !important; font-weight:inherit !important; }
#membership-paid .mp-buy svg{ width:16px !important; height:16px !important; }
#membership-paid .mp-buy:hover:not(:disabled){ filter:brightness(1.06) !important; box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 14px 30px rgba(232,189,95,.3) !important; }
#membership-paid .mp-buy:active:not(:disabled){ transform:translateY(1px) !important; }
#membership-paid .mp-buy:disabled{ cursor:not-allowed !important; background:var(--surface-hi) !important; color:var(--text-faint) !important; box-shadow:none !important; }
#membership-paid .mp-secure{ display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; margin-top:-4px !important; font-size:11.5px !important; color:var(--text-faint) !important; text-align:center !important; }
#membership-paid .mp-secure svg{ width:12px !important; height:12px !important; flex-shrink:0 !important; }
#membership-paid .mp-secure span{ font-size:11.5px !important; color:inherit !important; }
#membership-paid .mp-or{ margin:0 !important; }

@media (max-width:600px){
  .membership-modal-box{ border-radius:20px 20px 0 0 !important; }
  .membership-hero{ padding:34px 20px 22px !important; }
  .membership-body{ padding:20px 18px 22px !important; }
  #membership-modal-overlay .membership-modal-box{ padding-bottom:0 !important; }
  .membership-body{ padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px)) !important; }
  #membership-paid .mp-amount b{ font-size:34px !important; }
  #membership-paid .mp-dl{ grid-template-columns:minmax(0,1fr) !important; gap:2px !important; }
  #membership-paid .mp-dl dd{ margin-bottom:10px !important; }
  #membership-paid .mp-dl dd:last-child{ margin-bottom:0 !important; }
}
/* Kleine Bildschirme: Kaufbereich scrollt normal mit, statt die halbe
   Höhe dauerhaft zu belegen */
@media (max-width:600px), (max-height:640px){
  #membership-paid .mp-checkout{ position:static !important; margin:0 !important; padding:4px 0 0 !important; background:none !important; backdrop-filter:none !important; border-top:none !important; box-shadow:none !important; }
}