/* forschung.css · Funnelseite „Jetzt an der Studie teilnehmen“ (13.11.2026, Fassung Scrollytelling)
   Baut auf datenreife/css/reise.css und startseite.css auf (Überblick-Seite). Hier: Titel, die durchgehende
   SVG-Szene (forschung.js bewegt jedes Teil abhängig von der Scroll-Position) und Ergänzungen zum Formular. */

/* Titel und Akte */
.fo-wort--titel { font-size: clamp(42px, 6.6vw, 104px); max-width: 11ch; }
.fo-verlauf, .fo-verlauf-wort { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; padding-bottom: .08em; }
.fo-start { position: sticky; bottom: calc(14vh - 104px); margin: 52px 0 0; opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.akt.ist-aktiv .fo-start { opacity: 1; transform: none; }
.no-js .fo-start { opacity: 1; transform: none; }
.fo-start .knopf { display: inline-block; text-decoration: none; }
.reise .wort { max-width: min(42vw, 12ch); }

/* Die Szene liegt fest hinter den Worten; forschung.js passt sie in den freien Teil des Bildschirms ein */
.fo-svg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; display: none; overflow: visible; }
.js .fo-svg { display: block; }
.fo-txt { font-family: var(--text); fill: var(--tinte); }
.fo-mono { font-family: var(--mono); font-size: 15px; letter-spacing: .1em; fill: var(--leise); font-weight: 600; }
.fo-akz { fill: var(--akzent); }
.fo-rot { fill: #e5383b; }
.fo-leise { fill: var(--leise); }
.fo-karte { fill: var(--flaeche); stroke: var(--linie); stroke-width: 1.5; }
.fo-karte--alt { fill: color-mix(in srgb, #e5383b 10%, var(--grund)); stroke: color-mix(in srgb, #e5383b 40%, transparent); }
.fo-karte--neu { fill: color-mix(in srgb, hsl(var(--h) 100% 55%) 14%, var(--grund)); stroke: var(--akzent); stroke-width: 2; }
.fo-karte__wort { font-size: 22px; font-weight: 600; }
.fo-strich { fill: var(--linie); }
.fo-linie { fill: none; stroke: var(--leise); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.fo-bahn { fill: var(--linie); }
.fo-bahn__fuell { fill: var(--akzent); }
.fo-frage { font-size: 34px; font-weight: 700; font-family: var(--kopf); }
.fo-punkt { fill: color-mix(in srgb, var(--tinte) 62%, transparent); stroke: var(--grund); stroke-width: 2.5; }
.fo-punkt--ja { fill: var(--akzent); stroke: color-mix(in srgb, var(--akzent) 30%, var(--grund)); stroke-width: 5; }
.fo-scan { fill: var(--akzent); filter: drop-shadow(0 0 8px hsl(var(--h) 100% 55% / .6)); }
.fo-ring { fill: var(--flaeche); stroke: var(--linie); stroke-width: 2; }
.fo-bogen { fill: none; stroke: var(--akzent); stroke-width: 16; stroke-linecap: round; }
.fo-bogen--hell { stroke: hsl(var(--h) 100% 55% / .35); }
.fo-uhr__zahl { font-family: var(--kopf); font-size: 56px; font-weight: 700; letter-spacing: -.03em; }
.fo-name { font-size: 30px; font-weight: 600; font-family: var(--kopf); letter-spacing: -.01em; }
.fo-welle { fill: #e5383b; }
.fo-wand { fill: var(--tinte); }
.fo-wand__wort { font-family: var(--kopf); font-size: 30px; font-weight: 700; }
.fo-bericht__titel { font-family: var(--kopf); font-size: 32px; font-weight: 700; }
.fo-ansie { font-family: var(--kopf); font-size: 30px; font-weight: 700; }

/* Formular */
.fo-ziel__satz { margin: -12px 0 22px; color: var(--leise); font-size: 17px; }
.fo-hinweis { margin: -4px 0 0; font-size: 14px; color: var(--leise); }
.feld[hidden], .fo-hinweis[hidden] { display: none; }
.formular > * { min-width: 0; }
.feld input, .feld select, .feld textarea { width: 100%; min-width: 0; max-width: 100%; }
.haken a { color: var(--akzent); }
.haken { align-items: flex-start; }
.haken input { margin-top: 2px; flex: none; }
.akt--ziel { position: relative; z-index: 2; }

@media (max-width: 900px) {
  .reise .wort { max-width: none; }
  .fo-wort--titel { max-width: none; font-size: clamp(40px, 11vw, 64px); }
  .fo-start { bottom: calc(18vh - 100px); margin-top: 44px; }
}
@media (max-width: 600px) {
  .kopf__knopf { display: inline-block; padding: 9px 12px; font-size: 11px; }
  .farbe { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fo-start { transition: none; }
}

/* 13.11.2026 (Jani): Knopf oben „Jetzt an Studie teilnehmen“, ganz gefüllt in der Komplementärfarbe zum Akzent (Farbton + 180°) */
.fo-kopfknopf { background: hsl(calc(var(--h) + 180) 95% 52%); color: #121318; box-shadow: 0 6px 24px hsl(calc(var(--h) + 180) 95% 52% / .45); font-weight: 700; }
.fo-kopfknopf:hover { background: hsl(calc(var(--h) + 180) 95% 46%); }
.fo-kopfknopf:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }
@media (max-width: 600px) { .fo-kopfknopf { padding: 9px 11px; font-size: 10px; letter-spacing: .04em; } }

/* ---------- Hintergrund: Prozessnetz (13.11.2026) ---------- */
.fo-netz { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
/* dort, wo die großen Worte stehen (unten links, am Handy unten), tritt das Netz weich zurück */
/* und dort, wo die Szene steht, ebenfalls: zwei weiche Aussparungen, die sich überlagern */
.fo-netz {
  -webkit-mask-image: radial-gradient(ellipse 52% 50% at 16% 82%, transparent 35%, #000 80%), radial-gradient(ellipse 36% 44% at 68% 46%, transparent 40%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 52% 50% at 16% 82%, transparent 35%, #000 80%), radial-gradient(ellipse 36% 44% at 68% 46%, transparent 40%, #000 100%);
  mask-composite: intersect;
}
@media (max-width: 900px) { .fo-netz {
  -webkit-mask-image: linear-gradient(to top, transparent 0, transparent 26%, #000 52%), radial-gradient(ellipse 75% 30% at 50% 33%, transparent 35%, #000 100%);
  mask-image: linear-gradient(to top, transparent 0, transparent 26%, #000 52%), radial-gradient(ellipse 75% 30% at 50% 33%, transparent 35%, #000 100%);
} }
.fo-netz__weg { fill: none; stroke: color-mix(in srgb, var(--tinte) 8%, transparent); stroke-width: 1.4; stroke-linejoin: round; }
.fo-netz__schritt { fill: color-mix(in srgb, var(--grund) 80%, #fff 20%); stroke: color-mix(in srgb, var(--tinte) 10%, transparent); stroke-width: 1.2; }
.fo-netz__wort { font: 600 11px var(--mono); letter-spacing: .04em; fill: color-mix(in srgb, var(--tinte) 20%, transparent); }
.fo-netz__raute { fill: color-mix(in srgb, hsl(var(--h) 100% 55%) 10%, var(--grund)); stroke: color-mix(in srgb, hsl(var(--h) 100% 55%) 28%, transparent); stroke-width: 1.2; }
.fo-netz__knoten { fill: color-mix(in srgb, var(--tinte) 14%, transparent); }
.fo-netz__punkt { fill: var(--akzent); filter: drop-shadow(0 0 3px hsl(var(--h) 100% 55% / .5)); }
[data-theme="dark"] .fo-netz__schritt { fill: color-mix(in srgb, var(--grund) 85%, #fff 15%); }
/* KI-Agenten im Netz: generierte Porträts im Kreis, Ring und Statuslicht in der Akzentfarbe */
.fo-agent__hof { fill: hsl(var(--h) 100% 55% / .14); }
.fo-agent__grund { fill: var(--grund); }
.fo-agent__ring { fill: none; stroke: color-mix(in srgb, hsl(var(--h) 100% 55%) 70%, transparent); stroke-width: 2; }
.fo-agent__licht { fill: #22c55e; stroke: var(--grund); stroke-width: 2; }
.fo-agent__wort { font-size: 9.5px; fill: color-mix(in srgb, hsl(var(--h) 100% 45%) 60%, transparent); }
.fo-agent image { opacity: .92; }

/* 13.11.2026 (Jani): von der Studie zum Überblick, „so mäßig, hier mehr erfahren“ */
.fo-start { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.fo-mehr { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte); text-decoration: none; padding: 10px 2px; border-bottom: 1.5px solid var(--linie); transition: border-color .2s, color .2s; }
.fo-mehr:hover, .fo-mehr:focus-visible { color: var(--akzent); border-color: var(--akzent); outline: none; }