/*
Theme Name: Wilhelmi
Description: Schlankes Theme der Schützenbruderschaft St. Wilhelmi Kinderhaus. Farben und Schildform stammen aus dem gestickten Wappen.
Version: 1.0
Requires PHP: 8.1
Text Domain: wilhelmi
Update URI: false
*/

@font-face { font-family: Vollkorn; font-weight: 700; font-display: swap; src: url(assets/fonts/vollkorn-700.woff2) format('woff2'); }
@font-face { font-family: Vollkorn; font-weight: 900; font-display: swap; src: url(assets/fonts/vollkorn-900.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-display: swap; src: url(assets/fonts/sourcesans-400.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 700; font-display: swap; src: url(assets/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; }
}

/* WordPress: Inhalte aus dem Editor */
.entry { max-width: 68ch; }
.entry > :last-child { margin-bottom: 0; }
.entry h2 { margin: 1.5em 0 .5em; }
.entry h2:first-child { margin-top: 0; }
.entry h3 { margin: 1.5em 0 .4em; }
.entry .wp-block-image, .zeit-inhalt .wp-block-image { margin: 0 0 1.25em; }
.zeit-inhalt .wp-block-heading { font-size: 1.4rem; font-weight: 700; margin: 1.25em 0 .4em; }
.kopfdatum { margin: 10px 0 0; color: var(--tanne); }
.titelbild { margin-bottom: 16px; }
.titelbild.schmal { max-width: 340px; }
.entry .titelbild.schmal { max-width: 420px; }
.aktuelles { padding-top: 0; }
.aktuelles .wp-block-table, .entry .wp-block-table { margin: 0 0 1em; }
.aktuelles-titel { margin-bottom: 24px; }
.seitenkopf + .aktuelles { padding-top: clamp(36px, 5vw, 64px); }
.wp-block-table table { border-collapse: collapse; width: 100%; max-width: 560px; }
.wp-block-table td, .wp-block-table th { border: 0; border-bottom: 1px solid var(--linie); padding: 5px 12px 5px 0; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.wp-block-table.fakten td:first-child { width: 8.5em; }
.pagination, .navigation.pagination { margin-top: 32px; padding-top: 20px; border-top: 3px solid var(--tanne); }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.page-numbers.current { font-weight: 700; }
.screen-reader-text { position: absolute; left: -9999px; }

/* Termine: Download-Knopf kommt aus dem Editor */
.knopfreihe .wp-block-buttons { margin: 0; }
.wp-block-button__link { display: inline-block; font: 700 1.0625rem 'Source Sans 3', sans-serif; color: var(--weiss); background: var(--gruen); border-radius: 4px; padding: 12px 18px; text-decoration: none; }
.wp-block-button__link:hover { background: var(--tanne); color: var(--weiss); }

/* Startseite: Wochenplan */
.treffen .wp-block-paragraph, .treffen > .innen > p { max-width: 62ch; }
.treffen .wp-block-columns.wochenplan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); margin: 28px 0 0; border-top: 3px solid var(--tanne); }
.wochenplan .wp-block-column { padding-top: 14px; }
.wochenplan .wp-block-column p { margin: 0 0 2px; }
.wochenplan .wp-block-heading { font: 700 1.3rem/1.2 Vollkorn, Georgia, serif; margin: 0 0 2px; }

/* Chronik: ein Block je Zeitabschnitt */
.seite-chronik .entry { max-width: none; }
.seite-chronik .entry > p, .seite-chronik .entry > h2 { max-width: 68ch; }
.zeit-block { display: grid; grid-template-columns: 170px minmax(0, 68ch); gap: 0 clamp(24px, 4vw, 48px); padding-block: 22px; border-top: 1px solid var(--linie); }
.zeit-block:first-child { border-top: 3px solid var(--tanne); }
.zeit-block > .wp-block-heading { grid-column: 1; grid-row: 1 / span 20; margin: 0; padding-top: .25em; font: 700 1.125rem/1.3 Vollkorn, Georgia, serif; color: var(--gruen); }
.zeit-block > :not(.wp-block-heading) { grid-column: 2; }
.zeit-block > :last-child { margin-bottom: 0; }
.seite-chronik .zeit-block + :not(.zeit-block) { margin-top: clamp(48px, 6vw, 72px); }

/* Galerie */
.seite-galerie .entry { max-width: none; }
.wp-block-gallery.has-nested-images { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 6px; }
.wp-block-gallery.has-nested-images figure.wp-block-image { width: 100% !important; margin: 0 !important; display: block; }
.wp-block-gallery.has-nested-images figure.wp-block-image a { display: block; height: 100%; }
.wp-block-gallery.has-nested-images figure.wp-block-image img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }

/* Presse und Links */
.seite-presse .entry, .seite-links .entry { max-width: none; }
.presse-liste.wp-block-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 40px clamp(24px, 4vw, 48px); align-items: start; }
.presse-liste .wp-block-image { margin: 0 0 12px; }
.presse-liste .wp-block-heading { font-size: 1.4rem; font-weight: 700; margin: 0 0 4px; }
.presse-liste p { margin: 0; }
.linkliste.wp-block-group { max-width: 760px; border-top: 3px solid var(--tanne); }
.linkeintrag { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--linie); }
.linkeintrag .wp-block-image { margin: 0; }
.linkeintrag img { max-height: 96px; width: auto; max-width: 180px; }
.linkeintrag p { margin: 0; font-weight: 700; }

.rueckblick-bild { max-width: 520px; }

@media (max-width: 760px) {
  .treffen .wp-block-columns.wochenplan { grid-template-columns: minmax(0, 1fr); border-top: 3px solid var(--tanne); }
  .wochenplan .wp-block-column { border-top: 1px solid var(--linie); padding-block: 12px; }
  .wochenplan .wp-block-column:first-child { border-top: 0; }
  .zeit-block { grid-template-columns: minmax(0, 1fr); }
  .zeit-block > .wp-block-heading { grid-column: 1; grid-row: auto; margin-bottom: 6px; }
  .zeit-block > :not(.wp-block-heading) { grid-column: 1; }
  .wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linkeintrag { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .wp-block-table.fakten td:first-child { width: 7em; }
}

/* Links: Bild und Text stehen im Raster des Eintrags, nicht im Link */
.linkliste .linkeintrag a { display: inline; padding: 0; }
.linkliste .linkeintrag .wp-block-image a { display: block; }