/* KIT Web Zauberwürfel — 3D-Würfel für die Audit-Sichten.
   Sechs Flächen, je ein 3×3-Raster (Mitte = Seitenname, 8 = Prüffelder).
   Felder nach Ampel gefärbt. Klick auf eine Seite/Liste dreht sie nach vorn. */

.kwc-scene {
    perspective: 1300px;
    width: 100%;
    height: 400px;
    display: grid;
    place-items: center;
    overflow: visible;
    margin: 10px 0 24px;
}
.kwc-cube {
    position: relative;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    transform: scale(.72) rotateX(-28deg) rotateY(-42deg);
    transition: transform .9s cubic-bezier(.5,.05,.2,1);
}
.kwc-face {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 16px;
    background: #0f172a;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 6px;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
}
.kwc-f1 { transform: rotateY(0deg)   translateZ(150px); }
.kwc-f2 { transform: rotateX(90deg)  translateZ(150px); }
.kwc-f3 { transform: rotateY(90deg)  translateZ(150px); }
.kwc-f4 { transform: rotateY(180deg) translateZ(150px); }
.kwc-f5 { transform: rotateX(-90deg) translateZ(150px); }
.kwc-f6 { transform: rotateY(-90deg) translateZ(150px); }

.kwc-tile {
    border-radius: 7px;
    background: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 8.5px;
    line-height: 1.15;
    font-weight: 600;
    color: #e5e7eb;
    padding: 2px;
    overflow: hidden;
}
/* Die sechs Würfelseiten haben FESTE Farben (Jakob-Entscheid 22.07.2026).
   Überall gleich: Lab, Landing, WordPress, Reports, Badges, Konfigurator.
   Nicht umfärben — Quelle: businessplan.kandlen-it.de/wuerfel-farben.html.
   Alle sechs sind WCAG-AA-konform zu weißem Text. */
.kwc-cube {
    --kwc-d1: #274C90; /* Design            */
    --kwc-d2: #4C5261; /* Inhalt            */
    --kwc-d3: #636B82; /* Sichtbarkeit/SEO  */
    --kwc-d4: #0F766E; /* Recht             */
    --kwc-d5: #0C6E8F; /* Ladezeit          */
    --kwc-d6: #9D174D; /* Schutz            */
}

/* Mittelkachel = Seitenname (Nr groß), in der Farbe ihrer Dimension. */
.kwc-mid {
    background: #274C90;
    color: #fff;
    font-size: 11px;
    flex-direction: column;
    gap: 2px;
}
.kwc-mid b { font-size: 18px; }
.kwc-f1 .kwc-mid { background: var(--kwc-d1); }
.kwc-f2 .kwc-mid { background: var(--kwc-d2); }
.kwc-f3 .kwc-mid { background: var(--kwc-d3); }
.kwc-f4 .kwc-mid { background: var(--kwc-d4); }
.kwc-f5 .kwc-mid { background: var(--kwc-d5); }
.kwc-f6 .kwc-mid { background: var(--kwc-d6); }

/* Die Fläche selbst bekommt einen Hauch ihrer Dimensionsfarbe an den Rand,
   damit die Seite auch dann erkennbar ist, wenn die Mitte weggedreht ist.
   Die FELDER bleiben ampelgefärbt — Grün/Gelb/Rot sind für den Status
   reserviert und dürfen nie als Dimensionsfarbe auftreten. */
.kwc-f1 { box-shadow: inset 0 0 0 2px var(--kwc-d1); }
.kwc-f2 { box-shadow: inset 0 0 0 2px var(--kwc-d2); }
.kwc-f3 { box-shadow: inset 0 0 0 2px var(--kwc-d3); }
.kwc-f4 { box-shadow: inset 0 0 0 2px var(--kwc-d4); }
.kwc-f5 { box-shadow: inset 0 0 0 2px var(--kwc-d5); }
.kwc-f6 { box-shadow: inset 0 0 0 2px var(--kwc-d6); }

/* ── Ampelpalette ────────────────────────────────────────────────────────────
   Feste Werte aus der Muster-Vorlage (Jakob 26.07.2026: „so müssen die Würfel
   aussehen, wichtig erstmal die Farben"). Quelle:
   businessplan.kandlen-it.de/audit-fahrschule-wuerfel-muster-kit.html

   Die Textfarbe folgt dem Kontrast, nicht dem Geschmack — gemessen gegen WCAG AA
   (4.5:1 für normalen Text):
     grün    #0B7A3B  auf weiß 5.44 ✓   |  gelb #D97706 auf weiß nur 3.19 ✗
     rot     #B91C1C  auf weiß 6.47 ✓   |  deshalb dort dunkler Text: 5.36 ✓
     neutral #8A93A5  dunkler Text 5.53 ✓
   Das alte Rot (#dc2626) lag mit 4.83 knapp an der Grenze, das alte Gelb
   (#f59e0b) mit 2.15 auf weiß deutlich darunter.

   Im WÜRFEL werden nur Gelb und Rot gefärbt — Grün und „nicht prüfbar" bleiben
   neutral, sonst ertrinkt der Blick in Grün und die Mängel gehen unter. Die
   Vorlage macht es genauso (dort STCOL = {y, r}). Grün wird nur außerhalb des
   Würfels verwendet, in Listen und Statuszeilen. */
.kwc-cube, .kw-ampel {
    --kw-st-g: #0B7A3B;   /* in Ordnung        */
    --kw-st-y: #D97706;   /* verbesserungswürdig */
    --kw-st-r: #B91C1C;   /* dringend          */
    --kw-st-n: #8A93A5;   /* nicht prüfbar     */
    --kw-st-dunkel: #131C2B;
}
.kwc-tile.kwc-gelb  { background: var(--kw-st-y, #D97706); color: var(--kw-st-dunkel, #131C2B); }
.kwc-tile.kwc-rot   { background: var(--kw-st-r, #B91C1C); color: #fff; }
.kwc-tile.kwc-np    { color: var(--kw-st-n, #8A93A5); }
.kwc-tile.kwc-np::after { content: " *"; }

.kwc-controls { text-align: center; margin: -10px 0 18px; }
.kwc-controls button {
    background: #f6f7f7; border: 1px solid #c3c4c7; border-radius: 4px;
    padding: 4px 12px; margin: 0 3px; cursor: pointer; font-size: 12px;
}
.kwc-controls button:hover { background: #274C90; color: #fff; border-color: #274C90; }

/* Seitenliste rechts/unter dem Würfel — anklickbar. */
.kwc-liste { display: grid; gap: 6px; margin: 0 0 20px; max-width: 420px; }
.kwc-liste button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: #fff; border: 1px solid #e5e7eb; border-left: 4px solid #cbd5e1;
    border-radius: 6px; padding: 8px 12px; cursor: pointer; text-align: left; font-size: 13px;
}
.kwc-liste button:hover { border-color: #274C90; }
.kwc-liste button.kwc-sel { border-left-color: #274C90; background: #eff6ff; }
.kwc-liste .kwc-lnum { font-weight: 700; color: #274C90; }
.kwc-liste .kwc-lname { flex: 1; font-weight: 600; }

@media (max-width: 782px) { .kwc-scene { height: 320px; } .kwc-cube { width: 240px; height: 240px; } }
@media print {
    /* Im PDF steht der Würfel flach als Übersicht — kein 3D. */
    .kwc-scene, .kwc-controls { display: none !important; }
}

/* === Paket-Empfehlung (#770) — im Lösungsplan und in der Vertriebsfassung === */
.kw-pakete { margin: 34px 0 0; }
.kw-pakete h3 { margin: 0 0 4px; color: #274C90; font-size: 1.15rem; }
.kw-pakete-vor { margin: 0 0 14px; color: #4C5261; font-size: .92rem; }

.kw-pakettabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.kw-pakettabelle th {
    text-align: left; padding: 9px 12px; background: #f2f5fa;
    border-bottom: 2px solid #274C90; color: #274C90; font-size: .78rem;
    letter-spacing: .04em; text-transform: uppercase;
}
.kw-pakettabelle td { padding: 11px 12px; border-bottom: 1px solid #e3e8f0; vertical-align: top; }
.kw-pakettabelle .kw-r { text-align: right; white-space: nowrap; }
.kw-pakettabelle .kw-klein { color: #727A92; font-size: .82rem; line-height: 1.4; }
.kw-pakettabelle .kw-spart { color: #0B7A3B; font-size: .82rem; font-weight: 700; }

@media (max-width: 640px) {
    .kw-pakettabelle, .kw-pakettabelle tbody, .kw-pakettabelle tr, .kw-pakettabelle td { display: block; width: 100%; }
    .kw-pakettabelle thead { display: none; }
    .kw-pakettabelle tr { border-bottom: 2px solid #e3e8f0; padding: 8px 0; }
    .kw-pakettabelle td { border: 0; padding: 3px 0; }
    .kw-pakettabelle .kw-r { text-align: left; }
}