/*
 * seiten.css – Profil, Rechtstext, Fehlende Seite, Archiv (docs/ENTWURF.md 4.4–4.7)
 *
 * Inhalt: Gemeinsames · Profil (Seitenkopf, Bild und Text, Datenliste,
 * Leistungsliste) · Rechtstext (mit Textabschnitt) · Fehlende Seite · Archiv
 *
 * Umbrüche wie in basis.css: breit ≥ 1100 px · mittel 700–1099 px · schmal < 700 px.
 * Mittel teilt das Raster in Drittel statt in Viertel (Linien 1 · 5, wie die
 * Projektzeilen), schmal steht alles untereinander.
 */

/* ------------------------------------------------------------------------
   Gemeinsames
   ------------------------------------------------------------------------ */

:root {
  /* --abstand-block, --kappe-m und --kappe-xl stehen in basis.css,
     weil auch startseite.css sie braucht. */

  /* Zeilenlänge im Fließtext: 60 bzw. 62 Zeichen. Die Einheit ch misst die
     Null, und die ist in der Söhne .623 em breit: 62ch wären 618 px und damit
     rund 87 Zeichen. Gemessen am Text der Seite läuft ein Zeichen im Mittel
     auf .445 em (Leerzeichen eingerechnet), daraus die Breite. */
  --zeichen: .445em;
  --mass-60: calc(60 * var(--zeichen));
  --mass-62: calc(62 * var(--zeichen));
}

/* ------------------------------------------------------------------------
   Profil (4.5)
   ------------------------------------------------------------------------ */

/* Seitenkopf: Überschrift in Spalte 1–8 */

.seitenkopf {
  padding-top: var(--abstand-sektion);
}

.seitenkopf__titel {
  grid-column: 1 / span 8;
  font-size: var(--t-xl);
  line-height: var(--zh-xl);
  letter-spacing: var(--lw-xl);
  text-wrap: balance;
}

/* Bild und Text: Bild in Spalte 1–4 (Zelle 4:5), Text in Spalte 7–11 */

.bild-text {
  align-items: start;
  margin-top: var(--abstand-block);
}

.bild-text__bild {
  grid-column: 1 / span 4;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--flaeche);
}

/* Die Zelle gibt das Verhältnis vor, das Medium füllt sie. */
.bild-text__bild > .medium {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

/* Die Versalien der ersten Zeile schließen mit der Oberkante des Bildes ab. */
.bild-text__text {
  grid-column: 7 / span 5;
  margin-top: calc(-1 * var(--kappe-m));
}

.bild-text--ohne-bild .bild-text__text {
  margin-top: 0;
}

/* Mit Überschrift (Profil): Sie steht in derselben Spalte wie der Fließtext
   und beginnt wie er auf Linie 7. Das Bild läuft links über beide Zeilen. Die
   Versalien der Überschrift schließen mit der Oberkante des Bildes ab. */
.bild-text--mit-titel {
  margin-top: var(--abstand-sektion);
  grid-template-rows: auto 1fr;
}

.bild-text--mit-titel .bild-text__bild {
  grid-row: 1 / span 2;
}

.bild-text__titel {
  grid-column: 7 / -1;
  grid-row: 1;
  margin-top: calc(-1 * var(--kappe-xl));
  font-size: var(--t-xl);
  line-height: var(--zh-xl);
  letter-spacing: var(--lw-xl);
  text-wrap: balance;
}

.bild-text--mit-titel .bild-text__text {
  grid-row: 2;
  margin-top: 40px;
}

.bild-text__text > * {
  max-width: var(--mass-60);
}

/* Absatzabstand = eine Zeile */
.bild-text__text > * + * {
  margin-top: calc(1em * var(--zh-m));
}

/* Datenliste: Begriff in Spalte 1–3, Wert in Spalte 4–9, Haarlinien über die
   volle Rasterbreite */

.datenliste {
  margin-top: var(--abstand-sektion);
}

.datenliste__zeile {
  position: relative;
  padding-block: 12px;
}

.datenliste__linie,
.leistungsliste__linie {
  display: block;
  height: 1px;
  background: var(--linie);
}

.datenliste__zeile .datenliste__linie,
.leistungsliste__zeile .leistungsliste__linie {
  position: absolute;
  top: 0;
  right: var(--rand);
  left: var(--rand);
}

.datenliste__linie--schluss,
.leistungsliste__linie--schluss {
  margin-inline: var(--rand);
}

.datenliste__begriff {
  grid-column: 1 / span 3;
  color: var(--text-2);
}

.datenliste__wort {
  display: block;
}

.datenliste__wert {
  grid-column: 4 / span 6;
}

/* Kennzahlen (Erfahrung): je Kennzahl eine Zeile, 4 px Abstand; die Zahl
   halbfett. tabular-nums verlangt gleich breite Ziffern – die Söhne-
   Testschrift hat keine (kein tnum), dort bleiben sie proportional. Sichtbar
   wird das nicht: modul/kennzahlen.js schreibt die Zahl um, solange die Zeile
   noch unsichtbar ist (vor dem Einblenden). */
.datenliste__kennzahl {
  display: block;
}

.datenliste__kennzahl + .datenliste__kennzahl {
  margin-top: 4px;
}

.datenliste__zahl {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Leistungsliste: Name in Spalte 1–3, Satz in Spalte 4–9 – reiner Text, ohne
   Link (die Leistungen der Startseite, ENTWURF 4.5). Der Satz steht in --text
   wie die Werte der Datenliste: Die Startseite zeigt ihn in --text-2 und hebt
   ihn erst beim Zeigen auf --text; ein Zeigen gibt es hier nicht. */

.leistungsliste {
  margin-top: var(--abstand-sektion);
}

.leistungsliste__etikett {
  grid-column: 1 / -1;
  margin-bottom: 12px;
  color: var(--text-2);
}

.leistungsliste__zeile {
  position: relative;
  align-items: start;
  row-gap: 4px;
  padding-block: 12px;
}

.leistungsliste__name {
  grid-column: 1 / span 3;
  font-weight: 600;
}

.leistungsliste__text {
  grid-column: 4 / span 6;
  max-width: var(--mass-60);
}

@media (max-width: 1099.98px) {
  .seitenkopf__titel {
    grid-column: 1 / span 10;
  }

  .bild-text__text,
  .bild-text__titel {
    grid-column: 5 / -1;
  }

  .datenliste__begriff,
  .leistungsliste__name {
    grid-column: 1 / span 4;
  }

  .datenliste__wert,
  .leistungsliste__text {
    grid-column: 5 / -1;
  }
}

@media (max-width: 699.98px) {
  .seitenkopf__titel {
    grid-column: 1 / -1;
  }

  .bild-text {
    row-gap: 24px;
  }

  .bild-text__bild,
  .bild-text__text,
  .bild-text__titel {
    grid-column: 1 / -1;
  }

  .bild-text__text,
  .bild-text--mit-titel .bild-text__text {
    margin-top: 0;
  }

  /* Schmal: erst die Überschrift, dann das Bild, dann der Text. */
  .bild-text--mit-titel .bild-text__bild,
  .bild-text--mit-titel .bild-text__titel,
  .bild-text--mit-titel .bild-text__text {
    grid-row: auto;
  }

  .bild-text__titel {
    order: -1;
    margin-top: 0;
  }

  /* „Schwerpunkte“ braucht fünf Spalten, „Kommunikationsdesign“ die übrigen sieben. */
  .datenliste__begriff {
    grid-column: 1 / span 5;
  }

  .datenliste__wert {
    grid-column: 6 / -1;
  }

  .leistungsliste__name,
  .leistungsliste__text {
    grid-column: 1 / -1;
  }
}

/* Sehr schmal: Begriff über dem Wert, damit kein Wort mitten bricht. */
@media (max-width: 359.98px) {
  .datenliste__begriff,
  .datenliste__wert {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------------
   Rechtstext (4.6)
   ------------------------------------------------------------------------ */

.rechtstext {
  align-items: start;
  padding-top: var(--abstand-sektion);
}

.rechtstext__titel {
  grid-column: 1 / span 3;
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: var(--zh-xl);
  letter-spacing: var(--lw-xl);
  text-wrap: balance;
  /* Ein langes Wort trennt sauber, statt mitten im Wort zu brechen. */
  hyphens: auto;
}

/* Die Versalien der ersten Textzeile hängen an der Versalhöhe des Titels. */
.rechtstext__inhalt {
  grid-column: 4 / span 6;
  margin-top: calc(var(--kappe-xl) - var(--kappe-m));
}

.rechtstext__stand {
  margin-top: 2.5em;
  color: var(--text-2);
}

@media (min-width: 1100px) {
  /* Der Titel bleibt stehen, mit 24 px Luft unter der fest stehenden Wortmarke
     (Rand 12 px + eine Zeile 20 px). */
  .rechtstext__titel {
    position: sticky;
    top: calc(12px + var(--t-m) * var(--zh-m) + 24px);
  }
}

@media (max-width: 1099.98px) {
  .rechtstext__titel {
    grid-column: 1 / span 4;
  }

  .rechtstext__inhalt {
    grid-column: 5 / -1;
  }
}

@media (max-width: 699.98px) {
  .rechtstext {
    row-gap: 32px;
  }

  .rechtstext__titel,
  .rechtstext__inhalt {
    grid-column: 1 / -1;
  }

  .rechtstext__inhalt {
    margin-top: 0;
  }
}

/* Textabschnitt: Fließtext aus dem Inhalt (p, h2–h4, ul, ol, a, strong) */

.textabschnitt > * {
  max-width: var(--mass-62);
}

/* Absatzabstand = eine Zeile */
.textabschnitt > * + * {
  margin-top: calc(1em * var(--zh-m));
}

.textabschnitt h2 {
  font-weight: 600;
}

.textabschnitt > * + h2 {
  margin-top: 2.5em;
}

/* Die Zwischenüberschrift gehört zum Text darunter: halbe Zeile Abstand. */
.textabschnitt > h2 + * {
  margin-top: calc(.5em * var(--zh-m));
}

.textabschnitt h3,
.textabschnitt h4 {
  color: var(--text-2);
}

.textabschnitt > h3 + *,
.textabschnitt > h4 + * {
  margin-top: 0;
}

/* Im Fließtext muss ein Link auch ohne Zeiger erkennbar sein. */
.textabschnitt a,
.bild-text__text a {
  text-decoration-line: underline;
}

.textabschnitt ul,
.textabschnitt ol {
  padding-left: 1.5em;
}

.textabschnitt ul {
  list-style: "–  ";
}

.textabschnitt ol {
  list-style: decimal;
}

.textabschnitt li + li {
  margin-top: calc(.25em * var(--zh-m));
}

/* ------------------------------------------------------------------------
   Fehlende Seite (4.7)
   ------------------------------------------------------------------------ */

.fehlende-seite {
  align-items: start;
  grid-template-rows: auto auto 1fr;
  padding-top: var(--abstand-sektion);
}

/* Film links in Spalte 1–4 (bei 1440 px rund 464 px, die Quelle hat 426 px),
   Text rechts daneben ab Linie 7, wie Bild und Text im Profil. */
.fehlende-seite__film {
  grid-column: 1 / span 4;
  grid-row: 1 / span 3;
  overflow: hidden;
  border-radius: var(--radius);
}

/* Titel und Satz in einer Größe: halbfett in Text, Buch in Text-2. */
.fehlende-seite__titel,
.fehlende-seite__text {
  grid-column: 7 / -1;
  font-size: var(--t-xl);
  line-height: var(--zh-xl);
  letter-spacing: var(--lw-xl);
  text-wrap: balance;
}

/* Die Versalien des Titels schließen mit der Oberkante des Films ab. */
.fehlende-seite__titel {
  margin-top: calc(-1 * var(--kappe-xl));
  font-weight: 600;
}

.fehlende-seite__text {
  color: var(--text-2);
}

.fehlende-seite__knopf {
  grid-column: 7 / -1;
  justify-self: start;
  margin-top: 48px;
}

/* Mittel: Film in der linken Hälfte, Text in der rechten. */
@media (max-width: 1099.98px) {
  .fehlende-seite__film {
    grid-column: 1 / span 6;
  }
}

/* Schmal: Film, darunter der Text. */
@media (max-width: 699.98px) {
  .fehlende-seite__titel,
  .fehlende-seite__text,
  .fehlende-seite__film,
  .fehlende-seite__knopf {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .fehlende-seite__titel {
    margin-top: 32px;
  }

  .fehlende-seite__knopf {
    margin-top: 32px;
  }
}

/* ------------------------------------------------------------------------
   Archiv (4.4)
   Der Seitentitel beginnt wie bei Profil, Rechtstext und Fehlender Seite
   var(--abstand-sektion) unter der Kopfzeile. Titel, Anzahl und die Spalten
   der Zeilen liegen auf den Linien 1 · 4 · 7 · 10.
   ------------------------------------------------------------------------ */

/* Seitenkopf: Titel in Spalte 1–6, die Anzahl in Spalte 10–12 */

.archiv__kopf {
  align-items: start;
  padding-top: var(--abstand-sektion);
}

.archiv__titel {
  grid-column: 1 / span 8;
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: var(--zh-xl);
  letter-spacing: var(--lw-xl);
  text-wrap: balance;
}

/* Die Versalien der Anzahl hängen an der Versalhöhe des Titels. */
.archiv__anzahl {
  grid-column: 9 / -1;
  margin-top: calc(var(--kappe-xl) - var(--kappe-m));
  color: var(--text-2);
}

/* Filter: eine Reihe Textlinks, der aktive in Text und unterstrichen. Bewusst
   dicht gesetzt und nicht auf die Viertel-Linien verteilt: Dort läse sich die
   Reihe wie die Spaltenköpfe der Liste darunter. */

.archiv__filter {
  margin-top: var(--abstand-block);
  margin-bottom: 12px;
}

.archiv__filter ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding-inline: var(--rand);
}

.archiv__filter a {
  display: inline-block;
  color: var(--text-2);
  transition: color .1s linear;
}

.archiv__filter a[aria-current="page"],
.archiv__filter a:focus-visible {
  color: var(--text);
}

@media (hover: hover) {
  .archiv__filter a:hover {
    color: var(--text);
  }
}

/* Liste: Die Haarlinie gehört zum Listenpunkt, der Link darin ist die Zeile.
   So bleibt die Linie stehen, wenn die Zeile zurücktritt. */

.archiv__posten,
.archiv__fuss {
  position: relative;
}

.archiv-zeile__linie,
.archiv__linie {
  position: absolute;
  top: 0;
  right: var(--rand);
  left: var(--rand);
  height: 1px;
  background: var(--linie);
}

.archiv-zeile {
  align-items: start;
  padding-block: 12px;
  transition: opacity .15s linear;
}

/* Wie in den Projektzeilen der Startseite sitzt der Fokusring um den Namen. */
.archiv-zeile:focus-visible {
  outline: none;
}

.archiv-zeile:focus-visible .archiv-zeile__name {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

/* Schmal und mittel: Name und Jahr in einer Zeile, Leistungen darunter,
   darunter drei Kacheln auf den Drittel-Linien 1 · 5 · 9. */

.archiv-zeile__name {
  grid-row: 1;
  grid-column: 1 / span 8;
  justify-self: start;
  font-weight: 600;
}

.archiv-zeile__jahr {
  grid-row: 1;
  grid-column: 9 / -1;
  color: var(--text-2);
}

.archiv-zeile__leistungen {
  grid-row: 2;
  grid-column: 1 / span 8;
  color: var(--text-2);
}

/* Erster Satz der Beschreibung unter dem Namen: nur breit (ENTWURF 4.4) */
.archiv-zeile__satz {
  display: none;
  color: var(--text-2);
}

/* „Coming soon“: Zeile ohne Verknüpfung (div statt a), Zeigeretikett „Coming soon“ */
.archiv-zeile--bald {
  cursor: default;
}

/* Unter 1100 px bleiben es drei Kacheln, die vierte und fünfte entfallen */
.archiv-zeile__vorschau:nth-child(n + 4) {
  display: none;
}

.archiv-zeile__bilder {
  grid-row: 3;
  grid-column: 1 / -1;
  display: flex;
  gap: var(--spalt);
  align-items: flex-start;
  margin-top: 12px;
}

.archiv__leer {
  grid-column: 1 / -1;
  padding-block: 12px;
  color: var(--text-2);
}

/* Alle Kacheln einer Zeile gleich hoch, jede im Seitenverhältnis ihres
   Mediums (--ar aus teile/archiv_zeile.php): flex-grow = Verhältnis bei
   Basis 0, dazu aspect-ratio – wie die Voransichten der Startseite. So steht
   der Ausschnitt im Flug (ENTWURF 4.3, 4.4). Zwei Klassen, damit die Regel
   vor .vorschau (4:5, projektansicht.css) gilt. */
.archiv-zeile .archiv-zeile__vorschau {
  flex: calc(var(--ar, .8)) 1 0;
  min-width: 0;
  aspect-ratio: var(--ar, 4 / 5);
}

@media (min-width: 1100px) {
  .archiv__titel {
    grid-column: 1 / span 6;
  }

  .archiv__anzahl {
    grid-column: 10 / span 3;
  }

  /* Name (darunter der erste Satz) · Leistungen · Jahr · fünf Kacheln von je einer Spalte */
  .archiv-zeile__name,
  .archiv-zeile__leistungen,
  .archiv-zeile__jahr,
  .archiv-zeile__bilder {
    grid-row: 1;
  }

  /* Die Versalien der Textzeile schließen mit der Oberkante der Kacheln ab. */
  .archiv-zeile__name,
  .archiv-zeile__leistungen,
  .archiv-zeile__jahr {
    margin-top: calc(-1 * var(--kappe-m));
  }

  .archiv-zeile__name {
    grid-column: 1 / span 3;
  }

  /* Drei Reihen: Name, Satz, Rest – die Kacheln spannen alle drei, der Rest
     (1fr) nimmt ihre Höhe auf, so steht der Satz direkt unter dem Namen. */
  .archiv-zeile {
    grid-template-rows: auto auto 1fr;
  }

  .archiv-zeile__satz {
    display: block;
    grid-row: 2;
    grid-column: 1 / span 3;
    margin-top: 4px;
  }

  .archiv-zeile__leistungen {
    grid-column: 4 / span 3;
  }

  .archiv-zeile__jahr {
    grid-column: 7;
  }

  /* Die fünf Kacheln in Spalte 8–12, je eine Spalte breit. */
  .archiv-zeile__bilder {
    grid-row: 1 / span 3;
    grid-column: 8 / span 5;
    margin-top: 0;
  }

  .archiv-zeile__vorschau:nth-child(n + 4) {
    display: block;
  }

  /* Hat ein Projekt weniger als fünf Medien, bleibt je Kachel eine Spalte:
     die Reihe wird so breit wie ihre Kacheln, nicht die Kacheln so breit wie
     die Reihe (sonst wären drei Kacheln höher als fünf). */
  .archiv-zeile__bilder:has(> :last-child:nth-child(1)) {
    grid-column: 8 / span 1;
  }

  .archiv-zeile__bilder:has(> :last-child:nth-child(2)) {
    grid-column: 8 / span 2;
  }

  .archiv-zeile__bilder:has(> :last-child:nth-child(3)) {
    grid-column: 8 / span 3;
  }

  .archiv-zeile__bilder:has(> :last-child:nth-child(4)) {
    grid-column: 8 / span 4;
  }
}

/* Die Zeile unter dem Zeiger bleibt, die anderen treten zurück. */
@media (hover: hover) {
  .archiv__liste:hover .archiv-zeile:not(:hover) {
    opacity: .35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .archiv-zeile,
  .archiv__filter a {
    transition: none;
  }
}