/* ============================================================
   initiative party & jugend — Veranstaltungen

   Grundsatz: Dieses Stylesheet fasst nichts außerhalb der eigenen
   Bereiche an. Alle Auswahlregeln beginnen mit .pj-block, es gibt keinen
   Reset und keine Regeln auf body, a oder h2.

   Alle Schriftgrößen hängen an --pj-skala. Der Wert kommt aus den
   Einstellungen (Events → gigAdmin → Textgröße) und wird als Inline-Stil auf
   .pj-block gesetzt. So lässt sich die Größe an den eigenen Bildschirm
   anpassen, ohne im Stylesheet zu suchen.

   Jeder Abschnitt hat eine eigene Kennung:

     .pj-block--kacheln     Termine als Kacheln
     .pj-block--zeitstrahl  Termine als Zeitstrahl
     .pj-block--liste       Termine als Liste
     .pj-block--termin      einzelner Termin
     .pj-block--alben       Übersicht der Fotostrecken
     .pj-block--album       eine einzelne Fotostrecke

   Die Regeln hängen daran, damit sich die Bereiche nicht gegenseitig
   beeinflussen: Eine Änderung an den Fotokacheln kann so nicht die
   Terminübersicht verstellen.

   An .pj-block hängen nur Bausteine, die in mehreren Abschnitten vorkommen —
   die Fotostrecke selbst (.pj-album, .pj-mosaik, .pj-credits) erscheint sowohl
   auf der Fotoseite als auch unter einem Termin, ebenso Knöpfe, Schlagworte
   und Hinweistexte.

   Warum .pj-block doppelt vorangestellt ist: Elementor setzt seine globalen
   Überschriftenstile über .elementor-kit-N h3 — das ist spezifischer als eine
   einzelne Klasse und würde unsere Schriftgrößen überschreiben. Mit dem
   zusätzlichen .pj-block liegen wir darüber. !important wird nur an einer
   einzigen Stelle verwendet: beim Abschalten der Unterstreichung in Kacheln,
   weil das Theme sie ihrerseits mit !important setzt.

   Farben kommen über Variablen mit Rückfallwert: Setzt das Theme
   --pj-navy, gilt der Wert des Themes. Sonst greifen die Vereinsfarben.
   ============================================================ */

.pj-block {
  --pj-navy: #000949;
  --pj-eis: #87cedc;
  --pj-eis-tief: #3f96ac;
  --pj-linie: #dbe7ee;
  --pj-dunst: #ecfbff;
  --pj-leise: #55606e;
}

.pj-block * { box-sizing: border-box; }

/* Höchstbreite: fängt ab, wenn die Sektion des Themes über die ganze Seite
   geht. Ohne Begrenzung liefe der Text auf großen Bildschirmen über 2000
   Pixel — beim Zeilenwechsel findet das Auge dann den Anfang nicht mehr. */
.pj-block {
  max-width: var(--pj-max, none);
  margin-inline: auto;
  padding-bottom: 3rem;
}

/* Die Mindesthöhe gilt nur für die Fotoseiten. Bei den Terminen stehen oft
   zwei Abschnitte auf einer Seite — dort addierten sich die Höhen und rissen
   eine leere Fläche auf. */
.pj-block--alben,
.pj-block--album,
.pj-block--fotos { min-height: var(--pj-minhoehe, auto); }

/* Bei „breiter" gilt die Höchstbreite für den Inhalt, nicht für den
   ausbrechenden Rahmen — die Mindesthöhe dagegen für beide. */
.pj-block--weit { max-width: none; }

/* ---------- Überschrift eines Blocks ---------- */
.pj-block .pj-kopf { text-align: center; margin-bottom: 2.5rem; }
.pj-block .pj-kopf h2 { margin: 0 0 .8rem; font-size: calc(2.2rem * var(--pj-skala, 1)); line-height: 1.2; }
.pj-block .pj-zier {
  display: block; width: 120px; height: 10px; margin: 0 auto;
  background: repeating-linear-gradient(115deg,
    var(--pj-eis) 0 2px, transparent 2px 7px);
}

.pj-block .pj-leer {
  text-align: center; color: var(--pj-leise);
  max-width: 60ch; margin-inline: auto; font-size: calc(1.5rem * var(--pj-skala, 1)); line-height: 1.6;
}

/* ---------- Kacheln ---------- */
.pj-block--kacheln .pj-kacheln {
  display: grid; gap: 1.6rem;
  grid-template-columns: 1fr;
}

/* Bei ein oder zwei Kacheln bliebe rechts eine Lücke, und die Reihe wirkte
   abgebrochen. Statt die Spalten zu begrenzen — das hat die dritte Spalte
   gekostet — wird das Raster selbst schmaler und mittig gesetzt. */
.pj-block--kacheln .pj-kacheln:not(:has(> :nth-child(3))) {
  max-width: 840px; margin-inline: auto;
}
.pj-block--kacheln .pj-kacheln:not(:has(> :nth-child(2))) {
  max-width: 420px;
}
@media (min-width: 620px)  { .pj-block--kacheln .pj-kacheln { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pj-block--kacheln .pj-kacheln { grid-template-columns: repeat(3, 1fr); } }

.pj-block--kacheln .pj-kachel {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--pj-linie); overflow: hidden;
  transition: transform .15s ease, border-color .15s ease;
}
.pj-block--kacheln .pj-kachel:hover { transform: translateY(-3px); border-color: var(--pj-eis); }

.pj-block--kacheln .pj-kachel-flaeche {
  display: block; text-decoration: none; color: inherit; flex: 1;
}
.pj-block--kacheln .pj-kachel-taten {
  padding: 0 1.3rem 1.2rem;
  margin-top: auto;
}
.pj-block--kacheln .pj-kachel-taten .pj-taten { margin-top: 0; }

.pj-block--kacheln .pj-kachel-bild {
  position: relative; display: grid; place-items: center;
  /* Flyer sind meist quadratisch oder hochkant — bei 3:2 blieb links und
     rechts viel Blau. Quadratisch passt für die allermeisten. */
  aspect-ratio: 1 / 1; background: var(--pj-navy); overflow: hidden;
}
/* Der Flyer füllt die Fläche und wird aus der Mitte beschnitten — so bleibt
   kein blauer Rand. Bei quadratischen Flyern geht ohnehin nichts verloren,
   bei hochformatigen nur ein schmaler Streifen oben und unten. */
.pj-block--kacheln .pj-kachel .pj-kachel-bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0;
  object-fit: cover;
  object-position: center center;
}
/* Vollständig statt zugeschnitten: In einem Raster müssen die Kacheln gleich
   hoch bleiben, deshalb hier „contain" statt freier Höhe wie im Zeitstrahl. */

.pj-block--kacheln .pj-kachel-zahl {
  position: relative; z-index: 1;
  font-size: calc(4rem * var(--pj-skala, 1)); font-weight: 700; line-height: 1;
  color: rgba(135, 206, 220, .35);
}

.pj-block--kacheln .pj-kachel-datum {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  display: flex; align-items: baseline; gap: .45rem;
  padding: .6rem 1rem; background: var(--pj-navy); color: #fff;
}
.pj-block--kacheln .pj-kachel-datum strong { font-size: calc(1.9rem * var(--pj-skala, 1)); line-height: 1; color: var(--pj-eis); }
.pj-block--kacheln .pj-kachel-datum span { font-size: calc(1rem * var(--pj-skala, 1)); letter-spacing: .16em; text-transform: uppercase; }

.pj-block--kacheln .pj-kachel-text { display: block; padding: 1.3rem 1.4rem 1.4rem; }
.pj-block--kacheln .pj-kachel-titel {
  display: block; font-size: calc(1.5rem * var(--pj-skala, 1));
  font-weight: 700; line-height: 1.25; margin-bottom: .6rem;
}

/* Angaben je Zeile, mit Beschriftung links */
.pj-block--kacheln .pj-kachel-angaben { display: block; margin-top: .8rem; }
.pj-block--kacheln .pj-kachel-angabe {
  /* Breit genug für „Einlass & Beginn" in einer Zeile — sonst bräche die
     Beschriftung um und stünde neben zwei Zeilen Wert. */
  display: grid; grid-template-columns: 10.5rem 1fr; gap: .6rem;
  padding: .28rem 0;
}
.pj-block--kacheln .pj-kachel-name {
  font-size: calc(.95rem * var(--pj-skala, 1));
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pj-leise); align-self: baseline;
  white-space: nowrap;
}
.pj-block--kacheln .pj-kachel-wert {
  font-size: calc(1.15rem * var(--pj-skala, 1)); line-height: 1.4;
  color: var(--pj-navy); font-weight: 500;
}

/* Das Datum hebt sich ab — es ist die wichtigste Angabe */
.pj-block--kacheln .pj-kachel-angabe:first-child .pj-kachel-wert {
  font-size: calc(1.3rem * var(--pj-skala, 1)); font-weight: 700;
}

/* ---------- Zeitstrahl ----------
   Das Datum sitzt als Kreis auf der Linie und ist zugleich die Markierung —
   ein zusätzlicher Punkt daneben wäre doppelt. */
.pj-block--zeitstrahl .pj-zeitstrahl {
  list-style: none; margin: 0; padding: 0 0 0 7.5rem; position: relative;
}
.pj-block--zeitstrahl .pj-zeitstrahl::before {
  content: ''; position: absolute; left: 3rem; top: 1.5rem; bottom: 1.5rem;
  width: 2px; background: var(--pj-linie);
}

.pj-block--zeitstrahl .pj-zeitstrahl-jahr {
  position: relative; margin: 3.5rem 0 2rem;
  font-size: calc(3.2rem * var(--pj-skala, 1)); font-weight: 700; line-height: 1; color: var(--pj-navy);
}
.pj-block--zeitstrahl .pj-zeitstrahl-jahr:first-child { margin-top: 0; }
/* Der Punkt sitzt genau auf der Linie: Die liegt bei 3rem, der Eintrag
   beginnt bei 7.5rem — also 4.5rem nach links. */
.pj-block--zeitstrahl .pj-zeitstrahl-jahr::before {
  content: ''; position: absolute; left: -4.5rem; top: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 18px; border-radius: 50%; background: var(--pj-navy);
}

.pj-block--zeitstrahl .pj-zeitstrahl-punkt { position: relative; margin-bottom: 2.5rem; }

/* Datumskreis auf der Linie */
.pj-block--zeitstrahl .pj-strahl-datum {
  position: absolute; left: -7.5rem; top: .4rem;
  width: 6rem; height: 6rem; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--pj-navy); color: #fff;
  box-shadow: 0 0 0 6px #fff;   /* trennt den Kreis von der Linie dahinter */
}
.pj-block--zeitstrahl .pj-strahl-tag {
  display: block; font-size: calc(2rem * var(--pj-skala, 1)); font-weight: 700; line-height: 1;
  color: var(--pj-eis);
}
/* Am Rechner steht das Jahr bereits als Zwischenüberschrift */
.pj-block--zeitstrahl .pj-strahl-jahr { display: none; }

.pj-block--zeitstrahl .pj-strahl-monat {
  display: block; margin-top: .25rem;
  font-size: calc(0.95rem * var(--pj-skala, 1)); letter-spacing: .14em; text-transform: uppercase;
}

/* Die Karte selbst — ohne Rahmen, der Flyer trägt die Gliederung */
.pj-block--zeitstrahl .pj-strahl-karte {
  position: relative;
  display: grid; grid-template-columns: 190px 1fr; gap: 1.8rem;
  align-items: start;
}
/* Der Flyer wird vollständig gezeigt, nicht zugeschnitten — das Seitenverhältnis
   richtet sich nach dem Bild. Hochformat und Querformat sind beide möglich. */
.pj-block--zeitstrahl .pj-strahl-bild {
  display: block; overflow: hidden;
  background: var(--pj-navy);
}
.pj-block--zeitstrahl .pj-strahl-bild img {
  display: block; width: 100%; height: auto;
  transition: transform .25s ease;
}
.pj-block--zeitstrahl .pj-strahl-karte:hover .pj-strahl-bild img { transform: scale(1.03); }

/* Ohne Flyer eine Fläche mit der Datumszahl */
.pj-block--zeitstrahl .pj-strahl-bild:not(:has(img)) {
  display: grid; place-items: center; aspect-ratio: 3 / 4;
}
.pj-block--zeitstrahl .pj-strahl-zahl { font-size: calc(3.4rem * var(--pj-skala, 1)); font-weight: 700; color: rgba(135, 206, 220, .4); }

.pj-block--zeitstrahl .pj-strahl-text { min-width: 0; padding-top: .3rem; }

.pj-block--zeitstrahl .pj-strahl-titel {
  margin: 0 0 .6rem; font-size: calc(2rem * var(--pj-skala, 1)); line-height: 1.2; font-weight: 700;
}

.pj-block--zeitstrahl .pj-strahl-lineup {
  margin: 0 0 .45rem; font-size: calc(1.5rem * var(--pj-skala, 1)); line-height: 1.4; color: var(--pj-eis-tief);
}
.pj-block--zeitstrahl .pj-strahl-zeile {
  margin: 0 0 .45rem; font-size: calc(1.5rem * var(--pj-skala, 1)); line-height: 1.45; color: var(--pj-navy);
}
.pj-block--zeitstrahl .pj-strahl-fakten { margin: 0; color: var(--pj-leise); font-size: calc(1.5rem * var(--pj-skala, 1)); }

/* Künstlerlinks heben sich vom übrigen Text ab */
.pj-block .pj-kuenstler {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color .15s ease;
}
.pj-block .pj-kuenstler:hover { color: var(--pj-navy); }

/* Die ganze Karte anklickbar: Der unsichtbare Link liegt über der Fläche,
   Knöpfe und Künstlerlinks stehen darüber. */
.pj-block--zeitstrahl .pj-strahl-karte--klickbar { cursor: pointer; }
.pj-block--zeitstrahl .pj-strahl-flaeche {
  position: absolute; inset: 0; z-index: 1;
  border: 0; text-indent: -9999px; overflow: hidden;
}
.pj-block--zeitstrahl .pj-strahl-karte--klickbar:hover .pj-strahl-titel { color: var(--pj-eis-tief); }

.pj-block .pj-strahl-text .pj-taten,
.pj-block .pj-kuenstler { position: relative; z-index: 2; }

/* Mittlere Breiten: schmalere Spalte, damit der Text nicht zu eng wird */


/* ---------- Symbolknöpfe ----------
   Ohne Kästchen: Die Symbole stehen frei, nur der Ticketknopf ist als
   eigentliche Handlung hervorgehoben. */
.pj-block .pj-taten { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-top: 1.1rem; }

.pj-block .pj-tat {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  color: var(--pj-eis-tief); text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}
.pj-block .pj-tat:hover { color: var(--pj-navy); transform: translateY(-2px); }
.pj-block .pj-tat svg { width: calc(28px * var(--pj-skala, 1)); height: calc(28px * var(--pj-skala, 1)); }

.pj-block .pj-tat--betont {
  padding: .7rem 1.3rem; gap: .6rem;
  background: var(--pj-navy); color: #fff;
}
.pj-block .pj-tat--betont::after {
  content: 'Tickets';
  font-size: calc(0.95rem * var(--pj-skala, 1)); letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
}
.pj-block .pj-tat--betont:hover { background: var(--pj-eis); color: var(--pj-navy); transform: none; }
.pj-block .pj-tat--betont svg { width: calc(22px * var(--pj-skala, 1)); height: calc(22px * var(--pj-skala, 1)); }

/* Text nur für Screenreader — ein Symbol allein wäre sonst eine Sackgasse */
.pj-block .pj-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;
}

/* ---------- Liste ---------- */
.pj-block--liste .pj-liste { display: grid; gap: .6rem; }
.pj-block--liste .pj-zeile {
  display: grid; grid-template-columns: 5rem 1fr; gap: 1.2rem;
  align-items: center; padding: 1rem 1.2rem;
  border: 1px solid var(--pj-linie); text-decoration: none; color: inherit;
}
.pj-block--liste .pj-zeile:hover { border-color: var(--pj-eis); background: var(--pj-dunst); }
.pj-block--liste .pj-zeile-datum { text-align: center; }
.pj-block--liste .pj-zeile-tag { display: block; font-size: calc(2rem * var(--pj-skala, 1)); font-weight: 700; line-height: 1; color: var(--pj-navy); }
.pj-block--liste .pj-zeile-monat { display: block; font-size: calc(0.95rem * var(--pj-skala, 1)); letter-spacing: .12em; text-transform: uppercase; color: var(--pj-leise); }
.pj-block--liste .pj-zeile-kern strong { display: block; font-size: calc(1.5rem * var(--pj-skala, 1)); line-height: 1.3; }
.pj-block--liste .pj-zeile-kern span { display: block; margin-top: .25rem; color: var(--pj-leise); font-size: calc(1.5rem * var(--pj-skala, 1)); }


/* ---------- Einzelner Termin ---------- */


.pj-block .pj-lineup {
  margin: 0 0 1rem;
  font-size: calc(1.5rem * var(--pj-skala, 1)); line-height: 1.5;
  color: var(--pj-navy);
}
.pj-block .pj-lineup a { color: var(--pj-eis-tief); }
.pj-block .pj-lineup-marke {
  color: var(--pj-leise);
  font-size: calc(0.95rem * var(--pj-skala, 1));
  letter-spacing: .16em; text-transform: uppercase;
  margin-right: .4rem;
}

/* Genres direkt darunter */
.pj-block .pj-lineup + .pj-worte { margin-top: 0; }
.pj-block--termin .pj-eckdaten + .pj-worte { margin-top: 0; }
.pj-block--termin .pj-termin > .pj-worte { margin-bottom: 1.8rem; }

.pj-block .pj-hinweis {
  padding: .8rem 1.1rem; background: var(--pj-dunst);
  border-left: 4px solid var(--pj-eis); margin: 0 0 1.5rem;
}

.pj-block--termin .pj-termin-text { margin: 1.5rem 0; font-size: calc(1.5rem * var(--pj-skala, 1)); line-height: 1.65; }
.pj-block--termin .pj-termin-flyer { margin: 2rem 0 0; }
.pj-block--termin .pj-termin-flyer img { max-width: 100%; height: auto; display: block; }

/* ---------- Knöpfe ---------- */
.pj-block .pj-knopfreihe { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0; }
.pj-block .pj-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .7rem 1.4rem;
  background: var(--pj-navy); color: #fff; text-decoration: none;
  font-size: calc(0.95rem * var(--pj-skala, 1)); letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--pj-navy); transition: background .15s ease, color .15s ease;
}
.pj-block .pj-knopf:hover { background: var(--pj-eis); color: var(--pj-navy); border-color: var(--pj-eis); }
.pj-block .pj-knopf--rand { background: transparent; color: var(--pj-navy); }
.pj-block .pj-knopf--rand:hover { background: var(--pj-navy); color: #fff; }

/* ---------- Fotostrecken ---------- */
.pj-block .pj-album + .pj-album { margin-top: 3.5rem; }
.pj-block .pj-album-titel {
  margin: 0 0 1.3rem;
  font-size: calc(1.9rem * var(--pj-skala, 1)); line-height: 1.25;
}

/* ---------- Mosaik ----------
   Die Bilder behalten ihr Seitenverhältnis. Mehrspaltig über CSS-Spalten:
   ein echtes Mauerwerk-Layout bräuchte JavaScript und würde beim Laden
   springen. */
.pj-block .pj-mosaik {
  column-count: 1;
  column-gap: 1rem;
}
@media (min-width: 520px)  { .pj-block .pj-mosaik { column-count: 2; } }
@media (min-width: 900px)  { .pj-block .pj-mosaik { column-count: 3; } }
@media (min-width: 1400px) { .pj-block .pj-mosaik { column-count: 4; } }

.pj-block .pj-mosaik-bild {
  display: block; margin: 0 0 1rem; cursor: zoom-in;
  /* Verhindert, dass ein Bild über den Spaltenumbruch zerrissen wird */
  break-inside: avoid;
  overflow: hidden; background: var(--pj-dunst);
}
.pj-block .pj-mosaik-bild img {
  display: block; width: 100%; height: auto;
  transition: transform .25s ease, opacity .15s ease;
}
.pj-block .pj-mosaik-bild:hover img { transform: scale(1.03); opacity: .92; }

.pj-block .pj-album-fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.2rem;
}
.pj-block .pj-album-hinweis {
  font-size: calc(1.5rem * var(--pj-skala, 1)); color: var(--pj-leise);
}

/* ---------- Foto-Credits ---------- */
.pj-block .pj-credits {
  margin: 1.6rem 0 0;
  font-size: calc(1.5rem * var(--pj-skala, 1)); color: var(--pj-navy);
}
.pj-block .pj-credits-marke {
  font-size: calc(1.5rem * var(--pj-skala, 1));
  letter-spacing: .16em; text-transform: uppercase;
  margin-right: .4rem;
}
.pj-block .pj-credits a { color: var(--pj-eis-tief); }

/* ---------- Jahreswahl ---------- */
.pj-block--alben .pj-jahrwahl {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  margin-bottom: 2rem;
}
/* Die Beschriftung steht nur für Screenreader in der Seite */
.pj-block--alben .pj-jahrwahl select {
  padding: .8rem 2.8rem .8rem 1.2rem;
  font-size: calc(1.5rem * var(--pj-skala, 1));
  color: var(--pj-navy); background-color: #fff;
  border: 1px solid var(--pj-linie);
  /* Eigener Pfeil, damit es in jedem Browser gleich aussieht */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f96ac' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 1.1em;
  cursor: pointer;
}
.pj-block--alben .pj-jahrwahl select:hover { border-color: var(--pj-eis); }

/* ---------- Albenübersicht ---------- */

/* Themes unterstreichen Links im Inhalt oft von sich aus. In Kacheln stört
   das: Die Fläche ist als Ganzes anklickbar, der Unterstrich zerhackt sie.

   Hier ausnahmsweise mit !important — OceanWP setzt die Unterstreichung
   selbst mit !important, und ohne käme man nicht dagegen an. Betroffen ist
   nur die Textdekoration innerhalb der eigenen Kacheln, sonst nichts. */
.pj-block--termin .pj-fotohinweis,
.pj-block--termin .pj-fotohinweis *,
.pj-block .pj-albumkachel,
.pj-block .pj-albumkachel *,
.pj-block .pj-kachel-flaeche,
.pj-block .pj-kachel-flaeche *,
.pj-block .pj-zeile,
.pj-block .pj-zeile *,
.pj-block .pj-mosaik-bild,
.pj-block .pj-strahl-flaeche,
.pj-block .pj-strahl-titel a,
.pj-block .pj-zurueck a { text-decoration: none !important; }
.pj-block--alben .pj-albenraster {
  display: grid; gap: 1.8rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Wie bei den Terminkacheln: wenige Einträge mittig, ohne die Spaltenzahl
   für den Normalfall zu beschneiden. */
.pj-block--alben .pj-albenraster:not(:has(> :nth-child(3))) {
  max-width: 860px; margin-inline: auto;
}
.pj-block--alben .pj-albenraster:not(:has(> :nth-child(2))) {
  max-width: 430px;
}
.pj-block--alben .pj-albumkachel {
  display: block; color: inherit;
  /* Der Rahmen der Kachel zeigt bereits, dass es ein Verweis ist —
     Unterstriche wirken darin unruhig. */
  text-decoration: none;
  border: 1px solid var(--pj-linie); overflow: hidden; background: #fff;
  transition: transform .15s ease, border-color .15s ease;
}
.pj-block--alben .pj-albumkachel:hover { transform: translateY(-3px); border-color: var(--pj-eis); }

.pj-block--alben .pj-albumkachel-bild {
  /* Bezugspunkt für das Bild darin — ohne den könnte sich dessen Höhe nicht
     auf die Kachel beziehen. */
  position: relative; display: grid; place-items: center;
  aspect-ratio: 4 / 3; background: var(--pj-navy); overflow: hidden;
}
/* Das Deckblatt füllt die Kachel und wird aus der Mitte beschnitten.

   Anders als beim Flyer ist das hier richtig: Bei einem Foto steht das
   Wesentliche meist in der Mitte, und blaue Ränder neben jedem Bild sähen
   unruhig aus. Beim Flyer wäre Beschneiden dagegen falsch — dort steht der
   Text bis an den Rand. */
.pj-block--alben .pj-albumkachel .pj-albumkachel-bild img {
  /* Absolut über alle vier Kanten: Damit steht die Größe fest, unabhängig
     davon, was das Theme für Inhaltsbilder vorgibt. Eine Prozenthöhe hätte
     sich auf die Kachel beziehen müssen, deren Höhe aber erst aus dem
     Seitenverhältnis entsteht — ein Zirkelbezug, den Browser auflösen, indem
     sie die Angabe verwerfen. */
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0;
  object-fit: cover;
  object-position: center center;
  transition: transform .25s ease;
}
.pj-block--alben .pj-albumkachel:hover .pj-albumkachel-bild img { transform: scale(1.04); }
.pj-block .pj-album-leer { position: relative; z-index: 1; font-size: calc(2rem * var(--pj-skala, 1)); font-weight: 700; color: var(--pj-eis); }

.pj-block--alben .pj-albumkachel-text { display: block; padding: 1.1rem 1.2rem 1.3rem; }
.pj-block--alben .pj-albumkachel-titel {
  display: block; font-weight: 700;
  font-size: calc(1.35rem * var(--pj-skala, 1)); line-height: 1.3;
  text-decoration: none;
}
.pj-block--alben .pj-albumkachel:hover .pj-albumkachel-titel { color: var(--pj-eis-tief); }
.pj-block--alben .pj-albumkachel-info {
  display: block; margin-top: .5rem;
  font-size: calc(1.15rem * var(--pj-skala, 1)); line-height: 1.45; color: var(--pj-leise);
}

.pj-block .pj-zurueck { margin: 0 0 1.2rem; }
.pj-block .pj-zurueck a {
  text-decoration: none;
  font-size: calc(1.5rem * var(--pj-skala, 1));
  color: var(--pj-eis-tief);
}
.pj-block .pj-zurueck a:hover { color: var(--pj-navy); }

@media (prefers-reduced-motion: reduce) {
  .pj-block--alben .pj-albumkachel { transition: none; }
  .pj-block--alben .pj-albumkachel:hover { transform: none; }
}

/* Rahmen um Zeile und Aktionen in der Listendarstellung */
.pj-block--liste .pj-zeile-rahmen {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  border: 1px solid var(--pj-linie); padding-right: 1rem;
}
.pj-block--liste .pj-zeile-rahmen:hover { border-color: var(--pj-eis); }
.pj-block--liste .pj-zeile-rahmen .pj-zeile { flex: 1 1 20rem; border: none; }
.pj-block--liste .pj-zeile-rahmen .pj-zeile:hover { background: transparent; }
.pj-block--liste .pj-zeile-rahmen .pj-taten { margin: 0; }

/* Symbol im beschrifteten Knopf */
.pj-block .pj-knopf svg { margin-right: .5rem; }

/* ---------- Schlagworte ----------
   Aus gigAdmin, als Rautenwörter. Bewusst keine Links: Sie sollen einordnen,
   nicht wegführen — und eine Filterseite je Schlagwort gäbe es ohnehin nicht. */
.pj-block .pj-worte {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: .9rem 0 0;
}
/* Direkt unter dem Titel: dort brauchen sie oben keinen Abstand */
.pj-block--zeitstrahl .pj-strahl-titel + .pj-worte { margin: 0 0 .8rem; }
.pj-block .pj-wort {
  display: inline-block;
  padding: .3rem .8rem;
  background: var(--pj-dunst);
  color: var(--pj-eis-tief);
  font-size: calc(1.2rem * var(--pj-skala, 1)); line-height: 1.3; font-weight: 500;
  /* Ein Schlagwort mit Leerzeichen darf nicht über zwei Zeilen brechen —
     sonst wäre nicht mehr erkennbar, dass es zusammengehört. */
  white-space: nowrap;
  border-radius: 999px;
}

/* In der Kachel etwas gedrängter, dort ist weniger Platz */
.pj-block--kacheln .pj-kachel-titel + .pj-worte { margin: 0 0 .2rem; }
.pj-block--kacheln .pj-kachel-worte { padding: 0 1.4rem; }
.pj-block--kacheln .pj-kachel-worte .pj-worte { margin-top: 0; margin-bottom: .3rem; }
.pj-block--kacheln .pj-kachel-worte .pj-wort { font-size: calc(1.05rem * var(--pj-skala, 1)); padding: .28rem .7rem; }

/* Auf der Detailseite mit etwas mehr Luft */
.pj-block--termin .pj-termin > .pj-worte { margin: 0 0 1.5rem; }


/* ---------- Hinweistext ----------
   Deutlich abgesetzt, damit er nicht als Fließtext gelesen wird. Dort steht oft
   das Wichtigste — eine Verlegung, eine Altersgrenze, ein Ausfall. */
.pj-block .pj-hinweistext {
  display: grid; grid-template-columns: auto 1fr; gap: .8rem;
  margin: 1.1rem 0 0;
  padding: .9rem 1.1rem;
  background: var(--pj-dunst);
  border-left: 4px solid var(--pj-eis);
}
.pj-block .pj-hinweistext-zeichen {
  display: flex; align-items: flex-start; color: var(--pj-eis-tief);
  padding-top: .1rem;
}
.pj-block .pj-hinweistext-zeichen svg { width: calc(26px * var(--pj-skala, 1)); height: calc(26px * var(--pj-skala, 1)); }

.pj-block .pj-hinweistext-marke {
  display: block; margin-bottom: .3rem;
  font-size: calc(0.95rem * var(--pj-skala, 1)); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--pj-eis-tief);
}
.pj-block .pj-hinweistext-inhalt {
  color: var(--pj-navy); font-size: calc(1.5rem * var(--pj-skala, 1)); line-height: 1.5;
  /* Lange Wörter ohne Leerzeichen dürfen den Kasten nicht sprengen —
     in gigAdmin steht dort gelegentlich eine lange Adresse. */
  overflow-wrap: anywhere;
}
.pj-block .pj-hinweistext-inhalt p { margin: 0 0 .6rem; }
.pj-block .pj-hinweistext-inhalt p:last-child { margin-bottom: 0; }
.pj-block .pj-hinweistext-inhalt a { color: var(--pj-eis-tief); }

/* In der Kachel gedrängter */
.pj-block--kacheln .pj-kachel-hinweis { padding: 0 1.4rem; }
.pj-block--kacheln .pj-kachel-hinweis .pj-hinweistext {
  margin-top: 0; margin-bottom: .8rem;
  padding: .7rem .9rem; gap: .6rem;
}
.pj-block--kacheln .pj-kachel-hinweis .pj-hinweistext-inhalt { font-size: calc(1.2rem * var(--pj-skala, 1)); }
.pj-block--kacheln .pj-kachel-hinweis .pj-hinweistext-zeichen svg { width: calc(18px * var(--pj-skala, 1)); height: calc(18px * var(--pj-skala, 1)); }

/* Auf der Detailseite mit mehr Luft und über dem Fließtext */
.pj-block--termin .pj-termin > .pj-hinweistext { margin: 0 0 1.8rem; padding: 1.1rem 1.3rem; }


/* ---------- Einzelseite: Flyer und Text nebeneinander ---------- */
.pj-block--termin .pj-termin-haupt {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: start;
  margin: 2rem 0;
}
.pj-block--termin .pj-termin-haupt--einspaltig { grid-template-columns: 1fr; }

.pj-block--termin .pj-termin-flyer { margin: 0; }
.pj-block--termin .pj-termin-flyer img { display: block; width: 100%; height: auto; }

.pj-block--termin .pj-termin-spalte { min-width: 0; }


/* ---------- Große Knöpfe ---------- */
.pj-block--termin .pj-termin-knoepfe {
  /* Nebeneinander, solange Platz ist — auf schmalen Bildschirmen bricht die
     Reihe von selbst um. */
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .9rem; margin-top: 2rem;
}

.pj-block--termin .pj-bildknopf { display: inline-block; line-height: 0; }
.pj-block--termin .pj-bildknopf img {
  display: block; max-width: 100%; height: auto;
  transition: transform .15s ease;
}
.pj-block--termin .pj-bildknopf:hover img { transform: translateY(-2px); }

.pj-block--termin .pj-grossknopf {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .9rem 1.6rem;
  background: var(--pj-navy); color: #fff; text-decoration: none;
  border-radius: 999px;
  font-size: calc(1.5rem * var(--pj-skala, 1));
  transition: background .15s ease, color .15s ease;
}
.pj-block--termin .pj-grossknopf:hover { background: var(--pj-eis); color: var(--pj-navy); }
.pj-block--termin .pj-grossknopf svg {
  width: calc(24px * var(--pj-skala, 1));
  height: calc(24px * var(--pj-skala, 1));
}

/* ---------- Hinweis auf die Fotostrecke ----------
   Steht über dem Flyer: Bei einem vergangenen Termin ist das oft das, wonach
   gesucht wird — unten würde man es erst nach dem ganzen Text finden. */
.pj-block--termin .pj-fotohinweis {
  /* Mittig und ohne Kante links: Der Streifen ist kein Nebenhinweis, sondern
     eine Einladung — er darf wie ein Knopf wirken. */
  display: flex; align-items: center; justify-content: center;
  gap: 1.4rem;
  padding: 1.6rem 1.6rem;
  margin: 0 0 2.5rem;
  background: var(--pj-dunst);
  text-align: center;
  color: var(--pj-navy);
  transition: background .15s ease;
}
.pj-block--termin .pj-fotohinweis:hover { background: #dff4fa; }

.pj-block--termin .pj-fotohinweis-zeichen {
  display: grid; place-items: center; flex: none;
  width: 4rem; height: 4rem;
  background: var(--pj-navy); color: var(--pj-eis);
}
.pj-block--termin .pj-fotohinweis-zeichen svg {
  width: calc(32px * var(--pj-skala, 1));
  height: calc(32px * var(--pj-skala, 1));
}

.pj-block--termin .pj-fotohinweis-text {
  font-size: calc(1.9rem * var(--pj-skala, 1));
  font-weight: 700; line-height: 1.3;
}

/* ---------- Karte ---------- */
.pj-block--termin .pj-karte {
  margin: 2.5rem 0 0;
  aspect-ratio: 21 / 9;
  background: var(--pj-dunst);
  overflow: hidden;
}
.pj-block--termin .pj-karte iframe { display: block; width: 100%; height: 100%; border: 0; }

.pj-block--termin .pj-karte-schranke {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  padding: 1.5rem; text-align: center;
  background:
    repeating-linear-gradient(45deg,
      rgba(135, 206, 220, .12) 0 12px, transparent 12px 24px),
    var(--pj-dunst);
}
.pj-block--termin .pj-karte-hinweis { max-width: 46ch; }
.pj-block--termin .pj-karte-hinweis p {
  margin: 0 0 .7rem;
  font-size: calc(1.5rem * var(--pj-skala, 1)); line-height: 1.5;
  color: var(--pj-navy);
}
.pj-block--termin .pj-karte-hinweis .pj-knopfreihe { justify-content: center; margin: 1.2rem 0 0; }

.pj-block--termin .pj-karte-merken {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem;
  font-size: calc(0.95rem * var(--pj-skala, 1)); color: var(--pj-leise); cursor: pointer;
}
.pj-block--termin .pj-karte-merken input { width: 18px; height: 18px; accent-color: var(--pj-eis-tief); }


@media (prefers-reduced-motion: reduce) {
  .pj-block--termin .pj-bildknopf img { transition: none; }
  .pj-block--termin .pj-bildknopf:hover img { transform: none; }
}

/* ---------- Eckdaten als Kartenreihe ---------- */
.pj-block--termin .pj-eckdaten {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--pj-linie);
  border: 1px solid var(--pj-linie);
  margin: 0 0 2rem;
}
.pj-block--termin .pj-eckdatum {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: 1.1rem 1.2rem;
  background: #fff;
}
.pj-block--termin .pj-eckdatum-zeichen {
  color: var(--pj-eis-tief); flex: none; padding-top: .15rem;
}
.pj-block--termin .pj-eckdatum-zeichen svg {
  width: calc(24px * var(--pj-skala, 1));
  height: calc(24px * var(--pj-skala, 1));
}
.pj-block--termin .pj-eckdatum-kern { min-width: 0; }
.pj-block--termin .pj-eckdatum-name {
  display: block;
  font-size: calc(0.95rem * var(--pj-skala, 1));
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pj-leise); margin-bottom: .15rem;
}
.pj-block--termin .pj-eckdatum-wert {
  display: block;
  font-size: calc(1.5rem * var(--pj-skala, 1));
  font-weight: 600; line-height: 1.35; color: var(--pj-navy);
}

/* ---------- Kopf der Einzelseite ---------- */
.pj-block--termin .pj-termin-name {
  margin: 0 0 .5rem;
  font-size: calc(2.4rem * var(--pj-skala, 1)); line-height: 1.15;
}

/* ---------- Fließtext ---------- */
.pj-block--termin .pj-termin-text {
  font-size: calc(1.5rem * var(--pj-skala, 1));
  line-height: 1.7;
}
.pj-block--termin .pj-termin-text p { margin: 0 0 1rem; }
.pj-block--termin .pj-termin-text p:last-child { margin-bottom: 0; }
.pj-block--termin .pj-termin-text a { color: var(--pj-eis-tief); }


/* ---------- Breite ----------
   Ein Plugin steckt in der Spalte des Themes. Um breiter zu werden, muss der
   Block bewusst daraus ausbrechen: Die Randabstände werden über negative
   Ränder aufgehoben, dann die gewünschte Breite gesetzt.

   Greift erst ab 1000 Pixeln — auf schmalen Bildschirmen gibt es nichts
   auszubrechen, dort würde es den Inhalt nur an den Rand drücken. */
@media (min-width: 1000px) {
  .pj-block--weit,
  .pj-block--voll {
    /* Aus der Spalte ausbrechen: von der Mitte des Fensters aus rechnen */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* Danach wieder eine ruhige Breite geben */
  .pj-block--weit > * {
    max-width: var(--pj-max, 1400px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .pj-block--voll > * {
    padding-left: clamp(2rem, 4vw, 5rem);
    padding-right: clamp(2rem, 4vw, 5rem);
  }

  /* Der Termin selbst ist ein einzelnes Kind — dort greift die Regel oben.
     Bei mehreren Kindern (Kopf plus Inhalt) ebenso. */
  .pj-block--weit > .pj-kopf { max-width: var(--pj-max, 1400px); }
}

/* Auf breiten Seiten mehr Platz für den Flyer */
@media (min-width: 1200px) {
  .pj-block--weit .pj-termin-haupt,
  .pj-block--voll .pj-termin-haupt {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  }
}

/* Hinweis in der rechten Spalte: dort ohne oberen Abstand, er steht ganz oben */
.pj-block--termin .pj-termin-spalte > .pj-hinweistext:first-child { margin-top: 0; margin-bottom: 1.5rem; }

/* Sprungziel der Fotostrecke: Abstand, damit die Überschrift nicht
   unter einer festen Kopfzeile verschwindet */
#pj-fotos { scroll-margin-top: 6rem; padding-top: 1rem; }

/* ---------- Großansicht ----------
   Liegt außerhalb von .pj-block, deshalb hier ohne den üblichen Vorsatz. */
.pj-gross {
  position: fixed; inset: 0; z-index: 100000;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .5rem; padding: 1rem;
  background: rgba(0, 9, 73, .95);
}
.pj-gross[hidden] { display: none; }

/* Hintergrund festhalten, solange die Großansicht offen ist */
body.pj-gross-offen { overflow: hidden; }

.pj-gross-rahmen {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .8rem; min-width: 0; max-height: 100%;
}
.pj-gross-rahmen img {
  display: block; max-width: 100%; max-height: calc(100vh - 6rem);
  width: auto; height: auto; object-fit: contain;
}
.pj-gross-rahmen figcaption {
  color: rgba(255, 255, 255, .85); font-size: 1rem; text-align: center;
  max-width: 60ch;
}
.pj-gross-rahmen figcaption[hidden] { display: none; }

.pj-gross button {
  background: transparent; border: 0; color: #fff; cursor: pointer;
  display: grid; place-items: center;
  width: 56px; height: 56px; font-size: 2.6rem; line-height: 1;
  opacity: .75; transition: opacity .15s ease;
}
.pj-gross button:hover,
.pj-gross button:focus-visible { opacity: 1; }

.pj-gross-zu {
  position: absolute; top: .8rem; right: 1rem;
  font-size: 2.2rem !important;
}

.pj-gross-zaehler {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .7); font-size: .95rem; letter-spacing: .1em;
}


@media (prefers-reduced-motion: reduce) {
  .pj-gross button { transition: none; }
}

/* ---------- Schranke für Flickr-Bilder ---------- */
.pj-block .pj-fotoschranke {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin-bottom: 1.5rem;
  text-align: center;
  background:
    repeating-linear-gradient(45deg,
      rgba(135, 206, 220, .12) 0 12px, transparent 12px 24px),
    var(--pj-dunst);
}
.pj-block .pj-fotoschranke[hidden] { display: none; }

.pj-block .pj-fotoschranke-kern { max-width: 46ch; margin-inline: auto; }
.pj-block .pj-fotoschranke-zeichen { display: block; color: var(--pj-eis-tief); margin-bottom: .8rem; }
.pj-block .pj-fotoschranke-zeichen svg {
  width: calc(34px * var(--pj-skala, 1));
  height: calc(34px * var(--pj-skala, 1));
}
.pj-block .pj-fotoschranke p {
  margin: 0 0 1.2rem;
  font-size: calc(1.5rem * var(--pj-skala, 1)); line-height: 1.5; color: var(--pj-navy);
}
.pj-block .pj-fotoschranke .pj-knopfreihe { justify-content: center; margin: 0; }
.pj-block .pj-fotoschranke-merken {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem;
  font-size: calc(0.95rem * var(--pj-skala, 1)); color: var(--pj-leise); cursor: pointer;
}
.pj-block .pj-fotoschranke-merken input { width: 18px; height: 18px; accent-color: var(--pj-eis-tief); }

/* Platzhalter, solange ein Bild noch nicht geladen ist */
.pj-block img[data-pj-src] {
  display: block; width: 100%; min-height: 140px;
  background: repeating-linear-gradient(45deg,
    rgba(135, 206, 220, .18) 0 10px, rgba(236, 251, 255, .9) 10px 20px);
}
.pj-block .pj-mosaik-bild:has(img[data-pj-src]) { cursor: default; }

/* ---------- Knopf zur Einzelseite ---------- */
.pj-block .pj-tat--mehr {
  width: auto; padding: .55rem 1.1rem; gap: .5rem;
  border: 1px solid var(--pj-linie);
  color: var(--pj-navy);
  font-size: calc(1.05rem * var(--pj-skala, 1));
  font-weight: 600;
}
.pj-block .pj-tat--mehr:hover {
  background: var(--pj-navy); color: #fff; border-color: var(--pj-navy);
  transform: none;
}
.pj-block .pj-tat--mehr svg { width: 20px; height: 20px; }

/* Er steht als Erstes und darf sich vom Rest absetzen */
.pj-block .pj-taten { align-items: center; }

/* ---------- Titel einer Fotostrecke bei [pj_fotos] ----------
   Dort stehen mehrere Strecken untereinander, und der Titel muss die Reihen
   voneinander trennen — bei einer einzelnen Strecke genügt eine schlichte
   Überschrift, hier nicht. Deshalb nur in diesem Abschnitt. */
.pj-block--fotos .pj-album-titel {
  display: flex; align-items: center; gap: 1rem;
  margin: 0 0 1.5rem;
  font-size: calc(2rem * var(--pj-skala, 1));
  line-height: 1.25;
  color: var(--pj-navy);
}

/* Die Linie füllt den Rest der Zeile — dadurch endet der Titel nicht im
   Nichts, und die Trennung zur vorigen Strecke ist sichtbar. */
.pj-block--fotos .pj-album-titel::after {
  content: ''; flex: 1; height: 2px;
  background: var(--pj-eis);
}

/* Mehr Luft zwischen den Strecken als innerhalb einer */
.pj-block--fotos .pj-album + .pj-album {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--pj-linie);
}


/* ============================================================
   Handy und schmale Bildschirme

   Bewusst am Ende und an einer Stelle gebündelt: Vorher lagen die
   Anpassungen über neun Blöcke verstreut, und beim Ändern einer Größe
   musste man alle durchsehen. Hier gilt: gleiche Spezifität, spätere
   Regel gewinnt.
   ============================================================ */

@media (max-width: 780px) {

  /* ---------- Grundsätzliches ---------- */

  .pj-block { padding-bottom: 2rem; }

  /* Auf schmalen Bildschirmen ist Ausbrechen sinnlos — es gibt nichts,
     woraus man ausbrechen könnte. */
  .pj-block--weit,
  .pj-block--voll {
    width: auto; margin-left: 0; margin-right: 0;
  }

  .pj-block .pj-kopf { margin-bottom: 1.6rem; }
  .pj-block .pj-kopf h2 { font-size: calc(1.9rem * var(--pj-skala, 1)); }

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

  /* Genug Fläche zum Treffen, ohne dass die Reihe umbricht */
  .pj-block .pj-taten { gap: .8rem; margin-top: 1rem; }
  .pj-block .pj-tat { min-width: 46px; min-height: 46px; }
  .pj-block .pj-tat svg { width: 26px; height: 26px; }

  .pj-block .pj-tat--mehr {
    flex: 1 1 100%;
    justify-content: center;
    padding: .7rem 1rem;
    order: -1;   /* zuerst — es ist die naheliegendste Handlung */
  }

  .pj-block .pj-knopfreihe { gap: .6rem; }
  .pj-block .pj-knopf { flex: 1 1 100%; justify-content: center; }

  /* ---------- Zeitstrahl ---------- */

  .pj-block--zeitstrahl .pj-zeitstrahl { padding-left: 0; }
  .pj-block--zeitstrahl .pj-zeitstrahl::before { display: none; }

  .pj-block--zeitstrahl .pj-zeitstrahl-jahr {
    margin: 2rem 0 1rem;
    font-size: calc(2rem * var(--pj-skala, 1));
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--pj-eis);
  }
  .pj-block--zeitstrahl .pj-zeitstrahl-jahr::before { display: none; }

  .pj-block--zeitstrahl .pj-zeitstrahl-punkt { margin-bottom: 1.4rem; }

  /* Jeder Termin bekommt einen eigenen Rahmen: Ohne die senkrechte Linie
     fehlt sonst die Gliederung, und die Einträge laufen ineinander. */
  .pj-block--zeitstrahl .pj-strahl-karte {
    grid-template-columns: 1fr; gap: 0;
    border: 1px solid var(--pj-linie);
    background: #fff;
    overflow: hidden;
  }
  .pj-block--zeitstrahl .pj-strahl-bild { max-width: 100%; }
  .pj-block--zeitstrahl .pj-strahl-text { padding: 1.1rem 1.2rem 1.3rem; }

  /* Ohne Flyer bleibt die Fläche leer — dann steht das Datum nicht über
     einem Bild, sondern über dem dunkelblauen Ersatz. */
  .pj-block--zeitstrahl .pj-strahl-bild:not(:has(img)) { min-height: 6rem; }

  /* Das Datum quadratisch in der Ecke des Flyers, mit Jahr */
  .pj-block--zeitstrahl .pj-strahl-datum {
    position: absolute; left: 0; top: 0; z-index: 2;
    /* Kein festes Quadrat, sondern eine Mindestgröße mit Innenabstand: So
       bleibt Luft um die drei Zeilen, auch wenn der Größenregler höher steht. */
    min-width: 6rem; aspect-ratio: 1;
    border-radius: 0;
    flex-direction: column; align-items: center; justify-content: center;
    gap: .15rem; padding: .7rem .6rem; box-shadow: none;
  }
  .pj-block--zeitstrahl .pj-strahl-tag {
    font-size: calc(2rem * var(--pj-skala, 1)); line-height: 1;
  }
  .pj-block--zeitstrahl .pj-strahl-monat {
    margin-top: 0; font-size: calc(.95rem * var(--pj-skala, 1));
  }
  .pj-block--zeitstrahl .pj-strahl-jahr {
    display: block; margin-top: 0;
    font-size: calc(.9rem * var(--pj-skala, 1));
    letter-spacing: .08em; color: rgba(255, 255, 255, .75);
  }

  .pj-block--zeitstrahl .pj-strahl-titel { font-size: calc(1.6rem * var(--pj-skala, 1)); }
  .pj-block--zeitstrahl .pj-strahl-zeile,
  .pj-block--zeitstrahl .pj-strahl-fakten { font-size: calc(1.15rem * var(--pj-skala, 1)); }

  /* ---------- Kacheln ---------- */

  .pj-block--kacheln .pj-kacheln { grid-template-columns: 1fr; gap: 1.2rem; }
  /* Auf einer Spalte gibt es nichts zu zentrieren — die Begrenzung würde die
     Kacheln nur unnötig schmal machen. */
  .pj-block--kacheln .pj-kacheln:not(:has(> :nth-child(2))),
  .pj-block--kacheln .pj-kacheln:not(:has(> :nth-child(3))),
  .pj-block--alben .pj-albenraster:not(:has(> :nth-child(2))),
  .pj-block--alben .pj-albenraster:not(:has(> :nth-child(3))) { max-width: none; }
  /* Der Rahmen ist auf dem Handy wichtiger als am Rechner: Ohne ihn
     verschwimmen die Termine ineinander. */
  .pj-block--kacheln .pj-kachel { border-width: 1px; }
  .pj-block--kacheln .pj-kachel-titel { font-size: calc(1.4rem * var(--pj-skala, 1)); }

  /* Auf schmalen Bildschirmen die Beschriftung über den Wert, sonst bleibt
     für den Ort kaum Platz */
  .pj-block--kacheln .pj-kachel-angabe { grid-template-columns: 9rem 1fr; gap: .5rem; }
  .pj-block--kacheln .pj-kachel-wert { font-size: calc(1.1rem * var(--pj-skala, 1)); }

  /* ---------- Liste ---------- */

  .pj-block--liste .pj-zeile { grid-template-columns: 3.5rem 1fr; gap: .9rem; padding: .9rem 1rem; }
  .pj-block--liste .pj-zeile-rahmen { padding: 0 1rem 1rem; background: #fff; }
  .pj-block--liste .pj-zeile-kern strong { font-size: calc(1.3rem * var(--pj-skala, 1)); }

  /* ---------- Einzelner Termin ---------- */

  .pj-block--termin .pj-termin-name { font-size: calc(1.9rem * var(--pj-skala, 1)); }

  /* Zwei Angaben nebeneinander statt einer — sonst wird die Liste sehr lang */
  .pj-block--termin .pj-eckdaten { grid-template-columns: repeat(2, 1fr); }
  .pj-block--termin .pj-eckdatum { padding: .8rem .9rem; gap: .6rem; }
  .pj-block--termin .pj-eckdatum-zeichen svg {
    width: calc(20px * var(--pj-skala, 1)); height: calc(20px * var(--pj-skala, 1));
  }
  .pj-block--termin .pj-eckdatum-wert { font-size: calc(1.1rem * var(--pj-skala, 1)); }
  .pj-block--termin .pj-eckdatum-name { font-size: calc(.85rem * var(--pj-skala, 1)); }

  .pj-block--termin .pj-termin-haupt { grid-template-columns: 1fr; gap: 1.5rem; }
  .pj-block--termin .pj-termin-text { font-size: calc(1.15rem * var(--pj-skala, 1)); }

  /* Auf dem Handy untereinander und über die volle Breite */
  .pj-block--termin .pj-termin-knoepfe { flex-direction: column; align-items: stretch; }
  .pj-block--termin .pj-grossknopf { justify-content: center; }

  .pj-block--termin .pj-fotohinweis { padding: 1.2rem 1rem; gap: 1rem; margin-bottom: 1.8rem; }
  .pj-block--termin .pj-fotohinweis-zeichen { width: 3rem; height: 3rem; }
  .pj-block--termin .pj-fotohinweis-zeichen svg {
    width: calc(24px * var(--pj-skala, 1)); height: calc(24px * var(--pj-skala, 1));
  }
  .pj-block--termin .pj-fotohinweis-text { font-size: calc(1.4rem * var(--pj-skala, 1)); }
  .pj-block--termin .pj-bildknopf { text-align: center; }
  .pj-block--termin .pj-bildknopf img { margin-inline: auto; }

  .pj-block--termin .pj-karte { aspect-ratio: 4 / 3; }

  /* ---------- Fotos ---------- */

  .pj-block--alben .pj-albenraster { grid-template-columns: 1fr; gap: 1.2rem; }
  .pj-block--alben .pj-jahrwahl { margin-bottom: 1.4rem; }
  .pj-block--alben .pj-jahrwahl select { width: 100%; }

  .pj-block .pj-mosaik { column-count: 2; column-gap: .6rem; }
  .pj-block .pj-mosaik-bild { margin-bottom: .6rem; }

  .pj-block .pj-album-titel { font-size: calc(1.5rem * var(--pj-skala, 1)); }
  .pj-block--fotos .pj-album-titel { font-size: calc(1.6rem * var(--pj-skala, 1)); gap: .8rem; }
  .pj-block--fotos .pj-album + .pj-album { margin-top: 2.5rem; padding-top: 2rem; }
  .pj-block .pj-album-fuss { flex-direction: column; align-items: stretch; }

  /* ---------- Hinweise und Schranken ---------- */

  .pj-block .pj-hinweistext { padding: .8rem .9rem; gap: .6rem; }
  .pj-block .pj-fotoschranke { padding: 1.4rem 1rem; }
  .pj-block .pj-karte-hinweis .pj-knopfreihe { flex-direction: column; }
}

/* Sehr schmale Geräte */
@media (max-width: 420px) {
  .pj-block--termin .pj-eckdaten { grid-template-columns: 1fr; }
  .pj-block .pj-mosaik { column-count: 1; }
  .pj-block--zeitstrahl .pj-strahl-titel { font-size: calc(1.4rem * var(--pj-skala, 1)); }
}

/* Standardtext, wenn keine Termine anstehen — aus den Einstellungen, deshalb
   mit Absätzen und Auszeichnungen statt eines einzelnen Satzes.

   Bewusst ohne Breitenbegrenzung: Er steht an derselben Stelle wie sonst die
   Termine und soll dieselbe Breite haben, sonst wirkt die Seite unruhig. */
.pj-block .pj-leer--reich {
  max-width: none; margin-inline: 0;
  text-align: left;
}
.pj-block .pj-leer--reich p { margin: 0 0 1.1rem; }
.pj-block .pj-leer--reich p:last-child { margin-bottom: 0; }
.pj-block .pj-leer--reich a { color: var(--pj-eis-tief); }

/* Platzhalter, solange eine Fotostrecke noch geladen wird */
.pj-block--fotos .pj-album--wartet { min-height: 12rem; }
.pj-block--fotos .pj-album-laedt {
  margin: 0; padding: 2rem 0;
  color: var(--pj-leise);
  font-size: calc(1.2rem * var(--pj-skala, 1));
}
/* Ein ruhiges Pulsieren zeigt, dass etwas passiert — ohne Drehkreisel,
   der bei mehreren Strecken unruhig wirkt. */
.pj-block--fotos .pj-album-laedt { animation: pj-pulsieren 1.6s ease-in-out infinite; }

@keyframes pj-pulsieren {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pj-block--fotos .pj-album-laedt { animation: none; opacity: .7; }
}