/* ============================================================
   ZEHN X · AI LAB
   Eigene Fassung fuer /lab und die Projektseiten. Das Lab ist
   Forschung, kein Angebot: dunkler Terminal-Grund, Mono als
   Leitschrift, Gold nur fuer Zustaende. Bewusst anders als die
   helle Papierfassung der Verkaufsseiten, damit man am Look
   sofort merkt: hier wird gearbeitet, nicht verkauft.
   ============================================================ */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('/neu/assets/fonts/fraunces-400-700-normal.woff2') format('woff2');font-variation-settings:'opsz' 40}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/neu/assets/fonts/inter-400-700-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/neu/assets/fonts/ibmplexmono-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/neu/assets/fonts/ibmplexmono-500-normal.woff2') format('woff2')}

:root {
  --lab-grund:    #0B1220;
  --lab-flaeche:  #111B2E;
  --lab-flaeche2: #16223A;
  --lab-linie:    #22304C;
  --lab-linie-hell:#2E4062;
  --lab-text:     #DDE3EC;
  --lab-text-2:   #98A4B8;
  --lab-text-3:   #6C7A92;
  --lab-gold:     #C9A46A;
  --lab-gruen:    #5FBF92;
  --lab-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --lab-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --lab-serif: 'Fraunces', Georgia, serif;
}

body.lab {
  background: var(--lab-grund);
  color: var(--lab-text);
  font: 400 15px/1.7 var(--lab-mono);
  -webkit-font-smoothing: antialiased;
  /* Raster wie Millimeterpapier, sehr leise */
  background-image:
    linear-gradient(var(--lab-linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--lab-linie) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  background-position: -1px -1px;
}
body.lab::before {
  content: "";
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 50% -10%, rgba(201,164,106,.06), transparent 60%);
  pointer-events: none;
}

.lab-wrap { max-width: 66rem; margin: 0 auto; padding: 0 1.6rem; position: relative; }

/* Kopfzeile: Statuszeile statt Navigation */
.lab-kopf {
  border-bottom: 1px solid var(--lab-linie);
  background: rgba(11,18,32,.86);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.lab-kopf .lab-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 56px;
  font: 400 .74rem var(--lab-mono); letter-spacing: .12em; text-transform: uppercase;
}
.lab-kopf a { color: var(--lab-text-2); text-decoration: none; }
.lab-kopf a:hover { color: var(--lab-gold); }
.lab-marke { color: var(--lab-text) !important; font-weight: 500; }
.lab-marke b { color: var(--lab-gold); font-weight: 500; }

/* Statusleuchte */
.lab-status { display: inline-flex; align-items: center; gap: .5rem; }
.lab-punkt { width: 7px; height: 7px; background: var(--lab-gruen); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(95,191,146,.16); }

.lab-hero { padding: 5.5rem 0 3.4rem; border-bottom: 1px solid var(--lab-linie); }
.lab-eyebrow {
  font: 400 .74rem var(--lab-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--lab-text-3); display: flex; align-items: center; gap: .7rem;
}
.lab-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--lab-gold); }
.lab-hero h1 {
  font: 550 clamp(2.2rem, 5.5vw, 3.4rem)/1.1 var(--lab-serif);
  letter-spacing: -.015em; margin: 1.4rem 0 1.2rem; color: #fff; max-width: 20ch;
}
.lab-hero p { color: var(--lab-text-2); max-width: 62ch; font-family: var(--lab-sans);
  font-size: 1.02rem; line-height: 1.7; }

.lab-band { padding: 4.2rem 0; border-bottom: 1px solid var(--lab-linie); }
.lab-band h2 {
  font: 550 clamp(1.4rem, 3vw, 1.9rem)/1.2 var(--lab-serif);
  letter-spacing: -.01em; color: #fff; margin: 1rem 0 .8rem;
}
.lab-band p { color: var(--lab-text-2); font-family: var(--lab-sans); max-width: 68ch; }

/* Projektkarten: wie Geraete im Rack */
.lab-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem; margin-top: 2.4rem; }
.lab-karte {
  background: var(--lab-flaeche);
  border: 1px solid var(--lab-linie);
  padding: 1.8rem 1.6rem;
  display: flex; flex-direction: column; gap: .7rem;
  text-decoration: none; color: var(--lab-text);
  transition: border-color .18s cubic-bezier(.22,1,.36,1), background .18s;
  position: relative;
}
.lab-karte::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--lab-gold); opacity: 0; transition: opacity .18s;
}
.lab-karte:hover { border-color: var(--lab-linie-hell); background: var(--lab-flaeche2); }
.lab-karte:hover::after { opacity: 1; }
.lab-karte .kennung { font: 400 .7rem var(--lab-mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--lab-gold); }
.lab-karte h3 { font: 550 1.3rem/1.2 var(--lab-serif); color: #fff; letter-spacing: -.01em; }
.lab-karte p { color: var(--lab-text-2); font-family: var(--lab-sans); font-size: .92rem; flex: 1; }
.lab-karte .zustand {
  font: 400 .72rem var(--lab-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--lab-text-3); padding-top: .9rem; border-top: 1px solid var(--lab-linie);
  display: flex; align-items: center; gap: .5rem;
}
.lab-karte .zustand::before { content: ""; width: 6px; height: 6px; background: var(--lab-gold); }

/* Kennzahlen-Leiste */
.lab-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--lab-linie); background: var(--lab-flaeche); margin-top: 2.2rem; }
.lab-werte > div { padding: 1.2rem 1.3rem; border-left: 1px solid var(--lab-linie); }
.lab-werte > div:first-child { border-left: 0; }
.lab-werte b { display: block; font: 500 1.7rem/1.1 var(--lab-mono); color: #fff;
  font-variant-numeric: tabular-nums; }
.lab-werte span { font: 400 .7rem var(--lab-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--lab-text-3); }

.lab-fuss { padding: 2.6rem 0 3.4rem; color: var(--lab-text-3);
  font: 400 .76rem var(--lab-mono); letter-spacing: .06em; }
.lab-fuss a { color: var(--lab-text-2); text-decoration: none;
  border-bottom: 1px solid transparent; }
.lab-fuss a:hover { border-bottom-color: var(--lab-gold); }
.lab-fuss .zeile { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between; }

.lab-zurueck {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 2.4rem;
  font: 400 .76rem var(--lab-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--lab-text-2); text-decoration: none;
}
.lab-zurueck:hover { color: var(--lab-gold); }

@media (max-width: 640px) {
  body.lab { background-size: 40px 40px, 40px 40px; }
  .lab-hero { padding: 3.4rem 0 2.4rem; }
  .lab-kopf .lab-wrap { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-karte, .lab-karte::after { transition: none; }
}


/* Fliesstext-Links ohne eigene Klasse: im Hellen Navy, im Dunkeln Gold.
   Ohne diese Regel greift das Browser-Standardblau, das auf dunklem Grund
   praktisch unlesbar ist. */
a:not([class]) { color: var(--color-ink, #14213D); text-underline-offset: .18em; }
:root[data-theme="dark"] a:not([class]) { color: #C9A46A; }
:root[data-theme="dark"] a:not([class]):hover { color: #D8B57E; }