/* ══════════════════════════════════════════════════════════
   MotionSite — Startseite
   Hell, weit, ruhig. Alles bewegt sich nur über transform
   und opacity, damit die Grafikeinheit rechnet und nicht der
   Hauptprozessor.
   ══════════════════════════════════════════════════════════ */

/* ── Schrift ──────────────────────────────────────────────
   Liegt auf unserem eigenen Server, nicht bei Google. Sonst laedt der
   Browser jedes Besuchers die Datei bei fonts.gstatic.com und uebergibt
   dabei seine IP-Adresse dorthin. Das ist in Deutschland abgemahnt
   worden (LG Muenchen I, 20.01.2022, 3 O 17493/20).

   Instrument Sans ist eine Variable Font: eine Datei deckt den ganzen
   Bereich von 400 bis 600 ab, deshalb steht hier nur ein Schnitt statt
   drei. Getrennt nach Zeichenvorrat, damit ein deutscher Text die
   osteuropaeischen Zeichen gar nicht erst laedt.

   font-display: swap laesst sofort die Systemschrift stehen und tauscht
   nach. Nichts blitzt leer, nichts springt spaeter noch um. */
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/schrift/instrument-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/schrift/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --papier:#F5F4F1;
  --papier-warm:#EFEDE8;
  --tinte:#16161A;
  --tinte-weich:#5C5C63;
  --linie:#DEDBD4;
  --weiss:#FFFFFF;

  --breite:1180px;
  --rand:clamp(20px, 5vw, 56px);

  --f-klein:clamp(.82rem, .78rem + .2vw, .9rem);
  --f-text:clamp(1rem, .96rem + .3vw, 1.12rem);
  --f-gross:clamp(1.9rem, 1.2rem + 3.2vw, 3.4rem);
  --f-riesig:clamp(2.4rem, 1.3rem + 5vw, 5rem);
  --f-held:clamp(2.05rem, 1.1rem + 4.6vw, 4.4rem);
}

*,*::before,*::after{box-sizing:border-box}
/* Kein Kneifen, kein Doppeltippen: der Film lebt von einem festen
   Bildausschnitt. Wird gezoomt, verrutscht die klebende Buehne und der
   Text sitzt irgendwo im Bild. Schieben bleibt erlaubt, sonst koennte
   man nicht mehr scrollen. Der Zoom ueber Tastatur oder Menue bleibt
   unberuehrt, den kann eine Seite ohnehin nicht abstellen und Besucher
   mit schwachen Augen brauchen ihn. */
html{-webkit-text-size-adjust:100%;touch-action:pan-x pan-y}
body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:var(--f-text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--tinte);color:var(--weiss);padding:12px 18px;border-radius:0 0 8px 0;
}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--tinte);outline-offset:3px;border-radius:4px}

/* ── Kopf ─────────────────────────────────────────────── */
.kopf{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--rand);
  padding-top:max(16px, env(safe-area-inset-top));
  transition:opacity .4s ease, background .35s ease, box-shadow .35s ease;
}
.kopf.fest{
  background:rgba(245,244,241,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 var(--linie);
}
.marke{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.025em;font-size:1rem}
.marke img{height:22px;width:auto;aspect-ratio:1000/769.42}
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);font-size:var(--f-klein);font-weight:500}
.nav a{opacity:.72;transition:opacity .2s}
.nav a:hover{opacity:1}
.knopf-klein{
  opacity:1 !important;background:var(--tinte);color:var(--weiss);
  padding:9px 16px;border-radius:100px;font-weight:600;
}
@media (max-width:640px){
  .nav a:not(.knopf-klein){display:none}
}

/* ── Der Film ─────────────────────────────────────────── */
.film{position:relative}
.strecke{height:520svh}            /* reine Scrollstrecke fuer den Film */

.buehne{
  position:sticky;top:0;height:100svh;width:100%;
  overflow:hidden;background:var(--papier-warm);
}
.buehne .poster,
.buehne .clip{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.buehne .clip{opacity:0;transition:opacity .3s linear}
.buehne .clip.sichtbar{opacity:1}
/* Beim Wechsel von einem Filmteil zum naechsten wird hart geschnitten,
   nicht ueberblendet. Die Teile sind Bild an Bild aneinandergesetzt, der
   Schnitt ist deshalb unsichtbar. Eine Blende dagegen zeigt eine drittel
   Sekunde lang das eingefrorene letzte Bild des alten Teils ueber dem
   laufenden neuen, denn nur die aktive Flaeche wird weitergespult. Da die
   Teilgrenzen dicht vor den Haltestellen liegen, faellt genau das beim
   Ausrollen als Schlieren auf. Die Blende bleibt nur fuer das erste
   Auftauchen ueber dem Poster. */
.buehne .clip.schnitt{transition:none}

.schleier{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(245,244,241,.88) 0%,
      rgba(245,244,241,.50) 15%,
      rgba(245,244,241,.04) 36%,
      rgba(245,244,241,0)   56%,
      rgba(245,244,241,.30) 62%,
      rgba(245,244,241,.72) 82%,
      rgba(245,244,241,.94) 100%);
}

/* Die Textbeats liegen uebereinander und werden per Scroll geblendet */
.beats{
  position:absolute;inset:0;pointer-events:none;
  /* Beim Wischen ueber die Ueberschrift markiert iOS sonst den Text und
     legt eine blaue Flaeche ueber den halben Bildschirm, statt zu
     scrollen. Der Film ist zum Anschauen da, nicht zum Kopieren; die
     Fliesstexte weiter unten bleiben unberuehrt markierbar. */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
.beat .aktionen{pointer-events:auto}
.beat{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:18px;
  padding:0 calc(var(--rand) + 16px) clamp(64px,14vh,120px) var(--rand);
  max-width:min(760px,100%);
  opacity:0;will-change:opacity,transform;
}
.beat h1,.beat h2{font-size:var(--f-held)}
.unterzeile{
  font-size:clamp(.95rem,.9rem + .35vw,1.18rem);
  line-height:1.5;color:#33333A;max-width:44ch;
}
.aktionen{display:flex;align-items:center;gap:clamp(12px,2vw,20px);flex-wrap:wrap;margin-top:6px}
.knopf{
  background:var(--tinte);color:var(--weiss);
  padding:15px 26px;border-radius:100px;font-weight:600;font-size:.98rem;
  transition:transform .2s ease,opacity .2s ease;
}
.knopf:hover{transform:translateY(-1px);opacity:.9}
.link{font-weight:500;border-bottom:1px solid rgba(22,22,26,.28);padding-bottom:2px}

.hinweis{
  position:absolute;left:0;right:0;bottom:18px;text-align:center;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinte-weich);opacity:.65;pointer-events:none;
}

.fortschritt{
  position:fixed;right:10px;z-index:15;
  top:clamp(96px,14vh,150px);bottom:clamp(84px,12vh,130px);
  width:2px;border-radius:2px;background:rgba(22,22,26,.10);
  opacity:0;transition:opacity .4s ease;
}
.fortschritt.an{opacity:1}
.fortschritt i{display:block;width:2px;height:0;border-radius:2px;background:var(--tinte)}

/* ── Inhaltsblöcke ────────────────────────────────────── */
#inhalt{position:relative;z-index:2;background:var(--papier)}

.block{
  max-width:var(--breite);margin:0 auto;
  padding:clamp(72px,12vh,140px) var(--rand);
}
.block.hell{background:var(--papier-warm);max-width:none}
.block.hell > *{max-width:var(--breite);margin-left:auto;margin-right:auto}

.augenbraue{
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:600;color:var(--tinte-weich);margin-bottom:14px;
}
.gross{font-size:var(--f-gross);margin-bottom:clamp(28px,5vh,54px)}
.riesig{font-size:var(--f-riesig)}
.fliess{color:var(--tinte-weich);max-width:62ch;font-size:var(--f-text)}
.fliess + .fliess{margin-top:16px}
.mitte{margin-left:auto;margin-right:auto;text-align:center}

.raster-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:clamp(24px,4vw,46px)}
.raster-3 article{display:grid;gap:9px;align-content:start}
.raster-3 .nr{
  font-size:.72rem;font-weight:600;color:var(--tinte-weich);
  letter-spacing:.1em;font-variant-numeric:tabular-nums;
}
.raster-3 h3{font-size:1.16rem;letter-spacing:-.02em;line-height:1.25}
.raster-3 p{color:var(--tinte-weich);font-size:.98rem;line-height:1.55}

.raster-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,4vw,52px)}

.fussnote{font-size:.88rem;color:var(--tinte-weich);max-width:62ch}

.abschluss{text-align:center;padding-bottom:clamp(90px,15vh,170px)}

/* ── Die zwei Hände hinter dem Schluss ────────────────────
   Sie kommen beim Scrollen aufeinander zu und werden größer. Der
   Kasten reicht über die volle Fensterbreite, damit sie von den
   Bildschirmrändern kommen, und beschneidet sie dort auch: sonst
   entstünde eine Seitwärtsleiste. */
#kontakt{position:relative}
#kontakt > :not(.haende){position:relative;z-index:1}
.haende{
  position:absolute;top:0;bottom:0;left:50%;
  width:100vw;margin-left:-50vw;
  overflow:hidden;pointer-events:none;z-index:0;
}
.hand{
  position:absolute;
  /* Nicht mittig, sondern tiefer: so treffen sich die Fingerspitzen auf
     Höhe des Knopfes und nicht quer durch den Fließtext. */
  top:64%;
  /* translate statt transform: so gehört transform ganz dem Skript und
     die senkrechte Zentrierung kommt ihm nicht dazwischen. */
  translate:0 -50%;
  width:clamp(230px, 34vw, 560px);height:auto;
  will-change:transform,opacity;
}
.hand.links{left:0;transform-origin:left center}
.hand.rechts{right:0;transform-origin:right center}

/* Auf schmalen Schirmen passen zwei volle Hände nicht nebeneinander:
   sie überlappten sich in der Mitte zu einem Klumpen. Dort kleiner und
   weiter nach außen, dann liest man sie als zwei Hände, die von den
   Rändern hereingreifen. */
@media (max-width:700px){
  .hand{width:clamp(165px, 45vw, 240px)}
  .hand.links{left:-9%}
  .hand.rechts{right:-9%}
}
.abschluss .fliess{margin-top:22px}
.abschluss .aktionen{justify-content:center;margin-top:30px}

/* ── Die Flut ─────────────────────────────────────────
   Eigene Scrollstrecke, dazu eine Bühne, die stehen bleibt. Das Dunkel
   steigt wie Wasser von unten herein und nimmt den ganzen Schirm,
   danach kommt der Text. Solange man hier ist, sieht man nichts
   anderes: die Bühne deckt mit Papierton ab, was darunter läge. */
.flut{position:relative}
.flut-strecke{height:290svh}

.flut-buehne{
  position:sticky;top:0;height:100svh;width:100%;
  overflow:hidden;
  /* Warmer Ton, nicht Papier: dadurch gibt es unter der Figur aus dem
     Abschnitt darüber eine sichtbare Fläche, auf der sie steht. Genau
     dieser Ton wird beim Scrollen dunkler, das Skript färbt ihn um. */
  background:var(--papier-warm);
  display:grid;place-items:center;
}
/* preserveAspectRatio="none" im Markup: dadurch rechne ich im Skript in
   Hundertsteln und muss die Pixelgröße nie kennen. */
.flut-wasser{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;
}
.flut-wasser path{fill:var(--tinte)}

/* Die Eisdecke. Sie liegt über dem zusammengelaufenen Grund und blendet
   auf, sobald er dunkel ist. Bewusst NICHT deckend: später kommt eine
   Hand darunter, und die soll durch das Eis hindurch zu ahnen sein.
   Deshalb ist das Eis die durchscheinende Lage, nicht die Hand. */
.flut-eis{
  position:absolute;inset:0;
  background-image:image-set(url("/media/eis-quer.avif") type("image/avif"));
  background-size:cover;background-position:center;
  opacity:0;will-change:opacity,transform;
  pointer-events:none;
}
/* Sobald die Leinwand das Bild hat, übernimmt sie. Die Fläche darunter
   bleibt als Rückfalllinie stehen, falls das Bild nie ankommt: dann
   liegt eben Eis da, das sich nicht aufbrechen lässt. */
.flut-eis.ersetzt{display:none}

/* Der Text unter dem Eis. Er steht von Anfang an da, nur sieht man ihn
   nicht: darüber liegt eine deckende Fläche. Sichtbar wird er allein
   durch die Löcher, die man selbst hineinschlägt. */
.flut-worte{
  position:absolute;inset:0;z-index:0;
  display:grid;align-content:center;justify-items:center;
  padding:0 var(--rand);text-align:center;
  color:var(--papier);opacity:0;
  pointer-events:none;
}
.flut-worte .augenbraue{color:rgba(226,236,248,.6)}
.flut-worte .fliess{color:rgba(226,236,248,.76);max-width:44ch;margin-inline:auto}

.worte-raum{perspective:1500px;width:100%}
.worte-blatt{
  transform-style:preserve-3d;
  transform:rotateX(var(--kipp-x,0deg)) rotateY(var(--kipp-y,0deg));
  will-change:transform;
}
/* Die Tiefenstufen. Weit auseinander wirkt es wie ein Papptheater,
   deshalb nur wenige Zentimeter Unterschied. */
.lage-vorn{transform:translateZ(30px)}
.lage-mittel{transform:translateZ(13px)}
.lage-hinten{transform:translateZ(0)}

/* Die Überschrift bekommt eine gemalte Stärke statt einer flachen
   Füllung: viele kleine Schattenschritte in dieselbe Richtung stapeln
   sich zu einer Kante, wie bei geprägten Buchstaben. Das Skript dreht
   die Richtung dieser Kante mit dem Zeiger, dadurch scheint das Licht
   von wechselnder Seite zu kommen und der Buchstabe bekommt ein Volumen,
   das ein einzelner gemalter Schatten nicht hätte. */
.plastisch{
  margin-bottom:clamp(22px,3.6vh,40px);
  letter-spacing:-.022em;line-height:1.02;
  text-shadow:0 1px 0 rgba(10,16,22,.9);
}
/* Am Rechner ist der Satz das Einzige auf dem Schirm, und er steht auf
   einer Flaeche, die man sich selbst freigeraeumt hat. Dafuer darf er
   deutlich groesser sein als eine gewoehnliche Ueberschrift. Auf dem
   Telefon bleibt es beim bisherigen Mass, sonst bricht er in vier
   Zeilen um. */
@media (min-width:821px){
  .flut-worte .plastisch{font-size:clamp(3.4rem, 1.1rem + 5.9vw, 6.2rem)}
  .flut-worte .fliess{font-size:clamp(1.12rem, 1rem + .42vw, 1.42rem);max-width:50ch}
  .flut-worte .augenbraue{font-size:.8rem}
}

.flut-bruch,
.flut-flug{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;will-change:opacity,transform;
  pointer-events:none;
}
/* Nur solange das Eis wirklich anfassbar ist. Ein Fadenkreuz über einer
   Fläche, die nicht reagiert, ist ein Versprechen, das keiner einlöst. */
.flut-buehne.spielbar{cursor:crosshair}
@media (max-width:820.98px){
  .flut-eis{background-image:image-set(url("/media/eis-hoch.avif") type("image/avif"))}
}

@media (prefers-reduced-motion: reduce){
  /* Ohne Bewegung ein einziges stehendes Bild: das Eis, sonst nichts. */
  .flut-strecke{height:0}
  .flut-buehne{position:static;height:auto;background:#131820}
  .flut-wasser{display:none}
  .flut-eis{display:none}
  .flut-bruch,
  .flut-flug{display:none}
  /* Ohne Bewegung gibt es nichts aufzubrechen, also steht der Text
     einfach da. */
  .flut-worte{
    position:static;opacity:1;
    padding:clamp(72px,12vh,140px) var(--rand);
  }
  .worte-raum{perspective:none}
  .worte-blatt{transform:none}
  .lage-vorn,.lage-mittel,.lage-hinten{transform:none}
}

/* Solange die Flut den Schirm deckt, dreht der Kopf die Farben um.
   Das Zeichen kommt als <img> herein, currentColor greift dort nicht,
   deshalb wird es umgekehrt statt eingefärbt. */
.dunkel .kopf{color:var(--papier)}
.dunkel .kopf.fest{
  background:rgba(22,22,26,.78);
  box-shadow:0 1px 0 rgba(245,244,241,.10);
}
.dunkel .marke img{filter:invert(1)}
.dunkel .knopf-klein{background:var(--papier);color:var(--tinte)}
.kopf .marke img,.kopf .knopf-klein{transition:filter .35s ease,background .35s ease,color .35s ease}

/* ── Der Kopf, der der Maus folgt ─────────────────────────
   Der Beweis steht hier nicht als Behauptung, sondern als Gerät: wer
   die Maus bewegt, sieht die Aufmerksamkeit mitwandern.

   Das Video hat reinweissen Hintergrund, die Seite warmes Papier. Ein
   weisses Quadrat saehe aufgeklebt aus. multiply loescht Weiss aus und
   laesst den Papierton durchscheinen, ohne dass irgendetwas
   freigestellt werden muesste. */
/* Eigenes Raster statt raster-2: die Figur bekommt mehr Platz als der
   Text, und beide Spalten enden unten bündig. */
.aufmerksamkeit{
  display:grid;grid-template-columns:1fr;
  gap:clamp(24px,4vw,52px);align-items:end;
}
/* Der Text soll nicht am Boden kleben, die Figur schon. */
.aufmerksamkeit-text{padding-bottom:clamp(40px,8vh,104px)}

/* Der Abschnitt hat unten keinen Rand: die Figur ist im Quellvideo am
   unteren Bildrand beschnitten. Sitzt dieser Schnitt genau auf der
   Kante zum nächsten Block, liest man ihn nicht als Beschnitt, sondern
   als Standfläche. Schwebt sie dagegen mit Luft darunter, wirkt sie
   abgesäbelt. */
#aufmerksamkeit{padding-bottom:0}

.kopf-buehne{
  position:relative;aspect-ratio:1;width:100%;
  max-width:min(660px, 88vw);margin-inline:auto;
  display:flex;align-items:flex-end;
}
.kopf-buehne video{
  width:100%;height:100%;object-fit:contain;object-position:bottom;
  mix-blend-mode:multiply;
  opacity:0;transition:opacity .6s ease;
}
.kopf-buehne video.da{opacity:1}

/* Ab Tabletbreite bekommt die Figur die breitere Spalte und darf in den
   rechten Seitenrand hineinragen. MUSS nach der Grundregel stehen: bei
   gleicher Gewichtung gewinnt die spätere, sonst überschreibt die
   Grundregel diese hier wieder. */
@media (min-width:821px){
  /* 1,3 ist die Grenze: die Ueberschrift bleibt vierzeilig, die Figur
     waechst von 543 auf 630 Pixel. Bei 1,4 bricht die Zeile um. */
  .aufmerksamkeit{grid-template-columns:1fr 1.3fr}
  .kopf-buehne{
    max-width:none;
    /* Breite ausdrücklich mitwachsen lassen: ein negativer Rand allein
       lässt den Kasten nur überstehen, er macht ihn nicht größer. */
    width:calc(100% + var(--rand));
    margin-right:calc(-1 * var(--rand));
    margin-left:0;
  }
}

/* ── Fuss ─────────────────────────────────────────────── */
.fuss{
  border-top:1px solid var(--linie);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  padding:26px var(--rand);
  padding-bottom:max(26px, env(safe-area-inset-bottom));
  font-size:var(--f-klein);color:var(--tinte-weich);
}
.fuss .marke{font-size:.94rem;color:var(--tinte)}
.fuss nav{display:flex;gap:20px}

/* ── Rechtsseiten ─────────────────────────────────────────
   Impressum und Datenschutz. Kein Film, kein Skript, nur Text: eine
   schmale Spalte, damit die Zeilen lesbar bleiben, und oben genug Luft
   fuer die fest stehende Kopfzeile. */
.rechtsseite{
  max-width:74ch;margin:0 auto;
  padding:calc(clamp(96px,16vh,150px) + env(safe-area-inset-top)) var(--rand) clamp(80px,12vh,140px);
}
.rechtsseite h1{margin-bottom:clamp(34px,6vh,60px)}
.rechtsseite h2{
  font-size:clamp(1.12rem,1.02rem + .4vw,1.32rem);
  margin:clamp(38px,6vh,58px) 0 12px;
}
.rechtsseite h2:first-of-type{margin-top:0}
.rechtsseite p,
.rechtsseite li{color:var(--tinte-weich);font-size:var(--f-text);line-height:1.65}
.rechtsseite p{margin-bottom:14px}
.rechtsseite ul{margin:0 0 14px 1.15em;padding:0}
.rechtsseite li{margin-bottom:5px}
.rechtsseite a{text-decoration:underline;text-underline-offset:3px;color:var(--tinte)}
/* Lange Verweise duerfen umbrechen, sonst schieben sie auf dem Telefon
   die ganze Spalte breiter. */
.rechtsseite a[href^="http"]{overflow-wrap:anywhere}
.rechtsseite .stand{
  margin-top:clamp(44px,7vh,68px);padding-top:20px;
  border-top:1px solid var(--linie);font-size:var(--f-klein);
}

/* ── Ladezeichen ──────────────────────────────────────── */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.ladung{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;
  background-color:var(--papier);
  transition:background-color .5s ease;
}
/* Waehrend des Flugs verschwindet nur der Hintergrund, das Zeichen
   bleibt sichtbar und wandert an seinen Platz im Kopf. */
.ladung.flug{background-color:rgba(245,244,241,0);pointer-events:none}
/* Auf Beruehrgeraeten gibt es keinen Flug: das gefuellte Zeichen bleibt
   in der Mitte und blendet dort samt Hintergrund aus, waehrend der Kopf
   darunter aufblendet. */
.ladung.verblasst{opacity:0;pointer-events:none;transition:opacity .48s ease}
.ladung.weg{display:none}

/* Waehrend des Ladens wird NUR das Zeichen verborgen, nicht der ganze
   Kopf. Frueher lag der Kopf die gesamte Ladezeit auf Deckkraft 0 und
   war allein dadurch geschuetzt, dass das Ladezeichen darueber lag.
   Beim Ausblenden entstand dabei ein Fenster von rund 400 ms, in dem der
   Kopf halbdurchsichtig ueber schon sichtbarem Inhalt stand: ein
   verwaschenes Band ohne Inhalt. Gemessen auf dem iPhone beim Neuladen
   mitten in der Seite, Deckkraft 0,21 bis 1,00 zwischen 4566 und 4889 ms.

   Das Wort darf ruhig die ganze Zeit dastehen, es liegt ohnehin hinter
   dem Ladezeichen. Nur das Zeichen selbst muss weg, damit es nicht
   doppelt zu sehen ist, waehrend die Tinte oben ankommt. */
.laedt .kopf .marke img{opacity:0}
/* Waehrend gezeichnet wird, bleibt das echte Logo verborgen, sonst
   staenden zwei Zeichen uebereinander. */
.fliegt .kopf .marke img{opacity:0}

.lade-mark{position:relative;width:clamp(74px,17vw,108px);aspect-ratio:1000/769.42}
.lade-mark svg{width:100%;height:100%;overflow:visible}

/* Der Zug folgt der Mittellinie des Zeichens und wird von der Form
   selbst beschnitten. Dadurch fuellt sich das M entlang seiner
   eigenen Bewegung statt als gerader Balken. */
.lade-mark .zug{
  --p:0;
  fill:none;stroke:var(--tinte);stroke-width:260;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1000;
  stroke-dashoffset:calc((1 - var(--p)) * 1000);
  transition:stroke-dashoffset .4s cubic-bezier(.33,0,.15,1);
}

/* Buehne fuer den Tinten-Fluss: liegt ueber allem, nimmt keine Klicks an */
.fluss{
  position:fixed;inset:0;z-index:61;pointer-events:none;
  width:100%;height:100%;
}

/* ── Schalter für die Neigungssteuerung ────────────────
   Nur auf iPhones: Apple verlangt fuer den Lagesensor ein bewusstes
   Antippen, ein Wisch reicht nicht. Der Schalter erscheint erst, wenn
   jemand im Film ist, und geht von selbst wieder, wenn er nicht
   gebraucht wird. Auf Android gibt es ihn gar nicht. */
.neigung{
  position:absolute;right:var(--rand);bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:6;pointer-events:auto;
  appearance:none;border:0;cursor:pointer;
  background:rgba(22,22,26,.55);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:9px 15px;border-radius:100px;
  font:inherit;font-size:.76rem;font-weight:600;letter-spacing:.01em;
  opacity:0;transform:translateY(8px);
  transition:opacity .45s ease,transform .45s ease;
}
.neigung.da{opacity:1;transform:none}

/* ── Wer keine Bewegung will, bekommt keine ───────────── */
@media (prefers-reduced-motion: reduce){
  .ladung{display:none}
  .fluss{display:none}
  .buehne .clip{transition:none}
  .knopf{transition:none}
  .hinweis{display:none}
  .neigung{transition:none}
  .kopf-buehne video{transition:none}
}