/* =========================================================================
   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 .2em 0 .05em;
  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:.68rem;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}

/* ---- Kopfzeile: Klappmenue schon ab 999px statt erst ab 860px -----------
   Zwischen 861 und 989px passte die Navigation nicht mehr in den Kopf: der
   Knopf "Erstgespraech buchen" wurde rechts abgeschnitten und die Startseite
   scrollte waagerecht (gemessen 24.08.2026: bei 900px 69px zu breit, bei
   861px 101px, letzter Fehler bei 980px). Auf der Live-Seite identisch, also
   ein Bestandsfehler. Betroffen sind Tablets im Querformat und kleine Laptops.

   Die Menue-Regeln sind bewusst wiederholt statt aus dem 860er-Block
   herausgeloest: dort stehen auch .fgrid, .crew-r und .foot-g, die weiterhin
   erst ab 860px umbrechen sollen - .foot-g wuerde sonst schon bei 999px
   einspaltig, obwohl die Fusszeile dort zweispaltig bleiben soll.
   Rueckbau: diesen Block loeschen. */
@media (max-width:999px){
  .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%}
}

/* ---- Referenz-Kacheln der Startseite: rechte Spalte lief ueber den Rand ---
   .orb-list ist zweispaltig mit grid-template-columns:1fr 1fr. "1fr" heisst
   minmax(auto,1fr) - die Spur schrumpft also nicht unter ihren laengsten
   Inhalt. Auf 360px zog "Nicole · Ferienwohnungen" die rechte Spalte auf
   179.8px, waehrend links nur 167.2px standen: zusammen 349px in einem 320px
   breiten Container. Fuenf der elf Kacheln wurden rechts abgeschnitten
   ("Ferienwohnunge", "Pflegedienst mit"). Auch auf 390px, wo es gerade noch
   passt, blieben die beiden Spalten unterschiedlich breit - das ist der
   schiefe Eindruck, den Nikita am 24.08.2026 gemeldet hat.

   minmax(0,1fr) begrenzt die Spur, min-width:0 erlaubt der Kachel zu
   schrumpfen, und erst dadurch kann der Umbruch der langen Namen greifen.
   Gleiche Ursache wie bei .ka-hero__grid auf karriere.html. */
.orb-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.orb-list a{min-width:0}
/* Auch eine Ebene tiefer noetig: die Kachel ist selbst ein Grid (a{display:grid}),
   Name und Branche sind also wieder Rasterfelder mit min-width:auto. Ohne diese
   Zeile blieb "Nicole · Ferienwohnungen" 151.8px breit in einer 131px-Spalte und
   lief weiter ueber die Kachel, obwohl break-word schon gesetzt war. */
.orb-list a>*{min-width:0}
.orb-list b{overflow-wrap:break-word;hyphens:auto}
/* Unter 420px einspaltig. Ausgerechnet statt geraten: das laengste Wort
   "Ferienwohnungen" braucht 151.8px, zweispaltig stehen bei 360px aber nur
   131px Textbreite zur Verfuegung (Kachel 159 minus 28px Polster), bei 390px
   146px. Es muesste also auf .72rem schrumpfen, um zu passen - oder mitten im
   Wort brechen. Beides schlechter als eine Spalte, in der bei 360px 292px
   Platz sind und jeder Name in voller Groesse steht.
   Ab 420px reicht die Breite fuer zwei Spalten (Text 161px, 9px Luft).
   Auf Silbentrennung ist kein Verlass: Firefox trennt, Chromium nicht
   (am 24.08.2026 in beiden Engines gemessen) - deshalb loest die Spaltenzahl
   das Problem und nicht hyphens. break-word bleibt nur als Notnagel. */
@media (max-width:419px){
  .orb-list{grid-template-columns:1fr}
}

/* ---- "Unsere Philosophie" ueberlagerte die Frage auf schmalen Schirmen ----
   .orb-core ist auf dem Desktop ein Kreis (aspect-ratio:1) und rund 545px hoch;
   .orb-tag sitzt darin absolut bei top:22%, damit es der Frage keinen Platz
   wegnimmt - so steht die Frage exakt in der Kreismitte.

   Unter 760px wird aus dem Kreis ein flacher Kasten (aspect-ratio:auto,
   border-radius:0). Seine Hoehe faellt damit auf 126 bis 198px, top:22% sind
   dann nur noch rund 28px - und die inzwischen zwei- bis dreizeilige Frage
   waechst von der Mitte aus nach oben ins Label hinein. Gemessen 24.08.2026:
   320px 15.9px Ueberlappung, 360px 9.9, 390px 8.3, 640px 0.9 - ab 900px keine.
   Sichtbar als "UNSE" hinter dem Wort "Was" (Nutzerbild grafik.png).

   Im flachen Kasten gibt es keinen Grund mehr fuer die absolute Lage: dort
   steht das Label einfach ueber der Frage im Fluss. .orb-core ist ein Grid,
   beide landen also in eigenen Zeilen, zentriert wie zuvor. */
@media (max-width:760px){
  .orb-tag{position:static;margin:0 0 .55em}
}

/* ---- Tippziele der Startseiten-Fusszeile auf Touch-Geraeten --------------
   Gleicher Grund wie Block 26 in konstruktiv-site.css: die Rechtslinks unten
   sind 24px hoch, mit dem Daumen schlecht zu treffen. Nur ohne Hover-Zeiger. */
@media (hover:none) and (pointer:coarse){
  .foot-b nav a{min-height:44px;display:inline-flex;align-items:center}
}

/* ---- Handy-Menue der Startseite auf das Panel-Muster der Unterseiten -----
   Entscheidung Nikita, 24.08.2026: ein Muster fuer alle Seiten. Bisher klappte
   das Menue hier unter dem Kopf ueber die volle Breite auf (390x486px), auf den
   Unterseiten schiebt sich ein Panel von rechts ein (320x844px, abgedunkelter
   Hintergrund). Uebernommen wird das Panel.

   Der Scrim kommt als Pseudoelement statt als eigenes <div>: die Startseite hat
   kein .nav-scrim im Markup, und so bleibt das HTML unangetastet.

   Stapelfolge - hier lag mein erster Versuch falsch: Das Panel stand auf 41 und
   damit UEBER der Kopfzeile (.hdr, z-index 40). Folge: der Schliessen-Knopf
   verschwand hinter dem Panel, man kam nur noch per Escape oder Klick daneben
   heraus. Richtig ist die Ordnung der Unterseiten: Kopf ganz oben, darunter das
   Panel, darunter die Abdunkelung. Das Panel bekommt oben 84px Polster, damit
   seine Links nicht unter der 82px hohen Kopfzeile liegen. */
@media (max-width:999px){
  .nav{
    position:fixed;top:0;right:0;left:auto;height:100vh;height:100dvh;z-index:39;
    width:min(320px,86vw);max-height:none;
    flex-direction:column;align-items:stretch;gap:0;
    padding:84px 24px 24px;
    background:var(--bone);border-bottom:0;
    box-shadow:-18px 0 44px rgba(17,17,17,.18);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    transform:translateX(100%);opacity:1;visibility:hidden;pointer-events:none;
    transition:transform .34s var(--ease),visibility 0s linear .34s}
  body.nav-open .nav{
    transform:translateX(0);visibility:visible;pointer-events:auto;
    transition:transform .34s var(--ease)}
  body.nav-open::before{
    content:"";position:fixed;inset:0;z-index:38;
    background:rgba(17,17,17,.45);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-cta{margin-top:18px;width:100%}
  /* Der Menueknopf muss ueber dem Panel liegen, sonst ist das X zum Schliessen
     verdeckt. z-index allein am Kopf reicht nicht: .nav ist ein KIND von .hdr und
     liegt damit in dessen Stapelkontext - dort zaehlt nur die Ordnung unter den
     Geschwistern, nicht der Wert des Elternteils. Deshalb der Knopf direkt - und
     mit einem Wert UEBER dem des Panels (39). Erster Versuch stand auf 2, weil ich
     die Zahl von den Unterseiten uebernommen hatte; dort traegt das Panel selbst
     nur 2, hier 39, also verlor der Knopf. Innerhalb eines Stapelkontexts zaehlt
     der Zahlenvergleich, nicht die Herkunft der Zahl. */
  .nt{position:relative;z-index:40}
}
@media (prefers-reduced-motion:reduce){
  .nav{transition:none}
}

/* ---- Scroll-Sperre bei offenem Menue, die auch wirklich greift -----------
   Gemessen 24.08.2026: bei geoeffnetem Menue liess sich die Seite dahinter auf
   BEIDEN Seitentypen weiterscrollen - auf den Unterseiten trotz gesetztem
   body{overflow:hidden}. Der Grund: haengt das Scrollen am <html>-Element,
   hilft overflow:hidden am <body> nicht. Deshalb sperrt das <html>; :has()
   traegt die Klasse vom body hinauf, ohne dass JS angefasst wird.

   25.08.2026: die zusaetzliche Sperre am body ist WEG. overflow:hidden am
   <body> macht den Body zum Clip-/Scrollcontainer und bricht damit
   position:sticky der Kopfzeile (.hdr) - oeffnete man das Menue weiter
   unten, fiel der Kopf samt Burger-X aus dem Bild (gemessen bei
   scrollY=1600: Kopf bei y=-1600). Die Sperre am <html> blockiert das
   Rad-Ereignis nachweislich allein (Gegenmessung gleicher Tag) und laesst
   den Klebe-Effekt unberuehrt; am body bleibt overscroll-behavior:none. */
body.nav-open{overscroll-behavior:none}
html:has(body.nav-open){overflow:hidden}


/* Wortmarke in der Fusszeile: kleinere Schrift (18.56 statt 20.8px), und die
   Buchstabenabstaende skalieren dort nicht ganz proportional mit. Mit dem
   Kopfzeilen-Wert blieb links 1.0px zu viel und rechts 0.62px zu wenig
   (gemessen an den Pixeln, 8-fach). Deshalb hier eigene Werte. */
.foot .brand .brand-o{margin:0 .233em 0 0}


/* ---- Wortmarke als ein SVG ------------------------------------------------
   Schrift und Ring liegen im selben viewBox-Koordinatensystem, ihre Lage
   zueinander ist damit bei jeder Groesse identisch. Vorher standen Text und
   Ring nebeneinander: der Ring haing an em-Werten und an Font-Metriken und
   wanderte mit wachsender Schrift aus der Mitte (bei 31px 2.06px zu hoch,
   gemessen 24.08.2026). Ausserdem wirkt letter-spacing nicht auf ein Element,
   weshalb rechts vom Ring der Zeichenabstand fehlte.

   Hoehe .75em: die viewBox ist 1500 von 2000 Font-Einheiten hoch, also genau
   die Hoehe der Rundungen (O und G ueberschiessen die Versalhoehe um je 30).
   Damit ist die Wortmarke exakt so gross wie zuvor. currentColor traegt die
   Textfarbe in Schrift und Ring, der rote Bogen bleibt fest. */
.brand .wortmarke,.footer-brand .wortmarke,.fbq-zoning .wortmarke{
  height:.75em;width:auto;display:block;overflow:visible}


/* ---- Marken-Intro auf der Startseite --------------------------------------
   Uebernommen aus styles.css (dort ab Zeile 3092), das die Startseite nicht
   laedt. Bis zum 25.08.2026 lief das Intro nur auf den Unterseiten - wer ueber
   die Startseite ankam, sah es also nie, obwohl genau das der erste Eindruck
   sein soll.

   Zwei Unterschiede zur Vorlage: Die Kopfzeile heisst hier .hdr statt
   #site-header, und die Wortmarke ist ein SVG - statt .intro__pre und
   .intro__post wird die eine Gruppe .wm-schrift eingeblendet.

   Der weisse Vorhang steht ab dem ersten Bild (Inline-Skript im <head> setzt
   .intro-armed), damit nichts aufblitzt, bevor das Overlay uebernimmt. */
html.intro-armed body::before{content:"";position:fixed;inset:0;background:#fff;z-index:9998}
html.intro-playing body>header,
html.intro-playing body>main,
html.intro-playing body>footer{opacity:0}
html.intro-revealing body>main,
html.intro-revealing body>footer{animation:introSiteIn .9s cubic-bezier(.22,1,.36,1) both}
html.intro-revealing body>header{animation:introHeaderIn .9s cubic-bezier(.22,1,.36,1) both}
html.intro-playing .hdr .brand,
html.intro-revealing .hdr .brand{opacity:0}
@keyframes introSiteIn{from{opacity:0}to{opacity:1}}
@keyframes introHeaderIn{from{opacity:0}to{opacity:1}}

.intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;pointer-events:none}
.intro__bg{position:absolute;inset:0;background:#fff;transition:opacity .85s cubic-bezier(.22,1,.36,1)}
.intro.is-revealing .intro__bg{opacity:0}
.intro__logo{position:relative;z-index:1;transform-origin:top left;
  transition:transform .86s cubic-bezier(.22,1,.36,1);will-change:transform}
.intro__inner{display:inline-block;opacity:0;will-change:transform}
/* bewusst um den Zoomfaktor S=2.2 uebergross layoutet, JS skaliert nur runter */
.intro__brand{font-size:calc(clamp(56px,12vw,112px) * 2.2);cursor:default}

.intro__brand .wm-o__grund{opacity:.12}
.intro__brand .wm-o__bogen{stroke-dashoffset:2724}
.intro__brand .wm-schrift{opacity:0}
.intro.run .intro__brand .wm-o__grund{animation:introBaseIn .65s cubic-bezier(.22,1,.36,1) .25s forwards}
.intro.run .intro__brand .wm-o__bogen{animation:introArcDrawSvg .72s cubic-bezier(.22,1,.36,1) .30s forwards}
.intro.run .intro__brand .wm-schrift{animation:introSchriftIn .54s cubic-bezier(.22,1,.36,1) 1.04s forwards}
@keyframes introBaseIn{to{opacity:1}}
@keyframes introArcDrawSvg{to{stroke-dashoffset:0}}
@keyframes introSchriftIn{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  html.intro-armed body::before{display:none}
  html.intro-playing body>header,
  html.intro-playing body>main,
  html.intro-playing body>footer{opacity:1!important;animation:none!important}
  .intro{display:none!important}
}