/* Natural High · Die Fußung und die Laufbänder
   ---------------------------------------------------------------------------
   „Nach der Forschung des HeartMath Institute" samt Logo, und die Bänder, die
   von rechts nach links ziehen (Klangfarben auf der Startseite).

   Chris am 24.08.: „auch unter About nach der Forschung des HeartMath
   Institute genauso eins zu eins wie hier auf der Landingpage."

   Deshalb steht es ab jetzt in einer Datei statt zweimal im Quelltext: Ein
   Wert an zwei Orten ist doppelter Code, und genau daraus sind heute schon
   196 feste Farben entstanden.
   -------------------------------------------------------------------------- */

.fussung{
  padding:clamp(2.5rem,8vh,4rem) 0 0;
  display:flex; flex-direction:column; align-items:center;
}
.fussung-satz{
  margin:0 0 1.4rem;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:#5b6670; text-align:center;
}
.fussung-satz b{ color:var(--fg-dim); font-weight:400 }

/* Solange nur ein Logo da ist, steht es still und mittig - siehe die
   Begruendung am Markup. Die Klasse setzt fussung.js, nicht die Hand. */
.fussung-band{ width:min(58%, 40rem) }
.fussung-band .band-lauf{ gap:1.6rem }

/* ⚠️ DIE MASKE GEHOERT ZUR BEWEGUNG, NICHT ZUM BAND.
   .band blendet die Raender aus - damit man beim Umspringen der Strecke
   keine Kante sieht. Solange hier nichts laeuft, gibt es keine Kante zu
   verstecken, und die Maske tut nur eins: Sie schneidet die Kachel an.
   Gemessen war das klare Fenster 158 px breit, die Kachel 330.

   Und ohne Bewegung muss die Reihe mittig stehen: width:max-content laesst
   sich nicht von justify-content zentrieren - das braucht margin:auto. */
.fussung-band:not(.zieht){ -webkit-mask-image:none; mask-image:none }
.fussung-band:not(.zieht) .band-lauf{ margin-inline:auto }
.fussung-band.zieht .band-lauf{ animation:band-links 96s linear infinite }

/* ⚠️ DAS LOGO HAT KEINEN DURCHSICHTIGEN GRUND.
   Es bringt ein helles Feld mit - auf der dunklen Seite waere das ein
   weisser Balken mitten im Bild. Auf einer hellen Kachel sieht dasselbe
   Feld gewollt aus, und fremde Logos duerfen ohnehin nicht umgefaerbt
   werden. Chris am 23.08.: "mit weiss bei dem." */
.fussung-logo{
  flex-shrink:0; display:grid; place-items:center;
  padding:.7rem 1.1rem; border-radius:10px;
  background:#f4f2ee;
}
.fussung-logo img{
  display:block; height:26px; width:auto;
}
@media (max-width: 620px){
  .fussung-band{ width:94% }
  .fussung-logo img{ height:22px }
}

.band{
  /* Es laeuft in einem schmalen Fenster in der Mitte, nicht ueber die
     ganze Seite. So sind immer nur ein paar Woerter zu sehen, und es
     wirkt ruhig statt nach viel. */
  width:min(58%, 40rem);
  overflow:hidden;
  /* Die Woerter duerfen nie abgeschnitten wirken. Der Verlauf laesst sie
     ueber ein Drittel der Breite kommen und gehen - mit Zwischenstufen,
     damit auch der Verlauf selbst keine Kante hat. Was bleibt, ist ein
     ruhiger Kern in der Mitte. */
  --rand:linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,.35) 12%, rgba(0,0,0,.8) 24%, #000 34%,
    #000 66%, rgba(0,0,0,.8) 76%, rgba(0,0,0,.35) 88%, transparent 100%);
  -webkit-mask-image:var(--rand);
          mask-image:var(--rand);
}
.band-lauf{
  display:flex; width:max-content;
  /* Sagt dem Browser vorher Bescheid - dadurch laeuft es auch auf dem
     Telefon ohne Ruckeln, weil er es einmal auf die Grafikkarte legt. */
  will-change:transform;
  transform:translateZ(0);
}
.band:hover .band-lauf, .band:focus-within .band-lauf{animation-play-state:paused}

/* Langsam genug, dass es nicht zieht, sondern traegt. */
.band-unten .band-lauf{gap:1.5rem; animation:band-links 128s linear infinite}
/* Auf schmalen Bildschirmen kommt dieselbe Strecke schneller vorbei -
   deshalb dort etwas mehr Zeit, damit das Tempo gleich bleibt. */
/* Auf dem Telefon soll dasselbe zu sehen sein wie am Rechner: sechs
   Woerter im Fenster. Dafuer wird das Band breiter, die Abstaende
   enger und die Schrift kleiner - alles drei zusammen, damit keins
   davon allein zu weit gehen muss. */
@media (max-width: 620px){
  .band{width:94%}
  .band-unten .band-lauf{gap:1rem; animation-duration:88s}
  .band-unten span{font-size:.56rem; letter-spacing:.1em}
}
@media (max-width: 400px){
  .band-unten .band-lauf{gap:.85rem}
  .band-unten span{font-size:.52rem; letter-spacing:.08em}
}
.band-unten span{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:#5b6670; white-space:nowrap;
}

@keyframes band-links{from{transform:translateX(0)} to{transform:translateX(-50%)}}