/* BrikoScout Visual Phase 1 – nur geladen, wenn die Darstellung aktiv ist. */

/* ---------- Startseite: breite Sechser-Reihen (Korrekturrunde 02.10.2026) ----------
   Die beiden Bildabschnitte nutzen dieselbe Achse wie Kopfzeile und Haendlerband
   (width min(1760px,100%), Aussenabstand 24px); ab 1400px stehen alle sechs Kacheln
   bzw. Bereiche nebeneinander, darunter 3 bzw. 2 je Reihe. */
body.bs-visual-on .brikoscout-page #projekte,
body.bs-visual-on .brikoscout-page #alle-kategorien { padding-left: 24px; padding-right: 24px; }
body.bs-visual-on .brikoscout-page #projekte .wrap,
body.bs-visual-on .brikoscout-page #alle-kategorien .wrap { max-width: 1712px; }
@media (min-width: 1400px) {
	/* body-Praefix: das Theme-CSS steht inline im Body und kaeme sonst in der Kaskade spaeter */
	body.bs-visual-on .brikoscout-page .project-strip--visual { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
	body.bs-visual-on .brikoscout-page .all-cats--visual { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
	.brikoscout-page .all-cats--visual .category-card { min-height: 380px; border-radius: 22px; }
	.brikoscout-page .all-cats--visual .category-content { padding: 16px; }
	.brikoscout-page .all-cats--visual .category-content h3 { font-size: 20px; }
	.brikoscout-page .all-cats--visual .category-content p { font-size: 13px; line-height: 1.4; }
	.brikoscout-page .all-cats--visual .card-chips span { padding: 5px 8px; font-size: 11px; }
	.brikoscout-page .project-strip--visual .project-tile--visual .txt { padding: 12px 14px 14px; }
	.brikoscout-page .project-strip--visual .project-tile--visual strong { font-size: 15px; }
	.brikoscout-page .project-strip--visual .project-tile--visual small { font-size: 12.5px; }
}
@media (max-width: 1180px) {
	body.bs-visual-on .brikoscout-page #projekte,
	body.bs-visual-on .brikoscout-page #alle-kategorien { padding-left: 14px; padding-right: 14px; }
}

/* ---------- Startseite: Projektkacheln mit Bild ---------- */
.brikoscout-page .project-strip--visual { gap: 16px; }
.brikoscout-page .project-strip--visual .project-tile--visual {
	position: relative;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 22px;
	background: #fff;
}
.brikoscout-page .project-tile__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #e9efe6;
}
.brikoscout-page .project-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}
.brikoscout-page .project-tile--visual:hover .project-tile__media img { transform: scale(1.04); }
/* Korrekturrunde 2: keine Symbol-Icons zusaetzlich zum Bild (Bild + Titel + Link reichen). */
body.home #projekte .project-strip--visual .project-tile--visual > .ico { display: none !important; }
.brikoscout-page .project-strip--visual .project-tile--visual .txt { padding: 14px 16px 16px; }
@media (max-width: 720px) {
	.brikoscout-page .project-strip--visual { gap: 10px; }
	.brikoscout-page .project-strip--visual .project-tile--visual { border-radius: 18px; }
	.brikoscout-page .project-strip--visual .project-tile--visual .txt { padding: 10px 12px 12px; }
	.brikoscout-page .project-strip--visual .project-tile--visual .txt small { display: none; }
	.brikoscout-page .project-strip--visual .project-tile--visual .txt em { margin-top: 4px; }
}

/* ---------- Startseite: Bereichskarten mit Bild ----------
   Das Customizer-CSS (Zusaetzliches CSS, Beitrag 171) malt per nth-child die alten
   Produktbilder als !important-Hintergrund auf die Figur und blendet <img> aus.
   Bei aktiver Darstellung gewinnt hier die hoehere Spezifitaet (5 Klassen). */
body.home.bs-visual-on .brikoscout-page .all-cats--visual .category-card figure { background: #102011 !important; min-height: 0; border-radius: 0; }
body.home.bs-visual-on .brikoscout-page .all-cats--visual .category-card figure::after { display: none !important; }
body.home.bs-visual-on .brikoscout-page .all-cats--visual .category-card figure img {
	display: block !important;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: none !important;      /* Motiv scharf und klar, keine Weichzeichnung, keine Aufhellung */
	transform: none;
	transition: transform .35s ease;
}
body.home.bs-visual-on .brikoscout-page .all-cats--visual .category-card:hover figure img { transform: scale(1.04); }
/* Lesbarkeit ueber einen ruhigen Verlauf von unten, oberes Drittel bleibt frei */
body.home.bs-visual-on .brikoscout-page .all-cats--visual .category-card::before {
	background: linear-gradient(180deg, rgba(3, 12, 7, 0) 0%, rgba(3, 12, 7, .08) 34%, rgba(3, 12, 7, .55) 62%, rgba(3, 12, 7, .9) 100%) !important;
}
body.home.bs-visual-on .brikoscout-page .all-cats--visual .category-content h3,
body.home.bs-visual-on .brikoscout-page .all-cats--visual .category-content p { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }

/* ---------- Startseite: Hero mit Foto (Hintergrundbild wird inline gesetzt) ---------- */
body.home.bs-visual-hero section.hero::before,
body.home.bs-visual-hero .brikoscout-page .hero::before {
	background:
		radial-gradient(ellipse at 78% 20%, rgba(255, 225, 125, .18) 0%, rgba(6, 21, 13, 0) 55%),
		linear-gradient(100deg, rgba(6, 21, 13, .96) 0%, rgba(7, 25, 15, .93) 30%, rgba(11, 35, 21, .78) 48%, rgba(16, 40, 24, .42) 66%, rgba(16, 40, 24, .18) 100%) !important;
}
body.home.bs-visual-hero section.hero::after,
body.home.bs-visual-hero .brikoscout-page .hero::after { display: none !important; }
@media (max-width: 980px) {
	body.home.bs-visual-hero section.hero::before,
	body.home.bs-visual-hero .brikoscout-page .hero::before {
		background: linear-gradient(170deg, rgba(6, 21, 13, .95) 0%, rgba(8, 30, 18, .86) 55%, rgba(16, 40, 24, .55) 100%) !important;
	}
}

/* ---------- Kategorie-Hero mit Bild (Pilotkategorien) ---------- */
.bs-cat-stage--visual {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: clamp(300px, 32vw, 420px);
	grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
	background: #eef5ea;
	color: #102016;
}
.bs-cat-stage--visual .bs-cat-stage__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}
.bs-cat-stage--visual .bs-cat-stage__media img,
.bs-cat-stage--visual .bs-cat-stage__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 68% 50%;
	display: block;
}
.bs-cat-stage--visual::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(246, 250, 243, .97) 0%, rgba(246, 250, 243, .94) 38%, rgba(246, 250, 243, .55) 56%, rgba(246, 250, 243, 0) 76%);
	pointer-events: none;
}
.bs-cat-stage--visual .bs-cat-stage__main { max-width: 36rem; }
.bs-cat-stage--visual .bs-cat-stage__lead { color: #223229; }
.bs-cat-stage--visual .bs-cat-stage__count {
	display: inline-flex;
	align-items: center;
	margin: 16px 0 0;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .78);
	border: 1px solid rgba(8, 35, 19, .12);
	font-size: .875rem;
	font-weight: 700;
	color: #1d3a27;
}
.bs-cat-stage--visual .bs-cat-stage__side { position: relative; z-index: 1; }
.bs-cat-stage--visual .bs-cat-stage__title {
	text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
@media (max-width: 781px) {
	.bs-cat-stage--visual {
		min-height: 0;
		padding: 0;
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
	.bs-cat-stage--visual .bs-cat-stage__media {
		position: relative;
		inset: auto;
		z-index: 0;
		aspect-ratio: 16 / 9;
	}
	.bs-cat-stage--visual .bs-cat-stage__media img,
	.bs-cat-stage--visual .bs-cat-stage__img { object-position: 50% 50%; }
	.bs-cat-stage--visual::before { display: none; }
	.bs-cat-stage--visual .bs-cat-stage__main { padding: 18px 18px 20px; max-width: none; }
	.bs-cat-stage--visual .bs-cat-stage__side { padding: 0 18px 18px; }
	.bs-cat-stage--visual .bs-cat-stage__count { margin-top: 12px; }
}

/* ---------- Unterkategorien der Pilotkategorien (Korrektur 02.10.2026) ----------
   Die kompakte "Chips"-Variante (z. B. Werkzeuge & Maschinen mit 57 Unterbereichen) erhaelt
   dieselbe ruhige Kachel-Optik wie die Kartenvariante der anderen Bereiche: rechteckige Kacheln
   mit dezent gerundeten Ecken in einem gleichmaessigen Raster, Name links, Anzahl rechts.
   Inhalt, Reihenfolge und Ziele bleiben unveraendert (nur CSS). */
body.bs-visual-cat .bs-cat-subcats--chips .bs-cat-subcats__row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
	gap: 8px;
}
body.bs-visual-cat .bs-cat-subcats--chips .bs-cat-subcats__row a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 46px;
	padding: 9px 13px;
	border-radius: 10px;
	border: 1px solid rgba(22, 28, 34, .14);
	background: #fff;
	color: #161c22;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.bs-visual-cat .bs-cat-subcats--chips .bs-cat-subcats__row a small {
	flex: 0 0 auto;
	font-size: .78rem;
	font-weight: 500;
	color: #5c6a62;
	background: #f3f6f1;
	border: 1px solid rgba(8, 35, 19, .08);
	border-radius: 6px;
	padding: 2px 7px;
}
body.bs-visual-cat .bs-cat-subcats--chips .bs-cat-subcats__row a:hover,
body.bs-visual-cat .bs-cat-subcats--chips .bs-cat-subcats__row a:focus-visible {
	border-color: rgba(63, 122, 36, .5);
	box-shadow: 0 4px 14px rgba(8, 35, 19, .07);
}
body.bs-visual-cat .bs-cat-subcats--chips .bs-cat-subcats__title { margin-bottom: 12px; }
@media (max-width: 781px) {
	body.bs-visual-cat .bs-cat-subcats--chips .bs-cat-subcats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
	body.bs-visual-cat .bs-cat-subcats--chips .bs-cat-subcats__row a { min-height: 42px; padding: 7px 10px; font-size: .84rem; border-radius: 9px; }
}

/* ---------- Unterkategorien global: einheitliche Kacheln (alle Kategorieseiten) ---------- */
.bs-visual-subcats { margin: 0 0 26px; }
.bs-visual-subcats .bs-cat-subcats__title { margin: 0 0 12px; }
.bs-visual-subcats__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
	gap: 8px;
}
.bs-visual-subcats__item { min-width: 0; margin: 0; }
.bs-visual-subcats__item[hidden] { display: none; }
.bs-visual-subcats__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 50px;
	height: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	border-radius: 10px;
	border: 1px solid rgba(22, 28, 34, .14);
	background: #fff;
	color: #161c22;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.bs-visual-subcats__link:hover,
.bs-visual-subcats__link:focus-visible { border-color: rgba(63, 122, 36, .5); box-shadow: 0 4px 14px rgba(8, 35, 19, .07); }
.bs-visual-subcats__name {
	min-width: 0;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	hyphens: auto;
}
.bs-visual-subcats__count {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: .78rem;
	font-weight: 500;
	color: #5c6a62;
	background: #f3f6f1;
	border: 1px solid rgba(8, 35, 19, .08);
	border-radius: 6px;
	padding: 2px 7px;
}
.bs-visual-subcats__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	margin: 12px 0 0;
	padding: 8px 16px;
	border-radius: 10px;
	border: 1px solid rgba(8, 35, 19, .22);
	background: #fff;
	color: #102016;
	font: inherit;
	font-weight: 700;
	font-size: .9rem;
	cursor: pointer;
}
.bs-visual-subcats__toggle:hover,
.bs-visual-subcats__toggle:focus-visible { border-color: #3f7a24; background: #f4f9ef; }
.bs-visual-subcats__toggle[hidden] { display: none; }
@media (max-width: 781px) {
	.bs-visual-subcats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
	.bs-visual-subcats__link { min-height: 44px; padding: 7px 10px; border-radius: 9px; gap: 6px; }
	.bs-visual-subcats__name { font-size: .84rem; -webkit-line-clamp: 4; }
	.bs-visual-subcats__count { font-size: .72rem; padding: 1px 6px; }
}

/* ---------- Startseite: Kaufberatungs-Karten mit Bild (Phase 2) ---------- */
.brikoscout-page .guide-grid--visual .guide-card--visual { padding: 0; overflow: hidden; border-radius: 22px; }
.brikoscout-page .guide-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #e9efe6; }
.brikoscout-page .guide-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.brikoscout-page .guide-card--visual:hover .guide-card__media img { transform: scale(1.04); }
.brikoscout-page .guide-card--visual .guide-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 20px 20px; }
.brikoscout-page .guide-card--visual .guide-card__body a { margin-top: auto; }
@media (max-width: 720px) {
	.brikoscout-page .guide-grid--visual .guide-card--visual { border-radius: 18px; }
	.brikoscout-page .guide-card--visual .guide-card__body { padding: 12px 14px 14px; }
}