/*
Theme Name: Balkonboden-Ratgeber
Theme URI: https://balkonbodenbeschichtung.de/
Description: Eigenständiges Theme für balkonbodenbeschichtung.de, Archetyp Sanierungs-Schichtenaufbau-Ratgeber: heller Kopf, Themen-Tabs, Schichtenstreifen als Trenner, eckige Karten mit Haarlinien.
Author: Zurynski, Oezdogan & Co GmbH
Version: 1.0.0
Text Domain: t-balkonbodenbeschichtung-de
*/

:root {
	--bg: #f6f4f0;
	--surface: #ffffff;
	--text: #23262b;
	--muted: #6b7078;
	--muted-t: #4a4f56;
	--primary: #2f5d62;
	--primary-d: #234649;
	--accent: #e07a2f;
	--link: #0b6e8a;
	--line: #d6d1c8;
	--stone: #cfcac1;
	--r: 2px;
	--head: "Barlow", "Arial Narrow", Arial, sans-serif;
	--body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--body);
	font-size: 18px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--primary-d); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 600; line-height: 1.2; margin: 0 0 .6em; color: var(--text); }
p { margin: 0 0 1em; }

.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal; }
.screen-reader-text:focus { clip: auto; clip-path: none; height: auto; width: auto; margin: 0; padding: 10px 16px; background: var(--surface); color: var(--text); z-index: 100; top: 6px; left: 6px; }
.bb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.bb-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.bb-narrow { max-width: 820px; }

/* Disclaimer-Banner des Kerns */
.ps-disclaimer { background: #ecefec; color: var(--text); border-bottom: 1px solid var(--line); font: 16px/1.5 var(--body); padding: 10px 20px; }
.ps-disclaimer__inner { max-width: 1200px; margin: 0 auto; }
.ps-disclaimer a { color: var(--link); }

/* ---------- Kopf ---------- */
.bb-head { background: var(--surface); border-bottom: 1px solid var(--line); }
.bb-head__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.bb-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.bb-brand__name { font-family: var(--head); font-weight: 600; font-size: 27px; letter-spacing: .01em; line-height: 1; color: var(--text); }
.bb-brand__name span { color: var(--primary); }
.bb-brand:hover .bb-brand__name { color: var(--primary-d); }
.bb-searchtoggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--r); width: 44px; height: 44px; color: var(--text); cursor: pointer; align-items: center; justify-content: center; }
.bb-headsearch { width: 320px; max-width: 100%; }
.bb-search { display: flex; border: 1px solid #8e9298; border-radius: var(--r); background: #fff; }
.bb-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 12px; font: 16px var(--body); color: var(--text); border-radius: var(--r); }
.bb-search input::placeholder { color: var(--muted-t); opacity: 1; }
.bb-search button { border: 0; background: var(--primary); color: #fff; width: 46px; cursor: pointer; border-radius: 0 var(--r) var(--r) 0; display: inline-flex; align-items: center; justify-content: center; }
.bb-search button:hover { background: var(--primary-d); }

.bb-tabs { border-top: 1px solid var(--line); background: #faf9f6; }
.bb-tabs__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; overflow-x: auto; scrollbar-width: thin; }
.bb-tabs__list li { flex: 0 0 auto; }
.bb-tabs__list a { display: block; padding: 12px 20px; font-family: var(--head); font-weight: 500; font-size: 18px; letter-spacing: .02em; text-transform: uppercase; color: var(--text); text-decoration: none; border-right: 1px solid var(--line); border-top: 3px solid transparent; margin-top: -1px; white-space: nowrap; }
.bb-tabs__list li:first-child a { border-left: 1px solid var(--line); }
.bb-tabs__list a:hover { background: #fff; color: var(--primary-d); border-top-color: var(--stone); }
.bb-tabs__list a.is-active { background: #fff; border-top-color: var(--accent); color: var(--primary-d); }

/* ---------- Schichtenstreifen ---------- */
.bb-strip { display: block; height: 16px; border-top: 1px solid var(--text); border-bottom: 1px solid var(--text); position: relative; overflow: hidden; background: var(--stone); }
.bb-strip i { position: absolute; left: 0; right: 0; display: block; }
.bb-strip i:nth-child(1) { top: 0; height: 3px; background: var(--accent); }
.bb-strip i:nth-child(2) { top: 3px; height: 5px; background-color: #a79d8d; background-image: radial-gradient(circle at 3px 2px, #6f665a 1.4px, transparent 1.6px), radial-gradient(circle at 9px 3px, #e3dccf 1.3px, transparent 1.5px); background-size: 12px 5px; }
.bb-strip i:nth-child(3) { top: 8px; height: 3px; background: var(--primary); }
.bb-strip i:nth-child(4) { top: 11px; height: 5px; background-color: var(--stone); background-image: radial-gradient(circle at 5px 2px, #b3ada2 1.6px, transparent 1.8px); background-size: 14px 5px; }

/* ---------- Gemeinsame Bausteine ---------- */
.bb-eyebrow { font-family: var(--head); font-weight: 600; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin: 0 0 8px; }
.bb-lead { font-size: 21px; line-height: 1.55; color: var(--text); max-width: 60ch; }
.bb-btn { display: inline-block; background: var(--primary); color: #fff; padding: 12px 22px; text-decoration: none; font-family: var(--head); font-weight: 600; font-size: 18px; letter-spacing: .02em; border-radius: var(--r); }
.bb-btn:hover { background: var(--primary-d); color: #fff; }
.bb-crumbs { padding-top: 16px; padding-bottom: 4px; font-size: 16px; color: var(--muted-t); }
.bb-crumbs a { color: var(--link); }
.bb-more { font-weight: 600; }
.bb-soon { display: inline-block; font-size: 16px; color: var(--muted-t); border: 1px dashed #8e9298; padding: 2px 10px; border-radius: var(--r); }
.bb-tag { display: inline-block; background: #ecefec; border: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 600; padding: 0 8px; border-radius: var(--r); margin-right: 6px; }

.bb-sec { padding: 56px 0; }
.bb-sec--white { background: var(--surface); }
.bb-sec__h { font-size: 36px; margin: 0 0 20px; position: relative; padding-top: 16px; }
.bb-sec__h::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 4px; background: var(--accent); }
.bb-sec__lead { max-width: 76ch; color: var(--text); }
.bb-sec__more { margin: 24px 0 0; }
.bb-block + .bb-block { margin-top: 56px; }

/* Kurzantwort-Box */
.bb-kurz { background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--primary); border-radius: var(--r); padding: 16px 20px 6px; margin: 24px 0; }
.bb-kurz__h { font-family: var(--head); font-weight: 600; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); margin: 0 0 6px; }
.bb-kurz p { font-size: 18px; }
.bb-kurz__src { font-size: 16px !important; color: var(--muted-t); border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }

/* Anzeige: orange Ecke */
.bb-ad, .entry-content .anzeige { position: relative; background: #fff7ee; border: 1px solid #e3b88f; border-radius: var(--r); padding: 40px 20px 20px; margin: 28px 0; font-size: 17px; color: var(--text); overflow: hidden; }
.bb-ad__label, .entry-content .anzeige-label { position: absolute; top: 0; right: 0; background: var(--accent); color: #000; font-family: var(--head); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; line-height: 1; padding: 8px 14px 8px 22px; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); }
.entry-content .anzeige-label { display: inline-block; }
.bb-ad__titel { font-family: var(--head); font-weight: 600; font-size: 22px; line-height: 1.25; margin: 0 0 8px; }
.bb-ad p { font-size: 17px; margin-bottom: .8em; }
.bb-ad__btn { display: inline-block; background: var(--primary); color: #fff; text-decoration: none; padding: 10px 18px; font-family: var(--head); font-weight: 600; font-size: 17px; border-radius: var(--r); }
.bb-ad__btn:hover { background: var(--primary-d); color: #fff; }
.bb-ad__note { margin: 12px 0 0 !important; font-size: 15px !important; color: var(--muted-t); }

/* ---------- Hero ---------- */
.bb-hero { background: var(--bg); padding: 44px 0 40px; }
.bb-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.bb-hero h1 { font-size: 52px; letter-spacing: -.005em; margin-bottom: 14px; }
.bb-hero__fig { margin: 0; background: #fff; border: 1px solid var(--line); padding: 20px 20px 12px; border-radius: var(--r); }
.bb-hero__fig figcaption, .bb-skizze figcaption { font-size: 15px; color: var(--muted-t); margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.bb-svg-hero, .bb-svg-wb, .bb-svg-sys { display: block; width: 100%; height: auto; }

/* ---------- Themen-Tabs und Kacheln ---------- */
.bb-filter { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 24px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; width: fit-content; max-width: 100%; }
.bb-filter button { appearance: none; border: 0; border-right: 1px solid var(--line); background: #fff; color: var(--text); font-family: var(--head); font-weight: 500; font-size: 17px; text-transform: uppercase; letter-spacing: .03em; padding: 11px 18px; cursor: pointer; min-height: 44px; }
.bb-filter button:last-child { border-right: 0; }
.bb-filter button:hover { background: #f1efe9; }
.bb-filter button.is-on { background: var(--primary); color: #fff; }
.bb-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bb-tile { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--stone); border-radius: var(--r); padding: 18px 20px 14px; }
.bb-tile[hidden] { display: none; }
.bb-tile[data-topic="systeme"] { border-top-color: var(--primary); }
.bb-tile[data-topic="kosten"] { border-top-color: var(--accent); }
.bb-tile[data-topic="schaeden"] { border-top-color: #8a5a3c; }
.bb-tile[data-topic="normen"] { border-top-color: #5b6770; }
.bb-tile[data-topic="fassade"] { border-top-color: var(--link); }
.bb-tile h3 { font-size: 22px; margin-bottom: 6px; }
.bb-tile h3 a { color: var(--text); text-decoration: none; }
.bb-tile h3 a:hover { color: var(--link); text-decoration: underline; }
.bb-tile p { font-size: 17px; margin-bottom: .6em; }
.bb-tile__soon { margin-top: 4px; }

/* ---------- Systemvergleich ---------- */
.bb-sys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.bb-sys__card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.bb-sys__body { padding: 16px 18px 12px; flex: 1; }
.bb-sys__body h3 { font-size: 22px; margin-bottom: 2px; }
.bb-sys__tag { font-size: 16px; color: var(--muted-t); margin-bottom: 10px; }
.bb-sys dl { margin: 0; }
.bb-sys dl div { border-top: 1px solid var(--line); padding: 8px 0; }
.bb-sys dt { font-family: var(--head); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.bb-sys dd { margin: 0; font-size: 17px; line-height: 1.45; }

/* ---------- Tabellen ---------- */
.bb-two-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; align-items: start; }
.bb-tab { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.bb-tab > figcaption { font-family: var(--head); font-weight: 600; font-size: 20px; padding: 14px 18px 10px; border-bottom: 1px solid var(--line); background: #faf9f6; }
.bb-tab__scroll { overflow-x: auto; }
.bb-tab__src { font-size: 15px; color: var(--muted-t); margin: 0; padding: 10px 18px 12px; border-top: 1px solid var(--line); }
.bb-tab table, .entry-content table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.45; }
.bb-tab table { min-width: 460px; }
.bb-tab th, .bb-tab td, .entry-content th, .entry-content td { border: 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); word-break: normal; overflow-wrap: normal; hyphens: manual; }
.bb-tab thead th, .entry-content thead th { background: var(--primary); color: #fff; font-family: var(--head); font-weight: 600; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; border-bottom: 0; }
.bb-tab tbody tr:nth-child(even) td, .entry-content tbody tr:nth-child(even) td { background: #faf9f6; }
.bb-tab td:first-child { font-weight: 600; }

/* ---------- Zweispalter mit Sidebar ---------- */
.bb-two { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.bb-two > :first-child { min-width: 0; }
.bb-side { position: sticky; top: 16px; }
.bb-box { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin-bottom: 20px; }
.bb-sec--white .bb-box { background: var(--bg); }
.bb-box__h { font-size: 19px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 3px solid var(--stone); }
.bb-box__note { font-size: 15px; color: var(--muted-t); margin: 10px 0 0; }
.bb-check ul { list-style: none; margin: 0; padding: 0; }
.bb-check li { border-top: 1px solid var(--line); }
.bb-check li:first-child { border-top: 0; }
.bb-check label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 17px; line-height: 1.4; cursor: pointer; }
.bb-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--primary); }
.bb-check__sum { font-size: 16px; font-weight: 600; margin: 10px 0 0; color: var(--primary-d); }
.bb-list { list-style: none; margin: 0; padding: 0; }
.bb-list li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.4; }
.bb-list li:first-child { border-top: 0; }
.bb-list em { display: block; font-style: normal; font-size: 15px; color: var(--muted-t); }
.bb-list .is-soon span { color: var(--text); }

/* ---------- Karten ---------- */
.bb-cardlist { display: grid; gap: 20px; }
.bb-card { display: grid; grid-template-columns: 200px minmax(0, 1fr); background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.bb-sec--white .bb-card { background: var(--bg); }
.bb-card__img { border-right: 1px solid var(--line); background: #fff; display: flex; align-items: center; }
.bb-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-card__body { padding: 16px 20px 10px; }
.bb-card__cat { font-family: var(--head); font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin: 0 0 4px; }
.bb-card h3 { font-size: 24px; margin-bottom: 6px; }
.bb-card h3 a { color: var(--text); text-decoration: none; }
.bb-card h3 a:hover { color: var(--link); text-decoration: underline; }
.bb-card p { font-size: 17px; margin-bottom: .6em; }
.bb-card__meta { font-size: 15px !important; color: var(--muted-t); }
.bb-card--soon { border-style: dashed; }
.bb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bb-cards .bb-card { grid-template-columns: 1fr; }
.bb-cards .bb-card__img { border-right: 0; border-bottom: 1px solid var(--line); }

/* ---------- Fassade-Block ---------- */
.bb-fassade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: center; }
.bb-fassade__fig { border: 1px solid var(--line); background: #fff; }

/* ---------- FAQ ---------- */
.bb-faq { border-top: 1px solid var(--text); margin: 20px 0; }
.bb-faq__item { border-bottom: 1px solid var(--line); background: #fff; }
.bb-sec--white .bb-faq__item { background: var(--surface); }
.bb-faq__item summary { cursor: pointer; list-style: none; padding: 14px 44px 14px 4px; font-family: var(--head); font-weight: 600; font-size: 21px; line-height: 1.3; position: relative; min-height: 48px; }
.bb-faq__item summary::-webkit-details-marker { display: none; }
.bb-faq__item summary::after { content: "+"; position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; line-height: 26px; text-align: center; border: 1px solid var(--text); border-radius: var(--r); font-size: 22px; }
.bb-faq__item[open] summary::after { content: "\2212"; background: var(--accent); border-color: var(--accent); color: #000; }
.bb-faq__a { padding: 0 4px 6px; }
.bb-faq__a p { font-size: 18px; }

/* ---------- Normen-Leiste ---------- */
.bb-norm { background: var(--primary-d); color: #fff; padding: 44px 0; }
.bb-norm__h { color: #fff; font-size: 32px; margin-bottom: 20px; }
.bb-norm__chips { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.bb-norm__chips a { display: block; height: 100%; background: #fff; color: var(--text); text-decoration: none; padding: 12px 14px; border-top: 4px solid var(--accent); border-radius: var(--r); }
.bb-norm__chips a:hover { background: #f1efe9; }
.bb-norm__chips strong { display: block; font-family: var(--head); font-size: 20px; font-weight: 600; line-height: 1.2; }
.bb-norm__chips span { display: block; font-size: 16px; line-height: 1.35; margin-top: 2px; color: var(--muted-t); }
.bb-norm__src { font-size: 17px; margin: 0; color: #eef3f3; line-height: 1.9; }
.bb-norm__src a { color: #cfe9f0; }
.bb-norm__src a:hover { color: #fff; }

/* ---------- Artikel ---------- */
.bb-art { max-width: 1340px; display: grid; grid-template-columns: 210px minmax(0, 740px) 290px; gap: 40px; justify-content: center; padding-top: 24px; padding-bottom: 56px; align-items: start; }
.bb-art__toc { position: sticky; top: 16px; }
.bb-toc { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; }
.bb-toc summary { font-family: var(--head); font-weight: 600; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; list-style: none; padding: 4px 0 8px; border-bottom: 3px solid var(--stone); min-height: 32px; }
.bb-toc summary::-webkit-details-marker { display: none; }
.bb-toc ol { margin: 10px 0 0; padding: 0 0 0 22px; font-size: 16px; line-height: 1.35; }
.bb-toc li { padding: 5px 0; }
.bb-toc a { text-decoration: none; color: var(--text); }
.bb-toc a:hover { color: var(--link); text-decoration: underline; }
.bb-art__side { position: sticky; top: 16px; }
.bb-art__head h1 { font-size: 42px; margin-bottom: 10px; }
.bb-art__meta { font-size: 16px; color: var(--muted-t); border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.bb-skizze { margin: 0 0 28px; background: #fff; border: 1px solid var(--line); padding: 14px 16px 10px; border-radius: var(--r); }
.bb-skizze .bb-svg-hero { max-width: 560px; margin: 0 auto; }

.entry-content { font-size: 19px; line-height: 1.7; }
.entry-content > :first-child { margin-top: 0; }
.entry-content h2 { font-size: 32px; margin: 2em 0 .6em; padding-top: 14px; position: relative; scroll-margin-top: 20px; }
.entry-content h2::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 4px; background: var(--accent); }
.entry-content h3 { font-size: 24px; margin: 1.6em 0 .5em; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.entry-content li { margin-bottom: .5em; }
.entry-content li::marker { color: var(--primary); font-weight: 700; }
.entry-content figure { margin: 0 0 1.6em; }
.entry-content figure.wp-block-table, .entry-content > table { display: block; overflow-x: auto; max-width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.entry-content figure.wp-block-table table { min-width: 600px; }
.entry-content td, .entry-content th { font-size: 17px; }
.entry-content thead th { border-bottom: 0; }
.entry-content blockquote { margin: 1.4em 0; padding: .6em 1.2em; border-left: 4px solid var(--stone); background: #fff; }
.entry-content .bb-faq { margin: 1em 0; }
.entry-content img { border-radius: var(--r); }
.entry-content dl.bb-gl { margin: 0; }
.entry-content dl.bb-gl dt { font-family: var(--head); font-weight: 600; font-size: 23px; margin-top: 1.6em; padding-top: 12px; border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.entry-content dl.bb-gl dt:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.entry-content dl.bb-gl dd { margin: 4px 0 0; }
.entry-content dl.bb-gl dd p { margin: 0 0 .6em; }

.bb-sources { margin-top: 48px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--primary); border-radius: var(--r); padding: 18px 22px 8px; scroll-margin-top: 20px; }
.bb-sources h2 { font-size: 26px; margin-bottom: 10px; }
.bb-sources ol { margin: 0 0 12px; padding-left: 1.4em; font-size: 17px; }
.bb-sources li { margin-bottom: 6px; overflow-wrap: anywhere; }
.bb-sources__host { display: inline-block; margin-left: 6px; font-size: 14px; background: #ecefec; padding: 0 8px; border-radius: var(--r); color: var(--muted-t); }
.bb-sources__foot { font-size: 15px; color: var(--muted-t); }

.bb-weiter { border-top: 0; }

/* ---------- Seiten und Archive ---------- */
.bb-archhead { padding: 24px 0 8px; }
.bb-archhead h1 { font-size: 44px; }
.bb-archhead__d { color: var(--muted-t); }
.bb-page .entry-content { padding-bottom: 40px; }
.bb-notfound { padding-top: 56px; padding-bottom: 72px; }
.bb-notfound h1 { font-size: 44px; }
.bb-notfound .bb-search { max-width: 480px; margin: 20px 0; }
.bb-pager { margin: 28px 0; }
.bb-pager .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.bb-pager a, .bb-pager span { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); background: #fff; text-decoration: none; border-radius: var(--r); }
.bb-pager .current { background: var(--primary); color: #fff; border-color: var(--primary); }
.bb-two .bb-page, .bb-two .bb-two__main { padding-bottom: 48px; }

/* ---------- Footer ---------- */
.bb-foot { background: #1f2a2d; color: #e6ecec; padding: 44px 0 20px; font-size: 17px; }
.bb-foot a { color: #cfe9f0; }
.bb-foot a:hover { color: #fff; }
.bb-foot__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.bb-foot__h { font-family: var(--head); font-weight: 600; font-size: 18px; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 3px solid var(--accent); display: inline-block; }
.bb-foot ul { list-style: none; margin: 0; padding: 0; }
.bb-foot li { margin-bottom: 8px; }
.bb-foot p { margin-bottom: .8em; }
.bb-foot__bottom { margin-top: 28px; padding-top: 16px; border-top: 1px solid #3b4a4e; font-size: 15px; color: #d6dfe0; }
.bb-foot__bottom p { margin: 0; }

/* ---------- Responsiv ---------- */
@media (max-width: 1180px) {
	.bb-art { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 820px; }
	.bb-art__toc, .bb-art__side { position: static; }
	.bb-art__toc { order: 0; }
	.bb-art__main { order: 1; }
	.bb-art__side { order: 2; }
	.bb-sys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bb-norm__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
	.bb-hero__grid, .bb-two, .bb-fassade, .bb-two-tables { grid-template-columns: minmax(0, 1fr); }
	.bb-hero h1 { font-size: 44px; }
	.bb-two { gap: 32px; }
	.bb-side { position: static; }
	.bb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bb-foot__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 700px) {
	body { font-size: 18px; }
	.bb-wrap { padding: 0 16px; }
	.bb-head__in { padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
	.bb-brand__name { font-size: 23px; }
	.bb-searchtoggle { display: inline-flex; }
	.bb-headsearch { display: none; width: 100%; flex: 0 0 100%; }
	.bb-headsearch.is-open { display: block; }
	.bb-tabs__list a { padding: 12px 14px; font-size: 16px; }
	.bb-hero { padding: 28px 0; }
	.bb-hero h1 { font-size: 36px; }
	.bb-lead { font-size: 19px; }
	.bb-sec { padding: 40px 0; }
	.bb-sec__h { font-size: 30px; }
	.bb-tiles, .bb-sys, .bb-cards { grid-template-columns: minmax(0, 1fr); }
	.bb-norm__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bb-card { grid-template-columns: minmax(0, 1fr); }
	.bb-card__img { border-right: 0; border-bottom: 1px solid var(--line); }
	.bb-filter { width: 100%; }
	.bb-filter button { flex: 1 1 auto; padding: 10px 12px; font-size: 16px; }
	.bb-art__head h1 { font-size: 32px; }
	.entry-content { font-size: 18px; }
	.entry-content h2 { font-size: 28px; }
	.bb-archhead h1, .bb-notfound h1 { font-size: 34px; }
	.bb-block + .bb-block { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.bb-card__img svg { width: 100%; height: 100%; min-height: 150px; display: block; }
.bb-card__img { min-height: 150px; }
.bb-fassade { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
.bb-fassade__fig svg { display: block; }