/*
 * NN Termine — Frontend
 * Nutzt die Tokens des Child-Themes und setzt Fallbacks, damit das Plugin
 * auch unter einem anderen Theme nicht bricht.
 */

.nn-termine__gruppe + .nn-termine__gruppe { margin-top: 2.5rem; }

.nn-termine__ort {
  font-family: var(--nn-serif, Georgia, serif);
  margin: 0 0 1rem;
}

.nn-termine__grid,
.nn-kalender {
  display: grid;
  gap: var(--nn-gap, 1.25rem);
}

.nn-termine__grid {
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

/* ---------------------------------------------------------------- Karten */
.nn-termin {
  background: var(--nn-surface, #141418);
  border: 1px solid var(--nn-line, #26262E);
  border-left-width: 2px;
  border-radius: var(--nn-radius, 2px);
  padding: var(--nn-gap, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.nn-termin p { margin: 0; max-width: none; }

.nn-termin__status {
  font-family: var(--nn-mono, ui-monospace, monospace);
  font-size: 0.75rem; /* 12 px: Untergrenze fuer Lesbarkeit auf dem Handy */
  letter-spacing: var(--nn-track-label, 0.14em);
  text-transform: uppercase;
  color: var(--nn-muted, #A0A0AE);
}

.nn-termin__datum {
  font-family: var(--nn-serif, Georgia, serif);
  font-size: 1.35rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--nn-text, #ECEBF0);
}

.nn-termin__ort { color: var(--nn-text, #ECEBF0); }

.nn-termin__zeit,
.nn-termin__hinweis {
  font-size: 0.875rem;
  color: var(--nn-muted, #A0A0AE);
}

.nn-termin__cta { margin-top: 0.6rem; align-self: start; }

.nn-termin--verfuegbar  { border-left-color: var(--nn-ok, #4ADE80); }
.nn-termin--auf-anfrage { border-left-color: var(--nn-warn, #FBBF24); }
.nn-termin--ausgebucht  { border-left-color: var(--nn-closed, #71717A); opacity: 0.6; }

.nn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 1.5rem;
  background: var(--nn-violet, #7C00FE);
  color: #fff;
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: var(--nn-track-label, 0.14em);
  text-transform: uppercase;
  border-radius: var(--nn-radius, 2px);
}

.nn-btn:hover,
.nn-btn:focus-visible { background: var(--nn-violet-soft, #A855F7); color: #fff; }

/* -------------------------------------------------------------- Kalender */
.nn-kalender { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

.nn-kalender__titel {
  font-family: var(--nn-serif, Georgia, serif);
  margin: 0 0 0.75rem;
}

.nn-kalender__gitter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.nn-kalender__wochentag {
  font-family: var(--nn-mono, ui-monospace, monospace);
  font-size: 0.75rem; /* 12 px: Untergrenze fuer Lesbarkeit auf dem Handy */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nn-muted, #A0A0AE);
  text-align: center;
  padding-bottom: 0.35rem;
}

.nn-kalender__tag,
.nn-kalender__leer {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-height: 40px;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  border-radius: var(--nn-radius, 2px);
  color: var(--nn-muted, #A0A0AE);
  text-decoration: none;
}

/* Vergangene Tage gedimmt, aber lesbar: #8B8B99 auf --nn-black = 5,9:1 (WCAG AA).
   opacity: 0.3 sah gut aus, fiel aber auf 2,5:1. */
.nn-kalender__tag--vergangen { color: #8B8B99; opacity: 1; }

a.nn-kalender__tag {
  color: var(--nn-text, #ECEBF0);
  background: var(--nn-surface, #141418);
  border-color: var(--nn-line, #26262E);
}

a.nn-kalender__tag--verfuegbar  { border-color: var(--nn-ok, #4ADE80); }
a.nn-kalender__tag--auf-anfrage { border-color: var(--nn-warn, #FBBF24); }

a.nn-kalender__tag:hover,
a.nn-kalender__tag:focus-visible {
  background: var(--nn-violet, #7C00FE);
  border-color: var(--nn-violet, #7C00FE);
  color: #fff;
}

.nn-kalender__tag--ausgebucht {
  border-color: var(--nn-closed, #71717A);
  text-decoration: line-through;
}

.nn-kalender__legende {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--nn-muted, #A0A0AE);
  margin: 0;
}

.nn-legende { display: inline-flex; align-items: center; gap: 0.4rem; }

.nn-legende::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.nn-legende--verfuegbar::before  { border-color: var(--nn-ok, #4ADE80); }
.nn-legende--auf-anfrage::before { border-color: var(--nn-warn, #FBBF24); }
.nn-legende--ausgebucht::before  { border-color: var(--nn-closed, #71717A); }

.nn-leer { color: var(--nn-muted, #A0A0AE); }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}