/* Vendor-Kopie aus TSE/CI/Glyph-Animation, Stand 26.08.2026. Die EINE Kopie im Repo (Praesentation, SSO-Seite, Bundle). Nicht hier aendern - an der Quelle, dann neu kopieren. */
/* glyph — scoped styles for the animated 404 background.
   All selectors live under .glyph; nothing leaks into the host page. */

.glyph{position:absolute;inset:0;overflow:hidden;background:#050404;
  --scan:.7;--vig:1;
  --glyph-warm:#ffeeca;
  --glyph-warm-dim:rgba(255,238,202,.52);
  --glyph-warm-faint:rgba(255,238,202,.28);
  --glyph-red:#801624;
  --glyph-rule:rgba(255,238,202,.14)}
.glyph--fixed{position:fixed;z-index:0}

.glyph__field{position:absolute;inset:0;width:100%;height:100%;
  image-rendering:pixelated;display:block}

/* glowMode:'lowres': zwei kleine Canvas-Ebenen, per CSS auf volle Größe
   gestreckt und vom Compositor additiv über das Feld gelegt */
.glyph--glow{isolation:isolate}
.glyph__glow{position:absolute;inset:0;width:100%;height:100%;display:block;
  pointer-events:none;mix-blend-mode:plus-lighter;image-rendering:auto}
@supports not (mix-blend-mode:plus-lighter){.glyph__glow{mix-blend-mode:screen}}

.glyph__scrim{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(112% 78% at 50% 50%, transparent 0%, transparent 46%, rgba(5,4,4,.62) 88%, rgba(5,4,4,.88) 100%),
    linear-gradient(to bottom, rgba(5,4,4,.7) 0%, transparent 14%, transparent 86%, rgba(5,4,4,.7) 100%)}

.glyph__crt{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,var(--scan)) 0px, rgba(0,0,0,var(--scan)) 1px,
      transparent 1px, transparent 3px),
    radial-gradient(126% 106% at 50% 50%, transparent 48%, rgba(0,0,0,var(--vig)) 100%)}
.glyph__crt::before{content:"";position:absolute;inset:-2px;border-radius:26px;
  box-shadow:inset 0 0 140px 34px rgba(0,0,0,calc(var(--vig) * .95)),
             inset 0 0 2px 1px rgba(255,238,202,.10)}

/* ---------- optional tuner (only rendered with { tuner:true }) ---------- */
.glyph__toggle{position:absolute;right:16px;bottom:16px;z-index:6;
  display:flex;align-items:center;gap:8px;padding:9px 14px;
  background:rgba(12,10,9,.72);backdrop-filter:blur(8px);
  border:1px solid var(--glyph-rule);border-radius:3px;cursor:pointer;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--glyph-warm-dim);transition:all .18s}
.glyph__toggle:hover,.glyph__toggle.on{color:var(--glyph-warm);border-color:var(--glyph-warm-faint)}
.glyph__toggle .led{width:6px;height:6px;border-radius:1px;background:var(--glyph-red)}
.glyph--fixed .glyph__toggle{position:fixed}

.glyph__tuner{position:absolute;right:16px;bottom:60px;z-index:6;width:282px;
  max-height:calc(100dvh - 140px);overflow-y:auto;
  background:rgba(10,8,8,.93);backdrop-filter:blur(14px);
  border:1px solid var(--glyph-rule);border-radius:4px;padding:16px 16px 12px;
  color:var(--glyph-warm);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s}
.glyph__tuner.on{opacity:1;transform:none;pointer-events:auto}
.glyph--fixed .glyph__tuner{position:fixed}
.glyph__tuner h2{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--glyph-warm-faint);
  padding-bottom:11px;margin:0 0 14px;border-bottom:1px solid var(--glyph-rule)}
.glyph__tuner .grp{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--glyph-warm-faint);margin:14px 0 7px}
.glyph__tuner .grp:first-child{margin-top:0}
.glyph__tuner .chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.glyph__tuner .chips button{padding:5px 9px;cursor:pointer;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--glyph-warm-dim);
  background:rgba(255,238,202,.06);border:1px solid var(--glyph-rule);border-radius:3px;
  transition:all .15s}
.glyph__tuner .chips button:hover{color:var(--glyph-warm)}
.glyph__tuner .chips button.on{background:rgba(128,22,36,.35);border-color:var(--glyph-red);color:#fff}
.glyph__tuner .ctl{margin-bottom:12px}
.glyph__tuner .ctl .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.glyph__tuner .ctl .top span{color:var(--glyph-warm-dim)}
.glyph__tuner .ctl .top b{font-weight:400;font-size:11px;color:var(--glyph-red)}
.glyph__tuner input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;
  background:rgba(255,238,202,.22);border-radius:2px;outline:none;display:block}
.glyph__tuner input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;
  border-radius:50%;background:var(--glyph-red);cursor:pointer}
.glyph__tuner input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;
  background:var(--glyph-red);cursor:pointer}
.glyph__tuner .out{margin-top:14px;padding-top:12px;border-top:1px solid var(--glyph-rule)}
.glyph__tuner .cap{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--glyph-warm-faint);margin-bottom:7px}
.glyph__tuner .code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;line-height:1.62;
  color:var(--glyph-warm);word-break:break-all;user-select:all;
  background:rgba(255,238,202,.05);border:1px solid var(--glyph-rule);border-radius:3px;padding:8px 9px}
.glyph__tuner .code .k{color:var(--glyph-warm-faint)}
.glyph__tuner .btns{display:flex;gap:7px;margin-top:9px}
.glyph__tuner .btns button{flex:1;padding:8px;cursor:pointer;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--glyph-warm-dim);
  background:rgba(255,238,202,.06);border:1px solid var(--glyph-rule);border-radius:3px;transition:all .16s}
.glyph__tuner .btns button:hover{color:var(--glyph-warm);border-color:var(--glyph-warm-faint)}

.glyph button:focus-visible,.glyph input:focus-visible{outline:2px solid var(--glyph-red);outline-offset:3px}

/* ---------- helles Theme: Ink-Glyphen auf Paper ---------- */
.glyph--light{background:#FAFAFA;--glyph-rule:rgba(17,17,17,.14)}
.glyph--light .glyph__scrim{background:
  radial-gradient(112% 78% at 50% 50%, transparent 0%, transparent 46%, rgba(250,250,250,.62) 88%, rgba(250,250,250,.88) 100%),
  linear-gradient(to bottom, rgba(250,250,250,.7) 0%, transparent 14%, transparent 86%, rgba(250,250,250,.7) 100%)}
.glyph--light .glyph__crt{background:
  repeating-linear-gradient(to bottom,
    rgba(17,17,17,calc(var(--scan) * .10)) 0px, rgba(17,17,17,calc(var(--scan) * .10)) 1px,
    transparent 1px, transparent 3px),
  radial-gradient(126% 106% at 50% 50%, transparent 48%, rgba(250,250,250,var(--vig)) 100%)}
.glyph--light .glyph__crt::before{box-shadow:inset 0 0 140px 34px rgba(250,250,250,calc(var(--vig) * .9)),
  inset 0 0 2px 1px rgba(17,17,17,.06)}
@media (max-width:720px){
  .glyph__tuner{right:12px;left:12px;width:auto;bottom:56px;max-height:64dvh}
  .glyph__toggle{right:12px;bottom:12px}
  /* Vignette und Scrim deutlich zurücknehmen: auf kleinen Screens sollen
     die Glyphen rund um die 404 sichtbar bleiben */
  .glyph__scrim{background:
    radial-gradient(130% 96% at 50% 50%, transparent 0%, transparent 60%, rgba(5,4,4,.42) 94%, rgba(5,4,4,.7) 100%),
    linear-gradient(to bottom, rgba(5,4,4,.5) 0%, transparent 10%, transparent 88%, rgba(5,4,4,.55) 100%)}
  .glyph__crt{background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,var(--scan)) 0px, rgba(0,0,0,var(--scan)) 1px,
      transparent 1px, transparent 3px),
    radial-gradient(150% 125% at 50% 50%, transparent 64%, rgba(0,0,0,calc(var(--vig) * .75)) 100%)}
  .glyph__crt::before{box-shadow:inset 0 0 60px 10px rgba(0,0,0,calc(var(--vig) * .55)),
             inset 0 0 2px 1px rgba(255,238,202,.10)}
  .glyph--light .glyph__scrim{background:
    radial-gradient(130% 96% at 50% 50%, transparent 0%, transparent 60%, rgba(250,250,250,.42) 94%, rgba(250,250,250,.7) 100%),
    linear-gradient(to bottom, rgba(250,250,250,.5) 0%, transparent 10%, transparent 88%, rgba(250,250,250,.55) 100%)}
  .glyph--light .glyph__crt{background:
    repeating-linear-gradient(to bottom,
      rgba(17,17,17,calc(var(--scan) * .10)) 0px, rgba(17,17,17,calc(var(--scan) * .10)) 1px,
      transparent 1px, transparent 3px),
    radial-gradient(150% 125% at 50% 50%, transparent 64%, rgba(250,250,250,calc(var(--vig) * .75)) 100%)}
  .glyph--light .glyph__crt::before{box-shadow:inset 0 0 60px 10px rgba(250,250,250,calc(var(--vig) * .55)),
    inset 0 0 2px 1px rgba(17,17,17,.06)}
}