/* constantinmelchers.de im tantin-Kleid, entschieden am 04.10.2026.
   Alle Werte stammen aus der Quelle der tantin-Startseite (styles.css, Brand Guide 3 bis 6):
   Weiß, Schwarz, Violett nur im Falz, Host Grotesk für alles, Falzlinien statt Rahmen,
   Origami auf Weiß, jedes Bild mit Schild. Die Seite ist bei 1.440 px arretiert.
   Alle Seiten sind umgebaut: Startseite, Übersicht, Beitrag, Profil, Rechtstexte und 404. */

/* Schrift: Host Grotesk, variabel von 300 bis 800, lokal gehostet */
@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/host-grotesk-latin.5662dcd1.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: "Host Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/host-grotesk-latin-ext.ad1af424.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Host Grotesk";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/host-grotesk-kursiv-latin.7e958f70.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: "Host Grotesk";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/host-grotesk-kursiv-latin-ext.d311bbf5.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Farbe K2, Werte aus dem Brand Guide */
:root {
  color-scheme: light;

  --weiss: #FEFEFE;
  --schwarz: #0B0B0B;
  --grau: #2F2F2D;
  --grau-neben: #444442;
  --schild: #1A1A19;
  --linie: #E2E2E0;
  --violett: #5A1A9A;
  --violett-tief: #4A0788;
  --violett-hell: #8E5BD6;

  --breite: 1440px;
  --rand: 64px;
  --motion-wipe: 200ms;
  --motion-blatt: 520ms;
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  background: var(--weiss);
  color: var(--schwarz);
  font-family: "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ol, ul, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--violett-tief); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--violett); outline-offset: 4px; }
main:focus { outline: none; }
::selection { background: var(--violett); color: #FFFFFF; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: 12px;
  left: var(--rand);
  z-index: 10;
  padding: 10px 14px;
  background: var(--schwarz);
  color: var(--weiss);
  transform: translateY(-160%);
}
.skip:hover { color: var(--weiss); }
.skip:focus-visible { transform: none; }

.rahmen {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Falzlinie statt Rahmen: eine dunkle Kante, darunter das Licht */
.abschnitt { position: relative; }
.abschnitt::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(to bottom, var(--linie) 0 1px, #FFFFFF 1px 2px);
}

/* Zeichen: das Monogramm oben links, im Stil wie vor dem Kleid, ohne Namenszeile. Der rechts
   offene Rahmen ist das C, darin das M. Ein Strich des M zeigt die violette Rückseite
   (Variante D „Falz im M“, Constantin, 04.10.2026). Beim Überfahren kehrt es sich sofort um. */
.marke {
  display: block;
  width: 52px;
  aspect-ratio: 1;
  background: var(--weiss);
  color: var(--schwarz);
}
.marke svg {
  width: 100%;
  height: auto;
}
.marke__falz { fill: var(--violett); }
.marke:hover,
.fuss .marke:hover {
  background: var(--schwarz);
  color: var(--weiss);
}
.marke:hover .marke__falz { fill: var(--violett-hell); }

/* Link mit gezeichnetem Pfeil */
.pfeil {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  min-height: 44px;
  font-size: 16px;
  font-weight: 600;
}
.pfeil svg {
  width: 18px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  flex-shrink: 0;
  transition: transform var(--motion-wipe) var(--ease-out-quart);
}
.pfeil__text {
  min-width: 0;
  background: linear-gradient(var(--violett), var(--violett)) left bottom / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--motion-wipe) var(--ease-out-quart);
}
.pfeil:focus-visible .pfeil__text,
a:focus-visible .pfeil .pfeil__text { background-size: 100% 1px; }
@media (hover: hover) {
  .pfeil:hover .pfeil__text { background-size: 100% 1px; }
  .pfeil:hover svg { transform: translateX(3px); }
}

/* Museumsschild */
.schild {
  font-size: 13px;
  line-height: 1.45;
  color: var(--schild);
}
.schild b { display: block; font-weight: 700; }
.schild span { display: block; }

/* Kopf: liegt über dem ersten Abschnitt und scrollt mit */
.kopf {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
}
.kopf .rahmen {
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kopf__marke { line-height: 0; }
.kopf nav {
  display: flex;
  gap: 36px;
  font-size: 15px;
  font-weight: 500;
}
.kopf__link:hover { color: var(--schwarz); }
.kopf__link span {
  background: linear-gradient(var(--violett), var(--violett)) left bottom / 0 1px no-repeat;
  padding-bottom: 4px;
  transition: background-size var(--motion-wipe) var(--ease-out-quart);
}
.kopf__link:focus-visible span,
.kopf__link[aria-current="page"] span { background-size: 100% 1px; }
@media (hover: hover) {
  .kopf__link:hover span { background-size: 100% 1px; }
}

/* Menü am Handy, von Constantin am 06.10.2026 an der Vorschau freigegeben. Am Rechner stehen die
   drei Wege offen im Kopf (Constantin, 06.10.2026: „nur für Mobile“). Dort und in Browsern ohne
   Popover und :has() ist das Blatt nur Hülle. Alles Weitere steht in der Handy-Fassung unten. */
.kopf__menue,
.kopf__zustand,
.blatt__kontakt { display: none; }
.blatt { display: contents; }

/* Hero: der persönliche Gruß, wie vor dem Kleid (Constantin, 04.10.2026). „Hi!“ steht groß und
   fest unten auf dem ersten Bildschirm, in der rechten Spalte des Rasters, darunter die
   Vorstellung. Kein Bild, kein Link. */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 184px 0 clamp(40px, 8vh, 96px);
}
.hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 416fr) minmax(0, 856fr);
  column-gap: 40px;
}
.hero__gruss { grid-column: 2; }
.hero h1 {
  font-size: clamp(48px, 10vw, 144px);
  line-height: 0.94;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.hero__gruss p {
  max-width: 43ch;
  margin-top: clamp(32px, 4vw, 56px);
  font-size: 22px;
  line-height: 1.45;
  color: var(--grau);
}

/* Über mich und Gedanken füllen mindestens einen Bildschirm, ihr Inhalt steht in der Mitte. */
.ueber, .gedanken {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Über mich: links Überschrift und Porträt mit Schild, rechts die Erzählung */
.ueber { padding: 120px 0 112px; }
.ueber__raster {
  display: grid;
  grid-template-columns: minmax(0, 416fr) minmax(0, 856fr);
  column-gap: 40px;
  align-items: start;
}
.ueber__kopf {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ueber h2,
.gedanken .rahmen > h2,
.uebersicht__kopf h1,
.recht h1,
.fehler h1 {
  font-size: 50px;
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.ueber__portrait {
  width: 100%;
  max-width: 320px;
}
.ueber__portrait img {
  width: 100%;
  height: auto;
}
.ueber__portrait figcaption { margin-top: 12px; }
.ueber__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 40em;
  padding-top: 10px;
  color: var(--grau);
  text-wrap: pretty;
}
.ueber__text a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Gedanken: Titel links, Motiv rechts mit Schild, zwischen den Zeilen eine Falzlinie */
.gedanken { padding: 112px 0 104px; }
.gedanken .rahmen > h2 { margin-bottom: 48px; }
.beitraege { border-bottom: 1px solid var(--linie); }
.beitrag-zeile {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: 64px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--linie);
}
.beitrag-zeile:hover { color: var(--schwarz); }
.beitrag-zeile__titel {
  max-width: 17em;
  font-size: 34px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.beitrag-zeile:is(:hover, :focus-visible) .beitrag-zeile__titel {
  text-decoration: underline;
  text-decoration-color: var(--violett);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.beitrag-zeile__teaser {
  max-width: 30em;
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--grau);
  text-wrap: pretty;
}
.beitrag-zeile__meta {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--grau-neben);
  font-variant-numeric: tabular-nums;
}
.beitrag-zeile__motiv { position: relative; }
.beitrag-zeile__motiv img {
  width: 100%;
  height: auto;
}
.beitrag-zeile__motiv figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  text-align: right;
}
.gedanken__alle { padding-top: 20px; }
.gedanken__leer {
  max-width: 30em;
  font-size: 22px;
  line-height: 1.45;
  color: var(--grau);
}

/* Übersicht /texte: links „Gedanken“, darunter dieselben Zeilen wie auf der Startseite, dann die
   Seiten. Die Zahlen stehen leicht, die aktuelle fest über einem violetten Falz, rechts der Weg
   zu den älteren. Neben dem Titel steht ein Begleitsatz aus Constantins Über-Text, leicht und fest. */
.gedanken--uebersicht {
  justify-content: flex-start;
  padding: 168px 0 112px;
}
.uebersicht__kopf {
  display: grid;
  grid-template-columns: minmax(0, 416fr) minmax(0, 856fr);
  column-gap: 40px;
  align-items: start;
  margin-bottom: 56px;
}
.uebersicht__satz {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 40em;
}
.uebersicht__zeile {
  margin-bottom: 10px;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.uebersicht__zeile span,
.uebersicht__zeile b { display: block; }
.uebersicht__zeile span { font-weight: 300; }
.uebersicht__zeile b { font-weight: 700; }
.uebersicht__satz p:last-child {
  max-width: 30em;
  font-size: 19px;
  line-height: 1.5;
  color: var(--grau);
  text-wrap: pretty;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 40px;
  padding-top: 20px;
}
.pagination__zahlen {
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}
.pagination__zahlen a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}
.pagination__zahlen a:hover { color: var(--schwarz); }
.pagination__zahlen span { padding-bottom: 5px; }
.pagination__zahlen a:is(:hover, :focus-visible) span {
  background: linear-gradient(var(--violett), var(--violett)) left bottom / 100% 1px no-repeat;
}
.pagination__zahlen [aria-current="page"] { font-weight: 700; }
.pagination__zahlen [aria-current="page"] span {
  background: linear-gradient(var(--violett), var(--violett)) left bottom / 100% 2px no-repeat;
}

/* Beitrag. Im Kopf steht der Titel links, das Motiv rechts mit Schild. Unter dem Titel nennt
   ein Schild Namen, Datum und Lesezeit. */
.beitrag__kopf { padding: 136px 0 56px; }
.beitrag__kopf-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 64px;
  align-items: center;
}
.beitrag__titel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.beitrag h1 {
  font-size: 66px;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
  hyphens: auto;
  hyphenate-limit-chars: 12 5 5;
  overflow-wrap: break-word;
}
.beitrag__motiv {
  position: relative;
  justify-self: end;
  width: 100%;
}
.beitrag__motiv img {
  width: 100%;
  height: auto;
}
.beitrag__motiv figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  text-align: right;
}
/* Ohne Motiv steht der Titel allein über die ganze Breite. */
.beitrag__kopf--ohne-motiv { padding: 200px 0 72px; }
.beitrag__kopf--ohne-motiv .beitrag__kopf-raster { grid-template-columns: minmax(0, 1fr); }
.beitrag__kopf--ohne-motiv h1 { max-width: 16em; }

/* Der Text steht in der rechten Spalte, Zwischenüberschriften links davon auf derselben Grundlinie. */
.beitrag__rumpf { padding: 72px 0 104px; }
.beitrag__reihen {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.beitrag__reihe {
  display: grid;
  grid-template-columns: minmax(0, 416fr) minmax(0, 856fr);
  column-gap: 40px;
  align-items: baseline;
}
.beitrag__reihe > h2 {
  grid-column: 1;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
  scroll-margin-top: 32px;
}
.beitrag__reihe > :not(h2) {
  grid-column: 2;
  max-width: 646px;
}
.beitrag__text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--grau);
  text-wrap: pretty;
}
.beitrag__text a,
.beitrag__quellen a,
.beitrag__herkunft a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.beitrag__text strong {
  color: var(--schwarz);
  font-weight: 700;
}
.beitrag__text h3 {
  margin-top: 14px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--schwarz);
}
.beitrag__text ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.beitrag__text li {
  position: relative;
  padding-left: 1.2em;
}
.beitrag__text li::before {
  content: "–";
  position: absolute;
  left: 0;
}
.beitrag__text blockquote {
  padding-left: 20px;
  border-left: 1px solid var(--linie);
  color: var(--schwarz);
}
.beitrag__text hr {
  width: 100%;
  margin: 18px 0;
  border: 0;
  border-top: 1px solid var(--linie);
}
/* Der hervorgehobene Satz steht groß unter einem violetten Falz. */
.beitrag__text .beitrag__satz {
  margin-top: 18px;
  padding-top: 28px;
  border-top: 1px solid var(--violett);
  box-shadow: inset 0 1px 0 var(--violett);
  font-size: 30px;
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--schwarz);
  text-wrap: balance;
}
/* Quellen: eine kleine Überschrift in Versalien, die Einträge wie Schilder zwischen Falzlinien */
.beitrag__reihe > .beitrag__klein {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau-neben);
}
.beitrag__quellen,
.beitrag__herkunft {
  font-size: 13px;
  line-height: 1.45;
  color: var(--grau-neben);
}
.beitrag__quellen { border-bottom: 1px solid var(--linie); }
.beitrag__quellen li {
  padding: 14px 0 16px;
  border-top: 1px solid var(--linie);
}
.beitrag__quellen a { color: var(--schild); }
.beitrag__herkunft p + p { margin-top: 8px; }
/* Der Absender schließt den Beitrag unter einer Falzlinie. */
.beitrag__absender {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 28px;
  border-top: 1px solid var(--linie);
  color: var(--grau);
  text-wrap: pretty;
}
.beitrag__absender-name {
  color: var(--schwarz);
  font-weight: 700;
}

/* Lese ich gerade und Weiterlesen: links die kleine Überschrift, rechts die Einträge zwischen Falzlinien */
.lese,
.weiterlesen { padding: 72px 0 96px; }
.lese__raster,
.weiterlesen__raster {
  display: grid;
  grid-template-columns: minmax(0, 416fr) minmax(0, 856fr);
  column-gap: 40px;
  align-items: start;
}
.lese__kopf,
.weiterlesen h2 { padding-top: 16px; }
.lese h2,
.weiterlesen h2 {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.lese__stand,
.lese__autor {
  font-size: 13px;
  line-height: 1.45;
  color: var(--grau-neben);
}
.lese__stand { margin-top: 6px; }
.lese__liste,
.weiterlesen__liste { max-width: 646px; }
.lese__liste,
.weiterlesen__zeilen { border-bottom: 1px solid var(--linie); }
.lese__liste li,
.weiter-zeile {
  padding: 20px 0 24px;
  border-top: 1px solid var(--linie);
}
.weiter-zeile { display: block; }
.weiter-zeile:hover { color: var(--schwarz); }
.lese h3,
.weiter-zeile h3 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.lese h3 a:hover { color: var(--schwarz); }
.lese h3 a:is(:hover, :focus-visible),
.weiter-zeile:is(:hover, :focus-visible) h3 {
  text-decoration: underline;
  text-decoration-color: var(--violett);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.lese__ende { white-space: nowrap; }
.lese h3 svg {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.3em;
  vertical-align: 0.1em;
}
.lese__autor { margin-top: 2px; }
.lese__text {
  max-width: 40em;
  margin-top: 10px;
  color: var(--grau);
  text-wrap: pretty;
}
.weiter-zeile p {
  max-width: 40em;
  margin-top: 6px;
  color: var(--grau);
  text-wrap: pretty;
}
.weiterlesen .pfeil { margin-top: 20px; }

/* Lass uns sprechen: der Schluss steht auf der Mittelachse wie eine Einladung. Oben Überschrift
   und Adresse, darunter die zwei Hermen im Gespräch. Das Bild ist höchstens 760 px breit,
   sein weißer Grund geht in die Seite über. */
.kontakt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px 0 72px;
}
.kontakt__inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.kontakt h2 {
  font-size: 66px;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.kontakt__mail {
  font-size: 22px;
  line-height: 1.45;
  color: var(--grau);
  overflow-wrap: anywhere;
}
.kontakt__mail a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.kontakt__bild {
  display: block;
  width: min(760px, calc(100% - 2 * var(--rand)));
  margin: 40px auto 0;
}
.kontakt__bild img {
  width: 100%;
  height: auto;
}
.kontakt__schild {
  position: absolute;
  right: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand)));
  bottom: 36px;
  text-align: right;
}

/* Rechtstexte und Profil: links die Überschrift, darunter die Abschnitte der Seite, rechts der Text
   im Raster 416 zu 856. Über dem Text liegt ein violetter Falz, so hat auch diese Seite ihren Akzent.
   Der Wortlaut der Rechtstexte bleibt zeichengleich, nur das Kleid ist neu. */
.recht { padding: 184px 0 120px; }
.recht__raster {
  display: grid;
  grid-template-columns: minmax(0, 416fr) minmax(0, 856fr);
  column-gap: 40px;
  align-items: start;
}
.recht__kopf {
  position: sticky;
  top: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: calc(100vh - 80px);
  max-height: calc(100svh - 80px);
}
.recht__nav {
  min-height: 0;
  max-width: 24em;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.45;
  color: var(--grau-neben);
}
.recht__nav a {
  display: inline-block;
  padding-block: 5px;
}
.recht__text {
  max-width: 40em;
  padding-top: 32px;
  border-top: 1px solid var(--violett);
  box-shadow: inset 0 1px 0 var(--violett);
  color: var(--grau);
  overflow-wrap: break-word;
}
.recht__text p { margin: 0 0 14px; }
.recht__text strong { color: var(--schwarz); font-weight: 700; }
.recht__text h2 {
  margin: 64px 0 16px;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--schwarz);
  scroll-margin-top: 32px;
}
.recht__text h3 {
  margin: 36px 0 12px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--schwarz);
  scroll-margin-top: 32px;
}
/* Die Kapitel der Rechtstexte behalten die Größe des Fließtexts, wie bei tantin. */
.recht--rechtstext .recht__text :is(h2, h3) {
  margin: 28px 0 14px;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
}
.recht__text > :first-child { margin-top: 0; }
.recht__text ul {
  margin: 0 0 14px;
  padding-left: 1.2em;
  list-style: disc;
}
.recht__text li { margin-bottom: 6px; }
.recht__text a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.recht__text .recht__klein {
  font-size: 13px;
  line-height: 1.45;
  color: var(--grau-neben);
}
/* Fakten im Profil: der Begriff in Versalien, daneben der Wert, zwischen Falzlinien */
.recht__text dl {
  margin: 0 0 24px;
  border-top: 1px solid var(--linie);
}
.recht__text dl > div {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  padding: 12px 0;
  border-bottom: 1px solid var(--linie);
}
.recht__text dt {
  padding: 3px 20px 0 0;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--schwarz);
}
.recht__text dd { margin: 0; min-width: 0; }

/* 404, eine Seite im Raster der Rechtstexte: links die Aussage, rechts zwei Wege, darüber ein violetter Falz */
.fehler {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 136px 0 96px;
}
.fehler > .rahmen { width: 100%; }
.fehler__block {
  display: grid;
  grid-template-columns: minmax(0, 416fr) minmax(0, 856fr);
  column-gap: 40px;
  align-items: start;
  padding-top: 40px;
  border-top: 1px solid var(--violett);
  box-shadow: inset 0 1px 0 var(--violett);
}
.fehler h1 { text-wrap: balance; }
.fehler__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-top: 6px;
}

/* Fuß: Er läuft weiß aus. Links das Monogramm, daneben zwei Spalten, unten Name und Rechtliches.
   Oben die Falzlinie wie zwischen den Abschnitten. */
.fuss {
  position: relative;
  background: var(--weiss);
  color: var(--schwarz);
}
.fuss::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(to bottom, var(--linie) 0 1px, #FFFFFF 1px 2px);
}
.fuss .rahmen {
  padding-top: 88px;
  padding-bottom: 40px;
}
.fuss__raster {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 80px;
}
.fuss__spalte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  font-weight: 500;
}
.fuss__titel {
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau-neben);
}
.fuss a { color: var(--schwarz); }
.fuss a:hover { color: var(--violett-tief); }
.fuss__unten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--linie);
  font-size: 13px;
  line-height: 1.4;
  color: var(--grau-neben);
}
.fuss__links {
  display: flex;
  gap: 28px;
}
.fuss__links a { color: var(--grau-neben); }
.fuss__links a[aria-current="page"] { color: var(--schwarz); }

/* Handy und Tablet hochkant: Überschriften stehen auf der Mittelachse. Der Kopf zeigt das Monogramm
   und einen Knopf, der das Menü-Blatt öffnet. Die Seite kommt dabei ohne Skript aus. Browser ohne
   Popover zeigen die drei Wege offen in einer Zeile. */
@media (max-width: 1023px) {
  :root { --rand: 20px; }

  body { font-size: 16px; }

  .kopf .rahmen { height: 76px; }
  .marke { width: 44px; }
  .kopf nav { gap: 20px; }
  .kopf__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Menü: Die Wege liegen auf der violetten Rückseite des Blatts (Constantin, 06.10.2026: „Gerne das
     Violett nehmen“). Sie stehen groß und fest in der Mitte des Bildschirms, auf der Mittelachse der
     Handy-Fassung, damit der Daumen sie gut erreicht (Constantin, 06.10.2026: „gehen die links nicht
     besser mittig?“). Das Blatt wird von der Ecke unter dem Knopf aus umgeschlagen, die Kante läuft
     als Falz schräg über den Bildschirm. Die Seite bleibt ohne Skript: Das leere Popover hält nur den Zustand, der Knopf
     schaltet es, Escape und ein Tipp auf einen Weg schließen es. */
  @supports selector(:popover-open) and selector(:has(a)) {
    /* Der Platz des Rollbalkens bleibt, damit der Knopf beim Öffnen nicht springt. */
    html { scrollbar-gutter: stable; }

    .kopf__marke,
    .kopf__menue {
      position: relative;
      z-index: 2;
    }
    .kopf__menue {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      margin-right: -11px;
      padding: 0;
      border: 0;
      background: none;
      color: var(--schwarz);
      cursor: pointer;
      touch-action: manipulation;
      transition: color 0s 260ms;
    }
    .kopf__menue svg {
      width: 22px;
      height: 12px;
      overflow: visible;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
    }
    .kopf__strich { transition: transform var(--motion-wipe) var(--ease-out-quart); }
    .kopf__strich--oben { transform-origin: 11px 1px; }
    .kopf__strich--unten { transform-origin: 11px 11px; }

    .kopf__zustand:popover-open {
      display: block;
      inset: auto;
      width: 0;
      height: 0;
      margin: 0;
      padding: 0;
      border: 0;
      overflow: hidden;
      background: none;
      pointer-events: none;
    }

    .blatt {
      position: fixed;
      inset: 0;
      z-index: 1;
      display: flex;
      flex-direction: column;
      padding: 96px var(--rand) 16px;
      overflow-y: auto;
      background: var(--violett);
      color: var(--weiss);
      visibility: hidden;
      clip-path: polygon(100% 0, 100% 0, 100% 0);
      transition: clip-path var(--motion-blatt) var(--ease-out-quart),
                  visibility 0s var(--motion-blatt);
    }
    .blatt nav {
      flex-direction: column;
      align-items: center;
      gap: 0;
      margin-block: auto;
      text-align: center;
      font-size: clamp(44px, min(15.5vw, 11vh), 96px);
      font-weight: 700;
      line-height: 1.04;
      letter-spacing: -0.04em;
    }
    .blatt .kopf__link {
      display: block;
      min-height: 0;
    }
    .blatt a:hover { color: var(--weiss); }
    /* Keine Linie unter den großen Wegen, sie stieße an die nächste Zeile. Beim Überfahren und bei
       Fokus treten die anderen beiden zurück. */
    .blatt .kopf__link { transition: color var(--motion-wipe) var(--ease-out-quart); }
    .blatt .kopf__link span {
      background: none;
      padding-bottom: 0;
    }
    .blatt nav:has(.kopf__link:focus-visible) .kopf__link:not(:focus-visible) { color: rgb(255 255 255 / .5); }
    @media (hover: hover) {
      .blatt nav:has(.kopf__link:hover) .kopf__link:not(:hover) { color: rgb(255 255 255 / .5); }
      .blatt__kontakt a:hover {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 5px;
      }
    }
    .blatt__kontakt {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      column-gap: 24px;
      margin-top: 36px;
      padding-top: 8px;
      border-top: 1px solid rgb(255 255 255 / .3);
      font-size: 15px;
      font-weight: 500;
    }
    .blatt__kontakt a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
    }
    .blatt__kontakt a:first-child { flex-basis: 100%; }

    /* Der Kopf wechselt die Farbe erst, wenn die Kante über ihn gelaufen ist. */
    .kopf .marke { transition: color 0s 130ms, background-color 0s 130ms; }
    .kopf .marke__falz { transition: fill 0s 130ms; }
    .kopf .marke:hover,
    .kopf .marke:hover .marke__falz { transition: none; }

    html:has(#menue:popover-open) {
      overflow: hidden;
      background: var(--violett);
    }
    html:has(#menue:popover-open) .kopf {
      position: fixed;
      z-index: 20;
    }
    html:has(#menue:popover-open) .blatt {
      visibility: visible;
      clip-path: polygon(100% 0, calc(-100vh - 4px) 0, 100% calc(100% + 100vw + 4px));
      transition: clip-path var(--motion-blatt) var(--ease-out-quart);
    }
    html:has(#menue:popover-open) .kopf__menue {
      color: var(--weiss);
      transition: none;
    }
    html:has(#menue:popover-open) .kopf__strich--oben { transform: translateY(5px) rotate(45deg); }
    html:has(#menue:popover-open) .kopf__strich--unten { transform: translateY(-5px) rotate(-45deg); }
    html:has(#menue:popover-open) .kopf .marke:not(:hover) {
      background: transparent;
      color: var(--weiss);
      transition: color 0s 45ms, background-color 0s 45ms;
    }
    html:has(#menue:popover-open) .kopf .marke:not(:hover) .marke__falz {
      fill: var(--violett-hell);
      transition: fill 0s 45ms;
    }
    html:has(#menue:popover-open) .kopf :focus-visible { outline-color: var(--weiss); }
    html:has(#menue:popover-open) .kopf ::selection {
      background: var(--weiss);
      color: var(--violett);
    }
    /* Was unter dem Blatt liegt, fällt aus der Tab-Reihenfolge, sobald das Blatt deckt. */
    html:has(#menue:popover-open) body > :not(.kopf) {
      visibility: hidden;
      transition: visibility 0s var(--motion-blatt);
    }
  }

  /* Der Gruß bleibt unten links, wie vor dem Kleid. */
  .hero { padding: 136px 0 40px; }
  .hero__raster { grid-template-columns: minmax(0, 1fr); }
  .hero__gruss { grid-column: 1; }
  .hero h1 { font-size: clamp(64px, 18vw, 96px); }
  .hero__gruss p {
    margin-top: 24px;
    font-size: 18px;
  }

  .ueber { padding: 72px 0 80px; }
  .ueber__raster {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }
  .ueber__kopf {
    align-items: center;
    gap: 28px;
  }
  .ueber h2,
  .gedanken .rahmen > h2 {
    font-size: 32px;
    text-align: center;
  }
  .uebersicht__kopf h1,
  .recht h1,
  .fehler h1 { font-size: 32px; }
  .ueber__portrait { max-width: 420px; }
  .ueber__portrait figcaption { font-size: 12px; }
  .ueber__text { padding-top: 0; }

  /* Gedanken: das Motiv steht in voller Breite über seinem Text */
  .gedanken { padding: 72px 0 64px; }
  .gedanken .rahmen > h2 { margin-bottom: 36px; }
  .beitraege { margin-inline: calc(var(--rand) * -1); }
  .beitrag-zeile {
    display: flex;
    flex-direction: column;
    padding: 8px 0 30px;
  }
  .beitrag-zeile__text { padding: 14px var(--rand) 0; }
  .beitrag-zeile__text:only-child { padding-top: 22px; }
  .beitrag-zeile__titel {
    max-width: none;
    font-size: 24px;
    line-height: 1.2;
  }
  .beitrag-zeile__teaser {
    max-width: none;
    margin-top: 8px;
    font-size: 16px;
  }
  .beitrag-zeile__meta {
    margin-top: 10px;
    font-size: 12px;
  }
  .beitrag-zeile__motiv { order: -1; }
  .beitrag-zeile__motiv figcaption {
    position: static;
    margin: 0 var(--rand);
    font-size: 12px;
  }
  .gedanken__alle {
    display: flex;
    justify-content: center;
  }
  .gedanken--uebersicht { padding: 136px 0 64px; }
  .uebersicht__kopf {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    margin-bottom: 36px;
  }
  .uebersicht__zeile {
    margin-bottom: 0;
    font-size: 24px;
  }
  .uebersicht__satz p:last-child { font-size: 17px; }
  .pagination__zahlen { font-size: 24px; }

  /* Beitrag: das Motiv steht in voller Breite oben, darunter Titel und Schild, dann der Text */
  .beitrag__kopf { padding: 96px 0 40px; }
  .beitrag__kopf-raster {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-inline: 0;
  }
  .beitrag__motiv { order: -1; }
  .beitrag__motiv figcaption {
    position: static;
    margin: 0 var(--rand);
    font-size: 12px;
  }
  .beitrag__titel {
    gap: 18px;
    padding: 28px var(--rand) 0;
  }
  .beitrag h1 { font-size: 40px; }
  .beitrag__meta { font-size: 12px; }
  .beitrag__kopf--ohne-motiv { padding: 136px 0 40px; }
  .beitrag__rumpf { padding: 40px 0 64px; }
  .beitrag__reihen { gap: 40px; }
  .beitrag__reihe {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }
  .beitrag__reihe > :not(h2) {
    grid-column: 1;
    max-width: none;
  }
  .beitrag__reihe > h2 { font-size: 24px; }
  .beitrag__text {
    gap: 20px;
    font-size: 17px;
    line-height: 1.65;
  }
  .beitrag__text h3 { font-size: 18px; }
  .beitrag__text .beitrag__satz {
    margin-top: 16px;
    padding-top: 24px;
    font-size: 24px;
    line-height: 1.25;
  }
  .beitrag__reihe > .beitrag__klein { font-size: 12px; }
  .beitrag__quellen,
  .beitrag__herkunft { font-size: 12px; }

  .lese { padding: 56px 0 72px; }
  .weiterlesen { padding: 48px 0 56px; }
  .lese__raster,
  .weiterlesen__raster {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
  .lese__kopf {
    padding-top: 0;
    text-align: center;
  }
  .weiterlesen__raster { row-gap: 20px; }
  .weiterlesen h2 { padding-top: 0; }
  .lese h2,
  .weiterlesen h2 { font-size: 24px; }
  .lese__liste,
  .weiterlesen__liste { max-width: none; }
  .lese h3 { font-size: 20px; }
  .weiter-zeile { padding: 18px 0 20px; }
  .weiter-zeile h3 { font-size: 19px; }
  .weiterlesen .pfeil { margin-top: 16px; }

  /* Lass uns sprechen: untereinander auf der Mittelachse, das Bild in voller Breite */
  .kontakt { padding: 72px 0 56px; }
  .kontakt h2 { font-size: 40px; }
  .kontakt__mail { font-size: 18px; }
  .kontakt__bild {
    width: 100%;
    margin-top: 24px;
  }
  .kontakt__schild {
    right: var(--rand);
    bottom: 20px;
    font-size: 12px;
  }

  .recht { padding: 136px 0 72px; }
  .recht__raster {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }
  .recht__kopf {
    position: static;
    max-height: none;
  }
  .recht__nav {
    max-width: none;
    overflow-y: visible;
  }
  .recht__nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
  }
  .recht__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding-block: 0;
  }
  .recht__text h2 { margin-top: 48px; font-size: 24px; }
  .recht__text dl > div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }
  .fehler { padding: 136px 0 72px; }
  .fehler__block {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }

  .fuss .rahmen {
    padding-top: 56px;
    padding-bottom: 32px;
  }
  .fuss__raster {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 36px;
    padding-bottom: 48px;
    text-align: center;
  }
  .fuss__spalte {
    align-items: center;
    gap: 12px;
  }
  .fuss__unten {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  .fuss__links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pfeil__text,
  .pfeil svg,
  .kopf__link span,
  .kopf__strich,
  .kopf__menue,
  .blatt .kopf__link,
  .kopf .marke,
  .kopf .marke__falz,
  .blatt,
  html:has(#menue:popover-open) .blatt,
  html:has(#menue:popover-open) .kopf .marke:not(:hover),
  html:has(#menue:popover-open) .kopf .marke:not(:hover) .marke__falz,
  html:has(#menue:popover-open) body > :not(.kopf) { transition: none; }
  .pfeil:hover svg { transform: none; }
}