/* klasu Basis-CSS v0.1.0 (Entwurf Phase 2)
   Veredelt semantisches HTML. Benötigt tokens.css. Kein JavaScript nötig.
   Aufbau: Schrift → Reset → Typografie → Links → Formulare → Buttons → Tabellen → Layout-Primitive → Hilfsklassen → Medien-Anpassungen */

@font-face {
  font-family: "Lexend";
  src: url("./fonts/lexend-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Courier Prime";
  src: url("./fonts/courier-prime-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("./fonts/courier-prime-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: color-mix(in srgb, var(--color-accent) 18%, transparent); }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Typografie ---------- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-0);
  font-weight: var(--font-weight-body);
  line-height: var(--font-leading-body);
  min-height: 100vh;
  overflow-wrap: break-word;
}
h1, h2, h3, h4 { line-height: var(--font-leading-snug); text-wrap: balance; }
h1 { font-size: var(--font-size-4); font-weight: var(--font-weight-display); line-height: var(--font-leading-tight); letter-spacing: var(--font-tracking-display); }
h2 { font-size: var(--font-size-3); font-weight: var(--font-weight-display); line-height: var(--font-leading-tight); letter-spacing: var(--font-tracking-display); }
h3 { font-size: var(--font-size-2); font-weight: var(--font-weight-body); }
h4 { font-size: var(--font-size-1); font-weight: var(--font-weight-strong); }
p, li, dd { max-width: var(--font-measure); }
small, .text-small { font-size: var(--font-size--1); }
.text-muted { color: var(--color-text-muted); }
.text-display { font-size: var(--font-size-display); font-weight: var(--font-weight-display); line-height: var(--font-leading-tight); letter-spacing: var(--font-tracking-display); }
.text-detail { font-size: var(--font-size--1); letter-spacing: var(--font-tracking-detail); color: var(--color-text-muted); }
strong, b { font-weight: var(--font-weight-strong); }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }
.amount, td.num { font-family: var(--font-family-amount); font-variant-numeric: tabular-nums; white-space: nowrap; }
code, kbd, samp { font-family: var(--font-family-mono); font-size: 0.9em; background: var(--color-surface-sunken); padding: 0.1em 0.35em; border-radius: var(--radius-sm); }
ul:not([class]), ol:not([class]) { padding-left: 1.25em; }
li + li { margin-top: var(--space-1); }

/* ---------- Links ---------- */
a { color: var(--color-accent); text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--color-accent-hover); text-decoration-thickness: 0.14em; }

/* ---------- Fokus (sichtbar, nie ohne Ersatz entfernt) ---------- */
:focus-visible { outline: var(--layout-focus-ring) solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
/* Datums- und Zeitfelder: der Fokus liegt auf inneren Teilfeldern */
input[type="date"]:focus-within, input[type="time"]:focus-within, input[type="datetime-local"]:focus-within { outline: var(--layout-focus-ring) solid var(--color-focus-ring); outline-offset: 2px; }
.skip-link { position: absolute; left: var(--space-3); top: -4rem; background: var(--color-surface-raised); color: var(--color-text); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); z-index: var(--z-toast); }
.skip-link:focus { top: var(--space-3); }

/* ---------- Formulare ---------- */
label, legend { display: block; font-weight: var(--font-weight-strong); margin-bottom: var(--space-1); }
form > * + * { margin-top: var(--space-4); }
form label:not(:first-child) { margin-top: var(--space-4); }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select, textarea {
  display: block; width: 100%; max-width: 32rem;
  min-height: var(--input-min-height);
  padding: var(--space-2) var(--space-3);
  background: var(--input-bg);
  color: var(--color-text);
  border: 2px solid var(--input-border);
  border-radius: var(--input-radius);
  line-height: var(--font-leading-snug);
}
textarea { min-height: 7rem; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 1.5rem; height: 1.5rem; accent-color: var(--color-accent); vertical-align: middle; margin: 0 var(--space-2) 0 0; }
::placeholder { color: var(--color-text-muted); opacity: 1; }
input:disabled, select:disabled, textarea:disabled, button:disabled { opacity: 0.6; cursor: not-allowed; }
[aria-invalid="true"] { border-color: var(--color-error); }

/* ---------- Buttons ---------- */
button, .btn, input[type="submit"], input[type="button"] {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--button-min-height); min-width: var(--layout-target-touch);
  padding: var(--space-2) var(--space-5);
  background: var(--button-bg); color: var(--button-text);
  border: 2px solid transparent; border-radius: var(--button-radius);
  font-weight: var(--font-weight-strong); line-height: 1.2; text-decoration: none; cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--motion-duration-base) var(--motion-ease-out);
}
button:hover, .btn:hover, input[type="submit"]:hover { background: var(--button-bg-hover); color: var(--button-text); }
button:active, .btn:active { transform: translateY(1px); }
.btn-secondary { background: transparent; color: var(--color-accent); border-color: var(--color-accent); }
.btn-secondary:hover { background: var(--color-accent-subtle); color: var(--color-accent-hover); }
.btn-tertiary { background: transparent; color: var(--color-accent); padding-inline: var(--space-3); }
.btn-tertiary:hover { background: var(--color-accent-subtle); color: var(--color-accent-hover); }
.btn-danger { background: var(--color-error); color: var(--color-bg); }
.btn-danger:hover { background: var(--color-error); filter: brightness(0.92); color: var(--color-bg); }

/* ---------- Tabellen (auf schmalen Bildschirmen scrollbar) ---------- */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: top; }
th { font-weight: var(--font-weight-strong); font-size: var(--font-size--1); letter-spacing: var(--font-tracking-detail); color: var(--color-text-muted); }
td.num, th.num { text-align: right; }
.table-scroll { overflow-x: auto; }

/* ---------- Seitenstruktur für bestehende Seiten ---------- */
main { display: block; width: min(100% - 2 * var(--space-4), var(--layout-container-md)); margin: 0 auto; padding: var(--space-7) 0; }
main > * + * { margin-top: var(--space-5); }
main > section { padding-top: var(--space-5); }
main > section + section { border-top: 1px solid var(--color-border); margin-top: var(--space-6); }
main section > * + * { margin-top: var(--space-3); }
main ul:not([class]) > li { padding: var(--space-2) 0; }

/* ---------- Layout-Primitive ---------- */
.container { width: min(100% - 2 * var(--space-4), var(--layout-container-lg)); margin-inline: auto; }
.container-md { width: min(100% - 2 * var(--space-4), var(--layout-container-md)); margin-inline: auto; }
.container-sm { width: min(100% - 2 * var(--space-4), var(--layout-container-sm)); margin-inline: auto; }
.stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }
.stack-sm { --stack-gap: var(--space-2); }
.stack-lg { --stack-gap: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-3)); }
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr)); }

/* ---------- Hilfsklassen ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Anpassungen ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  button, .btn, input, select, textarea { border: 2px solid ButtonText; }
  :focus-visible { outline-color: Highlight; }
}
@media print {
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  button, .btn, .skip-link { display: none; }
}