/* ============================================================================
   Hospitality on Point by Renée Gorgoglione — Stylesheet
   ----------------------------------------------------------------------------
   Herkunft jeder Festlegung: siehe ../../design/entscheidungen.md
   CI-Farben:  Logo-Sheet Jasmin, 2026-08-03
   Creme:      gemessen aus Visitenkarten-Entwurf Jasmin, 2026-08-07 (#FAF5F2)
   Keine externen Ressourcen. Keine Webfonts von CDNs. Kein Build-Schritt.
   ========================================================================== */

/* ---------- 1. Primitive Tokens (Quelle: Logo-Sheet 2026-08-03) ---------- */
:root {
  --ci-deep:    #0D3B3B;   /* Petrol dunkel */
  --ci-petrol:  #1E6E6E;   /* Petrol */
  --ci-teal:    #66AFAE;   /* Teal hell */
  --ci-gold:    #C8A257;   /* Gold */

  /* Creme + Papier: gemessen aus der Visitenkarte bzw. dem Logo-Hintergrund */
  --ci-creme:   #FAF5F2;
  --ci-papier:  #FFFEFC;
  --ci-ink:     #08201F;   /* eigene Setzung: abgedunkeltes Petrol für Dark Mode */

  /* Abgeleitete Töne — eigene Setzung, dokumentiert */
  --ci-muted:   #405E5C;   /* 6,5:1 auf Creme */
  --ci-hairline:#DED4CC;
  --ci-teal-d:  #A9C3C1;

  /* ---------- 2. Semantische Tokens — Hell ---------- */
  --bg:          var(--ci-creme);
  --bg-alt:      var(--ci-papier);
  --bg-invert:   var(--ci-deep);
  --surface:     var(--ci-papier);
  --text:        var(--ci-deep);
  --text-sub:    var(--ci-muted);
  --text-invert: #EDF3F1;
  --text-invert-sub: var(--ci-teal-d);
  --accent:      var(--ci-gold);
  --line:        var(--ci-hairline);
  --line-strong: #B9CBC9;
  --link:        var(--ci-petrol);
  --focus:       var(--ci-deep);
  --header-bg:   var(--ci-papier);
  --logo-blend:  multiply;
  --shadow:      0 2px 10px rgba(13, 59, 59, .07);

  /* ---------- 3. Typografie ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Palladio,
                "Book Antiqua", Georgia, "Times New Roman", serif;

  --fs-100: 0.8125rem;  /* 13 */
  --fs-200: 0.875rem;   /* 14 */
  --fs-300: 1rem;       /* 16 */
  --fs-400: 1.0625rem;  /* 17 */
  --fs-500: clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
  --fs-600: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  --fs-700: clamp(1.625rem, 2vw + 1.1rem, 2.25rem);
  --fs-800: clamp(2rem, 3.4vw + 1.1rem, 3.25rem);

  /* ---------- 4. Raster (4-px-Grid) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px;
  --wrap: 1120px;
  --wrap-narrow: 720px;
}

/* ---------- 5. Semantische Tokens — Dunkel ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          var(--ci-ink);
    --bg-alt:      #0B2A29;
    --bg-invert:   var(--ci-deep);
    --surface:     #0F3130;
    --text:        #EDF3F1;
    --text-sub:    var(--ci-teal-d);
    --text-invert: #EDF3F1;
    --text-invert-sub: var(--ci-teal-d);
    --line:        #1D4645;
    --line-strong: #2A5A58;
    --link:        var(--ci-teal);
    --focus:       var(--ci-gold);
    --header-bg:   #000000;
    --logo-blend:  screen;
    --shadow:      0 2px 12px rgba(0, 0, 0, .35);
  }
}

/* ============================ Grundgerüst ============================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 { margin: 0 0 var(--sp-4); line-height: 1.15; font-weight: 600; }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

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

.skip {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--sp-5);
  background: var(--ci-deep); color: #fff; text-decoration: none;
  font-size: var(--fs-200); letter-spacing: .06em; text-transform: uppercase;
}
.skip:focus { top: var(--sp-4); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-5); }
.wrap--narrow { max-width: var(--wrap-narrow); }

/* ============================ Kopfbereich ============================ */
/* Kopfleiste trägt exakt den Hintergrund der Logo-Dateien (hell #FFFEFC,
   dunkel #000000, beide aus den Dateien gemessen). Zusammen mit den
   Blend-Modes verschwindet die Bildkante des JPEG restlos — auch dort, wo
   mix-blend-mode nicht unterstützt wird. */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  position: sticky; top: 0; z-index: 50;
}
.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  padding-block: var(--sp-3);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand img {
  width: auto; height: 72px;
  mix-blend-mode: var(--logo-blend);
}
@media (max-width: 560px) { .brand img { height: 52px; } }

.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4);
}
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: var(--sp-2);
  color: var(--text); text-decoration: none;
  font-size: var(--fs-200); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
}
.site-nav a:hover { color: var(--link); text-decoration: underline; }

.lang {
  display: flex; align-items: center; gap: var(--sp-1);
  border-left: 1px solid var(--line); padding-left: var(--sp-4);
}
.lang a, .lang span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; min-height: 44px;
  font-size: var(--fs-200); font-weight: 600; letter-spacing: .1em;
  text-decoration: none; color: var(--text-sub);
}
.lang a:hover { color: var(--link); text-decoration: underline; }
.lang [aria-current="true"] { color: var(--text); border-bottom: 2px solid var(--accent); }

@media (max-width: 860px) {
  .site-header { position: static; }
  .site-header__inner {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    row-gap: 0; column-gap: var(--sp-3);
    padding-block: var(--sp-3) 0;
  }
  .brand { grid-row: 1; grid-column: 1; margin-right: 0; }
  .lang {
    grid-row: 1; grid-column: 2; justify-self: end;
    border-left: 0; padding-left: 0;
  }
  .lang a, .lang span { min-width: 40px; }
  .site-nav { grid-row: 2; grid-column: 1 / -1; }
  .site-nav ul { gap: 0 var(--sp-4); }
  .site-nav a {
    font-size: var(--fs-100); letter-spacing: .07em;
    padding-inline: 0;
  }
}
@media (max-width: 400px) {
  .site-nav ul { gap: 0 var(--sp-3); }
  .site-nav a { letter-spacing: .04em; }
}

/* ============================ Abschnitte ============================ */
main { flex: 1; }

.section { padding-block: var(--sp-9); border-top: 1px solid var(--line); }
.section:first-child { border-top: 0; }
.section--paper  { background: var(--bg-alt); }
.section--deep   { background: var(--bg-invert); color: var(--text-invert); border-top: 0; }
.section--deep h2, .section--deep h3 { color: var(--text-invert); }
.section--deep .kicker { color: var(--ci-teal); }
.section--deep .lead { color: var(--text-invert-sub); }
.section--deep a { color: var(--ci-gold); }

@media (max-width: 860px) { .section { padding-block: var(--sp-7); } }

.kicker {
  display: block;
  font-size: var(--fs-100); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ci-petrol);
  margin-bottom: var(--sp-3);
}
.kicker::after {
  content: ""; display: block; width: 48px; height: 3px;
  background: var(--accent); margin-top: var(--sp-3);
}

h2 { font-size: var(--fs-700); letter-spacing: -.01em; }
h3 { font-size: var(--fs-500); }

.lead {
  font-size: var(--fs-500); color: var(--text-sub);
  max-width: 62ch; line-height: 1.6;
}

.section__head { max-width: 68ch; margin-bottom: var(--sp-7); }

/* ============================ Hero ============================ */
.hero { padding-block: var(--sp-9); border-top: 0; }
@media (max-width: 860px) { .hero { padding-block: var(--sp-7); } }
/* Spaltenverhältnis 1.15fr/.85fr (Textspalte/Bildspalte) — Ausgangsstand.
   Am 2026-09-18 vormittags kurz auf 1fr/1fr geändert, weil Bildplatz 01
   testweise ein Querformat (situation-team) zeigte; mit der Korrektur laut
   Sprachnachricht Renée 2026-09-18 08:44 zeigt Bildplatz 01 wieder die
   hochformatige 3:4-Portraitaufnahme (.bild--portrait), das Teamfoto sitzt
   seitdem in „Für wen" (.bild--team). Das ursprüngliche Verhältnis ist damit
   wieder passend: die schmalere .85fr-Spalte reicht für ein Porträt, die
   Textspalte bleibt lesbar, weil .lead ohnehin auf max-width: 62ch begrenzt
   ist. */
.hero__grid {
  display: grid; gap: var(--sp-8);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: var(--sp-7); } }

.hero h1 {
  font-size: var(--fs-800);
  letter-spacing: -.015em;
  margin-bottom: var(--sp-3);
}
.hero h1 .h1-sub {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: .42em;
  letter-spacing: .01em;
  color: var(--ci-petrol);
  margin-top: var(--sp-2);
}
@media (prefers-color-scheme: dark) { .hero h1 .h1-sub { color: var(--ci-teal); } }

.pillars-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  font-size: var(--fs-200); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ci-petrol);
  margin-bottom: var(--sp-5);
}
@media (prefers-color-scheme: dark) { .pillars-line { color: var(--ci-teal); } }
.pillars-line .dot { color: var(--accent); }
.pillars-line .mentoring {
  flex-basis: 100%;
  color: var(--text-sub);
  letter-spacing: .22em;
}

.hero__voice {
  margin-top: var(--sp-6);
  padding-left: var(--sp-5);
  border-left: 3px solid var(--accent);
  font-family: var(--font-serif);
  font-size: var(--fs-500);
  line-height: 1.5;
}

.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* Feedback Renée, 2026-09-18: „40" als eigenes Ziffer-Element im Hero.
   Gold trägt hier nur den Balken (wie .kicker::after), nicht die Ziffer
   selbst — Gold als Fließtext auf Creme unterschreitet mit 2,4:1 die
   Textschwelle (design/entscheidungen.md, Abschnitt Farbe). */
.stat {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.stat__num {
  position: relative;
  font-family: var(--font-serif);
  font-size: var(--fs-800);
  line-height: 1;
  color: var(--text);
  padding-bottom: var(--sp-3);
}
.stat__num::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 48px; height: 3px; background: var(--accent);
}
.stat__label {
  padding-top: var(--sp-2);
  font-size: var(--fs-100); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-sub);
  max-width: 20ch;
}

/* ============================ Buttons ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--sp-6);
  font-size: var(--fs-300); font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none; cursor: pointer;
  border: 2px solid var(--ci-deep);
  background: var(--ci-deep); color: #FFFEFC;
  transition: background .18s ease-out, color .18s ease-out;
}
.btn:hover { background: var(--ci-petrol); border-color: var(--ci-petrol); color: #FFFEFC; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { background: transparent; color: var(--link); border-color: var(--link); }
@media (prefers-color-scheme: dark) {
  .btn { background: var(--ci-teal); border-color: var(--ci-teal); color: var(--ci-ink); }
  .btn:hover { background: #8CC6C5; border-color: #8CC6C5; color: var(--ci-ink); }
  .btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
}
.section--deep .btn {
  background: var(--ci-gold); border-color: var(--ci-gold); color: var(--ci-deep);
}
.section--deep .btn:hover { background: #D8B673; border-color: #D8B673; }
.section--deep .btn--ghost {
  background: transparent; color: var(--text-invert); border-color: var(--ci-teal);
}
@media (max-width: 480px) { .btn { width: 100%; } }

/* ============================ Karten / Raster ============================ */
.grid { display: grid; gap: var(--sp-5); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--sp-6);
  display: flex; flex-direction: column;
}
.section--paper .card { background: var(--bg); }
.section--deep .card {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(102, 175, 174, .38);
}

.card__num {
  font-family: var(--font-serif);
  font-size: var(--fs-600); font-style: italic;
  color: var(--accent);
  line-height: 1; margin-bottom: var(--sp-3);
}
.card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--text-sub); font-size: var(--fs-300); }
.section--deep .card p { color: var(--text-invert-sub); }

/* ============================ Listen ============================ */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative; padding-left: var(--sp-6); margin-bottom: var(--sp-3);
  line-height: 1.55;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 16px; height: 2px; background: var(--accent);
}
.ticks--2 { columns: 2; column-gap: var(--sp-7); }
@media (max-width: 700px) { .ticks--2 { columns: 1; } }
.ticks--2 li { break-inside: avoid; }

/* ============================ Zitatband ============================ */
.quotes { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } }

.quote {
  margin: 0;
  border-left: 3px solid var(--ci-gold);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
}
.quote p {
  font-family: var(--font-serif);
  font-size: var(--fs-500); line-height: 1.5;
  color: var(--text-invert);
}
.quote figcaption {
  font-size: var(--fs-100); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ci-teal); margin-top: var(--sp-3);
}

/* ============================ Person ============================ */
.person__grid {
  display: grid; gap: var(--sp-8);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: start;
}
@media (min-width: 901px) {
  .person__media { position: sticky; top: 120px; }
}
@media (max-width: 900px) { .person__grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ============================ Pakete ============================ */
.paket { position: relative; }
.paket__label {
  font-size: var(--fs-100); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ci-petrol); margin-bottom: var(--sp-2);
}
@media (prefers-color-scheme: dark) { .paket__label { color: var(--ci-teal); } }
.paket__preis {
  font-family: var(--font-serif);
  font-size: var(--fs-600); line-height: 1.1;
  margin-bottom: var(--sp-1);
}
.paket__preis-sub {
  font-size: var(--fs-200); color: var(--text-sub);
  margin-bottom: var(--sp-5);
}
.paket__body { flex: 1; }
.paket__foot { margin-top: var(--sp-5); }

/* Paket 4, Feedback Renée 2026-09-18: vierte Karte in voller Breite statt im
   Dreier-Raster, damit der volle PDF-Wortlaut ohne Kürzung Platz hat. */
.paket--breit {
  margin-top: var(--sp-5);
  max-width: none;
}
.paket--breit h3 { font-size: var(--fs-500); }
.paket--breit .ticks--2 { margin-top: var(--sp-4); }
.hinweis {
  margin-top: var(--sp-6);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-5);
  font-size: var(--fs-200); color: var(--text-sub);
  max-width: 78ch;
}

/* Markenaussage: Brain Dump 2026-08-03, Abschnitt 18 — bewusst als starke
   Kurzaussage stehen gelassen, nicht als Fußnote. */
.claim {
  margin: var(--sp-8) 0 0;
  border-top: 1px solid var(--line);
  padding-top: var(--sp-6);
  font-family: var(--font-serif);
  font-size: var(--fs-600);
  line-height: 1.35;
  max-width: 34ch;
  color: var(--text);
}
.claim .claim__accent { color: var(--ci-petrol); }
@media (prefers-color-scheme: dark) { .claim .claim__accent { color: var(--ci-teal); } }
.arbeitstitel {
  display: inline-block; margin-top: var(--sp-4);
  font-size: var(--fs-100); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-sub);
}

/* ============================ Kontakt ============================ */
.kontakt__list { list-style: none; margin: 0 0 var(--sp-6); padding: 0; }
.kontakt__list li { margin-bottom: var(--sp-3); }
.kontakt__list a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-500); font-weight: 600;
  color: var(--text-invert); text-decoration: none;
  border-bottom: 2px solid var(--ci-gold);
}
.kontakt__list a:hover { color: var(--ci-gold); }
.kontakt__label {
  display: block;
  font-size: var(--fs-100); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ci-teal); margin-bottom: var(--sp-1);
}

/* ============================ Bilder ============================ */
/* Fotos Jasmin, eingegangen 2026-08-24. Herkunft je Bildplatz:
   ../../design/entscheidungen.md, Abschnitt „Bild, Video, Logo".
   Seitenverhältnis liegt am <img> selbst, damit die Höhe schon vor dem
   Bildempfang feststeht und beim Laden nichts springt. object-position hält
   Renées Gesicht in jedem Zuschnitt im Bild. */
.bild { margin: 0; width: 100%; }
.bild img {
  display: block;
  width: 100%; height: auto;
  object-fit: cover;
  border-radius: 2px;
  background: var(--surface);
}
.bild--portrait img { aspect-ratio: 3 / 4; object-position: 50% 30%; }
.bild--hoch img     { aspect-ratio: 4 / 5; object-position: 50% 22%; }
.bild--quer img     { aspect-ratio: 3 / 2; object-position: 50% 26%; }

/* Schmale Viewports: das Querbild wird sonst zum Streifen, in dem Renée
   verschwindet — dort das originale 4:3 stehen lassen. */
@media (max-width: 700px) {
  .bild--quer img { aspect-ratio: 4 / 3; }
}

/* Teamfoto (situation-team) in „Für wen" (Bildplatz 03) — Korrektur
   Nutzer-Entscheid 2026-09-18 (Sprachnachricht Renée 08:44): stand
   vormittags kurz im Hero (Bildplatz 01), das war vertauscht. Natives
   Seitenverhältnis in jedem Viewport, keine abweichende Stufe wie bei
   .bild--quer — das Bild ist eine Montage mit eingebranntem Text, der nie
   angeschnitten werden darf. */
.bild--team img { aspect-ratio: 1370 / 1148; object-position: 50% 50%; }

/* ============================== Video ================================ */
/* Intro-Video Renée. Quelle ist die englische Fassung, in allen drei
   Sprachfassungen dieselbe Datei — Entscheidung Jasmin, 2026-09-10. */
.video-intro {
  display: block;
  width: 100%; height: auto;
  max-width: 100%;
  aspect-ratio: 832 / 464;          /* Maß der gelieferten Datei */
  background: var(--ci-deep);
  border: 1px solid var(--line);
  border-radius: 2px;
}

/* ============================ Platzhalter ============================ */
/* Sichtbare Markierung für Material, das noch aussteht.
   Stand 2026-09-12: kein Platzhalter mehr in Gebrauch — Bilder und Video
   sind belegt. Die Regeln bleiben für künftige Lücken stehen. */
.platzhalter {
  margin: 0;
  border: 2px dashed var(--ci-gold);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 12px,
      rgba(200, 162, 87, .09) 12px 24px
    );
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-5);
  color: var(--text-sub);
  width: 100%; max-width: 100%;
  min-height: 200px;
}
/* min-height 0, sonst weitet aspect-ratio die Box in der Breite auf, wenn die
   Mindesthöhe das Seitenverhältnis nicht zulässt (führte zu Querscrollen). */
.platzhalter--portrait,
.platzhalter--hoch,
.platzhalter--quer,
.platzhalter--video { min-height: 0; }
.platzhalter--portrait { aspect-ratio: 3 / 4; }
.platzhalter--hoch     { aspect-ratio: 4 / 5; }
.platzhalter--quer     { aspect-ratio: 3 / 2; }
.platzhalter--video    { aspect-ratio: 16 / 9; }

@media (max-width: 700px) {
  .platzhalter--video, .platzhalter--quer {
    aspect-ratio: auto; min-height: 220px;
  }
}

.platzhalter__tag {
  font-size: var(--fs-100); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ci-gold);
}
.platzhalter__txt { font-size: var(--fs-200); max-width: 40ch; margin: 0; }
.platzhalter__id {
  font-size: var(--fs-100);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text-sub);
}
.section--deep .platzhalter { color: var(--text-invert-sub); }
.section--deep .platzhalter__id { color: var(--text-invert-sub); }

/* ============================ Fußbereich ============================ */
.site-footer {
  background: var(--ci-deep); color: var(--text-invert);
  border-top: 1px solid rgba(102, 175, 174, .28);
  padding-block: var(--sp-8) var(--sp-6);
}
.site-footer__grid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr; } }

.site-footer h2 {
  font-size: var(--fs-500); color: var(--text-invert);
  margin-bottom: var(--sp-1);
}
.site-footer .by {
  font-family: var(--font-serif); font-style: italic;
  color: var(--ci-teal); margin-bottom: var(--sp-3);
}
.site-footer .pillars {
  font-size: var(--fs-100); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ci-teal);
}
.site-footer h3 {
  font-size: var(--fs-100); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ci-teal); margin-bottom: var(--sp-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--sp-1); }
.site-footer a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text-invert); text-decoration: none;
}
.site-footer a:hover { color: var(--ci-gold); text-decoration: underline; }
/* Rechtsseiten tragen keinen Fuß-Dreispalter — dort nur die Schlusszeile. */
.site-footer--schmal { padding-block: var(--sp-5); }
.site-footer--schmal .site-footer__bar {
  margin-top: 0; padding-top: 0; border-top: 0;
}

.site-footer__bar {
  margin-top: var(--sp-7); padding-top: var(--sp-4);
  border-top: 1px solid rgba(102, 175, 174, .3);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-100); color: var(--ci-teal-d);
}
.site-footer__bar .offen {
  color: var(--ci-gold);
}
/* Rechtsverweise im Fuß — Pflichtangaben, auf jeder Sprachfassung */
.site-footer__legal {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
}
.site-footer__legal a { text-decoration: underline; }

/* ========================== Rechtstext-Seiten ========================== */
/* Impressum und Datenschutzerklärung. Der Wortlaut ist der von Jasmin
   gelieferte spanische Originaltext (2026-09-10) und steht unverändert auf
   allen drei Sprachfassungen; darüber eine Einordnungszeile in Seitensprache. */
.rechtstext { max-width: var(--wrap-narrow); }
.rechtstext h2 {
  font-size: var(--fs-600);
  margin-top: var(--sp-7); margin-bottom: var(--sp-3);
}
.rechtstext h2:first-of-type { margin-top: var(--sp-5); }
.rechtstext p, .rechtstext li { font-size: var(--fs-400); }
.rechtstext ul { padding-left: 1.25em; }
.rechtstext li { margin-bottom: var(--sp-2); }
.rechtstext dl {
  display: grid; grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-4) 0;
}
@media (max-width: 700px) {
  .rechtstext dl { grid-template-columns: 1fr; gap: 0 0; }
  .rechtstext dd { margin-bottom: var(--sp-3); }
}
.rechtstext dt { font-weight: 700; }
.rechtstext dd { margin: 0; }
/* Einordnungszeile: verbindlich ist die spanische Fassung */
.sprachhinweis {
  border-left: 3px solid var(--ci-gold);
  background: var(--surface);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
  font-size: var(--fs-200); color: var(--text-sub);
}
.sprachhinweis p { margin: 0; font-size: inherit; }

/* ============================ Druck ============================ */
@media print {
  .site-header, .skip, .cta-row { display: none; }
  body { background: #fff; color: #000; }
  .section { padding-block: 16px; }
}