/**
 * Mathetopia-Oberflaeche
 *
 * Ruhiges digitales Arbeitsblatt: hohe Lesbarkeit, klare Hierarchie und nur
 * eine zurueckhaltende Akzentfarbe. Die Variablen halten normale Blaetter und
 * Schulaufgaben gestalterisch zusammen.
 */
:root {
  --mt-ink: #17252b;
  --mt-muted: #607078;
  --mt-line: #d7e0e3;
  --mt-paper: #ffffff;
  --mt-page: #eef3f4;
  --mt-accent: #176b72;
  --mt-accent-dark: #0f4f55;
  --mt-accent-soft: #e4f1f2;
  --mt-warn-soft: #fff6dd;
  --mt-radius: 12px;
  --mt-shadow: 0 2px 12px rgba(23, 37, 43, 0.08);
}

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--mt-page);
  color: var(--mt-ink);
  font-family: Arial, Helvetica, sans-serif;
}

a {
  color: var(--mt-accent-dark);
  text-underline-offset: 2px;
}


/** Example rules used by the template application (remove for your app) */
h1 {
  font-size: 2em;
  font-weight: bold;
  color: #777777;
  margin: 40px 0px 70px;
  text-align: center;
}

.sendButton {
  display: block;
  font-size: 16pt;
}
.liste {
  color: black;
  font-size: 24pt;
}

.textArea{
	size: 800pt;
}

.beginn, .begin, .richtig, .falsch, .umformungFalsch, .rechenwegUnklar, .unbekannt, .schulaufgabeNeutral, .fertig, .zwischenschrittFertig, .pfad1,.textfeld,.textArea,.schriftlichrichtig,.schriftlichfalsch,.schriftlichrichtigMitBorder,.schriftlichfalschMitBorder,.schriftlich{
  font-size: 16pt;
  border-radius: 8px;
  font-family: Computer Modern Schriftfamilie;
}

.beginn {
  color: black;
  text-align: center;
}
.richtig,.schriftlichrichtig,.schriftlichrichtigMitBorder {
  color: green;
}

.falsch,.schriftlichfalsch,.schriftlichfalschMitBorder {
  color: red;
}

.buchstabenmodus {
  margin-left: 10px;
}
.modul button.buchstabenmodusAktiv,
.modul button.buchstabenmodusAktiv:hover,
.modul button.buchstabenmodusAktiv:focus {
  background: #23684b;
  border: 2px solid #174c36;
  color: #fff;
  box-shadow: inset 0 0 0 1px #fff;
}

.schriftlichrichtig,.schriftlichfalsch,.schriftlichrichtigMitBorder,.schriftlichfalschMitBorder{
  text-align: center;	
}

.schriftlich{
  color: black;
  text-align: center;
}
.umformungFalsch {
  color: red;
}

/* Mathematisch richtig, aber die konkrete Umformung ist nicht verifizierbar.
   Anthrazit statt Gelb/Orange bleibt auf hellem Hintergrund gut lesbar; die
   gepunktete Linie unterscheidet den Status auch vom normalen schwarzen Text. */
.rechenwegUnklar {
  color: #202124;
  font-weight: 600;
  text-decoration: underline dotted #6b6f76;
  text-underline-offset: 3px;
}

/* Auswahlbox: semantisch klare, gut treffbare Antworten statt einer Reihe
   kleiner Standard-Kontrollkaestchen. Die Beschriftung darf auf schmalen
   Bildschirmen umbrechen, ohne abgeschnitten zu werden. */
.auswahlbox-liste {
  box-sizing: border-box;
  padding: 4px 0 2px;
  width: 100%;
}

.auswahlbox-option {
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--mt-line);
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  line-height: 1.35;
  margin: 0 0 6px;
  min-height: 36px;
  padding: 7px 10px;
  width: 100%;
}

.auswahlbox-option:hover {
  background: var(--mt-accent-soft);
  border-color: #a9c8cb;
}

.auswahlbox-option:focus-within {
  box-shadow: 0 0 0 2px rgba(23, 107, 114, 0.22);
  outline: none;
}

.auswahlbox-option input {
  flex: 0 0 auto;
  margin: 3px 9px 0 0;
}

.auswahlbox-option label {
  cursor: pointer;
  white-space: normal;
}

.auswahlbox-pruefen {
  margin-top: 2px;
  min-height: 34px;
  padding: 5px 14px;
}

/* Zahlen-Pool fuer das schrittweise schriftliche Rechnen */
.poolDialog .gwt-Label {
  font-size: 16pt;
  font-family: Computer Modern Schriftfamilie;
}
.poolDialog button {
  font-size: 16pt;
}
.poolDialog input {
  font-size: 18pt;
}
.poolZahl, .poolZahlGewaehlt {
  font-size: 22pt;
  border-radius: 8px;
  font-family: Computer Modern Schriftfamilie;
  margin: 4px;
  padding: 4px 12px;
}
.poolZahlGewaehlt {
  background: #cce5ff;
  border: 2px solid #004a99;
}
.poolVorschau {
  font-size: 18pt;
  font-family: Computer Modern Schriftfamilie;
}
.poolMeldung, .poolMeldungRichtig, .poolMeldungFalsch {
  font-size: 16pt;
  min-height: 26px;
}
.poolMeldungRichtig {
  color: green;
}
.poolMeldungFalsch {
  color: red;
}
.poolVerlauf {
  font-size: 16pt;
  color: #444444;
  margin-top: 6px;
}
.poolVerlaufHinweis {
  color: #004a99;
  font-style: italic;
}

.klein {
  color: black;
  font-size: 1pt;
}

.modul{
	/* DockLayoutPanel setzt Lage und Breite dieses Widgets selbst. Zentrierung
	   oder max-width hier macht die von GWT berechneten Module unsichtbar. */
	width: 100%;
	margin: 0;
	padding: 7px 22px;
	box-sizing: border-box;
	border-spacing: 0;
	background: var(--mt-paper);
}
/* Eine Aufgabe ohne "Aufgabe:"/"Teilaufgabe:" traegt ihre BE in einer eigenen Zeile.
   flow-root haelt die schwebende Pille in dieser Zeile, sonst rutschte sie in den
   Aufgabentext darunter. */
.be-zeile {
	display: flow-root;
}
.modul .modul {
	/* Unteraufgaben sollen nicht bei jeder technischen Verschachtelung erneut
	   eingerueckt werden. So beginnen auch alle Tippzeilen auf derselben Achse. */
	padding-left: 0;
	padding-right: 0;
}
/* Durch Leerzeilen im Blatt strukturell getrennte Aufgabenbloecke. Mehrere
   Module desselben Blocks werden optisch zu einer Karte verbunden. */
.modul.aufgabenblock:not(.gleichungsAufgabe):not(.gleichungsAbschluss):not(.schnittpunktAbschluss) {
	box-sizing: border-box;
	border: 1px solid #d2e0e2;
	border-left: 4px solid #8db9bd;
	border-radius: 9px;
	background: #f8fbfb;
}
.modul.aufgabenblock.aufgabenblockMitFortsetzung:not(.gleichungsAufgabe) {
	border-bottom: 0;
	border-radius: 9px 9px 0 0;
}
.modul.aufgabenblock.aufgabenblockFortsetzung:not(.gleichungsAbschluss):not(.schnittpunktAbschluss) {
	border-top: 0;
	border-radius: 0 0 9px 9px;
}
.modul.aufgabenblock.aufgabenblockFortsetzung.aufgabenblockMitFortsetzung {
	border-radius: 0;
}
.modul.gleichungsModul {
	padding-top: 11px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--mt-line);
}
.modul.gleichungsAufgabe {
	margin-top: 10px;
	border: 1px solid #d2e0e2;
	border-left: 4px solid #8db9bd;
	border-radius: 9px;
	background: #f8fbfb;
}
.modul.gleichungsAufgabe.gleichungsMitAbschluss {
	/* Aufgabe und Loesungsmenge bilden eine Karte. An ihrer inneren Naht darf
	   nicht der volle normale Kartenabstand stehen bleiben; 4 px gleichen den
	   Abstand zur Tippzeile an die Abstaende innerhalb der Aufgabe an. */
	padding-bottom: 4px;
	border-bottom: 0;
	border-radius: 9px 9px 0 0;
}
.modul.gleichungsAufgabe.gleichungsMitSchnittpunkt {
	padding-bottom: 7px;
	border-bottom: 0;
	border-radius: 9px 9px 0 0;
}
.modul.schnittpunktAbschluss {
	margin-bottom: 10px;
	padding-top: 5px;
	padding-bottom: 12px;
	border: 1px solid #d2e0e2;
	border-top: 0;
	border-left: 4px solid #8db9bd;
	border-radius: 0 0 9px 9px;
	background: #f8fbfb;
}
.schnittpunkte {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 34px;
	box-sizing: border-box;
	width: 100%;
	min-height: 58px;
}
.schnittpunkte > .modul {
	flex: 0 1 390px;
	width: 390px;
	padding: 0;
	background: transparent;
}
.schnittpunkte .SchnittpunktPanel {
	box-sizing: border-box;
	width: 100% !important;
	border-radius: 8px;
}
.schnittpunkte .textfeld {
	border-color: #bfd0d2;
	border-radius: 8px;
}
.plusMinusSplitten,
.gleichungsMethodenButton {
	min-width: 126px;
	white-space: nowrap;
}
.modul.gleichungsAbschluss {
	border: 1px solid #d2e0e2;
	border-top: 0;
	border-left: 4px solid #8db9bd;
	border-radius: 0 0 9px 9px;
	background: #f8fbfb;
}
.modul.gleichungsModul.gleichungsAbschluss {
	/* Der Abschluss folgt optisch als letzte Zeile derselben Aufgabe. Der Tipp
	   braucht deshalb oberhalb keinen zweiten Karteninnenabstand. */
	padding-top: 0;
	padding-bottom: 8px;
}
.modul.gleichungsAbschluss .gleichungsAktionen {
	padding-top: 0;
	padding-bottom: 2px;
}
.modul.gleichungsAbschluss .textfeldzeile {
	width: min(400px, 100%) !important;
}
.gleichungsZeilennummer,
.gleichungsPraefix {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	color: #50686b;
	font-size: 0.95rem;
	font-weight: 600;
}
.gleichungsZeilennummer {
	padding-right: 4px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.125rem;
	font-weight: 600;
}
.gleichungsPraefix {
	height: 100%;
	color: var(--mt-ink);
	/* Praefix und Eingabe gehoeren typografisch zu derselben Gleichung. */
	font-family: Computer Modern Schriftfamilie;
	font-size: 16pt;
	font-weight: 400;
}
.modul.gleichungsAbschluss .gleichungsPraefix {
	/* Computer Modern sitzt in einer geometrisch zentrierten Box optisch tiefer
	   als der Text im Eingabefeld. Grundlinie sichtbar angleichen. */
	transform: translateY(-8px);
}
.gleichungsAktionen {
	box-sizing: border-box;
	width: 100%;
	padding: 3px 0 4px;
}
.gleichungsAktionen > tbody > tr > td {
	padding-right: 7px;
	vertical-align: middle;
}
.tipPanel.gleichungsTipp {
	display: inline-grid;
	grid-template-columns: max-content;
	width: auto !important;
	padding: 0;
}
.tipPanel.gleichungsTipp .tipText {
	grid-column: 1;
	max-width: 760px;
}
.gleichungsZuruecksetzen {
	display: block;
	box-sizing: content-box;
	margin: 0 2px;
	padding: 2px;
	border: 1px solid #c8d5d7;
	border-radius: 6px;
	background: #f7f9f9;
	opacity: 0.68;
	cursor: pointer;
}
.gleichungsZuruecksetzen:hover,
.gleichungsZuruecksetzen:focus {
	opacity: 1;
	border-color: #9db7ba;
	background: #eef5f5;
}
.textfeld:disabled,
.textfeld[disabled],
.ausgangsgleichung,
.gleichungsModul input:disabled {
	opacity: 1;
	box-sizing: border-box;
	border: 1px solid #bfd0d2 !important;
	border-radius: 8px;
	border-color: #bfd0d2 !important;
	background: #edf4f4 !important;
	color: var(--mt-ink) !important;
}
.ausgangsgleichung {
	width: 100% !important;
	background: #f3f6f6 !important;
}
.textfeldzeile > .ausgangsgleichung,
.textfeldzeile .ausgangsgleichung.gwt-Composite {
	box-sizing: border-box;
}
/* Nach dem Aufteilen einer Gleichung liegen die Teilmodule direkt an der
   Clipkante ihrer Tabellenspalte. Etwas Innenraum haelt die Feldkontur
   vollstaendig sichtbar und fasst jeden Rechenweg dezent zusammen. */
.mChild.loesungszweig {
	box-sizing: border-box;
	padding: 8px 10px 10px;
	border: 1px solid #d7e2e4;
	border-radius: 8px;
	background: #fbfdfd;
}
.umformungsfeld input::placeholder {
	font-size: 14pt;
}
/* Aufgabentext. War mit 13px die KLEINSTE Schrift auf dem Blatt, waehrend die
   Eingabefelder 21px hatten - ausgerechnet die Aufgabenstellung war am
   schwersten zu lesen. */
.text {
	font-size: 16px;
	line-height: 1.55;
	color: var(--mt-ink);
	overflow-wrap: anywhere;
}

/* Voraussetzung zur Aufgabe: sichtbar, aber bewusst leiser als die Angabe. */
.voraussetzung {
	font-size: 0.86rem;
	line-height: 1.4;
	color: var(--mt-muted);
	margin: 2px 0 4px 0;
	overflow-wrap: anywhere;
}
.modul table {
	width:100%;
}

/* Alte Aufgaben benutzen Tabellen als Rahmen. Ohne die Blattdateien sofort
   umzubauen, werden daraus ruhigere Aufgabenkarten. Explizite Tabellen mit
   cellspacing="0" (z. B. Bilderreihen) bleiben kompakt. */
.text table[border="1"] {
	border: 1px solid var(--mt-line);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--mt-radius);
	background: #fbfcfc;
	box-shadow: var(--mt-shadow);
	overflow: hidden;
}
.text table[border="1"] td {
	border: 0;
	padding: 14px 16px;
}
.text table[bgcolor] {
	border: 0;
	border-left: 5px solid var(--mt-accent);
	border-radius: 8px;
	background: var(--mt-accent-soft) !important;
}
.text img {
	max-width: 100%;
	height: 520px;
	border-radius: 10px;
}
.modul button {
	padding: 5px 10px;
	border: 1px solid #bdc9cd;
	border-radius: 7px;
	background: #fff;
	color: var(--mt-accent-dark);
	font: 600 13px Arial, Helvetica, sans-serif;
	cursor: pointer;
}
.modul button:hover,
.modul button:focus {
	border-color: var(--mt-accent);
	background: var(--mt-accent-soft);
}
.modul button:focus-visible,
.modul input:focus-visible,
.modul textarea:focus-visible,
.modul select:focus-visible,
.miniTastatur button:focus-visible,
.miniTastatur select:focus-visible {
	outline: 3px solid rgba(23, 107, 114, 0.28);
	outline-offset: 2px;
}
.modul button:active,
.miniTastatur button:active {
	transform: translateY(1px);
}
.modul button:disabled {
	border-color: var(--mt-line);
	background: #f5f7f7;
	color: #8a979c;
	cursor: default;
}
.bilderreihe img {
	width: auto;
	height: 220px;
	object-fit: cover;
}
.bilderreihe {
	width: auto !important;
	margin: 0;
}
.bilderreihe td {
	vertical-align: top;
}
.bildunterschrift {
	margin-top: -7px;
	color: var(--mt-muted);
	font-size: 0.86rem;
	font-weight: 600;
	text-align: center;
}

/* Leerer Arbeitsbereich ist ohne Erklaerung leicht mit einem Ladefehler zu
   verwechseln. Die Startseite zeigt deshalb den ersten sinnvollen Schritt. */
.startseite {
	max-width: 540px;
	margin: 11vh auto 0;
	padding: 40px 48px 34px;
	border: 0;
	border-radius: 18px;
	background: var(--mt-paper);
	box-shadow: var(--mt-shadow);
	text-align: center;
}
.startseite-logo {
	display: block;
	width: 150px;
	height: 138px;
	margin: 0 auto;
	object-fit: contain;
	border-radius: 18px;
}
.startseite .startseite-titel {
	margin: 20px 0 10px;
	color: var(--mt-ink);
	font-size: 1.65rem;
	font-weight: 700;
}
.startseite .startseite-einstieg {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--mt-muted);
	font-size: 1.05rem;
	line-height: 1.5;
}
.merksatz-des-tages {
	margin-top: 26px;
	padding: 16px 18px;
	border: 1px solid var(--mt-line);
	border-left: 4px solid var(--mt-accent);
	border-radius: 10px;
	background: var(--mt-accent-soft);
	text-align: left;
}
.merksatz-des-tages span {
	color: var(--mt-muted);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.merksatz-des-tages p {
	margin: 7px 0 0;
	color: var(--mt-ink);
	font-size: 1rem;
	line-height: 1.45;
}

/* Semantische Bausteine fuer neue bzw. modernisierte Blaetter. */
.pruefung-kopf,
.hinweisblock,
.aufgabenkarte {
	box-sizing: border-box;
	width: 100%;
}
.blatt-titel {
	box-sizing: border-box;
	width: 100%;
	margin: 2px 0 12px;
	padding: 4px 2px 10px;
	border-bottom: 2px solid var(--mt-accent);
}
.blatt-titel-haupt {
	margin: 0;
	color: var(--mt-accent-dark);
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.25;
}
.blatt-titel-zusatz {
	margin: 3px 0 0;
	color: #536467;
	font-size: 0.95rem;
	line-height: 1.35;
}
.pruefung-kopf {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px 28px;
	padding: 22px 24px;
	border-top: 7px solid var(--mt-accent);
	border-radius: var(--mt-radius);
	background: var(--mt-paper);
	box-shadow: var(--mt-shadow);
}
.pruefung-titel {
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: -0.015em;
}
.pruefung-fach {
	color: var(--mt-accent-dark);
	font-weight: 700;
}
.pruefung-meta {
	text-align: right;
	color: var(--mt-muted);
}
.hinweisblock {
	margin-top: 14px;
	padding: 13px 16px;
	border: 1px solid #ead9aa;
	border-radius: 9px;
	background: var(--mt-warn-soft);
}
.teil-balken {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 18px 0 8px;
	padding: 10px 16px;
	border-radius: 8px;
	background: var(--mt-accent-dark);
	color: white;
	font-weight: 700;
	letter-spacing: 0.025em;
}
.teil-balken small {
	font-weight: 400;
	opacity: 0.9;
}
.aufgabenkarte {
	position: relative;
	display: flow-root;   /* haelt die BE-Pille im Kasten, auch bei kurzem Text */
	margin: 8px 0 4px;
	padding: 16px 18px;
	border: 1px solid var(--mt-line);
	border-left: 4px solid var(--mt-accent);
	border-radius: var(--mt-radius);
	background: #fbfcfc;
	box-shadow: var(--mt-shadow);
}
.aufgaben-titel {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--mt-accent-dark);
}
.be-punkte {
	float: right;
	margin-left: 12px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--mt-accent-soft);
	color: var(--mt-accent-dark);
	font-size: 0.82rem;
	font-weight: 700;
}
.teilaufgabe {
	box-sizing: border-box;
	display: flow-root;   /* wie bei der Karte: die BE-Pille bleibt im Kasten */
	margin-top: 8px;
	padding: 9px 12px 9px 2.55em;
	border-left: 4px solid var(--mt-accent);
	background: linear-gradient(90deg, var(--mt-accent-soft), rgba(232, 244, 244, 0) 72%);
	text-indent: -1.8em;
}
@media (max-width: 700px) {
	.modul {
		width: 100%;
		padding: 6px 12px;
	}
	.text { font-size: 15px; }
	.pruefung-kopf { grid-template-columns: 1fr; padding: 16px; }
	.pruefung-meta { text-align: left; }
	.teil-balken { align-items: flex-start; flex-direction: column; gap: 2px; }
}

@media print {
	:root { --mt-page: #fff; --mt-shadow: none; }
	.modul { width: 100%; padding-left: 0; padding-right: 0; }
	.pruefung-kopf, .aufgabenkarte { break-inside: avoid; }
}

.unbekannt {
  color: red;
}

/* Schulaufgabenmodus: bewusst neutral wie auf Papier — weder rot noch gruen */
.schulaufgabeNeutral {
  color: black;
}

.fertig {
  color: blue;
}

.zwischenschrittFertig {
  color: green;
  text-decoration: underline

}


/** Most GWT widgets already have a style name defined */
.gwt-DialogBox {
  width: 400px;
}

.dialogVPanel {
  margin: 5px;
}

.serverResponseLabelError {
  color: red;
}

/** Set ids using widget.getElement().setId("idOfElement") */
#closeButton {
  margin: 15px 6px 6px;
}

.abgabeErfolgreich{
  color: green;
  font-size: 32pt;
}
.abgabeFehlgeschlagen{
  color: red;
  font-size: 32pt;
}

.websiteAktualisiert{
  color: red;
  font-size: 32pt;
}

.fehlerMeldung{
  color: red;
  font-size: 20pt;
}

.buttontastatur{
  color: var(--mt-ink);
  font-size: 20px;
  min-width: 40px;
  padding: 5px 10px;
  border: 1px solid #bdc9cd;
  border-radius: 6px;
  background: #fff;
}
.quadratExponent {
	position: relative;
	top: -0.28em;
	margin-left: 1px;
	font-size: 0.62em;
	line-height: 0;
}

.buttontastaturBruch{
	display: inline-flex;
	height: 44px;
	align-items: center;
	justify-content: center;
	padding-top: 3px;
	padding-bottom: 3px;
	overflow: visible;
}
.bruchSymbol {
	display: inline-flex;
	min-width: 18px;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	vertical-align: middle;
	font-size: 13px;
	line-height: 13px;
}
.bruchSymbol span {
	display: block;
	height: 13px;
	text-align: center;
}
.bruchSymbol span:first-child {
	border-bottom: 2px solid currentColor;
}

.tipPanel {
	display: grid;
	grid-template-columns: minmax(0, 760px) 1fr;
	align-items: start;
	gap: 5px 8px;
	box-sizing: border-box;
	width: 100%;
	padding: 3px 0 2px;
	text-align: left;
}
.modul .tipButton {
	flex: 0 0 auto;
	justify-self: start;
	max-width: 100%;
	white-space: normal;
	text-align: left;
	border-color: #c8d5d7;
	background: #f7f9f9;
	color: #52696c;
	font-size: 0.82rem;
}
.modul .tipButton:hover,
.modul .tipButton:focus {
	border-color: #9db7ba;
	background: #eef5f5;
	color: var(--mt-ink);
}
.tipText {
	grid-column: 1;
	min-width: 0;
	padding: 8px 11px;
	border: 1px solid #c8dddd;
	border-left: 4px solid var(--mt-accent);
	border-radius: 7px;
	background: var(--mt-accent-soft);
	color: var(--mt-ink);
	font-size: 14px;
	line-height: 1.35;
}


.menubar{
  position: fixed;
  font-size: 28pt;
	
}
.gwt-MenuBar .gwt-MenuItem {
   cursor: pointer;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
   font-weight: 600;
   padding: 9px 13px;
}

/* Ruhiger Anwendungsrahmen: Das Blatt bleibt der visuelle Mittelpunkt. */
.mathetopiaKopf {
	box-sizing: border-box;
	border-bottom: 1px solid var(--mt-line);
	background: #fff;
}
.mathetopiaKopfLogo {
	box-sizing: border-box;
	width: 50px;
	height: 50px;
	margin: 7px 6px;
	border-radius: 8px;
	object-fit: contain;
}
.hauptmenue {
	box-sizing: border-box;
	width: 100%;
	padding: 4px 12px 4px 0;
	background: #fff;
}
.hauptmenue .gwt-MenuItem-selected {
	border-radius: 7px;
	background: var(--mt-accent-soft);
	color: var(--mt-accent-dark);
}
.miniTastatur {
	box-sizing: border-box;
	padding: 5px 10px;
	border-bottom: 1px solid var(--mt-line);
	background: #fff;
	box-shadow: 0 3px 9px rgba(23, 37, 43, 0.06);
}
.mathetopiaWerkzeugleiste {
	box-sizing: border-box;
	background: #fff;
	box-shadow: 0 3px 9px rgba(23, 37, 43, 0.06);
}
.mathetopiaWerkzeugleiste .miniTastatur {
	box-shadow: none;
}
.miniTastatur table { border-spacing: 4px 0 !important; }
.miniTastatur td { padding: 0 !important; }
.miniTastatur button,
.miniTastatur select {
	box-sizing: border-box;
	height: 44px;
	min-width: 40px;
	border: 1px solid #bdc9cd !important;
	border-radius: 7px !important;
	background-color: #fff;
	font-size: 20px;
}
.miniTastatur select {
	padding-right: 10px;
	padding-left: 10px;
}

.gwt-TabLayoutPanelTabs {
	box-sizing: border-box;
	height: 100%;
	display: flex;
	align-items: flex-end;
	padding-left: 14px !important;
	border-bottom: 1px solid var(--mt-line);
	background: #e8eef0 !important;
}
.gwt-TabLayoutPanelTab {
	margin: 0 3px 0 0 !important;
	padding: 7px 13px !important;
	border-radius: 8px 8px 0 0;
	color: var(--mt-muted);
	background: #dce5e7 !important;
}
.gwt-TabLayoutPanelTab-selected {
	color: var(--mt-accent-dark) !important;
	background: #fff !important;
}

.notenPanel {
	box-sizing: border-box;
	padding: 5px 10px 5px 4px;
	background: #fff;
}
.notenKarte {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 8px;
	box-sizing: border-box;
	padding: 5px 8px;
	border: 1px solid var(--mt-line);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(23, 37, 43, 0.07);
}
.notenKarte.nurZeit {
	grid-template-columns: 1fr;
}
.notenTitel {
	box-sizing: border-box;
	padding: 0;
	color: var(--mt-muted);
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.note, .punkte {
	box-sizing: border-box;
	grid-row: 2;
	padding: 2px 4px;
	color: var(--mt-accent-dark);
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

.gwt-Label .gwt-HTML{
  font-size: 26pt;
}
.SchnittpunktPanel,.split{
	padding: 0.5 em;
	display: table-cell;
   vertical-align: middle;
   text-align: center;
}
.Schnittpunkt, .Intervall, .abcAblesen{
  font-size: 2em;
  margin-top: 4px
}
.abcAblesen {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	box-sizing: border-box;
	height: 35px !important;
	margin-top: 0;
	font-size: 1.35rem;
	line-height: 1;
	/* Computer Modern hat in dieser Box eine optisch tiefere Grundlinie als
	   der Wert im benachbarten Eingabefeld. */
	transform: translateY(-4px);
}

.pfad1{
	display: table-cell;
	vertical-align: middle;
}

.ueberstreichen{
	text-dekoration: overline;
	color: blue;
}



.komandostrich{
	box-sizing: border-box;
	height: 40px !important;
	margin-top: 0;
	margin-left: 7px;
	border-left: 3px solid #111;
}
.komandostrich.ausgang {
	height: 52px !important;
	margin-top: 0;
}

.textfeldzeile{
	box-sizing: border-box;
	padding: 0;
}
.textfeldzeile input {
	box-sizing: border-box;
}

.arbeitsauftrag {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid #d2e0e2;
	border-left: 4px solid var(--mt-accent);
	border-radius: 7px;
	background: var(--mt-accent-soft);
}
.arbeitsauftrag + .beispielvideo,
.arbeitsauftrag .beispielvideo,
.text .beispielvideo {
	display: inline-block;
	margin-top: 7px;
	color: #416f73;
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration-color: #9bb7b9;
}

.TaschenrechnerDialog {
  background-color: white;
}

.knoten{
  font-size: 16px;
  border-radius: 8px;
  font-family: Computer Modern Schriftfamilie;
}

.knoten select,
select.knoten {
	box-sizing: border-box;
	height: 36px;
	border: 1px solid #bdc9cd;
	border-radius: 7px;
	background: #fff;
	font-size: 16px;
}

.plusMinusButton{
	box-sizing: border-box;
	min-height: 18px !important;
	padding: 0 !important;
	font-size: 11px !important;
	line-height: 14px;
}

.plusMinusButtonPanel{
	box-sizing: border-box;
	margin: 1px 0 0 3px;
}

.baumdiagramm-flaeche {
	box-sizing: border-box;
	max-width: 100%;
	margin: 4px auto 0;
	overflow: hidden;
	border: 1px solid var(--mt-line);
	border-radius: 9px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(23, 37, 43, 0.06);
}

.schriftlichrichtigMitBorder,.schriftlichfalschMitBorder{
  border-bottom: 2px solid black;	
}
.myBorder {
  border-bottom: 2px solid black;
}
.myDoubleBorder {
  border-bottom: 4px double black;
}


/* Schulaufgabenmodus: Tab-Leiste der Aufgabenblaetter ausblenden */
.schulaufgabeTabs .gwt-TabLayoutPanelTabs {
	display: none;
}

/* Ueberschrift ueber der ersten Aufgabe: ersetzt den Blattnamen aus der Tab-Leiste */
.schulaufgabeKopf {
	font-size: 20px;
	font-weight: bold;
	padding: 4px 0 6px 2px;
	border-bottom: 1px solid #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Lueckentext: Satz mit Eingabefeldern mittendrin */
.lueckentext {
	line-height: 2.4;
	padding: 4px 2px;
}
.lueckentextWort {
	font-size: 16px;
	vertical-align: middle;
}

/* Bausteine: Woerter oder Satzteile zum Anklicken */
.bausteine {
	padding: 4px 2px;
}
.baustein {
	margin: 3px 4px 3px 0;
	padding: 4px 10px;
	font-size: 14pt;
	border-radius: 8px;
	border: 1px solid #888;
	background: #f4f4f4;
	cursor: pointer;
}
/* schon benutzt: bleibt anklickbar, ein zweiter Klick nimmt ihn wieder weg */
.bausteinBenutzt {
	color: var(--mt-muted);
	background: var(--mt-accent-soft);
	border-color: #8db9bd;
	border-style: dashed;
}
.bausteinGewaehlt {
	border: 2px solid var(--mt-accent-dark);
	box-shadow: 0 0 0 2px rgba(23, 107, 114, 0.14);
	font-weight: bold;
}
.bausteineSatz {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 7px 12px;
	margin-top: 6px;
	padding: 6px 2px;
	font-size: 16px;
	line-height: 1.45;
	min-height: 1.6em;
	border-top: 1px solid #ccc;
}
.bausteinRueckgaengig {
	margin: 0;
	white-space: nowrap;
}
.bausteinRichtig {
	color: green;
}
.bausteinRueckgaengig:disabled {
	opacity: 0.45;
	cursor: default;
}
.bausteinZurueck {
	margin-left: 14px;
	font-size: 11pt;
}

/* Eingabefeld mitten im Lueckensatz */
.lueckeFeld {
	display: inline-block;
	width: 6em;
	font-size: 16px;
	font-family: inherit;
	text-align: center;
	border: 1px solid #888;
	border-radius: 6px;
	padding: 2px 4px;
	margin: 0 3px;
	vertical-align: middle;
}
.lueckeRichtig {
	color: green;
	border-color: green;
}
.lueckeFalsch {
	color: red;
	border-color: #c00;
}

/* Zeichenmodul M56: Der Canvas braucht einen sichtbaren Rand, sonst weiss der
   Schueler nicht, wo die Zeichenflaeche aufhoert. crosshair statt Pfeil, damit
   erkennbar ist, dass man hier Punkte setzt. */
.zeichenFlaeche {
	border: 1px solid #9aabad;
	border-radius: 8px;
	background-color: #ffffff;
	box-shadow: 0 1px 4px rgba(23, 37, 43, 0.08);
	cursor: crosshair;
	touch-action: none;
}

/* Reine Abbildungen aus dem Raytracer: klarer Abschluss und dieselbe ruhige
   Kontur wie die interaktiven Zeichenflaechen. */
.raytracer-panel {
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	/* Der Canvas liegt in einem dynamisch vermessenen DockLayoutPanel. Beim
	   Scrollen kann dessen Zwischenhoehe kurz kleiner als der Zeichenbereich
	   werden; overflow:hidden wuerde den gesamten Graphen dann abschneiden. */
	overflow: visible;
	min-height: 520px;
	border-radius: 9px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #9aabad, 0 1px 4px rgba(23, 37, 43, 0.08);
}
.raytracer-canvas {
	display: block;
	max-width: 100%;
}
.raytracer-panel .raytracer-canvas {
	width: 100%;
	height: auto;
	min-width: 0;
	min-height: 520px;
	border: 1px solid #9aabad;
	border-radius: 9px;
	box-sizing: border-box;
}

.zeichenMeldung {
	box-sizing: border-box;
	width: 744px;
	margin-top: 6px;
	padding: 11px 12px;
	border: 1px solid #c8dddd;
	border-left: 4px solid var(--mt-accent);
	border-radius: 8px;
	background: var(--mt-accent-soft);
	color: #404040;
	font-size: 13px;
	line-height: 1.4;
	box-shadow: 0 2px 8px rgba(23, 37, 43, 0.10);
}
.zeichenArbeitsbereich {
	position: relative;
	box-sizing: border-box;
	width: 100%;
}

/* Wertetabelle im Zeichenmodul: Rechenhilfe, keine Pflicht. Gruen/rot je Zelle -
   der richtige Wert wird bewusst nie angezeigt. */
.werteTabelle { width: 744px !important; border-collapse: collapse; margin-top: 4px; }
.werteTabelle td { border: 1px solid #b0b0b0; padding: 2px 6px; text-align: center; }
.werteZelle { width: 52px; text-align: center; border: none; }
.werteRichtig { background-color: #d8f5d8; }
.werteFalsch  { background-color: #f9d6d6; }

/* Werkzeugleiste links neben der Zeichenflaeche */
.zeichenKopf,
.zeichenUnten {
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	width: 744px;
	min-height: 42px;
}
.zeichenKopf {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	margin-left: 0;
	padding: 4px 8px;
	border: 1px solid var(--mt-line);
	border-bottom: 0;
	border-radius: 9px 9px 0 0;
	background: #f7fafb;
}
.zeichenKopf .gwt-Label {
	margin-right: 3px;
	color: var(--mt-muted);
	font-size: 13px;
	font-weight: 700;
}
.achsenGruppe,
.kurvenGruppe {
	display: flex;
	align-items: center;
	gap: 6px;
}
.achsenGruppe { justify-content: center; }
.kurvenGruppe .gwt-Label {
	color: var(--mt-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.kurvenGruppe select {
	box-sizing: border-box;
	width: 92px;
	height: 34px;
	border: 1px solid #bdc9cd;
	border-radius: 7px;
	background: #fff;
}
.zeichenKopf button,
.zeichenUnten button,
.zeichenRechts button,
.werkzeug {
	box-sizing: border-box;
	min-height: 34px;
	margin: 0;
	padding: 6px 10px;
	border: 1px solid #bdc9cd;
	border-radius: 7px;
	background: #fff;
	color: var(--mt-accent-dark);
	font: 600 13px Arial, Helvetica, sans-serif;
}
.zeichenUnten {
	display: flex;
	align-items: center;
	margin-left: 0;
	width: 744px;
	padding: 4px 8px;
	border: 1px solid var(--mt-line);
	border-top: 0;
	border-radius: 0 0 9px 9px;
	background: #f7fafb;
}
.zeichenKopf.zeichenMitWerkzeug { margin-left: 90px; }
.zeichenUnten.zeichenMitWerkzeug,
.zeichenMeldung.zeichenMitWerkzeug { margin-left: 90px; }
.zeichenMitte {
	width: auto !important;
	margin-left: auto;
	margin-right: auto;
	border-spacing: 0;
}
.zeichenMitte > tbody > tr > td { vertical-align: top !important; }
.werkzeugleiste { width: 84px; margin-right: 6px; }
.werkzeug { display: block; width: 78px; margin-bottom: 6px; padding-left: 5px; padding-right: 5px; font-size: 12px; }
.werkzeugAktiv { background-color: #0050c0; color: #ffffff; font-weight: bold; }
/* Zahlenstrahl: die Zeile, in der der Schueler bei Teilung:selbst die Skala festlegt. */
.zahlenstrahlSkala { margin-bottom: 4px; }
.zahlenstrahlSkala .gwt-Label { display: inline-block; margin-right: 6px; }
.zahlenstrahlSkala .gwt-TextBox { display: inline-block; vertical-align: middle; }
/* inline-block, sonst bricht der Hinweis als eigener Block in die zweite Zeile und
   verschwindet unter der Werkzeugleiste (im Browser gesehen, 13.10.2026). */
.zahlenstrahlHinweis { display: inline-block; color: #8a6d1f; font-size: 12px; margin-left: 10px; }
.zeichenLoeschen {
	margin-left: auto !important;
	border-color: #d8aaaa !important;
	color: #8e2929 !important;
	background: #fffafa !important;
}
.zeichenLoeschen:hover,
.zeichenLoeschen:focus {
	border-color: #b84a4a !important;
	background: #fff0f0 !important;
}
.zeichenModul {
	background: transparent;
}
.zeichenKopf:not(.zeichenMitWerkzeug),
.zeichenUnten:not(.zeichenMitWerkzeug),
.werteTabelle {
	margin-left: auto;
	margin-right: auto;
}
/* Mit Werkzeugleiste ist der Gesamtblock 90 px breiter. Kopf, Fuss und Meldung
   beginnen ueber dem Canvas, der komplette Block bleibt dennoch zentriert. */
.zeichenKopf.zeichenMitWerkzeug,
.zeichenUnten.zeichenMitWerkzeug {
	margin-left: calc(50% - 327px);
}

/* Die Meldung ist auf breiten Fenstern seitlich am Canvas verankert. Sie nimmt
   am Dock-Layout keine Hoehe ein und verschiebt deshalb weder Zeichnung noch
   folgende Teilaufgaben. Unter 1180 px gelten wieder die Dock-Koordinaten. */
@media (min-width: 1500px) {
	.zeichenMeldung {
		position: absolute;
		top: 0 !important;
		bottom: auto !important;
		left: calc(50% + 386px) !important;
		right: auto !important;
		width: 240px !important;
		height: auto !important;
		max-height: 390px;
		margin-top: 0;
		overflow: auto;
		z-index: 2;
	}
	.zeichenMeldung.zeichenMitWerkzeug {
		left: calc(50% + 431px) !important;
	}
}

@media (max-width: 1499px) {
	.zeichenMeldung {
		position: absolute;
		top: auto;
		position: relative;
		left: 0;
		right: 0;
		width: min(744px, 100%);
		height: auto !important;
		margin: 6px auto 0;
	}
}

/* Rechenbaum: Die Operanden stehen über der jeweils ausführenden Operation. */
.rechenbaum { padding: 12px; overflow-x: auto; }
.rechenbaum-term { font-weight: 600; margin-bottom: 8px; }
.rechenbaum-knoten { display: inline-flex; flex-direction: column; align-items: center; flex-shrink: 0; margin: 12px 8px; }
.rechenbaum-aeste { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
.rechenbaum-operation > .rechenbaum-aeste { border-bottom: 2px solid #607782; }
.rechenbaum-operation > .rechenbaum-feld::before { content: ''; display: block; height: 18px; border-left: 2px solid #607782; width: 0; margin: 0 auto; }
.rechenbaum-feld { text-align: center; }
.rechenbaum-feld select { min-width: 64px; min-height: 34px; }
.rechenbaum-feld input { width: 96px; min-height: 34px; margin-left: 6px; box-sizing: border-box; }
.rechenbaum-rueckmeldung { margin-top: 8px; padding: 8px; }
.rechenbaum-aeste > .rechenbaum-knoten { margin-bottom: 0; }
.rechenbaum-aeste > .rechenbaum-knoten::after { content: ''; height: 12px; border-left: 2px solid #607782; }
.eigenes-ereignis { padding: 12px; }
.eigenes-ereignis textarea { display: block; width: 96%; max-width: 900px; margin: 6px 0 14px; box-sizing: border-box; }
.eigenes-ereignis input { width: 120px; margin: 6px 0 14px; }


/* Wertetabellen: zusammenhaengende Zeilen, kompakte Felder ohne Zusatzbreite.
   Lange Tabellen scrollen innerhalb ihres Bereichs statt abgeschnitten zu werden. */
.wertetabelleBereich {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}
.wertetabelle {
  table-layout: fixed;
  border-collapse: collapse;
}
.wertetabelle td {
  padding: 2px;
}
.wertetabelle input {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  height: 32px;
  padding: 3px 2px;
  font-size: 16px;
  text-align: center;
}


/* M56: Anzeige passt in den Aufgabenblock; interne 744x420-Koordinaten bleiben. */
.zeichenMitte {
  width: 100% !important;
  max-width: 744px;
  table-layout: fixed;
}
.zeichenMitte.zeichenMitWerkzeug { max-width: 834px; }
.zeichenMitte.zeichenMitWerkzeug > tbody > tr > td:first-child { width: 90px; }
.zeichenFlaeche {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  max-width: 744px;
}
.zeichenKopf, .zeichenUnten {
  width: 100%;
  max-width: 744px;
  min-width: 0;
}
.zeichenKopf.zeichenMitWerkzeug, .zeichenUnten.zeichenMitWerkzeug {
  width: calc(100% - 90px);
  margin-left: max(90px, calc(50% - 327px));
}
.zeichenUnten { flex-wrap: wrap; align-content: flex-start; }
.zeichenMeldung { max-width: 100%; }
@media (max-width: 1499px) {
  .zeichenMeldung.zeichenMitWerkzeug {
    width: calc(100% - 90px);
    margin-left: max(90px, calc(50% - 327px));
  }
}
.werteTabelle { width: 100% !important; max-width: 744px; table-layout: fixed; }
.werteZelle { box-sizing: border-box; width: 100%; min-width: 0; padding: 2px; }

@media (max-width: 640px) {
  .zeichenKopf { grid-template-columns: 1fr auto; }
  .zeichenKopf > :first-child { grid-row: 1; grid-column: 1; justify-self: start; }
  .zeichenKopf > :last-child { grid-row: 1; grid-column: 2; }
  .zeichenKopf .achsenGruppe { grid-row: 2; grid-column: 1 / -1; flex-wrap: wrap; }
}
.kurvenGruppe { flex-wrap: wrap; max-width: 100%; }

/* M56: dieselben Widgets im bildschirmfuellenden Dialog, Tabelle darunter. */
.zeichenVollbildKnopf { margin-left: auto; min-width: 42px; min-height: 40px; }
.zeichenVollbildKnopf svg { width: 22px; height: 22px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zeichenVollbild {
  position: fixed; inset: 0; z-index: 2147483646;
  display: flex; flex-direction: column; box-sizing: border-box;
  padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: #fff; color: #222; font: 16px sans-serif;
}
.zeichenVollbildAufgabe { flex: 0 0 auto; max-height: 24%; overflow: auto; border-bottom: 1px solid #ddd; padding: 4px 8px; }
.zeichenVollbildAufgabe summary { cursor: pointer; font-weight: bold; padding: 4px 0; }
.zeichenVollbildAngaben .text { margin: 4px 0; }
.zeichenVollbildPlatz { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.zeichenVollbild .zeichenModul { position: relative !important; inset: auto !important; width: 100%; height: auto !important; display: flex; flex-direction: column; align-items: stretch; }
.zeichenVollbild .zeichenModul > div:not([aria-hidden="true"]) { position: relative !important; inset: auto !important; height: auto !important; overflow: visible !important; flex: 0 0 auto; }
.zeichenVollbild .zeichenModul > div[aria-hidden="true"] { display: none; }
.zeichenVollbild .zeichenModul > div > .zeichenKopf,
.zeichenVollbild .zeichenModul > div > .zeichenArbeitsbereich,
.zeichenVollbild .zeichenModul > div > .zeichenUnten,
.zeichenVollbild .zeichenModul > div > .werteTabelle { position: relative !important; inset: auto !important; height: auto !important; }
.zeichenVollbild .zeichenKopf, .zeichenVollbild .zeichenUnten { width: 100% !important; max-width: none; margin: 0 !important; padding: 4px 0; }
.zeichenVollbild .zeichenMitte { width: calc(var(--zeichen-vollbild-breite, 744px) + 0px) !important; max-width: none; margin: 0 auto; }
.zeichenVollbild .zeichenMitte.zeichenMitWerkzeug { width: calc(var(--zeichen-vollbild-breite, 744px) + 90px) !important; max-width: none; }
.zeichenVollbild .zeichenFlaeche { width: 100% !important; max-width: none; }
.zeichenVollbild .zeichenMeldung { position: relative !important; inset: auto !important; width: auto !important; max-width: none; max-height: none; margin: 4px 0 !important; }
.zeichenVollbild .zeichenVollbildMeldungSeitlich .zeichenArbeitsbereich { display: flex; align-items: flex-start; justify-content: center; gap: 12px; }
.zeichenVollbild .zeichenVollbildMeldungSeitlich .zeichenMitte { flex: 0 0 auto; margin: 0; }
.zeichenVollbild .zeichenVollbildMeldungSeitlich .zeichenMeldung { flex: 0 0 240px; width: 240px !important; min-width: 0; margin: 0 !important; max-height: var(--zeichen-vollbild-meldung-hoehe, 420px); overflow: auto; overflow-wrap: anywhere; }
.zeichenVollbild .werteTabelle { width: 100%; max-width: none; margin: 4px 0; }
.zeichenKopf { grid-template-columns: auto 1fr auto auto; }
.zeichenVollbild .werteTabelle { width: 100% !important; }
@media (max-width: 600px) {
  .zeichenKopf { grid-template-columns: 1fr auto auto; }
  .zeichenKopf .achsenGruppe { grid-row: 2; grid-column: 1 / -1; flex-wrap: wrap; }
}
.zeichenVollbildKurzaufgabe { flex: 0 0 auto; max-height: 20%; overflow: auto; white-space: pre-wrap; padding: 8px; font-weight: 600; }

/* Erst nach serverseitiger Freigabe sichtbar, oberhalb der Zeichenfläche. */
.zeichenFreigegebeneFunktion { box-sizing: border-box; padding: 6px 8px; color: #07535c; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.zeichenFunktionsbruch { display: inline-flex; flex-direction: column; text-align: center; vertical-align: middle; font-size: .85em; line-height: 1.1; margin: 0 2px; }
.zeichenFunktionsbruch > span:first-child { border-bottom: 1px solid currentColor; }
.zeichenVollbild .zeichenModul > div > .zeichenFreigegebeneFunktion { position: relative !important; inset: auto !important; height: auto !important; }

.vektorWerkzeuge { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

.buttontastaturVektor { width:44px; }
.spaltenvektorSymbol { display:inline-flex; align-items:center; gap:2px; font-size:30px; line-height:1; }
.vektorKomponenten { font-size:12px; line-height:13px; }

/* Rechenhinweise bleiben bei ihrer Aufgabe und verdecken keine Eingaben. */
.eingabeHinweis {
  box-sizing: border-box;
  padding: 6px 10px;
  border-left: 3px solid #b88637;
  background: #fffaf0;
  color: #66502e;
  font-size: 14px;
  line-height: 1.4;
}