/* Vereinswebseite: schlicht, fürs Handy zuerst, Farben aus HUBIplan (--primaer usw.) */
/* Schriften für Designpakete (Ralf 05.11.2026): Open Sans, Roboto und die
   Schreibschrift Great Vibes liegen hier, seit 14.11.2026 auch Source Sans 3, Crimson Pro,
   Oswald, Atkinson Hyperlegible und die Fraktur UnifrakturMaguntia, weil Pakete
   keine Schriften laden dürfen und die Seite nichts von fremden Servern holt. Der Browser lädt
   eine Schrift erst, wenn ein Design sie benutzt (Lizenz SIL OFL 1.1, schriften/OFL-*.txt). */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("schriften/open-sans-400.289ab8c3689e.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("schriften/open-sans-600.a6d99d784ef0.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("schriften/open-sans-700.a957c7ebe6c1.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("schriften/roboto-400.4279528ce0e7.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 600; font-display: swap; src: url("schriften/roboto-600.6714c03eb3c0.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("schriften/roboto-700.10a07810f28f.woff2") format("woff2"); }
@font-face { font-family: "Great Vibes"; font-style: normal; font-weight: 400; font-display: swap; src: url("schriften/great-vibes-400.51c0e8c2cd33.woff2") format("woff2"); }
/* Source Sans 3 hat kleinere Kleinbuchstaben als Open Sans; 105 % gleicht die Lesegröße an (Webseite #98) */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 105%; src: url("schriften/source-sans-3-400.27ab01c4cb50.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; size-adjust: 105%; src: url("schriften/source-sans-3-600.9a35cba76eda.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; size-adjust: 105%; src: url("schriften/source-sans-3-700.9b13bd3653e3.woff2") format("woff2"); }
/* Crimson Pro läuft deutlich kleiner als Source Sans 3; 115 % bringt die Überschriften auf die
   Buchstabenhöhe des Fließtexts (Webseite #103) */
@font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 115%; src: url("schriften/crimson-pro-400.4a08c91240c1.woff2") format("woff2"); }
@font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 600; font-display: swap; size-adjust: 115%; src: url("schriften/crimson-pro-600.cf9d5a5b57dc.woff2") format("woff2"); }
@font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 700; font-display: swap; size-adjust: 115%; src: url("schriften/crimson-pro-700.5ee351888e5c.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 400; font-display: swap; src: url("schriften/oswald-400.b2a5bf57bad8.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap; src: url("schriften/oswald-600.3ab06adc1658.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("schriften/oswald-700.665f37b2d0e8.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("schriften/atkinson-hyperlegible-400.f1f8a8210104.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("schriften/atkinson-hyperlegible-700.13a58e05dfd2.woff2") format("woff2"); }
@font-face { font-family: "UnifrakturMaguntia"; font-style: normal; font-weight: 400; font-display: swap; src: url("schriften/unifraktur-maguntia-400.6179be6f8c01.woff2") format("woff2"); }
:root {
  --primaer: #1f4e2c;
  --auf-primaer: #fff;
  --akzent: #c9a227;
  /* Text in Vereinsfarbe (Links, Aufklapper): abgedunkelt auf 4,5 : 1 (site.link_color) */
  --link: #1f4e2c;
  --auf-akzent: #1d2421;
  --text: #1d2421;
  --text-leise: #5a625e;
  --grund: #fbfaf7;
  --flaeche: #fff;
  --linie: #e2e0d9;
  --rund: 10px;
  /* Farben je Rolle des Designs (aus HUBIplan, siehe site.css_vars) */
  --farbe-kopf: var(--primaer); --auf-kopf: var(--auf-primaer);
  --farbe-menue: var(--akzent); --auf-menue: var(--auf-akzent);
  --farbe-zier: var(--akzent); --auf-zier: var(--auf-akzent);
  --farbe-fuss: #1d2421; --auf-fuss: #fff;
  --farbe-band: var(--primaer); --auf-band: var(--auf-primaer);
  --farbe-band2: var(--primaer); --auf-band2: var(--auf-primaer);
  --farbe-datum: var(--primaer); --auf-datum: var(--auf-primaer);
  --schrift-titel: inherit;
  --breite: 64rem;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--grund);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; padding-top: 1.5rem; padding-bottom: 3rem; }
img { max-width: 100%; height: auto; }
/* Regel von Ralf: Links nie unterstrichen; erkennbar an Farbe und Stärke */
a { color: var(--link); }
a, a:hover, a:focus { text-decoration: none; }
/* Ohne Unterstreichung sind Links im Inhalt immer fett (WCAG 1.4.1: Merkmal neben der Farbe) */
main a, .fuss a { font-weight: 600; }
a:hover { opacity: .8; }
/* Fokusrahmen: im Inhalt in abgedunkelter Vereinsfarbe, im farbigen Kopf in dessen
   Schriftfarbe, im dunklen Fuß weiß; jeweils mind. 3 : 1 (WCAG 1.4.11, 2.4.7) */
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.kopf :focus-visible { outline-color: var(--auf-kopf); }
.kopf .menue nav :focus-visible { outline-color: var(--link); }
.fuss :focus-visible { outline-color: var(--auf-fuss); }
h1, h2, h3 { line-height: 1.25; margin: 1.6em 0 .5em; font-family: var(--schrift-titel); }
h1 { font-size: clamp(1.6rem, 4.5vw, 2.3rem); margin-top: .3em; }
/* Kleine Überschriften deutlich über dem Fließtext (17 px): h3 rund das 1,2-Fache (Webseite #103) */
h2 { font-size: 1.45rem; }
h3 { font-size: 1.25rem; margin-top: 0; }
/* Tabellen in der Größe des Fließtexts (Webseite #98): Ergebnisse sind Inhalt, keine Nebensache */
table { border-collapse: collapse; width: 100%; margin: .5rem 0 1rem; font-size: 1em; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
/* Flächenfarbe der Einheit (Farbrolle „Flächen und Tabellenzeilen“): jede zweite Zeile */
table:not(.monatskalender) > tbody > tr:nth-child(even) > :is(td, th) { background: var(--zeile, transparent); }
/* Ämter- und Würdenlisten: überall gleiche Spaltenbreiten (Ralf 31.10.) */
.zeitliste { table-layout: fixed; }
.zeitliste th:first-child { width: 10rem; }
th { color: var(--text-leise); font-weight: 600; }
code { word-break: break-all; font-size: .85em; }

.breite { width: 100%; max-width: var(--breite); margin: 0 auto; padding-left: 16px; padding-right: 16px; }
/* Kleiner Text folgt der Schrift seiner Umgebung, bleibt aber mindestens 15 px groß (Webseite #98) */
.klein { font-size: max(.88em, .9375rem); color: var(--text-leise); }
/* HUBIplan-Zeichen im Fuß (Akte mit H): bringt den eigenen Hintergrund mit, auf hellem und dunklem Fuß erkennbar */
.hubiplan-zeichen { vertical-align: -.28em; }
.gross { font-size: 1.2rem; font-weight: 600; margin: 0; }
.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 1rem; top: 1rem; background: var(--flaeche); color: var(--link); padding: .5rem 1rem; z-index: 10; }

/* Kopf und Menü */
.vorschau-hinweis {
  background: var(--akzent); color: var(--auf-akzent); text-align: center;
  padding: .5rem 1rem; font-size: .95rem;
}
.vorschau-hinweis a { color: inherit; font-weight: 600; margin-left: .5rem; }
/* Hinweisleiste aus HUBIplan (G6): oben auf allen Seiten, Link an der Schriftstärke erkennbar */
.hinweisleiste { background: var(--primaer); color: var(--auf-primaer); text-align: center; font-size: .95rem; }
.hinweisleiste p { margin: 0 auto; padding: .5rem 1rem; }
.hinweisleiste a { color: inherit; font-weight: 700; text-decoration: none; }
.hinweisleiste a:hover { text-decoration: none; opacity: .85; }
.hinweisleiste :focus-visible { outline-color: var(--auf-primaer); }
.kopf { background: var(--farbe-kopf); color: var(--auf-kopf); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; position: relative; }
.marke { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; font-weight: 700; font-size: 1.1rem; line-height: 1.25; padding: .5rem 0; }
.marke img { width: 56px; height: 56px; object-fit: contain; flex: none; }
/* Kopfbild statt Wappen und Name: so breit wie Platz ist, höchstens in Originalgröße */
.marke.marke-bild { flex: 0 1 auto; padding: .5rem 0; }
.marke.marke-bild img { width: auto; height: auto; max-width: 100%; max-height: 10rem; object-fit: contain; }
/* Lange Vereinsnamen brechen notfalls im Wort um, statt unter den Menüknopf zu laufen */
.marke span { overflow-wrap: anywhere; hyphens: auto; }
.menue summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem;
  padding: .6rem .8rem; border-radius: var(--rund); border: 1px solid currentColor;
}
.menue summary::-webkit-details-marker { display: none; }
.menue-symbol, .menue-symbol::before, .menue-symbol::after {
  display: block; width: 20px; height: 2px; background: currentColor; position: relative; content: "";
}
.menue-symbol::before { position: absolute; top: -6px; }
.menue-symbol::after { position: absolute; top: 6px; }
.menue nav {
  position: absolute; right: 16px; top: 100%; z-index: 5; min-width: 15rem;
  background: var(--flaeche); color: var(--text); border-radius: var(--rund);
  box-shadow: 0 8px 30px rgba(0,0,0,.18); padding: .5rem;
}
.menue ul { list-style: none; margin: 0; padding: 0; }
.menue a { display: block; padding: .65rem .9rem; border-radius: 6px; text-decoration: none; color: var(--text); }
.menue a:hover { background: var(--grund); }
.menue a[aria-current="page"] { font-weight: 700; box-shadow: inset 4px 0 0 var(--farbe-menue); }
.menue-breit { display: none; flex: 1 1 auto; }
.menue-breit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: .25rem; justify-content: flex-end; }
.menue-breit a { display: block; color: var(--auf-kopf); padding: .45rem .55rem; font-size: .95rem; white-space: nowrap; border-radius: 6px; text-decoration: none; }
.menue-breit a:hover { background: color-mix(in srgb, var(--auf-kopf) 15%, transparent); }
.menue-breit a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--farbe-menue); font-weight: 700; }
/* Hervorgehobener Menüpunkt als Knopf (Ralf 10.11., z. B. „Mitglied werden“); gilt in jedem Design */
.menue-breit a.menue-knopf, .menue-breit a.menue-knopf[aria-current="page"],
.menue a.menue-knopf, .menue a.menue-knopf[aria-current="page"] {
  background: var(--farbe-menue); color: var(--auf-menue); font-weight: 700;
  border-radius: 999px; box-shadow: none; padding-left: 1rem; padding-right: 1rem;
}
.menue-breit a.menue-knopf:hover, .menue a.menue-knopf:hover { background: color-mix(in srgb, var(--farbe-menue) 85%, var(--auf-menue)); }
.menue a.menue-knopf { margin: .3rem 0; }
.menue-breit a.menue-knopf:focus-visible { outline-color: var(--auf-kopf); }
/* Untermenü (z. B. „Würdenträger“): am Bildschirm aufklappbar, im Handymenü eingerückt */
.menue-breit .hat-unter { position: relative; }
.menue-breit .untermenue summary {
  list-style: none; cursor: pointer; color: var(--auf-kopf); padding: .45rem .55rem; font-size: .95rem;
  white-space: nowrap; border-radius: 6px;
}
.menue-breit .untermenue summary::-webkit-details-marker { display: none; }
.menue-breit .untermenue summary::after { content: " ▾"; font-size: .8em; }
.menue-breit .untermenue summary:hover { background: color-mix(in srgb, var(--auf-kopf) 15%, transparent); }
.menue-breit .untermenue summary.aktiv { box-shadow: inset 0 -3px 0 var(--farbe-menue); font-weight: 700; }
.menue-breit .untermenue ul {
  position: absolute; right: 0; top: 100%; z-index: 6; min-width: 13rem; display: block;
  background: var(--flaeche); border-radius: var(--rund); box-shadow: 0 8px 30px rgba(0,0,0,.18); padding: .4rem;
}
.menue-breit .untermenue ul a { color: var(--text); white-space: normal; }
/* Aktuelle Seite im Aufklappmenü: Balken in der Menüfarbe, Schrift bleibt lesbar (Designs
   färben den aktiven Hauptpunkt sonst auch hier voll ein). Die Seitenleiste zeigt das Untermenü
   eingerückt auf der Kopffarbe und behält ihre eigenen Regeln. */
.menue-breit .untermenue ul a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--farbe-menue); }
body:not(.design-sidebar) .menue-breit .untermenue ul a[aria-current="page"] {
  background: transparent; color: var(--text); font-weight: 700; box-shadow: inset 4px 0 0 var(--farbe-menue);
}
/* Hover und Fokus deutlich: Fläche in der Menüfarbe und Balken in der Zierfarbe (#66) */
body:not(.design-sidebar) .menue-breit .untermenue ul a:hover,
body:not(.design-sidebar) .menue-breit .untermenue ul a:focus-visible {
  background: color-mix(in srgb, var(--farbe-menue) 14%, var(--flaeche)); color: var(--text);
  box-shadow: inset 4px 0 0 var(--farbe-zier);
}
.menue-breit .untermenue :focus-visible { outline-color: var(--link); }
.menue-breit .untermenue summary:focus-visible { outline-color: var(--auf-kopf); }
.menue .menue-gruppe { display: block; padding: .65rem .9rem .2rem; font-weight: 700; color: var(--text-leise, var(--text)); }
.menue ul ul { padding-left: .8rem; }
@media (min-width: 64rem) {
  .menue { display: none; }
  .menue-breit { display: block; }
}

/* Fuß */
.fuss { background: var(--farbe-fuss); color: var(--auf-fuss); font-size: .88rem; line-height: 1.45; }
.fuss a { color: var(--auf-fuss); }
.fuss-innen { padding-top: .9rem; padding-bottom: .9rem; display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; align-items: baseline; justify-content: space-between; }
.fuss .klein { color: inherit; opacity: .85; margin: 0; }
.sozial, .recht { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.fuss .klein { flex-basis: 100%; font-size: .8rem; }
.fuss .mitglied { margin: 0; }

/* Bausteine */
.knopf {
  display: inline-block; background: var(--primaer); color: var(--auf-primaer); border: 0;
  border-radius: var(--rund); padding: .65rem 1.1rem; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer; margin: .25rem .25rem .25rem 0;
}
.knopf:hover { filter: brightness(1.1); }
.knopf:disabled { opacity: .6; cursor: wait; }
.knopf.hell { background: var(--flaeche); color: var(--link); border: 2px solid var(--link); }
.klein-knopf { padding: .35rem .8rem; font-size: .9rem; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1rem 1.2rem; margin-bottom: 1rem; }
.karten { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.karten .karte { margin: 0; }
.karte > h2:first-child, .karte > section > h2:first-child { margin-top: 0; }
/* Ämter: ein Block je Amt (Ralf 31.10.) */
.aemter { grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); align-items: start; }
.aemter h2 { font-size: 1.25rem; }
.aemter .zeitliste { margin-bottom: 0; }
.aemter .zeitliste th:first-child { width: 8.5rem; }
.titelbild { margin: 0 0 1rem; }
.titelbild img { border-radius: var(--rund); width: 100%; max-height: 28rem; object-fit: cover; }
figcaption { font-size: .88rem; color: var(--text-leise); margin-top: .3rem; }
.text { max-width: 44rem; }
/* Die kurze Begrüßung auf der Startseite läuft so breit wie Titelbild und Termine. */
.begruessung .text { max-width: none; }
.text img { border-radius: var(--rund); }
.brotkrumen { margin: 0; font-size: .92rem; }
.hinweis-seite { text-align: center; padding: 3rem 0; max-width: 36rem; margin: 0 auto; }

/* Personen */
.personen { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .8rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.person { display: flex; gap: .8rem; align-items: center; }
.person img, .ohne-foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.ohne-foto { display: grid; place-items: center; background: var(--primaer); color: var(--auf-primaer); font-size: 1.6rem; font-weight: 700; opacity: .85; }

/* Termine */
.termine { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.termin { display: flex; gap: 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: .9rem 1rem; }
.termin h3 { margin: 0 0 .2rem; }
.termin p { margin: .2rem 0; }
.termin-datum { flex: none; width: 3.6rem; text-align: center; background: var(--farbe-datum); color: var(--auf-datum); border-radius: 8px; padding: .35rem 0; line-height: 1.1; align-self: flex-start; }
.termin-datum span { display: block; font-size: 1.5rem; font-weight: 700; }
.termin-datum small { text-transform: uppercase; font-size: .75rem; letter-spacing: .05em; }
.termin-datum .termin-jahr { display: block; text-transform: none; }
.termin-text { min-width: 0; }
/* Ganze Karte anklickbar, Fenster mit allen Angaben (Ralf 2026-10-31) */
.termin { cursor: pointer; }
.termin:hover { border-color: var(--primaer); }
.termin-knopf { all: unset; cursor: pointer; font: inherit; color: inherit; }
.termin-knopf:focus-visible { outline: 2px solid var(--primaer); outline-offset: 2px; border-radius: 4px; }
.termin-fenster { max-width: min(36rem, calc(100vw - 2rem)); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1.2rem 1.4rem; background: var(--flaeche); color: inherit; cursor: auto; }
.termin-fenster::backdrop { background: rgb(0 0 0 / .45); }
.termin-fenster h2 { margin-top: 0; }
.termin-fenster form { margin-top: 1rem; }
.abgesagt h3, .abgesagt .klein { text-decoration: line-through; }
.marke-abgesagt { text-decoration: none; display: inline-block; background: #a4262c; color: #fff; font-size: .75rem; padding: .1rem .5rem; border-radius: 99px; vertical-align: middle; }
.filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.abo { margin-top: 2rem; }
.qr svg { width: 160px; height: 160px; background: #fff; }

/* Kacheln (Züge) */
.kacheln { list-style: none; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); grid-auto-rows: 1fr; }
/* Alle Kacheln gleich hoch, auch wenn ein Name umbricht */
.kacheln li { display: flex; }
.kacheln li > a { flex: 1; }
.kacheln a { display: flex; gap: .8rem; align-items: center; background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--farbe-zier); border-radius: var(--rund); padding: .8rem 1rem; text-decoration: none; color: var(--text); font-weight: 600; min-height: 3.5rem; }
.kacheln a:hover { border-color: var(--primaer); }
.kacheln img { width: 48px; height: 48px; object-fit: contain; }
/* Große Kacheln (Züge): Wappen links in festem Platz (auch ohne Wappen), damit alle
   Namen auf einer Linie beginnen; breitere Kacheln, damit lange Namen höchstens zweizeilig sind (Ralf 31.10.) */
.kacheln.gross { grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }
.kacheln.gross a { gap: .8rem; padding: .8rem 1rem; line-height: 1.3; overflow-wrap: break-word; }
.kacheln.gross img, .kacheln.gross .wappen-platz { width: 60px; height: 60px; flex-shrink: 0; }
.kacheln.gross img { object-fit: contain; }
/* Platzhalter für Einheiten ohne Wappen (Webseite #89): heller Grund, Vereinszeichen blass */
.wappen-platz { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: calc(var(--rund) * .6); background: color-mix(in srgb, var(--primaer) 6%, var(--flaeche)); }
.kacheln .wappen-platz img { width: 70%; height: 70%; object-fit: contain; opacity: .22; filter: grayscale(1); }
.kacheln small { font-weight: 400; color: var(--text-leise); }
.einheit-kopf { display: flex; gap: 1.2rem; align-items: center; margin: .8rem 0 1.2rem; }
.einheit-kopf img { width: 100px; height: 100px; object-fit: contain; flex-shrink: 0; }
.karte.homepage .klein { overflow-wrap: anywhere; }
/* Homepage-Karte: Bild füllt den Platz zwischen Überschrift und Knopf, die Karte wird
   so hoch wie die Ansprechpartner daneben (Ralf 31.10.) */
.karte.homepage { display: flex; flex-direction: column; }
.karte.homepage .homepage-bild { flex: 1 1 0; min-height: 72px; display: block; margin: 0 0 1rem; }
.karte.homepage .homepage-bild img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rund); display: block; }
.karte.homepage > p:last-child { margin-top: 0; }

/* Majestäten */
.wuerde h2 { margin-top: .2em; }
.majestaet { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: .8rem; }
.majestaet img { width: 11rem; border-radius: var(--rund); }
.majestaet p { margin: .1rem 0; }
/* Eigene Seite (Würdenträger, Majestäten, Untereinheit): aktuelles Foto groß, auf der Startseite klein (Ralf 31.10.) */
.wuerde.voll .majestaet { gap: 1.5rem; margin-bottom: 1.5rem; }
.wuerde.voll .majestaet img { width: min(28rem, 100%); }
.wuerde.voll .majestaet .gross { font-size: 1.6rem; }
.chronik summary { cursor: pointer; font-weight: 600; color: var(--link); padding: .4rem 0; }

/* Formular */
.formular { display: grid; gap: .35rem; max-width: 36rem; }
.formular label { font-weight: 600; margin-top: .5rem; }
.formular input, .formular select, .formular textarea, .filter select {
  font: inherit; padding: .6rem .7rem; border: 1px solid #767c78; border-radius: 8px; background: #fff; color: var(--text); width: 100%;
}
.filter select { width: auto; }
.formular .empfaenger { margin: .5rem 0 0; }
.formular .empfaenger-titel { font-weight: 600; display: block; }
.formular .haken { font-weight: 400; display: flex; gap: .5rem; align-items: center; }
.formular .haken input { width: auto; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meldung { min-height: 1.5em; font-weight: 600; }
.meldung.fehler { color: #a4262c; }
.feld-fehler { color: #a4262c; font-weight: 600; font-size: .92rem; margin: 0; }
.formular [aria-invalid="true"] { border-color: #a4262c; border-width: 2px; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { .kopf nav, .fuss, .vorschau-hinweis, .knopf { display: none; } }

/* Social Media: Symbole (Kopf, Menü, Fuß) und große Knöpfe (Start, Züge) */
.sm-instagram { --sm: #d62976; }
.sm-facebook { --sm: #0866ff; }
.sm-tiktok { --sm: #111; }
.sm-x { --sm: #111; }
.sm-youtube { --sm: #ff0000; }
.sm-linkedin { --sm: #0a66c2; }
.sozial-symbole { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.sozial-symbole a {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  color: var(--sm, var(--primaer)); background: var(--flaeche); border: 1px solid var(--linie);
  --sm-auf: var(--flaeche);
}
.sozial-symbole a:hover { opacity: 1; background: var(--sm, var(--primaer)); color: #fff; --sm-auf: var(--sm, var(--primaer)); border-color: transparent; }
.kopf-sozial { display: none; }
.kopf-sozial .sozial-symbole { flex-wrap: nowrap; }
.kopf-sozial .sozial-symbole a, .fuss .sozial-symbole a {
  color: var(--auf-kopf); background: color-mix(in srgb, var(--auf-kopf) 12%, transparent); border-color: transparent; --sm-auf: var(--farbe-kopf);
}
.fuss .sozial-symbole a { color: var(--auf-fuss); background: color-mix(in srgb, var(--auf-fuss) 12%, transparent); --sm-auf: var(--farbe-fuss); }
.kopf-sozial .sozial-symbole a:hover, .fuss .sozial-symbole a:hover { background: #fff; border-color: var(--linie); color: var(--sm, var(--primaer)); --sm-auf: #fff; }
@media (min-width: 64rem) { .kopf-sozial { display: block; flex: none; } }
.menue nav .sozial-symbole { padding: .6rem .9rem .3rem; border-top: 1px solid var(--linie); margin-top: .4rem; }
.menue nav .sozial-symbole a { padding: 0; }
.sozial-gross { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.sozial-gross a {
  display: flex; align-items: center; gap: .8rem; height: 100%; padding: .8rem 1rem;
  border-radius: var(--rund); background: var(--sm, var(--primaer)); color: #fff; --sm-auf: var(--sm, var(--primaer));
  font-weight: 600;
}
.sozial-gross .sm-facebook, .sozial-gross .sm-youtube, .sozial-gross .sm-linkedin { --sm-auf: var(--sm); }
.sozial-gross .sm-facebook .sm-symbol, .sozial-gross .sm-youtube .sm-symbol, .sozial-gross .sm-linkedin .sm-symbol { color: #fff; }
.sozial-gross a:hover { opacity: .88; }
.sozial-gross span { display: grid; line-height: 1.25; }
.sozial-gross small { font-weight: 400; opacity: .9; }
.sm-symbol { flex: none; }
.folgen { margin-top: 2rem; }
/* PC: oben Name und Social Media, darunter das Menü (lange Vereinsnamen brechen nicht um) */
@media (min-width: 64rem) {
  .kopf-innen { flex-wrap: wrap; row-gap: 0; }
  .marke { flex: 1 1 auto; }
  .menue-breit { order: 3; flex: 1 1 100%; border-top: 1px solid color-mix(in srgb, var(--auf-kopf) 15%, transparent); padding: .3rem 0; }
  .menue-breit ul { justify-content: flex-start; margin-left: -.55rem; }
}

/* Dokumente */
.dokumente { list-style: none; padding: 0; display: grid; gap: .8rem; max-width: 48rem; grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); }
.dokumente a { display: flex; align-items: center; gap: .9rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: .8rem 1rem; color: var(--text); }
.dokumente a:hover { border-color: var(--primaer); opacity: 1; }
.dokumente a.mit-vorschau { flex-direction: column; align-items: stretch; text-align: center; }
.dok-vorschau { display: block; width: 100%; height: auto; aspect-ratio: 210 / 297; object-fit: cover; object-position: top; background: #fff; border: 1px solid var(--linie); border-radius: 4px; }
.dok-symbol { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 8px; background: var(--primaer); color: var(--auf-primaer); font-size: .75rem; font-weight: 700; }

/* Kapelle (Ralf 05.11.2026): Mitgliederlisten, Gedenken, Repertoire, Presse, Suche */
.person .instrument, .mitglied .instrument { color: var(--text-leise); font-style: italic; }
.person .anschrift { font-size: .9rem; }
.mitgliederliste { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); }
.mitglied { display: flex; align-items: center; gap: .7rem; padding: .35rem 0; border-bottom: 1px solid var(--linie); }
.mitglied > span { display: flex; flex-direction: column; }
.mitglied img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.gedenken .mitglied img { filter: grayscale(1); }
.repertoire { list-style: none; padding: 0; margin: 0; columns: 3 14rem; column-gap: 2rem; }
.repertoire li { break-inside: avoid; padding: .2rem 0; }
.repertoire .klein { display: block; color: var(--text-leise); }
.presse { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); }
.presse a { display: flex; flex-direction: column; gap: .35rem; color: var(--text); }
.presse img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border: 1px solid var(--linie); border-radius: 4px; background: #fff; }
.presse .klein { color: var(--text-leise); }
/* Suchformular: Feld und Knopf gleich hoch, auf einer Linie, gleiche Ecken (Ralf 14.11.2026).
   align-items: stretch zieht beide auf die Zeilenhöhe; der Außenabstand von .knopf entfällt,
   sonst sitzt der Knopf versetzt. Der Fokusrahmen liegt innen, damit das (per autofocus
   fokussierte) Feld nicht größer wirkt als der Knopf. */
.suche { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; margin-bottom: 1rem; }
.suche label { flex-basis: 100%; font-weight: 600; }
.suche input { flex: 1 1 8rem; min-width: 0; margin: 0; padding: .5rem .6rem; font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); }
.suche .knopf { flex: 0 0 auto; margin: 0; padding-top: 0; padding-bottom: 0; line-height: 1.2; border-radius: var(--rund); }
.suche input:focus-visible, .suche .knopf:focus-visible { outline-offset: -3px; }
.suchtreffer { list-style: none; padding: 0; }
.suchtreffer li { padding: .6rem 0; border-bottom: 1px solid var(--linie); }
/* Lupe so hoch wie die Textpunkte (Webseite #75): ein unsichtbares Zeichen gibt dem Link
   die Zeilenhöhe der anderen Menüpunkte, die Lupe steht darin mittig */
.suche-punkt a, a.kopf-suche { display: flex; align-items: center; }
.suche-punkt a::before, a.kopf-suche::before { content: "\200b"; width: 0; overflow: hidden; }
.lupe { display: block; flex: none; }
/* Suche oben rechts im Kopf (Stilregler search=header), vor Social Media; auf dem Handy
   steht sie im Menü */
.kopf-suche { color: var(--auf-kopf); padding: .45rem .55rem; border-radius: 6px; font-size: .95rem; text-decoration: none; }
.kopf-suche:hover { background: color-mix(in srgb, var(--auf-kopf) 15%, transparent); }
.kopf-suche:focus-visible { outline-color: var(--auf-kopf); }
@media (min-width: 64rem) { .kopf-sozial:has(.kopf-suche) { display: flex; align-items: center; gap: .4rem; } }
/* kleines Suchfeld im Fuß (Stilregler search=footer) */
.fuss-suche { display: flex; gap: .3rem; flex: 0 1 18rem; min-width: 0; }
.fuss-suche input { flex: 1 1 auto; min-width: 0; padding: .3rem .5rem; font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px; }
.fuss-suche button { font: inherit; font-weight: 600; padding: .3rem .7rem; border-radius: 6px; cursor: pointer; color: var(--auf-fuss); background: color-mix(in srgb, var(--auf-fuss) 14%, transparent); border: 1px solid color-mix(in srgb, var(--auf-fuss) 35%, transparent); }
.fuss-suche button:hover { background: color-mix(in srgb, var(--auf-fuss) 24%, transparent); }

/* Nur für Screenreader (z. B. Überschrift der Startseite, der Name steht im Kopf) */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Bilderkarussell: Band mit Einrasten; Knöpfe nur mit Skript, im Bild und nur sichtbar bei
   Maus darüber, Tastaturfokus oder nach Antippen (Klasse .zeigen, setzt karussell.js) */
.karussell { --karussell-hoehe: min(28rem, 60vh); position: relative; margin: 0 0 1rem; }
.karussell-band { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--rund); }
.karussell-band::-webkit-scrollbar { display: none; }
.karussell-band:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.karussell-bild { flex: 0 0 100%; scroll-snap-align: start; }
.karussell-bild .titelbild { margin: 0; }
.karussell-bild img { display: block; height: var(--karussell-hoehe); max-height: none; }
/* Steuerung steht im Quelltext vor den Bildern (zuerst erreichbar), liegt sichtbar auf dem Bild */
.karussell-steuerung { position: absolute; inset: 0 0 auto; height: var(--karussell-hoehe); z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s; }
.karussell-steuerung[hidden] { display: none; }
.karussell:hover .karussell-steuerung, .karussell:focus-within .karussell-steuerung, .karussell.zeigen .karussell-steuerung { opacity: 1; }
.karussell:hover .karussell-steuerung > *, .karussell:focus-within .karussell-steuerung > *, .karussell.zeigen .karussell-steuerung > * { pointer-events: auto; }
.karussell-steuerung .knopf-rund { position: absolute; background: rgb(255 255 255 / .88); color: #222; border-color: transparent; box-shadow: 0 1px 6px rgb(0 0 0 / .35); }
.karussell-steuerung [data-zurueck] { left: .75rem; top: 50%; transform: translateY(-50%); }
.karussell-steuerung [data-weiter] { right: .75rem; top: 50%; transform: translateY(-50%); }
.karussell-steuerung [data-pause] { right: .75rem; bottom: .75rem; }
.karussell-zaehler { position: absolute; right: 3.7rem; bottom: 1.1rem; background: rgb(0 0 0 / .55); color: #fff; padding: .1rem .5rem; border-radius: 99px; }
@media (prefers-reduced-motion: reduce) { .karussell-steuerung { transition: none; } }
.knopf-rund { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.knopf-rund:hover:not(:disabled) { border-color: var(--primaer); }
.knopf-rund:disabled { opacity: .35; cursor: default; }
.knopf-pause { font-size: .8rem; letter-spacing: -.1em; }
.knopf-rund:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

/* Aktuelles: Beiträge aus Instagram/Facebook (Bilder von HUBIplan, nichts von Meta) */
.beitraege { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.beitrag { margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.beitrag p { margin: 0; }
.beitrag-bild { position: relative; margin: -1rem -1.2rem .2rem; }
.beitrag-bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rund) var(--rund) 0 0; }
.beitrag-marke { position: absolute; right: .6rem; bottom: .6rem; background: rgba(0, 0, 0, .65); color: #fff; font-size: .8rem; padding: .15rem .5rem; border-radius: 999px; }
.beitrag-weitere { list-style: none; padding: 0; margin: 0; display: flex; gap: .3rem; }
.beitrag-weitere img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 4px; display: block; }
.beitrag-text { overflow-wrap: anywhere; }
.beitrag-mehr summary { cursor: pointer; color: var(--link); font-weight: 600; }
/* Aufgeklappt ersetzt der volle Text den Anriss, statt ihn zu wiederholen */
.beitrag-anriss:has(+ .beitrag-mehr[open]) { display: none; }
.auswahl a[aria-current="page"] { font-weight: 700; }

/* Wettbewerbsergebnisse */
.ergebnisliste { list-style: none; padding: 0; margin: 0 0 1rem; }
.ergebnisliste li { padding: .45rem 0; border-bottom: 1px solid var(--linie); }
.rangliste td:first-child { width: 4rem; white-space: nowrap; }
.rangliste .zahl { text-align: right; white-space: nowrap; }
.zustand {
  display: inline-block; font-size: .8rem; font-weight: 600; padding: .05rem .5rem;
  border-radius: 999px; border: 1px solid var(--linie); color: var(--text-leise);
}
.zustand.live { background: #b3261e; border-color: #b3261e; color: #ffffff; }
.zustand-zeile { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.titel { padding-left: 1.2rem; }

/* Zeitleiste der Chronik (Ralf 02.11.: keine Textwand). Eine Linie links mit Jahresmarken,
   je Ereignis eine Karte; ein Zeitraum hat statt des Punkts einen Balken. Kapitel sind
   Zwischenüberschriften auf der Linie. Handy: Jahr über der Karte. */
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zeitleiste-sprung ul { list-style: none; padding: 0; margin: 1.2rem 0 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.zeitleiste-sprung a { display: inline-block; padding: .3rem .75rem; border: 1px solid var(--linie); border-radius: 99px; background: var(--flaeche); color: var(--link); font-weight: 600; text-decoration: none; }
.zeitleiste-sprung a:hover { border-color: var(--primaer); }
.zeitleiste { --zl-linie: 3px; --zl-einzug: 1.6rem; position: relative; margin: 1.5rem 0 2rem; padding-left: var(--zl-einzug); }
.zeitleiste::before { content: ""; position: absolute; left: .45rem; top: .3rem; bottom: .3rem; width: var(--zl-linie); background: var(--linie); border-radius: 2px; }
.zeitleiste-abschnitt { scroll-margin-top: 1rem; }
.zeitleiste-abschnitt + .zeitleiste-abschnitt { margin-top: 1.8rem; }
.zeitleiste-kapitel { position: relative; font-size: 1.35rem; margin: 0 0 .8rem; }
.zeitleiste-kapitel::before { content: ""; position: absolute; left: calc(-1 * var(--zl-einzug) + .05rem); top: .25em; width: .9rem; height: .9rem; border-radius: 3px; background: var(--farbe-zier); }
.zeitleiste-zeitraum { display: block; font-size: .85rem; font-weight: 600; color: var(--text-leise); letter-spacing: .02em; }
.zeitleiste-kapiteltext { margin: -.3rem 0 1rem; color: var(--text-leise); }
.zeitleiste-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.zeitleiste-eintrag { position: relative; scroll-margin-top: 1rem; }
/* Marke auf der Linie: Punkt für ein Jahr, Balken über die ganze Karte für einen Zeitraum */
.zeitleiste-eintrag::before { content: ""; position: absolute; left: calc(-1 * var(--zl-einzug) + .2rem); top: .35rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--primaer); box-shadow: 0 0 0 3px var(--grund); }
.zeitleiste-eintrag.ist-zeitraum::before { border-radius: 99px; bottom: .35rem; height: auto; background: var(--primaer); opacity: .75; }
.zeitleiste-jahr { margin: 0 0 .25rem; font-weight: 700; color: var(--primaer); font-variant-numeric: tabular-nums; }
.zeitleiste-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: .75rem 1rem; display: grid; gap: .4rem; }
.zeitleiste-karte h3 { margin: 0; font-size: 1.2rem; }
.zeitleiste-karte p { margin: 0; }
.zeitleiste-bilder { justify-self: start; display: flex; flex-wrap: wrap; gap: .4rem; }
.zeitleiste-bild { display: block; line-height: 0; border-radius: 6px; overflow: hidden; }
.zeitleiste-bild img { width: 9rem; height: 6rem; object-fit: cover; }
.zeitleiste-bilder.mehrere .zeitleiste-bild img { width: 6rem; height: 4.5rem; }
/* Bildposition „groß unter dem Text“: über die volle Kartenbreite, auch auf dem Handy */
.bild-unten .zeitleiste-bilder { justify-self: stretch; display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.bild-unten .zeitleiste-bild img, .bild-unten .zeitleiste-bilder.mehrere .zeitleiste-bild img { width: 100%; height: auto; max-height: 28rem; }
.bild-unten .zeitleiste-bilder.mehrere .zeitleiste-bild img { height: 12rem; }
.zeitleiste-bild:hover img { filter: brightness(1.05); }
@media (min-width: 40rem) {
  .zeitleiste { --zl-einzug: 8.5rem; }
  .zeitleiste::before { left: 7.3rem; }
  .zeitleiste-eintrag::before { left: -1.4rem; }
  .zeitleiste-kapitel::before { left: -1.55rem; }
  .zeitleiste-jahr { position: absolute; left: calc(-1 * var(--zl-einzug)); width: 6.4rem; text-align: right; top: .1rem; }
  .zeitleiste-karte.bild-rechts, .zeitleiste-karte.bild-links { column-gap: 1rem; }
  .bild-rechts > :not(.zeitleiste-bilder) { grid-column: 1; }
  .bild-rechts .zeitleiste-bilder { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  .bild-links > :not(.zeitleiste-bilder) { grid-column: 2; }
  .bild-links .zeitleiste-bilder { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  /* Bilder neben dem Text größer (Ralf 2026-11-02): Bildspalte bis 15rem, aber höchstens gut zwei
     Fünftel der Karte, damit der Text daneben lesbar bleibt; mehrere Bilder zu zweit nebeneinander */
  .zeitleiste-karte.bild-rechts { grid-template-columns: minmax(0, 1fr) min(15rem, 40%); }
  .zeitleiste-karte.bild-links { grid-template-columns: min(15rem, 40%) minmax(0, 1fr); }
  /* Mehrere Bilder (zu zweit nebeneinander): breitere Spalte, damit jedes Bild nicht kleiner wird als nötig */
  .zeitleiste-karte.bild-rechts.mehrere-bilder { grid-template-columns: minmax(0, 1fr) min(24rem, 50%); }
  .zeitleiste-karte.bild-links.mehrere-bilder { grid-template-columns: min(24rem, 50%) minmax(0, 1fr); }
  .bild-rechts .zeitleiste-bilder, .bild-links .zeitleiste-bilder { width: 100%; }
  .bild-rechts .zeitleiste-bild, .bild-links .zeitleiste-bild { width: 100%; }
  .bild-rechts .zeitleiste-bilder.mehrere .zeitleiste-bild, .bild-links .zeitleiste-bilder.mehrere .zeitleiste-bild { width: calc(50% - .2rem); }
  .bild-rechts .zeitleiste-bild img, .bild-links .zeitleiste-bild img,
  .bild-rechts .zeitleiste-bilder.mehrere .zeitleiste-bild img, .bild-links .zeitleiste-bilder.mehrere .zeitleiste-bild img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .zeitleiste-zeitraum { display: inline; position: absolute; left: calc(-1 * var(--zl-einzug)); width: 6.4rem; text-align: right; top: .3em; }
}
/* Galerie (Ralf 05.11.2026): Alben als Kacheln mit Titelbild, Bilder als Raster */
.galerie-alben { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.galerie-alben a { display: flex; flex-direction: column; gap: .2rem; height: 100%; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; color: var(--text); padding-bottom: .7rem; }
.galerie-alben a:hover { border-color: var(--primaer); opacity: 1; }
.galerie-alben img, .galerie-ohne-bild { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: .4rem; }
.galerie-ohne-bild { background: var(--grund); }
.galerie-album-titel { font-weight: 600; padding: 0 .8rem; }
.galerie-alben .klein { padding: 0 .8rem; }
.galerie-bilder { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 45%), 1fr)); }
.galerie-bild { display: block; line-height: 0; border-radius: 6px; overflow: hidden; }
.galerie-bild img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.galerie-bild:hover { opacity: 1; }
.galerie-bild:hover img { filter: brightness(1.05); }
.bild-fenster { max-width: min(60rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); border: 1px solid var(--linie); border-radius: var(--rund); padding: .8rem; background: var(--flaeche); color: inherit; }
.bild-fenster::backdrop { background: rgb(0 0 0 / .6); }
.bild-fenster img { display: block; max-width: 100%; max-height: calc(100vh - 9rem); height: auto; margin: 0 auto; }
.bild-fenster p { margin: .5rem 0 0; }
.bild-fenster form { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; align-items: center; }
.bild-blaettern { display: inline-flex; gap: .5rem; align-items: center; margin-right: auto; }
.bild-blaettern[hidden] { display: none; }
@media print { .zeitleiste-sprung, .bild-fenster { display: none; } .galerie-bilder { grid-template-columns: repeat(4, 1fr); } }

/* Abschnitte der Startseite (G3, Ralf 10.11.2026): Breite und Hintergrund aus HUBIplan.
   Der Hintergrund kommt als style-Attribut (Palettenfarbe mit passender Schriftfarbe). */
:root { --abschnitt-hell: color-mix(in srgb, var(--primaer) 7%, var(--flaeche)); }
.abschnitt-text { max-width: 44rem; margin-left: auto; margin-right: auto; }
.abschnitt-text .text { max-width: none; }
.abschnitt-hg { padding: .4rem 1.2rem 1.2rem; border-radius: var(--rund); margin: 1.5rem 0; }
.abschnitt-hg.abschnitt-text { margin-left: auto; margin-right: auto; }
/* Textseiten (#77, #101): Der Titel steht wie auf allen Seiten an der Inhaltskante, der Text
   darunter in Lesebreite in derselben Flucht. Breite beim Text der Seite: „Textbreite“ stellt
   die Lesespalte mittig (.abschnitt-text), „volle Breite“ hebt die Lesebreite auf. */
.seite-text .text { max-width: 44rem; }
.seite-text:is(.abschnitt-text, .abschnitt-voll) .text { max-width: none; }
.abschnitt-voll { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(16px, calc(50vw - 31rem)); padding-right: max(16px, calc(50vw - 31rem)); border-radius: 0; }
/* Titelbild der Startseite in voller Breite von Rand zu Rand (Webseite #89) */
main.start > .begruessung-bilder.abschnitt-voll { padding-left: 0; padding-right: 0; }
main.start > .begruessung-bilder.abschnitt-voll :is(.karussell-band, .titelbild img, .titel-name) { border-radius: 0; }
main.start > .begruessung-bilder.abschnitt-voll .titel-name { padding-left: max(16px, calc(50vw - 31rem)); padding-right: max(16px, calc(50vw - 31rem)); }
.spalte-haupt .abschnitt-voll, .spalte-seite .abschnitt-voll { margin-left: 0; margin-right: 0; padding-left: 1.2rem; padding-right: 1.2rem; }
.abschnitt-farbig h2, .abschnitt-farbig h3, .abschnitt-farbig p, .abschnitt-farbig .klein,
.abschnitt-farbig .text a, .abschnitt-farbig figcaption { color: inherit; }
.abschnitt-farbig :focus-visible { outline-color: currentColor; }
.abschnitt-farbig .karte, .abschnitt-farbig .bildkachel { color: var(--text); }
.abschnitt-farbig .karte h3, .abschnitt-farbig .karte p, .abschnitt-farbig .bildkachel h3,
.abschnitt-farbig .bildkachel p { color: var(--text); }

/* Text mit Bild */
.text-bild-raster { display: grid; gap: 1rem 1.5rem; align-items: start; }
.text-bild-bild { margin: 0; }
.text-bild-bild img { display: block; width: 100%; border-radius: var(--rund); }
.text-bild-bild figcaption { font-size: .9rem; color: var(--text-leise); margin-top: .3rem; }
@media (min-width: 40rem) {
  .text-bild-raster.bild-half { grid-template-columns: 1fr 1fr; }
  .text-bild-raster.bild-small { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }
  .text-bild-raster.bild-right.bild-small { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
  .text-bild-raster.bild-right .text-bild-bild { order: 2; }
}
.text-bild-text > h2:first-child { margin-top: 0; }
/* Bild über oder unter dem Text: ganze Breite oder klein und mittig, auch auf dem Handy */
.text-bild-raster.bild-top, .text-bild-raster.bild-bottom { grid-template-columns: minmax(0, 1fr); }
.text-bild-raster.bild-bottom .text-bild-bild { order: 2; }
.text-bild-raster.bild-top.bild-small .text-bild-bild,
.text-bild-raster.bild-bottom.bild-small .text-bild-bild { justify-self: center; width: min(100%, 22rem); }

/* Banner: breites Bild, auf Wunsch mit einer Zeile darauf */
.banner-bild { position: relative; margin: 0; }
.banner-bild img { display: block; width: 100%; height: 14rem; object-fit: cover; border-radius: var(--rund); }
.banner-high .banner-bild img { height: min(30rem, 70vh); }
.abschnitt-voll .banner-bild img { border-radius: 0; }
.banner.abschnitt-voll { padding-left: 0; padding-right: 0; }
.banner-zeile { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem max(16px, calc(50% - 31rem)); font-family: var(--schrift-titel); font-size: clamp(1.3rem, 4vw, 2.2rem); font-weight: 700; color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / .65)); border-radius: 0 0 var(--rund) var(--rund); }
.abschnitt-voll .banner-zeile { border-radius: 0; }

/* Knopfleiste */
.knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
.knoepfe-center { justify-content: center; }
.knoepfe-right { justify-content: flex-end; }
.abschnitt-farbig .knopf { background: var(--abschnitt-auf); color: var(--abschnitt-farbe, var(--text)); }

/* Kacheln mit Bild und Ziel */
.bildkacheln { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .bildkacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .bildkacheln.spalten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.spalte-seite .bildkacheln { grid-template-columns: 1fr; }
.bildkachel { position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; display: flex; flex-direction: column; }
.bildkachel img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.bildkachel h3 { margin: .8rem 1rem .2rem; font-size: 1.25rem; }
.bildkachel p { margin: 0 1rem 1rem; color: var(--text-leise); }
.bildkachel h3 a { color: var(--link); font-weight: 700; }
/* Die ganze Kachel ist klickbar, der Link bleibt der Titel (für Screenreader) */
.bildkachel h3 a::after { content: ""; position: absolute; inset: 0; }
.bildkachel:has(a):hover { border-color: var(--primaer); }
.bildkachel:has(a:focus-visible) { outline: 3px solid var(--link); outline-offset: 2px; }
.bildkachel h3 a:focus-visible { outline: none; }

/* Hervorgehobener Termin mit Countdown */
.termin-gross { text-align: center; }
.termin-gross .countdown { font-family: var(--schrift-titel); font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 700; line-height: 1.1; margin: .2rem 0 .4rem; color: var(--farbe-datum); }
.abschnitt-farbig.termin-gross .countdown { color: inherit; }
.termin-gross-titel { font-weight: 600; font-size: 1.15rem; }
/* Weitere Abschnitte (HUBIplan ab 14.11.2026) */
.mitglied-werden-abschnitt { text-align: center; }
.spende-stand { margin: .6rem 0 1rem; }
.spende-balken { height: .9rem; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); overflow: hidden; }
.spende-balken span { display: block; height: 100%; background: var(--primaer); border-radius: inherit; }
.abschnitt-farbig .spende-balken span { background: currentColor; }
.spende-konto { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; margin: 0 0 1rem; }
.spende-konto dt { font-weight: 600; }
.spende-konto dd { margin: 0; }
.spende-konto .iban { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.zeiten-liste, .programm-liste { margin: 0 0 .8rem; }
.zeiten-liste > div, .programm-liste > div { display: grid; grid-template-columns: minmax(6rem, 30%) 1fr; gap: .2rem 1rem; padding: .45rem 0; border-bottom: 1px solid var(--linie); }
.programm-liste > div { grid-template-columns: 5rem 1fr; }
.zeiten-liste dt, .programm-liste dt { font-weight: 600; }
.zeiten-liste dd, .programm-liste dd { margin: 0; }
.programm-liste dt { font-variant-numeric: tabular-nums; }
.spalten-paar { display: grid; gap: 1rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.spalten-paar h3 { margin-top: 0; }
.tabelle-rahmen { overflow-x: auto; }
.zeitstrahl-liste { list-style: none; padding: 0 0 0 1.2rem; margin: 0 0 1rem; border-left: 3px solid var(--farbe-zier); display: grid; gap: .9rem; }
.zeitstrahl-liste li { position: relative; }
.zeitstrahl-liste li::before { content: ""; position: absolute; left: calc(-1.2rem - 7.5px); top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--farbe-zier); }
.zeitstrahl-wann { display: block; font-weight: 700; color: var(--farbe-datum); }
.abschnitt-farbig .zeitstrahl-wann { color: inherit; }
.zeitstrahl-liste p { margin: .2rem 0 0; }
.hinweis-kasten { border-left: 5px solid var(--hk-farbe); background: color-mix(in srgb, var(--hk-farbe) 10%, var(--flaeche)); color: var(--text); border-radius: var(--rund); padding: .9rem 1.2rem; }
.hinweis-kasten h2 { margin-top: 0; font-size: 1.25rem; }
.hinweis-kasten .text > :last-child { margin-bottom: 0; }
.hinweis-info { --hk-farbe: #2f6690; }
.hinweis-warning { --hk-farbe: #b5651d; }
.hinweis-success { --hk-farbe: #2e7d32; }
.bilder-abschnitt figure { margin: 0; }
.bilder-abschnitt figcaption { margin-top: .25rem; }
.galerie-bilder.bilder-einzeln { grid-template-columns: 1fr; }
.bilder-einzeln .galerie-bild img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
@media (min-width: 40rem) {
  .galerie-bilder.bilder-spalten-2 { grid-template-columns: repeat(2, 1fr); }
  .galerie-bilder.bilder-spalten-3 { grid-template-columns: repeat(3, 1fr); }
  .galerie-bilder.bilder-spalten-4 { grid-template-columns: repeat(4, 1fr); }
}
.download-liste { list-style: none; padding: 0; margin: 0 0 1rem; }
.download-liste li { padding: .45rem 0; border-bottom: 1px solid var(--linie); }
.download-liste a { font-weight: 600; }
.app-inhalt { display: grid; gap: 1rem 2rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 40rem) { .app-inhalt:has(.app-qr) { grid-template-columns: 1fr auto; } }
.app-qr { margin: 0; text-align: center; }
.app-qr svg { width: 9rem; height: 9rem; background: #fff; border-radius: var(--rund); }
.wettbewerb-abschnitt h2 + .termin-gross-titel { margin-top: -.4rem; }
/* Countdown (laufender Zähler, countdown.js) */
.countdown-abschnitt { text-align: center; }
.countdown-zaehler[hidden], .countdown-abschnitt[hidden] { display: none; }
.countdown-zaehler { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; margin: .4rem 0 .6rem; }
.countdown-teil { display: flex; flex-direction: column; align-items: center; min-width: 4.5rem; }
.countdown-zahl { font-family: var(--schrift-titel); font-size: clamp(2rem, 7vw, 3.4rem); font-weight: 700; line-height: 1.05; color: var(--farbe-datum); font-variant-numeric: tabular-nums; }
.abschnitt-farbig.countdown-abschnitt .countdown-zahl { color: inherit; }
.countdown-einheit { font-size: .95rem; color: var(--text-leise); }
.abschnitt-farbig.countdown-abschnitt .countdown-einheit { color: inherit; opacity: .85; }
.countdown-ziel { font-weight: 600; }
.countdown-danach { font-family: var(--schrift-titel); font-size: clamp(1.4rem, 4.5vw, 2.2rem); font-weight: 700; line-height: 1.2; }

/* Album-Auszug */
.album-auszug-bilder { list-style: none; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) {
  .album-auszug-bilder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.spalte-seite .album-auszug-bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.album-auszug-bilder a { display: block; }
.album-auszug-bilder img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--rund) / 2); }

/* Zitat */
.zitat figure { margin: 1.5rem auto; max-width: 40rem; text-align: center; }
.zitat blockquote { margin: 0; font-family: var(--schrift-titel); font-size: 1.35rem; line-height: 1.45; }
.zitat blockquote { quotes: "„" "“"; }
:lang(en) .zitat blockquote { quotes: "“" "”"; }
.zitat blockquote p::before { content: open-quote; }
.zitat blockquote p::after { content: close-quote; }
.zitat figcaption { margin-top: .5rem; color: var(--text-leise); }
.zitat figcaption::before { content: "– "; }
.abschnitt-farbig.zitat figcaption { color: inherit; }

/* Darstellung der festen Bereiche (Baukasten G5) */
.einleitung { margin-bottom: 1.5rem; }
.kacheln:not(.gross) .wappen-platz { display: none; }
.kacheln:not(.gross) img { width: 32px; height: 32px; }
.einheiten-liste { padding-left: 1.2rem; }
.einheiten-liste li { margin: .3rem 0; }
.einheiten-liste small { color: var(--text-leise); }
.rollenliste { margin: 0; display: grid; gap: 0; }
.rollenliste > div { display: grid; gap: .1rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--linie); }
.rollenliste dt { font-weight: 600; }
.rollenliste dd { margin: 0; }
@media (min-width: 40rem) {
  .rollenliste > div { grid-template-columns: minmax(10rem, 1fr) 2fr; }
}
/* Mauerwerk: Bilder in ihrer eigenen Höhe, spaltenweise */
.galerie-bilder.mauerwerk, .galerie-alben.mauerwerk { display: block; columns: 2 11rem; column-gap: .4rem; }
.galerie-alben.mauerwerk { column-gap: 1rem; columns: 2 15rem; }
.mauerwerk > li { break-inside: avoid; margin-bottom: .4rem; }
.galerie-alben.mauerwerk > li { margin-bottom: 1rem; }
.mauerwerk img { aspect-ratio: auto; height: auto; }
.galerie-bilder.mauerwerk img { display: block; width: 100%; object-fit: contain; }
/* Monatskalender: auf dem Handy nur die Tage mit Terminen, ab 40rem als Monatsblatt */
.monatskalender { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.monatskalender, .monatskalender tbody, .monatskalender tr, .monatskalender td { display: block; }
.monatskalender thead, .monatskalender td:not(.mit-termin) { display: none; }
.monatskalender td { padding: .5rem 0; border-bottom: 1px solid var(--linie); }
.monatskalender .tag { display: block; font-weight: 600; }
.monatskalender td.heute .tag { color: var(--primaer); }
.termine-tag { list-style: none; padding: 0; margin: .2rem 0 0; }
.termin.termin-kurz { display: block; margin: 0 0 .2rem; padding: .35rem .5rem; line-height: 1.25; border-left: 3px solid var(--farbe-datum, var(--primaer)); }
.termin-kurz .termin-knopf { text-align: left; overflow-wrap: break-word; hyphens: auto; }
.termin-kurz .zeit { color: var(--text-leise); font-variant-numeric: tabular-nums; }
.termin-kurz.abgesagt .termin-knopf { text-decoration: line-through; }
@media (min-width: 40rem) {
  .monatskalender { display: table; table-layout: fixed; }
  .monatskalender thead { display: table-header-group; }
  .monatskalender tbody { display: table-row-group; }
  .monatskalender tr { display: table-row; }
  .monatskalender td, .monatskalender td:not(.mit-termin) { display: table-cell; }
  .monatskalender th { font-weight: 600; padding: .3rem; text-align: left; color: var(--text-leise); }
  .monatskalender td { vertical-align: top; border: 1px solid var(--linie); padding: .3rem; height: 5.5rem; background: var(--flaeche); }
  .monatskalender td.fremd { background: transparent; }
  .monatskalender .tag { font-weight: 400; font-size: .9rem; }
  .monatskalender td.heute .tag { font-weight: 700; }
  .monatskalender .nur-handy { display: none; }
  .termin.termin-kurz { font-size: .85rem; padding: .2rem .3rem; border-width: 0 0 0 3px; border-radius: 0; background: var(--abschnitt-hell); }
}

/* Titelbild einer Textseite (G6): schmaler Streifen über der Überschrift */
.seiten-titelbild { margin: 0 0 1.25rem; }
.seiten-titelbild img { display: block; width: 100%; height: clamp(7rem, 22vw, 14rem); object-fit: cover; border-radius: var(--rund); }

/* Eigene Abschnitte: häufige Fragen, Partner, Anfahrt, Dokument, Video, Chronik, Zahlen, Trenner */
.frage { border-bottom: 1px solid var(--linie); }
.frage summary { cursor: pointer; font-weight: 600; color: var(--link); padding: .7rem 0; }
.frage .text { padding-bottom: .7rem; }
.partner-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr)); align-items: center; }
.partner-liste li { display: flex; justify-content: center; }
.partner-liste a { display: flex; justify-content: center; }
.partner-liste img { display: block; max-width: 100%; max-height: 5rem; width: auto; height: auto; object-fit: contain; }
.partner-name { font-weight: 600; text-align: center; }
.anfahrt address { font-style: normal; margin-bottom: .8rem; }
.anfahrt-ort { font-weight: 600; margin-bottom: .2rem; }
.video-vorschau { position: relative; display: block; border-radius: var(--rund); overflow: hidden; background: var(--abschnitt-hell); }
.video-vorschau img { display: block; width: 100%; height: auto; }
.video-vorschau .video-knopf { display: inline-block; margin: 1rem; padding: .5rem .9rem; border-radius: var(--rund); background: var(--primaer); color: var(--auf-primaer); font-weight: 600; }
.video-vorschau img + .video-knopf { position: absolute; left: 0; bottom: 0; }
.chronik-auszug-liste { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .8rem; }
.chronik-jahr { font-weight: 700; color: var(--primaer); font-variant-numeric: tabular-nums; margin-right: .3rem; }
.chronik-auszug-liste p { margin: .2rem 0 0; }
.zahlen-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); text-align: center; }
.zahlen-liste .zahl { display: block; font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 700; line-height: 1.1; color: var(--primaer); font-variant-numeric: tabular-nums; }
.zahlen-liste .zahl-text { display: block; color: var(--text-leise); }
.trenner hr { border: 0; border-top: 1px solid var(--linie); margin: 0; }
.trenner-small { padding: .5rem 0; }
.trenner-large { padding: 2rem 0; }

/* Vorschau in HUBIplan: die Stelle, die ein Stilregler gerade geändert hat, leuchtet kurz auf
   (Adresse mit #kopf, #fuss oder #inhalt; Ralf 14.11.2026). Nur in der Vorschau. */
html[data-vorschau] :is(#kopf, #fuss, #inhalt) { scroll-margin-top: 5rem; }
html[data-vorschau] :is(#kopf, #fuss, #inhalt):target { animation: vorschau-zeigen 2s ease-out 1; }
@keyframes vorschau-zeigen {
  0%, 40% { outline: 4px solid var(--akzent); outline-offset: -4px; }
  100% { outline: 4px solid transparent; outline-offset: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-vorschau] :is(#kopf, #fuss, #inhalt):target { animation: none; outline: 4px solid var(--akzent); outline-offset: -4px; }
}