/* echo-msg: schlicht, mobil zuerst, Systemschriften, hell/dunkel nach Systemeinstellung. */
:root {
  --grund: #f4f6f8; --flaeche: #ffffff; --text: #17202a; --leise: #5b6875; --linie: #d5dce3;
  --akzent: #1d4f73; --akzent-text: #ffffff; --ein: #ffffff; --aus: #d9e8f3;
  --gut: #1d7a3e; --mittel: #9a6b00; --schlecht: #b3261e; --stopp-grund: #fdecea; --stopp-rand: #b3261e;
  --hinweis-grund: #eef3f7;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0f1418; --flaeche: #182027; --text: #e6ebef; --leise: #9aa7b3; --linie: #2c3843;
    --akzent: #4c93c4; --akzent-text: #0b1116; --ein: #1f2a33; --aus: #1d3a50;
    --gut: #5cc07f; --mittel: #e0b44c; --schlecht: #ff8a80; --stopp-grund: #3a1715; --stopp-rand: #ff8a80;
    --hinweis-grund: #1b252d;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--grund); color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  -webkit-text-size-adjust: 100%;
}
#app { display: flex; flex-direction: column; min-height: 100%; max-width: 760px; margin: 0 auto; }
[hidden] { display: none !important; }

.kopf {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .5rem;
  padding: .6rem .75rem; padding-top: max(.6rem, env(safe-area-inset-top));
  background: var(--akzent); color: var(--akzent-text);
}
.kopf h1 { flex: 1; margin: 0; font-size: 1.1rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf button { color: inherit; background: transparent; border: 1px solid transparent; }
.kopf .status { font-size: .8rem; border-color: currentColor; border-radius: 1rem; padding: .2rem .6rem; white-space: nowrap; }
.kopf .status::before { content: "●"; margin-right: .3rem; }
.kopf .status.gut::before { color: #7fe0a0; }
.kopf .status.mittel::before { color: #ffd166; }
.kopf .status.schlecht::before { color: #ff8a80; }

.banner:empty { display: none; }
.banner { padding: .5rem .75rem 0; display: grid; gap: .5rem; }
.inhalt { flex: 1; padding: .75rem; display: flex; flex-direction: column; gap: .75rem; }
.laden { color: var(--leise); text-align: center; margin-top: 3rem; }

button {
  font: inherit; cursor: pointer; border-radius: .5rem; padding: .55rem .9rem;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text);
  min-height: 2.6rem;
}
button:disabled { opacity: .5; cursor: not-allowed; }
button.haupt { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
button.link { background: none; border: none; color: var(--akzent); padding: .2rem .3rem; min-height: 0; text-decoration: underline; }
button:focus-visible, textarea:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
a { color: var(--akzent); }

input[type="text"], textarea {
  font: inherit; width: 100%; padding: .55rem .65rem; border-radius: .5rem;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text);
}
textarea { resize: vertical; }
label { display: block; font-size: .9rem; color: var(--leise); margin: .6rem 0 .25rem; }
label.zeile { display: flex; gap: .5rem; align-items: center; color: var(--text); }
.zeile { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.zeile input[type="text"] { flex: 1; min-width: 10rem; }

.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: .75rem; padding: .9rem; }
.karte h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.karte p { margin: .4rem 0; }
.klein { font-size: .85rem; color: var(--leise); }
.gut { color: var(--gut); font-weight: 600; }
.fehler { color: var(--schlecht); }
.code { font-family: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", monospace; word-break: break-all; user-select: all; background: var(--hinweis-grund); padding: .5rem; border-radius: .4rem; }
code { font-family: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", monospace; word-break: break-all; }

.hinweis { background: var(--hinweis-grund); border: 1px solid var(--linie); border-radius: .5rem; padding: .5rem .7rem; }
.update { background: var(--hinweis-grund); border: 1px solid var(--akzent); border-radius: .5rem; padding: .5rem .7rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.stopp { background: var(--stopp-grund); border: 2px solid var(--stopp-rand); border-radius: .5rem; padding: .7rem; }
.stopp strong { color: var(--schlecht); display: block; }

.aktionen { display: flex; gap: .5rem; flex-wrap: wrap; }
.kontakte { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.kontakte .leer { color: var(--leise); padding: 1rem .25rem; }
.kontakt {
  width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name zahl" "info zahl";
  text-align: left; padding: .7rem .8rem; background: var(--flaeche);
}
.kontakt.warnung { border: 2px solid var(--stopp-rand); background: var(--stopp-grund); }
.k-name { grid-area: name; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.k-info { grid-area: info; font-size: .85rem; color: var(--leise); }
.kontakt.warnung .k-info { color: var(--schlecht); font-weight: 600; }
.k-ungelesen { grid-area: zahl; align-self: center; background: var(--akzent); color: var(--akzent-text); border-radius: 1rem; min-width: 1.6rem; padding: .1rem .45rem; text-align: center; font-size: .85rem; }

.chat { display: flex; flex-direction: column; gap: .5rem; flex: 1; min-height: 0; }
.chat-banner { display: grid; gap: .5rem; }
.chat-banner:empty { display: none; }
.verlauf { list-style: none; margin: 0; padding: .25rem 0; display: flex; flex-direction: column; gap: .4rem; flex: 1; overflow-y: auto; min-height: 12rem; max-height: calc(100vh - 16rem); max-height: calc(100dvh - 16rem); }
.n { max-width: 85%; padding: .45rem .65rem; border-radius: .8rem; border: 1px solid var(--linie); }
.n.ein { align-self: flex-start; background: var(--ein); border-bottom-left-radius: .2rem; }
.n.aus { align-self: flex-end; background: var(--aus); border-bottom-right-radius: .2rem; }
.n-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.n-zeit { display: block; font-size: .72rem; color: var(--leise); text-align: right; }
.eingabe { display: flex; gap: .5rem; align-items: flex-end; position: sticky; bottom: 0; background: var(--grund); padding: .25rem 0 max(.25rem, env(safe-area-inset-bottom)); }
.eingabe textarea { flex: 1; min-height: 2.8rem; max-height: 10rem; }

.nummer { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem .8rem; margin: .5rem 0; font-family: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", monospace; font-size: 1.35rem; letter-spacing: .06em; text-align: center; }
.nummer span { padding: .2rem 0; border-bottom: 1px solid var(--linie); }
@media (min-width: 560px) { .nummer { grid-template-columns: repeat(4, 1fr); } }

.werte { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .75rem; margin: .25rem 0; }
.werte dt { color: var(--leise); }
.werte dd { margin: 0; overflow-wrap: anywhere; }
.werte dd code { word-break: normal; }