/* ============================================================
   Trust & Care24 — Design-Relaunch
   Fundament: Tokens · Typografie · Struktur · Signature-Kurve
   Ersetzt atelier.css. Kein Framework, kein Build-Step.
   ============================================================ */

/* ---------- 1. Fonts (self-hosted, keine Drittserver) ---------- */

/* Display — Cormorant SC: ECHTE Kapitälchen als eigene Schnitte.
   Cormorant Garamond + font-variant-caps würde der Browser synthetisieren;
   synthetische Kapitälchen haben gleiche Strichstärke wie Versalien und
   genau das trennt teuer von billig. */
@font-face {
  font-family: 'Cormorant SC';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/cormorant-sc-600-latin.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: 'Cormorant SC';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/cormorant-sc-600-latin-ext.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;
}

/* Cormorant Garamond — Ziffern in Display-Größe, Anführungszeichen */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/cormorant-600-latin.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: 'Cormorant Garamond';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/cormorant-600-latin-ext.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;
}

/* Wordmark & Eyebrow — Cinzel (variabel 400–900, bereits im Projekt) */
@font-face {
  font-family: 'Cinzel';
  font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(/assets/fonts/cinzel-latin.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: 'Cinzel';
  font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(/assets/fonts/cinzel-latinext.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;
}

/* Body — Lato 300/400/700 */
@font-face { font-family:'Lato'; font-style:normal; font-weight:300; font-display:swap;
  src:url(/assets/fonts/lato-300-latin.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:'Lato'; font-style:normal; font-weight:300; font-display:swap;
  src:url(/assets/fonts/lato-300-latin-ext.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:'Lato'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/lato-400-latin.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:'Lato'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/lato-400-latin-ext.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:'Lato'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/assets/fonts/lato-700-latin.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:'Lato'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/assets/fonts/lato-700-latin-ext.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; }


/* ---------- 2. Tokens ---------- */

:root {
  /* Flächen */
  --ivory-000: #FDFBF7;
  --ivory-100: #F9F5ED;
  --ivory-200: #F2EBDD;
  --ivory-300: #E8DEC9;

  /* Gold — nur Linie, Schrift, Ornament */
  --gold-900: #6B5210;
  --gold-700: #8A6A18;
  --gold-500: #B8912F;
  --gold-300: #D4AF37;
  --gold-100: #EFDFA8;

  --gold-metal: linear-gradient(
    118deg,
    #6B5210 0%, #A8821F 18%, #D4AF37 34%,
    #F3E3B0 47%, #D4AF37 58%, #9C7A1C 78%, #6B5210 100%
  );
  --gold-hairline: rgba(184, 145, 47, 0.32);
  --gold-hairline-strong: rgba(184, 145, 47, 0.55);

  /* Text */
  --ink-900: #16120B;
  --ink-700: #2E2820;
  --ink-500: #554C3E;
  --ink-300: #8A8072;

  /* Panels */
  --panel-black: #0B0A08;
  --panel-black-soft: #14120E;

  /* Schatten — warm */
  --shadow-sm: 0 1px 2px rgba(60, 45, 15, 0.06);
  --shadow-md: 0 8px 28px rgba(60, 45, 15, 0.10);
  --shadow-lg: 0 24px 64px rgba(60, 45, 15, 0.14);

  /* Raster */
  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(4.5rem, 9.5vh, 8.5rem);
  --frame-inset: clamp(14px, 1.6vw, 28px);
  --shell-max: 1320px;
  --head-h: 60px;                    /* Höhe der klebenden Kopfleiste */
  --curve-gap: clamp(1.75rem, 3.2vw, 3.25rem);  /* Luft zwischen Text und Sichelkante */
  --figure-max: 1500px;              /* ab hier wächst die Bildfläche nicht weiter */

  /* Schrift-Familien */
  --ff-display: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
  --ff-numeral: 'Cormorant Garamond', Georgia, serif;
  --ff-caps: 'Cinzel', 'Cormorant SC', Georgia, serif;
  --ff-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Schriftgrößen */
  --fs-display:  clamp(2.6rem, 6.2vw, 5.4rem);
  --fs-h2:       clamp(2rem, 4.2vw, 3.4rem);
  --fs-h3:       clamp(1.15rem, 1.7vw, 1.45rem);
  --fs-lead:     clamp(1.05rem, 1.5vw, 1.2rem);
  --fs-body:     clamp(0.95rem, 1.1vw, 1.0625rem);
  --fs-eyebrow:  clamp(0.72rem, 0.95vw, 0.84rem);
  --fs-caption:  0.78rem;

  /* Bewegung */
  --ease-out-luxe: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 620ms;
}


/* ---------- 3. Basis ---------- */

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

html {
  color-scheme: light;               /* kein Auto-Dark-Invert */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ivory-000);
  color: var(--ink-700);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.68;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }

::selection { background: var(--gold-100); color: var(--ink-900); }

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

.u-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;
}

.u-skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 200;
  background: var(--ivory-000); color: var(--gold-700);
  border: 1px solid var(--gold-500); padding: 0.6rem 1.1rem;
  font-family: var(--ff-caps); font-size: var(--fs-eyebrow); letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none;
  transition: top 200ms var(--ease-out-luxe);
}
.u-skip:focus { top: calc(var(--frame-inset) + 0.75rem); }


/* ---------- 4. Typografie ---------- */

.display, .h1, .h2, .h3 {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--gold-700);
  margin: 0;
  letter-spacing: 0.005em;
  line-height: 1.04;
  text-wrap: balance;
}
.display, .h1 { font-size: var(--fs-display); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.2; }

/* Gold-Verlauf auf Sektionstiteln — Fallback ist die Basisfarbe oben */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .gold-metal {
    background-image: var(--gold-metal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.eyebrow {
  font-family: var(--ff-caps);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin: 0;
  line-height: 1.4;
}

/* Die Augenbraue steht sonst überall dort auf Stoß am Titel, wo kein
   .section__head den Abstand setzt — also in allen Split-Sektionen. */
.eyebrow + :is(.h1, .h2, .h3, .display) { margin-top: 0.9rem; }

.lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: var(--measure);
  margin: 0;
}

/* Kein hartes text-align: left — sonst stehen Absätze in zentrierten
   Blöcken schief und im arabischen RTL-Layout auf der falschen Seite.
   Die Ausrichtung erbt vom Container, Voreinstellung ist damit „start". */
p { max-width: var(--measure); margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* In zentrierten Kontexten muss auch der Absatz-Block mittig sitzen,
   nicht nur sein Text — sonst hängt eine kurze Zeile links am Rand. */
:where(.pillars, .flow, .countries, .section--center, [data-align="center"]) p { margin-inline: auto; }

.caption {
  font-size: var(--fs-caption);
  color: var(--ink-300);
  letter-spacing: 0.04em;
}

.numeral {
  font-family: var(--ff-numeral);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

a { color: var(--gold-700); text-decoration: none; }

.link {
  position: relative;
  display: inline-block;
  padding-bottom: 1px;
}
.link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform 200ms var(--ease-out-luxe);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }


/* ---------- 5. Layout-Grundgerüst ---------- */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* Sprungziele dürfen nicht unter der klebenden Kopfleiste landen.
   Höhe der Leiste + Rahmeneinzug + Luft. */
:where(section, div, h1, h2, h3)[id] { scroll-margin-top: calc(var(--head-h) + var(--frame-inset) + 1.25rem); }

.section--tint { background: var(--ivory-100); }

.section__head { margin-bottom: clamp(2rem, 4vh, 3.25rem); }
.section__head .eyebrow { margin-bottom: 0.9rem; }
.section__head .h2 { margin-bottom: 0.85rem; }

.stack > * + * { margin-top: var(--stack-gap, 1.2rem); }


/* ---------- 6. Goldrahmen (fix, dekorativ) ---------- */

.frame {
  position: fixed;
  inset: var(--frame-inset);
  pointer-events: none;
  /* unter der Kopfleiste (80): sonst zieht der Rahmen zwei Goldlinien
     quer durch Wortmarke und Navigation */
  z-index: 60;
  border: 1px solid var(--gold-hairline);
}
.frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--gold-hairline);
}
@media (max-width: 640px) {
  :root { --frame-inset: 10px; }
  .frame::after { display: none; }
}


/* ---------- 7. Fleuron ---------- */

.fleuron {
  display: block;
  width: 130px; height: 14px;
  margin: 1.1rem 0 0;
  color: var(--gold-500);
}
.fleuron--center { margin-inline: auto; }


/* ---------- 8. Icon-Medaillons ---------- */

.medallion {
  --medallion-size: 60px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--medallion-size);
  height: var(--medallion-size);
  border: 1.25px solid var(--gold-hairline);
  border-radius: 50%;                 /* eine der zwei erlaubten Rundungen */
  background: transparent;
  color: var(--gold-500);
  transition: border-color 240ms var(--ease-out-luxe);
}
/* 42 % statt 46 %: bei 60 px Ring landet das Symbol auf 25 px und seine
   Strichstärke (1,25 im viewBox 24) damit auf ~1,3 px — dieselbe Linie
   wie der Ring. Vorher war das Symbol schwerer als sein Rahmen. */
.medallion svg { width: 42%; height: 42%; }
.medallion:hover,
a:hover > .medallion,
.row:hover .medallion { border-color: var(--gold-500); }

.medallion--num {
  position: relative;
}
.medallion--num .medallion__num {
  font-family: var(--ff-numeral);
  font-size: 1.15rem;
  color: var(--gold-700);
  line-height: 1;
}

@media (max-width: 900px) {
  .medallion { --medallion-size: 48px; }
}


/* ---------- 9. Listen-Zeile ---------- */

.rows { list-style: none; margin: 0; padding: 0; }

.row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
  padding-block: clamp(1.1rem, 2.4vh, 1.7rem);
  border-bottom: 1px solid var(--gold-hairline);
}
.row:last-child { border-bottom: 0; }

.row__title {
  font-family: var(--ff-caps);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin: 0 0 0.45rem;
  line-height: 1.3;
}
.row__text { margin: 0; color: var(--ink-700); max-width: 54ch; }

/* Zeilen ohne Medaillon — z. B. die namentlich benannten Partner.
   Ein generisches Personen-Piktogramm neben einem Namen trägt keine
   Information, die der Name nicht schon trägt. */
.rows--plain .row { grid-template-columns: 1fr; }

/* Vertikaltrenner — nur wo die Vorlage ihn zeigt (Services, Why Off-Market) */
.rows--ruled .row > :last-child {
  border-left: 1px solid var(--gold-hairline);
  padding-left: clamp(1rem, 2vw, 1.75rem);
}

/* 2×3-Raster (Who We Work With), Icon zentriert über Text */
.grid-cells {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
}
.cell { text-align: center; }
.cell .medallion { margin-inline: auto; margin-bottom: 0.9rem; }
.cell .row__title { text-align: center; }
.cell .row__text { margin-inline: auto; max-width: 34ch; text-align: center; }


/* ---------- 10. Zitat-Panels ---------- */

.quote {
  position: relative;
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.6rem, 3.5vw, 3rem);
  border: 1px solid var(--gold-500);
}
.quote::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid var(--gold-hairline);
  pointer-events: none;
}
.quote__mark {
  position: absolute;
  font-family: var(--ff-numeral);
  font-size: 4rem;
  line-height: 1;
  color: var(--gold-500);
  opacity: 0.85;
  pointer-events: none;
}
.quote__mark--open  { top: 0.35rem; left: 1rem; }
.quote__mark--close { bottom: -0.6rem; right: 1rem; }

.quote__text {
  margin: 0;
  font-family: var(--ff-caps);
  font-size: clamp(0.9rem, 1.35vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.85;
  text-transform: uppercase;
  max-width: 46ch;
}
.quote__point { display: block; margin-top: 0.9rem; }

.quote--black {
  background: var(--panel-black);
  color: #FFFFFF;
}
.quote--black .quote__point { color: var(--gold-300); }

.quote--ivory {
  background: var(--ivory-100);
  color: var(--ink-900);
  box-shadow: var(--shadow-md);
}
.quote--ivory .quote__point { color: var(--gold-700); }


/* ---------- 11. Buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.85rem 1.9rem;
  border: 1px solid var(--gold-hairline-strong);
  background: transparent;
  color: var(--gold-700);
  font-family: var(--ff-caps);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 240ms var(--ease-out-luxe), background-color 240ms var(--ease-out-luxe);
}
.btn:hover, .btn:focus-visible {
  border-color: var(--gold-500);
  background: var(--ivory-100);
}
.btn--on-black {
  border-color: var(--gold-hairline-strong);
  color: var(--gold-300);
}
.btn--on-black:hover, .btn--on-black:focus-visible {
  border-color: var(--gold-300);
  background: rgba(212, 175, 55, 0.08);
}


/* ---------- 12. Confidential-Leiste ---------- */

.confidential {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(2.4rem, 5vh, 3.6rem);
  padding: 0.8rem clamp(0.95rem, 2vw, 1.4rem);
  background: var(--ivory-200);
  border-inline-start: 2px solid var(--gold-hairline-strong);
  color: var(--gold-900);
  font-size: var(--fs-caption);
  /* Ein ganzer Satz in gesperrten Versalien ist auf 360 px eine Wand.
     Der Hinweis bleibt klein, wird aber wieder lesbar. */
  letter-spacing: 0.03em;
  text-transform: none;
  line-height: 1.55;
  text-wrap: pretty;
}
.confidential svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--gold-500); }


/* ---------- 13. Signature — Sichel-Kurve ---------- */

.split {
  position: relative;
  padding-block: 0;                   /* Abstand kommt aus .split__body */
  min-height: clamp(720px, 92vh, 1040px);
  display: grid;
  align-items: center;
  isolation: isolate;
  /* Breite der Bildfläche und Deckel der Textspalte an einer Stelle,
     damit einzelne Sektionen das Verhältnis kippen können. */
  /* Zwei Größen für dieselbe Fläche, mit Absicht:
     --figure-w  ist die tatsächliche Breite der Bildfläche. 100% statt 100vw,
                 weil vw die Scrollbar mitrechnet — sonst schiebt jede
                 Bildfläche die Seite auf dem Desktop um die Scrollbarbreite
                 nach rechts und es entsteht horizontaler Scroll.
     --figure-vw ist derselbe Wert viewportbasiert. Die Textspalte misst ihren
                 Platz am Fenster (siehe .split__text) und braucht deshalb
                 einen Wert, der in ihrem eigenen Containing Block nicht
                 plötzlich auf die Shell-Breite zusammenfällt. */
  --figure-w: min(100%, var(--figure-max));
  --figure-vw: min(100vw, var(--figure-max));
  --text-cap: 44rem;
}

/* Breite Variante nach Deck-Frame 2: schmalere Bildfläche, dafür Platz
   für ein dreispaltiges Raster in der Textspalte. */
.split--wide {
  --figure-max: 48vw;
  --text-cap: 64rem;
}

/* Bild + Goldkante liegen in derselben Box, damit die Kante auf der
   Kurve sitzt und nicht vom clip-path des Bildes abgeschnitten wird. */
/* Die Sichel ist in Prozent der Bildfläche definiert. Läuft die Fläche
   über die ganze Fensterbreite, wandert ihre Kante auf breiten Schirmen
   immer weiter in die Textspalte — bei 2560 px blieben dem Text 339 px.
   Gedeckelt bleibt das Bild randlos zur eigenen Seite und die Kante steht.
   Physische Seiten statt logischer: RTL wird hier über den gespiegelten
   clip-path geregelt, sonst kippte die Fläche zweimal. */
.split__figure {
  position: absolute;
  top: 0; bottom: 0;
  right: 0; left: auto;
  width: var(--figure-w);
  z-index: 0;
}
.split--mirror .split__figure { left: 0; right: auto; }
[dir="rtl"] .split__figure { left: 0; right: auto; }
[dir="rtl"] .split--mirror .split__figure { right: 0; left: auto; }

.split__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: url(#tc-curve);
}
.split--mirror .split__media { clip-path: url(#tc-curve-mirror); }

.split__media picture,
.split__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Parallax läuft auf dieser Ebene, max. 6 % */
.split__media-inner {
  position: absolute;
  inset: -6% 0;
  will-change: transform;
}

/* Lesbarkeits-Overlay an den Kanten, kein Sepia, keine Sättigungsänderung */
.split__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,10,8,0.28) 0%, rgba(11,10,8,0) 38%),
    linear-gradient(180deg, rgba(11,10,8,0.18) 0%, rgba(11,10,8,0) 30%, rgba(11,10,8,0) 70%, rgba(11,10,8,0.28) 100%);
  pointer-events: none;
}

/* Goldkante entlang der Kurve */
.split__edge {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}
.split__edge path { fill: none; vector-effect: non-scaling-stroke; }
/* Weicher Lichtabfall über drop-shadow statt zweiter versetzter Linie:
   unter nicht-uniformer SVG-Skalierung würde ein fester 2-px-Versatz
   je nach Viewport unterschiedlich weit von der Kante liegen. */
.split__edge .edge-glow {
  stroke: var(--gold-100);
  stroke-width: 3;
  opacity: 0.5;
  filter: drop-shadow(0 0 3px rgba(239, 223, 168, 0.8));
}
.split__edge .edge-line { stroke: rgba(184, 145, 47, 0.8); stroke-width: 1.25; }
.split__edge .edge--h { display: none; }

.split__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--section-y);
}
/* Die Sichel bauscht bis 58 % der Fensterbreite aus (gespiegelt: sie
   schneidet bei 42 % ein). Der Shell ist dagegen bei 1320 px gedeckelt.
   Eine feste Prozentbreite für die Textspalte lässt den Abstand zur
   Goldkante deshalb mit wachsendem Fenster schrumpfen: bei 1440 px
   blieben 30 px, ab etwa 1600 px lagen die Medaillons auf der Kurve.

   Die Spalte misst ihren Platz jetzt am Abstand zur Kurve statt am
   Shell. Beide Seiten ergeben dieselbe Rechnung, weil die Kurve
   symmetrisch gespiegelt wird — eine Regel genügt für beide. */
.split__text {
  max-width: min(
    var(--text-cap),
    calc(
      100vw
      - 0.58 * var(--figure-vw)                /* weiteste Ausbuchtung der Sichel */
      - var(--curve-gap)
      - (100vw - min(100vw, var(--shell-max))) / 2
      - var(--gutter)
    )
  );
}
/* logisch, damit RTL ohne Sonderregel richtig sitzt */
.split--mirror .split__text { margin-inline-start: auto; }

/* Mobile: Kurve wird flacher horizontaler Bogen, Bild oben */
@media (max-width: 900px) {
  .split {
    min-height: 0;
    display: block;
  }
  .split__figure {
    position: relative;
    inset: auto;
    height: 64vh;
    min-height: 380px;
    max-height: 620px;
  }
  .split__media,
  .split--mirror .split__media { clip-path: url(#tc-curve-h); }
  .split__media-inner { inset: 0; }
  .split__edge .edge--v { display: none; }
  .split__edge .edge--h { display: block; }
  .split__media::after {
    background: linear-gradient(180deg, rgba(11,10,8,0.20) 0%, rgba(11,10,8,0) 45%, rgba(11,10,8,0.22) 100%);
  }
  .split__body { padding-block: clamp(2.5rem, 7vh, 4rem) var(--section-y); }
  .split__text,
  .split--mirror .split__text { max-width: none; margin-inline-start: 0; }
}


/* ---------- 13b. Bildband — volle Fensterbreite zwischen zwei Sektionen ----------

   Die Sichel-Sektionen zeigen ihr Bild nur auf der halben Fläche. Damit die
   Objektbilder auch als Bild wirken und nicht als Hintergrund, steht zwischen
   den unteren Sektionen jeweils ein Band über die ganze Breite. Höhe ist an
   die Fensterbreite gekoppelt, damit der 21:9-Schnitt nicht zur Leiste wird. */

.band {
  position: relative;
  /* <figure> bringt vom Browser margin: 1em 40px mit — ohne Reset steht das
     Band 40 px eingerückt und schiebt die Seite nach rechts. */
  margin: 0;
  width: 100%;
  overflow: hidden;
  background: var(--ink-900);
  height: clamp(420px, 46vw, 760px);
  border-block: 1px solid var(--gold-hairline);
}
.band picture { display: block; width: 100%; height: 100%; }
.band img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,10,8,0.30) 0%, rgba(11,10,8,0) 34%, rgba(11,10,8,0) 58%, rgba(11,10,8,0.52) 100%);
  pointer-events: none;
}
.band__caption {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(1.4rem, 4vw, 3rem);
  z-index: 1;
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  text-align: center;
  padding-inline: var(--gutter);
  color: #fff;
}
.band__caption .eyebrow { color: var(--gold-300); }
.band__caption p {
  margin: 0;
  font-family: var(--ff-display);
  font-size: clamp(1.15rem, 2.2vw, 2rem);
  line-height: 1.25;
  max-width: 46rem;
  text-shadow: 0 1px 24px rgba(11, 10, 8, 0.6);
}
@media (max-width: 900px) {
  .band { height: clamp(340px, 62vw, 520px); }
}


/* ---------- 14. Seidenband (genau 2× im Projekt) ---------- */

.silk {
  position: absolute;
  z-index: 1;
  height: auto;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.55;
}
.silk--hero   { top: 0; left: 0; width: min(46vw, 620px); }
.silk--footer { bottom: 0; right: 0; width: min(40vw, 520px); }


/* ---------- 15. Bewegung ---------- */

/* Ohne JS bleibt alles sichtbar — die Klasse setzt ein Inline-Skript im <head>. */
.has-js .reveal {
  opacity: 0;
  transform: translateY(14px);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-reveal) var(--ease-out-luxe),
    transform var(--dur-reveal) var(--ease-out-luxe);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Wordmark-Shimmer — genau einmal beim Laden */
.wordmark {
  font-family: var(--ff-caps);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-700);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .wordmark--shimmer {
    background-image: var(--gold-metal);
    background-size: 220% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: tc-shimmer 1400ms var(--ease-out-luxe) 1 forwards;
  }
}
@keyframes tc-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

/* ---------- 16. Kopf & Navigation ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 80;
  /* Deckend, nicht 0.92: Blur ist per Vorgabe verboten, und bei 8 %
     Transparenz schoben sich Sektionstitel und schwarze Zitatpanels
     sichtbar durch die Leiste. Ohne Blur gibt es nur deckend oder unsauber. */
  background: var(--ivory-000);
  border-bottom: 1px solid var(--gold-hairline);
  transition: box-shadow 260ms var(--ease-out-luxe);
}
/* Erst beim Scrollen löst sich die Leiste optisch vom Inhalt ab. */
.site-head.is-stuck { box-shadow: 0 14px 28px -22px rgba(60, 45, 15, 0.55); }
.site-head__inner {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: 0.85rem var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.site-head .wordmark { font-size: clamp(0.95rem, 1.5vw, 1.15rem); text-decoration: none; }
.site-nav { display: flex; gap: clamp(0.9rem, 2vw, 1.9rem); margin-left: auto; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--ff-caps);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.site-nav a:hover, .site-nav a[aria-current] { color: var(--gold-700); }
.langsw { display: flex; gap: 0.55rem; font-family: var(--ff-caps); font-size: var(--fs-caption); letter-spacing: 0.14em; }
.langsw a { color: var(--ink-300); }
.langsw a[aria-current] { color: var(--gold-700); }
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;                      /* Daumenfläche, nicht Mausfläche */
  padding: 0.5rem 1rem;
  border: 1px solid var(--gold-hairline-strong);
  background: transparent;
  color: var(--gold-700);
  font-family: var(--ff-caps);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
/* Drei Striche aus einem Element — beim Öffnen werden zwei davon zum Kreuz */
.nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 12px;
  flex: 0 0 auto;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: currentColor;
  transition: transform 320ms var(--ease-out-luxe), opacity 200ms linear;
}
/* Mittlerer Strich als Schlagschatten des oberen — spart ein Element. */
.nav-toggle__bars::before { top: 0; box-shadow: 0 6px 0 0 currentColor; }
.nav-toggle__bars::after { bottom: 0; }
.site-head.is-open .nav-toggle__bars::before {
  top: 50%;
  box-shadow: none;
  transform: translateY(-50%) rotate(45deg);
}
.site-head.is-open .nav-toggle__bars::after { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* Sechs Menüpunkte statt vier: zwischen Aufklapp-Menü und breitem Schirm
   muss die Leiste enger gesetzt werden, sonst bricht sie in zwei Reihen. */
@media (min-width: 901px) {
  .site-nav { flex-wrap: nowrap; order: 2; }
  .site-nav a { white-space: nowrap; }
  /* Im Markup steht die Sprachwahl vor dem Menü, damit sie auf dem Telefon
     neben dem Schalter sitzt. Auf dem Schirm gehört sie ans Ende. */
  .langsw { order: 3; margin-inline-start: clamp(1rem, 2vw, 2rem); }
}
@media (min-width: 901px) and (max-width: 1480px) {
  .site-head__inner { gap: clamp(0.8rem, 1.8vw, 1.4rem); }
  .site-nav { gap: clamp(0.7rem, 1.3vw, 1.15rem); }
  .site-nav a { letter-spacing: 0.1em; }
}

/* ---------- Aufklapp-Menü auf dem Telefon ----------
   Vorher: eine schmale Liste, die die Seite nach unten schob, und ein
   Schalter, der über der Sprachwahl lag. Jetzt eine eigene Fläche unter
   der Kopfleiste, mit Schriftgröße zum Antippen, Handlung und Direktkontakt. */
@media (max-width: 900px) {
  .site-head__inner { flex-wrap: nowrap; gap: 0.75rem; padding-inline: clamp(1rem, 4vw, 1.6rem); }
  /* Der Schriftzug brach zweizeilig um und lief unter das Wappen. */
  .site-head .wordmark {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-inline-end: auto;
    min-width: 0;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }
  .site-head .crest { width: 28px; margin: 0; flex: 0 0 auto; }
  .langsw { order: 2; margin-left: 0; }
  .nav-toggle { display: inline-flex; order: 3; margin-left: 0; }

  .site-nav {
    position: fixed;
    inset: var(--head-h) 0 0 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: clamp(1.2rem, 5vw, 2rem) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
    background: var(--ivory-000);
    border-top: 1px solid var(--gold-hairline);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem);
    transition: opacity 260ms var(--ease-out-luxe), transform 320ms var(--ease-out-luxe), visibility 0s linear 320ms;
  }
  .site-head.is-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding-block: 0.55rem;
    border-bottom: 1px solid var(--gold-hairline);
    font-family: var(--ff-display);
    font-size: clamp(1.45rem, 6vw, 1.95rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--ink-900);
  }
  /* Zählung als stiller Anker links, wie die Ziffern im Ablauf */
  .site-nav > a::before {
    content: counter(navitem, decimal-leading-zero);
    counter-increment: navitem;
    margin-inline-end: 1rem;
    font-family: var(--ff-caps);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--gold-500);
  }
  .site-nav { counter-reset: navitem; }
  .site-nav a[aria-current] { color: var(--gold-700); }

  /* Gestaffeltes Einblenden der Einträge */
  .site-nav > a {
    opacity: 0;
    transform: translateY(0.6rem);
  }
  .site-head.is-open .site-nav > a {
    opacity: 1;
    transform: none;
    transition: opacity 380ms var(--ease-out-luxe), transform 420ms var(--ease-out-luxe);
    transition-delay: calc(90ms + var(--i, 0) * 45ms);
  }

  .site-nav__foot {
    margin-top: auto;
    padding-top: clamp(1.5rem, 5vw, 2.2rem);
    border-top: 1px solid var(--gold-hairline);
    display: grid;
    gap: 1.1rem;
    justify-items: start;
  }
  .site-nav__foot .btn { width: 100%; text-align: center; padding-block: 1rem; }
  .site-nav__contact {
    display: grid;
    gap: 0.75rem;
    width: 100%;
  }
  .site-nav__contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0;
    border: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    letter-spacing: 0.01em;
    color: var(--ink-500);
  }
  .site-nav__contact svg {
    width: 18px; height: 18px;
    fill: none; stroke: var(--gold-500); stroke-width: 1.25;
  }
  .site-nav__contact a::before { content: none; }

  body.nav-open { overflow: hidden; }
}

/* Auf schmalen Geräten trägt der Schalter nur noch das Zeichen — „Schließen"
   schob sich sonst über den rechten Rand hinaus. */
@media (max-width: 560px) {
  .nav-toggle { padding: 0.5rem; min-width: 44px; justify-content: center; gap: 0; }
  /* Auf 390 px trafen Schriftzug und Sprachwahl aufeinander. Das Wappen
     allein trägt die Marke, der Name bleibt für Vorleseprogramme da. */
  .site-head .wordmark { font-size: 0; gap: 0; }
  .site-head .crest { width: 32px; }
  .nav-toggle__label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Auf dem Schirm ist der Menüfuß überflüssig — dort trägt die Kopfleiste
   alle Punkte und die Fußzeile den Kontakt. */
@media (min-width: 901px) {
  .site-nav__foot { display: none; }
}

/* Unter 480 px teilen sich Wappen, Sprachwahl und Schalter die Leiste.
   Die Sprachwahl bleibt sichtbar — dreisprachige Seite. Das Balkensymbol
   liegt in .nav-toggle__bars, hier wird nur noch enger gestellt. */
@media (max-width: 480px) {
  .site-head__inner { gap: 0.5rem; padding-inline: 1rem; }
  .langsw { font-size: 0.72rem; gap: 0.4rem; }
  .site-head .crest { width: 28px; }
}


/* ---------- 17. Hero ---------- */

/* Zweigeteilt: Textspalte auf Elfenbein, Bildfläche rechts hinter der
   Sichel-Kurve. Der Hero führt damit dasselbe Motiv ein, das jede weitere
   Sektion trägt — statt Text auf Foto, wo Gold nie sauber sitzt. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(620px, 88vh, 960px);
  display: grid;
  align-items: center;
  background: var(--ivory-000);
  /* Auf dem Deckblatt teilt sich die Seite etwa hälftig. Mit einer über
     die ganze Breite laufenden Bildfläche bliebe der Textspalte nur ein
     Drittel — der fünfzeilige Titel bräche dann in acht Zeilen. */
  --figure-w: min(100%, 52vw);
  --figure-vw: min(100vw, 52vw);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  clip-path: url(#tc-curve);
}
[dir="rtl"] .hero__media { clip-path: url(#tc-curve-mirror); }
.hero__media picture,
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Die Goldkante liegt auf derselben Fläche wie der Bildstapel, sonst
   läuft sie an einer anderen Stelle als die Sichel. */
.hero__edge {
  position: absolute;
  top: 0; bottom: 0;
  right: 0; left: auto;
  z-index: 1;
  width: var(--figure-w);
  height: 100%;
  pointer-events: none;
}
[dir="rtl"] .hero__edge { left: 0; right: auto; }
.hero__edge path { fill: none; vector-effect: non-scaling-stroke; }
.hero__edge .edge-glow { stroke: var(--gold-100); stroke-width: 3; opacity: 0.5; filter: drop-shadow(0 0 3px rgba(239,223,168,0.8)); }
.hero__edge .edge-line { stroke: rgba(184, 145, 47, 0.8); stroke-width: 1.25; }
.hero__edge .edge--h { display: none; }
[dir="rtl"] .hero__edge { transform: scaleX(-1); }

.crest {
  display: block;
  width: clamp(52px, 5vw, 72px);
  height: auto;
  margin-bottom: 0.7rem;
}
.site-head .crest { width: 30px; margin: 0 0.6rem 0 0; }
[dir="rtl"] .site-head .crest { margin: 0 0 0 0.6rem; }
.site-head .wordmark { display: flex; align-items: center; }
.foot .crest { width: 44px; margin-bottom: 0.8rem; }

.hero__dossier {
  margin-top: clamp(1.6rem, 3.5vh, 2.6rem);
  border: 1px solid var(--gold-hairline-strong);
  background: var(--panel-black);
  color: #FFFFFF;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.2rem, 2.4vw, 1.8rem);
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.8rem);
}
.hero__dossier .numeral { font-size: clamp(1.3rem, 2.1vw, 1.8rem); color: var(--gold-300); display: block; white-space: nowrap; }
.hero__dossier .label {
  display: block;
  font-family: var(--ff-caps); font-size: var(--fs-caption);
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.6);
  margin-top: 0.3rem;
}
.hero__dossier .rule { width: 1px; align-self: stretch; background: var(--gold-hairline); }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,10,8,0.30) 0%, rgba(11,10,8,0) 45%),
    linear-gradient(180deg, rgba(11,10,8,0.20) 0%, rgba(11,10,8,0) 35%, rgba(11,10,8,0.34) 100%);
}
.hero__body {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--shell-max);
  margin-inline: auto;
  padding: calc(var(--section-y) * 0.55) var(--gutter);
  /* Der Kasten spannt über die volle Breite und liegt damit auch über dem
     Bildstapel. Ohne Durchreichen schluckt seine leere rechte Hälfte
     Klicks und deckt die Bildunterschrift ab. */
  pointer-events: none;
}
.hero__body > * { pointer-events: auto; }
/* Gleiche Rechnung wie bei den Split-Sektionen: die Spalte misst ihren
   Platz am Abstand zur Sichelkante, nicht an einem festen Prozentwert. */
.hero__text {
  max-width: min(
    52rem,
    calc(
      100vw
      - 0.58 * var(--figure-vw)
      - var(--curve-gap)
      - (100vw - min(100vw, var(--shell-max))) / 2
      - var(--gutter)
    )
  );
}
.hero .wordmark {
  display: inline-block;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  color: var(--gold-700);
}
.hero__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 3.8vw, 3.7rem);   /* schmale Spalte trägt keine 5,4 rem */
  line-height: 1.06;
  color: var(--gold-700);
  margin: 1.1rem 0 0;
  max-width: 17ch;
  text-wrap: balance;
}
.hero__lead { margin-top: 1.2rem; }

/* ---------- 17b. Hero nach Deck-Frame 1 ---------- */

/* Vier Motive übereinander statt eines Vollbilds — wie auf dem Deckblatt. */
.hero__stack {
  position: absolute;
  top: 0; bottom: 0;
  right: 0; left: auto;
  width: var(--figure-w);
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  overflow: hidden;
  clip-path: url(#tc-curve);
}
[dir="rtl"] .hero__stack { left: 0; right: auto; clip-path: url(#tc-curve-mirror); }
.hero__stack figure { position: relative; margin: 0; overflow: hidden; }
/* picture ist von Haus aus inline und gibt dem Bild keine Höhe — ohne
   display:block bleibt jede Rasterzeile teilweise leer. */
.hero__stack picture { display: block; width: 100%; height: 100%; }
.hero__stack img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Haarlinie zwischen den Motiven, nicht am äußeren Rand */
.hero__stack figure + figure::before {
  content: "";
  position: absolute; inset-inline: 0; inset-block-start: 0; height: 1px;
  background: rgba(253, 251, 247, 0.5);
  z-index: 2;
}
.hero__stack::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,10,8,0.30) 0%, rgba(11,10,8,0) 34%);
  pointer-events: none;
}
/* Grund für die Bildunterschrift. Das oberste Motiv ist nicht zwangsläufig
   dunkel — ohne Abdunklung steht die Zeile auf hellem Himmel und ist weg. */
.hero__stack::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 30%;
  z-index: 2;
  background: linear-gradient(180deg, rgba(11, 10, 8, 0.66) 0%, rgba(11, 10, 8, 0.34) 45%, rgba(11, 10, 8, 0) 100%);
  pointer-events: none;
}

/* Bildunterschrift oben rechts auf dem ersten Motiv */
.hero__stack-cap {
  position: absolute;
  z-index: 3;
  inset-block-start: clamp(1.4rem, 4vh, 3rem);
  inset-inline-end: clamp(1.4rem, 3vw, 3rem);
  text-align: end;
  text-shadow: 0 1px 12px rgba(11, 10, 8, 0.6);
}
.hero__stack-cap b,
.hero__stack-cap span {
  display: block;
  font-family: var(--ff-caps);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
}
.hero__stack-cap b { font-size: clamp(0.95rem, 1.5vw, 1.35rem); font-weight: 600; color: #FFFFFF; }
/* Helles Gold statt --gold-300: die Zeile steht auf einem Foto, dessen
   Helligkeit nicht feststeht, und muss auch über einer Poolfläche halten. */
.hero__stack-cap span { font-size: clamp(0.72rem, 1vw, 0.85rem); color: var(--gold-100); }
.hero__stack-cap span:last-child { color: rgba(255, 255, 255, 0.94); }

/* Claim unter der Wortmarke */
.hero__claim {
  margin: 0.7rem 0 0;
  font-family: var(--ff-caps);
  font-size: clamp(0.7rem, 0.95vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-500);
  max-width: none;
}

/* Fünfzeiliger Titel: Zeilen wechseln zwischen Tinte und Gold. */
.hero__lockup {
  margin: clamp(1.6rem, 3.5vh, 2.6rem) 0 0;
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink-900);
}
.hero__lockup span { display: block; }
.hero__lockup .lk-1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.hero__lockup .lk-2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); color: var(--gold-700); }
.hero__lockup .lk-3,
.hero__lockup .lk-4 { font-size: clamp(1.25rem, 2.5vw, 1.95rem); line-height: 1.2; }
.hero__lockup .lk-5 { font-size: clamp(1.25rem, 2.5vw, 1.95rem); line-height: 1.2; color: var(--gold-700); }
.hero__rule { display: block; width: 84px; height: 2px; background: var(--gold-500); margin: clamp(1.1rem, 2.5vh, 1.7rem) 0 0; }

/* Merkmalsliste des Deckblatts: Medaillon links, Haarlinie zwischen Zeilen */
.hero__facts { list-style: none; margin: clamp(1.6rem, 3.5vh, 2.4rem) 0 0; padding: 0; }
.hero__facts li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(0.9rem, 2vw, 1.5rem);
  align-items: center;
  padding-block: clamp(0.8rem, 1.8vh, 1.2rem);
}
.hero__facts li + li { border-top: 1px solid var(--gold-hairline); }
.hero__facts h2 {
  margin: 0;
  font-family: var(--ff-caps);
  font-size: clamp(0.82rem, 1.1vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.hero__facts p { margin: 0.3rem 0 0; font-size: var(--fs-body); color: var(--ink-700); max-width: 46ch; }
.hero__facts .numeral {
  display: block;
  font-family: var(--ff-numeral);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  color: var(--gold-700);
  margin-top: 0.15rem;
}
.hero__facts .note {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--ff-caps);
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* Vertraulichkeitskasten am Fuß des Deckblatts */
.confidential--box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(0.9rem, 2vw, 1.4rem);
  align-items: center;
  margin-top: clamp(1.8rem, 4vh, 2.6rem);
  padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2.4vw, 1.6rem);
  background: transparent;
  border: 1px solid var(--gold-hairline-strong);
  color: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  line-height: inherit;
}
.confidential--box svg { width: 22px; height: 22px; }
/* Nur die Textspalte ansprechen. Vorher traf `.confidential--box span`
   auch das Medaillon daneben und zog es aus dem Raster. */
.confidential--box > div > b,
.confidential--box > div > span { display: block; }
.confidential--box > div > b {
  font-family: var(--ff-caps);
  font-size: clamp(0.74rem, 0.95vw, 0.84rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--gold-700);
}
/* Die beiden Zeilen darunter sind Sätze, keine Etiketten: gesperrte
   Versalien brachen auf dem Telefon in fünf Zeilen um. */
.confidential--box > div > span {
  margin-top: 0.35rem;
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.55;
  color: var(--ink-500);
  text-wrap: pretty;
}
.confidential--box > div > span:last-child { color: var(--ink-300); }

/* Kontaktleiste unter dem Hero, wie die Fußzeile des Deckblatts */
.contactbar { border-block: 1px solid var(--gold-hairline); background: var(--ivory-100); }
.contactbar__inner {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: clamp(0.9rem, 2vh, 1.3rem) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem clamp(1.2rem, 3vw, 2.6rem);
}
.contactbar a, .contactbar span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  color: var(--ink-700);
  text-decoration: none;
}
.contactbar a:hover { color: var(--gold-700); }
.contactbar svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--gold-500); }
.contactbar .sep { width: 1px; height: 1.1em; background: var(--gold-hairline); padding: 0; }
@media (max-width: 760px) { .contactbar .sep { display: none; } }

@media (max-width: 900px) {
  .hero__stack {
    clip-path: url(#tc-curve-h);
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
  }
  .hero__stack figure + figure::before { display: none; }
  .hero__stack-cap { inset-block-start: clamp(1rem, 3vh, 1.6rem); }
  /* Im 2x2-Feld sitzt die Unterschrift über der oberen rechten Kachel,
     deren Helligkeit nicht vorhersehbar ist — Verlauf tiefer ziehen. */
  .hero__stack::before {
    height: 46%;
    background: linear-gradient(180deg, rgba(11, 10, 8, 0.74) 0%, rgba(11, 10, 8, 0.4) 50%, rgba(11, 10, 8, 0) 100%);
  }
}


.markers {
  list-style: none;
  margin: clamp(1.6rem, 3vh, 2.4rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.2rem, 3vw, 2.2rem);
}
.markers li {
  font-family: var(--ff-caps);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-700);
  padding: 0.4rem 0;
  position: relative;
}
/* Trennstriche zwischen den Markern entfallen: beim Umbruch stünde sonst
   ein Strich am Zeilenanfang. Stattdessen rahmt eine Haarlinie die Reihe. */
.markers {
  border-block: 1px solid var(--gold-hairline);
  padding-block: 0.5rem;
}

.chips { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li {
  border: 1px solid var(--gold-hairline);
  color: var(--ink-500);
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
}

.hero__cta { margin-top: clamp(1.8rem, 3.5vh, 2.6rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }


@media (max-width: 900px) {
  .hero { min-height: 0; display: block; }
  .hero__media {
    position: relative;
    inset: auto;
    height: 46vh;
    min-height: 280px;
    max-height: 420px;
    clip-path: url(#tc-curve-h);
  }
  [dir="rtl"] .hero__media { clip-path: url(#tc-curve-h); }
  .hero__media::after { background: linear-gradient(180deg, rgba(11,10,8,0.18) 0%, rgba(11,10,8,0) 45%, rgba(11,10,8,0.24) 100%); }
  .hero__edge {
    position: relative;
    inset: auto;
    width: 100%;
    height: 46vh; min-height: 280px; max-height: 420px;
    margin-top: calc(-1 * min(46vh, 420px));
  }
  .hero__edge .edge--v { display: none; }
  .hero__edge .edge--h { display: block; }
  /* Der Bildstapel liegt auf schmalen Schirmen als 2x2-Feld über dem Text,
     nicht mehr als Spalte daneben. */
  .hero__stack,
  [dir="rtl"] .hero__stack {
    position: relative;
    inset: auto;
    width: 100%;
    height: 46vh; min-height: 280px; max-height: 420px;
    clip-path: url(#tc-curve-h);
  }
  .hero__body { padding-block: clamp(2rem, 6vh, 3.2rem) var(--section-y); }
  .hero__text { max-width: none; }
  .hero__dossier { max-width: none; }
}


/* ---------- 18. Portfolio ---------- */

.range {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.6rem, 4vw, 3rem);
  background: var(--ivory-100);
  border-block: 1px solid var(--gold-hairline);
  text-align: center;
}
/* Auf getönten Sektionen hat die Spanne dieselbe Fläche wie ihr Grund —
   dann sieht man nur zwei Haarlinien statt eines Panels. */
.section--tint .range { background: var(--ivory-000); }
.range__value { font-family: var(--ff-numeral); font-weight: 600; font-size: clamp(2.2rem, 5.4vw, 4.4rem); line-height: 1; color: var(--gold-700); }
.range__rule { width: clamp(2rem, 8vw, 7rem); height: 1px; background: var(--gold-hairline-strong); }
.range__label { display: block; font-family: var(--ff-caps); font-size: var(--fs-eyebrow); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-300); margin-top: 0.6rem; }

/* Länderreihe rein typografisch. Vorher trug jeder der sechs Einträge
   denselben Globus — sechs identische Icons tragen keine Information,
   sie machen nur Lärm. Als Haarlinien-Band nimmt die Reihe dasselbe
   Motiv auf wie die Marker-Leiste im Hero. */
.countries {
  list-style: none;
  margin: clamp(2rem, 4vh, 3rem) 0 0;
  padding: clamp(0.9rem, 2vw, 1.3rem) 0;
  border-block: 1px solid var(--gold-hairline);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem clamp(1.6rem, 4.5vw, 3.6rem);
}
.countries li { width: auto; text-align: center; }
.countries span {
  font-family: var(--ff-caps);
  font-weight: 600;
  font-size: clamp(0.82rem, 1.1vw, 0.95rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.mosaic {
  position: relative;
  margin-top: clamp(2.5rem, 5vh, 4rem);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(110px, 15vw, 210px);
  gap: 10px;
}
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic > *:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.mosaic > *:nth-child(2) { grid-column: span 2; }
.mosaic > *:nth-child(3) { grid-column: span 2; }
.mosaic > *:nth-child(4) { grid-column: span 2; }
.mosaic > *:nth-child(5) { grid-column: span 2; }
/* Die Kennzahl sitzt in einer eigenen Rasterzelle statt mittig über dem
   Mosaik. Als Overlay verdeckte sie das größte Bild genau in der Mitte —
   das Motiv war weg und die Zahl stand auf unruhigem Grund. */
.mosaic__panel {
  grid-column: span 2;
  display: grid;
  align-content: center;
  background: var(--panel-black);
  color: #FFFFFF;
  padding: clamp(1.2rem, 2.5vw, 2rem) clamp(1.2rem, 2.5vw, 2rem);
  text-align: center;
  border: 1px solid var(--gold-500);
}
.mosaic__panel .numeral { font-size: clamp(2.4rem, 5vw, 3.8rem); color: var(--gold-300); display: block; }
.mosaic__panel span { font-family: var(--ff-caps); font-size: var(--fs-eyebrow); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.82); }
@media (max-width: 640px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic > *:nth-child(n) { grid-column: span 2; grid-row: span 1; }
}


/* ---------- 18a. Bausteine aus Deck-Frame 2 ---------- */

/* Unterzeile unter dem Titel: Versalien, gesperrt, zwischen zwei
   Haarlinien — im Deck trägt sie „STRONG RELATIONSHIPS. …". */
.subline {
  margin: 1.1rem 0 0;
  padding-block: 0.75rem;
  border-block: 1px solid var(--gold-hairline);
  font-family: var(--ff-caps);
  font-size: clamp(0.74rem, 1vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-700);
  max-width: none;
}

/* Zellenraster mit durchgehenden Goldlinien. Die Linien liegen als
   Innenschatten auf den Zellen statt als Rahmen — so entsteht genau ein
   Strich zwischen zwei Zellen und keiner am Rand des Rasters. */
/* Genau drei Spalten — auto-fit hätte bei breiter Textspalte vier daraus
   gemacht und die Linienrechnung unten (jede dritte Zelle) zerlegt. */
.cells {
  list-style: none;
  margin: clamp(2rem, 4vh, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
@media (max-width: 760px) { .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .cells { grid-template-columns: 1fr; } }
/* Alles unter .cells scopen — .cell trägt schon das ältere Raster
   .grid-cells auf derselben Seite. */
.cells > .cell {
  text-align: center;
  padding: clamp(1.3rem, 2.6vw, 2rem) clamp(0.9rem, 2vw, 1.5rem);
  box-shadow:
    inset 1px 0 0 var(--gold-hairline),
    inset 0 1px 0 var(--gold-hairline);
}
/* Erste Spalte und erste Zeile tragen keine Linie nach außen. */
.cells > .cell:nth-child(3n + 1) { box-shadow: inset 0 1px 0 var(--gold-hairline); }
.cells > .cell:nth-child(-n + 3) { box-shadow: inset 1px 0 0 var(--gold-hairline); }
.cells > .cell:first-child { box-shadow: none; }
.cells > .cell .medallion { margin-inline: auto; margin-bottom: 0.9rem; }
.cells > .cell h3 {
  margin: 0 0 0.5rem;
  font-family: var(--ff-caps);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-700);
  line-height: 1.35;
}
.cells > .cell p { margin: 0; margin-inline: auto; font-size: var(--fs-caption); line-height: 1.7; color: var(--ink-500); }

@media (max-width: 760px) {
  /* Bei zwei Spalten greift die 3er-Rechnung nicht mehr — Linien nur noch
     als einfacher Rahmen um jede Zelle, sonst stehen sie krumm. */
  .cells > .cell,
  .cells > .cell:nth-child(3n + 1),
  .cells > .cell:nth-child(-n + 3),
  .cells > .cell:first-child { box-shadow: inset 0 1px 0 var(--gold-hairline); }
}

/* Schlussband: Siegel links, zwei Zeilen rechts. */
.pledge {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  margin-top: clamp(2rem, 4vh, 3rem);
  padding: clamp(1rem, 2.2vw, 1.5rem) clamp(1.2rem, 2.5vw, 2rem);
  border: 1px solid var(--gold-hairline-strong);
}
/* Siegel links, Text mittig im Rest — wie im Deck. */
.pledge p { flex: 1 1 auto; text-align: center; }
@media (max-width: 560px) {
  .pledge { flex-direction: column; text-align: center; }
}
.pledge__seal {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1.25px solid var(--gold-500);
  border-radius: 50%;
  color: var(--gold-500);
}
.pledge__seal svg { width: 20px; height: 20px; }
.pledge p { margin: 0; max-width: none; }
.pledge__lead,
.pledge__point {
  display: block;
  font-family: var(--ff-caps);
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
}
.pledge__lead { color: var(--ink-700); }
.pledge__point { color: var(--gold-700); }

/* Zitattafel über dem Bild — im Deck sitzt sie unten rechts auf dem Foto. */
.split__quote {
  position: absolute;
  z-index: 3;
  /* Nicht ganz unten: dort bauscht die Sichel am weitesten nach rechts
     und die Tafel läge mit ihrer linken Hälfte auf dem Elfenbein statt
     auf dem Foto. Auf etwa zwei Dritteln Höhe steht die Kante weit genug
     links. */
  inset-block-end: 26%;
  inset-inline-end: clamp(1rem, 2.2vw, 2.2rem);
  width: min(290px, 56%);
  padding: clamp(1.3rem, 2.5vw, 2rem);
  background: var(--panel-black);
  border: 1px solid var(--gold-500);
  color: #FFFFFF;
}
.split__quote::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid var(--gold-hairline);
  pointer-events: none;
}
.split__quote p {
  margin: 0;
  max-width: none;
  font-family: var(--ff-caps);
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.85;
  text-transform: uppercase;
}
.split__quote .accent { display: block; margin-top: 0.7rem; color: var(--gold-300); }
@media (max-width: 900px) {
  /* Auf schmalen Schirmen liegt das Bild oben und ist flach — die Tafel
     wandert darunter in den Textfluss. */
  .split__quote {
    position: static;
    width: auto;
    margin: clamp(1.5rem, 4vh, 2.5rem) 0 0;
  }
}


/* ---------- 18b2. Länder-Portfolio (Deck-Frame 3) ---------- */

.pf-grid {
  list-style: none;
  margin: clamp(2rem, 4vh, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(228px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  /* Jede Kachel nur so hoch wie ihr Inhalt. Auf gleiche Zeilenhöhe
     gestreckt stünde unter Katar mit zwei Städten ein halber leerer
     Kasten, neben Spanien mit neun. */
  align-items: start;
}

/* Bildkachel statt Textkasten: Motiv oben mit dem Land auf dunklem Fuß,
   Städte darunter auf Elfenbein. Dieselbe Bauart wie die Leistungskarten,
   damit das Portfolio nicht wie eine eingeklebte Tabelle wirkt. */
.pf-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gold-hairline);
  background: var(--ivory-000);
  overflow: hidden;
  transition: border-color 260ms var(--ease-out-luxe), box-shadow 260ms var(--ease-out-luxe);
}
.pf-card:hover { border-color: var(--gold-500); box-shadow: var(--shadow-md); }

.pf-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.pf-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,10,8,0) 38%, rgba(11,10,8,0.72) 100%);
}
.pf-card h3 {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  inset-block-end: 0;
  margin: 0;
  padding: 0.7rem clamp(0.8rem, 1.6vw, 1.05rem);
  font-family: var(--ff-caps);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  line-height: 1.3;
  text-shadow: 0 1px 10px rgba(11, 10, 8, 0.7);
}

.pf-card__body { padding: clamp(0.85rem, 1.8vw, 1.15rem); }
.pf-card__label {
  margin: 0 0 0.5rem;
  font-family: var(--ff-caps);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-300);
  max-width: none;
}
.pf-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.pf-card ul li {
  position: relative;
  padding-inline-start: 0.8rem;
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--ink-700);
}
/* Punkt statt Listenmarke, damit er in RTL mitwandert */
.pf-card ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 3px; height: 3px;
  background: var(--gold-500);
}

/* Merkmalsreihe unter dem Raster */
.pf-feats {
  list-style: none;
  margin: clamp(1.6rem, 3.5vh, 2.4rem) 0 0;
  padding: clamp(1rem, 2vw, 1.4rem) 0;
  border-block: 1px solid var(--gold-hairline);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: center;
}
.pf-feats > li { display: flex; align-items: center; gap: 0.8rem; }
.pf-feats .medallion { --medallion-size: 42px; }
.pf-feats span { font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-500); }
.pf-feats b {
  display: block;
  font-family: var(--ff-caps);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.pf-feats__claim { justify-content: center; }
.pf-feats__claim span {
  font-family: var(--ff-display);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  letter-spacing: 0.02em;
  color: var(--gold-700);
  text-align: center;
}


/* ---------- 18b. Standorte ----------
   Übernommen aus der Vorgängerversion, neu gebaut im aktuellen System:
   Haarlinien statt Karten, keine Radien, kein Blur. Links die Orte als
   Registerliste, rechts die zugehörige Aufnahme. */

.geo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(1.6rem, 3.5vw, 3.2rem);
  align-items: start;
}

/* Die Zeilen rücken alle gleich ein und die Liste tritt um denselben
   Betrag heraus. So bleibt der Text optisch an der Überschrift, die
   aktive Fläche darf trotzdem über die Textkante hinausgehen — und
   beim Wechsel springt nichts, weil sich kein Innenabstand ändert. */
.geo__list {
  --geo-pad: clamp(0.7rem, 1.6vw, 1.1rem);
  display: grid;
  align-content: start;
  margin-inline: calc(-1 * var(--geo-pad));
  border-top: 1px solid var(--gold-hairline);
}

.geo__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 clamp(0.9rem, 2vw, 1.6rem);
  width: 100%;
  padding: clamp(0.95rem, 2vh, 1.35rem) var(--geo-pad);
  border: 0;
  border-bottom: 1px solid var(--gold-hairline);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color 260ms var(--ease-out-luxe);
}
.geo__n {
  font-family: var(--ff-numeral);
  font-size: 0.95rem;
  color: var(--gold-500);
  letter-spacing: 0.04em;
}
.geo__place b {
  display: block;
  font-family: var(--ff-caps);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-700);
  line-height: 1.3;
}
.geo__place small {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-caption);
  color: var(--ink-500);
}
.geo__coord {
  font-family: var(--ff-numeral);
  font-size: var(--fs-caption);
  color: var(--ink-300);
  white-space: nowrap;
}

.geo__row:hover { background: var(--ivory-100); }
.geo__row[aria-selected="true"] {
  background: var(--ivory-100);
  padding-inline-start: clamp(0.7rem, 1.6vw, 1.1rem);
  box-shadow: inset 2px 0 0 var(--gold-500);
}
[dir="rtl"] .geo__row[aria-selected="true"] { box-shadow: inset -2px 0 0 var(--gold-500); }
.geo__row[aria-selected="true"] .geo__n { color: var(--gold-700); }

.geo__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--gold-hairline);
  overflow: hidden;
  background: var(--ivory-100);
}
.geo__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 420ms var(--ease-out-luxe);
}
.geo__slide[hidden] { display: block; }      /* hidden steuert nur die Semantik */
.geo__slide.is-active { opacity: 1; }
.geo__slide img { width: 100%; height: 100%; object-fit: cover; }

.geo__cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: clamp(0.8rem, 2vw, 1.2rem);
  background: linear-gradient(180deg, rgba(11, 10, 8, 0) 0%, rgba(11, 10, 8, 0.72) 100%);
  color: #FFFFFF;
}
.geo__cap b {
  font-family: var(--ff-caps);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.geo__cap span { font-family: var(--ff-numeral); font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.82); }

@media (max-width: 900px) {
  .geo { grid-template-columns: 1fr; }
  /* Bild zuerst: auf schmalen Schirmen liegt die Liste sonst über dem
     Motiv, das sie erklärt. */
  .geo__stage { order: -1; }
}
@media (max-width: 480px) {
  .geo__row { grid-template-columns: auto minmax(0, 1fr); }
  .geo__coord { grid-column: 2; margin-top: 0.3rem; }
}


/* ---------- 18c. Leistungskarten (aus der Vorgängerversion) ---------- */

.pcards {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.pcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--gold-hairline);
  background: var(--ivory-000);
  text-decoration: none;
  color: inherit;
  transition: border-color 260ms var(--ease-out-luxe), box-shadow 260ms var(--ease-out-luxe);
}
.pcard:hover { border-color: var(--gold-500); box-shadow: var(--shadow-md); }
.pcard__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 620ms var(--ease-out-luxe); }
.pcard:hover .pcard__media img { transform: scale(1.03); }
.pcard__badge {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  padding: 0.35rem 0.75rem;
  background: var(--panel-black);
  color: var(--gold-300);
  font-family: var(--ff-caps); font-size: var(--fs-caption);
  font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
}
.pcard__body { padding: clamp(1rem, 2vw, 1.4rem); display: grid; gap: 0.4rem; align-content: start; }
.pcard__body h3 {
  margin: 0;
  font-family: var(--ff-caps); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-700);
}
.pcard__loc {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: var(--fs-caption); color: var(--ink-300);
}
.pcard__loc svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--gold-500); }
.pcard__body p { margin: 0.25rem 0 0; font-size: var(--fs-body); color: var(--ink-700); }


/* ---------- 18d. Pakete ---------- */

.plans {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: stretch;
}
.plan {
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--gold-hairline);
  background: var(--ivory-000);
}
.plan__tag {
  font-family: var(--ff-caps); font-size: var(--fs-caption); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-700);
}
.plan__price {
  margin-top: 0.7rem;
  font-family: var(--ff-numeral); font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.1; color: var(--gold-700);
}
.plan__price small { font-size: 0.42em; letter-spacing: 0.06em; color: var(--ink-300); }
.plan__feat { list-style: none; margin: 1.2rem 0 1.8rem; padding: 0; display: grid; gap: 0.65rem; }
.plan__feat li { display: grid; grid-template-columns: 18px 1fr; gap: 0.6rem; align-items: start; font-size: var(--fs-body); }
.plan__feat svg { width: 18px; height: 18px; margin-top: 0.2em; color: var(--gold-500); }
.plan .btn { margin-top: auto; align-self: start; }

/* Empfohlenes Paket auf Schwarz — dieselbe Sprache wie Dossier und Zitat */
.plan--feature {
  background: var(--panel-black);
  border-color: var(--gold-500);
  color: #FFFFFF;
}
.plan--feature .plan__tag,
.plan--feature .plan__price { color: var(--gold-300); }
.plan--feature .plan__price small,
.plan--feature .plan__feat li { color: rgba(255, 255, 255, 0.86); }
.plan--feature .plan__feat svg { color: var(--gold-300); }
.plan--feature .btn { border-color: var(--gold-500); color: var(--gold-300); }
.plan--feature .btn:hover { background: rgba(212, 175, 55, 0.12); }


/* ---------- 18e. Partnerkarte ---------- */

.partner-card {
  /* Nicht auf Spaltenhöhe ziehen — sonst steht unter der Anschrift ein
     halber Bildschirm leerer Kasten. */
  align-self: start;
  display: grid;
  grid-template-columns: clamp(96px, 12vw, 148px) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.8rem);
  align-items: start;
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  border: 1px solid var(--gold-hairline);
  background: var(--ivory-000);
}
.partner-card img { width: 100%; aspect-ratio: 210 / 318; object-fit: cover; object-position: 50% 12%; border: 1px solid var(--gold-hairline); }
.partner-card__name {
  font-family: var(--ff-display); font-weight: 600;
  font-size: var(--fs-h3); color: var(--gold-700); margin: 0 0 0.2rem;
}
.partner-card__role {
  font-family: var(--ff-caps); font-size: var(--fs-caption);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-300);
  margin: 0 0 0.8rem;
}
.partner-card__meta { display: grid; gap: 0.45rem; font-size: var(--fs-caption); color: var(--ink-500); margin: 0; }
.partner-card__meta span { display: grid; grid-template-columns: 16px 1fr; gap: 0.5rem; align-items: start; }
.partner-card__meta svg { width: 16px; height: 16px; margin-top: 0.15em; color: var(--gold-500); }
@media (max-width: 480px) {
  .partner-card { grid-template-columns: 1fr; }
  .partner-card img { max-width: 148px; }
}


/* ---------- 19. Prozess-Schritte ---------- */

.steps { list-style: none; margin: 0; padding: 0; }
.steps .row { position: relative; }
.steps .row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--medallion-size, 60px) / 2);
  top: calc(var(--medallion-size, 60px) + 1.3rem);
  bottom: 0.2rem;
  border-left: 1px dotted var(--gold-hairline-strong);
}

/* Vier Schritte horizontal (Strategic Partnerships) */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); }
.flow li { position: relative; text-align: center; }
.flow .medallion { margin-inline: auto; margin-bottom: 0.8rem; }
.flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--medallion-size, 60px) / 2);
  right: calc(-1 * clamp(0.6rem, 1.5vw, 1rem));
  width: clamp(1.2rem, 3vw, 2rem);
  border-top: 1px dotted var(--gold-hairline-strong);
}
@media (max-width: 640px) { .flow li:not(:last-child)::after { display: none; } }


/* ---------- 20. Checkliste ---------- */

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 0.9rem;
  align-items: start;
  padding-block: 0.7rem;
}
.checklist li + li { border-top: 1px solid var(--gold-hairline); }
.checklist .tick {
  width: 26px; height: 26px;
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gold-500);
}
.checklist .tick svg { width: 14px; height: 14px; }

.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(1.6rem, 4vw, 3.2rem); }


/* ---------- 21. Kontakt ---------- */

.contact-rows { list-style: none; margin: 0; padding: 0; }
.contact-rows li { display: flex; align-items: center; gap: 1.1rem; padding-block: 0.85rem; border-bottom: 1px solid var(--gold-hairline); }
.contact-rows li:last-child { border-bottom: 0; }
.contact-rows .label { display: block; font-family: var(--ff-caps); font-size: var(--fs-caption); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-300); }
.contact-rows a, .contact-rows .value { color: var(--ink-700); }

.qr {
  display: inline-block;
  padding: 12px;
  border: 1px solid var(--gold-500);
  background: var(--ivory-000);
}
.qr img { width: 148px; height: 148px; }

.pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(1.2rem, 3vw, 2.2rem); }
.pillars li { text-align: center; }
.pillars .medallion { margin-inline: auto; margin-bottom: 0.7rem; }
.pillars h3 { font-family: var(--ff-caps); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-700); margin: 0 0 0.35rem; }
.pillars p { font-size: var(--fs-caption); color: var(--ink-500); margin: 0; }

.form { display: grid; gap: 1.1rem; max-width: 34rem; }
.form label { font-family: var(--ff-caps); font-size: var(--fs-caption); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); display: block; margin-bottom: 0.4rem; }
.form input, .form textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--gold-hairline);
  background: var(--ivory-000);
  color: var(--ink-700);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
}
.form input:focus-visible, .form textarea:focus-visible { border-color: var(--gold-500); }
.form textarea { min-height: 9rem; resize: vertical; }
.form .consent {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-500);
  margin-bottom: 0;
}
.form .consent input { width: auto; }


/* ---------- 22. Footer ---------- */

.foot {
  position: relative;
  overflow: hidden;
  background: var(--ivory-100);
  border-top: 1px solid var(--gold-hairline);
  padding-block: clamp(3rem, 7vh, 5rem) 0;
}
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: clamp(1.6rem, 4vw, 3rem); position: relative; z-index: 2; }
.foot h4 { font-family: var(--ff-caps); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-700); margin: 0 0 0.9rem; }
.foot__links { display: grid; gap: 0.5rem; }
.foot__links a, .foot__bar a { color: var(--ink-500); font-size: var(--fs-caption); letter-spacing: 0.06em; }
.foot__links a:hover, .foot__bar a:hover { color: var(--gold-700); }
.foot__bar {
  position: relative; z-index: 2;
  margin-top: clamp(2rem, 5vh, 3.4rem);
  padding-block: 1.1rem;
  border-top: 1px solid var(--gold-hairline);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; justify-content: space-between;
  font-size: var(--fs-caption); color: var(--ink-300);
}
.foot__bar nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.foot__made {
  position: relative; z-index: 2;
  margin: 0;
  max-width: none;
  padding-block: 0 1.3rem;
  text-align: end;
  font-family: var(--ff-caps);
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  color: var(--ink-300);
}
.foot__made a { color: var(--ink-500); font-weight: 600; letter-spacing: 0.06em; }
.foot__made a:hover { color: var(--gold-700); }
.foot__made i { font-style: normal; color: var(--gold-500); }


/* ---------- 23. Cookie-Hinweis ---------- */

.cookie {
  position: fixed;
  left: var(--frame-inset); right: var(--frame-inset); bottom: var(--frame-inset);
  z-index: 120;
  background: var(--ivory-000);
  border: 1px solid var(--gold-500);
  padding: clamp(1rem, 2.5vw, 1.6rem);
  box-shadow: var(--shadow-lg);
  display: none;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cookie[data-show="true"] { display: flex; }
.cookie p { font-size: var(--fs-caption); margin: 0; max-width: 60ch; }
.cookie__row { display: flex; gap: 0.7rem; flex-wrap: wrap; }


/* ---------- 24. Seitenkopf (Unterseiten) ---------- */

.pagehead {
  position: relative;
  padding-block: calc(var(--section-y) * 0.72) calc(var(--section-y) * 0.5);
  border-bottom: 1px solid var(--gold-hairline);
  background: var(--ivory-100);
}
.pagehead h1 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.06;
  color: var(--gold-700);
  margin: 0.7rem 0 0;
  max-width: 22ch;
}
.pagehead .lead { margin-top: 1.2rem; }

.pagehead--media { background: var(--ivory-000); }
.pagehead__strip {
  margin-top: clamp(1.8rem, 4vh, 3rem);
  height: clamp(180px, 26vh, 300px);
  overflow: hidden;
  position: relative;
}
.pagehead__strip img { width: 100%; height: 100%; object-fit: cover; }
.pagehead__strip::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,10,8,0.15) 0%, rgba(11,10,8,0) 40%, rgba(11,10,8,0.28) 100%);
}


/* ---------- 25. Team & Partnerkarten ---------- */

.team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(1.6rem, 4vw, 3rem); }
.team__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border: 1px solid var(--gold-hairline); }
.team__name { font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h3); color: var(--gold-700); margin: 1rem 0 0.2rem; }
.team__role { font-family: var(--ff-caps); font-size: var(--fs-caption); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-300); margin: 0 0 0.7rem; }
.team__bio { margin: 0; font-size: var(--fs-body); }
.team__meta { margin-top: 0.7rem; font-size: var(--fs-caption); color: var(--ink-500); display: grid; gap: 0.25rem; }


/* ---------- 26. Rechtstexte & übernommene Alt-Inhalte ---------- */

.legal { max-width: 78ch; }
.legal h1, .legal .lg-pagehead__title {
  display: block;
  font-family: var(--ff-display); font-weight: 600;
  font-size: var(--fs-h2); line-height: 1.06; color: var(--gold-700);
  margin: 0 0 1.2rem;
}
.legal h2, .legal .lg-h2 {
  display: block;
  font-family: var(--ff-display); font-weight: 600;
  font-size: var(--fs-h3); color: var(--gold-700);
  margin: 2.2rem 0 0.7rem;
}
.legal h3 {
  font-family: var(--ff-caps); font-size: 0.86rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-700);
  margin: 1.6rem 0 0.5rem;
}
.legal p, .legal li { color: var(--ink-700); }
.legal p { max-width: none; }
.legal ul, .legal ol { padding-left: 1.25rem; margin: 0 0 1.1rem; }
.legal li { margin-bottom: 0.35rem; }
.legal a { color: var(--gold-700); text-decoration: underline; text-underline-offset: 3px; }
.legal strong, .legal b { font-weight: 700; color: var(--ink-900); }
.legal hr { border: 0; border-top: 1px solid var(--gold-hairline); margin: 2rem 0; }
.legal img { max-width: 100%; height: auto; }

/* Neutralisierung der alten Layout-Container */
.legal [class*="lg-wrap"],
.legal [class*="lg-section"],
.legal [class*="lg-pagehead"],
.legal [class*="lg-prose"],
.legal [class*="lg-legal"],
.legal [class*="lg-band"] {
  display: block; max-width: none; margin: 0; padding: 0; background: none; border: 0;
}
.legal .lg-kicker, .legal .lg-pagehead__eyebrow {
  display: block;
  font-family: var(--ff-caps); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-700);
  margin-bottom: 0.6rem;
}
.legal .lg-legal-meta { font-size: var(--fs-caption); color: var(--ink-300); }
.legal .lg-pagehead__rule { display: block; width: 130px; height: 1px; background: var(--gold-hairline-strong); margin: 1.2rem 0; }
.legal .lg-contact-line, .legal .lg-row { display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem; align-items: baseline; }
.legal .lg-addr { line-height: 1.9; }
.legal .lg-field { display: block; margin-bottom: 1rem; }
.legal .lg-field label { display: block; font-family: var(--ff-caps); font-size: var(--fs-caption); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 0.4rem; }
.legal .lg-input, .legal input, .legal textarea, .legal select {
  width: 100%; padding: 0.7rem 0.85rem;
  border: 1px solid var(--gold-hairline); background: var(--ivory-000);
  color: var(--ink-700); font-family: var(--ff-body); font-size: var(--fs-body);
}
/* Kästchen und Radios sind keine Textfelder — width:100% hat sie
   auseinandergezogen und aus der Zeile geworfen. */
.legal input[type="checkbox"], .legal input[type="radio"] {
  width: auto; padding: 0; accent-color: var(--gold-500);
  flex: 0 0 auto; margin-top: 0.3em;
}
.legal .lg-check { display: flex; align-items: flex-start; gap: 0.7rem; margin: 1.2rem 0; }
.legal .lg-check > * { margin: 0; }

.legal .lg-form__note { font-size: var(--fs-caption); color: var(--ink-300); }
.legal .lg-req { color: var(--gold-700); }
.legal .lg-btn, .legal button[type="submit"] {
  display: inline-block; padding: 0.8rem 1.7rem;
  border: 1px solid var(--gold-hairline-strong); background: transparent;
  color: var(--gold-700); font-family: var(--ff-caps); font-size: var(--fs-eyebrow);
  font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer;
  text-decoration: none;
}
.legal .lg-btn:hover, .legal button[type="submit"]:hover { border-color: var(--gold-500); background: var(--ivory-100); }
.legal svg { width: 18px; height: 18px; color: var(--gold-500); }
.legal .lg-wr-form, .legal .lg-form { margin-top: 2rem; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--ivory-100); border: 1px solid var(--gold-hairline); }


/* ---------- 27. Arabisch / RTL ----------
   Cormorant, Cinzel und Lato decken kein Arabisch ab. Für AR übernimmt
   Tajawal alle drei Rollen; Sperrung entfällt, weil sie die Verbindung
   arabischer Buchstaben zerstört. */

@font-face { font-family:'Tajawal'; font-style:normal; font-weight:300; font-display:swap;
  src:url(/assets/fonts/tajawal-1.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family:'Tajawal'; font-style:normal; font-weight:300; font-display:swap;
  src:url(/assets/fonts/tajawal-2.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Tajawal'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/tajawal-3.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family:'Tajawal'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/tajawal-4.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Tajawal'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/assets/fonts/tajawal-7.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family:'Tajawal'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/assets/fonts/tajawal-8.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }

html[lang="ar"] {
  --ff-display: 'Tajawal', 'Cormorant SC', serif;
  --ff-numeral: 'Tajawal', 'Cormorant Garamond', serif;
  --ff-caps: 'Tajawal', 'Cinzel', serif;
  --ff-body: 'Tajawal', 'Lato', sans-serif;
}
html[lang="ar"] .display,
html[lang="ar"] .h1, html[lang="ar"] .h2, html[lang="ar"] .h3,
html[lang="ar"] .eyebrow, html[lang="ar"] .row__title, html[lang="ar"] .wordmark,
html[lang="ar"] .btn, html[lang="ar"] .site-nav a, html[lang="ar"] .quote__text,
html[lang="ar"] .confidential, html[lang="ar"] .foot h4, html[lang="ar"] .team__role,
html[lang="ar"] .contact-rows .label, html[lang="ar"] .markers li, html[lang="ar"] .chips li {
  letter-spacing: normal;
  text-transform: none;
}
html[lang="ar"] .h1, html[lang="ar"] .h2, html[lang="ar"] .display { line-height: 1.25; }
html[lang="ar"] body { line-height: 1.85; }

/* Kurve spiegeln: im RTL-Satz steht der Text rechts */
[dir="rtl"] .split__media { clip-path: url(#tc-curve-mirror); }
[dir="rtl"] .split--mirror .split__media { clip-path: url(#tc-curve); }
[dir="rtl"] .split__edge { transform: scaleX(-1); }
[dir="rtl"] .legal ul, [dir="rtl"] .legal ol { padding-left: 0; padding-inline-start: 1.25rem; }
[dir="rtl"] .steps .row:not(:last-child)::after {
  left: auto; right: calc(var(--medallion-size, 60px) / 2);
  border-left: 0; border-right: 1px dotted var(--gold-hairline-strong);
}
[dir="rtl"] .flow li:not(:last-child)::after { right: auto; left: calc(-1 * clamp(0.6rem, 1.5vw, 1rem)); }
[dir="rtl"] .rows--ruled .row > :last-child {
  border-left: 0; padding-left: 0;
  border-right: 1px solid var(--gold-hairline); padding-right: clamp(1rem, 2vw, 1.75rem);
}
[dir="rtl"] .link::after { transform-origin: right; }
[dir="rtl"] .quote__mark--open { left: auto; right: 1rem; }
[dir="rtl"] .quote__mark--close { right: auto; left: 1rem; }
[dir="rtl"] .u-skip { left: auto; right: var(--gutter); }
[dir="rtl"] .silk--hero { left: auto; right: 0; transform: scaleX(-1); }
[dir="rtl"] .silk--footer { right: auto; left: 0; transform: scaleX(-1); }


/* ---------- 28. Offene Punkte (Redaktionsmarker) ---------- */

/* Standardmäßig unsichtbar. Die Marker sind Notizen an den Mandanten,
   keine Seiteninhalte — rot gestrichelte Kästen auf einer Seite für
   Family Offices kosten mehr Vertrauen als sie an Klarheit bringen.
   Die offenen Punkte stehen gesammelt in OFFENE-PUNKTE.md.
   Sichtbar schalten: <html class="show-todo"> oder ?todo=1 (relaunch.js). */
.todo { display: none; }

/* Ein Absatz oder Listenpunkt, der nur aus einem Marker besteht, fällt
   samt Außenabstand weg — sonst bleibt eine Lücke ohne Inhalt stehen. */
p:has(> .todo:only-child),
li:has(> .todo:only-child),
.qr:has(> .todo:only-child) { display: none; }

.show-todo .todo {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7A2E12;
  background: #FBE9DF;
  border: 1px dashed #C46A3C;
  padding: 0.15rem 0.5rem;
  vertical-align: middle;
}
.show-todo p:has(> .todo:only-child) { display: block; }
.show-todo li:has(> .todo:only-child) { display: list-item; }
.show-todo .qr:has(> .todo:only-child) { display: inline-grid; }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .has-js .reveal, .reveal { opacity: 1; transform: none; }
  .split__media-inner { transform: none !important; }
}


/* ---------- 25. Geräte-Pass ----------

   Gemessen über 360 / 390 / 768 / 1024 / 1280 / 1440 / 1920 / 2560 px.
   Behoben werden hier drei Klassen von Fehlern: Inhalt, der über den rechten
   Rand läuft; Schriftgrößen, die auf einem Telefon zu klein sind; und
   Bedienflächen, die für einen Daumen zu klein sind. */

/* Kein Grid- oder Flex-Kind hält an seiner Mindestinhaltsbreite fest —
   sonst schiebt ein langes Kompositum die ganze Zeile über den Rand. */
.row > *,
.split__text,
.section__head,
.pcard__body,
.foot__col,
.contactbar__inner > * { min-width: 0; }

h1, h2, h3, p, li, .row__title, .row__text, .lead, .quote__text { overflow-wrap: break-word; }

/* Nichts unter 12,5 px: darunter wird Versalschrift mit weitem Sperrsatz
   auf einem Telefon zur Grafik statt zur Schrift. */
:root {
  --fs-eyebrow: clamp(0.78rem, 0.95vw, 0.84rem);
  --fs-caption: 0.8rem;
}
.hero__claim { font-size: clamp(0.8rem, 0.95vw, 0.86rem); }
.subline { font-size: clamp(0.8rem, 1vw, 0.88rem); }
.pf-card__label { font-size: 0.78rem; }
.plan__price small { font-size: max(0.8rem, 0.42em); }
.hero__stack-cap span { font-size: 0.8rem; }

/* Beschriftungen auf Bedienelementen tragen die Aktion — die dürfen nicht
   kleiner sein als der Fließtext daneben. */
.btn, .nav-toggle { font-size: clamp(0.82rem, 1vw, 0.88rem); }

/* Touch-Regeln greifen auf Zeigegeräten ohne Präzision UND generell auf
   schmalen Schirmen — ein Tablet meldet je nach Gerät "fine". */
@media (pointer: coarse), (max-width: 900px) {
  .langsw { font-size: 0.8rem; }

  /* 44 px ist die kleinste Fläche, die ein Daumen zuverlässig trifft. */
  .site-nav a,
  .langsw a,
  .link,
  .contactbar a,
  .foot a,
  .pcard__loc { min-height: 44px; display: inline-flex; align-items: center; }
  .langsw a { min-width: 44px; justify-content: center; }
  /* Anruf und Mail sind auf einem Telefon die wichtigsten Ziele der Seite. */
  a[href^="tel:"],
  a[href^="mailto:"],
  a[href*="wa.me"],
  a[href*="instagram.com"],
  .wordmark { min-height: 44px; display: inline-flex; align-items: center; }
  .consent input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; }
  .nav-toggle { min-width: 44px; min-height: 44px; padding-inline: 0.9rem; }
  .btn { padding-block: 1rem; }

  /* Unter 16 px zoomt iOS beim Fokus ins Formular und die Seite bleibt
     verschoben zurück. */
  .form input, .form textarea, .form select { font-size: 16px; }
  .form input[type="checkbox"] { width: 22px; height: 22px; }
  .consent { align-items: center; gap: 0.75rem; }
}

/* Tablet und kleines Notebook: Bei voller Bildbreite bleiben der Textspalte
   neben der Sichel gemessene 356 px — für deutsche Komposita zu schmal. Die
   Bildfläche wird hier gedeckelt, dann stehen rund 550 px für den Text. */
@media (min-width: 901px) and (max-width: 1200px) {
  .split { --figure-max: 62vw; }
  .split--wide { --figure-max: 52vw; }
}

/* Telefon quer: 92vh hohe Sektionen ergeben bei 390 px Höhe Streifen, durch
   die man sich hindurchscrollt, ohne je Bild und Text zusammen zu sehen. */
@media (orientation: landscape) and (max-height: 560px) {
  .split { min-height: 0; }
  .split__figure { height: 78vh; max-height: none; }
  .band { height: clamp(260px, 78vh, 420px); }
  .hero { min-height: 0; }
}

/* Sehr breite Schirme: die Bänder sollen Band bleiben und nicht zur Wand
   werden — bei 2560 px wären 46vw fast 1200 px Höhe. */
@media (min-width: 1800px) {
  .band { height: clamp(560px, 34vw, 820px); }
}

/* ============================================================
   Mehrseitigkeit — Brotkrumen, Abschluss-Band, Linkkarten
   Kamen mit dem Aufteilen der alten Startseite dazu.
   ============================================================ */

.crumbs {
  border-bottom: 1px solid var(--gold-hairline);
  background: var(--ivory-000);
  font-family: var(--ff-caps);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.crumbs .shell {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-block: 0.9rem;
  color: var(--ink-300);
}
.crumbs a {
  color: var(--gold-700);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease-out-luxe);
}
.crumbs a:hover { border-bottom-color: var(--gold-hairline-strong); }
.crumbs [aria-current] { color: var(--ink-500); }

/* Abschluss jeder Seite: ein ruhiges Band statt eines zweiten Formulars */
.cta { background: var(--ivory-100); border-top: 1px solid var(--gold-hairline); }
.cta .section__head { margin-bottom: clamp(1.8rem, 3.5vh, 2.6rem); }
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 1.8vw, 1.4rem);
}
.cta .confidential { margin-top: clamp(2rem, 4vh, 3rem); }

.btn--ghost {
  border-color: transparent;
  color: var(--ink-500);
  box-shadow: inset 0 -1px 0 var(--gold-hairline);
}
.btn--ghost:hover { border-color: var(--gold-hairline); color: var(--gold-700); }

/* Linkkarten — Textkarten, die auf eine andere Seite führen */
.linkcards {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.linkcard a {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  border: 1px solid var(--gold-hairline);
  background: var(--ivory-000);
  color: inherit;
  text-decoration: none;
  transition: border-color 320ms var(--ease-out-luxe), box-shadow 320ms var(--ease-out-luxe), transform 320ms var(--ease-out-luxe);
}
.linkcard a:hover {
  border-color: var(--gold-hairline-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.linkcard h3 {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink-900);
}
.linkcard p { margin: 0; color: var(--ink-500); font-size: var(--fs-body); }
.linkcard__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.9rem;
  font-family: var(--ff-caps);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.linkcard__more svg {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  transition: transform 320ms var(--ease-out-luxe);
}
[dir="rtl"] .linkcard__more svg { transform: scaleX(-1); }
.linkcard a:hover .linkcard__more svg { transform: translateX(4px); }
[dir="rtl"] .linkcard a:hover .linkcard__more svg { transform: scaleX(-1) translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .linkcard a, .linkcard__more svg { transition: none; }
  .linkcard a:hover { transform: none; }
}