/* cube.css — Der Konzept-Würfel.

   Vier Flächen, waagerecht drehbar; auf jeder Fläche wird senkrecht gescrollt.
   Die beiden Achsen sind strikt getrennt: das Rad dreht nie. Gedreht wird
   ausschließlich über Pfeile, Tastatur und Wischen.

   DIE TRAGENDE ENTSCHEIDUNG
   Der Würfel ist nur *während der Drehung* ein 3D-Körper. Im Ruhezustand ist
   die Vorderseite eine flache, gewöhnliche Seite ohne jede Transformation.
   Zwei Gründe, beide hart:
     1. Text in einem 3D-transformierten Element verliert das Subpixel-Rendering
        und wird sichtbar unscharf.
     2. overflow-y: auto innerhalb von preserve-3d ist auf iOS seit Jahren
        fehlerhaft — genau das bräuchte man aber fürs Scrollen je Fläche.
   Darum: flach → drehen (3D) → wieder flach einrasten.

   Gedreht werden immer nur zwei Flächen gleichzeitig (die abgehende und die
   ankommende). Ein vollständiger Würfel aus vier randlosen Flächen bräuchte
   deutlich mehr Tiefe, ohne dass man mehr als zwei Seiten je sähe.
   ====================================================================== */

/* Der Grund war ein schwach ausgeleuchteter Lichtkegel hinter der Würfelmitte.
   Er ist raus, und zwar aus einem Grund, der schwerer wiegt als die Tiefe:
   links und rechts vom Würfel blieben davon rund 170 px in #0c0a08 stehen,
   während die Startseite auf reinem Schwarz liegt. Zwischen zwei Seiten, die
   einen Klick auseinanderliegen, fällt so ein Unterschied auf.
   Jetzt ist der Grund eine WAND: rgb(14,13,12) statt Schwarz. Der Grund dafür
   ist nicht Geschmack, sondern Physik — ein Schlagschatten braucht eine
   Fläche, die heller ist als er. Auf reinem Schwarz kann kein Schatten
   existieren, und ohne Schatten steht kein Körper vor etwas. Der Preis: die
   Ränder sind vier Helligkeitsstufen heller als die Startseite. */
.cube {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #0e0d0c;
  /* Tiefe der Bühne. Das 1,15-fache der Würfelbreite: bei 1,6 war die
     Drehung zu brav — man sah zwei Flächen schwenken statt einen Körper
     sich drehen. Deutlich flacher wird daraus ein Fischauge. */
  perspective: calc(var(--cube-w, 100vw) * 1.15);
  perspective-origin: 50% 45%;
}

.cube__body {
  position: absolute;
  inset: 0;
  transform-style: flat;   /* im Ruhezustand bewusst flach — siehe Kopf */
}

/* Nur während der Drehung wird der Körper räumlich. */
.cube.is-turning .cube__body { transform-style: preserve-3d; }

/* ----------------------------------------------------------------------
   FLÄCHEN
   ---------------------------------------------------------------------- */

/* Der Würfel füllt die Breite nicht mehr aus: er steht als Körper im Raum,
   mit Luft an den Seiten. Zentriert über margin, NICHT über transform —
   transform ist hier für die 3D-Stellung reserviert.

   Nebeneffekt, den man mitnimmt: bei 82 % Breite dreht der Würfel vollständig
   im Bild. Randlos lief seine hintere Ecke zwangsläufig aus dem Fenster, weil
   die Diagonale breiter ist als die Fläche. */
.face {
  position: absolute;
  /* Luft oben und unten. Ohne sie lief die Flaeche von Fensterkante zu
     Fensterkante und war damit eine Spalte, kein Koerper — etwas, das frei
     haengt, braucht Grund an allen vier Seiten, nicht nur an zweien. */
  top: clamp(1rem, 3.2vh, 2.4rem);
  bottom: clamp(1rem, 3.2vh, 2.4rem);
  left: 50%;
  width: var(--cube-w, 100%);
  margin-left: calc(var(--cube-w, 100%) * -0.5);
  border-radius: 3px;
  backface-visibility: hidden;
  display: none;

  /* Die Fläche ist eine Oberfläche, kein Loch: eine Spur heller als der
     Grund ringsum, weil ein zugewandter Körper das Licht abbekommt.
     Dazu ein Kantenlicht von einem Pixel — das ist es, was die Kante
     überhaupt sichtbar macht — und ein breiter, weicher Schatten, der den
     Würfel von der Wand abhebt. */
  /* Nicht eine Farbe, sondern ein Verlauf: oben heller, unten dunkler. Eine
     Flaeche, die ueberall gleich hell ist, liest sich als Ausschnitt; eine mit
     Lichtabfall als Oberflaeche, auf die etwas von oben scheint. */
  /* Beide Werte liegen ueber der Wand: der Koerper faengt mehr Licht ab als
     der Grund hinter ihm. So herum stimmt es, wenn das Licht von vorne oben
     kommt. */
  background: linear-gradient(180deg, #1b1813 0%, #131110 100%);
  /* Kein Schein nach aussen. Ein Leuchten um den Koerper herum liest sich als
     Effekt, nicht als Licht — und Effekte altern schnell. Die Tiefe kommt aus
     drei nuechternen Quellen: der Luft ringsum, dem Lichtabfall auf der
     Flaeche und der Schmalseite rechts. Was hier stehen bleibt, ist nur der
     Schatten nach unten; er kostet nichts und nimmt der Unterkante den Rest
     Leuchten, falls doch einmal etwas dahinterliegt. */
  /* Und jetzt wirft er einen. Zwei Schatten, wie in echt: ein weiter, weicher
     fuer den Abstand zur Wand, und ein enger, dunklerer an der Kante — ohne
     den zweiten schwebt ein Koerper ohne Kontakt und wirkt aufgeklebt. */
  box-shadow:
    0 30px 60px -18px rgba(0, 0, 0, 0.95),
    0 8px 22px -8px rgba(0, 0, 0, 0.9);
}

/* Die Schmalseite ist wieder raus: eine in CSS nachgebaute Seitenflaeche
   ist eine Behauptung ueber einen Koerper, der an dieser Stelle flach ist. */

/* ----------------------------------------------------------------------
   JE KONZEPT EIN EIGENER FLÄCHENTON (2026-09-12)
   Nicht als Schmuck, sondern zur Orientierung: beim Drehen soll man merken,
   dass man woanders ist. Deshalb kein Farbwechsel, sondern eine Verstimmung
   desselben Fast-Schwarz.

   DREI ACHSEN, NICHT EINE. Der erste Versuch trennte die Flächen nur über den
   Farbwinkel, und daran ist er gescheitert: ALTUS und AVANTI sind beide kühl,
   ihre ganze Farbfamilie überlappt (ALTUS 240–258, AVANTI 222–237), und sie
   stehen in der Drehung nebeneinander — sie lasen sich als dasselbe Blau.
   Ein ehrlicher Winkel dazwischen existiert nicht. Also unterscheiden sich
   die Flächen jetzt zugleich in Winkel, BUNTHEIT und HELLIGKEIT:

     ALMARÉ   64°  mittel            warmes Braun (Sand, Amber, Stein); von
                                     0,032 auf 0,025 zurückgenommen, es stach
                                     gegen die anderen drei heraus
     ALTUS   250°  fast farblos      Graphit — die Seite ist Beton und Stahl
     AVANTI  212°  bunt, dunkelst    See; im Original ist sie die dunkelste
     ALBA     80°  fast farblos      Marmor; Winkel vom Knochenton der Seite,
                                     Buntheit niedrig, damit es Stein bleibt
                                     und nicht Braun wird, dafür die hellste

   ALTUS und AVANTI liegen damit 38° auseinander UND 3,4 Helligkeitspunkte
   UND 0,024 Buntheit: das eine ist Grau, das andere ist Blau. ALMARÉ und ALBA
   sind beide warm, aber das eine ist Braun und das andere heller Stein; sie
   stehen ohnehin nicht nebeneinander.

   HARTE GRENZE: der untere Halt darf nie unter die Wand (#0e0d0c, 16 %)
   rutschen, sonst kann der Schlagschatten nicht existieren und der Körper
   steht nicht mehr vor etwas — siehe der Kopf dieser Datei. Er liegt deshalb
   bei allen auf mindestens 18 %.

   Die Kontaktfläche ist bewusst neutral, sie ist kein Konzept. */
.face[data-slug="almare"]  { background: linear-gradient(180deg, #251a10 0%, #1a130c 100%); }
.face[data-slug="altus"]   { background: linear-gradient(180deg, #181b20 0%, #111316 100%); }
.face[data-slug="avanti"]  { background: linear-gradient(180deg, #04171b 0%, #071417 100%); }
.face[data-slug="alba"]    { background: linear-gradient(180deg, #23201a 0%, #1a1814 100%); }
.face[data-slug="kontakt"] { background: linear-gradient(180deg, #181715 0%, #121110 100%); }

.face.is-active { display: block; }

/* Während der Drehung sind abgehende und ankommende Fläche gleichzeitig da. */
.face.is-leaving,
.face.is-entering { display: block; }

/* Die Halbtiefe: halbe Würfelbreite. Damit sind Kantenlänge und Tiefe gleich
   groß — ein echter Würfel, keine Scheibe.

   Vorwärts kippt die aktuelle Fläche nach RECHTS weg, die neue kommt von
   links herein — der Würfel rollt in die Richtung, in die man klickt. */
.cube.is-turning .face.is-leaving  { transform: translateZ(calc(var(--cube-w) * 0.5)); }
.cube.is-turning .face.is-entering { transform: rotateY(-90deg) translateZ(calc(var(--cube-w) * 0.5)); }
.cube.is-turning.to-prev .face.is-entering { transform: rotateY(90deg) translateZ(calc(var(--cube-w) * 0.5)); }

/* Der eigentliche Scroller. Eigenes Element, damit .face transformiert werden
   kann, ohne die Scrollposition anzufassen. */
.face__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;   /* kein Weiterziehen der Seite dahinter */
  -webkit-overflow-scrolling: touch;
  /* Die Systemleiste klebte an der Würfelkante und zerschnitt den Körper.
     Sie fliegt raus; die Position zeigt stattdessen .face__rail. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.face__scroll::-webkit-scrollbar { width: 0; height: 0; }

/* --- Laufende Linie statt Leiste ---
   Sie steht dauerhaft, solange die Fläche überhaupt etwas zu scrollen hat:
   so sieht man schon beim Ankommen, dass es nach unten weitergeht, und wie
   weit. Beim Scrollen wird der Läufer heller — Rückmeldung, ohne dass etwas
   ein- und ausblendet.

   Sie sitzt innerhalb der Fläche, gehört also zum Würfel und dreht mit. */
.face__rail {
  position: absolute;
  top: clamp(4.5rem, 13vh, 7.5rem);
  bottom: clamp(4.5rem, 13vh, 7.5rem);
  right: clamp(0.5rem, 1.4%, 1.1rem);
  width: 2px;
  z-index: 6;
  border-radius: 2px;
  background: rgba(232, 224, 212, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease-smooth);
}

.face__rail.is-on { opacity: 1; }

.face__rail span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  border-radius: 2px;
  background: var(--gold-light);
  opacity: 0.42;
  will-change: transform;
  transition: opacity 0.45s var(--ease-smooth);
}

/* solange gescrollt wird */
.face__rail.is-live span { opacity: 0.95; }

/* Während der Drehung darf nichts gescrollt werden — die Position bleibt
   dabei erhalten, sie wird nur eingefroren. */
.cube.is-turning .face__scroll { overflow: hidden; }

/* --- Lichtreaktion ---
   Das ist der Teil, der die Drehung überhaupt als Körper lesbar macht. Ohne
   ihn sieht man auf schwarzem Grund nur Text schweben: es fehlt die Fläche,
   an der sich Licht bricht. Die abgehende Seite wandert ins Dunkel, die
   ankommende kommt daraus hervor — dieselbe Zeitfunktion wie die Drehung,
   damit Schattierung und Winkel zusammenlaufen.

   Die Oberfläche selbst steht dauerhaft an der Fläche (siehe oben) — beim
   Drehen kommt nur diese Abschattung dazu. */

.cube.is-turning .face::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: none;
  z-index: 5;
}

/* Dieselbe Zeitfunktion wie die Drehung, damit Schattierung und Winkel
   zusammenlaufen. Die Zwischenwerte folgen 1 − cos(Winkel), also dem, was
   eine matte Fläche unter frontalem Licht wirklich tut: bei 45° ist sie
   noch zu etwa 70 % beleuchtet, nicht zur Hälfte. Linear abgeblendet wirkt
   die Drehung flau. */
.cube.is-turning .face.is-leaving::after {
  animation: cube-shade-away var(--cube-dur, 900ms) cubic-bezier(0.62, 0.02, 0.3, 1) both;
}
.cube.is-turning .face.is-entering::after {
  animation: cube-shade-toward var(--cube-dur, 900ms) cubic-bezier(0.62, 0.02, 0.3, 1) both;
}

@keyframes cube-shade-away {
  0%   { opacity: 0; }
  25%  { opacity: 0.07; }   /* 1 − cos(22,5°) */
  50%  { opacity: 0.29; }   /* 1 − cos(45°)   */
  75%  { opacity: 0.62; }   /* 1 − cos(67,5°) */
  100% { opacity: 0.85; }
}

@keyframes cube-shade-toward {
  0%   { opacity: 0.85; }
  25%  { opacity: 0.62; }
  50%  { opacity: 0.29; }
  75%  { opacity: 0.07; }
  100% { opacity: 0; }
}

/* ----------------------------------------------------------------------
   DIE DREHUNG — starr

   Hier stand vorher ein scale(0.82) in der Mitte, damit die Flächen nicht
   aus dem Bild schneiden. Das war der Fehler: Skalieren ist keine starre
   Bewegung. Ein fester Würfel schrumpft nicht, während er sich dreht — das
   Auge merkt das sofort und liest zwei schwenkende Flächen statt eines
   Körpers.

   Stattdessen wird die Kamera zurückgesetzt: translateZ(-halbe Breite)
   verschiebt den Drehpunkt in den Würfelmittelpunkt. Bei 0° liegt die
   Vorderfläche damit exakt in der Bildebene — sie ist genauso groß wie im
   flachen Ruhezustand, es gibt keinen Sprung beim Umschalten. Gedreht wird
   um die eigene Mittelachse, wie es sich gehört.

   Dass die hintere Ecke dabei kurz über den Bildrand hinausläuft, ist kein
   Mangel: die Diagonale eines Würfels IST breiter als seine Fläche. Ein
   echter Würfel hinter einem Fenster schiebt seine Ecke eben aus dem Bild.
   Dafür steht das overflow: hidden auf .cube.
   ---------------------------------------------------------------------- */

@keyframes cube-turn-next {
  from { transform: translateZ(calc(var(--cube-w) * -0.5)) rotateY(0deg); }
  to   { transform: translateZ(calc(var(--cube-w) * -0.5)) rotateY(90deg); }
}

@keyframes cube-turn-prev {
  from { transform: translateZ(calc(var(--cube-w) * -0.5)) rotateY(0deg); }
  to   { transform: translateZ(calc(var(--cube-w) * -0.5)) rotateY(-90deg); }
}

/* Eine einzige Zeitfunktion über die ganze Drehung: leicht anschieben, lange
   auslaufen. Ein Körper mit Masse beschleunigt und bremst — die frühere
   Zweiteilung mit Knick in der Mitte war Teil des unruhigen Eindrucks. */
.cube.is-turning .cube__body {
  animation: cube-turn-next var(--cube-dur, 900ms) cubic-bezier(0.62, 0.02, 0.3, 1) both;
}
.cube.is-turning.to-prev .cube__body {
  animation-name: cube-turn-prev;
}

/* ----------------------------------------------------------------------
   BEDIENUNG
   ---------------------------------------------------------------------- */

.cube__arrow {
  position: absolute;
  top: 50%;
  z-index: 30;
  width: 7.5rem;
  height: 7.5rem;
  margin-top: -3.75rem;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--cream);
  opacity: 0.5;
  cursor: var(--cur-pointer);
  transition: opacity 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth);
}

.cube__arrow:hover  { opacity: 1; }
.cube__arrow:disabled { opacity: 0.12; cursor: default; }
.cube__arrow--prev { left:  clamp(0.4rem, 1.6vw, 1.6rem); }
.cube__arrow--next { right: clamp(0.4rem, 1.6vw, 1.6rem); }
.cube__arrow--prev:hover { transform: translateX(-4px); }
.cube__arrow--next:hover { transform: translateX(4px); }

/* Sehr flacher Winkel: 16 Einheiten Lauf auf 5,5 Höhe, rund 19°. Ein weit
   geöffnetes Zeichen wirkt ruhiger als eine spitze Pfeilspitze. */
.cube__arrow svg { width: 62px; height: 27px; display: block; }

/* --- Scrollzeichen ---
   Wortwörtlich das der Startseite: ein um −90° gedrehtes „K" der Wortmarke
   in Gold. Es sagt, dass es auf dieser Fläche nach unten weitergeht — die
   zweite Achse, die sonst niemand findet.

   Es steht mittig unten, wo es auch auf der Startseite steht. Die
   Standanzeige weicht dafür an den rechten Rand: zwei Zeichen an derselben
   Stelle wären eins zu viel. */
.cube__scroll {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: 2.4rem;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.cube__scroll.is-in { opacity: 1; }

.cube__scroll .chev {
  display: block;
  font-family: var(--font-main);
  font-weight: 300;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--gold);
  transform: rotate(-90deg);
  opacity: 0.9;
}

/* Standanzeige — ohne sie merkt niemand, dass es weitergeht. */
.cube__hud {
  position: absolute;
  z-index: 30;
  right: clamp(1.4rem, 4vw, 3rem);
  bottom: clamp(1rem, 3vh, 2rem);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-label);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
}

.cube__dots { display: flex; gap: 0.55rem; }

.cube__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 1px solid var(--gold-light);
  border-radius: 50%;
  background: transparent;
  opacity: 0.45;
  cursor: var(--cur-pointer);
  transition: background 0.4s var(--ease-smooth), opacity 0.4s var(--ease-smooth);
}

.cube__dot.is-on { background: var(--gold-light); opacity: 1; }

.cube__count { opacity: 0.4; }

/* Ersteinweisung fürs Drehen. Das Scrollen erklärt jetzt das Zeichen oben,
   darum steht hier nur noch die waagerechte Achse. Verschwindet bei der
   ersten Bedienung und kommt nicht wieder. Sitzt links als Gegengewicht
   zur Standanzeige rechts. */
.cube__hint {
  position: absolute;
  z-index: 30;
  left: clamp(1.4rem, 4vw, 3rem);
  bottom: clamp(1rem, 3vh, 2rem);
  display: flex;
  gap: 1.4rem;
  white-space: nowrap;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.42;
  transition: opacity 0.7s var(--ease-smooth);
}

.cube.is-used .cube__hint { opacity: 0; pointer-events: none; }

/* ----------------------------------------------------------------------
   INHALT DER FLÄCHEN (Gerüst — Platzhalter)
   ---------------------------------------------------------------------- */

/* Seitliches Maß in Prozent, nicht in vw: der Rahmen ist jetzt der Würfel,
   nicht das Fenster. */
.panel {
  min-height: 100%;
  padding: clamp(6rem, 14vh, 9rem) clamp(1.4rem, 5%, 4.5rem) clamp(7rem, 15vh, 9rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vh, 3.4rem);
}

.panel__no {
  /* Dieselbe Typografie wie „01 · Leistung" auf der Startseite: gemessen
     15,2 px, Share Tech, 0,25 em gesperrt. */
  font-family: var(--font-label);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  color: var(--gold-light);
}

/* Der Name traegt jetzt die Ueberschrift von Leistung 01, Wert fuer Wert:
   clamp(2.4rem, 5vw, 4.6rem), Gewicht 600, Zeile 1,02 und minus 0,03 em
   Sperrung. Vorher waren es 96 px in Gewicht 200 mit positiver Sperrung —
   eine zweite Schriftsprache auf derselben Website. */
.panel__name {
  font-family: var(--font-main);
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--cream-light);
}

.panel__sector {
  font-family: var(--font-label);
  font-size: 0.86rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.45;
}

.panel__lead {
  max-width: 34em;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.75;
  color: var(--cream);
  opacity: 0.8;
}

/* Platzhalter, damit die Fläche hoch genug zum Scrollen ist. Fliegt raus,
   sobald echter Inhalt kommt. */
.panel__placeholder {
  min-height: 62vh;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(232, 224, 212, 0.16);
  border-radius: 2px;
  font-family: var(--font-label);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.3;
}

/* ----------------------------------------------------------------------
   INHALTSBLÖCKE EINER FLÄCHE

   Der Aufbau folgt der Reihenfolge, in der jemand ein Projekt versteht:
   Aufgabe → Entscheidung → Beweis → Details → Handwerk. Jeder Block trägt
   eine kleine Überschrift, damit man beim Scrollen weiß, wo man ist.
   ---------------------------------------------------------------------- */

.blk {
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 2vh, 1.3rem);
  max-width: 44em;
}

/* Der Beweis darf breiter stehen als der Text — er ist das Argument. */
.blk--wide { max-width: none; }

.blk__kicker {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0.85;
}

/* Die Linie hinter der Beschriftung läuft bis zum Rand aus — sie gliedert,
   ohne als Trennstrich zu wirken. */
.blk__kicker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(196, 169, 106, 0.28), transparent);
}

.blk__text {
  font-size: clamp(0.98rem, 1.35vw, 1.1rem);
  line-height: 1.78;
  color: var(--cream);
  opacity: 0.78;
}

/* Der eine Satz, um den es geht: die Begründung der Form. Größer als der
   Fließtext, damit er beim Durchscrollen hängen bleibt. */
/* Und der Satz darunter genauso: clamp(1.02rem, 1.4vw, 1.28rem), Zeile 1,7.
   Er bleibt heller als der Fliesstext ringsum, damit die Begruendung der Form
   weiterhin der Satz ist, an dem man haengenbleibt — aber er schreit nicht
   mehr in einer Groesse, die es auf der Startseite nirgends gibt. */
.blk__claim {
  font-size: clamp(1.02rem, 1.4vw, 1.28rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--cream-light);
  text-wrap: balance;
}

.blk__claim em {
  font-style: normal;
  color: var(--gold-light);
}

/* --- Aufzählung der Details --- */
.blk__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 2vh, 1.2rem);
}

.blk__list li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.4rem 0.6rem;
  align-items: baseline;
}

.blk__list b {
  font-family: var(--font-label);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.blk__list span {
  font-size: clamp(0.92rem, 1.25vw, 1.02rem);
  line-height: 1.7;
  color: var(--cream);
  opacity: 0.72;
}

/* --- Handwerk: die Zahlen --- */
.blk__facts {
  display: grid;
  /* Es sind genau vier Felder. auto-fit hat daraus je nach Breite fuenf
     Spalten gemacht (eine davon leer) oder drei (eines allein in der zweiten
     Zeile). Deshalb feste Stufen: vier, zwei, eins — alles andere laesst den
     Kasten kaputt aussehen. */
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(232, 224, 212, 0.07);
  border: 1px solid rgba(232, 224, 212, 0.07);
}

.blk__facts > div {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: clamp(0.9rem, 2.2vh, 1.3rem) clamp(0.9rem, 2vw, 1.3rem);
  background: #0d0b09;
}

.blk__facts dt {
  font-family: var(--font-label);
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.6;
}

.blk__facts dd {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--cream-light);
  opacity: 0.92;
}

/* --- Handy-Gegenüberstellung ---
   Nebeneinander, weil der Punkt genau der Vergleich ist: nicht beschnitten,
   sondern eigens gerechnet. */
.blk__compare {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}

.blk__phone {
  width: clamp(120px, 15vw, 168px);
  aspect-ratio: 608 / 1080;
  border: 1px solid rgba(196, 169, 106, 0.16);
  border-radius: 12px;
  background: #050505;
  display: grid;
  place-items: center;
  padding: 0.6rem;
  text-align: center;
  font-family: var(--font-label);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.32;
}

@media (max-width: 768px) {
  .blk__compare { grid-template-columns: 1fr; }
  .blk__list li { grid-template-columns: 2rem 1fr; }
}

/* Fußzeile am Ende jeder Fläche: der Hinweis, dass es seitlich weitergeht. */
.panel__onward {
  margin-top: auto;
  padding-top: clamp(1.6rem, 4vh, 2.4rem);
  border-top: 1px solid rgba(232, 224, 212, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.4;
}

/* ----------------------------------------------------------------------
   HANDY
   Der Würfel braucht Breite, damit Tiefe wirkt. Auf 390 px sieht ein
   3D-Schwenk gedrängt aus statt souverän — dort wird daraus ein seitlicher
   Schub. Bedienung und Aufbau bleiben identisch.
   ---------------------------------------------------------------------- */

@media (max-width: 768px) {
  .cube { perspective: none; }
  .cube__arrow { display: none; }              /* auf Touch wird gewischt */
  .panel { padding-top: clamp(5rem, 12vh, 7rem); }

  /* Hier wird geschoben, nicht gedreht — die Flächen müssen randlos
     aneinanderstoßen, sonst klafft beim Wechsel eine Lücke.
     Die Breite setzt cube.js entsprechend auf die volle Fensterbreite. */
  .cube__scroll { bottom: 0.7rem; }
  .cube__scroll .chev { font-size: 1.9rem; }
  .cube__hint { display: none; }               /* kein Platz, und Wischen erklärt sich */

  /* Statt den Körper zu drehen, schieben sich die beiden Flächen aneinander
     vorbei. Die 3D-Transformationen der Flächen entfallen dabei. */
  .cube.is-turning .cube__body { animation: none; }
  .cube.is-turning .face.is-leaving,
  .cube.is-turning .face.is-entering,
  .cube.is-turning.to-prev .face.is-entering { transform: none; }

  /* Beim seitlichen Schub gibt es keine Fläche, die sich vom Licht abwendet —
     die Schattierung wäre hier nur Schmutz. Die Oberfläche bleibt. */
  .cube.is-turning .face::after { display: none; }
  /* Randlos: Kantenlicht und Schatten hätten keinen Grund, auf den sie fielen. */
  .face { box-shadow: none; }

  .cube.is-turning .face.is-leaving  { animation: face-out var(--cube-dur, 900ms) var(--ease-smooth) both; }
  .cube.is-turning .face.is-entering { animation: face-in  var(--cube-dur, 900ms) var(--ease-smooth) both; }
  .cube.is-turning.to-prev .face.is-leaving  { animation-name: face-out-prev; }
  .cube.is-turning.to-prev .face.is-entering { animation-name: face-in-prev; }

  @keyframes face-out      { to   { transform: translateX(-100%); } }
  @keyframes face-in       { from { transform: translateX(100%); }  to { transform: translateX(0); } }
  @keyframes face-out-prev { to   { transform: translateX(100%); } }
  @keyframes face-in-prev  { from { transform: translateX(-100%); } to { transform: translateX(0); } }
}

/* ----------------------------------------------------------------------
   REDUZIERTE BEWEGUNG — aus der Drehung wird ein Überblenden.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cube { perspective: none; }
  .cube.is-turning .cube__body { animation: none; }
  .cube.is-turning .face.is-leaving,
  .cube.is-turning .face.is-entering,
  .cube.is-turning.to-prev .face.is-entering { transform: none; }
  .cube.is-turning .face::after { display: none; }   /* das Überblenden trägt schon */
  .cube.is-turning .face.is-leaving  { animation: cube-fade-out var(--cube-dur, 900ms) both; }
  .cube.is-turning .face.is-entering { animation: cube-fade-in  var(--cube-dur, 900ms) both; }
  .cube__arrow, .cube__hint { transition: none; }

  @keyframes cube-fade-out { to   { opacity: 0; } }
  @keyframes cube-fade-in  { from { opacity: 0; } }
}

/* ======================================================================
   DIE SEITE SELBST
   Ein Browser-Rahmen mit der echten Konzeptseite darin — nicht die
   Aufzeichnung. Innen laeuft sie in Desktopbreite (data-b) und wird als
   Ganzes skaliert: ein schmaler Rahmen wuerde der Engine drinnen ein
   Telefon vortaeuschen und die Hochkantfassung starten.

   Der Deckel ist Absicht, nicht Zierde. Ein Rahmen, der sofort lebt,
   schluckt jedes Scrollen, das der Flaeche galt. Deshalb: erst klicken,
   dann scrollen, Esc gibt wieder frei.
   ====================================================================== */

.live {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.live__screen {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(214, 201, 174, 0.14);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}

/* Die Leiste zitiert einen Browser, ohne einen zu spielen: ein Punkt, der
   Name der Seite, und rechts der Weg nach draussen. */
.live__bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.85rem;
  background: rgba(255, 255, 255, 0.045);
  border-bottom: 1px solid rgba(214, 201, 174, 0.12);
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
}

.live__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-light);
  opacity: 0.55;
  flex: none;
}

.live__adresse { opacity: 0.5; }

.live__out {
  margin-left: auto;
  color: var(--cream);
  opacity: 0.62;
  text-decoration: none;
  border-bottom: 1px solid rgba(214, 201, 174, 0.3);
  padding-bottom: 1px;
  transition: opacity 0.3s var(--ease-smooth);
}
.live__out:hover { opacity: 1; }

/* Das Fenster. Die Hoehe kommt aus dem Seitenverhaeltnis der Innenseite,
   damit nichts abgeschnitten wird und nichts leer steht. */
.live__view {
  position: relative;
  width: 100%;
  aspect-ratio: var(--live-ratio, 16 / 9);
  overflow: hidden;
  background: #0b0a08;
}

.live__scale {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--live-b, 1280px);
  height: var(--live-h, 720px);
  transform: scale(var(--live-s, 1));
  transform-origin: 0 0;
}

.live__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Solange nicht gefasst, gehen alle Eingaben an die Flaeche dahinter. */
  pointer-events: none;
}
.live.is-live .live__frame { pointer-events: auto; }

/* Waehrend der Drehung ist der Wuerfel raeumlich; ein iframe darin kostet
   Rechenzeit und flackert auf schwacher Hardware. Er tritt kurz ab. */
.cube.is-turning .live__frame { visibility: hidden; }

.live__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s var(--ease-smooth);
  /* Ohne das war der ganze Rahmen tot: das Standbild liegt IM DOM hinter dem
     Deckel, aber VOR dem iframe. Mit opacity:0 ist es unsichtbar und faengt
     trotzdem jedes Rad-Ereignis ab — das Scrollen ging dann an die Flaeche
     dahinter statt an die Seite im Rahmen. Unsichtbar ist nicht durchlaessig. */
  pointer-events: none;
}
.live.is-geladen .live__poster { opacity: 0; }

/* ----- Der Deckel -----
   Vor dem Klick der Hinweis, nach dem Klick weg. Die grosse Zeile steht
   hier und nicht im Kleingedruckten: dass man in diesem Rahmen selbst
   scrollen kann, ist die ganze Idee der Seite. */
.live__deckel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  border: 0;
  cursor: var(--cur-pointer);
  color: var(--cream-light);
  background:
    linear-gradient(180deg, rgba(6, 5, 4, 0.55) 0%, rgba(6, 5, 4, 0.78) 100%);
  backdrop-filter: blur(1.5px);
  transition: opacity 0.45s var(--ease-smooth);
}
.live.is-live .live__deckel { opacity: 0; pointer-events: none; }

.live__hinweis {
  font-family: var(--font-label);
  font-size: clamp(0.95rem, 2.1vw, 1.6rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-indent: 0.3em;          /* die Sperrung haengt sonst rechts nach */
}

.live__sub {
  font-family: var(--font-label);
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.68;
}

/* Der Ring als Zeichen: dieselbe Form wie das Scrollzeichen der Startseite. */
.live__ring {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(214, 201, 174, 0.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  opacity: 0.8;
}

.live.is-laedt .live__hinweis { opacity: 0.5; }

/* Solange der Rahmen lebt, steht klein dabei, wie man ihn wieder loswird. */
.live__frei {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  z-index: 3;
  padding: 0.35rem 0.6rem;
  border-radius: 3px;
  background: rgba(6, 5, 4, 0.72);
  font-family: var(--font-label);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-smooth);
}
.live.is-live .live__frei { opacity: 0.55; }

.live__note {
  font-family: var(--font-label);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.62;
}

/* ----- Beschriftung an den Pfeilen -----
   Ein Pfeil allein sagt „irgendwohin". Daneben steht jetzt, wohin. */
.cube__arrow {
  /* .cube__arrow ist ein Grid — grid-auto-flow, nicht flex-direction. */
  grid-auto-flow: row;
  gap: 0.55rem;
}
.cube__arrow-txt {
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.85;
}

/* Beschriftung am Scrollzeichen. Der Pfeil allein sagt nur „unten ist noch
   etwas" — dass man hier selbst scrollt, ist der Punkt der ganzen Seite. */
.cube__scroll { display: grid; justify-items: center; gap: 0.35rem; }
.cube__scroll-txt {
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.6;
}

/* Der Abschluss: ein Knopf, kein Textlink. */
.panel__cta {
  align-self: start;
  display: inline-block;
  padding: 0.95rem 2.1rem;
  border: 1px solid rgba(196, 169, 106, 0.5);
  border-radius: 2px;
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream-light);
  text-decoration: none;
  transition: background 0.4s var(--ease-smooth), border-color 0.4s var(--ease-smooth);
}
.panel__cta:hover {
  background: rgba(196, 169, 106, 0.12);
  border-color: var(--gold-light);
}
.panel__mail a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(214, 201, 174, 0.3);
}
.panel__mail a:hover { color: var(--cream-light); }

/* Marke und Sprachschalter stehen fest oben; auf schmalen Schirmen laeuft der
   Satz beim Scrollen darunter hindurch und beide werden unleserlich. Ein
   kurzer Verlauf legt sich dazwischen — nur dort, wo er gebraucht wird. */
@media (max-width: 900px) {
  .cube::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    /* Das Logo ist auf dem Telefon 80 px hoch und sitzt mit Abstand darunter
       bei etwa 110 px. Ein Verlauf von 88 px endete also VOR ihm, und der Satz
       lief genau in seiner Unterkante durch. */
    height: 8rem;
    z-index: 25;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(6, 5, 4, 0.92) 0%, rgba(6, 5, 4, 0) 100%);
  }
}

/* Die ganzseitige Uebernahme der Navigation liegt ueber allem. Pfeile,
   Standanzeige und Scrollzeichen wuerden darauf herumliegen, als gehoerten sie
   dazu. Sie treten fuer die Dauer ab. */
body.menu-open .cube__arrow,
body.menu-open .cube__hud,
body.menu-open .cube__hint,
body.menu-open .cube__scroll,
body.menu-open .face__rail {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-smooth);
}

/* ----------------------------------------------------------------------
   SCHMALERE FENSTER
   Der Wuerfel nimmt 82 % der Fensterbreite. Bei 1440 bleiben davon 130 px
   Rand je Seite, und der Pfeil ist 120 px breit — er lag also auf dem Satz.
   Zwei Stellschrauben statt einer: der Koerper wird etwas schmaler, die
   Pfeile deutlich kleiner.
   ---------------------------------------------------------------------- */
@media (max-width: 1500px) {
  .cube__arrow { width: 4.6rem; height: 4.6rem; margin-top: -2.3rem; }
  .cube__arrow svg { width: 42px; height: 19px; }
  .cube__arrow--prev { left: 0.3rem; }
  .cube__arrow--next { right: 0.3rem; }
  /* Die Beschriftung passt hier nicht mehr neben den Pfeil: sie ist breiter
     als der Knopf und wird am Fensterrand abgeschnitten. Unten links steht
     ohnehin, dass die Pfeile das Konzept wechseln. */
  .cube__arrow-txt { display: none; }
}

/* Auf schmaleren Fenstern fuellt der Koerper fast das ganze Bild, und die
   Anzeigen unten stehen zwangslaeufig auf dem Satz. Ein kurzer Verlauf legt
   sich dazwischen — dieselbe Loesung wie oben bei Marke und Zeichen. */
@media (max-width: 1500px) {
  .cube::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 6rem;
    z-index: 24;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(6, 5, 4, 0.92) 0%, rgba(6, 5, 4, 0) 100%);
  }
}

@media (max-width: 1500px) {
  .blk__facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .blk__facts { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------
   WEITER AM ENDE DER FLÄCHE
   Zwei Knöpfe mit dem Namen des Nachbarn, gebaut von cube.js. Sie stehen
   dort, wo sonst nichts mehr kommt: unter dem Abbinder. Sichtbar sind sie
   überall, denn auch am Rechner ist der Weg am Textende der natürlichere —
   die Pfeile am Fensterrand sind für die Ungeduldigen.
   ---------------------------------------------------------------------- */
.panel__weiter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.6rem, 2vw, 1rem);
  margin-top: clamp(1.4rem, 4vh, 2.2rem);
}

.weiter__knopf {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1em 1.3em;
  border: 1px solid rgba(196, 169, 106, 0.32);
  background: transparent;
  color: var(--cream-light);
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: var(--cur-pointer);
  text-align: left;
  transition: background-color 0.35s var(--ease-smooth),
              border-color 0.35s var(--ease-smooth);
}
.weiter__knopf--vor { justify-content: flex-end; text-align: right; }
.weiter__knopf--vor .weiter__text { justify-items: end; }
.weiter__knopf i { font-style: normal; color: var(--gold-light); font-size: 1.05rem; flex: none; }

.weiter__text { display: grid; gap: 0.28rem; }
.weiter__rolle {
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--gold-light);
  opacity: 0.75;
}
.weiter__name {
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  color: var(--cream-light);
}
.weiter__knopf:hover {
  background-color: rgba(196, 169, 106, 0.12);
  border-color: var(--gold-light);
}

/* Auf dem Telefon sind die Knöpfe der EINZIGE sichtbare Weg — dort dürfen
   sie auch aussehen wie einer: volle Breite übereinander statt nebeneinander,
   damit der Name nicht auf zwei Zeilen bricht. */
@media (max-width: 640px) {
  .panel__weiter { grid-template-columns: 1fr; }
  .weiter__knopf { font-size: 0.82rem; padding: 1.15em 1.2em; }
}

/* Der Hinweis „rechts → ALTUS" im Abbinder stimmt nur, solange es rechts
   einen Pfeil gibt. Wo er ausgeblendet ist, sagen die Knöpfe es besser. */
@media (max-width: 768px) {
  .panel__onward span:last-child { display: none; }
}