/* components.css — wiederverwendbare UI-Bausteine */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-primary);
}
.btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-text-inverse); }
.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-surface-offset); color: var(--color-primary); border-color: var(--color-primary); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }

/* Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.card h3 { font-size: var(--text-lg); }
.card p { color: var(--color-text-muted); font-size: var(--text-sm); }
.card-link { font-size: var(--text-sm); font-weight: 600; text-decoration: none; margin-top: auto; }

/* KPI */
.kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.kpi-value { font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.kpi-label { font-size: var(--text-sm); margin-top: var(--space-2); font-weight: 600; }
.kpi-note { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }

/* Callout */
.callout {
  background: var(--color-primary-highlight);
  border: 1px solid color-mix(in oklab, var(--color-primary) 35%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.callout--warning { background: var(--color-warning-highlight); border-color: color-mix(in oklab, var(--color-warning) 40%, transparent); }
.callout--error { background: var(--color-error-highlight); border-color: color-mix(in oklab, var(--color-error) 40%, transparent); }
.callout p + p { margin-top: var(--space-2); }

/* Evidence callouts: external health guidance, deliberately stronger than ordinary cards */
.evidence-callout {
  background: var(--color-surface);
  border: 1px solid color-mix(in oklab, var(--color-primary) 28%, var(--color-border));
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  box-shadow: var(--shadow-sm);
}
.evidence-callout + .evidence-callout { margin-top: var(--space-6); }
.evidence-callout--who {
  background: var(--color-primary-highlight);
  border-color: color-mix(in oklab, var(--color-primary) 42%, transparent);
}
.evidence-callout__eyebrow {
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}
.evidence-callout h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); max-width: 34ch; }
.evidence-callout p { max-width: 72ch; }
.evidence-callout a { display: inline-block; font-size: var(--text-sm); font-weight: 650; margin-top: var(--space-4); }

/* Banners (Testbetrieb-Hinweis, Datenstand) */
.notice-banner {
  border: 1px solid color-mix(in oklab, var(--color-warning) 45%, transparent);
  background: var(--color-warning-highlight);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  margin-bottom: var(--space-8);
}
.notice-banner strong { display: block; margin-bottom: var(--space-1); }

/* Tables */
.data-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.data-table { font-size: var(--text-sm); }
.data-table caption { text-align: left; padding: var(--space-3) var(--space-4); font-weight: 600; background: var(--color-surface-offset); }
.data-table th, .data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
}
.data-table thead th { background: var(--color-surface-offset); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.data-table tbody tr:hover { background: var(--color-surface-offset); }
.data-table tfoot td { font-weight: 700; background: var(--color-surface-offset-2, var(--color-surface-offset)); }
.section-kicker {
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}
.section-intro { max-width: 72ch; margin-bottom: var(--space-5); }
.table-scroll-hint { color: var(--color-text-muted); font-size: var(--text-xs); margin-bottom: var(--space-2); }
.comparison-table-wrap:focus-visible { outline: 3px solid var(--color-focus, var(--color-primary)); outline-offset: 3px; }
.comparison-table { min-width: 1120px; table-layout: fixed; }
.comparison-table th,
.comparison-table td {
  line-height: 1.45;
  vertical-align: top;
  white-space: normal;
}
.comparison-table thead th:first-child,
.comparison-table tbody th { width: 190px; }
.comparison-table tbody th {
  background: var(--color-surface-offset);
  font-size: var(--text-sm);
  text-align: left;
}
.comparison-note { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-4); max-width: 78ch; }
.comparison-open-question { margin-top: var(--space-6); }
.comparison-open-question h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.source-list { display: grid; gap: var(--space-3); padding-left: var(--space-5); }
.source-list li { font-size: var(--text-sm); }

/* Figures */
figure.data-figure { margin-block: var(--space-6); }
figure.data-figure img { border: 1px solid var(--color-border); border-radius: var(--radius-md); }
figure.data-figure figcaption { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); max-width: none; }

/* Map launch */
.map-launch-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.map-launch-card h3 { margin-bottom: var(--space-3); font-size: var(--text-xl); }
.map-launch-card p { margin-bottom: 0; }
.map-launch-card__eyebrow {
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-2) !important;
}
.map-launch-card__button {
  flex: 0 0 auto;
  text-align: center;
}

@media (max-width: 720px) {
  .map-launch-card { align-items: stretch; flex-direction: column; }
  .map-launch-card__button { width: 100%; }
}

/* Documents list */
.doc-list { display: flex; flex-direction: column; gap: var(--space-4); }
.doc-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  flex-wrap: wrap;
}
.doc-item h3 { font-size: var(--text-base); margin-bottom: var(--space-1); }
.doc-item p { color: var(--color-text-muted); font-size: var(--text-sm); }
.doc-meta { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-2); }
.doc-status {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.doc-status--available { background: var(--color-success-highlight); color: var(--color-success); }
.doc-status--pending { background: var(--color-warning-highlight); color: var(--color-warning); }

/* Timeline (Ankündigungen) */
.timeline { display: flex; flex-direction: column; gap: var(--space-6); }
.timeline-item {
  border-left: 2px solid var(--color-border);
  padding-left: var(--space-5);
  position: relative;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}
.timeline-date { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.timeline-title { font-size: var(--text-lg); margin-block: var(--space-1) var(--space-2); }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field label { font-size: var(--text-sm); font-weight: 600; }
.form-field .hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.form-field input {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  font-size: var(--text-base);
}
.form-field input:focus { border-color: var(--color-primary); }
.form-field--checkbox { flex-direction: row; align-items: flex-start; gap: var(--space-3); }
.form-field--checkbox input { width: auto; margin-top: 3px; }
.form-actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); flex-wrap: wrap; }
.form-status { font-size: var(--text-sm); }
.form-status[data-state='error'] { color: var(--color-error); }
.form-status[data-state='success'] { color: var(--color-success); }

/* Adressaten / Massnahmen accordion-like list */
.demand-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--color-surface);
  margin-bottom: var(--space-6);
}
.demand-block h3 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.demand-meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.demand-summary { font-weight: 650; margin-bottom: var(--space-4); max-width: 68ch; }
.demand-block ul { list-style: disc; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.demand-frist { margin-top: var(--space-4); font-size: var(--text-sm); font-style: italic; color: var(--color-text-muted); }

/* Definition list (Rahmenbedingungen) */
.def-list { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.def-item { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: var(--space-4); border-bottom: 1px solid var(--color-divider); padding-bottom: var(--space-3); }
@media (max-width: 640px) { .def-item { grid-template-columns: 1fr; gap: var(--space-1); } }
.def-item dt { font-weight: 600; font-size: var(--text-sm); }
.def-item dd { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Progressive disclosure and supporting notes */
.detail-panel,
.glossary-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
}
.detail-panel summary,
.glossary-panel summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 700;
  min-height: 44px;
  align-items: center;
}
.detail-panel[open] summary,
.glossary-panel[open] summary { margin-bottom: var(--space-5); }
.detail-panel p { color: var(--color-text-muted); font-size: var(--text-sm); }
.secondary-note {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
  color: var(--color-text-muted);
}
.secondary-note h3 { color: var(--color-text); font-size: var(--text-base); margin-bottom: var(--space-2); }
.secondary-note p { font-size: var(--text-sm); }
.glossary-panel > p { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.glossary-list { display: grid; gap: 0; }
.glossary-list > div {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: var(--space-4);
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-3);
}
.glossary-list dt { font-weight: 700; }
.glossary-list dd { color: var(--color-text-muted); }
@media (max-width: 640px) {
  .glossary-list > div { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* Counter widget */
.counter-widget {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  flex-wrap: wrap;
}
.counter-value { font-size: var(--text-2xl); font-weight: 700; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.counter-label { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 32ch; }