/* ===========================================================================
   WORAN SIE UNS MESSEN  --  drei Reihen im Wechsel

   Gehoert zu assets/kennzahlen.js. Der Umbau vom 25.08. und was vorher
   hier stand ist im Kopf jener Datei begruendet.

   ZUR BEWEGUNG, weil hier frueher ein Fehler sass:
   Die alte Fassung war scrollpositions-gerechnet - translateY wurde aus
   dem Scrollfortschritt gerechnet. Das ist gemessen unsichtbar gewesen
   (Haelften standen bei +-18px von 828px). Die Regel dazu: eine Bewegung
   braucht eine EIGENE UHR, keine, die am Scrollrad haengt.

   Diese Fassung hat sie: der IntersectionObserver setzt EINMAL
   data-sichtbar="ja", danach laeuft die transition ihre 900ms selbst ab,
   unabhaengig davon, wie schnell gescrollt wird. Deshalb ist die
   transition hier RICHTIG - anders als in der scrollgekoppelten Fassung,
   wo dieselbe Zeile der Fehler war.
   =========================================================================== */

/* ── Rahmen ────────────────────────────────────────────────────────────── */

.kamui-messen {
  background: #161B19;
  color: #EDE1CA;

  /* GEMESSEN am Elternknoten, nicht geraten: das Theme setzt dort
     display:flex, flex-direction:column, align-items:center. In einer
     Spalte ist die QUERACHSE die Breite, align-items:center laesst jedes
     Kind auf seine Inhaltsbreite schrumpfen. display:block loest das an
     der Wurzel. Am Kind herumzustellen ging frueher schief: flex-basis
     traf die HAUPTachse und machte die Sektion stattdessen 0px hoch.
     Beide Achsen gehoeren zusammen geprueft. */
  display: block !important;
  width: 100%;
  overflow: hidden;   /* die Reihen fahren von aussen herein */
}

/* ── Kopf ──────────────────────────────────────────────────────────────── */

/* Franky, 25.08.: "Hier bitte den Abstand verringern."

   GEMESSEN bei 1440x900, von der Unterkante der Bildsektion darueber bis
   zur Oberkante der Augenbraue "UNSER ANGEBOT":

       Polster der Sektion       90px    Theme, `padding: 90px var(--gutter)`
       Polster dieses Kopfes    112px    die 7rem hier
       zusammen                 202px

   Zwei Polster fuer dieselbe Aufgabe. Das der Sektion ist der Rhythmus
   der ganzen Seite: `clamp(3.25rem, 6.25vw, 5.625rem)`, also 52px schmal
   und 90px ab 1440. Jeder andere Uebergang der Startseite hat genau das.
   Die 7rem kamen oben drauf und machten diesen einen Uebergang mehr als
   doppelt so hoch wie alle anderen.

   Der Kopf traegt oben deshalb nichts mehr. Die Sektion polstert bereits,
   und zwar richtig. Nach unten bleiben die 4.5rem: das ist der Abstand
   zu den drei Reihen und eine andere Aufgabe.

       vorher 202px      nachher 90px

   NICHT ueber `.kamui-messen` geloest, sondern hier am Kopf: die Variante
   `--einzeln` weiter unten ist dieselbe Sektion ohne Kopf und soll oben
   gar nichts bekommen. */
.kamui-messen__kopf {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 2rem 4.5rem;
  text-align: center;
}

.kamui-messen__auge {
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* 0.62 ist der DEKORSTOP. Fuer gesperrte Versalien in klein reicht der
     nicht (gemessen 3.0 bei 0.38, gefordert 4.5). 0.72 ist der Textstop. */
  color: rgba(237, 225, 202, 0.72);
  margin: 0 0 1.25rem;
}

.kamui-messen__ueberschrift {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.12;
  font-weight: 400;
  color: #EDE1CA;
  margin: 0 0 1.25rem;
}

.kamui-messen__vorspann {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(237, 225, 202, 0.78);
  max-width: 40rem;
  margin: 0 auto;
}

/* ── Die drei Reihen ───────────────────────────────────────────────────── */

.kamui-messen__reihen {
  display: block;
}

/* Zwei Spalten, Bild und Text nebeneinander. Die Reihenfolge im Markup
   ist IMMER Bild, dann Text - die Seite wird hier per order getauscht.
   Damit bleibt die Vorlesereihenfolge fuer Screenreader gleich. */
.kamui-messen__reihe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  min-height: 32rem;
}

.kamui-messen__reihe--bild-links .kamui-messen__bild    { order: 1; }
.kamui-messen__reihe--bild-links .kamui-messen__spalte  { order: 2; }
.kamui-messen__reihe--bild-rechts .kamui-messen__bild   { order: 2; }
.kamui-messen__reihe--bild-rechts .kamui-messen__spalte { order: 1; }

/* ── Bildhaelfte ───────────────────────────────────────────────────────── */

.kamui-messen__bild {
  position: relative;
  overflow: hidden;
  min-height: 32rem;
}

.kamui-messen__flaeche {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── Texthaelfte ───────────────────────────────────────────────────────── */

.kamui-messen__spalte {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 3rem;
  background: #161B19;
}

.kamui-messen__text {
  max-width: 30rem;
}

/* Bild links heisst Text rechts: der Text rueckt zur Bildkante, nicht an
   den Fensterrand. Sonst stehen die drei Reihen optisch auseinander. */
.kamui-messen__reihe--bild-links .kamui-messen__text  { text-align: left; }
.kamui-messen__reihe--bild-rechts .kamui-messen__text { text-align: left; }

.kamui-messen__marke {
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  /* Textstop, nicht Dekorstop - siehe Kommentar bei __auge. */
  color: rgba(237, 225, 202, 0.72);
  margin: 0 0 1.5rem;
}

.kamui-messen__titel {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.15;
  font-weight: 400;
  color: #EDE1CA;
  margin: 0 0 1.25rem;
}

.kamui-messen__satz {
  font-size: 1.0625rem;
  line-height: 1.66;
  color: rgba(237, 225, 202, 0.78);
  margin: 0;
}

/* In den Angebotsreihen ist __satz ein einzelnes <p>. "Tempo mit
   Sicherung" (tempoAlsReihe in v2-baulig.js) traegt zwei Absaetze und
   liefert deshalb einen <div> mit <p> darin. Groesse und Farbe erbt er
   von oben, hier steht nur der Abstand zwischen den beiden. */
.kamui-messen__satz p { margin: 0; }
.kamui-messen__satz p + p { margin-top: 1.15em; }

/* ── Eine einzelne Reihe als ganze Sektion ────────────────────────────
   `kamui-messen--einzeln` traegt "Tempo mit Sicherung": derselbe Aufbau
   wie das Angebot, aber ohne Kopf und ohne Nachbarn.

   Zwei Dinge muss die Klasse geradeziehen. Erstens den Grund: der
   Theme-Wrapper darum bringt einen eigenen Verlauf von Schwarz nach
   rgb(40,40,40) mit, der neben der Tusche der Angebotsreihen als
   anderer Farbton auffaellt. Zweitens die Breite: der Container ist im
   Theme eine zentrierte Spalte mit Rand, die Reihen laufen von Kante
   zu Kante. */
/* Franky, 25.08.: "Hier bisschen Abstand, nicht direkt dran."

   Die Huelle stand auf `padding: 0`, damit die Reihe von Kante zu Kante
   laeuft. Das nahm ihr aber auch den Abstand nach OBEN, und darueber
   liegt das Parallaxband mit dem Archivbild. Gemessen: 0px zwischen der
   Unterkante des Bandes und der Oberkante dieser Reihe. Zwei Bilder
   stiessen ohne Fuge aneinander, das las sich wie ein Bild in zwei
   Teilen statt wie zwei Sektionen.

   Seitlich bleibt es bei 0: der Einzug der Reihe kommt aus
   `.kamui-messen--einzeln` und ist der Gutter des Themes. Unten bleibt
   es auch bei 0, dort polstert die Angebotssektion selbst.

   Das Mass ist nicht neu erfunden. v2-baulig.css setzt fuer jede Sektion
   NACH einem Parallaxband `clamp(2rem, 3.5vw, 3.25rem)`, also 32px schmal
   und 50px ab 1440. Genau dieselbe Lage, also dasselbe Mass. */
[data-kamui-reihe-huelle="ja"] {
  background: var(--v2-tusche, #161B19) !important;
  padding: clamp(2rem, 3.5vw, 3.25rem) 0 0 !important;
}

.kamui-messen--einzeln {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;

  /* Derselbe seitliche Einzug wie beim Angebot. Gemessen sitzen die
     drei Angebotsreihen nicht an der Fensterkante, sondern 60px davor:
     ihre Sektion traegt die Theme-Polsterung `padding: 90px var(--gutter)`.

     --gutter ist im Theme `clamp(1.25rem, 4.04vw + 0.34rem, 3.75rem)`,
     also 21px auf 390px Breite und 60px ab 1440px. Genau die Variable
     wird hier aufgerufen statt einer eigenen Zahl: sonst laufen die
     Reihen bei jeder Zwischenbreite unterschiedlich weit nach aussen.

     Oben und unten bleibt es bei null, den Abstand zu den Nachbarn
     bringt die Theme-Huelle mit. */
  padding: 0 var(--gutter) !important;
}

/* ── Bewegung ──────────────────────────────────────────────────────────────
   Gegenlaeufig wie in der Vorlage: die Bildhaelfte kommt von unten, die
   Texthaelfte von oben. Ausgeloest vom IntersectionObserver, danach laeuft
   die transition ihre eigenen 900ms - das ist die eigene Uhr, siehe Kopf.

   Nur transform und opacity, beides auf dem Compositor. Kein top/height,
   das wuerde bei drei grossen Bildern ruckeln.                            */

.kamui-messen__bild,
.kamui-messen__spalte {
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity   700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform, opacity;
}

.kamui-messen__reihe[data-sichtbar="nein"] .kamui-messen__bild {
  transform: translateY(14%);
  opacity: 0;
}

.kamui-messen__reihe[data-sichtbar="nein"] .kamui-messen__spalte {
  transform: translateY(-14%);
  opacity: 0;
}

.kamui-messen__reihe[data-sichtbar="ja"] .kamui-messen__bild,
.kamui-messen__reihe[data-sichtbar="ja"] .kamui-messen__spalte {
  transform: translateY(0);
  opacity: 1;
}

/* ── Fuss ──────────────────────────────────────────────────────────────
   Hier stand ein Fussblock mit dem Satz "Hier steht, was es gibt. Was in
   jedem Zuschnitt eingerichtet wird, steht auf der jeweiligen Seite."
   Franky, 25.08.: "das muss weg." Markup und Regeln sind raus, die
   Sektion endet buendig mit der letzten Reihe - so wie die Reihen auch
   untereinander buendig stehen. */

/* ── Schmal ────────────────────────────────────────────────────────────────
   Nebeneinander ist auf dem Telefon unlesbar. Die Haelften werden
   uebereinander gelegt, Bild IMMER oben - der Wechsel links/rechts hat
   in einer Spalte keinen Sinn und wuerde nur die Reihenfolge verwirren. */

@media (max-width: 900px) {
  .kamui-messen__reihe {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .kamui-messen__reihe--bild-links .kamui-messen__bild,
  .kamui-messen__reihe--bild-rechts .kamui-messen__bild   { order: 1; }
  .kamui-messen__reihe--bild-links .kamui-messen__spalte,
  .kamui-messen__reihe--bild-rechts .kamui-messen__spalte { order: 2; }

  .kamui-messen__bild { min-height: 20rem; }

  .kamui-messen__spalte { padding: 3rem 1.75rem 3.5rem; }
  .kamui-messen__text   { max-width: none; }

  .kamui-messen__kopf { padding: 0 1.5rem 3rem; }

  /* In einer Spalte ist die gegenlaeufige Bewegung sinnlos - beide
     Haelften kommen von unten, sonst kreuzen sie sich im Blickfeld. */
  .kamui-messen__reihe[data-sichtbar="nein"] .kamui-messen__spalte {
    transform: translateY(10%);
  }
  .kamui-messen__reihe[data-sichtbar="nein"] .kamui-messen__bild {
    transform: translateY(10%);
  }
}

/* ── Ruhe ──────────────────────────────────────────────────────────────────
   Wer Bewegung abbestellt hat, bekommt die drei Reihen ohne Verschiebung.
   kennzahlen.js setzt data-sichtbar dann sofort auf ja, diese Regeln sind
   die Absicherung fuer den Fall, dass das JS gar nicht laeuft.          */

@media (prefers-reduced-motion: reduce) {
  .kamui-messen__bild,
  .kamui-messen__spalte,
  .kamui-messen__reihe[data-sichtbar="nein"] .kamui-messen__bild,
  .kamui-messen__reihe[data-sichtbar="nein"] .kamui-messen__spalte {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ── Der Weg in die Tiefe ──────────────────────────────────────────────

   Aus der Sprachnachricht vom 25.08.: "Hier schneiden wir es an und
   hier gehen wir in die Tiefe." Jede Reihe fuehrt deshalb auf ihre
   Produktseite.

   Erster Versuch war ein Textverweis in Cinzel mit Unterstrich beim
   Hovern - bewusst kein Knopf, damit er nicht mit "Erstgespraech
   anfragen" konkurriert. Franky, 25.08.: "ANSEHEN muss in denselben
   Buttons sein, auch Gold."

   Er traegt jetzt die Knopfform des Hauses: 1px Rahmen, keine Rundung,
   transparenter Grund, Lato 700 in gesperrten Versalien, Fuellung beim
   Hovern - identisch zu .kamui-v2__karte-knopf und .artison-cta__button
   in v2-baulig.css. Unterschieden wird ueber die Farbe: Gold statt
   Creme. Die Konkurrenz zur Hauptaufforderung faellt damit nicht weg,
   sie wird geordnet - Creme fuehrt ins Formular, Gold in die Tiefe.

   Der Pfeil bleibt und ruckt beim Hovern weiter. inline-flex haelt ihn
   dabei auf der Grundlinie, was bei inline-block mit Versalien-
   Sperrung nicht zuverlaessig war. */
.kamui-messen__weiter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.6rem;
  padding: 13px 26px;
  font-family: "Lato", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--v2-gold-hell, #C2A05A);
  background: transparent;
  border: 1px solid var(--v2-gold-hell, #C2A05A);
  border-radius: 0;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.kamui-messen__weiter span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.kamui-messen__weiter:hover,
.kamui-messen__weiter:focus-visible {
  background: var(--v2-gold, #9B7C34);
  border-color: var(--v2-gold, #9B7C34);
  color: #FFFFFF;
}

.kamui-messen__weiter:hover span { transform: translateX(5px); }

/* ── Drei Kleintexte, dazugekommen am 11.09.2026 ───────────────────────
   Mit dem Praxisbeispiel kamen drei Angaben dazu, die vorher niemand
   brauchte: die Kennzeichnung als Prototyp, der Dokumentationsstand an
   der dritten Reihe und der Hinweis unter der Sektion.

   Alle drei sind Einordnung, nicht Aussage. Sie erben deshalb Groesse
   und Creme der vorhandenen Kleintexte und bringen keine eigene Farbe
   mit. 0.72 ist der Textstop aus derselben Datei, siehe __auge. */

.kamui-messen__kennung {
  margin: 1.5rem 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(237, 225, 202, 0.72);
}

/* Steht IM Satz der dritten Reihe, deshalb als Block abgesetzt statt
   als eigener Absatz - sonst bekaeme er den Reihenabstand und stuende
   wie eine vierte Aussage da. */
.kamui-messen__beleg {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(237, 225, 202, 0.62);
}

.kamui-messen__fuss {
  max-width: 40rem;
  margin: 3.5rem auto 0;
  padding: 0 var(--gutter, 1.5rem);
  font-size: 0.8125rem;
  line-height: 1.65;
  text-align: center;
  color: rgba(237, 225, 202, 0.62);
}