/*
 * MARIPOSA – Designsystem. Einzige Quelle für Farbe, Schrift, Abstand und Bauteile.
 * Regeln stehen in DESIGN.md; Seiten setzen nur Bauteile zusammen, nie eigene Stile.
 */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
}
/* Ersatz für Helvetica auf Geräten ohne Helvetica (Windows, Android). Wird nur dort geladen. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 300 500; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  /* Farben – Brand Book Kapitel 06, nichts dazuerfinden */
  --noir: #0d0d0d;
  --ivory: #f4efe8;
  --champagne: #c8b08f;
  --taupe: #8a8078;
  --rose: #c9a9a3;
  /* Ableitungen für Flächen und Text auf hellem Grund */
  --stone: #ebe4da;
  --ink: #2b2724;
  --champagne-deep: #8f7756; /* Champagner auf Ivory, nur ab Display-Größe (3.7:1) */
  --taupe-text: #6b625b;     /* Taupe als Schriftfarbe auf hellem Grund (4.9:1); Brand-Taupe nur dekorativ */
  --frame-dark: color-mix(in srgb, var(--ink) 40%, var(--noir)); /* leerer Bildrahmen auf Noir */

  /* Transparenzen der Markenfarben – nur diese Stufen */
  --on-noir-text: rgba(244, 239, 232, .82);  /* Fließtext auf Noir und Nacht */
  --on-noir-muted: rgba(244, 239, 232, .62); /* Labels und Nebentext auf Noir */
  --on-noir-wash: rgba(244, 239, 232, .04);  /* Fläche eines aktiven Felds */
  --line-light: rgba(43, 39, 36, .16);
  --line-dark: rgba(244, 239, 232, .14);
  --champagne-line: rgba(200, 176, 143, .55);
  --rose-wash: rgba(201, 169, 163, .4);

  /* Nachtlicht, Schleier über der Spitze und Bildunterschrift auf dem Foto – die einzigen Verläufe */
  --night-light:
    radial-gradient(42% 52% at 50% 46%, rgba(200, 176, 143, .16), transparent 70%),
    radial-gradient(30% 40% at 14% 88%, rgba(201, 169, 163, .08), transparent 70%),
    radial-gradient(34% 44% at 88% 10%, rgba(138, 128, 120, .12), transparent 70%);
  /* Hero: Mitte dunkel für Wortmarke, Ränder zeigen die Spitze */
  --scrim-hero: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(13, 13, 13, .93) 0%, rgba(13, 13, 13, .78) 45%, rgba(13, 13, 13, .35) 100%);
  /* Inhaltsflächen: Text steht auch am Rand, deshalb nie unter .7 */
  --scrim-content: radial-gradient(ellipse 70% 65% at 50% 50%, rgba(13, 13, 13, .94) 0%, rgba(13, 13, 13, .86) 50%, rgba(13, 13, 13, .72) 100%);
  /* Unterkante eines Fotos mit Beschriftung: hinter der Schrift nie unter 70 % Noir (≥ 5:1 auch auf Weiß) */
  --scrim-caption: linear-gradient(to top, rgba(13, 13, 13, .8) 0, rgba(13, 13, 13, .7) 40px, rgba(13, 13, 13, 0) 100%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Schrift – Brand Book Kapitel 04 */
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Helvetica Now Text", "Helvetica Neue", Helvetica, "Hanken Grotesk", Arial, sans-serif;

  /* Typoskala (1.333) – nur diese Stufen verwenden */
  --t-label: 10.5px;
  --t-small: 13px;
  --t-body: 15px;
  --t-wordmark: 16px; /* Wortmarke in Kopf- und Fußzeile: ergibt ≥ 120 px Breite */
  --t-lede: clamp(19px, 1.9vw, 24px);
  --t-h3: clamp(24px, 2.4vw, 30px);
  --t-h2: clamp(34px, 4.6vw, 64px);
  --t-h1: clamp(44px, 7vw, 104px);
  --t-mark: clamp(34px, 8.4vw, 118px);

  /* Sperrung */
  --track-label: .32em; /* Labels, Navigation */
  --track-mark: .34em;  /* Wortmarke */
  --track-name: .3em;   /* Liniennamen auf Karten */
  --track-caps: .14em;  /* Versal-Überschriften */

  /* Abstände – 8er-Raster */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --section: clamp(80px, 11vw, 168px);
  --section-tight: clamp(48px, 6vw, 92px); /* Fortsetzung desselben Kapitels */
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --measure: 60ch;
  --tap: 44px; /* Mindesthöhe jeder Tippfläche */

  /* Raster: eine Spaltenteilung für alle zweispaltigen Bauteile, damit rechte Spalten auf einer Linie beginnen */
  --cols: minmax(0, 5fr) minmax(0, 6fr);
  --col-gap: clamp(32px, 7vw, 120px);

  /* Bewegung – nur Deckkraft, Transform und Farbe animieren */
  --dur-fast: 200ms;  /* Farbe, Deckkraft */
  --dur-base: 500ms;  /* Linien, Unterstreichungen */
  --dur-slow: 1200ms; /* Bilder, Einblenden */
  --dur-hero: 2200ms; /* Hero beim Laden */
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  --header-h: 64px;
}
@media (max-width: 620px) {
  :root { --track-name: .18em; --track-caps: .08em; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.is-menu-open { overflow: hidden; }
body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font: 300 var(--t-body)/1.7 var(--sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* Kurze Seiten (404) füllen den Bildschirm, der Fuß sitzt immer unten */
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
main { flex: 1 0 auto; display: flex; flex-direction: column; }
main > :last-child { flex-grow: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
strong, b { font-weight: inherit; } /* Kein Fett – Hierarchie über Größe, Abstand, Kontrast */
:focus-visible { outline: 1.5px solid var(--champagne-deep); outline-offset: 4px; }
:is(.tone-noir, .night, .header, .footer) :focus-visible { outline-color: var(--champagne); }
::selection { background: var(--champagne); color: var(--noir); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--noir); color: var(--ivory); padding: 10px 16px; }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Grundbausteine ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }

.eyebrow { font: 400 var(--t-label)/1.9 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; margin-block: 0; text-wrap: balance; } /* nur vertikal, sonst hebt es die Zentrierung von .wrap auf */
.muted { color: var(--taupe-text); }
:is(.tone-noir, .night) .muted { color: var(--on-noir-muted); }
/* Fließtext auf der Spitze braucht mehr Deckkraft als ein Label */
.night .text.muted, .night dd.muted { color: var(--on-noir-text); }
.rule { display: block; width: 32px; height: 1px; border: 0; margin: 0; background: currentColor; opacity: .55; }

.wordmark { font-family: var(--serif); font-size: var(--t-wordmark); font-weight: 500; letter-spacing: var(--track-mark); text-transform: uppercase; margin-right: calc(-1 * var(--track-mark)); text-decoration: none; }

.title {
  font-family: var(--serif); font-weight: 400; line-height: 1.06; letter-spacing: -.005em; margin: 0;
  text-wrap: balance; overflow-wrap: break-word; hyphens: auto; font-variant-numeric: lining-nums;
}
.title--h1 { font-size: var(--t-h1); line-height: 1; }
.title--h2 { font-size: var(--t-h2); }
.title--h3 { font-size: var(--t-h3); line-height: 1.15; }
.title em { font-style: italic; color: var(--champagne-deep); }
:is(.tone-noir, .night) .title em { color: var(--champagne); }
.title--caps { text-transform: uppercase; letter-spacing: var(--track-caps); font-weight: 500; }

.lede { font: 400 var(--t-lede)/1.5 var(--serif); margin: 0; max-width: 34em; text-wrap: pretty; hanging-punctuation: first; }
.text { max-width: var(--measure); }
.text p { margin: 0 0 1.1em; text-wrap: pretty; }
.text p:last-child { margin-bottom: 0; }
p.text { text-wrap: pretty; }
.quote { font: 400 var(--t-lede)/1.5 var(--serif); color: var(--taupe-text); margin: 0; text-wrap: pretty; hanging-punctuation: first; }

/* minmax(0, 1fr): lange Wörter brechen um, statt die Spalte aufzuweiten */
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); align-content: start; }
.stack--tight { gap: var(--s2); }
.stack--loose { gap: var(--s5); }

/* Textlink mit Linie – der einzige Link-Stil für Handlungen */
.more {
  display: inline-flex; align-items: center; gap: 14px; justify-self: start; min-height: var(--tap);
  font: 400 var(--t-label)/1 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase;
  text-decoration: none;
}
.more::after { content: ""; width: 28px; height: 1px; background: currentColor; transition: width var(--dur-base) var(--ease-out); }
.more:hover::after, .more:focus-visible::after { width: 56px; }

/* Rahmenknopf – nur für die eine Hauptaktion einer Seite */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: var(--tap);
  padding: 17px 32px; border: 1px solid currentColor; background: transparent; color: inherit;
  font: 400 var(--t-label)/1 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.button:hover { background: var(--noir); color: var(--ivory); border-color: var(--noir); }
:is(.tone-noir, .night) .button { border-color: var(--champagne-line); }
:is(.tone-noir, .night) .button:hover { background: var(--champagne); color: var(--noir); border-color: var(--champagne); }

/* ---------- Flächen ---------- */
.section { padding-block: var(--section); }
.section--flush-top { padding-top: 0; }
.section--tight-top { padding-top: var(--section-tight); }
.tone-ivory { background: var(--ivory); color: var(--ink); }
.tone-stone { background: var(--stone); color: var(--ink); }
.tone-noir { background: var(--noir); color: var(--ivory); }

/*
 * Nachtgrund: Champagner-Licht + feines Korn, komplett aus CSS.
 * .night ist immer auch eine Noir-Fläche – helle Farbregeln können hier nie greifen.
 */
.night { position: relative; isolation: isolate; overflow: hidden; background: var(--noir); color: var(--ivory); }
.night::before {
  content: ""; position: absolute; inset: -10%; z-index: -2;
  background: var(--night-light), var(--noir);
}
.night::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .2; mix-blend-mode: overlay; pointer-events: none;
  background-image: var(--grain);
}

/*
 * Spitzentextur (aus den Einstellungen als --texture). Gekachelt in Originalgröße,
 * nie hochskaliert – deshalb auf jedem Bildschirm scharf.
 */
/* Nur aktiv, wenn eine Textur gesetzt ist (Layout setzt dann .has-texture). */
.has-texture .night::before {
  background: var(--texture) center top / 1104px auto repeat, var(--noir); /* Kachel liegt in doppelter Auflösung vor */
  filter: grayscale(1) contrast(1.15) brightness(.42);
}
.has-texture .night::after { opacity: 1; mix-blend-mode: normal; background: var(--scrim-content); }
.has-texture :is(.hero, .menu).night::after { background: var(--scrim-hero); }

/* ---------- Kopfzeile ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--ivory);
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.header--solid, body.is-scrolled .header { background: var(--noir); border-bottom-color: var(--line-dark); }
.header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s2); min-height: var(--header-h); }
.header__nav { display: flex; gap: clamp(16px, 2.4vw, 36px); }
.header__nav--end { justify-content: flex-end; }
.header__nav--end a:last-child { margin-right: calc(-1 * var(--track-label)); }
.header__nav a {
  font: 400 var(--t-label)/1 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none;
  opacity: .78; padding-block: 8px; position: relative; transition: opacity var(--dur-fast) var(--ease-out);
}
.header__nav a:hover, .header__nav a[aria-current="page"] { opacity: 1; }
.header__nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: var(--track-label); bottom: 0; height: 1px; background: var(--champagne); }
.header__inner > .wordmark { grid-column: 2; }

/* Menü-Knopf und Schließen teilen Form und Platz, damit beim Umschalten nichts springt */
.toggle {
  display: inline-flex; align-items: center; min-height: var(--tap); grid-column: 3; justify-self: end;
  background: none; border: 0; color: inherit; padding: 0; margin-right: calc(-1 * var(--track-label)); cursor: pointer;
  font: 400 var(--t-label)/1 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase;
}
.header__toggle { display: none; }

/* Menü für schmale Bildschirme: ein modaler Dialog auf Nachtgrund */
.menu {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  color: var(--ivory); padding-top: env(safe-area-inset-top, 0px);
}
.menu[open] { display: grid; grid-template-rows: auto 1fr; }
.menu::backdrop { background: var(--noir); }
.menu__body { display: grid; align-content: center; justify-items: center; text-align: center; gap: var(--s6); padding: var(--s5) var(--gutter); }
.menu__nav { display: grid; justify-items: center; gap: 6px; }
.menu__nav a { font: 400 var(--t-h2)/1.2 var(--serif); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.menu__nav a:hover, .menu__nav a[aria-current="page"] { color: var(--champagne); }

/* ---------- Hero ---------- */
.hero { min-height: min(92vh, 960px); display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 72px) var(--gutter) 120px; }
.hero__mark { width: clamp(110px, 14vw, 180px); margin: 0 auto var(--s4); }
.hero__name { font-size: var(--t-mark); line-height: 1; margin: 0; }
.hero__by { font: italic 400 var(--t-lede)/1.3 var(--serif); color: var(--champagne); margin: var(--s2) 0 var(--s4); letter-spacing: .03em; }
.hero__claim { max-width: 36ch; margin: var(--s2) auto 0; color: var(--on-noir-text); }
/* Ecken stehen auf denselben Kanten wie Kopfzeile und Inhalt, nicht am Bildschirmrand */
.hero__corner { position: absolute; bottom: 34px; color: var(--on-noir-text); text-align: left; white-space: pre-line; margin-right: calc(-1 * var(--track-label)); }
.hero__corner--start { left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); }
.hero__corner--end { right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  .hero__mark { animation: alight var(--dur-hero) var(--ease-out) both; }
  .hero__name { animation: settle var(--dur-hero) var(--ease-out) 250ms both; }
  .hero__by, .hero__claim, .hero .rule { animation: rise var(--dur-slow) var(--ease-out) 900ms both; }
}
@keyframes alight { from { opacity: .35; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: .2; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Seitenkopf für Unterseiten */
.page-head { padding: calc(var(--header-h) + clamp(72px, 10vw, 140px)) 0 clamp(56px, 7vw, 96px); }
.page-head__grid { display: grid; grid-template-columns: var(--cols); gap: var(--col-gap); align-items: end; }

/* ---------- Bilder ---------- */
.figure { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.figure__frame { position: relative; overflow: hidden; background: var(--stone); aspect-ratio: var(--ratio, 4 / 5); }
:is(.tone-noir, .night) .figure__frame { background: var(--frame-dark); }
/* color: transparent versteckt Alt-Text und Bruch-Symbol, falls ein Bild doch nicht lädt */
.figure__frame img { width: 100%; height: 100%; object-fit: cover; color: transparent; transition: filter var(--dur-slow) var(--ease-out); }
a:hover .figure__frame img, a:focus-visible .figure__frame img { filter: brightness(1.06); }
.figure__caption { color: var(--taupe-text); }
:is(.tone-noir, .night) .figure__caption { color: var(--on-noir-muted); }
.figure__overlay { position: absolute; inset: auto 0 0; padding: var(--s5) 18px 14px; background: var(--scrim-caption); color: var(--on-noir-text); }

/* ---------- Raster ---------- */
.split { display: grid; grid-template-columns: var(--cols); gap: var(--col-gap); align-items: start; }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.split--media { align-items: center; }
/* Gespiegelte Zeilen behalten die Bildbreite */
.split--media.split--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.split--flip > :first-child { order: 2; }
.split__sticky { position: sticky; top: calc(var(--header-h) + 40px); }
/* Versal-H1 neben einem Bild eine Stufe kleiner, damit auch lange Namen in die Spalte passen */
.split .title--h1.title--caps { font-size: var(--t-h2); line-height: 1.05; }
/* Abschnittskopf auf derselben Spaltenteilung: Einleitung und Link beginnen auf der gemeinsamen Achse */
.section-head { display: grid; grid-template-columns: var(--cols); gap: var(--s3) var(--col-gap); align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head > .more { justify-self: start; }
.section-head .text { max-width: 40ch; }

/* Drei Spalten; bei zwei Einträgen zwei Spalten, damit kein leeres Drittel bleibt */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) clamp(18px, 2.6vw, 36px); }
.grid-3:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3--stagger > :nth-child(3n + 2) { margin-top: clamp(0px, 8vw, 110px); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); border-top: 1px solid var(--line-light); padding-top: var(--s4); }
:is(.tone-noir, .night) .facts { border-color: var(--line-dark); }
.facts ul { list-style: none; margin: 10px 0 0; padding: 0; font-size: var(--t-body); line-height: 1.9; }
.facts__words { font: 400 var(--t-lede)/1.4 var(--serif); margin: 8px 0 0; white-space: pre-line; }

/* Karte: Linie / Beitrag – gleiche Kanten, gleiche Abstände */
.card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; text-decoration: none; color: inherit; }
.card__title {
  font: 500 var(--t-h3)/1.2 var(--serif); letter-spacing: var(--track-name); margin: 0;
  text-wrap: balance; overflow-wrap: break-word; hyphens: auto; font-variant-numeric: lining-nums;
}
.card__title--post { font-weight: 400; letter-spacing: 0; line-height: 1.15; }
.card p { margin: 0; max-width: 42ch; text-wrap: pretty; }

/* Liste der Seasonal Stories */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-light); }
:is(.tone-noir, .night) .ledger { border-color: var(--line-dark); }
.ledger li { border-bottom: 1px solid var(--line-light); }
:is(.tone-noir, .night) .ledger li { border-color: var(--line-dark); }
.ledger__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: 18px 0; text-decoration: none; }
.ledger__row > .eyebrow { white-space: nowrap; }
.ledger__name {
  min-width: 0; font: 400 var(--t-h3)/1.2 var(--serif); overflow-wrap: break-word; hyphens: auto; font-variant-numeric: lining-nums;
  transition: color var(--dur-fast) var(--ease-out);
}
a.ledger__row:hover .ledger__name, .ledger__name--current { color: var(--champagne-deep); }
:is(.tone-noir, .night) :is(a.ledger__row:hover .ledger__name, .ledger__name--current) { color: var(--champagne); }
.ledger__name--forthcoming { color: var(--taupe-text); }
:is(.tone-noir, .night) .ledger__name--forthcoming { color: var(--on-noir-muted); }
.ledger__row--stacked { display: grid; gap: 6px; justify-content: stretch; }
.ledger__row--stacked > .eyebrow { white-space: normal; }

/* Bildfolge (Hero → Portrait → Close-up → Objekt): Spalten folgen der Anzahl, Formate wechseln 3:4 / 4:5 */
.sequence { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); align-items: end; }
.sequence:has(> :last-child:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sequence:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sequence > :nth-child(odd) .figure__frame { --ratio: 3 / 4; }
.sequence > :nth-child(even) .figure__frame { --ratio: 4 / 5; }

/* Fließtext aus dem Editor */
.rich { max-width: 64ch; font-size: var(--t-body); line-height: 1.8; }
.rich > * { margin: 0 0 1.15em; }
.rich p { text-wrap: pretty; }
.rich h2 { font: 400 var(--t-h3)/1.2 var(--serif); margin-top: 1.6em; text-wrap: balance; }
.rich h3 { font: 500 var(--t-lede)/1.3 var(--serif); margin-top: 1.4em; text-wrap: balance; }
.rich blockquote { margin: 1.6em 0; padding-left: 24px; border-left: 1px solid var(--champagne); font: 400 var(--t-lede)/1.5 var(--serif); color: var(--taupe-text); text-wrap: pretty; }
.rich img { margin-block: 2em; }
.rich ul, .rich ol { padding-left: 1.2em; }

.meta { display: flex; flex-wrap: wrap; gap: 6px 22px; }

/* Weiterblättern am Seitenende */
.next { display: grid; gap: var(--s2); justify-items: center; text-align: center; text-decoration: none; padding-block: clamp(72px, 9vw, 128px); }
.next__title { font: 400 var(--t-h2)/1.05 var(--serif); }
.next .rule { transition: width var(--dur-base) var(--ease-out); }
.next:hover .rule, .next:focus-visible .rule { width: 64px; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); border-top: 1px solid var(--line-light); padding-top: var(--s4); }
.pager a { text-decoration: none; display: grid; gap: 6px; }
.pager a:last-child { text-align: right; }
.pager__title { font: 400 var(--t-h3)/1.25 var(--serif); text-wrap: balance; font-variant-numeric: lining-nums; }

/* Seitenfuß – drei Spalten auf einer Grundlinie mit der Wortmarke */
.footer { background: var(--noir); color: var(--on-noir-muted); border-top: 1px solid var(--line-dark); }
.footer__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); align-items: last baseline; padding-block: var(--s4); }
.footer__brand { display: grid; justify-items: center; gap: 10px; color: var(--ivory); text-decoration: none; padding-block: var(--s1); }
.footer__brand img { width: 38px; }
.footer__nav { display: flex; gap: 0 26px; justify-content: flex-end; flex-wrap: wrap; }
.footer__nav > * { display: inline-flex; align-items: center; min-height: var(--tap); }
.footer__nav > :last-child { margin-right: calc(-1 * var(--track-label)); }
.footer__nav a { text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.footer__nav a:hover { color: var(--ivory); }

/* Rechtstexte */
.credits { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-small); }
.credits a { text-decoration-color: var(--line-light); }
.legal h2 { font: 500 var(--t-h3)/1.25 var(--serif); margin: 44px 0 10px; text-wrap: balance; }
.legal h3 { font: 400 var(--t-label)/1.9 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; margin: 2em 0 .4em; }
.legal p { max-width: 68ch; }
.legal [lang="de"], [lang="de"] .legal { hyphens: auto; }
.gap { background: var(--rose-wash); padding: 0 4px; }


/* ---------- Ergänzende Bauteile ---------- */
.accent { color: var(--champagne-deep); }
:is(.tone-noir, .night) .accent { color: var(--champagne); }
.lede--accent { font-style: italic; color: var(--champagne-deep); }
:is(.tone-noir, .night) .lede--accent { color: var(--champagne); }
.rule--center { margin-inline: auto; }
.crumb { text-decoration: none; padding-block: 12px; }
.crumb:hover { text-decoration: underline; }
.stack--center { justify-items: center; text-align: center; max-width: 680px; margin-inline: auto; }
.stack--center .more { justify-self: center; }
.hero--compact { min-height: 0; }
.mark-large { width: min(100%, 330px); margin-inline: auto; }
.mark-small { width: 56px; }
.facts__note { margin: 6px 0 0; white-space: pre-line; }
.defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s4); margin: 0; border-top: 1px solid var(--line-dark); padding-top: var(--s4); }
.defs dd { margin: 8px 0 0; text-wrap: pretty; }

/* Formularfeld – Linie statt Kasten, wie Briefpapier */
.field { display: flex; align-items: stretch; gap: 0; width: min(100%, 440px); border: 1px solid var(--champagne-line); }
.field__input {
  flex: 1; min-width: 0; background: transparent; border: 0; color: inherit; padding: 0 20px; min-height: var(--tap);
  font: 300 var(--t-body)/1 var(--sans); letter-spacing: .08em;
}
.field__input::placeholder { color: var(--on-noir-muted); letter-spacing: var(--track-label); text-transform: uppercase; }
/* Leeres Feld in Labelgröße: Platzhalter und Knopfbeschriftung teilen eine Grundlinie */
.field__input:placeholder-shown { font-size: var(--t-label); }
.field__input:focus { outline: none; background: var(--on-noir-wash); }
.field:focus-within { border-color: var(--champagne); }
.field .button { border: 0; border-left: 1px solid var(--champagne-line); }

/* Passwortseite (Salon Privé) */
.private { min-height: 100vh; min-height: 100dvh; padding-top: 72px; }
.private__form { width: min(100%, 560px); justify-items: center; text-align: center; gap: 18px; }
.private__mark { width: clamp(86px, 11vw, 118px); }
.private__name { font-size: var(--t-h2); }
.private__name + .hero__by { margin: 0 0 var(--s3); }
.private__legal { margin-top: var(--s5); }
.private__legal a { text-decoration: none; padding-block: 12px; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
  .split, .split--even, .page-head__grid, .section-head { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
  /* Bild und Text bleiben auf dem Tablet nebeneinander, damit der Titel im ersten Bildschirm steht */
  .split--media { grid-template-columns: var(--cols); }
  .split--media.split--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .split__sticky { position: static; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Reine Textraster (Versprechen) bleiben dreispaltig statt 2 + 1 */
  .grid-3:not(:has(> .card)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-3--stagger > :nth-child(3n + 2) { margin-top: 0; }
  .sequence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header__nav { display: none; }
  .header__toggle { display: inline-flex; }
  .footer__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: var(--s1); }
  .footer__nav { justify-content: center; }
  /* Zentrierte gesperrte Zeilen: die Sperrung nach dem letzten Zeichen nicht mitzentrieren, wie bei .wordmark */
  .footer__cities { margin-right: calc(-1 * var(--track-label)); }
}
@media (min-width: 621px) and (max-width: 900px) {
  /* Ungerade letzte Karte: quer über beide Spalten, Bild links, Text rechts – gleiche Bildbreite wie die anderen */
  .grid-3 > .card:last-child:nth-child(odd) {
    grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto) 1fr;
    column-gap: clamp(18px, 2.6vw, 36px);
  }
  .grid-3 > .card:last-child:nth-child(odd) > .figure { grid-row: 1 / -1; }
  .grid-3 > .card:last-child:nth-child(odd) > :not(.figure) { grid-column: 2; }
}
@media (max-width: 620px) {
  .grid-3, .grid-3:not(:has(> .card)), .grid-3:has(> :last-child:nth-child(2)), .facts { grid-template-columns: minmax(0, 1fr); }
  .split--media, .split--media.split--flip { grid-template-columns: minmax(0, 1fr); }
  .split--flip > :first-child { order: 0; }
  /* Ungerade Bildfolge: das erste Bild führt über die volle Breite */
  .sequence:has(> :last-child:nth-child(odd)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sequence > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .hero__corner { position: static; text-align: center; }
  .hero__corners { display: grid; gap: var(--s3); margin-top: 40px; }
  .hero__corner--end { text-align: center; }
  .ledger__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ledger__row > .eyebrow { white-space: normal; }
  .pager { grid-template-columns: 1fr; }
  .pager a:last-child { text-align: left; }
  /* © bewusst in eigener Zeile statt zufällig umgebrochen */
  .footer__nav > span:last-child { flex-basis: 100%; justify-content: center; }
  .footer__nav > :nth-last-child(2) { margin-right: calc(-1 * var(--track-label)); }
}