.streamer-page{min-height:100vh;background:#08070d;color:#fff;overflow-x:hidden}
.streamer-page:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 0%,rgba(123,68,255,.18),transparent 34%),radial-gradient(circle at 90% 20%,rgba(255,80,116,.1),transparent 30%),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:auto,auto,46px 46px,46px 46px}
.streamer-topbar{position:sticky;top:0;background:rgba(8,7,13,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07)}
.streamer-nav .active{color:#fff}.streamer-nav .active:after{width:100%}
.streamer-shell{position:relative;z-index:1;width:min(1440px,calc(100% - 36px));margin:0 auto;padding:128px 0 70px}
.streamer-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:28px;padding:28px 30px;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:linear-gradient(135deg,rgba(28,21,43,.88),rgba(12,11,18,.88));box-shadow:0 22px 65px rgba(0,0,0,.35)}
.streamer-kicker{font-size:11px;font-weight:800;letter-spacing:2px;color:#a98dff}.streamer-hero h1{font-size:clamp(34px,5vw,60px);line-height:1;margin:10px 0 12px}.streamer-hero p{max-width:720px;color:#a8a5b2;margin:0;line-height:1.7}
.stream-count{min-width:185px;display:grid;grid-template-columns:auto auto;column-gap:9px;align-items:center;padding:15px 18px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}.stream-count i{width:10px;height:10px;border-radius:50%;background:#ff3b5f;box-shadow:0 0 18px #ff3b5f}.stream-count strong{font-size:23px}.stream-count span{grid-column:1/-1;margin-top:5px;font-size:11px;color:#9793a1}
.stream-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stream-card{display:block;min-width:0;overflow:hidden;color:inherit;text-decoration:none;border-radius:15px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(28,27,34,.96),rgba(16,15,21,.96));box-shadow:0 16px 36px rgba(0,0,0,.3);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.stream-card:hover{transform:translateY(-5px);border-color:rgba(154,113,255,.48);box-shadow:0 22px 55px rgba(0,0,0,.44),0 0 28px rgba(119,70,255,.12)}
.stream-preview{height:178px;position:relative;overflow:hidden;background:linear-gradient(135deg,#33224a,#15131d);background-position:center;background-size:cover}.stream-preview:before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(150,83,255,.28),transparent 44%,rgba(255,76,115,.14));transition:transform .35s ease}.stream-card:hover .stream-preview:before{transform:scale(1.08)}
.preview-fallback{position:absolute;inset:0;display:grid;place-content:center;text-align:center;letter-spacing:5px;color:rgba(255,255,255,.35)}.preview-fallback span{font-size:36px;font-weight:900}.preview-fallback small{font-size:9px;margin-top:3px}.has-image .preview-fallback{display:none}.preview-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.06) 55%,rgba(0,0,0,.62))}
.live-badge,.viewer-badge,.duration-badge{position:absolute;z-index:2;bottom:9px;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border-radius:5px;background:rgba(10,10,13,.86);font-size:10px;font-weight:800}.live-badge{top:9px;bottom:auto;left:9px;background:#e9194c}.live-badge i{width:6px;height:6px;border-radius:50%;background:#fff}.viewer-badge{left:9px}.duration-badge{right:9px}.open-stream{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-40%);opacity:0;padding:10px 14px;border-radius:9px;background:rgba(10,8,15,.86);border:1px solid rgba(255,255,255,.16);font-size:11px;font-weight:800;transition:.2s ease}.stream-card:hover .open-stream{opacity:1;transform:translate(-50%,-50%)}
.stream-info{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;padding:13px}.stream-avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;border:2px solid rgba(155,113,255,.7);background:linear-gradient(145deg,#865eff,#4a2d90)}.stream-avatar img,.stream-avatar span{width:100%;height:100%}.stream-avatar img{object-fit:cover}.stream-avatar span{display:grid;place-items:center;font-size:12px;font-weight:900}
.stream-copy{min-width:0}.stream-name{display:flex;align-items:center;gap:5px}.stream-name strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.verified{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#8258ff;font-size:10px;font-weight:900}.stream-copy p{margin:5px 0 4px;color:#d1ced7;font-size:11px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stream-copy small{color:#8f8a99;font-size:10px}.stream-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.stream-tags span{padding:4px 6px;border-radius:4px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);color:#9893a1;font-size:8px}
.no-streamers{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px dashed rgba(255,255,255,.13);border-radius:22px;background:rgba(255,255,255,.025)}.no-streamers>span{font-size:42px;color:#8e64ff}.no-streamers h2{margin:13px 0 7px}.no-streamers p{color:#9893a1}.no-streamers code{color:#c6b4ff}
@media(max-width:1180px){.stream-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.streamer-nav{display:none}.stream-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.streamer-hero{align-items:flex-start;flex-direction:column}.stream-count{min-width:0}}
@media(max-width:600px){.streamer-shell{width:min(100% - 20px,1440px);padding-top:92px}.stream-grid{grid-template-columns:1fr}.streamer-hero{padding:22px}.stream-preview{height:205px}.header-actions .hub-top span{display:none}}
.offline-badge{position:absolute;z-index:2;top:9px;left:9px;display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:5px;background:rgba(20,19,25,.9);border:1px solid rgba(255,255,255,.12);font-size:10px;font-weight:800;color:#aaa6b2}.is-offline .stream-preview{filter:saturate(.55)}.is-offline .preview-fallback img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(10px);transform:scale(1.12);opacity:.42}.api-warning{display:block!important;margin-top:7px!important;color:#ffab70!important}

/* Streamer-Seite: gleicher Hintergrund wie auf der Hauptseite */
.streamer-page{
  position:relative;
  background:#09070e url('/images/hero-background.png') center center / cover fixed no-repeat;
}
.streamer-page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,4,8,.68),rgba(10,7,15,.34) 32%,rgba(10,7,15,.28) 68%,rgba(5,4,8,.68)),
    linear-gradient(180deg,rgba(8,5,12,.42),rgba(8,5,12,.3) 48%,rgba(9,7,14,.92) 100%);
}
.streamer-page::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:55px 55px;
}
.streamer-page .topbar,
.streamer-page .streamer-shell,
.streamer-page footer{
  position:relative;
  z-index:2;
}
.streamer-page .streamer-topbar{
  position:fixed;
  background:rgba(7,5,12,.38);
  backdrop-filter:blur(14px);
}
.streamer-page .streamer-hero{
  background:linear-gradient(135deg,rgba(28,21,43,.76),rgba(12,11,18,.78));
  backdrop-filter:blur(14px);
}
.streamer-page .stream-card{
  background:linear-gradient(180deg,rgba(28,27,34,.9),rgba(16,15,21,.93));
  backdrop-filter:blur(10px);
}
.streamer-page footer{
  background:rgba(9,7,14,.78);
  backdrop-filter:blur(12px);
}

@media(max-width:900px){
  .streamer-page{background-attachment:scroll;background-position:58% center}
}
@media(max-width:600px){
  .streamer-page{background-position:62% center}
}

/* Streamer-Seite: Footer bleibt bei wenig Inhalt unten und folgt bei viel Inhalt dem Seiteninhalt. */
html, body.streamer-page {
  min-height: 100%;
}
body.streamer-page {
  display: flex;
  flex-direction: column;
}
body.streamer-page .streamer-shell {
  flex: 1 0 auto;
}
body.streamer-page footer {
  margin-top: auto;
  flex-shrink: 0;
}

/* Navigation muss immer über dem Seiteninhalt liegen und anklickbar bleiben. */
.streamer-page .streamer-topbar {
  z-index: 100;
  pointer-events: auto;
}
.streamer-page .streamer-topbar .brand,
.streamer-page .streamer-topbar .nav,
.streamer-page .streamer-topbar .header-actions,
.streamer-page .streamer-topbar a,
.streamer-page .streamer-topbar button {
  position: relative;
  z-index: 101;
  pointer-events: auto;
}

/* Endgültiger Sticky-Footer-Fix für die Streamer-Seite. */
html {
  min-height: 100%;
}
body.streamer-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.streamer-page > .streamer-shell {
  width: min(1440px, calc(100% - 36px));
  flex: 1 0 auto;
}
body.streamer-page > footer {
  width: 100%;
  margin-top: auto;
  flex: 0 0 auto;
}

@media (max-width: 600px) {
  body.streamer-page > .streamer-shell {
    width: min(100% - 20px, 1440px);
  }
}

/* Moderne Statistik-Karten im Streamer-Header */
.stream-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(150px,1fr));
  gap:12px;
  width:min(610px,100%);
  flex:0 0 auto;
}
.stream-stat{
  position:relative;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:112px;
  padding:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(31,25,45,.78),rgba(13,11,20,.84));
  box-shadow:0 14px 35px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(13px);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.stream-stat:before{
  content:"";
  position:absolute;
  width:100px;
  height:100px;
  right:-38px;
  top:-45px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(142,92,255,.2),transparent 68%);
  pointer-events:none;
}
.stream-stat:hover{
  transform:translateY(-3px);
  border-color:rgba(164,126,255,.33);
  box-shadow:0 20px 45px rgba(0,0,0,.32),0 0 26px rgba(123,72,255,.1);
}
.stat-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
  font-size:19px;
  line-height:1;
}
.stat-live .stat-icon i{
  width:11px;
  height:11px;
  border-radius:50%;
  background:#ff3b63;
  box-shadow:0 0 0 5px rgba(255,59,99,.1),0 0 18px rgba(255,59,99,.82);
  animation:streamStatPulse 1.8s ease-in-out infinite;
}
.stat-content{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.stat-content>span{
  color:#d8d4e2;
  font-size:12px;
  font-weight:800;
  letter-spacing:.35px;
}
.stat-content strong{
  margin:3px 0 1px;
  color:#fff;
  font-size:31px;
  line-height:1;
  letter-spacing:-1px;
}
.stat-content small{
  color:#8f899b;
  font-size:10px;
  white-space:nowrap;
}
.stat-viewers .stat-icon{
  color:#bda9ff;
  background:rgba(132,88,255,.11);
}
.stat-streamers .stat-icon{
  color:#f1cf79;
  background:rgba(241,207,121,.09);
}
@keyframes streamStatPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.82);opacity:.7}
}
@media(max-width:1180px){
  .streamer-hero{align-items:flex-start;flex-direction:column}
  .stream-stats{width:100%}
}
@media(max-width:720px){
  .stream-stats{grid-template-columns:1fr}
  .stream-stat{min-height:88px}
}