/* `hidden` muss staerker sein als die display-Regeln der Website: .btn und
   .card setzen display, und das schlaegt sonst das Attribut — der
   Abmelde-Knopf stand dann auch auf dem Anmeldebildschirm. */
[hidden] { display: none !important; }

/* Die Web-App liegt auf der Gestaltung der Website auf (../assets/styles.css)
   und ergaenzt nur, was es dort nicht gibt: Formulare, Kacheln, Antwortzeilen.
   Absichtlich wenig — dieselben Farben, dieselbe Schrift, damit die App nicht
   wie eine fremde Seite wirkt. */

.app-body {
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
}

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: var(--navy-800);
  color: #fff;
}
.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}
.app-bar-right { display: flex; align-items: center; gap: 10px; }
.who { font-size: 0.85rem; color: rgba(255,255,255,0.75); }
.lang-select, .count-select {
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 6px 8px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}
.btn-small { padding: 6px 12px; font-size: 0.85rem; }

/* .btn-ghost ist fuer den dunklen Hero der Website gemacht: weisse Schrift
   auf Durchsichtig. Auf einer weissen Karte war das ein unsichtbarer Knopf
   ("Code erneut senden" stand da, aber niemand konnte ihn sehen). In der
   Kopfzeile bleibt er, wie er ist — dort ist der Grund dunkel. */
.app-main .btn-ghost {
  color: var(--ink);
  background: #fff;
  border-color: var(--border);
}
.app-main .btn-ghost:hover { border-color: var(--navy-800); }

.app-tabs {
  display: flex;
  gap: 4px;
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 16px 0;
}
.tab {
  flex: 1;
  padding: 10px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.tab.active { color: var(--ink); border-bottom-color: var(--green-500); }

.app-main { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }

/* Der Stern sitzt neben der Frage, nicht darunter: er gehoert zu ihr. */
.prompt-row { display: flex; align-items: flex-start; gap: 10px; }
.prompt-row .prompt-text { flex: 1; }
.star {
  border: 0;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 0 2px;
}
.star[aria-pressed="true"] { color: #e8a33d; }

/* Verlauf und Favoriten teilen sich die Zeilenform. */
.entry {
  width: 100%;
  text-align: left;
  padding: 14px;
  margin-bottom: 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.entry:hover { border-color: var(--green-500); }
.entry .when { color: var(--ink-soft); font-size: 0.85rem; }
.entry .ratio { font-weight: 700; white-space: nowrap; }
.entry.plain { cursor: default; display: block; }
.entry.plain:hover { border-color: var(--border); }

.subnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
.subtab {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.subtab.active { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.badge {
  background: #b3261e;
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Ein Eintrag in einer Pruefliste: Inhalt oben, Entscheidungen unten. */
.review-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 10px; background: #fff; }
.review-card h3 { margin: 0 0 6px; font-size: 1rem; }
.review-card .meta { color: var(--ink-soft); font-size: 0.83rem; margin: 0 0 8px; }
.review-card .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.review-card textarea { margin-top: 8px; }
.review-card img.shot { max-width: 100%; max-height: 260px; border-radius: 8px; border: 1px solid var(--border); margin-top: 8px; }
.note-row { display: none; margin-top: 8px; }
.note-row.open { display: block; }
.unread { border-left: 3px solid var(--green-500); }

.review-question { border-top: 1px solid var(--border); padding: 16px 0; }
.review-question:first-child { border-top: 0; }
.review-question .prompt { font-weight: 600; margin: 0 0 8px; }
.review-option { padding: 8px 10px; border-radius: 8px; margin-bottom: 4px; font-size: 0.92rem; border: 1px solid transparent; }
.review-option.right { background: rgba(50,184,88,0.12); border-color: rgba(50,184,88,0.4); }
.review-option.chosen-wrong { background: rgba(179,38,30,0.08); border-color: rgba(179,38,30,0.4); }
.review-mark { font-size: 0.82rem; color: var(--ink-soft); }
.remove-star { float: right; }
.app-card { padding: 24px; }
.card.app-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; }
.app-card h1 { margin: 0 0 6px; font-size: 1.4rem; }
.app-card h2 { margin: 20px 0 8px; font-size: 1.05rem; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.85rem; }
.error { color: #b3261e; font-size: 0.9rem; margin-top: 12px; }
.note { color: #1f7a3d; font-size: 0.9rem; margin-top: 12px; }

form label { display: block; margin: 14px 0 4px; font-weight: 600; font-size: 0.9rem; }
form input {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font: inherit;
  background: #fff;
  color: var(--ink);
}
/* Nur der Absendeknopf geht ueber die volle Breite — `form button` traf auch
   das ✕ neben einer Antwortzeile, und das schob das Textfeld auf 26 px
   zusammen. */
form > button { margin-top: 18px; width: 100%; }

/* Wechsel zwischen Anmelden, Registrieren und Passwort-Vergessen: Knoepfe,
   die wie Verweise aussehen — ein <a> ohne Ziel waere hier gelogen. */
.switch { margin-top: 16px; font-size: 0.9rem; color: var(--ink-soft); text-align: center; }
.linklike {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--navy-800);
  text-decoration: underline;
  cursor: pointer;
}
.linklike:hover { color: var(--green-600, #2e9e4b); }

.tile-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 12px 0; }
.tile {
  text-align: left;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tile:hover { border-color: var(--green-500); }
.tile span { color: var(--ink-soft); font-size: 0.85rem; }

.quiz-head { display: flex; justify-content: space-between; align-items: center; }
.progress-rail { height: 4px; background: var(--border); border-radius: 4px; margin: 10px 0 18px; }
.progress-rail div { height: 100%; background: var(--green-500); border-radius: 4px; transition: width 0.2s; }
.prompt-text { font-size: 1.1rem; line-height: 1.4; margin: 0 0 14px; }

/* Die Abbildung zur Frage: so gross wie noetig, nie groesser als der Platz. */
.figure {
  display: block;
  max-width: 100%;
  max-height: 320px;
  margin: 0 auto 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.options { display: grid; gap: 8px; }
.option {
  text-align: left;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.option.selected { border-color: var(--navy-800); background: rgba(22,35,58,0.05); }
.option.right { border-color: rgba(50,184,88,0.55); background: rgba(50,184,88,0.12); }
.option.wrong { border-color: rgba(179,38,30,0.5); background: rgba(179,38,30,0.08); }
.option:disabled { cursor: default; }

.explanation { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; font-size: 0.95rem; }
.explanation.ok { background: rgba(50,184,88,0.12); }
.explanation.bad { background: rgba(179,38,30,0.08); }

.quiz-head-actions { display: flex; gap: 8px; }

/* Uebersicht: eine Kachel je Frage, Farbe sagt den Stand. */
.overview { margin: 4px 0 16px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.overview-cell {
  padding: 8px 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
}
.overview-cell.correct { background: rgba(50,184,88,0.15); border-color: rgba(50,184,88,0.5); }
.overview-cell.incorrect { background: rgba(179,38,30,0.10); border-color: rgba(179,38,30,0.45); }
.overview-cell.skipped { background: rgba(232,163,61,0.16); border-color: rgba(232,163,61,0.5); }
.overview-cell.current { outline: 2px solid var(--navy-800); outline-offset: 1px; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid var(--border); }
.legend .dot.correct { background: rgba(50,184,88,0.6); }
.legend .dot.incorrect { background: rgba(179,38,30,0.5); }
.legend .dot.skipped { background: rgba(232,163,61,0.6); }
.legend .dot.open { background: #fff; }
.legend span:not(.dot) { margin-right: 10px; }

/* Einreichen */
form textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font: inherit;
  background: #fff;
  color: var(--ink);
  resize: vertical;
}
.count-select.wide { width: 100%; margin-top: 4px; }
.options-field { border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-top: 18px; }
.options-field legend { font-weight: 600; font-size: 0.9rem; padding: 0 6px; }
.option-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.option-row input[type="text"] { flex: 1; }
.option-row .drop { background: none; border: 0; font-size: 1.1rem; cursor: pointer; color: var(--ink-soft); }
.checkline { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 600; font-size: 0.9rem; }
.checkline input { width: auto; }

.quiz-report { text-align: left; margin-top: 18px; }
form input[type="file"] { border: 0; padding: 8px 0; background: none; }

.quiz-actions { display: flex; gap: 10px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.quiz-actions .btn-primary { flex: 1; }

.score { font-size: 1.6rem; font-weight: 800; margin: 12px 0 4px; }