/* ================================================================
   Beispiel-Würfel: vier Würfel im Quadrat des Markenzeichens.
   Hell: Musterentwürfe (3 + 3 + 1). Dunkelblau: bleibt leer.
   Gedreht wird nur um die senkrechte Achse. Dadurch bleibt das
   Scrollen auf dem Handy frei (touch-action: pan-y).
   Aufbau:  .cubes > .cube-wrap > .cube > .cf (6 Flächen)
   ================================================================ */
.cubes-sec .inner{ position:relative; }
/* Handy: Überschrift, Würfel, Liste. Rechner: Text links, Würfel rechts über beide Zeilen. */
.cubes-grid{
  display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,5vw,48px) clamp(36px,5vw,72px);
  grid-template-areas:"head" "stage" "info";
}
.cubes-head{ grid-area:head; max-width:480px; }
.cubes-info{ grid-area:info; max-width:480px; }
.cubes-stage{ grid-area:stage; }
.cubes-head h2{ font-size:var(--step-h2); line-height:1.08; max-width:14ch; }
.cubes-head .note{ margin-top:var(--sp-4); font-size:var(--step-lead); color:var(--slate-300); max-width:34ch; }

/* Liste der sieben Beispiele: dreht den passenden Würfel zur Seite */
.cube-list{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; }
.cube-list button{
  font:inherit; font-size:15px; font-weight:600; color:var(--slate-100); cursor:pointer;
  background:rgba(232,238,242,.07); border:1px solid rgba(232,238,242,.2);
  padding:9px 16px; border-radius:999px;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cube-list button:hover{ background:rgba(232,238,242,.14); border-color:rgba(232,238,242,.4); }
.cube-list button[aria-pressed="true"]{ background:var(--slate-100); border-color:var(--slate-100); color:var(--slate-900); }
.cube-list button:focus-visible{ outline:2px solid var(--slate-300); outline-offset:3px; }

.cube-hint{ margin-top:var(--sp-6); font-size:var(--step-small); color:var(--slate-300); }

/* Beschreibung der gerade zugewandten Seite. Der Platz bleibt reserviert, damit nichts springt. */
.cube-caption{ margin-top:var(--sp-6); min-height:7.6em; padding-top:var(--sp-5); border-top:1px solid var(--line-dark); }
.cube-caption.is-empty > *{ visibility:hidden; }
.cube-caption h3{ font-size:var(--step-h3); color:#fff; }
.cube-caption p{ margin-top:8px; font-size:15.5px; color:var(--slate-300); max-width:38ch; }
.cube-caption a{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-size:15px; font-weight:600; color:var(--slate-100); text-decoration:none;
  border-bottom:1px solid rgba(232,238,242,.4); padding-bottom:2px;
}
.cube-caption a{ white-space:nowrap; }
.cube-caption a svg{ width:15px; height:15px; flex:none; stroke:currentColor; fill:none;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.cube-caption a:hover{ border-bottom-color:var(--slate-100); }
.cube-caption a:focus-visible{ outline:2px solid var(--slate-300); outline-offset:4px; }

/* ---------------- Bühne ---------------- */
.cubes-stage{ display:flex; justify-content:center; container-type:inline-size; }
.cubes{
  --S:clamp(290px,88vw,720px);                    /* Rückfall ohne Container-Einheiten */
  --S:clamp(290px,min(100cqw,720px),780px);
  position:relative; width:var(--S); height:var(--S);
  touch-action:pan-y; user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
/* Greifbereich auch seitlich über die Bühne hinaus, damit hervortretende Seiten erreichbar bleiben */
.cubes::before{ content:""; position:absolute; inset:0 -14%; }
/* Die Maus trifft nur die Bühne. Welcher Würfel und welche Seite getroffen wird, rechnet wuerfel.js
   selbst aus. Chrome prüft Treffer auf 3D-Flächen nicht verlässlich: Je nach Drehung gingen
   sie an die Bühne statt an die Fläche. */
.cubes-shadows,.cubes-3d,.cubes-3d *{ pointer-events:none; }

/* Schatten liegen flach unter den Würfeln und nicht im 3D-Raum */
.cubes-shadows{ position:absolute; inset:0; }
.cubes-shadows i{
  position:absolute; width:calc(var(--S) * .42); height:calc(var(--S) * .42);
  border-radius:9%;
  box-shadow:0 calc(var(--S) * .055) calc(var(--S) * .08) calc(var(--S) * -.035) rgba(4,10,15,.62);
}
.cubes-3d{ position:absolute; inset:0; }

/* Jeder Würfel hat seine eigene Perspektive mit dem Fluchtpunkt in seiner Mitte. Eine gemeinsame
   Perspektive für alle vier ließ die äußeren Würfel schief wirken. */
.cube-wrap{
  --s:calc(var(--S) * .42);
  --rho:.07;                      /* Rundung der Kanten, in Würfelkanten (gleich in wuerfel.js) */
  position:absolute; width:var(--s); height:var(--s);
  perspective:calc(var(--s) * 3.4); perspective-origin:50% 50%;
}
.cube-wrap:focus-visible{ outline:none; }
.cube-wrap:focus-visible .cube-ring{ opacity:1; }
.cube-ring{
  position:absolute; inset:-5%; border:2px solid var(--slate-300); border-radius:14%;
  opacity:0;
}
.c1,.cubes-shadows i:nth-child(1){ left:4%;  top:4%; }
.c2,.cubes-shadows i:nth-child(2){ left:54%; top:4%; }
.c3,.cubes-shadows i:nth-child(3){ left:4%;  top:54%; }
.c4,.cubes-shadows i:nth-child(4){ left:54%; top:54%; }

.cube{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:translateZ(calc(var(--s) * -.5));
  will-change:transform;
}
/* Die sechs Hauptflächen sind um die Rundung eingerückt. Dazwischen sitzen Kantenstreifen und
   Eckstücke (.cp), die wuerfel.js einfügt: zusammen ergeben sie einen Würfel mit runden Kanten. */
.cf{
  position:absolute; inset:calc(var(--rho) * 100%); display:block; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:linear-gradient(148deg,#FCFAF7 0%,#E3DAD0 54%,#C0B5A8 100%);
  color:inherit; text-decoration:none;
}
.cf:nth-child(1){ transform:rotateY(0deg)   translateZ(calc(var(--s) * .5)); }
.cf:nth-child(2){ transform:rotateY(90deg)  translateZ(calc(var(--s) * .5)); }
.cf:nth-child(3){ transform:rotateY(180deg) translateZ(calc(var(--s) * .5)); }
.cf:nth-child(4){ transform:rotateY(270deg) translateZ(calc(var(--s) * .5)); }
.cf--top   { transform:rotateX(90deg)  translateZ(calc(var(--s) * .5)); }
.cf--bottom{ transform:rotateX(-90deg) translateZ(calc(var(--s) * .5)); }

/* Kanten- und Eckstücke: Farbe und Lage setzt wuerfel.js */
.cp{
  position:absolute; left:50%; top:50%; display:block;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}

/* Licht: die Seiten, die sich wegdrehen, werden dunkler (setzt wuerfel.js) */
.cf::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:#0A141B; opacity:var(--sh,0);
}
/* Dunkelblauer Würfel */
.cube-wrap--blau .cf{
  background:linear-gradient(148deg,#6E93AC 0%,#33556B 56%,#1E3644 100%);
}

/* Seite mit Vorschau: Bild im Rahmen, darunter der Name als Gravur */
.cf--demo{ padding:6.5%; display:flex; flex-direction:column; }
.cf--demo img{
  display:block; width:100%; height:auto; flex:none; aspect-ratio:1 / .8; object-fit:cover; object-position:top;
  border-radius:2.4%;
  box-shadow:0 0 0 1px rgba(29,26,24,.22), 0 6px 14px -8px rgba(29,26,24,.55);
  pointer-events:none;
}
.cf-label{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:1;
  font-size:calc(var(--s) * .095); color:#5C5249; filter:url(#gravur-s);
}
.cf-label svg{ width:.8em; height:.8em; flex:none; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
@media(min-width:900px){ .cf-label{ filter:url(#gravur); } }
@media(forced-colors:active){ .cf-label{ filter:none; color:CanvasText; } }
.cf--demo:hover img{ box-shadow:0 0 0 1px rgba(29,26,24,.3), 0 8px 18px -8px rgba(29,26,24,.6); }

@media(min-width:1100px){
  .cubes-grid{
    grid-template-columns:minmax(0,4fr) minmax(0,8fr);
    grid-template-rows:auto auto; grid-template-areas:"head stage" "info stage";
    align-content:center;
  }
  .cubes-head{ align-self:end; }
  .cubes-info{ align-self:start; }
  .cubes-stage{ align-self:center; }
  .cubes{ --S:clamp(420px,100cqw,780px); }
}
@media (prefers-reduced-motion:reduce){
  .cube-list button{ transition:none; }
}