/* GDMM v1.3-clean · base.css
 * Grundlagen für alle Bereiche: Elemente (body, Überschriften, Formularfelder), Hilfsklassen
 * (.muted, .small, .sr-only …) und gemeinsame Bausteine (.btn, .card, .chip, .form-control,
 * .mini-icon, .icon-button, .tabs, .search-box, .metric, .locked-row …).
 *
 * Einbindung (Reihenfolge ist Teil der Kaskade, siehe index.html):
 *   tokens → base → layout → modals → forum → tnt → live-participant → trainer → presenter → ux → trainer-workspace → awards
 *
 * Mobile First: Die Regeln ohne Media Query beschreiben die Smartphone-Ansicht,
 * @media (min-width: …) ergänzt größere Bildschirme. Die Werte enden auf .02px (z. B. 750.02px),
 * damit sie lückenlos an die früheren Grenzen (max-width: 750px) anschließen – auch bei gebrochenen
 * Fensterbreiten durch Zoom. Verbliebene @media (max-width: …)-Blöcke enthalten Deklarationen, die es
 * nur auf kleinen Bildschirmen gibt (die Regel setzt dafür auf großen Bildschirmen keinen eigenen Wert).
 */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font: 16px/1.45 var(--font);
  color: var(--ink);
  background: var(--bg);
}

button {
  font: inherit;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

svg {
  display: block;
  flex: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #719bff;
  outline-offset: 3px;
}

h1 {
  margin-top: 0;
  font-family: var(--display);
  letter-spacing: -.035em;
  line-height: 1.15;
  font-size: clamp(1.8rem,2.8vw,2.75rem);
}

h2 {
  margin-top: 0;
  font-family: var(--display);
  letter-spacing: -.035em;
  line-height: 1.15;
  font-size: clamp(1.3rem,2vw,1.7rem);
}

h3 {
  margin-top: 0;
  font-family: var(--display);
  letter-spacing: -.035em;
  line-height: 1.15;
  font-size: 1.13rem;
}

p {
  margin-top: 0;
  margin-bottom: 0;
}

.muted {
  color: var(--muted);
}

.fine {
  font-size: var(--fs-078);
}

.small {
  font-size: var(--fs-090);
}

.eyebrow {
  color: var(--blue);
  font-size: var(--fs-073);
  letter-spacing: .115em;
  font-weight: 850;
  text-transform: uppercase;
}

.icon-button {
  width: 41px;
  height: 41px;
  border: 1px solid var(--border);
  border-radius: var(--radius-14);
  background: var(--white);
  display: grid;
  place-items: center;
}

.icon-button:hover {
  background: #f1f4fb;
}

.icon-button svg {
  width: 19px;
  height: 19px;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-13);
  background: var(--lime);
  color: var(--gray-07);
  font-weight: 900;
  display: grid;
  place-items: center;
  font-size: var(--fs-080);
  border: 2px solid white;
  box-shadow: 0 0 0 1px var(--border);
}

.btn {
  border: 0;
  border-radius: var(--radius-14);
  padding: var(--space-11) var(--space-17);
  display: inline-flex;
  align-items: center;
  gap: var(--space-9);
  justify-content: center;
  min-height: 44px;
  font-weight: 850;
  font-size: var(--fs-088);
  white-space: normal;
  text-align: center;
  transition: transform .15s,background .15s;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn svg {
  width: 18px;
  height: 18px;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: .5;
  transform: none;
}

.btn:focus:not(:focus-visible) {
  box-shadow: none;
  outline: none;
}

.btn-lime {
  background: var(--lime);
  color: var(--gray-07);
}

.btn-lime:hover {
  background: #c0ff40;
}

.btn-blue {
  background: var(--blue);
  color: var(--white);
}

.btn-blue:hover {
  background: var(--blue-dark);
}

.btn-outline {
  background: white;
  border: 1px solid var(--border);
  color: var(--ink);
}

.btn-ghost {
  background: var(--gray-100-a13);
  color: white;
  border: 1px solid var(--gray-100-a30);
}

.btn-sm {
  font-size: var(--fs-080);
  min-height: 36px;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-11);
}

.grid {
  display: grid;
  gap: var(--space-12);
}

.grid-main,
.grid-two,
.grid-three {
  grid-template-columns: 1fr;
}

.stack {
  display: grid;
  gap: var(--space-18);
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-23);
  box-shadow: var(--shadow);
  min-width: 0;
}

.card.soft {
  background: #edf2ff;
}

.card h3 {
  margin: 0 0 var(--space-7);
}

.card p {
  color: var(--muted);
  font-size: .89rem;
  line-height: 1.56;
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-10);
  margin-bottom: var(--space-11);
}

.card-header h2 {
  font-size: var(--fs-122);
  margin: var(--space-4) 0 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  border-radius: var(--radius-pill);
  padding: var(--space-7) var(--space-10);
  background: #eff2f7;
  color: #455064;
  font-size: var(--fs-075);
  font-weight: 750;
}

.chip.blue {
  background: var(--slate-96);
  color: #003ccc;
}

.chip.green {
  background: #e7f6be;
  color: #305800;
}

.chip.yellow {
  background: var(--yellow);
  color: #544006;
}

.chip.purple {
  background: #f2eaff;
  color: #58347c;
}

.chip.white {
  background: var(--white);
  color: var(--ink);
}

.chip svg {
  width: 14px;
  height: 14px;
}

.mini-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-15);
  background: #ebf0ff;
  color: var(--blue);
}

.mini-icon.lime {
  background: var(--lime);
  color: var(--gray-07);
}

.mini-icon.yellow {
  background: var(--yellow);
  color: var(--gray-07);
}

.mini-icon.lilac {
  background: var(--lilac);
  color: var(--gray-07);
}

.mini-icon svg {
  width: 23px;
  height: 23px;
}

.progress-track {
  height: 9px;
  background: #e6eaf1;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--blue);
  border-radius: var(--radius-pill);
  transition: width .3s;
}

.form-label {
  display: block;
  font-size: var(--fs-082);
  font-weight: 850;
  margin: 0 0 var(--space-8);
}

.form-control {
  display: block;
  width: 100%;
  min-height: 45px;
  border: 1px solid #cfd6e2;
  border-radius: var(--radius-13);
  padding: var(--space-12) var(--space-13);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  outline: none;
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

.form-control:focus,
.form-control:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: var(--blue);
}

.form-help {
  color: var(--muted);
  font-size: var(--fs-079);
}

.form-error {
  font-size: var(--fs-079);
  color: #a23b30;
  margin-top: var(--space-5);
  min-height: 0;
}

.form-stack {
  display: grid;
  gap: var(--space-15);
}

.box-note {
  background: var(--slate-97b);
  border: 1px solid #d9e4ff;
  border-radius: var(--radius-16);
  padding: var(--space-14) var(--space-16);
  font-size: var(--fs-083);
  color: #355094;
  line-height: 1.5;
}

.tabs {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.tab {
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: var(--space-8) var(--space-11);
  font-weight: 850;
  color: #4a5569;
  font-size: var(--fs-072);
}

.tab.active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}

.search-box {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-width: 230px;
  border: 1px solid var(--border);
  background: white;
  border-radius: var(--radius-14);
  padding: 0 var(--space-12);
}

.search-box svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
}

.search-box input {
  border: 0;
  outline: none;
  padding: var(--space-12) 0;
  background: none;
  flex: 1;
  min-width: 0;
}

.tagline {
  display: flex;
  gap: var(--space-7);
  flex-wrap: wrap;
}

.locked-list {
  display: grid;
  gap: var(--space-10);
}

.locked-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-18);
  border: 1px solid var(--border);
  border-radius: var(--radius-16);
  padding: var(--space-15);
  background: var(--white);
}

.locked-row svg {
  width: 19px;
  height: 19px;
  color: #697388;
}

.fake-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.fake-table th {
  text-align: left;
  padding: var(--space-13) var(--space-14);
  border-bottom: 1px solid var(--border);
  background: #f8f9fc;
  font-size: var(--fs-076);
  letter-spacing: .03em;
  color: #617087;
}

.fake-table td {
  padding: var(--space-15) var(--space-14);
  border-bottom: 1px solid var(--gray-95);
  font-size: var(--fs-086);
}

.fake-table tr:last-child td {
  border-bottom: 0;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-16);
}

.metric {
  padding: var(--space-23);
  border: 1px solid var(--border);
  border-radius: var(--radius-19);
  background: white;
}

.metric strong {
  font: 900 2rem/1.1 var(--display);
  letter-spacing: -.055em;
  display: block;
  margin: var(--space-10) 0;
}

.metric p {
  font-size: var(--fs-078);
  color: var(--muted);
}

.metric .eyebrow {
  font-size: var(--fs-065);
}

.empty {
  display: grid;
  gap: var(--space-9);
  justify-items: center;
  text-align: center;
  padding: 55px var(--space-18);
  background: var(--white);
  border: 1px dashed #cbd5e7;
  border-radius: var(--radius-20);
}

.empty svg {
  width: 32px;
  height: 32px;
  color: var(--blue);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.btn-closed {
  background: var(--gray-96c);
  color: var(--slate-39);
  border: 1px solid var(--slate-90c);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Spezifität bewusst erhöht (ersetzt ein früheres !important) */
.btn-closed.btn-closed {
  opacity: 1;
}

.btn-closed:hover {
  background: var(--gray-96c);
  color: var(--slate-39);
  border: 1px solid var(--slate-90c);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
  transform: none;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 700;
  padding: var(--space-9) 0;
  display: block;
  margin: var(--space-12) 0 0 auto;
}

input:focus:not([type=checkbox]) {
  outline: none;
  box-shadow: none;
}

/* Spezifität bewusst erhöht (ersetzt ein früheres !important) */
input:focus:focus:not([type=checkbox]) {
  border-color: var(--blue);
}

/* Spezifität bewusst erhöht (ersetzt ein früheres !important) */
textarea:focus:focus {
  outline: none;
  border-color: var(--blue);
}

textarea:focus {
  box-shadow: none;
}

select:focus {
  outline: none;
  box-shadow: none;
}

/* Spezifität bewusst erhöht (ersetzt ein früheres !important) */
select:focus:focus {
  border-color: var(--blue);
}

button:focus:not(:focus-visible) {
  box-shadow: none;
}

/* Spezifität bewusst erhöht (ersetzt ein früheres !important) */
button:focus:focus:not(:focus-visible) {
  outline: none;
}

@media (min-width: 470.02px) {
  .avatar {
    width: 38px;
    height: 38px;
  }

  .grid {
    gap: var(--space-18);
  }

}

@media (min-width: 750.02px) {
  .grid-main {
    grid-template-columns: minmax(0,1.7fr) minmax(270px,1fr);
  }

  .grid-two {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .grid-three {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .card-header {
    margin-bottom: var(--space-16);
  }

  .tabs {
    gap: var(--space-8);
    margin-bottom: var(--space-18);
  }

  .tab {
    padding: var(--space-9) var(--space-14);
    font-size: var(--fs-082);
  }

}

@media (max-width: 750px) {
  /* Reihenfolge ist Teil der Kaskade: muss nach .empty stehen */
  .card {
    padding: var(--space-16);
  }

}

@media (max-width: 470px) {
  .search-box {
    width: 100%;
  }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }

}

/* Shared task images: one accessible preview and the existing modal mechanism. */
.task-media{margin:18px 0;max-width:100%;min-width:0;text-align:center}
.task-image-open{display:inline-flex;flex-direction:column;align-items:center;gap:8px;max-width:100%;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--white);color:var(--blue)}
.task-image-open img{display:block;max-width:100%;max-height:240px;object-fit:contain}
.task-image-open span{font-size:13px;font-weight:700}
.task-media figcaption,.task-image-expanded figcaption{margin-top:8px;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.task-image-expanded{margin:0;text-align:center}
.task-image-expanded img{display:block;max-width:100%;max-height:70dvh;object-fit:contain;margin:auto}
.task-image-editor{min-width:0;margin:0;padding:var(--space-14);border:1px solid var(--border);border-radius:var(--radius-12);display:grid;gap:var(--space-14)}
.task-image-editor input[type=file]{width:100%;font-size:13px}
.task-image-preview{max-height:140px;object-fit:contain}
.task-image-preview[hidden]{display:none}
.task-image-editor legend{padding:0 var(--space-5);font:inherit;font-weight:900}
.task-image-editor label{display:grid;gap:var(--space-5);min-width:0}

/* Every digit keeps its slot, independent of the display font's numeral widths. */
.countdown-digits {
  display: inline-grid;
  grid-template-columns: repeat(2, 1ch) .5ch repeat(2, 1ch);
  justify-content: center;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.countdown-digits > span {inline-size:100%;text-align:center}

/* Keep startup recovery invisible during a normal successful load. */
#gdmm-startup button[hidden] {display:none;}

/* Topic tokens share the existing title field's font and border. */
.task-topics{position:relative;min-width:0}
.task-topics>label{display:block}
.task-topics-control{display:flex;flex-wrap:wrap;align-items:center;gap:6px;border:1px solid var(--border);border-radius:var(--radius-input,12px);padding:10px 12px;background:var(--white);min-height:48px}
.task-topics-control:focus-within{border-color:var(--blue);outline:none;box-shadow:none}
.task-topics-control [data-topic-chips]{display:contents}
.task-topics-control input[data-topic-input]{flex:1;width:8ch;min-width:8ch;border:0;outline:0;box-shadow:none;padding:0;background:transparent;font:inherit}
.task-topics-control input[data-topic-input][hidden]{display:none}
.task-topic-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:0 8px;border-radius:8px;background:var(--gray-95c);font:inherit}
.task-topic-chip>span{overflow-wrap:anywhere}
.task-topic-chip button{border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;padding:0 2px}
.task-topic-suggestions{position:absolute;z-index:20;left:0;right:0;max-height:220px;overflow:auto;border:1px solid var(--border);border-radius:12px;background:var(--white);box-shadow:0 6px 18px #0002;padding:4px}
.task-topic-suggestions [role=option]{display:block;width:100%;padding:10px;text-align:left;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.task-topic-suggestions [role=option][aria-selected=true]{background:var(--gray-95c)}
.task-topic-suggestions [hidden],.task-topic-suggestions[hidden]{display:none}
.task-topics small:empty{display:none}
.task-image-static{cursor:default}