/* Kapitel 5 – Chemie. Eigene Farbwelt: Salzkristall auf Tiefblau. */

:root {
  --tief: #0e1626;
  --panel: #18233a;
  --panel-hell: #1f2c47;
  --rand: #2e3d5c;
  --weiss: #e9eef8;
  --grau: #93a0bb;
  --eis: #6fd3e8;        /* Überschriften, Akzent */
  --natrium: #f2a63c;    /* Na+ – kleine Kugeln */
  --chlorid: #7ed17a;    /* Cl− – große Kugeln */
  --rosa: #ef8fa6;
  --draht: #7b8496;
  --glas-aus: #222f47;
  --faden-aus: #4c5977;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--tief);
  /* ein paar Lichtpunkte, wie Salzkörner im Streiflicht */
  background-image:
    radial-gradient(circle at 15% 8%, rgba(111,211,232,.10), transparent 45%),
    radial-gradient(circle at 85% 65%, rgba(242,166,60,.07), transparent 45%);
  color: var(--weiss);
  font-family: "Comic Neue", "Comic Sans MS", sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
}
h1, h2 {
  font-family: "Bangers", "Impact", fantasy;
  font-weight: normal; letter-spacing: 3px;
  color: var(--eis); margin: 0 0 .5em;
}
h3, h4 {
  font-family: "Bangers", fantasy; font-weight: normal; letter-spacing: 1.5px;
  color: var(--weiss);
}
section { padding: 64px 20px; max-width: 1100px; margin: 0 auto; }
a { color: var(--chlorid); }
b { color: var(--natrium); font-weight: 700; }
sub, sup { font-size: .68em; line-height: 0; }
/* Formeln NIE in Bangers: die Schrift hat keine Kleinbuchstaben, aus NaCl
   würde NACL – in der Chemie ändert das die Bedeutung. */
.formel, .gleichung, .sformel, .startformeln { font-family: "Comic Neue", sans-serif; }
.einleitung { color: var(--grau); max-width: 68ch; }
.klein { font-size: .88rem; color: var(--grau); }
.panel { background: var(--panel); border: 1px solid var(--rand); padding: 18px 20px; }
.zweispaltig { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }

.knopf {
  font: inherit; font-size: .95rem; color: var(--weiss); background: var(--panel-hell);
  border: 1px solid var(--rand); padding: 8px 14px; cursor: pointer;
}
.knopf:hover { border-color: var(--eis); }
.knopf.klein { font-size: .88rem; padding: 5px 11px; }

/* ---------- Startbild ---------- */
#start {
  max-width: none; min-height: 100vh; text-align: center; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#start h1 { font-size: clamp(2.4rem, 9vw, 6rem); line-height: 1; }
.untertitel { color: var(--rosa); letter-spacing: 2px; font-size: 1.15rem; }
#start p { max-width: 640px; padding: 0 20px; }
.startformeln {
  font-weight: 700; color: var(--weiss);
  font-size: clamp(1.05rem, 3.4vw, 1.55rem); line-height: 2; opacity: .92;
  margin: 26px 0; padding: 0 16px;
}
.startformeln span { display: block; }
.runter {
  position: absolute; bottom: 22px; color: var(--eis); text-decoration: none;
  font-size: 2rem; animation: schweben 2s infinite;
}
@keyframes schweben { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .runter { animation: none; }
  .teilchen { animation: none !important; }
}

/* ---------- Auswendig lernen ---------- */
#merken-abschnitt { background: rgba(111,211,232,.05); max-width: none; }
#merken-abschnitt > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
#merksaetze { display: grid; gap: 18px; margin-top: 22px; }
.merkkasten {
  position: relative; background: var(--panel);
  border: 2px solid var(--eis); border-left-width: 10px;
  padding: 22px 24px 18px; box-shadow: 0 0 0 1px rgba(111,211,232,.18), 0 8px 24px rgba(0,0,0,.35);
}
.merkband {
  position: absolute; top: 0; right: 0;
  background: var(--eis); color: var(--tief);
  font-family: "Bangers", fantasy; letter-spacing: 2px; font-size: .95rem;
  padding: 3px 14px 2px;
}
.merkkasten h3 { margin: 0 0 12px; font-size: 1.3rem; color: var(--eis); padding-right: 9em; }
.merksatz {
  margin: 0 0 12px; padding: 0; border: 0;
  font-size: clamp(1.1rem, 2.6vw, 1.45rem); font-weight: 700; line-height: 1.5;
}
.merkkasten.verdeckt .merksatz {
  color: transparent; background: var(--panel-hell);
  border-radius: 4px; user-select: none;
}
.merkkasten.verdeckt .merksatz::after {
  content: "… aufsagen, dann aufdecken";
  display: block; color: var(--grau); font-size: 1rem; font-weight: 400;
  text-align: center;
}
.merkhinweis { color: var(--grau); font-size: .95rem; margin: 0 0 12px; }
.merkschalter {
  font: inherit; font-size: .9rem; color: var(--tief); background: var(--eis);
  border: 0; padding: 6px 14px; cursor: pointer;
}
.merkschalter:hover { background: #8ee0f2; }

/* ---------- Karten (Kochsalz, Eigenschaften) ---------- */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.karte {
  background: var(--panel); border: 1px solid var(--rand);
  border-top: 3px solid var(--natrium); padding: 18px 20px;
}
.karte h3 { margin: 0 0 12px; font-size: 1.3rem; }
.karte ul { margin: 0; padding-left: 20px; }
.karte li { margin-bottom: 8px; }
.nr {
  background: var(--natrium); color: var(--tief); padding: 1px 9px; margin-right: 8px;
  font-size: 1rem; letter-spacing: 1px;
}

/* ---------- Verwendung: Balken ---------- */
#kochsalz-abschnitt h3 { margin-top: 36px; }
.anteile { display: grid; gap: 8px; margin-bottom: 16px; }
.anteil {
  position: relative; display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 10px;
  font: inherit; text-align: left; color: var(--weiss);
  background: var(--panel); border: 1px solid var(--rand);
  padding: 10px 14px; cursor: pointer; overflow: hidden;
}
.anteil-balken {
  position: absolute; inset: 0 auto 0 0; width: var(--breite);
  background: var(--farbe); opacity: .22; transition: opacity .2s;
}
.anteil:hover .anteil-balken, .anteil.aktiv .anteil-balken { opacity: .4; }
.anteil.aktiv { border-color: var(--farbe); }
.anteil-name, .anteil-zahl { position: relative; }
.anteil-name { font-weight: 700; }
.anteil-zahl { color: var(--grau); font-variant-numeric: tabular-nums; }
.anteil-text {
  background: var(--panel); border-left: 4px solid var(--natrium);
  padding: 14px 18px; min-height: 4.5em;
}

/* ---------- Bindungsarten im Vergleich ---------- */
.stoffwahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 16px; }
.stoffwahl button {
  font: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  color: var(--weiss); background: var(--panel);
  border: 1px solid var(--rand); border-top: 3px solid var(--farbe);
  padding: 7px 15px; cursor: pointer; line-height: 1.3;
}
.stoffwahl button:hover { border-color: var(--eis); border-top-color: var(--farbe); }
.stoffwahl button.aktiv { background: var(--panel-hell); border-color: var(--farbe); }
table.vergleich {
  width: 100%; border-collapse: collapse; font-size: .95rem;
  background: var(--panel); min-width: 640px;
}
table.vergleich th, table.vergleich td {
  padding: 8px 11px; border: 1px solid var(--rand); vertical-align: top; text-align: left;
}
table.vergleich thead th {
  font-family: "Bangers", fantasy; font-weight: normal; letter-spacing: 1px;
  font-size: 1.1rem; color: var(--eis); cursor: pointer; white-space: nowrap;
}
table.vergleich tbody th {
  font-family: "Comic Neue", sans-serif; font-weight: 700; letter-spacing: 0;
  color: var(--grau); font-size: .9rem; width: 12.5em;
}
/* Die gewählte Spalte hebt sich ab – Kopf und alle Zellen darunter. */
table.vergleich .hell { background: var(--panel-hell); }
table.vergleich thead th.hell { color: var(--natrium); }
table.vergleich td { cursor: pointer; }
#bindungen-abschnitt h3 { margin-top: 38px; }
#metallsalz ul { margin: 0; padding-left: 20px; }
#metallsalz li { margin-bottom: 8px; }
#metallsalz h3 { margin-top: 0; }

/* ---------- Ionengitter ---------- */
.gitterfeld { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(260px, 1fr); gap: 24px; align-items: center; }
@media (max-width: 760px) { .gitterfeld { grid-template-columns: 1fr; } }
.gitterbild { background: var(--panel); border: 1px solid var(--rand); padding: 10px; }
#gitter { width: 100%; height: auto; display: block; }
.stab { stroke: #3a4a6b; stroke-width: 2.5; }
.stab.hell { stroke: var(--eis); stroke-width: 4; }
.ionkugel { cursor: pointer; stroke: #0b1220; stroke-width: 2; transition: opacity .2s, stroke .2s; }
.ionkugel.natrium { fill: var(--natrium); }
.ionkugel.chlorid { fill: var(--chlorid); }
.ionkugel.blass { opacity: .28; }
.ionkugel.nachbar { opacity: 1; stroke: var(--eis); stroke-width: 3; }
.ionkugel.gewaehlt { opacity: 1; stroke: #fff; stroke-width: 5; }
.ionkugel:hover { opacity: 1; }
.ionkugel:focus { outline: none; stroke: #fff; stroke-width: 4; }
.legende { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; padding: 6px 0 2px; font-size: .92rem; color: var(--grau); }
.kugel { display: inline-block; width: 13px; height: 13px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.kugel.natrium { background: var(--natrium); }
.kugel.chlorid { background: var(--chlorid); width: 17px; height: 17px; vertical-align: -3px; }
.gittertext { background: var(--panel); border-left: 4px solid var(--eis); padding: 16px 20px; }
.gittertext p { margin: 0 0 10px; }
.gewaehltes { font-family: "Bangers", fantasy; letter-spacing: 1.5px; font-size: 1.25rem; color: var(--eis); }
.gewaehltes .formel { letter-spacing: 0; font-size: 1.05rem; font-weight: 700; }
.fakten { margin: 26px 0 0; padding-left: 22px; }
.fakten li { margin-bottom: 8px; }

/* ---------- Eigenschaften ---------- */
.eigenschaft { border-top-color: var(--rosa); }
.eigenschaft .nr, .eigenschaft h3 { text-transform: none; }
.eigfrage { color: var(--grau); font-style: italic; }
.eigenschaft .ursache {
  display: none; margin: 12px 0; padding: 10px 14px;
  background: var(--panel-hell); border-left: 4px solid var(--chlorid);
}
.eigenschaft.offen .ursache { display: block; }
#alle-ursachen { margin-top: 18px; }

/* ---------- Leitfähigkeit ---------- */
.schalter { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.schalter button {
  font: inherit; font-size: .98rem; color: var(--weiss); background: var(--panel);
  border: 1px solid var(--rand); padding: 9px 16px; cursor: pointer;
}
.schalter button:hover { border-color: var(--eis); }
.schalter button.aktiv { background: var(--eis); border-color: var(--eis); color: var(--tief); font-weight: 700; }

.stromkreis {
  display: grid; grid-template-columns: 130px 200px 1fr; gap: 22px; align-items: center;
  background: var(--panel); border: 1px solid var(--rand); padding: 22px;
}
@media (max-width: 820px) {
  .stromkreis { grid-template-columns: 130px 1fr; }
  .leittext { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .stromkreis { grid-template-columns: 1fr; justify-items: center; } }
#lampe { width: 110px; height: auto; }
#lampe.an #glas { fill: #f7e59a; }
#lampe.an #faden { stroke: #ff9c2e; }
#glas, #faden { transition: fill .3s, stroke .3s; }

.becher {
  position: relative; width: 190px; height: 130px;
  border: 3px solid var(--draht); border-top: 0;
  border-radius: 0 0 14px 14px; background: rgba(111,211,232,.07);
}
.becher.fest { background: rgba(255,255,255,.05); }
.becher.loesung { background: rgba(111,211,232,.16); }
.teilchen { position: absolute; width: 11px; height: 11px; border-radius: 50%; }
.teilchen.natrium { background: var(--natrium); }
.teilchen.chlorid { background: var(--chlorid); width: 15px; height: 15px; }
.becher.schmelze .teilchen, .becher.loesung .teilchen { animation: wandern 3s ease-in-out infinite alternate; }
@keyframes wandern {
  from { transform: translate(0, 0); }
  to   { transform: translate(18px, -12px); }
}
.beschriftung { text-align: center; color: var(--grau); font-size: .92rem; margin: 8px 0 0; }
.leittext .urteil {
  font-family: "Bangers", fantasy; letter-spacing: 1.5px; font-size: 1.35rem; margin: 0 0 8px;
}
.urteil.ja { color: var(--chlorid); }
.urteil.nein { color: var(--rosa); }

/* ---------- Dissoziations-Baukasten ---------- */
.salzwahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; }
.salzwahl button {
  font: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  color: var(--weiss); background: var(--panel); border: 1px solid var(--rand);
  padding: 7px 13px; cursor: pointer; line-height: 1.3;
}
.salzwahl button:hover { border-color: var(--eis); }
.salzwahl button.aktiv { border-color: var(--natrium); background: var(--panel-hell); }
.sname { font-size: .9rem; }
.sformel { font-weight: 700; color: var(--natrium); }
.baukasten { margin-bottom: 30px; }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.schritte li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  background: var(--panel); border: 1px solid var(--rand); padding: 16px 18px;
}
.schrittnr {
  display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--eis); color: var(--tief);
  font-family: "Bangers", fantasy; font-size: 1.2rem; border-radius: 50%;
}
.gleichung {
  font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 700; color: var(--natrium);
  margin: 10px 0 6px;
}

/* ---------- Übungen ---------- */
#alle-loesungen { margin-bottom: 18px; }
.uebung { background: var(--panel); border: 1px solid var(--rand); padding: 16px 18px; margin-bottom: 16px; }
.uebung h3 { margin: 0 0 12px; font-size: 1.15rem; line-height: 1.45; }
.tabellenrolle { overflow-x: auto; }
.uebung table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.uebung th {
  font-family: "Bangers", fantasy; font-weight: normal; color: var(--eis);
  font-size: 1.05rem; letter-spacing: 1px; text-align: left;
  padding: 7px 10px; border-bottom: 1px solid var(--rand); white-space: nowrap;
}
.uebung td { padding: 7px 10px; border-top: 1px solid var(--rand); }
.uebung tbody tr { cursor: pointer; }
.uebung tbody tr:hover { background: var(--panel-hell); }
.uebung td.loesung span { visibility: hidden; }
.uebung td.loesung { background: rgba(126,209,122,.08); position: relative; }
.uebung td.loesung::after {
  content: "?"; position: absolute; inset: 7px 10px auto auto; color: var(--grau);
}
.uebung tr.offen td.loesung span { visibility: visible; color: var(--chlorid); font-weight: 700; }
.uebung tr.offen td.loesung::after { content: ""; }

/* ---------- Begriffe ---------- */
.begriffe { margin: 0; padding-left: 22px; columns: 2 300px; column-gap: 30px; }
.begriffe li { margin-bottom: 10px; break-inside: avoid; }

/* ---------- Quiz ---------- */
.quiz { background: var(--panel); border: 1px solid var(--rand); padding: 28px; text-align: center; }
.quiz .frage { font-size: 1.2rem; margin-bottom: 18px; min-height: 3.4em; }
.quiz #antworten { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.quiz button {
  font: inherit; font-size: 1rem; color: var(--weiss); background: var(--panel-hell);
  border: 2px solid var(--rand); padding: 11px 18px; cursor: pointer;
  width: min(100%, 560px); transition: background .2s, border-color .2s, transform .1s;
}
.quiz button:hover { background: var(--eis); border-color: var(--eis); color: var(--tief); transform: scale(1.02); }
.quiz button:disabled { cursor: default; transform: none; opacity: .55; }
.quiz .richtig { background: #256b46 !important; border-color: var(--chlorid) !important; color: var(--weiss) !important; opacity: 1 !important; }
.quiz .falsch { background: #7d2a3a !important; border-color: var(--rosa) !important; color: var(--weiss) !important; opacity: 1 !important; }
.quiz .rueckmeldung { min-height: 1.6em; margin-top: 16px; font-size: 1.05rem; }
.quiz .punkte { color: var(--grau); margin-top: 10px; }
.fortschritt { height: 5px; background: var(--panel-hell); margin-bottom: 20px; }
.fortschritt div { height: 100%; background: var(--eis); width: 0; transition: width .3s; }

#eintragen { margin-top: 20px; border-top: 1px dashed var(--rand); padding-top: 18px; }
#eintragen input[type=text] {
  font: inherit; background: var(--tief); color: var(--weiss);
  border: 2px solid var(--rand); padding: 10px 12px; width: min(100%, 260px);
}
#eintragen input[type=text]:focus { outline: none; border-color: var(--eis); }
#eintragen .honig { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.formfehler { color: var(--rosa); min-height: 1.4em; margin-top: 8px; }

/* ---------- Siegerliste ---------- */
.siegerliste { background: var(--panel); border: 1px solid var(--rand); padding: 10px 18px; overflow-x: auto; }
.siegerliste table { width: 100%; border-collapse: collapse; }
.siegerliste th {
  font-family: "Bangers", fantasy; font-weight: normal; color: var(--eis);
  font-size: 1.2rem; letter-spacing: 1px; text-align: left; padding: 8px;
}
.siegerliste td { padding: 8px; border-top: 1px solid var(--rand); }
.siegerliste tr.ich td { color: #fff; background: rgba(126,209,122,.18); }
.siegerliste td:first-child { width: 4em; }

footer { text-align: center; color: var(--grau); padding: 40px 20px; font-size: .9rem; }
footer strong { color: var(--eis); }
footer a { color: var(--grau); }
.quelle { font-size: .8rem; color: #667390; margin-top: 10px; }