/* ============================================================
   Seite: verein.html
   Nur das Hero-Foto; der Rest der Seite arbeitet (noch) mit
   Inline-Stilen. Eigene Datei, weil die Bildposition je nach
   Breite eine Media Query braucht — im style-Attribut nicht moeglich.
   ============================================================ */

/* Hero-Foto: Fanblock mit Konfetti und Trommeln beim Aufschlag (Heimspiel 25/26).
   Links liegt der Fanblock unter dem Text-Verlauf, rechts der Aufschläger frei. */
.verein-hero-foto {
  position: absolute; inset: 0;
  background: url('../../assets/fans-fanblock-konfetti.jpg') no-repeat;
  background-size: cover;
  background-position: center 40%;
}
@media (max-width: 1100px) {
  .verein-hero-foto { background-position: 70% 40%; }
}

/* === Geschichte: Platzierungs-Timeline (seit 16/17) === */
.season-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: -6px 0 18px; }
.season-legend .k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--body); font-size: 13px; font-weight: 600; color: rgba(11,46,63,0.78); }
.season-legend .k::before { content: ""; width: 22px; height: 6px; display: inline-block; }
.season-legend .k-3l::before { background: #C9BDA9; }
.season-legend .k-2l::before { background: var(--sea, #0B2E3F); }
.season-legend .k-1l::before { background: var(--red); }
.season-track { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 8px; align-items: end; }
.season { background: white; border: 1px solid rgba(11,46,63,0.10); padding: 14px 12px 16px; position: relative; display: flex; flex-direction: column; gap: 4px; }
.season::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 6px; }
.season.s-3l::before { background: #C9BDA9; }
.season.s-2l::before { background: var(--sea, #0B2E3F); }
.season.s-1l::before { background: var(--red); }
/* Treppe: je höher die Liga, desto höher die Karte */
.season.s-3l { min-height: 150px; }
.season.s-2l { min-height: 180px; }
.season.s-1l { min-height: 215px; }
.season .yr { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: rgba(11,46,63,0.55); margin-top: 6px; }
.season .pl { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 34px; line-height: 0.95; color: var(--sea, #0B2E3F); text-transform: uppercase; }
.season .lg { font-family: var(--body); font-size: 11px; font-weight: 600; line-height: 1.3; color: rgba(11,46,63,0.62); }
.season .nt { font-family: var(--body); font-size: 11px; line-height: 1.35; color: rgba(11,46,63,0.78); margin-top: auto; padding-top: 6px; }
.season.up { background: var(--red); border-color: var(--red); }
.season.up .yr, .season.up .lg, .season.up .nt { color: rgba(255,255,255,0.88); }
.season.up .pl { color: white; font-size: 26px; }
.season.up::before { background: var(--sea, #0B2E3F); }
.season.now { border-style: dashed; }
.season.now .pl { font-size: 26px; color: var(--red); }
.season-note { margin-top: 16px; font-size: 13px; line-height: 1.6; color: rgba(11,46,63,0.55); max-width: 900px; }
@media (max-width: 1100px) {
  .season-track { grid-template-columns: repeat(11, 132px); overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
  .season { scroll-snap-align: start; }
}

/* ---------- ausgelagert aus style="…" (verein.html) ---------- */
.web .verein-u1 {
  position: relative;
  height: 660px;
  background: var(--ink);
  color: white;
  overflow: hidden;
}
.web .verein-u2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(11,46,63,0.94) 0%,rgba(11,46,63,0.74) 38%,rgba(11,46,63,0.28) 70%,rgba(11,46,63,0.12) 100%),linear-gradient(0deg,rgba(11,46,63,0.55) 0%,transparent 45%);
}
.web .verein-u3 {
  position: absolute;
  right: -60px;
  top: -90px;
  font-size: 420px;
  opacity: 0.92;
}
.web .verein-u4 {
  position: absolute;
  left: 56px;
  top: 88px;
  max-width: 720px;
  z-index: 2;
}
.web .verein-u5 {
  font-size: 128px;
  margin: 18px 0 0;
  color: white;
}
.web .verein-u6 {
  color: var(--red);
}
.web .verein-u7 {
  font-size: 17px;
  line-height: 1.55;
  max-width: 560px;
  margin: 26px 0 0;
  color: rgba(255,255,255,0.85);
}
.web .verein-u8 {
  background: var(--red);
  color: white;
  padding: 32px 56px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.web .verein-u9 {
  padding-right: 22px;
  border-right: 1px solid rgba(255,255,255,0.25);
}
.web .verein-u10 {
  font-size: 64px;
  color: white;
}
.web .verein-u11 {
  margin-top: 8px;
  color: rgba(255,255,255,0.85);
}
.web .verein-u12 {
  padding: 0 22px;
  border-right: 1px solid rgba(255,255,255,0.25);
}
.web .verein-u13 {
  padding-left: 22px;
}
.web .verein-u14 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
}
.web .verein-u15 {
  background: var(--red);
  color: white;
  border-top-color: var(--ink);
}
.web .verein-u16 {
  color: white;
}
.web .verein-u17 {
  color: rgba(255,255,255,0.92);
}
.web .verein-u18 {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(11,46,63,0.55);
}
.web .verein-u19 {
  background: var(--paper);
}
.web .verein-u20 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}
.web .verein-u21 {
  background: var(--sand);
  color: var(--ink);
  border: 1px solid rgba(11,46,63,0.08);
}
.web .verein-u22 {
  color: #2A2A33;
}
.web .verein-u23 {
  background: var(--red);
  color: white;
}
.web .verein-u24 {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.18) 1.2px,transparent 1.6px);
  background-size: 16px 16px;
  opacity: 0.4;
}
.web .verein-u25 {
  position: relative;
}
.web .verein-u26 {
  background: white;
  color: var(--ink);
  border: 1px solid rgba(11,46,63,0.08);
}
.web .verein-u27 {
  color: #5b5853;
}
.web .verein-u28 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
}
.web .verein-u29 {
  background: var(--sand);
  color: var(--ink);
  padding: 36px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(11,46,63,0.08);
}
.web .verein-u30 {
  position: absolute;
  right: -60px;
  bottom: -60px;
  font-family: var(--display);
  font-weight: 900;
  font-style: normal;
  font-size: 300px;
  color: var(--red);
  line-height: 0.78;
  opacity: 0.10;
}
.web .verein-u31 {
  font-size: 44px;
  color: var(--ink);
  line-height: 0.95;
}
.web .verein-u32 {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  margin-top: 18px;
  color: rgba(11,46,63,0.75);
}
.web .verein-u33 {
  background: var(--paper);
  padding: 36px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(11,46,63,0.08);
}
.web .verein-u34 {
  font-size: 40px;
  color: var(--ink);
  line-height: 0.95;
}
.web .verein-u35 {
  font-size: 14px;
  line-height: 1.55;
  margin-top: 14px;
  color: #5b5853;
}
.web .verein-u36 {
  background: var(--red);
  color: white;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 900;
  font-style: normal;
  font-size: 18px;
  padding: 14px 24px;
  text-transform: uppercase;
  align-self: flex-start;
}

/* — Mannschaften — Verlinkung auf die einzelnen Team-Seiten (aktuell nur
   1. Herren + 1. Damen; weitere Mannschaften kommen als weitere Karten dazu,
   sobald es fuer sie eine Seite gibt). — */
.team-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.team-card {
  display: block; text-decoration: none; background: white;
  border: 1px solid rgba(11,46,63,0.10); border-top: 5px solid var(--red);
  padding: 28px 30px; transition: transform .18s;
}
.team-card:hover { transform: translateY(-2px); }
.team-card .liga {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red); font-weight: 700;
}
.team-card .name {
  font-family: var(--display); font-weight: 900; font-style: normal;
  font-size: 32px; text-transform: uppercase; line-height: 1; color: var(--ink); margin: 10px 0 18px;
}
.team-card .go { font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--sea); }
@media (max-width: 1024px) { .team-links { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .team-links { grid-template-columns: 1fr; } }