/* ==========================================================================
   MYALO — Gestaltung der Website
   Alle Farben und Schriften stammen aus dem Brandbook (Branding/myalo-brand.css).
   Hier wird nichts erfunden: Werte werden uebernommen, nicht neu gewaehlt.
   Aufbau: 1 Marke · 2 Grundgeruest · 3 Typografie · 4 Bausteine · 5 Kopf/Fuss
           6 Abschnitte der Startseite · 7 Bewegung · 8 Druck
   ========================================================================== */

/* ------------------------------ 1 Marke -------------------------------- */
:root{
  /* Markenfarben, exakt Brandbook S. 7 */
  --myalo-dunkel:#00645E;
  --myalo-hell:#38BBB8;
  --myalo-blass:#E3F4F4;
  --myalo-schwarz:#000000;
  --myalo-weiss:#FFFFFF;

  /* Tonwerte 80/60/40/20 % */
  --myalo-dunkel-80:#33837E; --myalo-dunkel-60:#66A29E;
  --myalo-dunkel-40:#99C1BF; --myalo-dunkel-20:#CCE0DF;
  --myalo-hell-80:#60C9C6;   --myalo-hell-60:#88D6D4;
  --myalo-hell-40:#AFE4E3;   --myalo-hell-20:#D7F1F1;
  --myalo-blass-80:#E9F6F6;  --myalo-blass-60:#EEF8F8;

  /* Abgeleitet (dokumentiert in myalo-brand.css, kein Brandbook-Wert) */
  --myalo-dunkel-tief:#003F3B;   /* Markendunkel 25 % abgedunkelt */
  --myalo-nacht:#0A1413;         /* Studiogrund der Produktfotos */

  /* Rollen im hellen Grundzustand */
  --grund:var(--myalo-weiss);
  --grund-still:var(--myalo-blass);
  --linie:var(--myalo-dunkel-20);
  --linie-zart:#EAF2F1;
  --text:#0C2B29;                /* Schwarz mit Markenton, nicht reines Schwarz */
  --text-2:#3F5D5A;
  --text-3:#6E8A87;
  --akzent:var(--myalo-dunkel);
  --leuchte:var(--myalo-hell);

  --schrift:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  --schrift-2:"Montserrat","Nunito",system-ui,sans-serif;

  --bahn:1180px;      /* Inhaltsbreite */
  --bahn-eng:640px;   /* Lesebreite, rund 62 Zeichen */
  --rand:clamp(20px,5vw,56px);
  --rundung:14px;
  --schatten:0 18px 46px -24px rgba(0,63,59,.42);
  --schatten-tief:0 34px 80px -36px rgba(0,63,59,.55);
}

/* ---------------------------- 2 Grundgeruest ---------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:68px}
@media (max-width:560px){html{scroll-padding-top:60px}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font-family:var(--schrift);
  font-size:17.5px;
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
/* hidden muss immer gewinnen, auch gegen eigene display-Regeln wie flex. */
[hidden]{display:none !important}
a{color:var(--akzent);text-decoration-color:var(--myalo-hell-60);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--myalo-hell);outline-offset:3px;border-radius:4px}
hr{border:0;border-top:1px solid var(--linie);margin:0}

/* WordPress-Bloecke einpassen. Der Kern setzt seine Abstaende ueber :where(),
   deshalb genuegen hier einfache Klassen. */
.wp-block-group{margin-block:0}
.wp-block-image{margin:0}
.wp-block-heading{margin:0}
/* Der Kern setzt Blockabstaende ueber :where(). Innerhalb der Abschnitte
   bestimmt die Gestaltung hier die Abstaende, deshalb erst alles auf null. */
.myalo-band .wp-block-group > *{margin-block-start:0}
.myalo-band p{margin:0}
.myalo-band ul,.myalo-band ol{margin:0}
/* Schalter: die Kernbloecke bekommen das Aussehen der Marke. */
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0}
.wp-block-button__link{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--schrift-2);font-weight:600;font-size:.86rem;letter-spacing:.04em;
  padding:14px 28px;border-radius:999px;border:1px solid transparent;text-decoration:none;
  background:var(--myalo-dunkel);color:var(--myalo-weiss);
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.wp-block-button__link:hover{background:var(--myalo-dunkel-80);transform:translateY(-1px);color:var(--myalo-weiss)}
.wp-block-button.is-style-outline .wp-block-button__link,
.myalo-schalter--rand .wp-block-button__link{
  background:transparent;border-color:var(--myalo-dunkel-40);color:var(--akzent)}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.myalo-schalter--rand .wp-block-button__link:hover{
  border-color:var(--myalo-dunkel);background:var(--myalo-blass);color:var(--akzent)}
.myalo-band--nacht .wp-block-button__link,
.myalo-band--tief .wp-block-button__link{background:var(--myalo-hell);color:var(--myalo-dunkel-tief)}
.myalo-band--nacht .wp-block-button__link:hover,
.myalo-band--tief .wp-block-button__link:hover{background:var(--myalo-hell-60);color:var(--myalo-dunkel-tief)}
.myalo-band--nacht .myalo-schalter--rand .wp-block-button__link,
.myalo-band--tief .myalo-schalter--rand .wp-block-button__link{
  background:transparent;border-color:rgba(227,244,244,.34);color:var(--myalo-blass)}
.myalo-band--nacht .myalo-schalter--rand .wp-block-button__link:hover,
.myalo-band--tief .myalo-schalter--rand .wp-block-button__link:hover{
  border-color:var(--myalo-hell);background:rgba(56,187,184,.12);color:var(--myalo-blass)}

/* ---------------------------- 3 Typografie ------------------------------ */
/* line-height wie in theme.json (elements.heading) — sonst sieht die Vorschau
   anders aus als WordPress, das die Werte aus theme.json ausliefert. */
h1,h2,h3,h4{font-family:var(--schrift);line-height:1.14;text-wrap:balance;margin:0}
.myalo-schlagzeile{
  font-weight:300;
  font-size:clamp(2.5rem,6.2vw,4.4rem);
  line-height:1.04;
  letter-spacing:-.032em;
}
.myalo-kapitel-titel{
  font-weight:300;
  font-size:clamp(1.85rem,3.6vw,2.9rem);
  line-height:1.14;
  letter-spacing:-.022em;
  margin:0 0 .55em;
}
/* Der kurze Strich unter der Ueberschrift — im Brandbook traegt ihn jede
   Seite ("App Icon", "Color Palettes", "Typography"). Damit es pro Abschnitt
   bei einer Markierung bleibt, entfaellt dafuer der Strich vor dem Vorlauf;
   im Auftakt ist es umgekehrt, dort gibt es keine Kapitelueberschrift. */
.myalo-kapitel-titel::after{content:"";display:block;
  width:58px;height:2px;border-radius:2px;
  background:var(--myalo-hell);margin-top:.46em}
.myalo-zwischentitel{
  font-family:var(--schrift-2);
  font-weight:600;
  font-size:.94rem;
  letter-spacing:.02em;
  margin:0 0 .35em;
}
.myalo-vorlauf{                     /* Eyebrow mit Markenstrich, Brandbook S. 12 */
  display:flex;align-items:center;gap:14px;
  font-family:var(--schrift-2);
  font-weight:600;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--akzent);
  margin:0 0 20px;
}
.myalo-vorlauf::before{content:"";display:none;width:30px;height:2px;background:var(--myalo-hell);flex:none}
.myalo-auftakt .myalo-vorlauf::before{display:block}
.myalo-fliess{max-width:var(--bahn-eng);color:var(--text-2);margin:0}
.myalo-fliess + .myalo-fliess{margin-top:1.1em}
.myalo-anlauf{                       /* Vorspann unter der Schlagzeile */
  font-size:clamp(1.05rem,1.5vw,1.24rem);
  line-height:1.62;font-weight:300;
  max-width:34em;margin:0;
}
.myalo-klein{font-size:.83rem;line-height:1.6;color:var(--text-3)}

/* ---------------------------- 4 Bausteine ------------------------------- */
/* WordPress laedt seine Block-Stylesheets NACH diesem hier, darunter
   ".wp-block-image img{height:auto}". Regeln fuer Bilder in Bildbloecken
   tragen deshalb ".myalo-band" davor, sonst verlieren sie ihre Hoehe
   (gefunden im echten WordPress 7.1, nicht in der statischen Vorschau). */
.myalo-band{position:relative;padding-block:clamp(72px,10vw,148px)}
.myalo-band--eng{padding-block:clamp(52px,7vw,96px)}
.myalo-bahn{max-width:var(--bahn);margin-inline:auto;padding-inline:var(--rand);position:relative;z-index:1}

/* Gruende */
.myalo-band--still{background:var(--grund-still)}
.myalo-band--tief{background:var(--myalo-dunkel);color:var(--myalo-blass)}
.myalo-band--nacht{background:var(--myalo-nacht);color:var(--myalo-blass)}
/* Zwei Abschnitte mit demselben Grund hintereinander (Das Band, App) lesen
   sich als einer — sonst addieren sich beide Raender zu einer leeren Flaeche. */
.myalo-band--still + .myalo-band--still{padding-top:0}
.myalo-band--tief .myalo-fliess,
.myalo-band--nacht .myalo-fliess{color:var(--myalo-hell-40)}
.myalo-band--tief .myalo-vorlauf,
.myalo-band--nacht .myalo-vorlauf{color:var(--myalo-hell-40)}
.myalo-band--tief .myalo-vorlauf::before,
.myalo-band--nacht .myalo-vorlauf::before{background:var(--myalo-hell)}
.myalo-band--tief .myalo-klein,
.myalo-band--nacht .myalo-klein{color:var(--myalo-dunkel-20)}
.myalo-band--tief a,.myalo-band--nacht a{color:var(--myalo-hell)}

/* Marken-Bogen: das breite, weiche Kreissegment aus dem Brandbook, wo es auf
   jeder Seite am Rand steht. Hier bewusst nur zweimal — gleich nach dem
   Auftakt und bei den Fragen —, damit es Rahmen bleibt und nicht Tapete wird.
   Der dicke Rand ist Absicht: im Brandbook ist es ein breites Band, kein
   duenner Ring. Der Abschnitt muss beschneiden, sonst schiebt das Segment die
   Seite seitlich auf. */
.myalo-bogen{overflow:hidden}
.myalo-bogen::after{content:"";position:absolute;pointer-events:none;z-index:0;
  --d:min(92vw,1100px);
  width:var(--d);aspect-ratio:1;border-radius:50%;
  border:clamp(52px,9vw,128px) solid var(--myalo-hell);
  opacity:.09;
  top:50%;translate:0 -50%;
  left:calc(var(--d) * -.78)}
.myalo-bogen--rechts::after{left:auto;right:calc(var(--d) * -.78)}
@media (max-width:760px){
  .myalo-bogen::after{--d:150vw;border-width:clamp(34px,11vw,60px);left:calc(var(--d) * -.86)}
  .myalo-bogen--rechts::after{left:auto;right:calc(var(--d) * -.86)}
}

/* Markenmuster: die Strickstruktur des Bandes, offizielle Musterdatei als Maske */
.myalo-muster::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:currentColor;opacity:.045;
  -webkit-mask-image:url("../img/markenmuster-kachel.png");mask-image:url("../img/markenmuster-kachel.png");
  -webkit-mask-size:119px 82px;mask-size:119px 82px;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
}
.myalo-muster--saum::before{
  -webkit-mask-image:url("../img/markenmuster-kachel.png"),linear-gradient(180deg,#000,transparent 62%);
  mask-image:url("../img/markenmuster-kachel.png"),linear-gradient(180deg,#000,transparent 62%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  -webkit-mask-size:119px 82px,100% 100%;mask-size:119px 82px,100% 100%;
  -webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
}

/* Bilder */
.myalo-figur{overflow:hidden;border-radius:var(--rundung);background:var(--myalo-blass-80);position:relative}
.myalo-band .myalo-figur img{width:100%;height:100%;object-fit:cover}
.myalo-figur--gehoben{box-shadow:var(--schatten)}
.myalo-figur--hoch{aspect-ratio:3/4}
.myalo-figur--quer{aspect-ratio:3/2}
.myalo-figur--breit{aspect-ratio:16/9}

/* Schalter */
.myalo-schalter{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--schrift-2);font-weight:600;font-size:.86rem;letter-spacing:.04em;
  padding:14px 28px;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.myalo-schalter--voll{background:var(--myalo-dunkel);color:var(--myalo-weiss)}
.myalo-schalter--voll:hover{background:var(--myalo-dunkel-80);transform:translateY(-1px)}
.myalo-schalter--rand{border-color:var(--myalo-dunkel-40);color:var(--akzent)}
.myalo-schalter--rand:hover{border-color:var(--myalo-dunkel);background:var(--myalo-blass)}
.myalo-band--nacht .myalo-schalter--voll,
.myalo-band--tief .myalo-schalter--voll{background:var(--myalo-hell);color:var(--myalo-dunkel-tief)}
.myalo-band--nacht .myalo-schalter--voll:hover,
.myalo-band--tief .myalo-schalter--voll:hover{background:var(--myalo-hell-60)}
.myalo-band--nacht .myalo-schalter--rand{border-color:rgba(227,244,244,.34);color:var(--myalo-blass)}
.myalo-band--nacht .myalo-schalter--rand:hover{border-color:var(--myalo-hell);background:rgba(56,187,184,.12)}
.myalo-knopfreihe{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* Zweispaltiger Satz: Text schmal, Bild breit — bewusst ungleich */
.myalo-satz{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,88px);align-items:center}
.myalo-satz--gedreht{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.myalo-satz--gedreht .myalo-satz__text{order:2}
.myalo-band .myalo-satz__text > * + *{margin-block-start:1.15em}
.myalo-satz__text .myalo-vorlauf{margin-bottom:20px}
@media (max-width:860px){
  .myalo-satz{grid-template-columns:1fr;gap:36px}
  .myalo-satz--gedreht .myalo-satz__text{order:0}
}

/* Aufzaehlung mit Markenstrich */
.myalo-punkte{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.myalo-punkte li{position:relative;padding-left:26px;color:var(--text-2)}
.myalo-punkte li::before{content:"";position:absolute;left:0;top:.72em;width:14px;height:2px;background:var(--myalo-hell)}

/* ---------------------------- 5 Kopf und Fuss --------------------------- */
.myalo-kopf{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--linie-zart);
}
.myalo-kopf__bahn{max-width:var(--bahn);margin-inline:auto;padding:0 var(--rand);
  display:flex;align-items:center;justify-content:space-between;gap:28px;height:84px}
.myalo-kopf__logo{display:inline-flex;align-items:center;flex:none}
.myalo-kopf__logo img,.myalo-kopf__logo svg{width:200px;height:auto}   /* Web-Mindestbreite 190 px */
.myalo-navi{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.myalo-navi a{font-family:var(--schrift-2);font-weight:500;font-size:.86rem;letter-spacing:.03em;
  color:var(--text-2);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.myalo-navi a:hover{color:var(--text);border-bottom-color:var(--myalo-hell)}
.myalo-kopf .myalo-schalter{padding:11px 22px;font-size:.8rem}
/* Nur fuer Vorleseprogramme sichtbar */
.myalo-unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Menue auf schmalen Schirmen: ein Knopf klappt die Navigation unter der
   Kopfzeile auf. Ohne Javascript bleibt der Knopf verborgen; die Seite ist
   eine Geschichte und laesst sich auch ohne Menue von oben nach unten lesen. */
.myalo-menueknopf{display:none}
@media (max-width:920px){
  .myalo-kopf__bahn{position:relative}
  .myalo-navi-halter{position:absolute;left:0;right:0;top:100%;z-index:59;
    background:var(--grund);border-bottom:1px solid var(--linie-zart);
    box-shadow:0 18px 34px -26px rgba(0,63,59,.55);
    padding:8px var(--rand) 18px;visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .25s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s}
  .myalo-kopf.ist-offen .myalo-navi-halter{visibility:visible;opacity:1;transform:none;
    transition:opacity .25s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s}
  .myalo-navi{display:grid;gap:0}
  .myalo-navi li{border-bottom:1px solid var(--linie-zart)}
  .myalo-navi li:last-child{border-bottom:0}
  .myalo-navi a{display:block;padding:15px 0;font-family:var(--schrift);font-weight:300;
    font-size:1.25rem;letter-spacing:-.01em;color:var(--text);border-bottom:0}
  .myalo-kopf--mit-menue .myalo-menueknopf{display:grid;place-items:center;flex:none;
    width:42px;height:42px;margin-left:-6px;border:0;border-radius:50%;background:transparent;cursor:pointer;color:var(--text)}
  .myalo-menueknopf:hover{background:var(--myalo-blass)}
  .myalo-menueknopf__striche,.myalo-menueknopf__striche::before,.myalo-menueknopf__striche::after{
    display:block;width:20px;height:1.6px;border-radius:2px;background:currentColor;
    transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s ease}
  .myalo-menueknopf__striche{position:relative}
  .myalo-menueknopf__striche::before,.myalo-menueknopf__striche::after{content:"";position:absolute;left:0}
  .myalo-menueknopf__striche::before{top:-6px}
  .myalo-menueknopf__striche::after{top:6px}
  .ist-offen .myalo-menueknopf__striche{background:transparent}
  .ist-offen .myalo-menueknopf__striche::before{transform:translateY(6px) rotate(45deg)}
  .ist-offen .myalo-menueknopf__striche::after{transform:translateY(-6px) rotate(-45deg)}
  .myalo-kopf .myalo-schalter{margin-left:auto}
}
.myalo-kopf .myalo-schalter{white-space:nowrap;flex:none}
.myalo-navi__ruf{display:none}
@media (max-width:920px){
  .myalo-kopf--mit-menue .myalo-navi__ruf{display:inline-flex;margin-top:18px}
}
/* Schmal: Logo bleibt bei 190 px (Brandbook), der Knopf zur Warteliste zieht
   dafuer aus der Kopfzeile ins Menue. Im Auftakt steht er ohnehin gross. */
@media (max-width:480px){
  .myalo-kopf__bahn > .myalo-schalter{display:none}
  .myalo-menueknopf{margin-left:auto}
}
@media (max-width:560px){
  .myalo-kopf__bahn{height:70px;gap:12px}
  /* Brandbook: im Web mindestens 190 px breit — auch auf dem Telefon. */
  .myalo-kopf__logo img,.myalo-kopf__logo svg{width:190px}
  .myalo-kopf .myalo-schalter{padding:10px 15px;font-size:.72rem;letter-spacing:.02em}
}

.myalo-fuss{background:var(--myalo-dunkel-tief);color:var(--myalo-blass);position:relative;overflow:hidden}
.myalo-fuss__bahn{max-width:var(--bahn);margin-inline:auto;padding:clamp(56px,7vw,88px) var(--rand) 36px;position:relative;z-index:1}
.myalo-fuss__kopfzeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(32px,6vw,80px);align-items:start}
.myalo-fuss__logo img{width:200px;height:auto}
.myalo-fuss__logo .myalo-klein{color:var(--myalo-dunkel-20)}
.myalo-fuss__spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.myalo-fuss h3{font-family:var(--schrift-2);font-weight:600;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--myalo-hell);margin:0 0 14px}
.myalo-fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.myalo-fuss a{color:var(--myalo-blass);text-decoration:none;font-size:.92rem}
.myalo-fuss a:hover{color:var(--myalo-hell)}
.myalo-fuss__hinweis{margin-top:clamp(40px,6vw,64px);padding-top:24px;border-top:1px solid rgba(227,244,244,.16);
  display:grid;gap:16px}
.myalo-fuss__hinweis p{margin:0;font-size:.8rem;line-height:1.65;color:var(--myalo-dunkel-20);max-width:78ch}
.myalo-fuss__zeile{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between;
  font-size:.8rem;color:var(--myalo-dunkel-20)}
@media (max-width:860px){
  .myalo-fuss__kopfzeile{grid-template-columns:1fr}
  .myalo-fuss__spalten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){.myalo-fuss__spalten{grid-template-columns:1fr}}

/* -------------------- 6 Abschnitte der Startseite ----------------------- */

/* Auftakt: der Film liegt vollflaechig hinter dem Satz und laeuft einmal —
   Aufsetzen, dann Ruhe — und bleibt auf dem letzten Bild stehen. Nach links
   legt sich ein Verlauf darueber, damit der Satz auf ruhigem Grund steht;
   seitlich wird nichts beschnitten, die Haende beim Aufsetzen bleiben im Bild.
   Beim Wegscrollen rueckt der Film minimal heran und der Satz hebt sich ab
   (--weg kommt aus dem Skript, 0 = oben, 1 = Auftakt ganz verlassen). */
/* Der Auftakt fuellt immer genau den Bildschirm unter der Kopfzeile (85 px) —
   auf keinem Bildschirm darf darunter schon Weiss hervorschauen. vh zuerst als
   Rueckfall fuer Browser ohne svh. */
.myalo-auftakt{position:relative;background:var(--myalo-nacht);color:var(--myalo-blass);
  min-height:calc(100vh - 85px);min-height:calc(100svh - 85px);
  display:flex;align-items:center;overflow:hidden;padding:0}
.myalo-auftakt__film{position:absolute;inset:0;z-index:0}
/* Die Koepfe stehen im Film bei 65–80 %, Gesichter reichen bis ~95 % der Breite.
   Ist der Schirm schmaler als 16:9, wird deshalb vor allem links beschnitten —
   dort liegt ohnehin der dunkle Verlauf unter dem Text. */
.myalo-auftakt__video{width:100%;height:100%;object-fit:cover;object-position:76% 40%;display:block;
  transform:scale(calc(1 + var(--weg,0) * .07));transform-origin:76% 40%}
.myalo-auftakt__film::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--myalo-nacht) 0%,rgba(10,20,19,.96) 36%,rgba(10,20,19,.72) 50%,rgba(10,20,19,.3) 62%,rgba(10,20,19,.08) 78%,rgba(10,20,19,.04) 100%),
    linear-gradient(0deg,rgba(10,20,19,.72) 0%,transparent 34%),
    linear-gradient(180deg,rgba(10,20,19,.5) 0%,transparent 22%)}
.myalo-auftakt .myalo-bahn{width:100%;padding-block:clamp(56px,7vw,96px);z-index:1}
.myalo-auftakt__satz{max-width:min(560px,100%);
  transform:translateY(calc(var(--weg,0) * -48px));opacity:calc(1 - var(--weg,0) * 1.1)}
.myalo-auftakt .myalo-schlagzeile{font-size:clamp(2.6rem,5.6vw,4.5rem);line-height:1.04;max-width:none}
.myalo-auftakt .myalo-anlauf{color:var(--myalo-hell-40);margin-block-start:26px;max-width:27em}
.myalo-auftakt .myalo-knopfreihe{margin-block-start:clamp(30px,3.4vw,40px)}
.myalo-band .myalo-auftakt__beweis{margin-block-start:clamp(26px,3vw,34px);padding-left:16px;max-width:30em;
  border-left:2px solid var(--myalo-hell);font-size:.9rem;line-height:1.55;color:var(--myalo-blass)}
.myalo-auftakt__beweis a{color:var(--myalo-hell);white-space:nowrap}
.myalo-auftakt__beweis strong{display:block;font-family:var(--schrift-2);font-weight:600;font-size:.84rem;
  letter-spacing:.02em;color:var(--myalo-weiss);margin-bottom:4px}
.myalo-band .myalo-auftakt__beweis + .myalo-auftakt__fussnote{margin-block-start:16px}
.myalo-band .myalo-auftakt__fussnote{margin-block-start:26px;font-size:.75rem;
  line-height:1.6;color:rgba(227,244,244,.5)}
@media (max-width:1080px){
  .myalo-auftakt__film::after{
    background:
      linear-gradient(90deg,var(--myalo-nacht) 0%,rgba(10,20,19,.95) 38%,rgba(10,20,19,.62) 60%,rgba(10,20,19,.2) 82%,rgba(10,20,19,.08) 100%),
      linear-gradient(0deg,rgba(10,20,19,.74) 0%,transparent 34%)}
}
/* Anhalten-Knopf fuer Filme in Endlosschleife (Auftakt, Produktfilm). Erscheint
   nur mit Skript; Bewegung, die nicht von selbst endet, muss sich stoppen lassen. */
.myalo-filmknopf{position:absolute;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:2;
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(227,244,244,.4);background:rgba(10,20,19,.45);color:var(--myalo-blass);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .2s ease,border-color .2s ease}
.myalo-filmknopf:hover{background:rgba(10,20,19,.7);border-color:var(--myalo-hell)}
.myalo-filmknopf svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.myalo-filmknopf__aus{display:none}
.myalo-filmknopf.ist-angehalten .myalo-filmknopf__an{display:none}
.myalo-filmknopf.ist-angehalten .myalo-filmknopf__aus{display:block;fill:currentColor;stroke:none}

/* Schmal: der Film steht oben, der Satz darunter — kein Text ueber dem Gesicht. */
@media (max-width:860px){
  .myalo-auftakt{display:block;min-height:calc(100vh - 71px);min-height:calc(100svh - 71px)}
  .myalo-auftakt__film{position:relative;inset:auto;width:100%;aspect-ratio:16/11;overflow:hidden}
  .myalo-auftakt__film::after{
    background:linear-gradient(0deg,var(--myalo-nacht) 0%,rgba(10,20,19,.35) 26%,transparent 58%)}
  .myalo-auftakt .myalo-bahn{padding-block:30px clamp(56px,9vw,76px)}
  .myalo-auftakt__satz{max-width:none;transform:none;opacity:1}
  /* 16:11 schneidet 18 % der Breite weg — vor allem links: die Koepfe stehen
     im Film bei 65–75 %, links liegt hier kein dunkler Verlauf darueber. */
  .myalo-auftakt__video{object-position:90% 40%;transform:none}
}

/* Warum: eine Aussage, die beim Hereinscrollen scharf wird — der Kopf kommt
   zur Ruhe, das Bild wird klar. --scharf kommt aus dem Skript (0 bis 1). */
.myalo-warum .myalo-bahn{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(32px,6vw,96px);align-items:end}
.myalo-aussage{font-weight:300;font-size:clamp(2.6rem,6vw,5rem);line-height:1.02;
  letter-spacing:-.035em;margin:0;max-width:10.5ch;color:var(--text)}
.myalo-aussage::after{content:"";display:block;width:58px;height:2px;border-radius:2px;
  background:var(--myalo-hell);margin-top:.42em}
.myalo-band .myalo-warum__text > * + *{margin-block-start:1.1em}
/* "Nur hoeren. Spueren. Loslassen." — der Schlusston des Abschnitts */
.myalo-band .myalo-warum__schluss{font-family:var(--schrift-2);font-weight:600;color:var(--text);letter-spacing:.01em}
.myalo-band .myalo-quelle{font-size:.78rem;line-height:1.55;color:var(--text-2);max-width:34em}
/* Rauschen und Ruhe: eine Linie, die unruhig beginnt und sich beim Scrollen
   zur ruhigen Welle glaettet — dieselbe Wellensprache wie bei den Journeys.
   Ohne Skript steht die ruhige Endform da. */
.myalo-band .myalo-rauschen{grid-column:1/-1;margin-block-end:clamp(36px,5vw,64px)}
.myalo-rauschen svg{display:block;width:100%;height:clamp(96px,11vw,140px);overflow:visible}
.myalo-rauschen__linie{fill:none;stroke:var(--myalo-hell);stroke-width:2;stroke-linejoin:round;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
/* Nur wo color-mix sicher geht — sonst faellt die Linie nicht auf Teal zurueck,
   sondern verschwindet. */
@supports (stroke: color-mix(in srgb, red 50%, blue)){
  .js-bewegt .myalo-rauschen__linie{
    stroke:color-mix(in srgb,var(--myalo-hell) calc(var(--ruhe,1) * 100%),var(--myalo-dunkel-40))}
}
@media (max-width:860px){
  .myalo-warum .myalo-bahn{grid-template-columns:1fr;gap:28px}
}

/* Hoeren und Spueren: die Buehne. Sie ist so hoch wie drei Bildschirme; der
   innere Halt klebt dabei fest, und das Skript schaltet data-schritt von 1
   bis 3 weiter. Ohne Skript, bei reduzierter Bewegung oder in einer Vorschau
   ohne Javascript ist die Buehne ein gewoehnlicher Abschnitt: alle drei
   Schritte stehen untereinander, das Bild zeigt den Endzustand. */
.myalo-band.myalo-idee{padding-block:0}
.myalo-buehne{position:relative;padding-block:clamp(72px,10vw,148px)}
.myalo-buehne__halt{position:relative}
.myalo-buehne__raster{max-width:var(--bahn);margin-inline:auto;padding-inline:var(--rand);width:100%;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.myalo-buehne__text .myalo-kapitel-titel{margin:0 0 .5em}
.myalo-buehne__text .myalo-fliess{margin:0;max-width:30em}
/* .myalo-band ol{margin:0} ist spezifischer als eine einzelne Klasse — deshalb
   hier mit .myalo-band davor, sonst faellt der Abstand weg. */
.myalo-band .myalo-buehne__schritte{list-style:none;margin:clamp(28px,5vh,52px) 0 0;padding:0 0 0 30px;display:grid;
  gap:clamp(22px,3.6vh,40px);position:relative}
.myalo-buehne__schritte::before,
.myalo-buehne__schritte::after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px}
.myalo-buehne__schritte::before{background:rgba(227,244,244,.14)}
.myalo-buehne__schritte::after{background:var(--myalo-hell);transform-origin:top;transform:scaleY(var(--p,1))}
.myalo-buehne__schritt h3{font-weight:300;font-size:clamp(1.55rem,2.4vw,2.15rem);letter-spacing:-.02em;
  margin:0 0 8px;color:var(--myalo-weiss)}
.myalo-buehne__schritt p{margin:0;color:var(--myalo-hell-40);font-size:.98rem;line-height:1.62;max-width:34em}
.myalo-buehne__bild{position:relative}
.myalo-buehne__fortschritt{display:none}

.myalo-ringe{width:100%;height:auto;max-height:70svh;display:block;overflow:visible}
.myalo-ringe__spur{fill:none;stroke:rgba(227,244,244,.07);stroke-width:13.4}
/* Strich minimal laenger als der Kreis (1.01 statt 1): sonst bleibt oben, wo
   der Strich anfaengt und endet, eine haarfeine Naht stehen. */
.myalo-ringe__ring{fill:none;stroke-width:13.4;stroke-dasharray:1.01 1.01;stroke-dashoffset:0;
  transform-box:fill-box;transform-origin:center;transform:rotate(-90deg);
  transition:stroke-dashoffset 1.5s cubic-bezier(.65,0,.35,1)}
.myalo-ringe__hoeren .myalo-ringe__ring{stroke:#38BBB8}
/* Wie im Logo: links das tiefe MYALO-Gruen, rechts das helle Teal. */
.myalo-ringe__spueren .myalo-ringe__ring{stroke:var(--myalo-dunkel)}
.myalo-ringe__hoeren,.myalo-ringe__spueren{
  transition:transform 1.3s cubic-bezier(.65,0,.35,1),opacity .9s ease}
.myalo-ringe__welle{fill:none;stroke:#38BBB8;stroke-width:1.4;opacity:0;
  transform-box:fill-box;transform-origin:center}
.myalo-ringe__scheibe{fill:#38BBB8;opacity:.85;transform-box:fill-box;transform-origin:center}
.myalo-ringe__schein{opacity:1;transition:opacity 1.2s ease}
.myalo-ringe__name{font-family:var(--schrift-2);font-size:12.5px;font-weight:600;letter-spacing:.04em;
  fill:var(--myalo-hell-40);text-anchor:middle}

@media (max-height:800px) and (min-width:901px){
  .myalo-buehne__schritt h3{font-size:1.45rem;margin-bottom:4px}
  .myalo-buehne__schritt p{font-size:.92rem;line-height:1.55}
  .myalo-band .myalo-buehne__schritte{gap:18px}
}
@media (max-width:900px){
  .myalo-buehne__raster{grid-template-columns:1fr;gap:18px}
  .myalo-buehne__bild{order:-1;max-width:420px;width:100%;margin-inline:auto}
  .myalo-ringe{max-height:34svh}
  .myalo-buehne__text .myalo-kapitel-titel{font-size:1.65rem}
  .myalo-band .myalo-buehne__schritte{margin-top:22px}
}

/* Erlebnis: drei Schritte, wirklich eine Abfolge — deshalb die Nummern und
   die Linie, die sie verbindet. */
.myalo-band .myalo-akte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);margin-block-start:clamp(40px,5vw,64px);counter-reset:akt}
.myalo-akt{counter-increment:akt;display:grid;gap:16px;align-content:start}
.myalo-akt__bild{aspect-ratio:4/5;border-radius:var(--rundung)}
.myalo-band .myalo-akt__bild img{width:100%;height:100%;object-fit:cover}
/* Die Bilder sind 16:9 aus derselben Kamera, die Karten 4:5 — der Ausschnitt
   sitzt auf Kopf, Band und Tasten, die bei rund 70 % der Breite liegen. */
.myalo-band .myalo-akt__bild img{object-position:88% 40%}
/* Zeitleiste: Nummer und Verbindungslinie stehen in einer eigenen Zeile ueber
   dem Titel. Die Linie laeuft von einer Nummer zur naechsten, nie durch Text. */
.myalo-akt h3{position:relative;padding-top:48px;
  font-weight:300;font-size:clamp(1.35rem,1.9vw,1.6rem);letter-spacing:-.015em;margin:6px 0 0}
.myalo-akt h3::before{content:counter(akt);position:absolute;left:0;top:0;display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;border:1.5px solid var(--myalo-hell);background:var(--grund);
  font-family:var(--schrift-2);font-weight:600;font-size:.8rem;color:var(--akzent)}
.myalo-akt:not(:last-child) h3::after{content:"";position:absolute;left:44px;
  right:calc(12px - clamp(20px,3vw,40px));top:15.5px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--myalo-hell),var(--myalo-hell-40));transform-origin:left}
.myalo-akt p{margin:0;color:var(--text-2);font-size:.96rem;line-height:1.64;max-width:30em}
/* Erlebnis: drei Karten nebeneinander bis hinunter zum kleinen Tablet. */
@media (max-width:640px){
  .myalo-band .myalo-akte{grid-template-columns:1fr;gap:36px}
  .myalo-akt:not(:last-child) h3::after{display:none}
  .myalo-akt__bild{aspect-ratio:3/2}
}

/* Was es bringt: drei Studienwerte als Ringe, darunter die Forschungspartner.
   Der Ring zeigt den Wert als Anteil des Kreises — 40 % fuellen ihn zu 40 %. */
.myalo-wirkung__kopf{max-width:36em}
.myalo-wirkung__kopf .myalo-fliess{font-size:clamp(1.08rem,1.5vw,1.24rem);line-height:1.62}
.myalo-band .myalo-werte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(24px,4vw,64px);row-gap:36px;margin-block-start:clamp(44px,5.6vw,72px)}
.myalo-wert{--ring:var(--myalo-dunkel);display:flex;flex-direction:column;align-items:center;
  gap:20px;text-align:center}
.myalo-wert--hell{--ring:var(--myalo-hell)}
.myalo-wert__ring{position:relative;width:clamp(150px,16vw,212px);aspect-ratio:1}
.myalo-wert__ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.myalo-wert__spur{fill:none;stroke:rgba(0,100,94,.12);stroke-width:5}
.myalo-wert__bogen{fill:none;stroke:var(--ring);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:326.726;
  stroke-dashoffset:calc(326.726px * (1 - var(--wert,var(--ziel,0)) / 100))}
.myalo-band .myalo-wert__zahl{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0;
  white-space:nowrap;font-weight:300;font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:1;
  letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums}
.myalo-wert__zaehler{font-variant-numeric:tabular-nums}
.myalo-wert__vor{color:var(--ring);margin-right:.04em}
.myalo-wert__einheit{font-size:.5em;color:var(--text-3);margin-left:.06em}
.myalo-band .myalo-wert__name{margin:0;font-weight:600;font-size:1.04rem;line-height:1.35;color:var(--text)}
.myalo-band .myalo-wert__detail{margin:4px 0 0;font-size:.92rem;line-height:1.5;color:var(--text-2)}

/* Forschungspartner: einheitlich grau, damit drei verschiedene Logos ruhig
   nebeneinanderstehen; beim Zeigen in Originalfarbe. Die Hoehen gleichen die
   verschiedenen Seitenverhaeltnisse optisch aus. */
.myalo-band .myalo-partner{margin-block-start:clamp(56px,7vw,92px);padding-top:clamp(28px,3.4vw,40px);
  border-top:1px solid var(--myalo-dunkel-20);text-align:center}
.myalo-band .myalo-partner__titel{margin:0 0 clamp(22px,2.6vw,30px);font-family:var(--schrift-2);
  font-weight:600;font-size:.86rem;letter-spacing:.02em;color:var(--text-2)}
.myalo-band .myalo-partner__studie{margin:-10px auto clamp(26px,3vw,36px);max-width:40em;
  font-size:.95rem;line-height:1.62;color:var(--text-2)}
.myalo-band .myalo-partner__logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:clamp(28px,5vw,72px)}
.myalo-partner__logos img{width:auto;filter:grayscale(1) contrast(1.1);opacity:.84;
  transition:filter .35s ease,opacity .35s ease}
.myalo-partner__logos li:hover img{filter:none;opacity:1}
.myalo-partner__logos li:nth-child(1) img{height:clamp(54px,5.8vw,72px)}
/* RUB: offizielles Logo aus dem RUB-Markenportal (Wuerfel + Name, Feedback David) */
.myalo-partner__logos li:nth-child(2) img{height:clamp(44px,4.8vw,58px)}
/* Optischer Ausgleich: der RUB-Wuerfel ist links eine geschlossene Flaeche,
   rechts franst der Schriftzug aus (Ruhr- und Bochum kuerzer als Universitaet).
   Ohne Ausgleich wirkt die Luecke rechts vom RUB-Logo deutlich groesser. */
.myalo-partner__logos li:nth-child(2){transform:translateX(var(--rub-ausgleich,6.5%))}
.myalo-partner__logos li:nth-child(3) img{height:clamp(36px,3.8vw,48px)}

/* Schmal: Ring links, Text rechts — drei Ringe nebeneinander waeren zu klein. */
@media (max-width:700px){
  .myalo-band .myalo-werte{grid-template-columns:minmax(0,1fr);row-gap:26px}
  .myalo-wert{flex-direction:row;align-items:center;text-align:left;gap:20px}
  .myalo-wert__ring{width:112px;flex:none}
  .myalo-band .myalo-wert__zahl{font-size:1.75rem}
}

/* Merkmalszeile: sechs kurze Aussagen direkt unter dem Auftakt. Bewusst als
   dichter Streifen gesetzt — schmalere Hoehe als die grossen Abschnitte, damit
   nach dem Auftakt nicht sofort wieder Weite kommt. Keine Kaesten: jedes
   Merkmal traegt nur den kurzen Markenstrich aus dem Brandbook ueber sich. */
.myalo-merkmalband{padding-block:clamp(52px,6vw,86px)}
.myalo-merkmale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(30px,4.4vw,68px);row-gap:clamp(34px,4vw,52px)}
.myalo-merkmale > *{margin:0;padding:0;display:grid;gap:10px;align-content:start}
.myalo-merkmale > *::before{content:"";width:26px;height:2px;
  background:var(--myalo-hell);border-radius:2px;margin-bottom:4px}
.myalo-merkmale h3{font-family:var(--schrift);font-weight:300;
  font-size:clamp(1.15rem,1.5vw,1.32rem);letter-spacing:-.012em;
  line-height:1.28;margin:0;color:var(--text)}
.myalo-merkmale p{font-size:.92rem;color:var(--text-2);line-height:1.62;margin:0;
  max-width:30em}
@media (max-width:820px){.myalo-merkmale{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.myalo-merkmale{grid-template-columns:1fr}}

/* Bildpaar neben dem Text */
.myalo-bildpaar{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.myalo-bildpaar > :first-child{grid-column:1/-1}
.myalo-bildstapel{display:grid;gap:16px}

/* Journeys als Zeitachse — die Breite der Spur ist die Laenge der Journey */
.myalo-band .myalo-journeys{display:grid;gap:0;margin-block-start:clamp(36px,5vw,56px)}
.myalo-spur{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);gap:clamp(20px,3.4vw,48px);
  align-items:center;padding:clamp(26px,3.4vw,40px) 0;border-top:1px solid rgba(227,244,244,.18)}
/* Weltreise: jeder Ort mit einem Stimmungsbild. Es faehrt beim Hereinscrollen
   ganz leicht heran — wie das randlose Bild im Alltag. */
.myalo-band .myalo-spur__bild{aspect-ratio:4/3;border-radius:var(--rundung);overflow:hidden;background:#13201f}
.myalo-band .myalo-spur__bild img{width:100%;height:100%;object-fit:cover}
.js-bewegt .myalo-spur .myalo-spur__bild img{transform:scale(1.08);transition:transform 1.8s cubic-bezier(.22,1,.36,1)}
.js-bewegt .myalo-spur.ist-da .myalo-spur__bild img{transform:none}
/* Weitere Reiseziele: ruhige Liste, keine Kaesten */
.myalo-band .myalo-reiseziele{margin-block-start:clamp(36px,4.4vw,56px)}
.myalo-band .myalo-reiseziele__titel{margin:0 0 14px;font-family:var(--schrift-2);font-weight:600;font-size:.86rem;color:var(--myalo-hell)}
.myalo-band .myalo-reiseziele__liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 12px}
.myalo-reiseziele__liste li{padding:8px 14px;border-radius:999px;border:1px solid rgba(227,244,244,.2);
  font-size:.9rem;line-height:1.3;color:var(--myalo-hell-40)}
.myalo-spur:last-child{border-bottom:1px solid rgba(227,244,244,.18)}
.myalo-spur__name{font-weight:300;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.02em;margin:0 0 6px}
.myalo-band .myalo-spur__dauer{font-family:var(--schrift-2);font-weight:600;font-size:.8rem;letter-spacing:.02em;
  color:var(--myalo-hell);display:block;margin-bottom:10px}
.myalo-spur__text{font-size:.95rem;line-height:1.62;color:var(--myalo-hell-40);margin:0;max-width:44ch}
.myalo-spur__achse{position:relative}
/* Alle Journeys dauern zehn Minuten: die Spur ist immer gleich lang. Was sich
   unterscheidet, ist die Intensitaet — Ausschlag der Welle, Takt und Groesse der Punkte. */
.myalo-spur__welle{display:block;width:100%;height:58px;overflow:visible}
.myalo-spur__welle path{fill:none;stroke:var(--myalo-hell);stroke-width:1.6;stroke-linecap:round;opacity:.85}
.myalo-spur__punkte{display:flex;align-items:center;gap:0;width:100%;
  height:16px;margin-top:10px;justify-content:space-between}
.myalo-spur__punkte i{width:6px;height:6px;border-radius:50%;background:var(--myalo-hell);opacity:.3;
  animation:myalo-puls var(--takt,3.6s) ease-in-out infinite}
.myalo-spur__skala{display:flex;justify-content:space-between;margin-top:12px;
  font-family:var(--schrift-2);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(227,244,244,.42);width:100%}
@keyframes myalo-puls{0%,100%{opacity:.22;transform:scale(1)}45%{opacity:1;transform:scale(var(--hub,1.5))}}
.myalo-spur__achse--intensiv .myalo-spur__welle path{stroke-width:1.9;opacity:1}
.myalo-spur__achse--sanft .myalo-spur__welle path{opacity:.7}
@media (max-width:860px){
  .myalo-spur{grid-template-columns:minmax(0,1fr);gap:20px}
  .myalo-band .myalo-spur__bild{aspect-ratio:16/9}
  .myalo-spur__welle,.myalo-spur__punkte,.myalo-spur__skala{width:100%}
}
/* Tablet hochkant: Bild und Text nebeneinander, die Spur darunter ueber die
   ganze Breite — sonst wird jedes Reiseziel bildschirmhoch. */
@media (min-width:600px) and (max-width:860px){
  .myalo-spur{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px 28px}
  .myalo-band .myalo-spur__bild{aspect-ratio:4/3}
  .myalo-spur__achse{grid-column:1 / -1}
}

/* Momente im Alltag — mit den offiziellen Markenicons */
.myalo-band .myalo-momente{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,52px);
  margin-block-start:clamp(56px,7vw,84px)}
.myalo-moment .wp-block-image{width:74px;height:74px;border-radius:50%;background:var(--myalo-weiss);
  display:grid;place-items:center;margin:0 0 20px;box-shadow:0 2px 10px -6px rgba(0,63,59,.45)}
.myalo-band .myalo-moment img{width:38px;height:38px}
.myalo-moment h3{font-family:var(--schrift-2);font-weight:600;font-size:.95rem;margin:0 0 8px}
.myalo-moment p{margin:0;font-size:.94rem;line-height:1.62;color:var(--text-2)}
@media (max-width:760px){.myalo-band .myalo-momente{grid-template-columns:minmax(0,1fr);gap:32px}}

/* Technische Angaben — zwei Spalten aus gewoehnlichen Listen */
.myalo-band .myalo-daten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,72px);
  margin-block-start:clamp(40px,5vw,60px);align-items:start}
.myalo-daten ul{list-style:none;margin:0;padding:0}
.myalo-daten li{display:grid;grid-template-columns:minmax(110px,.45fr) minmax(0,1fr);gap:18px;
  padding:16px 0;border-bottom:1px solid var(--linie-zart);align-items:baseline;
  font-size:.95rem;line-height:1.6;color:var(--text-2);font-variant-numeric:tabular-nums}
.myalo-daten li strong{font-family:var(--schrift-2);font-weight:600;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--myalo-dunkel-80)}
@media (max-width:760px){
  .myalo-band .myalo-daten{grid-template-columns:minmax(0,1fr)}
  .myalo-daten li{grid-template-columns:1fr;gap:4px}
}

/* Randloses Bild: einmal auf der Seite macht der Abschnitt ueber die volle
   Breite auf. Das ist die einzige Stelle ohne Bahn — bewusst nur eine, sonst
   verliert sie ihre Wirkung. */
.myalo-band .myalo-vollbild{margin:clamp(46px,5.6vw,78px) 0 0;width:100%}
.myalo-band .myalo-vollbild img{width:100%;height:clamp(320px,44vw,640px);object-fit:cover;
  object-position:72% 24%;display:block;border-radius:0}
/* Die Momente ruecken danach naeher heran: sie gehoeren zum selben Gedanken. */
.myalo-band .myalo-vollbild + .myalo-bahn .myalo-momente{margin-block-start:clamp(44px,5vw,72px)}
.myalo-einleitung{max-width:var(--bahn-eng)}

/* Fragen */
.myalo-band .myalo-fragen{margin-block-start:clamp(32px,4vw,48px);border-top:1px solid var(--linie)}
.myalo-fragen details{border-bottom:1px solid var(--linie);margin:0}
.myalo-fragen summary{list-style:none;cursor:pointer;padding:26px 52px 26px 0;position:relative;
  font-family:var(--schrift);font-weight:300;font-size:clamp(1.08rem,1.5vw,1.26rem);
  line-height:1.34;letter-spacing:-.012em;color:var(--text);
  transition:color .2s ease}
.myalo-fragen summary:hover{color:var(--akzent)}
.myalo-fragen summary::-webkit-details-marker{display:none}
.myalo-fragen summary::after{content:"";position:absolute;right:6px;top:50%;width:16px;height:16px;
  margin-top:-8px;
  background:
    linear-gradient(var(--myalo-dunkel),var(--myalo-dunkel)) center/16px 1px no-repeat,
    linear-gradient(var(--myalo-dunkel),var(--myalo-dunkel)) center/1px 16px no-repeat;
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s ease;opacity:.62}
.myalo-fragen summary:hover::after{opacity:1}
.myalo-fragen details[open] summary::after{transform:rotate(45deg)}
.myalo-fragen details p{margin:0 0 28px;max-width:62ch;color:var(--text-2);font-size:1rem;line-height:1.7}

/* Abschluss / Benachrichtigung */
.myalo-abschluss{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,80px);align-items:center}
@media (max-width:860px){.myalo-abschluss{grid-template-columns:1fr}}
.myalo-formular{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.myalo-formular input[type=email]{
  flex:1 1 240px;min-width:0;padding:14px 18px;border-radius:999px;
  border:1px solid rgba(227,244,244,.3);background:rgba(255,255,255,.06);
  color:var(--myalo-blass);font-family:var(--schrift);font-size:.95rem}
.myalo-formular input[type=email]::placeholder{color:rgba(227,244,244,.45)}
.myalo-formular input[type=email]:focus{border-color:var(--myalo-hell);outline:none}

/* Das Band: Rendering aus dem 3D-Modell mit fuenf Beschriftungen, in zwei
   Farben (A dunkel, B hell; gleiche Kamera, gleiche Ankerpunkte
   aus punkte.json). Der Bildgrund ist hell — Punkte und Linien deshalb in
   tiefem Teal, Schilder weiss. Auf breiten Schirmen fuehren Linien zu
   Schildern; schmal werden daraus nummerierte Punkte mit einer Liste darunter.
   Die Liste ist immer im Dokument, damit Vorleseprogramme sie finden. */
.myalo-band .myalo-anmerkung{margin:clamp(34px,4.6vw,56px) 0 0}
.myalo-variante{display:none;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.myalo-anmerkung--mit-umschalter .myalo-variante{display:flex}
.myalo-variante__knopf{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 9px;border-radius:999px;
  border:1px solid var(--myalo-dunkel-20);background:rgba(255,255,255,.6);color:var(--text-2);cursor:pointer;
  font-family:var(--schrift-2);font-weight:600;font-size:.84rem;transition:border-color .2s ease,background-color .2s ease,color .2s ease}
.myalo-variante__knopf:hover{border-color:var(--myalo-dunkel-40)}
.myalo-variante__knopf[aria-pressed="true"]{border-color:var(--myalo-dunkel);background:#FFFFFF;color:var(--text)}
.myalo-variante__farbe{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.myalo-variante__farbe--a{background:linear-gradient(135deg,#00645E 0 54%,#2A2D2D 54% 100%)}
.myalo-variante__farbe--b{background:linear-gradient(135deg,#38BBB8 0 54%,#F4F5F4 54% 100%)}
.myalo-anmerkung__buehne{position:relative;border-radius:var(--rundung);overflow:hidden;
  box-shadow:var(--schatten);background:#E9EEEE;aspect-ratio:3/2}
.myalo-anmerkung__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .6s ease}
.myalo-anmerkung__bild--b{opacity:0}
.myalo-anmerkung[data-variante="B"] .myalo-anmerkung__bild--b{opacity:1}
.myalo-anmerkung__linien{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Durchgezogene Linie; sie waechst beim Einblenden vom Punkt zum Schild
   (hoch: nach oben, sonst nach unten). */
.myalo-anmerkung__linien line{stroke:var(--myalo-dunkel);stroke-width:1.6;stroke-linecap:round;
  vector-effect:non-scaling-stroke;opacity:.75;transform-box:fill-box;transform-origin:50% 0}
.myalo-anmerkung__linien line.hoch{transform-origin:50% 100%}
.myalo-anmerkung__marke{position:absolute;left:var(--x);top:var(--y);width:14px;height:14px;
  margin:-7px 0 0 -7px;border-radius:50%;background:var(--myalo-dunkel);
  box-shadow:0 0 0 3px #FFFFFF,0 0 0 8px rgba(0,100,94,.18);font-size:0;color:transparent;line-height:1}
.myalo-anmerkung__schild{position:absolute;left:var(--x);top:var(--y);display:grid;gap:2px;
  padding:9px 13px 10px;border-radius:11px;white-space:nowrap;background:rgba(255,255,255,.94);
  box-shadow:0 8px 22px -12px rgba(0,63,59,.45),0 0 0 1px rgba(0,100,94,.1);
  font-size:.82rem;line-height:1.35;color:var(--text-2)}
.myalo-anmerkung__schild strong{font-family:var(--schrift-2);font-weight:600;font-size:.84rem;color:var(--text)}
.myalo-anmerkung__schild--oben{transform:translate(-13px,calc(-100% - 2px))}
.myalo-anmerkung__schild--oben-links{text-align:right;transform:translate(calc(-100% + 13px),calc(-100% - 2px))}
.myalo-anmerkung__schild--unten{transform:translate(-13px,2px)}
.myalo-anmerkung__schild--unten-links{text-align:right;transform:translate(calc(-100% + 13px),2px)}
.myalo-anmerkung__liste{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.myalo-band .myalo-dasband .myalo-merkmale,
.myalo-dasband .myalo-merkmale{margin-block-start:clamp(48px,6vw,80px)}
/* Produktfilm unter dem Rendering: Tasten leuchten nacheinander, dann pulsiert
   der Pulssensor — erst Dunkel, dann Hell. Laeuft nur, solange er im Bild ist. */
.myalo-band .myalo-produktfilm{position:relative;margin:clamp(18px,2.4vw,28px) 0 0;aspect-ratio:16/9;
  border-radius:var(--rundung);overflow:hidden;box-shadow:var(--schatten);background:#0A1413}
.myalo-produktfilm__video{width:100%;height:100%;object-fit:cover;display:block}
/* Mittlere Breiten: Schilder kleiner, damit sie nicht ineinander laufen */
@media (max-width:1100px) and (min-width:821px){
  .myalo-anmerkung__schild{padding:7px 10px 8px;font-size:.74rem}
  .myalo-anmerkung__schild strong{font-size:.76rem}
}
/* Schmal: dieselben Linien wie am Desktop, am Ende statt des Schilds nur die
   Nummer — ausserhalb des Bands, damit nichts auf dem Produkt liegt. Die Texte
   stehen nummeriert in der Liste darunter. */
.myalo-anmerkung__buehne{counter-reset:schild}
.myalo-anmerkung__schild{counter-increment:schild}
@media (max-width:820px){
  .myalo-anmerkung__marke{width:10px;height:10px;margin:-5px 0 0 -5px;
    box-shadow:0 0 0 2px #FFFFFF,0 0 0 6px rgba(0,100,94,.18)}
  .myalo-anmerkung__schild{display:grid;place-items:center;width:24px;height:24px;padding:0;gap:0;
    border-radius:50%;background:var(--myalo-dunkel);box-shadow:0 0 0 2px #FFFFFF,0 3px 10px -3px rgba(0,63,59,.55);
    font-size:0;line-height:1;color:transparent;white-space:normal}
  .myalo-anmerkung__schild strong{display:none}
  .myalo-anmerkung__schild::before{content:counter(schild);font-family:var(--schrift-2);font-weight:600;
    font-size:.76rem;color:#FFFFFF}
  .myalo-anmerkung__schild--oben,.myalo-anmerkung__schild--oben-links{transform:translate(-50%,calc(-100% + 5px))}
  .myalo-anmerkung__schild--unten,.myalo-anmerkung__schild--unten-links{transform:translate(-50%,-5px)}
  .myalo-band .myalo-anmerkung__liste{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;
    list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;counter-reset:punkt}
  .myalo-anmerkung__liste li{counter-increment:punkt;display:grid;grid-template-columns:26px 1fr;
    column-gap:12px;font-size:.94rem;line-height:1.5;color:var(--text-2)}
  .myalo-anmerkung__liste li::before{content:counter(punkt);grid-row:1 / span 2;width:26px;height:26px;
    border-radius:50%;background:var(--myalo-dunkel);display:grid;place-items:center;
    font-family:var(--schrift-2);font-weight:600;font-size:.76rem;color:#FFFFFF}
  .myalo-anmerkung__liste strong{font-family:var(--schrift-2);font-weight:600;font-size:.9rem;color:var(--text)}
}

/* Seite nach dem Klick auf den Link in der Bestaetigungsmail (inc/warteliste.php) */
.myalo-bestaetigung{min-height:calc(100svh - 85px - 360px);display:flex;align-items:center}
.myalo-bestaetigung .myalo-bahn{width:100%}
.myalo-band.myalo-bestaetigung .myalo-fliess{margin:0 0 30px;max-width:34em}

/* Warteliste */
.myalo-band .myalo-warteliste__text > * + *{margin-block-start:1.1em}
.myalo-liste{position:relative;max-width:540px;margin:28px 0 0}
.myalo-liste__etikett{display:block;font-family:var(--schrift-2);font-weight:600;font-size:.8rem;
  letter-spacing:.02em;color:var(--myalo-blass);margin:0 0 10px}
.myalo-liste__zeile{display:flex;flex-wrap:wrap;gap:10px}
.myalo-liste__feld{flex:1 1 250px;min-width:0;padding:15px 20px;border-radius:999px;
  border:1px solid rgba(227,244,244,.36);background:rgba(255,255,255,.07);color:#FFFFFF;
  font-family:var(--schrift);font-size:1rem;line-height:1.3;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.myalo-liste__feld::placeholder{color:rgba(227,244,244,.5)}
.myalo-liste__feld:focus{outline:none;border-color:var(--myalo-hell);background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(56,187,184,.3)}
.myalo-liste__feld[aria-invalid="true"]{border-color:#FFFFFF;box-shadow:0 0 0 3px rgba(255,255,255,.22)}
.myalo-liste__knopf{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:999px;border:0;cursor:pointer;
  background:var(--myalo-hell);color:var(--myalo-dunkel-tief);
  font-family:var(--schrift-2);font-weight:600;font-size:.88rem;letter-spacing:.03em;
  transition:background-color .2s ease,transform .2s ease}
.myalo-liste__knopf:hover{background:var(--myalo-hell-60)}
.myalo-liste__knopf:active{transform:translateY(1px)}
.myalo-liste__knopf:disabled{opacity:.65;cursor:progress}
.myalo-liste__falle{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.myalo-band .myalo-liste__meldung{margin:14px 0 0;min-height:1.5em;font-size:.94rem;line-height:1.5;
  color:var(--myalo-blass)}
.myalo-band .myalo-liste__hinweis{margin:10px 0 0;font-size:.78rem;line-height:1.55;color:rgba(227,244,244,.64)}
.myalo-liste__hinweis a{color:var(--myalo-hell)}
/* Nach dem Eintragen: eine freiwillige Frage und Teilen */
.myalo-liste__nachfrage{margin-top:22px;display:grid;gap:12px}
.myalo-band .myalo-liste__frage{margin:0;font-family:var(--schrift-2);font-weight:600;font-size:.88rem;color:#FFFFFF}
.myalo-liste__wahl{display:flex;flex-wrap:wrap;gap:8px}
.myalo-liste__chip{padding:10px 16px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(227,244,244,.4);background:transparent;color:var(--myalo-blass);
  font-family:var(--schrift);font-size:.92rem;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.myalo-liste__chip:hover{border-color:var(--myalo-hell)}
.myalo-liste__chip[aria-pressed="true"]{background:var(--myalo-hell);border-color:var(--myalo-hell);color:var(--myalo-dunkel-tief)}
.myalo-liste__teilen{justify-self:start;margin-top:8px;padding:0;border:0;background:none;cursor:pointer;
  font-family:var(--schrift-2);font-weight:600;font-size:.88rem;color:var(--myalo-hell);
  text-decoration:underline;text-decoration-color:rgba(56,187,184,.5);text-underline-offset:4px}
.myalo-liste__teilen:hover{text-decoration-color:currentColor}
.myalo-band .myalo-liste__antwort{margin:0;min-height:0;font-size:.86rem;line-height:1.5;color:var(--myalo-hell-40)}
.myalo-band .myalo-liste__antwort:empty{display:none}
.js-bewegt .myalo-liste__nachfrage{animation:myalo-danke .5s cubic-bezier(.22,1,.36,1) .35s both}

/* Anlaesse ("Kurz vor dem grossen Moment"): ein schmaler eigener Abschnitt mit
   kleinen Videokarten. Bewusst klein — weitere Anlaesse sind eine Karte mehr. */
.myalo-band .myalo-anlaesse{margin:0}
.myalo-band .myalo-anlaesse__reihe{margin-block-start:clamp(28px,3.6vw,48px)}
/* Vier Karten in einer Reihe (Laptop und Tablet), am Handy zwei mal zwei. */
.myalo-anlaesse__reihe{display:grid;grid-template-columns:repeat(4,minmax(0,248px));gap:clamp(14px,2.2vw,28px)}
.myalo-anlass{margin:0}
.myalo-anlass__film{position:relative;aspect-ratio:1/1;border-radius:var(--rundung);overflow:hidden;
  background:#0A1413;box-shadow:0 10px 28px -16px rgba(0,63,59,.45)}
.myalo-anlass__video{width:100%;height:100%;object-fit:cover;display:block}
.myalo-anlass figcaption{margin-top:12px;font-size:.9rem;line-height:1.5;color:var(--text-2);overflow-wrap:break-word}
.myalo-anlass figcaption strong{display:block;font-family:var(--schrift-2);font-weight:600;font-size:.86rem;color:var(--text)}
.myalo-anlass .myalo-filmknopf{width:34px;height:34px;right:10px;bottom:10px}
.myalo-anlass .myalo-filmknopf svg{width:14px;height:14px}
@media (max-width:600px){
  .myalo-anlaesse__reihe{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .myalo-anlass figcaption{font-size:.84rem}
}

/* Fester Knopf zur Warteliste (nur schmale Bildschirme, per Skript) */
.myalo-haftknopf{position:fixed;left:0;right:0;bottom:0;z-index:58;pointer-events:none;
  padding:12px var(--rand) calc(12px + env(safe-area-inset-bottom));
  transform:translateY(130%);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.myalo-haftknopf.ist-sichtbar{transform:none;pointer-events:auto}
.myalo-haftknopf__link{display:flex;align-items:center;justify-content:center;height:50px;border-radius:999px;
  background:var(--myalo-hell);color:var(--myalo-dunkel-tief);text-decoration:none;
  font-family:var(--schrift-2);font-weight:600;font-size:.92rem;letter-spacing:.03em;
  box-shadow:0 12px 28px -10px rgba(0,30,28,.55),0 0 0 1px rgba(255,255,255,.18)}
@media (min-width:861px){.myalo-haftknopf{display:none}}
/* Tablet hochkant: kein Balken ueber die ganze Breite, sondern ein Knopf. */
@media (min-width:600px){.myalo-haftknopf__link{max-width:420px;margin-inline:auto}}
body.mit-haftknopf .myalo-fuss{padding-bottom:calc(80px + env(safe-area-inset-bottom))}

/* Bestaetigung: das Formular weicht einer ruhigen Rueckmeldung mit Haken. */
.myalo-liste__danke{display:grid;grid-template-columns:44px 1fr;gap:4px 16px;align-items:center;
  padding:20px 22px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(227,244,244,.2)}
.myalo-liste__danke svg{grid-row:1 / span 2;width:44px;height:44px}
.myalo-liste__danke circle{fill:none;stroke:rgba(56,187,184,.35);stroke-width:2}
.myalo-liste__danke path{fill:none;stroke:var(--myalo-hell);stroke-width:2.6;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.myalo-liste__danke strong{font-family:var(--schrift-2);font-weight:600;font-size:.98rem;color:#FFFFFF}
.myalo-liste__danke span{font-size:.9rem;line-height:1.5;color:var(--myalo-hell-40)}

/* Inhaltsseiten (Impressum, Datenschutz, einfache Seiten) */
.myalo-seite{max-width:var(--bahn);margin-inline:auto;padding:clamp(56px,8vw,110px) var(--rand)}
.myalo-seite__satz{max-width:70ch}
.myalo-seite__satz h2{font-weight:300;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.02em;margin:2em 0 .5em}
.myalo-seite__satz > :first-child{margin-top:0}
.myalo-seite{padding-top:clamp(40px,5vw,72px)}
.myalo-seite__satz h3{font-family:var(--schrift-2);font-weight:600;font-size:1rem;margin:1.8em 0 .4em}
.myalo-seite__satz p{color:var(--text-2);margin:0 0 1em}
.myalo-seite__satz ul{color:var(--text-2)}

/* Sprungmarke fuer Tastaturnutzung */
.myalo-sprung{position:absolute;left:-9999px;top:0;background:var(--myalo-dunkel);color:#fff;
  padding:12px 20px;z-index:100;border-radius:0 0 8px 0}
.myalo-sprung:focus{left:0}

/* ---------------------------- 7 Bewegung -------------------------------- */
/* Grundregel: Bewegung erzaehlt etwas oder antwortet auf eine Handlung. Nichts
   blendet nur ein, weil es ein Abschnitt ist; Text steht einfach da.

   Bewegte Momente dieser Seite:
   - Auftakt: einmal beim Laden (Film, Satz), dann Parallaxe beim Wegscrollen
   - Warum: die Aussage wird beim Hereinscrollen scharf
   - Hoeren und Spueren: die Buehne, der eine grosse Moment der Seite
   - Erlebnis: die Linie zwischen den drei Schritten zieht sich durch
   - Journeys: die Spur zeichnet sich
   - Was es bringt: die Ringe fuellen sich, die Zahl zaehlt
   - Das Band: Linien und Schilder erscheinen der Reihe nach
   - Warteliste: der Haken zeichnet sich, wenn man sich eintraegt
   - Kapitelueberschriften: der Markenstrich zieht sich auf

   Alle versteckten Ausgangszustaende haengen an .js-bewegt (gesetzt von einem
   Skript im Kopf, nur mit Javascript und ohne reduzierte Bewegung). Ohne diese
   Klasse steht jedes Element in seinem Endzustand da. */

/* Auftakt beim Laden */
@keyframes myalo-auftritt{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes myalo-einblenden{from{opacity:0}to{opacity:1}}
.js-bewegt .myalo-auftakt__film{animation:myalo-einblenden 1.8s ease both}
.js-bewegt .myalo-auftakt__satz > *{animation:myalo-auftritt 1.1s cubic-bezier(.22,1,.36,1) both}
.js-bewegt .myalo-auftakt__satz > :nth-child(1){animation-delay:.3s}
.js-bewegt .myalo-auftakt__satz > :nth-child(2){animation-delay:.5s}
.js-bewegt .myalo-auftakt__satz > :nth-child(3){animation-delay:.68s}
.js-bewegt .myalo-auftakt__satz > :nth-child(4){animation-delay:.86s}
.js-bewegt .myalo-auftakt__satz > :nth-child(5){animation-delay:1.02s}
/* Die Schlagzeile baut sich Wort fuer Wort auf und wird dabei scharf — dasselbe
   Motiv wie bei der Aussage im Abschnitt Warum. Das Skript teilt sie in Woerter. */
@keyframes myalo-wort{from{opacity:0;transform:translateY(.32em);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.js-bewegt .myalo-auftakt__satz > .myalo-schlagzeile.ist-geteilt{animation:none}
.myalo-wort{display:inline-block}
.js-bewegt .myalo-wort{animation:myalo-wort 1.05s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(.28s + var(--i,0) * .085s)}

/* Kapitelueberschriften: der kurze Markenstrich zieht sich auf */
.js-bewegt .myalo-kapitel-titel::after,
.js-bewegt .myalo-aussage::after{transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.22,1,.36,1) .15s}
.js-bewegt .myalo-kapitel-titel.ist-da::after,
.js-bewegt .myalo-aussage.ist-da::after{transform:none}

/* Warum: scharf werden */
.js-bewegt .myalo-aussage{filter:blur(calc((1 - var(--scharf,1)) * 9px));
  opacity:calc(.2 + var(--scharf,1) * .8)}

/* Buehne: ohne Schritt (noch nicht erreicht) ist nichts gezeichnet */
.js-bewegt .myalo-buehne{height:300svh;padding-block:0}
.js-bewegt .myalo-buehne__halt{position:sticky;top:0;height:100svh;display:flex;align-items:center;
  padding-top:68px;overflow:hidden}
.js-bewegt .myalo-buehne__schritt{opacity:.3;transition:opacity .6s ease}
.js-bewegt [data-schritt="0"] .myalo-buehne__schritt:nth-child(1),
.js-bewegt [data-schritt="1"] .myalo-buehne__schritt:nth-child(1),
.js-bewegt [data-schritt="2"] .myalo-buehne__schritt:nth-child(2),
.js-bewegt [data-schritt="3"] .myalo-buehne__schritt:nth-child(3){opacity:1}
.js-bewegt .myalo-buehne .myalo-ringe__spueren{transform:translateX(-46px)}
.js-bewegt .myalo-buehne .myalo-ringe__hoeren{transform:translateX(46px)}
.js-bewegt [data-schritt="3"] .myalo-ringe__spueren,
.js-bewegt [data-schritt="3"] .myalo-ringe__hoeren{transform:none}
.js-bewegt .myalo-buehne .myalo-ringe__ring{stroke-dashoffset:1.01}
.js-bewegt [data-schritt="1"] .myalo-ringe__hoeren .myalo-ringe__ring,
.js-bewegt [data-schritt="2"] .myalo-ringe__ring,
.js-bewegt [data-schritt="3"] .myalo-ringe__ring{stroke-dashoffset:0}
.js-bewegt .myalo-buehne .myalo-ringe__spueren .myalo-ringe__ring{transition-delay:.1s}
.js-bewegt .myalo-buehne .myalo-ringe__name{opacity:0;transition:opacity .8s ease .5s}
.js-bewegt [data-schritt="1"] .myalo-ringe__hoeren .myalo-ringe__name,
.js-bewegt [data-schritt="2"] .myalo-ringe__name,
.js-bewegt [data-schritt="3"] .myalo-ringe__name{opacity:1}
/* Der Vibrations-Ring ist jetzt dunkelgruen: der Klang-Ring muss in Schritt 2
   deutlich zuruecktreten, sonst wirkt er gleich hell und nicht inaktiv. */
.js-bewegt [data-schritt="2"] .myalo-ringe__hoeren{opacity:.2}
.js-bewegt .myalo-buehne .myalo-ringe__scheibe{opacity:0;transition:opacity .6s ease}
.js-bewegt .myalo-buehne .myalo-ringe__schein{opacity:0}
.js-bewegt [data-schritt="3"] .myalo-ringe__schein{opacity:1}
@keyframes myalo-welle{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.62)}}
@keyframes myalo-scheibe{0%,100%{opacity:.35;transform:scale(1)}20%{opacity:1;transform:scale(1.65)}45%{opacity:.35;transform:scale(1)}}
.js-bewegt [data-schritt="1"] .myalo-ringe__welle,
.js-bewegt [data-schritt="3"] .myalo-ringe__welle{animation:myalo-welle 2.7s cubic-bezier(.2,.6,.3,1) infinite}
.js-bewegt .myalo-ringe__welle:nth-of-type(2){animation-delay:.9s}
.js-bewegt .myalo-ringe__welle:nth-of-type(3){animation-delay:1.8s}
.js-bewegt [data-schritt="2"] .myalo-ringe__scheibe,
.js-bewegt [data-schritt="3"] .myalo-ringe__scheibe{animation:myalo-scheibe 2s ease-in-out infinite both}
.js-bewegt .myalo-ringe__scheibe:nth-of-type(4){animation-delay:0.2s}
.js-bewegt .myalo-ringe__scheibe:nth-of-type(5){animation-delay:0.4s}
.js-bewegt .myalo-ringe__scheibe:nth-of-type(6){animation-delay:0.6s}
.js-bewegt .myalo-ringe__scheibe:nth-of-type(7){animation-delay:0.8s}
.js-bewegt .myalo-ringe__scheibe:nth-of-type(8){animation-delay:1.0s}
.js-bewegt .myalo-ringe__scheibe:nth-of-type(9){animation-delay:1.2s}
.js-bewegt .myalo-ringe__scheibe:nth-of-type(10){animation-delay:1.4s}
.js-bewegt .myalo-ringe__scheibe:nth-of-type(11){animation-delay:1.6s}
.js-bewegt .myalo-ringe__scheibe:nth-of-type(12){animation-delay:1.8s}
@media (max-width:900px){
  .js-bewegt .myalo-buehne__halt{padding-top:60px}
  .js-bewegt .myalo-band .myalo-buehne__schritte{grid-template-areas:"s";padding-left:0;gap:0}
  .js-bewegt .myalo-buehne__schritte::before,.js-bewegt .myalo-buehne__schritte::after{display:none}
  .js-bewegt .myalo-buehne__schritt{grid-area:s;opacity:0}
}

/* Niedrige Telefone: die Buehne kompakter, damit alles in den Halt passt
   (gemessen: bei 360 x 640 fehlten sonst 8 px). */
@media (max-width:900px) and (max-height:700px){
  .myalo-ringe{max-height:27svh}
  .myalo-buehne__text .myalo-kapitel-titel{font-size:1.4rem}
  .myalo-buehne__text .myalo-fliess{font-size:.9rem;line-height:1.5}
  .myalo-buehne__schritt h3{font-size:1.3rem}
  .myalo-buehne__schritt p{font-size:.88rem;line-height:1.5}
  .myalo-band .myalo-buehne__schritte{margin-top:14px}
}
/* Sehr niedrige Bildschirme (Telefon quer): nicht anheften, sondern stapeln
   wie ohne Skript. Das Skript prueft dieselbe Grenze und setzt Schritt 3. */
@media (max-height:620px){
  .js-bewegt .myalo-buehne{height:auto;padding-block:clamp(56px,8vw,96px)}
  .js-bewegt .myalo-buehne__halt{position:relative;height:auto;display:block;padding-top:0;overflow:visible}
  .js-bewegt .myalo-buehne .myalo-buehne__schritt{opacity:1;grid-area:auto}
  .js-bewegt .myalo-band .myalo-buehne .myalo-buehne__schritte{grid-template-areas:none;gap:18px;padding-left:30px}
  .js-bewegt .myalo-band .myalo-buehne .myalo-buehne__schritte::before,
  .js-bewegt .myalo-band .myalo-buehne .myalo-buehne__schritte::after{display:block}
  .js-bewegt .myalo-band .myalo-buehne .myalo-buehne__schritte::after{transform:none}
}

/* Erlebnis: die Verbindungslinie zieht sich von Schritt zu Schritt */
.js-bewegt .myalo-akt:not(:last-child) h3::after{transform:scaleX(0);
  transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.js-bewegt .myalo-akte.ist-da .myalo-akt--1 h3::after{transform:none;transition-delay:.3s}
.js-bewegt .myalo-akte.ist-da .myalo-akt--2 h3::after{transform:none;transition-delay:1.2s}

/* Der Markenstrich ueber jedem Merkmal zieht sich auf. */
.js-bewegt .myalo-merkmale > *::before{width:0;transition:width .75s cubic-bezier(.22,1,.36,1)}
.myalo-merkmale.ist-da > *::before{width:26px}
.myalo-merkmale.ist-da > :nth-child(2)::before{transition-delay:.07s}
.myalo-merkmale.ist-da > :nth-child(3)::before{transition-delay:.14s}
.myalo-merkmale.ist-da > :nth-child(4)::before{transition-delay:.21s}
.myalo-merkmale.ist-da > :nth-child(5)::before{transition-delay:.28s}
.myalo-merkmale.ist-da > :nth-child(6)::before{transition-delay:.35s}

/* Journeys: die Spur zeichnet sich (pathLength="1" macht den Strich exakt). */
.js-bewegt .myalo-spur__welle path{stroke-dasharray:1;stroke-dashoffset:1}
.myalo-auf.ist-da .myalo-spur__welle path{animation:myalo-zeichnen 2.1s cubic-bezier(.33,0,.18,1) .15s forwards}
@keyframes myalo-zeichnen{to{stroke-dashoffset:0}}
.js-bewegt .myalo-spur__punkte i{animation-play-state:paused}
.myalo-auf.ist-da .myalo-spur__punkte i{animation-play-state:running}

/* Das Band: erst die Punkte, dann die Linien, dann die Schilder */
@keyframes myalo-marke{0%{box-shadow:0 0 0 3px #FFFFFF,0 0 0 3px rgba(0,100,94,.45)}100%{box-shadow:0 0 0 3px #FFFFFF,0 0 0 18px rgba(0,100,94,0)}}
.js-bewegt .myalo-anmerkung__marke{transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.js-bewegt .myalo-anmerkung.ist-da .myalo-anmerkung__marke{transform:none;
  animation:myalo-marke 2.8s ease-out 1.4s infinite}
.js-bewegt .myalo-anmerkung__linien line{transform:scaleY(0);transition:transform .8s cubic-bezier(.65,0,.35,1)}
.js-bewegt .myalo-anmerkung.ist-da .myalo-anmerkung__linien line{transform:none}
.js-bewegt .myalo-anmerkung__schild{opacity:0;transition:opacity .6s ease}
.js-bewegt .myalo-anmerkung.ist-da .myalo-anmerkung__schild{opacity:1}
.js-bewegt .myalo-anmerkung.ist-da .myalo-anmerkung__marke:nth-of-type(2){transition-delay:0.1s}
.js-bewegt .myalo-anmerkung.ist-da .myalo-anmerkung__marke:nth-of-type(3){transition-delay:0.2s}
.js-bewegt .myalo-anmerkung.ist-da .myalo-anmerkung__marke:nth-of-type(4){transition-delay:0.3s}
.js-bewegt .myalo-anmerkung.ist-da .myalo-anmerkung__marke:nth-of-type(5){transition-delay:0.4s}
.js-bewegt .myalo-anmerkung.ist-da .myalo-anmerkung__linien line:nth-child(1){transition-delay:0.45s}
.js-bewegt .myalo-anmerkung.ist-da .myalo-anmerkung__linien line:nth-child(2){transition-delay:0.57s}
.js-bewegt .myalo-anmerkung.ist-da .myalo-anmerkung__linien line:nth-child(3){transition-delay:0.69s}
.js-bewegt .myalo-anmerkung.ist-da .myalo-anmerkung__linien line:nth-child(4){transition-delay:0.81s}
.js-bewegt .myalo-anmerkung.ist-da .myalo-anmerkung__linien line:nth-child(5){transition-delay:0.93s}
.js-bewegt .myalo-anmerkung.ist-da .myalo-anmerkung__schild:nth-of-type(6){transition-delay:1.00s}
.js-bewegt .myalo-anmerkung.ist-da .myalo-anmerkung__schild:nth-of-type(7){transition-delay:1.12s}
.js-bewegt .myalo-anmerkung.ist-da .myalo-anmerkung__schild:nth-of-type(8){transition-delay:1.24s}
.js-bewegt .myalo-anmerkung.ist-da .myalo-anmerkung__schild:nth-of-type(9){transition-delay:1.36s}
.js-bewegt .myalo-anmerkung.ist-da .myalo-anmerkung__schild:nth-of-type(10){transition-delay:1.48s}

/* Das randlose Bild faehrt sehr langsam heran, statt einfach da zu sein. */
.myalo-vollbild{overflow:hidden}
.js-bewegt .myalo-vollbild img{transform:scale(1.07);transition:transform 1.8s cubic-bezier(.22,1,.36,1)}
.myalo-vollbild.ist-da img{transform:none}

/* Warteliste: der Haken zeichnet sich */
@keyframes myalo-haken{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes myalo-danke{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.js-bewegt .myalo-liste__danke{animation:myalo-danke .5s cubic-bezier(.22,1,.36,1) both}
.js-bewegt .myalo-liste__danke path{animation:myalo-haken .6s cubic-bezier(.65,0,.35,1) .25s both}

/* Die Kopfzeile verdichtet sich, sobald der Auftakt durchgelaufen ist. */
.myalo-kopf{transition:background-color .35s ease,box-shadow .35s ease}
.myalo-kopf__bahn{transition:height .35s cubic-bezier(.4,0,.2,1)}
.myalo-kopf.ist-gescrollt{background:rgba(255,255,255,.94);
  box-shadow:0 12px 34px -26px rgba(0,63,59,.55)}
.myalo-kopf.ist-gescrollt .myalo-kopf__bahn{height:68px}
@media (max-width:560px){.myalo-kopf.ist-gescrollt .myalo-kopf__bahn{height:60px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ------------------------------ 8 Druck --------------------------------- */
@media print{
  .myalo-kopf,.myalo-formular{display:none}
  .myalo-band{padding-block:24px}
  body{font-size:11pt;background:#fff;color:#000}
}