/* Bewegungspaket chris-sound.com, Stand 26.10.2026. Anleitung: assets/MOTION-BAUKASTEN.md
   Seiten benutzen es nur ueber Attribute (data-m="..."). Inhalte stehen immer im HTML, die Bewegung ist nur Huelle.
   Zwei Schalter am <html>:
     .motion  setzt die Kopfzeile im <head> sofort, wenn keine reduzierte Bewegung gewuenscht ist (nur das Startbild nutzt es)
     .m-an    setzt assets/motion.js, sobald GSAP, ScrollTrigger und Lenis geladen sind. Alle Muster haengen daran.
   Ohne JavaScript, bei reduzierter Bewegung oder wenn die Bibliotheken fehlen, steht alles ruhig und vollstaendig da.
   Animiert werden nur transform und opacity. Teil A: Muster fuer alle Seiten. Teil B: Abschnitte der Startseite. */

/* ======================================================================= Teil A: Muster */

/* Lenis, weiches Scrollen (Werte aus lenis.css 1.1.13) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Wortzerlegung: jedes Wort hat eine Maske, der Innenteil bewegt sich */
.m-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .03em .16em; margin: -.06em -.03em -.16em; }
.m-wi { display: inline-block; }
.m-w .cu-word { margin-bottom: 0; }

/* Dunkle Flaeche ueber Fotos: Glas, Schrift und Kupfer wie auf den Inseln, in hell und dunkel gleich */
.m-dunkel { --gk-rgb: 16 19 22; --gk-boden: .58; --gk-tinte: 243 238 230; --gk-licht: .12; --gk-rand: .5; --gk-linie: hsl(0 0% 100% / .05);
  --gk-schatten: 0 18px 40px -18px rgb(0 0 0 / .55); color: var(--i-text); }
.m-dunkel .eyebrow { color: var(--cu-hi); }
.m-dunkel .cu-word { background-image: linear-gradient(100deg, var(--cu-45) 0%, var(--cu-gl) 30%, var(--cu-hi) 48%, var(--cu-gl) 62%, var(--cu-deep) 100%); }
.m-dunkel .btn-ghost { color: var(--i-text); }

/* ---------- woerter: Absatz oder Satz wird beim Scrollen Wort fuer Wort hell, <em> leuchtet in Kupfer ---------- */
[data-m~="woerter"] em { font-style: italic; color: var(--cu-text); }
.m-dunkel [data-m~="woerter"] em, [data-m~="woerter"].m-dunkel em { color: var(--cu-hi); }
html.m-an [data-m~="woerter"] .m-wi { opacity: .16; transition: opacity .35s var(--ease); }
html.m-an [data-m~="woerter"] .m-wi.an { opacity: 1; }

/* ---------- titel, einflug, karten, kippen: Startzustand setzt motion.js, CSS braucht nur Raum fuer 3D ---------- */
html.m-an [data-m~="kippen"] { perspective: 1200px; }
html.m-an [data-m~="kippen"] > * { transform-style: preserve-3d; }

/* ---------- Piktogramme fuer Kartenreihen: <i class="m-ico" data-icon="fotobox" aria-hidden="true"></i> ----------
   Linien wie die Symbole der Kopfzeile (24er Raster, Strich 1,8, runde Enden), in Kupfer auf einem weichen Kupferhof.
   Reines CSS, steht ohne JavaScript und ohne Layoutsprung. */
.m-ico { --m-ico: 48px; position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: var(--m-ico); height: var(--m-ico);
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, hsl(22 80% 70% / .22), hsl(22 70% 55% / .1) 70%);
  box-shadow: inset 0 0 0 1px hsl(22 70% 60% / .22); color: var(--cu-text); font-style: normal; }
.m-ico::before { content: ""; width: 56%; height: 56%; background: currentColor; -webkit-mask: var(--m-i) center / contain no-repeat; mask: var(--m-i) center / contain no-repeat; }
.m-dunkel .m-ico, .island .m-ico { color: var(--cu-hi); }
@media (prefers-contrast: more) { .m-ico { box-shadow: inset 0 0 0 1px currentColor; } }
.m-ico[data-icon="haus"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v9.5h13V10'/%3E%3C/svg%3E"); }
.m-ico[data-icon="ringe"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='14' r='5'/%3E%3Ccircle cx='15' cy='14' r='5'/%3E%3Cpath d='m10.5 5 1.5-2 1.5 2'/%3E%3C/svg%3E"); }
.m-ico[data-icon="note"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V6l11-2v12'/%3E%3Ccircle cx='6.5' cy='18' r='2.5'/%3E%3Ccircle cx='17.5' cy='16' r='2.5'/%3E%3C/svg%3E"); }
.m-ico[data-icon="lautsprecher"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='18' rx='2'/%3E%3Ccircle cx='12' cy='14' r='3.5'/%3E%3Ccircle cx='12' cy='7' r='1.2'/%3E%3C/svg%3E"); }
.m-ico[data-icon="kopfhoerer"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15v-3a8 8 0 0 1 16 0v3'/%3E%3Crect x='3' y='14' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='14' width='4' height='6' rx='1.5'/%3E%3C/svg%3E"); }
.m-ico[data-icon="person"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20c1.5-4 4.3-5.5 7.5-5.5s6 1.5 7.5 5.5'/%3E%3C/svg%3E"); }
.m-ico[data-icon="anfrage"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v10H9l-5 4z'/%3E%3C/svg%3E"); }
.m-ico[data-icon="licht"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9.5' y='2.5' width='5' height='14' rx='2.5'/%3E%3Cpath d='M12 16.5v4.5M8.5 21h7M5 5.5l1.6 1M19 5.5l-1.6 1M4.5 11h1.8M17.7 11h1.8'/%3E%3C/svg%3E"); }
.m-ico[data-icon="spot"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3h5l-.8 4.5h-3.4z'/%3E%3Cpath d='M10.3 7.5 5.5 20.5h13l-4.8-13'/%3E%3C/svg%3E"); }
.m-ico[data-icon="uplight"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='16' width='8' height='5' rx='1.5'/%3E%3Cpath d='M10 16 6.5 3.5M14 16l3.5-12.5'/%3E%3C/svg%3E"); }
.m-ico[data-icon="mikrofon"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2.5' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M8.5 21h7'/%3E%3C/svg%3E"); }
.m-ico[data-icon="fotobox"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l1.5-2h7L17 8h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E"); }
.m-ico[data-icon="telefon"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l1.5 4-2.5 1.5a11 11 0 0 0 6.5 6.5L16 13.5l4 1.5v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.m-ico[data-icon="sonne"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
.m-ico[data-icon="ort"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E"); }
.m-ico[data-icon="berg"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 19.5 9 8l4 7 2.5-4 6 8.5z'/%3E%3C/svg%3E"); }
.m-ico[data-icon="see"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10c2 0 2-1.5 4.5-1.5S9.5 10 12 10s2.5-1.5 4.5-1.5S19 10 21 10M3 15c2 0 2-1.5 4.5-1.5S9.5 15 12 15s2.5-1.5 4.5-1.5S19 15 21 15'/%3E%3C/svg%3E"); }
.m-ico[data-icon="kalender"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.m-ico[data-icon="uhr"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.m-ico[data-icon="glas"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h8l-.5 6a3.5 3.5 0 0 1-7 0z'/%3E%3Cpath d='M12 12.5V20.5M8.5 20.5h7'/%3E%3C/svg%3E"); }
.m-ico[data-icon="platte"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M12 6a6 6 0 0 1 6 6'/%3E%3C/svg%3E"); }
.m-ico[data-icon="pult"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='10' rx='2'/%3E%3Ccircle cx='8' cy='13' r='2.5'/%3E%3Ccircle cx='16' cy='13' r='2.5'/%3E%3Cpath d='M12 10.5v5'/%3E%3C/svg%3E"); }
.m-ico[data-icon="klang"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h2M7 8v8M11 5v14M15 9v6M19 7v10'/%3E%3C/svg%3E"); }
.m-ico[data-icon="herz"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.5 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z'/%3E%3C/svg%3E"); }
.m-ico[data-icon="stern"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z'/%3E%3C/svg%3E"); }
.m-ico[data-icon="haken"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.m-ico[data-icon="kamera"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='13' height='10' rx='2'/%3E%3Cpath d='M16 11l5-3v8l-5-3'/%3E%3C/svg%3E"); }
.m-ico[data-icon="schluessel"] { --m-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='12' r='4'/%3E%3Cpath d='M12 12h9M18 12v3M15.5 12v2'/%3E%3C/svg%3E"); }

/* ---------- stapel: Glaskarten liegen als Stapel, die oberste fliegt beim Scrollen weg ---------- */
[data-m~="stapel"] .m-stapel { display: grid; gap: 16px; margin-top: 40px; }
[data-m~="stapel"] .m-karte { margin: 0; }
[data-m~="stapel"] .m-karte .hl { font: 400 clamp(1.5rem, 3vw, 2.25rem)/1.18 var(--serif); letter-spacing: -.01em; text-wrap: pretty; color: var(--text); }
[data-m~="stapel"] .m-karte footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: auto; }
[data-m~="stapel"] .m-karte .stars { display: flex; }
/* site.css gestaltet jedes <footer> als Fusszeile der Seite: in der Karte zuruecksetzen */
[data-m~="stapel"] .m-karte footer { background: none; padding: 0; color: inherit; font-size: inherit; }
/* Ohne Bewegung: der volle Wortlaut steht gleich unter dem Satz, der Knopf ist ueberfluessig */
html:not(.m-an) [data-m~="stapel"] dialog.m-voll { display: block; position: static; inset: auto; width: auto; max-height: none; margin: 8px 0 0; padding: 0;
  background: none; color: var(--muted); border: 0; box-shadow: none; font-size: .9375rem; line-height: 1.6; }
html:not(.m-an) [data-m~="stapel"] dialog.m-voll cite, html:not(.m-an) [data-m~="stapel"] dialog.m-voll form { display: none; }
html:not(.m-an) [data-m-voll] { display: none; }
/* Mit Bewegung: angeheftete Buehne, die Karten liegen alle in derselben Rasterzelle */
html.m-an [data-m~="stapel"] { height: calc(100svh + var(--m-weg, 160vh)); padding: 0; }
html.m-an [data-m~="stapel"] > .m-buehne { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr);
  padding-top: calc(var(--navh, 64px) + env(safe-area-inset-top, 0px) + 24px); padding-bottom: 32px; overflow: hidden; }
html.m-an [data-m~="stapel"] .m-buehne > :not(.m-stapel) { position: relative; z-index: 20; }
html.m-an [data-m~="stapel"] .m-stapel { display: grid; place-items: center; margin-top: 24px; min-height: 0; }
html.m-an [data-m~="stapel"] .m-karte { grid-area: 1 / 1; align-self: center; justify-self: center; width: min(560px, 100%); max-height: 100%; will-change: transform; transition: none;
  --gk-boden: .8; --gk-filter: blur(18px) saturate(180%) brightness(1.04); }
.m-lesen { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--text); font: 600 .9375rem/1 var(--font); }
.m-lesen svg { width: 18px; height: 18px; fill: none; stroke: var(--cu-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
@media (hover: hover) { .m-lesen:hover svg { transform: translateX(4px); } }
dialog.m-voll { width: min(640px, 100% - 32px); max-height: 82svh; border: 0; border-radius: 28px; padding: 40px 32px 32px; color: var(--text);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 24px 64px -24px hsl(210 30% 5% / .8); overscroll-behavior: contain; }
dialog.m-voll[open] { animation: m-auf .32s var(--ease) both; }
dialog.m-voll::backdrop { background: hsl(210 14% 8% / .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.m-voll blockquote { margin: 0; font: 400 1.25rem/1.45 var(--serif); }
dialog.m-voll cite { display: block; margin-top: 20px; font-style: normal; font-weight: 600; color: var(--petrol); }
dialog.m-voll form { margin-top: 24px; }
@keyframes m-auf { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 599px) { dialog.m-voll { padding: 32px 22px 24px; } dialog.m-voll blockquote { font-size: 1.125rem; } }

/* ---------- streifen: Karten laufen beim Scrollen seitwaerts durch ---------- */
[data-m~="streifen"] .m-streifen { display: flex; gap: 12px; list-style: none; margin: 40px 0 0; padding: 0 max(16px, calc((100vw - 1120px) / 2)) 8px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
[data-m~="streifen"] .m-streifen > * { flex: 0 0 min(82vw, 400px); width: auto; scroll-snap-align: start; }
[data-m~="streifen"] .m-linie { display: none; }
html.m-an [data-m~="streifen"] { height: calc(100svh + var(--m-weg, 200vh)); padding: 0; }
html.m-an [data-m~="streifen"] > .m-buehne { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 100%);
  grid-template-rows: auto auto minmax(0, 1fr); align-content: start; padding-top: calc(var(--navh, 64px) + env(safe-area-inset-top, 0px) + 32px); }
html.m-an [data-m~="streifen"] .m-streifen { justify-self: start; align-self: center; margin-top: 0; margin-bottom: 4svh; width: max-content; overflow: visible; scroll-snap-type: none; will-change: transform; align-items: stretch; }
html.m-an [data-m~="streifen"] .m-streifen > * { transition: none; align-self: stretch; }
html.m-an [data-m~="streifen"] .m-linie { display: block; height: 2px; margin-top: 28px; border-radius: 2px; background: var(--line); overflow: hidden; }
html.m-an [data-m~="streifen"] .m-linie i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--cu-45), var(--cu-gl) 45%, var(--cu-hi) 75%, var(--cu)); }
@media (max-height: 640px) { html.m-an [data-m~="streifen"] > .m-buehne { padding-top: calc(var(--navh, 64px) + 12px); } }

/* ---------- parallax und bild-gross ---------- */
html.m-an [data-m~="parallax"] { will-change: transform; transition: none; }
[data-m~="bild-gross"] { position: relative; margin: 0; overflow: hidden; height: clamp(440px, 92svh, 1040px); border-radius: 28px; background: var(--island); color: var(--i-text); isolation: isolate; }
[data-m~="bild-gross"] > img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; max-width: none; object-fit: cover; will-change: transform; }
[data-m~="bild-gross"]::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, hsl(210 14% 8% / .12) 0%, hsl(210 14% 8% / 0) 38%, hsl(210 14% 8% / .78) 100%); }
[data-m~="bild-gross"] .m-text { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(28px, 6svh, 64px); display: grid; gap: 16px; justify-items: start; }
[data-m~="bild-gross"] .credit { z-index: 3; top: 8px; bottom: auto; align-items: flex-start; }
html.m-an [data-m~="bild-gross"] { will-change: transform; }
html.m-an [data-m~="bild-gross"] .m-text { will-change: transform; }
@media (max-width: 767px) { [data-m~="bild-gross"] { height: 78svh; border-radius: 20px; } }

/* ---------- laufband: Namen laufen an der Scrollposition, nie von selbst ---------- */
[data-m~="laufband"] { display: flex; width: max-content; white-space: nowrap; }
[data-m~="laufband"] > * { display: inline-flex; align-items: center; font: 400 clamp(1.6rem, 3.6vw, 3rem)/1.2 var(--serif); letter-spacing: -.02em; padding-right: .5em; }
[data-m~="laufband"] > *::after { content: ""; width: .16em; height: .16em; border-radius: 50%; margin-left: .5em; background: var(--cu); }
[data-m~="laufband"][data-m-richtung="rechts"] > * { color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--text) 55%, transparent); }
@media (prefers-contrast: more) { [data-m~="laufband"][data-m-richtung="rechts"] > * { color: var(--text); -webkit-text-stroke: 0; } }
html.m-an [data-m~="laufband"] { will-change: transform; }
/* ohne Bewegung darf das Band nicht ueber den Rand hinaus die Seite verbreitern */
html:not(.m-an) [data-m~="laufband"] { width: auto; max-width: 100%; flex-wrap: wrap; white-space: normal; padding-inline: max(16px, calc((100vw - 1120px) / 2)); }
html:not(.m-an) [data-m~="laufband"] > * { font-size: clamp(1.6rem, 4vw, 2.5rem); }
html:not(.m-an) [data-m~="laufband"][data-m-richtung="rechts"] { display: none; }

/* ---------- zahl ---------- */
[data-m~="zahl"] { font-variant-numeric: tabular-nums; }

/* ---------- magnet: Kupferknopf folgt dem Zeiger, Bass-Wellen beim Erreichen und beim Klick ---------- */
[data-m~="magnet"] { position: relative; display: inline-grid; place-items: center; padding: 40px; }
[data-m~="magnet"] .btn { position: relative; z-index: 2; min-height: 60px; padding: 0 34px; font-size: 1.0625rem; }
[data-m~="magnet"] .btn > span { display: inline-block; }
.m-welle { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%;
  border: 1px solid var(--cu-gl); opacity: 0; pointer-events: none; }
html.m-an [data-m~="magnet"] .btn, html.m-an [data-m~="magnet"] .btn > span { will-change: transform; transition: box-shadow .18s var(--ease); }

/* ---------- welle: Kupferlinie zeichnet sich beim Scrollen ---------- */
[data-m~="welle"] path { fill: none; stroke: url(#cuLine); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* ---------- equalizer: Balken antworten auf Scrolltempo und Zeiger, in Ruhe stehen sie ---------- */
[data-m~="equalizer"] { --m-eq-h: 120px; position: relative; display: flex; align-items: flex-end; gap: 4px; height: var(--m-eq-h); color: var(--cu);
  background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 10px);
  -webkit-mask: linear-gradient(0deg, #000 0 22%, transparent 22%), radial-gradient(60% 120% at 50% 100%, #000 0 40%, transparent 41%);
  mask: linear-gradient(0deg, #000 0 22%, transparent 22%), radial-gradient(60% 120% at 50% 100%, #000 0 40%, transparent 41%); opacity: .7; }
html.m-an [data-m~="equalizer"] { background: none; -webkit-mask: none; mask: none; opacity: 1; }
.m-balken { flex: 1 1 0; min-width: 2px; height: 100%; border-radius: 3px 3px 1px 1px; transform-origin: 50% 100%; transform: scaleY(.12);
  background: linear-gradient(0deg, var(--cu-45), var(--cu-gl) 55%, var(--cu-hi)); will-change: transform; }

/* ---------- platte: Schallplatte dreht mit dem Scrollen, der Tonarm senkt sich ---------- */
[data-m~="platte"] { position: relative; width: min(var(--m-platte, 420px), 100%); aspect-ratio: 1; border-radius: 50%; isolation: isolate;
  background: radial-gradient(circle, hsl(186 50% 34%) 0 15%, #0E1114 15.5% 18%, transparent 18.5%),
    repeating-radial-gradient(circle, #15191D 0 2px, #1D2227 2px 3px), #121518;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .7), inset 0 0 0 1px hsl(0 0% 100% / .06); }
.m-scheibe { position: absolute; inset: 0; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle, #0B0D10 0 1.6%, transparent 1.8%),
    conic-gradient(from 0deg, transparent 0 4%, hsl(22 80% 70% / .9) 4% 7%, transparent 7% 100%) center / 31% 31% no-repeat,
    radial-gradient(circle, hsl(186 50% 34%) 0 15%, #0E1114 15.5% 18%, transparent 18.5%),
    conic-gradient(from 20deg, hsl(0 0% 100% / 0) 0 8%, hsl(0 0% 100% / .1) 13%, hsl(0 0% 100% / 0) 20% 50%, hsl(0 0% 100% / .07) 60%, hsl(0 0% 100% / 0) 68%),
    repeating-radial-gradient(circle, #15191D 0 2px, #1D2227 2px 3px), #121518;
}
.m-armfeld { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.m-arm { position: absolute; z-index: 2; right: 0; top: 0; width: 42%; height: auto; transform-origin: 82% 12%; transform: rotate(var(--m-arm, 0deg)); will-change: transform; overflow: visible; }
.m-arm .stab { fill: none; stroke: #E9E4DC; stroke-width: 5; stroke-linecap: round; }
.m-arm .lager { fill: #D5D0C8; }
.m-arm .kopf { fill: var(--cu-me); }

/* ---------- aufklapp: zwei Saetze, der Rest in einer aufklappbaren Glaskarte ---------- */
.m-mehr { display: grid; grid-template-rows: 1fr; }
.m-mehr-in { min-height: 0; overflow: hidden; }
.m-mehr-in > :first-child { margin-top: 0; }
.m-mehr-in > * + * { margin-top: 1em; }
[data-m~="aufklapp"].m-zu .m-mehr { grid-template-rows: 0fr; }
[data-m~="aufklapp"] .m-mehr { transition: grid-template-rows .45s var(--ease), opacity .35s var(--ease), margin .45s var(--ease); margin-top: 16px; }
[data-m~="aufklapp"].m-zu .m-mehr { opacity: 0; margin-top: 0; }
.m-glas { border-radius: 20px; padding: 0 24px; position: relative;
  background: radial-gradient(120% 80% at 22% 0%, rgb(255 255 255 / var(--gk-licht, .2)), transparent 60%),
    linear-gradient(180deg, rgb(var(--gk-rgb, 255 255 255) / calc(max(var(--g-tint, .52), var(--gk-boden, .5)) - .06)), rgb(var(--gk-rgb, 255 255 255) / calc(max(var(--g-tint, .52), var(--gk-boden, .5)) + .08)));
  -webkit-backdrop-filter: blur(var(--g-blur, 6px)) saturate(180%); backdrop-filter: blur(var(--g-blur, 6px)) saturate(180%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), inset 0 0 0 1px var(--gk-linie, hsl(225 14% 11% / .07)), var(--gk-schatten, none); }
.m-glas > .m-mehr-in { padding: 20px 0; }
:is(.card, .tile, .voice, .step, .stat, .m-glas .m-glas) .m-glas { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding: 0; }
:is(.card, .tile, .voice, .step, .stat) .m-glas > .m-mehr-in { padding: 0; }
@media (prefers-reduced-transparency: reduce) { .m-glas { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); } }
.m-auf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; margin-top: 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--cu-text); font: 600 .9375rem/1 var(--font); cursor: pointer; box-shadow: inset 0 0 0 1px currentColor; }
.m-auf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .3s var(--ease); }
.m-auf[aria-expanded="true"] svg { transform: rotate(180deg); }
.m-auf:focus-visible { outline: 2px solid var(--cu-text); outline-offset: 3px; }

/* ---------- licht: weicher Kupferschein folgt dem Zeiger, nur im Abschnitt, hinter dem Inhalt, nie ueber Fotos ---------- */
[data-m~="licht"] { position: relative; isolation: isolate; }
.m-licht { position: absolute; left: 0; top: 0; z-index: -1; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, hsl(22 85% 62% / .16), hsl(22 80% 60% / .06) 40%, transparent 68%); opacity: 0; transition: opacity .6s var(--ease); will-change: transform; }
.m-licht.an { opacity: 1; }
:root:not([data-theme="dark"]) .m-licht { background: radial-gradient(circle, hsl(22 80% 58% / .14), hsl(22 80% 58% / .05) 40%, transparent 68%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .m-licht { background: radial-gradient(circle, hsl(22 85% 62% / .16), hsl(22 80% 60% / .06) 40%, transparent 68%); } }

/* Zur Sicherheit: reduzierte Bewegung schaltet alles Bewegte ab, auch wenn .m-an gesetzt waere */
@media (prefers-reduced-motion: reduce) {
  .m-licht, .m-welle { display: none; }
  dialog.m-voll[open] { animation: none; }
  [data-m~="aufklapp"] .m-mehr, .m-auf svg, .m-lesen svg { transition: none; }
}
@media print { html.m-an [data-m~="stapel"], html.m-an [data-m~="streifen"] { height: auto; } html.m-an .m-buehne { position: static !important; height: auto !important; } }

/* ======================================================================= Teil B: Startseite */

/* ---------- Startbild: Foto randlos, Name steigt aus der Maske, beim Scrollen wird das Foto zur Karte ---------- */
.held { position: relative; height: 100svh; min-height: 560px; background: var(--bg); }
.held > .m-buehne { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.held .m-medien { position: absolute; inset: 0; overflow: hidden; background: var(--island); transform-origin: 50% 45%; }
.held .m-medien img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 40%; transform-origin: 52% 40%; }
.held .m-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, hsl(210 14% 8% / .55) 0%, hsl(210 14% 8% / .05) 30%, hsl(210 14% 8% / .12) 50%, hsl(210 14% 8% / .9) 100%); }
.held .m-medien .credit { top: calc(var(--navh, 64px) + env(safe-area-inset-top, 0px) + 8px); bottom: auto; align-items: flex-start; }
.held .m-unten { position: absolute; z-index: 2; left: 0; right: 0; bottom: max(36px, 6svh); }
.held .m-kopie { position: relative; color: var(--i-text); }
.held .m-kopie::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: -12%; right: 10%; top: -30%; bottom: -24%;
  background: radial-gradient(ellipse 55% 55% at 35% 60%, hsl(210 14% 8% / .55), hsl(210 14% 8% / .3) 60%, transparent 100%); }
.held .eyebrow { margin-bottom: 18px; color: var(--cu-hi); }
.held .h-name { margin: 0; font: 400 clamp(4rem, 16.5vw, 15rem)/.86 var(--serif); letter-spacing: -.035em; color: var(--i-text); white-space: nowrap; margin-left: -.04em; }
.held .h-name .z { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .05em .1em; margin: 0 -.05em -.1em; }
.held .h-name .z > span { display: inline-block; }
.held .h-name em { font-style: italic; padding-right: .06em; }
.held .h-zeile { margin-top: 18px; font: 400 clamp(1.6rem, 3.4vw, 2.75rem)/1.08 var(--serif); letter-spacing: -.01em; color: var(--i-text); max-width: 26ch; }
.held .m-mehr-held { position: relative; display: grid; gap: 22px; justify-items: start; margin-top: 28px; }
.held .m-mehr-held p { font: 500 clamp(1.125rem, 2.4vw, 1.75rem)/1.3 var(--font); letter-spacing: -.01em; color: var(--i-text); max-width: 26ch; }
.held .m-cue { position: absolute; z-index: 2; right: max(16px, calc((100vw - 1120px) / 2)); bottom: max(36px, 6svh); display: none; align-items: center; gap: 12px;
  font: 600 .75rem/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--i-muted); }
.held .m-cue i { width: 1px; height: 44px; background: linear-gradient(var(--cu-hi), transparent); }
@media (min-width: 900px) { .held .m-cue { display: inline-flex; } }
@media (max-width: 599px) { .held .m-unten { bottom: 28px; } .held .h-zeile { font-size: 1.6rem; } }
/* Mit Bewegung (gesetzt im head, unabhaengig vom Laden der Bibliotheken): lange Buehne, Einstieg per CSS */
html.motion .held { height: 250svh; }
html.motion .held > .m-buehne { position: sticky; top: 0; }
html.motion .held .m-medien { transform: scale(1.06); border-radius: 28px; will-change: transform; }
html.motion .held .m-medien img { will-change: transform; animation: m-zoom 2.2s cubic-bezier(.22, 1, .36, 1) backwards; }
html.motion .held .m-mehr-held { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; opacity: 0; }
html.motion .held .m-mehr-held { bottom: 4svh; }
@media (max-width: 767px) { html.motion .held .m-mehr-held { padding-inline: 18px; } }
html.motion .held .eyebrow, html.motion .held .h-zeile .m-wi, html.motion .held .h-name .z > span { animation: m-steigen 1.25s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(.2s + var(--i, 0) * .07s); }
html.motion .held .h-name .z > span { animation-name: m-steigen-name; animation-duration: 1.5s; animation-delay: calc(var(--i, 0) * .1s); }
html.motion .held .h-zeile .m-wi { animation-delay: calc(.7s + var(--i, 0) * .06s); }
html.motion .held .eyebrow { animation-name: m-rueck; animation-delay: 0s; animation-duration: 1.1s; }
html.motion .held .m-cue { animation: m-hoch 1s cubic-bezier(.16, 1, .3, 1) 1.2s backwards; }
@keyframes m-zoom { from { transform: scale(1.08); } }
@keyframes m-steigen { from { transform: translateY(112%); } }
/* Der Name ist ab dem ersten Bild zu sehen und steigt nur das letzte Stueck aus der Maske: so zaehlt er sofort als groesster Inhalt (LCP) */
@keyframes m-steigen-name { from { transform: translateY(42%); } }
@keyframes m-rueck { from { transform: translateY(12px); } }
@keyframes m-hoch { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-transparency: reduce) { .held .m-kopie::before { background: hsl(210 14% 8% / .6); } }

/* ---------- Satz, der Wort fuer Wort hell wird ---------- */
.s-satz { min-height: 92svh; display: grid; align-items: center; padding: 14svh 0; }
.s-satz p { margin-top: 28px; font: 400 clamp(2.2rem, 6.2vw, 5.4rem)/1.04 var(--serif); letter-spacing: -.02em; max-width: 17ch; text-wrap: pretty; }

/* ---------- Zahlen: die Vertrauenskarten aus site.css, Zahlen etwas groesser ---------- */
.held + .s-satz + .trust { padding-top: 0; }

/* ---------- Tagesablauf: Fotos von Miss Freckles am Telefon und Tablet hochkant nie beschneiden ----------
   Statt cover: ganz zeigen, unten buendig, darueber der dunkle Grund der Insel. Keine Vergroesserung (sie wuerde die Raender abschneiden). */
#abend .shots img[data-credit-name="Miss Freckles Photography"] { transform: none !important; }
@media (max-width: 899px), (orientation: portrait) {
  #abend .shots img[data-credit-name="Miss Freckles Photography"] { object-fit: contain; object-position: 50% 100% !important; }
}

/* ---------- Kundenstimmen als Glaskarten-Stapel ---------- */
#stimmen.s-stimmen { --len: auto; height: auto; padding: 96px 0; background: var(--bg2); }
html.m-an #stimmen.s-stimmen { padding: 0; height: calc(100svh + var(--m-weg, 160vh)); }
.s-stimmen .st-head { position: relative; z-index: 20; }
.s-stimmen .m-karte { padding: 40px 32px 28px; gap: 12px; flex: none; align-self: auto; }
.s-stimmen .m-karte .qm { font: 400 4rem/.6 var(--serif); height: 30px; }
.s-stimmen .m-karte .stars svg { width: 16px; height: 16px; }
@media (max-width: 599px) { .s-stimmen .m-karte { padding: 32px 22px 18px; } .s-stimmen .m-karte .hl { font-size: 1.5rem; } }

/* ---------- Technik: Foto ohne Gesichter, Glaskarten kippen herein ---------- */
.s-technik { position: relative; overflow: clip; background: var(--island); color: var(--i-text); }
.s-technik .s-foto { position: absolute; inset: 0; overflow: hidden; }
.s-technik .s-foto img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; max-width: none; object-fit: cover; object-position: 50% 60%; }
.s-technik .s-foto::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, hsl(210 14% 8% / .82) 0%, hsl(210 14% 8% / .4) 35%, hsl(210 14% 8% / .5) 65%, hsl(210 14% 8% / .92) 100%); }
.s-technik .s-foto .credit { z-index: 3; top: calc(var(--navh, 64px) + 8px); bottom: auto; align-items: flex-start; }
.s-technik .s-in { position: relative; z-index: 2; min-height: 100svh; display: grid; align-content: center; gap: 40px; padding: 128px 0 88px; }
.s-technik h2 { font: 400 clamp(2.75rem, 6vw, 4.75rem)/.98 var(--serif); letter-spacing: -.02em; max-width: 14ch; }
.s-tkarten { display: grid; gap: 12px; }
@media (min-width: 700px) { .s-tkarten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .s-tkarten { grid-template-columns: repeat(4, 1fr); } }
.s-tkarten .card { flex: none; width: auto; padding: 26px 24px; gap: 10px; border-radius: 20px; }
.s-tkarten .n { font: 400 clamp(3rem, 5vw, 4.25rem)/.9 var(--serif); letter-spacing: -.02em; }
.s-tkarten h3 { margin-top: 8px; font: 600 1.125rem/1.3 var(--font); }
.s-tkarten p { color: var(--i-muted); font-size: .9375rem; line-height: 1.6; }
.s-tkarten .m-ico { margin-bottom: 4px; }
.s-technik .s-lead { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.5; max-width: 44rem; color: hsl(36 30% 92%); }
.s-technik .btn { justify-self: start; }
.tech.s-zubuch { padding: 72px 0 96px; }
.s-zubuch .addon { gap: 10px; }
.s-zubuch .addon .m-ico { margin-bottom: 6px; }

/* ---------- Vorbereitung als Seitwaerts-Streifen ---------- */
.s-weg { position: relative; padding: 96px 0; overflow: clip; }
.s-weg .s-kopf { display: grid; gap: 14px; }
.s-weg h2 { font: 400 clamp(2.75rem, 6vw, 4.75rem)/.98 var(--serif); letter-spacing: -.02em; }
.s-weg .s-kopf p { color: var(--muted); max-width: 36rem; }
.s-weg .m-streifen > .card { min-height: 300px; padding: 32px 28px; display: grid; align-content: space-between; gap: 28px; border-radius: 28px; align-self: auto; }
.s-weg .no { font: 400 clamp(4rem, 8vw, 6rem)/.85 var(--serif); letter-spacing: -.03em; color: color-mix(in srgb, var(--text) 16%, transparent); }
.s-weg .when { font: 600 .8125rem/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--cu-text); }
.s-weg h3 { margin-top: 12px; font: 400 clamp(1.9rem, 3vw, 2.5rem)/1 var(--serif); letter-spacing: -.02em; }
.s-weg .m-streifen p { margin-top: 12px; color: var(--muted); font-size: .9375rem; line-height: 1.6; }
html.m-an .s-weg { padding: 0; }
@media (max-height: 760px) { html.m-an .s-weg .s-kopf p { display: none; } }
@media (max-height: 640px) { .s-weg .m-streifen > .card { min-height: 240px; padding: 24px; } }

/* ---------- Grosses Foto ---------- */
.s-gross { padding: clamp(48px, 8vh, 96px) max(0px, calc((100vw - 1400px) / 2)); }
.s-gross [data-m~="bild-gross"] { margin-inline: max(12px, env(safe-area-inset-left, 0px)); }
.s-gross .zitat { display: flex; gap: 14px; align-items: flex-start; max-width: 34rem; font: 400 clamp(1.75rem, 3.6vw, 3rem)/1.12 var(--serif); letter-spacing: -.015em; }
.s-gross .zitat i { font: 400 1.6em/.7 var(--serif); color: var(--cu-hi); font-style: normal; margin-top: .12em; }

/* ---------- Firmen mit Laufband ---------- */
.s-firmen { padding: clamp(72px, 11vh, 128px) 0; overflow: clip; border-block: 1px solid var(--line); background: var(--bg2); }
.s-firmen .s-kopf { display: grid; gap: 24px; margin-bottom: 48px; }
@media (min-width: 900px) { .s-firmen .s-kopf { grid-template-columns: 1.1fr 1fr; align-items: end; gap: 48px; } }
.s-firmen h2 { font: 400 clamp(2.5rem, 5vw, 4rem)/1 var(--serif); letter-spacing: -.02em; margin-top: 12px; }
.s-firmen .s-kopf p { color: var(--muted); }
.s-firmen .s-kopf .btn { justify-self: start; margin-top: 20px; }
.s-firmen [data-m~="laufband"] + [data-m~="laufband"] { margin-top: 6px; }

/* ---------- Hinter dem Pult: Abstand nach dem Firmenband ---------- */
.about.s-pult { padding-top: 112px; }

/* ---------- Schluss: Lasst uns reden ---------- */
#ende.s-ende { position: relative; height: auto; min-height: 100svh; display: grid; place-items: center; overflow: clip; padding: 128px 0 96px;
  background: var(--island); color: var(--i-text); text-align: center; }
.s-ende .end-in { max-width: 48rem; }
.s-ende h2 .b { display: inline-block; }
.s-ende h2 em { font-style: italic; }
.s-ende .end-wave { opacity: .5; z-index: 0; top: max(24px, 5svh); transform: none; }
.s-ende .end-wave svg { height: 24vh; }
.s-ende [data-m~="magnet"] { margin-top: 0; }
.s-ende .m-welle { border-color: var(--cu-gl); }

/* Telefon: Einstieg kuerzer, damit das Startbild schneller steht (Lighthouse vorher 92, mit langem Einstieg 84 bis 88) */
@media (max-width: 767px) {
  html.motion .held .m-medien img { animation-duration: .9s; }
  html.motion .held .eyebrow, html.motion .held .h-zeile .m-wi, html.motion .held .h-name .z > span { animation-duration: .8s; animation-delay: calc(var(--i, 0) * .04s); }
}

/* Startbild im <picture>: Telefone im Hochformat bekommen einen eigenen Zuschnitt (59 statt 420 KB), das Bild selbst bleibt Kind der Buehne */
.held .m-medien picture { display: contents; }