/* =========================================================================
   ZONING · Designsystem "Konstruktiv"
   Startseite (index.html). Eigenständig: dieses Blatt setzt kein anderes
   voraus und wird von keinem anderen vorausgesetzt. Die übrigen Seiten
   laufen unverändert über css/styles.css.

   Leitform: Kreis, Balken, Diagonale. Flache Massen, keine Schatten,
   keine Verläufe. Drei Farben, eine davon sparsam.
   Bewegung ausschliesslich über transform, opacity, clip-path.
   ========================================================================= */

/* Schriften und Token stehen in css/konstruktiv-base.css, das VOR diesem
   Blatt geladen wird. Hier steht nur noch die Welt der Startseite. */

/* ---------- Grundlagen -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bone);color:var(--black);
  font-family:var(--body);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--red);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--gut);top:-100px;z-index:60;background:var(--black);color:var(--bone);
  padding:12px 18px;font-weight:800;text-decoration:none;transition:top .2s var(--ease)}
.skip:focus-visible{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}

h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:-.036em;line-height:.96;text-wrap:balance}
h2{font-size:clamp(1.9rem,1.2rem + 2.7vw,3.4rem)}
.sec-h{margin-bottom:clamp(30px,4vw,56px)}
.sec-n{color:var(--grey);margin-top:16px;max-width:52ch}
.eyeb{font-size:.78rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--red-t);margin-bottom:14px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- Auftritt beim Scrollen -------------------------------------- */
[data-rv]{opacity:0;transform:translateY(18px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
[data-rv].in{opacity:1;transform:none}
.rm [data-rv]{opacity:1;transform:none}

/* =========================================================================
   BAUTEIL · Knopf "Kippung"
   Eine Kachel mit zwei Seiten. Beim Zeigen kippt sie nach hinten weg und
   zeigt ihre rote Rückseite. Gibt der flachen Fläche eine Dicke, ohne einen
   einzigen Schatten. Der Textlink daneben trägt dieselbe Mechanik in klein.
   ========================================================================= */
.kb{position:relative;display:inline-flex;align-items:center;justify-content:center;
  height:var(--kh,56px);padding:0 var(--kp,30px);border:0;cursor:pointer;text-decoration:none;
  background:transparent;perspective:620px;overflow:visible;
  font-family:var(--body);font-weight:800;font-size:var(--kf,.94rem);letter-spacing:.03em;
  -webkit-tap-highlight-color:transparent}
.kb .tile{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .42s var(--ease-tile)}
.kb .face{position:absolute;inset:0;display:grid;place-items:center;
  backface-visibility:hidden;white-space:nowrap}
.kb .face.f{background:var(--black);color:var(--bone);transform:translateZ(calc(var(--kh,56px) / 2))}
.kb .face.b{background:var(--red);color:var(--bone);transform:rotateX(90deg) translateZ(calc(var(--kh,56px) / 2))}
.kb .lbl{visibility:hidden;white-space:nowrap;position:relative}
@media (hover:hover) and (pointer:fine){
  .kb:hover .tile{transform:rotateX(-90deg)}
}
.kb:active .tile{transform:rotateX(-90deg) scale(.975)}
.kb:focus-visible{outline:3px solid var(--red);outline-offset:5px}
.kb:focus-visible .tile{transform:rotateX(-90deg)}
/* Zweitrang: gleiche Mechanik, Vorderseite als Kontur statt als Masse */
.kb--alt .face.f{background:transparent;color:var(--black);box-shadow:inset 0 0 0 3px var(--black)}
/* Zustände */
.kb[data-state=busy]{opacity:.6;pointer-events:none}
.kb[data-state=ok] .tile{transform:rotateX(-90deg)}
.kb[data-state=ok] .face.b{background:var(--green)}
/* Kopfzeile: kleiner */
.nav-cta{--kh:46px;--kp:20px;--kf:.85rem}
@supports (-moz-appearance:none){
  .nav .nav-cta{overflow:hidden;perspective-origin:center center;color:var(--bone);isolation:isolate}
  .nav .nav-cta .tile{display:block;width:100%;height:100%;will-change:transform;z-index:0}
  /* color !important: js/konstruktiv.js ergaenzt beim Scroll-Spin zwei weitere
     Wuerfelseiten (.face.sp-bk/.sp-bt) und haengt dafuer einen eigenen Style-Block
     in den <head>. Dessen Selektor .hdr .nav-cta .face.sp-bk ist spezifischer (0,4,0)
     als der hiesige (0,3,0) und faerbte die Schrift wieder ein - in Firefox drehten
     dadurch zwei beschriftete Flaechen durch das stabile .lbl-Overlay (Doppelschrift).
     Gemessen 24.08.2026 mit Playwright Firefox 1366x900. */
  .nav .nav-cta .face{width:100%;height:100%;color:transparent!important;text-shadow:none;-moz-backface-visibility:hidden}
  .nav .nav-cta .lbl{visibility:visible;position:relative;z-index:1;color:var(--bone);pointer-events:none}
}

.kl{display:inline-flex;align-items:center;gap:.7em;font-weight:800;font-size:.92rem;letter-spacing:.03em;
  color:var(--black);text-decoration:none;position:relative;padding:6px 0;perspective:400px}
.kl i{width:18px;height:18px;position:relative;transform-style:preserve-3d;flex:0 0 auto;
  transition:transform .38s var(--ease-tile)}
.kl i::before,.kl i::after{content:"";position:absolute;inset:0;border-radius:50%;backface-visibility:hidden}
.kl i::before{background:var(--red);transform:translateZ(9px)}
.kl i::after{background:var(--black);transform:rotateX(90deg) translateZ(9px)}
@media (hover:hover) and (pointer:fine){.kl:hover i{transform:rotateX(-90deg)}}
.kl:focus-visible{outline:3px solid var(--red);outline-offset:4px}

/* =========================================================================
   KOPFZEILE
   ========================================================================= */
.hdr{position:sticky;top:0;z-index:40;background:var(--bone);border-bottom:4px solid var(--black)}
.hdr-in{max-width:var(--max);margin:0 auto;padding-inline:var(--gut);height:var(--hdrh);
  display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}
.brand{font-family:var(--body);font-weight:800;font-size:1.3rem;letter-spacing:.2em;
  color:var(--black);text-decoration:none;display:inline-flex;align-items:center;flex:0 0 auto}
/* Ring so groß wie die übrigen Versalien: Maßstab ist das runde "G"
   (0.756em inkl. Überschuss), der Kreis füllt die SVG-Box zu 87 %
   -> .869em. .brand ist inline-flex/align-items:center, deshalb wirkt
   vertical-align nicht; die Feinlage macht translateY. Am Messbild
   (Chromium, 8-fach, 1440px) liegt der Ring damit pixelgleich auf dem
   "G" (vorher .72em -> Ring 17 % zu klein und zu tief). */
.brand-o{display:inline-block;width:.869em;height:.869em;margin:0 .01em;
  transform:translateY(-.027em)}
.nav{display:flex;align-items:center;gap:clamp(9px,1.5vw,20px);margin-left:auto}
.nav a{text-decoration:none;position:relative;white-space:nowrap}
.nav a:not(.nav-cta){font-size:.88rem;font-weight:700;letter-spacing:.03em;color:var(--black-2);padding:9px 0}
.nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:2px;width:7px;height:7px;border-radius:50%;
  background:var(--red);transform:scale(0);transition:transform .24s var(--ease)}
@media (hover:hover) and (pointer:fine){.nav a:not(.nav-cta):hover::after{transform:scale(1)}}
.nav a[aria-current=page]::after{transform:scale(1)}
.nt{display:none;margin-left:auto;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative;color:var(--black)}
.nt i{position:absolute;left:10px;right:10px;height:3px;background:currentColor;
  transition:transform .25s var(--ease),opacity .18s}
.nt i:nth-child(1){top:14px}.nt i:nth-child(2){top:21px}.nt i:nth-child(3){top:28px}
body.nav-open .nt i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nt i:nth-child(2){opacity:0}
body.nav-open .nt i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{padding:0;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-8%;top:-14%;width:52%;height:128%;
  background:var(--bone-2);transform:rotate(9deg);z-index:0}
.hero-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.16fr);gap:clamp(28px,4vw,56px);
  align-items:center;padding-block:clamp(46px,7vw,110px)}
/* Drei Zeilen von 360 bis 1440 gleich: der Balken plus drei Zeilen ist die Komposition */
h1{font-size:clamp(2.1rem,1rem + 3.1vw,3.4rem);max-width:17ch}
h1 .acc{color:var(--red)}
.h1bar{display:block;width:clamp(120px,18vw,240px);height:14px;background:var(--black);
  margin-bottom:26px;transform-origin:left;transform:scaleX(0)}
[data-seq].run .h1bar{animation:barIn .7s .1s var(--ease) forwards}
@keyframes barIn{to{transform:scaleX(1)}}
.rm .h1bar{animation:none;transform:none}
.lead{margin:24px 0 32px;max-width:44ch;color:var(--black-2);font-size:clamp(1rem,.96rem + .25vw,1.12rem)}
.hero-act{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center}

/* Wachstums-Komposition: baut sich einmal auf, danach dreht nur der Ring */
.comp,.comp-m{width:100%;height:auto;overflow:visible}
.comp-m{display:none;max-width:420px}
@media (max-width:860px){.comp{display:none}.comp-m{display:block}}
/* =========================================================================
   PHILOSOPHIE MIT KREISENDEM SCHRIFTBAND
   Das Laufband ist aufgegangen in diesem Bauteil: die Frage ist der Kern,
   die zehn Kundenprojekte laufen als Schriftband darum. Jeder Name ist ein
   eigener Link. Die Bahn haelt an, sobald jemand zeigt ODER mit der Tastatur
   hineinkommt, sonst waere ein bewegtes Ziel nicht treffbar.
   ========================================================================= */
.orb-s{padding:clamp(60px,8vw,110px) 0 clamp(56px,7vw,100px);background:var(--bone);overflow:hidden}
.orb{position:relative;display:grid;place-items:center;isolation:isolate;
  width:min(94vw,860px);aspect-ratio:1;margin-inline:auto}
.orb-core{position:relative;z-index:2;display:grid;place-items:center;text-align:center;
  width:64%;aspect-ratio:1;border-radius:50%;background:var(--red);padding:7%}
/* Das Label steht ueber der Frage, nimmt ihr aber keinen Platz weg: sonst
   sitzt die Frage um die halbe Labelhoehe unter der Kreismitte. */
.orb-tag{position:absolute;top:22%;left:0;right:0;margin:0;
  font-family:var(--body);font-size:clamp(.7rem,.62rem + .3vw,.84rem);font-weight:800;
  letter-spacing:.34em;text-transform:uppercase;color:#fff}
.orb-q{font-family:var(--disp);font-weight:800;color:#fff;line-height:1;letter-spacing:-.042em;
  font-size:clamp(1.7rem,.8rem + 3.4vw,3.6rem);max-width:12ch}
.orb-q em{font-style:normal;color:var(--black)}
.orb-ring{position:absolute;inset:0;z-index:1}
.orb-ring svg{width:100%;height:100%;display:block;animation:orbit 64s linear infinite}
.orb:hover .orb-ring svg,.orb:focus-within .orb-ring svg{animation-play-state:paused}
@keyframes orbit{to{transform:rotate(360deg)}}
/* Schriftgrad folgt dem Umfang: der Kreis hat bei r=150 rund 942 Einheiten
   Bahn, die zehn Namen mit Trennern brauchen rund 200 Zeichen. Daraus ergibt
   sich der Grad. Auf dem Schirm sind das bei 860 px Buehne rund 16 px. */
.orb-ring text{font-family:var(--disp);font-weight:800;font-size:7.6px;letter-spacing:-.02px;fill:var(--black)}
.orb-sep{fill:var(--red)}
.orb-ring a{cursor:pointer}
.orb-ring a text{transition:fill .2s ease}
@media (hover:hover) and (pointer:fine){.orb-ring a:hover text{fill:var(--red)}}
.orb-ring a:focus-visible text{fill:var(--red)}
.orb-ring a:focus-visible{outline:3px solid var(--black);outline-offset:2px}
.orb-kicker{text-align:center;margin-top:clamp(22px,3vw,40px);font-size:.78rem;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;color:var(--red-t)}
.orb-hint{text-align:center;margin-top:10px;font-size:.9rem;color:var(--grey)}
/* Die Liste traegt die Namen fuer Hochformat und fuer alles, was kein SVG mag */
.orb-list{display:none;margin-top:clamp(22px,3vw,34px);grid-template-columns:1fr 1fr;gap:2px}
.orb-list a{display:grid;gap:3px;background:var(--bone-2);padding:16px 14px;text-decoration:none}
.orb-list b{font-family:var(--disp);font-weight:800;font-size:.86rem;letter-spacing:-.03em;color:var(--black)}
.orb-list s{text-decoration:none;font-size:.6rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey)}
@media (hover:hover) and (pointer:fine){.orb-list a:hover b{color:var(--red)}}
@media (max-width:760px){
  .orb{width:100%;aspect-ratio:auto;display:block}
  .orb-core{width:100%;aspect-ratio:auto;border-radius:0;padding:clamp(36px,10vw,60px) 8%}
  .orb-ring{display:none}
  .orb-list{display:grid}
}
.rm .orb-ring svg{animation:none}

/* =========================================================================
   LEISTUNGEN · vier Massen
   ========================================================================= */
.uses{padding:var(--sec) 0}
.uses-g{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,20px)}
.use{padding:clamp(24px,3vw,42px);text-decoration:none;display:flex;flex-direction:column;
  position:relative;overflow:hidden;transition:transform .24s var(--ease)}
.use:nth-child(1){grid-column:span 7;background:var(--black);color:var(--bone);min-height:300px}
.use:nth-child(2){grid-column:span 5;background:var(--red);color:var(--bone);min-height:300px}
.use:nth-child(3){grid-column:span 5;background:var(--bone-2);min-height:250px}
.use:nth-child(4){grid-column:span 7;background:var(--black);color:var(--bone);min-height:250px}
/* Ordnungszahl: immer >=21px bei Gewicht 800, damit sie als grosse Schrift zaehlt */
.use .no{font-family:var(--disp);font-weight:800;font-size:clamp(1.35rem,1.05rem + .75vw,1.65rem);letter-spacing:-.03em;color:#95948F}
.use h3{margin-top:auto;font-size:clamp(1.35rem,1rem + 1.25vw,2.1rem);hyphens:auto;overflow-wrap:break-word}
.use p{margin-top:12px;font-size:.98rem;max-width:36ch;color:#C9C8C2}
.use:nth-child(2){color:#fff}
.use:nth-child(2) p{color:#fff}
.use:nth-child(2) .no{color:#FBD9D3}
.use:nth-child(3) p{color:var(--black-2)}
.use:nth-child(3) .no{color:#5F5E58}
.use .go{margin-top:20px;display:inline-flex;align-items:center;gap:.6em;font-weight:800;font-size:.86rem;letter-spacing:.06em}
.use .go .ln{position:relative;width:55px;height:13px;flex:0 0 auto}
.use .go .ln s{position:absolute;left:0;top:5px;width:44px;height:3px;background:currentColor;text-decoration:none;
  transform:scaleX(.59);transform-origin:left;transition:transform .26s var(--ease)}
.use .go .ln::after{content:"";position:absolute;left:24px;top:0;width:13px;height:13px;border-radius:50%;
  background:var(--red);transition:transform .26s var(--ease)}
.use:nth-child(2) .go .ln::after{background:var(--bone)}
.use .ring{position:absolute;right:-70px;top:-70px;width:200px;height:200px;border-radius:50%;
  border:22px solid rgba(255,255,255,.09);transition:transform .5s var(--ease)}
.use:nth-child(3) .ring{border-color:rgba(17,17,17,.08)}
@media (hover:hover) and (pointer:fine){
  .use:hover{transform:translateY(-5px)}
  .use:hover .go .ln s{transform:scaleX(1)}
  .use:hover .go .ln::after{transform:translateX(18px)}
  .use:hover .ring{transform:scale(1.16) rotate(20deg)}
}
.use:focus-visible{outline-offset:-4px}
.uses-more{margin-top:36px}

/* =========================================================================
   EMPFEHLUNG
   ========================================================================= */
.split{padding:var(--sec) 0;background:var(--bone-2)}
.split-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(30px,5vw,72px);align-items:center}
/* Kein Kasten: die Szene steht frei auf der Flaeche des Abschnitts. */
.split-media{background:none;padding:0}
.split-media svg{width:100%;height:auto;display:block;overflow:visible}
.split-intro{max-width:46ch;margin-top:18px;color:var(--black-2)}
.hl{color:#fff;background:var(--red);padding:1px 8px;font-weight:800}
.steps{display:grid;margin:30px 0 34px}
.steps li{padding:18px 0 18px 66px;position:relative;border-top:3px solid var(--black);color:var(--black-2);font-size:.98rem}
.steps li:last-child{border-bottom:3px solid var(--black)}
.steps li::before{content:"";position:absolute;left:0;top:20px;width:34px;height:34px;border-radius:50%;background:var(--red)}
.steps li::after{content:attr(data-n);position:absolute;left:0;top:20px;width:34px;height:34px;
  display:grid;place-items:center;font-family:var(--body);font-weight:800;font-size:.86rem;color:var(--bone)}
.steps li b{color:var(--black);font-weight:800}
/* Kreislauf-Szene · Empfehlungsprogramm.
   Geometrie und Zeitachse stammen aus refscene.mjs – nicht von Hand nachziehen,
   sonst laufen Bogenlücken, Münzbahn und Ring auseinander. */
.rk-st,.rk-coin,.rk-ring,.rk-lab{opacity:0}
.rk-st,.rk-ring,.rk-lab{transform-box:fill-box;transform-origin:center}
.rk-ln{stroke-dasharray:100;stroke-dashoffset:100}
.rk-coin{offset-path:path('M113 216.8 A138 138 0 0 1 196.1 73');offset-rotate:0deg}
.rk-du{animation:rk0 8s cubic-bezier(.2,.9,.3,1) infinite}
@keyframes rk0{0%,2.5%{opacity:0;transform:scale(.78)}13.8%,93%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.78)}}
.rk-a1{animation:rk1 8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes rk1{0%,8.8%{stroke-dashoffset:100;opacity:1}22.5%,93%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.rk-ko{animation:rk2 8s cubic-bezier(.2,.9,.3,1) infinite}
@keyframes rk2{0%,20%{opacity:0;transform:scale(.78)}31.3%,93%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.78)}}
.rk-a2{animation:rk3 8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes rk3{0%,26.3%{stroke-dashoffset:100;opacity:1}40%,93%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.rk-pr{animation:rk4 8s cubic-bezier(.2,.9,.3,1) infinite}
@keyframes rk4{0%,37.5%{opacity:0;transform:scale(.78)}48.8%,93%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.78)}}
.rk-a3{animation:rk5 8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes rk5{0%,45%{stroke-dashoffset:100;opacity:1}60%,93%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.rk-coin{animation:rk6 8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes rk6{0%,46.3%{opacity:0;offset-distance:0%}47.3%{opacity:1;offset-distance:0%}66.3%{opacity:1;offset-distance:100%}69.3%,100%{opacity:0;offset-distance:100%}}
.rk-ring{animation:rk7 8s cubic-bezier(.2,.9,.3,1) infinite}
@keyframes rk7{0%,66.3%{opacity:0;transform:scale(.78)}72.5%,93%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.78)}}
.rk-lab{animation:rk8 8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes rk8{0%,70%{opacity:0}76.3%,93%{opacity:1}100%{opacity:0}}
/* Bewegungsreduktion: die Szene steht sofort vollständig da. */
.rm .rk-st,.rm .rk-coin,.rm .rk-ring,.rm .rk-lab,.rm .rk-ln{animation:none}
.rm .rk-ln{stroke-dashoffset:0}
.rm .rk-st,.rm .rk-lab{opacity:1;transform:none}
.rm .rk-coin{opacity:1;offset-distance:100%}
.rm .rk-ring{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rk-st,.rk-coin,.rk-ring,.rk-lab,.rk-ln{animation:none}
  .rk-ln{stroke-dashoffset:0}
  .rk-st,.rk-lab,.rk-ring{opacity:1;transform:none}
  .rk-coin{opacity:1;offset-distance:100%}
}

/* =========================================================================
   TEAM
   ========================================================================= */
.crew{padding:var(--sec) 0}
.crew-l{margin-top:clamp(24px,3vw,44px);border-top:4px solid var(--black)}
.crew-r{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(12px,2.6vw,36px);align-items:baseline;
  position:relative;padding:22px 0;border-bottom:1px solid rgba(17,17,17,.2)}
.crew-r .idx{width:32px;height:32px;border-radius:50%;background:var(--black);color:var(--bone);
  display:grid;place-items:center;font-weight:800;font-size:.8rem}
.crew-r .nm{font-family:var(--disp);font-weight:600;font-size:clamp(1.2rem,1rem + 1.2vw,2rem);letter-spacing:-.036em}
.crew-r .rl{font-size:.84rem;font-weight:700;letter-spacing:.06em;color:var(--grey);
  text-align:right;white-space:pre-line;line-height:1.5}
.crew-r::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:4px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease)}
@media (hover:hover) and (pointer:fine){.crew-r:hover::after{transform:scaleX(1)}}

/* =========================================================================
   FAQ
   ========================================================================= */
.faqs{padding:var(--sec) 0;background:var(--black);color:var(--bone)}
.faqs .sec-n{color:#9A9A96}
.faq-l{margin-top:clamp(24px,3vw,44px);border-top:4px solid var(--red)}
.faq-q{width:100%;display:flex;align-items:center;gap:16px;background:none;border:0;text-align:left;cursor:pointer;
  padding:22px 0;border-bottom:1px solid #303030;color:var(--bone);
  font-family:var(--disp);font-weight:600;font-size:clamp(1rem,.95rem + .7vw,1.5rem);letter-spacing:-.034em;line-height:1.15}
.faq-q .qt{flex:1}
.faq-q .sig{width:26px;height:26px;border-radius:50%;background:var(--red);flex:0 0 auto;position:relative;
  transition:transform .3s var(--ease)}
.faq-q .sig::before{content:"";position:absolute;left:7px;right:7px;top:50%;height:3px;margin-top:-1.5px;background:var(--bone)}
.faq-q .sig::after{content:"";position:absolute;top:7px;bottom:7px;left:50%;width:3px;margin-left:-1.5px;
  background:var(--bone);transition:transform .26s var(--ease)}
.faq-q[aria-expanded=true] .sig{transform:rotate(90deg)}
.faq-q[aria-expanded=true] .sig::after{transform:scaleY(0)}
.faq-a{height:0;overflow:hidden;transition:height .34s var(--ease);border-bottom:1px solid #303030}
.faq-a p{padding:2px 0 26px 42px;color:#C2C2BE;max-width:74ch}

/* =========================================================================
   KONTAKT
   ========================================================================= */
.form-s{padding:var(--sec) 0}
.form-g{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.form-side{padding:clamp(26px,3.2vw,46px);background:var(--red);color:#fff}
.form-side .eyeb{color:#fff}
.form-side h2{font-size:clamp(1.7rem,1.2rem + 1.9vw,2.7rem)}
.form-body{margin-top:18px;max-width:38ch;color:#fff}
/* Register: Symbol in einer 40-px-Fläche, mittig (.ck-ico steht in
   konstruktiv-site.css, hier die Fläche selbst), Beschriftung über dem Wert. */
.kv{margin-top:auto;padding-top:38px}
.kv a,.kv div{display:flex;gap:15px;align-items:center;padding:15px 0;
  border-top:1px solid rgba(0,0,0,.22);text-decoration:none;color:#fff}
.kv .ck-ico{display:grid;place-items:center;width:40px;height:40px;flex:none;
  background:rgba(0,0,0,.24);color:#fff}
.kv .ck-ico svg{width:21px;height:21px;display:block}
.kv .kv-t{min-width:0}
.kv s{display:block;text-decoration:none;font-size:.63rem;font-weight:800;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(255,255,255,.74)}
.kv b{display:block;font-weight:700;font-size:1rem}
@media (hover:hover) and (pointer:fine){.kv a:hover b{text-decoration:underline;text-underline-offset:4px}}
/* Vertrauenszeilen: Balken statt Pille, damit sie nicht mit den Merkern
   über dem Formular verwechselt werden. */
.tr{display:grid;margin-top:26px}
.tr span{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-top:1px solid rgba(0,0,0,.22);font-size:.72rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase}
.tr i{width:18px;height:3px;background:#fff;flex:none}
/* Merker über dem Formular */
.mkr{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.mkr span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:var(--bone);
  font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--black-2)}
.mkr svg{width:15px;height:15px;color:var(--red-t);flex:none}
.form-main{padding:clamp(26px,3.2vw,46px);background:var(--bone-2)}
.form-main h3{font-family:var(--disp);font-weight:800;font-size:clamp(1.35rem,1.1rem + 1.2vw,2.1rem);letter-spacing:-.036em}
.form-sub{margin:14px 0 18px;color:var(--black-2);max-width:52ch}
/* Die Feldkästen (.fgrid/.f) sind mit dem Formularbogen entfallen. Der Bogen
   selbst steht in konstruktiv-base.css und gilt für alle vier Flächen mit
   diesem Formular. Hier bleiben nur die Stellen, die zur Startseite gehören. */
.cf input:user-invalid,.cf select:user-invalid{border:0}
.cf-zeile:has(:user-invalid),.cf-text:has(:user-invalid){
  border-bottom-color:var(--red);border-bottom-width:3px}
.cf-fuss .fnote{margin:0;max-width:42ch}
.cf-fuss .kb{--kh:60px}
@media (max-width:860px){ .cf-fuss .kb{width:100%} }
.fnote{font-size:.86rem;color:var(--grey);min-height:1.4em}
.fnote[data-state=err]{color:#A3230F;font-weight:700}
.fnote[data-state=ok]{color:#166B41;font-weight:700}
.fdone{background:var(--bone);padding:clamp(22px,3vw,34px)}
.fdone h4{display:flex;align-items:center;gap:14px}
.fdone h4::before{content:"";width:26px;height:26px;border-radius:50%;background:var(--green);flex:0 0 auto}
.fdone h4{font-family:var(--disp);font-weight:800;font-size:clamp(1.15rem,1rem + .8vw,1.6rem);letter-spacing:-.034em}
.fdone h4:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.fdone p{margin:12px 0 22px;color:var(--black-2);max-width:52ch}
.fdone-act{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.freset{background:none;border:0;padding:6px 0;cursor:pointer;font-weight:800;font-size:.9rem;
  color:var(--black);border-bottom:3px solid var(--black)}
@media (hover:hover) and (pointer:fine){.freset:hover{color:var(--red);border-color:var(--red)}}

/* =========================================================================
   ABSCHLUSS + FUSS
   ========================================================================= */
/* Abschluss: der Text sitzt mittig IM Kreis. Kreis und Text liegen als zwei
   Rasterfelder uebereinander, deshalb bleibt der Kreis immer ganz sichtbar
   und die Mitten fallen zusammen. Die Textbreite ist aus der Kreisgeometrie
   abgeleitet, nicht geraten: ein Block der Hoehe h passt bis zur Breite
   2*sqrt(r^2-(h/2)^2). Der Faktor .66 haelt den obersten und untersten
   Zeilenrand innerhalb des Bogens. */
.close{--kreis:min(84vw,660px);
  padding:clamp(40px,5vw,72px) 0;background:var(--bone);text-align:center;position:relative;overflow:hidden;
  display:grid;grid-template-columns:100%;place-items:center}
.close-o{grid-area:1/1;width:var(--kreis);height:var(--kreis);border-radius:50%;background:var(--bone-2)}
/* Ohne Seitenrinne: den Abstand nach aussen gibt hier der Kreisbogen vor,
   nicht das Seitenraster. Die 88vw-Grenze haelt schmale Fenster frei. */
.close .wrap{grid-area:1/1;position:relative;z-index:1;padding-inline:0;
  max-width:min(calc(var(--kreis) * .8),88vw)}
/* Keine ch-Grenze: die Zeilenlaenge kommt aus der Kreisbreite oben. */
.close h2{font-size:clamp(1.42rem,.9rem + 1.8vw,2.35rem);max-width:none;margin:0 auto 16px;letter-spacing:-.038em}
.close .acc{color:var(--red)}
.close p{color:var(--black-2);margin-bottom:28px;font-size:clamp(.88rem,.82rem + .2vw,1rem)}
/* Schmale Breiten: der Kreis wird breiter als das Fenster und an den Seiten
   beschnitten. Sonst muesste der Text unter die lesbare Groesse, nur damit er
   in einen Kreis passt, der ohnehin kaum noch Flaeche hat. */
@media (max-width:860px){
  .close{--kreis:min(128vw,660px);padding:clamp(30px,5vw,50px) 0}
}
.foot{background:var(--black);color:var(--bone);padding:clamp(44px,6vw,76px) 0 0}
.foot-g{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:clamp(22px,3vw,44px)}
.foot h4{font-size:.74rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#9A9A96;margin-bottom:14px}
.foot li{margin-bottom:9px}
.foot a{text-decoration:none;color:#C2C2BE;font-size:.94rem;transition:color .18s ease}
@media (hover:hover) and (pointer:fine){.foot a:hover{color:var(--red)}}
.foot .brand{font-size:1.16rem;margin-bottom:14px;color:var(--bone)}
.foot-about{color:#9A9A96;font-size:.92rem;max-width:34ch}
.foot-social{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--red);color:var(--bone);font-weight:800;text-decoration:none;margin-top:18px;
  transition:transform .24s var(--ease)}
@media (hover:hover) and (pointer:fine){.foot-social:hover{transform:translateY(-3px)}}
.foot-b{margin-top:clamp(32px,5vw,58px);border-top:1px solid #303030;padding:18px 0 26px;
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;align-items:center;
  font-size:.86rem;color:#9A9A96}
.foot-b nav{display:flex;gap:18px}

/* Nach oben */
.top{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:35;
  width:50px;height:50px;border-radius:50%;background:var(--black);color:var(--bone);border:0;cursor:pointer;
  display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),background .2s ease}
.top.on{opacity:1;pointer-events:auto;transform:none}
/* In derselben Ecke sitzt der Starter des KI-Assistenten (58 px). Sobald er
   wirklich steht, setzt sein Skript `data-zoning-chat` aufs <html> und dieser
   Knopf rueckt darueber: 58 px Starter + 12 px Luft. Faellt der Dienst aus,
   bleibt das Attribut weg und der Knopf steht wie zuvor in der Ecke — die
   Seite raeumt also nur Platz frei, den auch jemand einnimmt. */
html[data-zoning-chat] .top{bottom:calc(clamp(14px,3vw,28px) + 70px)}
.top svg{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){.top:hover{background:var(--red)}}

/* =========================================================================
   UMBRUCH
   ========================================================================= */
@media (max-width:1080px){
  .hero-in{grid-template-columns:1fr}
  .hero::before{display:none}
  .uses-g>.use{grid-column:span 12!important;min-height:230px}
  .split-g{grid-template-columns:1fr}
  .form-g{grid-template-columns:1fr}
  .foot-g{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nt{display:block}
  .nav{position:fixed;left:0;right:0;top:var(--hdrh);flex-direction:column;align-items:stretch;gap:0;
    padding:6px var(--gut) 24px;max-height:calc(100dvh - var(--hdrh));overflow:auto;z-index:39;
    background:var(--bone);border-bottom:4px solid var(--black);
    transform:translateY(-10px);opacity:0;pointer-events:none;
    transition:opacity .22s ease,transform .24s var(--ease)}
  body.nav-open .nav{opacity:1;transform:none;pointer-events:auto}
  .nav a:not(.nav-cta){padding:14px 0;font-size:1.02rem;border-bottom:1px solid rgba(17,17,17,.14)}
  .nav a:not(.nav-cta)::after{bottom:8px}
  .nav-cta{margin-top:18px;width:100%}
  .fgrid{grid-template-columns:1fr}
  .crew-r{grid-template-columns:auto 1fr;row-gap:4px}
  .crew-r .rl{grid-column:2;text-align:left}
  .foot-g{grid-template-columns:1fr}
}
@media (max-width:420px){
  .kb{--kp:20px;--kf:.88rem}
}

/* Tipp-Effekt im Kreis: Label und Frage schreiben sich wie in einem
   Textprogramm, der Strich blinkt am Zeilenende und wandert mit. Der volle
   Text steht als aria-label am Element, deshalb hoert eine Vorleseschrift
   den Satz sofort und vollstaendig, ohne das Getippe mitzubekommen. */
.orb-tag [data-type-tag],.orb-q [data-type-q]{display:inline}
.is-typing::after{content:"";display:inline-block;width:max(.06em,2px);height:.92em;
  margin-left:.06em;background:currentColor;vertical-align:-.1em;
  animation:orbCaret 1.06s step-end infinite}
.orb-q .is-typing::after{height:.86em;background:#fff}
@keyframes orbCaret{from,to{opacity:1}50%{opacity:0}}
.rm .is-typing::after{animation:none;opacity:0}

/* --- Tippen ohne Springen ------------------------------------------------
   Alle Zeichen stehen im Layout, nur ihre Sichtbarkeit wandert. Dadurch ist
   der Satz vom ersten Moment an genauso umbrochen und mittig wie am Ende. */
.orb-q .ch{visibility:hidden}
.orb-q.typed .ch,.rm .orb-q .ch{visibility:visible}
.orb-q .ch.on{visibility:visible}
.orb-q .ini{color:var(--black)}
/* Fragezeichen: zeichnet sich zum Schluss, der Punkt kommt zuletzt */
.orb-qm{display:inline-block;width:.6em;height:.9em;vertical-align:-.155em;margin-left:.02em;color:var(--black)}
.orb-qm svg{width:100%;height:100%;overflow:visible}
.orb-qm-hook{stroke-dasharray:150;stroke-dashoffset:150}
.orb-qm-dot{fill:currentColor;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3)}
.orb-qm.draw .orb-qm-hook{animation:qmDraw .62s cubic-bezier(.4,0,.2,1) forwards}
.orb-qm.draw .orb-qm-dot{animation:qmDot .34s .5s cubic-bezier(.34,1.4,.64,1) forwards}
@keyframes qmDraw{to{stroke-dashoffset:0}}
@keyframes qmDot{to{opacity:1;transform:scale(1)}}
.rm .orb-qm-hook{stroke-dashoffset:0}
.rm .orb-qm-dot{opacity:1;transform:none}