/* ============================================================================
   Eröffnung „Der Schnitt" — jede Seite außer 404 (partials/head.php), einmal je
   Sitzung, nur mit html.mm-eroeffnung (setzt
   eroeffnung.js vor dem ersten Paint). Ohne JS, mit „weniger Bewegung" oder beim
   zweiten Besuch in der Sitzung bleibt die Fläche display:none.

   Der ganze Ablauf hängt an html.mm-eroeffnung und läuft, sobald die Fläche
   gemalt ist: das </> zeichnet sich (0–550 ms), ab 650 ms teilt sich das Feld
   (600 ms). eroeffnung.js hört auf das animationend des Keils und nimmt die
   Klasse dann weg — keine Phasenklassen, kein Warten auf DOMContentLoaded.

   Geometrie wie der Hero-Keil: ein gedrehtes Rechteck hält den Kantenwinkel
   exakt, sein Ursprung liegt in der Bildschirmmitte — die Kante läuft durch die
   Mitte und steigt nach rechts. Beim Teilen fahren beide Felder senkrecht zur
   Kante auseinander (Verhältnis 0,657 = tan 33,3°), der Spalt öffnet sich entlang
   der Diagonale.
   ========================================================================== */
.eroeffnung { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html.mm-eroeffnung .eroeffnung {
    display: block; position: fixed; inset: 0;
    /* über Kopf (--z-header 50) UND Consent-Banner (--z-modal 100): sonst ragt
       der Banner 1,3 s lang in das Markenfeld. Er bleibt darunter klickbar,
       weil die Fläche keine Eingaben fängt. */
    z-index: calc(var(--z-modal) + 1);
    pointer-events: none; overflow: hidden;
    contain: strict;
  }
  .eroeffnung__feld { position: absolute; inset: 0; background: var(--accent-2); }
  .eroeffnung__keil {
    position: absolute; left: -100vmax; top: 50%;
    width: 300vmax; height: 300vmax;
    background: var(--accent);
    transform-origin: calc(100vmax + 50vw) 0;
    transform: rotate(calc(var(--kante-winkel) * -1));
  }
  .eroeffnung__code {
    position: absolute; left: 50%; top: 50%;
    width: clamp(7rem, 18vw, 14rem); height: auto;
    transform: translate(-50%, -50%);
    color: var(--papier);
  }
  .eroeffnung__code path {
    fill: none; stroke: currentColor; stroke-width: 6;
    stroke-linecap: square; stroke-linejoin: miter;
    stroke-dasharray: 1; stroke-dashoffset: 1;
  }
  html.mm-eroeffnung .eroeffnung__code path { animation: eroeffnung-zeichnen 0.45s var(--ease-out) both; }
  html.mm-eroeffnung .eroeffnung__code path:nth-child(2) { animation-delay: 0.05s; }
  html.mm-eroeffnung .eroeffnung__code path:nth-child(3) { animation-delay: 0.1s; }
  html.mm-eroeffnung .eroeffnung__code { animation: eroeffnung-weg 0.25s var(--ease) 0.65s both; }
  html.mm-eroeffnung .eroeffnung__feld { animation: eroeffnung-feld 0.6s var(--ease-premium) 0.65s both; }
  html.mm-eroeffnung .eroeffnung__keil { animation: eroeffnung-keil 0.6s var(--ease-premium) 0.65s both; }
  /* Die Einblendungen der Unterseiten (.reveal, main.js) warten wie der Hero der
     Startseite: unter der Fläche bleiben sie unsichtbar, sonst wären sie fertig,
     bevor sich das Feld teilt. !important schlägt auch die Masken-Varianten aus
     effects.css; fällt die Klasse, blendet ihre eigene Transition auf. */
  html.mm-eroeffnung main .reveal { opacity: 0 !important; }
}
@keyframes eroeffnung-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes eroeffnung-weg { to { opacity: 0; } }
/* Senkrecht zur Kante auseinander: das Marinefeld nach oben links (Paar im
   Verhältnis 0,657 = tan 33,3°), der Keil nach unten rechts. Beim Keil steht die
   Rotation in der Keyframe noch einmal davor (transform überschreibt die Ruhe-
   lage); ein translate NACH rotate verschiebt im gedrehten System — dort ist
   „senkrecht zur Kante" schlicht die y-Achse. */
@keyframes eroeffnung-feld { to { transform: translate(-72vmax, -110vmax); } }
@keyframes eroeffnung-keil { to { transform: rotate(calc(var(--kante-winkel) * -1)) translate(0, 130vmax); } }