/* entscheidungen.css: Entscheidungs-Postfach (Gitea #2599). Nur Bausteine-Variablen, Schrift nie unter 1rem. */

.ent { max-width: 44rem; }
.ent ::selection { background: var(--farbe-info-bg); color: var(--farbe-text); }

.ent-kopf { margin-block-end: var(--abstand-lg); }
.ent-kopf h1 { margin: 0; text-wrap: balance; }
.ent-zahl {
  margin: var(--abstand-xs) 0 0;
  font-size: var(--schrift-gross);
  color: var(--farbe-text-gedaempft);
  font-variant-numeric: tabular-nums;
}

.ent-hinweis,
.ent-meldung {
  margin: 0 0 var(--abstand-md);
  padding: var(--abstand-sm) var(--abstand-md);
  border: 1px solid var(--farbe-warn-rand);
  border-radius: var(--radius-feld);
  background: var(--farbe-warn-bg);
  color: var(--farbe-warn);
}
.ent-meldung { border-color: var(--farbe-ok-rand); background: var(--farbe-ok-bg); color: var(--farbe-ok); }
.ent-meldung p { margin: 0; }
.ent-meldung p + p { margin-block-start: var(--abstand-xs); }

.ent-fehlerbox {
  margin-block-end: var(--abstand-md);
  padding: var(--abstand-md);
  border: 1px solid var(--farbe-fehler-rand);
  border-radius: var(--radius-karte);
  background: var(--farbe-fehler-bg);
  color: var(--farbe-fehler);
}
.ent-fehlerbox p { margin: 0 0 var(--abstand-sm); }
.ent-fehlerbox__knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-sm); }

/* ---------- Karten ---------- */
.ent-liste { display: grid; gap: var(--abstand-lg); }

.ent-karte {
  padding: var(--abstand-lg);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  background: var(--farbe-flaeche);
  box-shadow: 0 1px 2px rgba(6, 69, 102, 0.06), 0 6px 18px rgba(6, 69, 102, 0.07);
}
.ent-karte--beantwortet { background: var(--farbe-neutral-bg); box-shadow: none; }

.ent-karte__meta { display: flex; flex-wrap: wrap; gap: var(--abstand-xs); margin-block-end: var(--abstand-sm); }
.ent-marke,
.ent-frist,
.ent-dauer,
.ent-art {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 0.625rem;
  border-radius: var(--radius-rund);
  font-size: var(--schrift-klein);
  line-height: 1.2;
  background: var(--farbe-neutral-bg);
  color: var(--farbe-neutral-text);
}
.ent-marke { background: var(--farbe-info-bg); color: var(--farbe-link-hover); }
.ent-frist { font-variant-numeric: tabular-nums; }
.ent-frist--bald { background: var(--farbe-fehler-bg); color: var(--farbe-fehler); font-weight: 700; }
.ent-art { background: var(--farbe-warn-bg); color: var(--farbe-warn); }

.ent-karte__frage {
  margin: 0;
  font-size: var(--schrift-titel);
  line-height: 1.25;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.ent-karte__worum { margin: var(--abstand-xs) 0 0; color: var(--farbe-text); max-width: 65ch; }
.ent-karte__issue { margin: var(--abstand-xs) 0 0; font-size: var(--schrift-klein); overflow-wrap: anywhere; }
.ent-karte__issue a { color: var(--farbe-text-gedaempft); text-underline-offset: 0.2em; }
.ent-karte__issue a:hover { color: var(--farbe-link-hover); }

.ent-schritt {
  margin-block-start: var(--abstand-md);
  padding: var(--abstand-sm) var(--abstand-md);
  border-radius: var(--radius-feld);
  background: var(--farbe-info-bg);
}
.ent-schritt__titel { margin: 0; font-weight: 700; color: var(--farbe-link-hover); }
.ent-schritt__text { margin: var(--abstand-xs) 0 0; overflow-wrap: anywhere; }

/* ---------- Optionen ---------- */
.ent-steuerung { margin-block-start: var(--abstand-md); }
.ent-optionen { display: grid; gap: var(--abstand-sm); }
@media (min-width: 30rem) { .ent-optionen--zwei { grid-template-columns: 1fr 1fr; } }

.ent-option {
  display: flex;
  align-items: center;
  gap: var(--abstand-sm);
  width: 100%;
  min-height: 3.5rem;
  padding: var(--abstand-sm) var(--abstand-md);
  border: 2px solid var(--farbe-rand-steuerelement);
  border-radius: var(--radius-feld);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font: inherit;
  font-size: var(--schrift-text);
  text-align: start;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.16, 1, 0.3, 1), border-color 160ms cubic-bezier(0.16, 1, 0.3, 1), transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ent-option:hover { border-color: var(--farbe-link); background: var(--farbe-info-bg); }
.ent-option:active { transform: scale(0.985); }
.ent-option:focus-visible,
.ent-textknopf:focus-visible,
.ent-anmerkung summary:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 2px;
}
.ent-option:disabled { cursor: not-allowed; opacity: 0.55; transform: none; }

.ent-option__key {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--farbe-neutral-bg);
  color: var(--farbe-text);
  font-weight: 700;
}
.ent-option { flex-wrap: wrap; }
/* Text bekommt mindestens 12rem; reicht der Platz nicht, rutscht das Schild „Empfehlung" unter den Text. */
.ent-option__text { flex: 1 1 12rem; min-width: 0; overflow-wrap: break-word; }
.ent-option__tag {
  flex: none;
  margin-inline-start: auto;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-rund);
  font-size: var(--schrift-klein);
  font-weight: 700;
  background: var(--farbe-hell);
  color: var(--farbe-marke-dunkel);
}

.ent-option--empfohlen {
  border-color: var(--farbe-marke);
  background: var(--farbe-marke);
  color: var(--farbe-text-auf-marke);
  font-weight: 700;
}
.ent-option--empfohlen:hover { border-color: var(--farbe-marke-dunkel); background: var(--farbe-marke-dunkel); }
.ent-option--empfohlen .ent-option__key { background: var(--farbe-hell); color: var(--farbe-marke-dunkel); }
.ent-option--empfohlen:focus-visible { outline-color: var(--farbe-fokus); }


/* ---------- Freitext ---------- */
.ent-feldname { display: block; margin: var(--abstand-sm) 0 var(--abstand-xs); font-weight: 700; }
.ent-textfeld {
  display: block;
  width: 100%;
  min-height: 5rem;
  padding: var(--abstand-sm);
  border: 1px solid var(--farbe-rand-steuerelement);
  border-radius: var(--radius-feld);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font: inherit;
  font-size: var(--schrift-text);
  caret-color: var(--farbe-marke);
  resize: vertical;
}
.ent-textfeld:focus-visible { outline: 3px solid var(--farbe-fokus); outline-offset: 1px; }
.ent-senden { margin-block-start: var(--abstand-sm); min-height: 3rem; }

.ent-anmerkung { margin-block-start: var(--abstand-sm); }
.ent-anmerkung summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--farbe-link);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- Fuß der Karte ---------- */
.ent-karte__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-xs) var(--abstand-sm);
  margin-block-start: var(--abstand-md);
  padding-block-start: var(--abstand-sm);
  border-top: 1px solid var(--farbe-linie);
}
.ent-karte__fuss-hinweis { color: var(--farbe-text-gedaempft); font-size: var(--schrift-klein); }

.ent-textknopf {
  min-height: 2.75rem;
  padding: 0 var(--abstand-xs);
  border: 0;
  background: none;
  color: var(--farbe-link);
  font: inherit;
  font-size: var(--schrift-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.ent-textknopf:hover { color: var(--farbe-link-hover); }

/* ---------- Status, Rückgängig ---------- */
.ent-status:empty { display: none; }
.ent-status { margin-block-start: var(--abstand-sm); }
.ent-notiz { margin: var(--abstand-sm) 0 0; color: var(--farbe-text-gedaempft); }
.ent-fehlertext { margin: var(--abstand-sm) 0 0; color: var(--farbe-fehler); font-weight: 700; }

.ist-wartend .ent-steuerung,
.ist-wartend .ent-karte__fuss { display: none; }

.ent-uhr {
  display: grid;
  gap: var(--abstand-sm);
  padding: var(--abstand-md);
  border-radius: var(--radius-feld);
  background: var(--farbe-info-bg);
}
.ent-uhr__text { margin: 0; overflow-wrap: break-word; }
.ent-uhr__spur {
  display: block;
  height: 0.375rem;
  border-radius: var(--radius-rund);
  background: var(--farbe-flaeche);
  overflow: hidden;
}
.ent-uhr__balken {
  display: block;
  height: 100%;
  background: var(--farbe-marke);
  transform-origin: left center;
  animation: ent-ablauf 10s linear forwards;
}
@keyframes ent-ablauf { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ent-rueck { justify-self: start; min-height: 3rem; }

.ent-karte--fertig {
  background: var(--farbe-ok-bg);
  border-color: var(--farbe-ok-rand);
  box-shadow: none;
  animation: ent-fertig 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ent-fertig { from { transform: scale(0.98); filter: saturate(0.4); } to { transform: none; filter: none; } }
.ent-fertig { display: flex; align-items: flex-start; gap: var(--abstand-sm); color: var(--farbe-ok); }
.ent-fertig__text { margin: 0; font-weight: 700; overflow-wrap: break-word; }
.ent-haken { flex: none; width: 1.75rem; height: 1.75rem; }

/* ---------- Leer, Später, Zuletzt ---------- */
.ent-leer { padding: var(--abstand-xl) var(--abstand-md); text-align: center; color: var(--farbe-ok); }
.ent-leer__bild { width: 3.5rem; height: 3.5rem; }
.ent-leer__titel { margin: var(--abstand-sm) 0 0; font-size: var(--schrift-titel); font-weight: 700; color: var(--farbe-text); }
.ent-leer__text { margin: var(--abstand-xs) auto 0; max-width: 32rem; color: var(--farbe-text-gedaempft); }

.ent-spaeter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-xs) var(--abstand-sm);
  margin: var(--abstand-lg) 0 0;
  color: var(--farbe-text-gedaempft);
}
.ent-spaeter[hidden], .ent-leer[hidden], .ent-zuletzt[hidden], .ent-hinweis[hidden] { display: none; }

.ent-zuletzt { margin-block-start: var(--abstand-xl); }
.ent-zuletzt__titel { margin: 0 0 var(--abstand-sm); font-size: var(--schrift-gross); }
.ent-zuletzt__liste { margin: 0; padding: 0; list-style: none; }
.ent-zuletzt__eintrag {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-xs) var(--abstand-sm);
  padding: var(--abstand-xs) 0;
  border-bottom: 1px solid var(--farbe-linie);
  font-variant-numeric: tabular-nums;
}
.ent-zuletzt__wann { min-width: 7.5rem; color: var(--farbe-text-gedaempft); }

.ent-fuss { margin: var(--abstand-xl) 0 0; color: var(--farbe-text-gedaempft); max-width: 65ch; }

@media (prefers-reduced-motion: reduce) {
  .ent-option, .ent-karte--fertig { transition: none; animation: none; }
  .ent-uhr__balken { animation-duration: 10s; animation-timing-function: steps(10, end); }
}