/* ===========================================================================
   KAMUI ÜBERSCHREIBUNGEN

   Eigene Schicht über dem Artison-Stylesheet. Das Artison-CSS bleibt
   unangetastet, damit der Umbau Schritt für Schritt laufen kann und
   jederzeit nachvollziehbar bleibt, was von uns kommt.

   GRUNDSATZ, aus LOGO-REGELN.md im Vault:
   An den Logodateien wird nichts gerechnet. Passt ein Slot nicht,
   wird der Slot geändert, nie das Logo.

   Das gilt besonders für den Rand: das Signet hat ABSICHTLICH oben mehr
   Luft als unten (9 Prozent gegen 3.7). Dort hängt die senkrechte Linie
   mit dem Punkt. Wer das Motiv eng beschneidet und gleichmäßig Luft
   anlegt, zerstört genau das, und die Linie sitzt auf der Kante.
   =========================================================================== */

/* ── Kopflogo ───────────────────────────────────────────────────────────
   Im Kopf steht das SIGNET, nicht das volle Lockup.

   Grund, gemessen: Artisons Kopfslot ist 3.5rem hoch. Das Lockup ist
   nahezu quadratisch und trägt Wortmarke, Unterzeile und Claim. Bei 62 px
   Höhe wird der Claim zu einem grauen Strich und KAMUI zu einem Fleck.
   Das Signet allein trägt in dieser Größe.

   Das volle Lockup steht dort, wo es Platz hat: im Signaturblock und in
   der Fußzeile. */
.fr-header-alpha__logo.brxe-image {
  height: auto !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  flex-shrink: 0;
}

.fr-header-alpha__logo.brxe-image img:not(.kopf-wortmarke) {
  /* 15 Prozent groesser als der vorherige Stand (58px). */
  height: 67px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  display: block;
}

/* Im gescrollten Zustand wird der Kopf schmaler. */
#brx-header.scrolling .fr-header-alpha__logo.brxe-image img:not(.kopf-wortmarke) {
  /* 15 Prozent groesser als der vorherige Stand (44px). */
  height: 51px !important;
}

/* ── Wortmarke neben dem Signet ─────────────────────────────────────────
   Das Signet allein nennt keinen Namen. Wer die Seite zum ersten Mal
   sieht, muss lesen können, wer dahintersteht.

   Gesetzt und nicht als Bild, aus zwei Gründen: das volle Lockup ist bei
   58 px Kopfhöhe unlesbar (gemessen), und LOGO-REGELN.md verbietet, die
   Wortmarke aus dem Logo neu zu setzen. Das hier ist Text in der
   Hausschrift neben dem Logo, keine nachgebaute Wortmarke.

   Cinzel, weil der Kopf sonst zwei Schriftwelten mischt: die Navigation
   läuft bereits in Cinzel. */
.fr-header-alpha__logo.brxe-image {
  display: flex !important;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  /* Der Kopf ist ein Flex-Container mit space-between. Ohne diese zwei
     Zeilen zieht sich der Logoblock zusammen und der Navigationsblock legt
     sich darueber: gemessen 6 px Ueberlappung auf KAMUI und 3 px auf
     CONSULTING bei 1200 und 1440 px Fensterbreite. */
  flex: 0 0 auto;
  z-index: 2;
  position: relative;
}

/* Die Navigation darf nur so breit werden, wie sie wirklich braucht. */
.fr-header-alpha__inner.brxe-container > .brxe-nav-menu {
  flex: 0 1 auto;
  min-width: 0;
}

/* Artison zeigt das Menue-Icon per Klasse "always" auf ALLEN Breiten, auch
   neben der vollen Navigation. Zusammen mit der neuen Wortmarke steht es
   auf Stoss: Wortmarke endet bei x=334, Icon beginnt bei x=334. Optisch
   klebt es am letzten Buchstaben von KAMUI.
   Ab Tablet quer gibt es die ausgeschriebene Navigation, das Icon ist dort
   doppelt gemoppelt und wird ausgeblendet. Unter 992px bleibt es. */
@media (min-width: 992px) {
  .fr-header-alpha .bricks-mobile-menu-toggle.always {
    display: none !important;
  }
}

/* TIPPFLAECHE des Menueknopfs. Gemessen auf 390px Breite war der Knopf
   16x20px - das ist die Groesse der drei Striche selbst, ohne jede
   Umgebung. Auf dem Handy ist das die EINZIGE Navigation, und 16px
   trifft niemand zuverlaessig; gefordert sind 44px.
   Die Striche bleiben unveraendert, nur die Trefferflaeche waechst:
   feste 44x44px mit zentriertem Inhalt. Der negative Rand rechts haelt
   die Striche optisch an derselben Stelle wie vorher, damit die
   Kopfzeile nicht springt. */
@media (max-width: 991px) {
  .fr-header-alpha .bricks-mobile-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: -12px;
  }
}

/* Die Wortmarke ist ein Ausschnitt aus der Logodatei, kein gesetzter Text.
   Vorher stand hier ein Nachbau in Cinzel: falsche Schrift, falsche
   Abstände, falsche Proportionen. Erzeugt von assets/wortmarke.py aus
   kamui-lockup-schwarz-original.png, Seitenverhältnis 6.164. */
.kopf-wortmarke {
  display: block;
  height: 2.07rem;          /* 15 Prozent über dem vorherigen Stand */
  width: auto;
  flex: 0 0 auto;
}

/* Farbfassung der Marke: haengt davon ab, was GERADE unter dem Kopf liegt,
   nicht davon, ob ueberhaupt gescrollt wurde.

   Die Seite wechselt vier Mal die Grundhelligkeit (gemessen):
     y 2 bis 2882      Hero, rgb(22,27,25)     dunkel
     y 2882 bis 4199   bg--ultra-light, 244    hell
     y 4199 bis 7554   bg--ultra-dark, 0       dunkel
     y 7554 bis Ende   Fusszeile, 0            dunkel

   Eine feste Regel "gescrollt gleich schwarz" war deshalb an sechs von
   neun gemessenen Positionen falsch: die Marke stand schwarz auf schwarz,
   Kontrast 1.04 zu 1, also unsichtbar. Die Navigation daneben blieb weiss
   und war zu sehen, was den Fehler zusaetzlich auffaellig macht.

   WARUM DIE MARKE JETZT IMMER HELL IST

   Der erste Versuch war: heller Abschnitt gleich schwarze Marke, dunkler
   Abschnitt gleich weisse Marke. Das hat an sechs von neun gemessenen
   Positionen versagt (Kontrast 1.04 bis 1.81 zu 1). Der Grund liegt
   tiefer als eine falsche Bedingung: der Kopf liegt fest ueber der Seite,
   und darunter laeuft ein Bild mit Parallax durch. Der Untergrund
   aendert sich also KONTINUIERLICH beim Scrollen, nicht nur von
   Abschnitt zu Abschnitt - und bei mittlerem Grau traegt keine der
   beiden Fassungen.

   Loesung: der Kopf bringt seinen eigenen Untergrund mit, sobald die
   Seite gescrollt ist. Ein weicher Verlauf in Tusche, kein Balken. Die
   Marke steht dann immer in der hellen Fassung und immer auf demselben
   Grund, egal was darunter durchlaeuft.

   Kein filter:invert - das wuerde die Kanten aufrauen. Getauscht wird
   die Datei, deren RGB flach gesetzt und deren Alpha erhalten ist. */
/* 26.08.: Der Dateitausch creme->weiss ist RAUS. Gemessen sprang die
   Marke bei y=250 in EINEM Schritt von Helligkeit 164.3 auf 177.1 -
   ein harter Wechsel mitten im Scrollen, den man als Blinken sieht.
   Er war nur noetig, solange der Untergrund unter der Marke wechselte.
   Der Untergrund ist jetzt konstant (siehe .kopf-schutz unten), also
   bleibt die Marke durchgehend in der cremefarbenen Fassung.
   NICHT wieder einfuehren, ohne den Untergrund neu zu messen. */

/* Der eigene Untergrund des Kopfes. Liegt HINTER dem Inhalt (z-index 0
   gegen 1) und laeuft nach unten weich aus, damit keine sichtbare Kante
   ueber dem Bild steht. */
/* Der eigene Untergrund des Kopfes.

   26.08. GEMESSEN: der AEUSSERE #brx-header ist 0px hoch (er ist nur
   der fixierte Rahmen, der Inhalt sitzt im inneren .fr-header-alpha,
   93px). Eine Platte mit inset:0 am aeusseren Element war deshalb
   ebenfalls 0px hoch und hat NICHTS abgedeckt - die cremefarbene Marke
   stand direkt ueber dem durchlaufenden Seiteninhalt. Bei hellen
   Bildflaechen fiel der Kontrast auf 1.69, bei dunklen lag er bei 3.50:
   genau das sieht man als Blinken.

   ACHTUNG ::before ist NICHT verwendbar: in jeder index.html steht
   inline "#brx-header .fr-header-alpha::before{display:none!important}"
   (legt ein raeumlich animierendes Theme-Element stumm). Diese Platte
   liegt deshalb auf ::after. */
/* 26.08.: NICHT an .kopf-schutz binden. Diese Klasse setzt hero.js,
   das nur auf der Startseite laeuft - auf Kontakt sprang die Marke
   dadurch um 60.7, auf Team um 2.3. Der Untergrund haengt jetzt am
   Kopf selbst und gilt auf JEDER Seite. */
#brx-header .fr-header-alpha::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50vw;
  right: -50vw;
  z-index: 0;
  pointer-events: none;
  /* Im Bereich, in dem die Marke steht (28-76px von 92px), ist die
     Platte VOLL deckend - alles darunter wuerde als Restflimmern
     durchscheinen. Erst darunter laeuft sie weich aus, damit ueber dem
     Bild keine harte Kante steht. Kein Balken, nur ein weicher Fuss. */
  background: linear-gradient(
    to bottom,
    rgb(22, 27, 25) 0%,
    rgb(22, 27, 25) 84%,
    rgba(22, 27, 25, 0.55) 93%,
    rgba(22, 27, 25, 0) 100%
  );
}

#brx-header .fr-header-alpha > * {
  position: relative;
  z-index: 1;
}

/* Das Menue-Icon steht auf demselben Untergrund wie die Marke, also
   ebenfalls immer in Creme. */
#brx-header.scrolling .bricks-mobile-menu-toggle .bar {
  background-color: #EDE1CA;
}

/* Auf schmalen Fenstern ist neben Signet und Menütaste kein Platz für
   zwei Zeilen Text. Dann trägt das Signet allein. */
@media (max-width: 991px) {
  .kopf-wortmarke > span {
    display: none;
  }
  .kopf-wortmarke b {
    font-size: 0.88rem;
  }
}

@media (max-width: 600px) {
  .kopf-wortmarke {
    display: none;
  }
}

/* ── Artisons Kopfumbau beim Scrollen abschalten ────────────────────── */
/* Das Theme baut ab dem ersten Scrollen einen voellig anderen Kopf:
   Logoblock ausblenden, ein zweites Signet mittig einblenden, die
   Navigation ausblenden, dafuer das Menue-Icon zeigen.
   Mit unserem Kopf (Signet plus Wortmarke links) ergibt das zwei Signets
   nebeneinander und keine sichtbaren Menuepunkte mehr.
   Der Kopf bleibt deshalb in beiden Zustaenden gleich aufgebaut, nur die
   Hoehe und die Farbfassung wechseln. */
#brx-header.scrolling .fr-header-alpha__logo {
  display: flex !important;
}

#brx-header.scrolling .art-logo-scroll,
#brx-header.scrolling a:has(.art-logo-scroll) {
  display: none !important;
}

@media (min-width: 992px) {
  #brx-header.scrolling .fr-header-alpha .art-nav--default {
    display: flex !important;
    justify-content: flex-end;
  }
  #brx-header.scrolling .fr-header-alpha .art-nav--burger,
  #brx-header.scrolling .bricks-mobile-menu-toggle.always {
    display: none !important;
  }
  /* Artison hat einen ZWEITEN Kontaktknopf, der nur beim Scrollen erscheint,
     weil im Originalkopf der erste mit dem Logoblock verschwindet. Unser
     Kopf behaelt seinen Knopf durchgehend, also bleibt dieser hier aus,
     sonst steht KONTAKT zweimal nebeneinander. */
  #brx-header.scrolling .fr-header-alpha .art-header-button-scroll {
    display: none !important;
  }
}

/* ── Fusszeichen ────────────────────────────────────────────────────────
   Artison setzte hier ein quadratisches Zeichen in eine 10rem hohe Box und
   zog es mit top:-50px über die Kante der Fusszeile. Bei einem quadratischen
   Motiv fällt das nicht auf. Unser Signet ist breiter als hoch und trägt
   oben die Linie, unten die Punktkette. Beides wurde abgeschnitten.

   Deshalb: kein negatives Versetzen, Höhe frei, Breite begrenzt. */
.art-footer__legal__logo.brxe-image {
  position: relative !important;
  top: 0 !important;
  left: auto !important;
  transform: none !important;
  height: auto !important;
  width: auto !important;
  max-width: 165px;
  margin: 0 auto;
  overflow: visible !important;
}

.art-footer__legal__logo.brxe-image img {
  height: auto !important;
  width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block;
}

/* Die Fusszeile braucht dadurch etwas mehr Luft nach unten. */
.art-footer.brxe-section {
  padding-bottom: var(--space-m);
}

/* ── Zeichen über den CTA-Blöcken ───────────────────────────────────────
   Sass hier das Artison-A, 1.5rem klein. Das Kamui-Signet trägt in dieser
   Größe keine Details, deshalb etwas größer. */
.artison-cta__icon.brxe-image {
  width: auto !important;
  height: auto !important;
  max-width: 54px;
  overflow: visible !important;
}

.artison-cta__icon.brxe-image img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

/* ── Signaturblock ──────────────────────────────────────────────────────
   Stand vorher die Handsignatur des Artison-Gründers, jetzt das Kamui-Logo.
   Der Slot war auf ein sehr breites Bild ausgelegt. */
.art-home-simar-sign.brxe-image {
  height: auto !important;
  width: auto !important;
  max-width: 210px;
  margin: 0 auto clamp(1rem, 0.5rem + 2vw, 2.5rem);
  overflow: visible !important;
}

.art-home-simar-sign.brxe-image img {
  height: auto !important;
  width: 100% !important;
  object-fit: contain !important;
  display: block;
}

/* ── Kopf beim Scrollen: Marke weicht dem Menue-Icon ────────────────────
   Regel von Franky: KAMUI CONSULTING steht links nur im Ausgangszustand
   der Navigationsleiste. Sobald beim Scrollen links das Menue-Icon
   erscheint, verschwinden Signet und Schriftzug, und das Icon rueckt auf
   die Position, an der vorher das Logo stand.

   Umsetzung ueber die Flex-Reihenfolge, nicht ueber absolute Position:
   der Navigationsblock wird zum ersten Element im Kopf gezogen
   (order -1) und schiebt mit margin-right:auto alles Uebrige nach rechts.
   Dadurch sitzt das Icon exakt am linken Satzrand, wo das Logo begann,
   und wandert bei jeder Fensterbreite von selbst mit.

   Gilt nur dort, wo es ueberhaupt ein Menue-Icon gibt, also bis 991px.
   Ab 992px steht die volle Navigation, dort bleibt das Logo stehen. */
@media (max-width: 991px) {
  #brx-header.scrolling .fr-header-alpha__logo {
    display: none !important;
  }

  /* Der Navigationsblock wandert nach ganz links. Er selbst richtet
     seine Kinder mit justify-content:flex-end aus, deshalb klebte das
     Icon zunaechst weiter am rechten Ende des Blocks, obwohl der Block
     schon links begann. Erst flex-start bringt das Icon wirklich an den
     linken Satzrand. */
  #brx-header.scrolling .fr-header-alpha .art-nav--default {
    order: -1;
    flex: 0 0 auto;
    margin-right: auto;
    justify-content: flex-start !important;
  }
}

/* ── Abschnitt "Der Alltag": Satzspiegel ────────────────────────────────
   Der Abschnitt kam aus Artison und war nie gesetzt, nur befuellt.
   Gemessen im Browser bei 1440px, vorher:

     grosse Zeile   53px ueber die volle Breite von 1320px
                    ergibt rund 68 Zeichen je Zeile und den Umbruch
                    "... haben kein / Umsatzproblem." Der bricht den
                    Satz an der falschen Stelle, mitten in der Aussage.
     Farbe          rgb(96,96,96), ein mattes Grau, nicht die Tusche
     Signet oben    24x24px, sieht aus wie ein Fehldruck
     Flisstext      im CSS rechtsbuendig, im HTML per style zentriert
     Logo unten     margin 0 520px, also aus der Mitte gerechnet statt
                    zentriert, plus 100px Abstand nur nach unten

   Lesbarkeitsregel: 45 bis 75 Zeichen je Zeile. Grosse Schrift braucht
   das untere Ende, sonst verliert das Auge beim Ruecksprung die Zeile. */

/* Der Abschnitt selbst: Luft nach oben und unten aus einer Skala,
   nicht aus Zufallswerten. */
.artison-intro {
  padding-top: clamp(4rem, 3rem + 4vw, 7rem);
}

/* Das Signet ueber der Bereichsmarke. 24px war keine Entscheidung,
   sondern ein Ueberbleibsel. 40px traegt die Form, ohne mit dem Logo
   am Fuss des Abschnitts zu konkurrieren. */
.artison-intro__image.brxe-image {
  width: auto !important;
  height: auto !important;
  max-width: 54px;
  margin: 0 auto 1.9rem;
  opacity: 0.9;
  overflow: visible !important;
}

.artison-intro__image.brxe-image img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

/* Bereichsmarke DER ALLTAG: bleibt klein und gesperrt, bekommt aber
   Abstand zur grossen Zeile, damit sie als Marke liest und nicht als
   angeklebte Zeile. */
.artison-intro__heading {
  text-align: center;
  margin: 0 auto clamp(2rem, 1.4rem + 2.4vw, 3.4rem) !important;
  color: var(--kamui-tusche, #161B19);
  opacity: 0.62;
}

/* Die grosse Zeile. Entscheidend ist die Zeilenlaenge, nicht der
   Schriftgrad: 22ch bei dieser Groesse ergibt zwei ausgewogene Zeilen,
   und der Umbruch faellt zwischen die beiden Saetze statt mitten hinein. */
.artison-intro__callout-quote,
.artison-intro__callout-quote p {
  max-width: 34ch;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  color: var(--kamui-tusche, #161B19);
  font-size: clamp(1.8rem, 1.05rem + 2.4vw, 2.9rem) !important;
  line-height: 1.26 !important;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

/* Der Umbruch wird gesetzt, nicht dem Zufall der Fensterbreite ueberlassen.
   Der Satz besteht aus zwei Haelften, die gegeneinander stehen:
   "kein Umsatzproblem" gegen "ein Suchproblem". Genau dort trennt die
   Zeile, damit die Pointe auf der zweiten Zeile eigenstaendig steht.
   Ab Tablet quer, darunter bricht der Text natuerlich. */
/* Gilt auf ALLEN Breiten. Erster Versuch war, den Bruch unter 768px dem
   natuerlichen Umbruch zu ueberlassen. Ergebnis bei 600px:
   "KEIN UMSATZPROBLEM. SIE" am Zeilenende, die Pointe faengt also auf der
   Zeile davor an und wird zerrissen. Mit gesetztem Bruch stehen die beiden
   Saetze auch auf schmalen Geraeten sauber untereinander. */
.artison-intro__callout-quote .kamui-bruch {
  display: block;
}

/* Fliesstext: im CSS stand rechtsbuendig, im HTML zentriert. Der Konflikt
   ist jetzt aufgeloest, zentriert gewinnt, passend zum Rest des Blocks.
   58ch haelt die Zeilen unter der Ermuedungsgrenze. */
.art-text-container__text-left {
  max-width: 58ch;
  margin: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem) auto clamp(3rem, 2.2rem + 3vw, 4.8rem) !important;
  text-align: center !important;
  color: var(--kamui-tusche, #161B19);
  opacity: 0.86;
  font-size: clamp(1rem, 0.94rem + 0.34vw, 1.18rem) !important;
  line-height: 1.72 !important;
  letter-spacing: 0.055em !important;
}

/* Abstand zwischen den beiden Absaetzen, statt sie aneinanderzukleben. */
.art-text-container__text-left p + p {
  margin-top: 1.5em;
}

/* ── Grundsatz, damit kein künftiger Slot ein Logo beschneidet ────────── */
img[src*="/marke/kamui-"] {
  object-fit: contain !important;
  max-height: none !important;
}

*:has(> img[src*="/marke/kamui-"]) {
  overflow: visible !important;
}

/* ── Der Sitz der Marke im Kopf ───────────────────────────────────────

   Franky, 26.08.: "Das Logo muss eben sein mit den anderen Schriften und
   bisschen weiter nach rechts, etwa 10%."

   EBEN. Gemessen bei 1440x900, Oberkante des Fensters als Nullpunkt:

       Navigationstext, optische Mitte        43,5px
       Kasten der Wortmarke, 32 bis 56        Mitte 44
       darin das Wort KAMUI                   Mitte 37,7

   Der Kasten steht also fast genau auf der Hoehe der Navigation - aber
   der Kasten ist nicht das, was man liest. Die Datei ist ein Lockup aus
   ZWEI Zeilen: KAMUI in den Bildzeilen 0 bis 53, Luecke bis 77, dann
   CONSULTING bis 102. Auf 24px gerechnet sitzt KAMUI bei 37,7 und liegt
   5,8px ueber der Navigation. Genau die liest man als "steht zu hoch".

   Signet und Wortmarke wandern zusammen 6px nach unten. Nur die
   Wortmarke zu schieben waere falsch, dann stuenden die beiden Teile des
   Lockups nicht mehr aufeinander.

   NACH RECHTS. Die Marke beginnt am Gutter bei 60px und ist mit Signet
   und Wortmarke 213px breit. "Etwa 10%" als Anteil ihrer eigenen Breite
   sind 21px. Zehn Prozent des Gutters waeren 6px gewesen und nicht zu
   sehen.

   ZWOELF UND NICHT SECHS: der Kopf zentriert seine Kinder senkrecht.
   Ein Rand nach oben schiebt das Element deshalb nur um die HAELFTE des
   gesetzten Werts, der Rest wird von der Zentrierung wieder aufgeholt.
   Gemessen: 6px Rand ergaben 3px Versatz. Fuer die noetigen 5,8px sind
   es also 12px.

   RAND UND NICHT transform: an diesem Element kam `transform` nicht an.
   Nachgemessen im Browser ueber alle Stylesheets: die Regel steht in
   kamui.css, das Element traegt beide Klassen, und der berechnete Wert
   ist trotzdem `none`. Ein Rand am Flex-Kind hat diese Frage nicht, er
   wirkt immer. Zwei Zeilen weniger Raetsel. */
.fr-header-alpha__logo.brxe-image,
#brx-header.scrolling .fr-header-alpha__logo.brxe-image {
  margin-left: 21px !important;
  margin-top: 12px !important;
}

@media (max-width: 900px) {
  /* Schmal steht die Marke allein neben dem Menuezeichen, es gibt keine
     Navigation, an der sie sich ausrichten muesste. */
  .fr-header-alpha__logo.brxe-image,
  #brx-header.scrolling .fr-header-alpha__logo.brxe-image {
    margin-left: 0 !important;
    margin-top: 0 !important;
  }
}