/* ─────────────────────────────────────────────────────────────
   text.css — wie eine Leseseite aussieht.

   Eingebunden von den 37 Seiten, die ein durchgehender Text sind:
   Artikel, Archiv, Projekte, 404, Impressum, Datenschutz. NICHT von
   der Startseite — die ist anders gebaut und trägt ihr Layout in
   eigenen Containern.

   Setzt site.css voraus und muss NACH ihm eingebunden werden.

   Am 22.09.2026 aus site.css herausgelöst. Am Aussehen ändert das
   nichts; es trennt nur, was jede Seite IST, von dem, wie eine
   Leseseite AUSSIEHT.
   ───────────────────────────────────────────────────────────── */

/* ── Leiste oben: die Anordnung ────────────────────────────── */

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 6rem;
}

nav .back-link {
  text-decoration: none;
  color: var(--gray-dark);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--transition);
}
nav .back-link:hover { color: var(--black); }

/* ── Der Textkörper ────────────────────────────────────────── */

main {
  max-width: var(--w-read);
  margin: 0 auto;
  padding: 5rem 2rem;
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

p {
  color: var(--gray-dark);
  margin-bottom: 1.25rem;
  /* 17px. Zusammen mit der schmaleren Spalte (--w-read) steuern beide
     Werte dieselbe Größe: die Zeichen je Zeile. Einzeln geändert sieht
     jeder für sich falsch aus — die Spalte allein macht die Zeile zu
     kurz, die Schrift allein zu lang. */
  font-size: 1.0625rem;
}

.back-btn {
  text-decoration: none;
  color: var(--gray-dark);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--transition);
}
.back-btn:hover { color: var(--black); }

/* ── Streifen unten: die Anordnung ─────────────────────────── */

footer {
  padding: 2rem 6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Schmale Fenster ───────────────────────────────────────────
   900px, und diese Zahl gehört mit EINER anderen zusammen: dem
   900er-Block in index.html. Beide steuern dasselbe Gerüst — die
   Leiste oben und den Streifen unten —, und das muss auf allen
   Seiten gleichzeitig umbrechen. CSS erlaubt in einer Medienabfrage
   keine Variablen, deshalb steht die Zahl zweimal da.

   Vorher stand hier 768. Der Unterschied war sichtbar: Zwischen 769
   und 899 Pixeln hatte die Startseite ihr Logo 32px vom Rand, jede
   andere Seite 96px — beim Seitenwechsel sprang es um 64 Pixel.

   NICHT dazu gehören die 768er in blog/index.html und
   projekte/index.html. Die folgen ihrem INHALT, nicht dem Gerüst:
   Das dreispaltige Raster des Archivs trägt bis 768 (der längste
   Titel passt bei 780px noch auf eine Zeile), und das Kartenpolster
   der Projektseite ist unkritisch. Wer sie beim nächsten Mal
   „mitvereinheitlicht", klappt das Raster 132px zu früh um. */

@media (max-width: 900px) {
  nav { padding: 1.5rem 2rem; }
  footer { padding: 2rem; flex-direction: column; gap: 1rem; text-align: center; }
}