/*
 * Vorlage „Würfel“ (Mirko 2026-10-08) - gilt nur unter :root[data-layout="cube"] (includes/designs.php).
 * Vorbild: docs/prototypes/wuerfel_navigation/wuerfel-navigation.html. Weiß bzw. Anthrazit, dunkelgraue Schrift mit
 * feinem Grafit-Halo, keine Reliefs, keine Karten-Schatten - das ganze Tool wird über die Tokens aus app.css schlicht.
 * Schrift: die vorhandene --font-ui (Quicksand aus dem Prototyp wäre ein Download - nur nach Freigabe, dann zentral in fonts.css).
 */

/* Farb-Tokens (weiß/anthrazit, keine Reliefs) stehen seit dem UI/UX-Designsystem (2026-10-08) im Stil „Pure Minimal“
   (assets/css/style_minimal.css, data-design="minimal") - so lässt sich der Würfel auch mit anderen Stilen kombinieren. */

/* ---------- Schlanke Kopfzeile: links Name, rechts Verwaltung, UI/UX, Mikrofon, To-do, Hilfe, Person ---------- */
:root[data-layout="cube"] .app-header { background: var(--c-bg); box-shadow: 0 1px 0 var(--c-line); padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
:root[data-layout="cube"] .ws-nav,
:root[data-layout="cube"] .app-header__new,
:root[data-layout="cube"] .app-header__logo { display: none !important; }
:root[data-layout="cube"] .app-header__brand { font-weight: 700; letter-spacing: .14em; font-size: var(--fs-3); text-transform: uppercase; }
:root[data-layout="cube"] .app-header__brand-text { display: inline !important; }
:root[data-layout="cube"] .ws-admin-link { display: inline-flex; }
:root[data-layout="cube"] .app-header__nav .btn { box-shadow: none; background: transparent; font-weight: 600; }
:root[data-layout="cube"] .app-header__nav .btn:hover { background: var(--c-surface-2); }
:root[data-layout="cube"] .chip, :root[data-layout="cube"] .btn { box-shadow: var(--nm-1); }
:root[data-layout="cube"] .btn--primary { box-shadow: none; }
:root[data-layout="cube"] .ws-home__icon, :root[data-layout="cube"] .ws-card__icon { box-shadow: none; background: var(--c-surface-2); }

/* Würfel-Elemente gibt es nur in dieser Vorlage. */
.cube-stage, .cube-flat, .cube-overview { display: none; }
:root[data-layout="cube"] body.cube-mode-cube .studio-shell,
:root[data-layout="cube"] body.cube-mode-overview .studio-shell,
:root[data-layout="cube"] body.cube-mode-cube .ws-home,
:root[data-layout="cube"] body.cube-mode-overview .ws-home { display: none !important; }

/* ---------- Würfel (Startseite) ---------- */
:root[data-layout="cube"] .cube-stage:not([hidden]) {
  display: block; position: relative; height: calc(100vh - var(--cube-top, 72px) - 24px); min-height: 460px;
  width: 100vw; max-width: none !important; margin: calc(var(--sp-3) * -1) 0 0 calc(50% - 50vw) !important; overflow: hidden;
  --fs: clamp(12px, 2.8vmin, 25px); --S: 17em; --hs: 1.7;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.cube-stage.is-dragging { cursor: grabbing; }
.cube-scene { position: absolute; inset: 0; perspective: 2400px; }
.cube { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; font-size: var(--fs); }
.cube-face { position: absolute; width: var(--S); height: var(--S); left: calc(var(--S) / -2); top: calc(var(--S) / -2); transform-style: preserve-3d; pointer-events: none; }
.cube-face[data-face="vis"] { transform: translateZ(calc(var(--S) / 2)); }
.cube-face[data-face="org"] { transform: rotateY(90deg) translateZ(calc(var(--S) / 2)); }
.cube-face[data-face="mot"] { transform: rotateX(90deg) translateZ(calc(var(--S) / 2)); }
.cube-rot { width: 100%; height: 100%; transform-style: preserve-3d; }
.cube-face[data-face="org"] .cube-rot, .cube-face[data-face="mot"] .cube-rot { transform: rotate(-90deg); }
.cube-hint { position: absolute; left: var(--sp-5); bottom: var(--sp-3); margin: 0; font-size: var(--fs-1); color: var(--c-muted); }

/* Menü-Satz: gleich im Würfel und flach in der Ecke */
.cube-menu { box-sizing: border-box; display: flex; flex-direction: column; transform-style: preserve-3d; font-family: var(--font-ui); }
.cube-stage .cube-menu { width: var(--S); height: var(--S); padding: .42em; }
.cube-menu--top { justify-content: flex-start; align-items: flex-end; text-align: right; }
.cube-menu--bottom { justify-content: flex-end; align-items: flex-start; text-align: left; }
.cube-head, .cube-item {
  color: var(--c-ink); text-decoration: none; white-space: nowrap; pointer-events: auto; cursor: pointer;
  text-shadow: 0 0 .6px var(--cube-halo), 0 0 3px var(--cube-halo-wide);
  transition: font-size .38s cubic-bezier(.3, .7, .2, 1), opacity .5s ease, transform .7s cubic-bezier(.5, 0, .8, .4), filter .5s, letter-spacing .3s, color .3s;
}
.cube-head:hover, .cube-item:hover { color: var(--c-ink); }
.cube-head { font-weight: 800; font-size: 1.6em; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; }
.cube-menu--top .cube-head { margin-bottom: .12em; }
.cube-menu--bottom .cube-head { margin-top: .12em; }
.cube-item { font-weight: 300; font-size: 1em; line-height: 1.38; letter-spacing: .01em; }
.cube-stage .cube-item:hover, .cube-stage .cube-item:focus-visible { font-size: calc(1em * var(--hs)); font-weight: 400; }
.cube-head:hover, .cube-head:focus-visible { letter-spacing: .06em; }
.cube-head:focus-visible, .cube-item:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.cube-face.gone .cube-head, .cube-face.gone .cube-item { opacity: 0; transform: translateZ(5em); filter: blur(4px); pointer-events: none; transition-delay: calc(var(--i) * 45ms); }

/* ---------- Flache Fläche in ihrer Ecke (Übersicht und Arbeitsansicht) ---------- */
/* Gleicher Schriftsatz wie die Würfelfläche (17em breit, Titel 1.6em, Einträge 1em, gleiche Zeilenhöhe) - nur kleiner.
   Dadurch ist der Wechsel Würfel <-> Ecke eine reine Verschiebung + Skalierung ohne Sprung (cube_nav.js). */
:root[data-layout="cube"] { --flat-fs: clamp(13px, 2.15vmin, 21px); }
:root[data-layout="cube"] .cube-flat:not([hidden]) {
  display: flex; flex-direction: column; gap: var(--sp-2); position: fixed; z-index: 4; font-size: var(--flat-fs); --S: 17em;
}
:root[data-layout="cube"] .cube-flat--top { top: calc(var(--cube-top, 72px) + 4px); right: var(--sp-3); align-items: flex-end; }
:root[data-layout="cube"] .cube-flat--bottom { bottom: var(--sp-3); left: var(--sp-3); align-items: flex-start; flex-direction: column-reverse; }
.cube-flat .cube-menu { width: auto; padding: .42em; } /* Kanten wie im Würfel (rechts- bzw. linksbündig), nur so breit wie nötig */
.cube-flat.is-measure { visibility: hidden; }
/* aktiver Eintrag: in der Ecke UND im Würfel während des Flugs gleich groß */
.cube-flat .cube-item.is-active, .cube-stage .cube-item.is-active { font-size: 1.3em; font-weight: 500; }
.cube-stage.is-busy .cube-item:not(.is-active):hover { font-size: 1em; font-weight: 300; }
.cube-stage.is-busy { cursor: default; }
.cube-flat .cube-item:hover { color: var(--c-ink); }
.cube-back { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink); text-decoration: none; border: 1px solid var(--c-line); border-radius: 999px; padding: 6px 12px; }
.cube-back:hover, .cube-back:focus-visible { border-color: var(--c-muted); color: var(--c-ink); outline: none; }
/* Platz für die Fläche freihalten, damit sie nichts überdeckt */
:root[data-layout="cube"] body.cube-anchor-top.cube-mode-work .app-main,
:root[data-layout="cube"] body.cube-anchor-top.cube-mode-overview .app-main { padding-right: calc(var(--cube-flat-w, 320px) + 20px); }
/* Fläche unten links (Race’n’Rides): Inhalt bleibt mittig und breit, nur unten Platz, damit nichts unter der Fläche endet;
   beim Scrollen läuft der Inhalt hinter der Fläche durch (sie hat dafür einen Grund in Hintergrundfarbe). */
:root[data-layout="cube"] body.cube-anchor-bottom.cube-mode-work .app-main,
:root[data-layout="cube"] body.cube-anchor-bottom.cube-mode-overview .app-main { padding-bottom: calc(var(--cube-flat-h, 300px) + 24px); }
:root[data-layout="cube"] .cube-flat--bottom:not(.is-measure) { background: linear-gradient(to top, var(--c-bg) 82%, transparent); padding-top: var(--sp-5); border-top-right-radius: var(--r-md); }
/* Kopfzeile immer über der Fläche */
:root[data-layout="cube"] .app-header { z-index: 6; }

/* ---------- Übersicht einer Hauptkategorie ---------- */
:root[data-layout="cube"] .cube-overview:not([hidden]) { display: block; max-width: 1100px; margin: 0 auto var(--sp-6); padding: var(--sp-5) var(--sp-2) 0; animation: cube-fade .35s ease-out; }
.cube-crumb { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.cube-title { margin: 4px 0 0; font-size: clamp(26px, 4vw, 44px); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
.cube-purpose { margin: var(--sp-2) 0 0; color: var(--c-ink-2); }
.cube-intro { max-width: 70ch; margin: var(--sp-3) 0 var(--sp-5); line-height: 1.55; color: var(--c-muted); }
@keyframes cube-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Schmal: Fläche als Zeile über dem Inhalt ---------- */
@media (max-width: 1180px) { /* 2026-10-09: vorher 900 px - auf Tablet quer überdeckte die Eck-Fläche Karten und Tabellen */
  :root[data-layout="cube"] .cube-flat:not([hidden]) { position: static; max-width: none; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-3); margin: 0 0 var(--sp-4); padding: 0 0 var(--sp-3); border-bottom: 1px solid var(--c-line); background: none; }
  :root[data-layout="cube"] .cube-flat .cube-menu { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-3); text-align: left; }
  :root[data-layout="cube"] .cube-flat .cube-head { order: -1; width: 100%; }
  :root[data-layout="cube"] .cube-flat:not([hidden]) { font-size: 15px; }
  :root[data-layout="cube"] .cube-flat .cube-menu { width: auto; padding: 0; }
  :root[data-layout="cube"] .cube-flat .cube-head { font-size: 1.35em; }
  :root[data-layout="cube"] body.cube-mode-work .app-main, :root[data-layout="cube"] body.cube-mode-overview .app-main { padding-left: var(--sp-3) !important; padding-right: var(--sp-3) !important; }
  :root[data-layout="cube"] .cube-stage:not([hidden]) { --fs: clamp(10px, 4vmin, 18px); }
  .cube-hint { display: none; }
}

/* Handy: Kopfzeile einzeilig - Verwaltung steht ohnehin im Personenmenü, Beschriftungen nur als Symbol */
@media (max-width: 599px) {
  :root[data-layout="cube"] .app-header { flex-wrap: nowrap; gap: var(--sp-2); }
  :root[data-layout="cube"] .ws-admin-link { display: none; }
  :root[data-layout="cube"] .app-header__nav { flex-wrap: nowrap; gap: 2px; }
  :root[data-layout="cube"] .app-header__nav .btn > span:not([class]), :root[data-layout="cube"] .app-header__nav kbd { display: none; }
  :root[data-layout="cube"] .app-header__brand { font-size: var(--fs-1); letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
  .cube-head, .cube-item, .cube-overview { transition: none !important; animation: none !important; }
}

/* ---------- Weiche Übergänge (Mirko 2026-10-08): Fläche fliegt zwischen Würfel und Ecke ---------- */
.cube-stage.is-handoff .cube, .cube-stage.is-prep .cube { visibility: hidden; }
.cube-face.instant .cube-head, .cube-face.instant .cube-item { transition: none !important; }
.cube-flat .cube-back { transition: opacity .3s ease; }
.cube-flat.is-flying .cube-back { opacity: 0; pointer-events: none; }
:root[data-layout="cube"] body .studio-shell, :root[data-layout="cube"] body .cube-overview { transition: opacity .28s ease; }
:root[data-layout="cube"] body.cube-leaving .studio-shell, :root[data-layout="cube"] body.cube-leaving .cube-overview { opacity: 0; }
:root[data-layout="cube"] body.cube-mode-work .studio-shell { animation: cube-fade .4s ease-out; }

/* Kein Aufblitzen: bei Seiten-Werkzeugen (Orga, Partlog …) Studio-Spalten und Galerie schon vor dem Laden des Moduls aus */
:root[data-layout="cube"].cube-pageapp #flowPanel, :root[data-layout="cube"].cube-pageapp #recentCard, :root[data-layout="cube"].cube-pageapp #sidePanel,
:root[data-layout="cube"].cube-pageapp #workflowBar, :root[data-layout="cube"].cube-pageapp #bottomStrip, :root[data-layout="cube"].cube-pageapp #viewBarSlot,
:root[data-layout="cube"].cube-pageapp #variantActionsSlot { display: none !important; }
:root[data-layout="cube"].cube-pageapp .stage { background: transparent; box-shadow: none; }
.cube-scene { will-change: transform; }