/* Hero „Ideen. Code. Produkte.“ mit 3D-Projekt-Würfel.
   Desktop: Bühne 1440 x 810 (Prototyp-Koordinaten), per --hero-scale auf das
   Fenster skaliert, beim Scrollen angeheftet. Phasen über data-phase am .hero:
   intro -> cube. Der Würfel ist in beiden Phasen DASSELBE Element und wandert
   per transform (1,5 s) von rechts in die Mitte.
   Brauchen die Texte mehr Platz als im Prototyp (Nutzerstile mit größeren
   Textabständen, WCAG 1.4.12), wächst die Bühne nach unten, siehe „Wachsende Bühne“.
   Mobil (<= 900 px): normaler Fluss, startet direkt im Würfel-Zustand. */

@keyframes hero-line-up {
  from {
    transform: translateY(105%);
  }
  to {
    transform: none;
  }
}

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hero-img-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(24px);
    filter: blur(14px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes hero-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes hero-flow {
  from {
    stroke-dashoffset: 460;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes hero-glow {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.08);
  }
}

@keyframes hero-draw-line {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes hero-scroll-line {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  45% {
    transform: scaleY(1);
    transform-origin: top;
  }
  55% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

@keyframes hero-dot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--pulse);
  }
  50% {
    box-shadow: 0 0 0 7px var(--pulse-0);
  }
}

@keyframes hero-panel-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-hint-bob {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(6px);
  }
}

/* ---------- Bühne ---------- */

/* Scrollraum der angehefteten Bühne: Intro/Würfel (--cube-room), danach die
   Footer-Phase (--footer-room). Die Bühne bleibt bis zum Seitenende angeheftet; der
   Kontaktbereich blendet an Ort und Stelle ein (wie im Handoff-Prototyp). */
.hero {
  --cube-room: 70vh;
  --footer-room: 60vh;
  position: relative;
  height: calc(100vh + var(--cube-room));
}

:root.js .hero {
  height: calc(100vh + var(--cube-room) + var(--footer-room));
}

/* Schwelle der Footer-Phase (home.js liest offsetTop). */
.hero-footer-at {
  position: absolute;
  left: 0;
  top: calc(var(--cube-room) + 24px);
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Die Bühne (mit Würfel-Ebene) liegt über dem Footer. position: sticky bildet einen
   eigenen Stapelkontext - ohne z-index hier malte der später folgende Footer über den
   Würfel. In der Footer-Phase lässt die Bühne Klicks durch; nur der Würfel bleibt greifbar. */
.hero-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 100vh;
  overflow: hidden;
}

.hero[data-phase='footer'] .hero-sticky {
  pointer-events: none;
}

.hero-canvas {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1440px;
  height: 810px;
  transform: translateX(-50%) scale(var(--hero-scale, 1));
  transform-origin: 50% 0;
}

.hero-canvas > * {
  position: absolute;
}

/* In der Footer-Phase blendet die Hero-Bühne aus (sie scrollt ohnehin weg). Das ist
   gefahrlos, weil der 3D-Würfel nicht mehr darin liegt (siehe .cube-layer). */
.hero-canvas {
  transition:
    opacity 0.5s ease 0.15s,
    visibility 0s;
}

/* ---------- Würfel-Ebene (Desktop fixiert, gleiches Raster wie die Bühne) ---------- */

.cube-layer {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.cube-canvas {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1440px;
  height: 810px;
  transform: translateX(-50%) scale(var(--hero-scale, 1));
  transform-origin: 50% 0;
}

.cube-canvas > * {
  position: absolute;
}

/* ---------- Intro-Bild ---------- */

.hero-halo {
  left: 430px;
  top: 110px;
  width: 620px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo-a), var(--halo-b) 55%, var(--ground-0));
  pointer-events: none;
  animation: hero-glow 6s ease-in-out infinite;
  transition: transform 1.5s var(--ease-move);
}

.hero-wave {
  left: 518px;
  top: 93px;
  width: 889px;
  height: 512px;
  transition:
    opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
    filter 1s ease,
    transform 1.5s var(--ease-move);
}

.hero-wave-in {
  position: relative;
  width: 889px;
  height: 512px;
  animation: hero-img-in 1.6s var(--ease-out) both 0.3s;
}

.hero-floater {
  position: relative;
  width: 889px;
  height: 512px;
  animation: hero-float 7s ease-in-out infinite 1.9s;
}

/* Block statt inline: keine Grundlinien-Lücke unter dem Bild. */
.hero-picture {
  display: block;
  width: 550px;
  height: 512px;
}

.hero-img {
  width: 550px;
  height: 512px;
  filter: var(--hero-img-filter);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 8%),
    linear-gradient(to bottom, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 8%),
    linear-gradient(to bottom, #000 88%, transparent 100%);
  mask-composite: intersect;
}

/* Beschriftung in der Glaswolke: früher ins Bild eingebrannt (nur Englisch), jetzt
   übersetzter Seitentext an derselben Stelle. Er schwebt mit dem Bild (.hero-floater). */
.hero-wave-words {
  position: absolute;
  left: 103px;
  top: 140px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 19px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--face-meta);
  pointer-events: none;
}

.hero-wave-words::after {
  content: '';
  width: 30px;
  height: 1px;
  margin-top: 14px;
  background: currentColor;
}

.hero-flow {
  position: absolute;
  left: 48px;
  top: 14px;
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-flow .flow {
  stroke-dasharray: 110 350;
  animation: hero-flow 2.6s linear infinite 1.8s;
}

.hero-flow .flow2 {
  stroke-dasharray: 45 415;
  animation: hero-flow 2.6s linear infinite 2.6s;
}

.hero-wave .ai-disclosure {
  left: 44px;
  top: 440px;
}

/* Hover-Zone über der Glaswolke (Maus, Desktop, Intro): löst den Eintritt in die
   Würfelphase aus. Rein geometrisch (home.js vergleicht die Zeigerposition), fängt
   also keine Klicks ab. Unterkante 400 px: das KI-Kennzeichen (ab 440 px) und sein
   nach oben aufklappender Tooltip (ca. 410–434 px) liegen bewusst außerhalb. */
.hero-hoverzone {
  position: absolute;
  left: 40px;
  top: 10px;
  width: 470px;
  height: 390px;
  pointer-events: none;
}

.hero-hotspot {
  all: unset;
  position: absolute;
  left: 507px;
  top: 166px;
  width: 330px;
  height: 330px;
  border-radius: 28px;
  cursor: pointer;
}

.hero-hotspot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Würfel ----------
   Intro (Desktop): Würfel und Boden teilen dieselbe Transform. Sie hält die gesamte
   Würfelhülle - auch bei voller Zeigerneigung und Idle-Schwingung - frei von beiden
   Eck-Texten: Oberkante ca. 114 px (Eck-Text oben endet bei 90 px), Unterkante ca.
   579 px (Eck-Text unten beginnt bei 604 px). Gemessen im 1440x810-Raster, siehe
   Report 2026-09-28. Würfel- und Footer-Phase sind davon unabhängig. Die Messung gilt
   für die Standardtypografie; in einer gewachsenen Bühne rückt der untere Eck-Text
   nur weiter vom Würfel weg. */

.hero-floor {
  left: 478px;
  top: 509px;
  width: 400px;
  height: 70px;
  transform-origin: 200px -170px;
  transform: translate(512px, -10px) scale(1);
  transition: transform 1.5s var(--ease-move);
  animation: hero-fade-in 1.4s ease-out both 0.8s;
}

.hero .cube-stage {
  left: 528px;
  top: 189px;
  transform-origin: 150px 150px;
  transform: translate(512px, -10px) scale(1);
  pointer-events: none;
  transition: transform 1.5s var(--ease-move);
  animation: hero-fade-in 1.4s ease-out both 0.6s;
}

/* ---------- Texte links ---------- */

.hero-head {
  left: 72px;
  top: 172px;
  width: 560px;
  transform-origin: 0 0;
  transition: transform 1.5s var(--ease-move);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 90%;
  font-size: 100px;
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.hero-title .mask {
  display: block;
  overflow: hidden;
  padding-bottom: 4px;
}

.hero-title .line {
  display: block;
  animation: hero-line-up 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero-title .l1 {
  animation-delay: 0.25s;
}
.hero-title .l2 {
  animation-delay: 0.4s;
}
.hero-title .l3 {
  animation-delay: 0.55s;
}

.hero-intro {
  left: 72px;
  top: 468px;
  width: 420px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  transition:
    opacity 0.6s ease 0.8s,
    transform 0.7s ease 0.8s;
}

.hero-lead {
  width: 400px;
  font-size: 16.5px;
  line-height: 1.4;
  color: var(--ink-body);
  animation: hero-fade-up 0.9s ease-out both 0.9s;
}

.hero-cta-wrap {
  animation: hero-fade-up 0.9s ease-out both 1.1s;
}

.hero-cubecopy {
  left: 72px;
  top: 352px;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity 0.25s ease,
    transform 0.3s ease,
    visibility 0s 0.3s;
}

.hero-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-body);
}

.hero-hint svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  animation: hero-hint-bob 1.8s ease-in-out infinite;
}

.hero-hint-mobile {
  display: none;
}

.hero-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Hinweis für nicht angemeldete Besucher (von script.js eingeblendet) */
.hero-auth-hint {
  max-width: 300px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.hero-auth-hint a {
  color: var(--ink2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Abgelehnter Zugangslink: Meldung in voller Textfarbe statt gedämpft */
.hero-auth-hint.is-rejected {
  color: var(--ink2);
}

/* Ziel eines gesperrten "Details ansehen": Fokus per Tastatur sichtbar, kurzes Aufleuchten */
.hero-auth-hint:focus {
  outline: none;
}

.hero-auth-hint:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.hero-auth-hint.is-flagged {
  animation: auth-hint-flag 1.4s ease;
}

@keyframes auth-hint-flag {
  0%,
  45% {
    color: var(--ink);
  }
}

.hero-counter {
  margin-left: 8px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--ink-muted);
}

/* ---------- Panel rechts ---------- */

.hero-panels {
  left: 1000px;
  top: 236px;
  width: 360px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0s 0.25s;
}

.hero-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: hero-panel-in 0.6s var(--ease-out) both;
}

.hero-panel-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--ink-muted);
}

.hero-panel-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 90%;
  font-size: 46px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  hyphens: manual;
  /* Schutz bei vergrößerten Textabständen; ohne Überlauf wirkungslos. */
  overflow-wrap: break-word;
}

.hero-panel-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-body);
}

.hero-panel-stack {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.hero-panel-link {
  margin-top: 6px;
}

/* ---------- Eck-Labels, Tabs, Scroll-Hinweis ---------- */

.hero-corner {
  display: flex;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.26em;
  line-height: 14px;
  color: var(--ink-muted);
  animation: hero-fade-in 1s ease-out both 1.4s;
  transition: opacity 0.5s ease;
}

.hero-corner-text {
  white-space: pre-line;
}

.hero-corner-rule {
  width: 20px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: hero-draw-line 0.8s ease-out both 1.8s;
}

.hero-corner--top {
  right: 70px;
  top: 48px;
  align-items: flex-end;
}

.hero-corner--top .hero-corner-rule {
  margin-bottom: 6px;
  transform-origin: right;
}

.hero-corner--bottom {
  left: 1260px;
  top: 604px;
  flex-direction: column;
  gap: 10px;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--ink-subtle);
}

.hero-tabs {
  left: 72px;
  top: 700px;
  width: 960px;
  animation: hero-fade-up 0.9s ease-out both 1.3s;
}

.hero-tablist {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.hero-tab {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 28px 8px 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 14px;
  color: var(--ink-subtle);
  cursor: pointer;
  transition: color 0.3s;
}

.hero-tab:hover,
.hero-tab[aria-selected='true'] {
  color: var(--ink2);
}

.hero-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.hero-tabbar {
  position: relative;
  margin-top: 6px;
  height: 1px;
}

.hero-tabbar-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 92px;
  height: 1.5px;
  background: var(--ink2);
  transform: translateX(calc(var(--face, 0) * 160px));
  transition: transform 0.7s cubic-bezier(0.6, 0, 0.2, 1);
}

.hero-scroll {
  left: 1218px;
  top: 722px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: hero-fade-in 1s ease-out both 1.6s;
  transition: opacity 0.5s ease;
}

.hero-scroll-row {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  color: var(--ink-muted);
}

.hero-scroll-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink2);
  animation: hero-dot-pulse 2.4s ease-out infinite 2s;
}

.hero-scroll-line {
  width: 9px;
  height: 30px;
  display: flex;
  justify-content: center;
}

.hero-scroll-line span {
  width: 1px;
  height: 30px;
  background: var(--ink-muted);
  animation: hero-scroll-line 2.4s ease-in-out infinite 2s;
}

/* ---------- Phase: Würfel ---------- */

.hero:is([data-phase='cube'], [data-phase='footer']) .hero-wave {
  opacity: 0;
  filter: blur(10px);
  transform: translateX(-40px) scale(0.96);
  pointer-events: none;
}

.hero:is([data-phase='cube'], [data-phase='footer']) .hero-wave * {
  visibility: hidden;
  transition: visibility 0s 1s;
}

.hero:is([data-phase='cube'], [data-phase='footer']) .hero-head {
  transform: scale(0.52);
}

.hero:is([data-phase='cube'], [data-phase='footer']) .hero-intro {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition:
    opacity 0.4s ease,
    transform 0.5s ease,
    visibility 0s 0.5s;
}

.hero:is([data-phase='cube'], [data-phase='footer']) .hero-cubecopy {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.6s ease 0.9s,
    transform 0.7s ease 0.9s,
    visibility 0s 0.9s;
}

.hero:is([data-phase='cube'], [data-phase='footer']) .cube-stage,
.hero:is([data-phase='cube'], [data-phase='footer']) .hero-floor {
  transform: none;
  pointer-events: auto;
}

.hero:is([data-phase='cube'], [data-phase='footer']) .hero-floor {
  pointer-events: none;
}

.hero:is([data-phase='cube'], [data-phase='footer']) .hero-panels {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.6s ease 1.2s,
    visibility 0s 1.2s;
}

/* ---------- Phase: Footer (Desktop, beim Weiterscrollen) ----------
   Derselbe Würfel fährt aus der Projektmitte nach rechts in die Lücke des Footers
   (Handoff „Dritte Phase“: translate(432px, -40px) scale(.84), 1,5 s). Zurück in die
   Würfelphase läuft dieselbe Transition in Gegenrichtung. */

.hero[data-phase='footer'] .cube-stage,
.hero[data-phase='footer'] .hero-floor {
  transform: translate(432px, -40px) scale(0.84);
}

.hero[data-phase='footer'] .cube-stage {
  pointer-events: auto;
}

.hero[data-phase='footer'] .hero-canvas {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0s 0.35s;
}

/* ---------- Wachsende Bühne (Textabstände, WCAG 1.4.12) ----------
   home.js misst die Eigenhöhen der Textblöcke und setzt data-stage-grow nur, wenn sie
   nicht in die Prototyp-Koordinaten passen. Dann folgt jeder Block dem darüber, die
   untere Gruppe (Eck-Text, Tabs, Scroll-Hinweis) rückt nach, die Bühne wird höher und
   ihr Überhang ist per zusätzlichem Scrollweg erreichbar (--hero-lift). Die Skalierung
   bleibt unverändert. Unter dem Attribut ändern die Regeln nur Lage und Beschnitt, nie
   die Maße gemessener Blöcke - so kann die Messung nicht an ihren eigenen Folgen kippen.
   Die Hebung nutzt die eigene translate-Eigenschaft; alle transform-Übergänge bleiben. */

@media (min-width: 901px) {
  :root.js[data-stage-grow] .hero {
    height: calc(
      100vh + var(--cube-room) + var(--footer-room) + var(--hero-overflow, 0px) +
        var(--footer-overflow, 0px)
    );
  }

  :root.js[data-stage-grow] .hero-footer-at {
    top: calc(var(--cube-room) + 24px + var(--hero-overflow, 0px));
  }

  /* clip statt hidden: kein interner Scrollversatz, wenn der Browser Fokus einblendet */
  :root.js[data-stage-grow] .hero-sticky {
    overflow: clip;
  }

  :root.js[data-stage-grow] .hero-canvas {
    height: var(--hero-stage-h, 810px);
    translate: 0 calc(-1 * var(--hero-lift, 0px));
  }

  :root.js[data-stage-grow] .hero-intro {
    top: calc(468px + var(--hero-intro-shift, 0px));
  }

  :root.js[data-stage-grow] .hero-cubecopy {
    top: calc(352px + var(--hero-copy-shift, 0px));
  }

  :root.js[data-stage-grow] .hero-corner--bottom {
    top: calc(604px + var(--hero-bottom-shift, 0px));
  }

  :root.js[data-stage-grow] .hero-tabs {
    top: calc(700px + var(--hero-bottom-shift, 0px));
  }

  :root.js[data-stage-grow] .hero-scroll {
    top: calc(722px + var(--hero-bottom-shift, 0px));
  }

  /* Reicht der Titel bis auf die Höhe des KI-Kennzeichens, rücken Kennzeichen und
     Hover-Zone rechts neben den Titel (--hero-title-clear, 0 wenn nicht nötig). */
  :root.js[data-stage-grow] .hero-wave .ai-disclosure {
    left: calc(44px + var(--hero-title-clear, 0px));
  }

  :root.js[data-stage-grow] .hero-hoverzone {
    left: calc(40px + var(--hero-title-clear, 0px));
    width: max(0px, calc(470px - var(--hero-title-clear, 0px)));
  }

  /* Die fixierte Würfel-Ebene hebt sich mit Bühne und Footer. In der Footer-Phase gilt
     nur noch die Footer-Hebung; der Ausgleich läuft mit der Würfelfahrt (1,5 s). */
  :root.js[data-stage-grow] .cube-layer {
    translate: 0 calc(-1 * (var(--hero-lift, 0px) + var(--footer-lift, 0px)));
  }

  :root.js[data-stage-grow] .cube-canvas {
    transition: translate 1.5s var(--ease-move);
  }

  :root.js[data-stage-grow] .hero[data-phase='footer'] .cube-canvas {
    translate: 0 var(--hero-overflow, 0px);
  }

  /* Breitere Titelzeilen nicht seitlich abschneiden; vertikal bleibt die Maske für die
     Einblendung (hero-line-up) erhalten. */
  @supports (overflow: clip) {
    :root.js[data-stage-grow] .hero-title .mask {
      overflow-x: visible;
      overflow-y: clip;
    }
  }
}

/* ---------- Mobil ---------- */

@media (max-width: 900px) {
  .hero,
  :root.js .hero {
    height: auto;
  }

  /* Mobil trägt .hero-sticky die Flex-Spalte; Bühne und Würfel-Ebene lösen sich per
     display: contents auf, damit der Würfel zwischen Überschrift und Hinweis steht. */
  .hero-sticky {
    position: relative;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 96px 24px 40px;
  }

  /* Angemeldet: Der feste Header hat mobil eine zweite Zeile (Anmeldestatus). */
  :root:has(#auth-status) .hero-sticky {
    padding-top: 136px;
  }

  .hero-canvas,
  .cube-layer,
  .cube-canvas {
    display: contents;
  }

  .hero-canvas > *,
  .cube-canvas > * {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
  }

  .hero-wave,
  .hero-corner,
  .hero-scroll,
  .hero-replay {
    display: none;
  }

  .hero-halo {
    position: absolute;
    left: -40px;
    top: 180px;
    width: 470px;
    height: 420px;
  }

  .hero-head,
  .hero:is([data-phase='cube'], [data-phase='footer']) .hero-head {
    order: 1;
    width: auto;
    transform: none;
  }

  .hero-title {
    font-size: 26px;
  }

  /* Der Einleitungstext steht mobil (und bei starkem Zoom) direkt unter dem Titel. Den
     CTA ersetzen die unmittelbar folgenden Projekt-Tabs und der Menülink „Projekte“. */
  .hero-intro,
  .hero:is([data-phase='cube'], [data-phase='footer']) .hero-intro {
    display: contents;
    visibility: visible;
  }

  .hero-lead {
    order: 1;
    width: auto;
    margin-top: 16px;
    font-size: 15px;
  }

  .hero-cta-wrap {
    display: none;
  }

  .hero .cube-stage,
  .hero:is([data-phase='cube'], [data-phase='footer']) .cube-stage {
    --cube: 220px;
    left: auto;
    top: auto;
    order: 2;
    align-self: center;
    margin-top: 24px;
    transform: none;
    pointer-events: auto;
  }

  .hero-floor,
  .hero:is([data-phase='cube'], [data-phase='footer']) .hero-floor {
    position: absolute;
    left: 50%;
    top: 330px;
    width: 280px;
    height: 50px;
    transform: translateX(-50%);
  }

  .hero-cubecopy,
  .hero:is([data-phase='cube'], [data-phase='footer']) .hero-cubecopy {
    display: contents;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .hero-hint {
    order: 3;
    justify-content: center;
    margin-top: 68px;
    font-size: 9.5px;
    letter-spacing: 0.26em;
    color: var(--ink-muted);
  }

  .hero-hint svg {
    display: none;
  }

  .hero-hint-desktop {
    display: none;
  }

  .hero-hint-mobile {
    display: inline;
  }

  .hero-tabs {
    order: 4;
    width: auto;
    margin-top: 20px;
    border-bottom: 1px solid var(--hair);
  }

  .hero-tab {
    align-items: center;
    padding: 12px 0;
    font-size: 11px;
    font-weight: 600;
  }

  .hero-tab-label {
    display: none;
  }

  .hero-tabbar {
    margin-top: 0;
  }

  .hero-tabbar-line {
    width: calc(100% / 6);
    transform: translateX(calc(var(--face, 0) * 100%));
  }

  .hero-panels,
  .hero:is([data-phase='cube'], [data-phase='footer']) .hero-panels {
    order: 5;
    width: auto;
    min-height: 200px;
    margin-top: 24px;
    opacity: 1;
    visibility: visible;
  }

  .hero-panel-title {
    font-size: 34px;
  }

  .hero-panel-stack {
    display: none;
  }

  .hero-controls {
    order: 6;
    margin-top: 24px;
  }

  .hero-auth-hint {
    order: 7;
    max-width: none;
    margin-top: 16px;
  }
}