/* SV Preußen 07 Kegeln e.V. Lünen — Grundgestaltung
   Vereinsfarben: Schwarz/Weiß (Preußenadler), Blau als Akzent. Mobil zuerst. */

:root {
  --tinte: #16181d;
  --grau: #5a6070;
  --linie: #dcdfe6;
  --grund: #ffffff;
  --sanft: #f4f6f9;
  --blau: #1a3d7c;
  --blau-hell: #2f5fa8;
  --signal: #b3261e;
  --breite: 46rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font: 1.0625rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 1.25rem; }

/* Kopf */
.kopf { border-bottom: 3px solid var(--tinte); background: var(--grund); }
.kopf-innen {
  max-width: var(--breite); margin: 0 auto; padding: 1rem 1.25rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center;
  justify-content: space-between;
}
.marke { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; }
.marke-text { display: flex; flex-direction: column; line-height: 1.2; }
.marke-name { font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; }
.marke-zusatz { font-size: .8125rem; color: var(--grau); }

nav { margin-left: 0; }
nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0; }
nav a { color: var(--tinte); text-decoration: none; font-weight: 500; font-size: .9375rem; padding: .25rem 0; border-bottom: 2px solid transparent; }
nav a:hover, nav a:focus-visible { border-bottom-color: var(--blau); }
nav a[aria-current="page"] { border-bottom-color: var(--tinte); }

/* Hinweisbalken */
.balken {
  background: var(--blau); color: #fff; text-align: center;
  padding: .625rem 1.25rem; font-size: .9375rem;
}
.balken a { color: #fff; font-weight: 600; }

/* Inhalt */
main { padding: 2rem 0 3rem; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .75rem; }
h2 { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.5rem); line-height: 1.25; margin: 2.25rem 0 .75rem; letter-spacing: -.01em; }
h3 { font-size: 1.0625rem; margin: 1.5rem 0 .5rem; }
p { margin: 0 0 1rem; }
.vorspann { font-size: 1.1875rem; color: var(--grau); margin-bottom: 1.5rem; }
a { color: var(--blau); }
a:hover { color: var(--blau-hell); }

/* Aktionskasten */
.aktion {
  border: 2px solid var(--tinte); border-radius: .5rem;
  margin: 1.5rem 0 2rem; background: var(--sanft); overflow: hidden;
}
.aktion-bild {
  display: block; width: 100%; height: auto;
  border-bottom: 2px solid var(--tinte);
}
.aktion-inhalt { padding: 1.25rem; }
.aktion h2 { margin-top: 0; }
.aktion .bildnachweis { margin-top: 1rem; }
.datum { display: inline-block; background: var(--signal); color: #fff; font-weight: 700;
  padding: .1875rem .625rem; border-radius: .25rem; font-size: .875rem; margin-bottom: .5rem; }

/* Knopf */
.knopf {
  display: inline-block; background: var(--blau); color: #fff; text-decoration: none;
  padding: .75rem 1.375rem; border-radius: .375rem; font-weight: 600; border: 2px solid var(--blau);
}
.knopf:hover, .knopf:focus-visible { background: var(--blau-hell); border-color: var(--blau-hell); color: #fff; }
.knopf.zweit { background: transparent; color: var(--blau); }
.knopf.zweit:hover { background: var(--sanft); color: var(--blau); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0; }

/* Karten */
.karten { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.5rem 0; }
@media (min-width: 40rem) { .karten { grid-template-columns: repeat(3, 1fr); } }
.karte { border: 1px solid var(--linie); border-radius: .5rem; padding: 1.125rem; }
.karte h3 { margin-top: 0; }
.karte p:last-child { margin-bottom: 0; }

/* Datenliste */
.daten { margin: 1.25rem 0; border-top: 1px solid var(--linie); }
.daten > div { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding: .75rem 0; border-bottom: 1px solid var(--linie); }
.daten dt { font-weight: 600; flex: 0 0 11rem; margin: 0; }
.daten dd { margin: 0; flex: 1 1 14rem; }

/* Zeitfenster */
.fenster { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .625rem; }
@media (min-width: 34rem) { .fenster { grid-template-columns: repeat(3, 1fr); } }
.fenster li {
  border: 2px solid var(--blau); border-radius: .5rem; padding: .875rem;
  text-align: center; font-weight: 700; font-size: 1.125rem; color: var(--blau);
}

/* Platzhalter — muss auffallen, damit nichts Falsches online geht */
.pruefen {
  background: #fff6d6; border-left: 4px solid #c9900a; padding: .75rem 1rem;
  margin: 1rem 0; font-size: .9375rem;
}
.pruefen strong { color: #8a6200; }

/* Fuß */
.fuss { border-top: 1px solid var(--linie); background: var(--sanft); padding: 2rem 0; font-size: .9375rem; color: var(--grau); }
.fuss-raster { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .fuss-raster { grid-template-columns: repeat(3, 1fr); } }
.fuss h2 { font-size: .9375rem; margin: 0 0 .5rem; color: var(--tinte); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .25rem; }
.fuss a { color: var(--grau); }
.fuss a:hover { color: var(--blau); }

address { font-style: normal; }

/* Sprungmarke */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: #fff; padding: .5rem 1rem; border: 2px solid var(--blau); }

.marke-logo { display:block; width:46px; height:46px; flex:0 0 auto; }

/* Aktionsbanner (Werbematerial WDR — unveraendert, nur skaliert) */
.banner { margin: 0 0 1.75rem; }
.banner img {
  display: block; width: 100%; height: auto; border-radius: .5rem;
}
.banner figcaption,
.bildnachweis { font-size: .75rem; color: var(--grau); margin: .5rem 0 0; }

/* Inhaltsbilder */
.bild { margin: 1.25rem 0 1.75rem; }
.bild img { display: block; width: 100%; height: auto; border-radius: .5rem; }
.bild figcaption { font-size: .8125rem; color: var(--grau); margin-top: .5rem; }
.bild .hinweis { color: var(--grau); }

/* Eigene Mannschaften: der Name wird in Teamfarbe unterstrichen,
   der Farbpunkt steht als eigene Spalte neben dem Datum. */
.wir, .wir-1, .wir-2, .wir-3, .wir-d, .wir-j {
  font-weight: 700; color: var(--tinte); white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
.wir-1 { text-decoration-color: #1a56c4; }  /* Lünen 1 — Blau */
.wir-2 { text-decoration-color: #148f47; }  /* Lünen 2 — Grün */
.wir-3 { text-decoration-color: #e07b00; }  /* Lünen 3 — Orange */
.wir-d { text-decoration-color: #c2185b; }  /* Damen   — Magenta */
.wir-j { text-decoration-color: #0d9aa8; }  /* Jugend  — Türkis, wie die Trikots */
.wir   { text-decoration-color: var(--grau); }

/* Farbpunkt in der eigenen Spalte */
.punkt { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; }
.punkt.wir-1 { background: #1a56c4; }
.punkt.wir-2 { background: #148f47; }
.punkt.wir-3 { background: #e07b00; }
.punkt.wir-d { background: #c2185b; }
.punkt.wir-j { background: #0d9aa8; }

.legende {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.25rem 0 0;
  padding: 0; list-style: none; font-size: .875rem; color: var(--grau);
}
.legende li { display: flex; align-items: center; gap: .4rem; }
.legende li::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%; display: inline-block;
}
.legende .l1::before { background: #1a56c4; }
.legende .l2::before { background: #148f47; }
.legende .l3::before { background: #e07b00; }
.legende .ld::before { background: #c2185b; }
.legende .lj::before { background: #0d9aa8; }