/* ─────────────────────────────
   Termine

   Keine eigenen Farben - alles aus den Flächen-Tokens der Basis.
   ───────────────────────────── */

.lt-kal{padding:64px 0;scroll-margin-top:84px}

/* Die Ausrichtung steuert Textlage UND Rand: Ein linksbündiger Kopf,
   der trotzdem mittig im Abschnitt sitzt, sieht aus wie ein Fehler. */
.lt-kal__kopf{margin:0 0 30px;max-width:44rem}
.lt-kal__kopf--links {text-align:left;margin-right:auto}
.lt-kal__kopf--mitte {text-align:center;margin-inline:auto}
.lt-kal__kopf--rechts{text-align:right;margin-left:auto}
.lt-kal__kopf h2{margin:0 0 10px;font-family:var(--schrift_titel);
  font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.2}
.lt-kal__kopf p{margin:0;color:var(--auf-flaeche-schwach);line-height:1.6}

/* ── Die Terminliste ────────────────────────────────────────────*/
.lt-kal__liste{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:10px}

/* Abgesetzt vom Seitengrund statt umrandet.

   color-mix gegen die Textfarbe: Auf hellem Grund wird die Karte
   etwas dunkler, auf dunklem etwas heller. Ein Rand daneben wäre ein
   zweites Mittel für dieselbe Abgrenzung.

   Der erste Wert ist der Rückfall für Browser ohne color-mix. */
.lt-kal__t{display:flex;align-items:flex-start;gap:16px;
  padding:14px 18px;border-radius:var(--radius);
  background:var(--grund);
  background:color-mix(in srgb, var(--text) 6%, var(--grund))}

/* Der Datumsblock: Tag groß, Monat klein darunter. Beim Überfliegen
   sucht das Auge die Zahl, nicht das ausgeschriebene Datum. */
.lt-kal__tag{flex:0 0 auto;width:3.2rem;text-align:center;line-height:1.05}
/* Die Zahl in Akzentfarbe: Sie ist der Anker beim Überfliegen -
   der Monat darunter ordnet nur ein. */
.lt-kal__tag b{display:block;font-family:var(--schrift_titel);
  color:var(--akzent);
  font-size:1.5rem;font-variant-numeric:tabular-nums}
.lt-kal__tag span{font-size:.68rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--auf-flaeche-schwach)}

.lt-kal__inhalt{flex:1;min-width:0}
.lt-kal__titel{margin:0;font-family:var(--schrift_titel);
  font-size:1.02rem;line-height:1.3}
.lt-kal__meta{margin:3px 0 0;font-size:.84rem;
  color:var(--auf-flaeche-schwach)}
.lt-kal__text{margin:7px 0 0;font-size:.88rem;line-height:1.55;
  color:var(--auf-flaeche-schwach)}

.lt-kal__leer{margin:0;text-align:center;padding:28px 0;
  color:var(--auf-flaeche-schwach)}

/* ── Kompakt: nebeneinander ─────────────────────────────────────*/
.lt-kal--kompakt .lt-kal__liste{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.lt-kal--kompakt .lt-kal__t{flex-direction:column;gap:10px}
.lt-kal--kompakt .lt-kal__tag{display:flex;align-items:baseline;gap:6px;
  width:auto;text-align:left}

/* ── Zwei Spalten: Kalender links, Liste rechts ─────────────────*/
.lt-kal__zwei{display:grid;gap:28px;align-items:start;
  grid-template-columns:minmax(0,20rem) minmax(0,1fr)}

@media(max-width:820px){
  .lt-kal__zwei{grid-template-columns:1fr}
}

/* Derselbe Absatz wie bei den Terminkarten - beide stehen
   nebeneinander und sollen als eine Familie wirken. */
.lt-kal__monat{padding:18px;border-radius:var(--radius);
  background:var(--grund);
  background:color-mix(in srgb, var(--text) 6%, var(--grund))}

.lt-kal__monatkopf{margin-bottom:12px;text-align:center;
  font-family:var(--schrift_titel);font-size:1.05rem;font-weight:600}

.lt-kal__gitter{width:100%;border-collapse:collapse;table-layout:fixed}
.lt-kal__gitter th{padding:4px 0 8px;font-size:.7rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--auf-flaeche-schwach)}

.lt-kal__gitter td{padding:2px;text-align:center}
.lt-kal__gitter td a,
.lt-kal__gitter td span{display:flex;align-items:center;justify-content:center;
  /* Quadratisch über aspect-ratio statt fester Höhe: So bleibt das
     Gitter gleichmäßig, egal wie breit die Spalte ist. */
  aspect-ratio:1;border-radius:50%;font-size:.88rem;
  font-variant-numeric:tabular-nums;text-decoration:none;color:inherit}

.lt-kal__gitter td span{color:var(--auf-flaeche-schwach)}

/* Tage mit Terminen: Akzentfläche, damit man sie beim Überfliegen
   findet. Ein Punkt darunter wäre kleiner und schwerer zu treffen. */
.lt-kal__gitter td.belegt a{background:var(--akzent);color:var(--auf-akzent);
  font-weight:700}
.lt-kal__gitter td.belegt a:hover{filter:brightness(1.1)}

/* Heute mit Rand statt Fläche - sonst kämpfen zwei Markierungen um
   dieselbe Aufmerksamkeit. */
.lt-kal__gitter td.heute a,
.lt-kal__gitter td.heute span{box-shadow:inset 0 0 0 2px var(--akzent)}

/* ── Verweis zur Kalenderseite ──────────────────────────────────*/
/* Als Knopf statt Textverweis, zentriert unter der Liste.

   Er führt zur vollständigen Kalenderseite - das ist die Handlung,
   die der Abschnitt anbietet, und ein unterstrichener Satz darunter
   wird beim Überfliegen übersehen. */
.lt-kal__mehr{display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:var(--radius-knopf,100px);
  background:var(--akzent);color:var(--auf-akzent);
  font-weight:600;font-size:.95rem;text-decoration:none;
  box-shadow:var(--schatten-knopf, 0 2px 8px rgba(0,0,0,.18));
  transition:transform .15s,box-shadow .15s}
.lt-kal__mehr:hover{transform:translateY(-1px);
  box-shadow:var(--schatten-knopf-hover, 0 6px 16px rgba(0,0,0,.24))}
.lt-kal__mehr svg{width:16px;height:16px;transition:transform .18s}
.lt-kal__mehr:hover svg{transform:translateX(3px)}

/* Die Zeile drumherum zentriert - der Knopf selbst bleibt so breit
   wie sein Text. */
.lt-kal__mehrzeile{display:flex;justify-content:center;margin-top:28px}

@media(prefers-reduced-motion:reduce){
  .lt-kal__mehr,.lt-kal__mehr svg{transition:none}
  .lt-kal__mehr:hover{transform:none}
  .lt-kal__mehr:hover svg{transform:none}
}


/* ── Großer Kalender als Baustein ─────────────────────────────
   Der Rumpf kommt aus kalenderseite.php und bringt seine eigenen
   Maße mit - hier bleibt nur, was der Unterschied zur Terminseite
   ausmacht: Dort ist er die ganze Seite und steht in einem <main>
   mit eigenem Abstand, hier ist er ein Baustein zwischen anderen.

   Der innere .lt-wrap käme sonst doppelt mit dem der Sektion; die
   Sektion hat hier keinen, deshalb passt es. */
.lt-kal--gross > .ktm{padding-block:0}

/* Steht der Kalender GLEICH UNTER DER KOPFLEISTE, braucht seine
   Überschrift Luft: Die Leiste ist mit Logo gut 100 Pixel hoch, und
   "Termine" klebte an ihrer Unterkante.

   ":first-child" traf daneben - die Bausteine liegen direkt im
   <body>, und dort ist die Kopfleiste das erste Kind, nie ein
   Baustein. Der Nachbarschafts-Selektor trifft genau den Fall.
   Beide Schreibweisen, falls der Aufbau woanders ein <main> hat.

   Nur ganz oben. Mitten in der Seite wäre der Abstand ein Loch. */
.lt-navi + .lt-kal--gross,
.lt-kal--gross:first-child{padding-top:120px}