/* Paar (Label + Wert) in EINER Zeile halten */
.tag-row-nowrap{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;      /* nicht umbrechen */
  min-width:0;
}
.tag-row-nowrap .tag{
  white-space:nowrap;     /* Label/Wert bleiben nebeneinander */
}
/************************************************************
 * 0) DESIGN-VARIABLEN & GRUNDEINSTELLUNGEN
 ************************************************************/

/* Farb- & UI-Variablen für das Dark-Theme */
:root{
  --bg:#0b0c0e;         /* Seitenhintergrund */
  --panel:#14161a;      /* Panel/Box Hintergrund */
  --panel2:#1a1d22;     /* dunkleres Panel (Kontrastflächen) */
  --text:#eceeef;       /* Standard-Textfarbe */
  --muted:#b6b9be;      /* gedämpfte Textfarbe (Sekundärinfos) */
  --accent:#d0a25b;     /* Akzentfarbe (Buttons/Highlights) */
  --success:#57d17a;    /* Erfolg/OK */
  --danger:#ff5e66;     /* Fehler/Alarm */
  --warn:#f0b44d;       /* Warnung/Hinweis */
  --border:#23262b;     /* Standard-Grenzlinien */
  --radius:14px;        /* Standard-Radius für Karten/Boxen */
  --shadow:0 6px 20px rgba(0,0,0,.35); /* Standard-Schatten */

  /* Ergänzung: Markenfarben für Social Tiles */
  --brand-facebook:#1877F2;
  --brand-instagram-1:#f77737;
  --brand-instagram-2:#e1306c;
  --brand-instagram-3:#c13584;
  --brand-youtube:#FF0000;
  --brand-twitch:#9146FF;
  --brand-tiktok:#000000;
  --brand-steam:#171a21;
  --brand-discord:#5865F2;
}

/* Baseline: Box-Modell, Schrift, Glättung */
*{ box-sizing:border-box }
html{ font-size:16px }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.55 system-ui, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Medien & Typografie */
img{ max-width:100%; height:auto; display:block }
a{ color:var(--text); text-decoration:none }
a:hover{ opacity:.92 }
h1,h2,h3,h4{ margin:0 0 .6rem }
p{ margin:0 0 .75rem }
.small{ font-size:.9rem }
.muted{ color:var(--muted) }

/* Utility: nur für Screenreader sichtbarer Text */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}


/************************************************************
 * 1) BUTTONS, INPUTS & FORM ELEMENTE
 ************************************************************/

/* Primärer Button & Ghost-Variante */
.btn,.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem .95rem; border-radius:10px; cursor:pointer;
  gap:.5rem; user-select:none; white-space:nowrap;
}
.btn{
  border:1px solid #2a2f35;
  background:var(--accent);
  color:#111; font-weight:800;
}
.btn:hover{ transform:translateY(-1px) }
.btn-ghost{
  border:1px solid var(--border);
  background:var(--panel2);
  color:#fff;
}
.btn-ghost:hover{ border-color:#2f343a }

/* Inputs (Text, Select, Textarea) – einheitlicher Stil */
.input,select.input,textarea.input{
  width:100%; padding:.7rem .8rem; border-radius:10px;
  border:1px solid var(--border); background:#0f1114; color:#fff;
  outline:none; transition:border .15s, box-shadow .15s;
}
.input:focus{
  border-color:#3b4047;
  box-shadow:0 0 0 2px rgba(208,162,91,.25);
}
textarea.input{ resize:vertical }


/************************************************************
 * 2) LAYOUT-CONTAINER & KARTEN
 ************************************************************/

/* Maximalbreite & horizontale Innenabstände */
.wrap{ max-width:1200px; margin:24px auto; padding:0 16px }

/* Zweispaltiges Layout mit Sidebar rechts */
.wrap.two{
  display:grid; grid-template-columns:1fr 360px; gap:24px;
}
@media (max-width:980px){
  .wrap.two{ grid-template-columns:1fr } /* mobil: einspaltig */
}

/* Karten/Boxen (Panels) */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}


/************************************************************
 * 3) HERO-BEREICH & SUCHE OBEN
 ************************************************************/

/* Hero (Titelbild/Slider-Hintergrund) */
.hero{
  position:relative; width:100%; min-height:220px;
  background:#000 center/cover no-repeat;
  border-bottom:1px solid #000;
}

/* Suchbox im Hero unten links */
.search-box{
  position:absolute; left:16px; bottom:16px;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.search-input{
  width:min(60vw,380px);
  padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:#111316; color:#fff;
}
.search-btn{ /* nutzt .btn Basis */ }

/* Sprachumschalter im Hero (rechts unten) */
.lang-switch--hero{
  position:absolute; right:16px; bottom:16px; z-index:5;
}
.lang-switch summary{
  list-style:none; display:flex; align-items:center; gap:8px;
  background:#161a20; color:#cbd5e1; border:1px solid #2a2f38; border-radius:8px;
  padding:6px 10px; cursor:pointer; user-select:none; box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.lang-switch summary::-webkit-details-marker{ display:none }
.lang-switch .flag{ width:18px; height:auto; display:block; border-radius:2px }
.lang-switch .label{ font-size:13px; font-weight:600; letter-spacing:.2px }
.lang-switch .chev{ width:18px; height:18px; opacity:.8 }
.lang-menu{
  display:none; position:absolute; right:0; bottom:calc(100% + 6px);
  min-width:170px; background:#161a20; border:1px solid #2a2f38; border-radius:10px;
  box-shadow:var(--shadow); padding:6px; margin:0;
}
.lang-switch[open] .lang-menu{ display:block }
.lang-menu li{ list-style:none }
.lang-menu a{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px; color:#cbd5e1; text-decoration:none;
  transition: color .18s, background-color .18s, transform .18s;
}
.lang-menu a:hover{ background:var(--accent); color:#111; transform:translateY(-1px) }

@media (max-width:520px){
  .lang-switch--hero{ position:static; margin:10px 16px 0 auto; display:flex; justify-content:flex-end }
  .search-box{ position:static; margin:10px 16px }
}


/************************************************************
 * 4) NAVIGATION (TOP-NAV + MOBILMENÜ)
 ************************************************************/

.nav{
  background:#121419;
  border-top:1px solid #000;
  border-bottom:1px solid #000;
}
.navbar{
  max-width:1200px; margin:0 auto; padding:.6rem 1rem;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ font-weight:900; letter-spacing:.6px }

.burger{
  display:none; background:transparent;
  border:1px solid var(--border); border-radius:10px;
  padding:.45rem .6rem; color:#fff; cursor:pointer;
}
.nav-inner{
  max-width:1200px; margin:0 auto; padding:.6rem 1rem;
  display:flex; align-items:center; justify-content:center;
  gap:18px; flex-wrap:wrap;
}
.nav a{
  font-weight:600; letter-spacing:.3px;
  padding:.5rem .75rem; border-radius:10px;
  transition:color .18s, background-color .18s, transform .18s;
}
.nav a:hover{ color:#111; background:var(--accent); transform:translateY(-1px) }
.nav a.active{ color:#111; background:var(--accent) }

.menu{ display:none }
@media (max-width:860px){
  .nav-inner{ display:none }
  .burger{ display:inline-flex }
  .menu{
    display:none; flex-direction:column; gap:10px;
    margin:0 auto; padding:10px 16px; max-width:1200px;
  }
  .menu.open{ display:flex }
  .menu a{ padding:.7rem .9rem; border:1px solid var(--border); border-radius:10px; }
}


/************************************************************
 * 5) SLIDER
 ************************************************************/

.slider{
  position:relative;
  height:clamp(220px,45vw,380px);
  border-radius:12px; overflow:hidden;
  border:1px solid var(--border); background:#0c0d0f;
}
.slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease }
.slide.active{ opacity:1 }
.slide img{ width:100%; height:100%; object-fit:cover }
.slide .cap{
  position:absolute; left:12px; bottom:12px;
  background:rgba(0,0,0,.45); padding:8px 10px; border-radius:8px;
}


/************************************************************
 * 6) GAMESERVER-GITTER & SERVER-KARTEN
 ************************************************************/

.grid-servers{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
}
@media (max-width:980px){
  .grid-servers{ grid-template-columns:1fr }
}
.equal > *{ display:flex; flex-direction:column }

.server-card img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:10px; border:1px solid var(--border);
}
.server-link{ display:block }

.meta-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px }

.chip{
  display:inline-block; padding:4px 10px;
  border:1px solid var(--border); border-radius:999px;
  background:var(--panel2); font-weight:700; font-size:.9rem;
}
.chip-modus.pve{   background:rgba(87,209,122,.12);  border-color:#315c41 }
.chip-modus.pvp{   background:rgba(255,94,102,.12);  border-color:#5a2e30 }
.chip-modus.mixed{ background:rgba(240,180,77,.12); border-color:#6b5230 }
.chip-mods{ background:rgba(255,255,255,.06) }
.chip-mods.yes{ background:rgba(87,209,122,.12); border-color:#315c41 }

.desc-box{
  margin-top:8px; padding:10px 12px;
  border:1px solid var(--border); border-radius:10px;
  background:var(--panel2);
}

.mod-footer{ display:flex; justify-content:flex-end; align-items:center; margin-top:10px }
.modsite-link{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .7rem; border:1px solid var(--border);
  border-radius:10px; background:var(--panel2);
}


/************************************************************
 * 7) EVENTS – COVER & THUMBNAILS
 ************************************************************/

.event-cover{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:10px; border:1px solid var(--border);
  margin-bottom:12px; background:#0c0d0f;
}
.event-thumbs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px;
}
@media (max-width:680px){
  .event-thumbs{ grid-template-columns:repeat(2,1fr) }
}
.event-thumbs img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  border-radius:8px; border:1px solid var(--border); background:#0c0d0f;
}


/************************************************************
 * 8) LISTENANSICHTEN
 ************************************************************/

.list{ display:grid; gap:8px }
.item{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  background:var(--panel2); border:1px solid var(--border); border-radius:10px;
  padding:10px;
}
.item img{
  width:200px; height:auto; object-fit:cover;
  border-radius:8px; border:1px solid var(--border);
}


/************************************************************
 * 9) LOGIN / AKTIONSELEMENTE
 ************************************************************/

.login-card h3{ margin-bottom:.5rem }
.actions{ display:flex; gap:8px; flex-wrap:wrap }


/************************************************************
 * 10) FOOTER
 ************************************************************/

.footer{
  margin-top:28px;
  border-top:1px solid #0b0c0e;
  background:#0f1113;
}
.footer-inner{
  max-width:1200px; margin:0 auto; padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between;
  color:var(--muted);
}


/************************************************************
 * 11) DIVERSES / UTILITY
 ************************************************************/

code{
  background:#101216; border:1px solid var(--border);
  padding:.15rem .35rem; border-radius:6px;
}
hr{ border:none; border-top:1px solid var(--border); margin:12px 0 }
.card form{ min-width:0 } .card .input{ min-width:0 }


/************************************************************
 * 12) SOCIAL-BUTTONS (Startseite) + COMPACT/WIDE ROW (Team)
 ************************************************************/

/* Grid für Social-Links (große Startseiten-Kacheln) */
.social-grid{ display:grid; grid-template-columns:1fr; gap:10px }

.social-btn{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--border); border-radius:12px;
  background:var(--panel2); padding:10px 12px;
  transition:transform .15s, background .15s, border-color .15s;
}
.social-btn:hover{ transform:translateY(-1px); border-color:#2f343a }
.social-btn .ico{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center }
.social-btn svg{ width:24px; height:24px; fill:#fff }

/* Farbverläufe je Plattform (große Buttons) */
.social-btn.discord{   background:linear-gradient(90deg,#5865F2 0%, #3b45b8 100%) }
.social-btn.steam{     background:linear-gradient(90deg,#1b2838 0%, #0b141c 100%) }
.social-btn.facebook{  background:linear-gradient(90deg,#1877F2 0%, #0d47a1 100%) }
.social-btn.instagram{ background:linear-gradient(90deg,#c13584 0%, #e1306c 50%, #f77737 100%) }
.social-btn span:last-child{ font-weight:800; letter-spacing:.3px }

/* Compact Social Icon Row (brandtreu, max 32px) */
.social-icons{
  display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;
}
.social-icons .si{
  inline-size:32px; block-size:32px;
  border:1px solid var(--border);
  border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--panel2);
  transition:transform .15s, border-color .15s, box-shadow .15s, background .15s;
  outline:none; color:#fff;
}
.social-icons .si:focus-visible{
  box-shadow:0 0 0 2px rgba(208,162,91,.45);
  border-color:#3b4047;
}
.social-icons .si:hover{ transform:translateY(-1px); border-color:#2f343a }
.social-icons .si svg{ width:20px; height:20px; display:block; fill:currentColor }

/* Plattformfarben */
.social-icons .brand-facebook{ background:var(--brand-facebook) }
.social-icons .brand-youtube{  background:var(--brand-youtube) }
.social-icons .brand-twitch{   background:var(--brand-twitch) }
.social-icons .brand-tiktok{   background:var(--brand-tiktok) }
.social-icons .brand-steam{    background:var(--brand-steam) }
.social-icons .brand-discord{  background:var(--brand-discord) }

/* Instagram-Verlauf */
.social-icons .brand-instagram{
  background:
    radial-gradient(35% 35% at 30% 110%, #ffd600 0%, transparent 60%),
    radial-gradient(45% 50% at 100% 0%, #feda77 0%, transparent 60%),
    linear-gradient(135deg, var(--brand-instagram-1) 0%, var(--brand-instagram-2) 50%, var(--brand-instagram-3) 100%);
  border-color:transparent;
}

/* E-Mail neutral */
.social-icons .brand-email{ background:#24303a }

/* Dezente Hover-Aufhellung */
.social-icons .brand-facebook:hover,
.social-icons .brand-youtube:hover,
.social-icons .brand-twitch:hover,
.social-icons .brand-tiktok:hover,
.social-icons .brand-steam:hover,
.social-icons .brand-discord:hover,
.social-icons .brand-email:hover,
.social-icons .brand-instagram:hover{ filter:brightness(1.06) }

/* Wide Social Icon Row (32px hoch, ~100px breit) */
.social-icons.social-icons-lg .si{
  inline-size:100px; block-size:32px; border-radius:10px;
}
.social-icons.social-icons-lg .si svg{ width:20px; height:20px }


/************************************************************
 * 12b) PROFIL-INFOS (kleinere „Buttons“ im Spielerprofil)
 ************************************************************/

.profile-info{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 }
.profile-info .tag{
  display:inline-block; padding:5px 9px; border-radius:10px;
  font-weight:800; font-size:.85rem; letter-spacing:.2px; line-height:1;
  background:var(--panel2); color:#fff; border:1px solid var(--border);
  margin:3px 4px 3px 0;
}
.profile-info .tag.k{
  background:var(--accent); color:#111; border-color:#2a2f35;
  box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 4px 14px rgba(0,0,0,.2);
}
.profile-info .tag.v{ background:var(--panel); color:#fff }

/* Chips (Sprachen/Abzeichen) */
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }
.chip{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:var(--panel2); border:1px solid var(--border); font-weight:800; font-size:.9rem;
}

/* Avatar in team_member (doppelt groß) */
.profile-head__avatar{
  width:320px; max-width:50vw; aspect-ratio:1/1; object-fit:cover;
  border-radius:12px; border:1px solid var(--border);
}

/* Trennlinie ohne Label */
.sep{ display:flex; align-items:center; gap:10px; margin:14px 0 12px 0 }
.sep .line{ flex:1; border-top:1px solid var(--border); height:0 }

/* Paar (Label + Wert) in EINER Zeile halten */
.tag-row-nowrap{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;      /* nicht umbrechen */
  min-width:0;
}
.tag-row-nowrap .tag{
  white-space:nowrap;     /* Label/Wert bleiben nebeneinander */
}



/************************************************************
 * 13) BADGES (WARNUNG / BAN / ONLINE-STATUS)
 ************************************************************/

.badge{
  display:inline-block; font-weight:900; letter-spacing:.3px;
  padding:.25rem .55rem; border-radius:8px;
  border:1px solid var(--border); background:var(--panel2);
  margin-bottom:6px;
}
.badge.warn{  background:rgba(240,180,77,.14); border-color:#6b5230; color:#f0b44d }
.badge.ban{   background:rgba(255,94,102,.14); border-color:#5a2e30; color:#ff5e66 }
.badge.online{  background:rgba(68,190,120,.14); border-color:#28543f; color:#44be78 }
.badge.offline{ background:rgba(255,94,102,.14); border-color:#5a2e30; color:#ff5e66 }


/************************************************************
 * 14) BAN-KARTEN
 ************************************************************/

.bancard{
  border:1px solid var(--border);
  background:var(--panel2);
  border-radius:12px;
  padding:10px;
}
.bancard + .bancard{ margin-top:8px }


/************************************************************
 * 15) MINI-MAP (Server-Detail)
 ************************************************************/

.map-row{ display:flex; align-items:center; gap:10px; margin:8px 0 6px 0 }
.map-mini{
  width:288px; height:128px; object-fit:cover;
  border-radius:8px; border:1px solid var(--border);
  display:block; flex:none; transition:all 0.25s ease-in-out;
  cursor:pointer;
}
.map-mini:hover{ width:440px; height:200px; z-index:5; position:relative }
.map-detail{ display:flex; align-items:center; gap:12px }
@media (max-width:700px){ .map-mini{ width:64px; height:64px }}


/************************************************************
 * 16) TEAM-ÜBERSICHT: Mini-Karten (2 Spalten, 128px Avatar)
 ************************************************************/

.team-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px;
}
@media (max-width:860px){
  .team-grid{ grid-template-columns:1fr; }
}
.tcard{
  display:grid; grid-template-columns:128px 1fr; gap:14px;
  padding:14px; border:1px solid var(--border); border-radius:14px;
  background:var(--panel2);
  transition:transform .15s, border-color .15s;
}
.tcard:hover{ transform:translateY(-1px); border-color:#2f343a }
.tcard__ava{
  width:128px; height:128px; object-fit:cover;
  border-radius:12px; border:1px solid var(--border);
}
.tcard__name{
  font-weight:900; font-size:1.1rem; line-height:1.3; margin:0 0 4px 0;
}
.tcard__code{
  font-size:.95rem; font-weight:700; color:var(--accent); margin:0 0 6px 0;
}
.tcard__rank{
  font-size:.9rem; font-weight:700; color:var(--muted);
}
.tcard__actions{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap }
.btn-sm, .btn-ghost-sm{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.45rem .7rem; border-radius:10px; font-size:.85rem; font-weight:800;
  border:1px solid var(--border); background:var(--panel); color:#fff;
}
.btn-sm{
  background:var(--accent); color:#111; border-color:#2a2f35;
}
.btn-ghost-sm:hover{ border-color:#2f343a }