/* Grundschrift von Christian Urff · CC BY 3.0 · fonts/LICENSE.md */
@font-face {
    font-family: Grundschrift;
    src: url("fonts/Grundschrift-Regular.otf") format("opentype");
    font-display: swap;
}
@font-face {
    font-family: Grundschrift;
    src: url("fonts/Grundschrift-Bold.otf") format("opentype");
    font-weight: 700;
    font-display: swap;
}

:root {
    --surface: #171717;
    --border: #494949;
    --text: #fff;
    --accent: #ffdf73;
}

*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    background: #000;
    color: var(--text);
    font: 1.125rem/1.5 Grundschrift, Arial, sans-serif;
}
button, input, select, textarea { font: inherit; }
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.catalog {
    width: min(68rem, calc(100% - 2rem));
    margin-inline: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.catalog main { flex: 1; padding-block: 1.5rem 3rem; }
.catalog h1 {
    margin: 0 0 1.5rem;
    text-align: center;
    font-size: clamp(2.4rem, 7vw, 4.75rem);
    line-height: 1.1;
}
.catalog h2 { margin: 0 0 .8rem; font-size: clamp(1.4rem, 4vw, 2rem); }
.catalog section + section { margin-top: 2.5rem; }
.brand-image {
    display: block;
    width: min(13rem, 60vw);
    max-height: 11rem;
    object-fit: contain;
    margin: 0 auto 1.5rem;
    border-radius: 1rem;
}
.catalog-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    width: min(68rem, calc(100% - 2rem));
    margin-inline: auto;
    padding-block: 1rem;
    border-bottom: 1px solid var(--border);
}
.catalog > .catalog-nav { width: 100%; }
.catalog-nav a {
    padding: .45rem .85rem;
    border-radius: .6rem;
    text-decoration: none;
}
.catalog-nav a:hover { background: var(--surface); }
.catalog-nav [aria-current="page"] { background: var(--accent); color: #000; }
.topic-nav { padding-block: .25rem; border-bottom: 0; }
@media print { .catalog-nav { display: none; } }
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: .85rem;
}
.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 3.5rem;
    padding: .85rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.tile:hover { background: #282828; border-color: var(--accent); }
.tile img, .tile .takt-kachelbild {
    display: block;
    width: 100%;
    height: 7rem;
    max-width: 17.5rem;
    object-fit: contain;
    border-radius: .5rem;
}
.subjects .tile { border-bottom: .3rem solid var(--subject); }
.subjects .tile img { height: clamp(7rem, 17vw, 12rem); }
.subject-music { --subject: #c5a6ff; }
.subject-math { --subject: #86dbff; }
.subject-german { --subject: #ffc674; }
.lernbolt-footer {
    width: min(68rem, calc(100% - 2rem));
    margin-inline: auto;
    font-family: Grundschrift, Arial, sans-serif;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem 1.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border);
    color: #ccc;
    font-size: .9rem;
}
.catalog > .lernbolt-footer { width: 100%; }
.lernbolt-footer > a { color: inherit; text-decoration: underline; }
@media (max-width: 38rem) {
    .subjects { grid-template-columns: 1fr; }
    .subjects .tile img { height: 6rem; }
}

/* Gemeinsame Gestaltung der Aufgaben, Anleitungen und Menüs */
.lesson-page {
    min-height: 100vh;
    font-family: Grundschrift, Arial, sans-serif;
}
@media screen {
    html body.lesson-page { background: #000; }
}
.lesson-page :is(button, input, select, textarea) {
    font-family: Grundschrift, Arial, sans-serif;
}
.lesson-page > header :is(a, button) {
    border-radius: .6rem;
}
.lesson-page > header a:hover {
    box-shadow: inset 0 0 0 1px var(--accent);
}
.lesson-page > header .logo {
    max-width: 4rem;
    max-height: 4rem;
    object-fit: contain;
}
.lesson-page .inhalt {
    display: inline-block;
    margin: .2rem;
    padding: .55rem .9rem;
    border: 1px solid var(--border);
    border-radius: .65rem;
    color: inherit;
    background: var(--surface);
    text-decoration: none;
}
.lesson-page .inhalt:hover { border-color: var(--accent); }

/* Gemeinsame Bausteine der Aufgaben */
.exercise-flex { display: flex; }
.exercise-center { text-align: center; }
.exercise-left-align { text-align: left; }
.exercise-right-align { text-align: right; }
.exercise-container, .exercise-panel { padding-inline: 1rem; }
.exercise-panel { margin-block: 1rem; }
.exercise-content { width: min(100%, 68rem); margin-inline: auto; }
.exercise-button {
    display: inline-block;
    padding: .5em .85em;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.exercise-button:hover { box-shadow: inset 0 0 0 2px currentColor; }
.exercise-button:disabled { opacity: .5; cursor: default; }
.exercise-block { display: block; width: 100%; }
.exercise-bar { display: flex; flex-wrap: wrap; align-items: center; }
.exercise-bar-item { padding: .5em .85em; }
.exercise-input { padding: .4em; width: 100%; }
.exercise-check, .exercise-radio { width: 1.4rem; height: 1.4rem; vertical-align: middle; }
.exercise-top, .exercise-bottom { position: fixed; inset-inline: 0; z-index: 2; }
.exercise-top { top: 0; }
.exercise-bottom { bottom: 0; }
.exercise-hide { display: none !important; }
.exercise-right { float: right; }
.exercise-margin { margin: 1rem; }
.exercise-margin-top { margin-top: 1rem; }
.exercise-margin-bottom { margin-bottom: 1rem; }
.exercise-section { margin-block: 1rem; }
.exercise-padding { padding: .5rem 1rem; }
.exercise-padding-small { padding: .25rem .5rem; }
.exercise-padding-large { padding: .75rem 1.5rem; }
.exercise-padding-16 { padding-block: 1rem; }
.exercise-padding-24 { padding-block: 1.5rem; }
.exercise-padding-32 { padding-block: 2rem; }
.exercise-round { border-radius: .5rem; }
.exercise-round-large { border-radius: .75rem; }
.exercise-round-xlarge { border-radius: 1rem; }
.exercise-card, .exercise-card-4 { box-shadow: 0 .25rem .8rem #0006; }
.exercise-border { border: 1px solid #888; }
.exercise-border-bottom, .exercise-bordered tr { border-bottom: 1px solid #888; }
.exercise-border-black { border-color: #000; }
.exercise-table { border-collapse: collapse; width: 100%; }
.exercise-table :is(td, th) { padding: .4rem .6rem; }
.exercise-centered :is(td, th) { text-align: center; }
.exercise-responsive { overflow-x: auto; }
.exercise-ul { list-style: none; padding: 0; }
.exercise-ul li { padding: .4rem .6rem; border-bottom: 1px solid #888; }
.exercise-row-padding { display: flex; flex-wrap: wrap; }
.exercise-row-padding > * { padding-inline: .5rem; }
.exercise-half { width: 50%; }
.exercise-image { height: auto; }
.exercise-tiny { font-size: .75rem; }
.exercise-small { font-size: .875rem; }
.exercise-large { font-size: 1.25rem; }
.exercise-xlarge { font-size: 1.5rem; }
.exercise-xxlarge { font-size: 2rem; }
.exercise-xxxlarge { font-size: 2.6rem; }
.exercise-jumbo { font-size: clamp(2.5rem, 8vw, 4rem); }
.exercise-wide { letter-spacing: .12em; }
.exercise-black, .exercise-theme, .exercise-theme-black, .exercise-theme-d5,
.exercise-hover-black:hover, .exercise-hover-theme:hover { background: #000; color: #fff; }
.exercise-theme-l1, .exercise-dark-grey { background: #262626; color: #fff; }
.exercise-theme-l2 { background: #3b3b3b; color: #fff; }
.exercise-white { background: #fff; color: #000; }
.exercise-red, .exercise-danger { background: #b52432; color: #fff; }
.exercise-green, .exercise-success, .exercise-hover-green:hover { background: #237b49; color: #fff; }
.exercise-blue { background: #1763a1; color: #fff; }
.exercise-purple { background: #63409a; color: #fff; }
.exercise-yellow { background: #ffdf73; color: #000; }
.exercise-orange { background: #ffac62; color: #000; }
.exercise-light-blue { background: #a8def5; color: #000; }
.exercise-light-green { background: #b1eb9f; color: #000; }
.exercise-text-red { color: #ff626c; }
.exercise-text-green { color: #5fdb8d; }
.exercise-text-blue { color: #80c8ff; }
.exercise-text-white { color: #fff; }
.exercise-hover-text-light-grey:hover { color: #ccc; }
@media (max-width: 600px) {
    .exercise-half { width: 100%; }
    .exercise-hide-small { display: none !important; }
}
@media (min-width: 601px) and (max-width: 992px) {
    .exercise-hide-medium { display: none !important; }
}
@media (min-width: 993px) {
    .exercise-hide-large { display: none !important; }
}
		.fortschrittssterne {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 0.6em;
			margin-top: 1em;
		}
		.fortschrittsstern {
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.2em;
			height: 1.3em;
			font-size: 2.4em;
			line-height: 1;
			color: #aaa;
		}
		.fortschrittsstern.geschafft {
			color: #ffd54a;
			text-shadow: 0 0 0.3em rgba(255, 213, 74, 0.65);
			animation: geschafft 1100ms ease-out;
		}
		.fortschrittsstern.geschafft::before,
		.fortschrittsstern.geschafft::after {
			content: "✦";
			position: absolute;
			font-size: 0.45em;
			color: #fff5bc;
			text-shadow: 0 0 0.4em #ffd54a, 0 0 0.8em #ffd54a;
			pointer-events: none;
			opacity: 0;
			animation: sternfunkeln 1000ms ease-out;
		}
		.fortschrittsstern.geschafft::before {
			top: 0;
			left: -0.15em;
		}
		.fortschrittsstern.geschafft::after {
			right: -0.15em;
			bottom: 0;
			animation-delay: 150ms;
		}
		@keyframes geschafft {
			0% { transform: scale(0.7); }
			30% {
				transform: scale(1.2);
				text-shadow: 0 0 0.2em #fff5bc, 0 0 0.6em #ffd54a, 0 0 1em #ffd54a;
			}
			65% {
				transform: scale(1);
				text-shadow: 0 0 0.3em #fff5bc, 0 0 0.8em #ffd54a;
			}
			100% { transform: scale(1); }
		}
		@keyframes sternfunkeln {
			0% { opacity: 0; transform: scale(0.3) rotate(-20deg); }
			25% { opacity: 1; transform: scale(1.2) rotate(0deg); }
			55% { opacity: 0.4; transform: scale(0.7) rotate(15deg); }
			75% { opacity: 1; transform: scale(1) rotate(30deg); }
			100% { opacity: 0; transform: scale(0.3) rotate(45deg); }
		}
		@media (prefers-reduced-motion: reduce) {
			.fortschrittsstern.geschafft,
			.fortschrittsstern.geschafft::before,
			.fortschrittsstern.geschafft::after { animation: none; }
		}

		main { position: relative; overflow: hidden; }
		main > section { position: relative; z-index: 1; }
		.fertig .fortschrittsstern {
			animation: bunt-blinken 900ms steps(1) infinite;
			animation-delay: calc(var(--stern-index) * -90ms);
		}
		@keyframes bunt-blinken {
			0%, 100% { color: #ff6688; text-shadow: 0 0 0.5em currentColor; }
			25% { color: #ffd54a; }
			50% { color: #66ddff; }
			75% { color: #99ff88; }
		}
		.feuerwerk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
		@media (prefers-reduced-motion: reduce) {
			.fertig .fortschrittsstern { animation: none; color: #ffd54a; }
			.feuerwerk { display: none; }
		}

.lernbolt-belohnung { position: relative; isolation: isolate; }
.lernbolt-belohnung > .feuerwerk { z-index: -1; }
.lernbolt-belohnung > .belohnungssterne,
.lernbolt-belohnung > .belohnungsaktionen { display: flex; justify-content: center; flex-wrap: wrap; }
.belohnungstext { margin: 0 auto 2em; text-align: center; width: fit-content; }
.belohnungstext h2 { margin: 0.3em 0; }
.belohnungstext p { margin: 0 auto; padding: 0 1em; }
.belohnungsaktionen { gap: 1em; }
.aufgaben-symbol {
    display: inline-block;
    width: 56px;
    height: 56px;
    vertical-align: middle;
}
.belohnungsaktionen a {
    background: lightgrey;
    color: black;
    padding: 1em;
    border-radius: 0.8em;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
}
@media print {
    .lernbolt-belohnung > .feuerwerk, .lernbolt-belohnung > .belohnungssterne { display: none; }
}

main { min-height: 95vh; }
.mathe-fortschritt { text-align: center; margin: 1em 0 1.5em; }
.mathe-counter-versteckt { display: none; }

/* Buchstaben erscheinen aus der Richtung, aus der sie gelesen werden. */
@media (prefers-reduced-motion: no-preference) {
    .exercise-animate-left { --from-x: -1rem; }
    .exercise-animate-right { --from-x: 1rem; }
    .exercise-animate-top { --from-y: -1rem; }
    .exercise-animate-bottom { --from-y: 1rem; }
    :is(.exercise-animate-left, .exercise-animate-right, .exercise-animate-top, .exercise-animate-bottom) {
        display: inline-block;
        animation: letter-in .3s ease-out;
    }
}
@keyframes letter-in {
    from { opacity: 0; transform: translate(var(--from-x, 0), var(--from-y, 0)); }
}

.addition-form { width: min(100%, 30rem); margin-inline: auto; padding: 1.25rem; }
.addition-form label { display: grid; grid-template-columns: 1fr 5rem; align-items: center; gap: .75rem; margin-block: .65rem; }
.addition-form input { width: 100%; padding: .25rem; }
.addition-form input[aria-invalid="true"] { border: 3px solid #ff626c; }
.addition-form button { margin: .4rem .4rem .4rem 0; }

/* Aufgabenlayouts. Wiederverwendete Regeln stehen einmal für alle zugehörigen Seiten. */
:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) *, :where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) {
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 90vw;
			text-align: center;
			padding: 1em 2em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .rechenzeile {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			justify-content: center;
			gap: 0.4em;
			font-size: 1.6em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .zahl {
			min-width: 1.7em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 3.2em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) details {
			background-color: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.2);
			border-radius: 0.8em;
			padding: 1em;
			max-width: 95vw;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) summary {
			cursor: pointer;
			font-size: 1.2em;
			font-weight: bold;
			text-align: center;
			margin-bottom: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-bottom: 0.8em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .werkzeug-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .werkzeug, :where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .auswahl {
			font-size: 1.1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			min-width: 3.6em;
			min-height: 2.7em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .werkzeug {
			font-size: 1.4em;
			width: 2.7em;
			height: 2.7em;
			min-width: 0;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .werkzeug.aktiv, :where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .auswahl.aktiv {
			background-color: yellow;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .zahlenfeld-wrapper {
			overflow: auto;
			max-width: 95vw;
			max-height: 70vh;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .zahlenfeld {
			display: grid;
			grid-template-columns: repeat(10, 3.2em);
			gap: 0.7em;
			row-gap: 1.4em;
			min-width: max-content;
			position: relative;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .zahlenfeld::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: calc((3.2em * 5) + (0.7em * 4) + 1em + 0.35em);
			width: 0.18em;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .zahlenfeld::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: calc((3.2em * 5) + (1.4em * 4) + 1em + 0.7em);
			height: 0.18em;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .abakus {
			font-size: 1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 3.2em;
			height: 3.2em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			position: relative;
			z-index: 2;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenbis100"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}


:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 90vw;
			box-sizing: border-box;
			text-align: center;
			padding: 1em 2em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .rechenzeile {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			justify-content: center;
			gap: 0.4em;
			font-size: 1.4em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .zahl {
			min-width: 1.4em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 2.6em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) details {
			background-color: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.2);
			border-radius: 0.8em;
			padding: 1em;
			max-width: 95vw;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) summary {
			cursor: pointer;
			font-size: 1.2em;
			font-weight: bold;
			text-align: center;
			margin-bottom: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .werkzeug-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .werkzeug {
			font-size: 1.4em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 2.7em;
			height: 2.7em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .werkzeug.aktiv {
			background-color: yellow;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .zahlenfeld-wrapper {
			overflow-x: auto;
			max-width: 95vw;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .zahlenfeld {
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			gap: 0.7em;
			row-gap: 1.4em;
			min-width: max-content;
			position: relative;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .zahlenfeld::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: calc((3.2em * 5) + (0.7em * 4) + 1em + 0.35em);
			width: 0.18em;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .zahlenfeld::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: calc(3.2em + (1.4em / 2) + 1em);
			height: 0.18em;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .abakus {
			font-size: 1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 3.2em;
			height: 3.2em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			z-index: 2;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20_2"], html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ZUE_addierenbis20_viele_aufgaben"], html[data-lesson="html--ma_zr20_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenvon20"], html[data-lesson="html--ma_zr20_subtrahierenbis20"], html[data-lesson="html--ma_zr20_ZUE_ergaenzenbis20"], html[data-lesson="html--ma_zr20_ergaenzenvon20"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			box-sizing: border-box;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}


:where(html[data-lesson="html--de_00_buchstaben_lesen"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) section {
			width: 100%;
			margin-bottom: 2.5em;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) .textblock {
			text-align: center;
			padding: 0 1em;
			margin-bottom: 1.5em;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) .nav-grid {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) .panel {
			width: min(90%, 70em);
			margin: 0 auto;
			padding: 1.5em;
			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;
			background: rgba(255, 255, 255, 0.05);
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) .panel h4 {
			text-align: center;
			margin-top: 0;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) .controls-grid {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) .control-card {
			width: 20em;
			min-height: 10em;
			padding: 1em;
			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;
			background: rgba(255, 255, 255, 0.05);
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) .checkbox-grid {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 0.8em 1em;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) .check-item {
			display: inline-flex;
			align-items: center;
			gap: 0.4em;
			font-size: 1.1em;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) input[type="checkbox"] {
			width: 1.4em;
			height: 1.4em;
			accent-color: #66bb6a;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) .output-card {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: min(90%, 40em);
			margin: 0 auto;
			padding: 1.5em;
			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;
			background: rgba(255, 255, 255, 0.05);
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) #ausgabe_silbe {
			font-family: 'Grundschrift', Arial, sans-serif;
			font-size: 10vmin;
			font-weight: bold;
			letter-spacing: 0.06em;
			text-align: center;
			line-height: 1.2;
			color: white;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) #hinweis {
			padding-top: 1em;
			min-height: 2em;
			color: #ff8d8d;
			font-size: 1.05em;
			text-align: center;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) .nav-button, :where(html[data-lesson="html--de_00_buchstaben_lesen"]) .action-button {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			width: 9em;
			min-height: 8em;
			padding: 1em;

			text-decoration: none;
			color: white;

			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;

			background: rgba(255, 255, 255, 0.05);

			box-sizing: border-box;

			transition:
				transform 0.2s ease,
				background 0.2s ease,
				border-color 0.2s ease;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) .action-button {
			font-family: 'Grundschrift', Arial, sans-serif;
			font-size: 1em;
			cursor: pointer;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) .nav-button:hover, :where(html[data-lesson="html--de_00_buchstaben_lesen"]) .action-button:hover {
			transform: scale(1.04);
			background: rgba(255, 255, 255, 0.12);
			border-color: rgba(255, 255, 255, 0.7);
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) .icon {
			font-size: 3em;
			margin-bottom: 0.3em;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) .label {
			font-size: 1em;
			text-align: center;
			line-height: 1.3;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) .settings-row {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			align-items: center;
			gap: 1.5em;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) .settings-row label {
			display: inline-flex;
			align-items: center;
			gap: 0.5em;
			font-size: 1.1em;
		}

		:where(html[data-lesson="html--de_00_buchstaben_lesen"]) select {
			padding: 0.5em;
			border-radius: 0.6em;
			border: 0.12em solid rgba(255, 255, 255, 0.35);
			background-color: black;
			color: white;
			font-size: 1em;
		}



		@media (max-width: 700px) {
:where(html[data-lesson="html--de_00_buchstaben_lesen"]) .control-card {
				width: 90%;
			}

			:where(html[data-lesson="html--de_00_buchstaben_lesen"]) #ausgabe_silbe {
				font-size: 14vmin;
			}

			:where(html[data-lesson="html--de_00_buchstaben_lesen"]) .action-button {
				width: 90%;
			}
}

:where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) section {
			width: 100%;
			margin-bottom: 2.5em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) .textblock {
			text-align: center;
			padding: 0 1em;
			margin-bottom: 1.5em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) .aufgaben-grid, :where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) .nav-grid {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) .aufgabe, :where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) .nav-button {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			width: 11em;
			min-height: 8em;
			padding: 1em;

			text-decoration: none;
			color: white;

			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;

			background: rgba(255, 255, 255, 0.05);

			box-sizing: border-box;

			transition:
				transform 0.2s ease,
				background 0.2s ease,
				border-color 0.2s ease;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) .aufgabe:hover, :where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) .nav-button:hover {
			transform: scale(1.04);
			background: rgba(255, 255, 255, 0.12);
			border-color: rgba(255, 255, 255, 0.7);
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) table {
			border-collapse: separate;
			border-spacing: 0.35em;
			width: fit-content;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) td {
			font-size: 1.4em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) input {
			width: 2.4em;
			font-size: 1em;
			text-align: center;
			color: white;
			background: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.5);
			border-radius: 0.4em;
			padding: 0.15em;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) .icon {
			font-size: 3em;
			margin-bottom: 0.3em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe_mal_geteilt"], html[data-lesson="html--ma_1x1_5_reihe"], html[data-lesson="html--ma_1x1_2_reihe"]) .label {
			font-size: 1em;
			text-align: center;
			line-height: 1.3;
		}



:where(html[data-lesson="html--ma_1x1_test"]) body { font-family: 'Grundschrift', Arial, sans-serif; min-height: 100vh; }
        :where(html[data-lesson="html--ma_1x1_test"]) h1, :where(html[data-lesson="html--ma_1x1_test"]) h2, :where(html[data-lesson="html--ma_1x1_test"]) button, :where(html[data-lesson="html--ma_1x1_test"]) input { font-family: inherit; }
        :where(html[data-lesson="html--ma_1x1_test"]) [hidden] { display: none !important; }
        :where(html[data-lesson="html--ma_1x1_test"]) header, :where(html[data-lesson="html--ma_1x1_test"]) .optionen, :where(html[data-lesson="html--ma_1x1_test"]) .aufgaben-grid { display: flex; flex-flow: row wrap; justify-content: center; gap: 1.2em; }
        :where(html[data-lesson="html--ma_1x1_test"]) header a { text-decoration: none; display: flex; flex-direction: column; align-items: center; }
        :where(html[data-lesson="html--ma_1x1_test"]) header span:first-child { font-size: 3em; }
        :where(html[data-lesson="html--ma_1x1_test"]) main { min-height: 75vh; }
        :where(html[data-lesson="html--ma_1x1_test"]) .textblock, :where(html[data-lesson="html--ma_1x1_test"]) .button-row { text-align: center; margin: 1.5em 0; }
        :where(html[data-lesson="html--ma_1x1_test"]) .auswahl { max-width: 44em; margin: auto; text-align: center; }
        :where(html[data-lesson="html--ma_1x1_test"]) fieldset { border: 0; margin: 0 0 1.5em; padding: 0; }
        :where(html[data-lesson="html--ma_1x1_test"]) legend { width: 100%; margin-bottom: 1em; font-size: 1.3em; }
        :where(html[data-lesson="html--ma_1x1_test"]) .option { cursor: pointer; }
        :where(html[data-lesson="html--ma_1x1_test"]) .option:has(input:checked) { background: #244c76 !important; }
        :where(html[data-lesson="html--ma_1x1_test"]) .option input { margin-right: 0.4em; accent-color: #79baff; }
        :where(html[data-lesson="html--ma_1x1_test"]) .name-input { max-width: 100%; width: 18em; margin: auto; }
        :where(html[data-lesson="html--ma_1x1_test"]) .aufgabe { padding: 1em; margin: 0; }
        :where(html[data-lesson="html--ma_1x1_test"]) .aufgabe table { border-spacing: 0.25em; border-collapse: separate; }
        :where(html[data-lesson="html--ma_1x1_test"]) .aufgabe td { font-size: 1.4em; text-align: center; }
        :where(html[data-lesson="html--ma_1x1_test"]) .aufgabe input { width: 2.6em; text-align: center; padding: 0.15em; }
        :where(html[data-lesson="html--ma_1x1_test"]) .urkunde { max-width: 38em; margin: 0 auto 2em; border: 0.3em double #eac86b; text-align: center; background: #17150f; }
        :where(html[data-lesson="html--ma_1x1_test"]) .urkunde h1 { color: #eac86b; font-size: 2.5em; }
        :where(html[data-lesson="html--ma_1x1_test"]) .richtig { color: #86e69a; }
        :where(html[data-lesson="html--ma_1x1_test"]) .falsch { color: #ff9292; }
        :where(html[data-lesson="html--ma_1x1_test"]) .zusammenfassung { max-width: 42em; margin: auto; }
        :where(html[data-lesson="html--ma_1x1_test"]) .ergebnis-zeile { overflow-wrap: anywhere; }
        :where(html[data-lesson="html--ma_1x1_test"]) .status { font-weight: bold; margin-right: 0.5em; }

:where(html[data-lesson="html--ma_gewichte_umrechnungstabelle"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_gewichte_umrechnungstabelle"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_gewichte_umrechnungstabelle"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_gewichte_umrechnungstabelle"]) header a span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_gewichte_umrechnungstabelle"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_gewichte_umrechnungstabelle"]) .card {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			padding: 1em;
			max-width: 95vw;
		}

		:where(html[data-lesson="html--ma_gewichte_umrechnungstabelle"]) table {
			border-collapse: collapse;
			margin: 0 auto;
		}

		:where(html[data-lesson="html--ma_gewichte_umrechnungstabelle"]) td, :where(html[data-lesson="html--ma_gewichte_umrechnungstabelle"]) th {
			border: 0.06em solid black;
			text-align: center;
			width: 2.4em;
			height: 2.4em;
		}

		:where(html[data-lesson="html--ma_gewichte_umrechnungstabelle"]) .trennung {
			border-right: 0.18em solid red !important;
		}

		:where(html[data-lesson="html--ma_gewichte_umrechnungstabelle"]) input {
			font-size: 1.4em;
			width: 100%;
			height: 100%;
			text-align: center;
			border: 0.08em solid black;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_gewichte_umrechnungstabelle"]) input:focus {
			outline: none;
			border: 0.12em solid #4CAF50;
		}

		:where(html[data-lesson="html--ma_gewichte_umrechnungstabelle"]) button {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			border: 0;
			font-size: 1.2em;
			font-weight: bold;
			cursor: pointer;
		}


:where(html[data-lesson="html--de_00_silben_lesen"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) section {
			width: 100%;
			margin-bottom: 2.5em;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) .textblock {
			text-align: center;
			padding: 0 1em;
			margin-bottom: 1.5em;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) .panel {
			width: min(90%, 70em);
			margin: 0 auto 1.5em auto;
			padding: 1.5em;
			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;
			background: rgba(255, 255, 255, 0.05);
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) .panel h3 {
			text-align: center;
			margin-top: 0;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) .fieldset-grid {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.2em;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) fieldset {
			width: 20em;
			padding: 1em;
			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;
			background: rgba(255, 255, 255, 0.05);
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) legend {
			font-weight: bold;
			padding: 0 0.5em;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) fieldset label {
			display: inline-block;
			margin: 0.4em 0.2em 0.4em 0.5em;
			font-size: 1.1em;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) input[type="checkbox"] {
			width: 1.4em;
			height: 1.4em;
			accent-color: #66bb6a;
			vertical-align: middle;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) .nav-grid, :where(html[data-lesson="html--de_00_silben_lesen"]) .button-row {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) .nav-button, :where(html[data-lesson="html--de_00_silben_lesen"]) .silbenwahl, :where(html[data-lesson="html--de_00_silben_lesen"]) #neu, :where(html[data-lesson="html--de_00_silben_lesen"]) #vorlesen {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			width: 9em;
			min-height: 8em;
			padding: 1em;

			text-decoration: none;
			color: white;
			font-family: 'Grundschrift', Arial, sans-serif;
			font-size: 1em;
			font-weight: normal;

			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;

			background: rgba(255, 255, 255, 0.05);

			box-sizing: border-box;
			cursor: pointer;

			transition:
				transform 0.2s ease,
				background 0.2s ease,
				border-color 0.2s ease;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) .nav-button:hover, :where(html[data-lesson="html--de_00_silben_lesen"]) .silbenwahl:hover, :where(html[data-lesson="html--de_00_silben_lesen"]) #neu:hover, :where(html[data-lesson="html--de_00_silben_lesen"]) #vorlesen:hover {
			transform: scale(1.04);
			background: rgba(255, 255, 255, 0.12);
			border-color: rgba(255, 255, 255, 0.7);
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) .silben-button-aktiv {
			background: rgba(255, 255, 255, 0.18);
			border-color: white;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) .icon {
			font-size: 3em;
			margin-bottom: 0.3em;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) .label {
			font-size: 1em;
			text-align: center;
			line-height: 1.3;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) .ausgabe-wrap {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) #ausgabe_silbe {
			font-family: 'Grundschrift', Arial, sans-serif;
			min-width: 260px;
			max-width: 90%;
			padding: 0.3em 0.6em;
			font-size: 12vmin;
			font-weight: bold;
			text-align: center;
			line-height: 1.2;
			background-color: white;
			color: black;
			border-radius: 0.2em;
			box-sizing: border-box;
			word-break: break-word;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) .silbe-blau {
			color: #1565c0;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) .silbe-rot {
			color: #d32f2f;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) #hinweis {
			padding-top: 1em;
			min-height: 2em;
			color: #ff8d8d;
			font-size: 1.05em;
			text-align: center;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) .auto-row {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			align-items: center;
			gap: 1.5em;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) .auto-row label {
			display: inline-flex;
			align-items: center;
			gap: 0.5em;
			font-size: 1.1em;
		}

		:where(html[data-lesson="html--de_00_silben_lesen"]) select {
			padding: 0.5em;
			border-radius: 0.6em;
			border: 0.12em solid rgba(255, 255, 255, 0.35);
			background-color: black;
			color: white;
			font-size: 1em;
		}



		@media (max-width: 700px) {
:where(html[data-lesson="html--de_00_silben_lesen"]) fieldset {
				width: 90%;
			}

			:where(html[data-lesson="html--de_00_silben_lesen"]) #ausgabe_silbe {
				font-size: 16vmin;
			}

			:where(html[data-lesson="html--de_00_silben_lesen"]) .silbenwahl, :where(html[data-lesson="html--de_00_silben_lesen"]) #neu, :where(html[data-lesson="html--de_00_silben_lesen"]) #vorlesen {
				width: 90%;
			}
}

:where(html[data-lesson="html--ma_heft_4_26"], html[data-lesson="html--ma_heft_4_06"], html[data-lesson="html--ma_heft_4_10"], html[data-lesson="html--ma_heft_4_11"], html[data-lesson="html--ma_heft_4_07"], html[data-lesson="html--ma_heft_4_27"], html[data-lesson="html--ma_heft_4_16"], html[data-lesson="html--ma_heft_4_20"], html[data-lesson="html--ma_heft_4_21"], html[data-lesson="html--ma_heft_4_17"], html[data-lesson="html--ma_heft_4_01"], html[data-lesson="html--ma_heft_4_14"], html[data-lesson="html--ma_heft_4_02"], html[data-lesson="html--ma_heft_4_22"], html[data-lesson="html--ma_heft_4_18"], html[data-lesson="html--ma_heft_4_19"], html[data-lesson="html--ma_heft_4_23"], html[data-lesson="html--ma_heft_4_03"], html[data-lesson="html--ma_heft_4_15"], html[data-lesson="html--ma_heft_4_24"], html[data-lesson="html--ma_heft_4_08"], html[data-lesson="html--ma_heft_4_12"], html[data-lesson="html--ma_heft_4_04"], html[data-lesson="html--ma_heft_4_05"], html[data-lesson="html--ma_heft_4_13"], html[data-lesson="html--ma_heft_4_09"], html[data-lesson="html--ma_heft_4_25"]) #fertig > canvas {
			position: absolute;
			inset: 0;
		}

:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 90vw;
			box-sizing: border-box;
			text-align: center;
			padding: 1em 2em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .rechenzeile {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			justify-content: center;
			gap: 0.4em;
			font-size: 1.4em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .zahl {
			min-width: 1.4em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 3.2em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) details {
			background-color: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.2);
			border-radius: 0.8em;
			padding: 1em;
			max-width: 95vw;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) summary {
			cursor: pointer;
			font-size: 1.2em;
			font-weight: bold;
			text-align: center;
			margin-bottom: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .werkzeug-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .werkzeug {
			font-size: 1.4em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 2.7em;
			height: 2.7em;
			background-color: white;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .werkzeug.aktiv, :where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .auswahl.aktiv {
			background-color: yellow;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .auswahl {
			font-size: 1em;
			font-weight: bold;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.7em;
			background-color: white;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .zahlenfeld-wrapper {
			overflow: auto;
			max-width: 95vw;
			max-height: 65vh;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .zahlenfeld {
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			gap: 0.35em;
			min-width: max-content;
			background-color: rgba(255, 255, 255, 0.7);
			padding: 0.2em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .abakus {
			font-size: 1em;
			border: 0.08em solid black;
			width: 3.2em;
			height: 3.2em;
			background-color: white;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .abakus:nth-child(5n) {
			border-right-width: 0.25em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .abakus:nth-child(n+41):nth-child(-n+50), :where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .abakus:nth-child(n+91):nth-child(-n+100) {
			border-bottom-width: 0.25em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_ergaenzenvon100"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}


:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_5min"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min"], html[data-lesson="html--ma_uhrzeit_stunde"], html[data-lesson="html--ma_uhrzeit_stunde_minute"]) #hours { stroke: red; }
        :where(html[data-lesson="html--ma_uhrzeit_stunde_minute_5min"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min"], html[data-lesson="html--ma_uhrzeit_stunde"], html[data-lesson="html--ma_uhrzeit_stunde_minute"]) #minutes { stroke: blue; }

:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) *, :where(html[data-lesson="html--ma_zr100_helfer_addieren"]) {
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) main {
			min-height: 95vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .info-bereich {
			margin-bottom: 1.5em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .fortschrittssterne {
			display: flex;
			justify-content: center;
			gap: 0.6em;
			margin-top: 1em;
		}
		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .fortschrittsstern {
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.2em;
			height: 1.3em;
			font-size: 2.4em;
			line-height: 1;
			color: #aaa;
		}
		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .fortschrittsstern.geschafft {
			color: #ffd54a;
			text-shadow: 0 0 0.3em rgba(255, 213, 74, 0.65);
			animation: geschafft 1100ms ease-out;
		}
		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .fortschrittsstern.geschafft::before, :where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .fortschrittsstern.geschafft::after {
			content: "✦";
			position: absolute;
			font-size: 0.45em;
			color: #fff5bc;
			text-shadow: 0 0 0.4em #ffd54a, 0 0 0.8em #ffd54a;
			pointer-events: none;
			opacity: 0;
			animation: sternfunkeln 1000ms ease-out;
		}
		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .fortschrittsstern.geschafft::before {
			top: 0;
			left: -0.15em;
		}
		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .fortschrittsstern.geschafft::after {
			right: -0.15em;
			bottom: 0;
			animation-delay: 150ms;
		}
		@media (prefers-reduced-motion: reduce) {
:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .fortschrittsstern.geschafft, :where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .fortschrittsstern.geschafft::before, :where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .fortschrittsstern.geschafft::after { animation: none; }
}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .aufgabenbereich {
			display: flex;
			gap: 1.5em;
			align-items: flex-start;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 95vw;
			text-align: center;
			padding: 1em 1.5em;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .rechenzeile {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			justify-content: center;
			gap: 0.4em;
			font-size: 1.6em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .zahl {
			min-width: 1.7em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 3.2em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .hilfe-bereich {
			background-color: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.2);
			border-radius: 0.8em;
			padding: 1em;
			max-width: 95vw;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .hilfe-bereich p {
			text-align: center;
			font-weight: bold;
			margin-top: 0;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-bottom: 0.8em;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .werkzeug-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .werkzeug, :where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .auswahl {
			font-size: 1.1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			min-width: 3.6em;
			min-height: 2.7em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .werkzeug {
			font-size: 1.4em;
			width: 2.7em;
			height: 2.7em;
			min-width: 0;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .werkzeug.text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .werkzeug.text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .werkzeug.aktiv, :where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .auswahl.aktiv {
			background-color: yellow;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .feld-auswahl {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 0.6em;
			margin-bottom: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .feld-auswahl .auswahl {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.5em;
			padding: 0.7em;
			cursor: pointer;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .feld-symbol {
			display: flex;
			gap: 0.12em;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .feld-symbol i {
			width: 0.65em;
			height: 0.65em;
			border: 0.1em solid currentColor;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .feld-symbol i:nth-child(6) {
			margin-left: 0.25em;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .zahlenfeld-wrapper {
			overflow: auto;
			max-width: 95vw;
			max-height: 70vh;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .zahlenfeld {
			display: grid;
			grid-template-columns: repeat(5, 2.4em) 0.6em repeat(5, 2.4em);
			grid-template-rows: repeat(5, 2.4em) 0.6em repeat(5, 2.4em);
			gap: 0.35em;
			width: max-content;
			padding: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .abakus {
			font-size: 1em;
			border: 0;
			border-radius: 50%;
			width: 2.4em;
			height: 2.4em;
			padding: 0;
			background-color: transparent;
			color: white;
			font-weight: bold;
			cursor: pointer;
			perspective: 12em;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .plaettchen {
			display: block;
			position: relative;
			width: 100%;
			height: 100%;
			transform-style: preserve-3d;
			pointer-events: none;
		}
		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .plaettchen-seite {
			position: absolute;
			inset: 0;
			border: 0.1em solid #aaaaaa;
			border-radius: 50%;
			background-color: #141414;
			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
		}
		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .plaettchen-rueckseite { transform: rotateY(180deg); }
		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .plaettchen-seite[data-farbe="rot"] { background-color: #d60000; border-color: #ff7777; }
		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .plaettchen-seite[data-farbe="blau"] { background-color: #154dcc; border-color: #88b2ff; }
		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .abakus:focus-visible { outline: 3px solid yellow; outline-offset: 2px; }
		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .feld-symbol i { border-radius: 50%; }
		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .feld-hinweis { max-width: 30em; font-weight: normal; }

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}
		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) main { position: relative; overflow: hidden; }
		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) main > section, :where(html[data-lesson="html--ma_zr100_helfer_addieren"]) main > nav { position: relative; z-index: 1; }
		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .fertig .fortschrittsstern {
			animation: bunt-blinken 900ms steps(1) infinite;
			animation-delay: calc(var(--stern-index) * -90ms);
		}
		:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .feuerwerk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
		@media (prefers-reduced-motion: reduce) {
:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .fertig .fortschrittsstern { animation: none; color: #ffd54a; }
			:where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .feuerwerk { display: none; }
}

        :where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .hilfe-bereich { width: fit-content; max-width: 100%; }
        :where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .zahlenfeld-wrapper { max-width: 100%; }
        :where(html[data-lesson="html--ma_zr100_helfer_addieren"]) button { cursor: pointer; font-family: inherit; }
        :where(html[data-lesson="html--ma_zr100_helfer_addieren"]) button:focus-visible { outline: 3px solid yellow; outline-offset: 2px; }
        :where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .aktionen { display: flex; justify-content: center; margin-top: 1em; }
        :where(html[data-lesson="html--ma_zr100_helfer_addieren"]) #loeschen { background: lightgrey; color: black; border: 0; border-radius: 0.8em; padding: 1em; font-size: 1.2em; font-weight: bold; }
        :where(html[data-lesson="html--ma_zr100_helfer_addieren"]) .plaettchen-seite[data-farbe="durchgestrichen"]::after { content: "✗"; color: #88b2ff; font-size: 1.5em; font-weight: bold; line-height: 1.45; }

:where(html[data-lesson="html--ma_zr20_zahlenmauer"], html[data-lesson="html--ma_zr20_ZUE_zahlenmauer"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenmauer"], html[data-lesson="html--ma_zr20_ZUE_zahlenmauer"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenmauer"], html[data-lesson="html--ma_zr20_ZUE_zahlenmauer"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenmauer"], html[data-lesson="html--ma_zr20_ZUE_zahlenmauer"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenmauer"], html[data-lesson="html--ma_zr20_ZUE_zahlenmauer"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenmauer"], html[data-lesson="html--ma_zr20_ZUE_zahlenmauer"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenmauer"], html[data-lesson="html--ma_zr20_ZUE_zahlenmauer"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenmauer"], html[data-lesson="html--ma_zr20_ZUE_zahlenmauer"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenmauer"], html[data-lesson="html--ma_zr20_ZUE_zahlenmauer"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenmauer"], html[data-lesson="html--ma_zr20_ZUE_zahlenmauer"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenmauer"], html[data-lesson="html--ma_zr20_ZUE_zahlenmauer"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 2em;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenmauer"], html[data-lesson="html--ma_zr20_ZUE_zahlenmauer"]) .zahlenmauer {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenmauer"], html[data-lesson="html--ma_zr20_ZUE_zahlenmauer"]) .zahlenreihe {
			display: flex;
			justify-content: center;
			gap: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenmauer"], html[data-lesson="html--ma_zr20_ZUE_zahlenmauer"]) .zahlenfeld {
			width: 3em;
			height: 2.3em;
			background-color: white;
			color: black;
			border-radius: 0.5em;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 1.3em;
			font-weight: bold;
			box-sizing: border-box;
			border: 0.08em solid black;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenmauer"], html[data-lesson="html--ma_zr20_ZUE_zahlenmauer"]) input {
			font-size: 1.3em;
			font-weight: bold;
			width: 2.4em;
			height: 1.9em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			background-color: yellow;
			color: black;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenmauer"], html[data-lesson="html--ma_zr20_ZUE_zahlenmauer"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenmauer"], html[data-lesson="html--ma_zr20_ZUE_zahlenmauer"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			box-sizing: border-box;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}



:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 90vw;
			box-sizing: border-box;
			text-align: center;
			padding: 1em 2em;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .rechenzeile {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			justify-content: center;
			gap: 0.4em;
			font-size: 1.4em;
			font-weight: bold;
			margin: 0.4em 0;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .zahl {
			min-width: 1.4em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 2.6em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) details {
			background-color: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.2);
			border-radius: 0.8em;
			padding: 1em;
			max-width: 95vw;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) summary {
			cursor: pointer;
			font-size: 1.2em;
			font-weight: bold;
			text-align: center;
			margin-bottom: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .werkzeug-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .werkzeug {
			font-size: 1.4em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 2.7em;
			height: 2.7em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .werkzeug.aktiv {
			background-color: yellow;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .zahlenfeld-wrapper {
			overflow-x: auto;
			max-width: 95vw;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .zahlenfeld {
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			gap: 0.7em;
			row-gap: 1.4em;
			min-width: max-content;
			position: relative;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .zahlenfeld::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: calc((3.2em * 5) + (0.7em * 4) + 1em + 0.35em);
			width: 0.18em;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .zahlenfeld::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: calc(3.2em + (1.4em / 2) + 1em);
			height: 0.18em;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .abakus {
			font-size: 1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 3.2em;
			height: 3.2em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			z-index: 2;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .beispielkarte {
			background-color: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.2);
			border-radius: 0.8em;
			padding: 1em 2em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .beispielkarte h3 {
			margin-top: 0;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .beispielzeile {
			display: flex;
			justify-content: center;
			gap: 0.4em;
			font-size: 1.3em;
			font-weight: bold;
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr20_tauschaufgaben"], html[data-lesson="html--ma_zr20_ZUE_tauschaufgaben"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			box-sizing: border-box;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}


:where(html[data-lesson="html--ma_1x1_10_reihe"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe"]) section {
			width: 100%;
			margin-bottom: 2.5em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe"]) .textblock {
			text-align: center;
			padding: 0 1em;
			margin-bottom: 1.5em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe"]) .aufgaben-grid, :where(html[data-lesson="html--ma_1x1_10_reihe"]) .nav-grid {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe"]) .aufgabe, :where(html[data-lesson="html--ma_1x1_10_reihe"]) .nav-button {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			width: 11em;
			min-height: 8em;
			padding: 1em;

			text-decoration: none;
			color: white;

			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;

			background: rgba(255, 255, 255, 0.05);

			box-sizing: border-box;

			transition:
				transform 0.2s ease,
				background 0.2s ease,
				border-color 0.2s ease;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe"]) .aufgabe:hover, :where(html[data-lesson="html--ma_1x1_10_reihe"]) .nav-button:hover {
			transform: scale(1.04);
			background: rgba(255, 255, 255, 0.12);
			border-color: rgba(255, 255, 255, 0.7);
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe"]) table {
			border-collapse: separate;
			border-spacing: 0.35em;
			width: fit-content;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe"]) td {
			font-size: 1.4em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe"]) input {
			width: 2.8em;
			font-size: 1em;
			text-align: center;
			color: white;
			background: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.5);
			border-radius: 0.4em;
			padding: 0.15em;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe"]) .icon {
			font-size: 3em;
			margin-bottom: 0.3em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe"]) .label {
			font-size: 1em;
			text-align: center;
			line-height: 1.3;
		}



:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) .rechenkarten {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.5em;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 95vw;
			box-sizing: border-box;
			text-align: center;
			padding: 1.2em 2em;
			overflow-x: auto;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) table {
			border-collapse: collapse;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) td {
			padding: 0.3em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) .zahl {
			font-size: 1.6em;
			font-weight: bold;
			min-width: 1.4em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) input {
			font-size: 1.1em;
			font-weight: bold;
			width: 2.8em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) caption {
			color: black;
			font-size: 1.1em;
			font-weight: bold;
			margin-bottom: 0.8em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_aufgabenmuster"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			box-sizing: border-box;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}



:where(html[data-lesson="html--ma_zr20_ZUE_zahl_suchen"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_zahl_suchen"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_zahl_suchen"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_zahl_suchen"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_zahl_suchen"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_zahl_suchen"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_zahl_suchen"]) .zahlenfeld-wrapper {
			overflow-x: auto;
			max-width: 95vw;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_zahl_suchen"]) .zahlenfeld {
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			gap: 0.7em;
			row-gap: 1.4em;
			min-width: max-content;
			position: relative;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_zahl_suchen"]) .zahlenbutton {
			font-size: 1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 3.2em;
			height: 3.2em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			z-index: 2;
			cursor: pointer;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_zahl_suchen"]) .zahlenfeld::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: calc((3.2em * 5) + (0.7em * 4) + 1em + 0.35em);
			width: 0.18em;
			background-color: rgba(255,255,255,0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_zahl_suchen"]) .zahlenfeld::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: calc(3.2em + (1.4em / 2) + 1em);
			height: 0.18em;
			background-color: rgba(255,255,255,0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_zahl_suchen"]) .zufallszahl-box {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 90vw;
			box-sizing: border-box;
			text-align: center;
			padding: 1em 2em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_zahl_suchen"]) .zufallszahl {
			font-size: 2em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_zahl_suchen"]) .ergebnis-links {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_zahl_suchen"]) .ergebnis-links a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			box-sizing: border-box;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}

:where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
		}

		:where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) section {
			width: 100%;
			margin-bottom: 2.5em;
		}

		:where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) .textblock {
			text-align: center;
			padding: 0 1em;
			margin-bottom: 1.5em;
		}

		:where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) .aufgaben-grid, :where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) .nav-grid {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) .aufgabe, :where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) .nav-button {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			width: 14em;
			min-height: 8em;
			padding: 1em;

			text-decoration: none;
			color: white;

			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;

			background: rgba(255, 255, 255, 0.05);

			box-sizing: border-box;

			transition:
				transform 0.2s ease,
				background 0.2s ease,
				border-color 0.2s ease;
		}

		:where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) .aufgabe:hover, :where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) .nav-button:hover {
			transform: scale(1.04);
			background: rgba(255, 255, 255, 0.12);
			border-color: rgba(255, 255, 255, 0.7);
		}

		:where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) table {
			border-collapse: separate;
			border-spacing: 0.35em;
			width: fit-content;
		}

		:where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) td {
			font-size: 1.4em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) input {
			width: 2.4em;
			font-size: 1em;
			text-align: center;
			color: white;
			background: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.5);
			border-radius: 0.4em;
			padding: 0.15em;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) .icon {
			font-size: 3em;
			margin-bottom: 0.3em;
		}

		:where(html[data-lesson="html--ma_1x1_5_umkehraufgaben"], html[data-lesson="html--ma_1x1_2_umkehraufgaben"], html[data-lesson="html--ma_1x1_10_umkehraufgaben"]) .label {
			font-size: 1em;
			text-align: center;
			line-height: 1.3;
		}



:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) *, :where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) {
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) main {
			min-height: 95vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .info-bereich {
			margin-bottom: 1.5em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .fortschrittssterne {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 0.6em;
			margin-top: 1em;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .fortschrittsstern {
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.2em;
			height: 1.3em;
			font-size: 2.4em;
			line-height: 1;
			color: #aaa;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .fortschrittsstern.geschafft {
			color: #ffd54a;
			text-shadow: 0 0 0.3em rgba(255, 213, 74, 0.65);
			animation: geschafft 1100ms ease-out;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .fortschrittsstern.geschafft::before, :where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .fortschrittsstern.geschafft::after {
			content: "✦";
			position: absolute;
			font-size: 0.45em;
			color: #fff5bc;
			text-shadow: 0 0 0.4em #ffd54a, 0 0 0.8em #ffd54a;
			pointer-events: none;
			opacity: 0;
			animation: sternfunkeln 1000ms ease-out;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .fortschrittsstern.geschafft::before {
			top: 0;
			left: -0.15em;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .fortschrittsstern.geschafft::after {
			right: -0.15em;
			bottom: 0;
			animation-delay: 150ms;
		}
		@media (prefers-reduced-motion: reduce) {
:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .fortschrittsstern.geschafft, :where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .fortschrittsstern.geschafft::before, :where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .fortschrittsstern.geschafft::after { animation: none; }
}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 95vw;
			text-align: center;
			padding: 1em 1.5em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .rechenzeile {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			justify-content: center;
			gap: 0.4em;
			font-size: 1.6em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .zahl {
			min-width: 1.7em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 3.2em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) details {
			background-color: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.2);
			border-radius: 0.8em;
			padding: 1em;
			max-width: 95vw;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) summary {
			cursor: pointer;
			font-size: 1.2em;
			text-align: center;
			font-weight: bold;
			margin-top: 0;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-bottom: 0.8em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .werkzeug-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .werkzeug, :where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .auswahl {
			font-size: 1.1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			min-width: 3.6em;
			min-height: 2.7em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .werkzeug {
			font-size: 1.4em;
			width: 2.7em;
			height: 2.7em;
			min-width: 0;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .werkzeug.text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .werkzeug.text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .werkzeug.aktiv, :where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .auswahl.aktiv {
			background-color: yellow;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .feld-auswahl {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 0.6em;
			margin-bottom: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .feld-auswahl .auswahl {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.5em;
			padding: 0.7em;
			cursor: pointer;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .feld-symbol {
			display: flex;
			gap: 0.12em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .feld-symbol i {
			width: 0.65em;
			height: 0.65em;
			border: 0.1em solid currentColor;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .feld-symbol i:nth-child(6) {
			margin-left: 0.25em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .zahlenfeld-wrapper {
			overflow: auto;
			max-width: 95vw;
			max-height: 70vh;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .zahlenfeld {
			display: grid;
			grid-template-columns: repeat(5, 2.4em) 0.6em repeat(5, 2.4em);
			grid-template-rows: repeat(5, 2.4em) 0.6em repeat(5, 2.4em);
			gap: 0.35em;
			width: max-content;
			padding: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .abakus {
			font-size: 1em;
			border: 0;
			border-radius: 50%;
			width: 2.4em;
			height: 2.4em;
			padding: 0;
			background-color: transparent;
			color: white;
			font-weight: bold;
			cursor: pointer;
			perspective: 12em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .plaettchen {
			display: block;
			position: relative;
			width: 100%;
			height: 100%;
			transform-style: preserve-3d;
			pointer-events: none;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .plaettchen-seite {
			position: absolute;
			inset: 0;
			border: 0.1em solid #aaaaaa;
			border-radius: 50%;
			background-color: #141414;
			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .plaettchen-rueckseite { transform: rotateY(180deg); }
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .plaettchen-seite[data-farbe="rot"] { background-color: #d60000; border-color: #ff7777; }
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .plaettchen-seite[data-farbe="blau"] { background-color: #154dcc; border-color: #88b2ff; }
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .abakus:focus-visible { outline: 3px solid yellow; outline-offset: 2px; }
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .feld-symbol i { border-radius: 50%; }
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .feld-hinweis { max-width: 30em; font-weight: normal; }

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) main { position: relative; overflow: hidden; }
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) main > section { position: relative; z-index: 1; }
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .fertig .fortschrittsstern {
			animation: bunt-blinken 900ms steps(1) infinite;
			animation-delay: calc(var(--stern-index) * -90ms);
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .feuerwerk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
		@media (prefers-reduced-motion: reduce) {
:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .fertig .fortschrittsstern { animation: none; color: #ffd54a; }
			:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_viele_aufgaben"], html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_viele_aufgaben"]) .feuerwerk { display: none; }
}

:where(html[data-lesson="html--mu_theorie_ganzenote"]) .notenkarte { max-width: 80%; margin-inline: auto; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .tempokarte { max-width: 920px; margin-inline: auto; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .notenflaeche { color: #111; background: #fff; border-radius: 16px; overflow: hidden; touch-action: none; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .ziehbar { cursor: grab; outline: none; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .ziehbar:active { cursor: grabbing; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .notenkopf:focus .kopf-form { stroke: #ff9800; stroke-width: 6; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .notenkopf.aktiv .kopf-form { fill: #fff; stroke: #ff9800; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .noten-markierung { fill: #ffeb3b; opacity: 0; transition: opacity .08s; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .notenkopf.spielt .noten-markierung { opacity: .75; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .ziel-hilfe { opacity: 0; transition: opacity .15s; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .zieht-kopf .ziel-hilfe { opacity: .16; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .anleitung { max-width: 760px; margin-inline: auto; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .tempo-buttons, :where(html[data-lesson="html--mu_theorie_ganzenote"]) .freie-wahl { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1em; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .tempo-button { min-width: 150px; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .tempo-button[disabled] { cursor: wait; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .tempo-anzeige { min-width: 5.5em; font-variant-numeric: tabular-nums; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .weiter-bereich { text-align: center; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) input[type="range"] { width: min(360px, 75vw); accent-color: #ff9800; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .taktanzeige { display: flex; justify-content: center; gap: .65em; min-height: 2.5em; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .schlag { width: 2.2em; height: 2.2em; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; transition: background .08s, color .08s; }
		:where(html[data-lesson="html--mu_theorie_ganzenote"]) .schlag.aktiv { color: #111; background: #ff9800; }
		@media (prefers-reduced-motion: reduce) {
:where(html[data-lesson="html--mu_theorie_ganzenote"]) .ziel-hilfe, :where(html[data-lesson="html--mu_theorie_ganzenote"]) .schlag { transition: none; }
}

:where(html[data-lesson="html--mu_theorie_c_dur_tonleiter_uebung_1"]) .aufgabenkarte { max-width: 1040px; margin-inline: auto; }
		:where(html[data-lesson="html--mu_theorie_c_dur_tonleiter_uebung_1"]) .anleitung { max-width: 760px; margin-inline: auto; }
		:where(html[data-lesson="html--mu_theorie_c_dur_tonleiter_uebung_1"]) .notenbereich { overflow-x: auto; border-radius: 16px; color: #111; background: #fff; }
		:where(html[data-lesson="html--mu_theorie_c_dur_tonleiter_uebung_1"]) .noteninhalt { width: 984px; min-width: 984px; padding-bottom: 22px; }
		:where(html[data-lesson="html--mu_theorie_c_dur_tonleiter_uebung_1"]) .noteninhalt svg { display: block; width: 984px; height: 330px; }
		:where(html[data-lesson="html--mu_theorie_c_dur_tonleiter_uebung_1"]) .auswahlzeile { display: grid; grid-template-columns: repeat(8, 78px); gap: 22px; margin-left: 174px; }
		:where(html[data-lesson="html--mu_theorie_c_dur_tonleiter_uebung_1"]) .notenwahl { display: flex; flex-direction: column; align-items: center; min-width: 0; }
		:where(html[data-lesson="html--mu_theorie_c_dur_tonleiter_uebung_1"]) .notenwahl select { width: 78px; padding: 7px 3px; border: 2px solid #777; border-radius: 8px; background: #fff; font-size: 16px; text-align: center; }
		:where(html[data-lesson="html--mu_theorie_c_dur_tonleiter_uebung_1"]) .notenwahl select:focus { outline: 3px solid #ff9800; outline-offset: 2px; }
		:where(html[data-lesson="html--mu_theorie_c_dur_tonleiter_uebung_1"]) .notenwahl select.richtig { border-color: #2e7d32; background: #e8f5e9; }
		:where(html[data-lesson="html--mu_theorie_c_dur_tonleiter_uebung_1"]) .haken { min-height: 32px; color: #2e7d32; font-size: 26px; font-weight: bold; line-height: 32px; }
		:where(html[data-lesson="html--mu_theorie_c_dur_tonleiter_uebung_1"]) .status { min-height: 1.5em; }
		:where(html[data-lesson="html--mu_theorie_c_dur_tonleiter_uebung_1"]) #fireworks { position: absolute; inset: 0; z-index: 1000; }
		@media (prefers-reduced-motion: reduce) {
:where(html[data-lesson="html--mu_theorie_c_dur_tonleiter_uebung_1"]) *, :where(html[data-lesson="html--mu_theorie_c_dur_tonleiter_uebung_1"]) { scroll-behavior: auto !important; }
}

:where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]):root {
            --bg: #000000;
            --bg-soft: #0f0f10;
            --card: #141416;
            --card-hover: #1d1d20;
            --line: rgba(255, 255, 255, 0.08);
            --text: #f3f3f3;
            --muted: #b8b8bd;
            --accent: #ffffff;
            --shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
            --radius: 22px;
            --radius-small: 16px;
            --max-width: 1100px;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) *, :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"])html {
            scroll-behavior: smooth;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) body {
            min-height: 100vh;
            font-family: 'Grundschrift', Arial, sans-serif;
            background:
                radial-gradient(circle at top, rgba(255, 255, 255, 0.05), transparent 30%),
                linear-gradient(180deg, #050505 0%, #000000 100%);
            color: var(--text);
            display: flex;
            flex-direction: column;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) img {
            max-width: 100%;
            display: block;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) a {
            color: inherit;
            text-decoration: none;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) button, :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) input, :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) select {
            font: inherit;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .page {
            width: min(100% - 32px, var(--max-width));
            margin: 0 auto;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .site-header {
            padding: 24px 0 12px 0;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .header-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 12px 0;
            flex-wrap: wrap;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .brand {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .brand-mark {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: linear-gradient(145deg, #1a1a1d, #090909);
            border: 1px solid var(--line);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow);
            overflow: hidden;
            cursor: pointer;
            flex-shrink: 0;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .brand-mark img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .brand-text h1 {
            font-size: clamp(1.5rem, 2vw, 2rem);
            letter-spacing: 0.14em;
            font-weight: 700;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .brand-text p {
            margin-top: 4px;
            color: var(--muted);
            font-size: 0.95rem;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .top-nav {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .top-nav a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 48px;
            padding: 12px 16px;
            border-radius: 14px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
            transition: 0.2s ease;
            color: var(--text);
            font-weight: 700;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .top-nav a:hover {
            transform: translateY(-2px);
            background: var(--card-hover);
            border-color: rgba(255, 255, 255, 0.16);
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .section {
            padding: 18px 0 24px 0;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .section-head {
            margin-bottom: 20px;
            text-align: center;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .section-head :is(h1, h2), :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .section-head h3 {
            font-size: clamp(1.4rem, 2vw, 2rem);
            margin-bottom: 8px;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .section-head p {
            color: var(--muted);
            line-height: 1.5;
            max-width: 760px;
            margin: 0 auto;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .panel {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
            border: 1px solid var(--line);
            border-radius: var(--radius-small);
            box-shadow: var(--shadow);
            padding: 22px;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .panel + .panel {
            margin-top: 18px;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .notation-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            overflow-x: auto;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .notation-row {
            display: flex;
            flex-wrap: nowrap;
            align-items: flex-end;
            justify-content: center;
            gap: 0;
            min-width: max-content;
            padding: 8px 0;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .notation-row > * {
            flex: 0 0 auto;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .notation-row svg, :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .notation-row span {
            display: block;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) #note_1, :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) #note_2 {
            display: flex;
            flex-wrap: nowrap;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) #note_1 svg, :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) #note_2 svg {
            display: block;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .info-panel {
            text-align: center;
        }

        :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .info-panel p {
            color: var(--muted);
            line-height: 1.6;
        }




        @media (max-width: 900px) {
:where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .header-bar {
                flex-direction: column;
                align-items: flex-start;
            }
}

        @media (max-width: 700px) {
:where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .top-nav {
                width: 100%;
            }

            :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .top-nav a {
                flex: 1 1 calc(50% - 10px);
            }

            :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .panel {
                padding: 16px;
            }

            :where(html[data-lesson="html--mu_lied_v_2_takte"], html[data-lesson="html--mu_lied_penta_v_2_takte"]) .notation-wrap {
                justify-content: flex-start;
            }
}

:where(html[data-lesson="html--ma_zr10_vorgaenger-zahl-nachfolger"]) .zahl {
			font-size: 1.6em;
			font-weight: bold;
			text-align: center;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr10_vorgaenger-zahl-nachfolger"]) .zahlfeld {
			font-size: 1.2em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 3em;
			text-align: center;
			box-sizing: border-box;
			padding: 0.2em;
		}

		:where(html[data-lesson="html--ma_zr10_vorgaenger-zahl-nachfolger"]) table {
			border-spacing: 0.4em;
		}

		:where(html[data-lesson="html--ma_zr10_vorgaenger-zahl-nachfolger"]) th, :where(html[data-lesson="html--ma_zr10_vorgaenger-zahl-nachfolger"]) td {
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr10_vorgaenger-zahl-nachfolger"]) .mittelzahl {
			background-color: lightgrey;
			color: black;
			border-radius: 0.4em;
			min-width: 3em;
			height: 2.2em;
			font-size: 1.4em;
			font-weight: bold;
		}

:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) *, :where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) {
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) main {
			min-height: 95vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .info-bereich {
			margin-bottom: 1.5em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .fortschrittssterne {
			display: flex;
			justify-content: center;
			gap: 0.6em;
			margin-top: 1em;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .fortschrittsstern {
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.2em;
			height: 1.3em;
			font-size: 2.4em;
			line-height: 1;
			color: #aaa;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .fortschrittsstern.geschafft {
			color: #ffd54a;
			text-shadow: 0 0 0.3em rgba(255, 213, 74, 0.65);
			animation: geschafft 1100ms ease-out;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .fortschrittsstern.geschafft::before, :where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .fortschrittsstern.geschafft::after {
			content: "✦";
			position: absolute;
			font-size: 0.45em;
			color: #fff5bc;
			text-shadow: 0 0 0.4em #ffd54a, 0 0 0.8em #ffd54a;
			pointer-events: none;
			opacity: 0;
			animation: sternfunkeln 1000ms ease-out;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .fortschrittsstern.geschafft::before {
			top: 0;
			left: -0.15em;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .fortschrittsstern.geschafft::after {
			right: -0.15em;
			bottom: 0;
			animation-delay: 150ms;
		}
		@media (prefers-reduced-motion: reduce) {
:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .fortschrittsstern.geschafft, :where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .fortschrittsstern.geschafft::before, :where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .fortschrittsstern.geschafft::after { animation: none; }
}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .aufgabenbereich {
			display: flex;
			gap: 1.5em;
			align-items: flex-start;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 95vw;
			text-align: center;
			padding: 1em 1.5em;
			margin: 0 auto 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .rechenzeile {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			justify-content: center;
			gap: 0.4em;
			font-size: 1.6em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .zahl {
			min-width: 1.7em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 3.2em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .hilfe-bereich {
			background-color: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.2);
			border-radius: 0.8em;
			padding: 1em;
			max-width: 95vw;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .hilfe-bereich p {
			text-align: center;
			font-weight: bold;
			margin-top: 0;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-bottom: 0.8em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .werkzeug-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .werkzeug, :where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .auswahl {
			font-size: 1.1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			min-width: 3.6em;
			min-height: 2.7em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .werkzeug {
			font-size: 1.4em;
			width: 2.7em;
			height: 2.7em;
			min-width: 0;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .werkzeug.text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .werkzeug.text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .werkzeug.aktiv, :where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .auswahl.aktiv {
			background-color: yellow;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .feld-auswahl {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 0.6em;
			margin-bottom: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .feld-auswahl .auswahl {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.5em;
			padding: 0.7em;
			cursor: pointer;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .feld-symbol {
			display: flex;
			gap: 0.12em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .feld-symbol i {
			width: 0.65em;
			height: 0.65em;
			border: 0.1em solid currentColor;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .feld-symbol i:nth-child(6) {
			margin-left: 0.25em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .zahlenfeld-wrapper {
			overflow: auto;
			max-width: 95vw;
			max-height: 70vh;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .zahlenfeld {
			display: grid;
			grid-template-columns: repeat(5, 2.4em) 0.6em repeat(5, 2.4em);
			grid-template-rows: repeat(5, 2.4em) 0.6em repeat(5, 2.4em);
			gap: 0.35em;
			width: max-content;
			padding: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .abakus {
			font-size: 1em;
			border: 0;
			border-radius: 50%;
			width: 2.4em;
			height: 2.4em;
			padding: 0;
			background-color: transparent;
			color: white;
			font-weight: bold;
			cursor: pointer;
			perspective: 12em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .plaettchen {
			display: block;
			position: relative;
			width: 100%;
			height: 100%;
			transform-style: preserve-3d;
			pointer-events: none;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .plaettchen-seite {
			position: absolute;
			inset: 0;
			border: 0.1em solid #aaaaaa;
			border-radius: 50%;
			background-color: #141414;
			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .plaettchen-rueckseite { transform: rotateY(180deg); }
		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .plaettchen-seite[data-farbe="rot"] { background-color: #d60000; border-color: #ff7777; }
		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .plaettchen-seite[data-farbe="blau"] { background-color: #154dcc; border-color: #88b2ff; }
		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .abakus:focus-visible { outline: 3px solid yellow; outline-offset: 2px; }
		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .feld-symbol i { border-radius: 50%; }
		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .feld-hinweis { max-width: 30em; font-weight: normal; }

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .plaettchen-seite[data-farbe="durchgestrichen"] {
			background-color: #d60000;
			border-color: #ff7777;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .plaettchen-seite[data-farbe="durchgestrichen"]::after {
			content: "✕";
			position: absolute;
			inset: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #88b2ff;
			font-size: 2em;
			text-shadow: 0 0 2px black;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) main { position: relative; overflow: hidden; }
		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) main > section, :where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) main > nav { position: relative; z-index: 1; }
		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .fertig .fortschrittsstern {
			animation: bunt-blinken 900ms steps(1) infinite;
			animation-delay: calc(var(--stern-index) * -90ms);
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .feuerwerk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
		@media (prefers-reduced-motion: reduce) {
:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .fertig .fortschrittsstern { animation: none; color: #ffd54a; }
			:where(html[data-lesson="html--ma_zr100_OZUE_subtrahierenbis100_felder"]) .feuerwerk { display: none; }
}

:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) *, :where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) {
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) article {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			align-items: center;
			gap: 1em;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) h2 {
			text-align: center;
			font-size: clamp(1.8rem, 5vw, 3rem);
			margin: 0.5em 0;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) p {
			text-align: center;
			font-size: clamp(1.1rem, 3vw, 1.5rem);
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) table {
			border-collapse: collapse;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .feld1 {
			background: #222;
			border: 0.15em solid white;
			border-radius: 1em;
			padding: 1em;
			box-shadow: 0 0 1em rgba(255,255,255,0.2);
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .column {
			display: flex;
			flex-direction: column;
			gap: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .row {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			align-items: center;
			gap: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .zahl {
			font-size: clamp(1.5rem, 5vw, 3rem);
			font-weight: bold;
			text-align: center;
			padding: 0.1em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .input {
			width: 3em;
			font-size: clamp(1.5rem, 5vw, 3rem);
			border-radius: 0.3em;
			border: 0.08em solid black;
			background: white;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .einstellig {
			max-width: 4em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .abakus {
			width: clamp(1.8rem, 7vw, 3.2rem);
			height: clamp(1.8rem, 7vw, 3.2rem);
			background: #eeeeee;
			color: black;
			border: 0.05em solid #999;
			font-size: clamp(1rem, 3vw, 1.8rem);
			font-weight: bold;
			cursor: pointer;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .abakus:hover, :where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .werkzeug:hover, :where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .auswahl:hover {
			filter: brightness(1.1);
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .werkzeug, :where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .auswahl, :where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .inhalt {
			min-width: 5em;
			min-height: 3em;
			padding: 0.5em 1em;
			border-radius: 0.8em;
			border: 0.1em solid white;
			background: #eeeeee;
			color: black;
			font-size: 1.1em;
			font-weight: bold;
			cursor: pointer;
			text-align: center;
			text-decoration: none;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .matheaufgabe td {
			padding: 0.2em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .aufgabe {
			font-size: clamp(2rem, 7vw, 4rem);
			font-weight: bold;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .trennlinie-rechts {
			border-right: black solid 0.2em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .trennlinie-unten {
			border-bottom: black solid 0.2em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .trennlinie-oben {
			border-top: black solid 0.2em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_2Z_felder"], html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_2Z_felder"]) .trennlinie-links {
			border-left: black solid 0.2em;
		}

:where(html[data-lesson="html--ton_c1"]):root {
            --bg: #000000;
            --bg-soft: #0f0f10;
            --card: #141416;
            --card-hover: #1d1d20;
            --line: rgba(255, 255, 255, 0.08);
            --text: #f3f3f3;
            --muted: #b8b8bd;
            --accent: #ffffff;
            --shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
            --radius: 22px;
            --radius-small: 16px;
            --max-width: 1100px;
            --panel-light: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
            --green: #66bb6a;
        }

        :where(html[data-lesson="html--ton_c1"]) *, :where(html[data-lesson="html--ton_c1"]) {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :where(html[data-lesson="html--ton_c1"])html {
            scroll-behavior: smooth;
        }

        :where(html[data-lesson="html--ton_c1"]) body {
            min-height: 100vh;
            font-family: 'Grundschrift', Arial, sans-serif;
            background:
                radial-gradient(circle at top, rgba(255, 255, 255, 0.05), transparent 30%),
                linear-gradient(180deg, #050505 0%, #000000 100%);
            color: var(--text);
            display: flex;
            flex-direction: column;
        }

        :where(html[data-lesson="html--ton_c1"]) img {
            max-width: 100%;
            display: block;
        }

        :where(html[data-lesson="html--ton_c1"]) a {
            color: inherit;
            text-decoration: none;
        }

        :where(html[data-lesson="html--ton_c1"]) button, :where(html[data-lesson="html--ton_c1"]) input, :where(html[data-lesson="html--ton_c1"]) select {
            font: inherit;
        }

        :where(html[data-lesson="html--ton_c1"]) .page {
            width: min(100% - 32px, var(--max-width));
            margin: 0 auto;
        }

        :where(html[data-lesson="html--ton_c1"]) .site-header {
            padding: 24px 0 12px 0;
        }

        :where(html[data-lesson="html--ton_c1"]) .header-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 12px 0;
            flex-wrap: wrap;
        }

        :where(html[data-lesson="html--ton_c1"]) .brand {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        :where(html[data-lesson="html--ton_c1"]) .brand-mark {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: linear-gradient(145deg, #1a1a1d, #090909);
            border: 1px solid var(--line);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow);
            overflow: hidden;
            cursor: pointer;
            flex-shrink: 0;
        }

        :where(html[data-lesson="html--ton_c1"]) .brand-mark img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        :where(html[data-lesson="html--ton_c1"]) .brand-text h1 {
            font-size: clamp(1.5rem, 2vw, 2rem);
            letter-spacing: 0.14em;
            font-weight: 700;
        }

        :where(html[data-lesson="html--ton_c1"]) .brand-text p {
            margin-top: 4px;
            color: var(--muted);
            font-size: 0.95rem;
        }

        :where(html[data-lesson="html--ton_c1"]) .top-nav {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        :where(html[data-lesson="html--ton_c1"]) .top-nav a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 48px;
            padding: 12px 16px;
            border-radius: 14px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
            transition: 0.2s ease;
            color: var(--text);
            font-weight: 700;
        }

        :where(html[data-lesson="html--ton_c1"]) .top-nav a:hover {
            transform: translateY(-2px);
            background: var(--card-hover);
            border-color: rgba(255, 255, 255, 0.16);
        }

        :where(html[data-lesson="html--ton_c1"]) .section {
            padding: 18px 0 24px 0;
        }

        :where(html[data-lesson="html--ton_c1"]) .section-head {
            margin-bottom: 20px;
            text-align: center;
        }

        :where(html[data-lesson="html--ton_c1"]) .section-head :is(h1, h2), :where(html[data-lesson="html--ton_c1"]) .section-head h3 {
            font-size: clamp(1.4rem, 2vw, 2rem);
            margin-bottom: 8px;
        }

        :where(html[data-lesson="html--ton_c1"]) .section-head p {
            color: var(--muted);
            line-height: 1.6;
            max-width: 760px;
            margin: 0 auto;
        }

        :where(html[data-lesson="html--ton_c1"]) .panel {
            background: var(--panel-light);
            border: 1px solid var(--line);
            border-radius: var(--radius-small);
            box-shadow: var(--shadow);
            padding: 22px;
        }

        :where(html[data-lesson="html--ton_c1"]) .panel + .panel {
            margin-top: 18px;
        }

        :where(html[data-lesson="html--ton_c1"]) .info-panel {
            text-align: center;
        }

        :where(html[data-lesson="html--ton_c1"]) .info-panel p {
            color: var(--muted);
            line-height: 1.6;
        }

        :where(html[data-lesson="html--ton_c1"]) .keyboard-shell {
            background: linear-gradient(180deg, #101113, #0a0a0b);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 22px;
            box-shadow: var(--shadow);
        }

        :where(html[data-lesson="html--ton_c1"]) .keyboard-wrapper {
            overflow-x: auto;
            max-width: 100%;
            padding-bottom: 6px;
        }

        :where(html[data-lesson="html--ton_c1"]) .keyboard {
            position: relative;
            display: flex;
            height: 220px;
            min-width: 504px;
            width: max-content;
            margin: 0 auto;
        }

        :where(html[data-lesson="html--ton_c1"]) .white-key {
            position: relative;
            width: 60px;
            height: 220px;
            margin: 1.5px;
            background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
            border: 1px solid #111111;
            border-radius: 0 0 8px 8px;
            text-align: center;
            user-select: none;
            flex-shrink: 0;
            color: #000000;
            cursor: pointer;
            transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
            box-shadow:
                inset 0 -8px 12px rgba(0, 0, 0, 0.08),
                0 6px 10px rgba(0, 0, 0, 0.28);
        }

        :where(html[data-lesson="html--ton_c1"]) .white-key:hover {
            transform: translateY(1px);
            background: linear-gradient(180deg, #ffffff 0%, #e9e9e9 100%);
        }

        :where(html[data-lesson="html--ton_c1"]) .white-key.active {
            background: linear-gradient(180deg, #b9f6ca 0%, #7fe08d 100%);
            box-shadow:
                inset 0 -8px 12px rgba(0, 0, 0, 0.08),
                0 0 0 2px rgba(102, 187, 106, 0.4),
                0 8px 14px rgba(0, 0, 0, 0.3);
        }

        :where(html[data-lesson="html--ton_c1"]) .note-label {
            position: absolute;
            bottom: 12px;
            width: 100%;
            text-align: center;
            font-weight: 700;
            font-size: 16px;
            letter-spacing: 0.03em;
        }

        :where(html[data-lesson="html--ton_c1"]) .key-letter {
            position: absolute;
            bottom: 38px;
            left: 50%;
            transform: translateX(-50%);
            min-width: 30px;
            padding: 4px 8px;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.08);
            font-size: 0.8rem;
            font-weight: 700;
        }

        :where(html[data-lesson="html--ton_c1"]) .black-key {
            position: absolute;
            width: 40px;
            height: 130px;
            background: linear-gradient(180deg, #1f1f21 0%, #000000 100%);
            top: 0;
            z-index: 2;
            border-radius: 0 0 6px 6px;
            border: 1px solid #050505;
            box-shadow:
                inset 0 -8px 12px rgba(255, 255, 255, 0.04),
                0 8px 12px rgba(0, 0, 0, 0.45);
            pointer-events: none;
        }

        :where(html[data-lesson="html--ton_c1"]) .black-Csharp { left: 45px; }
        :where(html[data-lesson="html--ton_c1"]) .black-Dsharp { left: 107px; }
        :where(html[data-lesson="html--ton_c1"]) .black-Fsharp { left: 231px; }
        :where(html[data-lesson="html--ton_c1"]) .black-Gsharp { left: 293px; }
        :where(html[data-lesson="html--ton_c1"]) .black-Asharp { left: 355px; }

        :where(html[data-lesson="html--ton_c1"]) .hint-row {
            margin-top: 18px;
            text-align: center;
            color: var(--muted);
            line-height: 1.6;
        }

        :where(html[data-lesson="html--ton_c1"]) .hint-row strong {
            color: var(--text);
        }




        @media (max-width: 900px) {
:where(html[data-lesson="html--ton_c1"]) .header-bar {
                flex-direction: column;
                align-items: flex-start;
            }
}

        @media (max-width: 700px) {
:where(html[data-lesson="html--ton_c1"]) .top-nav {
                width: 100%;
            }

            :where(html[data-lesson="html--ton_c1"]) .top-nav a {
                flex: 1 1 calc(50% - 10px);
            }

            :where(html[data-lesson="html--ton_c1"]) .panel, :where(html[data-lesson="html--ton_c1"]) .keyboard-shell {
                padding: 16px;
            }

            :where(html[data-lesson="html--ton_c1"]) .keyboard {
                height: 200px;
            }

            :where(html[data-lesson="html--ton_c1"]) .white-key {
                height: 200px;
            }

            :where(html[data-lesson="html--ton_c1"]) .black-key {
                height: 118px;
            }

            :where(html[data-lesson="html--ton_c1"]) .note-label {
                font-size: 14px;
            }

            :where(html[data-lesson="html--ton_c1"]) .key-letter {
                bottom: 34px;
                font-size: 0.75rem;
            }
}

:where(html[data-lesson="html--ma_zr100_runden"]) *, :where(html[data-lesson="html--ma_zr100_runden"]) { box-sizing: border-box; }
        :where(html[data-lesson="html--ma_zr100_runden"]) body {
            display: flex; flex-direction: column; min-height: 100vh; margin: 0;
            color: white; background: black; font-family: 'Grundschrift', Arial, sans-serif; line-height: 1.5;
        }
        :where(html[data-lesson="html--ma_zr100_runden"]) .header-nav {
            display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; padding: 1em;
        }
        :where(html[data-lesson="html--ma_zr100_runden"]) .header-nav a {
            display: flex; flex-direction: column; align-items: center;
            color: white; text-decoration: none; border-radius: 0.5em;
        }
        :where(html[data-lesson="html--ma_zr100_runden"]) .header-icon { font-size: 3em; line-height: 1.3; }
        :where(html[data-lesson="html--ma_zr100_runden"]) main { flex: 1; width: 100%; max-width: 42em; margin: 0 auto 2em; padding: 0 1em; }
        :where(html[data-lesson="html--ma_zr100_runden"]) .textblock { text-align: center; margin-bottom: 2em; }
        :where(html[data-lesson="html--ma_zr100_runden"]) h1 { font-size: 1.75em; margin: 0.5em 0; }
        :where(html[data-lesson="html--ma_zr100_runden"]) .textblock p { margin: 0.5em auto; max-width: 34em; }
        :where(html[data-lesson="html--ma_zr100_runden"]) .feld1 {
            padding: clamp(0.75em, 3vw, 1.5em); margin-bottom: 1em;
            border: 0.12em solid rgba(255, 255, 255, 0.35); border-radius: 1em;
            background: rgba(255, 255, 255, 0.05);
        }
        :where(html[data-lesson="html--ma_zr100_runden"]) table { width: 100%; table-layout: fixed; border-spacing: 0 0.8em; text-align: center; }
        :where(html[data-lesson="html--ma_zr100_runden"]) caption { font-size: 1.2em; font-weight: bold; margin-bottom: 0.5em; }
        :where(html[data-lesson="html--ma_zr100_runden"]) .answer-column { width: 29%; }
        :where(html[data-lesson="html--ma_zr100_runden"]) .arrow-column { width: 8%; }
        :where(html[data-lesson="html--ma_zr100_runden"]) .number-column { width: 26%; }
        :where(html[data-lesson="html--ma_zr100_runden"]) td { padding: 0; }
        :where(html[data-lesson="html--ma_zr100_runden"]) .zahl { font-size: clamp(1.4em, 5vw, 2em); font-weight: bold; white-space: nowrap; }
        :where(html[data-lesson="html--ma_zr100_runden"]) input {
            width: 100%; min-width: 0; min-height: 3em; padding: 0.5em 0.2em;
            border: 2px solid #999; border-radius: 0.5em;
            background: white; color: black; font: inherit; font-size: 1.2em; text-align: center;
        }
        :where(html[data-lesson="html--ma_zr100_runden"]) a:focus-visible, :where(html[data-lesson="html--ma_zr100_runden"]) input:focus-visible, :where(html[data-lesson="html--ma_zr100_runden"]) button:focus-visible { outline: 3px solid #8ac8ff; outline-offset: 4px; }
        :where(html[data-lesson="html--ma_zr100_runden"]) .inhalt {
            display: block; padding: 0.5em; color: white; text-decoration: none; text-align: center;
            font-size: 1.2em; border-radius: 0.5em;
        }
        :where(html[data-lesson="html--ma_zr100_runden"]) .inhalt:hover { background: rgba(255, 255, 255, 0.12); }
        :where(html[data-lesson="html--ma_zr100_runden"]) th { font-size: 0.95em; overflow-wrap: anywhere; padding: 0.4em; }
        :where(html[data-lesson="html--ma_zr100_runden"]) td { padding: 0.25em; }
        :where(html[data-lesson="html--ma_zr100_runden"]) .actions { text-align: center; }
        :where(html[data-lesson="html--ma_zr100_runden"]) .loesen {
            min-height: 3em; padding: 0.75em 1.5em; border: 2px solid #999;
            border-radius: 0.75em; background: #222; color: white;
            font: inherit; font-weight: bold; cursor: pointer;
        }
        :where(html[data-lesson="html--ma_zr100_runden"]) .loesen:hover { background: #333; }
        :where(html[data-lesson="html--ma_zr100_runden"]) .loesen:disabled { opacity: 0.7; cursor: default; }
        :where(html[data-lesson="html--ma_zr100_runden"]) .progress { display: inline-block; padding: 0.5em 1em; border-radius: 2em; background: #222; }

:where(html[data-lesson="html--ma_zr100_OZUE_zahlenkette"]) *, :where(html[data-lesson="html--ma_zr100_OZUE_zahlenkette"]) {
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahlenkette"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahlenkette"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahlenkette"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahlenkette"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahlenkette"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahlenkette"]) main {
			min-height: 95vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahlenkette"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahlenkette"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahlenkette"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahlenkette"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahlenkette"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_zahlenkette"]) main { position: relative; overflow: hidden; }
		:where(html[data-lesson="html--ma_zr100_OZUE_zahlenkette"]) main > section { position: relative; z-index: 1; }
		:where(html[data-lesson="html--ma_zr100_OZUE_zahlenkette"]) .feuerwerk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
		@media (prefers-reduced-motion: reduce) {
:where(html[data-lesson="html--ma_zr100_OZUE_zahlenkette"]) .feuerwerk { display: none; }
}

:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			padding: 0 1em;
			margin-bottom: 2em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 90vw;
			text-align: center;
			padding: 1em 2em;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .rechenzeile {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			justify-content: center;
			gap: 0.4em;
			font-size: 1.4em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .zahl {
			min-width: 1.4em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 3em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) details {
			background-color: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.2);
			border-radius: 0.8em;
			padding: 1em;
			max-width: 95vw;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) summary {
			cursor: pointer;
			font-size: 1.2em;
			font-weight: bold;
			text-align: center;
			margin-bottom: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .werkzeug-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .werkzeug, :where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .auswahl {
			font-size: 1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			min-width: 3em;
			height: 3em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .werkzeug {
			font-size: 1.4em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .werkzeug.aktiv, :where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .auswahl.aktiv {
			background-color: yellow;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .zahlenfeld-wrapper {
			overflow: auto;
			max-width: 95vw;
			max-height: 70vh;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .zahlenfeld {
			border-collapse: collapse;
			margin: 0 auto;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .zahlenfeld td {
			padding: 0.25em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .zahlenfeld tr:nth-child(5) td {
			border-bottom: 0.2em solid white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .zahlenfeld td:nth-child(5) {
			border-right: 0.2em solid white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .abakus {
			font-size: 1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 3.2em;
			height: 3.2em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_viele_aufgaben"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}


:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) .aufgabenbereich {
			display: flex;
			flex-flow: row wrap;
			gap: 1.5em;
			align-items: flex-start;
			justify-content: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 90vw;
			box-sizing: border-box;
			text-align: center;
			padding: 1em;
			overflow-x: auto;
		}

		:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) .rechenkarte h3 {
			margin: 0 0 0.7em 0;
			font-size: 1.3em;
		}

		:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) table {
			border-collapse: collapse;
			margin: 0 auto;
		}

		:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) td {
			width: 2.4em;
			height: 2.4em;
			text-align: center;
			font-size: 1.4em;
			font-weight: bold;
			border: 0.08em solid black;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) input {
			font-size: 0.9em;
			font-weight: bold;
			width: 2.4em;
			height: 2.2em;
			text-align: center;
			border: none;
			padding: 0;
			background-color: yellow;
			color: black;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) input:focus {
			outline: 0.15em solid orange;
			outline-offset: -0.15em;
		}

		:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr20_tabellen"], html[data-lesson="html--ma_zr20_ZUE_tabellen"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			box-sizing: border-box;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}


:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) *, :where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) {
			box-sizing:border-box;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) body {
			display:flex;
			flex-direction:column;
			color:white;
			background-color:black;
			min-height:95vh;
			margin:0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) header {
			display:flex;
			flex-flow:row wrap;
			justify-content:center;
			gap:1em;
			padding:1em;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) header a {
			display:flex;
			flex-direction:column;
			align-items:center;
			text-decoration:none;
			color:white;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) main {
			display:flex;
			flex-direction:column;
			align-items:center;
			justify-content:flex-start;
			flex:1;
			padding:0 1em 2em 1em;
			gap:1.8em;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) .einleitung {
			text-align:center;
			max-width:50em;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) .einleitung h2 {
			margin:0.3em 0;
			font-size:clamp(2rem,4vw,3rem);
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) .einleitung p {
			font-size:1.1em;
			line-height:1.5;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) .aufgabenbereich {
			display:flex;
			flex-direction:column;
			gap:1.5em;
			width:100%;
			max-width:75em;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) .aufgabe {
			background-color:rgba(255,255,255,0.08);
			border:0.08em solid rgba(255,255,255,0.15);
			border-radius:1.2em;
			padding:1.5em;
			backdrop-filter:blur(0.4em);
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) .aufgabe p {
			text-align:center;
			font-size:1.2em;
			margin-top:0;
			margin-bottom:1.2em;
			font-weight:bold;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) .kette-wrapper {
			overflow-x:auto;
			padding-bottom:0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) .kette {
			display:flex;
			align-items:center;
			justify-content:center;
			gap:0.6em;
			min-width:max-content;
			flex-wrap:nowrap;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) .zahl, :where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) .input {
			width:3.2em;
			height:3.2em;
			border-radius:0.5em;
			border:0.08em solid black;
			font-size:1.2em;
			font-weight:bold;
			text-align:center;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) .zahl {
			display:flex;
			align-items:center;
			justify-content:center;
			background-color:white;
			color:black;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) .pfeil {
			font-size:1.5em;
			color:white;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) .input {
			background-color:white;
			color:black;
			outline:none;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) .input:focus {
			box-shadow:0 0 0.6em rgba(255,255,255,0.5);
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) .abschluss {
			display:flex;
			flex-flow:row wrap;
			gap:1em;
			justify-content:center;
			margin-top:1em;
		}

		:where(html[data-lesson="html--ma_zr20_zahlenkette"], html[data-lesson="html--ma_zr20_ZUE_zahlenkette"], html[data-lesson="html--ma_zr100_ZZ_zahlenkette"]) .abschluss a {
			background-color:lightgrey;
			color:black;
			padding:1em;
			border-radius:0.8em;
			text-decoration:none;
			font-size:1.2em;
			font-weight:bold;
		}



:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .werkzeug-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .werkzeug {
			font-size: 1.4em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 2.7em;
			height: 2.7em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .werkzeug.aktiv {
			background-color: yellow;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .zahlenfeld-wrapper {
			overflow-x: auto;
			max-width: 95vw;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .zahlenfeld {
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			gap: 0.7em;
			row-gap: 1.4em;
			min-width: max-content;
			position: relative;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .zahlenfeld::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: calc((3.2em * 5) + (0.7em * 4) + 1em + 0.35em);
			width: 0.18em;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .zahlenfeld::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: calc(3.2em + (1.4em / 2) + 1em);
			height: 0.18em;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .abakus {
			font-size: 1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 3.2em;
			height: 3.2em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			z-index: 2;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 90vw;
			box-sizing: border-box;
			text-align: center;
			padding: 1em 2em;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .rechenzeile {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			justify-content: center;
			gap: 0.4em;
			font-size: 1.4em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .zahl {
			min-width: 1.4em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 2.6em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr20_addierenbis20"], html[data-lesson="html--ma_zr20_subtrahierenbis20_1"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			box-sizing: border-box;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}


:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) section {
			width: 100%;
			margin-bottom: 2.5em;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .textblock {
			text-align: center;
			padding: 0 1em;
			margin-bottom: 1.5em;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .aufgabe-anzeige {
			font-size: 1.8em;
			margin: 0.8em 0;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .loesung {
			width: 4em;
			font-size: 1.4em;
			text-align: center;
			color: white;
			background: rgba(255, 255, 255, 0.08);
			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 0.6em;
			padding: 0.3em;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .loesung.richtig {
			border-color: green;
			background: rgba(0, 128, 0, 0.35);
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .loesung.falsch {
			border-color: red;
			background: rgba(255, 0, 0, 0.25);
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .aufgaben-grid, :where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .nav-grid, :where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .bereich-grid {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .aufgabe, :where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .nav-button, :where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .quellbereich, :where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .zielbereich {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			min-height: 8em;
			padding: 1em;

			text-decoration: none;
			color: white;

			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;

			background: rgba(255, 255, 255, 0.05);

			box-sizing: border-box;

			transition:
				transform 0.2s ease,
				background 0.2s ease,
				border-color 0.2s ease;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .quellbereich {
			width: min(90vw, 38em);
			min-height: 10em;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .zielbereich {
			width: min(90vw, 24em);
			min-height: 12em;
			justify-content: flex-start;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .nav-button {
			width: 10em;
			min-height: 8em;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .nav-button:hover, :where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .zielbereich:hover, :where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .quellbereich:hover {
			transform: scale(1.02);
			background: rgba(255, 255, 255, 0.12);
			border-color: rgba(255, 255, 255, 0.7);
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .emoji-feld {
			display: grid;
			grid-template-columns: repeat(10, auto);
			justify-content: start;
			align-content: start;
			justify-items: center;
			align-items: center;
			gap: 0.4em;
			width: 100%;
			min-height: 5em;
			margin-top: 0.5em;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .emoji {
			font-size: 2.2em;
			cursor: grab;
			user-select: none;
			touch-action: none;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .emoji:active {
			cursor: grabbing;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .ziel-titel {
			font-size: 1.1em;
			margin-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .kontrolle {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) button {
			font-size: 1.1em;
			color: white;
			background: rgba(255, 255, 255, 0.08);
			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;
			padding: 0.8em 1.2em;
			cursor: pointer;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) button:hover {
			background: rgba(255, 255, 255, 0.16);
			border-color: rgba(255, 255, 255, 0.7);
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .icon {
			font-size: 3em;
			margin-bottom: 0.3em;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .label {
			font-size: 1em;
			text-align: center;
			line-height: 1.3;
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .richtig {
			border-color: green;
			background: rgba(0, 128, 0, 0.35);
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .falsch {
			border-color: red;
			background: rgba(255, 0, 0, 0.25);
		}

		:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .quellbereich, :where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .zielbereich {
			overflow: auto;
		}

		@media (max-width: 700px) {
:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .quellbereich, :where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .zielbereich {
				max-height: 14em;
				-webkit-overflow-scrolling: touch;
			}

			:where(html[data-lesson="html--ma_1x1_5_division_bild"], html[data-lesson="html--ma_1x1_2_division_bild"]) .emoji-feld {
				min-width: 22em;
			}
}



:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 0.8em;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) header a span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) header a span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) .karte {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.5em;
			margin: 1em;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) .punkte {
			font-size: 1.2em;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) .eingabe-bereich {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 1em;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) .eingabe-zeile {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			align-items: center;
			gap: 0.5em;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) .eingabe-block {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) .eingabe-block p {
			margin: 0;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) input {
			width: 3em;
			font-size: 1.4em;
			text-align: center;
			border-radius: 0.4em;
			border: none;
			padding: 0.3em;
			background-color: white;
			color: black;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) button {
			font-size: 1.2em;
			padding: 0.5em 1.2em;
			border: none;
			border-radius: 0.5em;
			background-color: green;
			color: white;
			cursor: pointer;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) button:disabled {
			background-color: grey;
			cursor: not-allowed;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) svg {
			--bgcolor: #ffffff;
			--primarycolor: black;
			height: 14em;
			max-width: 90vw;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) #clockface {
			fill: var(--bgcolor);
			stroke: var(--primarycolor);
			stroke-width: 3.5;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) #indizes use, :where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) #indizes2 use, :where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) .hand {
			stroke: var(--primarycolor);
			stroke-width: 1;
			stroke-linecap: round;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) #indizes use:nth-child(3n+3) {
			stroke-width: 3;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) #hours {
			stroke: red;
			stroke-width: 8;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) #minutes {
			stroke: blue;
			stroke-width: 4;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) #origin {
			fill: black;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) .clock-number {
			font-size: 13px;
			fill: black;
			text-anchor: middle;
			dominant-baseline: middle;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) .ergebnis-links {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-top: 2em;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern_2_Uhrzeiten"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern_2_Uhrzeiten"]) .ergebnis-links a {
			background-color: lightgrey;
			color: black;
			padding: 0.8em 1em;
			border-radius: 0.5em;
			text-decoration: none;
		}


:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) *, :where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) {
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 95vw;
			text-align: center;
			padding: 1em 1.5em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .aufgabentabelle {
			border-collapse: collapse;
			font-size: 1.6em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .aufgabentabelle td {
			padding: 0.25em 0.35em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .zahl {
			min-width: 1.7em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 3.2em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) details {
			background-color: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.2);
			border-radius: 0.8em;
			padding: 1em;
			max-width: 95vw;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) summary {
			cursor: pointer;
			font-size: 1.2em;
			font-weight: bold;
			text-align: center;
			margin-bottom: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-bottom: 0.8em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .werkzeug-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .werkzeug, :where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .auswahl {
			font-size: 1.1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			min-width: 3.6em;
			min-height: 2.7em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .werkzeug {
			font-size: 1.4em;
			width: 2.7em;
			height: 2.7em;
			min-width: 0;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .werkzeug.aktiv, :where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .auswahl.aktiv {
			background-color: yellow;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .zahlenfeld-wrapper {
			overflow: auto;
			max-width: 95vw;
			max-height: 70vh;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .zahlenfeld {
			display: grid;
			grid-template-columns: repeat(10, 2.4em);
			gap: 0.45em;
			row-gap: 0.75em;
			min-width: max-content;
			position: relative;
			padding: 0.8em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .zahlenfeld::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: calc((2.4em * 5) + (0.45em * 4) + 0.8em + 0.225em);
			width: 0.18em;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .zahlenfeld::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: calc((2.4em * 5) + (0.75em * 4) + 0.8em + 0.375em);
			height: 0.18em;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .abakus {
			font-size: 0.9em;
			border: 0.08em solid black;
			border-radius: 0.35em;
			width: 2.4em;
			height: 2.4em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			position: relative;
			z-index: 2;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_umkehraufgaben"], html[data-lesson="html--ma_zr100_ZZ_tauschaufgaben"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}

:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) *, :where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) {
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) .aufgabenbereich {
			display: flex;
			flex-flow: row wrap;
			gap: 1.5em;
			justify-content: center;
			align-items: flex-start;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 95vw;
			text-align: center;
			padding: 1em 1.5em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) .rechenkarte h3 {
			margin-top: 0;
			margin-bottom: 0.7em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) .rechentabelle {
			border-collapse: collapse;
			font-size: 1.35em;
			font-weight: bold;
			margin: 0 auto;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) .rechentabelle td {
			border: 0.08em solid black;
			width: 3.1em;
			height: 3.1em;
			text-align: center;
			padding: 0.2em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) .kopf {
			background-color: #eeeeee;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 3.2em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_tabellen"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}

:where(html[data-lesson="html--ma_zr20_abakus"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) .werkzeug-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) .werkzeug, :where(html[data-lesson="html--ma_zr20_abakus"]) .auswahl, :where(html[data-lesson="html--ma_zr20_abakus"]) .loeschen {
			font-size: 1.2em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
			font-weight: bold;
			cursor: pointer;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) .werkzeug {
			font-size: 1.4em;
			width: 2.7em;
			height: 2.7em;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) .auswahl {
			min-width: 6em;
			height: 3.15em;
			padding: 0 0.8em;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) .loeschen {
			padding: 0.8em 1.2em;
			background-color: lightgrey;
			margin-top: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) .aktiv {
			background-color: yellow;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) .zahlenfeld-wrapper {
			overflow-x: auto;
			max-width: 95vw;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) .zahlenfeld {
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			gap: 0.7em;
			row-gap: 1.4em;
			min-width: max-content;
			position: relative;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) .zahlenfeld::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: calc((3.2em * 5) + (0.7em * 4) + 1em + 0.35em);
			width: 0.18em;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) .zahlenfeld::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: calc(3.2em + (1.4em / 2) + 1em);
			height: 0.18em;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr20_abakus"]) .abakus {
			font-size: 1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 3.2em;
			height: 3.2em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			z-index: 2;
			cursor: pointer;
			font-weight: bold;
		}


:where(html[data-lesson="html--ma_zr20_vorgaenger-zahl-nachfolger"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr20_vorgaenger-zahl-nachfolger"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			padding: 0 1em 2em 1em;
		}

		:where(html[data-lesson="html--ma_zr20_vorgaenger-zahl-nachfolger"]) .abschnitt-titel {
			text-align: center;
			margin-bottom: 2em;
		}

		:where(html[data-lesson="html--ma_zr20_vorgaenger-zahl-nachfolger"]) .abschnitt-titel h2 {
			margin: 0.3em 0;
			font-size: 2em;
		}

		:where(html[data-lesson="html--ma_zr20_vorgaenger-zahl-nachfolger"]) .abschnitt-titel p {
			font-size: 1.1em;
			color: #dddddd;
		}

		:where(html[data-lesson="html--ma_zr20_vorgaenger-zahl-nachfolger"]) .aufgabe-box {
			background-color: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.15);
			border-radius: 1.2em;
			padding: 1.5em;
			width: min(95vw, 42em);
			box-sizing: border-box;
			overflow-x: auto;
		}

		:where(html[data-lesson="html--ma_zr20_vorgaenger-zahl-nachfolger"]) .zeile {
			display: grid;
			grid-template-columns: 2.4em 1.2em 2.4em 1.2em 2.4em;
			column-gap: 0.6em;
			align-items: center;
			justify-content: center;
			min-width: auto;
		}

		:where(html[data-lesson="html--ma_zr20_vorgaenger-zahl-nachfolger"]) .ueberschrift {
			font-size: 1.1em;
			font-weight: bold;
			text-align: center;
			color: white;
			width: 2.4em;
			justify-self: center;
		}

		:where(html[data-lesson="html--ma_zr20_vorgaenger-zahl-nachfolger"]) .pfeil {
			font-size: 1.1em;
			color: white;
			text-align: center;
			width: 1.2em;
		}

		:where(html[data-lesson="html--ma_zr20_vorgaenger-zahl-nachfolger"]) .eingabe {
			width: 2.4em;
			height: 2.4em;
			border-radius: 0.5em;
			border: none;
			font-size: 1.1em;
			text-align: center;
			box-sizing: border-box;
			background: white;
			color: black;
			font-weight: bold;
			padding: 0;
		}

		:where(html[data-lesson="html--ma_zr20_vorgaenger-zahl-nachfolger"]) .zahlfeld {
			width: 2.4em;
			height: 2.4em;
			display: flex;
			align-items: center;
			justify-content: center;
			background: white;
			color: black;
			border-radius: 0.5em;
			font-size: 1.2em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr20_vorgaenger-zahl-nachfolger"]) .link-button {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
			display: inline-block;
		}

:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) section {
			width: 100%;
			margin-bottom: 2.5em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) .textblock {
			text-align: center;
			padding: 0 1em;
			margin-bottom: 1.5em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) .aufgaben-grid, :where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) .nav-grid {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) .aufgabe, :where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) .nav-button {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;

			width: 11em;
			min-height: 8em;
			padding: 1em;

			text-decoration: none;
			color: white;

			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;

			background: rgba(255, 255, 255, 0.05);

			box-sizing: border-box;

			transition:
				transform 0.2s ease,
				background 0.2s ease,
				border-color 0.2s ease;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) .aufgabe:hover, :where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) .nav-button:hover {
			transform: scale(1.04);
			background: rgba(255, 255, 255, 0.12);
			border-color: rgba(255, 255, 255, 0.7);
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) table {
			border-collapse: separate;
			border-spacing: 0.35em;
			width: fit-content;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) td {
			font-size: 1.4em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) input {
			width: 2.8em;
			font-size: 1em;
			text-align: center;
			color: white;
			background: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.5);
			border-radius: 0.4em;
			padding: 0.15em;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) .bildpunkte {
			display: flex;
			flex-direction: column;
			gap: 0.25em;
			margin-top: 0.5em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) .bildreihe {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 0.25em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) .bildpunkt {
			width: 1.2em;
			height: 1.2em;
			background: #2196f3;
			border-radius: 0.35em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) .icon {
			font-size: 3em;
			margin-bottom: 0.3em;
		}

		:where(html[data-lesson="html--ma_1x1_10_reihe_mit_bild"]) .label {
			font-size: 1em;
			text-align: center;
			line-height: 1.3;
		}



:where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
		}

		:where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) section {
			width: 100%;
			margin-bottom: 2.5em;
		}

		:where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) .textblock {
			text-align: center;
			padding: 0 1em;
			margin-bottom: 1.5em;
		}

		:where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) .aufgaben-grid, :where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) .nav-grid {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) .aufgabe, :where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) .nav-button {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 11em;
			min-height: 8em;
			padding: 1em;
			text-decoration: none;
			color: white;
			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;
			background: rgba(255, 255, 255, 0.05);
			box-sizing: border-box;
			transition:
				transform 0.2s ease,
				background 0.2s ease,
				border-color 0.2s ease;
		}

		:where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) .aufgabe:hover, :where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) .nav-button:hover {
			transform: scale(1.04);
			background: rgba(255, 255, 255, 0.12);
			border-color: rgba(255, 255, 255, 0.7);
		}

		:where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) table {
			border-collapse: separate;
			border-spacing: 0.35em;
			width: fit-content;
		}

		:where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) td {
			font-size: 1.8em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) input {
			width: 2.4em;
			font-size: 1em;
			text-align: center;
			color: black;
			background: yellow;
			border: 0.08em solid rgba(255, 255, 255, 0.5);
			border-radius: 0.4em;
			padding: 0.15em;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) .icon {
			font-size: 3em;
			margin-bottom: 0.3em;
		}

		:where(html[data-lesson="html--ma_1x1_5_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben_geteilt"], html[data-lesson="html--ma_1x1_2_zufallsaufgaben_geteilt"]) .label {
			font-size: 1em;
			text-align: center;
			line-height: 1.3;
		}



:where(html[data-lesson="html--ma_zr20_zahl_suchen"]) .zahlenfeld-wrapper {
			overflow-x: auto;
			max-width: 95vw;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_zahl_suchen"]) .zahlenfeld {
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			gap: 0.7em;
			row-gap: 1.4em;
			min-width: max-content;
			position: relative;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_zahl_suchen"]) .zahlenbutton {
			font-size: 1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 3.2em;
			height: 3.2em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			z-index: 2;
		}

		:where(html[data-lesson="html--ma_zr20_zahl_suchen"]) .zahlenfeld::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: calc((3.2em * 5) + (0.7em * 4) + 1em + 0.35em);
			width: 0.18em;
			background-color: rgba(255,255,255,0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr20_zahl_suchen"]) .zahlenfeld::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: calc(3.2em + (1.4em / 2) + 1em);
			height: 0.18em;
			background-color: rgba(255,255,255,0.7);
			border-radius: 1em;
			z-index: 1;
		}

:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 0.8em;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) header a span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) header a span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) .karte {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.5em;
			margin: 1em;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) .punkte {
			font-size: 1.2em;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) .eingabe-bereich {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 1em;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) .eingabe-zeile {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			align-items: center;
			gap: 0.5em;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) input {
			width: 3em;
			font-size: 1.4em;
			text-align: center;
			border-radius: 0.4em;
			border: none;
			padding: 0.3em;
			background-color: white;
			color: black;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) button {
			font-size: 1.2em;
			padding: 0.5em 1.2em;
			border: none;
			border-radius: 0.5em;
			background-color: green;
			color: white;
			cursor: pointer;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) button:disabled {
			background-color: grey;
			cursor: not-allowed;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) svg {
			--bgcolor: #ffffff;
			--primarycolor: black;
			height: 14em;
			max-width: 90vw;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) #clockface {
			fill: var(--bgcolor);
			stroke: var(--primarycolor);
			stroke-width: 3.5;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) #indizes use, :where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) #indizes2 use, :where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) .hand {
			stroke: var(--primarycolor);
			stroke-width: 1;
			stroke-linecap: round;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) #indizes use:nth-child(3n+3) {
			stroke-width: 3;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) #hours {
			stroke: red;
			stroke-width: 8;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) #minutes {
			stroke: blue;
			stroke-width: 4;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) #origin {
			fill: black;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) .clock-number {
			font-size: 13px;
			fill: black;
			text-anchor: middle;
			dominant-baseline: middle;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) .ergebnis-links {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-top: 2em;
		}

		:where(html[data-lesson="html--ma_uhrzeit_stunde_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_5min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_10min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_15min_ziffern"], html[data-lesson="html--ma_uhrzeit_stunde_minute_ziffern"]) .ergebnis-links a {
			background-color: lightgrey;
			color: black;
			padding: 0.8em 1em;
			border-radius: 0.5em;
			text-decoration: none;
		}


:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) *, :where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) {
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) main {
			min-height: 95vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .info-bereich {
			margin-bottom: 1.5em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .fortschrittssterne {
			display: flex;
			justify-content: center;
			gap: 0.6em;
			margin-top: 1em;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .fortschrittsstern {
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.2em;
			height: 1.3em;
			font-size: 2.4em;
			line-height: 1;
			color: #aaa;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .fortschrittsstern.geschafft {
			color: #ffd54a;
			text-shadow: 0 0 0.3em rgba(255, 213, 74, 0.65);
			animation: geschafft 1100ms ease-out;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .fortschrittsstern.geschafft::before, :where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .fortschrittsstern.geschafft::after {
			content: "✦";
			position: absolute;
			font-size: 0.45em;
			color: #fff5bc;
			text-shadow: 0 0 0.4em #ffd54a, 0 0 0.8em #ffd54a;
			pointer-events: none;
			opacity: 0;
			animation: sternfunkeln 1000ms ease-out;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .fortschrittsstern.geschafft::before {
			top: 0;
			left: -0.15em;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .fortschrittsstern.geschafft::after {
			right: -0.15em;
			bottom: 0;
			animation-delay: 150ms;
		}
		@media (prefers-reduced-motion: reduce) {
:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .fortschrittsstern.geschafft, :where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .fortschrittsstern.geschafft::before, :where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .fortschrittsstern.geschafft::after { animation: none; }
}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .gesuchte-zahl {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			padding: 1em 2em;
			margin-bottom: 1.5em;
			font-size: 1.8em;
			font-weight: bold;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .zahlenfeld-wrapper {
			overflow: auto;
			max-width: 95vw;
			max-height: 70vh;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .zahlenfeld {
			display: grid;
			grid-template-columns: repeat(5, 2.4em) 0.6em repeat(5, 2.4em);
			grid-template-rows: repeat(5, 2.4em) 0.6em repeat(5, 2.4em);
			gap: 0.35em;
			width: max-content;
			padding: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .abakus {
			font-size: 1em;
			border: 0.1em solid #aaaaaa;
			border-radius: 50%;
			width: 2.4em;
			height: 2.4em;
			padding: 0;
			background-color: #141414;
			color: white;
			font-weight: bold;
			cursor: pointer;
			perspective: 12em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .abakus:focus-visible { outline: 3px solid yellow; outline-offset: 2px; }

		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) main { position: relative; overflow: hidden; }
		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) main > section { position: relative; z-index: 1; }
		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .fertig .fortschrittsstern {
			animation: bunt-blinken 900ms steps(1) infinite;
			animation-delay: calc(var(--stern-index) * -90ms);
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .feuerwerk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
		@media (prefers-reduced-motion: reduce) {
:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .fertig .fortschrittsstern { animation: none; color: #ffd54a; }
			:where(html[data-lesson="html--ma_zr100_OZUE_zahl_suchen"]) .feuerwerk { display: none; }
}

:where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
		}

		:where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) section {
			width: 100%;
			margin-bottom: 2.5em;
		}

		:where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) .textblock {
			text-align: center;
			padding: 0 1em;
			margin-bottom: 1.5em;
		}

		:where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) .aufgaben-grid, :where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) .nav-grid {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) .aufgabe, :where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) .nav-button {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			width: 11em;
			min-height: 6em;
			padding: 1em;

			text-decoration: none;
			color: white;

			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;

			background: rgba(255, 255, 255, 0.05);

			box-sizing: border-box;

			transition:
				transform 0.2s ease,
				background 0.2s ease,
				border-color 0.2s ease;
		}

		:where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) .aufgabe:hover, :where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) .nav-button:hover {
			transform: scale(1.04);
			background: rgba(255, 255, 255, 0.12);
			border-color: rgba(255, 255, 255, 0.7);
		}

		:where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) table {
			border-collapse: separate;
			border-spacing: 0.35em;
			width: fit-content;
		}

		:where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) td {
			font-size: 1.5em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) input {
			width: 2.4em;
			font-size: 1em;
			text-align: center;
			color: white;
			background: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.5);
			border-radius: 0.4em;
			padding: 0.15em;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) .icon {
			font-size: 3em;
			margin-bottom: 0.3em;
		}

		:where(html[data-lesson="html--ma_1x1_5_reihe_geteilt"], html[data-lesson="html--ma_1x1_2_reihe_geteilt"], html[data-lesson="html--ma_1x1_10_reihe_geteilt"]) .label {
			font-size: 1em;
			text-align: center;
			line-height: 1.3;
		}



:where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) *, :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) { box-sizing: border-box; }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) body {
            display: flex; flex-direction: column; min-height: 100vh; margin: 0;
            color: white; background: black; font-family: 'Grundschrift', Arial, sans-serif; line-height: 1.5;
        }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) .header-nav {
            display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; padding: 1em;
        }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) .header-nav a {
            display: flex; flex-direction: column; align-items: center;
            color: white; text-decoration: none; border-radius: 0.5em;
        }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) .header-icon { font-size: 3em; line-height: 1.3; }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) main { flex: 1; width: 100%; max-width: 42em; margin: 0 auto 2em; padding: 0 1em; }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) .textblock { text-align: center; margin-bottom: 2em; }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) h1 { font-size: 1.75em; margin: 0.5em 0; }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) .textblock p { margin: 0.5em auto; max-width: 34em; }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) .feld1 {
            padding: clamp(0.75em, 3vw, 1.5em); margin-bottom: 1em;
            border: 0.12em solid rgba(255, 255, 255, 0.35); border-radius: 1em;
            background: rgba(255, 255, 255, 0.05);
        }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) table { width: 100%; table-layout: fixed; border-spacing: 0 0.8em; text-align: center; }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) caption { font-size: 1.2em; font-weight: bold; margin-bottom: 0.5em; }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) .answer-column { width: 29%; }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) .arrow-column { width: 8%; }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) .number-column { width: 26%; }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) td { padding: 0; }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) .zahl { font-size: clamp(1.4em, 5vw, 2em); font-weight: bold; white-space: nowrap; }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) input {
            width: 100%; min-width: 0; min-height: 3em; padding: 0.5em 0.2em;
            border: 2px solid #999; border-radius: 0.5em;
            background: white; color: black; font: inherit; font-size: 1.2em; text-align: center;
        }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) a:focus-visible, :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) input:focus-visible { outline: 3px solid #8ac8ff; outline-offset: 4px; }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) .inhalt {
            display: block; padding: 0.5em; color: white; text-decoration: none; text-align: center;
            font-size: 1.2em; border-radius: 0.5em;
        }
        :where(html[data-lesson="html--ma_zr100_nachbarzahlen"], html[data-lesson="html--ma_zr10000_nachbarzahlen"], html[data-lesson="html--ma_zr1000_nachbarzahlen"]) .inhalt:hover { background: rgba(255, 255, 255, 0.12); }

:where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
		}

		:where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) section {
			width: 100%;
			margin-bottom: 2.5em;
		}

		:where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) .textblock {
			text-align: center;
			padding: 0 1em;
			margin-bottom: 1.5em;
		}

		:where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) .aufgaben-grid, :where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) .nav-grid {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) .aufgabe, :where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) .nav-button {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			width: 11em;
			min-height: 8em;
			padding: 1em;

			text-decoration: none;
			color: white;

			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;

			background: rgba(255, 255, 255, 0.05);

			box-sizing: border-box;

			transition:
				transform 0.2s ease,
				background 0.2s ease,
				border-color 0.2s ease;
		}

		:where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) .aufgabe:hover, :where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) .nav-button:hover {
			transform: scale(1.04);
			background: rgba(255, 255, 255, 0.12);
			border-color: rgba(255, 255, 255, 0.7);
		}

		:where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) table {
			border-collapse: separate;
			border-spacing: 0.35em;
			width: fit-content;
		}

		:where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) td {
			font-size: 1.8em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) input {
			width: 2.4em;
			font-size: 1em;
			text-align: center;
			color: black;
			background: yellow;
			border: 0.08em solid rgba(255, 255, 255, 0.5);
			border-radius: 0.4em;
			padding: 0.15em;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) .icon {
			font-size: 3em;
			margin-bottom: 0.3em;
		}

		:where(html[data-lesson="html--ma_1x1_2_zufallsaufgaben"], html[data-lesson="html--ma_1x1_10_zufallsaufgaben"], html[data-lesson="html--ma_1x1_5_zufallsaufgaben"]) .label {
			font-size: 1em;
			text-align: center;
			line-height: 1.3;
		}



:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) .aufgabenbereich {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			align-items: flex-start;
			gap: 1.5em;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 95vw;
			box-sizing: border-box;
			text-align: center;
			padding: 1em 1.5em;
			overflow-x: auto;
		}

		:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) .rechenkarte h3 {
			margin: 0 0 0.8em 0;
			font-size: 1.3em;
		}

		:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) table {
			border-collapse: separate;
			border-spacing: 0.35em 0.55em;
			margin: 0 auto;
		}

		:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) .zahl {
			font-size: 1.4em;
			font-weight: bold;
			min-width: 1.5em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 2.6em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			box-sizing: border-box;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}


		@media (max-width: 600px) {
:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) .rechenkarte {
				padding: 1em;
			}

			:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) .zahl {
				font-size: 1.15em;
			}

			:where(html[data-lesson="html--ma_zr20_aufgabenmuster"]) input {
				font-size: 0.8em;
				width: 2.4em;
			}
}

:where(html[data-lesson="html--ma_zr10_schuettelkaestchen_02"], html[data-lesson="html--ma_zr10_schuettelkaestchen_01"]) .shake {
			animation: shake 400ms ease-in-out;
		}

:where(html[data-lesson="html--mu_theorie_viertelnote"]) .notenkarte { max-width: 80%; margin-inline: auto; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .tempokarte { max-width: 920px; margin-inline: auto; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .notenflaeche { color: #111; background: #fff; border-radius: 16px; overflow: hidden; touch-action: none; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .ziehbar { cursor: grab; outline: none; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .ziehbar:active { cursor: grabbing; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .notenkopf:focus .kopf-form { stroke: #ff9800; stroke-width: 6; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .notenhals:focus .hals-form { stroke-width: 11; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .notenkopf.aktiv .kopf-form { fill: #ff9800; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .noten-markierung { fill: #ffeb3b; opacity: 0; transition: opacity .08s; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .notenkopf.spielt .noten-markierung { opacity: .75; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .notenhals.aktiv .hals-form { stroke: #ff9800; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .ziel-hilfe { opacity: 0; transition: opacity .15s; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .zieht-kopf .ziel-hilfe { opacity: .16; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .anleitung { max-width: 760px; margin-inline: auto; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .legende, :where(html[data-lesson="html--mu_theorie_viertelnote"]) .tempo-buttons, :where(html[data-lesson="html--mu_theorie_viertelnote"]) .freie-wahl { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1em; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .legende span::before { content: ''; display: inline-block; width: .8em; height: .8em; margin-right: .4em; border-radius: 50%; background: currentColor; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .tempo-button { min-width: 150px; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .tempo-button[disabled] { cursor: wait; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .tempo-anzeige { min-width: 5.5em; font-variant-numeric: tabular-nums; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .weiter-bereich { text-align: center; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) input[type="range"] { width: min(360px, 75vw); accent-color: #ff9800; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .taktanzeige { display: flex; justify-content: center; gap: .65em; min-height: 2.5em; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .schlag { width: 2.2em; height: 2.2em; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; transition: background .08s, color .08s; }
		:where(html[data-lesson="html--mu_theorie_viertelnote"]) .schlag.aktiv { color: #111; background: #ff9800; }
		@media (prefers-reduced-motion: reduce) {
:where(html[data-lesson="html--mu_theorie_viertelnote"]) .ziel-hilfe, :where(html[data-lesson="html--mu_theorie_viertelnote"]) .schlag { transition: none; }
}

:where(html[data-lesson="html--ma_zr20_ZUE_vorgaenger-zahl-nachfolger"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_vorgaenger-zahl-nachfolger"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			padding: 0 1em 2em 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_vorgaenger-zahl-nachfolger"]) .abschnitt-titel {
			text-align: center;
			margin-bottom: 2em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_vorgaenger-zahl-nachfolger"]) .abschnitt-titel h2 {
			margin: 0.3em 0;
			font-size: 2em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_vorgaenger-zahl-nachfolger"]) .abschnitt-titel p {
			font-size: 1.1em;
			color: #dddddd;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_vorgaenger-zahl-nachfolger"]) .aufgabe-box {
			background-color: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.15);
			border-radius: 1.2em;
			padding: 1.5em;
			width: min(95vw, 42em);
			box-sizing: border-box;
			overflow-x: auto;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_vorgaenger-zahl-nachfolger"]) .zeile {
			display: grid;
			grid-template-columns: 2.4em 1.2em 2.4em 1.2em 2.4em;
			column-gap: 0.6em;
			align-items: center;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_vorgaenger-zahl-nachfolger"]) .ueberschrift {
			font-size: 1.1em;
			font-weight: bold;
			text-align: center;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_vorgaenger-zahl-nachfolger"]) .pfeil {
			font-size: 1.1em;
			color: white;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_vorgaenger-zahl-nachfolger"]) .eingabe {
			width: 2.4em;
			height: 2.4em;
			border-radius: 0.5em;
			border: none;
			font-size: 1.1em;
			text-align: center;
			box-sizing: border-box;
			background: white;
			color: black;
			font-weight: bold;
			padding: 0;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_vorgaenger-zahl-nachfolger"]) .zahlfeld {
			width: 2.4em;
			height: 2.4em;
			display: flex;
			align-items: center;
			justify-content: center;
			background: white;
			color: black;
			border-radius: 0.5em;
			font-size: 1.2em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_vorgaenger-zahl-nachfolger"]) .link-button {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
			display: inline-block;
		}

:where(html[data-lesson="html--ma_zr1000_runden"]) *, :where(html[data-lesson="html--ma_zr1000_runden"]) { box-sizing: border-box; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) body {
            display: flex; flex-direction: column; min-height: 100vh; margin: 0;
            color: white; background: black; font-family: 'Grundschrift', Arial, sans-serif; line-height: 1.5;
        }
        :where(html[data-lesson="html--ma_zr1000_runden"]) .header-nav {
            display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; padding: 1em;
        }
        :where(html[data-lesson="html--ma_zr1000_runden"]) .header-nav a {
            display: flex; flex-direction: column; align-items: center;
            color: white; text-decoration: none; border-radius: 0.5em;
        }
        :where(html[data-lesson="html--ma_zr1000_runden"]) .header-icon { font-size: 3em; line-height: 1.3; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) main { flex: 1; width: 100%; max-width: 42em; margin: 0 auto 2em; padding: 0 1em; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) .textblock { text-align: center; margin-bottom: 2em; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) h1 { font-size: 1.75em; margin: 0.5em 0; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) .textblock p { margin: 0.5em auto; max-width: 34em; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) .feld1 {
            padding: clamp(0.75em, 3vw, 1.5em); margin-bottom: 1em;
            border: 0.12em solid rgba(255, 255, 255, 0.35); border-radius: 1em;
            background: rgba(255, 255, 255, 0.05);
        }
        :where(html[data-lesson="html--ma_zr1000_runden"]) table { width: 100%; table-layout: fixed; border-spacing: 0 0.8em; text-align: center; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) caption { font-size: 1.2em; font-weight: bold; margin-bottom: 0.5em; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) .answer-column { width: 29%; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) .arrow-column { width: 8%; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) .number-column { width: 26%; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) td { padding: 0; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) .zahl { font-size: clamp(1.4em, 5vw, 2em); font-weight: bold; white-space: nowrap; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) input {
            width: 100%; min-width: 0; min-height: 3em; padding: 0.5em 0.2em;
            border: 2px solid #999; border-radius: 0.5em;
            background: white; color: black; font: inherit; font-size: 1.2em; text-align: center;
        }
        :where(html[data-lesson="html--ma_zr1000_runden"]) a:focus-visible, :where(html[data-lesson="html--ma_zr1000_runden"]) input:focus-visible, :where(html[data-lesson="html--ma_zr1000_runden"]) button:focus-visible { outline: 3px solid #8ac8ff; outline-offset: 4px; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) .inhalt {
            display: block; padding: 0.5em; color: white; text-decoration: none; text-align: center;
            font-size: 1.2em; border-radius: 0.5em;
        }
        :where(html[data-lesson="html--ma_zr1000_runden"]) .inhalt:hover { background: rgba(255, 255, 255, 0.12); }
        :where(html[data-lesson="html--ma_zr1000_runden"]) th { font-size: 0.95em; overflow-wrap: anywhere; padding: 0.4em; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) td { padding: 0.25em; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) .actions { text-align: center; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) .loesen {
            min-height: 3em; padding: 0.75em 1.5em; border: 2px solid #999;
            border-radius: 0.75em; background: #222; color: white;
            font: inherit; font-weight: bold; cursor: pointer;
        }
        :where(html[data-lesson="html--ma_zr1000_runden"]) .loesen:hover { background: #333; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) .loesen:disabled { opacity: 0.7; cursor: default; }
        :where(html[data-lesson="html--ma_zr1000_runden"]) .progress { display: inline-block; padding: 0.5em 1em; border-radius: 2em; background: #222; }
        @media (max-width: 420px) {
:where(html[data-lesson="html--ma_zr1000_runden"]) input { font-size: 1em; }
            :where(html[data-lesson="html--ma_zr1000_runden"]) th { font-size: 0.8em; padding: 0.2em; }
            :where(html[data-lesson="html--ma_zr1000_runden"]) td { padding: 0.15em; }
            :where(html[data-lesson="html--ma_zr1000_runden"]) .zahl { font-size: 1.3em; }
}

:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .rechenkarte, :where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .beispielkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 90vw;
			box-sizing: border-box;
			text-align: center;
			padding: 1em 2em;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .rechenzeile {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			justify-content: center;
			gap: 0.4em;
			font-size: 1.4em;
			font-weight: bold;
			margin: 0.4em 0;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .zahl {
			min-width: 1.4em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 2.6em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) details {
			background-color: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.2);
			border-radius: 0.8em;
			padding: 1em;
			max-width: 95vw;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) summary {
			cursor: pointer;
			font-size: 1.2em;
			font-weight: bold;
			text-align: center;
			margin-bottom: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .werkzeug-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .werkzeug {
			font-size: 1.4em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 2.7em;
			height: 2.7em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .werkzeug.aktiv {
			background-color: yellow;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .zahlenfeld-wrapper {
			overflow-x: auto;
			max-width: 95vw;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .zahlenfeld {
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			gap: 0.7em;
			row-gap: 1.4em;
			min-width: max-content;
			position: relative;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .zahlenfeld::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: calc((3.2em * 5) + (0.7em * 4) + 1em + 0.35em);
			width: 0.18em;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .zahlenfeld::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: calc(3.2em + (1.4em / 2) + 1em);
			height: 0.18em;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .abakus {
			font-size: 1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 3.2em;
			height: 3.2em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			z-index: 2;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr20_analogieaufgaben"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			box-sizing: border-box;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}


:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) *, :where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) {
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) .app_nav {
			width: clamp(3.5em, 10vw, 5em);
			height: clamp(3.5em, 10vw, 5em);
			object-fit: cover;
			border-radius: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) figcaption {
			text-align: center;
			font-size: 1em;
			margin-top: 0.3em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 1em;
			flex: 1;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) article {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) .feld1 {
			background: #1b1b1b;
			border: 0.15em solid white;
			border-radius: 1em;
			padding: 1em;
			text-align: center;
			max-width: 95vw;
			overflow: auto;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) h2 {
			font-size: clamp(1.8em, 5vw, 3em);
			margin: 0.3em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) p {
			font-size: clamp(1.2em, 4vw, 2em);
			margin: 0.3em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) .zahl {
			font-size: clamp(2em, 8vw, 5em);
			font-weight: bold;
			padding: 0.1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) .input {
			width: 2.8em;
			font-size: clamp(1em, 6vw, 3em);
			text-align: center;
			border-radius: 0.3em;
			border: 0.08em solid black;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) details {
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) summary {
			cursor: pointer;
			font-size: clamp(1.3em, 4vw, 2em);
			font-weight: bold;
			margin-bottom: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-bottom: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) .column {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.3em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) .werkzeug, :where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) .auswahl {
			min-width: 4em;
			min-height: 3em;
			border-radius: 0.5em;
			border: 0.1em solid black;
			background: #eeeeee;
			font-size: 1em;
			cursor: pointer;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) .hunderter-wrapper {
			max-width: 95vw;
			overflow: auto;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) .hunderterfeld {
			border-collapse: collapse;
			margin: auto;
			background: white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) .hunderterfeld td {
			padding: 0;
			border: 0.05em solid #999999;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) .hunderterfeld tr:nth-child(5) td {
			border-bottom: 0.25em solid black;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) .hunderterfeld td:nth-child(5) {
			border-right: 0.25em solid black;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) .abakus {
			width: clamp(2em, 7vw, 3.2em);
			height: clamp(2em, 7vw, 3.2em);
			background: #eeeeee;
			border: none;
			font-size: 1.2em;
			cursor: pointer;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_viele_aufgaben"]) .inhalt {
			display: inline-block;
			color: white;
			background: #1b1b1b;
			border: 0.15em solid white;
			border-radius: 1em;
			padding: 1em;
			text-decoration: none;
			font-size: clamp(1.2em, 4vw, 2em);
		}

:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .info-bereich p {
			max-width: 42em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .werkzeug-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .werkzeug {
			font-size: 1.4em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 2.7em;
			height: 2.7em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
			cursor: pointer;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .werkzeug.aktiv {
			background-color: yellow;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .zahlenfeld-wrapper {
			overflow-x: auto;
			max-width: 95vw;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .zahlenfeld {
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			gap: 0.7em;
			row-gap: 1.4em;
			min-width: max-content;
			position: relative;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .zahlenfeld::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: calc((3.2em * 5) + (0.7em * 4) + 1em + 0.35em);
			width: 0.18em;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .zahlenfeld::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: calc(3.2em + (1.4em / 2) + 1em);
			height: 0.18em;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .abakus {
			font-size: 1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 3.2em;
			height: 3.2em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			z-index: 2;
			cursor: pointer;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .kartenbereich {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			align-items: stretch;
			gap: 1.5em;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 94vw;
			box-sizing: border-box;
			text-align: center;
			padding: 1em 1.5em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .rechenkarte h3 {
			margin: 0 0 0.7em 0;
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .rechentabelle {
			border-collapse: collapse;
			margin: 0 auto;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .rechentabelle td {
			padding: 0.25em;
			text-align: center;
			vertical-align: middle;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .rechentabelle .trennlinie td {
			border-bottom: 0.12em solid black;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .zahl {
			min-width: 1.4em;
			text-align: center;
			font-size: 1.4em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .grau {
			background-color: #bbbbbb;
			border-radius: 0.3em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .pfeil {
			font-size: 1.4em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 2.6em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_addierenbis20_felder"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			box-sizing: border-box;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}



:where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]):root {
            --bg: #000000;
            --bg-soft: #0f0f10;
            --card: #141416;
            --card-hover: #1d1d20;
            --line: rgba(255, 255, 255, 0.08);
            --text: #f3f3f3;
            --muted: #b8b8bd;
            --accent: #ffffff;
            --shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
            --radius: 22px;
            --radius-small: 16px;
            --max-width: 1100px;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) *, :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"])html {
            scroll-behavior: smooth;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) body {
            min-height: 100vh;
            font-family: 'Grundschrift', Arial, sans-serif;
            background:
                radial-gradient(circle at top, rgba(255, 255, 255, 0.05), transparent 30%),
                linear-gradient(180deg, #050505 0%, #000000 100%);
            color: var(--text);
            display: flex;
            flex-direction: column;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) img {
            max-width: 100%;
            display: block;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) a {
            color: inherit;
            text-decoration: none;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) button, :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) input, :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) select {
            font: inherit;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .page {
            width: min(100% - 32px, var(--max-width));
            margin: 0 auto;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .site-header {
            padding: 24px 0 12px 0;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .header-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 12px 0;
            flex-wrap: wrap;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .brand {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .brand-mark {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: linear-gradient(145deg, #1a1a1d, #090909);
            border: 1px solid var(--line);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow);
            overflow: hidden;
            cursor: pointer;
            flex-shrink: 0;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .brand-mark img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .brand-text h1 {
            font-size: clamp(1.5rem, 2vw, 2rem);
            letter-spacing: 0.14em;
            font-weight: 700;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .brand-text p {
            margin-top: 4px;
            color: var(--muted);
            font-size: 0.95rem;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .top-nav {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .top-nav a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 48px;
            padding: 12px 16px;
            border-radius: 14px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
            transition: 0.2s ease;
            color: var(--text);
            font-weight: 700;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .top-nav a:hover {
            transform: translateY(-2px);
            background: var(--card-hover);
            border-color: rgba(255, 255, 255, 0.16);
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .section {
            padding: 18px 0 24px 0;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .section-head {
            margin-bottom: 20px;
            text-align: center;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .section-head :is(h1, h2), :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .section-head h3 {
            font-size: clamp(1.4rem, 2vw, 2rem);
            margin-bottom: 8px;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .section-head p {
            color: var(--muted);
            line-height: 1.5;
            max-width: 760px;
            margin: 0 auto;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .panel {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
            border: 1px solid var(--line);
            border-radius: var(--radius-small);
            box-shadow: var(--shadow);
            padding: 22px;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .panel + .panel {
            margin-top: 18px;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .notation-scroll {
            overflow-x: auto;
            padding-bottom: 8px;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .notation-top {
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
            min-width: max-content;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .notation-top svg, :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .notation-top span {
            display: block;
            flex: 0 0 auto;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .notation-bottom {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            min-width: max-content;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .select-spacer-start {
            width: 100px;
            flex: 0 0 100px;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .select-spacer-middle {
            width: 40px;
            flex: 0 0 40px;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .select-spacer-end {
            width: 50px;
            flex: 0 0 50px;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .select-wrap {
            width: 50px;
            flex: 0 0 50px;
            display: flex;
            justify-content: center;
            padding-top: 12px;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .note-select {
            width: 50px;
            padding: 8px 4px;
            border-radius: 10px;
            border: 1px solid var(--line);
            background: #111214;
            color: var(--text);
            text-align: center;
            box-shadow: var(--shadow);
            font-size: 0.9rem;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .info-panel {
            text-align: center;
        }

        :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .info-panel p {
            color: var(--muted);
            line-height: 1.6;
        }




        @media (max-width: 900px) {
:where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .header-bar {
                flex-direction: column;
                align-items: flex-start;
            }
}

        @media (max-width: 700px) {
:where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .top-nav {
                width: 100%;
            }

            :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .top-nav a {
                flex: 1 1 calc(50% - 10px);
            }

            :where(html[data-lesson="html--mu_lied_eigen_v_2_takte"]) .panel {
                padding: 16px;
            }
}

:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) *, :where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) {
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) .aufgabenbereich {
			display: flex;
			flex-flow: row wrap;
			gap: 1.5em;
			justify-content: center;
			align-items: flex-start;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 95vw;
			text-align: center;
			padding: 1em 1.5em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) .rechenkarte h3 {
			margin-top: 0;
			margin-bottom: 0.7em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) .aufgabentabelle {
			border-collapse: collapse;
			font-size: 1.35em;
			font-weight: bold;
			margin: 0 auto;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) .aufgabentabelle td {
			padding: 0.25em 0.35em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) .zahl {
			min-width: 1.7em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 3.2em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_aufgabenmuster"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}

:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) *, :where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) {
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) body {
			margin: 0;
			min-height: 100vh;
			font-family: 'Grundschrift', Arial, sans-serif;
			color: white;
			background: black;
			display: flex;
			flex-direction: column;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 5.5em;
			height: 5.5em;
			border: 2px solid white;
			border-radius: 1em;
			color: white;
			text-decoration: none;
			background: #111;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) header span:first-child {
			font-size: 2em;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) main {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 1em;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) h1 {
			text-align: center;
			font-size: clamp(2rem, 8vw, 4rem);
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .karte {
			width: min(95vw, 1100px);
			background: white;
			color: black;
			border-radius: 1em;
			padding: 1.5em;
			box-shadow: 0 0 1em rgba(255,255,255,0.25);
			text-align: center;
			margin-bottom: 1.5em;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .wortspeicher {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 0.7em;
			margin: 1em 0;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .koerper {
			background: #e9f3ff;
			border: 2px solid #1d5f99;
			border-radius: 0.8em;
			padding: 0.6em 0.8em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .aufgabe {
			background: #f3f3f3;
			border: 2px solid #ccc;
			border-radius: 1em;
			padding: 1em;
			margin: 1em 0;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .aufgaben-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
			gap: 1em;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .gegenstand {
			margin: 0.2em 0;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .gegenstand img {
			width: 140px;
			height: 140px;
			object-fit: contain;
			display: block;
			margin: 0 auto;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .name {
			font-size: 1.4rem;
			font-weight: bold;
			margin-bottom: 0.5em;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) select, :where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) input {
			font-size: 1.1rem;
			padding: 0.6em;
			border-radius: 0.6em;
			border: 2px solid #333;
			width: min(90%, 360px);
			text-align: center;
			margin: 0.4em;
			background: white;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .eingabe-zeile {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 0.5em;
			margin-top: 0.5em;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .eingabe-zeile input {
			width: 150px;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) button {
			font-size: 1.1rem;
			padding: 0.8em 1.2em;
			border: none;
			border-radius: 0.8em;
			cursor: pointer;
			font-weight: bold;
			background: #ffd43b;
			color: black;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) button:hover {
			background: #ffec99;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .test-beenden {
			background: #51cf66;
			font-size: 1.3rem;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .nochmal {
			background: #74c0fc;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .koerper-svg, :where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .netz-svg, :where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .baukoerper-svg {
			width: 140px;
			height: 140px;
			margin: 0.5em auto 1em auto;
			display: block;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .korrektur-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
			gap: 1em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .korrektur-box {
			padding: 1em;
			border-radius: 1em;
			background: #f3f3f3;
			border: 2px solid #cccccc;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .korrektur-richtig {
			color: green;
			font-weight: bold;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .korrektur-falsch {
			color: red;
			font-weight: bold;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .checkboxen {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 0.5em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .checkboxen label {
			background: white;
			border: 2px solid #333;
			border-radius: 0.6em;
			padding: 0.4em 0.6em;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .checkboxen input {
			width: auto;
			margin: 0 0.3em 0 0;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .bauplan-optionen {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 0.8em;
			margin: 1em 0;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .bauplan-option {
			background: white;
			border: 2px solid #333;
			border-radius: 0.6em;
			padding: 0.5em;
			min-width: 105px;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .bauplan-mini, :where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .bauplan-input {
			display: grid;
			grid-template-columns: repeat(3, 34px);
			justify-content: center;
			gap: 0;
			margin: 0.4em auto;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .bauplan-mini span, :where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .bauplan-input input {
			width: 34px;
			height: 34px;
			border: 1px solid #333;
			display: flex;
			align-items: center;
			justify-content: center;
			background: white;
			font-weight: bold;
			margin: 0;
			padding: 0;
			border-radius: 0;
			font-size: 1rem;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .bauplan-input input {
			text-align: center;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) table {
			width: 100%;
			border-collapse: collapse;
			margin-top: 1em;
			font-size: 1rem;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) th {
			background: #222;
			color: white;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) td, :where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) th {
			border: 1px solid #999;
			padding: 0.6em;
			text-align: left;
			vertical-align: top;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .text-richtig {
			color: green;
			font-weight: bold;
		}

		:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .text-falsch {
			color: red;
			font-weight: bold;
		}

		@media (max-width: 600px) {
:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) table {
				font-size: 0.85rem;
			}

			:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) td, :where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) th {
				padding: 0.4em;
			}

			:where(html[data-lesson="html--geometrische_koerper_lernbolt_aktualisiert"]) .eingabe-zeile input {
				width: 100%;
			}
}

:where(html[data-lesson="html--ma_zr10000_runden"]) *, :where(html[data-lesson="html--ma_zr10000_runden"]) { box-sizing: border-box; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) body {
            display: flex; flex-direction: column; min-height: 100vh; margin: 0;
            color: white; background: black; font-family: 'Grundschrift', Arial, sans-serif; line-height: 1.5;
        }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .header-nav {
            display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; padding: 1em;
        }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .header-nav a {
            display: flex; flex-direction: column; align-items: center;
            color: white; text-decoration: none; border-radius: 0.5em;
        }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .header-icon { font-size: 3em; line-height: 1.3; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) main { flex: 1; width: 100%; max-width: 42em; margin: 0 auto 2em; padding: 0 1em; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .textblock { text-align: center; margin-bottom: 2em; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) h1 { font-size: 1.75em; margin: 0.5em 0; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .textblock p { margin: 0.5em auto; max-width: 34em; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .feld1 {
            padding: clamp(0.75em, 3vw, 1.5em); margin-bottom: 1em;
            border: 0.12em solid rgba(255, 255, 255, 0.35); border-radius: 1em;
            background: rgba(255, 255, 255, 0.05);
        }
        :where(html[data-lesson="html--ma_zr10000_runden"]) table { width: 100%; table-layout: fixed; border-spacing: 0 0.8em; text-align: center; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) caption { font-size: 1.2em; font-weight: bold; margin-bottom: 0.5em; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .answer-column { width: 29%; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .arrow-column { width: 8%; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .number-column { width: 26%; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) td { padding: 0; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .zahl { font-size: clamp(1.4em, 5vw, 2em); font-weight: bold; white-space: nowrap; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) input {
            width: 100%; min-width: 0; min-height: 3em; padding: 0.5em 0.2em;
            border: 2px solid #999; border-radius: 0.5em;
            background: white; color: black; font: inherit; font-size: 1.2em; text-align: center;
        }
        :where(html[data-lesson="html--ma_zr10000_runden"]) a:focus-visible, :where(html[data-lesson="html--ma_zr10000_runden"]) input:focus-visible, :where(html[data-lesson="html--ma_zr10000_runden"]) button:focus-visible { outline: 3px solid #8ac8ff; outline-offset: 4px; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .inhalt {
            display: block; padding: 0.5em; color: white; text-decoration: none; text-align: center;
            font-size: 1.2em; border-radius: 0.5em;
        }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .inhalt:hover { background: rgba(255, 255, 255, 0.12); }
        :where(html[data-lesson="html--ma_zr10000_runden"]) th { font-size: 0.95em; overflow-wrap: anywhere; padding: 0.4em; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) td { padding: 0.25em; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .actions { text-align: center; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .loesen {
            min-height: 3em; padding: 0.75em 1.5em; border: 2px solid #999;
            border-radius: 0.75em; background: #222; color: white;
            font: inherit; font-weight: bold; cursor: pointer;
        }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .loesen:hover { background: #333; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .loesen:disabled { opacity: 0.7; cursor: default; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .progress { display: inline-block; padding: 0.5em 1em; border-radius: 2em; background: #222; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .round-number, :where(html[data-lesson="html--ma_zr10000_runden"]) .round-answer { width: 42%; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .round-sign { width: 16%; }
        :where(html[data-lesson="html--ma_zr10000_runden"]) .example { font-size: 0.8em; font-weight: normal; }

:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 95vw;
			box-sizing: border-box;
			text-align: center;
			padding: 1.2em 2em;
			overflow-x: auto;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) table {
			border-collapse: collapse;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) td, :where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) th {
			padding: 0.3em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) .zahl {
			font-size: 1,6em;
			font-weight: bold;
			min-width: 1.4em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) input {
			font-size: 1.2em;
			font-weight: normal;
			width: 3em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) .beispielkarte {
			background-color: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.2);
			border-radius: 0.8em;
			padding: 1em 2em;
			max-width: 95vw;
			box-sizing: border-box;
			overflow-x: auto;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) caption {
			color: white;
			font-size: 1.1em;
			font-weight: bold;
			margin-bottom: 0.8em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_dreizahlenvieraufgaben"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			box-sizing: border-box;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}



:where(html[data-lesson="html--mu_theorie_notenhals"]) .notenkarte { max-width: 80%; margin-inline: auto; }
		:where(html[data-lesson="html--mu_theorie_notenhals"]) .notenflaeche { color: #111; background: #fff; border-radius: 16px; overflow: hidden; touch-action: none; }
		:where(html[data-lesson="html--mu_theorie_notenhals"]) .ziehbar { cursor: grab; outline: none; }
		:where(html[data-lesson="html--mu_theorie_notenhals"]) .ziehbar:active { cursor: grabbing; }
		:where(html[data-lesson="html--mu_theorie_notenhals"]) .notenkopf:focus .kopf-form { stroke: #ff9800; stroke-width: 6; }
		:where(html[data-lesson="html--mu_theorie_notenhals"]) .notenhals:focus .hals-form { stroke-width: 11; }
		:where(html[data-lesson="html--mu_theorie_notenhals"]) .notenkopf.aktiv .kopf-form { fill: #ff9800; }
		:where(html[data-lesson="html--mu_theorie_notenhals"]) .notenhals.aktiv .hals-form { stroke: #ff9800; }
		:where(html[data-lesson="html--mu_theorie_notenhals"]) .ziel-hilfe { opacity: 0; transition: opacity .15s; }
		:where(html[data-lesson="html--mu_theorie_notenhals"]) .zieht-kopf .ziel-hilfe { opacity: .16; }
		:where(html[data-lesson="html--mu_theorie_notenhals"]) .anleitung { max-width: 760px; margin-inline: auto; }
		:where(html[data-lesson="html--mu_theorie_notenhals"]) .legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5em; }
		:where(html[data-lesson="html--mu_theorie_notenhals"]) .legende span::before { content: ''; display: inline-block; width: .8em; height: .8em; margin-right: .4em; border-radius: 50%; background: currentColor; }
		@media (prefers-reduced-motion: reduce) {
:where(html[data-lesson="html--mu_theorie_notenhals"]) .ziel-hilfe { transition: none; }
}

:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .info-bereich p {
			max-width: 42em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .werkzeug-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .werkzeug {
			font-size: 1.4em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 2.7em;
			height: 2.7em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .werkzeug.aktiv {
			background-color: yellow;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .zahlenfeld-wrapper {
			overflow-x: auto;
			max-width: 95vw;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .zahlenfeld {
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			gap: 0.7em;
			row-gap: 1.4em;
			min-width: max-content;
			position: relative;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .zahlenfeld::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: calc((3.2em * 5) + (0.7em * 4) + 1em + 0.35em);
			width: 0.18em;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .zahlenfeld::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: calc(3.2em + (1.4em / 2) + 1em);
			height: 0.18em;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .abakus {
			font-size: 1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: 3.2em;
			height: 3.2em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			z-index: 2;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .kartenbereich {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.5em;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 94vw;
			box-sizing: border-box;
			text-align: center;
			padding: 1em 1.4em;
			overflow-x: auto;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .rechenkarte h3 {
			margin: 0 0 0.8em 0;
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .rechenzeile {
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			justify-content: center;
			gap: 0.35em;
			font-size: 1.35em;
			font-weight: bold;
			margin: 0.35em 0;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .zahl {
			min-width: 1.4em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .grau {
			background-color: #bbbbbb;
			border-radius: 0.3em;
			padding: 0.1em 0.2em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 2.6em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .pfeilzeile {
			font-size: 1.2em;
			color: #333333;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_subtrahierenbis20_felder"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			box-sizing: border-box;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}


:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 95vw;
			box-sizing: border-box;
			text-align: center;
			padding: 1.2em 2em;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) table {
			border-collapse: collapse;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) td {
			padding: 0.3em;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) .zahl {
			font-size: 1.6em;
			font-weight: bold;
			min-width: 1.4em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) input {
			font-size: 1.1em;
			font-weight: bold;
			width: 2.8em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) .beispielkarte {
			background-color: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.2);
			border-radius: 0.8em;
			padding: 1em 2em;
			max-width: 95vw;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) caption {
			color: white;
			font-size: 1.1em;
			font-weight: bold;
			margin-bottom: 0.8em;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr20_umkehraufgaben"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			box-sizing: border-box;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}



:where(html[data-lesson="html--mu_theorie_notensystem"]) #fertig > .feuerwerk { z-index: 2; }

:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) *, :where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) {
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .info-bereich {
			margin-bottom: 1.5em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .rechenkarte, :where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .hilfe-bereich, :where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .zerlegungskarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 95vw;
			text-align: center;
			padding: 1em 1.5em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .hilfe-bereich {
			background-color: rgba(255, 255, 255, 0.08);
			color: white;
			border: 0.08em solid rgba(255, 255, 255, 0.2);
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .rechenzeile {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			justify-content: center;
			gap: 0.4em;
			font-size: 1.6em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .zahl {
			min-width: 1.7em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 3.2em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-bottom: 0.8em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .werkzeug-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .werkzeug, :where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .auswahl {
			font-size: 1.1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			min-width: 3.6em;
			min-height: 2.7em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .werkzeug {
			font-size: 1.4em;
			width: 2.7em;
			height: 2.7em;
			min-width: 0;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .werkzeug.aktiv, :where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .auswahl.aktiv {
			background-color: yellow;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .zahlenfeld-wrapper {
			overflow: auto;
			max-width: 95vw;
			max-height: 70vh;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .zahlenfeld-tabelle {
			border-collapse: collapse;
			margin: 0 auto;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .zahlenfeld-tabelle td {
			padding: 0;
			border: 0.08em solid transparent;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .zahlenfeld-tabelle tr:nth-child(5) td {
			border-bottom: 0.18em solid rgba(255, 255, 255, 0.7);
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .zahlenfeld-tabelle td:nth-child(5) {
			border-right: 0.18em solid rgba(255, 255, 255, 0.7);
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .abakus {
			font-size: 0.9em;
			border: 0.08em solid black;
			border-radius: 0.35em;
			width: 2.4em;
			height: 2.4em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .matheaufgabe {
			border-collapse: collapse;
			font-size: 1.3em;
			margin: 0 auto;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .matheaufgabe td {
			padding: 0.25em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr100_MZUE_subtrahierenbis100_2Z_1Z_felder"], html[data-lesson="html--ma_zr100_MZUE_addierenbis100_2Z_1Z_felder"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}

:where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) *, :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) { box-sizing: border-box; }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) body {
            display: flex; flex-direction: column; min-height: 100vh; margin: 0;
            color: white; background: black; font-family: 'Grundschrift', Arial, sans-serif; line-height: 1.5;
        }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) .header-nav {
            display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; padding: 1em;
        }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) .header-nav a {
            display: flex; flex-direction: column; align-items: center;
            color: white; text-decoration: none; border-radius: 0.5em;
        }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) .header-icon { font-size: 3em; line-height: 1.3; }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) main { flex: 1; width: 100%; max-width: 42em; margin: 0 auto 2em; padding: 0 1em; }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) .textblock { text-align: center; margin-bottom: 2em; }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) h1 { font-size: 1.75em; margin: 0.5em 0; }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) .textblock p { margin: 0.5em auto; max-width: 34em; }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) .feld1 {
            padding: clamp(0.75em, 3vw, 1.5em); margin-bottom: 1em;
            border: 0.12em solid rgba(255, 255, 255, 0.35); border-radius: 1em;
            background: rgba(255, 255, 255, 0.05);
        }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) table { width: 100%; table-layout: fixed; border-spacing: 0 0.8em; text-align: center; }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) caption { font-size: 1.2em; font-weight: bold; margin-bottom: 0.5em; }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) .answer-column { width: 29%; }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) .arrow-column { width: 8%; }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) .number-column { width: 26%; }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) td { padding: 0; }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) .zahl { font-size: clamp(1.4em, 5vw, 2em); font-weight: bold; white-space: nowrap; }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) input {
            width: 100%; min-width: 0; min-height: 3em; padding: 0.5em 0.2em;
            border: 2px solid #999; border-radius: 0.5em;
            background: white; color: black; font: inherit; font-size: 1.2em; text-align: center;
        }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) a:focus-visible, :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) input:focus-visible { outline: 3px solid #8ac8ff; outline-offset: 4px; }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) .inhalt {
            display: block; padding: 0.5em; color: white; text-decoration: none; text-align: center;
            font-size: 1.2em; border-radius: 0.5em;
        }
        :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) .inhalt:hover { background: rgba(255, 255, 255, 0.12); }
        @media (max-width: 400px) {
:where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) input { font-size: 1em; }
            :where(html[data-lesson="html--ma_zr100000_nachbarzahlen"]) .zahl { font-size: 1.2em; }
}

:where(html[data-lesson="html--impressum"]):root {
            --bg: #000000;
            --card: #141416;
            --card-hover: #1d1d20;
            --line: rgba(255,255,255,0.08);
            --text: #f3f3f3;
            --muted: #b8b8bd;
            --shadow: 0 12px 30px rgba(0,0,0,0.35);
            --radius: 22px;
            --radius-small: 16px;
            --max-width: 1100px;
        }

        :where(html[data-lesson="html--impressum"]) *, :where(html[data-lesson="html--impressum"]) { margin:0; padding:0; box-sizing:border-box; }

        :where(html[data-lesson="html--impressum"]) body {
            font-family: 'Grundschrift', Arial, sans-serif;
            background: linear-gradient(180deg,#050505,#000);
            color: var(--text);
            min-height:100vh;
            display:flex;
            flex-direction:column;
        }

        :where(html[data-lesson="html--impressum"]) a { color: inherit; text-decoration: none; }

        :where(html[data-lesson="html--impressum"]) .page {
            width: min(100% - 32px, var(--max-width));
            margin: 0 auto;
        }

        :where(html[data-lesson="html--impressum"]) .site-header { padding:24px 0 12px; }

        :where(html[data-lesson="html--impressum"]) .header-bar {
            display:flex;
            justify-content:space-between;
            flex-wrap:wrap;
            gap:16px;
        }

        :where(html[data-lesson="html--impressum"]) .brand h1 { letter-spacing:0.14em; }

        :where(html[data-lesson="html--impressum"]) .top-nav {
            display:flex;
            gap:10px;
            flex-wrap:wrap;
        }

        :where(html[data-lesson="html--impressum"]) .top-nav a {
            padding:10px 14px;
            border-radius:12px;
            border:1px solid var(--line);
            background: rgba(255,255,255,0.04);
        }

        :where(html[data-lesson="html--impressum"]) .section {
            padding:20px 0 40px;
        }

        :where(html[data-lesson="html--impressum"]) .grid {
            display:grid;
            gap:18px;
            grid-template-columns: repeat(2,1fr);
        }

        :where(html[data-lesson="html--impressum"]) .card {
            background: rgba(255,255,255,0.04);
            border:1px solid var(--line);
            border-radius: var(--radius-small);
            padding:22px;
            box-shadow: var(--shadow);
        }

        :where(html[data-lesson="html--impressum"]) .card.wide { grid-column:1 / -1; }

        :where(html[data-lesson="html--impressum"]) .card h3 {
            margin-bottom:12px;
        }

        :where(html[data-lesson="html--impressum"]) .card p {
            color: var(--muted);
            line-height:1.6;
        }


        @media(max-width:800px) {
:where(html[data-lesson="html--impressum"]) .grid { grid-template-columns:1fr; }
}

:where(html[data-lesson="html--mu_theorie_notenkopf"]) #fertig { position: relative; overflow: hidden; }
		:where(html[data-lesson="html--mu_theorie_notenkopf"]) #fertig > #fireworks { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
		:where(html[data-lesson="html--mu_theorie_notenkopf"]) .notenkarte { max-width: 80%; margin-inline: auto; }
		:where(html[data-lesson="html--mu_theorie_notenkopf"]) .notenflaeche { color: #111; background: #fff; border-radius: 16px; overflow: hidden; touch-action: none; }
		:where(html[data-lesson="html--mu_theorie_notenkopf"]) .notenkopf { cursor: grab; outline: none; }
		:where(html[data-lesson="html--mu_theorie_notenkopf"]) .notenkopf:active { cursor: grabbing; }
		:where(html[data-lesson="html--mu_theorie_notenkopf"]) .notenkopf:focus .kopf-form { stroke: #ff9800; stroke-width: 5; }
		:where(html[data-lesson="html--mu_theorie_notenkopf"]) .notenkopf.aktiv .kopf-form { fill: #ff9800; }
		:where(html[data-lesson="html--mu_theorie_notenkopf"]) .ziel-hilfe { opacity: 0; transition: opacity .15s; }
		:where(html[data-lesson="html--mu_theorie_notenkopf"]) .zieht .ziel-hilfe { opacity: .18; }
		:where(html[data-lesson="html--mu_theorie_notenkopf"]) .anleitung { max-width: 700px; margin-inline: auto; }
		@media (prefers-reduced-motion: reduce) {
:where(html[data-lesson="html--mu_theorie_notenkopf"]) .ziel-hilfe { transition: none; }
}

:where(html[data-lesson="html--mu_theorie_c-dur-tonleiter"]) .notenkarte { max-width: 80%; margin-inline: auto; }
		:where(html[data-lesson="html--mu_theorie_c-dur-tonleiter"]) .notenflaeche { color: #111; background: #fff; border-radius: 16px; overflow-x: auto; }
		:where(html[data-lesson="html--mu_theorie_c-dur-tonleiter"]) .notenflaeche svg { display: block; width: 100%; min-width: 720px; height: auto; }
		:where(html[data-lesson="html--mu_theorie_c-dur-tonleiter"]) .weiter { min-width: 9em; }

:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .rechenkarte, :where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .hilfekarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 95vw;
			box-sizing: border-box;
			text-align: center;
			padding: 1.2em 2em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) table {
			border-collapse: collapse;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) td {
			padding: 0.3em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .zahl {
			font-size: 1.6em;
			font-weight: bold;
			min-width: 1.4em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) input {
			font-size: 1.1em;
			font-weight: bold;
			width: 2.8em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) details {
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) summary {
			cursor: pointer;
			font-size: 1.2em;
			font-weight: bold;
			margin-bottom: 1em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .werkzeugbereich {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin: 1em 0;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .werkzeugbox {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.3em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .werkzeug {
			font-size: 1.5em;
			width: 2.5em;
			height: 2.5em;
			border-radius: 0.5em;
			border: 0.08em solid black;
			background-color: #eeeeee;
			cursor: pointer;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .abakus-wrapper {
			overflow-x: auto;
			max-width: 90vw;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .abakus {
			width: 2.4em;
			height: 2.4em;
			border: 0.08em solid black;
			background-color: #eeeeee;
			color: transparent;
			border-radius: 0.25em;
			cursor: pointer;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .border_right_thick {
			border-right: 0.25em solid black;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .beispielkarte {
			background-color: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.2);
			border-radius: 0.8em;
			padding: 1em 2em;
			max-width: 95vw;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) caption {
			color: white;
			font-size: 1.1em;
			font-weight: bold;
			margin-bottom: 0.8em;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr20_ZUE_umkehraufgaben"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			box-sizing: border-box;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}



:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) *, :where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) {
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .info-bereich {
			margin-bottom: 1.5em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .info-bereich p {
			max-width: 42em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.3em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .werkzeug-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .werkzeug, :where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .auswahl {
			font-size: 1.2em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			min-width: 3em;
			height: 2.7em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .werkzeug.aktiv, :where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .auswahl.aktiv {
			background-color: yellow;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .zahlenfeld-wrapper {
			overflow: auto;
			max-width: 95vw;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .zahlenfeld {
			--feld: 2.25em;
			--luecke: 0.45em;

			display: grid;
			grid-template-columns: repeat(10, var(--feld));
			gap: var(--luecke);
			min-width: max-content;
			position: relative;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .zahlenfeld::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: calc(1em + (var(--feld) * 5) + (var(--luecke) * 4.5));
			width: 0.18em;
			background-color: rgba(255, 255, 255, 0.75);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .zahlenfeld::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: calc(1em + (var(--feld) * 5) + (var(--luecke) * 4.5));
			height: 0.18em;
			background-color: rgba(255, 255, 255, 0.75);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .abakus {
			font-size: 1em;
			border: 0.08em solid black;
			border-radius: 0.35em;
			width: var(--feld);
			height: var(--feld);
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			position: relative;
			z-index: 2;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 90vw;
			text-align: center;
			padding: 1em 2em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .rechenzeile {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			justify-content: center;
			gap: 0.4em;
			font-size: 1.4em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .zahl {
			min-width: 1.8em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 3.4em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_addierenbis100_felder"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}


:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) *, :where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) {
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) main {
			min-height: 95vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .info-bereich {
			margin-bottom: 1.5em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .fortschrittssterne {
			display: flex;
			justify-content: center;
			gap: 0.6em;
			margin-top: 1em;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .fortschrittsstern {
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.2em;
			height: 1.3em;
			font-size: 2.4em;
			line-height: 1;
			color: #aaa;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .fortschrittsstern.geschafft {
			color: #ffd54a;
			text-shadow: 0 0 0.3em rgba(255, 213, 74, 0.65);
			animation: geschafft 1100ms ease-out;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .fortschrittsstern.geschafft::before, :where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .fortschrittsstern.geschafft::after {
			content: "✦";
			position: absolute;
			font-size: 0.45em;
			color: #fff5bc;
			text-shadow: 0 0 0.4em #ffd54a, 0 0 0.8em #ffd54a;
			pointer-events: none;
			opacity: 0;
			animation: sternfunkeln 1000ms ease-out;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .fortschrittsstern.geschafft::before {
			top: 0;
			left: -0.15em;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .fortschrittsstern.geschafft::after {
			right: -0.15em;
			bottom: 0;
			animation-delay: 150ms;
		}
		@media (prefers-reduced-motion: reduce) {
:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .fortschrittsstern.geschafft, :where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .fortschrittsstern.geschafft::before, :where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .fortschrittsstern.geschafft::after { animation: none; }
}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .aufgabenbereich {
			display: flex;
			gap: 1.5em;
			align-items: flex-start;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 95vw;
			text-align: center;
			padding: 1em 1.5em;
			margin: 0 auto 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .rechenzeile {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			justify-content: center;
			gap: 0.4em;
			font-size: 1.6em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .zahl {
			min-width: 1.7em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 3.2em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .hilfe-bereich {
			background-color: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.2);
			border-radius: 0.8em;
			padding: 1em;
			max-width: 95vw;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .hilfe-bereich p {
			text-align: center;
			font-weight: bold;
			margin-top: 0;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-bottom: 0.8em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .werkzeug-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .werkzeug, :where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .auswahl {
			font-size: 1.1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			min-width: 3.6em;
			min-height: 2.7em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .werkzeug {
			font-size: 1.4em;
			width: 2.7em;
			height: 2.7em;
			min-width: 0;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .werkzeug.text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .werkzeug.text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .werkzeug.aktiv, :where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .auswahl.aktiv {
			background-color: yellow;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .feld-auswahl {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 0.6em;
			margin-bottom: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .feld-auswahl .auswahl {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.5em;
			padding: 0.7em;
			cursor: pointer;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .feld-symbol {
			display: flex;
			gap: 0.12em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .feld-symbol i {
			width: 0.65em;
			height: 0.65em;
			border: 0.1em solid currentColor;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .feld-symbol i:nth-child(6) {
			margin-left: 0.25em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .zahlenfeld-wrapper {
			overflow: auto;
			max-width: 95vw;
			max-height: 70vh;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .zahlenfeld {
			display: grid;
			grid-template-columns: repeat(5, 2.4em) 0.6em repeat(5, 2.4em);
			grid-template-rows: repeat(5, 2.4em) 0.6em repeat(5, 2.4em);
			gap: 0.35em;
			width: max-content;
			padding: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .abakus {
			font-size: 1em;
			border: 0;
			border-radius: 50%;
			width: 2.4em;
			height: 2.4em;
			padding: 0;
			background-color: transparent;
			color: white;
			font-weight: bold;
			cursor: pointer;
			perspective: 12em;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .plaettchen {
			display: block;
			position: relative;
			width: 100%;
			height: 100%;
			transform-style: preserve-3d;
			pointer-events: none;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .plaettchen-seite {
			position: absolute;
			inset: 0;
			border: 0.1em solid #aaaaaa;
			border-radius: 50%;
			background-color: #141414;
			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .plaettchen-rueckseite { transform: rotateY(180deg); }
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .plaettchen-seite[data-farbe="rot"] { background-color: #d60000; border-color: #ff7777; }
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .plaettchen-seite[data-farbe="blau"] { background-color: #154dcc; border-color: #88b2ff; }
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .abakus:focus-visible { outline: 3px solid yellow; outline-offset: 2px; }
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .feld-symbol i { border-radius: 50%; }
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .feld-hinweis { max-width: 30em; font-weight: normal; }

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) main { position: relative; overflow: hidden; }
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) main > section, :where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) main > nav { position: relative; z-index: 1; }
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .fertig .fortschrittsstern {
			animation: bunt-blinken 900ms steps(1) infinite;
			animation-delay: calc(var(--stern-index) * -90ms);
		}
		:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .feuerwerk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
		@media (prefers-reduced-motion: reduce) {
:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .fertig .fortschrittsstern { animation: none; color: #ffd54a; }
			:where(html[data-lesson="html--ma_zr100_OZUE_addierenbis100_felder"]) .feuerwerk { display: none; }
}

:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) section {
			width: 100%;
			margin-bottom: 2.5em;
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) .textblock {
			text-align: center;
			padding: 0 1em;
			margin-bottom: 1.5em;
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) .aufgaben-grid {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) .aufgabe {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;

			width: 11em;
			min-height: 8em;
			padding: 1em;

			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;

			background: rgba(255, 255, 255, 0.05);

			box-sizing: border-box;

			transition:
				transform 0.2s ease,
				background 0.2s ease,
				border-color 0.2s ease;
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) .aufgabe:hover {
			transform: scale(1.02);
			background: rgba(255, 255, 255, 0.08);
			border-color: rgba(255, 255, 255, 0.6);
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) table {
			border-collapse: separate;
			border-spacing: 0.35em;
			width: fit-content;
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) td {
			font-size: 1.4em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) input {
			width: 2.4em;
			font-size: 1em;
			text-align: center;
			color: white;
			background: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.5);
			border-radius: 0.4em;
			padding: 0.15em;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) input:focus {
			outline: none;
			border-color: rgba(255, 255, 255, 0.9);
			background: rgba(255, 255, 255, 0.14);
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) .bildpunkte {
			display: flex;
			flex-direction: column;
			gap: 0.25em;
			margin-top: 0.5em;
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) .bildpunkt {
			width: 1.5em;
			height: 1.5em;
			background: #2196f3;
			border-radius: 0.35em;
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) .nav-grid {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) .nav-button {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			width: 10em;
			min-height: 8em;
			padding: 1em;

			text-decoration: none;
			color: white;

			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;

			background: rgba(255, 255, 255, 0.05);

			box-sizing: border-box;

			transition:
				transform 0.2s ease,
				background 0.2s ease,
				border-color 0.2s ease;
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) .nav-button:hover {
			transform: scale(1.04);
			background: rgba(255, 255, 255, 0.12);
			border-color: rgba(255, 255, 255, 0.7);
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) .icon {
			font-size: 3em;
			margin-bottom: 0.3em;
		}

		:where(html[data-lesson="html--ma_1x1_1_reihe_mit_bild"]) .label {
			font-size: 1em;
			text-align: center;
			line-height: 1.3;
		}



:where(html[data-lesson="html--ma_geometrie_test"]) *, :where(html[data-lesson="html--ma_geometrie_test"]) {
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) body {
			margin: 0;
			min-height: 100vh;
			font-family: 'Grundschrift', Arial, sans-serif;
			color: white;
			background: black;
			display: flex;
			flex-direction: column;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 5.5em;
			height: 5.5em;
			border: 2px solid white;
			border-radius: 1em;
			color: white;
			text-decoration: none;
			background: #111;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) header span:first-child {
			font-size: 2em;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) main {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) h1 {
			text-align: center;
			font-size: clamp(2rem, 8vw, 4rem);
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .karte {
			width: min(95vw, 1100px);
			background: white;
			color: black;
			border-radius: 1em;
			padding: 1.5em;
			box-shadow: 0 0 1em rgba(255,255,255,0.25);
			text-align: center;
			margin-bottom: 1.5em;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .wortspeicher {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 0.7em;
			margin: 1em 0;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .koerper {
			background: #e9f3ff;
			border: 2px solid #1d5f99;
			border-radius: 0.8em;
			padding: 0.6em 0.8em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .aufgabe {
			background: #f3f3f3;
			border: 2px solid #ccc;
			border-radius: 1em;
			padding: 1em;
			margin: 1em 0;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .aufgaben-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
			gap: 1em;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .gegenstand {
			margin: 0.2em 0;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .gegenstand img {
			width: 140px;
			height: 140px;
			object-fit: contain;
			display: block;
			margin: 0 auto;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .name {
			font-size: 1.4rem;
			font-weight: bold;
			margin-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) select, :where(html[data-lesson="html--ma_geometrie_test"]) input {
			font-size: 1.1rem;
			padding: 0.6em;
			border-radius: 0.6em;
			border: 2px solid #333;
			width: min(90%, 360px);
			text-align: center;
			margin: 0.4em;
			background: white;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .eingabe-zeile {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 0.5em;
			margin-top: 0.5em;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .eingabe-zeile input {
			width: 150px;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) button {
			font-size: 1.1rem;
			padding: 0.8em 1.2em;
			border: none;
			border-radius: 0.8em;
			cursor: pointer;
			font-weight: bold;
			background: #ffd43b;
			color: black;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) button:hover {
			background: #ffec99;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .test-beenden {
			background: #51cf66;
			font-size: 1.3rem;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .nochmal {
			background: #74c0fc;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .koerper-svg, :where(html[data-lesson="html--ma_geometrie_test"]) .netz-svg, :where(html[data-lesson="html--ma_geometrie_test"]) .baukoerper-svg {
			width: 140px;
			height: 140px;
			margin: 0.5em auto 1em auto;
			display: block;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .korrektur-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
			gap: 1em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .korrektur-box {
			padding: 1em;
			border-radius: 1em;
			background: #f3f3f3;
			border: 2px solid #cccccc;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .korrektur-richtig {
			color: green;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .korrektur-falsch {
			color: red;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .checkboxen {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 0.5em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .checkboxen label {
			background: white;
			border: 2px solid #333;
			border-radius: 0.6em;
			padding: 0.4em 0.6em;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .checkboxen input {
			width: auto;
			margin: 0 0.3em 0 0;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .bauplan-optionen {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 0.8em;
			margin: 1em 0;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .bauplan-option {
			background: white;
			border: 2px solid #333;
			border-radius: 0.6em;
			padding: 0.5em;
			min-width: 105px;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .bauplan-mini, :where(html[data-lesson="html--ma_geometrie_test"]) .bauplan-input {
			display: grid;
			grid-template-columns: repeat(3, 34px);
			justify-content: center;
			gap: 0;
			margin: 0.4em auto;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .bauplan-mini span, :where(html[data-lesson="html--ma_geometrie_test"]) .bauplan-input input {
			width: 34px;
			height: 34px;
			border: 1px solid #333;
			display: flex;
			align-items: center;
			justify-content: center;
			background: white;
			font-weight: bold;
			margin: 0;
			padding: 0;
			border-radius: 0;
			font-size: 1rem;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .bauplan-input input {
			text-align: center;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) table {
			width: 100%;
			border-collapse: collapse;
			margin-top: 1em;
			font-size: 1rem;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) th {
			background: #222;
			color: white;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) td, :where(html[data-lesson="html--ma_geometrie_test"]) th {
			border: 1px solid #999;
			padding: 0.6em;
			text-align: left;
			vertical-align: top;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .text-richtig {
			color: green;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .text-falsch {
			color: red;
			font-weight: bold;
		}

		@media (max-width: 600px) {
:where(html[data-lesson="html--ma_geometrie_test"]) table {
				font-size: 0.85rem;
			}

			:where(html[data-lesson="html--ma_geometrie_test"]) td, :where(html[data-lesson="html--ma_geometrie_test"]) th {
				padding: 0.4em;
			}

			:where(html[data-lesson="html--ma_geometrie_test"]) .eingabe-zeile input {
				width: 100%;
			}
}
		
		@media print {
:where(html[data-lesson="html--ma_geometrie_test"]) header {
			display: none !important;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) body {
			background: white !important;
			color: black !important;
		}

		:where(html[data-lesson="html--ma_geometrie_test"]) .test-beenden, :where(html[data-lesson="html--ma_geometrie_test"]) .nochmal {
			display: none !important;
		}
}

:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) *, :where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) {
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 95vw;
			text-align: center;
			padding: 1em 1.5em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) .zahlenreihe {
			display: flex;
			justify-content: center;
			gap: 1em;
			font-size: 1.6em;
			font-weight: bold;
			margin-bottom: 0.8em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) .gegebene-zahl {
			background-color: #eeeeee;
			border: 0.08em solid black;
			border-radius: 0.4em;
			min-width: 3.2em;
			padding: 0.3em 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) .aufgabentabelle {
			border-collapse: collapse;
			font-size: 1.4em;
			font-weight: bold;
			margin: 0 auto;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) .aufgabentabelle td {
			padding: 0.25em 0.35em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) .zahl {
			min-width: 1.7em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 3.2em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_dreizahlenvieraufgaben"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			width: fit-content;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}

:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
		}

		:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) section {
			width: 100%;
			margin-bottom: 2.5em;
		}

		:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) .textblock {
			text-align: center;
			padding: 0 1em;
			margin-bottom: 1.5em;
		}

		:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) .aufgaben-grid, :where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) .nav-grid {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) .aufgabe, :where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) .nav-button {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;

			width: 11em;
			min-height: 8em;
			padding: 1em;

			text-decoration: none;
			color: white;

			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;

			background: rgba(255, 255, 255, 0.05);

			box-sizing: border-box;

			transition:
				transform 0.2s ease,
				background 0.2s ease,
				border-color 0.2s ease;
		}

		:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) .aufgabe:hover, :where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) .nav-button:hover {
			transform: scale(1.04);
			background: rgba(255, 255, 255, 0.12);
			border-color: rgba(255, 255, 255, 0.7);
		}

		:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) table {
			border-collapse: separate;
			border-spacing: 0.35em;
			width: fit-content;
		}

		:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) td {
			font-size: 1.4em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) input {
			width: 2.4em;
			font-size: 1em;
			text-align: center;
			color: white;
			background: rgba(255, 255, 255, 0.08);
			border: 0.08em solid rgba(255, 255, 255, 0.5);
			border-radius: 0.4em;
			padding: 0.15em;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) .bildpunkte {
			display: flex;
			flex-direction: column;
			gap: 0.25em;
			margin-top: 0.5em;
		}

		:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) .bildreihe {
			display: flex;
			gap: 0.25em;
		}

		:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) .bildpunkt {
			width: 1.5em;
			height: 1.5em;
			background: #2196f3;
			border-radius: 0.35em;
		}

		:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) .icon {
			font-size: 3em;
			margin-bottom: 0.3em;
		}

		:where(html[data-lesson="html--ma_1x1_2_reihe_mit_bild"], html[data-lesson="html--ma_1x1_5_reihe_mit_bild"]) .label {
			font-size: 1em;
			text-align: center;
			line-height: 1.3;
		}



:where(html[data-lesson="html--de_00_woerter_lesen"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) section {
			width: 100%;
			margin-bottom: 2.5em;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) .textblock {
			text-align: center;
			padding: 0 1em;
			margin-bottom: 1.5em;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) .panel {
			width: min(90%, 70em);
			margin: 0 auto 1.5em auto;
			padding: 1.5em;
			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;
			background: rgba(255, 255, 255, 0.05);
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) .panel h3 {
			text-align: center;
			margin-top: 0;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) .fieldset-grid {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.2em;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) fieldset {
			width: 28em;
			padding: 1em;
			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;
			background: rgba(255, 255, 255, 0.05);
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) legend {
			font-weight: bold;
			padding: 0 0.5em;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) .check-grid {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 0.8em 1em;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) .check-item {
			display: inline-flex;
			align-items: center;
			gap: 0.4em;
			font-size: 1.1em;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) input[type="checkbox"] {
			width: 1.4em;
			height: 1.4em;
			accent-color: #66bb6a;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) .button-row {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) .modus-button, :where(html[data-lesson="html--de_00_woerter_lesen"]) #neu, :where(html[data-lesson="html--de_00_woerter_lesen"]) #vorlesen {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			width: 9em;
			min-height: 8em;
			padding: 1em;

			text-decoration: none;
			color: white;
			font-family: 'Grundschrift', Arial, sans-serif;
			font-size: 1em;
			font-weight: normal;

			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;

			background: rgba(255, 255, 255, 0.05);

			box-sizing: border-box;
			cursor: pointer;

			transition:
				transform 0.2s ease,
				background 0.2s ease,
				border-color 0.2s ease;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) .modus-button:hover, :where(html[data-lesson="html--de_00_woerter_lesen"]) #neu:hover, :where(html[data-lesson="html--de_00_woerter_lesen"]) #vorlesen:hover {
			transform: scale(1.04);
			background: rgba(255, 255, 255, 0.12);
			border-color: rgba(255, 255, 255, 0.7);
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) .modus-aktiv {
			background: rgba(255, 255, 255, 0.18);
			border-color: white;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) .icon {
			font-size: 3em;
			margin-bottom: 0.3em;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) .label {
			font-size: 1em;
			text-align: center;
			line-height: 1.3;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) .ausgabe-wrap {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) #ausgabe_wort {
			font-family: 'Grundschrift', Arial, sans-serif;
			min-width: 260px;
			max-width: 90%;
			padding: 0.3em 0.6em;
			font-size: 12vmin;
			font-weight: bold;
			text-align: center;
			line-height: 1.2;
			background-color: white;
			color: black;
			border-radius: 0.2em;
			box-sizing: border-box;
			word-break: break-word;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) .silbe-blau {
			color: #1565c0;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) .silbe-rot {
			color: #d32f2f;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) #hinweis {
			padding-top: 1em;
			min-height: 2em;
			color: #ff8d8d;
			font-size: 1.05em;
			text-align: center;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) .auto-row {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			align-items: center;
			gap: 1.5em;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) .auto-row label {
			display: inline-flex;
			align-items: center;
			gap: 0.5em;
			font-size: 1.1em;
		}

		:where(html[data-lesson="html--de_00_woerter_lesen"]) select {
			padding: 0.5em;
			border-radius: 0.6em;
			border: 0.12em solid rgba(255, 255, 255, 0.35);
			background-color: black;
			color: white;
			font-size: 1em;
		}



		@media (max-width: 700px) {
:where(html[data-lesson="html--de_00_woerter_lesen"]) fieldset {
				width: 90%;
			}

			:where(html[data-lesson="html--de_00_woerter_lesen"]) #ausgabe_wort {
				font-size: 16vmin;
			}

			:where(html[data-lesson="html--de_00_woerter_lesen"]) .modus-button, :where(html[data-lesson="html--de_00_woerter_lesen"]) #neu, :where(html[data-lesson="html--de_00_woerter_lesen"]) #vorlesen {
				width: 90%;
			}
}

:where(html[data-lesson="html--ma_zr100_ZZ_zahl_suchen"]) .zahlenfeld-wrapper {
			overflow-x: auto;
			max-width: 95vw;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_zahl_suchen"]) .zahlenfeld {
			border-collapse: collapse;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_zahl_suchen"]) .zahlenfeld td {
			padding: 0.25em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_zahl_suchen"]) .zahlenfeld td.trenn-rechts {
			border-right: 0.25em solid rgba(255,255,255,0.9);
			padding-right: 0.8em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_zahl_suchen"]) .zahlenfeld td.trenn-links {
			padding-left: 0.8em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_zahl_suchen"]) .zahlenfeld tr.trenn-unten td {
			border-bottom: 0.25em solid rgba(255,255,255,0.9);
			padding-bottom: 0.8em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_zahl_suchen"]) .zahlenfeld tr.trenn-oben td {
			padding-top: 0.8em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_zahl_suchen"]) .zahlenbutton {
			font-size: 0.9em;
			border: 0.08em solid black;
			border-radius: 0.35em;
			width: 2.8em;
			height: 2.8em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			box-sizing: border-box;
		}

:where(html[data-lesson="html--00_punktespiegel"]) body {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 80px;
        }

        :where(html[data-lesson="html--00_punktespiegel"]) main {
            width: 100%;
            max-width: 900px;
        }

        :where(html[data-lesson="html--00_punktespiegel"]) .ampel-gruen {
            background-color: #c6efce !important;
            color: #1f4e28 !important;
            font-weight: bold;
        }

        :where(html[data-lesson="html--00_punktespiegel"]) .ampel-gelb {
            background-color: #fff2cc !important;
            color: #7f6000 !important;
            font-weight: bold;
        }

        :where(html[data-lesson="html--00_punktespiegel"]) .ampel-rot {
            background-color: #f4cccc !important;
            color: #7a1f1f !important;
            font-weight: bold;
        }

        :where(html[data-lesson="html--00_punktespiegel"]) .note-zelle {
            font-weight: bold;
            text-align: center;
        }

:where(html[data-lesson="html--mu_theorie_halbenote"]) .notenkarte { max-width: 80%; margin-inline: auto; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .tempokarte { max-width: 920px; margin-inline: auto; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .notenflaeche { color: #111; background: #fff; border-radius: 16px; overflow: hidden; touch-action: none; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .ziehbar { cursor: grab; outline: none; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .ziehbar:active { cursor: grabbing; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .notenkopf:focus .kopf-form { stroke: #ff9800; stroke-width: 6; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .notenhals:focus .hals-form { stroke-width: 11; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .notenkopf.aktiv .kopf-form { fill: #fff; stroke: #ff9800; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .noten-markierung { fill: #ffeb3b; opacity: 0; transition: opacity .08s; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .notenkopf.spielt .noten-markierung { opacity: .75; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .notenhals.aktiv .hals-form { stroke: #ff9800; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .ziel-hilfe { opacity: 0; transition: opacity .15s; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .zieht-kopf .ziel-hilfe { opacity: .16; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .anleitung { max-width: 760px; margin-inline: auto; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .legende, :where(html[data-lesson="html--mu_theorie_halbenote"]) .tempo-buttons, :where(html[data-lesson="html--mu_theorie_halbenote"]) .freie-wahl { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1em; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .legende span::before { content: ''; display: inline-block; width: .8em; height: .8em; margin-right: .4em; border-radius: 50%; background: currentColor; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .tempo-button { min-width: 150px; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .tempo-button[disabled] { cursor: wait; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .tempo-anzeige { min-width: 5.5em; font-variant-numeric: tabular-nums; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .weiter-bereich { text-align: center; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) input[type="range"] { width: min(360px, 75vw); accent-color: #ff9800; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .taktanzeige { display: flex; justify-content: center; gap: .65em; min-height: 2.5em; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .schlag { width: 2.2em; height: 2.2em; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; transition: background .08s, color .08s; }
		:where(html[data-lesson="html--mu_theorie_halbenote"]) .schlag.aktiv { color: #111; background: #ff9800; }
		@media (prefers-reduced-motion: reduce) {
:where(html[data-lesson="html--mu_theorie_halbenote"]) .ziel-hilfe, :where(html[data-lesson="html--mu_theorie_halbenote"]) .schlag { transition: none; }
}

:where(html[data-lesson="html--ma_1x1_10_division_bild"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) section {
			width: 100%;
			margin-bottom: 2.5em;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .textblock {
			text-align: center;
			padding: 0 1em;
			margin-bottom: 1.5em;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .aufgabe-anzeige {
			font-size: 1.8em;
			margin: 0.8em 0;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .loesung {
			width: 4em;
			font-size: 1.4em;
			text-align: center;
			color: white;
			background: rgba(255, 255, 255, 0.08);
			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 0.6em;
			padding: 0.3em;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .loesung.richtig {
			border-color: green;
			background: rgba(0, 128, 0, 0.35);
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .loesung.falsch {
			border-color: red;
			background: rgba(255, 0, 0, 0.25);
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .aufgaben-grid, :where(html[data-lesson="html--ma_1x1_10_division_bild"]) .nav-grid, :where(html[data-lesson="html--ma_1x1_10_division_bild"]) .bereich-grid {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1.2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .aufgabe, :where(html[data-lesson="html--ma_1x1_10_division_bild"]) .nav-button, :where(html[data-lesson="html--ma_1x1_10_division_bild"]) .quellbereich, :where(html[data-lesson="html--ma_1x1_10_division_bild"]) .zielbereich {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-height: 8em;
			padding: 1em;
			text-decoration: none;
			color: white;
			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;
			background: rgba(255, 255, 255, 0.05);
			box-sizing: border-box;
			transition:
				transform 0.2s ease,
				background 0.2s ease,
				border-color 0.2s ease;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .quellbereich {
			width: min(90vw, 38em);
			min-height: 10em;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .zielbereich {
			width: min(90vw, 12em);
			min-height: 12em;
			justify-content: flex-start;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .nav-button {
			width: 10em;
			min-height: 8em;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .nav-button:hover, :where(html[data-lesson="html--ma_1x1_10_division_bild"]) .zielbereich:hover, :where(html[data-lesson="html--ma_1x1_10_division_bild"]) .quellbereich:hover {
			transform: scale(1.02);
			background: rgba(255, 255, 255, 0.12);
			border-color: rgba(255, 255, 255, 0.7);
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .emoji-feld {
			display: grid;
			grid-template-columns: repeat(10, auto);
			justify-content: start;
			align-content: start;
			justify-items: center;
			align-items: center;
			gap: 0.4em;
			width: 100%;
			min-height: 5em;
			margin-top: 0.5em;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .emoji {
			font-size: 2.2em;
			cursor: grab;
			user-select: none;
			touch-action: none;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .emoji:active {
			cursor: grabbing;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .ziel-titel {
			font-size: 1.1em;
			margin-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .kontrolle {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) button {
			font-size: 1.1em;
			color: white;
			background: rgba(255, 255, 255, 0.08);
			border: 0.12em solid rgba(255, 255, 255, 0.35);
			border-radius: 1em;
			padding: 0.8em 1.2em;
			cursor: pointer;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) button:hover {
			background: rgba(255, 255, 255, 0.16);
			border-color: rgba(255, 255, 255, 0.7);
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .icon {
			font-size: 3em;
			margin-bottom: 0.3em;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .label {
			font-size: 1em;
			text-align: center;
			line-height: 1.3;
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .richtig {
			border-color: green;
			background: rgba(0, 128, 0, 0.35);
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .falsch {
			border-color: red;
			background: rgba(255, 0, 0, 0.25);
		}

		:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .quellbereich, :where(html[data-lesson="html--ma_1x1_10_division_bild"]) .zielbereich {
			overflow: auto;
		}

		@media (max-width: 700px) {
:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .quellbereich, :where(html[data-lesson="html--ma_1x1_10_division_bild"]) .zielbereich {
				max-height: 14em;
				-webkit-overflow-scrolling: touch;
			}

			:where(html[data-lesson="html--ma_1x1_10_division_bild"]) .emoji-feld {
				min-width: 22em;
			}
}



:where(html[data-lesson="html--ma_laengen_umrechnungstabelle"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_laengen_umrechnungstabelle"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_laengen_umrechnungstabelle"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_laengen_umrechnungstabelle"]) header a span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_laengen_umrechnungstabelle"]) header a span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_laengen_umrechnungstabelle"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_laengen_umrechnungstabelle"]) .card {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			padding: 1em;
			max-width: 95vw;
		}

		:where(html[data-lesson="html--ma_laengen_umrechnungstabelle"]) table {
			border-collapse: collapse;
			margin: 0 auto;
		}

		:where(html[data-lesson="html--ma_laengen_umrechnungstabelle"]) td, :where(html[data-lesson="html--ma_laengen_umrechnungstabelle"]) th {
			border: 0.06em solid black;
			text-align: center;
			width: 2.4em;
			height: 2.4em;
		}

		:where(html[data-lesson="html--ma_laengen_umrechnungstabelle"]) .trennung {
			border-right: 0.18em solid red !important;
		}

		:where(html[data-lesson="html--ma_laengen_umrechnungstabelle"]) input {
			font-size: 1.4em;
			width: 100%;
			height: 100%;
			text-align: center;
			border: 0.08em solid black;
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_laengen_umrechnungstabelle"]) input:focus {
			outline: none;
			border: 0.12em solid #4CAF50;
		}

		:where(html[data-lesson="html--ma_laengen_umrechnungstabelle"]) button {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			border: 0;
			font-size: 1.2em;
			font-weight: bold;
			cursor: pointer;
		}


:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) *, :where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) {
			box-sizing: border-box;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) body {
			display: flex;
			flex-direction: column;
			color: white;
			background-color: black;
			min-height: 95vh;
			margin: 0;
			font-family: 'Grundschrift', Arial, sans-serif;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) header {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) header a {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) header span:first-child {
			font-size: 3em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) header span:last-child {
			font-size: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			flex: 1;
			margin-bottom: 2em;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .info-bereich {
			margin-bottom: 2em;
			text-align: center;
			max-width: 50em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .info-bereich h2 {
			margin: 0.3em 0;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .info-bereich p {
			max-width: 40em;
			margin: 0 auto;
			padding: 0 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .punkte {
			font-size: 1.2em;
			margin-top: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .aufgabenbereich {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			align-items: center;
			width: 100%;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .werkzeugleiste {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 1em;
			margin-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .werkzeug-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4em;
			color: white;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .werkzeug, :where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .auswahl {
			font-size: 1.2em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			min-width: 3.2em;
			height: 2.7em;
			background-color: #ffffff;
			color: #111111;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .werkzeug.aktiv, :where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .auswahl.aktiv {
			background-color: yellow;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .text-red {
			color: red;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .text-blue {
			color: blue;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .zahlenfeld-wrapper {
			overflow: auto;
			max-width: 95vw;
			max-height: 65vh;
			padding-bottom: 0.5em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .zahlenfeld {
			--feld: 2.8em;
			--gap: 0.35em;

			display: grid;
			grid-template-columns: repeat(10, var(--feld));
			gap: var(--gap);
			min-width: max-content;
			position: relative;
			padding: 1em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .zahlenfeld::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: calc(1em + (var(--feld) * 5) + (var(--gap) * 4) + (var(--gap) / 2));
			width: 0.18em;
			background-color: rgba(255, 255, 255, 0.8);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .zahlenfeld::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: calc(1em + (var(--feld) * 5) + (var(--gap) * 4) + (var(--gap) / 2));
			height: 0.18em;
			background-color: rgba(255, 255, 255, 0.8);
			border-radius: 1em;
			z-index: 1;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .abakus {
			font-size: 1em;
			border: 0.08em solid black;
			border-radius: 0.4em;
			width: var(--feld);
			height: var(--feld);
			background-color: #ffffff;
			color: #111111;
			text-align: center;
			position: relative;
			z-index: 2;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .rechenkarte {
			background-color: white;
			color: black;
			border-radius: 0.8em;
			width: fit-content;
			max-width: 90vw;
			text-align: center;
			padding: 1em 2em;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .rechenzeile {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			justify-content: center;
			gap: 0.4em;
			font-size: 1.6em;
			font-weight: bold;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .zahl {
			min-width: 1.4em;
			text-align: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) input {
			font-size: 0.8em;
			font-weight: bold;
			width: 3.2em;
			text-align: center;
			border: 0.08em solid black;
			border-radius: 0.4em;
			padding: 0.2em;
			background-color: yellow;
			color: black;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .aktionslinks {
			display: flex;
			flex-flow: row wrap;
			gap: 1em;
			justify-content: center;
		}

		:where(html[data-lesson="html--ma_zr100_ZZ_subtrahierenbis100_felder"]) .aktionslinks a {
			background-color: lightgrey;
			color: black;
			padding: 1em;
			border-radius: 0.8em;
			text-decoration: none;
			font-size: 1.2em;
			font-weight: bold;
		}


:where(html[data-lesson="html--spiel_dungeon_1x1"]):root {color-scheme:dark;--gold:#edca82;--muted:#b8b2a5}:where(html[data-lesson="html--spiel_dungeon_1x1"]) *, :where(html[data-lesson="html--spiel_dungeon_1x1"]) {box-sizing:border-box}:where(html[data-lesson="html--spiel_dungeon_1x1"]) body {margin:0;background:radial-gradient(ellipse at top,#252332,#0b0d13 65%);color:#f5eee0;font-family: 'Grundschrift', Arial, sans-serif;min-height:100vh}:where(html[data-lesson="html--spiel_dungeon_1x1"]) main {max-width:900px;margin:auto;padding:22px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) h1, :where(html[data-lesson="html--spiel_dungeon_1x1"]) h2 {font-family: 'Grundschrift', Arial, sans-serif;color:var(--gold)}:where(html[data-lesson="html--spiel_dungeon_1x1"]) h1 {font-size:clamp(2.3rem,7vw,4rem);margin:16px 0}:where(html[data-lesson="html--spiel_dungeon_1x1"]) button {font:inherit;cursor:pointer;border:1px solid #ac8b51;border-radius:10px;padding:12px 22px;background:#332c20;color:#ffe1a6;min-height:46px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) button:hover {background:#4b3e29}:where(html[data-lesson="html--spiel_dungeon_1x1"]) button:focus-visible {outline:3px solid #ffe1a6;outline-offset:3px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .intro {text-align:center;padding:7vh 12px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .crest {font-size:5rem;color:var(--gold);text-shadow:0 0 45px #d6a34b}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .intro p {line-height:1.7;max-width:560px;margin:20px auto}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .subtle {color:var(--muted);font-size:.9rem}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .actions {display:flex;gap:12px;justify-content:center;flex-wrap:wrap}:where(html[data-lesson="html--spiel_dungeon_1x1"]) header {display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .stats {display:flex;gap:20px;font-weight:700}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .timer {color:var(--gold);font-variant-numeric:tabular-nums}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #board {position:relative;display:grid;aspect-ratio:1;width:min(100%,640px);margin:auto;background:#15151c;border:6px solid #37343e;border-radius:8px;touch-action:none;user-select:none;box-shadow:0 15px 70px #0008}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .cell {min-width:0;min-height:0;line-height:1;position:relative;display:flex;align-items:center;justify-content:center;font-size:clamp(14px,3.3vw,27px)}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .wall {background:linear-gradient(135deg,#383643,#22212c);border:1px solid #47434e66}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .floor {background:#151822;border:1px solid #292b3455}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .monster {color:#c68ee7;text-shadow:0 0 12px #9850bb;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .player {color:#ffe4a3;filter:drop-shadow(0 0 6px #eab65c);font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-weight:bold;z-index:2}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .defeated {animation:vanish .55s ease-out forwards;color:#ffdc7e}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #message {text-align:center;min-height:28px;color:var(--gold)}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .instructions {text-align:center;color:var(--muted);font-size:.92rem;line-height:1.6}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .overlay {position:fixed;inset:0;background:#05060bd9;display:flex;align-items:center;justify-content:center;z-index:5;padding:20px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .panel {background:linear-gradient(145deg,#282534,#15151f);border:1px solid #786548;border-radius:20px;padding:28px;width:min(100%,440px);text-align:center;box-shadow:0 25px 90px #000}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .task {font-size:2.4rem;color:var(--gold);margin:18px 0}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .answer {font-size:1.7rem;width:100%;padding:10px;text-align:center;border:1px solid #8b7957;border-radius:8px;background:#0e1018;color:white}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .keys {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .keys button {padding:8px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .bar {height:7px;background:#111;border-radius:5px;overflow:hidden;margin:12px 0}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .bar span {display:block;height:100%;background:#e8b968;width:100%}:where(html[data-lesson="html--spiel_dungeon_1x1"]) [hidden] {display:none!important}:where(html[data-lesson="html--spiel_dungeon_1x1"]) a {color:var(--muted)}@media(prefers-reduced-motion:reduce) {
:where(html[data-lesson="html--spiel_dungeon_1x1"]) .defeated {animation-duration:.01s}
}
:where(html[data-lesson="html--spiel_dungeon_1x1"]) .certificate {border:3px double var(--gold);padding:22px;margin:20px 0;background:#1b1923}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .certificate h3 {font:1.8rem 'Grundschrift', Arial, sans-serif;color:var(--gold);margin:8px 0}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .certificate input {background:transparent;color:#ffe1a6;border:0;border-bottom:1px solid #786548;text-align:center;font:1.3rem 'Grundschrift', Arial, sans-serif;width:100%;padding:10px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .certificate p {line-height:1.6}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #result .panel {width:min(100%,580px);max-height:95dvh;overflow:auto}@media print {
:where(html[data-lesson="html--spiel_dungeon_1x1"]) body {background:white;color:#222}:where(html[data-lesson="html--spiel_dungeon_1x1"]) main, :where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle, :where(html[data-lesson="html--spiel_dungeon_1x1"]) #result .panel> :not(.certificate) {display:none!important}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #result {position:static;background:white;padding:0;display:block!important}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #result .panel {background:white;box-shadow:none;border:0;max-height:none;width:100%;padding:20mm 10mm}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .certificate {background:white;border-color:#80652d;color:#222;padding:20mm 12mm;break-inside:avoid}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .certificate h3, :where(html[data-lesson="html--spiel_dungeon_1x1"]) .certificate input {color:#80652d}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .certificate input {border:0}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .certificate .subtle {color:#555}
}
:where(html[data-lesson="html--spiel_dungeon_1x1"]) .boss {position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:3;width:19.05%;height:19.05%;font-size:clamp(56px,13.2vw,108px);line-height:1;filter:drop-shadow(0 0 14px #ff493c);will-change:left,top}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .boss-life {color:#ff8780;font-weight:bold;margin:12px 0}
:where(html[data-lesson="html--spiel_dungeon_1x1"]) .final-scene {position:relative;height:160px;display:flex;align-items:center;justify-content:center}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .final-boss {font-size:110px;line-height:1}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .final-wizard {position:absolute;left:0;bottom:0;font-size:42px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .magic-bolt {position:absolute;left:28px;bottom:26px;color:#dcb4ff;font-size:36px;opacity:0}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .magic-hit .magic-bolt {animation:cast .65s ease-in forwards}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .magic-hit .final-boss {animation:hit .65s ease-in-out}
:where(html[data-lesson="html--spiel_dungeon_1x1"]) .hero-choice {display:flex;flex-direction:column;align-items:center;gap:8px;min-width:105px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .hero-choice span:first-child {font-size:3rem;line-height:1.2}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .hero-choice span:last-child {font-size:.85rem}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #heroChoices {margin:20px 0}
:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle .panel {max-height:95dvh;overflow:auto}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .duel-reward {position:absolute;right:20%;top:40%;font-size:36px;opacity:0}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .monster-defeat .final-boss {animation:monsterBurst .85s forwards}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .monster-defeat .duel-reward {animation:coinRise 1s forwards}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .streak-magic {box-shadow:0 0 40px #b78cff;border-color:#cba4ff}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .time-ring {--remaining:100%;width:92px;height:92px;border-radius:50%;background:conic-gradient(#d7adff var(--remaining),#37303e 0);padding:6px;margin:12px auto}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .time-ring>div {height:100%;border-radius:50%;background:#181620;display:flex;align-items:center;justify-content:center;font-size:.85rem}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .time-ring.urgent-ring {animation:ringPulse .6s infinite alternate}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .duel-status {min-height:24px;color:var(--gold);font-weight:bold}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #spellName {color:#cba4ff;font-size:.85rem;margin:0}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .final-scene {height:145px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .final-wizard {left:8%;font-size:52px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .magic-bolt {left:16%;bottom:30px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle .task {margin:10px 0;font-size:2rem}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle .keys {margin:10px 0}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battleHeroLives {margin:8px 0}@media(prefers-reduced-motion:reduce) {
:where(html[data-lesson="html--spiel_dungeon_1x1"]) .magic-hit .magic-bolt, :where(html[data-lesson="html--spiel_dungeon_1x1"]) .magic-hit .final-boss, :where(html[data-lesson="html--spiel_dungeon_1x1"]) .monster-defeat .final-boss, :where(html[data-lesson="html--spiel_dungeon_1x1"]) .monster-defeat .duel-reward, :where(html[data-lesson="html--spiel_dungeon_1x1"]) .time-ring.urgent-ring {animation-duration:.01s;animation-iteration-count:1}
}@media(max-height:750px) {
:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle .panel {padding:16px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .final-scene {height:100px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .final-boss {font-size:80px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .time-ring {width:70px;height:70px;margin:8px auto}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle h2 {margin:8px 0}
}
:where(html[data-lesson="html--spiel_dungeon_1x1"]) .door {display:flex;flex-direction:column;align-items:center;gap:12px;min-width:180px;padding:24px;margin-bottom:20px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .door>span {font-size:4rem}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .door>strong {font-size:1.4rem}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .door>small {color:var(--muted)}
:where(html[data-lesson="html--spiel_dungeon_1x1"]) .dark-ray {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;overflow:visible}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .dark-ray line {stroke:#6e218f;stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 5px #14041e)}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .lost-heart {position:absolute;left:9%;bottom:22px;font-size:28px;opacity:0;pointer-events:none}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .enemy-hit .dark-ray {animation:darkFlash .85s forwards}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .enemy-hit .dark-ray line {animation:darkShot .55s forwards}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .enemy-hit .final-wizard {animation:heroHurt .9s forwards}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .enemy-hit .lost-heart {animation:heartLost 1.1s .5s forwards}@media(prefers-reduced-motion:reduce) {
:where(html[data-lesson="html--spiel_dungeon_1x1"]) .enemy-hit .dark-ray, :where(html[data-lesson="html--spiel_dungeon_1x1"]) .enemy-hit .dark-ray line, :where(html[data-lesson="html--spiel_dungeon_1x1"]) .enemy-hit .final-wizard, :where(html[data-lesson="html--spiel_dungeon_1x1"]) .enemy-hit .lost-heart {animation-duration:.01s;animation-delay:0s}
}
:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow .panel {width:min(94vw,760px);overflow:hidden}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow #answerForm, :where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow .task, :where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow .time-ring, :where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow .bar, :where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow #spellName {display:none}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow .final-scene {height:clamp(180px,35vh,300px);animation:finalZoom .65s ease-out forwards;transform-origin:40% 70%}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow .final-boss {font-size:clamp(100px,18vw,170px);animation:bossFlash .4s 1.3s 3,bossCrumble 1s 2.5s forwards}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow .final-wizard {font-size:clamp(48px,9vw,80px);bottom:12%}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow .magic-bolt {animation:cast .65s .65s ease-in forwards;bottom:22%}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow .duel-reward {display:none}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .boss-fragments {position:absolute;left:50%;top:45%;pointer-events:none}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .boss-fragments span {position:absolute;font-size:22px;color:#d0a0ec;opacity:0}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow .boss-fragments span {animation:fragmentFall 1.1s 2.5s ease-in forwards}@media(prefers-reduced-motion:reduce) {
:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow .final-scene {animation:none;transform:scale(1.1)}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow .final-boss {animation:bossCrumble .3s 2.5s forwards}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow .magic-bolt {animation-duration:.01s}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow .boss-fragments span {animation-duration:.01s}
}
:where(html[data-lesson="html--spiel_dungeon_1x1"]) #numberRange {font:inherit;padding:10px 18px;border:1px solid #ac8b51;border-radius:8px;background:#332c20;color:#ffe1a6}

/* Keep every combat state inside the visible screen, including browser bars. */
:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle {height:100vh;height:100dvh;padding:12px;overflow:hidden}
:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle .panel, :where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow .panel {min-width:0;min-height:0;max-width:100%;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:hidden;overscroll-behavior:contain;overflow-wrap:anywhere;-webkit-overflow-scrolling:touch}
:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow .panel {width:min(100%,760px)}
@media(max-width:380px) {
:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle .panel {padding:12px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle .keys {gap:6px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle button {padding-left:10px;padding-right:10px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle .final-boss {font-size:72px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle .final-wizard {font-size:40px}
}
@media(max-height:600px) {
:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle .panel {padding:12px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle .final-scene {height:85px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle .final-boss {font-size:70px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle h2 {font-size:1.15rem;margin:6px 0}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle p {margin:6px 0}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle .task {font-size:1.6rem;margin:6px 0}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle .time-ring {width:60px;height:60px;margin:6px auto}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle .answer {padding:6px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle .keys button {padding:5px;min-height:40px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow .final-scene {height:140px}
}

:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle .panel, :where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle.last-blow .panel {overflow:hidden;flex-shrink:0;transform-origin:center center}
:where(html[data-lesson="html--spiel_dungeon_1x1"]) #battle .panel {max-height:none;max-width:none}
:where(html[data-lesson="html--spiel_dungeon_1x1"]) .highscores {margin:35px auto 0;border-top:1px solid #786548;padding-top:18px;max-width:700px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .highscore-filters {display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:18px 0}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .highscore-filters label {display:flex;flex-direction:column;gap:6px;text-align:left}:where(html[data-lesson="html--spiel_dungeon_1x1"]) .highscore-filters select {font:inherit;padding:10px;border:1px solid #ac8b51;border-radius:8px;background:#332c20;color:#ffe1a6;max-width:100%}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #highscoreList {text-align:left;padding-left:32px}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #highscoreList li {padding:10px 4px;border-bottom:1px solid #47434e}:where(html[data-lesson="html--spiel_dungeon_1x1"]) #highscoreList .score-detail {display:block;color:var(--muted);font-size:.85rem;margin-top:5px}

:where(html[data-lesson="html--mu_theorie_hilfslinie"]) #fertig { position: relative; overflow: hidden; }
		:where(html[data-lesson="html--mu_theorie_hilfslinie"]) #fertig > #fireworks { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
		:where(html[data-lesson="html--mu_theorie_hilfslinie"]) .notenkarte { max-width: 80%; margin-inline: auto; }
		:where(html[data-lesson="html--mu_theorie_hilfslinie"]) .notenflaeche { color: #111; background: #fff; border-radius: 16px; overflow: hidden; touch-action: none; }
		:where(html[data-lesson="html--mu_theorie_hilfslinie"]) .ziehbar { cursor: grab; outline: none; }
		:where(html[data-lesson="html--mu_theorie_hilfslinie"]) .ziehbar:active { cursor: grabbing; }
		:where(html[data-lesson="html--mu_theorie_hilfslinie"]) .hilfslinie:focus .linie-form, :where(html[data-lesson="html--mu_theorie_hilfslinie"]) .notenkopf:focus .kopf-form, :where(html[data-lesson="html--mu_theorie_hilfslinie"]) .notenhals:focus .hals-form { stroke: #ff9800; }
		:where(html[data-lesson="html--mu_theorie_hilfslinie"]) .hilfslinie.aktiv .linie-form, :where(html[data-lesson="html--mu_theorie_hilfslinie"]) .notenhals.aktiv .hals-form { stroke: #ff9800; }
		:where(html[data-lesson="html--mu_theorie_hilfslinie"]) .notenkopf.aktiv .kopf-form { fill: #ff9800; stroke: #ff9800; }
		:where(html[data-lesson="html--mu_theorie_hilfslinie"]) .ziel-hilfe { opacity: 0; transition: opacity .15s; }
		:where(html[data-lesson="html--mu_theorie_hilfslinie"]) .zieht-linie .linien-ziel, :where(html[data-lesson="html--mu_theorie_hilfslinie"]) .zieht-kopf .kopf-ziel { opacity: .18; }
		:where(html[data-lesson="html--mu_theorie_hilfslinie"]) .anleitung { max-width: 780px; margin-inline: auto; }
		:where(html[data-lesson="html--mu_theorie_hilfslinie"]) .schrittanzeige { display: flex; justify-content: center; gap: .6em; flex-wrap: wrap; }
		:where(html[data-lesson="html--mu_theorie_hilfslinie"]) .schritt { padding: .25em .75em; border-radius: 1em; background: rgba(255,255,255,.2); }
		:where(html[data-lesson="html--mu_theorie_hilfslinie"]) .schritt.aktuell { background: #ff9800; color: #111; font-weight: bold; }
		@media (prefers-reduced-motion: reduce) {
:where(html[data-lesson="html--mu_theorie_hilfslinie"]) .ziel-hilfe { transition: none; }
}

/* Animationen der Aufgaben */
@keyframes geschafft {
			0% { transform: scale(0.7); }
			30% {
				transform: scale(1.2);
				text-shadow: 0 0 0.2em #fff5bc, 0 0 0.6em #ffd54a, 0 0 1em #ffd54a;
			}
			65% {
				transform: scale(1);
				text-shadow: 0 0 0.3em #fff5bc, 0 0 0.8em #ffd54a;
			}
			100% { transform: scale(1); }
		}
@keyframes sternfunkeln {
			0% { opacity: 0; transform: scale(0.3) rotate(-20deg); }
			25% { opacity: 1; transform: scale(1.2) rotate(0deg); }
			55% { opacity: 0.4; transform: scale(0.7) rotate(15deg); }
			75% { opacity: 1; transform: scale(1) rotate(30deg); }
			100% { opacity: 0; transform: scale(0.3) rotate(45deg); }
		}
@keyframes bunt-blinken {
			0%, 100% { color: #ff6688; text-shadow: 0 0 0.5em currentColor; }
			25% { color: #ffd54a; }
			50% { color: #66ddff; }
			75% { color: #99ff88; }
		}
@keyframes shake {
			0% { transform: translateX(0); }
			15% { transform: translateX(-6px) rotate(-1deg); }
			30% { transform: translateX(6px) rotate(1deg); }
			45% { transform: translateX(-5px) rotate(-1deg); }
			60% { transform: translateX(5px) rotate(1deg); }
			75% { transform: translateX(-3px) rotate(-1deg); }
			90% { transform: translateX(3px) rotate(1deg); }
			100% { transform: translateX(0); }
		}
@keyframes vanish {to{transform:scale(2.7) rotate(50deg);opacity:0}}
@keyframes cast {0%{opacity:1;transform:translate(0,0) scale(.5)}80%{opacity:1;transform:translate(125px,-42px) scale(1.6)}100%{opacity:0;transform:translate(135px,-45px) scale(2.3)}}
@keyframes hit {55%{filter:brightness(1);transform:scale(1)}75%{filter:brightness(3) drop-shadow(0 0 20px #c689ff);transform:scale(.9)}100%{filter:brightness(1);transform:scale(1)}}
@keyframes monsterBurst {60%{transform:scale(.85);filter:brightness(3)}100%{transform:scale(1.8) rotate(18deg);opacity:0}}
@keyframes coinRise {30%{opacity:1}100%{opacity:1;transform:translateY(-45px)}}
@keyframes ringPulse {to{filter:drop-shadow(0 0 10px #ff7b67)}}
@keyframes darkShot {to{stroke-dashoffset:0}}
@keyframes darkFlash {10%,70%{opacity:1}100%{opacity:0}}
@keyframes heroHurt {50%{transform:translateX(0);filter:none}60%,80%{transform:translateX(-7px);filter:brightness(.45) drop-shadow(0 0 12px #9d2aaf)}70%,90%{transform:translateX(5px)}100%{transform:translateX(0);filter:none}}
@keyframes heartLost {15%{opacity:1}100%{opacity:0;transform:translateY(-55px) scale(.6)}}
@keyframes finalZoom {from{transform:scale(1)}to{transform:scale(1.35)}}
@keyframes bossFlash {0%,100%{filter:brightness(1)}50%{filter:brightness(4) drop-shadow(0 0 25px #ffe7ac)}}
@keyframes bossCrumble {0%{opacity:1;clip-path:inset(0);transform:translateY(0)}60%{opacity:.65;clip-path:inset(35% 0 0);transform:translateY(10px)}100%{opacity:0;clip-path:inset(100% 0 0);transform:translateY(30px)}}
@keyframes fragmentFall {0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(.2)}}

/* Formatierungen statischer Aufgabenelemente.
   Die Spezifität erhält den bisherigen Vorrang vor den Aufgabenregeln.
   Von JavaScript gesetzte Inline-Werte können diese Regeln weiter überschreiben. */
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="5f0b9284e1"]) { margin-bottom: 2em; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="645bbb62ac"]) { overflow-x: auto; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="4ed84f264d"]) { margin-top: 2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="6eb264858e"]) { flex-flow: row wrap; justify-content: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="bd42c5c550"]) { flex-direction: column; align-content: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="99b985d00b"]) { flex-direction: column; align-items: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="46ddbb1056"]) { flex-flow: row wrap; justify-content: flex-start; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="ce88b8b200"]) { flex-direction: column; align-items: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="b08a2a52e3"]) { width: fit-content; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="cbf37db640"]) { display: flex; flex-direction: column; color: white; background-color: black; min-height: 95vh; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="192f6f4e74"]) { display:flex; flex-flow: row wrap; justify-content: center; gap: 1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="4ed7c3bdd1"]) { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: white; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="afc7b269ee"]) { font-size: 3em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="42b63dc4b1"]) { font-size: 1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="87a7ff4fe5"]) { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; flex: 1; margin-bottom: 2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="c7fb65149b"]) { display:flex; flex-flow: row wrap; justify-content: center; margin-top: 2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="a3110c631e"]) { background-color: green; width: 1em; height: 1em; border: 0.1em black solid; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f71e0f09f9"]) { background-color: yellow; width: 1em; height: 1em; border: 0.1em black solid; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="2df6998ea8"]) { display:flex; flex-direction: column; align-items: center; margin-top: 2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="a917d06fb2"]) { display:flex; justify-content: center; width: 100%; margin-bottom: 2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="ea5c7dff65"]) { width: min(30%, 420px); min-width: 180px; height: 2em; background-color: #333; border: 0.2em black solid; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="169d31c6eb"]) { display:flex; justify-content: center; align-items: center; width: 30%; height: 2em; background-color: #d97a00; color: black; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="d09efdb861"]) { margin-bottom: 2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="8e14be6b03"]) { color: black; background-color: lightgrey; padding: 1em; border: 0.1em solid black; border-radius: 1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="6aa34d7432"]) { display:none; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="dcdc337534"]) { color: white; font-size: 1.2em; margin-left: 1em; text-decoration: none; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="91776b2652"]) { display: flex; flex-direction: column; color: white; background-color: black; min-height: 95vh; margin: 0; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="02d1dbd88b"]) { display:flex; flex-flow: row wrap; justify-content: center; gap: 1em; padding: 1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="6930c16397"]) { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; flex: 1; margin-bottom: 2em; padding: 0 1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="40a8e37f7d"]) { margin-bottom: 2em; text-align: center; max-width: 50em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="00872a6fe3"]) { margin: 0.3em 0; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="175301f6ce"]) { max-width: 40em; margin: 0 auto; padding: 0 1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="446daf1326"]) { display: flex; flex-direction: column; gap: 1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="6ded6a63d4"]) { display: flex; justify-content: center; align-items: center; overflow-x: auto; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9a9ed860f6"]) { display: flex; align-items: center; gap: 0.35em; font-size: 1.5em; font-weight: bold; flex-wrap: wrap; justify-content: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="1ef4e5ace7"]) { display: inline-block; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="beb84b9676"]) { font-size: 1em; border: 0.08em solid black; border-radius: 0.4em; width: 5em; text-align: right; box-sizing: border-box; margin-left: 0.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9c9929269e"]) { display: flex; flex-flow: row wrap; gap: 1em; justify-content: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="dbd94e6333"]) { background-color: lightgrey; color: black; padding: 1em; border-radius: 0.8em; width: fit-content; box-sizing: border-box; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="c4310beb0b"]) { margin-top: 0; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="026ff8326b"]) { width: fit-content; border-collapse: collapse; text-align: center; font-size: 1.1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="a96a65e4e4"]) { border-bottom: 0.08em solid black; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f53b09410d"]) { display:flex; flex-direction: column; align-items: center; margin-top: 2em; width: 100%; max-width: 1100px; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="e1004f05c4"]) { margin-bottom: 0.5em; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="c4c57c27b7"]) { text-align: center; max-width: 700px; margin-bottom: 2em; line-height: 1.5; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="bd872a0705"]) { width: 100%; display: flex; justify-content: center; margin-bottom: 2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="0810a7e07c"]) { width: 100%; max-width: 950px; overflow-x: auto; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="a501f5028c"]) { display: flex; justify-content: center; align-items: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9b8ec06981"]) { color: black; background-color: lightgrey; padding: 1em 2em; border: 0.1em solid black; border-radius: 1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="fca4d097d1"]) { padding: 1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="4ca2be56ec"]) { margin-bottom: 6em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="1277d9d47c"]) { font-size: 1.2em; margin-top: 1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f6e02522d9"]) { display: flex; flex-direction: column; gap: 1.5em; align-items: center; width: 100%; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="764880d87e"]) { background-color: white; color: black; border-radius: 0.8em; padding: 1em; width: fit-content; max-width: 95vw; box-sizing: border-box; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="401c93c94b"]) { font-size: 1.3em; font-weight: bold; margin: 0 0 0.8em 0; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="1be3beb5c4"]) { border-collapse: collapse; margin: 0 auto; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="4394cc3043"]) { padding: 0.2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="bc76005e8b"]) { font-size: 1.4em; font-weight: bold; min-width: 2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="8fbf78f844"]) { font-size: 1.6em; padding: 0.2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="de432ab6fd"]) { font-size: 1.2em; border: 0.08em solid black; border-radius: 0.4em; width: 3em; text-align: center; box-sizing: border-box; padding: 0.2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="e999b903aa"]) { font-size: 1.2em; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f2a1c75e3e"]) { align-items: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="12633151ac"]) { font-size: 1.2em; margin-left: 0.5em; margin-right: 0.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="65d1f1c3d7"]) { display: none; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="c260e540c6"]) { display: flex; flex-direction: column; gap: 1.5em; align-items: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="5e4d353bba"]) { display: flex; flex-direction: column; align-items: center; gap: 0.8em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="de52e3be99"]) { margin: 0; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="0e57afcbcf"]) { display: flex; justify-content: center; align-items: center; gap: 0.3em; flex-flow: row nowrap; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="4863447eba"]) { font-size: 1.8em; color: red; font-weight: bold; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="d181a1afe2"]) { font-size: 1.8em; font-weight: bold; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="8005514989"]) { font-size: 1.8em; color: dodgerblue; font-weight: bold; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="ea6e5f6e2f"]) { font-size: 1.8em; border: 0.08em solid black; border-radius: 0.4em; width: 3em; text-align: center; box-sizing: border-box; padding: 0.2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="ce01ef92cf"]) { display: flex; flex-direction: column; align-items: center; gap: 1em; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f6536568bb"]) { max-width: 95vw; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="756fff87da"]) { cursor: pointer; font-size: 1.2em; font-weight: bold; background-color: lightgrey; color: black; padding: 0.7em 1em; border-radius: 0.8em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="d8a95f35a8"]) { display: flex; flex-direction: column; gap: 1.5em; align-items: center; margin-top: 1.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="e8b6f9056e"]) { display: flex; flex-flow: row wrap; justify-content: center; gap: 1em; align-items: center; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9ac9937377"]) { display: flex; flex-direction: column; align-items: center; gap: 0.4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="a6886e7ce0"]) { font-size: 1.2em; border: 0.08em solid white; border-radius: 0.4em; width: 2.5em; height: 2.5em; background-color: lightgrey; color: red; cursor: pointer; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="e16fcc8c7d"]) { font-size: 1.2em; border: 0.08em solid white; border-radius: 0.4em; width: 2.5em; height: 2.5em; background-color: lightgrey; color: blue; cursor: pointer; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="39ca389555"]) { font-size: 1.2em; border: 0.08em solid white; border-radius: 0.4em; width: 2.5em; height: 2.5em; background-color: lightgrey; color: black; cursor: pointer; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="52fa792e1e"]) { display: flex; flex-flow: row wrap; justify-content: center; gap: 0.5em; max-width: 90vw; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="2d8dd02c81"]) { font-size: 1.2em; border: 0.08em solid white; border-radius: 0.4em; width: 2em; height: 2em; background-color: white; color: black; cursor: pointer; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="3bd8ec279a"]) { display: flex; flex-flow: row wrap; flex-flow: row wrap; justify-content: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="4029e9b4ea"]) { display: flex; flex-direction: column; align-items: center; justify-content: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="823ee37c33"]) { display: flex; flex-flow: row wrap; justify-content: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="358a8325aa"]) { grid-column:1;grid-row:1; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="fb2f6c87d1"]) { grid-column:2;grid-row:1; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9b53367741"]) { grid-column:3;grid-row:1; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="ddb24c813c"]) { grid-column:4;grid-row:1; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="09dc123620"]) { grid-column:5;grid-row:1; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="a30866b6c9"]) { grid-column:7;grid-row:1; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="698bb8e5c1"]) { grid-column:8;grid-row:1; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="8e9806384f"]) { grid-column:9;grid-row:1; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="3e98507e57"]) { grid-column:10;grid-row:1; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="75d76e5b88"]) { grid-column:11;grid-row:1; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9dc5dde654"]) { grid-column:1;grid-row:2; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="769a677004"]) { grid-column:2;grid-row:2; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="847681a4f2"]) { grid-column:3;grid-row:2; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="99f458c6d3"]) { grid-column:4;grid-row:2; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="541cc7d9a1"]) { grid-column:5;grid-row:2; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f71f84ed22"]) { grid-column:7;grid-row:2; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f5a74fce2c"]) { grid-column:8;grid-row:2; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="8d6da8d380"]) { grid-column:9;grid-row:2; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="82fc7f5066"]) { grid-column:10;grid-row:2; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="c831af416a"]) { grid-column:11;grid-row:2; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="3d19c87387"]) { grid-column:1;grid-row:3; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="ebb6db0ac6"]) { grid-column:2;grid-row:3; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="1ec46977dd"]) { grid-column:3;grid-row:3; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="d6033bce1b"]) { grid-column:4;grid-row:3; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="b4ee6c1130"]) { grid-column:5;grid-row:3; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="a734a0a44d"]) { grid-column:7;grid-row:3; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="3d4e7ee2ea"]) { grid-column:8;grid-row:3; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="ae726c088f"]) { grid-column:9;grid-row:3; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="b432c41c5f"]) { grid-column:10;grid-row:3; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="e8134b0c31"]) { grid-column:11;grid-row:3; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9663261cdd"]) { grid-column:1;grid-row:4; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="ae6ee0b7e2"]) { grid-column:2;grid-row:4; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="ffedeec88b"]) { grid-column:3;grid-row:4; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9901c93b43"]) { grid-column:4;grid-row:4; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="351f474e0c"]) { grid-column:5;grid-row:4; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="4b3d8f9599"]) { grid-column:7;grid-row:4; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="47bfa38370"]) { grid-column:8;grid-row:4; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="258c68fa73"]) { grid-column:9;grid-row:4; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="745879aee8"]) { grid-column:10;grid-row:4; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="448952812f"]) { grid-column:11;grid-row:4; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="57fb6c5a78"]) { grid-column:1;grid-row:5; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="a3804b8de6"]) { grid-column:2;grid-row:5; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f3521af26e"]) { grid-column:3;grid-row:5; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="5f2fa7dee1"]) { grid-column:4;grid-row:5; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="2af82ebed0"]) { grid-column:5;grid-row:5; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="a2d14eedad"]) { grid-column:7;grid-row:5; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="783316646f"]) { grid-column:8;grid-row:5; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="c133cc865c"]) { grid-column:9;grid-row:5; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="00a9e8c22f"]) { grid-column:10;grid-row:5; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f20a73471b"]) { grid-column:11;grid-row:5; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="198b660498"]) { grid-column:1;grid-row:7; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="493229a2ec"]) { grid-column:2;grid-row:7; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="ac96ec5f14"]) { grid-column:3;grid-row:7; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="c77cc282b3"]) { grid-column:4;grid-row:7; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="0302214b21"]) { grid-column:5;grid-row:7; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="e8425a9d6e"]) { grid-column:7;grid-row:7; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="5efa9ab185"]) { grid-column:8;grid-row:7; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="502d969119"]) { grid-column:9;grid-row:7; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="28c5da184f"]) { grid-column:10;grid-row:7; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="1b3a2f7cb1"]) { grid-column:11;grid-row:7; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="1a9771386f"]) { grid-column:1;grid-row:8; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9b8975c99b"]) { grid-column:2;grid-row:8; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="20b61d0c81"]) { grid-column:3;grid-row:8; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="24711bf3e8"]) { grid-column:4;grid-row:8; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="6601024a8a"]) { grid-column:5;grid-row:8; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="bbf039c205"]) { grid-column:7;grid-row:8; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="e058ac82bd"]) { grid-column:8;grid-row:8; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="7a285ccc5b"]) { grid-column:9;grid-row:8; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="fa87ccffcd"]) { grid-column:10;grid-row:8; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="ea7adc94b7"]) { grid-column:11;grid-row:8; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="967f65cdd7"]) { grid-column:1;grid-row:9; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9972ffa228"]) { grid-column:2;grid-row:9; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="67e48d42a1"]) { grid-column:3;grid-row:9; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="035404f50b"]) { grid-column:4;grid-row:9; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="efa0a3d716"]) { grid-column:5;grid-row:9; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="adc5c35df5"]) { grid-column:7;grid-row:9; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="80136c26c1"]) { grid-column:8;grid-row:9; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="6cea749cb8"]) { grid-column:9;grid-row:9; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="3f03706835"]) { grid-column:10;grid-row:9; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="625a36586e"]) { grid-column:11;grid-row:9; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="184ad755b2"]) { grid-column:1;grid-row:10; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="2747f6bdb7"]) { grid-column:2;grid-row:10; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9b04c5218d"]) { grid-column:3;grid-row:10; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="df0c21238d"]) { grid-column:4;grid-row:10; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="d9c3976ac8"]) { grid-column:5;grid-row:10; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="3fc2324552"]) { grid-column:7;grid-row:10; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="e42ee2ca65"]) { grid-column:8;grid-row:10; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="e1a507681a"]) { grid-column:9;grid-row:10; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="820a80c7fd"]) { grid-column:10;grid-row:10; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="df5e31ffb6"]) { grid-column:11;grid-row:10; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="bb75123f95"]) { grid-column:1;grid-row:11; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="72173f39ae"]) { grid-column:2;grid-row:11; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9ff002b8ca"]) { grid-column:3;grid-row:11; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="d4da0df26b"]) { grid-column:4;grid-row:11; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="c0b7818ed2"]) { grid-column:5;grid-row:11; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="e3f44eb3b9"]) { grid-column:7;grid-row:11; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="ade82c3eec"]) { grid-column:8;grid-row:11; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="b84ac6a0e2"]) { grid-column:9;grid-row:11; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="5e08d2f95e"]) { grid-column:10;grid-row:11; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="92c6f068c2"]) { grid-column:11;grid-row:11; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="98d041b0f1"]) { display: flex; align-items: center; gap: 0.2em; font-size: 1.5em; font-weight: bold; flex-wrap: wrap; justify-content: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="0be075dafd"]) { display: inline-block; text-align: center; margin: 0 0.2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="21ac0eeafe"]) { display: inline-block; text-align: center; margin-right: 0.4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="bc9103de5f"]) { font-size: 1em; border: 0.08em solid black; border-radius: 0.4em; width: 4em; text-align: right; box-sizing: border-box; margin-left: 0.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="8b424f074a"]) { text-align: right; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="07a2b10b39"]) { text-align: center; padding: 0 0.4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="7faa8534ce"]) { display: inline-block; text-align: center; margin-left: 0.4em; margin-right: 0.4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="4657f7daab"]) { font-size: 1em; border: 0.08em solid black; border-radius: 0.4em; width: 4em; text-align: right; box-sizing: border-box; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="651311dd4f"]) { display: inline-block; text-align: center; min-width: 2.2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="1a0a76d334"]) { display: inline-block; text-align: center; margin: 0 0.3em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="409c9b4096"]) { display: inline-block; text-align: center; min-width: 1em; margin-right: 0.3em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="63dbf5319a"]) { text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="cdcee34a09"]) { font-size: 1em; border: 0.08em solid black; border-radius: 0.4em; width: 5em; text-align: right; box-sizing: border-box; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="5ec0da88ee"]) { display:block; width:100%; height:auto; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="369a75c7b1"]) { background-color: #eeeeee; border-radius: 12px 0 0 12px; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="c71ce2c987"]) { background-color: #eeeeee; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="948955f40e"]) { background-color: #eeeeee; border-radius: 0 12px 12px 0; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f676937e7d"]) { display: flex; flex-direction: column; align-items: center; gap: 0.35em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="60e2120b2d"]) { display: flex; justify-content: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="94c38bdb61"]) { font-size: 1.2em; border: 0.08em solid black; border-radius: 0.4em; width: 3em; height: 2.5em; text-align: center; box-sizing: border-box; background-color: white; color: black; font-weight: bold; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="05ba0c3ba3"]) { display: flex; justify-content: center; gap: 0.35em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="973a110400"]) { display: flex; align-items: center; justify-content: center; font-size: 1.2em; border: 0.08em solid white; border-radius: 0.4em; width: 3em; height: 2.5em; background-color: lightgrey; color: black; font-weight: bold; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="7c27d1c775"]) { margin-right: 0.4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="a7ca3d3a8e"]) { margin-left: 0.4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="822b847937"]) { background-color: #111111; border-radius: 0.8em; padding: 1em; max-width: 95vw; box-sizing: border-box; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="d0e1af2d6e"]) { display: inline-block; text-align: center; min-width: 3em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f647df01dd"]) { display: inline-block; text-align: center; min-width: 1em; margin-right: 0.4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="8ee5e198a3"]) { text-align: center; padding: 0 0.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="5024bdb46f"]) { display:flex; flex-direction: column; align-items: center; margin-top: 2em; width: 100%; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="6002cc2920"]) { margin-top: 0; margin-bottom: 1.5em; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="4366cf869f"]) { margin-bottom: 1em; font-size: 2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="0e08312171"]) { display: flex; flex-flow: row wrap; justify-content: center; gap: 1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="b2e1dc5a94"]) { width: min(20vw, 18vh); max-width: 150px; border: 0.15em solid white; border-radius: 0.6em; background-color: white; padding: 0.25em; cursor: pointer; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="edee86d320"]) { display: inline-block; text-align: center; margin-left: 0.4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="4a0b636579"]) { align-items:center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f1ff77e5dd"]) { color:red; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="02c0629e0f"]) { color:blue; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="5f326564a5"]) { text-align:right; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="53bed7cec2"]) { flex-flow: row wrap; justify-content: flex-center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="cfec463e2f"]) { margin-top: 18px; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="a57c6070bb"]) { background-color: white; color: black; border-radius: 0.8em; width: fit-content; max-width: 95vw; box-sizing: border-box; text-align: center; padding: 1em; overflow-x: auto; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="4e7e53fc1b"]) { font-size: 2em; padding: 0.2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="1be555490a"]) { background-color: white; color: black; border-radius: 0.8em; width: fit-content; max-width: 95vw; box-sizing: border-box; padding: 1em; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="306d0bbee9"]) { font-size: 1.2em; font-weight: bold; cursor: pointer; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="52a57b7bc1"]) { border-collapse: collapse; margin: 1em auto 0 auto; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="0ac2e9e8ed"]) { width: 100%; display: flex; justify-content: center; margin-bottom: 1.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="4e4a36ba1f"]) { display: flex; flex-flow: row wrap; justify-content: center; gap: 1em; margin-bottom: 2em; width: 100%; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9c42428341"]) { padding: 0.8em; border-radius: 0.8em; font-size: 1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="02b17045ff"]) { color: black; background-color: lightgrey; padding: 1em 2em; border: 0.1em solid black; border-radius: 1em; font-size: 1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="d4c96eb1b4"]) { display: flex; align-items: center; gap: 0.3em; font-size: 1.5em; font-weight: bold; flex-wrap: wrap; justify-content: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="3d715b1c9e"]) { font-size: 1em; border: 0.08em solid black; border-radius: 0.4em; width: 6em; text-align: right; box-sizing: border-box; margin-left: 0.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="59a79c1fa1"]) { background-color: white; color: black; border-radius: 0.8em; width: fit-content; max-width: 90vw; box-sizing: border-box; text-align: center; padding: 1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="1f021639ec"]) { border-collapse: collapse; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="594bcccebd"]) { background-color: white; color: black; border-radius: 0.8em; width: fit-content; max-width: 90vw; box-sizing: border-box; padding: 1em; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="7f87d756a4"]) { display: flex; flex-flow: row wrap; gap: 1em; justify-content: center; margin: 1em 0; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="935d00c1c2"]) { display: flex; flex-direction: column; align-items: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="7304443a3f"]) { font-size: 1.5em; border-radius: 0.4em; border: 0; padding: 0.4em; background-color: #eeeeee; color: red; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="d9e3ded270"]) { font-size: 1.5em; border-radius: 0.4em; border: 0; padding: 0.4em; background-color: #eeeeee; color: blue; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="59d285fcc2"]) { font-size: 1.5em; border-radius: 0.4em; border: 0; padding: 0.4em; background-color: #eeeeee; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="095edb9e0f"]) { background-color: white; color: black; border-radius: 0.8em; width: 100%; max-width: 90vw; box-sizing: border-box; padding: 1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="19eb701c81"]) { width: 100%; overflow-x: auto; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="8fe5259100"]) { border-collapse: collapse; margin: 0 auto; white-space: nowrap; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="222a84866d"]) { font-size: 2em; width: 1.5em; height: 1.5em; background: #eeeeee; border: 0.06em solid black; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="5b2f7bdf90"]) { border-right: 0.2em solid black; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="3ceef9e0c2"]) { font-size:3em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="993ed9d856"]) { font-size: 1em; margin-bottom: 0.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="1be9601179"]) { display: inline-block; text-align: center; min-width: 2.4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="abf011859b"]) { display: inline-block; text-align: center; min-width: 1.2em; margin-right: 0.4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f87d6105f4"]) { width: 1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="ba00624a17"]) { margin-bottom: 1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="72ebf5b87d"]) { background-color: white; color: black; border-radius: 0.8em; padding: 1em; width: fit-content; max-width: 90vw; box-sizing: border-box; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="48cdba47fb"]) { font-size: 2.4em; font-weight: bold; padding: 0.2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="27dfa74430"]) { font-size: 1.4em; border: 0.08em solid black; border-radius: 0.4em; width: 3em; text-align: center; box-sizing: border-box; padding: 0.2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="e4e83dbf68"]) { background-color: white; color: black; border-radius: 0.8em; padding: 1em; width: fit-content; max-width: 90vw; box-sizing: border-box; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="26b1a9c01a"]) { font-size: 1.2em; font-weight: bold; cursor: pointer; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="0dbba53c68"]) { display: flex; flex-flow: row wrap; gap: 1em; justify-content: center; align-items: center; margin: 1em 0; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9b7ec08979"]) { font-size: 1.5em; width: 2.4em; height: 2.4em; border-radius: 0.4em; border: 0.08em solid black; background: #eeeeee; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9b7f44d6cb"]) { display: flex; flex-flow: row wrap; justify-content: center; gap: 1em; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="1d46981276"]) { display: flex; flex-direction: column; align-items: center; gap: 0.3em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="d309311d8e"]) { font-size: 2em; width: 2.3em; height: 2.3em; border-radius: 0.5em; border: 0; background: yellow; color: red; cursor: pointer; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="fdfe44cf60"]) { font-size: 2em; width: 2.3em; height: 2.3em; border-radius: 0.5em; border: 0; background: #eeeeee; color: black; cursor: pointer; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9eefbcecb9"]) { background: rgba(255,255,255,0.08); border-radius: 1em; padding: 1em; max-width: 95vw; overflow-x: auto; text-align: center; box-sizing: border-box; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="2fc12e3acc"]) { font-size: 1.2em; font-weight: bold; margin-top: 0; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="2b9bfc51cb"]) { padding: 0.15em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="4c958c58b7"]) { font-size: 1em; width: 2em; height: 2em; border: 0.08em solid black; background: #eeeeee; border-radius: 0.3em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="eb552291a4"]) { padding: 0.15em; border-right: 0.25em solid white; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="e04032416a"]) { background: rgba(255,255,255,0.08); border-radius: 1em; padding: 1em; text-align: center; box-sizing: border-box; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="491e89a131"]) { font-size: 2.4em; font-weight: bold; color: red; padding: 0.2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="58c54e046d"]) { font-size: 2.4em; font-weight: bold; color: deepskyblue; padding: 0.2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="d8d84ebd50"]) { font-size: 1.5em; border: 0.08em solid black; border-radius: 0.4em; width: 3em; text-align: center; box-sizing: border-box; padding: 0.2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="a2e9de4aac"]) { padding:1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="20f2a0cd62"]) { color: white; font-size: 1.1em; text-decoration: none; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="83ee984002"]) { background-color: white; color: black; border-radius: 0.8em; width: fit-content; max-width: 90vw; box-sizing: border-box; text-align: center; padding: 1em; overflow-x: auto; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="351cac52ae"]) { font-weight: bold; font-size: 1.2em; margin-bottom: 0.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f420f7bd2a"]) { font-size: 1.8em; padding: 0.2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9333217048"]) { background-color: white; color: black; border-radius: 0.8em; width: fit-content; max-width: 90vw; box-sizing: border-box; text-align: center; padding: 1em 2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="c036330c0a"]) { font-size: 2em; font-weight: bold; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="21c164b037"]) { font-size: 2em; margin: 0.2em 0; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="a06548671a"]) { display: flex; flex-direction: column; gap: 1.5em; align-items: center; width: 100%; max-width: 65em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="eeaa64c395"]) { background-color: #111111; border-radius: 0.8em; padding: 1em; width: 100%; box-sizing: border-box; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="20237e7418"]) { text-align: center; font-size: 1.2em; margin-top: 0; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="639dfb700d"]) { display: flex; flex-flow: row wrap; gap: 0.5em; justify-content: center; align-items: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="3ab347075e"]) { font-size: 1.8em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="b0a5dc4a74"]) { display: flex; flex-flow: row wrap; justify-content: center; gap: 0.7em; max-width: 90vw; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9036453464"]) { font-size: 1em; border: 0.08em solid black; border-radius: 0.4em; width: 3em; height: 3em; text-align: center; box-sizing: border-box; background-color: #ffffff; color: #111111; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="98547709a6"]) { font-size: 0.8em; font-weight: normal; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="568050b873"]) { background-color: white; color: black; border-radius: 0.8em; width: fit-content; max-width: 90vw; box-sizing: border-box; text-align: center; padding: 1.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="ee739b4084"]) { display: flex; flex-direction: column; align-items: center; gap: 0.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9a0e76433d"]) { font-size: 1.6em; border: 0.08em solid black; border-radius: 0.4em; width: 3em; text-align: center; box-sizing: border-box; padding: 0.2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="d4d9c3711a"]) { display: flex; justify-content: center; gap: 0.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="ab48f2c48a"]) { font-size: 1.6em; width: 3em; min-height: 1.8em; display: flex; align-items: center; justify-content: center; border: 0.08em solid black; border-radius: 0.4em; background-color: #eeeeee; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="652d41b972"]) { border-collapse: separate; border-spacing: 0.6em; text-align: center; max-width: 90vw; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="86e48817cb"]) { font-size: 2em; background-color: #eeeeee; color: black; border-radius: 0.4em; padding: 0.3em 1em; margin-bottom: 0.5em; font-weight: bold; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="d53ef2bba4"]) { font-size: 1.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="583b00e52b"]) { padding: 1em; background-color: purple; color: white; width: 8em; height: 4em; text-align: left; border-radius: 0.8em; font-size: 1.6em; box-sizing: border-box; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="2e5b01844f"]) { padding: 1em; background-color: orange; color: black; width: 8em; height: 4em; text-align: center; border-radius: 0.8em; font-size: 1.6em; box-sizing: border-box; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="183fe453ae"]) { width: fit-content; border-collapse: collapse; text-align: center; font-size: 1.2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="ffa7d21719"]) { width: 1.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="d5314026de"]) { text-align: right; padding: 0.1em 0.4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f55ad356a7"]) { text-align: center; padding: 0.1em 0.4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="81e17844e8"]) { display: flex; flex-flow: row wrap; gap: 1.5em; align-items: flex-start; justify-content: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="57bf5126c2"]) { margin-top: 0; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9a2f343e21"]) { font-size: 2em; text-align: center; width: 2em; height: 2em; border: 0.06em solid black; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="4e658de4cf"]) { border: 0.06em solid black; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="e2de2ffb8e"]) { font-size: 1.4em; width: 2.4em; height: 2.4em; text-align: center; border: 0; box-sizing: border-box; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="032265b6df"]) { border-collapse: separate; border-spacing: 0.5em; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="d5ce0df607"]) { font-size: 2.5em; background-color: lightgrey; color: black; border-radius: 0.4em; padding: 0.2em 1em; margin-bottom: 0.5em; font-weight: bold; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="7009475e78"]) { font-size: 2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="8e2c6abfcb"]) { padding: 1em; background-color: purple; color: white; width: 8em; height: 4em; text-align: left; border-radius: 0.8em; font-size: 1.5em; box-sizing: border-box; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="9cd529e53f"]) { padding: 1em; background-color: orange; color: black; width: 8em; height: 4em; text-align: left; border-radius: 0.8em; font-size: 1.5em; box-sizing: border-box; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="19ba545e76"]) { display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; gap: 2em; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="4571da1fc2"]) { font-size: 1.2em; color: red; font-weight: bold; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="fed52d1da6"]) { font-size: 1.2em; font-weight: bold; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="acf0dfd57d"]) { font-size: 1.2em; color: dodgerblue; font-weight: bold; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="53edc4cf89"]) { display: flex; flex-flow: row wrap; gap: 1.5em; align-items: flex-start; justify-content: center; width: 100%; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="fcb899e360"]) { width: 1.5em; height: 1.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="0369d474a5"]) { width: fit-content; border-collapse: collapse; text-align: right; font-size: 1.1em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="d0ac29c3d2"]) { padding: 0.2em 0.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="697b5b6f9d"]) { padding: 0.2em 0.5em; font-weight: bold; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="2ad5e4528b"]) { font-size: 2em; width: 2.3em; height: 2.3em; border-radius: 0.5em; border: 0; background: #eeeeee; color: blue; cursor: pointer; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f0cea4e324"]) { font-size: 1em; border: 0.08em solid black; border-radius: 0.4em; width: 7em; text-align: right; box-sizing: border-box; margin-left: 0.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="5db64cd874"]) { padding: 0.2em 0.6em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="b161ec9d90"]) { display: inline-block; text-align: center; min-width: 3ch; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="5daa890811"]) { display: inline-block; text-align: center; min-width: 3ch; margin-right: 0.4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="99edb77434"]) { font-size: 1em; border: 0.08em solid black; border-radius: 0.4em; width: 5em; text-align: right; box-sizing: border-box; margin-left: 0.5em; padding: 0.2em 0.4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="4d7258c25e"]) { color:#aaa; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="df928149c5"]) { margin-top:10px; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="3d502aa33f"]) { width: 3em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="5b57e69b4d"]) { color: white; border-radius: 0.8em; width: fit-content; max-width: 90vw; box-sizing: border-box; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="76bedf62e3"]) { font-size: 2em; line-height: 1.6; margin: 0.2em 0; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="a727571462"]) { font-size: 1.2em; cursor: pointer; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="ea5fada68c"]) { text-align: left; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="a322b586f7"]) { font-size: 1em; border: 0.08em solid black; border-radius: 0.4em; width: 4em; text-align: righ; box-sizing: border-box; margin-left: 0.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="66a84ce714"]) { display:block; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="6d31a746a6"]) { width: 4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="536a206d28"]) { font-size: 1.2em; font-weight: bold; margin-bottom: 0.5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="286279ed0d"]) { text-align: center; padding: 0.2em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="b05e4e5bc1"]) { text-align: center; padding: 0.2em; border-bottom: 0.08em solid black; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="4bbfe81e59"]) { width: 15em; text-align: center; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="0200a203ea"]) { font-family: 'Grundschrift', Arial, sans-serif; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="86d8d8507a"]) { font-size: 6em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="054f3dda95"]) { background-color: red; color: white; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="e768c61c8d"]) { background-color: orange; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f6430ef6b3"]) { background-color: yellow; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f3ce14aad5"]) { background-color: lightgreen; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="e403a77e8c"]) { background-color: darkgreen; color: white; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="e3cebde8c4"]) { background-color: lightblue; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="2859b4026c"]) { background-color: darkblue; color: white; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="2296473db7"]) { background-color: purple; color: white; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="6acdee34d3"]) { background-image: linear-gradient(#483D8B, #2F4F4F); min-height: 100vh; font-family: 'Grundschrift', Arial, sans-serif; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="1fbf920fd1"]) { display: flex; flex-flow: row wrap; justify-content: space-around; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="b39a6b99e1"]) { text-decoration: none; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="12ca717aee"]) { width: 6vw; height: 6vw; max-width: 6em; max-height: 6em; min-width: 5em; min-height: 5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="8c2d6f05f6"]) { hyphens: auto; max-width: fit-content; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="324e4a911b"]) { display: flex; flex-direction: column; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="01d87950b4"]) { display: flex; flex-flow: row wrap; justify-content: center; width: fit-content; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="1b219de198"]) { font-size: 8vmax; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="322c0edcbe"]) { background-image: radial-gradient(#ff4848 10%, #3a0303); }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="2346cc6f90"]) { background-color: green; color: white; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="6849ee12c5"]) { background-color: blue; color: white; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="8a00568081"]) { background-color: darkviolet; color: white; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="7463c6ed42"]) { font-size: 4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="0acfec65ec"]) { background-color: red; color: white; width: 12em; height: 5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="f592d9b6d1"]) { background-color: orange; width: 12em; height: 5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="d719d20f5d"]) { background-color: yellow; width: 12em; height: 5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="08f6a58b66"]) { background-color: lightgreen; width: 12em; height: 5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="05d028c82a"]) { background-color: darkgreen; color: white; width: 12em; height: 5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="5f88fec228"]) { background-color: lightblue; width: 12em; height: 5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="7518d0483f"]) { background-color: darkblue; color: white; width: 12em; height: 5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="3cb85c0593"]) { background-color: purple; color: white; width: 12em; height: 5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="3277c590c6"]) { background-color: darkviolet; color: white; width: 12em; height: 5em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="79267cddab"]) { background-color: red; color: white; width: 10em; height: 4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="5eb4ae5ade"]) { background-color: orange; width: 10em; height: 4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="1e5f67676a"]) { background-color: yellow; width: 10em; height: 4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="72c8462797"]) { background-color: lightskyblue; width: 10em; height: 4em; }
:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="53fb8cb582"]) { font-size: 3em; color: white; }

/* E-Mail-Layout für die Geometrie-Auswertung
body{font-family: 'Grundschrift', Arial, sans-serif;color:#000;background:#fff;}
h2,h3{font-family: 'Grundschrift', Arial, sans-serif;}
table{border-collapse:collapse;width:100%;margin-bottom:24px;}
th,td{border:1px solid #999;padding:8px;text-align:left;vertical-align:top;}
th{background:#222;color:#fff;}
img{max-width:90px;height:auto;object-fit:contain;}
.text-richtig{color:green;font-weight:bold;}
.text-falsch{color:red;font-weight:bold;}
*/

/* Bildlinks für die Navigation */
a.image-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem;
    vertical-align: middle;
    border-radius: .6rem;
}

a.image-nav-link img {
    display: block;
    width: clamp(3rem, 9vw, 4rem);
    height: clamp(3rem, 9vw, 4rem);
    object-fit: contain;
    border-radius: .4rem;
}

a.image-nav-link:hover {
    box-shadow: inset 0 0 0 1px var(--accent);
}

/* Notennamen und Notenwerte */
.notenuebung {
    width: min(100%, 36rem);
    margin-inline: auto;
    padding: clamp(.75rem, 3vw, 1.5rem);
    box-sizing: border-box;
    border-radius: 1rem;
    background: #111015;
    color: #fff;
}

.notenuebung > :is(fieldset, .notenuebung-bild, .notenuebung-aktion) {
    width: 100%;
    box-sizing: border-box;
}

.notenuebung-bild {
    display: grid;
    place-items: center;
    border-radius: .75rem;
    background: #fff;
}

.notenuebung-bild img {
    display: block;
    width: min(100%, 16rem);
    aspect-ratio: 240 / 166;
    object-fit: contain;
}

.notenuebung fieldset {
    min-width: 0;
    margin: 1rem 0 0;
    padding: 0;
    border: 0;
}

.notenuebung legend {
    padding: 0 0 .4rem;
    color: #e7def6;
}

.notenuebung-auswahl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
}

.notenuebung button {
    min-height: 3.25rem;
    padding: .35rem .5rem;
    border: 2px solid #554467;
    border-radius: .75rem;
    background: #2c2439;
    color: #fff;
    font: inherit;
}

.notenuebung button[data-richtig="true"] {
    border-color: #76d38e;
    background: #196339;
    color: #fff;
}

.notenuebung button[data-richtig="false"] {
    border-color: #f58c8c;
    background: #8c2934;
    color: #fff;
}

.notenuebung-aktion {
    min-height: 1.5em;
    margin-top: 1rem;
}

.notenuebung-aktion output[data-richtig="true"] {
    color: #a6edb8;
}

.notenuebung-abschluss {
    text-align: center;
}

@media (max-width: 460px) {
    .notenuebung-auswahl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.lied-notensystem {
    display: block;
    width: min(100%, 42rem);
    height: auto;
}

.eigener-takt {
    width: min(100%, 42rem);
    margin-bottom: 2rem;
}

/* Match the note centers at x = 152, 218, 284 and 350 in the SVG viewBox. */
.eigener-takt-auswahl {
    display: grid;
    grid-template-columns: minmax(0, 119fr) repeat(4, minmax(0, 66fr)) minmax(0, 37fr);
    justify-items: center;
    margin-top: .5rem;
}

.eigener-takt-auswahl select:first-child {
    grid-column: 2;
}

.eigener-takt-auswahl select {
    box-sizing: border-box;
    width: min(100%, 4.5rem);
    min-width: 0;
    min-height: 2.75rem;
    padding-inline: clamp(.125rem, 1vw, .5rem);
    border-radius: .6rem;
    font: inherit;
}

.lied-zweitakt-rahmen {
    overflow-x: auto;
}

.lied-zweitakt {
    width: min(100%, 56rem);
    min-width: 34rem;
    margin-inline: auto;
}

.lied-zweitakt .lied-notensystem {
    width: 100%;
}

.lied-zweitakt .eigener-takt-auswahl {
    grid-template-columns: minmax(0, 119fr) repeat(8, minmax(0, 66fr)) minmax(0, 37fr);
}

.lied-zweitakt + .lied-zweitakt {
    margin-top: 1rem;
}

.lied-rhythmus-zeile {
    width: min(100%, 56rem);
    min-width: 34rem;
    margin-inline: auto;
}

.lied-rhythmus-zeile[data-takte="1"] {
    width: min(100%, 42rem);
    min-width: 22rem;
}

.lied-rhythmus-zeile .lied-notensystem {
    width: 100%;
}

.lied-rhythmus-zeile + .lied-rhythmus-zeile {
    margin-top: 1rem;
}

.lied-rhythmus-auswahl {
    display: grid;
    grid-template-columns: minmax(0, 119fr) repeat(var(--schlaege), minmax(0, 66fr)) minmax(0, 37fr);
    margin-top: .5rem;
}

.lied-rhythmus-auswahl > div {
    width: min(100%, 4.75rem);
    justify-self: center;
}

.lied-rhythmus-auswahl select {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 2.5rem;
    padding-inline: .125rem;
    border-radius: .6rem;
    font: inherit;
    font-size: .9rem;
}

.lied-rhythmus-auswahl select + select {
    margin-top: .25rem;
}

.lied-rhythmus > button {
    margin-top: 1rem;
}

/* Zahlenkette bis 5 */
.zahlenkette:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="764880d87e"]) {
  padding-inline: clamp(0.5rem, 3vw, 1rem);
  padding-bottom: 3.7rem;
}

.zahlenkette td {
  position: relative;
  vertical-align: middle;
}

.zahlenkette .zahlenkette-schritt:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="8fbf78f844"]) {
  line-height: 0.85;
  padding-inline: 0.1em;
}

.zahlenkette-schritt span {
  display: block;
  font-size: 0.58em;
  font-weight: bold;
  white-space: nowrap;
}

.zahlenkette input:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="de432ab6fd"]) {
  width: clamp(2rem, 12vw, 3.6rem);
  min-width: 0;
}

.zahlenkette input:disabled {
  background: #f2f2f2;
  color: #151515;
  opacity: 1;
}

.zahlenkette input:enabled {
  background: #fff5c4;
  outline: 3px solid #1655a1;
  outline-offset: 1px;
}

.zahlenkette input[data-richtig="1"] {
  background: #e0f4e5;
}

.zahlenkette-haken {
  display: none;
  position: absolute;
  top: 100%;
  inset-inline: 0;
  color: #166534;
  font-weight: bold;
}

.zahlenkette input[data-richtig="1"] + .zahlenkette-haken {
  display: block;
}

.zahlenkette-hinweis {
  position: absolute;
  top: calc(100% + 1.25rem);
  left: 50%;
  transform: translateX(-50%);
  color: #164882;
  font-weight: bold;
  white-space: nowrap;
}

.zahlenkette td:last-child .zahlenkette-hinweis {
  left: auto;
  right: 0;
  transform: none;
}

.zahlenkette input[aria-invalid="true"] ~ .zahlenkette-hinweis {
  color: #8a2920;
}

.zahlenkette-start {
  font-size: 1.2em;
  font-weight: bold;
}

@media (max-width: 520px) {
  :is(.zahlenketten-bis10, .zahlenketten-bis20, .zahlenketten-bis100) td:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="4394cc3043"]) {
    padding-inline: 0;
  }

  :is(.zahlenketten-bis10, .zahlenketten-bis20, .zahlenketten-bis100) .zahlenkette-schritt:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="8fbf78f844"]) {
    font-size: clamp(1rem, 4.4vw, 1.4rem);
  }

  :is(.zahlenketten-bis10, .zahlenketten-bis20, .zahlenketten-bis100) input:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="de432ab6fd"]) {
    width: clamp(1.65rem, 8vw, 2.6rem);
    padding-inline: 0;
  }

  :is(.zahlenketten-bis10, .zahlenketten-bis20, .zahlenketten-bis100) .zahlenkette-hinweis {
    left: 0;
    transform: none;
  }

  :is(.zahlenketten-bis10, .zahlenketten-bis20, .zahlenketten-bis100) td:nth-child(n+8) .zahlenkette-hinweis {
    left: auto;
    right: 0;
  }
}

@media (max-width: 520px) {
  .zahlenketten-bis100 .zahlenkette-start,
  .zahlenketten-bis100 input:is(#lernbolt-format#lernbolt-format#lernbolt-format, [data-format="de432ab6fd"]) {
    font-size: clamp(0.9rem, 3.7vw, 1.2rem);
  }
}

/* Zahl suchen bis 5 */
.zahlensuche {
  width: min(100% - 2rem, 36rem);
  margin: 1rem auto 3rem;
  text-align: center;
}

.zahlensuche h1 {
  margin: 0 0 1.4rem;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  line-height: 1.1;
}

.zahlensuche h1 strong {
  display: block;
  color: #9ef1cd;
  font-size: clamp(4.5rem, 18vw, 7rem);
}

.zahlensuche-kacheln {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.4rem, 2vw, .85rem);
}

.zahlensuche-kacheln button {
  position: relative;
  min-height: clamp(3.5rem, 14vw, 6rem);
  padding: 0;
  border: 0;
  border-radius: .75rem;
  background: transparent;
  color: #171717;
  font-size: clamp(1.9rem, 7vw, 3rem);
  font-weight: 700;
  line-height: 1;
  perspective: 40rem;
  cursor: pointer;
}

.zahlensuche-karte {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 320ms ease-in-out;
}

.zahlensuche-kacheln [data-antwort] .zahlensuche-karte {
  transform: rotateY(180deg);
}

.zahlensuche-verdeckt,
.zahlensuche-offen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: .75rem;
  background: #faf7ed;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.zahlensuche-offen {
  transform: rotateY(180deg);
}

.zahlensuche-kacheln [data-antwort="richtig"] .zahlensuche-offen {
  background: #a7edb9;
  color: #124a25;
}

.zahlensuche-kacheln [data-antwort="falsch"] .zahlensuche-offen {
  background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .zahlensuche-karte {
    transition: none;
  }
}

.zahlensuche-haken {
  display: none;
  position: absolute;
  inset: auto .2rem .2rem auto;
  font: bold .9rem/1 Arial, sans-serif;
}

.zahlensuche-kacheln [data-antwort="richtig"] .zahlensuche-haken {
  display: block;
}

.zahlensuche-hinweis {
  min-height: 1.5em;
  margin: .75rem 0 0;
  color: var(--accent);
}

.zahlensuche-weiter {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.zahlensuche-weiter a {
  display: grid;
  place-items: center;
  padding: .55rem;
  border-radius: .75rem;
  background: #faf7ed;
}

.zahlensuche .fortschrittssterne {
  gap: clamp(.35rem, 2vw, .65rem);
  margin-top: .5rem;
}

.zahlensuche .fortschrittsstern {
  font-size: clamp(1.8rem, 7vw, 2.4rem);
}

.zahlensuche-bis20 {
  width: min(100% - 2rem, 48rem);
}

.zahlensuche-bis20 .zahlensuche-kacheln button {
  min-height: 3.5rem;
  font-size: clamp(1.6rem, 5vw, 2.3rem);
}

@media (min-width: 640px) {
  .zahlensuche-bis20 .zahlensuche-kacheln {
    position: relative;
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .zahlensuche-bis20 .zahlensuche-kacheln::after {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 50%;
    width: 2px;
    border-radius: 1px;
    background: #aaa;
    transform: translateX(-50%);
    pointer-events: none;
  }
}

@media (max-width: 639px) {
  .zahlensuche-bis20 .fortschrittssterne {
    display: grid;
    grid-template-columns: repeat(5, max-content);
  }
}

.zahlensuche-bis100 {
  width: min(100% - 2rem, 42rem);
}

.zahlensuche-hunderterfeld {
  overflow-x: auto;
  padding: .4rem;
}

.zahlensuche-hunderterfeld .zahlensuche-kacheln {
  position: relative;
  grid-template-columns: repeat(10, minmax(2.75rem, 1fr));
  min-width: 32rem;
  gap: .5rem;
}

.zahlensuche-hunderterfeld .zahlensuche-kacheln button {
  min-height: 2.75rem;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
}

.zahlensuche-hunderterfeld .zahlensuche-kacheln::before,
.zahlensuche-hunderterfeld .zahlensuche-kacheln::after {
  content: "";
  position: absolute;
  background: #aaa;
  border-radius: 1px;
  pointer-events: none;
}

.zahlensuche-hunderterfeld .zahlensuche-kacheln::before {
  inset-block: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
}

.zahlensuche-hunderterfeld .zahlensuche-kacheln::after {
  inset-inline: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
}

/* Plusaufgaben bis 5 malen und rechnen */
.malaufgabe {
    text-align: center;
}

.malaufgabe-karte {
    --malfarbe-rot: #b52036;
    --malfarbe-blau: #155bb3;
    box-sizing: border-box;
    width: min(100% - 1.5rem, 32rem);
    margin: 0 auto 3rem;
    padding: clamp(.75rem, 4vw, 2rem);
    border-radius: 1.25rem;
    background: #f8f6ff;
    color: #1f1830;
}

.malaufgabe-rechnung {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.35rem, 3vw, 1rem);
    font-size: clamp(2rem, 10vw, 3.5rem);
    font-weight: bold;
}

.malaufgabe-rot,
.malaufgabe-karte[data-schritt="rot"] .malaufgabe-auftrag {
    color: var(--malfarbe-rot);
}

.malaufgabe-blau,
.malaufgabe-karte[data-schritt="blau"] .malaufgabe-auftrag {
    color: var(--malfarbe-blau);
}

.malaufgabe-rechnung input {
    box-sizing: border-box;
    width: 1.55em;
    padding: .05em;
    border: 2px solid #746786;
    border-radius: .2em;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: center;
}

.malaufgabe-rechnung input[maxlength="3"] {
    width: 2.75em;
}

.malaufgabe-rechnung input:read-only {
    background: #eae5f3;
}

.malaufgabe-karte[data-schritt="rechnen"] input:not(:read-only) {
    border-color: #603a9a;
    box-shadow: 0 0 0 .16em #e0cffc;
}

.malaufgabe-karte[data-schritt="richtig"] input {
    border-color: #216c43;
    background: #216c43;
    color: #fff;
}

.malaufgabe-auftrag {
    margin: 1rem 0 .75rem;
    font-size: clamp(1.25rem, 4.5vw, 1.65rem);
    font-weight: bold;
}

.malaufgabe-felder {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 4.5rem));
    justify-content: center;
    gap: clamp(.3rem, 1.5vw, .65rem);
}

.malaufgabe-felder-zehn {
    grid-template-columns: repeat(10, minmax(0, 2.25rem));
    gap: clamp(.2rem, 1vw, .45rem);
}

.malaufgabe-felder-geteilt {
    grid-template-columns: repeat(5, minmax(0, 2.25rem)) 2px repeat(5, minmax(0, 2.25rem));
}

.malaufgabe-trennlinie {
    background: #746786;
}

.malaufgabe-trennlinie-durchgehend {
    grid-column: 6;
    grid-row: 1 / 3;
}

.malaufgabe-felder button {
    aspect-ratio: 1;
    min-width: 0;
    padding: 0;
    border: 2px solid #746786;
    border-radius: .6rem;
    background: #fff;
    cursor: pointer;
}

.malaufgabe-felder [data-farbe="rot"] {
    background: var(--malfarbe-rot);
    border-color: var(--malfarbe-rot);
}

.malaufgabe-felder [data-farbe="blau"] {
    background: var(--malfarbe-blau);
    border-color: var(--malfarbe-blau);
}

.malaufgabe-karte #radierer {
    min-height: 44px;
    margin-top: .85rem;
    padding: .3rem .75rem;
    border: 2px solid #746786;
    border-radius: .6rem;
    background: #fff;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.malaufgabe-karte #radierer[aria-pressed="true"] {
    border-color: #603a9a;
    background: #e0cffc;
}

.malaufgabe-karte :is(button, input):focus-visible {
    outline: 3px solid #603a9a;
    outline-offset: 3px;
}

.malaufgabe-hinweis {
    min-height: 1.5em;
    margin: .6rem 0 0;
    font-size: 1.15rem;
}

.malaufgabe-karte #malfarben {
    margin: .65rem 0 0;
    font-size: 1rem;
}

.malaufgabe-zehneruebergang .kartenbereich {
    display: grid;
    justify-items: center;
    gap: .8rem;
    margin-top: 1rem;
}

.malaufgabe-zehneruebergang .rechenkarte {
    width: 100%;
    padding: .65rem .3rem;
    border: 2px solid #d8cde9;
    border-radius: .75rem;
    background: #fff;
    color: inherit;
}

.malaufgabe-zehneruebergang .rechenkarte h3 {
    margin: 0 0 .35rem;
}

.malaufgabe-zehneruebergang .rechentabelle {
    margin-inline: auto;
    border-spacing: .1em;
    font-size: clamp(1rem, 4vw, 1.5rem);
}

.malaufgabe-zehneruebergang .rechentabelle td {
    padding: .08em;
}

.malaufgabe-zehneruebergang .rechentabelle .zahl {
    min-width: 0;
    font-size: 1em;
}

.malaufgabe-zehneruebergang .rechentabelle input {
    width: 2em;
    padding: 0;
    border: 2px solid #746786;
    border-radius: .25em;
    background: #f8f6ff;
    color: inherit;
    text-align: center;
}

.malaufgabe-zehneruebergang .text-red { color: var(--malfarbe-rot); }
.malaufgabe-zehneruebergang .text-blue { color: var(--malfarbe-blau); }

.malaufgabe-karte[data-ohne-malhinweise] .malaufgabe-felder-hundert {
    margin-top: 1.25rem;
}

.malaufgabe-felder-hundert .malaufgabe-trennlinie-durchgehend {
    grid-row: 1 / 11;
}

.malaufgabe-felder-waagerecht-geteilt {
    position: relative;
}

.malaufgabe-felder-waagerecht-geteilt::after {
    content: "";
    position: absolute;
    grid-column: 1 / -1;
    grid-row: 5 / 7;
    inset-inline: 0;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: #746786;
    pointer-events: none;
}

.malaufgabe-zehnerwahl {
    display: block;
    width: fit-content;
    margin: .65rem auto 0;
    cursor: pointer;
}

.malaufgabe-feldwahl {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: .65rem;
}

.malaufgabe-feldwahl label {
    position: relative;
    cursor: pointer;
}

.malaufgabe-feldwahl input {
    position: absolute;
    opacity: 0;
}

.malaufgabe-feldwahl-option {
    display: grid;
    justify-items: center;
    gap: .3rem;
    min-width: 7rem;
    padding: .45rem;
    border: 2px solid #746786;
    border-radius: .6rem;
    background: #fff;
    font-size: 1rem;
    font-weight: bold;
}

.malaufgabe-feldwahl input:checked + .malaufgabe-feldwahl-option {
    border-color: #603a9a;
    background: #e0cffc;
}

.malaufgabe-feldwahl input:focus-visible + .malaufgabe-feldwahl-option {
    outline: 3px solid #603a9a;
    outline-offset: 3px;
}

.malaufgabe-feldwahl-bild {
    display: flex;
    gap: 2px;
}

.malaufgabe-feldwahl-bild span {
    width: .5rem;
    height: .5rem;
    border-radius: 2px;
    background: #603a9a;
}