/* ══════════════════════════════════════════════════════════════════════
   TIEFE: die zwei Zwischenbilder bewegen sich beim Scrollen
   ══════════════════════════════════════════════════════════════════════

   Befund vom 25.08.

   Die beiden Sektionen tragen im Export alles, was das Theme fuer einen
   Parallax braucht:

       data-jarallax   data-speed="-0.5"

   Das ist die Bewegung, die frueher da war: das Bild wandert beim
   Scrollen langsamer als die Seite, dadurch wirkt es tiefer als der
   Text davor.

   Sie lief nicht mehr, und zwar aus dem gleichen Grund wie beim
   Lazy-Loader: die noetige Datei liegt zwar im Export
   (fp/v_ec68/...jarallax.min.js), ist im HTML aber nirgends
   eingebunden - `grep -o '<script[^>]*jarallax[^>]*>' index.html`
   findet nichts. Kein WordPress, das sie nachlaedt.

   Zurueck blieben die Inline-Werte vom Zeitpunkt der Ausleitung:

       <img class="jarallax-img" style="width: 412px; height: 1234.5px;
            transform: translate3d(0px, 186.962px, 0px); ...">

       Gemessen im Browser: .jarallax-container hat eine HOEHE VON 0
       und clip-path rect(0,0,0,0), das img darin 0x0. Das Bild war
       also unsichtbar eingefroren, nicht nur falsch skaliert.

   Warum hier nicht einfach jarallax.min.js nachgeladen wird: das Skript
   erwartet jQuery (im Export nicht vorhanden, `typeof window.jQuery`
   meldet undefined) und schreibt weitere Inline-Styles auf Elemente,
   die wir an anderer Stelle bereits festnageln. Eine eigene, kurze
   Fassung ist hier ehrlicher und nachvollziehbar.

   Zum Bildmaterial: die dunklen Flaechen links und rechts in
   kamui-rotunde.jpg sind KEIN Fehler und kein aufgesetzter Balken,
   sondern Teil des Motivs - die Steinwaende, die den Blick rahmen.
   Sie bleiben unangetastet.
*/

/* Die Sektion wird zur Buehne: der Bildstreifen ist absichtlich hoeher
   als sie und darf nicht ueberstehen. */
.art-hero-section-c[data-query-loop-index="0"],
.art-hero-section-c[data-query-loop-index="3"] {
  overflow: hidden !important;
  /* Eigener Stapel, damit die Reihenfolge unten wirklich gilt und nicht
     von einem Vorfahren durcheinandergebracht wird. */
  isolation: isolate !important;
}

/* Der bewegte Bildstreifen.

   WICHTIG - Spezifitaet, am 25.08. gemessen:
   zwischenbilder.css setzt fuer den Tuscheschleier

       .art-hero-section-c[data-query-loop-index="0"] > *
         { position: relative !important; z-index: 1 !important; }

   Dieses "> *" trifft auch diesen Streifen. Klasse+Attribut schlaegt
   die einzelne Klasse .kamui-tiefe, und bei zwei !important gewinnt
   die hoehere Spezifitaet: der Streifen stand auf position:relative,
   damit griffen left/right/height nicht und er war 0x0 Pixel gross
   (gemessen: width=0px height=0px, Verschiebung blieb 0).

   Deshalb hier bewusst DERSELBE Selektorbau mit Sektion + Attribut,
   nicht noch ein !important obendrauf.

   Oben und unten je --kamui-tiefe-weg ueber die Sektion hinaus, damit
   beim Verschieben nie eine leere Kante sichtbar wird. */
.art-hero-section-c[data-query-loop-index="0"] > .kamui-tiefe,
.art-hero-section-c[data-query-loop-index="3"] > .kamui-tiefe {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  top: calc(var(--kamui-tiefe-weg) * -1) !important;
  height: calc(100% + var(--kamui-tiefe-weg) * 2) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  pointer-events: none !important;
  /* Hinter den Inhalt, der in zwischenbilder.css auf z-index 1 liegt. */
  z-index: 0 !important;
  will-change: transform;
}

/* Sobald der Streifen liegt, traegt die Sektion ihr Bild nicht mehr
   selbst - sonst laege ein zweites, unbewegtes darunter.
   Ohne JavaScript greift diese Regel nie und das Bild bleibt, wo es
   ist: ein Motiv darf nicht von einem Skript abhaengen. */
.art-hero-section-c.kamui-tiefe-an {
  background-image: none !important;
}

/* Die Reste des eingefrorenen Theme-Parallax stilllegen. Sie sind
   ohnehin auf 0 geklappt, aber sie sollen auch keinen Platz und keine
   Klicks mehr beanspruchen. */
.art-hero-section-c .jarallax-container,
.art-hero-section-c img.jarallax-img {
  display: none !important;
}

/* Weg und Bildquelle.

   NACHGEMESSEN 25.08.: mit 70px legte der Streifen ueber den gesamten
   Vorbeiflug nur ~90px zurueck, verteilt auf rund 1400px Scrollweg.
   Rechnerisch Bewegung, in der Wahrnehmung Stillstand - Franky hat die
   Bilder zu Recht als statisch gemeldet, obwohl der Messwert != 0 war.

   Merksatz: ein Messwert ungleich null beweist NICHT, dass man es sieht.
   Die Sektion ist nur 457px hoch, das Verhaeltnis Weg zu Scrollstrecke
   entscheidet, nicht der Absolutwert.

   Jetzt 150px. Der Streifen ist 100% + 2*weg hoch, also bleibt die
   Kante auch am Rand des Vorbeiflugs sicher verdeckt. */
/* Nur noch ein Vorbeiflug: das Band mit Index 0 (Wolkentempel) ist auf
   Ansage vom 25.08. entfernt, siehe zwischenbilder.css. Die Regeln dafuer
   sind hier ersatzlos raus. */
/* Franky, 25.08.: kamui-c-wasserspiegel.png "dieses Bild bitte gegen
   dieses tauschen", Animation behalten. Getauscht wird nur die Datei,
   --kamui-tiefe-weg und der Vorbeiflug bleiben, wie sie waren. */
/* 27.08.: Das Motiv sitzt jetzt im Kind .kamui-tiefe__bild, nicht mehr
   im Rahmen. Der Rahmen liegt auf der Sektion und bewegt sich nicht,
   das Kind traegt das Bild und faehrt. Begruendung in tiefe.js. */
.art-hero-section-c[data-query-loop-index="3"] .kamui-tiefe__bild {
  background-image: url(flaechen/kamui-band-wasser.jpg);
}

@media (max-width: 991px) {
  .art-hero-section-c[data-query-loop-index="3"] .kamui-tiefe__bild {
    background-image: url(flaechen/kamui-band-wasser-klein.jpg);
  }
}

/* ══ DAS BILD IM RAHMEN ══════════════════════════════════════════════
   Gilt auf beiden Wegen: mit CSS-Zeitachse faehrt es ueber @keyframes,
   ohne sie schreibt tiefe.js Hoehe und transform genau hierher. */
.kamui-tiefe > .kamui-tiefe__bild {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  will-change: transform;
}

/* Ohne Zeitachse UND mit "weniger Bewegung" steigt tiefe.js aus, bevor
   es eine Hoehe schreibt. Ohne diese Regel bliebe das Kind auf
   `height: auto`, also auf null Pixeln, und das Band waere leer. */
@media (prefers-reduced-motion: reduce) {
  .kamui-tiefe > .kamui-tiefe__bild {
    height: 100%;
    transform: none;
    will-change: auto;
  }
}

/* ══ DIE FAHRT ALS SCROLL-GETRIEBENE CSS-ANIMATION, 27.08. ═══════════

   Dieselbe Rechnung wie in setzen(), nur ohne JavaScript:

       Bildhoehe = Fensterhoehe * (1 + tempo)
       lage      = -Bildhoehe + p * (Bildhoehe + Sektionshoehe)

   p ist der Fortschritt der Durchfahrt: 0, wenn die Oberkante der
   Sektion am unteren Fensterrand steht, 1, wenn ihre Unterkante oben
   verschwindet. Genau das ist der Bereich `cover 0%` bis `cover 100%`
   einer view-timeline, deshalb passen Formel und Zeitachse ohne
   Umrechnung aufeinander.

   Die Sektionshoehe steckt im `100cqh` des Endwerts. Sie kommt aus dem
   Rahmen, der `container-type: size` traegt und per top/bottom 0 exakt
   die Hoehe der Sektion hat.

   Warum am <html> die Klasse haengt: v2-baulig.css setzt auf demselben
   Rahmen `top: 0` und `height: auto` mit !important. Bei zwei
   !important entscheidet die Spezifitaet, und die eine Klasse mehr
   gibt hier den Ausschlag. tiefe.js setzt sie nur, wenn der Browser
   die Zeitachse wirklich kann. */
@supports (animation-timeline: view()) and (container-type: size) {
  /* ── WARUM HIER AM BODY GEDREHT WIRD ─────────────────────────────
     Eine view-timeline haengt an dem Scroll-Container, der dem
     Element am naechsten liegt. Gemessen am 27.08.:

         timeline.source        BODY
         body.scrollHeight      8043
         body.clientHeight      8043

     Der body ist also ein Scroll-Container OHNE Scrollweg - gescrollt
     wird in Wirklichkeit das <html>. Die Zeitachse stand deshalb fest
     auf 16.94 Prozent und das Bild ruehrte sich nicht.

     Grund ist eine einzelne Zeile im Kopf des Exports:

         body { overflow-x: hidden }

     Ist eine Achse `hidden` und die andere `visible`, macht CSS aus
     der zweiten `auto` - und damit wird der body zum Scroll-Container.
     Mit `clip` gilt diese Regel nicht: die Waagerechte wird weiter
     beschnitten, die Senkrechte bleibt `visible`, und der body ist
     kein Scroll-Container mehr.

     Bewusst an die Klasse gebunden, die tiefe.js nur bei
     vorhandener Zeitachse setzt: aeltere Browser behalten den
     Aufbau, den sie bisher hatten. */
  html.kamui-tiefe-css body {
    overflow-x: clip;
    overflow-y: visible;
  }

  html.kamui-tiefe-css .art-hero-section-c.kamui-tiefe-an[data-query-loop-index="0"],
  html.kamui-tiefe-css .art-hero-section-c.kamui-tiefe-an[data-query-loop-index="3"] {
    view-timeline-name: --kamui-band;
    view-timeline-axis: block;
  }

  html.kamui-tiefe-css .art-hero-section-c.kamui-tiefe-an[data-query-loop-index="0"] > .kamui-tiefe,
  html.kamui-tiefe-css .art-hero-section-c.kamui-tiefe-an[data-query-loop-index="3"] > .kamui-tiefe {
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    /* Macht die Sektionshoehe im Kind als 100cqh ansprechbar. Bringt
       Groessen- und Layouteingrenzung mit, aber KEINE Malgrenze: das
       Kind darf weiter ueber den Rahmen hinausragen, beschnitten wird
       es von der Sektion (overflow: hidden in v2-baulig.css). */
    container-type: size;
    /* Der Rahmen steht jetzt still. Eine eigene Ebene braucht er
       nicht mehr, die gehoert dem Kind. */
    will-change: auto;
  }

  html.kamui-tiefe-css .kamui-tiefe > .kamui-tiefe__bild {
    height: calc(100vh * (1 + var(--kamui-tiefe-tempo, 0.5)));
    animation-name: kamui-tiefe-fahrt;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --kamui-band;
    animation-range: cover 0% cover 100%;
  }

  @keyframes kamui-tiefe-fahrt {
    from {
      transform: translate3d(
        0, calc(100vh * (1 + var(--kamui-tiefe-tempo, 0.5)) * -1), 0);
    }
    to { transform: translate3d(0, 100cqh, 0); }
  }

  /* Ruhiger Modus: das Bild steht, aber es steht vollstaendig. */
  @media (prefers-reduced-motion: reduce) {
    html.kamui-tiefe-css .kamui-tiefe > .kamui-tiefe__bild {
      height: 100%;
      animation: none;
      transform: none;
      will-change: auto;
    }
  }
}

/* Ruhiger Modus: wer weniger Bewegung eingestellt hat, bekommt das
   Bild ruhig stehend - aber vollstaendig.
   Gleicher Selektorbau wie oben, sonst verliert die Regel gegen den
   "> *"-Selektor aus zwischenbilder.css. */
@media (prefers-reduced-motion: reduce) {
  .art-hero-section-c[data-query-loop-index="3"] > .kamui-tiefe {
    top: 0 !important;
    height: 100% !important;
    transform: none !important;
    will-change: auto;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   FORM B: Sektionen mit vorhandenem <img class="jarallax-img">
   (expertise/, en/expertise/, index.html@p=18)

   Diese Seiten bauen dasselbe Gestaltungsmittel anders auf als die
   Startseite: das Bild ist ein echtes <img>, kein Hintergrund. Der
   Export hat dessen Masse als Inline-Style eingefroren - Momentwerte
   eines 412px schmalen Fensters:

       width: 412px; height: 673.8px; margin-top: 74.6px;
       position: absolute; max-width: none;
       transform: translate3d(0px, 112.572px, 0px);

   tiefe.js raeumt den style-Aufsatz weg, hier steht der Ersatz.
   ═══════════════════════════════════════════════════════════════════ */

.kamui-tiefe-buehne {
  position: relative !important;
  overflow: hidden !important;
  /* Eigener Stapel, damit das Bild nicht unter den Nachbarabschnitt
     rutscht. Ohne isolation wandert es bei negativem z-index durch
     den Hintergrund der Sektion hindurch. */
  isolation: isolate;
}

/* Der Text muss ueber dem Bild liegen. Im Export steht er in einem
   .brxe-container, der keinen eigenen Stapelwert hat. */
.kamui-tiefe-buehne > .brxe-container,
.kamui-tiefe-buehne > .brxe-block,
.kamui-tiefe-buehne > .brxe-div {
  position: relative;
  z-index: 2;
}

/* Die Sektion als Vorfahr im Selektor: das Theme setzt
   `.jarallax-img.brxe-image { width: auto !important }` (zwei Klassen).
   Eine Regel auf `.kamui-tiefe-bild` allein (eine Klasse) verliert
   trotz !important, weil bei gleicher Wichtung die Spezifitaet
   entscheidet. Gemessen am 25.08. bei 390px Fensterbreite: Bild
   1246px breit statt 390, der Ueberhang ragte rechts aus der Sektion.
   Mit `.kamui-tiefe-buehne img.kamui-tiefe-bild` (zwei Klassen plus
   Element) liegt die eigene Regel darueber - kein Wettruesten, nur
   eine Stufe hoeher als die eine fremde Regel, die stoert. */
.kamui-tiefe-buehne img.kamui-tiefe-bild {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  /* Ueberhoehe wie beim Streifen der Form A: das Bild muss den Weg,
     den es zuruecklegt, an beiden Enden abdecken. Sonst faehrt eine
     leere Kante ins Bild. --kamui-tiefe-weg ist der halbe Ueberschuss. */
  width: 100% !important;
  height: calc(100% + 2 * var(--kamui-tiefe-weg, 60px)) !important;
  margin-top: calc(-1 * var(--kamui-tiefe-weg, 60px)) !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  z-index: 0 !important;
  pointer-events: none;
  will-change: transform;
  /* Der Weg, den tiefe.js in translate3d einsetzt. Gleiche Groesse wie
     auf der Startseite, damit sich beide Seiten gleich anfuehlen. */
  --kamui-tiefe-weg: 60px;
  /* Entsaettigt wie die uebrigen Flaechen: Bild ist Flaeche, nicht Motiv. */
  filter: grayscale(1) brightness(0.85) contrast(1.05);
}

@media (min-width: 992px) {
  /* Gleiche Selektorstaerke wie die Hauptregel oben. Mit dem kurzen
     `.kamui-tiefe-bild` verlor diese Zeile gegen die staerkere
     Hauptregel und der Weg blieb bei 60px - gemessen als 60/60px
     Ueberstand, wo 90/90px stehen sollten. */
  .kamui-tiefe-buehne img.kamui-tiefe-bild { --kamui-tiefe-weg: 90px; }
}

/* Der Kaefig des Themes wird von tiefe.js entfernt. Falls er doch
   einmal stehen bleibt (anderer Ladeweg), darf er das Bild nicht
   abschneiden: im Export traegt er height:0 und clip. */
.kamui-tiefe-buehne .jarallax-container {
  position: static !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
}

@media (prefers-reduced-motion: reduce) {
  /* Ebenfalls auf Hauptregelstaerke: sonst greift der Ruhe-Zweig nicht
     und das Bild behaelt seine Ueberhoehe ohne je bewegt zu werden. */
  .kamui-tiefe-buehne img.kamui-tiefe-bild {
    height: 100% !important;
    margin-top: 0 !important;
    transform: none !important;
  }
}