/*
 * cheminATe – interactive chemistry learning application.
 * Component styles are intentionally scoped to .cm-app so the WordPress
 * theme remains the single source of global layout and brand tokens.
 */

.cm-app {
  --cm-blue: var(--acc, #5b82c4);
  --cm-blue-bright: #8eb8f0;
  --cm-cyan: #67d4df;
  --cm-violet: #a7a1ef;
  --cm-surface: rgba(30, 33, 50, .76);
  --cm-surface-solid: #171a29;
  --cm-surface-raised: rgba(46, 50, 80, .72);
  --cm-line: var(--border, rgba(107, 112, 148, .2));
  --cm-text: var(--t-hi, #eceef5);
  --cm-copy: var(--t-mid, #d4d7e8);
  --cm-muted: var(--t-lo, #8b90aa);
  --cm-ok: #74d6a0;
  --cm-warn: #f0c775;
  --cm-error: #f28c91;
  color: var(--cm-copy);
  min-height: 70vh;
  isolation: isolate;
}

.cm-app *,
.cm-app *::before,
.cm-app *::after { box-sizing: border-box; }

.cm-app a { color: var(--cm-blue-bright); }

.cm-app button,
.cm-app input,
.cm-app select { font: inherit; }

.cm-app button,
.cm-app a,
.cm-app input,
.cm-app select,
.cm-app summary { -webkit-tap-highlight-color: transparent; }

.cm-app :focus-visible {
  outline: 3px solid rgba(142, 184, 240, .9);
  outline-offset: 3px;
}

.cm-shell {
  width: min(100% - (2 * var(--px, clamp(16px, 5vw, 72px))), 1200px);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 72px) 0 clamp(72px, 8vw, 118px);
}

.cm-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .48fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid rgba(107, 112, 148, .28);
  border-radius: clamp(22px, 3vw, 38px);
  background:
    radial-gradient(circle at 92% 6%, rgba(91, 130, 196, .23), transparent 38%),
    linear-gradient(145deg, rgba(30, 33, 50, .94), rgba(13, 15, 23, .9));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .045);
}

.cm-hero::after {
  content: "";
  position: absolute;
  inset: auto -12% -42% 36%;
  height: 72%;
  border: 1px solid rgba(103, 212, 223, .12);
  border-radius: 50%;
  transform: rotate(-9deg);
  pointer-events: none;
}

.cm-eyebrow,
.cm-section-label {
  margin: 0 0 12px;
  color: var(--cm-blue-bright);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.cm-wordmark {
  margin: 0;
  color: var(--cm-text);
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(48px, 8vw, 92px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .95;
}

.cm-wordmark-at { color: var(--cm-blue-bright); }

.cm-subtitle {
  margin: 14px 0 0;
  color: var(--cm-text);
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.cm-intro {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--cm-copy);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.7;
}

.cm-principle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
  padding: 10px 14px;
  border: 1px solid rgba(142, 184, 240, .27);
  border-radius: 999px;
  background: rgba(91, 130, 196, .1);
  color: var(--cm-blue-bright);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1.5;
  text-transform: uppercase;
}

.cm-enrol {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin: 24px 0 0;
}

.cm-enrol .cm-button { text-decoration: none; }

.cm-enrol-note {
  margin: 0;
  color: var(--cm-copy);
  font-size: .95rem;
}

.cm-enrol-note a { color: #8eb8f0; }

/* Pilotphase gut sichtbar ueber dem Einschreibeknopf (Layout, 27.09.2026). */
.cm-pilot {
  max-width: 100%;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid rgba(123, 211, 164, .45);
  border-radius: 999px;
  background: rgba(46, 125, 88, .18);
  color: #bfeed3;
  font-size: .9rem;
  font-weight: 600;
}

.cm-dedication {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--cm-line);
  max-width: 38rem;
  color: var(--cm-muted);
  font-size: .95rem;
  font-style: italic;
  letter-spacing: .01em;
}

.cm-dedication-cross {
  font-style: normal;
  font-size: .7em;
  margin-left: 1px;
}

.cm-principle::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--cm-cyan);
  box-shadow: 0 0 18px rgba(103, 212, 223, .75);
}

.cm-featured { margin: clamp(48px, 7vw, 82px) 0; }
.cm-featured .cm-library-title { margin-bottom: 22px; }
.cm-featured-cards .cm-card { border-color: rgba(142, 184, 240, .3); }

.cm-orbit {
  position: relative;
  width: min(34vw, 300px);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 130, 196, .2), transparent 62%);
}

.cm-orbit span,
.cm-orbit::before,
.cm-orbit::after {
  position: absolute;
  inset: 18%;
  content: "";
  border: 1px solid rgba(142, 184, 240, .45);
  border-radius: 50%;
  transform: rotate(20deg) scaleY(.36);
}

.cm-orbit::before { transform: rotate(80deg) scaleY(.36); }
.cm-orbit::after { transform: rotate(140deg) scaleY(.36); }

.cm-orbit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(103, 212, 223, .54);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #c7f7fb, var(--cm-cyan) 20%, #315f95 56%, #101420 70%);
  box-shadow: 0 0 44px rgba(103, 212, 223, .42);
}

.cm-library { margin-top: clamp(48px, 7vw, 86px); }

.cm-library-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.cm-library-title,
.cm-module-title {
  margin: 0;
  color: var(--cm-text);
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.08;
}

.cm-library-copy { max-width: 610px; margin: 10px 0 0; color: var(--cm-muted); }

.cm-count { color: var(--cm-muted); font-size: 14px; white-space: nowrap; }

.cm-tools {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(210px, .42fr);
  gap: 12px;
  margin-bottom: 22px;
}

.cm-field { position: relative; }

.cm-field label,
.cm-control label {
  display: block;
  margin: 0 0 7px;
  color: var(--cm-copy);
  font-size: 13px;
  font-weight: 650;
}

.cm-search,
.cm-filter,
.cm-control-input,
.cm-control-number,
.cm-control-select,
.cm-exercise-input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(107, 112, 148, .35);
  border-radius: 12px;
  background: rgba(7, 9, 15, .68);
  color: var(--cm-text);
  padding: 11px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.cm-search { padding-left: 45px; }

.cm-search-icon {
  position: absolute;
  left: 15px;
  bottom: 14px;
  width: 20px;
  height: 20px;
  color: var(--cm-muted);
  pointer-events: none;
}

.cm-search:focus,
.cm-filter:focus,
.cm-control-input:focus,
.cm-control-number:focus,
.cm-control-select:focus,
.cm-exercise-input:focus {
  border-color: rgba(142, 184, 240, .8);
  box-shadow: 0 0 0 4px rgba(91, 130, 196, .14);
  outline: 0;
}

.cm-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.cm-card {
  position: relative;
  display: flex;
  min-height: 290px;
  flex-direction: column;
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--cm-line);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(46, 50, 80, .52), rgba(13, 15, 23, .76));
  box-shadow: 0 14px 36px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}

.cm-card:hover {
  border-color: rgba(142, 184, 240, .46);
  background: linear-gradient(150deg, rgba(46, 50, 80, .72), rgba(13, 15, 23, .82));
  transform: translateY(-3px);
}

.cm-card::after {
  content: "";
  position: absolute;
  right: -48px;
  bottom: -65px;
  width: 145px;
  height: 145px;
  border: 1px solid rgba(103, 212, 223, .12);
  border-radius: 50%;
}

.cm-card-category,
.cm-badge {
  align-self: flex-start;
  margin: 0 0 18px;
  color: var(--cm-blue-bright);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.cm-card-title { margin: 0; color: var(--cm-text); font-size: 20px; font-weight: 700; line-height: 1.3; }

/* Karten der Bibliothek: dieselben Regeln wie die grosse Formeltafel --
   kein Seitwaertslauf, Zeilen mit Luft, Schrift passt sich ein. */
.cm-card-formula {
  min-height: 42px;
  margin: 13px 0;
  overflow-x: hidden;
  max-width: 100%;
  color: var(--cm-cyan);
  font-family: 'STIX Two Math', 'Cambria Math', serif;
  font-size: 21px;
  line-height: 1.6;
}
.cm-card-formula .cm-formula-lines { gap: .8em; }
.cm-card-formula math { display: block; width: 100%; max-width: 100%; }
.cm-card-formula mtext { white-space: pre; }

.cm-card-question { margin: 0 0 22px; color: var(--cm-muted); font-size: 14px; line-height: 1.55; }

.cm-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }

.cm-card-link,
.cm-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(142, 184, 240, .46);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(74, 111, 174, .96), rgba(38, 64, 106, .97));
  color: #fff !important;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(46, 74, 122, .34), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.cm-card-link:hover,
.cm-button:hover { background: linear-gradient(180deg, rgba(64, 99, 159, .98), rgba(32, 55, 94, .98)); transform: translateY(-2px); box-shadow: 0 9px 24px rgba(46, 74, 122, .46); }

.cm-button-secondary {
  border-color: rgba(107, 112, 148, .38);
  background: rgba(30, 33, 50, .76);
  color: var(--cm-copy) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.cm-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cm-muted);
  font-size: 11px;
}

.cm-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cm-ok); }
.cm-status-prepared::before { background: var(--cm-warn); }

.cm-empty {
  grid-column: 1 / -1;
  padding: 42px 24px;
  border: 1px dashed rgba(107, 112, 148, .38);
  border-radius: 16px;
  color: var(--cm-muted);
  text-align: center;
}

/* Module view */
.cm-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 28px; color: var(--cm-muted); font-size: 13px; }
.cm-breadcrumbs a { color: var(--cm-muted); text-decoration: none; }
.cm-breadcrumbs a:hover { color: var(--cm-text); }
.cm-breadcrumbs span[aria-hidden="true"] { color: rgba(139, 144, 170, .55); }

.cm-module-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin-bottom: clamp(34px, 5vw, 62px);
}

.cm-module-question {
  max-width: 840px;
  margin: 18px 0 0;
  color: var(--cm-copy);
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.52;
}

.cm-mode-switch {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--cm-line);
  border-radius: 12px;
  background: rgba(13, 15, 23, .72);
}

.cm-mode-switch button {
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--cm-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.cm-mode-switch button[aria-pressed="true"] { background: var(--cm-surface-raised); color: var(--cm-text); box-shadow: 0 2px 9px rgba(0, 0, 0, .25); }

.cm-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 340px); gap: clamp(22px, 3vw, 38px); align-items: start; }
.cm-main { min-width: 0; }
.cm-aside { position: sticky; top: calc(var(--nav-h, 72px) + 24px); display: grid; gap: 14px; }

.cm-section,
.cm-aside-card {
  margin-bottom: 18px;
  padding: clamp(22px, 3.2vw, 34px);
  border: 1px solid var(--cm-line);
  border-radius: 18px;
  background: var(--cm-surface);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.cm-aside-card { margin: 0; padding: 20px; }

.cm-section h2,
.cm-aside-card h2 {
  margin: 0 0 16px;
  color: var(--cm-text);
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(24px, 2.7vw, 34px);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.2;
}

.cm-aside-card h2 { font-family: var(--font, sans-serif); font-size: 15px; font-weight: 700; }
.cm-section h3 { margin: 24px 0 10px; color: var(--cm-text); font-size: 17px; font-weight: 700; }
.cm-section p + p { margin-top: 12px; }

/* Die Formel passt sich der Breite an, statt seitwaerts wegzulaufen
   (Andreas 16.09.2026). Frueher stand hier eine feste Groesse mit
   `overflow-x: auto` -- auf dem Telefon musste man die Formel schieben, um
   ihr Ende zu sehen. Jetzt richtet sich die Schriftgroesse nach der Breite
   des Fensters (`vw`), und ein zu langer Ausdruck bricht in der Anzeige um,
   statt ueber den Rand zu laufen. */
.cm-formula-panel {
  display: flex;
  min-height: 130px;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  overflow-x: hidden;
  max-width: 100%;
  padding: 24px 16px;
  border: 1px solid rgba(103, 212, 223, .18);
  border-radius: 15px;
  background: radial-gradient(circle at 50% 40%, rgba(103, 212, 223, .08), rgba(7, 9, 15, .62) 65%);
  color: var(--cm-text);
  font-family: 'STIX Two Math', 'Cambria Math', serif;
  font-size: clamp(19px, 4.2vw, 44px);
  line-height: 1.5;
}

.cm-formula-panel math {
  font-size: 1em;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Mehrzeilige Formeln brauchen Luft zwischen den Zeilen (Andreas 16.09.2026:
   „nicht so dicht aufeinander gedraengt"). Jede Zeile ist ein eigener
   <math>-Block (app.js, zeilenTrennen); der Abstand ist gewoehnliches CSS
   und damit in jedem Browser gleich -- ein Bruch in der oberen Zeile stoesst
   nicht mehr an die untere. */
/* EINE Ausrichtung fuer alle Formeln (Andreas 16.09.2026: „mal zentriert,
   mal linksbuendig mit unterschiedlichem Einzug"): Jede Formel -- ob eine
   Zeile oder mehrere, ob in der Karte oder auf der grossen Tafel -- beginnt
   an derselben linken Kante wie der Text darueber. MathML zentriert
   Blockformeln von sich aus; das wird hier abgestellt. */
.cm-formula-lines { display: flex; flex-direction: column; align-items: stretch; gap: .95em; width: 100%; max-width: 100%; }
.cm-formula-lines math { display: block; width: 100%; max-width: 100%; text-align: left; }
.cm-formula-panel math, .cm-card-formula math { text-align: left; }
.cm-formula-panel mtable { display: inline-table; border-spacing: 0 .6em; }
.cm-formula-panel mtd { padding: .3em 0; }
.cm-formula-panel mfrac { margin: 0 .12em; }
.cm-formula-panel mtext { white-space: pre; }

@media (max-width: 560px) {
  .cm-formula-panel { min-height: 104px; padding: 18px 12px; font-size: clamp(17px, 5.4vw, 30px); }
  .cm-formula-lines { gap: 1.05em; }
}
.cm-formula-alt { margin-top: 9px; color: var(--cm-muted); font-size: 12px; text-align: center; }

.cm-variable-list { display: grid; gap: 10px; margin: 0; }
.cm-variable {
  display: grid;
  grid-template-columns: minmax(80px, .28fr) minmax(0, 1fr);
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid var(--cm-line);
}
.cm-variable:first-child { border-top: 0; }
.cm-variable dt { color: var(--cm-cyan); font-family: 'STIX Two Math', 'Cambria Math', serif; font-size: 22px; font-weight: 600; }
.cm-variable dd { margin: 0; }
.cm-variable-name { display: block; color: var(--cm-text); font-size: 14px; font-weight: 700; }
.cm-variable-copy { display: block; margin-top: 3px; color: var(--cm-muted); font-size: 13px; line-height: 1.52; }
.cm-origin { display: block; margin-top: 7px; color: var(--cm-blue-bright); font-size: 12px; }

/* Umklappen (Andreas 16.09.2026, nachgebessert am selben Tag): Die Frage
   steht in einer eigenen Zeile, darunter ein kleines Blatt. Vorn ein kleiner
   Knopf „Antwort anzeigen"; jeder Tipp dreht das Blatt um 180 Grad um die
   WAAGERECHTE Achse (wie ein Blatt, das man nach oben umschlaegt), hinten
   steht die Antwort, der naechste Tipp dreht es zurueck. Kein eigener Knopf
   zum Zurueckdrehen. Wer Bewegung abgestellt hat, bekommt den Wechsel ohne
   Drehung. */
.cm-flip { display: block; margin-top: 8px; }
.cm-flip-frage { display: block; margin-bottom: 5px; color: var(--cm-blue-bright); font-size: 12px; }
.cm-flip-buehne { perspective: 900px; max-width: 46ch; }
.cm-flip-karte {
  position: relative;
  display: grid;
  transform-style: preserve-3d;
  transition: transform .58s cubic-bezier(.4, .1, .2, 1);
  cursor: pointer;
}
.cm-flip-vorn, .cm-flip-hinten {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 9px;
}
.cm-flip-vorn {
  justify-self: start;
  align-self: start;
  min-height: 30px;
  padding: 5px 11px;
  border: 1px dashed rgba(142, 184, 240, .55);
  background: rgba(142, 184, 240, .07);
  color: var(--cm-blue-bright);
  font: 600 12px/1.3 inherit;
  text-align: left;
  cursor: pointer;
}
.cm-flip-vorn:hover { background: rgba(142, 184, 240, .14); }
.cm-flip-vorn:focus-visible { outline: 2px solid var(--cm-cyan); outline-offset: 2px; }
.cm-flip-hinten {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 30px;
  padding: 8px 12px;
  border: 1px solid rgba(103, 212, 223, .35);
  background: rgba(103, 212, 223, .09);
  color: var(--cm-copy);
  font-size: 13px;
  line-height: 1.5;
  transform: rotateX(180deg);
}
.cm-flip-hinten:focus-visible { outline: 2px solid var(--cm-cyan); outline-offset: 2px; }
.cm-flip.ist-umgedreht .cm-flip-karte { transform: rotateX(180deg); }
.cm-flip:not(.ist-umgedreht) .cm-flip-hinten { pointer-events: none; }
.cm-flip.ist-umgedreht .cm-flip-vorn { pointer-events: none; }
/* Dozentenmodus: alle Blaetter liegen offen. */
.cm-mode-dozent .cm-flip .cm-flip-karte { transform: rotateX(180deg); }
.cm-mode-dozent .cm-flip .cm-flip-vorn { pointer-events: none; }
.cm-mode-dozent .cm-flip .cm-flip-hinten { pointer-events: auto; }

.cm-list { margin: 0; padding: 0 0 0 20px; }
.cm-list li + li { margin-top: 8px; }
.cm-list li::marker { color: var(--cm-blue-bright); }

.cm-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cm-control {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--cm-line);
  border-radius: 13px;
  background: rgba(7, 9, 15, .45);
}
.cm-control-row { display: flex; align-items: center; gap: 10px; }
.cm-control input[type="range"] { width: 100%; min-height: 36px; accent-color: var(--cm-blue-bright); cursor: pointer; }
.cm-control input[type="number"],
.cm-control select { min-width: 0; flex: 1 1 auto; }
.cm-control-output { min-width: 66px; color: var(--cm-text); font-variant-numeric: tabular-nums; text-align: right; }
.cm-control-meta { margin-top: 6px; color: var(--cm-muted); font-size: 11px; line-height: 1.4; }

.cm-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid rgba(142, 184, 240, .26);
  border-radius: 14px;
  background: rgba(91, 130, 196, .09);
}
.cm-result-label { display: block; color: var(--cm-muted); font-size: 12px; }
.cm-result-value { display: block; color: var(--cm-text); font-family: 'STIX Two Math', 'Cambria Math', serif; font-size: clamp(22px, 3vw, 32px); font-variant-numeric: tabular-nums; }
.cm-result-note { max-width: 500px; color: var(--cm-copy); font-size: 13px; line-height: 1.5; }

.cm-warning,
.cm-error,
.cm-success {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(240, 199, 117, .32);
  border-radius: 11px;
  background: rgba(240, 199, 117, .08);
  color: #f5d89f;
  font-size: 13px;
  line-height: 1.55;
}
.cm-error { border-color: rgba(242, 140, 145, .32); background: rgba(242, 140, 145, .08); color: #ffc1c4; }
.cm-success { border-color: rgba(116, 214, 160, .32); background: rgba(116, 214, 160, .08); color: #a9edc4; }

.cm-graph-wrap { margin-top: 18px; }
.cm-graph {
  display: block;
  width: 100%;
  height: auto;
  min-height: 260px;
  overflow: visible;
  border: 1px solid var(--cm-line);
  border-radius: 14px;
  background: rgba(7, 9, 15, .62);
}
.cm-graph-grid { stroke: rgba(139, 144, 170, .14); stroke-width: 1; }
.cm-graph-axis { stroke: rgba(212, 215, 232, .55); stroke-width: 1.1; }
.cm-graph-line { fill: none; stroke: var(--cm-cyan); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cm-graph-line-alt { fill: none; stroke: var(--cm-violet); stroke-width: 2.5; stroke-dasharray: 7 5; }
.cm-graph-point { fill: #fff; stroke: var(--cm-blue); stroke-width: 4; }
.cm-graph text { fill: var(--cm-muted); font-family: var(--font, sans-serif); font-size: 11px; }
.cm-graph .cm-graph-label { fill: var(--cm-copy); font-weight: 650; }
.cm-graph-description { margin: 10px 0 0; color: var(--cm-muted); font-size: 12px; line-height: 1.5; }

.cm-effects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cm-effect { padding: 14px; border-left: 2px solid var(--cm-blue); background: rgba(91, 130, 196, .07); color: var(--cm-copy); font-size: 13px; line-height: 1.55; }
.cm-section .cm-effect h3 { margin: 0 0 8px; font-size: 14px; }
.cm-effect-outcome { color: var(--cm-copy); }
.cm-effect-reason { color: var(--cm-muted); font-size: 12px; }

.cm-step {
  border-top: 1px solid var(--cm-line);
}
.cm-step:first-of-type { border-top: 0; }
.cm-step summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  color: var(--cm-copy);
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
  list-style: none;
}
.cm-step summary::-webkit-details-marker { display: none; }
.cm-step summary::before {
  content: "+";
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  border: 1px solid rgba(142, 184, 240, .34);
  border-radius: 7px;
  color: var(--cm-blue-bright);
}
.cm-step[open] summary::before { content: "−"; }
.cm-step-body { padding: 0 0 17px 40px; color: var(--cm-muted); font-size: 14px; line-height: 1.65; }

.cm-example-brief {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 14px;
}
.cm-example-brief-item { padding: 14px; border: 1px solid var(--cm-line); border-radius: 12px; background: rgba(7, 9, 15, .34); }
.cm-section .cm-example-brief-item h4 { margin: 0 0 9px; color: var(--cm-text); font-size: 13px; }
.cm-example-brief-item .cm-list { color: var(--cm-muted); font-size: 13px; }
.cm-example-result { margin-top: 16px; padding: 14px; border-left: 3px solid var(--cm-cyan); background: rgba(103, 212, 223, .07); color: var(--cm-text); font-weight: 700; }
.cm-case-study + .cm-case-study { margin-top: 28px; }
.cm-case-separator { margin: 28px 0; border: 0; border-top: 1px solid var(--cm-line); }

.cm-exercise { padding: 20px; border: 1px solid rgba(103, 212, 223, .22); border-radius: 14px; background: rgba(103, 212, 223, .055); }
.cm-exercise-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 16px; }
.cm-exercise-actions .cm-field { flex: 1 1 220px; }
.cm-exercise-feedback[hidden] { display: none; }

.cm-mnemonic { position: relative; overflow: hidden; border-color: rgba(103, 212, 223, .22); }
.cm-mnemonic::before { content: "MERKSATZ"; display: block; margin-bottom: 10px; color: var(--cm-cyan); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.cm-mnemonic p { color: var(--cm-text); font-size: clamp(17px, 2vw, 21px); line-height: 1.55; }

.cm-share { display: grid; gap: 9px; }
.cm-share .cm-button { width: 100%; }
.cm-share-status { min-height: 20px; color: var(--cm-muted); font-size: 11px; text-align: center; }

.cm-toc { margin: 0; padding: 0; list-style: none; }
.cm-toc li + li { border-top: 1px solid var(--cm-line); }
.cm-toc a { display: block; padding: 9px 0; color: var(--cm-muted); font-size: 12px; text-decoration: none; }
.cm-toc a:hover { color: var(--cm-text); }

.cm-lecturer[hidden] { display: none; }
.cm-lecturer { border-color: rgba(167, 161, 239, .3); background: linear-gradient(145deg, rgba(46, 50, 80, .76), rgba(37, 32, 64, .46)); }
.cm-lecturer .cm-section-label { color: #c4c0ff; }
.cm-qa { border-top: 1px solid var(--cm-line); padding: 13px 0; }
.cm-qa:first-of-type { border-top: 0; }
.cm-qa dt { color: var(--cm-text); font-weight: 700; }
.cm-qa dd { margin: 6px 0 0; color: var(--cm-muted); }

.cm-prepared-notice { margin-bottom: 18px; }
.cm-not-found { max-width: 720px; margin: 0 auto; padding: 70px 0; text-align: center; }
.cm-not-found p { margin: 16px auto 26px; color: var(--cm-muted); }

.cm-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
}

/* ── Bibliothek als Liste (Entscheidung Andreas 27.09.2026) ─────────────
   Themenbereich | Titel und Frage | Formel | Zustand, eine Haarlinie je
   Zeile, Flaeche erst beim Ueberfahren. Die drei hervorgehobenen Module
   darueber bleiben Kacheln (.cm-cards). */
.cm-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cm-line); }
.cm-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr) minmax(0, 17rem) 6.5rem;
  gap: 6px 28px;
  align-items: center;
  margin: 0;
  padding: 16px 8px;
  border-bottom: 1px solid var(--cm-line);
  transition: background .2s ease;
}
.cm-row:hover, .cm-row:focus-within { background: rgba(91, 130, 196, .08); }
.cm-row-category {
  margin: 0;
  color: var(--cm-blue-bright);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.4;
  text-transform: uppercase;
}
.cm-row-title { margin: 0 0 4px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.cm-row-link { color: var(--cm-text) !important; text-decoration: none !important; }
.cm-row-link::after { content: ""; position: absolute; inset: 0; }
.cm-row-link:focus-visible { outline: 2px solid var(--cm-blue-bright); outline-offset: 3px; }
.cm-row-question { margin: 0; max-width: 62ch; color: var(--cm-muted); font-size: 14px; line-height: 1.5; }
.cm-row-formula {
  overflow: hidden;
  max-width: 100%;
  color: var(--cm-cyan);
  font-family: 'STIX Two Math', 'Cambria Math', serif;
  font-size: 16px;
  line-height: 1.5;
}
.cm-row-formula math { display: block; max-width: 100%; text-align: left; }
.cm-row .cm-status { justify-self: end; }
.cm-list .cm-empty { padding: 18px 8px; list-style: none; }

@media (max-width: 860px) {
  .cm-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cm-row-category { grid-column: 1 / -1; }
  .cm-row-main { grid-column: 1; }
  .cm-row .cm-status { grid-column: 2; grid-row: 2; align-self: start; }
  .cm-row-formula { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .cm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-layout { grid-template-columns: minmax(0, 1fr); }
  .cm-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .cm-hero { grid-template-columns: minmax(0, 1fr); }
  .cm-orbit { position: absolute; right: -60px; top: -55px; width: 210px; opacity: .42; }
  .cm-tools { grid-template-columns: minmax(0, 1fr); }
  .cm-library-head { align-items: start; flex-direction: column; gap: 7px; }
  .cm-module-header { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cm-mode-switch { width: 100%; }
  .cm-mode-switch button { flex: 1; }
  .cm-effects { grid-template-columns: minmax(0, 1fr); }
  .cm-aside { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .cm-shell { width: min(100% - 32px, 1200px); padding-top: 24px; }
  .cm-hero { padding: 26px 20px 30px; border-radius: 20px; }
  .cm-principle { align-items: flex-start; border-radius: 13px; }
  .cm-cards { grid-template-columns: minmax(0, 1fr); }
  .cm-card { min-height: 260px; padding: 20px; }
  .cm-section { padding: 20px 17px; border-radius: 15px; }
  .cm-controls { grid-template-columns: minmax(0, 1fr); }
  .cm-variable { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .cm-result { grid-template-columns: minmax(0, 1fr); }
  .cm-result-note { text-align: left; }
  .cm-graph { min-height: 230px; }
  .cm-example-brief { grid-template-columns: minmax(0, 1fr); }
  .cm-card-footer { align-items: flex-start; flex-direction: column; }
  .cm-card-link { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-app *, .cm-app *::before, .cm-app *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .cm-card:hover, .cm-button:hover, .cm-card-link:hover { transform: none; }
}

@media print {
  .cm-tools, .cm-mode-switch, .cm-share, .cm-card-link, .cm-button { display: none !important; }
  .cm-shell { width: 100%; padding: 0; }
  .cm-section, .cm-aside-card, .cm-hero { break-inside: avoid; border-color: #bbb; background: #fff; box-shadow: none; color: #111; }
  .cm-app, .cm-section h2, .cm-aside-card h2, .cm-module-title, .cm-wordmark, .cm-subtitle { color: #111; }
}

/* ======================================================================
   Vorrechnen auf Papier (Andreas 16.09.2026)
   Ein liniertes Blatt mit Rand; jede Zeile wird von links nach rechts
   „geschrieben" (clip-path), dahinter zieht ein Stift mit; danach
   erscheint die Notiz mit Begruendung und Wertherkunft. Formeln bleiben in
   der Formelschrift -- lesbar geht vor Handschrift-Optik.
   ====================================================================== */
/* `hidden` muss gegen die eigene display-Regel der Knoepfe gewinnen -- sonst
   stehen „Vorrechnen starten" und „Anhalten" nebeneinander, obwohl einer
   von beiden versteckt sein soll. */
.cm-app [hidden] { display: none !important; }

.cm-papier { margin: 6px 0 14px; }
.cm-papier-blatt {
  position: relative;
  padding: 22px 20px 26px 58px;
  border-radius: 6px;
  color: #17224a;
  background:
    linear-gradient(90deg, transparent 44px, rgba(214, 90, 90, .55) 44px, rgba(214, 90, 90, .55) 45.5px, transparent 45.5px),
    repeating-linear-gradient(180deg, transparent 0, transparent 31px, rgba(96, 130, 190, .16) 31px, rgba(96, 130, 190, .16) 32px),
    #fbf8ef;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .06);
  font-family: 'STIX Two Text', 'Cambria', Georgia, serif;
  line-height: 32px;
  overflow: hidden;
}
.cm-papier-kopf { margin: 0 0 12px; font-size: 17px; font-weight: 600; color: #1f2a5c; letter-spacing: .01em; }
.cm-papier-zeilen { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.cm-papier-zeile { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 6px; align-items: start; transform: rotate(var(--neigung, 0deg)); transform-origin: left center; }
.cm-papier-nummer { color: #a63a3a; font-weight: 700; font-size: 15px; line-height: 32px; }
.cm-papier-inhalt { min-width: 0; }
.cm-papier-titel { font-size: 14px; color: #3b4a7e; line-height: 32px; }
.cm-papier-formel { position: relative; color: #17224a; font-family: 'STIX Two Math', 'Cambria Math', serif; font-size: clamp(19px, 3.6vw, 30px); line-height: 1.55; overflow: hidden; }
.cm-papier-formel math { text-align: left; display: block; width: 100%; }
.cm-papier-formel .cm-formula-lines { gap: .5em; }
.cm-papier-notiz {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-left: 3px solid #d6a13a;
  background: rgba(214, 161, 58, .12);
  color: #2b355f;
  font-size: 13.5px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease .1s, transform .5s ease .1s;
}
.cm-papier-warum { margin: 0 0 4px; }
.cm-papier-herkunft { margin: 0; padding-left: 18px; }
.cm-papier-herkunft li { margin: 2px 0; }

/* Schreiben: die Zeile wird von links freigelegt, ein Stift zieht mit. */
.cm-papier-zeile .cm-papier-inhalt { clip-path: inset(0 100% 0 0); }
.cm-papier-zeile.ist-am-schreiben .cm-papier-inhalt { animation: cm-schreiben 1.3s cubic-bezier(.3, .1, .3, 1) forwards; }
.cm-papier-zeile.ist-am-schreiben::after {
  content: '✎';
  position: absolute;
  top: 2px;
  left: 34px;
  color: #17224a;
  font-size: 22px;
  animation: cm-stift 1.3s cubic-bezier(.3, .1, .3, 1) forwards;
}
.cm-papier-zeile.ist-geschrieben::after { display: none; }
.cm-papier-zeile.ist-geschrieben .cm-papier-inhalt { clip-path: none; animation: none; }
.cm-papier-zeile.ist-geschrieben .cm-papier-notiz { opacity: 1; transform: none; }
@keyframes cm-schreiben { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cm-stift { from { left: 34px; opacity: 1; } 90% { opacity: 1; } to { left: calc(100% - 26px); opacity: 0; } }
.cm-papier-steuerung { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.cm-papier-stand { color: var(--cm-muted); font-size: 13px; }
@media (max-width: 560px) {
  .cm-papier-blatt { padding: 18px 14px 22px 48px; }
  .cm-papier-zeile { grid-template-columns: 22px 1fr; }
}

/* ======================================================================
   Formel zusammensetzen (Andreas 16.09.2026)
   ====================================================================== */
.cm-bau { display: grid; gap: 16px; padding: 20px; border: 1px solid rgba(103, 212, 223, .22); border-radius: 14px; background: rgba(103, 212, 223, .055); }
.cm-bau-formel {
  display: flex;
  align-items: center;
  min-height: 110px;
  padding: 18px 14px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 40%, rgba(103, 212, 223, .08), rgba(7, 9, 15, .62) 65%);
  color: var(--cm-text);
  font-family: 'STIX Two Math', 'Cambria Math', serif;
  font-size: clamp(22px, 4.4vw, 40px);
  overflow-x: hidden;
}
.cm-bau-formel math { text-align: left; display: block; width: 100%; }
/* Die Kaestchen: ein gestricheltes Feld in Zeichenhoehe, ein Fragezeichen
   darin. Belegt wird der Rahmen fest, richtig gruen, falsch rot; ueber dem
   Ziel beim Ziehen leuchtet es auf. */
.cm-bau-feld {
  display: inline-block;
  min-width: 1.15em;
  margin: 0 .06em;
  padding: .02em .16em;
  border: 2px dashed rgba(103, 212, 223, .65);
  border-radius: .22em;
  background: rgba(103, 212, 223, .06);
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.cm-bau-feld:hover { background: rgba(103, 212, 223, .14); }
.cm-bau-feld.ist-ziel { background: rgba(103, 212, 223, .22); border-color: var(--cm-cyan); box-shadow: 0 0 0 .14em rgba(103, 212, 223, .35); }
.cm-bau-feld:focus-visible { outline: 2px solid var(--cm-cyan); outline-offset: 2px; }
.cm-bau-leer { color: rgba(103, 212, 223, .75); font-style: normal; }
.cm-bau-feld.ist-belegt { border-style: solid; background: rgba(103, 212, 223, .1); }
.cm-bau-feld.ist-richtig { border-bottom-color: var(--cm-ok); background: rgba(116, 214, 160, .16); }
.cm-bau-feld.ist-falsch { border-bottom-color: var(--cm-error); background: rgba(242, 140, 145, .16); }
.cm-bau-ablage { display: flex; flex-wrap: wrap; gap: 10px; min-height: 52px; }
.cm-bau-stein {
  min-width: 52px;
  min-height: 48px;
  padding: 6px 14px;
  border: 1px solid rgba(103, 212, 223, .45);
  border-radius: 10px;
  background: rgba(30, 33, 50, .9);
  color: var(--cm-cyan);
  font-family: 'STIX Two Math', 'Cambria Math', serif;
  font-size: 22px;
  cursor: grab;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.cm-bau-stein math { color: inherit; }
.cm-bau-stein:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.cm-bau-stein.ist-gewaehlt { border-color: var(--cm-cyan); box-shadow: 0 0 0 3px rgba(103, 212, 223, .35); }
.cm-bau-stein.ist-verbraucht { opacity: .28; cursor: default; transform: none; box-shadow: none; }
.cm-bau-stein:focus-visible { outline: 2px solid var(--cm-cyan); outline-offset: 2px; }
/* Waehrend des Ziehens: der Finger darf die Seite nicht scrollen, der
   Baustein selbst wird blass, ein Schatten schwebt unter dem Zeiger. */
.cm-bau-stein { touch-action: none; user-select: none; -webkit-user-select: none; }
.cm-bau-stein.ist-in-bewegung { opacity: .35; }
.cm-bau-schwebend {
  position: fixed;
  z-index: 100000;
  pointer-events: none;
  margin: 0;
  transform: scale(1.12) rotate(-2deg);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55);
  border-color: var(--cm-cyan);
  opacity: .96;
}
/* Zweite Zeile nach einem Umbruch am Gleichheitszeichen rueckt ein. */
.cm-formula-fortsetzung { padding-left: 1.6em; }
/* Verdeckte Antwort in „Was passiert, wenn …?": das Blatt fuellt die Karte. */
.cm-effect .cm-flip-buehne { max-width: none; }
.cm-effect .cm-flip-frage { color: var(--cm-muted); }
.cm-effect-antwort { display: flex; flex-direction: column; gap: 6px; }
.cm-effect-antwort p { margin: 0; }
.cm-bau-zeile { display: flex; flex-wrap: wrap; gap: 10px; }