/* Handgeschriebene Shell; Tokenquelle: docs/06-design-wa-ci.md §1. */
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; color: var(--ui-text); background: var(--ui-surface); font-family: var(--wa-font); font-weight: var(--ui-font-weight-body); font-size: var(--ui-font-size-body); line-height: var(--ui-line-height-body); }
[hidden] { display: none !important; }
h1, h2, h3 { font-weight: var(--ui-font-weight-heading); overflow-wrap: anywhere; }
strong, b, th { font-weight: var(--ui-font-weight-button); }
h1 { font-size: var(--ui-font-size-h1); line-height: var(--ui-line-height-h1); }
h2 { font-size: var(--ui-font-size-h2); line-height: var(--ui-line-height-h2); }
h3 { font-size: var(--ui-font-size-h3); line-height: var(--ui-line-height-h3); }
h1, h2, h3, p { margin: 0 0 var(--ui-space-2); }
a { color: var(--ui-action); text-decoration: underline; text-underline-offset: .2em; }
a:hover { color: var(--ui-action-hover); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
:focus-visible { outline: var(--ui-focus-width) solid var(--ui-focus-light); outline-offset: var(--ui-focus-offset); }
.on-dark :focus-visible { outline-color: var(--ui-focus-dark); }
img, svg { max-width: 100%; }
small, .meta { font-size: var(--ui-font-size-meta); line-height: var(--ui-line-height-meta); }
.muted { color: var(--ui-text-muted); }
.skip-link { position: absolute; top: var(--ui-space-2); left: var(--ui-space-2); transform: translateY(-200%); z-index: 10; padding: var(--ui-space-2); background: var(--ui-surface); }
.skip-link:focus { transform: none; }
.stack > * + * { margin-top: var(--ui-space-3); }
/* Nur nach erfolgreicher lokaler Schriftprüfung aktiviert. Das echte i bleibt erhalten. */
[data-brand-dot] { position: relative; }
.brand-i-dot { position: absolute; border-radius: 50%; background: var(--wa-dot); transform: translateX(-50%); pointer-events: none; user-select: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .logo-motion * { transform: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
}