/* Lernoberfläche. Erscheinungsbild nach bannas.com wie Verwaltung und App: Blau als Hauptfarbe, Rot für den
   wichtigsten Knopf, dunkelgrauer Text, hellgraue Flächen mit sichtbarem Rand, Knöpfe als Pille. */

/* Hausschrift von bannas.com (SIL Open Font License, siehe fonts/OFL.txt). */
@font-face {
  font-family: "Fira Sans Condensed";
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/FiraSansCondensed-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Fira Sans Condensed";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/FiraSansCondensed-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Fira Sans Condensed";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/FiraSansCondensed-Bold.ttf") format("truetype");
}

:root {
  --blue: #1084b0;
  --blue-dark: #0c6a8e;
  --red: #c61b36;
  --red-dark: #a3162c;
  --text: #353535;
  --muted: #666;
  --surface: #f4f4f4;
  --line: #adadad;
  --control-line: #808080;
  --right: #1d6b2f;
  --right-surface: #e3f1e6;
  --wrong-surface: #f9e1e5;
  --header: 2.6rem;
}

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

html { font-size: 106.25%; }

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: "Fira Sans Condensed", Helvetica, sans-serif;
  line-height: 1.45;
}

h1, h2 {
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.45rem; margin-top: 2rem; }
p { margin: 0 0 0.75rem; }
a { color: var(--blue); }
a:hover { color: var(--blue-dark); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.muted { color: var(--muted); }
.small, small { font-size: 0.88rem; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Kopfzeile: Logo, Titel in Großbuchstaben wie die Navigation der Website, darunter eine blaue Linie. */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header);
  padding: 0.2rem 1.25rem;
  border-bottom: 2px solid var(--blue);
}

/* Flach gehalten, damit den Karten mehr Höhe bleibt. */
.top .button.small { min-height: 1.85rem; padding: 0.1rem 0.85rem; font-size: 0.85rem; }
.brand img { width: auto; height: 30px; }

.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.brand:hover { color: var(--blue); }

.account {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
}

.account .button { gap: 0.4rem; }

/* Auf schmalen Bildschirmen bleibt vom Notizen-Knopf das Zeichen, der Name entfällt. */
@media (max-width: 760px) {
  .account-label, .account-name { display: none; }
}

main {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 6rem; /* unten Luft für das Chat-Symbol */
}

main.narrow { max-width: 24rem; padding-top: 3rem; }
main.medium { max-width: 46rem; }
main.study { max-width: none; padding: 0; }

/* Knöpfe */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.4rem;
  border: 1px solid var(--blue);
  border-radius: 30px;
  background: #fff;
  color: var(--blue);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button:hover { background: var(--blue); color: #fff; }
.button.primary { background: var(--red); border-color: var(--red); color: #fff; }
.button.primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.button.small { min-height: 2.1rem; padding: 0.2rem 1rem; border-color: var(--control-line); color: var(--text); }
.button.small:hover { background: var(--surface); color: var(--text); }
.button.wide { width: 100%; }
.button.round { width: 2.75rem; padding: 0; font-size: 1.6rem; line-height: 1; }

.button.disabled,
.button.disabled:hover {
  border-color: var(--line);
  background: var(--surface);
  color: #8a8a8a;
  cursor: default;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.actions .button { flex: 1 1 14rem; }

/* Formulare */
.stack { display: grid; gap: 1rem; }
.stack label { display: grid; gap: 0.3rem; font-weight: 700; }

input, textarea {
  min-height: 2.75rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--control-line);
  border-radius: 5px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

input:focus, textarea:focus { border-color: var(--blue); }

.notice {
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
}

.notice.error { border-color: var(--red); background: var(--wrong-surface); }

/* Brotkrumen */
.crumbs { margin-bottom: 0.75rem; font-size: 0.95rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs a + a::before { content: "›"; margin: 0 0.5rem; color: var(--muted); }

/* Startseite: Lerngebiete als Kacheln */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
}

.tile {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.tile:hover { border-color: var(--blue); color: var(--text); }
.tile h2 { margin: 0 0 0.25rem; font-size: 1.5rem; }
.tile .description { flex: 1; min-height: 2.9em; }
.tile p { margin-bottom: 0.4rem; }
.tile p:last-child { margin-bottom: 0; }

.badge {
  display: inline-block;
  padding: 0.05rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: #dde9ee;
  color: #013e55;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: middle;
}

.bar {
  height: 5px;
  margin: 0.4rem 0;
  border-radius: 3px;
  background: #d0d0d0;
  overflow: hidden;
}

.bar span { display: block; height: 100%; background: var(--blue); }

/* Durchläufe */
.attempts { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.attempts li { border-bottom: 1px solid var(--line); }

.attempts a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.25rem;
  color: var(--text);
  text-decoration: none;
}

.attempts a:hover { background: var(--surface); }
.attempts small { display: block; }
.attempts strong { font-size: 1.2rem; }

/* Lesezeichen auf der Startseite: je Lerngebiet ein aufklappbarer Abschnitt, schlank wie der Notizzettel – ein
   feiner eckiger Rahmen, zugeklappt eine niedrige weiße Zeile, fett nur der aufgeklappte. */
.bookmarks { margin-bottom: 4px; border: 1px solid var(--line); background: #fff; }

.bookmarks-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  list-style: none;
  cursor: pointer;
}

.bookmarks-head::-webkit-details-marker { display: none; }
.bookmarks-head::before { content: "▸"; color: var(--blue); }
.bookmarks[open] > .bookmarks-head::before { content: "▾"; }
.bookmarks[open] > .bookmarks-head { border-bottom: 1px solid var(--line); background: #dde9ee; }
.bookmarks-head:hover { background: var(--surface); }
.bookmarks-head h3 { margin: 0; font-size: 1.05rem; font-weight: 400; }
.bookmarks[open] .bookmarks-head h3 { font-weight: 700; }
.bookmarks-head .count { color: var(--muted); font-size: 0.85rem; }
.bookmarks-head a { margin-left: auto; font-size: 0.9rem; font-weight: 700; }
.bookmarks .attempts { border-top: 0; }
.bookmarks .attempts li:last-child { border-bottom: 0; }
.bookmarks .attempts a { padding: 0.45rem 0.6rem 0.45rem 1.6rem; }

/* Kapitelübersicht */
.outline ul { margin: 0; padding: 0; list-style: none; }
.outline ul ul { padding-left: 1.1rem; }

.outline summary {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.5rem;
  font-weight: 700;
  cursor: pointer;
}

.outline summary::before { content: "▸"; color: var(--blue); }
.outline details[open] > summary::before { content: "▾"; }
.outline summary::-webkit-details-marker { display: none; }
.outline summary .count { margin-left: auto; color: var(--muted); font-weight: 400; }

.outline a {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1.6rem;
  border-left: 3px solid transparent;
  color: var(--text);
  text-decoration: none;
}

.outline a:hover { background: var(--surface); }
.outline a.current { border-left-color: var(--blue); background: #dde9ee; font-weight: 700; }

/* Lesezeichen: ein schmales blaues Fähnchen rechts an der Karte. */
.bookmark-flag {
  flex: none;
  width: 0.6rem;
  height: 0.9rem;
  margin-top: 0.2rem;
  background: var(--blue);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}
.outline-title a { padding-left: 0.5rem; color: var(--blue); font-weight: 700; }
.outline-title { margin: 0; border-bottom: 1px solid var(--line); }

/* Einzelne Karte: ab 1000 Breite stehen Kapitelübersicht (links) und Notizzettel (rechts) als Spalten neben der
   Karte und lassen sich einzeln ein- und ausblenden; darunter sind beide eigene Seiten. */
.study-layout { display: block; }
.outline.side, .notes-side { display: none; }
.card-view { padding: 0.6rem 1.25rem 6rem; min-width: 0; }
.card-view h1 { font-size: 1.6rem; }
.chapter { margin-bottom: 0.2rem; color: var(--muted); font-size: 0.95rem; }
/* Überschrift über der Folie: Kapitel und Thema in einer Zeile, kleiner als ein Seitentitel */
.card-view .card-title { flex: 1 1 18rem; margin: 0; font-size: 1.1rem; }

/* Kopf der Karte: links die Überschrift, rechts die Knöpfe; wird es eng, rutschen die Knöpfe darunter. */
.card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.5rem;
}

.card-top .button.small { min-height: 1.85rem; padding: 0.1rem 0.85rem; font-size: 0.85rem; }
.card-top .crumbs { margin-bottom: 0; }
.card-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.card-tools .bookmark-form { display: contents; }
.tool { gap: 0.4rem; }
.tool[aria-expanded="true"], .tool[aria-pressed="true"] { border-color: var(--blue); background: #dde9ee; }

/* Lesezeichen-Knopf: das Zeichen ist hohl und füllt sich blau, solange die Karte markiert ist. */
.tool[aria-pressed] path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.tool[aria-pressed="true"] path { fill: var(--blue); stroke: var(--blue); }
.wide-only { display: none; }

.tool-count {
  min-width: 1.5rem;
  margin-left: 0.4rem;
  padding: 0 0.4rem;
  border-radius: 30px;
  background: var(--blue);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5rem;
  text-align: center;
}

@media (min-width: 1000px) {
  .study-layout { display: flex; align-items: flex-start; }
  .card-view { flex: 1 1 0; }

  .outline.side {
    display: block;
    flex: 0 0 20rem;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    font-size: 0.95rem;
  }

  .outline-hidden .outline.side { display: none; }

  /* Die Breite zieht man am Griff an der linken Kante; sie steht dann in --notes-width. */
  .notes-shown .notes-side {
    display: flex;
    flex: 0 0 min(var(--notes-width, 21rem), 60vw);
    position: sticky;
    top: 0;
    height: 100vh;
    border-left: 1px solid var(--control-line);
  }

  .wide-only { display: inline-flex; }
  .narrow-only { display: none; }
}

/* Unter 1400 Breite ist neben der Karte nur für eine der beiden Spalten Platz; der Notizzettel geht dann vor. */
@media (min-width: 1000px) and (max-width: 1399.98px) {
  .notes-shown .outline.side { display: none; }
}

/* Notizzettel: aufklappbare Punkte, jeder mit Titel und Text. Bewusst knapp gesetzt: kaum Abstand, dafür je
   Punkt ein einziger feiner, eckiger Rahmen. Titel und Text füllen ihn ohne eigene Rahmen aus und sind nur
   durch Linien getrennt. Zugeklappt sind die Punkte schlanke weiße Zeilen; Farbe und Fettdruck bekommt nur
   der aufgeklappte. */
.notes-scroll { flex: 1; min-width: 0; padding: 0 0 6rem; overflow-y: auto; }

.notes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--control-line);
}

.notes-head h2 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.notes-head .button { min-height: 1.6rem; padding: 0 0.7rem; font-size: 0.85rem; }
.notes-empty { margin: 0; padding: 0.5rem; }

.note-list { display: grid; gap: 3px; padding: 4px; }
main.medium .notes > .note-list { padding: 4px 0; }

.note { border: 1px solid var(--control-line); background: #fff; }
.note[open] { border-color: var(--blue); }

.note summary {
  display: flex;
  gap: 0.4rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.note summary:hover { background: var(--surface); }
.note[open] > summary { border-bottom: 1px solid var(--blue); background: #dde9ee; font-weight: 700; }
.note summary::before { content: "▸"; color: var(--blue); }
.note[open] > summary::before { content: "▾"; }
.note summary::-webkit-details-marker { display: none; }

.note-body input, .note-body textarea {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: #fff;
}

.note-body input {
  min-height: 1.9rem;
  padding: 0.2rem 0.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  font-weight: 700;
}

/* Ohne gezogene Höhe wächst das Feld mit dem Text (wo der Browser das kann), sonst bleibt es bei vier Zeilen. */
.note-body textarea {
  min-height: 5.5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.95rem;
  line-height: 1.45;
  resize: none;
  field-sizing: content;
}

/* Die Felder haben keinen eigenen Rahmen; der Fokus zeigt sich deshalb als Linie innen am Feld. */
.note-body input:focus-visible, .note-body textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.note-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.6rem;
  padding: 0.15rem 0.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
}

.note-card { text-decoration: none; overflow-wrap: anywhere; }
.note-card:hover { text-decoration: underline; }
.note-status { margin-left: auto; }
.note-status.failed { color: var(--red-dark); }

.note-delete {
  padding: 0 0.1rem;
  border: 0;
  background: none;
  color: var(--red-dark);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Griffe zum Ziehen: unter jedem Textfeld für die Höhe, an der Kante der Spalte für die Breite. */
.grip { position: relative; flex: none; touch-action: none; }
.grip::after { content: ""; position: absolute; border-radius: 1px; background: var(--control-line); }
.grip:hover::after, .grip.dragging::after, .grip:focus-visible::after { background: var(--blue); }

/* Schmaler Balken unter dem Textfeld; die Fläche zum Anfassen reicht etwas darüber hinaus. */
.grip-height { height: 7px; border-top: 1px solid var(--line); background: var(--surface); cursor: row-resize; }
.grip-height::before { content: ""; position: absolute; inset: -6px 0 -2px; }
.grip-height::after { top: 2px; left: 50%; width: 2rem; height: 2px; margin-left: -1rem; }

/* Sitzt mittig auf der Kante der Spalte. */
.grip-width { width: 10px; margin-left: -5px; cursor: col-resize; }
.grip-width::after { top: 50%; left: 3px; width: 3px; height: 2.5rem; margin-top: -1.25rem; }

/* Schaubild: passt als Ganzes ins Fenster; ein Klick zeigt es in voller Breite zum Verschieben. Der Rahmen liegt
   eng um die Folie, ohne grauen Kasten daneben. Die Höhe setzt karten.js in --slide-height, so dass Folie und
   Fußzeile genau ins Fenster passen; die Vorgabe gilt, bis das Skript gelaufen ist. */
.slide-frame {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.slide {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  cursor: zoom-in;
  overflow: auto;
}

.slide img {
  display: block;
  max-width: 100%;
  max-height: var(--slide-height, calc(100vh - 11rem));
  min-height: 12rem;
  object-fit: contain;
}

.slide-frame:has(.zoomed) { width: auto; }
.slide.zoomed { cursor: zoom-out; max-height: calc(100vh - 6rem); }
.slide.zoomed img { max-width: none; max-height: none; width: 200%; }

/* Unter der Folie: feiner Fortschrittsstrich, daneben klein die Stelle und ggf. der Lesezeichen-Modus. */
.slide-foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.slide-foot .bar { flex: 1; height: 3px; margin: 0; }

/* Blätterpfeile links und rechts auf der Folie: zurückhaltend, bis man darauf zeigt. */

.slide-arrow {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-top: -1.5rem;
  border: 1px solid var(--control-line);
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  font-size: 2rem;
  line-height: 1;
  text-decoration: none;
  opacity: 0.4;
  transition: opacity 0.15s;
}

.slide-arrow[hidden] { display: none; }
.slide-arrow.prev { left: 0.75rem; }
.slide-arrow.next { right: 0.75rem; }
.slide-arrow:hover, .slide-arrow:focus-visible { opacity: 1; color: var(--blue-dark); }

/* Vollbild: nur die Folie auf dunklem Grund, Pfeile und Schließen-Knopf darauf. .fullscreen setzt karten.js – mit
   echtem Vollbild des Browsers für die ganze Seite oder, wo es das nicht gibt (iPhone), ohne. Die Ebene liegt
   knapp unter dem Chat (dessen Element hat z-index 999999999), damit der auch im Vollbild bedienbar bleibt. */
.slide-close { display: none; }
:root:has(.slide-frame.fullscreen) { overflow: hidden; }

.slide-frame.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 999999000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 2.9rem 0.75rem 0.5rem;
  background: #1b1b1b;
}

.fullscreen .slide { border: 0; border-radius: 0; }
.fullscreen .slide img { max-width: calc(100vw - 1.5rem); max-height: calc(100vh - 4.65rem); }
.fullscreen .slide-foot { width: min(100%, calc((100vh - 4.65rem) * 1.4142)); color: #bbb; }
.fullscreen .slide-foot .bar { background: #444; }
.fullscreen .slide-arrow { opacity: 0.3; }
.fullscreen .slide-arrow:hover, .fullscreen .slide-arrow:focus-visible { opacity: 1; }

/* Im Vollbild oben links: Kapitelübersicht, Notizzettel, Lesezeichen, „Nur Lesezeichen“; oben rechts das ×. Die
   Folie rückt dafür ein Stück nach unten. Halb durchsichtig, bis man darauf zeigt oder sie eingeschaltet sind. */
.fs-tools { display: none; }

.fullscreen .fs-tools {
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.fs-tool { min-height: 1.85rem; padding: 0.1rem 0.8rem; font-size: 0.85rem; opacity: 0.65; }
.fs-tool:hover, .fs-tool:focus-visible, .fs-tool[aria-pressed="true"] { opacity: 1; }
.fs-tool[hidden], .card-tools [hidden] { display: none; }

/* Kapitelübersicht (links) und Notizzettel (rechts) als Ebenen über der Folie. karten.js hängt sie dafür im Vollbild
   in den Rahmen – außerhalb lägen sie unter ihm. Oben bleibt Platz für die Knöpfe. */
.slide-frame.fullscreen > .outline.side,
.slide-frame.fullscreen > .notes-side { display: none; }

:root.fs-outline .slide-frame.fullscreen > .outline.side {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: block;
  width: min(22rem, 85vw);
  max-height: none;
  padding-top: 2.9rem;
  overflow-y: auto;
  border-right: 1px solid var(--control-line);
  background: #fff;
  font-size: 0.95rem;
  text-align: left;
}

:root.fs-notes .slide-frame.fullscreen > .notes-side {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  width: min(var(--notes-width, 21rem), 90vw);
  height: auto;
  padding-top: 2.9rem;
  border-left: 1px solid var(--control-line);
  background: #fff;
  text-align: left;
}

.fullscreen .slide-close {
  position: absolute;
  top: 0.4rem;
  right: 0.75rem;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid #666;
  border-radius: 50%;
  background: #fff;
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.4;
}

.fullscreen .slide-close:hover, .fullscreen .slide-close:focus-visible { opacity: 1; }

/* Kartentext mit seinen Zeilenumbrüchen */
.text-card {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  font-size: 1.15rem;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

mark.gap { background: none; color: var(--blue); font-weight: 700; }

.gap-input {
  width: 11rem;
  max-width: 100%;
  min-height: 2.2rem;
  padding: 0.1rem 0.5rem;
  vertical-align: baseline;
}

.gap.right, .gap.wrong { padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 700; }
.gap.right { background: var(--right-surface); color: var(--right); }
.gap.wrong { background: var(--wrong-surface); color: var(--red-dark); }
.gap.wrong s { font-weight: 400; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 0.75rem;
}

.card-view .bar { margin-top: 1rem; }

/* Lückentext und Auswertung */
.quiz-card { margin-bottom: 1.5rem; }
.quiz-card h2 { margin-top: 0; font-size: 1.3rem; }
.quiz-card h2 a { color: inherit; text-decoration: none; }
.quiz-card h2 a:hover { color: var(--blue); }

.score {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
}

.score strong { font-size: 2.2rem; font-weight: 300; color: var(--blue); }
.score small { display: block; }

@media (max-width: 520px) {
  .brand span { display: none; }
  h1 { font-size: 1.6rem; }
  .card-view .card-title { font-size: 1.05rem; }
}

/* Im Rahmen von ILIAS (Modal des Plugins): Das Modal bringt Titel und Schließen mit, die eigene Kopfzeile entfällt.
   Die Klasse setzt das Layout, sobald die Seite in einem Rahmen geladen wird. */
.embedded .top { display: none; }
.embedded .embed-hint[hidden] { display: block; }
.embedded .login-form[data-embed="1"] { display: none; }