/* ===== EFG-Rastatt Theme (hell) ===== */
:root{
  --bg:#f7f7f9;                /* Gesamt-Hintergrund */
  --card:#ffffff;              /* Karten-Hintergrund */
  --text:#273042;              /* Primär-Text (fast schwarz-blau) */
  --muted:#6b7280;             /* Sekundär-Text */
  --primary:#3c3b8b;           /* Violett für Überschriften/Leisten */
  --accent:#8fd3ea;            /* Himmelblau (Buttons/Badges) */
  --accent-deep:#0b6fa4;       /* Dunkles Blau für Kontrast-Text */
  --line:#e6e8ee;              /* Linien */
  --shadow: 0 8px 24px rgba(20, 30, 60, .08);
}

*{box-sizing:border-box}
html,body{background:var(--bg); color:var(--text); font: 500 18px/1.55 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial}
h1,h2{color:var(--primary); letter-spacing:.2px}

.wrap{max-width:1200px;margin:0 auto;padding:24px}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
h1{font-size:36px;margin:0}
.now{font-size:16px;color:var(--muted)}

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

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  box-shadow:var(--shadow);
}
.card h2{margin:4px 0 12px;font-size:24px}

.meta{color:var(--muted);font-size:14px}
.empty{color:var(--muted);font-style:italic}

/* Listenelement im „EFG“-Look */
.item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: #fff;
  margin-bottom:12px;
}
.ttl{font-weight:650; color: var(--text);}

/* Zeit-Badge als „Pill“ */
.badge{
  align-self:start;
  padding:6px 10px;
  min-width:auto;
  text-align:center;
  background: #e8f6ff;
  color: var(--accent-deep);
  border: 1px solid #cdeafb;
  border-radius:999px;
  font-variant-numeric:tabular-nums;
  font-size:14px;
}
.allDay{ background:#e9f8ee; color:#166534; border-color:#cdebd6 }

/* Timeline im hellen Stil */
.timeline .row{position:relative;padding-left:22px;margin:16px 0}
.timeline .dot{
  width:10px;height:10px;border-radius:10px;background:var(--primary);
  position:absolute;left:4px;top:8px;
}

/* Infobanner (Fehlerhinweis) */
.alert{
  border:1px solid #ffb4b4;
  background:#fff4f4;
  color:#9a1c1c;
  padding:10px 12px;border-radius:12px;margin:10px 0 14px;font-size:14px;
}

/* kleine Details */
a{color:var(--accent-deep);text-decoration:none}
a:hover{text-decoration:underline}