/* ==========================================================================
   Pandorra Engines — Scroll-Inszenierung (08.08.2026)

   Additiv zum Inline-<style> der Seiten: hier steht NUR, was mit Bewegung und
   Kulissen zu tun hat. Gemeinsame Datei für alle Seiten — eine Pflegestelle.

   Zwei Grundregeln, beide hart verdrahtet:
     1. Der versteckte Startzustand gilt ausschliesslich unter "html.js".
        Die Klasse setzt ein Inline-Script im <head>. Ohne JavaScript gibt es
        keine Klasse — und die Seite ist vollstaendig lesbar. (Der Klassiker
        bei Scroll-Animationen ist die weisse Seite ohne JS.)
     2. "prefers-reduced-motion: reduce" schaltet ganz unten alles ab.
   ========================================================================== */

/* --- 1. Hereinkommen beim Scrollen ---------------------------------------- */

html.js [data-reveal]{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i, 0) * 70ms);   /* Staffelung, von effekte.js gesetzt */
  will-change:opacity, transform;
}
html.js [data-reveal="links"]     {transform:translateX(-28px)}
html.js [data-reveal="rechts"]    {transform:translateX(28px)}
html.js [data-reveal="skalieren"] {transform:scale(.96)}
html.js [data-reveal].ist-da{opacity:1;transform:none;will-change:auto}

/* --- 2. Kopfzeile: kompakter beim Scrollen + Lesefortschritt --------------- */

header{transition:background-color .25s ease, box-shadow .25s ease}
header .nav,
header .nav img{transition:height .25s ease}
header.klein{background:rgba(255,255,255,.9);box-shadow:0 6px 24px rgba(0,0,0,.07)}
header.klein .nav{height:58px}
header.klein .nav img{height:44px}

/* Lesefortschritt: 3px unter der Kopfzeile. scaleX statt width — dann rechnet
   der Browser pro Bild kein Layout neu. */
#fortschritt{
  position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:var(--red);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;pointer-events:none;
}

@media(max-width:620px){
  /* Am Handy bricht das Menue um, die Leiste hat dort keine feste Hoehe —
     ein Kompaktzustand wuerde die Menuepunkte zerquetschen. */
  header.klein .nav{height:auto}
  header.klein .nav img{height:38px}
}

/* --- 3. Kulissen, ueber die gescrollt wird -------------------------------- */
/*
   Technik: "position:sticky" statt "background-attachment:fixed" (das ruckelt
   und zoomt auf iOS-Safari) und statt "position:fixed" in einem geclippten
   Container (clip-path/transform machen den Container zum Bezugsrahmen — dann
   scrollt das Layer mit und der ganze Effekt ist weg).
   Die Kulisse klebt bei top:0, solange ihr Band durch das Bild laeuft, und
   nimmt durch die negative Aussenkante keinen Platz ein. "overflow:clip"
   schneidet sie am Bandrand ab, OHNE einen Scroll-Container zu erzeugen —
   mit "overflow:hidden" waere das Kleben sofort kaputt.
*/
.band{position:relative;overflow:hidden;overflow:clip}
.band > .kulisse{
  position:sticky;top:0;height:100vh;margin-bottom:-100vh;
  z-index:0;pointer-events:none;overflow:hidden;
}
.band > .wrap{position:relative;z-index:1}

/* Browser ohne overflow:clip (dort bricht sticky): Kulisse steht still im Band.
   Kein Effekt, aber auch kein Springen. Setzt effekte.js. */
html.kein-fix .band > .kulisse{position:absolute;inset:0;height:100%;margin-bottom:0}

/* Feines technisches Raster, zu den Raendern hin ausgeblendet */
.kulisse .raster{
  position:absolute;inset:-2px;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 45%, #000 30%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 45%, #000 30%, transparent 78%);
}
/* Logo-Rad in der Kulisse; den Winkel dreht effekte.js aus der Scrollposition. */
.kulisse .rad{
  position:absolute;right:-190px;top:50%;width:820px;height:820px;
  transform:translateY(-50%) rotate(var(--winkel, 0deg));
  opacity:.10;
}
/* Auch das Rad im Hero folgt jetzt dem Scrollen statt stur zu kreisen. */
html.js .emblem{animation:none;transform:translateY(-50%) rotate(var(--winkel, 0deg))}

/* Band A — dunkel. Umgefaerbt wird ueber die vorhandenen Variablen, damit alle
   Bestandsregeln (Karten, Linien, Zitat, Schaltflaechen) von selbst mitziehen. */
.band-dunkel{
  --bg:#15161a; --bg2:#1d1f24; --line:#343740; --text:#f4f5f7; --muted:#b8bcc4;
  --black:#f4f5f7; --red:#ff5a60; --red2:#ff8085;
  background:#15161a;color:var(--text);border-top:1px solid #2a2d34;border-bottom:1px solid #2a2d34;
}
/* Schaltflaechen behalten das dunkle Markenrot: Weiss auf #d61a23 sind 5,21:1,
   auf dem aufgehellten Rot waeren es nur noch rund 3:1. */
.band-dunkel .cta{background:#d61a23;color:#fff}
.band-dunkel .cta:hover{background:#b3141c}
.band-dunkel .kulisse{
  background:
    radial-gradient(1100px 620px at 76% 16%, rgba(214,26,35,.22), transparent 62%),
    radial-gradient(820px 560px at 10% 92%, rgba(214,26,35,.10), transparent 60%),
    #15161a;
}
/* Karten im dunklen Band bewusst DECKEND (keine weissen Halbtransparenzen):
   sonst rechnet jede Kontrastmessung — und jedes Auge — mit dem falschen Grund. */
.band-dunkel .step,
.band-dunkel .card,
.band-dunkel .zahl,
.band-dunkel .tier,
.band-dunkel .hinweis,
.band-dunkel .box,
.band-dunkel .film-rahmen,
.band-dunkel .phone{background:#1d1f24;border-color:#343740}
.band-dunkel .ico{background:#262931;border-color:#3a3e47}

/* Band B — hell. Ruhiger Gegenpol, gleiche Mechanik. */
.band-hell{background:var(--bg2)}
.band-hell .kulisse{background:linear-gradient(180deg,#f8f8f9 0%,#fff 55%,#f6f6f7 100%)}
.band-hell .kulisse .raster{
  background-image:linear-gradient(rgba(29,29,31,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(29,29,31,.05) 1px, transparent 1px);
}
.band-hell .kulisse .rad{opacity:.05}

@media(max-width:820px){
  /* Am Handy kostet jeder Scroll-Effekt Akku und bringt am wenigsten:
     Kulisse bleibt stehen, das grosse Rad entfaellt. */
  .band > .kulisse{position:absolute;inset:0;height:100%;margin-bottom:0}
  .kulisse .rad{display:none}
  .kulisse .raster{background-size:52px 52px}
}

/* --- 4. Feinschliff an vorhandenen Bausteinen ----------------------------- */

.card{transition:box-shadow .25s ease, transform .25s ease, border-top-color .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.12)}
.cta{transition:background-color .2s ease, transform .08s ease, color .2s ease, border-color .2s ease}
.cta:active{transform:translateY(1px)}

/* Tastaturbedienung war bisher unsichtbar — jetzt ein klarer Fokusrahmen. */
a:focus-visible,
button:focus-visible,
video:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}

/* --- 5. Wer weniger Bewegung will, bekommt keine ------------------------- */

@media(prefers-reduced-motion: reduce){
  html.js [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  html.js .emblem,
  .kulisse .rad{transform:translateY(-50%) !important;animation:none !important}
  header,header .nav,header .nav img,.card,.cta,#fortschritt{transition:none !important}
  .band > .kulisse{position:absolute;inset:0;height:100%;margin-bottom:0}
  html{scroll-behavior:auto}
}