/* ── Brüche: Darstellung ── */
        .frac {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            vertical-align: middle;
            margin: 0 0.12em;
            line-height: 1.15;
            font-variant-numeric: tabular-nums;
        }

        .frac .fz {
            padding: 0 0.25em 0.05em;
            border-bottom: 1.5px solid currentColor;
        }

        .frac .fn {
            padding: 0.05em 0.25em 0;
        }

        .mixed {
            white-space: nowrap;
        }

        .prompt,
        .solution p,
        .solution li,
        section.info p,
        section.info li,
        details.example p {
            line-height: 2.1;
        }

        /* ── Brüche: Eingabe (Ganze, Zähler über Nenner) ── */
        .fracin {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            margin-top: 0.25rem;
        }

        .fracin .fcol {
            display: inline-flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0.25rem;
        }

        .fracin .fbar {
            height: 2px;
            background: var(--text-color);
            border-radius: 1px;
        }

        .field .fracin input[type=text],
        .field input[type=text].intin {
            display: block;
            width: 4.8rem;
            min-height: 44px;
            padding: 0.3rem;
            margin: 0;
            text-align: center;
            font-family: inherit;
            font-size: 1.15rem;
        }

        .field .fracin input[type=text].fw {
            width: 3.6rem;
        }

        .field .fracin input.fw::placeholder {
            font-size: 0.75rem;
        }

        .field input[type=text].intin {
            margin-top: 0.25rem;
            width: 7rem;
        }

        /* ── Bruchstreifen (Grundlagen und Bruch-Baukasten) ── */
        .fl-bar {
            display: flex;
            height: 2.4rem;
            max-width: 26rem;
            border: 2px solid var(--clr-accent2);
            border-radius: 6px;
            overflow: hidden;
            margin: 0.4rem 0;
            background: var(--panel-bg);
        }

        .fl-bar.static {
            height: 1.6rem;
            max-width: 18rem;
        }

        .fl-cell {
            flex: 1 1 0;
            border-left: 1px solid var(--clr-accent2);
        }

        .fl-cell:first-child {
            border-left: none;
        }

        .fl-cell.on {
            background: color-mix(in srgb, var(--clr-accent2) 55%, transparent);
        }

        .fl-stack {
            margin: 0.4rem 0;
        }

        /* ── Sieben Reiter: Raster statt einer Zeile auf schmalen Bildschirmen ── */
        @media (max-width: 1100px) {
            .tabbar {
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }
        }

        @media (max-width: 640px) {
            .tabbar {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            .tabbar .tab-info {
                grid-column: 1 / -1;
            }

            .tab {
                font-size: 0.8rem;
                min-height: 48px;
            }

            .field .fracin input[type=text] {
                width: 4.4rem;
            }

            .field .fracin input[type=text].fw {
                width: 3.2rem;
            }

            .field input[type=text].intin {
                width: 7rem;
            }
        }