/*
 * Beans & Brews – Artikel-Layout (20.10.2026, im Child-Theme)
 * Ruhig, viel Weißraum, zentrierte Serifen-Überschrift, großes Titelbild,
 * Zitat mit Linie, Themen-Zeile, Weiterlesen-Karten.
 */
body.bb-artikel {
	--bb-accent: #b4561e;
	--bb-measure: 760px;
	--bb-wide: 1200px;
}

/* Seitenleiste und Theme-Rahmen auf Artikelseiten neutralisieren */
body.bb-artikel .main.ts-contain,
body.bb-artikel .main { max-width: none; padding-left: 0; padding-right: 0; }
body.bb-artikel .main > .ts-row { display: block; }
body.bb-artikel .main .sidebar,
body.bb-artikel .main .main-sidebar { display: none; }
body.bb-artikel .breadcrumbs { text-align: center; }

.bb-art { padding: 0 16px 72px; color: #2f2d2a; }

/* ---------- Kopf ---------- */
.bb-art-head { max-width: 900px; margin: 0 auto; padding: 40px 0 0; text-align: center; }
.bb-art-kicker { margin: 0 0 18px; font: 600 12px/1 var(--bb-sans); letter-spacing: .14em; text-transform: uppercase; }
.bb-art-kicker a { color: #8e4316; text-decoration: none; }
.bb-art-kicker a:hover { color: var(--bb-ink); }
body .bb-art-title {
	margin: 0;
	font-family: var(--bb-serif);
	font-weight: 400;
	font-size: clamp(34px, 5vw, 60px);
	line-height: 1.08;
	letter-spacing: -0.012em;
	color: var(--bb-ink);
	text-wrap: balance;
}
.bb-art-meta { margin: 22px 0 0; font: 400 14px/1.4 var(--bb-sans); color: #6b665f; }
.bb-art-meta span { margin: 0 6px; }

/* ---------- Titelbild ---------- */
.bb-art-hero { max-width: var(--bb-wide); margin: 44px auto 0; }
.bb-art-hero img { display: block; width: 100%; height: clamp(240px, 42vw, 600px); object-fit: cover; border-radius: 8px; }

/* ---------- Text ---------- */
.bb-art-body { max-width: var(--bb-measure); margin: 64px auto 0; }

/* Themen: schlichte Zeile unter dem Artikel */
.bb-art-tags { max-width: var(--bb-measure); margin: 48px auto 0; padding-top: 28px; border-top: 1px solid var(--bb-line); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bb-art-label { display: block; font: 600 12px/1 var(--bb-sans); letter-spacing: .12em; text-transform: uppercase; color: #5d5a55; }
.bb-art-tags .bb-art-label { margin: 0 6px 0 0; }
.bb-art-tags ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bb-art-tags a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid #e2ddd6; border-radius: 999px; background: #fff; font: 500 13px/1 var(--bb-sans); color: #36312c; text-decoration: none; }
.bb-art-tags a:hover { border-color: var(--bb-ink); color: var(--bb-ink); }

/* ---------- Fließtext ---------- */
.bb-art-content { font: 400 18px/1.72 var(--bb-sans); color: #36312c; }
.bb-art-content > .bbx > p,
.bb-art-content p { margin: 0 0 1.15em; }
.bb-art-content .bbx-dek {
	margin: 0 0 1.4em;
	font-family: var(--bb-serif);
	font-size: clamp(21px, 2vw, 25px);
	line-height: 1.45;
	color: var(--bb-ink);
}
.bb-art-content .bbx-dek strong { font-weight: 700; }
.bb-art-content .bbx-titelcredit { margin: 0 0 1.2em; font-size: 12px; line-height: 1.4; color: #6b665f; }
body .bb-art-content h2 {
	margin: 2.2em 0 .6em;
	font-family: var(--bb-serif);
	font-weight: 400;
	font-size: clamp(27px, 2.6vw, 34px);
	line-height: 1.18;
}
.bb-art-content a { color: var(--bb-ink); text-decoration: underline; text-decoration-color: var(--bb-accent); text-underline-offset: 3px; }
.bb-art-content a:hover { color: #8e4316; }

/* Zitat mit Linie links */
.bb-art-content blockquote,
.bb-art-content .wp-block-quote,
.bb-art-content .wp-block-pullquote {
	margin: 2em 0;
	padding: 4px 0 4px 32px;
	border: 0;
	border-left: 3px solid var(--bb-accent);
	background: none;
	font: 400 clamp(23px, 2.2vw, 28px)/1.4 var(--bb-serif);
	color: var(--bb-ink);
	text-align: left;
}
.bb-art-content blockquote p { margin: 0; }
.bb-art-content blockquote cite { display: block; margin-top: 12px; font: 400 14px/1.4 var(--bb-sans); color: #6b665f; font-style: normal; }

/* Bilder im Text: etwas breiter als die Textspalte */
.bb-art-content .bbx-fig { margin: 2.4em -40px; }
.bb-art-content .bbx-fig img { display: block; width: 100%; height: auto; border-radius: 8px; }
.bb-art-content .bbx-fig figcaption { margin: 12px 40px 0; font: 400 14px/1.5 var(--bb-sans); color: #6b665f; }
.bb-art-content .bbx-credit { display: block; margin-top: 2px; font-size: 12px; }
.bb-art-content .bbx-credit a { color: inherit; text-decoration-color: #c9c2b8; }

/* Aufeinanderfolgende Bilder als Raster (zwei oder drei nebeneinander) */
.bb-art-content .bbx-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 20px; margin: 2.4em -40px; }
.bb-art-content .bbx-grid .bbx-fig { margin: 0; }
.bb-art-content .bbx-grid .bbx-fig figcaption { margin: 10px 0 0; }

/* Kästen */
.bb-art-content .bbx-box {
	margin: 2.4em 0;
	padding: 26px 30px;
	border: 0;
	border-radius: 12px;
	background: #f6f1eb;
	font-size: 17px;
	line-height: 1.65;
}
.bb-art-content .bbx-box > strong:first-child {
	display: block;
	margin-bottom: 8px;
	font: 600 12px/1.2 var(--bb-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8e4316;
}
.bb-art-content .bbx-box p:last-child { margin-bottom: 0; }
.bb-art-content .bbx-note { margin-top: 2em; font-size: 13px; color: #6b665f; }

/* Quellen ruhig und klein */
.bb-art-content .bbx-sources { margin-top: 2.4em; padding-top: 1.6em; border-top: 1px solid var(--bb-line); font-size: 14px; line-height: 1.55; color: #5d5a55; }
body .bb-art-content .bbx-sources h2 { margin: 0 0 .8em; font-size: 22px; }
.bb-art-content .bbx-sources li { margin-bottom: .5em; }

/* ---------- Weiterlesen ---------- */
.bb-art-rel { max-width: var(--bb-wide); margin: 64px auto 0; }
body .bb-art-rel h2 { margin: 0 0 36px; text-align: center; font: 400 clamp(26px, 2.6vw, 32px)/1.2 var(--bb-serif); color: var(--bb-ink); }
.bb-art-rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bb-art-rel-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 36px rgba(40, 30, 20, .08);
	color: var(--bb-ink);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}
.bb-art-rel-card:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(40, 30, 20, .12); }
.bb-art-rel-img { display: block; aspect-ratio: 16 / 10; background: #d9cfc3; }
.bb-art-rel-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.bb-art-rel-txt { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; text-align: center; }
.bb-art-rel-cat { font: 600 11px/1 var(--bb-sans); letter-spacing: .14em; text-transform: uppercase; color: #8e4316; }
.bb-art-rel-title { font: 400 20px/1.3 var(--bb-serif); color: var(--bb-ink); }

.bb-art-comments { max-width: var(--bb-measure); margin: 64px auto 0; }

/* ---------- Tablet und Handy ---------- */
@media (max-width: 1000px) {
	.bb-art-content .bbx-fig,
	.bb-art-content .bbx-grid { margin-left: 0; margin-right: 0; }
	.bb-art-content .bbx-fig figcaption { margin-left: 0; margin-right: 0; }
}
@media (max-width: 760px) {
	.bb-art-head { padding-top: 20px; }
	.bb-art-hero { margin-top: 28px; margin-left: -16px; margin-right: -16px; }
	.bb-art-hero img { border-radius: 0; }
	.bb-art-body { margin-top: 32px; }
	.bb-art-content { font-size: 17px; }
	.bb-art-content .bbx-grid { grid-template-columns: 1fr; }
	.bb-art-rel-grid { grid-template-columns: 1fr; }
}