/* ==========================================================================
   BSV Bösel – Signatur-Elemente, die sich in theme.json nicht abbilden lassen
   ========================================================================== */

/* ---------- 0. Vollflächige Bänder stoßen bündig aneinander ----------
   WordPress setzt zwischen Blöcken auf oberster Ebene automatisch den
   Standardabstand (blockGap, 1.5rem = 24px). Bei durchgefärbten Abschnitten
   entsteht dadurch jeweils ein heller Streifen: unter der Wimpelkette,
   zwischen den Abschnitten und vor dem Fußbereich.
   Die Abschnitte bringen ihre Abstände als Innenabstand selbst mit –
   der Zwischenraum muss also weg. */
.wp-site-blocks > * + * { margin-block-start: 0; }
.bsv-kopf > * + * { margin-block-start: 0; }

/* Kurze Seiten: der Fußbereich gehört ans untere Fensterende, nicht in die
   Mitte. Der Inhaltsbereich dehnt sich auf die Resthöhe aus. */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.wp-site-blocks > main { flex: 1 0 auto; }
.wp-block-post-content > .alignfull {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ---------- 1. Kopfbereich: klebend + Wimpelkette ---------- */
.bsv-kopf {
  position: sticky;
  top: 0;
  z-index: 50;
}
/* Admin-Bar nicht überdecken */
.admin-bar .bsv-kopf { top: 32px; }
@media (max-width: 782px) { .admin-bar .bsv-kopf { top: 46px; } }

/* Wimpelkette – grün-weiß, wie beim Festumzug.
   Als SVG-Kachel (100 x 26) hinterlegt, wiederholt sich waagerecht. */
.bsv-wimpel {
  display: block;
  width: 100%;
  height: 26px;
  background-color: #123420;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 26' preserveAspectRatio='none'%3E%3Crect width='100' height='26' fill='%23123420'/%3E%3Cpath d='M0 0 L25 22 L50 0 Z' fill='%23fbfaf6'/%3E%3Cpath d='M50 0 L75 22 L100 0 Z' fill='%232e6b3f'/%3E%3C/svg%3E");
  background-size: 100px 26px;
  background-repeat: repeat-x;
  background-position: 0 0;
}

/* Wappen in der Kopfzeile, Messing-Fassung.
   64 px, damit der Schriftzug im Wappen lesbar bleibt – darunter zerfällt er.
   Als Hintergrundbild, weil sich der Pfad zur Datei dann von selbst aus dem
   Ort dieses Stylesheets ergibt und auch nach einem Umzug der Seite stimmt. */
.bsv-kopf-wappen {
  flex: 0 0 auto;
  width: 57px;   /* 64 px × 227/253 – das Seitenverhältnis des Wappens */
  height: 64px;
  background: url("../bilder/wappen-messing.svg") no-repeat center / contain;
}
@media (max-width: 600px) {
  .bsv-kopf-wappen { width: 43px; height: 48px; }
}

/* Logo-Zeile im Kopf */
/* Zusatzzeile unter dem Vereinsnamen. Bewusst OHNE text-transform: uppercase –
   „e. V." ist die amtliche Abkürzung für den eingetragenen Verein und wird
   klein geschrieben. Die Sperrung trägt die Zeile auch in Gemeinen. */
.bsv-logo-zusatz {
  font-size: .72rem;
  letter-spacing: .14em;
  color: #d8b95c;
  margin: 0;
}
.bsv-kopf .wp-block-site-title { margin: 0; }

/* Wappen, Vereinsname und Zusatzzeile führen gemeinsam zur Startseite.
   Kein zweiter Link fürs Wappen – der vorhandene Link des Seitentitels spannt
   seine Fläche über die ganze Gruppe. Das hält die Adresse dort, wo WordPress
   sie selbst einsetzt (kein fest eingetragener Pfad, der beim Umzug bricht),
   und Vorlesewerkzeuge kündigen weiterhin genau einen Verweis an.
   Dasselbe Muster nutzen weiter unten die Kompanie-Karten. */
.bsv-kopf-marke { position: relative; }
.bsv-kopf-marke .wp-block-site-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
}
/* Der Tastatur-Fokus soll die ganze Fläche zeigen, nicht nur den Schriftzug. */
.bsv-kopf-marke .wp-block-site-title a:focus-visible { outline: none; }
.bsv-kopf-marke .wp-block-site-title a:focus-visible::after {
  outline: 2px solid #d8b95c;
  outline-offset: 4px;
}
/* Suche im Kopfbereich.
   Nur die Lupe ist zu sehen; das Eingabefeld klappt beim Anklicken auf.
   Ein dauerhaft sichtbares Feld passt nicht in die 1100px der Kopfzeile.
   Die Mechanik des Aufklappens bringt WordPress mit, hier steht nur die
   Farbgebung für den dunklen Grund. */
.bsv-kopf-rechts { flex-wrap: nowrap; }
.bsv-kopf-suche { margin: 0; }
.bsv-kopf-suche .wp-block-search__button {
  background: transparent;
  border: 0;
  color: #d8b95c;
  padding: 6px;
  min-width: 40px;
  transition: color .15s ease;
}
.bsv-kopf-suche .wp-block-search__button:hover,
.bsv-kopf-suche .wp-block-search__button:focus-visible { color: #fbfaf6; }
.bsv-kopf-suche .wp-block-search__button:focus-visible {
  outline: 2px solid #d8b95c;
  outline-offset: 2px;
}
.bsv-kopf-suche .wp-block-search__button svg { fill: currentColor; }
.bsv-kopf-suche .wp-block-search__input {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(216,185,92,.45);
  border-radius: 6px;
  color: #fbfaf6;
  padding: 6px 10px;
  font-size: .92rem;
}
.bsv-kopf-suche .wp-block-search__input::placeholder { color: rgba(251,250,246,.6); }
@media (prefers-reduced-motion: reduce) {
  .bsv-kopf-suche .wp-block-search__button { transition: none; }
}

/* Beim Überfahren hebt sich das Wappen leicht mit an. */
.bsv-kopf-marke:hover .bsv-kopf-wappen { opacity: .82; }
.bsv-kopf-wappen { transition: opacity .15s ease; }
@media (prefers-reduced-motion: reduce) {
  .bsv-kopf-wappen { transition: none; }
}

/* Startseite aus den automatischen Seitenlisten ausblenden.
   Kopf und Fuß listen alle veröffentlichten Seiten auf – der Eintrag zur
   Startseite ist dabei überflüssig, weil Logo und Vereinsname oben links
   ohnehin dorthin führen. WordPress kennzeichnet ihn mit .menu-item-home.
   display:none nimmt ihn auch aus der Vorlesereihenfolge; die Seite selbst
   bleibt unangetastet und erreichbar.
   Soll der Eintrag wieder erscheinen: diese Regel löschen. */
.bsv-kopf .wp-block-page-list > .menu-item-home,
.bsv-fuss .wp-block-page-list > .menu-item-home {
  display: none;
}

/* ---------- 1b. Mobiles Menü (Overlay hinter dem Burger) ----------
   Im Kopf steht die Navigation rechtsbündig – WordPress schleppt diese
   Ausrichtung über die Klasse .items-justified-right ins Overlay mit.
   Auf dem Handy entsteht dadurch eine ausgefranste rechte Kante: jeder
   Eintrag beginnt woanders, es gibt keine Lesekante. Hier wird das Menü
   deshalb linksbündig gestellt, die Ziele auf Fingergröße gebracht und
   die Unterpunkte sichtbar unter ihren Hauptpunkt gehängt.
   WordPress setzt in diesem Bereich eigene Werte mit hoher Priorität –
   daher die !important-Angaben. */

/* Wann der Burger übernimmt.
   WordPress schaltet das Überlagerungsmenü von sich aus erst unter 600 px.
   Die Kopfzeile dieses Themes braucht mit dem Wappen aber mehr Platz:
   Wappen und Schriftzug belegen 298 px, das Menü 745 px, die Lupe 40 px –
   zusammen mit den Abständen bleibt in den 1100 px der Inhaltsspalte kaum
   Luft. Gemessen trägt die Zeile bis etwa 1200 px; darunter übernimmt der
   Burger. Kommt später ein Menüpunkt dazu, verschiebt sich die Grenze –
   dann hier nachziehen. */
@media (max-width: 1200px) {
  .bsv-kopf .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .bsv-kopf .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
}

.wp-block-navigation__responsive-container.is-menu-open {
  padding: 20px 24px 48px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  width: 100%;
  gap: 0;
}
.wp-block-navigation__responsive-container.is-menu-open li {
  width: 100%;
  align-items: flex-start;
}
/* Mindestens 44px hoch – darunter trifft man mit dem Daumen zu oft daneben */
.wp-block-navigation__responsive-container.is-menu-open a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 9px 0 !important;
  margin: 0 !important;
  font-size: 1.05rem;
  line-height: 1.25;
}
/* Trennlinie zwischen den Hauptpunkten */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list > li + li {
  border-top: 1px solid rgba(255,255,255,.12);
}
.wp-block-navigation__responsive-container.is-menu-open .has-child > a {
  font-weight: 600;
}
/* Unterpunkte: eingerückt an einer Messinglinie, damit die Zugehörigkeit
   auf einen Blick erkennbar ist */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 0 0 15px !important;
  margin: 0 0 10px 0 !important;
  border: 0 !important;
  border-left: 2px solid rgba(216,185,92,.5) !important;
  background: transparent !important;
  align-items: flex-start !important;
  gap: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li {
  background: transparent !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
  min-height: 44px;
  padding: 4px 0 !important;
  font-size: .95rem;
  opacity: .82;
}
/* Startseite auch im Overlay ausblenden */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list > .menu-item-home {
  display: none;
}

/* Tastatur-Fokus überall sichtbar */
.bsv-kopf a:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid #d8b95c;
  outline-offset: 3px;
}

/* ---------- 2. Hero mit geprägtem Wappen ---------- */
.bsv-hero {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(160deg, #1d4a2a 0%, #123420 100%);

  /* Eine eigene Inhaltsspalte aufspannen: außen je eine dehnbare Spalte, in
     der Mitte die Inhaltsbreite des Themes.

     Grund: Der Hero ist im Editor eine „constrained“-Gruppe, und WordPress
     zentriert darin jedes Kind einzeln (margin-left/right: auto). Blöcke mit
     eigener, kleinerer Höchstbreite – Überschrift, Einleitung – rutschen
     dadurch in die Mitte; Blöcke mit zurückgesetztem Rand – die Sparten-Liste,
     die Eyebrow-Pille – bleiben ganz links. Auf breiten Bildschirmen ergab das
     drei verschiedene linke Kanten. Im Raster haben alle dieselbe. */
  display: grid;
  grid-template-columns:
    [voll-start]   1fr
    [inhalt-start] min(var(--wp--style--global--content-size, 1100px), 100%)
    [inhalt-ende]  1fr
    [voll-ende];
}
.bsv-hero > * {
  position: relative;
  grid-column: inhalt-start / inhalt-ende;
  /* Die automatischen Seitenränder von WordPress abschalten – die Ausrichtung
     übernimmt jetzt das Raster. */
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Ganzbreite Blöcke dürfen weiterhin über die Inhaltsspalte hinausreichen. */
.bsv-hero > .alignfull { grid-column: voll-start / voll-ende; }
/* Die Pille schmiegt sich an ihren Text, statt die Spalte auszufüllen. */
.bsv-hero > .bsv-eyebrow { justify-self: start; }

/* Das Vereinswappen, ins Grün geprägt.

   Vorher lagen hier vier erfundene Zielscheiben-Ringe. Das Wappen hat eine
   Zielscheibe in der Mitte – also zeigt der Auftakt jetzt das echte Zeichen.
   Es steht frei im rechten Drittel und wird bewusst nicht angeschnitten: ein
   angeschnittenes Muster liest sich als Schmuck, ein angeschnittener Schriftzug
   als Versehen.

   Das Bild liegt in einem ::before, weil ein Hintergrundbild sich nicht
   abschwächen lässt. Absolut gesetzt, damit es im Raster oben keine eigene
   Spalte belegt. Die Messing-Fassung ist eine reine Bildschirmfassung des
   Wappens – siehe assets/bilder/.

   Nur im ganzbreiten Auftakt: Die Klasse bsv-hero trägt auch die Karte der
   amtierenden Majestäten, und dort hat ein Wappen im Hintergrund nichts zu
   suchen.

   Zwei Maße statt einem: die Höhe bindet im hohen Startseiten-Auftakt, die
   Breite in den flachen Unterseiten-Köpfen. `contain` und die Ausrichtung nach
   rechts sorgen dafür, dass das Wappen unverzerrt bleibt und in beiden Fällen
   an derselben Kante sitzt. */
.bsv-hero.alignfull::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  height: 88%;
  width: min(34%, 580px);
  background: url("../bilder/wappen-messing.svg") no-repeat right center / contain;
  opacity: .18;
  pointer-events: none;
}
/* Je schmaler das Fenster, desto weiter rückt der Text unter das Wappen –
   gemessen: schon bei 1200 px liegt es 370 px weit hinter der Pillen-Zeile.
   Es wird deshalb stufenweise kleiner und blasser und verschwindet, sobald
   der Auftakt einspaltig wird. */
@media (max-width: 1200px) {
  .bsv-hero.alignfull::before { width: min(30%, 420px); opacity: .12; }
}
@media (max-width: 900px) {
  .bsv-hero.alignfull::before { width: min(28%, 260px); opacity: .09; }
}
@media (max-width: 600px) {
  .bsv-hero.alignfull::before { display: none; }
}

/* „Eyebrow“ – die kleine Pillen-Zeile über den Überschriften */
.bsv-eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #b8912f;
  border: 1px solid rgba(184,145,47,.4);
  border-radius: 99px;
  padding: 5px 14px;
  margin: 0 0 22px;
  line-height: 1.4;
}
/* Auf dunklem Grund heller */
.bsv-hero .bsv-eyebrow,
.has-gruen-dunkel-background-color .bsv-eyebrow,
.has-gruen-background-color .bsv-eyebrow {
  color: #d8b95c;
  border-color: rgba(216,185,92,.45);
}

/* Verweise in den dunklen Kacheln.
   Die Linkfarbe des Themes ist ein dunkles Grün – auf grünem Grund ist sie
   praktisch unsichtbar. Deshalb nehmen Links dort die Farbe des umgebenden
   Textes an; als Link erkennbar bleiben sie durch die Unterstreichung.
   Schaltflächen sind ausgenommen, die bringen ihre eigene Farbgebung mit. */
.bsv-hero a:not(.wp-element-button) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bsv-hero a:not(.wp-element-button):hover,
.bsv-hero a:not(.wp-element-button):focus-visible {
  color: #d8b95c;
}

/* Einleitungsabsatz – auch außerhalb des Heros lesbare Zeilenlänge */
.bsv-hero-text { max-width: 60ch; }

/* Was schmaler ist als die Inhaltsspalte, bleibt an deren linker Kante.
   Ohne diese Zeilen zentriert WordPress solche Blöcke (gleicher Grund wie beim
   Hero oben); Einleitungsabsatz und Zeitstrahl standen dadurch eingerückt.

   Voraussetzung: Der Block steht in einem Behälter, der selbst nur so breit ist
   wie die Inhaltsspalte. Für den per Kurzbefehl geholten Seiteninhalt sorgt
   dafür `.bsv-eingebettet` – ohne diesen Rahmen läge die linke Kante am
   Seitenrand statt an der Spaltenkante. */
.bsv-hero-text,
.bsv-zeit {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Rahmen um Inhalt, den [bsv_seiteninhalt] von einer anderen Seite holt.
   Er hängt im ganzbreiten Abschnitt und braucht deshalb eine eigene
   Inhaltsspalte; darin stehen die geholten Blöcke ganz gewöhnlich untereinander. */
.bsv-eingebettet {
  max-width: var(--wp--style--global--content-size, 1100px);
  margin-inline: auto;
}

/* Zeilenlängen im Hero begrenzen */
.bsv-hero > .wp-block-heading { max-width: 18ch; }
.bsv-hero .bsv-hero-text {
  max-width: 52ch;
  font-size: 1.05rem;
  opacity: .92;
}

/* Kennzahlen-Leiste im Hero */
.bsv-fakten {
  border-top: 1px solid rgba(255,255,255,.22);
  padding-top: 20px;
}
.bsv-fakt { flex: 0 0 auto; }
.bsv-fakt b,
.bsv-fakt-zahl {
  display: block;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: #d8b95c;
  line-height: 1.1;
  margin: 0;
}
.bsv-fakt span,
.bsv-fakt-label {
  display: block;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .75;
  margin: 0;
}

/* Sparten-Marken im Hero: was bei uns geschossen wird.
   Eine gewöhnliche Liste, im Editor also normal bearbeitbar – nur eben
   waagerecht und als Pillen gesetzt. */
.bsv-sparten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}
.bsv-sparten li {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #d8b95c;
  border: 1px solid rgba(216,185,92,.4);
  border-radius: 99px;
  padding: 6px 14px;
  white-space: nowrap;
}
/* Auf hellem Grund in Messing statt Messing hell */
.bsv-sparten-hell li {
  color: #b8912f;
  border-color: rgba(184,145,47,.4);
}
@media (max-width: 480px) {
  .bsv-sparten li { white-space: normal; }
}

/* Knöpfe: dezentes Anheben beim Überfahren */
.wp-block-button__link { transition: transform .15s ease, box-shadow .15s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); }
/* Geister-Knopf auf dunklem Grund */
.bsv-btn-ghost .wp-block-button__link {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.55);
  color: #fff;
}
.bsv-btn-ghost .wp-block-button__link:hover {
  background: rgba(255,255,255,.1);
  border-color: #fff;
  color: #fff;
}

/* ---------- 3. Karten (Aktuelles) ---------- */
.bsv-karte {
  background: #fff;
  border: 1px solid #e6e4da;
  border-radius: 12px;
  transition: box-shadow .2s ease, transform .2s ease;
  height: 100%;
}
.bsv-karte:hover {
  box-shadow: 0 10px 28px rgba(29,74,42,.12);
  transform: translateY(-3px);
}
.bsv-karte .wp-block-post-title { font-size: 1.15rem; margin: 8px 0 10px; }
.bsv-karte .wp-block-read-more,
.bsv-karte .more-link {
  display: inline-block;
  margin-top: 14px;
  font-size: .88rem;
  font-weight: 600;
  color: #1d4a2a;
  text-decoration: none;
}
.bsv-karte .wp-block-read-more:hover { text-decoration: underline; }

/* ---------- 4. Instagram-Vorschau ---------- */
.bsv-insta-feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.bsv-kachel {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.3;
}
.bsv-kachel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55));
}
.bsv-kachel span { position: relative; z-index: 1; }
.bsv-kachel.k1 { background: linear-gradient(135deg,#2e6b3f,#1d4a2a); }
.bsv-kachel.k2 { background: linear-gradient(135deg,#b8912f,#8a6a1e); }
.bsv-kachel.k3 { background: linear-gradient(135deg,#4a7c59,#2e6b3f); }
.bsv-kachel.k4 { background: linear-gradient(135deg,#6b8f71,#4a7c59); }
.bsv-kachel.k5 { background: linear-gradient(135deg,#9c7a25,#b8912f); }
.bsv-kachel.k6 { background: linear-gradient(135deg,#1d4a2a,#123420); }

/* Instagram-Knopf im Markenverlauf */
.bsv-btn-insta .wp-block-button__link {
  background: linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7);
  color: #fff;
  font-size: .85rem;
  padding: 10px 18px;
}
/* WhatsApp-Knopf */
.bsv-btn-wa .wp-block-button__link {
  background: #25d366;
  color: #0b2c1e;
  font-weight: 700;
}
.bsv-btn-wa .wp-block-button__link:hover {
  background: #1ebe5a;
  color: #0b2c1e;
}

/* QR-Code zum Kanal: braucht weißen Grund mit Rand ringsum, sonst lesen
   ihn manche Kameras auf dem dunkelgrünen Kasten nicht. */
.bsv-qr img {
  background: #fff;
  padding: 6px;
  box-sizing: border-box;
  display: block;
}
.bsv-wa-qr { margin-bottom: 0; }
.bsv-wa-qr .wp-block-column { min-width: 0; }

/* Instagram-Feed von Smash Balloon in die weiße Karte einpassen.
   Das Plugin bringt eigene Abstände mit, die hier zu viel wären. */
.bsv-karte #sb_instagram { margin-top: 18px; padding-bottom: 0 !important; }
.bsv-karte #sb_instagram .sbi_photo { border-radius: 8px; overflow: hidden; }

/* ---------- 5. Königshaus („Thron“) ---------- */
.bsv-thron .bsv-thron-titel {
  font-family: "Public Sans", sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #b8912f;
  font-weight: 600;
  margin: 0;
}
.bsv-thron .bsv-name {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.65rem;
  font-weight: 600;
  color: #123420;
  line-height: 1.2;
  margin: 6px 0 0;
}
/* Königskette als Punktreihe */
.bsv-kette {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.bsv-kette i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d8b95c;
  opacity: .85;
}
.bsv-kette i:nth-child(even) { background: #b8912f; }

/* ---------- 6. Kompanien-Kacheln ---------- */
/* Altes Raster aus der HTML-Fassung – bleibt, damit bereits eingefügte
   Abschnitte weiter richtig aussehen. Neue nutzen das Grid-Layout der Gruppe. */
.bsv-komp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}
.bsv-komp {
  background: #fff;
  border: 1px solid #e6e4da;
  border-radius: 10px;
  padding: 18px 16px;
  text-align: center;
  position: relative;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
/* Verlinkte Kachel: hebt sich beim Überfahren, wie die Nachrichtenkarten */
.bsv-komp:has(a):hover {
  box-shadow: 0 8px 22px rgba(29,74,42,.12);
  transform: translateY(-2px);
  border-color: #d8b95c;
}
.bsv-komp b,
.bsv-komp-name {
  display: block;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.05rem;
  color: #123420;
  font-weight: 600;
  margin: 0;
}
.bsv-komp span,
.bsv-komp-ort {
  display: block;
  font-size: .78rem;
  color: #5c6357;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0;
}
/* Der Link liegt im Namen, klickbar ist aber die ganze Kachel:
   das ::after legt sich unsichtbar über die komplette Fläche. */
.bsv-komp-name a {
  color: inherit;
  text-decoration: none;
}
.bsv-komp-name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
}
.bsv-komp:focus-within {
  outline: 2px solid #d8b95c;
  outline-offset: 3px;
}

/* ---------- 7. Zeitstrahl Geschichte ---------- */
/* Der Zeitstrahl scrollt in sich, damit die Seite nicht mitwächst, wenn die
   Chronik länger wird. Die senkrechte Linie ist deshalb kein border-left
   (das würde beim Scrollen stehenbleiben), sondern ein Hintergrundstreifen
   mit background-attachment:local – der scrollt mit dem Inhalt mit.
   Die Ringe sitzen dadurch INNERHALB des Kastens und werden nicht abgeschnitten.
   Höhe ändern oder Scrollen abschalten: max-height anpassen bzw. entfernen. */
/* Grundform ohne Scrollkasten (auch die alte HTML-Fassung nutzt sie) */
.bsv-zeit {
  border-left: 3px solid #b8912f;
  padding-left: 28px;
  display: grid;
  gap: 26px;
  max-width: 640px;
}
.bsv-zeit-punkt { position: relative; }
.bsv-zeit-punkt::before {
  content: "";
  position: absolute;
  left: -37px;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fbfaf6;
  border: 3px solid #b8912f;
}
.bsv-zeit-punkt b,
.bsv-zeit-punkt .wp-block-heading {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.1rem;
  color: #123420;
  font-weight: 600;
  margin: 0;
}
.bsv-zeit-punkt p {
  font-size: .93rem;
  color: #5c6357;
  margin-top: 4px;
}

/* Scrollkasten-Variante.
   Die senkrechte Linie darf hier kein border-left sein – die bliebe beim
   Scrollen stehen. Stattdessen ein Hintergrundstreifen mit
   background-attachment:local, der mit dem Inhalt mitwandert. Das Raster
   rückt um 48px ein, damit die Ringe INNERHALB des Kastens liegen und
   nicht am Rand abgeschnitten werden.
   Höhe ändern: max-height. Scrollen abschalten: Klasse bsv-zeit-scroll
   im Editor unter „Erweitert → Zusätzliche CSS-Klasse" entfernen. */
.bsv-zeit-scroll {
  border-left: 0;
  padding: 4px 10px 4px 48px;
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-image: linear-gradient(#b8912f, #b8912f);
  background-size: 3px 100%;
  background-position: 20px 0;
  background-repeat: no-repeat;
  background-attachment: local;
  scrollbar-width: thin;
  scrollbar-color: #b8912f #eceadf;
}
.bsv-zeit-scroll .bsv-zeit-punkt::before {
  left: -36px;
  top: 8px;
  background: #fff;
}
.bsv-zeit-scroll:focus-visible {
  outline: 2px solid #d8b95c;
  outline-offset: 6px;
}
/* Bildlaufleiste in den Vereinsfarben (WebKit/Blink) */
.bsv-zeit-scroll::-webkit-scrollbar { width: 8px; }
.bsv-zeit-scroll::-webkit-scrollbar-track { background: #eceadf; border-radius: 4px; }
.bsv-zeit-scroll::-webkit-scrollbar-thumb { background: #b8912f; border-radius: 4px; }

/* ---------- 7b. Linksammlung ---------- */
.bsv-linkkarte {
  background: #fff;
  border: 1px solid #e6e4da;
  border-radius: 12px;
  padding: 22px 24px;
  position: relative;
  height: 100%;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.bsv-linkkarte:hover {
  box-shadow: 0 10px 28px rgba(29,74,42,.12);
  transform: translateY(-3px);
  border-color: #d8b95c;
}
.bsv-linkkarte:focus-within {
  outline: 2px solid #d8b95c;
  outline-offset: 3px;
}
.bsv-linkkarte-titel {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #123420;
  margin: 0;
  line-height: 1.25;
}
/* Der Link sitzt im Titel, klickbar ist die ganze Karte */
.bsv-linkkarte-titel a {
  color: inherit;
  text-decoration: none;
}
.bsv-linkkarte-titel a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
}
.bsv-linkkarte-text {
  font-size: .9rem;
  color: #5c6357;
  margin: 6px 0 0;
}
.bsv-linkkarte-adresse {
  display: block;
  margin: 12px 0 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #b8912f;
}
.bsv-linkkarte-adresse::after { content: " ↗"; }

/* Dateikarte: gleiche Optik, aber Pfeil nach unten statt nach außen */
.bsv-linkkarte-datei {
  display: block;
  margin: 12px 0 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #b8912f;
}
.bsv-linkkarte-datei::after { content: " ↓"; }

/* Angaben auf den Kompaniekarten: Kompanieführer, Übungsabend */
.bsv-komp-detail {
  font-size: .88rem;
  color: #5c6357;
  margin: 8px 0 0;
  line-height: 1.45;
}
.bsv-komp-detail b {
  color: #22261f;
  font-weight: 600;
}

/* Kompaniewappen – steht mittig über den Angaben in der Seitenkarte */
.bsv-wappen {
  margin: 0 auto 20px !important;
  max-width: 150px;
}
.bsv-wappen img {
  display: block;
  width: 100%;
  height: auto;
}

/* Überschrift einer Linkgruppe, mit kurzem Messingstrich darüber.
   Der Kopfabstand steht bewusst ohne !important und einzeln statt als
   Kurzform: eine Kurzform mit !important schlägt auch den margin-top,
   den eine Seite im Editor selbst setzt, und die Überschrift klebt dann
   am Absatz darüber. Nur der untere Abstand muss sich gegen die
   Kernregeln durchsetzen, der bleibt deshalb wichtig. */
.bsv-linkgruppe {
  font-size: 1.35rem !important;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 4px !important;
  padding-top: 14px;
  border-top: 3px solid #b8912f;
  display: inline-block;
}

/* ---------- 7bb. Königstafel und andere lange Listen ----------
   Wie beim Zeitstrahl: fester Kasten mit eigenem Bildlauf, damit eine Tafel
   mit neunzig Jahrgängen die Seite nicht endlos macht. Die Kopfzeile bleibt
   beim Scrollen stehen (position: sticky).
   Höhe ändern oder Scrollen abschalten: max-height anpassen bzw. entfernen. */
.bsv-tafel {
  max-height: 480px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #e6e4da;
  border-radius: 12px;
  background: #fff;
  scrollbar-width: thin;
  scrollbar-color: #b8912f #eceadf;
}
.bsv-tafel:focus-visible {
  outline: 2px solid #d8b95c;
  outline-offset: 4px;
}
.bsv-tafel::-webkit-scrollbar { width: 8px; }
.bsv-tafel::-webkit-scrollbar-track { background: #eceadf; border-radius: 4px; }
.bsv-tafel::-webkit-scrollbar-thumb { background: #b8912f; border-radius: 4px; }

.bsv-tafel .wp-block-table { margin: 0; }
.bsv-tafel table {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
}
.bsv-tafel th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #123420;
  color: #fff;
  text-align: left;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 11px 16px;
}
.bsv-tafel td {
  padding: 9px 16px;
  border-top: 1px solid #efece0;
  color: #22261f;
}
.bsv-tafel tbody tr:nth-child(even) td { background: #faf9f4; }
/* Jahreszahl in Messing, schmale Spalte */
.bsv-tafel td:first-child {
  font-weight: 600;
  color: #b8912f;
  width: 6em;
  white-space: nowrap;
}

/* Karte mit den amtierenden Majestäten */
.bsv-majestaet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
}
.bsv-majestaet-titel {
  font-family: "Public Sans", sans-serif;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #d8b95c;
  font-weight: 600;
  margin: 0;
}
.bsv-majestaet-name {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  margin: 6px 0 0;
}
.bsv-majestaet-jahr {
  font-size: .82rem;
  opacity: .8;
  margin: 4px 0 0;
}

/* ---------- 7bc. Ämterkarten (Vorstand) ----------
   Wie die Linkkarten, aber ohne Anheben beim Überfahren – hier ist nichts
   klickbar. Oben das Amt in Messing, darunter der Name. */
.bsv-amtkarte {
  background: #fff;
  border: 1px solid #e6e4da;
  border-radius: 12px;
  padding: 20px 22px;
  height: 100%;
}
.bsv-amt {
  font-family: "Public Sans", sans-serif;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #b8912f;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
}
.bsv-amt-name {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #123420;
  margin: 6px 0 0;
  line-height: 1.25;
}
/* Unbesetztes Amt: zurückgenommen, nicht wie ein Name gesetzt */
.bsv-amt-frei {
  font-size: .93rem;
  font-style: italic;
  color: #8b8f84;
  margin: 6px 0 0;
}

/* ---------- 7c. Formularfelder ----------
   Bewusst über die HTML-Elemente gestylt, nicht über Plugin-Klassen. So sieht
   jedes Formular gleich aus – egal ob Fluent Forms, Forminator, Contact Form 7,
   das Suchfeld oder das Kommentarfeld. */
.bsv-formular input[type="text"],
.bsv-formular input[type="email"],
.bsv-formular input[type="tel"],
.bsv-formular input[type="url"],
.bsv-formular input[type="number"],
.bsv-formular input[type="date"],
.bsv-formular textarea,
.bsv-formular select,
input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="number"], input[type="date"],
input[type="search"], textarea, select {
  width: 100%;
  max-width: 100%;
  font-family: inherit;
  font-size: .95rem;
  color: #22261f;
  background: #fff;
  border: 1px solid #d9d6c8;
  border-radius: 8px;
  padding: 11px 14px;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 160px; line-height: 1.55; resize: vertical; }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #b8912f;
  box-shadow: 0 0 0 3px rgba(184,145,47,.18);
}
::placeholder { color: #9a9c92; opacity: 1; }

/* Beschriftungen */
.bsv-formular label,
.wpcf7 label, .fluentform label, .forminator-label {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: #22261f;
  margin-bottom: 6px;
}
/* Pflichtfeld-Sternchen in Messing */
.bsv-formular .required, .wpcf7 .required, abbr[title="required"] { color: #b8912f; text-decoration: none; }

/* Häkchen und Auswahlknöpfe in den Vereinsfarben */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  accent-color: #1d4a2a;
  margin-right: 8px;
}
/* Einwilligungszeile: Häkchen und Text auf einer Linie */
.bsv-formular .bsv-einwilligung {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .88rem;
  color: #5c6357;
  font-weight: 400;
}
.bsv-formular .bsv-einwilligung input { margin-top: 3px; }

/* Absenden-Knopf wie die übrigen Schaltflächen des Themes */
.bsv-formular button[type="submit"],
.bsv-formular input[type="submit"],
.wpcf7 input[type="submit"],
.fluentform .ff-btn-submit,
.forminator-button-submit {
  width: auto;
  background: #b8912f;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 13px 26px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.bsv-formular button[type="submit"]:hover,
.bsv-formular input[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover,
.fluentform .ff-btn-submit:hover,
.forminator-button-submit:hover {
  background: #d8b95c;
  transform: translateY(-2px);
}

/* Rückmeldungen nach dem Absenden */
.wpcf7 form.sent .wpcf7-response-output,
.ff-message-success {
  background: #e8f0e9;
  border: 1px solid #1d4a2a;
  border-radius: 8px;
  padding: 14px 18px;
  color: #123420;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7-not-valid-tip,
.ff-el-is-error .text-danger {
  color: #8a2b2b;
  font-size: .85rem;
}

/* Das Suchfeld des Themes soll schmal bleiben, nicht über die volle Breite */
.wp-block-search input[type="search"] { max-width: 420px; }

/* ---------- 8. Fußbereich ---------- */
.bsv-fuss { font-size: .88rem; }

/* Das Wappen als Siegel vor den Fußspalten – hier in Originalfarben:
   Auf dem Kohle-Ton wirkt das Gelb heraldisch statt grell.

   Als Pseudo-Element und nicht als eigener Block: Der Spaltenblock ist eine
   Flex-Reihe, das ::before wird darin zum ersten Element und übernimmt den
   Spaltenabstand von selbst. Vor allem aber greift es auch dann, wenn der
   Fußbereich im Website-Editor bearbeitet wurde – dann zeigt WordPress die
   Fassung aus der Datenbank, und eine Änderung an parts/footer.html käme
   nie an. Auf schmalen Bildschirmen bricht der Spaltenblock um, das Siegel
   steht dann allein in der ersten Zeile. */
.bsv-fuss > .wp-block-columns::before {
  content: "";
  flex: 0 0 auto;
  align-self: flex-start;
  width: 86px;   /* 96 px × 227/253 – das Seitenverhältnis des Wappens */
  height: 96px;
  background: url("../bilder/wappen.svg") no-repeat center / contain;
}
.bsv-fuss h2, .bsv-fuss h3, .bsv-fuss strong {
  color: #fff;
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
}
.bsv-fuss a { color: #cfd2ca; text-decoration: none; }
.bsv-fuss a:hover { color: #d8b95c; text-decoration: underline; }
/* Seitenliste und feste Listen ohne Aufzählungspunkte */
.bsv-fuss .wp-block-list,
.bsv-fuss .wp-block-page-list,
.bsv-fuss .wp-block-page-list ul {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 6px;
  margin: 0;
}

/* Im Fußbereich nur die oberste Ebene zeigen. Sobald Unterseiten angelegt
   sind (etwa die sieben Kompanien unter „Kompanien"), würde die Spalte sonst
   endlos lang. Im Kopfmenü bleiben sie als Untermenü erhalten.
   Sollen sie auch im Fuß erscheinen: diese Regel löschen. */
.bsv-fuss .wp-block-page-list ul { display: none; }
.bsv-fuss-hinweis {
  padding-top: 20px;
  border-top: 1px solid #3a3f35;
  font-size: .78rem;
  color: #8b9184;
}

/* ---------- 9. Sonstiges ---------- */
html { scroll-behavior: smooth; }
.bsv-lauftext { color: #5c6357; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Mobil: Kennzahlen umbrechen lassen */
@media (max-width: 760px) {
  .bsv-fakt b { font-size: 1.45rem; }
}

/* Kennzahlen mobil etwas kleiner */
@media (max-width: 760px) {
  .bsv-fakt-zahl { font-size: 1.45rem; }
  .bsv-zeit { padding-left: 22px; }
  .bsv-zeit-punkt::before { left: -31px; }
}

/* Instagram-Vorschau auf schmalen Displays */
@media (max-width: 420px) {
  .bsv-insta-feed { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------------
   Archivseiten
   Die alte Website kannte keine Überschriften-Tags, sie setzte Überschriften
   allein über die Schriftgröße. Beim Übernehmen werden sie zu h2 und h3 –
   hier bekommen sie das Aussehen des übrigen Vereinsauftritts. Der Abstand
   nach oben ist bewusst groß: Auf einer Archivseite folgen viele Meldungen
   aufeinander, und die Trennung muss ohne Linien erkennbar sein.
--------------------------------------------------------------------------- */
.bsv-archiv-titel {
	font-family: Fraunces, Georgia, serif;
	color: #123420;
	line-height: 1.25;
	text-wrap: balance;
}

h2.bsv-archiv-titel {
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
	margin-block: 3.2em 0.5em;
	padding-block-end: 0.35em;
	border-block-end: 1px solid rgba(184, 145, 47, 0.35);
}

h3.bsv-archiv-titel {
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
	margin-block: 2.4em 0.4em;
}

/* Die erste Überschrift steht direkt unter dem Seitentitel. */
.bsv-archiv-titel:first-child {
	margin-block-start: 0;
}

/* Bilder in den Archivseiten nie über die Spaltenbreite hinaus. */
.wp-block-page-content img,
.entry-content img {
	max-width: 100%;
	height: auto;
}

/* Tabellen aus dem Artikel-Import stehen als nacktes <table> im Inhalt, nicht
   in einem Tabellen-Block. Sie sind nur so breit wie ihr Inhalt und damit
   schmaler als die Inhaltsspalte – WordPress zentriert sie deshalb (gleicher
   Grund wie beim Hero). Sie gehören an die linke Kante wie der übrige Text. */
.wp-block-post-content > table,
.wp-block-page-content > table,
.entry-content > table {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ---------------------------------------------------------------------------
   Archivliste
   Beitragstitel einer Kategorie, zweispaltig, nur Titel. Bewusst zurückhaltend:
   Bei fünfzig Einträgen wären Karten oder Rahmen zu laut. Die feine Linie
   trennt, der Messington beim Überfahren zeigt, dass es ein Link ist.
--------------------------------------------------------------------------- */
.bsv-archivliste .bsv-archivliste-titel {
	margin: 0;
	font-family: "Public Sans", system-ui, sans-serif;
	font-weight: 500;
	line-height: 1.4;
	border-block-end: 1px solid rgba(184, 145, 47, 0.22);
}

.bsv-archivliste .bsv-archivliste-titel a {
	display: block;
	padding: 0.72em 0.2em;
	color: #123420;
	text-decoration: none;
}

.bsv-archivliste .bsv-archivliste-titel a:hover,
.bsv-archivliste .bsv-archivliste-titel a:focus-visible {
	color: #8a6a1e;
	background: rgba(184, 145, 47, 0.06);
}

.bsv-archivliste .bsv-archivliste-titel a:focus-visible {
	outline: 2px solid #b8912f;
	outline-offset: -2px;
}

/* Einspaltig auf schmalen Displays – zwei Spalten würden dort umbrechen. */
@media (max-width: 600px) {
	.bsv-archivliste .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}