/* Weltkarte als angeheftete Buehne hinter den ersten drei Abschnitten der
   Startseite, siehe gridmap.js.

   .gridmap-stage
     .gridmap-pin      sticky, ein Fenster hoch: die Karte
     .gridmap-flow     Hero, "The economics", "What changes" - um ein Fenster
                       nach oben gezogen, liegen ueber der Karte und laufen
                       beim Scrollen ueber sie hinweg
   Mit dem Ende der Buehne ("Who it is for") schiebt der naechste Abschnitt die
   Karte nach oben hinaus; gridmap.js hat sie bis dahin auf Seitengrund
   abgedunkelt, sodass davon nichts zu sehen ist.

   Ohne JavaScript (kein html.w-mod-js), wenn Karte oder Standorte nicht laden
   (html.gridmap-off), mit prefers-reduced-motion und im Druck wird nicht
   angeheftet: die Karte ist dann ein stehender Hintergrund des Heros, die
   Abschnitte danach behalten ihren Grund. 100svh statt vh/dvh: auf Telefonen
   bleibt die Karte so oberhalb der Adressleiste und wird bei deren Ein- und
   Ausblenden nicht neu gezeichnet. */

.gridmap-stage{position:relative}
.gridmap-pin{position:absolute;top:0;left:0;right:0;height:100vh;height:100svh;overflow:hidden;background:#000212}
.gridmap-flow{position:relative;z-index:1}
/* Weicher unterer Rand der Karte, auch ohne JavaScript */
.gridmap-pin::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10%;pointer-events:none;
  background:linear-gradient(rgba(0,2,18,0),#000212)}
@media screen and (prefers-reduced-motion:no-preference){
  /* Hoehe der Karte und Rueckzug des Inhalts muessen dieselbe Einheit tragen */
  .w-mod-js:not(.gridmap-off) .gridmap-pin{position:sticky}
  .w-mod-js:not(.gridmap-off) .gridmap-flow{margin-top:-100vh;margin-top:-100svh}
  /* Abschnitte auf der Buehne lassen die Karte durch; ihre Glow-Blobs aus dem
     Webflow-Stylesheet (unter 1440 px gekachelt) entfallen, die Karte leuchtet selbst */
  .w-mod-js:not(.gridmap-off) .gridmap-flow .service-two-about-section{background-color:transparent}
  .w-mod-js:not(.gridmap-off) .gridmap-flow .service-two-wedo-section,
  .w-mod-js:not(.gridmap-off) .gridmap-flow .service-two-glow-wrapper{background-image:none}
}
/* Der Hero besitzt das erste Fenster ganz, darunter faengt erst "The economics" an */
@media (min-width:992px){
  .w-mod-js .gridmap-flow .home-three-hero-section,.w-mod-js .gridmap-flow .home-three-hero-wrapper{max-height:none}
  .w-mod-js .gridmap-flow .home-three-hero-wrapper{min-height:calc(100vh - 110px);min-height:calc(100svh - 110px)}
  /* Ohne JavaScript bleibt der Hero bei Webflows 780 px; die Karte endet mit ihm */
  html:not(.w-mod-js) .gridmap-pin{height:780px}
}

.gridmap{position:absolute;inset:0;overflow:hidden}
/* Fallback ohne JavaScript: die Karte so gelegt wie das Skript sie legt
   (260 Grad Breite, Laengengrad -50 in der Mitte, Oberkante unter der Navigation) */
.gridmap>img{position:absolute;left:50%;top:0;width:138.5%;height:auto;max-width:none;transform:translate(-36.1%,0)}
@media (min-width:992px) and (max-aspect-ratio:159/100){
  .gridmap>img{width:189.5%;transform:translate(-37.5%,0)}
}
.gridmap>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Zwei Lagen ueber dem Canvas (gridmap.js legt sie an): Ruhe unter der
   Headline und der Schleier (opacity setzt das Skript) */
.gridmap-shade,.gridmap-dim{position:absolute;inset:0;pointer-events:none}
.gridmap-shade{background:radial-gradient(ellipse 48% 42% at 22% 38%,rgba(0,2,18,.72),rgba(0,2,18,0) 72%)}
.gridmap-dim{background:#000212;opacity:0;will-change:opacity}

/* Unter 992 px steht der Text zentriert ueber die ganze Breite und die Karte
   fuellt das Fenster von der Navigation abwaerts (Tablet: der Atlantik, Telefon:
   Europa hinter der Headline). Der Text liegt damit ueberall auf der Karte,
   deshalb ist die Ruhe-Lage hier ein gleichmaessiger Schleier statt der
   Ellipse; unter dem Button bekommt der Hero 200 px Luft, in denen nur die
   Karte zu sehen ist. Das Fallback-Bild liegt so wie das Skript es legt. */
@media (max-width:991px){
  .gridmap-flow .home-three-hero-section,.gridmap-flow .home-three-hero-wrapper{max-height:none}
  .gridmap-flow .home-three-hero-wrapper{padding-bottom:200px}
  .gridmap>img{width:327%;transform:translate(-44.4%,-7.8%)}
  .gridmap-shade{background:linear-gradient(rgba(0,2,18,.5),rgba(0,2,18,.5) 60%,rgba(0,2,18,.3) 100%)}
}
@media (max-width:599px){
  .gridmap>img{width:600%;transform:translate(-48.6%,-10.2%)}
}
@media print{.gridmap-pin{display:none}}