/* keinhype.ai — gemeinsame Basis für alle Seiten.
   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:"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-stage:#0F1012;
  --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;
}

.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;
}

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;
}

/* ————— 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 .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-sov{
  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 .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 .rule    {animation-delay:300ms}
.home .access  {animation-delay:340ms}
.home .invite  {animation-delay:400ms}
.home .contact {animation-delay:450ms}
.home footer   {animation-delay:520ms}

.home .m-sov{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 .invite,.home .contact,.home footer,.home .m-sov{
    animation:none;
  }
}

@media (max-width:720px){
  .home h1{max-width:none}
  .home .body-block{padding-block:clamp(40px,8vh,72px) 0}
}