/* =========================================================================
 * blog.css — die Leseflaeche.
 *
 * WARUM EINE EIGENE DATEI UND KEIN BLOCK IN site.css
 * ---------------------------------------------------
 * site.css baut eine Verkaufsseite: grosse Ueberschriften, Karussells,
 * Preistafeln. Ein Artikel hat eine einzige Aufgabe, die dort nirgends
 * vorkommt — dass jemand zwei Bildschirmseiten Text am Stueck liest, ohne
 * muede zu werden. Die Regeln dafuer (Zeilenlaenge, Durchschuss, Abstand
 * zwischen Absatz und Zwischentitel) gehoeren nicht zwischen die Preiskarten.
 *
 * WAS HIER *NICHT* PASSIERT
 * -------------------------
 * Keine neue Schrift, keine neuen Farben. Das Haus hat genau eine Schrift
 * (General Sans, vier Schnitte plus echte Kursive) und sechs Abschnittsfarben.
 * Der Blog nimmt `--acc-about` — dieselbe Farbe wie „Ueber mich", weil beides
 * dieselbe Stimme ist: ein Mensch, der etwas erzaehlt. Eine siebte Farbe waere
 * eine Behauptung, dass hier etwas Anderes beginnt.
 *
 * DAS EINE MERKMAL
 * ----------------
 * Die Randnotizen in `Caveat` (s. `.bl-rand`). Dieselbe Handschrift, die im
 * „Hey," der Ueber-mich-Seite steht. Ein Journal ist ein Heft mit Notizen am
 * Rand — der Blog zitiert diese Geste, statt sich eine auszudenken. Alles
 * andere bleibt bewusst still.
 * ========================================================================= */

:root {
  /* Die Leseflaeche ist enger als die Seite: ~66 Zeichen, die klassische
     Zeilenlaenge. Breiter, und das Auge findet den Zeilenanfang nicht mehr. */
  --bl-mass: 37rem;
  /* Der linke Rand traegt die Notizen. Unter 1100 px gibt es ihn nicht mehr
     (s. Medienabfrage ganz unten) — dann ruecken sie in den Text. */
  --bl-rand-breite: 13rem;
  --bl-akzent: var(--acc-about);
}

/* ---------- gemeinsamer Rahmen ---------------------------------------- */
.bl-wrap { padding: clamp(28px, 6vw, 72px) 0 clamp(60px, 10vw, 120px); }
.bl-mitte { width: min(var(--bl-mass), calc(100% - 2 * clamp(20px, 5vw, 40px))); margin-inline: auto; }

.bl-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bl-akzent); margin-bottom: 14px;
}

/* ---------- Uebersicht -------------------------------------------------- */
.bl-kopf { margin-bottom: clamp(36px, 6vw, 64px); }
.bl-kopf h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 5.4vw, 52px); letter-spacing: -0.03em; line-height: 1.06;
  color: var(--ink); text-wrap: balance;
}
.bl-kopf p {
  margin-top: 14px; font-size: clamp(15px, 1.7vw, 17px); line-height: 1.65;
  color: var(--dim); max-width: 34rem;
}

/* ⚠️ EINE LISTE, KEIN KACHELRASTER. Kacheln versprechen Gleichrangigkeit und
   brauchen Bilder, die es hier nicht gibt; bei sechs Stuecken sieht ein Raster
   ausserdem leer aus und bei sechzig unuebersichtlich. Eine Liste mit
   Haarlinien ist ein Inhaltsverzeichnis — sie skaliert in beide Richtungen. */
.bl-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2, var(--line)); }
.bl-eintrag { border-bottom: 1px solid var(--line-2, var(--line)); }
.bl-eintrag > a {
  display: block; padding: clamp(22px, 3.2vw, 32px) 0;
  text-decoration: none; color: inherit;
  transition: opacity 0.16s ease;
}
.bl-eintrag > a:hover { opacity: 0.72; }
.bl-eintrag > a:hover .bl-titel { color: var(--bl-akzent); }
.bl-meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint);
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.bl-meta span + span::before { content: "\00b7"; margin-right: 10px; color: var(--faint); }
.bl-titel {
  margin-top: 10px; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(21px, 2.8vw, 27px); letter-spacing: -0.02em; line-height: 1.22;
  color: var(--ink); text-wrap: balance; transition: color 0.16s ease;
}
.bl-lede { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--dim); }

/* ---------- Artikel ----------------------------------------------------- */
.bl-artikel h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4.8vw, 46px); letter-spacing: -0.03em; line-height: 1.08;
  color: var(--ink); text-wrap: balance;
}
.bl-artikel .bl-meta { margin-top: 18px; }
/* Der Vorspann steht groesser und leiser als der Text — er ist die Bruecke
   zwischen Ueberschrift und erstem Absatz, nicht der erste Absatz selbst. */
.bl-vorspann {
  margin-top: 22px; font-size: clamp(17px, 2vw, 19.5px); line-height: 1.6;
  color: var(--dim); text-wrap: pretty;
}
.bl-trenner { margin: clamp(30px, 5vw, 44px) 0; height: 1px; background: var(--line-2, var(--line)); border: 0; }

.bl-text { font-size: 18.5px; line-height: 1.72; color: var(--ink); text-wrap: pretty; }
.bl-text p { margin: 0 0 1.15em; }
.bl-text > *:last-child { margin-bottom: 0; }
.bl-text h2 {
  margin: 2.1em 0 0.6em; font-family: var(--font-display); font-weight: 650;
  font-size: clamp(22px, 2.9vw, 28px); letter-spacing: -0.02em; line-height: 1.25;
  color: var(--ink); text-wrap: balance;
}
.bl-text h3 {
  margin: 1.8em 0 0.5em; font-family: var(--font-display); font-weight: 600;
  font-size: 19px; letter-spacing: -0.01em; color: var(--ink);
}
.bl-text a { color: var(--bl-akzent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--bl-akzent) 40%, transparent); transition: border-color 0.14s; }
.bl-text a:hover { border-bottom-color: var(--bl-akzent); }
.bl-text b, .bl-text strong { font-weight: 600; }
.bl-text ul, .bl-text ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.bl-text li { margin-bottom: 0.45em; }
.bl-text li::marker { color: var(--faint); }
.bl-text code {
  font-size: 0.88em; padding: 2px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink);
}

/* ---------- Das eine Merkmal: Randnotizen ------------------------------ */
/* ⚠️ `position: absolute` in einem `position: relative`-Absatzfluss, NICHT
   float: ein Float schoebe den Text ein und zerstoerte die Zeilenlaenge, um
   die es hier gerade geht. So haengt die Notiz neben dem Satz, auf den sie
   sich bezieht, und der Text merkt nichts davon. */
.bl-text { position: relative; }
.bl-rand {
  font-family: 'Caveat', var(--font-display); font-weight: 600;
  font-size: 19px; line-height: 1.35; color: var(--bl-akzent);
  position: absolute; left: calc(-1 * var(--bl-rand-breite) - 2.5rem);
  width: var(--bl-rand-breite); text-align: right;
  margin-top: 0.3em;
  transform: rotate(-1.2deg);          /* von Hand geschrieben, nicht gesetzt */
}

/* ---------- Tabelle ----------------------------------------------------- */
/* Haarlinien statt Rahmen, Kopfzeile als Versalien — dieselbe Sprache wie die
   Vergleichstabelle der Preisseite. */
.bl-tabelle-huelle { overflow-x: auto; margin: 1.6em 0; }
.bl-tabelle { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.bl-tabelle th, .bl-tabelle td { padding: 11px 14px 11px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2, var(--line)); }
.bl-tabelle thead th {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); font-weight: 500;
  border-bottom-color: var(--ink);
}
.bl-tabelle tbody th { font-weight: 500; color: var(--dim); }
.bl-tabelle td:last-child, .bl-tabelle th:last-child { padding-right: 0; }
.bl-stand {
  margin-top: -0.6em; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.06em; color: var(--faint); line-height: 1.5;
}

/* ---------- Kasten am Ende --------------------------------------------- */
.bl-tuer {
  margin-top: clamp(36px, 6vw, 56px); padding: clamp(22px, 3.5vw, 30px);
  border: 1px solid var(--line-2, var(--line)); border-radius: 16px;
  background: var(--surface);
}
.bl-tuer h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 650; font-size: 20px; letter-spacing: -0.015em; color: var(--ink); }
.bl-tuer p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; color: var(--dim); }
.bl-tuer .chip { text-decoration: none; }

.bl-zurueck { display: inline-block; margin-top: clamp(30px, 5vw, 48px); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); text-decoration: none; }
.bl-zurueck:hover { color: var(--ink); }

/* ---------- schmal ------------------------------------------------------ */
/* Unter 1100 px ist links kein Platz mehr fuer eine Spalte neben dem Text.
   Die Notiz wird dann zu einem eingerueckten Block IM Fluss — sie behaelt ihre
   Handschrift und ihre Farbe, verliert nur ihren Platz am Rand. */
@media (max-width: 1100px) {
  .bl-rand {
    position: static; width: auto; text-align: left; transform: none;
    display: block; margin: 1.3em 0; padding-left: 16px;
    border-left: 2px solid color-mix(in srgb, var(--bl-akzent) 45%, transparent);
    font-size: 20px;
  }
}
@media (max-width: 640px) {
  .bl-text { font-size: 17.5px; line-height: 1.68; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-eintrag > a, .bl-titel, .bl-text a { transition: none; }
}