/* ============================================================
   FABRIKAT STARTER-KIT · ui.css  —  DAS FUNDAMENT (nicht editieren)
   ------------------------------------------------------------
   Token-Skalen (aus theme.css abgeleitet) + Reset + Basis-Elemente +
   Layout-Utilities + Komponenten. Jede Regel folgt den Fabrikat-Design-
   Prinzipien: feste Spacing-Skala, echte Typo-Hierarchie, OKLCH-Farbe,
   Hairline vor Schatten, sparsame zweckgebundene Motion, alle States,
   prefers-reduced-motion. Lädt NACH theme.css.

   Einbinden:  <link rel="stylesheet" href="theme.css">
               <link rel="stylesheet" href="ui.css">
   ============================================================ */

:root {
  /* ---- Akzent-Skala (parametrisch aus theme.css --accent-h/c/l) ---- */
  --accent:        oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  --accent-hover:  oklch(calc(var(--accent-l) - 0.055) var(--accent-c) var(--accent-h));
  --accent-active: oklch(calc(var(--accent-l) - 0.10)  var(--accent-c) var(--accent-h));
  --accent-bright: oklch(calc(var(--accent-l) + 0.12)  calc(var(--accent-c) * 0.9) var(--accent-h));
  --accent-wash:   oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.10);
  --accent-line:   oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.32);
  --on-accent:     oklch(0.99 0.004 var(--accent-h));   /* Text auf Akzent-Fläche */

  /* ---- Flächen (Light-optimiert, getönt via --neutral-*; Dark = theme-Override) ---- */
  --canvas:  oklch(1     var(--neutral-c) var(--neutral-h));   /* Grund — jetzt reines Weiß */
  --surface: oklch(0.985 var(--neutral-c) var(--neutral-h));   /* Karten/Panels — das gräulich-bläuliche Weiß */
  --raised:  oklch(0.972 var(--neutral-c) var(--neutral-h));   /* Insets/Hover */
  --sunk:    oklch(0.955 var(--neutral-c) var(--neutral-h));   /* Footer/Wells */

  /* ---- Ink / Text (Kontrast ≥ AA; leicht getönt, nie pures Grau) ---- */
  --ink:       oklch(0.23 calc(var(--neutral-c) + 0.004) var(--neutral-h));  /* Body, ~13:1 */
  --ink-soft:  oklch(0.42 calc(var(--neutral-c) + 0.004) var(--neutral-h));  /* sekundär */
  --ink-faint: oklch(0.52 var(--neutral-c) var(--neutral-h));                /* Labels, ~4.6:1 */

  /* ---- Hairlines ---- */
  --line:        oklch(0.90 var(--neutral-c) var(--neutral-h));
  --line-soft:   oklch(0.935 var(--neutral-c) var(--neutral-h));
  --line-strong: oklch(0.86 var(--neutral-c) var(--neutral-h));

  /* ---- Semantik (Ampel) ---- */
  --success: oklch(0.55 0.12 150);
  --warn:    oklch(0.66 0.13 75);
  --danger:  oklch(0.56 0.16 28);
  --success-wash: oklch(0.55 0.12 150 / 0.10);
  --warn-wash:    oklch(0.66 0.13 75 / 0.12);
  --danger-wash:  oklch(0.56 0.16 28 / 0.10);

  /* ---- Spacing-Skala (feste Stufen × Dichte; nie Zufalls-Margins) ---- */
  --sp-1: calc(4px  * var(--density));
  --sp-2: calc(8px  * var(--density));
  --sp-3: calc(12px * var(--density));
  --sp-4: calc(16px * var(--density));
  --sp-5: calc(24px * var(--density));
  --sp-6: calc(32px * var(--density));
  --sp-7: calc(48px * var(--density));
  --sp-8: calc(64px * var(--density));
  --sp-9: calc(96px * var(--density));
  --sp-10: calc(128px * var(--density));

  /* ---- Typo-Skala (fluid via clamp; Display gedeckelt bei 6rem) ---- */
  --text-xs:  0.78rem;
  --text-sm:  0.875rem;
  --text-base: 1rem;
  --text-lg:  1.125rem;
  --text-xl:  clamp(1.25rem, 1.6vw, 1.4rem);
  --text-2xl: clamp(1.5rem, 2.4vw, 1.85rem);
  --text-3xl: clamp(1.9rem, 3.4vw, 2.5rem);
  --text-4xl: clamp(2.4rem, 5vw, 3.4rem);
  --text-5xl: clamp(3rem, 7vw, 4.6rem);
  --text-6xl: clamp(3.4rem, 8.5vw, 6rem);   /* Ceiling 6rem — darüber schreit es */

  /* ---- Radius (aus theme --radius) ---- */
  --r-sm: calc(var(--radius) * 0.6);
  --r-md: var(--radius);
  --r-lg: calc(var(--radius) * 1.5);
  --r-pill: 999px;

  /* ---- Motion (eigene Kurven; CSS-Defaults sind zu schwach) ---- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);     /* ease-out, exponentiell */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 120ms;   /* Feedback (Press/Toggle) */
  --dur-2: 220ms;   /* State (Menü/Tooltip) */
  --dur-3: 320ms;   /* Layout (Modal/Drawer) */

  /* ---- z-index (semantisch, nie willkürlich 9999) ---- */
  --z-base: 1; --z-dropdown: 100; --z-sticky: 200;
  --z-modal: 300; --z-toast: 400; --z-tooltip: 500;

  /* ---- Schatten (definiert, ≤8px Blur — NICHT weicher Nebel) ---- */
  --shadow-1: 0 1px 2px oklch(0.2 0.02 var(--neutral-h) / 0.06);
  --shadow-2: 0 6px 16px -8px oklch(0.2 0.02 var(--neutral-h) / 0.18);

  --measure: 68ch;          /* Lesezeilen-Länge 65–75ch */
  --container: 1140px;
}

/* ============================================================
   RESET (modern, minimal)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video, canvas, picture { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }

/* ============================================================
   BASIS-ELEMENTE
   ============================================================ */
body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;          /* großzügig für Fließtext */
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -0.02em;    /* Display enger, Boden -0.04em */
  text-wrap: balance;         /* gegen Schusterjungen in Headings */
  color: var(--ink);
  font-weight: 650;
}
h1 { font-size: var(--text-4xl); letter-spacing: -0.03em; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { text-wrap: pretty; }
p, li { max-width: var(--measure); }     /* Lesbarkeit; bei breiten Layouts überschreiben */

a { color: var(--accent); text-decoration: none; }
a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--accent-line);
  transition: text-decoration-color var(--dur-1) var(--ease);
}
a:not([class]):hover { text-decoration-color: var(--accent); }

strong, b { font-weight: 650; color: var(--ink); }
small { font-size: var(--text-sm); }
hr { border: none; border-top: 1px solid var(--line); margin-block: var(--sp-6); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }
.mono { font-family: var(--font-mono); }
.eyebrow {  /* Marken-Voice EINMAL ok — NICHT über jeden Abschnitt streuen (AI-Tell) */
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}

/* ============================================================
   LAYOUT-UTILITIES
   ============================================================ */
.container { width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: clamp(var(--sp-4), 4vw, var(--sp-8)); }
.section { padding-block: clamp(var(--sp-7), 8vh, var(--sp-9)); }
.stack > * + * { margin-top: var(--sp-4); }        /* vertikaler Rhythmus */
.stack-lg > * + * { margin-top: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
/* responsives Grid ohne Breakpoints */
.grid-auto { display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.measure { max-width: var(--measure); }
.center { text-align: center; margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================================================
   BUTTON — alle States, Press-Feedback, GPU-Transitions
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-weight: 600; font-size: var(--text-sm); line-height: 1;
  padding: 0.85em 1.4em; border-radius: var(--r-md);
  border: 1.5px solid transparent;
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.btn:active { transform: scale(0.97); }     /* reagiert auf Druck */
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-ghost   { background: transparent; color: var(--accent); border-color: var(--accent-line); }
.btn-subtle  { background: var(--raised); color: var(--ink); border-color: var(--line); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover);
    box-shadow: var(--shadow-2); transform: translateY(-1px); }
  .btn-ghost:hover   { background: var(--accent-wash); transform: translateY(-1px); }
  .btn-subtle:hover  { background: var(--surface); border-color: var(--line-strong); }
}

/* ============================================================
   FORM-FELDER — Label, Input, States (focus/error/success), Hint
   ============================================================ */
.field { display: grid; gap: var(--sp-2); }
.field > label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.field .hint { font-size: var(--text-sm); color: var(--ink-faint); }
.input, .field input, .field textarea, .field select {
  width: 100%; padding: 0.7em 0.85em;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.input::placeholder, .field input::placeholder, .field textarea::placeholder {
  color: var(--ink-faint);   /* Placeholder ebenfalls ≥4.5:1 */
}
.input:focus, .field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field input:user-invalid, .field .is-error input, .input.is-error {
  border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-wash);
}
.field .error-text { font-size: var(--text-sm); color: var(--danger); }

/* ============================================================
   CARD — Hairline zuerst, Schatten nur bewusst (kein Ghost-Card-Mix)
   ============================================================ */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(var(--sp-5), 3vw, var(--sp-6));
}
.card-raised { box-shadow: var(--shadow-1); }   /* dann KEINE betonte Border zusätzlich */
.card-interactive {
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card-interactive:hover { transform: translateY(-3px);
    border-color: var(--line-strong); box-shadow: var(--shadow-2); }
}

/* ============================================================
   BADGE / TAG
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em;
  padding: 0.32em 0.7em; border-radius: var(--r-pill);
  background: var(--accent-wash); color: var(--accent); border: 1px solid var(--accent-line);
}

/* ============================================================
   ALERT — volle Border + Leading-Space (KEIN Side-Stripe = AI-Tell)
   ============================================================ */
.alert { border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); background: var(--raised); color: var(--ink-soft); }
.alert strong { color: var(--ink); }
.alert-info    { background: var(--accent-wash);  border-color: var(--accent-line); }
.alert-success { background: var(--success-wash); border-color: var(--success); }
.alert-warn    { background: var(--warn-wash);    border-color: var(--warn); }
.alert-danger  { background: var(--danger-wash);  border-color: var(--danger); }

/* ============================================================
   NAV (schlicht, horizontal; Link-Unterstrich wächst aus links)
   ============================================================ */
.nav { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); padding-block: var(--sp-4); }
.nav-links { display: flex; gap: var(--sp-5); align-items: center; list-style: none; }
.nav-links a { position: relative; color: var(--ink-soft); font-size: var(--text-sm); font-weight: 500;
  transition: color var(--dur-1) var(--ease); }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--ink); }
  .nav-links a:hover::after { transform: scaleX(1); }
}

/* ============================================================
   REDUCED MOTION (Pflicht-Alternative, nicht optional)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}