/* Entwicklungsprozess als Kreis (Unterseite „Entwicklung“, 18.10.2026) – Aufbau in js/prozess.js
   Gestaltung: Haarlinien statt kräftiger Pfeile, feine Skala, Lichtimpuls mit Schweif (wie Pfad und Buttons der Startseite),
   kleine Punkte statt großer Kreise, Nummern in inotec Sans Light, Titel in inotec Sans Text, große Schrittnummer in der Mitte.
   Raster: Text Spalte 1–5, Kreis Spalte 7–12 (Spalte 6 frei wie in den Textzeilen); 861–1280 px untereinander; ≤ 860 px Liste (Zeitstrahl). */
.prozess { --pz-lachs: #FF8A66; margin: 8px 0 clamp(72px, 8vw, 120px); }
.prozess .eyebrow { margin-bottom: 20px; }
.prozess h2 { font-family: 'inotec Sans', var(--font, Inter), sans-serif; font-weight: 700; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; letter-spacing: 0; margin: 0 0 40px; }

/* Infotext zum aktiven Schritt */
.prozess-info { min-height: 210px; }
.prozess-info .pz-schritt { display: block; font: 600 14px/1 'inotec Sans Text', var(--font, Inter), sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--pz-lachs); margin-bottom: 16px; }
.prozess-info h3 { font: 700 clamp(24px, 2.2vw, 30px)/1.15 'inotec Sans', var(--font, Inter), sans-serif; letter-spacing: 0; margin: 0 0 14px; color: #fff; }
.prozess-info p { font: 300 21px/1.55 'inotec Sans Text', var(--font, Inter), sans-serif; color: var(--color-silver-mist, #d6d6d6); margin: 0; max-width: 34em; text-shadow: none; }
.prozess-info.neu > * { animation: pz-ein .5s ease both; }
.prozess-info.neu > :nth-child(2) { animation-delay: .05s; } .prozess-info.neu > :nth-child(3) { animation-delay: .1s; }
@keyframes pz-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.prozess .pz-hinweis { font: 300 15px/1.4 'inotec Sans Text', var(--font, Inter), sans-serif; color: var(--color-ash-gray, #9a9a9a); margin: 28px 0 0; text-shadow: none; }

/* Kreis */
.prozess-kreis { position: relative; aspect-ratio: 1; width: 100%; max-width: 640px; margin: 0 auto; }
.prozess-kreis svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.prozess-kreis .pz-skala line { stroke: rgba(255,255,255,.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.prozess-kreis .pz-ring { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Bögen ohne vector-effect: sonst ignoriert Chrome pathLength bei der Strichelung (Bogen zerfiel in Stücke); Breite in Diagramm-Einheiten (1 ≈ 6 px) */
.prozess-kreis .pz-bogen { fill: none; stroke: rgba(255,138,102,.55); stroke-width: .26; stroke-linecap: round; transition: opacity .3s; }
.prozess-kreis .pz-bogen.aus { opacity: 0; }
.prozess-kreis .pz-schweif { fill: none; stroke: #FFB9A3; stroke-width: .36; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255,138,102,.8)); }

/* Knoten: Punkt auf dem Ring, Nummer + Titel außen */
.pz-knoten { position: absolute; width: 0; height: 0; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.pz-knoten::before { content: ""; position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; }   /* größere Trefferfläche */
.pz-punkt { position: absolute; left: 0; top: 0; width: 11px; height: 11px; transform: translate(-50%,-50%); border-radius: 50%;
  background: #12040a; border: 1.5px solid rgba(255,138,102,.85); transition: width .3s, height .3s, background .3s, box-shadow .3s; }
.pz-knoten.erreicht .pz-punkt { background: var(--pz-lachs); }
.pz-knoten.an .pz-punkt { width: 17px; height: 17px; background: var(--pz-lachs); border-color: #FFB9A3;
  box-shadow: 0 0 0 7px rgba(255,138,102,.14), 0 0 22px 2px rgba(255,138,102,.55); }
.pz-text { position: absolute; display: flex; flex-direction: column; gap: 4px; white-space: nowrap; padding: 4px 6px; margin: -4px -6px; }   /* Beschriftung gehört zur Trefferfläche (Überfahren/Klick wie am Punkt) */
.pz-nr { font: 300 15px/1 'inotec Sans', var(--font, Inter), sans-serif; letter-spacing: .06em; color: var(--pz-lachs); }
.pz-titel { font: 400 19px/1.2 'inotec Sans Text', var(--font, Inter), sans-serif; color: rgba(255,255,255,.78); transition: color .25s, font-weight .25s; }
.pz-knoten:hover .pz-titel, .pz-knoten:focus-visible .pz-titel { color: var(--pz-lachs); }
.pz-knoten.an .pz-titel { color: #fff; font-weight: 600; }
.pz-knoten:focus-visible { outline: none; }
.pz-knoten:focus-visible .pz-punkt { outline: 1.5px solid #fff; outline-offset: 5px; }
.pz-knoten.o .pz-text { bottom: 26px; left: 0; transform: translateX(-50%); align-items: center; }
.pz-knoten.u .pz-text { top: 24px; left: 0; transform: translateX(-50%); align-items: center; }
.pz-knoten.r .pz-text { left: 26px; top: 0; transform: translateY(-50%); }
.pz-knoten.l .pz-text { right: 26px; top: 0; transform: translateY(-50%); align-items: flex-end; text-align: right; }

/* Mitte: große Schrittnummer */
.pz-mitte { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; pointer-events: none; }
.pz-gross { display: block; font: 300 clamp(72px, 8.4vw, 124px)/.9 'inotec Sans', var(--font, Inter), sans-serif; letter-spacing: .02em; color: #fff; }
.pz-von { display: block; margin-top: 14px; font: 600 12px/1 'inotec Sans Text', var(--font, Inter), sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--color-ash-gray, #9a9a9a); }

/* Liste (Handy, ohne JavaScript): Zeitstrahl mit Nummern */
.prozess-liste { list-style: none; margin: 0; padding: 0; }
.prozess-liste li { position: relative; padding: 0 0 28px 56px; }
.prozess-liste li::before { counter-increment: pz; content: "0" counter(pz); position: absolute; left: 0; top: 2px; font: 300 18px/1 'inotec Sans', var(--font, Inter), sans-serif; color: var(--pz-lachs, #FF8A66); }
.prozess-liste li::after { content: ""; position: absolute; left: 34px; top: 6px; bottom: -2px; width: 1px; background: linear-gradient(rgba(255,138,102,.7), rgba(255,255,255,.12)); }
.prozess-liste li:last-child::after { bottom: 24px; }
.prozess-liste { counter-reset: pz; }
.prozess-liste h3 { font: 600 21px/1.25 'inotec Sans Text', var(--font, Inter), sans-serif; letter-spacing: 0; margin: 0 0 6px; }
.prozess-liste p { font: 300 19px/1.5 'inotec Sans Text', var(--font, Inter), sans-serif; color: var(--color-silver-mist, #d6d6d6); margin: 0; text-shadow: none; }

.prozess.aktiv .prozess-liste { display: none; }
.prozess:not(.aktiv) .prozess-kreis { display: none; }

@media (min-width: 1281px) {
  .prozess { display: grid; grid-template-columns: repeat(var(--raster-spalten, 12), minmax(0, 1fr)); column-gap: var(--raster-abstand, 24px); align-items: center; }
  .prozess-text { grid-column: 1 / span 5; }
  .prozess-kreis { grid-column: 7 / span 6; }
  .prozess .prozess-liste { grid-column: 1 / -1; }
}
@media (min-width: 861px) and (max-width: 1280px) {
  .prozess-text { max-width: 640px; }
  .prozess-kreis { margin-top: 40px; max-width: 560px; }
}
@media (max-width: 860px) {
  .prozess.aktiv .prozess-kreis, .prozess.aktiv .prozess-info, .prozess.aktiv .pz-hinweis { display: none; }
  .prozess.aktiv .prozess-liste { display: block; }
  .prozess h2 { margin-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .prozess-info.neu > * { animation: none; }
  .pz-punkt, .pz-titel, .prozess-kreis .pz-bogen { transition: none; }
}
.fullbleed .page .prozess p, .fullbleed .page .prozess li { text-shadow: none; }

/* Verlauf hinter dem Kreis (18.10., Nutzer: „dezent“): fast Schwarz #020E13 mit Hauch Teal, weit und weich auslaufend – betont die Grafik.
   Getestet: Teal #00303F / #001E28 / #001218 sowie dezent mit mehr Teal (#02161E, #031E28); Bilder Website-v3/prozess-verlauf-*.png */
.prozess-kreis { isolation: isolate; }
.prozess-kreis::before { content: ""; position: absolute; inset: -22%; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(2,14,19,.85) 0%, rgba(2,14,19,.7) 30%, rgba(2,14,19,.42) 55%, rgba(2,14,19,.18) 75%, rgba(2,14,19,.06) 90%, rgba(2,14,19,0) 100%); }

/* Beschriftungen genau ausrichten (19.10., Nutzer): Ankerpunkt auf dem Strahl Mitte → Punkt außerhalb der Skala (--ax/--ay aus prozess.js,
   cqw = 1 % der Kreisbreite); vorher feste 26 px waagerecht/senkrecht → 02/03/05/06 ragten in die Skala, 01/04 saßen 6 px links (einseitiger Rand der Trefferfläche) */
.prozess-kreis { container-type: inline-size; }
.pz-text { left: var(--ax, 0); top: var(--ay, 0); right: auto; bottom: auto; margin: 0; }
.pz-knoten.o .pz-text { left: var(--ax, 0); top: var(--ay, 0); bottom: auto; transform: translate(-50%, calc(-100% + 4px)); }
.pz-knoten.u .pz-text { top: var(--ay, 0); transform: translate(-50%, -4px); }
.pz-knoten.r .pz-text { left: var(--ax, 0); transform: translate(-6px, -50%); }
.pz-knoten.l .pz-text { left: var(--ax, 0); right: auto; transform: translate(calc(-100% + 6px), -50%); }