/* Würfel – Aussehen des Tools
   Kopfleiste, Fusszeile und Markenfarben kommen aus marke.css.
   Farben hell/dunkel wie der Übe-Timer, passend zu marcscheidegger.ch. */

/* Hell: helles Blaugrau, Text in Nachtblau */
:root {
    --bg: #eef1f7;
    --panel: #ffffff;
    --ink: #0b1220;
    --muted: #5a6785;
    --line: #dbe1ee;
    --field: #f1f4f9;
}
/* Dunkel: Nachtblau wie die Hauptseite */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b1220;
        --panel: #16213a;
        --ink: #f5f7fb;
        --muted: #a9b8d6;
        --line: #2a3a5e;
        --field: #111a2e;
    }
}

/* Farbe jedes Würfels (gleiche Palette wie die Timerfarben im Übe-Timer) */
[data-farbe="blau"]   { --c: #4fb6ea; --c-ink: #0b1220; }
[data-farbe="gelb"]   { --c: #f7c925; --c-ink: #0b1220; }
[data-farbe="gruen"]  { --c: #5cc96b; --c-ink: #0b1220; }
[data-farbe="rot"]    { --c: #d8262c; --c-ink: #ffffff; }
[data-farbe="orange"] { --c: #f5922f; --c-ink: #0b1220; }

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--ms-font);
    line-height: 1.45;
}
.ms-foot { --ms-foot-color: var(--muted); opacity: 1; }
.ms-foot p { margin: 0; }

.screen { max-width: 1120px; margin: 0 auto; padding: 24px 16px 40px; }

/* ---------- Titel ---------- */
.tool-head { margin: 8px 0 18px; }
.kicker {
    display: block; font-size: .78rem; font-weight: 600; letter-spacing: .28em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.tool-head h1 { margin: 0 0 6px; font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.1; letter-spacing: -.01em; }
.hint { color: var(--muted); margin: 0 0 12px; }

/* ---------- Auswahl der Würfel ---------- */
.picker { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.pick {
    font: inherit; font-weight: 600; cursor: pointer;
    padding: 9px 16px 9px 12px; border-radius: 999px;
    background: var(--panel); color: var(--ink); border: 2px solid var(--line);
    display: inline-flex; align-items: center; gap: 8px;
    transition: border-color .15s, background .15s, transform .08s;
}
.pick::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.pick:hover { border-color: var(--c); }
.pick:active { transform: scale(.97); }
.pick[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: var(--c-ink); }
.pick[aria-pressed="true"]::before { background: var(--c-ink); }

/* ---------- Würfel-Karten ---------- */
.wuerfel { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }
.card {
    background: var(--panel); border-radius: 18px; overflow: hidden;
    border: 1px solid var(--line); border-top: 6px solid var(--c);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
}
.card-header { margin: 0; padding: 16px 20px 0; font-size: 1.2rem; }
.card-body { padding: 14px 20px 22px; }

.btn {
    font: inherit; font-weight: 600; cursor: pointer;
    padding: 10px 22px; border-radius: 999px;
    background: var(--c); color: var(--c-ink); border: 2px solid var(--c);
    transition: transform .08s, filter .15s;
}
.btn:hover { filter: brightness(.93); }
.btn:active { transform: scale(.97); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); padding: 7px 16px; font-size: .9rem; }
.btn-ghost:hover { border-color: var(--c); filter: none; }

/* Gewürfelte Töne / Akkorde */
.ergebnis {
    min-height: 1.5em; margin: 16px 0 12px;
    font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; word-spacing: .3em;
    font-variant-numeric: tabular-nums;
}
.ergebnis.gross { font-size: 2rem; letter-spacing: 0; word-spacing: normal; }
.ergebnis:empty { min-height: 0; margin: 0 0 4px; }

/* Griffbilder (weisser Hintergrund, auch im dunklen Modus gut lesbar) */
.griff { display: block; max-width: 100%; height: auto; margin-top: 14px; border-radius: 10px; background: #fff; }

/* Griffdiagramm (SVG aus akkorde.js) mit Knöpfen zum Speichern, Kopieren, Teilen */
.griffbild { margin-top: 14px; }
.griff-svg svg { display: block; width: 100%; max-width: 360px; height: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.griff-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.griff-aktionen .btn { font-size: .85rem; padding: 6px 14px; }
.griff-aktionen [hidden] { display: none; }

/* Notenbild der Ton-Würfel (noten.js) */
.aufdecken { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.aufdecken > span { color: var(--muted, #5a6785); font-weight: 600; margin-right: 4px; }
.aufdecken[hidden], .ergebnis[hidden] { display: none; }
.noten-knopf { font-size: .9rem; padding: 7px 16px; }
.noten-knopf[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: var(--c-ink); }
.notenbild[hidden] { display: none; }
.notenbild .griff-svg svg { max-width: 420px; }

/* Übersicht aller Akkorde */
.alle-akkorde {
    margin-top: 24px; background: var(--panel); border-radius: 18px; padding: 20px;
    border: 1px solid var(--line); border-top: 6px solid var(--c); box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
}
.alle-akkorde[hidden] { display: none; }
.alle-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.alle-kopf h2 { margin: 0; font-size: 1.3rem; }
.alle-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.alle-raster { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.alle-griff svg { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.alle-griff .btn { margin-top: 8px; font-size: .82rem; padding: 5px 12px; }
#alleAkkordeButton { margin-left: 6px; }

/* CAGED: Töne stufenweise einblenden, Legende */
.stufen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.stufe {
    font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; padding: 6px 12px; border-radius: 999px;
    background: var(--panel); color: var(--ink); border: 2px solid var(--line);
}
.stufe.an, .stufe[aria-pressed="true"] { background: #2f6fde; border-color: #2f6fde; color: #fff; }
.stufe:disabled { cursor: default; }
.moll-zahlen { display: flex; gap: 8px; align-items: center; font-size: .88rem; color: var(--muted); margin-bottom: 10px; cursor: pointer; }
.moll-zahlen[hidden] { display: none; }
.legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; font-size: .8rem; color: var(--muted); }
.legende i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.l-grund { background: #2f6fde; box-shadow: 0 0 0 2px var(--ink); }
.l-akkord { background: #2f6fde; }
.l-penta { background: #9fd0f7; }
.l-leit { background: #d9483b; }
.l-gleit { background: #3fae6a; }
#imgCaged .griff-svg svg { max-width: 420px; }

/* Übersicht aller CAGED-Formen */
.formen-steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 16px; }
.formen-steuerung label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.formen-steuerung select { font: inherit; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.formen-steuerung .stufen, .formen-steuerung .moll-zahlen { margin: 0; }
.formen-raster .alle-fuss { justify-content: flex-start; }
.formen-raster { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
#alleFormenButton { margin-left: 6px; }

/* Lernstand: Gewusst ja/nein */
.rest { font-size: .85rem; margin: 10px 0 0; }
.rest:empty { display: none; }
.gewusst { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.gewusst[hidden] { display: none; }
.gewusst > span:first-child { font-weight: 600; color: var(--muted); margin-right: 2px; }
.gewusst .btn { padding: 6px 14px; font-size: .9rem; }
.btn-ja { --c: #5cc96b; --c-ink: #0b1220; }
.btn-nein { --c: #d8262c; --c-ink: #ffffff; }
.gewusst .btn:disabled { opacity: .45; cursor: default; filter: none; }
.gewusst-meldung { font-size: .9rem; color: var(--muted); }

/* Übersicht: Haken/Kreuz pro Akkord */
.alle-griff { position: relative; }
.marke {
    position: absolute; top: 8px; right: 8px; z-index: 1; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; font-size: 1rem;
}
.marke.ja { background: #5cc96b; color: #0b1220; }
.marke.nein { background: #d8262c; color: #fff; }
.alle-fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.zaehler { font-size: .8rem; color: var(--muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
.lernstand { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }

/* Chaos-Karte */
.chaos-karte {
    margin-top: 16px; padding: 22px 18px; text-align: center;
    border-radius: 14px; background: var(--field); border: 2px dashed var(--c);
}
.chaos-karte p { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.25; }

:focus-visible { outline: 3px solid var(--ms-yellow); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }