/* lenkraum.com — Basis der Seite. Kopie von site/kh.css (hypefrei.ai),
   eigenständig, weil Fonts nach DESIGN.md §2 je Domain selbst geliefert werden.
   Tokens ausschließlich aus DESIGN.md. Bühne (§5), ein Akzent (§3). */

@font-face{font-family:"Cabinet Grotesk";src:url("fonts/CabinetGrotesk-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cabinet Grotesk";src:url("fonts/CabinetGrotesk-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Switzer";src:url("fonts/Switzer-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Switzer";src:url("fonts/Switzer-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Switzer";src:url("fonts/Switzer-Semibold.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --kh-ink:#17181A;
  --kh-volt:#E4FF1A;
  --kh-canvas:#F4F4F2;
  --kh-surface:#FFFFFF;
  --kh-subtle:#ECECEC;
  --kh-line:#E3E3E2;
  --kh-ink-2:#3F4145;
  --kh-mute:#6C6F74;
  --kh-stage:#0F1012;
  --kh-stage-panel:#17181A;
  --kh-stage-line:#2A2B2F;
  --kh-on-stage:#F4F4F2;
  --kh-on-stage-2:#8A8D92;
  --cab:"Cabinet Grotesk",system-ui,sans-serif;
  --sw:"Switzer",system-ui,sans-serif;

  --fs-display:clamp(2.75rem, 5vw + 1rem, 5.5rem);
  --fs-h1:clamp(2rem, 3vw + 1rem, 2.75rem);
  --fs-h2:1.75rem;
  --fs-h3:1.25rem;
  --fs-body-lg:1.1875rem;
  --fs-body:1rem;
  --fs-caption:0.8125rem;

  --pad-x:clamp(24px, 8vw, 140px);
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{background:var(--kh-stage)}

body{
  font-family:var(--sw);
  color:var(--kh-on-stage);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Die Kreis-Seite ist der helle Raum. Die dunkle globale Bühne der bestehenden
   Seiten bleibt unverändert. */
body.kreis{
  color:var(--kh-ink);
  background:var(--kh-canvas);
}

.kreis .kh-wordmark,
.kreis .kh-links a,
.kreis .kh-nav-action,
.kreis .kh-primary{
  color:inherit;
  text-decoration:none;
}

.kreis .kh-nav-action,
.kreis .kh-primary{cursor:pointer}

.kreis .kh-circle-footer{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--kh-stage-line);
  color:var(--kh-on-stage-2);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size:13px;
  line-height:1.5;
}
.kreis .kh-circle-footer a{color:inherit;text-decoration:none}
.kreis .kh-circle-footer a:hover{color:var(--kh-on-stage);text-decoration:underline;text-underline-offset:.2em}

.stage{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding:clamp(28px,4vh,44px) var(--pad-x) clamp(24px,3.5vh,40px);
  overflow:hidden;
}

/* Signatur-Textur: feines Raster, weich ausmaskiert (§9). Zwei Masken: die radiale
   trägt die Textzone, die lineare lässt das Raster auslaufen statt abzureißen. */
.grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--kh-stage-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--kh-stage-line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.62;
  -webkit-mask-image:
    radial-gradient(78% 74% at 22% 38%, #000 0%, rgb(0 0 0 / .35) 62%, transparent 100%),
    linear-gradient(145deg, #000 0%, rgb(0 0 0 / .28) 70%, transparent 100%);
          mask-image:
    radial-gradient(78% 74% at 22% 38%, #000 0%, rgb(0 0 0 / .35) 62%, transparent 100%),
    linear-gradient(145deg, #000 0%, rgb(0 0 0 / .28) 70%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
  pointer-events:none;
}

/* Auf Textseiten tritt das Raster zurück — dort wird gelesen, nicht geschaut. */
.stage:has(.doc) .grid{opacity:.3}

.inner{position:relative;display:flex;flex-direction:column;flex:1;max-width:1040px}

/* — Wortmarke — */
.wm{
  font-family:var(--cab);
  font-weight:700;
  font-size:clamp(19px,1.6vw,22px);
  letter-spacing:-0.03em;
  color:var(--kh-on-stage);
  text-decoration:none;
  align-self:flex-start;
}
.chip{
  background:var(--kh-volt);
  color:var(--kh-ink);
  padding:.02em .18em;
  border-radius:.2em;
}
.wm .chip{margin-left:.11em}  /* wie GAP in assets/logo/tools/gen.mjs, DESIGN.md §10 */

footer{
  margin-top:auto;
  padding-top:clamp(32px,5vh,64px);
  font-size:var(--fs-caption);
  font-weight:500;
  color:var(--kh-on-stage-2);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--kh-on-stage);text-decoration:underline;text-underline-offset:.2em}
footer [aria-current="page"]{color:var(--kh-on-stage)}

a:focus-visible,button:focus-visible{
  outline:2px solid var(--kh-volt);
  outline-offset:3px;
  border-radius:2px;
}

/* Stiller Zugang zur Demo -- bewusst kein CTA, kein Text, kein Verweis im Fliesstext:
   wer sucht, findet es; wer nicht sucht, wird nicht abgelenkt (§9, duenne geometrische
   Icons statt Emoji/3D). Fixed statt im Layout, damit es unabhaengig vom Seiteninhalt
   immer an derselben Stelle sitzt. */
.entry-lock{
  position:fixed;
  right:20px;
  bottom:20px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--kh-on-stage-2);
  opacity:.55;
  border-radius:50%;
  transition:opacity 150ms cubic-bezier(.22,1,.36,1), color 150ms cubic-bezier(.22,1,.36,1);
}
.entry-lock:visited{color:var(--kh-on-stage-2)}
.entry-lock:hover,.entry-lock:visited:hover{opacity:1;color:var(--kh-on-stage)}
.entry-lock svg{width:18px;height:18px}

/* ————— Rechtsseiten: Pflichtinhalt, kein Gestaltungsgegenstand ————— */

.doc{
  margin-top:clamp(40px,7vh,80px);
  max-width:68ch;
}

.doc h1{
  font-family:var(--cab);
  font-weight:700;
  font-size:var(--fs-h1);
  line-height:1.15;
  letter-spacing:-0.02em;
  text-wrap:balance;
}

.doc h2{
  font-family:var(--cab);
  font-weight:600;
  font-size:var(--fs-h3);
  line-height:1.35;
  letter-spacing:-0.01em;
  margin-top:clamp(32px,4vh,44px);
}

.doc p,.doc li{
  font-size:var(--fs-body);
  font-weight:500;
  line-height:1.7;
  text-wrap:pretty;
}

.doc p{margin-top:12px}
.doc h1 + p{margin-top:20px}

.doc ul{margin-top:12px;padding-left:1.1em}
.doc li{margin-top:6px}

.doc a{color:var(--kh-on-stage);text-decoration:underline;text-decoration-color:var(--kh-on-stage-2);text-underline-offset:.18em}
.doc a:hover{text-decoration-color:var(--kh-on-stage)}

/* Adressblock: gruppiert statt als Fließtext, ohne Karte oder Rahmen */
.doc address{
  font-style:normal;
  margin-top:14px;
  line-height:1.7;
  font-size:var(--fs-body);
  font-weight:500;
}

.doc .lede{
  font-size:var(--fs-body-lg);
  line-height:1.65;
  color:var(--kh-on-stage);
}

.doc .meta{
  margin-top:clamp(36px,5vh,56px);
  padding-top:20px;
  border-top:1px solid var(--kh-stage-line);
  font-size:var(--fs-caption);
  color:var(--kh-on-stage-2);
}

/* ————— Startseite ————— */
/* Alles hier auf .home gescoped: die Rechtsseiten teilen sich die Basis oben,
   dürfen aber von der Display-Typografie der Startseite nichts abbekommen. */

.home .stage{
  isolation:isolate;
  background:
    radial-gradient(80% 100% at 94% 42%,rgb(255 255 255 / .025),transparent 68%),
    var(--kh-stage);
}

.home .stage::before,
.home .stage::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  height:1px;
  background:var(--kh-stage-line);
  opacity:.7;
}
.home .stage::before{top:clamp(90px,14vh,150px)}
.home .stage::after{bottom:clamp(84px,13vh,140px)}

.home .flow{
  position:absolute;
  z-index:-1;
  inset:-2% -2% -2% auto;
  width:min(68vw,1020px);
  height:104%;
  pointer-events:none;
  opacity:.95;
}
.home .flow path{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.home .flow .main{stroke:#4B4E53;stroke-width:1}
.home .flow .side{stroke:#34363A;stroke-width:1}
.home .flow .fine{stroke:#24262A;stroke-width:1}
.home .flow .pulse{
  stroke:var(--kh-on-stage-2);
  stroke-width:1;
  stroke-dasharray:16 245;
  animation:kh-drift 13s linear infinite;
  opacity:.58;
}
.home .flow .pulse.slow{
  stroke:#62656A;
  stroke-dasharray:9 285;
  animation-duration:19s;
  animation-direction:reverse;
  opacity:.42;
}
.home .flow .node{fill:var(--kh-stage);stroke:#66696E;stroke-width:1}
.home .flow .node.active{fill:var(--kh-volt);stroke:#0B0C0D}
.home .flow .donut circle{fill:none;stroke:#62656A;stroke-width:1}
.home .flow .donut .arc{
  stroke:var(--kh-on-stage);
  stroke-width:1.3;
  stroke-dasharray:14 28;
  transform-box:fill-box;
  transform-origin:center;
  animation:kh-turn 22s linear infinite;
}
.home .flow .donut.reverse .arc{animation-duration:29s;animation-direction:reverse}
.home .flow .donut.volt .arc{stroke:var(--kh-volt)}

@keyframes kh-drift{to{stroke-dashoffset:-520}}
@keyframes kh-turn{to{transform:rotate(360deg)}}

.home .body-block{margin-block:auto;padding-block:clamp(36px,6vh,72px) 0}

.home h1{
  font-family:var(--cab);
  font-weight:700;
  font-size:var(--fs-display);
  line-height:1.1;          /* Bühne: LH-Aufschlag (§3) — gibt dem Marker-Band Luft */
  letter-spacing:-0.03em;
  text-wrap:balance;
  max-width:16ch;
}

/* Marker-Band, Bühnen-Variante (§4). Gegenüber dem Basiswert 0.74em/84%
   nachgezogen: bei Display-Größe müssen Umlautpunkte und Unterlängen im Gelb
   liegen, sonst verschwinden die Ink-Buchstaben im Off-Black. */
.home .m-key{
  background-image:linear-gradient(101deg,
    transparent 1%, var(--kh-volt) 3%, var(--kh-volt) 96%, transparent 99%);
  background-repeat:no-repeat;
  background-size:100% 1.06em;
  background-position:0 90%;
  padding:0 .1em;
  color:var(--kh-ink);
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
}

/* „KI-Hype“ darf nicht am Bindestrich umbrechen */
.nobr{white-space:nowrap}

.home .lines{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:clamp(28px,4vh,40px);
  max-width:68ch;           /* jede Zeile bleibt eine Zeile — sie sind Zeilen, keine Absätze */
}
.home .lines p{
  font-size:var(--fs-body-lg);
  font-weight:500;
  line-height:1.65;
  text-wrap:pretty;
}

.home .rule{
  border:0;
  border-top:1px solid var(--kh-stage-line);
  margin-top:clamp(36px,5vh,60px);
  max-width:64ch;           /* trägt die Breite des Blocks, den sie einleitet */
}

.home .access{
  margin-top:22px;
  font-size:var(--fs-body);
  font-weight:500;
  line-height:1.7;
  max-width:64ch;
  text-wrap:pretty;
}

.home .invite{
  margin-top:30px;
  font-size:var(--fs-body);
  font-weight:500;
  line-height:1.7;
}

.home .contact{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:10px}

.home .mail{
  font-size:var(--fs-body-lg);
  font-weight:600;
  color:var(--kh-on-stage);
  text-decoration:underline;
  text-decoration-color:var(--kh-on-stage-2);
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  transition:text-decoration-color 150ms cubic-bezier(.22,1,.36,1);
}
.home .mail:hover{text-decoration-color:var(--kh-on-stage)}

/* Zweiter Weg, falls kein Mailprogramm eingerichtet ist. Bewusst klein:
   die Adresse bleibt die Handlung, das hier ist die Absicherung. */
.copy{
  font-family:var(--sw);
  font-size:var(--fs-caption);
  font-weight:500;
  color:var(--kh-on-stage-2);
  background:none;
  border:0;
  padding:2px 0;
  cursor:pointer;
  transition:color 150ms cubic-bezier(.22,1,.36,1);
}
.copy:hover{color:var(--kh-on-stage)}
.copy[hidden]{display:none}

/* Touch: das Kopieren-Ziel braucht Fläche, ohne optisch zu wachsen */
@media (pointer:coarse){
  .copy{padding:14px 0;margin:-14px 0}
}

/* — Ladeauftritt —
   Ein orchestrierter Moment, kein Fade-on-Scroll. `backwards` statt `both`:
   der Ruhezustand ist sichtbar, die Animation blendet nur davor ein. Fällt sie
   aus, steht die Seite trotzdem. Das Marker-Band zieht zuletzt auf. */
@keyframes kh-rise{
  from{opacity:0;transform:translateY(9px)}
  to{opacity:1;transform:none}
}
@keyframes kh-sweep{
  from{background-size:0% 1.06em}
  to{background-size:100% 1.06em}
}

.home .wm,.home h1,.home .lines,.home .rule,
.home .claim,.home .access,.home .invite,.home .contact,.home footer{
  animation:kh-rise 620ms cubic-bezier(.22,1,.36,1) backwards;
}
.home .wm      {animation-delay:40ms}
.home h1       {animation-delay:120ms}
.home .lines   {animation-delay:220ms}
.home .claim   {animation-delay:300ms}
.home .rule    {animation-delay:360ms}
.home .access  {animation-delay:400ms}
.home .invite  {animation-delay:450ms}
.home .contact {animation-delay:450ms}
.home footer   {animation-delay:540ms}

.home .m-key{animation:kh-sweep 520ms cubic-bezier(.22,1,.36,1) 700ms backwards}

@media (prefers-reduced-motion:reduce){
  .home .wm,.home h1,.home .lines,.home .rule,.home .access,
  .home .claim,.home .invite,.home .contact,.home footer,.home .m-key,
  .home .flow .pulse,.home .flow .donut .arc{
    animation:none;
  }
}

@media (max-width:900px){
  .home .flow{right:-21%;width:94vw;opacity:.76}
}

@media (max-width:720px){
  .home h1{max-width:none}
  .home .body-block{padding-block:clamp(40px,8vh,72px) 0}
  .home .flow{top:8%;right:-68%;width:160vw;height:92%;opacity:.54}
  .home .flow .fine{opacity:.35}
  .home .stage::before{top:92px}
  .home .stage::after{bottom:94px}
}

@media (max-width:430px){
  .home .stage{padding:26px 20px 24px}
  .home .body-block{padding-top:54px}
  .home h1{font-size:clamp(2.5rem,13vw,3.5rem)}
  .home .flow{right:-92%;width:195vw;opacity:.48}
  .home .entry-lock{right:12px;bottom:12px}
}

/* ————— Lenkraum: Zuläufe auf eine Sammelschiene ————— */
/* Gegenstück zur Zeichnung auf hypefrei.ai: dort verzweigen die Wege, hier laufen
   sie zusammen und geben an einer Stelle wieder ab. Gleiche Formensprache (§9),
   umgekehrte Aussage. Die Schiene trägt etwas mehr Gewicht als ein Zulauf, damit
   die Richtung lesbar bleibt. */
/* Zeichnung und Inhalt sitzen in einem gemeinsamen Rahmen, damit sie auf breiten
   Schirmen zusammen in der Mitte bleiben statt am linken Rand zu kleben. Die Buehne
   selbst bleibt vollbreit, sie traegt Hintergrund und die beiden Haarlinien. */
.lenkraum .rahmen{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1;
  width:100%;
  max-width:1440px;
  margin-inline:auto;
}

/* Drei Gruppen mit engem Innen- und weitem Aussenabstand: die drei Zeilen, der Satz
   zur Rollenteilung, und die beiden Fusszeilen unter der Haarlinie. Vorher standen
   hier fuenf verschiedene Abstaende ohne erkennbare Ordnung, und der Text zerfiel
   in Einzelzeilen. */
.lenkraum .lines{gap:10px}
.lenkraum .claim{margin-top:clamp(28px,4vh,36px)}
.lenkraum .rule{margin-top:clamp(32px,4.5vh,44px)}
.lenkraum .access{margin-top:20px}
.lenkraum .invite{margin-top:12px}

.lenkraum .flow{width:min(54vw,840px)}
.lenkraum .flow .bus{stroke:#5A5D62;stroke-width:1.4}

/* Der Satz, der die Rollenteilung trägt. Steht zwischen den Zeilen und der
   Haarlinie, deshalb eigenes Gewicht statt einer vierten gleichen Zeile. */
.lenkraum .claim{
  font-size:var(--fs-body-lg);
  font-weight:600;
  line-height:1.5;
  max-width:46ch;
  text-wrap:balance;
}

.lenkraum footer .von{color:inherit}

/* Die Sammelschiene sitzt bei 71 % der Zeichenbreite. Sie darf beim Verschmälern
   nicht aus dem Bild laufen, sonst zeigt die Zeichnung nur noch Zuläufe ins Nichts.
   Deshalb eigene Werte statt der Verschiebungen der hypefrei-Zeichnung. */
@media (max-width:900px){
  .lenkraum .flow{right:-8%;width:88vw;opacity:.7}
}
@media (max-width:720px){
  .lenkraum .flow{top:6%;right:-18%;width:104vw;height:90%;opacity:.55}
}
@media (max-width:600px){
  .lenkraum .flow{right:-30%;width:130vw;opacity:.45}
}
@media (max-width:430px){
  .lenkraum .flow{right:-62%;width:172vw;opacity:.3}
}