/* Zusatz-Sektionen der Startseite (sektionen.js): „Der Gründer“ und „So einfach geht's“.
   Farben und Schriften der Higgsfield-Seite (--ca-*). */

/* „Arbeiten, die für uns sprechen“ ausblenden, sobald der Ersatz direkt dahinter steht
   (ohne Skript bleibt die alte Sektion sichtbar) */
.section-work:has(+ .sx-steps) { display: none; }

/* ---------------------------------------------------------------- Der Gründer
   Scroll-Erlebnis: Die Sektion ist 260 % Bildschirmhöhe hoch, .sx-founder__pin bleibt währenddessen stehen.
   sektionen.js setzt --in (Hereinscrollen 0 → 1), --p (Fortschritt 0 → 1), --out (Schluss 0 → 1)
   und markiert die aktive Aussage mit .is-on. */
.sx-founder { --in: 1; --p: .5; --out: 1; position: relative; height: 260vh; border-top: 1px solid var(--ca-line); background: var(--ca-ink); }
.sx-founder__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: flex-end; }
.sx-founder__grid { position: relative; z-index: 1; height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.sx-founder__copy { padding-top: 5rem; }

/* Name baut sich Wort für Wort von unten auf */
.sx-founder__name { margin-bottom: .5rem; font-size: clamp(2.8rem, 6.4vw, 5.6rem); }
.sx-founder__name span { display: inline-block; clip-path: inset(-10% 0 -20% 0);
  transform: translate3d(0, calc((1 - var(--in)) * 60%), 0); opacity: calc(var(--in) * 1.4 - .2); }
.sx-founder__name span + span { transform: translate3d(0, calc((1 - var(--in)) * 110%), 0); opacity: calc(var(--in) * 1.6 - .6); }
.sx-founder__role { font-family: var(--ca-font-display); text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
  color: var(--ca-lime-hi); font-size: .95rem; margin: 0; opacity: calc(var(--in) * 2 - 1); }

/* Drei Aussagen, immer nur eine sichtbar */
.sx-founder__claims { position: relative; list-style: none; margin: clamp(1.6rem, 4vh, 2.8rem) 0 0; padding: 0; min-height: 7.5em;
  font-family: var(--ca-font-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.2; letter-spacing: -.01em; }
.sx-founder__claims li { position: absolute; inset: 0 auto auto 0; max-width: 20ch; opacity: 0; transform: translate3d(0, 1.2rem, 0);
  filter: blur(6px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1), filter .5s ease; }
.sx-founder__claims li.is-on { opacity: 1; transform: none; filter: none; }
.sx-founder__nr { display: block; margin-bottom: .6rem; font-size: .9rem; letter-spacing: .14em; color: var(--ca-lime); }
.sx-founder__bar { display: flex; gap: .4rem; width: min(260px, 70%); }
.sx-founder__bar i { flex: 1; height: 3px; border-radius: 2px; background: var(--ca-line); overflow: hidden; position: relative; }
.sx-founder__bar i::after { content: ""; position: absolute; inset: 0; background: var(--ca-lime); transform-origin: left; transform: scaleX(var(--fill, 0)); }
.sx-founder__cta { margin-top: clamp(1.4rem, 3.5vh, 2.2rem); opacity: var(--out); transform: translate3d(0, calc((1 - var(--out)) * 16px), 0);
  pointer-events: none; }
.sx-founder.is-done .sx-founder__cta, .sx-founder.is-static .sx-founder__cta { pointer-events: auto; }

/* Bühne: Rudi steigt auf, wird größer und wandert leicht zur Seite; Leuchten und Ringe bewegen sich mit */
.sx-founder__stage { position: relative; height: 100%; display: flex; justify-content: center; align-items: flex-end; }
.sx-founder__img { display: block; height: min(88%, 820px); width: auto; max-width: 100%; object-fit: contain; object-position: bottom;
  /* kein drop-shadow: zusammen mit der Maske zeichnet Chrome sonst ein dunkles Rechteck um das Bild */
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99%); mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
  transform-origin: 50% 100%; will-change: transform;
  transform: translate3d(calc((var(--p) - .5) * -8%), calc((1 - var(--in)) * 45%), 0) scale(calc(.82 + var(--in) * .14 + var(--p) * .06)); }
.sx-founder__glow { position: absolute; z-index: 0; right: 4%; bottom: -10%; width: min(70vw, 900px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #65b80047 0, #65b80014 42%, transparent 68%);
  transform: translate3d(calc((var(--p) - .5) * -12%), 0, 0) scale(calc(.5 + var(--in) * .5 + var(--p) * .25)); }
.sx-founder__rings { position: absolute; z-index: 0; right: calc(25% - min(28vw, 330px)); bottom: 4%; width: min(56vw, 660px); height: auto;
  fill: none; stroke: #65b80033; stroke-width: 1.2; stroke-dasharray: 3 12;
  opacity: var(--in); transform: rotate(calc(var(--p) * 120deg)) scale(calc(.7 + var(--in) * .3)); }
.sx-founder__rings circle:nth-child(2) { stroke: #65b8004d; stroke-dasharray: 40 18; }
.sx-founder__rings circle:nth-child(3) { stroke-dasharray: 1 7; }

/* Ohne Bewegung (Einstellung „Bewegung reduzieren“): normale Sektion, alle Aussagen untereinander */
.sx-founder.is-static { height: auto; }
.sx-founder.is-static .sx-founder__pin { position: relative; height: auto; min-height: 640px; }
.sx-founder.is-static .sx-founder__claims { min-height: 0; display: grid; gap: 1.2rem; font-size: clamp(1.25rem, 2vw, 1.6rem); }
.sx-founder.is-static .sx-founder__claims li { position: static; opacity: 1; transform: none; filter: none; }
.sx-founder.is-static .sx-founder__bar { display: none; }
.sx-founder.is-static .sx-founder__img { height: 600px; }

/* ---------------------------------------------------------------- So einfach geht's */
.sx-steps { padding: clamp(3rem, 6vw, 5rem) 0; }
.sx-steps__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem 2rem; }
.sx-steps__head .t-display { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 18ch; margin-bottom: 0; }
.sx-steps__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.sx-steps__cta .btn-cta { margin-top: 0; }
.sx-steps__cta .btn-line { margin-top: 0; }
.sx-steps__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); margin-top: 2.4rem; margin-bottom: 0; padding: 0; list-style: none; counter-reset: none; }
.sx-steps__list li { position: relative; background: var(--ca-ink-2); border: 1px solid var(--ca-line); border-radius: 16px; padding: 1.5rem 1.5rem 1.6rem;
  transition: border-color .25s, transform .25s; }
.sx-steps__list li:hover { border-color: #65b80080; transform: translateY(-3px); }
.sx-steps__list li:not(:last-child)::after { content: ""; position: absolute; top: 2.15rem; right: calc(-1 * clamp(1rem, 2vw, 1.6rem) + 2px); z-index: 1;
  width: calc(clamp(1rem, 2vw, 1.6rem) - 4px); height: 2px; background: var(--ca-lime); }
.sx-steps__num { font-family: var(--ca-font-display); font-weight: 700; font-size: .95rem; letter-spacing: .08em; color: var(--ca-ink);
  background: var(--ca-lime); border-radius: 8px; padding: .3rem .55rem; display: inline-block; }
.sx-steps__list h3 { font-family: var(--ca-font-display); font-size: 1.3rem; font-weight: 700; margin: 1rem 0 .45rem; }
.sx-steps__list p { color: var(--ca-muted); line-height: 1.65; margin: 0; font-size: .98rem; }

/* ---------------------------------------------------------------- Tablet / Handy */
@media (width <= 980px) {
  /* Handy/Tablet: Text oben, Rudi unten; Aussagen etwas kleiner */
  .sx-founder { height: 240vh; }
  .sx-founder__grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; align-items: start; }
  .sx-founder__copy { padding-top: 6.2rem; }
  .sx-founder__name { font-size: clamp(2.4rem, 10vw, 3.6rem); }
  .sx-founder__claims { min-height: 5.2em; margin-top: 1.1rem; font-size: clamp(1.2rem, 5.2vw, 1.6rem); }
  .sx-founder__nr { margin-bottom: .35rem; font-size: .8rem; }
  .sx-founder__stage { position: absolute; inset: auto 0 0 0; height: 50%; z-index: -1; }
  .sx-founder__role { font-size: .8rem; letter-spacing: .1em; }
  .sx-founder__img { height: 100%; }
  .sx-founder__glow { right: auto; left: 50%; width: 120vw; margin-left: -60vw; bottom: -25%; }
  .sx-founder__rings { right: auto; left: 50%; width: 90vw; margin-left: -45vw; bottom: 2%; }
  .sx-founder__cta { position: relative; z-index: 2; }
  /* Hier immer statisch (sektionen.js setzt .is-static): Fakten kompakt untereinander, Rudi darunter im Fluss */
  .sx-founder.is-static .sx-founder__pin { min-height: 0; }
  .sx-founder.is-static .sx-founder__copy { padding-top: clamp(3.5rem, 12vw, 5rem); }
  .sx-founder.is-static .sx-founder__claims { gap: .55rem; font-size: clamp(1.05rem, 4.2vw, 1.3rem); }
  .sx-founder.is-static .sx-founder__claims li { display: flex; gap: .7rem; align-items: baseline; max-width: 32ch; }
  .sx-founder.is-static .sx-founder__nr { flex: none; margin: 0; }
  .sx-founder.is-static .sx-founder__stage { position: relative; inset: auto; z-index: auto; height: clamp(360px, 100vw, 420px); margin-top: 1.5rem; }
  .sx-founder.is-static .sx-founder__img { height: 100%; }
}
@media (width <= 760px) {
  .sx-steps__list { grid-template-columns: 1fr; }
  .sx-steps__list li:not(:last-child)::after { top: auto; bottom: calc(-1 * clamp(1rem, 2vw, 1.6rem) + 2px); left: 2.1rem; right: auto;
    width: 2px; height: calc(clamp(1rem, 2vw, 1.6rem) - 4px); }
}
/* ---------------------------------------------------------------- Korrektur der Higgsfield-Seite
   Das Betreff-Feld (lange Optionen wie „Fahrzeugvermessung am 3D-Achsmessstand“) erzwang am Handy ~400 px
   Mindestbreite. Dadurch wurde die ganze Startseite breiter als der Bildschirm und verkleinert dargestellt. */
.contact-grid > *, .contact-form, .contact-form .field { min-width: 0; }
.contact-form select, .contact-form input, .contact-form textarea { min-width: 0; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .sx-founder__claims li { transition: none; }
  .sx-steps__list li { transition: none; }
}

/* Menüleiste: Reihenfolge wie auf den Unterseiten (build_seo.py → nav()). Per CSS statt Verschieben,
   weil React die Links selbst verwaltet (siehe arrangeBar in sektionen.js). */
.nav__links > a[href="#ueber"] { order: 1; }
.nav__links > a[href="#leistungen"] { order: 2; }
.nav__links > a[href="#bewertungen"], .nav__links > a[href="#referenzen"] { order: 3; }
.nav__links > a[href="#faq"] { order: 4; }
.nav__links > a[href="#jobs"] { order: 5; }
.nav__links > a[href="#standorte"] { order: 6; }
.nav__links > a[href="#kontakt"] { order: 7; }