/* ---- Basis / Reset ------------------------------------------------------ */
:root {
  --color-bg: #f1f1f2;
  --color-surface: #ffffff;
  --color-surface-alt: #e7e7e9;
  --color-text: #1b1b1d;
  --color-muted: #6b6b70;
  --color-border: #d6d6d9;
  --color-dark: #1b1b1d;
  --color-dark-strong: #000000;
  --color-accent: #d7fb2b;
  --color-accent-hover: #c2e320;
  --color-accent-text: #1b1b1d;
  --color-danger: #a3352d;
  --color-focus: #1b1b1d;
  --color-faint: #b3b3b8;
  --radius: 8px;
  --chrome-height: 0px;
  font-size: 16px;
}

/* Dunkles Design als Alternative (Statusleiste, Knopf "Dunkel") - nur auf
   der Hauptseite verfügbar, nicht auf der Login-Seite. */
:root[data-theme="dark"] {
  --color-bg: #1b1b1d;
  --color-surface: #242426;
  --color-surface-alt: #2e2e31;
  --color-text: #f1f1f2;
  --color-muted: #9a9a9f;
  --color-border: #3a3a3d;
  --color-danger: #e5867e;
  --color-focus: #f1f1f2;
  --color-faint: #6b6b70;
}

* { box-sizing: border-box; }

/* Autoren-Styles mit eigenem display (flex/none-Overlay etc.) schlagen sonst
   das UA-Default für [hidden] - hier explizit wieder erzwingen. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

h1, h2, h3 { line-height: 1.25; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-dark);
  color: var(--color-accent);
  padding: 0.75rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ---- Buttons -------------------------------------------------------------- */
.button {
  font: inherit;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-text);
  cursor: pointer;
}
.button:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.button--ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
  font-weight: 400;
}
.button--ghost:hover { background: var(--color-surface-alt); }
.button--danger {
  background: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger);
  font-weight: 400;
}
.button--danger:hover { background: #f6eae9; }

.icon-button {
  font: inherit;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
}
.icon-button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Login ----------------------------------------------------------------- */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}
.login-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 24rem;
  width: 100%;
}
.login-card form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.login-card input {
  font: inherit;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.alert {
  background: #fbeaea;
  color: var(--color-danger);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
}

/* ---- Header ----------------------------------------------------------------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 1.25rem 1.25rem 1rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.app-header__title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-muted);
  letter-spacing: 0.01em;
}

/* ---- Admin-Panel -------------------------------------------------------------- */
.admin-panel {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 1.25rem;
}
.admin-panel__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}
.admin-panel__head h2 { margin: 0; }
.save-status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}
.save-status--saving { color: var(--color-muted); }
.save-status--ok { color: #4d7a2f; }
:root[data-theme="dark"] .save-status--ok { color: #8fce5c; }
.admin-panel__hint--warning { color: var(--color-danger); font-weight: 600; }
.save-status--error { color: var(--color-danger); font-weight: 600; }
.admin-panel__section {
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-border);
}
.admin-panel__section:first-of-type { border-top: none; }
.admin-panel__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.admin-panel input[type="text"],
.admin-panel input[type="time"],
.admin-panel input[type="number"],
.admin-panel select {
  font: inherit;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.admin-panel__logout {
  display: inline-block;
  margin-top: 1rem;
  color: var(--color-muted);
}
.admin-panel__hint {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.admin-topic-list {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.admin-topic-list__item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.admin-topic-list__item--sub { padding-left: 1.5rem; }
.admin-topic-list__title { flex: 1; min-width: 8rem; }
.admin-topic-list__duration { width: 4rem; }
.admin-topic-list__parent {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  max-width: 11rem;
}
.admin-topic-list__notes-btn.icon-button--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.admin-topic-list__notes {
  flex-basis: 100%;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  resize: vertical;
  min-height: 3rem;
}

.topic-history {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--color-muted);
}
.topic-history__item strong { color: var(--color-text); }

.admin-break-presets {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.admin-break-presets__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.25rem 0.4rem 0.25rem 0.75rem;
  font-size: 0.9rem;
}
.admin-break-presets__item .icon-button {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
}

/* ---- Hauptanzeige --------------------------------------------------------------- */
.display {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 6rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#timeline-fill {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.time-info {
  display: flex;
  gap: 1.5rem;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}
.time-info__negative { color: var(--color-danger); font-weight: 600; }

.topic-list, .question-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.topic-list__item, .question-list__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 1.15rem;
}
.topic-list__item--sub {
  margin-left: 1.75rem;
  font-size: 1rem;
  background: var(--color-bg);
}
.topic-list__item label, .question-list__item label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  cursor: pointer;
}
.topic-list__item input[type="checkbox"],
.question-list__item input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}
.topic-list__item--done span,
.question-list__item--done span {
  text-decoration: line-through;
  color: var(--color-muted);
}

.topic-list__duration {
  font-size: 0.85rem;
  color: var(--color-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- Pause (Hauptseite) ------------------------------------------------------------ */
.pause-section h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-muted);
}
.pause-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pause-buttons__hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.question-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
/* Schmale Anzeige: Eintragen-Knopf sonst genau unter der fixen
   Statusleiste (Version/Admin) - untereinander stapeln schafft Abstand. */
@media (max-width: 30rem) {
  .question-form {
    flex-direction: column;
    align-items: stretch;
  }
}
.question-form input {
  flex: 1;
  font: inherit;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* ---- Pausen-Vollbild-Timer ---------------------------------------------------------- */
.break-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-dark-strong);
  color: var(--color-accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  z-index: 1000;
}
.break-overlay__label {
  font-size: clamp(1.5rem, 4vw, 3rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0;
  color: #8a8a8e;
}
.break-overlay__time {
  font-size: clamp(4rem, 20vw, 14rem);
  font-variant-numeric: tabular-nums;
  margin: 0;
  font-weight: 700;
}
.break-overlay__cancel {
  color: var(--color-accent);
  border-color: #4a4a4d;
}
.break-overlay__cancel:hover { background: #232326; }

/* ---- Status-Leiste (Version + Admin) ------------------------------------------------- */
.status-bar {
  position: fixed;
  right: 1rem;
  bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.2rem 0.35rem 0.2rem 0.65rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  z-index: 50;
}
.status-bar__version {
  font-size: 0.7rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.status-bar__admin-btn {
  font: inherit;
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
}
.status-bar__admin-btn:hover,
.status-bar__admin-btn[aria-expanded="true"],
.status-bar__admin-btn[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}

/* ---- Zeitstrahl-Ansicht (organisch, proportional zur Dauer) -------------------------- */
/* #timeline-fill füllt im Zeitstrahl-Modus die restliche Bildschirmhöhe
   (100dvh minus Titel-Header/ggf. offenes Admin-Panel, siehe --chrome-height
   in app.js). Der Fragen-Bereich bleibt bewusst außerhalb dieses Blocks,
   damit er nicht mit um den Platz konkurriert, sondern normal darunter
   folgt und bei Bedarf per Seiten-Scroll erreichbar ist. */
.display--timeline #timeline-fill {
  min-height: calc(100dvh - var(--chrome-height, 0px));
}
.display--timeline .topics {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 16rem;
}
.display--timeline #topics-heading {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.topic-list--timeline {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.timeline-row {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  /* flex-basis:0 statt eines festen Sockelwerts (z.B. 48px) - sonst würde
     der Sockel bei vielen Themen fast die ganze Höhe auffressen und für
     die proportionale Verteilung nach Dauer bliebe kaum Restfläche übrig
     (5 vs. 20 Minuten sahen dadurch fast gleich hoch aus). So bestimmt
     ausschließlich flex-grow (= Dauer-Gewicht) die Höhe.
     Bewusst KEIN explizites min-height: das würde die automatische,
     inhaltsbasierte Mindesthöhe von Flex-Items abschalten (CSS-Spec) und
     mehrzeilige Titel auf schmalen Bildschirmen die nächste Zeile
     überlappen lassen - die bleibt so als Sicherheitsnetz erhalten. */
  flex-basis: 0;
  /* Trennstrich über die volle Zeilenbreite (Balken UND Text), nicht nur
     im Balken - so ist die Themengrenze auf den ersten Blick erkennbar.
     var(--color-bg) funktionierte nur im farbigen Balken als "Ausschnitt";
     im Textbereich ist der Hintergrund identisch mit --color-bg, der Strich
     wäre dort unsichtbar gewesen - deshalb eine tatsächlich sichtbare
     Randfarbe. */
  border-bottom: 1px solid var(--color-border);
}
.timeline-row--sub {
  flex-basis: 0;
  margin-left: 1.75rem;
}
/* Der eigentlich letzte li-Knoten ist der (nur im Zeitstrahl-Modus
   vorhandene) Zeitmarker - die letzte sichtbare Themenzeile ist daher
   nth-last-child(2), nicht last-child. */
.timeline-row:nth-last-child(2) {
  border-bottom: none;
}
.timeline-row__bar {
  width: 10px;
  background: var(--color-border);
  flex-shrink: 0;
  margin-right: 0.85rem;
  transition: background 0.25s ease;
}
.timeline-row--done .timeline-row__bar {
  background: var(--color-accent);
}
.timeline-row__content {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
  padding: 3px 0;
  cursor: pointer;
  color: var(--color-text);
}
.timeline-row--done .timeline-row__content {
  color: var(--color-faint);
}
.timeline-row__content input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}
.timeline-row__title {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}
.timeline-row--sub .timeline-row__title {
  font-size: 0.9rem;
}
.timeline-row__duration {
  font-size: 0.8rem;
  color: var(--color-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.timeline-now-marker {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  /* var(--color-text) statt --color-dark: passt sich dem Theme an, sonst
     würde die Linie im Dunkel-Modus mit dem (dann ebenfalls dunklen)
     Hintergrund verschmelzen und unsichtbar werden. */
  border-top: 2px dashed var(--color-text);
  z-index: 5;
  pointer-events: none;
}
.timeline-now-marker__label {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-100%);
  /* Bewusst fest (nicht themed): ein dunkler Chip mit Lemon-Text/-Rand
     ist in beiden Designs zuverlässig lesbar. */
  background: #000000;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

/* ---- Undo-Hinweise (Themen/Fragen löschen) ------------------------------------------- */
.undo-toasts {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
}
.undo-toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-dark);
  color: #fff;
  padding: 0.6rem 0.75rem 0.6rem 1rem;
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  font-size: 0.9rem;
}
.undo-toast__btn {
  font: inherit;
  font-weight: 600;
  background: transparent;
  color: var(--color-accent);
  border: none;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
}
.undo-toast__btn:hover { text-decoration: underline; }

/* ---- Responsive ------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .display { padding: 2rem; }
  .admin-panel { padding: 1.25rem 2rem; }
  .app-header { padding: 1rem 2rem; }
}

/* ---- Druckansicht ------------------------------------------------------------------------ */
@media print {
  .admin-panel, .status-bar, .break-overlay, .undo-toasts, .skip-link,
  .pause-section, .question-form, .timeline-now-marker {
    display: none !important;
  }
  body { background: #fff; color: #000; }
  .display--timeline #timeline-fill { min-height: auto; }
  .topic-list--timeline { display: block !important; }
  .timeline-row {
    flex: none !important;
    min-height: 0 !important;
    break-inside: avoid;
  }
  .timeline-row__content { color: #000 !important; }
  .timeline-row--done .timeline-row__content { color: #666 !important; }
  a[href]::after { content: ""; }
}