/*
 * Atlas-Supplement zum BD-Style-Kit (v1).
 * Enthält nur, was das Kit nicht abdeckt: Filterleiste, Werkzeug-Tabelle,
 * Beratungspanel, Dialoge, Detailseiten-Raster. Alle Werte kommen aus den
 * --bd-Token des Kits.
 */

/* ── Hero-Ergänzungen ── */
.bd .atlas-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
	margin-top: var(--bd-space-m);
	text-align: center;
}
.bd .atlas-stat {
	background: var(--bd-bg-card);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius-klein);
	padding: 1.1rem 1rem;
}
.bd .atlas-stat strong {
	display: block;
	color: var(--bd-lime);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2;
}
.bd .atlas-stat span {
	color: var(--bd-muted);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ── Filterleiste ── */
.bd .filter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 0.9rem 1rem;
}
.bd .field { display: flex; flex-direction: column; gap: 0.35rem; }
.bd .field.search { grid-column: 1 / -1; }
.bd .field label {
	color: var(--bd-lime);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.bd .field input,
.bd .field select {
	min-height: 44px;
	background: var(--bd-bg-card);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius-klein);
	color: var(--bd-text);
	font: inherit;
	font-size: 0.95rem;
	padding: 0.5rem 0.9rem;
}
.bd .field input:focus-visible,
.bd .field select:focus-visible { border-color: var(--bd-lime-akzent); }
.bd .field select option { background: var(--bd-bg-card); color: var(--bd-text); }

.bd .filter-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-top: var(--bd-space-s);
}
.bd .filter-actions .spacer { flex: 1; }
.bd .check {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--bd-muted-soft);
	font-size: 0.9rem;
}
.bd .check input { accent-color: var(--bd-lime); width: 1.05rem; height: 1.05rem; }

/* ── Ergebniszeile ── */
.bd .resultbar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.25rem;
	margin: var(--bd-space-s) 0;
}
.bd .resultbar strong { color: var(--bd-lime); }
.bd .resultbar span { color: var(--bd-muted); font-size: 0.9rem; }

/* ── Atlas-Tabelle (ergänzt .bd-table) ── */
/* Volle Seitenbreite für den Tabellenbereich – kein künstlicher Rahmen. */
.bd .atlas-bleed { width: 100%; max-width: none; }
.bd .table-wrap { overflow-x: auto; border-radius: var(--bd-radius-klein); border: 1px solid var(--bd-border); }
.bd .bd-table thead th { padding: 0.55rem 0.6rem; white-space: nowrap; }
.bd .bd-table th, .bd .bd-table td { border: none; border-bottom: 1px solid var(--bd-border); padding: 0.6rem 0.6rem; font-size: 0.82rem; }
.bd .bd-table thead button {
	background: none;
	border: none;
	color: var(--bd-lime);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	padding: 0;
}
.bd .bd-table thead button:hover { color: var(--bd-text); }
.bd .compare-col { width: 2.2rem; text-align: center; }
.bd .row-check { accent-color: var(--bd-lime); width: 1.05rem; height: 1.05rem; }
.bd .platform-cell { display: flex; align-items: center; gap: 0.6rem; }
.bd .avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--bd-lime-fuellung);
	border: 1px solid var(--bd-lime-rahmen);
	color: var(--bd-lime);
	font-size: 0.75rem;
	font-weight: 700;
}
.bd .avatar-logo { background: #fff; border-color: var(--bd-border); padding: 0.18rem; overflow: hidden; }
.bd .avatar-logo img { width: 100%; height: 100%; object-fit: contain; }
.bd .small { color: var(--bd-muted); font-size: 0.78rem; }
.bd .format-link {
	background: none;
	border: none;
	padding: 0;
	color: var(--bd-lime);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	text-align: left;
}
.bd .format-link:hover { color: var(--bd-text); }
.bd .tag {
	display: inline-block;
	background: var(--bd-lime-rahmen-soft);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius-pille);
	color: var(--bd-muted-soft);
	font-size: 0.72rem;
	font-weight: 600;
	padding: 0.15rem 0.6rem;
	margin: 0 0.25rem 0.25rem 0;
	white-space: nowrap;
}
.bd .tag.a { border-color: var(--bd-lime-rahmen-stark); color: var(--bd-lime); }
.bd .tag.b { color: var(--bd-muted-soft); }
.bd .tag-link { color: var(--bd-lime); border-color: var(--bd-lime-rahmen-stark); text-decoration: none; }
.bd .tag-link:hover { color: var(--bd-text); }
.bd .empty { padding: var(--bd-space-m); color: var(--bd-muted); text-align: center; }

/* ── Beratungspanel (Tabelle, Dialog und Detailseite) ── */
.bd .advice-col { min-width: 180px; }
.bd .advice-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--bd-lime-flaeche);
	border: 1px solid var(--bd-lime-rahmen);
	border-radius: var(--bd-radius-pille);
	color: var(--bd-lime);
	font-size: 0.78rem;
	font-weight: 700;
	padding: 0.3rem 0.8rem;
	cursor: pointer;
}
.bd .advice-toggle:hover { border-color: var(--bd-lime-hover); }
.bd .advice-toggle .chevron { transition: transform 0.2s; }
.bd .advice-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.bd .advice-role-preview { margin-top: 0.35rem; }
.bd .advice-row td { background: var(--bd-lime-flaeche-soft); }

.bd .advice-panel {
	background: var(--bd-lime-flaeche);
	border: 1px solid var(--bd-lime-rahmen);
	border-radius: var(--bd-radius-karte);
	padding: var(--bd-space-m);
}
.bd .advice-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 1px solid var(--bd-lime-rahmen-soft);
	padding-bottom: 1rem;
	margin-bottom: 1.25rem;
}
.bd .advice-head h2, .bd .advice-head h3 { margin: 0 0 0.25rem; }
.bd .advice-head p { color: var(--bd-muted); font-size: 0.9rem; margin: 0; }
.bd .advice-brand { font-weight: 700; }
.bd .advice-tags { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.4rem; }
.bd .advice-tag {
	display: inline-block;
	background: var(--bd-lime-fuellung);
	border: 1px solid var(--bd-lime-rahmen);
	border-radius: var(--bd-radius-pille);
	color: var(--bd-lime);
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.2rem 0.7rem;
}
.bd .advice-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 1.5rem 2.5rem;
}
/* Beratungsinhalte fliessen ohne eigene Kästchen – nur Titel und Text. */
.bd .advice-card { background: none; border: none; padding: 0; }
.bd .advice-card.wide { grid-column: 1 / -1; }
.bd .advice-card h3, .bd .advice-card h4 {
	color: var(--bd-lime);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
}
.bd .advice-card p { color: var(--bd-muted-soft); font-size: 0.95rem; margin: 0; }
.bd .advice-list-html ul, .bd .advice-list-html ol { display: grid; gap: 0.5rem; margin: 0; padding-left: 1.25rem; color: var(--bd-muted-soft); font-size: 0.95rem; }
.bd .advice-list-html li::marker { color: var(--bd-lime); }
.bd .advice-list-html p { color: var(--bd-muted-soft); font-size: 0.95rem; margin: 0 0 0.5rem; }
.bd .advice-details summary {
	cursor: pointer;
	color: var(--bd-lime);
	font-weight: 700;
	margin: 0 0 1rem;
}

/* ── Dialoge und Toast ── */
.bd dialog {
	width: min(1100px, calc(100vw - 2rem));
	max-height: calc(100vh - 4rem);
	background: var(--bd-bg);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius-karte);
	color: var(--bd-text);
	padding: 0;
}
.bd dialog::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); }
.bd .dialog-head {
	position: sticky;
	top: 0;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	background: var(--bd-nav-blur);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--bd-border);
	padding: 1.25rem var(--bd-space-m);
}
.bd .dialog-head h2 { margin: 0 0 0.2rem; font-size: 1.4rem; }
.bd .dialog-head p { color: var(--bd-muted); font-size: 0.9rem; margin: 0; }
.bd .dialog-head .eyebrow {
	color: var(--bd-lime);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.bd .dialog-head .close {
	width: 2.4rem;
	height: 2.4rem;
	flex-shrink: 0;
	background: var(--bd-bg-card);
	border: 1px solid var(--bd-border);
	border-radius: 50%;
	color: var(--bd-text);
	font-size: 1.1rem;
	cursor: pointer;
}
.bd .dialog-head .close:hover { border-color: var(--bd-lime-akzent); color: var(--bd-lime); }
.bd .dialog-body { padding: var(--bd-space-m); }
.bd .detail-hero { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 1.25rem; }
.bd .detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 1rem;
	margin-top: 1.25rem;
}
.bd .detail-card {
	background: var(--bd-bg-card);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius-klein);
	padding: 1.25rem;
}
.bd .detail-card.wide { grid-column: 1 / -1; }
.bd .detail-card h3 {
	color: var(--bd-lime);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
}
.bd .detail-card p { color: var(--bd-muted-soft); font-size: 0.95rem; margin: 0; }
.bd .compare-scroll { overflow-x: auto; }
.bd .compare-table { border-collapse: collapse; min-width: 100%; font-size: 0.88rem; }
.bd .compare-table th {
	position: sticky;
	left: 0;
	background: var(--bd-bg);
	color: var(--bd-lime);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--bd-border);
	padding: 0.7rem 0.9rem;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	min-width: 170px;
}
.bd .compare-table td {
	border-bottom: 1px solid var(--bd-border);
	color: var(--bd-muted-soft);
	vertical-align: top;
	padding: 0.7rem 0.9rem;
	min-width: 220px;
}
.bd .toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	transform: translate(-50%, 1rem);
	background: var(--bd-lime);
	color: var(--bd-bg);
	border-radius: var(--bd-radius-pille);
	font-weight: 700;
	padding: 0.7rem 1.4rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s;
	z-index: 200;
}
.bd .toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Info-Details (Methodik, Quellen, Formatverzeichnis) ── */
.bd details.info {
	background: var(--bd-bg-card);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius-karte);
	padding: 1.25rem var(--bd-space-m);
	margin-bottom: 1rem;
}
.bd details.info summary { cursor: pointer; color: var(--bd-lime); font-weight: 700; }
.bd details.info .content { padding-top: 1rem; }
.bd details.info h3 { font-size: 0.95rem; color: var(--bd-lime); margin: 1.1rem 0 0.3rem; }
.bd details.info p { color: var(--bd-muted-soft); font-size: 0.95rem; margin: 0 0 0.5rem; }
.bd .source-list { display: grid; gap: 0.6rem; }
.bd .source-item { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: baseline; }
.bd .source-meta { color: var(--bd-muted); font-size: 0.8rem; }

/* ── Formatverzeichnis und verwandte Formate ── */
.bd .format-index, .bd .related-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: 0.6rem;
	margin: 0.5rem 0 1.25rem;
	padding: 0;
	list-style: none;
}
.bd .format-index a, .bd .related-list a {
	display: block;
	background: var(--bd-bg);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius-klein);
	color: var(--bd-muted-soft);
	font-size: 0.9rem;
	font-weight: 600;
	padding: 0.6rem 0.9rem;
	transition: border-color 0.2s, color 0.2s;
}
.bd .format-index a:hover, .bd .related-list a:hover { border-color: var(--bd-lime-hover); color: var(--bd-lime); }
.bd .related-list a { background: var(--bd-bg-card); }

/* ── Detailseite ── */
.bd .hero-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 1.25rem; }
.bd .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: var(--bd-space-s); }
.bd .breadcrumb { margin-bottom: 0.5rem; }
.bd .examples {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 420px));
	gap: 1.25rem;
	margin-bottom: var(--bd-space-m);
}
.bd .example-figure {
	margin: 0;
	background: var(--bd-bg-card);
	border: 1px solid var(--bd-border);
	border-radius: var(--bd-radius-klein);
	overflow: hidden;
}
.bd .example-figure img { display: block; width: 100%; height: auto; }
.bd .example-figure figcaption { color: var(--bd-muted); font-size: 0.8rem; padding: 0.6rem 0.9rem; }

/* ── Zugänglichkeit ── */
.bd .skip-link {
	position: fixed;
	left: 1rem;
	top: -5rem;
	z-index: 1000;
	background: var(--bd-lime);
	color: var(--bd-bg);
	border-radius: var(--bd-radius-pille);
	font-weight: 700;
	padding: 0.7rem 1.2rem;
	transition: top 0.2s;
}
.bd .skip-link:focus { top: 1rem; }

/* ── Druck ── */
@media print {
	.bd { background: #fff; color: #000; }
	.bd .bd-nav, .bd .filters, .bd .filter-actions, .bd .compare-col, .bd .row-check,
	.bd .advice-col, .bd .advice-row, .bd dialog, .bd .toast, .bd .bd-footer,
	.bd details.info, .bd .hero-actions { display: none !important; }
}

/* Korrektur: .bd a (Spezifität 0,1,1) übersteuert die Button-Farben des Kits. */
.bd a.bd-btn { color: var(--bd-bg); }
.bd a.bd-btn:hover, .bd a.bd-btn:focus-visible { color: var(--bd-bg); }
.bd a.bd-btn-outline { color: var(--bd-muted); }
.bd a.bd-btn-outline:hover, .bd a.bd-btn-outline:focus-visible { color: var(--bd-text); }
.bd [id] { scroll-margin-top: 6rem; }
.bd .detail-title { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.bd .detail-logo { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; flex-shrink: 0; background: #fff; border: 1px solid var(--bd-border); border-radius: var(--bd-radius-klein); padding: 0.3rem; }
.bd .detail-logo img { width: 100%; height: 100%; object-fit: contain; }