/* Ratgeber /ratgeber/zauberwuerfel-farben/: Farbkarte (assets/js/farben-karte.js). Light by default, site variables. */
.fk-tool { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg2); box-shadow: var(--shadow); padding: 14px; margin: 18px 0 22px; scroll-margin-top: 72px; }
.fk-tool h3 { margin: 4px 0 8px; font-size: 1.12rem; }
.fk-label { margin: 10px 0 6px; font-weight: 700; font-size: .95rem; color: var(--muted); }
.fk-tool .fk-label:first-child { margin-top: 0; }
.fk-c-U { --k: var(--c-U); --t: rgba(0,0,0,.72); } .fk-c-D { --k: var(--c-D); --t: rgba(0,0,0,.72); } .fk-c-L { --k: var(--c-L); --t: rgba(0,0,0,.75); }
.fk-c-R { --k: var(--c-R); --t: #fff; } .fk-c-F { --k: var(--c-F); --t: #fff; } .fk-c-B { --k: var(--c-B); --t: #fff; }
.fk-sw { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--k); color: var(--t); font-size: .78rem; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }

.fk-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 560px) { .fk-pick { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.fk-col { display: flex; align-items: center; gap: 5px; min-height: 44px; padding: 6px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; font-size: clamp(.78rem, 3.4vw, .9rem); font-weight: 600; cursor: pointer; text-align: left; min-width: 0; }
.fk-col .fk-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-col:hover { border-color: var(--accent); }
.fk-col[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg2)); box-shadow: inset 0 0 0 1px var(--accent); }
.fk-col.is-no { color: var(--muted); background: repeating-linear-gradient(135deg, var(--bg3) 0 6px, var(--bg) 6px 12px); }
.fk-col.is-no .fk-sw { opacity: .45; }
.fk-col .fk-sw { width: 22px; height: 22px; }
.fk-shake { animation: fkshake .35s; }
@keyframes fkshake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.fk-msg { min-height: 1.5em; margin: 8px 0 4px; font-size: .93rem; }
.fk-no { font-weight: 700; color: var(--bad); }

.fk-stage { display: grid; gap: 10px; align-items: center; margin: 6px 0; }
@media (min-width: 720px) { .fk-stage { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.fk-cubewrap { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.fk-cube { margin: 0 auto; }
.fk-rot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 2px; }
.fk-rb { min-height: 44px; min-width: 56px; font-size: .95rem; }
.fk-tool.is-busy .fk-rb, .fk-tool.is-busy .fk-orient .fk-col { pointer-events: none; opacity: .7; }

.fk-net { --fc: min(28px, calc((100vw - 124px) / 12)); display: grid; grid-template-columns: repeat(4, max-content); gap: 2px; justify-content: center; }
.fk-face { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 1px; border: 2px solid transparent; border-radius: 8px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.fk-face:hover { border-color: var(--line); }
.fk-grid { display: grid; grid-template-columns: repeat(3, var(--fc)); gap: 1px; padding: 1px; background: var(--cv-plastic); border-radius: 6px; }
.fk-cell { display: grid; place-items: center; width: var(--fc); height: var(--fc); border-radius: 3px; background: var(--k); color: var(--t); font-size: calc(var(--fc) * .42); font-weight: 800; line-height: 1; }
.fk-cell.is-hl { box-shadow: inset 0 0 0 3px #ff2fd3, inset 0 0 0 5px #fff; }
.fk-cap { font-size: .72rem; font-weight: 700; line-height: 1.15; text-align: center; max-width: calc(var(--fc) * 3 + 8px); }
.fk-cap small { display: block; font-weight: 600; color: var(--muted); font-size: .7rem; }
.fk-cap em { display: block; font-style: normal; color: var(--accent-2); }
.fk-face.is-sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.fk-face.is-opp { border-color: var(--accent); border-style: dashed; }
.fk-face.is-dim .fk-grid { opacity: .55; }

.fk-now { margin: 6px 0 2px; font-size: .95rem; }
.fk-info { margin: 4px 0; font-size: .93rem; min-height: 1.4em; }
.fk-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.fk-bar .btn, .fk-kind .btn, .fk-check > .btn, .fk-chosen .btn { min-height: 44px; white-space: normal; text-align: center; }
.fk-tg[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg2)); box-shadow: inset 0 0 0 1px var(--accent); }

.fk-pieces { display: grid; gap: 8px; }
.fk-pgrp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fk-ph { flex: 0 0 100%; font-size: .82rem; font-weight: 700; color: var(--muted); }
.fk-pc { display: inline-flex; gap: 3px; align-items: center; min-height: 44px; min-width: 44px; padding: 6px 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: pointer; }
.fk-pc .fk-sw { width: 24px; height: 24px; font-size: .72rem; }
.fk-pc:hover { border-color: var(--accent); }
.fk-pc[aria-pressed="true"] { border-color: #ff2fd3; box-shadow: inset 0 0 0 2px #ff2fd3; }
.fk-never { margin: 8px 0 0; font-size: .9rem; color: var(--muted); }

.fk-check { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.fk-ctrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
@media (min-width: 560px) { .fk-ctrs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fk-ctr { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; font-weight: 600; color: var(--muted); min-width: 0; }
.fk-ctr select { min-height: 44px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; font-size: .95rem; width: 100%; }
.fk-ctr select.is-bad { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.fk-check > .btn { margin: 4px 0 2px; }
.fk-kind { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fk-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 2px; }
.fk-chosen-list { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; font-weight: 600; font-size: .92rem; min-height: 44px; }
.fk-arrow { color: var(--muted); }
.fk-res { margin: 8px 0 4px; padding: 0; font-size: .93rem; }
.fk-res.ok, .fk-res.bad, .fk-res.warn, .fk-res.info { padding: 9px 12px; border-radius: 10px; border-left: 4px solid; }
.fk-res.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--bg2)); }
.fk-res.bad { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 7%, var(--bg2)); }
.fk-res.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--bg2)); }
.fk-res.info { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg2)); }

@media print {
  html.fk-printing body > *:not(#fk-print) { display: none !important; }
  #fk-print { display: block !important; padding: 10mm; }
  #fk-print .fk-net { --fc: 13mm; justify-content: start; }
  #fk-print p { font: 600 12pt system-ui, sans-serif; margin: 0 0 6mm; }
  .fk-cell, .fk-grid, .fk-sw { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #fk-print .fk-face.is-dim .fk-grid { opacity: 1; }
  #fk-print .fk-cap { font-size: 11pt; max-width: none; }
}
#fk-print { display: none; }