/* ==========================================================================
   Abweichungen gegenueber stahl-fuehrung.de. Jede einzeln begruendet.
   design.css bleibt unberuehrt, damit der Vergleich mit dem Original moeglich
   bleibt (siehe style.css).
   ========================================================================== */

/* ---- Schriften -----------------------------------------------------------
   Im Astro-Projekt kamen sie ueber @fontsource-Importe. Ein Blocktheme hat
   keinen Bundler, also stehen die @font-face-Regeln hier. Weiterhin selbst
   ausgeliefert, kein Google-CDN (DSGVO).
   `font-display:swap`: Text erscheint sofort in der Ersatzschrift und wird
   nachtraeglich ersetzt. Ohne das bleibt der Kopf beim ersten Besuch kurz leer. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/outfit-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/outfit-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/outfit-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/outfit-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2")}

/* ---- Wortmarke -----------------------------------------------------------
   Neu: THOMAS [Rundmarke]. STAHL — die Rundmarke IST das C von Thomas C. Stahl.
   Vorher: STAHL [Portrait] FUEHRUNG.

   ⚠️ Der blaue Haarlinienrand des alten Abzeichens muss weg. Die neue Marke
   bringt ihren schwarzen C-Bogen selbst mit; ein zweiter Ring darum laesst das
   C wie einen Fehldruck aussehen. */
.brand-badge{border:none}

/* Der Punkt gehoert typografisch zum C („C. STAHL"), muss also dicht an die
   Rundmarke.
   ⚠️ Er darf KEIN eigenes Flex-Kind sein: `.brand` setzt gap:.7rem, und der
   Punkt bekaeme links und rechts diesen Abstand — er stand dann frei zwischen
   Marke und Wort und las sich als eigenes Zeichen. Deshalb steht er im selben
   Span wie „Stahl", und der negative Aussenabstand holt die halbe Luecke zurueck.
   Die Sperrung von .32em hinter dem Punkt bleibt stehen; sie ist hier richtig. */
.brand .brand-nachsatz{margin-left:-.35rem}

/* ---- Lesespalte fuer Beitraege und Seiten --------------------------------
   Das Astro-Projekt hatte keine freie Inhaltsseite: jede Seite war von Hand
   gebaut. Hier kommt der Inhalt aus dem Blockeditor und braucht eine eigene
   Spalte. Masse und Rhythmus sind die der Story-Kapitel (`.chapter`), damit
   Beitraege wie ein Teil derselben Seite gelesen werden und nicht wie ein
   angeflanschter Blog. */
.eintrag{padding-block:var(--s-4)}
.eintrag-kopf{max-width:44rem;margin:0 auto var(--s-3)}
.eintrag-datum{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.eintrag-kopf h1{
  font-family:var(--font-head);
  font-weight:600;
  font-size:clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  line-height:1.12;
  letter-spacing:-.015em;
  margin-block:.4em .2em;
}
.eintrag-inhalt{max-width:44rem;margin:0 auto}
.eintrag-inhalt > * + *{margin-top:var(--s-2)}
.eintrag-inhalt p,
.eintrag-inhalt li{
  color:var(--text-dim);
  font-size:clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height:1.75;
}
.eintrag-inhalt h2{
  font-family:var(--font-head);
  font-weight:600;
  font-size:clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  line-height:1.25;
  margin-top:var(--s-3);
  color:var(--text);
}
.eintrag-inhalt h3{
  font-family:var(--font-head);
  font-weight:600;
  font-size:1.15rem;
  margin-top:var(--s-3);
  color:var(--text);
}
.eintrag-inhalt a{color:var(--accent);border-bottom:1px solid rgba(var(--accent-rgb),.4)}
.eintrag-inhalt blockquote{
  border-left:2px solid rgba(var(--accent-rgb),.45);
  padding-left:var(--s-2);
  font-style:italic;
}
.eintrag-inhalt img{border-radius:10px;border:var(--hairline)}
.eintrag-inhalt ul,.eintrag-inhalt ol{padding-left:1.4em}
.eintrag-inhalt code{font-family:var(--font-mono);font-size:.9em}
.eintrag-inhalt pre{
  border:var(--hairline);
  border-radius:10px;
  padding:var(--s-2);
  overflow-x:auto;
}

/* ---- Liste der Beitraege -------------------------------------------------- */
.liste{padding-block:var(--s-4)}
.liste-kopf{max-width:44rem;margin:0 auto var(--s-3)}
.liste-eintraege{max-width:44rem;margin:0 auto;display:grid;gap:0}
.liste-eintrag{padding-block:var(--s-2);border-top:var(--hairline)}
.liste-eintrag:last-child{border-bottom:var(--hairline)}
.liste-eintrag h2{
  font-family:var(--font-head);
  font-weight:600;
  font-size:clamp(1.1rem, 1rem + .6vw, 1.4rem);
  line-height:1.3;
  margin-bottom:.35em;
}
.liste-eintrag h2 a{color:var(--text)}
.liste-eintrag h2 a:hover{color:var(--accent)}
.liste-eintrag p{color:var(--text-dim);font-size:.975rem;line-height:1.65}

/* Blaettern zwischen Seiten der Liste. */
.blaettern{max-width:44rem;margin:var(--s-3) auto 0;display:flex;gap:var(--s-2);justify-content:space-between}
.blaettern a{color:var(--accent)}