/* SV Bönebüttel-Husberg e.V. — zentrale Design-Tokens und Komponenten */

:root {
  --farbe-primaer: #1e4ba6;
  --farbe-primaer-dunkel: #16387c;
  --farbe-primaer-hell: #e8eefa;
  --farbe-text: #1f2430;
  --farbe-text-leise: #5a6272;
  --farbe-flaeche: #ffffff;
  --farbe-flaeche-leise: #f4f6fa;
  --farbe-linie: #dde3ed;
  --farbe-fokus: #ff6900;

  --breite-inhalt: 68rem;
  --radius: 0.75rem;
  --schatten: 0 1px 2px rgba(31, 36, 48, .06), 0 8px 24px rgba(31, 36, 48, .07);
  --abstand: clamp(1rem, 3vw, 2rem);

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.65;
  color: var(--farbe-text);
  background: var(--farbe-flaeche);
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(1.85rem, 1.4rem + 2.1vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); }
p { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--farbe-primaer); text-decoration-thickness: .08em; text-underline-offset: .15em; }
a:hover { color: var(--farbe-primaer-dunkel); }
a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Layout ---------- */

.inhalt { width: min(100% - 2 * var(--abstand), var(--breite-inhalt)); margin-inline: auto; }

.sprungmarke {
  position: absolute; left: -9999px;
  background: var(--farbe-primaer); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0; z-index: 100;
}
.sprungmarke:focus { left: 0; top: 0; }

/* ---------- Kopfbereich ---------- */

.kopf { background: var(--farbe-flaeche); border-bottom: 1px solid var(--farbe-linie); }
.kopf__leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
  padding-block: .85rem;
  position: relative;   /* Bezugspunkt für das eingeblendete Klappmenü */
}
.kopf__marke { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; }
.kopf__marke img { width: 52px; height: auto; }
.kopf__name { font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: var(--farbe-primaer); }
.kopf__zusatz { display: block; font-weight: 400; font-size: .8rem; color: var(--farbe-text-leise); }

.navigation { margin-left: auto; }
.navigation ul { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; margin: 0; padding: 0; }
.navigation a {
  display: block; padding: .5rem .8rem; border-radius: var(--radius);
  text-decoration: none; font-weight: 600; color: var(--farbe-text);
}
.navigation a:hover { background: var(--farbe-primaer-hell); color: var(--farbe-primaer-dunkel); }
.navigation a[aria-current="page"] { background: var(--farbe-primaer); color: #fff; }

/* Klappmenü ohne JavaScript: <details>/<summary> ist ein natives Bedienelement,
   das mit Enter und Leertaste funktioniert. Auf Handy und Tablet erscheint der
   Schalter mit den drei Strichen, ab 64rem steht das Menü wieder offen in einer Zeile. */
.navigation__schalter {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .9rem; border-radius: var(--radius);
  font-weight: 600; color: var(--farbe-text); cursor: pointer;
  list-style: none; user-select: none;
}
.navigation__schalter::-webkit-details-marker { display: none; }
.navigation__schalter::marker { content: ""; }
.navigation__schalter:hover { background: var(--farbe-primaer-hell); color: var(--farbe-primaer-dunkel); }
.navigation__klapp[open] > .navigation__schalter { background: var(--farbe-primaer); color: #fff; }

/* Die drei Striche: mittlerer Balken plus zwei über ::before und ::after. */
.navigation__striche { position: relative; display: block; width: 1.35rem; height: 2px; background: currentColor; border-radius: 2px; }
.navigation__striche::before,
.navigation__striche::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
}
.navigation__striche::before { top: -.45rem; }
.navigation__striche::after { top: .45rem; }

/* Handy und Tablet: aufgeklappt wird das Menü über dem Inhalt eingeblendet,
   direkt unter der Kopfleiste. Die Seite springt dadurch beim Öffnen nicht.
   Der Schalter bleibt über dem Menü sichtbar, sodass es immer schließbar ist;
   die Höhe ist begrenzt und scrollt bei Bedarf, damit kein Eintrag unerreichbar wird. */
@media (max-width: 63.999rem) {
  .navigation__klapp > ul {
    position: absolute; top: 100%; right: 0; z-index: 50;
    flex-direction: column; flex-wrap: nowrap; gap: .15rem;
    min-width: 14rem; max-width: calc(100vw - 2 * var(--abstand));
    max-height: calc(100dvh - 100%); overflow-y: auto;
    margin-top: .5rem; padding: .35rem;
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie);
    border-radius: var(--radius); box-shadow: var(--schatten);
  }
  .navigation__klapp > ul a { padding: .7rem .9rem; }
}

/* Ab Tabletbreite aufwärts kein Schalter: das Menü steht dauerhaft offen.
   Ohne Unterstützung für ::details-content bleibt der Schalter sichtbar —
   das Menü ist dann auch am großen Bildschirm über die drei Striche erreichbar. */
@supports selector(::details-content) {
  @media (min-width: 64rem) {
    .navigation__schalter { display: none; }
    .navigation__klapp::details-content { content-visibility: visible; }
  }
}

/* ---------- Titelbereich ---------- */

.titel { background: linear-gradient(160deg, var(--farbe-primaer) 0%, var(--farbe-primaer-dunkel) 100%); color: #fff; }
.titel__inhalt { padding-block: clamp(2rem, 5vw, 3.5rem); }
.titel h1 { margin-bottom: .35em; }
.titel p { margin: 0; font-size: 1.1rem; color: #dbe4f6; max-width: 46rem; }

/* ---------- Abschnitte ---------- */

main { display: block; }
.abschnitt { padding-block: clamp(2rem, 4vw, 3.25rem); }
.abschnitt--leise { background: var(--farbe-flaeche-leise); }
.abschnitt > .inhalt > :last-child { margin-bottom: 0; }

.fliesstext { max-width: 46rem; }

/* ---------- Karten ---------- */

.kartenraster {
  display: grid; gap: 1.25rem; padding: 0; margin: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.karte {
  display: flex; flex-direction: column;
  background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie);
  border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden;
}
.karte img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.karte__text { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.karte__text h3 { margin-bottom: .35em; }
.karte__text p { color: var(--farbe-text-leise); margin-bottom: 1rem; }
.karte__text a { margin-top: auto; font-weight: 600; text-decoration: none; }
.karte__text a:hover { text-decoration: underline; }

/* ---------- Angebots-Tafeln ---------- */

/* Mobil eine Spalte, ab Tabletbreite genau zwei. Zwei feste Spalten statt auto-fit,
   damit die Tafeln breit genug werden, dass Beschriftung und Wert nebeneinander stehen. */
.tafeln { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .tafeln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Steht eine Seite nur auf einer Tafel, nutzt sie die volle Breite. */
  .tafeln > .tafel:only-child { grid-column: 1 / -1; }
}
.tafel {
  container-type: inline-size; container-name: tafel;
  background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie);
  border-left: 4px solid var(--farbe-primaer);
  border-radius: var(--radius); padding: 1.25rem 1.4rem; box-shadow: var(--schatten);
}
.tafel h3 { color: var(--farbe-primaer-dunkel); }
/* Unterkategorie innerhalb einer Tafel, etwa E1, E2, E3 unter der E-Jugend. */
.tafel h4 { font-size: 1rem; color: var(--farbe-text); margin: 1.1rem 0 .4rem; }
.tafel h3 + h4 { margin-top: 0; }
.tafel dl { margin: 0; display: grid; grid-template-columns: 1fr; }
.tafel dt { font-weight: 600; color: var(--farbe-text-leise); margin-top: .6rem; }
.tafel dl > dt:first-of-type { margin-top: 0; }
.tafel dd { margin: 0; overflow-wrap: break-word; }
/* Rufnummern nie mitten in der Ziffernfolge umbrechen */
.tafel dd a[href^="tel:"] { white-space: nowrap; }
/* Trägt eine Tafel mehrere Personen (Jugendmannschaften), trennt eine Leerzeile
   unter der Rufnummer die Blöcke. Am Ende der Tafel entfällt der Abstand. */
.tafel dd.tafel__nummer:not(:last-child) { margin-bottom: .9rem; }

/* Ist die Karte breit genug, stehen Beschriftung und Wert nebeneinander.
   Die Beschriftungsspalte hat eine Mindestbreite, damit die Werte aller
   Tafeln an derselben Kante beginnen. */
@container tafel (min-width: 20rem) {
  .tafel dl { grid-template-columns: minmax(8rem, auto) 1fr; gap: .35rem .9rem; align-items: baseline; }
  .tafel dt, .tafel dl > dt:first-of-type { margin-top: 0; }
  /* Beschriftung links, jeder Wert rechts — auch wenn eine Beschriftung
     mehrere Werte trägt (etwa mehrere Trainer einer Mannschaft). */
  .tafel dt { grid-column: 1; }
  .tafel dd { grid-column: 2; }
}

/* ---------- Personenliste ---------- */

.personen { display: grid; gap: .85rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.personen li { background: var(--farbe-flaeche-leise); border-radius: var(--radius); padding: .85rem 1.1rem; }
.personen .rolle { display: block; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--farbe-text-leise); font-weight: 600; }
.personen .name { font-weight: 600; }

/* ---------- Galerie ---------- */

.galerie { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); list-style: none; margin: 0; padding: 0; }
/* Ab Desktopbreite genau drei Bilder je Reihe (Kundenwunsch); ohne diese Grenze setzt auto-fit
   in der 68rem breiten Inhaltsspalte eine vierte Spalte. Schmalere Ansichten bleiben
   unverändert fließend — Handy eine Spalte, Tablet zwei. */
@media (min-width: 64rem) {
  .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.galerie img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; box-shadow: var(--schatten); }

/* ---------- Downloads ---------- */

.downloads { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.downloads li {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie);
  border-radius: var(--radius); padding: 1rem 1.25rem;
}
.downloads .titel-text { font-weight: 600; }
.downloads .art { font-size: .85rem; color: var(--farbe-text-leise); }
.downloads .knopf { margin-left: auto; }

.knopf {
  display: inline-block; background: var(--farbe-primaer); color: #fff;
  padding: .6rem 1.15rem; border-radius: var(--radius);
  text-decoration: none; font-weight: 600;
}
.knopf:hover { background: var(--farbe-primaer-dunkel); color: #fff; }

.knopfzeile { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
/* Zwei Knöpfe nebeneinander, auf schmalen Bildschirmen untereinander. */
.knopfzeile--zwei {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  max-width: 46rem; text-align: center;
}
.knopf--leise {
  background: var(--farbe-flaeche); color: var(--farbe-primaer-dunkel);
  box-shadow: inset 0 0 0 2px var(--farbe-primaer);
}
.knopf--leise:hover { background: var(--farbe-primaer-hell); color: var(--farbe-primaer-dunkel); }

/* ---------- Hinweis ---------- */

.hinweis {
  background: var(--farbe-primaer-hell); border-left: 4px solid var(--farbe-primaer);
  border-radius: var(--radius); padding: 1rem 1.25rem;
}
.hinweis > :last-child { margin-bottom: 0; }

audio { width: 100%; max-width: 32rem; }

/* ---------- Fußbereich ---------- */

.fuss { background: var(--farbe-text); color: #c9cfdb; margin-top: clamp(2rem, 5vw, 4rem); }
.fuss__raster {
  display: grid; gap: 1.5rem 2rem; padding-block: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.fuss h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: #fff; }
.fuss a { color: #fff; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.fuss address { font-style: normal; }
.fuss__unten {
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-block: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .9rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Seitenbild (Kopfbild einer Spartenseite) ---------- */
/* Bewusst ohne width:100% — kleine Originale werden nicht hochskaliert und
   bleiben scharf. Große Bilder füllen die Spalte bis maximal 48rem. */
.seitenbild {
  max-width: min(100%, 48rem);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}