/* ============================================================
   Static / editorial subpage vocabulary.
   Shared design language for Über uns, Mission, Ziele, Mitmachen,
   Kontakt, Newsletter, Videos, Themen, Legal, etc.
   Extends tokens.css + base.css + blocks.css — compose these
   classes first; only add page-scoped CSS when truly bespoke.
   Loaded on any page using a templates/page-*.php template.
   ============================================================ */

/* ---------- Section background helpers ---------- */
.bu-section--cream { background: var(--bu-cream); }
.bu-section--panel { background: var(--bu-panel); }
.bu-section--band  { background: var(--bu-band); border-top: 1px solid var(--bu-border); border-bottom: 1px solid var(--bu-border); }
.bu-section--dark  { background: var(--bu-dark); color: #C5BBA9; }
.bu-section--navy  { background: var(--bu-navy); color: #C7D3DC; }
.bu-section--dark h1, .bu-section--dark h2, .bu-section--dark h3,
.bu-section--navy h1, .bu-section--navy h2, .bu-section--navy h3 { color: #F7F1E5; }

.bu-narrow  { max-width: 820px; margin-inline: auto; }
.bu-measure { max-width: 640px; }

/* ============================================================
   PAGE HERO — every subpage opens with one of these
   ============================================================ */
.bu-pagehero { position: relative; background: var(--bu-cream); border-bottom: 1px solid var(--bu-border); overflow: hidden; }
.bu-pagehero__inner { padding: 68px 0 60px; max-width: 760px; }
.bu-pagehero__title { font-weight: 700; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.015em; margin: 20px 0 0; text-wrap: balance; }
.bu-pagehero__lead { font-size: 19.5px; line-height: 1.6; color: var(--bu-ink-2); margin-top: 22px; max-width: 620px; }

/* Photo hero: full-bleed image with dark scrim + light text */
.bu-pagehero--image { border-bottom: 0; }
.bu-pagehero--image .bu-pagehero__bg { position: absolute; inset: 0; z-index: 0; }
.bu-pagehero--image .bu-pagehero__bg img { width: 100%; height: 100%; object-fit: cover; }
.bu-pagehero--image::after { content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, rgba(23,32,42,.90) 0%, rgba(23,32,42,.72) 46%, rgba(23,32,42,.30) 100%); }
.bu-pagehero--image .bu-container { position: relative; z-index: 2; }
.bu-pagehero--image .bu-pagehero__inner { padding: 108px 0 96px; }
.bu-pagehero--image .bu-pagehero__title { color: #FFFDF8; }
.bu-pagehero--image .bu-pagehero__lead { color: #DDE4E9; }

/* Dark solid hero */
.bu-pagehero--dark { background: var(--bu-dark); border-bottom: 0; }
.bu-pagehero--dark .bu-pagehero__title { color: #F7F1E5; }
.bu-pagehero--dark .bu-pagehero__lead { color: #B9AE9A; }

.bu-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--bu-muted); margin-bottom: 6px; }
.bu-breadcrumbs a { color: var(--bu-muted); text-decoration: none; }
.bu-breadcrumbs a:hover { color: var(--bu-gold-ink); }
.bu-breadcrumbs .sep { opacity: .5; }
.bu-pagehero--image .bu-breadcrumbs, .bu-pagehero--image .bu-breadcrumbs a { color: #C7D3DC; }

/* ============================================================
   SPLIT — text beside media (reusable, alternating)
   ============================================================ */
.bu-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.bu-split--textwide { grid-template-columns: 1.15fr 1fr; }
.bu-split__media .bu-media { height: 440px; border-radius: var(--bu-radius); box-shadow: 0 24px 48px -30px rgba(34,28,21,.42); }
.bu-split h2 { font-weight: 700; font-size: clamp(28px, 3vw, 42px); line-height: 1.08; margin: 16px 0 20px; }
.bu-split__text > p { font-size: 17.5px; line-height: 1.72; color: var(--bu-ink-2); }
.bu-split__text > p + p { margin-top: 18px; }
.bu-split--reverse .bu-split__media { order: 2; }
.bu-split + .bu-split { margin-top: 84px; }

/* ============================================================
   FEATURE / VALUE GRID — icon + heading + text
   ============================================================ */
.bu-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.bu-feats--2 { grid-template-columns: repeat(2, 1fr); }
.bu-feats--4 { grid-template-columns: repeat(4, 1fr); }
.bu-feat { background: var(--bu-panel); border: 1px solid var(--bu-border); border-radius: var(--bu-radius); padding: 34px 30px; }
.bu-feat__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 13px;
	background: #F2EAD9; color: var(--bu-gold-ink); margin-bottom: 20px; font-size: 24px; }
.bu-feat__icon svg { width: 26px; height: 26px; }
.bu-feat h3 { font-weight: 600; font-size: 21px; line-height: 1.2; margin-bottom: 10px; }
.bu-feat p { font-size: 16px; line-height: 1.62; color: var(--bu-ink-3); }
.bu-section--dark .bu-feat, .bu-section--navy .bu-feat { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.bu-section--dark .bu-feat h3, .bu-section--navy .bu-feat h3 { color: #F3ECDD; }
.bu-section--dark .bu-feat p, .bu-section--navy .bu-feat p { color: #B9AE9A; }
.bu-section--dark .bu-feat__icon, .bu-section--navy .bu-feat__icon { background: rgba(217,154,43,.16); color: var(--bu-gold-hi); }

/* Numbered value list (goals/steps) */
.bu-steps { display: grid; gap: 20px; counter-reset: bustep; }
.bu-step { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; background: var(--bu-panel);
	border: 1px solid var(--bu-border); border-radius: var(--bu-radius); padding: 30px 32px; }
.bu-step__num { counter-increment: bustep; font-family: var(--bu-serif); font-weight: 700; font-size: 22px; color: var(--bu-dark-2);
	width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
	background: var(--bu-gold); flex: 0 0 auto; }
.bu-step__num::before { content: counter(bustep); }
.bu-step h3 { font-weight: 600; font-size: 22px; margin-bottom: 8px; }
.bu-step p { font-size: 16.5px; line-height: 1.64; color: var(--bu-ink-3); }

/* ============================================================
   BOARD / PEOPLE — portrait, name, role, quote
   ============================================================ */
.bu-people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.bu-person { background: var(--bu-panel); border: 1px solid var(--bu-border); border-radius: var(--bu-radius); overflow: hidden; display: flex; flex-direction: column; }
.bu-person__media { height: 300px; background: var(--bu-band); }
.bu-person__media img { width: 100%; height: 100%; object-fit: cover; }
.bu-person__body { padding: 28px 30px 32px; }
.bu-person__name { font-weight: 700; font-size: 23px; color: var(--bu-navy); }
.bu-person__role { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bu-gold-ink); margin-top: 6px; }
.bu-person__meta { font-size: 15px; color: var(--bu-ink-3); margin-top: 12px; line-height: 1.55; }
.bu-person__quote { font-family: var(--bu-serif); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--bu-navy); margin-top: 18px;
	border-left: 3px solid var(--bu-gold); padding-left: 20px; }
.bu-person__quote--clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.bu-person__link { display: inline-block; margin-top: 16px; font-size: 14.5px; font-weight: 600; color: var(--bu-navy); text-decoration: none; }
.bu-person__link:hover { color: var(--bu-gold-dk); }

/* Compact people row (thumbnails only) */
.bu-people--compact { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.bu-people--compact .bu-person__media { height: 220px; }
.bu-people--compact .bu-person__body { padding: 18px 20px 22px; }
.bu-people--compact .bu-person__name { font-size: 18px; }

/* ============================================================
   FIGURE + PULLQUOTE
   ============================================================ */
.bu-figure { margin: 0; }
.bu-figure img { width: 100%; border-radius: var(--bu-radius); display: block; }
.bu-figure figcaption { font-size: 14px; color: var(--bu-muted); margin-top: 12px; line-height: 1.5; }

.bu-pullquote { text-align: center; max-width: 900px; margin-inline: auto; }
.bu-pullquote p { font-family: var(--bu-serif); font-weight: 600; font-style: italic; font-size: clamp(26px, 3vw, 40px);
	line-height: 1.3; color: var(--bu-navy); text-wrap: balance; }
.bu-pullquote cite { display: block; font-style: normal; font-size: 15px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--bu-gold-ink); margin-top: 24px; }
.bu-section--dark .bu-pullquote p, .bu-section--navy .bu-pullquote p { color: #F7F1E5; }

/* ============================================================
   CALLOUT — reusable CTA band (gold or navy)
   ============================================================ */
.bu-callout { border-radius: var(--bu-radius); padding: 54px 56px; display: flex; align-items: center; justify-content: space-between;
	gap: 40px; flex-wrap: wrap; }
.bu-callout--gold { background: linear-gradient(180deg, #E2A52F 0%, var(--bu-gold) 100%); color: var(--bu-dark-2); }
.bu-callout--navy { background: var(--bu-navy); color: #E7EDF1; }
.bu-callout--dark { background: var(--bu-dark); color: #E6DECF; }
.bu-callout__text { max-width: 620px; }
.bu-callout h2 { font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1.08; margin-bottom: 12px; }
.bu-callout--gold h2 { color: var(--bu-dark-2); }
.bu-callout--navy h2, .bu-callout--dark h2 { color: #FFFDF8; }
.bu-callout p { font-size: 17.5px; line-height: 1.55; }
.bu-callout--gold p { color: #4A360F; }
.bu-callout--navy p, .bu-callout--dark p { color: #C7D3DC; }
.bu-callout__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   ICON / CHECK LIST
   ============================================================ */
.bu-checklist { display: grid; gap: 14px; }
.bu-checklist li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; list-style: none;
	font-size: 17px; line-height: 1.55; color: var(--bu-ink-2); }
.bu-checklist { padding: 0; margin: 0; }
.bu-checklist li::before { content: ""; width: 24px; height: 24px; border-radius: 50%; margin-top: 2px; flex: 0 0 auto;
	background: var(--bu-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3 3 7-7' stroke='%23221C15' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.bu-section--dark .bu-checklist li, .bu-section--navy .bu-checklist li { color: #C5BBA9; }

/* ============================================================
   FAQ / ACCORDION (native details)
   ============================================================ */
.bu-faq { display: grid; gap: 12px; max-width: 820px; }
.bu-faq details { background: var(--bu-panel); border: 1px solid var(--bu-border); border-radius: var(--bu-radius-sm); overflow: hidden; }
.bu-faq summary { cursor: pointer; list-style: none; padding: 22px 26px; font-family: var(--bu-serif); font-weight: 600; font-size: 20px;
	color: var(--bu-navy); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.bu-faq summary::-webkit-details-marker { display: none; }
.bu-faq summary::after { content: "+"; font-size: 26px; font-weight: 400; color: var(--bu-gold-ink); line-height: 1; }
.bu-faq details[open] summary::after { content: "\2013"; }
.bu-faq__body { padding: 0 26px 24px; font-size: 16.5px; line-height: 1.66; color: var(--bu-ink-3); }

/* ============================================================
   CONTACT
   ============================================================ */
.bu-contactgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bu-contactcard { background: var(--bu-panel); border: 1px solid var(--bu-border); border-radius: var(--bu-radius); padding: 30px 30px 32px; }
.bu-contactcard__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--bu-navy); color: #fff;
	display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.bu-contactcard__icon svg { width: 22px; height: 22px; }
.bu-contactcard h3 { font-weight: 600; font-size: 19px; margin-bottom: 8px; }
.bu-contactcard p, .bu-contactcard a { font-size: 16px; line-height: 1.6; color: var(--bu-ink-3); text-decoration: none; }
.bu-contactcard a:hover { color: var(--bu-gold-dk); }
.bu-map { border-radius: var(--bu-radius); overflow: hidden; border: 1px solid var(--bu-border); min-height: 340px; background: var(--bu-band); }
.bu-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* Form (reuses .bu-input from blocks.css) */
.bu-form { display: grid; gap: 18px; }
.bu-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bu-field { display: grid; gap: 7px; }
.bu-field label { font-size: 14px; font-weight: 700; color: var(--bu-ink-2); letter-spacing: .01em; }
.bu-form .bu-input { background: #fff; border: 1px solid var(--bu-border-2); color: var(--bu-ink); }
.bu-form .bu-input::placeholder { color: #B3A88F; }
.bu-form .bu-input:focus { border-color: var(--bu-gold); background: #fff; }
textarea.bu-input { min-height: 150px; resize: vertical; }
.bu-form__note { font-size: 13.5px; color: var(--bu-muted); }

/* ============================================================
   LINK / DOWNLOAD LIST
   ============================================================ */
.bu-linklist { display: grid; gap: 12px; }
.bu-linkrow { display: flex; align-items: center; gap: 18px; background: var(--bu-panel); border: 1px solid var(--bu-border);
	border-radius: var(--bu-radius-sm); padding: 20px 24px; text-decoration: none; transition: border-color .18s, transform .18s; }
.bu-linkrow:hover { border-color: #E0D2B2; transform: translateX(3px); }
.bu-linkrow__tag { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff;
	background: var(--bu-navy); padding: 5px 11px; border-radius: 6px; flex: 0 0 auto; }
.bu-linkrow__title { font-weight: 600; font-size: 17.5px; color: var(--bu-navy); flex: 1; }
.bu-linkrow__arrow { color: var(--bu-gold-ink); font-size: 20px; }

/* ============================================================
   TOPIC / THEME CARDS (image top, larger)
   ============================================================ */
.bu-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.bu-topics--2 { grid-template-columns: repeat(2, 1fr); }
.bu-topic { display: flex; flex-direction: column; background: var(--bu-panel); border: 1px solid var(--bu-border);
	border-radius: var(--bu-radius); overflow: hidden; text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.bu-topic:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -30px rgba(34,28,21,.4); border-color: #E0D2B2; }
.bu-topic__media { height: 210px; background: var(--bu-band); position: relative; }
.bu-topic__media img { width: 100%; height: 100%; object-fit: cover; }
.bu-topic__tag { position: absolute; top: 16px; left: 16px; background: rgba(34,28,21,.82); color: var(--bu-gold-hi);
	font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; }
.bu-topic__body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.bu-topic__title { font-family: var(--bu-serif); font-weight: 700; font-size: 23px; line-height: 1.16; color: var(--bu-navy); margin-bottom: 12px; }
.bu-topic__text { font-size: 16px; line-height: 1.6; color: var(--bu-ink-3); margin-bottom: 22px; }
.bu-topic .bu-more { margin-top: auto; }

/* ============================================================
   VIDEO GRID
   ============================================================ */
.bu-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.bu-video { background: var(--bu-panel); border: 1px solid var(--bu-border); border-radius: var(--bu-radius); overflow: hidden; text-decoration: none; }
.bu-video__thumb { position: relative; aspect-ratio: 16/9; background: var(--bu-dark); overflow: hidden; }
.bu-video__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: transform .3s, opacity .2s; }
.bu-video:hover .bu-video__thumb img { transform: scale(1.05); opacity: 1; }
.bu-video__thumb iframe { width: 100%; height: 100%; border: 0; display: block; }
.bu-video__play { position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; border-radius: 50%;
	background: rgba(217,154,43,.94); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.bu-video__play::after { content: ""; border-left: 20px solid var(--bu-dark-2); border-top: 12px solid transparent;
	border-bottom: 12px solid transparent; margin-left: 5px; }
.bu-video__body { padding: 20px 22px 24px; }
.bu-video__title { font-weight: 600; font-size: 18px; line-height: 1.25; color: var(--bu-navy); }
.bu-video__meta { font-size: 13px; font-weight: 600; color: var(--bu-muted); margin-top: 8px; }

/* ============================================================
   STAT ROW (light variant of the gold stats)
   ============================================================ */
.bu-statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.bu-statrow--3 { grid-template-columns: repeat(3, 1fr); }
.bu-statbox { text-align: center; padding: 8px; }
.bu-statbox b { display: block; font-family: var(--bu-serif); font-weight: 700; font-size: clamp(38px, 4vw, 54px);
	line-height: 1; color: var(--bu-gold-ink); }
.bu-statbox span { display: block; font-size: 15px; font-weight: 600; color: var(--bu-ink-2); margin-top: 10px; line-height: 1.35; }
.bu-section--dark .bu-statbox b, .bu-section--navy .bu-statbox b { color: var(--bu-gold-hi); }
.bu-section--dark .bu-statbox span, .bu-section--navy .bu-statbox span { color: #C7D3DC; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
	.bu-split, .bu-split--textwide { grid-template-columns: 1fr; gap: 36px; }
	.bu-split--reverse .bu-split__media { order: -1; }
	.bu-split__media .bu-media { height: 340px; }
	.bu-feats, .bu-feats--4 { grid-template-columns: repeat(2, 1fr); }
	.bu-people { grid-template-columns: 1fr; }
	.bu-people--compact { grid-template-columns: repeat(2, 1fr); }
	.bu-contactgrid { grid-template-columns: 1fr; }
	.bu-topics, .bu-videos { grid-template-columns: repeat(2, 1fr); }
	.bu-statrow { grid-template-columns: repeat(2, 1fr); }
	.bu-callout { padding: 40px 36px; }
	.bu-pagehero--image .bu-pagehero__inner { padding: 76px 0 64px; }
}
@media (max-width: 640px) {
	.bu-feats, .bu-feats--2, .bu-feats--4 { grid-template-columns: 1fr; }
	.bu-topics, .bu-topics--2, .bu-videos { grid-template-columns: 1fr; }
	.bu-people--compact { grid-template-columns: 1fr; }
	.bu-form .row2 { grid-template-columns: 1fr; }
	.bu-step { grid-template-columns: 1fr; gap: 14px; }
	.bu-statrow, .bu-statrow--3 { grid-template-columns: 1fr 1fr; }
}