/* Klar mockup for the current public MULTIPLAIR website.
   Visual language follows multiplair-design/klar/DESIGN.md. */
:root {
  --cream: #f6f7f8;
  --cream-2: #eceef1;
  --paper: #ffffff;
  --ink: #17202b;
  --ink-2: #66717f;
  --signal: #005b5c;
  --signal-text: #004a4b;
  --signal-deep: #003f40;
  --signal-soft: #e6f0f0;
  --nat-1: #e68c2c;
  --nat-2: #e5c14a;
  --agt-1: #005b5c;
  --agt-2: #2b8a8b;
  --level: #287a55;
  --night: #17202b;
  --night-2: #222d3a;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --sh-card: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --sh-btn: none;
  --line: rgba(23,32,43,.12);
  --edge: rgba(23,32,43,.28);
  --accent-soft: #e6f0f0;
  --accent-line: #cfe3e3;
  --warm-soft: #faf0e2;
  --warm-line: #eed9bd;
  --warm-text: #8a4f0c;
  --warm-fill: #e68c2c;
}

html { background: var(--cream); }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-variation-settings: normal;
}
::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 3px solid #2b8a8b; }

.lbl,
.arena__top,
.arena__cap,
.hero__position,
.workstream__top,
.workstream__foot,
.workstream__result small,
.controlstack__top,
.controlstack__foot,
.controlstack__icon,
.securitystack__top,
.securitystack__foot,
.securitystack__icon,
.eu-seal,
.tablehint,
.cmp thead th,
.cmp td span,
.slot__x,
.costrow__icon,
.costrow strong,
.saving strong,
.q summary::before {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
.d1, .d2, .h3 { font-variation-settings: normal; letter-spacing: -.035em; }
.d1 { font-weight: 760; }
.d2, .h3 { font-weight: 720; }
.lbl { color: var(--signal); letter-spacing: .055em; }
.hero__copy .lbl { color: var(--signal); }
.lbl--num b {
  background: var(--accent-soft);
  color: var(--signal);
  border: 1px solid var(--accent-line);
}
.d1 span { color: var(--signal-text); }
.note { border-left-color: var(--signal); }

.top {
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.top__nav a { color: var(--ink-2); }
.top__nav a:hover { color: var(--signal); }

.btn,
.sound-toggle {
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  box-shadow: none;
  font-family: inherit;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease;
}
.btn:hover,
.sound-toggle:hover { transform: none; box-shadow: none; border-color: var(--signal); }
.btn:active,
.sound-toggle:active { transform: translateY(1px); box-shadow: none; }
.btn--primary {
  background: var(--signal);
  color: #f7fafc;
  border-color: var(--signal);
  box-shadow: none;
}
.btn--primary:hover { background: var(--signal-deep); box-shadow: none; border-color: var(--signal-deep); }
.btn--primary:active { box-shadow: none; }
.btn--quiet { color: var(--signal); border-color: var(--accent-line); }
.btn--quiet:hover { background: var(--accent-soft); }
.sound-toggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--signal); border-color: var(--accent-line); }

.hero { background: linear-gradient(180deg, #ffffff 0%, var(--cream) 72%); }
.hero__controls { border-top-color: var(--line); }
.hero__arrow { border-color: var(--edge); box-shadow: none; }
.hero__arrow:hover { background: var(--accent-soft); color: var(--signal); border-color: var(--accent-line); }
.hero__dots button { border-color: var(--ink-2); }
.hero__dots button.is-active { border-color: var(--signal); background: var(--signal); }

.arena,
.workstream,
.controlstack,
.securitystack,
.setup,
.learn__card,
.levelup,
.tablewrap,
.costbox {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}
.setup:hover { transform: none; box-shadow: 0 4px 12px rgba(16,24,40,.10); }
.tile { background: var(--cream-2); background-image: none; }
.tile--block { border: 1px solid var(--edge); box-shadow: none; }
.tile--goal { background: var(--accent-soft); border: 1px dashed var(--signal); }
.board-table { border: 1px solid var(--edge); box-shadow: var(--sh-card); }
.arena__top,
.workstream__top,
.workstream__foot,
.controlstack__foot,
.securitystack__foot { border-color: var(--line); }
.statusdot,
.arena__live::before,
.workstream__live::before { background: var(--warm-fill); box-shadow: 0 0 0 3px var(--warm-soft); }
.arena__live,
.workstream__live { color: var(--warm-text); }
.workstream__result {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
}
.workstream__star { background: var(--signal); color: white; border: 0; border-radius: var(--r-md); }
.workstream__foot strong { color: var(--signal); }
.controlstack__top,
.securitystack__top { background: var(--ink); }
.controlstack__icon,
.securitystack__icon,
.sovereignty__icon,
.costrow__icon { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--signal); }
.controlstack__body strong,
.securitystack__body strong { color: #287a55; border-color: #cfe4d8; background: #eaf6ef; }

.promise { border-width: 1px; border-color: var(--line); }
.promise--defiant { background: var(--ink); border-color: var(--ink); }
.promise--transform { background: var(--accent-soft); border-color: var(--accent-line); }
.promise--transform p + p { border-color: var(--accent-line); }

.sovereignty__card {
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgba(16,24,40,.14);
}
.eu-seal { border-color: rgba(237,241,245,.32); }
.eu-seal::before { color: #6ab5b5; }
.sovereignty__grid article { border-color: var(--line); }
.sovereignty__icon svg .accent { stroke: var(--signal); }

/* Sicherheit: eigene Regeln, absichtlich NICHT in den Sammelregeln der
   Souveränität. Die Karte ist hell (Papier) und differenziert nur über
   Struktur: Petrol-Kopfleiste, Petrol-Icon-Chips, Petrol-Seal. Klar nimmt ihr
   den Coop-Rand und den harten Versatz-Schatten und setzt die feine Kante
   plus weichen Schatten der übrigen Klar-Karten. Die Petrol-Akzente kommen
   aus styles.css (.security --sec-*), damit Coop und Klar dieselbe Farbwelt
   zeigen; die Hairlines laufen auf das Klar-Token --line. */
.security { --sec-hairline: var(--line); }
.security__card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgba(16,24,40,.12);
}
.security__grid article { border-color: var(--sec-hairline); }

.setup__board,
.learn__vis { background: var(--cream-2); }
.log::before { border-color: var(--accent-line); }
.log li,
.facts > div,
.faq,
.q { border-color: var(--line); }
.log__n { background: var(--accent-soft); color: var(--signal); border: 1px solid var(--accent-line); }
.level-arrow { color: var(--warm-fill); }

.tablewrap { border-color: var(--line); }
.cmp thead th { border-bottom: 1px solid var(--edge); }
.cmp tbody tr + tr th,
.cmp tbody tr + tr td { border-color: var(--line); }
.cmp .cmp__us { background: var(--accent-soft); }
.cmp td[data-v="yes"] span { color: #287a55; background: #eaf6ef; border-color: #cfe4d8; }
.cmp td[data-v="part"] span { color: #7a5200; background: #fff8e6; border-color: #eadba7; }
.cmp td[data-v="no"] span { color: var(--ink-2); background: var(--cream-2); border-color: var(--line); }

.sec--night { background: var(--ink); }
.slot { background: var(--night-2); border: 1px solid rgba(237,241,245,.24); border-radius: var(--r-md); }
.sec--night .lbl { color: #6ab5b5; }
.note--night { border-left-color: #6ab5b5; }

.costbox { border-color: var(--line); border-radius: var(--r-lg); }
.costtabs { border-bottom: 1px solid var(--line); background: var(--cream-2); }
.costtab { font-family: inherit; }
.costtab.is-active { background: var(--accent-soft); color: var(--signal); box-shadow: inset 0 0 0 1px var(--accent-line); }
.costsummary,
.costrow { border-color: var(--line); }
.included .costrow__icon { color: #287a55; background: #eaf6ef; border-color: #cfe4d8; }
.included .costrow strong { color: #287a55; }
.saving {
  background: var(--warm-soft);
  color: var(--ink);
  border: 1px solid var(--warm-line);
  border-radius: var(--r-md);
}
.saving strong { color: var(--warm-text); }

.q summary::before { background: var(--accent-soft); color: var(--signal); border: 1px solid var(--accent-line); }
.q[open] summary::before { background: var(--signal); color: white; }

.sec--entry { background: var(--ink); }
.entry { background: var(--night-2); border: 1px solid rgba(237,241,245,.22); border-radius: var(--r-lg); box-shadow: 0 12px 32px rgba(0,0,0,.22); }
.entry .lbl { color: #6ab5b5; }
.entry__input { border: 1px solid rgba(237,241,245,.32); border-radius: var(--r-md); background: var(--ink); }
.entry__input:focus { border-color: #6ab5b5; box-shadow: 0 0 0 3px rgba(106,181,181,.18); }
.entry__form .btn--primary { background: #005b5c; border-color: #6ab5b5; }
.entry__done .btn { box-shadow: none; }
.foot { background: #11161d; color: #aab4c0; }
.foot a:hover { color: #6ab5b5; }

/* Dark mode keeps action surfaces deep petrol and uses the lighter petrol text token. */
html[data-theme="klar-dark"] {
  color-scheme: dark;
  --cream: #11161d;
  --cream-2: #1d2631;
  --paper: #171e27;
  --ink: #edf1f5;
  --ink-2: #aab4c0;
  --signal: #005b5c;
  --signal-text: #6ab5b5;
  --signal-deep: #003f40;
  --signal-soft: #123638;
  --night: #121820;
  --night-2: #1a232e;
  --line: rgba(237,241,245,.14);
  --edge: rgba(237,241,245,.32);
  --accent-soft: #123638;
  --accent-line: rgba(106,181,181,.35);
  --warm-soft: #3a2c1b;
  --warm-line: rgba(237,161,73,.35);
  --warm-text: #eda149;
  --warm-fill: #eda149;
  --sh-card: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.28);
}
html[data-theme="klar-dark"] body { background: var(--cream); }
html[data-theme="klar-dark"] .top { background: rgba(23,30,39,.97); }
html[data-theme="klar-dark"] .hero { background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 72%); }
html[data-theme="klar-dark"] .lbl,
html[data-theme="klar-dark"] .hero__copy .lbl,
html[data-theme="klar-dark"] .d1 span,
html[data-theme="klar-dark"] .top__nav a:hover,
html[data-theme="klar-dark"] .btn--quiet,
html[data-theme="klar-dark"] .controlstack__icon,
html[data-theme="klar-dark"] .controlstack__foot,
html[data-theme="klar-dark"] .securitystack__icon,
html[data-theme="klar-dark"] .securitystack__foot,
html[data-theme="klar-dark"] .cmp thead .cmp__us,
html[data-theme="klar-dark"] .costrow__icon,
html[data-theme="klar-dark"] .q summary::before { color: #6ab5b5; }
html[data-theme="klar-dark"] .sec--alt,
html[data-theme="klar-dark"] .sec--cost { background: var(--cream-2); }
html[data-theme="klar-dark"] .btn--quiet:hover,
html[data-theme="klar-dark"] .controlstack__icon,
html[data-theme="klar-dark"] .securitystack__icon,
html[data-theme="klar-dark"] .sovereignty__icon,
html[data-theme="klar-dark"] .costrow__icon,
html[data-theme="klar-dark"] .log__n,
html[data-theme="klar-dark"] .q summary::before { background: var(--accent-soft); }
html[data-theme="klar-dark"] .promise--transform,
html[data-theme="klar-dark"] .cmp .cmp__us,
html[data-theme="klar-dark"] .costtab.is-active { background: var(--accent-soft); color: #6ab5b5; }
html[data-theme="klar-dark"] .workstream__result { background: #183429; border-color: rgba(154,215,181,.35); }
html[data-theme="klar-dark"] .setup__board,
html[data-theme="klar-dark"] .learn__vis { background: var(--cream); }
html[data-theme="klar-dark"] .cmp td[data-v="yes"] span,
html[data-theme="klar-dark"] .included .costrow__icon { color: #9ad7b5; background: #183429; border-color: rgba(154,215,181,.35); }
html[data-theme="klar-dark"] .cmp td[data-v="part"] span { color: #e8cf8f; background: #382f1c; border-color: rgba(232,207,143,.35); }
html[data-theme="klar-dark"] .cmp td[data-v="no"] span { background: var(--cream-2); }
html[data-theme="klar-dark"] .saving { background: var(--warm-soft); color: var(--ink); }
html[data-theme="klar-dark"] .saving strong { color: var(--warm-text); }
html[data-theme="klar-dark"] .entry__input { background: #11161d; }
html[data-theme="klar-dark"] .foot { background: #0c1117; }
/* Sicherheit im Dunkelmodus: die helle Karte dunkelt über --paper/--ink von
   allein mit, wie das Raster der Souveränität. Nur die Petrol-Akzente kippen —
   #005b5c trägt vor dunklem Papier nicht mehr (2.1:1) und wechselt darum auf
   die hellere Signalfarbe #6ab5b5. Die Icon-Chips drehen entsprechend um:
   Mint-Fläche mit dunklem Glyph statt Petrol-Fläche mit hellem Glyph. */
html[data-theme="klar-dark"] .security {
  --sec-band:        #6ab5b5;
  --sec-band-line:   rgba(106,181,181,.55);
  --sec-band-accent: #003f40;
  --sec-on-band:     #0c1f20;
  --sec-text:        #6ab5b5;
  --sec-soft:        #123638;
  --sec-soft-line:   rgba(106,181,181,.35);
}
html[data-theme="klar-dark"] .security__card {
  border-color: var(--line);
  box-shadow: 0 12px 32px rgba(0,0,0,.42);
}

/* The figures retain the product's human/agent double coding: warm vs petrol plus shape. */
.fig--nat1, .fig--nat2 { color: var(--nat-1); }
.fig--agt1, .fig--agt2, .fig--agt3 { color: var(--agt-1); }

@media (max-width: 719px) {
  .top__in { padding-block: 9px; }
  .top .btn { padding-inline: 12px; }
  .sound-toggle span:last-child { display: none; }
}