/* =========================================================
   SARAH CARINA — Landingpage "Mindset"
   Ergänzt den Editorial-Layer aus angst.css (Klassen ag-*),
   der bewusst wiederverwendet wird: gleiche Rhythmik, gleiche
   Reveals, kein doppelter Code. Hier stehen nur die Bausteine,
   die es dort nicht gibt.

   Leitidee des Designs: Die Seite wird nach unten hin weiter.
   Nicht "der Kopf wird hell", sondern der Handlungsspielraum
   wird größer — enge Symmetrie oben, offener Raum unten.
   ========================================================= */

:root {
  --ms-max: 1180px;
  --ms-narrow: 720px;
  --ms-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------
   VISUELLE HELDENREISE — drei Stufen
   Oben: enger, kühler, mehr Schatten.
   Mitte: Licht dringt ein.
   Unten: offen, wärmer, mehr Raum.
   --------------------------------------------------------- */
.ms-stage--close { background: var(--bg-deep); }
.ms-stage--mid   { background: var(--bg-panel); }
.ms-stage--open  { background: var(--bg); }

/* Die Sektionen atmen nach unten hin stärker */
.ms-stage--close.ag-section { padding-block: clamp(66px, 8vw, 120px); }
.ms-stage--open.ag-section  { padding-block: clamp(84px, 11vw, 168px); }

/* =========================================================
   01 · HERO
   Portrait mit Spiegelung: mehrere Ebenen desselben Menschen.
   ========================================================= */
.ms-hero { min-height: clamp(600px, 90vh, 900px); }
/* Der Bildausschnitt liegt bewusst auf der Spiegelung links,
   damit die zweite Ebene sichtbar bleibt. */
.ms-hero .ag-hero-media img {
  object-position: 38% 46%;
  filter: grayscale(0.74) contrast(1.05) brightness(0.97);
}
.ms-hero-claim {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(15px, 1.5vw, 17px);
  font-style: italic;
  color: var(--accent-dark);
  margin: 0 0 6px;
}
/* Die H1 trägt zwei Sätze: der zweite ist die eigentliche These */
.ms-hero h1 span {
  display: block;
  color: var(--accent-dark);
}

/* =========================================================
   02 · "DU WEISST ES DOCH EIGENTLICH"
   Ruhige Textsequenz statt Kartenflut. Jedes Paar erscheint
   einzeln: Wissen links, Verhalten rechts.
   ========================================================= */
.ms-knowing { list-style: none; margin: 46px 0 0; padding: 0; display: grid; gap: 0; }
.ms-knowing li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 4vw, 56px);
  align-items: baseline;
  padding: clamp(22px, 2.8vw, 34px) 0;
  border-top: 1px solid var(--hairline);
}
.ms-knowing li:last-child { border-bottom: 1px solid var(--hairline); }
.ms-knowing b {
  font-weight: 400;
  font-size: clamp(16.5px, 1.8vw, 19px);
  line-height: 1.55;
  color: var(--ink);
}
.ms-knowing span {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.45;
  color: var(--accent-dark);
  position: relative;
  padding-left: 30px;
}
/* Der Gedankenstrich markiert den Bruch zwischen Wissen und Tun */
.ms-knowing span::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 16px; height: 1px;
  background: var(--accent);
}
.ms-knowing-close {
  margin: clamp(40px, 5vw, 64px) 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.36;
  color: var(--ink);
  max-width: 24ch;
}

/* =========================================================
   03 · DEFINITION
   Zitierfähiger Block für Suche und KI-Systeme.
   ========================================================= */
.ms-layers { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; }
.ms-layers li {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(14px, 3vw, 40px);
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
}
.ms-layers li:last-child { border-bottom: 1px solid var(--hairline); }
.ms-layers dt, .ms-layers .ms-layer-name {
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent-dark);
  padding-top: 3px;
}
.ms-layers p { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--text-muted); }

/* =========================================================
   04 · WAHRNEHMUNGSFILTER
   Dieselbe Menge an Information, zwei Annahmen, zwei Bilder.
   Der Nutzer schaltet um und sieht den Unterschied.
   ========================================================= */
.ms-filter { margin-top: 44px; }
.ms-filter-switch {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: var(--bg);
  margin-bottom: 30px;
}
.ag-section--panel .ms-filter-switch,
.ms-stage--mid .ms-filter-switch { background: var(--bg-cream); }
.ms-filter-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  /* 44px Zielgröße für Touch */
  padding: 12px 22px;
  min-height: 44px;
  border-radius: var(--pill);
  transition: background 300ms var(--ms-ease), color 300ms var(--ms-ease);
}
.ms-filter-switch button[aria-pressed="true"] {
  background: var(--ink-fixed);
  color: var(--bg-fixed);
}
.ms-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.ms-filter-item {
  background: var(--bg);
  padding: clamp(20px, 2.4vw, 28px);
  transition: background 500ms var(--ms-ease), opacity 500ms var(--ms-ease);
}
.ag-section--panel .ms-filter-item,
.ms-stage--mid .ms-filter-item { background: var(--bg-cream); }
.ms-filter-item p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--text-muted); }
/* Hervorgehoben wird, was zur gewählten Annahme passt.
   Zusätzlich zur Farbe markiert ein Balken den Zustand —
   Information darf nicht allein an Farbe hängen. */
.ms-filter-item::before {
  content: "";
  display: block;
  width: 22px; height: 2px;
  background: var(--border);
  margin-bottom: 14px;
  transition: background 500ms var(--ms-ease), width 500ms var(--ms-ease);
}
.ms-filter-item.is-lit {
  background: var(--bg-deep);
}
.ms-filter-item.is-lit::before { background: var(--accent-dark); width: 44px; }
.ms-filter-item.is-lit p { color: var(--ink); }
/* Die nicht hervorgehobenen Elemente werden bewusst NICHT ausgegraut:
   mit reduzierter Deckkraft käme der Text auf ca. 2 : 1 und wäre nicht
   mehr lesbar. Die Hervorhebung trägt stattdessen Fläche, Balken und
   Textfarbe — jeweils dreifach codiert, nicht nur über Farbe. */
.ms-filter-item.is-dim p { color: var(--text-muted); }
.ms-filter-note {
  margin-top: 24px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 62ch;
}

/* =========================================================
   05 · SELBSTBILD — Bild und Text auf einer Ebene
   ========================================================= */
.ms-selfimage .ag-figure-frame { aspect-ratio: 3 / 4; }

/* =========================================================
   06 · "ICH BIN HALT SO"
   Sätze, die wie Identität klingen. Groß gesetzt.
   ========================================================= */
.ms-sentences { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ms-sentences li {
  padding: clamp(15px, 1.9vw, 22px) 0;
  border-top: 1px solid var(--hairline);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(19px, 2.6vw, 30px);
  line-height: 1.32;
  color: var(--text-muted);
  transition: color 400ms var(--ms-ease);
}
.ms-sentences li:last-child { border-bottom: 1px solid var(--hairline); }
.ms-sentences li:hover { color: var(--ink); }

/* =========================================================
   07 · IDENTITY SENTENCE
   Verhalten und Identität sprachlich voneinander lösen.
   ========================================================= */
.ms-identity {
  margin-top: 42px;
  padding: clamp(26px, 3.4vw, 44px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
.ag-section--panel .ms-identity,
.ms-stage--mid .ms-identity { background: var(--bg-cream); }
.ms-identity-label {
  font-size: 10.5px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 18px;
}
.ms-identity-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
.ms-chip {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  padding: 12px 20px;
  min-height: 44px;
  transition: border-color 280ms var(--ms-ease), color 280ms var(--ms-ease), background 280ms var(--ms-ease);
}
.ms-chip:hover { border-color: var(--accent); color: var(--ink); }
.ms-chip[aria-pressed="true"] {
  background: var(--ink-fixed);
  border-color: var(--ink-fixed);
  color: var(--bg-fixed);
}
.ms-identity-out { display: grid; gap: 18px; }
.ms-identity-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: clamp(12px, 2.4vw, 28px);
  align-items: baseline;
}
.ms-identity-row span {
  font-size: 10.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.ms-identity-row p {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(18px, 2.2vw, 25px);
  line-height: 1.4;
  color: var(--ink);
}
.ms-identity-row--old p { color: var(--text-muted); }
.ms-identity-hint {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 62ch;
}

/* =========================================================
   08 · SELBSTWERT-THERMOSTAT
   Bewusst kein Thermostat-Look: ein reduzierter Regler.
   ========================================================= */
.ms-thermo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
  margin-top: 44px;
}
.ms-dial { width: 100%; max-width: 500px; height: auto; display: block; overflow: visible; }
.ms-dial-track { fill: none; stroke: var(--border); stroke-width: 2; }
.ms-dial-band {
  fill: none;
  stroke: var(--accent);
  stroke-width: 12;
  stroke-linecap: round;
  opacity: 0.34;
}
.ms-dial-marker { fill: var(--accent-dark); }
.ms-dial-line { stroke: var(--accent-dark); stroke-width: 1.4; stroke-dasharray: 3 4; }
.ms-dial-cap {
  font-family: "Jost", sans-serif;
  font-size: 13px;
  letter-spacing: 1.2px;
  fill: var(--text-muted);
}
.ms-dial-zone {
  font-family: "Jost", sans-serif;
  font-size: 13.5px;
  letter-spacing: 1.4px;
  fill: var(--accent-dark);
  text-anchor: middle;
}
/* Der Punkt wandert nach außen und federt zurück — genau das
   beschreibt das Modell. Erst wenn die Grafik im Blick ist. */
.ms-dial-dot {
  fill: var(--ink);
  transform: translateX(0);
  transition: transform 1400ms var(--ms-ease);
}
.ms-thermo.is-revealed .ms-dial-dot { animation: msDrift 5200ms var(--ms-ease) 400ms infinite; }
@keyframes msDrift {
  0%   { transform: translateX(0); }
  22%  { transform: translateX(96px); }
  46%  { transform: translateX(88px); }
  100% { transform: translateX(0); }
}
.ms-thermo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ms-thermo-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 15px 0;
  border-top: 1px solid var(--hairline);
  font-size: 15.5px;
  line-height: 1.55;
}
.ms-thermo-list li:last-child { border-bottom: 1px solid var(--hairline); }
.ms-thermo-list b { font-weight: 400; color: var(--ink); }
.ms-thermo-list i { font-style: normal; color: var(--accent); text-align: center; }
.ms-thermo-list span { color: var(--text-muted); }

/* Kennzeichnung: didaktische Metapher, kein biologisches Modell */
.ms-metaphor {
  margin-top: 34px;
  padding: 20px 24px;
  border-left: 2px solid var(--accent);
  background: var(--bg);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-muted);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.ag-section--panel .ms-metaphor,
.ms-stage--mid .ms-metaphor { background: var(--bg-cream); }
.ms-metaphor strong { color: var(--ink); font-weight: 500; }

/* =========================================================
   09 · UNSICHTBARER RUCKSACK
   Übernommene Sätze als gestapelte Schichten.
   ========================================================= */
.ms-backpack { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 10px; }
.ms-backpack li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.4vw, 28px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 380ms var(--ms-ease), border-color 380ms var(--ms-ease);
}
.ag-section--panel .ms-backpack li,
.ms-stage--mid .ms-backpack li { background: var(--bg-cream); }
.ms-backpack li:hover { transform: translateX(6px); border-color: var(--accent); }
.ms-backpack q {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.4;
  color: var(--ink);
  quotes: "„" "“";
}
.ms-backpack em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--accent-dark);
  white-space: nowrap;
}

/* =========================================================
   10 · WARUM POSITIVES DENKEN NICHT REICHT
   Die Kette: Gedanke → Handlung → Erfahrung → Überzeugung.
   ========================================================= */
.ms-chain { list-style: none; margin: 46px 0 0; padding: 0; display: grid; gap: 0; counter-reset: mschain; }
.ms-chain li {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 30px);
  padding: clamp(20px, 2.4vw, 28px) 0;
  counter-increment: mschain;
  border-top: 1px solid var(--hairline);
}
.ms-chain li:last-child { border-bottom: 1px solid var(--hairline); }
.ms-chain-num {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 15px;
  color: var(--accent-dark);
  padding-top: 4px;
}
/* Die Verbindungslinie macht die Kette sichtbar */
.ms-chain li::after {
  content: "";
  position: absolute;
  left: 20px;
  top: calc(50% + 12px);
  bottom: -4px;
  width: 1px;
  background: var(--border);
}
.ms-chain li:last-child::after { display: none; }
.ms-chain h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--ink);
  margin: 0 0 6px;
}
.ms-chain p { margin: 0; font-size: 15.5px; line-height: 1.66; color: var(--text-muted); max-width: 58ch; }
/* Der letzte Schritt ist der eigentliche Punkt der Section */
.ms-chain li:last-child h3 { color: var(--accent-dark); }

/* =========================================================
   11 · WISSENSCHAFT
   Nüchtern gesetzt. Einordnung steht sichtbar dabei.
   ========================================================= */
.ms-evidence { display: grid; gap: 0; margin-top: 44px; }
.ms-evidence article {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 44px);
  padding: clamp(24px, 2.8vw, 32px) 0;
  border-top: 1px solid var(--hairline);
}
.ms-evidence article:last-child { border-bottom: 1px solid var(--hairline); }
.ms-evidence-tag {
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--accent-dark);
  padding-top: 4px;
  line-height: 1.6;
}
.ms-evidence h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(18px, 1.9vw, 21px);
  color: var(--ink);
  margin: 0 0 10px;
}
.ms-evidence p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.7; color: var(--text-muted); max-width: 66ch; }
.ms-evidence .ms-src {
  font-size: 13px;
  line-height: 1.6;
  color: var(--accent-dark);
  font-style: italic;
}
/* Einschränkung immer sichtbar, nie versteckt */
.ms-evidence .ms-limit {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
  padding-left: 16px;
  border-left: 1px solid var(--border);
  margin-top: 12px;
}

/* =========================================================
   12 · THOUGHT CHECK
   Reflexion, keine Diagnose. Bewusst ohne Auswertung.
   ========================================================= */
.ms-check { margin-top: 44px; display: grid; gap: clamp(18px, 2.4vw, 26px); }
.ms-check-card {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
.ag-section--panel .ms-check-card,
.ms-stage--mid .ms-check-card { background: var(--bg-cream); }
.ms-check-q {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 20px;
}
.ms-check-options { display: flex; flex-wrap: wrap; gap: 10px; }
.ms-check-answer {
  margin: 22px 0 0;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--text-muted);
  max-width: 64ch;
  /* Erst sichtbar, wenn geantwortet wurde */
  display: none;
}
.ms-check-answer.is-open { display: block; }
.ms-check-answer strong { color: var(--ink); font-weight: 500; }

/* =========================================================
   13 · DIE NEUSCHREIBUNG — Editorial Storyboard
   ========================================================= */
.ms-scenes {
  display: grid;
  /* Sieben Szenen in vier Spalten: die letzte nimmt zwei Spalten ein,
     sonst bleibt in der zweiten Reihe eine leere Zelle stehen. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 46px;
  background: var(--border);
  border: 1px solid var(--border);
}
.ms-scene:last-child { grid-column: span 2; }
.ms-scene {
  background: var(--bg);
  padding: clamp(24px, 2.8vw, 34px);
  transition: background 420ms var(--ms-ease);
}
.ag-section--panel .ms-scene,
.ms-stage--mid .ms-scene { background: var(--bg-cream); }
.ms-scene:hover { background: var(--bg-panel); }
.ms-scene-num {
  font-size: 10.5px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 14px;
}
.ms-scene h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(19px, 2vw, 23px);
  color: var(--ink);
  margin: 0 0 10px;
}
.ms-scene p { margin: 0; font-size: 15px; line-height: 1.66; color: var(--text-muted); }
.ms-scene q {
  display: block;
  margin-top: 14px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 15.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--accent-dark);
  quotes: "„" "“";
}

/* =========================================================
   14 · VON GEDANKEN ZU IDENTITÄT
   Kreislauf, ausdrücklich nicht als Einbahnstraße.
   ========================================================= */
.ms-loop {
  display: grid;
  /* Acht Schritte, vier Spalten: zwei volle Reihen, keine Lücke. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 44px;
  background: var(--border);
  border: 1px solid var(--border);
}
.ms-loop-step {
  background: var(--bg);
  padding: clamp(20px, 2.2vw, 26px);
  text-align: center;
}
.ag-section--panel .ms-loop-step,
.ms-stage--open .ms-loop-step { background: var(--bg-cream); }
.ms-loop-step b {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--ink);
  margin-bottom: 8px;
}
.ms-loop-step span { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.ms-loop-note {
  margin: 26px 0 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-muted);
  max-width: 68ch;
}

/* =========================================================
   15 · THEMEN-BRÜCKEN (Angst · Beziehungen · Beruf · Freiheit)
   ========================================================= */
.ms-bridges { display: grid; gap: 0; margin-top: 46px; }
.ms-bridge {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 44px);
  align-items: center;
  padding: clamp(26px, 3vw, 36px) 0;
  border-top: 1px solid var(--hairline);
}
.ms-bridge:last-child { border-bottom: 1px solid var(--hairline); }
.ms-bridge-label {
  font-size: 10.5px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.ms-bridge h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.34;
  color: var(--ink);
  margin: 0 0 8px;
  max-width: 30ch;
}
.ms-bridge p { margin: 0; font-size: 15.5px; line-height: 1.66; color: var(--text-muted); max-width: 56ch; }
.ms-bridge .mega-cta { white-space: nowrap; }

/* =========================================================
   16 · WENDEPUNKT — hier öffnet sich die Seite sichtbar
   ========================================================= */
.ms-turn {
  position: relative;
  min-height: clamp(520px, 74vh, 760px);
  display: flex;
  align-items: flex-end;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 48px);
  overflow: hidden;
  background: var(--ink-fixed);
}
.ms-turn-media { position: absolute; inset: 0; z-index: 0; }
.ms-turn-media picture { display: block; width: 100%; height: 100%; }
.ms-turn-media img {
  /* Das Bild ist quer (1,5), im breiten Band sind rund 60 Prozent der
     Bildhoehe zu sehen. 40 Prozent legt das Fenster so, dass Spiegel,
     Gesicht und die zerspringende Maske vollstaendig darin liegen. */
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  filter: grayscale(0.55) brightness(0.7);
  transform: scale(1.05);
  transition: filter 1800ms var(--ms-ease), transform 2600ms var(--ms-ease);
}
.ms-turn.is-revealed .ms-turn-media img {
  filter: grayscale(0) brightness(0.82);
  transform: scale(1);
}
.ms-turn-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 19, 18, 0.24) 0%,
    rgba(20, 19, 18, 0.48) 48%,
    rgba(20, 19, 18, 0.88) 100%);
}
.ms-turn-inner { position: relative; z-index: 1; max-width: var(--ms-max); margin: 0 auto; width: 100%; }
.ms-turn .ag-kicker { color: rgba(240, 236, 228, 0.68); }
.ms-turn-text {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(26px, 4.2vw, 52px);
  line-height: 1.2;
  color: #f0ece4;
  margin: 0 0 20px;
  max-width: 22ch;
}
.ms-turn-sub {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.7;
  color: rgba(240, 236, 228, 0.84);
  margin: 0;
  max-width: 46ch;
}

/* Reflexionsfragen nach dem Wendepunkt */
.ms-questions { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 12px; }
.ms-questions li {
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px);
  background: var(--bg);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.45;
  color: var(--ink);
}
.ag-section--panel .ms-questions li,
.ms-stage--open .ms-questions li { background: var(--bg-cream); }

/* =========================================================
   17 · BANNER — Magazin-Doppelseite, keine Werbefläche
   ========================================================= */
.ms-banner {
  position: relative;
  padding: clamp(62px, 9vw, 124px) clamp(20px, 5vw, 48px);
  background: var(--bg-deep);
}
.ms-banner-inner {
  max-width: var(--ms-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}
.ms-banner-text {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(25px, 3.6vw, 44px);
  line-height: 1.24;
  color: var(--ink);
  margin: 0;
  max-width: 20ch;
}
.ms-banner-note { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--text-muted); max-width: 44ch; }
.ms-banner--ink { background: var(--ink-fixed); }
.ms-banner--ink .ms-banner-text { color: #f0ece4; }
.ms-banner--ink .ms-banner-note { color: rgba(240, 236, 228, 0.78); }
.ms-banner--ink .ag-kicker { color: rgba(240, 236, 228, 0.68); }

/* =========================================================
   18 · ABSCHLUSS-CTA — eine klare Hierarchie
   ========================================================= */
.ms-cta-primary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  margin-top: 42px;
  padding: clamp(28px, 3.2vw, 42px);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--bg-cream);
  text-decoration: none;
  transition: background 420ms var(--ms-ease), transform 420ms var(--ms-ease);
}
.ms-cta-primary:hover { background: var(--bg-panel); transform: translateY(-3px); }
.ms-cta-secondaries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  margin-top: clamp(14px, 1.8vw, 20px);
}
.ms-cta-card {
  display: block;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 420ms var(--ms-ease), transform 420ms var(--ms-ease);
}
.ms-cta-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.ms-cta-label {
  font-size: 10.5px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 12px;
}
.ms-cta-primary h3, .ms-cta-card h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 26px);
  color: var(--ink);
  margin: 0 0 8px;
}
.ms-cta-primary p, .ms-cta-card p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--text-muted); }
.ms-cta-arrow {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  display: grid;
  place-items: center;
  color: var(--accent-dark);
  flex-shrink: 0;
}
.ms-cta-arrow svg { width: 19px; height: 19px; transition: transform 380ms var(--ms-ease); }
.ms-cta-primary:hover .ms-cta-arrow svg { transform: translateX(4px); }

/* =========================================================
   GLOSSAR — zitierfähige Kurzdefinitionen (GEO)
   ========================================================= */
.ms-glossary { display: grid; gap: 0; margin-top: 40px; }
.ms-glossary > div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(16px, 3vw, 44px);
  padding: clamp(20px, 2.4vw, 26px) 0;
  border-top: 1px solid var(--hairline);
}
.ms-glossary > div:last-child { border-bottom: 1px solid var(--hairline); }
.ms-glossary dt {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--ink);
  margin: 0;
}
.ms-glossary dd { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--text-muted); }

/* =========================================================
   FOKUS — auf dunklen Flächen sichtbar halten
   ========================================================= */
.ms-turn a:focus-visible { outline: 2px solid #f0ece4; outline-offset: 3px; }

/* =========================================================
   RESPONSIVE — Mobile ist eine eigene Komposition
   ========================================================= */
@media (max-width: 980px) {
  .ms-thermo { grid-template-columns: 1fr; }
  .ms-dial { max-width: 420px; margin-inline: auto; }
  .ms-banner-inner { grid-template-columns: 1fr; gap: 22px; }
  /* Zwei Spalten: 7 Szenen ergeben 3 volle Reihen plus eine breite. */
  .ms-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-scene:last-child { grid-column: span 2; }
  .ms-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ms-knowing li { grid-template-columns: 1fr; gap: 10px; }
  .ms-knowing span { padding-left: 0; }
  .ms-knowing span::before { position: static; display: block; margin-bottom: 10px; }
  .ms-layers li { grid-template-columns: 1fr; gap: 8px; }
  .ms-evidence article { grid-template-columns: 1fr; gap: 10px; }
  .ms-identity-row { grid-template-columns: 1fr; gap: 6px; }
  .ms-bridge { grid-template-columns: 1fr; gap: 14px; }
  .ms-bridge .mega-cta { justify-self: start; }
  .ms-backpack li { grid-template-columns: 1fr; gap: 10px; }
  .ms-glossary > div { grid-template-columns: 1fr; gap: 8px; }
  .ms-cta-primary { grid-template-columns: 1fr; gap: 20px; }
  .ms-thermo-list li { grid-template-columns: 1fr; gap: 4px; }
  .ms-thermo-list i { text-align: left; }
  .ms-filter-switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .ms-turn { min-height: clamp(460px, 108vw, 620px); }
  .ms-turn-media img { object-position: center 46%; }

  /* Der geteilte Hero-Schleier verläuft waagerecht (Text links, Bild
     rechts). Im schmalen Viewport steht der Text über der ganzen
     Breite und liefe sonst in den hellen Bildbereich. Deshalb hier
     ein senkrechter Verlauf: oben deckend, unten offen. */
  .ms-hero .ag-hero-veil {
    background: linear-gradient(180deg,
      rgba(229, 226, 219, 0.97) 0%,
      rgba(229, 226, 219, 0.94) 48%,
      rgba(229, 226, 219, 0.74) 76%,
      rgba(229, 226, 219, 0.40) 100%);
  }
  html[data-theme="dark"] .ms-hero .ag-hero-veil {
    background: linear-gradient(180deg,
      rgba(22, 21, 20, 0.96) 0%,
      rgba(22, 21, 20, 0.92) 48%,
      rgba(22, 21, 20, 0.72) 76%,
      rgba(22, 21, 20, 0.38) 100%);
  }
}
@media (max-width: 560px) {
  .ms-scenes { grid-template-columns: 1fr; }
  .ms-scene:last-child { grid-column: span 1; }
}

/* =========================================================
   MOTION & PRINT
   Bewegung ist Zugabe, nie Informationsträger.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .ms-dial-dot,
  .ms-turn-media img,
  .ms-backpack li,
  .ms-scene,
  .ms-filter-item,
  .ms-sentences li {
    transition: none !important;
    animation: none !important;
  }
  /* Der Regler steht dann außen: die Aussage bleibt sichtbar */
  .ms-thermo.is-revealed .ms-dial-dot { transform: translateX(88px); }
  .ms-turn-media img { filter: grayscale(0) brightness(0.82); transform: none; }
}
@media print {
  .ms-turn-media, .ag-progress, .site-header, .nav-mobile { display: none !important; }
  .ms-turn { background: none; min-height: 0; }
  .ms-turn-text, .ms-turn-sub, .ms-banner--ink .ms-banner-text, .ms-banner--ink .ms-banner-note { color: #141312 !important; }
}