:root {
  --bg:#0b0f14;
  --card:#111821;
  --muted:#96a2b3;
  --text:#e9eef6;
  --accent:#64b5ff;
  --ok:#7dd97b;
}

* { box-sizing:border-box }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:500 18px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}
.wrap { max-width:1200px; margin:0 auto; padding:24px }
header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px }
h1 { font-size:28px; margin:0 }
.now { font-variant-numeric:tabular-nums; color:var(--muted) }

.grid { display:grid; grid-template-columns:1fr 1fr; gap:20px }
@media (max-width:900px){ .grid { grid-template-columns:1fr } }

.card {
  background:var(--card);
  border:1px solid #1d2532;
  border-radius:18px;
  padding:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.card h2 { margin:2px 0 12px; font-size:20px }
.empty { color:var(--muted); font-style:italic }
.item {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid #1e2840;
  margin-bottom:10px;
}
.badge {
  min-width:120px;
  text-align:right;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.ttl { font-weight:650 }
.meta { color:var(--muted); font-size:14px }
.allDay { color:var(--ok) }

.timeline .row { position:relative; padding-left:18px; margin:14px 0 }
.timeline .dot {
  width:10px; height:10px; border-radius:10px;
  background:var(--accent);
  position:absolute; left:0; top:6px; transform:translateX(-50%);
}

.refresh { color:var(--muted); font-size:13px; margin-top:8px }

.alert {
  border:1px solid #ff6b6b;
  background:rgba(255,70,70,.08);
  color:#ffd1d1;
  padding:10px 12px;
  border-radius:12px;
  margin-bottom:10px;
  font-size:14px;
}

/* Titel-Layout: Hauptzeile + kleinere Unterzeile */
.ttl {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.ttl .main {
  font-weight: 650;
  font-size: 1.05rem;
}
.ttl .sub {
  font-size: 0.9rem;
  font-weight: 400;
  color: #6b7280;          /* dezent grau */
  margin-top: 2px;
}

/* Gottesdienst-Rahmen dicker (du hast .highlight bereits im JS) */
.item.highlight {
  border: 2px solid #1e3a8a;
  box-shadow: 0 0 6px rgba(30, 58, 138, 0.15);
  border-radius: 12px;     /* falls überschrieben, hier sicherstellen */
}

.slideshow.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: grid;
  place-items: center;
  z-index: 9999;
  padding: 2vw;
}
.slideshow.overlay .slide {
  width: 92vw;
  height: 92vh;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.2);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.slideshow.overlay img { width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.slideshow .slide { opacity: 0; transition: opacity .5s ease; }
.slideshow .slide.active { opacity: 1; }
/* Falls Browser/TV das hidden-Attribut nicht sauber behandelt */
.slideshow[hidden] { display: none !important; }