/* =============================================
   Index Page – Spezifische Styles
   AGGRESSIVE – Stärke & Wille
   ============================================= */

/* --- Live-Spielplan Ticker (Hero-integriert) --- */
.liveplan {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  position: relative;
  z-index: 3;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

/* "SPIELPLAN" link */
.lp-spielplan-link {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--clr-white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.lp-spielplan-link:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.lp-viewport {
  flex: 1;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
  border-radius: 6px;
  background: transparent;
}

.lp-viewport::-webkit-scrollbar {
  display: none;
}

.lp-track {
  display: flex;
  align-items: stretch;
  white-space: nowrap;
}

.lp-card {
  display: grid;
  grid-template-columns: 100px 1fr 70px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  min-width: 360px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease;
  position: relative;
  color: rgba(255, 255, 255, 0.85);
}

.lp-card:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Next game highlight */
.lp-card.lp-next-game {
  background: rgba(255, 255, 255, 0.1);
  border-right-color: rgba(255, 255, 255, 0.15);
}

.lp-card.lp-next-game::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--clr-white);
}

/* Win/Loss card accents */
.lp-card.lp-win {
  background: rgba(22, 163, 106, 0.1);
}

.lp-card.lp-loss {
  background: rgba(220, 38, 38, 0.08);
}

.lp-meta {
  display: grid;
  gap: 1px;
  font-weight: 700;
}

.lp-meta .lp-date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lp-meta .lp-time {
  font-size: 15px;
  font-weight: 900;
  color: var(--clr-white);
}

.lp-meta .lp-md {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.3px;
}

.lp-team {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  align-items: center;
}

.lp-name {
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--clr-white);
}

.lp-logo {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.15);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.lp-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Score area */
.lp-score-wrap {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.lp-score {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--clr-white);
}

.lp-score.lp-win {
  color: var(--clr-success);
  text-shadow: 0 0 12px rgba(74, 222, 128, 0.3);
}

.lp-score.lp-loss {
  color: var(--clr-error-text);
  text-shadow: 0 0 12px rgba(248, 113, 113, 0.3);
}

/* Status badges */
.lp-status {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.5px;
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
}

.lp-status-next {
  background: var(--clr-white);
  color: var(--clr-dark);
  animation: pulseGlow 2s ease-in-out infinite;
}

.lp-status-win {
  background: rgba(74, 222, 128, 0.2);
  color: var(--clr-success);
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.lp-status-loss {
  background: rgba(248, 113, 113, 0.15);
  color: var(--clr-error-text);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.lp-status-cancelled {
  background: rgba(248, 113, 113, 0.15);
  color: var(--clr-cancelled);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.lp-status-postponed {
  background: rgba(251, 191, 36, 0.15);
  color: var(--clr-postponed);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

/* Cancelled/postponed card styles */
.lp-card.lp-cancelled { opacity: 0.4; }
.lp-card.lp-postponed { opacity: 0.5; }

.lp-score.lp-cancelled {
  color: var(--clr-cancelled);
  font-size: 11px;
  font-style: italic;
}

.lp-score.lp-postponed {
  color: var(--clr-postponed);
  font-size: 11px;
  font-style: italic;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3); }
  50% { box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.15); }
}

/* Nav buttons */
.lp-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 900;
  transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.lp-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--clr-white);
  transform: scale(1.1);
}

.lp-btn:active {
  transform: scale(0.95);
}

/* NEXT MATCH jump button */
.lp-jump-next {
  width: auto;
  padding: 0 12px;
  font-size: 10px;
  letter-spacing: 1.5px;
  background: rgba(255, 255, 255, 0.15);
  color: var(--clr-white);
  border-color: rgba(255, 255, 255, 0.25);
}

.lp-jump-next:hover {
  background: rgba(255, 255, 255, 0.25);
  color: var(--clr-white);
}

/* --- Index Hero --- */
.index-hero {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.05) 0%, transparent 70%),
    linear-gradient(160deg, rgb(232, 161, 77) 0%, rgb(200, 120, 40) 35%, rgb(160, 90, 20) 70%, rgb(120, 65, 10) 100%);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Diagonal stripes overlay on hero */
.index-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 60px,
    rgba(0, 0, 0, 0.03) 60px,
    rgba(0, 0, 0, 0.03) 62px
  );
  pointer-events: none;
  z-index: 1;
}

.hero-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 1;
  z-index: 2;
}

.hero-text {
  font-family: var(--font-display);
  color: var(--clr-white);
  user-select: none;
  line-height: 0.9;
  position: absolute;
  left: max(32px, calc((100vw - var(--max-w)) / 2 + 16px));
  top: 22%;
  z-index: 2;
  /* Aggressive drop shadow on text */
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.display-text {
  font-size: clamp(28px, 4.5vw, 48px);
  margin: 0 0 8px;
  letter-spacing: 2px;
}

.display-small {
  font-size: clamp(14px, 2vw, 20px);
  vertical-align: middle;
}

.display-sub {
  font-size: clamp(18px, 3vw, 28px);
  margin: 0 0 8px;
  letter-spacing: 1px;
}

.hero-logo {
  flex-shrink: 0;
}

.hero-logo img {
  height: clamp(350px, 50vw, 600px);
  width: auto;
  user-select: none;
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.3));
}

.hero-bg-number {
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%) rotate(-15deg);
  font-family: var(--font-display);
  font-size: clamp(400px, 60vw, 900px);
  color: var(--clr-white);
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 0 80px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1400px) {
  .hero-text {
    position: static;
    text-align: center;
    padding: 0 16px 16px;
  }

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

@media (max-width: 860px) {
  .lp-spielplan-link,
  .lp-jump-next {
    display: none;
  }

  .lp-card {
    grid-template-columns: 80px 1fr 50px 1fr;
    min-width: 280px;
    gap: 6px;
    padding: 6px 10px;
  }

  .lp-meta .lp-time {
    font-size: 13px;
  }

  .lp-score {
    font-size: 16px;
  }

  .lp-name {
    font-size: 12px;
  }

  .lp-logo {
    width: 24px;
    height: 24px;
  }

  .lp-team {
    grid-template-columns: 24px 1fr;
    gap: 6px;
  }

  .lp-meta .lp-md {
    display: none;
  }
}

@media (max-width: 500px) {
  .hero-logo img {
    height: 80vw;
  }
}

/* --- Sharp diagonal divider (Hero → Content) --- */
.index-hero + .wave-top {
  background: linear-gradient(160deg, rgb(160, 90, 20) 0%, rgb(120, 65, 10) 100%);
}

/* --- Sharp diagonal divider (Content → Hallen) --- */
.content-wrapper + .wave-bottom {
  background: var(--clr-primary);
}

/* --- Section Divider 175 --- */
.section-divider-175 {
  position: relative;
}

.section-divider-175::before {
  content: "175";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(60px, 8vw, 120px);
  color: rgba(0, 0, 0, 0.05);
  line-height: 1;
  letter-spacing: 12px;
  user-select: none;
  pointer-events: none;
  z-index: 1;
}

.hallen-info.section-divider-175::before {
  color: rgba(0, 0, 0, 0.06);
}

/* --- News Grid + Sidebar --- */
.content-wrapper {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(232, 161, 77, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(0, 75, 43, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, #f0f1f3 0%, #ffffff 40%, #f0f1f3 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 0;
}

.content-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: stretch;
}

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

.news-box {
  display: flex;
  flex-direction: column;
  background: var(--clr-white);
  color: var(--clr-dark);
  text-decoration: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: box-shadow 0.4s ease, border-bottom-color 0.3s ease,
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s ease,
              grid-column 0.5s ease,
              grid-row 0.5s ease;
}

.news-box:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  border-bottom-color: var(--clr-primary);
}

.news-box:hover img {
  transform: scale(1.08);
  filter: brightness(1.05);
}

.news-box > img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.news-box {
  position: relative;
}

.news-category-badge {
  display: inline-block;
  margin: 10px 16px 0;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-radius: var(--radius-xs);
  background: var(--clr-primary);
  color: var(--clr-white);
}

.cat-spielbericht { background: var(--cat-spielbericht); }
.cat-jugend { background: var(--cat-jugend); }
.cat-team { background: var(--cat-team); }
.cat-herren { background: var(--cat-herren); }
.cat-verein { background: var(--cat-verein); }
.cat-event { background: var(--cat-event); }
.cat-allgemein { background: var(--cat-allgemein); }
.cat-milestone { background: linear-gradient(135deg, #f39c12, var(--cat-event)); }
.news-category-badge.team-badge { background: var(--cat-team-badge); }

/* ── News Countdown ── */
.news-countdown {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  margin: 12px 0 4px;
  padding: 10px 8px;
  background: rgba(0,0,0,0.15);
  border-radius: 8px;
}
.cd-item { display: flex; flex-direction: column; align-items: center; min-width: 40px; }
.cd-val { font-size: 22px; font-weight: 900; color: var(--clr-primary, #E8A14D); line-height: 1; }
.cd-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.5; margin-top: 2px; }
.news-cd-sep { font-size: 18px; font-weight: 900; color: var(--clr-primary, #E8A14D); opacity: 0.3; margin-top: -10px; }
.cd-done { font-size: 16px; font-weight: 800; color: var(--clr-primary, #E8A14D); text-transform: uppercase; letter-spacing: 1px; }

/* ── Milestone News Card ── */
.news-milestone {
  border-bottom: 3px solid #f39c12;
  overflow: hidden;
}
.news-milestone:hover {
  border-bottom-color: #e74c3c;
}

.milestone-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0d0d1a 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gold burst rays */
.milestone-burst {
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(243, 156, 18, 0.15) 10deg, transparent 20deg,
    transparent 30deg, rgba(243, 156, 18, 0.1) 40deg, transparent 50deg,
    transparent 60deg, rgba(243, 156, 18, 0.15) 70deg, transparent 80deg,
    transparent 90deg, rgba(243, 156, 18, 0.1) 100deg, transparent 110deg,
    transparent 120deg, rgba(243, 156, 18, 0.15) 130deg, transparent 140deg,
    transparent 150deg, rgba(243, 156, 18, 0.1) 160deg, transparent 170deg,
    transparent 180deg, rgba(243, 156, 18, 0.15) 190deg, transparent 200deg,
    transparent 210deg, rgba(243, 156, 18, 0.1) 220deg, transparent 230deg,
    transparent 240deg, rgba(243, 156, 18, 0.15) 250deg, transparent 260deg,
    transparent 270deg, rgba(243, 156, 18, 0.1) 280deg, transparent 290deg,
    transparent 300deg, rgba(243, 156, 18, 0.15) 310deg, transparent 320deg,
    transparent 330deg, rgba(243, 156, 18, 0.1) 340deg, transparent 360deg
  );
  animation: milestone-spin 20s linear infinite;
}
@keyframes milestone-spin {
  to { transform: rotate(360deg); }
}

/* Gold ring – pulsierender Kreis als Spieler-Rahmen */
.milestone-visual::before {
  content: "";
  position: absolute;
  width: 65%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(243, 156, 18, 0.08) 0%,
    rgba(243, 156, 18, 0.12) 42%,
    rgba(243, 156, 18, 0.5) 46%,
    rgba(241, 196, 15, 0.8) 48%,
    rgba(243, 156, 18, 0.9) 50%,
    rgba(231, 76, 60, 0.6) 52%,
    rgba(243, 156, 18, 0.5) 54%,
    transparent 58%
  );
  z-index: 1;
  animation: milestone-pulse 2.5s ease-in-out infinite;
}
@keyframes milestone-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* Gold particles */
.milestone-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #f39c12 50%, transparent 100%),
    radial-gradient(2px 2px at 80% 20%, #f1c40f 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 75%, #e67e22 50%, transparent 100%),
    radial-gradient(2px 2px at 35% 80%, #f39c12 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 75% 60%, #f1c40f 50%, transparent 100%),
    radial-gradient(2px 2px at 15% 65%, #e74c3c 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 45%, #f39c12 50%, transparent 100%),
    radial-gradient(2px 2px at 45% 15%, #f1c40f 50%, transparent 100%);
  animation: milestone-sparkle 3s ease-in-out infinite alternate;
  z-index: 2;
}
@keyframes milestone-sparkle {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

/* Spielerbild – rund, passend im Gold-Ring */
.milestone-player {
  position: relative;
  z-index: 3;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid rgba(243, 156, 18, 0.6);
  box-shadow: 0 0 20px rgba(243, 156, 18, 0.4), 0 0 40px rgba(243, 156, 18, 0.2);
  transition: transform 0.4s ease;
}
.news-milestone:hover .milestone-player {
  transform: scale(1.05);
}

/* Logo – klein links unten */
.milestone-logo {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
  width: 42px;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(243, 156, 18, 0.5));
  transition: transform 0.3s ease;
}
.news-milestone:hover .milestone-logo {
  transform: scale(1.1);
}

/* Ohne Spielerbild: Logo bleibt klein unten links */
.milestone-visual:not(.has-player) .milestone-logo {
  width: 36px;
}

.news-pinned-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(168, 85, 247, 0.9);
  color: var(--clr-white);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}

.news-box-title {
  margin: 6px 16px 0;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--clr-dark);
}

.news-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  border-bottom-color: var(--clr-primary);
}

.news-featured img {
  grid-row: 1 / 5;
  width: 100%;
  height: auto;
}

.news-featured .news-category-badge { grid-column: 2; }
.news-featured .news-box-title { grid-column: 2; font-size: 20px; }
.news-featured p { grid-column: 2; font-size: 16px; }
.news-featured .read-more { grid-column: 2; }
.news-featured .news-expand-content { grid-column: 1 / -1; }

.news-box p {
  margin: 8px 16px 8px;
  line-height: 1.45;
  font-size: 15px;
  flex: 1;
}

.read-more {
  margin: 0 16px 16px;
  color: var(--clr-accent);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: padding-left 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.news-box:hover .read-more {
  padding-left: 12px;
  color: var(--clr-cta);
}

/* --- News Expand State --- */

/* Hidden content container inside each card */
.news-expand-content {
  display: none;
  padding: 0 24px 24px;
  line-height: 1.7;
  font-size: 16px;
  white-space: normal;
}

.news-expand-content p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.7;
}

.news-expand-content .article-meta {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.news-expand-content h2 {
  font-size: 24px;
  font-weight: 900;
  margin: 0 0 16px;
}

/* Close button inside expanded card */
.news-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--clr-dark);
  color: var(--clr-white);
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
  display: none;
  place-items: center;
  z-index: 10;
  transition: transform 0.2s ease, background 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.news-close-btn:hover {
  transform: scale(1.15) rotate(90deg);
  background: var(--clr-cta);
}

/* Full-article link */
.news-full-link {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 20px;
  background: var(--clr-cta);
  color: var(--clr-white);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-full-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* When grid has an expanded card */
.news-grid.has-expanded {
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Expanded card fills full width */
.news-box.news-expanded {
  grid-column: 1 / -1;
  position: relative;
  border-bottom-color: var(--clr-primary);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  cursor: default;
  animation: newsExpandIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes newsExpandIn {
  from {
    opacity: 0.6;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.news-box.news-expanded > img {
  width: 100%;
  height: auto;
}

.news-box.news-expanded .read-more {
  display: none;
}

.news-box.news-expanded .news-expand-content {
  display: block;
  animation: contentFadeIn 0.4s 0.15s ease both;
}

.news-box.news-expanded .news-close-btn {
  display: grid;
  animation: contentFadeIn 0.3s 0.2s ease both;
}

@keyframes contentFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Collapsed siblings – small strip */
.news-grid.has-expanded .news-box:not(.news-expanded) {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 8px;
  opacity: 0.6;
  border-bottom-color: transparent;
  animation: newsCollapseIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes newsCollapseIn {
  from { opacity: 0; transform: scale(0.9) translateY(4px); }
  to { opacity: 0.6; transform: scale(1) translateY(0); }
}

.news-grid.has-expanded .news-box:not(.news-expanded):hover {
  opacity: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.news-grid.has-expanded .news-box:not(.news-expanded) > img {
  width: 80px;
  min-width: 80px;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
}

.news-grid.has-expanded .news-box:not(.news-expanded) p {
  margin: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-grid.has-expanded .news-box:not(.news-expanded) .read-more {
  display: none;
}

.news-grid.has-expanded .news-box:not(.news-expanded) .news-expand-content {
  display: none;
}

.sidebar {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  align-self: stretch;
}

.banner-link {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  height: 100%;
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
}

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

.banner-link:hover {
  border-color: var(--clr-primary);
  animation: bannerWobble 1.2s ease-in-out infinite;
}

@keyframes bannerWobble {
  0%   { transform: scale(1.02) rotate(0deg); }
  25%  { transform: scale(1.04) rotate(0.8deg); }
  50%  { transform: scale(1.02) rotate(-0.8deg); }
  75%  { transform: scale(1.04) rotate(0.4deg); }
  100% { transform: scale(1.02) rotate(0deg); }
}

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

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

  .sidebar {
    position: static;
  }

  .banner-link img {
    max-height: 300px;
    object-fit: contain;
  }
}

@media (max-width: 700px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
  .news-featured {
    grid-template-columns: 1fr;
  }
  .news-featured img {
    grid-row: auto;
  }
  .news-featured .news-category-badge,
  .news-featured .news-box-title,
  .news-featured p,
  .news-featured .read-more {
    grid-column: 1;
  }
}

/* --- Hallen-Info --- */
.hallen-info {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 30px,
      rgba(0, 0, 0, 0.06) 30px,
      rgba(0, 0, 0, 0.06) 32px
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 60px,
      rgba(255, 255, 255, 0.04) 60px,
      rgba(255, 255, 255, 0.04) 62px
    ),
    radial-gradient(ellipse at 15% 20%, rgba(255, 220, 150, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(0, 0, 0, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
    linear-gradient(160deg, #e8a14d 0%, #c87828 30%, #a85a18 60%, #8a4510 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 0;
}

/* Aggressive texture overlay */
.hallen-info::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(0, 75, 43, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(0, 75, 43, 0.08) 0%, transparent 35%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30 L30 0 L60 30 L30 60Z' fill='none' stroke='rgba(0,0,0,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.hi-title {
  text-align: center;
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 40px;
  color: var(--clr-white);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 5px;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
}

.hi-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--clr-white), rgba(255,255,255,0.3));
  margin: 12px auto 0;
  border-radius: 2px;
}

.hi-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
  z-index: 1;
}

.hi-card,
.hi-map-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: 16px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  border-left: 4px solid var(--clr-cta);
  border-top: none;
}

.hi-card:hover,
.hi-map-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.hi-card h3 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hi-list {
  margin: 0 0 12px;
}

.hi-list li {
  line-height: 1.4;
}

.hi-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 12px;
}

.hi-chip {
  display: inline-block;
  background: var(--clr-light);
  border-radius: 8px;
  padding: 6px 12px;
  text-decoration: none;
  color: var(--clr-dark);
  font-weight: 800;
  font-size: 14px;
  border: 1px solid var(--clr-border);
  transition: background 0.2s ease, transform 0.2s ease;
}

.hi-chip:hover {
  background: var(--clr-primary-light);
  transform: translateY(-1px);
}

.hi-hints p {
  margin: 6px 0;
  font-size: 14px;
}

.hi-map-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.hi-map {
  width: 100%;
  height: 280px;
  border: 0;
  display: block;
}

.hi-map[src="about:blank"] {
  visibility: hidden;
}

.hi-map[src="about:blank"] + .hi-map-placeholder {
  display: flex;
}

.hi-map:not([src="about:blank"]) + .hi-map-placeholder {
  display: none;
}

.hi-map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--clr-cta);
  color: var(--clr-white);
  text-align: center;
  padding: 16px;
}

.hi-map-placeholder span {
  font-size: 18px;
  font-weight: 700;
}

.hi-map-placeholder small {
  font-size: 13px;
  opacity: 0.7;
}

.hi-map-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.hi-btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--clr-cta);
  border: none;
  text-decoration: none;
  color: var(--clr-white);
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hi-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Adresse unter Spalte 1 */
.hi-address {
  grid-column: 1 / span 1;
}

/* Trainingszeiten unter Spalte 2+3 */
.hi-trainings {
  grid-column: 2 / span 2;
  padding: 18px;
}

.hi-trainings h3 {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hi-train-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.hi-train-item {
  display: grid;
  grid-template-rows: auto 1fr;
  background: rgb(255, 253, 248);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  min-height: 120px;
  border-left: 3px solid var(--clr-primary);
}

.hi-train-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.hi-train-item h4 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}

.hi-train-item h4 .badge {
  font-size: 11px;
  font-weight: 800;
  background: var(--clr-primary-light);
  border: 1px solid var(--clr-border);
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: none;
}

.hi-train-item ul {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
  line-height: 1.5;
  color: var(--clr-dark);
  font-size: 14px;
}

.hi-train-item li::marker {
  color: var(--clr-primary);
}

.hi-train-item--highlight {
  border-left-color: var(--clr-cta);
  background: rgba(0, 75, 43, 0.03);
  box-shadow: 0 6px 18px rgba(0, 75, 43, 0.1);
}

.hi-train-item--highlight .flag {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 900;
  background: var(--clr-cta);
  color: var(--clr-white);
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hi-cta {
  margin-top: 14px;
  display: flex;
  gap: 10px;
}

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

  .hi-address {
    grid-column: 1 / -1;
  }

  .hi-trainings {
    grid-column: 1 / -1;
  }

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

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

  .hi-train-grid {
    grid-template-columns: 1fr;
  }
}