/* 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 ---------- */

/* Seitenkopf in Vereinsblau, bewusst flach und zurückhaltend gehalten. */
.titel { background: linear-gradient(160deg, var(--farbe-primaer) 0%, var(--farbe-primaer-dunkel) 100%); color: #fff; }
.titel__inhalt { padding-block: clamp(.9rem, 2.2vw, 1.4rem); }
.titel h1 { margin-bottom: .2em; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
.titel h1:last-child { margin-bottom: 0; }
.titel p { margin: 0; font-size: .98rem; line-height: 1.5; color: #dbe4f6; max-width: 52rem; }

/* ---------- 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; }
}


/* ---------- Schiedsrichter-Kacheln ---------- */

/* Gleiche Kacheloptik wie die Angebots-Tafeln, zusätzlich mit Porträt im Kopf.
   Mobil eine Spalte, ab Tabletbreite genau zwei — wie bei .tafeln bewusst feste Spalten
   statt auto-fit: In der 68rem breiten Inhaltsspalte setzt auto-fit sonst drei schmale
   Kacheln, in denen Beschriftung und Wert nie nebeneinander passen. Ob sie es tun,
   entscheidet darunter die Container-Abfrage der Kachel selbst. */
.schiris { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .schiris { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.schiri {
  container-type: inline-size; container-name: schiri;
  display: flex; flex-direction: column;
  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);
}
.schiri__kopf { display: flex; align-items: center; gap: 1rem; }
.schiri__bild {
  flex: none; width: 76px; height: 76px; border-radius: 50%;
  object-fit: cover; object-position: 50% 22%;   /* Porträts oben ausrichten, Köpfe nicht anschneiden */
  border: 2px solid var(--farbe-primaer-hell);
}
/* Ohne Foto: Initialen im Vereinsblau statt eines leeren Platzes. */
.schiri__bild--leer {
  display: flex; align-items: center; justify-content: center;
  background: var(--farbe-primaer-hell); color: var(--farbe-primaer-dunkel);
  font-weight: 700; font-size: 1.35rem; letter-spacing: .02em;
}
.schiri__name { margin: 0 0 .15em; color: var(--farbe-primaer-dunkel); }
.schiri__seit {
  display: inline-block; margin: 0;
  background: var(--farbe-primaer-hell); color: var(--farbe-primaer-dunkel);
  border-radius: 999px; padding: .1rem .65rem;
  font-size: .8rem; font-weight: 600; line-height: 1.5;
}
.schiri__daten { margin: 1.1rem 0 0; display: grid; grid-template-columns: 1fr; }
.schiri__daten dt { font-weight: 600; color: var(--farbe-text-leise); margin-top: .7rem; }
.schiri__daten > dt:first-of-type { margin-top: 0; }
.schiri__daten dd { margin: 0; overflow-wrap: break-word; }
.schiri__daten ul { margin: 0; padding-left: 1.15rem; list-style: disc; }
.schiri__daten li { margin-bottom: .15rem; }

/* Ab etwa 23rem Kachelbreite stehen Beschriftung und Wert nebeneinander. */
@container schiri (min-width: 23rem) {
  .schiri__daten { grid-template-columns: minmax(7.5rem, auto) 1fr; gap: .4rem .9rem; align-items: baseline; }
  .schiri__daten dt, .schiri__daten > dt:first-of-type { margin-top: 0; }
  .schiri__daten dt { grid-column: 1; }
  .schiri__daten 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); }

/* ---------- Kurskachel externer Anbieter ---------- */

/* Farben nach der Visitenkarte des Anbieters: Verlauf von Gelbgrün nach Rosaviolett,
   Schrift in kräftigem Violett. Die Kachel bleibt so schmal wie eine Visitenkarte. */
/* Farben nach Logo und Flyer: warmes Creme, Rosa und Pink, Goldakzent. */
.tafel--herzensyoga {
  --kurs-pink: #b8125a;
  --kurs-pink-dunkel: #8a0d43;
  --kurs-gold: #f2b63c;
  max-width: 52rem;
  display: grid; gap: 1rem 1.75rem; grid-template-columns: 1fr;
  background: linear-gradient(160deg, #fff7e3 0%, #fdeef2 50%, #f9d6e4 100%);
  border-color: #f1c3d6; border-left-color: #e0287d;
  color: #4a2333;
}
.kurs__logo img {
  width: 10rem; margin-inline: auto;
  border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 6px 18px rgba(184, 18, 90, .18);
}
.tafel--herzensyoga h3 { color: var(--kurs-pink); font-size: 1.5rem; letter-spacing: .01em; margin-bottom: .2em; }
.kurs__motto {
  text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; font-weight: 600;
  padding-bottom: .6rem; margin-bottom: 1rem;
  border-bottom: 2px solid; border-image: linear-gradient(90deg, var(--kurs-gold), var(--kurs-pink) 60%, transparent) 1;
}
.tafel--herzensyoga dt { color: var(--kurs-pink-dunkel); }
.tafel--herzensyoga a { color: var(--kurs-pink); font-weight: 600; }
.tafel--herzensyoga a:hover { color: var(--kurs-pink-dunkel); }
.kurs__merkmale { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .35rem; }
.kurs__merkmale li { position: relative; padding-left: 1.5rem; }
.kurs__merkmale li::before { content: "♥"; position: absolute; left: 0; color: #e0287d; }
.kurs__flyer { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.25rem; }
.kurs__flyerbild img { width: 5rem; border-radius: .35rem; box-shadow: 0 2px 10px rgba(74, 35, 51, .2); }
.tafel--herzensyoga .knopf { background: var(--kurs-pink); color: #fff; }
.tafel--herzensyoga .knopf:hover { background: var(--kurs-pink-dunkel); color: #fff; }
.kurs__dateiart { font-weight: 400; opacity: .9; }
/* Breite Kachel: Logo links, Angaben rechts. Die Kachel ist selbst der
   Container, daher hier eine Medienabfrage statt einer Container-Abfrage. */
@media (min-width: 40rem) {
  .tafel--herzensyoga { grid-template-columns: 10rem 1fr; align-items: start; }
}

/* ---------- 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; }

/* Zurückhaltender Hinweis mit kleinem Info-Symbol (Kursseite): kleine Schrift, kein Schatten. */
.hinweis--wichtig {
  display: grid; grid-template-columns: auto 1fr; column-gap: .7rem;
  max-width: 52rem; padding: .8rem 1rem;
  background: var(--farbe-flaeche-leise);
  border: 1px solid var(--farbe-linie); border-left: 3px solid var(--farbe-primaer);
  font-size: .9rem; line-height: 1.55; color: var(--farbe-text-leise);
}
.hinweis--wichtig::before {
  content: "i"; content: "i" / "";
  grid-row: 1 / span 3; align-self: start;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--farbe-primaer-hell); color: var(--farbe-primaer);
  font: italic 700 .95rem/1.5rem Georgia, "Times New Roman", serif; text-align: center;
}
.hinweis--wichtig > * { grid-column: 2; }
.hinweis--wichtig h2 { font-size: .95rem; color: var(--farbe-text); margin: .1rem 0 .3rem; }
.hinweis--wichtig p { margin-bottom: .4rem; }
.hinweis__haftung { font-size: .8rem; border-top: 1px solid var(--farbe-linie); padding-top: .4rem; }

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);
}