@charset "UTF-8";
/* Design-Tokens und Webfonts */

/* Webfont Inter */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Bewusst nur zwei Schnitte, je ein Gewichtsbereich; ExtraBold wird im Seitenkopf vorgeladen, Dateinamen dort mitziehen */
@font-face {
  font-family: 'VIZOMAT';
  src: url('/assets/fonts/VIZOMAT-Regular.woff2?v=20260925b') format('woff2'),
       url('/assets/fonts/VIZOMAT-Regular.woff?v=20260925b') format('woff');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VIZOMAT';
  src: url('/assets/fonts/VIZOMAT-ExtraBold.woff2?v=20260925b') format('woff2'),
       url('/assets/fonts/VIZOMAT-ExtraBold.woff?v=20260925b') format('woff');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

:root{
  color-scheme:only light;  /* nur helles Design, Chrome soll nicht selbst abdunkeln */
  /* Farben */
  --ink:#0c0f13;
  --ink-soft:#4a4c50;       /* Leiser Sekundärtext, AA-sicher auf Ash */
  --ash:#d4d6da;
  --ash-soft:#e7eaee;
  --paper:#fff;
  --acid:#00FF8C;
  --shadow:#a9abae;         /* Nur eine Farbe, kein fertiger Schatten-Wert für box-shadow */
  --on-dark:#eef1f5;
  --amber:#ddba38;          /* Warm-Akzent / Gold (achtsam), statt Alarm-Rot */
  --amber-deep:#df7e00;
  --good:#1c7d3f;
  --red:#e5484d;            /* Rot: nur für Fehlendes / Fehler */

  /* Typografie */
  --font:"InterVariable","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:var(--font);       /* Keine echte Mono; echtes Code-Mono nutzt .mono/.copy-box explizit monospace */
  --font-head:"VIZOMAT","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  /* Gemessene linke Seitenlage der Glyphen, für die optische Kante von .flush-left */
  --bearing-head:0.075em;
  --bearing-body:0.03em;

  /* Typo-Skala, alles in rem über die fluide Root-Größe */
  /* Unter der Basis gibt es nur eine Stufe, 2xs bis sm sind Synonyme dafür */
  --fs-tag:0.66rem;       /* Einzige Stufe unter Small, für Tags und Kleinstgedrucktes */
  --fs-2xs:0.875rem;
  --fs-xs:0.875rem;
  --fs-2sm:0.875rem;
  --fs-sm:0.875rem;
  --fs-body:1rem;
  --fs-lead:1.25rem;
  --fs-h3:1.6rem;
  --fs-h2:3rem;
  --fs-h1:4rem;
  --fs-display:clamp(3.25rem, 1.4rem + 8.5vw, 7.5rem); /* Einzige Stufe mit eigenem vw-Anteil, alle anderen skalieren nur über die Root */

  /* Maße und Raster */
  --maxw:1320px;      /* Containerbreite: der zentrierte Rahmen .wrap */
  --read:760px;       /* Lesebreite: die Spur für Fließtext, rund 70 Zeichen */
  --gutter:clamp(18px,3.5vw,40px);
  /* Eck-Radien */
  --r-tag:6px;
  --r-sm:12px;
  --r-box:18px;
  --r-card:24px;
  --r-pill:999px;
}

/* Utilities */
/* Nur linksbündige Headlines an der Kante; mit eigener margin-Regel den Wert dort setzen */
.flush-left{ margin-inline-start:calc(-1 * var(--bearing-head)); }
.flush-left-body{ margin-inline-start:calc(-1 * var(--bearing-body)); }

/* In rem statt px, damit die Schriftgrößen-Einstellung des Nutzers wirkt */
html{ font-size:clamp(1rem, 0.953rem + 0.2vw, 1.125rem); }

/* Hier, weil base.css als einzige Datei überall geladen wird */
th, td{ text-wrap:balance; }

/* Bot-Keyframes, geteilt von app.css, website.css und bot-lab.css */
@keyframes bot-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes bot-eye{0%,93%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.08)}}
@keyframes bot-breathe{0%,100%{fill:#0c0f13}50%{fill:#0b251e}}
@keyframes bot-wave{0%{transform:rotate(0)}18%{transform:rotate(-100deg)}30%{transform:rotate(-95deg)}44%{transform:rotate(-103deg)}58%{transform:rotate(-95deg)}72%{transform:rotate(-101deg)}84%{transform:rotate(-99deg)}100%{transform:rotate(0)}}
@keyframes bot-wave-el{0%,14%{transform:rotate(0)}28%{transform:rotate(-80deg)}40%{transform:rotate(-52deg)}52%{transform:rotate(-82deg)}64%{transform:rotate(-52deg)}76%{transform:rotate(-78deg)}88%{transform:rotate(-40deg)}100%{transform:rotate(0)}}

/* Die 404 von App und Website: großer Bot mit Szene, Ablauf ohne Skript */
.nf4{text-align:center;padding:48px 20px 60px;max-width:920px;margin:0 auto}
.nf4-bot{width:250px;margin:0 auto 20px;animation:nf-auf .6s cubic-bezier(.3,1.5,.5,1) .1s both}
div.nf4 h1.nf4-h{font-family:var(--font-head);font-weight:800;font-size:clamp(2.1rem,1.2rem + 2.8vw,3.6rem);line-height:1.02;letter-spacing:-.06em;margin:0;max-width:none;text-wrap:balance;color:var(--ink);animation:nf-zeile .4s ease .4s both}
.nf4-h span{display:block}
.nf4-p{font-size:1.1rem;line-height:1.55;color:var(--ink-soft);max-width:46ch;margin:16px auto 0;text-wrap:pretty;animation:nf-zeile .4s ease .55s both}
.nf4-k{display:flex;gap:14px 24px;justify-content:center;align-items:center;flex-wrap:wrap;margin:28px 0 0;animation:nf-zeile .4s ease .7s both}
.nf4-link{display:inline-block;padding:12px 0;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--acid)}
@keyframes nf-auf{from{opacity:0;transform:translateY(-40px) scale(.6)}}
@keyframes nf-zeile{from{opacity:0;transform:translateY(10px)}}
.bot-gesucht{display:block;width:100%;height:auto;overflow:visible}
.bot-gesucht .bot-bob{animation:bot-bob 3.6s ease-in-out infinite}
.bot-gesucht .bot-screen{animation:bot-breathe 2.4s ease-in-out infinite}
.bot-gesucht .bot-eye{transform-box:fill-box;transform-origin:center}
/* erst sieht er sich um, dann grübelt er, dann bleibt der ernste Blick */
.bot-gesucht .bot-f1{animation:nf-weg .01s linear 3.3s forwards}
.bot-gesucht .bot-f1 .bot-eye{animation:nf-blick 2.4s ease-in-out infinite}
.bot-gesucht :is(.bot-f2,.bot-denk){opacity:0;animation:nf-da 1.9s steps(1) 3.3s 1}
.bot-gesucht .bot-f3{opacity:0;animation:nf-hin .01s linear 5.2s forwards}
.bot-gesucht .bot-f3 .bot-eye{animation:nf-um-auge 11s ease-in-out 2.4s infinite}
.bot-gesucht .bot-headface{transform-box:view-box;animation:nf-um-kopf 11s ease-in-out 2.4s infinite,nf-kopf 2.4s ease-in-out 1.375,nf-nein .7s ease-in-out 5.2s 1}
.bot-gesucht .bot-face{transform-box:view-box;animation:nf-nein-auge .7s ease-in-out 5.2s 1}
.bot-gesucht .bot-arm{transform-box:view-box;transform-origin:202px 129px;animation:nf-zuck-r 11s ease-in-out 13.4s infinite,nf-zuck1-r 1s ease-in-out 6.1s 1}
.bot-gesucht .bot-arm-l{transform-box:view-box;transform-origin:38px 129px;animation:nf-zuck-l 11s ease-in-out 13.4s infinite,nf-zuck1-l 1s ease-in-out 6.1s 1}
@keyframes nf-weg{to{opacity:0}}
@keyframes nf-hin{to{opacity:1}}
@keyframes nf-da{from,to{opacity:1}}
@keyframes nf-blick{0%,100%{transform:translateX(-11px)}50%{transform:translateX(11px)}}
@keyframes nf-kopf{0%,100%{transform:translateX(-4.5px)}50%{transform:translateX(4.5px)}}
@keyframes nf-nein{0%,100%{transform:translateX(0)}18%{transform:translateX(-7px)}42%{transform:translateX(7px)}66%{transform:translateX(-5px)}86%{transform:translateX(3px)}}
@keyframes nf-nein-auge{0%,100%{transform:translateX(0)}18%{transform:translateX(-3.5px)}42%{transform:translateX(3.5px)}66%{transform:translateX(-2.5px)}86%{transform:translateX(1.5px)}}
@keyframes nf-um-kopf{0%,78%,100%{transform:translateX(0)}83.5%{transform:translateX(-4.5px)}94.5%{transform:translateX(4.5px)}}
@keyframes nf-um-auge{0%,30%,36%,78%,100%{transform:translateX(0) scaleY(1)}33%{transform:translateX(0) scaleY(.08)}83.5%{transform:translateX(-11px) scaleY(1)}94.5%{transform:translateX(11px) scaleY(1)}}
@keyframes nf-zuck-r{0%,9%,100%{transform:rotate(0)}2.7%,6.2%{transform:rotate(-28deg)}}
@keyframes nf-zuck-l{0%,9%,100%{transform:rotate(0)}2.7%,6.2%{transform:rotate(28deg)}}
@keyframes nf-zuck1-r{0%,100%{transform:rotate(0)}30%,68%{transform:rotate(-28deg)}}
@keyframes nf-zuck1-l{0%,100%{transform:rotate(0)}30%,68%{transform:rotate(28deg)}}
@media (max-width:560px){.nf4{padding:32px 4px 44px}.nf4-bot{width:164px}div.nf4 h1.nf4-h{font-size:1.85rem}.nf4-p{font-size:1rem}}
@media (prefers-reduced-motion:reduce){.nf4 *,.nf4-bot{animation:none!important}.bot-gesucht .bot-f1{opacity:0}.bot-gesucht .bot-f3{opacity:1}}
/* Sprung-Link, sichtbar erst bei Fokus; muss die erste Tab-Station bleiben */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; }
.skip-link:focus{ left:12px; top:12px; width:auto; height:auto; padding:.7em 1.1em; background:var(--acid);
  color:var(--ink); font-weight:800; border:2px solid var(--ink); border-radius:var(--r-pill);
  box-shadow:4px 4px 0 var(--ink); text-decoration:none; }
[id="hauptinhalt"]:focus{ outline:none; }