/* ============================================================
   HOCKERSTUBE — Event-Kalender (Events-Sektion, Modul B)
   Tabellen-Sprache des Skizzen-Skins: eine Linie, ein Gutter.
   Events = Spielblau-Kästchen, Detail im Modal mit blauer Kontur.
   ============================================================ */

.kal{ border: none; border-top: var(--rule); }

/* ---- Kopf: Monat + Jahr links, Navigation rechts ---- */
.kal__head{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:16px;
  padding: .875rem 1.125rem; border-bottom: var(--rule);
}
.kal__head .kal__title{ justify-self:center; text-align:center; }
/* Navigation als Textlinks (Alda) statt Buttons */
.kal__navlink{
  background:none; border:none; padding:0;
  justify-self:start; font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  white-space:nowrap;
}
.kal__navlink--next{ justify-self:end; }
.kal__title{
  margin:0; font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-family:"alda", serif; font-weight:300; font-style:italic;
  letter-spacing:.005em; line-height:1.1;
  color: var(--color-ink);
}
.kal__year{
  font-family: inherit; font-weight: inherit; font-style: inherit;
  font-size: 1em; letter-spacing: inherit;
  color: var(--color-ink); margin-left:.2em;
}


/* ---- Wochentage-Zeile ---- */
.kal__week{
  display:grid; grid-template-columns: repeat(7, minmax(0,1fr));
  border-bottom: var(--rule);
}
.kal__week span{
  font-family: var(--font-mono); font-size:.68rem;
  text-transform:uppercase; letter-spacing:.1em;
  color: var(--color-ink-muted); padding:.5rem .625rem;
}
.kal__week span + span{ border-left: var(--rule); }

/* ---- Tagesraster ---- */
.kal__grid{ display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); }
.kal__day{
  min-height: clamp(68px, 8.5vw, 116px);
  padding: 6px; display:flex; flex-direction:column; gap:6px;
  border-left: var(--rule); border-top: var(--rule);
}
.kal__day:nth-child(7n+1){ border-left:none; }
.kal__day:nth-child(-n+7){ border-top:none; }
.kal__num{
  font-family: var(--font-mono); font-size:.68rem; letter-spacing:.04em;
  color: var(--color-ink);
  width:1.5rem; height:1.5rem; display:grid; place-items:center; flex:none;
}
.kal__day.is-out .kal__num{ opacity:.32; }
.kal__day.is-today .kal__num{ color: var(--accent); font-weight:700; }

/* ---- Event-Kästchen: Spielblau ---- */
.kal__evs{ display:flex; flex-direction:column; gap:3px; }
.kal__ev{
  display:block; width:100%; text-align:left; cursor:pointer;
  border:none; border-radius:0;
  background: var(--hs-navy); color:#fff;
  font-family: var(--font-sans); font-size:.7rem; font-weight:600; line-height:1.3;
  padding:4px 7px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition: background .15s ease;
}
.kal__ev:hover, .kal__ev:focus-visible{ background: var(--hs-blue); }
/* Events am heutigen Tag: rot wie die Tageszahl */
.kal__ev.is-today-ev{ background: var(--accent); }
.kal__ev.is-today-ev:hover, .kal__ev.is-today-ev:focus-visible{ background: var(--hs-blue); }
.kal__ev .t{
  font-family: var(--font-mono); font-weight:400; font-size:.62rem;
  letter-spacing:.03em; opacity:.85; margin-right:4px;
}

.kal__navlink .nav-s{ display:none; }

@media (max-width: 700px){
  .kal__head{ padding:.625rem .75rem; gap:10px; }
  .kal__navlink{ font-size:.95rem; }
  .kal__week span{ padding:.4rem .4rem; }
  .kal__day{ padding:4px; min-height:60px; gap:4px; }
  .kal__num{ width:1.25rem; height:1.25rem; font-size:.6rem; }
  .kal__ev{ font-size:.58rem; padding:3px 4px; }
  .kal__ev .t{ display:block; margin:0; }
}
@media (max-width: 560px){
  .kal__navlink .nav-l{ display:none; }
  .kal__navlink .nav-s{ display:inline; font-size:1.25rem; line-height:1; }
}

/* ============================================================
   Modal: rechteckiges Fenster mit blauer Kontur
   ============================================================ */
.kal-modal{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px; }
.kal-modal[hidden]{ display:none; }
.kal-modal__backdrop{
  position:absolute; inset:0;
  background: transparent; /* Interface bleibt sichtbar — Klick daneben schließt */
}
.kal-modal__box{
  position:relative; width:min(460px, 100%);
  background: var(--hs-sand-50);
  border: 3px solid var(--hs-navy); border-radius:0;
  max-height: calc(100vh - 40px); overflow:auto;
  color: var(--hs-navy);
}
.kal-modal__top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:.625rem .875rem .625rem 1.125rem; border-bottom: var(--rule);
}
.kal-modal__date{
  font-family: var(--font-mono); font-size:.68rem;
  text-transform:uppercase; letter-spacing:.08em; color: var(--color-ink-muted);
}
/* Schließen: handgezeichnetes Plus aus dem FAQ, um 45° gedreht */
.kal-modal__close{
  flex:none; width:2.125rem; height:2.125rem; padding:0;
  border:none; background:none; cursor:pointer;
  display:grid; place-items:center;
}
.kal-modal__close .x{
  width:1.5rem; height:1.5rem; display:block;
  background-color: var(--hs-navy);
  -webkit-mask: url('assets/icons-new/plus.svg') center / contain no-repeat;
  mask: url('assets/icons-new/plus.svg') center / contain no-repeat;
  transform: rotate(45deg);
  transition: transform .2s ease, background-color .15s ease;
}
.kal-modal__close:hover .x{ transform: rotate(135deg); background-color: var(--accent); }
@media (prefers-reduced-motion: reduce){ .kal-modal__close .x{ transition:none; } }

.kal-modal .kal-modal__title{
  margin:0; padding: .875rem 1.125rem .125rem;
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  font-weight: var(--fw-bold); letter-spacing: var(--ls-tight);
  color: var(--hs-navy);
}
.kal-modal__desc{
  margin:.375rem 0 1rem; padding: 0 1.125rem;
  font-size:.9rem; line-height:1.55; color: var(--color-ink-muted);
  max-width: 52ch;
}
.kal-modal__meta{ margin:0; border-top: var(--rule); }
.kal-modal__meta > div{
  display:grid; grid-template-columns: 110px 1fr; gap:12px; align-items:baseline;
  padding:.55rem 1.125rem; border-bottom: var(--rule);
}
.kal-modal__meta dt{
  font-family: var(--font-mono); font-size:.68rem;
  text-transform:uppercase; letter-spacing:.08em; color: var(--color-ink-muted);
}
.kal-modal__meta dd{ margin:0; font-size:.85rem; }
.kal-modal__cta{ margin: .875rem 1.125rem 1rem; }