/* ==========================================================================
   Jüdische Gemeinde Duisburg-Mülheim/Ruhr-Oberhausen
   Statische Website - eine einzige Stylesheet-Datei, kein Framework.
   ========================================================================== */

/* --- Schriften (lokal gehostet, kein Google-Fonts-CDN / DSGVO-konform) --- */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto-500.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/roboto-700.woff2") format("woff2");
}

/* --- Design-Tokens ------------------------------------------------------- */
:root {
  --blue: #015aaa;
  --blue-dark: #01467f;
  --blue-light: #aed8f2;
  --blue-tint: #f2f8fd;

  --ink: #22262b;
  --text: #4a5058;
  /* Etwas dunkler als ursprünglich (#6d757e): der alte Wert erreichte auf
     der getönten Fläche --surface-alt nur einen Kontrast von 4,39 und lag
     damit unter der Anforderung 4,5 der WCAG-Stufe AA. Jetzt 4,65 auf der
     Tönung und 4,95 auf Weiß. */
  --text-muted: #69717a;
  --line: #e2e6ea;
  --surface: #ffffff;
  --surface-alt: #f6f8fa;
  --footer-bg: #1c2733;

  --wrap: 1120px;
  --radius: 4px;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 8px 24px rgba(16, 24, 40, 0.06);

  --space-section: clamp(1.25rem, 2.25vw, 2rem);
}

/* --- Reset / Basis ------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* verhindert, dass Sprungziele unter dem stehenden Header verschwinden */
  scroll-padding-top: 6rem;
}

/* Ab dieser Breite steht das Logo ueber dem Menu, die Kopfzeile ist also
   hoeher - die Sprungziele brauchen entsprechend mehr Vorlauf. */
@media (min-width: 1151px) {
  html {
    scroll-padding-top: 8.5rem;
  }
}

body {
  margin: 0;
  font-family: "Roboto", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  /* Lange URLs (etwa in der Datenschutzerklärung) dürfen umbrechen, damit
     die Seite auf schmalen Displays nicht seitlich scrollt. */
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 0.6em;
  text-wrap: balance;
  /* Lange deutsche Wortzusammensetzungen ("Datenschutzerklärung",
     "Integrationsagenturen") passen auf schmalen Displays sonst nicht in
     eine Zeile. Die Sprache steht am <html>-Element, also trennt der
     Browser nach deutschen Regeln. */
  hyphens: auto;
}

h1 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
}
h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}
h3 {
  font-size: 1.2rem;
}

p {
  margin: 0 0 1.15em;
}

/* Der letzte Absatz eines Blocks bekommt keinen Abstand nach unten - sonst
   addiert er sich zum Abstand der Sektion und der Zwischenraum wirkt leer. */
.prose > :last-child,
.section__lead > :last-child,
.split__text > :last-child,
.card__body > :last-child,
.welcome > :last-child {
  margin-bottom: 0;
}

a {
  color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--blue-dark);
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Layout-Hilfen ------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.section {
  padding-block: var(--space-section);
}

/* Alles in einer Sektion ist mittig gesetzt - auch Elemente, die nicht in
   einem der Bloecke wie .prose oder .section__lead stecken (einzelne
   Absaetze, Zwischentitel, Schaltflaechen). Kopf- und Fussbereich sind
   nicht betroffen, deren .wrap liegt nicht in einer .section. */
.section > .wrap {
  text-align: center;
}

.section--tint {
  background: var(--surface-alt);
}

/* Die ganze Website ist mittig gesetzt: Textspalten stehen in der
   Seitenmitte, die Zeilen sind zentriert. Deshalb sind die Spalten
   bewusst schmaler als bei linksbuendigem Satz - zentrierte Zeilen
   lesen sich nur bei kurzer Zeilenlaenge gut. */
.section__lead {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--blue);
  color: #fff;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
  color: #fff;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background: var(--blue);
  color: #fff;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.btn:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--blue);
}

.btn--ghost:hover {
  background: var(--blue);
  color: #fff;
}

/* ==========================================================================
   Kopfbereich und Navigation - vollständig ohne JavaScript
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5rem;
}

/* Ab der Breite, in der das Menu in einer Zeile Platz hat, steht das Logo
   mittig darueber - passend zur zentrierten Startseite. Auf schmalen
   Displays bleiben Logo und Menuschalter nebeneinander, damit der
   Schalter am Rand gut erreichbar ist. */
@media (min-width: 1151px) {
  .site-header__inner {
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    min-height: 0;
    padding-block: 0.6rem;
  }
}

.site-logo {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

.site-logo img {
  width: 300px;
  max-width: min(300px, 52vw);
  height: auto;
}

/* In der zentrierten Anordnung steht das Logo ueber dem Menu; etwas
   kleiner, damit die mitlaufende Kopfzeile nicht zu viel Platz belegt. */
@media (min-width: 1151px) {
  .site-logo img {
    width: 250px;
    max-width: 250px;
  }
}

/* Der Umschalter ist eine versteckte Checkbox; das Label ist die Schaltfläche.
   Ab 1151px ist das Label ausgeblendet und die Checkbox nutzlos - sie wird
   deshalb dort ganz entfernt, sonst bleibt beim Blättern mit der
   Tabulatortaste eine unsichtbare Station uebrig, die nichts bewirkt. */
.nav-toggle {
  display: none;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle-label {
  display: none;
  flex: 0 0 auto;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

.nav-toggle:focus-visible + .nav-toggle-label {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.nav-toggle-label__bars {
  display: inline-block;
  width: 1.1em;
  margin-right: 0.45em;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  height: 0.72em;
  position: relative;
  vertical-align: -0.1em;
}

.nav-toggle-label__bars::before {
  content: "";
  position: absolute;
  inset: calc(50% - 1px) 0 auto 0;
  border-top: 2px solid currentColor;
}

.nav {
  flex: 1 1 auto;
}

.nav__list,
.nav__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.15rem;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.nav__link:hover {
  background: var(--blue-tint);
  color: var(--blue);
}

.nav__link[aria-current="page"] {
  color: var(--blue);
  box-shadow: inset 0 -2px 0 var(--blue);
}

/* Reine Gruppenüberschrift im Menü (Termine, Rabbinat, Soziales) - diese
   Punkte haben keine eigene Seite und sind deshalb nicht anklickbar. */
.nav__link--group {
  color: var(--text-muted);
  cursor: default;
}

.nav__link--group:hover {
  background: none;
  color: var(--text-muted);
}

.nav__item--has-sub > .nav__link::after {
  content: "";
  display: inline-block;
  margin-left: 0.45em;
  border: 0.28em solid transparent;
  border-top-color: currentColor;
  vertical-align: 0.08em;
}

.nav__sublist {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 15rem;
  padding: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* Verborgen. visibility: hidden nimmt die Links zugleich aus der
     Tabulatorreihenfolge - das Untermenue laesst sich also nur oeffnen, wenn
     der Kopf des Menuepunkts selbst den Fokus bekommen kann. Bei "Gemeinde"
     und "Angebote" ist das ein <a>; die drei Gruppen ohne eigene Seite sind
     <span> und tragen deshalb tabindex="0" im HTML. Ohne das waeren sieben
     Seiten mit der Tastatur ueber das Menue nicht erreichbar. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}

.nav__item--has-sub:hover > .nav__sublist,
.nav__item--has-sub:focus-within > .nav__sublist {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.nav__sublist .nav__link {
  white-space: normal;
  font-weight: 400;
}

/* Mobile Navigation
   1150.98px statt 1150px: bei gebrochenen Breiten - etwa nach Browser-Zoom -
   klafft zwischen max-width: 1150px und min-width: 1151px sonst eine Luecke,
   in der weder das mobile noch das grosse Menue greift. */
@media (max-width: 1150.98px) {
  .nav-toggle {
    display: block;
  }

  .nav-toggle-label {
    display: inline-block;
    order: 3;
  }

  .nav {
    order: 4;
    flex-basis: 100%;
    display: none;
    padding-bottom: 1rem;
  }

  .nav-toggle:checked ~ .nav {
    display: block;
  }

  .site-header__inner {
    flex-wrap: wrap;
  }

  .nav__list {
    display: block;
    border-top: 1px solid var(--line);
    padding-top: 0.5rem;
  }

  .nav__link {
    padding: 0.7rem 0.25rem;
    font-size: 1rem;
  }

  /* Untermenüs auf Mobilgeräten immer offen - kein Antippen zum Aufklappen. */
  .nav__sublist {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    min-width: 0;
    margin: 0 0 0.5rem 0.9rem;
    padding: 0;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    transition: none;
  }

  .nav__sublist .nav__link {
    padding-left: 0.9rem;
    font-size: 0.95rem;
  }

  .nav__item--has-sub > .nav__link::after {
    display: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  display: grid;
  /* minmax(0, 1fr) statt der Vorgabe auto: sonst zieht ein langes Wort im
     Titel ("Datenschutzerklärung") die Spalte auf seine Mindestbreite und
     der Hero wird breiter als der Bildschirm. */
  grid-template-columns: minmax(0, 1fr);
  /* Inhalt senkrecht und waagerecht in der Mitte */
  align-items: center;
  min-height: min(17rem, 36vh);
  background: var(--footer-bg) center / cover no-repeat;
  color: #fff;
}

/* Abdunkelung des Bildes. Da die Schrift jetzt in der Bildmitte steht,
   ist der Verlauf dort kräftiger als früher, damit der Text überall
   ausreichend Kontrast hat. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Der obere Rand war mit 0,42 zu schwach: mehrere Kopfbilder sind dort fast
     weiss (bei hero-sozialabteilung.jpg liegt die mittlere Helligkeit des
     oberen Fuenftels bei 0,88), und weisse Schrift kam ueber solchen Stellen
     nur auf 2,8 statt der geforderten 4,5. Mit 0,62 sind es auch ueber einem
     rein weissen Bild noch 5,24. */
  background: linear-gradient(
    to top,
    rgba(6, 20, 33, 0.80) 0%,
    rgba(6, 20, 33, 0.68) 50%,
    rgba(6, 20, 33, 0.62) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(1.25rem, 2.25vw, 1.75rem);
  text-align: center;
}

.hero__title {
  color: #fff;
  max-width: 38rem;
  margin-inline: auto;
  margin-bottom: 0.35em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  /* Notfall-Umbruch, wenn der Browser ein langes Wort nicht trennen kann. */
  overflow-wrap: anywhere;
}

.hero__subtitle {
  max-width: 34rem;
  margin: 0 auto;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   Seitenkopf ohne Bild
   Fuer Impressum und Datenschutzerklaerung: dort waere ein Foto nur
   Zierde ueber einem Rechtstext - und kostet zudem Ladezeit.
   ========================================================================== */
.page-head {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.page-head .breadcrumb {
  color: var(--text-muted);
}

.page-head .breadcrumb a {
  color: var(--blue);
}

.page-head .breadcrumb li + li::before {
  color: var(--text-muted);
}

.page-head h1 {
  margin-bottom: 0;
}

/* Schlanke Variante für Unterseiten */
.hero--page {
  min-height: min(10.5rem, 22vh);
}

.hero--page .hero__title {
  max-width: 40rem;
}

/* Brotkrumen */
.breadcrumb {
  position: relative;
  z-index: 1;
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  /* Die aktuelle Seite - kein Link. 0,8 blieb ueber hellen Bildstellen mit
     4,03 unter der Anforderung; 0,92 ergibt 4,73. Von den Links unterscheidet
     sie sich ohnehin durch die fehlende Unterstreichung. */
  color: rgba(255, 255, 255, 0.92);
}

.breadcrumb a {
  /* Voll deckend wie die Ueberschrift daneben - 90 Prozent kosteten ueber
     hellen Bildstellen den Rest des Kontrastabstands. */
  color: #fff;
}

.breadcrumb li + li::before {
  content: "»";
  margin-right: 0.4rem;
  color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   Willkommen
   ========================================================================== */
.welcome {
  text-align: center;
}

.welcome__hebrew {
  margin: 0 0 0.1em;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.3;
  color: var(--blue);
  direction: rtl;
  unicode-bidi: isolate;
}

.welcome__title {
  margin-bottom: 0.8em;
}

.welcome__text {
  max-width: 40rem;
  margin-inline: auto;
  font-size: 1.15rem;
}

/* ==========================================================================
   Textinhalte
   ========================================================================== */
.prose {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

/* Abstand zum Grusstext darueber (Startseite). */
.welcome .prose {
  margin-top: clamp(1.25rem, 2.25vw, 1.75rem);
}

/* Zitat: mittig gesetzt, deshalb Linien oben und unten statt am Rand. */
.prose blockquote {
  margin: 2rem auto;
  padding: 1.25rem 0;
  border-top: 2px solid var(--blue-light);
  border-bottom: 2px solid var(--blue-light);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--ink);
}

.prose ul,
.prose ol {
  display: inline-block;
  text-align: left;
  margin-inline: auto;
}

/* Ein Bild ist ein Blockelement - "text-align: center" bewegt es nicht,
   dafuer braucht es automatische Seitenraender. */
.prose img {
  margin-inline: auto;
}

/* ==========================================================================
   Inhaltsverzeichnis (Datenschutzerklaerung)
   Die Seite ist lang; ohne Verzeichnis findet man einen Abschnitt nur
   durch Scrollen.
   ========================================================================== */
.toc {
  max-width: 42rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding: 1.25rem 1.5rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
}

.toc h2 {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
}

.toc ol {
  margin: 0;
  padding-left: 1.6rem;
  display: grid;
  gap: 0.3rem;
  font-size: 0.95rem;
}

.toc a {
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
}

/* Sprungziele nicht unter der mitlaufenden Kopfzeile verstecken. */
.prose h2[id] {
  scroll-margin-top: 6rem;
}

@media (min-width: 1151px) {
  .prose h2[id] {
    scroll-margin-top: 8.5rem;
  }
}

/* ==========================================================================
   Bildergalerie
   ========================================================================== */
.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Variante der Startseite: feste drei Spalten. Bei den sechs Bildern dort
   ergibt das zwei voll besetzte Reihen - "auto-fit" liess die letzte
   Reihe je nach Fensterbreite halb leer. Auf schmalen Displays eine
   Spalte, damit die Bilder nicht zu klein werden. */
.gallery--drei {
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .gallery--drei {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gallery img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ==========================================================================
   Karten (Übersichtsseiten, Angebote)
   ========================================================================== */
.cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.25rem;
  text-align: center;
}

/* Die Überschriftenstufe einer Karte richtet sich nach ihrer Stelle in der
   Seitengliederung - h2 auf Übersichtsseiten, h4 unter einem Büro. Das Aussehen
   soll dabei gleich bleiben, deshalb gelten die Regeln für alle Stufen. */
.card h2,
.card h3,
.card h4 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}

.card p {
  font-size: 0.98rem;
}

.card__more {
  margin-top: auto;
  font-weight: 500;
  text-decoration: none;
}

.card__more:hover {
  text-decoration: underline;
}

/* Abschnitte mit Bild und Text im Wechsel (Angebote) */
.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding-block: 0 clamp(1.5rem, 3.5vw, 2.5rem);
  /* Sprungziele der Menupunkte Bibliothek, Chor usw. - der Wert richtet
     sich nach der Hoehe der mitlaufenden Kopfzeile. */
  scroll-margin-top: 6rem;
}

@media (min-width: 1151px) {
  .split {
    scroll-margin-top: 8.5rem;
  }
}

/* Die Trennlinie gehoert zwischen zwei Abschnitte, nicht ueber den ersten.
   Frueher stand sie an .split und wurde per :first-of-type wieder abgezogen -
   das zaehlt aber alle div-Geschwister mit, und auf der Friedhof-Seite steht
   ein .section__lead davor. Dort blieb deshalb eine Linie ueber dem ersten
   Abschnitt stehen. Mit dem Nachbarschaftszeichen ist die Regel unabhaengig
   davon, was sonst noch im selben Kasten liegt. */
.split + .split {
  border-top: 1px solid var(--line);
  padding-top: clamp(1.5rem, 3.5vw, 2.5rem);
}

@media (min-width: 820px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  /* Bei jedem zweiten Abschnitt wandert das Bild nach links. Die Auszeichnung
     steht im HTML statt als :nth-of-type - der Zaehler von :nth-of-type
     beachtet alle div-Geschwister, nicht nur die Abschnitte selbst, und
     verschob die Reihenfolge auf jeder Seite, die noch etwas anderes vor dem
     ersten Abschnitt stehen hat. */
  .split--gespiegelt .split__media {
    order: -1;
  }
}

.split__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Ein Logo wird nicht ueber seine eigene Pixelbreite hinaus vergroessert,
   sonst wird es unscharf. */
.split__media--logo img {
  aspect-ratio: auto;
  object-fit: contain;
  width: auto;
  max-width: 100%;
  max-height: 12rem;
  margin-inline: auto;
  background: var(--surface);
  padding: 1.5rem;
  border: 1px solid var(--line);
}

.split__text {
  text-align: center;
}

.split__text :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Chronik (Geschichte)
   ========================================================================== */
/* Einspaltig und mittig: Jahr bzw. Stichwort oben, Text darunter. Die
   frueher zweispaltige Anordnung passt nicht zum mittigen Satz. */
.timeline {
  max-width: 44rem;
  margin-inline: auto;
  padding: 0;
  border-top: 1px solid var(--line);
  text-align: center;
}

.timeline__row {
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.timeline__year {
  margin: 0 0 0.15rem;
  font-weight: 500;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.timeline__event {
  margin: 0;
}

/* ==========================================================================
   Jüdischer Kalender (von hebcal.com nachgeladen, siehe assets/js/hebcal.js)
   ========================================================================== */
/* Zwischenüberschrift über einer Liste oder Kartenreihe. */
.subhead,
.hebcal__monat {
  margin: 2.5rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--blue-light);
  color: var(--blue);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.subhead:first-child,
.hebcal__monat:first-child {
  margin-top: 0;
}

.hebcal__hdatum {
  color: var(--text-muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

.hebcal__quelle,
.hebcal__hinweis {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.hebcal__hinweis {
  max-width: 40rem;
  margin-inline: auto;
  padding: 1rem 1.25rem;
  background: var(--surface-alt);
  border-top: 3px solid var(--blue-light);
  border-radius: var(--radius);
}

.hebcal {
  text-align: center;
}

/* ==========================================================================
   Kontakt
   ========================================================================== */
/* Eine einzige mittige Spalte. Zwei Spalten nebeneinander standen zwar
   je fuer sich mittig, aber nicht in der Mitte der Seite. */
.contact-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.contact-grid > * {
  width: 100%;
  max-width: 42rem;
}

.contact-list {
  margin: 0;
  display: grid;
  gap: 1.25rem;
}

.contact-list dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.contact-list dd {
  margin: 0.2rem 0 0;
  font-size: 1.1rem;
  color: var(--ink);
}

.contact-list dd a {
  font-weight: 500;
}

.map-card {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

/* Nicht ueber die eigene Pixelbreite hinaus vergroessern - der
   Kartenausschnitt ist nur 554 px breit und wuerde sonst unscharf. */
.map-card img {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

.map-card figcaption {
  padding: 0.75rem 1rem;
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-top: 1px solid var(--line);
  text-align: center;
}

.callout {
  max-width: 42rem;
  margin-inline: auto;
  padding: 1.5rem;
  background: var(--blue-tint);
  border: 1px solid var(--blue-light);
  border-radius: var(--radius);
  text-align: center;
}

.callout :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Fußbereich
   ========================================================================== */
.site-footer {
  background: var(--footer-bg);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  padding-block: clamp(2rem, 4vw, 3rem) 1.25rem;
}

/* Auf den dunklen Flaechen - Fussbereich und die abgedunkelten Kopfbilder -
   erreicht der blaue Fokusrahmen nur 2,19 statt der geforderten 3,0 aus
   WCAG 1.4.11. Dort wird deshalb das helle Blau genommen: 10,02. */
.site-footer :focus-visible,
.hero :focus-visible {
  outline-color: var(--blue-light);
}

/* Logo, Name und Datum stehen als eigene Bahn mittig ueber den Spalten.
   In einer der Spalten sassen sie zwar mittig in ihrer Spalte, aber weit
   links von der Seitenmitte. */
.site-footer__brand {
  max-width: 30rem;
  margin: 0 auto clamp(1.75rem, 3.5vw, 2.5rem);
  text-align: center;
}

.site-footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  text-align: center;
}

.site-footer h2 {
  color: #fff;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.85);
}

.site-footer a:hover {
  color: #fff;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

/* Das Emblem ist eine blaue Scheibe mit weißem Baum darin. Es darf nicht
   umgefärbt werden: ein Filter macht Scheibe und Baum gleich hell, der
   Baum verschwindet dann. Es bleibt in den Originalfarben stehen. */
.site-footer__emblem {
  width: 140px;
  max-width: 100%;
  margin: 0 auto 1rem;
}

.site-footer__date {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
}

.site-footer__bottom {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

/* --- Bewegung reduzieren ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --- Druck --------------------------------------------------------------- */
@media print {
  /* Bedienelemente des Bildschirms haben auf Papier keinen Zweck. */
  .site-header,
  .nav-toggle-label,
  .skip-link,
  .hero::after,
  .toc,
  .site-footer__emblem {
    display: none;
  }

  body {
    color: #000;
    background: #fff;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  /* Browser drucken Hintergründe und Hintergrundbilder standardmäßig nicht.
     Ohne diese Regeln bliebe die weiße Schrift im Hero und im Fußbereich
     auf weißem Papier unsichtbar, und der Hero hinterließe einen leeren
     Block in Bildhöhe. */
  .hero,
  .hero--page,
  .page-head,
  .site-footer {
    min-height: 0;
    background: none;
    border: 0;
    color: #000;
  }

  .hero__title,
  .hero__subtitle,
  .breadcrumb,
  .breadcrumb a,
  .site-footer,
  .site-footer a,
  .site-footer h2,
  .site-footer__date,
  .site-footer__bottom {
    color: #000;
    text-shadow: none;
  }

  .hero__inner,
  .section {
    padding-block: 0.5cm;
  }

  /* Zusammengehörendes nicht über den Seitenrand hinweg trennen. */
  .split,
  .card,
  .timeline__row,
  .contact-list > div {
    break-inside: avoid;
  }

  /* Adresse fremder Verweise mitdrucken - auf Papier kann man nicht klicken. */
  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
}