:root {
  --bg: #f6f5f3; --panel: #ffffff; --seiten: #2f3037; --seiten-text: #d8d8de;
  --rand: #e3e1dd; --text: #23242a; --muted: #7b7b85; --akzent: #4a6fa5;
  --mir: #e8f0fb; --system: #fdf3e3;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--text); font-size: 15px;
}

/* ── Login ─────────────────────────────────────────────── */
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login-card {
  background: var(--panel); padding: 2rem 2.25rem; border-radius: 14px; width: min(92vw, 360px);
  box-shadow: 0 8px 30px rgba(0,0,0,.08); border: 1px solid var(--rand);
}
.login-card h1 { margin: 0 0 .2rem; font-size: 1.35rem; }
.login-card .sub { margin: 0 0 1.4rem; color: var(--muted); font-size: .9rem; }
.login-card input, .login-card button {
  width: 100%; padding: .7rem .8rem; border-radius: 9px; border: 1px solid var(--rand);
  font-size: 1rem; font-family: inherit;
}
.login-card button {
  margin-top: .7rem; background: var(--akzent); color: #fff; border: none; cursor: pointer;
}
.login-card .fehler { color: #b23b3b; font-size: .88rem; margin: 0 0 .6rem; }
.login-card .hinweis {
  background: var(--system); border-radius: 8px; padding: .6rem .7rem;
  font-size: .82rem; color: #6b5a33; margin: 0 0 .9rem;
}
.login-card code { font-size: .8rem; }

/* ── Layout ────────────────────────────────────────────── */
.layout { display: grid; grid-template-columns: 240px 1fr; height: 100vh; }

.sidebar {
  background: var(--seiten); color: var(--seiten-text); padding: 1rem .75rem;
  display: flex; flex-direction: column; overflow-y: auto;
}
.marke { font-weight: 700; color: #fff; padding: .2rem .5rem 1rem; font-size: 1rem; }
.gruppe-titel {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: #9a9aa6; margin: .9rem .5rem .3rem;
}
.kanal-link {
  display: flex; align-items: center; gap: .45rem; padding: .42rem .5rem; border-radius: 7px;
  color: var(--seiten-text); text-decoration: none; font-size: .93rem;
}
.kanal-link:hover { background: rgba(255,255,255,.07); }
.kanal-link.aktiv { background: var(--akzent); color: #fff; }
.raute { opacity: .6; }
.punkt { width: 7px; height: 7px; border-radius: 50%; background: #6fbf8b; flex: none; }
.abmelden { margin-top: auto; padding-top: 1rem; }
.abmelden button {
  width: 100%; background: transparent; border: 1px solid #4a4b55; color: #b9b9c2;
  padding: .45rem; border-radius: 8px; cursor: pointer; font-size: .85rem;
}

/* ── Kanal ─────────────────────────────────────────────── */
.haupt { display: flex; flex-direction: column; min-width: 0; }
.kopf { padding: .9rem 1.4rem; border-bottom: 1px solid var(--rand); background: var(--panel); }
.kopf h1 { margin: 0; font-size: 1.05rem; }
.mitglieder { margin: .15rem 0 0; color: var(--muted); font-size: .8rem; }

.verlauf { flex: 1; overflow-y: auto; padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: .85rem; }
.nachricht { max-width: 780px; }
.nachricht .kopfzeile { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .15rem; }
.nachricht .name { font-weight: 600; font-size: .88rem; }
.nachricht .modell { font-size: .68rem; color: var(--muted); }
.nachricht .text {
  background: var(--panel); border: 1px solid var(--rand); border-radius: 10px;
  padding: .6rem .8rem; white-space: pre-wrap; line-height: 1.5;
}
.nachricht.von-mir { align-self: flex-end; }
.nachricht.von-mir .kopfzeile { justify-content: flex-end; }
.nachricht.von-mir .text { background: var(--mir); border-color: #cfe0f5; }
.nachricht.system .text {
  background: var(--system); border-color: #efdcbb; color: #6b5a33; font-size: .87rem;
}
.leer-hinweis { color: var(--muted); }

.tippt { padding: .4rem 1.4rem; color: var(--muted); font-size: .84rem; font-style: italic; }
.tippt.versteckt { display: none; }

.eingabe {
  display: flex; gap: .6rem; padding: .8rem 1.4rem 1.1rem;
  border-top: 1px solid var(--rand); background: var(--panel);
}
.eingabe textarea {
  flex: 1; resize: none; padding: .6rem .75rem; border-radius: 9px;
  border: 1px solid var(--rand); font-family: inherit; font-size: .95rem;
}
.eingabe button {
  padding: 0 1.3rem; border-radius: 9px; border: none; cursor: pointer;
  background: var(--akzent); color: #fff; font-size: .95rem;
}

@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
}

.login-card .fusszeile {
  margin: .9rem 0 0; font-size: .76rem; color: var(--muted); line-height: 1.45;
}
.login-card input + input { margin-top: .5rem; }

/* ── Kopfzeile mit Aktion (Rekrutierung, Firma) ─────────── */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kopf-aktion { display: flex; align-items: center; gap: .5rem; }
.knopf {
  display: inline-block; padding: .5rem .9rem; border-radius: 9px; border: none; cursor: pointer;
  background: var(--akzent); color: #fff; font-size: .88rem; font-family: inherit;
  text-decoration: none; white-space: nowrap;
}
.kopf-aktion a.knopf { background: transparent; color: var(--akzent); border: 1px solid var(--akzent); }

/* ── Firma / Steckbrief ─────────────────────────────────── */
.block { max-width: 780px; margin-bottom: 1.6rem; }
.block h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
            color: var(--muted); margin: 0 0 .6rem; }
.karte {
  display: flex; align-items: baseline; gap: .6rem; text-decoration: none; color: var(--text);
  background: var(--panel); border: 1px solid var(--rand); border-radius: 10px;
  padding: .7rem .9rem; margin-bottom: .5rem;
}
.karte:hover { border-color: var(--akzent); }
.karte-name { font-weight: 600; }
.karte-rolle { color: var(--muted); font-size: .9rem; flex: 1; }
.karte.gedimmt { opacity: .6; }
.feld {
  background: var(--panel); border: 1px solid var(--rand); border-radius: 10px;
  padding: .6rem .8rem; margin: 0 0 .5rem; line-height: 1.5; white-space: pre-wrap;
}
.feld-label { display: block; font-size: .7rem; text-transform: uppercase;
              letter-spacing: .06em; color: var(--muted); margin-bottom: .2rem; }
.warnung { color: #b23b3b; }

/* ── Formularfelder (Steckbrief bearbeiten) ─────────────── */
.eingabefeld {
  width: 100%; max-width: 780px; padding: .55rem .7rem; margin: 0 0 .8rem;
  border: 1px solid var(--rand); border-radius: 9px; background: var(--panel);
  font-family: inherit; font-size: .93rem; line-height: 1.45; color: var(--text);
}
textarea.eingabefeld { resize: vertical; }
.eingabefeld:disabled { background: #f2f1ef; color: var(--muted); }
.unterfeld { color: var(--muted); font-size: .82rem; margin: -.4rem 0 .9rem; max-width: 780px; }
.fehlerfeld { border-color: #e0b4b4; background: #fdf0f0; color: #7d3a3a; }
.hinweisfeld { border-color: #efdcbb; background: var(--system); color: #6b5a33; }
.knopf.still { background: transparent; color: var(--muted); border: 1px solid var(--rand); }
.knopf.still:hover { color: #b23b3b; border-color: #e0b4b4; }
details summary { cursor: pointer; color: var(--akzent); font-size: .85rem; margin-top: .4rem; }
pre.probe {
  white-space: pre-wrap; background: #faf9f7; border: 1px solid var(--rand); border-radius: 8px;
  padding: .7rem .8rem; font-size: .86rem; line-height: 1.5; margin: .5rem 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Gruppen & Diskussion ───────────────────────────────── */
.gruppe-titel .plus {
  float: right; color: #9a9aa6; text-decoration: none; font-size: .95rem; line-height: 1;
  padding: 0 .2rem;
}
.gruppe-titel .plus:hover { color: #fff; }
.leise { color: var(--muted); font-size: .78rem; }
.karte.auswahl { cursor: pointer; }
.karte.auswahl input { margin-right: .4rem; }
.diskussion {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  padding: .6rem 1.4rem; border-top: 1px solid var(--rand); background: #faf9f7;
}
.diskussion input[type=text] {
  flex: 1; min-width: 220px; padding: .45rem .7rem; border-radius: 8px;
  border: 1px solid var(--rand); font-family: inherit; font-size: .9rem;
}
.diskussion label { color: var(--muted); font-size: .82rem; }
.diskussion input[type=number] {
  width: 3.4rem; padding: .35rem .4rem; border-radius: 7px; border: 1px solid var(--rand);
  font-family: inherit;
}

.login-card .qr {
  display: block; margin: .2rem auto 1rem; width: 240px; height: 240px;
  background: #fff; border: 1px solid var(--rand); border-radius: 10px; padding: .4rem;
}
.login-card details { margin-bottom: .8rem; }
.login-card details summary { cursor: pointer; color: var(--akzent); font-size: .85rem; }
.login-card code { word-break: break-all; }

/* ── Handy: Kanalwechsel über ein aufklappbares Menü ─────── */
.mobilmenue { display: none; }
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100dvh; }
  .sidebar { display: none; }

  .mobilmenue {
    display: block; position: sticky; top: 0; z-index: 30;
    background: var(--seiten); color: var(--seiten-text);
  }
  .mobilmenue > summary {
    display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem;
    cursor: pointer; list-style: none; font-weight: 600; color: #fff;
  }
  .mobilmenue > summary::-webkit-details-marker { display: none; }
  .mobilmenue .balken { font-size: 1.1rem; }
  .mobilmenue .titel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobilmenue .wechseln {
    font-size: .72rem; font-weight: 400; color: #9a9aa6; border: 1px solid #4a4b55;
    border-radius: 999px; padding: .1rem .5rem; flex: none;
  }
  .mobilmenue[open] .wechseln { color: #fff; border-color: #6f7080; }
  .mobilnav {
    padding: .3rem .6rem .8rem; max-height: 65dvh; overflow-y: auto;
    border-top: 1px solid #43444d;
  }
  .mobilnav .abmelden { margin-top: .8rem; }

  .kopf { padding: .7rem .9rem; }
  .kopf h1 { font-size: .98rem; }
  .verlauf { padding: .8rem .9rem; }
  .eingabe { padding: .6rem .9rem .8rem; }
  .diskussion { padding: .5rem .9rem; }
  .nachricht { max-width: 100%; }
  .kopf-aktion { flex-wrap: wrap; gap: .4rem; }
  .knopf { font-size: .8rem; padding: .42rem .7rem; }
  .block, .feld, .eingabefeld { max-width: 100%; }
}

.kopf-aktion form { display: flex; gap: .4rem; align-items: center; }
.eingabefeld.schmal { width: auto; max-width: 15rem; margin: 0; padding: .4rem .5rem; font-size: .85rem; }