/* PCFOX V26 — Design-System: Tokens, Typografie, Komponenten.
   Zwei Lichtwelten: tone-dark (Graphit) und tone-light (Studio). */

@font-face{
  font-family:"Inter V26";
  src:url("../../assets/fonts/inter-var-ext.woff2") format("woff2-variations"),url("../../assets/fonts/inter-var-ext.woff2") format("woff2");   /* V26: Inter 4.1 mit Latin Extended (Serbisch č ć š ž đ, Französisch) */
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --black:#050507;--ink:#08080c;--graphite:#0d0d12;
  --white:#ffffff;--paper:#f5f5f7;
  --violet:#8a5cff;--violet-2:#9f7cff;--violet-3:#6d45e8;--lavender:#c3b2ff;
  --ok:#35c97a;--ok-text:#7fe3ac;--tv:#0e8ee9;

  --font:"Inter V26","Inter","SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"SF Mono","Cascadia Mono",ui-monospace,Menlo,Consolas,monospace;

  --gutter:clamp(20px,4.4vw,80px);
  --maxw:1560px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* Typo-Skala: wenige, klare Stufen */
  --t-display:clamp(64px,9.4vw,188px);
  --t-h2:clamp(42px,5.6vw,108px);
  --t-h3:clamp(18px,1.25vw,21px);
  --t-lede:clamp(17px,1.2vw,20px);
  --t-body:15.5px;
  --t-label:11.5px;
}

/* Lichtwelten */
.tone-dark{--fg:#fff;--fg-2:rgba(245,245,247,.66);--fg-3:rgba(245,245,247,.5);--line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.16);--surface:rgba(255,255,255,.05);--accent:var(--lavender);color:var(--fg)}
.tone-light{--fg:#0b0b10;--fg-2:rgba(11,11,16,.64);--fg-3:rgba(11,11,16,.44);--line:rgba(11,11,16,.1);--line-2:rgba(11,11,16,.16);--surface:rgba(255,255,255,.62);--accent:var(--violet-3);color:var(--fg)}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--black);color-scheme:dark;-webkit-text-size-adjust:100%}
body{
  margin:0;min-width:320px;overflow-x:clip;background:var(--black);color:#fff;
  font-family:var(--font);font-size:var(--t-body);line-height:1.5;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lavender);outline-offset:3px;border-radius:8px}
.tone-light :focus-visible{outline-color:var(--violet-3)}
::selection{background:rgba(138,92,255,.35);color:#fff}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:400;padding:12px 16px;border-radius:12px;background:#fff;color:#000;font-weight:650}
.skip:focus{top:16px}
.wrap{width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto}

/* V11: Seitenwechsel Start ↔ Themenseite als kurze Überblendung (View Transitions, Chromium/Safari; Firefox: normaler Wechsel).
   Die Navigation bleibt stehen, nur der Inhalt blendet. */
@view-transition{navigation:auto}
.v163-nav{view-transition-name:v163-nav}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--d-fast);animation-timing-function:var(--e-smooth)}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* Lenis */
html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}

/* ── Typografie ── */
.eyebrow{display:flex;align-items:center;gap:14px;font-size:var(--t-label);font-weight:620;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.eyebrow b{font-weight:620;color:var(--fg);letter-spacing:.06em}
.eyebrow b::after{content:"";display:inline-block;width:26px;height:1px;margin-left:14px;vertical-align:middle;background:currentColor;opacity:.35}
h2{margin-top:20px;font-size:var(--t-h2);line-height:.94;font-weight:640;letter-spacing:-.045em;color:var(--fg);text-wrap:balance}
h2 span{color:var(--fg-3)}
h3{font-size:var(--t-h3);font-weight:620;letter-spacing:-.015em;color:var(--fg)}
.lede{margin-top:24px;max-width:30em;font-size:var(--t-lede);line-height:1.55;color:var(--fg-2)}
.label{font-size:var(--t-label);font-weight:620;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.fine{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--fg-3)}

/* ── Buttons & Links ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:999px;white-space:nowrap;
  font-size:15px;font-weight:600;letter-spacing:-.01em;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  transition:background var(--d-fast) var(--e-smooth),border-color var(--d-fast) var(--e-smooth);
}
.btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.btn--solid{background:var(--paper);color:#0a0a0e;border-color:transparent;box-shadow:0 12px 32px rgba(0,0,0,.28)}
.btn--solid:hover{background:#fff}
.link-quiet{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--fg);padding-bottom:4px;border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent);transition:border-color var(--d-fast) var(--e-smooth)}
.link-quiet:hover{border-color:var(--accent)}

/* ── Status: Grün nur für echte Betriebszustände ── */
.state{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:11px;font-weight:680;letter-spacing:.15em;text-transform:uppercase;color:var(--ok-text)}
.tone-light .state{color:#138a4d}
.state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(53,201,122,.16)}
.chip{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;background:var(--surface);border:1px solid var(--line);color:var(--fg)}
.chip img{width:16px;height:16px;border-radius:4px}
.chip--neutral{color:var(--fg-2)}
.chip--neutral::before{content:"";width:7px;height:7px;border-radius:50%;background:#e0a13a}

/* ── Panel (ruhiges Rauchglas, nur wo Information gruppiert wird) ── */
.panel{
  padding:22px 24px 10px;border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 70px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
}
.panel__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:14px;font-size:11px;font-weight:680;letter-spacing:.18em;text-transform:uppercase;color:var(--fg)}
.panel__head small{font-size:10.5px;font-weight:600;letter-spacing:.12em;color:var(--fg-3)}
.panel li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line);font-size:15px;color:var(--fg)}
.with-logo{display:inline-flex;align-items:center;gap:10px}

/* ── Aurora: gedämpfter violetter Lichtschleier (nur auf Graphit sichtbar) ── */
.aurora{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden;mix-blend-mode:screen;will-change:opacity,transform}
.aurora i{position:absolute;width:72vmax;height:72vmax;border-radius:50%;will-change:transform;background:radial-gradient(circle,rgba(138,92,255,.2) 0%,rgba(109,69,232,.08) 36%,transparent 66%)}
.aurora i:nth-child(1){left:-26vmax;top:-30vmax;animation:drift-a 30s ease-in-out infinite alternate}
.aurora i:nth-child(2){right:-30vmax;top:8vh;width:62vmax;height:62vmax;background:radial-gradient(circle,rgba(195,178,255,.11) 0%,rgba(159,124,255,.05) 38%,transparent 66%);animation:drift-b 36s ease-in-out infinite alternate}
.aurora i:nth-child(3){left:12vw;bottom:-46vmax;background:radial-gradient(circle,rgba(159,124,255,.16) 0%,rgba(109,69,232,.06) 36%,transparent 66%);animation:drift-c 42s ease-in-out infinite alternate}
@keyframes drift-a{50%{transform:translate3d(22vw,14vh,0) scale(1.14)}100%{transform:translate3d(8vw,30vh,0) scale(.94)}}
@keyframes drift-b{50%{transform:translate3d(-18vw,22vh,0) scale(.92)}100%{transform:translate3d(-6vw,-10vh,0) scale(1.12)}}
@keyframes drift-c{50%{transform:translate3d(26vw,-18vh,0) scale(1.1)}100%{transform:translate3d(-10vw,-8vh,0) scale(1)}}

/* ── Reveals: einmalig, maskiert von unten ── */
.js [data-reveal]{opacity:0;transform:translate3d(0,16px,0);transition:opacity var(--d-base) var(--e-smooth) var(--d,0ms),transform var(--d-slow) var(--e-smooth) var(--d,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .aurora i{animation:none}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .btn,.link-quiet{transition:none}
}

/* V25 (David 16.10.): kleines violettes Licht folgt dem Mauszeiger (src/motion/glow.js, nur Unterseiten, nur Maus). Hellt auf wie die
   Aurora (screen), liegt unter der Navigation. Kern zügig, Hof und Punkteraster fahren langsamer nach. Nur transform/opacity. */
.v25-cursor{position:fixed;left:0;top:0;z-index:4;width:0;height:0;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .7s ease}
.v25-cursor.is-on{opacity:1}
.v25-cursor i{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.v25-cursor__halo{width:380px;height:380px;margin:-190px 0 0 -190px;
  background:radial-gradient(circle,rgba(150,108,255,.16) 0%,rgba(124,82,240,.08) 34%,rgba(109,69,232,.03) 56%,rgba(109,69,232,0) 70%)}
.v25-cursor__core{width:120px;height:120px;margin:-60px 0 0 -60px;
  background:radial-gradient(circle,rgba(196,170,255,.24) 0%,rgba(160,120,255,.12) 38%,rgba(138,92,255,0) 70%)}
.v25-cursor__grid{width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:0;
  background-image:radial-gradient(circle,rgba(205,186,255,.5) 0 1px,rgba(205,186,255,0) 1.6px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(circle closest-side,#000 0%,rgba(0,0,0,.55) 42%,transparent 100%);
  mask-image:radial-gradient(circle closest-side,#000 0%,rgba(0,0,0,.55) 42%,transparent 100%);opacity:.75}
@media (pointer:coarse),(prefers-reduced-motion:reduce){.v25-cursor{display:none}}