/* ======================================================================
   Die Schrift des Heros (Vorschau 5a-5d) und der Hero als Startseite (5d)
   Seit 1. Okt. 2026 traegt die Startseite den Aufbau aus 5d (Text und Logos
   erscheinen); Buehne und Schimmer nur die Vorschau 5d.
   ----------------------------------------------------------------------
   Anordnung wie gehabt: Text links, Grafik rechts (520 x 304).
   Nur die sechs Schriftstufen der Seite (44 / 30 / 20 / 17 / 15 / 14).
   - Die Ueberschrift auf der obersten Stufe 44 px, als h1. Sie bricht auf
     dem Desktop immer gleich:
       Integrated Corporate / Carbon Accounting (ICCA)
     Dafuer darf die Textspalte bis 600 px breit werden und ist ab
     1280 px nie schmaler als die zweite Zeile (551 px).
   - Die Unterzeile 20 px, normal statt fett. Die Haken 15 px.
   Am Telefon (bis 760 px) steht der Hero ohne Grafik, nur Text und Knoepfe
   (ganz unten in dieser Datei). Seit 28.9. traegt die Startseite den Hero
   von 5b.
   ====================================================================== */

/* ---------- Schrift (5a-5d), ab 761 px */
@media (min-width:761px){
  body.casi-hero-schrift .elementor-widget-heading.casi-hero-kicker .elementor-heading-title{
    font-size:44px;line-height:1.08;letter-spacing:-.005em;text-wrap:balance}
  body.casi-hero-schrift .casi-hero-grafik > .e-con-inner > .casi-hero-kicker > .elementor-widget-container{margin-bottom:20px}
  body.casi-hero-schrift .elementor-widget-heading.casi-hero-titel .elementor-heading-title{font-weight:400}
  body.casi-hero-schrift .casi-hero-grafik .casi-haken p{font-size:15px}
}
/* das C der Start-Animation so gross wie in den 4er-Vorschlaegen (Grafik 376 px
   hoch); die fertige Grafik bleibt 520 x 304 (casi-herofluss.js liest --hf-c-bezug) */
body.casi-hero-schrift .hf{--hf-c-bezug:376px}
@media (min-width:1280px){
  body.casi-hero-schrift .casi-hero.casi-hero-grafik > .e-con-inner{
    grid-template-columns:minmax(0,600px) 520px;justify-content:space-between;column-gap:clamp(40px,5vw,96px)}
}

/* ---------- 5d Buehne: Kopfzeile, Hero und Logoband fuellen auf grossen
   Bildschirmen genau den ersten Bildschirm, der Hero steht mittig darin.
   Ohne Linie (ab 28.9. ganz entfernt). */
@media (min-width:1280px){
  body.casi-hero-buehne .casi-hero.casi-hero-grafik{min-height:calc(100svh - 77px - 204px);justify-content:center;--justify-content:center}
}
/* ---------- 5d Aufbau (ab 761 px): der Text des Heros steigt gleich mit dem
   ersten Bild auf, das gemalt wird (0-0,81 s): Ueberschrift, Unterzeile,
   Haken, Knoepfe, je 20 ms versetzt, jeder Block 0,75 s (seit 1.10. ohne
   Wartezeit; das Tempo kurz verdoppelt, dann wieder wie zuvor). Er steigt 18 px aus einer unsichtbaren Kante
   an seinem Platz auf (die Kante schneidet ab, was noch darunter liegt) und
   blendet dabei ein -- weich auslaufend. Die Logos im Band erscheinen genauso
   und im selben Bild (unten). Den Start gibt das Kopfskript in
   casi-hero-layouts.php: html.casi-auf-js (Text wartet unsichtbar), dann im
   ersten Bild html.casi-auf-los. Ohne Skript steht der Text einfach da.
   Die Grafik hat ihren eigenen Aufbau. Am Telefon steht der Text wie auf der
   Live-Seite. */
@media (min-width:761px) and (prefers-reduced-motion:no-preference){
  html.casi-auf-js:not(.casi-auf-los) body.casi-hero-aufbau .casi-hero-grafik > .e-con-inner > .elementor-element:not(.casi-herografik-platz){opacity:0}
  html.casi-auf-los body.casi-hero-aufbau .casi-hero-grafik > .e-con-inner > .elementor-element:not(.casi-herografik-platz){
    animation:casi-text-steigt .75s cubic-bezier(.16,1,.3,1) 0s both}
  html.casi-auf-los body.casi-hero-aufbau .casi-hero-grafik > .e-con-inner > .elementor-element.casi-hero-titel:not(.casi-herografik-platz){animation-delay:.02s}
  html.casi-auf-los body.casi-hero-aufbau .casi-hero-grafik > .e-con-inner > .elementor-element.casi-haken:not(.casi-herografik-platz){animation-delay:.04s}
  html.casi-auf-los body.casi-hero-aufbau .casi-hero-grafik > .e-con-inner > .elementor-element.e-con:not(.casi-herografik-platz){animation-delay:.06s}
}
@keyframes casi-text-steigt{
  from{opacity:0;transform:translateY(18px);clip-path:inset(-24px -24px 18px -24px)}
  to{opacity:1;transform:none;clip-path:inset(-24px -24px -24px -24px)}}
/* Startseite: kommt man von einer anderen Seite zurueck, steht der Text gleich
   (wie die Grafik; Regel in casi-hero-layouts.php, Wunsch Gunther 1.10.) */
html[data-casi-einmal][data-casi-besuch="weiter"] body.casi-hero-aufbau .casi-hero-grafik > .e-con-inner > .elementor-element:not(.casi-herografik-platz){animation:none}

/* ---------- 5d Schimmer (nur Vorschau 5d, nicht auf der Startseite): sobald die Grafik steht, laeuft alle sechs Sekunden
   ein Glanz ueber das CO2-Ledger und danach, von oben nach unten versetzt,
   ueber die vier Berichte -- zwei weisse Striche im 45-Grad-Winkel, ein
   breiter und ein schmaler, mit harter Kante wie im Comic. Er zeigt, dass
   man die Kaesten anklicken kann. Er laeuft hinter Zeichen und Schrift
   durch, setzt beim Ueberfahren aus und entfaellt bei reduzierter Bewegung.
   casi-herofluss.js setzt .hf-fertig, wenn der Aufbau durch ist. */
body.casi-hero-schimmer .hf .hf-ledger,
body.casi-hero-schimmer .hf .hf-st{position:relative;overflow:hidden;isolation:isolate}
body.casi-hero-schimmer .hf .hf-ledger > .hf-zeichen,
body.casi-hero-schimmer .hf .hf-ledger > .hf-marke,
body.casi-hero-schimmer .hf .hf-ledger > .hf-titel,
body.casi-hero-schimmer .hf .hf-ledger > .hf-text,
body.casi-hero-schimmer .hf .hf-st > .hf-marke,
body.casi-hero-schimmer .hf .hf-st > .hf-zeichen,
body.casi-hero-schimmer .hf .hf-st > .hf-text{position:relative;z-index:1}
body.casi-hero-schimmer .hf.hf-fertig .hf-st::after,
body.casi-hero-schimmer .hf.hf-fertig .hf-ledger::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-110px;width:30px;
  background:linear-gradient(90deg,#fff 0 18px,transparent 18px 23px,#fff 23px 28px,transparent 28px);
  transform:skewX(-45deg);pointer-events:none;z-index:0;
  animation:casi-schimmer 6s cubic-bezier(.5,0,.3,1) .25s infinite}
body.casi-hero-schimmer .hf.hf-fertig .hf-st:nth-child(1)::after{animation-delay:.55s}
body.casi-hero-schimmer .hf.hf-fertig .hf-st:nth-child(2)::after{animation-delay:.67s}
body.casi-hero-schimmer .hf.hf-fertig .hf-st:nth-child(3)::after{animation-delay:.79s}
body.casi-hero-schimmer .hf.hf-fertig .hf-st:nth-child(4)::after{animation-delay:.91s}
@keyframes casi-schimmer{0%{left:-110px}13%{left:calc(100% + 80px)}100%{left:calc(100% + 80px)}}
body.casi-hero-schimmer .hf .hf-ledger:hover::after,
body.casi-hero-schimmer .hf .hf-st:hover::after,
body.casi-hero-schimmer .hf .hf-st:focus-visible::after,
body.casi-hero-schimmer .hf .hf-ledger:focus-visible::after{opacity:0}
@media (prefers-reduced-motion:reduce){
  body.casi-hero-schimmer .hf.hf-fertig .hf-ledger::after,
  body.casi-hero-schimmer .hf.hf-fertig .hf-st::after{animation:none;opacity:0}
}

/* ---------- 5d: die Logos im Band erscheinen (Skript in casi-hero-layouts.php)
   -- mit demselben Auftritt wie der Text des Heros und zugleich mit ihm, von
   links nach rechts um je 20 ms versetzt. Ein Logo, das noch laedt, kommt,
   sobald es da ist (img.lb-da). Wie der Text erst ab 761 px. */
@media (min-width:761px){
  html.casi-lb-js body.casi-hero-aufbau .laufband .zelle img:not(.lb-da){opacity:0}
  html.casi-lb-js body.casi-hero-aufbau .laufband .zelle img.lb-da{animation:casi-text-steigt .75s cubic-bezier(.16,1,.3,1) both}
}
/* ---------- Startseite und 5a-5d am Telefon (bis 760 px): Ueberschrift,
   Unterzeile, Haken und Knoepfe mit den Groessen und Abstaenden der bisherigen
   Startseite, ohne Grafik. (Die Grafik am Telefon ist seit 28.9. ganz weg;
   casi-herofluss.js wartet, solange sie versteckt ist, und tut nichts.) */
@media (max-width:760px){
  body.casi-hero-schrift .casi-hero.casi-hero-grafik.casi-hero-grafik{padding-top:84px !important;padding-bottom:46px !important}
  body.casi-hero-schrift .casi-hero-grafik > .e-con-inner > .elementor-element.casi-herografik-platz{display:none}
}

/* ---------- Eine Grenze fuer die ganze Seite: 1250 px (29.9.)
   Ab 1250 px zeigen die Karten auf ICCA Overview ihre Abbildungen, darunter
   "See figure". Genau dort steht jetzt auch die Grafik im Hero: ab 1250 px
   neben dem Text, darunter gar nicht (vorher hing sie zwischen 761 und
   1279 px unter dem Text -- auf dem iPad ein seltsames Bild). Zwischen 1250
   und 1279 px dasselbe Raster wie ab 1280, nur mit 40 px Luft, damit die
   Ueberschrift weiter in zwei Zeilen bricht. */
@media (max-width:1249px){
  body.casi-hero-schrift .casi-hero-grafik > .e-con-inner > .elementor-element.casi-herografik-platz{display:none}
}
@media (min-width:1250px) and (max-width:1279px){
  body.casi-hero-schrift .casi-hero.casi-hero-grafik > .e-con-inner{display:grid;
    grid-template-columns:minmax(0,600px) 520px;grid-template-rows:1fr auto auto auto auto 1fr;
    justify-content:space-between;column-gap:40px;align-items:start}
  body.casi-hero-schrift .casi-hero-grafik > .e-con-inner > .elementor-element.casi-herografik-platz{display:block;
    order:0;grid-column:2;grid-row:2 / 6;align-self:center;justify-self:end;width:100%;max-width:520px;margin:0}
  body.casi-hero-schrift .casi-herografik-platz > .elementor-widget-container,
  body.casi-hero-schrift .casi-herografik-platz .elementor-shortcode,
  body.casi-hero-schrift .casi-herografik-platz .hf-rahmen{height:auto}
  body.casi-hero-schrift .casi-herografik-platz .hf--vier{grid-template-rows:minmax(0,1fr)}
  body.casi-hero-schrift .casi-herografik-platz .hf--vier .hf-ein{grid-template-rows:repeat(3,minmax(0,1fr))}
  body.casi-hero-schrift .casi-herografik-platz .hf--vier .hf-mitte{display:grid}
  body.casi-hero-schrift .casi-herografik-platz .hf--vier .hf-ledger{flex:none;flex-direction:row}
  body.casi-hero-schrift .casi-herografik-platz .hf--vier.hf--f-knapp{height:auto;min-height:304px}
  body.casi-hero-buehne .casi-hero.casi-hero-grafik{min-height:calc(100svh - 77px - 204px);justify-content:center;--justify-content:center}
}