/* Die Uebersicht: Karten statt Chat. Alles Uebrige (Farben, Tor, Blatt,
   Zeile, Marker) kommt aus app.css. */
.ue{min-height:100dvh;display:flex;flex-direction:column}
.ue__kopf{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;padding:.7rem 1rem;background:var(--karte);border-bottom:1px solid var(--rand);
  padding-top:calc(.7rem + env(safe-area-inset-top,0px))}
.ue__titel{font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.ue__inhalt{flex:1 1 auto;width:100%;max-width:46rem;margin:0 auto;padding:1.4rem 1rem 3rem}
.ue__gruss{margin:.4rem 0 .3rem;font-size:1.7rem;line-height:1.2;letter-spacing:-.02em}
.ue__stand{margin:0 0 1.3rem;color:var(--still);font-size:.95rem;line-height:1.5}

/* Drei Karten, je eine Handlung. Grau heisst: noch nicht dran oder schon
   erledigt; der Text auf der Karte sagt, welches von beiden. */
.karten{display:grid;grid-template-columns:1fr;gap:.7rem}
.karte{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;
  width:100%;padding:1rem 3rem 1rem 1rem;border-radius:var(--r);text-align:left;
  background:var(--karte);border:1px solid var(--rand);color:var(--text);
  transition:transform .12s,border-color .12s,box-shadow .12s}
.karte::after{content:"›";position:absolute;right:1rem;top:1rem;font-size:1.4rem;line-height:1;color:var(--still)}
.karte:not(:disabled):hover{border-color:var(--gelb-dk);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.karte:disabled{cursor:default;opacity:.55}
.karte:disabled::after{content:""}
.karte--fertig{opacity:.75}
.karte--fertig .karte__nr{background:var(--gruen);color:#fff}
.karte--fertig .karte__nr::before{content:"✓"}
.karte--fertig::after{content:""}
.karte__nr{display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--gelb);color:#141414;font-size:.8rem;font-weight:700}
.karte--fertig .karte__nr{font-size:0}
.karte--fertig .karte__nr::before{font-size:.8rem}
.karte:disabled:not(.karte--fertig) .karte__nr{background:rgba(127,127,127,.25);color:var(--text)}
.karte__titel{font-weight:700;font-size:1.05rem;margin-top:.2rem}
.karte__text{color:var(--still);font-size:.9rem;line-height:1.45}
.karte__link{display:block;width:100%;margin-top:.5rem;padding:.5rem .65rem;border-radius:9px;
  background:var(--grund);border:1px solid var(--rand);font-size:.8rem;word-break:break-all;user-select:all}
.karte--warte{pointer-events:none}

.ue__abschnitt{margin-top:1.8rem;padding:1rem;border-radius:var(--r);background:var(--karte);border:1px solid var(--rand)}
.ue__h2{margin:0 0 .4rem;font-size:1.05rem}
.ue__text{margin:0 0 .8rem;color:var(--still);font-size:.92rem;line-height:1.5}
.ue__knoepfe{display:flex;flex-wrap:wrap;gap:.5rem}
.ue__knoepfe .btn{flex:0 1 auto;padding-inline:1.1rem;text-decoration:none;display:inline-block}

@media(min-width:720px){
  .karten{grid-template-columns:1fr 1fr 1fr}
  .karte{padding-right:2.6rem}
}