/* Fankalender viktoria1904 - dunkler Vereinslook, Archivo lokal gehostet. */
:root {
  --v-bg: #000000;
  --v-flaeche: #0E0E10;
  --v-fg: #FFFFFF;
  --v-muted: rgba(255, 255, 255, .62);
  --v-line: rgba(255, 255, 255, .14);
  --v-rot: #ED1C24;
  --v-rot-dunkel: #C1141B;
}

body.viktoria-fans {
  margin: 0;
  background: var(--v-bg);
  color: var(--v-fg);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.viktoria-fans :where(h1, h2, h3, p, ul, li, figure) { margin: 0; padding: 0; border: 0; }
body.viktoria-fans ul { list-style: none; }
body.viktoria-fans a { color: inherit; }

.vf-wrap { max-width: 940px; margin: 0 auto; padding: 0 24px; }

/* Kopf */
.vf-kopf { border-bottom: 1px solid var(--v-line); }

.vf-kopf .vf-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
}

.vf-marke { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.vf-marke img { height: 40px; width: auto; display: block; }

.vf-marke span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.vf-praesentiert {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v-muted);
  text-decoration: none;
}

.vf-praesentiert:hover { color: var(--v-fg); }

/* Einstieg */
.vf-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 8vw, 96px) 0 clamp(32px, 5vw, 56px);
}

/* Grosses Wappen als Hintergrundmotiv, rechts angeschnitten. */
.vf-hero::after {
  content: "";
  position: absolute;
  right: clamp(-260px, -14vw, -110px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(396px, 59vw, 774px);
  aspect-ratio: 1;
  background: url("img/viktoria-wappen.png") no-repeat center / contain;
  opacity: .26;
  pointer-events: none;
  z-index: 0;
}

.vf-hero .vf-wrap { position: relative; z-index: 1; }

.vf-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--v-rot);
}

.vf-hero h1 {
  font-size: clamp(38px, 7.5vw, 76px);
  line-height: .96;
  letter-spacing: -.02em;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  margin: 16px 0 0;
  max-width: 15ch;
  text-wrap: balance;
}

.vf-hero p {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--v-muted);
  max-width: 56ch;
  margin: 20px 0 0;
  text-wrap: pretty;
}

.vf-knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--v-rot);
  border: 0;
  border-radius: 2px;
  padding: 15px 30px;
  transition: background .2s ease, transform .15s ease;
}

.vf-knopf:hover, .vf-knopf:focus-visible { background: var(--v-rot-dunkel); }
.vf-knopf:active { transform: translateY(1px); }

/* Abschnitte */
.vf-block { padding: clamp(36px, 5vw, 64px) 0; border-top: 1px solid var(--v-line); }

.vf-block h2 {
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.05;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0 0 8px;
}

.vf-block > .vf-wrap > p.vf-intro { color: var(--v-muted); max-width: 60ch; margin: 0 0 28px; }

/* Spielliste */
.vf-spiel {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 20px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--v-line);
}

.vf-spiel:first-of-type { border-top: 0; }

.vf-datum {
  font-size: 34px;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  letter-spacing: -.03em;
}

.vf-datum small {
  display: block;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v-muted);
  margin-top: 6px;
}

.vf-paarung { font-size: 19px; font-weight: 700; line-height: 1.25; text-wrap: pretty; }
.vf-meta { font-size: 14px; color: var(--v-muted); margin-top: 4px; }

.vf-ticket {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--v-rot);
  text-decoration: none;
  border-bottom: 2px solid var(--v-rot);
  padding-bottom: 2px;
}

.vf-ticket:hover, .vf-ticket:focus-visible { color: #fff; border-color: #fff; }

.vf-anstoss { font-size: 15px; font-weight: 700; color: var(--v-muted); white-space: nowrap; }

.vf-fussnote { margin-top: 22px; font-size: 14px; color: var(--v-muted); max-width: 60ch; }

/* Abo-Optionen */
#abonnieren { position: relative; overflow: hidden; }

/* Wappen als Hintergrundmotiv, unten rechts in die Ecke laufend. */
#abonnieren::after {
  content: "";
  position: absolute;
  right: clamp(-260px, -14vw, -110px);
  bottom: clamp(-230px, -13vw, -100px);
  width: clamp(396px, 59vw, 774px);
  aspect-ratio: 1;
  background: url("img/viktoria-wappen.png") no-repeat center / contain;
  opacity: .26;
  pointer-events: none;
  z-index: 0;
}

#abonnieren .vf-wrap { position: relative; z-index: 1; }

.vf-feed { border-top: 1px solid var(--v-line); padding: 22px 0; }
.vf-feed:first-of-type { border-top: 0; }
.vf-feed h3 { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.vf-feed p { font-size: 15px; color: var(--v-muted); margin: 4px 0 0; }

.vf-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.vf-links a, .vf-links button {
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  background: var(--v-rot);
  border: 0;
  border-radius: 2px;
  padding: 10px 17px;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}

.vf-links a:hover, .vf-links a:focus-visible,
.vf-links button:hover, .vf-links button:focus-visible {
  background: var(--v-rot-dunkel);
  color: #fff;
}

.vf-links a:active, .vf-links button:active { transform: translateY(1px); }

.vf-url { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .78); overflow-wrap: anywhere; }

/* Hinweise */
.vf-hinweise { display: grid; gap: 16px; max-width: 64ch; }
.vf-hinweise p { margin: 0; color: var(--v-muted); }
.vf-hinweise strong { color: var(--v-fg); font-weight: 700; }
.vf-hinweise a { color: var(--v-rot); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--v-rot); }
.vf-hinweise a:hover, .vf-hinweise a:focus-visible { color: #fff; border-color: #fff; }

/* Partnerband */
.vf-partner { background: #fff; color: #101114; }

.vf-partner .vf-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  padding-top: 36px;
  padding-bottom: 36px;
}

.vf-partner img { width: 260px; max-width: 60vw; height: auto; display: block; }
.vf-partner-text { flex: 1 1 320px; }
.vf-partner-text p { margin: 0; font-size: 15px; line-height: 1.55; }
.vf-partner-text strong { font-weight: 800; }
.vf-partner-text a { color: #101114; }

.vf-vorspann { color: rgba(16, 17, 20, .66); }

.vf-zeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.vf-navigro { display: inline-flex; align-items: center; }
.vf-navigro img { width: 132px; max-width: 45vw; height: auto; display: block; }

.vf-claim {
  display: block;
  margin-top: 6px;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 14px;
}

/* Fuss */
.vf-fuss { border-top: 1px solid var(--v-line); font-size: 14px; color: var(--v-muted); }

.vf-fuss .vf-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 24px;
  padding-bottom: 40px;
}

.vf-fuss nav { display: flex; flex-wrap: wrap; gap: 20px; }
.vf-fuss a { text-decoration: none; }
.vf-fuss a:hover, .vf-fuss a:focus-visible { color: var(--v-fg); text-decoration: underline; }

@media (max-width: 680px) {
  body.viktoria-fans { font-size: 16px; }
  .vf-hero::after { right: -150px; width: 378px; opacity: .16; top: auto; bottom: -70px; transform: none; }
  #abonnieren::after { right: -140px; bottom: -130px; width: 378px; opacity: .16; }
  .vf-wrap { padding: 0 20px; }
  .vf-kopf .vf-wrap { padding: 14px 20px; }
  .vf-spiel { grid-template-columns: 64px 1fr; }
  .vf-datum { font-size: 27px; }
  .vf-anstoss { grid-column: 2; margin-top: 2px; }
  .vf-paarung { font-size: 17px; }
}