/* ============================================================
   Ergänzungen zum übernommenen Stylesheet

   Bewusst eine eigene Datei: website.css stammt unverändert aus
   dem ursprünglichen Bauvorgang. Würde je neu erzeugt werden,
   bliebe alles hier erhalten — in der generierten Datei wäre es
   verloren.

   Enthält nur, was die Website vorher nicht hatte: das Archiv,
   den Verweis darauf, das sanfte Scrollen der Lesetexte und den
   Ersatz für das füllende Bild von next/image.
   ============================================================ */

/* ── Archiv ─────────────────────────────────────────────── */

.archiv {
  min-height: 100svh;
  padding-block: clamp(3rem, 7.6vw, 6.875rem) clamp(4rem, 12vh, 7rem);
  background: var(--bg);
  color: var(--fg);
}

/* Logo links, Zurück rechts — auf einer Linie, mit demselben Abstand
   nach unten wie das Lockup auf der Essayseite. */
.archiv-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

.archiv-logo {
  display: block;
}

.archiv-wortmarke {
  width: clamp(8rem, 11.95vw, 10.75rem);
  height: auto;
  display: block;
}

.archiv-zurueck {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7em;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out);
}

.archiv-zurueck:hover,
.archiv-zurueck:focus-visible {
  color: var(--fg);
}

.archiv-zurueck span[aria-hidden] {
  transition: transform var(--dur-base) var(--ease-signet);
}

.archiv-zurueck:hover span[aria-hidden] {
  transform: translateX(-3px);
}

.archiv-titel {
  margin-block-start: clamp(2.5rem, 5.7vw, 5.125rem);
}

.archiv-headline {
  margin-block-start: 50px;
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -0.02em;
  max-width: 17em;
  text-wrap: balance;
}

/* Die Liste selbst erbt ihre Gestaltung von der Essay-Section — dieselben
   Klassen, dieselben Trennlinien. Hier steht nur der Abstand darüber. */
.archiv .Essay-module__-57xlq__list {
  margin-block-start: clamp(3rem, 6.7vw, 6rem);
}

/* ── Verweis aufs Archiv, unter den drei Beiträgen ──────── */

.archiv-verweis {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7em;
  margin-block-start: var(--space-m);
  padding-block-end: 0.25em;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition:
    background-size var(--dur-slow) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.archiv-verweis:hover,
.archiv-verweis:focus-visible {
  color: var(--fg);
  background-size: 100% 1px;
}

.archiv-verweis span[aria-hidden] {
  transition: transform var(--dur-base) var(--ease-signet);
}

.archiv-verweis:hover span[aria-hidden] {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .archiv-zurueck,
  .archiv-verweis,
  .archiv-zurueck span[aria-hidden],
  .archiv-verweis span[aria-hidden] {
    transition: none;
  }
  .archiv-zurueck:hover span[aria-hidden],
  .archiv-verweis:hover span[aria-hidden] {
    transform: none;
  }
}

/* Der Verweis steht in einem eigenen Absatz, damit er nicht in der
   Grundlinie des letzten Eintrags klebt. */
.archiv-verweis-zeile {
  margin: 0;
}

/* ── Sanftes Scrollen auf den Lesetexten ────────────────── */

/* Die Klasse setzt das Skript, nicht das Markup: Ohne Skript bleibt es
   beim harten Sprung, was ohne die gedämpfte Radbewegung auch richtig
   ist. Betrifft nur Sprungmarken und Tastatur — das Rad dämpft das
   Skript selbst, weil `scroll-behavior` dort nicht greift. */
.sanft {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .sanft {
    scroll-behavior: auto;
  }
}

/* ── Füllendes Bild ─────────────────────────────────────── */

/* Was next/image mit `fill` als eingebetteten Stil gesetzt hat: im Rahmen
   liegen und ihn ganz ausfüllen. Der Zuschnitt (object-fit,
   object-position) steht bereits im übernommenen Stylesheet. */
.bild-fuellend {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Essay-Section: enger, wenn das Fenster niedrig ist ──── */

/*
   Der Abschnitt rastet ein. Was nicht ins Fenster passt, ist damit nicht
   „unten dran“, sondern unerreichbar — der Regler springt zum nächsten
   Abschnitt, nicht zum Rest dieses einen.

   Mit zwei Beiträgen passte er. Drei Beiträge und der Verweis aufs Archiv
   brauchen 927 px; auf einem Notebook mit 800 px Fensterhöhe fiele der Knopf
   heraus. Unterhalb von 950 px wird die Vertikale deshalb gestaucht.

   Die Grenze ist genau die Höhe, ab der es ohne Stauchung passt: Auf jedem
   Bildschirm, der Platz hat, greift hier KEINE Regel, und die abgenommene
   Gestaltung bleibt Zeichen für Zeichen dieselbe. Nur wo sie nicht mehr
   hinpasst, gibt sie nach.

   Bewusst nur dieser Abschnitt. Er ist der einzige, dessen Inhalt sich mit der
   Zahl der Beiträge ändert.
*/
@media (max-height: 950px) {
  /* Die Ersparnis von rund 130 px wird verteilt statt an einer Stelle
     abgezogen: Nähme man sie ganz aus dem Außenabstand, ginge der unter das
     Mindestmaß der Gestaltung (--space-xl) und der Abschnitt klebte am Rand. */
  #essay {
    padding-block: min(var(--section-pad), 12vh);
  }

  #essay .Essay-module__-57xlq__list {
    margin-block-start: min(110px, 9vh);
  }

  #essay .Essay-module__-57xlq__entry {
    padding-block: min(48px, 5vh) min(36px, 3.75vh);
  }

  #essay .archiv-verweis {
    margin-block-start: min(32px, 4vh);
  }
}

/* ── Hero: Anspruch so hoch wie die Wortmarke ────────────── */

/*
   Die beiden Zeilen rechts sollen zusammen so hoch stehen wie das Logo links
   daneben. Beide Kästen enden ohnehin auf derselben Linie — das Raster richtet
   unten aus —, es geht also allein um die Höhe.

   Gerechnet: Die Wortmarke ist 484 px breit und bei einem Seitenverhältnis von
   787,0152 : 67,3955 damit 41,44 px hoch. Der Anspruch trägt
   `text-box: trim-both cap alphabetic`, sein Kasten ist also
   Versalhöhe + ein Zeilenabstand = Schriftgrad × (0,71 + 1,22). Gleichgesetzt:
   41,44 / 1,93 = 21,47 px = 1,342 rem.

   Der vw-Anteil ist so gewählt, dass die Deckung ab etwa 1024 px Fensterbreite
   gilt — dort und darüber hat die Wortmarke ihre volle Breite. Darunter
   schrumpft die linke Spalte schnell; ihr exakt zu folgen ergäbe bei 780 px
   einen Schriftgrad von 10,6 px, und Lesbarkeit geht vor Proportion. Deshalb
   die untere Grenze.

   Nur ab 48rem, wo Logo und Anspruch nebeneinander stehen. Auf dem Telefon
   sitzt das Logo darüber, dort bleibt die abgenommene Größe.
*/
@media (min-width: 48rem) {
  .Hero-module__KTD73a__claim {
    font-size: clamp(0.875rem, 1.9vw, 1.342rem);
  }
}

/* ── Hero: der getippte Text auf die Grundlinie der Wortmarke ── */

/*
   Der Anspruch besteht aus zwei übereinanderliegenden Fassungen: einer
   unsichtbaren, die den Kasten offen hält (`ghost`), und der sichtbaren, die
   beim Tippen wächst (`typed`, absolut auf `inset: 0`).

   Der Kasten trägt `text-box: trim-both cap alphabetic` — er endet also auf der
   Grundlinie der letzten Zeile, und genau darauf richtet das Raster ihn mit der
   Wortmarke aus. Die unsichtbare Fassung sitzt damit richtig (gemessen:
   Grundlinie 801,00 gegen 800,91 der Wortmarke).

   Die sichtbare nicht: Sie wird gegen den BESCHNITTENEN Kasten positioniert,
   setzt ihren Text darin aber wieder mit vollem Zeilenkasten. Sie landete
   dadurch 5,35 px zu tief — der Text stand sichtbar unter der Wortmarke,
   während die Messung am Kasten Übereinstimmung meldete.

   Dieselbe Beschneidung auf der sichtbaren Fassung behebt das: Beide Fassungen
   werden nun gleich gesetzt. Gemessen danach: 0,09 px.

   NUR ab 48rem — genau dort, wo das übernommene Stylesheet den Kasten
   beschneidet. Auf dem Telefon tut es das nicht; ohne diese Bedingung stand
   der sichtbare Text dort 4,8 px neben dem unsichtbaren, und ich hätte auf
   dem Schreibtisch geradegerückt, was auf dem Telefon schief wurde. Ändert
   sich die Bedingung im Stylesheet, gehört sie hier mit geändert.
*/
@media (min-width: 48rem) {
  .Typewriter-module__dRRvUG__typed {
    text-box: trim-both cap alphabetic;
  }
}