Mathematik – Brüche & Dezimalzahlen Trainer
* { box-sizing: border-box; }
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, „Segoe UI“, sans-serif;
background: #f5f6fb;
color: #222;
}
header {
background: #21428f;
color: #fff;
padding: 1rem 1.5rem;
}
header h1 {
margin: 0;
font-size: 1.4rem;
}
header p {
margin: 0.3rem 0 0;
font-size: 0.95rem;
}
main {
max-width: 980px;
margin: 1rem auto 2rem;
padding: 0 1rem;
}
.card {
background: #fff;
border-radius: 0.7rem;
padding: 1rem 1.2rem 1.1rem;
box-shadow: 0 1px 5px rgba(0,0,0,0.12);
margin-bottom: 1rem;
}
h2 { margin-top: 0; font-size: 1.15rem; }
.info {
background: #e9edff;
border-left: 4px solid #21428f;
padding: 0.7rem 0.9rem;
border-radius: 0.5rem;
margin-bottom: 0.7rem;
font-size: 0.9rem;
}
.info strong { display: block; margin-bottom: 0.2rem; }
.pill {
display: inline-block;
padding: 0.12rem 0.55rem;
border-radius: 999px;
border: 1px solid #c0c5ff;
font-size: 0.75rem;
background: #fff;
margin-right: 0.25rem;
margin-bottom: 0.25rem;
}
.small { font-size: 0.86rem; opacity: 0.9; }
.small-strong { font-size: 0.86rem; font-weight: 600; }
/* Allgemein Radio-Option */
.radio-option {
display: flex;
align-items: flex-start;
gap: 0.45rem;
padding: 0.45rem 0.6rem;
border-radius: 0.6rem;
background: #fafafa;
border: 1px solid #ddd;
cursor: pointer;
font-size: 0.9rem;
}
.radio-option input {
margin-top: 0.12rem;
}
.radio-option.disabled {
opacity: 0.55;
cursor: default;
}
/* Kapitel-Auswahl: konsequent untereinander (Akkordeon-freundlich) */
#chapter-radio-group {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin: 0.7rem 0;
}
/* Modus-Auswahl: weiterhin schönes Grid / 2 Spalten ab Desktop */
#mode-radio-group {
display: grid;
grid-template-columns: minmax(0,1fr);
gap: 0.4rem;
margin: 0.7rem 0;
}
@media (min-width: 720px) {
#mode-radio-group {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.45rem 0.95rem;
border-radius: 999px;
border: none;
cursor: pointer;
font-size: 0.95rem;
background: #21428f;
color: #fff;
margin-top: 0.4rem;
}
.btn[disabled] {
opacity: 0.6;
cursor: default;
}
.btn-secondary {
background: #e5e5ec;
color: #222;
margin-right: 0.4rem;
}
.test-status {
margin-bottom: 0.8rem;
}
.status-top {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.9rem;
margin-bottom: 0.25rem;
}
.status-top strong { font-size: 0.95rem; }
.timer-text { font-variant-numeric: tabular-nums; }
.progress-outer {
position: relative;
height: 14px;
border-radius: 999px;
background: #e1e2ef;
overflow: hidden;
}
.progress-inner {
height: 100%;
width: 100%;
background: linear-gradient(90deg,#3bb273,#ffd43b,#f06543);
transition: width 0.35s linear;
}
.progress-message {
margin-top: 0.3rem;
font-size: 0.9rem;
text-align: center;
min-height: 1.1rem;
}
.question-header {
font-size: 0.94rem;
margin-bottom: 0.2rem;
}
.question-text {
font-size: 1rem;
margin-bottom: 0.7rem;
}
.question-sub {
font-size: 0.9rem;
margin-bottom: 0.4rem;
opacity: 0.9;
}
.answer-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-bottom: 0.6rem;
}
.answer-btn {
text-align: left;
padding: 0.42rem 0.7rem;
border-radius: 0.5rem;
border: 1px solid #ccc;
background: #fafafa;
cursor: pointer;
font-size: 0.9rem;
transition: background 0.1s, border-color 0.1s, transform 0.05s, box-shadow 0.05s;
}
.answer-btn:hover {
transform: translateY(-1px);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.answer-btn.correct {
background: #c7f5c4;
border-color: #37a036;
}
.answer-btn.incorrect {
background: #ffd1d1;
border-color: #d33;
}
.answer-btn.selected {
outline: 2px solid #21428f;
}
.frac-step {
margin-bottom: 0.5rem;
padding: 0.45rem 0.55rem;
border-radius: 0.45rem;
background: #fafafa;
border: 1px solid #ddd;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.frac-step-label {
font-size: 0.9rem;
}
.frac-input {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
font-size: 0.9rem;
}
.frac-line {
width: 60px;
height: 1px;
background: #444;
}
.frac-row {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.frac-input input {
width: 60px;
padding: 0.2rem 0.25rem;
text-align: center;
font-size: 0.9rem;
}
.frac-step.step-correct {
border-color: #37a036;
background: #e3f9e1;
}
.frac-step.step-incorrect {
border-color: #d33;
background: #ffe3e3;
}
.number-input-wrapper {
max-width: 260px;
padding: 0.45rem 0.55rem;
border-radius: 0.45rem;
background: #fafafa;
border: 1px solid #ddd;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.number-input-wrapper input {
width: 120px;
padding: 0.25rem 0.3rem;
font-size: 0.95rem;
text-align: center;
}
.feedback {
font-size: 0.9rem;
min-height: 1.1rem;
}
.feedback.ok { color: #1f7f3b; }
.feedback.err { color: #b32121; }
.question-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
.result-grade {
font-size: 1.6rem;
font-weight: 700;
}
.result-box {
display: grid;
grid-template-columns: minmax(0,1fr);
gap: 0.5rem;
margin-top: 0.6rem;
}
@media (min-width: 600px) {
.result-box { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
.result-item {
background: #f0f1ff;
border-radius: 0.5rem;
padding: 0.5rem 0.6rem;
font-size: 0.9rem;
}
.highlight {
font-weight: 600;
color: #ffd86b;
}
/* Highscore-Board Overlay */
.hs-backdrop {
position: fixed;
inset: 0;
background: rgba(4, 12, 40, 0.82);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
}
.hs-modal {
background: radial-gradient(circle at top, #3558d8, #141b3a);
border-radius: 1rem;
padding: 1.2rem 1.4rem 1.4rem;
box-shadow: 0 18px 45px rgba(0,0,0,0.65);
max-width: 430px;
width: 90%;
color: #f5f7ff;
position: relative;
text-align: center;
border: 1px solid rgba(255,255,255,0.12);
}
.hs-close-btn {
position: absolute;
top: 0.35rem;
right: 0.5rem;
background: transparent;
border: none;
color: #c9d0ff;
font-size: 1.2rem;
cursor: pointer;
}
.hs-title {
font-size: 1.1rem;
font-weight: 700;
margin-top: 0.1rem;
margin-bottom: 0.15rem;
}
.hs-sub {
font-size: 0.82rem;
opacity: 0.9;
margin-bottom: 0.7rem;
}
.hs-trophies {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.35rem;
font-size: 1.6rem;
}
.hs-trophies span.center {
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.92;
}
.hs-list {
margin-top: 0.2rem;
text-align: left;
font-size: 0.85rem;
}
.hs-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.4rem;
padding: 0.25rem 0.45rem;
border-radius: 0.5rem;
margin-bottom: 0.18rem;
background: rgba(5,10,40,0.35);
}
.hs-row-label {
max-width: 70%;
}
.hs-row-main {
font-weight: 600;
}
.hs-row-meta {
font-size: 0.78rem;
opacity: 0.88;
text-align: right;
}
.hs-retro {
font-family: „Courier New“, monospace;
font-variant-numeric: tabular-nums;
letter-spacing: 0.06em;
}
.hs-row.top {
background: rgba(255, 230, 150, 0.18);
border: 1px solid rgba(255, 230, 150, 0.6);
animation: glowPulse 1.8s ease-in-out infinite;
}
.hs-badge {
display: inline-block;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.4);
padding: 0.04rem 0.4rem;
font-size: 0.7rem;
margin-left: 0.25rem;
}
.hs-empty {
font-size: 0.85rem;
opacity: 0.9;
margin-top: 0.4rem;
text-align: center;
}
@keyframes glowPulse {
0% { box-shadow: 0 0 8px rgba(255,219,77,0.4); }
50% { box-shadow: 0 0 18px rgba(255,219,77,0.9); }
100% { box-shadow: 0 0 8px rgba(255,219,77,0.4); }
}
/* Highscore-Button oben im „Board“-Style */
#highscore-display-btn {
background: radial-gradient(circle at top, #3558d8, #141b3a);
color: #f5f7ff;
border-radius: 0.9rem;
border: 1px solid rgba(255,255,255,0.4);
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.15rem;
padding: 0.6rem 0.9rem;
}
#highscore-display-btn::before {
content: „🏆 Highscore“;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.9;
}
#highscore-summary {
display: block;
font-family: „Courier New“, monospace;
font-size: 0.8rem;
opacity: 0.9;
}
/* Kapitel-Info-Box im Board-Style (Akkordeon) */
#chapter-info-box {
background: radial-gradient(circle at top, #3558d8, #141b3a);
border-left: none;
border-radius: 1rem;
border: 1px solid rgba(255,255,255,0.4);
box-shadow: 0 10px 25px rgba(0,0,0,0.25);
color: #f5f7ff;
margin-top: 0.6rem;
}
#chapter-info-box p,
#chapter-info-box li,
#chapter-info-box .small,
#chapter-info-box .small-strong {
color: #f5f7ff;
}
#chapter-info-box ul,
#chapter-info-box ol {
padding-left: 1.2rem;
margin-top: 0.3rem;
}
.chapter-actions {
margin-top: 0.6rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.chapter-actions .btn-secondary {
background: rgba(255,255,255,0.09);
color: #f5f7ff;
border: 1px solid rgba(255,255,255,0.4);
}
/* ===== NEW RECORD POPUP + CONFETTI ===== */
.record-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
background: radial-gradient(circle at top, #ffe47a, #ff9f43, #ff6b6b);
padding: 2rem 3rem;
border-radius: 1.5rem;
box-shadow:
0 0 25px rgba(255, 223, 150, 0.9),
0 0 60px rgba(255, 180, 80, 0.8);
z-index: 15000;
animation: recordPop 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
text-align: center;
color: #fff;
}
@keyframes recordPop {
0% {
transform: translate(-50%, -50%) scale(0) rotate(-180deg);
opacity: 0;
}
50% {
transform: translate(-50%, -50%) scale(1.2) rotate(10deg);
}
70% {
transform: translate(-50%, -50%) scale(0.9) rotate(-5deg);
}
100% {
transform: translate(-50%, -50%) scale(1) rotate(0deg);
opacity: 1;
}
}
.record-popup h2 {
font-size: 2.5rem;
margin: 0;
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
animation: recordShake 0.5s ease infinite;
}
@keyframes recordShake {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
.record-stars {
font-size: 3rem;
margin: 0.5rem 0;
animation: recordTwinkle 1s ease infinite;
}
@keyframes recordTwinkle {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.2); }
}
.confetti-layer {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 14000;
}
.confetti-piece {
position: absolute;
width: 8px;
height: 14px;
border-radius: 2px;
opacity: 0.9;
animation: confettiFall 1.8s ease-out forwards;
}
@keyframes confettiFall {
0% {
transform: translateY(-10vh) rotate(0deg);
}
100% {
transform: translateY(120vh) rotate(360deg);
}
}
/* ===== SHARE BUTTONS ===== */
.share-section {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #e0e0e0;
}
.share-buttons {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
}
.share-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1rem;
border-radius: 999px;
border: none;
cursor: pointer;
font-size: 0.9rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.share-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.share-btn.whatsapp {
background: #25D366;
color: white;
}
.share-btn.email {
background: #EA4335;
color: white;
}
.share-btn.copy {
background: #6c757d;
color: white;
}
/* Tutorial-Modal */
.tutorial-modal {
max-width: 480px;
}
.tutorial-question {
margin-bottom: 0.5rem;
font-size: 0.95rem;
text-align: left;
}
.tutorial-answers {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin-bottom: 0.5rem;
}
.tutorial-feedback {
font-size: 0.85rem;
min-height: 1.1rem;
text-align: left;
margin-bottom: 0.5rem;
}
/* Initialen-Modal */
.initials-modal {
max-width: 480px;
}
footer.footer {
text-align: center;
font-size: 0.8rem;
padding: 0.7rem 1rem 1.2rem;
color: #666;
}
Mathematik – Brüche & Dezimalzahlen Trainer
2. Klasse Mittelschule/Hauptschule – mit Rechenweg, Timer, Note & Highscore.
Kurzübersicht
Stoff:
Brüche addieren & subtrahieren
Brüche multiplizieren
Brüche dividieren
Bruchteile
Brüche & Dezimalzahlen
Jeder Test läuft mit 20:00 Minuten.
Du bekommst eine Note nach österreichischem System (1–5), Prozent und deine
Bestzeit wird gespeichert. Bei 10 Minuten: „Halbzeit“, bei 19 Minuten:
„Soooo in 1 Minute Stifte weg“, bei 20 Minuten: „Alle abgeben!!“.
Lernmodus: Du gibst Brüche und Ergebnisse selbst ein (Rechenweg).
Quickmodus: Multiple Choice im Zeit-Rausch – wird je Kapitel ab
Note 1–2 im Lernmodus freigeschaltet.
1. Kapitel & Modus auswählen
Wähle zuerst das Kapitel und dann den Modus:
Kapitel:
Kapitel 1: Brüche addieren & subtrahieren (gleich- & ungleichnamig)
Kapitel 2: Brüche multiplizieren (mit & ohne ganze Zahl)
Kapitel 3: Brüche dividieren (Kehrwert & Kürzen)
Kapitel 4: Bruchteile & Dezimalzahlen
Gesamtstoff: alle Kapitel gemischt
Modus:
Lernmodus: Rechne selbst mit Brüchen, gib Zwischenschritte und Ergebnisse ein.
Quickmodus (MC): Multiple Choice zum Stoff – wird je Kapitel ab Note 1–2 freigeschaltet.
🔒 Noch gesperrt – erst im Lernmodus gut bestehen.
🏆
Highscore
🏆
Bestleistungen
Wer in der kürzesten Zeit die beste Note holt, steht ganz oben.
Noch keine Ergebnisse gespeichert – starte deinen ersten Test!
Verständnisübung
Kurze Übung zur Rechenart.
Dein Kürzel für den Highscore
Gib 2–3 Buchstaben ein (z.B. MAX, LEO, MOM). Retro-Flipper-Style 😎
Website-Titel 