@font-face { font-family: Vollkorn; font-weight: 700; font-display: swap; src: url(/fonts/vollkorn-700.woff2) format('woff2'); }
@font-face { font-family: Vollkorn; font-weight: 900; font-display: swap; src: url(/fonts/vollkorn-900.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-display: swap; src: url(/fonts/sourcesans-400.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 700; font-display: swap; src: url(/fonts/sourcesans-700.woff2) format('woff2'); }

/* Farben aus dem gestickten Wappen und den Uniformen */
:root {
  --gold: #f4c531;
  --gruen: #1c6349;
  --tanne: #10382b;
  --tinte: #1b2622;
  --grau: #56635d;
  --linie: #d9e2dc;
  --hauch: #eef3ef;
  --weiss: #ffffff;
  --rand: clamp(16px, 4vw, 48px);
  --breit: 1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--weiss); color: var(--tinte); font: 400 1.1875rem/1.55 'Source Sans 3', system-ui, sans-serif; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--gruen); text-underline-offset: .18em; }
a:hover { color: var(--tanne); }
:focus-visible { outline: 3px solid var(--tanne); outline-offset: 2px; }
h1, h2, h3 { font-family: Vollkorn, Georgia, serif; line-height: 1.12; margin: 0; color: var(--tanne); text-wrap: balance; }
h1 { font-weight: 900; font-size: clamp(2.5rem, 7vw, 4.75rem); letter-spacing: -.012em; }
h2 { font-weight: 900; font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h3 { font-weight: 700; font-size: 1.4rem; }
p, ul, dl { margin: 0 0 1em; }
.klein { font-size: 1rem; color: var(--grau); }
.innen { max-width: var(--breit); margin-inline: auto; padding-inline: var(--rand); }
.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 8px; top: 8px; z-index: 20; background: var(--weiss); padding: 8px 12px; }

/* Kopf */
.kopf { background: var(--weiss); position: relative; z-index: 10; }
.kopf .innen { display: flex; align-items: center; gap: 24px; justify-content: space-between; min-height: 76px; }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tanne); font: 700 1.2rem/1.1 Vollkorn, Georgia, serif; }
.marke img { width: 44px; height: 50px; mix-blend-mode: multiply; }
.menuknopf { display: none; font: 700 1.0625rem 'Source Sans 3', sans-serif; background: none; color: var(--tanne); border: 2px solid var(--tanne); border-radius: 4px; padding: 8px 14px; cursor: pointer; }
.nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav a, .nav summary { display: block; padding: 8px 10px; color: var(--tinte); text-decoration: none; cursor: pointer; font-size: 1.0625rem; border-bottom: 3px solid transparent; }
.nav summary { list-style: none; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after { content: ""; display: inline-block; margin-left: 7px; vertical-align: .18em; border: 5px solid transparent; border-top-color: currentColor; border-bottom: 0; }
.nav a:hover, .nav summary:hover { color: var(--gruen); }
.nav [aria-current], .nav .aktiv > summary { border-bottom-color: var(--gold); font-weight: 700; }
.nav details { position: relative; }
.nav details ul { position: absolute; top: 100%; left: 0; display: block; min-width: 190px; padding: 6px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px; }

/* Startseite: das Wappen als Bühne */
.buehne { background: var(--gold); position: relative; }
.buehne .innen { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(36px, 6vw, 72px) 0; }
.buehne h1 { font-size: clamp(3rem, 6.3vw, 5.6rem); line-height: 1; }
.buehne .unterzeile { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.35; margin: 20px 0 0; max-width: 28ch; color: var(--tanne); }
.schild { margin-bottom: -56px; position: relative; z-index: 2; max-width: 520px; justify-self: end; width: 100%; }
.naechster { display: block; margin: clamp(28px, 4vw, 44px) 0 clamp(36px, 6vw, 72px); padding-top: 14px; border-top: 3px solid var(--tanne); max-width: 480px; color: var(--tanne); text-decoration: none; }
.naechster:hover { color: var(--tanne); }
.naechster small { display: block; font-size: 1rem; }
.naechster strong { display: block; font: 900 clamp(1.6rem, 3vw, 2.25rem)/1.15 Vollkorn, Georgia, serif; }
.naechster span { display: block; font-size: 1.125rem; }
.naechster:hover strong { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; }

.treffen { padding-block: clamp(84px, 9vw, 110px) clamp(40px, 5vw, 64px); }
.treffen h2 { margin-bottom: 8px; }
.treffen > .innen > p { max-width: 62ch; }
.wochenplan { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); border-top: 3px solid var(--tanne); }
.wochenplan li { padding: 14px 0 0; }
.wochenplan b { display: block; font: 700 1.3rem/1.2 Vollkorn, Georgia, serif; color: var(--tanne); }
.wochenplan a { display: inline-block; margin-top: 2px; }

/* Unterseiten */
.seitenkopf { background: var(--gold); padding-block: clamp(32px, 5vw, 60px); }
.inhalt { padding-block: clamp(36px, 5vw, 64px) clamp(56px, 7vw, 96px); }
.text { max-width: 68ch; }
.text h2 { margin: 1.5em 0 .5em; }
.text h3 { margin: 1.5em 0 .4em; }
.abschnitt { margin-top: clamp(48px, 6vw, 72px); }
.abschnitt:first-child { margin-top: 0; }
.abschnitt > h2 { margin-bottom: 20px; }
figure { margin: 0; }
figcaption { font-size: 1rem; color: var(--grau); margin-top: 8px; }
.bild-breit { margin-bottom: 32px; max-width: 860px; }
.zoom { display: block; cursor: zoom-in; }

/* Zeitleisten: Aktuelles und Chronik laufen entlang der Zeit */
.zeit { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px clamp(24px, 4vw, 48px); padding-block: clamp(28px, 4vw, 44px); border-top: 1px solid var(--linie); }
.zeit:first-of-type { border-top: 3px solid var(--tanne); }
.zeit time, .zeit .wann { font: 700 1.125rem/1.3 Vollkorn, Georgia, serif; color: var(--gruen); padding-top: .25em; }
.zeit h3 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); font-weight: 900; margin-bottom: 14px; }
.zeit-inhalt { max-width: 760px; }
.zeit-inhalt > :last-child { margin-bottom: 0; }
.zeit figure { margin-bottom: 16px; }
.zeit figure.schmal { max-width: 340px; }
.chronik .zeit-inhalt { max-width: 68ch; }
.chronik .zeit { padding-block: 22px; }
.motto { font: 900 clamp(1.6rem, 3.4vw, 2.5rem)/1.2 Vollkorn, Georgia, serif; color: var(--tanne); margin: .6em 0; }

.fakten { display: grid; gap: 2px; }
.fakten div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; }
.fakten dt { font-weight: 700; }
.fakten dd { margin: 0; overflow-wrap: anywhere; }
.ergebnisse { border-collapse: collapse; width: 100%; max-width: 520px; margin-bottom: 1em; }
.ergebnisse th, .ergebnisse td { text-align: left; padding: 5px 12px 5px 0; border-bottom: 1px solid var(--linie); font-weight: 400; }
.ergebnisse th { font-weight: 700; }
.ergebnisse td:last-child { padding-right: 0; white-space: nowrap; }

/* Termine */
.tabelle-rahmen { overflow-x: auto; }
.termine, .koenige { width: 100%; border-collapse: collapse; }
.termine th, .termine td, .koenige th, .koenige td { text-align: left; vertical-align: top; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--linie); }
.termine thead th, .koenige thead th { font-size: 1rem; color: var(--grau); font-weight: 400; border-bottom: 3px solid var(--tanne); }
.termine .monat th { font: 900 1.5rem/1.2 Vollkorn, Georgia, serif; color: var(--tanne); padding-top: 32px; }
.termine tbody td:first-child, .termine .zeitpunkt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.termine .name { font-weight: 700; }
.termine .hinweis { display: block; font-weight: 400; font-size: 1rem; color: var(--grau); }
.termine .naechste td { background: var(--gold); }
.termine .naechste td:first-child { padding-left: 10px; }
.vergangene { display: none; }
.zeige-alle .vergangene { display: table-row; color: var(--grau); }
.knopf { display: inline-block; font: 700 1.0625rem 'Source Sans 3', sans-serif; color: var(--weiss); background: var(--gruen); border: 2px solid var(--gruen); border-radius: 4px; padding: 10px 18px; cursor: pointer; text-decoration: none; }
.knopf:hover { background: var(--tanne); border-color: var(--tanne); color: var(--weiss); }
.knopf.leise { background: none; color: var(--gruen); }
.knopf.leise:hover { color: var(--weiss); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 28px; }
[hidden] { display: none !important; }

/* Königspaare */
.koenige th[scope=row] { font: 700 1.125rem Vollkorn, Georgia, serif; color: var(--gruen); font-variant-numeric: tabular-nums; }
.koenige { min-width: 620px; }
.koenige thead th { position: sticky; top: 0; background: var(--weiss); }

/* Personen */
.personen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(16px, 2.5vw, 28px); }
.personen img, .monogramm { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; margin-bottom: 10px; background: var(--hauch); }
.monogramm { display: grid; place-items: center; font: 900 3rem Vollkorn, Georgia, serif; color: var(--gruen); }
.personen b { display: block; line-height: 1.3; }
.personen span { display: block; font-size: 1rem; color: var(--grau); }
.personen a { font-size: 1rem; }

/* Galerie */
.galerie { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 6px; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 48px); }
.spalten h3 { margin: 12px 0 6px; }
.presse-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 40px clamp(24px, 4vw, 48px); align-items: start; }
.presse-liste h2 { font-size: 1.4rem; margin-top: 12px; font-weight: 700; }
.presse-liste img { border: 1px solid var(--linie); }

.linkliste { list-style: none; padding: 0; margin: 0; max-width: 760px; border-top: 3px solid var(--tanne); }
.linkliste li { border-bottom: 1px solid var(--linie); }
.linkliste a { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px 0; font-weight: 700; }
.linkliste img { max-height: 96px; width: auto; max-width: 180px; }

/* Fuß */
.fuss { background: var(--tanne); color: var(--weiss); padding-block: 44px; }
.fuss .innen { display: flex; flex-wrap: wrap; gap: 24px 64px; justify-content: space-between; }
.fuss a { color: var(--weiss); }
.fuss a:hover { color: var(--gold); }
.fuss b { display: block; font: 700 1.3rem/1.2 Vollkorn, Georgia, serif; margin-bottom: 6px; }
.fuss p { margin: 0; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; align-self: end; }

/* Bildbetrachter */
.betrachter { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0e1a15; color: var(--weiss); }
.betrachter[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.betrachter::backdrop { background: #0e1a15; }
.betrachter img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.betrachter .leiste { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.betrachter [data-zu] { margin-left: auto; }
.betrachter button { font: 700 1.0625rem 'Source Sans 3', sans-serif; color: var(--weiss); background: none; border: 2px solid currentColor; border-radius: 4px; padding: 8px 14px; cursor: pointer; }
.betrachter button:hover { color: var(--gold); }
.betrachter :focus-visible { outline-color: var(--gold); }

@media (max-width: 1020px) {
  .js .menuknopf { display: block; }
  .js .nav { display: none; }
  .js .nav.offen { display: block; }
  .kopf .innen { flex-wrap: wrap; padding-block: 12px; }
  .nav { width: 100%; }
  .nav ul { display: block; }
  .nav a, .nav summary { padding: 11px 4px; border-bottom: 1px solid var(--linie); }
  .nav [aria-current], .nav .aktiv > summary { border-bottom-color: var(--linie); color: var(--gruen); }
  .nav details ul { position: static; border: 0; padding: 0 0 0 16px; }
}
@media (max-width: 760px) {
  body { font-size: 1.125rem; }
  .marke { font-size: 1.05rem; gap: 10px; }
  .marke img { width: 37px; height: 42px; }
  .kopf .innen { gap: 10px; }
  .buehne .innen { grid-template-columns: minmax(0, 1fr); }
  .naechster { margin-bottom: 8px; max-width: none; }
  .schild { justify-self: center; max-width: 340px; }
  .wochenplan { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .wochenplan li { border-top: 1px solid var(--linie); padding-block: 12px; }
  .wochenplan li:first-child { border-top: 3px solid var(--tanne); }
  .zeit { grid-template-columns: minmax(0, 1fr); }
  .zeit figure.schmal { max-width: 280px; }
  .spalten { grid-template-columns: minmax(0, 1fr); }
  .fakten div { grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 6px; }
  .personen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linkliste a { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* Termine werden auf dem Handy zu gestapelten Zeilen statt seitlich zu scrollen */
  .termine thead { position: absolute; left: -999px; }
  .termine, .termine tbody, .termine tr, .termine td, .termine th { display: block; }
  .termine tr { padding: 10px 0; border-bottom: 1px solid var(--linie); }
  .termine tr.vergangene { display: none; }
  .zeige-alle .termine tr.vergangene { display: block; }
  .termine td, .termine th { border: 0; padding: 0; }
  .termine .monat { border-bottom: 3px solid var(--tanne); padding-bottom: 4px; }
  .termine .naechste { background: var(--gold); padding-inline: 10px; }
  .termine .naechste td { background: none; }
  .termine .naechste td:first-child { padding-left: 0; }
}