/* =========================================================================
   b:work – Startseite v3 („Empfehlungs-Marke")
   Eigenes, vollständig namespaced Set (.bwork-s3-*) → keine Kollision mit
   dem Bestand oder mit .bwork-s2-* (Startseite v2 / check24-Muster).
   Tokens ausschließlich aus theme.json (var(--wp--preset--*)).
   ========================================================================= */

/* ---------- 01 Hero ---------------------------------------------------- */
.bwork-s3-hero .wp-block-columns { align-items: center; }
.bwork-s3-heroimg {
	margin: 0;
	filter: drop-shadow(0 24px 48px rgba(0,0,0,.45));
}
.bwork-s3-heroimg img { width: 100%; height: auto; display: block; }

/* Trust-Zeile direkt unter den Hero-Buttons */
.bwork-s3-herotrust {
	display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
	margin-top: var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.35;
}
.bwork-s3-herotrust span { display: inline-flex; align-items: center; gap: .45rem; }
.bwork-s3-herotrust .material-icons-round { font-size: 1.15rem; color: var(--wp--preset--color--accent); }

/* ---------- 02 Logo-Wand Großhändler ----------------------------------- */
.bwork-s3-logos {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--wp--preset--spacing--sm);
	align-items: center;
	margin-top: var(--wp--preset--spacing--md);
}
.bwork-s3-logo {
	display: flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 10px;
	padding: .9rem 1rem;
	min-height: 88px;
}
.bwork-s3-logo img {
	max-width: 100%; max-height: 56px; width: auto; height: auto;
	object-fit: contain;
	/* BEWUSST in Farbe: Die Logos SIND das Trust-Argument. Graustufen nehmen
	   bekannten Marken (Würth, GC-GRUPPE) genau die Wiedererkennung, wegen der
	   sie hier stehen. */
}
.bwork-s3-logos-more {
	margin-top: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--label);
}

/* ---------- 03 Empfehlungs-Zahlen -------------------------------------- */
.bwork-s3-proof {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--sm);
	margin-top: var(--wp--preset--spacing--md);
}
.bwork-s3-proof__item {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--md);
	text-align: center;
}
.bwork-s3-proof__num {
	font-size: var(--wp--preset--font-size--statistic);
	line-height: 1.05;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	display: block;
}
.bwork-s3-proof__lbl {
	margin-top: .5rem;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.4;
}
.bwork-s3-proof__src {
	margin-top: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

/* ---------- 04 App-Demo ------------------------------------------------- */
.bwork-s3-demo__grid {
	display: grid;
	grid-template-columns: 1fr minmax(240px, 330px);
	gap: var(--wp--preset--spacing--xl);
	align-items: center;
}
.bwork-s3-demo__media { margin: 0; }
.bwork-s3-demo__media img {
	width: 100%; height: auto; display: block;
	border-radius: 14px;
	/* Die Slideshow ist sehr hochformatig (480x1233). Ohne Deckel reißt sie die
	   Sektion auf und links entsteht eine große Leerfläche. */
	max-height: 620px; width: auto; margin-inline: auto;
	object-fit: contain;
}
.bwork-s3-demo__qr {
	display: flex; align-items: center; gap: var(--wp--preset--spacing--sm);
	margin-top: var(--wp--preset--spacing--md);
	padding: var(--wp--preset--spacing--sm);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 12px;
	max-width: 26rem;
}
.bwork-s3-demo__qr img { width: 104px; height: 104px; display: block; }
.bwork-s3-demo__qr p { margin: 0; font-size: var(--wp--preset--font-size--label); }
.bwork-s3-checks { list-style: none; margin: var(--wp--preset--spacing--sm) 0 0; padding: 0; }
.bwork-s3-checks li {
	display: flex; align-items: flex-start; gap: .5rem;
	margin-bottom: .4rem;
	font-size: var(--wp--preset--font-size--body);
}
.bwork-s3-checks .material-icons-round {
	font-size: 1.25rem; color: var(--wp--preset--color--success); flex: 0 0 auto; margin-top: .1rem;
}

/* ---------- 05 Funktionen (Handwerkersprache) -------------------------- */
.bwork-s3-funcs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--sm);
	margin-top: var(--wp--preset--spacing--md);
}
.bwork-s3-func {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--md);
	display: flex; flex-direction: column; gap: .5rem;
}
.bwork-s3-func__icon {
	width: 44px; height: 44px; border-radius: 10px;
	display: grid; place-items: center;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	margin-bottom: .25rem;
}
.bwork-s3-func__t {
	font-size: var(--wp--preset--font-size--h4);
	line-height: 1.25; font-weight: 700; margin: 0;
	color: var(--wp--preset--color--primary);
}
.bwork-s3-func__d { margin: 0; font-size: var(--wp--preset--font-size--body); }
.bwork-s3-tag {
	align-self: flex-start; margin-top: auto;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600; letter-spacing: .02em;
	padding: .2rem .6rem; border-radius: 999px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--outline);
}
.bwork-s3-tag--pro {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary);
}

/* ---------- 06 Support -------------------------------------------------- */
.bwork-s3-support {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--sm);
	margin-top: var(--wp--preset--spacing--md);
}
.bwork-s3-support__card {
	border-radius: 12px; padding: var(--wp--preset--spacing--md);
	border: 1px solid var(--wp--preset--color--outline);
	background: var(--wp--preset--color--base);
}
.bwork-s3-support__card--pro {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary);
}
.bwork-s3-support__card--pro .bwork-s3-support__h { color: var(--wp--preset--color--accent); }
.bwork-s3-support__h {
	font-size: var(--wp--preset--font-size--h4); margin: 0 0 .5rem;
	color: var(--wp--preset--color--primary);
}
.bwork-s3-support__card ul { margin: .75rem 0 0; padding-left: 1.1rem; }
.bwork-s3-support__card li { margin-bottom: .35rem; }

/* ---------- 07 Mitreden ------------------------------------------------- */
.bwork-s3-ship {
	display: flex; flex-wrap: wrap; gap: .6rem;
	margin-top: var(--wp--preset--spacing--md);
}
.bwork-s3-ship span {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .5rem .9rem; border-radius: 999px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--outline);
	font-size: var(--wp--preset--font-size--label);
}
.bwork-s3-ship .material-icons-round { font-size: 1.1rem; color: var(--wp--preset--color--success); }

/* ---------- Responsive -------------------------------------------------- */
@media (max-width: 1024px) {
	.bwork-s3-logos { grid-template-columns: repeat(3, 1fr); }
	.bwork-s3-funcs { grid-template-columns: repeat(2, 1fr); }
	.bwork-s3-demo__grid { grid-template-columns: 1fr; }
	.bwork-s3-demo__media { max-width: 340px; margin-inline: auto; }
}
@media (max-width: 782px) {
	.bwork-s3-logos { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
	.bwork-s3-logo { min-height: 72px; padding: .7rem; }
	.bwork-s3-logo img { max-height: 44px; }
	.bwork-s3-proof { grid-template-columns: 1fr; }
	.bwork-s3-funcs { grid-template-columns: 1fr; }
	.bwork-s3-support { grid-template-columns: 1fr; }
	.bwork-s3-herotrust { gap: .4rem 1rem; }
	.bwork-s3-demo__qr { display: none; } /* QR ist auf dem Handy sinnlos */
}

/* ---------- 05b Mobile-App-Block (erweitert) --------------------------- */
.bwork-s3-app {
	display: grid;
	grid-template-columns: 1fr minmax(260px, 420px);
	gap: var(--wp--preset--spacing--xl);
	align-items: center;
	margin-top: var(--wp--preset--spacing--lg);
	padding: var(--wp--preset--spacing--lg);
	background: var(--wp--preset--color--secondary);
	border-radius: 16px;
}
.bwork-s3-app__h {
	font-size: var(--wp--preset--font-size--h3);
	line-height: 1.15; margin: .6rem 0 .5rem;
	color: var(--wp--preset--color--primary);
}
.bwork-s3-app__lead { margin: 0 0 .75rem; font-size: var(--wp--preset--font-size--body-lg); }
.bwork-s3-app__img { margin: 0; }
.bwork-s3-app__img img { width: 100%; height: auto; display: block; }

/* ---------- 08 Preise (3 Wege) ----------------------------------------- */
.bwork-s3-plans {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--sm);
	margin-top: var(--wp--preset--spacing--md);
	align-items: stretch;
}
.bwork-s3-plan {
	position: relative;
	display: flex; flex-direction: column;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--md);
}
.bwork-s3-plan .wp-block-buttons { margin-top: auto; padding-top: var(--wp--preset--spacing--sm); }
.bwork-s3-plan--partner { border-color: var(--wp--preset--color--primary); border-width: 2px; }
.bwork-s3-plan--featured {
	border-color: var(--wp--preset--color--accent); border-width: 2px;
	box-shadow: 0 12px 28px rgba(25,0,35,.10);
}
.bwork-s3-plan__flag {
	position: absolute; top: -.75rem; right: 1rem;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small); font-weight: 700;
	padding: .25rem .7rem; border-radius: 999px;
}
.bwork-s3-plan__name {
	font-size: var(--wp--preset--font-size--label); font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--wp--preset--color--text-muted); margin: 0;
}
.bwork-s3-plan__price {
	font-size: var(--wp--preset--font-size--h3); font-weight: 700; line-height: 1.1;
	color: var(--wp--preset--color--primary); margin: .35rem 0 .5rem;
}
.bwork-s3-plan__price s { color: var(--wp--preset--color--text-muted); font-weight: 400; font-size: .55em; margin-right: .25rem; }
.bwork-s3-plan__price small { font-size: .45em; font-weight: 400; color: var(--wp--preset--color--text); }
.bwork-s3-plan__desc { margin: 0 0 .5rem; font-size: var(--wp--preset--font-size--body); }

/* ---------- 09 Gewerke -------------------------------------------------- */
.bwork-s3-gwgrid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--sm);
	margin-top: var(--wp--preset--spacing--md);
}
.bwork-s3-gw {
	display: flex; align-items: center; gap: .75rem;
	padding: 1rem 1.15rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 12px;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	transition: border-color .16s ease, transform .16s ease;
}
.bwork-s3-gw:hover { border-color: var(--wp--preset--color--primary); transform: translateY(-2px); }
.bwork-s3-gw__n { flex: 1; }
.bwork-s3-gw__a { color: var(--wp--preset--color--text-muted); font-size: 1.15rem; }
.bwork-s3-gw:hover .bwork-s3-gw__a { color: var(--wp--preset--color--primary); }

@media (max-width: 1024px) {
	.bwork-s3-app { grid-template-columns: 1fr; }
	.bwork-s3-app__img { max-width: 360px; margin-inline: auto; }
	.bwork-s3-plans { grid-template-columns: 1fr; }
	.bwork-s3-gwgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 782px) {
	.bwork-s3-app { padding: var(--wp--preset--spacing--md); }
	.bwork-s3-gwgrid { grid-template-columns: 1fr; }
}

/* Listen-Items: Icon + Fließtext als zwei Flex-Kinder, damit <strong> nicht
   als eigenes Item umbricht. */
.bwork-s3-checks li > span:not(.material-icons-round) { flex: 1; }

/* =========================================================================
   Linke Textkante – verbindlich für alle v3-Sektionen
   -------------------------------------------------------------------------
   v3 ist durchgehend LINKSBÜNDIG: Dachzeile, H2, Lead und alle Inhaltsblöcke
   starten auf derselben Kante (= Container-Kante, contentSize aus theme.json).

   Warum das überhaupt nötig ist:
   Das Basis-CSS zentriert `.bwork-lead` (`.bwork-sec .bwork-lead{max-width:46rem;
   margin-inline:auto}`) – für die zentriert aufgebauten Bestandsseiten korrekt,
   hier rückt es den Absatz um 144 px gegenüber der H2 ein.

   Der Fix ist bewusst NICHT `margin-inline:0` (dann klebt der Absatz am
   Sektions-Padding) und NICHT `max-width:none` (dann wird er breiter als der
   Container). Er bekommt exakt die Container-Breite und behält das
   Auto-Margin – dadurch liegt er auf derselben Kante wie seine Geschwister.
   ========================================================================= */
/* Attribut-Selektor statt Sektionsliste: gilt automatisch auch für später
   ergänzte v3-Sektionen. Eine handgepflegte Liste wird sonst genau dann
   vergessen, wenn eine neue Sektion dazukommt. */
section[class*="bwork-s3-"] .bwork-lead {
	max-width: var(--wp--style--global--content-size, 1024px);
	margin-inline: auto;
	margin-top: .25rem;
	margin-bottom: 0;
}

/* Gleiches Muster für die kleinen Fließtext-Absätze unter den Blöcken. */
section[class*="bwork-s3-"] > .bwork-s3-logos-more,
section[class*="bwork-s3-"] > .bwork-s3-proof__src {
	max-width: var(--wp--style--global--content-size, 1024px);
	margin-inline: auto;
}

/* FAQ: Das Basis-CSS zentriert `.bwork-faq` (max-width:56rem; margin:… auto).
   Achtung – die Klasse sitzt auf DEMSELBEN Element wie .bwork-s3-faqsec,
   ein Nachfahren-Selektor greift hier nicht. */
.bwork-s3-faqsec.bwork-faq {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
.bwork-s3-faqsec details { max-width: 56rem; }   /* Lesebreite bleibt, Kante stimmt */

/* ---------- 08b Mitarbeiter-Preis (Add-on-Zeile) ----------------------- */
.bwork-s3-plans--two { grid-template-columns: repeat(2, 1fr); }
.bwork-s3-addon {
	display: flex; align-items: center; gap: var(--wp--preset--spacing--md);
	margin-top: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--md);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--outline);
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: 12px;
}
.bwork-s3-addon__price {
	font-size: var(--wp--preset--font-size--h3); font-weight: 700; line-height: 1;
	color: var(--wp--preset--color--primary); white-space: nowrap;
}
.bwork-s3-addon__price small { font-size: .4em; font-weight: 400; }
.bwork-s3-addon__t { margin: 0 0 .2rem; font-weight: 700; color: var(--wp--preset--color--primary); }
.bwork-s3-addon__d { margin: 0; font-size: var(--wp--preset--font-size--body); }

/* ---------- 09 Preisvergleich ------------------------------------------ */
.bwork-s3-vgl { margin-top: var(--wp--preset--spacing--md); max-width: 52rem; }
.bwork-s3-vgl__row {
	display: grid;
	grid-template-columns: 12rem 1fr 7rem;
	align-items: center; gap: 1rem;
	padding: .55rem 0;
}
.bwork-s3-vgl__name { font-weight: 600; color: var(--wp--preset--color--primary); }
.bwork-s3-vgl__bar {
	height: 16px; border-radius: 999px;
	background: var(--wp--preset--color--outline);
	display: block;
}
.bwork-s3-vgl__row--own .bwork-s3-vgl__name { font-weight: 800; }
.bwork-s3-vgl__row--own .bwork-s3-vgl__bar { background: var(--wp--preset--color--accent); }
.bwork-s3-vgl__val { text-align: right; font-weight: 700; color: var(--wp--preset--color--primary); white-space: nowrap; }
.bwork-s3-vgl__row--own .bwork-s3-vgl__val { color: var(--wp--preset--color--primary); }
.bwork-s3-vgl__note {
	margin-top: .75rem; font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted); line-height: 1.45;
}
.bwork-s3-vgl__cards {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--sm);
	margin-top: var(--wp--preset--spacing--lg);
}
.bwork-s3-vgl__card {
	background: var(--wp--preset--color--secondary);
	border-radius: 12px; padding: var(--wp--preset--spacing--md);
}
.bwork-s3-vgl__ct {
	margin: 0; font-size: var(--wp--preset--font-size--small); font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase; color: var(--wp--preset--color--text-muted);
}
.bwork-s3-vgl__cv {
	margin: .3rem 0 .35rem; font-size: var(--wp--preset--font-size--h3);
	font-weight: 800; line-height: 1; color: var(--wp--preset--color--primary);
}
.bwork-s3-vgl__cd { margin: 0; font-size: var(--wp--preset--font-size--body); }

@media (max-width: 782px) {
	.bwork-s3-plans--two { grid-template-columns: 1fr; }
	.bwork-s3-addon { flex-direction: column; align-items: flex-start; gap: .5rem; }
	.bwork-s3-vgl__row { grid-template-columns: 1fr 5.5rem; }
	.bwork-s3-vgl__bar { display: none; }
	.bwork-s3-vgl__cards { grid-template-columns: 1fr; }
}