/* Lichtbestand · nur Startseite
   Startbild (ein Handy in seinen Schichten, ein Lichtstrahl), Leistungen mit Handy-Fächern, Projekte kurz,
   Vorgehen (Treppe), Dahinter (angeheftet). Gemeinsames steht in css/stil.css.
   Bewegung: js/held.js (Startbild, Knopf „Bewegung anhalten“), js/start.js und js/bewegung.js (Rest). */

/* ---------- Startbild ---------- */
.held {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--tief);
}
/* Ein Handy in seinen Schichten: Gehäuse (Betrieb), Code (Programmierung), Raster (Konzept), Oberfläche (Gestaltung), Glas.
   Ein Lichtstrahl geht senkrecht durch alle Schichten; der Funke läuft beim Laden und bei jedem App-Wechsel hindurch.
   js/held.js setzt am .held --sy (gescrollt, px) und --p (0 … 1 durchs Startbild): Die Schichten fächern auf, der Stapel
   dreht sich ein Stück und bleibt beim Scrollen zurück. Es gibt keine Mausbewegung. Maße hängen alle an --hb (Handybreite). */
.szene {
  --hb: min(15vw, 24svh);
  --x: 73%; --y: 36%;
  --ruhe: .36;
  /* Abstand der Schichten: in Ruhe um die Mitte gefächert (--ar), beim Scrollen sinken die unteren Schichten weiter ab (--ae) */
  --ar: calc(var(--hb) * var(--ruhe));
  --ae: calc(var(--hb) * var(--p, 0) * .6);
  --abstand: calc(var(--ar) + var(--ae));
  --dreh: calc(-36deg + var(--p, 0) * 24deg);
  --kipp: calc(61deg - var(--p, 0) * 28deg);
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
  perspective: calc(var(--hb) * 9); perspective-origin: var(--x) var(--y);
  /* unten weich auslaufen, damit der Stapel beim Scrollen nicht an der Kante abgeschnitten wirkt */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26svh), transparent);
}
/* warmer Schein hinter dem Stapel */
.szene::before {
  content: ""; position: absolute; left: var(--x); top: var(--y);
  width: calc(var(--hb) * 6); height: calc(var(--hb) * 4); translate: -50% -42%;
  background: radial-gradient(closest-side, rgb(255 236 170 / .085), rgb(255 212 0 / .03) 55%, transparent);
}
/* weitere Handys in der Tiefe: gleiche Lage im Raum, unscharf, dunkler und ohne Farbe, beim Scrollen je eigenes Tempo (--f) */
.schwebe {
  position: absolute; left: var(--wx); top: var(--wy);
  width: calc(var(--hb) * var(--g)); height: auto; max-width: none;
  translate: -50% -50%;
  transform: translate3d(0, calc(var(--sy, 0) * var(--f) * 1px), 0) rotateX(var(--kipp)) rotateZ(var(--dreh));
  filter: grayscale(1) blur(var(--u)) brightness(var(--h));   /* ohne Farbe: Tiefe statt bunter Flecken */
}
.w1 { --wx: 33%; --wy: 25%; --g: .62; --f: .8; --u: 2.4px; --h: .42; }
.w2 { --wx: 9%; --wy: 36%; --g: .8; --f: .3; --u: 7px; --h: .32; }
.w3 { --wx: 52%; --wy: 40%; --g: .36; --f: .9; --u: 3.4px; --h: .3; }
@media (max-aspect-ratio: 4/5) {
  .w1 { --wx: 12%; --wy: 30%; --g: .5; }
  .w2, .w3 { display: none; }
}
.stapel {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--hb); aspect-ratio: 390 / 891;
  margin: calc(var(--hb) * -1.1423) 0 0 calc(var(--hb) * -.5);
  transform-style: preserve-3d;
  transform: translate3d(0, calc(var(--sy, 0) * .86px), 0) rotateX(var(--kipp)) rotateZ(var(--dreh));
}
.s0 { --i: 0; } .s1 { --i: 1; } .s2 { --i: 2; } .s3 { --i: 3; } .s4 { --i: 4; }
.a0 { --a: 0; } .a1 { --a: 1; } .a2 { --a: 2; } .a3 { --a: 3; }
.schicht { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc((var(--i) - 2) * var(--ar) + (var(--i) - 4) * var(--ae))); }
.flaeche { position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--hb) * .135); }
/* Durchstichpunkt des Strahls, auf jeder Schicht ein Lichtfleck */
.schicht::after {
  content: ""; position: absolute; left: 48.7%; top: 42.6%;
  width: calc(var(--hb) * .44); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 251 230 / .95), rgb(255 212 0 / .5) 16%, rgb(255 212 0 / .1) 50%, transparent);
  mix-blend-mode: screen;
}
.gehaeuse .flaeche {
  inset: calc(var(--hb) * -.04); border-radius: calc(var(--hb) * .17);
  background: linear-gradient(135deg, #3a3d43, #17181b 38%, #0c0c0e 68%, #2a2c31);
  box-shadow: inset 0 0 0 1.5px #575b63, inset 0 0 0 calc(var(--hb) * .02) #0e0f11;
}
.gehaeuse::before {
  content: ""; position: absolute; inset: calc(var(--hb) * -.04); border-radius: calc(var(--hb) * .17);
  background: #070708; box-shadow: 0 0 0 1px #2c2e33, 0 0 calc(var(--hb) * .5) rgb(0 0 0 / .8);
  transform: translateZ(calc(var(--hb) * -.05));
}
.code .flaeche { padding: 10% 7% 0; background: rgb(13 13 13 / .95); box-shadow: inset 0 0 0 1px rgb(255 212 0 / .3); }
.code pre { position: absolute; inset: 10% 7% 0; margin: 0; font: 500 calc(var(--hb) * .027) / 1.62 var(--mono); color: #8f8f8f; white-space: pre; }
.code b { color: #F2F2F2; font-weight: 600; }
.code i { font-style: normal; }
.code .c-s { color: var(--gelb); }
.code .c-z { color: var(--gelb-hell); }
.code .c-k { color: #555; }
.raster .flaeche { background: rgb(255 255 255 / .03); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4); }
.raster svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgb(255 255 255 / .66); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.raster .d { stroke: rgb(255 255 255 / .32); stroke-dasharray: 5 6; }
.raster .a { stroke: var(--gelb); }
.oberflaeche img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.glas .flaeche {
  background: linear-gradient(115deg, rgb(255 255 255 / .17), rgb(255 255 255 / .03) 36%, transparent 50%, rgb(255 255 255 / .05) 78%, transparent);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5);
}
/* Kante leuchtet kurz, wenn der Funke die Schicht durchquert (js/held.js setzt .blitz) */
.schicht .flaeche { transition: box-shadow .9s ease; }
.schicht.blitz .flaeche { box-shadow: inset 0 0 0 1.5px var(--gelb), 0 0 calc(var(--hb) * .12) rgb(255 212 0 / .5); transition-duration: .12s; }
.glas .flaeche::after { content: ""; position: absolute; left: 35.5%; top: 1.7%; width: 29%; height: 3.6%; border-radius: 99px; background: #000; }
.glas::after { opacity: .7; }
/* Inhalte je App: js/held.js setzt data-app an jede Schicht, sobald der Funke sie erreicht. Ohne JS gilt Wegwarte.
   Der alte Inhalt geht schnell; nur der alte Bildschirm bleibt, bis der neue fertig eingescannt ist. */
.app-wegwarte, .app-waldzeit, .app-fadenlauf { opacity: 0; transition: opacity .25s ease; }
.oberflaeche .app-wegwarte, .oberflaeche .app-waldzeit, .oberflaeche .app-fadenlauf { transition: opacity .2s ease .85s; }
.schicht:not([data-app]) .app-wegwarte,
.schicht[data-app="wegwarte"] .app-wegwarte,
.schicht[data-app="waldzeit"] .app-waldzeit,
.schicht[data-app="fadenlauf"] .app-fadenlauf { opacity: 1; z-index: 2; transition-delay: 0s; }
/* Bauen: Erreicht der Funke eine Schicht, entsteht ihr Inhalt neu (js/held.js setzt .neu am neuen Inhalt und .baut an
   der Schicht). Code erscheint Zeile für Zeile, das Raster zeichnet sich, der Bildschirm wird von oben eingescannt,
   über das Glas läuft ein Glanz. */
@media (prefers-reduced-motion: no-preference) {
  .code pre.neu { animation: tippen 1.1s steps(22, end) both; }
  .raster svg.neu :not(.d) { stroke-dasharray: 1; animation: zeichnen 1.1s cubic-bezier(.45, 0, .2, 1) both; }
  .raster svg.neu :nth-child(3n + 1):not(.d) { animation-delay: .08s; }
  .raster svg.neu :nth-child(3n + 2):not(.d) { animation-delay: .18s; }
  .raster svg.neu .d { animation: aufblenden .6s ease .35s both; }
  .oberflaeche img.neu { animation: scannen .85s cubic-bezier(.5, 0, .3, 1) both; }
  .oberflaeche.baut .scan { animation: scanlinie .85s cubic-bezier(.5, 0, .3, 1) both; }
  .glas.baut .flaeche::before { animation: glanz 1.1s cubic-bezier(.4, 0, .2, 1) both; }
}
@keyframes tippen { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes aufblenden { from { opacity: 0; } }
@keyframes scannen { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes scanlinie { from { top: 0; opacity: 1; } 85% { opacity: 1; } to { top: 100%; opacity: 0; } }
@keyframes glanz { from { translate: -120% 0; opacity: 1; } to { translate: 120% 0; opacity: 0; } }
.scan {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 2px; margin-top: -1px; opacity: 0;
  background: #FFF8D6; box-shadow: 0 0 10px 2px var(--gelb), 0 0 calc(var(--hb) * .12) calc(var(--hb) * .03) rgb(255 212 0 / .35);
}
.glas .flaeche::before {
  content: ""; position: absolute; inset: -10% 0; opacity: 0; translate: -120% 0;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .22) 46%, rgb(255 255 255 / .05) 54%, transparent 70%);
}
/* Bildschirm-Video der App (nur breit und bei guter Verbindung, js/held.js): unter der Statusleiste des Standbilds */
.oberflaeche .bildschirm {
  position: absolute; left: 0; top: 5.25%; z-index: 1; width: 100%; height: 94.75%; max-width: none;
  object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity .6s ease;
}
.oberflaeche .bildschirm.spielt { opacity: 1; }
.oberflaeche .bildschirm.vorn { z-index: 3; }   /* sonst liegt es unter dem neuen Standbild, das beim Wechsel darüber einscannt */
/* Konstruktionsraster als Boden unter dem Gehäuse, läuft zum Rand hin aus */
.boden {
  position: absolute; inset: -110% -150%;
  transform: translateZ(calc(-2 * var(--ar) - 4 * var(--ae) - var(--hb) * .5));
  background:
    radial-gradient(closest-side, rgb(255 212 0 / .09), transparent 60%),
    linear-gradient(rgb(255 255 255 / .075) 1px, transparent 1px) 50% 50% / calc(var(--hb) * .25) calc(var(--hb) * .25),
    linear-gradient(90deg, rgb(255 255 255 / .075) 1px, transparent 1px) 50% 50% / calc(var(--hb) * .25) calc(var(--hb) * .25);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
}
/* Lichtteilchen steigen im Strahl auf (zur Kamera gedreht wie der Funke) */
.staub {
  --z0: calc(-2 * var(--ar) - 4 * var(--ae) - var(--hb) * .55);
  --z1: calc(2 * var(--ar) + var(--hb) * .4);
  position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%;
  background: #FFF6C8; box-shadow: 0 0 6px 2px rgb(255 212 0 / .55);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .staub { animation: steigen 5.2s linear infinite; }
  .staub:nth-child(2n) { --wx: 7px; animation-duration: 6.4s; }
  .staub:nth-child(3n) { --wx: -9px; animation-duration: 4.6s; }
  .staub:nth-of-type(2) { animation-delay: -.8s; } .staub:nth-of-type(3) { animation-delay: -1.9s; }
  .staub:nth-of-type(4) { animation-delay: -2.7s; } .staub:nth-of-type(5) { animation-delay: -3.5s; }
  .staub:nth-of-type(6) { animation-delay: -4.2s; } .staub:nth-of-type(7) { animation-delay: -5s; }
  .bewegung-aus .staub { animation: none; }
}
@keyframes steigen {
  from { opacity: 0; transform: translateZ(var(--z0)) translateX(0) rotateZ(calc(var(--dreh) * -1)) rotateX(calc(var(--kipp) * -1)); }
  12%, 80% { opacity: .9; }
  to { opacity: 0; transform: translateZ(var(--z1)) translateX(var(--wx, 3px)) rotateZ(calc(var(--dreh) * -1)) rotateX(calc(var(--kipp) * -1)); }
}
/* Beschriftung: flach vor der Szene. js/held.js misst die Anker an der linken Kante jeder Schicht und setzt --ax/--ay. */
.anker { position: absolute; left: 0; top: 30%; width: 1px; height: 1px; }
.namen { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; opacity: calc(1 - var(--p, 0) * 3); }
.namen li {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 12px;
  translate: calc(var(--ax, -999) * 1px - 100%) calc(var(--ay, -999) * 1px - 50%);
  font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--grau-1);
  opacity: 0; transition: opacity .6s ease;
}
.namen li::after { content: ""; width: clamp(28px, 3.4vw, 56px); height: 1px; background: linear-gradient(to right, rgb(255 212 0 / .3), var(--gelb)); }
.namen li::before { content: ""; order: 2; width: 5px; height: 5px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 8px var(--gelb); }
.namen.ist-an li { opacity: 1; }
.namen.ist-eng { display: none; }        /* js/held.js: eine Beschriftung würde den Text berühren */
@media (max-width: 699px) { .namen { display: none; } }
/* Strahl: Stücke zwischen den Schichten (so muss kein Browser sich schneidende Flächen sortieren), dazu ein langes
   Stück nach hinten und eines nach vorn, beide laufen aus. Je Stück zwei gekreuzte Flächen, damit es aus jedem Winkel leuchtet. */
.strahl { position: absolute; left: 48.7%; top: 42.6%; width: 0; height: 0; transform-style: preserve-3d; }
.stueck {
  --l: var(--abstand);
  position: absolute; left: 0; top: -1.5px; width: var(--l); height: 3px;
  transform-origin: 0 50%; transform-style: preserve-3d;
  transform: translateZ(calc((var(--a) - 2) * var(--ar) + (var(--a) - 4) * var(--ae))) rotateY(-90deg);
  background: #FFF8D6; border-radius: 3px;
  box-shadow: 0 0 4px 1px var(--gelb), 0 0 18px 5px rgb(255 212 0 / .4);
}
.stueck::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; box-shadow: inherit; transform: rotateX(90deg); }
.stueck.hinten { --l: calc(var(--hb) * .6); transform: translateZ(calc(-2 * var(--ar) - 4 * var(--ae) - var(--l))) rotateY(-90deg); background: linear-gradient(to right, transparent, #FFF8D6 85%); box-shadow: none; }
.stueck.vorn { --l: calc(var(--hb) * .38); transform: translateZ(calc(2 * var(--ar))) rotateY(-90deg); background: linear-gradient(to right, #FFF8D6, rgb(255 248 214 / .4) 40%, transparent); box-shadow: none; }
.funke {
  position: absolute; left: calc(var(--hb) * -.14); top: calc(var(--hb) * -.14); width: calc(var(--hb) * .28); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, #FFFFFF, #FFFFFF 18%, rgb(255 228 92 / .75) 36%, rgb(255 212 0 / .22) 66%, transparent);
  transform: translateZ(calc(-3 * var(--ar) - 4 * var(--ae) + var(--funke, 0) * (6 * var(--ar) + 4 * var(--ae)))) rotateZ(calc(var(--dreh) * -1)) rotateX(calc(var(--kipp) * -1));
  opacity: var(--funke-an, 0);
}
/* beim Laden: Schicht für Schicht von oben herein, danach geht der Strahl an; der Stapel schwebt leicht */
@media (prefers-reduced-motion: no-preference) {
  /* nur „backwards“: Eine Animation, die stehen bliebe, macht Chrome die 3D-Kinder flach */
  .schicht { animation: schicht-herein 1.2s cubic-bezier(.2, .75, .25, 1) calc(.15s + var(--i) * .13s) backwards; }
  .strahl { animation: strahl-an .8s ease 1s backwards; }
}
@keyframes schicht-herein { from { translate: 0 0 calc(var(--hb) * 1.6); opacity: 0; } }
@keyframes strahl-an { from { opacity: 0; } }

/* hochkant: Stapel oben in der Mitte, Text darunter */
@media (max-aspect-ratio: 4/5) {
  .szene { --hb: min(29vw, 16.5svh); --x: 50%; --y: 22.5%; --ruhe: .3; }
  .held-inhalt > .kicker { font-size: .6875rem; letter-spacing: .08em; }
  .kicker-ort { display: none; }
}
/* niedrige Laptops (1366 × 768): etwas höher, damit die Beschriftung über dem Text Platz hat */
@media (min-aspect-ratio: 5/4) and (max-height: 820px) { .szene { --y: 32.5%; --hb: min(15vw, 23svh); } }
/* Handy quer: kaum Höhe, der Text braucht sie ganz; der Stapel rückt klein nach rechts oben und tritt zurück */
@media (min-aspect-ratio: 4/3) and (max-height: 560px) {
  .szene { --hb: 10vw; --x: 86%; --y: 34%; opacity: .55; }
  .schwebe { display: none; }
}
@media (max-aspect-ratio: 4/5) and (max-height: 700px) {
  .szene { --hb: min(26vw, 15svh); --y: 23%; }
  .held-inhalt { padding-bottom: 22px; }
}

/* Knopf „Bewegung anhalten“ im Startbild: klein, unten rechts (Stil .bewegung weiter unten) */
.held > .bewegung.held-ruhe { position: absolute; right: var(--rand); bottom: 16px; z-index: 1; width: 44px; padding: 0; justify-content: center; opacity: calc(1 - var(--p, 0) * 2.3); }
/* Schleier nur dort, wo Text steht */
.held::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgb(5 5 5) 0%, rgb(5 5 5 / .9) 12%, rgb(5 5 5 / .7) 32%, rgb(5 5 5 / 0) 60%),
    linear-gradient(to right, rgb(5 5 5 / .55) 0%, rgb(5 5 5 / 0) 60%);
  opacity: calc(1 - var(--p, 0) * 1.6);
}
/* Text: steigt beim Scrollen schneller als die Seite und blendet aus, bevor er die Linie erreichen könnte */
.held-inhalt {
  container: held / inline-size;
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
  padding: calc(var(--kopf-hoch) + 40px + var(--luft, 0) * 1px) 0 clamp(32px, 7svh, 96px);
  transform: translate3d(0, calc(var(--sy, 0) * -.3px), 0);
  opacity: calc(1 - var(--p, 0) * 2.3);
  will-change: transform, opacity;
}
/* H1: „App-Entwicklung“ groß, darunter für wen. Größen mit etwa 12 % Luft, damit auch eine breitere Schrift passt. */
.held-titel {
  margin-top: clamp(14px, 2vw, 24px);
  font-family: var(--titel);
  font-weight: 870;
  font-stretch: var(--breit);
  letter-spacing: -.025em;
  hyphens: manual;
}
.titel-gross { display: block; font-size: min(10rem, 100cqi / 10.7); line-height: .9; }
.titel-klein {
  display: block;
  margin-top: .5em;
  font-size: clamp(1.375rem, .8rem + 2.4cqi, 3.25rem);
  font-weight: 820;
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
}
@container held (max-width: 619px) {
  .titel-gross { font-size: calc(100cqi / 7.8); line-height: .92; }
  .titel-gross > span, .titel-gross > span + span { display: block; }
  .titel-klein { margin-top: .45em; }
}
.held-absatz {
  margin-top: clamp(20px, 2.6vw, 32px);
  max-width: 44ch;
  color: var(--grau-1);
  font-size: clamp(1.0625rem, .95rem + .45vw, 1.3125rem);
  line-height: 1.5;
  text-wrap: pretty;
}
.held-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; margin-top: clamp(24px, 3.4vw, 40px); }
/* breit: „App-Entwicklung“ über die ganze Breite, darunter links für wen und die Knöpfe, rechts der Absatz */
@media (min-width: 1100px) and (min-aspect-ratio: 5/4) {
  .held-inhalt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    grid-template-rows: repeat(4, auto);
    column-gap: clamp(40px, 5vw, 96px);
  }
  .held-inhalt > .kicker { grid-column: 1 / -1; grid-row: 1; }
  .held-titel { grid-column: 1 / -1; grid-row: 2 / 4; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; row-gap: 0; }
  .titel-gross { grid-column: 1 / -1; grid-row: 1; }
  .titel-klein { grid-column: 1; grid-row: 2; font-size: clamp(1.5rem, .6rem + 2.3cqi, 3rem); }
  .held-neben { display: contents; }
  .held-absatz { grid-column: 2; grid-row: 3 / 5; align-self: start; margin-top: clamp(16px, 2.2vw, 34px); }
  .held-aktionen { grid-column: 1; grid-row: 4; }
}
/* beim Laden einmal von unten herein (endet nach gut einer Sekunde) */
@media (prefers-reduced-motion: no-preference) {
  .held-inhalt > .kicker, .titel-gross > span, .titel-klein, .held-absatz, .held-aktionen { animation: herein 1s cubic-bezier(.2, .7, .2, 1) both; }
  .titel-gross > span { display: inline-block; animation-delay: .1s; }
  .titel-gross > span + span { animation-delay: .18s; }
  .titel-klein { animation-delay: .3s; }
  .held-absatz { animation-delay: .4s; }
  .held-aktionen { animation-delay: .5s; }
}
@keyframes herein { from { opacity: 0; translate: 0 .6em; } }
@media (prefers-reduced-motion: reduce) { .held-inhalt { transform: none; opacity: 1; } }

/* ---------- Einstieg nach Zielgruppe: direkt unter dem Startbild, vier Spalten mit je zwei Wegen ---------- */
.zielgruppen { background: var(--tief); padding: clamp(28px, 4vw, 56px) 0 0; }
.zielgruppen-liste {
  width: min(100% - 2 * var(--rand), var(--breite)); margin: 0 auto; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); gap: 0 clamp(20px, 3vw, 48px);
}
.zielgruppe { padding: 18px 0 22px; border-top: 1px solid var(--linie-hell); }
.zielgruppe-name { font-family: var(--mono); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gelb); }
.zielgruppe-text { margin-top: 10px; color: var(--grau-1); font-size: 1rem; line-height: 1.45; text-wrap: pretty; }
.zielgruppe-wege { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.zielgruppe-wege a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; text-decoration: none; box-shadow: inset 0 -1px 0 var(--linie-hell); }
.zielgruppe-wege a:hover { box-shadow: inset 0 -2px 0 var(--gelb); }
.zielgruppe-wege .pfeil { width: 1em; margin-left: .4em; color: var(--gelb); }

/* ---------- 01 Leistungen ---------- */
.leistungen { background: var(--tief); padding-bottom: clamp(48px, 7vw, 110px); }
.leistungen-liste { width: min(100% - 2 * var(--rand), var(--breite)); margin: clamp(48px, 7vw, 104px) auto 0; }
.leistung { position: relative; display: grid; gap: clamp(28px, 6vw, 48px); padding-block: clamp(44px, 7vw, 110px); }
.leistung-text { position: relative; z-index: 3; container-type: inline-size; }
.faden-vorn { z-index: 2; }
.leistung-nr { font-family: var(--mono); font-size: .875rem; font-weight: 600; letter-spacing: .12em; color: var(--grau-2); }
.leistung-nr span { color: var(--gelb); font-size: 1.5rem; letter-spacing: .04em; margin-right: .15em; }
.leistung-titel {
  margin-top: 16px;
  font-family: var(--titel); font-weight: 850; font-stretch: var(--breit);
  font-size: clamp(1.875rem, 1rem + 2.8vw, 3.75rem);
  line-height: 1; letter-spacing: -.02em;
  text-wrap: balance; hyphens: manual;
}
.leistung-fuer { display: block; margin-top: 20px; font-family: var(--mono); font-size: .875rem; font-weight: 600; letter-spacing: .04em; }
/* „FÜR“ immer am Zeilenanfang, der Rest läuft als Text dahinter (nicht mal daneben, mal darüber) */
.fuer { margin-right: .9em; color: var(--gelb); text-transform: uppercase; letter-spacing: .16em; }
.leistung-satz { margin-top: 16px; max-width: 46ch; color: var(--grau-1); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); text-wrap: pretty; }
.leistung .merkmale { margin: 26px 0 26px; }
/* zwei Links: zur Leistungsseite und zum Projekt in der Bühne (.pfeillink-leise steht in css/stil.css) */
.leistung-links { display: flex; flex-wrap: wrap; gap: 6px 28px; }
/* Leistungsumfang: vier Bausteine jeder App, als Zeile mit Haarlinie oben (schmal untereinander) */
.umfang { width: min(100% - 2 * var(--rand), var(--breite)); margin: clamp(40px, 5vw, 72px) auto 0; }
.umfang-titel { margin-bottom: clamp(16px, 2vw, 26px); }
.umfang-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0 clamp(20px, 3vw, 48px); }
.umfang-liste li { padding: 18px 0 22px; border-top: 1px solid var(--linie-hell); }
.umfang-nr { font-family: var(--mono); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; color: var(--gelb); }
.umfang-name { margin-top: 10px; font-family: var(--titel); font-weight: 800; font-stretch: var(--breit); font-size: clamp(1.0625rem, .95rem + .45vw, 1.3125rem); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.umfang-text { margin-top: 8px; color: var(--grau-1); font-size: .9375rem; line-height: 1.5; text-wrap: pretty; }

/* „Weitere Leistungen“: die übrigen Leistungsseiten mit kurzer Beschreibung unter den drei Feldern */
.leistungen-mehr { width: min(100% - 2 * var(--rand), var(--breite)); margin: clamp(24px, 4vw, 56px) auto 0; padding-top: clamp(20px, 2.4vw, 30px); border-top: 1px solid var(--linie); }
.mehr-titel { margin-bottom: clamp(14px, 2vw, 24px); }
.mehr-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); column-gap: clamp(20px, 3vw, 48px); }
/* Die ganze Karte ist klickbar, der Link (und damit sein Ankertext) ist aber nur der Name: ::after spannt ihn auf */
.mehr-liste li { position: relative; display: grid; align-content: start; gap: 8px; padding: 16px 0 22px; border-bottom: 1px solid var(--linie); }
.mehr-liste a { min-height: 44px; text-decoration: none; }
.mehr-liste a::after { content: ""; position: absolute; inset: 0; }
.mehr-name { font-family: var(--titel); font-weight: 800; font-stretch: var(--breit); font-size: clamp(1.0625rem, .95rem + .45vw, 1.3125rem); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
/* Pfeil am Wortende, auch wenn der Name umbricht */
.mehr-name .pfeil { display: inline-block; margin-left: .35em; vertical-align: -.16em; color: var(--gelb); transition: translate .25s ease; }
.mehr-text { color: var(--grau-1); font-size: .9375rem; line-height: 1.45; }
.mehr-liste li:hover .mehr-name { color: var(--gelb); }
.mehr-liste li:hover .pfeil { translate: .3em 0; }

/* Handy-Fächer: drei gerahmte Bildschirme, die sich beim Hineinscrollen auffächern (--v kommt von js/bewegung.js) */
.facher { --v: 1; position: relative; z-index: 1; width: min(100%, 520px); aspect-ratio: 1 / 1.02; justify-self: center; }
.telefon {
  position: absolute; left: 30%; bottom: 3%;
  width: 40%; aspect-ratio: 360 / 781;
  border-radius: 16% / 7.4%;
  background: center / 100% 100% no-repeat;
  box-shadow: 0 2.2vw 3.6vw -.6vw rgb(0 0 0 / .85), 0 0 0 1px rgb(255 255 255 / .04);
  transform-origin: 50% 88%;
  will-change: transform;
}
.telefon-mitte { z-index: 3; transform: translate3d(0, calc((1 - var(--v)) * 16%), 0) rotate(calc((1 - var(--v)) * -9deg)); }
.telefon-links { z-index: 2; transform: translate3d(calc(var(--v) * -54%), calc(var(--v) * 4% + (1 - var(--v)) * 20%), 0) rotate(calc(var(--v) * -12deg - (1 - var(--v)) * 6deg)) scale(.9); }
.telefon-rechts { z-index: 1; transform: translate3d(calc(var(--v) * 54%), calc(var(--v) * 4% + (1 - var(--v)) * 20%), 0) rotate(calc(var(--v) * 12deg - (1 - var(--v)) * 10deg)) scale(.9); }
/* Bilder erst, wenn der Fächer fast im Bild ist (js/start.js setzt .ist-nah); ohne JavaScript über css/ohne-js.css */
.facher.ist-nah .tel-waldzeit-start { background-image: url("../assets/img/waldzeit-start-360.webp"); background-image: image-set(url("../assets/img/waldzeit-start-360.webp") 1x, url("../assets/img/waldzeit-start-540.webp") 2x); }
.facher.ist-nah .tel-waldzeit-zeit { background-image: url("../assets/img/waldzeit-zeit-360.webp"); background-image: image-set(url("../assets/img/waldzeit-zeit-360.webp") 1x, url("../assets/img/waldzeit-zeit-540.webp") 2x); }
.facher.ist-nah .tel-waldzeit-ergebnis { background-image: url("../assets/img/waldzeit-ergebnis-360.webp"); background-image: image-set(url("../assets/img/waldzeit-ergebnis-360.webp") 1x, url("../assets/img/waldzeit-ergebnis-540.webp") 2x); }
.facher.ist-nah .tel-fadenlauf-station { background-image: url("../assets/img/fadenlauf-station-360.webp"); background-image: image-set(url("../assets/img/fadenlauf-station-360.webp") 1x, url("../assets/img/fadenlauf-station-540.webp") 2x); }
.facher.ist-nah .tel-fadenlauf-start { background-image: url("../assets/img/fadenlauf-start-360.webp"); background-image: image-set(url("../assets/img/fadenlauf-start-360.webp") 1x, url("../assets/img/fadenlauf-start-540.webp") 2x); }
.facher.ist-nah .tel-fadenlauf-text { background-image: url("../assets/img/fadenlauf-text-360.webp"); background-image: image-set(url("../assets/img/fadenlauf-text-360.webp") 1x, url("../assets/img/fadenlauf-text-540.webp") 2x); }
.facher.ist-nah .tel-wegwarte-karte { background-image: url("../assets/img/wegwarte-karte-360.webp"); background-image: image-set(url("../assets/img/wegwarte-karte-360.webp") 1x, url("../assets/img/wegwarte-karte-540.webp") 2x); }
.facher.ist-nah .tel-wegwarte-hinweis { background-image: url("../assets/img/wegwarte-hinweis-360.webp"); background-image: image-set(url("../assets/img/wegwarte-hinweis-360.webp") 1x, url("../assets/img/wegwarte-hinweis-540.webp") 2x); }
.facher.ist-nah .tel-wegwarte-melden { background-image: url("../assets/img/wegwarte-melden-360.webp"); background-image: image-set(url("../assets/img/wegwarte-melden-360.webp") 1x, url("../assets/img/wegwarte-melden-540.webp") 2x); }

/* breit: zwei gleiche Spalten, die Lichtlinie läuft als Rückgrat genau dazwischen und schlingt sich um jeden Fächer */
@media (min-width: 900px) {
  /* nicht mehr je Leistung eine ganze Bildschirmhöhe: weniger leeres Schwarz zwischen den Zeilen */
  .leistung { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(72px, 9vw, 168px); align-items: center; min-height: min(78svh, 760px); padding-block: clamp(40px, 5vw, 80px); }
  .leistung:nth-child(even) .leistung-text { order: 2; }
  .facher { width: min(84%, 560px); }
  .leistung:nth-child(even) .telefon-links { z-index: 1; }
  .leistung:nth-child(even) .telefon-rechts { z-index: 2; }
}

/* ---------- 02 Projekte (kurz): drei Karten, Stil der Projektkarten in css/stil.css ---------- */
.projekte-kurz { background: var(--tief); padding-bottom: clamp(48px, 7vw, 110px); }
.projekte-kurz .projektkarten { width: min(100% - 2 * var(--rand), var(--breite)); margin: clamp(28px, 4vw, 56px) auto 0; }
.projekte-alle { width: min(100% - 2 * var(--rand), var(--breite)); margin: clamp(28px, 3.4vw, 44px) auto 0; }

/* Knopf „Bewegung anhalten“ (WCAG 2.2.2), im Startbild unten rechts; Logik in js/held.js */
.bewegung {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  padding: 10px 16px 10px 13px;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 0;
  background: rgb(11 11 11 / .78);
  color: var(--weiss);
  font: 600 .75rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.bewegung:hover { border-color: var(--gelb); }
.bewegung[hidden] { display: none; }
.bewegung-icon { width: 14px; height: 14px; fill: var(--gelb); }
.icon-fortsetzen { display: none; }
.bewegung-aus .icon-anhalten { display: none; }
.bewegung-aus .icon-fortsetzen { display: inline; }

/* ---------- 03 Vorgehen: vier Stufen, eine Lichtlinie mit 45°-Fasen wie im Zeichen verbindet sie ---------- */
.vorgehen { background: var(--tief); }   /* ein Schwarz für alle Abschnitte, getrennt nur über Haarlinie und Abstand */
.schritte-feld { --stufe: clamp(44px, 5vw, 96px); --nr: clamp(3.5rem, 2.2rem + 4.6vw, 7rem); position: relative; width: min(100% - 2 * var(--rand), var(--breite)); margin: clamp(56px, 8vw, 120px) auto 0; }
.schritte { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; }
.stufe { position: relative; padding: 0 0 clamp(52px, 10vw, 80px) 50px; }
.stufe:last-child { padding-bottom: 0; }
.stufe-knoten {
  position: absolute; left: 0; top: calc(var(--nr) * .42 - 7px);
  width: 14px; height: 14px;
  background: var(--tief); border: 2px solid var(--gelb); rotate: 45deg;
  transition: background-color .35s ease, box-shadow .35s ease;
}
.stufe-nr {
  font-family: var(--titel); font-weight: 870; font-stretch: var(--breit);
  font-size: var(--nr); line-height: .86; letter-spacing: -.03em;
  color: var(--gelb);
  font-variant-numeric: tabular-nums;
}
.stufe-titel { margin-top: 18px; font-family: var(--titel); font-weight: 800; font-stretch: var(--breit); font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.stufe-text { margin-top: 12px; max-width: 36ch; color: var(--grau-1); text-wrap: pretty; }
.stufe.ist-erreicht .stufe-knoten { background: var(--gelb); box-shadow: 0 0 0 5px rgb(255 212 0 / .14), 0 0 26px 4px rgb(255 212 0 / .5); }
/* noch nicht erreichte Nummern nur als Umriss (Deko, der Text bleibt voll lesbar) */
.js:not(.bewegung-aus) .stufe:not(.ist-erreicht) .stufe-nr { color: transparent; -webkit-text-stroke: 1.5px var(--gelb); }
.stufe-nr { transition: color .35s ease; }
@media (min-width: 1000px) {
  .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--stufe); }
  .stufe { padding: 48px 0 0; }
  .stufe:nth-child(2) { margin-top: var(--stufe); }
  .stufe:nth-child(3) { margin-top: calc(var(--stufe) * 2); }
  .stufe:nth-child(4) { margin-top: calc(var(--stufe) * 3); }
  .stufe-knoten { top: -7px; left: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .stufe:not(.ist-erreicht) .stufe-nr { color: var(--gelb); -webkit-text-stroke: 0; }
  .stufe-knoten, .stufe-nr { transition: none; }
}

/* ---------- 04 Dahinter ----------
   Grundform (schmal, ohne JavaScript, in Ruhe): Liste an einer senkrechten Lichtlinie mit Knoten.
   Breit mit Bewegung (.ist-angeheftet, setzt js/start.js): Der Bereich bleibt stehen, links die fünf Etiketten,
   rechts erscheint ein Wert nach dem anderen riesig. js/start.js setzt je Wert --z (-1 unten, 0 da, 1 oben) und --o. */
.dahinter { background: var(--tief); }
.werte-feld { position: relative; width: min(100% - 2 * var(--rand), var(--breite)); margin: clamp(48px, 7vw, 104px) auto 0; }
.werte-kleber { position: relative; }
.werte { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; container-type: inline-size; }
.wert {
  --einzug: clamp(34px, 5vw, 80px);
  position: relative;
  display: grid; gap: 14px 40px; align-items: start;
  padding: clamp(28px, 4vw, 52px) 0 clamp(28px, 4vw, 52px) var(--einzug);
  border-top: 1px solid var(--linie);
}
.wert:last-child { border-bottom: 1px solid var(--linie); }
.wert-label { display: flex; align-items: center; gap: 1em; font-family: var(--mono); font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--grau-2); padding-top: .2em; }
.wert-nr { color: var(--gelb); }
.wert-knoten {
  position: absolute; left: -6px; top: calc(clamp(28px, 4vw, 52px) + .3em);
  width: 14px; height: 14px;
  background: var(--tief); border: 2px solid var(--gelb); rotate: 45deg;
  transition: background-color .35s ease, box-shadow .35s ease;
}
.wert.ist-erreicht .wert-knoten { background: var(--gelb); box-shadow: 0 0 0 5px rgb(255 212 0 / .14), 0 0 24px 4px rgb(255 212 0 / .5); }
.wert-inhalt { display: grid; gap: clamp(14px, 1.8vw, 24px); }
.wert-zahl {
  font-family: var(--titel);
  font-weight: 870;
  font-stretch: var(--breit);
  font-size: clamp(2.75rem, (100cqi - var(--einzug)) / 5.3, 8rem);   /* das längste Wort („Formate“) passt mit Luft */
  line-height: .92;
  letter-spacing: -.025em;
  color: var(--gelb);
}
.zeile { display: inline-block; overflow: hidden; padding-block: .05em; margin-block: -.05em; vertical-align: top; }
.zeile > span { display: inline-block; }
.wert-text { max-width: 44ch; color: var(--grau-1); text-wrap: pretty; }
.wert-beleg {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em .7em;
  max-width: 44ch;
  padding-top: 14px; border-top: 1px solid var(--linie);
  font-family: var(--mono); font-size: .875rem; letter-spacing: .03em; color: var(--grau-1);
}
.beleg-zahl { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); font-weight: 600; line-height: 1; letter-spacing: 0; color: var(--weiss); font-variant-numeric: tabular-nums; }
.werte-zaehler { display: none; }
@media (min-width: 900px) {
  .wert { grid-template-columns: minmax(11rem, 16rem) minmax(0, 1fr); }
  .wert-zahl { font-size: clamp(2.75rem, (100cqi - var(--einzug) - 16rem - 40px) / 5.3, 8rem); }
}

/* angeheftet */
.werte-feld.ist-angeheftet { --spalte: clamp(15rem, 25vw, 23rem); height: calc(100svh + 4 * 72svh); }
.ist-angeheftet .werte-kleber { position: sticky; top: 0; height: 100svh; }
.ist-angeheftet .werte { height: 100%; }
.ist-angeheftet .wert { position: absolute; inset: 0; display: block; padding: 0; border: 0; pointer-events: none; }
.ist-angeheftet .wert:nth-child(1) { --i: 0; }
.ist-angeheftet .wert:nth-child(2) { --i: 1; }
.ist-angeheftet .wert:nth-child(3) { --i: 2; }
.ist-angeheftet .wert:nth-child(4) { --i: 3; }
.ist-angeheftet .wert:nth-child(5) { --i: 4; }
.ist-angeheftet .wert-label {
  position: absolute; left: 40px; top: calc(50% + var(--kopf-flach) / 2 + (var(--i) - 2) * 3.6rem);
  translate: 0 -50%; padding: 0;
  transition: color .3s ease;
}
.ist-angeheftet .wert.ist-aktiv .wert-label { color: var(--weiss); }
.ist-angeheftet .wert-knoten { left: -46px; top: 50%; margin-top: -7px; }
.ist-angeheftet .wert-inhalt {
  position: absolute; left: var(--spalte); right: 0; top: calc(50% + var(--kopf-flach) / 2);
  translate: 0 -50%;
}
.ist-angeheftet .wert-text, .ist-angeheftet .wert-beleg { opacity: var(--o, 0); }
.ist-angeheftet .wert-zahl { font-size: min(13rem, 21svh, (100cqi - var(--spalte)) / 5.3); line-height: .9; }
.ist-angeheftet .zeile { display: block; width: fit-content; }
.ist-angeheftet .zeile > span { translate: 0 calc(var(--z, 0) * -112%); }
.ist-angeheftet .zeile + .zeile > span { translate: 0 calc(var(--z2, 0) * -112%); }
.ist-angeheftet .wert-text, .ist-angeheftet .wert-beleg { translate: 0 calc(var(--z, 0) * -32px); }
.ist-angeheftet .werte-zaehler {
  display: block; position: absolute; left: 40px; bottom: clamp(24px, 5svh, 48px);
  font-family: var(--mono); font-size: .875rem; font-weight: 600; letter-spacing: .04em; color: var(--grau-2);
}
.werte-jetzt { color: var(--gelb); font-size: 1.75rem; }
@media (prefers-reduced-motion: reduce) {
  .wert-knoten { transition: none; }
}

/* ---------- Ruhe: Wunsch des Systems oder Knopf „Bewegung anhalten“ ---------- */
@media (prefers-reduced-motion: reduce) {
  .mehr-name .pfeil { transition: none; }
  .telefon { transform: none; }
  .telefon-links { transform: translate3d(-54%, 4%, 0) rotate(-12deg) scale(.9); }
  .telefon-rechts { transform: translate3d(54%, 4%, 0) rotate(12deg) scale(.9); }
}

@media (forced-colors: active) {
  .held::after, .szene::before, .schicht::after, .strahl { display: none; }
}

/* Dahinter schmal: die großen Werte steigen beim Hineinscrollen aus ihrer Zeile (--v von js/bewegung.js) */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.bewegung-aus) .werte-feld:not(.ist-angeheftet) .zeile > span { translate: 0 calc((1 - var(--v, 1)) * 108%); }
  .js:not(.bewegung-aus) .werte-feld:not(.ist-angeheftet) .zeile + .zeile > span { translate: 0 calc((1 - min(1, var(--v, 1) * 1.15 - .15)) * 108%); }
}