/* Die kompakte Terminwahl — Knopf, Schleier, Monatsgitter.
   Nur Design-System-Tokens (var(--color-…), var(--radius-…)) — keine neuen Farben. */

.tk { display: flex; flex-direction: column; gap: 8px; }

.tk-ausloeser { gap: 10px; }

.tk-ausloeser__zahl {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  opacity: .8;
  border-left: 1px solid #ffffff40;
  padding-left: 10px;
}

/* Der Hinweis auf die deutsche Zeit. Er steht unter dem Knopf, in der Tafel
   und in der Liste ohne JavaScript — überall gleich leise, im Ton der übrigen
   Hinweiszeilen (.tk-fuss, .termin-tag__datum). Er soll gelesen, nicht
   angestarrt werden. */
.tk-zeitzone {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-muted-foreground);
  font-size: 13px;
  line-height: 19px;
}

.tk-zeitzone svg { flex: none; }

/* In der Tafel steht er direkt unter der Kopfzeile und braucht deshalb etwas
   Luft nach unten statt nach oben. */
.tk-zeitzone--tafel {
  margin: -4px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

/* --- Schleier und Tafel ---------------------------------------------------- */

.tk-schleier {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: #2e1f2999;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.tk-tafel {
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px;
}

.tk-tafel:focus { outline: none; }

@media (min-width: 640px) {
  .tk-schleier { align-items: center; }
}

/* --- Kopfzeile mit Monatswechsel ------------------------------------------ */

.tk-kopf {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}

.tk-kopf__name {
  flex: 1;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.tk-pfeil,
.tk-schliessen {
  width: 36px;
  height: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-foreground);
  cursor: pointer;
}

.tk-pfeil svg { width: 18px; height: 18px; }

.tk-pfeil:disabled {
  opacity: .35;
  cursor: not-allowed;
}

@media (hover: hover) {
  .tk-pfeil:not(:disabled):hover,
  .tk-schliessen:hover { background: var(--color-muted); }
}

.tk-pfeil:focus-visible,
.tk-schliessen:focus-visible,
.tk-tag:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* --- Das Gitter ----------------------------------------------------------- */

.tk-wochentage,
.tk-woche {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.tk-wochentage {
  margin-bottom: 6px;
}

.tk-wochentage span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  color: var(--color-muted-foreground);
}

.tk-woche + .tk-woche { margin-top: 4px; }

.tk-tag {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid #0000;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-muted-foreground);
  font-size: 13px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

.tk-tag.ist-fremd { color: var(--color-border); }

/* Ein Tag mit freier Zeit ist der einzige, der wie ein Knopf aussieht —
   alles andere im Gitter steht nur zur Orientierung. */
.tk-tag.ist-frei {
  cursor: pointer;
  color: var(--color-foreground);
  font-weight: 600;
  background: var(--color-muted);
  border-color: var(--color-border);
}

/* Ein Tag, an dem nur Blockiertes liegt. Er ist anklickbar — man soll sehen
   können, was dort steht —, sieht aber nicht aus wie ein Tag mit freier Zeit:
   gestrichelte Kante statt voller Fläche, blasse Schrift. */
/* Eine gestrichelte Kante allein nimmt nur weg — im Gitter aus schlichten
   Zahlen fiel der gesperrte Tag deshalb kaum auf. Er trägt jetzt dieselbe
   Schraffur wie die gesperrte Uhrzeit und eine durchgestrichene Zahl:
   „gesperrt" sieht damit überall im Kalender gleich aus, und beides sind
   Zeichen, die etwas hinzufügen statt bloß zu verblassen. */
.tk-tag.ist-gesperrt {
  cursor: pointer;
  color: var(--color-muted-foreground);
  border: 1px dashed var(--color-muted-foreground);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 5px,
    var(--color-border) 5px 6px
  );
}

.tk-tag.ist-gesperrt .tk-tag__zahl { text-decoration: line-through; }

.tk-tag__punkt {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-xl);
  background: var(--color-accent);
}

/* Offener Ring statt gefülltem Punkt: Eine Form unterscheidet sich auch dort,
   wo eine Farbe allein zu leise ist — auf hellen Bildschirmen, bei Sonne und
   für Augen, die Rot und Grau schlecht trennen. */
.tk-tag.ist-gesperrt .tk-tag__punkt {
  background: none;
  border: 1.5px solid var(--color-muted-foreground);
}

@media (hover: hover) {
  .tk-tag.ist-frei:hover {
    background: var(--color-champagne-muted);
    border-color: var(--color-primary);
  }
}

.tk-tag.ist-gewaehlt {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.tk-tag.ist-gewaehlt .tk-tag__punkt { background: var(--color-primary-foreground); }

/* Ein gesperrter Tag, den die Kundin angeklickt hat, sah bisher genauso aus
   wie ein freier: Der Auswahlzustand überschrieb die Kennzeichnung komplett.
   Er bleibt deshalb auch ausgewählt als gesperrt erkennbar — gedämpfte Fläche
   statt voller Farbe, gestrichelte Kante, Ring statt Punkt. */
/* Ausgewählt wird der gesperrte Tag mit einem Ring markiert, nicht mit einer
   Füllung: Eine Fläche unter der Schraffur schluckt sie — dann sähe der
   angewählte Tag wieder harmloser aus als der danebenstehende, den niemand
   angefasst hat. Der Ring liegt außen und lässt die Schraffur stehen. */
.tk-tag.ist-gesperrt.ist-gewaehlt {
  /* Die Kurzform `background` des Auswahlzustands löscht auch das Muster —
     es wird hier deshalb ausdrücklich wieder gesetzt. */
  background-color: transparent;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 5px,
    var(--color-border) 5px 6px
  );
  border: 1px dashed var(--color-muted-foreground);
  box-shadow: 0 0 0 2px var(--color-muted-foreground);
  color: var(--color-foreground);
  font-weight: 600;
}

.tk-tag.ist-gesperrt.ist-gewaehlt .tk-tag__punkt {
  background: none;
  border: 1.5px solid var(--color-muted-foreground);
}

/* --- Uhrzeiten des gewählten Tages --------------------------------------- */

.tk-anleitung,
.tk-fuss {
  color: var(--color-muted-foreground);
  font-size: 13px;
  line-height: 19px;
  margin-top: 14px;
}

.tk-zeiten { margin-top: 14px; }

.tk-zeiten__tag {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  margin-bottom: 8px;
}

.tk-zeiten__reihe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 8px;
}

/* In der Tafel dürfen die Uhrzeit-Knöpfe die Spalte voll ausnutzen. */
.tk-zeiten__reihe .termin-knopf { width: 100%; }

/* --- Uhrzeit-Knöpfe und die einfache Liste ohne JavaScript ---------------
   Stand früher in den Zusatzstilen der Veranstaltungsseite. Hier, weil beide
   Seiten dieselben Knöpfe zeigen und sie überall gleich aussehen sollen. */

/* Terminwahl — die freien Stunden aus Ellas Kalender.
   Jede Uhrzeit ist ein Absende-Knopf; die Gestaltung folgt den Chips der
   Seite, damit die Reihe nicht wie ein zweites Formular wirkt. */

/* Aufbau wie .notice-banner im Design-System: weiche Fläche, farbige Kante.
   --color-notice ist eine Text- und Kantenfarbe, keine Fläche. */
.termin-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-notice);
  background: var(--color-muted);
  color: var(--color-foreground);
  font-size: 14px;
  line-height: 20px;
}

.termin-hinweis svg {
  flex: none;
  margin-top: 2px;
}

.termin-wahl {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.termin-wahl__lead {
  font-weight: 500;
}

.termin-wahl form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.termin-tag {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.termin-tag__datum {
  color: var(--color-muted-foreground);
  font-size: 14px;
  line-height: 20px;
}

.termin-zeiten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.termin-knopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  color: var(--color-foreground);
  cursor: pointer;
  transition:
    border-color var(--default-transition-duration),
    background-color var(--default-transition-duration),
    box-shadow var(--default-transition-duration);
}

.termin-knopf b {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.termin-knopf span {
  color: var(--color-muted-foreground);
  font-size: 12px;
  line-height: 16px;
}

.termin-knopf:hover {
  border-color: var(--color-primary);
  background: var(--color-muted);
  box-shadow: var(--shadow-hover);
}

/* Eine blockierte Zeit: sichtbar, aber nicht bestellbar. Ausgegraut und
   durchgestrichen — die Uhrzeit bleibt lesbar, damit erkennbar ist, dass die
   Stunde existiert und nur gerade nicht zu haben ist. Der Knopf selbst ist
   `disabled`; die Gestaltung sagt es nur noch einmal. */
.termin-knopf.ist-blockiert {
  cursor: not-allowed;
  color: var(--color-muted-foreground);
  background: var(--color-muted);
  border-style: dashed;
  box-shadow: none;
}

.termin-knopf.ist-blockiert b { text-decoration: line-through; }

/* Schraffur: der Unterschied ist damit auf einen Blick da, ohne die Uhrzeit
   unlesbar zu machen. Sie liegt hinter dem Text, nicht darüber. */
.termin-knopf.ist-blockiert {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 7px,
    var(--color-border) 7px 8px
  );
}

/* „nicht buchbar" stand bisher in derselben leisen Farbe wie die Dauer einer
   freien Zeit — die eine Angabe, die den Unterschied macht, war die
   unauffälligste im Knopf. */
.termin-knopf__sperre {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-notice);
  font-weight: 600;
}

.termin-knopf.ist-blockiert .termin-knopf__sperre { color: var(--color-notice); }

.termin-knopf__sperre svg { flex: none; }

/* --- Legende unter dem Gitter --------------------------------------------- */

.tk-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-muted-foreground);
}

.tk-legende__eintrag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tk-legende__punkt {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-xl);
  background: var(--color-accent);
  flex: none;
}

.tk-legende__punkt.ist-gesperrt {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: none;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 3px,
    var(--color-muted-foreground) 3px 4px
  );
  border: 1px dashed var(--color-muted-foreground);
}

.termin-knopf.ist-blockiert:hover {
  border-color: var(--color-border);
  background: var(--color-muted);
  box-shadow: none;
}

/* Die eigene, schon reservierte Zeit — sie steht weiter in der Liste, damit
   sie beim Zurückgehen nicht verschwunden wirkt. */
.termin-knopf.ist-gewaehlt {
  border-color: var(--color-primary);
  background: var(--color-muted);
}

.termin-knopf.ist-gewaehlt span {
  color: var(--color-accent);
  font-weight: 600;
}

.termin-knopf:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.termin-wahl__fuss {
  font-size: 13px;
}

@media (max-width: 767.98px) {
  /* Auf schmalen Geräten steht jede Uhrzeit gleich breit — nebeneinander
     wären es sonst zwei ungleiche Spalten mit Restlücke. */
  .termin-zeiten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  }
}