
#compassLearningCycle{--clc-accent:var(--d-6);--clc-paper:var(--t-grund);position:fixed;right:18px;bottom:22px;width:370px;max-width:calc(100vw - 28px);max-height:82vh;overflow:auto;z-index:10040;padding:20px;border:1px solid var(--t-linie2);border-radius:20px;background:var(--clc-paper);color:var(--t-text);font:14px/1.48 system-ui,sans-serif;text-align:left;isolation:isolate}
#compassLearningCycle[data-position=left]{right:auto;left:18px}
#compassLearningCycle[data-concept=presence]{--clc-accent:var(--d-3);--clc-paper:var(--t-flaeche2)}
#compassLearningCycle[data-concept=learning]{--clc-accent:var(--d-2);--clc-paper:var(--t-flaeche)}
#compassLearningCycle *{box-sizing:border-box}
#compassLearningCycle button{font:inherit;cursor:pointer;border:1px solid var(--t-linie2);border-radius:9px;background:var(--t-flaeche2);color:var(--t-text);padding:7px 10px;min-height:36px}
#compassLearningCycle button:hover{border-color:var(--clc-accent);background:var(--t-zweit-leise)}
#compassLearningCycle button:disabled{cursor:default;opacity:.5}
#compassLearningCycle button:focus-visible,#compassLearningCycle a:focus-visible,#compassLearningCycle summary:focus-visible{outline:3px solid var(--clc-accent);outline-offset:3px}
#compassLearningCycle a{color:var(--clc-accent);text-decoration:underline}
#compassLearningCycle .clc-head{display:flex;gap:10px;align-items:center}
#compassLearningCycle .clc-head strong{font-size:19px;letter-spacing:-.5px}
#compassLearningCycle .clc-head small{display:block;font-size:10px;letter-spacing:1.6px;color:var(--t-leise)}
#compassLearningCycle .clc-head button{font-size:20px;line-height:1}
#compassLearningCycle .clc-head button:first-of-type{margin-left:auto}
#compassLearningCycle[data-minimized=true]{width:auto;padding:0;border:none;background:none;overflow:visible}
#compassLearningCycle .clc-pill{display:flex;align-items:center;gap:7px;border-radius:999px;padding:6px 14px 6px 10px;background:var(--clc-paper);font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
#compassLearningCycle .clc-pill .clc-mark{font-size:18px}
#compassLearningCycle .clc-mark{font-size:30px;color:var(--clc-accent)}
#compassLearningCycle .clc-status{font-size:12px;border-left:3px solid var(--clc-accent);padding-left:8px;margin:16px 0}
#compassLearningCycle .clc-concepts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
#compassLearningCycle .clc-concepts button{padding:0;overflow:hidden;text-align:left;border-radius:10px}
#compassLearningCycle .clc-concepts [aria-pressed=true]{outline:2px solid var(--clc-accent);outline-offset:1px}
#compassLearningCycle .clc-concepts b{display:block;padding:6px;font-size:12px}
#compassLearningCycle .clc-concept-image{display:block;height:77px;background-image:url('compass-concepts-20261107.webp');background-size:300% auto;background-position:calc(var(--part)*50%) 40%;background-color:var(--t-flaeche)}
#compassLearningCycle .clc-caption{font-size:11px;color:var(--t-leise);margin:10px 0}
#compassLearningCycle .clc-john{padding:12px;background:var(--t-zweit-leise);border-radius:10px;margin:14px 0;display:grid;gap:6px}
#compassLearningCycle .clc-john span{font-size:12px;color:var(--t-leise)}
#compassLearningCycle .clc-controls{display:flex;flex-wrap:wrap;gap:7px;margin:9px 0}
#compassLearningCycle .clc-phase{font-size:11px;text-transform:uppercase;letter-spacing:.6px;margin:19px 0 10px;color:var(--clc-accent)}
#compassLearningCycle .clc-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#compassLearningCycle .clc-metrics section{border:1px solid var(--t-linie);border-radius:10px;padding:10px;font-size:12px}
#compassLearningCycle .clc-metrics h3{font-size:11px;margin:0 0 9px;font-weight:600}
#compassLearningCycle .clc-metrics strong{font-size:27px;font-weight:500}
#compassLearningCycle .clc-metrics small{display:block;margin-top:7px;font-size:10px}
#compassLearningCycle .clc-adaptation{border-top:1px solid var(--t-linie);border-bottom:1px solid var(--t-linie);padding:12px 0;margin:14px 0}
#compassLearningCycle .clc-adaptation p{font-size:12px;margin:6px 0}
#compassLearningCycle .clc-feedback{font-size:12px}
#compassLearningCycle .clc-privacy{font-size:11px;margin-top:15px;color:var(--t-leise)}
#compassLearningCycle .clc-privacy summary{cursor:pointer;font-weight:600}
#compassLearningCycle .clc-message{font-size:12px;color:var(--clc-accent);margin:8px 0 0}
#compassLearningCycle[data-expanded=true]{width:min(1080px,calc(100vw - 36px));max-width:none;padding:26px}
#compassLearningCycle[data-expanded=true] .clc-head strong{font-size:26px}
#compassLearningCycle[data-expanded=true] .clc-layout{display:grid;grid-template-columns:1fr 1fr;column-gap:30px;align-items:start}
#compassLearningCycle[data-expanded=true] .clc-layout>.clc-status,#compassLearningCycle[data-expanded=true] .clc-layout>.clc-concepts,#compassLearningCycle[data-expanded=true] .clc-layout>.clc-message{grid-column:1/-1}
#compassLearningCycle[data-expanded=true] .clc-concept-image{height:165px}
#compassLearningCycle[data-expanded=true] .clc-concepts b{font-size:15px;padding:10px}
#compassLearningCycle .clc-central{font-size:12px;border:1px solid var(--t-linie);border-radius:10px;padding:12px;margin:14px 0}
#compassLearningCycle .clc-central p{margin:6px 0}
#compassLearningCycle .clc-report{grid-column:1/-1;font-size:12px;border-top:1px solid var(--t-linie);padding-top:12px;margin-top:14px}
#compassLearningCycle .clc-report summary{cursor:pointer;font-weight:600}
#compassLearningCycle .clc-table-scroll{overflow:auto;margin-top:10px}
#compassLearningCycle table{border-collapse:collapse;width:100%;font-size:12px}
#compassLearningCycle th,#compassLearningCycle td{padding:7px;text-align:left;border-bottom:1px solid var(--t-linie)}
#compassLearningCycle .clc-layout>.clc-feedback{padding:14px;background:var(--t-zweit-leise);border-radius:10px}
@media(max-width:760px){#compassLearningCycle[data-expanded=true]{padding:18px;width:calc(100vw - 24px)}#compassLearningCycle[data-expanded=true] .clc-layout{display:block}#compassLearningCycle[data-expanded=true] .clc-concept-image{height:85px}}
@media(max-width:600px){body:has(#compassLearningCycle) .cfb-fab{display:none}#compassLearningCycle{bottom:10px;right:10px;max-height:72vh;width:345px;padding:15px}#compassLearningCycle[data-position=left]{left:10px}}
@media(prefers-reduced-motion:reduce){#compassLearningCycle *{scroll-behavior:auto}}
