/* Lernen-App: was NUR diese App braucht.
   Alles Gemeinsame steht in /app/basis.css und wird davor geladen: Farbtokens,
   Raster, Kopfzeile, Knoepfe, Werbestreifen, Begruessung, Toast, Blatt.

   DER UNTERSCHIED ZU DEN GESCHWISTERN: hier wird gelernt, und das Herzstueck
   ist die grosse Lernkarte mit dem 3D-Flip. Jede eigene Farbe hat ihr
   Dunkelmodus-Paar. @media erhoeht die Spezifitaet nicht: wer nur den
   Hellwert setzt, hat den Dunkelmodus kaputtgemacht. */

:root {
  /* Lernfarben. Eigene Namen, damit sie nichts aus der Basis ueberschreiben.
     Blau markiert Faelliges, Gruen heisst gewusst, Rot heisst nochmal. */
  --le-blau:    #0091c8;
  --le-gruen:   #17864a;
  --le-rot:     #c02626;
  --le-feld:    #e6eaef;   /* leere Balken, ruhige Flaechen */
  --le-hinten:  #e3f2fa;   /* die Rueckseite der Lernkarte, zart blau */

  /* Schrift AUF den kraeftigen Flaechen. Im Dunkelmodus werden die Farben
     heller, dann muss die Schrift dunkel werden, sonst ist sie unlesbar. */
  --auf-le-blau:  #ffffff;
  --auf-le-gruen: #ffffff;
  --auf-le-rot:   #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* PAARWEISE mitziehen, sonst leuchten helle Felder nachts wie Scheinwerfer. */
    --le-blau:    #35b4e0;
    --le-gruen:   #3ddc84;
    --le-rot:     #ff6b6b;
    --le-feld:    #232932;
    --le-hinten:  #1c313d;

    --auf-le-blau:  #10131a;
    --auf-le-gruen: #10131a;
    --auf-le-rot:   #10131a;
  }
}

/* Kopf (oder Lernleiste), Buehne, Werbung. Ein Element mit display:none belegt
   keine Rasterzeile, deshalb stimmt die Zahl in beiden Zustaenden. */
.app { grid-template-rows: auto minmax(0, 1fr) auto; }

/* Das Hinweiszeichen in der Kopfzeile, wie bei den Geschwistern. */
.kopf-knopf {
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--linie);
  border-radius: 50%;
  background: var(--karte);
  color: var(--blau);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Die schmale Leiste beim Bearbeiten und Lernen ---------- */

/* :not(.hidden) ist Pflicht: die Basis kennt .hidden mit display:none, wird
   aber VOR dieser Datei geladen. Ein schlichtes display:grid haette bei
   gleicher Spezifitaet gewonnen, und die Leiste stuende auch in der Uebersicht. */
.lernleiste:not(.hidden) {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 2px;
}
.ll-zurueck {
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--leise);
  font-family: inherit;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.ll-titel {
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ll-kontext {
  font-size: 14px;
  font-weight: 700;
  color: var(--leise);
  white-space: nowrap;
}

/* ---------- Die Buehne ---------- */

.buehne {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 2px 2px 6px;
}

/* ---------- Ansicht 1: die Stapel-Uebersicht ---------- */

.st-liste { display: grid; gap: 7px; }

.st-karte {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid transparent;
  border-left: 4px solid var(--le-blau);
  border-radius: 14px;
  background: var(--karte);
}

.st-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.st-name {
  font-size: 18px;
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Die blaue Pille: so viele Karten warten JETZT. Sie ist der Grund, die App
   zu oeffnen, deshalb ist sie das Auffaelligste an der Karte. */
.st-pille {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--le-blau);
  color: var(--auf-le-blau);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.st-mitte {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.st-zahl { font-size: 13px; font-weight: 600; color: var(--leise); }

/* Die Miniverteilung: fuenf Balken, Kasten 1 bis 5 von links nach rechts.
   Rechtsbuendig am Boden ausgerichtet, wie kleine Kaesten eben. */
.st-balken {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
}
.st-takt {
  display: flex;
  align-items: flex-end;
  width: 12px;
  height: 100%;
  border-radius: 3px;
  background: var(--le-feld);
  overflow: hidden;
}
.st-takt i {
  display: block;
  width: 100%;
  border-radius: 3px;
  background: var(--le-blau);
}

.st-zeile {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.st-knopf {
  min-height: 40px;
  padding: 0 14px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .08s ease;
}
.st-knopf:active { transform: scale(.96); }
.st-lernen {
  background: var(--le-blau);
  border-color: var(--le-blau);
  color: var(--auf-le-blau);
  flex: 1;
}
/* Der Zweitklick-Zustand des Loeschknopfs: erst jetzt wird es ernst. */
.st-weg.ernst {
  background: var(--le-rot);
  border-color: var(--le-rot);
  color: var(--auf-le-rot);
}
/* Nichts faellig: statt eines toten Knopfs eine ehrliche Zeile. */
.st-ruhe {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--le-gruen);
}

.st-neu {
  min-height: 52px;
  border: 2px dashed var(--linie);
  border-radius: 14px;
  background: transparent;
  color: var(--leise);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .08s ease;
}
.st-neu:active { transform: scale(.98); }

/* ---------- Die Vorlagen-Bibliothek unter den eigenen Stapeln ---------- */

/* Eigene Farben braucht die Bibliothek nicht: sie leiht sich die Lernfarben
   oben, und die haben ihre Dunkelmodus-Paare schon. */

.vb-bereich { display: grid; gap: 7px; margin-top: 6px; }

/* Die Kopfzeile ist ein Knopf und klappt die Liste auf und zu. Gestrichelt
   wie "+ Neuer Stapel": beides sind Angebote, keine eigenen Stapel. */
.vb-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: start;
  gap: 2px 10px;
  min-height: 52px;
  padding: 10px 14px;
  border: 2px dashed var(--linie);
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .08s ease;
}
.vb-kopf:active { transform: scale(.98); }
.vb-titel { font-size: 17px; font-weight: 800; }
.vb-satz { font-size: 13px; font-weight: 600; color: var(--gedimmt); }
.vb-pfeil {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: 20px;
  font-weight: 700;
  color: var(--leise);
}

.vb-rumpf:not(.hidden) { display: grid; gap: 5px; }

.vb-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--karte);
}
.vb-symbol { flex: none; font-size: 24px; line-height: 1; }
.vb-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.vb-text b {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vb-text small {
  font-size: 12px;
  color: var(--leise);
  line-height: 1.35;
}
.vb-holen {
  flex: none;
  min-height: 38px;
  padding: 0 12px;
  border: 2px solid var(--le-blau);
  border-radius: 12px;
  background: var(--le-blau);
  color: var(--auf-le-blau);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .08s ease;
}
.vb-holen:active { transform: scale(.96); }
/* Schon geholt: der Knopf wird leise und gruen, bleibt aber tippbar. Der
   zweite Tipp holt eine nummerierte Kopie, etwa fuer das Geschwisterkind. */
.vb-holen.vb-da {
  background: var(--karte);
  border-color: var(--linie);
  color: var(--le-gruen);
}

/* ---------- Ansicht 2: Bearbeiten ---------- */

.be-raum { display: grid; gap: 10px; }

.be-block {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: var(--karte);
}
.be-titel { margin: 0; font-size: 15px; font-weight: 800; color: var(--leise); }
.be-hilfe { margin: 0; font-size: 13px; color: var(--gedimmt); line-height: 1.4; }
.be-zeile { display: flex; gap: 7px; }
.be-zeile .st-knopf { flex: 1; }

/* Eingabefelder der App: gleiche Formensprache wie die Knoepfe der Basis. */
.le-label { font-size: 14px; font-weight: 700; color: var(--leise); }
.le-feld {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;   /* unter 16 px zoomt iOS beim Antippen die ganze Seite */
}
.le-feld:focus { outline: none; border-color: var(--le-blau); }
.le-gross { min-height: 110px; resize: vertical; line-height: 1.45; }

.be-liste { display: grid; gap: 5px; }
.be-karte {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg);
}
/* Die Kastennummer der Karte: kleine, ruhige Auskunft am Rand. */
.be-kasten {
  flex: none;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--linie);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--leise);
}
.be-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.be-text b {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.be-text small {
  font-size: 13px;
  color: var(--leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.be-weg {
  flex: none;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gedimmt);
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Ansicht 3: Lernen, das Herzstueck ---------- */

.lernraum {
  display: grid;
  gap: 12px;
  align-content: start;
  padding-top: 6px;
}

/* Die Perspektive sitzt am ELTERN-Element: erst dadurch kippt die Karte im
   Raum statt sich nur flach zu verzerren. */
.lk-buehne { perspective: 1200px; }

.lernkarte {
  position: relative;
  width: min(100%, 480px);
  margin: 0 auto;
  min-height: clamp(220px, 44vh, 380px);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  /* Der Flip: die Karte selbst dreht sich, die beiden Seiten haengen starr an
     ihr. transform-style vererbt den Raum an die Kinder. */
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.lernkarte.um { transform: rotateY(180deg); }

.lk-seite {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 18px;
  border-radius: 18px;
  background: var(--karte);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
  /* Ohne backface-visibility schiene die Rueckseite spiegelverkehrt DURCH die
     Vorderseite hindurch. Mit ihr sieht man immer genau eine Seite. */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Die Rueckseite liegt von Anfang an umgedreht auf der Karte: dreht die Karte
   auf 180 Grad, steht die Rueckseite wieder richtig herum da. */
.lk-hinten {
  transform: rotateY(180deg);
  background: var(--le-hinten);
}

.lk-text {
  font-size: clamp(20px, 6vw, 30px);
  font-weight: 800;
  text-align: center;
  line-height: 1.3;
  overflow-wrap: break-word;
  max-width: 100%;
}
.lk-ecke {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gedimmt);
}

.lk-hinweis {
  margin: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--gedimmt);
}

/* Erst NACH dem Umdrehen: die beiden Urteile. Nochmal rot-grau und links
   (die Korrektur), Gewusst gruen und rechts (der Normalfall, am Daumen). */
.lk-knoepfe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: min(100%, 480px);
  margin: 0 auto;
}
.lk-knopf {
  min-height: 56px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 19px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .08s ease;
}
.lk-knopf:active { transform: scale(.96); }
.lk-nochmal {
  background: var(--le-feld);
  border: 2px solid var(--le-rot);
  color: var(--le-rot);
}
.lk-gewusst {
  background: var(--le-gruen);
  border: 2px solid var(--le-gruen);
  color: var(--auf-le-gruen);
}

/* ---------- Die Auswahl aus drei Antworten ----------

   Seit dem 02.08.2026 die normale Lernart (Manni: "3 Auswahlmöglichkeiten, die
   man anklicken kann, mit einem Weiter und Zurück"). Das Umdrehen bleibt nur
   noch als Rückfall für Stapel, die zu klein für Ablenker sind.

   Die Frage steht oben und ist ruhig gesetzt, die Antworten darunter sind das
   einzige, was nach Bedienung aussieht. Zwei Reihen, weil drei Antworten
   nebeneinander auf einem schmalen Handy zu Buchstabensalat werden. */

.lk-frage {
  position: relative;
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: min(26vh, 190px);
  padding: 18px 16px;
  border-radius: 18px;
  background: var(--karte);
  border: 1px solid var(--linie);
  text-align: center;
}

.lk-wahl {
  display: grid;
  gap: 8px;
  width: min(100%, 480px);
  margin: 0 auto;
}

/* 56 px hoch und 17 px Schrift: die Antwort ist das Ziel eines Fingers, der
   sich gerade entscheidet. Kleiner wäre eine Einladung zum Vertippen, und ein
   Vertipper wird hier als Wissenslücke gewertet. */
.lk-a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 12px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .08s ease, border-color .15s ease;
}
.lk-a:active { transform: scale(.98); }
.lk-a-zeichen {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--le-feld);
  color: var(--leise);
  font-size: 14px;
  font-weight: 800;
}
.lk-a-text { min-width: 0; }

/* Nach der Wahl: die richtige Antwort wird immer gezeigt, auch wenn daneben
   getippt wurde. Wer nur sein eigenes Kreuz rot sieht, weiß hinterher noch
   immer nicht, was gestimmt hätte. */
.lk-a:disabled { cursor: default; }
.lk-a.ist-richtig {
  border-color: var(--le-gruen);
  /* Zwei Zeilen mit Absicht: kennt ein Browser color-mix nicht, bleibt die
     ruhige Feldfarbe darüber stehen, statt dass die Regel ganz ausfällt und
     die richtige Antwort aussieht wie jede andere. */
  background: var(--le-feld);
  background: color-mix(in srgb, var(--le-gruen) 16%, var(--karte));
  color: var(--text);
}
.lk-a.ist-richtig .lk-a-zeichen { background: var(--le-gruen); color: var(--auf-le-gruen); }
.lk-a.ist-falsch {
  border-color: var(--le-rot);
  background: var(--le-feld);
  background: color-mix(in srgb, var(--le-rot) 14%, var(--karte));
}
.lk-a.ist-falsch .lk-a-zeichen { background: var(--le-rot); color: var(--karte); }
.lk-a.ist-leise { opacity: .5; }

.lk-loesung {
  width: min(100%, 480px);
  margin: 0 auto;
  padding: 10px 14px;
  border-radius: 14px;
  border-left: 4px solid var(--linie);
  background: var(--le-feld);
}
.lk-loesung.gut     { border-left-color: var(--le-gruen); }
.lk-loesung.daneben { border-left-color: var(--le-rot); }
.lk-loesung-kopf {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}
.lk-loesung.gut .lk-loesung-kopf     { color: var(--le-gruen); }
.lk-loesung.daneben .lk-loesung-kopf { color: var(--le-rot); }
.lk-loesung-satz {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--leise);
}
.lk-loesung-satz b { color: var(--text); }

/* Vor und zurück. Der Weiter-Knopf ist der einzige gefüllte auf dem Bildschirm
   und bleibt gesperrt, bis eine Antwort steht: solange gibt es nichts zu
   blättern. */
.lk-weg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  width: min(100%, 480px);
  margin: 0 auto;
}
.lk-weg-knopf {
  min-height: 52px;
  padding: 0 18px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .08s ease;
}
.lk-weg-knopf:active { transform: scale(.98); }
.lk-weg-knopf:disabled { opacity: .45; cursor: default; }
.lk-weiter {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--auf-akzent);
}
.lk-weiter:active:not(:disabled) { background: var(--akzent-satt); border-color: var(--akzent-satt); }

@media (max-height: 700px) {
  .lk-frage { min-height: min(20vh, 150px); padding: 12px; }
  .lk-a { min-height: 50px; font-size: 16px; }
  .lk-weg-knopf { min-height: 46px; }
}

/* Die Abschluss-Karte am Ende der Runde. */
.lk-ende {
  display: grid;
  gap: 8px;
  justify-items: center;
  width: min(100%, 480px);
  margin: 24px auto 0;
  padding: 24px 18px;
  border-radius: 18px;
  background: var(--karte);
  text-align: center;
}
.lk-ende-symbol { font-size: 44px; line-height: 1; }
.lk-ende h3 { margin: 0; font-size: 26px; }
.lk-ende-zahl { margin: 0; font-size: 19px; font-weight: 800; color: var(--le-gruen); }
.lk-ende-satz { margin: 0 0 6px; font-size: 15px; color: var(--leise); line-height: 1.4; }

/* ---------- Kleine Bildschirme ---------- */

@media (max-height: 640px) {
  .lernkarte { min-height: clamp(180px, 38vh, 300px); }
  .lk-text { font-size: clamp(18px, 5.4vw, 26px); }
  .lk-knopf { min-height: 48px; font-size: 17px; }
  .st-karte { padding: 10px; gap: 6px; }
  .st-knopf { min-height: 36px; font-size: 14px; }
  .st-neu { min-height: 44px; font-size: 15px; }
}

/* ---------- Weniger Bewegung ---------- */

/* Wer Bewegung abgeschaltet hat, bekommt KEINE Drehung: die Karte schaltet
   hart von vorn auf hinten um. Dafuer verlieren die Seiten ihre 3D-Rollen
   und werden schlicht ein- und ausgeblendet; die Auskunft bleibt dieselbe. */
@media (prefers-reduced-motion: reduce) {
  .lernkarte { transition: none; }
  .lernkarte.um { transform: none; }
  .lk-seite { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .lk-hinten { transform: none; display: none; }
  .lernkarte.um .lk-hinten { display: flex; }
  .lernkarte.um .lk-vorn { display: none; }

  .st-knopf, .st-neu, .lk-knopf, .vb-kopf, .vb-holen { transition: none; }
}

/* ---------- Die Periodensystem-Kachel ----------
   Schulbuch-Look: kraeftiger Rahmen in der Kategoriefarbe, getoente
   Flaeche, Ordnungszahl fett oben links, Masse klein oben rechts, Symbol
   riesig, Name unten (nur auf der Rueckseite gefuellt). Jede Kategorie-
   Farbe PAARWEISE hell und dunkel, wie ueberall in der Familie. */
:root {
  --pse-alkali:      #d64545;  --pse-alkali-f:      #fdeaea;
  --pse-erdalkali:   #e07b2a;  --pse-erdalkali-f:   #fdf1e4;
  --pse-uebergang:   #c9a227;  --pse-uebergang-f:   #fdf7e0;
  --pse-metall:      #6b7f8e;  --pse-metall-f:      #eef2f5;
  --pse-halbmetall:  #2a9d8f;  --pse-halbmetall-f:  #e4f5f3;
  --pse-nichtmetall: #2e8b57;  --pse-nichtmetall-f: #e7f4ec;
  --pse-halogen:     #2a6fdb;  --pse-halogen-f:     #e8effc;
  --pse-edelgas:     #7d4fbe;  --pse-edelgas-f:     #f0e9fa;
}
@media (prefers-color-scheme: dark) {
  :root {
    --pse-alkali:      #f28b8b;  --pse-alkali-f:      #3a2020;
    --pse-erdalkali:   #f2a866;  --pse-erdalkali-f:   #3a2a18;
    --pse-uebergang:   #e6c757;  --pse-uebergang-f:   #383018;
    --pse-metall:      #9fb2bf;  --pse-metall-f:      #232a30;
    --pse-halbmetall:  #5ecfc1;  --pse-halbmetall-f:  #17322f;
    --pse-nichtmetall: #6fcf97;  --pse-nichtmetall-f: #1a3324;
    --pse-halogen:     #7ea8f0;  --pse-halogen-f:     #1c2940;
    --pse-edelgas:     #b491e8;  --pse-edelgas-f:     #2a2138;
  }
}
.pse-kachel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(62%, 210px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 10px 12px;
  border-radius: 10px;
  border: 3px solid var(--linie);
  background: var(--karte);
  color: var(--text);
}
.pse-kopf { display: flex; justify-content: space-between; align-items: baseline; }
.pse-kopf b { font-size: 19px; }
.pse-kopf i { font-style: normal; font-size: 12.5px; color: var(--leise); }
.pse-symbol {
  align-self: center;
  justify-self: center;
  font-size: clamp(44px, 16vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}
.pse-name {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  min-height: 20px;
}
.pse-alkali      { border-color: var(--pse-alkali);      background: var(--pse-alkali-f); }
.pse-erdalkali   { border-color: var(--pse-erdalkali);   background: var(--pse-erdalkali-f); }
.pse-uebergang   { border-color: var(--pse-uebergang);   background: var(--pse-uebergang-f); }
.pse-metall      { border-color: var(--pse-metall);      background: var(--pse-metall-f); }
.pse-halbmetall  { border-color: var(--pse-halbmetall);  background: var(--pse-halbmetall-f); }
.pse-nichtmetall { border-color: var(--pse-nichtmetall); background: var(--pse-nichtmetall-f); }
.pse-halogen     { border-color: var(--pse-halogen);     background: var(--pse-halogen-f); }
.pse-edelgas     { border-color: var(--pse-edelgas);     background: var(--pse-edelgas-f); }
/* Der Antworttext unter der Kachel auf der Rueckseite. */
.lk-antwort {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.35;
  text-align: center;
  color: var(--leise);
}

/* ---------- Verkehrszeichen auf der Lernkarte (02.08.2026) ----------
   Das Schild ist die Frage, deshalb bekommt es den Platz. Feste Höhe statt
   fester Breite: die Zeichen sind teils rund, teils dreieckig, teils breite
   Tafeln, und nur über die Höhe wirken sie nebeneinander gleich groß. */
.lk-vz {
  display: block;
  width: auto;
  max-width: 82%;
  height: min(38vh, 260px);
  object-fit: contain;
  margin: 0 auto;
}
/* Auf der Rückseite steht der Name darunter, das Schild wird kleiner. */
.lk-hinten .lk-vz { height: min(24vh, 160px); margin-bottom: 10px; }