/* bauplan-intro.css — Bauplan-Animation, Intro-Overlay
   Gehört zu PROMPT-02-BAUPLAN-ANIMATION.md. Keine Bibliothek, kein Framework.

   Fassung 18.08.2026 (Chat 06). Zwei Änderungen:
   1. Tempo auf 75 % — eine einzige Stellschraube `--bp-tempo` (1.3333). Sie zieht
      Uhren und Übergänge gemeinsam. Zurück auf die Urgeschwindigkeit: Wert auf 1.
   2. Harter Schnitt am Übergang — ab dem Beginn des Abblendens ist vom Gerüst nichts
      mehr da, und die Objektkanten wandern nicht mehr über die schon sichtbare Seite. */

/* Die Farbschicht. Registriert, damit der Lichtwechsel als Übergang laufen kann. */
@property --bp-umgebung { syntax: '<color>'; inherits: true; initial-value: #1C1F24; }
@property --bp-blatt    { syntax: '<color>'; inherits: true; initial-value: #23272E; }
@property --bp-linie    { syntax: '<color>'; inherits: true; initial-value: #F7F5F2; }
@property --bp-hilfe    { syntax: '<color>'; inherits: true; initial-value: #5E6470; }
@property --bp-schrift  { syntax: '<color>'; inherits: true; initial-value: #E2DED8; }

#bp-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;   /* über allem, was die Seite selbst aufbaut */
  /* Ungedeckt, bis die Zeichnung wirklich im Behälter steht. Versagt das Skript,
     verdeckt das Overlay nichts und die echte Seite steht sofort da. */
  background: transparent;
  pointer-events: none;
  visibility: hidden;
  --bp-umgebung: #1C1F24;
  --bp-blatt: #23272E;
  --bp-linie: #F7F5F2;
  --bp-hilfe: #5E6470;
  --bp-schrift: #E2DED8;
  --bp-signal: #FF6B00;
  /* 🔴 SEIT DEM 24.08.2026 OHNE WIRKUNG. Der Knopf in der Zeichnung
     trug einen Umriss in diesem Ton, und weil er als Strich GEZEICHNET
     wird, war er lange vor seiner Fuellung da: mitten im weissen
     Bauplan stand ein einzelner oranger Bogen. Marc: „Das sieht
     irgendwie komisch aus. Den bitte mal rausnehmen. Der Rest kann
     bleiben." Der Knopf blendet jetzt als Flaeche ein, ohne Strich.
     Der Token bleibt, weil dieselbe Palette in den eingefrorenen
     Prototypen und Vorschauen steht — wer den Umriss zurueckholt,
     setzt in bauplan-hero-anim.svg stroke wieder auf ihn. */
  --bp-signal-kante: #D95400;
  --bp-signal-schrift: #1C1F24;
  /* Tempo 18.08.2026: eine Stellschraube fuer alles. 1 = Urfassung, 1.3333 = 75 % Tempo.
     Das Skript setzt denselben Wert erneut, damit CSS und Uhren nie auseinanderlaufen. */
  --bp-tempo: 1.3333;
  transition: --bp-umgebung calc(360ms * var(--bp-tempo)) linear,
              --bp-blatt calc(360ms * var(--bp-tempo)) linear,
              --bp-linie calc(360ms * var(--bp-tempo)) linear,
              --bp-hilfe calc(360ms * var(--bp-tempo)) linear,
              --bp-schrift calc(360ms * var(--bp-tempo)) linear,
              opacity calc(420ms * var(--bp-tempo)) linear;
}

#bp-overlay[data-bereit] {
  background: var(--bp-umgebung);
  pointer-events: auto;
  visibility: visible;
  /* Eigener Stapelkontext: kein Element der Seite kann sich davorschieben. */
  isolation: isolate;
}

#bp-overlay svg { display: block; width: 100%; height: 100%; }

/* Phase 4 — Lichtwechsel. Ein Übergang, alle Variablen gleichzeitig. */
#bp-overlay[data-licht="hell"] {
  --bp-umgebung: #E9E6E1;
  --bp-blatt: #F7F5F2;
  --bp-linie: #23272E;
  --bp-hilfe: #C9C4BC;
  --bp-schrift: #5E6470;
}

/* Ausgangszustand: nichts gezeichnet. Gilt nur, solange das Overlay läuft. */
#bp-overlay[data-lauf] [data-anim="draw"] {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-zeichnen var(--bp-dauer, 300ms) cubic-bezier(.25, .1, .25, 1) var(--bp-verzoegerung, 0ms) forwards;
}
#bp-overlay[data-lauf] [data-anim="fade"] {
  opacity: 0;
  animation: bp-einblenden var(--bp-dauer, 140ms) linear var(--bp-verzoegerung, 0ms) forwards;
}
/* Ein Strich mit Füllung: die Fläche zieht mit derselben Verzögerung auf, sonst
   steht sie ab dem ersten Bild da. Betrifft den orangenen Knopf. */
#bp-overlay[data-lauf] .bp-flaeche {
  fill-opacity: 0;
  animation: bp-zeichnen var(--bp-dauer, 300ms) cubic-bezier(.25, .1, .25, 1) var(--bp-verzoegerung, 0ms) forwards,
             bp-flaeche 200ms linear calc(var(--bp-verzoegerung, 0ms) + var(--bp-dauer, 300ms) * .55) forwards;
}
@keyframes bp-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes bp-flaeche { to { fill-opacity: 1; } }
@keyframes bp-einblenden { to { opacity: 1; } }

/* Das Raster darf die Konstruktion nie überstimmen. */
#bp-overlay #bp-raster [data-order="05"],
#bp-overlay #bp-raster [data-order="06"] { opacity: .22; }
#bp-overlay #bp-raster [data-order="07"],
#bp-overlay #bp-raster [data-order="08"] { opacity: .38; }
#bp-overlay[data-lauf] #bp-raster [data-anim="draw"] { animation-name: bp-zeichnen; }

/* Phase 6 — Abnahme. Das Gerüst fällt, das Bauwerk bleibt. */
#bp-overlay #bp-raster,
#bp-overlay #bp-achsen,
#bp-overlay #bp-bemassung,
#bp-overlay #bp-beschriftung,
#bp-overlay #bp-schriftfeld,
#bp-overlay .bp-geruest { transition: opacity calc(240ms * var(--bp-tempo)) linear; }
#bp-overlay[data-abnahme] #bp-raster,
#bp-overlay[data-abnahme] #bp-achsen,
#bp-overlay[data-abnahme] #bp-bemassung,
#bp-overlay[data-abnahme] #bp-beschriftung,
#bp-overlay[data-abnahme] #bp-schriftfeld,
#bp-overlay[data-abnahme] .bp-geruest { opacity: 0 !important; }

/* Weg C — die Objektkanten fahren Richtung echte Hero-Position. */
#bp-overlay .bp-objekt {
  transform-box: view-box;
  transform-origin: 0 0;
  /* Geaendert 18.08.2026: 500ms lief in die Ueberblendung hinein — die Objektkanten
     wanderten sichtbar ueber die schon durchscheinende Seite. Jetzt endet die Fahrt
     genau dann, wenn das Abblenden beginnt. */
  transition: transform calc(240ms * var(--bp-tempo)) cubic-bezier(.4, 0, .2, 1);
}

/* Phase 7 — Übergang zur Seite.
   Geändert 17.08.2026: Vorher lag zwischen dem fertigen Lichtwechsel und dem Beginn
   der Überblendung eine knappe halbe Sekunde stehende Kalkweißfläche — der Weißblitz.
   Ein zwischenzeitlich erprobter radialer Aufzug ist wieder verworfen: Der Rand der
   Maske war als dunkler Kreis sichtbar, und durch die Öffnung sah man die Seite
   schon durch die Zeichnung. Jetzt blendet die Fläche gleichmäßig ab und beginnt
   damit, solange das Bild noch aufhellt. Keine Kante, keine stehende Fläche. */
/* Uebergabe — dritte Fassung, 18.08.2026.

   Die zweite Fassung liess die Zeichnung ausblenden, waehrend die Flaeche noch dicht
   war. Das reichte nicht: Solange ueberhaupt noch eine Linie im Dokument steht,
   kann sie im ersten Bild der Ueberblendung erwischt werden. Deshalb jetzt zwei
   voneinander unabhaengige Absicherungen, von denen jede allein genuegen wuerde.

   1. SENKEN — die ganze Farbschicht faellt auf den Seitengrund. Blatt, Linie,
      Hilfslinie, Beschriftung: alles nimmt exakt die Farbe des Hintergrunds an.
      Die Zeichnung verschwindet nicht durch Ausblenden, sondern weil sie und der
      Grund dieselbe Farbe haben. Gleichzeitig geht die Deckkraft des SVG auf null.
      Die Flaeche ist waehrenddessen vollstaendig undurchsichtig.
   2. ABBLENDEN — im selben Augenblick, in dem die Flaeche durchsichtig zu werden
      beginnt, ist das SVG aus dem Dokument entfernt (siehe `entkernen()` im Skript)
      und zusaetzlich per `display: none` stillgelegt. Es gibt dann keine Linie mehr,
      die sichtbar werden koennte — nicht ausgeblendet, sondern nicht mehr vorhanden. */

/* Der Grund, auf den uebergeben wird. Eine Zahl, falls der Hero je die Farbe wechselt. */
#bp-overlay { --bp-seitengrund: #23272E; }

/* Hilfsebenen sofort still. Was hier steht, war ohnehin schon abgeraeumt. */
#bp-overlay[data-aufloesen] #bp-raster,
#bp-overlay[data-aufloesen] #bp-achsen,
#bp-overlay[data-aufloesen] #bp-bemassung,
#bp-overlay[data-aufloesen] #bp-beschriftung,
#bp-overlay[data-aufloesen] #bp-schriftfeld,
#bp-overlay[data-aufloesen] .bp-geruest {
  opacity: 0 !important;
  transition: none !important;
  animation: none !important;
}
/* Die Objektkanten stehen ab hier still, statt ueber die Seite zu fahren. */
#bp-overlay[data-aufloesen] .bp-objekt { transition: none !important; }

/* 1 — die Farbschicht sinkt auf den Seitengrund, das SVG gleichzeitig auf null. */
#bp-overlay[data-uebergabe] {
  --bp-umgebung: var(--bp-seitengrund);
  --bp-blatt: var(--bp-seitengrund);
  --bp-linie: var(--bp-seitengrund);
  --bp-hilfe: var(--bp-seitengrund);
  --bp-schrift: var(--bp-seitengrund);
  --bp-signal: var(--bp-seitengrund);
  --bp-signal-kante: var(--bp-seitengrund);
  --bp-signal-schrift: var(--bp-seitengrund);
  transition: --bp-umgebung calc(260ms * var(--bp-tempo)) linear,
              --bp-blatt calc(260ms * var(--bp-tempo)) linear,
              --bp-linie calc(260ms * var(--bp-tempo)) linear,
              --bp-hilfe calc(260ms * var(--bp-tempo)) linear,
              --bp-schrift calc(260ms * var(--bp-tempo)) linear;
}
/* Kein Ausblenden mehr. Ab hier ist das SVG weg — aus dem Dokument entfernt und
   zusaetzlich stillgelegt. Eine Linie mit gleicher Farbe, aber geringerer Deckkraft
   (Raster .22/.38, gefuellter Knopf) bleibt sonst sichtbar, auch auf Anthrazit. */
#bp-overlay[data-uebergabe] svg { display: none !important; opacity: 0 !important; }

/* 2 — erst jetzt durchsichtig. Das SVG ist zu diesem Zeitpunkt aus dem Dokument raus. */
#bp-overlay[data-blende] {
  opacity: 0;
  pointer-events: none;
  transition: opacity calc(200ms * var(--bp-tempo)) linear;
}
#bp-overlay[data-blende] svg { display: none !important; }

/* Pflicht: kein Intro, wenn der Nutzer keine Bewegung will. */
@media (prefers-reduced-motion: reduce) {
  #bp-overlay { display: none !important; }
}

/* ---- Hochformat: das Blatt fuellt den Schirm ---------------------------
   Marc, 24.08.2026, zum Bildschirmfoto vom iPhone: „Dort siehst du, dass du
   da diese Kacheln hast, und dann kommt dieses Muster als Hintergrund.
   Dieses Muster dann bitte komplett in diesem Layout ergaenzen oder
   komplett rausnehmen. Das sieht nicht gut aus."

   WAS WIRKLICH LOS WAR — gemessen, nicht vermutet: Das Skript schaltet im
   Hochformat auf `xMidYMid meet` (bauplan-intro.js, Zeile 224). Die ganze
   Zeichnung ist dann zu sehen, aber ihr Seitenverhaeltnis ist 1440:900 und
   das Telefon ist hochkant — also bleibt oben und unten ein Streifen frei.
   Das Blatt samt Raster gehoert zur ZEICHNUNG und hoert deshalb an deren
   Kante auf. Das Muster stand als Band in der Mitte, darueber und darunter
   nichts. Genau das ist auf dem Foto zu sehen.

   DIE LOESUNG IST GEOMETRIE, KEIN GESCHMACK: Im Hochformat skaliert `meet`
   IMMER ueber die Breite — 390/1440 ist kleiner als 750/900. Der Massstab
   ist also exakt `100vw / 1440`, und ein Rasterschritt von 10 Einheiten
   misst auf dem Schirm genau `100vw / 144`. Damit laesst sich dasselbe
   Raster randlos in CSS zeichnen, in derselben Teilung wie im SVG.

   🔴 UND DANN GENAU EINMAL, NICHT ZWEIMAL. Das Raster im SVG wird hier
   abgeschaltet, sonst laegen zwei Netze mit verschobener Phase
   uebereinander — der haesslichste denkbare Ausgang. Aus demselben Grund
   fallen die beiden Hintergrundflaechen der Zeichnung weg: Ihre Kante ist
   genau die Kante, die stoerte.

   🔴 DIE SCHWELLE IST DIESELBE WIE IM SKRIPT. Dort `innerWidth/innerHeight
   < 1.1`, hier `max-aspect-ratio: 11/10`. Zwei Zahlen, die dasselbe meinen
   muessen — wer eine aendert, aendert beide, sonst zeichnet die eine Seite
   ein Raster, das die andere gar nicht braucht.

   Das Raster liegt auf einem Pseudo-Element und nicht auf dem Hintergrund
   des Overlays: Bei der Abnahme faellt das Geruest mit einem Uebergang,
   und ein `background-image` laesst sich nicht ueberblenden, eine Deckung
   schon.                                                                 */
@media (max-aspect-ratio: 11/10) {

  #bp-overlay[data-bereit] { background: var(--bp-blatt); }

  #bp-overlay[data-bereit]::before {
    content: "";
    position: absolute; inset: 0; z-index: 0;
    background-image:
      repeating-linear-gradient(to right,
        color-mix(in srgb, var(--bp-hilfe) 22%, transparent) 0 1px,
        transparent 1px calc(100vw / 144)),
      repeating-linear-gradient(to bottom,
        color-mix(in srgb, var(--bp-hilfe) 22%, transparent) 0 1px,
        transparent 1px calc(100vw / 144));
    opacity: 1;
    transition: opacity calc(240ms * var(--bp-tempo)) linear;
    pointer-events: none;
  }

  /* Die Zeichnung bleibt ueber dem Raster. */
  #bp-overlay svg { position: relative; z-index: 1; }

  /* Das Raster der Zeichnung und ihre beiden Hintergrundflaechen entfallen. */
  #bp-overlay #bp-raster,
  #bp-overlay #bp-blatt [data-order="01"],
  #bp-overlay #bp-blatt [data-order="02"] { display: none; }

  /* Abnahme: erst faellt das Raster, dann steht das blanke Blatt. */
  #bp-overlay[data-abnahme]::before { opacity: 0; }
  #bp-overlay[data-abnahme][data-bereit] { background: var(--bp-umgebung); }
}