/* =========================================================================
   Raster, Kopf, Menü, Fuß

   Das Layout ist ein Verzeichnis: Spalten, durch Haarlinien getrennt,
   ohne Zwischenraum. Mobile first, Breakpoints 40rem und 60rem.
   ========================================================================= */

/* Der Fuß steht bewusst nicht hier: Er ist seit dem Umbau ein Band und
   holt sich Breite und Innenabstand von .band__innen. Beides zugleich
   ergäbe eine Box, die auf 1440px begrenzt, aber am linken Rand klebt. */
.inhalt,
.kopf__zeile {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.inhalt {
  padding-block: 1.5rem 4rem;
  display: flow-root;
}

/* --- Kopfzeile ---------------------------------------------------------- */

.kopf {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: var(--papier);
  border-block-end: var(--strich) solid var(--linie);
}

/* Am Seitenanfang bleibt der Kopf, wie er ist.
   Erst wenn gescrollt wird, bekommt er eine etwas kräftigere Linie und eine
   flache Schattenkante — gerade genug, dass er vor dem Inhalt liegt, statt
   ihn als invertiertes Band zu überdecken (studio.js setzt die Klasse). */
.kopf.ist-gescrollt {
  border-block-end-color: var(--tinte);
  box-shadow: 0 4px 10px -9px color-mix(in srgb, var(--tinte) 28%, transparent);
}

.kopf__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}

/* Bildmarke und Kurzname bilden eine Einheit: kleine Versalien in der
   Mono, damit der Kopf zum Apparat gehört und nicht mit dem Seitentitel
   konkurriert. */
.wortmarke {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  max-width: 62%;
}

.wortmarke__zeichen {
  width: 1.45em;
  height: 1.45em;
  flex-shrink: 0;
}

/* Der Kopf ist eine Zeile in einem Register: Wortmarke und Steuerung stehen
   in derselben Größe, derselben Schrift und in Versalien. Die Zweiteilung
   aus großer und kleiner Ebene trägt die Seite darunter; hier oben wäre sie
   ein Größenunterschied auf zwölf Pixeln — mehr Unruhe als Ordnung.

   Ohne Strich, anders als die Marken daneben: Die Wortmarke ist kein Weg
   unter mehreren, sondern das Zeichen der Seite. */
.wortmarke__text {
  font-family: var(--schrift-daten);
  font-size: var(--winzig);
  font-weight: var(--schnitt-normal);
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kopf__werkzeuge {
  display: flex;
  align-items: baseline;
  gap: 0 1.4rem;
  flex-shrink: 0;
}

.kopf__steuerung { display: flex; align-items: baseline; gap: 0 1.4rem; }

/* DE / EN: Der Schrägstrich kommt aus dem Stylesheet, damit ihn keine
   Sprachausgabe vorliest. */
.sprachen ul { display: flex; gap: 0 0.4rem; }

.sprachen li + li::before {
  content: "/";
  content: "/" / "";
  margin-inline-end: 0.4rem;
  font-family: var(--schrift-daten);
  font-size: var(--winzig);
  line-height: 1.1;
  color: var(--gedaempft);
}

/* --- Marken im Kopf ------------------------------------------------------

   Sprache, Modus und Menü sind dieselbe Sorte Element wie die
   Marken der Startseite: kleine Mono, unterstrichen, beim Zeigen gibt der
   Strich das Wort frei. Vorher saßen drei von ihnen in Kästen — die
   einzigen umrandeten Bedienelemente, die auf der Website noch übrig waren.
   ------------------------------------------------------------------------ */

.marke-knopf,
.sprachen a {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--schrift-daten);
  font-size: var(--winzig);
  font-weight: var(--schnitt-normal);
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--tempo);
}

/* Die Sprache, in der man liest, ist kein Weg, sondern ein Zustand: voller
   Ton, fett, kein Strich. Die andere ist der Weg — gedämpft, unterstrichen. */
.sprachen a[aria-current] {
  color: var(--tinte);
  font-weight: var(--schnitt-kraeftig);
  text-decoration-color: transparent;
}

.sprachen a:not([aria-current]) { color: var(--gedaempft); }

@media (hover: hover) {
  .marke-knopf:hover,
  .sprachen a:hover { text-decoration-color: transparent; }
  .sprachen a:not([aria-current]):hover { color: var(--tinte); }
}

.marke-knopf:focus-visible,
.sprachen a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.15em;
  text-decoration-color: currentColor;
}

/* Hell/Dunkel als Symbol. Sonne = hell, Mond = dunkel: der Zustand, in dem
   die Seite steht. Welches Symbol gilt, folgt denselben Bedingungen wie die
   Farbwerte in base.css — Systemeinstellung, sonst data-farbmodus —, damit
   es schon vor dem Skript stimmt. */
/* Der Knopf steht wie die Wörter daneben auf der Grundlinie. Ein SVG hat
   keine eigene; als Grundlinie gilt seine Unterkante, es säße also um
   (Höhe − Versalhöhe) / 2 zu hoch. Um genau das rückt es nach unten und
   steht mit seiner Mitte auf der Mitte der Großbuchstaben daneben, bei
   jeder Schriftgröße. Ein negativer Außenabstand wirkt hier nicht: Flex
   bildet die Ersatz-Grundlinie aus der Rahmen-, nicht der Außenkante. */
.modus-knopf {
  display: inline-flex;
  align-self: baseline;
  text-decoration: none;
}

.modus-knopf__symbol {
  display: block;
  position: relative;
  inset-block-start: calc((1.15rem - 1cap) / 2);
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.modus-knopf__mond { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-farbmodus='light']) .modus-knopf__sonne { display: none; }
  :root:not([data-farbmodus='light']) .modus-knopf__mond { display: block; }
}

:root[data-farbmodus='dark'] .modus-knopf__sonne { display: none; }
:root[data-farbmodus='dark'] .modus-knopf__mond { display: block; }

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

/* --- Wohin die Steuerung gehört ------------------------------------------

   Bei 375 px bleibt neben Wortmarke, Sprachwahl und Menü kaum Platz; der
   Modusknopf wandert deshalb auf schmalen Schirmen ins Menü. Er steht
   zweimal im Markup und ist immer nur an einer Stelle sichtbar; die
   verborgene Fassung ist display: none und damit auch für Sprachausgaben
   weg. (Früher standen hier zwei beschriftete Knöpfe, Modus und Palette.)
   ------------------------------------------------------------------------ */

.menue__steuerung { display: none; }

@media (max-width: 50rem) {
  .kopf__steuerung { display: none; }
  .menue__steuerung {
    display: flex;
    align-items: baseline;
    gap: 0 1.4rem;
    max-width: var(--breite);
    margin: 0 auto clamp(1.5rem, 5vw, 3rem);
  }
}

/* --- Menü --------------------------------------------------------------- */

/* Das Menü beginnt unter dem Kopf und lässt ihn stehen: Der Knopf, mit
   dem man es geöffnet hat, schließt es auch wieder, und Wortmarke,
   Sprache und Hell-dunkel bleiben erreichbar. Die Kopfhöhe misst
   studio.js beim Öffnen (--kopf-hoehe); der Rückfallwert gilt ohne
   JavaScript, wo das Menü ohnehin offen im Fluss steht. */
.menue {
  position: fixed;
  inset: var(--kopf-hoehe, 3.5rem) 0 0;
  background: var(--papier);
  padding: clamp(1.5rem, 4vw, 3rem) var(--rand) 3rem;
  overflow-y: auto;
  z-index: 15;
}

.menue[hidden] { display: none; }

/* Das × im Menüknopf: nur auf dem Telefon, nur bei offenem Menü. Die
   Beschriftung verschwindet dabei aus dem Bild, nicht aus der Seite —
   Sprachausgaben lesen weiter „Menü schließen". Dieselbe Technik wie
   .visuell-versteckt, hier aber an eine Bedingung geknüpft. */
.knopf-menue__x { display: none; }

@media (max-width: 50rem) {
  [data-menue-schalter][aria-expanded='true'] .knopf-menue__x { display: block; }

  [data-menue-schalter][aria-expanded='true'] [data-menue-beschriftung] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Das Menü folgt derselben Ordnung wie die Startseite: kein Rahmen, keine
   Trennlinien, gestaffelte Einzüge, und zwei Register statt einer Liste —
   die Bereiche in der Halvar, ihre Unterseiten als Marken in der Mono
   daneben. Vorher war es eine Tabelle aus sechs Zeilen mit Linien dazwischen
   und einem grauen Kleingedruckten darunter; das war die einzige Stelle der
   Website, die noch aus einem anderen Entwurf stammte.

   Die Linien sind ersatzlos weg. Die Komposition trennt mit Luft, und ein
   Menü aus sechs Einträgen braucht keine Hilfslinien, um lesbar zu sein. */

.menue__liste {
  max-width: var(--breite);
  margin-inline: auto;
  --menue-einzug: clamp(0.6rem, 3.34vw, 3rem);
}

/* Bereich und Unterseiten stehen untereinander, nicht nebeneinander: der
   Bereich in seiner Zeile, die Unterseiten in ihrer. */
.menue__liste > li {
  /* Sechs Einträge in einem bildschirmfüllenden Feld: Ohne Luft klumpen sie
     oben zusammen und der Rest bleibt leer. */
  padding-block: clamp(0.5rem, 1.6vw, 1.4rem);
}

/* Die Staffel zitiert die Startseite, ohne sie zu kopieren: dieselbe
   Grundeinheit, aber eine ruhigere Folge — ein Menü soll man überfliegen
   können, und dafür darf die linke Kante nicht so weit wandern. */
.menue__liste > li:nth-child(2) { padding-inline-start: calc(var(--menue-einzug) * 1); }
.menue__liste > li:nth-child(3) { padding-inline-start: calc(var(--menue-einzug) * 1.667); }
.menue__liste > li:nth-child(4) { padding-inline-start: calc(var(--menue-einzug) * 1); }
.menue__liste > li:nth-child(5) { padding-inline-start: calc(var(--menue-einzug) * 1.667); }
.menue__liste > li:nth-child(6) { padding-inline-start: calc(var(--menue-einzug) * 1); }

/* Im großen Register bleibt der Link im Ruhezustand unmarkiert — wie auf
   der Startseite. Der Strich hat hier zwei Aufgaben: Dauerhaft sagt er
   „hier stehst du gerade", beim Zeigen sagt er „hierhin führt es". Beides
   derselbe Strich, aber das eine bleibt und das andere geht wieder. */
.menue__link {
  font-size: clamp(1.9rem, 5.5vw, 4rem);
  font-weight: var(--schnitt-leicht);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.035em;
  text-underline-offset: 0.12em;
  transition: text-decoration-color var(--tempo);
}

.menue__link.ist-aktiv { text-decoration-color: currentColor; }

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

/* Der Versatz der Unterzeile leitet sich vom Bereich ab, statt eigens
   aufgezählt zu werden: Sie steht immer eine Stufe tiefer als er. Weil die
   Bereiche selbst unterschiedlich weit eingerückt sind, wandert damit auch
   die Unterzeile — die linke Kante bleibt in Bewegung, wie in der
   Komposition. */
.menue__unterliste {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding-inline-start: var(--menue-einzug);
  margin-block-start: clamp(0.3rem, 0.7vw, 0.6rem);
  gap: 0.15rem 0.5rem;
  font-family: var(--schrift-daten);
  /* Dasselbe Größenverhältnis wie auf der Startseite, wo 100 px zu 28 px
     stehen: Bei 64 px Bereichsschrift sind das rund 18 px. Kleiner, und die
     Marken lesen sich als Kleingedrucktes statt als zweite Ebene. */
  font-size: clamp(0.75rem, 1.25vw, 1.15rem);
  text-transform: uppercase;
  letter-spacing: 0;
}

/* Der Mittelpunkt trennt, ohne eine Linie zu ziehen — dieselbe Rolle, die
   er in den Metazeilen der Seite schon hat.

   Er hängt am vorangehenden Eintrag, nicht am folgenden: Als ::before des
   nächsten Elements bräche er mit ihm um und stünde dann am Zeilenanfang.
   Ein Trennzeichen, das eine Zeile eröffnet, trennt nichts mehr. */
.menue__unterliste li:not(:last-child)::after {
  content: '·';
  margin-inline-start: 0.5rem;
  color: var(--gedaempft);
}

/* Und hier liegt der Strich, wie bei den Marken der Startseite: Die kleine
   Ebene wird markiert, beim Zeigen gibt sie das Wort wieder frei. */
.menue__unterliste a {
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--tempo);
}

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

.menue__link:focus-visible,
.menue__unterliste a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.15em;
  text-decoration-color: currentColor;
}

/* --- Seitenkopf --------------------------------------------------------- */

/* Der Seitenkopf einer Unterseite folgt der Startseite: Er bekommt Raum,
   statt ihn zu sparen. Vorher stand der Titel 77 px unter der Kopfzeile und
   der Inhalt begann 44 px nach dem Strich — auf einer Seite, deren
   Startseite 160 px zwischen zwei Textgruppen legt, war das eine andere
   Tonlage. */
/* Ohne Strich nach unten: Getrennt wird mit Raum, wie in der Komposition
   und im Menü. Der Abstand darunter fällt damit auch kleiner aus — Polster
   und Abstand hatten sich vorher zu 118 px addiert, weil beide den Strich
   freistellen sollten. Den gibt es nicht mehr, also genügt einer. */
.seitenkopf {
  padding-block-start: clamp(1.5rem, 5.5vw, 6rem);
  padding-block-end: 0;
  margin-block-end: clamp(1.25rem, 2.4vw, 2.25rem);
}

/* Titel und Marke teilen eine Grundlinie, die Marke steht am rechten Rand —
   dieselbe Figur wie Zeile und Marke auf der Startseite, nur auseinander
   gezogen statt aneinander gesetzt. */
.seitenkopf__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem clamp(1rem, 3vw, 3rem);
}

.seitenkopf__marke {
  margin: 0;
  font-family: var(--schrift-daten);
  font-size: clamp(0.8rem, 0.3rem + 1.7vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.brotkrumen { margin-block-end: clamp(0.75rem, 1.6vw, 1.5rem); }

.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: var(--mikro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gedaempft);
}

.brotkrumen li::after { content: ' /'; }
.brotkrumen li:last-child::after { content: ''; }

/* Der Vorspann verhält sich wie die Marken der Startseite: Mono, Versalien,
   volle Textfarbe. Dort trägt die Halvar die Aussage und die Mono den
   Apparat — auf einer Unterseite ist der Titel die Aussage und der Vorspann
   die Einordnung, also dieselbe Rollenverteilung.

   Die Größe hält das Verhältnis der Startseite: Dort stehen 100 px zu 28 px,
   also 3,6:1. Bei einem Seitentitel von 88 px sind das 24 px. Der Wert ist
   deshalb keine eigene Stufe, sondern der Titelwert geteilt. */
.seitenkopf__teaser {
  font-family: var(--schrift-daten);
  font-size: clamp(0.8rem, 0.3rem + 1.7vw, 1.5rem);
  font-weight: var(--schnitt-normal);
  line-height: var(--lesen);
  letter-spacing: 0;
  text-transform: uppercase;
  margin-block-start: clamp(1rem, 2.5vw, 2.25rem);
}

/* --- Spalten ------------------------------------------------------------ */

.spalten {
  display: grid;
  gap: var(--gasse);
  margin-block-start: 1.5rem;
}

/* Links beginnt der Inhalt auf derselben Höhe wie rechts die Randspalte.
   Abschnitte bringen oben Abstand und Polster mit, um sich vom vorigen
   abzusetzen — über dem ersten steht nichts, also entfällt beides. Vorher
   begann der Text links 79 bis 113 px tiefer. Die Auswahl ist bewusst
   spezifischer als .inhalt section:has(> .abschnitt__titel). */
.inhalt .spalten__haupt > :first-child {
  margin-block-start: 0;
  padding-block-start: 0;
}

/* Dasselbe für nummerierte Reihen (Lernpfad, Sitzungen, Schritte), die den
   ersten Abschnitt füllen: Ihr erster Eintrag hat oben Polster, das ihn von
   der Linie darüber trennt — die es beim ersten nicht gibt. */
.inhalt .spalten__haupt > :first-child > :is(.pfad, .sitzungen, .schritte__liste, .prinzipien) > :first-child {
  padding-block-start: 0;
}

/* Untertitel und Kurzbeschreibung über den Spalten (ohne Header-Bild,
   snippets/vorspann.php): Sie stehen in der Breite der Hauptspalte statt in
   60 % der Seite, und die Randspalte beginnt erst darunter — auf der Höhe
   des ersten Abschnitts.

   Mit Header-Bild gibt es den Vorspann nicht: Untertitel und
   Kurzbeschreibung bleiben über dem Bild im Seitenkopf, und beide Spalten
   beginnen gemeinsam unter dem Bild. So unterscheiden sich die beiden Fälle
   dort, wo sie sich unterscheiden sollen — im Bezug zum Titel. */
.inhalt:has(.spalten > .vorspann) > .spalten { margin-block-start: 0; }

/* Schmal trennt die Gasse des Rasters die Blöcke, breit liegt die Gasse
   waagerecht bei null — dort trägt der Vorspann den Abstand selbst. */
.vorspann { grid-column: 1; }

.vorspann > :first-child { margin-block-start: 0; }
.vorspann > .seitenkopf__teaser,
.vorspann > .untertitel { max-width: none; }

/* Die Randspalte ist Apparat: kleiner und in der Mono, die Blöcke durch
   Abstand getrennt statt durch Linien — auf jeder Seite gleich, ob feste
   Angaben, Buchung oder freie Blöcke. */
.spalten__neben {
  --randspalte-abstand: calc(var(--luft) * 1.5);   /* zwischen allen Blöcken, components.css */
  font-family: var(--schrift-daten);
}

@media (min-width: 60rem) {
  /* Die senkrechte Linie zeichnet der Container als Hintergrund, nicht die
     Randspalte als eigener Rand — dieselbe Technik wie beim Zellenraster.
     Als Rand endete sie dort, wo der kurze Text der Randspalte aufhört; als
     Hintergrund läuft sie über die volle Höhe des Spaltenbereichs durch.
     68,75 % ist die Spaltengrenze: 2,2fr von zusammen 3,2fr. */
  .spalten {
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    gap: 0;
    background-image: linear-gradient(var(--linie), var(--linie));
    background-size: var(--strich-senkrecht) 100%;
    background-position: 68.75% 0;
    background-repeat: no-repeat;
  }

  .spalten__haupt,
  .spalten > .vorspann { padding-inline-end: var(--gasse); }

  .spalten > .vorspann { margin-block-end: clamp(1.25rem, 2.4vw, 2.25rem); }

  /* Der Vorspann füllt die erste Reihe der linken Spalte allein; Haupt- und
     Randspalte stehen darunter nebeneinander in der zweiten. */
  .spalten__haupt { grid-row: 2; }

  .spalten__neben {
    grid-column: 2;
    grid-row: 2;
    padding-inline-start: var(--gasse);
    font-size: var(--mikro);
    align-self: start;
    position: sticky;
    inset-block-start: 3.5rem;
  }
}

/* --- Studieren: Text und Stufenübersicht ---------------------------------
   Links der Text, rechts die Tabelle der Erfahrungsstufen. Schmal stehen
   sie untereinander; breit teilen sie sich die Zeile, die Tabelle etwas
   schmaler als der Text und oben bündig mit ihm. */

.einstieg > * + * { margin-block-start: var(--luft); }

@media (min-width: 60rem) {
  .einstieg {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: var(--gasse);
    align-items: start;
  }

  .einstieg > * + * { margin-block-start: 0; }

  /* Die Tabelle trägt sonst einen eigenen Abstand nach oben und stünde
     tiefer als der erste Absatz daneben. */
  .einstieg .tabelle-rahmen { margin-block-start: 0; }
}

/* Die Formate stehen unter der Tabelle, in derselben Spalte. Den Abstand
   dazwischen setzt der Behälter; die Überschriften bringen keinen eigenen
   mit, sonst stünde er doppelt. */
/* Die beiden Blöcke stehen deutlich auseinander: Ohne Trennlinien unter
   den Titeln trägt allein der Abstand die Grenze zwischen ihnen. */
.einstieg__uebersicht > * + * { margin-block-start: calc(var(--luft-weit) * 1.75); }

/* Die rechte Spalte liest sich als Nachschlagewerk neben dem Text, nicht
   als zweiter Textstrang. Sie läuft deshalb eine Stufe kleiner. Statt
   jede Zelle einzeln anzufassen, werden die beiden Größenwerte für diesen
   Teilbaum neu gesetzt — Tabelle und Formatliste greifen ohnehin darauf
   zu. */
.einstieg__uebersicht {
  --klein: 0.9rem;
  --mikro: 0.8rem;
}

/* Die Überschriften der beiden Blöcke: nur fett, ohne Versalien, ohne
   Sperrung, ohne Linie. Die Randspalten-Marginalie der übrigen Seiten
   wäre hier zu viel Apparat für zwei Wörter. */
.einstieg__uebersicht .abschnitt__titel {
  font-family: var(--schrift);
  font-size: 1rem;
  font-weight: var(--schnitt-kraeftig);
  letter-spacing: 0;
  text-transform: none;
  margin-block: 0 var(--luft);
  padding-block-end: 0;
  border-block-end: 0;
}

/* Die Zeilen atmen mehr als in der Hauptspalte: Die Spalte ist schmal, die
   Zellen brechen früh um, und ohne Luft dazwischen verliert man beim
   Querlesen die Zeile. Der kleinere Grad trägt sie auch. */
.einstieg__uebersicht .tabelle th,
.einstieg__uebersicht .tabelle td { padding-block: 0.65rem; }
.einstieg__uebersicht .daten__paar { padding-block: 1.1rem; gap: 0.4rem; }

/* --- Zellenraster --------------------------------------------------------

   Die senkrechten Linien zeichnet der Container als Hintergrund, nicht die
   einzelne Zelle. Nur so laufen sie auch dort durch, wo die letzte Reihe
   nicht voll besetzt ist — sonst bräche die Linie mitten im Block ab.
   Die waagerechten Trennlinien liegen an den Zellen, weil sie nur zwischen
   belegten Reihen stehen sollen.

   Die Bereiche sind nach oben begrenzt (min .. max), sonst greifen die
   Zwei-Spalten-Regeln über ihre Spezifität in das Drei-Spalten-Layout
   hinein und setzen dort Innenabstände und Reihentrenner falsch.
   ---------------------------------------------------------------------- */

.raster {
  --spalten: 1;
  display: grid;
  grid-template-columns: repeat(var(--spalten), minmax(0, 1fr));
  background-repeat: no-repeat;
  background-size: var(--strich-senkrecht) 100%;
}

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

.raster > :first-child { border-block-start: 0; }

/* --- zwei Spalten -------------------------------------------------------- */

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

@media (min-width: 40rem) and (max-width: 59.99rem) {
  .raster--drei,
  .raster--projekte,
  .raster--meldungen { --spalten: 2; }
}

@media (min-width: 40rem) {
  .raster--zwei,
  .raster--drei,
  .raster--projekte,
  .raster--meldungen {
    background-image: linear-gradient(var(--linie-fein), var(--linie-fein));
    background-position: 50% 0;
  }

  .raster--zwei > *,
  .raster--drei > *,
  .raster--projekte > *,
  .raster--meldungen > * {
    padding-inline: var(--gasse);
    border-block-start: 0;
  }

  .raster--zwei > :nth-child(odd),
  .raster--drei > :nth-child(odd),
  .raster--projekte > :nth-child(odd),
  .raster--meldungen > :nth-child(odd) { padding-inline-start: 0; }

  .raster--zwei > :nth-child(even),
  .raster--drei > :nth-child(even),
  .raster--projekte > :nth-child(even),
  .raster--meldungen > :nth-child(even) { padding-inline-end: 0; }

  .raster--zwei > :nth-child(n + 3),
  .raster--drei > :nth-child(n + 3),
  .raster--projekte > :nth-child(n + 3),
  .raster--meldungen > :nth-child(n + 3) {
    border-block-start: var(--strich) solid var(--linie-fein);
  }

  /* Versetztes Raster (laufende Projekte): Karten unterschiedlicher Höhe —
     ein hohes Hochformat neben einem flachen Querformat — ließen in der
     kürzeren Spalte eine Lücke, weil eine Rasterzeile so hoch ist wie ihre
     höchste Karte. Feine Zeilen von 4 px und ein Zeilenbereich je Karte
     (studio.js) lassen die nächste Karte direkt nachrücken.

     Ohne JavaScript bleibt es beim gewöhnlichen Raster, deshalb hängt es
     an .js: eine Lücke ist besser als übereinanderliegende Karten. */
  .js .raster--versetzt {
    grid-auto-rows: 4px;
    align-items: start;
  }
}

/* --- Kursseite: ein Abschnitt je Semester -------------------------------
   Die Karten beginnen auf der Zeile des Semesternamens: kein Innenabstand
   über der ersten Kartenreihe, Semestername und Kartentitel auf einer
   Grundlinie. Ohne Kurse steht der Hinweis genauso bündig — ohne die
   Linien, die .leer sonst als eigenen Kasten abgrenzen. */

.semester .raster > :first-child { padding-block-start: 0; }

/* Ab 60rem steht der Semestername in der Titelspalte. Die allgemeine Regel
   lässt ihn über 40 Rasterzeilen laufen und oben anschlagen — so teilt er
   keine Grundlinie mit den Karten, der Kartentitel säße 8,5 px tiefer.
   Hier gibt es rechts nur ein Element (Raster oder Hinweis), das in Zeile 1
   steht; beide richten sich dort an der Grundlinie aus. Sticky bleibt
   wirksam, weil Zeile 1 so hoch ist wie das ganze Raster. */
@media (min-width: 60rem) {
  .inhalt section.semester > .abschnitt__titel {
    grid-row: 1;
    align-self: baseline;
  }

  .inhalt section.semester > :not(.abschnitt__titel) { align-self: baseline; }

  /* Auf der Grundlinie wirkt der kleine Name neben dem großen Kartentitel
     zu tief. Er rückt deshalb so weit hoch, dass die Oberkanten der
     Versalien bündig stehen: Versalhöhe Halvar Flex 0,656 em, Halvar Mono
     0,668 em (gemessen) — bei den heutigen Graden 0,35rem. Nur wo Karten
     daneben stehen; eingeklappt und beim Hinweis ohne Kurse bleibt der Name
     mittig zwischen den Linien. transform verschiebt nur die Darstellung,
     Raster und Sticky bleiben unberührt. */
  .semester:has(.raster) .semester__knopf {
    transform: translateY(calc(0.668 * var(--mikro) - 0.656 * var(--eintrag)));
  }

  .js .semester:not(.ist-offen) .semester__knopf { transform: none; }
}

@media (min-width: 40rem) {
  .semester .raster--zwei > :nth-child(2) { padding-block-start: 0; }
}

.semester .leer {
  border-block: 0;
  padding-block: 0;
}

/* Akkordeon. Eine Linie zwischen zwei Semestern und überall derselbe
   Abstand — eingeklappt stehen die Semester dicht untereinander, statt mit
   dem großen Abschnittsabstand. Die Selektoren tragen .programm__ergebnisse,
   damit sie die allgemeine Abschnittsregel ab 60rem übertreffen. */
.inhalt .programm__ergebnisse > section.semester {
  margin-block: 0;
  padding-block: var(--luft);
  border-block-start: var(--strich) solid var(--linie);
}

.inhalt .programm__ergebnisse > section.semester:first-of-type {
  padding-block-start: 0;
  border-block-start: 0;
}

.semester > .abschnitt__titel {
  margin: 0;
  padding: 0;
  border: 0;
}

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

@media (min-width: 60rem) {
  .semester__inhalt { margin-block-start: 0; }
}

/* Der Knopf sieht aus wie die Überschrift, in der er steht. */
.semester__knopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  inline-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: start;
  color: inherit;
  font-weight: var(--schnitt-kraeftig);   /* Bold, im Dark Mode Medium */
  cursor: pointer;
}

.semester__knopf:hover { color: var(--tinte); }

/* Zustand erst anzeigen und einklappen, wenn JavaScript da ist — sonst
   stünde ein Knopf ohne Wirkung über verborgenen Kursen. */
.js .semester__knopf::after { content: "+"; content: "+" / ""; }
.js .semester.ist-offen .semester__knopf::after { content: "–"; content: "–" / ""; }
.js .semester:not(.ist-offen) .semester__inhalt { display: none; }

/* --- drei Spalten -------------------------------------------------------- */

@media (min-width: 60rem) {
  .raster--drei,
  .raster--projekte,
  .raster--meldungen {
    --spalten: 3;
    background-image:
      linear-gradient(var(--linie-fein), var(--linie-fein)),
      linear-gradient(var(--linie-fein), var(--linie-fein));
    background-position: calc(100% / 3) 0, calc(200% / 3) 0;
  }

  .raster--drei > :nth-child(n),
  .raster--projekte > :nth-child(n),
  .raster--meldungen > :nth-child(n) {
    padding-inline: var(--gasse);
    border-block-start: 0;
  }

  .raster--drei > :nth-child(3n + 1),
  .raster--projekte > :nth-child(3n + 1),
  .raster--meldungen > :nth-child(3n + 1) { padding-inline-start: 0; }

  .raster--drei > :nth-child(3n),
  .raster--projekte > :nth-child(3n),
  .raster--meldungen > :nth-child(3n) { padding-inline-end: 0; }

  .raster--drei > :nth-child(n + 4),
  .raster--projekte > :nth-child(n + 4),
  .raster--meldungen > :nth-child(n + 4) {
    border-block-start: var(--strich) solid var(--linie-fein);
  }
}

/* --- Linien nur zwischen belegten Spalten --------------------------------
   Steht in einem Raster erst eine Karte — etwa eine einzige veröffentlichte
   Arbeit —, liefen die senkrechten Linien sonst durch leere Spalten. Eine
   Linie erscheint erst, wenn links und rechts von ihr etwas steht: bei einer
   Karte keine, bei zwei Karten in drei Spalten nur die erste. */
@media (min-width: 40rem) {
  .raster:not(:has(> :nth-child(2))) { background-image: none; }
}

@media (min-width: 60rem) {
  :is(.raster--drei, .raster--projekte, .raster--meldungen):has(> :nth-child(2)):not(:has(> :nth-child(3))) {
    background-image: linear-gradient(var(--linie-fein), var(--linie-fein));
    background-position: calc(100% / 3) 0;
  }
}

/* --- Bühne (Startseite) ------------------------------------------------- */

.buehne {
  padding-block: var(--luft-weit) var(--luft-weit);
}

/* Der Strich unter dem Claim soll genau in der Mitte zwischen den beiden
   Absätzen stehen. Deshalb trägt ein einziger Wert beide Hälften: oben als
   padding des Claims, unten als dessen margin. Der folgende Absatz bringt
   dann keinen eigenen Abstand mehr mit — sonst wäre die untere Hälfte
   größer, und genau so sah es vorher aus. */
.buehne__claim {
  --strich-luft: var(--luft-weit);

  font-size: var(--mittel);
  font-weight: var(--schnitt-leicht);
  line-height: var(--eng);
  letter-spacing: -0.02em;
  margin-block-start: var(--luft);
  padding-block-end: var(--strich-luft);
  margin-block-end: var(--strich-luft);
  border-block-end: var(--strich) solid var(--linie);
}

.buehne__text {
  max-width: var(--breite-text);
  margin-block-start: var(--luft);
  line-height: var(--lesen);
}

/* Steht ein Claim darüber, bringt er den Abstand schon mit. */
.buehne__claim + .buehne__spalte > .buehne__text { margin-block-start: 0; }

.buehne__text > * + * { margin-block-start: 0.8em; }

.buehne__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin-block-start: var(--luft);
}

/* --- Programmseite ------------------------------------------------------ */

.programm {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  /* Der schlichte Hinweis darüber hat keinen unteren Abstand — er gehört
     zum Kopf. Die Liste setzt ihren eigenen, damit beides nicht klebt. */
  margin-block-start: clamp(1rem, 1.7vw, 1.5rem);
}

@media (min-width: 60rem) {
  .programm:not(.programm--voll) {
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 4fr);
    gap: 0;
  }

  .programm:not(.programm--voll) .programm__filter {
    align-self: start;
    position: sticky;
    inset-block-start: 3.5rem;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    padding-inline-end: var(--gasse);
  }

  .programm:not(.programm--voll) .programm__ergebnisse {
    border-inline-start: var(--strich) solid var(--linie);
    padding-inline-start: var(--gasse);
  }

  /* Ohne Filter läuft die Übersicht über die volle Breite — eine Spalte,
     kein Raster. Die Variante steht hier, damit die Ausnahme unten sie
     ebenso von der Seitenleiste ausnimmt wie früher die Filterspalte. */
  .programm--voll {
    grid-template-columns: minmax(0, 1fr);
  }
}

.programm__wege { margin-block-start: 2rem; }

.programm__wege ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: var(--klein);
}

/* --- Fußzeile ----------------------------------------------------------- */

.fuss {
  border-block-start: var(--strich) solid var(--linie);
  padding-block: 1.5rem 3rem;
  /* Der Fuß führt eine Schriftgröße: --winzig für alles — Überschriften,
     Adresse, Kontakt, Listen und Hinweis. Die Überschriften unterscheiden
     sich durch Versalien und den gedämpften Ton, nicht durch die Größe.
     (Bis 14.09.2026 stand alles eine Stufe größer, in --mikro.) */
  font-size: var(--winzig);
  line-height: var(--lesen);
}

/* Die Spaltenzahl ergibt sich aus Platz und Blockmenge — kein fester Wert,
   der eine Lücke hinterlässt, sobald ein Block im Panel leer bleibt. */
.fuss__raster {
  display: grid;
  gap: var(--luft) var(--gasse);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  align-items: start;
}

/* Ab 60rem über die ganze Breite verteilt: Jeder Block ist so breit wie
   sein Inhalt, der erste schließt links, der letzte rechts bündig ab, die
   Abstände dazwischen sind gleich. In gleich breiten Rasterspalten standen
   die kurzen Blöcke links in ihrer Spalte, rechts von „Rechtliches" blieb
   ein Loch, und die Abstände zwischen den Texten wirkten ungleich.

   Eine Zeile, kein Umbruch: Ungebremst wären Kontakt und Kanäle 535 und
   406 px breit — zusammen mehr als die Inhaltsbreite, der letzte Block
   rutschte darunter. Höchstens 22rem je Block, darin brechen lange Zeilen
   um; wird es enger, dürfen die Blöcke schmaler werden (flex-shrink). */
@media (min-width: 60rem) {
  .fuss__raster {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .fuss__block { max-inline-size: 22rem; }
}

.fuss__titel {
  font-size: var(--winzig);
  font-weight: var(--schnitt-normal);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ueberschrift);
  margin-block-end: 0.5rem;
}

.fuss address { font-style: normal; }

.fuss__liste { margin-block-start: 0.75rem; }
.fuss__liste li + li { margin-block-start: 0.2rem; }

/* Direkt unter der Überschrift beginnt jede Spalte gleich: Adresse und
   Listen stehen sonst 4 px versetzt, weil nur die Liste Abstand trug. */
.fuss__titel + * { margin-block-start: 0; }

/* Text unter einer Liste, etwa die Sprechstunde unter E-Mail und Telefon */
.fuss__liste + p { margin-block-start: 0.75rem; }

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

/* --- Galerie ------------------------------------------------------------
   Zwei Raster für zwei Aufgaben: Die veröffentlichte Fassung bekommt zwei
   Spalten und damit Platz, der Prozess drei und damit Übersicht.

   Die Bilder behalten ihr Seitenverhältnis — bei Arbeiten wird nicht
   beschnitten, ein Ausschnitt wäre eine Aussage über die Arbeit, die uns
   nicht zusteht. Die Zeilen enden dadurch unterschiedlich tief; das ist
   gewollt und der Grund für align-items: start.

   Einzelne Bilder dürfen über die volle Breite laufen (Schalter an der
   Datei im Panel). Damit lässt sich der Rhythmus setzen, ohne dass jemand
   ins Stylesheet muss.
   ------------------------------------------------------------------------ */

.galerie {
  display: grid;
  /* Großzügiger als das Seitenraster: Die Bilder brauchen Luft zwischen
     sich, damit die verschiedenen Größen als Rhythmus lesbar bleiben. */
  gap: calc(var(--gasse) * 1.6);
  align-items: start;
  margin-block-start: var(--luft);
}

/* Urheber unter der Galerie (Feld „Urheber unter den Bildern“) */
.galerie__nachweis {
  margin-block-start: var(--luft-eng);
  font-family: var(--schrift-daten);
  font-size: var(--winzig);
  line-height: var(--lesen);
  color: var(--gedaempft);
}

@media (min-width: 40rem) {
  .galerie { grid-template-columns: repeat(2, var(--spalte)); }
  .galerie--klein { grid-template-columns: repeat(2, var(--spalte)); }
}

/* Ab 60rem sechs Spalten: Jedes Bild belegt je nach Format zwei bis vier
   davon (--spanne, gesetzt in snippets/galerie.php), ein breites alle
   sechs. So wechseln Größen und Reihen, statt dass alles in gleichen
   Spalten steht. dense füllt Lücken, die dabei entstehen, mit dem nächsten
   passenden Bild — die Reihenfolge bleibt ansonsten erhalten. */
@media (min-width: 60rem) {
  .galerie,
  .galerie--klein {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: dense;
  }

  .galerie > .bild { grid-column: span var(--spanne, 3); }
}

/* Über alle Spalten, egal wie viele es gerade sind. */
.galerie > .bild--breit { grid-column: 1 / -1; }

.galerie .bild img {
  inline-size: 100%;
  block-size: auto;
}

/* Die Bilder liegen farbig. Bis zum 20.09.2026 waren sie entsättigt und
   zeigten ihre Farbe erst unter dem Zeiger; der Graufilter ist entfallen. */

.galerie .bild__flaeche { display: block; }

.galerie .bild__flaeche img { display: block; cursor: zoom-in; }

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

.bild__nachweis { display: block; }

/* Header-Bild unter dem Seitenkopf (snippets/headerbild.php) — Arbeiten und
   laufende Projekte. Volle Inhaltsbreite, im Querformat beschnitten: breit
   21:9, schmal 3:2, damit es auf dem Telefon nicht zum Streifen wird. Den
   Ausschnitt setzt der Fokuspunkt aus dem Panel (object-position). */
.headerbild { margin: 0 0 var(--luft-weit); }

.headerbild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (min-width: 40rem) {
  .headerbild img { aspect-ratio: 21 / 9; }
}

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

/* =========================================================================
   Zweite Achse

   Bisher begannen fast alle Blöcke an derselben linken Kante. Das ist
   ordentlich, aber es passiert nichts. Die Abschnittsbeschriftung wandert
   deshalb in eine Randspalte: die Linie läuft über die volle Breite, der
   Text beginnt weiter rechts. Das ist der Griff aus dem Vorlesungs-
   verzeichnis — und aus der Broschüre, wo die Seitenzahlen im Bund stehen.

   :has() wird von allen aktuellen Browsern unterstützt. Wo nicht, bleibt
   die bisherige Anordnung stehen; nichts geht verloren.
   ========================================================================= */

@media (min-width: 60rem) {
  .inhalt section:has(> .abschnitt__titel) {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: var(--gasse);
    border-block-start: var(--strich) solid var(--linie);
    margin-block-start: var(--luft-weit);
    padding-block-start: var(--luft-eng);
  }

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

  .inhalt section:has(> .abschnitt__titel) > :not(.abschnitt__titel) {
    grid-column: 2;
  }

  /* Der erste Block einer Sektion braucht keinen eigenen Abstand mehr */
  .inhalt section:has(> .abschnitt__titel) > :nth-child(2) { margin-block-start: 0; }

  /* Das erste Modul einer Spalte zieht keine obere Linie: Darüber steht
     bereits der Seitenkopf oder der Abschluss des vorigen Blocks. Erst die
     folgenden Module trennen sich voneinander ab. */
  .inhalt section:has(> .abschnitt__titel):first-of-type { border-block-start: 0; }

  /* Ausnahme rechte Spalte auf „Studieren": Dort ist für eine Randspalte
     neben dem Block kein Platz — die Überschrift steht wieder direkt
     darüber, wie unterhalb von 60rem auch. */
  .inhalt .einstieg__uebersicht section:has(> .abschnitt__titel) {
    display: block;
    border-block-start: 0;
    margin-block-start: 0;
    padding-block-start: 0;
  }

  .inhalt .einstieg__uebersicht section > .abschnitt__titel {
    position: static;
    grid-column: auto;
    grid-row: auto;
  }

  /* Lernpfade: Übersicht und Einzelbeschreibungen sind zwei Blicke auf
     dieselbe Sache. Der volle Abschnittsabstand schob die Beschreibungen
     weit unter die Matrix, obwohl darunter schon deren Fußnote steht. */
  .seite--lernpfade .inhalt section:has(> .matrix) + section {
    margin-block-start: var(--luft);
  }

  /* Kurs- und Lernpfadseiten: Der Abschnittstitel steht auf der Grundlinie der ersten
     Zeile seines Textes, statt oben anzuschlagen — sonst säße er 5 px höher,
     bei den Terminen 24 px. Gilt nur, wo nach dem Titel genau ein Block
     folgt (auf Kursseiten überall): Dann steht beides in Zeile 1, und diese
     Zeile ist so hoch wie der Block, Sticky bleibt also wirksam. Mit mehreren
     Blöcken bräuchte der Titel die 40 Zeilen der allgemeinen Regel. */
  :is(.seite--kurs, .seite--lernpfad, .seite--skilllab) .inhalt section:has(> .abschnitt__titel:first-child + :last-child) > .abschnitt__titel {
    grid-row: 1;
    align-self: baseline;
  }

  /* Ausnahme Kartenraster (etwa „Laufende Projekte“): Die erste Textzeile
     einer Karte liegt unter ihrem Bild — auf der Grundlinie stünde der Titel
     mitten neben dem Bild (239 px tief, seit Folk4 ein Bild hat). Hier
     schlägt er oben an, bündig mit der Oberkante der Karten. */
  :is(.seite--kurs, .seite--lernpfad, .seite--skilllab) .inhalt section:has(> .abschnitt__titel:first-child + .raster:last-child) > :is(.abschnitt__titel, .raster) {
    align-self: start;
  }

  :is(.seite--kurs, .seite--lernpfad, .seite--skilllab) .inhalt section:has(> .abschnitt__titel:first-child + :last-child) > :last-child {
    align-self: baseline;
  }

  /* Lernpfad-Übersicht: Die Matrix braucht jede Spalte, deshalb steht der
     Abschnittstitel über dem Inhalt statt in der Randspalte, und Matrix wie
     Karten laufen über die volle Breite. */
  .seite--lernpfade .inhalt section:has(> .abschnitt__titel) {
    grid-template-columns: minmax(0, 1fr);
  }

  .seite--lernpfade .inhalt section:has(> .abschnitt__titel) > .abschnitt__titel {
    grid-row: auto;
    position: static;
    margin-block-end: var(--luft-eng);
  }

  .seite--lernpfade .inhalt section:has(> .abschnitt__titel) > :not(.abschnitt__titel) {
    grid-column: 1;
  }
}

/* =========================================================================
   Bänder über die volle Fensterbreite

   Ein durchgehend weißes Blatt hat keine Ereignisse. Zwei Sorten Band
   brechen die Fläche: ein invertiertes und ein Rasterfeld.
   ========================================================================= */

.band {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Gleiches Kastenmodell wie .inhalt, damit die linke Kante sitzt */
.band__innen {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.band--invers {
  background: var(--band-grund);
  color: var(--band-schrift);
  padding-block: var(--luft-weit);
  margin-block: var(--luft-weit);

  /* Linien und gedämpfter Text müssen sich mitdrehen, sonst zeichnen sie
     Schwarz auf Schwarz.

     Die 74 % beim gedämpften Ton sind ausgerechnet, nicht gegriffen: Er
     liegt hier auf dem Grund des Bandes, also auf der Tinte statt auf dem
     Papier. Bei 62 % — dem Wert, der zu reinem Schwarz und #0c0c0c passte —
     fällt er mit den jetzigen Tönen auf 6,1:1 im hellen und 4,9:1 im dunklen
     Modus. 74 % ist der niedrigste Anteil, bei dem beide Richtungen 7:1
     halten (7,97:1 und 7,45:1); mehr würde ihn unnötig an die volle
     Textfarbe heranziehen. */
  --linie:      color-mix(in srgb, var(--band-schrift) 85%, transparent);
  --linie-fein: color-mix(in srgb, var(--band-schrift) 30%, transparent);
  --gedaempft:  var(--band-gedaempft-fest,
                    color-mix(in srgb, var(--band-schrift) 74%, var(--band-grund)));
  --ueberschrift: var(--band-schrift);
}

.band--invers a { color: inherit; }

/* Das Band bringt seinen Abstand schon mit — der erste Abschnitt darin
   darf keinen zweiten oben drauflegen. */
.band--invers > .band__innen > section:first-child { margin-block-start: 0; border-block-start: 0; }

.band--invers .knopf { border-color: currentColor; }
.band--invers .knopf:hover { background: var(--band-schrift); color: var(--band-grund); }


/* =========================================================================
   Asymmetrische Bühne

   Der Titel darf über die volle Breite laufen, der Text nicht. Die leere
   rechte Hälfte ist Absicht, kein Versehen.
   ========================================================================= */

@media (min-width: 60rem) {
  .buehne__unten {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: var(--gasse);
    align-items: stretch;
  }

  .buehne__spalte:first-of-type { max-width: 34ch; }
  .buehne__spalte { display: flex; flex-direction: column; }
  .buehne__spalte > .bild { flex: 1; }
  .buehne__spalte > .bild img { height: 100%; object-fit: cover; }

  /* Der Teaser gehört dicht an den Titel; die Luft kommt erst darunter.
     Das Zeilenmaß von 60 % setzt base.css. */
  .buehne__claim { grid-column: 1 / -1; }
}

/* Der Fuß ist ein Band, kein Anhang: die Seite endet auf einer Fläche. */
.fuss.band--fuss {
  border-block-start: 0;
  margin-block: 3rem 0;
  padding-block: 2.25rem 3rem;
  padding-inline: 0;
}

.fuss.band--fuss .fuss__titel { color: var(--ueberschrift); }
.fuss.band--fuss .fuss__hinweis { color: var(--gedaempft); }

/* Das Herz hinter dem Fußhinweis.

   display: inline-block ist nicht Zierde, sondern Notwendigkeit: Der Reset
   in base.css setzt `img, svg, video { display: block }`, und ein Blockkasten
   beginnt eine eigene Zeile — das Herz stand dadurch unter dem Text statt
   dahinter, auch bei 1344 px freier Breite.

   vertical-align nach unten, weil das optische Zentrum eines Herzens tiefer
   liegt als seine Kastenmitte. Die Größe folgt der Schrift (em statt rem),
   die Farbe über currentColor. */
.herz {
  display: inline-block;
  inline-size: 1.05em;
  block-size: 1.05em;
  vertical-align: -0.18em;
  margin-inline-start: 0.35em;
}

/* Der Hinweis bricht nicht zwischen Text und Herz um. Ohne Zusicherung wäre
   das riskant — hier nicht: Die Regel greift nur, wenn footer.php das Herz
   gesetzt hat, und das tut es ausschließlich bei der einen kurzen
   Formulierung. */
.fuss__hinweis--herz { white-space: nowrap; }

/* =========================================================================
   Wartung

   Die Wartungsseite (snippets/wartung.php) steht für sich: Bildmarke,
   Überschrift, ein Satz, die Adresse — auf dem Grund der Seite, links
   bündig wie die Unterseiten. Der Hinweis darüber erscheint nur für
   Angemeldete, solange die Wartung an ist, als schmales invertiertes Band.
   ========================================================================= */

.wartung {
  max-width: 46rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--luft);
  padding: var(--luft-weit) var(--gasse);
}

.wartung .wortmarke { margin: 0 0 var(--luft); }
.wartung .titel { margin: 0; }
.wartung__text { font-size: var(--basis); }
.wartung__kontakt { margin: 0; font-family: var(--schrift-daten); font-size: var(--klein); }

.wartungshinweis {
  margin: 0;
  padding: 0.45rem var(--gasse);
  background: var(--tinte);
  color: var(--papier);
  font-family: var(--schrift-daten);
  font-size: var(--mikro);
}

.wartungshinweis a { color: inherit; margin-inline-start: 0.5em; }