/* WrapKI – Ergänzungen für die Unterseiten (Konto, Preise, Briefing, Admin, Rechtliches).
   Baut auf app.css auf (Tokens, Buttons, Formulare, Karten, Dialoge) und definiert nur zusätzliche Bausteine. */

:root {
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- Gemeinsame Bausteine ---------- */

.page-head { display: grid; gap: 14px; max-width: 780px; }
.page-head .section-lead { margin: 0; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kicker::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--signal);
}

.page-section { margin-top: clamp(40px, 6vw, 72px); }
.page-status { margin-top: clamp(24px, 4vw, 36px); }
/* Überschriften, die nur per Skript den Fokus bekommen (Ansichtswechsel), ohne Fokusrahmen */
h1[tabindex="-1"]:focus-visible, h2[tabindex="-1"]:focus-visible { outline: none; }
.page-section > .section-head { margin-bottom: clamp(20px, 3vw, 28px); }
.sub-title {
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

.card {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
}
@media (min-width: 600px) {
  .card { padding: 26px 26px; }
}
.card-title { font-size: 1.1875rem; font-weight: 760; letter-spacing: -0.01em; }
.card-lead { color: var(--ink-2); }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.loading-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--steel);
  font-weight: 600;
}
.loading-line::before {
  content: "";
  width: 16px; height: 16px;
  flex: none;
  border: 2.5px solid var(--signal);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.empty-box {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 22px 20px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-l);
  color: var(--ink-2);
}

/* Tabellen: scrollen nur innerhalb ihres Rahmens, nie die Seite */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.data-table th, .data-table td {
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.data-table thead th {
  border-top: 0;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.8438rem;
  font-weight: 700;
  white-space: nowrap;
}
.data-table tbody th { font-weight: 650; color: var(--ink); }
.data-table td.is-num, .data-table th.is-num { text-align: right; white-space: nowrap; }
.data-table .muted { font-size: 0.875rem; }
.data-table a { font-weight: 620; }

.table-wrap.is-narrow { max-width: 860px; }
.mono { font-family: var(--mono); font-size: 0.9em; letter-spacing: 0; }

/* Einspaltige Grids: Spalte darf schmaler als ihr Inhalt werden (Tabellen scrollen dann im Rahmen) */
.card, .acct-grid, .brief, .brief-sheet, .stat-groups, .stat-group, .tab-panel, .legal, .admin-tools {
  grid-template-columns: minmax(0, 1fr);
}

/* Sichtbar markierte Platzhalter im Rechtlichen */
mark.todo {
  padding: 1px 6px;
  border: 1.5px dashed var(--warn);
  border-radius: 5px;
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 650;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Konto ---------- */

/* minmax(0, 1fr): breite Tabellen scrollen in ihrem Rahmen, statt die Spalte aufzuweiten */
.acct { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 40px); margin-top: clamp(24px, 4vw, 36px); }

.login-card { max-width: 560px; }
.login-card .code-input { max-width: 100%; }
@media (min-width: 480px) {
  .login-card .code-input { max-width: 300px; }
}

.acct-grid { display: grid; gap: 16px; }
@media (min-width: 860px) {
  .acct-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; }
}

/* Credit-Karte mit abgezogener Folienecke */
.credit-card {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: space-between;
  min-height: 220px;
  padding: 24px 22px;
  overflow: hidden;
  border-radius: var(--radius-l);
  background-color: var(--anthracite);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--on-anthracite);
}
.credit-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 46px; height: 46px;
  background: linear-gradient(225deg, var(--signal) 50%, rgba(0, 0, 0, 0.28) 50%, transparent 62%);
}
.credit-label { color: #b7c1c8; font-weight: 650; font-size: 0.9375rem; }
.credit-num {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(3.25rem, 2.2rem + 4vw, 4.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.credit-num small { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; color: #c9d1d6; }
.credit-hint { margin-top: 10px; color: #b7c1c8; font-size: 0.9375rem; max-width: 34ch; }
.credit-card .btn-row .btn:not(.btn-primary) {
  --btn-bg: transparent;
  --btn-fg: var(--on-anthracite);
  --btn-bd: rgba(255, 255, 255, 0.3);
}
.credit-card .btn-row .btn:not(.btn-primary):hover { --btn-bd: rgba(255, 255, 255, 0.65); --btn-bg: rgba(255, 255, 255, 0.06); }
.credit-card :focus-visible { outline-color: #ffffff; }

.acct-facts { display: grid; gap: 0; margin: 0; }
.acct-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.acct-facts > div:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 520px) {
  .acct-facts > div { grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
}
.acct-facts dt { color: var(--steel); font-weight: 600; font-size: 0.9375rem; }
.acct-facts dd { margin: 0; font-weight: 620; overflow-wrap: anywhere; }

.status-ok { color: var(--ok); }
.status-muted { color: var(--steel); }

/* Mockup-Verlauf im Konto */
.job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 14px;
  list-style: none;
}
.job-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}
.job-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--stage);
  color: var(--stage-muted);
  font-size: 0.875rem;
  font-weight: 650;
  overflow: hidden;
}
.job-art img { width: 100%; height: 100%; object-fit: cover; }
.job-art .ico { width: 34px; height: 34px; }
.job-art-text { display: grid; justify-items: center; gap: 8px; padding: 12px; text-align: center; }
.job-body { display: grid; gap: 10px; align-content: start; padding: 12px 14px 14px; }
.job-title { font-weight: 720; font-size: 1rem; }
.job-meta { color: var(--steel); font-size: 0.875rem; }
.job-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.job-badges .badge { min-height: 26px; padding: 2px 10px; font-size: 0.8125rem; }
.job-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.job-actions .btn { flex: 1 1 auto; }

.purchase-table th, .purchase-table td { white-space: nowrap; }
.purchase-table .badge { min-height: 26px; padding: 2px 10px; font-size: 0.8125rem; }
.purchase-table .withdraw-link { font-weight: 650; }
.mail-hint { display: grid; gap: 10px; }
.mail-hint a { font-weight: 650; }

/* Hinweis mit Warnfarbe (gesperrtes Konto, offene Credits vor der Löschung, Zahlung in Prüfung) */
.form-note.is-warn { background: var(--warn-soft); color: var(--warn); }
.form-note.is-warn .ico { color: var(--warn); }
.form-note a { color: inherit; font-weight: 650; }

/* ---------- Vertrag widerrufen (/widerruf/) ---------- */

.wd-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: clamp(24px, 4vw, 36px); align-items: start; }
@media (min-width: 960px) {
  .wd-layout { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 28px; }
}
.wd-card { max-width: 640px; }
.wd-done .acct-facts dd { white-space: pre-line; }
.wd-info-body { display: grid; gap: 8px; }
.wd-info-title { font-size: 1rem; font-weight: 760; color: var(--ink); }

/* ---------- Preise ---------- */

.pack-note { margin-top: 14px; color: var(--steel); font-size: 0.9375rem; }

.cost-table td:last-child, .cost-table th:last-child { text-align: right; white-space: nowrap; }
.cost-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.875rem;
  white-space: nowrap;
}
.cost-pill.is-free { background: var(--ok-soft); color: var(--ok); }

.compare-table th[scope="col"].is-us { color: var(--ink); box-shadow: inset 0 -3px 0 var(--signal); }
.compare-table td.is-us { font-weight: 650; color: var(--ink); background: var(--signal-soft); }
.compare-table tbody th { width: 28%; }
.compare-note { margin-top: 12px; color: var(--steel); font-size: 0.9375rem; max-width: 75ch; }

.cta-band {
  display: grid;
  gap: 18px;
  align-items: center;
  padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 48px);
  border-radius: var(--radius-xl);
  background-color: var(--stage);
  background-image:
    linear-gradient(var(--stage-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--stage-grid-major) 1px, transparent 1px),
    linear-gradient(var(--stage-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--stage-grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  color: var(--stage-ink);
}
@media (min-width: 860px) {
  .cta-band { grid-template-columns: minmax(0, 1fr) auto; }
}
.cta-band h2 { color: #ffffff; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 800; letter-spacing: -0.028em; text-wrap: balance; }
.cta-band p { color: var(--stage-muted); margin-top: 8px; max-width: 56ch; }
.cta-band :focus-visible { outline-color: #ffffff; }
@media (prefers-color-scheme: dark) {
  .cta-band { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
}

/* ---------- Briefing ---------- */

.brief { display: grid; gap: 18px; max-width: 1000px; }
.brief-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brief-toolbar a { font-weight: 650; }

.brief-sheet {
  display: grid;
  gap: 22px;
  padding: clamp(18px, 3.5vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.brief-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ink);
}
.brief-head-main { display: grid; gap: 6px; }
.brief-word {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brief-word::before {
  /* abgezogene Folienecke als Markenzeichen, druckfest ohne Bilddatei */
  content: "";
  width: 18px; height: 18px;
  border-radius: 4px;
  background: linear-gradient(225deg, var(--signal) 34%, var(--anthracite) 34%);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.brief-title { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem); font-weight: 800; letter-spacing: -0.028em; }
.brief-company { color: var(--ink-2); font-weight: 650; }
.brief-meta { display: grid; gap: 2px; margin: 0; text-align: right; font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.brief-meta div { display: flex; gap: 8px; justify-content: flex-end; }
.brief-meta dt { color: var(--steel); }
.brief-meta dd { margin: 0; font-weight: 650; }
@media (max-width: 519px) {
  .brief-meta { text-align: left; }
  .brief-meta div { justify-content: flex-start; }
}

.brief-alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1.5px solid var(--signal);
  border-left-width: 6px;
  border-radius: var(--radius-s);
  background: var(--signal-soft);
  color: var(--ink);
  font-weight: 650;
}
.brief-alert .ico { color: var(--signal-ink); margin-top: 2px; }
.brief-alert small { display: block; margin-top: 4px; color: var(--ink-2); font-weight: 500; font-size: 0.9063rem; }

.brief-figure { display: grid; gap: 8px; margin: 0; }
/* KI-Kennzeichnung (KI-Verordnung Art. 50): sichtbar am Bild, auch im Druck */
.brief-ai-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 650;
}
.brief-ai-note .ico { width: 16px; height: 16px; color: var(--signal-ink); }
.brief-figure-art {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--stage);
}
.brief-figure-art img { display: block; width: 100%; height: auto; }
.brief-figure-art .pv-layer { position: relative; inset: auto; aspect-ratio: 1000 / 560; }
.brief-figure figcaption { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; color: var(--steel); font-size: 0.875rem; }

.brief-grid { display: grid; gap: 22px; }
@media (min-width: 720px) {
  .brief-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
}
.brief-row { display: contents; }
.brief-block { display: grid; gap: 10px; align-content: start; min-width: 0; break-inside: avoid; }
.brief-block.is-wide { grid-column: 1 / -1; }
.brief-h {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 0.8438rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.brief-dl { display: grid; gap: 0; margin: 0; }
.brief-dl > div {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dotted var(--line-strong);
}
.brief-dl > div:last-child { border-bottom: 0; }
@media (max-width: 479px) {
  .brief-dl > div { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; }
}
.brief-dl dt { color: var(--steel); font-weight: 600; font-size: 0.9375rem; }
.brief-dl dd { margin: 0; font-weight: 620; overflow-wrap: anywhere; }
.brief-dl dd small { display: block; color: var(--steel); font-weight: 450; font-size: 0.875rem; margin-top: 2px; }

.swatch-list { display: grid; gap: 10px; list-style: none; }
.swatch-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.swatch-chip {
  width: 56px; height: 56px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.swatch-chip.is-inline { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.inline-color { display: inline-flex; align-items: center; gap: 8px; }
.swatch-text { display: grid; gap: 1px; min-width: 0; }
.swatch-name { font-weight: 720; }
.swatch-values { display: flex; flex-wrap: wrap; gap: 2px 14px; font-family: var(--mono); font-size: 0.9063rem; color: var(--ink-2); }

.copy-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; list-style: none; }
.copy-item { display: grid; gap: 2px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); }
.copy-label { color: var(--steel); font-size: 0.8125rem; font-weight: 650; }
.copy-value { font-weight: 700; font-size: 1.0625rem; overflow-wrap: anywhere; white-space: pre-line; }
.copy-value.is-empty { color: var(--steel); font-weight: 500; font-size: 0.9375rem; }

.brief-logo {
  display: grid;
  place-items: center;
  min-height: 140px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background:
    conic-gradient(var(--surface-3) 25%, var(--surface) 0 50%, var(--surface-3) 0 75%, var(--surface) 0) 0 0 / 16px 16px;
}
.brief-logo img { max-width: 100%; max-height: 160px; object-fit: contain; }
.brief-photo img { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--radius-s); }

.brief-checks { display: grid; gap: 6px; list-style: none; }
.brief-checks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; color: var(--ink-2); }
.brief-checks .ico { color: var(--ink-2); margin-top: 3px; }

.brief-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--steel);
  font-size: 0.8438rem;
}

.brief-state { max-width: 640px; }

/* ---------- Admin ---------- */

.admin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.admin-login { max-width: 460px; }

.stat-groups { display: grid; gap: 22px; }
.stat-group { display: grid; gap: 10px; }
.stat-group-title { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.stat {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}
.stat-label { color: var(--steel); font-size: 0.8438rem; font-weight: 650; }
.stat-value { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat.is-key { background: var(--anthracite); border-color: var(--anthracite); }
.stat.is-key .stat-label { color: #b7c1c8; }
.stat.is-key .stat-value { color: var(--on-anthracite); }

.abuse-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }

.admin-tools { display: grid; gap: 16px; }
@media (min-width: 900px) {
  .admin-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.admin-tools .field-row { align-items: end; }

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}
.tab {
  min-height: 38px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--ink-2);
  font-weight: 650;
  font-size: 0.9375rem;
}
.tab:hover { background: var(--surface-3); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--anthracite); color: var(--on-anthracite); }
.tab-count { margin-left: 6px; font-variant-numeric: tabular-nums; opacity: 0.7; font-weight: 600; }
.tab-panel { display: grid; gap: 12px; margin-top: 14px; }
.tab-panel:focus-visible { outline-offset: 4px; }

.admin-table { font-size: 0.875rem; }
.admin-table td { min-width: 90px; }
.admin-table td.is-wide { min-width: 220px; max-width: 360px; overflow-wrap: anywhere; }
.admin-table td.is-tight, .admin-table th.is-tight { min-width: 0; white-space: nowrap; }
.admin-table .badge { min-height: 24px; padding: 2px 8px; font-size: 0.75rem; }
.cell-stack { display: grid; gap: 2px; justify-items: start; }
.cell-stack .muted { font-size: 0.8125rem; }
.thumb-btn {
  display: block;
  width: 84px; height: 63px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--stage);
}
.thumb-btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb-empty {
  display: grid;
  place-items: center;
  width: 84px; height: 63px;
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--steel);
  font-size: 0.75rem;
  font-weight: 650;
  text-align: center;
}
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-image { display: block; width: 100%; height: auto; max-height: 68vh; object-fit: contain; border-radius: var(--radius-m); background: var(--stage); }

/* ---------- Rechtliches ---------- */

.legal { display: grid; gap: clamp(28px, 4vw, 48px); margin-top: clamp(24px, 4vw, 40px); }
@media (min-width: 1040px) {
  .legal { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
  .toc { position: sticky; top: calc(var(--header-h) + 20px); }
}
.toc {
  display: grid;
  gap: 10px;
  padding: 18px 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
}
.toc-title { font-size: 0.8438rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); }
.toc ol { display: grid; gap: 4px; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; display: grid; grid-template-columns: 2.1em minmax(0, 1fr); font-size: 0.9375rem; line-height: 1.35; }
.toc li::before { content: counter(toc) "."; color: var(--steel); font-variant-numeric: tabular-nums; }
.toc a { text-decoration: none; color: var(--ink-2); padding: 3px 0; }
.toc a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--signal); }
@media (max-width: 1039px) {
  .toc ol { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); column-gap: 18px; }
}

.legal .prose { max-width: 76ch; }
.prose h2 { scroll-margin-top: calc(var(--header-h) + 16px); }
.prose h2 .num { color: var(--signal-ink); margin-right: 6px; }
.prose a { font-weight: 600; overflow-wrap: anywhere; }
.prose strong { color: var(--ink); }
.prose address { font-style: normal; }
.prose .table-wrap { margin-block: 4px; }
.prose .data-table { font-size: 0.9063rem; }
.legal-meta { color: var(--steel); font-size: 0.9375rem; }
.legal-form {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.imprint { display: grid; gap: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); overflow: hidden; }
.imprint > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 11px 14px; border-top: 1px solid var(--line); }
.imprint > div:first-child { border-top: 0; }
@media (min-width: 560px) {
  .imprint > div { grid-template-columns: 210px minmax(0, 1fr); gap: 14px; }
}
.imprint dt { color: var(--steel); font-weight: 600; }
.imprint dd { margin: 0; color: var(--ink); font-weight: 560; overflow-wrap: anywhere; }

.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-m);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.callout .ico { color: var(--signal-ink); margin-top: 3px; }

/* ---------- Druck (Briefing A4) ---------- */

@page { size: A4; margin: 12mm 12mm 14mm; }

@media print {
  /* Papier ist immer hell – auch wenn das System im Dunkelmodus druckt */
  :root {
    color-scheme: light;
    --ink: #000000;
    --ink-2: #222222;
    --steel: #444444;
    --paper: #ffffff;
    --surface: #ffffff;
    --surface-2: #f4f5f6;
    --surface-3: #e6e9eb;
    --line: #cccccc;
    --line-strong: #999999;
    --signal-ink: #b23a06;
    --signal-soft: rgba(255, 91, 20, 0.13);
    --anthracite: #23292e;
    --on-anthracite: #f4f6f7;
    --stage: #23292e;
    --ok: #17703f;
    --ok-soft: #e2f3e8;
    --warn: #8a5200;
    --warn-soft: #fff0d4;
  }
  html { font-size: 10pt; }
  body { min-height: 0; }
  .no-print, .skip-link, .dlg { display: none !important; }
  .page { padding-block: 0; }
  .wrap { max-width: none; padding-inline: 0; }
  a { color: inherit; text-decoration: none; }

  /* Block- statt Grid-Container: Grid/Flex wachsen beim Seitenumbruch nicht mit (Überlappung am Seitenende) */
  .brief { display: block; max-width: none; }
  .brief-sheet { display: block; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: #fff; }
  .brief-sheet > * + * { margin-top: 5mm; }
  .brief-head { border-bottom-color: #000; padding-bottom: 3mm; }
  .brief-word { color: #000; }
  .brief-title { font-size: 18pt; }
  .brief-alert { background: #fff; border-color: #000; color: #000; break-inside: avoid; padding: 3mm 4mm; }
  .brief-alert .ico { color: #000; }
  .brief-figure { break-inside: avoid; }
  .brief-ai-note { border-color: #000; color: #000; background: #fff; }
  .brief-ai-note .ico { color: #000; }
  .brief-figure-art { background: #fff; border: 0.3mm solid #999; border-radius: 2mm; }
  .brief-figure-art img { max-height: 112mm; width: auto; max-width: 100%; margin-inline: auto; }
  .brief-figure-art.is-sketch { background: #23292e; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Flex statt Grid: Chrome vergrößert ein Grid nicht, wenn Blöcke auf die nächste Seite rutschen */
  .brief-grid { display: block; }
  .brief-grid > * + * { margin-top: 5mm; }
  /* Zeilen als Ganzes umbrechen: ein Flex-Container mit zwei Blöcken, der nicht geteilt wird */
  .brief-row { display: flex; gap: 8mm; break-inside: avoid; }
  .brief-row > .brief-block { flex: 0 0 calc(50% - 4mm); }
  .brief-row:not(:has(> .brief-block:not([hidden]))) { display: none; }
  .brief-h { border-bottom-color: #000; color: #000; }
  .brief-dl > div { grid-template-columns: 31mm minmax(0, 1fr); padding: 1.6mm 0; border-bottom-color: #bbb; }
  .brief-dl dt, .brief-dl dd small, .swatch-values, .copy-label, .brief-foot, .brief-meta, .brief-meta dt { color: #333; }
  .copy-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2mm; }
  .copy-item { background: #fff; border-color: #bbb; padding: 2mm 3mm; break-inside: avoid; }
  .copy-value { font-size: 11pt; }
  .swatch-row { break-inside: avoid; }
  .swatch-chip { width: 14mm; height: 14mm; }
  .swatch-chip.is-inline { width: 4.5mm; height: 4.5mm; border-radius: 1mm; }
  .brief-logo { min-height: 30mm; background: #fff; border-color: #bbb; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .brief-logo img { max-height: 34mm; }
  .brief-photo img { max-height: 45mm; }
  .brief-foot { border-top-color: #999; }
  .badge { border: 0.3mm solid #999; background: #fff; color: #000; }
}