/* ===========================================================================
   HERO MIT SCROLL-ANIMATION

   Das Video läuft nicht von selbst. Es entwickelt sich beim Scrollen:
   jede Scrollposition zeigt genau ein Bild. Am Ende bleibt das letzte Bild
   stehen, und die Seite läuft normal weiter.

   Warum Einzelbilder statt eines <video>-Elements:
   Ein Video an die Scrollposition zu koppeln funktioniert im Browser nur
   unzuverlässig. currentTime zu setzen löst ein Suchen im Datenstrom aus,
   das je nach Kodierung ruckelt oder ganz hängen bleibt. Bei 169 Bildern
   ist ein Bildwechsel dagegen sofort da. Das ist der Weg, den auch Apple
   für solche Sequenzen nimmt.
   =========================================================================== */

.kamui-hero {
  position: relative;
  /* Die Höhe bestimmt, wie weit gescrollt werden muss, bis die Animation
     durch ist. 320vh heißt: gut drei Bildschirmhöhen Scrollweg. */
  height: 320vh;
  background: #161b19;

  /* Volle Fensterbreite, auch wenn der Hero in einem eingerückten
     Container sitzt. Gemessen: Artisons Container gibt nur 741 px von
     1440 px her, das Bild wäre auf halber Breite abgeschnitten.
     Die 50vw-Rechnung zieht das Element auf die Fensterbreite zurück,
     unabhängig davon, wie tief es verschachtelt ist. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;

  /* Artisons .brxe-section setzt display:flex mit zentrierten Kindern.
     Dadurch schrumpft die Buehne auf ihre Inhaltsbreite: gemessen 741 px
     von 1440 px, das Bild war auf halber Breite abgeschnitten.
     Ein schlichtes block macht die Buehne wieder so breit wie der Hero. */
  display: block !important;
}

/* Die Bühne bleibt stehen, während drumherum gescrollt wird.

   ACHTUNG, hier steckt die Falle: Artisons body trägt
   "overflow: hidden auto". Damit wird der body selbst zum Scroll-Container,
   und position:sticky richtet sich nach ihm statt nach dem Fenster.
   Gemessen: die Bühne wanderte mit dem Scrollen einfach nach oben weg
   (buehneTop ging auf -990 px), das Bild war schwarz.

   Deshalb hier position:fixed statt sticky, sichtbar nur solange der Hero
   im Bild ist. Das Ein- und Ausblenden übernimmt hero.js über die Klasse
   .haftet, weil fixed anders als sticky nicht von selbst aufhört. */
.kamui-hero__buehne {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Solange der Hero durchlaufen wird: an das Fenster geheftet. */
.kamui-hero.haftet .kamui-hero__buehne {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1;
}

/* Nach dem Ende: unten im Hero abgelegt, damit der Übergang zur nächsten
   Sektion sauber ist. */
.kamui-hero.fertig .kamui-hero__buehne {
  position: absolute;
  top: auto;
  bottom: 0;
}

/* ── DAS STANDBILD HINTER DER FAHRT ────────────────────────────────
   Franky, 27.08.: "Es sieht so aus, als wuerde irgendwas laden, dann
   verzerrt es kurz, und dann kommt erst das Richtige."

   Das Canvas ist beim ersten gemalten Bild noch leer - hero.js muss
   erst das Bild zur aktuellen Scrollposition holen. Bis dahin stand
   Tuschegrund mit Ladeanzeige, danach sprang das Motiv herein.

   Dieses <img> traegt genau den ersten Frame der Fahrt (f0001.jpg,
   48 kB) und steht im Markup, wird also mit der Seite geladen und ist
   im ersten Bild schon da. Das Canvas legt sich darueber, sobald es
   zeichnet - mit demselben Motiv, also ohne sichtbaren Wechsel.

   Es bleibt liegen: das Canvas deckt es vollstaendig, und wenn ein
   Sequenzbild einmal fehlt, steht dahinter etwas Richtiges statt
   Tusche.

   ACHTUNG: das src MUSS der erste Frame von `data-pfad` sein. Ein
   anderes Motiv hier waere genau der Fehler, der auf der Team-Seite
   behoben wurde - erst das eine Bild, dann ein zweites. */
.kamui-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.kamui-hero__bild {
  z-index: 1;

  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kein Übergang: bei 24 Bildern je Sekunde würde eine Blende die
     Bewegung verschmieren statt sie zu glätten. */
}

/* Ein feiner Schleier, damit die Schrift auf jedem Bild trägt.
   Das Video ist hell am Horizont und dunkel im Vordergrund. */
/* Der Schleier lag frueher deutlich dunkler ueber dem Bild, damit der
   Claim lesbar blieb. Ohne Text darf das Bild fuer sich stehen: es bleibt
   nur ein schmaler Verlauf oben, damit der Kopf nicht im Motiv verschwimmt,
   und einer unten als Uebergang zum naechsten Abschnitt. */
.kamui-hero__schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(22, 27, 25, 0.42) 0%,
      rgba(22, 27, 25, 0.06) 22%,
      rgba(22, 27, 25, 0) 55%,
      rgba(22, 27, 25, 0.10) 100%);
  pointer-events: none;
}

/* ── Randloser Uebergang zur naechsten Sektion ──────────────────────────
   Vorher riss das Bild an seiner Unterkante hart ab: dunkles Motiv, dann
   ohne Zwischenschritt die helle Flaeche des naechsten Abschnitts. Eine
   Linie quer durchs Bild, die es wie einen eingesetzten Kasten wirken
   liess.

   Gemessen an der Naht (Bildmitte, ueber die Breite gemittelt):
   sechs Pixel ueber der Kante rgb(234,223,200), direkt darunter
   rgb(22,27,25). Ein Sprung von hell nach dunkel auf einem Pixel,
   quer ueber die ganze Breite. Genau die Kante, die man sieht.

   Ursache war die Richtung: der Hero blendete nach Creme aus, obwohl
   der Abschnitt DARUNTER Tusche ist. Ein Ausklang muss in die Farbe
   laufen, die danach kommt - sonst wird der Verlauf selbst zur Kante.

   Deshalb laeuft das Motiv jetzt in Tusche #161B19 aus. Der Uebergang
   ist damit randlos: das Bild loest sich in die dunkle Flaeche auf,
   und es gibt keine Stelle mehr, an der das Auge haengen bleibt.

   Als ::after am Hero, nicht in der Buehne. Die Buehne ist waehrend der
   Animation ans Fenster geheftet und immer fensterhoch, ein Verlauf darin
   wuerde das Bild die ganze Zeit ueber abdunkeln. Das ::after sitzt am
   Boden des Heros und kommt erst am Ende der Animation ins Bild, genau
   dort, wo die Naht liegt. */
.kamui-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46vh;
  min-height: 260px;
  z-index: 2;
  pointer-events: none;
  /* Weiche Kurve statt gleichmaessigem Verlauf: unten deckt es schnell,
     oben laeuft es lange sehr duenn aus. Ein linearer Verlauf setzt oben
     sichtbar an, man sieht dann, wo der Ausklang beginnt. */
  background:
    linear-gradient(to bottom,
      rgba(22, 27, 25, 0) 0%,
      rgba(22, 27, 25, 0.04) 24%,
      rgba(22, 27, 25, 0.16) 44%,
      rgba(22, 27, 25, 0.42) 62%,
      rgba(22, 27, 25, 0.78) 80%,
      rgb(22, 27, 25) 100%);
}

/* ── Mission im Hero ──────────────────────────────────────────────────
   Drei Aussagen, die waehrend der Bildfahrt nacheinander kommen und
   wieder gehen: erst links oben, dann rechts, dann mittig. Der Blick
   wandert im Zickzack mit, statt an einer festen Textmarke zu kleben.

   WARUM SCHWARZ
   Gemessen ueber die ganze Fahrt (assets/hero_zonen.py, Kontrast von
   Tusche #161B19 gegen den Bildausschnitt an dieser Stelle):

       Zone           Kontrast fuer Schwarz
       links oben      5.8:1 bis 11.1:1
       rechts oben     8.5:1 bis 11.1:1
       mitte           5.3:1 bis 10.5:1
       links unten     2.8:1 bis  4.9:1   << zu dunkel
       rechts unten    1.8:1 bis  5.3:1   << zu dunkel

   Das Motiv ist oben und mittig hell, unten dunkel. Schwarze Schrift
   traegt ueberall ausser im unteren Bilddrittel. Alle drei Lagen
   bleiben deshalb oberhalb von 46 Prozent Hoehe.

   Kein Schleier hinter dem Text: der wuerde das Motiv abdunkeln und
   genau die Helligkeit nehmen, die Schwarz zum Tragen braucht. */
.kamui-hero__mission {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.kamui-hero__zeile {
  margin: 0;
  position: absolute;
  max-width: 17ch;

  /* Inter, nach der Vorlage vom 25.08. (Instagram-Kachel): eine
     neutrale, eng laufende Grotesk statt der humanistischen Lato, die
     der Rest der Seite traegt. Eingebunden in schriften.css - ohne
     @font-face mischte der Browser hier Systemschnitte: einzelne
     Buchstaben fett, andere duenn, im selben Wort.

     Inter laeuft von Haus aus etwas offener als Lato. Die Laufweite
     unten faengt das ab, sonst wuerde der Hero breiter wirken als
     vorher, obwohl der Wortlaut derselbe ist. */
  font-family: "Inter", "Lato", system-ui, sans-serif;
  /* Franky, 25.08. nachts, zum Screenshot der rechten Lage: "die
     Schrift kann bisschen weiter runter, darf auch 15% kleiner
     sein." Alle drei Werte sind genau 0.85 der vorherigen:
     1.55/3.1/2.9 waren es davor. Nur die Grundgroesse anfassen
     genuegt, `.folge` und `.kicker` haengen ueber em daran. */
  font-size: clamp(1.32rem, 2.64vw, 2.47rem);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #161B19;

  opacity: 0;
  transition: opacity 0.5s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);

  /* Heller Schimmer statt Schleier: auf hellem Grund unsichtbar, auf
     dunklerem Grund haelt er die Buchstaben zusammen. */
  text-shadow:
    0 0 1px rgba(237, 225, 202, 0.55),
    0 1px 12px rgba(237, 225, 202, 0.45),
    0 2px 30px rgba(237, 225, 202, 0.28);
}

/* "Unsere Mission" als kleine Zeile darueber. Nicht als eigener Satz
   im Fliesstext: es ist eine Ueberschrift, keine Aussage. Ueber die
   Sperrung wird es zur Marke statt zur Behauptung. */
.kamui-hero__kicker {
  display: block;
  font-size: 0.30em;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.9em;
  opacity: 0.72;
}

/* Der zweite Teil des Schlusssatzes traegt die Pointe und steht
   deshalb schwerer. Hierarchie ueber Gewicht, nicht ueber Farbe. */
.kamui-hero__betont {
  display: inline-block;
  margin-top: 0.18em;
  font-weight: 700;
}

/* ── Die drei Lagen ──────────────────────────────────────────────────
   Jede kommt aus der Richtung, in der sie steht: die linke von links,
   die rechte von rechts, die mittlere von unten. Das gibt der Abfolge
   eine Richtung, statt dass Text dreimal am selben Fleck aufblendet. */

/* Links oben. Gemessen ueber die linke Spalte auf verschiedenen Hoehen
   (Fahrtanteil 0.05 bis 0.35):

       Hoehe   18%    24%    30%    36%    44%    52%
               5.8    7.7    9.0    3.8    5.0    5.0

   22 Prozent liegt im besten Band. Eine fruehere Fassung stand auf
   52 Prozent, dort mass die ganze Zeile nur 3.6:1 - der Textkasten
   reichte in ein dunkles Band, das der Zonenmittelwert verdeckte. */
.kamui-hero__zeile.links {
  left: clamp(1.5rem, 8vw, 8.5rem);
  top: 17%;
  transform: translate(-2.5rem, 0);
  text-align: left;
}

/* Rechts OBEN. Franky, 25.08.: "dieser Satz muss rechts oben sein,
   damit mehr gespielt wird."

   Vorher stand die Zeile auf 27 Prozent, also fast auf derselben Hoehe
   wie die linke (17 Prozent) - der Wechsel von links nach rechts las
   sich als Schritt zur Seite, nicht als Sprung. Auf 13 Prozent steht
   sie ueber der linken statt neben ihr, und die dritte kommt von unten
   aus der Mitte: drei Lagen, drei Ecken.

   Tief genug bleibt sie trotzdem. Der Kopf misst 88px, das sind bei
   900px Fensterhoehe knapp 10 Prozent - 13 Prozent setzt die Zeile
   sauber darunter an. Bei 680px Hoehe waeren 13 Prozent aber genau
   88px, die Zeile klebte gemessen am Kopf. `max(7rem, 13%)` legt
   deshalb einen Boden ein: 112px, also gut zwei Zeilen Luft unter dem
   Kopf, egal wie flach das Fenster ist.

   Nach unten war der Weg versperrt: bei 46 Prozent mass die Zeile
   3.7:1 bis 4.2:1, dort beginnt der dunkle Vordergrund. Oben ist das
   Band hell, die Werte stehen im Messblock ueber der linken Lage. */
/* Nachtrag 25.08. nachts: 13 Prozent mit 7rem Boden waren zu knapp.
   Gemessen im Screenshot standen bei 1000px Fensterhoehe noch rund
   40px zwischen Kopfunterkante und Versalhoehe - der Satz klebte am
   Menue. Jetzt 17 Prozent mit 9rem Boden, das sind rund 80px Luft.
   Die Staffelung nach unten (mitte auf 31%) bleibt frei, und die
   Zeile steht mit dem kleineren Schriftgrad weiterhin ueber dem
   dunklen Vordergrund, der ab etwa 46 Prozent beginnt. */
.kamui-hero__zeile.rechts {
  right: clamp(1.5rem, 8vw, 8.5rem);
  top: max(9rem, 17%);
  transform: translate(2.5rem, 0);
  text-align: right;
}

/* Mittig als Schluss, breiter und groesser: hier steht die Aussage,
   die haengen bleiben soll. */
.kamui-hero__zeile.mitte {
  left: 50%;
  top: 31%;
  max-width: 26ch;
  margin-left: -13ch;
  text-align: center;
  transform: translate(0, 1.8rem);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.98vw, 2.76rem);
}

.kamui-hero__zeile.da {
  opacity: 1;
  transform: translate(0, 0);
}

/* Wer Bewegung reduziert haben will, bekommt die Aussagen ruhig
   untereinander statt als Abfolge. */
@media (prefers-reduced-motion: reduce) {
  .kamui-hero__mission {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    padding: 0 clamp(1.5rem, 8vw, 8.5rem);
  }
  .kamui-hero__zeile,
  .kamui-hero__zeile.links,
  .kamui-hero__zeile.rechts,
  .kamui-hero__zeile.mitte {
    position: static;
    left: auto; right: auto; top: auto;
    margin-left: 0;
    max-width: 34ch;
    text-align: left;
    opacity: 1;
    transform: none;
    transition: none;
    font-size: clamp(0.98rem, 1.79vw, 1.53rem);
  }
}

/* Schmale Geraete: die seitlichen Lagen ruecken zusammen, sonst bleibt
   von 17 Zeichen Breite nichts uebrig. Die Hoehenstaffelung bleibt,
   sie traegt die Bewegung. */
@media (max-width: 760px) {
  .kamui-hero__zeile {
    max-width: 80vw;
    font-size: clamp(1.06rem, 4.6vw, 1.66rem);
  }
  .kamui-hero__zeile.links  { left: 6vw;  top: 15%; }
  .kamui-hero__zeile.rechts { right: 6vw; top: max(7rem, 17%); }
  .kamui-hero__zeile.mitte  {
    left: 6vw;
    margin-left: 0;
    max-width: 88vw;
    text-align: left;
    top: 31%;
    font-size: clamp(1.15rem, 4.93vw, 1.79rem);
  }
}



/* Die Ueberschrift bleibt im Dokument, aber nicht im Bild. Ohne sie haette
   die Startseite gar keine H1: schlecht fuer Suchmaschinen und fuer
   Screenreader. Nicht display:none, das nimmt sie auch dem Vorlesen weg. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Hinweis zum Weiterscrollen, verschwindet sobald es losgeht. */
.kamui-hero__hinweis {
  position: absolute;
  left: 50%;
  bottom: 2.6rem;
  transform: translateX(-50%);
  z-index: 2;
  font-family: "Lato", sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  /* Franky, 26.08.: "Das wort Scrollen bisschen heller machen und den
     strich auch". Von 0.55 auf 0.78 - der Strich darunter zieht mit
     (siehe ::after). Bleibt Creme aus der Marke, nur weniger
     zurueckgenommen. */
  color: rgba(237, 225, 202, 0.78);   /* Creme, nicht Weiss */
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.kamui-hero__hinweis::after {
  content: "";
  display: block;
  width: 1px;
  height: 2.2rem;
  margin: 0.9rem auto 0;
  background: linear-gradient(to bottom,
    rgba(237, 225, 202, 0.78), transparent);
}

.kamui-hero.laeuft .kamui-hero__hinweis {
  opacity: 0;
}

/* Ladeanzeige, solange die ersten Bilder unterwegs sind.

   SEIT 27.08. STEHT SIE IM MARKUP AUF `weg`, also unsichtbar. Hinter dem
   Canvas liegt jetzt `.kamui-hero__poster` mit dem ersten Frame - es gibt
   keinen schwarzen Canvas mehr zu verdecken. Die Blende zu zeigen und
   0,22s spaeter wieder auszublenden war genau der Ablauf, den Franky am
   27.08. beschrieben hat: "als wuerde irgendwas laden, dann verzerrt es
   kurz, und dann kommt erst das Richtige."

   Der Bauteil bleibt stehen, damit hero.js unveraendert weiterlaeuft
   (`classList.add("weg")` auf etwas, das schon weg ist, tut nichts) und
   damit man ihn zurueckholen kann, falls das Poster einmal entfaellt. */
.kamui-hero__laden {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #161b19;
  /* KURZ blenden, nicht 0.6s.
     hero.js gibt die Blende frei, sobald das ERSTE Bild gezeichnet ist
     (gemessen 26.08.: Canvas ab 171ms fertig und danach unveraendert).
     Mit 0.6s lag danach noch eine halbe Sekunde lang eine dunkler
     werdende Flaeche ueber einem fertigen Hero - zusammen mit der
     zweiten Blende aus bewegung.js ergab das den Eindruck, der Hero
     baue sich zweimal auf. 0.22s reicht, um den schwarzen Canvas vor
     dem ersten Zeichnen zu verdecken, ohne das fertige Bild zu
     ueberlagern. */
  transition: opacity 0.22s ease;
}

.kamui-hero__laden.weg {
  opacity: 0;
  pointer-events: none;
}

.kamui-hero__laden span {
  font-family: "Lato", sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(237, 225, 202, 0.45);
}

/* Auf schmalen Fenstern kürzerer Scrollweg: dort ist jeder Zentimeter
   Scrollen teurer, und die Sequenz soll nicht zur Geduldsprobe werden. */
@media (max-width: 767px) {
  .kamui-hero {
    height: 220vh;
  }
}

/* ── FESTER HERO (Standbild) ──────────────────────────────────────────

   Franky, 26.08.: die drei Produktseiten (Scale Yourself, Scale the Team,
   Customized Software) bekommen ein Standbild statt der Sequenz. Gesetzt
   wird das ueber data-standbild im HTML, hero.js haengt dann diese Klasse
   an.

   Der entscheidende Teil ist die Hoehe. Der animierte Hero ist 320vh hoch,
   damit die Sequenz Scrollweg hat. Bleibt die Hoehe bei einem Standbild
   stehen, scrollt der Besucher durch gut zwei leere Bildschirmhoehen, in
   denen nichts passiert - das sieht aus wie ein Fehler. Also zurueck auf
   100vh, genau wie es die Regel fuer reduzierte Bewegung darunter schon
   macht.

   position:relative loest die feste Buehne: sie soll mit der Seite
   wegscrollen statt im Bild zu kleben. Der Scrollhinweis ("weiter
   scrollen") faellt weg, weil es hier nichts mehr abzuscrollen gibt. */
.kamui-hero--fest {
  height: 100vh !important;
}

.kamui-hero--fest .kamui-hero__buehne {
  position: relative !important;
  top: auto !important;
  left: auto !important;
}

.kamui-hero--fest .kamui-hero__hinweis {
  display: none !important;
}

/* Wer Bewegung reduziert haben will, bekommt das letzte Bild als Standbild
   und einen normalen, kurzen Hero. */
@media (prefers-reduced-motion: reduce) {
  .kamui-hero {
    height: 100vh;
  }
  .kamui-hero__buehne {
    position: relative;
  }
  .kamui-hero__hinweis {
    display: none;
  }
}

/* ── Der Folgesatz der zweiten Hero-Zeile ─────────────────────────────

   Franky, Sprachnachricht 25.08.: der Wortlaut des Hero ist gesetzt und
   "darf nicht umformuliert werden". Die zweite Zeile ist damit kein
   Halbsatz mehr, sondern ein Hieb plus Begruendung:

       Es gibt kein Warnsignal.
       Der Auftrag landet ploetzlich woanders oder ist fuer Sie nicht
       mehr wirtschaftlich abbildbar.

   114 Zeichen in einer Spalte, die auf `max-width: 17ch` steht und bei
   2.9rem laeuft: gemessen sechs Zeilen, die den halben Bildschirm
   fuellten und die Aufnahme dahinter erschlugen.

   Erster Versuch war, die Begruendung als Nachsatz kleiner zu setzen
   (halbe Groesse, Gewicht 400). Das ist am 25.08. wieder raus, siehe
   den Block darunter: der Satz steht jetzt in derselben Schrift wie
   der Rest. Getragen wird die Laenge allein ueber die Spaltenbreite. */
.kamui-hero__zeile.rechts { max-width: 34ch; }

/* Franky, 25.08.: "Der Auftrag landet ploetzlich woanders ... muss auch
   so geschrieben werden wie die anderen Buchstaben."

   Der Nachsatz stand auf 0.46em und Gewicht 400 - im selben Absatz zwei
   Schriftgroessen und zwei Gewichte, das las sich wie eine Fussnote und
   nicht wie der zweite Teil derselben Aussage. Er traegt jetzt dieselbe
   Groesse, dasselbe Gewicht, dieselbe Laufweite und denselben
   Zeilenabstand wie jede andere Hero-Zeile: eine einzige Schrift im
   ganzen Hero.

   Die Spalte laeuft dafuer breiter (34ch statt 24ch) und der Abstand
   nach oben faellt kleiner aus, sonst wuerde der Satz in dieser Groesse
   die halbe Buehne fuellen. Das ist Umbruch, keine zweite Typografie. */
.kamui-hero__folge {
  display: block;
  margin-top: 0.34em;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.015em;
}

@media (max-width: 900px) {
  .kamui-hero__zeile.rechts { max-width: 26ch; }
}

/* ══════════════════════════════════════════════════════════════════════
   KEIN FREMDES BILD VOR DEM HERO
   ══════════════════════════════════════════════════════════════════════

   Franky, 25.08.: "Wenn die Seite das erste Mal geladen wird, wird noch
   ein anderes Bild kurz gezeigt. Das muss raus, es muss direkt mit dem
   Hero starten."

   URSACHE, gefunden ueber die Bildpunkte des ersten Bildes: es war
   `assets/flaechen/7e2fa8aee03dd0.jpg`, die Drahtskulptur von Artison.
   Sie gehoert zum zweiten Bildband am Seitenende.

   Der Bricks-Export hat die LAUFZEITWERTE von jarallax mit in die Datei
   geschrieben - Momentwerte aus einem 412px breiten Fenster:

       position: absolute; top: 0; left: 0;
       width: 412px; height: 1234.5px;
       margin-top: -205.75px; transform: translate3d(0, 174.871px, 0)

   `top: 0; left: 0` ohne positionierten Vorfahren heisst: obere linke
   Ecke der SEITE. Das Bild lag also 412px breit ueber dem Hero, bis
   `tiefe.css` es ausblendet.

   Und genau das kam zu spaet: von 23 Stylesheets stehen nur drei im
   `<head>`, die uebrigen zwanzig im `<body>` - darunter `tiefe.css`.
   Stylesheets im Rumpf halten das erste Bild nicht auf. Deshalb malte
   der Browser eine Bildfolge lang die Skulptur, danach griffen die
   Regeln und der Hero stand da. Dasselbe Zeitfenster liess auch kurz
   "HALTUNG" in der Navigation und die ungoldenen Knoepfe sehen.

   Die eingefrorenen Werte sind jetzt aus allen acht betroffenen Seiten
   entfernt - `tiefe.js` hat sie ohnehin verworfen, nur eben erst nach
   dem ersten Bild.

   Diese Regel ist das Netz darunter. Sie steht bewusst in `hero.css`,
   weil das eine der drei Dateien im `<head>` ist und damit vor dem
   ersten Bild greift: solange `tiefe.js` ein Parallaxbild nicht
   uebernommen hat (`data-kamui-tiefe`), wird es nicht gezeigt. Ein
   erneuter Export kann die Momentwerte also wieder mitbringen, ohne
   dass jemand sie zu sehen bekommt. */
img.jarallax-img:not([data-kamui-tiefe]) {
  visibility: hidden;
}

/* Der Hero selbst liegt ueber allem, was vor ihm gemalt werden koennte.
   Die Buehne traegt bereits den eigenen Grund (#161b19), sie deckt also
   auch dann ab, wenn ein Bild noch nicht geladen ist. */
.kamui-hero { z-index: 2; }
.kamui-hero__buehne { background: #161b19; }

/* ══════════════════════════════════════════════════════════════════════
   WAS BEIM ERSTEN BILD SCHON STEHEN MUSS
   ══════════════════════════════════════════════════════════════════════

   Befund vom 25.08. nachts, gemessen im Browser: nach einem Neuladen
   fehlten der Knopf "Erstgespraech anfragen" und die zwei Kontaktzeichen
   unten links fuer die ersten rund 400 Millisekunden. Der Knopf war
   nicht weg, er stand in der Mitte der Buehne statt unten links.

   Die Ursache liegt nicht im Hero, sondern in der Ladeweise der Seite.
   Die WordPress-Ausleitung bringt einen Fastpixel-Block mit:

       <noscript id="fpo-styles"> ... 36 Stylesheets ... </noscript>

   Alles darin ist tot, bis ein Skript es in den Kopf haengt. Genau dort
   liegt auch `v2-baulig.css`, und NUR dort stehen `.kamui-hero__tat`
   und `.kamui-wege`. Bis zur Einhaengung ist der Knopf also ein ganz
   normales Flex-Kind der mittig ausgerichteten Buehne - deshalb die
   Mitte, deshalb kein Umriss, deshalb "nicht da".

   Im Kopf liegen nur drei Stylesheets: schriften.css, kamui.css und
   diese hier. Was ueber dem Falz steht, muss deshalb hier stehen.

   Doppelt gepflegt, mit Absicht: `v2-baulig.css` behaelt seine Regeln,
   sie kommen spaeter und gewinnen mit !important. Die Werte hier sind
   dieselben, also gibt es beim Nachladen keinen Sprung. Wer dort etwas
   an Lage oder Groesse aendert, aendert es hier mit.

   Die Farben stehen als Zahl statt als var(--v2-...): die Variablen
   werden in v2-baulig.css gesetzt und sind an dieser Stelle der
   Kaskade noch nicht bekannt.
     Creme #EDE1CA · Tusche #161B19 · Gold #9B7C34 · Gold hell #C2A05A */

/* ── Der Knopf im Hero ─────────────────────────────────────────────── */

.kamui-hero__tat {
  position: absolute;
  left: clamp(1.5rem, 8vw, 8.5rem);
  bottom: 7.5rem;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  pointer-events: auto;
}

.kamui-hero__knopf {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 0 27px;
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 1.5px;
  line-height: 40px;
  text-transform: uppercase;
  text-decoration: none;
  color: #C2A05A;
  background: transparent;
  border: 1px solid rgba(155, 124, 52, 0.85);
  border-radius: 5px;
  box-shadow: none;
}

@media (max-width: 760px) {
  .kamui-hero__tat { bottom: 7.2rem; left: 1.5rem; right: 1.5rem; }
  .kamui-hero__knopf { width: 100%; text-align: center; }
}

@media (max-height: 620px) {
  .kamui-hero__tat { bottom: 3.2rem; }
}

/* ── Die zwei Wege unten links ─────────────────────────────────────── */

.kamui-wege {
  position: fixed;
  left: 32px;
  bottom: 32px;
  z-index: 100;
  display: flex;
  gap: 12px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Ohne Attribut sichtbar. kontakt.js setzt "ja", sobald die Fusszeile
   im Bild ist - dort steht unten links das Logo. */
.kamui-wege[data-weg="ja"] {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.kamui-wege__zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(194, 160, 90, 0.85);
  background: rgba(22, 27, 25, 0.78);
  backdrop-filter: blur(12px);
  color: #C2A05A;
  text-decoration: none;
  box-shadow:
    inset 0 0 0 1px rgba(237, 225, 202, 0.12),
    0 8px 28px rgba(0, 0, 0, 0.5);
}

.kamui-wege__zeichen svg { width: 25px; height: 25px; display: block; }

@media (max-width: 640px) {
  .kamui-wege { left: 18px; bottom: 18px; gap: 10px; }
  .kamui-wege__zeichen { width: 50px; height: 50px; }
  .kamui-wege__zeichen svg { width: 22px; height: 22px; }
}

/* ══════════════════════════════════════════════════════════════════════
   HANDY: Hero-Zeilen auf eine Mittelachse
   ══════════════════════════════════════════════════════════════════════
   GEMESSEN 26.08. auf 390px: die drei Zeilen standen auf drei Achsen
   (Kicker linksbuendig bei x=23, Folge rechtsbuendig bei x=92, betonter
   Satz links bei x=23), und die Folgezeile ragte 17px RECHTS aus dem
   Bild. Auf dem Desktop ist das Absicht, dort tragen die Gegenlagen die
   Bewegung ueber die Buehne. Auf 390px Breite wirkt es wie ein Satzfehler.

   ZWEI SACKGASSEN, beide gemessen und zurueckgenommen - nicht wiederholen:
   1. `.kamui-hero__mission { position: static }` - der Traeger haelt die
      Scroll-Mechanik. Statisch gestellt rutschte der Textblock aus dem
      Bild (Kicker top -284, spaeter -595, Screenshot zeigte nur den Knopf).
   2. `top: auto` auf den Zeilen plus Polsterung an der Buehne - dieselbe
      Wirkung, der Text verliess das Bild nach oben.

   Deshalb hier NUR die Waagerechte: Lage, Hoehenstaffelung und die
   `transform`-Einblendung (translate -2.5rem / +2.5rem / 1.8rem, die die
   `da`-Klasse auf 0 zieht) bleiben unangetastet. Zentriert wird ueber
   gleiche Seitenabstaende, nicht ueber margin:auto (wirkt bei absoluter
   Lage ohnehin nicht) und nicht ueber translateX (waere die Einblendung).

   SPEZIFITAET: `h1.kamui-hero__zeile` in v2-baulig.css ist Element+Klasse
   und schlaegt eine reine Klasse. Die h1-Form muss mitgefuehrt werden. */
@media (max-width: 760px) {
  .kamui-hero__zeile,
  .kamui-hero__zeile.links,
  .kamui-hero__zeile.rechts,
  .kamui-hero__zeile.mitte,
  h1.kamui-hero__zeile,
  h1.kamui-hero__zeile.links,
  h1.kamui-hero__zeile.rechts,
  h1.kamui-hero__zeile.mitte {
    left: 6vw;
    right: 6vw;
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    text-align: center;
  }

  .kamui-hero__kicker,
  .kamui-hero__folge,
  .kamui-hero__betont {
    text-align: center;
  }
}

/* ------------------------------------------------------------------
   TURMSPITZE FREIHALTEN  (Franky, 26.08.2026: "es gibt kein warnsignal
   berührt noch den tower in animation")

   Die zweite Hero-Zeile stand auf `top: max(9rem, 17%)`. Die 17 Prozent
   sind auf einem hohen Bildschirm harmlos, auf einem echten Laptop aber
   zu wenig: die Zeile rutscht nach oben in die Turmspitze, die im Bild
   bei rund 285px beginnt. Gemessen wurde der kleinste senkrechte Abstand
   von der Textunterkante zur naechsten dunklen Struktur, spaltenweise
   ueber die ganze Textbreite (nicht nur in der Bildmitte - dort steht
   der Turm gar nicht):

       1536x864    20px      1440x900   33px
       1440x800     4px      1366x768    0px  BERUEHRT
       1280x720     0px  BERUEHRT

   Zwei Ursachen, beide muessen weg:

   1. Die Prozentangabe. Ein fester Wert von 7rem haelt die Zeile auf
      jedem Fenster an derselben Stelle, statt sie mit der Fensterhoehe
      wandern zu lassen.
   2. Die Texthoehe selbst. Der Satz laeuft ueber drei Zeilen (145px).
      Auf einem niedrigen Fenster reicht der Deckel allein nicht, weil
      der Turm dort ebenfalls hoeher ins Bild ragt. Darum unter 830px
      Fensterhoehe zusaetzlich ein kleinerer Schriftgrad.

   Nach der Korrektur (dieselbe Messung):

       1920x1080  136px      1536x864   56px      1440x900   75px
       1440x800    64px      1366x768   59px      1280x720   48px

   AUF 901px BREITE GESCOPED: unterhalb davon gelten die eigenen
   Handy-Regeln ab Zeile 346, die die Zeilen mittig untereinander
   stellen. Gegengemessen bei 390x844 und 768x1024 - top und
   Schriftgrad dort unveraendert.

   `!important` beim Schriftgrad ist noetig, weil der Sofortblock im
   <head> von index.html `font-size` mit !important festhaelt
   (Zwillingsstelle: dort ebenfalls `.kamui-hero__zeile`). `top` traegt
   dort nichts, deshalb genuegt die hoehere Spezifitaet.
   ------------------------------------------------------------------ */
/* Nachtrag 28.08., Franky zu zwei Screenshots nebeneinander: "die zweite
   Schrift 'Es gibt kein Warnsignal' soll auf derselben Hoehe sein wie die
   erste, ohne etwas im Hintergrund zu ueberdecken."

   Der feste Deckel von 7rem hielt die Zeile zwar vom Turm frei, setzte sie
   aber deutlich ueber die linke Lage. Gemessen im Browser, Oberkante des
   Textkastens:

       1920x1080  links 184 / rechts 112      1440x900  links 153 / rechts 112
       1536x864   links 147 / rechts 112      1366x768  links 131 / rechts 112

   Beim Scrollen sprang der Text also um bis zu 72px nach oben. Jetzt traegt
   die rechte Lage denselben Wert wie die linke (17 Prozent, ohne den 9rem-
   Boden der Grundregel), damit stehen beide auf einer Hoehe.

   Der Turm bleibt frei. Gemessen wurde wieder der kleinste senkrechte
   Abstand von der Textunterkante zur naechsten dunklen Struktur, spaltenweise
   ueber die Textbreite und ueber den ganzen Einblendweg (Fahrtanteil 0.335
   bis 0.60), Kopfzeile ausgenommen:

       1920x1080  60px      1600x900   25px      1536x864   18px
       1440x900   31px      1440x800   37px      1366x768   38px
       1280x720   36px      1024x700   53px

   Die 18px am engsten Punkt sind der Kasten, nicht die Buchstaben - die
   Unterlaenge der letzten Zeile laesst noch rund acht Bildpunkte Luft.
   Getragen wird das vom kleineren Schriftgrad unter 830px Fensterhoehe im
   Block darunter; ohne ihn liefe der Satz dort in den Turm. */
@media (min-width: 901px) {
  .kamui-hero__zeile.rechts {
    top: 17%;
  }
}

@media (min-width: 901px) and (max-height: 830px) {
  .kamui-hero__zeile.rechts {
    font-size: clamp(1.15rem, 2.15vw, 1.95rem) !important;
  }
}