/* ===========================================
   eSports Glassmorphism Theme (Final + Pulse Fix)
   =========================================== */

/* ---------- Design-Variablen ---------- */
:root {
  --glass-bg: rgba(10, 12, 18, 0.85); /* Etwas dunkler für bessere Lesbarkeit */
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  --glass-blur: 14px;
  --radius: 18px;

  --accent: #ff7a1a;
  --accent-soft: rgba(255, 122, 26, 0.28);
  --accent-softer: rgba(255, 122, 26, 0.14);
}

/* ---------- Global ---------- */
* { box-sizing: border-box; }
input { color: black !important; }

.glassy,
.pulse,
.navigation_image,
.navigation_image_top { transition: all .25s ease; }

@media (prefers-reduced-motion: reduce) {
  .glassy, .pulse, .navigation_image, .navigation_image_top { transition: none !important; }
  .pulse { animation: none !important; }
}

/* ---------- Hintergrund ---------- */
.full {
  background: url('../../images/background/bg.jpg') no-repeat center center fixed;
  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}

.full::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(1200px 700px at 70% 20%, rgba(255, 122, 26, 0.06), transparent 60%),
              linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35));
}

/* ---------- Media Queries ---------- */
@media screen and (max-width:767px) {
  .table-responsive { border: none !important; overflow: auto; width: 100%; }
  .box-title { position: absolute; top: -42px; left: -7px; height: 46px; }
  .glassy { border-radius: 16px; }
}

@media screen and (min-width:768px) {
  .table-responsive { border: none !important; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; width: 100%; }
  .box-title { position: absolute; top: -50px; left: -7px; height: 80px; }
  .glassy { border-radius: 20px; }
}

/* ---------- Navigation Panels ---------- */
.navigation_title { position: absolute; top: 10px; left: 10px; z-index: 999; }
.navigation_form { position: absolute; width: 90%; top: 50px; left: 10px; color: #fff; }
.navigation_info { position: absolute; width: 60%; top: 50px; left: 10px; color: #fff; }

.navigation_image {
  position: absolute; bottom: 0; right: 20px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35));
}
.navigation_image:hover { transform: translateY(-2px) scale(1.04); }

.navigation_image_top {
  position: absolute; top: 20px; right: 20px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35));
}
.navigation_image_top:hover { transform: translateY(-2px) scale(1.04); }

/* ---------- Scroll-Panels ---------- */
.scroll145 { height: 145px; width: 100%; overflow: auto; }
.scroll170 { height: 170px; width: 100%; overflow: auto; }
.scroll185 { height: 185px; width: 100%; overflow: auto; }
.scroll200 { height: 200px; width: 100%; overflow: auto; }
.scroll230 { height: 230px; width: 100%; overflow: auto; }
.scroll240 { height: 240px; width: 100%; overflow: auto; }
.scroll248 { height: 248px; width: 100%; overflow: auto; }
.scroll255 { height: 255px; width: 100%; overflow: auto; }
.scroll290 { height: 290px; width: 100%; overflow: auto; }
.scroll300 { height: 300px; width: 100%; overflow: auto; }
.scroll320 { height: 320px; width: 100%; overflow: auto; }
.scroll330 { height: 330px; width: 100%; overflow: auto; }
.scroll385 { height: 385px; width: 100%; overflow: auto; }
.scroll420 { height: 420px; width: 100%; overflow: auto; }
.scroll425 { height: 425px; width: 100%; overflow: auto; }
.scroll430 { height: 430px; width: 100%; overflow: auto; }
.scroll452 { height: 452px; width: 100%; overflow: auto; }
.scroll470 { height: 470px; width: 100%; overflow: auto; }
.scroll475 { height: 475px; width: 100%; overflow: auto; }
.scroll490 { height: 490px; width: 100%; overflow: auto; }
.scroll505 { height: 505px; width: 100%; overflow: auto; }
.scroll510 { height: 510px; width: 100%; overflow: auto; }
.scroll515 { height: 515px; width: 100%; overflow: auto; }
.scroll520 { height: 520px; width: 100%; overflow: auto; }
.scroll535 { height: 535px; width: 100%; overflow: auto; }
.scroll565 { height: 565px; width: 100%; overflow: auto; }
.scroll570 { height: 570px; width: 100%; overflow: auto; }
.scroll580 { height: 580px; width: 100%; overflow: auto; }
.scroll600 { height: 600px; width: 100%; overflow: auto; }
.scroll620 { height: 620px; width: 100%; overflow: auto; }
.scroll630 { height: 630px; width: 100%; overflow: auto; }
.scroll640 { height: 640px; width: 100%; overflow: auto; }
.scroll650 { height: 650px; width: 100%; overflow: auto; }
.scroll670 { height: 670px; width: 100%; overflow: auto; }
.scroll700 { height: 700px; width: 100%; overflow: auto; }

/* ---------- Box-Größen ---------- */
.box85 { height: 85px; position: relative; }
.box125 { height: 125px; position: relative; }
.box145 { height: 145px; position: relative; }
.box160 { height: 160px; position: relative; }
.box175 { height: 175px; position: relative; }
.box196 { height: 196px; position: relative; }
.box200 { height: 200px; position: relative; }
.box225 { height: 225px; position: relative; }
.box235 { height: 235px; position: relative; }
.box236 { height: 236.5px; position: relative; }
.box245 { height: 235px; position: relative; }
.box250 { height: 250px; position: relative; }
.box260 { height: 260px; position: relative; }
.box265 { height: 265px; position: relative; }
.box270 { height: 270px; position: relative; }
.box278 { height: 278px; position: relative; }
.box300 { height: 300px; position: relative; }
.box320 { height: 320px; position: relative; }
.box325 { height: 325px; position: relative; }
.box330 { height: 330px; position: relative; }
.box350 { height: 350px; position: relative; }
.box360 { height: 360px; position: relative; }
.box400 { height: 400px; position: relative; }
.box415 { height: 415px; position: relative; }
.box425 { height: 425px; position: relative; }
.box450 { height: 450px; position: relative; }
.box460 { height: 460px; position: relative; }
.box482 { height: 482px; position: relative; }
.box485 { height: 485px; position: relative; }
.box520 { height: 520px; position: relative; }
.box525 { height: 525px; position: relative; }
.box530 { height: 530px; position: relative; }
.box535 { height: 535px; position: relative; }
.box545 { height: 545px; position: relative; }
.box550 { height: 550px; position: relative; }
.box560 { height: 560px; position: relative; }
.box570 { height: 570px; position: relative; }
.box575 { height: 575px; position: relative; }
.box595 { height: 595px; position: relative; }
.box630 { height: 630px; position: relative; }
.box635 { height: 635px; position: relative; }
.box640 { height: 640px; position: relative; }
.box660 { height: 660px; position: relative; }
.box670 { height: 670px; position: relative; }
.box730 { height: 730px; position: relative; }

/* ---------- Glas-Panel Grundstil ---------- */
.box-bg {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius);
  backdrop-filter: blur(var(--glass-blur)) saturate(125%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(125%);
  box-shadow: var(--glass-shadow);
}

.glassy {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--glass-blur)) saturate(125%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(125%);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}

.glassy:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4); }

/* ---------- Box-Titel ---------- */
.box-title {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  padding: 8px 12px;
  border-radius: calc(var(--radius) - 6px);
  color: #fff; letter-spacing: .4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* ---------- Hover-Layer ---------- */
.bg_nav { position: absolute; inset: 0; }
.bg_nav:hover {
  background: linear-gradient(to bottom, rgba(255, 133, 38, 0.25) 50%, rgba(255, 133, 38, 0.25) 25%);
  border: none;
}

/* Navbar Links Fix */
.navbar .navbar-nav>li>a {
  padding: 12px 16px;
  line-height: 48px;
  font-size: 14px;
  border-bottom: 2px solid transparent;
}
.navbar .navbar-nav>li>a:hover,
.navbar .navbar-nav>.active>a {
  border-bottom-color: var(--accent); /* Variable nutzen */
}

/* ---------- Ticker & Icons ---------- */
.box-icons { position: absolute; top: -50px; right: -7px; }

.box-resultticker,
.box-newsticker {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}

.box-resultticker { position: static; top: 0; right: 0; width: 100%; height: 35px; }
.box-newsticker { position: absolute; top: -3px; left: 3px; width: 1200px; height: 35px; }

/* ---------- Teamform ---------- */
.teamform_S, .teamform_U, .teamform_N {
  width: 25px; height: 25px; border-radius: 100px; text-align: center; color: #111; font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.teamform_S { background: radial-gradient(circle at 30% 30%, #4cff4c, #1f8b1f); }
.teamform_U { background: radial-gradient(circle at 30% 30%, #fff87a, #bfb242); }
.teamform_N { background: radial-gradient(circle at 30% 30%, #ff7a7a, #a93232); }

/* ---------- Buttons ---------- */
.btn-homeboxes { position: absolute; top: 10px; right: 10px; }

.btn-own {
  padding: 6px 10px; font-size: 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff; border: 1px solid rgba(255, 255, 255, 0.16);
}
.btn-own:hover { background: rgba(255, 122, 26, 0.12); border-color: rgba(255, 122, 26, 0.45); }

/* ---------- Tabs & Menüs ---------- */
.menu-link { font-size: 18px; }
.tab-homeboxes { position: absolute; bottom: 15px; right: 10px; }
.tab-aufstellung { position: absolute; bottom: 35px; right: 10px; }
.tab-newsbox { position: absolute; top: 15px; right: 170px; }
.tab-spielerprofil { position: absolute; bottom: 170px; right: 20px; }
.tab-kader { position: absolute; right: 20px; top: 85px; }
.tab-finanzzentrum, .tab-tauschboerse, .tab-angebote, .tab-ewigestatistiken1,
.tab-ewigestatistiken3, .tab-ewigestatistiken4, .tab-ewigestatistiken5, .tab-ewigestatistiken6,
.tab-saisonstatistiken3, .tab-saisonstatistiken4, .tab-saisonstatistiken5, .tab-saisonstatistiken6,
.tab-profile, .tab-friendly, .tab-turnier, .tab-auslosung, .tab-fuenfjahreswertung,
.tab-einstellungen, .tab-kaderupdates, .tab-spielbericht, .tab-tordesmonats {
  position: absolute; right: 20px; top: 15px;
}
.tab-ewigestatistiken2 { position: absolute; right: 20px; top: 460px; }
.tab-saisonstatistiken1, .tab-pokale, .tab-cl, .tab-el, .tab-wm, .tab-em { position: absolute; right: 20px; top: 115px; }
.tab-saisonstatistiken2 { position: absolute; right: 20px; top: 575px; }
.tab-tabelle { position: absolute; right: 20px; top: 215px; }
.tab-tabellen { position: absolute; right: 30px; top: 250px; }

/* ---------- FUT Karten (Original) ---------- */
.fut.playercard div { position: absolute; font-weight: bold; line-height: 18px; font-size: 18px; }
.fut.playercard.card-large { width: 152px; height: 212px; }
.fut.card-large.playercard.gold { background-image: url('../../images/fut/goldrare.png'); }
.fut.card-large.playercard.silver { background-image: url('../../images/fut/silverrare.png'); }
.fut.card-large.playercard.bronze { background-image: url('../../images/fut/bronzerare.png'); }
.fut.playercard.card-large .playercard-rating { position: relative; text-align: center; font-size: 30px; width: 50px; top: 50px; left: -40px; }
.fut.playercard.card-large .playercard-position { position: relative; text-align: center; font-size: 20px; width: 50px; top: 40px; left: -40px; }
.fut.playercard.card-large .playercard-picture { position: relative; height: 115px; width: 115px; top: -71px; left: 35px; }
.fut.playercard.card-large .playercard-picture img { max-width: 100%; border-bottom-right-radius: 90px 4px; }
.fut.playercard.card-large .playercard-name {
  top: 54%; position: absolute; width: 100%; overflow: hidden; padding: 0 12%;
  box-sizing: border-box; line-height: 150%; text-align: center; text-transform: uppercase;
  text-overflow: ellipsis; white-space: nowrap; font-size: 110%;
}
.fut.playercard.card-large .playercard-club { position: relative; top: 40px; left: -40px; }
.fut.playercard.card-large .playercard-club img { width: 30px; }
.fut.playercard.card-large .playercard-nation { position: relative; top: 40px; left: -40px; }
.fut.playercard.card-large .playercard-nation img { width: 30px; }
.fut.playercard.card-large .playercard-attr { position: relative; text-align: left; font-size: 16px; }
.fut.playercard.card-large .playercard-attr1 { width: 95px; top: -45px; left: 0; }
.fut.playercard.card-large .playercard-attr2 { width: 95px; top: -42px; left: 0; }
.fut.playercard.card-large .playercard-attr3 { width: 95px; top: -39px; left: 0; }
.fut.playercard.card-large .playercard-attr4 { width: 95px; top: -100px; left: 70px; }
.fut.playercard.card-large .playercard-attr5 { width: 95px; top: -97px; left: 70px; }
.fut.playercard.card-large .playercard-attr6 { width: 95px; top: -94px; left: 70px; }

/* ---------- Scrollbars (dezent) ---------- */
.table-responsive::-webkit-scrollbar, [class^="scroll"]::-webkit-scrollbar { height: 10px; width: 10px; }
.table-responsive::-webkit-scrollbar-thumb, [class^="scroll"]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22); border-radius: 999px; border: 2px solid rgba(0, 0, 0, 0.25);
}
.table-responsive::-webkit-scrollbar-track, [class^="scroll"]::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2); border-radius: 999px;
}

/* =========================================================
   PULSE-ANIMATION (fixiert & wichtig)
   ========================================================= */
@keyframes pulseGlow {
  0% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06) inset,
      0 2px 14px rgba(0, 0, 0, 0.3),
      0 0 0 0 var(--accent-soft),
      0 0 0 0 var(--accent-softer);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08) inset,
      0 6px 22px rgba(0, 0, 0, 0.34),
      0 0 0 8px var(--accent-soft),
      0 0 22px 6px var(--accent-softer);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06) inset,
      0 2px 14px rgba(0, 0, 0, 0.3),
      0 0 0 0 var(--accent-soft),
      0 0 0 0 var(--accent-softer);
  }
}

.box-bg.pulse,
.glassy.pulse {
  animation: pulseGlow 3.2s ease-in-out infinite !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 2px 14px rgba(0, 0, 0, 0.3) !important;
}

/* Overlay Ring für Pulse */
.glassy.pulse::after,
.box-bg.pulse::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 var(--accent-soft), 0 0 0 0 var(--accent-softer);
  animation: pulseRing 3.2s ease-in-out infinite;
}

@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 var(--accent-soft), 0 0 0 0 var(--accent-softer); opacity: .65; }
  50% { box-shadow: 0 0 0 8px var(--accent-soft), 0 0 26px 4px var(--accent-softer); opacity: 1; }
  100% { box-shadow: 0 0 0 0 var(--accent-soft), 0 0 0 0 var(--accent-softer); opacity: .65; }
}

/* =========================================================
   DROPDOWN (Glassmorphism Fix)
   ========================================================= */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: fixed; /* oder absolute, je nach Layout-Wunsch */

  /* Glas-Design statt Braun */
  background-color: rgba(15, 18, 25, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5); /* Fix für invaliden Shadow */
  z-index: 9999;
  border-radius: 8px;
  overflow: hidden;
  padding: 5px 0;
}

.dropdown-content a {
  color: #fff; /* Weiße Schrift für Kontrast */
  padding: 10px 16px;
  text-decoration: none;
  display: block;
  font-size: 14px;
  transition: background 0.2s ease;
}

.dropdown-content a:hover {
  background-color: var(--accent); /* Orange Accent beim Hover */
  color: #fff;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content { display: block; }

/* Optional: Button Style bei Hover */
.dropdown:hover .dropbtn { background-color: rgba(255, 255, 255, 0.1); }