/* nj-hoffmann.de · Startseite (PLAN.md Abschnitt 15b). Gehört zu index.html und js/start.js.

   Zwei Fassungen:
   - html.film-an (start.js): Die Seite scrollt nicht. Vollbild-Film mit Studiohintergrund, je Halt ein Standbild, ein
     Scrollschritt spielt den Clip zum nächsten Halt. Texte und Beispiele links und rechts neben Noah (am Desktop nur in
     den äußeren Spalten bis 36 % und ab 64 % der Breite, Noah steht bei 38 bis 61 %), am Handy unter dem Film.
   - sonst (ohne JavaScript, ?ruhig, „weniger Bewegung“): die fünf Halte als normale Abschnitte mit Standbild.

   Farbe je Halt (Noah, 15 Punkt 5): getönte Ränder links und rechts über dem Film, die Mitte mit Noah bleibt unberührt;
   am Handy die Fläche unter dem Film. Sand (Webdesign), Salbei (Automationen), Schiefer (Second Brain), Ton (Über mich),
   Graphit (Abschluss). Gedeckte Töne zum grauen Studio und Anzug, Petrol bleibt Akzent, kein Lila (P23). */

:root {
  --rand-x: clamp(20px, 3.4vw, 56px);
  --w1: #e9dcc6; --w2: #cfdccf; --w3: #cdd8e4; --w4: #e6cfc1; --w5: #23211e;       /* Ränder */
  --w1-hell: #f3ece0; --w2-hell: #e6eee6; --w3-hell: #e6ecf2; --w4-hell: #f3e6de;   /* Handy-Fläche */
  --wand: #c9c9d3;   /* Wandfarbe des aktuellen Halts (start.js), hinter dem Handy-Ausschnitt */
  --kopf-h: 88px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund-hell); color: var(--graphit); font: 400 17px/1.55 var(--text-schrift); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--kopf-schrift); font-weight: 700; margin: 0; line-height: .92; letter-spacing: .004em; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; }
html.am-ende :focus-visible { outline-color: var(--petrol-hell); }   /* Petrol auf Graphit nur 2,2 : 1 (WCAG 2.4.13/1.4.11) */
[tabindex="-1"]:focus { outline: none; }   /* Fokus per Skript auf die Überschrift des Halts: kein Kasten (Prüfer Runde 1) */
.sprung { position: fixed; left: 12px; top: -80px; z-index: 70; background: var(--graphit); color: var(--grund-hell); padding: 12px 18px; border-radius: 999px; text-decoration: none; }
.sprung:focus { top: 12px; }

/* Kopfleiste der Startseite (Name, Kontakt, Menü; Schrift und Menüknopf in css/kopf.css) */
.kopf { position: absolute; inset: 0 0 auto; height: var(--kopf-h); z-index: 30; display: flex; align-items: center; gap: 18px; padding: 0 var(--rand-x); }
html.film-an .kopf { position: fixed; }
.pille { display: inline-block; line-height: 46px; padding: 0 24px; border-radius: 999px; background: var(--petrol); color: var(--grund-hell); text-decoration: none; font-weight: 700; font-size: 16px; white-space: nowrap; transition: background-color .45s var(--kurve); }
.pille:focus-visible { background: var(--petrol-hover); }
@media (hover: hover) and (pointer: fine) { .pille:hover { background: var(--petrol-hover); } }
/* Kontakt in der Leiste nur als Umriss: die eine Haupthandlung je Halt ist der Knopf im Inhalt (Handwerksregel 24) */
.kopf .kopf-kontakt { background: transparent; color: var(--graphit); box-shadow: inset 0 0 0 2px var(--graphit); transition: background-color .35s, color .35s, box-shadow .35s; }
.kopf .kopf-kontakt:focus-visible { background: var(--graphit); color: var(--grund-hell); }
@media (hover: hover) and (pointer: fine) { .kopf .kopf-kontakt:hover { background: var(--graphit); color: var(--grund-hell); } }
html.am-ende .kopf .kopf-kontakt { color: var(--grund-hell); box-shadow: inset 0 0 0 2px var(--grund-hell); }
html.am-ende .kopf .kopf-kontakt:focus-visible { background: var(--grund-hell); color: var(--graphit); }
@media (hover: hover) and (pointer: fine) { html.am-ende .kopf .kopf-kontakt:hover { background: var(--grund-hell); color: var(--graphit); } }
html.am-ende .kopf .wortmarke { color: var(--grund-hell); }
@media (max-width: 1023px) {
  .kopf { justify-content: center; padding: 0 76px; height: 64px; --kopf-h: 64px; }
  .kopf-kontakt { display: none; }
  html.film-an .kopf { background: var(--stil, var(--wand)); transition: background-color .6s var(--sanft); }
  html.film-an.am-ende .kopf { background: var(--w5); }
  html.film-an.am-ende .menue-knopf { box-shadow: 0 0 0 3px rgb(234 235 238 / .5); }
}

/* ---------- Bausteine ---------- */
.zl { display: block; overflow: hidden; padding: .32em .08em .16em 0; margin: -.32em -.08em -.1em 0; }   /* Platz für Umlautpunkte (Ü) und Unterlängen (g, j) in der Maske */
.zl > span { display: block; }
.shot .zl > span { white-space: nowrap; }   /* jede Maskenzeile bleibt eine Zeile (Prata läuft breiter, Prüfer 19.10.) */
.name { font-size: clamp(58px, 6.4vw, 100px); line-height: .9; }
.shot h2 { font-size: clamp(42px, 4.2vw, 70px); }
.kern-worte { font-weight: 700; letter-spacing: .16em; }
.kern-worte span { color: var(--petrol-text); font-weight: 400; margin: 0 .2em; }
html.film-an .shot-kontakt .kern-worte span, html.am-ende .kern-worte span { color: var(--petrol-hell); }
.kern { margin-top: clamp(18px, 2vh, 28px); max-width: 21em; padding-left: 16px; border-left: 5px solid var(--petrol); font-size: clamp(19px, 1.45vw, 24px); line-height: 1.35; }
.shot-satz { margin-top: 18px; max-width: 30em; font-size: clamp(16px, 1.12vw, 18px); line-height: 1.55; }
.aktion { margin-top: clamp(20px, 2.6vh, 30px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.aktion-zusatz { font-size: 15px; color: var(--leise); }
.knopf { display: inline-flex; align-items: center; min-height: 50px; padding: 0 28px; border-radius: 999px; background: var(--petrol); color: var(--grund-hell); text-decoration: none;
  font: 700 17px/1 var(--text-schrift); transition: background-color .4s var(--kurve); }
.knopf:focus-visible { background: var(--petrol-hover); }
@media (hover: hover) and (pointer: fine) { .knopf:hover { background: var(--petrol-hover); } }
.mehr { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; margin-top: 14px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--petrol); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.mehr:focus-visible { text-decoration-thickness: 4px; }
@media (hover: hover) and (pointer: fine) { .mehr:hover { text-decoration-thickness: 4px; } }
.shot .karten-titel { font-size: clamp(22px, 1.6vw, 27px); margin-bottom: 12px; }

/* Arbeiten als Browserfenster: eines groß, vier klein */
.arbeiten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.arbeit:first-child { grid-column: 1 / -1; }
.arbeit a { position: relative; display: block; text-decoration: none; color: var(--graphit); background: var(--grund-hell); border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(35 33 30 / .14), 6px 6px 0 rgb(35 33 30 / .1); transition: box-shadow .35s var(--kurve); }
.fenster-leiste .leiste-ki { flex-shrink: 0; margin-left: auto; font-size: 12px; opacity: .85; white-space: nowrap; }   /* KI-Film der Kundenseite (Art. 50), Prüfer 19.10. */
.arbeit a:focus-visible { box-shadow: 0 0 0 2px var(--petrol), 6px 6px 0 rgb(15 95 107 / .3); }
@media (hover: hover) and (pointer: fine) { .arbeit a:hover { box-shadow: 0 0 0 2px var(--petrol), 6px 6px 0 rgb(15 95 107 / .3); } }
.fenster-leiste { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; background: var(--petrol); color: var(--grund-hell); font-size: 12px; }
.fenster-leiste i { width: 7px; height: 7px; border-radius: 50%; background: rgb(234 235 238 / .35); }
.fenster-leiste i:first-child { background: var(--grund-hell); }
.fenster-leiste span { margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arbeit img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
.arbeit:first-child img { aspect-ratio: 2 / 1; }
.arbeit-name { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 5px 9px; border-radius: 4px; background: var(--graphit); color: var(--grund-hell); font-size: 13px; font-weight: 700; line-height: 1.1; }
.arbeit-name em { font-style: normal; font-weight: 400; color: var(--petrol-hell); margin-left: 4px; }

/* Automationen: fünf unabhängige Angebote als Katalog, ohne Linie (keine Reihenfolge, Prüfer Runde 1 / L-050) */
.ablauf { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 10px; }
.ablauf li { position: relative; padding: 13px 16px 13px 18px; background: rgb(255 255 255 / .6); border-radius: 6px; box-shadow: 0 0 0 1px rgb(35 33 30 / .1); }
.ablauf h3 { font-size: clamp(21px, 1.55vw, 26px); }
.ablauf p { margin-top: 4px; font-size: 16px; line-height: 1.4; }

/* Second Brain: so ist eine Antwort aufgebaut */
.antwort { margin: 0; background: rgb(255 255 255 / .7); border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgb(35 33 30 / .12), 8px 8px 0 rgb(35 33 30 / .08); }
.antwort-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--petrol); color: var(--grund-hell); font-weight: 700; font-size: 15px; }
.antwort-kopf::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--grund-hell); }
.antwort-zeile { display: grid; gap: 8px; padding: 16px 18px; border-bottom: 1px solid rgb(35 33 30 / .1); }
.antwort-zeile b { font: 700 19px/1 var(--kopf-schrift); letter-spacing: .01em; }
.antwort-zeile.frage { background: rgb(35 33 30 / .05); }
.balken { display: grid; gap: 7px; }
.balken i { display: block; height: 9px; border-radius: 5px; background: rgb(35 33 30 / .16); }
.balken i:nth-child(2) { width: 82%; } .balken i:nth-child(3) { width: 64%; }
.antwort-zeile.quelle span { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 12px; border-radius: 999px; background: var(--petrol); color: var(--grund-hell); font-size: 14px; font-weight: 700; }
.antwort figcaption { padding: 14px 18px 16px; font-size: 16px; line-height: 1.45; }

/* Über mich: Instagram-Karte in Graphit */
.insta-karte { background: var(--graphit); color: var(--grund-hell); border-radius: 6px; padding: 22px 24px; box-shadow: 8px 8px 0 rgb(15 95 107 / .55); }
.insta-kopf { display: flex; align-items: center; gap: 10px; font: 700 clamp(24px, 1.9vw, 30px)/1 var(--kopf-schrift); }
.insta-punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--petrol-hell); }
.woche { margin: 18px 0 8px; display: grid; gap: 0; }
.woche div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid rgb(234 235 238 / .16); }
.woche dt { font-weight: 700; color: var(--petrol-hell); }
.woche dd { margin: 0; }
.textlink { display: inline-flex; gap: 8px; min-height: 44px; align-items: center; font-weight: 700; text-decoration: underline; text-decoration-color: var(--petrol); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.textlink.hell { color: var(--grund-hell); text-decoration-color: var(--petrol-hell); }

/* Kontakt: helle Karte auf Graphit */
.kontakt-karte { background: var(--grund-hell); color: var(--graphit); border-radius: 6px; padding: 0 24px 22px; overflow: hidden; }
.kontakt-karte::before { content: ""; display: block; height: 10px; margin: 0 -24px 20px; background: var(--petrol); }
.kontakt-name { font: 700 clamp(26px, 2vw, 34px)/1 var(--kopf-schrift); }
.kontakt-wege { margin-top: 14px; display: grid; }
.kontakt-wege a { min-height: 40px; display: flex; align-items: center; font-weight: 700; text-decoration: underline; text-decoration-color: var(--petrol); text-underline-offset: 4px; }
.kontakt-ort { margin-top: 6px; color: var(--leise); }

/* Fuß */
.fuss { background: var(--w5); color: var(--grund-hell); padding: 28px var(--rand-x) 26px; display: grid; gap: 14px; }
.fuss-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.fuss a { color: var(--grund-hell); }
.fuss-nav a { min-height: 40px; display: inline-flex; align-items: center; font-weight: 700; text-decoration: none; }
.fuss-klein { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font-size: 14px; color: var(--leise-dunkel); }
.fuss-klein a { color: var(--leise-dunkel); min-height: 32px; display: inline-flex; align-items: center; }
.fuss-klein span a { display: inline; }

.ki-hinweis { font-size: .8rem; line-height: 1.2; color: var(--leise); }


/* =====================================================================
   Ruhige Fassung (Grundschicht): Halte als Abschnitte untereinander
   ===================================================================== */
html:not(.film-an) .film, html:not(.film-an) .farbe, html:not(.film-an) .laufname, html:not(.film-an) .punkte, html:not(.film-an) .weiter, html:not(.film-an) .vorspann { display: none; }
html:not(.film-an) .shot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .62fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); align-items: center;
  padding: 72px var(--rand-x); }
html:not(.film-an) .shot:first-of-type { padding-top: 132px; }
html:not(.film-an) .shot[data-halt="2"] { padding-block: 88px 60px; }
html:not(.film-an) .shot[data-halt="3"] { padding-block: 60px 100px; }
html:not(.film-an) .shot[data-halt="4"] { padding-block: 96px 52px; }
html:not(.film-an) .shot[data-halt="5"] { padding-block: 76px 120px; }
html:not(.film-an) .shot[data-halt="1"] { background: var(--w1-hell); }
html:not(.film-an) .shot[data-halt="2"] { background: var(--w2-hell); }
html:not(.film-an) .shot[data-halt="3"] { background: var(--w3-hell); }
html:not(.film-an) .shot[data-halt="4"] { background: var(--w4-hell); }
html:not(.film-an) .shot[data-halt="5"] { background: var(--w5); color: var(--grund-hell); }
html:not(.film-an) .shot[data-halt="5"] .ki-hinweis { color: var(--leise-dunkel); }
html:not(.film-an) .shot-pose { grid-column: 2; grid-row: 1; margin: 0; }
html:not(.film-an) .shot-pose img { width: 100%; border-radius: 6px; }
html:not(.film-an) .shot-pose figcaption { margin-top: 6px; }
html:not(.film-an) .shot-links { grid-column: 1; grid-row: 1; }
html:not(.film-an) .shot-rechts { grid-column: 3; grid-row: 1; }
@media (max-width: 899px) {
  html:not(.film-an) .shot { grid-template-columns: minmax(0, 1fr); padding: 48px var(--rand-x); }
  html:not(.film-an) .shot:first-of-type { padding-top: 88px; }
  html:not(.film-an) .shot-pose, html:not(.film-an) .shot-links, html:not(.film-an) .shot-rechts { grid-column: 1; grid-row: auto; }
}

/* =====================================================================
   Film-Fassung (html.film-an)
   ===================================================================== */
html.film-an .buehne { position: relative; height: calc(100 * var(--vh)); overflow: hidden; }
html.film-an .shot-pose { display: none; }

/* Film: Standbild unten, Videos darüber; ein Video wird erst sichtbar, wenn es läuft (nie ein schwarzes Bild) */
.film { position: absolute; inset: 0; z-index: 0; isolation: isolate; background: var(--wand); }
.film picture, .film img, .film video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; }
.film .halt-js { opacity: 0; transition: opacity .18s linear; }
.film .halt-js.an { opacity: 1; }
.film video { opacity: 0; }
.film video.an { opacity: 1; }
html.film-an .film-hinweis { position: absolute; right: 12px; bottom: 16px; z-index: 4; color: var(--graphit); text-shadow: 0 0 6px rgb(234 235 238 / .9);
  writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .04em; }   /* senkrecht am Rand, von unten nach oben (Noah 19.10.) */
html.mit-intro .film-hinweis { opacity: 0; }   /* im Vorspann steht stattdessen .vs-ki, danach dauerhaft am Film */
html:not(.film-an) .film-hinweis { display: none; }
html.am-ende .film-hinweis { bottom: 74px; color: var(--grund-hell); text-shadow: 0 0 6px rgb(0 0 0 / .6); }

/* Farbe je Halt: getönte Ränder, Mitte frei */
.farbe i { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--sanft); pointer-events: none; }
.farbe i.an { opacity: 1; }
.farbe i[data-halt="1"] { background: linear-gradient(90deg, rgb(233 220 198 / .92) 0%, rgb(233 220 198 / .55) 24%, transparent 37%, transparent 63%, rgb(233 220 198 / .55) 76%, rgb(233 220 198 / .92) 100%); }
.farbe i[data-halt="2"] { background: linear-gradient(90deg, rgb(207 220 207 / .92) 0%, rgb(207 220 207 / .55) 24%, transparent 37%, transparent 63%, rgb(207 220 207 / .55) 76%, rgb(207 220 207 / .92) 100%); }
.farbe i[data-halt="3"] { background: linear-gradient(90deg, rgb(205 216 228 / .92) 0%, rgb(205 216 228 / .55) 24%, transparent 37%, transparent 63%, rgb(205 216 228 / .55) 76%, rgb(205 216 228 / .92) 100%); }
.farbe i[data-halt="4"] { background: linear-gradient(90deg, rgb(230 207 193 / .92) 0%, rgb(230 207 193 / .55) 24%, transparent 37%, transparent 63%, rgb(230 207 193 / .55) 76%, rgb(230 207 193 / .92) 100%); }
.farbe i[data-halt="5"] { background: linear-gradient(90deg, rgb(35 33 30 / .96) 0%, rgb(35 33 30 / .9) 31%, transparent 38.5%, transparent 61.5%, rgb(35 33 30 / .9) 69%, rgb(35 33 30 / .96) 100%); }

/* großer Name am Schluss: Laufschrift nur an den Seiten, über Noah ausgeblendet */
.laufname { position: absolute; left: 0; right: 0; bottom: 92px; z-index: 2; overflow: hidden; opacity: 0; pointer-events: none;
  font: 700 clamp(90px, 14vw, 230px)/1 var(--kopf-schrift); color: transparent; -webkit-text-stroke: 1.5px rgb(234 235 238 / .55);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 31%, transparent 37%, transparent 63%, #000 69%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 31%, transparent 37%, transparent 63%, #000 69%, #000 100%); }
.laufname-spur { display: flex; gap: .45em; width: max-content; white-space: nowrap; }
html.am-ende .laufname { opacity: 1; transition: opacity .8s var(--sanft); }
/* Steht an der Endlage der früheren Laufschrift und blendet nur ein: Das Laufen der großen Konturschrift kostete in
   Edge Takte bis 133 ms, auch als vorgezeichnete Leinwand; stehend höchstens 33 ms (Prüfer und Messung, 18.10.) */
.laufname-spur { transform: translateX(-24%); }

/* Halte: Texte links und rechts von Noah */
html.film-an .shot { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 28fr) minmax(0, 36fr);
  align-items: center; padding: calc(var(--kopf-h) + 20px) max(var(--rand-x), 60px) 84px var(--rand-x); pointer-events: none; visibility: hidden; transition: visibility 0s .45s; }
html.film-an .shot.aktiv { visibility: visible; transition-delay: 0s; }
html.film-an .shot.aktiv .shot-links, html.film-an .shot.aktiv .shot-rechts { pointer-events: auto; }
html.film-an .shot-links { grid-column: 1; max-width: 520px; padding-right: 12px; }
html.film-an .shot-rechts { grid-column: 3; justify-self: end; width: 100%; max-width: 480px; padding-left: 12px; }
html.film-an .shot-kontakt { color: var(--grund-hell); }
@media (min-width: 900px) { html.film-an .shot-kontakt .shot-links { max-width: min(520px, 28vw); } }   /* Lesetext bleibt im dichten Rand (≥ 4,5 : 1) */
@media (min-width: 900px) { html.film-an .shot-kontakt h2 { font-size: min(3.25vw, 62px); } }   /* „mir Ihren Ablauf“ passt einzeilig in den schmalen Rand */
.shot h2 { text-wrap: balance; }

/* Schrift-Animationen: Zeilen steigen aus der Maske, Absätze öffnen sich von oben, Karten gleiten herein.
   Hinein gestaffelt nach dem Clip, hinaus schnell beim Start des Clips. Nur transform, opacity, clip-path. */
html.film-an .shot .zl > span { transform: translateY(108%); transition: transform .38s cubic-bezier(.5, 0, .75, 0); }
html.film-an .shot .shot-links > :not(h1, h2) { clip-path: inset(0 0 100% 0); transform: translateY(14px); transition: clip-path .35s ease-out, transform .35s ease-out; }
html.film-an .shot .shot-rechts > * { opacity: 0; transform: translateX(46px); transition: opacity .3s ease-out, transform .35s ease-out; }
html.film-an .shot .arbeit, html.film-an .shot .ablauf li { opacity: 0; transform: translateX(46px); transition: opacity .3s ease-out, transform .35s ease-out; }
html.film-an .shot .shot-rechts > .arbeiten, html.film-an .shot .shot-rechts > .ablauf { opacity: 1; transform: none; }
html.film-an .shot.aktiv .zl > span { transform: none; transition: transform .9s var(--kurve) calc(.05s + var(--n, 0) * .1s); }
html.film-an .shot.aktiv .shot-links > :not(h1, h2) { clip-path: inset(0 0 -2px 0); transform: none; transition: clip-path .8s var(--sanft) .32s, transform .8s var(--sanft) .32s; }
html.film-an .shot.aktiv .shot-rechts > * { opacity: 1; transform: none; transition: opacity .7s var(--sanft) .25s, transform .9s var(--kurve) .25s; }
html.film-an .shot.aktiv .arbeit, html.film-an .shot.aktiv .ablauf li { opacity: 1; transform: none; transition: opacity .6s var(--sanft) calc(.3s + var(--n, 0) * .08s), transform .9s var(--kurve) calc(.3s + var(--n, 0) * .08s); }
.zl:nth-child(2) > span { --n: 1; } .zl:nth-child(3) > span { --n: 2; }
.arbeit:nth-child(2), .ablauf li:nth-child(2) { --n: 1; } .arbeit:nth-child(3), .ablauf li:nth-child(3) { --n: 2; }
.arbeit:nth-child(4), .ablauf li:nth-child(4) { --n: 3; } .arbeit:nth-child(5), .ablauf li:nth-child(5) { --n: 4; }

/* Halte-Punkte rechts, Hinweis „Scrollen“ unten in der Mitte (nur am ersten Halt) */
.punkte { position: absolute; z-index: 4; right: 14px; top: 50%; translate: 0 -50%; }
.punkte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.punkte a { position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; text-decoration: none; color: var(--graphit); }
.punkte a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; transition: transform .4s var(--kurve), background-color .4s; }
.punkte a[aria-current]::before { background: var(--petrol); border-color: var(--petrol); transform: scale(1.35); }
.punkte a span { position: absolute; right: 38px; white-space: nowrap; font-size: 13px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: rgb(234 235 238 / .9);
  opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s; pointer-events: none; }
.punkte a:focus-visible span { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .punkte a:hover span { opacity: 1; transform: none; } }
html.am-ende .punkte a { color: var(--grund-hell); }
html.am-ende .punkte a[aria-current]::before { background: var(--petrol-hell); border-color: var(--petrol-hell); }
.weiter { position: absolute; z-index: 4; left: 50%; bottom: 20px; translate: -50% 0; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--leise); opacity: 0; transition: opacity .6s var(--sanft); }
.weiter-strich { width: 2px; height: 26px; background: linear-gradient(var(--petrol), var(--petrol)) 0 0 / 100% 40% no-repeat, rgb(66 68 75 / .25); }
html.film-an.am-anfang .weiter { opacity: 1; }
.ansage { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Fuß: nur am Abschluss, als letzte Zeile */
html.film-an .fuss { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: linear-gradient(180deg, transparent, rgb(23 22 20 / .9) 45%); padding-top: 36px;
  visibility: hidden; opacity: 0; transition: opacity .45s var(--sanft), visibility 0s .45s; }
html.film-an.am-ende .fuss { visibility: visible; opacity: 1; transition: opacity .6s var(--sanft) .4s, visibility 0s; }
html.film-an .fuss-nav { display: none; }
@media (min-width: 900px) {   /* Impressum, Datenschutz und Hinweis visuellweb.de an jedem Halt (Prüfer Runde 1, P22) */
  html.film-an:not(.am-ende):not(.mit-intro) .fuss { visibility: visible; opacity: 1; background: none; padding: 0 var(--rand-x) 10px; pointer-events: none; transition: opacity .45s var(--sanft); }
  html.film-an:not(.am-ende) .fuss-klein { pointer-events: auto; color: var(--leise); }
  html.film-an:not(.am-ende) .fuss-klein a { color: var(--leise); }
  .weiter { bottom: 12px; }   /* auf Höhe der Rechtszeile, mit Abstand zu Noahs Schuhen (Prüfer Runde 2) */
}
/* Halt Webdesign: ein Fenster, das durch die Arbeiten blättert (js/start.js, L-053 / Prüfer Runde 2; Noah 18.10.:
   „nur 1 fenster“, auf allen Breiten) */
html.film-an.arbeiten-blaettern .arbeiten { display: grid; grid-template-columns: minmax(0, 1fr); }
html.film-an.arbeiten-blaettern .arbeit, html.film-an.arbeiten-blaettern .arbeit:first-child, html.film-an.arbeiten-blaettern .arbeit:nth-child(n) { display: block; grid-area: 1 / 1; }
html.film-an.arbeiten-blaettern .arbeit img, html.film-an.arbeiten-blaettern .arbeit:first-child img { aspect-ratio: 16 / 10; }
html.film-an.arbeiten-blaettern .shot.aktiv .arbeit:not(.zeigt) { opacity: 0; transform: translateX(18px); visibility: hidden;
  transition: opacity .6s var(--sanft), transform .8s var(--kurve), visibility 0s .8s; }
html.film-an.arbeiten-blaettern .shot.aktiv .arbeit.zeigt { z-index: 1; transition-delay: .3s; }
html.arbeiten-blaettern .blaettern-knopf { display: inline-flex; }
@media (min-width: 900px) {
  html.arbeiten-blaettern .arbeit-name { font-size: 15px; padding: 7px 11px; left: 12px; bottom: 12px; }
  html.film-an .shot[data-halt="1"] .shot-satz, html.film-an .shot[data-halt="1"] .aktion-zusatz { display: none; }
}
@media (max-width: 899px) {
  html.film-an.arbeiten-blaettern .arbeiten { max-width: 210px; }   /* Text des Halts muss unter den Film passen (passt() in start.js) */
  html.film-an.arbeiten-blaettern .arbeit-name em { display: inline; }
  html.arbeiten-blaettern .blaettern-knopf { min-height: 32px; margin-top: 6px; padding: 0 12px; font-size: 14px; }
}
.blaettern-knopf { display: none; align-items: center; gap: 8px; min-height: 40px; margin: 10px 18px 0 0; padding: 0 14px; border: 0; border-radius: 999px; background: rgb(35 33 30 / .08);
  color: var(--graphit); font: 700 14px/1 var(--text-schrift); cursor: pointer; }
.blaettern-knopf::before { content: ""; width: 8px; height: 10px; border-inline: 3px solid currentColor; box-sizing: border-box; }
.blaettern-knopf.steht::before { width: 0; height: 0; border-inline: 0; border-block: 5px solid transparent; border-left: 8px solid currentColor; }
@media (hover: hover) and (pointer: fine) { .blaettern-knopf:hover { background: rgb(35 33 30 / .14); } }
@media (min-width: 900px) and (max-width: 1279px) {
  .weiter { left: 66%; translate: 0 0; }   /* schmaler Desktop: neben Noah, frei von der Rechtszeile */
  html.film-an:not(.am-ende) .fuss-klein { gap: 4px 18px; }
}

/* Vorspann „Durchs Fenster“ (2 s seit 19.10., Noah: Ladezeit, vorher 3,2 s; einmal, überspringbar; Maße setzt js/start.js aus dem Filmrahmen):
   sofort öffnet sich Noahs Fenster (der Film per clip-path, darüber eine Leiste „nj-hoffmann.de“), ab 0,1 s klappen
   rundherum die Fenster der gebauten Websites auf, ab 0,15 s steigt der Name auf; ab 1,1 s taucht die Kamera in Noahs
   Fenster: die anderen fliegen mit dem Faktor des Fensters nach außen, das Fenster wird zum Film. */
.vorspann { display: none; }
html.mit-intro .vorspann { display: block; position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
html.mit-intro body { background: var(--graphit); }
/* Layout-Sprung beim Laden (Website-Audit 05.11.2026, CLS Desktop 0,159): Malt der Browser, bevor start.js film-an setzt, steht
   der Name noch ohne Koordinaten links oben und der Fuß im Fluss; dann sprangen beide an ihren Platz (ein Ereignis 0,158).
   Ohne Vorspann (Ankunft von einer Unterseite, Sprungmarke, weniger Bewegung) sprangen zusätzlich die Abschnitte (CLS 1,0).
   Bis film-an oder ruhig feststeht, nehmen sie nicht teil. Lädt start.js gar nicht, kommen sie nach 8 s zurück. */
html.mit-intro:not(.film-an) .vorspann-name { display: none; }
html.mit-js:not(.film-an):not(.ruhig) .fuss, html.mit-js:not(.film-an):not(.ruhig) .shot { visibility: hidden; animation: js-rueckfall 0s linear 8s forwards; }
@keyframes js-rueckfall { to { visibility: visible; } }
/* Ende des Vorspanns: Grund weich von Graphit auf Hell statt in einem Bild (Prüfer mobil 19.10.: 58 % der Fläche sprangen) */
html.film-an body { transition: background-color .6s var(--sanft); }
/* Wisch zurück am Seitenanfang schaltet nur den Halt: kein Neuladen durch Herunterziehen, kein Federn (iOS) */
html.film-an, html.film-an body { overscroll-behavior: none; }
.vs-wand { position: absolute; inset: 0; }
.vs-fenster { position: absolute; left: var(--mx); top: var(--my); width: var(--w); margin: 0; opacity: 0;
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--dreh)); box-shadow: 0 18px 40px -18px rgb(0 0 0 / .6); }
.vs-fenster img { display: block; width: 100%; height: var(--h); object-fit: cover; object-position: 50% 0; background: var(--grund-hell); }
.vs-leiste, .vs-eigen { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; background: var(--petrol); border-radius: 6px 6px 0 0; color: var(--grund-hell); font-size: 12px; }
.vs-leiste i, .vs-eigen i { width: 7px; height: 7px; border-radius: 50%; background: rgb(234 235 238 / .45); }
.vs-leiste i:first-child, .vs-eigen i:first-child { background: var(--grund-hell); }
.vs-eigen span { margin-left: 6px; white-space: nowrap; }
.vs-eigen { position: absolute; left: var(--fl); top: calc(var(--ft) - 22px); width: var(--w); box-sizing: border-box; opacity: 0; }
.vorspann-name { position: absolute; left: var(--mx); top: calc(var(--my) + var(--dy)); transform: translate(-50%, -50%); margin: 0;
  display: grid; justify-items: center; font: 400 min(4.6vw, 76px)/.95 var(--kopf-schrift); color: var(--grund-hell); white-space: nowrap; }
/* KI-Hinweis im Vorspann (Art. 50 KI-VO, ab dem ersten Bild sichtbar; Noah 19.10.: „klein und dezent“) */
.vs-ki { position: absolute; right: 14px; bottom: 12px; margin: 0; font: 400 .75rem/1 var(--text-schrift); letter-spacing: .02em;
  color: rgb(234 235 238 / .8); text-shadow: 0 0 6px rgb(0 0 0 / .55); }   /* Schein: am Ende liegt der helle Film darunter */
.vm { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.1em; }
/* Verzierung unter dem Namen (Noah: „es schwebt so lost“): Kopflinie der Seite, von der Mitte aufgezogen, darunter die Schlagworte */
.vs-zier { display: block; width: 3.4em; height: 6px; margin-top: .28em; transform: scaleX(0);
  background: linear-gradient(var(--petrol-hell), var(--petrol-hell)) 50% 0 / 46% 6px no-repeat,
              linear-gradient(rgb(234 235 238 / .35), rgb(234 235 238 / .35)) 0 2px / 100% 2px no-repeat; }
.vs-worte { display: block; margin-top: .9em; font: 700 max(12px, .17em)/1 var(--text-schrift); letter-spacing: .32em; padding-left: .32em; color: var(--grund-hell); opacity: 0; }
html.mit-intro.intro-los .vs-zier { animation: vs-zier .45s var(--kurve) .4s both, vs-weg .25s 1.1s linear forwards; }
html.mit-intro.intro-los .vs-worte { animation: vs-worte .4s var(--kurve) .5s both, vs-weg .25s 1.1s linear forwards; }
@keyframes vs-zier { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vs-worte { from { opacity: 0; transform: translateY(8px); } to { opacity: .85; transform: none; } }
@keyframes vs-weg { to { opacity: 0; } }
.vm > span { display: block; transform: translateY(110%); }
html.mit-intro .film { clip-path: inset(50% 50% 50% 50% round 6px); }
html.mit-intro.intro-los .film { animation: vs-film-auf .35s var(--kurve) 0s both, vs-film-tauch .9s cubic-bezier(.7, 0, .2, 1) 1.1s forwards; }
html.mit-intro.intro-los .vs-eigen { animation: vs-da .2s linear .1s both, vs-eigen-tauch .9s cubic-bezier(.7, 0, .2, 1) 1.1s forwards; }
html.mit-intro.intro-los .vs-fenster { animation: vs-auf .4s var(--kurve) calc(.1s + var(--i) * .04s) both, vs-tauch .9s cubic-bezier(.7, 0, .2, 1) 1.1s forwards; }
html.mit-intro.intro-los .vm > span { animation: vm-rein .5s var(--kurve) .15s both, vm-raus .3s 1.12s cubic-bezier(.5, 0, .75, 0) forwards; }
html.mit-intro.intro-los .vm:nth-child(2) > span { animation-delay: .21s, 1.15s; }
/* Inhalt blendet schon während der Kamerafahrt ein (ab 1,45 s, .intro-spaet), nicht erst nach dem Vorspann: sonst zählt das
   Vorschaubild als größter Inhalt erst bei rund 4 s (LCP, Performance-Prüfer 19.10.) */
html.mit-intro:not(.intro-spaet) :is(.shot, .kopf, .punkte, .farbe, .weiter) { opacity: 0; }
html.film-an .kopf, html.film-an .punkte, html.film-an .farbe { transition: opacity .6s var(--sanft); }
@keyframes vm-rein { from { transform: translateY(110%); } to { transform: none; } }
@keyframes vm-raus { from { transform: none; } to { transform: translateY(-110%); } }
@keyframes vs-da { from { opacity: 0; } to { opacity: 1; } }
@keyframes vs-film-auf { from { clip-path: inset(calc(var(--ct) + var(--ch)) var(--cl) calc(var(--cb) + var(--ch)) var(--cl) round 6px); } to { clip-path: inset(var(--ct) var(--cl) var(--cb) var(--cl) round 0 0 6px 6px); } }
@keyframes vs-film-tauch { from { clip-path: inset(var(--ct) var(--cl) var(--cb) var(--cl) round 0 0 6px 6px); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes vs-eigen-tauch { from { left: var(--fl); top: calc(var(--ft) - 22px); width: var(--w); } to { left: var(--fleft); top: calc(var(--ftop) - 22px); width: var(--fw); } }
@keyframes vs-auf { from { opacity: 0; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(calc(var(--dreh) * 4)) scale(.55); }
  to { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--dreh)); } }
@keyframes vs-tauch { from { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--dreh)); }
  70% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(0deg) scale(var(--zs)); } }

/* ---------- Tablet quer (1024 bis 1279) ---------- */
@media (max-width: 1279px) and (min-width: 900px) {
  .name { font-size: clamp(46px, 5.6vw, 72px); }
  .shot h2 { font-size: clamp(36px, 3.9vw, 52px); }
  .kern { font-size: 18px; }
  .shot-satz { font-size: 16px; }
  .shot .karten-titel { font-size: 21px; }
  .ablauf li { padding: 9px 12px; } .ablauf p { font-size: 14px; } .ablauf { gap: 7px; } .ablauf h3 { font-size: 20px; }
  .arbeiten { gap: 9px; }
  .woche div { grid-template-columns: 6.5em 1fr; }
  .antwort-zeile { padding: 12px 14px; }
}

/* ---------- Handy: Film oben (Ausschnitt 4:5 um Noah), Inhalt darunter ---------- */
@media (max-width: 899px) {
  html.film-an .buehne { --film-h: min(calc(100 * var(--vh) - 64px - 370px), 125vw); }
  html.film-an.eng .buehne { --film-h: min(calc(100 * var(--vh) - 64px - 430px), 125vw); }
  /* Farbe des Halts (wie die Fläche unten) für Kopfleiste und Übergang ins Video (Noah 19.10.) */
  html.film-an[data-halt="0"] { --stil: var(--w1-hell); } html.film-an[data-halt="1"] { --stil: var(--w2-hell); }
  html.film-an[data-halt="2"] { --stil: var(--w3-hell); } html.film-an[data-halt="3"] { --stil: var(--w4-hell); }
  html.film-an[data-halt="4"] { --stil: var(--w5); }
  .film { top: 64px; bottom: auto; height: var(--film-h); transition: height .5s var(--kurve), z-index 0s .5s; }
  /* Clip läuft: Film auf zwei Drittel der Höhe (--gross aus js/start.js), über der Farbfläche; danach zurück aufs Drittel.
     Höhe statt transform, damit beim Wachsen mehr von der Figur zu sehen ist (Video füllt die volle Breite) */
  html.film-an[data-laeuft="1"] .film { height: calc(var(--film-h) * var(--gross, 1)); z-index: 2; transition: height .5s var(--kurve), z-index 0s; }
  html.film-an .punkte { transition: opacity .3s var(--sanft); }
  html.film-an[data-laeuft="1"] .punkte { opacity: 0; }
  html.film-an .farbe i::after { transition: opacity .3s var(--sanft); }
  html.film-an[data-laeuft="1"] .farbe i::after { opacity: 0; }   /* kein halbes Riesenwort unter dem großen Film */
  /* Video über die volle Breite, ohne Seitenstreifen (Noah 19.10.: „komplett an die Seite“); oben bleibt der Kopf im Bild */
  .film picture, .film > img, .film video { left: 0; right: 0; width: 100%; translate: none; object-fit: cover; object-position: 50% 0;
    -webkit-mask-image: none; mask-image: none; }
  .film picture img { left: 0; width: 100%; }
  html.film-an .film::after { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 26px; pointer-events: none;
    background: linear-gradient(var(--stil, var(--wand)), transparent); transition: background .6s var(--sanft); }
  html.film-an .film-hinweis { right: 6px; bottom: auto; top: calc(64px + var(--film-h) - 10px); transform: translateY(-100%) rotate(180deg); }
  html.film-an.am-ende .film-hinweis { bottom: auto; color: var(--graphit); text-shadow: 0 0 6px rgb(234 235 238 / .9); }   /* lesbar auf dem hellen Studio */
  .farbe { position: absolute; left: 0; right: 0; top: calc(64px + var(--film-h)); bottom: 0; }
  .farbe i[data-halt="1"] { background: var(--w1-hell); } .farbe i[data-halt="2"] { background: var(--w2-hell); }
  .farbe i[data-halt="3"] { background: var(--w3-hell); } .farbe i[data-halt="4"] { background: var(--w4-hell); }
  .farbe i[data-halt="5"] { background: var(--w5); }
  html.film-an .shot { display: block; padding: calc(64px + var(--film-h) + 24px) var(--rand-x) 16px; }
  /* Anker über jeder Überschrift: kurzer Strich wie die Kopflinie, zieht sich beim Ankommen auf (Noah 19.10.: die
     Überschriften „hängen in der Luft“, „so nah dran“) */
  html.film-an .shot-links::before { content: ""; display: block; width: 40px; height: 4px; margin-bottom: 12px; background: var(--petrol);
    transform: scaleX(0); transform-origin: left; transition: transform .6s var(--kurve) .2s; }
  html.film-an .shot.aktiv .shot-links::before { transform: none; }
  html.film-an .shot[data-halt="5"] .shot-links::before { background: var(--petrol-hell); }
  html.film-an.eng .shot { padding-top: calc(64px + var(--film-h) + 16px); }
  html.film-an.eng .shot-links::before { margin-bottom: 8px; }
  html.film-an .shot-links, html.film-an .shot-rechts { max-width: none; padding: 0; }
  html.film-an .shot-rechts { margin-top: 12px; }
  .name { font-size: clamp(38px, 10.6vw, 52px); }
  .shot h2 { font-size: clamp(30px, 8.6vw, 42px); }
  .kern { margin-top: 10px; font-size: 17px; border-left-width: 4px; padding-left: 12px; }
  html.film-an .shot-satz { margin-top: 8px; font-size: 16px; line-height: 1.42; }
  html.film-an .shot[data-halt="1"] .shot-satz, html.film-an .aktion-zusatz, html.film-an .karten-titel { display: none; }
  .aktion { margin-top: 12px; }
  .knopf { min-height: 46px; padding: 0 22px; font-size: 16px; }
  .mehr { margin-top: 2px; }
  /* Handy: zwei erkennbare Arbeiten mit Namen statt einer Bildleiste (L-053), alle weiteren auf /webdesign/ */
  html.film-an .arbeiten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html.film-an .arbeit:first-child { grid-column: auto; }
  html.film-an .arbeit:nth-child(n+3) { display: none; }
  html.film-an .arbeit img, html.film-an .arbeit:first-child img { aspect-ratio: 16 / 10; }
  html.film-an .fenster-leiste { height: 18px; font-size: 12px; line-height: 18px; }   /* mindestens 12 px (Audit handy.schrift) */
  html.film-an .arbeit-name { font-size: 12px; padding: 4px 7px; left: 6px; bottom: 6px; }
  html.film-an .arbeit-name em { display: none; }
  html.film-an .ablauf { gap: 4px; }
  html.film-an .ablauf li { padding: 6px 10px; }
  html.film-an .ablauf h3 { font-size: 19px; }
  html.film-an .ablauf p { display: none; }
  html.film-an .antwort figcaption, html.film-an .antwort-zeile:not(.quelle) { display: none; }
  html.film-an .antwort-zeile { padding: 8px 14px; }
  html.film-an .antwort-kopf { padding: 8px 14px; font-size: 15px; }
  html.film-an .insta-karte { padding: 12px 16px; }
  html.film-an .insta-kopf { font-size: 22px; }
  html.film-an .woche { margin: 8px 0 0; }
  html.film-an .woche div { padding: 4px 0; grid-template-columns: 6.2em 1fr; font-size: 16px; }
  html.film-an .textlink { min-height: 36px; }
  html.film-an .kontakt-name, html.film-an .kontakt-ort { display: none; }
  html.film-an .kontakt-wege { margin-top: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
  html.film-an .kontakt-karte { padding: 0 16px 6px; }
  html.film-an .kontakt-karte::before { margin: 0 -16px 10px; height: 8px; }
  html.film-an .shot-kontakt { padding-bottom: 84px; }
  html.film-an.eng .shot-satz { font-size: 15px; line-height: 1.38; }
  html.film-an.eng .woche { display: none; }   /* knappe Höhe: lieber die Wochenliste weglassen als Schrift unter 16 px oder die ruhige Fassung (steht auf /ueber-mich/) */
  html.film-an.eng .shot h2 { font-size: clamp(28px, 8vw, 38px); }
  .punkte { right: auto; left: 50%; top: calc(64px + var(--film-h) - 30px); translate: -50% 0; }
  .punkte ul { display: flex; gap: 0; }
  .punkte a { width: 30px; height: 30px; color: var(--graphit); }
  .punkte a span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 1; }   /* nur für Screenreader (axe link-name) */
  html.am-ende .punkte a { color: var(--graphit); }
  html.am-ende .punkte a[aria-current]::before { background: var(--petrol); border-color: var(--petrol); }
  .weiter { display: none; }
  .laufname { display: none; }
  .vorspann-name { font-size: min(11vw, 52px); }
  html.film-an .fuss { padding: 22px var(--rand-x) 12px; }
}

/* Handy: Gestaltung der Farbfläche unter dem Film (Noah 19.10.: „etwas zu clean strukturiert, mir fehlen Designelemente,
   nur auf der Startseite“). Nur im Hintergrund der Fläche, nimmt dem Text keinen Platz: oben die Kopflinie der Unterseiten
   (Petrol-Band und feine Linie) als Naht zum Film, am rechten Rand senkrecht ein Riesenwort aus dem Inhalt des Halts in Prata, Ton in Ton, ganz zu sehen (keine Nummern, L-050). */
@media (max-width: 899px) {
  .farbe i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px;
    background: linear-gradient(var(--petrol), var(--petrol)) 0 0 / 64% 8px no-repeat,
                linear-gradient(rgb(35 33 30 / .2), rgb(35 33 30 / .2)) 0 3px / 100% 2px no-repeat;
    transform: scaleX(.2); transform-origin: left center; transition: transform 1s var(--kurve) .15s; }
  .farbe i.an::before { transform: none; }
  .farbe i::after { position: absolute; right: 2px; top: 14px; writing-mode: vertical-rl; white-space: nowrap; font: 400 min(19vw, 96px)/1 var(--kopf-schrift); letter-spacing: -.04em;
    transform: translateY(-6%); transition: transform 1.2s var(--kurve); }
  .farbe i.an::after { transform: none; }
  .farbe i[data-halt="1"]::after { content: "Websites"; color: var(--w1); }
  .farbe i[data-halt="2"]::after { content: "Abläufe"; color: var(--w2); }
  .farbe i[data-halt="3"]::after { content: "Wissen"; color: var(--w3); }
  .farbe i[data-halt="4"]::after { content: "Ich"; color: var(--w4); }
  .farbe i[data-halt="5"]::after { content: "Anfrage"; color: rgb(234 235 238 / .05); }
  .farbe i[data-halt="5"]::before { background: linear-gradient(var(--petrol-hell), var(--petrol-hell)) 0 0 / 64% 8px no-repeat,
                linear-gradient(rgb(234 235 238 / .2), rgb(234 235 238 / .2)) 0 3px / 100% 2px no-repeat; }
  .farbe i { overflow: hidden; }
}
/* Dieselben Elemente in der ruhigen Fassung am Handy (kleine Telefone, reduzierte Bewegung): Kopflinie über jedem
   Abschnitt, Riesenwort oben rechts am Textblock */
@media (max-width: 899px) {
  html:not(.film-an) .shot::before { content: ""; display: block; height: 8px; margin: -16px calc(-1 * var(--rand-x)) 24px;
    background: linear-gradient(var(--petrol), var(--petrol)) 0 0 / 64% 8px no-repeat,
                linear-gradient(rgb(35 33 30 / .2), rgb(35 33 30 / .2)) 0 3px / 100% 2px no-repeat; }
  html:not(.film-an) .shot[data-halt="5"]::before { background: linear-gradient(var(--petrol-hell), var(--petrol-hell)) 0 0 / 64% 8px no-repeat,
                linear-gradient(rgb(234 235 238 / .2), rgb(234 235 238 / .2)) 0 3px / 100% 2px no-repeat; }
  html:not(.film-an) .shot:first-of-type::before { display: none; }
  html:not(.film-an) .shot-links { position: relative; isolation: isolate; }
  html:not(.film-an) .shot-links::before { position: absolute; z-index: -1; right: calc(2px - var(--rand-x)); top: 0; writing-mode: vertical-rl; white-space: nowrap; font: 400 min(19vw, 96px)/1 var(--kopf-schrift); letter-spacing: -.01em; }
  html:not(.film-an) .shot { overflow: hidden; }
  html:not(.film-an) .shot[data-halt="1"] .shot-links::before { content: "Websites"; color: var(--w1); }
  html:not(.film-an) .shot[data-halt="2"] .shot-links::before { content: "Abläufe"; color: var(--w2); }
  html:not(.film-an) .shot[data-halt="3"] .shot-links::before { content: "Wissen"; color: var(--w3); }
  html:not(.film-an) .shot[data-halt="4"] .shot-links::before { content: "Ich"; color: var(--w4); }
  html:not(.film-an) .shot[data-halt="5"] .shot-links::before { content: "Anfrage"; color: rgb(234 235 238 / .05); }
}
/* Handy: Zwischenwort während des Clips (Noah 19.10.: „beim Scroll ist der untere Bereich so leer, da die Schrift WEBSITE
   mittig, mit einer kleinen Animation, dass es zur Seite geht, wenn der Scrollvorgang abgeschlossen ist“). Das Riesenwort
   des Ziels steht groß in der Mitte der freien Fläche und gleitet am Ende nach rechts an den Rand, wo es senkrecht weiterlebt. */
.zwischen { display: none; }
@media (max-width: 899px) {
  html.film-an .zwischen { display: grid; place-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
    top: calc(64px + var(--film-h) * var(--gross, 1)); padding: 0 var(--rand-x); overflow: hidden; }
  /* verblasst wie das senkrechte Riesenwort, Buchstabe für Buchstabe geschrieben, darunter ein Schnörkel, der sich zieht
     (Noah 19.10.: „verblasst mit Verzierung und es wird geschrieben“) */
  .zw-inhalt { display: grid; justify-items: center; gap: 2px; }
  .zw-wort { font: 400 var(--zw-gr, min(17vw, 84px))/1 var(--kopf-schrift); letter-spacing: -.02em; white-space: nowrap;
    color: color-mix(in srgb, var(--graphit) 30%, transparent); }
  .zw-wort i { font-style: normal; display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(18%) skewX(-8deg); }
  .zw-zier { width: min(62vw, 260px); height: auto; overflow: visible; }
  .zw-zier path { stroke: color-mix(in srgb, var(--petrol) 55%, transparent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1; stroke-dashoffset: 1; }
  .zw-zier path + path { fill: color-mix(in srgb, var(--petrol) 45%, transparent); stroke-dashoffset: 0; opacity: 0; transform: scale(.3); transform-origin: 228px 14px; }
  html[data-halt="4"] .zw-wort { color: color-mix(in srgb, var(--grund-hell) 26%, transparent); }
  html[data-halt="4"] .zw-zier path { stroke: color-mix(in srgb, var(--petrol-hell) 60%, transparent); }
  html[data-halt="4"] .zw-zier path + path { fill: color-mix(in srgb, var(--petrol-hell) 50%, transparent); }
  .zwischen.zeigen .zw-wort i { opacity: 1; filter: none; transform: none;
    transition: opacity .35s ease-out, filter .45s ease-out, transform .5s var(--kurve); transition-delay: calc(.25s + var(--i) * 110ms); }
  .zwischen.zeigen .zw-zier path { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.6, .1, .3, 1) var(--zw-zier-ab, .8s); }
  .zwischen.zeigen .zw-zier path + path { opacity: 1; transform: none; transition: opacity .25s ease calc(var(--zw-zier-ab, .8s) + .8s), transform .4s var(--kurve) calc(var(--zw-zier-ab, .8s) + .8s); }
  .zw-inhalt { transition: none; }
  .zwischen.weg .zw-inhalt { opacity: 0; transform: translateX(var(--zw-weg, 70vw)) scale(.85); transition: opacity .45s ease-out .1s, transform .55s cubic-bezier(.55, 0, .75, .2); }
  .zwischen.weg .zw-wort i { opacity: 1; filter: none; transform: none; }
  .zwischen.weg .zw-zier path { stroke-dashoffset: 0; }
  .zwischen.weg .zw-zier path + path { opacity: 1; transform: none; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .zw-wort i, .zwischen.zeigen .zw-wort i { transform: none; filter: none; transition-delay: 0s; }
  .zw-zier path, .zwischen.zeigen .zw-zier path { stroke-dashoffset: 0; transition: none; }
  .zwischen.weg .zw-inhalt { transform: none; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .farbe i::before, .farbe i::after { transform: none; transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .knopf, .arbeit a, .punkte a::before, .punkte a span { transition: none; }
}
html.ruhig .knopf, html.ruhig .arbeit a { transition: none; }
/* Weniger Bewegung (Klasse still, js/frueh.js): Film wächst am Handy nicht, kein Zwischenwort, Punkte und Riesenwort bleiben stehen */
html.still[data-laeuft="1"] .film { height: var(--film-h); }
html.still[data-laeuft="1"] .punkte, html.still[data-laeuft="1"] .farbe i::after { opacity: 1; }
html.still .zwischen { display: none; }
/* Großer PC-Bildschirm (Klasse film-klein, js/start.js passt()): Film in Originalgröße unten mittig statt aufgeblasen,
   Ränder weich in die Wandfarbe */
@media (min-width: 900px) {
  html.film-klein .film picture, html.film-klein .film > img, html.film-klein .film video {
    inset: auto auto 0 50%; width: var(--fb); height: var(--fh); translate: -50% 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 7%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 7%);
    mask-composite: intersect; }
  html.film-klein .film picture img { inset: 0; width: 100%; height: 100%; translate: none; -webkit-mask-image: none; mask-image: none; }
}
/* Markenunterschrift über dem Kopf, nur am großen PC-Bildschirm (Noah 19.10.: „über meinem Kopf ist so ein luftleerer Raum“) */
.unterschrift { display: none; }
@media (min-width: 900px) {
  html.mit-unterschrift .unterschrift { display: block; position: absolute; z-index: 1; left: 50%; translate: -50% 0; top: var(--sig-top);
    height: var(--sig-h); aspect-ratio: 1311 / 511; pointer-events: none; opacity: .78; }
  .unterschrift img, .unterschrift video { position: absolute; inset: 0; width: 100%; height: 100%; }
  .unterschrift.schreibt img { opacity: 0; }
  html.am-ende .unterschrift { opacity: .6; }
  html.unterschrift-neben .unterschrift { top: 74px; left: calc(50% + 7vw); translate: none; height: var(--sig-h2, var(--sig-h));
    transition: height .5s var(--kurve), opacity .5s ease; }
  html.unterschrift-neben .unterschrift.aus { opacity: 0; }
}
/* Handy: Unterschrift klein rechts neben dem Kopf, oben im Film (Noah 19.10.: „prüfe die Unterschrift auf dem Handy“) */
@media (max-width: 899px) {
  html.film-an .unterschrift { display: block; position: absolute; z-index: 3; top: calc(64px + 20px); left: 64%;
    height: clamp(32px, 10vw, 46px); aspect-ratio: 1311 / 511; pointer-events: none; opacity: .72; }
  html.film-an.eng .unterschrift { top: calc(64px + 14px); }
  .unterschrift img, .unterschrift video { position: absolute; inset: 0; width: 100%; height: 100%; }
  .unterschrift.schreibt img { opacity: 0; }
}