/* ==========================================================================
   bright color — Design-System "Signal", dritte Fassung

   Der Name der Firma ist das Programm. Die vier Logofarben sind keine
   Zierde, sondern Struktur: Sie markieren, wo ein Abschnitt anfängt und
   aufhört. Fließtext steht nie auf Farbe.

   Ohne diese Disziplin wird die Richtung auf einer Seite mit 900 Wörtern
   anstrengend — das war der erkennbare Schwachpunkt, als der Entwurf
   entstand, und die Regel ist die Antwort darauf.

   Anzeigeschrift ist Anton, ausschließlich in Versalien. Kanten sind hart,
   Rahmen zwei Pixel schwarz, es gibt keine Rundungen, keine Verläufe und
   keine Schlagschatten.

   Die Farbflächen selbst stehen NICHT hier, sondern in den
   Container-Einstellungen (bc_container, Schlüssel 'band'). Damit laufen
   sie von selbst über die volle Breite und sind im Elementor-Panel
   änderbar. Hier steht nur, welche Schriftfarbe auf welchem Band gilt.

   Wird über inc/bright-color.php NACH Jupiter X und Elementor eingehängt.
   Ohne das gewinnt bei gleicher Spezifität immer das Theme.
   ========================================================================== */

:root {
	/* Marke, unverändert aus dem Logo */
	--bc-cyan: #1dc3f3;
	--bc-lime: #bfd535;
	--bc-magenta: #ee318a;
	--bc-yellow: #fed329;
	--bc-violet: #aa4b88;

	/* Grundton. Papier bleibt warm, ist aber heller als in der zweiten
	   Fassung — die Farbflächen brauchen einen ruhigen Grund neben sich. */
	--bc-papier: #f2f0eb;
	--bc-flaeche: #ffffff;
	--bc-tinte: #111111;
	--bc-tinte-leise: #4a4a4a;
	--bc-linie: #dad6cd;
	--bc-linie-stark: #111111;

	--bc-aktion: #d61f7a;         /* Logo-Magenta abgedunkelt, 4,8:1 gegen Weiß */
	--bc-aktion-tief: #b81765;
	--bc-verweis: #8b3a6f;

	/* Bereichsfarbe, je Seite und Abschnitt umschaltbar */
	--bc-signal: #aa4b88;

	/* Keine Rundungen. Die Kante ist Teil der Aussage. */
	--bc-rundung: 0;
	--bc-rahmen: 2px solid #111111;

	/* Abstands-Leiter auf 8-px-Basis */
	--sp-1: 8px;
	--sp-2: 16px;
	--sp-3: 24px;
	--sp-4: 32px;
	--sp-6: 48px;
	--sp-8: 64px;
	--sp-12: 96px;

	--bc-schrift-anzeige: "Anton", Impact, "Haettenschweiler", system-ui, sans-serif;
	--bc-schrift-text: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
	--bc-schrift-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.bc-area-it       { --bc-signal: #1dc3f3; }
.bc-area-oss      { --bc-signal: #bfd535; }
.bc-area-kreativ  { --bc-signal: #d61f7a; }
.bc-area-produkte { --bc-signal: #fed329; }

/* Grundlagen ---------------------------------------------------------------- */

body.bc {
	font-family: var(--bc-schrift-text);
	color: var(--bc-tinte);
	background: var(--bc-papier);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Anton hat nur einen Schnitt und wirkt nur in Versalien. Deshalb tragen
   h1 und h2 sie, h3 dagegen nicht — eine Kartenüberschrift in Versalien
   wäre auf einer Textseite zu laut. */
body.bc h1,
body.bc h2,
body.bc .raven-heading-h1 .raven-heading-title,
body.bc .raven-heading-h2 .raven-heading-title {
	font-family: var(--bc-schrift-anzeige);
	font-weight: 400;
	color: var(--bc-tinte);
	line-height: 1.06;
	letter-spacing: .012em;
	text-transform: uppercase;
}

/* Laufweite und Zeilenabstand fuer Anton — beides gemessen, nicht geschaetzt.
 *
 * ZEILENABSTAND. Anton setzt die Punkte von AE OE UE auf 1,06 em ueber die
 * Grundlinie, die Versalhoehe liegt bei 0,86 em. Bei line-height .94 ragten die
 * Umlautpunkte also 0,12 em in die Zeile darueber. Auf der Startseite stand
 * LUEBECK unter KLEINEN — die Punkte verschmolzen mit den Buchstaben darueber,
 * das Wort las sich als LUBECK mit einer Stoerung darin. 1,06 ist der Wert, bei
 * dem sie gerade frei stehen; fuer eine schwere Schmalschrift immer noch eng.
 *
 * LAUFWEITE. Anton hat praktisch keine Seitenabstaende. Bei .005em klebten IT-S
 * und TZW aneinander — 0,4 px bei 83 px sind schlicht nichts. Weil optischer
 * Ausgleich mit steigendem Grad ABNIMMT, laeuft H2 weiter als H1:
 *
 *     Versal,   ab 40 px   ->  .012em
 *     Versal,   bis 40 px  ->  .02em
 *     gemischt, ab 30 px   ->  0
 *     gemischt, bis 30 px  ->  .01em
 *
 * Negative Laufweite gehoert zur Textschrift, nicht hierher: Anton ist in den
 * Kleinbuchstaben am engsten, dort schliesst sie die Punzen zu. */
body.bc h2,
body.bc .raven-heading-h2 .raven-heading-title { letter-spacing: .02em; }

body.bc h3,
body.bc h4,
body.bc .raven-heading-h3 .raven-heading-title,
body.bc .raven-heading-h4 .raven-heading-title {
	font-family: var(--bc-schrift-text);
	font-weight: 700;
	color: var(--bc-tinte);
	line-height: 1.25;
	letter-spacing: -.015em;
}

/* Schusterjungen — einzelne Wörter, die allein auf der letzten Zeile stehen.
 *
 * Gemessen auf vier Überschriften, darunter "WLAN, das auch hinten im Lager
 * TRÄGT". Ein Wort allein unter einer vollen Zeile liest sich wie ein
 * Versehen, gerade bei Anzeigengrösse.
 *
 * Erst stand hier pretty fuer die H1 und balance fuer den Rest — pretty
 * kuemmert sich laut Papier genau um die letzte Zeile. In der Messung tat es
 * schlicht nichts, Zeile fuer Zeile identisch mit dem Normalfall:
 *
 *     pretty    WLAN, das auch / hinten im Lager / traegt
 *     balance   WLAN, das / auch hinten im / Lager traegt
 *
 * Deshalb ueberall balance. Es verteilt die Zeilen gleichmaessig und loest den
 * Schusterjungen als Nebenwirkung. In Chrome greift es nur bis zu einer
 * begrenzten Zeilenzahl; darueber faellt es auf den Normalfall zurueck, was
 * genau das Verhalten von vorher ist — kein Rueckschritt, nur keine
 * Verbesserung mehr.
 */
body.bc h1,
body.bc h2,
body.bc h3,
body.bc .raven-heading-h1 .raven-heading-title,
body.bc .raven-heading-h2 .raven-heading-title,
body.bc .raven-heading-h3 .raven-heading-title,
body.bc .bc-cta .raven-cta__title { text-wrap: balance; }

/* raven-heading legt den Text in einen span und setzt darauf
   -webkit-text-fill-color. Ohne beide Regeln bleibt die Überschrift klein und
   in der Farbe des Themes. */
body.bc .raven-heading { margin: 0; }
body.bc .raven-heading-title { font-size: inherit; -webkit-text-fill-color: currentColor; }

body.bc h1,
body.bc .raven-heading-h1,
body.bc .raven-heading-h1 .raven-heading-title { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.2rem); }

body.bc h2,
body.bc .raven-heading-h2,
body.bc .raven-heading-h2 .raven-heading-title { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); }

body.bc h3,
body.bc .raven-heading-h3,
body.bc .raven-heading-h3 .raven-heading-title { font-size: 1.0625rem; }

body.bc p { margin: 0 0 1em; max-width: 34rem; }
body.bc p:last-child { margin-bottom: 0; }

body.bc a { color: var(--bc-verweis); text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* code war ungestylt und erbte das Hellpink des Themes — 3,8:1 auf Weiss. */
body.bc code {
	font-family: var(--bc-schrift-mono);
	font-size: .875em;
	color: var(--bc-tinte);
	background: var(--bc-flaeche);
	border: 1px solid var(--bc-linie);
	border-radius: 3px;
	padding: .1em .35em;
	word-break: break-word;
}
body.bc a:hover { color: var(--bc-aktion); }

body.bc :focus-visible {
	outline: 2px solid var(--bc-tinte);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Der Sprunglink braucht body.bc davor, sonst gewinnt die allgemeine
   Verweisfarbe: body.bc a hat (0,1,1), .bc-skip nur (0,1,0). Die Folge war
   #8b3a6f auf #111111 — 2,64:1 statt der 18,9:1, die hier gemeint waren.
   Sichtbar nur beim Tabben, also genau fuer die Leute, fuer die der Link da
   ist. Auf 21 Seiten der einzige Kontrastbefund. */
body.bc .bc-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--bc-tinte);
	color: #fff;
	-webkit-text-fill-color: #fff;
	padding: .75rem 1.25rem;
	z-index: 999;
}

body.bc .bc-skip:focus { left: 0; }

/* Abschnitt: Randspalte und Inhaltsspalte ----------------------------------- */

/* Der Rhythmus kommt aus dem Wechsel der Flächen, nicht aus einer Linie.
   Die Flächenfarbe selbst steht in den Container-Einstellungen; hier steht
   nur, welche Schriftfarbe darauf gilt und wo eine Trennung nötig bleibt. */
.bc-abschnitt > .e-con-inner { align-items: flex-start; }

/* Zwei aufeinanderfolgende Abschnitte OHNE eigenes Band grenzen sich durch
   eine Haarlinie ab — sonst verschwimmen sie zu einer Fläche. */
.bc-abschnitt:not(.bc-band) + .bc-abschnitt:not(.bc-band) > .e-con-inner {
	border-top: 1px solid var(--bc-linie);
}

/* Schriftfarbe je Band. Elementor kennt keine vererbende Textfarbe am
   Container, deshalb eine Regel je Fläche — der Container trägt die Klasse,
   die bc_container() aus dem Bandnamen bildet. */
body.bc .bc-band--tinte,
body.bc .bc-band--tinte p,
body.bc .bc-band--tinte li,
body.bc .bc-band--tinte .raven-heading-title,
body.bc .bc-band--tinte .elementor-icon-list-text,
body.bc .bc-band--tinte .elementor-icon-box-title,
body.bc .bc-band--magenta,
body.bc .bc-band--magenta p,
body.bc .bc-band--magenta li,
body.bc .bc-band--magenta .raven-heading-title,
body.bc .bc-band--magenta .elementor-icon-list-text,
body.bc .bc-band--magenta .elementor-icon-box-title,
body.bc .bc-band--violett,
body.bc .bc-band--violett p,
body.bc .bc-band--violett li,
body.bc .bc-band--violett .raven-heading-title,
body.bc .bc-band--violett .elementor-icon-list-text,
body.bc .bc-band--violett .elementor-icon-box-title {
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
}

body.bc .bc-band--cyan,
body.bc .bc-band--cyan p,
body.bc .bc-band--cyan li,
body.bc .bc-band--cyan .raven-heading-title,
body.bc .bc-band--cyan .elementor-icon-list-text,
body.bc .bc-band--cyan .elementor-icon-box-title {
	color: #05202a;
	-webkit-text-fill-color: #05202a;
}

body.bc .bc-band--gelb,
body.bc .bc-band--gelb p,
body.bc .bc-band--gelb li,
body.bc .bc-band--gelb .raven-heading-title,
body.bc .bc-band--gelb .elementor-icon-list-text,
body.bc .bc-band--gelb .elementor-icon-box-title,
body.bc .bc-band--limette,
body.bc .bc-band--limette p,
body.bc .bc-band--limette li,
body.bc .bc-band--limette .raven-heading-title,
body.bc .bc-band--limette .elementor-icon-list-text,
body.bc .bc-band--limette .elementor-icon-box-title {
	color: #111111;
	-webkit-text-fill-color: #111111;
}

/* Auf einem farbigen Band steht der Nebentext nicht mehr grau, sondern
   durchscheinend in der Schriftfarbe — grau auf Cyan wäre unlesbar. */
body.bc .bc-band .bc-notiz p,
body.bc .bc-band .bc-marginalie .raven-heading-title { opacity: .78; }

body.bc .bc-band--tinte .bc-notiz p { color: #b3aea3; -webkit-text-fill-color: #b3aea3; opacity: 1; }
body.bc .bc-band--tinte .bc-marginalie .raven-heading-title { color: #b3aea3; -webkit-text-fill-color: #b3aea3; opacity: 1; }
body.bc .bc-band--tinte .bc-notiz p { border-left-color: #4a453d; }

body.bc .bc-band a { color: inherit; text-decoration-thickness: 1px; }

/* Auf farbigem Grund braucht die Spaltentrennung eine passende Linie. */
@media (min-width: 1000px) {
	body.bc .bc-band--tinte > .e-con-inner > .bc-spalte { border-left-color: #4a453d; }
	body.bc .bc-band--cyan > .e-con-inner > .bc-spalte,
	body.bc .bc-band--gelb > .e-con-inner > .bc-spalte,
	body.bc .bc-band--limette > .e-con-inner > .bc-spalte { border-left-color: rgba(17, 17, 17, .28); }
	body.bc .bc-band--magenta > .e-con-inner > .bc-spalte,
	body.bc .bc-band--violett > .e-con-inner > .bc-spalte { border-left-color: rgba(255, 255, 255, .34); }
}

/* Die Randspalte.
 *
 * Auf schmalen Fenstern löst sie sich auf: display: contents hebt den Kasten
 * auf, Marginalie und Randnotiz werden zu direkten Kindern des Abschnitts und
 * lassen sich einzeln einsortieren. Nötig ist das, weil eine Randnotiz ein
 * Kommentar zum Text ist — steht sie darüber, verrät sie die Pointe, bevor man
 * den Satz gelesen hat. Auf der Startseite las man sonst als Erstes „Ja, ich
 * selbst. Es gibt hier sonst niemanden.", bevor klar war, wer „ich" ist.
 *
 * Die Marginalie darf oben bleiben: Sie ist eine Rubrik, keine Bemerkung.
 */
.bc-rand { flex: 0 0 100%; }

.bc-spalte { flex: 1 1 100%; min-width: 0; }

/* Unterhalb der Zweispaltigkeit löst sich die Randspalte auf: display: contents
   hebt den Kasten auf, Marginalie und Randnotiz werden zu direkten Kindern des
   Abschnitts und lassen sich einzeln einsortieren.
   Die Regeln stehen bewusst in der Media Query und nicht in der Basis — in der
   Randspalte, die eine Spalte ist, bedeutet flex-basis 100 % die volle HÖHE.
   Beide Kinder wurden dadurch 459 px hoch und brachen in eine zweite Spalte um. */
@media (max-width: 999.98px) {
	body.bc .bc-abschnitt > .e-con-inner > .bc-rand { display: contents; }
	body.bc .bc-abschnitt > .e-con-inner > .bc-rand > .bc-marginalie { order: 1; flex: 0 0 100%; }
	body.bc .bc-abschnitt > .e-con-inner > .bc-spalte { order: 2; }
	body.bc .bc-abschnitt > .e-con-inner > .bc-rand > .bc-notiz { order: 3; flex: 0 0 100%; margin-top: var(--sp-1); }
}

/* Elementor setzt Kind-Containern width: 100 %. Eine Klasse allein verliert
   dagegen — deshalb der volle Aufbau im Selektor. */
@media (min-width: 1000px) {
	body.bc .bc-abschnitt > .e-con-inner > .bc-rand {
		width: 190px;
		flex: 0 0 190px;
		position: sticky;
		top: 5.5rem;
	}

	body.bc .bc-abschnitt > .e-con-inner > .bc-spalte {
		width: auto;
		flex: 1 1 0;
		border-left: 1px solid var(--bc-linie);
		padding-left: var(--sp-6);
	}

	.bc-abschnitt + .bc-abschnitt > .e-con-inner { padding-top: var(--sp-4); }
}

/* Die Marginalie: Signalquadrat plus Kürzel in der Monoschrift. Sie sagt, in
   welchem Teil der Seite man ist — die Blätter des Logos als Status-LED. */
body.bc .bc-marginalie .raven-heading-title {
	display: inline-flex;
	align-items: baseline;
	gap: .6rem;
	font-family: var(--bc-schrift-text);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--bc-tinte-leise);
	line-height: 1.5;
}

body.bc .bc-marginalie .raven-heading-title::before {
	content: "";
	width: .7rem;
	height: .7rem;
	background: var(--bc-signal);
	flex: none;
	transform: translateY(-1px);
}

/* Die Randnotiz. Der beiläufige Satz neben dem Text — hier lebt der Ton der
   Seite. Bewusst keine Handschriftschrift: Die ist das offensichtlichste
   Signal für "menschlich" und wirkt deshalb gestellt. */
body.bc .bc-notiz p {
	font-size: .875rem;
	line-height: 1.5;
	color: var(--bc-tinte-leise);
	font-style: italic;
	padding-left: var(--sp-2);
	border-left: 2px solid var(--bc-linie-stark);
	max-width: 26ch;
}

/* Unter dem Text gelesen darf die Notiz die volle Zeilenbreite nutzen. */
@media (max-width: 999.98px) {
	body.bc .bc-notiz p { max-width: 44ch; }
}

/* Hero ---------------------------------------------------------------------- */

.bc-hero > .e-con-inner { padding-block: var(--sp-4) var(--sp-2); }

body.bc .bc-hero h1 { max-width: 18ch; }

body.bc .bc-lede p {
	font-size: clamp(1.125rem, 1.02rem + .4vw, 1.35rem);
	line-height: 1.45;
	color: var(--bc-tinte);
	max-width: 40ch;
}

/* Die Statuszeile: drei nachzählbare Fakten, gesetzt wie eine Terminalzeile.
   Sie ersetzt die übliche Kachelreihe mit Riesenzahlen. */
body.bc .bc-status p {
	font-family: var(--bc-schrift-mono);
	font-size: .8125rem;
	letter-spacing: .02em;
	color: var(--bc-tinte-leise);
	margin: var(--sp-2) 0 0;
	padding-top: var(--sp-2);
	border-top: 1px solid var(--bc-linie);
	max-width: 34rem;
}

.bc-status span { color: var(--bc-signal); padding: 0 .3rem; }

/* Die Szene ----------------------------------------------------------------- */

/* Ein kurzer Einstieg über eine typische Situation, abgesetzt gesetzt: etwas
   größer, in der Anzeigeschrift, mit einer Linie in der Signalfarbe. Sie soll
   sich lesen wie der Anfang einer Geschichte, nicht wie ein Werbeversprechen. */

body.bc .bc-szene p {
	font-family: var(--bc-schrift-anzeige);
	font-size: clamp(1.15rem, 1.05rem + .45vw, 1.45rem);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .01em;
	color: var(--bc-tinte);
	max-width: 44ch;
	padding-left: var(--sp-3);
	border-left: 3px solid var(--bc-signal);
}

body.bc .bc-szene p + p { margin-top: .7em; }

/* Fliesstext ---------------------------------------------------------------- */

/* Vier Absätze am Stück sind eine Wand. Der erste wird deshalb etwas grösser
   gesetzt — das gibt dem Auge einen Einstieg — und zwischen den Absätzen steht
   mehr Luft als der Vorgabewert. Beides ist so schwach dosiert, dass es nicht
   auffällt; es soll sich nur leichter lesen. */

/* Zeilenbreite in rem, nicht in ch.
 *
 * ch rechnet gegen die EIGENE Schriftgroesse: Der groessere erste Absatz wurde
 * dadurch breiter statt schmaler, und es standen bis zu 87 Zeichen in einer
 * Zeile. Gut lesbar sind 50 bis 75. In rem ist die Spalte fuer alle Absaetze
 * gleich breit, unabhaengig von der Groesse. */
body.bc .bc-fliess p {
	max-width: 34rem;          /* rund 68 Zeichen bei 17 px Atkinson */
	margin-bottom: 1.15em;
}

body.bc .bc-fliess p:first-child {
	font-size: 1.125rem;
	line-height: 1.55;
	max-width: 34rem;          /* dieselbe Spalte — nur groesser gesetzt */
}

body.bc .bc-fliess p:last-child { margin-bottom: 0; }

/* Ein Absatz, der mit einem fetten Wort beginnt, ist ein Listeneintrag in
   Absatzform — SPF, DKIM, DMARC. Er bekommt eine hängende Marke statt eines
   Aufzählungspunktes. */
body.bc .bc-fliess p > strong:first-child {
	color: var(--bc-tinte);
	font-weight: 600;
}

/* Knöpfe -------------------------------------------------------------------- */

.bc-actions { align-items: center; margin-top: var(--sp-1); }
.bc-actions > .elementor-widget { width: auto; flex: 0 0 auto; }

/* Schwarz, eckig, mindestens 48 px hoch. Die Aktionsfarbe steckt in der
   Fläche darum herum, nicht im Knopf — sonst konkurrieren beide. */
body.bc .raven-button.elementor-button {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	font-family: var(--bc-schrift-text);
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.2;
	padding: .9rem 1.6rem;
	border-radius: 0;
	border: 2px solid var(--bc-tinte);
	background: var(--bc-tinte);
	color: #fff;
	text-decoration: none;
	transition: transform .12s ease, box-shadow .12s ease;
}

body.bc .raven-button.elementor-button:hover {
	background: var(--bc-tinte);
	color: #fff;
	transform: translate(-2px, -2px);
	box-shadow: 2px 2px 0 var(--bc-signal);
}

/* Der Knopf trägt seine eigene Schriftfarbe. Ohne diese Zeile erbt er die
   -webkit-text-fill-color des Bandes — auf Cyan wurde die Beschriftung
   dunkelblau auf Schwarz und war schlicht nicht zu sehen. */
body.bc .raven-button.elementor-button,
body.bc .raven-button.elementor-button span { -webkit-text-fill-color: currentColor; }

body.bc .raven-button.elementor-button:focus-visible { outline: 3px solid var(--bc-cyan); outline-offset: 3px; }
body.bc .raven-button.elementor-button:active { transform: none; box-shadow: none; }

body.bc .bc-btn-geist .raven-button.elementor-button {
	background: transparent;
	color: var(--bc-tinte);
	border-color: var(--bc-tinte);
}

body.bc .bc-btn-geist .raven-button.elementor-button:hover {
	background: transparent;
	color: var(--bc-tinte);
}

/* Auf dunklem Band dreht sich der Knopf um: helle Fläche, dunkle Schrift. */
body.bc .bc-band--tinte .raven-button.elementor-button,
body.bc .bc-band--magenta .raven-button.elementor-button,
body.bc .bc-band--violett .raven-button.elementor-button {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--bc-tinte);
	-webkit-text-fill-color: var(--bc-tinte);
}

body.bc .bc-band--tinte .bc-btn-geist .raven-button.elementor-button,
body.bc .bc-band--magenta .bc-btn-geist .raven-button.elementor-button,
body.bc .bc-band--violett .bc-btn-geist .raven-button.elementor-button {
	background: transparent;
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
}

/* Störungsmelder ------------------------------------------------------------ */

/* Der Direkteinstieg über das Symptom. Zwei Spalten, große Klickflächen, und
   die vier Logofarben laufen als Signalquadrate durch die Liste. */

.bc-stoerung .elementor-icon-list-items {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--sp-6);
	margin: 0;
}

@media (min-width: 780px) {
	.bc-stoerung .elementor-icon-list-items { grid-template-columns: 1fr 1fr; }
}

/* Jeder Eintrag ist ein eigener Kasten, kein Zeileneintrag mehr — auf dem
   Handy ist das die 56-px-Klickfläche, die eine Liste nicht hergibt. */
.bc-stoerung .elementor-icon-list-item {
	margin: 0 0 10px;
	background: #ffffff;
	border: var(--bc-rahmen);
	transition: transform .12s ease, box-shadow .12s ease;
}

.bc-stoerung .elementor-icon-list-item:hover {
	transform: translate(-3px, -3px);
	box-shadow: 3px 3px 0 var(--bc-signal);
}

body.bc .bc-stoerung .elementor-icon-list-item > a {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 56px;
	padding: .85rem 1.1rem;
	text-decoration: none;
	color: var(--bc-tinte);
}

body.bc .bc-stoerung .elementor-icon-list-item > a:hover { color: var(--bc-tinte); }

body.bc .bc-stoerung .elementor-icon-list-text {
	font-family: var(--bc-schrift-anzeige);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: .01em;
	line-height: 1.3;
}

.bc-stoerung .elementor-icon-list-icon { flex: none; }
.bc-stoerung .elementor-icon-list-icon svg,
.bc-stoerung .elementor-icon-list-icon i { display: none; }

.bc-stoerung .elementor-icon-list-icon::before {
	content: "";
	display: block;
	width: .5rem;
	height: 1.9rem;
	background: var(--bc-violet);
}

.bc-stoerung .elementor-icon-list-item:nth-child(4n+1) .elementor-icon-list-icon::before { background: var(--bc-cyan); }
.bc-stoerung .elementor-icon-list-item:nth-child(4n+2) .elementor-icon-list-icon::before { background: var(--bc-lime); }
.bc-stoerung .elementor-icon-list-item:nth-child(4n+3) .elementor-icon-list-icon::before { background: var(--bc-magenta); }
.bc-stoerung .elementor-icon-list-item:nth-child(4n+4) .elementor-icon-list-icon::before { background: var(--bc-yellow); }

/* Raster aus Zellen --------------------------------------------------------- */

/* Karten sind Kästen mit hartem schwarzem Rahmen, nicht Zellen in einem
   Raster aus Haarlinien. Der Abstand zwischen ihnen ist echt, nicht eine
   Fuge — das trägt die Plakatsprache der Richtung. */

/* Grid statt Flexbox.
 *
 * Mit flex-basis hing der Umbruch an einer handgerechneten Zahl: Bei 1024 px
 * ist die Inhaltsspalte 679 px breit, drei Karten brauchten 3 × 220 + 2 × 12
 * = 684 px. Fuenf Pixel zu wenig — das Raster fiel auf zwei Spalten und sprang
 * bei 1280 px zurueck auf drei. Das sieht aus wie ein Fehler, nicht wie eine
 * Entscheidung. repeat(auto-fit, minmax(...)) rechnet es selbst aus, der
 * Umbruch ist monoton. */

.bc-raster,
.bc-leiste,
.bc-preise {
	display: grid;
	gap: 12px;
	align-items: stretch;
}

/* Feste Spaltenzahl je Stufe statt auto-fit.
 *
 * auto-fit rechnet aus, wie viele Karten passen — und kam bei 1280 px auf
 * VIER. Bei sechs Kacheln bleibt dann eine Zweierreihe uebrig. Wie viele
 * Spalten richtig sind, ist eine Gestaltungsentscheidung (sechs Kacheln wollen
 * 3 × 2), keine Rechenaufgabe. Die Stufen beruecksichtigen, dass die
 * Inhaltsspalte ab 1000 px um die 190 px breite Randspalte schmaler wird. */

.bc-raster,
.bc-leiste,
.bc-preise { grid-template-columns: 1fr; }

@media (min-width: 520px) {
	.bc-raster,
	.bc-leiste  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
	.bc-raster,
	.bc-leiste  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
	.bc-raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 560px) {
	.bc-preise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
	.bc-preise { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Elementor setzt Kind-Containern width: 100 %. Im Grid ist das die Zellbreite
   und damit richtig — min-width: 0 verhindert, dass lange Woerter die Spalte
   sprengen. */
.bc-raster > .elementor-widget,
.bc-leiste > .elementor-widget,
.bc-preise > .elementor-widget { width: auto; min-width: 0; }

.bc-karte,
.bc-prod,
.bc-preis {
	background: #ffffff;
	border: var(--bc-rahmen);
	transition: transform .12s ease, box-shadow .12s ease;
}

.bc-karte { padding: var(--sp-3); }

/* Die ganze Karte anklickbar ---------------------------------------------- */

/*
 * Gemessen: Die Karte ist 292 x 224 px und hebt sich beim Ueberfahren wie ein
 * Knopf. Anklickbar waren aber nur der Titeltext (175 x 22) und das Symbol
 * (22 x 22) — zusammen 6,6 Prozent der Flaeche. Auf dem Rest wechselte nicht
 * einmal der Mauszeiger. Die Karte versprach etwas, das sie nicht einloeste,
 * und auf dem Handy trifft man einen 22 px hohen Streifen schlecht.
 *
 * Der Ausweg ist die gestreckte Verknuepfung: ein ::after am Titelanker, das
 * sich unsichtbar ueber die ganze Karte legt. Im Baum der Bedienhilfen bleibt
 * es dabei EIN Verweis mit dem Titel als Beschriftung — deshalb dieses Muster
 * und nicht ein zweiter Anker um alles herum, der doppelt vorgelesen wuerde.
 *
 * Preis: Text laesst sich in der Karte nicht mehr markieren. Bei einer Kachel,
 * die ohnehin nur weiterfuehrt, ist das der guenstigere Tausch.
 */
body.bc .bc-karte,
body.bc .bc-prod { position: relative; }

body.bc .bc-karte .elementor-icon-box-title a::after,
body.bc .bc-prod .elementor-icon-box-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Ohne eigene Ebene gewinnt der Beschreibungstext die Trefferpruefung in
	   der Kartenmitte — nachgemessen mit elementFromPoint: drei von vier
	   Punkten trafen den Verweis, der vierte den Absatz darunter. */
	z-index: 1;
}

/* Der Pfeil unten links ---------------------------------------------------- */

/*
 * Die Beschreibungen sind zwei bis vier Zeilen lang, die Karten einer Reihe
 * aber gleich hoch. Gemessen blieben in der kuerzesten 47 px totes Weiss unten
 * — das liest sich, als fehle dort etwas.
 *
 * Der Pfeil sitzt in jeder Karte an derselben Stelle und macht aus dem Rest
 * Struktur statt Zufall: eine zweite Fluchtlinie quer durch die Reihe. Und er
 * sagt, was die Karte tut, naemlich weiterfuehren.
 *
 * Der Schraegstrich im content-Wert gibt dem Zeichen eine leere Ersatzbe-
 * schriftung. Vorlesegeraete ueberspringen es damit — ein Pfeil ist Zierde,
 * kein Text.
 */
body.bc .bc-karte {
	display: flex;
	flex-direction: column;
}

/* Beide Namen, weil Elementor den Zwischencontainer nicht in jeder Fassung
   setzt: Hier ist das direkte Kind der Karte der Symbolkasten selbst. Erst mit
   der falschen Annahme gebaut, dann im DOM nachgesehen. */
body.bc .bc-karte > .elementor-icon-box-wrapper,
body.bc .bc-karte > .elementor-widget-container { flex: 1 1 auto; }

body.bc .bc-karte::after {
	content: "→" / "";
	display: block;
	margin-top: var(--sp-2);
	font-size: 1.125rem;
	line-height: 1;
	opacity: .5;
	transition: transform .12s ease, opacity .12s ease;
}

body.bc .bc-karte:hover::after {
	opacity: 1;
	transform: translateX(4px);
}

/* Der Griff beim Überfahren: ein harter Versatz mit schwarzem Schlagrand.
   Kein weicher Schatten — das wäre die falsche Sprache. */
.bc-karte:hover,
.bc-prod:hover {
	transform: translate(-3px, -3px);
	box-shadow: 3px 3px 0 var(--bc-signal);
}

/* Auf einem farbigen Band stehen die Karten weiss und behalten schwarze
   Schrift — sonst erbt sie die Bandfarbe und verschwindet. */
body.bc .bc-band .bc-karte,
body.bc .bc-band .bc-prod,
body.bc .bc-band .bc-karte .elementor-icon-box-title,
body.bc .bc-band .bc-karte .elementor-icon-box-description {
	color: var(--bc-tinte);
	-webkit-text-fill-color: var(--bc-tinte);
}

body.bc .bc-karte .elementor-icon-box-wrapper { text-align: left; width: 100%; }

.bc-karte .elementor-icon-box-icon { margin: 0 0 var(--sp-2); display: flex; justify-content: flex-start; }
.bc-karte .elementor-icon-box-icon .elementor-icon { color: var(--bc-signal); font-size: 1.4rem; }

/* Karten ohne Symbol bekommen einen Strich in der Signalfarbe. */
.bc-karte--ohne-symbol .elementor-icon-box-wrapper::before {
	content: "";
	display: block;
	width: 1.75rem;
	height: 3px;
	background: var(--bc-signal);
	margin-bottom: var(--sp-2);
}

body.bc .bc-karte .elementor-icon-box-title { font-size: 1.125rem; margin: 0 0 .4rem; line-height: 1.25; }
body.bc .bc-karte .elementor-icon-box-title a { color: var(--bc-tinte); text-decoration: none; }
body.bc .bc-karte .elementor-icon-box-title a:hover { color: var(--bc-aktion); }

.bc-karte .elementor-icon-box-description { color: var(--bc-tinte-leise); font-size: .9375rem; margin: 0; line-height: 1.5; }

/* Produktleiste */

.bc-prod { padding: var(--sp-3); }
body.bc .bc-prod .elementor-icon-box-wrapper { text-align: left; }

body.bc .bc-prod .elementor-icon-box-title {
	font-family: var(--bc-schrift-mono);
	font-size: .9375rem;
	font-weight: 400;
	margin: 0 0 .4rem;
	display: flex;
	align-items: center;
	gap: .5rem;
}

body.bc .bc-prod .elementor-icon-box-title a { color: var(--bc-tinte); text-decoration: none; }
body.bc .bc-prod .elementor-icon-box-title a:hover { color: var(--bc-aktion); }

.bc-prod .elementor-icon-box-title::before { content: ""; width: .5rem; height: .5rem; flex: none; background: var(--bc-violet); }
.bc-prod--swayy .elementor-icon-box-title::before { background: var(--bc-magenta); }
.bc-prod--crt-watch .elementor-icon-box-title::before { background: var(--bc-cyan); }
.bc-prod--sender-report .elementor-icon-box-title::before { background: var(--bc-lime); }
.bc-prod--invoicer .elementor-icon-box-title::before { background: var(--bc-yellow); }

.bc-prod .elementor-icon-box-description { color: var(--bc-tinte-leise); font-size: .9375rem; margin: 0; line-height: 1.5; }

/* Listen -------------------------------------------------------------------- */

.bc-check .elementor-icon-list-items,
.bc-liste .elementor-icon-list-items { display: grid; gap: .7rem; }

.bc-check .elementor-icon-list-item,
.bc-liste .elementor-icon-list-item { align-items: flex-start; }

.bc-check .elementor-icon-list-icon,
.bc-liste .elementor-icon-list-icon { padding-top: .35em; margin-right: .6rem; flex: none; }

.bc-check .elementor-icon-list-icon svg,
.bc-check .elementor-icon-list-icon i { font-size: .75rem; width: .85rem; color: var(--bc-signal); }

/* Die Verneinungsliste bekommt bewusst einen ruhigen Strich statt eines
   Häkchens — es geht nicht um Verzicht, sondern um Klarheit. */
.bc-liste .elementor-icon-list-icon svg,
.bc-liste .elementor-icon-list-icon i { font-size: .7rem; width: .85rem; color: var(--bc-linie-stark); }

/* Verweise INNERHALB eines Listenpunkts ------------------------------------ */

/*
 * Elementors widget-icon-list.min.css setzt
 *     .elementor-widget .elementor-icon-list-item a { display: flex }
 * weil es davon ausgeht, dass der Anker den ganzen Punkt umschliesst — so ist
 * es bei .bc-stoerung, wo jede Zeile ein Verweis ist.
 *
 * Steht ein Verweis aber IM Fliesstext eines Punktes, erbt er diese Regel und
 * wird zum Block: "Server, Postfaecher, Domainlaufzeiten" brach mitten im Satz
 * um, und das Komma dahinter landete allein auf der naechsten Zeile.
 *
 * Der Selektor greift nur innerhalb von .elementor-icon-list-text und damit
 * nur bei Verweisen im Text. Die umschliessenden Anker liegen eine Ebene
 * darueber und bleiben unberuehrt. body.bc und .elementor-widget davor,
 * weil Elementors Regel (0,3,0) sonst gewinnt.
 */
body.bc .elementor-widget .elementor-icon-list-text a {
	display: inline;
}

/* Der Zusatz unter dem Preis brach als "im Monat, inkl." / "USt." um. */
body.bc .bc-preis .raven-pricing-table__period { text-wrap: balance; }

body.bc .bc-check .elementor-icon-list-text,
body.bc .bc-liste .elementor-icon-list-text { color: var(--bc-tinte); line-height: 1.55; }

body.bc .bc-nach p { color: var(--bc-tinte-leise); font-size: .9375rem; }

/* Ablaufschritte ------------------------------------------------------------ */

.bc-schritte { counter-reset: bc-schritt; }

.bc-schritt {
	counter-increment: bc-schritt;
	position: relative;
	padding-left: 2.75rem;
	width: 100%;
}

body.bc .bc-schritt .elementor-icon-box-wrapper { text-align: left; }

.bc-schritt .elementor-icon-box-wrapper::before {
	content: counter(bc-schritt);
	position: absolute;
	left: 0;
	top: .1rem;
	font-family: var(--bc-schrift-mono);
	font-size: .8125rem;
	color: var(--bc-signal);
}

body.bc .bc-schritt .elementor-icon-box-title { font-size: 1.125rem; margin: 0 0 .25rem; }
.bc-schritt .elementor-icon-box-description { color: var(--bc-tinte-leise); font-size: .9375rem; margin: 0; }

/* Fragen und Antworten ------------------------------------------------------ */

.bc-faq .elementor-toggle { display: block; }

.bc-faq .elementor-toggle-item { border-bottom: 1px solid var(--bc-linie); }
.bc-faq .elementor-toggle-item:first-child { border-top: 1px solid var(--bc-linie); }

body.bc .bc-faq .elementor-tab-title {
	font-family: var(--bc-schrift-anzeige);
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: -.015em;
	padding: 1rem 2.5rem 1rem 0;
	border: 0;
	color: var(--bc-tinte);
}

.bc-faq .elementor-tab-title.elementor-active { color: var(--bc-aktion); }
.bc-faq .elementor-toggle-icon { color: var(--bc-tinte-leise); font-size: .7rem; }
.bc-faq .elementor-tab-content { border: 0; padding: 0 0 1.25rem; color: var(--bc-tinte-leise); }

/* Handlungsaufforderung ----------------------------------------------------- */

.bc-cta .raven-cta {
	background: var(--bc-tinte);
	color: #f4f2ec;
	padding: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
	border-radius: var(--bc-rundung);
}

.bc-cta .raven-cta__bg-wrapper { display: none; }

/* Raven legt in die CTA ein zweites Feld mit eigenem Hintergrund (#f6f6f6).
   Ohne Gegenregel steht die weisse Schrift auf Hellgrau — unsichtbar, und zwar
   auf allen 18 CTA-Blöcken. Die Farbe kommt aus dem Plugin-Stylesheet und ist
   nur eine Klasse stark; Ausrichtung und Mindesthöhe dagegen erzeugt Elementor
   mit vier Klassen aus den Widget-Vorgaben — die stehen deshalb in
   bc_baustein_cta() und nicht hier. */
body.bc .bc-cta .raven-cta__content { background: none; }

body.bc .bc-cta .raven-cta__title { margin: 0 0 .5rem; color: #fff; }
body.bc .bc-cta .raven-cta__title .raven-heading-title { color: #fff; }
.bc-cta .raven-cta__description { color: rgba(244, 242, 236, .72); margin: 0 0 1.5rem; max-width: 50ch; }

body.bc .bc-cta .raven-cta__button {
	background: var(--bc-aktion);
	color: #fff;
	border-radius: var(--bc-rundung);
	padding: .8rem 1.4rem;
	font-family: var(--bc-schrift-text);
	font-weight: 700;
	text-decoration: none;
	display: inline-block;
}

body.bc .bc-cta .raven-cta__button:hover { background: var(--bc-aktion-tief); color: #fff; }

/* Verweise im dunklen Kasten. Ohne diese Regel behalten sie --bc-verweis, die
   für hellen Grund gemacht ist — auf Tinte sind das 2,5:1. */
body.bc .bc-cta a:not(.raven-cta__button),
body.bc .bc-cta .raven-cta__description a {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, .55);
}

body.bc .bc-cta a:not(.raven-cta__button):hover { text-decoration-color: #fff; }

/* Diagramme ----------------------------------------------------------------- */

/* Die Zeichnungen erben die Farben der Seite. Deshalb eingebettetes SVG und
   keine Bilddatei: --bc-signal schaltet je Bereich um, eine PNG müsste man
   viermal anlegen. */

.bc-diagramm { margin: var(--sp-2) 0 0; }

.bc-svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 760px;
	overflow: visible;
}

.bc-svg__spur       { fill: var(--bc-papier); stroke: var(--bc-linie-stark); stroke-width: 1; }
.bc-svg__box        { fill: var(--bc-flaeche); stroke: var(--bc-linie-stark); stroke-width: 1; }
.bc-svg__tor        { fill: var(--bc-flaeche); stroke: var(--bc-linie); stroke-width: 1; }
.bc-svg__paket      { fill: var(--bc-signal); stroke: none; opacity: .5; }

.bc-svg__paket--kasse   { fill: var(--bc-aktion); opacity: 1; }
.bc-svg__paket--warnung { fill: var(--bc-aktion); opacity: .16; }

.bc-svg__box--sicher    { stroke: var(--bc-signal); stroke-width: 2; }
.bc-svg__box--getroffen { stroke: var(--bc-aktion); stroke-width: 2; stroke-dasharray: 5 4; }

.bc-svg__marke { stroke: var(--bc-tinte); stroke-width: 1; }

.bc-svg__pfeil { stroke: var(--bc-tinte-leise); stroke-width: 1.5; fill: none; }
.bc-svg__pfeil--gestrichelt { stroke-dasharray: 4 4; }
.bc-svg__spitzefarbe { fill: var(--bc-tinte-leise); }

/* Stand in Anton bei 15 px mit font-weight 600 — eine Anzeigeschrift auf
   Beschriftungsgroesse, dazu kuenstlich fettgerechnet. Atkinson hat einen
   echten fetten Schnitt und ist fuer diese Groesse gebaut. */
.bc-svg__titel {
	font-family: var(--bc-schrift-text);
	font-size: 15px;
	font-weight: 700;
	fill: var(--bc-tinte);
}

.bc-svg__klein   { font-family: var(--bc-schrift-text); font-size: 12.5px; fill: var(--bc-tinte-leise); }
.bc-svg__hinweis { font-family: var(--bc-schrift-text); font-size: 12.5px; fill: var(--bc-tinte); }

.bc-svg__rubrik {
	font-family: var(--bc-schrift-mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	fill: var(--bc-tinte-leise);
}

.bc-svg__achse {
	font-family: var(--bc-schrift-mono);
	font-size: 11px;
	fill: var(--bc-tinte-leise);
}

.bc-svg__erfolg  { font-family: var(--bc-schrift-text); font-size: 13px; font-weight: 700; fill: var(--bc-tinte); }
.bc-svg__warnung { font-family: var(--bc-schrift-text); font-size: 13px; font-weight: 700; fill: var(--bc-aktion-tief); }

body.bc .bc-bildtext p {
	font-family: var(--bc-schrift-mono);
	font-size: .75rem;
	line-height: 1.6;
	color: var(--bc-tinte-leise);
	max-width: 62ch;
	padding-top: var(--sp-1);
	border-top: 1px solid var(--bc-linie);
}

/* Zahlen -------------------------------------------------------------------- */

/* Keine Kacheln mit Riesenziffern und Wachstumspfeilen — das ist die
   Bildsprache von Firmen, die nichts zu zeigen haben. Hier stehen Zahlen, die
   sich in der eigenen Verwaltung abzählen lassen. */

.bc-zahlen {
	background: var(--bc-linie);
	border: 1px solid var(--bc-linie);
	align-items: stretch;
}

.bc-zahlen > .elementor-widget { flex: 1 1 clamp(150px, 22%, 240px); width: auto; min-width: 0; }

.bc-zahl { background: var(--bc-flaeche); padding: var(--sp-3); }

body.bc .bc-zahl .elementor-icon-box-wrapper { text-align: left; width: 100%; }

body.bc .bc-zahl .elementor-icon-box-title {
	font-family: var(--bc-schrift-anzeige);
	font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.9rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	color: var(--bc-tinte);
	margin: 0 0 .45rem;
}

body.bc .bc-zahl .elementor-icon-box-description {
	font-size: .875rem;
	line-height: 1.45;
	color: var(--bc-tinte-leise);
	margin: 0;
}

.bc-zahl__dazu {
	display: block;
	font-family: var(--bc-schrift-mono);
	font-size: .6875rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bc-signal);
	margin-top: .35rem;
}

/* Der herausgestellte Satz -------------------------------------------------- */

body.bc .bc-zitat p {
	font-family: var(--bc-schrift-anzeige);
	font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.35rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--bc-tinte);
	max-width: 22ch;
	text-wrap: balance;
}

body.bc .bc-zitat p::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	background: var(--bc-signal);
	margin-bottom: var(--sp-3);
}

body.bc .bc-zitat__quelle p {
	font-family: var(--bc-schrift-mono);
	font-size: .75rem;
	letter-spacing: .06em;
	color: var(--bc-tinte-leise);
	margin-top: var(--sp-2);
}

/* Gegenüberstellung --------------------------------------------------------- */

.bc-gegen {
	background: var(--bc-linie);
	border: 1px solid var(--bc-linie);
	align-items: stretch;
}

.bc-gegen > .elementor-element { flex: 1 1 clamp(260px, 48%, 460px); width: auto; min-width: 0; }

.bc-gegen__seite { background: var(--bc-flaeche); padding: var(--sp-3); }
.bc-gegen__seite--rechts { background: #fff; }

body.bc .bc-gegen__titel .raven-heading-title {
	font-size: 1.125rem;
	letter-spacing: -.015em;
}

body.bc .bc-gegen__seite--links .bc-gegen__titel .raven-heading-title { color: var(--bc-tinte-leise); }

body.bc .bc-gegen__unter p {
	font-family: var(--bc-schrift-mono);
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bc-tinte-leise);
	margin: 0;
}

body.bc .bc-gegen__liste .elementor-icon-list-item { margin-bottom: .55rem; align-items: flex-start; }
body.bc .bc-gegen__liste .elementor-icon-list-text { font-size: .9375rem; line-height: 1.5; }

body.bc .bc-gegen__seite--links .elementor-icon-list-icon i { color: var(--bc-linie-stark); }
body.bc .bc-gegen__seite--links .elementor-icon-list-text { color: var(--bc-tinte-leise); }
body.bc .bc-gegen__seite--rechts .elementor-icon-list-icon i { color: var(--bc-signal); }

/* Dunkle Abschnitte --------------------------------------------------------- */

/* Eine Zäsur im Seitenfluss. Einer je Seite wirkt; drei wirken wie ein anderes
   Design. Der Abschnitt bricht aus dem Papierton aus, die Randspalte läuft
   mit. */

.bc-abschnitt--dunkel { background: var(--bc-tinte); }
.bc-abschnitt--dunkel + .bc-abschnitt > .e-con-inner,
.bc-abschnitt--dunkel > .e-con-inner { border-top-color: transparent; }

body.bc .bc-abschnitt--dunkel,
body.bc .bc-abschnitt--dunkel p,
body.bc .bc-abschnitt--dunkel .raven-heading-title { color: #f4f2ec; -webkit-text-fill-color: #f4f2ec; }

body.bc .bc-abschnitt--dunkel .bc-marginalie .raven-heading-title { color: #b3aea3; -webkit-text-fill-color: #b3aea3; }
body.bc .bc-abschnitt--dunkel .bc-notiz p { color: #b3aea3; border-left-color: #4a453d; }
body.bc .bc-abschnitt--dunkel .bc-zitat p { color: #fff; }
body.bc .bc-abschnitt--dunkel .bc-zitat__quelle p { color: #b3aea3; }
body.bc .bc-abschnitt--dunkel a { color: #fff; text-decoration-color: rgba(255, 255, 255, .55); }

@media (min-width: 1000px) {
	body.bc .bc-abschnitt--dunkel > .e-con-inner > .bc-spalte { border-left-color: #4a453d; }
}

/* Titel unterhalb der Abschnittsebene ---------------------------------------- */

/* Anton ist eine schmallaufende Plakatschrift und wirkt nur in Versalien.
   In Gemischtschreibung bei 18 px wird sie eng und schwerer lesbar — genau
   das stand auf den Karten und in den FAQ-Fragen, entgegen der eigenen Regel
   ("h3 abwaerts traegt den Fliesstext"). */

/* Die Anker muessen ausdruecklich mitgenannt werden. Elementors erzeugtes CSS
   adressiert .elementor-widget-icon-box .elementor-icon-box-title A selbst und
   setzt dort die Kit-Typografie — also Anton. Eine Regel auf dem Elternelement
   wird davon ueberschrieben, sie erbt nicht hinein. Die Folge: Anton in
   Gemischtschreibung auf 6 Kartentiteln, 23 FAQ-Fragen und 3 Produkttiteln,
   der kleinste bei 15 px. Gemessen, nicht vermutet. */
body.bc .bc-karte .elementor-icon-box-title,
body.bc .bc-karte .elementor-icon-box-title a,
body.bc .bc-prod .elementor-icon-box-title,
body.bc .bc-prod .elementor-icon-box-title a,
body.bc .bc-schritt .elementor-icon-box-title,
body.bc .bc-schritt .elementor-icon-box-title a,
body.bc .bc-faq .elementor-tab-title,
body.bc .bc-faq .elementor-tab-title a,
body.bc .bc-gegen__titel .raven-heading-title {
	font-family: var(--bc-schrift-text);
	font-weight: 700;
	letter-spacing: -.015em;
	text-transform: none;
}

body.bc .bc-faq .elementor-tab-title { font-size: 1.125rem; }

/* Der CTA-Titel dagegen IST eine Abschnittsueberschrift und gehoert in die
   Anzeigeschrift — er stand bei 16 px und damit kleiner als der Fliesstext
   daneben. */
body.bc .bc-cta .raven-cta__title {
	font-family: var(--bc-schrift-anzeige);
	font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: .02em;
	text-transform: uppercase;
}

body.bc .bc-cta .raven-cta__description { font-size: 1.0625rem; line-height: 1.6; }

/* Bunte Kacheln -------------------------------------------------------------- */

/* Die Signatur der Startseite: das Leistungsraster als Farbfeld. Die Folge
   ist fest, damit sie auf jeder Seite gleich läuft und nicht bei jedem
   Umsortieren neu würfelt. Jede Paarung ist gemessen — siehe bc_band(). */

.bc-karte--bunt { border-color: transparent; }
.bc-karte--bunt:hover { box-shadow: 3px 3px 0 var(--bc-tinte); }

body.bc .bc-karte--bunt,
body.bc .bc-karte--bunt .elementor-icon-box-title,
body.bc .bc-karte--bunt .elementor-icon-box-description,
body.bc .bc-karte--bunt .elementor-icon-box-title a {
	-webkit-text-fill-color: currentColor;
}

/* Die Klasse sitzt AM Widget, nicht darin — bc_widget() schreibt sie nach
   _css_classes auf das Element selbst. Ein Nachfahren-Selektor greift hier
   ins Leere, deshalb :nth-child direkt auf der Kachel. */
body.bc .bc-raster > .bc-karte--bunt:nth-child(6n+1) { background: #111111; color: #ffffff; }
body.bc .bc-raster > .bc-karte--bunt:nth-child(6n+2) { background: #1dc3f3; color: #05202a; }
body.bc .bc-raster > .bc-karte--bunt:nth-child(6n+3) { background: #d61f7a; color: #ffffff; }
body.bc .bc-raster > .bc-karte--bunt:nth-child(6n+4) { background: #fed329; color: #111111; }
body.bc .bc-raster > .bc-karte--bunt:nth-child(6n+5) { background: #bfd535; color: #111111; }
body.bc .bc-raster > .bc-karte--bunt:nth-child(6n+6) { background: #aa4b88; color: #ffffff; }

/* Titel und Text erben die Kachelfarbe. Ohne diese Zeile setzt Elementor
   sie auf die globale Textfarbe zurueck. */
body.bc .bc-raster > .bc-karte--bunt .elementor-icon-box-title,
body.bc .bc-raster > .bc-karte--bunt .elementor-icon-box-title a,
body.bc .bc-raster > .bc-karte--bunt .elementor-icon-box-description {
	color: inherit;
	-webkit-text-fill-color: currentColor;
}

/* Die Farbe muss an .elementor-icon selbst — DORT steht die Bereichsfarbe.
   Ein color: inherit am Kind erbt genau diese Farbe zurueck und aendert
   nichts; die Symbole blieben violett auf jeder Kachel. */
body.bc .bc-raster > .bc-karte--bunt .elementor-icon-box-icon .elementor-icon,
body.bc .bc-raster > .bc-karte--bunt .elementor-icon-box-icon .elementor-icon i,
body.bc .bc-raster > .bc-karte--bunt .elementor-icon-box-icon .elementor-icon svg {
	color: inherit;
	fill: currentColor;
}

body.bc .bc-raster > .bc-karte--bunt .elementor-icon-box-description { opacity: .84; }

/* Zähler -------------------------------------------------------------------- */

/* raven-counter zählt beim Scrollen hoch. Das ist die eine Bewegung auf der
   Seite, die etwas aussagt: Die Zahlen sind nachgezählt, und das Hochlaufen
   macht das Zählen sichtbar.

   Die Klassennamen sind mit Bindestrich, NICHT im BEM-Stil mit doppeltem
   Unterstrich wie die übrigen Raven-Widgets — raven-counter-number, nicht
   raven-counter__number. Der erste Versuch griff deshalb ins Leere. */

/* Die Spaltenaufteilung macht das Widget selbst — der Regler "columns"
   schreibt width: calc(25% - 6px) auf jede Kachel, samt eigener Werte für
   Tablet und Handy. Ein eigenes Grid darüber zerstört das: 25 % beziehen
   sich dann auf die Rasterzelle, und die Kachel schrumpft auf 51 px.
   Hier wird deshalb nur das Aussehen gesetzt, nicht die Aufteilung. */

/* raven-flex-middle setzt align-items: center. Kacheln mit einzeiligem Titel
   sind dann 137 px hoch, die mit zweizeiligem 157 px — und stehen versetzt.
   stretch zieht sie auf gleiche Hoehe. */
body.bc .bc-zaehler .raven-counter-list { align-items: stretch; }

body.bc .bc-zaehler .raven-counter-item {
	background: #ffffff;
	border: var(--bc-rahmen);
	padding: var(--sp-3);
	text-align: left;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

body.bc .bc-zaehler .raven-counter-icon { display: none; }

body.bc .bc-zaehler .raven-counter-number-wrapper {
	display: flex;
	justify-content: flex-start;
	font-family: var(--bc-schrift-anzeige);
	font-size: clamp(2.4rem, 1.8rem + 2.2vw, 3.6rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .012em;
	color: var(--bc-tinte);
	-webkit-text-fill-color: currentColor;
}

body.bc .bc-zaehler .raven-counter-number,
body.bc .bc-zaehler .raven-counter-number-prefix,
body.bc .bc-zaehler .raven-counter-number-suffix {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

/* Ziffernfaecher — Tabellenziffern von Hand.
 *
 * Anton hat keine. Im Canvas gemessen: Die Eins ist bei 58 px 19,2 px breit,
 * jede andere Ziffer 28,7 px — ein Drittel schmaler. Beim Hochzaehlen sprang
 * die rechte Kante deshalb um bis zu 19 px in einem einzigen Schritt.
 *
 * Jede Ziffer steht jetzt mittig in einem Fach fester Breite. 0,52em ist die
 * breiteste Ziffer (0,495em) plus etwas Luft; die Eins bekommt links und
 * rechts je gut vier Pixel davon ab — genau das, was eine Schrift mit
 * Tabellenziffern selbst taete.
 *
 * letter-spacing: 0, damit die Fachbreite exakt bleibt. Die Laufweite steckt
 * schon in den 0,52em. bc-frontend.js rechnet mit derselben Zahl, wenn es den
 * Platz fuer die fertige Zahl reserviert — wer eine aendert, muss die andere
 * mitaendern. */
body.bc .bc-zaehler .bc-ziffer {
	display: inline-block;
	width: .52em;
	text-align: center;
	letter-spacing: 0;
}

body.bc .bc-zaehler .raven-counter-title {
	font-family: var(--bc-schrift-text);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .04em;
	color: var(--bc-tinte-leise);
	margin-top: .55rem;
}

/* Farbfolge der Kacheln.
 *
 * FUENF Schritte, nicht vier. Bei vier fiel das Cyan der Marke heraus — der
 * Abschnitt trug drei der vier Signalfarben, und ausgerechnet die fehlte, die
 * im Logo vorn steht. Bei sechs Kacheln ergibt die Folge
 *
 *     Tinte · Cyan · Magenta
 *     Gelb  · Limette · Tinte
 *
 * also je Reihe zwei Farben und ein Schwarz, die beiden schwarzen ueber Eck.
 * Bei vier Kacheln (auf /ueber/) sind es Tinte · Cyan · Magenta · Gelb.
 *
 * Die Farben haengen an Eigenschaften statt an ausgeschriebenen Regeln. Vorher
 * standen hier vier Bloecke mit zusammen ueber dreissig Selektoren, und eine
 * Farbe zu ergaenzen hiess, an sechs Stellen etwas nachzuziehen. Jetzt ist es
 * ein Block mit drei Zeilen.
 *
 * Zwei Dinge, die diese Regeln teuer erkauft haben und die deshalb bleiben:
 *
 *   1. Die Ziffer traegt eine eigene Farbe aus Elementors erzeugtem CSS. Sie
 *      nur am Wrapper zu setzen genuegt nicht — auf der schwarzen Kachel stand
 *      die 57 schwarz auf schwarz und war schlicht nicht da.
 *   2. Gezeichnet wird mit -webkit-text-fill-color, nicht mit color. Die
 *      Fuellfarbe schlaegt color beim Zeichnen und vererbt sich obendrein.
 *      Beide muessen gesetzt werden, sonst gewinnt die globale Textfarbe.
 */
body.bc .bc-zaehler .raven-counter-item {
	--kachel-grund: #111111;
	--kachel-zahl:  #ffffff;
	--kachel-titel: #d8d4cc;
}

body.bc .bc-zaehler .raven-counter-item:nth-child(5n+2) {
	--kachel-grund: #1dc3f3;
	--kachel-zahl:  #05202a;
	--kachel-titel: #05202a; /* 8,1:1 */
}

body.bc .bc-zaehler .raven-counter-item:nth-child(5n+3) {
	--kachel-grund: #d61f7a;
	--kachel-zahl:  #ffffff;
	--kachel-titel: #ffffff; /* volles Weiss — 88 % waeren auf Magenta 4,02:1 */
}

body.bc .bc-zaehler .raven-counter-item:nth-child(5n+4) {
	--kachel-grund: #fed329;
	--kachel-zahl:  #111111;
	--kachel-titel: #3a3a3a;
}

body.bc .bc-zaehler .raven-counter-item:nth-child(5n+5) {
	--kachel-grund: #bfd535;
	--kachel-zahl:  #111111;
	--kachel-titel: #3a3a3a;
}

body.bc .bc-zaehler .raven-counter-item {
	background: var(--kachel-grund);
	border-color: var(--kachel-grund);
}

body.bc .bc-zaehler .raven-counter-item .raven-counter-number-wrapper,
body.bc .bc-zaehler .raven-counter-item .raven-counter-number,
body.bc .bc-zaehler .raven-counter-item .raven-counter-number-prefix,
body.bc .bc-zaehler .raven-counter-item .raven-counter-number-suffix {
	color: var(--kachel-zahl);
	-webkit-text-fill-color: var(--kachel-zahl);
}

body.bc .bc-zaehler .raven-counter-item .raven-counter-title {
	color: var(--kachel-titel);
	-webkit-text-fill-color: var(--kachel-titel);
}

/* Der Druckzustand ---------------------------------------------------------- */

/*
 * Bisher gab es :active an genau einem Element. Karten, CTA-Knopf,
 * Preistabellen-Knöpfe und der Formularknopf gaben beim Drücken keine
 * Rückmeldung.
 *
 * Das ist nicht bloss Zierde: Auf dem Handy gibt es kein Überfahren. Ohne
 * Druckzustand bleibt der Fingertipp völlig unbestätigt — man tippt und weiss
 * bis zum Seitenwechsel nicht, ob überhaupt etwas passiert ist.
 *
 * Die Gebärde folgt dem, was schon da ist. Beim Überfahren hebt sich die Karte
 * drei Pixel an und wirft einen harten Schlagrand; beim Drücken geht genau das
 * zurück, sie legt sich wieder hin. Der Knopf oben macht es seit jeher so.
 *
 * Diese Regeln stehen bewusst NACH den :hover-Regeln — beide haben dieselbe
 * Spezifität, also entscheidet die Reihenfolge.
 */
.bc-karte:active,
.bc-prod:active,
.bc-karte--bunt:active {
	transform: none;
	box-shadow: none;
}

/* Die Knöpfe heben sich nicht, sie wechseln die Farbe. Für sie ist der
   passende Druck ein kurzer Weg nach unten — ein Pixel reicht, mehr wirkt
   wackelig. */
body.bc .bc-btn:active,
body.bc .bc-form .bc-btn:active,
body.bc .bc-cta .raven-cta__button:active,
body.bc .bc-preis .raven-pricing-table__button:active,
body.bc .bc-kopf__aktion:active {
	transform: translateY(1px);
}

body.bc .bc-btn,
body.bc .bc-kopf__aktion,
body.bc .bc-cta .raven-cta__button,
body.bc .bc-preis .raven-pricing-table__button {
	transition: background-color .12s ease, color .12s ease, transform .08s ease;
}

/* Bewegung ------------------------------------------------------------------ */

/*
 * Weiches Scrollen, aber nur für die, die Bewegung nicht abbestellt haben.
 * Sprungziele bekommen dabei Abstand nach oben: Die Kopfzeile klebt bei 67 px,
 * ohne scroll-margin verschwände das Ziel darunter. 5,5rem ist derselbe Wert,
 * auf dem die klebende Randspalte sitzt — eine Zahl weniger im System.
 */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

#inhalt,
body.bc .bc-abschnitt { scroll-margin-top: 5.5rem; }


/* Die versteckende Regel hängt an html.bc-anim, und diese Klasse setzt erst
   assets/js/bc-einblenden.js. Läuft das Skript nicht — kein
   IntersectionObserver, JavaScript aus, Bewegung abbestellt — greift keine
   dieser Regeln, und die Seite steht vollständig da. Der Inhalt kann auf
   diesem Weg nicht verschwinden; genau daran ist Elementors eigene
   Einblendung hier gescheitert. */
html.bc-anim body.bc .bc-abschnitt {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .3s ease-out, transform .3s ease-out;
}

html.bc-anim body.bc .bc-abschnitt.bc-sichtbar {
	opacity: 1;
	transform: none;
}

/* Sicherheitsnetz: Sollte Elementor irgendwo doch .elementor-invisible
   setzen, ohne die zugehörige Datei zu laden, bleibt der Abschnitt sichtbar. */
body.bc .elementor-invisible { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
	html.bc-anim body.bc .bc-abschnitt { opacity: 1; transform: none; transition: none; }

	body.bc *,
	body.bc *::before,
	body.bc *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* Person und Signatur ------------------------------------------------------- */

body.bc .bc-person .bc-spalte p { font-size: 1.0625rem; max-width: 56ch; }

.bc-person__bild img { width: 100%; max-width: 320px; height: auto; display: block; border-radius: var(--bc-rundung); }

body.bc .bc-signatur p {
	font-family: var(--bc-schrift-mono);
	font-size: .8125rem;
	color: var(--bc-tinte-leise);
	border-top: 1px solid var(--bc-linie);
	padding-top: var(--sp-2);
	max-width: none;
}

body.bc .bc-signatur a { color: var(--bc-tinte); text-decoration: none; border-bottom: 1px solid var(--bc-linie-stark); }
body.bc .bc-signatur a:hover { color: var(--bc-aktion); border-color: currentColor; }

/* Standort ------------------------------------------------------------------ */

.bc-nap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--sp-3); margin: 0; }
.bc-nap dt { font-family: var(--bc-schrift-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; color: var(--bc-tinte-leise); margin-bottom: .4rem; }
.bc-nap dd { margin: 0; font-size: .9375rem; line-height: 1.5; }
body.bc .bc-nap dd a { color: var(--bc-tinte); text-decoration: none; border-bottom: 1px solid var(--bc-linie-stark); }
body.bc .bc-nap dd a:hover { color: var(--bc-aktion); }

.bc-nap-fehlt { color: #8c1a4c; background: rgba(238, 49, 138, .10); padding: .1rem .4rem; }

/* Hinweis und Fließtext ----------------------------------------------------- */

.bc-hinweis { border-left: 3px solid var(--bc-signal); padding: .75rem 0 .75rem var(--sp-2); }
body.bc .bc-hinweis p { color: var(--bc-tinte-leise); }

body.bc .bc-intro p { color: var(--bc-tinte-leise); font-size: 1.0625rem; max-width: 58ch; }

.bc-prose h2 { margin: 2rem 0 .6rem; }
.bc-prose h3 { margin: 1.5rem 0 .4rem; }
.bc-prose ul { padding-left: 1.25rem; }
.bc-prose li { margin-bottom: .4rem; }

/* Preistabelle -------------------------------------------------------------- */

.bc-preis .raven-pricing-table { padding: var(--sp-3); height: 100%; display: flex; flex-direction: column; }
.bc-preis--hervor .raven-pricing-table { background: #fff; box-shadow: inset 0 0 0 2px var(--bc-aktion); }

body.bc .bc-preis .raven-pricing-table__heading { font-family: var(--bc-schrift-anzeige); font-size: 1.35rem; font-weight: 400; letter-spacing: .01em; margin: 0 0 .2rem; }
/* Ravens Preistabelle bringt einen eigenen Kopfbalken mit, der die globale
   Sekundaerfarbe als Hintergrund nimmt — und die Kurzbeschreibung in derselben
   Farbe daraufsetzt. Ergebnis: grau auf grau, unlesbar. Den Balken gibt es hier
   nicht; die Karte folgt dem Rest der Seite. */
/* Elementor schreibt die Regel in die erzeugte post-*.css und braucht dafür
   drei Klassen. Ohne body davor verliert man den Specificity-Vergleich, und die
   Regel kommt nach jedem Cache-Flush zurück. */
body.bc .bc-preis .raven-pricing-table .raven-pricing-table__header {
	background: none;
	padding: 0 0 var(--sp-2);
	border-bottom: 1px solid var(--bc-linie);
	margin-bottom: var(--sp-2);
}

body.bc .bc-preis .raven-pricing-table__heading,
body.bc .bc-preis .raven-pricing-table__heading a {
	color: var(--bc-tinte);
	-webkit-text-fill-color: currentColor;
}

body.bc .bc-preis .raven-pricing-table .raven-pricing-table__subheading {
	color: var(--bc-tinte-leise);
	font-size: .875rem;
	margin-bottom: 0;
}
.bc-preis .raven-pricing-table__price { display: flex; align-items: baseline; gap: .15rem; font-family: var(--bc-schrift-anzeige); font-weight: 400; letter-spacing: 0; line-height: 1.1; color: var(--bc-tinte); }
.bc-preis .raven-pricing-table__price * { color: inherit; }
.bc-preis .raven-pricing-table__integer-part { font-size: 2rem; }
.bc-preis .raven-pricing-table__currency { font-size: 1.2rem; color: var(--bc-tinte-leise); }
.bc-preis .raven-pricing-table__period { font-family: var(--bc-schrift-mono); color: var(--bc-tinte-leise); font-size: .75rem; margin-bottom: var(--sp-2); }

.bc-preis .raven-pricing-table__features-list { list-style: none; margin: 0 0 var(--sp-3); padding: var(--sp-2) 0 0; border-top: 1px solid var(--bc-linie); display: grid; gap: .5rem; flex: 1; }
.bc-preis .raven-pricing-table__feature-inner { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; line-height: 1.5; }
.bc-preis .raven-pricing-table__feature-inner svg,
.bc-preis .raven-pricing-table__feature-inner i { color: var(--bc-signal); width: .8rem; flex: none; margin-top: .3em; }

body.bc .bc-preis .raven-pricing-table__button { display: block; text-align: center; background: var(--bc-aktion); color: #fff; border-radius: var(--bc-rundung); padding: .7rem 1.2rem; font-weight: 700; text-decoration: none; }
body.bc .bc-preis .raven-pricing-table__button:hover { background: var(--bc-aktion-tief); color: #fff; }

.bc-preis .raven-pricing-table__ribbon-inner { background: var(--bc-aktion); color: #fff; font-family: var(--bc-schrift-mono); font-size: .6875rem; padding: .25rem .7rem; white-space: nowrap; }

/* Kontaktformular ----------------------------------------------------------- */

.bc-form { max-width: 620px; }
.bc-form__falle { position: absolute; left: -9999px; }

.bc-form__reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 0 var(--sp-2); }
.bc-form__feld { margin: 0 0 var(--sp-2); }

.bc-form label { display: block; font-family: var(--bc-schrift-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--bc-tinte-leise); margin-bottom: .4rem; }

.bc-form input[type="text"],
.bc-form input[type="email"],
.bc-form input[type="tel"],
.bc-form textarea {
	width: 100%;
	font: inherit;
	color: var(--bc-tinte);
	background: var(--bc-flaeche);
	border: 1px solid var(--bc-linie-stark);
	border-radius: var(--bc-rundung);
	padding: .7rem .85rem;
}

.bc-form textarea { resize: vertical; }
.bc-form input:focus, .bc-form textarea:focus { border-color: var(--bc-tinte); background: #fff; }
.bc-form input:focus-visible, .bc-form textarea:focus-visible { outline: 2px solid var(--bc-tinte); outline-offset: 2px; }

.bc-form__hinweis { font-family: var(--bc-schrift-text); text-transform: none; letter-spacing: 0; font-size: .8125rem; }

.bc-form__zustimmung { margin-bottom: var(--sp-2); }
.bc-form__zustimmung label { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-family: var(--bc-schrift-text); font-size: .9375rem; text-transform: none; letter-spacing: 0; color: var(--bc-tinte); }
.bc-form__zustimmung input[type="checkbox"] { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--bc-aktion); flex: none; }

body.bc .bc-form .bc-btn { display: inline-flex; font: inherit; font-weight: 700; padding: .8rem 1.4rem; border-radius: var(--bc-rundung); border: 0; background: var(--bc-aktion); color: #fff; cursor: pointer; }
body.bc .bc-form .bc-btn:hover { background: var(--bc-aktion-tief); }
body.bc .bc-form .bc-btn:focus-visible { outline: 2px solid var(--bc-tinte); outline-offset: 3px; }

.bc-form__meldung { padding: .9rem 1.1rem; border-left: 3px solid; margin-bottom: var(--sp-2); }
.bc-form__meldung--gut { background: rgba(191, 213, 53, .22); border-color: var(--bc-lime); color: #3d5c00; }
.bc-form__meldung--schlecht { background: rgba(238, 49, 138, .10); border-color: var(--bc-magenta); color: #8c1a4c; }

/* Kopfzeile ----------------------------------------------------------------- */

.bc-kopf {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(238, 236, 229, .93);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--bc-linie);
}

.bc-kopf > .e-con-inner > .elementor-widget { width: auto; }
.bc-ohne-platz { width: 0 !important; flex: 0 0 0 !important; }

.bc-kopf__logo .raven-image,
.bc-kopf__logo a { display: block; line-height: 0; }
.bc-kopf__logo img { height: 32px; width: auto; display: block; }

.bc-kopf__navhalter { margin-left: auto; }
.bc-kopf__navhalter .elementor-shortcode { display: flex; align-items: center; }

.bc-kopf__schalter { position: absolute; left: -9999px; }
.bc-kopf__knopf { display: none; }

.bc-kopf__nav { display: flex; align-items: center; gap: 1.5rem; }

body.bc .bc-kopf__aktion .raven-button.elementor-button {
	font-size: .9375rem; padding: .5rem 1rem; font-size: .875rem; white-space: nowrap; }

/* Menü ---------------------------------------------------------------------- */

.bc-menue { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.5rem; }
.bc-menue li { position: relative; }

body.bc .bc-menue a {
	text-decoration: none;
	color: var(--bc-tinte);
	font-family: var(--bc-schrift-mono);
	font-size: .8125rem;
	letter-spacing: .02em;
	padding: .4rem 0;
	display: block;
}

/* Das Magenta trägt auf Weiß (4,8:1), auf dem Papierton aber nur 4,10:1 — und
   das Menü steht bei 13 px. Deshalb hier die tiefere Stufe (6,2:1). */
body.bc .bc-menue:not(.bc-menue--fuss) a:hover,
body.bc .bc-menue:not(.bc-menue--fuss) .current-menu-item > a,
body.bc .bc-menue:not(.bc-menue--fuss) .current-menu-ancestor > a { color: var(--bc-aktion-tief); }

.bc-menue .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: .3rem;
	height: .3rem;
	margin-left: .4rem;
	vertical-align: 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.bc-menue .sub-menu {
	list-style: none;
	margin: 0;
	padding: .5rem;
	position: absolute;
	top: 100%;
	left: -.75rem;
	min-width: 15rem;
	background: var(--bc-flaeche);
	border: 1px solid var(--bc-linie);
	box-shadow: 0 12px 32px rgba(25, 23, 20, .1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .12s ease, transform .12s ease;
}

.bc-menue li:hover > .sub-menu,
.bc-menue li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }

body.bc .bc-menue .sub-menu a { padding: .5rem .75rem; font-family: var(--bc-schrift-text); font-size: .9375rem; }
.bc-menue .sub-menu a:hover { background: var(--bc-papier); }

@media (max-width: 940px) {
	.bc-kopf__knopf {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .5rem;
		cursor: pointer;
		font-family: var(--bc-schrift-mono);
		font-size: .8125rem;
		/* 48 px, wie im eigenen Regelwerk. Gemessen waren 37 px — unter der
		   44-px-Schwelle fuer Tippziele. */
		min-height: 48px;
		padding: .5rem .9rem;
		border: 1px solid var(--bc-linie-stark);
		border-radius: var(--bc-rundung);
	}

	.bc-kopf__balken,
	.bc-kopf__balken::before,
	.bc-kopf__balken::after { display: block; width: 1.1rem; height: 2px; background: var(--bc-tinte); content: ""; }
	.bc-kopf__balken { position: relative; }
	.bc-kopf__balken::before { position: absolute; top: -6px; }
	.bc-kopf__balken::after { position: absolute; top: 6px; }

	.bc-kopf > .e-con-inner > .elementor-widget.bc-kopf__navhalter { width: auto; margin-left: auto; }
	.bc-kopf__navhalter .elementor-shortcode { flex-wrap: wrap; justify-content: flex-end; }

	.bc-kopf__nav { display: none; width: 100vw; max-width: 100%; }
	.bc-kopf__schalter:checked ~ .bc-kopf__nav { display: block; padding-bottom: .5rem; }

	.bc-menue { flex-direction: column; align-items: stretch; gap: 0; }
	.bc-menue > li { border-top: 1px solid var(--bc-linie); }
	body.bc .bc-menue a { padding: .7rem 0; font-size: .9375rem; }

	.bc-menue .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 .5rem 1rem; min-width: 0; }
	.bc-menue .menu-item-has-children > a::after { display: none; }

	/* Der Knopf entfällt mobil: Jede Seite trägt ihre Handlungsaufforderung
	   unmittelbar darunter, und eine zweite Zeile kostet zu viel Platz. */
	.bc-kopf__aktion { display: none; }
}

@media (max-width: 560px) {
	.bc-kopf__logo img { height: 26px; }
	.bc-kopf__knopf { padding: .45rem .75rem; }
}

/* Fußzeile ------------------------------------------------------------------ */

.bc-fuss { background: var(--bc-tinte); color: #e3e0d8; margin-top: 0; }

.bc-fuss__spalten > .elementor-element { flex: 1 1 200px; min-width: 0; }

.bc-fuss__logo img { height: 28px; width: auto; }
.bc-fuss__logo .raven-image, .bc-fuss__logo a { display: block; line-height: 0; }

.bc-fuss__marke p { color: #c6c2b7; font-size: .9375rem; max-width: 30ch; }

body.bc .bc-fuss__titel .raven-heading-title {
	font-family: var(--bc-schrift-mono);
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .16em;
	/* 42 % Deckkraft ergaben bei 11 px 3,6:1. Fester Ton: 7,0:1. */
	color: #b3aea3;
}

.bc-fuss__spalte p { font-size: .9375rem; color: #c6c2b7; }
body.bc .bc-fuss__spalte a { color: #e3e0d8; text-decoration: none; }
body.bc .bc-fuss__spalte a:hover { color: var(--bc-lime); }

.bc-fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
body.bc .bc-fuss__liste a { font-size: .9375rem; text-decoration: none; color: #e3e0d8; }
body.bc .bc-fuss__liste a:hover { color: var(--bc-lime); }

.bc-fuss__unten { border-top: 1px solid rgba(238, 236, 229, .13); padding-top: var(--sp-2); }
.bc-fuss__unten > .elementor-element { width: auto; flex: 0 0 auto; }
.bc-fuss__copyright p { font-family: var(--bc-schrift-mono); font-size: .75rem; color: #b3aea3; }

.bc-menue--fuss { gap: 1.25rem; }
/* 42 % Deckkraft auf Tinte ergibt 3,6:1 — bei 12 px zu wenig. Ein fester,
   etwas dunklerer Ton statt Transparenz: 7,0:1 und vorhersagbar. */
body.bc .bc-menue--fuss a { font-family: var(--bc-schrift-mono); font-size: .75rem; color: #b3aea3; padding: 0; }
body.bc .bc-menue--fuss a:hover { color: var(--bc-lime); }
body.bc .bc-menue--fuss .current-menu-item > a { color: #f4f2ec; }

.bc-fuss .bc-nap-fehlt { color: #ffb3d4; background: rgba(238, 49, 138, .18); }

@media (max-width: 940px) {
	.bc-menue--fuss { flex-direction: row; gap: 1.25rem; }
	.bc-menue--fuss li { border: 0; }
	body.bc .bc-menue--fuss a { padding: 0; }
}

/* Rücksicht ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	body.bc *,
	body.bc *::before,
	body.bc *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}


/* ==========================================================================
   Bandfarben — steht mit Absicht ganz am Ende
   ==========================================================================

   Jede Komponente setzt ihre eigene Schriftfarbe: .bc-zitat p ist Tinte,
   .bc-notiz p ist Grau, und so weiter. Landet so eine Komponente auf einem
   farbigen Band, gewinnt ihre Regel — beim ersten Durchgang stand das Zitat
   dadurch schwarz auf schwarz, Kontrast 1,00:1.

   Deshalb hier eine geschlossene Liste je Band, spezifischer als jede
   Komponentenregel und als letzte im Dokument. Wer eine neue Komponente mit
   eigener Schriftfarbe baut, muss sie hier eintragen.

   Auf hellen Bändern gibt es KEINEN abgesetzten Grauton mehr: Grau auf Cyan
   ergab 4,3:1. Die Hierarchie kommt dort aus Größe und Schnitt, nicht aus
   der Farbe.
   ========================================================================== */

/* --- Dunkle Bänder: Tinte ------------------------------------------------- */

body.bc .bc-band--tinte .bc-lede p,
body.bc .bc-band--tinte .bc-szene p,
body.bc .bc-band--tinte .bc-zitat p,
body.bc .bc-band--tinte .bc-fliess p,
body.bc .bc-band--tinte .bc-prose,
body.bc .bc-band--tinte .bc-prose p,
body.bc .bc-band--tinte .bc-prose li,
body.bc .bc-band--tinte .raven-heading-title,
body.bc .bc-band--tinte .elementor-icon-list-text {
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
}

body.bc .bc-band--tinte .bc-notiz p,
body.bc .bc-band--tinte .bc-intro p,
body.bc .bc-band--tinte .bc-nach p,
body.bc .bc-band--tinte .bc-status p,
body.bc .bc-band--tinte .bc-hinweis p,
body.bc .bc-band--tinte .bc-bildtext p,
body.bc .bc-band--tinte .bc-zitat__quelle p,
body.bc .bc-band--tinte .bc-marginalie .raven-heading-title,
body.bc .bc-band--tinte .raven-cta__description {
	color: #b3aea3;              /* 7,0:1 auf #111111 */
	-webkit-text-fill-color: #b3aea3;
	opacity: 1;
}

/* --- Dunkle Bänder: Magenta und Violett ----------------------------------- */

/* Durchgehend volles Weiss. Weiss auf #d61f7a ergibt 4,84:1, bei 88 %
   Deckkraft nur noch 4,02:1 — ein abgesetzter Nebenton reisst hier die
   Schwelle. Die Hierarchie kommt aus Groesse und Schnitt */
body.bc .bc-band--magenta .bc-lede p,
body.bc .bc-band--magenta .bc-szene p,
body.bc .bc-band--magenta .bc-zitat p,
body.bc .bc-band--magenta .bc-fliess p,
body.bc .bc-band--magenta .bc-prose,
body.bc .bc-band--magenta .bc-prose p,
body.bc .bc-band--magenta .bc-prose li,
body.bc .bc-band--magenta .raven-heading-title,
body.bc .bc-band--magenta .elementor-icon-list-text,
body.bc .bc-band--magenta .raven-cta__title,
body.bc .bc-band--magenta .bc-person p,
body.bc .bc-band--magenta .bc-standort dt,
body.bc .bc-band--magenta .bc-standort dd,
body.bc .bc-band--magenta .bc-gegen__titel .raven-heading-title,
body.bc .bc-band--magenta .bc-notiz p,
body.bc .bc-band--magenta .bc-intro p,
body.bc .bc-band--magenta .bc-nach p,
body.bc .bc-band--magenta .bc-status p,
body.bc .bc-band--magenta .bc-hinweis p,
body.bc .bc-band--magenta .bc-bildtext p,
body.bc .bc-band--magenta .bc-zitat__quelle p,
body.bc .bc-band--magenta .bc-marginalie .raven-heading-title,
body.bc .bc-band--magenta .raven-cta__description,
body.bc .bc-band--magenta .bc-gegen__unter p,
body.bc .bc-band--magenta .bc-nap dd,
body.bc .bc-band--violett .bc-lede p,
body.bc .bc-band--violett .bc-szene p,
body.bc .bc-band--violett .bc-zitat p,
body.bc .bc-band--violett .bc-fliess p,
body.bc .bc-band--violett .bc-prose,
body.bc .bc-band--violett .bc-prose p,
body.bc .bc-band--violett .bc-prose li,
body.bc .bc-band--violett .raven-heading-title,
body.bc .bc-band--violett .elementor-icon-list-text,
body.bc .bc-band--violett .raven-cta__title,
body.bc .bc-band--violett .bc-person p,
body.bc .bc-band--violett .bc-standort dt,
body.bc .bc-band--violett .bc-standort dd,
body.bc .bc-band--violett .bc-gegen__titel .raven-heading-title,
body.bc .bc-band--violett .bc-notiz p,
body.bc .bc-band--violett .bc-intro p,
body.bc .bc-band--violett .bc-nach p,
body.bc .bc-band--violett .bc-status p,
body.bc .bc-band--violett .bc-hinweis p,
body.bc .bc-band--violett .bc-bildtext p,
body.bc .bc-band--violett .bc-zitat__quelle p,
body.bc .bc-band--violett .bc-marginalie .raven-heading-title,
body.bc .bc-band--violett .raven-cta__description,
body.bc .bc-band--violett .bc-gegen__unter p,
body.bc .bc-band--violett .bc-nap dd {
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
	opacity: 1;
}

/* --- Helle Bänder: Cyan --------------------------------------------------- */

/* 8,1:1 auf #1dc3f3 */
body.bc .bc-band--cyan .bc-lede p,
body.bc .bc-band--cyan .bc-szene p,
body.bc .bc-band--cyan .bc-zitat p,
body.bc .bc-band--cyan .bc-fliess p,
body.bc .bc-band--cyan .bc-prose,
body.bc .bc-band--cyan .bc-prose p,
body.bc .bc-band--cyan .bc-prose li,
body.bc .bc-band--cyan .raven-heading-title,
body.bc .bc-band--cyan .elementor-icon-list-text,
body.bc .bc-band--cyan .raven-cta__title,
body.bc .bc-band--cyan .bc-person p,
body.bc .bc-band--cyan .bc-standort dt,
body.bc .bc-band--cyan .bc-standort dd,
body.bc .bc-band--cyan .bc-gegen__titel .raven-heading-title,
body.bc .bc-band--cyan .bc-notiz p,
body.bc .bc-band--cyan .bc-intro p,
body.bc .bc-band--cyan .bc-nach p,
body.bc .bc-band--cyan .bc-status p,
body.bc .bc-band--cyan .bc-hinweis p,
body.bc .bc-band--cyan .bc-bildtext p,
body.bc .bc-band--cyan .bc-zitat__quelle p,
body.bc .bc-band--cyan .bc-marginalie .raven-heading-title,
body.bc .bc-band--cyan .raven-cta__description,
body.bc .bc-band--cyan .bc-gegen__unter p,
body.bc .bc-band--cyan .bc-nap dd {
	color: #05202a;
	-webkit-text-fill-color: #05202a;
	opacity: 1;
}

/* --- Helle Bänder: Gelb und Limette --------------------------------------- */

/* 13,1:1 bzw. 11,5:1 */
body.bc .bc-band--gelb .bc-lede p,
body.bc .bc-band--gelb .bc-szene p,
body.bc .bc-band--gelb .bc-zitat p,
body.bc .bc-band--gelb .bc-fliess p,
body.bc .bc-band--gelb .bc-prose,
body.bc .bc-band--gelb .bc-prose p,
body.bc .bc-band--gelb .bc-prose li,
body.bc .bc-band--gelb .raven-heading-title,
body.bc .bc-band--gelb .elementor-icon-list-text,
body.bc .bc-band--gelb .raven-cta__title,
body.bc .bc-band--gelb .bc-person p,
body.bc .bc-band--gelb .bc-standort dt,
body.bc .bc-band--gelb .bc-standort dd,
body.bc .bc-band--gelb .bc-gegen__titel .raven-heading-title,
body.bc .bc-band--gelb .bc-notiz p,
body.bc .bc-band--gelb .bc-intro p,
body.bc .bc-band--gelb .bc-nach p,
body.bc .bc-band--gelb .bc-status p,
body.bc .bc-band--gelb .bc-hinweis p,
body.bc .bc-band--gelb .bc-bildtext p,
body.bc .bc-band--gelb .bc-zitat__quelle p,
body.bc .bc-band--gelb .bc-marginalie .raven-heading-title,
body.bc .bc-band--gelb .raven-cta__description,
body.bc .bc-band--gelb .bc-gegen__unter p,
body.bc .bc-band--gelb .bc-nap dd,
body.bc .bc-band--limette .bc-lede p,
body.bc .bc-band--limette .bc-szene p,
body.bc .bc-band--limette .bc-zitat p,
body.bc .bc-band--limette .bc-fliess p,
body.bc .bc-band--limette .bc-prose,
body.bc .bc-band--limette .bc-prose p,
body.bc .bc-band--limette .bc-prose li,
body.bc .bc-band--limette .raven-heading-title,
body.bc .bc-band--limette .elementor-icon-list-text,
body.bc .bc-band--limette .raven-cta__title,
body.bc .bc-band--limette .bc-person p,
body.bc .bc-band--limette .bc-standort dt,
body.bc .bc-band--limette .bc-standort dd,
body.bc .bc-band--limette .bc-gegen__titel .raven-heading-title,
body.bc .bc-band--limette .bc-notiz p,
body.bc .bc-band--limette .bc-intro p,
body.bc .bc-band--limette .bc-nach p,
body.bc .bc-band--limette .bc-status p,
body.bc .bc-band--limette .bc-hinweis p,
body.bc .bc-band--limette .bc-bildtext p,
body.bc .bc-band--limette .bc-zitat__quelle p,
body.bc .bc-band--limette .bc-marginalie .raven-heading-title,
body.bc .bc-band--limette .raven-cta__description,
body.bc .bc-band--limette .bc-gegen__unter p,
body.bc .bc-band--limette .bc-nap dd {
	color: #111111;
	-webkit-text-fill-color: #111111;
	opacity: 1;
}

/* Knöpfe und Karten behalten auf JEDEM Band ihre eigene Schriftfarbe —
   sie bringen ihre eigene Fläche mit. */
body.bc .bc-band .raven-button.elementor-button,
body.bc .bc-band .raven-button.elementor-button * {
	-webkit-text-fill-color: currentColor;
}

/* Auf dunklem Band: helle Flaeche, dunkle Schrift. Die Zeile muss NACH den
   Bandfarben stehen, sonst faerbt die Bandregel die Beschriftung weiss —
   und dann stand "Projekt besprechen" weiss auf weiss. */
body.bc .bc-band--tinte .raven-button.elementor-button,
body.bc .bc-band--magenta .raven-button.elementor-button,
body.bc .bc-band--violett .raven-button.elementor-button {
	background: #ffffff;
	border-color: #ffffff;
	color: #111111;
}

body.bc .bc-band--tinte .bc-btn-geist .raven-button.elementor-button,
body.bc .bc-band--magenta .bc-btn-geist .raven-button.elementor-button,
body.bc .bc-band--violett .bc-btn-geist .raven-button.elementor-button {
	background: transparent;
	border-color: #ffffff;
	color: #ffffff;
}

/* Der Zähler bringt seine Farben je Kachel selbst mit, siehe oben. */
body.bc .bc-band--tinte .raven-counter-title,
body.bc .bc-band--magenta .raven-counter-title { opacity: 1; }

/* Anschrift in der Fusszeile ------------------------------------------------ */

/* [bc_adresse] steht im Texteditor ohne umschliessenden Absatz — der Editor
   nimmt Absaetze um Shortcodes heraus. Die Regel fuer .bc-fuss__spalte p griff
   deshalb nie, und die Anschrift erbte die dunkle Textfarbe des Kits: #111111
   auf #111111, gemessen 1,00:1, auf allen Seiten. Rufnummer und E-Mail waren
   sichtbar, weil sie als Verweise eine eigene Farbe haben. Gefunden am
   11.09.2026 mit der Kontrastmessung ueber die Fuellfarbe. */
body.bc .bc-fuss__spalte .bc-nap {
	color: #c6c2b7;
	-webkit-text-fill-color: #c6c2b7;
}