/* Einstieg · One UI, Stufe loud. Links Marke und die drei Wege, rechts eine kleine
   3D-Szene (Krone und 44 in Kartonoptik). Die Karten sind sofort bedienbar, Three.js
   lädt erst danach. Ohne WebGL oder bei weniger Bewegung bleibt das Standbild. */
.hub {
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(100% - 32px, 1180px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
}
.hub-top { display: flex; justify-content: flex-end; padding: 18px 0 8px; }

.hub-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
  padding: 8px 0 56px;
}

.hub-logo { margin: 0; line-height: 0; }
.hub-logo img { width: min(100%, 460px); height: auto; }

.sub {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 0;
  color: var(--ou-primary-ink);
  font: 400 1.05rem/1.5 var(--ou-font-hand);
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.sub .icon { font-size: 1.1em; }
/* Umbruch nur zwischen den beiden Teilen, nie einzelnes Wort allein in der zweiten Zeile */
.sub-text .nowrap { white-space: nowrap; }

.cards { display: grid; gap: 12px; margin-top: 34px; }
.nav-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 2px;
  padding: 16px 18px;
  color: var(--ou-text);
  text-decoration: none;
  animation: gh-rise var(--ou-dur-slow) var(--ou-ease) backwards;
  animation-delay: calc(var(--i, 0) * 70ms + 80ms);
  transition: border-color var(--ou-dur) var(--ou-ease), background-color var(--ou-dur) var(--ou-ease);
}
.nav-card > .icon:first-child {
  grid-row: 1 / span 2;
  width: 46px;
  height: 46px;
  padding: 12px;
  border-radius: var(--ou-radius-sm);
  background: color-mix(in srgb, var(--ou-primary) 14%, transparent);
  color: var(--ou-primary-ink);
}
.nav-card .t { font: 400 2rem/1 var(--ou-font-display); letter-spacing: .01em; text-transform: uppercase; }
.nav-card .d { color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.nav-card .nav-arrow {
  grid-row: 1 / span 2;
  grid-column: 3;
  color: var(--ou-primary-ink);
  font-size: 1.35rem;
  transition: transform var(--ou-dur) var(--ou-ease);
}
.nav-card:hover { border-color: var(--ou-primary); background: var(--ou-surface-2); }
.nav-card:hover .nav-arrow { transform: translateX(4px); }
.nav-card:focus-visible { outline: 2px solid var(--ou-focus); outline-offset: 3px; }

/* 3D-Fenster: Karton auf Papier, unten gerissen, oben ein Streifen Klebeband */
.hub-visual { position: relative; width: 100%; max-width: 540px; margin: 0; justify-self: center; aspect-ratio: 1; }
.hub-visual__inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius);
  background: var(--ou-surface);
}
.hub-poster {
  position: absolute;
  inset: 14% 16% 16%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5%;
  transition: opacity 600ms var(--ou-ease);
}
.hub-poster .p-crown { width: 50%; height: auto; transform: translateX(3%) rotate(-4deg); }
.hub-poster .p-44 { width: 78%; height: auto; }
.hub-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms var(--ou-ease); }
.hub-visual.is-3d canvas { opacity: 1; }
.hub-visual.is-3d .hub-poster { opacity: 0; }
.hub-visual .ou-tape { z-index: 2; }

@media (max-width: 860px) {
  .hub-main { grid-template-columns: 1fr; gap: 40px; padding-top: 0; }
  .hub-logo img { width: min(100%, 360px); }
  .hub-visual { max-width: 360px; }
}