/* Germimi — WebRTC-Edition. Indigo-Akzent, Graustufen leicht ins Violette. */
:root {
  --bg:#f5f3fb; --app:#ffffff; --ink:#1e1b2e; --muted:#726d88;
  --line:#e8e4f3; --accent:#6a5fd0; --accent2:#8a80e0; --accent-sk:#efecfb;
  --mine:#6a5fd0; --mine-ink:#ffffff; --other:#f2effb;
  --ring:rgba(106,95,208,.28); --shadow:0 18px 50px rgba(30,20,60,.12);
  --good:#2f8f6b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#100e1a; --app:#191527; --ink:#ece9f6; --muted:#9a94b3;
    --line:#2a2540; --accent:#a79cf5; --accent2:#8f84e6; --accent-sk:#241f3a;
    --mine:#6a5fd0; --mine-ink:#ffffff; --other:#221d33;
    --ring:rgba(167,156,245,.3); --shadow:0 20px 60px rgba(0,0,0,.6);
    --good:#5cc79b;
  }
}
:root[data-theme="light"] {
  --bg:#f5f3fb; --app:#ffffff; --ink:#1e1b2e; --muted:#726d88; --line:#e8e4f3;
  --accent:#6a5fd0; --accent2:#8a80e0; --accent-sk:#efecfb; --mine:#6a5fd0;
  --mine-ink:#fff; --other:#f2effb; --ring:rgba(106,95,208,.28); --good:#2f8f6b;
}
:root[data-theme="dark"] {
  --bg:#100e1a; --app:#191527; --ink:#ece9f6; --muted:#9a94b3; --line:#2a2540;
  --accent:#a79cf5; --accent2:#8f84e6; --accent-sk:#241f3a; --mine:#6a5fd0;
  --mine-ink:#fff; --other:#221d33; --ring:rgba(167,156,245,.3); --good:#5cc79b;
}

* { box-sizing:border-box; }
html { color-scheme:light dark; }
body {
  margin:0; height:100dvh; overflow:hidden; background:var(--bg); color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.app { height:100dvh; display:flex; }
.screen { flex:1; min-width:0; display:flex; flex-direction:column; }
.screen[hidden] { display:none; }
.field {
  width:100%; padding:.75rem .9rem; border:1px solid var(--line); border-radius:12px;
  background:var(--bg); color:var(--ink); font-size:1rem;
}
.field:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--ring); }
.btn {
  border:0; border-radius:12px; padding:.75rem 1.15rem; background:var(--accent);
  color:#fff; font-weight:600; font-size:1rem; cursor:pointer; white-space:nowrap;
  transition:filter .15s, transform .08s;
}
.btn:hover { filter:brightness(1.07); }
.btn:active { transform:translateY(1px); }
.btn.ghost { background:var(--app); color:var(--ink); border:1px solid var(--line); }
.btn.ghost:hover { border-color:var(--accent); color:var(--accent); filter:none; }
.link { border:0; background:none; padding:0; color:var(--accent); font:inherit; cursor:pointer; text-decoration:underline; }
.icon-btn {
  flex:none; width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); border-radius:11px; background:var(--app); color:var(--ink);
}
.icon-btn:hover { border-color:var(--accent); color:var(--accent); }
.brand { flex:none; display:grid; place-items:center; color:var(--accent); }
.brand .logo { border-radius:7px; display:block; }
.muted { color:var(--muted); }

/* ------------------------------------------------------------------- Gate */
#gate { align-items:center; justify-content:center; }
.gate-inner { width:min(400px,92vw); padding:2rem 1.25rem; text-align:center; }
.brand-lg { display:grid; place-items:center; margin-bottom:.6rem; }
.gate-inner h1 { font-size:2rem; letter-spacing:-.03em; margin:0 0 .3rem; }
.gate-inner .sub { color:var(--muted); margin:0 0 1.4rem; }
.gate-form { display:flex; gap:.5rem; margin-bottom:1.4rem; }
.points { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; text-align:left; }
.points li { position:relative; padding-left:1.4rem; font-size:.86rem; color:var(--muted); line-height:1.4; }
.points li::before {
  content:""; position:absolute; left:0; top:.45em; width:8px; height:8px; border-radius:50%;
  background:var(--accent);
}

/* ------------------------------------------------------------------ Lobby */
.lobby-head, .bar {
  display:flex; align-items:center; gap:.7rem; flex:none;
  height:calc(58px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 1.1rem 0;
  border-bottom:1px solid var(--line); background:var(--app);
}
.lobby-head b { font-size:1.05rem; letter-spacing:-.01em; }
.lobby-head .me { margin-left:auto; font-size:.82rem; color:var(--muted); }
.lobby-head .me strong { color:var(--ink); }
.lobby-body {
  flex:1; overflow-y:auto; padding:1.1rem;
  width:100%; max-width:720px; margin:0 auto;
  padding-bottom:calc(1.1rem + env(safe-area-inset-bottom));
}
.create { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.6rem; }
.create-row { display:flex; gap:.5rem; }
.secret-btn { display:inline-flex; align-items:center; gap:.5rem; justify-content:center; }
.list-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.6rem; }
.list-head span:first-child { font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
#list-status { font-size:.8rem; }
.rooms { display:flex; flex-direction:column; gap:.5rem; }
.room {
  display:flex; align-items:center; gap:.8rem; padding:.85rem 1rem; cursor:pointer;
  border:1px solid var(--line); border-radius:13px; background:var(--app); text-align:left;
  transition:border-color .15s, transform .08s;
}
.room:hover { border-color:var(--accent); }
.room:active { transform:translateY(1px); }
.room .rn { font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room .rc {
  flex:none; display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem;
  color:var(--good); font-variant-numeric:tabular-nums;
}
.room .rc .live { width:7px; height:7px; border-radius:50%; background:var(--good); }
.rooms-empty { color:var(--muted); font-size:.9rem; padding:1.6rem .5rem; text-align:center; }

/* ------------------------------------------------------------------- Chat */
.bar-title { display:flex; flex-direction:column; min-width:0; margin-right:auto; }
.bar-title b { letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.presence { font-size:.74rem; color:var(--muted); }
.presence.on { color:var(--good); }
.feed {
  flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.55rem;
  width:100%; max-width:820px; margin:0 auto;
}
.sys { align-self:center; font-size:.76rem; color:var(--muted); background:var(--other); padding:.3rem .7rem; border-radius:999px; }
.msg { max-width:80%; display:flex; flex-direction:column; gap:.15rem; animation:rise .16s ease; }
@keyframes rise { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none;} }
.msg.mine { align-self:flex-end; align-items:flex-end; }
.msg .who { font-size:.72rem; font-weight:700; padding:0 .35rem; color:hsl(var(--hue,265) 45% 45%); }
.msg.mine .who { color:var(--accent); }
.bubble {
  background:var(--other); padding:.5rem .75rem; border-radius:15px; border-bottom-left-radius:5px;
  word-break:break-word; white-space:pre-wrap;
}
.msg.mine .bubble { background:var(--mine); color:var(--mine-ink); border-radius:15px; border-bottom-right-radius:5px; }
.msg .t { font-size:.64rem; color:var(--muted); padding:0 .35rem; }

.composer {
  flex:none; display:flex; gap:.5rem; padding:.7rem;
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:var(--app);
  width:100%; max-width:820px; margin:0 auto;
}
.text { flex:1; min-width:0; padding:.7rem .9rem; border:1px solid var(--line); border-radius:999px; background:var(--bg); color:var(--ink); font-size:1rem; }
.text:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.send { flex:none; width:44px; height:44px; border:0; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; cursor:pointer; }
.send:hover { filter:brightness(1.07); }

/* ------------------------------------------------------------------ Toast */
.toast {
  position:fixed; left:50%; bottom:5.5rem; transform:translateX(-50%) translateY(1rem);
  background:var(--ink); color:var(--app); padding:.6rem 1rem; border-radius:10px;
  font-size:.86rem; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:50;
}
.toast.show { opacity:1; transform:translateX(-50%); }

@media (max-width:640px) {
  .lobby-head .me { display:none; }
  .msg { max-width:88%; }
  .text { font-size:16px; }  /* verhindert iOS-Zoom beim Fokus */
}
@media (prefers-reduced-motion: reduce) { .msg { animation:none; } }

/* Farbton je Gesprächspartner ohne inline-Stil (CSP-freundlich). */
.h0{--hue:265}.h1{--hue:210}.h2{--hue:150}.h3{--hue:25}
.h4{--hue:330}.h5{--hue:190}.h6{--hue:95}.h7{--hue:300}

/* ---------------------------------------------------------- Anruf-Bühne */
.stage { flex:none; background:#0d0b16; border-bottom:1px solid var(--line); }
.stage[hidden] { display:none; }
.tiles {
  display:grid; gap:.4rem; padding:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  max-height:42dvh; overflow:hidden;
}
.tile { position:relative; aspect-ratio:4/3; background:#171327; border-radius:12px; overflow:hidden; }
.tile video { width:100%; height:100%; object-fit:cover; display:block; }
.tile .cap {
  position:absolute; left:.4rem; bottom:.4rem; font-size:.72rem; color:#fff;
  background:rgba(0,0,0,.55); padding:.15rem .45rem; border-radius:6px;
}
/* Nur Ton: statt schwarzem Rechteck ein ruhiges Zeichen */
.tile.audio-only::after {
  content:"♪"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:2rem; color:var(--accent); background:#171327;
}
.call-bar { display:flex; gap:.6rem; justify-content:center; padding:.6rem; }
.call-btn {
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; background:#2a2540; color:#fff;
}
.call-btn.off { background:#4a3f5f; color:#a79cf5; }
.call-btn.end { background:#c0413c; }
.call-btn:hover { filter:brightness(1.12); }

/* ------------------------------------------------------- Composer-Extras */
.composer { position:relative; align-items:center; }
.round {
  flex:none; width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  background:transparent; color:var(--muted); display:grid; place-items:center;
}
.round:hover { color:var(--accent); background:var(--other); }
#voice-btn.rec { color:#fff; background:#c0413c; }
.more {
  display:none; position:absolute; bottom:calc(100% + .5rem); left:.6rem; z-index:40;
  background:var(--app); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:.4rem; min-width:190px;
}
.more.open { display:block; }
.more-row { display:flex; align-items:center; gap:.6rem; padding:.6rem .7rem; border-radius:10px; cursor:pointer; font-size:.9rem; }
.more-row:hover { background:var(--other); }
.emoji-panel {
  display:none; position:absolute; bottom:calc(100% + .5rem); right:.6rem; z-index:40;
  background:var(--app); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:.5rem; width:min(320px,calc(100% - 1.2rem)); max-height:220px; overflow-y:auto;
  grid-template-columns:repeat(8,1fr); gap:.15rem;
}
.emoji-panel.open { display:grid; }
.emoji-panel button { border:0; background:none; font-size:1.25rem; cursor:pointer; padding:.2rem; border-radius:8px; }
.emoji-panel button:hover { background:var(--other); }

/* --------------------------------------------------------------- Medien */
.media-img { max-width:100%; max-height:300px; border-radius:10px; display:block; }
.media-audio { width:220px; max-width:100%; display:block; }
.filechip { color:inherit; text-decoration:none; font-weight:600; display:inline-block; }
.msg.mine .filechip { color:#fff; }


/* Kopfzeile auf dieselbe Spaltenbreite wie Verlauf/Eingabe zentrieren. */
.bar > * { position:relative; }
.bar { padding-left:max(1.1rem, calc((100% - 820px) / 2)); padding-right:max(1.1rem, calc((100% - 820px) / 2)); }
.lobby-head { padding-left:max(1.1rem, calc((100% - 720px) / 2)); padding-right:max(1.1rem, calc((100% - 720px) / 2)); }
.stage .tiles, .call-bar { width:100%; max-width:820px; margin-inline:auto; }

/* ---------- Videokacheln: nichts abschneiden ----------
   cover schnitt Köpfe ab. contain zeigt das ganze Bild; der dunkle Grund
   füllt den Rest. Das eigene Bild wird gespiegelt, wie man sich kennt. */
.stage { display:flex; flex-direction:column; }
.tiles {
  max-height:min(46dvh, 420px);
  align-content:center; justify-content:center;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
}
.tile {
  aspect-ratio:16/9; background:#0d0b16;
  max-height:min(42dvh, 380px); margin-inline:auto; width:100%;
}
.tile video { object-fit:contain; background:#0d0b16; }
.tile[data-id="me"] video { transform:scaleX(-1); }   /* Selbstbild spiegeln */
/* Allein im Anruf: die eigene Kachel nicht bildschirmfüllend aufblasen */
.tiles:has(.tile:only-child) { grid-template-columns:minmax(0, 520px); }

@media (max-width:640px) {
  .tiles { max-height:38dvh; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
  .tile { max-height:34dvh; }
  .call-btn { width:52px; height:52px; }   /* am Telefon größer treffen */
}

/* ================= Anruf-Bühne, zweite Fassung =================
   Gegenüber groß, eigenes Bild klein schwebend in der Ecke, Bedienleiste
   schwebt über dem Bild statt darunter zu kleben. */
.stage {
  position:relative; background:#0b0916;
  border-bottom:1px solid var(--line);
}
.stage .tiles {
  display:grid; gap:.5rem; padding:.75rem;
  max-height:min(52dvh, 460px); align-content:center; justify-items:center;
}
.stage .tiles[data-remote="0"] { grid-template-columns:minmax(0,1fr); }
.stage .tiles[data-remote="1"] { grid-template-columns:minmax(0,1fr); }
.stage .tiles[data-remote="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
.stage .tiles[data-remote="3"],
.stage .tiles[data-remote="4"] { grid-template-columns:repeat(2,minmax(0,1fr)); }

/* Gegenstelle: großes Bild, weiche Ecken, ruhiger Rahmen */
.stage .tile {
  position:relative; width:100%; max-width:100%;
  aspect-ratio:16/9; max-height:min(48dvh,420px);
  border-radius:16px; overflow:hidden; background:#12101f;
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}
.stage .tile video { width:100%; height:100%; object-fit:contain; display:block; }

/* Eigenes Bild: kleines schwebendes Fenster unten rechts */
.stage .tile.self {
  position:absolute; right:.9rem; bottom:5.2rem; z-index:5;
  width:clamp(110px, 22vw, 190px); aspect-ratio:3/4; max-height:none;
  border:2px solid rgba(255,255,255,.22); border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.55);
}
.stage .tile.self video { object-fit:cover; }   /* klein: füllen ist hier richtig */
.stage .tile.self .cap { font-size:.64rem; padding:.1rem .35rem; }

/* Namensschild dezenter */
.stage .tile .cap {
  background:rgba(10,8,20,.62); backdrop-filter:blur(6px);
  border-radius:8px; letter-spacing:.01em; font-weight:600;
}

/* Bedienleiste schwebt über dem Bild */
.stage .call-bar {
  position:absolute; left:50%; bottom:1rem; transform:translateX(-50%);
  display:flex; gap:.5rem; padding:.45rem;
  background:rgba(18,15,32,.72); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12); border-radius:999px; z-index:6;
  box-shadow:0 8px 26px rgba(0,0,0,.5);
}
.stage .call-btn {
  width:48px; height:48px; background:rgba(255,255,255,.12); color:#fff;
  transition:background .15s, transform .08s;
}
.stage .call-btn:hover { background:rgba(255,255,255,.22); }
.stage .call-btn:active { transform:translateY(1px); }
.stage .call-btn.off { background:rgba(255,255,255,.28); color:#cfc7ff; }
.stage .call-btn.end { background:#d0463f; }
.stage .call-btn.end:hover { background:#e05149; }

/* Nur Ton: ruhige Fläche statt schwarzem Loch */
.stage .tile.audio-only::after {
  content:""; position:absolute; inset:0; background:
    radial-gradient(circle at 50% 45%, rgba(106,95,208,.35), transparent 60%), #12101f;
}
.stage .tile.audio-only .cap { z-index:2; }

@media (max-width:640px) {
  .stage .tiles { max-height:44dvh; padding:.5rem; }
  .stage .tile { border-radius:14px; }
  .stage .tile.self { right:.6rem; bottom:4.8rem; width:clamp(92px,26vw,130px); }
  .stage .call-btn { width:52px; height:52px; }
}

/* ================= Animierte Erklärung auf dem Startbildschirm =================
   Ein 12-Sekunden-Zyklus in vier Abschnitten: anmelden, vorstellen, Weg
   aushandeln, direkt verbunden. Reine CSS-Animation – kein Skript nötig. */
.howto { margin:0; text-align:left; }
.howto-svg { width:100%; height:auto; display:block; overflow:visible; }

/* Wege */
.howto-svg .w { fill:none; stroke:var(--line); stroke-width:2.5; stroke-linecap:round; }
.howto-svg .w-up   { animation:w-sig 12s infinite; }
.howto-svg .w-down { animation:w-sig 12s infinite; animation-delay:0s; }
.howto-svg .w-direct {
  stroke-dasharray:216; stroke-dashoffset:216; stroke-width:3;
  animation:w-direct 12s infinite;
}
@keyframes w-sig {
  0%, 4%   { stroke:var(--line); }
  8%, 48%  { stroke:var(--accent); }
  60%,100% { stroke:var(--line); }
}
@keyframes w-direct {
  0%, 52%   { stroke-dashoffset:216; stroke:var(--line); }
  66%       { stroke-dashoffset:0;   stroke:#2f8f6b; }
  100%      { stroke-dashoffset:0;   stroke:#2f8f6b; }
}

/* Geräte und Server */
.howto-svg .node rect { fill:var(--app); stroke:var(--line); stroke-width:2; }
.howto-svg .glyph { fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; }
.howto-svg .glyph.dot { fill:var(--muted); stroke:none; }
.howto-svg .n-a rect, .howto-svg .n-b rect { animation:node-hot 12s infinite; }
.howto-svg .n-srv rect { animation:srv-fade 12s infinite; }
.howto-svg .n-srv .glyph { animation:srv-fade 12s infinite; }
@keyframes node-hot {
  0%, 50%   { stroke:var(--line); }
  64%,100%  { stroke:#2f8f6b; }
}
@keyframes srv-fade {
  0%, 48%   { opacity:1; }
  64%,100%  { opacity:.32; }   /* ab hier ist der Server außen vor */
}

/* Wandernde Pakete auf ihren Bahnen */
.howto-svg .pkt { fill:var(--accent); opacity:0; }
.howto-svg .p1 { offset-path:path("M52 84 Q 100 34 142 44"); animation:run 12s infinite; }
.howto-svg .p2 { offset-path:path("M178 44 Q 220 34 268 84"); animation:run 12s infinite; animation-delay:2.4s; }
.howto-svg .p3 {
  offset-path:path("M56 116 L 264 116"); fill:#2f8f6b;
  animation:run-direct 12s infinite;
}
@keyframes run {
  0%      { offset-distance:0%;   opacity:0; }
  3%      { opacity:1; }
  17%     { offset-distance:100%; opacity:1; }
  21%,100%{ opacity:0; }
}
@keyframes run-direct {
  0%, 66%  { offset-distance:0%; opacity:0; }
  70%      { opacity:1; }
  88%      { offset-distance:100%; opacity:1; }
  92%,100% { opacity:0; }
}

/* Schloss erscheint, sobald die Direktleitung steht */
.howto-svg .lock { opacity:0; animation:lock-in 12s infinite; }
.howto-svg .lock rect { fill:#2f8f6b; stroke:none; }
.howto-svg .lock path { fill:none; stroke:#2f8f6b; stroke-width:2.5; stroke-linecap:round; }
@keyframes lock-in {
  0%, 62%  { opacity:0; transform:translateY(4px); }
  70%,100% { opacity:1; transform:none; }
}

/* Beschriftung: vier Texte, die im Takt der Animation wechseln */
.howto-caps { position:relative; min-height:4.6em; margin-top:.4rem; }
.howto-caps .cap {
  position:absolute; inset:0; opacity:0;
  font-size:.84rem; color:var(--muted); line-height:1.4;
  animation:cap 12s infinite;
}
.howto-caps .cap b { display:block; color:var(--ink); font-size:.88rem; margin-bottom:.15rem; }
.howto-caps .cap1 { animation-delay:0s; }
.howto-caps .cap2 { animation-delay:2.6s; }
.howto-caps .cap3 { animation-delay:5.2s; }
.howto-caps .cap4 { animation-delay:7.4s; }
@keyframes cap {
  0%       { opacity:0; transform:translateY(4px); }
  4%, 18%  { opacity:1; transform:none; }
  23%,100% { opacity:0; }
}
/* Der letzte Text bleibt länger stehen – er ist die Kernaussage. */
.howto-caps .cap4 { animation-name:cap-last; }
@keyframes cap-last {
  0%       { opacity:0; transform:translateY(4px); }
  4%, 34%  { opacity:1; transform:none; }
  39%,100% { opacity:0; }
}

/* Ohne Bewegung: Endzustand zeigen, nichts blinkt. */
@media (prefers-reduced-motion: reduce) {
  .howto-svg *, .howto-caps .cap { animation:none !important; }
  .howto-svg .w-direct { stroke-dashoffset:0; stroke:#2f8f6b; }
  .howto-svg .n-srv rect, .howto-svg .n-srv .glyph { opacity:.32; }
  .howto-svg .lock { opacity:1; }
  .howto-caps { min-height:0; }
  .howto-caps .cap { position:static; opacity:1; display:block; margin-bottom:.5rem; }
  .howto-caps .cap1, .howto-caps .cap2, .howto-caps .cap3 { display:none; }
}

/* ================= Wer ist im Raum ================= */
.people {
  flex:none; display:flex; gap:.4rem; overflow-x:auto; padding:.55rem 1rem;
  border-bottom:1px solid var(--line); background:var(--app);
  width:100%; max-width:820px; margin-inline:auto;
  scrollbar-width:none;
}
.people::-webkit-scrollbar { display:none; }
.people:empty { display:none; }
.person {
  flex:none; display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .6rem .25rem .25rem; border-radius:999px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink);
  font:600 .78rem/1 var(--sans); cursor:pointer;
  transition:border-color .15s, background .15s;
}
.person.self { cursor:default; }
.person:not(.self):hover { border-color:var(--accent); }
.person.dm { border-color:var(--accent); background:var(--accent-sk); }
.pav {
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:hsl(var(--hue,265) 42% 46%); color:#fff; font-size:.68rem; font-weight:700;
}
.person.self .pav { background:var(--accent); }
.pnm { max-width:11ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ================= Privat schreiben ================= */
.dm-bar {
  flex:none; display:flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem; font-size:.8rem; color:var(--accent);
  background:var(--accent-sk); border-top:1px solid var(--line);
  width:100%; max-width:820px; margin-inline:auto;
}
.dm-bar[hidden] { display:none; }
.dm-bar b { color:var(--ink); }
.dm-bar button {
  margin-left:auto; border:0; background:none; color:var(--muted);
  cursor:pointer; font-size:1rem; line-height:1; padding:.2rem .3rem;
}
.dm-bar button:hover { color:var(--ink); }

/* Private Nachricht: gestrichelter Rahmen, damit sie sich abhebt */
.msg.priv .bubble { border:1.5px dashed var(--accent); background:var(--accent-sk); }
.msg.priv.mine .bubble { background:var(--mine); border-color:rgba(255,255,255,.55); }
.msg.priv .t { color:var(--accent); }

@media (max-width:640px) { .people { padding:.5rem .7rem; } }

/* ============ Anruf-Raster, dritte Fassung ============
   Vorher wurden bei mehr als zwei Personen Kacheln abgeschnitten und die
   Bedienleiste lag darüber. Jetzt: automatisches Raster, alle sichtbar,
   bei vielen Personen scrollbar – und unten bleibt Platz für die Leiste. */
.stage .tiles {
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important;
  gap:.5rem;
  align-content:start; justify-items:stretch;
  padding:.75rem .75rem 4.6rem;
  max-height:min(56dvh, 480px);
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent;
}
.stage .tiles::-webkit-scrollbar { width:8px; }
.stage .tiles::-webkit-scrollbar-thumb { background:rgba(255,255,255,.22); border-radius:8px; }

.stage .tile {
  width:100%; max-width:none; max-height:none;
  aspect-ratio:4/3; margin:0;
}
/* Allein oder zu zweit darf das Bild größer stehen */
.stage .tiles[data-remote="0"],
.stage .tiles[data-remote="1"] { grid-template-columns:minmax(0, 560px) !important; justify-content:center; }
.stage .tiles[data-remote="0"] .tile,
.stage .tiles[data-remote="1"] .tile { aspect-ratio:16/9; }

/* Eigenes Bild bleibt schwebend und wird vom Raster nicht erfasst */
.stage .tile.self { position:absolute; margin:0; }

/* Hinweis am oberen Rand, wenn nicht alle ins Bild passen */
.stage .tiles[data-remote="5"],
.stage .tiles[data-remote="6"],
.stage .tiles[data-remote="7"],
.stage .tiles[data-remote="8"] { max-height:min(60dvh, 520px); }

@media (max-width:640px) {
  .stage .tiles {
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 130px), 1fr)) !important;
    max-height:46dvh; padding:.5rem .5rem 4.4rem;
  }
  .stage .tiles[data-remote="0"],
  .stage .tiles[data-remote="1"] { grid-template-columns:minmax(0,1fr) !important; }
}

/* ---------- Lobby: wer ist im Raum ---------- */
.rleft { display:flex; flex-direction:column; gap:.15rem; min-width:0; flex:1; }
.rnames { font-size:.76rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rnames:empty { display:none; }
.rwho { display:flex; flex:none; margin-right:.4rem; }
.rav {
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:.7rem; font-weight:700; color:#fff; border:2px solid var(--app);
  background:hsl(var(--hue,265) 42% 46%); margin-left:-8px;
}
.rav:first-child { margin-left:0; }
.rav.more { background:var(--muted); }

/* ---------- Stummschaltung eindeutig sichtbar ---------- */
.call-btn { position:relative; }
.call-btn.off::after {
  content:""; position:absolute; left:50%; top:50%;
  width:30px; height:2.5px; border-radius:2px; background:currentColor;
  transform:translate(-50%,-50%) rotate(-45deg);
  box-shadow:0 0 0 1.5px rgba(0,0,0,.35);
}
.stage .call-btn.off { background:rgba(255,255,255,.30); color:#ffd9d6; }
.stage .call-btn.off:hover { background:rgba(255,255,255,.4); }

/* ==================================================================
   Seitenleisten-Aufbau: links Räume + Anwesende, rechts das Gespräch
   ================================================================== */
.app { display:flex; height:100dvh; }
#gate.screen { flex:1; }

.side {
  flex:none; width:280px; display:flex; flex-direction:column;
  border-right:1px solid var(--line); background:var(--app); min-height:0;
}
.side[hidden] { display:none; }
.side-head {
  flex:none; display:flex; align-items:center; gap:.6rem;
  height:calc(58px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 1rem 0;
  border-bottom:1px solid var(--line);
}
.side-head b { font-size:1.02rem; letter-spacing:-.01em; }
.side-head .icon-btn { margin-left:auto; }
.side-top { flex:none; padding:.75rem; display:flex; flex-direction:column; gap:.5rem; }
.searchrow { position:relative; display:flex; align-items:center; }
.searchrow .si { position:absolute; left:.7rem; color:var(--muted); pointer-events:none; }
.sfield {
  width:100%; padding:.6rem .8rem .6rem 2.1rem; font-size:.92rem;
  border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink);
}
.sfield:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.secret-btn { padding:.55rem .8rem; font-size:.86rem; }

.side-scroll { flex:1; overflow-y:auto; padding:0 .75rem .75rem; min-height:0; }
.side-sec + .side-sec { margin-top:1.1rem; }
.side-lbl {
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin:0 .2rem .45rem;
}
.side-lbl .muted { font-weight:600; letter-spacing:0; text-transform:none; font-size:.76rem; }
.side-foot {
  flex:none; padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); font-size:.8rem; color:var(--muted);
}
.side-foot strong { color:var(--ink); }

/* Raumzeilen kompakter in der Leiste */
.side .room { padding:.6rem .7rem; gap:.5rem; }
.side .room.active { border-color:var(--accent); background:var(--accent-sk); }
.side .rav { width:22px; height:22px; font-size:.62rem; }
.side .rnames { font-size:.72rem; }

/* Anwesende untereinander statt als Streifen */
.side .people {
  display:flex; flex-direction:column; gap:.3rem; padding:0; border:0;
  background:none; max-width:none; margin:0; overflow:visible;
}
.side .person { width:100%; justify-content:flex-start; padding:.4rem .6rem .4rem .4rem; }
.side .pnm { max-width:none; }

/* Leerzustand rechts */
.empty-state { display:flex; align-items:center; justify-content:center; position:relative; padding:2rem; }
.empty-inner { text-align:center; max-width:38ch; }
.empty-inner .brand.big { display:grid; place-items:center; margin-bottom:.8rem; }
.empty-inner .brand.big .logo { width:48px; height:48px; }
.empty-inner h2 { margin:0 0 .4rem; font-size:1.3rem; letter-spacing:-.02em; }
.empty-inner p { margin:0; color:var(--muted); font-size:.92rem; }
.empty-menu { position:absolute; left:1rem; top:1rem; }
.only-mobile { display:none; }

/* Suche im Gespräch */
.qbox {
  flex:none; display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem;
  border-bottom:1px solid var(--line); background:var(--other); color:var(--muted);
  width:100%; max-width:820px; margin-inline:auto;
}
.qbox[hidden] { display:none; }
.qbox input { flex:1; border:0; background:none; color:var(--ink); font-size:.92rem; outline:none; }
.qbox button { border:0; background:none; color:var(--muted); cursor:pointer; font-size:1rem; padding:.2rem .3rem; }
.qbox button:hover { color:var(--ink); }
.msg.dim { opacity:.28; }
.msg.hit .bubble { outline:2px solid var(--accent); outline-offset:2px; }

/* Im Anruf: Video bekommt die Bühne, der Chat rückt weg */
body.in-call .feed,
body.in-call .composer,
body.in-call .dm-bar,
body.in-call .qbox { display:none; }
body.in-call .stage { flex:1; }
body.in-call .stage .tiles { max-height:none; height:100%; align-content:center; }

/* Telefon: Seitenleiste als Schublade */
@media (max-width:900px) {
  .only-mobile { display:grid; }
  .side {
    position:fixed; left:0; top:0; bottom:0; z-index:60; width:min(86vw,320px);
    transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--shadow);
  }
  body.drawer .side { transform:none; }
  body.drawer::after {
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:55;
  }
  .side[hidden] { display:flex; }          /* nur ausgeblendet durch die Verschiebung */
  #gate:not([hidden]) ~ .side { display:none; }
}

/* Online-Liste: Name plus wo die Person gerade ist */
.pwrap { display:flex; flex-direction:column; align-items:flex-start; gap:.05rem; min-width:0; }
.pwhere { font-size:.68rem; color:var(--muted); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:14ch; }
.rooms-empty.small { padding:.6rem .4rem; font-size:.8rem; text-align:left; }

/* Einladung in einen privaten Raum */
.invite {
  position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%);
  display:flex; align-items:center; gap:.7rem; z-index:80;
  background:var(--app); color:var(--ink); border:1px solid var(--accent);
  border-radius:14px; padding:.7rem .9rem; box-shadow:var(--shadow);
  font-size:.9rem; max-width:calc(100vw - 2rem);
}
.invite[hidden] { display:none; }
.invite svg { color:var(--accent); flex:none; }
.invite .btn { padding:.45rem .85rem; font-size:.85rem; }
.invite .link { font-size:.82rem; color:var(--muted); }

/* ============ Anruf: hochkant, rund, mit Schreibmöglichkeit ============ */
/* Kacheln stehen hochkant – Menschen sind höher als breit, und auf dem
   Telefon kommt genau dieses Format aus der Kamera. */
.stage .tile,
.stage .tiles[data-remote="0"] .tile,
.stage .tiles[data-remote="1"] .tile {
  aspect-ratio:3/4 !important;
  border-radius:18px !important;
  overflow:hidden;
}
.stage .tile video { border-radius:inherit; }
.stage .tiles[data-remote="0"],
.stage .tiles[data-remote="1"] { grid-template-columns:minmax(0, 340px) !important; }
.stage .tiles { justify-items:center; }
.stage .tiles > .tile { max-width:340px; }

/* Eigenes Bild klein, gleiche runde Form */
.stage .tile.self { border-radius:16px !important; aspect-ratio:3/4 !important; }

/* Der Chat bleibt im Anruf erreichbar: Eingabe unten, Nachrichten fliegen
   kurz über dem Video ein. */
body.in-call .composer { display:flex; background:rgba(18,15,32,.86); border-top:0; }
body.in-call .composer .text { background:rgba(255,255,255,.12); border-color:transparent; color:#fff; }
body.in-call .composer .text::placeholder { color:rgba(255,255,255,.6); }
body.in-call .composer .round { color:rgba(255,255,255,.75); }
body.in-call .composer .round:hover { background:rgba(255,255,255,.15); color:#fff; }
body.in-call .stage { flex:1; min-height:0; }

.callmsgs {
  position:absolute; left:0; right:0; bottom:5.4rem; z-index:7;
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  pointer-events:none; padding:0 1rem;
}
.cmsg {
  max-width:min(90%, 460px); display:flex; gap:.45rem; align-items:baseline;
  background:rgba(12,10,22,.72); backdrop-filter:blur(10px); color:#fff;
  padding:.4rem .7rem; border-radius:12px; font-size:.86rem;
  transition:opacity .5s; animation:cmsg-in .2s ease;
}
.cmsg.mine { background:rgba(106,95,208,.85); }
.cmsg b { font-size:.74rem; opacity:.8; flex:none; }
.cmsg.fade { opacity:0; }
@keyframes cmsg-in { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none;} }

@media (max-width:640px) {
  .stage .tiles > .tile { max-width:none; }
  .stage .tiles[data-remote="0"],
  .stage .tiles[data-remote="1"] { grid-template-columns:minmax(0,1fr) !important; }
  .callmsgs { bottom:5rem; }
}
@media (prefers-reduced-motion: reduce) { .cmsg { animation:none; } }

/* Kamera-/Ton-Zeichen in der Teilnehmerliste */
.pcam { margin-left:auto; display:grid; place-items:center; color:var(--good); flex:none; }
.pcam.audio { color:var(--muted); }
.side .person { position:relative; }

/* „Mitmachen“, wenn man bisher nur zuschaut */
.call-btn.join { background:var(--accent); color:#fff; }
.call-btn.join:hover { filter:brightness(1.1); }
.call-btn[hidden] { display:none; }

/* Nutzen-Liste mit Symbolen statt Punkten */
.points li {
  display:grid; grid-template-columns:26px minmax(0,1fr); gap:.75rem;
  padding-left:0; align-items:start;
}
.points li::before { content:none; }
.points li svg { width:22px; height:22px; color:var(--accent); margin-top:.15rem; }
.points li b { display:block; color:var(--ink); margin-bottom:.1rem; }

/* ============ Robustes Grundgerüst ============
   In der installierten App (PWA) verrechnet sich 100dvh gelegentlich, dann
   rutscht die Eingabezeile unter den Fensterrand. Ein fest verankerter Rumpf
   plus min-height:0 auf den scrollenden Bereichen macht das unmöglich. */
html, body { height:100%; }
body { position:fixed; inset:0; overflow:hidden; }
.app { height:100%; min-height:0; }
.screen, .side { min-height:0; }
.feed, .side-scroll, .lobby-body { min-height:0; }
.composer, .bar, .side-head, .side-foot, .side-top { flex:none; }

/* Hinweis auf den nur lokal gespeicherten Verlauf */
.histbar {
  align-self:center; display:flex; align-items:center; gap:.6rem;
  font-size:.76rem; color:var(--muted); background:var(--other);
  border:1px dashed var(--line-firm, var(--line)); border-radius:999px;
  padding:.35rem .8rem; max-width:100%;
}
.histbar button {
  border:0; background:none; color:var(--accent); cursor:pointer;
  font:inherit; text-decoration:underline; padding:0;
}

/* ============ Dynamisches Videoraster ============
   Die Spalten- und Zeilenzahl rechnet der Client aus (siehe layoutTiles).
   Die Kacheln füllen ihre Zelle vollständig aus – kein schwarzer Rand mehr,
   und bei mehr Leuten werden sie einfach kleiner. */
.stage .tiles {
  display:grid !important;
  grid-template-columns:repeat(var(--cols, 1), minmax(0, 1fr)) !important;
  grid-template-rows:repeat(var(--rows, 1), minmax(0, 1fr)) !important;
  gap:.5rem;
  height:100%; max-height:none !important;
  padding:.5rem .5rem 4.6rem;
  overflow:hidden;
  align-content:stretch; justify-items:stretch; align-items:stretch;
}
.stage .tile {
  width:100% !important; height:100% !important;
  max-width:none !important; max-height:none !important;
  aspect-ratio:auto !important;
  border-radius:14px !important; margin:0;
}
/* Füllen statt einpassen: lieber minimal beschneiden als schwarze Balken. */
.stage .tile video { width:100%; height:100%; object-fit:cover !important; }

/* Eigenes Bild bleibt schwebend und aus dem Raster heraus */
.stage .tile.self {
  position:absolute !important; right:.9rem; bottom:5.2rem;
  width:clamp(104px, 18vw, 168px) !important; height:auto !important;
  aspect-ratio:3/4 !important; border-radius:14px !important; z-index:5;
}

/* Sehr viele Teilnehmer: Namensschild schrumpft mit */
.stage .tiles[style*="--cols: 5"] .cap,
.stage .tiles[style*="--cols: 6"] .cap,
.stage .tiles[style*="--cols: 7"] .cap,
.stage .tiles[style*="--cols: 8"] .cap { font-size:.6rem; padding:.1rem .3rem; }

@media (max-width:640px) {
  .stage .tiles { padding:.4rem .4rem 4.4rem; gap:.35rem; }
  .stage .tile.self { right:.5rem; bottom:4.8rem; width:clamp(84px, 24vw, 120px) !important; }
}

/* ============ Volle Breite ============
   Die 820-px-Lesespalte stammt aus der Zeit ohne Seitenleiste. Jetzt engt sie
   den Chat nur noch ein und lässt links eine leere Fläche stehen. */
.feed, .composer, .bar, .qbox, .dm-bar, .people {
  max-width:none !important;
  margin-inline:0 !important;
}
.feed { padding:1rem 1.4rem; }
.composer { padding:.7rem 1.4rem calc(.7rem + env(safe-area-inset-bottom)); }
.bar { padding-left:1.1rem !important; padding-right:1.1rem !important; }
.qbox, .dm-bar { padding-left:1.4rem; padding-right:1.4rem; }

/* Blasen dürfen breiter werden, sollen aber nicht über den halben Bildschirm
   laufen – Text bleibt sonst schlecht lesbar. */
.msg { max-width:min(78%, 720px); }

@media (max-width:640px) {
  .feed { padding:.8rem .7rem; }
  .composer { padding:.6rem .6rem calc(.6rem + env(safe-area-inset-bottom)); }
  .msg { max-width:88%; }
}

/* ==================================================================
   Erklärseite /technik — dieselben Farbmarken wie die App.
   Zwei Signalfarben tragen die Aussage: Akzent = über den Server,
   Grün = berührt ihn nie.
   ================================================================== */
body.docpage { position:static; inset:auto; height:auto; overflow:auto; }

.doc-bar {
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:.7rem;
  padding:calc(.8rem + env(safe-area-inset-top)) 1.2rem .8rem;
  background:var(--app); border-bottom:1px solid var(--line);
}
.doc-bar b { font-size:.98rem; letter-spacing:-.01em; }
.doc-back {
  display:inline-flex; align-items:center; gap:.35rem;
  color:var(--muted); text-decoration:none; font-size:.88rem; font-weight:600;
}
.doc-back:hover { color:var(--accent); }

.doc { max-width:880px; margin:0 auto; padding:2.5rem 1.2rem 5rem; }
.doc-hero h1 {
  font-size:clamp(1.7rem,4.5vw,2.5rem); letter-spacing:-.03em; margin:0 0 .7rem;
  text-wrap:balance;
}
.doc-lede { color:var(--muted); font-size:1.04rem; max-width:62ch; margin:0; }
.doc-sec { margin-top:3.2rem; }
.doc-sec h2 { font-size:1.25rem; letter-spacing:-.02em; margin:0 0 .35rem; }
.doc-sub { color:var(--muted); font-size:.92rem; margin:0 0 1.3rem; max-width:66ch; }

.doc-two { display:grid; gap:.9rem; }
@media (min-width:720px) { .doc-two { grid-template-columns:1fr 1fr; } }
.doc-card {
  border:1px solid var(--line); border-radius:16px; background:var(--app);
  padding:1.1rem 1.15rem;
}
.doc-card header { display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; flex-wrap:wrap; }
.doc-card header b { font-size:1rem; letter-spacing:-.01em; }
.doc-pill {
  font-size:.64rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:.3rem .5rem; border-radius:6px; color:#fff;
}
.doc-card.via .doc-pill  { background:var(--accent); }
.doc-card.p2p .doc-pill  { background:var(--good); }
.doc-card.via  { border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }
.doc-card.p2p  { border-color:color-mix(in srgb, var(--good) 35%, var(--line)); }
.doc-card.knows header b { color:var(--accent); }
.doc-card.blind header b { color:var(--good); }

.doc-route {
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  margin-bottom:.9rem; font-size:.78rem; color:var(--muted);
}
.doc-route span {
  padding:.3rem .55rem; border:1px solid var(--line); border-radius:8px;
  background:var(--bg); color:var(--ink); font-weight:600;
}
.doc-route span.srv { border-color:var(--accent); color:var(--accent); }
.doc-route i { font-style:normal; }

.doc-card ul { margin:0; padding-left:1.1rem; }
.doc-card li { font-size:.89rem; color:var(--muted); margin-bottom:.4rem; }
.doc-card li b { color:var(--ink); font-weight:600; }
.doc-note { font-size:.82rem; color:var(--muted); margin:0 0 .9rem; }

.doc-list { list-style:none; padding:0 !important; }
.doc-list li {
  padding:.55rem 0 .55rem 1.5rem; border-top:1px solid var(--line); position:relative;
}
.doc-list li:first-child { border-top:0; }
.doc-list li::before {
  content:""; position:absolute; left:0; top:.85rem;
  width:9px; height:9px; border-radius:3px;
}
.knows .doc-list li::before { background:var(--accent); }
.blind .doc-list li::before { background:var(--good); }
.doc-list li b { display:block; margin-bottom:.1rem; }
.doc-list li span { display:block; font-size:.85rem; color:var(--muted); }

.doc-steps { list-style:none; counter-reset:d; padding:0; margin:0; display:grid; gap:.6rem; }
.doc-steps li {
  counter-increment:d; position:relative;
  border:1px solid var(--line); border-radius:13px; background:var(--app);
  padding:.9rem 1rem .9rem 3.3rem;
}
.doc-steps li::before {
  content:counter(d); position:absolute; left:.9rem; top:.9rem;
  width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
  background:var(--accent-sk); color:var(--accent); font-weight:700; font-size:.82rem;
}
.doc-steps li b { display:block; font-size:.95rem; margin-bottom:.15rem; }
.doc-steps li p { margin:0; font-size:.88rem; color:var(--muted); }
.doc-tag {
  display:inline-block; margin-top:.45rem; font-size:.66rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:.28rem .45rem; border-radius:5px;
}
.doc-tag.via { background:var(--accent-sk); color:var(--accent); }
.doc-tag.p2p { background:color-mix(in srgb, var(--good) 16%, transparent); color:var(--good); }

.doc-facts {
  display:flex; flex-wrap:wrap; gap:1.4rem;
  border:1px solid var(--line); border-radius:14px; background:var(--app);
  padding:1rem 1.15rem; margin-bottom:.9rem;
}
.doc-facts .k {
  display:block; font-size:.64rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.25rem;
}
.doc-facts .v { font-weight:600; font-size:.92rem; }

.doc-stack { display:grid; gap:.55rem; }
.doc-box {
  border:1px solid var(--line); border-radius:12px; background:var(--other);
  padding:.8rem .95rem;
}
.doc-box b { display:block; font-size:.9rem; margin-bottom:.15rem; }
.doc-box span { font-size:.85rem; color:var(--muted); }
.doc-box.gone { background:transparent; border-style:dashed; }
.doc-box.gone b { color:var(--muted); text-decoration:line-through; }

.doc-limits { display:grid; gap:.6rem; }
.doc-limits > div {
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:12px; background:var(--app); padding:.85rem 1rem;
}
.doc-limits b { display:block; font-size:.92rem; margin-bottom:.15rem; color:var(--accent); }
.doc-limits p { margin:0; font-size:.87rem; color:var(--muted); max-width:70ch; }

.doc-foot {
  margin-top:3.2rem; padding-top:1.6rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:flex-start; gap:.9rem;
}
.doc-foot .btn { text-decoration:none; display:inline-block; }
.doc-foot p { margin:0; font-size:.82rem; color:var(--muted); }

/* Verweis auf dem Startbildschirm */
.gate-more { margin:1.2rem 0 0; text-align:center; }
.gate-more a { color:var(--accent); font-size:.86rem; font-weight:600; text-decoration:none; }
.gate-more a:hover { text-decoration:underline; }

/* ---------- Bildschirmfreigabe ----------
   Ein geteilter Bildschirm wird VOLLSTÄNDIG gezeigt, nie beschnitten –
   sonst fehlen genau die Ränder, auf die es ankommt. */
.stage .tile.screen video { object-fit:contain !important; background:#0b0916; }
.stage .tile.screen { outline:2px solid var(--accent); outline-offset:-2px; }
.stage .tile.screen .cap::before { content:"Bildschirm · "; opacity:.75; }
.call-btn.active, .icon-btn.active { background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; }

/* Sicherheitsnummer: zum Vorlesen gedacht, deshalb dicktengleich und ruhig. */
.psafe {
  display:block; font:500 .64rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--muted); letter-spacing:.02em; margin-top:.1rem;
}
.side .person { align-items:flex-start; }

/* ---------- Raum betreten: sichtbarer Knopf statt versteckter Eingabetaste ---------- */
.searchrow { position:relative; }
.sfield { padding-right:2.6rem; }
.sgo {
  position:absolute; right:.3rem; top:50%; transform:translateY(-50%);
  width:30px; height:30px; display:grid; place-items:center; cursor:pointer;
  border:0; border-radius:8px; background:transparent; color:var(--muted);
  transition:background .15s, color .15s;
}
.sgo:hover { color:var(--accent); background:var(--accent-sk); }
.sgo.on { background:var(--accent); color:#fff; }

/* ---------- Kopfzeile darf nicht umbrechen ----------
   Der lange Hinweis lief in mehrere Zeilen und legte sich über die Symbole. */
.bar { flex-wrap:nowrap; overflow:hidden; }
.bar-title { min-width:0; flex:1 1 auto; overflow:hidden; }
.bar-title b, .presence {
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.bar .icon-btn { flex:0 0 auto; }

/* Hinweiszeile im Verlauf: umbrechen statt überlappen */
.histbar { flex-wrap:wrap; justify-content:center; text-align:center; line-height:1.35; }

@media (max-width:640px) {
  /* Auf schmalen Geräten zählt der Raumname – der Zusatz weicht. */
  .presence { font-size:.7rem; }
  .bar { gap:.4rem; }
  .bar .icon-btn { width:38px; height:38px; }
}
@media (max-width:420px) {
  .presence { display:none; }
}

/* ==================================================================
   Smartphone: kein ungewollter Zoom, alles fingergerecht
   ==================================================================
   Der eigentliche Auslöser für „die Seite springt beim Tippen" ist nicht
   Pinch-Zoom, sondern iOS: Safari zoomt automatisch hinein, sobald ein
   Eingabefeld kleiner als 16px Schrift hat. Deshalb sind hier ALLE Felder
   auf 16px gesetzt – das ist die eigentliche Lösung. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* Doppeltipp-Zoom abschalten, ohne Scrollen zu behindern. */
button, a, input, select, textarea, .room, .person, .tile, .icon-btn, .call-btn {
  touch-action:manipulation;
}

@media (max-width:900px) {
  /* Jedes Feld mindestens 16px – sonst zoomt iOS beim Hineintippen. */
  .field, .sfield, .text, .qbox input, select, textarea { font-size:16px !important; }

  /* Fingerkuppen brauchen Fläche: 44px ist das anerkannte Mindestmaß. */
  .icon-btn, .round, .send, .sgo { min-width:44px; min-height:44px; }
  .sgo { width:38px; height:38px; }        /* sitzt im Feld, darf kleiner sein */
  .btn { min-height:44px; padding:.7rem 1.1rem; }
  .room { min-height:52px; padding:.7rem .8rem; }
  .person { min-height:44px; }
  .call-btn { width:52px; height:52px; }

  /* Lesbare Grundgrößen statt Kleingedrucktem. */
  body { font-size:15px; }
  .bubble { font-size:15px; }
  .msg .t { font-size:.68rem; }
  .side-lbl { font-size:.7rem; }
  .pnm { font-size:.88rem; }
  .pwhere, .psafe { font-size:.7rem; }
  .rn { font-size:.95rem; }
  .rnames { font-size:.75rem; }

  /* Abstände etwas großzügiger, damit nichts zusammenklebt. */
  .side-top { padding:.8rem; gap:.6rem; }
  .side-scroll { padding:0 .8rem .8rem; }
  .rooms { gap:.45rem; }
}

/* Schmale Geräte: lieber WENIGER Symbole als kleinere.
   Sechs Knöpfe passen bei 375px nicht in 44px-Größe nebeneinander – also
   entfällt das, was am Telefon ohnehin kaum jemand braucht: Bildschirm
   teilen. Der Rest bleibt fingergerecht. */
@media (max-width:560px) {
  #screen-btn { display:none; }
  .bar { gap:.35rem; padding-left:.7rem !important; padding-right:.7rem !important; }
  .bar .icon-btn { min-width:44px; min-height:44px; width:44px; height:44px; }
  .bar-title b { font-size:.95rem; }
  .composer { gap:.35rem; }
}

/* Kopfzeile am Telefon: Platz für den Raumnamen statt für Symbole.
   Suche steckt dort im „+“-Menü, die Marke steht ohnehin in der Seitenleiste. */
.only-narrow { display:none; }
@media (max-width:560px) {
  .bar .brand, #q-open { display:none; }
  .only-narrow { display:flex; }
}

/* Kleine Textknöpfe fingergerecht machen, ohne sie optisch aufzublähen. */
@media (max-width:900px) {
  #rename, .histbar button, .dm-bar button {
    min-height:44px; display:inline-flex; align-items:center; padding-inline:.5rem;
  }
  .side-foot { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
}

/* ---------- Sprachnachricht: eigener schmaler Abspieler ----------
   Der eingebaute Abspieler zeigte bei diesem Aufnahmeformat stur 0:00 und
   ließ kein Springen zu. Hier kommt die Dauer aus der Aufnahme selbst. */
.voice { display:flex; align-items:center; gap:.6rem; min-width:190px; padding:.15rem 0; }
.vplay {
  flex:none; width:34px; height:34px; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:var(--accent); color:#fff;
}
.msg.mine .vplay { background:rgba(255,255,255,.9); color:var(--mine); }
.vplay:hover { filter:brightness(1.08); }
.vbar {
  flex:1; height:4px; border-radius:999px; cursor:pointer; position:relative;
  background:color-mix(in srgb, currentColor 22%, transparent);
}
.vfill { position:absolute; inset:0 auto 0 0; width:0; border-radius:999px; background:var(--accent); }
.msg.mine .vfill { background:#fff; }
.vtime {
  flex:none; font-size:.72rem; font-variant-numeric:tabular-nums; opacity:.75; min-width:3ch;
}
.voice audio { display:none; }
@media (max-width:560px) { .voice { min-width:150px; } }

/* ==================================================================
   Einstieg über einen Einladungslink
   ==================================================================
   Wer den Link öffnet, soll den RAUM sehen, nicht ein Formular. Deshalb
   eigene Ansicht statt der allgemeinen Namensabfrage. */
#invitegate { align-items:center; justify-content:center; padding:1.5rem; }
.inv-inner { width:min(400px,100%); text-align:center; }
.inv-badge {
  display:inline-flex; align-items:center; gap:.45rem; margin-bottom:1rem;
  padding:.4rem .8rem; border-radius:999px;
  background:var(--accent-sk); color:var(--accent);
  font-size:.78rem; font-weight:600;
}
.inv-inner h1 { font-size:1.7rem; letter-spacing:-.03em; margin:0 0 .3rem; text-wrap:balance; }
.inv-who { color:var(--good); font-size:.95rem; margin:0 0 1.5rem; font-weight:600; }
.inv-form { display:flex; gap:.5rem; margin-bottom:1.2rem; }
.inv-note { color:var(--muted); font-size:.82rem; line-height:1.45; margin:0; }

/* ---------------------------- Teilen mit QR-Code ---------------------------- */
.sharebox {
  position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  background:rgba(10,8,20,.5); padding:1.2rem;
}
.sharebox[hidden] { display:none; }
.share-card {
  background:var(--app); border:1px solid var(--line); border-radius:18px;
  padding:1.4rem; width:min(340px,100%); text-align:center; box-shadow:var(--shadow);
}
.share-card b { display:block; font-size:1.05rem; margin-bottom:.2rem; }
.share-card p { color:var(--muted); font-size:.85rem; margin:0 0 1rem; }
.qr { width:200px; height:200px; border-radius:10px; background:#fff; }
.share-url {
  display:block; margin:.9rem 0 1rem; font-size:.74rem; color:var(--accent);
  word-break:break-all; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.share-row { display:flex; gap:.5rem; }
.share-row .btn { flex:1; }

/* Angebot für eine große Datei: bewusste Entscheidung statt stillem Empfang. */
.offer {
  align-self:center; max-width:min(92%,420px);
  border:1px solid var(--accent); border-radius:14px; background:var(--accent-sk);
  padding:.9rem 1rem; display:flex; flex-direction:column; gap:.5rem; text-align:center;
}
.offer-t { font-weight:600; font-size:.92rem; }
.offer-n { font-size:.8rem; color:var(--muted); line-height:1.4; }
.offer-row { display:flex; gap:.5rem; }
.offer-row .btn { flex:1; padding:.6rem .8rem; font-size:.88rem; }

/* Der Befehl zum Zusammenfügen: zum Markieren gedacht, deshalb auswählbar
   und mit eigenem Umbruch – lange Dateinamen sollen die Blase nicht sprengen. */
.joincmd {
  display:block; user-select:all; font-size:.8rem; line-height:1.5;
  background:var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:.5rem .6rem; overflow-wrap:anywhere; text-align:left;
}