/* =========================================================================
   LIV — gemeinsames Designsystem der Oberflächen (/ui, /twin, /cosmetic-ui)

   Eine Familie, drei Aufgaben. Die Kunstrichtung ist bewusst gegen zwei
   Defaults gesetzt: gegen das Creme-Weiss-plus-Gold der Kosmetikwerbung und
   gegen das Lila-Blau der SaaS-Konsolen. Stattdessen tiefes Graphit, kuehles
   Klinikweiss und EIN Akzent in Reagenz-Mint.

   Die Display-Stimme ist eine Mono. Das ist keine Mode, sondern die Stimme des
   Materials: Befunde, Etiketten und Laborwerte sind gesetzte Daten, keine
   Kampagne. Die Serife waere hier eine Behauptung von Luxus, die das Produkt
   nicht einloest.
   ========================================================================= */

:root{
  /* Grund */
  --ink:#0d1117;          /* Grundflaeche */
  --ink-2:#151b23;        /* erhobene Flaechen, Karten, Felder */
  --ink-3:#0a0e14;        /* vertiefte Flaechen, Eingaben */
  --line:#232c38;         /* Trennlinien */

  /* Schrift */
  --paper:#e8edf2;        /* kuehles Klinikweiss, Fliesstext */
  --mute:#7d8b9a;         /* Sekundaertext, Label */

  /* Akzente - sparsam */
  --signal:#6fe3c4;       /* Reagenz-Mint: belegt, geprueft, aktiv */
  --flag:#ffd9a0;         /* Kennzeichnung/Hinweis - nie als Flaeche gross */
  --alert:#ff8a73;        /* nur echte Fehler */

  /* Bewegung: nie linear, nie Browser-Default */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.83,0,.17,1);
  --t-micro:180ms;        /* Mikro-Interaktion */
  --t-std:460ms;          /* Standarduebergang */
  --t-cine:1000ms;        /* Held-Beat */

  --r-s:8px; --r-m:12px; --r-l:16px; --r-pill:100px;
}

/* Helle Flaeche: die Konsole /ui traegt die gewachsene Corporate Identity
   (kuehles Papierweiss, Navy, Gold) - das ist kein KI-Default, sondern das
   Design, in dem auch die PDF-Berichte erscheinen. Sie wird nicht ersetzt,
   sondern mit denselben Prinzipien gehoben: Bewegungsphysik, sichtbarer Fokus,
   Korn, Typo-Disziplin. Geteilt werden die flaechen-unabhaengigen Dinge. */
.surface-light{
  --ink:#F7F9FC; --ink-2:#ffffff; --ink-3:#ffffff; --line:#E1E6EF;
  --paper:#1F2A44; --mute:#5B6478;
  --signal:#1A3A8F;       /* Royal der Marke traegt hier die Signalrolle */
}

*{box-sizing:border-box}

body{
  margin:0;background:var(--ink);color:var(--paper);
  font:400 16px/1.65 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono,code,pre,textarea.mono{font-family:"JetBrains Mono",ui-monospace,"SF Mono",monospace}
::selection{background:var(--signal);color:var(--ink)}

/* Sichtbarer Fokus ist Teil von Premium, nicht dessen Gegenteil */
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}

h1,h2,h3{font-weight:600;letter-spacing:-.028em;line-height:1.06;margin:0}
h1{font-size:clamp(2.6rem,7.5vw,5.6rem);letter-spacing:-.035em;line-height:.99}
h2{font-size:clamp(1.7rem,4vw,2.9rem)}
h3{font-size:1.05rem;letter-spacing:-.01em}
.lede{color:#b9c4d0;font-size:clamp(1rem,1.55vw,1.16rem);max-width:58ch}
.sub{color:var(--mute);max-width:58ch}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0}
.accent{color:var(--signal)}

/* Filmkorn: gibt der Flaeche Materialitaet statt Vektor-Sauberkeit */
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:60;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:liv-grain 8s steps(6) infinite}
@keyframes liv-grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}}

/* Bedienelemente */
.btn{display:inline-block;border:0;cursor:pointer;font:inherit;font-weight:500;
  text-decoration:none;padding:13px 24px;border-radius:var(--r-pill);
  background:var(--signal);color:#06231c;
  transition:transform var(--t-std) var(--ease-out),filter var(--t-std) var(--ease-out)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn:disabled{opacity:.45;cursor:wait;transform:none}
.btn.ghost{background:transparent;color:var(--paper);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--signal)}

label,.fl{display:block;font-size:13px;color:var(--mute);margin-bottom:8px}
input,textarea,select{width:100%;background:var(--ink-3);color:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;
  font:inherit;font-size:14px;
  transition:border-color var(--t-micro) var(--ease-out)}
input:focus,textarea:focus,select:focus{border-color:var(--signal);outline:none}
textarea{resize:vertical;line-height:1.7}

.card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-m);
  padding:18px}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* Einblendung beim Scrollen; ohne JS bleibt alles sichtbar */
.rise{opacity:0;transform:translateY(24px)}
.rise.in{opacity:1;transform:none;
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.no-js .rise{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .grain{animation:none}
  .rise{opacity:1;transform:none}
}