/* Hero. Tokens aus tokens.css, Grundstile aus base.css. */
body { font: 400 var(--t-hero-text)/1.45 var(--schrift); }

a { text-decoration: none; }
a:focus-visible { outline: 1px solid var(--grafit); outline-offset: 3px; }

.auf-dunkel { color: var(--papier); }

.buchstabe { display: inline-block; white-space: pre; }

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-hoehe);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 30;
}
.nav::before { content: ''; position: absolute; inset: 0; background: var(--papier); opacity: .92; z-index: -1; }
.nav-name { font: 400 var(--t-hero-text)/1 var(--schrift); }
.nav-kopf { display: flex; align-items: center; }
.nav-versionen { display: flex; align-items: center; gap: 12px; margin-left: 24px; }
.nav-slot { visibility: hidden; }
.nav-v4 { opacity: 0; white-space: nowrap; }
.punkt { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); margin-right: 6px; vertical-align: middle; }
.nav.zwei { height: var(--nav-hoehe-zwei); align-items: flex-start; padding-top: 14px; }
.nav.zwei .nav-kopf { flex-direction: column; align-items: flex-start; gap: 7px; }
.nav.zwei .nav-versionen { margin-left: 0; }
.nav-links { display: flex; gap: 20px; }

.buehne-lang { position: relative; z-index: 1; min-height: 100svh; }
.hero-an .buehne-lang { height: 1000vh; }
.buehne { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.puzzle { position: absolute; left: 0; top: 0; }

.gummi {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 20;
}
.gummi-pfad { fill: none; stroke: var(--grafit-60); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gummi-griff { fill: var(--grafit); }

.huelle { position: fixed; inset: 0; pointer-events: none; z-index: 21; opacity: 0; }
.eck { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
.akzent { position: absolute; left: 0; top: 0; pointer-events: none; transform-origin: 0 0; will-change: transform, opacity; }

.anzeige { position: fixed; left: 0; top: 0; z-index: 21; pointer-events: none; white-space: nowrap; will-change: transform; }

.kachel { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.kachel .innen { position: absolute; overflow: hidden; }
.kachel .bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kachel .etikett.unten { position: absolute; left: 8px; bottom: 6px; }
.kachel .dreieck {
  position: absolute;
  right: 0;
  bottom: 0;
  background: var(--emerald);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.kachel .kreis {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--coral);
}
.kachel .raute {
  position: absolute;
  left: 9px;
  bottom: 9px;
  width: 12px;
  height: 12px;
  background: var(--emerald);
  transform: rotate(45deg);
}
.f-grafit { background-color: var(--grafit); }
.kachel-papier .innen, .kachel-fehlt .innen { background: var(--papier); border: 1px solid var(--grafit-60); }
.kachel-text .innen { padding: 8px; font: 400 var(--t-etikett)/1.45 var(--mono); }
.kachel.ring { background: var(--grafit-60); }
.kachel.ring .innen { border: none; }
.satz-a { display: block; }
.stirn-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; font: 400 var(--t-etikett)/1.45 var(--mono); opacity: 0; pointer-events: none; }
.stand { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.kachel-fehlt .innen { display: flex; align-items: center; justify-content: center; }
.balken-feld {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 8px;
}
.balken { width: 2px; background: var(--grafit); }

.luecke { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.luecke svg { position: absolute; left: 0; top: 0; overflow: visible; }
.luecke line { stroke: var(--grafit-60); stroke-width: 1; stroke-dasharray: 5 3; shape-rendering: crispEdges; }
.luecke .griff { position: absolute; width: 5px; height: 5px; background: var(--grafit); }
.klammer { position: absolute; top: 0; width: 8px; height: 16px; font: 400 13px/16px var(--mono); text-align: center; }

.versionen { display: contents; }
.ohne-js { position: absolute; left: 16px; top: calc(var(--nav-hoehe) + var(--r3)); max-width: 40ch; z-index: 2; }
.ohne-js a { margin-right: 12px; }
.hero-an .ohne-js { display: none; }
.version, .version-etikett { position: fixed; left: 0; top: 0; z-index: 25; will-change: transform, opacity; opacity: 0; visibility: hidden; }
.version-etikett { pointer-events: none; white-space: nowrap; }
.version { display: block; width: 56px; height: 56px; }
.version.klein { width: 44px; height: 44px; }
.version-rand {
  position: absolute;
  inset: 0;
  background: var(--papier);
  border: 1px solid var(--grafit-60);
  transform-origin: 50% 50%;
}
.version-rand::after { content: ''; position: absolute; inset: -1px; border: 1px solid var(--grafit); opacity: 0; }
.version-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.da { visibility: visible; }

@media (hover: hover) {
  .version:not(.navi):hover .version-rand { transform: rotate(4deg); }
  .version:not(.navi):hover .version-rand::after { opacity: 1; }
  .version:not(.navi):hover .version-text { transform: translate(-50%, -50%) rotate(4deg); }
  .version.navi:hover .version-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .version-rand, .version-text { transition: transform .2s; }
  .version-rand::after { transition: opacity .2s; }
}
.version:focus-visible .version-rand::after { opacity: 1; }
.version.fliegt { z-index: 40; pointer-events: none; }
.version.navi { z-index: 40; width: auto; height: auto; }
.version.navi .version-rand { display: none; }
.version.navi .version-text { position: static; transform: none; display: block; }

.lb-scheibe { position: absolute; opacity: 0; pointer-events: none; will-change: transform, opacity; transform-origin: 50% 50%; }
.lb-scheibe svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.lb-aussen { fill: var(--papier); stroke: var(--grafit-18); stroke-width: 1; }
.lb-mittelfeld { fill: var(--papier); stroke: var(--grafit-60); stroke-width: 1; }
.lb-wand { fill: none; stroke: var(--grafit-60); stroke-linecap: round; stroke-linejoin: round; }
.lb-rille { fill: none; stroke: var(--papier); stroke-linecap: round; stroke-linejoin: round; }
.lb-spur { fill: none; stroke: var(--coral); stroke-linecap: butt; stroke-linejoin: round; }
.lb-blatt { position: absolute; left: 0; top: 0; display: block; border-radius: 50%; pointer-events: none; will-change: transform; }
.lb-blatt.aktiv { pointer-events: auto; }
.lb-blatt-bild {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--grafit-60);
  background-size: cover;
  background-position: center;
}
.lb-blatt-bild::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--grafit); opacity: 0; }
.lb-blatt-etikett { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; pointer-events: none; }
.lb-zentrum { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--emerald); }
.lb-stein { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--grafit); opacity: 0; will-change: transform; }
.lb-stein::after { content: ''; position: absolute; left: 42%; top: 42%; width: 16%; height: 16%; border-radius: 50%; background: var(--papier); }
.lb-blatt:focus-visible .lb-blatt-bild::after { opacity: 1; }
@media (hover: hover) {
  .lb-blatt.aktiv:hover .lb-blatt-bild { transform: rotate(6deg); }
  .lb-blatt.aktiv:hover .lb-blatt-bild::after { opacity: 1; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lb-blatt-bild { transition: transform .2s; }
  .lb-blatt-bild::after { transition: opacity .2s; }
}
.kachel.oben { z-index: 3; }

.klarheit { position: relative; }
.band { position: absolute; left: 0; width: 100%; z-index: 1; will-change: clip-path; }
.band-coral { background: var(--coral); }
.band-emerald { background: var(--emerald); }
.flaeche { position: relative; z-index: 3; margin-top: 80vh; width: fit-content; max-width: 36ch; }
.flaeche .etikett { display: block; margin-bottom: 8px; }
.flaeche p { margin: 0; line-height: 1.55; }
.flaeche a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.arbeiten, .kontaktwege { list-style: none; margin: 0; padding: 0; }
.arbeiten li { margin: 0 0 10px; line-height: 1.5; }
.arbeiten a { display: block; font-family: var(--mono, "Geist Mono"), monospace; font-size: var(--t-etikett); letter-spacing: var(--etikett-spur); text-transform: uppercase; text-decoration: none; margin-bottom: 2px; }
.kontaktwege { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.f-l { margin-left: 10%; }
.f-r { margin-left: 38%; }
.fuss {
  position: relative;
  z-index: 3;
  margin-top: 40vh;
  padding: 16px 16px 24px;
  display: flex;
  justify-content: space-between;
  font: 400 var(--t-etikett)/1.3 var(--mono);
}
.fuss-links { display: flex; gap: 20px; }
.gummi-fuellung { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; display: none; }
.fuell-coral { fill: var(--coral-hell); }
.fuell-emerald { fill: var(--emerald-hell); }
.gummi-pfad.papier { stroke: var(--papier); }
.gummi-griff.papier { fill: var(--papier); }
#ueber .kopf { position: absolute; width: 170px; left: calc(100% + 40px); top: -24px; aspect-ratio: 3 / 4; transform: rotate(-3deg); pointer-events: none; background: var(--papier); }
.kopf-bild { display: block; width: 100%; height: 100%; mix-blend-mode: multiply; filter: brightness(1.08); }
.auge { position: absolute; inset: 0; }
.iris { position: absolute; display: block; will-change: transform; }
.auge-l { clip-path: polygon(27.63% 39.09%, 29.47% 37.98%, 31.77% 37.22%, 34.07% 36.95%, 36.37% 37.02%, 38.67% 37.81%, 40.98% 39.19%, 41.67% 39.64%, 39.60% 40.23%, 37.29% 40.57%, 34.53% 40.75%, 31.77% 40.50%, 29.47% 39.99%); }
.auge-r { clip-path: polygon(58.01% 39.88%, 59.85% 38.85%, 62.15% 37.81%, 64.92% 37.36%, 67.68% 37.47%, 69.98% 37.98%, 72.28% 39.19%, 72.74% 39.54%, 70.90% 40.40%, 68.60% 41.02%, 65.84% 41.26%, 63.08% 41.09%, 60.31% 40.57%); }
.auge-l .iris { left:31.58%;top:36.67%;width:5.89%;height:4.42%; }
.auge-r .iris { left:62.34%;top:37.09%;width:5.89%;height:4.42%; }
.akzent-papier { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.akzent-papier-form { fill: var(--papier); }
.akzent-dreieck { position: absolute; left: 0; top: 0; display: none; background: var(--emerald); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform-origin: 0 0; will-change: transform; }
@media (max-width: 680px) {
  .f-l, .f-r { margin-left: 16px; max-width: calc(100% - 32px); }
  #ueber .kopf { width: 112px; left: auto; right: 0; top: -170px; transform: rotate(3deg); }
}