/* =========================================================================
   Bausteine: Knöpfe, Marken, Karten, Daten, Filter, Kalender

   Die Trennung übernimmt das Raster aus layout.css. Die Bausteine selbst
   bringen so wenig eigene Rahmen mit wie möglich.
   ========================================================================= */

/* --- Knöpfe ------------------------------------------------------------- */

.knopf {
  display: inline-block;
  border: 1px solid var(--linie);
  padding: 0.42rem 0.8rem;
  font-size: var(--klein);
  line-height: var(--eng);
  text-decoration: none;
  background: none;
  cursor: pointer;
  transition: background var(--tempo), color var(--tempo);
}

.knopf:hover,
.knopf:focus-visible { background: var(--tinte); color: var(--papier); }

.knopf--primaer { background: var(--tinte); color: var(--papier); }
.knopf--primaer:hover,
.knopf--primaer:focus-visible { background: none; color: var(--tinte); }

.knopf--klein { padding: 0.2rem 0.45rem; font-size: var(--mikro); }
.knopf--still { border-color: var(--linie-fein); color: var(--gedaempft); }

.weiterlesen {
  display: inline-block;
  margin-block-start: 0.75rem;
  font-size: var(--klein);
  text-decoration: none;
  border-block-end: var(--strich) solid var(--tinte);
  padding-block-end: 0.05rem;
}

.weiterlesen::after { content: ' →'; }

/* --- Marken (Erfahrungsstufe, Format, Hinweise) -------------------------
   Information steckt immer im Text, nie allein in Form oder Farbe.
   ---------------------------------------------------------------------- */

.marken {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-block: 0.5rem;
}

.marke {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  border: 1px solid var(--linie-fein);
  padding: 0.08rem 0.35rem;
  font-size: var(--mikro);
  /* Steht die Marke in einem Zeilenkopf — auf „Studieren" tragen die
     Stufen A, B und C ein <th> —, erbt sie dessen Browserfettung. Eine
     Marke hat aber schon eine Umrandung; fett dazu ist eine Auszeichnung
     zu viel, und es zöge den fetten Schnitt an eine Stelle, an der ihn
     niemand bestellt hat. */
  font-weight: var(--schnitt-normal);
  line-height: 1.5;
}

.marke--stufe { border-color: var(--linie); }
.marke--stufe[data-stufe='a'] { border-style: solid; }
.marke--stufe[data-stufe='b'] { border-style: dashed; }
.marke--stufe[data-stufe='c'] { border-style: dotted; }

.marke--format { background: var(--flaeche); }
.marke--hinweis { border-style: dashed; }
.marke--buchbar { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }

/* „Erforderlich" und „optional" sind eine Randnotiz am Bausteintitel eines
   Lernpfads, keine Auszeichnung: ohne Kasten, in der Mono der Apparate und
   gedämpft. Als gefüllte Marke zog „erforderlich" mehr Aufmerksamkeit auf
   sich als der Titel, neben dem es steht. */
.marke--erforderlich,
.marke--empfohlen,
.marke--optional {
  border: 0;
  background: none;
  padding: 0;
  margin-inline-start: 0.15rem;
  font-family: var(--schrift-daten);
  color: var(--gedaempft);
  white-space: nowrap;
}
.marke--intern { border-style: dotted; }

/* --- Karten -------------------------------------------------------------
   Ohne eigenen Rahmen: die Spaltenlinien des Rasters trennen bereits.
   ---------------------------------------------------------------------- */

.karte {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.karte__titel {
  font-size: var(--eintrag);
  font-weight: var(--schnitt-normal);
  line-height: var(--eng);
  letter-spacing: -0.015em;
}

.karte__titel a { text-decoration: none; }
.karte__titel a:hover { text-decoration: underline; }

.karte__untertitel,
.karte__text { font-size: var(--klein); line-height: var(--lesen); color: var(--gedaempft); }
.karte__text { color: inherit; }

.karte__datum { font-size: var(--klein); letter-spacing: 0.02em; }
.karte__uhrzeit { color: var(--gedaempft); }

.karte__meta,
.karte__fuss,
.karte__status {
  font-size: var(--mikro);
  color: var(--gedaempft);
}

/* Nur die Schlusszeile wird nach unten gezogen. Stünde die Metazeile
   ebenfalls auf auto, risse jede Karte ohne Bild in der Mitte auf. */
.karte__fuss { margin-block-start: auto; padding-block-start: 0.4rem; }

.karte__status {
  border: 1px dashed var(--linie-fein);
  padding: 0.1rem 0.35rem;
  align-self: start;
  margin-block-start: 0.3rem;
}

.karte__flaeche { text-decoration: none; display: block; }

/* Farbig wie die Galerie: Der Graufilter, der die Karten bis zum Zeiger
   entsättigte, ist am 20.09.2026 entfallen. */
.karte__bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-block-end: 0.5rem;
  background: var(--flaeche);
}

.karte--projekt[data-status='offline'] .karte__bild { opacity: 0.45; }

/* Laufende Projekte: Das Bild behält sein Seitenverhältnis, statt auf 4:3
   beschnitten zu werden. Das Verhältnis kommt als style am Bild
   (snippets/cards/studioprojekt.php), aus den Maßen der Datei — so steht
   die Höhe schon vor dem Laden fest. */
.karte--studioprojekt .karte__bild {
  height: auto;
  object-fit: fill;
}

/* Vorankündigung: Der Open Call steht in der Übersicht, seine Seite gibt
   es noch nicht. Die Karte tritt zurück, ohne zu verschwinden — man soll
   sehen, dass etwas kommt, und dass es noch nicht so weit ist.

   Zurückgenommen wird über die Deckkraft, nicht über eine graue Schrift:
   Das Bild muss mit blasser werden, sonst stünde ein kräftiges Bild über
   einem blassen Titel und die Karte sähe halb kaputt aus. */
.karte--vorab { opacity: 0.55; }

/* Der Stand der Anmeldung schließt die Karte ab: Er ist die Auskunft,
   wegen der man auf diese Seite kommt, und steht deshalb am Ende, wo der
   Blick nach der Beschreibung ohnehin landet.

   Offen und geschlossen unterscheiden sich im Gewicht, nicht in der
   Farbe: Eine grüne und eine rote Zeile wären auf dieser Website ein
   Fremdkörper, und wer Farben schlecht unterscheidet, sähe keinen
   Unterschied. Der offene Call ist ein Knopf mit voller Linie, die
   beiden anderen tragen die feine Linie und die gedämpfte Schrift —
   dieselbe Abstufung wie überall sonst. */
.karte__stand {
  margin-block-start: 0.7rem;
  font-family: var(--schrift-daten);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Kein Knopf, nur die Form eines Knopfes: Es gibt nichts zu drücken. */
.karte__stand .knopf--still { cursor: default; }
.karte__stand .knopf--still:hover { background: none; color: var(--gedaempft); }

/* Ohne Link bleibt der Zeiger, was er ist: Es gibt hier nichts zu klicken. */
.karte--vorab .karte__flaeche { cursor: default; }

/* Ein noch nicht freigegebener Open Call in einer Liste: ohne Link,
   und blass wie seine Karte. */
.ist-vorab { color: var(--gedaempft); }

/* Bild der beiden Einstiege auf der Startseite.

   Breit statt quadratisch: Die Karte trägt darunter Überschrift und drei
   Zeilen Text, ein hohes Bild schöbe die weg. Die Höhe ist nach oben
   gedeckelt — aspect-ratio bestimmt sie, solange sie unter 300 px bleibt,
   darüber schneidet max-block-size ab. object-fit: cover sorgt dafür, dass
   dabei beschnitten und nicht verzerrt wird. */
.einstieg__bild {
  inline-size: 100%;
  aspect-ratio: 21 / 9;
  max-block-size: 300px;
  object-fit: cover;
  margin-block-end: var(--luft-eng);
  background: var(--flaeche);
}

.karte .daten { font-size: var(--mikro); margin-block: 0.5rem; }

/* --- Datenlisten -------------------------------------------------------- */

.daten { margin-block: var(--luft); }

.daten__paar {
  display: grid;
  gap: 0.25rem;
  padding-block: var(--luft-eng);
  border-block-start: var(--strich) solid var(--linie-fein);
}

.daten__paar:last-child { border-block-end: var(--strich) solid var(--linie-fein); }

/* In der Hauptspalte nicht: Dort beginnt der nächste Abschnitt ohnehin mit
   seiner eigenen Linie — zwei Striche übereinander —, und der letzte
   Eintrag einer Workshopseite, etwa „Ergebnis", stand unter einem Strich,
   der nichts mehr trennte. (Die Randspalte kennt gar keine Striche, siehe
   .spalten__neben .daten__paar weiter unten.) */
.spalten__haupt .daten__paar:last-child { border-block-end: 0; }

.daten dt {
  color: var(--ueberschrift);
  font-size: var(--mikro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.daten dd { font-size: var(--klein); line-height: var(--lesen); }
.daten dd > * + * { margin-block-start: 0.5em; }

.daten__zusatz { color: var(--gedaempft); }

@media (min-width: 40rem) {
  .daten--breit .daten__paar {
    grid-template-columns: minmax(7rem, 1fr) minmax(0, 3fr);
    gap: var(--gasse);
  }
}

/* --- Eingebettete Seite -------------------------------------------------

   Eine fremde Seite in einem Fenster. Die Höhe kommt aus dem Panel, weil
   nur die Redaktion weiß, wie lang die eingebettete Seite ist; sie wird
   aber nie höher als der Bildschirm, sonst scrollt man in zwei Ebenen
   gleichzeitig und kommt am Fenster nicht mehr vorbei.

   Der Link darunter ist kein Schmuck: Manche Seiten verbieten das
   Einbetten, dann bleibt das Fenster leer — der Weg zum Ziel bleibt
   trotzdem offen. */

.einbettung__titel {
  font-size: var(--basis);
  font-weight: var(--schnitt-kraeftig);
  margin-block: var(--luft-weit) var(--luft);
}

.einbettung__rahmen {
  border: var(--strich) solid var(--linie);
  background: var(--flaeche);
  block-size: min(var(--einbettung-hoehe, 600px), 80vh);
}

.einbettung__rahmen iframe {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

.einbettung__aussen {
  font-size: var(--mikro);
  margin-block-start: var(--luft-eng);
}

/* --- Hinweiskasten ------------------------------------------------------ */

.hinweis {
  border: 1px solid var(--linie-fein);
  padding: 0.75rem 0.9rem;
  margin-block: 1.25rem;
  max-width: var(--breite-text);
  font-size: var(--klein);
  line-height: var(--lesen);
}

.hinweis--wichtig { border: 1px solid var(--linie); background: var(--flaeche); }

/* Ohne Kasten: für Sätze, die zur Seite gehören und keine Warnung sind.
   Der Semesterhinweis über der Kursübersicht ist so einer — er sagt, wie
   die Anmeldung läuft, und muss dafür nicht eingerahmt werden. */
.hinweis--schlicht {
  border: 0;
  padding: 0;
  background: none;
  /* Er gehört zum Kopf, nicht zum Inhalt: eng an die Überschrift, mit
     klarem Abstand zu dem, was darunter beginnt. */
  margin-block: clamp(0.5rem, 1.2vw, 1rem) 0;
}

.hinweis__titel {
  font-size: var(--mikro);
  font-weight: var(--schnitt-normal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ueberschrift);
  margin-block-end: 0.35rem;
}

.hinweis__text > * + * { margin-block-start: 0.7em; }

/* --- Nummerierte Reihen (Prinzipien, Schritte, Lernpfad) ---------------- */

.schritte__liste,
.sitzungen,
.pfad {
  display: grid;
  margin-block-start: var(--luft);
}

.prinzip,
.schritt,
.sitzung,
.pfad__schritt {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0 0.75rem;
  border-block-start: var(--strich) solid var(--linie-fein);
  padding-block: var(--luft) var(--luft);
}

/* =========================================================================
   Trennlinien in Listen

   Ein Strich trennt zwei Einträge — vor dem ersten steht nichts, was zu
   trennen wäre. Darüber liegt bereits die Linie des Moduls oder der
   Seitenkopf. Diese Regel gilt für alle Listen der Seite an einer Stelle;
   wer eine neue Liste ergänzt, trägt ihr erstes Kind hier nach.
   ========================================================================= */

.prinzipien > :first-child,
.schritte__liste > :first-child,
.sitzungen > :first-child,
.pfad > :first-child,
.daten > :first-child,
.naechster__weitere > :first-child,
.kalendertag__termine > :first-child,
.kalenderliste > :first-child { border-block-start: 0; }

/* Alles außer der Zahl gehört in die zweite Spalte. Ohne diese Regel
   rutscht jedes fünfte Kind zurück unter die Zahl. */
.prinzip > :not(.prinzip__zahl),
.schritt > :not(.schritt__zahl),
.sitzung > :not(.sitzung__datum, .sitzung__kw),
.pfad__schritt > :not(.pfad__zahl) { grid-column: 2; }

.prinzip__zahl,
.schritt__zahl,
.sitzung__datum,
.pfad__zahl {
  grid-column: 1;
  grid-row: 1 / -1;
  font-size: var(--klein);
  font-variant-numeric: tabular-nums;
  color: var(--gedaempft);
  line-height: 1.35;
}

.prinzip__titel,
.schritt__titel,
.sitzung__thema,
.pfad__titel {
  font-size: var(--eintrag);
  font-weight: var(--schnitt-normal);
  line-height: var(--eng);
}

.prinzip__frage {
  color: var(--gedaempft);
  font-size: var(--klein);
  line-height: var(--lesen);
  margin-block: 0.2rem 0.4rem;
}

.prinzip__text,
.schritt__text,
/* Ein Zeilenmaß auch hier, wo der Text nicht in einer Textspalte steht:
   Im Workshopkalender ist die Spalte neben dem Monatsnamen so breit wie
   die Seite, die Beschreibungen liefen bis an die Uhrzeit am rechten
   Rand. Das engere Maß, weil sie Beiwerk sind. */
.sitzung__notiz,
.pfad__text {
  font-size: var(--klein);
  line-height: var(--lesen);
  max-width: var(--mass-eng);
}

.prinzip__text > * + *,
.schritt__text > * + *,
.sitzung__notiz > * + *,
.pfad__text > * + * { margin-block-start: 0.6em; }

.prinzip__beispiel { margin-block-start: 0.5rem; font-size: var(--klein); }

/* Lehrverständnis, jetzt auf „Über das Studio": Titel in der Größe der
   Personennamen, Leitfrage, Text und Beispiel in der Größe des Fließtexts —
   dieselben vier Stufen wie der Rest der Seite. */
.prinzipien { display: grid; margin-block-start: var(--luft); }
.seite--ueber .prinzip__frage,
.seite--ueber .prinzip__text,
.seite--ueber .prinzip__beispiel { font-size: var(--basis); }
.seite--ueber .prinzip__text { max-width: var(--breite-text); }

/* --- Termine und Material -----------------------------------------------

   Das Datum steht in derselben Spalte wie sonst die Ordnungszahl, braucht
   aber mehr Platz: 2,25rem tragen „01“, nicht „14.10.2025“. Die Spalte wird
   deshalb nur hier verbreitert, das übrige Raster bleibt, wie es ist.
   ------------------------------------------------------------------------ */
.sitzung { grid-template-columns: 5.5rem minmax(0, 1fr); }

.sitzung__notiz { color: var(--gedaempft); }

/* Die Kalenderwoche steht klein über dem Datum. Sie belegt allein die erste
   Rasterzeile; Datum und das erste Element rechts (Vermerk oder Thema)
   teilen sich die zweite und stehen auf einer Grundlinie. Oben bündig ginge
   das nicht: Datum und Vermerk haben verschiedene Schriften und Zeilenhöhen,
   der Vermerk säße sichtbar höher. Das Datum überspannt deshalb nicht mehr
   alle Zeilen — es ist kurz genug für eine. „Ohne Termin" hat keine
   Kalenderwoche und behält das alte Raster. */
/* Zu welchem Kurs ein Termin gehört — klein und gedämpft unter dem Titel.
   Auf der Lernpfadseite stehen Workshops und Kurstermine in einer Liste,
   die Herkunft steht am Eintrag statt in einer Zwischenüberschrift. */
.sitzung__kurs {
  font-family: var(--schrift-daten);
  font-size: var(--mikro);
  color: var(--gedaempft);
  margin-block-start: 0.2rem;
}

/* Die Uhrzeit steht unter dem Datum, in derselben Spalte und etwas
   leiser — das Datum führt, die Zeit ergänzt. */
/* Thema und Uhrzeit teilen eine Zeile: das Thema links, die Zeit am rechten
   Rand der Textspalte. Beide sitzen auf einer Grundlinie; bricht das Thema
   um, bleibt die Zeit auf der ersten Zeile stehen. Wird es eng, rutscht die
   Zeit unter das Thema, statt es zu quetschen. */
.sitzung__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 1rem;
}

.sitzung__zeit {
  margin-inline-start: auto;
  font-size: var(--mikro);
  color: var(--gedaempft);
  white-space: nowrap;
}

.sitzung > .sitzung__kw {
  grid-column: 1;
  font-size: 0.8rem;
  font-weight: var(--schnitt-mittel);     /* Medium: klein, aber nicht blass */
  line-height: 1.3;
  color: var(--gedaempft);
}

.sitzung__kw + .sitzung__datum { grid-row: auto; }
.sitzung__kw + .sitzung__datum + * { grid-row: 2; }

.sitzung__kw + .sitzung__datum,
.sitzung__kw + .sitzung__datum + * { align-self: baseline; }

/* Eine ausfallende Sitzung bleibt in der Liste — sie war angekündigt, und
   wer sie sucht, soll sie finden. Sie tritt aber zurück: ganz im
   gedämpften Ton, der Vermerk steht vor dem Thema. Der gedämpfte Ton hält
   7,3:1 gegen den Grund, ausgegraut heißt hier nicht unlesbar. */
.sitzung--entfaellt,
.sitzung--entfaellt .sitzung__thema,
.sitzung--entfaellt .sitzung__datum { color: var(--gedaempft); }

.sitzung--entfaellt .sitzung__thema { text-decoration: line-through; text-decoration-thickness: 0.06em; }

.sitzung__entfaellt {
  font-family: var(--schrift-daten);
  font-size: var(--mikro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-block-end: 0.2rem;
}

/* Ohne Thema hat die Zeile nichts, was die zweite Spalte öffnet — dann darf
   die Dateiliste nicht in der Luft hängen. */
.sitzung__thema + .materialliste,
.sitzung__zeile + .materialliste,
.sitzung__notiz + .materialliste { margin-block-start: 0.6rem; }

.materialliste {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--schrift-daten);
  font-size: var(--klein);
}

.materialliste__eintrag + .materialliste__eintrag { margin-block-start: 0.35rem; }

/* Der ganze Eintrag ist das Ziel, nicht nur der Dateiname — auf einem
   Zeigegerät wie auf einem Finger. */
.materialliste__eintrag a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6rem;
  line-height: var(--lesen);
}

.materialliste__mass {
  color: var(--gedaempft);
  font-size: var(--mikro);
  white-space: nowrap;
}

@media (max-width: 30rem) {
  /* Auf schmalen Geräten kostet die Datumsspalte zu viel Breite; das Datum
     rückt über die Sitzung statt neben sie. */
  .sitzung { grid-template-columns: minmax(0, 1fr); }
  .sitzung > :not(.sitzung__datum) { grid-column: 1; }
  .sitzung__datum { grid-row: auto; margin-block-end: 0.2rem; }
  .sitzung__kw + .sitzung__datum + * { grid-row: auto; }
}

/* Dasselbe für die Bausteine eines Lernpfads. Die Fläche reicht über den
   Innenabstand hinaus nach links und rechts, damit sie an Nummer und Text
   nicht knapp anliegt. */
@media (hover: hover) {
  .pfad__schritt {
    transition: background-color 120ms ease-out;
    border-radius: 2px;
  }

  .pfad__schritt:hover {
    background-color: var(--flaeche);
    box-shadow: 0 0 0 0.6rem var(--flaeche);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pfad__schritt { transition: none; }
}

.pfad__schritt[data-pflicht='optional'] { border-block-start-style: dashed; }
.pfad__schritt[data-pflicht='optional'] .pfad__zahl { opacity: 0.6; }

/* Baustein, den es im laufenden Semester nicht gibt (templates/lernpfad.php):
   blasser, aber vollständig lesbar. Der Link behält seine Unterstreichung
   und wird beim Überfahren wieder so dunkel wie die übrigen. */
.pfad__schritt.ist-ausserhalb { color: var(--gedaempft); }
.pfad__schritt.ist-ausserhalb a { color: inherit; }
.pfad__schritt.ist-ausserhalb a:hover,
.pfad__schritt.ist-ausserhalb a:focus-visible { color: var(--tinte); }

/* Nummer und Titel eines Bausteins teilen Zeile 1 und ihre Grundlinie.
   Über alle Zeilen gespannt (die gemeinsame Regel für Zahlen oben) nähme
   die kleine Nummer an keiner Grundlinie teil — der Abschnittstitel daneben
   richtete sich dann nach ihr statt nach dem Bausteintitel, 6,5 px zu hoch. */
.pfad__schritt > .pfad__zahl { grid-row: 1; align-self: baseline; }
.pfad__schritt > .pfad__titel { align-self: baseline; }

.pfad__kurz {
  font-size: var(--mikro);
  color: var(--gedaempft);
  counter-reset: schritt;
  margin-block-start: 0.4rem;
}

.pfad__kurz li { padding-inline-start: 1.4rem; position: relative; counter-increment: schritt; }
.pfad__kurz li::before {
  content: counter(schritt, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
}
.pfad__mehr::before { content: '' !important; }

/* --- Leitbegriffe und Einstiege (Startseite) ---------------------------- */

.leitbegriffe__intro { max-width: var(--breite-text); line-height: var(--lesen); }

/* Leitbegriffe und Einstiege folgen derselben Zellenlogik wie .raster */
.leitbegriffe__liste,
.einstiege__raster {
  --spalten: 1;
  display: grid;
  grid-template-columns: repeat(var(--spalten), minmax(0, 1fr));
  margin-block-start: var(--luft);
  background-repeat: no-repeat;
  background-size: var(--strich-senkrecht) 100%;
}

.leitbegriffe__liste > *,
.einstiege__raster > * {
  padding-block: var(--luft);
  border-block-start: var(--strich) solid var(--linie-fein);
}

.leitbegriffe__liste > :first-child,
.einstiege__raster > :first-child { border-block-start: 0; }

@media (min-width: 40rem) {
  .einstiege__raster { --spalten: 2; }
}

@media (min-width: 40rem) and (max-width: 71.99rem) {
  .leitbegriffe__liste { --spalten: 2; }
}

@media (min-width: 40rem) {
  .leitbegriffe__liste,
  .einstiege__raster {
    background-image: linear-gradient(var(--linie-fein), var(--linie-fein));
    background-position: 50% 0;
  }

  .leitbegriffe__liste > *,
  .einstiege__raster > * { padding-inline: var(--gasse); border-block-start: 0; }

  .leitbegriffe__liste > :nth-child(odd),
  .einstiege__raster > :nth-child(odd) { padding-inline-start: 0; }

  .leitbegriffe__liste > :nth-child(even),
  .einstiege__raster > :nth-child(even) { padding-inline-end: 0; }

  .leitbegriffe__liste > :nth-child(n + 3),
  .einstiege__raster > :nth-child(n + 3) {
    border-block-start: var(--strich) solid var(--linie-fein);
  }
}

@media (min-width: 72rem) {
  .leitbegriffe__liste {
    --spalten: 4;
    background-image:
      linear-gradient(var(--linie-fein), var(--linie-fein)),
      linear-gradient(var(--linie-fein), var(--linie-fein)),
      linear-gradient(var(--linie-fein), var(--linie-fein));
    background-position: 25% 0, 50% 0, 75% 0;
  }

  .leitbegriffe__liste > :nth-child(n) {
    padding-inline: var(--gasse);
    border-block-start: 0;
  }

  .leitbegriffe__liste > :nth-child(4n + 1) { padding-inline-start: 0; }
  .leitbegriffe__liste > :nth-child(4n) { padding-inline-end: 0; }
  .leitbegriffe__liste > :nth-child(n + 5) {
    border-block-start: var(--strich) solid var(--linie-fein);
  }
}

.leitbegriff__zahl,
.schritt__zahl { font-size: var(--mikro); color: var(--gedaempft); }

.leitbegriff__titel {
  font-size: var(--mittel);
  font-weight: var(--schnitt-normal);
  line-height: var(--eng);
  letter-spacing: -0.02em;
  margin-block: 0.2rem 0.4rem;
}

.leitbegriff__text { font-size: var(--klein); line-height: var(--lesen); }

.einstieg__titel {
  font-size: var(--mittel);
  font-weight: var(--schnitt-normal);
  line-height: var(--eng);
  letter-spacing: -0.025em;
  margin-block-end: 0.5rem;
}

.einstieg__titel a { text-decoration: none; }
.einstieg__titel a:hover { text-decoration: underline; }
.einstieg__text { font-size: var(--klein); line-height: var(--lesen); }

/* --- Wegweiser (Aufklappen) --------------------------------------------- */

.wegweiser { margin-block-start: var(--luft); }

.weg { border-block-end: var(--strich) solid var(--linie-fein); }

.weg__frage {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  padding-block: 0.75rem;
  cursor: pointer;
  font-size: var(--eintrag);
  font-weight: var(--schnitt-normal);
  line-height: var(--eng);
  list-style: none;
}

.weg__frage::-webkit-details-marker { display: none; }
.weg__marke { color: var(--gedaempft); font-weight: var(--schnitt-normal); }
.weg[open] .weg__marke { color: var(--tinte); }
.weg__frage:hover .weg__text { text-decoration: underline; }

.weg__antwort { padding-block-end: var(--luft); font-size: var(--klein); line-height: var(--lesen); }
.weg__antwort > * + * { margin-block-start: 0.8em; }

/* Das Lesemaß gehört an die Prosa, nicht an ihren Kasten. Lag es auf dem
   Kasten, erbte das Kartenraster darin die 66 Zeichen und drängte drei
   Karten in ein Drittel der Seitenbreite — bei 1280 px Fenster 176 px je
   Karte statt 380. */
.weg__antwort > * { max-width: var(--mass); }
.weg__antwort > .raster { max-width: none; }

/* --- Filter ------------------------------------------------------------- */

.filter__titel {
  font-size: var(--mikro);
  font-weight: var(--schnitt-normal);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ueberschrift);
  /* Ohne Strich darunter — die Überschrift trägt die Gruppen, sie muss sie
     nicht auch noch abgrenzen. */
  margin-block-end: 0.75rem;
}

/* Die Gruppen stehen nebeneinander, nicht untereinander: Seit die
   Programmseite nur noch zwei davon zeigt, brauchte es keine Spalte mehr,
   und quer über der Übersicht sind sie mit einem Blick zu erfassen. Die
   Legende bleibt über ihren Schaltern — ein <legend> lässt sich nicht
   verlässlich in eine Flex-Zeile stellen, und über den Schaltern liest es
   sich ohnehin besser. */
.filter__gruppen {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.85rem clamp(1.25rem, 3vw, 3rem);
}

.filter__gruppe { border: 0; padding: 0; margin: 0; }

.filter__legende {
  font-size: var(--mikro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ueberschrift);
  padding: 0;
  margin-block-end: 0.3rem;
}

.filter__optionen { display: flex; flex-wrap: wrap; gap: 0.2rem; }

.filter__optionen input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.filter__optionen label {
  display: inline-block;
  border: 1px solid var(--linie-fein);
  padding: 0.1rem 0.4rem;
  font-size: var(--mikro);
  line-height: 1.5;
  cursor: pointer;
  transition: background var(--tempo), color var(--tempo);
}

.filter__optionen label:hover { border-color: var(--linie); }

.filter__optionen input:checked + label {
  background: var(--tinte);
  color: var(--papier);
  border-color: var(--tinte);
}

.filter__optionen input:focus-visible + label {
  outline: 2px solid var(--tinte);
  outline-offset: 2px;
}

.filter__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: 0.9rem;
  padding-block-start: 0.5rem;
  border-block-start: var(--strich) solid var(--linie-fein);
}

.filter__anzahl { font-size: var(--mikro); color: var(--gedaempft); }
.filter__zusatz { margin-block-start: 0.5rem; }

/* Ohne JavaScript bleibt der Absendeknopf sichtbar und nötig. */
.js .filter__aktionen [data-filter-absenden] { display: none; }

/* --- Kalender ----------------------------------------------------------- */

.ansichten { margin-block: 1rem; border-block-end: var(--strich) solid var(--linie); }

.ansichten ul { display: flex; flex-wrap: wrap; gap: 1rem; }

.ansichten__link {
  /* flex statt inline-block: sonst legt die Zeilenhöhe Raum unter das Icon */
  display: flex;
  padding-block: 0.3rem;
  font-size: var(--klein);
  text-decoration: none;
  border-block-end: 2px solid transparent;
}

.ansichten__link.ist-aktiv { border-block-end-color: var(--tinte); font-weight: var(--schnitt-normal); }

/* Woche, Monat, Liste als Icons; der Name steht für Screenreader und als Tooltip */
.ansichten__symbol { display: block; inline-size: 1.15rem; block-size: 1.15rem; }

@media (hover: hover) {
  .ansichten__link:hover { color: var(--gedaempft); }
}

.zeitraum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block: 1rem;
}

.zeitraum__titel {
  font-size: var(--eintrag);
  font-weight: var(--schnitt-normal);
  line-height: var(--eng);
  letter-spacing: -0.02em;
  text-align: center;
}

/* Kalenderwoche sehr klein über dem Datum der Woche */
.zeitraum__kw {
  display: block;
  margin-block-end: 0.2rem;
  font-size: var(--winzig);
  font-weight: var(--schnitt-mittel);
  letter-spacing: 0.04em;
}

.legende { margin-block: 1rem; }

.legende__titel {
  font-size: var(--mikro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ueberschrift);
  margin-block-end: 0.35rem;
}

.legende__liste { display: flex; flex-wrap: wrap; gap: 0.25rem 0.85rem; }

.legende__eintrag {
  display: inline-flex;
  gap: 0.3rem;
  align-items: baseline;
  font-size: var(--mikro);
}

/* Kalenderkopf: Ansichts-Icons links, Kategorien rechts auf derselben Höhe,
   die Trennlinie liegt unter beiden. Mittig statt an der Grundlinie
   ausgerichtet — die Icons haben keine Textgrundlinie. Auf schmalen
   Schirmen rutschen die Kategorien unter die Icons. */
.kalenderkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 2rem;
  margin-block: 1rem;
  border-block-end: var(--strich) solid var(--linie);
}

.kalenderkopf .ansichten { margin-block: 0; border-block-end: 0; }

.kalenderkopf .legende {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.85rem;
  margin-block: 0;
}

.kalenderkopf .legende__titel { margin-block-end: 0; }

.kalendertag { border-block-start: var(--strich) solid var(--linie); padding-block: var(--luft-eng) var(--luft); }

.kalendertag__titel {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: var(--klein);
  font-weight: var(--schnitt-normal);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-block-end: 0.4rem;
}

.kalendertag__wochentag { color: var(--gedaempft); }

.termin {
  display: grid;
  gap: 0.2rem 0.75rem;
  padding-block: var(--luft-eng);
  border-block-start: var(--strich) solid var(--linie-fein);
  font-size: var(--klein);
}


@media (min-width: 48rem) {
  .termin {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
    align-items: end;
  }
}

/* Erst Uhrzeit und Kategorie klein, dann der Titel — wie in Woche und Monat */
.termin__zeit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.75rem;
  margin-block-end: 0.2rem;
  font-size: var(--mikro);
  color: var(--gedaempft);
}
.termin__zeit time { font-size: var(--winzig); font-weight: var(--schnitt-mittel); }
.termin__kategorie { display: inline-flex; gap: 0.3rem; min-width: 0; }
.termin__label { min-width: 0; overflow-wrap: anywhere; }
.termin__titel { font-size: var(--eintrag); font-weight: var(--schnitt-normal); line-height: var(--eng); letter-spacing: -0.015em; }
.termin__titel a { text-decoration: none; }
.termin__titel a:hover { text-decoration: underline; }
.termin__hinweis { color: var(--gedaempft); font-weight: var(--schnitt-normal); font-size: var(--mikro); }
.termin__ort { font-size: var(--mikro); color: var(--gedaempft); }
.termin__modus { display: block; }

/* --- Wochenraster -------------------------------------------------------
   Sieben Tage nebeneinander, ab 60rem. Darunter stehen die Tage
   untereinander, jeder mit eigener Linie. Leere Tage bleiben stehen.
   ------------------------------------------------------------------------ */

.woche { margin-block: 1rem; border-block-start: var(--strich) solid var(--linie); }

.woche__tag {
  padding-block: var(--luft-eng);
  border-block-end: var(--strich) solid var(--linie-fein);
}

.woche__kopf {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  margin-block-end: 0.6rem;
  font-size: var(--mikro);
  font-weight: var(--schnitt-normal);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.woche__wochentag { color: var(--gedaempft); }
.woche__tag.ist-heute .woche__kopf { font-weight: var(--schnitt-kraeftig); }
.woche__tag.ist-heute .woche__wochentag { color: inherit; }

.woche__liste { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }

@media (min-width: 60rem) {
  .woche {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-block-end: var(--strich) solid var(--linie);
  }

  .woche__tag {
    min-block-size: 14rem;
    padding: 0.6rem 0.6rem 1.5rem;
    border-block-end: 0;
    border-inline-start: var(--strich) solid var(--linie-fein);
  }

  .woche__tag:first-child { padding-inline-start: 0; border-inline-start: 0; }
}

/* --- Eintrag in Woche und Monat: erst Uhrzeit klein, dann Titel --------- */

.kalendereintrag { line-height: 1.3; }

.kalendereintrag__zeit {
  display: flex;
  gap: 0.3rem;
  align-items: baseline;
  font-size: var(--winzig);
  font-weight: var(--schnitt-mittel);
  color: var(--gedaempft);
}

.kalendereintrag__titel {
  font-size: var(--klein);
  line-height: var(--eng);
  overflow-wrap: anywhere;
  hyphens: auto;
}

.kalendereintrag__titel a { text-decoration: none; }
.kalendereintrag__titel a:hover { text-decoration: underline; }

.kalendereintrag__hinweis {
  margin-block-start: 0.15rem;
  font-size: var(--winzig);
  color: var(--gedaempft);
}

.monat .kalendereintrag { margin-block-start: 0.35rem; }
.monat .kalendereintrag__titel { font-size: var(--mikro); }

/* --- Monatsraster ------------------------------------------------------- */

.tabelle-rahmen { overflow-x: auto; margin-block: 1rem; }

.monat { min-width: 46rem; border: var(--strich) solid var(--linie); }

.monat th {
  text-align: start;
  font-size: var(--mikro);
  font-weight: var(--schnitt-normal);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ueberschrift);
  padding: 0.35rem 0.5rem;
  border-block-end: var(--strich) solid var(--linie);
}

.monat__tag {
  vertical-align: top;
  width: calc(100% / 7);
  min-height: 6.5rem;   /* wächst mit, statt Einträge abzuschneiden */
  padding: 0.3rem;
  border: var(--strich) solid var(--linie-fein);
  font-size: var(--mikro);
}

.monat__tag.ist-fremd { opacity: 0.4; }
.monat__tag.ist-heute { outline: 2px solid var(--tinte); outline-offset: -2px; }

.monat__zahl { color: var(--gedaempft); margin-block-end: 0.2rem; }

/* Kalenderwoche: schmale erste Spalte, im Kopf „KW", in jeder Zeile die Zahl */
.monat .monat__kw {
  inline-size: 2.5rem;
  padding: 0.35rem 0.4rem;
  vertical-align: top;
  font-size: var(--winzig);
  font-weight: var(--schnitt-normal);
  letter-spacing: 0.04em;
  color: var(--gedaempft);
  border: var(--strich) solid var(--linie-fein);
}

/* Kurssitzungen im Kalender: Thema als eigene Zeile unter dem Kurstitel.
   Entfällt eine Sitzung, bleibt sie stehen, tritt aber zurück — wie auf
   der Kursseite (.sitzung--entfaellt). */
.termin__hinweis--zeile { display: block; margin-block-start: 0.2rem; font-size: var(--winzig); }

.termin.ist-entfallen,
.termin.ist-entfallen .termin__titel a,
.kalendereintrag.ist-entfallen,
.kalendereintrag.ist-entfallen a { color: var(--gedaempft); }

.termin.ist-entfallen .termin__titel a,
.kalendereintrag.ist-entfallen a { text-decoration: line-through; text-decoration-thickness: 0.06em; }

/* --- Tabellen ----------------------------------------------------------- */

.tabelle th,
.tabelle td {
  text-align: start;
  vertical-align: top;
  padding: 0.45rem 0.75rem 0.45rem 0;
  border-block-end: var(--strich) solid var(--linie-fein);
  font-size: var(--klein);
  line-height: var(--lesen);
}

.tabelle thead th {
  font-size: var(--mikro);
  font-weight: var(--schnitt-normal);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ueberschrift);
  border-block-end: var(--strich) solid var(--linie);
}

/* --- Buchung ------------------------------------------------------------ */

.buchung {
  border: 1px solid var(--linie);
  padding: 0.75rem 0.9rem;
  font-size: var(--klein);
}

.buchung__titel {
  font-size: var(--mikro);
  font-weight: var(--schnitt-normal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.buchung[data-status='ausgebucht'],
.buchung[data-status='geschlossen'] { border-style: dashed; color: var(--gedaempft); }

/* Die Platzzahl erbt die Formatierung des Status — dieselbe Zeile,
   derselbe Rang. Der Schrägstrich ist leiser: Er soll trennen, nicht
   mitgelesen werden. */
.buchung__trenner { color: var(--gedaempft); margin-inline: 0.15em; }
/* Steht jetzt hinter dem Knopf, nicht mehr dicht unter der Platzzahl —
   und braucht dort den Abstand, der eine Angabe von einer Handlung trennt. */
.buchung__frist { font-size: var(--mikro); color: var(--gedaempft); margin-block-start: 0.55rem; }
.buchung .knopf { margin-block-start: 0.7rem; }
.buchung__hinweis { margin-block-start: 0.7rem; font-size: var(--mikro); line-height: var(--lesen); }

/* --- Blättern: voriger und nächster Workshop ----------------------------

   Zwei Wege, links und rechts, mit einer Linie darüber. Die Richtung steht
   klein in der Mono darüber, der Titel darunter in der Textschrift — man
   sieht zuerst, wohin es geht, und dann wohin genau.

   Fehlt eine Seite, bleibt ihr Platz leer statt dass die andere
   hinüberrutscht: Der nächste Workshop steht immer rechts. */

.blaettern {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gasse);
  margin-block-start: var(--luft-weit);
  padding-block-start: var(--luft);
  border-block-start: var(--strich) solid var(--linie);
}

.blaettern__seite--rechts { text-align: end; }

/* Schmal untereinander: Nebeneinander blieben je 160 px, in denen schon
   „Für Social Media gestalten" dreimal umbricht. Untereinander steht
   beides links, der nächste Workshop zuerst — er ist der häufigere Weg. */
@media (max-width: 40rem) {
  .blaettern {
    grid-template-columns: 1fr;
    row-gap: var(--luft);
  }

  .blaettern__seite--rechts { text-align: start; order: -1; }
  .blaettern__seite:empty { display: none; }
}

.blaettern__link {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  max-width: var(--mass);
}

.blaettern__richtung {
  display: block;
  font-family: var(--schrift-daten);
  font-size: var(--mikro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gedaempft);
}

.blaettern__titel {
  display: block;
  margin-block-start: 0.35rem;
  font-size: var(--basis);
  line-height: var(--eng);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--tempo);
}

@media (hover: hover) {
  .blaettern__link:hover .blaettern__titel { text-decoration-color: currentColor; }
}

.blaettern__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.2em;
}

/* --- Workshopkalender ---------------------------------------------------

   Die Filterleiste liegt über dem Kalender, der Export steht darin: Er
   bezieht sich auf die Auswahl, die hier getroffen wird, und gehört
   deshalb neben sie und nicht ans Seitenende.

   Die Lernpfade laufen als Zeile durch, nicht als Liste untereinander —
   es sind sechs kurze Namen, und untereinander läsen sie sich wie ein
   Inhaltsverzeichnis, das sie nicht sind. */

.pfadfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--luft-eng) var(--gasse);
  margin-block-start: var(--luft-weit);
  padding-block-end: var(--luft-eng);
  border-block-end: var(--strich) solid var(--linie);
}

.pfadfilter__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Jeder Pfad in eigener Umrandung, wie die Marken auf den Kursseiten:
   Nebeneinander gesetzt liefen sechs Namen als eine lange Zeile
   ineinander — „Web Publishing Coding für Gestalter*innen Recherche &
   Dokumentation" las sich wie ein Satz. Der Rahmen macht aus der Zeile
   eine Reihe einzelner Schalter. */
.pfadfilter__link {
  display: inline-block;
  border: 1px solid var(--linie-fein);
  padding: 0.15rem 0.5rem;
  font-family: var(--schrift-daten);
  font-size: var(--mikro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gedaempft);
  text-decoration: none;
  transition: color var(--tempo), border-color var(--tempo), background-color var(--tempo);
}

/* Der gewählte Pfad steht gefüllt da — nicht nur farbig, damit er sich
   nicht allein auf die Farbe verlässt. */
.pfadfilter__link.ist-aktiv {
  color: var(--papier);
  background: var(--tinte);
  border-color: var(--tinte);
}

@media (hover: hover) {
  .pfadfilter__link:hover:not(.ist-aktiv) { color: var(--tinte); border-color: var(--linie); }
}

/* Liste oder Raster: zwei Wörter, durch einen Schrägstrich getrennt. Sie
   wählen eine Darstellung, keinen Inhalt — deshalb ohne Rahmen, damit
   sie nicht wie ein siebter Lernpfad aussehen. */
.ansichtswahl {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--schrift-daten);
  font-size: var(--mikro);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.ansichtswahl__link + .ansichtswahl__link::before {
  content: '/';
  margin-inline-end: 0.5rem;
  color: var(--gedaempft);
}

.ansichtswahl__link {
  color: var(--gedaempft);
  text-decoration: none;
}

.ansichtswahl__link.ist-aktiv { color: var(--tinte); text-decoration: underline; text-underline-offset: 0.3em; }

@media (hover: hover) {
  .ansichtswahl__link:hover { color: var(--tinte); }
}

/* Ein Termin in einer Rasterzelle: Titel, darunter die Uhrzeit. Eng
   gesetzt, weil sieben Spalten nebeneinander wenig Platz lassen. */
.rastertermin {
  display: block;
  margin-block-start: 0.3rem;
  color: inherit;
  text-decoration: none;
  border-inline-start: 2px solid var(--linie);
  padding-inline-start: 0.3rem;
}

.rastertermin__titel {
  display: block;
  font-size: var(--mikro);
  line-height: var(--eng);
}

.rastertermin__zeit {
  display: block;
  font-family: var(--schrift-daten);
  font-size: var(--winzig);
  color: var(--gedaempft);
}

@media (hover: hover) {
  .rastertermin:hover .rastertermin__titel { text-decoration: underline; text-underline-offset: 0.2em; }
}

.pfadfilter__export {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 0.9rem;
  margin: 0;
}

.pfadfilter__abo {
  font-family: var(--schrift-daten);
  font-size: var(--mikro);
  color: var(--gedaempft);
}

/* Ein Monat ist ein Abschnitt: Name in der Randspalte, Termine daneben —
   dieselbe Anordnung wie die Abschnitte der Kurs- und Workshopseiten.
   Deshalb erbt der Monatstitel die Klasse nicht, sondern bekommt sie
   hier eigens: Er steht größer da als eine Abschnittsbeschriftung, weil
   die Monate hier die Gliederung tragen. */
.monat-block {
  margin-block-start: var(--luft-weit);
  padding-block-start: var(--luft);
  border-block-start: var(--strich) solid var(--linie);
}

/* Der erste Monat folgt direkt auf die Filterleiste, und die schließt
   schon mit einer Linie ab — zwei Striche übereinander. */
.pfadfilter + .monat-block { border-block-start: 0; padding-block-start: 0; }

.monat-block__titel {
  font-size: var(--basis);
  font-weight: var(--schnitt-kraeftig);
  margin-block-end: var(--luft);
}

/* Ein leerer Monat bleibt stehen, tritt aber zurück: Er zeigt die Pause
   im Semester, ohne sie zu betonen. */
.monat-block--leer { color: var(--gedaempft); }
.monat-block--leer .monat-block__titel { font-weight: var(--schnitt-normal); margin-block-end: 0.3rem; }

.monat-block__leer {
  font-family: var(--schrift-daten);
  font-size: var(--mikro);
  color: var(--gedaempft);
}

@media (min-width: 60rem) {
  .inhalt .monat-block {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: var(--gasse);
  }

  .inhalt .monat-block > .monat-block__titel {
    grid-column: 1;
    grid-row: 1 / span 40;
    align-self: start;
    position: sticky;
    inset-block-start: 3.5rem;
    margin: 0;
  }

  .inhalt .monat-block > :not(.monat-block__titel) { grid-column: 2; }
}

/* Die Einordnung eines Workshops im Lernpfad steht unter der Titelzeile,
   auf der Höhe der übrigen Angaben — nicht neben dem Titel: Dort säße sie
   zwischen Titel und Uhrzeit und drängte beide auseinander. */
.sitzung__einordnung {
  margin-block-start: 0.2rem;
  font-size: var(--mikro);
}

.sitzung__einordnung .marke { margin-inline-start: 0; }

/* --- In den Kalender ----------------------------------------------------

   Ein Angebot, keine Aufforderung: klein, in der Mono, gedämpft. Es
   steht an jedem Termin, und ein Dutzend kräftiger Knöpfe untereinander
   wäre eine Wand.

   Das Symbol und das Wort stehen auf derselben Grundlinie und gehören
   zusammen — deshalb inline-flex, nicht zwei Dinge nebeneinander. */

.ics-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-block-start: 0.5rem;
  font-family: var(--schrift-daten);
  font-size: var(--mikro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gedaempft);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  transition: color var(--tempo), text-decoration-color var(--tempo);
}

.ics-link svg { flex: none; }

@media (hover: hover) {
  .ics-link:hover { color: var(--tinte); text-decoration-color: currentColor; }
}

.ics-link:focus-visible { outline: 2px solid currentColor; outline-offset: 0.2em; }

/* --- Auslastung --------------------------------------------------------- */

.auslastung {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  border: 1px solid var(--linie-fein);
  padding: 0.4rem 0.6rem;
  font-size: var(--klein);
}

.auslastung[data-auslastung='voll'] { border-style: dashed; }
.auslastung__punkt { font-size: 0.6rem; }
.auslastung[data-auslastung='mittel'] .auslastung__punkt { opacity: 0.6; }
.auslastung[data-auslastung='voll'] .auslastung__punkt { opacity: 0.3; }

/* --- Listen ------------------------------------------------------------- */

.liste-schlicht { font-size: var(--klein); line-height: var(--lesen); }
.liste-schlicht li + li { margin-block-start: 0.25rem; }
.liste-schlicht--zwei { columns: 2; column-gap: var(--gasse); }

/* Anschluss auf der Workshopseite (vorher, danach, Projekte, Lernpfade).
   Jeder Block steht wie ein Eintrag der Datenliste im Hauptteil: die
   Beschriftung als kleine Versalzeile in der Mono, darunter die Links in
   Textgröße, getrennt durch eine feine Linie. Vorher standen die
   Beschriftungen als h3 in 1.375rem über Listen mit 4 px Zeilenabstand. */
.anschluss__block {
  padding-block: var(--luft-eng);
  border-block-start: var(--strich) solid var(--linie-fein);
}

.anschluss__block:first-child { border-block-start: 0; padding-block-start: 0; }

.anschluss__block h3 {
  font-family: var(--schrift-daten);
  font-size: var(--mikro);
  line-height: var(--eng);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-block-end: 0.6rem;
}

.anschluss__block .liste-schlicht li { max-width: var(--mass); }
.anschluss__block .liste-schlicht li + li { margin-block-start: 0.6rem; }

.anschluss__text {
  font-family: var(--schrift-daten);
  font-size: var(--klein);
  line-height: var(--lesen);
  max-width: var(--mass);
}

.anschluss__text > * + * { margin-block-start: 0.6rem; }

.liste-strich { margin-block-start: var(--luft-eng); }

.liste-strich li {
  padding: 0.35rem 0 0.35rem 1.2rem;
  position: relative;
  border-block-end: var(--strich) solid var(--linie-fein);
  font-size: var(--klein);
  line-height: var(--lesen);
}

.liste-strich li::before {
  content: '—';
  position: absolute;
  inset-inline-start: 0;
  color: var(--gedaempft);
}

/* --- Personen ----------------------------------------------------------- */

/* Über das Studio: Personen stehen in der Randspalte unter „Kontakt“, in
   Größe und Schrift der übrigen Angaben dort (.daten dd, Mono). Das Bild
   bleibt klein, jede weitere Person und die Adresse darunter stehen unter
   einer feinen Linie. */
.person__bild {
  inline-size: 9rem;
  aspect-ratio: 3 / 4;   /* Hochformat */
  object-fit: cover;
  filter: grayscale(1);
  margin-block-end: 0.5rem;
}

.daten dd .person > * + * { margin-block-start: 0; }

.person + .person,
.person + .daten__text { margin-block-start: var(--luft); }

.person__funktion,
.person__zeit { color: var(--gedaempft); }

/* Über das Studio: Hinweis und Kooperationen in der Größe des Fließtexts,
   damit die Seite nur eine Textgröße hat */
.seite--ueber .hinweis,
.seite--ueber .liste-strich li { font-size: inherit; }

/* Der Text zum Studio steht groß und über die volle Breite der
   Hauptspalte; seine Bezeichnung ist nur für Screenreader da. */
.seite--ueber .ueber__selbst {
  max-width: none;
  font-size: var(--eintrag);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

@media (min-width: 60rem) {
  .seite--ueber .inhalt section:has(> .abschnitt__titel) > .ueber__selbst { grid-column: 1 / -1; }
}

/* Der beschreibende Text gehört zum Titel: Er rückt dicht darunter, statt
   den vollen Abschnittsabstand mitzunehmen. Es bleibt das Polster des
   Titelbereichs. */
.seite--ueber .spalten { margin-block-start: 0; }
.seite--ueber .inhalt section:first-of-type { margin-block-start: 0; padding-block-start: 0; }

/* Randspalte: kleiner und in der Mono, die Blöcke durch Abstand statt
   durch Linien getrennt */
.spalten__neben .daten dd { font-size: var(--mikro); }

/* --- „Nach oben" ---------------------------------------------------------
   Erscheint erst nach etwa einer Bildschirmhöhe (studio.js) und liegt unter
   dem Kopf, nie darüber. Ohne JavaScript bleibt er unsichtbar.
   ------------------------------------------------------------------------ */

.nachoben {
  position: fixed;
  inset-block-end: clamp(1rem, 3vw, 2rem);
  inset-inline-end: clamp(1rem, 3vw, 2rem);
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  color: var(--tinte);
  background: var(--papier);
  border: var(--strich) solid var(--linie);
  border-radius: 50%;
  text-decoration: none;

  /* Unsichtbar und nicht anklickbar, bis die Seite weit genug gescrollt ist */
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.35rem);
  transition: opacity var(--tempo), transform var(--tempo), visibility var(--tempo);
}

.nachoben.ist-sichtbar {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (hover: hover) {
  .nachoben:hover { color: var(--papier); background: var(--tinte); }
}

.nachoben__pfeil { display: block; }

/* Der Blocktitel steht kleiner als sein Inhalt, dafür einen Schnitt
   stärker — und mit Luft darunter, damit Titel und Inhalt zwei Zeilen
   sind und nicht ein Absatz. */
.spalten__neben .daten dt {
  font-size: var(--winzig);
  font-weight: var(--schnitt-mittel);
}

/* Marken als Inhalt eines Blocks (snippets/marken.php): Den Abstand zum
   Titel regelt das Paar, nicht die Liste. */
.spalten__neben .daten dd .marken { margin-block: 0; }

/* Blocktitel und Inhalt gehören zusammen: nur ein schmaler Abstand. */
.spalten__neben .daten__paar {
  border: 0;
  padding-block: 0;
  gap: 0.35rem;
}

/* Ein Abstand für alle Blöcke der Randspalte (--randspalte-abstand, gesetzt
   in layout.css) — zwischen Listen, Buchung, Marken, Knöpfen und den
   Angaben innerhalb einer Liste. Die Bausteine bringen eigene Außenabstände
   mit (.daten, .marken, …); in der Randspalte stehen sie auf null, damit
   nur dieser eine gilt. Vorher hob .spalten__neben > .daten { margin: 0 }
   den Abstand zwischen zwei Listen ganz auf. */
.spalten__neben > * { margin-block: 0; }

.spalten__neben > * + *,
.spalten__neben .daten__paar + .daten__paar { margin-block-start: var(--randspalte-abstand); }

/* Der Buchungskasten folgt derselben Stufung: Inhalt klein, Titel wie ein
   Blocktitel. Die Zahl der freien Plätze bleibt groß — sie ist die Antwort. */
.spalten__neben .buchung { font-size: var(--mikro); }
.spalten__neben .buchung__titel { font-size: var(--winzig); font-weight: var(--schnitt-mittel); }
.spalten__neben .buchung__titel + * { margin-block-start: 0.35rem; }

/* Symbol vor einer Angabe, gesetzt über (icon: mail) — snippets/icon.php.
   Es folgt der Schriftgröße und steht mit seiner Mitte auf der Mitte der
   Kleinbuchstaben daneben. */
.icon {
  display: inline-block;
  margin-inline-end: 0.5em;
  vertical-align: -0.22em;
}

.icon__bild {
  display: block;
  inline-size: 1.15em;
  block-size: 1.15em;
}

/* --- Sonstiges ---------------------------------------------------------- */

.naechster { margin-block-start: 1.5rem; }

.naechster__weitere { margin-block-start: 0.75rem; font-size: var(--klein); }
.naechster__weitere li {
  display: flex;
  gap: 0.6rem;
  padding-block: 1rem;
  border-block-start: var(--strich) solid var(--linie-fein);
}

.artikel__datum {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  font-size: var(--klein);
  margin-block-end: 1rem;
}

.frist { border: 1px solid var(--linie-fein); padding: 0.4rem 0.6rem; font-size: var(--klein); }

/* Namen der Beteiligten auf der Arbeitsseite: hervorgehoben, aber nicht
   fett — der mittlere Schnitt statt <strong>. */
.beteiligte__name { font-weight: var(--schnitt-mittel); }

/* Ohne eigenen Abstand nach oben: In der Randspalte setzt ihn
   --randspalte-abstand, wie für jeden anderen Block. */
.projekt__links { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* Karte außerhalb eines Rasters — z. B. der nächste Termin auf der Startseite */
.naechster > .karte { padding-block-start: var(--luft-eng); }

/* Kompakte Metazeile in Listen und Karten — eine Zeile statt vieler Kästen */
.meta-zeile {
  font-size: var(--klein);
  line-height: var(--eng);
  color: var(--gedaempft);
  font-variant-numeric: tabular-nums;
}

.marken--knapp { margin-block: 0.35rem 0; gap: 0.15rem; }
.marken--knapp .marke { font-size: var(--mikro); padding: 0.02rem 0.3rem; }

/* Datenlisten im Hauptteil folgen derselben Randspalte wie die
   Abschnittsbeschriftungen — eine Kante für die ganze Seite, nicht zwei.
   Im schmalen Nebenteil bleibt die gestapelte Form. */
@media (min-width: 60rem) {
  .spalten__haupt > .daten .daten__paar,
  .inhalt > .daten .daten__paar {
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: var(--gasse);
    align-items: baseline;
  }
}


/* =========================================================================
   Zeilenmaß

   Das Raster nutzt die volle Fensterbreite, laufender Text nicht: jenseits
   von etwa 70 Zeichen findet das Auge beim Zeilenwechsel den Anfang nicht
   mehr zuverlässig. Betrifft nur Prosa, nicht Tabellen und Verzeichnisse.
   ========================================================================= */

.daten dd,
.liste-strich li,
.karte__text,
.prinzip__text,
.schritt__text,
.pfad__text,
.leitbegriff__text,
.einstieg__text,
.inhalt section > p,
.inhalt section > div > p:not(.buehne__claim, .komposition__zeile) { max-width: var(--mass); }

/* Der Vorspann der Bühne ist keine Prosa, sondern eine Schauzeile — sein
   Maß setzt die Regel für Überschrift und Vorspann in base.css. Dasselbe
   gilt für die Zeilen der Startseite: Sie sind gesetzte Zeilen, kein
   laufender Text. 66 Zeichen Maß hätten sie mitten im Wort gebrochen. */

/* =========================================================================
   Lernpfad-Matrix

   Zeilen sind Veranstaltungen, Spalten sind Lernpfade. Ein Punkt heißt
   „gehört dazu", die senkrechte Linie verbindet den ersten mit dem letzten
   Punkt einer Spalte. Die Linie wird als Hintergrund der Zelle gezeichnet,
   damit sie auch durch Zellen ohne Punkt läuft.

   Bewusst ohne Zeilenlinien und ohne Flächen: Die Punkte und ihre Stränge
   sollen die einzigen Marken sein.
   ========================================================================= */

.matrix {
  --strang: 1.5px;
  /* Noch zurückhaltender als --linie-fein: Die Striche sollen die Zeilen
     führen, nicht mit den Punkten um Aufmerksamkeit konkurrieren. */
  --linie-zart: color-mix(in srgb, var(--tinte) 16%, transparent);
  /* Oben der volle Abschnittsabstand, unten der kleine: Darunter folgen die
     Beschreibungen der einzelnen Pfade, die zur Übersicht gehören — mit dem
     weiten Abstand samt Fußnote standen sie über 150 px tiefer. */
  margin-block: var(--luft-weit) var(--luft);
}

.matrix__tabelle {
  min-width: 42rem;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Kein Padding-Reset: Die Regel .matrix__tabelle th hätte höhere
   Spezifität als .matrix__zeile und würde jeden Zeilenabstand schlucken.
   Die globale .tabelle-Regel greift hier ohnehin nicht. */

/* --- Kopf ---------------------------------------------------------------- */

.matrix__spalten th {
  font-size: var(--mikro);
  font-weight: var(--schnitt-normal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.75rem 0.35rem 1.6rem;
  vertical-align: top;
}

.matrix__spalten a { text-decoration: none; }
.matrix__spalten a:hover { text-decoration: underline; }

/* Die erste Spalte trägt die Zeilenbeschriftungen und bleibt im Kopf leer */
.matrix__spalten td { width: 32%; }

/* --- Zeilen -------------------------------------------------------------- */

.matrix__zeile {
  text-align: start;
  font-weight: var(--schnitt-normal);
  font-size: var(--klein);
  line-height: var(--eng);
  padding-block: 0.95rem;
  padding-inline-end: var(--gasse);
  vertical-align: middle;
  border-block-start: var(--strich) solid var(--linie-zart);
}

/* KW und Datum klein über dem Titel, wie bei den Sitzungen eines Kurses */
.matrix__datum {
  display: block;
  margin-block-end: 0.25rem;
  font-family: var(--schrift-daten);
  font-size: var(--mikro);
  line-height: var(--eng);
  color: var(--gedaempft);
}

.matrix__zeile a { text-decoration: none; }
.matrix__zeile a:hover { text-decoration: underline; }

.matrix__zelle {
  vertical-align: middle;
  text-align: center;
  background-repeat: no-repeat;
  border-block-start: var(--strich) solid var(--linie-zart);
}

/* Die erste Zeile braucht oben keinen Strich — darüber steht schon der Kopf. */
.matrix__tabelle tbody tr:first-child > * { border-block-start: 0; }

/* Beim Überfahren liegt die ganze Zeile auf einer leichten Fläche: In einer
   breiten Tabelle verliert man sonst zwischen Titel und Punkt die Spur.
   Der Grund der Zelle liegt darüber, die Verbindungslinie bleibt sichtbar.
   Nur dort, wo es einen Zeiger gibt — auf dem Touchscreen bliebe die
   zuletzt berührte Zeile hinterlegt. */
@media (hover: hover) {
  .matrix__tabelle tbody tr:hover { background-color: var(--flaeche); }
}

/* Verbindungslinie: ganze Höhe, ab dem Punkt nach unten, oder bis zum Punkt.
   Sie ist bewusst kräftiger als die Trennlinien der Seite — sie trägt eine
   Aussage und muss auf einen Blick als Strang lesbar sein, nicht als Raster. */
.matrix__zelle[data-verbinder] {
  background-image: linear-gradient(var(--tinte), var(--tinte));
  background-size: var(--strang) 100%;
  background-position: 50% 0;
}

.matrix__zelle[data-verbinder='start'] {
  background-size: var(--strang) 50%;
  background-position: 50% 100%;
}

.matrix__zelle[data-verbinder='ende'] {
  background-size: var(--strang) 50%;
  background-position: 50% 0;
}

.matrix__punkt {
  display: block;
  width: 0.65rem;
  height: 0.65rem;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--tinte);
}

.matrix__hinweis {
  margin-block-start: var(--luft);
  font-size: var(--mikro);
  line-height: var(--lesen);
  color: var(--gedaempft);
  font-family: var(--schrift-daten);
  max-width: var(--mass);
}

/* =========================================================================
   Komposition — die typografische Startseite

   Eine Folge von Zeilen, die unterschiedlich weit eingerückt stehen. Der
   Umbruch ist gesetzt, nicht gerechnet: Jede Zeile ist ein eigenes Element,
   damit sie ihren eigenen Einzug tragen kann. Deshalb steht hier auch
   nowrap — bricht eine Zeile doch um, stimmt die Komposition nicht mehr,
   und bis 60rem schaltet die Regel darunter sie ohnehin frei.

   Die Marken sitzen auf derselben Grundlinie wie der große Text. Das leistet
   align-items: baseline nicht, weil die Zeile kein Flex-Container sein darf
   — dann verlöre der große Text seinen eigenen Umbruch bei schmalem Fenster.
   Stattdessen bleibt alles inline: zwei Inline-Elemente auf einer Zeile
   teilen ihre Grundlinie von sich aus.
   ========================================================================= */

.komposition {
  --komposition-gross:  clamp(2.1rem, 7vw, 6.25rem);
  --komposition-klein:  clamp(0.85rem, 1.95vw, 1.75rem);
  --komposition-einzug: clamp(0.6rem, 3.34vw, 3rem);

  /* Unten kein eigener Abstand: Darunter folgt die Marke der Hochschule,
     und die bringt ihren eigenen mit (.hochschule). */
  padding-block: clamp(1.5rem, 4vw, 3.5rem) 0;
}

/* --- Marke der Hochschule ------------------------------------------------
   Schließt die Startseite ab, rechtsbündig unter der Komposition. Der
   Abstand oben ist größer als der zwischen zwei Kompositionsblöcken: Die
   Marke gehört nicht mehr zum Satz, sie ist die Absenderangabe darunter.

   Unten reicht weniger, weil das Fußband ohnehin folgt und .inhalt schon
   4rem mitbringt — sonst klaffte hier ein Loch.
   ------------------------------------------------------------------------ */
.hochschule {
  display: flex;
  justify-content: flex-end;
  padding-block: clamp(4.5rem, 14vw, 12rem) clamp(1.5rem, 4vw, 3.5rem);
}

.hochschule__link {
  display: block;
  color: var(--tinte);
  /* Kein Strich beim Zeigen: Ein Logo ist kein Wort. Stattdessen tritt es
     kurz zurück — dieselbe Bewegung wie bei den Marken der Komposition,
     nur über die Deckkraft statt über den Strich. */
  opacity: 1;
  transition: opacity var(--tempo);
}

@media (hover: hover) {
  .hochschule__link:hover { opacity: 0.55; }
}

.hochschule__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.4rem;
}

/* Die Höhe wird gesetzt, nicht die Breite: Beide Sprachfassungen haben
   gleich hohe viewBox, also erscheinen Schrift und Bildmarke in beiden
   gleich groß — die deutsche Zeile ist nur länger und darf das auch sein.
   Über die Breite wäre es andersherum: gleiche Breite, drei Prozent
   kleinere Schrift im Deutschen. Die Begründung steht ausführlich in
   snippets/layout/folkwang.php. */
.hochschule__marke {
  display: block;
  height: clamp(2.4rem, 4.45vw, 3.65rem);
  width: auto;
}

.komposition__block + .komposition__block {
  /* Bei 1440 px sind das 160 px — gut anderthalb Zeilen Luft. Die Gruppen
     sollen als Gruppen lesbar sein, nicht als fortlaufender Satz. */
  margin-block-start: clamp(3rem, 11.1vw, 10rem);
}

.komposition__zeile {
  margin: 0;
  line-height: 1.1;
  /* Der Zeilenkasten des großen Textes gibt die Höhe vor; die Marke soll
     ihn nicht auseinandertreiben. */
  text-indent: 0;
}

.komposition__gross {
  font-size: var(--komposition-gross);
  font-weight: var(--schnitt-leicht);
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: lowercase;
  color: var(--tinte);
}

.komposition__marke {
  font-family: var(--schrift-daten);
  font-size: var(--komposition-klein);
  font-weight: var(--schnitt-normal);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--tinte);
}

/* Der Abstand zwischen großem Text und Marke hängt an der Marke, nicht an
   einer Lücke im Quelltext — sonst entschiede die Formatierung der Vorlage
   über die Gestaltung. */
.komposition__gross + .komposition__marke { margin-inline-start: 0.85rem; }
.komposition__marke + .komposition__gross { margin-inline-start: 0.85rem; }

/* --- Einzüge -------------------------------------------------------------
   Keine Leiter aus gleichen Schritten: Der Entwurf setzt die Zeilen von
   Hand, und die Sprünge sind unterschiedlich groß. Die sechs Werte stehen
   deshalb einzeln da und sind im Panel je Zeile wählbar.
   ------------------------------------------------------------------------ */
.komposition__zeile[data-einzug='1'] { padding-inline-start: calc(var(--komposition-einzug) * 1); }
.komposition__zeile[data-einzug='2'] { padding-inline-start: calc(var(--komposition-einzug) * 1.667); }
.komposition__zeile[data-einzug='3'] { padding-inline-start: calc(var(--komposition-einzug) * 2.333); }
.komposition__zeile[data-einzug='4'] { padding-inline-start: calc(var(--komposition-einzug) * 3); }
.komposition__zeile[data-einzug='5'] { padding-inline-start: calc(var(--komposition-einzug) * 3.667); }

/* --- Links ---------------------------------------------------------------
   Im großen Text wird das verlinkte Wort unterstrichen, nicht die Zeile.
   Der Strich läuft dicht am Buchstaben und ist kräftig genug, um bei
   diesem Schriftgrad nicht zu verschwinden.
   ------------------------------------------------------------------------ */
/* Im großen Text bleibt der Link im Ruhezustand unmarkiert — ein Strich
   unter einem Wort dieser Größe wäre ein Balken, und die Zeile ist als
   Satzbild gesetzt, nicht als Linkliste.

   Beim Zeigen kommt er: Auf dieser Seite stehen Links und bloßer Text
   ununterscheidbar nebeneinander, und wer mit dem Zeiger unterwegs ist,
   soll sehen, worauf er gerade steht. Der Strich ist dünner als bei den
   Marken — bei 100 px wären 0,06em ein Balken von 6 px.

   Die Regel gilt für jeden Link im großen Text, den Fachbereich wie
   jeden anderen: Eine Ausnahme für ein Ziel wäre keine Auszeichnung,
   sondern ein Zufall. */
.komposition__gross a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.035em;
  text-underline-offset: 0.12em;
  transition: text-decoration-color var(--tempo);
}

@media (hover: hover) {
  .komposition__gross a:hover { text-decoration-color: currentColor; }
}

/* Der Strich liegt stattdessen bei den Marken. Sie sind klein, unbunt und
   verschwinden sonst im Satz; erst der Strich macht sie als Weg kenntlich.

   Beim Zeigen verschwindet er wieder. Das ist die seltenere Richtung, aber
   die richtige: Wer mit dem Zeiger auf einer Marke steht, hat sie gefunden —
   die Markierung hat ihre Arbeit getan und darf das Wort freigeben. */
.komposition__marke { text-decoration: none; }

/* Zwei Bauformen: Die ganze Marke ist ein Link (ein Ziel) — oder eine Zeile
   trägt zwei Marken mit eigenem Ziel („Zweite Marke" im Panel), dann steckt
   der Strich an den einzelnen Wörtern. Bei „ein lern- und" stehen so
   Einstieg und Lernpfade als getrennte Wege nebeneinander. */
a.komposition__marke,
.komposition__marke a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--tempo);
}

@media (hover: hover) {
  a.komposition__marke:hover,
  .komposition__marke a:hover { text-decoration-color: transparent; }
}

/* Der Tastaturfokus braucht seine eigene Marke — er darf nicht davon
   abhängen, ob an dieser Stelle ein Strich liegt oder gerade keiner. */
.komposition__gross a:focus-visible,
a.komposition__marke:focus-visible,
.komposition__marke a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.15em;
  text-decoration-color: currentColor;
}

/* --- Der Pfeil -----------------------------------------------------------
   Als Vektor, weil Halvar Flex U+2197 nicht enthält. Größe und Strich
   hängen an der Schriftgröße, damit er sich beim Skalieren nicht von der
   Schrift löst.
   ------------------------------------------------------------------------ */
.pfeil {
  display: inline-block;
  inline-size: 0.62em;
  block-size: 0.62em;
  vertical-align: -0.02em;
  margin-inline-start: 0.1em;
}

/* Unter 60rem wird die Komposition zum Fließtext: Die gesetzten Umbrüche
   passen nicht mehr, die Einzüge fallen weg, und die Zeilen dürfen brechen. */
@media (max-width: 60rem) {
  .komposition__zeile[data-einzug] { padding-inline-start: 0; }
}


/* =========================================================================
   Lightbox (assets/js/studio.js)

   Bildschirmfüllend über allem, dunkler Grund, das Bild in voller Höhe.
   Die Bedienung ist Apparat: kleine Mono-Versalien wie im Kopf. Ohne
   JavaScript gibt es sie nicht, die Bilder bleiben dann einfach Bilder.
   ========================================================================= */

.ist-gesperrt { overflow: hidden; }

.lichtbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: var(--luft-eng);
  padding: clamp(0.75rem, 2vw, 2rem);
  background: var(--invers-papier);
  color: var(--invers-tinte);
}

.lichtbox[hidden] { display: none; }

.lichtbox__buehne {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--luft-eng);
  min-block-size: 0;
  margin: 0;
}

.lichtbox__buehne img {
  max-inline-size: 100%;
  max-block-size: calc(100vh - 9rem);
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  transition: opacity 180ms ease;
}

.lichtbox.ist-wechselnd .lichtbox__buehne img { opacity: 0.25; }

.lichtbox__text {
  max-inline-size: var(--mass);
  font-size: var(--klein);
  line-height: var(--lesen);
  text-align: center;
  color: color-mix(in srgb, var(--invers-tinte) 72%, transparent);
}

.lichtbox__knopf {
  background: none;
  border: 0;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  color: inherit;
  font-family: var(--schrift-daten);
  font-size: var(--winzig);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lichtbox__knopf:focus-visible { outline: 2px solid currentColor; outline-offset: 0.15em; }

.lichtbox__schliessen {
  position: absolute;
  inset-block-start: clamp(0.75rem, 2vw, 2rem);
  inset-inline-end: clamp(0.75rem, 2vw, 2rem);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.lichtbox__pfeil { grid-row: 2; font-size: var(--eintrag); line-height: 1; }
.lichtbox__pfeil--zurueck { grid-column: 1; justify-self: start; }
.lichtbox__pfeil--weiter { grid-column: 3; justify-self: end; }

.lichtbox__zaehler {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  text-align: center;
  font-family: var(--schrift-daten);
  font-size: var(--winzig);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--invers-tinte) 72%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .lichtbox__buehne img { transition: none; }
}