/* AK86 2026 – Projektseite: Ergänzungen zur Grundlage (base.css enthält die Szenen aus dem Prototyp).
   Kundenfarben kommen als --main/--sec/--k-* je Projekt (inline, inc/projekt.php). */

/* Im Prototyp hatten die Anhang-Kapitel feste Farben anderer Projekte; hier gelten die Farben des Projekts */
body.single-projekt #print, body.single-projekt #print-txt, body.single-projekt #print2,
body.single-projekt #webdev, body.single-projekt #webdev-plan { --main: inherit; --sec: inherit; }

/* Logo aus ACF: füllt die Bühne */
.plogo { width: 100%; height: 100%; display: block; overflow: visible; }

/* Geschäftsausstattung: Raster nach Anzahl der Mockups (Spalten/Reihen aus der Vorlage) */
#ausstattung .st-grid { --cols: var(--cl); --rows: var(--rl); }
@media (max-aspect-ratio: 4/3) { #ausstattung .st-grid { --cols: var(--cp); --rows: var(--rp); } }
@media (max-width: 760px) { #ausstattung .st-grid { --cols: var(--cm); --rows: var(--rm); } }

/* Magazin: Seitenverhältnis aus ACF (Breite der Doppelseite : Höhe) */
.pmag .book { aspect-ratio: var(--ar, 1.414); width: min(84vw, calc((100svh - 330px) * var(--ar, 1.414))); }
@media (max-width: 760px) { .pmag .book { width: 92vw; } }

/* Web-Entwicklung ohne Ablaufplan (der war im Prototyp von Hand für ein Projekt gezeichnet) */
#webdev-plan .wd-left, #entw-module .wd-left { grid-template-rows: minmax(0, 1fr); }
#webdev-plan .ch-head, #entw-module .ch-head, #entw-fit .ch-head { margin-bottom: clamp(10px, 2vh, 24px); }

/* Website ohne Punkte-Liste: Rahmen etwas breiter */
.web-grid.no-steps { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }

/* Farben: Werte unter dem Hex etwas größer, weil die Rollen-Zeile fehlt */
#farben .fill-txt .vals { font-size: 15px; margin-top: 14px; }

/* Logo-Text unter der Szene */
#logo + .chapter .panel { padding-top: clamp(40px, 6vh, 80px); }

/* Szenen und „Nächstes Projekt“ über die volle Bildschirmbreite, auch über 1920px (Alex 30.10.: Farbsektion nicht 100vw).
   Der Inhalt bleibt in der 1920er-Spalte (--hpad wie im Kopf). */
body.single-projekt .scene, body.single-projekt .next {
  --vw: calc(100vw - var(--sbw, 0px)); --hpad: max(var(--gut), calc((var(--vw) - 1920px) / 2 + var(--gut)));
  width: var(--vw); margin-left: calc(50% - var(--vw) / 2); }
body.single-projekt .scene-in { padding-left: var(--hpad); padding-right: var(--hpad); }
/* Kapitelnummern auf Projektseiten nicht farbig, sondern weiß mit 43 % (Alex 30.10.; vorher Kundenfarbe, bei Logo/Farben weiß) */
body.single-projekt .num { color: var(--acc); } body.single-projekt .blend .num { color: var(--static-white); } /* Test Label-Nummer (Alex 02.11.), vorher grau .43 */

/* Website-Kapitel: Riesen-Screenshot im Hintergrund (projekt.js, Test 30.10.). Abgedunkelt, rechts hinter den Punkten
   dunkler, damit der Text lesbar bleibt. Am Handy ruhiger. */
/* Alex 30.10.: etwas nach links raus, nach unten weich ausfaden (rechts ebenfalls weich, sonst harte Kante) */
#website .web-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 42%, transparent 92%), linear-gradient(to right, #000 52%, transparent 78%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 42%, transparent 92%), linear-gradient(to right, #000 52%, transparent 78%); mask-composite: intersect; }
#website .web-bg img { display: block; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top; margin-left: -14%; filter: grayscale(.15) brightness(.45); will-change: transform; }
#website .web-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--bgcolor-rgb),.1) 0%, rgba(var(--bgcolor-rgb),.3) 40%, rgba(var(--bgcolor-rgb),.85) 62%), linear-gradient(180deg, rgba(var(--bgcolor-rgb),.7) 0%, transparent 28%); }
/* Im Light Mode hell statt abgedunkelt, sonst liegt dunkle Schrift auf dunklem Bild. Der Schatten des Rahmens wurde an der Kapitelkante hart abgeschnitten (03.11.: „teilweise abgeschnitten“) */
#website { overflow: visible; }
html.lightmode #website .web-bg img { filter: grayscale(.15) opacity(.5); }
html.lightmode #website .web-bg::after { background: linear-gradient(90deg, rgba(var(--bgcolor-rgb),.1) 0%, rgba(var(--bgcolor-rgb),.4) 40%, rgba(var(--bgcolor-rgb),.92) 60%), linear-gradient(180deg, rgba(var(--bgcolor-rgb),.85) 0%, transparent 30%); }
html.lightmode #website .browser { box-shadow: 0 24px 60px rgba(0,0,0,.18); }
#website .scene-in { z-index: 1; }
/* Handy und flache Querformate: Rahmen klebt oben, alle Schritte offen darunter, kein Hintergrund-Screenshot (projekt.js, webHandy) */
@media (max-width: 760px), (max-width: 1023px) and (max-height: 560px) {
  #website.scene { height: auto; }
  #website .web-bg { display: none; }
  #website .scene-in { height: auto; display: block; padding-bottom: 0; }
  #website .web-grid { display: block; }
  #website .web-grid.no-steps { min-height: 200svh; }
  #website .browser { position: sticky; top: calc(var(--abh, 0px) + 70px); z-index: 3; height: clamp(220px, 44svh, 460px); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
  #website .web-panel { padding: 0; overflow: visible; }
  #website .wsteps { margin-top: 18px; border-top: 0; }
  #website .wsteps li, #website .wsteps li:not(.on) { display: block; min-height: 46svh; padding: 0 0 18px; border-bottom: 0; opacity: .72; }
  #website .wsteps li.on { opacity: 1; }
  #website .wsteps .d { grid-template-rows: 1fr; }
  #website .wsteps .d > p { padding-left: 0; font-size: 15px; }
  #website .web-live, #website .wnote { display: none; }
}
/* Website-Vorschau: Seitenmarke beim Umschalten (projekt.js flagShow) */
.shot-flag { position: absolute; left: 14px; top: 14px; z-index: 2; display: flex; align-items: baseline; gap: 10px; padding: 9px 14px; background: var(--bgcolor); color: var(--textcolor); font: 600 13px var(--f-body); pointer-events: none; opacity: 0; visibility: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.shot-flag b { font-family: var(--f-mono); font-weight: 600; color: var(--main); }
/* Hex-Wert und Farbwerte der Farben-Szene bündig mit der Spalte statt am Bildschirmrand (Alex 30.10.) */
body.single-projekt .fill-txt { left: var(--hpad); right: var(--hpad); }
body.single-projekt .next { padding-left: var(--hpad); padding-right: var(--hpad); }

/* Ergebnis: Sichtbarkeit bei Google (SISTRIX), Test 30.10. bei vimoria */
.seo { position: relative; z-index: 2; margin: clamp(40px, 6vw, 96px) var(--gut) 0; }
.seo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(24px, 4vw, 80px); align-items: end; border-top: 1px solid var(--line); padding-top: 26px; }
.seo-n b { display: block; font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; font-size: clamp(64px, 7.5vw, 140px); line-height: .88; letter-spacing: -.03em; color: var(--main); }
.seo-n.sm b { font-size: clamp(40px, 4.2vw, 76px); color: var(--textcolor); }
.seo-n span { display: block; font-weight: 700; font-size: clamp(17px, 1.3vw, 21px); margin-top: 10px; }
.seo-n em { display: block; font-style: normal; font-family: var(--f-mono); font-size: 13px; color: rgba(var(--gridcolor-rgb),.7); margin-top: 4px; }
.seo-n + .seo-n { margin-top: clamp(22px, 3vh, 36px); }
.seo-chart { margin: 0; }
.seo-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.seo-chart polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.seo-chart .ln-top { stroke: var(--main); stroke-width: 4; }
.seo-chart .ln-all { stroke: rgba(var(--gridcolor-rgb),.55); stroke-width: 2; }
.seo-chart text { font: 13px var(--f-mono); fill: rgba(var(--gridcolor-rgb),.6); }
.seo-chart figcaption { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 13px; color: rgba(var(--gridcolor-rgb),.7); margin-top: 8px; }
.seo-chart .lg { display: inline-block; width: 18px; height: 3px; background: var(--main); } .seo-chart .lg.all { background: rgba(var(--gridcolor-rgb),.55); margin-left: 14px; }
.seo-kw { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.seo-kw li { border: 1px solid var(--line); padding: 8px 12px; font-size: 15px; }
.seo-kw b { font-family: var(--f-mono); color: var(--main); margin-right: 8px; }
@media (max-width: 900px) { .seo-grid { grid-template-columns: 1fr; } }
/* Search-Console-Summen (Klicks, Impressionen, Klickrate) über den SISTRIX-Zahlen */
.gsc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 56px); border-top: 1px solid var(--line); padding-top: 26px; margin-bottom: clamp(34px, 5vh, 60px); }
.gsc-n b { display: block; font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; font-size: clamp(40px, 4.6vw, 88px); line-height: .9; letter-spacing: -.03em; color: var(--textcolor); }
.gsc-n:first-child b { color: var(--main); }
.gsc-n span { display: block; font-weight: 700; font-size: clamp(16px, 1.2vw, 20px); margin-top: 10px; }
.gsc .perf-note { grid-column: 1 / -1; margin-top: 14px; }
@media (max-width: 760px) { .gsc { grid-template-columns: 1fr; gap: 22px; } }
/* Sichtbarkeitskurve (SISTRIX) */
.seo-chart.si .ln-top { stroke-width: 5; }
.seo-chart .si-base { stroke: var(--line); stroke-width: 1; }
.seo-chart .si-dot { fill: var(--main); stroke: var(--ink); stroke-width: 3; }
/* Diagramme: Hilfslinien, Hover mit Linie, Punkt und Schild */
.seo-chart { position: relative; cursor: crosshair; }
.seo-chart .si-grid { stroke: rgba(var(--gridcolor-rgb),.08); stroke-width: 1; }
.seo-chart .si-tick { font: 12px var(--f-mono); fill: rgba(var(--gridcolor-rgb),.45); }
.seo-chart .seo-vl { stroke: rgba(var(--gridcolor-rgb),.4); stroke-width: 1; opacity: 0; transition: opacity .2s; }
.seo-chart .seo-hd { fill: var(--gridcolor); stroke: var(--main); stroke-width: 3; opacity: 0; transition: opacity .2s; }
.seo-chart.hov .seo-vl, .seo-chart.hov .seo-hd { opacity: 1; }
.seo-tip { position: absolute; left: 0; top: 0; z-index: 3; transform: translate(-50%, calc(-100% - 18px)); background: var(--bgcolor); border: 1px solid rgba(var(--gridcolor-rgb),.25); padding: 9px 13px; font: 13px/1.45 var(--f-mono); color: var(--textcolor); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s; }
.seo-tip b { display: block; color: var(--main); font-weight: 600; }
.seo-chart.hov .seo-tip { opacity: 1; }
/* Moodboard quadratisch, 6 pro Reihe, weitere Bilder in neuer Zeile; am Handy 3 pro Reihe (Alex 30.10.) */
/* Moodboard als Collage (Alex 02.11.2026, Vorbild rubenwalma.nl): Bilder überlappen, jedes mit eigener Größe, Lage und Ebene
   (projekt.js rechnet sie), eckig wie alles bei AK86; Duoton in Ruhe, Farbe beim Drüberfahren. Klick öffnet die Galerie (.mg). */
body.single-projekt .mood-col { position: relative; width: 100%; height: 560px; }
body.single-projekt .mood-col .mood-i { position: absolute; margin: 0; cursor: pointer; box-shadow: 0 24px 50px -14px rgba(0, 0, 0, .65); --d1: var(--k-yellow); --d2: var(--k-petrol); }
body.single-projekt .mood-col .mood-i img { transition: filter .5s, transform .7s cubic-bezier(.2, .8, .2, 1); }
body.single-projekt .mood-col .mood-i:hover, body.single-projekt .mood-col .mood-i:focus-visible { z-index: 40 !important; }
body.single-projekt .mood-col .mood-i:hover img { filter: none; mix-blend-mode: normal; transform: scale(1.04); }
@media (max-width: 760px) {
  body.single-projekt .mood-col { height: auto !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.single-projekt .mood-col .mood-i { position: relative; aspect-ratio: 1; }
}
/* Galerie: die Bilder fliegen aus der Collage in eine Reihe, die sich mit Schwung wischen lässt */
.mg { position: fixed; inset: 0; z-index: 90; cursor: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.mg-bg { position: absolute; inset: 0; background: rgba(var(--bgcolor-rgb),.97); }
.mg-s { position: fixed; margin: 0; overflow: hidden; z-index: 1; }
.mg-s img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.mg-s .mg-c { filter: none; mix-blend-mode: normal; opacity: 0; }
.mg-x { position: absolute; top: 28px; right: var(--gut); z-index: 3; width: 56px; height: 56px; border: 1px solid rgba(var(--gridcolor-rgb),.4); background: rgba(var(--bgcolor-rgb),.4); color: var(--textcolor); font-size: 18px; cursor: pointer; }
.mg-x { overflow: hidden; isolation: isolate; transition: color .25s, border-color .25s; }
.mg-x span { position: relative; z-index: 1; }
/* Schließen füllt sich beim Drüberfahren wabernd von unten (03.11.: „füllen oder wabern / rauch beim schließen button“) */
.mg-x::before { content: ''; position: absolute; inset: -14px; z-index: 0; background: var(--c1, var(--static-maincolor)); filter: url(#mgRauch); transform: translateY(100%); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.mg-x:hover, .mg-x:focus-visible { border-color: var(--gridcolor); color: var(--static-white); }
.mg-x:hover::before, .mg-x:focus-visible::before { transform: none; }
.mg-f { position: absolute; }
.mg-ui { position: absolute; left: 50%; bottom: 5vh; z-index: 3; transform: translateX(-50%); display: grid; justify-items: center; gap: 12px; }
.mg-cap { font: 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.6); white-space: nowrap; }
.mg button { cursor: pointer; }
.mg-cur { position: fixed; left: 0; top: 0; z-index: 4; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--c1, var(--static-maincolor)); color: var(--textcolor); display: grid; place-items: center; font-size: 22px; pointer-events: none; transition: scale .25s, opacity .25s; }
.mg.drag .mg-cur { scale: .8; }
/* Auf den Bildern kehrt der Zeiger die Farben um (03.11.: „Multiply bzw difference wenn er auf den Biodern ist“) */
.mg-cur.auf-bild { background: var(--static-white); color: #000; mix-blend-mode: difference; }
.mg-cur.off { opacity: 0; scale: .4; }
html.mg-open { overflow: hidden; }
/* Über Knöpfen legt sich wie in den anderen Galerien der eckige Rahmen um das Ziel, der Kreis blendet dafür aus */
html.mg-open .cur { opacity: 0; transition: width .3s, height .3s, margin .3s, background-color .25s, border-color .25s, border-width .3s, opacity .2s; }
html.mg-open .cur.snap { opacity: 1; z-index: 91; }
@media (hover: none) { .mg { cursor: auto; } .mg-cur { display: none; } }

/* Ergebnis „technischer“ (Alex 30.10.): Kopfzeile, Keyword-Tabelle; Zahlen wieder in der breiten Display-Schrift (Alex: „für die Zahlen die andere Typo“) */
/* Dunkle Fläche, Rahmen und Eck-Kreuze wieder raus (Alex 30.10.: „das sah eben besser aus“, „den Rand kannst du auch entfernen“).
   Stattdessen Milchglas wie bei den Kacheln, je Element eine eigene Kachel (Alex: „einzelne Hintergründe für die einzelnen Elemente …
   jeden Lighthouse-Score einzeln, nur mal testen“) */
body.single-projekt .gsc, body.single-projekt .seo-nums, body.single-projekt .seo-chart, body.single-projekt .seo-tabw, body.single-projekt .perf-grid li {
  background-color: rgba(var(--gridcolor-rgb),.08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: clamp(20px, 2vw, 34px); transition: background-color .35s; }
body.single-projekt :is(.gsc, .seo-nums, .seo-chart, .seo-tabw, .perf-grid li):hover { background-color: rgba(var(--gridcolor-rgb),.15); }
body.single-projekt .gsc { margin-bottom: 12px; }
body.single-projekt .seo-grid { align-items: stretch; gap: 12px; }
body.single-projekt .seo-nums { display: flex; flex-direction: column; justify-content: flex-end; }
body.single-projekt .seo-tabw { margin-top: 12px; }
body.single-projekt .seo-tab { margin-top: 0; }
body.single-projekt .perf-grid { gap: 12px; }
body.single-projekt .seo > .perf-note { margin-top: 14px; }
.data-hd { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; font: 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.6); padding-bottom: 14px; border-bottom: 1px solid rgba(var(--gridcolor-rgb),.12); margin-bottom: clamp(22px, 3vh, 36px); }
.data-hd b { color: var(--main); font-weight: 600; }
body.single-projekt .gsc, body.single-projekt .seo-grid { border-top: 0; padding-top: 0; }
body.single-projekt .perf-grid { border-top: 0; }
.gsc-n { border-left: 1px solid rgba(var(--gridcolor-rgb),.12); padding-left: 16px; }
body.single-projekt .gsc-n span, body.single-projekt .seo-n span { font: 400 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.7); }
.seo-tab { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: clamp(26px, 4vh, 44px); font: 13px var(--f-mono); }
.seo-tab th { text-align: left; font-weight: 400; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.5); padding: 0 12px 8px 0; border-bottom: 1px solid rgba(var(--gridcolor-rgb),.16); }
.seo-tab th:first-child { width: 4.5em; } .seo-tab th:last-child { width: 46%; }
.seo-tab td { padding: 9px 12px 9px 0; border-bottom: 1px solid rgba(var(--gridcolor-rgb),.08); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-tab td:first-child { color: var(--main); }
.seo-tab td:last-child { color: rgba(var(--gridcolor-rgb),.5); }
.seo-chart .si-pt { fill: var(--ink); stroke: var(--main); stroke-width: 2; }
.seo-chart .si-dot { fill: var(--main); stroke: var(--ink); stroke-width: 3; }
.seo-chart .si-xt { stroke: rgba(var(--gridcolor-rgb),.3); stroke-width: 1; }
.seo-chart .si-xl { font: 8.5px var(--f-mono); letter-spacing: .06em; fill: rgba(var(--gridcolor-rgb),.5); text-transform: uppercase; }
@media (max-width: 760px) { .seo-tab th:last-child, .seo-tab td:last-child { display: none; } .gsc-n { border-left: 0; padding-left: 0; } }
body.single-projekt .seo-chart .si-tick { font-size: 10px; }
/* Kacheln: Abstand oben auch in der Search-Console-Kachel, Trennlinie nur zwischen den Werten (Alex 30.10.: „ganz oben passt was nicht“) */
body.single-projekt .gsc { padding-top: clamp(20px, 2vw, 34px); }
body.single-projekt .gsc-n:first-child { border-left: 0; padding-left: 0; }

/* Kopf: Fakten nach Anzahl verteilen, Team mit kleinen Porträts (Alex 30.10.: verantwortliches Team wieder rein) */
body.single-projekt .facts { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
@media (max-width: 1023px) { body.single-projekt .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { body.single-projekt .facts { grid-template-columns: 1fr 1fr; } }
.team-mini { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 2px 0 0; padding: 0; }
.team-mini li { display: flex; align-items: center; gap: 8px; }
.team-mini img { display: block; width: 32px; height: 32px; object-fit: cover; object-position: top center; filter: grayscale(1); }

/* Logo: Ansicht Pfad / Dunkel / Hell (wie live), erst wenn das Logo fertig ist */
.logo-vars { position: absolute; right: var(--hpad, var(--gut)); bottom: clamp(20px, 5vh, 56px); z-index: 4; display: flex; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .35s, transform .35s; }
#logo.done .logo-vars { opacity: 1; pointer-events: auto; transform: none; }
.logo-vars button { font: 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--textcolor); background: var(--bgcolor); border: 1px solid rgba(var(--gridcolor-rgb),.3); padding: 10px 14px; margin-left: -1px; cursor: pointer; transition: background-color .2s, color .2s; }
.logo-vars button:hover { background: var(--surface-4); }
.logo-vars button.on { background: var(--gridcolor); color: var(--bgcolor); border-color: var(--gridcolor); }
#logo .artboard { transition: background-color .45s; }
#logo.v-dunkel .artboard { background-color: var(--bgcolor); background-image: var(--grid); }
#logo.v-pfad .artboard { background-color: transparent; background-image: none; }
#logo .guides { pointer-events: none; }
#logo .plogo path, #logo .plogo polygon, #logo .plogo rect, #logo .plogo circle, #logo .plogo ellipse, #logo .plogo polyline { transition: fill .45s, fill-opacity .45s, stroke-opacity .45s; }
/* Farbschild beim Drüberfahren: Farbfeld + Hex-Wert */
.logo-tip { position: absolute; left: 0; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; background: var(--bgcolor); border: 1px solid rgba(var(--gridcolor-rgb),.25); font: 600 13px var(--f-mono); color: var(--textcolor); pointer-events: none; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.logo-tip.on { opacity: 1; }
.logo-tip i { display: block; width: 22px; height: 22px; border: 1px solid rgba(var(--gridcolor-rgb),.35); }
@media (max-width: 760px) { .logo-vars button { padding: 9px 10px; font-size: 11px; } }

/* Rahmen zum Abschluss: Budget und Dauer als Milchglas-Kacheln (Hard Facts der alten Seite) */
.rahmen { position: relative; z-index: 2; margin: clamp(60px, 8vw, 140px) var(--gut) clamp(20px, 4vw, 60px); }
.pj-werkzeuge { position: relative; z-index: 2; margin: clamp(40px, 6vw, 100px) var(--gut) clamp(20px, 4vw, 60px); }
.pj-werkzeuge .ttiles { grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 10vw, 170px), 1fr)); }
.rahmen-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; } /* Budget breiter, 60/40 (Alex 30.10.) */
.rh { background-color: rgba(var(--gridcolor-rgb),.08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: clamp(20px, 2vw, 34px); transition: background-color .35s; }
.rh:hover { background-color: rgba(var(--gridcolor-rgb),.15); }
.rh h3 { font: 400 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.7); margin: 0 0 22px; }
.rh p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.rh b { display: inline-block; white-space: nowrap; font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; font-size: clamp(34px, 3.5vw, 68px); line-height: .9; letter-spacing: -.03em; color: var(--main); font-variant-numeric: tabular-nums; }
.rh .pre { font: 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.7); }
@media (max-width: 760px) { .rahmen-grid { grid-template-columns: 1fr; } }

/* Lesbarkeit (03.11.: „es gibt hier und da elemente die schwer zu lesen sind, sowohl dunkel aber vor allem auf hell“): Glas deckt mehr, Beschriftungen kräftiger, Kundenfarbe bei Schrift zum Grund hin angepasst */
body.single-projekt :is(.gsc, .seo-nums, .seo-chart, .seo-tabw, .perf-grid li), .rh { background-color: rgba(var(--bgcolor-rgb),.55); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
body.single-projekt :is(.gsc, .seo-nums, .seo-chart, .seo-tabw, .perf-grid li):hover, .rh:hover { background-color: rgba(var(--bgcolor-rgb),.7); }
html.lightmode body.single-projekt :is(.gsc, .seo-nums, .seo-chart, .seo-tabw, .perf-grid li), html.lightmode .rh { background-color: rgba(var(--bgcolor-rgb),.68); }
html.lightmode body.single-projekt :is(.gsc, .seo-nums, .seo-chart, .seo-tabw, .perf-grid li):hover, html.lightmode .rh:hover { background-color: rgba(var(--bgcolor-rgb),.82); }
.data-hd, .rh h3, .rh .pre, body.single-projekt .gsc-n span, body.single-projekt .seo-n span { color: rgba(var(--gridcolor-rgb),.88); }
body.single-projekt .perf-note { opacity: .88; }
body.single-projekt .pr span { opacity: .88; }
body.single-projekt .panel p { color: rgba(var(--gridcolor-rgb),.96); }
.wsteps li { opacity: .62; }
.wsteps li:not(.on):hover { opacity: .85; }
html.lightmode body.single-projekt :is(.data-hd b, .wsteps .t b, .rh b, .seo-n b, .gsc-n:first-child b, .seo-kw b, .seo-tab td:first-child, .web-live span a) { color: color-mix(in srgb, var(--main) 68%, #000); }
html.darkmode body.single-projekt :is(.data-hd b, .wsteps .t b, .rh b, .seo-n b, .gsc-n:first-child b, .seo-kw b, .seo-tab td:first-child, .web-live span a) { color: color-mix(in srgb, var(--main) 60%, #fff); }
html.lightmode body.single-projekt :not(.blend) > .num { color: color-mix(in srgb, var(--acc) 62%, #000); }
html.darkmode body.single-projekt :not(.blend) > .num { color: color-mix(in srgb, var(--acc) 45%, #fff); }

/* ---------- Entwicklung (06.11.2026): Gefordert. Geliefert. + Was das Tool kann. ---------- */
#entw-fit .ef-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 64px); align-items: center; }
.ef-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ef-t { position: relative; min-height: clamp(96px, 15vh, 150px); padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; border: 1px dashed rgba(var(--gridcolor-rgb),.35); background: rgba(var(--gridcolor-rgb),.03); overflow: hidden; transition: border-color .35s, background-color .35s, transform .45s cubic-bezier(.2,.8,.2,1); }
.ef-t::before { content: ""; position: absolute; inset: 0; background: var(--surface-6); transform: translateY(-102%); transition: transform .45s cubic-bezier(.2,.8,.2,1); z-index: 0; }
.ef-t > * { position: relative; z-index: 1; }
.ef-n { font-family: var(--f-mono); font-size: 11px; color: rgba(var(--gridcolor-rgb),.5); }
.ef-t b { font-family: var(--f-ext); font-stretch: 112%; font-weight: 800; font-size: clamp(15px, 1.25vw, 21px); line-height: 1.2; }
.ef-s { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.55); }
/* Standardsoftware: grauer Block fällt hinein; mit Umweg nur halb und schraffiert */
.ef-t.std { border-style: solid; border-color: var(--surface-7); }
.ef-t.std::before { transform: none; }
.ef-t.std.um::before { transform: translateY(45%); background: repeating-linear-gradient(135deg, var(--surface-6) 0 7px, transparent 7px 13px); }
.ef-t.std.um { border: 2px dashed var(--gridcolor); }
.ef-t.std.um .ef-s { color: var(--gridcolor); }
/* Maßanfertigung: passt genau */
.ef-t.ok { border: 2px solid var(--main); background: color-mix(in srgb, var(--main) 42%, rgba(15,15,14,.55)); transform: scale(1.02); box-shadow: 0 0 40px color-mix(in srgb, var(--main) 30%, transparent); }
.ef-t.ok::before { transform: translateY(102%); }
.ef-t.ok .ef-s { color: #fff; }
.ef-val.txt b { font-size: clamp(64px, 7.4vw, 140px); white-space: nowrap; }
.ef-who { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--main); }
.ef-val { display: flex; align-items: baseline; gap: .06em; margin-top: 8px; font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; letter-spacing: -.04em; line-height: .82; font-variant-numeric: tabular-nums; }
.ef-val b { font-size: clamp(84px, 11vw, 210px); font-weight: 900; }
.ef-val span { font-size: clamp(30px, 3.6vw, 66px); }
.ef-cap { margin-top: 14px; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.45; color: rgba(var(--gridcolor-rgb),.86); max-width: 32ch; min-height: 4.4em; }
.ef-bars { display: grid; gap: 10px; margin-top: 18px; max-width: 420px; }
.ef-bars div { display: grid; grid-template-columns: 88px minmax(0, 1fr) 70px; gap: 10px; align-items: center; font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.ef-bars i { height: 10px; display: block; background: rgba(var(--gridcolor-rgb),.08); position: relative; overflow: hidden; }
.ef-bars i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); }
.ef-b1::after { width: calc(var(--w, 85) * 1%); background: repeating-linear-gradient(135deg, var(--surface-7) 0 6px, transparent 6px 10px); }
.ef-b2::after { background: var(--main); }
.ef-bars em { font-style: normal; text-align: right; }

/* Was das Tool kann: das Editor-Fenster der Web-Entwicklung, statt Code baut sich die Anwendung auf */
.em-body { background: var(--surface-0); }
.em-pane { position: absolute; inset: 0; padding: clamp(14px, 2vw, 24px); display: flex; flex-direction: column; gap: 14px; opacity: 0; visibility: hidden; }
.em-pane.on { opacity: 1; visibility: visible; }
.em-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.em-h b { font-family: var(--f-ext); font-stretch: 112%; font-weight: 800; font-size: clamp(16px, 1.4vw, 22px); color: #fff; }
.em-h span, .em-hint { font-family: var(--f-mono); font-size: 11px; color: rgba(255,255,255,.4); }
.em-hint { position: absolute; right: 12px; bottom: 10px; border: 1px dashed rgba(255,255,255,.3); padding: 3px 8px; }
.em-tbl { display: grid; gap: 4px; font: 12px/1.4 var(--f-mono); color: #e8e6df; }
.em-tbl > div { display: grid; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); gap: 12px; padding: 8px 12px; }
.em-hd { color: rgba(255,255,255,.4); border-bottom: 1px solid var(--surface-5); }
.em-r { background: var(--surface-1); border-left: 2px solid transparent; opacity: 0; transform: translateX(-18px); transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.em-r.on { opacity: 1; transform: none; }
.em-r.new { border-left-color: var(--main); }
.em-st i { font-style: normal; color: rgba(255,255,255,.4); }
.em-st b { display: none; font-weight: 600; color: #50BBB8; }
.em-r.done .em-st i { display: none; }
.em-r.done .em-st b { display: inline; }
.em-beleg { position: absolute; right: clamp(14px, 2vw, 28px); top: 54px; width: min(46%, 300px); padding: 16px 18px; background: #f3f1ee; color: #1b1b1a; font: 11px/1.5 var(--f-mono); box-shadow: 0 30px 70px rgba(0,0,0,.6); transform: translateY(calc((1 - var(--f, 0)) * -130%)) rotate(calc((1 - var(--f, 0)) * -4deg)); opacity: var(--fo, 0); }
.em-beleg b { display: block; font: 800 15px var(--f-ext); }
.em-beleg hr { border: 0; border-top: 1px solid #ccc; margin: 8px 0; }
.em-beleg i { display: block; height: 6px; background: #d9d6d2; margin-top: 6px; }
.em-beleg i:nth-of-type(2) { width: 70%; }
.em-sum { display: flex; justify-content: space-between; font-weight: 600; }
.em-sum em { font-style: normal; }
.em-cal { display: grid; grid-template-columns: minmax(90px, 1.4fr) repeat(14, minmax(0, 1fr)); gap: 4px; align-items: center; font: 11px var(--f-mono); color: rgba(255,255,255,.75); }
.em-d { text-align: center; color: rgba(255,255,255,.35); font-size: 10px; }
.em-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-cal i { height: 24px; background: var(--surface-2); transition: background-color .25s, transform .25s; }
.em-cal i.on { background: var(--main); transform: scaleY(1.08); }
.em-file { position: absolute; left: 50%; top: 52%; width: 250px; padding: 14px 16px; border: 1px solid var(--main); background: rgba(15,15,14,.96); font: 12px var(--f-mono); color: #fff; box-shadow: 0 0 60px color-mix(in srgb, var(--main) 35%, transparent);
  transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(var(--s, .6)) rotate(var(--r, 0deg)); opacity: var(--o, 0); }
.em-file b { display: block; color: var(--main); margin-bottom: 8px; font-weight: 600; }
.em-file i { display: block; height: 6px; background: rgba(255,255,255,.16); margin-top: 6px; }
.em-file i:nth-of-type(2) { width: 82%; }
.em-file i:nth-of-type(3) { width: 90%; }
.em-file i:nth-of-type(4) { width: 60%; }
.em-shot { position: absolute; inset: 0; margin: 0; }
.em-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }

@media (max-width: 1023px) {
  #entw-fit .ef-grid { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; }
  .ef-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ef-t { min-height: 74px; padding: 10px 12px; }
  .ef-val b { font-size: 76px; }
  .ef-cap { min-height: 0; }
  .ef-bars { display: none; }
  .em-beleg { width: 56%; }
  .em-cal { grid-template-columns: 70px repeat(14, minmax(0, 1fr)); gap: 2px; }
}
@media (max-width: 760px) {
  .ef-t b { font-size: 14px; }
  .ef-n { display: none; }
  .em-tbl > div { gap: 6px; padding: 6px 8px; font-size: 10.5px; grid-template-columns: 1.4fr 1fr 1fr; }
  .em-tbl > div > span:nth-child(n+3):not(.em-st) { display: none; }
}

/* Passform deutlicher (06.11.2026, Alex: „der Unterschied wird gar nicht klar“):
   Standardteile haben eine feste Größe und lassen in jeder Form Platz frei, Umwege sitzen schief und halb.
   Unsere Teile füllen die Form exakt, mit Haken. Am Ende stehen beide Zahlen nebeneinander. */
#entw-fit .ef-who { display: block; font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: .95; font-size: clamp(26px, 3vw, 54px); color: rgba(var(--gridcolor-rgb),.5); transition: color .3s; }
#entw-fit[data-mode="ok"] .ef-who { color: var(--main); }
#entw-fit .ef-t.std::before { inset: 8px auto auto 8px; width: 68%; height: 62%; transform: none; background: var(--surface-6); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
#entw-fit .ef-t.std.um::before { width: 46%; height: 48%; transform: rotate(-7deg) translate(6px, 26px); background: repeating-linear-gradient(135deg, var(--surface-7) 0 7px, var(--surface-5) 7px 13px); }
#entw-fit .ef-t.std { border: 1px dashed rgba(var(--gridcolor-rgb),.55); }
#entw-fit .ef-t.std.um { border: 2px dashed var(--gridcolor); }
#entw-fit .ef-t.ok { border: 2px solid var(--main); background: transparent; box-shadow: 0 0 50px color-mix(in srgb, var(--main) 40%, transparent); }
#entw-fit .ef-t.ok::before { inset: 0; width: auto; height: auto; transform: none; background: var(--main); opacity: .92; }
#entw-fit .ef-t.ok::after { content: "✓"; position: absolute; right: 12px; top: 8px; z-index: 1; font: 900 clamp(20px, 1.8vw, 30px)/1 var(--f-ext); color: #fff; }
#entw-fit .ef-t.ok b, #entw-fit .ef-t.ok .ef-n, #entw-fit .ef-t.ok .ef-s { color: #fff; }
#entw-fit .ef-nums { display: flex; align-items: flex-end; gap: clamp(14px, 2vw, 32px); margin-top: 10px; }
#entw-fit .ef-old { display: none; padding-bottom: .4em; }
#entw-fit[data-mode="ok"] .ef-old { display: block; }
#entw-fit .ef-old b { display: block; font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; font-size: clamp(30px, 3.4vw, 60px); line-height: .9; letter-spacing: -.03em; color: rgba(var(--gridcolor-rgb),.38); text-decoration: line-through; text-decoration-thickness: .08em; text-decoration-color: var(--gridcolor); white-space: nowrap; }
#entw-fit .ef-old span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.5); }
#entw-fit .ef-val { margin-top: 0; }
#entw-fit[data-mode="ok"] .ef-val { color: var(--main); text-shadow: 0 0 60px color-mix(in srgb, var(--main) 45%, transparent); }
#entw-fit .ef-bars { display: none; }
@media (max-width: 1023px) { #entw-fit .ef-who { font-size: 26px; } #entw-fit .ef-old b { font-size: 28px; } }
#entw-fit .ef-who { font-size: clamp(22px, 2.5vw, 44px); }
#entw-fit .ef-nums { flex-wrap: wrap; row-gap: 4px; }
#entw-fit[data-mode="ok"] .ef-val b { font-size: clamp(72px, 8.4vw, 160px); }
#entw-fit[data-mode="ok"] .ef-val span { font-size: clamp(26px, 2.8vw, 52px); }

/* Umwege sichtbar (06.11.2026): Linien von den Umweg-Kacheln zu Zetteln, die bei der Maßanfertigung abreißen und fallen */
#entw-fit .ef-tiles { position: relative; }
#entw-fit .ef-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
#entw-fit .ef-lines path { fill: none; stroke: var(--gridcolor); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: 0; transition: opacity .35s; }
#entw-fit .ef-lines path.on { opacity: .85; animation: ef-ants 1s linear infinite; }
#entw-fit .ef-lines path.cut { opacity: 0; transition: opacity .15s; }
@keyframes ef-ants { to { stroke-dashoffset: -22; } }
#entw-fit .ef-chip { position: absolute; z-index: 4; transform: translate(-50%, -50%) rotate(var(--rt, -3deg)) scale(.6); opacity: 0; padding: 7px 12px; background: #f3f1ee; color: #1b1b1a; font: 600 12px var(--f-mono); letter-spacing: .02em; white-space: nowrap; box-shadow: 0 12px 30px rgba(0,0,0,.45); transition: transform .45s cubic-bezier(.2,.9,.3,1.4), opacity .3s; pointer-events: none; }
#entw-fit .ef-chip:nth-of-type(2n) { --rt: 4deg; }
#entw-fit .ef-chip::before { content: "↯ "; color: var(--c1, #BA1424); }
#entw-fit .ef-chip.on { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rt, -3deg)) scale(1); }
#entw-fit .ef-chip.drop { opacity: 0; transform: translate(-50%, 220px) rotate(calc(var(--rt, -3deg) * -9)) scale(.9); transition: transform .9s cubic-bezier(.5,0,.8,.4), opacity .9s ease-in; }
@media (max-width: 1023px) { #entw-fit .ef-chip, #entw-fit .ef-lines { display: none; } }

/* Explosionsansicht (06.11.2026): das Fenster kippt in den Raum und fächert sich in seine Module auf */
#entw-module .wd-left { perspective: 1600px; perspective-origin: 50% 40%; }
#entw-module .em-app { --e: 0; transform-style: preserve-3d; transform: rotateX(calc(var(--e) * 50deg)) rotateZ(calc(var(--e) * -22deg)) scale(calc(1 - var(--e) * .22)); }
#entw-module .em-app.xp { background: transparent; border-color: transparent; box-shadow: none; }
#entw-module .em-app.xp .ed-bar, #entw-module .em-app.xp .ed-status, #entw-module .em-app.xp .em-hint { opacity: calc(1 - var(--e) * 1.6); }
#entw-module .em-app.xp .em-body { overflow: visible; transform-style: preserve-3d; background: transparent; }
#entw-module .em-app.xp .em-pane { opacity: 1; visibility: visible; background: rgba(15,15,14,.9); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 30px 60px rgba(0,0,0,.45);
  transform: translateZ(calc(var(--k) * var(--e) * 110px)); }
#entw-module .em-app.xp .em-pane::after { content: attr(data-label); position: absolute; left: calc(100% + 16px); top: 10px; font: 900 clamp(14px, 1.3vw, 20px)/1 var(--f-ext); font-stretch: 125%; text-transform: uppercase; color: #fff; opacity: var(--e); white-space: nowrap; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
#entw-module .em-app.xp .em-pane .em-beleg, #entw-module .em-app.xp .em-pane .em-file { display: none; }
#entw-module .em-app { transform-origin: 50% 55%; transform: translateY(calc(var(--e) * 9%)) rotateX(calc(var(--e) * 54deg)) rotateZ(calc(var(--e) * -20deg)) scale(calc(1 - var(--e) * .3)); }
#entw-module .em-app.xp .em-pane { transform: translateZ(calc(var(--k) * var(--e) * 84px)); }
/* Schrift auf fertigen Kacheln in der Textfarbe für die Hauptfarbe (wie die Statusleiste), damit sie auch auf Gelb lesbar bleibt */
#entw-fit .ef-t.ok b, #entw-fit .ef-t.ok .ef-n, #entw-fit .ef-t.ok .ef-s, #entw-fit .ef-t.ok::after { color: var(--ink); }
#entw-fit .ef-t.ok::before { opacity: 1; }
/* Schlussbild lesbar auf jedem Licht: Maßanfertigung als Band in der Hauptfarbe, die 100 weiß mit Schein */
#entw-fit[data-mode="ok"] .ef-who { display: inline-block; background: var(--main); color: var(--ink); padding: .12em .3em .08em; }
#entw-fit[data-mode="ok"] .ef-val { color: var(--gridcolor); text-shadow: 0 0 50px color-mix(in srgb, var(--main) 70%, transparent), 0 2px 0 rgba(0,0,0,.25); }
/* Schlussbild: Schrittliste blendet aus, der Stapel rückt in die Mitte und bleibt ganz im Bild */
#entw-module .em-steps { transition: opacity .45s; }
#entw-module.xp-on .em-steps { opacity: 0; pointer-events: none; }
#entw-module .em-app { transform-origin: 50% 45%; transform: translateX(calc(var(--e) * 22%)) translateY(calc(var(--e) * -4%)) rotateX(calc(var(--e) * 54deg)) rotateZ(calc(var(--e) * -20deg)) scale(calc(1 - var(--e) * .32)); }
#entw-module .em-app.xp .em-pane { transform: translateZ(calc(var(--k) * var(--e) * 70px)); }

/* 100 % flutet den Schirm (06.11.2026) */
#entw-fit .scene-in { overflow: hidden; }
#entw-fit .ef-flood { position: absolute; inset: 0; z-index: 8; background: var(--main); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--gut);
  clip-path: circle(var(--r, 0%) at var(--x, 30%) var(--y, 60%)); pointer-events: none; }
#entw-fit .ef-flood b { display: block; font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; letter-spacing: -.05em; line-height: .78; font-size: clamp(140px, 30vw, 520px); transform: scale(.82); opacity: 0; transition: transform .7s cubic-bezier(.2,.9,.3,1.2), opacity .35s; }
#entw-fit .ef-flood b i { font-style: normal; font-size: .3em; letter-spacing: 0; vertical-align: .9em; margin-left: .05em; }
#entw-fit .ef-fk, #entw-fit .ef-fs { font-family: var(--f-mono); font-size: clamp(12px, 1vw, 15px); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transition: opacity .4s .15s; }
#entw-fit .ef-fk { font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; font-size: clamp(22px, 2.6vw, 46px); letter-spacing: -.01em; margin-bottom: .3em; }
#entw-fit .ef-fs { margin-top: 1.4em; }
#entw-fit .ef-flood.on b { transform: none; opacity: 1; }
#entw-fit .ef-flood.on .ef-fk, #entw-fit .ef-flood.on .ef-fs { opacity: 1; }

/* ---------- Ein Klick. (06.11.2026): Röntgenblick unter die Oberfläche ---------- */
.e-ph { background: #F2C94C; color: #141413; padding: 0 .25em; font-style: normal; }
#entw-klick .ch-head, #entw-jahre .ch-head { margin-bottom: clamp(10px, 2vh, 24px); }
.ek { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(20px, 3.5vw, 64px); }
.ek-cap { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.6); margin-bottom: 10px; }
.ek-left { display: flex; flex-direction: column; min-height: 0; }
.ek-win { --m: 0; position: relative; border: 1px solid rgba(var(--gridcolor-rgb),.3); background: var(--surface-1); box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.ek-bar { display: flex; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--surface-5); }
.ek-bar i { width: 9px; height: 9px; background: var(--surface-7); }
.ek-body { position: relative; padding: 16px; display: grid; gap: 8px; }
.ek-body > i { height: 12px; background: var(--surface-4); }
.ek-body > i:nth-child(2) { width: 70%; }
.ek-body > i:nth-child(3) { width: 50%; margin-bottom: 10px; }
.ek-btn { justify-self: start; padding: 12px 18px; background: var(--main); color: var(--ink); font: 700 14px var(--f-body); transition: transform .15s, box-shadow .3s; }
.ek-win.clicked .ek-btn { transform: scale(.95); box-shadow: 0 0 0 6px color-mix(in srgb, var(--main) 35%, transparent), 0 0 40px color-mix(in srgb, var(--main) 60%, transparent); }
.ek-cur { position: absolute; width: 18px; height: 18px; left: calc(85% - var(--m) * 62%); top: calc(110% - var(--m) * 32%); background: #fff; clip-path: polygon(0 0, 0 100%, 28% 72%, 48% 100%, 62% 92%, 44% 66%, 80% 66%); filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.ek-ripple { position: absolute; left: 30%; top: 72%; width: 10px; height: 10px; border: 2px solid var(--main); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(1); }
.ek-win.clicked .ek-ripple { animation: ek-rip .9s ease-out forwards; }
@keyframes ek-rip { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(14); } }
.ek-bil { margin-top: auto; display: grid; gap: 14px; opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.ek-bil.on { opacity: 1; transform: none; }
.ek-bil span { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.6); margin-bottom: 4px; }
.ek-b1 b { font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; font-size: clamp(26px, 2.6vw, 46px); line-height: 1; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.55); }
.ek-b2 b { display: block; font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; font-size: clamp(22px, 2.2vw, 40px); line-height: 1.05; text-transform: uppercase; color: var(--main); }
/* Unter der Oberfläche */
.ek-x { --s: 0; --pp: 0; position: relative; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding-left: 26px; }
.ek-x > .ek-cap { margin-bottom: 0; }
.ek-scan { position: absolute; left: 0; right: 0; top: calc(var(--s) * 100%); height: 2px; background: var(--main); box-shadow: 0 0 24px 4px color-mix(in srgb, var(--main) 70%, transparent); opacity: calc(1 - var(--s) * var(--s)); pointer-events: none; z-index: 3; }
.ek-pulse { position: absolute; left: 6px; top: 24px; bottom: 0; width: 2px; background: rgba(var(--gridcolor-rgb),.12); }
.ek-pulse i { position: absolute; left: -3px; top: 0; width: 8px; height: calc(var(--pp) * 100%); background: linear-gradient(to bottom, transparent, var(--main)); }
.ek-pulse i::after { content: ""; position: absolute; left: -5px; bottom: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--main); box-shadow: 0 0 30px 8px color-mix(in srgb, var(--main) 70%, transparent); }
.ek-l { position: relative; flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px 14px; border: 1px solid rgba(var(--gridcolor-rgb),.14); background: rgba(15,15,14,.72); opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; overflow: hidden; }
.ek-l.vis { opacity: .55; transform: none; }
.ek-l.on, .ek-l.done { opacity: 1; }
.ek-l.on { border-color: var(--main); box-shadow: 0 0 40px color-mix(in srgb, var(--main) 25%, transparent); }
.ek-lb { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--main); padding-top: 3px; }
.ek-c { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ek-t { font-family: var(--f-ext); font-stretch: 112%; font-weight: 800; font-size: clamp(14px, 1.2vw, 18px); color: #fff; }
.ek-code { position: relative; min-height: 0; }
.ek-file { display: inline-block; font: 11px var(--f-mono); color: var(--main); border: 1px solid currentColor; padding: 1px 6px; margin-bottom: 6px; }
.ek-code pre { margin: 0; font: 12px/1.55 var(--f-mono); color: #e8e6df; white-space: pre; overflow: hidden; max-height: 9.5em; }
.ek-tabs, .ek-out { display: flex; flex-wrap: wrap; gap: 8px; }
.ek-tabs span { font: 12px var(--f-mono); color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.2); padding: 7px 10px; transition: all .3s; }
.ek-tabs span::before { content: "▦ "; opacity: .6; }
.ek-tabs span.lit { color: #141413; background: var(--main); border-color: var(--main); box-shadow: 0 0 24px color-mix(in srgb, var(--main) 50%, transparent); }
.ek-out span { font: 600 12px var(--f-mono); color: #141413; background: #f3f1ee; padding: 10px 14px; box-shadow: 0 16px 34px rgba(0,0,0,.5); opacity: 0; transform: translateY(16px) rotate(-3deg); transition: opacity .35s, transform .5s cubic-bezier(.2,.9,.3,1.4); }
.ek-out span::before { content: "⬇ "; color: var(--c1, #BA1424); }
.ek-out span.lit { opacity: 1; transform: none; }

/* ---------- Zehn Jahre. (06.11.2026): eine Kachel je Woche ---------- */
.ej { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, .7fr); gap: clamp(20px, 3.5vw, 64px); align-items: center; }
.ej-grid { display: grid; gap: clamp(3px, .45vw, 6px); }
.ej-r { display: grid; grid-template-columns: 44px repeat(52, minmax(0, 1fr)); gap: clamp(2px, .25vw, 4px); align-items: center; }
.ej-r span { font: 11px var(--f-mono); color: rgba(var(--gridcolor-rgb),.55); }
.ej-r i { aspect-ratio: 1; background: rgba(var(--gridcolor-rgb),.07); transition: background-color .25s, box-shadow .25s; }
.ej-r i.on[data-l="1"] { background: color-mix(in srgb, var(--main) 30%, transparent); }
.ej-r i.on[data-l="2"] { background: color-mix(in srgb, var(--main) 55%, transparent); }
.ej-r i.on[data-l="3"] { background: color-mix(in srgb, var(--main) 80%, transparent); }
.ej-r i.on[data-l="4"] { background: var(--main); box-shadow: 0 0 10px color-mix(in srgb, var(--main) 60%, transparent); }
.ej-r i.on[data-l="0"] { background: rgba(var(--gridcolor-rgb),.1); }
#entw-jahre.fertig .ej-r i.on:not([data-l="0"]) { animation: ej-glow 2.4s ease-in-out infinite; }
@keyframes ej-glow { 50% { filter: brightness(1.25); } }
.ej-year b { display: block; font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; font-size: clamp(64px, 7.5vw, 140px); line-height: .85; letter-spacing: -.04em; color: var(--main); font-variant-numeric: tabular-nums; }
.ej-year span { font: 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.6); }
.ej-nums { display: grid; gap: 12px; margin-top: 24px; opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .6s; }
.ej-nums.on { opacity: 1; transform: none; }
.ej-nums b { display: block; font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; font-size: clamp(24px, 2.4vw, 42px); line-height: 1; }
.ej-nums span { font: 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.6); }
.ej-note { margin-top: 18px; font-size: 12px; }

@media (max-width: 1023px) {
  .ek { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
  .ek-win, .ek-left > .ek-cap { display: none; }
  .ek-bil { position: absolute; left: var(--gut); right: var(--gut); bottom: 20px; z-index: 5; background: rgba(15,15,14,.92); padding: 14px; }
  .ek-l { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ej { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .ej-r { grid-template-columns: 34px repeat(52, minmax(0, 1fr)); gap: 1px; }
}
/* Feinschliff 06.11.: mehr Code sichtbar, Bilanz passt ins Bild, Kachelteppich größer */
.ek-l[data-e="regel"] { flex-grow: 2.4; }
.ek-code pre { max-height: none; }
.ek-b2 b { font-size: clamp(18px, 1.75vw, 32px); }
.ek-b1 b { font-size: clamp(22px, 2.2vw, 40px); }
.ej { grid-template-columns: minmax(0, 3.2fr) minmax(200px, .8fr); }
.ej-r { gap: clamp(2px, .3vw, 5px); }
.ej { grid-template-columns: minmax(0, 2.5fr) minmax(250px, .85fr); }
.ej-year b { font-size: clamp(56px, 6.4vw, 120px); }

/* ---------- Was das Tool kann + Röntgenblick je Modul (06.11.2026) ---------- */
#entw-module.em-xr .wd-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
#entw-module.em-xr .wd-left { grid-template-rows: minmax(0, 1fr) auto; gap: 12px; }
#entw-module.em-xr .em-d, #entw-module.em-xr .em-bil { grid-area: 2 / 1; }
.em-d { font-size: 15px; line-height: 1.5; color: rgba(var(--gridcolor-rgb),.86); max-width: 60ch; min-height: 3em; transition: opacity .3s; }
#entw-module.bil-on .em-d { opacity: 0; }
#entw-module .em-bil { margin-top: 0; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 24px; }
#entw-module .em-bil .ek-b2 { display: flex; flex-wrap: wrap; gap: 0 .6em; }
#entw-module .em-x-col { min-height: 0; }
#entw-module .em-x { display: none; flex: 1; min-height: 0; flex-direction: column; gap: 10px; }
#entw-module .em-x.on { display: flex; }
#entw-module .em-btn { position: absolute; left: 22px; bottom: 20px; z-index: 2; }
#entw-module .em-app.clicked .em-pane.on .em-btn { transform: scale(.95); box-shadow: 0 0 0 6px color-mix(in srgb, var(--main) 35%, transparent), 0 0 40px color-mix(in srgb, var(--main) 60%, transparent); }
#entw-module .em-cur { z-index: 4; left: calc(80% - var(--m, 0) * (80% - 120px)); top: calc(30% + var(--m, 0) * (70% - 46px)); }
#entw-module .em-ripple { z-index: 3; left: 110px; top: calc(100% - 40px); }
#entw-module .em-app.clicked .em-ripple { animation: ek-rip .9s ease-out forwards; }
#entw-module.em-xr .em-hint { bottom: auto; top: 12px; right: 140px; }
@media (max-width: 1023px) {
  #entw-module.em-xr .wd-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, .9fr) minmax(0, 1.1fr); }
  #entw-module .em-cur, #entw-module .em-ripple, .em-d { display: none; }
  #entw-module .em-bil { grid-template-columns: minmax(0, 1fr); }
}
/* Röntgenspalte bleibt im Bild */
#entw-module .em-x-col { height: 100%; overflow: hidden; }
#entw-module .em-x .ek-l[data-e="regel"] { flex-grow: 1.7; }
#entw-module .em-x .ek-code pre { max-height: 7.8em; }
#entw-module.em-xr .em-hint { display: none; }
/* Gesamtbilanz: Beschriftung über den Werten, Werte in Weiß, damit sie auf jedem Licht lesbar sind */
#entw-module .em-bil .ek-b2 > span { flex-basis: 100%; }
#entw-module .em-bil .ek-b2 b { color: var(--gridcolor); font-size: clamp(16px, 1.55vw, 28px); line-height: 1.15; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
#entw-module .em-bil .ek-b1 b { color: var(--main); font-size: clamp(22px, 2.2vw, 40px); text-shadow: 0 2px 14px rgba(0,0,0,.45); }

/* ---------- Übergang 06.11.2026: 100 % nur einmal, die gelbe Fläche dreht weg, das Tool dreht herein ---------- */
#entw-fit .ef-side { transition: opacity .3s; }
#entw-fit.flut .ef-side { opacity: 0; }
body > .em-flip { position: absolute; inset: 0; z-index: 20; clip-path: none; background: var(--main); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--gut); pointer-events: none;
  transform-origin: 50% 50%; transform: perspective(1800px) rotateY(var(--fr, 0deg)); backface-visibility: hidden; }
body > .em-flip b { display: block; font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; letter-spacing: -.05em; line-height: .78; font-size: clamp(140px, 30vw, 520px); }
body > .em-flip b i { font-style: normal; font-size: .3em; letter-spacing: 0; vertical-align: .9em; margin-left: .05em; }
body > .em-flip .ef-fk { font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; font-size: clamp(22px, 2.6vw, 46px); letter-spacing: -.01em; margin-bottom: .3em; text-transform: uppercase; }
body > .em-flip .ef-fs { font-family: var(--f-mono); font-size: clamp(12px, 1vw, 15px); letter-spacing: .14em; text-transform: uppercase; margin-top: 1.4em; }
#entw-module.em-xr .em-app { transform-origin: 50% 50%; transform: perspective(1600px) rotateY(var(--fy, 0deg)); }
#entw-module.em-xr .em-x-col, #entw-module.em-xr .em-d { transition: opacity .35s; }
#entw-module.flipping .em-x-col, #entw-module.flipping .em-d { opacity: 0; }
/* Rechte Spalte: kein Abschneiden mehr, damit Schein und Lichtimpuls ganz zu sehen sind; die Inhalte begrenzen sich selbst */
#entw-module .em-x-col { overflow: visible; padding-top: 4px; }
#entw-module .em-x .ek-l { min-height: 0; }
#entw-module .em-x .ek-tabs, #entw-module .em-x .ek-out { max-height: 5.4em; overflow: hidden; }
/* Klickbar */
#entw-module .ed-tabs span[role="button"], #entw-module .em-btn[role="button"] { cursor: pointer; }
#entw-module .ed-tabs span[role="button"]:hover { color: var(--textcolor); }
#entw-module .ed-tabs span:focus-visible, #entw-module .em-btn:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }
/* Die gelbe Fläche steht beim Szenenwechsel fest im Bild, deckungsgleich mit der Flutung; Kopfzeile bleibt darüber */
body > .em-flip { position: fixed; inset: 0; z-index: 40; visibility: hidden; }
body > .em-flip { z-index: 25; } /* über den Szenen (2), unter Kapitel-Navigation (30) und Kopfzeile (40) */
/* Projektkopf: Beschriftungen (Kunde, Leistungen, Jahr, Live, Team) in der Textfarbe statt in der Projektfarbe, damit sie auf jedem Bild lesbar sind (Alex 06.11.2026) */
body.single-projekt .facts dt { color: inherit; }

/* KI-Bilder im Browserrahmen: Bild aus Nullen und Einsen (projekt.js, Alex 09.11.2026) */
.ki-viz { position: absolute; inset: 0; z-index: 3; overflow: hidden; background: #0b0d0c; pointer-events: none; opacity: 0; visibility: hidden; }
.ki-viz canvas, .ki-foto { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ki-foto { object-fit: cover; opacity: 0; }
.ki-cap { position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 7px 11px; background: rgba(11,13,12,.82); color: #fff; font: 12px var(--f-mono); letter-spacing: .06em; }

/* Kapitel „Bilder“: KI-Bilder entstehen aus Nullen und Einsen (projekt.js, Alex 09.11.2026) */
.kb-text { max-width: 60ch; margin: clamp(10px, 2vw, 24px) 0 0; font-size: clamp(18px, 1.5vw, 26px); line-height: 1.45; }
.kb-text p { margin: 0 0 .7em; }
.kb-text p:last-child { margin-bottom: 0; }
.kb-link { margin: 18px 0 0; font: 600 13px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.kb-link a { color: var(--textcolor); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.kb-link a:hover { border-bottom-width: 2px; }
.kb-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: clamp(20px, 4vh, 50px) var(--gut) 0; }
.kb { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 2; background: #0b0d0c; }
.kb.kb-gross { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.kb img, .kb canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kb img { object-fit: cover; opacity: 0; }
.kb-cap { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 10px; background: rgba(11,13,12,.82); color: #fff; font: 12px var(--f-mono); letter-spacing: .06em; transition: opacity .4s; }
@media (max-width: 760px) {
  .kb-grid { grid-template-columns: minmax(0, 1fr); }
  .kb.kb-gross { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) { .kb img { opacity: 1; } .kb canvas, .kb-cap { display: none; } }
/* Bilder anklickbar (Galerie), letzte Kachel zeigt, wie viele es noch gibt (Alex 09.11.2026) */
.kb-plus { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: rgba(11,13,12,.55); color: #fff; font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; font-size: clamp(40px, 5vw, 90px); letter-spacing: -.03em; transition: background-color .3s; pointer-events: none; }
.kb-mehr:hover .kb-plus, .kb-mehr:focus-visible .kb-plus { background: rgba(11,13,12,.35); }
.kb:focus-visible { outline: 2px solid var(--static-seccolor); outline-offset: 3px; }

/* Live-Vorschau (live seit 09.11.2026): große Ebene über der Seite, Lupe am Handy, Hinweis wenn die Seite nicht laedt */
.lov { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; gap: 10px; padding: clamp(10px, 2.2vw, 28px); background: var(--lightbox-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lov[hidden] { display: none; }
.lov-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 12px var(--f-mono); }
.lov-url { flex: 1; min-width: 0; color: rgba(var(--gridcolor-rgb),.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.lov-dev { display: flex; gap: 4px; }
.lov-bar button, .lov-bar a { font: inherit; color: var(--textcolor); background: var(--bgcolor); border: 1px solid var(--surface-6); padding: 7px 11px; cursor: pointer; text-decoration: none; }
.lov-bar button:hover, .lov-bar a:hover { border-color: var(--main); }
.lov-bar [aria-pressed="true"] { background: var(--main); border-color: var(--main); color: var(--ink); }
.lov-x { font-size: 15px !important; line-height: 1; padding: 6px 12px !important; }
.lov-z { display: none; }
.lov-stage { position: relative; flex: 1; min-height: 0; }
.lov-hint { display: none; margin: 0; text-align: center; font: 12px var(--f-mono); color: rgba(var(--gridcolor-rgb),.7); }
@media (max-width: 760px) and (orientation: portrait) { .lov.dk .lov-hint { display: block; } }
.lov .live { background-color: transparent; background-image: none; }
.live.zoom { place-items: start; overflow: auto; -webkit-overflow-scrolling: touch; }
.live-load .ll-b { display: none; }
.live.slow:not(.ready) .live-load { pointer-events: auto; }
.live.slow:not(.ready) .live-load .ll-a { display: none; }
.live.slow:not(.ready) .live-load .ll-b { display: inline; }
.live-load a { color: var(--main); }
@media (max-width: 760px), (max-width: 1023px) and (max-height: 560px) {
  .lov { padding: 8px; gap: 8px; }
  .lov-url { flex: 1 1 calc(100% - 60px); order: -2; padding: 2px 0; }
  .lov-x { order: -1; }
  .lov-dev [data-d="tablet"] { display: none; }
  .lov-z { display: inline-block; }
  .lov-tab { margin-right: auto; }
}