/* Matrix Marketing – Intro «Einschlag ohne Vorhang», neue Fassung (12.10.2026, Vergleichsseite /intro-neu; assets/js/intro-neu.js).
   Kein schwarzer Vorhang mehr: Die Seite steht sofort fertig da. Bis der Blitz einschlägt, sind nur das Logo im Kopf und die
   Goldader oben rechts dunkel; in der vollen Fassung warten dazu die vier Titelseiten und der Text. Das Layout ist von Anfang an
   fertig – es ändern sich nur transform, opacity und clip-path, nichts springt.
   Das Kopf-Skript setzt data-intro="b" (volle Fassung: erster Besuch im Browser, /?intro) oder "k" (kurzer Einschlag: jeder
   weitere Aufruf, Neuladen, /?intro=kurz). Das Skript übernimmt mit Klassen auf <html>: intro-neu (läuft oder lief),
   intro-neu-voll, intro-neu-logo (Logo noch dunkel), intro-neu-flug (Titelseiten noch unterwegs), intro-neu-text (Text wartet),
   intro-neu-ende (Abbruch durch Klick, Taste, Scrollen: sofort der Endzustand).
   Sicherheitsnetz ohne Skript: Nach 4 s ist alles von selbst sichtbar. */

/* ---- Vor dem Einschlag (beide Fassungen): Logo im Kopf dunkel, Goldader noch nicht da ---- */
html[data-intro="b"] .kopf__logo img, html[data-intro="k"] .kopf__logo img, html.intro-neu-logo .kopf__logo img {
  visibility: hidden; animation: intro-neu-sicher-logo 0s linear 4s forwards;
}
html[data-intro="b"] .hero__marmor img, html[data-intro="k"] .hero__marmor img {
  clip-path: inset(0 0 100% 0); animation: intro-neu-sicher-ader 0s linear 4s forwards;
}
@keyframes intro-neu-sicher-logo { to { visibility: visible; } }
@keyframes intro-neu-sicher-ader { to { clip-path: inset(0 0 0 0); } }
/* Die Goldader schlägt genau dann ein, wenn der Blitz sie berührt: das Skript nimmt data-intro weg, main.css startet
   «adern-einschlag» – dort mit .42 s Verzögerung, hier ohne */
html.js.intro-neu:not([data-intro]) .hero__marmor img { animation-delay: 0s; }

/* ---- Volle Fassung: Titelseiten und Text warten auf ihren Auftritt ----
   (.hero in jedem Selektor: main.css setzt animation-delay je Kind mit :nth-child, Spezifität 0,3,0 – hier 0,3,1 und mehr) */
html[data-intro="b"] .hero .hero__text > *, html[data-intro-dann="f"] .hero .hero__text > *, html.intro-neu-text .hero .hero__text > *,
html[data-intro="b"] .hero .titelseiten .legende, html[data-intro-dann="f"] .hero .titelseiten .legende, html.intro-neu-text .hero .titelseiten .legende,
html[data-intro="b"] .hero .titelseiten__haupt, html[data-intro="b"] .hero .titelseiten__klein,
html[data-intro-dann="f"] .hero .titelseiten__haupt, html[data-intro-dann="f"] .hero .titelseiten__klein,
html.intro-neu-flug .hero .titelseiten__haupt, html.intro-neu-flug .hero .titelseiten__klein {
  opacity: 0; animation: intro-neu-sicher 0s linear 4s forwards;
}
@keyframes intro-neu-sicher { to { opacity: 1; } }
/* Die Gruppe als Ganzes bleibt stehen (main.css liesse sie sonst nochmals auftreten, sobald data-intro fällt);
   die vier Titelseiten fliegen einzeln aus der Tiefe an ihren Platz (Web Animations im Skript) */
html[data-intro="b"] .hero .titelseiten__satz, html[data-intro-dann="f"] .hero .titelseiten__satz, html.intro-neu-voll .hero .titelseiten__satz { animation: none; }
/* Der Titel wischt frei: von links nach rechts; Lead, Knöpfe und Bewertung folgen mit «auftritt» aus main.css (nur später) */
html.intro-neu-voll:not(.intro-neu-text):not([data-intro]) .hero__text > .hero__h1 { animation: intro-neu-wischen 1s var(--ease) .05s both; }
/* Modus «f» (nach dem Logo-Intro): das Sicherheitsnetz zählt grosszügig, das Logo-Intro braucht selbst rund 3 s */
html[data-intro-dann="f"] .hero .hero__text > *, html[data-intro-dann="f"] .hero .titelseiten .legende, html[data-intro-dann="f"] .hero .titelseiten__haupt, html[data-intro-dann="f"] .hero .titelseiten__klein { animation-delay: 9s; }
/* 14.10.2026 (Gutachten Runde 5): Lead, Knöpfe, Bewertung und Legende kommen zusammen mit dem Titel (vorher erst nach
   rund 1,6 s, voll sichtbar ~5 s nach dem Laden) */
@media (prefers-reduced-motion: no-preference) {
  html.intro-neu-voll:not(.intro-neu-text):not([data-intro]) .hero .hero__text > :not(.hero__h1),
  html.intro-neu-voll:not(.intro-neu-text):not([data-intro]) .hero .titelseiten .legende { animation: auftritt .75s var(--ease) .08s both; }
  html.intro-neu-voll:not(.intro-neu-text):not([data-intro]) .hero .hero__text > .hero__aktion { animation-delay: .14s; }
  html.intro-neu-voll:not(.intro-neu-text):not([data-intro]) .hero .hero__text > .hero__vertrauen,
  html.intro-neu-voll:not(.intro-neu-text):not([data-intro]) .hero .titelseiten .legende { animation-delay: .2s; }
}
@keyframes intro-neu-wischen {
  from { opacity: 0; clip-path: inset(-.15em 100% -.15em 0); transform: translate3d(-12px, 0, 0); }
  35%  { opacity: 1; }
  to   { opacity: 1; clip-path: inset(-.15em -2% -.15em 0); transform: none; }
}

/* ---- Blitz und glühendes Logo: liegen über der Seite, fangen keine Eingaben ab ---- */
.intro-blitz { position: fixed; inset: 0; z-index: 200; overflow: hidden; pointer-events: none; }
.intro-blitz__leinwand { position: absolute; left: 0; top: 0; }
.intro-blitz__logo { position: absolute; }
.intro-blitz__logo svg { display: block; overflow: visible; transition: filter 1s ease-out; }
.intro-blitz__logo.gluehend svg { filter: none; }
.intro-blitz__logo path.an { fill: #C2B59B; animation: intro-neu-gluehen .28s ease-out both; }
@keyframes intro-neu-gluehen { from { opacity: 0; } to { opacity: 1; } }

/* ---- Abbruch (Klick, Taste, Scrollen): sofort der Endzustand, nichts bewegt sich mehr ---- */
html.intro-neu-ende .hero .hero__text > *, html.intro-neu-ende .hero .titelseiten__satz, html.intro-neu-ende .hero .titelseiten .legende,
html.intro-neu-ende .hero .titelseiten__haupt, html.intro-neu-ende .hero .titelseiten__klein,
html.intro-neu-ende .hero__marmor img, html.intro-neu-ende .kopf__logo img {
  animation: none !important; opacity: 1; visibility: visible; clip-path: none;
}

@media (prefers-reduced-motion: reduce) {    /* «weniger Bewegung»: kein Blitz, nur Einblenden (das Skript räumt sofort ab) */
  .intro-blitz { display: none; }
}
@media print { .intro-blitz { display: none !important; } }

/* ---- 13.10.2026: Titelseiten werden aus einem Stapel ausgeteilt (assets/js/hero-titel.js) ---- */
html.hero-austeilen .hero .titelseiten__satz, html.hero-ausgeteilt .hero .titelseiten__satz, html.hero-neigung .hero .titelseiten__satz, html.hero-wartet .hero .titelseiten__satz { animation: none !important; }
html.hero-austeilen .hero .titelseiten__haupt img, html.hero-austeilen .hero .titelseiten__klein img,
html.hero-wartet .hero .titelseiten__haupt img, html.hero-wartet .hero .titelseiten__klein img { box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .85); }
.hero .titelseiten__haupt img, .hero .titelseiten__klein img { transition: box-shadow .8s var(--ease); }
.titel-glanz { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.titel-glanz::before {
  content: ""; position: absolute; top: -12%; bottom: -12%; left: -50%; width: 40%;
  background: linear-gradient(100deg, rgba(255, 246, 224, 0) 0%, rgba(255, 246, 224, .06) 30%, rgba(255, 246, 224, .34) 50%, rgba(255, 246, 224, .06) 70%, rgba(255, 246, 224, 0) 100%);
  transform: translateX(0) skewX(-14deg); mix-blend-mode: screen; animation: titel-glanz 1.3s cubic-bezier(.45, 0, .2, 1) forwards;
}
/* nur transform (vorher left: −50 % → 125 %, je Bild eine Layout-Verschiebung): 175 % der Titelseite = 437,5 % der Streifenbreite */
@keyframes titel-glanz { to { transform: translateX(437.5%) skewX(-14deg); } }
@media (prefers-reduced-motion: reduce) { .titel-glanz { display: none; } }
/* html.hero-wartet (Handy, Titelseiten noch unter dem Rand): der Stapel liegt sichtbar da (hero-titel.js hält die Animation auf
   dem ersten Bild an), ausgeteilt wird, sobald er ins Bild kommt */

/* R8-hero-handy */
/* 14.10.2026 (Gutachten Runde 7): Handy (unter 768 px) – nach dem Intro stehen Überschrift, Lead, Knöpfe und Bewertung
   sofort da: alle zusammen 0,25 s einblenden statt Wisch (1 s) und gestaffeltem Auftritt */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html.intro-neu-voll.intro-neu-voll:not(.intro-neu-text):not([data-intro]) .hero .hero__text > *,
  html.intro-neu-voll.intro-neu-voll:not(.intro-neu-text):not([data-intro]) .hero .titelseiten .legende { animation: intro-neu-kurz .25s ease-out 0s both; }
}
@keyframes intro-neu-kurz { from { opacity: 0; } to { opacity: 1; } }