/* Schriftliches Rechnen: Kaestchenpapier (blog/gym/mathe/schriftlich_*) */

.rechenblatt-rahmen {
    overflow-x: auto;
    margin: 20px 0;
}

.rechenblatt {
    border-collapse: collapse;
    font-family: "Courier New", Courier, monospace;
    font-size: 22px;
    background-color: #fdfdf8;
    background-image:
        linear-gradient(#d6e4f0 1px, transparent 1px),
        linear-gradient(90deg, #d6e4f0 1px, transparent 1px);
    background-size: 32px 32px;
    border: 1px solid #d6e4f0;
}

.rechenblatt td {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    color: #222;
}

.rechenblatt td.strich { border-bottom: 2px solid #222; }
.rechenblatt td.zeichen { color: #555; }
.rechenblatt td.ergebnis { font-weight: bold; }
.rechenblatt td.wort { white-space: nowrap; text-align: left; font-size: 18px; }
.rechenblatt td.uebertrag { font-size: 13px; vertical-align: bottom; color: #c62828; }
.rechenblatt td.runter { text-decoration: underline dotted; }

/* Farben verbinden eine Ziffer der Aufgabe mit ihrer Zeile und ihrem Schritt */
.f0 { color: #1565c0 !important; }
.f1 { color: #2e7d32 !important; }
.f2 { color: #c2185b !important; }
.f3 { color: #e65100 !important; }

.rechenschritte li { margin-bottom: 8px; line-height: 1.6; }

.merkkasten {
    margin: 20px 0;
    padding: 15px;
    background-color: #f0f0f0;
    border-left: 4px solid #333;
    border-radius: 4px;
    line-height: 1.6;
}

.vielfache { border-collapse: collapse; margin: 10px 0 20px; }
.vielfache td, .vielfache th { border: 1px solid #ccc; padding: 4px 10px; text-align: right; }
.vielfache th { background-color: #f5f5f5; }

.eigene-aufgabe { margin: 15px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eigene-aufgabe input { width: 9em; padding: 6px 8px; font-size: 16px; }
.eigene-aufgabe button { padding: 7px 16px; font-size: 16px; cursor: pointer; }
.eingabe-fehler { color: #c62828; }

/* Uebungsspiel schriftlich_ueben/ (zusammen mit game.css) */
.sr-aufgabe { font-size: 32px; font-weight: bold; text-align: center; margin: 10px 0 25px; font-variant-numeric: tabular-nums; }
.sr-eingaben { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }
.sr-eingaben .form-group { flex: 1 1 12em; max-width: 18em; margin-bottom: 0; }
.sr-eingaben input[type="text"] { font-size: 20px; text-align: center; }
.sr-loesung { margin: 20px 0; padding: 10px 15px; background: var(--wa-surface); border: 1px solid var(--wa-border); border-radius: 8px; }
.sr-loesung summary { cursor: pointer; font-weight: 600; }
.sr-ende { text-align: center; font-size: 18px; }
.rechenschritte .uebertrag-text { color: #c62828; }