/* /Components/CrossHatchingDynamic.razor.rz.scp.css */
/* Dynamische Cross-Hatching-Grafik: das ECHTE Puzzle mit Cross-Hatching-Markierungen. */

.chd-illustration[b-j9c3r98zf9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.chd-mini-grid[b-j9c3r98zf9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    background: #333;
    padding: 2px;
    aspect-ratio: 1;
    width: 300px;
    box-sizing: border-box;
    border-radius: 2px;
}

.chd-mini-box[b-j9c3r98zf9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1px;
    background: #b0b0b0;
}

.chd-mini-cell[b-j9c3r98zf9] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    aspect-ratio: 1;
    background: #fff;
    color: #333;
}

    /* Ausserhalb der Band: sehr gedaempft */
    .chd-mini-cell.out-band[b-j9c3r98zf9] {
        background: #f5f5f5;
        color: #bbb;
    }

    /* Innerhalb Band, aussrhalb Ziel-Block: hellblau (Cross-Hatching-Kontext) */
    .chd-mini-cell.in-band[b-j9c3r98zf9] {
        background: #eaf3ff;
        color: #333;
    }

    /* Wert-Vorkommen der Zahl in den anderen Blocks: orange */
    .chd-mini-cell.value-hit[b-j9c3r98zf9] {
        background: #ffb74d;
        color: #222;
        font-weight: 700;
    }

    /* Innerhalb Ziel-Block (Rest): dezent gelb */
    .chd-mini-cell.target-box[b-j9c3r98zf9] {
        background: #fffef2;
        color: #555;
    }

    /* Ziel-Zeile/Spalte im Ziel-Block: kraeftiger gelb */
    .chd-mini-cell.target-row[b-j9c3r98zf9] {
        background: #fff9dd;
        color: #333;
    }

.chd-caption[b-j9c3r98zf9] {
    font-size: 0.85rem;
    color: #333;
    line-height: 1.55;
    text-align: center;
    max-width: 500px;
}

.chd-inline-swatch[b-j9c3r98zf9] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #999;
    border-radius: 2px;
    vertical-align: baseline;
    margin: 0 2px;
    transform: translateY(1px);
}

    .chd-inline-swatch.value-hit[b-j9c3r98zf9] {
        background: #ffb74d;
    }
/* /Components/CrossHatchingElimination.razor.rz.scp.css */
/* Dynamische Grafik fuer Cross-Hatching-Elimination (Stufe 4).
   Rot/gruen faerbt die Spalten (bzw. Zeilen bei vertikaler Band)
   der Kandidatenzellen. Orange markiert die Blocker-Zellen. */

.che-illustration[b-8bzf6l87a3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.che-mini-grid[b-8bzf6l87a3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    background: #333;
    padding: 2px;
    aspect-ratio: 1;
    width: 300px;
    box-sizing: border-box;
    border-radius: 2px;
}

.che-mini-box[b-8bzf6l87a3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1px;
    background: #b0b0b0;
}

.che-mini-cell[b-8bzf6l87a3] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    aspect-ratio: 1;
    background: #fff;
    color: #333;
}

    /* Alles ausserhalb Ziel-Block + relevante Lanes: gedaempft */
    .che-mini-cell.out-band[b-8bzf6l87a3] {
        background: #f5f5f5;
        color: #bbb;
    }

    /* Ziel-Block Kontext */
    .che-mini-cell.target-box[b-8bzf6l87a3] {
        background: #fffef2;
        color: #666;
    }

    /* Ziel-Reihe im Ziel-Block */
    .che-mini-cell.target-row[b-8bzf6l87a3] {
        background: #fff9dd;
        color: #333;
    }

    /* Blockierte Spalte (rot) — Wert-Vorkommen macht diese Spalte fuer die Ziel-Reihe unmoeglich */
    .che-mini-cell.col-blocked[b-8bzf6l87a3] {
        background: #ffe0e0;
        color: #888;
    }

    /* Offene Spalte (gruen) — hier gehoert die Zahl hin */
    .che-mini-cell.col-open[b-8bzf6l87a3] {
        background: #d5ecd5;
        color: #555;
    }

    /* Blocker-Zelle mit dem Wert — orange, klar sichtbar */
    .che-mini-cell.value-hit[b-8bzf6l87a3] {
        background: #ffb74d;
        color: #222;
        font-weight: 700;
    }

    /* Ziel-Zelle: kraeftig gelb mit Loesungswert */
    .che-mini-cell.target[b-8bzf6l87a3] {
        background: #fff4d0;
        color: #b8860b;
        font-weight: 700;
        outline: 2px solid #f0b400;
        outline-offset: -2px;
        z-index: 1;
    }

.che-caption[b-8bzf6l87a3] {
    font-size: 0.85rem;
    color: #333;
    line-height: 1.55;
    text-align: center;
    max-width: 500px;
}

.che-swatch[b-8bzf6l87a3] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #999;
    border-radius: 2px;
    vertical-align: baseline;
    margin: 0 2px;
    transform: translateY(1px);
}

    .che-swatch.col-blocked[b-8bzf6l87a3] {
        background: #ffe0e0;
    }

    .che-swatch.col-open[b-8bzf6l87a3] {
        background: #d5ecd5;
    }

    .che-swatch.value-hit[b-8bzf6l87a3] {
        background: #ffb74d;
    }
/* /Components/CrossHatchingExample.razor.rz.scp.css */
/* Cross-Hatching-Beispiel — statische, wiederverwendbare Illustration.
   Zwei Panels ("Blockreihe" + "Spalten-Ausschluss") mit Phantasie-Zahlen. */

.ch-illustration[b-h72trnqukj] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

/* Step-Container: Grid links (fix), Text rechts (fill).
   So sitzt die Illustration und der Erklärtext nebeneinander,
   statt der Text unter das Grid gestapelt zu werden. */
.ch-step[b-h72trnqukj] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 720px) {
    /* Auf Handy einspaltig, damit nichts abgeschnitten wird. */
    .ch-step[b-h72trnqukj] {
        grid-template-columns: 1fr;
    }
}

.ch-step-number[b-h72trnqukj] {
    grid-column: 1 / -1;
}

.ch-step-number[b-h72trnqukj] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 10px;
    background: #eef1f5;
    border-radius: 3px;
    align-self: flex-start;
}

.ch-mini-grid[b-h72trnqukj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    background: #333;
    padding: 2px;
    aspect-ratio: 1;
    width: 280px;
    box-sizing: border-box;
    border-radius: 2px;
}

.ch-mini-box[b-h72trnqukj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1px;
    background: #b0b0b0;
}

.ch-mini-cell[b-h72trnqukj] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    aspect-ratio: 1;
    background: #fff;
    color: #333;
}

    /* Ziel-Zelle: gelb mit Fragezeichen */
    .ch-mini-cell.target[b-h72trnqukj] {
        background: #fff4d0;
        color: #b8860b;
        font-weight: 700;
        outline: 2px solid #f0b400;
        outline-offset: -2px;
        z-index: 1;
    }

    /* Ziel-Reihe innerhalb des Ziel-Blocks: helles Gelb */
    .ch-mini-cell.target-row[b-h72trnqukj] {
        background: #fff9dd;
    }

    /* Rest des Ziel-Blocks (Kontext) */
    .ch-mini-cell.target-box[b-h72trnqukj] {
        background: #fffef2;
        color: #999;
    }

    /* Value-Hits (Vorkommen der Zahl anderswo) — orange */
    .ch-mini-cell.value-hit[b-h72trnqukj] {
        background: #ffb74d;
        color: #222;
        font-weight: 700;
    }

    /* Blockierte Kandidatenspalte (die 4 verhindert etwas dort) — leicht rot getoent */
    .ch-mini-cell.candidate-blocked-col[b-h72trnqukj] {
        background: #ffe0e0;
        color: #888;
    }

    /* Offene Kandidatenspalte (hier gehoert die 4 hin) — leicht gruen getoent */
    .ch-mini-cell.candidate-open-col[b-h72trnqukj] {
        background: #e0f5e0;
        color: #888;
    }

    /* Neutraler Kontext innerhalb der Blockreihe — hellblau eingefaerbt,
       damit man sofort sieht, WO wir gerade hinschauen. */
    .ch-mini-cell.in-band[b-h72trnqukj] {
        background: #e3f2fd;
        color: #333;
    }

    /* Zellen ausserhalb der Blockreihe (rows 3-8) — Kontext-Werte in gedaempftem Grau */
    .ch-mini-cell.out-band[b-h72trnqukj] {
        background: #fff;
        color: #999;
    }

    /* Ausgeblendete Zellen (nur fuer alten Fall, hier eig. nicht mehr genutzt) */
    .ch-mini-cell.hidden[b-h72trnqukj] {
        background: #f5f5f5;
        color: #ccc;
    }

.ch-step-text[b-h72trnqukj] {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.6;
    text-align: left;
    /* Kein max-width — der Text soll die volle Panel-Breite nutzen. */
}

.ch-list[b-h72trnqukj] {
    padding-left: 20px;
    margin: 6px 0;
}

    .ch-list li[b-h72trnqukj] {
        margin-bottom: 3px;
    }

.ch-blocked-tag[b-h72trnqukj] {
    display: inline-block;
    padding: 1px 6px;
    background: #ffe0e0;
    color: #b03030;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
}

.ch-target-tag[b-h72trnqukj] {
    color: #1976d2;
}

.ch-fallback-note[b-h72trnqukj] {
    margin-top: 10px;
    padding: 8px 10px;
    background: #eff6fd;
    border-left: 3px solid #1976d2;
    border-radius: 3px;
    font-size: 0.8rem;
    color: #444;
    line-height: 1.5;
}

.ch-vertical-note[b-h72trnqukj] {
    margin-top: 10px;
    padding: 8px 10px;
    background: #f5f0ff;
    border-left: 3px solid #7e57c2;
    border-radius: 3px;
    font-size: 0.8rem;
    color: #444;
    line-height: 1.5;
}
/* /Components/EliminationDynamic.razor.rz.scp.css */
/* Dynamische Elimination-Illustration. Zeigt das echte 9x9-Puzzle mit
   Source-Zellen (Muster) gruen und Affected-Zellen (Streichung) rot markiert. */

.ed-illustration[b-mdq0jtz0vu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.ed-caption-top[b-mdq0jtz0vu] {
    font-size: 0.9rem;
    color: #333;
    max-width: 640px;
    text-align: center;
}

.ed-mini-grid[b-mdq0jtz0vu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    background: #333;
    padding: 2px;
    aspect-ratio: 1;
    width: 340px;
    box-sizing: border-box;
    border-radius: 2px;
}

.ed-mini-box[b-mdq0jtz0vu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1px;
    background: #b0b0b0;
}

.ed-mini-cell[b-mdq0jtz0vu] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    aspect-ratio: 1;
    background: #fff;
    color: #333;
}

    /* Zellen, die nicht direkt beteiligt sind — dezent im Hintergrund. */
    .ed-mini-cell.other[b-mdq0jtz0vu] {
        background: #fafafa;
        color: #999;
    }

    /* Source-Zellen: das Muster (z.B. Naked Pair) — grün. */
    .ed-mini-cell.source[b-mdq0jtz0vu] {
        background: #c8e6c9;
        color: #1b5e20;
        font-weight: 700;
        outline: 2px solid #2e7d32;
        outline-offset: -2px;
        z-index: 1;
    }

    /* Affected-Zellen: hier werden Kandidaten gestrichen — rot/rosa. */
    .ed-mini-cell.affected[b-mdq0jtz0vu] {
        background: #ffcdd2;
        color: #b71c1c;
        font-weight: 600;
    }

.ed-legend[b-mdq0jtz0vu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: #333;
    max-width: 640px;
}

.ed-legend-item[b-mdq0jtz0vu] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ed-swatch[b-mdq0jtz0vu] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    border-radius: 2px;
    flex-shrink: 0;
}

    .ed-swatch.source[b-mdq0jtz0vu] {
        background: #c8e6c9;
        border-color: #2e7d32;
    }

    .ed-swatch.affected[b-mdq0jtz0vu] {
        background: #ffcdd2;
        border-color: #b71c1c;
    }

.ed-conclusion[b-mdq0jtz0vu] {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.55;
    text-align: center;
    max-width: 640px;
}
/* /Components/HiddenPairIllustration.razor.rz.scp.css */
/* Statische Hidden-Pair-Illustration. Analog zu NakedPair — gleiche
   Struktur, aber Farbschema anders: die zwei Zahlen 4 und 6 bekommen ein
   deutliches "keep"-Highlight, weil sie das eigentliche Hidden Pair sind. */

.hp-illustration[b-rlnzor3m7r] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.hp-row[b-rlnzor3m7r] {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 3px;
    background: #333;
    padding: 3px;
    width: 100%;
    max-width: 640px;
    box-sizing: border-box;
    border-radius: 2px;
}

.hp-cell[b-rlnzor3m7r] {
    aspect-ratio: 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

    .hp-cell.filled[b-rlnzor3m7r] {
        font-size: 1.4rem;
        font-weight: 700;
        color: #000;
    }

    .hp-cell.pair[b-rlnzor3m7r] {
        background: #c8e6c9;
    }

    .hp-cell.candidates.other[b-rlnzor3m7r] {
        background: #f5f5f5;
        color: #666;
    }

.hp-cand-line[b-rlnzor3m7r] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px;
}

    .hp-cand-line .strike[b-rlnzor3m7r] {
        color: #c62828;
        text-decoration: line-through;
        text-decoration-thickness: 2px;
    }

    /* "keep": die Zahlen, die das Hidden Pair bilden — dick und dunkelgruen */
    .hp-cand-line .keep[b-rlnzor3m7r] {
        color: #1b5e20;
        font-weight: 800;
        font-size: 0.85rem;
    }

.hp-legend[b-rlnzor3m7r] {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: #333;
    flex-wrap: wrap;
    justify-content: center;
}

.hp-legend-item[b-rlnzor3m7r] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hp-swatch[b-rlnzor3m7r] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    border-radius: 2px;
}

    .hp-swatch.pair[b-rlnzor3m7r] {
        background: #c8e6c9;
    }

    .hp-swatch.keep[b-rlnzor3m7r] {
        background: #a5d6a7;
        border-color: #1b5e20;
    }

.hp-conclusion[b-rlnzor3m7r],
.hp-note[b-rlnzor3m7r] {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.55;
    text-align: center;
    max-width: 640px;
}

.hp-note[b-rlnzor3m7r] {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
}
/* /Components/HiddenSingleIllustration.razor.rz.scp.css */
/* Hidden-Single-Grafik.
   Zwei Modi:
     - Cross-Hatching (Box HS): 2 Panels nacheinander, jeder mit eigenem Fokus
     - Row/Col HS: einfaches Einzel-Panel (Fallback)
*/

.hs-illustration[b-zhiuumk6bb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    align-items: center;
}

.hs-step[b-zhiuumk6bb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.hs-step-number[b-zhiuumk6bb] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    background: #eee;
    border-radius: 3px;
    align-self: flex-start;
}

.hs-mini-grid[b-zhiuumk6bb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    background: #333;
    padding: 2px;
    aspect-ratio: 1;
    width: 280px;
    box-sizing: border-box;
    border-radius: 2px;
}

.hs-mini-box[b-zhiuumk6bb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1px;
    background: #b0b0b0;
}

.hs-mini-cell[b-zhiuumk6bb] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    aspect-ratio: 1;
    background: #fff;
    color: #333;
}

    /* Ziel-Zelle: gelb mit Ausrufezeichen */
    .hs-mini-cell.target[b-zhiuumk6bb] {
        background: #fff4d0;
        color: #b8860b;
        font-weight: 700;
        outline: 2px solid #f0b400;
        outline-offset: -2px;
        z-index: 1;
    }

    /* Ziel-Reihe innerhalb der Ziel-Box (hell gelblich, aber ohne Rahmen) */
    .hs-mini-cell.target-row[b-zhiuumk6bb] {
        background: #fff9dd;
        color: #333;
    }

    /* Rest der Ziel-Box (leicht abgesetzt) */
    .hs-mini-cell.target-box[b-zhiuumk6bb] {
        background: #fffef2;
        color: #666;
    }

    /* Value-Hit: wo die gesuchte Zahl schon steht — orange */
    .hs-mini-cell.value-hit[b-zhiuumk6bb] {
        background: #ffb74d;
        color: #222;
        font-weight: 700;
    }

    /* Andere Zellen im Band (mit oder ohne Werte) — normal, dienen als Kontext */
    .hs-mini-cell.in-band[b-zhiuumk6bb] {
        background: #fff;
        color: #333;
    }

    .hs-mini-cell.in-band-empty[b-zhiuumk6bb] {
        background: #fff;
    }

    /* Row/Col-HS Modus: Zellen innerhalb der Einheit */
    .hs-mini-cell.in-unit[b-zhiuumk6bb] {
        background: #d8ebff;
        color: #333;
    }

    /* Row/Col-HS Modus: gedaempfte Zellen ausserhalb */
    .hs-mini-cell.out-unit[b-zhiuumk6bb] {
        background: #f5f5f5;
        color: #a0a0a0;
    }

    /* Zellen komplett aus dem Fokus (Cross-Hatching-Modus) */
    .hs-mini-cell.hidden[b-zhiuumk6bb] {
        background: #f5f5f5;
        color: #ccc;
    }

.hs-step-text[b-zhiuumk6bb] {
    font-size: 0.9rem;
    color: #333;
    text-align: left;
    line-height: 1.6;
    /* Kein max-width — Text soll die Breite des HintPanels nutzen. */
}

/* Kleine Farb-Swatches inline im Text — helfen, die Farben in der Grafik zuzuordnen */
.ns-inline-swatch[b-zhiuumk6bb] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #999;
    border-radius: 2px;
    vertical-align: baseline;
    margin: 0 2px;
    transform: translateY(1px);
}

    .ns-inline-swatch.value-hit[b-zhiuumk6bb] {
        background: #ffb74d;
    }

    .ns-inline-swatch.target-row[b-zhiuumk6bb] {
        background: #fff9dd;
    }

    .ns-inline-swatch.target[b-zhiuumk6bb] {
        background: #fff4d0;
        border-color: #f0b400;
    }
/* /Components/HiddenTripleIllustration.razor.rz.scp.css */
/* Statische Hidden-Pair-Illustration. Analog zu NakedPair — gleiche
   Struktur, aber Farbschema anders: die zwei Zahlen 4 und 6 bekommen ein
   deutliches "keep"-Highlight, weil sie das eigentliche Hidden Pair sind. */

.hp-illustration[b-a6w28l2fvs] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.hp-row[b-a6w28l2fvs] {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 3px;
    background: #333;
    padding: 3px;
    width: 100%;
    max-width: 640px;
    box-sizing: border-box;
    border-radius: 2px;
}

.hp-cell[b-a6w28l2fvs] {
    aspect-ratio: 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

    .hp-cell.filled[b-a6w28l2fvs] {
        font-size: 1.4rem;
        font-weight: 700;
        color: #000;
    }

    .hp-cell.pair[b-a6w28l2fvs] {
        background: #c8e6c9;
    }

    .hp-cell.candidates.other[b-a6w28l2fvs] {
        background: #f5f5f5;
        color: #666;
    }

.hp-cand-line[b-a6w28l2fvs] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px;
}

    .hp-cand-line .strike[b-a6w28l2fvs] {
        color: #c62828;
        text-decoration: line-through;
        text-decoration-thickness: 2px;
    }

    /* "keep": die Zahlen, die das Hidden Pair bilden — dick und dunkelgruen */
    .hp-cand-line .keep[b-a6w28l2fvs] {
        color: #1b5e20;
        font-weight: 800;
        font-size: 0.85rem;
    }

.hp-legend[b-a6w28l2fvs] {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: #333;
    flex-wrap: wrap;
    justify-content: center;
}

.hp-legend-item[b-a6w28l2fvs] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hp-swatch[b-a6w28l2fvs] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    border-radius: 2px;
}

    .hp-swatch.pair[b-a6w28l2fvs] {
        background: #c8e6c9;
    }

    .hp-swatch.keep[b-a6w28l2fvs] {
        background: #a5d6a7;
        border-color: #1b5e20;
    }

.hp-conclusion[b-a6w28l2fvs],
.hp-note[b-a6w28l2fvs] {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.55;
    text-align: center;
    max-width: 640px;
}

.hp-note[b-a6w28l2fvs] {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
}
/* /Components/HintPanel.razor.rz.scp.css */
/* Kompakte 3×3-Ziffern-Buttons fuer die interaktive Zahl-Abfrage in Stufe 1. */

.hint-guess-buttons[b-ede7fuujy3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 60px));
    gap: 6px;
    max-width: 200px;
}

.hint-guess-btn[b-ede7fuujy3] {
    aspect-ratio: 1;
    font-size: 1.1rem;
    font-weight: 500;
    min-width: 0;
    padding: 0;
}
/* /Components/LockedCandidatesIllustration.razor.rz.scp.css */
/* Locked-Candidates-Grafik.
   Selber Grid-Aufbau wie die anderen Illustrationen, aber mit MEHREREN
   Hervorhebungsstufen (verriegelte Box + Line + Eliminations-Ziele). */

.lc-illustration[b-v8jba2co8k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    align-items: center;
}

.lc-mini-grid[b-v8jba2co8k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    background: #333;
    padding: 2px;
    aspect-ratio: 1;
    width: 280px;
    box-sizing: border-box;
    border-radius: 2px;
}

.lc-mini-box[b-v8jba2co8k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1px;
    background: #b0b0b0;
}

.lc-mini-cell[b-v8jba2co8k] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    aspect-ratio: 1;
    background: #fff;
    color: #333;
}

    /* Die verriegelte Box (ohne Line) — helles Gelb, zeigt "hier ist die Box" */
    .lc-mini-cell.locking-box[b-v8jba2co8k] {
        background: #fff9dd;
    }

    /* Die 3 Zellen in der Box, die IN der Zeile/Spalte liegen, in der der Wert
       eingesperrt ist — dunkleres Gelb, das ist der Kern der Verriegelung. */
    .lc-mini-cell.locking-line[b-v8jba2co8k] {
        background: #ffe480;
        font-weight: 700;
    }

    /* Eliminations-Ziele — hellblau. Hier kann der Wert als Kandidat gestrichen werden. */
    .lc-mini-cell.affected[b-v8jba2co8k] {
        background: #d8ebff;
    }

    /* Alle anderen Zellen — visuell zurueckgenommen. */
    .lc-mini-cell.other[b-v8jba2co8k] {
        background: #f5f5f5;
        color: #a0a0a0;
    }

/* Legende */
.lc-legend[b-v8jba2co8k] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    color: #555;
    align-self: center;
}

.lc-legend-item[b-v8jba2co8k] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lc-swatch[b-v8jba2co8k] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #b0b0b0;
    border-radius: 2px;
}

    .lc-swatch.locking-line[b-v8jba2co8k] {
        background: #ffe480;
    }

    .lc-swatch.affected[b-v8jba2co8k] {
        background: #d8ebff;
    }

.lc-conclusion[b-v8jba2co8k] {
    font-size: 0.85rem;
    color: #333;
    text-align: center;
    padding-top: 6px;
    max-width: 320px;
    line-height: 1.5;
}
/* /Components/NakedPairIllustration.razor.rz.scp.css */
/* Statische Naked-Pair-Illustration.
   9 Zellen in einer Reihe — bewusst KEIN 9×9-Grid, damit die Kandidaten-
   Anzeige gross genug bleibt. */

.np-illustration[b-jisbsqx5ww] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.np-row[b-jisbsqx5ww] {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 3px;
    background: #333;
    padding: 3px;
    width: 100%;
    max-width: 640px;
    box-sizing: border-box;
    border-radius: 2px;
}

.np-cell[b-jisbsqx5ww] {
    aspect-ratio: 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

    .np-cell.filled[b-jisbsqx5ww] {
        font-size: 1.4rem;
        font-weight: 700;
        color: #000;
    }

    /* Das Pair — grün-hell, klar hervorgehoben. */
    .np-cell.pair[b-jisbsqx5ww] {
        background: #c8e6c9;
        color: #1b5e20;
    }

    /* Zellen, in denen die zwei Kandidaten des Pairs gestrichen werden. */
    .np-cell.candidates.affected[b-jisbsqx5ww] {
        background: #e3f2fd;
        color: #0d47a1;
    }

/* Kandidaten-Zahlen: mehrere kleine Zahlen nebeneinander. */
.np-cand-line[b-jisbsqx5ww] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px;
}

    .np-cand-line .strike[b-jisbsqx5ww] {
        color: #c62828;
        text-decoration: line-through;
        text-decoration-thickness: 2px;
    }

.np-legend[b-jisbsqx5ww] {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: #333;
    flex-wrap: wrap;
    justify-content: center;
}

.np-legend-item[b-jisbsqx5ww] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.np-swatch[b-jisbsqx5ww] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    border-radius: 2px;
}

    .np-swatch.pair[b-jisbsqx5ww] {
        background: #c8e6c9;
    }

    .np-swatch.affected[b-jisbsqx5ww] {
        background: #e3f2fd;
    }

.np-conclusion[b-jisbsqx5ww],
.np-note[b-jisbsqx5ww] {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.55;
    text-align: center;
    max-width: 640px;
}

.np-note[b-jisbsqx5ww] {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
}
/* /Components/NakedSingleIllustration.razor.rz.scp.css */
/* Mini-9×9-Grid, das die Peer-Zellen der Zielzelle hervorhebt.
   Der visuelle Aufbau spiegelt das Haupt-Spielfeld:
     - Aeussere 3×3-Aufteilung mit dickeren Trennlinien (durch gap)
     - Innere 3×3-Zellen pro Box mit duenneren Trennlinien
*/

.ns-illustration[b-m3cgwjbegt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    align-items: center;
}

/* 3×3-Boxen-Layout aussen */
.ns-mini-grid[b-m3cgwjbegt] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;                     /* dicke Box-Trennung */
    background: #333;
    padding: 2px;
    aspect-ratio: 1;
    width: 280px;
    box-sizing: border-box;
    border-radius: 2px;
}

/* 3×3-Zellen-Layout innen (pro Box) */
.ns-mini-box[b-m3cgwjbegt] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1px;                     /* duenne Zell-Trennung */
    background: #b0b0b0;
}

/* Einzel-Zelle */
.ns-mini-cell[b-m3cgwjbegt] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    aspect-ratio: 1;
    background: #fff;
}

    /* Peer-Zellen (Zeile+Spalte+Box um die Zielzelle) — hellblau markiert,
       so dass der "Kreuz-plus-Box"-Bereich sofort erkennbar ist. */
    .ns-mini-cell.peer[b-m3cgwjbegt] {
        background: #d8ebff;
        color: #333;
    }

    /* Nicht-Peer-Zellen — visuell zurueckgenommen, kein Inhalt.
       Sie dienen nur als Layout-Kontext, damit man das 9×9-Muster wiedererkennt. */
    .ns-mini-cell.nonpeer[b-m3cgwjbegt] {
        background: #f5f5f5;
    }

    /* Zielzelle — gelb, klarer Kontrast zu den blauen Peers. */
    .ns-mini-cell.target[b-m3cgwjbegt] {
        background: #fff4d0;
        color: #b8860b;
        font-weight: 700;
        outline: 2px solid #f0b400;
        outline-offset: -2px;
        z-index: 1;
    }

.ns-conclusion[b-m3cgwjbegt] {
    font-size: 0.85rem;
    color: #333;
    text-align: center;
    padding-top: 6px;
    max-width: 320px;
    line-height: 1.5;
}

.ns-answer[b-m3cgwjbegt] {
    color: #1976d2;
    font-size: 1.1rem;
}
/* /Components/NakedTripleIllustration.razor.rz.scp.css */
/* Statische Naked-Pair-Illustration.
   9 Zellen in einer Reihe — bewusst KEIN 9×9-Grid, damit die Kandidaten-
   Anzeige gross genug bleibt. */

.np-illustration[b-4ogclmih0o] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.np-row[b-4ogclmih0o] {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 3px;
    background: #333;
    padding: 3px;
    width: 100%;
    max-width: 640px;
    box-sizing: border-box;
    border-radius: 2px;
}

.np-cell[b-4ogclmih0o] {
    aspect-ratio: 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

    .np-cell.filled[b-4ogclmih0o] {
        font-size: 1.4rem;
        font-weight: 700;
        color: #000;
    }

    /* Das Pair — grün-hell, klar hervorgehoben. */
    .np-cell.pair[b-4ogclmih0o] {
        background: #c8e6c9;
        color: #1b5e20;
    }

    /* Zellen, in denen die zwei Kandidaten des Pairs gestrichen werden. */
    .np-cell.candidates.affected[b-4ogclmih0o] {
        background: #e3f2fd;
        color: #0d47a1;
    }

/* Kandidaten-Zahlen: mehrere kleine Zahlen nebeneinander. */
.np-cand-line[b-4ogclmih0o] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px;
}

    .np-cand-line .strike[b-4ogclmih0o] {
        color: #c62828;
        text-decoration: line-through;
        text-decoration-thickness: 2px;
    }

.np-legend[b-4ogclmih0o] {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: #333;
    flex-wrap: wrap;
    justify-content: center;
}

.np-legend-item[b-4ogclmih0o] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.np-swatch[b-4ogclmih0o] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    border-radius: 2px;
}

    .np-swatch.pair[b-4ogclmih0o] {
        background: #c8e6c9;
    }

    .np-swatch.affected[b-4ogclmih0o] {
        background: #e3f2fd;
    }

.np-conclusion[b-4ogclmih0o],
.np-note[b-4ogclmih0o] {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.55;
    text-align: center;
    max-width: 640px;
}

.np-note[b-4ogclmih0o] {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
}
/* /Components/NumberPad.razor.rz.scp.css */
.number-pad[b-c755kv444x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 300px;
    margin-inline: auto;
}

/* Wrapper fuer die Peek-Gesture (siehe NumberPad.razor). Wir brauchen ihn,
   damit pointerdown/pointerup auch dann feuern, wenn die MudButton
   "disabled" ist — sonst koennte der User ohne Zell-Fokus nicht peeken.
   Der Wrapper wird zum Grid-Item; der Button darin fuellt ihn per width: 100%. */
.digit-slot[b-c755kv444x] {
    touch-action: manipulation;   /* verhindert Doppelklick-Zoom auf Mobile */
}

.digit-button[b-c755kv444x] {
    /* Aspect-ratio nur bei Ziffern (nicht Löschen), damit die 3 Reihen
       gleich hoch sind wie das Grid links daneben. */
    aspect-ratio: 1;
    font-size: 1.5rem;
    font-weight: 500;
    min-width: 0;         /* MudButton min-width ueberschreiben */
    padding: 0;
    width: 100%;
}

.clear-button[b-c755kv444x] {
    grid-column: 1 / span 3;
    aspect-ratio: auto;
    font-size: 1rem;
}
/* /Components/SudokuCell.razor.rz.scp.css */
/* Scoped CSS — greift dank Blazor-Isolation nur auf Elemente in dieser Component. */

.cell[b-qji3p22aht] {
    /* Layout: 3 Spalten (links-Notizen | Zentrum | rechts-Notizen)
       Die Zelle ist immer quadratisch (aspect-ratio 1) und passt sich der
       Groesse des Grid-Containers an.
       Keine Border — die Trennlinien kommen ueber den gap+background im SudokuGrid. */
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    aspect-ratio: 1;
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background 0.15s ease;
}

    .cell:hover[b-qji3p22aht] {
        background: #f5f9ff;
    }

    /* Markierte Zelle — hellblau. Dient nur der visuellen Referenz
       ("hier wollte ich hinschauen"). Beeinflusst NICHT die Ziffer-Eingabe. */
    .cell.marked[b-qji3p22aht] {
        background: #d8ebff;
    }

    /* Fokus-Zelle — starke Umrandung. Genau EINE Zelle im Grid hat Fokus,
       hier landet die Ziffer-Eingabe. Kann gleichzeitig markiert sein
       (dann Hintergrund + Rahmen kombiniert). */
    .cell.focused[b-qji3p22aht] {
        outline: 2px solid #1976d2;
        outline-offset: -2px;
        z-index: 1;
    }

    .cell.hint-target[b-qji3p22aht] {
        background: #fff4d0;
    }

    /* Pruef-Ergebnis: gruener Hintergrund, wenn der eingetragene Wert stimmt. */
    .cell.check-correct[b-qji3p22aht] {
        background: #d5ecd5;
    }

    /* Pruef-Ergebnis: roter Hintergrund, wenn der eingetragene Wert falsch ist. */
    .cell.check-wrong[b-qji3p22aht] {
        background: #ffcdd2;
    }

    /* Peek-Highlight: User haelt den Ziffer-Button gedrueckt → alle Zellen mit
       diesem Wert leuchten kraeftig lila auf. Bewusst laut/saturiert, damit die
       Hervorhebung sich sofort abhebt und beim Loslassen des Buttons klar
       zurueckgeht. Ueberschreibt andere Hintergruende (Reihenfolge in .razor
       sorgt fuer !important-Aequivalent per Kaskade). */
    .cell.peeked[b-qji3p22aht] {
        background: #e1bee7;
    }

    .cell.given .value-only[b-qji3p22aht] {
        color: #000;
        font-weight: 700;
    }

    .cell:not(.given) .value-only[b-qji3p22aht] {
        color: #1976d2;
        font-weight: 500;
    }

    /* Bei falschem Pruef-Ergebnis den User-Wert kraeftig rot einfaerben. */
    .cell.check-wrong:not(.given) .value-only[b-qji3p22aht] {
        color: #c62828;
        font-weight: 700;
    }

    /* Bei richtigem Pruef-Ergebnis den User-Wert dunkelgruen einfaerben. */
    .cell.check-correct:not(.given) .value-only[b-qji3p22aht] {
        color: #2e7d32;
        font-weight: 700;
    }

/* Wert-Anzeige */
.value-only[b-qji3p22aht] {
    grid-column: 1 / span 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1rem, 4.5vw, 2rem);
    font-family: 'Roboto', sans-serif;
}

/* Container fuer die 3 Notiz-Slots links bzw. rechts */
.notes-left[b-qji3p22aht],
.notes-right[b-qji3p22aht] {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 2px 0;
}

/* Einzelner Notiz-Slot — bewusst zurueckhaltend, damit der Wert visuell dominiert */
.note-slot[b-qji3p22aht] {
    font-size: clamp(0.5rem, 1.4vw, 0.75rem);
    color: #7a7a7a;
    line-height: 1;
    min-height: 1em;
    font-family: 'Roboto', sans-serif;
}

/* Leeres Zentrum bei Zelle ohne Wert — wird durch Grid ausgefuellt,
   sichert aber die vertikale Zentrierung der Notiz-Spalten. */
.value-empty[b-qji3p22aht] {
    /* nur Platzhalter, keine sichtbare Deko */
}
/* /Components/SudokuGrid.razor.rz.scp.css */
/* Scoped CSS fuer das SudokuGrid. */

/* Aeussere Ebene: 3x3-Anordnung der Boxen. Der etwas groessere Gap
   erzeugt die dickere Box-Trennlinie (klassische Sudoku-Optik). */
.sudoku-grid[b-l0ijwe3x8a] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3px;                    /* dicke Box-Trennlinie */
    background: #333;            /* Farbe, die durch den Gap "durchleuchtet" */
    padding: 3px;                /* Aussenrand in derselben Farbe wie Box-Trenner */
    aspect-ratio: 1;
    max-width: 540px;
    width: 100%;
    margin-inline: auto;         /* horizontal zentrieren */
    box-sizing: border-box;
}

/* Innere Ebene: 3x3-Anordnung der Zellen innerhalb einer Box.
   Duennerer Gap = duennere Zell-Trennlinien. */
.box[b-l0ijwe3x8a] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1px;                    /* duenne Zell-Trennlinie */
    background: #b0b0b0;         /* Farbe der Zell-Trenner */
}
/* /Components/XWingIllustration.razor.rz.scp.css */
/* X-Wing-Illustration — 9x9-Grid.
   4 Ecken sind gruen (das Rechteck), Rest der 2 Spalten blau mit
   durchgestrichener 6, andere Zellen gedaempft. */

.xw-illustration[b-kzwg394hlv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.xw-caption-top[b-kzwg394hlv] {
    font-size: 0.9rem;
    color: #333;
    max-width: 640px;
    text-align: center;
}

.xw-mini-grid[b-kzwg394hlv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    background: #333;
    padding: 2px;
    aspect-ratio: 1;
    width: 340px;
    box-sizing: border-box;
    border-radius: 2px;
}

.xw-mini-box[b-kzwg394hlv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1px;
    background: #b0b0b0;
}

.xw-mini-cell[b-kzwg394hlv] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    aspect-ratio: 1;
    background: #fff;
    color: #333;
}

    .xw-mini-cell.out-band[b-kzwg394hlv] {
        background: #f5f5f5;
        color: #bbb;
    }

    /* Zeilen 2 und 6 (die "Muster-Zeilen"): sanftes Gelb als Kontext. */
    .xw-mini-cell.in-row[b-kzwg394hlv] {
        background: #fff9dd;
        color: #999;
    }

    /* Betroffene Zellen (Spalten 2/6 ohne die 4 Ecken): blau + durchgestrichen. */
    .xw-mini-cell.affected[b-kzwg394hlv] {
        background: #e3f2fd;
        color: #c62828;
        text-decoration: line-through;
        text-decoration-thickness: 2px;
    }

    /* Die 4 Ecken des Rechtecks: kraeftig gruen. */
    .xw-mini-cell.corner[b-kzwg394hlv] {
        background: #c8e6c9;
        color: #1b5e20;
        font-weight: 800;
        outline: 2px solid #2e7d32;
        outline-offset: -2px;
        z-index: 1;
    }

.xw-legend[b-kzwg394hlv] {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: #333;
    flex-wrap: wrap;
    justify-content: center;
}

.xw-legend-item[b-kzwg394hlv] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.xw-swatch[b-kzwg394hlv] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    border-radius: 2px;
}

    .xw-swatch.corner[b-kzwg394hlv] {
        background: #c8e6c9;
        border-color: #2e7d32;
    }

    .xw-swatch.affected[b-kzwg394hlv] {
        background: #e3f2fd;
    }

.xw-conclusion[b-kzwg394hlv],
.xw-note[b-kzwg394hlv] {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.55;
    text-align: center;
    max-width: 640px;
}

.xw-note[b-kzwg394hlv] {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-hvg53zhqp7] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-hvg53zhqp7] {
    flex: 1;
}

.sidebar[b-hvg53zhqp7] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-hvg53zhqp7] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-hvg53zhqp7]  a, .top-row[b-hvg53zhqp7]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-hvg53zhqp7]  a:hover, .top-row[b-hvg53zhqp7]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-hvg53zhqp7]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-hvg53zhqp7] {
        justify-content: space-between;
    }

    .top-row[b-hvg53zhqp7]  a, .top-row[b-hvg53zhqp7]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-hvg53zhqp7] {
        flex-direction: row;
    }

    .sidebar[b-hvg53zhqp7] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-hvg53zhqp7] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-hvg53zhqp7]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-hvg53zhqp7], article[b-hvg53zhqp7] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Pages/Play.razor.rz.scp.css */
/* Generator-Buttons: mehrzeiliges Label (Difficulty + Untertitel mit Techniken).
   MudButton normalisiert eigentlich alles zu einer Zeile — wir muessen mit dem
   Style explizit Platz schaffen. */
[b-g3r1sklt4n] .generator-btn {
    text-transform: none;   /* MudButton nimmt sonst ALL-CAPS, das killt Lesbarkeit */
    text-align: left;
    padding: 6px 10px;
    min-height: 44px;
}

[b-g3r1sklt4n] .generator-btn .mud-button-label {
    /* Label darf mehrzeilig sein */
    white-space: normal;
    display: block;
}
/* /Pages/Register.razor.rz.scp.css */
/* Honeypot-Feld: fuer Menschen unsichtbar, fuer Bots vorhanden.
   Wir nutzen absolute + left:-9999px statt display:none, weil Bots teils
   display:none erkennen und Felder ueberspringen. So bleibt es "echt". */
.honeypot-wrapper[b-5z1dlcagq0] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}