/* ==========================================================================
   bright color — Startseite nach dem Entwurf "Signal — ausgearbeitet"

   Anordnung und Raster aus design/Main.dc.html (1280 px) und
   design/Mobil.dc.html (390 px), Regeln aus design/System.dc.html. Wird nur
   auf der Startseite geladen, nach style.css (bc_startseite_stil() in
   inc/bright-color.php).

   TYPOGRAFIE, zweiter Durchgang (11.09.2026). Der Entwurf setzte Anton sehr
   gross und sehr eng — 94 px bei Zeilenhoehe 0,85, die Zeilen beruehrten sich
   rechnerisch. Auf dem Bildschirm wirkte das schwer. Deshalb:
     - Anton kleiner und mit Luft: H1 80, H2 40, Zitat 38 px; Zeilenhoehe ab
       0,96, bei mehrzeiligen Saetzen mit Umlauten 1,06 und mehr, weil die
       Umlautpunkte sonst in die Zeile darueber ragen.
     - Laufweite nach Groesse gestaffelt: Anton hat kaum Seitenabstand, und je
       kleiner sie steht, desto mehr braucht sie — .02em bei 80 px, .03em bei
       40 px, .04em um 22 px.
     - Work Sans eine Stufe leichter: 700 wird 600, 600 wird 500, Fliesstext
       und Vorspann 400.

   RASTER. Inhalt 1184 px breit, 48 px Seitenrand, am Handy 18 px. Kopf, Fuss
   und der Text im Aufmacher stehen auf derselben Kante wie jeder Abschnitt.
   ========================================================================== */

/* Schrift: Work Sans fuer Texte, Anton fuer Ueberschriften ---------------- */

body.bc {
	--bc-schrift-text: "Work Sans", "Helvetica Neue", Arial, sans-serif;
	--bc-schrift-mono: "Work Sans", "Helvetica Neue", Arial, sans-serif;
	--e-global-typography-text-font-family: "Work Sans";
	--e-global-typography-secondary-font-family: "Work Sans";
	--e-global-typography-accent-font-family: "Work Sans";
	font-family: var(--bc-schrift-text);
}

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

/* 60 px zwischen den Abschnitten, 48 px Seitenrand. Farbbaender halten ihren
   Abstand ueber margin, damit ihre Flaeche nicht mitwaechst. */
body.bc .bc-s { padding: 60px 48px 0; }

body.bc .bc-s-betreuung,
body.bc .bc-s-zitat,
body.bc .bc-s-kontakt { margin-top: 60px; }

body.bc .bc-s p { max-width: none; margin: 0; }

/* Verweise im Fliesstext. Nur dort — Kacheln, Karten und Fragen tragen ihre
   Verweise als Titel und haben eigene Farben. */
body.bc .bc-s p a {
	color: #111111;
	-webkit-text-fill-color: #111111;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.bc .bc-s p a:hover { color: #d4157a; -webkit-text-fill-color: #d4157a; }

/* Rubrik: Quadrat plus Versalzeile --------------------------------------- */

body.bc .bc-s-rubrik { margin-bottom: 16px; }

body.bc .bc-s-rubrik .raven-heading-title,
body.bc .bc-s-h1-rubrik {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--bc-schrift-text);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #4a4a4a;
	-webkit-text-fill-color: #4a4a4a;
}

body.bc .bc-s-rubrik .raven-heading-title::before,
body.bc .bc-s-h1-rubrik::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	background: #111111;
}

body.bc .bc-s-rubrik--cyan .raven-heading-title::before    { background: #1dc3f3; }
body.bc .bc-s-rubrik--magenta .raven-heading-title::before { background: #ee318a; }
body.bc .bc-s-rubrik--gelb .raven-heading-title::before    { background: #111111; }
body.bc .bc-s-rubrik--limette .raven-heading-title::before { background: #bfd535; }
body.bc .bc-s-rubrik--violett .raven-heading-title::before { background: #aa4b88; }

/* Ueberschriften ----------------------------------------------------------- */

body.bc .bc-s-h2 { margin-bottom: 24px; }

body.bc .bc-s-h2 .raven-heading-title {
	font-family: var(--bc-schrift-anzeige);
	font-size: 40px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #111111;
	-webkit-text-fill-color: #111111;
}

/* Notiz: der beilaeufige Satz, unter dem Block */
body.bc .bc-s-notiz { margin-top: 16px; }

body.bc .bc-s-notiz p {
	font-size: 14px;
	line-height: 1.55;
	font-style: italic;
	color: #5c5c5c;
	-webkit-text-fill-color: #5c5c5c;
	max-width: 70ch;
}

/* Fliesstext, wo er im Kasten steht */
body.bc .bc-s-fliess p {
	max-width: 64ch;
	font-size: 17px;
	line-height: 1.65;
	color: #111111;
	-webkit-text-fill-color: #111111;
}

body.bc .bc-s-fliess p + p { margin-top: 14px; }

/* Knoepfe -------------------------------------------------------------------- */

body.bc .bc-s-knoepfe { gap: 12px; margin-top: 32px; }
body.bc .bc-s-knoepfe > .elementor-widget { width: auto; flex: 0 0 auto; margin: 0; }

body.bc .bc-s-knopf .raven-button.elementor-button {
	min-height: 48px;
	padding: 13px 26px;
	font-family: var(--bc-schrift-text);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	border: 2px solid #111111;
	border-radius: 0;
	background: #111111;
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
}

body.bc .bc-s-knopf--geist .raven-button.elementor-button {
	background: transparent;
	border-color: #05202a;
	color: #05202a;
	-webkit-text-fill-color: #05202a;
}

body.bc .bc-s-knopf .raven-button.elementor-button:hover { box-shadow: 2px 2px 0 #111111; }
body.bc .bc-s-knopf--voll .raven-button.elementor-button:hover { box-shadow: 2px 2px 0 #fed329; }

/* Aufmacher -------------------------------------------------------------------- */

/* container-type, damit der Text mit der Breite des Aufmachers rechnen kann
   (cqw). 100vw zaehlt die Scrollleiste mit, und der Text stand dann 8 px
   neben der Kante aller anderen Abschnitte. */
body.bc .bc-s-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
	padding: 0;
	container-type: inline-size;
}

body.bc .bc-s-hero__text {
	padding: 62px 48px 56px max(48px, calc((100cqw - 1184px) / 2));
	color: #05202a;
}

body.bc .bc-s-h1 .raven-heading-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: #05202a;
	-webkit-text-fill-color: #05202a;
}

body.bc .bc-s-h1-rubrik {
	margin-bottom: 20px;
	color: #05202a;
	-webkit-text-fill-color: #05202a;
}

body.bc .bc-s-h1-rubrik::before { background: #05202a; }

body.bc .bc-s-h1-satz {
	display: block;
	max-width: 12ch;
	font-family: var(--bc-schrift-anzeige);
	font-size: clamp(50px, 1.4rem + 4.9vw, 80px);
	font-weight: 400;
	line-height: .96;
	letter-spacing: .02em;
	text-transform: uppercase;
}

body.bc .bc-s-lede { margin-top: 26px; }

body.bc .bc-s-lede p {
	max-width: 38ch;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.5;
	color: #05202a;
	-webkit-text-fill-color: #05202a;
	/* Die letzte Zeile bekommt mindestens zwei Woerter; am Handy stand "Hotline." allein. */
	text-wrap: pretty;
}

/* Die drei Hauptangebote rechts: gestapelte Farbflaechen, gleich hoch und bis
   zum Rand. Links das Symbol im Rahmenquadrat, daneben Titel und ein Satz,
   rechts der Pfeil. Bis zum 11.09.2026 standen hier drei Zaehler; die Zahlen
   stehen jetzt in der Faktenzeile der Leseflaeche. */
body.bc .bc-s-hero__angebote {
	display: grid;
	grid-template-rows: repeat(3, minmax(0, 1fr));
}

body.bc .bc-s-angebot {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: auto;
	margin: 0;
	padding: 24px 76px 24px 34px;
}

/* Den Abstand zwischen Symbol und Text setzt die Widget-Einstellung icon_space
   in bausteine-start.php. Elementor gibt ihn immer aus, spezifischer als diese
   Datei; ein gap hier wuerde nie greifen. */
body.bc .bc-s-angebot .elementor-icon-box-wrapper {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	text-align: left;
}

/* 3 px tiefer: So steht die Oberkante des Rahmens auf der Versalhoehe des
   Titels (Anton 26 px, Zeilenhoehe 1.08). */
body.bc .bc-s-angebot .elementor-icon-box-icon {
	display: block;
	flex: none;
	margin: 3px 0 0;
	line-height: 0;
}

/* Das Rahmenquadrat zeichnet in der Schriftfarbe der Flaeche: schwarz auf
   Gelb und Limette, weiss auf Magenta. Die Farbe gehoert an .elementor-icon
   selbst, dort setzt das Kit seine eigene (siehe style.css, bunte Karten). */
body.bc .bc-s-angebot .elementor-icon-box-icon .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 19px;
	border: 2px solid currentColor;
	border-radius: 0;
	background: transparent;
	color: inherit;
	-webkit-text-fill-color: currentColor;
	/* Elementor laesst .elementor-icon mit "transition: all .3s" in jede neue
	   Groesse gleiten; hier gibt es nichts zu animieren. */
	transition: none;
}

body.bc .bc-s-angebot .elementor-icon-box-icon .elementor-icon i,
body.bc .bc-s-angebot .elementor-icon-box-icon .elementor-icon svg {
	color: inherit;
	fill: currentColor;
	-webkit-text-fill-color: currentColor;
}

body.bc .bc-s-angebot .elementor-icon-box-content { min-width: 0; }

body.bc .bc-s-angebot .elementor-icon-box-title,
body.bc .bc-s-angebot .elementor-icon-box-title a {
	margin: 0;
	font-family: var(--bc-schrift-anzeige);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: .035em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	-webkit-text-fill-color: currentColor;
}

/* Die ganze Flaeche fuehrt weiter, der Titel bleibt der eine Verweis. */
body.bc .bc-s-angebot .elementor-icon-box-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

body.bc .bc-s-angebot .elementor-icon-box-description {
	margin: 7px 0 0;
	max-width: 44ch;
	font-size: 15px;
	line-height: 1.5;
	color: inherit;
	-webkit-text-fill-color: currentColor;
}

body.bc .bc-s-angebot::after {
	content: "→" / "";
	position: absolute;
	top: 50%;
	right: 34px;
	font-size: 22px;
	line-height: 1;
	transform: translateY(-50%);
	transition: transform .12s ease;
}

/* Beim Ueberfahren ein harter Balken links, und der Pfeil rueckt vor. Als
   ::before, damit der Balken ueber der Flaechenfarbe liegt, egal an welchem
   Element Elementor sie setzt. */
body.bc .bc-s-angebot::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 6px;
	background: #111111;
	opacity: 0;
	transition: opacity .12s ease;
}

@media (hover: hover) {
	body.bc .bc-s-angebot:hover::before { opacity: 1; }
	body.bc .bc-s-angebot:hover::after { transform: translate(4px, -50%); }
}

body.bc .bc-s-angebot:focus-within { outline: 3px solid #111111; outline-offset: -3px; }

body.bc .bc-s-angebot--magenta { color: #ffffff; }
body.bc .bc-s-angebot--gelb    { color: #111111; }
body.bc .bc-s-angebot--limette { color: #111111; }

/* Stoerungsmelder ---------------------------------------------------------------- */

body.bc .bc-s-melder .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
}

body.bc .bc-s-melder .elementor-icon-list-item {
	margin: 0;
	padding: 0;
	background: #ffffff;
	border: 2px solid #111111;
	transition: transform .12s ease, box-shadow .12s ease;
}

body.bc .bc-s-melder .elementor-icon-list-item:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 #111111; }
body.bc .bc-s-melder .elementor-icon-list-item:active { transform: none; box-shadow: none; }

body.bc .bc-s-melder .elementor-icon-list-item > a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	height: 100%;
	padding: 20px;
	color: #111111;
	text-decoration: none;
}

body.bc .bc-s-melder .elementor-icon-list-item > a::before {
	content: "";
	width: 32px;
	height: 5px;
	background: #1dc3f3;
}

body.bc .bc-s-melder .elementor-icon-list-item:nth-child(6n+2) > a::before { background: #ee318a; }
body.bc .bc-s-melder .elementor-icon-list-item:nth-child(6n+3) > a::before { background: #fed329; }
body.bc .bc-s-melder .elementor-icon-list-item:nth-child(6n+4) > a::before { background: #bfd535; }
body.bc .bc-s-melder .elementor-icon-list-item:nth-child(6n+5) > a::before { background: #aa4b88; }

body.bc .bc-s-melder .elementor-icon-list-icon { display: none; }

body.bc .bc-s-melder .elementor-icon-list-text {
	font-family: var(--bc-schrift-text);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
	color: #111111;
	-webkit-text-fill-color: #111111;
}

/* Betreuung ---------------------------------------------------------------------- */

body.bc .bc-s-betreuung { padding: 48px; }

body.bc .bc-s-betreuung__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 48px;
	align-items: center;
}

body.bc .bc-s-betreuung__text {
	padding: 32px 36px 34px;
	border: 2px solid #111111;
}

body.bc .bc-s-betreuung__text .bc-s-h2 { margin-bottom: 16px; }

body.bc .bc-s-betreuung__preis { align-items: stretch; }

body.bc .bc-s-preis .raven-heading-title {
	font-family: var(--bc-schrift-anzeige);
	font-size: 60px;
	font-weight: 400;
	line-height: .95;
	letter-spacing: .02em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #111111;
	-webkit-text-fill-color: #111111;
}

body.bc .bc-s-preis-zusatz { margin-top: 10px; }

body.bc .bc-s-preis-zusatz p {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .03em;
	color: #111111;
	-webkit-text-fill-color: #111111;
}

/* Der Knopf nimmt die Breite des Preisblocks, dann enden Preis und Knopf
   auf derselben Kante. */
body.bc .bc-s-betreuung__preis .bc-s-knoepfe { margin-top: 22px; }
body.bc .bc-s-betreuung__preis .bc-s-knoepfe > .elementor-widget { flex: 1 1 auto; }
body.bc .bc-s-betreuung__preis .raven-button.elementor-button { width: 100%; justify-content: center; }

/* Leseflaeche -------------------------------------------------------------------- */

body.bc .bc-s-lese {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	border: 2px solid #111111;
}

body.bc .bc-s-lese__seite {
	padding: 34px 28px;
	gap: 16px;
	color: #ffffff;
}

body.bc .bc-s-lese__titel .raven-heading-title {
	font-family: var(--bc-schrift-anzeige);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
}

body.bc .bc-s-lese__titel .raven-heading-title::before {
	content: "";
	display: block;
	width: 32px;
	height: 5px;
	margin-bottom: 16px;
	background: #bfd535;
}

body.bc .bc-s-lese__notiz p {
	margin-top: 6px;
	font-size: 13.5px;
	line-height: 1.55;
	color: #b8b8b8;
	-webkit-text-fill-color: #b8b8b8;
}

body.bc .bc-s-lese__kontakt { margin-top: auto; padding-top: 24px; }

body.bc .bc-s-lese__kontakt p {
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.7;
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
}

body.bc .bc-s .bc-s-lese__kontakt a {
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
	text-decoration: none;
}

body.bc .bc-s .bc-s-lese__kontakt a[href^="mailto"] { color: #b8b8b8; -webkit-text-fill-color: #b8b8b8; font-weight: 400; }
body.bc .bc-s .bc-s-lese__kontakt a:hover { text-decoration: underline; }
body.bc .bc-s-lese__seite :focus-visible { outline-color: #fed329; }

body.bc .bc-s-lese__text { padding: 34px 36px 36px; }

/* Abstand als Innenabstand: Elementor setzt den Aussenabstand von Widgets
   zurueck, der Vorspann stiess sonst direkt an den Fliesstext. */
body.bc .bc-s-lese__vorspann { padding-bottom: 18px; }

body.bc .bc-s-lese__vorspann p {
	max-width: 54ch;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.5;
	color: #111111;
	-webkit-text-fill-color: #111111;
}

body.bc .bc-s-lese__vorspann p + p { margin-top: 12px; }

body.bc .bc-s-fakten {
	gap: 12px 28px;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 2px solid #111111;
}

body.bc .bc-s-fakten > .elementor-widget { width: auto; margin: 0; }

body.bc .bc-s-fakt .raven-heading-title {
	display: flex;
	align-items: baseline;
	gap: 9px;
	font-family: var(--bc-schrift-text);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: none;
	color: #4a4a4a;
	-webkit-text-fill-color: #4a4a4a;
}

body.bc .bc-s-fakt strong {
	font-family: var(--bc-schrift-anzeige);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: .03em;
	color: #111111;
	-webkit-text-fill-color: #111111;
}

/* Leistungen: Farbraster ohne Fugen ------------------------------------------ */

body.bc .bc-s-kacheln {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
}

body.bc .bc-s-kachel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	min-height: 196px;
	margin: 0;
	padding: 28px 26px 24px;
	transition: transform .12s ease, box-shadow .12s ease;
}

body.bc .bc-s-kachel:hover { z-index: 2; transform: translate(-3px, -3px); box-shadow: 3px 3px 0 #111111; }
body.bc .bc-s-kachel:active { transform: none; box-shadow: none; }

body.bc .bc-s-kachel .elementor-icon-box-wrapper { flex: 1 1 auto; text-align: left; }
body.bc .bc-s-kachel .elementor-icon-box-icon { display: none; }

body.bc .bc-s-kachel .elementor-icon-box-title,
body.bc .bc-s-kachel .elementor-icon-box-title a {
	margin: 0;
	font-family: var(--bc-schrift-anzeige);
	font-size: 23px;
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	-webkit-text-fill-color: currentColor;
}

body.bc .bc-s-kachel .elementor-icon-box-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

body.bc .bc-s-kachel .elementor-icon-box-description {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: inherit;
	-webkit-text-fill-color: currentColor;
}

body.bc .bc-s-kachel::after {
	content: "Ansehen →" / "";
	margin-top: auto;
	padding-top: 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

body.bc .bc-s-kachel--tinte   { color: #ffffff; }
body.bc .bc-s-kachel--cyan    { color: #05202a; }
body.bc .bc-s-kachel--magenta { color: #ffffff; }
body.bc .bc-s-kachel--gelb    { color: #111111; }
body.bc .bc-s-kachel--limette { color: #111111; }
body.bc .bc-s-kachel--violett { color: #ffffff; }

body.bc .bc-s-kachel--tinte .elementor-icon-box-description { color: #c9c9c9; -webkit-text-fill-color: #c9c9c9; }

/* Zusammenarbeit: zwei Kaesten mit Pfeil dazwischen. Links weiss mit grauen
   Strichen, rechts Limette mit Haken; bei schmalen Fenstern untereinander, der
   Pfeil zeigt dann nach unten. ------------------------------------------------ */

body.bc .bc-s-gegen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
	align-items: stretch;
	margin-top: 24px;
}

body.bc .bc-s-gegen__seite {
	padding: 30px 32px 26px;
	border: 2px solid #111111;
	color: #111111;
}

body.bc .bc-s-gegen__titel .raven-heading-title {
	font-family: var(--bc-schrift-anzeige);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: .035em;
	text-transform: uppercase;
	color: #111111;
	-webkit-text-fill-color: #111111;
}

body.bc .bc-s-gegen__unter { margin: 6px 0 0; padding-bottom: 16px; border-bottom: 2px solid #111111; }

body.bc .bc-s-gegen__unter p {
	font-size: 14.5px;
	line-height: 1.45;
	text-wrap: balance;
	color: #4a4a4a;
	-webkit-text-fill-color: #4a4a4a;
}

body.bc .bc-s-gegen__seite--rechts .bc-s-gegen__unter p { color: #111111; -webkit-text-fill-color: #111111; }

body.bc .bc-s-gegen__liste .elementor-icon-list-items { display: grid; gap: 0; }

/* Symbol und Text bilden einen Block; ist ein Punkt hoeher als sein Inhalt,
   steht der Block mittig darin */
body.bc .bc-s-gegen__liste .elementor-icon-list-item {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 12px 0;
}

body.bc .bc-s-gegen__liste .elementor-icon-list-item + .elementor-icon-list-item { border-top: 1px solid rgba(17, 17, 17, .14); }

/* Das Symbol steht mittig zur ersten Textzeile (15,5 px Schrift mal 1,45) */
body.bc .bc-s-gegen__liste .elementor-icon-list-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 22px;
}

body.bc .bc-s-gegen__liste .elementor-icon-list-icon i,
body.bc .bc-s-gegen__liste .elementor-icon-list-icon svg {
	width: 14px;
	height: 14px;
	font-size: 14px;
	color: #8a8780;
	fill: #8a8780;
}

body.bc .bc-s-gegen__seite--rechts .elementor-icon-list-icon i,
body.bc .bc-s-gegen__seite--rechts .elementor-icon-list-icon svg { color: #111111; fill: #111111; }

body.bc .bc-s-gegen__liste .elementor-icon-list-text {
	font-size: 15.5px;
	line-height: 1.45;
	color: #111111;
	-webkit-text-fill-color: #111111;
}

/* Text oben neben dem Symbol; ueberschreibt align-self aus dem Elementor-Stil */
body.bc .bc-s-gegen__liste .elementor-icon-list-item .elementor-icon-list-text {
	flex: 1 1 0%;
	min-width: 0;
	align-self: flex-start;
	text-wrap: pretty;
}

body.bc .bc-s-gegen__seite--links .elementor-icon-list-text { color: #4a4a4a; -webkit-text-fill-color: #4a4a4a; }

/* Der Pfeil: schwarzes Quadrat mittig zwischen den Kaesten */
body.bc .bc-s-gegen__pfeil {
	align-self: center;
	justify-self: center;
	margin: 0;
	line-height: 0;
}

body.bc .bc-s-gegen__pfeil .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	font-size: 22px;
	background: #111111;
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
	transition: none;
}

body.bc .bc-s-gegen__pfeil .elementor-icon i,
body.bc .bc-s-gegen__pfeil .elementor-icon svg { color: #ffffff; fill: #ffffff; }

@media (min-width: 961px) and (max-width: 1279px) {
	/* Zwei Zeilen je Punkt, damit die Paare links und rechts auf einer Hoehe stehen */
	body.bc .bc-s-gegen__liste .elementor-icon-list-item { min-height: 70px; }
}

@media (max-width: 960px) {
	body.bc .bc-s-gegen { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
	body.bc .bc-s-gegen__pfeil { transform: rotate(90deg); }
}

@media (max-width: 767px) {
	body.bc .bc-s-gegen { margin-top: 18px; }
	body.bc .bc-s-gegen__seite { padding: 22px 18px 18px; }
	body.bc .bc-s-gegen__titel .raven-heading-title { font-size: 21px; }
	body.bc .bc-s-gegen__liste .elementor-icon-list-text { font-size: 15px; }
}

/* Zitat als schwarzes Band ------------------------------------------------------- */

body.bc .bc-s-zitat { padding: 56px 48px; }

body.bc .bc-s-zitat__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 56px;
	align-items: center;
}

/* 38 px und 24ch statt 46 px und 20ch: vier Zeilen statt fuenf, und die
   Zeilen duerfen atmen. Mehrzeilig mit Umlauten braucht Anton ueber 1,06. */
body.bc .bc-s-zitat__satz p {
	max-width: 24ch;
	font-family: var(--bc-schrift-anzeige);
	font-size: 38px;
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-wrap: balance;
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
}

body.bc .bc-s-zitat__satz p::before {
	content: "";
	display: block;
	width: 46px;
	height: 6px;
	margin-bottom: 22px;
	background: #fed329;
}

body.bc .bc-s-zitat__quelle p {
	font-size: 15.5px;
	line-height: 1.62;
	color: #b8b8b8;
	-webkit-text-fill-color: #b8b8b8;
}

/* Grenzen -------------------------------------------------------------------------- */

body.bc .bc-s-grenzen__raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 44px;
	align-items: start;
}

body.bc .bc-s-grenzen__kopf .bc-s-h2 { margin-bottom: 18px; }

body.bc .bc-s-grenzen__nach p {
	max-width: 44ch;
	font-size: 16px;
	line-height: 1.6;
	color: #4a4a4a;
	-webkit-text-fill-color: #4a4a4a;
}

body.bc .bc-s-grenzen__liste { border: 2px solid #111111; }

body.bc .bc-s-nummern .elementor-icon-list-items { counter-reset: bc-grenze; margin: 0; padding: 0; }

body.bc .bc-s-nummern .elementor-icon-list-item {
	counter-increment: bc-grenze;
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0;
	padding: 15px 20px;
	border-bottom: 1px solid #dad6cd;
}

body.bc .bc-s-nummern .elementor-icon-list-item:last-child { border-bottom: 0; }

body.bc .bc-s-nummern .elementor-icon-list-item::before {
	content: counter(bc-grenze, decimal-leading-zero);
	flex: none;
	font-family: var(--bc-schrift-anzeige);
	font-size: 14px;
	letter-spacing: .04em;
	color: #aa4b88;
}

body.bc .bc-s-nummern .elementor-icon-list-icon { display: none; }

body.bc .bc-s-nummern .elementor-icon-list-text {
	font-size: 15.5px;
	line-height: 1.5;
	color: #111111;
	-webkit-text-fill-color: #111111;
}

/* Eigene Werkzeuge -------------------------------------------------------------- */

body.bc .bc-s-werkzeugraster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

body.bc .bc-s-werkzeug {
	position: relative;
	width: auto;
	margin: 0;
	padding: 22px;
	background: #ffffff;
	border: 2px solid #111111;
	transition: transform .12s ease, box-shadow .12s ease;
}

body.bc .bc-s-werkzeug:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 #111111; }
body.bc .bc-s-werkzeug:active { transform: none; box-shadow: none; }

body.bc .bc-s-werkzeug .elementor-icon-box-wrapper { text-align: left; }
body.bc .bc-s-werkzeug .elementor-icon-box-icon { display: none; }

body.bc .bc-s-werkzeug .elementor-icon-box-title {
	margin: 0 0 12px;
	font-family: var(--bc-schrift-anzeige);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: .04em;
	text-transform: uppercase;
}

body.bc .bc-s-werkzeug .elementor-icon-box-title a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font: inherit;
	letter-spacing: inherit;
	color: #111111;
	-webkit-text-fill-color: #111111;
	text-decoration: none;
}

body.bc .bc-s-werkzeug .elementor-icon-box-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

body.bc .bc-s-tag {
	flex: none;
	padding: 4px 8px;
	font-family: var(--bc-schrift-text);
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: #bfd535;
	color: #111111;
	-webkit-text-fill-color: #111111;
}

body.bc .bc-s-werkzeug .elementor-icon-box-description {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: #4a4a4a;
	-webkit-text-fill-color: #4a4a4a;
}

/* Fragen ------------------------------------------------------------------------ */

body.bc .bc-s-faq__kasten { border: 2px solid #111111; }

body.bc .bc-s-fragen .elementor-toggle-item { border-bottom: 1px solid #dad6cd; }
body.bc .bc-s-fragen .elementor-toggle-item:last-child { border-bottom: 0; }

body.bc .bc-s-fragen .elementor-tab-title {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 17px 24px;
	border: 0;
	font-family: var(--bc-schrift-text);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: #111111;
}

body.bc .bc-s-fragen .elementor-tab-title a { color: inherit; -webkit-text-fill-color: currentColor; text-decoration: none; font: inherit; }
body.bc .bc-s-fragen .elementor-toggle-icon { order: 2; margin-left: auto; font-size: 12px; color: #d61f7a; }
body.bc .bc-s-fragen .elementor-tab-title.elementor-active { color: #111111; }

body.bc .bc-s-fragen .elementor-tab-content {
	padding: 0 24px 20px;
	border: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: #4a4a4a;
}

body.bc .bc-s-fragen .elementor-tab-content p { max-width: 70ch; color: #4a4a4a; -webkit-text-fill-color: #4a4a4a; }

/* Kontaktband ------------------------------------------------------------------- */

body.bc .bc-s-kontakt { padding: 48px; }

body.bc .bc-s-kontakt__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 40px;
	align-items: center;
}

body.bc .bc-s-kontakt__titel { margin-bottom: 0; }
body.bc .bc-s-kontakt__titel .raven-heading-title { font-size: 44px; max-width: 18ch; }

body.bc .bc-s-kontakt__text { margin-top: 16px; }

body.bc .bc-s-kontakt__text p {
	max-width: 50ch;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.55;
	color: #111111;
	-webkit-text-fill-color: #111111;
}

body.bc .bc-s-kontakt__rechts { align-items: stretch; gap: 12px; text-align: center; }
body.bc .bc-s-kontakt__rechts .bc-s-knoepfe { margin-top: 0; }
body.bc .bc-s-kontakt__rechts .bc-s-knoepfe > .elementor-widget { flex: 1 1 auto; }
body.bc .bc-s-kontakt__rechts .raven-button.elementor-button { width: 100%; justify-content: center; padding: 16px 32px; font-size: 16px; }

body.bc .bc-s-telefon .raven-heading-title {
	font-family: var(--bc-schrift-anzeige);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: none;
}

body.bc .bc-s .bc-s-telefon a { color: #111111; -webkit-text-fill-color: #111111; text-decoration: none; }

/* Ein Absatz mit Umbruechen — der Texteditor nimmt Absaetze um Shortcodes
   heraus. [bc_adresse] bringt die Klasse bc-nap mit, die style.css fuer die
   Kontaktseite als Raster setzt; hier soll sie im Absatz fliessen. */
body.bc .bc-s-nap p { font-size: 13.5px; line-height: 1.65; color: #111111; -webkit-text-fill-color: #111111; }
body.bc .bc-s-nap .bc-nap { display: inline; }

/* Kopf und Fuss im Entwurfs-Look — nur hier, die Vorlagen bleiben gleich ---------- */

/* Auf dieselbe Kante wie die Abschnitte: 1184 px Inhalt, 48 px Rand. Die
   Vorlage stellt 1180 und 24 px ein. Elementor schreibt beides mit drei
   Klassen in die erzeugte CSS, deshalb die volle Kette im Selektor. */
body.bc .bc-kopf.e-con.e-con-boxed,
body.bc .bc-fuss.e-con.e-con-boxed {
	--content-width: 1184px;
	--padding-left: 48px;
	--padding-right: 48px;
	padding-left: 48px;
	padding-right: 48px;
}

/* Sprungmarke und Inhaltsanker haben keine Breite, bekamen aber trotzdem je
   24 px Flex-Abstand — das Logo stand 24 px neben der Kante, der Knopf rechts
   26 px davor. Aus dem Fluss genommen zaehlt der Abstand nicht mehr. */
body.bc .bc-kopf .bc-ohne-platz { position: absolute; }

body.bc .bc-kopf {
	background: #111111;
	border-bottom: 0;
	backdrop-filter: none;
}

/* Das Logo als SVG (assets/img/logo/), helle Fassung fuer den schwarzen Kopf.
   content ersetzt nur die Darstellung — Bildbeschreibung und Verweis bleiben. */
body.bc .bc-kopf__logo img { content: url("/wp-content/themes/jupiterx-child/assets/img/logo/bright-color-logo-hell.svg"); }

body.bc .bc-kopf .bc-menue:not(.bc-menue--fuss) > li > a {
	font-family: var(--bc-schrift-text);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: .01em;
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
}

body.bc .bc-kopf .bc-menue:not(.bc-menue--fuss) > li > a:hover,
body.bc .bc-kopf .bc-menue:not(.bc-menue--fuss) > .current-menu-item > a,
body.bc .bc-kopf .bc-menue:not(.bc-menue--fuss) > .current-menu-ancestor > a { color: #fed329; -webkit-text-fill-color: #fed329; }

body.bc .bc-kopf .bc-menue .sub-menu a { color: #111111; -webkit-text-fill-color: #111111; }

body.bc .bc-kopf :focus-visible { outline: 2px solid #fed329; outline-offset: 3px; }

body.bc .bc-kopf__aktion .raven-button.elementor-button {
	min-height: 40px;
	padding: 10px 17px;
	font-size: 13.5px;
	font-weight: 600;
	background: #fed329;
	border-color: #fed329;
	color: #111111;
	-webkit-text-fill-color: #111111;
}

body.bc .bc-kopf__aktion .raven-button.elementor-button:hover { background: #fed329; box-shadow: 2px 2px 0 #ffffff; }

/* Fusslogo als SVG, links in seiner Spalte. */
body.bc .bc-fuss__logo { align-self: flex-start; }
body.bc .bc-fuss__logo .raven-image { text-align: left; justify-content: flex-start; }
body.bc .bc-fuss__logo img { margin-left: 0; content: url("/wp-content/themes/jupiterx-child/assets/img/logo/bright-color-logo-hell.svg"); }

body.bc .bc-fuss .bc-fuss__spalte p,
body.bc .bc-fuss .bc-fuss__marke p { color: #b8b8b8; }

/* Kopf am schmalen Fenster: Menueknopf 48 px mit weissem Rahmen */
@media (max-width: 940px) {
	body.bc .bc-kopf .bc-kopf__knopf { border: 2px solid #ffffff; color: #ffffff; -webkit-text-fill-color: #ffffff; }
	body.bc .bc-kopf .bc-kopf__balken,
	body.bc .bc-kopf .bc-kopf__balken::before,
	body.bc .bc-kopf .bc-kopf__balken::after { background: #ffffff; }
	body.bc .bc-kopf .bc-menue .sub-menu { background: transparent; }
	body.bc .bc-kopf .bc-menue .sub-menu a { color: #ffffff; -webkit-text-fill-color: #ffffff; }
	body.bc .bc-kopf .bc-menue > li { border-top-color: #333333; }
}

/* Tablet ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	body.bc .bc-s-hero { grid-template-columns: minmax(0, 1fr); }
	body.bc .bc-s-hero__text { padding: 48px 48px 44px; }

	/* Angebote nebeneinander unter dem Text: Symbol oben, Pfeil unten rechts */
	body.bc .bc-s-hero__angebote { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	body.bc .bc-s-angebot { justify-content: flex-start; padding: 22px 20px 48px; }
	body.bc .bc-s-angebot .elementor-icon-box-wrapper { flex-direction: column; }
	body.bc .bc-s-angebot .elementor-icon-box-icon { margin-top: 0; }
	body.bc .bc-s-angebot .elementor-icon-box-icon .elementor-icon { width: 40px; height: 40px; font-size: 17px; }
	body.bc .bc-s-angebot .elementor-icon-box-title,
	body.bc .bc-s-angebot .elementor-icon-box-title a { font-size: 21px; }
	body.bc .bc-s-angebot .elementor-icon-box-description { font-size: 14px; }
	body.bc .bc-s-angebot::after { top: auto; right: 20px; bottom: 16px; transform: none; font-size: 18px; }
	body.bc .bc-s-angebot:hover::after { transform: translateX(4px); }

	body.bc .bc-s-h2 .raven-heading-title { line-height: 1.06; }

	body.bc .bc-s-melder .elementor-icon-list-items,
	body.bc .bc-s-werkzeugraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	body.bc .bc-s-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	body.bc .bc-s-betreuung__raster,
	body.bc .bc-s-zitat__raster,
	body.bc .bc-s-grenzen__raster,
	body.bc .bc-s-kontakt__raster { grid-template-columns: minmax(0, 1fr); gap: 28px; }

	body.bc .bc-s-betreuung__preis { align-items: flex-start; }
	body.bc .bc-s-betreuung__preis .bc-s-knoepfe > .elementor-widget { flex: 0 0 auto; }
}

/* Handy — nach design/Mobil.dc.html ----------------------------------------------- */

@media (max-width: 767px) {
	body.bc .bc-s { padding: 32px 18px 0; }

	body.bc .bc-kopf.e-con.e-con-boxed,
	body.bc .bc-fuss.e-con.e-con-boxed {
		--padding-left: 18px;
		--padding-right: 18px;
		padding-left: 18px;
		padding-right: 18px;
	}

	body.bc .bc-s-betreuung,
	body.bc .bc-s-zitat,
	body.bc .bc-s-kontakt { margin-top: 32px; }

	body.bc .bc-s-rubrik { margin-bottom: 12px; }

	body.bc .bc-s-rubrik .raven-heading-title,
	body.bc .bc-s-h1-rubrik { gap: 8px; font-size: 11px; letter-spacing: .16em; }

	body.bc .bc-s-h2 { margin-bottom: 16px; }
	body.bc .bc-s-h2 .raven-heading-title { font-size: 30px; }

	/* Aufmacher: randlos, die allgemeine Regel oben gilt fuer ihn nicht */
	body.bc .bc-s-hero { padding: 0; }
	body.bc .bc-s-hero__text { padding: 34px 18px 30px; }
	body.bc .bc-s-h1-rubrik { margin-bottom: 14px; }
	body.bc .bc-s-lede { margin-top: 18px; }
	body.bc .bc-s-lede p { font-size: 17px; }

	body.bc .bc-s-knoepfe { flex-direction: column; gap: 10px; margin-top: 24px; }
	body.bc .bc-s-knoepfe > .elementor-widget { width: 100%; }
	body.bc .bc-s-knopf .raven-button.elementor-button { width: 100%; justify-content: center; padding: 13px 16px; font-size: 16px; }

	/* Angebote als drei Zeilen: Symbol links, Pfeil rechts, mindestens 64 px hoch */
	body.bc .bc-s-hero__angebote { grid-template-columns: minmax(0, 1fr); }
	body.bc .bc-s-angebot { justify-content: center; min-height: 64px; padding: 16px 50px 16px 18px; }
	body.bc .bc-s-angebot .elementor-icon-box-wrapper { flex-direction: row; }
	body.bc .bc-s-angebot .elementor-icon-box-icon { margin-top: 2px; }
	body.bc .bc-s-angebot .elementor-icon-box-icon .elementor-icon { width: 36px; height: 36px; font-size: 16px; }
	body.bc .bc-s-angebot .elementor-icon-box-title,
	body.bc .bc-s-angebot .elementor-icon-box-title a { font-size: 19px; }
	body.bc .bc-s-angebot .elementor-icon-box-description { margin-top: 4px; font-size: 13.5px; line-height: 1.45; }
	body.bc .bc-s-angebot::after { top: 50%; right: 18px; bottom: auto; transform: translateY(-50%); font-size: 18px; }
	body.bc .bc-s-angebot:hover::after { transform: translate(4px, -50%); }

	/* Stoerungsmelder: volle Breite, 56 px Klickflaeche, Pfeil rechts */
	body.bc .bc-s-melder .elementor-icon-list-items { grid-template-columns: minmax(0, 1fr); gap: 8px; }

	body.bc .bc-s-melder .elementor-icon-list-item > a {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		min-height: 56px;
		padding: 15px 16px;
	}

	body.bc .bc-s-melder .elementor-icon-list-item > a::before { flex: none; width: 6px; height: 28px; }
	body.bc .bc-s-melder .elementor-icon-list-text { flex: 1 1 auto; font-size: 16px; line-height: 1.3; }

	body.bc .bc-s-melder .elementor-icon-list-item > a::after {
		content: "→" / "";
		font-size: 16px;
		font-weight: 600;
	}

	/* Betreuung */
	body.bc .bc-s-betreuung { padding: 30px 18px; }
	body.bc .bc-s-betreuung__text { padding: 20px 18px 22px; }
	body.bc .bc-s-fliess p { font-size: 16.5px; line-height: 1.6; }
	body.bc .bc-s-preis .raven-heading-title { font-size: 46px; }

	/* Leseflaeche */
	body.bc .bc-s-lese { grid-template-columns: minmax(0, 1fr); }
	body.bc .bc-s-lese__seite { padding: 20px 18px; }
	body.bc .bc-s-lese__titel .raven-heading-title { font-size: 24px; }
	body.bc .bc-s-lese__titel .raven-heading-title::before { width: 30px; margin-bottom: 12px; }
	body.bc .bc-s-lese__kontakt { padding-top: 8px; }
	body.bc .bc-s-lese__text { padding: 20px 18px 22px; }
	body.bc .bc-s-lese__vorspann p { font-size: 17px; }
	body.bc .bc-s-fakten { gap: 16px; }

	/* Leistungen: zweispaltig, weil die Anton-Titel kurz sind */
	body.bc .bc-s-kachel { min-height: 128px; padding: 18px 16px; }
	body.bc .bc-s-kachel .elementor-icon-box-title,
	body.bc .bc-s-kachel .elementor-icon-box-title a { font-size: 18px; letter-spacing: .04em; }
	body.bc .bc-s-kachel .elementor-icon-box-description { margin-top: 8px; font-size: 13px; line-height: 1.45; }
	body.bc .bc-s-kachel::after { content: none; }

	body.bc .bc-s-gegen,
	body.bc .bc-s-werkzeugraster { grid-template-columns: minmax(0, 1fr); }

	body.bc .bc-s-zitat { padding: 34px 18px; }
	body.bc .bc-s-zitat__satz p { font-size: 26px; line-height: 1.16; }

	body.bc .bc-s-fragen .elementor-tab-title { padding: 15px 18px; font-size: 16px; }
	body.bc .bc-s-fragen .elementor-tab-content { padding: 0 18px 18px; }

	body.bc .bc-s-kontakt { padding: 30px 18px; }
	body.bc .bc-s-kontakt__titel .raven-heading-title { font-size: 32px; }
	body.bc .bc-s-kontakt__text p { font-size: 16px; }
}