/* ==========================================================================
   Klar – base styles for every page (2027, "Le Plan")
   Reset, page canvas, type defaults, links, focus, skip link, release states and the
   reveal-on-scroll primitive. Values come from tokens.css only. Page styles follow:
   home.css (index), trust.css (legal pages, Trust Center, cancel page, changelog, 404),
   konto.css (account). Shared chrome (nav, footer, CTA): chrome.css (k-* classes).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  overflow-x: clip; /* 320 px: nothing decorative may widen the page */
  scroll-padding-top: calc(var(--nav-top) + var(--nav-h) + var(--s-4));
  interpolate-size: allow-keywords;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  background: var(--canvas); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-text); letter-spacing: var(--track-body);
  font-weight: var(--w-regular); font-synthesis: none; font-kerning: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: var(--w-medium); text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
b, strong { font-weight: var(--w-semibold); }
/* No italics anywhere (DESIGN.md §2.2): emphasis is a lime marker. */
em, i, cite, q, address { font-style: normal; }
em { background: linear-gradient(transparent 58%, var(--accent-soft) 0); padding: 0 .04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
q { quotes: "„" "“"; }
s, del { text-decoration-color: var(--tile-coral); text-decoration-thickness: .1em; }
kbd {
  display: inline-grid; place-items: center; min-width: 1.7em; height: 1.55em; padding: 0 .4em; vertical-align: .05em;
  border: var(--hair) solid var(--rule-2); border-bottom-width: 2px; border-radius: var(--r-xs); background: var(--paper);
  font: var(--w-medium) .78em/1 var(--font-kbd); letter-spacing: 0; color: var(--ink);
}
code { font-family: var(--font-kbd); font-size: .88em; padding: .08em .35em; border-radius: var(--r-xs); background: var(--canvas-2); overflow-wrap: anywhere; }
::selection { background: var(--selection); color: var(--on-accent); }
[hidden] { display: none !important; }

/* Layout primitive: the 12-column page measure */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--page-x); }

/* Visually hidden, still read (legacy name; chrome uses .k-sr) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Skip link */
.skip {
  position: fixed; z-index: calc(var(--z-nav) + 1); left: var(--page-x); top: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-pill); background: var(--ink); color: var(--canvas);
  font-size: var(--fs-small); font-weight: var(--w-medium); text-decoration: none; transform: translateY(-160%);
  transition: transform var(--dur-s) var(--ease-out);
}
.skip:focus { transform: none; }

/* Focus: 2 px ring + halo, everywhere */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--focus-halo); border-radius: var(--r-xs); }
:focus:not(:focus-visible) { outline: none; }

/* Release state (common.js initRelease + the inline head script): one of the two variants shows. */
[data-release="none"] [data-when="ready"],
[data-release="ready"] [data-when="none"] { display: none !important; }

/* Handwritten margin note used as an eyebrow on every page */
.eyebrow { font-family: var(--font-hand); font-size: var(--fs-hand); font-weight: var(--w-medium); line-height: 1; letter-spacing: 0; color: var(--ink-2); }
.eyebrow .dot { display: none; }

/* Reveal on scroll (common.js initReveal adds .in). Without JS or with reduced motion everything stays put;
   if the script never arrives, the content shows after 2.5 s anyway. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal:not(.in) { opacity: 0; transform: translateY(24px); animation: k-show 0s 2.5s forwards; }
  .js .reveal { transition: opacity var(--dur-l) var(--ease-out) var(--d, 0ms), transform var(--dur-l) var(--ease-out) var(--d, 0ms); }
}
@keyframes k-show { to { opacity: 1; transform: none; } }

/* Inline SVG sprite container */
.k-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Shared pause/play button for content that moves on its own (WCAG 2.2.2) */
.motion-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2); height: 32px; padding: 0 var(--s-3) 0 10px;
  border: var(--hair) solid var(--rule-2); border-radius: var(--r-pill); background: transparent; color: var(--ink-2);
  font-size: var(--fs-micro); font-weight: var(--w-medium); line-height: 1;
  transition: background-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out);
}
.motion-toggle:hover { background: var(--canvas-2); color: var(--ink); }
.motion-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.motion-toggle .i-play { display: none; fill: currentColor; stroke: none; }
.motion-toggle[aria-pressed="true"] .i-play { display: block; }
.motion-toggle[aria-pressed="true"] .i-pause { display: none; }
/* The button only exists where something moves: not without JavaScript, not with reduced motion.
   It is in the layout from the first paint, so showing it never moves anything. */
html:not(.js) .motion-toggle { display: none; }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}