/* =========================
   RESET / BASIS
========================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: Arial, sans-serif;
  background: #050505;
  color: white;
  padding-bottom: 100px;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3,
h4 {
  color: white;
}


/* =========================
   CONTAINER
========================= */

.app-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}


/* =========================
   HEADER
========================= */

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 18px 40px;

  background: #0b0b0b;
  border-bottom: 2px solid #e00022;
}

.logo-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: auto;
  height: 70px;
}

.logo-text {
  font-size: clamp(42px, 7vw, 80px);
  font-weight: 700;
  color: white;
}

.menu {
  display: flex;
  gap: 22px;
}

.menu a {
  color: white;
  font-size: 14px;
  text-transform: uppercase;
  transition: 0.25s;
}

.menu a:hover {
  color: #e00022;
}


/* =========================
   APP HEADER
========================= */

.app-header {
  text-align: center;
  padding: 30px 20px;
}

.app-header h1 {
  margin-top: 10px;
  font-size: 42px;
}

.app-header p {
  margin-top: 10px;
  color: #aaa;
}


/* =========================
   HERO
========================= */

.hero {
  display: flex;
  gap: 35px;
  align-items: flex-start;

  padding: 40px 0;
}

.info {
  flex: 1;
}

.red {
  color: #e00022;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
}

.info h1 {
  font-size: clamp(42px, 7vw, 68px);
  line-height: 1.05;
  margin: 12px 0;
}

.info h2 {
  margin-bottom: 30px;
  color: #ddd;
}

.info p {
  color: #ccc;
}


/* =========================
   EVENT INFOS
========================= */

.event-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.event-line {
  display: flex;
  gap: 12px;
  align-items: center;

  padding: 14px 18px;

  background: rgba(255,255,255,0.05);
  border: 1px solid #222;
  border-radius: 12px;
}

.event-icon {
  font-size: 20px;
}

.infinity {
  color: #39ff5a;
  font-weight: bold;
}


/* =========================
   ANMELDUNG
========================= */

.anmeldung {
  width: 400px;

  background: #111;
  border: 1px solid #333;
  border-radius: 16px;

  padding: 28px;

  box-shadow: 0 0 20px rgba(224,0,34,0.18);
}

.anmeldung h2 {
  margin-bottom: 20px;
  color: #e00022;
}

input,
select {
  width: 100%;

  padding: 15px;
  margin-bottom: 15px;

  background: #1a1a1a;
  color: white;

  border: 1px solid #333;
  border-radius: 10px;

  font-size: 15px;
}

input:focus,
select:focus {
  outline: none;
  border-color: #e00022;
  box-shadow: 0 0 12px rgba(224,0,34,0.35);
}

button,
.main-button {
  width: 100%;

  padding: 15px;

  background: #e00022;
  color: white;

  border: none;
  border-radius: 12px;

  font-weight: bold;
  text-transform: uppercase;

  cursor: pointer;
  transition: 0.25s;
}

button:hover,
.main-button:hover {
  background: #ff002b;
}

#anmeldeButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hinweis {
  margin-top: 15px;
  color: #999;
  font-size: 13px;
  text-align: center;
}


/* =========================
   CHECKBOXEN
========================= */

.datenschutz-box,
.regelwerk-box {
  margin-bottom: 16px;

  padding: 14px;

  border-radius: 12px;
  border: 1px solid #333;

  background: rgba(255,255,255,0.05);
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin-top: 10px;
}

.checkbox-row input {
  width: 20px;
  height: 20px;

  margin: 0;
  flex-shrink: 0;
}


/* =========================
   QUICK INFO
========================= */

.quick-info {
  margin-top: 20px;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-info div {
  background: rgba(255,255,255,0.05);

  padding: 12px;

  border-radius: 10px;
  border: 1px solid #222;
}


/* =========================
   STATUS BOXEN
========================= */

.status {
  display: flex;
  justify-content: center;
  gap: 20px;

  flex-wrap: wrap;

  padding: 10px 20px 40px;
}

.box {
  width: 220px;

  background: #111;
  border: 1px solid #222;
  border-radius: 14px;

  padding: 22px;

  text-align: center;
}

.box .icon {
  font-size: 28px;
  margin-bottom: 10px;
}

.box small {
  color: #999;
}

.bar {
  width: 100%;
  height: 6px;

  margin-top: 12px;

  background: #333;
  border-radius: 10px;

  overflow: hidden;
}

#barBelegt {
  height: 100%;
  width: 0%;
  background: #ff3b3b;
}

#barWartend {
  height: 100%;
  width: 0%;
  background: orange;
}


/* =========================
   PREISGELD
========================= */

.auszahlung-box {
  margin-top: 30px;

  padding: 25px;

  background: rgba(0,0,0,0.5);

  border: 1px solid #ff2b2b;
  border-radius: 16px;

  box-shadow: 0 0 20px rgba(255,43,43,0.2);
}

.auszahlung-box h3 {
  color: #ff2b2b;
  margin-bottom: 10px;
}

.auszahlung-info {
  margin-bottom: 20px;
  color: #ccc;
}

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

.preis-card {
  padding: 18px;

  text-align: center;

  background: #111;

  border-radius: 14px;
  border: 1px solid #333;
}

.medaille {
  font-size: 34px;
  margin-bottom: 10px;
}

.preis-card span {
  display: block;
  margin-top: 10px;

  font-size: 34px;
  font-weight: bold;
}

.preis-card small {
  color: #888;
  text-transform: uppercase;
}

.gold {
  border-color: gold;
}

.silber {
  border-color: silver;
}

.bronze {
  border-color: #cd7f32;
}

.best-lady {
  margin-top: 18px;

  padding: 12px;

  border-radius: 10px;

  background: rgba(255,43,43,0.12);

  text-align: center;
}


/* =========================
   LISTEN
========================= */

.listen-container {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 25px;

  max-width: 1300px;

  margin: 40px auto;
  padding: 0 20px;
}

.liste {
  padding: 25px;

  background: rgba(255,255,255,0.05);

  border-radius: 16px;
  border: 1px solid #222;
}

.liste h2 {
  margin-bottom: 20px;
}

.liste ol {
  padding-left: 20px;
}

.liste li {
  margin-bottom: 12px;
}

.liste-bezahlt h2 {
  color: #39ff5a;
}

.liste-wartend h2 {
  color: #ffb000;
}


/* =========================
   QUICK GRID
========================= */

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 18px;
}

.quick-card {
  padding: 25px;

  text-align: center;

  background: rgba(255,255,255,0.06);

  border-radius: 16px;
  border: 1px solid #222;

  transition: 0.25s;
}

.quick-card:hover {
  transform: translateY(-5px);
  border-color: #e00022;
}

.quick-card h3 {
  margin: 10px 0;
}


/* =========================
   INFO CARD
========================= */

.info-card {
  margin-top: 25px;

  padding: 24px;

  background: rgba(255,255,255,0.06);

  border-radius: 16px;
  border: 1px solid #222;
}


/* =========================
   KADER
========================= */

.kader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 20px;

  margin-top: 20px;
}

.spieler-card {
  padding: 22px;

  text-align: center;

  background: rgba(255,255,255,0.05);

  border-radius: 18px;
  border: 1px solid #222;

  transition: 0.3s;
}

.spieler-card:hover {
  transform: translateY(-6px);
  border-color: #0047ab;

  box-shadow: 0 0 25px rgba(0,71,171,0.4);
}

.spieler-bild {
  width: 120px;
  height: 120px;

  margin: 0 auto 14px;

  object-fit: cover;

  border-radius: 50%;
  border: 3px solid #0047ab;
}

.rolle {
  margin-top: 10px;
  font-weight: bold;
}

.captain {
  color: #ff2b2b;
}

.cocaptain {
  color: #ff9900;
}

.spieler {
  color: #ccc;
}


/* =========================
   LIGA
========================= */

.liga-seite iframe {
  width: 100%;
  min-height: 650px;

  border: none;
  border-radius: 14px;

  background: #111;
}


/* =========================
   BOTTOM NAV
========================= */

.bottom-nav {
  position: fixed;

  left: 0;
  right: 0;
  bottom: 0;

  height: 85px;

  background: #111;

  border-top: 1px solid #333;

  display: flex;
  justify-content: space-around;
  align-items: center;

  z-index: 9999;
}

.bottom-nav a {
  flex: 1;

  text-align: center;

  color: white;

  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;

  line-height: 1.2;
}

.bottom-nav a::first-line {
  font-size: 28px;
}

.bottom-nav a:hover {
  color: #e00022;
}


/* =========================
   FOOTER
========================= */

footer {
  margin-top: 50px;

  padding: 30px 20px;

  text-align: center;

  color: #888;
}


/* =========================
   SUCCESS BOX
========================= */

.success-box {
  position: fixed;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  width: 90%;
  max-width: 420px;

  padding: 30px;

  background: #111;

  border: 2px solid #00ff7f;
  border-radius: 20px;

  text-align: center;

  z-index: 99999;

  box-shadow: 0 0 35px rgba(0,255,127,0.3);
}

.big180 {
  font-size: 60px;
  color: #ff2e2e;
  font-weight: bold;
}

.success-text {
  margin-top: 12px;
  color: #ccc;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 900px) {

  .menu {
    display: none;
  }

  .navbar {
    padding: 15px 20px;
  }

  .logo {
    height: 55px;
  }

  .hero {
    flex-direction: column;
    padding: 25px 0;
  }

  .anmeldung {
    width: 100%;
  }

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

  .listen-container {
    grid-template-columns: 1fr;
  }

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

  .status {
    flex-direction: column;
    align-items: center;
  }

  .box {
    width: 100%;
    max-width: 420px;
  }

  .bottom-nav {
    height: 90px;
  }

}

/* =========================
   ABLAUF / ZAHLUNG
========================= */

.info-zahlung {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 25px;

  max-width: 1300px;

  margin: 50px auto;
  padding: 0 20px;
}

.ablauf,
.zahlung-box {
  background: rgba(255,255,255,0.05);

  border: 1px solid #222;
  border-radius: 18px;

  padding: 25px;
}

.ablauf h2,
.zahlung-box h2 {
  margin-bottom: 25px;

  font-size: 42px;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.nummer {
  width: 42px;
  height: 42px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #e00022;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: bold;
  font-size: 18px;
}

.step h3 {
  margin-bottom: 6px;
}

.step p {
  color: #bbb;
  line-height: 1.5;
}

.paypal-btn {
  display: block;

  margin: 20px 0;

  padding: 16px;

  background: #0070ba;

  border-radius: 12px;

  text-align: center;

  font-weight: bold;
  font-size: 18px;
}

.hinweis-zahlung {
  margin-top: 20px;

  padding: 16px;

  border-radius: 12px;

  background: rgba(255,255,255,0.04);
}

.hinweis-zahlung ul {
  margin-top: 12px;
  padding-left: 20px;
}

.hinweis-zahlung li {
  margin-bottom: 10px;
  color: #ccc;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 900px) {

  .info-zahlung {
    grid-template-columns: 1fr;
  }

  .ablauf h2,
  .zahlung-box h2 {
    font-size: 28px;
  }

}
/* =========================
   NÄCHSTES EVENT FIX
========================= */

.info-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-card .main-button {
  margin-top: 10px;
}
/* =========================
   WELCOME PAGE
========================= */

.welcome-page {
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.9)),
    url("images/darts-bg.jpg");

  background-size: cover;
  background-position: center;
}

.welcome-container {
  width: 90%;
  max-width: 420px;

  padding: 40px 30px;

  background: rgba(0,0,0,0.75);

  border: 1px solid #222;
  border-radius: 24px;

  text-align: center;

  backdrop-filter: blur(8px);

  box-shadow: 0 0 35px rgba(224,0,34,0.2);
}

.welcome-logo {
  width: 140px;
  margin: 0 auto 20px;
}

.welcome-container h1 {
  font-size: 52px;
  margin-bottom: 10px;
}

.welcome-subtitle {
  color: #bbb;
  margin-bottom: 35px;
  line-height: 1.5;
}

.welcome-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.welcome-btn {
  display: block;

  padding: 18px;

  border-radius: 14px;

  font-size: 18px;
  font-weight: bold;

  transition: 0.25s;
}

.welcome-btn.member {
  background: #e00022;
}

.welcome-btn.member:hover {
  background: #ff0033;
}

.welcome-btn.guest {
  background: #222;
  border: 1px solid #444;
}

.welcome-btn.guest:hover {
  border-color: #e00022;
}
/* =========================
   KALENDER FIX
========================= */

.kalender-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 6px !important;
}

.kalender-kopf div {
  text-align: center;
  font-weight: bold;
}

.kalender-tag {
  min-height: 70px;
  background: rgba(255,255,255,0.07);
  border: 1px solid #333;
  border-radius: 10px;
  padding: 6px;
  font-size: 13px;
}

.kalender-tag.leer {
  background: transparent;
  border: none;
}

.kalender-event {
  margin-top: 5px;
  background: #e00022;
  color: white;
  border-radius: 6px;
  padding: 4px;
  font-size: 11px;
  font-weight: bold;
}

/* =========================
   KALENDER LOGO BACKGROUND
========================= */

#kalenderBereich {
  position: relative;
  overflow: hidden;
}

#kalenderBereich::before {
  content: "";

  position: fixed;
  inset: 0;

  background: url("dart11enlogo.png") center center no-repeat;
  background-size: 65%;

  opacity: 0.05;

  pointer-events: none;
  z-index: 0;
}

#kalenderBereich > * {
  position: relative;
  z-index: 1;
}
/* =========================
   KALENDER DESIGN UPGRADE
========================= */

.kalender-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}

.kalender-nav button {
  height: 48px;
  border-radius: 14px;
  font-size: 18px;
}

.kalender-tag {
  min-height: 72px;
  padding: 8px;
  border-radius: 14px;
}

.kalender-event {
  margin-top: 8px;
  padding: 8px 6px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.2;
}

.spieltag-card {
  margin-top: 18px;
  padding: 20px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid #333;
}

.spieltag-card h4 {
  font-size: 26px;
  margin-bottom: 12px;
}

.spieltag-meta {
  display: grid;
  gap: 8px;
  color: #ddd;
}

.spieltag-actions button {
  margin-top: 16px;
  height: 54px;
  border-radius: 14px;
}

/* Details-Box */
#spieltagDetails {
  margin-top: 30px;
}

#spieltagDetails h2 {
  font-size: 36px;
  margin-bottom: 18px;
}

#spieltagDetails p {
  margin: 10px 0;
  color: #ddd;
}

/* Rückmeldungs-Zahlen schöner */
.rueckmeldung-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 18px 0 25px;
}

.rueckmeldung-summary div {
  background: rgba(255,255,255,0.07);
  border: 1px solid #333;
  border-radius: 14px;
  padding: 14px 8px;
  text-align: center;
  font-size: 13px;
}

.rueckmeldung-summary strong {
  font-size: 24px;
}

/* Rückmeldungs-Gruppen */
#rueckmeldungen h4 {
  margin-top: 24px;
  margin-bottom: 10px;
  font-size: 24px;
}

.rueckmeldung-person {
  background: rgba(255,255,255,0.06);
  border: 1px solid #333;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
}

/* Abstimm-Buttons untereinander mit Abstand */
#spieltagDetails .main-button {
  margin-top: 10px;
  height: 56px;
  border-radius: 16px;
}

/* Admin Buttons kleiner */
.admin-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.admin-actions button {
  height: 42px;
  padding: 8px;
  font-size: 12px;
  border-radius: 10px;
}

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

  .rueckmeldung-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  #spieltagDetails h2 {
    font-size: 30px;
  }

  .spieltag-card h4 {
    font-size: 24px;
  }

}
/* =========================
   KALENDER MONATS-NAV SCHÖNER
========================= */

.kalender-nav {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 18px 0 24px;
}

.kalender-nav button {
  width: 52px !important;
  height: 44px !important;
  padding: 0 !important;

  border-radius: 14px;
  font-size: 20px;
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Monatstitel schöner */
#monatTitel {
  font-size: 38px;
  margin-bottom: 8px;
}

/* Handy */
@media (max-width: 600px) {

  .kalender-nav {
    justify-content: center;
    gap: 18px;
  }

  .kalender-nav button {
    width: 48px !important;
    height: 40px !important;
    font-size: 18px;
  }

  #monatTitel {
    text-align: center;
    font-size: 32px;
  }

}
.kalender-tag {
  cursor: pointer;
}

.kalender-tag:hover {
  border-color: #e00022;
}
/* =========================
   SPIELTAG EINTRAGEN SCHÖNER
========================= */

#adminSpieltagBox {
  margin-top: 20px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 25px rgba(0,0,0,0.35);
}

#adminSpieltagBox h2 {
  font-size: 30px;
  margin-bottom: 18px;
}

#adminSpieltagBox input,
#adminSpieltagBox select {
  height: 54px;
  margin-bottom: 12px;
  border-radius: 14px;
  font-size: 16px;
  background: rgba(0,0,0,0.35);
}

#adminSpieltagBox button {
  height: 56px;
  margin-top: 10px;
  border-radius: 16px;
  font-size: 15px;
}

#spieltagDatum {
  text-align: center;
}

@media (max-width: 600px) {

  #adminSpieltagBox {
    padding: 18px;
    border-radius: 20px;
  }

  #adminSpieltagBox h2 {
    font-size: 26px;
  }

  #adminSpieltagBox input,
  #adminSpieltagBox select {
    height: 50px;
    font-size: 15px;
  }
}
.abstimmung-buttons {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.nein-button {
  background: #444 !important;
}
.heim-summary {
  grid-template-columns: repeat(2, 1fr) !important;
}
.reminder-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;
}

.reminder-card {
  width: 100%;
  max-width: 420px;

  background: #111;
  border: 1px solid #e00022;
  border-radius: 24px;

  padding: 28px;

  text-align: center;

  box-shadow: 0 0 35px rgba(224,0,34,0.35);
}

.reminder-logo {
  width: 90px;
  margin: 0 auto 15px;
  opacity: 0.9;
}

.reminder-card h2 {
  margin-bottom: 18px;
  color: #e00022;
}

.reminder-text {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}

.reminder-item {
  background: rgba(255,255,255,0.06);
  border: 1px solid #333;
  border-radius: 14px;
  padding: 14px;
  color: #ddd;
  line-height: 1.45;
  text-align: left;
}
.user-info {
  margin-top: 8px;
  color: #bbb;
  font-size: 0.95rem;
  opacity: 0.9;
}
.kalender-tag.heute {
  border: 2px solid #e00022;
  box-shadow: 0 0 18px rgba(224,0,34,0.45);
  background: rgba(224,0,34,0.12);
}

.kalender-tag.vergangen {
  opacity: 0.45;
}

.kalender-tag.heute strong {
  color: #ff3b55;
}
#splashscreen {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at center, #1a0004 0%, #000 70%);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  z-index: 999999;

  overflow: hidden;

  animation: splashFadeOut 0.8s ease forwards;
  animation-delay: 2.8s;
}

#splashscreen::before {
  content: "";

  position: absolute;
  width: 300px;
  height: 300px;

  background: rgba(224, 0, 34, 0.15);

  border-radius: 50%;

  filter: blur(60px);

  animation: glowPulse 3s infinite;
}

#splashscreen img {
  width: 150px;
  z-index: 2;

  opacity: 0;

  transform: translateY(40px) scale(0.9);

  animation:
    logoIntro 1s ease forwards,
    logoPulse 2.5s ease-in-out infinite 1s;
}

#splashscreen h1 {
  color: white;
  margin-top: 20px;

  font-size: 2rem;
  letter-spacing: 2px;

  opacity: 0;

  animation: textFade 1s ease forwards;
  animation-delay: 0.8s;

  z-index: 2;
}

#splashscreen p {
  color: #999;
  margin-top: 6px;

  opacity: 0;

  animation: textFade 1s ease forwards;
  animation-delay: 1.2s;

  z-index: 2;
}

@keyframes logoIntro {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes logoPulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px rgba(224,0,34,0.5));
  }

  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 25px rgba(224,0,34,0.8));
  }

  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px rgba(224,0,34,0.5));
  }
}

@keyframes logoPulse {

  0% {
    transform: scale(1);
  }

  10% {
    transform: scale(1.12);
  }

  20% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.08);
  }

  40% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}
#splashscreen {
  animation: splashFadeOut 0.8s ease forwards;
  animation-delay: 2.8s;
}

@keyframes splashFadeOut {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
.urlaub-box {
  border: 1px solid rgba(255, 180, 0, 0.35);
  box-shadow: 0 0 22px rgba(255, 180, 0, 0.12);
}

.urlaub-box h2 {
  color: #ffb000;
}

.urlaub-box p {
  color: #ccc;
  line-height: 1.5;
}

.urlaub-box label {
  display: block;
  margin: 14px 0 6px;
  color: #ddd;
  font-weight: bold;
}

.urlaub-box input {
  margin-bottom: 10px;
}

.urlaub-box button {
  margin-top: 12px;
}
.urlaub-item {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 12px 14px;
  margin-top: 10px;

  border-radius: 14px;

  background: rgba(255, 180, 0, 0.08);
  border: 1px solid rgba(255, 180, 0, 0.15);
}

.urlaub-item button {
  border: none;
  background: rgba(255, 70, 70, 0.15);

  color: #ff6b6b;

  width: 38px;
  height: 38px;

  border-radius: 10px;

  font-size: 16px;
  cursor: pointer;
}

.urlaub-item button:hover {
  background: rgba(255, 70, 70, 0.3);
}
.urlaub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  cursor: pointer;
}

.urlaub-header h2 {
  margin: 0;
}

#urlaubToggleIcon {
  font-size: 18px;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

#urlaubContent {
  margin-top: 15px;
}
.kalender-event.heimspiel {
  background: linear-gradient(
    135deg,
    #0047ab,
    #0066ff
  );

  border: 1px solid rgba(255,255,255,0.15);
}

.kalender-event.auswaertsspiel {
  background: linear-gradient(
    135deg,
    #a80000,
    #ff2d2d
  );

  border: 1px solid rgba(255,255,255,0.15);
}
/* =========================
   SPIELTAG CENTER
========================= */

.spieltag-center-card {
  text-align: center;
  padding: 25px;
   height: calc(100vh - 220px);
overflow: visible;
}

body.spieltag-page {
  overflow: hidden;
  height: 100vh;
}

.spieltag-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 25px;
}

.spieltag-nav button {
  width: 45px;
  height: 45px;

  border: none;
  border-radius: 12px;

  background: #e00022;
  color: white;

  font-size: 20px;
  font-weight: bold;

  cursor: pointer;
}

#spieltagCounter {
  font-weight: bold;
  opacity: 0.8;
}

.spieltag-center-content h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

.spieltag-gegner {
  font-size: 26px;
  font-weight: bold;

  margin-bottom: 25px;

  color: #ffffff;
}

.spieltag-details{
  margin-top:28px;

  padding:26px 22px;

  border-radius:28px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.02)
    );

  border:1px solid rgba(196,0,48,0.18);

  backdrop-filter:blur(12px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 30px rgba(0,0,0,0.45);

  display:flex;
  flex-direction:column;
  gap:24px;
}

.spieltag-details p {
  margin:0;
  font-size: 18px;
  margin-bottom: 30px;
}
/* Heimspiel */

.heim-center {
  border: 2px solid #0047ab;

  box-shadow:
    0 0 20px rgba(0,71,171,0.4);

  border-radius: 20px;
}

/* Auswärtsspiel */

.auswaerts-center {
  border: 2px solid #e00022;

  box-shadow:
    0 0 20px rgba(224,0,34,0.4);

  border-radius: 20px;
}
.maps-button {
  display: inline-block;

  margin-top: 18px;
  padding: 12px 18px;

  background: #e00022;
  color: white;

  border-radius: 14px;

  text-decoration: none;
  font-weight: bold;

  transition: 0.2s;
}

.maps-button:hover {
  transform: scale(1.03);
}
/* =========================
   RÜCKMELDUNGS NAMEN
========================= */

.namen-popup {
  margin-top: 20px;

  padding: 18px;

  border-radius: 18px;

  background: rgba(255,255,255,0.05);

  animation: fadeIn 0.2s ease;
}

.namen-popup h4 {
  margin-bottom: 15px;

  font-size: 20px;
}

.spieler-name {
  padding: 10px 14px;

  margin-bottom: 10px;

  border-radius: 12px;

  background: rgba(255,255,255,0.08);

  font-weight: bold;
}

#spieltagRueckmeldungen {
  position: relative;
  z-index: 10;
}

@keyframes fadeIn {

  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}
/* =========================
   MATCHDAY STATUSBAR
========================= */

.matchday-statusbar {
  display: flex;

  justify-content: space-around;
  align-items: center;

  margin-top: 20px;

  background: rgba(255,255,255,0.04);

  border-radius: 20px;

  overflow: hidden;
}

.matchday-statusbar div {
  flex: 1;

  padding: 18px 10px;

  text-align: center;

  font-size: 22px;
  font-weight: bold;

  cursor: pointer;

  transition: 0.2s;

  border-right: 1px solid rgba(255,255,255,0.08);
}

.matchday-statusbar div:last-child {
  border-right: none;
}

.matchday-statusbar div:hover {
  background: rgba(255,255,255,0.08);
}

.matchday-statusbar strong {
  display: block;

  margin-top: 8px;

  font-size: 24px;
}
/* =========================
   MATCHDAY STATUSBAR
========================= */

.matchday-statusbar {
  display: flex;

  justify-content: space-around;
  align-items: center;

  margin-top: 35px;

   position:relative;
   z-index:5;
   
  background: rgba(255,255,255,0.04);

  border-radius: 20px;

  overflow: hidden;
}

.matchday-statusbar div {
  flex: 1;

  padding: 18px 10px;

  text-align: center;

  font-size: 22px;
  font-weight: bold;

  cursor: pointer;

  transition: 0.2s;

  border-right: 1px solid rgba(255,255,255,0.08);
}

.matchday-statusbar div:last-child {
  border-right: none;
}

.matchday-statusbar div:hover {
  background: rgba(255,255,255,0.08);
}

.matchday-statusbar strong {
  display: block;

  margin-top: 8px;

  font-size: 24px;
}
/* Aktive Rückmeldung */

.aktiv-status {
  background: rgba(255,255,255,0.12) !important;

  transform: scale(1.03);
}
.bezahlt,
.bezahlt-status,
.bezahlt-haken {
  color: #28ff5a !important;
  font-weight: bold;
}
body.spieltag-page {
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
  padding-bottom: 140px;
}

.spieltag-center-card {
  overflow: visible !important;
  margin-bottom: 140px;
}

#spieltagRueckmeldungen {
  display: block !important;
  margin-top: 20px;
  position: relative;
  z-index: 5;
}
#rueckmeldungNamenListe {
  margin-bottom: 140px;
  padding-bottom: 180px;
}
/* =========================
   CAPTAIN CENTER
========================= */

.aufstellung-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.aufstellung-slot {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 12px;
}

.aufstellung-slot label {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  color: #e00022;
}

.aufstellung-slot select,
#spieltagSelect,
#systemSelect {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: #151515;
  color: white;
  font-weight: bold;
}

.spieler-chip {
  display: inline-block;
  margin: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-weight: bold;
}

.spieler-chip small {
  margin-left: 6px;
  color: #28ff5a;
}

.spielplan-zeile {
  padding: 12px 14px;
  margin: 8px 0;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  font-weight: bold;
}

#spielplanVorschau h3 {
  margin-top: 22px;
  color: #e00022;
}
/* =========================
   FEATURE CARDS
========================= */

.feature-card {
  display: flex;
  align-items: center;
  gap: 16px;

  padding: 18px;
  margin-bottom: 18px;

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.03)
    );

  border: 1px solid rgba(255,255,255,0.08);

  text-decoration: none;
  color: white;

  transition: 0.2s;
}

.feature-card:active {
  transform: scale(0.98);
}

.feature-icon {
  width: 64px;
  height: 64px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;

  font-size: 28px;

  background:
    linear-gradient(
      145deg,
      #e00022,
      #8a0015
    );
}

.feature-text h3 {
  margin: 0;
  font-size: 20px;
}

.feature-text p {
  margin-top: 6px;
  opacity: 0.75;
  font-size: 14px;
  line-height: 1.4;
}
.popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(10px);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:99999;
  padding:22px;
}

.popup-box{
  width:100%;
  max-width:390px;
  background:linear-gradient(180deg,#1a1a1a,#101010);
  border:1px solid rgba(196,0,48,0.65);
  border-radius:30px;
  padding:28px 22px 22px;
  text-align:center;
  color:white;
  box-shadow:
    0 0 30px rgba(196,0,48,0.18),
    0 20px 60px rgba(0,0,0,0.8);
}

.popup-icon{
  width:82px;
  height:82px;
  margin:0 auto 18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(196,0,48,0.12);
  border:1px solid rgba(196,0,48,0.45);
  box-shadow:0 0 20px rgba(196,0,48,0.18);
}

.popup-icon span{
  font-size:38px;
}

.popup-box h2{
  margin:0;
  font-size:34px;
  font-weight:800;
}

#votePopupText{
  margin-top:18px;
  line-height:1.55;
  font-size:17px;
  color:rgba(255,255,255,0.88);
}

#votePopupText strong{
  color:#c40030;
  font-size:22px;
}

.popup-divider{
  width:100%;
  height:1px;
  background:rgba(196,0,48,0.3);
  margin:22px 0;
}

.popup-main-btn,
.popup-box button:first-of-type{
  width:100%;
  border:none;
  border-radius:18px;
  padding:17px;
  margin-top:12px;
  font-size:16px;
  font-weight:800;
  letter-spacing:0.5px;
  color:white !important;
  background:linear-gradient(135deg,#8f001f,#c40030) !important;
  box-shadow:0 10px 24px rgba(196,0,48,0.25);
  cursor:pointer;
}

.popup-secondary-btn,
.close-btn{
  width:100%;
  border:none;
  border-radius:18px;
  padding:17px;
  margin-top:14px;
  font-size:16px;
  font-weight:700;
  color:white;
  background:rgba(255,255,255,0.1);
  cursor:pointer;
}
.aktiv-status{
  background:linear-gradient(
    135deg,
    #003cff,
    #005eff
  ) !important;

  color:white !important;

  box-shadow:
    0 0 18px rgba(0,94,255,0.45);

  transform:scale(1.05);

  transition:0.2s;
}
.heim-center{
  background:
    linear-gradient(
      135deg,
      rgba(80,0,20,0.10),
      rgba(25,25,25,0.96)
    );

  border:1px solid rgba(196,0,48,0.35);

  box-shadow:
    0 0 8px rgba(196,0,48,0.12);
}

.auswaerts-center{
  background:
    linear-gradient(
      135deg,
      rgba(0,45,90,0.10),
      rgba(25,25,25,0.96)
    );

  border:1px solid rgba(0,94,255,0.28);

  box-shadow:
    0 0 8px rgba(0,94,255,0.10);
}
.spieltag-slide-out-left {
  animation: slideOutLeft 0.18s ease forwards;
}

.spieltag-slide-out-right {
  animation: slideOutRight 0.18s ease forwards;
}

.spieltag-slide-in {
  animation: slideIn 0.22s ease forwards;
}

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-40px);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(40px);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(35px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
#spieltagCountdown{
  display:inline-block;
  margin:6px 0 14px;
  padding:10px 16px;
  border-radius:999px;

  background:rgba(196,0,48,0.14);
  border:1px solid rgba(196,0,48,0.35);

  color:#ffffff;
  font-size:18px;
  font-weight:800;

  box-shadow:0 0 14px rgba(196,0,48,0.16);
}