/* ==========================================================================
   Agentur-Manifest · Silberschmidt Media
   Seite: Token, Grundlagen, Layout, Abschnitte, Indikator, Intro.
   Die Welle an der Hero-Unterkante liegt separat in wave.css.
   Fluid-Werte: clamp(min bei 390 px, Interpolation, max bei 1440 px).
   ========================================================================== */

/* ---------- Schriften (lokal) ---------- */
@font-face {
  font-family: "Maison Neue";
  src: url("../fonts/maison-neue-book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Maison Neue";
  src: url("../fonts/maison-neue-demi.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Maison Neue Mono";
  src: url("../fonts/maison-neue-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Token ---------- */
:root {
  /* Farben (Markenvorgabe) */
  --accent: #FF5029;
  --navy: #000130;
  --cream: #F9F9EC;
  --white: #FFFFFF;
  --grey-100: #F2F2F2;
  --line: rgba(48, 38, 38, 0.15);
  --wall: #D7D7DA;            /* Platzhalter, bis das Intro-Foto geladen ist */

  /* Schriften */
  --font-sans: "Maison Neue", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Maison Neue Mono", ui-monospace, Menlo, monospace;

  /* Typo (Desktop-Wert bei 1440 px, Minimum bei 390 px) */
  --fs-h1: clamp(56px, 20.343px + 9.1429vw, 152px);
  --fs-h2-intro: clamp(44px, 29.143px + 3.8095vw, 84px);
  --fs-h2-principle: clamp(38px, 25.371px + 3.2381vw, 72px);
  --fs-h2-overview: clamp(36px, 28.571px + 1.9048vw, 56px);
  --fs-h2-cta: clamp(52px, 29.714px + 5.7143vw, 112px);
  --fs-lead: clamp(19px, 16.4px + 0.6667vw, 26px);
  --fs-body: clamp(18px, 15.029px + 0.7619vw, 26px);
  --fs-intro: clamp(18px, 16.514px + 0.381vw, 22px);
  --fs-mono: clamp(12px, 10.886px + 0.2857vw, 15px);
  --fs-card-title: 23px;
  --fs-card-text: 15px;

  /* Raster */
  --gutter: clamp(24px, 5.56vw, 80px);
  --content-max: 1280px;

  /* Abstände */
  --hero-pad: clamp(64px, 43.2px + 5.3333vw, 120px);
  --hero-gap-title: clamp(24px, 18.057px + 1.5238vw, 40px);
  --hero-gap-row: clamp(32px, 26.057px + 1.5238vw, 48px);
  --intro-gap: clamp(24px, 21.029px + 0.7619vw, 32px);
  --principle-gap: clamp(20px, 17.029px + 0.7619vw, 28px);
  --overview-pad: clamp(88px, 61.257px + 6.8571vw, 160px);
  --overview-gap: clamp(32px, 26.057px + 1.5238vw, 48px);
  --cta-pad: clamp(88px, 68.686px + 4.9524vw, 140px);

  /* Grundsätze */
  --principle-col: min(520px, 36.111vw);
  --principle-col-gap: clamp(32px, 5.556vw, 80px);
  --ziffer-h: 32vh;

  /* Indikator */
  --ind-right: clamp(12px, 3.889vw, 56px);
  --ind-mark: 6px;
  --ind-active: 48px;
  --ind-gap: 12px;
  /* Textspalte hält rechts Abstand zum Indikator */
  --pad-right-safe: max(var(--gutter), calc(var(--ind-right) + var(--ind-mark) + 24px));

  /* Bewegung */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

@supports (height: 1svh) {
  :root { --ziffer-h: 32svh; }
}

@media (min-width: 768px) {
  :root { --ziffer-h: min(66.667vh, 600px, 41.667vw); }
  @supports (height: 1svh) {
    :root { --ziffer-h: min(66.667svh, 600px, 41.667vw); }
  }
}

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

html {
  /* Rot, damit Überscrollen oben (Hero) und unten (Abschluss) nahtlos bleibt */
  background: var(--accent);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-snap-type: y proximity;
}

@media (min-width: 768px) {
  html { scroll-snap-type: y mandatory; }
}

/* Weiches Scrollen erst nach dem Laden (main.js setzt .is-ready),
   damit Links mit #anker direkt am Ziel öffnen. */
@media (prefers-reduced-motion: no-preference) {
  html.is-ready { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-sans);
  font-weight: 400;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ol {
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: 600;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
}

.wrap {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Harte Umbrüche aus Figma nur ab 768 px */
@media (max-width: 767px) {
  .br-desktop { display: none; }
}

/* Fokus: 2 px, Farbe folgt dem Text des jeweiligen Hintergrunds */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  outline: 2px solid var(--cream);
  outline-offset: 2px;
}

/* Mono-Label (Eyebrow, Scroll-Hinweis) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}

/* Ohne die harten Umbrüche: ausgeglichene Zeilen statt „Gestaltung mit / Haltung“ */
@media (max-width: 767px) {
  .hero__title,
  .intro__title,
  .principle__title,
  .cta__title {
    text-wrap: balance;
  }
}

/* Silbentrennung im Fließtext nur auf schmalen Viewports, nur in längeren Wörtern */
@media (max-width: 767px) {
  .intro__text,
  .principle__text,
  .card__text,
  .cta__text {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 8 4 4;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
  }
}

/* Wortgruppen, die nicht am Bindestrich umbrechen sollen */
.nowrap {
  white-space: nowrap;
}

/* ==========================================================================
   1. Hero
   Eingerückt (Erweiterung 2, E1): Der Hero ist um einen „Ausblick“ kürzer als
   der Viewport, damit schon beim Öffnen unten die Welle und ein Streifen des
   Intro-Fotos zu sehen sind (bei 1440 × 900: 144 px).
   min-height statt height: Reicht der Platz in extremen Formaten nicht, wächst
   der Hero, statt Text abzuschneiden.
   ========================================================================== */
:root {
  --hero-peek: clamp(112px, 16vh, 152px);
}

.hero {
  position: relative;
  z-index: 2;
  overflow-x: clip;           /* die Welle wird nur horizontal beschnitten */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--hero-peek));
  background: var(--accent);
  color: var(--cream);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Polster als Mindestabstand: Der Inhalt bleibt zentriert, das Polster greift
   erst, wenn es eng wird (z. B. 1280 × 720), und wächst nicht über 8 % der Höhe. */
.hero__inner {
  padding-block: min(var(--hero-pad), 8vh);
}

/* svh in eigenem Block: Eine Deklaration mit var() und unbekannter Einheit
   würde sonst erst zur Laufzeit ungültig und den vh-Wert davor nicht ersetzen. */
@supports (height: 1svh) {
  :root { --hero-peek: clamp(112px, 16svh, 152px); }
  .hero { min-height: calc(100svh - var(--hero-peek)); }
  .hero__inner { padding-block: min(var(--hero-pad), 8svh); }
}

/* Sehr niedrige Viewports (Handy quer, z. B. 844 × 390): Abstände und H1 an die
   Höhe binden, damit H1 und Lead über Welle und Fotostreifen Platz haben. */
@media (max-height: 540px) {
  .hero {
    --hero-gap-title: clamp(10px, 3vh, 24px);
    --hero-gap-row: clamp(14px, 4vh, 32px);
  }

  .hero__inner {
    padding-block: clamp(16px, 5vh, 32px);
  }

  .hero .hero__title {
    font-size: min(var(--fs-h1), 15.5vh);
  }

  /* Lead und Scroll-Hinweis in einer Zeile (ab 768 px Breite), statt den
     Hinweis in eine eigene Zeile umbrechen zu lassen */
  .hero .hero__row {
    flex-wrap: nowrap;
  }

  .hero .hero__lead {
    flex: 0 1 auto;
    min-width: 0;
  }

  @supports (height: 1svh) {
    .hero {
      --hero-gap-title: clamp(10px, 3svh, 24px);
      --hero-gap-row: clamp(14px, 4svh, 32px);
    }

    .hero__inner {
      padding-block: clamp(16px, 5svh, 32px);
    }

    .hero .hero__title {
      font-size: min(var(--fs-h1), 15.5svh);
    }
  }
}

/* Niedrige Laptop-Fenster (z. B. 1280 × 600 bei 150 % Skalierung): H1 so weit
   verkleinern, dass Eyebrow, H1 (zwei Zeilen), Lead (zwei Zeilen) und Polster in
   den eingerückten Hero passen. Sonst wächst der Hero über min-height, und der
   Ausblick auf Welle und Foto geht verloren. Bei 1440 × 900 und 1280 × 720 greift
   weiter --fs-h1. */
@media (min-width: 768px) and (min-height: 541px) {
  .hero .hero__title {
    font-size: min(var(--fs-h1), calc((100vh - var(--hero-peek) - 2 * min(var(--hero-pad), 8vh) - var(--hero-gap-title) - var(--hero-gap-row) - 2.8 * var(--fs-lead) - 1.2 * var(--fs-mono) - 12px) / 1.92));
  }

  @supports (height: 1svh) {
    .hero .hero__title {
      font-size: min(var(--fs-h1), calc((100svh - var(--hero-peek) - 2 * min(var(--hero-pad), 8svh) - var(--hero-gap-title) - var(--hero-gap-row) - 2.8 * var(--fs-lead) - 1.2 * var(--fs-mono) - 12px) / 1.92));
    }
  }
}

.hero__title {
  margin-top: var(--hero-gap-title);
  font-size: var(--fs-h1);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--cream);
}

.hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  margin-top: var(--hero-gap-row);
}

.hero__lead {
  max-width: 620px;
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--cream);
}

.hero__scroll {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  text-decoration: none;
}

.hero__scroll:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Die Mono hat keinen Pfeil, daher aus der Maison Neue */
.hero__scroll-arrow {
  margin-right: 1.4em;
  font-family: var(--font-sans);
  letter-spacing: 0;
}

@media (max-width: 767px) {
  .hero__row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   2. Intro „Gestaltung mit Haltung“
   Mobil und Hochformat: Foto als Block oben, Text darunter auf Weiß.
   Ab 768 px im Querformat: Foto vollflächig, Text links, Pfeil zum Plakat.
   ========================================================================== */
.intro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--white);
  color: var(--navy);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.intro__media {
  display: block;
  flex: none;
  height: 56vh;
  height: 56svh;
  background: var(--wall);
}

.intro__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Plakat sitzt im Foto rechts (x 0,6075 bis 0,941): rechts ausrichten */
  object-position: 100% 50%;
}

.intro__arrow {
  display: none;
}

.intro__inner {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding-block: clamp(40px, 6vh, 64px) clamp(56px, 8vh, 88px);
  padding-block: clamp(40px, 6svh, 64px) clamp(56px, 8svh, 88px);
}

.intro__title {
  margin-bottom: var(--intro-gap);
  font-size: var(--fs-h2-intro);
  line-height: 1;
  letter-spacing: -0.02em;
}

.intro__text {
  max-width: 420px;
  font-size: var(--fs-intro);
  line-height: 1.5;
}

/* Kreis um „Motto“: inline-block, damit die Box genau eine Zeilenhöhe hoch ist.
   Seitlicher Rand, weil die Ellipse in der Mitte ca. 6,75 px übersteht: rechts 5 px
   (auf Grundlinienhöhe ist die Ellipse schon eingezogen, der Punkt bleibt frei, ohne
   wie abgesetzt zu wirken), links 2 px zusätzlich zum Wortzwischenraum. */
.motto {
  position: relative;
  display: inline-block;
  margin-inline: 2px 5px;
}

.motto::after {
  content: "";
  position: absolute;
  inset: -3px -6px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
}

/* Handy im Querformat: Fotostreifen etwas höher und Ausschnitt nach oben,
   damit der Plakatrahmen vollständig unter der Welle im Bild liegt */
@media (max-width: 767px) and (orientation: landscape) {
  .intro__media {
    height: 62vh;
    height: 62svh;
  }

  .intro__img {
    object-position: 100% 28%;
  }
}

@media (min-width: 768px) and (min-aspect-ratio: 5/4) {
  .intro {
    flex-direction: row;
    align-items: center;
    background: var(--wall);
  }

  .intro__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: auto;
  }

  .intro__img {
    /* Bei 1440 × 900 (breiter als das Foto) wirkt nur die vertikale Mitte, wie in Figma.
       Bei schmaleren Querformaten bleibt das Plakat rechts im Bild. */
    object-position: 85% 50%;
  }

  .intro__arrow {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .intro__arrow path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .intro__inner {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    padding-block: var(--hero-pad);
  }
}

/* Sehr breite Querformate (z. B. 32:9): Ausschnitt nach oben, damit der
   Plakatrahmen nicht über dem Intro bzw. unter der Welle verschwindet */
@media (min-width: 768px) and (min-aspect-ratio: 5/2) {
  .intro__img {
    object-position: 85% 36%;
  }
}

/* ==========================================================================
   3. Acht Grundsätze
   ========================================================================== */
.principle {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.principle--light {
  border-top: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
}

.principle--dark {
  background: var(--navy);
  color: var(--cream);
}

.principle--red {
  background: var(--accent);
  color: var(--cream);
}

.principle__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  row-gap: clamp(24px, 4vh, 40px);
  padding-block: 64px;
  padding-right: var(--pad-right-safe);
}

.principle__figure {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--ziffer-h);
  color: var(--accent);
}

.principle--red .principle__figure {
  color: var(--cream);
}

.ziffer {
  flex: none;
  width: auto;
  height: var(--ziffer-h);
}

/* Konstruktions-4: viewBox 470 statt 400 hoch, damit die Glyphe gleich groß bleibt.
   Oben bündig wie die 400er-viewBoxen (die zusätzlichen 70 Einheiten liegen unten),
   so steht die Glyphe beim Durchscrollen exakt auf der Höhe der anderen Ziffern. */
.ziffer--konstruktion {
  height: calc(var(--ziffer-h) * 470 / 400);
  align-self: flex-start;
}

/* Hilfslinien enden an den Spaltenkanten statt in Rand und Spaltenabstand zu ragen */
#grundsatz-4 .principle__figure {
  overflow-x: clip;
}

.principle__title {
  margin-bottom: var(--principle-gap);
  font-size: var(--fs-h2-principle);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.principle__text {
  max-width: 620px;
  font-size: var(--fs-body);
  line-height: 1.45;
}

@media (min-width: 768px) {
  .principle__inner {
    grid-template-columns: var(--principle-col) minmax(0, 1fr);
    column-gap: var(--principle-col-gap);
    padding-block: clamp(32px, 6vh, 64px);
  }

  .principle__figure {
    justify-content: center;
  }

  /* Überschrift passt sich der Textspalte an, damit die Figma-Umbrüche halten */
  .principle__body {
    container-type: inline-size;
  }

  /* Nur mit Container-Einheiten: Ohne Unterstützung würde die Deklaration wegen var()
     erst zur Laufzeit ungültig und die Größe auf den geerbten Wert (16 px) fallen. */
  @supports (width: 1cqi) {
    .principle__title {
      font-size: min(var(--fs-h2-principle), 10.8cqi);
    }
  }

  /* Textfeld wie in Figma (507,65 px), damit die Umbrüche übereinstimmen */
  #grundsatz-8 .principle__text {
    max-width: 508px;
  }
}

/* ==========================================================================
   4. Übersicht
   ========================================================================== */
.overview {
  padding-block: var(--overview-pad);
  background: var(--grey-100);
  color: var(--navy);
  scroll-snap-align: start;
}

.overview__title {
  margin-bottom: var(--overview-gap);
  font-size: var(--fs-h2-overview);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 0;
  list-style: none;
}

.cards__item {
  display: flex;
}

.card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 24px 32px;
  border-radius: 2px;
  background: var(--white);
  color: var(--navy);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 200ms ease;
  /* Fokus-Scrollen lässt Luft für den Fokusring (Karten sind keine Snap-Ziele) */
  scroll-margin-block: 16px;
}

.card__ziffer {
  flex: none;
  width: auto;
  height: 96px;
  margin-bottom: 24px;
  color: var(--accent);
  transition: transform 300ms var(--ease-out);
}

.card__title {
  margin-bottom: 16px;
  font-size: var(--fs-card-title);
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.card__text {
  font-size: var(--fs-card-text);
  line-height: 1.45;
  opacity: 0.8;
}

.card:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.card:hover .card__ziffer,
.card:focus-visible .card__ziffer {
  transform: translateY(-4px);
}

.card:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

@media (min-width: 600px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .card {
    padding: 28px 28px 36px;
  }

  .card__ziffer {
    height: 130px;
  }
}

@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   5. Abschluss
   ========================================================================== */
.cta {
  padding-block: var(--cta-pad);
  background: var(--accent);
  color: var(--cream);
  scroll-snap-align: end;
}

.cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
}

.cta__title {
  flex: 0 1 672px;
  /* 14vw: „Widerspruch?“ passt auch bei 320 px in die Spalte (kein horizontales Scrollen),
     ab ca. 371 px gilt unverändert --fs-h2-cta */
  font-size: min(var(--fs-h2-cta), 14vw);
  line-height: 0.96;
  letter-spacing: -0.03em;
}

.cta__text {
  font-size: var(--fs-body);
  line-height: 1.45;
}

@media (max-width: 767px) {
  .cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta__title {
    flex-basis: auto;
  }
}

/* ==========================================================================
   Indikator (rechts, fixiert)
   Ohne JS bleibt er ausgeblendet; main.js blendet ihn auf den Grundsätzen ein.
   ========================================================================== */
.indicator {
  position: fixed;
  top: 50%;
  right: var(--ind-right);
  z-index: 10;
  color: var(--navy);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%);
  transition: opacity 300ms ease, visibility 0s linear 300ms, color 300ms ease;
}

.indicator.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease, visibility 0s linear 0s, color 300ms ease;
}

.indicator[data-tone="light"] {
  color: var(--cream);
}

.indicator__list {
  display: flex;
  flex-direction: column;
  gap: var(--ind-gap);
  padding: 0;
  list-style: none;
}

.indicator__list li {
  display: flex;
}

.indicator__link {
  position: relative;
  display: block;
  width: var(--ind-mark);
  color: inherit;
  border-radius: 3px;
}

/* Unsichtbar vergrößerte Trefferfläche: 24 px hoch, nach links auf 36 px verbreitert
   (Textspalte bleibt frei, da --pad-right-safe ≥ --ind-right + 30 px). Bei 18 px Raster
   (6 px Marke + 12 px Abstand) überlappen sich die Flächen, effektiv 36 × 18 px je Punkt. */
.indicator__link::before {
  content: "";
  position: absolute;
  inset: -9px -9px -9px -21px;
}

.indicator__mark {
  display: block;
  width: var(--ind-mark);
  height: var(--ind-mark);
  border-radius: 3px;
  background: currentColor;
  transition: height 300ms var(--ease-out);
}

.indicator__link[aria-current="true"] .indicator__mark {
  height: var(--ind-active);
}

.indicator__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .indicator,
  .indicator.is-visible,
  .indicator__mark,
  .card,
  .card__ziffer {
    transition: none;
  }

  .card:hover .card__ziffer,
  .card:focus-visible .card__ziffer {
    transform: none;
  }
}

/* ---------- Druck ---------- */
@media print {
  html { scroll-snap-type: none; background: none; }
  .indicator,
  .skip-link,
  .intro__arrow { display: none; }
  .hero,
  .intro,
  .principle { min-height: 0; break-inside: avoid; }
}