/* ═══════════ Kampagnen-Landingpage · Schiffe retten ═══════════ */
/* Baut auf den Tokens aus style.css auf (Fonts, Farben, Motion). */

/* ═══ Die Marke auf dieser Seite ═══
   Umgestellt von --orange* auf --brand*. Die Rolle entscheidet, nicht der Farbton,
   und die Rollen sind dieselben wie im Spiel:

     --brand      DAS FELD. Nur Fläche, nie Strich auf dunklem Grund. Bei L 0,44
                  misst das Rot gegen die See 2,30:1 — als Schrift wäre es dort weg.
                  Auf dieser Seite: Plakat, Spendenband, Spendenknopf, Sprungmarke.
     --brand-ink  Was auf dem Feld steht. Weiß, 8,44:1, also AAA.
     --brand-lit  Die Marke, wo ein Feld nicht geht: die Wortmarke in der Leiste und
                  die sechs Fakten-Schildchen. 10,66:1 über der See, 10,19:1 dort,
                  wo das rote Plakat durch die Leiste scheint.
     --brand-deep Gedrückt/überfahren bei einem Markenfeld.

   DREI DINGE, DIE DIE UMSTELLUNG ERZWUNGEN HAT, nicht bloß umbenannt:

   1. DAS SPENDENBAND WIRD SELBST ZUM FELD. Vorher war der Spendenknopf eine helle
      Orangeplatte auf fast schwarzem Grund — das Lauteste der Seite nach dem
      Plakat, und genau das soll er sein. Als Marken-Rot misst dieselbe Platte
      gegen die See 2,30:1 und verschwindet zum leisesten Element. Der Ausweg ist
      derselbe wie beim Plakat: das Band kippt um. Rotes Feld, weiße Schrift, und
      der Knopf darauf invertiert zur weißen Platte mit rotem Wort. Die Seite steht
      danach in zwei roten Blöcken — oben die Behauptung, unten die Aufforderung.
   2. DIE IOM-ZAHL WIRD WEISS. --brand-lit ist ein blasses Rosa; 2.452 Tote in
      Bonbonfarbe wäre der falsche Ton, und die Zahl hätte dem Spendenband die
      Aufmerksamkeit weggenommen. Sie trägt jetzt --ink und lebt von ihrer Größe.
      Die Zahlen sind und bleiben unbewegt — das ist die harte Regel hier.
   3. DER FOKUSRING IM PLAKAT WIRD WEISS. style.css setzt für .khero (wie fürs
      Fernschreiben auf hellem Papier) outline-color: var(--brand). Das galt, als
      das Plakat ein helles Orangefeld war. Auf dem roten Feld ist derselbe Ring
      rot auf rot, gemessen 1,00:1 — er ist schlicht nicht da. Hier steht deshalb
      --brand-ink dagegen: 8,44:1. (In style.css gehört .khero aus jener Regel
      heraus; die Zeile hier deckt es ab, bis das passiert.)

   ZUR BRÜCKE IN style.css: solange der Abschnitt »Übergang: kampagne.css« am Ende
   von style.css steht, schlägt er gleichnamige Regeln hier — seine Selektoren
   tragen ein zusätzliches `html`. Sechs Regeln in dieser Datei tragen deshalb
   ebenfalls ein `html` und gewinnen über die Reihenfolge. Fällt die Brücke, kann
   dieses `html` überall weg; sonst ändert sich nichts. */

body { overflow-x: clip; }

/* Sprungmarke: bei 100 Tabstopps im Spiel und einer Navileiste hier Pflicht.
   Markenfeld auf der dunklen Leiste, also mit Kante — die Fläche allein misst
   2,30:1, der weiße Haarstrich trägt die Grenze mit 19,43:1. Dieselbe Regel wie
   bei .btn-primary und .cta-spende im Spiel, hier als inset, damit die Sprungmarke
   ihre Maße behält. */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--brand); color: var(--brand-ink);
  font-weight: 700; padding: 10px 16px; text-decoration: none;
  transition: top .15s var(--ease-out-strong);
}
html .skip-link { box-shadow: inset 0 0 0 2px var(--brand-ink); }  /* html → Brücke */
.skip-link:focus { top: 8px; }
/* Fokussiertes Ziel nicht unter die klebende Leiste scrollen lassen (2.4.11) */
:target, .ksec, main { scroll-margin-top: 84px; }

/* ── Navigation (eine Zeile, 64px) ── */
.knav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 22px;
  height: 64px;
  padding: 0 clamp(16px, 4vw, 40px);
  background: oklch(0.16 0.03 245 / .85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Die Wortmarke ist Schrift auf dunklem Grund, also --brand-lit und nicht --brand.
   Die Leiste ist durchscheinend: über der See 10,66:1, über dem roten Plakat
   10,19:1. Beide Fälle gemessen, weil das Plakat unter ihr durchläuft. */
.knav .brand {
  font-family: var(--display);
  font-size: 1rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--brand-lit); text-decoration: none;
}
.knav .links { display: flex; gap: 18px; margin-left: auto; align-items: center; }
.knav .links a {
  color: var(--ink-soft); text-decoration: none; font-size: .9rem; font-weight: 600;
  /* Zielgröße mindestens 24 px hoch (WCAG 2.2, 2.5.8) */
  display: inline-flex; align-items: center; min-height: 24px; padding: 4px 2px;
}
.knav .links a.btn-spenden {
  background: var(--brand); color: var(--brand-ink);
  font-weight: 700; font-size: .88rem;
  padding: 9px 18px; text-decoration: none;
  transition: background .15s, transform 120ms var(--ease-out-strong);
}
/* Kante wie bei der Sprungmarke: Feld 2,30:1 über der See und 2,20:1 dort, wo das
   Plakat durchscheint — beides unter den 3:1 aus 1.4.11. Der Strich trägt sie mit
   19,43:1 bzw. 18,58:1. */
html .knav .links a.btn-spenden { box-shadow: inset 0 0 0 2px var(--brand-ink); }  /* html → Brücke */
@media (hover: hover) {
  .knav .links a:hover { color: var(--ink); }
  .knav .btn-spenden:hover { background: var(--brand-deep); }
}
.knav .btn-spenden:active { transform: scale(0.97); }
@media (max-width: 640px) {
  /* Nur auf der Kampagnenseite: dort bleibt der Spendenknopf übrig, und die beiden
     Ankerlinks sind auf dem Telefon verzichtbar. Die Rechtsseiten (body.recht) benutzen
     dieselbe Leiste, haben aber KEINEN Spendenknopf — die Regel ließ dort eine Leiste
     ganz ohne Links zurück, und wer aufs Impressum wollte, musste ans Seitenende
     scrollen. */
  body:not(.recht) .knav .links a:not(.btn-spenden) { display: none; }
}

/* ── Hero: das Plakat, dasselbe wie Screen 1 im Spiel ──
   Rotes Feld, helle Schrift, und was betont werden soll, wird zur HELLEN PLATTE
   mit rotem Wort: der Stempel und der Hauptknopf. 8,44:1 in beide Richtungen. */
.khero {
  background: var(--brand);
  color: var(--brand-ink);
  padding: clamp(48px, 9vw, 96px) clamp(16px, 4vw, 40px) clamp(56px, 10vw, 110px);
}
/* style.css schickt in .khero einen roten Fokusring los — auf dem roten Feld sind
   das 1,00:1. Weiß dagegen: 8,44:1. */
.khero :focus-visible { outline-color: var(--brand-ink); }
.khero .inner { max-width: 1100px; margin: 0 auto; }
.khero h1 {
  font-family: var(--display);
  font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.4rem, 8.5vw, 5.5rem);
  line-height: .98; letter-spacing: .01em;
  margin: 0 0 clamp(18px, 3vw, 28px);
  max-width: 14ch;
  text-wrap: balance;
}
.khero h1 .mit {
  display: inline-block;
  color: var(--brand);
  background: var(--brand-ink);
  padding: .02em .16em;
  transform: rotate(-1deg);
}
.khero .sub {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 600;
  max-width: 38ch;
  margin: 0 0 clamp(26px, 4vw, 40px);
  text-wrap: pretty;
}
.khero .ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-main {
  display: inline-block;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem); letter-spacing: .04em;
  background: var(--brand-ink); color: var(--brand);
  padding: .55em 1.1em .5em;
  text-decoration: none;
  transition: transform .15s var(--ease-out-strong), background .15s, color .15s;
}
.cta-ghost {
  display: inline-block;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem); letter-spacing: .04em;
  border: 3px solid var(--brand-ink); color: var(--brand-ink);
  padding: calc(.55em - 3px) 1.1em calc(.5em - 3px);
  text-decoration: none;
  transition: transform .15s var(--ease-out-strong), background .15s, color .15s;
}
@media (hover: hover) {
  /* Eine weiße Platte kann nicht heller werden. Sie tönt sich, und das Wort geht
     eine Stufe tiefer — dasselbe Paar wie .plakat-cta im Spiel. */
  .cta-main:hover { transform: translateY(-2px); background: var(--brand-lit); color: var(--brand-deep); }
  .cta-ghost:hover { background: var(--brand-ink); color: var(--brand); }
}
.cta-main:active, .cta-ghost:active { transform: scale(0.97); }

/* ── Sektionen (dunkel, eine Familie pro Layout) ── */
.ksec { padding: clamp(64px, 11vw, 130px) clamp(16px, 4vw, 40px); }
.ksec .inner { max-width: 1100px; margin: 0 auto; }
.ksec h2 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.7rem, 4.6vw, 2.9rem);
  line-height: 1.04; letter-spacing: .02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
.ksec p { color: var(--ink-soft); max-width: 58ch; line-height: 1.65; }
.ksec p strong { color: var(--ink); }

/* Spiel-Sektion: Split, Text links, echtes Preview rechts */
.split { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.preview {
  position: relative;
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--sea-raise);
}
.preview iframe {
  width: 200%; height: 200%;
  transform: scale(.5); transform-origin: 0 0;
  border: 0;
  pointer-events: none;
}
/* Der Knopf liegt auf einem fremden Dokument, und das ist seit der Umstellung
   ebenfalls ein rotes Plakat: eine rote Platte darauf wäre rot auf rot. Er kippt
   deshalb wie jeder Hauptknopf auf einem Markenfeld — weiße Platte, rotes Wort,
   8,44:1 gegen den Grund und 6,44:1 gegen das Plakat hinter ihm.
   Und er wandert nach RECHTS: das Plakat im iframe hat unten links seinen eigenen
   weißen Knopf (»Schicht übernehmen«). Zwei gleich aussehende weiße Platten
   übereinander wären zwei Knöpfe, von denen nur einer klickbar ist. */
.preview .play {
  position: absolute; right: 14px; bottom: 14px;
  font-weight: 700; font-size: .95rem;
  padding: 11px 20px; text-decoration: none;
  box-shadow: 0 8px 24px oklch(0 0 0 / .35);
  transition: background .15s, color .15s, transform 120ms var(--ease-out-strong);
}
html .preview .play { background: var(--brand-ink); color: var(--brand); }  /* html → Brücke */
@media (hover: hover) {
  html .preview .play:hover { background: var(--brand-lit); color: var(--brand-deep); }  /* html → Brücke */
}
.preview .play:active { transform: scale(0.97); }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
}

/* Zahlen-Sektion: asymmetrisch, eine Riesenzahl führt */
.zahlen { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.numgrid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: end;
}
/* Keine Markenfarbe. Das ist die Zahl des IOM und keine Schlagzeile von uns —
   in --brand-lit stünden 2.452 Tote in Rosa. Weiß, 16,78:1, und die Größe macht
   den Rest. Unbewegt bleibt sie ohnehin: hier wird nichts hochgezählt. */
html .bignum {  /* html → Brücke */
  font-family: var(--display); font-weight: 400;
  font-size: clamp(4.5rem, 16vw, 11rem);
  line-height: .95;
  color: var(--ink);
}
.bignum-label { color: var(--ink); font-size: clamp(1rem, 2.2vw, 1.25rem); font-weight: 600; max-width: 30ch; margin-top: 10px; }
.subnums { display: grid; gap: clamp(20px, 3vw, 34px); padding-bottom: 6px; }
.subnums b {
  display: block;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  color: var(--ink);
}
.subnums span { color: var(--ink-soft); font-size: .95rem; }
.quelle { font-family: var(--mono); font-size: .75rem; color: var(--ink-faint); margin-top: clamp(24px, 4vw, 40px); }
@media (max-width: 860px) {
  .numgrid { grid-template-columns: 1fr; align-items: start; }
}

/* Fakten: sticky Headline links, Fakten-Raster rechts */
.fakten .layout2 { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(28px, 6vw, 72px); }
.fakten .sticky { position: sticky; top: 96px; align-self: start; }
.fakten .sticky p { margin-top: 14px; }
.faktgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 44px) clamp(22px, 4vw, 40px); }
/* Sechs kleine Schildchen, die ein Feld nicht tragen können — also die Marke als
   Strich: --brand-lit, 10,66:1. Das ist die einzige Stelle im dunklen Mittelteil,
   an der die Marke noch spricht. */
.fakt h3 {
  font-family: var(--mono); font-weight: 700;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-lit);
  margin: 0 0 8px;
}
.fakt p { font-size: .95rem; margin: 0; max-width: none; }
@media (max-width: 860px) {
  .fakten .layout2 { grid-template-columns: 1fr; }
  .fakten .sticky { position: static; }
  .faktgrid { grid-template-columns: 1fr; }
}

/* ── Spendenband ──
   Der Punkt der ganzen Kampagne, also nach dem Plakat das Lauteste der Seite. Als
   Knopf allein ginge das nicht mehr: ein Markenfeld auf der See misst 2,30:1 und
   wäre das leiseste Element. Das Band wird deshalb selbst zum Feld und der Knopf
   darauf zur weißen Platte. Dieselbe Umkehrung wie im Plakat, zum zweiten Mal —
   die Seite steht danach in zwei roten Blöcken, oben die Behauptung, unten die
   Aufforderung.
   Die Innenbreite ist von 820 auf die 1100 der übrigen Sektionen gegangen: auf
   dunklem Grund fiel der Versatz nicht auf, auf einem roten Feld steht die Kante
   des Textes sichtbar 140 px neben allen anderen Sektionen. Die Absatzbreite hält
   weiter .ksec p mit 58ch. */
.spenden {
  text-align: left;
  background: var(--brand);
  color: var(--brand-ink);
}
/* Die Überschrift erbt --brand-ink vom Band. Der Fließtext nicht: .ksec p setzt
   --ink-soft, und das kühle Grau säße auf dem Rot schmutzig und bei 4,3:1. */
.spenden p, .spenden p strong { color: var(--brand-ink); }
/* Wie im Plakat: weißer Ring, nicht --brand-lit — auf dem roten Feld ist Weiß der
   klarste Ring, den es gibt. */
.spenden :focus-visible { outline-color: var(--brand-ink); }
/* Farben kommen aus .cta-main: helle Platte, rotes Wort — hier nichts Eigenes mehr,
   der Knopf im Band ist derselbe Knopf wie im Plakat. Nur die Kante der Brücke muss
   weg: auf dem Feld trägt die weiße Platte ihre Grenze mit 8,44:1 selbst. */
.spenden .cta-main { margin-top: 22px; }
html .spenden .cta-main { box-shadow: none; }  /* html → Brücke */
/* Kleingedrucktes unter dem Knopf. Nicht dimmen: auf dem Markenrot gibt es nur eine
   Textfarbe, die die 4,5:1 hält, und das ist --brand-ink. Klein wird es über den
   Schriftgrad, nicht über die Deckkraft. */
.spenden p.klein {
  margin-top: 18px; max-width: 52ch;
  font-size: .82rem; line-height: 1.5;
}

/* Footer */
.kfooter {
  border-top: 1px solid var(--line);
  padding: 40px clamp(16px, 4vw, 40px) 60px;
  color: var(--ink-faint); font-size: .85rem;
}
.kfooter .inner { max-width: 1100px; margin: 0 auto; display: grid; gap: 6px; }
.kfooter a { color: var(--ink-soft); }

/* ── Scroll-Reveal (JS fügt .pre hinzu; ohne JS bleibt alles sichtbar) ── */
.pre { opacity: 0; translate: 0 16px; transition: opacity .6s var(--ease-out-strong), translate .6s var(--ease-out-strong); }
.pre.in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .pre { opacity: 1; translate: none; transition: none; }
  .cta-main, .cta-ghost, .btn-spenden, .preview .play { transition: none; }
}

/* ── Rechtstexte ──
   Impressum und Datenschutz. Sie leihen sich Kopfzeile, Fuß und Tokens der
   Kampagnenseite und bringen nur die Prosa mit: eine Spalte, lesbare Zeilenlänge,
   nichts, was scrollt oder aufklappt. Ein Rechtstext, den man aufklappen muss, ist
   ein Rechtstext, den niemand liest. */
body.recht { background: var(--sea); color: var(--ink); }
.rechtstext {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) clamp(18px, 5vw, 32px) clamp(48px, 8vw, 96px);
}
.rechtstext h1 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 3rem); letter-spacing: .01em;
  margin: 0 0 clamp(20px, 4vw, 32px);
}
.rechtstext h2 {
  font-family: var(--mono); font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--brand-lit);
  margin: clamp(28px, 5vw, 44px) 0 10px;
}
.rechtstext p, .rechtstext li { line-height: 1.65; margin: 0 0 12px; }
.rechtstext ul { margin: 0 0 12px; padding-left: 1.2em; }
.rechtstext li { margin-bottom: 6px; }
.rechtstext .lead { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.rechtstext code {
  font-family: var(--mono); font-size: .88em;
  padding: 1px 5px; border: 1px solid var(--line); border-radius: 0;
}
.rechtstext a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rechtstext .stand { margin-top: clamp(28px, 5vw, 44px); font-family: var(--mono); font-size: .8rem; }
/* Die Lücken, die der Projekteigner füllen muss. Sichtbar markiert und nicht dezent:
   ein Platzhalter, den man übersieht, geht live. */
.rechtstext .offen {
  /* Schwarz auf Weiß mit rotem Rahmen und nicht Weiß auf Rot: axe meldete für die
     erste Fassung genau so viele Kontrastfehler, wie es Platzhalter gibt. Ein
     Platzhalter, der die Prüfung reißt, ist ein schlechter Platzhalter — er soll
     auffallen, nicht die Seite kaputtmachen. */
  background: #fff; color: #000;
  box-shadow: inset 0 0 0 2px var(--distress);
  padding: 1px 6px; font-weight: 700;
}

/* ── Die Absenderin in der Kopfleiste ──
   Siegel plus Wortmarke, neben dem Titel der Kampagne. Sie steht hier, weil das Spiel
   Aufmerksamkeit für die Stiftung gewinnen soll — eine Absenderin, die erst im Fuß
   auftaucht, gewinnt keine. Auf schmalen Fenstern tritt sie zurück: dort hat die Leiste
   genau einen Platz, und den hat der Spendenknopf. */
.knav .absender {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 18px; padding: 4px 2px; min-height: 24px;
  color: var(--ink-soft); text-decoration: none;
  font-size: .78rem; letter-spacing: .02em; white-space: nowrap;
}
/* Höhe und Seitenverhältnis statt nur Höhe: fällt die Regel aus, gelten die Maße aus
   dem Markup, und die dürfen dann kein 200er Zeichen sein. Keine Farbe: ein SVG hinter
   <img src> ist ein eigenes Dokument und erbt nichts von dieser Seite. */
.knav .absender img { display: block; width: auto; aspect-ratio: 1; height: 22px; }
.knav .absender b { color: var(--brand); font-weight: 700; }
@media (hover: hover) { .knav .absender:hover { color: var(--ink); } }
@media (max-width: 760px) { .knav .absender { display: none; } }