/* larahorstmann.com — editorial, deep ink ground with cream type
   Schriften selbst gehostet, keine Google Fonts, keine CDNs, kein Tracking.
   EB Garamond und IBM Plex Sans stehen unter der SIL Open Font License,
   die Lizenztexte liegen in assets/fonts. */

@font-face {
  font-family: "EB Garamond";
  src: url("fonts/eb-garamond-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/eb-garamond-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/eb-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --navy: #141c26;          /* Grundfläche, sehr dunkles, entsättigtes Blau */
  --navy-deep: #0e141c;     /* Fußzeile, tiefere Flächen */
  --navy-raised: #1d2836;   /* Eingabefelder, Karten, abgesetzte Flächen */
  --cream: #e6dfd0;         /* Fließtext */
  --cream-strong: #f1eade;  /* Überschriften */
  --muted:#aba396;         /* Sekundärtext, warmes Grau */
  --rule: rgba(230, 223, 208, 0.14);
  --rule-strong: rgba(230, 223, 208, 0.32);
  --measure: 34rem;

  /* Feste Größenleiter. Sieben Stufen, mehr gibt es nicht. */
  --fs-xs:   .78rem;   /* Rubriken, Datumszeilen, Feldbeschriftungen */
  --fs-s:    .92rem;   /* Bildunterschriften, Fußzeile, Nebentext */
  --fs-base: 1rem;     /* Fließtext */
  --fs-m:    1.2rem;   /* Vorspann, Zwischenüberschriften, Termine */
  --fs-l:    1.55rem;  /* Abschnittsüberschriften */
  --fs-xl:   clamp(1.75rem, 3.1vw, 2.3rem);   /* Seitenüberschrift, Aufmacher */
  --fs-name: clamp(2rem, 5.4vw, 3.8rem);      /* Namenszug */

  --serif: "EB Garamond", Cambria, Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --brass: #c2a06a;         /* sparsamer Akzent */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--navy); }

body {
  margin: 0;
  color: var(--cream);
  font-size: var(--fs-base);
  /* Weicher Lichtverlauf statt flacher Fläche: gibt dem Grund Tiefe,
     ohne dass ein Bild geladen werden muss. */
  background-color: var(--navy);
  background-image:
    radial-gradient(1400px 900px at 76% 6%, rgba(72, 96, 122, 0.50), rgba(72, 96, 122, 0) 60%),
    radial-gradient(1100px 800px at 4% 88%, rgba(46, 62, 82, 0.45), rgba(46, 62, 82, 0) 58%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* Sehr feine Körnung. Nimmt der Fläche das Glatte, ohne sichtbar zu rauschen. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .30;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
main, header, footer { position: relative; z-index: 2; }

a { color: var(--cream-strong); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
a:hover, a:focus-visible { border-bottom-color: var(--cream-strong); background: rgba(230, 223, 208, 0.06); }

:focus-visible { outline: 2px solid var(--cream-strong); outline-offset: 3px; }

.wrap { width: 100%; max-width: 62rem; margin: 0 auto; padding: 0 1.5rem; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--cream); color: var(--navy); padding: .6rem 1rem; z-index: 10;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */

.site-head { border-bottom: 1px solid var(--rule); background: transparent; }
.site-head .wrap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; padding-top: 1.4rem; padding-bottom: 1.4rem;
}

.wordmark {
  font-family: var(--serif);
  font-size: var(--fs-m);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-strong);
  border: 0;
}
.wordmark:hover { background: none; }

.site-nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.site-nav a {
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 0;
  padding: .5rem 0;
  display: inline-block;
  min-height: 44px;
  line-height: 1.9;
}
.site-nav a:hover, .site-nav a:focus-visible {
  color: var(--cream-strong); background: none; border-bottom: 1px solid var(--cream-strong);
}
.site-nav a[aria-current="page"] { color: var(--cream-strong); border-bottom: 1px solid var(--cream-strong); }

/* ---------- Namenszug als Zeitungskopf ---------- */

/* Der Kopf besteht aus drei Bändern: Navigation, Namenszug, Untertitel.
   Jede Linie trennt genau ein Band vom nächsten, keine schwebenden Striche. */
.nameplate { padding: 2.5rem 0 0; }
/* Kein durchgehender Strich zwischen Namenszug und Untertitel,
   sondern ein kurzer Steg, der beides verbindet statt trennt. */
.nameplate .wrap::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 1px;
  background: var(--brass);
  margin-top: 1.5rem;
}
.nameplate h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-name);
  line-height: .94;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: rgba(248, 244, 236, .82);
  position: relative;
  z-index: 3;
}
.home .site-head .wordmark { display: none; }
.home .site-head .wrap { justify-content: flex-end; }

/* ---------- Zeile unter dem Namenszug, wie ein Zeitungsuntertitel ---------- */

.strapline { border-bottom: 1px solid var(--rule-strong); }
.strapline .wrap { padding-top: 1.15rem; padding-bottom: 1.15rem; }
.strapline p {
  margin: 0;
  max-width: 58rem;
  font-family: var(--sans);
  font-size: var(--fs-s);
  line-height: 1.55;
  letter-spacing: .035em;
  color: var(--muted);
}
.strapline .sep { color: var(--brass); padding: 0 .55em; }

@media (max-width: 620px) {
  .strapline p { font-size: .86rem; }
}

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--serif); color: var(--cream-strong); font-weight: 400; }

h1 {
  font-size: var(--fs-xl);
  line-height: 1.14;
  letter-spacing: -0.008em;
  margin: 0 0 1.1rem;
}

h2 { font-size: var(--fs-l); line-height: 1.22; margin: 0 0 .75rem; }
.herotext h2.headline {
  font-size: var(--fs-xl);
  line-height: 1.16;
  letter-spacing: -0.008em;
  margin-bottom: 1rem;
}
h3 { font-size: var(--fs-m); line-height: 1.3; margin: 0 0 .4rem; }

p { margin: 0 0 1.1rem; max-width: var(--measure); }
.wide p { max-width: none; }
.wide-lede { max-width: 46rem; }
.columns .story h3 { margin-bottom: .55rem; }

.lede {
  font-family: var(--serif);
  font-size: var(--fs-m);
  line-height: 1.5;
  color: var(--cream-strong);
}

h2.eyebrow, .eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--brass);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 1.6rem;
  max-width: none;
  line-height: 1.4;
}

.muted { color: var(--muted); }
.small { font-size: var(--fs-s); }

strong { color: var(--cream-strong); font-weight: 600; }

/* ---------- sections ---------- */

section { padding: 3.4rem 0; }
section + section { border-top: 1px solid var(--rule); }
.hero { padding: 4.2rem 0 3.6rem; }

.split {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

.portrait { border: 1px solid var(--rule); }

/* Textumfluss: das Porträt steht im Satz, der Text läuft daran vorbei
   und darunter weiter, statt eine leere Spalte stehen zu lassen. */
.flow { max-width: 48rem; }
.flow::after { content: ""; display: block; clear: both; }
.flow p { max-width: none; }
.float-right {
  float: right;
  width: 20rem;
  margin: .45rem 0 1.5rem 2.6rem;
}
.float-right img { border: 1px solid var(--rule); }
.portrait-caption { font-size: var(--fs-s); color: var(--muted); margin-top: .55rem; }

.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.8rem 2.5rem; }
.cols-3 p, .cols-2 p { max-width: none; }

/* ---------- Seitenspalte mit senkrechtem Trenner ---------- */

.with-rail {
  display: grid;
  grid-template-columns: 1fr 17.5rem;
  gap: 0 3.2rem;
  align-items: start;
}
.rail {
  border-left: 1px solid var(--rule);
  padding-left: 2.4rem;
}
/* Im Kopfbereich: Porträt und Termine stehen in einer Spalte,
   die senkrechte Linie fasst beides zusammen. */
.split--rail { grid-template-columns: 1.42fr 18rem; gap: 0 3rem; }
.rail--hero .portrait { border: 1px solid var(--rule); margin-bottom: 2.2rem; width: 100%; }
.rail--hero .dates li:last-child { padding-bottom: 0; }
.rail--hero .eyebrow { margin-bottom: 1.1rem; }
.herotext p { max-width: none; }
.rail .eyebrow { margin-bottom: 1.2rem; }
.rail + .rail { margin-top: 2.4rem; }

.dates { list-style: none; margin: 0; padding: 0; }
.dates li { padding: 0 0 1.4rem; }
.dates li:last-child { padding-bottom: 0; }
/* Trennlinie zwischen den Blöcken, nicht zwischen einzelnen Einträgen */
h2.rail-sep, .rail-sep { margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--rule); }
.dates .when {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: .4rem;
}
.dates .what {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-m);
  line-height: 1.25;
  color: var(--cream-strong);
  margin-bottom: .25rem;
}
.dates .where { display: block; font-size: var(--fs-s); color: var(--muted); line-height: 1.4; }

/* ---------- lists ---------- */

.entries { list-style: none; margin: 0; padding: 0; }
.entries li { padding: 1.15rem 0; border-top: 1px solid var(--rule); }
.entries li:last-child { border-bottom: 1px solid var(--rule); }
.entries .meta {
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: .3rem;
}
.entries .title { font-family: var(--serif); font-size: var(--fs-m); color: var(--cream-strong); }
.entries p { margin: .35rem 0 0; max-width: var(--measure); }

.cv { list-style: none; margin: 0; padding: 0; }
.cv li {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.5rem;
  padding: .9rem 0; border-top: 1px solid var(--rule);
}
.cv li:last-child { border-bottom: 1px solid var(--rule); }
.cv .years { font-size: var(--fs-s); color: var(--muted); font-style: italic; }
.cv .role { font-family: var(--serif); font-size: var(--fs-m); color: var(--cream-strong); }
.cv .where { display: block; color: var(--cream); font-size: var(--fs-s); margin-top: .25rem; }
.cv .org { display: block; color: var(--muted); font-size: var(--fs-s); margin-top: .35rem; }

.plain { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.plain li { padding: .3rem 0; }

/* ---------- offering blocks ---------- */

.offer {
  border-left: 1px solid var(--rule-strong);
  padding: .1rem 0 .1rem 1.5rem;
  margin-bottom: 0;
}
.cols-2 .offer p { max-width: none; }
.offer .step {
  font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: .35rem;
}

/* ---------- call to action: umgekehrte, helle Fläche ---------- */

.cta { background: rgba(230, 223, 208, 0.93); color: #262f3a; }
.cta h2 { color: var(--navy); }
.cta p { color: #333d49; }
.cta a { color: var(--navy); border-bottom-color: rgba(20, 28, 38, .45); }
.cta a:hover { background: rgba(20, 28, 38, .08); border-bottom-color: var(--navy); }
.cta :focus-visible { outline-color: var(--navy); }

/* ---------- icon links ---------- */

.iconlink { display: inline-flex; align-items: center; gap: .45em; border-bottom: 0; }
.iconlink span { border-bottom: 1px solid var(--rule-strong); }
.iconlink:hover, .iconlink:focus-visible { background: none; }
.iconlink:hover span, .iconlink:focus-visible span { border-bottom-color: currentColor; }
.site-foot .iconlink span { border-bottom-color: rgba(171, 163, 150, .42); }
.icon {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  fill: currentColor;
  vertical-align: -0.15em;
}

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(14, 20, 28, .72), var(--navy-deep));
  padding: 2.4rem 0;
  font-size: var(--fs-s);
  color: var(--muted);
}
.site-foot .wrap { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.site-foot a { color: var(--muted); border-bottom-color: rgba(171, 163, 150, .42); }
.site-foot a:hover { color: var(--cream-strong); }
.site-foot ul { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; flex-wrap: wrap; }

/* ---------- photographs ---------- */

figure { margin: 0; }

.band img { width: 100%; border: 1px solid var(--rule); }
.band figcaption {
  font-size: var(--fs-s);
  color: var(--muted);
  margin-top: .6rem;
  max-width: var(--measure);
}

.photo-section { padding-top: 2.6rem; padding-bottom: 2.6rem; }

.side-photo img { width: 100%; border: 1px solid var(--rule); }

/* ---------- publications: newspaper layout ---------- */

.story .kicker {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: .55rem;
}
.story h3 { margin: 0 0 .5rem; }
.story h3 a { border-bottom: 0; }
.story h3 a:hover, .story h3 a:focus-visible { background: none; color: var(--brass); }
.story p { margin: 0; color: var(--cream); }

/* Aufmacher */
.lead { padding-bottom: 2.2rem; margin-bottom: 2.4rem; border-bottom: 2px solid var(--rule-strong); }
.lead h3 { font-size: var(--fs-xl); line-height: 1.14; letter-spacing: -0.01em; margin-bottom: .7rem; }
.lead p { font-size: var(--fs-m); line-height: 1.5; max-width: 40rem; }

/* Spalten mit Trennstegen wie im Satzspiegel einer Zeitung */
.columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 0;
  row-gap: 2.6rem;
}
.columns .story { padding: 0 1.8rem; border-left: 1px solid var(--rule); }
.columns .story:first-child,
.columns .story:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
.columns .story:nth-child(3n) { padding-right: 0; }
.columns .story h3 { font-size: var(--fs-m); line-height: 1.28; }
.columns .story p { font-size: var(--fs-s); line-height: 1.55; color: var(--cream); opacity: .88; }

/* Institutionelle Veröffentlichungen: zwei Spalten, gleiche Sprache */
.columns--two { grid-template-columns: repeat(2, 1fr); }
.columns--two .story:nth-child(3n + 1) { border-left: 1px solid var(--rule); padding-left: 1.8rem; }
.columns--two .story:first-child,
.columns--two .story:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
.columns--two .story:nth-child(2n) { padding-right: 0; }

/* Newsletter-Zeile */
.masthead { border-top: 2px solid var(--brass); padding-top: 1.5rem; }
.masthead h2 { font-size: var(--fs-xl); margin-bottom: .6rem; }
.masthead p { max-width: 42rem; }

/* ---------- contact form ---------- */

.contact-form { max-width: 34rem; }

.field { margin-bottom: 1.4rem; }
.field label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .4rem;
}
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--cream-strong);
  background: var(--navy-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: .65rem .75rem;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--cream-strong);
  box-shadow: inset 0 0 0 1px var(--cream-strong);
}

.contact-form button {
  font: inherit;
  letter-spacing: .06em;
  background: rgba(230, 223, 208, 0.94);
  color: var(--navy);
  border: 1px solid var(--cream);
  padding: .7rem 1.8rem;
  cursor: pointer;
}
.contact-form button:hover { background: var(--cream-strong); border-color: var(--cream-strong); }

.contact-form .small { margin-top: 1rem; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { padding: 1rem 1.2rem; margin-bottom: 1.8rem; max-width: 34rem; }
.form-note p, .form-note li { max-width: none; margin: 0; }
.form-note ul { margin: 0; padding-left: 1.2rem; }
.form-note--ok { background: rgba(126, 186, 140, .16); border-left: 3px solid #7eba8c; }
.form-note--error { background: rgba(232, 150, 134, .16); border-left: 3px solid #e89686; }

/* ---------- legal pages ---------- */

.legal h2 { font-size: var(--fs-m); margin-top: 2.2rem; }
.legal p, .legal li { max-width: var(--measure); }
.legal ul { padding-left: 1.2rem; }

/* ---------- editorial placeholder (remove before launch) ---------- */

.todo {
  background: rgba(226, 197, 106, .16);
  border-left: 3px solid #e2c56a;
  padding: .55rem .8rem;
  font-size: var(--fs-s);
  color: #f0e2b8;
  margin: .5rem 0 1.1rem;
  max-width: var(--measure);
}
.todo::before { content: "Noch zu ergänzen: "; font-weight: 700; }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .split, .split--rail { grid-template-columns: 1fr; gap: 2.5rem; }
  .rail--hero { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 1.8rem; }
  .rail--hero .portrait { max-width: 20rem; }
  .float-right { float: none; width: 100%; max-width: 20rem; margin: 0 0 2rem; }
  .split .portrait-block { max-width: 20rem; }
  .cols-3, .cols-2 { grid-template-columns: 1fr; gap: 2.2rem; }
  .with-rail { grid-template-columns: 1fr; gap: 2.6rem; }
  .rail { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 1.8rem; }
  .columns, .columns--two { grid-template-columns: 1fr; row-gap: 2rem; }
  .columns .story, .columns--two .story {
    border-left: 0; padding: 0 0 1.8rem;
    border-bottom: 1px solid var(--rule);
  }
  .columns .story:last-child, .columns--two .story:last-child { border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 620px) {
  body {
    font-size: var(--fs-base);
    background-attachment: scroll;
    background-image: radial-gradient(900px 700px at 70% 2%, rgba(72, 96, 122, 0.42), rgba(72, 96, 122, 0) 62%);
  }
  .site-nav a { font-size: .84rem; padding: .55rem 0; }

  section { padding: 2.6rem 0; }
  .hero { padding: 3rem 0 2.6rem; }
  .cv li { grid-template-columns: 1fr; gap: .2rem; }
  .site-head .wrap { padding-top: 1.1rem; padding-bottom: 1.1rem; }
  .site-nav { gap: 1.1rem; }
}

@media print {
  .site-nav, .cta { display: none; }
  html, body { background: #fff; color: #111; }
  h1, h2, h3, .lede, a, strong { color: #000; }
}

/* Strapline: lange Fassung am Desktop, kurze auf schmalen Displays */
.strapline .compact { display: none; }
@media (max-width: 760px) {
  .strapline .full { display: none; }
  .strapline .compact { display: block; }
}

/* Kurzer Messingstrich unter den Überschriften der Leistungsblöcke,
   damit sie sich vom Fließtext darunter absetzen. */
.offer h3::after {
  content: "";
  display: block;
  width: 2.2rem;
  height: 1px;
  background: var(--brass);
  margin: .6rem 0 .85rem;
}

/* Absatz zu Teamzusammenstellung unter den Leistungsblöcken */
.teams {
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--rule);
}
.teams h3::after {
  content: "";
  display: block;
  width: 2.2rem;
  height: 1px;
  background: var(--brass);
  margin: .6rem 0 .85rem;
}
.teams p { max-width: none; }

/* Die Leistungsblöcke sollen nicht auf die Höhe der Rasterzeile gestreckt
   werden, sonst läuft die senkrechte Linie über den Text hinaus. */
.cols-2 .offer { align-self: start; }

/* Einleitungen über die volle Spaltenbreite, Folgeabsätze zweispaltig.
   Gleiche Behandlung auf About und Advisory, damit die rechte Kante steht. */
.hero .lead-block p { max-width: none; }
.lead-block .body-cols,
.teams .body-cols {
  column-count: 2;
  column-gap: 3.2rem;
}
.lead-block .body-cols p,
.teams .body-cols p { margin-top: 0; max-width: none; }
@media (max-width: 760px) {
  .lead-block .body-cols,
  .teams .body-cols { column-count: 1; }
}

/* Leistungsblöcke im Spaltenfluss statt im Raster: sie rücken direkt
   untereinander nach, statt auf die Höhe der Rasterzeile zu warten. */
.cols-2--flow {
  display: block;
  column-count: 2;
  column-gap: 2.5rem;
}
.cols-2--flow .offer {
  break-inside: avoid;
  margin-bottom: 2.8rem;
}
.cols-2--flow .offer:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .cols-2--flow { column-count: 1; }
}

/* Navigation auf schmalen Displays: fünf Punkte in eine Zeile, gleichmäßig
   verteilt, statt vier oben und einer allein darunter. */
@media (max-width: 560px) {
  .site-head .wrap { gap: .8rem; }
  .site-nav {
    width: 100%;
    justify-content: space-between;
    gap: 0;
  }
  .site-nav a {
    font-size: .68rem;
    letter-spacing: .06em;
    min-height: 40px;
  }
}

/* Zurückhaltend gerahmter Verweis für die wichtigste Handlung je Seite. */
.btn {
  display: inline-block;
  border: 1px solid var(--rule-strong);
  padding: .7rem 1.3rem;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-strong);
  line-height: 1.4;
}
.btn:hover, .btn:focus-visible {
  border-color: var(--cream-strong);
  background: rgba(230, 223, 208, 0.07);
}
.cta .btn { border-color: rgba(38, 47, 58, .35); color: #262f3a; }
.cta .btn:hover, .cta .btn:focus-visible {
  border-color: #262f3a; background: rgba(38, 47, 58, .07);
}

/* Kompakte Angebotsliste auf der Startseite: Bezeichnung und ein Ergebnis. */
.offers-brief { border-top: 1px solid var(--rule); margin-top: 2rem; }
.offers-brief li {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.offers-brief .name {
  font-family: var(--serif);
  font-size: var(--fs-m);
  color: var(--cream-strong);
  line-height: 1.3;
}
.offers-brief .result { color: var(--muted); }
@media (max-width: 700px) {
  .offers-brief li { grid-template-columns: 1fr; gap: .3rem; }
}

/* Angebotsliste in der schmaleren Textspalte: Bezeichnung über dem Ergebnis. */
.offers-brief--stacked li { grid-template-columns: 1fr; gap: .25rem; padding: .85rem 0; }
.offers-brief--stacked .result { font-size: var(--fs-s); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; max-width: none; margin-top: 1.6rem; }

/* Zwei echte Spalten statt Spaltenfluss. Der mehrspaltige Fluss wird von
   Safari und Chromium unterschiedlich umbrochen; mit zwei Behältern liegen
   die oberen Überschriften in jedem Browser exakt gleich. */
.cols-2--split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.8rem 2.5rem;
  align-items: start;
}
.cols-2--split .col { display: flex; flex-direction: column; gap: 2.8rem; }
@media (max-width: 760px) {
  .cols-2--split { grid-template-columns: 1fr; }
}