/* Trevera — Startseite. Nur was ausschliesslich hier vorkommt.
   Takt: hell · dunkel · dunkel · hell · dunkel · hell · blau · dunkel. */

/* ---------- Hero ---------- */
.hero { padding-block: clamp(56px, 7vw, 104px) clamp(56px, 6vw, 96px); }
.hero__raster {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 56.25rem) {
  .hero__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-8); }
}
.hero h1 { margin-bottom: var(--s-4); }
.hero h1 em {
  font-style: normal;
  color: var(--orange);
}
.hero .lead { margin-bottom: var(--s-6); }
.hero__clip { justify-self: start; width: 100%; max-width: 25rem; }
/* Am Telefon ist eine 9:16-Kachel ueber die volle Breite 620 px hoch und
   schiebt alles Weitere aus dem ersten Bildschirm. Schmaler ist hier mehr. */
@media (max-width: 47.99rem) { .hero__clip { max-width: 17rem; } }
@media (min-width: 56.25rem) { .hero__clip { justify-self: end; } }

/* Die Heldenkachel haengt beim Scrollen leicht nach. Kein Skript: Der
   Scrollstand selbst treibt die Animation, wo der Browser das kann. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 56.25rem) {
    @keyframes clip-nachlauf { from { transform: translateY(38px); } to { transform: translateY(-38px); } }
    .hero__clip { animation: clip-nachlauf linear both; animation-timeline: view(); animation-range: cover; }
  }
}

/* ---------- Zahlenband ----------
   Drei Zahlen, EINE Groesse. Vorher stand die 450 riesig neben einer winzigen
   25 und einer winzigen 2 — das las sich nicht als Betonung, sondern als
   Versehen. Wer drei Zahlen nebeneinanderstellt, vergleicht sie; ungleiche
   Groessen machen den Vergleich kaputt. */
.zahlenband { padding-block: clamp(64px, 7vw, 108px); }
.zahlenband__raster {
  display: grid;
  gap: var(--s-6) var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .zahlenband__raster { grid-template-columns: repeat(3, 1fr); } }
.kennzahl__wert { display: block; font-size: clamp(3rem, 1.4rem + 6.4vw, 6rem); }
.kennzahl__wert .zahl__einheit { color: var(--orange-hell); }
.kennzahl__linie { height: 2px; background: var(--linie); margin: var(--s-3) 0 0.85rem; }
.kennzahl__label { font-size: 1rem; color: var(--leise); }

/* ---------- Clip-Wand ----------
   EIN Band mit grossen Kacheln, nicht zwei mit kleinen. Am 28.08.2026 abends
   liefen hier zwoelf Kacheln je Reihe, also vierundzwanzig gleichzeitig — bei
   nur sechs verschiedenen Clips. Max: „ein crazy overload als user". Er hat
   recht, und der Grund ist nicht die Menge an Bewegung, sondern die
   WIEDERHOLUNG: Wer denselben Creator dreimal nebeneinander sieht, liest keine
   Auswahl, sondern eine Tapete. Grosse Kacheln in einer Reihe zeigen zu jedem
   Zeitpunkt vier verschiedene — und keine zweimal.
   Zwei identische Saetze hintereinander, verschoben um genau einen Satz —
   deshalb springt nichts, wenn der Zyklus von vorn beginnt. */
.wand { padding-block: clamp(48px, 5vw, 72px) var(--takt); }
.wand__band {
  overflow: hidden;
  padding-block: 5px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.wand__zug {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: wand-lauf 72s linear infinite;
}
@keyframes wand-lauf {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - 8px), 0, 0); }
}
.wand__band:hover .wand__zug,
.wand__band:focus-within .wand__zug { animation-play-state: paused; }

.klip {
  position: relative;
  flex: 0 0 auto;
  width: clamp(230px, 25vw, 360px);
  aspect-ratio: 9 / 16;
  border-radius: var(--r-gross);
  overflow: hidden;
  background: var(--tinte-karte);
  display: block;
  text-decoration: none;
  color: var(--text-dunkel);
  transition: transform 0.3s var(--schwung);
}
@media (max-width: 40rem) { .klip { width: 66vw; } }
.klip:hover { transform: scale(1.03); }
.klip__bild, .klip__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Das Standbild liegt UEBER dem Video. Solange keine Datei vorliegt oder kein
   Skript laeuft, sieht man das Standbild — und zwar ohne dass irgendwo im
   Stylesheet etwas auf null gesetzt waere und auf JavaScript wartete. Laeuft
   das Video wirklich, nimmt das Skript das Standbild weg. */
.klip__bild { z-index: 1; }
.klip--laeuft .klip__bild { display: none; }

/* Der einzige Verlauf der Seite (die Bandmaske ist kein Bild, sondern ein
   Schnitt). Er traegt genau eine Sache: den Namen des Creators. */
.klip::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(to top, rgba(11, 14, 18, 0.78) 0%, rgba(11, 14, 18, 0) 100%);
  pointer-events: none;
  z-index: 2;
}
/* Der Markenname stand bis zum 28.08.2026 zusaetzlich auf JEDER Kachel. Bei
   vier Saily-Kacheln nebeneinander liest sich das nicht als Zuordnung,
   sondern als Stempel. Welche Marke wozu gehoert, sagt der Abschnitt darunter. */
.klip__wer {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  z-index: 3;
  font-size: var(--t-meta);
  font-weight: 600;
  color: #FFFFFF;
}

/* Solange keine Videodatei vorliegt, wandert das Standbild langsam. Ein
   reglos stehendes Standbild liest sich als kaputt, ein wanderndes nicht.
   Im laufenden Band waere das eine zweite Bewegung ueber der ersten —
   dort bleibt es deshalb ruhig. */
@keyframes klip-zug {
  from { transform: scale(1.08) translate3d(-1.6%, 1.4%, 0); }
  to   { transform: scale(1.08) translate3d(1.6%, -1.4%, 0); }
}
.klip__bild { animation: klip-zug 17s ease-in-out infinite alternate; }
.wand__zug .klip__bild { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .klip__bild { animation: none; }
  .klip:hover { transform: none; }
  .wand__zug { animation: none; }
  .wand__band { overflow-x: auto; }
}

/* ---------- Marken ----------
   Kundenfarben sind ausschliesslich Kachelgrund. Die Kachel traegt ihre
   Kampagne mit: Logo, ein Satz, drei nachpruefbare Angaben. */
.marken {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .marken { grid-template-columns: repeat(3, 1fr); } }
.marke {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-gross);
  background: var(--grund-leise);
  border: 1px solid var(--linie-hell);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.3s var(--schwung);
}

/* ---------- Der Medienkopf (29.08.2026) ----------
   Nach bewocon.com, das Simon als Massstab genannt hat: Bild oben, darunter
   ein Block mit Titel und knappen Angaben. Der Unterschied zu dort ist, dass
   hier kein Architekturfoto steht, sondern ein ECHTER BEITRAG aus genau dieser
   Kampagne — dieselbe Datei, die auch im Laufband liegt.

   QUERFORMAT AUS EINEM HOCHFORMAT: Die Reels sind 9:16. In voller Hoehe waere
   der Kopf hoeher als die halbe Kachel und die Angaben fielen unter die
   Falzkante. `aspect-ratio` plus `object-fit: cover` schneidet die Mitte
   heraus — dort steht bei einem Reel ohnehin das Motiv. */
.marke__medium {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tinte-karte);
  border-bottom: 1px solid var(--linie-hell);
}
.marke__medium .klip__video,
.marke__medium .klip__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: none;
}
.marke__medium .klip__bild { z-index: 1; }
.marke--laeuft .marke__medium .klip__bild { display: none; }

/* Wo kein Beitrag vorliegt, steht der Grund — im selben Format wie die
   Nachbarn. Eine leere Flaeche an dieser Stelle liest sich als fehlendes Bild;
   ein Satz liest sich als Sachstand. */
.marke__medium--wort {
  display: flex;
  align-items: flex-end;
  padding: clamp(24px, 2.6vw, 36px);
  font-size: var(--t-lead);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  background: var(--tinte);
  color: var(--text-dunkel);
}
/* Am Telefon sprengte der Satz das 4:3-Format und machte die Karte 594 px
   hoch, waehrend die Nachbarn bei 347 und 365 standen (gemessen auf 390 px).
   Kleinere Schrift haelt ihn im Format — die Karte soll neben den anderen
   stehen, nicht ueber sie hinauswachsen. */
@media (max-width: 47.99rem) {
  .marke__medium--wort { font-size: var(--t-body); }
}

.marke__block {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
  padding: clamp(24px, 2.6vw, 36px);
}
/* Jede Karte hat jetzt einen Kopf — entweder einen Beitrag oder den Satz,
   warum keiner vorliegt. Eine Mindesthoehe braucht es damit nicht mehr. */
.marke:hover { transform: translateY(-8px); }
/* `align-self: start` ist hier kein Feinschliff, sondern eine Reparatur: Als
   Kind eines Spaltenflex mit `align-items: stretch` wurde das Logo auf die
   volle Kachelbreite gezogen — gemessen 300 px, wo 82 px natuerlich waeren.
   Mit `object-fit: contain` waere es zusaetzlich gegen jede spaetere
   Dehnung gesichert. */
.marke__logo { height: var(--h, 2.2rem); width: auto; align-self: start; object-fit: contain; }
.marke__satz { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.marke__fakten { margin-top: auto; font-size: 0.9375rem; }
.marke__fakten li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block: 10px;
  border-top: 1px solid rgba(11, 14, 18, 0.16);
}
.marke__fakten b { font-weight: 700; }
.marke__mehr {
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(4px);
  opacity: 0.55;
  transition: transform 0.3s var(--schwung), opacity 0.3s var(--schwung);
}
.marke:hover .marke__mehr, .marke:focus-visible .marke__mehr { transform: none; opacity: 1; }

.marke--saily { background: var(--k-saily); border-color: rgba(11, 14, 18, 0.2); }
.marke--plaud { background: var(--k-plaud); border-color: rgba(11, 14, 18, 0.2); }
.marke--gamba { background: var(--k-gamba); color: var(--text-dunkel); border-color: rgba(255, 255, 255, 0.16); }
.marke--gamba .marke__fakten li { border-top-color: rgba(255, 255, 255, 0.18); }
.marke--gamba .marke__medium { border-bottom-color: rgba(255, 255, 255, 0.16); }

/* Drei Kacheln sind nicht fuenfundzwanzig Marken. Diese Zeile sagt, was die
   drei sind: Beispiele. Ohne sie sieht der Abschnitt kleiner aus, als das
   Geschaeft ist. */
.marken__rest {
  margin-top: var(--s-4);
  font-size: var(--t-lead);
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 46ch;
}

@media (prefers-reduced-motion: reduce) {
  .marke:hover { transform: none; }
  .marke__mehr { transform: none; opacity: 1; }
}

/* ---------- Ergebnisse: Karten, die sich beim Scrollen stapeln ----------
   Jede Karte bleibt oben kleben, die naechste schiebt sich darueber.

   DIE KARTEN SIND SEIT DEM 28.08.2026 HELL, und das ist der ganze Trick.
   Vorher waren sie dunkelgrau auf fast schwarz, und weil sich zwei dunkle
   Flaechen kaum unterscheiden, sah das Stapeln aus wie ein Ruckeln. Ein
   farbiger Strich an der Oberkante sollte das retten — er sah billig aus und
   war der Beweis, dass die Grundfarbe falsch war. Weiss auf Tinte braucht
   keinen Strich: Man sieht sofort, dass eine Flaeche ueber die andere faehrt.

   Deshalb ist auch der Farbstrich ersatzlos weg. Welche Marke gemeint ist,
   sagt die Ueberschrift in der Karte; ein zusaetzliches Farbzeichen daneben
   waere Dekoration ohne Aufgabe. */
.stapel {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  padding-bottom: var(--s-2);
}
/* „Breite nutzen": Am Telefon zieht der Stapel bis dicht an den Fensterrand.
   Der Abschnittsrand von 20 px je Seite kostet dort ein Zehntel der
   Kartenbreite — an einer Karte, die ein Hochkantvideo tragen soll. */
@media (max-width: 47.99rem) {
  .stapel { margin-inline: calc(var(--rand) * -1 + 10px); }
}
.stapel__karte {
  position: sticky;
  top: calc(var(--kopfhoehe) + 16px);
  background: var(--grund);
  color: var(--text-hell);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  /* Die Karte ist eine helle Insel: Was darin steht, liest die hellen
     Textfarben, nicht die des dunklen Abschnitts ringsum. */
  --leise: var(--text-leise);
  --linie: var(--linie-hell);
}
.stapel__karte:nth-child(2) { top: calc(var(--kopfhoehe) + 34px); }
.stapel__karte:nth-child(3) { top: calc(var(--kopfhoehe) + 52px); }

@media (min-width: 56.25rem) {
  .stapel__karte {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) clamp(210px, 20vw, 300px);
    min-height: 22rem;
  }
}
/* Von Plaud liegt kein oeffentlicher Beitrag vor. Die Karte hat deshalb keine
   Bildspalte — und der Text nimmt sich die Breite, statt neben einem leeren
   Feld zu stehen. Lieber eine Karte, die anders aussieht, als eine, die einen
   fremden Clip zeigt. */
.stapel__karte--ohne-clip { grid-template-columns: 1fr; }
.stapel__karte--ohne-clip .stapel__text { max-width: 62ch; }

.stapel__inhalt {
  display: grid;
  gap: var(--s-2) var(--s-6);
  grid-template-columns: 1fr;
  align-content: center;
  padding: clamp(24px, 3.5vw, 52px);
}
@media (min-width: 48rem) {
  .stapel__inhalt { grid-template-columns: 11rem minmax(0, 1fr); align-items: center; gap: var(--s-3) var(--s-6); }
}
.stapel__zahl { font-size: clamp(3.25rem, 1.9rem + 6.4vw, 7rem); }
.stapel__zahl .zahl__einheit { color: var(--orange); }
.stapel__marke { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); margin-bottom: var(--s-2); }
.stapel__text { color: var(--text-leise); max-width: 46ch; }

/* AM TELEFON STAND HIER FRUEHER `display: none`. Die Karte zeigte dort also
   eine Zahl und drei Zeilen Text und sonst nichts — ausgerechnet auf dem
   Geraet, auf dem Hochkantvideo hingehoert. Jetzt liegt der Clip als Band
   OBEN in der Karte (grid-row 1, obwohl er im Markup hinten steht: die
   Reihenfolge im Quelltext folgt dem Sinn, nicht dem Layout), am Rechner wird
   daraus die rechte Bildspalte. */
.stapel__medium { aspect-ratio: 5 / 4; grid-row: 1; }
.stapel__inhalt { grid-row: 2; }
@media (min-width: 56.25rem) {
  .stapel__medium { aspect-ratio: auto; grid-row: auto; grid-column: 2; }
  .stapel__inhalt { grid-row: auto; grid-column: 1; }
}

/* Die Bildspalte fuellt ihre Zelle randlos aus, statt darin zu schweben. */
.klip--fuellend {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
.klip--fuellend:hover { transform: none; }
.klip--fuellend::after { display: none; }

/* Die verdeckte Karte tritt zurueck, waehrend die naechste darueberfaehrt.
   Das ist der Unterschied zwischen „liegt drauf" und „stapelt sich" — und auf
   hellen Karten ist es endlich zu sehen: Eine weisse Flaeche, die auf drei
   Viertel Helligkeit faellt, liest sich als Schatten; eine dunkelgraue, die
   dasselbe tut, als nichts.

   WARUM DAS HIER NICHT `animation-timeline: view()` IST, obwohl der Rest der
   Seite genau damit arbeitet: Eine klebende Karte bewegt sich nicht. Ihr Kasten
   steht waehrend des Klebens still im Fenster, und `view()` misst genau diese
   Lage — die Zeitleiste bleibt also stehen, solange die Animation laufen soll.
   Gemessen: Mitten im Stapel stand `transform` auf der Einheitsmatrix und
   `brightness` auf 1, obwohl die naechste Karte schon halb darueberlag.

   Stattdessen rechnet das Skript aus, wie weit die naechste Karte die aktuelle
   verdeckt, und schreibt das als `--tiefe` (0 bis 1) an die Karte. Ohne Skript
   bleibt `--tiefe` bei 0: volle Groesse, volle Helligkeit, der Stapel
   funktioniert weiter — er wirkt nur flacher. */
.stapel__karte {
  transform: scale(calc(1 - 0.085 * var(--tiefe, 0)));
  filter: brightness(calc(1 - 0.26 * var(--tiefe, 0)));
  transform-origin: 50% 0%;
}

@media (prefers-reduced-motion: reduce) {
  .stapel__karte { transform: none; filter: none; }
}

/* ---------- Karten ----------
   Die Klassen `.karten` und `.karte` gab es schon einmal, fuer den Abschnitt
   „Three things, done properly". Der ist bei der Ueberarbeitung entfallen, das
   Stylesheet mit ihm — und als der Clipping-Abschnitt dieselben Klassen wieder
   benutzte, stand dort nackter Text ohne Kasten. Im Quelltext sah alles
   richtig aus; erst das Bildschirmfoto zeigte es. Merksatz: Wer Markup
   wiederverwendet, prueft, ob sein Stylesheet noch existiert. */
.karten {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .karten { grid-template-columns: repeat(3, 1fr); } }
.karte {
  background: var(--grund-leise);
  border: 1px solid var(--linie-hell);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 40px);
}
.karte h3 { margin-bottom: var(--s-2); }
.karte p { color: var(--text-leise); }

/* ---------- Clipping ----------
   Der Abschnitt hiess in der ersten Fassung „zwei Seiten desselben
   Geschaefts" und warb links Kunden, rechts Clipper. Das war falsch geraten:
   Die Clipper hat Trevera selbst. Der Abschnitt verkauft deshalb nur — und
   dass die Leute im Haus sitzen, ist dabei das Argument und nicht die
   Stellenanzeige. */
.knopf-reihe--mitte { justify-content: center; margin-top: var(--s-4); }

/* ---------- Haeufige Fragen ----------
   `<details>` statt selbstgebauter Reiter: Es klappt ohne JavaScript auf, ist
   von Haus aus mit der Tastatur bedienbar und wird von Suchmaschinen gelesen.
   Ein Nachbau mit `div` und Skript kann nichts davon besser. */
.fragen { display: grid; max-width: 56rem; }
.frage {
  border-top: 1px solid var(--linie-hell);
  padding-block: var(--s-3);
}
.frage:last-child { border-bottom: 1px solid var(--linie-hell); }
.frage summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  cursor: pointer;
  list-style: none;
  font-size: var(--t-h3);
  font-weight: 700;
  font-stretch: 86%;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+";
  flex: 0 0 auto;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--orange);
}
.frage[open] summary::after { content: "\2212"; }
.frage summary:hover { color: var(--orange); }
.frage p {
  margin-top: var(--s-2);
  color: var(--text-leise);
  max-width: 60ch;
}

/* ---------- Ablauf: vier Schritte, einer davon aktiv ----------
   Das Skript setzt `ist-aktiv` auf den Schritt, der gerade in der Mitte des
   Fensters steht. Ohne Skript sind alle vier gleich hell — es fehlt dann die
   Fuehrung, nicht der Inhalt. */
.ablauf { display: grid; gap: 0; }
/* Die Kante links markiert den aktiven Schritt, ohne dass sich das Raster
   verschiebt: Sie liegt im Polster, nicht in der Spalte. */
.schritt {
  position: relative;
  display: grid;
  gap: var(--s-1) var(--s-4);
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: start;
  padding-block: clamp(24px, 3vw, 40px);
  /* --linie statt --linie-hell: Der Abschnitt steht seit dem Clipping-Einbau
     auf Tinte, und eine dunkle Linie auf dunklem Grund ist keine. */
  border-top: 1px solid var(--linie);
  transition: opacity 0.4s var(--schwung);
}
/* Die Spalten muessen ausdruecklich zugewiesen werden. Ohne das rutscht der
   Beschreibungssatz am Telefon in die 3,5 rem schmale Zahlenspalte und bricht
   dort in ein Wort je Zeile — auf dem Bildschirmfoto sofort zu sehen, im
   Quelltext nicht. */
.schritt__nr { grid-column: 1; grid-row: 1 / span 2; }
.schritt h3  { grid-column: 2; }
.schritt p:not(.schritt__nr) { grid-column: 2; }
@media (min-width: 56.25rem) {
  .schritt { grid-template-columns: 6.5rem minmax(0, 22rem) minmax(0, 1fr); align-items: center; }
  .schritt__nr { grid-row: 1; }
  .schritt h3  { grid-column: 2; }
  .schritt p:not(.schritt__nr) { grid-column: 3; }
}
.js .schritt { opacity: 0.5; }
.js .schritt.ist-aktiv { opacity: 1; }
.schritt::before {
  content: "";
  position: absolute;
  left: calc(var(--rand) * -0.5);
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--akzent);
  transform: translateY(-50%);
  transition: height 0.4s var(--schwung);
}
.schritt.ist-aktiv::before { height: 58%; }
.schritt__nr {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  font-weight: 800;
  font-stretch: 82%;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--leise);
  transition: color 0.4s var(--schwung);
}
.schritt.ist-aktiv .schritt__nr { color: var(--akzent); }
.schritt h3 { transition: transform 0.4s var(--schwung); }
.schritt.ist-aktiv h3 { transform: translateX(6px); }
.schritt p { color: var(--leise); }

@media (prefers-reduced-motion: reduce) {
  .js .schritt { opacity: 1; }
  .schritt.ist-aktiv h3 { transform: none; }
}

/* ---------- Die Schwestermarke ----------
   Der einzige Ort auf dieser Seite, an dem Gold vorkommt, und der letzte
   dunkle Streifen vor dem Schluss. Beides ist Absicht: Influvera IST dunkel
   und gold, und der Farbwechsel sagt vor dem ersten Wort, dass hier eine
   andere Marke anfaengt. Auf influvera.com steht derselbe Streifen
   spiegelverkehrt — dort hell, mit dem Blau von hier.

   WER HIER ETWAS AENDERT, aendert es drueben mit
   (influvera-website/assets/home.css, gleicher Abschnitt). */
.schwester__innen {
  display: grid;
  gap: var(--s-4);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 56.25rem) {
  .schwester__innen { grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: var(--s-8); }
}
.schwester h2 { max-width: 22ch; }
.schwester .lead { margin-top: var(--s-3); }
.schwester__seite { display: grid; gap: var(--s-3); justify-items: start; }
.schwester__marke {
  font-weight: 800;
  font-stretch: 84%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  line-height: 1;
  color: #4A9DF0;
  text-decoration: none;
}
.schwester__marke:hover { text-decoration: underline; text-decoration-thickness: 3px; }
/* Am Telefon ist der Schriftzug zwar gross, seine Box aber nur so hoch wie die
   Zeile — gemessen 32 px. Polster plus negativer Aussenabstand geben dem Finger
   Platz, ohne den Streifen auseinanderzuziehen. */
@media (max-width: 47.99rem) {
  .schwester__marke { display: inline-block; padding-block: 8px; margin-block: -8px; }
}

/* ---------- Schlussaufruf ----------
   Mittig statt linksbuendig. Linksbuendig blieb die rechte Haelfte des
   blauen Bandes leer, und Leere in einer Vollfarbe liest sich als Fehler. */
.schluss__innen {
  display: grid;
  gap: var(--s-4);
  justify-items: center;
  text-align: center;
}
.schluss h2 { max-width: 20ch; }
.schluss .lead { color: rgba(255, 255, 255, 0.9); max-width: 52ch; }

/* ---------- Am Telefon: mittig, was mittig gehoert ----------
   Auf einem 390 px breiten Schirm ist linksbuendig kein Satzspiegel, sondern
   eine Kante. Die Regel, nach der hier entschieden wurde:

   MITTIG steht, was ANSAGE ist — Hero, Abschnittskoepfe, die drei Zahlen, die
   Markenkacheln, der Schlussaufruf. Das sind kurze Zeilen, die auf einen Blick
   gelesen werden.

   LINKSBUENDIG bleibt, was TEXT ist — die Absaetze in den Ergebniskarten, die
   Schrittliste, die Fusszeile. Ein zentrierter Absatz aus fuenf Zeilen hat auf
   beiden Seiten eine ausgefranste Kante, und das Auge verliert beim
   Zeilenwechsel den Anfang. Mittig ist eine Auszeichnung, kein Standardwert. */
@media (max-width: 47.99rem) {
  .hero__raster { justify-items: center; text-align: center; }
  .hero .lead { margin-inline: auto; }
  .hero .knopf-reihe { justify-content: center; }
  .hero__clip { justify-self: center; }

  .schwester__innen { text-align: center; justify-items: center; }
  .schwester .lead { margin-inline: auto; text-align: left; }
  .schwester__seite { justify-items: center; }

  .kopfzeile { text-align: center; margin-inline: auto; }
  .kopfzeile .lead { margin-inline: auto; }

  .kennzahl { text-align: center; }

  .marke { align-items: center; text-align: center; }
  /* DERSELBE FEHLER WIE DAMALS BEIM LOGO, nur andersherum: `align-items:
     center` auf dem Spaltenflex schrumpft jedes Kind auf seine Inhaltsbreite.
     Der Medienkopf hat keine — er stand am Telefon auf null Breite und war
     schlicht nicht da (gemessen am 29.08.2026: Saily-Karte 347 px statt 610).
     `align-self` schlaegt `align-items`, deshalb steht es hier ausdruecklich. */
  .marke__medium, .marke__block { align-self: stretch; }
  /* `align-self` am Kind schlaegt `align-items` am Elternteil — das Logo
     braucht die Anweisung deshalb noch einmal ausdruecklich. */
  .marke__logo { align-self: center; }
  .marke__satz { max-width: 22ch; }
  /* Die Angabenliste bleibt zweispaltig: Bezeichnung links, Wert rechts.
     Zentriert waere sie keine Liste mehr, sondern ein Haufen. */
  .marke__fakten { align-self: stretch; text-align: start; }
  .marken__rest { text-align: center; margin-inline: auto; }
}