/* Projekte · „Würfelhimmel“ (projekte.html). Läuft nach css/seite.css, vogel.css und unterseiten.css:
   Kopf, Fuß, Knöpfe und Grundschrift kommen von dort. Hier nur Himmel, Würfel und der Raum. */

:root {
  --weiss: #ffffff;
  --ice: #c5ffff;
  --ingo: #e11d73;   /* wie seite.css (Barrierefreiheit, 23.10.2026) */
  --berry: #250026;
  --berry-82: #4c2e4d;
  --berry-55: #786178;   /* heißt weiter so, ist seit 20.10.2026 Berry 62 % wie --grau in seite.css (Kontrast für kleine Schrift) */
  --berry-16: #dcd6dc;
  --tuerkis-akzent: var(--tuerkis2);   /* Foto & Video (Ice ist auf Weiß zu blass); --tuerkis gehört seite.css */
  --gelb: #ff9700;             /* Websites & Webshops */

  --display: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --text: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --rand: clamp(16px, 4vw, 64px);
  --s: 540px;   /* Wandkante im Würfel, aus JS */
}

body.im-wuerfel { overflow: hidden; }
.himmel h1, .himmel p, .innen h3, .innen p, .innen ul, .innen dl { margin: 0; padding: 0; }
.innen ul { list-style: none; }

/* ---------- Himmel ---------- */
.himmel {
  position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden;
  /* Stichhimmel: feine Querlinien, oben dicht, zur Mitte hin offen (wie bei Escher) */
  background:
    linear-gradient(var(--weiss), var(--weiss)) padding-box;
  isolation: isolate;
}
.himmel-text {
  position: absolute; z-index: 3; left: var(--rand); top: 120px; max-width: min(460px, 80vw);
  background: radial-gradient(closest-side, var(--weiss) 70%, transparent);
  padding: 14px 18px 14px 0;
}
.himmel-text .kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--berry-55); }
.himmel-text .kicker b { width: 7px; height: 7px; border-radius: 50%; background: var(--ingo); }
.himmel-text h1 { font: 700 clamp(34px, 4.4vw, 64px)/.95 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.himmel-text h1 em { font-family: var(--serif); font-weight: 300; text-transform: none; font-variation-settings: "opsz" 144; display: block; letter-spacing: -.02em; }
.himmel-text .lead { margin-top: 18px; font-size: 16px; color: var(--berry-82); max-width: 30em; }

.hinweis {
  position: absolute; right: var(--rand); bottom: 28px; z-index: 3;
  font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--berry-55);
}

/* Boden: Schraffurband, auf dem der Flamingo steht */
.boden {
  position: absolute; left: 0; right: 0; bottom: 0; height: 9vh; z-index: 1; pointer-events: none;
  background: linear-gradient(var(--berry-16), var(--berry-16)) 0 0 / 100% 1px no-repeat;
}
/* Flamingo Puppe (seit 23.10.2026 statt des Stichs). Box wie die Rolle „schauen“ in js/flamingo.js
   (viewBox 40 40 1760 1555), der Körper steht etwa in der Mitte. Höhe und Lage setzt js/wuerfel.js (verteile). */
.raum-vogel {
  position: absolute; z-index: 4; left: clamp(0px, 3vw, 60px); bottom: calc(9vh - 1.5vh);
  height: min(56vh, 520px); aspect-ratio: 1760 / 1555; pointer-events: none; user-select: none;
}
.raum-vogel > img { position: absolute; left: 13%; bottom: 0; height: 97%; width: auto; }
.raum-vogel > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.raum-vogel.laeuft > img { display: none; }
/* Sprechblase über dem Kopf, Spitze zeigt hinunter zum Schnabel */
.raum-blase {
  position: absolute; left: 40%; bottom: 90%;   /* Kopf in Ruhe bei etwa 35 % / 13 % der Box */
  font: 500 13px/1.3 var(--mono); letter-spacing: .04em; color: var(--berry); white-space: nowrap;
  background: var(--weiss); border: 1px solid var(--berry-16); padding: 10px 14px; border-radius: 16px 16px 16px 4px;
  box-shadow: 0 10px 26px rgba(37, 0, 38, .1); transform-origin: 0 100%;
  animation: raum-blase-auf .5s 1.2s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes raum-blase-auf { from { opacity: 0; scale: .4; } }
@media (prefers-reduced-motion: reduce) { .raum-blase { animation: none; } }

/* ---------- Würfel im Himmel ---------- */
.wuerfel-feld { position: absolute; inset: 0; z-index: 2; perspective: 1600px; }
.wuerfel {
  position: absolute; width: var(--k); height: var(--k);
  transform-style: preserve-3d; cursor: pointer; background: none; border: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.wuerfel.deko { cursor: default; pointer-events: none; }
.koerper { position: absolute; inset: 0; transform-style: preserve-3d; }
.flaeche {
  position: absolute; inset: 0; backface-visibility: hidden;
  background-color: var(--weiss);
  box-shadow: inset 0 0 0 1px rgba(37,0,38,.14);
}
/* Deko: nur Kanten, wie ein Drahtmodell */
.deko .flaeche { background: none; backface-visibility: visible; box-shadow: inset 0 0 0 1px rgba(37,0,38,.28); }
.flaeche.vorn  { transform: translateZ(calc(var(--k) / 2)); }
.flaeche.hinten{ transform: rotateY(180deg) translateZ(calc(var(--k) / 2)); }
.flaeche.rechts{ transform: rotateY(90deg) translateZ(calc(var(--k) / 2)); }
.flaeche.links { transform: rotateY(-90deg) translateZ(calc(var(--k) / 2)); }
.flaeche.oben  { transform: rotateX(90deg) translateZ(calc(var(--k) / 2)); }
.flaeche.unten { transform: rotateX(-90deg) translateZ(calc(var(--k) / 2)); }

/* Beschriftung beim Hover: Fahne mit Haarlinie, wie eine Legende im Stich */
.schild {
  position: absolute; z-index: 6; left: 0; top: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  opacity: 0; visibility: hidden; white-space: nowrap;
}
.schild b { font: 400 italic clamp(26px, 2.6vw, 40px)/1 var(--serif); font-variation-settings: "opsz" 144; color: var(--berry); }
.schild span { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ingo); }
.schild b, .schild span { background: var(--weiss); padding: .18em .45em; }
.schild b { padding: .12em .5em .18em; border: 1px solid var(--berry-16); border-radius: 999px; }
.schild::after { content: ""; width: 1px; height: 22px; background: var(--berry-16); margin-top: 4px; }
/* Kein Platz über dem Würfel: Schild darunter, Haarlinie oben (js/wuerfel.js zeigeSchild) */
.schild.unten { flex-direction: column-reverse; }
.schild.unten::after { margin: 0 0 4px; }
/* Auf Touch-Geräten gibt es kein Hover: Beschriftung steht dauerhaft unter dem Würfel */
.wuerfel .marke {
  position: absolute; left: 50%; top: calc(100% + 18px); transform: translateX(-50%);
  font: 400 italic 18px/1 var(--serif); white-space: nowrap; display: none;
}
@media (hover: none) { .wuerfel .marke { display: block; } }
/* Handy: Namen dürfen zweizeilig stehen, damit sie neben die Würfel passen (js/wuerfel.js rechnet ihre Größe ein) */
@media (hover: none) and (max-width: 700px) {
  .wuerfel .marke { font-size: 16px; line-height: 1.1; white-space: normal; width: max-content; max-width: 8em; text-align: center; }
}

/* ---------- Im Würfel ---------- */
.innen {
  position: fixed; inset: 0; z-index: 200; overflow: hidden; overscroll-behavior: contain; touch-action: none;
  background: var(--weiss); scrollbar-width: none;
}
.innen::-webkit-scrollbar { display: none; }
.innen[hidden] { display: none; }
.innen-buehne { position: absolute; inset: 0; height: 100vh; height: 100svh; overflow: hidden; perspective: calc(var(--s) / 2); }
.innen-raum { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.iwand {
  position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2);
  width: var(--s); height: var(--s); backface-visibility: hidden;
  background: var(--weiss);
  font-size: var(--fs);
}
/* Alle Kanten des Würfels sichtbar, fein. Beim Zurückweichen ergeben sie die Schrägen. */
.iwand::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1.5px solid rgba(37,0,38,.32);
}
/* Inhalt in einem bildschirmgroßen Feld in der Wandmitte (die Wand selbst ist größer) */
.iwand-inhalt {
  position: absolute; left: 50%; top: 50%; width: var(--vw); height: var(--vh);
  display: grid; place-items: center; padding: 96px calc(var(--rand) + 44px) 96px var(--rand); /* rechts Platz für die Punkte */
}

/* Projektwand im Stil der Startseite (css/seite.css: Leistungen und Arbeiten).
   Werte in px wie dort, die Wand vor der Kamera steht 1:1 im Bild. */
/* Leistungsfarbe je Projekt: eine laute Farbe pro Wand, Titel bleibt Berry */
.tafel--pink    { --akzent: var(--ingo);    --akzent-text: var(--weiss); }
.tafel--tuerkis { --akzent: var(--tuerkis-akzent); --akzent-text: var(--berry); }
.tafel--berry   { --akzent: var(--berry);   --akzent-text: var(--weiss); }
.tafel--gelb    { --akzent: var(--gelb);    --akzent-text: var(--berry); }
.tafel {
  width: min(100%, 1240px); color: var(--berry);
  display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; font-size: 16px;
}
@media (min-aspect-ratio: 1/1) { .tafel { grid-template-columns: 1.15fr 1fr; } }
@media (max-aspect-ratio: 1/1) { .tafel { max-width: 560px; gap: 22px; } }
.tafel-text { min-width: 0; }

/* Bild wie .projekt .bild auf der Startseite, ohne Bild der Ingo-Ice-Verlauf mit Etikett */
.tafel-bild {
  position: relative; overflow: hidden; border-radius: 4px; width: 100%;
  aspect-ratio: 16 / 10; max-height: calc(var(--vh) - 200px);
  background:
    radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--akzent, var(--ingo)) 40%, transparent), transparent 55%),
    radial-gradient(90% 80% at 90% 90%, rgba(197,255,255,.9), transparent 60%),
    linear-gradient(135deg, var(--weiss), var(--ice));
}
/* Mit Bild: weiße Fläche mit feinem Rahmen, Bild ganz und mittig, oder im Ausschnitt aus der
   Projektbibliothek (--bild-x/-y/-z wie auf der Startseite) */
.tafel-bild:has(img) { background: var(--weiss); outline: 1px solid rgba(37, 0, 38, .14); outline-offset: -1px; }
.tafel-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
.tafel-bild img[style*="--bild-"] {
  object-fit: var(--bild-f, cover); object-position: var(--bild-x, 50%) var(--bild-y, 50%);   /* contain bei Zoom-out */
  transform: scale(var(--bild-z, 1)); transform-origin: var(--bild-x, 50%) var(--bild-y, 50%);
}
.tafel-bild.leer::after {
  content: attr(data-bild); position: absolute; left: 20px; bottom: 18px;
  font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--berry);
  background: var(--weiss); padding: 8px 10px; border-radius: 3px;
}

/* Große Nummer wie bei den Leistungen, in der Farbe der Leistung */
.tafel-nr {
  display: block; margin-bottom: 12px;
  font: 700 clamp(72px, min(11vw, 17vh), 200px)/.8 var(--display); letter-spacing: -.06em;
  color: var(--akzent); -webkit-text-stroke: 1.5px var(--akzent);
}
.tafel .kicker {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
  font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--berry-55);
}
.tafel .kicker b { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); }
.tafel-titel {
  font: 700 clamp(30px, min(3.8vw, 6.5vh), 68px)/.95 var(--display); letter-spacing: -.03em; text-transform: uppercase;
}
.tafel-titel em {
  display: block; margin-top: .08em;
  font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: -.03em;
  font-variation-settings: "opsz" 144; font-size: .62em; color: var(--berry-82);
}
.tafel-text > p { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; margin-top: 18px; color: var(--berry-82); max-width: 34em; }
/* Kunde und Leistung im Text (js/wuerfel.js tafel, 23.10.2026): Kunde fett in Berry, Leistung mit Textmarker
   in der Farbe des Würfels (wie die Marker bei den Prinzipien auf der Startseite) */
.tafel-kunde { font-weight: 600; color: var(--berry); }
.tafel-leistung {
  color: var(--berry); background: linear-gradient(transparent 48%, color-mix(in srgb, var(--akzent, var(--ingo)) 32%, transparent) 48%, color-mix(in srgb, var(--akzent, var(--ingo)) 32%, transparent) 96%, transparent 96%);
  padding: 0 .12em; margin: 0 -.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.tafel--berry .tafel-leistung { background: linear-gradient(transparent 48%, rgba(37, 0, 38, .12) 48%, rgba(37, 0, 38, .12) 96%, transparent 96%); }
.tafel--tuerkis .tafel-leistung { background: linear-gradient(transparent 48%, color-mix(in srgb, var(--tuerkis-akzent) 55%, transparent) 48%, color-mix(in srgb, var(--tuerkis-akzent) 55%, transparent) 96%, transparent 96%); }
/* Fakten wie auf der Startseite */
.tafel .fakten { margin: 20px 0 0; display: grid; gap: 10px; max-width: 34em; }
.tafel .fakten div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding-top: 10px; border-top: 1px solid var(--berry-16); }
.tafel .fakten dt { font: 500 11px/1.8 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--berry-55); }
.tafel .fakten dd { margin: 0; font-size: 15px; }
.tafel .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tafel .tags li { font: 500 12px/1 var(--mono); letter-spacing: .06em; padding: 9px 13px; border: 1px solid var(--berry-16); border-radius: 999px; }
.tafel .tags li:first-child { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.tafel .link-pfeil {
  display: inline-block; margin-top: 24px; font: 500 15px/1 var(--mono); letter-spacing: .06em;
  text-decoration: none; border-bottom: 1.5px solid; padding-bottom: 6px;
}
@media (max-aspect-ratio: 1/1) {
  .tafel-nr { font-size: clamp(56px, 18vw, 96px); }
  .tafel .fakten { display: none; }
}

.raus {
  position: fixed; z-index: 210; right: var(--rand); top: 22px;
  width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--berry); background: var(--weiss);
  cursor: pointer; display: grid; place-items: center;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background .25s;
}
.raus span { position: absolute; width: 20px; height: 1.5px; background: var(--berry); transform: rotate(45deg); transition: background .25s; }
.raus span + span { transform: rotate(-45deg); }
.raus:hover { transform: rotate(90deg); background: var(--ingo); }
.raus:hover span { background: var(--weiss); }
.zaehler {
  position: fixed; z-index: 210; bottom: 22px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  background: var(--weiss); color: var(--berry); padding: 10px 16px; border: 1px solid var(--berry-16); border-radius: 999px;
}
.zaehler { left: var(--rand); }
.zaehler b { color: var(--ingo); font-weight: 500; }
/* „Nächstes Projekt“: Pille mit wippendem Pfeil, unten mittig */
.weiter {
  position: fixed; z-index: 210; left: 50%; bottom: 22px; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  min-height: 52px; padding: 0 22px 0 26px; border-radius: 999px;
  border: 1.5px solid var(--berry); background: var(--berry); color: var(--weiss);
  font: 500 15px/1 var(--text); white-space: nowrap;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background .25s, color .25s;
}
.weiter i { position: relative; width: 10px; height: 14px; animation: wippen 1.6s cubic-bezier(.5,0,.5,1) infinite; }
.weiter i::before { content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: 12px; background: currentColor; translate: -50% 0; }
.weiter i::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; translate: -50% 0; rotate: 45deg; }
.weiter.hoch i { rotate: 180deg; }
.weiter:hover { background: var(--weiss); color: var(--berry); }
@keyframes wippen { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* Punkte rechts: einer je Projekt, aktueller länger, Name beim Hover */
.punkte {
  position: fixed; z-index: 210; right: calc(var(--rand) - 8px); top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; gap: 4px;
}
.punkte[hidden] { display: none; }
.punkte button {
  position: relative; width: 28px; height: 22px; border: 0; background: none; cursor: pointer; padding: 0;
}
.punkte button::after {
  content: ""; position: absolute; right: 9px; top: 50%; width: 8px; height: 8px; translate: 0 -50%;
  border-radius: 999px; background: var(--berry-16); transition: height .4s cubic-bezier(.2,.8,.2,1), background .3s;
}
.punkte button[aria-current="true"]::after { height: 22px; background: var(--ingo); }
.punkte button:hover::after { background: var(--berry); }
.punkte span {
  position: absolute; right: 34px; top: 50%; translate: 0 -50%; white-space: nowrap; pointer-events: none;
  font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--weiss); border: 1px solid var(--berry-16); border-radius: 999px; padding: 6px 10px;
  opacity: 0; transition: opacity .25s;
}
.punkte button:hover span, .punkte button:focus-visible span { opacity: 1; }

@media (max-width: 700px) {
  .zaehler { display: none; } /* am Handy zeigen die Punkte die Position */
  .himmel-text { top: 92px; }
  .himmel-text .lead { display: none; }
  .hinweis { display: none; }
  .raum-vogel { height: min(40vh, 340px); }
  .raum-blase { font-size: 12px; padding: 8px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .raus { transition: none; }
}