/* ============================================================================
   Hombu / Vereins.AI — Website
   Eine einzige Stildatei für alle Seiten.

   Farben und Schrift sind aus fightergear.de übernommen, damit die Softwareseite
   wie ein Teil derselben Seite wirkt und nicht wie ein Fremdkörper:

     #0b1e33  Marineblau — Überschriften, Fußzeile
     #1b365d  Marineblau, heller — Verläufe
     #e90b2b  Rot — Akzent, Knöpfe
     #d80927  Rot, dunkler — Verläufe
     #e8f4fd  Hellblau — abgesetzte Abschnitte
     #6c6c6c  Grau — Fließtext

   Wer später umfärben will, ändert nur den :root-Block hier oben.
   ========================================================================== */

:root {
  --grund:          #ffffff;   /* Seitenhintergrund */
  --grund-2:        #f3f9fe;   /* abgesetzte Abschnitte */
  --grund-3:        #e8f4fd;   /* kräftigere Tönung */
  --rand:           #d9e7f4;   /* Ränder, Trennlinien */
  --rand-stark:     #bcd3e8;

  --marine:         #0b1e33;   /* Überschriften, Fußzeile */
  --marine-2:       #1b365d;
  --schrift:        #0b1e33;
  --schrift-leise:  #5f6b78;

  --akzent:         #e90b2b;
  --akzent-dunkel:  #d80927;
  --akzent-hell:    #ff2f4c;

  --gruen:          #207d10;
  --blau:           #095bb1;
  --gelb:           #ae5103;

  --breite:         1140px;
  --radius:         12px;
  --schatten:       0 2px 14px rgba(11,30,51,.07);
  --schatten-hoch:  0 10px 32px rgba(11,30,51,.13);

  /* fightergear.de nutzt Roboto und Open Sans. Beide werden hier NICHT von
     einem fremden Server nachgeladen — das würde die Datenschutzerklärung
     ungültig machen. Sind sie auf dem Gerät vorhanden, werden sie benutzt,
     sonst greift die Systemschrift. */
  --font: Roboto, "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  font-family: var(--font);
  background: var(--grund);
  color: var(--schrift);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.huelle { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 24px; }

/* --- Kopfleiste ----------------------------------------------------------- */

header.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rand);
}
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; height: 74px; }

.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--marine); }
.marke .zeichen {
  width: 38px; height: 38px; border-radius: 9px; flex: 0 0 38px;
  background: linear-gradient(135deg, var(--akzent), var(--akzent-dunkel));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #fff; letter-spacing: -.2px;
}
.marke .name { font-weight: 700; font-size: 20px; letter-spacing: -.3px; line-height: 1.15; }
.marke .zusatz { display: block; font-size: 11px; color: var(--schrift-leise); font-weight: 500; letter-spacing: .4px; text-transform: uppercase; }

nav.haupt { display: flex; align-items: center; gap: 2px; }
nav.haupt a {
  color: var(--marine); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 9px 14px; border-radius: 8px; transition: color .15s, background .15s;
}
nav.haupt a:hover { color: var(--akzent); background: var(--grund-2); }
nav.haupt a.aktiv { color: var(--akzent); background: var(--grund-3); }
nav.haupt a.knopf {
  background: var(--akzent); color: #fff; margin-left: 10px; padding: 10px 20px;
  font-weight: 600;
}
nav.haupt a.knopf:hover { background: var(--akzent-dunkel); color: #fff; }
nav.haupt a.zurueck { color: var(--schrift-leise); font-size: 14px; }

.menuknopf {
  display: none; background: none; border: 1px solid var(--rand); color: var(--marine);
  height: 42px; padding: 0 14px; border-radius: 9px; cursor: pointer; line-height: 1;
  align-items: center; gap: 9px; font-family: inherit;
}
.menuknopf .strich { font-size: 19px; }
.menuknopf .wort { font-size: 14.5px; font-weight: 600; letter-spacing: .2px; }
.menuknopf[aria-expanded="true"] { background: var(--marine); border-color: var(--marine); color: #fff; }

/* Die Unterpunkte der Sektion im Klappmenue. Auf dem Rechner unsichtbar -
   dort steht die Unterleiste unter der Kopfzeile. */
.unterpunkte { display: none; }

/* --- Kopfleiste auf Tablets und Telefonen ---------------------------------
   Der Umbruchpunkt liegt bei 1024 und nicht bei 700 Pixeln. Ein iPad im
   Hochformat hat 768, im Querformat 1024 — bei einem 700er-Umbruch bleibt
   dort die einzeilige Leiste stehen, und weil Logo, fünf Menüpunkte, die
   Schaltfläche und die Sprachwahl nicht nebeneinander passen, verschwinden
   Punkte aus dem Bild. Genau das war der Fehler.

   Ab hier gilt: Hamburger-Knopf sichtbar, Menü klappt über die volle Breite
   auf, die Sprachwahl klappt mit auf. Die Unterleiste der Sektion wird
   scrollbar statt abgeschnitten. */

@media (max-width: 1120px) {
  .menuknopf { display: inline-flex; order: 3; }
  .kopf .huelle { flex-wrap: wrap; }

  nav.haupt {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--rand);
    flex-direction: column; align-items: stretch; padding: 12px; gap: 2px;
    box-shadow: var(--schatten-hoch); z-index: 70;
    max-height: calc(100vh - 74px); overflow-y: auto;
  }
  nav.haupt.offen { display: flex; }
  nav.haupt a { padding: 13px 16px; font-size: 16px; }
  nav.haupt a.knopf { margin-left: 0; margin-top: 6px; text-align: center; justify-content: center; }

  /* Die Sprachwahl sitzt zwischen Menüknopf und Rand — dort ist zu wenig
     Platz. Sie rutscht deshalb in dieselbe Klappe. */
  .sprachwahl { order: 2; margin-left: auto; margin-right: 8px; }
  .sprachwahl summary { padding: 8px 12px; font-size: 13.5px; }
  .sprachliste { grid-template-columns: 1fr 1fr; min-width: 240px; }

  /* Die Unterpunkte der Sektion, eingerueckt unter ihrem Hauptpunkt. */
  .unterpunkte {
    display: flex; flex-direction: column; gap: 1px;
    margin: 2px 0 8px 14px; padding-left: 14px;
    border-left: 2px solid var(--rand);
  }
  .unterpunkte a {
    padding: 10px 14px !important; font-size: 14.5px !important;
    color: var(--schrift-leise) !important; border-radius: 7px;
  }
  .unterpunkte a:hover { color: var(--akzent) !important; background: var(--grund-2); }
  .unterpunkte a.aktiv { color: var(--akzent) !important; background: var(--grund-3); font-weight: 600; }

  /* Die Unterleiste bricht um, statt seitlich zu verschieben. Vorher war sie
     scrollbar - mit ausgeblendeter Bildlaufleiste. Von vier Punkten waren
     zwei zu sehen, und nichts deutete darauf hin, dass es mehr gibt. */
  .unterleiste { position: static; }
  .unterleiste .huelle { height: auto; padding-top: 9px; padding-bottom: 9px; gap: 12px; }
  .unterleiste nav { overflow-x: visible; flex-wrap: wrap; gap: 4px; }
  .unterleiste nav a { white-space: nowrap; }
}

@media (max-width: 760px) {
  .unterleiste .huelle { flex-direction: column; align-items: flex-start; gap: 8px; }
  .unterleiste nav { width: 100%; }
  .sprachwahl summary .globus { margin: 0; }
}

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

section { padding: 84px 0; }
section.eng { padding: 56px 0; }
section.gestreift { background: var(--grund-2); border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }

h1 { font-size: clamp(33px, 5.2vw, 54px); line-height: 1.12; letter-spacing: -1.2px; font-weight: 800; color: var(--marine); }
h2 { font-size: clamp(26px, 3.4vw, 37px); line-height: 1.2; letter-spacing: -.7px; font-weight: 700; margin-bottom: 14px; color: var(--marine); }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.2px; font-weight: 700; margin-bottom: 8px; color: var(--marine); }
h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--marine); }
p  { color: var(--schrift-leise); }
p.gross { font-size: 18px; }
a  { color: var(--akzent); }
strong { color: var(--marine); }

.augenbraue {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--akzent); margin-bottom: 12px;
}
.abschnittskopf { max-width: 720px; margin-bottom: 44px; }
.abschnittskopf.mitte { margin-left: auto; margin-right: auto; text-align: center; }
.abschnittskopf p { font-size: 17.5px; }

/* --- Knöpfe --------------------------------------------------------------- */

.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 9px; text-decoration: none;
  font-weight: 600; font-size: 15.5px; border: 1px solid transparent;
  cursor: pointer; transition: transform .12s, background .15s, border-color .15s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn-voll  { background: var(--akzent); color: #fff; box-shadow: 0 3px 12px rgba(233,11,43,.24); }
.btn-voll:hover { background: var(--akzent-dunkel); box-shadow: 0 5px 18px rgba(233,11,43,.3); }
.btn-rand  { background: #fff; color: var(--marine); border-color: var(--rand-stark); }
.btn-rand:hover { border-color: var(--marine); background: var(--grund-2); }
.btn-still { background: var(--grund-3); color: var(--marine); border-color: var(--rand); }
.btn-still:hover { background: #d8ecfb; }
.btn-marine { background: var(--marine); color: #fff; }
.btn-marine:hover { background: var(--marine-2); color: #fff; }

/* --- Startbereich --------------------------------------------------------- */

.start { position: relative; padding: 92px 0 76px; overflow: hidden; background: var(--grund); }
.start::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 900px 420px at 78% -10%, rgba(232,244,253,.95), transparent 70%),
    radial-gradient(ellipse 620px 340px at 8% 0%, rgba(233,11,43,.06), transparent 68%);
}
.start .huelle { position: relative; }
.start h1 { max-width: 900px; margin-bottom: 20px; }
.start h1 .hell { color: var(--akzent); }
.start p.gross { max-width: 660px; font-size: 19px; }

.merker {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--rand-stark);
  padding: 7px 15px 7px 11px; border-radius: 99px;
  font-size: 13.5px; color: var(--schrift-leise); margin-bottom: 24px;
  box-shadow: var(--schatten);
}
.merker .punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 3px rgba(32,125,16,.16); }

/* --- Kennzahlen ----------------------------------------------------------- */

.zahlen {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rand); border: 1px solid var(--rand);
  border-radius: var(--radius); overflow: hidden; margin-top: 52px;
  box-shadow: var(--schatten);
}
.zahlen div { background: #fff; padding: 26px 22px; min-width: 0; }
.zahlen .wert {
  font-size: 32px; font-weight: 800; letter-spacing: -1px; color: var(--akzent); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* Ohne diese zwei Zeilen schiebt ein Wort wie „Trainerassistentinnen" die
   ganze Kachel über den Bildschirmrand hinaus — auf dem Telefon war das
   Zahlenband rechts abgeschnitten. `anywhere` bricht notfalls mitten im
   Wort, `hyphens` setzt dabei einen Trennstrich, weil <html lang="de">
   gesetzt ist. */
.zahlen .bez {
  font-size: 13.5px; color: var(--schrift-leise); margin-top: 4px;
  overflow-wrap: anywhere; hyphens: auto;
}

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

.gitter { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.karte {
  background: #fff; border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 28px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.karte:hover { border-color: var(--rand-stark); transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.karte p { font-size: 15px; }

.karte .symbol {
  width: 44px; height: 44px; border-radius: 10px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 21px;
  font-weight: 700; color: var(--akzent);
  background: rgba(233,11,43,.08); border: 1px solid rgba(233,11,43,.18);
}
.karte .symbol.b { background: rgba(9,91,177,.08);  border-color: rgba(9,91,177,.2);  color: var(--blau); }
.karte .symbol.g { background: rgba(32,125,16,.08); border-color: rgba(32,125,16,.2); color: var(--gruen); }
.karte .symbol.y { background: rgba(174,81,3,.08);  border-color: rgba(174,81,3,.2);  color: var(--gelb); }

/* --- Produktkarten (die drei Ausgaben) ------------------------------------ */

.produkt {
  background: #fff; border: 1px solid var(--rand);
  border-radius: 16px; padding: 32px; display: flex; flex-direction: column;
  position: relative; overflow: hidden; box-shadow: var(--schatten);
}
.produkt.hervor { border-color: rgba(233,11,43,.35); box-shadow: var(--schatten-hoch); }
.produkt.hervor::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--akzent), var(--akzent-dunkel));
}
.produkt .fahne {
  position: absolute; top: 18px; right: 18px; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--akzent);
  background: rgba(233,11,43,.08); border: 1px solid rgba(233,11,43,.22);
  padding: 4px 10px; border-radius: 99px;
}
.produkt h3 { font-size: 24px; margin-bottom: 4px; }
.produkt .unterzeile { font-size: 13px; color: var(--schrift-leise); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 16px; }
.produkt > p { flex: 0 0 auto; margin-bottom: 20px; font-size: 15px; }
.produkt ul { list-style: none; margin-bottom: 26px; flex: 1 1 auto; }
.produkt ul li { font-size: 14.5px; color: var(--schrift-leise); padding: 7px 0 7px 26px; position: relative; }
.produkt ul li::before {
  content: "\2713"; position: absolute; left: 0; top: 7px; color: var(--gruen); font-weight: 700; font-size: 13px;
}
.produkt ul li.nein::before { content: "\2014"; color: #9aa7b4; }
.produkt .btn { width: 100%; justify-content: center; }

/* --- Funktionslisten ------------------------------------------------------ */

.spalten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; }
.spalten h4 { display: flex; align-items: center; gap: 8px; }
.spalten ul { list-style: none; }
.spalten ul li { font-size: 14.5px; color: var(--schrift-leise); padding: 5px 0 5px 18px; position: relative; }
.spalten ul li::before { content: ""; position: absolute; left: 0; top: 14px; width: 7px; height: 2px; background: var(--akzent); border-radius: 2px; }

/* --- Wechselblöcke (Bild/Text) -------------------------------------------- */

.wechsel { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.wechsel + .wechsel { margin-top: 80px; }
.wechsel .bild {
  background: var(--grund-3); border: 1px solid var(--rand);
  border-radius: var(--radius);
  aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center;
  color: #7d8b99; font-size: 14px; text-align: center; padding: 24px; overflow: hidden;
}
.wechsel .bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wechsel .bild code { background: #fff; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }

/* --- Tabelle -------------------------------------------------------------- */

.tabellenrahmen { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
th, td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--rand); }
th { background: var(--marine); font-weight: 600; font-size: 13px; letter-spacing: .4px; text-transform: uppercase; color: #fff; }
th small { color: rgba(255,255,255,.7); }
td { color: var(--schrift-leise); }
td:first-child { color: var(--marine); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) td { background: var(--grund-2); }
tbody tr:hover td { background: var(--grund-3); }
.ja   { color: var(--gruen); font-weight: 700; }
.nein { color: #9aa7b4; }

/* --- Wochenplan ----------------------------------------------------------- */
/* Nach Tagen gegliedert statt nach Hallen: Wer montags Zeit hat, liest einen
   Block und ist fertig. Zwei Spalten ab 860 px, darunter untereinander. */

.wochenplan { display: grid; gap: 22px; margin-bottom: 36px; }
@media (min-width: 860px) { .wochenplan { grid-template-columns: 1fr 1fr; } }

.tagblock h3 {
  margin: 0 0 10px; font-size: 15px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--marine); border-bottom: 2px solid var(--akzent); padding-bottom: 7px;
  display: inline-block;
}
/* Die Tagestabellen sind schmal genug fuer ein Telefon - die 640-px-Mindest-
   breite der grossen Tabellen wuerde hier nur Querscrollen erzwingen. */
.tagesplan { min-width: 0; font-size: 14.5px; }
.tagesplan td { padding: 11px 14px; vertical-align: top; }
.tagesplan td.zeit {
  white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--marine); font-weight: 600; width: 1%;
}
.tagesplan td:nth-child(2) { color: var(--schrift); overflow-wrap: anywhere; }
.tagesplan td.ort { color: var(--schrift-leise); font-size: 13.5px; white-space: nowrap; }
.tagesplan td.ort.eigen { color: var(--blau); font-weight: 600; }
.tagesplan .stadt { display: block; font-size: 12px; opacity: .8; }
.tagesplan .takt {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--grund-3); color: var(--blau); font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .tagesplan td.ort { white-space: normal; }
  .tagesplan td { padding: 10px 11px; }
}

.ortsliste {
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--grund-2); padding: 20px 24px; margin-bottom: 28px;
}
.ortsliste h4 { margin: 0 0 12px; font-size: 14px; text-transform: uppercase; letter-spacing: .6px; }
.ortsliste ul { margin: 0; padding-left: 20px; }
.ortsliste li { color: var(--schrift-leise); margin-bottom: 7px; font-size: 14.5px; }
.ortsliste li b { color: var(--marine); }
.eigen-hinweis { color: var(--blau); font-weight: 600; font-size: 13px; }

/* --- Umschaltbare Auswahl (Startseite und Ausrüstung) --------------------- */
/* Beide Widgets stehen vollständig im Quelltext. Erst wenn das Skript läuft,
   setzt es .umschaltbar — und erst dann wird ausgeblendet. Ohne JavaScript
   bleibt einfach alles untereinander sichtbar, was auch eine brauchbare
   Seite ergibt. */

.tagleiste, .sportleiste {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px;
}
.tagknopf, .sportknopf {
  font: inherit; cursor: pointer; border: 1px solid var(--rand-stark);
  background: #fff; color: var(--schrift-leise); border-radius: 999px;
  padding: 9px 16px; display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, border-color .15s, color .15s;
}
.tagknopf:hover, .sportknopf:hover { border-color: var(--marine); color: var(--marine); }
.tagknopf:focus-visible, .sportknopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.umschaltbar .tagknopf.aktiv, .umschaltbar .sportknopf.aktiv {
  background: var(--marine); border-color: var(--marine); color: #fff; font-weight: 600;
}
/* Der heutige Tag bleibt erkennbar, auch wenn jemand weiterklickt. */
.tagknopf.istheute:not(.aktiv) { border-color: var(--akzent); color: var(--akzent); }
.tagknopf.istheute::after {
  content: "heute"; font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
  opacity: .75;
}
.umschaltbar .tagknopf.istheute.aktiv::after { color: rgba(255,255,255,.8); }

.tk-kurz { display: none; font-weight: 600; }
@media (max-width: 620px) {
  .tk-lang { display: none; }
  .tk-kurz { display: inline; }
  .tagleiste { gap: 6px; }
  .tagknopf { padding: 9px 13px; }
  .tagknopf.istheute::after { content: "•"; }
}

.sk-symbol { font-size: 16px; line-height: 1; }

/* --- Tagestafeln auf der Startseite --------------------------------------- */

.umschaltbar .tagtafel, .umschaltbar .sportblock { display: none; }
.umschaltbar .tagtafel.aktiv { display: grid; }
.umschaltbar .sportblock.aktiv { display: block; }

.tagtafel { display: grid; gap: 10px; margin-bottom: 26px; }
/* Ohne Skript trennt die Überschrift die Tage; mit Skript sagt der Knopf
   bereits, welcher Tag zu sehen ist. */
.tt-kopf { margin: 6px 0 4px; font-size: 15px; text-transform: uppercase; letter-spacing: .6px; }
.umschaltbar .tt-kopf { display: none; }

.einheit {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 18px;
  align-items: baseline; text-decoration: none;
  background: #fff; border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 14px 18px; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.einheit:hover {
  border-color: var(--rand-stark); transform: translateY(-1px); box-shadow: var(--schatten);
}
.einheit:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.e-zeit {
  color: var(--marine); font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; font-size: 15px;
}
.e-was { color: var(--schrift); overflow-wrap: anywhere; }
.e-ort { color: var(--schrift-leise); font-size: 13.5px; white-space: nowrap; }

@media (max-width: 620px) {
  .einheit { grid-template-columns: 1fr; gap: 3px; padding: 13px 15px; }
  .e-ort { white-space: normal; }
}

.heutefuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  border-top: 1px solid var(--rand); padding-top: 22px;
}
.heutefuss p { margin: 0; flex: 1 1 320px; color: var(--schrift-leise); font-size: 15px; }

/* --- Sortiment nach Sportart ---------------------------------------------- */

.sportkopf {
  display: flex; gap: 18px; align-items: flex-start;
  margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--rand);
}
.sportkopf h3 { margin: 0 0 6px; }
.sportkopf p { margin: 0; color: var(--schrift-leise); max-width: 62ch; }
.sportkopf .symbol { flex: none; }

.warengitter { display: grid; gap: 18px; }
@media (min-width: 700px)  { .warengitter { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .warengitter { grid-template-columns: repeat(3, 1fr); } }

.ware {
  background: #fff; border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 20px 22px;
}
.ware h4 { margin: 0 0 8px; font-size: 16px; color: var(--marine); }
.ware p { margin: 0; color: var(--schrift-leise); font-size: 14.5px; }
.warenmarke {
  display: inline-block; margin-top: 12px; padding: 2px 10px; border-radius: 999px;
  background: var(--grund-3); color: var(--blau); font-size: 12.5px; font-weight: 600;
}
/* Ohne Skript stehen die Sportarten untereinander und brauchen Abstand. */
.sportblock + .sportblock { margin-top: 48px; }
.umschaltbar .sportblock + .sportblock { margin-top: 0; }

/* WhatsApp-Variante des normalen Knopfes, fuer helle Abschnitte. */
.btn-wa { background: #25d366; color: #073b2c; box-shadow: 0 3px 12px rgba(37,211,102,.28); }
.btn-wa:hover { background: #1fbb59; color: #073b2c; box-shadow: 0 5px 18px rgba(37,211,102,.34); }

/* --- Foerderweg: der Guertelstrang ---------------------------------------- */
/* Die Gliederung IST die Graduierung: jede Stufe haengt an ihrer Guertelfarbe.
   Die Farben sind deshalb keine Dekoration, sondern die Information - und sie
   werden nicht aus den Themenfarben abgeleitet, sondern sind echte Daten. */

.guertelstrang { padding: 8px 0 4px; }

.stufe {
  display: grid; grid-template-columns: 92px 1fr; gap: 0 26px;
  padding-bottom: 34px; position: relative;
}
.stufe::before {
  content: ""; position: absolute; left: 45px; top: 12px; bottom: -12px;
  width: 2px; background: var(--rand); z-index: 0;
}
.stufe:last-child::before { display: none; }

.rail { position: relative; z-index: 1; text-align: center; }
.rail .alter {
  font-weight: 700; font-size: 15px; color: var(--marine);
  background: var(--grund); padding: 2px 0 6px; display: block; letter-spacing: -.2px;
}
.rail .alter .bis { color: var(--schrift-leise); font-weight: 400; }

.gurt {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto;
  border: 3px solid var(--grund); box-shadow: 0 0 0 2px var(--rand-stark);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.gurt.zweifarbig::after { content: ""; position: absolute; inset: 0 0 0 50%; }

.g-keiner      { background: var(--grund-3); }
.g-weissgelb   { background: #f4f4f2; }
.g-weissgelb.zweifarbig::after   { background: #f2d642; }
.g-gelb        { background: #f2d642; }
.g-gelborange  { background: #f2d642; }
.g-gelborange.zweifarbig::after  { background: #e8862b; }
.g-orange      { background: #e8862b; }
.g-orangegruen { background: #e8862b; }
.g-orangegruen.zweifarbig::after { background: #2e8b3d; }
.g-gruen       { background: #2e8b3d; }
.g-blau        { background: #1c5fa8; }
.g-braun       { background: #6b4423; }
.g-schwarz     { background: #14161a; }
.g-lizenz      { background: var(--grund-3); }

.gurtname {
  display: block; font-size: 11.5px; line-height: 1.25; color: var(--schrift-leise);
  margin-top: 7px; text-transform: uppercase; letter-spacing: .5px;
}

.tafel {
  background: #fff; border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 26px 28px; box-shadow: var(--schatten);
}
.tafel > h3 { margin: 0 0 6px; }
.tafel .wo {
  font-size: 13.5px; color: var(--schrift-leise); text-transform: uppercase;
  letter-spacing: .8px; margin-bottom: 14px;
}
.tafel p { margin: 0 0 14px; }
.tafel p:last-child { margin-bottom: 0; }

/* Die beiden Straenge nebeneinander: was auf der Matte passiert, und was
   daraus an Qualifikation entsteht. */
.zwei { display: grid; gap: 20px; margin-top: 20px; }
@media (min-width: 780px) { .zwei { grid-template-columns: 1fr 1fr; } }

.spalte { border-top: 3px solid var(--rand-stark); padding-top: 14px; }
.spalte.matte  { border-top-color: var(--akzent); }
.spalte.papier { border-top-color: var(--blau); }
.spalte h4 { margin: 0 0 9px; font-size: 14px; text-transform: uppercase; letter-spacing: .8px; }
.spalte.matte  h4 { color: var(--akzent); }
.spalte.papier h4 { color: var(--blau); }
.spalte p, .spalte ul { font-size: 15.5px; }
.spalte ul { margin: 0; padding-left: 19px; }
.spalte li { margin-bottom: 7px; }
.spalte li:last-child { margin-bottom: 0; }
.spalte .leer { color: var(--schrift-leise); font-style: italic; }

/* Quellenangabe unter einer Stufe - klein, aber nachpruefbar. */
.beleg {
  display: block; font-size: 12.5px; color: var(--schrift-leise); line-height: 1.45;
  margin-top: 12px; padding-left: 20px; position: relative;
}
.beleg::before {
  content: "\00a7"; position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--rand-stark); font-size: 15px;
}

.pruefen {
  border-left: 4px solid var(--gelb); background: var(--grund-2);
  padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0; margin-top: 18px;
}
.pruefen h4 { color: var(--gelb); margin: 0 0 7px; font-size: 14px;
  text-transform: uppercase; letter-spacing: .8px; }
.pruefen p { font-size: 15px; margin: 0; }
.pruefen p + p { margin-top: 10px; }

.marker {
  display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; padding: 2px 9px; border-radius: 999px;
  vertical-align: 2px; margin-left: 7px; white-space: nowrap;
}
.m-verein  { background: rgba(233,11,43,.10); color: var(--akzent); }
.m-verband { background: rgba(9,91,177,.10);  color: var(--blau); }

/* --- Foerderweg: Personen und Spartenvergleich ---------------------------- */

.namen { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 700px) { .namen { grid-template-columns: 1fr 1fr; } }
.person {
  display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start;
  background: #fff; border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 20px 22px;
}
.person .gurt { width: 34px; height: 34px; margin: 3px 0 0; }
.person h3 { margin: 0; font-size: 17px; }
.person p { font-size: 14.5px; color: var(--schrift-leise); margin: 5px 0 0; }

/* Ob eine Sparte im DOSB-System liegt, entscheidet darueber, ob eine Lizenz
   spaeter etwas wert ist - deshalb steht diese Spalte weit vorn. */
.ja-nein {
  display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.jn-ja   { background: rgba(32,125,16,.12); color: var(--gruen); }
.jn-nein { background: rgba(233,11,43,.10); color: var(--akzent); }
.jn-teil { background: rgba(174,81,3,.12);  color: var(--gelb); }

table.sparten { min-width: 800px; }
table.sparten td { font-size: 14.5px; }
table.sparten td small { display: block; color: var(--schrift-leise); font-size: 12.5px; font-weight: 400; }
table.sparten td.sparte { color: var(--marine); font-weight: 700; }

.belegblock p, .belegblock li { font-size: 14px; color: var(--schrift-leise); }
.belegblock ul { margin: 0; padding-left: 20px; }
.belegblock li { margin-bottom: 6px; }

@media (max-width: 620px) {
  .stufe { grid-template-columns: 62px 1fr; gap: 0 16px; }
  .stufe::before { left: 30px; }
  .gurt { width: 34px; height: 34px; font-size: 15px; }
  .tafel { padding: 20px 18px; }
  .rail .alter { font-size: 13.5px; }
  .gurtname { font-size: 10.5px; }
}


/* Ein Hinweis unter einer Leistungsliste, der ausdruecklich KEINE Leistung
   nennt. Er steht bewusst ausserhalb der Liste mit den Haken: In einer Liste
   liest sich alles als Gegenleistung, und eine Gegenleistung fuer eine Spende
   gefaehrdet die Gemeinnuetzigkeit. */
.keinevorteile {
  font-size: 13.5px; color: var(--schrift-leise); line-height: 1.55;
  border-top: 1px solid var(--rand); padding-top: 12px; margin: 14px 0 0;
}

/* --- Downloadzeilen ------------------------------------------------------- */

.dlblock { border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; background: #fff; box-shadow: var(--schatten); }
.dlkopf {
  background: var(--marine); padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.dlkopf h3 { margin-bottom: 2px; color: #fff; }
.dlkopf p { font-size: 14.5px; color: rgba(255,255,255,.78); }
.dlkopf .fassung {
  font-size: 12.5px; font-weight: 700; letter-spacing: .8px; color: #fff;
  border: 1px solid rgba(255,255,255,.35); padding: 5px 12px; border-radius: 99px; white-space: nowrap;
}
.dlzeile {
  display: flex; align-items: center; gap: 18px; padding: 17px 26px;
  border-bottom: 1px solid var(--rand);
}
.dlzeile:last-child { border-bottom: none; }
.dlzeile .info { flex: 1 1 auto; min-width: 0; }
.dlzeile .titel { font-weight: 600; font-size: 15.5px; color: var(--marine); }
.dlzeile .detail { font-size: 13.5px; color: var(--schrift-leise); }
.dlzeile .groesse { font-size: 13.5px; color: var(--schrift-leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dlzeile .btn { padding: 10px 18px; font-size: 14.5px; }

/* --- Hinweiskästen -------------------------------------------------------- */

.hinweis {
  border-left: 4px solid var(--akzent); background: var(--grund-2);
  padding: 20px 24px; border-radius: 0 var(--radius) var(--radius) 0; margin: 26px 0;
  border-top: 1px solid var(--rand); border-right: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
}
.hinweis.blau  { border-left-color: var(--blau); }
.hinweis.gelb  { border-left-color: var(--gelb); }
.hinweis.gruen { border-left-color: var(--gruen); }
.hinweis p { font-size: 15px; }
.hinweis p + p { margin-top: 8px; }

/* --- Ausklappbare Fragen -------------------------------------------------- */

.frage { border-bottom: 1px solid var(--rand); }
.frage summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-weight: 600; font-size: 17px; color: var(--marine);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+"; position: absolute; right: 8px; top: 16px;
  font-size: 25px; font-weight: 400; color: var(--akzent); line-height: 1;
}
.frage[open] summary::after { content: "\2212"; }
.frage summary:hover { color: var(--akzent); }
.frage .antwort { padding: 0 40px 22px 0; }
.frage .antwort p { font-size: 15.5px; }
.frage .antwort p + p { margin-top: 10px; }

/* --- Aufruf zum Handeln --------------------------------------------------- */

.aufruf {
  background: linear-gradient(135deg, var(--marine), var(--marine-2));
  border-radius: 18px; padding: 52px; text-align: center;
  box-shadow: var(--schatten-hoch);
}
.aufruf h2 { margin-bottom: 12px; color: #fff; }
.aufruf p { font-size: 17.5px; max-width: 600px; margin: 0 auto; color: rgba(255,255,255,.82); }
.aufruf .knopfreihe { justify-content: center; }
.aufruf .btn-rand { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.aufruf .btn-rand:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* --- Fußzeile ------------------------------------------------------------- */

footer.fuss { padding: 56px 0 32px; background: var(--marine); color: rgba(255,255,255,.72); }
footer.fuss .marke { color: #fff; }
footer.fuss .marke .zusatz { color: rgba(255,255,255,.6); }
.fussgitter { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.fussgitter h5 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.1px; color: #fff; margin-bottom: 14px; font-weight: 700; }
.fussgitter ul { list-style: none; }
.fussgitter ul li { margin-bottom: 9px; }
.fussgitter a { color: rgba(255,255,255,.72); text-decoration: none; font-size: 14.5px; }
.fussgitter a:hover { color: #fff; }
.fussgitter p { font-size: 14.5px; color: rgba(255,255,255,.72); }
.fussende {
  border-top: 1px solid rgba(255,255,255,.15); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13.5px; color: rgba(255,255,255,.6);
}
.fussende a { color: rgba(255,255,255,.8); }

/* --- Kleine Bildschirme --------------------------------------------------- */

@media (max-width: 940px) {
  .g4, .zahlen { grid-template-columns: repeat(2, 1fr); }
  .g3, .spalten { grid-template-columns: repeat(2, 1fr); }
  .fussgitter { grid-template-columns: 1fr 1fr; }
  .wechsel { grid-template-columns: 1fr; gap: 30px; }
  .wechsel .text { order: 2; }
  .wechsel .bild { order: 1; }
}

@media (max-width: 700px) {
  section { padding: 56px 0; }
  .start { padding: 60px 0 52px; }
  .g2, .g3, .g4, .spalten { grid-template-columns: 1fr; }
  .zahlen { grid-template-columns: 1fr 1fr; }
  .zahlen div { padding: 20px 16px; }
  .zahlen .wert { font-size: 27px; }
  .aufruf { padding: 36px 24px; }
  .dlzeile { flex-wrap: wrap; }
  .dlzeile .btn { width: 100%; justify-content: center; }
}

@media print {
  header.kopf, footer.fuss, .knopfreihe { display: none; }
  body { background: #fff; color: #000; }
  .aufruf, .dlkopf, th { background: #eee !important; color: #000 !important; }
}

/* ============================================================================
   Ergänzungen für die Gesamtseite fightergear.de
   (Startseite, Verein, Ausrüstung, Kontakt und die Unterleiste der
   Software-Sektion)
   ========================================================================== */

/* --- Untermenü der Software-Sektion --------------------------------------- */

.unterleiste {
  position: sticky; top: 74px; z-index: 90;
  background: var(--marine); border-bottom: 1px solid rgba(255,255,255,.1);
}
.unterleiste .huelle { display: flex; align-items: center; gap: 22px; height: 50px; }
.unterleiste .sektion {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
  color: rgba(255,255,255,.45); white-space: nowrap;
}
.unterleiste nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.unterleiste nav::-webkit-scrollbar { display: none; }
.unterleiste nav a {
  color: rgba(255,255,255,.7); text-decoration: none; font-size: 14.5px; font-weight: 500;
  padding: 7px 13px; border-radius: 7px; white-space: nowrap; transition: color .15s, background .15s;
}
.unterleiste nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.unterleiste nav a.aktiv { color: #fff; background: var(--akzent); }

/* --- Großer Startbereich mit Bild ----------------------------------------- */

.held {
  position: relative; overflow: hidden;
  min-height: 620px; display: flex; align-items: center;
  padding: 80px 0;
  background: var(--marine);
}
.held .bildgrund {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.held .bildgrund::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(11,30,51,.93) 0%, rgba(11,30,51,.78) 42%, rgba(11,30,51,.30) 100%),
    linear-gradient(to top, rgba(11,30,51,.65), transparent 45%);
}
.held .huelle { position: relative; z-index: 2; }
.held .inhalt { max-width: 660px; }
.held h1 { color: #fff; margin-bottom: 20px; }
.held h1 .hell { color: var(--akzent-hell); }
.held p { color: rgba(255,255,255,.82); font-size: 19px; }
.held .augenbraue { color: var(--akzent-hell); }
.held .merker { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.85); box-shadow: none; }
.held .btn-rand { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.held .btn-rand:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* Kleinerer Startbereich für Unterseiten. */
.held.klein { min-height: 380px; padding: 64px 0; }
.held.klein h1 { margin-bottom: 14px; }

/* --- Die drei Säulen auf der Startseite ----------------------------------- */

.saeulen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.saeule {
  background: #fff; border: 1px solid var(--rand); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.saeule:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); border-color: var(--rand-stark); }
.saeule .bild { aspect-ratio: 16/10; background: var(--grund-3); background-size: cover; background-position: center; }
.saeule .text { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1 1 auto; }
.saeule .nummer {
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--akzent); margin-bottom: 8px;
}
.saeule h3 { margin-bottom: 10px; }
.saeule p { font-size: 15px; flex: 1 1 auto; margin-bottom: 18px; }
.saeule .weiter {
  font-weight: 600; font-size: 15px; color: var(--akzent); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.saeule .weiter:hover { gap: 11px; }
.saeule.bald { opacity: .78; }
.saeule.bald .weiter { color: var(--schrift-leise); pointer-events: none; }

/* --- Bild im Wechselblock ------------------------------------------------- */

.wechsel .bild.foto { padding: 0; border: 0; box-shadow: var(--schatten-hoch); }
.wechsel .bild.foto img { border-radius: var(--radius); }

/* --- Zahlenband auf dunklem Grund ----------------------------------------- */

.band { background: var(--marine); padding: 54px 0; }
.band .zahlen { margin-top: 0; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.12); box-shadow: none; }
.band .zahlen div { background: var(--marine); }
.band .zahlen .wert { color: #fff; }
.band .zahlen .bez { color: rgba(255,255,255,.62); }

/* --- Kontaktangaben ------------------------------------------------------- */

.kontaktliste { list-style: none; }
.kontaktliste li { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--rand); }
.kontaktliste li:last-child { border-bottom: none; }
.kontaktliste .was { font-weight: 600; color: var(--marine); min-width: 130px; flex: 0 0 130px; }
.kontaktliste .wert { color: var(--schrift-leise); }
.kontaktliste a { color: var(--akzent); text-decoration: none; }
.kontaktliste a:hover { text-decoration: underline; }

/* --- Hinweis auf erzeugte Bilder ------------------------------------------ */

.bildhinweis {
  font-size: 12.5px; color: var(--schrift-leise); text-align: center;
  padding: 14px 0; border-top: 1px solid var(--rand);
}

@media (max-width: 1120px) {
  .saeulen { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .held { min-height: 480px; padding: 56px 0; }
  .held.klein { min-height: 300px; padding: 44px 0; }
  .held p { font-size: 17px; }
  .kontaktliste li { flex-direction: column; gap: 3px; }
  .kontaktliste .was { flex-basis: auto; }
}

/* --- Vereinswappen in Kopf- und Fußzeile ---------------------------------- */
.marke .wappen { height: 46px; width: auto; flex: 0 0 auto; display: block; }
footer.fuss .marke .wappen { filter: drop-shadow(0 0 6px rgba(255,255,255,.25)); }
@media (max-width: 700px) { .marke .wappen { height: 40px; } }

/* --- Zwei Zeichen in der Kopfleiste --------------------------------------- */
/* Links die Marke Fighter Gear, rechts daneben das Vereinswappen mit dem
   Namen des Trägers. Das Logo enthält den Schriftzug bereits — deshalb steht
   daneben der Verein und nicht noch einmal „Fighter Gear“. */

.marke { gap: 11px; }
.marke .logo-fg { height: 52px; width: auto; flex: 0 0 auto; display: block; }
.marke .wappen  { height: 44px; width: auto; flex: 0 0 auto; display: block; }
.marke .trenner {
  width: 1px; height: 34px; background: var(--rand-stark); flex: 0 0 1px;
}
.marke .traeger .name   { font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; }
.marke .traeger .zusatz { font-size: 11px; letter-spacing: .5px; }

footer.fuss .marke .trenner { background: rgba(255,255,255,.28); }
footer.fuss .marke .traeger .name { color: #fff; }

@media (max-width: 860px) {
  /* Auf schmalen Bildschirmen zählt die Marke — der Vereinsname weicht,
     das Wappen bleibt. */
  .marke .traeger { display: none; }
  header.kopf .marke .trenner { display: none; }
  .marke .logo-fg { height: 46px; }
  .marke .wappen  { height: 38px; }
}

/* --- Bildschirmfotos aus der Anwendung ------------------------------------ */
/* Anders als bei einem Foto darf hier nichts abgeschnitten werden — sonst
   fehlt genau die Spalte, um die es im Text geht. Deshalb `contain` statt
   `cover`, mit dunklem Grund darunter. */
.wechsel .bild.schirm {
  padding: 0; border: 1px solid var(--rand); background: var(--marine);
  box-shadow: var(--schatten-hoch); aspect-ratio: 1598/947;
}
.wechsel .bild.schirm img { object-fit: contain; border-radius: var(--radius); }

/* --- Karte mit Bild (Sportangebot) ---------------------------------------
   Die normale .karte hat Innenabstand. Für ein randloses Bild oben muss der
   Abstand nach innen wandern, deshalb die eigene Variante statt eines
   negativen Randes — der bricht beim Umbruch auf schmalen Bildschirmen. */

.karte.mitbild { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.karte.mitbild .foto {
  aspect-ratio: 4 / 3; background-size: cover; background-position: center;
  background-color: var(--grund-3); border-bottom: 1px solid var(--rand);
}
.karte.mitbild .rumpf { padding: 24px 24px 22px; display: flex; flex-direction: column; flex: 1; }
.karte.mitbild h3 { margin: 0 0 8px; }
.karte.mitbild p  { margin: 0 0 14px; }
.karte .fakten {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rand);
  font-size: 13.5px; color: var(--schrift-leise); line-height: 1.7;
}
.karte .fakten b { color: var(--schrift); font-weight: 600; }

/* --- Zeitleiste (Chronik) -------------------------------------------------
   Eine durchgehende Linie links, die Jahreszahl sitzt darauf. Bei schmalen
   Bildschirmen rutscht die Zahl über den Text, sonst bleibt vom Text nichts. */

.zeitleiste { position: relative; margin: 8px 0 0; padding-left: 132px; }
.zeitleiste::before {
  content: ""; position: absolute; left: 96px; top: 6px; bottom: 6px;
  width: 2px; background: var(--rand);
}
.zeitleiste .marke { position: relative; padding: 0 0 30px; }
.zeitleiste .marke:last-child { padding-bottom: 0; }
.zeitleiste .jahr {
  position: absolute; left: -132px; top: 0; width: 84px; text-align: right;
  font-weight: 700; font-size: 19px; color: var(--marine);
  font-variant-numeric: tabular-nums;
}
.zeitleiste .punkt {
  position: absolute; left: -41px; top: 7px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--akzent); border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--rand);
}
.zeitleiste .marke.leise .punkt { background: var(--rand-stark); }
.zeitleiste h3 { margin: 0 0 6px; font-size: 17px; }
.zeitleiste p  { margin: 0; font-size: 15px; }

@media (max-width: 700px) {
  .zeitleiste { padding-left: 26px; }
  .zeitleiste::before { left: 4px; }
  .zeitleiste .jahr { position: static; width: auto; text-align: left; display: block; margin-bottom: 2px; }
  .zeitleiste .punkt { left: -26px; top: 9px; }
}

/* --- Presseeintrag -------------------------------------------------------- */

.presse { display: flex; flex-direction: column; gap: 14px; }
.presse .eintrag {
  display: flex; gap: 20px; align-items: baseline; flex-wrap: wrap;
  padding: 18px 0; border-bottom: 1px solid var(--rand);
}
.presse .eintrag:last-child { border-bottom: 0; }
.presse .quelle {
  flex: 0 0 200px; font-weight: 600; font-size: 14px; color: var(--schrift-leise);
}
.presse .sache { flex: 1 1 320px; }
.presse .sache p { margin: 4px 0 0; font-size: 14.5px; }

/* --- Soziale Kanäle in der Fußzeile --------------------------------------- */

.kanaele { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.kanaele a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; font-size: 13.5px; text-decoration: none;
  border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.86);
  transition: border-color .15s, background .15s;
}
.kanaele a:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
.kanaele svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

/* --- Kanalkacheln ---------------------------------------------------------
   Große, gut treffbare Flächen statt kleiner Symbole. 44 Pixel sind das
   Mindestmaß für eine Schaltfläche, die sich am Telefon mit dem Daumen
   sicher treffen lässt — diese Kacheln liegen deutlich darüber. */

.kanalgitter { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kanalkachel {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  padding: 18px 20px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--rand); color: var(--schrift);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.kanalkachel:hover { border-color: var(--rand-stark); transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.kanalkachel .zeichen {
  width: 44px; height: 44px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--grund-3); color: var(--marine);
}
.kanalkachel .zeichen svg { width: 22px; height: 22px; fill: currentColor; }
.kanalkachel .was { display: flex; flex-direction: column; min-width: 0; }
.kanalkachel .dienst { font-weight: 650; font-size: 15.5px; }
.kanalkachel .konto {
  font-size: 13px; color: var(--schrift-leise);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Die Hausfarben der Dienste, damit die Kacheln auf einen Blick auseinander
   zu halten sind. Bewusst nur als Tönung — der Auftritt bleibt marine/rot. */
.kanalkachel.facebook .zeichen { background: rgba(24,119,242,.10); color: #1877f2; }
.kanalkachel.youtube  .zeichen { background: rgba(255,0,0,.09);    color: #c4302b; }
.kanalkachel.x        .zeichen { background: rgba(11,30,51,.08);   color: var(--marine); }
.kanalkachel.linkedin .zeichen { background: rgba(10,102,194,.10); color: #0a66c2; }
.kanalkachel.verein   .zeichen { background: rgba(233,11,43,.08);  color: var(--akzent); }

/* --- Videokacheln ---------------------------------------------------------
   Die Vorschaubilder liegen auf dem eigenen Webspace, siehe
   scripts/kanaele-holen.js. Beim Aufruf der Seite geht keine Anfrage an
   YouTube — erst beim Klick. */

.videogitter { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.videokarte {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden;
  background: #fff; transition: border-color .18s, transform .18s, box-shadow .18s;
}
.videokarte:hover { border-color: var(--rand-stark); transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.videokarte .vorschau {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background-size: cover; background-position: center; background-color: var(--marine);
}
.videokarte .spielen {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6);
  background: linear-gradient(180deg, rgba(11,30,51,0) 40%, rgba(11,30,51,.45) 100%);
  transition: background .18s;
}
.videokarte:hover .spielen { background: rgba(11,30,51,.32); }
.videokarte .beschriftung { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 5px; }
.videokarte .titel {
  font-weight: 600; font-size: 14.8px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.videokarte .wann { font-size: 12.8px; color: var(--schrift-leise); }

/* --- Partnerkacheln (Sponsorenseite) --------------------------------------
   Bewusst typografisch statt mit Logos: Fremde Wort-Bild-Marken dürfen nur
   mit Erlaubnis des Inhabers verwendet werden. Ein gesetzter Name ist
   rechtlich unbedenklich und sieht in einer Reihe einheitlicher als sieben
   Logos in sieben Formaten. */

.partner {
  background: #fff; border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 26px 28px; display: flex; flex-direction: column;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.partner:hover { border-color: var(--rand-stark); transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.partner .art {
  align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; padding: 5px 10px; border-radius: 999px; margin-bottom: 16px;
  background: var(--grund-3); color: var(--marine);
}
.partner .art.geld   { background: rgba(32,125,16,.09);  color: var(--gruen); }
.partner .art.sach   { background: rgba(9,91,177,.09);   color: var(--blau); }
.partner .art.rat    { background: rgba(174,81,3,.09);   color: var(--gelb); }
.partner .art.presse { background: rgba(233,11,43,.08);  color: var(--akzent); }
.partner h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.25; }
.partner .ort { font-size: 13.5px; color: var(--schrift-leise); margin-bottom: 12px; }
.partner p { margin: 0 0 14px; font-size: 15px; }
.partner .weiter { margin-top: auto; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--akzent); }
.partner .weiter:hover { text-decoration: underline; }

/* --- Auszeichnung für die tragende Förderung ------------------------------ */
.partner.tragend { border-color: var(--rand-stark); box-shadow: var(--schatten); }
.partner.tragend h3 { font-size: 23px; }

/* --- Sprachumschalter -----------------------------------------------------
   Ein <details>-Element statt eines Menüs mit Skript: Es klappt ohne
   JavaScript auf, lässt sich mit der Tastatur bedienen und wird von
   Vorlesesoftware richtig angesagt. */

.sprachwahl { position: relative; flex: none; }
.sprachwahl summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.9);
}
.sprachwahl summary::-webkit-details-marker { display: none; }
.sprachwahl summary:hover { border-color: rgba(255,255,255,.6); }
.sprachwahl .globus { font-size: 15px; line-height: 1; }
.sprachliste {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 2px;
  background: #fff; border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 8px; box-shadow: var(--schatten-hoch); min-width: 260px;
}
.sprachliste a {
  padding: 9px 12px; border-radius: 8px; text-decoration: none;
  font-size: 14.5px; color: var(--schrift); white-space: nowrap;
}
.sprachliste a:hover { background: var(--grund-2); }
.sprachliste a.hier { background: var(--grund-3); font-weight: 650; }

/* Auf schmalen Bildschirmen sitzt der Umschalter im aufgeklappten Menü und
   braucht dort keine schwebende Liste — sonst ragt sie aus dem Bild. */
/* Auf Tablets sitzt die Sprachwahl neben dem Menüknopf; eine schwebende
   Liste würde dort aus dem Bild ragen. */
@media (max-width: 1120px) {
  .sprachliste { right: 0; left: auto; max-width: calc(100vw - 32px); }
}

/* --- Hinweis auf die maßgebliche Fassung ---------------------------------- */

.uebersetzungshinweis {
  background: var(--grund-3); border-bottom: 1px solid var(--rand);
  font-size: 13.5px; color: var(--schrift-leise); padding: 10px 0;
}
.uebersetzungshinweis a { color: var(--akzent); font-weight: 600; }

/* --- Schreibrichtung von rechts nach links (Arabisch) ---------------------
   Der Browser dreht Textfluss und Ausrichtung selbst um, sobald dir="rtl"
   gesetzt ist. Nachzuhelfen ist nur dort, wo ein Abstand oder eine Linie
   fest auf einer Seite sitzt. */

[dir="rtl"] .zeitleiste { padding-left: 0; padding-right: 132px; }
[dir="rtl"] .zeitleiste::before { left: auto; right: 96px; }
[dir="rtl"] .zeitleiste .jahr { left: auto; right: -132px; text-align: left; }
[dir="rtl"] .zeitleiste .punkt { left: auto; right: -41px; }
[dir="rtl"] .karte .fakten,
[dir="rtl"] .merk { text-align: right; }
[dir="rtl"] .sprachliste { right: auto; left: 0; }
[dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 1.4rem; }

@media (max-width: 700px) {
  [dir="rtl"] .zeitleiste { padding-right: 26px; }
  [dir="rtl"] .zeitleiste::before { right: 4px; }
  [dir="rtl"] .zeitleiste .jahr { position: static; text-align: right; }
  [dir="rtl"] .zeitleiste .punkt { right: -26px; }
}

/* --- Archivscans ----------------------------------------------------------
   Ein Zeitungsausschnitt von 1954 ist hochformatig und schmal. Deshalb liegt
   das Bild links und der erschlossene Text rechts daneben — nebeneinander
   lässt sich beides zugleich lesen, untereinander nicht. */

.scangitter { display: flex; flex-direction: column; gap: 26px; }
.scan {
  margin: 0; display: grid; grid-template-columns: 300px 1fr; gap: 26px;
  background: #fff; border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 22px; align-items: start;
}
.scan > a { display: block; background: var(--grund-3); border-radius: 8px; overflow: hidden; }
.scan img {
  display: block; width: 100%; height: auto;
  transition: opacity .15s;
}
.scan > a:hover img { opacity: .85; }
.scan figcaption { min-width: 0; }
.scan .wann {
  font-weight: 700; font-size: 13px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--akzent); margin-bottom: 6px; font-variant-numeric: tabular-nums;
}
.scan h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.25; }
.scan .unterzeile { font-size: 15px; color: var(--schrift-leise); margin-bottom: 12px; font-style: italic; }
.scan p { margin: 0 0 12px; font-size: 15px; }
.scan blockquote {
  margin: 0 0 12px; padding: 10px 16px; border-left: 3px solid var(--rand-stark);
  background: var(--grund-2); font-size: 15px; color: var(--schrift);
}
.scan .namen { font-size: 14px; color: var(--schrift-leise); line-height: 1.75; }
.scan .namen b { color: var(--schrift); }
.scan .namen .mehr { font-style: italic; }
.scan .hinweis {
  margin-top: 10px; font-size: 13px; color: var(--gelb);
  padding-left: 10px; border-left: 2px solid rgba(174,81,3,.3);
}

@media (max-width: 760px) {
  .scan { grid-template-columns: 1fr; gap: 18px; }
  .scan > a { max-width: 320px; }
}

/* --- Namensregister ------------------------------------------------------- */

table.register td, table.register th { font-size: 14.5px; vertical-align: top; }
table.register .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.register .auch { font-size: 12.5px; color: var(--schrift-leise); }

/* --- WhatsApp: Probetraining ----------------------------------------------
   Die Nummer steht an genau einer Stelle im Bau-Skript. Der Text der
   Nachricht ist vorbelegt, damit niemand vor einem leeren Feld sitzt und
   überlegt, wie man so etwas anfängt — das ist die eigentliche Hürde. */

.wa-band {
  background: linear-gradient(135deg, #128c7e 0%, #075e54 100%);
  color: #fff; padding: 30px 0;
}
.wa-band .huelle { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.wa-band .text { flex: 1 1 320px; }
.wa-band h2 { color: #fff; margin: 0 0 6px; font-size: 25px; }
.wa-band p { margin: 0; color: rgba(255,255,255,.9); font-size: 15.5px; max-width: 62ch; }
.wa-knopf {
  display: inline-flex; align-items: center; gap: 11px; flex: none;
  background: #fff; color: #075e54; text-decoration: none;
  padding: 15px 26px; border-radius: 999px; font-weight: 700; font-size: 16.5px;
  box-shadow: 0 3px 16px rgba(0,0,0,.22); transition: transform .15s, box-shadow .15s;
}
.wa-knopf:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,.28); }
.wa-knopf svg { width: 23px; height: 23px; fill: #25d366; flex: none; }
.wa-knopf .klein { display: block; font-weight: 500; font-size: 12.5px; opacity: .72; }

/* Immer erreichbar, auch weit unten auf einer langen Seite. Auf schmalen
   Bildschirmen rückt er weiter nach unten, damit er die Fußzeile nicht
   verdeckt. */
.wa-schwebend {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  display: inline-flex; align-items: center; gap: 10px;
  background: #25d366; color: #fff; text-decoration: none;
  padding: 13px 20px 13px 16px; border-radius: 999px; font-weight: 650; font-size: 15px;
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
  transition: transform .15s;
}
.wa-schwebend:hover { transform: translateY(-2px); }
.wa-schwebend svg { width: 22px; height: 22px; fill: #fff; flex: none; }
@media (max-width: 700px) {
  .wa-schwebend { right: 14px; bottom: 14px; padding: 12px 16px 12px 14px; font-size: 14px; }
  .wa-schwebend .wort { display: none; }
}
@media print { .wa-schwebend, .wa-band { display: none; } }

/* --- Nachrichtenstrom ----------------------------------------------------
   Was über den Verein erscheint, an einer Stelle. Gefüllt zur Bauzeit von
   scripts/nachrichten-holen.js — keine Anfrage aus dem Browser an fremde
   Server, also auch keine Einwilligungsabfrage. */

.nachrichtenstrom { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.nachricht {
  display: flex; flex-direction: column; gap: 7px; text-decoration: none;
  background: #fff; border: 1px solid var(--rand); border-left: 3px solid var(--rand-stark);
  border-radius: var(--radius); padding: 17px 19px; color: var(--schrift);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.nachricht:hover { border-color: var(--rand-stark); transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.nachricht.bericht { border-left-color: var(--akzent); }
.nachricht.video   { border-left-color: var(--blau); }
.nachricht .marke {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--schrift-leise);
}
.nachricht.bericht .marke { color: var(--akzent); }
.nachricht.video .marke   { color: var(--blau); }
.nachricht .titel {
  font-weight: 620; font-size: 15.5px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nachricht .wann { font-size: 12.8px; color: var(--schrift-leise); margin-top: auto; padding-top: 4px; }

/* --- Vereinszeitung 1995–1999 -------------------------------------------- */

.zeitungsgitter { display: flex; flex-direction: column; gap: 26px; }
.jahrgang {
  background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 24px 26px;
}
.jahrgang > .kopf {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--rand);
}
.jahrgang > .kopf h3 { margin: 0; font-size: 22px; }
.jahrgang .umfang { font-size: 13.5px; color: var(--schrift-leise); font-variant-numeric: tabular-nums; }
.jahrgang .beitrag { padding: 14px 0; border-bottom: 1px dashed var(--rand); }
.jahrgang .beitrag:last-child { border-bottom: 0; padding-bottom: 0; }
.jahrgang .beitrag h4 { margin: 0 0 3px; font-size: 16.5px; }
.jahrgang .beitrag .wann {
  font-size: 12.5px; color: var(--akzent); font-weight: 600;
  font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.jahrgang .beitrag p { margin: 0 0 9px; font-size: 15px; }
.jahrgang .beitrag blockquote {
  margin: 0 0 9px; padding: 8px 14px; border-left: 3px solid var(--rand-stark);
  background: var(--grund-2); font-size: 14.5px;
}
.jahrgang .beitrag .namen { font-size: 13.5px; color: var(--schrift-leise); line-height: 1.7; }
.jahrgang .beitrag .namen b { color: var(--schrift); }

/* --- Terminliste ---------------------------------------------------------- */

.terminliste { display: flex; flex-direction: column; gap: 12px; }
.termin {
  display: grid; grid-template-columns: 92px 1fr; gap: 20px; align-items: center;
  background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 16px 20px;
  transition: border-color .18s;
}
.termin:hover { border-color: var(--rand-stark); }
.termin .datum {
  text-align: center; padding: 8px 6px; border-radius: 10px;
  background: var(--grund-3); font-variant-numeric: tabular-nums; line-height: 1.15;
}
.termin .datum .tag   { display: block; font-size: 25px; font-weight: 700; color: var(--marine); }
.termin .datum .monat { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .8px;
                        text-transform: uppercase; color: var(--akzent); }
.termin .datum .jahr  { display: block; font-size: 11.5px; color: var(--schrift-leise); }
.termin .datum .bis   { display: block; font-size: 11px; color: var(--schrift-leise); margin-top: 2px; }
.termin .was h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.3; }
.termin .wo { font-size: 14px; color: var(--schrift-leise); }
.termin .bereich {
  display: inline-block; margin-top: 7px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .7px; text-transform: uppercase; color: var(--blau);
  background: rgba(9,91,177,.08); padding: 3px 9px; border-radius: 999px;
}
.quellenhinweis { margin-top: 16px; font-size: 13.5px; color: var(--schrift-leise); }

@media (max-width: 620px) {
  .termin { grid-template-columns: 74px 1fr; gap: 14px; padding: 14px 16px; }
  .termin .datum .tag { font-size: 21px; }
}

/* Unter 430 Pixeln reicht auch für zwei Spalten der Platz nicht mehr, wenn
   die Beschriftung aus einem langen Wort besteht. */
@media (max-width: 430px) {
  .zahlen { grid-template-columns: 1fr; }
  .zahlen div { padding: 18px 20px; display: flex; align-items: baseline; gap: 12px; }
  .zahlen .wert { font-size: 24px; flex: 0 0 auto; }
  .zahlen .bez { margin-top: 0; }
}

/* --- Wegweiser-Karten -----------------------------------------------------
   Eine Karte, die als Ganzes ein Verweis ist. Die Trefferfläche ist damit die
   ganze Kachel und nicht nur ein Wort am Ende — auf dem Telefon der
   Unterschied zwischen „geht" und „geht nicht". */

.karte.wegweiser { display: block; text-decoration: none; color: inherit; }
.karte.wegweiser h3 { color: var(--marine); transition: color .15s; }
.karte.wegweiser:hover h3 { color: var(--akzent); }
.karte.wegweiser p { color: var(--schrift-leise); }
.karte.wegweiser::after {
  content: "\2192"; display: block; margin-top: 12px;
  font-size: 17px; color: var(--akzent); transition: transform .15s;
}
.karte.wegweiser:hover::after { transform: translateX(4px); }

/* --- Sprungmarken ---------------------------------------------------------
   Die Chronik ist lang geworden — 180 KB, einundfünfzig Stationen und
   siebenundvierzig Ausschnitte. Ohne Wegweiser am Anfang scrollt niemand bis
   zum Namensregister. Die Leiste bleibt beim Scrollen oben stehen. */

.sprungmarken {
  display: flex; flex-wrap: wrap; gap: 8px;
  position: sticky; top: 74px; z-index: 40;
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  padding: 12px 0; margin: 0 -4px;
}
.sprungmarken a {
  padding: 7px 14px; border-radius: 999px; text-decoration: none;
  font-size: 14px; font-weight: 500; color: var(--marine);
  border: 1px solid var(--rand); background: #fff;
  transition: border-color .15s, color .15s;
}
.sprungmarken a:hover { border-color: var(--akzent); color: var(--akzent); }

/* Damit ein Sprungziel nicht unter der Kopfleiste verschwindet. */
section[id] { scroll-margin-top: 130px; }

@media (max-width: 1120px) {
  .sprungmarken { position: static; backdrop-filter: none; }
  section[id] { scroll-margin-top: 90px; }
}