/* ---- Whitepaper page — page-specific, uses CI tokens from /styles.css ----
   Loaded by both /whitepaper/ (DE) and /en/whitepaper/ (EN). */

/* .wp-hero h1 max-width retired 2026-05-27 — H1 now fills container width
   like the apex hero so it matches the .hero-pills row's right edge. */

/* Anchor jumps (#calculator / #rechner etc.) should not land under the sticky header */
html { scroll-padding-top: 2rem; }

/* Tree watermark: the section directly under the hero needs the same positioning
   context as #produkte on the home page so the absolutely positioned
   .section-tree-decoration anchors correctly. */
#kernproblem, #core-problem { position: relative; overflow: hidden; }

/* Spacing utilities — replace inline style="" (CI: no inline styles) */
.wp-mt-xl { margin-top: var(--space-xl); }
.wp-mt-lg { margin-top: var(--space-lg); }

.wp-lead-block { max-width: none; }
.wp-figure {
  margin: var(--space-md) 0 0; padding: var(--space-md) var(--space-lg);
  background: var(--et-soft-bg-2); border-left: 3px solid var(--et-honey-bronze);
  border-radius: var(--radius-sm); font-size: 1.05rem;
}

/* ---- Gisbert mascot (accent, CI §6.9 / D-SOC-22) ----
   Layout: H2 + lead fill the container width (1116px) like every other
   section heading; Gisbert anchors as a top-right corner accent. */
.wp-rechner-head { position: relative; padding-right: clamp(128px, 14vw, 184px); min-height: clamp(112px, 13vw, 158px); }
.wp-rechner-copy { max-width: none; }
.wp-rechner-copy > :last-child { margin-bottom: 0; }
.wp-rechner-copy .lead { max-width: none; }
.wp-gisbert {
  position: absolute; top: 0; right: 0;
  width: clamp(112px, 13vw, 158px); height: auto;
  filter: drop-shadow(0 8px 18px rgba(15, 37, 46, 0.14));
}
@media (max-width: 720px) {
  .wp-rechner-head { padding-right: 0; min-height: 0; }
  .wp-gisbert { position: static; display: block; margin: 0 auto var(--space-md); }
}

/* ---- Cost-of-Friction Calculator ---- */
.cof {
  display: grid; grid-template-columns: 1fr; gap: var(--space-lg);
  margin-top: var(--space-lg);
}
@media (min-width: 920px) { .cof { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }

.cof-panel {
  background: var(--et-white); border: 1px solid var(--et-border);
  border-radius: var(--radius-card); padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}
.cof-panel h3 { margin-bottom: var(--space-xs); }
.cof-panel .cof-panel-sub { font-size: 0.85rem; color: var(--et-muted); margin-bottom: var(--space-md); }

.cof-field { margin-bottom: var(--space-md); }
.cof-field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.35rem; }
.cof-field .cof-hint { display: block; font-weight: 400; font-size: 0.78rem; color: var(--et-muted); margin-top: 0.15rem; }
.cof-field input[type="number"] {
  width: 100%; padding: 0.6rem 0.7rem; font-size: 1rem; font-family: inherit;
  color: var(--et-jet-black); background: var(--et-soft-bg);
  border: 1px solid var(--et-border-strong); border-radius: var(--radius-sm);
}
.cof-field input:focus-visible { outline: 2px solid var(--et-baltic-blue); outline-offset: 2px; }
/* Required field empty / 0 — friendly-serious hint (CI: no alarm red) */
.cof-field input.is-missing { border-color: var(--et-honey-bronze); background: #FCF3E0; }
.cof-needs-input {
  margin: 0 0 var(--space-md); padding: 0.6rem 0.85rem;
  background: var(--et-soft-bg-2); border-left: 3px solid var(--et-honey-bronze);
  border-radius: var(--radius-sm); font-size: 0.86rem; color: var(--et-jet-black);
}

.cof-group-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--et-mist-text); margin: var(--space-md) 0 var(--space-sm);
}
.cof-group-label:first-child { margin-top: 0; }

.cof-assumptions { margin-top: var(--space-sm); border-top: 1px solid var(--et-border); padding-top: var(--space-sm); }
.cof-assumptions summary {
  cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--et-baltic-blue); padding: 0.3rem 0;
}
.cof-assumptions[open] summary { margin-bottom: var(--space-sm); }
.cof-assume-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.cof-assume-grid .cof-field { margin-bottom: var(--space-sm); display: flex; flex-direction: column; }
.cof-assume-grid label { font-size: 0.8rem; flex: 1; }
.cof-assume-note { font-size: 0.78rem; color: var(--et-muted); margin-top: var(--space-xs); }

/* Range */
.cof-range label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.cof-range output { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--et-baltic-blue); }
.cof-range input[type="range"] {
  width: 100%; margin-top: 0.5rem; accent-color: var(--et-baltic-blue); cursor: pointer;
}

/* Result — lever */
.cof-lever {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm);
  padding: 0.65rem 0; border-bottom: 1px solid var(--et-border);
}
.cof-lever:first-of-type { padding-top: 0; }
.cof-lever-label { font-weight: 600; font-size: 0.95rem; }
.cof-lever-label small { display: block; font-weight: 400; font-size: 0.77rem; color: var(--et-muted); }
.cof-lever-value { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; font-size: 1.02rem; }

/* Result — dashboard */
.cof-dash-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm);
  padding: 0.6rem 0;
}
.cof-dash-row .cof-dash-val { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cof-brutto-row { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 2px solid var(--et-jet-black); }
.cof-brutto-row .cof-dash-val { font-size: clamp(1.3rem, 1vw + 1.05rem, 1.7rem); font-weight: 700; }

.cof-rf {
  margin: var(--space-md) 0; padding: var(--space-md);
  background: var(--et-soft-bg-2); border-radius: var(--radius-card);
}
.cof-rf .cof-rf-q { font-weight: 600; font-size: 0.92rem; }

.cof-invest-input {
  width: 7.5rem; padding: 0.35rem 0.5rem; font-size: 0.95rem; font-family: inherit; text-align: right;
  color: var(--et-jet-black); background: var(--et-soft-bg);
  border: 1px solid var(--et-border-strong); border-radius: var(--radius-sm);
}

.cof-net {
  margin-top: var(--space-md); padding: var(--space-md) var(--space-lg);
  background: linear-gradient(180deg, #FBEED6, #F6E2BE);
  border: 1px solid var(--et-honey-bronze); border-radius: var(--radius-card);
}
.cof-net p { margin: 0; }
.cof-net .cof-net-label { font-weight: 600; font-size: 0.9rem; color: var(--et-bronze-text); }
.cof-net .cof-net-big {
  font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: clamp(1.5rem, 1.2vw + 1.2rem, 2.1rem); color: var(--et-bronze-text);
}
/* Negative state: investment exceeds addressable damage — neutral, no "savings" styling */
.cof-net.is-negative {
  background: var(--et-soft-bg-2);
  border-color: var(--et-border-strong);
}
.cof-net.is-negative .cof-net-label,
.cof-net.is-negative .cof-net-big { color: var(--et-jet-black); }
.cof-disclaimer { font-size: 0.8rem; color: var(--et-muted); margin-top: var(--space-md); }

/* ---- Lever cards ---- */
.wp-formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.84rem; background: var(--et-soft-bg-2); color: var(--et-jet-black);
  padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); margin-top: var(--space-sm); overflow-x: auto;
}

/* ---- Tables ---- */
.wp-table-wrap { overflow-x: auto; margin-top: var(--space-md); }
table.wp-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.wp-table th, table.wp-table td {
  text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--et-border);
}
table.wp-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--et-muted); }

/* Stat fact-card: big number + label, anchored by a baltic-blue left rule.
   Replaces the bare card-plain "two stacked paragraphs" look with a
   structured editorial fact block. */
.card-plain:has(> .wp-stat) {
  padding: 0.25rem 0 0.25rem 1.1rem;
  border-left: 3px solid var(--et-baltic-blue);
}
/* Even breathing room above and below a stat-trio so it doesn't clash
   with surrounding prose. */
.card-grid-plain:has(.wp-stat) {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.wp-stat {
  font-size: clamp(2rem, 2vw + 1.4rem, 2.9rem); font-weight: 700;
  color: var(--et-baltic-blue); margin-bottom: 0.5rem; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.wp-stat-label {
  color: var(--et-jet-black); font-size: 1rem; line-height: 1.5;
  margin-bottom: 0; max-width: 22rem;
}
.wp-source-list { font-size: 0.9rem; color: var(--et-muted); }
.wp-source-list li { margin-bottom: 0.35rem; }