/* ============================================================
   GLOBAL BASE STYLES
   ============================================================ */

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2e4c9;
    color: #2c2530;
    line-height: 1.6;
}

header {
    background-color: #6a4d63;
    color: #f2e4c9;
    text-align: center;
    padding: 2rem 1rem;
}

header .logo {
    width: 192px;
    height: 192px;
    border-radius: 12px;
    object-fit: cover;
    display: block;
    margin: 0 auto 1rem auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

header h1 {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
}

header p {
    margin: 0;
    font-size: 1rem;
}

.zurueck-link {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    background-color: #6a4d63;
    color: #f2e4c9;
    transition: background-color 0.15s;
    margin-bottom: 0.75rem;
}

.zurueck-link:hover {
    background-color: #553d4f;
}

main {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.bereich {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.bereich-titel {
    grid-column: 1 / -1;
    font-size: 1.6rem;
    color: #f2e4c9;
    background-color: #6a4d63;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    margin: 0 0 0.5rem 0;
}

.bereich.lehrpersonen .bereich-titel {
    background-color: #4d6a5a;
}

.bereich.lehrpersonen .gruppe {
    border-color: #9ac0a8;
}

.bereich.lehrpersonen .gruppe h3,
.bereich.lehrpersonen .link-liste a {
    color: #4d6a5a;
}

.bereich.lehrpersonen .gruppe h3 {
    border-bottom-color: #9ac0a8;
}

.bereich.lehrpersonen .link-liste a:hover {
    background-color: #9ac0a8;
    color: #2c3c33;
}

/* ============================================================
   STARTSEITE  (index.html) – blaues Farbkonzept zum blauen Logo
   ============================================================ */

.startseite header {
    background-color: #3b4c75;
}

@media (max-width: 480px) {
    .bereich {
        grid-template-columns: 1fr;
    }
}

.gruppe {
    background-color: #e8d3b0;
    border: 1px solid #c4af88;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(106, 77, 99, 0.18);
}

.gruppe h2,
.gruppe h3 {
    margin-top: 0;
    font-size: 1.25rem;
    color: #6a4d63;
    border-bottom: 2px solid #9a8196;
    padding-bottom: 0.5rem;
}

.link-liste {
    list-style: none;
    padding: 0;
    margin: 0;
}

.link-liste li {
    margin-bottom: 0.5rem;
}

.link-liste a {
    display: block;
    text-decoration: none;
    color: #6a4d63;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    transition: background-color 0.15s, color 0.15s;
}

.link-liste a:hover {
    background-color: #c4af88;
    color: #3c2c3a;
}

footer {
    text-align: center;
    padding: 1.25rem 1rem;
    background-color: #6a4d63;
    color: #f2e4c9;
    font-size: 0.85rem;
}

footer p {
    margin: 0.25rem 0;
}

footer a {
    color: #f2e4c9;
    text-decoration: underline;
}

footer a:hover {
    text-decoration: none;
    opacity: 0.8;
}

.spenden-button {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #f2e4c9;
    color: #6a4d63 !important;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    font-weight: bold;
    transition: background-color 0.15s, color 0.15s;
}

.spenden-button:hover {
    background-color: #e8d3b0;
    color: #553d4f !important;
    opacity: 1;
}

.startseite .spenden-button,
.kontakt-seite .spenden-button {
    color: #3b4c75 !important;
}

.startseite .spenden-button:hover,
.kontakt-seite .spenden-button:hover {
    color: #2c3a5e !important;
}

.lehrpersonen-seite .spenden-button {
    color: #4d6a5a !important;
}

.lehrpersonen-seite .spenden-button:hover {
    color: #3c5a4a !important;
}

.startseite footer,
.kontakt-seite footer {
    background-color: #3b4c75;
}

.lehrpersonen-seite footer {
    background-color: #4d6a5a;
}

.hidden {
    display: none;
}

/* ============================================================
   LEHRPERSONEN-SEITE  (lp/vm.html)
   ============================================================ */

.lehrpersonen-seite header {
    background-color: #4d6a5a;
}

.lehrpersonen-seite .zurueck-link {
    background-color: #4d6a5a;
    border-color: rgba(255, 255, 255, 0.25);
    color: #f2e4c9;
}

.lehrpersonen-seite .zurueck-link:hover {
    background-color: #3c5a4a;
}

.vorlage {
    background-color: #e8d3b0;
    border: 1px solid #c4af88;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(106, 77, 99, 0.18);
}

.vorlage h2 {
    margin-top: 0;
    color: #4d6a5a;
    border-bottom: 2px solid #9ac0a8;
    padding-bottom: 0.5rem;
}

.vorlage-bild {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1rem auto;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.download-liste {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0 0;
}

.download-liste li {
    margin-bottom: 0.75rem;
}

.download-liste a {
    display: inline-block;
    text-decoration: none;
    color: #f2e4c9;
    background-color: #4d6a5a;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.15s;
}

.download-liste a:hover {
    background-color: #9ac0a8;
    color: #2c3c33;
}

.zurueck {
    display: inline-block;
    margin-bottom: 1.5rem;
    text-decoration: none;
    color: #4d6a5a;
}

/* ============================================================
   REAKTIONSGLEICHUNGEN – gemeinsam
   (reaktionsgleichungen.html & reaktionsgleichungen2.html)
   ============================================================ */

sub,
sup {
    line-height: 0;
}

.gruppe.full {
    grid-column: 1 / -1;
}

.rg-seite .aufgabe {
    background-color: #fff8ec;
    border: 1px solid #d3cab8;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.rg-seite .aufgabe .frage {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    color: #3a3340;
    word-break: break-word;
}

.rg-seite .aufgabe input[type="text"] {
    width: 100%;
    padding: 0.5rem 0.6rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    border: 1px solid #aca497;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fffdf8;
}

.rg-seite .aufgabe .aktionen {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rg-seite .aufgabe button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95rem;
    border: none;
    border-radius: 4px;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    background-color: #796c74;
    color: #f6ecd7;
    transition: background-color 0.15s;
}

.rg-seite .aufgabe button:hover {
    background-color: #5a4f57;
}

.rg-seite .aufgabe button.neutral {
    background-color: #aca497;
}

.rg-seite .aufgabe button.neutral:hover {
    background-color: #8f877c;
}

.rg-seite .feedback {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    display: none;
}

.rg-seite .feedback.richtig {
    display: block;
    background-color: #d7ecd0;
    color: #2f6b2f;
    border: 1px solid #a3c89b;
}

.rg-seite .feedback.falsch {
    display: block;
    background-color: #f3d4d0;
    color: #8a2f25;
    border: 1px solid #c89b97;
}

.rg-seite .gesamt-stand {
    background-color: #f0e1ca;
    border: 1px solid #d3cab8;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rg-seite .gesamt-stand button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95rem;
    border: none;
    border-radius: 4px;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    background-color: #aca497;
    color: #f6ecd7;
}

.rg-seite .gesamt-stand button:hover {
    background-color: #8f877c;
}

.rg-seite .hinweis {
    font-size: 0.85rem;
    color: #6b6068;
    margin-top: 0.4rem;
}

.rg-seite .tipp-text {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #6b6068;
    display: none;
    background-color: #f6ecd7;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    border: 1px dashed #aca497;
}

.rg-seite .tipp-text.zeigen {
    display: block;
}

/* ============================================================
   REAKTIONSGLEICHUNGEN 2 – KOEFFIZIENTEN
   (reaktionsgleichungen2.html)
   ============================================================ */

.rg-koeffizienten .aufgabe .frage {
    font-size: 1.05rem;
    margin-bottom: 0.85rem;
}

.rg-koeffizienten .aufgabe .aktionen {
    margin-top: 0.6rem;
}

.rg-koeffizienten .gleichung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.15rem;
    line-height: 2.4;
    margin-bottom: 0.5rem;
}

.rg-koeffizienten .gleichung .term {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    white-space: nowrap;
}

.rg-koeffizienten .gleichung input[type="text"] {
    width: 2.6rem;
    text-align: center;
    padding: 0.3rem 0.2rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.05rem;
    border: 1px solid #aca497;
    border-radius: 4px;
    background-color: #fffdf8;
}

.rg-koeffizienten .gleichung .op {
    color: #6b6068;
    font-weight: bold;
    padding: 0 0.15rem;
}

.rg-koeffizienten .gleichung .formel {
    line-height: 0;
    font-size: 1em;
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier New", monospace;
}

.rg-koeffizienten .gleichung .formel sub {
    line-height: 0;
    font-size: 0.75em;
}

/* ============================================================
   SALZ-BANDIT  (salzformeln.html)
   ============================================================ */

.salzbandit main {
    display: block;
    max-width: 720px;
}

.salzbandit .bandit {
    background: linear-gradient(180deg, #8a6a7f, #6a4d63);
    border: 4px solid #4a3344;
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    color: #f2e4c9;
    position: relative;
}

.salzbandit .bandit h2 {
    text-align: center;
    margin: 0 0 1rem 0;
    font-size: 1.4rem;
    letter-spacing: 0.05em;
}

.salzbandit .maschine {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.salzbandit .rollen {
    display: flex;
    gap: 0.75rem;
    background: #2c2530;
    border: 3px solid #4a3344;
    border-radius: 10px;
    padding: 0.75rem;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6);
}

.salzbandit .rolle {
    width: 110px;
    height: 110px;
    overflow: hidden;
    background: #f2e4c9;
    border-radius: 6px;
    position: relative;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
}

.salzbandit .rolle::before,
.salzbandit .rolle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 18px;
    z-index: 2;
    pointer-events: none;
}

.salzbandit .rolle::before {
    top: 0;
    background: linear-gradient(180deg, rgba(44, 37, 48, 0.55), transparent);
}

.salzbandit .rolle::after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(44, 37, 48, 0.55), transparent);
}

.salzbandit .streifen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    will-change: transform;
}

.salzbandit .zelle {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    color: #2c2530;
    border-bottom: 1px solid #d9c6a3;
}

.salzbandit .zelle sup {
    font-size: 1rem;
}

.salzbandit .hebel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.salzbandit .hebel-knopf {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff7a7a, #b83030);
    border: 3px solid #7a1f1f;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 0.08s;
}

.salzbandit .hebel-knopf:active {
    transform: translateY(4px);
}

.salzbandit .hebel-schaft {
    width: 8px;
    height: 70px;
    background: #c4af88;
    border-radius: 4px;
    box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.3);
}

.salzbandit .hebel-base {
    width: 26px;
    height: 16px;
    background: #4a3344;
    border-radius: 4px;
}

.salzbandit .hebel-knopf:disabled,
.salzbandit .hebel-knopf.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.salzbandit .paar-anzeige {
    text-align: center;
    margin: 1.25rem 0 0.5rem 0;
    font-size: 1.15rem;
    min-height: 1.4em;
}

.salzbandit .aufgabe {
    margin-top: 1rem;
    background: #e8d3b0;
    color: #2c2530;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: none;
}

.salzbandit .aufgabe.aktiv {
    display: block;
}

.salzbandit .aufgabe label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.4rem;
    color: #6a4d63;
}

.salzbandit .eingabe-reihe {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.salzbandit .eingabe-reihe input[type="text"] {
    flex: 1 1 220px;
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    border: 2px solid #c4af88;
    border-radius: 6px;
    background: #fffdf8;
    color: #2c2530;
}

.salzbandit .eingabe-reihe input[type="text"]:focus {
    outline: none;
    border-color: #6a4d63;
}

.salzbandit .eingabe-reihe button {
    padding: 0.6rem 1rem;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.salzbandit #pruefen {
    background: #6a4d63;
    color: #f2e4c9;
}

.salzbandit #weiter {
    background: #c4af88;
    color: #2c2530;
    display: none;
}

.salzbandit .feedback {
    margin-top: 0.75rem;
    font-weight: bold;
    min-height: 1.4em;
}

.salzbandit .feedback.richtig {
    color: #2e7d32;
}

.salzbandit .feedback.falsch {
    color: #b83030;
}

.salzbandit .statistik {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.85;
}

.salzbandit .hinweis {
    margin-top: 1rem;
    font-size: 0.85rem;
    opacity: 0.8;
    text-align: center;
}

.salzbandit a.zurueck {
    display: inline-block;
    margin: 1.5rem auto 0 auto;
    color: #6a4d63;
    text-decoration: none;
}

/* ============================================================
   MOLARE MASSE  (sus/molaremasse.html)
   ============================================================ */

.molare-masse main {
    display: block;
    max-width: 760px;
}

.molare-masse .mm-karte {
    background-color: #e8d3b0;
    border: 1px solid #c4af88;
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 2px 8px rgba(106, 77, 99, 0.18);
}

.molare-masse .mm-karte h2 {
    margin: 0 0 1rem 0;
    text-align: center;
    font-size: 1.4rem;
    color: #6a4d63;
    letter-spacing: 0.04em;
}

.molare-masse .mm-aufgabe {
    background-color: #fff8ec;
    border: 1px solid #d3cab8;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    text-align: center;
    margin-bottom: 1.25rem;
}

.molare-masse .mm-frage {
    margin: 0 0 0.5rem 0;
    color: #3a3340;
    font-size: 1rem;
}

.molare-masse .mm-formel {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier New", monospace;
    font-size: 2.4rem;
    font-weight: bold;
    color: #2c2530;
    margin: 0.4rem 0;
    line-height: 1.2;
    word-break: break-word;
}

.molare-masse .mm-formel sub {
    font-size: 0.62em;
    line-height: 0;
}

.molare-masse .mm-name {
    margin: 0;
    font-size: 0.95rem;
    color: #6b6068;
    font-style: italic;
}

.molare-masse .mm-eingabe-wrap {
    margin-bottom: 1rem;
}

.molare-masse .mm-eingabe-wrap label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.4rem;
    color: #6a4d63;
}

.molare-masse .mm-eingabe-wrap select {
    width: 100%;
    padding: 0.5rem 0.6rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    border: 2px solid #c4af88;
    border-radius: 6px;
    background: #fffdf8;
    color: #2c2530;
    cursor: pointer;
    box-sizing: border-box;
}

.molare-masse .mm-eingabe-wrap select:focus {
    outline: none;
    border-color: #6a4d63;
}

.molare-masse .mm-eingabe-reihe {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.molare-masse .mm-eingabe-reihe input[type="text"] {
    flex: 1 1 180px;
    padding: 0.6rem 0.8rem;
    font-size: 1.1rem;
    border: 2px solid #c4af88;
    border-radius: 6px;
    background: #fffdf8;
    color: #2c2530;
    font-family: Arial, Helvetica, sans-serif;
}

.molare-masse .mm-eingabe-reihe input[type="text"]:focus {
    outline: none;
    border-color: #6a4d63;
}

.molare-masse .mm-eingabe-reihe button {
    padding: 0.6rem 1rem;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    transition: background-color 0.15s;
}

.molare-masse #mm-pruefen {
    background: #6a4d63;
    color: #f2e4c9;
}

.molare-masse #mm-pruefen:hover {
    background: #553d4f;
}

.molare-masse #mm-loesung {
    background: #aca497;
    color: #fff8ec;
}

.molare-masse #mm-loesung:hover {
    background: #8f877c;
}

.molare-masse #mm-weiter {
    background: #c4af88;
    color: #2c2530;
    display: none;
}

.molare-masse #mm-weiter:hover {
    background: #b5a07e;
}

.molare-masse .feedback {
    margin-top: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    font-weight: bold;
    min-height: 1.4em;
    display: none;
}

.molare-masse .feedback.richtig {
    display: block;
    background-color: #d7ecd0;
    color: #2f6b2f;
    border: 1px solid #a3c89b;
}

.molare-masse .feedback.falsch {
    display: block;
    background-color: #f3d4d0;
    color: #8a2f25;
    border: 1px solid #c89b97;
}

.molare-masse .feedback:not(.richtig):not(.falsch) {
    display: block;
    background-color: #f0e1ca;
    color: #3a3340;
    border: 1px solid #d3cab8;
}

.molare-masse .mm-tipp {
    margin-top: 1rem;
    background-color: #f6ecd7;
    border: 1px dashed #aca497;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    color: #3a3340;
}

.molare-masse .mm-tipp p {
    margin: 0 0 0.5rem 0;
}

.molare-masse .mm-rechnung {
    display: none;
    margin-top: 0.5rem;
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier New", monospace;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #2c2530;
    padding-top: 0.5rem;
    border-top: 1px solid #d3cab8;
}

.molare-masse .mm-tipp.aufgedeckt .mm-rechnung {
    display: block;
}

.molare-masse .mm-statistik {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: #6b6068;
}

.molare-masse .mm-hinweis {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #6b6068;
    text-align: center;
}

.molare-masse .mm-hinweis code {
    background-color: #f6ecd7;
    border: 1px solid #d3cab8;
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    font-family: "SFMono-Regular", "Consolas", "Menlo", monospace;
}

/* ============================================================
   IONEN LERNEN  (sus/ionenlernen.html)
   ============================================================ */

.ionen-lernen main {
    display: block;
    max-width: 760px;
}

.ionen-lernen .il-karte {
    background-color: #e8d3b0;
    border: 1px solid #c4af88;
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 2px 8px rgba(106, 77, 99, 0.18);
}

.ionen-lernen .il-karte h2 {
    margin: 0 0 1rem 0;
    text-align: center;
    font-size: 1.4rem;
    color: #6a4d63;
    letter-spacing: 0.04em;
}

.ionen-lernen .il-einstellungen {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    background-color: #fff8ec;
    border: 1px solid #d3cab8;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.ionen-lernen .il-feld {
    flex: 1 1 200px;
}

.ionen-lernen .il-feld label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.4rem;
    color: #6a4d63;
}

.ionen-lernen .il-feld select {
    width: 100%;
    padding: 0.5rem 0.6rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    border: 2px solid #c4af88;
    border-radius: 6px;
    background: #fffdf8;
    color: #2c2530;
    cursor: pointer;
    box-sizing: border-box;
}

.ionen-lernen .il-feld select:focus {
    outline: none;
    border-color: #6a4d63;
}

.ionen-lernen .il-start-feld {
    flex: 0 0 auto;
}

.ionen-lernen #il-start {
    padding: 0.55rem 1rem;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    background: #6a4d63;
    color: #f2e4c9;
    transition: background-color 0.15s;
}

.ionen-lernen #il-start:hover {
    background: #553d4f;
}

.ionen-lernen .il-fortschritt {
    text-align: center;
    font-size: 0.9rem;
    color: #6b6068;
    margin-bottom: 0.75rem;
}

.ionen-lernen .il-aufgabe {
    background-color: #fff8ec;
    border: 1px solid #d3cab8;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    text-align: center;
    margin-bottom: 1.25rem;
}

.ionen-lernen .il-aufgaben-text {
    margin: 0 0 0.5rem 0;
    color: #3a3340;
    font-size: 1rem;
}

.ionen-lernen .il-prompt {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier New", monospace;
    font-size: 2.2rem;
    font-weight: bold;
    color: #2c2530;
    margin: 0.4rem 0;
    line-height: 1.2;
    word-break: break-word;
}

.ionen-lernen .il-prompt sub {
    font-size: 0.62em;
    line-height: 0;
}

.ionen-lernen .il-prompt sup {
    font-size: 0.62em;
    line-height: 0;
}

.ionen-lernen .il-eingabe-wrap {
    margin-bottom: 1rem;
}

.ionen-lernen .il-eingabe-wrap label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.4rem;
    color: #6a4d63;
}

.ionen-lernen .il-eingabe-reihe {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ionen-lernen .il-eingabe-reihe input[type="text"] {
    flex: 1 1 180px;
    padding: 0.6rem 0.8rem;
    font-size: 1.1rem;
    border: 2px solid #c4af88;
    border-radius: 6px;
    background: #fffdf8;
    color: #2c2530;
    font-family: Arial, Helvetica, sans-serif;
}

.ionen-lernen .il-eingabe-reihe input[type="text"]:focus {
    outline: none;
    border-color: #6a4d63;
}

.ionen-lernen .il-eingabe-reihe button {
    padding: 0.6rem 1rem;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    transition: background-color 0.15s;
}

.ionen-lernen #il-pruefen {
    background: #6a4d63;
    color: #f2e4c9;
}

.ionen-lernen #il-pruefen:hover {
    background: #553d4f;
}

.ionen-lernen #il-loesung {
    background: #aca497;
    color: #fff8ec;
}

.ionen-lernen #il-loesung:hover {
    background: #8f877c;
}

.ionen-lernen .il-weiter {
    background: #c4af88;
    color: #2c2530;
    display: none;
}

.ionen-lernen .il-weiter:hover {
    background: #b5a07e;
}

.ionen-lernen .feedback {
    margin-top: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    font-weight: bold;
    min-height: 1.4em;
    display: none;
}

.ionen-lernen .feedback.richtig {
    display: block;
    background-color: #d7ecd0;
    color: #2f6b2f;
    border: 1px solid #a3c89b;
}

.ionen-lernen .feedback.falsch {
    display: block;
    background-color: #f3d4d0;
    color: #8a2f25;
    border: 1px solid #c89b97;
}

.ionen-lernen .feedback:not(.richtig):not(.falsch) {
    display: block;
    background-color: #f0e1ca;
    color: #3a3340;
    border: 1px solid #d3cab8;
}

.ionen-lernen .il-statistik {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: #6b6068;
}

.ionen-lernen .il-hinweis {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #6b6068;
    text-align: center;
}

.ionen-lernen .il-hinweis code {
    background-color: #f6ecd7;
    border: 1px solid #d3cab8;
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    font-family: "SFMono-Regular", "Consolas", "Menlo", monospace;
}

/* ============================================================
   KONTAKT  (kontakt.html) – blaues Farbkonzept wie Startseite
   ============================================================ */

.kontakt-seite header {
    background-color: #3b4c75;
}

.kontakt-seite .zurueck-link {
    background-color: #3b4c75;
    border-color: rgba(255, 255, 255, 0.25);
    color: #f2e4c9;
}

.kontakt-seite .zurueck-link:hover {
    background-color: #2c3a5e;
}

.kontakt-seite main {
    display: block;
}

.kontakt-wrap {
    background-color: #e8d3b0;
    border: 1px solid #c4af88;
    border-radius: 8px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 1px 3px rgba(106, 77, 99, 0.18);
    max-width: 640px;
    margin: 2rem auto;
}

.kontakt-wrap h2 {
    margin-top: 0;
    font-size: 1.5rem;
    color: #3b4c75;
    border-bottom: 2px solid #8fa3c4;
    padding-bottom: 0.5rem;
}

.kontakt-wrap p.hinweis {
    margin-bottom: 1.25rem;
    color: #3a3340;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.35rem;
    color: #3a3340;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.5rem 0.6rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    border: 1px solid #aca497;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fffdf8;
    color: #2c2530;
}

.form-group textarea {
    min-height: 140px;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b4c75;
    box-shadow: 0 0 0 2px rgba(59, 76, 117, 0.25);
}

.form-error {
    display: none;
    color: #a02020;
    font-size: 0.85rem;
    margin-top: 0.3rem;
}

.form-group.invalid input,
.form-group.invalid textarea {
    border-color: #a02020;
}

.form-group.invalid .form-error {
    display: block;
}

.kontakt-seite .aktionen {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.kontakt-seite button[type="submit"] {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    background-color: #3b4c75;
    color: #f2e4c9;
    border: none;
    border-radius: 4px;
    padding: 0.55rem 1.2rem;
    cursor: pointer;
    transition: background-color 0.15s;
}

.kontakt-seite button[type="submit"]:hover {
    background-color: #2c3a5e;
}

.kontakt-seite button[type="reset"] {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    background-color: transparent;
    color: #3b4c75;
    border: 1px solid #aca497;
    border-radius: 4px;
    padding: 0.55rem 1.2rem;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.kontakt-seite button[type="reset"]:hover {
    background-color: #c4af88;
    color: #3c2c3a;
}

.form-success {
    display: none;
    background-color: #d9ecd0;
    border: 1px solid #8fbb7a;
    color: #2e5a22;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1.25rem;
}

.form-success.visible {
    display: block;
}

.form-error-msg {
    display: none;
    background-color: #f3d6d0;
    border: 1px solid #c97a6a;
    color: #6e1f15;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1.25rem;
}

.form-error-msg.visible {
    display: block;
}

.back-link {
    display: inline-block;
    margin-top: 1rem;
    text-decoration: none;
    color: #6a4d63;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
}

.back-link:hover {
    background-color: #c4af88;
    color: #3c2c3a;
}

.pflichtfeld {
    font-weight: normal;
}