/* ══════════════════════════════════════════════════════════════════════
   KAMUI FARBE: kein Weiss auf der Seite
   ══════════════════════════════════════════════════════════════════════

   Gemessen im Browser ueber alle fuenf Seiten: 12 Stellen in Weiss oder
   Fast-Weiss. Die groessten sind html und body selbst - rgb(255,255,255)
   auf der Haltungsseite, rgb(244,244,244) auf den uebrigen. Dazu kommen
   Sektionen und Container aus dem Artison-Theme.

   Die Marke kennt zwei Farben: Tusche #161B19 und Creme #EDE1CA. Weiss
   ist keine dritte Farbe, auch nicht als heller Grund.

   Diese Datei wird NACH allen Theme-Dateien geladen und korrigiert
   zentral. Sechzehn Theme-Dateien einzeln zu aendern waere bei jedem
   Theme-Update wieder verloren.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --kamui-tusche: #161B19;
  --kamui-creme: #EDE1CA;
  /* Abstufungen, damit Flaechen sich absetzen koennen ohne dritte Farbe */
  --kamui-tusche-hoch: #1E2523;   /* etwas heller als Tusche */
  --kamui-creme-tief: #E3D5B9;    /* etwas tiefer als Creme */
}

/* ── Grundflaeche ─────────────────────────────────────────────────────
   html und body tragen die Farbe, die durchscheint, wo nichts anderes
   gesetzt ist: beim Ueberscrollen, hinter Verlaeufen, in Luecken
   zwischen Sektionen. Stand auf Weiss, jetzt Tusche. */
html,
body {
  background-color: var(--kamui-tusche) !important;
}

/* ── Sektionen und Container aus dem Theme ────────────────────────────
   Artison setzt weisse Flaechen als Standard. Wo eine Sektion bewusst
   hell sein soll, traegt sie unsere Klasse .kamui-hell (weiter unten).
   Alles andere wird Tusche.

   WICHTIG: hier muss !important stehen. Das Theme adressiert seine
   Sektionen ueber ID-Selektoren (section#brxe-rfdykw), und eine ID
   schlaegt jede Klassenregel, egal wie spaet sie geladen wird. Der
   erste Anlauf ohne !important hatte deshalb keine Wirkung: die
   Haltungsseite blieb zu 62 Prozent weiss. */
section.brxe-section,
div.brxe-container,
div.brxe-block,
.brxe-div {
  background-color: transparent !important;
}

/* Sektionen, die im Theme ausdruecklich weiss gesetzt sind. */
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: rgb(255, 255, 255)"],
[style*="background-color: #f4f4f4"],
[style*="background-color:#f4f4f4"] {
  background-color: var(--kamui-tusche) !important;
}

/* ── Formularfelder ───────────────────────────────────────────────────
   Auf der Kontaktseite standen Eingabefelder in rgb(244,244,244).
   Ein Formular ist der Ort, an dem Vertrauen entsteht: es muss zur
   Marke gehoeren, nicht wie ein fremdes Element wirken. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
select,
textarea,
.brxe-form input,
.brxe-form textarea,
.brxe-form select {
  background-color: rgba(237, 225, 202, 0.06) !important;
  border: 1px solid rgba(237, 225, 202, 0.22) !important;
  color: var(--kamui-creme) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(237, 225, 202, 0.45) !important;
}

input:focus,
textarea:focus,
select:focus {
  background-color: rgba(237, 225, 202, 0.1) !important;
  border-color: rgba(237, 225, 202, 0.5) !important;
  outline: none !important;
}

/* Chrome faerbt automatisch ausgefuellte Felder hellblau bis weiss.
   Der Trick mit dem Inset-Schatten ist der einzige Weg, das zu
   ueberschreiben: background-color allein greift dort nicht. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1E2523 inset !important;
  -webkit-text-fill-color: var(--kamui-creme) !important;
  caret-color: var(--kamui-creme);
}

/* ── Fremde helle Hintergrundbilder aus dem Theme ─────────────────────
   Artison legt unter Textcontainer ein helles Foto
   (Expertise_Worldwide...webp). Auf der Haltungs- und der Kontaktseite
   erzeugte das grosse weisse Flaechen, auf denen der Text kaum stand.
   Das Bild gehoert nicht zur Marke und wird entfernt, nicht
   ueberdeckt. */
.content-section-zulu__content-wrapper,
div[class*="content-section-zulu"] {
  background-image: none !important;
  background-color: transparent !important;
}

/* ── Schwarzer Block im Fuss ──────────────────────────────────────────
   Der Fusscontainer trug ein ::after mit 170x60 px in rgb(0,0,0).
   Es sass mittig hinter dem Signet, unterbrach die duenne Trennlinie
   und war als dunkles Rechteck sichtbar, weil reines Schwarz neben
   Tusche rgb(22,27,25) auffaellt.

   Gemessen: an der Stelle rgb(0,0,0) statt rgb(22,27,25), der Block
   endete mit sichtbarer Kante quer durch das Signet.

   Das Theme nutzt dieses ::after als Aussparung fuer ein Logo, das
   dort urspruenglich mittig auf der Linie sass. Unser Signet steht
   frei darueber und braucht die Aussparung nicht. */
#brxe-bqqffz::after {
  content: none !important;
}

/* Falls dieselbe Konstruktion auf anderen Seiten unter anderer id
   auftaucht: der Fusscontainer bekommt generell keine schwarze
   Aussparung mehr. */
#brx-footer .brxe-container::after {
  background-color: transparent !important;
}

/* ── Ankreuzfelder ────────────────────────────────────────────────────
   Das Kontaktformular zeigte ein weisses Kaestchen vor der
   Datenschutzzeile: der Browser zeichnet Ankreuzfelder von sich aus
   weiss, und das faellt auf dunklem Grund sofort auf.

   accent-color faerbt das Haekchen im gesetzten Zustand, loest den
   weissen Rahmen im leeren Zustand aber nicht. Deshalb wird das Feld
   neu aufgebaut: Rahmen in Creme, Flaeche durchsichtig.

   NACHGEMESSEN: die erste Fassung hat nicht gegriffen. Gemessen kam
   2x2 px heraus statt 17x17, weil width und height ohne !important
   standen und das Theme sie ueberschrieb. Das sichtbare weisse
   Kaestchen war deshalb nicht das input, sondern ein Pseudoelement
   des Formulars, das die Aufgabe uebernommen hatte.

   Zusaetzlich sitzt das input NICHT im label, sondern daneben in
   LI > UL.options-wrapper. Regeln, die auf label input zielen,
   gehen ins Leere. */
:where(.brxe-form) input[type="checkbox"],
:where(.brxe-form) input[type="radio"],
.options-wrapper input[type="checkbox"],
.options-wrapper input[type="radio"],
input[type="checkbox"],
input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
  max-width: 17px !important;
  max-height: 17px !important;
  border: 1px solid rgba(237, 225, 202, 0.42) !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
  opacity: 1 !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Das Pseudoelement, das das Theme als Ersatzkaestchen zeichnet.
   Es stand in Weiss und war das, was im Bild zu sehen war. */
.options-wrapper label::before,
.options-wrapper li::before,
.brxe-form label::before,
.brxe-form .form-group label::before {
  background-color: transparent !important;
  border-color: rgba(237, 225, 202, 0.42) !important;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
  border-color: rgba(237, 225, 202, 0.72) !important;
}

/* Das Haekchen selbst: zwei Striche in Creme, gedreht. Kein Bild und
   keine Schriftart noetig, damit es ueberall gleich aussieht. */
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #EDE1CA;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg);
}

input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #EDE1CA;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid rgba(237, 225, 202, 0.55);
  outline-offset: 2px;
}

/* ── Marke im Fliesstext ──────────────────────────────────────────────
   Auf der Haltungsseite stand das Lockup mit 860x901 px neben dem
   Absatz - gemessen, nicht geschaetzt. Es war damit groesser als jede
   Ueberschrift der Seite und zog den Blick vom Text weg.

   Erst auf 200 px gedrosselt, am 25.08. dann ganz raus (Franky:
   "hier darf das logo weg"). Konsequent: dieselbe Marke steht auf
   derselben Seite schon im Kopf und im Fuss. Ein drittes Mal
   mitten im Text macht sie zur Tapete statt zum Absender - genau
   die Begruendung, aus der sie im Alltag-Abschnitt der Startseite
   schon weg ist (abstaende.css Punkt 1, arbeitsweise.css Punkt 3).

   display:none statt Loeschen im HTML: die Vorlage kommt aus dem
   Theme, ein spaeterer Export wuerde das Element wieder mitbringen.

   ACHTUNG - Abstandsreste: das Element trug margin-top 2.4rem.
   Bei display:none faellt der eigene Rand zwar weg, aber das
   Eltern-Grid behaelt seinen row-gap. Nachgemessen, siehe
   abstaende.css Punkt 5. */
#brxe-pgeidg {
  display: none !important;
}

/* ── Helle Abschnitte behalten Creme, nicht Weiss ─────────────────────
   Wo die Seite bewusst hell wird, ist der Ton Creme. */
.kamui-hell,
.kamui-hell section,
.kamui-hell .brxe-container {
  background-color: var(--kamui-creme) !important;
  color: var(--kamui-tusche) !important;
}

/* ── Was der Browser selbst faerbt ────────────────────────────────────
   Ohne das blitzt beim Laden und beim Ueberscrollen Weiss auf. */
::selection {
  background: rgba(237, 225, 202, 0.28);
  color: var(--kamui-creme);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--kamui-tusche);
}

::-webkit-scrollbar-thumb {
  background: rgba(237, 225, 202, 0.2);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(237, 225, 202, 0.34);
}