/* ══════════════════════════════════════════════════════════════════════
   V2 BAULIG: Stile fuer die zweite Fassung
   ══════════════════════════════════════════════════════════════════════

   Gehoert NUR zur zweiten Fassung (kamui-umbau-v2). Der Stand unter
   kamui-umbau bleibt unberuehrt. Wird als letzte Datei geladen und darf
   deshalb korrigieren, was vorher gesetzt wurde.

   ── RAHMENLOS ────────────────────────────────────────────────────────

   Franky, 25.08.: "ich moechte ueberall rahmenlose Uebergaenge auf der
   gesamten Seite".

   Die erste Fassung hatte Kaesten, Gitterlinien und Trennstriche an
   jeder zweiten Sektion. Alles raus. Getrennt wird ueber Flaeche,
   Groesse und Weissraum, so wie es die Markenregel ohnehin verlangt.
   Was an Linien bleibt, ist ausschliesslich der Trennstrich des Themes
   (.brxe-divider) und der Feldunterstrich im Formular, weil beides
   Artisons eigene Formensprache ist.

   ── WENIGER EIGENBAU ─────────────────────────────────────────────────

   Die frueheren Abschnitte fuer Schritte, Menschen, Fallstudie,
   Erstgespraech und Fragen sind ersatzlos entfallen. Diese Bloecke
   laufen jetzt in den Artison-Bausteinen content-section-zulu und
   art-fr-content-section-alpha, die das Theme selbst gestaltet. Hier
   stehen nur noch die wenigen Ergaenzungen, die es dort nicht gibt.

   ── DESIGNSPRACHE ────────────────────────────────────────────────────

     Ueberschriften   Lato 700. schriften.css setzt das per !important
                      fuer h1 bis h6, bewusste Entscheidung des Projekts
     Augenbrauen      Cinzel, gesperrt, Versalien
     Farbe            nur Tusche #161B19 und Creme #EDE1CA
     Hierarchie       ueber Groesse, Flaeche, Weissraum
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --v2-creme: #EDE1CA;
  --v2-tusche: #161B19;
  --v2-lauf: rgba(237, 225, 202, 0.80);
  --v2-still: rgba(237, 225, 202, 0.55);

  /* ── Gold: die Farbe der Handlungsaufforderung ────────────────────
     Franky, Sprachnachricht 25.08.: "Die Call to Action wuerde ich
     vielleicht in Gold machen." - "In dem Creme?" - "Ne, in einem
     anderen Ton." - "Dann machen wir das in Gold."

     Damit bekommt die Seite genau eine Farbe, die nur eines bedeutet:
     hier wird gehandelt. Alles andere bleibt Creme auf Tusche.

     #9B7C34 ist ein gedecktes Altgold, kein Signalgelb: es liegt im
     warmen Bereich des Cremes und bricht die Palette deshalb nicht
     auf. Gemessen gegen Weiss ergibt es 4.0:1 - genug fuer die
     Knopfbeschriftung, die bei 18px in Versalien laeuft (Richtwert
     fuer grosse Schrift ist 3:1). Gegen die Tusche des Grundes sind
     es 3.6:1. */
  --v2-gold: #9B7C34;
  --v2-gold-hell: #C2A05A;
}

/* ══════════════════════════════════════════════════════════════════════
   1. HERO: Knopf above the fold
   ══════════════════════════════════════════════════════════════════════

   Der Befund aus der Analyse: der einzige Weg ins Formular lag ganz
   unten auf der Seite. Baulig verlangt einen Knopf in der ersten
   Bildschirmhoehe, auf dem Rechner wie auf dem Telefon.

   GEMESSEN, zweiter Anlauf: mittig war falsch. Der Steg im Hero laeuft
   genau durch die Mitte des unteren Bilddrittels und ist dort die
   hellste Flaeche. Links und rechts davon ist das Wasser dunkel. Der
   Knopf steht deshalb linksbuendig, in derselben Spalte wie die
   Ueberschrift: der Grund traegt Creme, und Knopf und H1 stehen auf
   einer Kante statt auf zwei. */

.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;
  /* Die Mission-Ebene darueber steht auf pointer-events:none, damit sie
     Klicks durchlaesst. Der Knopf braucht sie ausdruecklich wieder. */
  pointer-events: auto;
}

.kamui-hero__knopf {
  display: inline-block;
  padding: 15px 34px;
  font-family: "Lato", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--v2-tusche);
  background: var(--v2-creme);
  transition: background 0.3s ease, color 0.3s ease;
  /* Der Knopf liegt auf einem Bild, das sich beim Scrollen aendert.
     Der Schatten haelt ihn ablesbar, auch wenn ein helles Einzelbild
     durchlaeuft. */
  box-shadow: 0 2px 30px rgba(22, 27, 25, 0.35);
}

.kamui-hero__knopf:hover,
.kamui-hero__knopf:focus-visible {
  background: transparent;
  color: var(--v2-creme);
  box-shadow: inset 0 0 0 1px var(--v2-creme);
}

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

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

/* Die H1 traegt jetzt die erste sichtbare Zeile statt eines
   unsichtbaren Claims. Das Theme bringt fuer h1 eigene Groessen und
   Raender mit, die die Hero-Typografie sonst ueberschreiben. */
h1.kamui-hero__zeile {
  /* Inter wie der Rest des Hero, siehe hero.css. Das !important muss
     mit: das Theme setzt fuer h1 eine eigene Familie und wuerde die
     Zeile sonst als einzige in Lato stehen lassen. */
  font-family: "Inter", "Lato", system-ui, sans-serif !important;
  /* GEMESSEN 26.08.: hier stand clamp(1.55rem, 3.1vw, 2.9rem), der Stand
     VOR Frankys Ansage vom 25.08. ("darf auch 15% kleiner sein"). Diese
     Regel hat 0,1,1 (Tag + Klasse) und traegt !important, schlaegt also
     die korrigierte Regel `.kamui-hero__zeile` (0,1,0) in hero.css aus
     jeder Datei und jeder Reihenfolge. Ergebnis: die Zeile sprang von
     38.016px auf 44.64px, sobald diese Datei geladen war - der sichtbare
     Groessensprung im Hero. Der Wert MUSS mit hero.css und dem
     Sofortblock in kopfzeile_durchgehend.py uebereinstimmen; drei Stellen,
     ein Wert. */
  font-size: clamp(1.32rem, 2.64vw, 2.47rem) !important;
  line-height: 1.16 !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: #161B19 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   2. DER ALLTAG: Szenen statt Vogelperspektive
   ══════════════════════════════════════════════════════════════════════

   Der Block trug erst mehrere Szenen und danach die Pointe. Franky,
   25.08.: "Ein Kunde fragt nach dem Stand. Sie vertroesten ihn. Er
   fragt beim Naechsten. - das muss weg." Uebrig bleibt die Pointe
   allein, und die traegt den Block auch allein: zwei Zeilen, die
   gegeneinander stehen.

   Die Szenen-Regeln bleiben stehen, aber ohne Wirkung: `kamui-szene`
   kommt in keinem HTML mehr vor. Sie kosten nichts und halten die
   Klasse bereit, falls wieder eine Szene davorgesetzt wird. Hierarchie
   weiter ueber Deckung und Gewicht, nicht ueber Farbe. */

.art-text-container__text-left .kamui-szene { color: var(--v2-lauf); }

.art-text-container__text-left .kamui-pointe {
  color: var(--v2-creme);
  font-weight: 500;
}

.art-text-container__text-left .kamui-szene + .kamui-szene,
.art-text-container__text-left .kamui-szene + .kamui-pointe {
  margin-top: 1.5em;
}

/* ══════════════════════════════════════════════════════════════════════
   3. RHYTHMUS DER NEUEN SEKTIONEN
   ══════════════════════════════════════════════════════════════════════

   GEMESSEN bei 1440px: die Theme-Sektionen polstern mit 90px oben und
   unten. Die neuen standen auf 129.6px, das Zitat auf 158.4px. Dadurch
   war die Seite in der Mitte luftiger als am Anfang und am Ende.

   6.25vw ergibt bei 1440px genau 90px, also derselbe Rhythmus. */

.kamui-v2 {
  padding-top: clamp(3.25rem, 6.25vw, 5.625rem);
  padding-bottom: clamp(3.25rem, 6.25vw, 5.625rem);
  background: var(--v2-tusche);
}

/* Zwei gleichartige Sektionen hintereinander polstern nicht doppelt. */
.kamui-v2 + .kamui-v2 { padding-top: 0; }

/* ══════════════════════════════════════════════════════════════════════
   4. ERGAENZUNGEN ZU DEN ARTISON-BAUSTEINEN
   ══════════════════════════════════════════════════════════════════════

   Alles hier sind Kleinteile, die es im Theme nicht gibt: eine Marke
   unter der Ueberschrift, eine Liste in der zweiten Spalte, die Fragen.
   Der Rest kommt vom Theme. */

/* Kleine Zeile unter der Ueberschrift eines alpha-Blocks: Nummer,
   Rolle, Herkunft. Typografie der Augenbrauen. */
.kamui-v2__marke {
  font-family: "Cinzel", Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v2-still);
  margin: 0.6rem 0 0;
}

/* Ein Strich statt eines Punktes: die Liste sagt, was NICHT kommt.
   Ein Aufzaehlungspunkt liest sich wie ein Leistungsversprechen. */
.kamui-v2__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kamui-v2__liste li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 1rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--v2-lauf);
}

.kamui-v2__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 1.1rem;
  height: 1px;
  background: rgba(237, 225, 202, 0.45);
}

/* Nummerierte Schritte, gleiche Optik wie die Marke. */
.kamui-v2__schrittliste {
  list-style: none;
  counter-reset: schritt;
  margin: 0;
  padding: 0;
}

.kamui-v2__schrittliste li {
  counter-increment: schritt;
  position: relative;
  padding: 0 0 1.5rem 3.4rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--v2-lauf);
}

.kamui-v2__schrittliste li::before {
  content: "0" counter(schritt);
  position: absolute;
  left: 0;
  top: 0.2em;
  font-family: "Cinzel", Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--v2-still);
}

.kamui-v2__still {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--v2-still);
}

/* ── Fragen ───────────────────────────────────────────────────────────
   Rahmenlos: keine Linie zwischen den Fragen. Getrennt wird ueber
   Abstand, und das geoeffnete Feld hebt sich durch seine Flaeche ab. */

.kamui-v2__fragen details {
  margin-bottom: 0.5rem;
  background: transparent;
  transition: background 0.3s ease;
}

.kamui-v2__fragen details[open] {
  background: rgba(237, 225, 202, 0.04);
}

.kamui-v2__fragen summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 3rem 1.1rem 0;
  position: relative;
  font-family: "Lato", system-ui, sans-serif;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--v2-creme);
}

.kamui-v2__fragen details[open] summary,
.kamui-v2__fragen details[open] p { padding-left: 1.5rem; }

.kamui-v2__fragen summary::-webkit-details-marker { display: none; }

/* Kreuz, das sich beim Oeffnen zum Strich dreht. Zwei Pseudoelemente
   statt eines Zeichens, damit es in jeder Schrift gleich aussieht. */
.kamui-v2__fragen summary::after,
.kamui-v2__fragen summary::before {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  width: 14px;
  height: 1px;
  background: var(--v2-creme);
  opacity: 0.7;
  transition: transform 0.28s ease;
}

.kamui-v2__fragen summary::before { transform: translateY(-50%) rotate(90deg); }
.kamui-v2__fragen summary::after  { transform: translateY(-50%); }
.kamui-v2__fragen details[open] summary::before { transform: translateY(-50%); }

.kamui-v2__fragen details p {
  margin: 0 0 1.4rem;
  padding-right: 2rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--v2-lauf);
  max-width: 62ch;
}

/* ══════════════════════════════════════════════════════════════════════
   5. ANGEBOT: Raster statt Karussell, rahmenlos
   ══════════════════════════════════════════════════════════════════════

   Befund: ein Karussell zeigt einen von drei Zuschnitten. Wer nicht
   klickt, sieht zwei Drittel des Angebots nie.

   Die Karten hatten in der ersten Fassung einen Rahmen und Gitterlinien
   dazwischen. Beides raus, getrennt wird ueber Abstand. */

#kamui-referenzen .kamui-v2__innen {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

#kamui-referenzen .kamui-v2__karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

#kamui-referenzen .kamui-v2__karte {
  display: flex;
  flex-direction: column;
  background: transparent;
  transition: opacity 0.5s ease;
}

#kamui-referenzen .kamui-v2__karte-bild {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  margin-bottom: 1.75rem;
}

#kamui-referenzen .kamui-v2__karte-innen {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#kamui-referenzen .kamui-v2__karte-marke {
  font-family: "Cinzel", Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v2-still);
  margin: 0 0 0.6rem;
}

#kamui-referenzen .kamui-v2__karte-titel {
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--v2-creme);
  margin: 0 0 1.1rem;
}

#kamui-referenzen .kamui-v2__karte-satz {
  font-size: 0.96rem;
  line-height: 1.62;
  color: var(--v2-lauf);
  margin: 0 0 1.5rem;
}

/* margin-bottom:auto schiebt alles darunter an den Kartenfuss. Damit
   stehen die Knoepfe der drei Karten auf einer Linie, egal wie lang der
   Text darueber ist. */
#kamui-referenzen .kamui-v2__karte-liste {
  list-style: none;
  margin: 0 0 auto;
  padding: 0 0 1.75rem;
}

#kamui-referenzen .kamui-v2__karte-liste li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--v2-lauf);
}

#kamui-referenzen .kamui-v2__karte-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.85rem;
  height: 1px;
  background: rgba(237, 225, 202, 0.4);
}

#kamui-referenzen .kamui-v2__karte-preis { padding-top: 1.5rem; }

#kamui-referenzen .kamui-v2__karte-zahl {
  font-family: "Cinzel", Georgia, serif;
  font-size: 1.5rem;
  color: var(--v2-creme);
  display: block;
  margin-bottom: 0.3rem;
}

#kamui-referenzen .kamui-v2__karte-zusatz {
  font-family: "Lato", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-still);
}

/* Rahmenlos: der Knopf traegt eine Flaeche, keinen Umriss. */
#kamui-referenzen .kamui-v2__karte-knopf {
  display: block;
  padding: 13px 20px;
  text-align: center;
  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-creme);
  background: rgba(237, 225, 202, 0.08);
  transition: background 0.3s ease, color 0.3s ease;
}

#kamui-referenzen .kamui-v2__karte-knopf:hover,
#kamui-referenzen .kamui-v2__karte-knopf:focus-visible {
  background: var(--v2-creme);
  color: var(--v2-tusche);
}

#kamui-referenzen .kamui-v2__preis-hinweis {
  margin: 2.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--v2-still);
  max-width: 66ch;
}

#kamui-referenzen .kamui-v2__karte[data-hervor="ja"] { opacity: 0.55; }

@media (max-width: 980px) {
  #kamui-referenzen .kamui-v2__karten { grid-template-columns: 1fr; gap: 56px; }
}

/* ══════════════════════════════════════════════════════════════════════
   6. DIE ZWEI ZWISCHENBAENDER, ARTISON 1:1
   ══════════════════════════════════════════════════════════════════════

   Zwei Bildbaender im Seitenfluss, beide mit der Bewegung, die auf
   artison-atelier.com unter "The Essence" laeuft. Die Rechnung steht in
   tiefe.js, mit den Messwerten.

   Hier steht die Geometrie, und die musste sich aendern: tiefe.css baute
   den Streifen als "Sektionshoehe plus 150px" und verschob ihn um
   hoechstens 150px. Artison arbeitet anders: das Bild ist Fensterhoehe
   mal 1.5 hoch, also rund dreimal so hoch wie das Band, und der
   sichtbare Ausschnitt wandert waehrend der Durchfahrt einmal komplett
   daran entlang. Ohne diese Hoehe gibt es die Strecke nicht, auf der die
   Bewegung stattfindet.

   Hoehe und Verschiebung setzt tiefe.js als Inline-Stil mit important.
   Die Regeln in tiefe.css tragen ebenfalls !important, deshalb hier
   dieselbe Selektorform plus .kamui-tiefe-an: eine Klasse mehr, also
   hoehere Spezifitaet. */

.art-hero-section-c.kamui-tiefe-an[data-query-loop-index="0"] > .kamui-tiefe,
.art-hero-section-c.kamui-tiefe-an[data-query-loop-index="3"] > .kamui-tiefe {
  top: 0 !important;
  /* 27.08.: bottom dazu. Der Rahmen soll genau so hoch sein wie die
     Sektion - mit top und bottom auf 0 loest `height: auto` sich
     dorthin auf. Gebraucht wird das fuer `100cqh` im Kind, siehe
     tiefe.css. Auf beiden Wegen richtig, mit und ohne CSS-Zeitachse. */
  bottom: 0 !important;
  height: auto !important;
  /* will-change ist mit dem 27.08. ans Kind .kamui-tiefe__bild
     gewandert: seitdem faehrt das Kind, der Rahmen steht still. Eine
     eigene Ebene fuer ein unbewegtes Element kostet nur Speicher. */
}

/* Der Streifen ist dreimal so hoch wie das Band. Ohne Beschnitt laegen
   zwei Drittel des Bildes ueber den Nachbarsektionen. Artison macht das
   ueber .jarallax-container mit overflow:hidden. */
.art-hero-section-c[data-query-loop-index="0"],
.art-hero-section-c[data-query-loop-index="3"] {
  overflow: hidden !important;
}

/* Motiv des ersten Bandes. tiefe.css kennt nur Band 3, weil Band 0 dort
   noch ausgeblendet war.

   ACHTUNG, hier wird das Band wirklich gemalt. Es gibt drei Stellen, die
   nach einem Motiv fuer dieses Band aussehen, und nur diese eine wirkt:

     1. das <img class="jarallax-img"> in index.html - jarallax haengt es
        in einen Container mit z-index -100 und zieht es auf 0x0. Gemessen:
        unsichtbar.
     2. die Regel auf der SEKTION in zwischenbilder.css - die Theme-Regel
        `.bricks-lazy-hidden { background-image: none !important }` schlaegt
        sie. Gemessen: computed background-image = none.
     3. diese hier, auf dem Streifen .kamui-tiefe, den tiefe.js einhaengt.

   Franky, 25.08.: kamui-b-archiv-papier.png "soll bitte getauscht werden",
   Animation behalten. Nur die Datei wird getauscht, der Vorbeiflug in
   tiefe.js bleibt unangetastet. */
/* 27.08.: Ziel ist jetzt das Kind .kamui-tiefe__bild, nicht der
   Rahmen. Der Rahmen liegt still auf der Sektion, das Kind faehrt.
   Begruendung in tiefe.js. */
.art-hero-section-c[data-query-loop-index="0"] .kamui-tiefe__bild {
  background-image: url(flaechen/kamui-band-archiv.jpg);
}

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

@media (prefers-reduced-motion: reduce) {
  .art-hero-section-c.kamui-tiefe-an[data-query-loop-index="0"] > .kamui-tiefe,
  .art-hero-section-c.kamui-tiefe-an[data-query-loop-index="3"] > .kamui-tiefe {
    top: 0 !important;
    height: 100% !important;
    transform: none !important;
    will-change: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   7. KENNZAHLEN
   ══════════════════════════════════════════════════════════════════════

   Hier stand ein @media (pointer: coarse)-Block, der die drei Kennzahlen
   auf dem Telefon untereinander stellte, weil die damalige Fassung das
   Mausrad fing.

   ERLEDIGT SICH: die Komponente wurde in kamui-umbau am 25.08. um 17:02
   neu gebaut, nach dem Klon dieser Fassung. Franky: "woran sie uns
   messen muss genau mit der gleichen Komponente gebaut werden wie bei
   localhost:4600". kennzahlen.js und kennzahlen.css sind deshalb 1:1
   von dort uebernommen, samt der neuen Klassen (__kopf, __reihen,
   __fuss). Die alten Klassennamen gibt es nicht mehr, die Regeln hier
   waeren tote Selektoren gewesen.

   Kein Radfangen mehr, also auch keine Ausnahme fuer den Finger. */

/* ══════════════════════════════════════════════════════════════════════
   8. KONTAKTFORMULAR IM ARTISON-AUFBAU
   ══════════════════════════════════════════════════════════════════════

   Gemessen auf artison-atelier.com/kontakt am 25.08. (nur gelesen):

     Gruppe   27px Abstand nach unten
     Label    16px, Normalschrift, 0.4px gesperrt, 8px Abstand
     Feld     KEIN Kasten. Nur eine Linie unten, 1px.
              Hoehe 50px, Schrift 20px, Polster 10px 0
     Knopf    durchsichtig mit Umriss, Polster 13.5px / 27px

   Der Feldunterstrich ist die einzige Linie, die bleibt: er IST das
   Formular. Ein Feld ohne jede Markierung waere nicht mehr als Feld
   erkennbar.

   FARBEN: Artison setzt Grau auf Hellgrau. Das Kamui-Fenster ist Creme,
   also laeuft hier alles in Tusche auf Creme. kamui-farbe.css faerbt
   Eingabefelder pauschal mit Kasten und Rahmen in Creme ein, deshalb
   steht hier ueberall !important dagegen. */

.kamui-kontakt-unter {
  font-family: "Lato", system-ui, sans-serif;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  color: var(--v2-tusche);
  margin: 2.5rem 0 2rem;
}

.kamui-kontakt-formular .form-group { display: block; margin-bottom: 27px; }

.kamui-kontakt-formular label {
  display: block;
  font-family: "Lato", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.4px;
  text-transform: none;
  color: rgba(22, 27, 25, 0.72);
  margin-bottom: 8px;
}

.kamui-kontakt-formular label.required::after {
  content: "*";
  vertical-align: super;
  font-size: 0.7em;
  margin-left: 2px;
  color: rgba(22, 27, 25, 0.5);
}

.kamui-kontakt-formular input[type="text"],
.kamui-kontakt-formular input[type="email"],
.kamui-kontakt-formular input[type="tel"],
.kamui-kontakt-formular select,
.kamui-kontakt-formular textarea {
  width: 100%;
  height: 50px;
  padding: 10px 0 !important;
  font-family: "Lato", system-ui, sans-serif;
  font-size: 20px;
  color: var(--v2-tusche) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(22, 27, 25, 0.35) !important;
  border-radius: 0;
  transition: border-color 0.25s ease;
  appearance: none;
}

.kamui-kontakt-formular textarea {
  height: auto;
  min-height: 110px;
  resize: vertical;
  line-height: 1.5;
}

.kamui-kontakt-formular input:focus,
.kamui-kontakt-formular select:focus,
.kamui-kontakt-formular textarea:focus {
  outline: none;
  border-bottom-color: var(--v2-tusche) !important;
}

.kamui-kontakt-formular select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(22,27,25,0.7) 50%),
    linear-gradient(135deg, rgba(22,27,25,0.7) 50%, transparent 50%) !important;
  background-position: right 10px center, right 4px center !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
  padding-right: 24px !important;
  cursor: pointer;
}

.kamui-kontakt-formular select option { background: #EDE1CA; color: #161B19; }

.kamui-kontakt-formular .kamui-kontakt-reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  align-items: end;
}

@media (max-width: 700px) {
  .kamui-kontakt-formular .kamui-kontakt-reihe { grid-template-columns: 1fr; }
}

/* Die Spamfalle von Artison. Nicht display:none: manche Bots pruefen
   darauf und ueberspringen das Feld dann. Aus dem Bild geschoben und aus
   dem Vorlesefluss genommen, aber technisch vorhanden. */
.kamui-kontakt-falle {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kamui-kontakt-formular .options-wrapper { list-style: none; margin: 0; padding: 0; }

.kamui-kontakt-formular .options-wrapper li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.kamui-kontakt-formular .options-wrapper input[type="checkbox"] {
  appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1px solid rgba(22, 27, 25, 0.45) !important;
  background: transparent !important;
  cursor: pointer;
  position: relative;
}

.kamui-kontakt-formular .options-wrapper input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid var(--v2-tusche);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.kamui-kontakt-formular .options-wrapper label {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
}

.kamui-kontakt-formular .options-wrapper a {
  color: var(--v2-tusche);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kamui-kontakt-formular .submit-button-wrapper { margin-bottom: 0; }

.kamui-kontakt-formular .kamui-kontakt-senden {
  display: inline-block;
  padding: 13.5px 27px !important;
  font-family: "Lato", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--v2-creme) !important;
  background: var(--v2-tusche) !important;
  border: 0 !important;
  border-radius: 0;
  cursor: pointer;
  transition: opacity 0.3s ease;
  width: auto;
}

.kamui-kontakt-formular .kamui-kontakt-senden:hover,
.kamui-kontakt-formular .kamui-kontakt-senden:focus-visible { opacity: 0.82; }

.kamui-kontakt-formular .kamui-kontakt-hinweis {
  margin: 1.75rem 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(22, 27, 25, 0.62);
  max-width: 56ch;
}

/* Danke-Zustand liegt auf demselben cremefarbenen Grund. */
.kamui-kontakt-danke { padding: 1rem 0; }
.kamui-kontakt-danke h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--v2-tusche);
  margin: 0 0 1.25rem;
}
.kamui-kontakt-danke p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(22, 27, 25, 0.8);
  margin: 0 0 1rem;
  max-width: 52ch;
}
.kamui-kontakt-danke .kamui-kontakt-danke-still {
  font-size: 0.9rem;
  color: rgba(22, 27, 25, 0.6);
}

/* ══════════════════════════════════════════════════════════════════════
   9. FUSSZEILE: das ganze Logo, darunter der Claim
   ══════════════════════════════════════════════════════════════════════

   Franky, 25.08.: das Logo gehoert richtig rauf, der erklaerende Satz
   darunter faellt weg. Ein Absender erklaert sich nicht, er steht da. */

.kamui-fuss__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 190px;
  margin: 0 0 1.5rem;
}

.kamui-fuss__claim {
  font-family: "Cinzel", Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v2-creme);
  opacity: 0.85;
  margin: 0;
}

@media (max-width: 991px) {
  .kamui-fuss__logo { max-width: 150px; margin-inline: auto; }
  .kamui-fuss__claim { text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════════
   10. RAHMENLOS, DURCHGESETZT
   ══════════════════════════════════════════════════════════════════════

   Sammelregel gegen die Kaesten und Gitterlinien, die im Theme und in
   den frueheren Kamui-Dateien verteilt stehen. Sie greift ausdruecklich
   NICHT auf den Feldunterstrich im Formular, den Theme-Trennstrich und
   das Kaestchen der Zustimmung: das sind Bauteile, keine Rahmen. */

.kamui-v2 .brxe-container,
.kamui-v2 .brxe-block,
.kamui-v2 .brxe-div,
.kamui-v2 figure,
.kamui-v2 article,
#kamui-referenzen .kamui-v2__karten,
#kamui-referenzen .kamui-v2__karte {
  border: 0 !important;
}

/* Der Trennstrich des Themes bleibt, er ist Artisons eigene Sprache.
   Nur zurueckgenommen, damit er trennt statt zu rahmen. */
.kamui-v2 .brxe-divider .line {
  background: rgba(237, 225, 202, 0.22);
}

/* ══════════════════════════════════════════════════════════════════════
   11. DIE ARTISON-BAUSTEINE, SEITENUEBERGREIFEND
   ══════════════════════════════════════════════════════════════════════

   HIER LAG DER EIGENTLICHE HAKEN.

   Bricks legt die Gestaltung eines Bausteins nicht in eine gemeinsame
   Datei, sondern in einen <style>-Block INNERHALB der Seite, auf der er
   vorkommt. Gemessen am 25.08.:

     art-fr-content-section-alpha   15 Regeln, nur in p=18 (Ablauf)
     content-section-zulu           16 Regeln, nur in p=4445 (Haltung)

   Wer den Baustein auf einer anderen Seite verwendet, bekommt die
   Auszeichnung ohne die Gestaltung: Bild und Text stapeln sich
   untereinander in voller Breite statt nebeneinander zu stehen. Genau
   so sahen die neuen Bloecke im ersten Versuch aus.

   Die Regeln stehen deshalb hier, einmal, fuer alle Seiten. Uebernommen
   sind sie aus den beiden Seiten, nicht neu erfunden.

   ZWEI DINGE HABE ICH DABEI GEAENDERT, beide mit Grund:

   1. content-section-zulu bringt drei Hintergrundbilder mit, die auf
      /wp-content/uploads/... zeigen. Die gibt es im Klon nicht, das sind
      die 404er auf der Haltungsseite. Fuer die neuen Bloecke sind sie
      abgeschaltet.

   2. content-section-zulu__heading-wrapper trug border-left:1px solid
      #606060. Das ist genau der Rahmen, der weg sollte. Ersetzt durch
      Weissraum.
   ══════════════════════════════════════════════════════════════════════ */

/* ── art-fr-content-section-alpha: Bild neben Text, wechselseitig ───── */

.kamui-v2.art-fr-content-section-alpha.brxe-section {
  row-gap: 0;
  column-gap: 0;
}

.kamui-v2 .art-fr-content-section-alpha__inner.brxe-container {
  display: grid;
  grid-gap: 0;
  grid-template-columns: var(--grid-2, 1fr 1fr);
  grid-template-rows: var(--grid-1, auto);
  align-items: stretch;
}

/* Jeder zweite Block spiegelt: Bild nach rechts. Das ist der Rhythmus
   der Ablauf-Seite und der Grund, warum die Reihe nicht monoton wird. */
.kamui-v2 .art-fr-content-section-alpha__inner:nth-of-type(even)
  .art-fr-content-section-alpha__media { order: 2; }

.kamui-v2 .art-fr-content-section-alpha__inner:nth-of-type(odd)
  .art-fr-content-section-alpha__content-wrapper { padding-left: 3rem; }

.kamui-v2 .art-fr-content-section-alpha__media.brxe-image { height: 100%; }

.kamui-v2 .art-fr-content-section-alpha__media.brxe-image:not(.tag),
.kamui-v2 .art-fr-content-section-alpha__media.brxe-image img {
  object-fit: cover;
}

/* Die Vorlage laesst das Bild auf die Texthoehe wachsen. Bei kurzen
   Texten wird daraus ein schmaler Streifen, deshalb eine Untergrenze
   ueber das Seitenverhaeltnis. */
.kamui-v2 .art-fr-content-section-alpha__media.brxe-image img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  display: block;
}

.kamui-v2 .art-fr-content-section-alpha__content-wrapper.brxe-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: calc(var(--fr-content-gap, 2rem) * 0.25);
  padding: var(--space-l, 3rem) 3rem var(--space-l, 3rem) 0;
}

.kamui-v2 .art-fr-content-section-alpha__heading.brxe-heading {
  font-size: var(--h3, 1.6rem);
  text-transform: uppercase;
  width: 100%;
  margin: 0;
}

.kamui-v2 .art-fr-content-section-alpha__text.brxe-text {
  text-align: left;
  margin-top: var(--space-m, 1.5rem);
}

.kamui-v2 .art-fr-content-section-alpha__text p { margin: 0 0 1em; }
.kamui-v2 .art-fr-content-section-alpha__text p:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
  .kamui-v2 .art-fr-content-section-alpha__inner.brxe-container {
    grid-template-columns: var(--grid-1, 1fr);
    grid-gap: var(--content-gap, 1.5rem);
  }
  .kamui-v2 .art-fr-content-section-alpha__inner:nth-of-type(even)
    .art-fr-content-section-alpha__media { order: 0; }
  .kamui-v2 .art-fr-content-section-alpha__inner:nth-of-type(odd)
    .art-fr-content-section-alpha__content-wrapper { padding-left: 0; }
  .kamui-v2 .art-fr-content-section-alpha__content-wrapper.brxe-block {
    padding-right: 0;
    padding-left: 0;
  }
  .kamui-v2 .art-fr-content-section-alpha__media.brxe-image img {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
}

/* ── content-section-zulu: Augenbraue, grosse Aussage, zweite Spalte ── */

.kamui-v2 .content-section-zulu__content-wrapper.brxe-container {
  display: grid;
  grid-gap: 0 clamp(2rem, 5vw, 5rem);
  /* NICHT --grid-auto-2: das ist ein auto-fit mit einer Mindestbreite
     von rund 70 Prozent der halben Maximalbreite. Gemessen bei 1320px
     Spaltenbreite faellt es auf EINE Spalte zusammen, und die zweite
     Spalte landet unter der ersten. --grid-2 ist schlicht
     repeat(2, minmax(0,1fr)) und tut, was hier gebraucht wird. */
  grid-template-columns: var(--grid-2, repeat(2, minmax(0, 1fr)));
  align-content: center;
  align-items: start;
  /* Die Vorlage traegt hier drei Hintergrundbilder aus dem
     WordPress-Upload und 400px Polster nach unten. Beides gehoert zur
     Artison-Bebilderung, nicht zum Baustein. */
  background-image: none;
  padding-bottom: 0;
  height: auto;
}

.kamui-v2 .content-section-zulu__heading-wrapper.brxe-block {
  display: grid;
  row-gap: var(--content-gap, 1.25rem);
  width: 100%;
  /* RAHMENLOS: die Vorlage hatte hier border-left:1px solid #606060.
     Getrennt wird jetzt ueber Weissraum. */
  border-left: 0;
  padding-left: 0;
}

.kamui-v2 .content-section-zulu__heading.brxe-heading {
  text-transform: uppercase;
  font-size: var(--text-s, 0.8rem);
  letter-spacing: 2px;
  margin: 0;
}

.kamui-v2 .content-section-zulu__accent-heading.brxe-text-basic {
  text-transform: uppercase;
  line-height: 130%;
  font-size: clamp(28px, 3.4vw, 48px);
  margin: 0;
}

.kamui-v2 .content-section-zulu__main-text p {
  margin: 0 0 1em;
  max-width: 46ch;
}
.kamui-v2 .content-section-zulu__main-text p:last-child { margin-bottom: 0; }

.kamui-v2 .content-section-zulu__body-wrapper.brxe-block {
  row-gap: var(--content-gap, 1.25rem);
  /* Die zweite Spalte setzt oben auf der Hoehe der grossen Aussage an,
     nicht auf der Augenbraue. */
  padding-top: 0.5rem;
  /* Vorlage: 400px Mindesthoehe und ein Hintergrundbild aus dem Upload.
     Beides raus, der Block traegt hier Text. */
  background-image: none;
  min-height: 0;
  padding: 0 0 0 clamp(0rem, 2vw, 2rem);
}

@media (max-width: 900px) {
  .kamui-v2 .content-section-zulu__content-wrapper.brxe-container {
    grid-template-columns: 1fr;
    grid-gap: clamp(1.5rem, 4vw, 2.5rem) 0;
  }
  .kamui-v2 .content-section-zulu__body-wrapper.brxe-block { padding-left: 0; }
}

/* Das Zitat steht mittig und allein: keine zweite Spalte, kein Text. */
#kamui-zitat .content-section-zulu__content-wrapper.brxe-container {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
#kamui-zitat .content-section-zulu__heading-wrapper.brxe-block {
  justify-items: center;
  max-width: 44rem;
}
#kamui-zitat .content-section-zulu__accent-heading.brxe-text-basic {
  font-size: clamp(26px, 3.6vw, 46px);
}
#kamui-zitat .content-section-zulu__body-wrapper { display: none; }

/* Der Lernsatz genauso: eine Aussage, kein zweispaltiger Block. */
#kamui-lernen .content-section-zulu__content-wrapper.brxe-container {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

/* Die Nummer fuehrt, deshalb steht sie ueber der Ueberschrift und
   traegt keinen Abstand nach oben. */
.kamui-v2__marke--oben { margin: 0 0 0.65rem; }

/* Der Trennstrich des Themes braucht eine Hoehe, seine Regel liegt
   inline in den Seiten, auf denen er urspruenglich vorkam. */
.kamui-v2 .brxe-divider { width: 100%; }
.kamui-v2 .brxe-divider .line {
  display: block;
  width: 3.5rem;
  height: 1px;
  background: rgba(237, 225, 202, 0.28);
}

/* ══════════════════════════════════════════════════════════════════════
   12. DIE LETZTEN RAHMEN
   ══════════════════════════════════════════════════════════════════════

   Nach dem Umbau blieben ueber alle vier Seiten noch zwei Stellen mit
   echtem Rahmen. Gemessen am 25.08.:

     content-section-zulu__heading-wrapper   border-left 1px #606060
                                             auf der Haltungsseite, aus
                                             der Artison-Vorlage
     artison-cta__button                     Umriss auf allen vier Seiten

   Die vier DIV.line mit border-top bleiben: das sind die 56px breiten
   Trennstriche des Themes, Artisons eigenes Mittel. Ein Strich unter
   einer Ueberschrift ist kein Rahmen. */

.content-section-zulu__heading-wrapper.brxe-block {
  border-left: 0 !important;
  padding-left: 0 !important;
}

/* Ein Knopfbild fuer die ganze Seite: Flaeche statt Umriss, wie im Hero
   und auf den Angebotskarten. Vorher standen drei verschiedene
   Knopfformen nebeneinander. */
.artison-cta__button.brxe-button,
#brx-header a.art-header-button-scroll {
  border: 0 !important;
  background: var(--v2-creme) !important;
  color: var(--v2-tusche) !important;
  transition: opacity 0.3s ease;
}

.artison-cta__button.brxe-button:hover,
.artison-cta__button.brxe-button:focus-visible,
#brx-header a.art-header-button-scroll:hover,
#brx-header a.art-header-button-scroll:focus-visible {
  opacity: 0.82;
  background: var(--v2-creme) !important;
  color: var(--v2-tusche) !important;
}

/* Die Haarlinie unter dem Kopf ist genau so ein Uebergang mit Rahmen.
   Der Kopf setzt sich ohnehin durch seinen Verlauf ab. */
.fr-header-alpha.brxe-section { border-bottom: 0 !important; }

/* Der KONTAKT-Knopf im Kopf traegt auf den Unterseiten eine andere
   Klasse als auf der Startseite. Ueber die Lage im Kopf erwischt man
   beide. Die Unterstriche der Menuepunkte bleiben: die sind
   Rueckmeldung auf Bewegung, kein Rahmen. */
#brx-header a.bricks-button,
#brx-header a.btn--outline {
  border: 0 !important;
  background: var(--v2-creme) !important;
  color: var(--v2-tusche) !important;
  transition: opacity 0.3s ease;
}
#brx-header a.bricks-button:hover,
#brx-header a.btn--outline:hover { opacity: 0.82; }

/* Nachgemessen: der KONTAKT-Eintrag im Kopf ist ein <a> GANZ OHNE
   Klasse, erzeugt von onepager.js in einem .bricks-menu-item. Die
   Klassenselektoren oben greifen dort nicht. Ueber das Datenattribut
   schon, und das traegt nur dieser eine Eintrag. */
#brx-header .bricks-menu-item a[data-kamui-kontakt],
#brx-header a[data-kamui-kontakt] {
  border: 0 !important;
  background: var(--v2-creme) !important;
  color: var(--v2-tusche) !important;
  padding: 10px 22px !important;
  transition: opacity 0.3s ease;
}
#brx-header a[data-kamui-kontakt]:hover { opacity: 0.82; }

/* Die Haarlinie unter dem Kopf, mit der Spezifitaet des Themes. */
header#brx-header .fr-header-alpha.brxe-section,
#brx-header > .fr-header-alpha,
.fr-header-alpha { border-bottom: 0 !important; }

/* Der Unterstrich am AKTIVEN Menuepunkt bleibt, in Creme statt im
   Theme-Grau. Die dritte Farbe soll es auf dieser Seite nicht geben.

   NACHGEMESSEN UND KORRIGIERT: der erste Anlauf faerbte den Unterstrich
   an JEDEM Menuepunkt um. Die inaktiven tragen im Theme 2px in
   durchsichtig; sobald man ihnen eine Farbe gibt, stehen sie alle
   unterstrichen da. Deshalb hier nur der aktive Eintrag und der
   Mauszeiger. */
#brx-header .bricks-menu-item.current-menu-item > a,
#brx-header .bricks-menu-item.current-menu-ancestor > a,
#brx-header .bricks-menu-item[aria-current] > a,
#brx-header .bricks-menu-item > a[aria-current],
#brx-header .bricks-menu-item > a:hover,
#brx-header .brx-submenu-toggle:hover {
  border-bottom-color: var(--v2-creme) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   13. EIN KNOPFBILD FUER DIE GANZE SEITE
   ══════════════════════════════════════════════════════════════════════

   Franky, 25.08.: "Der Kontakt Button soll wieder aussehen wie vorher
   und alle anderen Buttons auch so durchsichtig wie der Kontakt Button."

   Damit ist die Fuellung von vorhin zurueckgedreht. Vorlage ist der
   KONTAKT-Knopf im Kopf, gemessen auf artison-atelier.com:

     Grund     durchsichtig
     Umriss    1px
     Polster   13.5px / 27px
     Schrift   gesperrt, Versalien

   Der Umriss ist kein Rahmen im Sinne der rahmenlosen Uebergaenge: er
   ist die Form des Knopfes. Ohne ihn waere nicht erkennbar, dass da
   etwas zum Klicken steht.

   Diese Regel steht am Ende der Datei und schlaegt damit alle frueheren
   Knopfregeln weiter oben. */

.kamui-hero__knopf,
#kamui-referenzen .kamui-v2__karte-knopf,
.artison-cta__button.brxe-button,
#brx-header a[data-kamui-kontakt],
#brx-header .bricks-menu-item a[data-kamui-kontakt],
#brx-header a.bricks-button,
#brx-header a.btn--outline {
  background: transparent !important;
  border: 1px solid rgba(237, 225, 202, 0.45) !important;
  color: var(--v2-creme) !important;
  border-radius: 0 !important;
  font-family: "Lato", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  box-shadow: none !important;
  opacity: 1 !important;
}

.kamui-hero__knopf:hover,
.kamui-hero__knopf:focus-visible,
#kamui-referenzen .kamui-v2__karte-knopf:hover,
#kamui-referenzen .kamui-v2__karte-knopf:focus-visible,
.artison-cta__button.brxe-button:hover,
.artison-cta__button.brxe-button:focus-visible,
#brx-header a[data-kamui-kontakt]:hover,
#brx-header a[data-kamui-kontakt]:focus-visible,
#brx-header a.bricks-button:hover,
#brx-header a.btn--outline:hover {
  background: var(--v2-creme) !important;
  border-color: var(--v2-creme) !important;
  color: var(--v2-tusche) !important;
}

/* Masse je Ort: im Kopf kompakt, im Fluss der Seite grosszuegiger. */
.kamui-hero__knopf,
.artison-cta__button.brxe-button { padding: 13.5px 27px !important; font-size: 13px; }
#kamui-referenzen .kamui-v2__karte-knopf { padding: 13px 20px !important; font-size: 12px; }
#brx-header a[data-kamui-kontakt] { padding: 10px 22px !important; font-size: 12px; }

/* Der Absendeknopf steht als einziger auf cremefarbenem Grund, also
   dieselbe Form in Tusche. */
.kamui-kontakt-formular .kamui-kontakt-senden {
  background: transparent !important;
  border: 1px solid rgba(22, 27, 25, 0.5) !important;
  color: var(--v2-tusche) !important;
}

.kamui-kontakt-formular .kamui-kontakt-senden:hover,
.kamui-kontakt-formular .kamui-kontakt-senden:focus-visible {
  background: var(--v2-tusche) !important;
  border-color: var(--v2-tusche) !important;
  color: var(--v2-creme) !important;
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════
   14. SCHRIFTZUG IM KOPF, 20 PROZENT KLEINER
   ══════════════════════════════════════════════════════════════════════

   Stand war 1.875rem (30px sichtbar), gesetzt in kopfzeile.css.
   Minus 20 Prozent: 1.875 * 0.8 = 1.5rem, also 24px.
   Das Signet bleibt bei 40px, der Abstand der beiden waechst dadurch. */

.kopf-steuerung-aktiv #brx-header .fr-header-alpha__logo img.kopf-wortmarke,
.kopf-steuerung-aktiv #brx-header.scrolling .fr-header-alpha__logo img.kopf-wortmarke,
.kopf-steuerung-aktiv #brx-header.sticky .fr-header-alpha__logo img.kopf-wortmarke {
  height: 1.5rem !important;
  max-height: 1.5rem !important;
  width: auto !important;
}

/* Fusszeilen-Logo kleiner (Franky, 25.08.). Es stand auf 190px Breite
   und war damit der groesste Einzelgegenstand im Fuss. 118px bringt es
   auf die Hoehe der drei Linkspalten daneben. */
.kamui-fuss__logo { max-width: 118px !important; }
@media (max-width: 991px) { .kamui-fuss__logo { max-width: 100px !important; } }

/* Franky, 25.08.: das Tor-Motiv (kamui-sicherheit.jpg) kann raus. Es ist
   das zweite Parallax-Band der Ablauf-Seite, Sektion #brxe-mgqzkk, und
   traegt keinen Text. Ausgeblendet statt geloescht: die Sektion kommt
   aus dem Bricks-Export, ein spaeterer Export wuerde sie wieder
   mitbringen. Als Regel bleibt sie weg. */
#brxe-mgqzkk,
#brxe-mgqzkk.bricks-lazy-hidden { display: none !important; }

/* Franky, 25.08.: das Kachelraster mit den drei Angebotsnamen kann raus.
   Es steht auf der Angebotsseite (#brxe-qktalh, .fr-article-section-charlie)
   und zeigt sechs Bilder, von denen nur drei beschriftet sind. Die drei
   Zuschnitte stehen darunter ohnehin ausfuehrlich. */
.fr-article-section-charlie,
.fr-article-section-charlie.bricks-lazy-hidden { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   15. DER KNOPF, EXAKT AUS ARTISON
   ══════════════════════════════════════════════════════════════════════

   Franky, 25.08.: "den Kontakt Button wieder aus Artison exakt clonen
   und den als Default nehmen fuer alle Buttons, der sitzt noch nicht
   richtig."

   Er sass tatsaechlich nicht richtig. Ausgemessen auf
   artison-atelier.com (nur gelesen), KONTAKT im Kopf:

     Kasten        140 x 42 px
     Schrift       "Nunito Sans", 18px, Gewicht 400
     Sperrung      1.5px
     Zeilenhoehe   40px
     Versalien     ja
     Polster       0 6.75px
     Umriss        1px solid
     ECKENRADIUS   5px          <- das hatte ich uebersehen
     Grund         durchsichtig
     Uebergang     0.5s

   Ich hatte vorher Lato 700, 13px, 0.14em Sperrung und scharfe Ecken.
   Das ist eine andere Schrift, ein anderes Gewicht, ein Drittel der
   Groesse und ein anderer Umriss gewesen.

   DAZU DIE BEWEGUNG, die ich vorher gar nicht hatte: Artison faehrt
   beim Ueberfahren keinen Farbwechsel, sondern einen diagonalen Wisch
   ueber ein ::before. Die Regeln im Original:

     .brxe-button          position:relative; overflow:hidden; transition:.5s
     .brxe-button::before  content:""; position:absolute; top:-100%;
                           right:100%; width:200%; height:200%;
                           background:linear-gradient(0deg,transparent,
                             transparent 30%,var(--primary));
                           transform:rotate(-45deg); transition:1s; opacity:0
     :hover::before        opacity:1; right:-100%;
                           transform:rotate(-45deg) translateY(75%)

   Uebernommen ist alles ausser der Farbe: Artison setzt Grau auf
   Dunkel, Kamui setzt Creme. */

.kamui-hero__knopf,
#kamui-referenzen .kamui-v2__karte-knopf,
.artison-cta__button.brxe-button,
#brx-header a[data-kamui-kontakt],
#brx-header .bricks-menu-item a[data-kamui-kontakt],
.kamui-kontakt-formular .kamui-kontakt-senden {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Nunito Sans", system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  line-height: 40px !important;
  text-transform: uppercase !important;
  text-decoration: none;
  padding: 0 27px !important;
  background: transparent !important;
  border: 1px solid rgba(237, 225, 202, 0.55) !important;
  border-radius: 5px !important;
  color: var(--v2-creme) !important;
  transition: 0.5s !important;
  box-shadow: none !important;
  opacity: 1 !important;
  width: auto;
}

/* Der Wisch. background-clip:padding-box haelt ihn innerhalb des
   Umrisses, sonst laeuft der Verlauf ueber die Kante. */
.kamui-hero__knopf::before,
#kamui-referenzen .kamui-v2__karte-knopf::before,
.artison-cta__button.brxe-button::before,
#brx-header a[data-kamui-kontakt]::before,
.kamui-kontakt-formular .kamui-kontakt-senden::before {
  content: "";
  position: absolute;
  top: -100%;
  right: 100%;
  width: 200%;
  height: 200%;
  background: linear-gradient(0deg, transparent, transparent 30%,
                              rgba(237, 225, 202, 0.9));
  transform: rotate(-45deg);
  transition: 1s;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.kamui-hero__knopf:hover::before,
.kamui-hero__knopf:focus-visible::before,
#kamui-referenzen .kamui-v2__karte-knopf:hover::before,
.artison-cta__button.brxe-button:hover::before,
#brx-header a[data-kamui-kontakt]:hover::before,
.kamui-kontakt-formular .kamui-kontakt-senden:hover::before {
  opacity: 1;
  right: -100%;
  transform: rotate(-45deg) translateY(75%);
}

/* Beim Wisch wird der Grund hell, also muss die Schrift mitwandern.
   Sie liegt ueber dem ::before, sonst waere sie darunter. */
.kamui-hero__knopf > *,
.artison-cta__button.brxe-button > *,
.kamui-kontakt-formular .kamui-kontakt-senden > * { position: relative; z-index: 1; }

.kamui-hero__knopf:hover,
.kamui-hero__knopf:focus-visible,
#kamui-referenzen .kamui-v2__karte-knopf:hover,
.artison-cta__button.brxe-button:hover,
#brx-header a[data-kamui-kontakt]:hover,
.kamui-kontakt-formular .kamui-kontakt-senden:hover {
  color: var(--v2-tusche) !important;
  border-color: var(--v2-creme) !important;
  background: transparent !important;
}

/* Im Kopf sitzt der Knopf kompakter, wie im Original. */
#brx-header a[data-kamui-kontakt] {
  font-size: 16px !important;
  padding: 0 20px !important;
  line-height: 36px !important;
}

/* Auf den Angebotskarten laeuft er ueber die volle Kartenbreite. */
#kamui-referenzen .kamui-v2__karte-knopf {
  display: flex;
  width: 100%;
  font-size: 15px !important;
  padding: 0 20px !important;
  line-height: 40px !important;
}

/* Der Absendeknopf steht auf cremefarbenem Grund, also Tusche. */
.kamui-kontakt-formular .kamui-kontakt-senden {
  border-color: rgba(22, 27, 25, 0.55) !important;
  color: var(--v2-tusche) !important;
}
.kamui-kontakt-formular .kamui-kontakt-senden::before {
  background: linear-gradient(0deg, transparent, transparent 30%,
                              rgba(22, 27, 25, 0.9));
}
.kamui-kontakt-formular .kamui-kontakt-senden:hover {
  color: var(--v2-creme) !important;
  border-color: var(--v2-tusche) !important;
}

/* Fusszeilen-Logo zurueck auf die alte Groesse (Franky, 25.08.).
   Betrifft NUR den Fuss. Der Schriftzug in der Navigation bleibt bei
   1.5rem, also 20 Prozent kleiner, das ist ein anderes Element
   (img.kopf-wortmarke). */
.kamui-fuss__logo { max-width: 190px !important; }
@media (max-width: 991px) { .kamui-fuss__logo { max-width: 150px !important; } }

/* ══════════════════════════════════════════════════════════════════════
   16. DAS FORMULAR AUF DER KONTAKTSEITE
   ══════════════════════════════════════════════════════════════════════

   Franky, 25.08.: "Kontakt Formular darf nur die eine extra Seite sein."
   Das Fenster ist raus, es zaehlt nur noch das Formular auf p=24.

   Das ist das native Artison-Formular (.brxe-form), nicht das selbst
   gebaute. Die Regeln oben greifen ueber .kamui-kontakt-formular und
   damit hier nicht. Deshalb dieselben Masse noch einmal fuer
   .brxe-form: das Formular soll auf beiden Wegen gleich aussehen.

   Dieses hier steht auf DUNKLEM Grund, das Fenster stand auf Creme.
   Also Creme auf Tusche. */

.brxe-form .form-group { margin-bottom: 27px; }

.brxe-form label {
  display: block;
  font-family: "Lato", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.4px;
  text-transform: none;
  color: rgba(237, 225, 202, 0.72);
  margin-bottom: 8px;
}

.brxe-form label.required::after {
  content: "*";
  vertical-align: super;
  font-size: 0.7em;
  margin-left: 2px;
  color: rgba(237, 225, 202, 0.5);
}

.brxe-form input[type="text"],
.brxe-form input[type="email"],
.brxe-form input[type="tel"],
.brxe-form select,
.brxe-form textarea {
  width: 100%;
  padding: 10px 0 !important;
  font-family: "Lato", system-ui, sans-serif;
  font-size: 20px;
  color: var(--v2-creme) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(237, 225, 202, 0.35) !important;
  border-radius: 0 !important;
  transition: border-color 0.25s ease;
  appearance: none;
}

.brxe-form input:focus,
.brxe-form select:focus,
.brxe-form textarea:focus {
  outline: none;
  border-bottom-color: var(--v2-creme) !important;
}

/* ── Der doppelte Kasten bei der Datenschutzerklaerung ────────────────

   Gemessen: das Kaestchen steht auf appearance:none mit 1px Umriss,
   also EIN Kasten. Der zweite kommt aus einem Pseudoelement des Themes,
   das denselben Rahmen noch einmal zeichnet. Es wird hier stillgelegt
   und durch einen einzelnen Haken ersetzt. */
.brxe-form .options-wrapper input[type="checkbox"] {
  appearance: none !important;
  flex: 0 0 auto;
  width: 22px !important;
  height: 22px !important;
  margin: 1px 12px 0 0 !important;
  border: 1px solid rgba(237, 225, 202, 0.45) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
  cursor: pointer;
}

.brxe-form .options-wrapper input[type="checkbox"]::before {
  content: none !important;
}

.brxe-form .options-wrapper input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid var(--v2-creme);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease;
}

.brxe-form .options-wrapper input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}

.brxe-form .options-wrapper li {
  display: flex;
  align-items: flex-start;
  list-style: none;
}

.brxe-form .options-wrapper { list-style: none; margin: 0; padding: 0; }

.brxe-form .options-wrapper label {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
}

/* Die Spamfalle von Artison bleibt technisch da, aber unsichtbar. */
.brxe-form input[tabindex="-1"] { position: absolute !important; left: -9999px !important; }
.brxe-form .form-group:has(> input[tabindex="-1"]) {
  position: absolute !important;
  left: -9999px !important;
}

/* Der doppelte Kasten, zweiter Anlauf.

   Gemessen: das <input> selbst traegt genau EINEN Umriss und steht auf
   appearance:none. Der zweite Kasten kommt also von aussen, aus dem
   <li> oder dem <label> daneben. Beide bekommen hier ausdruecklich
   keinen Rahmen und keine Pseudokaesten mehr, und das Kaestchen selbst
   wird auf eine feste Groesse gezwungen. */
.brxe-form .options-wrapper li,
.brxe-form .options-wrapper label,
.brxe-form .options-wrapper li::before,
.brxe-form .options-wrapper li::after,
.brxe-form .options-wrapper label::before,
.brxe-form .options-wrapper label::after {
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
  outline: none !important;
}
.brxe-form .options-wrapper li::before,
.brxe-form .options-wrapper li::after,
.brxe-form .options-wrapper label::before,
.brxe-form .options-wrapper label::after { content: none !important; }

.brxe-form .options-wrapper input[type="checkbox"],
.brxe-form input[type="checkbox"] {
  min-width: 22px !important;
  max-width: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  flex: 0 0 22px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   17. DIE PRODUKTSEITEN, ABSTAENDE UND SATZ
   ══════════════════════════════════════════════════════════════════════

   Franky, 25.08.: "so darf es auf keiner der 3 Seiten aussehen, die
   Schrift ist abgeschnitten."

   URSACHE: die Regel `.kamui-v2 + .kamui-v2 { padding-top: 0 }` weiter
   oben. Sie ist fuer zwei aufeinanderfolgende Textsektionen gedacht,
   damit dazwischen nicht doppelt gepolstert wird. Auf den Produktseiten
   folgt aber direkt auf den Bildblock der Block "Was eingerichtet wird",
   und dessen Augenbraue stand dadurch ohne jeden Abstand an der Kante
   der Sektion darueber. Sie sah abgeschnitten aus, weil sie es an der
   Sektionsgrenze auch war.

   Dazu kam ein zweiter Fehler: die zweite Spalte war oben ausgerichtet,
   die erste stand mittig. Zwischen Ueberschrift und Liste klaffte
   dadurch eine Leerflaeche ueber die halbe Sektionshoehe. */

#kamui-produkt-inhalt.kamui-v2 {
  padding-top: clamp(3.25rem, 6.25vw, 5.625rem) !important;
}

/* Beide Spalten oben buendig, damit Ueberschrift und Liste auf einer
   Linie beginnen. */
#kamui-produkt-inhalt .content-section-zulu__content-wrapper.brxe-container {
  align-items: start;
  align-content: start;
}

/* Die Ueberschrift braucht unten Luft fuer Unterlaengen. 130 Prozent
   Zeilenhoehe reichen bei 48px Versalien nicht, sobald ein g oder p
   dabei ist. */
#kamui-produkt-inhalt .content-section-zulu__accent-heading.brxe-text-basic,
.kamui-v2 .content-section-zulu__accent-heading.brxe-text-basic {
  line-height: 1.22 !important;
  padding-bottom: 0.12em;
  overflow: visible;
}

/* Ohne Fliesstext in der linken Spalte steht die Ueberschrift allein.
   Dann darf die Liste rechts nicht tiefer anfangen als sie. */
#kamui-produkt-inhalt .content-section-zulu__body-wrapper.brxe-block {
  padding-top: 0;
}

#kamui-produkt-inhalt .kamui-v2__liste li { margin-bottom: 1.1rem; }

/* ══════════════════════════════════════════════════════════════════════
   18. HALTUNG UND ABSTAENDE AUF UNSER TEAM
   ══════════════════════════════════════════════════════════════════════

   Franky, 25.08.: Text anders platzieren, Bild daneben weg, Abstaende
   deutlich verringern.

   Die Sektion war zweispaltig, links Text, rechts das Motiv
   kamui-complexity.jpg. Ohne Bild bliebe eine leere Spalte stehen,
   deshalb eine Spalte und der Text mittig gesetzt, wie ein Vorwort. */

.kamui-haltung img { display: none !important; }

.kamui-haltung {
  padding-top: clamp(2rem, 3.5vw, 3.25rem) !important;
  padding-bottom: clamp(2rem, 3.5vw, 3.25rem) !important;
}

.kamui-haltung .brxe-container {
  display: block !important;
  grid-template-columns: 1fr !important;
  max-width: 1280px;
  margin: 0 auto;
}

.kamui-haltung .brxe-text,
.kamui-haltung .brxe-text-basic,
.kamui-haltung p {
  max-width: 62ch;
  margin-left: 0;
  font-size: 1.125rem;
  line-height: 1.7;
}

/* Die Bloecke auf Unser Team ruecken zusammen. Zwischen Auftakt, Haltung
   und "Wer dahintersteckt" standen dreimal 90px, das liest sich wie drei
   getrennte Seiten statt wie eine. */
#kamui-menschen-auftakt.kamui-v2 {
  padding-top: clamp(2rem, 3.5vw, 3.25rem) !important;
  padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem) !important;
}

#kamui-menschen.kamui-v2 {
  padding-top: 0 !important;
  padding-bottom: clamp(2rem, 3.5vw, 3.25rem) !important;
}

/* Die Portraits sind hochformatig, die Flaechenbilder waren quadratisch.
   Ohne Obergrenze wuerde ein Portrait die Zeile ueberhoehen. */
#kamui-menschen .art-fr-content-section-alpha__media.brxe-image img {
  min-height: 0;
  max-height: 460px;
  object-position: center top;
}

#kamui-menschen .art-fr-content-section-alpha__inner.brxe-container {
  align-items: center;
}

/* ── Der Leerraum nach einem Parallax-Band ────────────────────────────
   Franky, 25.08., zur Ablauf-Seite: "auch diesen Abstand verringern."
   Gemessen: das Band traegt 90px eigenes Polster, die Sektion danach
   noch einmal 90px, und der Theme-Block dazwischen bringt seine eigene
   Hoehe mit. Zusammen ueber 300px Leere. */
.parallax-block + section,
.parallax-block + div > section,
section.jarallax + section {
  padding-top: clamp(2rem, 3.5vw, 3.25rem) !important;
}

.parallax-block, section.jarallax { padding-bottom: 0 !important; }

/* Nachgemessen: zwischen Haltungstext und "Wer dahintersteckt" standen
   trotz gekuerzter Sektionspolster noch rund 290px. Der Rest kam aus
   dem inneren Container der Theme-Sektion, der eigene Raender
   mitbringt. */
.kamui-haltung .brxe-container,
.kamui-haltung .brxe-block,
.kamui-haltung .brxe-text {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  row-gap: 0 !important;
}
.kamui-haltung p:last-child { margin-bottom: 0 !important; }

/* Die Sektion war 243px hoch, der Text darin nur rund 110px. Der Rest
   war Leerraum aus einer Mindesthoehe des Theme-Containers. */
.kamui-haltung,
.kamui-haltung .brxe-container,
.kamui-haltung .brxe-block {
  height: auto !important;
  min-height: 0 !important;
  align-items: start !important;
  align-content: start !important;
}

/* Zwischen Haltungssektion und "Wer dahintersteckt" lagen nach dem
   Kuerzen noch 91px, die weder aus der einen noch aus der anderen
   Sektion kamen: sie stecken im Zwischenraum des Theme-Aufbaus. Der
   Auftakt holt sie ueber einen negativen Rand zurueck. */
#kamui-menschen-auftakt.kamui-v2 {
  margin-top: -91px;
  padding-top: clamp(1rem, 2vw, 1.75rem) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   19. KOEPFE, ABSTAENDE, HALTUNGSBLOCK
   ══════════════════════════════════════════════════════════════════════

   Franky, 25.08.: "die koepfe duerfen nicht abgeschnitten werden!"

   URSACHE, gemessen auf Unser Team bei 1440px:

       kamui-team-gruender.jpg   798 x 1200   Kasten 660 x 460
       kamui-team-dolunay.jpg    800 x 1004   Kasten 660 x 460
       kamui-team-yasmin.jpg     400 x  400   Kasten 660 x 460

   Hochformat in einem Querformat-Kasten, object-fit: cover. Frank
   wurde auf 660 breit skaliert, also 992px hoch, sichtbar waren
   davon 460. Bei mittiger Lage faellt oben und unten je ein Viertel
   weg - und oben sitzt der Kopf. Vom Gruender stand nur noch der
   Bart im Bild.

   Es gab bereits `object-position: center top` fuer #kamui-menschen.
   Sie kam nie an: flaechen.css setzt

       img[src*="/flaechen/"] { object-position: center !important }

   als Auffangregel fuer verzerrte Theme-Bilder. Ein !important
   schlaegt jede Spezifitaet, also braucht die Ausnahme selbst eins.

   Dazu ein hoeherer Kasten: 560 statt 460. Bei 660 Breite ist das
   1.18:1 statt 1.43:1, also naeher am Hochformat der Vorlagen. Frank
   zeigt damit 56 statt 46 Prozent seiner Bildhoehe. */
/* Franky, 25.08.: "der Kopf von Frank Sticht ist immer noch
   abgeschnitten, zoom das Bild weiter raus, sodass der Kopf kleiner
   wird und das Gesicht nicht abgeschnitten."

   Mit `object-fit: cover` laesst sich nicht herauszoomen: der Kasten
   wird immer gefuellt, es geht nur, wie viel abfaellt. Die Vorlage
   selbst ist zu eng: 798x1200, das Haar beruehrt die obere Kante, die
   rechte Wange steht auf der rechten Kante. Was der Kasten abschnitt,
   war teils schon im Bild abgeschnitten.

   Herauszoomen heisst hier also: dem Bild Luft geben. Aus der Vorlage
   entstand `kamui-team-gruender-luft.jpg`, 1440x1200 im Format 6:5,
   das Motiv auf 88 Prozent mit 72px Kopffreiheit. Der Grund kommt aus
   den Randfarben der Aufnahme selbst - sie sind nahezu einfarbig, die
   Streuung liegt bei 2 bis 9 von 255 - und die Kante des Motivs
   laeuft ueber 110px weich aus. Der Kopf nimmt jetzt 49 statt 100
   Prozent der Bildbreite ein.

   Der Kasten steht auf demselben Format 6:5. Damit schneidet cover an
   dieser Aufnahme ueberhaupt nichts mehr ab, auf keiner Breite. Die
   Ausnahme fuer schmale Geraete faellt deshalb weg: sie stellte den
   Kasten auf 4:5 und haette das Bild dort wieder beschnitten. */
#kamui-menschen .art-fr-content-section-alpha__media.brxe-image img,
#kamui-menschen img[src*="/flaechen/"] {
  object-position: center top !important;
  aspect-ratio: 6 / 5 !important;
  height: auto !important;
  max-height: none !important;
}

/* ── Der Alltag: die Pointe stand auf der Sektionskante ──────────────

   Franky, 25.08.: "Der Alltag ist bisschen zu krass abgeschnitten,
   bisschen mehr Abstand nach unten."

   Gemessen: Sektion brxe-onyxxw, padding-top 67.5px, padding-bottom
   0px, und der Text ragte 18px UNTER die Sektionskante. Direkt
   darunter faengt das Plateau-Band an, also lief "Aufgeschrieben ist
   nichts." in das Bild hinein.

   Das Null-Polster kam aus Punkt 18:

       .parallax-block, section.jarallax { padding-bottom: 0 !important }

   Die Regel war fuer die reinen Bildbaender gedacht. Der Alltag ist
   aber auch eine jarallax-Sektion - sie traegt ihr eigenes Motiv im
   Hintergrund - und hat Text darin. Sie wird ausgenommen.

   90px, derselbe Rhythmus wie die uebrigen Sektionen. */
#brxe-onyxxw.jarallax {
  padding-bottom: clamp(3.25rem, 6.25vw, 5.625rem) !important;
}

/* Der Ueberhang selbst: der innere Container brachte einen eigenen
   unteren Rand mit, der ueber die Sektion hinauslief. */
#brxe-onyxxw .art-text-container,
#brxe-onyxxw .art-home-sign-container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ── Der Haltungsblock steht jetzt im zulu-Baustein ──────────────────

   Die Regeln unter .kamui-haltung in Punkt 18 galten der alten
   Theme-Sektion brxe-rfdykw. Die ist weg, der Text laeuft in
   #kamui-haltung-auftakt. Was bleibt, ist der Abstand zwischen den
   beiden Auftakten: sie gehoeren zusammen und polstern deshalb
   nicht zweimal voll. */
#kamui-haltung-auftakt.kamui-v2 {
  padding-top: clamp(2.5rem, 4.5vw, 4rem) !important;
  padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem) !important;
}

/* Punkt 18 holte 91px zurueck, die im Zwischenraum der Theme-Sektion
   steckten. Die Theme-Sektion gibt es nicht mehr, der negative Rand
   wuerde jetzt den Haltungsblock ueberlappen. */
#kamui-menschen-auftakt.kamui-v2 {
  margin-top: 0 !important;
  padding-top: clamp(1.5rem, 2.5vw, 2.25rem) !important;
}

/* ── Unsere Haltung steht mittig ─────────────────────────────────────

   Franky, 25.08.: "Das muss mittig sein." Und: "Es ist zu klein zu
   lesen, man muss lesen, es ist zu anstrengend, es muss groesser
   sein." Und: "Das koennte man kuerzer formulieren, es ist zu viel
   Text. Groesser, weniger."

   GEMESSEN VORHER, 1440x900:

       Raster        624px 624px     zweite Spalte leer, 0px hoch
       Absatz        480px breit     18px, linksbuendig
       Text          61 Woerter

   Der zulu-Baustein ist zweispaltig: links Augenbraue, Aussage und
   Text, rechts ein Koerper. Der Haltungsblock hat keinen Koerper.
   Dadurch stand sein Text auf 480px, also auf 38 Prozent der Sektion,
   und daneben war die halbe Seite leer. Der Text wirkte nicht klein,
   weil die Schrift klein war, sondern weil die Spalte schmal war und
   ihn in acht kurze Zeilen brach.

   Deshalb dieselbe Bauart wie #kamui-zitat: eine Spalte, mittig. Die
   Schrift waechst mit, weil sie jetzt Platz dafuer hat. Gekuerzt wird
   in v2-baulig.js, dort steht der Text.

   ZEILENLAENGE, der Grund fuer die 36rem: mittiger Satz braucht
   kuerzere Zeilen als linksbuendiger. Bei linksbuendigem Text findet
   das Auge den naechsten Zeilenanfang immer an derselben Stelle, bei
   mittigem wandert er. 36rem bei 21px sind rund 58 Zeichen, das obere
   Ende dessen, was mittig noch ruhig laeuft. */
#kamui-haltung-auftakt .content-section-zulu__content-wrapper.brxe-container {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

#kamui-haltung-auftakt .content-section-zulu__heading-wrapper.brxe-block {
  justify-items: center;
  max-width: 46rem;
}

/* Die leere zweite Spalte trug 0px Hoehe, aber ihre eigene Zeile im
   Raster. Sie geht ganz weg, sonst bleibt darunter ein Abstand ohne
   Inhalt. */
#kamui-haltung-auftakt .content-section-zulu__body-wrapper { display: none; }

#kamui-haltung-auftakt .content-section-zulu__main-text p {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1.125rem, 1.45vw, 1.3125rem);
  line-height: 1.62;
}

/* ── Der zulu-Baustein hatte nie Polster nach unten ──────────────────

   Gemessen ueber alle vier Seiten: jeder Block im zulu-Baustein steht
   auf padding-bottom 0. Die Quelle ist die Theme-Regel

       .content-section-zulu.brxe-section { padding-bottom: 0 }

   Sie hat zwei Klassen, .kamui-v2 aus Punkt 3 nur eine, also gewinnt
   das Theme. Bei Artison faellt das nicht auf: dort traegt der Block
   ein Hintergrundbild, das unten buendig sitzt und den Rand selbst
   bildet. Diese Bilder sind hier abgeschaltet (Punkt 12), also stand
   der letzte Satz direkt auf der Sektionskante.

   Sichtbar wurde es am Ende von Ablauf und Angebot: dort folgt der
   Abschlussblock mit eigenem, dunklerem Grund, und der letzte
   Listenpunkt lag 40px vor dem Farbwechsel.

   Zwei Klassen gegen zwei Klassen, plus die ID-Regeln oben, die
   weiterhin gewinnen. */
.kamui-v2.content-section-zulu.brxe-section {
  padding-bottom: clamp(3.25rem, 6.25vw, 5.625rem);
}

/* ── Die zwei Auswahlfelder im Kontaktformular ───────────────────────

   V2-AENDERUNGEN.md, Nachtrag 5, Punkt 2. Die Felder erben Schrift,
   Linie und Masse aus Punkt 16. Was dort fehlte, ist der Pfeil:
   `appearance: none` nimmt dem Auswahlfeld auch die eigene Marke, und
   ohne sie sieht es aus wie ein Textfeld, in das man tippen soll.

   Als Bild statt als Pseudoelement, weil ein <select> keine
   Kindelemente zeichnen darf. */
.brxe-form select {
  background-image:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5' fill='none' stroke='%23EDE1CA' stroke-opacity='.6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 2px center !important;
  background-size: 16px !important;
  padding-right: 26px !important;
  cursor: pointer;
}

/* Solange nichts gewaehlt ist, steht "Bitte waehlen" da. Es ist eine
   Aufforderung, keine Antwort, und liest sich deshalb wie ein
   Platzhalter. */
.brxe-form select:invalid { color: rgba(237, 225, 202, 0.45) !important; }

/* Die Liste selbst zeichnet das Betriebssystem. Ohne eigene Farbe
   stuende creme auf creme. */
.brxe-form select option { color: #161b19; background: #ede1ca; }

/* Auf schmalen Geraeten stellt Punkt 4 alle Alpha-Bilder auf 4:3. Fuer
   Flaechenmotive stimmt das, fuer ein Portrait nicht: bei 390px Breite
   wird aus 798x1200 ein Streifen von 348x261, und selbst oben
   ausgerichtet fehlte Frank das Haar. Portraits bekommen deshalb ein
   Hochformat, 4:5. Damit sind 83 statt 50 Prozent der Bildhoehe
   sichtbar. */


/* ══════════════════════════════════════════════════════════════════════
   20. DER DANKE-ZUSTAND AUF DER KONTAKTSEITE
   ══════════════════════════════════════════════════════════════════════

   Die Regeln in Punkt 8 galten dem Kontaktfenster. Das stand auf
   Creme, deshalb Tusche als Schrift. Auf p=24 ist der Grund Tusche:
   dort stand Tusche auf Tusche und nur die Ueberschrift war zu lesen.
   Derselbe Fehler wie beim Bruecksatz im Alltag, nur andersherum.

   Und: der Kasten bekommt beim Absenden den Fokus, damit Vorleser den
   neuen Text ansagen. Der Browser zeichnet dafuer seinen eigenen
   2px-Rahmen. Bei "ueberall rahmenlose Uebergaenge" ist das der
   einzige sichtbare Rahmen der ganzen Seite gewesen. Der Fokus bleibt,
   der Rahmen geht: sichtbar ist der Kasten ohnehin, er ersetzt gerade
   das Formular. */
#brx-content .kamui-kontakt-danke { outline: none !important; }

#brx-content .kamui-kontakt-danke h3 { color: var(--v2-creme); }

#brx-content .kamui-kontakt-danke p {
  color: rgba(237, 225, 202, 0.78);
}

#brx-content .kamui-kontakt-danke .kamui-kontakt-danke-still {
  color: rgba(237, 225, 202, 0.55);
}

/* ══════════════════════════════════════════════════════════════════════
   21. DIE KNOEPFE IN GOLD, DIE SCHRIFT SPRINGT INS WEISS
   ══════════════════════════════════════════════════════════════════════

   Zwei Punkte aus der Sprachnachricht vom 25.08., die zusammengehoeren.

   **Der Wisch.** "Die Animation ist perfekt. Es muss sich aendern, aber
   so, dass man sieht." Bis eben wurde die Schrift beim Ueberfahren
   TUSCHE, also schwarz: der Wisch fuellt den Knopf mit Creme, und auf
   Creme ist Creme nicht lesbar, also musste die Schrift dunkel werden.
   Franky: "Es darf nicht schwarz werden. (...) dass es aus dem Creme in
   weiss springt."

   **Die Farbe.** "Die Call to Action wuerde ich vielleicht in Gold
   machen." - "In dem Creme?" - "Ne, in einem anderen Ton."

   Beide Punkte fallen an derselben Stelle zusammen, und nur eine
   Kombination traegt sie zugleich: der Wisch fuellt in GOLD statt in
   Creme, und darauf springt die Schrift ins WEISS. Weiss auf Creme
   waere unlesbar gewesen, Weiss auf Gold ist es nicht.

   Die Bewegung selbst bleibt Zeichen fuer Zeichen die von Artison
   uebernommene (Nachtrag 4): diagonaler Wisch ueber ein ::before,
   -45 Grad, eine Sekunde.

   ANMERKUNG: die zwei Saetze stammen aus verschiedenen Stellen der
   Aufnahme. Frueh im Gespraech war von "aus dem Creme in weiss" die
   Rede, ganz am Ende von Gold. Hier fuehrt Gold, weil es die spaetere
   Entscheidung ist. Soll die Beschriftung im Ruhezustand doch creme
   bleiben, ist das eine Zeile: `color` in der ersten Regel unten. */

.kamui-hero__knopf,
#kamui-referenzen .kamui-v2__karte-knopf,
.artison-cta__button.brxe-button,
#brx-header a[data-kamui-kontakt],
#brx-header .bricks-menu-item a[data-kamui-kontakt],
.kamui-kontakt-formular .kamui-kontakt-senden,
.brxe-form button[type="submit"],
.brxe-form .bricks-button {
  color: var(--v2-gold-hell) !important;
  border-color: rgba(155, 124, 52, 0.85) !important;
}

/* Der Wisch fuellt in Gold statt in Creme. */
.kamui-hero__knopf::before,
#kamui-referenzen .kamui-v2__karte-knopf::before,
.artison-cta__button.brxe-button::before,
#brx-header a[data-kamui-kontakt]::before,
.kamui-kontakt-formular .kamui-kontakt-senden::before {
  background: linear-gradient(0deg, transparent, transparent 30%,
                              var(--v2-gold)) !important;
}

/* Und darauf springt die Schrift ins Weiss. */
.kamui-hero__knopf:hover,
.kamui-hero__knopf:focus-visible,
#kamui-referenzen .kamui-v2__karte-knopf:hover,
.artison-cta__button.brxe-button:hover,
#brx-header a[data-kamui-kontakt]:hover,
.kamui-kontakt-formular .kamui-kontakt-senden:hover,
.brxe-form button[type="submit"]:hover,
.brxe-form .bricks-button:hover {
  color: #FFFFFF !important;
  border-color: var(--v2-gold) !important;
}

/* Der Absendeknopf des Themes hat keinen Wisch, er ist kein
   art-Baustein. Er bekommt den Farbwechsel trotzdem, damit er nicht
   als einziger Knopf der Seite aus der Reihe faellt. */
.brxe-form button[type="submit"],
.brxe-form .bricks-button {
  background: transparent !important;
  transition: color 0.4s ease, border-color 0.4s ease,
              background-color 0.4s ease !important;
}

.brxe-form button[type="submit"]:hover,
.brxe-form .bricks-button:hover {
  background: var(--v2-gold) !important;
}

/* ── Kursiv als Gegenzug ───────────────────────────────────────────────

   Franky, Sprachnachricht 25.08., zur Pointe im Alltag: "Die Ablage ist
   zu langsam" ist raus, es heisst jetzt "Ihr System ist zu langsam" -
   "aber Ihr System muss in kursiv sein."

   Die Doppelung traegt den Satz ("das langsam doppeln, das hoert sich
   geil an"), das Kursiv zeigt, wo der Vorwurf hinwandert: weg von den
   Leuten, hin auf das System. */
.kamui-kursiv {
  /* Franky, 25.08.: "Ihr System muss geschwungeneres Kursiv sein."

     Vorher stand hier `transform: skewX(-9deg)` auf aufrechtem Lato -
     eine gekippte Grotesk, keine Kursive. Der Winkel stimmte, die
     Formen nicht: geneigte Buchstaben bleiben dieselben Buchstaben.
     Geschwungen wird eine Kursive erst durch eigene Zeichen.

     Cormorant Garamond Italic liegt jetzt unter _schriften/ und ist in
     schriften.css eingebunden. Sie bringt die Schwuenge mit und laeuft
     als Renaissance-Antiqua neben Cinzel, das die Marke traegt.

     Zwei Nachstellungen, weil eine Garamond neben Lato sonst kleiner
     und heller wirkt: `font-size: 1.14em` gleicht die kleinere
     x-Hoehe aus, 600 statt 500 haelt die Strichstaerke gegen das
     Lato-Umfeld. `font-synthesis: none` verhindert, dass ein Browser
     bei fehlendem Schnitt still auf die alte Faelschung zurueckfaellt. */
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.14em;
  letter-spacing: 0.005em;
  font-synthesis: none;
}

/* ══════════════════════════════════════════════════════════════════════
   22. DIE FUSSZEILE: LOGO NACH LINKS UNTEN, ALLES AUF EINE LINIE
   ══════════════════════════════════════════════════════════════════════

   Franky, Sprachnachricht 25.08.: "Das kann gut sein, schon ein
   bisschen weiter links unten in die Ecke. Und etwas kleiner. (...) man
   koennte hier ein bisschen weiter links unten und den restlichen Stuff
   dann auch hier auf dieselbe Hoehe bringen."

   Vorher sass der Markenblock oben und mittig in seiner Spalte, die
   vier Textspalten daneben ebenfalls oben. Weil das Logo hoeher ist als
   eine Spalte, standen beide auf unterschiedlichen Grundlinien.

   Jetzt haengt alles an derselben Unterkante: das Logo unten links in
   seiner Spalte, die vier Spalten daneben auf derselben Linie. Das ist
   das Prinzip der ganzen Fusszeile - eine Grundlinie, kein Raster aus
   Kaesten.

   Nur ab 1024px: darunter steht das Raster einspaltig untereinander,
   da gibt es keine gemeinsame Linie, an die etwas haengen koennte. */
@media (min-width: 1024px) {
  /* Franky, 26.08.: "die Worte muessen genau eben sein mit dem oberen
     Ende des Logos."

     Bis eben hing alles an der UNTERKANTE (`align-items: end`). Weil
     das Logo hoeher ist als eine Textspalte, sass seine Oberkante
     dadurch 85px ueber den vier Ueberschriften - gemessen Logo-Oben
     508, Ueberschriften 593.

     Jetzt haengt alles an der OBERKANTE. Logo und die vier
     Spaltentitel beginnen auf derselben Linie. */
  .kamui-fuss__raster { align-items: start; }

  /* Franky, 26.08.: "besser platziert, weiter rechts."
     -> Logo mittig in die Rasterspalte.

     Franky, 26.08. spaeter: "im Fuss das Logo ein Stueck weiter nach
     links, groesser, ueber die ganze Strecke da unten."

     Damit ist der Zuruf von vorhin ueberholt. Gemessen stand das Logo
     bei x=177, waehrend Fusszeile und Copyright bei x=81 beginnen: es
     hing 96px rechts neben der Satzkante der ganzen Seite. Zurueck auf
     flex-start, damit Logo, "© 2026 Kamui Consulting" und die obere
     Kante der Fusszeile auf einer Linie stehen. */
  .kamui-fuss__marke {
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  /* Franky, 26.08.: "die Worte muessen nochmal 5 Prozent runter."

     Grund dafuer steckt in der Logodatei: kamui-logo-creme.png ist
     2763x2895, sichtbarer Inhalt beginnt aber erst in Zeile 194 - oben
     stehen 6,7 Prozent durchsichtiger Rand. Kante an Kante ausgerichtet
     sitzen die Ueberschriften deshalb optisch HOEHER als das Zeichen,
     obwohl beide Kaesten exakt auf 492 beginnen.

     5 Prozent der Logohoehe sind bei 207px rund 10px. Der gemessene
     Rand waeren 6,7 Prozent, also 14px - dann laege die Schrift exakt
     auf der Oberkante des sichtbaren Zeichens. */
  /* 26.08., zweiter Zuruf: "nochmal 10 Prozent runter, auch die
     Ueberschriften". 10 Prozent der Logohoehe (207px) sind 21px, dazu
     die 10px von vorhin: 31px. */
  .kamui-fuss__spalten { padding-top: 31px; }
}

/* Franky, 26.08.: erst "doppelt so gross" (152 auf 304px), dann
   "wieder 35 Prozent kleiner". 304 minus 35 Prozent sind 198px.

   Damit liegt es zwischen den beiden Staenden von heute: groesser als
   die 152px, bei denen der Claim in der Logodatei nicht mehr lesbar
   war, und kleiner als die 304px, mit denen die Fusszeile auf 554px
   wuchs. Schmal: 220 minus 35 Prozent, also 143px. */
/* Franky, 26.08. spaeter: "groesser, dass es wirklich die ganze
   Strecke da unten nutzt."

   Gemessen: die Rasterspalte des Logos ist 389px breit, das Logo stand
   auf 198px - es fuellte gut die Haelfte. Jetzt 300px, das ist die
   Breite, bei der der Claim "COMPLEXITY UNDER CONTROL" in der Datei
   sicher lesbar bleibt und die Spalte ausgenutzt wird, ohne dass die
   Fusszeile wie bei 304px in die Hoehe schiesst (dort ohne Deckel).
   Deckel bei 78% der Spalte, damit es bei schmalerem Fenster mitgeht.
   Schmal: 143 auf 200px mitgezogen. */
.kamui-fuss__logo { max-width: min(300px, 78%) !important; }
@media (max-width: 1023px) { .kamui-fuss__logo { max-width: 200px !important; } }

/* ══════════════════════════════════════════════════════════════════════
   23. DIE ZWEI WEGE UNTEN LINKS
   ══════════════════════════════════════════════════════════════════════

   Gegenstueck zum Pfeil nach oben, der unten rechts sitzt (`art-top`,
   fixed, 48x48, z-index 100). Dieselben Masse, dieselbe Hoehe, andere
   Ecke - damit liest sich das Paar als eine Leiste und nicht als zwei
   Einfaelle.

   Gold, weil hier gehandelt wird: es ist dieselbe Farbe wie an den
   Knoepfen. Dezent im Umriss, gefuellt erst beim Ueberfahren. */
.kamui-wege {
  position: fixed;
  left: 32px;
  bottom: 32px;
  z-index: 100;
  display: flex;
  gap: 12px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* In der Fusszeile ausblenden: dort steht das Kamui-Logo seit heute
   unten links, und "es darf nichts ueberschneiden". Mailadresse und
   Kontaktseite stehen dort ohnehin ausgeschrieben. */
.kamui-wege[data-weg="ja"] {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

/* ── Groesse und Fassung ───────────────────────────────────────────
   Franky, 25.08. abends: "Mail und Telefon Zeichen muss groesser sein
   und besser zu sehen und hochwertiger."

   Drei getrennte Sachen, deshalb drei Massnahmen:

   GROESSER    48 auf 58 Pixel, das Zeichen darin von 21 auf 25. Der
               Pfeil nach oben unten rechts geht mit: die beiden Ecken
               sind als Paar gebaut ("dieselbe Bauart, nur
               gespiegelt"), eine Ecke allein zu vergroessern haette
               sie gegeneinander verstellt.

   BESSER ZU SEHEN   Der Grund lag auf 0.55 Deckung und der Umriss auf
               0.55 Gold. Ueber einem hellen Bild - dem Kaliber, der
               Lichthalle - verschwand beides fast. Jetzt 0.78 Grund,
               0.85 Umriss, dazu ein weicher Schlagschatten nach
               aussen. Der Schatten macht die Arbeit, die auf dunklem
               Grund der Umriss macht: er loest das Zeichen vom Bild.

   HOCHWERTIGER   Ein zweiter, haarfeiner Ring innen, ein Millimeter
               vom Rand. Das ist die Fassung einer Uhrenluenette und
               dieselbe Sprache wie das Kaliberbild im Auftakt. Dazu
               eine duennere Strichstaerke im Zeichen selbst (1.25
               statt 1.4, siehe kontakt.js): bei 25 Pixeln wirkt ein
               fetter Strich billig, ein feiner teuer.

   Farben bleiben Gold und Tusche. Keine vierte Farbe. */
.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: var(--v2-gold-hell);
  text-decoration: none;

  /* Innen die zweite Fassung, aussen die Ablösung vom Bild. */
  box-shadow:
    inset 0 0 0 1px rgba(237, 225, 202, 0.12),
    0 8px 28px rgba(0, 0, 0, 0.5);

  transition: background-color 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease,
              transform 0.3s ease;
}

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

.kamui-wege__zeichen:hover,
.kamui-wege__zeichen:focus-visible {
  background: var(--v2-gold);
  border-color: var(--v2-gold);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(237, 225, 202, 0.28),
    0 12px 34px rgba(0, 0, 0, 0.55);
}

/* Der Pfeil nach oben ist die andere Haelfte desselben Paares. Das
   Theme setzt ihn auf 3rem mit 1px --primary und schwarzem Grund.
   Hier bekommt er dieselbe Groesse, dieselbe Fassung und denselben
   Schatten, damit die zwei unteren Ecken zusammengehoeren. */
.art-top.brxe-button {
  width: 58px;
  height: 58px;
  border-color: rgba(194, 160, 90, 0.85);
  box-shadow:
    inset 0 0 0 1px rgba(237, 225, 202, 0.12),
    0 8px 28px rgba(0, 0, 0, 0.5);
  transition: border-color 0.3s ease, box-shadow 0.3s ease,
              transform 0.3s ease;
}

.art-top.brxe-button svg { width: 25px; height: 25px; }

.art-top.brxe-button:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(237, 225, 202, 0.28),
    0 12px 34px rgba(0, 0, 0, 0.55);
}

/* Auf schmalen Geraeten ruecken beide Ecken enger an den Rand, sonst
   stehen vier Zeichen auf 390px Breite zu dicht beieinander. Sie
   bleiben aber deutlich groesser als vorher: 50 statt 42. */
@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; }
  .art-top.brxe-button { width: 50px; height: 50px; }
  .art-top.brxe-button svg { width: 22px; height: 22px; }
}

/* ══ DER SEITENAUFTAKT IN DEN ZAHNRAEDERN ═══════════════════════════
   Franky, Sprachnachricht 25.08. abends, auf Scale Yourself:
   "Findest du den Schriftzug von Scale Yourself gut? Die Groesse auch
   gut? Koennte dominanter sein, oder? Groesse von Scale Yourself kann
   auf jeden Fall mal so um 30% vergroessert werden." Spaeter, auf
   Customized Software: "hier alle Ueberschriften in den Zahnraedern
   muessen dominanter sein."

   Gemessen war das Problem nicht die Groesse allein. Beide Zeilen des
   Auftakts liefen auf `--text-m` (1.8rem), Cinzel, Versalien, 5px
   Sperrung: Augenbraue und Aussage exakt gleich gross. Ein Auftakt
   ohne Groessenunterschied hat keine Rangfolge, und ohne Rangfolge
   wirkt er flau, egal wie gross man ihn setzt. Deshalb hier beides:
   Rangfolge herstellen UND vergroessern.

   Zwei Faelle, weil die erste Zeile nicht ueberall dasselbe ist:

   p=18, p=20, p=24, p=4445   Zeile 1 ist eine Augenbraue
                              ("SO FANGEN SIE AN", "UNSER ANGEBOT").
                              Die ordnet ein und darf klein sein, die
                              Aussage darunter traegt.

   p=901, p=902, p=903        Zeile 1 ist der Produktname. Der ist die
                              Marke der Seite und bekommt seine 30%.
                              Erkennbar an `.kamui-produktseite`, die
                              v2-baulig.js setzt: die drei Dateien
                              sind Kopien von p=20 und tragen sonst
                              dieselbe Body-Klasse.

   Die Sperrung geht mit wachsender Schrift zurueck. 5px sind bei
   1.8rem richtig und bei 3rem zu viel, die Wortbilder fallen sonst
   auseinander. */

.fr-hero-india__lede.brxe-text-basic {
  font-size: clamp(0.95rem, 1.15vw, 1.12rem);
  letter-spacing: 6px;
  line-height: 1.6;
  max-width: 900px;
  opacity: 0.82;
}

/* Die zweite Zeile ist auf jeder Seite die Aussage. Sie traegt. */
.fr-hero-india__lede.brxe-text-basic
+ .fr-hero-india__lede.brxe-text-basic {
  font-size: clamp(2.05rem, 3.3vw, 2.95rem);
  letter-spacing: 1.5px;
  line-height: 1.22;
  margin-top: 1.1rem;
  opacity: 1;
}

/* Auf den drei Produktseiten fuehrt der Produktname. */
body.kamui-produktseite .fr-hero-india__lede.brxe-text-basic:first-of-type {
  font-size: clamp(2.35rem, 3.9vw, 3.4rem);
  letter-spacing: 3px;
  line-height: 1.18;
  opacity: 1;
}

body.kamui-produktseite .fr-hero-india__lede.brxe-text-basic
+ .fr-hero-india__lede.brxe-text-basic {
  font-size: clamp(1.5rem, 2.05vw, 1.95rem);
  letter-spacing: 1.5px;
  margin-top: 0.9rem;
  opacity: 0.9;
}

/* Groessere Schrift braucht mehr Grund. Das Kaliberbild (die
   Zahnraeder) liegt hinter p=20 und den drei Produktseiten und ist
   das unruhigste Motiv der Seite: helle Zahnkraenze wechseln auf
   engem Raum mit dunklen Lagern.

   FRUEHER eine Ellipse (radial-gradient, 0.86 in der Mitte, Auslauf
   bei 80%). Die hatte einen sichtbaren Rand und stand als dunkle
   Wolke um die Ueberschrift im Bild - von Franky am 26.08. zweimal
   gemeldet. Gemessen kostete sie 42 -> 75 Helligkeit im Kopfbereich.

   Abschwaechen half nicht: jede Stufe nahm Kontrast mit, und ohne
   Verlauf fiel er an hellen Blaupausenlinien auf 1.19 - die Schrift
   waere dort verschwunden. Ein text-shadow allein trug nur bis 1.97.

   Jetzt ein LINEARER Verlauf ueber die volle Breite: er hat keinen
   Rand, den das Auge als Fleck lesen kann, deckt aber das Textband
   ab. Gemessen: Kontrast 4.24 gehalten, sichtbare Kante 25 -> 13.
   Nur Tusche, keine dritte Farbe, wie ueberall. */
body.page-id-20 .fr-hero-india__inner::before {
  background: linear-gradient(
    to bottom,
    rgba(22, 27, 25, 0) 0%,
    rgba(22, 27, 25, 0.34) 30%,
    rgba(22, 27, 25, 0.5) 50%,
    rgba(22, 27, 25, 0.34) 70%,
    rgba(22, 27, 25, 0) 100%
  );
}

/* Der Hinweis in flaechen.css stimmt: ein text-shadow ohne Vorrang
   wird vom Theme auf `transparent` zurueckgedreht. Mit Vorrang haelt
   er, und bei dieser Schriftgroesse ist er die zweite Sicherung
   gegen einen hellen Zahnkranz genau unter einem Buchstaben. */
body.page-id-20 .fr-hero-india__lede.brxe-text-basic {
  text-shadow: 0 2px 24px rgba(22, 27, 25, 0.75) !important;
}

@media (max-width: 640px) {
  .fr-hero-india__lede.brxe-text-basic { letter-spacing: 4px; }
  .fr-hero-india__lede.brxe-text-basic
  + .fr-hero-india__lede.brxe-text-basic { letter-spacing: 1px; }
  body.kamui-produktseite .fr-hero-india__lede.brxe-text-basic:first-of-type {
    letter-spacing: 2px;
  }
}

/* ── Was Sie danach haben ──────────────────────────────────────────
   Der Abschlusssatz unter der Leistungsliste auf den Produktseiten.
   Er ist kein weiterer Listenpunkt, sondern das Ergebnis, und steht
   deshalb abgesetzt hinter einer Linie. */
.kamui-v2__ergebnis {
  margin-top: 2.4rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(237, 225, 202, 0.18);
}

/* Die Listenpunkte tragen seit dem 25.08. eine fette Fuehrung und
   danach den Erklaersatz. Ohne etwas Luft dazwischen lesen sich beide
   als ein Block. */
.kamui-v2__liste li strong {
  display: block;
  margin-bottom: 0.35rem;
  letter-spacing: 0.4px;
}

/* ── Das Rollendiagramm als Flaeche ────────────────────────────────
   Franky, 25.08. abends, zu Scale the Team: "Das Bild, eigentlich
   gut, aber dann muessen da auch fuenf Leute sein. Dann wuerde ich da
   eher sowas in dem Stil machen, aber sowas wie ein Flussdiagramm,
   dass man so fuenf Mitarbeiter."

   `kamui-team-fuenf.svg` war das: ein Vorgang, fuenf Rollen, eine
   Freigabe. Als Zeichnung durfte es nirgends beschnitten werden -
   ueberall sonst liegen Bilder auf `cover`, weil das bei Motiven
   richtig ist, fuer die Zeichnung wurde daraus `contain`.

   RUHEND seit 25.08. abends: Franky hat G-03-moderne-innovation.png
   nachgereicht, "muss zu Scale the Team eingesetzt werden". Damit
   traegt die Reihe ein Foto wie die beiden Nachbarn, und keine
   .svg-Quelle haengt mehr in kennzahlen.js, referenzen.js oder
   v2-baulig.js. Die drei Regeln unten greifen deshalb ins Leere.

   Sie bleiben trotzdem stehen: die Zeichnung liegt weiter unter
   assets/flaechen/, und wenn sie zurueckkommt, braucht sie genau
   diese drei Regeln wieder. Die Auswahl geht ueber die Dateiendung
   statt ueber eine eigene Klasse, weil kennzahlen.js seine Flaeche als
   Inline-Hintergrund setzt - dort gaebe es keinen Haken, an dem eine
   Klasse haengt. */
.kamui-v2 .art-fr-content-section-alpha__media.brxe-image img[src$=".svg"] {
  object-fit: contain;
  background-color: #161B19;
}

#kamui-referenzen .kamui-v2__karte-bild[src$=".svg"] {
  object-fit: contain;
  background-color: #161B19;
}

.kamui-messen__flaeche[style*=".svg"] {
  background-size: contain;
  background-color: #161B19;
}

/* ── Der Abschlussblock: eben und schmaler ────────────────────────────

   Franky, 26.08.: "Der Hero soll bitte eben sein und 25% schmaler, auf
   jeder Seite wo er zu finden ist."

   Gemeint ist der Block "Starten Sie hier / Agentic AI, die Ihre Firma
   kennt", der jede Seite abschliesst.

   EBEN. Er lag nicht flach, sondern trug einen senkrechten Verlauf:

       linear-gradient(rgb(0,0,0), rgb(29,27,27))

   Also Schwarz oben, aufgehellt nach unten. Darunter steht die
   Fusszeile, und die ist durchsichtig - sie zeigt den Grund des
   Dokuments, und der ist rgb(22,27,25), die Tusche der Marke. Der
   Verlauf lief also von einem fremden Schwarz auf einen Ton, der die
   Tusche knapp verfehlt, und erzeugte genau die Kante, die im Bild zu
   sehen ist.

   Jetzt derselbe Ton wie Dokument und Fusszeile. Damit gibt es dort
   keinen Uebergang mehr, sondern eine durchgehende Flaeche.

   !important und zwei Klassen: die Regel der Vorlage steht im spaeten
   Block unter `_assets/` und schlaegt sonst.

   SCHMALER. Der Behaelter lief auf die vollen 1320px der Seite.
   1320 minus ein Viertel sind 990px. Als Prozentwert statt als feste
   Zahl, damit es auf jeder Fensterbreite ein Viertel bleibt.

   Erst ab 900px. Darunter ist der Behaelter ohnehin schmal, ein
   weiteres Viertel wegzunehmen liesse die Ueberschrift in vier Zeilen
   brechen und den Knopf fast auf Textbreite schrumpfen. */
.artison-cta.brxe-section {
  background: var(--v2-tusche, #161B19) !important;
}

@media (min-width: 900px) {
  .artison-cta .artison-cta__container.brxe-container {
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   NEU AM 11.09.2026: Abschnitt 07 (Rechner) und 08 (Prozess-Check)
   ══════════════════════════════════════════════════════════════════════

   Beide benutzen .kamui-kontakt-formular, damit die Felder aussehen wie
   die des Kontaktformulars: kein Kasten, nur eine Linie unten, 50px
   hoch, Beschriftung darueber.

   ES GIBT EINEN HAKEN, und der ist der Grund fuer diesen ganzen Block:
   das Kontaktformular ist fuer CREME ALS GRUND gebaut. Jede Farbe darin
   ist Tusche, viele mit !important gegen kamui-farbe.css. Diese zwei
   Sektionen stehen aber auf bg--ultra-dark, wie die uebrigen neuen
   Bloecke. Tusche auf Tusche waere unlesbar.

   Deshalb wird hier NUR die Farbe gedreht, und nur innerhalb dieser
   zwei Sektionen. Groessen, Abstaende, Linienstaerken und der Aufbau
   bleiben unangetastet - es ist dasselbe Formular, nur andersherum
   beleuchtet. Das !important ist geerbt, nicht gewollt: ohne dasselbe
   Gewicht gewinnt die Creme-Fassung.
   ────────────────────────────────────────────────────────────────────── */

#kamui-rechner .kamui-kontakt-formular label,
#kamui-prozess-check .kamui-kontakt-formular label {
  color: var(--v2-lauf);
}

#kamui-rechner .kamui-kontakt-formular label.required::after,
#kamui-prozess-check .kamui-kontakt-formular label.required::after {
  color: rgba(237, 225, 202, 0.5);
}

#kamui-rechner .kamui-kontakt-formular input[type="text"],
#kamui-rechner .kamui-kontakt-formular textarea,
#kamui-prozess-check .kamui-kontakt-formular input[type="text"],
#kamui-prozess-check .kamui-kontakt-formular textarea {
  color: var(--v2-creme) !important;
  border-bottom-color: rgba(237, 225, 202, 0.35) !important;
}

#kamui-rechner .kamui-kontakt-formular input:focus,
#kamui-rechner .kamui-kontakt-formular textarea:focus,
#kamui-prozess-check .kamui-kontakt-formular input:focus,
#kamui-prozess-check .kamui-kontakt-formular textarea:focus {
  border-bottom-color: var(--v2-creme) !important;
}

/* Der Platzhalter traegt ein Beispiel, keine Angabe. Er muss lesbar
   sein und darf trotzdem nicht wie eine Eingabe wirken. */
#kamui-rechner .kamui-kontakt-formular ::placeholder,
#kamui-prozess-check .kamui-kontakt-formular ::placeholder {
  color: rgba(237, 225, 202, 0.42);
  opacity: 1;
}

#kamui-rechner .kamui-kontakt-formular .kamui-kontakt-hinweis,
#kamui-prozess-check .kamui-kontakt-formular .kamui-kontakt-hinweis {
  color: var(--v2-still);
}

/* Der Knopf ist auf Creme eine Tuschefarbene Flaeche. Auf Tusche wird
   daraus die Cremefarbene - dieselbe Idee, gedreht. */
#kamui-prozess-check .kamui-kontakt-formular .kamui-kontakt-senden {
  color: var(--v2-tusche) !important;
  background: var(--v2-creme) !important;
}

#kamui-prozess-check .kamui-kontakt-danke p {
  color: var(--v2-lauf);
}

/* ── Der Rechner ──────────────────────────────────────────────────────
   Drei Felder statt zwei. Die Reihe des Kontaktformulars ist auf zwei
   Spalten gestellt, hier kommt eine dritte dazu. Der Umbruch auf eine
   Spalte bei 700px gilt unveraendert, er greift ueber dieselbe Regel. */
.kamui-kontakt-formular .kamui-kontakt-reihe--drei {
  grid-template-columns: repeat(3, 1fr);
  gap: 0 32px;
}

@media (max-width: 900px) {
  .kamui-kontakt-formular .kamui-kontakt-reihe--drei {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .kamui-kontakt-formular .kamui-kontakt-reihe--drei {
    grid-template-columns: 1fr;
  }
}

.kamui-rechner__marke {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v2-still);
}

.kamui-rechner__titel {
  margin: 0 0 0.9rem;
  font-family: "Lato", system-ui, sans-serif;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  color: var(--v2-creme);
}

.kamui-rechner__satz {
  margin: 0 0 2.25rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--v2-lauf);
  max-width: 52ch;
}

/* Das Ergebnis erbt die Linie darueber von .kamui-v2__ergebnis. Der
   fette Teil ist die Rechnung, der Rest ihre Einordnung. */
#kamui-r-ergebnis {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--v2-lauf);
}

#kamui-r-ergebnis strong { color: var(--v2-creme); }

/* ── Der Prozess-Check ────────────────────────────────────────────── */

.kamui-p-mail,
.kamui-p-weg {
  color: var(--v2-creme);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.kamui-p-mail:hover,
.kamui-p-weg:hover { opacity: 0.78; }

/* Fehlermeldung: kein Rot aus einer fremden Palette. Die Seite kennt
   zwei Farben, also traegt die Meldung die Schrift und eine Linie
   davor - das reicht, um sie vom Hinweis darueber zu trennen. */
.kamui-p-fehler {
  margin: 1rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--v2-creme);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--v2-creme);
}

/* ── Schrittlisten mit Fuehrung ───────────────────────────────────────
   Abschnitt 01 und 02 setzen Titel und Erklaersatz in einen Punkt.
   Dieselbe Regel gibt es fuer .kamui-v2__liste schon, siehe oben. */
.kamui-v2__schrittliste li strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--v2-creme);
  letter-spacing: 0.4px;
}

/* Der Hinweis steht ueber dem Knopf, nicht daneben. Ohne Abstand sass
   der Knopf direkt an der letzten Hinweiszeile und las sich wie ein
   Teil davon. */
#kamui-prozess-check .kamui-kontakt-formular .submit-button-wrapper {
  margin-top: 1.75rem;
}