/* =====================================================================
Ergaenzung fuer den oeffentlichen Uebungsbereich der Website
---------------------------------------------------------------------
Wird ZUSAETZLICH zu gestaltung.css eingebunden, nach dieser Datei:
Enthaelt nur das, was es in der lokalen Fassung nicht gibt:
Antwortfeld, Rueckmeldung, Abschlusszeile. Alles andere - Farben,
Knoepfe, Aufgabenkarten, Formeldarstellung, Loesung (.task-answer) -
kommt aus gestaltung.css und darf hier NICHT noch einmal festgelegt werden.
Ablauf (Website-Spezifikation, Abschnitt 3; Stand 23.10.2026):
EIN Knopf „Eingabe pruefen" unter allen Aufgaben, zwei Versuche,
danach Loesung und Loesungsweg bei allen Aufgaben. Kein Tipp vor der
Eingabe (vorerst).
Aufbau einer Aufgabenkarte im Uebungsbereich:
1
…Aufgabentext, durch forDisplay()…
…
(aus gestaltung.css)
Lösung: …
💡 …
Zustand aus antwortPruefen() als Klasse an der Karte:
richtig | ungekuerzt (gelb) | falsch | leer („nicht bearbeitet") | unklar
Zusaetzlich loesung-offen: Loesung und Loesungsweg sind eingeblendet.
===================================================================== */
:root{
/* Ergaenzende Farbtoene, passend zur Palette in gestaltung.css */
--red-light:#fdecea;
--red-border:#e8b4ae;
--gray-light:#eef2f6;
--yellow-light:#fff6d9;
--yellow-border:#e6cb6e;
--yellow-text:#6b5100;
}
/* ------------------------------------------------------------------ */
/* ANTWORTFELD */
/* ------------------------------------------------------------------ */
/* ALLE Masse innerhalb einer Aufgabenkarte stehen in em, niemals in rem
oder px. Nur dann wachsen sie mit der Stellschraube --karte mit (siehe
gestaltung.css, Abschnitt B). Ein einziges rem hier genuegt, damit das
Antwortfeld winzig bleibt, waehrend die Aufgabe darueber gross wird. */
.antwort-zeile{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:0.5em;
margin-top:0.6em;
}
.antwort-feld{
font-family:inherit;
font-size:1.05em;
padding:0.54em 0.71em;
min-width:8.9em;
min-height:2.65em; /* Tippflaeche mind. 44 px bei 16 px Grundschrift */
flex:1 1 8.9em;
max-width:15.5em;
border:2px solid var(--border);
border-radius:8px;
background:#fff;
color:#1c2530;
}
.antwort-feld:focus{
outline:none;
border-color:var(--blue);
box-shadow:0 0 0 3px var(--blue-light);
}
.antwort-feld:disabled{ background:var(--gray-light); color:#36414f; opacity:1; }
/* Kein Eingabehinweis (Kris, 23.10.2026): kostet Hoehe, und antwortPruefen() nimmt
Komma oder Punkt und beide Minuszeichen ohnehin an. */
/* ------------------------------------------------------------------ */
/* RUECKMELDUNG - die Zustaende aus antwortPruefen() */
/* ------------------------------------------------------------------ */
.rueckmeldung{
display:none;
margin-top:0.64em;
font-size:0.98em;
font-weight:600;
line-height:1.45;
}
.task-card.richtig .rueckmeldung,
.task-card.ungekuerzt .rueckmeldung,
.task-card.falsch .rueckmeldung,
.task-card.leer .rueckmeldung,
.task-card.unklar .rueckmeldung{ display:block; }
.task-card.richtig{ border-color:#bfe0c9; background:var(--green-light); }
.task-card.richtig .rueckmeldung{ color:var(--green); }
/* Wert stimmt, Bruch nicht vollstaendig gekuerzt - in der WUe kein Punkt. */
.task-card.ungekuerzt{ border-color:var(--yellow-border); background:var(--yellow-light); }
.task-card.ungekuerzt .rueckmeldung{ color:var(--yellow-text); }
.task-card.ungekuerzt .rueckmeldung .hinweis{ color:var(--yellow-text); }
/* Bewusst zurueckhaltend: kein rotes Ausrufezeichen, nur ein heller Ton.
Ein zweiter Versuch soll sich nicht wie eine Strafe anfuehlen. */
.task-card.falsch{ border-color:var(--red-border); background:var(--red-light); }
.task-card.falsch .rueckmeldung{ color:var(--red); }
/* Leeres Feld: „nicht bearbeitet" - neutral, gestrichelter Rahmen. */
.task-card.leer{ border-style:dashed; border-color:#aebccb; }
.task-card.leer .rueckmeldung{ color:var(--gray); }
/* „Bitte selbst vergleichen" ist weder richtig noch falsch - deshalb neutral blau. */
.task-card.unklar{ border-color:#b9d3e8; background:var(--blue-light); }
.task-card.unklar .rueckmeldung{ color:var(--blue-dark); }
/* Zusatz aus dem Feld hinweis, z. B. „Gesucht ist eine Dezimalzahl." */
.rueckmeldung .hinweis{
display:block;
margin-top:0.28em;
font-weight:400;
font-size:0.88em;
color:var(--gray);
}
/* Loesung und Loesungsweg (.task-answer, .ans, .tip aus gestaltung.css) je Karte */
.task-card.loesung-offen .task-answer{ display:block; }
/* Notbremse fuer sehr lange Rechenketten im Loesungsweg auf schmalen Bildschirmen */
.task-answer .ans, .task-answer .tip{ overflow-wrap:break-word; }
/* Knopf „Meine Antwort war richtig" - NUR beim Zustand unklar (wird nur dort erzeugt). */
.btn-selbst-ok{
margin-top:0.66em;
font-size:0.85em;
min-height:3.3em; /* Tippflaeche mind. 44 px */
padding:0.44em 0.88em;
background:#fff;
color:var(--green);
border:2px solid var(--green) !important;
border-radius:8px;
font-weight:600;
font-family:inherit;
cursor:pointer;
}
.btn-selbst-ok:hover{ background:var(--green-light); }
.task-card:not(.unklar) .btn-selbst-ok{ display:none; }
/* ------------------------------------------------------------------ */
/* ABSCHLUSSZEILE UND ZAEHLER */
/* ------------------------------------------------------------------ */
.uebung-fuss{
max-width:1400px;
margin:20px auto 0;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:12px;
padding:14px 18px;
background:#fff;
border:2px solid var(--border);
border-radius:12px;
}
.uebung-stand{ font-weight:600; color:var(--gray); }
.uebung-stand strong{ color:var(--blue-dark); }
/* ------------------------------------------------------------------ */
/* LANGE TERME - Tablet und Handy */
/* ------------------------------------------------------------------ */
/* Terme brechen absichtlich nicht um (geschuetzte Leerzeichen, siehe
forDisplay). Ohne minmax(0, …) wuerde ein einziger langer Term die ganze
Spalte - und damit die Seite - verbreitern. So bleibt die Seite in der
Breite fest; zu breite Aufgaben setzt die Seite etwas kleiner, im
Notfall laesst sich nur diese eine Aufgabe waagrecht verschieben. */
#taskGrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.task-q{ overflow-x:auto; overflow-y:hidden; padding:0.45em 0; margin:-0.45em 0; }
/* Innenabstand oben und unten: Brueche und Wurzeln ragen bis 6 px ueber die
Zeile hinaus und wuerden sonst abgeschnitten. Der negative Aussenabstand
gleicht das aus, die Karte sieht genauso aus wie ohne. */
/* ------------------------------------------------------------------ */
/* KLEINE BILDSCHIRME - Schueler ueben oft am Handy */
/* ------------------------------------------------------------------ */
@media (max-width:800px){
#taskGrid{ grid-template-columns:minmax(0, 1fr); }
.antwort-feld{ max-width:none; flex:1 1 100%; }
}
/* ------------------------------------------------------------------ */
/* KOMPAKTER ALS AN DER TAFEL (Kris, 23.10.2026) */
/* ------------------------------------------------------------------ */
/* Die Werte in gestaltung.css sind fuer die Tafel gemacht (Lesbarkeit aus der
letzten Reihe). Auf dem eigenen Geraet reicht weniger: Aufgabentext 1,12em statt
1,28em, etwas weniger Innenabstand. Die Tafel (lokal, Lehrerbereich) ist davon
nicht betroffen - diese Datei gibt es nur im Uebungsbereich. */
.task-q{ font-size:1.12em; }
#taskGrid .task-card{ padding:0.8em 1em; gap:0.75em; }
/* Am PC mit Maus braucht das Antwortfeld keine 44-px-Tippflaeche. */
@media (hover:hover) and (pointer:fine){
.antwort-feld{ min-height:0; padding:0.4em 0.6em; }
.btn-selbst-ok{ min-height:2.6em; }
}