/*
Theme Name: Joachimsthaler Synagoge
Theme URI: https://berlinsynagoge.com/
Template: generatepress
Description: Child theme for the Joachimsthaler Synagoge website.
Author: Rabbi Ehrenberg
Version: 1.0.6
Text Domain: joachimsthaler-child
*/

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&family=Frank+Ruhl+Libre:wght@400;500;700&display=swap');
:root {
  /* Surface */
  --paper:        #f5efe2;
  --paper-tint:   #faf5ea;
  --card:         #ffffff;

  /* Ink (text) */
  --primary:      #1d3d80;       /* navy — pulled from parochet */
  --primary-soft: #4a6396;
  --primary-faint:#8094bc;
  --ink:          #1a1a1a;
  --ink-soft:     #4a4540;
  --ink-faint:    #7a7570;
  --on-dark:      #f5efe2;

  /* Accent */
  --gold:         #a8854e;
  --gold-soft:    #c5a878;
  --gold-rule:    rgba(168, 133, 78, 0.35);
  --gold-hairline:rgba(168, 133, 78, 0.18);

  /* Effects */
  --shadow-card:  0 1px 2px rgba(20, 30, 60, 0.04),
                  0 12px 40px rgba(20, 30, 60, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(20, 30, 60, 0.06),
                       0 20px 50px rgba(20, 30, 60, 0.10);

  /* Typography */
  --serif:  'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:   'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --hebrew: 'Frank Ruhl Libre', 'David Libre', serif;

  /* Layout */
  --container: 1280px;
  --container-narrow: 720px;
  --jt-header-offset: 5.45rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

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

/* ========== Layout containers ========== */
:where(
  .site-header,
  .utility-bar,
  .hero-times,
  .page-intro,
  .today-section,
  .events-section,
  .visit-section,
  .about-section,
  .support-band,
  .calendar-tabs,
  .jt-footer
) .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2rem;
}

.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ========== Header ========== */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 1.75rem 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;          /* both children take the same column width */
  gap: 0.18rem;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.1;
}

/* Wordmark — inherits the existing brand styling. Text-align: center so
   the wordmark visually centers inside its stretched box. */
.brand .wordmark {
  display: block;
  text-align: center;
}

/* Tagline — letter-spaced spread to match wordmark width. The wider
   tracking gives the tagline an inscriptional/institutional register
   that pairs well with the wordmark above. text-justify: inter-character
   adds character-level distribution where browsers support it (Firefox);
   the letter-spacing baseline carries Chromium fallback. */
.brand .tagline {
  display: block;
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 500;
  color: var(--gold);
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-character;
  letter-spacing: 0.16em;
}

/* Hide the tagline at ≤600px — at that breakpoint the brand becomes flex-1
   for hamburger fit, which would otherwise stretch the tagline across the
   full row width. The wordmark alone carries the brand identity on phones. */
@media (max-width: 600px) {
  .brand .tagline { display: none; }
  .brand { gap: 0; }
}

.site-nav {
  margin-left: 1.5rem;          /* breathing room from the wordmark */
}

.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  font-family: var(--serif);    /* mirrors wordmark family */
  font-size: 0.8rem;
  font-weight: 500;             /* lighter than wordmark's 600 */
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav li { position: relative; }

/* Thin vertical gold-rule separators between nav items */
.site-nav li:not(:last-child)::before {
  content: "";
  position: absolute;
  right: -0.95rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: var(--gold-rule);
}

.site-nav a {
  color: var(--on-dark);
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  transition: opacity 0.2s;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.site-nav a:hover::after,
.site-nav a.active::after { transform: scaleX(1); }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--on-dark);
}

.lang-switch a {
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.lang-switch a.active { opacity: 1; }
.lang-switch a:hover  { opacity: 1; }
.lang-switch a[lang="he"] { font-family: var(--hebrew); font-size: 1rem; }

/* === Utility bar (thin top strip with date + today's prayer times + lang) === */
.utility-bar {
  background: var(--paper);
  border-bottom: 1px solid var(--gold-hairline);
  padding: 1.05rem 0;
}

.utility-bar .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.utility-bar .today-info {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.utility-bar .today-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.utility-bar .today-date {
  font-family: var(--serif);
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.utility-bar .times {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.utility-bar .time-pair {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.utility-bar .time-pair .name {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.utility-bar .time-pair .time {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.utility-bar .lang-switch {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.utility-bar .lang-switch a {
  color: var(--ink-soft);
  opacity: 0.6;
  text-decoration: none;
}

.utility-bar .lang-switch a.active,
.utility-bar .lang-switch a:hover { opacity: 1; color: var(--ink); }

@media (max-width: 760px) {
  .utility-bar .inner { gap: 0.75rem; }
  .utility-bar .today-info { gap: 0.85rem; font-size: 0.72rem; }
  .utility-bar .times { gap: 0.85rem; }
  .utility-bar .time-pair .time { font-size: 0.85rem; }
}

/* === Watch-window time counters (in compact header) === */
.time-counters {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.time-counter {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
  text-decoration: none;
  color: inherit;
}

.time-counter .label {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
}

.time-counter .digits {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.time-counter .digit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1.4em;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--primary);
}

.time-counter .colon {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold);
  padding: 0 0.18em;
  line-height: 1;
}

/* --- Style 1: recessed (real-watch dial-window depth) ---
   Deeper inset shadow at top + bottom inner highlight for the "disc beneath the dial"
   feel. Border colours are asymmetric (darker top, lighter bottom) to suggest the
   chamfered cutout edge catching light from above.                                  */
.time-counter.recessed .digit,
.date-counter.recessed .digit {
  background:
    linear-gradient(180deg,
      #e8dec2 0%,
      #f3ecd5 55%,
      #ede3c8 100%);
  border-style: solid;
  border-width: 1px;
  border-top-color:    #8b7544;
  border-right-color:  #b6a06d;
  border-bottom-color: #e1d3a8;
  border-left-color:   #a08960;
  box-shadow:
    /* main inner top shadow — the recessed feel */
    inset 0 2px 4px rgba(60, 40, 10, 0.28),
    inset 0 1px 1px rgba(60, 40, 10, 0.15),
    /* inner bottom highlight — light catching the curved disc inside */
    inset 0 -1px 1px rgba(255, 250, 230, 0.85),
    /* outer 1px highlight just below — chamfer ridge meeting the dial surface */
    0 1px 0 rgba(255, 255, 255, 0.6);
  color: var(--primary);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* --- Style 2: outlined (clean, no shadow) --- */
.time-counter.outlined .digit {
  background: transparent;
  border: 1px solid var(--gold-rule);
}

/* --- Style 3: filled (navy tiles, cream digits) --- */
.time-counter.filled .digit {
  background: var(--primary);
  color: var(--paper);
  border: 1px solid var(--primary);
}

.time-counter.filled .colon { color: var(--primary); }

/* === Date counter (mirrors time-counter shape with day-num windows + supporting line) === */
.date-counter {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.32rem;
  text-decoration: none;
  color: inherit;
}

.date-counter .label {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
}

.date-counter .row {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1;
}

.date-counter .digits {
  display: inline-flex;
  gap: 2px;
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
}

.date-counter .digit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1.4em;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--primary);
}

.date-counter .support {
  font-family: var(--serif);
  font-size: 0.82rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.date-counter .support .hebrew-date {
  font-family: var(--hebrew);
  font-size: 0.92rem;
}

/* === Date counter — FULL window treatment (day · month · year all in cells) === */
.date-counter.full .full-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.date-counter.full .digit-group {
  display: inline-flex;
  gap: 2px;
}

.date-counter.full .dot {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
}

.date-counter.full .hebrew-support {
  font-family: var(--hebrew);
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-left: 0.4rem;
  line-height: 1;
}

/* === Today indicator — minimal "Heute · Donnerstag" mirroring the time counter shape === */
.today-mark {
  display: inline-flex;
  flex-direction: column;
  gap: 0.32rem;
  text-decoration: none;
  color: inherit;
}

.today-mark .label {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
}

.today-mark .day {
  font-family: var(--serif);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.015em;
  line-height: 1;
}

/* === Info row in header (date + times grouped) — pushed to the right === */
.info-row {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;        /* pushes info-row + lang dropdown to the right */
}

.info-row .divider {
  width: 1px;
  height: 28px;
  background: var(--gold-rule);
}

/* === Compact language dropdown === */
.lang-dropdown {
  position: relative;
}

.lang-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--gold-rule);
  background: var(--paper-tint);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.lang-dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--gold);
  transition: transform 0.2s;
}

/* Checkbox-toggled lang dropdown — tap/click to open or close.
   Works the same on desktop and mobile (no hover-only behavior). */
.lang-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.lang-toggle-input:focus-visible ~ .lang-dropdown-toggle {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.lang-toggle-input:checked ~ .lang-dropdown-toggle {
  border-color: var(--gold);
  background: var(--paper);
}
.lang-toggle-input:checked ~ .lang-dropdown-toggle::after {
  transform: rotate(180deg);
}

.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  background: var(--paper);
  border: 1px solid var(--gold-rule);
  padding: 0.35rem 0;
  display: none;
  flex-direction: column;
  z-index: 100;
  box-shadow: 0 6px 20px rgba(20, 30, 60, 0.08);
}

.lang-toggle-input:checked ~ .lang-dropdown-menu {
  display: flex;
}

.lang-dropdown-menu a {
  display: block;
  padding: 0.5rem 1rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.lang-dropdown-menu a:hover {
  background: var(--paper-tint);
  color: var(--ink);
}

.lang-dropdown-menu a.active {
  color: var(--primary);
  font-weight: 500;
}

.lang-dropdown-menu a[lang="he"] { font-family: var(--hebrew); font-size: 1rem; }

@media (max-width: 980px) {
  /* Tablet — tighten nav and info gaps */
  .site-nav ul { gap: 1.4rem; font-size: 0.82rem; }
  .site-nav li:not(:last-child)::before { right: -0.7rem; }
  .info-row { gap: 1rem; }
  .time-counters { gap: 1rem; }
}

@media (max-width: 1050px) {
  /* Mobile — info-row wraps to its own line below the main header row */
  .site-header.static .container { flex-wrap: wrap; gap: 0.75rem 1rem; }
  .info-row {
    order: 99;
    flex-basis: 100%;
    margin-left: 0;
    justify-content: space-between;
    border-top: 1px solid var(--gold-hairline);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
  }
  .info-row .divider { display: none; }
  .date-counter .support { font-size: 0.7rem; }
  .lang-dropdown-menu { right: -0.5rem; }
  .site-nav ul { gap: 1rem; font-size: 0.78rem; }
  .site-nav li:not(:last-child)::before { right: -0.5rem; height: 10px; }
}

/* === Header variant: separate compact header above hero === */
.site-header.static {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 1.05rem 0;
  background: var(--paper);
  border-bottom: 1px solid var(--gold-rule);
  z-index: 1000;
  box-shadow: 0 1px 0 rgba(168, 133, 78, 0.08);
}

.admin-bar .site-header.static {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .site-header.static { top: 46px; }
}

.site-header.static .container {
  min-height: 3.35rem;
}

.site-header.static,
.site-header.static .container,
.site-header.static .brand,
.site-header.static .tagline,
.site-header.static .info-row {
  transition:
    padding 0.22s ease,
    min-height 0.22s ease,
    gap 0.22s ease,
    font-size 0.22s ease,
    opacity 0.22s ease;
}

.site-header.static.is-scrolled {
  padding: 0.55rem 0;
}

.site-header.static.is-scrolled .container {
  min-height: 2.95rem;
}

.site-header.static.is-scrolled .brand {
  gap: 0.08rem;
}

.site-header.static.is-scrolled .tagline {
  opacity: 0.82;
}

.site-header.static .site-nav {
  display: flex;
  align-items: center;
  align-self: center;
  padding-top: 0;
}

.site-header.static .site-nav ul {
  margin: 0;
  padding: 0;
  line-height: 1;
}

#page {
  padding-top: var(--jt-header-offset);
}

.site-header.static .brand,
.site-header.static .site-nav a,
.site-header.static .lang-switch {
  color: var(--ink);
}

.site-header.static .lang-switch a {
  color: var(--ink);
  opacity: 0.55;
}

.site-header.static .lang-switch a.active,
.site-header.static .lang-switch a:hover {
  opacity: 1;
}

/* ========== Hero ========== */
.hero {
  position: relative;
  width: 100%;
  height: 92vh;
  min-height: 620px;
  max-height: 900px;
  overflow: hidden;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(8, 14, 30, 0.55) 0%,
      rgba(8, 14, 30, 0.05) 18%,
      rgba(8, 14, 30, 0.05) 55%,
      rgba(8, 14, 30, 0.65) 100%);
}

/* Stronger overlay variant — for when hero text needs legibility against the bright chandelier area */
.hero-overlay.strong {
  background:
    linear-gradient(180deg,
      rgba(8, 14, 30, 0.65) 0%,
      rgba(8, 14, 30, 0.45) 30%,
      rgba(8, 14, 30, 0.5) 55%,
      rgba(8, 14, 30, 0.85) 100%);
}

.hero-content.with-shadow .hero-title,
.hero-content.with-shadow .hero-subtitle,
.hero-content.with-shadow .hero-hebrew {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
  color: var(--on-dark);
}

.hero-hebrew {
  font-family: var(--hebrew);
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
  opacity: 0.92;
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.05;
  margin-bottom: 1.2rem;
  max-width: 18ch;
}

.hero-subtitle {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-dark);
  opacity: 0.85;
}

.hero-rule {
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 1.6rem auto 1.4rem;
  opacity: 0.85;
}

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--on-dark);
  opacity: 0.7;
  text-decoration: none;
}

.hero-scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 36px;
  background: var(--on-dark);
  margin: 0.85rem auto 0;
  opacity: 0.6;
}

/* === Prayer strip integrated as gradient overlay on hero === */
.hero-times {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  z-index: 5;
  padding: 5rem 0 2rem;
  background: linear-gradient(180deg,
    rgba(8, 14, 30, 0)   0%,
    rgba(8, 14, 30, 0.5) 45%,
    rgba(8, 14, 30, 0.85) 100%);
  color: var(--on-dark);
}

.hero-times .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.hero-times .today-label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.hero-times .today-date {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  margin-top: 0.2rem;
}

.hero-times .times {
  display: flex;
  gap: 2.75rem;
  font-family: var(--serif);
}

.hero-times .time-item { display: flex; flex-direction: column; gap: 0.25rem; }

.hero-times .time-item .name {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.hero-times .time-item .time {
  font-size: 1.45rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .hero-times { padding: 4rem 0 1.5rem; }
  .hero-times .inner { flex-direction: column; align-items: flex-start; }
  .hero-times .times { gap: 1.5rem; flex-wrap: wrap; }
  .hero-times .time-item .time { font-size: 1.2rem; }
}

/* ========== Prayer-times strip (Today) ========== */
.prayer-strip {
  background: var(--primary);
  color: var(--on-dark);
  padding: 1.4rem 0;
}

/* === Prayer strip variant: light/white === */
.prayer-strip.light {
  background: var(--paper-tint);
  color: var(--ink);
  border-top: 1px solid var(--gold-rule);
  border-bottom: 1px solid var(--gold-rule);
}

.prayer-strip.light .today-label,
.prayer-strip.light .time-item .name {
  color: var(--gold);
}

.prayer-strip.light .today-date {
  color: var(--ink);
}

.prayer-strip.light .time-item .time {
  color: var(--primary);
}

.prayer-strip .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.prayer-strip .today-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.prayer-strip .today-date {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  margin-top: 0.15rem;
}

.prayer-strip .times {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  font-family: var(--serif);
}

.prayer-strip .time-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.prayer-strip .time-item .name {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.prayer-strip .time-item .time {
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* ========== Section base ========== */
section.feature { padding: 7rem 0; }
section.section { padding: 5rem 0; }

.section-kicker {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.15;
  color: var(--primary);
  margin-bottom: 1rem;
}

.section-lede {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 38rem;
  margin-bottom: 2.5rem;
  line-height: 1.55;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* ========== Wall-relief divider — Jugendstil corner ornament from the actual sanctuary,
   mirrored left/right with reeded lines meeting in the middle. Sourced from wall_846. */
.wall-divider {
  display: flex;
  width: 100%;
  /* Height proportional to the cropped viewBox (19 units, mostly the line stack).
     Maintains the original tight line spacing in pixels.                        */
  height: clamp(21px, 2.7vw, 35px);
  overflow: hidden;
}

.wall-half {
  flex: 1;
  position: relative;
  /* Lines fill the half — stretchable horizontally without distortion since they're horizontal */
  background-image: url('wall-lines.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Cluster as a fixed-aspect overlay on the left edge — so the circles stay circular */
.wall-half::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  aspect-ratio: 2 / 3;        /* matches cluster SVG viewBox 16:24 */
  background-image: url('wall-cluster.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Option B variant — pointed iris/lily bud */
.wall-divider.option-b .wall-half::before {
  background-image: url('wall-cluster-b.svg');
}

/* Option C variant — Jugendstil whiplash with curled tips */
.wall-divider.option-c .wall-half::before {
  background-image: url('wall-cluster-c.svg');
  aspect-ratio: 16 / 19;      /* matches cluster's cropped viewBox */
}

/* Option D variant — corner triangle ornaments (frame-like) */
.wall-divider.option-d .wall-half::before {
  background-image: url('wall-cluster-d.svg');
}

/* Option E variant — corners + descending brackets that extend into next section */
.wall-divider.option-e {
  overflow: visible;          /* allows bracket to hang past divider edge */
}

.wall-divider.option-e .wall-half::before {
  background-image: url('wall-cluster-e.svg');
  height: calc(100% + 24px);  /* extends 24px below the divider */
  aspect-ratio: 16 / 48;      /* matches the taller SVG viewBox */
  z-index: 5;                 /* sits above next section content */
}

/* Option F variant — triangular ornament filled with 828-style scroll work */
.wall-divider.option-f .wall-half::before {
  background-image: url('wall-cluster-f.svg');
}

.wall-half.right {
  transform: scaleX(-1);
}

/* ========== Frame-edge divider — horizontal moulding between sections ==========
   Full viewport-bleed gold band with subtle bevel profile (highlight top edge,
   gold body, shadow bottom edge) — like the visible side of a picture frame
   surrounding the dashboard.                                                  */
.section-divider {
  height: 14px;
  background:
    /* Highlight at very top + subtle shadow at very bottom — bevel suggestion */
    linear-gradient(180deg,
      rgba(255, 245, 220, 0.55) 0%,
      transparent 8%,
      transparent 92%,
      rgba(70, 50, 20, 0.25) 100%),
    /* Main gold body — slightly brighter at edges, dimmer in middle (rounded moulding) */
    linear-gradient(180deg,
      rgba(168, 133, 78, 0.7) 0%,
      rgba(168, 133, 78, 0.32) 30%,
      rgba(168, 133, 78, 0.32) 70%,
      rgba(168, 133, 78, 0.65) 100%),
    /* Subtle paper-grain on the moulding face for tactile quality */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4 0.7' /%3E%3CfeColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0 0.05  0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: auto, auto, 200px 14px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  border-top: 1px solid rgba(168, 133, 78, 0.92);
  border-bottom: 1px solid rgba(168, 133, 78, 0.92);
}

/* ========== Today dashboard — 3 cards below the hero ========== */
.today-section {
  /* Layered: warm paper-grain SVG noise on top of subtle vertical gradient.
     The noise gives the mat a tactile fibrous quality without external assets. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.42  0 0 0 0 0.22  0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #f7f0de 0%, #f4ecd8 50%, var(--paper) 100%);
  background-size: 220px 220px, 100% 100%;
  background-repeat: repeat, no-repeat;
  padding: 5rem 0 4.5rem;
  position: relative;
}

.today-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
}

/* Recessed-window cards — cream section bg is the picture mat; cards are windows
   cut into it with real depth. Compounded inner shadow at the top (crisp inner cut +
   falling shadow + atmospheric extended shadow), radial vignette on card surface
   (center luminous, edges falling), softly rounded corners.                         */
.today-card {
  /* Pure white — like a fresh print sitting behind the cream-grain mat */
  background: #ffffff;
  border-radius: 2px;
  padding: 2.15rem 2.3rem 2.25rem;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow:
    /* Crisp inner top — defines the cut */
    inset 0 1px 2px rgba(70, 50, 20, 0.14),
    /* Falling shadow — recess depth (eased) */
    inset 0 10px 22px -10px rgba(70, 50, 20, 0.22),
    /* Atmospheric extended shadow */
    inset 0 30px 50px -32px rgba(70, 50, 20, 0.10),
    /* Inner left shadow */
    inset 9px 0 20px -8px rgba(70, 50, 20, 0.14),
    /* Inner bottom highlight */
    inset 0 -3px 8px -3px rgba(255, 252, 245, 0.7),
    /* Inner right highlight */
    inset -3px 0 8px -3px rgba(255, 252, 245, 0.5),
    /* Whisper outer cut */
    0 0 0 1px rgba(168, 133, 78, 0.08);
  transition: box-shadow 0.5s ease;
}

/* Subtle inner stitching frame — exact mat cream as the stroke color so it's
   almost invisible against the white card; the dashed pattern provides the
   only visibility, like fine running stitches on real mat board.        */
.today-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed #ece1c4;
  pointer-events: none;
  z-index: 0;
}

/* Card content stacks above the decorative SVG */
.today-card > * {
  position: relative;
  z-index: 1;
}

.today-card:hover {
  box-shadow:
    inset 0 1px 2px rgba(70, 50, 20, 0.16),
    inset 0 12px 24px -10px rgba(70, 50, 20, 0.26),
    inset 0 32px 52px -32px rgba(70, 50, 20, 0.12),
    inset 10px 0 22px -8px rgba(70, 50, 20, 0.16),
    inset 0 -3px 8px -3px rgba(255, 252, 245, 0.7),
    inset -3px 0 8px -3px rgba(255, 252, 245, 0.5),
    0 0 0 1px rgba(168, 133, 78, 0.12);
}

.today-card .kicker {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.7rem;
}

.today-card .subhead {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin-bottom: 0.3rem;
}

.today-card .meta {
  font-family: var(--serif);
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}

/* Times list inside the card */
.today-times {
  list-style: none;
  border-top: 1px solid var(--gold-hairline);
}

.today-times li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--gold-hairline);
  font-family: var(--serif);
  font-size: 1rem;
}

.today-times .name {
  color: var(--ink);
}

.today-times .day {
  /* Small uppercase tracked tag — same family as the calendar-page chrome
     labels. Reads as a deliberate "day marker" rather than a soft italic
     aside, and stays legible against the cream mat. */
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-style: normal;
  text-align: right;
  align-self: center;
}

.today-times .time {
  color: var(--primary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  min-width: 3.2rem;
  text-align: right;
}

/* Highlight candle-lighting / havdalah rows when relevant */
.today-times li.highlight {
  background: linear-gradient(
    90deg,
    rgba(168, 133, 78, 0.08),
    rgba(168, 133, 78, 0.02));
}

.today-times li.highlight .name {
  font-weight: 500;
  color: var(--primary);
}

/* Media container inside Aktuelles card — accepts <img> for static images
   or <iframe> for YouTube embeds. Omit the .media div entirely for text-only.
   Add .video modifier to overlay a play indicator on a video thumbnail.
   Negative margins are calc'd against the card's padding so the media's
   outer edge meets the inner stitched frame (at 14px inset) without
   overlapping or extending past it.                                       */
.today-announcement .media {
  position: relative;
  margin-top:    calc(14px - 2.15rem);
  margin-right:  calc(14px - 2.3rem);
  margin-bottom: 1.25rem;
  margin-left:   calc(14px - 2.3rem);
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg,
    rgba(168, 133, 78, 0.16),
    rgba(168, 133, 78, 0.05));
  overflow: hidden;
}

@media (max-width: 980px) {
  .today-announcement .media {
    margin-top:   calc(14px - 1.5rem);
    margin-right: calc(14px - 1.75rem);
    margin-left:  calc(14px - 1.75rem);
  }
}

/* Default placeholder text — visible until a media element is added */
.today-announcement .media::before {
  content: "Bild folgt";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(168, 133, 78, 0.55);
}

/* Image or iframe fills the container and covers the placeholder */
.today-announcement .media img,
.today-announcement .media iframe {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover;
}

/* Video modifier — adds a play overlay on top of the thumbnail */
.today-announcement .media.video::after {
  content: "â–¶";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

/* Portrait modifier — for vertically-recorded videos (Reels/Shorts style).
   Doesn't bleed to the stitched frame edges; sits centered in the card with
   a narrower width so the 9:16 aspect doesn't tower over everything else. */
.today-announcement .media.portrait {
  aspect-ratio: 9 / 16;
  max-width: 52%;
  margin-top:    0;
  margin-right:  auto;
  margin-bottom: 1.25rem;
  margin-left:   auto;
}

@media (max-width: 980px) {
  .today-announcement .media.portrait {
    max-width: 60%;
    margin-top: 0;
  }
}

/* Latest announcement card body */
.today-announcement {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--gold-hairline);
  padding-top: 1.5rem;
}

.today-announcement .title {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin-bottom: 0.75rem;
}

.today-announcement .excerpt {
  font-family: var(--sans);
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
  /* Limit to a single line — keeps card compact even if copy is longer */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.today-announcement .read-more {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  margin-bottom: 1rem;
  transition: color 0.2s;
}

.today-announcement .read-more:hover { color: var(--primary); }

.today-announcement .all-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  border-top: 1px solid var(--gold-hairline);
  padding-top: 0.85rem;
  transition: color 0.2s;
}

.today-announcement .all-link:hover { color: var(--primary); }

@media (max-width: 980px) {
  .today-section { padding: 3.5rem 0 3rem; }
  .today-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .today-card { padding: 1.5rem 1.75rem 1.75rem; }
}

/* ========== Upcoming Events section — editorial list ========== */
.events-section {
  background: #fefdf9;       /* subtle warm tint */
  padding: 5rem 0 4rem;
}

.events-header {
  text-align: center;
  margin-bottom: 3rem;
}

.events-kicker {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}

.events-title {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--primary);
  margin: 0;
}

.events-list {
  list-style: none;
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid var(--gold-hairline);
}

.event-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 2.5rem;
  align-items: center;
  padding: 1.5rem 1.25rem;
  border-bottom: 1px solid var(--gold-hairline);
  transition: background 0.25s ease;
}

.event-row:hover {
  background: rgba(255, 252, 245, 0.45);
}

.event-row .event-date {
  text-align: center;
  font-family: var(--serif);
  border-right: 1px solid var(--gold-hairline);
  padding-right: 1.25rem;
}

.event-row .event-date .day {
  display: block;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--primary);
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}

.event-row .event-date .month {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.45rem;
}

.event-row .event-info h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--primary);
  line-height: 1.25;
  margin-bottom: 0.3rem;
}

.event-row .event-info p {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.event-row .event-time {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
  min-width: 4.5rem;
  text-align: right;
}

.events-footer {
  text-align: center;
  margin-top: 2.5rem;
}

.events-footer a {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  transition: color 0.2s, border-color 0.2s;
}

.events-footer a:hover {
  color: var(--gold);
}

@media (max-width: 760px) {
  .events-section { padding: 3.5rem 0 3rem; }
  .events-header { margin-bottom: 2rem; }
  .event-row {
    grid-template-columns: 4.25rem 1fr;
    grid-template-areas:
      "date info"
      "date time";
    gap: 0.5rem 1.25rem;
    padding: 1.25rem 0;
  }
  .event-row .event-date { grid-area: date; padding-right: 1rem; }
  .event-row .event-info { grid-area: info; }
  .event-row .event-time {
    grid-area: time;
    text-align: left;
    font-size: 0.95rem;
    color: var(--ink-soft);
  }
  .event-row .event-date .day { font-size: 1.85rem; }
}

/* ========== Visit / Welcome section — 2-column with map ========== */
.visit-section {
  background: #ffffff;       /* pure white — alternates with neighbors */
  padding: 5rem 0 4.5rem;
}

.visit-header {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 3.25rem;
}

.visit-kicker {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}

.visit-title {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--primary);
  margin: 0 0 1.25rem;
}

.visit-lede {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 38rem;
  margin: 0 auto;
}

.visit-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4rem;
  max-width: 1080px;
  margin: 0 auto;
  align-items: start;
}

.visit-info dl {
  margin: 0;
}

.visit-info dt {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.visit-info dd {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gold-hairline);
}

.visit-info dd:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.visit-cta {
  display: inline-block;
  margin-top: 2rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  transition: color 0.2s, border-color 0.2s;
}

.visit-cta:hover { color: var(--gold); }

/* Map placeholder — stitched border, ties to today-card aesthetic */
.visit-map {
  aspect-ratio: 4 / 3;
  background: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 9px 18px -9px rgba(70, 50, 20, 0.14),
    inset 7px 0 16px -7px rgba(70, 50, 20, 0.08),
    0 0 0 1px rgba(168, 133, 78, 0.12);
}

.visit-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 760px) {
  .visit-section { padding: 3.5rem 0 3rem; }
  .visit-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .visit-map { aspect-ratio: 16 / 10; }
}

/* ========== About preview — photo + text split ========== */
.about-section {
  background: #fefdf9;       /* subtle warm tint — alternates with Visit */
  padding: 5rem 0 4.5rem;
}

.about-header {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 3.25rem;
}

.about-kicker {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}

.about-title {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--primary);
  margin: 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  max-width: 1080px;
  margin: 0 auto;
  align-items: center;
}

.about-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--card);
  border: 1px solid rgba(168, 133, 78, 0.18);
  box-shadow: 0 4px 16px rgba(20, 30, 50, 0.06);
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-text p {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 1.5rem;
}

.about-text p:last-of-type { margin-bottom: 2rem; }

.about-cta {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  transition: color 0.2s, border-color 0.2s;
}

.about-cta:hover { color: var(--gold); }

@media (max-width: 760px) {
  .about-section { padding: 3.5rem 0 3rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-photo { aspect-ratio: 4 / 3; max-width: 520px; margin: 0 auto; }
}

/* ========== Schabbat feature ========== */
.shabbat-feature {
  text-align: center;
  background: var(--paper);
}

.shabbat-feature .kicker {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
}

.shabbat-feature .parsha {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--primary);
  margin-bottom: 0.85rem;
}

.shabbat-feature .date {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin-bottom: 3rem;
}

.shabbat-feature .ornament {
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 3rem;
}

.shabbat-feature .schedule-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid var(--gold-hairline);
  border-bottom: 1px solid var(--gold-hairline);
}

.shabbat-feature .schedule-block {
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--gold-hairline);
  text-align: left;
}

.shabbat-feature .schedule-block:last-child { border-right: 0; }

.shabbat-feature .schedule-block h4 {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.shabbat-feature .schedule-block .item {
  display: flex;
  justify-content: space-between;
  font-family: var(--serif);
  font-size: 1.02rem;
  padding: 0.4rem 0;
  color: var(--ink);
}

.shabbat-feature .schedule-block .item .time {
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  font-weight: 500;
}

/* ========== About preview (split — photo + text) ========== */
.about-preview { background: var(--paper-tint); }

.about-preview .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.about-preview .photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper);
}

.about-preview .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-preview .copy {
  max-width: 32rem;
}

/* ========== Announcements (post cards) ========== */
.announcements .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.post-card {
  background: var(--card);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.post-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg,
    rgba(168, 133, 78, 0.18),
    rgba(168, 133, 78, 0.05));
  overflow: hidden;
}

.post-card-image::after {
  content: "Bild folgt";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(168, 133, 78, 0.6);
}

.post-card-image img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card-body {
  padding: 1.85rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.post-card-meta {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.7rem;
}

.post-card-title {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--primary);
  margin-bottom: 0.7rem;
}

.post-card-excerpt {
  font-family: var(--sans);
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.post-card-link {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: auto;
}

.section-link-row {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.section-link {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--primary);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  transition: color 0.2s, border-color 0.2s;
}

.section-link:hover {
  color: var(--gold);
}

/* ========== Events list ========== */
.events { background: var(--paper-tint); }

.events-list {
  list-style: none;
  border-top: 1px solid var(--gold-hairline);
}

.event-item {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--gold-hairline);
  transition: background 0.2s;
}

.event-item:hover { background: rgba(168, 133, 78, 0.05); }

.event-date {
  font-family: var(--serif);
  text-align: center;
  border-right: 1px solid var(--gold-hairline);
  padding-right: 1.5rem;
}

.event-date .day {
  display: block;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--primary);
}

.event-date .month {
  display: block;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.35rem;
}

.event-body h4 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.event-body p {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.event-time {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ========== Visit section ========== */
.visit .split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: start;
}

.visit-info dl {
  margin-top: 2rem;
}

.visit-info dt {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.visit-info dd {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 1.6rem;
  line-height: 1.55;
}

.visit-map {
  aspect-ratio: 4 / 3;
  background: var(--paper);
  border: 1px solid var(--gold-hairline);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visit-map::before {
  content: "Karte";
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ========== Donate ========== */
.donate {
  position: relative;
  background: var(--primary);
  color: var(--on-dark);
  padding: 7rem 0;
  text-align: center;
  overflow: hidden;
}

.donate .kicker {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 1.25rem;
}

.donate h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin-bottom: 1.4rem;
  color: var(--on-dark);
}

.donate p {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 38rem;
  margin: 0 auto 2.5rem;
  opacity: 0.92;
}

.donate-button {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--gold);
  padding: 1.05rem 2.85rem;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.donate-button:hover {
  background: var(--on-dark);
  color: var(--primary);
}

/* ========== Footer ========== */
.jt-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 5rem 0 2rem;
}

.jt-footer .grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 4rem;
}

.jt-footer .col h5 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 1.25rem;
}

.jt-footer .brand-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  line-height: 1.1;
}
.jt-footer .brand-mark .wordmark {
  display: block;
}
.jt-footer .brand-mark .tagline {
  display: block;
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 500;
  color: var(--gold-soft);
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-character;
  letter-spacing: 0.13em;
  margin-top: 0.4rem;
}

.jt-footer p,
.jt-footer li {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(245, 239, 226, 0.75);
}

.jt-footer ul { list-style: none; }
.jt-footer li { padding: 0.25rem 0; }

.jt-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.jt-footer a:hover { color: var(--gold-soft); }

.jt-footer .legal {
  border-top: 1px solid rgba(245, 239, 226, 0.12);
  padding-top: 1.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: rgba(245, 239, 226, 0.55);
}

.jt-footer .legal a { margin-left: 1.5rem; }

/* ========== Responsive ========== */
@media (max-width: 1024px) {
  .announcements .grid { grid-template-columns: repeat(2, 1fr); }
  .about-preview .split { gap: 3rem; }
  .visit .split { grid-template-columns: 1fr; }
  .jt-footer .grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1050px) {
  .site-header { position: static; padding: 1.25rem 0; background: var(--ink); }
  .site-header .container { flex-wrap: wrap; gap: 1rem; }
  .site-nav ul { gap: 1.25rem; font-size: 0.85rem; }

  .hero { height: 75vh; min-height: 480px; }
  .hero-hebrew { font-size: 1.2rem; }
  .hero-subtitle { font-size: 0.78rem; letter-spacing: 0.2em; }

  .prayer-strip .inner { flex-direction: column; align-items: flex-start; }
  .prayer-strip .times { gap: 1.5rem; }
  .prayer-strip .time-item .time { font-size: 1.2rem; }

  section.feature { padding: 4.5rem 0; }
  section.section { padding: 3.5rem 0; }

  .shabbat-feature .schedule-grid { grid-template-columns: 1fr; }
  .shabbat-feature .schedule-block {
    border-right: 0;
    border-bottom: 1px solid var(--gold-hairline);
  }
  .shabbat-feature .schedule-block:last-child { border-bottom: 0; }

  .about-preview .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-preview .photo { aspect-ratio: 4 / 3; }

  .announcements .grid { grid-template-columns: 1fr; }

  .event-item { grid-template-columns: 5rem 1fr; gap: 1rem; }
  .event-time { grid-column: 2; font-size: 0.9rem; }
  .event-date { padding-right: 1rem; }
  .event-date .day { font-size: 1.6rem; }

  .donate { padding: 4rem 0; }

  .jt-footer .grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .jt-footer .legal { flex-direction: column; align-items: flex-start; }
  .jt-footer .legal a { margin: 0 1.5rem 0 0; }
}

/* =========================================================================
   Additions used by index-brief.html
   (Additive, additive-only selectors — safe for existing canonical pages.)
   ========================================================================= */

/* Category pill on event rows (Shiur, Veranstaltung, Schabbat, Feiertag…). */
.event-row .event-category {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.18rem 0.6rem;
  border: 1px solid var(--gold-hairline);
  margin-top: 0.55rem;
  white-space: nowrap;
}

/* Action button row under the Visit info (Kontakt / Karte öffnen). */
.visit-actions {
  display: flex;
  gap: 0.85rem;
  margin-top: 1.6rem;
  flex-wrap: wrap;
}
.visit-actions a {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
  border: 1px solid var(--gold);
  padding: 0.75rem 1.65rem;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.visit-actions a:hover { background: var(--gold); color: var(--paper); }
.visit-actions a.secondary {
  border-color: var(--gold-hairline);
  color: var(--ink-soft);
}
.visit-actions a.secondary:hover {
  background: var(--ink-soft);
  color: var(--paper);
  border-color: var(--ink-soft);
}

/* Support band — italic foundation-stone inscription, with em-dash
   flourishes flanking the appeal and a small gold underlined Spenden link
   below. Cream background, hairline borders top and bottom. Donation
   also appears as a normal footer link. */
.support-band {
  padding: 2rem 0;
  background: var(--paper);
  border-top: 1px solid var(--gold-hairline);
  border-bottom: 1px solid var(--gold-hairline);
}
.support-band .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
}
/* Support-band paragraph — italic foundation-stone inscription, navy
   primary color. Em-dash flourishes flank the appeal via inline spans. */
.support-band p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--primary);
  margin: 0;
}
.support-band .flourish {
  color: var(--gold);
  font-style: normal;
  margin: 0 0.85rem;
  font-weight: 400;
}
.support-band .support-button {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--gold-hairline);
  padding-bottom: 0.1rem;
  margin-top: 0.6rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.support-band .support-button:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* Mobile tweaks — shrink text + flourish margins so the line fits on
   phones without wrapping. */
@media (max-width: 760px) {
  .support-band { padding: 1.4rem 0; }
  .support-band .container { gap: 0.55rem; }
  .support-band p { font-size: 0.96rem; line-height: 1.45; }
  .support-band .flourish { margin: 0 0.4rem; }
  .support-band .support-button {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    margin-top: 0.4rem;
  }
  .visit-actions a { padding: 0.7rem 1.3rem; font-size: 0.72rem; }
  .event-row .event-category { font-size: 0.62rem; margin-top: 0.4rem; }
}

@media (max-width: 380px) {
  /* Tighter on small phones so em-dashes don't push the line to a 2nd row */
  .support-band p { font-size: 0.9rem; }
  .support-band .flourish { margin: 0 0.3rem; }
}

/* =========================================================================
   CALENDAR PAGE (kalender-brief.html)
   All additive selectors — safe for existing pages.
   ========================================================================= */

/* --- Page intro: title block at the top of the calendar page.
   Visual separation from the cream masthead above is created by a
   secondary thin gold hairline at the very top of .page-intro, plus a
   small centered ornamental rule above the kicker — together they form
   a German-document-style double-rule "section opener" without resorting
   to a colored background. */
.page-intro {
  padding: 3.5rem 0 2.75rem;
  text-align: center;
  border-top: 1px solid rgba(168, 133, 78, 0.18);  /* sits just below the
                                                      header's own bottom
                                                      border — together they
                                                      read as a deliberate
                                                      double-rule. */
  position: relative;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Small centered ornament-rule above the kicker — like a printed section
   mark in a typeset book. Quiet but unambiguous. */
.page-intro::before {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 1.4rem;
}
.page-intro .kicker {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.page-intro h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.1;
  color: var(--primary);
  margin: 0 0 0.65rem;
}
.page-intro .lede {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 40rem;
  margin: 0 auto;
}

/* --- Calendar top-summary: today-section reused with a 2-column variant,
   constrained to the same max-width as the calendar tabs below so the
   whole vertical column reads as one width-aligned stack.                --- */
.today-section.calendar-summary {
  padding: 3.25rem 0 3.25rem;
}
.today-section.calendar-summary > .container {
  max-width: 1050px;
}

.today-grid.cols-2 {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 820px) {
  .today-grid.cols-2 { grid-template-columns: 1fr; }
}

/* Notes placeholder slot inside the Today card. No border-top — the last
   today-times row's border-bottom already serves as the separator, so an
   additional hairline would double up. */
.today-card .card-notes {
  margin-top: 1.1rem;
}
.today-card .card-notes .label {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.45rem;
}
.today-card .card-notes p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.today-card .card-notes p.empty {
  color: var(--ink-faint);
  font-style: italic;
}

/* --- Tabs (CSS-only via :checked on hidden radio inputs) --- */
.calendar-tabs {
  background: #fefdf9;
  padding: 2.5rem 0 4.5rem;
}
.calendar-tabs > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Constrain ALL containers inside the calendar zone to a narrower max-width.
   The excerpts, the tab nav, and every tab panel's content (event list,
   prayer table, month grid, shabbat list) share this width so the whole
   calendar reads as one compact, boxed unit — instead of stretching the
   full 1280px container the rest of the site uses. */
.calendar-tabs .container {
  max-width: 1050px;
}

.tab-nav {
  border-bottom: 1px solid var(--gold-hairline);
  margin-bottom: 3rem;
}
.tab-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.tab-group {
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.tab-group + .tab-group {
  border-left: 1px solid var(--gold-hairline);
}
.tab-nav label {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.42);    /* faded — clearly "not the current one" */
  padding: 0.85rem 1.4rem 0.9rem;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  flex: 1;
  text-align: center;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  position: relative;
}
.tab-nav label:hover {
  color: var(--primary);
  background: rgba(168, 133, 78, 0.04);
}

/* Active tab styling — strong color shift + thick gold underbar so the
   current tab reads unambiguously as the "you are here" indicator. */
#ct1:checked ~ .tab-nav label[for="ct1"],
#ct2:checked ~ .tab-nav label[for="ct2"],
#ct3:checked ~ .tab-nav label[for="ct3"],
#ct4:checked ~ .tab-nav label[for="ct4"] {
  color: var(--primary);
  border-bottom-color: var(--gold);
  font-weight: 700;
}

/* Panel visibility — only the checked tab's panel is shown */
.tab-panel { display: none; }
#ct1:checked ~ .tab-panel[data-tab="1"],
#ct2:checked ~ .tab-panel[data-tab="2"],
#ct3:checked ~ .tab-panel[data-tab="3"],
#ct4:checked ~ .tab-panel[data-tab="4"] {
  display: block;
}

/* --- Filter chips (Upcoming tab) --- */
.filter-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.25rem;
}
.filter-chip {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--gold-hairline);
  padding: 0.4rem 0.95rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}
.filter-chip:hover {
  color: var(--primary);
  border-color: var(--gold);
}
.filter-chip.active {
  color: var(--paper);
  background: var(--gold);
  border-color: var(--gold);
}

/* --- Toolbar (range + print buttons above prayer-times table) --- */
.cal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.cal-toolbar .range {
  display: flex;
  gap: 0;
  border: 1px solid var(--gold-hairline);
}
.cal-toolbar .range a {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.55rem 1.1rem;
  text-decoration: none;
  border-right: 1px solid var(--gold-hairline);
  transition: background 0.2s ease, color 0.2s ease;
}
.cal-toolbar .range a:last-child { border-right: 0; }
.cal-toolbar .range a.active {
  color: var(--paper);
  background: var(--gold);
}
.cal-toolbar .range a:hover:not(.active) {
  color: var(--primary);
  background: rgba(168, 133, 78, 0.08);
}
.cal-toolbar .actions {
  display: flex;
  gap: 0.85rem;
}
.cal-toolbar .actions a {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s ease;
}
.cal-toolbar .actions a:hover { color: var(--primary); }

/* --- Prayer times table --- */
.prayer-table-wrap { overflow-x: auto; }
.prayer-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums lining-nums;
}
.prayer-table thead th {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--gold-hairline);
  white-space: nowrap;
}
.prayer-table thead th.num { text-align: right; }
.prayer-table tbody td {
  font-family: var(--serif);
  font-size: 0.96rem;
  color: var(--ink);
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--gold-hairline);
  vertical-align: baseline;
}
.prayer-table tbody td.num {
  text-align: right;
  white-space: nowrap;
  color: var(--primary);
  font-weight: 500;
}
.prayer-table tbody td.notes {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.prayer-table tbody .date-cell .civil {
  display: block;
  font-weight: 500;
}
.prayer-table tbody .date-cell .hebrew {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 0.1rem;
}
.prayer-table tbody .day-cell {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--primary);
}
.prayer-table tbody tr.shabbat td,
.prayer-table tbody tr.yomtov td {
  background: rgba(168, 133, 78, 0.06);
}
.prayer-table tbody tr.shabbat .day-cell::after { content: ""; }
.prayer-table tbody tr.today td {
  background: rgba(29, 61, 128, 0.04);
  border-bottom-color: var(--gold);
}
.prayer-table tbody tr.today .day-cell {
  color: var(--primary);
  font-weight: 600;
}

/* --- Month view grid --- */
.month-nav {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 2rem;
  margin-bottom: 2rem;
}
.month-nav .arrow {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--gold);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s ease;
}
.month-nav .arrow:hover { color: var(--primary); }
.month-nav .title {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.005em;
  min-width: 16rem;
  text-align: center;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--gold-hairline);
}
.month-grid .dow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--gold-hairline);
  border-right: 1px solid var(--gold-hairline);
  background: rgba(168, 133, 78, 0.05);
}
.month-grid .dow:last-child { border-right: 0; }
.month-grid .cell {
  min-height: 6.5rem;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--gold-hairline);
  border-right: 1px solid var(--gold-hairline);
  font-family: var(--serif);
  position: relative;
}
.month-grid .cell:nth-child(7n+8) { border-right: 0; }   /* offset for dow row */
.month-grid .cell.muted { background: rgba(168, 133, 78, 0.03); color: var(--ink-soft); }
.month-grid .cell.shabbat { background: rgba(168, 133, 78, 0.07); }
.month-grid .cell.today { box-shadow: inset 0 0 0 2px var(--gold); }
.month-grid .num {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: -0.005em;
}
.month-grid .num .hebrew {
  display: block;
  font-size: 0.7rem;
  color: var(--ink-soft);
  margin-top: 0.1rem;
  font-weight: 400;
}
.month-grid .events {
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.month-grid .ev {
  font-family: var(--sans);
  font-size: 0.7rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid var(--gold);
  padding-left: 0.35rem;
  line-height: 1.25;
}
.month-grid .ev.holiday { border-left-color: #b35454; color: #b35454; }

.month-foot {
  margin-top: 1.5rem;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.month-foot a { color: var(--gold); text-decoration: none; margin: 0 0.5rem; }
.month-foot a:hover { color: var(--primary); }

/* --- Shabbat & Holidays list (Tab 4) --- */
.shabbat-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.shabbat-card {
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  gap: 2rem;
  align-items: baseline;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--gold-hairline);
  background: #ffffff;
  border-radius: 2px;
  transition: border-color 0.2s ease;
}
.shabbat-card:hover { border-color: var(--gold); }
.shabbat-card .date-block {
  text-align: center;
  border-right: 1px solid var(--gold-hairline);
  padding-right: 1.25rem;
}
.shabbat-card .date-block .day-num {
  display: block;
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--primary);
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.shabbat-card .date-block .month-name {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.4rem;
}
.shabbat-card .date-block .hebrew {
  display: block;
  font-family: var(--serif);
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 0.35rem;
}
.shabbat-card .body h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.005em;
  margin: 0 0 0.4rem;
}
.shabbat-card .body .parasha {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 0.65rem;
}
.shabbat-card .body .note {
  font-family: var(--serif);
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.shabbat-card .times {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}
.shabbat-card .times .row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.85rem;
}
.shabbat-card .times .label {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.shabbat-card .times .time {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--primary);
  min-width: 3.4rem;
}
.shabbat-card.holiday {
  border-left: 3px solid #b35454;
}
.shabbat-card.holiday .date-block .month-name { color: #b35454; }

@media (max-width: 760px) {
  .page-intro { padding: 2.15rem 0 2rem; }
  .calendar-tabs { padding: 1.75rem 0 3rem; }

  /* --- Tab nav: revert to 2x2 grid (groups stack, each row has 2 labels) - */
  .tab-nav-grid { grid-template-columns: 1fr; }
  .tab-group + .tab-group {
    border-left: 0;
    border-top: 1px solid var(--gold-hairline);
  }
  .tab-nav label {
    padding: 0.8rem 0.5rem 0.85rem;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
  }

  /* --- Filter chips: wrap to multiple rows (all visible, no hidden chips) - */
  .filter-chips {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.45rem;
  }
  .filter-chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .cal-toolbar { justify-content: flex-start; }
  .prayer-table thead { display: none; }
  .prayer-table, .prayer-table tbody, .prayer-table tr, .prayer-table td {
    display: block;
    width: 100%;
  }
  .prayer-table tbody tr {
    padding: 1rem 0;
    border-bottom: 1px solid var(--gold-hairline);
  }
  .prayer-table tbody td {
    border-bottom: 0;
    padding: 0.25rem 0;
  }
  .prayer-table tbody td.num { text-align: left; }
  .prayer-table tbody td.num::before {
    content: attr(data-label) " ";
    font-family: var(--sans);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-right: 0.5rem;
  }
  .month-grid .cell { min-height: 4.5rem; }
  .month-grid .num { font-size: 0.82rem; }
  .month-grid .ev { font-size: 0.62rem; }
  .shabbat-card {
    grid-template-columns: 5rem 1fr;
    gap: 1rem;
  }
  .shabbat-card .times {
    grid-column: 1 / -1;
    text-align: left;
    border-top: 1px solid var(--gold-hairline);
    padding-top: 0.85rem;
    margin-top: 0.35rem;
  }
  .shabbat-card .times .row { justify-content: flex-start; }
}

/* =========================================================================
   MOBILE PATTERNS — hamburger nav, tighter footer
   Applies to both index-brief.html and kalender-brief.html.
   ========================================================================= */

/* Hidden checkbox driving the hamburger toggle. */
.nav-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Hamburger button — hidden on desktop, visible in the mobile/tablet header. */
.nav-toggle-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0.55rem 0.5rem;
  margin-left: auto;
}
.nav-toggle-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}

/* Hamburger → X morph when the nav is open */
.nav-toggle-input:checked ~ .nav-toggle-btn span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle-input:checked ~ .nav-toggle-btn span:nth-child(2) {
  opacity: 0;
}
.nav-toggle-input:checked ~ .nav-toggle-btn span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Guard against rogue horizontal scroll on mobile. Any descendant that
   accidentally exceeds 100vw (e.g. a wide image, a long unbroken string)
   gets clipped at the body edge rather than introducing a scrollbar. */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ---------- ≤760px: mobile/tablet header layout ---------- */
@media (max-width: 1050px) {
  :root { --jt-header-offset: 8.25rem; }

  /* Keep the fixed header as the positioning context so the hamburger drawer
     can anchor to its bottom edge. */
  .site-header.static { position: fixed; }

  /* Show hamburger; hide the lang dropdown (its 4 languages are already
     linked in the footer's "Sprachen" column — frees row-1 space and
     avoids the wrapped-row + clipped-menu problem). */
  .nav-toggle-btn { display: flex; }
  .lang-dropdown { display: none; }
  .info-row .divider { display: none; }   /* drop the vertical rule between
                                             today-mark and counters; gap
                                             handles the spacing */

  /* Hide the inline header nav — replaced by the hamburger drawer below. */
  .site-header.static .site-nav { display: none; }

  /* Header layout: brand + hamburger on row 1, info-row (today-mark +
     watch counters) wraps to row 2 below. The existing ≤760px wrap rule
     (info-row: order 99; flex-basis 100%) already handles the wrap; we
     just keep info-row visible at phone widths instead of hiding it. */
  .info-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.9rem;
    padding-top: 0.65rem;
    margin-top: 0.35rem;
  }
  /* Center the today-mark's children (label + day) like the time-counter
     does — otherwise the today-mark left-aligns by default and looks
     misaligned next to the counters. */
  .info-row .today-mark { align-items: center; text-align: center; }
  .info-row .today-mark .label { font-size: 0.6rem; }
  /* Match today-mark "day" height with the digit cell height so both
     stacks are the same total height. Then info-row's align-items: center
     puts the labels at the same y-position naturally. */
  .info-row .today-mark .day {
    font-size: 0.95rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  /* Reduce label tracking on mobile so "Schacharit" doesn't fill the
     entire column width — gives visible breathing space on both sides
     of every label and makes the center-alignment legible. */
  .info-row .time-counter .label { letter-spacing: 0.14em; }
  .info-row .today-mark .label { letter-spacing: 0.14em; }
  /* Extra padding between Heute and the time counters — the gap on its
     own treats Heute as just another item. A larger margin-right gives
     the day-marker breathing room from the counters that belong together. */
  .info-row .today-mark { margin-right: 0.65rem; }
  /* And a touch more space between the two counters themselves so they
     don't crowd each other. */
  .info-row .time-counter + .time-counter { margin-left: 0.5rem; }
  .info-row .time-counter .label { font-size: 0.6rem; }
  .info-row .time-counter .digit {
    width: 1.05rem;
    height: 1.5rem;
    font-size: 0.95rem;
  }

  /* Drawer-style nav when hamburger is checked */
  .site-header.static .nav-toggle-input:checked ~ .site-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-top: 1px solid var(--gold-hairline);
    border-bottom: 1px solid var(--gold);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    padding: 0.4rem 0;
    z-index: 50;
  }
  .site-header.static .nav-toggle-input:checked ~ .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  .site-header.static .nav-toggle-input:checked ~ .site-nav li {
    text-align: center;
    border-bottom: 1px solid var(--gold-hairline);
  }
  .site-header.static .nav-toggle-input:checked ~ .site-nav li:last-child {
    border-bottom: 0;
  }
  .site-header.static .nav-toggle-input:checked ~ .site-nav li::before,
  .site-header.static .nav-toggle-input:checked ~ .site-nav li + li::before {
    display: none;        /* drop the vertical gold-rule separators */
  }
  .site-header.static .nav-toggle-input:checked ~ .site-nav a {
    display: block;
    padding: 1rem 1.5rem;
    font-size: 0.85rem;
  }

  /* Tighten brand wordmark on narrow screens. Allow it to shrink in the
     flex row so the hamburger button doesn't get pushed below. */
  .site-header .brand {
    font-size: 0.92rem;
    letter-spacing: 0.05em;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Lang dropdown a bit smaller next to the brand */
  .lang-dropdown-toggle { padding: 0.4rem 0.65rem; font-size: 0.78rem; }
}

/* ---------- ≤400px: extra-narrow brand sizing ----------
   "Joachimsthaler Synagoge" + hamburger don't fit at 360–400px without
   the brand giving up some weight. Shrink the wordmark progressively. */
@media (max-width: 400px) {
  .site-header .brand { font-size: 0.84rem; letter-spacing: 0.04em; }
}
@media (max-width: 340px) {
  .site-header .brand { font-size: 0.78rem; letter-spacing: 0.02em; }
}

/* ---------- ≤760px: footer tightening (tighter stack, bigger tap targets) - */
@media (max-width: 1050px) {
  .jt-footer {
    padding: 3.5rem 0 1.5rem;
  }
  .jt-footer .grid {
    gap: 2.25rem;
    margin-bottom: 2.5rem;
  }
  .jt-footer .col h5 {
    margin-bottom: 0.85rem;
    font-size: 0.72rem;
  }
  .jt-footer .brand-mark {
    font-size: 1.05rem;
    margin-bottom: 0.85rem;
  }
  .jt-footer p {
    font-size: 0.92rem;
    line-height: 1.55;
  }
  .jt-footer li {
    padding: 0.55rem 0;       /* larger tap targets for thumb-friendly links */
    font-size: 0.94rem;
  }
  .jt-footer .legal {
    padding-top: 1.25rem;
    font-size: 0.8rem;
  }
}
/* =========================================================================
   WORDPRESS / GENERATEPRESS INTEGRATION
   ========================================================================= */

.entry-content .today-times,
.entry-content .events-list,
.site-header .site-nav ul,
.jt-footer ul {
  padding-left: 0;
  list-style: none;
}

.entry-content .today-times,
.site-header .site-nav ul,
.jt-footer ul {
  margin: 0;
}

.entry-content .events-list {
  margin-left: auto;
  margin-right: auto;
}

.jt-footer .col,
.jt-footer .col h5,
.jt-footer p,
.jt-footer ul,
.jt-footer li {
  margin-top: 0;
}

body:has(.jt-page) #page.site.grid-container,
body:has(.jt-page) .site-content,
body:has(.jt-page) .content-area,
body:has(.jt-page) .site-main,
body:has(.jt-page) .inside-article,
body:has(.jt-page) .entry-content,
.entry-content .jt-page {
  width: 100%;
  max-width: none;
  margin: 0;
}

body:has(.jt-page).separate-containers .inside-article,
body:has(.jt-page) .entry-content,
.entry-content .jt-page {
  padding: 0;
}

.entry-content .jt-page > :is(
  .hero,
  .wall-divider,
  .page-intro,
  .today-section,
  .events-section,
  .visit-section,
  .about-section,
  .calendar-tabs
) {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Day-group sub-header inside .today-times (Schabbat card on home + calendar
   pages). Breaks the Friday block from the Saturday block visually without
   forcing them into separate cards. */
.today-times li.day-group {
  display: block;
  grid-template-columns: none;
  padding: 0.9rem 0 0.3rem;
  border-bottom: 0;
  background: transparent;
}
.today-times li.day-group:first-child {
  padding-top: 0.4rem;
}
.today-times li.day-group span {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}


/* === Single Post template — Aktuelles / Mitteilungen / Rabbiner articles === */
.single-post .inside-article {
  padding: 3rem 2.5rem 4rem;
}
.single-post .entry-header {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  text-align: center;
  border-bottom: 1px solid var(--gold-hairline);
  padding-bottom: 1.75rem;
}
.single-post .entry-title {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 0.85rem;
}
.single-post .entry-meta {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.single-post .entry-meta a {
  color: inherit;
  text-decoration: none;
}
/* Hide the "von <author>" byline for now — author email shows raw and clutters the design */
.single-post .entry-meta .byline { display: none; }

.single-post .entry-content {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
}
.single-post .entry-content h2 {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.005em;
  margin: 2.4rem 0 0.85rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--gold-hairline);
}
.single-post .entry-content h2:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.single-post .entry-content h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--primary);
  margin: 1.6rem 0 0.5rem;
}
.single-post .entry-content p {
  margin: 0 0 1.1rem;
}
.single-post .entry-content strong {
  font-weight: 600;
  color: var(--primary);
}
.single-post .entry-content em {
  font-style: italic;
  color: var(--ink-soft);
}
.single-post .entry-content a {
  color: var(--primary);
  text-decoration-color: var(--gold);
  text-underline-offset: 0.2em;
}
.single-post .entry-content ul,
.single-post .entry-content ol {
  margin: 0 0 1.1rem 1.25rem;
  padding-left: 0.5rem;
}
.single-post .entry-content blockquote {
  border-left: 2px solid var(--gold);
  padding-left: 1rem;
  font-style: italic;
  color: var(--ink-soft);
  margin: 1.5rem 0;
}
.single-post .entry-content iframe,
.single-post .entry-content img {
  max-width: 100%;
  height: auto;
  margin: 1.5rem auto;
  display: block;
}

/* Comments area — keep removed/empty styling clean since comments are off */
.single-post #comments,
.single-post .comments-area { display: none; }


/* --- Load-more button (Mehr laden) + wrap. Higher specificity overrides the
   GeneratePress default button styling that was leaking through. --- */
.bs-prayer-times .bs-load-more-wrap,
.bs-shabbat-holidays .bs-load-more-wrap {
  text-align: center;
  margin-top: 1.6rem;
}
.bs-prayer-times .bs-load-more,
.bs-shabbat-holidays .bs-load-more {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold-hairline);
  border-radius: 0;
  padding: 0.7rem 1.6rem;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bs-prayer-times .bs-load-more:hover:not(:disabled),
.bs-shabbat-holidays .bs-load-more:hover:not(:disabled) {
  color: var(--paper);
  background: var(--gold);
  border-color: var(--gold);
}
.bs-prayer-times .bs-load-more:disabled,
.bs-prayer-times .bs-load-more.bs-loading,
.bs-shabbat-holidays .bs-load-more:disabled,
.bs-shabbat-holidays .bs-load-more.bs-loading {
  opacity: 0.6;
  cursor: wait;
}

/* --- Schabbat card meta line: civil dates in regular weight ink-soft, Hebrew
   dates in italic gold, separated by extra whitespace so the line reads as
   two visually distinct date groups without a literal divider. --- */
.today-card .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0.35rem;
}
.today-card .meta .meta-civil {
  font-family: var(--serif);
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.today-card .meta .meta-hebrew {
  font-family: var(--serif);
  font-size: 0.92rem;
  color: var(--ink-soft);
  font-style: normal;
  opacity: 1;
}

/* Middle-dot separator between civil and Hebrew date ranges in the Schabbat
   summary card meta line. Pure CSS so the HTML stays as two clean spans. */
.today-card .meta .meta-civil + .meta-hebrew::before {
  content: "·";
  color: var(--gold);
  opacity: 0.55;
  margin: 0 0.55em;
}

/* ============================================================
   Event list (v0.2.1) — Kommende Termine tab
   ------------------------------------------------------------
   - Fix dark-on-dark hover (GeneratePress applies its own button
     hover styles which fight transparent backgrounds).
   - Match the prayer-times Mehr laden button.
   - Add weekday line above the day-num in the event-row date block.
   ============================================================ */

/* --- filter-chip: explicit transparent background on hover so GP button
   hover defaults don't paint dark over dark. Plus active+hover state. --- */
.bs-event-chips .filter-chip,
.bs-event-chips .filter-chip:focus,
.bs-event-chips .filter-chip:active {
  background: transparent;
}
.bs-event-chips .filter-chip:hover:not(.active) {
  background: transparent !important;
  color: var(--primary);
  border-color: var(--gold);
}
.bs-event-chips .filter-chip.active {
  background: var(--gold);
  color: var(--paper);
  border-color: var(--gold);
}
.bs-event-chips .filter-chip.active:hover {
  background: var(--gold) !important;
  color: var(--paper);
  border-color: var(--gold);
}

/* --- Event list "Mehr laden" — mirror the prayer-times button styling. --- */
.bs-event-list .bs-event-actions {
  text-align: center;
  margin-top: 1.6rem;
}
.bs-event-list .bs-event-load-more {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold-hairline);
  border-radius: 0;
  padding: 0.7rem 1.6rem;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bs-event-list .bs-event-load-more:hover:not(:disabled) {
  color: var(--paper);
  background: var(--gold);
  border-color: var(--gold);
}
.bs-event-list .bs-event-load-more:disabled,
.bs-event-list .bs-event-load-more.bs-loading {
  opacity: 0.6;
  cursor: wait;
}

/* --- Event row: weekday line above the day, mirroring shabbat-card pattern. --- */
.event-row .event-date .weekday {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

/* --- Event row: location line (subtle, below excerpt). --- */
.event-row .event-info .event-location {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.35rem;
}

/* ============================================================
   Load-more across calendar tabs (v0.2.2 polish)
   ------------------------------------------------------------
   Reskin "Mehr laden" controls to match the homepage's
   "Vollständiger Kalender →" link: a flat uppercase navy
   sans link with a gold hairline underline appearing on hover.
   Applies to prayer-times, shabbat-holidays, and event-list.
   ============================================================ */

.bs-prayer-times .bs-load-more-wrap,
.bs-shabbat-holidays .bs-load-more-wrap,
.bs-event-list .bs-event-actions {
  text-align: center;
  margin-top: 1.6rem;
}

.bs-prayer-times .bs-load-more,
.bs-shabbat-holidays .bs-load-more,
.bs-event-list .bs-event-load-more {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  padding: 0 0 4px;
  cursor: pointer;
  box-shadow: none;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.bs-prayer-times .bs-load-more::after,
.bs-shabbat-holidays .bs-load-more::after,
.bs-event-list .bs-event-load-more::after {
  content: " →";
  margin-left: 0.15em;
}

.bs-prayer-times .bs-load-more:hover:not(:disabled),
.bs-shabbat-holidays .bs-load-more:hover:not(:disabled),
.bs-event-list .bs-event-load-more:hover:not(:disabled) {
  background: transparent !important;
  color: var(--primary);
  border-bottom: 1px solid var(--gold) !important;
}

.bs-prayer-times .bs-load-more:disabled,
.bs-prayer-times .bs-load-more.bs-loading,
.bs-shabbat-holidays .bs-load-more:disabled,
.bs-shabbat-holidays .bs-load-more.bs-loading,
.bs-event-list .bs-event-load-more:disabled,
.bs-event-list .bs-event-load-more.bs-loading {
  opacity: 0.6;
  cursor: wait;
}

/* ============================================================
   Month view (v0.3.0)
   ------------------------------------------------------------
   Yom Tov tint (parallel to .shabbat), more aggressive mobile
   compression so 7 cells fit on a phone without overflowing.
   ============================================================ */

.month-grid .cell.yomtov { background: rgba(168, 133, 78, 0.07); }
.month-grid .cell.fast { background: rgba(179, 84, 84, 0.05); }
.month-grid .cell.today { box-shadow: inset 0 0 0 2px var(--gold); }

@media (max-width: 560px) {
  .bs-month-view .month-nav .title { font-size: 0.85rem; }
  .bs-month-view .month-nav .arrow { font-size: 1.2rem; }
  .month-grid .dow { font-size: 0.55rem; padding: 0.35rem 0; }
  .month-grid .cell { min-height: 3.1rem; padding: 0.3rem 0.2rem; }
  .month-grid .num { font-size: 0.78rem; font-weight: 600; }
  .month-grid .num .hebrew {
    font-size: 0.52rem;
    display: block;
    margin-top: 0.05rem;
    color: var(--ink-soft);
    opacity: 0.7;
  }
  .month-grid .events {
    display: flex;
    gap: 2px;
    margin-top: 0.2rem;
  }
  .month-grid .ev {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border-left: 0;
    padding: 0;
    background: var(--gold);
    color: transparent;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
  }
  .month-grid .ev.holiday { background: #b35454; }
}

/* ============================================================
   Day detail modal + permalink page (v0.4.0)
   ------------------------------------------------------------
   Click any day in the month grid, any row in the prayer table,
   any event row → popup with the full schedule + events + Hebrew
   date + holiday/parasha info. Reused on /kalender/tag/YYYY-MM-DD/.
   ============================================================ */

/* Clickable surfaces */
.month-grid .cell[data-date]:not(.muted),
.bs-prayer-times .bs-prayer-tbody tr[data-date],
.bs-shabbat-holidays .shabbat-card[data-date],
.bs-event-list .event-row[data-date],
.events-list .event-row[data-date] {
  cursor: pointer;
}

.month-grid .cell[data-date]:not(.muted):hover {
  box-shadow: inset 0 0 0 1px var(--gold);
}

/* Modal backdrop */
.bs-day-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 14, 0.55);
  z-index: 99999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 1rem;
  overflow-y: auto;
}
.bs-day-modal-backdrop[hidden] { display: none; }
body.bs-day-modal-open { overflow: hidden; }

/* Modal box */
.bs-day-modal {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  max-width: 640px;
  width: 100%;
  padding: 2.25rem 2rem 1.75rem;
  border: 1px solid var(--gold-hairline);
  box-shadow: 0 12px 32px rgba(20, 18, 14, 0.28);
  font-family: var(--serif);
}

.bs-day-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}
.bs-day-modal-close:hover { color: var(--primary); }

.bs-day-modal-nav {
  position: absolute;
  top: 0.85rem;
  left: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.bs-day-modal-nav button {
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bs-day-modal-nav button:hover { color: var(--primary); }

/* Day-detail content (used in modal AND permalink page) */
.bs-day-detail-header { text-align: center; margin-bottom: 1.4rem; }
.bs-day-detail-civil {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.25rem;
}
.bs-day-detail-hebrew {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
}
.bs-day-detail-title {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0;
  letter-spacing: -0.005em;
}
.bs-day-detail-parasha-kicker {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.bs-day-detail-section { margin-top: 1.4rem; }
.bs-day-detail-section-title {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold-hairline);
  padding-bottom: 0.45rem;
  margin: 0 0 0.85rem;
}

.bs-day-detail-items,
.bs-day-detail-events {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bs-day-detail-item {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(168, 133, 78, 0.08);
}
.bs-day-detail-item:last-child { border-bottom: 0; }
.bs-day-detail-item .time {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--primary);
  font-variant-numeric: tabular-nums lining-nums;
}
.bs-day-detail-item .label {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
}
.bs-day-detail-item .note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.bs-day-detail-no-time { color: var(--ink-soft); }

.bs-day-detail-event {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(168, 133, 78, 0.08);
}
.bs-day-detail-event:last-child { border-bottom: 0; }
.bs-day-detail-event .time {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--primary);
  margin-right: 0.6rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.bs-day-detail-event .title { font-family: var(--serif); font-weight: 600; color: var(--ink); }
.bs-day-detail-event .category {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.bs-day-detail-event .location {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
  letter-spacing: 0.08em;
}
.bs-day-detail-event .excerpt {
  font-family: var(--serif);
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0.3rem 0 0;
}

.bs-day-detail-footer {
  margin-top: 1.5rem;
  border-top: 1px solid var(--gold-hairline);
  padding-top: 0.85rem;
  text-align: right;
}
.bs-day-detail-share {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  padding-bottom: 3px;
}
.bs-day-detail-share:hover { border-bottom: 1px solid var(--gold); }

/* Permalink page wrapper (/kalender/tag/YYYY-MM-DD/) */
.bs-day-page .container { max-width: 720px; margin: 2rem auto; padding: 0 1rem; }
.bs-day-back {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.bs-day-back a { color: var(--primary); text-decoration: none; }
.bs-day-back a:hover { border-bottom: 1px solid var(--gold); }

/* Phones */
@media (max-width: 560px) {
  .bs-day-modal { padding: 1.75rem 1.1rem 1.25rem; max-width: 100%; }
  .bs-day-modal-nav { left: 0.4rem; top: 0.6rem; }
  .bs-day-modal-nav button { font-size: 1.2rem; width: 2rem; height: 2rem; }
  .bs-day-detail-title { font-size: 1.15rem; }
  .bs-day-detail-item { grid-template-columns: 4rem 1fr; row-gap: 0.2rem; }
  .bs-day-detail-item .note { grid-column: 2; font-size: 0.78rem; }
}

/* ============================================================
   Day modal polish (v0.4.1)
   ------------------------------------------------------------
   1. Force baseline alignment on the prev/next arrows so the left
      doesn't slip below the right (some font fallbacks render
      ←/→ at slightly different heights).
   2. Override GeneratePress button hover defaults so the close
      X and the prev/next arrows don't get a dark-on-dark hover
      from the theme's button reset.
   ============================================================ */

.bs-day-modal-nav {
  align-items: center;
}
.bs-day-modal-nav button {
  background: transparent !important;
  line-height: 1;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bs-day-modal-nav button:hover,
.bs-day-modal-nav button:focus {
  background: transparent !important;
  color: var(--primary);
}

.bs-day-modal-close {
  background: transparent !important;
  line-height: 1;
}
.bs-day-modal-close:hover,
.bs-day-modal-close:focus {
  background: transparent !important;
  color: var(--primary);
}

/* Subtle differentiation between Friday/Saturday parasha labels and
   regular events in month-view cells. */
.month-grid .ev.erev-label,
.month-grid .ev.shabbat-label {
  border-left-color: var(--gold);
  color: var(--primary);
  font-style: italic;
}

/* ============================================================
   Month-grid symmetric columns (v0.4.2)
   ------------------------------------------------------------
   CSS Grid items default to min-width: auto, meaning their
   intrinsic content width can exceed their 1fr allocation —
   long event labels were pushing some cells wider than others,
   making the grid asymmetric. min-width: 0 lets the cell shrink
   below content and forces the existing ellipsis truncation
   to actually take effect.
   ============================================================ */

.month-grid .cell { min-width: 0; overflow: hidden; }
.month-grid .events { min-width: 0; }


/* RTL header spacing fix — Hebrew (mirror LTR margins) */
html[dir="rtl"] .site-nav{margin-left:0;margin-right:1.5rem;}
html[dir="rtl"] .info-row{margin-left:0;margin-right:auto;}
html[dir="rtl"] .lang-dropdown-menu{right:auto;left:0;}


/* RTL nav separator side + Hebrew tagline size */
html[dir="rtl"] .site-nav li:not(:last-child)::before{right:auto;left:-0.95rem;}
html[dir="rtl"] .tagline{font-size:0.72rem;}
@media (max-width:980px){html[dir="rtl"] .site-nav li:not(:last-child)::before{right:auto;left:-0.7rem;}}
html[dir="rtl"] .jt-footer .brand-mark .tagline{font-size:0.72rem;}

/* RTL: keep flip-clock digits left-to-right so times don't reverse */
html[dir="rtl"] .time-counter .digits{direction:ltr;}


/* ── Mobile (≤760px): language switcher as a compact toggle in the top bar,
   beside the burger; brand no longer grows so all three fit on row 1.
   Footer "Sprachen" column stays as a secondary path. */
@media (max-width: 1050px) {
  .site-header.static .container { justify-content: flex-start; column-gap: 0.5rem; }
  .site-header.static .brand { order: 1; flex: 0 1 auto; min-width: 0; margin-right: auto;
    font-size: 0.78rem; letter-spacing: 0.02em; }
  .site-header.static .lang-dropdown { display: inline-flex; order: 2; flex: 0 0 auto; margin-left: 0; }
  .site-header.static .nav-toggle-btn { display: flex; order: 3; flex: 0 0 auto; margin-left: 0.5rem; }
  .site-header.static .site-nav { order: 4; flex-basis: 100%; }
  .site-header.static .info-row { order: 99; flex-basis: 100%; }
  .site-header.static .lang-dropdown-menu {
    position: absolute; top: calc(100% + 6px);
    right: 0; left: auto; z-index: 200; min-width: 8rem;
  }
  html[dir="rtl"] .site-header.static .lang-dropdown-menu { right: auto; left: 0; }
}

@media (max-width: 400px) {
  .site-header.static .container { padding-left: 18px; padding-right: 18px; column-gap: 0.4rem; }
  .site-header.static .brand { font-size: 0.72rem; letter-spacing: 0.01em; }
  .site-header.static .nav-toggle-btn { margin-left: 0.35rem; }
}


/* ── Tablet band (720–1050px): fit the whole header on one row — brand,
   prayer strip, language toggle, burger — since there's room. The prayer
   strip drops its full-width wrap and sits inline. (Below 720px it still
   wraps to its own row; above 1050px the full desktop header returns.) */
@media (min-width: 720px) and (max-width: 1050px) {
  .site-header.static .container { flex-wrap: nowrap; column-gap: 1.25rem; }
  .site-header.static .brand { order: 1; flex: 0 0 auto; margin-right: 0;
    font-size: 1rem; letter-spacing: 0.06em; }
  .site-header.static .info-row { order: 2; flex: 0 1 auto; flex-basis: auto;
    margin-left: auto; border-top: none; padding-top: 0; margin-top: 0; }
  .site-header.static .lang-dropdown { order: 3; flex: 0 0 auto; margin-left: 1rem; }
  .site-header.static .nav-toggle-btn { order: 4; flex: 0 0 auto; margin-left: 0.5rem; }
}