/* =============================================================
   Automad-Bloecke an das Design der Saengerhalle anpassen.

   Der Block-Editor rendert eigenes Markup: jeder Block liegt in
   einem .am-block, Tabellen und Galerien lesen ihre Masse aus
   CSS-Variablen mit dem Praefix --am-. Diese Datei setzt beides
   auf die Farbwelt und die Abstaende des Themes, damit im
   Dashboard gepflegte Inhalte nicht aus dem Layout fallen.
   ============================================================= */

.am-block-bereich {
  --am-block-margin-top: 1.15rem;
  --am-block-max-width: none;
  --am-container-padding: 0;
  --am-border-color: var(--linie);
  --am-border-width: 1px;
  --am-border-radius: 0;

  --am-table-border: 0;
  --am-table-border-horizontal: 0;
  --am-table-border-header-horizontal: 0;
  --am-table-cell-padding: 1.05rem 1.25rem;
  --am-table-heading-font-weight: 600;

  --am-gallery-background: transparent;
  --am-gallery-item-width: 240px;
  --am-gallery-controls-color: var(--creme);
  --am-gallery-controls-background: var(--dunkel);
}

.am-block-bereich .am-block:first-child { margin-top: 0; }

/* ---------- Fliesstext aus dem Block-Editor ---------- */
.am-block-bereich p { color: var(--tinte-2); font-size: 1.15rem; line-height: 1.6; }
.am-block-bereich h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin-top: 2.5rem; }
.am-block-bereich h3 { font-size: 1.5rem; margin-top: 1.75rem; margin-bottom: 0.5rem; }
.am-block-bereich ul, .am-block-bereich ol { color: var(--tinte-2); font-size: 1.15rem; line-height: 1.6; padding-left: 1.35rem; }
.am-block-bereich li { margin-bottom: 0.4rem; }
.am-block-bereich a { color: var(--tinte); text-underline-offset: 3px; }
.am-block-bereich img { width: 100%; height: auto; }

/* ---------- Tabellen aus dem Block-Editor ----------
   Spiegelt die handgebaute .tabelle Regel fuer Regel: dunkler Kopf mit
   weisser Versalschrift, Zeilenwechsel in Creme statt Trennstrichen.
   Die Spaltenbreiten haengen im Original an .sp-Klassen, die der
   Block-Editor nicht vergibt - hier uebernehmen das nth-child-Regeln. */
/* Automad zentriert jeden Block auf --am-block-max-width (800 px). Die
   Tabelle wuerde dadurch schmaler stehen als das Jahresband darueber und
   nach rechts rutschen. Hier auf volle Spaltenbreite zurueckgesetzt. */
.am-tabelle {
  --am-block-max-width: none;
  --am-container-padding: 0;
  --am-block-margin-top: 0;
}
.am-tabelle .am-block { max-width: none; margin-inline: 0; }
.am-tabelle table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.am-tabelle th {
  text-align: left;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--dunkel);
  padding: 0.85rem 1.25rem;
  border: 0;
}
.am-tabelle td { padding: 1.05rem 1.25rem; vertical-align: baseline; border: 0; }
.am-tabelle tbody tr:nth-child(odd) { background: var(--creme); }
.section--creme .am-tabelle tbody tr:nth-child(odd) { background: var(--papier); }

/* Termine: Datum in Bronze, Veranstaltung fett, Ort gedaempft */
.am-tabelle--termine td:nth-child(1) { color: var(--bronze); font-weight: 600; width: 24%; }
.am-tabelle--termine td:nth-child(2) { font-weight: 600; width: 42%; }
.am-tabelle--termine td:nth-child(3) { color: var(--tinte-2); width: 34%; }
/* Jahresband ueber jeder Termintabelle */
.am-tabelle--termine .am-block + .am-block { margin-top: 0; }
.am-tabelle--termine h2, .am-tabelle--termine h3 {
  font-size: 1.8rem; font-weight: 600; line-height: 1; text-align: center;
  margin: clamp(2rem, 4vw, 3rem) 0 0; padding-bottom: 0.9rem;
  border-bottom: 3px solid var(--bronze);
}
.am-tabelle--termine .am-block:first-child h2,
.am-tabelle--termine .am-block:first-child h3 { margin-top: 0; }
.am-tabelle--termine table { margin-top: 10px; }

/* Vorstand: Amt gedaempft und breiter, Name fett */
.am-tabelle--vorstand td:nth-child(1) { color: var(--tinte-2); width: 52%; }
.am-tabelle--vorstand td:nth-child(2) { font-weight: 600; }

/* Auf schmalen Geraeten werden die Zellen zu Bloecken, wie im Original */
@media (max-width: 720px) {
  .am-tabelle table, .am-tabelle tbody, .am-tabelle tr, .am-tabelle td { display: block; width: auto; }
  .am-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .am-tabelle tr { padding: 1.1rem 1.25rem; margin-bottom: 4px; }
  .am-tabelle td { padding: 0; }
  .am-tabelle--termine td:nth-child(1),
  .am-tabelle--termine td:nth-child(2),
  .am-tabelle--termine td:nth-child(3),
  .am-tabelle--vorstand td:nth-child(1) { width: auto; }
  .am-tabelle--termine td:nth-child(1) { font-size: 1rem; }
  .am-tabelle--termine td:nth-child(2) { font-size: 1.2rem; margin-top: 0.15rem; }
  .am-tabelle--termine td:nth-child(3) { margin-top: 0.25rem; }
  .am-tabelle--termine td:nth-child(3)::before { content: "Ort: "; }
  .am-tabelle--vorstand td:nth-child(1) { font-size: 0.98rem; }
}

/* ---------- Galerie ---------- */
.am-block-bereich--galerie .am-block { margin-top: 4px; }
.am-block-bereich--galerie h2 {
  font-size: 1.8rem;
  text-align: center;
  margin: clamp(2rem, 4vw, 3rem) 0 0.75rem;
  padding-bottom: 0.9rem;
  border-bottom: 3px solid var(--bronze);
}
.am-block-bereich--galerie img { display: block; }

/* ---------- Lebenslauf der Chorleitung ---------- */
.chorleiter__text .am-block { margin-top: 1.05rem; }
.chorleiter__text .am-block:first-child { margin-top: 0; }

/* ---------- Rechtstexte ----------
   Innerhalb von .legal gelten die Regeln der handgebauten Lesespalte.
   Die generischen Block-Regeln weiter oben wuerden sonst gewinnen, weil
   sie gleich spezifisch und spaeter notiert sind, und die Seite waeche
   um mehrere hundert Pixel. Der Blockabstand wird hier auf null gesetzt,
   damit allein die Randregeln von .legal h2 und .legal p greifen. */
/* Der Block-Editor haengt .am-block an das Element selbst (h2, p) oder an
   einen Wrapper (Listen). Beides bekommt hier die Abstaende der
   handgebauten Lesespalte. */
.legal .am-block-bereich > .am-block { margin-top: 1rem; }
.legal .am-block-bereich > h2.am-block { margin-top: clamp(2.25rem, 4vw, 3rem); }
/* Die Regel .legal h2:first-child setzt den Abstand zurueck. Hier steht der
   Block aber unter dem Pflichtangaben-Kasten und braucht ihn. */
.legal .am-block-bereich > h2:first-child { margin-top: clamp(2.25rem, 4vw, 3rem); }
.legal .am-block-bereich h2 {
  font-size: clamp(1.45rem, 2.2vw, 1.8rem);
  margin-top: clamp(2.25rem, 4vw, 3rem);
  margin-bottom: 0;
  padding-top: 1.35rem;
  border-top: 1px solid var(--linie);
}
.legal .am-block-bereich p {
  color: var(--tinte-2);
  margin-top: 1rem;
  font-size: 1.15rem;
  line-height: 1.6;
}
.legal .am-block-bereich ul,
.legal .am-block-bereich ol {
  color: var(--tinte-2);
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 0;
  padding-left: 1.35rem;
}
.legal .am-block-bereich li { margin-bottom: 0.4rem; }