@font-face { font-family: "Geist"; font-weight: 100 900; font-display: swap; src: url("geist-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-display: swap; src: url("geist-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --tinte: #0e1a2b; --papier: #f4f0e8; --jade: #2b7a71;
  --it-grund: #070b14; --blau: #1f5bff; --blau-hell: #7c9dff;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--it-grund); color: var(--tinte); font: 400 1rem/1.6 "Geist", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }

/* Name oben, über beiden Hälften: links dunkel, rechts hell (mix-blend) */
.titel { position: fixed; z-index: 5; top: 26px; left: 0; right: 0; margin: 0; text-align: center; pointer-events: none; mix-blend-mode: difference; color: #fff; font: 500 .95rem/1 "Geist Mono", monospace; letter-spacing: .4em; text-transform: uppercase; }
.titel span { display: inline-block; padding-left: .5em; }

.weiche { display: flex; height: 100svh; }
.haelfte { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; padding: clamp(28px, 5vw, 80px); padding-bottom: clamp(72px, 12vh, 140px); overflow: hidden; text-decoration: none; transition: flex-grow 1.1s var(--ease); isolation: isolate; }
.weiche:hover .haelfte { flex-grow: .7; }
.weiche:hover .haelfte:hover, .haelfte:focus-visible { flex-grow: 1.45; }
.haelfte:focus-visible { outline: 3px solid var(--blau-hell); outline-offset: -6px; }
.inhalt { position: relative; z-index: 2; max-width: 30rem; }
.art { display: block; font: 400 .78rem/1 "Geist Mono", monospace; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 26px; }
h2 { margin: 0 0 22px; font-weight: 500; line-height: .98; letter-spacing: -.045em; }
.inhalt p { margin: 0 0 34px; max-width: 24rem; font-size: 1.05rem; opacity: .78; }
.los { display: inline-flex; align-items: center; gap: 14px; font-weight: 550; }
.los svg { width: 46px; height: 46px; padding: 12px; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--ease), background .4s, color .4s; }
.haelfte:hover .los svg { transform: translateX(6px) rotate(-45deg); }

/* Kanzlei */
.kanzlei { background: var(--papier); color: var(--tinte); }
.kanzlei h2 { font-weight: 500; font-size: clamp(2.8rem, 5.6vw, 6rem); }
.kanzlei .art { color: var(--jade); }
.kanzlei .los svg { background: var(--tinte); color: #fff; }
.kanzlei:hover .los svg { background: var(--jade); }
.bogen { position: absolute; z-index: 1; margin: 0; right: clamp(24px, 4vw, 64px); top: 12vh; width: clamp(130px, 13vw, 220px); aspect-ratio: 3 / 4.3; border-radius: 4px; overflow: hidden; transition: transform 1.1s var(--ease), opacity .8s; }
.bogen img { width: 100%; height: 115%; object-fit: cover; transition: transform 1.4s var(--ease); }
.kanzlei:hover .bogen img { transform: scale(1.08) translateY(-4%); }
.weiche:has(.it:hover) .bogen { transform: translateY(-12px); opacity: 0; }

/* IT */
.it { background: var(--it-grund); color: #e8ecf5; }
.it h2 { font-weight: 500; font-size: clamp(2.8rem, 5.6vw, 6rem); }
.it .art { color: var(--blau-hell); }
.it .los { font-family: "Geist Mono", monospace; font-weight: 400; }
.it .los svg { background: var(--blau); color: #fff; }
.punkte { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.it::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(60% 50% at 80% 10%, rgba(31, 91, 255, .28), transparent 70%); pointer-events: none; }

.fuss { position: fixed; z-index: 6; right: 24px; bottom: 20px; display: flex; gap: 18px; font-size: .78rem; }
.fuss a { color: #8a93a6; text-decoration: none; }
.fuss a:hover { color: #fff; }

/* Einstieg */
.inhalt > * { animation: rein 1.2s var(--ease) both; }
.inhalt > :nth-child(2) { animation-delay: .1s; } .inhalt > :nth-child(3) { animation-delay: .2s; } .inhalt > :nth-child(4) { animation-delay: .3s; }
.it .inhalt > * { animation-delay: calc(var(--d, 0s) + .15s); }
.bogen { animation: bogen-auf 1.6s var(--ease) .1s both; }
@keyframes rein { from { opacity: 0; transform: translateY(16px); } }
@keyframes bogen-auf { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (max-width: 760px) {
  body { overflow: auto; }
  .weiche { flex-direction: column; height: auto; }
  .haelfte { min-height: 50svh; padding: 76px 24px 40px; }
  .weiche:hover .haelfte, .weiche:hover .haelfte:hover { flex-grow: 1; }
  .bogen { width: 120px; right: 20px; top: 76px; translate: none; }
    .titel { top: 22px; }
  .fuss { position: static; justify-content: center; padding: 18px; background: var(--it-grund); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}