/* =====================================================
   HATNIR STYLE CLEAN
   Bereinigte Version
   - Zusammengeführte Variablen
   - Entfernte überschriebene Live-Definitionen
   - Vorbereitung für weitere Modularisierung
   ===================================================== */

:root{
  --bg:#0A0A0A;
  --card:#151923;
  --text:#f1f2f4;
  --muted:#a6adbb;

  --shadow:0 12px 30px rgba(0,0,0,.45);
  --shadow-soft:0 10px 22px rgba(0,0,0,.35);
  --radius:22px;
  --border:1px solid rgba(255,255,255,.08);

  --hatnir-red:#8B0000;
  --hatnir-red2:#C1121F;
  --hatnir-gold:#D9C29A;
}

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

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

a{ color: inherit; text-decoration: none; }
.wrap{ max-width: 980px; margin: 0 auto; padding: 28px 18px 56px; }

/* Hero */
.hero{
  margin-top: 20px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
}

@media (max-width: 860px){
  .hero{ grid-template-columns: 1fr; }
}

.card{
  background: rgba(21,25,35,.92);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero-main{ padding: 26px; }

.hero-top{
  display:flex;
  gap: 18px;
  align-items:center;
  flex-wrap: wrap;
}

.pfp{
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(255,255,255,0.10);
  box-shadow: 0 14px 26px rgba(0,0,0,0.45);
  flex: 0 0 auto;
}

.pfp img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

h1{
  margin:0;
  font-size: clamp(28px, 4vw, 40px);
}

.tagline{
  margin-top: 6px;
  color: var(--muted);
  font-weight: 600;
}

.bio{
  margin-top: 14px;
  max-width: 58ch;
  color: var(--muted);
}

.btnrow{
  margin-top: 18px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  transition: .2s ease;
}

.btn:hover{
   background:rgba(139,0,0,.2);
}

.btn.primary{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}

/* Right hero */
.hero-side{
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.mini-card{
  padding: 14px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size: 13px;
}

/* Sections */
.grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 860px){
  .grid{ grid-template-columns: 1fr; }
}

.section{
  padding: 22px;
}

.section h2{
  margin-bottom: 10px;
}

.section p{
  color: var(--muted);
}

/* Schedule */
.schedule{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.slot{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  text-align:center;
}

.slot .day{ font-weight: 700; }
.slot .time{ margin-top: 6px; color: var(--muted); }

/* Social grid */
.social{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.social a{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  display:flex;
  justify-content:space-between;
  font-weight: 600;
}

.social a:hover{
   background:rgba(139,0,0,.2);
}  

.freunde a{
  padding: 12px;
  border-radius: 16px;
  border:1px solid rgba(139,0,0,.45);
  background:linear-gradient(180deg,#141414,#101010);
  display:flex;
  justify-content:space-between;
  font-weight: 600;
}

.freunde a:hover{
   background:rgba(139,0,0,.2);  
}

.friend-box {
  background: rgba(255,255,255,.03);
  padding: 12px;
  border-radius: 16px;
  text-align: center;
  box-sizing: border-box;
}

.friend-box h3 {
  margin: 0 0 10px 0;
  font-size: 15px;
  color: #ffffff;
}

.friend-box a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  color: #cccccc;
  font-size: 14px;
}

.friend-box img {
  border-radius: 16PX;
}

/* Footer */
footer{
  margin-top: 18px;
  text-align:center;
  color: var(--muted);
  font-size: 13px;
  padding-top: 18px;
}



body{
 background:#0A0A0A;
}

.card,.section,.hero-main,.hero-side{
 border:1px solid rgba(139,0,0,.45);
 box-shadow:0 0 25px rgba(139,0,0,.18);
}

h1,h2,h3{
 color:var(--hatnir-gold);
}

.pfp{
 width:180px;
 height:180px;
 border:4px solid var(--hatnir-red);
}

.pfp img{
 object-fit:contain;
 background:#0a0a0a;
}

nav ul{
 border:1px solid rgba(139,0,0,.45);
}

.btn{
 border-color:rgba(139,0,0,.4);
}

.btn:hover{
 background:rgba(139,0,0,.2);
}

.friend-box,.mini-card,.slot,.social a{
 border-color:rgba(139,0,0,.3);
}

/* Mobile Optimierungen */
@media (max-width:768px){

nav ul{
 display:flex;
 flex-direction:column;
 padding:0;
}

nav ul li{
 width:100%;
}

nav ul li a{
 padding:14px;
}

.hero-top{
 flex-direction:column;
 text-align:center;
}

.pfp{
 width:120px;
 height:120px;
 margin:auto;
}

.schedule{
 grid-template-columns:1fr;
}

.social{
 grid-template-columns:1fr;
}

.friend-box{
 width:100%;
}

.friend-box a{
 flex-wrap:wrap;
}
}

/* Freunde Bereich */
.freunde{
 display:grid !important;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:24px;
}

.friend-box{
 min-height:220px;
 padding:20px;
 border:1px solid rgba(139,0,0,.45);
 background:linear-gradient(180deg,#141414,#101010);
 box-shadow:0 0 18px rgba(139,0,0,.18);
 transition:all .25s ease;
}

.friend-box:hover{
 transform:translateY(-3px);
 box-shadow:0 0 28px rgba(139,0,0,.35);
}

.friend-box img{
 width:96px !important;
 height:96px !important;
 border-radius:50%;
 border:3px solid #8B0000;
 object-fit:cover;
}

.friend-box h3{
 font-size:20px;
 margin-bottom:12px;
 color:#D9C29A;
}

.friend-box a{
 flex-direction:column;
 gap:10px;
}

@media(max-width:768px){
 .freunde{
   grid-template-columns:1fr;
 }
}

/* Freunde Live Status (bereinigt - finale Gold-Version wird verwendet) */

/* Stream Status */
#output-3{
  color: var(--hatnir-gold) !important;
  font-weight: 600;
}

/* Status-Punkt vor Hatnir Live-Status */
#output-3::before{
    content:"🔴 ";
}

.stream-status-card.live #output-3::before{
    content:"🟢 ";
}

.bio{
  padding-left:20px;
}

.friend-buttons{
 display:flex;
 gap:10px;
 justify-content:center;
 margin-top:12px;
 flex-wrap:wrap;
}

.friend-btn{
 display:flex !important;
 flex-direction:row !important;
 align-items:center;
 justify-content:center;
 gap:8px;
 padding:10px 14px;
 border:1px solid rgba(139,0,0,.45);
 border-radius:12px;
 background:rgba(255,255,255,.04);
}

.friend-btn img{
 width:24px !important;
 height:24px !important;
 border:none !important;
 border-radius:0 !important;
 box-shadow:none !important;
}

/* Hatnir Live Style */
.friend-box.live{
 border:2px solid #D9C29A !important;
 box-shadow:0 0 16px rgba(217,194,154,.25);
}

.friend-box.live h3{
 color:#D9C29A !important;
}

.friend-box.live img{
 border-color:#D9C29A !important;
 box-shadow:none !important;
}

.friend-box.live::before{
    content:"🟢 LIVE";
    display:block;
    margin-bottom:10px;
    font-weight:bold;
    color:#D9C29A !important;
}

.friend-box .friend-btn{width:100%;margin:6px 0;justify-content:flex-start;}

/* Schedule & Socials */

/* 3 Spalten Desktop */
.schedule{
  grid-template-columns:repeat(3,1fr) !important;
  gap:16px;
}

.slot{
  border:1px solid rgba(139,0,0,.45);
  background:linear-gradient(180deg,#141414,#101010);
  box-shadow:0 0 18px rgba(139,0,0,.18);
  transition:all .25s ease;
}

.slot:hover{
  transform:translateY(-3px);
  background:rgba(139,0,0,.18);
  border-color:#D9C29A;
  box-shadow:0 0 28px rgba(139,0,0,.35);
}

.slot:hover .time{
  color:#D9C29A;
}

/* Socials 2x2 */
.social{
  grid-template-columns:repeat(2,1fr) !important;
  gap:16px;
}

.social a{
  border:1px solid rgba(139,0,0,.45);
  background:linear-gradient(180deg,#141414,#101010);
  box-shadow:0 0 18px rgba(139,0,0,.18);
  transition:all .25s ease;
}

.social a:hover{
  transform:translateY(-3px);
  box-shadow:0 0 28px rgba(139,0,0,.35);
}

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

  .social{
    grid-template-columns:1fr !important;
  }
}

/* Über mich Feature Box */
.feature-box{
  margin-top:14px;
  padding:16px 18px;
  border:1px solid rgba(139,0,0,.45);
  border-radius:16px;
  background:linear-gradient(180deg,#141414,#101010);
  box-shadow:0 0 18px rgba(139,0,0,.18);
}

.feature-box div{
  padding:8px 0;
  color:#D9C29A;
  font-weight:600;
}

.feature-box div:not(:last-child){
  border-bottom:1px solid rgba(139,0,0,.2);
}

/* Navigation */

.hatnir-nav{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
    margin-bottom:20px;
}

.nav-links{
    display:grid !important;
    grid-template-columns:repeat(4,1fr);
    gap:10px !important;
    list-style:none;
    margin:0;
    padding:0;
    width:100%;
}

.nav-links a{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px 14px !important;
    border:1px solid rgba(139,0,0,.45) !important;
    border-radius:16px !important;
    background:linear-gradient(180deg,#141414,#101010) !important;
    box-shadow:0 0 12px rgba(139,0,0,.15);
    color:#D9C29A !important;
    font-weight:700;
    font-size:.95rem;
}

.nav-links a:hover,
.nav-links a.active{
    background:rgba(139,0,0,.18) !important;
    color:#fff !important;
}

@media(max-width:768px){
    .nav-links{
        grid-template-columns:1fr !important;
    }
}

/* Navigation Feinabstimmung */

.hatnir-nav{
    padding:10px !important;
}

.nav-links{
    gap:10px !important;
}

.nav-links a{
    padding:10px 14px !important;
    font-size:0.95rem;
}

/* Aktives Menü */
.nav-links a.active{
    border-color:#D9C29A !important;
    box-shadow:0 0 16px rgba(217,194,154,.35);
    color:#ffffff !important;
    background:rgba(217,194,154,.08) !important;
}

/* Mobile Feinschliff */
@media(max-width:768px){

.hero-main{
    padding:18px;
}

.hero-side{
    padding:14px;
}

.pfp{
    width:140px;
    height:140px;
}

.hero-side .btn{
    width:100%;
    justify-content:center;
}

.btnrow{
    flex-direction:column;
}
}

/* Stream Buttons Brand Hover */
.hero-side .btn{
    border:1px solid rgba(139,0,0,.45);
    background:linear-gradient(180deg,#141414,#101010);
    box-shadow:0 0 12px rgba(139,0,0,.15);
    transition:all .25s ease;
}

.hero-side .btn:nth-child(1):hover{
    background:rgba(145,70,255,.18);
    border-color:#9146FF;
    box-shadow:0 0 24px rgba(145,70,255,.35);
}

.hero-side .btn:nth-child(2):hover{
    background:rgba(139,0,0,.25);
    border-color:#D9C29A;
    box-shadow:0 0 24px rgba(139,0,0,.45);
}

.hero-side .btn:nth-child(3):hover{
    background:rgba(88,101,242,.18);
    border-color:#5865F2;
    box-shadow:0 0 24px rgba(88,101,242,.35);
}

/* Freunde Buttons dunkler wie Social-Karten */
.friend-btn{
    background:linear-gradient(180deg,#141414,#101010);
    border:1px solid rgba(139,0,0,.45);
}

.friend-btn:hover{
    background:rgba(139,0,0,.18);
}


/* =====================================================
   STREAM STATUS KACHEL (HATNIR)
   ===================================================== */

.stream-status-card{
    transition:all .3s ease;
    border:2px solid #8B0000 !important;
    box-shadow:0 0 18px rgba(139,0,0,.25) !important;
}

.stream-status-card.live{
    border:2px solid #D9C29A !important;
    box-shadow:0 0 18px rgba(217,194,154,.35),
               0 0 32px rgba(217,194,154,.18) !important;
}


/* Youtube-Kachel Feinschliff */
.mini-card a{
  display:block;
  width:100%;
}

.mini-card a:hover{
  color:#D9C29A;
}


/* YouTube Video als Button */
.youtube-btn{
    width:100%;
    margin-top:12px;
    justify-content:center;
    text-align:center;
    display:flex;
}

.youtube-btn:hover{
    background:rgba(255,0,0,.18);
    border-color:#FF0000;
    box-shadow:0 0 24px rgba(255,0,0,.35);
}

/* =====================================================
   WoT HEAT BUILDS
   ===================================================== */

.build-stats{
    margin-bottom:20px;
    color:#D9C29A;
    font-weight:bold;
}

.tank-filter{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:25px;
}

.filter-btn,
.build-tab{
    cursor:pointer;
    border:none;
    padding:10px 16px;
    border-radius:12px;
    background:linear-gradient(180deg,#141414,#101010);
    border:1px solid rgba(139,0,0,.45);
    color:#D9C29A;
    font-weight:bold;
    transition:.2s;
}

.filter-btn:hover,
.build-tab:hover{
    background:rgba(139,0,0,.2);
}

.filter-btn.active,
.build-tab.active{
    border-color:#D9C29A;
    box-shadow:0 0 12px rgba(217,194,154,.35);
}

.build-card{
    margin-top:24px;
    padding:20px;
    border:1px solid rgba(139,0,0,.45);
    border-radius:20px;
    background:linear-gradient(180deg,#141414,#101010);
    box-shadow:0 0 18px rgba(139,0,0,.18);
}

.build-header{
    display:flex;
    gap:20px;
    align-items:center;
    margin-bottom:20px;
}

.build-header img{
    width:220px;
    border-radius:16px;
    border:2px solid #8B0000;
    object-fit:cover;
}

.build-tabs{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.build-content{
    display:none;
}

.build-content.active{
    display:block;
}

.slot-grid-6{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.slot-grid-4{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.slot-grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.build-slot{
    text-align:center;
    padding:12px;
    border-radius:12px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(139,0,0,.35);
}

.build-slot img{
    width:64px;
    height:64px;
    object-fit:contain;
}

.build-slot span{
    display:block;
    margin-top:8px;
    color:#D9C29A;
    font-size:.9rem;
    font-weight:600;
}

@media(max-width:768px){

    .build-header{
        flex-direction:column;
        text-align:center;
    }

    .build-header img{
        width:100%;
        max-width:280px;
    }

    .slot-grid-6,
    .slot-grid-4,
    .slot-grid-2{
        grid-template-columns:repeat(2,1fr);
    }

    .tank-filter{
        justify-content:center;
    }
}

.build-section{
    margin-top:18px;
}
/* Language Switch */
.language-switch{
    display:flex;
    justify-content:flex-end;
    margin-bottom:12px;
    gap:8px;
}
.lang-btn{
    padding:6px 12px;
    border:1px solid rgba(139,0,0,.45);
    border-radius:12px;
    background:linear-gradient(180deg,#141414,#101010);
    color:#D9C29A;
    font-weight:700;
    font-size:.85rem;
    transition:.2s;
}
.lang-btn:hover{
    background:rgba(139,0,0,.18);
}
.lang-btn.active{
    border-color:#D9C29A;
    box-shadow:0 0 12px rgba(217,194,154,.35);
    color:#fff;
}