/* Aus wuerfel-lab.html übernommen. Die seitenweiten Regeln der Laborseite
(body, *, .wrap) sind entfernt — sie hatten hier die Inhaltsbreite von
1320px auf 1000px gedrückt und den Seitenhintergrund überschrieben. */
/* Titillium Web = kit-Hausschrift, lokal (kein Google Fonts, DSGVO) */
:root{
--brand:#274C90; --azure:#4E86E6;
/* fest HELL (Jakob 05.07.) — kein OS-Theme-Switch; Würfel selbst bleibt Navy mit weißem Text */
--paper:#F4F7FB; --ink:#131C2B; --ink-soft:#4A5568; --mist:#5D6B84; /* mist abgedunkelt: a11y 5,0:1 (war #7C8AA3 = 3,25) */
--line:rgba(19,28,43,.12);
/* Seiten-Farben (a11y: alle ≥4.5:1 zu weißem Text; grün/rot/orange bleiben frei für Feld-Status).
⚠️ synchron halten mit DIM[].col im JS! */
--kit-blau:#274C90; /* 1 Design (CI Primär) */
--kit-grau:#4C5261; /* 2 Inhalt (CI Sekundär) */
--kit-seo:#636B82; /* 3 SEO (CI Tertiär, abgedunkelt: #727A92 = nur 4.3:1) */
--kit-recht:#0F766E; /* 4 Recht (Logo-Türkis dunkel) */
--kit-ladezeit:#0C6E8F; /* 5 Ladezeit (Petrol/Cyan, final 22.07.) */
--kit-schutz:#9D174D; /* 6 Schutz (Bordeaux, final 22.07. — war Tiefes Teal) */
--kit-logo-navy:#0F172A; --kit-teal:#14B8A6;
--sans:'Titillium Web',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Arial,sans-serif;
--mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;
}
.stage-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,2.6rem);align-items:center}
@media(max-width:820px){.stage-grid{grid-template-columns:1fr}}
/* === Würfel === */
.scene{perspective:1200px;width:100%;height:440px;display:grid;place-items:center;cursor:grab;touch-action:none;overflow:visible;position:relative}
.scene.grabbing{cursor:grabbing}
/* Würfel wird intern groß gerendert (320px) und in Ruhe per scale(.65) verkleinert —
der Klick-Zoom ist dann scale(1) = native Auflösung = scharfer Text, keine Verzerrung */
.cube{position:relative;width:320px;height:320px;transform-style:preserve-3d;
transform:scale(.65) rotateX(-30deg) rotateY(-45deg);transition:transform .9s cubic-bezier(.5,.05,.2,1)}
.cube.touring{transition:transform 2.4s cubic-bezier(.45,.05,.25,1)} /* Auto-Tour: langsam + weich */
/* Würfelseite = 3×3-Kachelraster (Logo-Look), Mitte = Label, 8 = Prüffelder */
/* Farb-Logik (Jakob 05.07. v2): Seite bleibt Logo-Navy, NUR die 8 Prüffeld-Buttons tragen die Seitenfarbe */
.face{position:absolute;width:320px;height:320px;border-radius:18px;
background-color:var(--kit-logo-navy);
display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:9px;padding:15px;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.10);backface-visibility:hidden}
.ftile{border-radius:9px;background:var(--col,#274C90);border:1px solid rgba(255,255,255,.18);
display:grid;place-items:center;text-align:center;font-size:.7rem;line-height:1.12;color:#fff;
padding:3px;cursor:pointer;transition:filter .15s,background .15s,transform .1s;font-family:var(--sans);font-weight:400}
.ftile:hover{filter:brightness(1.2)}
.ftile.center{background:var(--col,#274C90);color:#fff;font-weight:700;font-size:1.1rem;cursor:pointer;letter-spacing:-.01em;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.ftile.on{background:var(--kit-logo-navy);color:#fff;border-color:var(--col,#274C90);box-shadow:inset 0 0 0 1.5px var(--col,#274C90)}
/* Schärfe-Overlay: flache 2D-Kopie der frontalen Seite (3D-Layer = immer leicht weichgezeichnet).
Wird nach der Dreh-Transition passgenau eingeblendet — Text in nativer 2D-Darstellung. */
.flat{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:320px;height:320px;border-radius:18px;
background:var(--kit-logo-navy);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:9px;padding:15px;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.10);opacity:0;pointer-events:none;transition:opacity .25s;z-index:5}
.flat.show{opacity:1;pointer-events:auto}
.f1{transform:rotateY(0deg) translateZ(160px)} /* 1 Design vorne */
.f2{transform:rotateX(90deg) translateZ(160px)} /* 2 Inhalt oben */
.f3{transform:rotateY(90deg) translateZ(160px)} /* 3 SEO rechts */
.f4{transform:rotateY(180deg) translateZ(160px)} /* 4 Recht hinten */
.f5{transform:rotateX(-90deg) translateZ(160px)} /* 5 Ladezeit unten */
.f6{transform:rotateY(-90deg) translateZ(160px)} /* 6 Schutz links */
.core{position:absolute;width:320px;height:320px;background:var(--kit-logo-navy);border-radius:12px;backface-visibility:visible}
.cc1{transform:rotateY(0deg) translateZ(154px)}
.cc2{transform:rotateY(90deg) translateZ(154px)}
.cc3{transform:rotateY(180deg) translateZ(154px)}
.cc4{transform:rotateY(-90deg) translateZ(154px)}
.cc5{transform:rotateX(90deg) translateZ(154px)}
.cc6{transform:rotateX(-90deg) translateZ(154px)}
.controls{display:flex;gap:.5rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}
.ctrl{font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;padding:.5em .9em;border:1px solid var(--line);
background:transparent;border-radius:20px;cursor:pointer;color:var(--ink-soft);transition:all .2s}
.ctrl:hover{border-color:var(--azure);color:var(--brand)}
.ctrl.on{background:var(--brand);color:#fff;border-color:transparent}
/* rechte Spalte: Liste zum Anwählen + Info-Zeile */
.dims{display:flex;flex-direction:column;gap:.4rem}
.drow{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;
background:transparent;cursor:pointer;transition:all .2s;text-align:left;width:100%;font:inherit;color:var(--ink)}
.drow:hover{transform:translateX(3px);border-color:var(--azure)}
.drow.active{border-color:transparent;box-shadow:0 8px 24px -12px rgba(39,76,144,.55)}
.drow .sq{width:26px;height:26px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-family:var(--mono);font-weight:700;font-size:.85rem}
.drow .dn{font-weight:700;font-size:.95rem}
.drow .tag{margin-left:auto;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:.15em .5em;border-radius:20px;border:1px solid var(--line);color:var(--mist)}
/* Info-Panel: eigene Zeile unter Würfel+Liste, volle Breite, dominant */
.info{grid-column:1/-1;border:1px solid var(--line);border-radius:14px;padding:1.3rem 1.6rem;min-height:110px;
background:rgba(19,28,43,.03)}
.info .ih{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.info .idot{width:16px;height:16px;border-radius:5px}
.info .it{font-weight:700;font-size:1.35rem;letter-spacing:-.01em}
.info .isub{color:var(--mist);font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.info p{margin:.25rem 0 0;color:var(--ink-soft);font-size:1.05rem}
.info b,.info strong{color:var(--ink)}
.info .testlink{color:var(--brand);font-weight:700;text-decoration:none;white-space:nowrap}
.info .testlink:hover,.info .testlink:focus-visible{text-decoration:underline}
/* SEO-Blöcke (Jakob 05.07.): Inhalte = echtes HTML (H1-Intro + sechs H2-Blöcke) in #info.
Ohne JS: alles untereinander lesbar (Suchmaschinen!). Mit JS (.js): nur der aktive Block sichtbar,
die Punkte-Liste wird zu klickbaren Chips (Klick = Text + Kachel auf dem Würfel leuchtet). */
.info .wb h1,.info .wb h2{margin:0 0 .25rem;font-size:1.35rem;font-weight:700;letter-spacing:-.01em;
display:flex;align-items:center;gap:.6rem;line-height:1.25}
.info .wb h1{font-size:1.6rem}
.info .wb[data-w="intro"] h2{font-size:1.1rem;color:var(--ink-soft);margin-top:.15rem}
.wnum{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;color:#fff;flex:0 0 auto;
background:var(--kit-logo-navy);font-family:var(--mono);font-size:.95rem;font-weight:700}
.info .wmeta{color:var(--mist);font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.wpunkte{padding-left:1.3rem;margin:.4rem 0}
.info.js .wb{display:none}
.info.js .wb.show{display:block}
/* Seiten-Block unter dem (immer sichtbaren) Intro optisch absetzen */
.info.js .wb+.wb.show{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line)}
.info.js .wweg,.info.js .wfrage,.info.js .wdesc{display:none} /* Punkt-Frage/-Text/-Lösungsweg: ohne JS Teil der Liste, mit JS nur im Detail */
.info.js .wpunkte{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:.5rem 0 .2rem}
.info.js .wpunkte li{display:contents}
.pchip{font:inherit;font-size:.8rem;padding:.28em .7em;border:1px solid var(--line);border-radius:20px;
background:#fff;color:var(--ink-soft);cursor:pointer;transition:all .15s}
.pchip:hover{border-color:var(--col,#274C90);color:var(--ink)}
.pchip.on{background:var(--col,#274C90);color:#fff;border-color:transparent}
.pchip:focus-visible{outline:2px solid var(--azure);outline-offset:2px}
.info .pdetail{margin-top:.5rem}
.info .loesung{margin-top:.45rem;padding-left:.8rem;border-left:3px solid var(--col,#274C90)}
.face:focus-visible,.ftile:focus-visible,.drow:focus-visible,.ctrl:focus-visible{outline:2px solid var(--azure);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){.cube{transition:none}}
@media(max-width:680px){
.scene{height:300px;touch-action:pan-y;cursor:default}
.cube{width:260px;height:260px}
.face,.core{width:260px;height:260px}
.ftile{font-size:.61rem}.ftile.center{font-size:.92rem}
.flat{width:260px;height:260px}
.f1{transform:rotateY(0deg) translateZ(130px)}
.f2{transform:rotateX(90deg) translateZ(130px)}
.f3{transform:rotateY(90deg) translateZ(130px)}
.f4{transform:rotateY(180deg) translateZ(130px)}
.f5{transform:rotateX(-90deg) translateZ(130px)}
.f6{transform:rotateY(-90deg) translateZ(130px)}
.cc1{transform:rotateY(0deg) translateZ(125px)}
.cc2{transform:rotateY(90deg) translateZ(125px)}
.cc3{transform:rotateY(180deg) translateZ(125px)}
.cc4{transform:rotateY(-90deg) translateZ(125px)}
.cc5{transform:rotateX(90deg) translateZ(125px)}
.cc6{transform:rotateX(-90deg) translateZ(125px)}
}