/* ==========================================================================
   swisscann tec AG Kundenportal, Design-Tokens „Cinema" v1.1 (Lieferkette)
   Einbinden vor allen anderen Stylesheets.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/static/fonts/Archivo-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/Newsreader-Italic-Variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Farben: Basis */
  --c-saal: #120C0C;
  --c-loge: #1C1415;
  --c-rang: #271C1D;
  --c-vorhang: #9E0504;
  --c-glut: #F2685E;
  --c-projektor: #EFE7E1;
  --c-nitrat: #8E9396;
  --c-papier: #FAEDED;
  --c-schwarz: #000000;           /* nur Letterbox und Untertitel */

  /* Farben: Status */
  --c-status-frei: #7FB08A;
  --c-status-quarantaene: #D9A441;
  --c-status-gesperrt: #F2685E;
  --c-status-info: #9DB4C7;

  /* Farben: Spuren im Schnittplatz */
  --c-spur-ware: #EFE7E1;
  --c-spur-dokumente: #9DB4C7;
  --c-spur-qualitaet: #7FB08A;
  --c-spur-klima: #D9A441;
  --c-spur-zoll: #C9A3D9;

  /* Weltbühne */
  --c-land: rgba(239, 231, 225, .16);
  --c-route: rgba(242, 104, 94, .25);
  --c-impuls: #FFD2C8;

  /* Linien und Licht */
  --line-soft: rgba(239, 231, 225, .06);
  --line: rgba(239, 231, 225, .18);
  --edge-1: inset 0 1px 0 rgba(239, 231, 225, .04);
  --edge-2: inset 0 1px 0 rgba(239, 231, 225, .07);
  --glow-vorhang: inset 0 0 0 1px rgba(242, 104, 94, .45), 0 0 24px -6px rgba(158, 5, 4, .9);
  --glow-vorhang-hover: inset 0 0 0 1px rgba(242, 104, 94, .7), 0 0 32px -4px rgba(158, 5, 4, 1);
  --vignette: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .35) 100%);
  --projektorkegel: radial-gradient(ellipse 60% 50% at 20% 0%, rgba(255, 214, 190, .07), transparent 70%);

  /* Typografie */
  --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-credit: "Newsreader", Georgia, "Times New Roman", serif;

  --t-display: 4.5rem;
  --t-h1: 3rem;
  --t-h2: 2.25rem;
  --t-h3: 1.5rem;
  --t-lead: 1.3125rem;
  --t-body: 1rem;
  --t-small: .875rem;
  --t-micro: .75rem;

  --lh-display: 1;
  --lh-h1: 1.05;
  --lh-h2: 1.1;
  --lh-h3: 1.2;
  --lh-lead: 1.45;
  --lh-body: 1.55;
  --lh-small: 1.45;

  --w-titel: 125;     /* wdth-Achse Display */
  --w-h1: 115;
  --w-h2: 110;
  --w-normal: 100;
  --w-dicht: 88;      /* Tabellen, Metadaten */
  --w-start: 62;      /* Startwert Titel-Aufzug */

  /* Abstände (4-px-Basis) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;

  /* Raster */
  --grid-cols: 12;
  --grid-gap: 24px;
  --page-pad: clamp(20px, 4vw, 64px);
  --page-max: 1440px;
  --nav-w: 72px;
  --nav-w-open: 248px;
  --measure: 68ch;

  /* Ecken nach Hierarchie */
  --r-leinwand: 2px;
  --r-panel: 6px;
  --r-control: 10px;
  --r-pill: 999px;

  /* Größen */
  --control-h: 44px;
  --row-h: 52px;
  --cinemascope: 2.39;
  --letterbox-h: max(0px, calc((100svh - 100vw / 2.39) / 2));

  /* Motion: Dauern */
  --d-schnitt: 120ms;
  --d-blende: 240ms;
  --d-szene: 480ms;
  --d-klappe: 360ms;
  --d-kamera: 1800ms;
  --d-vorspann: 1600ms;
  --d-abspann: 22s;
  --takt: 1000ms;
  --zyklus: 18s;

  /* Motion: Kurven */
  --e-kamera: cubic-bezier(.22, 1, .36, 1);
  --e-vorhang: cubic-bezier(.65, 0, .35, 1);
  --e-schnitt: cubic-bezier(.4, 0, 1, 1);
  --e-fokus: cubic-bezier(.33, 1, .68, 1);
  --e-klappe: cubic-bezier(.7, 0, .84, 0);

  /* Ebenen */
  --z-grain: 900;
  --z-letterbox: 800;
  --z-toast: 700;
  --z-dialog: 600;
  --z-nav: 100;
}

@media (max-width: 640px) {
  :root {
    --t-display: 3rem;
    --t-h1: 2.25rem;
    --t-h2: 1.75rem;
  }
}

/* Reduzierte Bewegung: System oder Kontoeinstellung */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-szene: 120ms;
    --d-vorspann: 1ms;
    --d-blende: 120ms;
  }
}
:root[data-motion="reduced"] {
  --d-szene: 120ms;
  --d-vorspann: 1ms;
  --d-blende: 120ms;
}

/* ==========================================================================
   Material-Utilities (klein genug, um hier zu leben)
   ========================================================================== */

/* Filmkorn: <div class="grain" aria-hidden="true"></div> einmal in base.html */
.grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: sc-grain 1s steps(6) infinite;
}
@keyframes sc-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -4%); }
  60%  { transform: translate(-4%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* Sucher-Fokus: vier Eckwinkel statt Ring */
.sucher { position: relative; }
.sucher:focus-visible { outline: none; }
.sucher:focus-visible::after,
.sucher[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: -6px;
  pointer-events: none;
  --l: 12px;   /* Schenkellänge */
  --b: 2px;    /* Strichstärke */
  --c: var(--c-glut);
  background:
    linear-gradient(var(--c) 0 0) top left    / var(--l) var(--b),
    linear-gradient(var(--c) 0 0) top left    / var(--b) var(--l),
    linear-gradient(var(--c) 0 0) top right   / var(--l) var(--b),
    linear-gradient(var(--c) 0 0) top right   / var(--b) var(--l),
    linear-gradient(var(--c) 0 0) bottom left / var(--l) var(--b),
    linear-gradient(var(--c) 0 0) bottom left / var(--b) var(--l),
    linear-gradient(var(--c) 0 0) bottom right/ var(--l) var(--b),
    linear-gradient(var(--c) 0 0) bottom right/ var(--b) var(--l);
  background-repeat: no-repeat;
}

/* Perforation für Filmstreifen */
.perforation {
  --loch: 10px;
  --abstand: 22px;
  background-image:
    radial-gradient(circle at center, var(--c-saal) calc(var(--loch) / 2), transparent calc(var(--loch) / 2 + .5px)),
    radial-gradient(circle at center, var(--c-saal) calc(var(--loch) / 2), transparent calc(var(--loch) / 2 + .5px));
  background-size: var(--abstand) var(--abstand), var(--abstand) var(--abstand);
  background-repeat: repeat-x, repeat-x;
  background-position: 0 6px, 0 calc(100% - 6px);
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}
:root[data-motion="reduced"] .grain { animation: none; }