/* ==========================================================================
   swisscannTrust (Kundenportal swisscann tec AG) — base.css
   Reset, Typografie, Material (Filmkorn, Vignette, Letterbox), Sucher-Fokus,
   Szenenwechsel, reduzierte Bewegung. Nach STYLEGUIDE.md Abschnitte 3, 5, 6, 7.2.
   Einbinden NACH tokens.css.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:auto}
body{
  background:var(--c-saal);color:var(--c-projektor);
  font-family:var(--f-sans);font-size:var(--t-body);line-height:var(--lh-body);
  font-stretch:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100svh;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--c-glut);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img,svg{display:block;max-width:100%}
p{margin:0 0 1em}

/* Satzskala (STYLEGUIDE 3.2): Breitenachse als Kino-Werkzeug */
h1,h2,h3{margin:0;font-weight:400;letter-spacing:0;text-wrap:balance}
.t-display{font-size:var(--t-display);line-height:var(--lh-display);font-weight:300;font-stretch:125%;letter-spacing:.01em}
h1,.t-h1{font-size:var(--t-h1);line-height:var(--lh-h1);font-weight:350;font-stretch:115%}
h2,.t-h2{font-size:var(--t-h2);line-height:var(--lh-h2);font-weight:400;font-stretch:110%}
h3,.t-h3{font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:500;font-stretch:100%}
.t-lead{font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:350;color:var(--c-nitrat);max-width:var(--measure)}
.t-small{font-size:var(--t-small);line-height:var(--lh-small);font-stretch:88%;font-weight:450}
.t-micro{font-size:var(--t-micro);line-height:1.35;font-stretch:88%;font-weight:500}
.credit{font-family:var(--f-credit);font-style:italic}      /* Newsreader: Abspann, Zitate, Verantwortliche */
.tnum{font-variant-numeric:tabular-nums}
.measure{max-width:var(--measure)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Material (STYLEGUIDE 5) --------------------------------------------- */
/* .grain und .sucher kommen aus tokens.css */
.vignette{position:fixed;inset:0;z-index:850;pointer-events:none;background:var(--vignette)}
.letterbox__bar{position:fixed;left:0;right:0;height:var(--letterbox-h);background:var(--c-schwarz);z-index:var(--z-letterbox);pointer-events:none;will-change:transform}
.letterbox__bar--top{top:0;transform-origin:top}
.letterbox__bar--bottom{bottom:0;transform-origin:bottom}
.projektorkegel{position:absolute;inset:-10% -10% auto -10%;height:70vh;background:var(--projektorkegel);pointer-events:none;z-index:0}

/* Ebenen: Licht statt Schatten (STYLEGUIDE 4.5) */
.ebene-1{background:var(--c-loge);box-shadow:var(--edge-1)}
.ebene-2{background:var(--c-rang);box-shadow:var(--edge-2)}

/* Szenenwechsel als Progressive Enhancement (STYLEGUIDE 7.2) ------------ */
@view-transition{navigation:auto}
::view-transition-old(root){animation:sc-fade-out var(--d-blende) var(--e-schnitt) both}
::view-transition-new(root){animation:sc-fade-in var(--d-szene) var(--e-kamera) both}
@keyframes sc-fade-out{to{opacity:0}}
@keyframes sc-fade-in{from{opacity:0}}

/* Reduzierte Bewegung: System oder Kontoeinstellung (STYLEGUIDE 6.1/11) --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
}
:root[data-motion="reduced"] *,:root[data-motion="reduced"] *::before,:root[data-motion="reduced"] *::after{
  animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important
}

/* Druck/PDF: helle Papier-Regel bleibt (STYLEGUIDE 2.1) ------------------ */
@media print{
  body{background:#fff;color:#111}
  .grain,.vignette,.letterbox__bar,.projektorkegel,.nav{display:none!important}
}