/* ---------- Design-Tokens ---------- */
:root{
  --maxw: 860px;

  --s-2:.25rem; --s-3:.5rem; --s-4:.75rem;
  --s-5:1rem;   --s-6:1.25rem; --s-7:1.6rem;
  --s-8:1.9rem; --s-9:2.1rem;  --s-10:2.4rem; --s-12:3rem;

  --fg: rgba(0,0,0,.94);
  --fg-soft: rgba(0,0,0,.80);
  --fg-dim: rgba(0,0,0,.66);

  --rule: rgba(0,0,0,.14);
}

/* ---------- Grundlayout ---------- */
.page .wrap{ max-width:var(--maxw); margin:0 auto; text-align:left; }
@media (max-width:560px){ .page .wrap{ padding:0 .75rem; }}

/* ---------- Typo-Hierarchie (fein abgestuft) ---------- */
.h1{ margin:0 0 var(--s-10); font-size:var(--s-9); font-weight:590; line-height:1.15; letter-spacing:.005em; text-transform:lowercase; }
.h2{ margin:var(--s-8) 0 var(--s-3); font-size:1.12rem; font-weight:640; text-transform:lowercase; letter-spacing:.045em; color:var(--fg); }

.lead{ font-size:1.07rem; line-height:1.6; margin:var(--s-3) 0 var(--s-6); font-weight:490; color:var(--fg); }
.copy{ font-size:1.03rem; line-height:1.64; margin:var(--s-3) 0 var(--s-5); font-weight:480; color:var(--fg); }

/* Betonungen: bewusst sanft */
strong{ font-weight:590; color:var(--fg); }
.em{ font-weight:530; color:var(--fg); }

.hint{ margin:var(--s-2) 0 var(--s-8); font-size:1.05rem; color:var(--fg-soft); font-weight:520; line-height:1.4; }

/* Trenner */
.rule{ height:1px; background:var(--rule); margin:var(--s-8) 0 var(--s-5); }

/* ---------- Tickets & Abschlussbereich ---------- */
.tickets{ margin:var(--s-6) 0 var(--s-10); font-size:.99rem; line-height:1.55; font-weight:490; color:var(--fg); }
.tickets b{ font-weight:600; }
/* Links im Tickets-Block */
.tickets a{ text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; font-weight:560; }
.tickets a.highlight-link{ font-weight:640; } /* z.B. für "Online" */

/* Abschlussblöcke bewusst weit unten & dezent */
.more{ margin:var(--s-12) 0 0; font-size:.86rem; color:var(--fg-dim); font-weight:470; }
.more a{ text-decoration:none; font-weight:560; }
.more a:hover{ text-decoration:underline; }
/* Label-Betonung: deutlich stärker als Text */
.more .label{ font-weight:640; letter-spacing:.02em; margin-right:.35rem; color:var(--fg); }

.note{ margin:var(--s-6) 0 0; font-size:.86rem; line-height:1.48; color:var(--fg-dim); font-weight:460; }
/* „Noch ein Hinweis" kann als <strong>…</strong> oder <span class="label">…</span> stehen */
.note strong, .note .label{ font-weight:640; letter-spacing:.01em; color:var(--fg); }

/* ---------- Venues (Locations) ---------- */
.venues{ margin:var(--s-5) 0 var(--s-7); border-top:1px solid var(--rule); }
.venue{ padding:var(--s-4) 0; border-bottom:1px solid var(--rule); }
.venue .name{ font-weight:600; font-size:1.12rem; line-height:1.35; margin-bottom:.28rem; }
.venue .addr{ font-size:1.02rem; line-height:1.5; font-weight:480; color:var(--fg-soft); }

/* ---------- Anreise ---------- */
.anr-block{ display:grid; gap:1.15rem; }
.anr-title{ font-weight:600; font-size:1.04rem; margin:0 0 .25rem; }
.anr-list{ margin:.1rem 0 0 1.1rem; padding:0; list-style:disc; line-height:1.6; font-size:1rem; font-weight:480; color:var(--fg); }
.anr-list li strong{ font-weight:590; }
.highlight{ font-weight:540; }

/* ---------- Programm (unsichtbare Spalten, präzise Ausrichtung) ---------- */
.prog-day{
  margin:2.1rem 0 .5rem;
  padding-top:1rem;
  border-top:1px solid var(--rule);
  font-size:1.16rem; font-weight:640; letter-spacing:.045em; text-transform:uppercase; color:var(--fg);
}

/* Zeile: Zeit | Venue | Inhalt | Meta */
.prog-row{
  display:grid;
  grid-template-columns:74px 200px 1fr auto;
  gap:.65rem; align-items:baseline;
  padding:.36rem 0;
}
/* Sicherheitsnetz gegen geerbte Unterstreichungen/Linien */
.prog-row > *{ border:0 !important; box-shadow:none !important; background-image:none !important; }

/* Spalten-Typo – lesbar & hierarchisch */
.time{ font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; }
.venue{ font-weight:580; color:var(--fg); }
.venue .sub{ display:block; font-weight:500; color:var(--fg-soft); }

.content{ display:inline-flex; gap:.38rem; align-items:baseline; flex-wrap:wrap; color:var(--fg); }
.label{ font-weight:540; color:var(--fg); }
.title{ font-weight:630; color:var(--fg); }
.meta{ color:var(--fg-dim); font-weight:490; white-space:nowrap; }

/* Feines „Pill"-Badge */
.pill{
  display:inline-block; padding:.2rem .6rem;
  border:1px solid var(--rule); border-radius:999px;
  font-size:.88rem; font-weight:480; color:var(--fg); opacity:.95; margin-left:.55rem; white-space:nowrap;
}
.pill a{ text-decoration:none; font-weight:590; }
.pill a:hover{ text-decoration:underline; }

/* ---------- Mobile Programm - ALLE Grid-Regeln brutal überschreiben ---------- */
@media (max-width:560px){
  /* Header */
  #header.alt {
    height: 16em !important;
    min-height: 16em !important;
    padding: 1em !important;
  }
  
  #header img {
    width: 85% !important;
  }
  
  /* PROGRAMM: Alles zurücksetzen */
  .prog-row {
    display: flex !important;
    flex-direction: column !important;
    padding: 1.2rem 0 !important;
    border-bottom: 1px solid var(--rule) !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }
  
  /* Zeit und Venue Container */
  .prog-row .time,
  .prog-row .venue {
    order: 1 !important;
    display: inline-block !important;
    margin: 0 !important;
  }
  
  .prog-row .time {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    width: 60px !important;
    margin-right: 1.5rem !important;
  }
  
  .prog-row .venue {
    font-size: .95rem !important;
    color: var(--fg-soft) !important;
    font-style: italic !important;
  }
  
  /* Content darunter */
  .prog-row .content {
    order: 2 !important;
    display: block !important;
    margin-top: .5rem !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
  }
  
  /* Meta darunter */
  .prog-row .meta {
    order: 3 !important;
    display: block !important;
    margin-top: .3rem !important;
    font-size: .85rem !important;
    opacity: .7 !important;
  }
  
  /* Pills */
  .prog-row .pill {
    order: 4 !important;
    margin-top: .6rem !important;
  }
}