/* Startseite: zwei Bereiche, zwei Handschriften. Jeder Bereich ist so
   gestaltet, wie die Seiten dahinter aussehen — die Startseite ist damit
   schon eine Vorschau auf das, was einen erwartet.

   tokens.css wird in index.html als eigenes <link> geladen, nicht per @import:
   der JBG-Bereich braucht die Tokens, und zwei verkettete Roundtrips wären auf
   der Startseite der falsche Preis dafür. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  background: #06070a;
  color: #e8edf7;
  font: 400 clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem)/1.6
        system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Für Suchmaschinen und Screenreader da, im Layout nicht. Nicht display:none —
   das nähme sie auch dem Screenreader weg. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.labs {
  display: flex;
  min-height: 100svh;
}

.side {
  position: relative;
  /* Basis 0, nicht 50%: bei Basis 50% füllen beide Hälften den Platz exakt
     aus, es bleibt kein freier Raum — und flex-grow verteilt nur freien Raum.
     Die Naht ließe sich dann nicht verschieben. Mit Basis 0 bestimmt allein
     das Grow-Verhältnis die Breite. */
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: clamp(1.75rem, 5vw, 4.5rem);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: flex-grow 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
              background-color 420ms ease;
}

.side + .side { border-left: 1px solid rgba(232, 237, 247, 0.14); }

.side-name { font-size: clamp(1.9rem, 1.2rem + 3.4vw, 4rem); line-height: 1.02;
             letter-spacing: -0.03em; margin: 0; }
.side-claim { margin: 0; max-width: 32ch; opacity: 0.72; }
.side-go { margin-top: 0.5rem; font-size: 0.82rem; letter-spacing: 0.1em;
           text-transform: uppercase; }

/* --- AMK: Thomas' Handschrift. Flach, sachlich, dunkel. --- */
.side--amk {
  background: #0e1116;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.side--amk .side-name { font-weight: 600; }
.side--amk .side-go { color: #7d8899; }
.side--amk::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
  background: #7d8899; opacity: 0.35;
}

/* --- JBG: Glas, Blau, Space Grotesk. --- */
.side--jbg {
  background:
    radial-gradient(40rem 30rem at 70% 20%, rgba(62, 155, 255, 0.10), transparent 65%),
    #07090e;
  font-family: var(--font-body);
}
.side--jbg .side-name { font-family: var(--font-display); font-weight: 700; }
.side--jbg .side-go { color: var(--index); font-family: var(--font-mono); }
.side--jbg::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(90deg, var(--index), transparent);
}

/* Beim Hovern bekommt der angesteuerte Bereich etwas mehr Raum. Nur wo es
   echtes Hover gibt — auf Touch würde er beim Antippen wegrutschen. */
@media (hover: hover) and (min-width: 841px) {
  .side:hover { flex-grow: 1.45; }
  .side--amk:hover { background: #11151b; }
}

.side:focus-visible { outline: 2px solid var(--index); outline-offset: -6px; }

/* Rechtslinks. Liegen über beiden Bereichen, damit sie unabhängig von der
   Trennlinie an derselben Stelle stehen. */
.legal-bar {
  position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  z-index: 5;
  display: flex; gap: 1.25rem;
  padding: 0.5rem 1.1rem; border-radius: 999px;
  background: rgba(7, 9, 14, 0.66);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(232, 237, 247, 0.12);
}
.legal-bar a {
  font: 400 0.74rem/1 var(--font-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #7d8899; text-decoration: none;
}
.legal-bar a:hover { color: #e8edf7; }
.legal-bar a:focus-visible { outline: 2px solid var(--index); outline-offset: 4px; border-radius: 3px; }

@media (max-width: 840px) {
  .labs { flex-direction: column; }
  .side { flex: 1 1 auto; min-height: 50svh; }
  .side + .side { border-left: 0; border-top: 1px solid rgba(232, 237, 247, 0.14); }
}

@media (prefers-reduced-motion: reduce) {
  .side { transition: none; }
}