/* Seitenlayout Exquisa Oberbayern — baut auf modernist.css auf. */
:root {
  --blue: #12387f;
  --red: #ec3013;
  --ink: #201e1d;
  --paper: #f3f2f2;
}

body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--red); }

.wrap { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* — Header — */
.site-header { border-bottom: 2px solid var(--ink); background: var(--paper); position: sticky; top: 0; z-index: 10; }
.site-header .wrap {
  padding-top: 14px; padding-bottom: 14px;
  display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: baseline; justify-content: space-between;
}
.brand {
  font-family: var(--font-heading); font-weight: 800; font-size: 19px;
  letter-spacing: -0.02em; color: var(--blue); text-transform: uppercase;
}
.brand span { color: var(--red); }
.main-nav {
  display: flex; flex-wrap: wrap; gap: 4px 22px;
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.main-nav a { color: var(--ink); }
.main-nav a:hover { color: var(--red); }
.main-nav a[aria-current="page"] { color: var(--red); border-bottom: 2px solid var(--red); padding-bottom: 2px; }

/* — Abschnitte — */
.section { padding-top: 44px; }
.section h2 { margin: 0 0 4px; font-size: 32px; text-transform: uppercase; letter-spacing: -0.02em; }
.section-note { font-size: 13px; margin: 0 0 20px; }

.hero { padding-top: 48px; }
.kicker {
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-bottom: 14px;
}
.hero h1 {
  font-size: clamp(40px, 6vw, 74px); line-height: 0.95; letter-spacing: -0.03em;
  margin: 0 0 20px; text-transform: uppercase;
}
.hero .lead { font-size: 18px; max-width: 58ch; margin: 0; text-wrap: pretty; }
.jump-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.hero .hr { margin: 40px 0 0; background: var(--ink); }

/* — Kader — */
.kader { font-size: 15px; }
.kader thead tr {
  border-bottom: 2px solid var(--ink); text-align: left;
  font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.kader th { padding: 10px 8px; color: inherit; font-size: inherit; border-bottom: 0; }
.kader td { padding: 11px 8px; }
.kader td:first-child { font-weight: 600; }
.kader tbody tr:last-child td { border-bottom: 2px solid var(--ink); }

/* — Termine — */
.termine { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.termin {
  display: grid; grid-template-columns: 70px minmax(0, 1fr) 130px 110px; gap: 12px;
  padding: 14px 8px; border-bottom: 1px solid var(--color-divider); align-items: baseline;
}
.termin:last-child { border-bottom: 0; }
.termin-wk { font-family: var(--font-heading); font-weight: 800; }
.termin-status { font-weight: 600; }
.termin.is-final .termin-wk { color: var(--red); }
.termin.is-home .termin-status { color: var(--blue); }
.termin.is-past .termin-status { color: var(--ink); }
.termin.is-pending { opacity: 0.6; }
.termin.is-next { background: var(--blue); color: var(--paper); border-bottom: 2px solid var(--ink); }
.termin.is-next .termin-date,
.termin.is-next .termin-status,
.termin.is-next .termin-wk { color: var(--paper); }

/* — Wettkampfberichte — */
.bericht {
  border-top: 2px solid var(--ink); padding: 24px 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px;
}
.bericht:last-child { border-bottom: 2px solid var(--ink); }
.bericht img { width: 100%; height: 240px; object-fit: contain; background: #fff; border: 1px solid var(--color-divider); }
.bericht-meta { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.bericht h3 { margin: 0 0 10px; font-size: 25px; }
.bericht p { margin: 0; }

/* — Betreuung & Orga — */
.orga {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.orga > div { padding: 22px 20px; border-right: 1px solid var(--color-divider); }
.orga > div:last-child, .orga > div:nth-child(3n) { border-right: 0; }
.orga > div:not(:nth-last-child(-n+3)) { border-bottom: 1px solid var(--color-divider); }
.orga-name { font-weight: 600; margin-bottom: 4px; }
.orga-role { font-size: 14px; }
.orga-hint { font-size: 14px; margin: 16px 0 0; }

/* — Liga-Übersicht und Unterseiten — */
.back-link {
  display: inline-block; margin-bottom: 14px;
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--red);
}
.sub-nav .btn-primary { background: var(--red); color: var(--paper); }
.subpage-body { padding-top: 32px; }

.hub-grid {
  display: grid; margin: 41px 1px 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(230px, 50% - 2px)), 1fr));
}
.hub-card {
  display: flex; flex-direction: column; gap: 10px; min-height: 190px; padding: 26px 22px;
  color: var(--ink); background: var(--paper); box-shadow: 0 0 0 1px var(--ink);
}
.hub-card:hover, .hub-card:focus-visible { background: var(--blue); color: var(--paper); }
.hub-num { font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; color: var(--red); }
.hub-title { font-family: var(--font-heading); font-weight: 800; font-size: 26px; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; }
.hub-text { font-size: 15px; flex: 1; }
.hub-cta { font-family: var(--font-heading); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }

.table-scroll { overflow-x: auto; }
.kader-full { min-width: 560px; border-bottom: 2px solid var(--ink); }
.kader-full td:first-child { font-family: var(--font-heading); font-weight: 800; color: var(--blue); }
.kader-full td:nth-child(2) { font-weight: 600; }
.kader-full td a { color: var(--ink); }
.kader-full td a:hover { color: var(--red); }
.kader-full tbody tr:last-child td { border-bottom: 0; }
.zugang {
  margin-left: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--red);
}

/* — Shop — */
.shop { padding-top: 44px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.products {
  flex: 2 1 480px; min-width: 0; border-top: 2px solid var(--ink);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.product { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-bottom: 2px solid var(--ink); border-right: 1px solid var(--color-divider); }
.product-photo {
  aspect-ratio: 4 / 3; background: #e4e2e2; border: 1px solid var(--color-divider);
  display: flex; align-items: flex-end; padding: 12px; color: #6b6766;
  font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.product .eyebrow { margin: 0; }
.product h2 { margin: 0; font-size: 24px; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05; }
.product-text { margin: 0; font-size: 15px; text-wrap: pretty; flex: 1; }
.product-variants { display: flex; flex-direction: column; gap: 6px; }
.variant-label { font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.variant-list { display: flex; flex-wrap: wrap; gap: 6px; }
.variant {
  font-family: var(--font-heading); font-weight: 600; font-size: 13px; padding: 8px 10px; min-width: 44px; min-height: 36px;
  text-align: left; cursor: pointer; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink);
}
.variant.is-active { background: var(--ink); color: var(--paper); }
.product-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--color-divider); padding-top: 14px; }
.price { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--blue); }
.stepper { display: flex; align-items: center; border: 2px solid var(--ink); }
.stepper button { width: 40px; height: 40px; border: 0; border-radius: 0; font-size: 18px; font-weight: 700; cursor: pointer; }
.step-dec { background: var(--paper); color: var(--ink); }
.step-dec:hover { background: #e4e2e2; }
.step-inc { background: var(--blue); color: var(--paper); }
.step-inc:hover { background: var(--red); }
.step-qty { width: 36px; text-align: center; font-family: var(--font-heading); font-weight: 800; }

.cart {
  flex: 1 1 300px; min-width: 0; position: sticky; top: 80px;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 20px 0;
  display: flex; flex-direction: column; gap: 14px;
}
.cart h2 { margin: 0; font-size: 24px; text-transform: uppercase; letter-spacing: -0.02em; }
.cart-empty { margin: 0; font-size: 15px; }
.cart-items { display: flex; flex-direction: column; gap: 14px; }
.cart-items:empty { display: none; }
.cart-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px;
  border-bottom: 1px solid var(--color-divider); padding-bottom: 10px; font-size: 15px;
}
.cart-name { font-weight: 600; }
.cart-variant { font-size: 13px; }
.cart-total {
  display: flex; justify-content: space-between; border-top: 2px solid var(--ink); padding-top: 12px;
  font-family: var(--font-heading); font-weight: 800; font-size: 20px;
}
.order-btn {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
  background: var(--red); color: var(--paper);
  font-family: var(--font-heading); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
}
.order-btn:hover { background: var(--ink); color: var(--paper); }
.order-btn.is-disabled { background: #bab6b6; pointer-events: none; }
.cart-hint { margin: 0; font-size: 13px; }

/* — Gemeinsame Bausteine der übrigen Seiten — */
.section-head {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: baseline; justify-content: space-between; margin-bottom: 20px;
}
.section-head h2 { margin: 0; }
.more-link {
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--red);
}
.section h2.spaced { margin-bottom: 20px; }

/* Raster aus Zellen mit Trennlinien; Mindestbreite über --min */
.cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--min, 220px), 1fr)); border-bottom: 2px solid var(--ink); }
.cells > * { border-top: 2px solid var(--ink); border-right: 1px solid var(--color-divider); padding: 22px 20px; }
.cells > :last-child { border-right: 0; }
.cells > .is-blue { background: var(--blue); color: var(--paper); }

.stat-num { font-family: var(--font-heading); font-weight: 800; font-size: 44px; letter-spacing: -0.03em; color: var(--blue); line-height: 1.2; }
.stat-num.is-red { color: var(--red); }
.is-blue .stat-num { color: var(--paper); }
.stat-label { font-size: 14px; }

.eyebrow {
  font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-bottom: 10px;
}
.meta { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }

/* Farbbänder */
.band { background: var(--blue); color: var(--paper); }
.band-red { background: var(--red); color: #fff; }
.band .wrap, .band-red .wrap { display: grid; gap: 32px; }
.band p { color: #e8eaf1; }
.band a.btn { background: var(--paper); color: var(--blue); }
.band-red a.btn { background: #fff; color: var(--red); }
.band a.btn:hover, .band-red a.btn:hover { background: var(--ink); color: #fff; }
.band-title { margin: 0 0 12px; line-height: 1; text-transform: uppercase; letter-spacing: -0.03em; font-size: clamp(32px, 4.4vw, 56px); }
.band-label { font-family: var(--font-heading); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }

/* Startseite */
.hero-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; align-items: end; }
.hero-split h1 { font-size: clamp(44px, 7vw, 86px); }
.hero-split h1 span { color: var(--blue); }
.hero-split .lead { max-width: 46ch; margin-bottom: 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-blue { background: var(--blue); color: var(--paper); }
.btn-blue:hover { background: var(--ink); color: var(--paper); }

.naechster .wrap { padding-top: 36px; padding-bottom: 36px; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px 40px; align-items: start; }
.naechster .band-label { font-size: 13px; letter-spacing: 0.14em; color: #fff; }
.naechster h2 { font-size: clamp(28px, 3.4vw, 44px); margin: 0 0 10px; text-transform: uppercase; letter-spacing: -0.02em; }
.naechster h2 .sep { color: #ff9783; }
.naechster-facts {
  display: flex; flex-wrap: wrap; gap: 8px 32px; margin-bottom: 14px;
  font-family: var(--font-heading); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase;
}
.naechster p { margin: 0; max-width: 58ch; }
.naechster-link { display: block; color: inherit; }
.naechster-link:hover, .naechster-link:focus-visible { color: inherit; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.naechster-link:focus-visible { outline: 3px solid var(--paper); outline-offset: -6px; }
.naechster-cta {
  display: inline-block; margin-top: 18px; padding-bottom: 2px; border-bottom: 2px solid currentColor;
  font-family: var(--font-heading); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
}
.naechster-link:hover .naechster-cta { color: #ff9783; }

.score { font-family: var(--font-heading); font-weight: 800; font-size: 34px; letter-spacing: -0.02em; color: var(--blue); }
.score.is-loss { color: var(--red); }
.opponent { font-weight: 600; margin: 4px 0 8px; }
.card-text { margin: 0; font-size: 14px; }

.staffel { border-bottom: 2px solid var(--ink); padding: 20px 0 22px; }
.staffel .eyebrow { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.staffel-teams { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.staffel-teams .tag { font-size: 14px; }
.staffel-teams .tag-accent { font-weight: 600; }

.news h3 { margin: 0 0 8px; font-size: 22px; }
.news p { margin: 0; font-size: 15px; }

.logos { align-items: center; --min: 160px; }
.logos > a { display: block; padding: 26px 20px; }
.logos img { height: 46px; width: auto; object-fit: contain; }

.pitch .wrap { padding-top: 56px; padding-bottom: 56px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: end; }
.pitch p { margin: 0; max-width: 44ch; font-size: 17px; }

/* Historie */
.timeline { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 32px; border-top: 2px solid var(--ink); }
.timeline > * { padding: 22px 0; border-bottom: 1px solid var(--color-divider); }
.timeline .year { font-family: var(--font-heading); font-weight: 800; font-size: 28px; color: var(--blue); }
.timeline .year.is-red { color: var(--red); }
.timeline p { margin: 0; max-width: 72ch; }
.timeline > :nth-last-child(-n+2) { border-bottom: 2px solid var(--ink); }
.wide-photo img { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; }
.quote-band { margin-top: 48px; }
.quote-band .wrap { padding-top: 48px; padding-bottom: 48px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.quote-band h2 { margin: 0 0 12px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.02; text-transform: uppercase; letter-spacing: -0.02em; }
.quote-band .quote { display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; }
.quote-band .quote p { margin: 0; }

/* Sponsoren */
.hauptsponsor {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 40px;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 32px 0;
}
.hauptsponsor .eyebrow { margin-bottom: 16px; }
.hauptsponsor img { width: 240px; max-width: 100%; }
.hauptsponsor h2 { margin: 0 0 12px; }
.partner > div { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 28px 20px; }
.partner img { height: 52px; width: auto; }
.pakete > div { padding: 26px 22px; }
.pakete .eyebrow { margin-bottom: 12px; }
.pakete .is-blue .eyebrow { color: #fff; }
.pakete h3 { margin: 0 0 14px; font-size: 25px; }
.pakete ul { margin: 0; padding-left: 18px; font-size: 15px; display: grid; gap: 6px; }
.kontakt-band { margin-top: 48px; }
.kontakt-band .wrap {
  padding-top: 56px; padding-bottom: 56px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px 48px; align-items: start;
}
.kontakt-intro p { margin: 0; max-width: 40ch; font-size: 17px; }
.kontakt-intro .band-label { margin-bottom: 10px; }
.kontakt-band .kontakt-form { border-color: #fff; max-width: none; }
.kontakt-band .field > label { color: #fff; }
.kontakt-band .input { background: #fff; border-color: #fff; color: var(--ink); }
.kontakt-band .input:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; }
.kontakt-band button.btn { background: #fff; color: var(--red); }
.kontakt-band button.btn:hover { background: var(--ink); color: #fff; }
.kontakt-band .kontakt-status, .kontakt-band .kontakt-hint { color: #fff; }
.kontakt-band .kontakt-status.is-error { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Kontaktformular (Sponsoren) */
.kontakt-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px 24px;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 24px 0; max-width: 820px;
}
.kontakt-form .field-wide { grid-column: 1 / -1; }
.kontakt-form .input { font-size: 15px; min-height: 42px; }
.kontakt-form select.input { appearance: auto; }
.kontakt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.kontakt-actions .btn { padding: 12px 20px; }
.kontakt-status { margin: 0; font-size: 14px; }
.kontakt-status.is-error { color: var(--red); font-weight: 600; }
.kontakt-hint { margin: 0; font-size: 13px; }

/* Rechtstexte (Datenschutz, Impressum) */
.legal > * { max-width: 78ch; }
.legal h2 { font-size: 22px; margin: 32px 0 8px; }
.legal p { margin: 0 0 12px; }
.legal-address { font-weight: 600; }
.legal-missing { border-left: 4px solid var(--red); padding: 10px 14px; background: var(--color-accent-100); }

/* Links */
.link-grid { --min: 280px; }
.link-grid > div { padding: 20px; }
.link-grid a, .link-grid .name { font-weight: 600; }
.link-grid .text-muted { font-size: 14px; }
.disclaimer { font-size: 13px; margin: 16px 0 0; max-width: 90ch; }

/* — Footer — */
.site-footer { background: var(--ink); color: var(--paper); margin-top: 56px; }
.site-footer.flush { margin-top: 0; }
.site-footer .wrap {
  padding-top: 40px; padding-bottom: 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px;
}
.site-footer a { color: var(--paper); }
.site-footer a:hover { color: var(--red); }
.footer-brand { font-family: var(--font-heading); font-weight: 800; font-size: 17px; text-transform: uppercase; margin-bottom: 8px; }
.footer-sub, .footer-col { font-size: 14px; color: #bab6b6; }
.footer-col { display: flex; flex-direction: column; gap: 6px; }

/* — Mobil — */
@media (max-width: 720px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .section h2 { font-size: 26px; overflow-wrap: anywhere; }
  .hero h1 { font-size: clamp(32px, 9vw, 40px); hyphens: auto; overflow-wrap: anywhere; }
  .termin { grid-template-columns: 64px minmax(0, 1fr); row-gap: 2px; }
  .termin-date, .termin-status { grid-column: 2; }
  .bericht { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .kader { font-size: 14px; }
  .kader th, .kader td { padding-left: 4px; padding-right: 4px; }
  .orga > div { border-right: 0; border-bottom: 1px solid var(--color-divider); }
  .orga > div:last-child { border-bottom: 0; }
  .hero-split, .hauptsponsor, .naechster .wrap, .kontakt-band .wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .timeline { grid-template-columns: 84px minmax(0, 1fr); gap: 0 16px; }
  .timeline .year { font-size: 22px; }
  .cells > * { border-right: 0; }
  .cart { position: static; }
}