:root{
  --bg:#1e1e1e; --fg:#e6e6e6; --muted:#bdbdbd;
  --surface:#2b2b2b; --surface-2:#232323;
  --grid-border:#3a3a3a; --sticky:#202020;

  /* Eventtyp-Farben */
  --t-meeting:#223e7a;         --t-meeting-fg:#ffffff;
  --t-workshop:#1e5b70;        --t-workshop-fg:#c2e9f2;
  --t-special:#3a1f4d;         --t-special-fg:#ffffff;
  --t-service:#f3c1d9;         --t-service-fg:#2b0e1d;
  --t-pause:#3a3a3a;           --t-pause-fg:#e6e6e6;
  --t-marathon:#2a6f6b;        --t-marathon-fg:#ffffff;

  --time-hl:#3366cc;           --time-hl-fg:#ffffff;

  /* Responsive Variablen */
  --time-col-w: 72px;          /* schmalere Zeitspalte */
}

/* Base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  display:flex;flex-direction:column;min-height:100vh;margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
  font-size:clamp(14px, 1.5vw, 16px);
  background:var(--bg);color:var(--fg)
}
main{flex:1;max-width:1200px;margin:auto;padding:1rem}
h1{margin:.25rem 0 1rem;font-size:clamp(1.6rem,5.6vw,2.4rem);line-height:1.1}

/* Tages-Cards */
.day-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-bottom:.6rem}
.day-card{
  border:1px solid var(--grid-border);border-radius:14px;
  background:linear-gradient(180deg,#2aa86d,#1f7a50);
  color:#eafff3;padding:1rem;cursor:pointer;text-align:center;
  transition:transform .1s, outline .1s, filter .1s;
}
.day-card:hover{filter:brightness(1.05)}
.day-card:active{transform:scale(.98)}
.day-card.active{outline:2px solid #6be3a8}
.day-title{font-weight:700;font-size:clamp(1.02rem,3.6vw,1.18rem)}
.day-sub{opacity:.9;font-size:clamp(.78rem,2.6vw,.9rem)}

/* Controls & Legende */
.controls{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:.4rem}
.controls #refresh{
  background:#3a7bfd;border:0;color:#fff;padding:.5rem .75rem;border-radius:8px;cursor:pointer;
}
.controls #refresh:hover{filter:brightness(1.1)}
.legend{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.6rem;align-items:center}
.chip{
  font-size:clamp(.72rem,2.2vw,.85rem);
  padding:.18rem .44rem;border-radius:9999px;border:1px solid var(--grid-border);opacity:.95
}
.chip.meeting{background:var(--t-meeting);color:var(--t-meeting-fg)}
.chip.workshop{background:var(--t-workshop);color:var(--t-workshop-fg)}
.chip.special{background:var(--t-special);color:var(--t-special-fg)}
.chip.service{background:var(--t-service);color:var(--t-service-fg)}
.chip.essen{background:var(--t-essen);color:var(--t-essen-fg)}
.chip.pause{background:var(--t-pause);color:var(--t-pause-fg)}
.chip.party{background:linear-gradient(135deg,#ff8a00,#e52e71);color:#fff}
.chip.marathon{background:var(--t-marathon);color:var(--t-marathon-fg)}

/* Notiz in der Legende (Marathon läuft durchgehend) */
.legend-note{
  font-size:clamp(.72rem, 1.9vw, .84rem);
  color:var(--muted);
  margin-left:.15rem;
  line-height:1.2;
}
.legend-infty{
  display:inline-block; margin-right:.25rem;
  color:var(--t-marathon-fg);
  background:var(--t-marathon);
  border-radius:9999px; padding:0 .35rem;
}

/* Grid */
.grid-wrap{border:1px solid var(--grid-border);border-radius:12px;overflow:auto;background:#2b2b2b}
.timetable{display:grid;grid-auto-rows:40px}
.timetable.compact{grid-auto-rows:28px}

/* Achsen */
.timecell,.roomcell{
  position:sticky;z-index:3;background:#202020;
  border-right:1px solid var(--grid-border);display:flex;justify-content:center;
  font-weight:600;
  font-size:clamp(.8rem,2.2vw,.93rem);
}

/* Zeiten oben statt zentriert + etwas kleinere Zeit-Schrift */
.timecell{
  left:0;align-items:flex-start;padding-top:2px;transition:background-color .15s,color .15s;
  font-size:clamp(.72rem,1.8vw,.86rem);
}
.timecell.highlight{background:var(--time-hl);color:var(--time-hl-fg)}
.roomcell{top:0;align-items:center}

/* Raster-Linien (horizontal = echte Zeitlinien: oben an jeder Zeile) */
.gridcell{
  border-right:1px solid var(--grid-border);
  border-top:1px solid var(--grid-border);
  border-bottom:none;
}

/* ► Absolute Event-Schicht pro Spalte (pixelgenaues Y) */
.abscol{position:relative; z-index:2; grid-row:2 / -1;}
.abscol .event{position:absolute}

/* Event-Blöcke */
.event{
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;padding:.24rem .34rem;overflow:hidden;
  display:flex;flex-direction:column;gap:.16rem;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  cursor:pointer; user-select:none;
  transition: box-shadow .12s, transform .06s;
  background:#223e7a; /* fallback */
}
.event.meeting{background:var(--t-meeting);color:var(--t-meeting-fg)}
.event.workshop{background:var(--t-workshop);color:var(--t-workshop-fg)}
.event.special{background:var(--t-special);color:var(--t-special-fg)}
.event.service{background:var(--t-service);color:var(--t-service-fg)}
.event.essen{background:var(--t-essen);color:var(--t-essen-fg)}
.event.pause{background:var(--t-pause);color:var(--t-pause-fg)}
.event.marathon{background:var(--t-marathon);color:var(--t-marathon-fg)}
.event.party{background:linear-gradient(135deg,#ff8a00,#e52e71);color:#fff}

/* Glow bei Auswahl */
.event.selected{
  box-shadow:0 0 0 2px rgba(255,255,255,.35),0 0 14px rgba(51,102,204,.55),0 4px 8px rgba(0,0,0,.35);
}

/* Stoßkante: keine Doppelrahmen, aber ohne Überlappung */
.event.touch-top{
  border-top:none;
  border-top-left-radius:0; border-top-right-radius:0;
}
.event.touch-bottom{
  border-bottom:none;
  border-bottom-left-radius:0; border-bottom-right-radius:0;
}

/* Overlap-Lanes */
.event.overlap{border-style:dashed}

/* Ruhige, kleinere Typo + Line-Clamp */
.event .title{
  font-weight:700;line-height:1.12;
  font-size:clamp(.76rem,2.6vw,.86rem);
  hyphens:auto;-webkit-hyphens:auto;word-break:break-word;
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
}
.event .speakers{
  opacity:.92;font-size:clamp(.64rem,2.1vw,.78rem);
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
}

/* Fehlertext */
.error{color:#ffb3b3;margin:.5rem 0}

/* Footer */
.sticky-footer{
  flex-shrink:0;background:#111;border-top:1px solid var(--grid-border);
  padding:.6rem 1rem;text-align:center;font-size:clamp(.76rem,2.2vw,.86rem);line-height:1.35
}
/* Footer-Links klar & kontrastreich */
.sticky-footer a{
  color:#9ad8ff;
  text-decoration:underline;
  text-underline-offset:2px;
}
.sticky-footer a:hover,
.sticky-footer a:focus,
.sticky-footer a:visited{
  color:#cfe6ff;
}

/* Breakpoints */
@media (max-width: 900px){
  .timetable{grid-auto-rows:36px}
}
@media (max-width: 720px){
  :root{ --time-col-w: 56px }
  main{max-width:100%;padding:1rem .75rem}
  .timetable{grid-auto-rows:34px}
}
@media (max-width: 540px){
  :root{ --time-col-w: 52px }
  .timetable{grid-auto-rows:34px}
}
@media (max-width: 420px){
  .timetable{grid-auto-rows:32px}
  .event .title{font-size:clamp(.74rem,3.2vw,.84rem)}
  .event .speakers{font-size:clamp(.62rem,3vw,.76rem)}
}