/* ═══════════════════════════════════════════════════════════════════
   /seminare — der Katalog
   Register der Konzept-/Inhaltsseiten (DESIGN §6): Weiß, Haarlinien,
   ein Cream-Feld als Abschluss, keine Einstiegs-Animationen. Der
   Katalog soll sich wie ein Fahrplan lesen, nicht wie eine Bühne.
   Wiederverwendet: .pill .h1 .h2 .chip .chip--filter .field .btn
   .ticks .tag--demo .sec-head .page-head
   ═══════════════════════════════════════════════════════════════════ */

/* ── Kopf ─────────────────────────────────────────────────────────── */
.sem-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:var(--s-12);align-items:end}
.sem-intro__main .h1{max-width:14ch}
.sem-intro__chips{margin-top:var(--s-8)}
/* ÖBFV ist eine fremde Anerkennung, kein HIG-Zeichen — deshalb keine
   volle rote Fläche, sondern Haarlinie und rote Schrift (DESIGN §2). */
.chip--oebfv{border-color:var(--red-200);color:var(--c-signal)}
.sem-intro__lead{font-size:var(--t-md);color:var(--c-muted);max-width:56ch}
.sem-intro__custom{margin-top:var(--s-5);padding-top:var(--s-5);
  border-top:1px solid var(--c-line);font-size:var(--t-sm);color:var(--c-muted);
  max-width:56ch}

/* ── Katalog-Sektion ──────────────────────────────────────────────── */
.sem-cat{padding-block:var(--s-10) var(--section-y);scroll-margin-top:6rem}

/* ── Filterleiste ─────────────────────────────────────────────────── */
.sem-f{padding-bottom:var(--s-8);margin-bottom:var(--s-8);
  border-bottom:1px solid var(--c-line)}
.sem-f__chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.sem-f__label{margin-right:var(--s-3);font-size:var(--t-xs);font-weight:var(--fw-strong);
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.sem-f__form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s-4);
  margin-top:var(--s-6)}
.sem-f__form .field select{min-width:12rem}
/* Ohne JS ist das der Absendeknopf des Filterformulars; mit JS filtert
   seminare.js sofort und blendet ihn aus (PRINCIPLES §5). */
.js .sem-f__go{display:none}

.sem-f__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);
  margin-top:var(--s-6)}
.sem-f__result{font-size:var(--t-sm);color:var(--c-muted)}
.sem-f__result strong{color:var(--c-ink)}
.sem-f__reset{font-size:var(--t-sm);font-weight:var(--fw-strong);color:var(--c-signal);
  border-bottom:1px solid transparent;transition:border-color var(--dur-ui)}
.sem-f__reset:hover{border-color:var(--c-signal)}
.sem-f__reset[hidden]{display:none}

/* ── Ansichts-Umschalter — Karten · Liste · Kalender ──────────────── */
.sem-view{display:flex;margin-left:auto;border:1px solid var(--c-line);
  border-radius:var(--r-pill);padding:.2rem}
/* .65rem statt .5rem: darunter blieb der Knopf bei 36px und riss die
   40px-Trefferfläche (DESIGN §12) — gemessen. */
.sem-view__btn{padding:.65rem 1.1rem;border-radius:var(--r-pill);font-size:var(--t-xs);
  font-weight:var(--fw-strong);letter-spacing:.02em;color:var(--c-muted);
  transition:background var(--dur-ui),color var(--dur-ui)}
.sem-view__btn:hover{color:var(--c-signal)}
.sem-view__btn.is-active{background:var(--c-signal);color:#fff}

/* ── Ansicht 1 · Karten ───────────────────────────────────────────── */
.sem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5)}
/* Seit 17.08. ist die Karte kein <a> mehr, sondern trägt zwei Ziele:
   der Titel führt aufs Kursblatt und zieht sich per ::after über die
   ganze Fläche (die Karte bleibt also überall klickbar), „Anmelden"
   liegt mit z-index darüber. Verschachtelte Links wären ungültig.
   :focus-within spiegelt den Hover — sonst zeigt die Tastatur nichts. */
.semcard{position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-card);
  padding:var(--s-6);
  transition:border-color var(--dur-ui),box-shadow var(--dur-ui),transform var(--dur-ui) var(--ease)}
.semcard:hover,.semcard:focus-within{border-color:transparent;box-shadow:var(--sh-card);
  transform:translateY(-3px)}
.semcard__title::after{content:"";position:absolute;inset:0;border-radius:var(--r-card)}
.semcard__cta{position:relative;z-index:1;flex:none}
.semcard__top{display:flex;flex-wrap:wrap;gap:var(--s-2);min-height:1.9rem}
.semcard__when{display:block;margin-top:var(--s-6)}
.semcard__date{display:block;font-size:var(--t-lg);font-weight:var(--fw-title);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.semcard__date--open{color:var(--c-signal)}
.semcard__span{display:block;margin-top:.15rem;font-size:var(--t-xs);color:var(--c-muted)}
.semcard__art{display:block;margin-top:var(--s-5);font-size:var(--t-xs);font-weight:var(--fw-strong);
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-signal)}
.semcard__title{display:block;margin-top:var(--s-2);font-size:var(--t-md);
  font-weight:var(--fw-title);line-height:1.25;letter-spacing:-.02em;hyphens:auto;
  transition:color var(--dur-ui)}
.semcard:hover .semcard__title{color:var(--c-signal)}
.semcard__where{display:block;margin-top:var(--s-2);font-size:var(--t-sm);color:var(--c-muted)}
/* margin-top:auto — die Füße richten sich über die Reihe aus, egal wie
   lang der Titel läuft. */
.semcard__foot{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s-4);margin-top:auto;padding-top:var(--s-6)}
.semcard__amount{display:block;font-size:var(--t-md);font-weight:var(--fw-title);
  font-variant-numeric:tabular-nums}
.semcard__amount--open{color:var(--c-muted)}
.semcard__vat{display:block;font-size:var(--t-xs);color:var(--c-muted)}
.semcard__seats{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-4);
  padding-top:var(--s-4);border-top:1px solid var(--c-line);
  font-size:var(--t-xs);color:var(--c-muted)}
.semcard__dot{flex:none;width:.45rem;height:.45rem;border-radius:var(--r-pill);
  background:var(--c-muted-d)}
.semcard__seats.is-scarce{color:var(--c-signal);font-weight:var(--fw-strong)}
.semcard__seats.is-scarce .semcard__dot{background:var(--c-signal)}

/* ── Ansicht 2 · Liste ────────────────────────────────────────────── */
.sem-list{border-top:1px solid var(--c-line)}
/* Letzte Spur 2,4rem → 8rem: dort stand der Pfeil, jetzt steht dort
   „Anmelden". */
.semrow{position:relative;display:grid;
  grid-template-columns:13rem minmax(0,1fr) 12rem 8rem 7rem 8rem;
  align-items:center;gap:var(--s-5);padding:var(--s-4) var(--s-3);
  border-bottom:1px solid var(--c-line);transition:background var(--dur-ui)}
/* Kopfzeile: dieselben Spuren, damit die Spalten unter ihren Titeln stehen. */
.semrow--head{padding-block:var(--s-2);border-bottom:1px solid var(--c-line);
  font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-muted)}
.semrow--head span{font-size:inherit;font-weight:inherit;color:inherit}
/* Der Hover färbt die Zeile nicht ein (DESIGN §2: keine weichen Flächen),
   sondern rückt sie 3px nach rechts — dieselbe Geste wie überall (§7).
   Nur Datenzeilen, nicht der Kopf: der trägt kein .semrow__title. */
.semrow{transition:transform var(--dur-ui) var(--ease)}
.semrow:has(.semrow__title):hover,
.semrow:has(.semrow__title):focus-within{transform:translateX(3px)}
.semrow__title::after{content:"";position:absolute;inset:0}
.semrow__cta{position:relative;z-index:1;justify-self:end}
.semrow__date{display:block;font-size:var(--t-sm);font-weight:var(--fw-title);
  font-variant-numeric:tabular-nums}
.semrow__date--open{color:var(--c-signal)}
.semrow__span{display:block;font-size:var(--t-xs);color:var(--c-muted)}
.semrow__title{display:block;font-size:var(--t-md);font-weight:var(--fw-title);
  letter-spacing:-.02em;line-height:1.25;transition:color var(--dur-ui)}
.semrow:hover .semrow__title{color:var(--c-signal)}
.semrow__meta{display:block;margin-top:.1rem;font-size:var(--t-xs);color:var(--c-muted)}
.semrow__sep{margin-inline:.4em;color:var(--c-muted)}
.semrow__where{font-size:var(--t-sm);color:var(--c-muted)}
.semrow__amount{font-size:var(--t-sm);font-weight:var(--fw-title);
  font-variant-numeric:tabular-nums}
.semrow__amount--open{font-weight:var(--fw-body);color:var(--c-muted)}
.semrow__seats{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-xs);
  color:var(--c-muted)}
.semrow__seats.is-scarce{color:var(--c-signal);font-weight:var(--fw-strong)}
.semrow__seats.is-scarce .semcard__dot{background:var(--c-signal)}

/* ── Ansicht 3 · Kalender ─────────────────────────────────────────── */
.sem-cal__months{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-10)}
.sem-cal__title{font-size:var(--t-lg);font-weight:var(--fw-title);letter-spacing:-.02em;
  margin-bottom:var(--s-4)}
.sem-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);
  border-top:1px solid var(--c-line);border-left:1px solid var(--c-line)}
.sem-cal__wd{padding:var(--s-2);border-right:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);font-size:var(--t-xs);font-weight:var(--fw-strong);
  letter-spacing:.06em;color:var(--c-muted);text-align:center}
.sem-cal__day{min-height:6.5rem;padding:var(--s-2);border-right:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);display:flex;flex-direction:column;gap:.2rem}
/* Wochenende und Füllzellen tragen keine Fläche, nur eine leisere Ziffer —
   getönte Felder brauchen einen benennbaren Grund (DESIGN §6). */
.sem-cal__day--pad{min-height:0}
.sem-cal__no{font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-muted);
  font-variant-numeric:tabular-nums}
.sem-cal__day.is-we .sem-cal__no{opacity:.5}
.sem-cal__day.has-sem .sem-cal__no{color:var(--c-ink)}
/* Der Termin-Chip: Haarlinie links in Signal statt einer Füllung. */
.sem-cal__ev{display:block;padding:.3rem .4rem .3rem .5rem;
  border-left:2px solid var(--c-signal);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--t-xs);line-height:1.25;
  transition:color var(--dur-ui),transform var(--dur-ui) var(--ease)}
.sem-cal__ev:hover{color:var(--c-signal);transform:translateX(2px)}
.sem-cal__ev-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-weight:var(--fw-strong)}
.sem-cal__ev-day{display:block;color:var(--c-muted);font-weight:var(--fw-body)}
.sem-cal__open{margin-top:var(--s-10);padding-top:var(--s-6);
  border-top:1px solid var(--c-line)}
.sem-cal__open-head{font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-muted);margin-bottom:var(--s-3)}
.sem-cal__open-list li{display:flex;gap:var(--s-4);font-size:var(--t-sm)}
.sem-cal__open-list a{font-weight:var(--fw-strong);transition:color var(--dur-ui)}
.sem-cal__open-list a:hover{color:var(--c-signal)}
.sem-cal__open-list span{color:var(--c-muted)}

/* ── Fuß der Sektion ──────────────────────────────────────────────── */
.sem-empty{margin-top:var(--s-8);padding:var(--s-6);border:1px dashed var(--c-line);
  border-radius:var(--r-card);font-size:var(--t-sm);color:var(--c-muted)}
.sem-empty a{color:var(--c-signal);font-weight:var(--fw-strong)}
.sem-empty[hidden]{display:none}
.sem-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-3);
  margin-top:var(--s-8);font-size:var(--t-xs);color:var(--c-muted);max-width:70ch}

/* ── Ausbaustufe ──────────────────────────────────────────────────── */
.sem-more{padding-block:var(--section-y);background:var(--c-cream)}
.sem-more .ticks{columns:2;column-gap:var(--s-10)}
.sem-more .ticks li{break-inside:avoid;margin-bottom:var(--s-3)}
.sem-more .ticks li::before{background:var(--c-cream)}

/* ── Responsive (DESIGN §5: 1140 / 900 / 760 / 520) ───────────────── */
@media (max-width:1400px){
  .sem-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1140px){
  .sem-intro{grid-template-columns:1fr;gap:var(--s-8);align-items:start}
  .semrow{grid-template-columns:11rem minmax(0,1fr) 8rem 7rem 2.4rem}
  .semrow__seats{display:none}
  .sem-cal__months{grid-template-columns:1fr;gap:var(--s-8)}
}
@media (max-width:900px){
  .sem-grid{grid-template-columns:1fr 1fr}
  .sem-view{margin-left:0}
  .sem-more .ticks{columns:1}
}
@media (max-width:760px){
  .sem-f__form{gap:var(--s-3)}
  .sem-f__form .field,.sem-f__form .field select{width:100%;min-width:0}
  .sem-f__form .field--inline{flex:1 1 100%}
  /* Die Liste wird am Handy zur Karte — sechs Spuren sind dort kein
     Fahrplan mehr, sondern Kleingedrucktes. */
  .semrow--head{display:none}
  .semrow{grid-template-columns:1fr auto;gap:var(--s-2) var(--s-4);
    padding-block:var(--s-5)}
  .semrow__when{grid-column:1/-1;order:-1}
  .semrow__body{grid-column:1/-1}
  .semrow__where{grid-column:1}
  .semrow__price{grid-column:2;text-align:right}
  .semrow__seats{grid-column:1}
  .semrow__cta{grid-column:2}
  .sem-cal__day{min-height:4.5rem}
}
@media (max-width:520px){
  .sem-grid{grid-template-columns:1fr}
  /* Der Kalender läuft unter 7 Spalten in Kleinstzellen. Waagrecht
     scrollen ist ehrlicher als ein Raster, in dem nichts mehr lesbar
     ist — der Umschalter bietet daneben Karten und Liste an. */
  .sem-cal__month{overflow-x:auto}
  .sem-cal__grid{min-width:32rem}
}