/* 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; }
}

/* Das Menü-Skript aktiviert das Blatt nur nach erfolgreicher Initialisierung.
   Ohne Skript und am Rechner stehen die drei Wege offen im Kopf. */
.kopf__menue,
.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;
}
/* Inhaltsverzeichnis, ab drei Zwischenüberschriften: Sprungmarken ohne Skript. Im Quelltext steht es als
   Erstes im Rumpf. Am Rechner ist es eine stille Liste im Rand rechts vom Lesetext, außerhalb des Flusses,
   und bleibt beim Lesen stehen wie die Abschnitte der Rechtsseiten. Reicht der Rand nicht, steht es über
   dem Einstieg in der Textspalte. */
.beitrag__inhalt {
  max-width: 646px;
  margin-left: calc((100% - 40px) * 416 / 1272 + 40px);
}
.beitrag__inhalt h2 {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau-neben);
}
.beitrag__inhalt ol {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--grau);
}
.beitrag__inhalt a:is(:hover, :focus-visible) {
  color: var(--schwarz);
  text-decoration: underline;
  text-decoration-color: var(--violett);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
@media (min-width: 1200px) {
  .beitrag__reihen--inhalt { position: relative; }
  .beitrag__inhalt {
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--rand);
    width: 178px;
    margin-left: 0;
  }
  /* Der Lesetext lässt dem Verzeichnis 210 px. Bei 1.440 px bleiben ihm die vollen 646 px. */
  .beitrag__reihen--inhalt .beitrag__reihe > :not(h2) { max-width: min(646px, calc(100% - 210px)); }
  .beitrag__inhalt-liste {
    position: sticky;
    top: 32px;
    max-height: calc(100vh - 64px);
    max-height: calc(100svh - 64px);
    padding-top: 9px;
    overflow-y: auto;
  }
  .beitrag__inhalt ol {
    gap: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--grau-neben);
  }
}
.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; }

/* Auf einen Kaffee: der Schluss steht auf der Mittelachse wie eine Einladung. Oben Überschrift,
   der Link zur Buchung und die 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__kaffee {
  font-size: 22px;
  line-height: 1.45;
  color: var(--schwarz);
}
.kontakt__kaffee .pfeil { font-size: inherit; }
.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 nach Initialisierung einen Knopf, der das Menü-Blatt öffnet. Ohne Skript stehen 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. Das Menü schließt erst nach dem vollständigen Klick
     auf einen Weg, unabhängig von Touch-Dauer und Animation. */
  /* Der Platz des Rollbalkens bleibt, damit der Knopf beim Öffnen nicht springt. */
  html { scrollbar-gutter: stable; }

  .kopf__marke,
  html[data-navigation] .kopf__menue {
    position: relative;
    z-index: 2;
  }
  html[data-navigation] .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; }

  html[data-navigation] .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;
    pointer-events: none;
    clip-path: polygon(100% 0, 100% 0, 100% 0);
    transition: clip-path var(--motion-blatt) var(--ease-out-quart),
                visibility 0s var(--motion-blatt);
  }
  html[data-navigation] .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;
  }
  html[data-navigation] .blatt .kopf__link {
    display: block;
    min-height: 0;
  }
  html[data-navigation] .blatt a { touch-action: manipulation; }
  html[data-navigation] .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. */
  html[data-navigation] .blatt .kopf__link { transition: color var(--motion-wipe) var(--ease-out-quart); }
  html[data-navigation] .blatt .kopf__link span {
    background: none;
    padding-bottom: 0;
  }
  html[data-navigation] .blatt nav:has(.kopf__link:focus-visible) .kopf__link:not(:focus-visible) { color: rgb(255 255 255 / .5); }
  @media (hover: hover) {
    html[data-navigation] .blatt nav:has(.kopf__link:hover) .kopf__link:not(:hover) { color: rgb(255 255 255 / .5); }
    html[data-navigation] .blatt__kontakt a:hover {
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 5px;
    }
  }
  html[data-navigation] .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;
  }
  html[data-navigation] .blatt__kontakt a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  html[data-navigation] .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[data-menue-offen] {
    overflow: hidden;
    background: var(--violett);
  }
  html[data-menue-offen] .kopf {
    position: fixed;
    z-index: 20;
  }
  html[data-menue-offen] .blatt {
    visibility: visible;
    pointer-events: auto;
    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[data-menue-offen] .kopf__menue {
    color: var(--weiss);
    transition: none;
  }
  html[data-menue-offen] .kopf__strich--oben { transform: translateY(5px) rotate(45deg); }
  html[data-menue-offen] .kopf__strich--unten { transform: translateY(-5px) rotate(-45deg); }
  html[data-menue-offen] .kopf .marke:not(:hover) {
    background: transparent;
    color: var(--weiss);
    transition: color 0s 45ms, background-color 0s 45ms;
  }
  html[data-menue-offen] .kopf .marke:not(:hover) .marke__falz {
    fill: var(--violett-hell);
    transition: fill 0s 45ms;
  }
  html[data-menue-offen] .kopf :focus-visible { outline-color: var(--weiss); }
  html[data-menue-offen] .kopf ::selection {
    background: var(--weiss);
    color: var(--violett);
  }

  /* 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; }
  /* Das Inhaltsverzeichnis steht als Erstes unter dem Kopf, vor dem Einstieg (Constantin, 07.10.2026),
     als Zeilen zwischen Falzlinien, hoch genug für den Daumen. */
  .beitrag__inhalt {
    max-width: none;
    margin-left: 0;
  }
  .beitrag__inhalt ol {
    gap: 0;
    border-bottom: 1px solid var(--linie);
    font-size: 16px;
  }
  .beitrag__inhalt li { border-top: 1px solid var(--linie); }
  .beitrag__inhalt a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 0 11px;
    text-wrap: balance;
  }
  .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; }

  /* Auf einen Kaffee: untereinander auf der Mittelachse, das Bild in voller Breite */
  .kontakt { padding: 72px 0 56px; }
  .kontakt h2 { font-size: 40px; }
  .kontakt__kaffee,
  .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,
  html[data-navigation] .blatt .kopf__link,
  .kopf .marke,
  .kopf .marke__falz,
  .blatt,
  html[data-navigation] .blatt,
  html[data-navigation] .kopf__menue,
  html[data-menue-offen] .blatt,
  html[data-menue-offen] .kopf .marke:not(:hover),
  html[data-menue-offen] .kopf .marke:not(:hover) .marke__falz { transition: none; }

  .pfeil:hover svg { transform: none; }
}