/* =====================================================================
   FreeMeet - Aussehen.
   Hausstil der fleitec-Produkte: sehr dunkler Grund, weiche Farbnebel,
   feines Raster, Panels mit haarfeinem Rand. Akzent von FreeMeet ist
   Cyan (#22d3ee) - dieselbe Farbe wie die Kachel auf apps.fleitec.com.
   Schriften liegen im Binary (keine Google-Fonts-Abrufe aus dem Browser).
   ===================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/grotesk.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #07090f;
  --panel: #0e1220;
  --panel2: #121728;
  --tief: #090c14;
  --line: rgba(255,255,255,.07);
  --line2: rgba(255,255,255,.14);
  --fg: #e7ebf3;
  --dim: #8b95ab;
  --accent: #22d3ee;
  --accent2: #818cf8;
  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --r: 16px;
  --schatten: 0 18px 50px rgba(0,0,0,.55);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--fg); color-scheme: dark;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .wort, .marke { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; }
.hidden { display: none !important; }
.screen { height: 100dvh; display: flex; flex-direction: column; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Symbole. Alle Zeichen sind Striche in der Schriftfarbe - dadurch passen
   sie sich jedem Zustand (hell, gedimmt, rot) von selbst an. */
.ic {
  width: 20px; height: 20px; flex: 0 0 auto; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ic.dz { width: 15px; height: 15px; opacity: .8; }
.ic.gross { width: 34px; height: 34px; opacity: .55; }

/* ------------------------------------------------- Hintergrundstimmung */
.buehne {
  position: relative; align-items: center; justify-content: flex-start;
  overflow-y: auto; overflow-x: hidden; padding: 24px 12px;
}
.buehne > .card { margin: auto; }
/* Farbnebel und Raster bleiben stehen, wenn die Karte scrollt. */
.orbs, .raster { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.orb { position: absolute; display: block; border-radius: 50%; filter: blur(90px); opacity: .5; }
.orb.o1 { width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax; background: #0e7490; }
.orb.o2 { width: 38vmax; height: 38vmax; right: -10vmax; bottom: -12vmax; background: #4338ca; opacity: .42; }
.orb.o3 { width: 24vmax; height: 24vmax; left: 45%; top: 55%; background: #0891b2; opacity: .3; }
.raster {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 72%);
}

/* ------------------------------------------------------------- Karten */
.card {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)) , var(--panel);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 28px; width: min(430px, 92vw);
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--schatten);
}
.card.breit { width: min(600px, 94vw); }
.card h1 {
  margin: 2px 0 0; font-size: 27px; line-height: 1.15; letter-spacing: -.6px; font-weight: 700;
  background: linear-gradient(100deg, #fff 10%, var(--accent) 55%, var(--accent2) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card .sub { margin: 0 0 6px; color: var(--dim); font-size: 13.5px; }

/* Markenzeile mit Zeichen im Kaestchen. */
.marke { display: flex; align-items: center; gap: 10px; }
.marke .zeichen {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  color: var(--accent); background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.28);
}
.marke .zeichen.ok { color: var(--ok); background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.3); }
.marke .wort { font-size: 18px; font-weight: 500; letter-spacing: -.3px; }
.marke .wort b { font-weight: 700; color: var(--accent); }
.marke.klein .zeichen { width: 28px; height: 28px; border-radius: 9px; }
.marke.klein .zeichen .ic { width: 16px; height: 16px; }
.marke.klein .wort { font-size: 15px; }

/* ------------------------------------------------------------- Felder */
label.feld { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--dim); }
label.feld > span { display: flex; align-items: center; gap: 6px; letter-spacing: .02em; }
input:not([type=checkbox]):not([type=radio]):not([type=range]), select {
  background: var(--tief); border: 1px solid var(--line); color: var(--fg);
  border-radius: 11px; padding: 11px 13px; font-size: 15px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input:hover:not([type=checkbox]), select:hover { border-color: var(--line2); }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34,211,238,.15); }
input:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
input::placeholder { color: var(--dim); opacity: .65; }
input[type=datetime-local]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .6; }
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.row { display: flex; gap: 10px; }
.gitter2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Eigene Ankreuzfelder - das Browser-Kaestchen laesst sich nicht gestalten. */
.wahl { display: flex; gap: 10px; }
.schalter {
  flex: 1; display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--tief); font-size: 13.5px; color: var(--dim); user-select: none;
}
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.schalter .kasten {
  display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto;
  border: 1px solid var(--line2); border-radius: 6px; background: rgba(255,255,255,.03);
}
.schalter .kasten .ic { width: 12px; height: 12px; stroke-width: 2.6; opacity: 0; }
.schalter input:checked ~ .kasten { background: var(--accent); border-color: var(--accent); color: #04212a; }
.schalter input:checked ~ .kasten .ic { opacity: 1; }
.schalter:has(input:checked) { color: var(--fg); border-color: rgba(34,211,238,.35); }
.schalter input:focus-visible ~ .kasten { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------ Knoepfe */
button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--panel2); color: var(--fg); border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 14px; font-size: 14px; font-family: inherit;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .06s;
}
button:hover { background: #171d31; border-color: var(--line2); }
button:active { transform: translateY(1px); }
button.primary {
  background: linear-gradient(180deg, #2ee0f4, var(--accent)); border-color: transparent;
  color: #042027; font-weight: 600;
}
button.primary:hover { filter: brightness(1.07); background: linear-gradient(180deg, #2ee0f4, var(--accent)); }
button.danger { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.28); color: #ffc4c4; }
button.danger:hover { background: rgba(248,113,113,.2); }
button.gross { font-size: 15px; padding: 13px 16px; width: 100%; }
button.rund {
  width: 42px; height: 42px; padding: 0; border-radius: 50%; flex: 0 0 auto;
}
.err { color: var(--bad); min-height: 18px; margin: 0; font-size: 13px; }

/* Trenner, Planungsklappe, Meetingliste */
.trenner { display: flex; align-items: center; gap: .6rem; margin: .7rem 0 .3rem; color: var(--dim); }
.trenner::before, .trenner::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.trenner span { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
details#planBox { margin-top: .4rem; }
details#planBox summary {
  cursor: pointer; color: var(--dim); padding: .45rem 0; list-style: none;
  display: flex; align-items: center; gap: 8px; font-size: 13.5px;
}
details#planBox summary::-webkit-details-marker { display: none; }
details#planBox summary:hover { color: var(--fg); }
details#planBox[open] { display: flex; flex-direction: column; gap: 10px; }
details#planBox > label, details#planBox > button { width: 100%; }
.liste { display: flex; flex-direction: column; gap: .4rem; max-height: 230px; overflow-y: auto; }
.liste::-webkit-scrollbar { width: 8px; }
.liste::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 8px; }
.liste .eintrag {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--tief); font-size: 13.5px;
}
.liste .eintrag .wann { color: var(--dim); font-size: .8rem; }
.liste .eintrag .spacer { flex: 1; }
.liste .eintrag button { padding: .35rem .6rem; font-size: .8rem; border-radius: 9px; }
dl.daten {
  display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: .5rem 0;
  padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--tief);
}
dl.daten dt { color: var(--dim); font-size: 12px; align-self: center; }
dl.daten dd {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem; letter-spacing: .04em; color: var(--accent);
}

/* ==================================================== Konferenzfenster */
header, footer {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: rgba(14,18,32,.92); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
footer {
  border-bottom: none; border-top: 1px solid var(--line); flex-wrap: wrap;
  justify-content: center; gap: 10px; padding: 10px 14px;
}
header .kopfmarke { margin-right: 4px; }
.spacer { flex: 1; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; color: var(--dim); background: var(--tief);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px;
}
.tag .ic { width: 14px; height: 14px; }
.tag.ok { color: var(--ok); border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.07); }
.tag.warn { color: var(--warn); border-color: rgba(251,191,36,.28); background: rgba(251,191,36,.07); }
.tag.bad { color: var(--bad); border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.08); }
.tag.knopf { cursor: pointer; font: inherit; font-size: 12px; }
.tag.knopf:hover { color: var(--fg); border-color: var(--line2); background: var(--panel2); }
main { flex: 1; display: flex; min-height: 0; }

/* Fussleiste: Zeichen oben, Wort darunter - wie bei Meet/Teams. */
footer .ctl {
  flex-direction: column; gap: 4px; min-width: 68px; padding: 8px 10px;
  border-radius: 14px; background: var(--panel2); position: relative;
}
footer .ctl .ic { width: 22px; height: 22px; }
footer .ctl .lbl { font-size: 10.5px; color: var(--dim); letter-spacing: .01em; }
footer .ctl:hover .lbl { color: var(--fg); }
/* "an" = bewusst eingeschaltet (Hand, Chat, Teilen) - Akzentfarbe.
   "aus" = Mikro/Kamera stummgeschaltet - das muss rot sein, nicht bunt. */
footer .ctl.on { background: rgba(34,211,238,.14); border-color: rgba(34,211,238,.4); color: var(--accent); }
footer .ctl.on .lbl { color: var(--accent); }
footer .ctl.aus { background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.4); color: #ffb1b1; }
footer .ctl.aus .lbl { color: #ffb1b1; }
footer .ctl.danger .lbl { color: #ffc4c4; }
footer .ctl .badge {
  position: absolute; top: 4px; right: 6px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--bad); color: #2b0505;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}
@keyframes pulsen { 0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,.5); } 50% { box-shadow: 0 0 0 7px rgba(248,113,113,0); } }
footer .ctl.neu { animation: pulsen 1.6s ease-out 3; }

/* ------------------------------------------------------------ Kacheln */
.grid {
  flex: 1; display: flex; flex-wrap: wrap; gap: 10px; padding: 10px;
  align-content: center; justify-content: center;
}
/* --kw ist die von app.js errechnete groesstmoegliche Kachelbreite bei 16:9. */
.grid > .tile { width: var(--kw, auto); flex: 0 0 auto; }
.tile.screen {
  /* Der geteilte Bildschirm ist der Inhalt, um den es geht: ganze Breite und
     ZUERST - die Kameras reihen sich als Streifen darunter ein. */
  width: 100%; order: -1; grid-row: 1; grid-column: 1 / -1;
  aspect-ratio: auto; max-height: 68vh;
}
.tile.screen video { object-fit: contain; }

/* ------------------------------------------- Spiegel und Passung ------
   Das EIGENE Kamerabild wird gespiegelt gezeigt (so kennt man sich aus dem
   Spiegel) - die anderen bekommen es weiterhin seitenrichtig, gespiegelt
   wird nur die Anzeige. Der geteilte Bildschirm NIE: Text waere unlesbar. */
.tile.spiegel video { transform: scaleX(-1); }
.tile.spiegel.screen video { transform: none; }

/* "passend" setzt app.js, wenn das Bild nicht ins 16:9-Fenster passt
   (Hochformat vom Handy, 4:3-Webcam, ultrabreiter Monitor). Dann lieber
   Rand als abgeschnittene Koepfe. */
.tile video.passend { object-fit: contain; }

/* ------------------------------------------------ Praesentationsmodus -
   Sobald ein Bildschirm geteilt wird, ist DAS der Inhalt. Der Streifen mit
   den Kameras liegt rechts daneben, unten drunter - oder gar nicht. */
.grid.praesentation {
  display: grid; gap: 10px; padding: 10px; align-content: stretch;
  grid-template-columns: minmax(0, 1fr) 232px;
  grid-template-rows: minmax(0, 1fr);
  grid-auto-flow: row;
}
.grid.praesentation > .tile.screen {
  grid-column: 1; grid-row: 1;
  width: auto; aspect-ratio: auto; order: 0;
  /* height/max-height MUESSEN hier stehen: ohne sie zieht sich die Kachel auf
     die Eigengroesse des Videos auf und schiebt sich unter die Fussleiste
     (gemessen: 900 px hoch in einer 470 px hohen Zeile). 100 % meint hier
     die Rasterflaeche - der Bildschirm fuellt also genau seine Zeile. */
  height: 100%; max-height: 100%; min-height: 0;
}
/* Die Kameras werden zum senkrechten Streifen rechts - auch bei zwoelf
   Leuten bleibt der Bildschirm gross.
   WARUM ABSOLUT UND NICHT IM RASTER: im Raster teilt sich die erste Kamera
   die Zeile mit dem Bildschirm. Diese Zeile ist 1fr hoch (der Bildschirm
   soll ja die Hoehe fuellen), also klebte Kamera 1 oben und alle anderen
   sassen mit einer riesigen Luecke darunter. Absolut gesetzt stehen sie
   buendig untereinander; --i (Platz im Streifen) und --kamh (Hoehe, damit
   alle hineinpassen) rechnet buehnenKlassen() in app.js aus. */
.grid.praesentation.kam-seite { grid-template-columns: minmax(0, 1fr) 232px; position: relative; }
.grid.praesentation.kam-seite > .tile:not(.screen) {
  position: absolute; right: 10px;
  top: calc(10px + var(--i, 0) * (var(--kamh, 130.5px) + 10px));
  width: 232px; height: var(--kamh, 130.5px); aspect-ratio: auto;
}

/* Variante "unten": klassischer Filmstreifen unter dem Bildschirm. */
.grid.praesentation.kam-unten {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}
.grid.praesentation.kam-unten > .tile.screen { grid-column: 1; grid-row: 1; }
.grid.praesentation.kam-unten > .tile:not(.screen) {
  grid-row: 2; width: 210px; aspect-ratio: 16/9; align-self: end;
}
.grid.praesentation.kam-unten { grid-auto-flow: column; grid-auto-columns: 210px; }

/* Variante "aus": nur der Bildschirm, sonst nichts. */
.grid.praesentation.kam-aus { grid-template-columns: minmax(0, 1fr); }
.grid.praesentation.kam-aus > .tile:not(.screen) { display: none; }
.grid.praesentation.kam-aus > .tile.screen { grid-column: 1; }

/* Der Streifen darf laufen, wenn viele Leute da sind. */
.grid.praesentation.kam-seite { overflow: hidden; }
.grid.praesentation.kam-seite > .tile:not(.screen) { max-height: 132px; }

/* Vollbild eines geteilten Bildschirms: der Browser legt die Kachel auf den
   ganzen Monitor - Rahmen und Ecken haben dort nichts verloren. */
.tile.screen:fullscreen { border: 0; border-radius: 0; background: #000; }
.tile.screen:fullscreen video { object-fit: contain; }
.tile {
  position: relative; background: #05070c; border-radius: 14px; overflow: hidden;
  aspect-ratio: 16/9; border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: border-color .2s, box-shadow .2s;
}
.tile.speaking { border-color: var(--ok); box-shadow: 0 0 0 2px rgba(52,211,153,.35), 0 8px 24px rgba(0,0,0,.35); }
.tile.hand { border-color: var(--warn); box-shadow: 0 0 0 2px rgba(251,191,36,.35), 0 8px 24px rgba(0,0,0,.35); }
/* Unten RECHTS: oben rechts sitzt schon die Qualitaets-Anzeige ("Stufe h"),
   unten links das Namensschild - dazwischen ist der einzige freie Platz.
   Dauerhaft sichtbar statt nur bei :hover, sonst faende ihn am Handy
   niemand (dort gibt es kein Hover). */
.tile .ctrl-anfrage {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  opacity: .9; transition: opacity .15s;
}
.tile:hover .ctrl-anfrage { opacity: 1; }
.tile .ctrl-anfrage:disabled { cursor: default; opacity: 1; }
.tile video { width: 100%; height: 100%; object-fit: cover; background: #05070c; }
.tile .nameplate {
  position: absolute; left: 8px; bottom: 8px; display: flex; gap: 6px; align-items: center;
  background: rgba(5,7,12,.68); border: 1px solid var(--line); backdrop-filter: blur(6px);
  padding: 4px 9px; border-radius: 9px; font-size: 12px; max-width: calc(100% - 16px);
}
.tile .nameplate .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .nameplate .ic { width: 13px; height: 13px; }
.tile .nameplate .z-stumm { color: var(--bad); }
.tile .nameplate .z-hand { color: var(--warn); }
.tile.hand .nameplate { border-color: rgba(251,191,36,.5); }
.tile .quality {
  position: absolute; right: 8px; top: 8px; font-size: 10.5px; color: var(--dim);
  background: rgba(5,7,12,.6); border: 1px solid var(--line); padding: 3px 8px; border-radius: 8px;
}
.tile .placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center; color: var(--dim); font-size: 13px;
  text-align: center; padding: 12px;
  background: radial-gradient(circle at 50% 45%, #10151f, #05070c 70%);
}
.tile .placeholder .kreis {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  font-family: 'Space Grotesk', sans-serif; font-size: 22px; color: var(--fg);
}

/* --------------------------------------------------------- Seitenleiste */
aside {
  width: 340px; border-left: 1px solid var(--line); background: var(--panel);
  display: flex; flex-direction: column; min-height: 0;
}
.tabs { display: flex; border-bottom: 1px solid var(--line); padding: 6px 6px 0; gap: 4px; }
.tabs button[data-tab] {
  flex: 1; flex-direction: column; gap: 3px; border: none; background: transparent;
  color: var(--dim); border-radius: 10px 10px 0 0; padding: 8px 4px; position: relative;
}
.tabs button[data-tab] .ic { width: 18px; height: 18px; }
.tabs button[data-tab] .lbl { font-size: 11px; }
.tabs button[data-tab]:hover { color: var(--fg); background: rgba(255,255,255,.03); }
.tabs button[data-tab].active { color: var(--accent); background: rgba(34,211,238,.08); }
.tabs button[data-tab].active::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px;
  background: var(--accent); border-radius: 2px 2px 0 0;
}
.tabs button[data-tab] .punkt {
  position: absolute; top: 6px; right: 50%; margin-right: -16px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--bad);
}
.tab { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#chatLog, #infoLog {
  flex: 1; overflow: auto; padding: 12px; font-size: 13.5px;
  display: flex; flex-direction: column; gap: 10px;
}
#infoLog { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: var(--dim); gap: 3px; }
#chatForm { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); align-items: center; }
#chatForm input { flex: 1; border-radius: 999px; }

/* Chatnachricht: Anfangsbuchstabe im Kreis, Text in einer Sprechblase. */
.msg { display: flex; gap: 8px; align-items: flex-end; }
.msg .av {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: #04212a; background: var(--accent);
  font-family: 'Space Grotesk', sans-serif;
}
.msg .sp { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.msg .who { font-size: 11px; color: var(--dim); padding: 0 4px; }
.msg .tx {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px;
  padding: 7px 11px; overflow-wrap: anywhere; white-space: pre-wrap;
}
.msg.eigen { flex-direction: row-reverse; }
.msg.eigen .sp { align-items: flex-end; }
.msg.eigen .tx {
  background: rgba(34,211,238,.13); border-color: rgba(34,211,238,.3);
  border-radius: 14px 14px 4px 14px;
}
.msg.priv .tx { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.08); }
.msg.priv .who { color: var(--warn); }
.msg .zeit { font-size: 10px; color: var(--dim); opacity: .7; }

/* "schreibt gerade" - drei atmende Punkte. */
.tippt {
  display: flex; align-items: center; gap: 8px; padding: 0 12px 8px;
  font-size: 12px; color: var(--dim); min-height: 20px;
}
.tippt .punkte { display: inline-flex; gap: 3px; }
.tippt .punkte i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: tippen 1.2s infinite; }
.tippt .punkte i:nth-child(2) { animation-delay: .18s; }
.tippt .punkte i:nth-child(3) { animation-delay: .36s; }
@keyframes tippen { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

#peopleList { display: flex; flex-direction: column; gap: .35rem; padding: 10px; }
#peopleList .person {
  display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem;
  border-radius: 11px; background: var(--tief); border: 1px solid var(--line); font-size: 13.5px;
}
#peopleList .person .av {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: #04212a; background: var(--accent);
  font-family: 'Space Grotesk', sans-serif; flex: 0 0 auto;
}
#peopleList .person .spacer { flex: 1; }
#peopleList .person .rolle {
  font-size: .7rem; color: var(--warn); display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid rgba(251,191,36,.3); border-radius: 999px; padding: 2px 7px;
}
#peopleList .person .rolle .ic { width: 12px; height: 12px; }
#peopleList .person .z { color: var(--dim); display: flex; gap: 5px; }
#peopleList .person .z .ic { width: 15px; height: 15px; }
#peopleList .person .z .stumm { color: var(--bad); }
#peopleList .person button { padding: .25rem .5rem; font-size: .76rem; border-radius: 9px; }

/* ------------------------------------------------------ Einblendungen */
.toasts {
  position: fixed; right: 14px; top: 14px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none; max-width: min(360px, 86vw);
}
.toast {
  pointer-events: auto; cursor: pointer; display: flex; gap: 10px; align-items: flex-start;
  background: rgba(18,23,40,.96); border: 1px solid var(--line2); border-radius: 14px;
  padding: 10px 12px; box-shadow: var(--schatten); backdrop-filter: blur(10px);
  animation: reinrutschen .22s ease-out; max-width: 100%;
}
.toast .av {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #04212a; background: var(--accent);
  font-family: 'Space Grotesk', sans-serif;
}
.toast .inh { min-width: 0; }
.toast .tname { font-size: 12.5px; font-weight: 600; }
.toast .ttext {
  font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.toast.weg { animation: rausrutschen .2s ease-in forwards; }
@keyframes reinrutschen { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes rausrutschen { to { opacity: 0; transform: translateX(16px); } }

/* -------------------------------------------------- Vorbereitungsblick */
#vorbereiten { padding: 20px 12px; }
.vorschau {
  position: relative; background: #05070c; border-radius: 14px; overflow: hidden;
  aspect-ratio: 16/9; border: 1px solid var(--line);
}
.vorschau video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.vorschau .placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center; color: var(--dim); font-size: 13.5px;
  background: radial-gradient(circle at 50% 45%, #10151f, #05070c 70%);
}
.vorschauKnoepfe {
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; gap: 10px; justify-content: center;
}
.vorschauKnoepfe .rund { background: rgba(5,7,12,.72); border-color: var(--line2); backdrop-filter: blur(8px); }
.vorschauKnoepfe .rund:hover { background: rgba(5,7,12,.9); }
.vorschauKnoepfe .rund.aus { background: rgba(248,113,113,.85); border-color: transparent; color: #2b0505; }
.pegelbalken {
  position: absolute; left: 12px; right: 12px; top: 12px; height: 5px;
  background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden;
}
.pegelbalken > div { height: 100%; width: 0%; background: linear-gradient(90deg, var(--ok), var(--accent)); transition: width .08s linear; }
/* Rauschsperre sperrt gerade: der Balken faellt in Grau zurueck, damit man
   ohne Text sieht, dass nichts rausgeht. */
.pegelbalken.gesperrt > div { background: linear-gradient(90deg, #48526a, #6b7590); }
#vorbereiten .row button { flex: 1; }
#vorbereiten .row { gap: 10px; }

.sidezu {
  background: transparent; border: none; color: var(--dim); padding: 8px 10px;
  border-radius: 10px; flex: 0 0 auto; align-self: center;
}
.sidezu:hover { background: rgba(255,255,255,.05); color: var(--fg); }
.sidezu.an { color: var(--accent); }

.tonbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 40;
  background: linear-gradient(180deg, #2ee0f4, var(--accent)); border-color: transparent;
  color: #042027; font-weight: 600; box-shadow: 0 8px 28px rgba(0,0,0,.5);
}

/* ===================== Handy & Tablet =====================
   Alles hier drunter gilt nur fuer kleine Bildschirme und Fingerbedienung. */

header { padding-top: max(10px, env(safe-area-inset-top)); }
footer { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
header, footer {
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}

@media (max-width: 720px), (max-height: 500px) and (orientation: landscape) {
  /* Kopfzeile am Handy: eine Zeile, nichts abgeschnitten.
     Frueher war sie seitlich schiebbar - das sah aus wie ein Fehler
     (die letzte Pille hing halb ueberm Rand) und niemand wischt eine
     Kopfzeile. Jetzt gilt: das Zeichen links und die Zahl rechts haben
     ihre feste Groesse, und ALLES, was zu lang ist, kuerzt der Titel in
     der Mitte weg. Die reinen Technikanzeigen stehen weiter im
     Info-Reiter. */
  header {
    gap: 6px; flex-wrap: nowrap; overflow: hidden; padding-bottom: 8px;
  }
  header #e2e, header #bwe, header #transport { display: none; }
  header .kopfmarke .wort { display: none; }
  /* Gastgeber-Krone: steht am Handy im Leute-Reiter, hier ist kein Platz. */
  header #hostTag { display: none; }
  /* Alles ausser dem Titel behaelt seine Groesse ... */
  header > * { flex: 0 0 auto; }
  header .spacer { display: none; }
  /* ... und der Titel nimmt den Rest und kuerzt sich selbst.
     min-width:0 ist noetig, weil Flex-Elemente sonst nicht unter ihren
     Inhalt schrumpfen - ohne das wuerde nach wie vor etwas herausragen. */
  header #roomName {
    flex: 1 1 auto; min-width: 0; display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.5;
  }
  /* "Einladung" wird zum reinen Zeichen - der Text kostet 70 Pixel, die
     der Meeting-Titel besser gebrauchen kann. Der Knopf bleibt dabei
     gross genug fuer einen Finger. */
  header #btnCopy .lbl { display: none; }
  header #btnCopy { padding: 7px 10px; }
  header #btnCopy .ic { width: 16px; height: 16px; }
  header #peerCount { padding: 5px 9px; }

  /* Fussleiste: EINE wischbare Reihe statt drei umgebrochener Reihen. */
  footer {
    gap: 8px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scrollbar-width: none; padding-top: 8px;
  }
  footer::-webkit-scrollbar { display: none; }
  footer .ctl { flex: 0 0 auto; min-width: 60px; padding: 7px 9px; min-height: 52px; }
  footer .ctl .ic { width: 21px; height: 21px; }

  .grid {
    display: grid; padding: 6px; gap: 6px; overflow-y: auto; align-content: safe center;
    grid-template-columns: repeat(2, 1fr);
  }
  .grid > .tile { width: auto; }
  .grid.wenige { grid-template-columns: 1fr; }
  .grid.viele { align-content: stretch; grid-auto-rows: minmax(96px, 1fr); }
  .grid.viele .tile { aspect-ratio: auto; min-height: 0; }
  .tile.screen { max-height: 45vh; }
  /* Auf dem Handy ist rechts kein Platz - der Streifen geht immer nach unten. */
  .grid.praesentation, .grid.praesentation.kam-seite {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-auto-flow: column; grid-auto-columns: 132px;
  }
  .grid.praesentation > .tile:not(.screen) {
    grid-column: auto; grid-row: 2; width: 132px; max-height: 84px;
  }
  .tile .placeholder .kreis { width: 46px; height: 46px; font-size: 17px; }

  aside {
    position: fixed; left: 0; right: 0; top: 0; bottom: var(--tastatur, 0px);
    width: auto; z-index: 30; border-left: none;
    padding-top: env(safe-area-inset-top);
  }
  .sidezu { display: block; }
  #chatForm { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .toasts { top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); left: 12px; right: 12px; max-width: none; align-items: stretch; }

  #join, #vorbereiten {
    justify-content: flex-start; overflow-y: auto;
    padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  }
  #join > .card, #vorbereiten > .card { margin: auto; }
  .card { padding: 20px 18px; }
  .card h1 { font-size: 23px; }
  .gitter2 { grid-template-columns: 1fr; }
  .orb { filter: blur(70px); opacity: .38; }
}

@media (max-height: 500px) and (orientation: landscape) {
  header, footer { padding-top: 6px; padding-bottom: 6px; }
  footer .ctl { min-height: 44px; padding: 5px 9px; }
  footer .ctl .lbl { display: none; }
  .grid, .grid.wenige, .grid.viele {
    display: grid; padding: 6px; gap: 6px; overflow-y: auto; align-content: stretch;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); grid-auto-rows: 1fr;
  }
  .grid > .tile { width: auto; }
  .grid.wenige:has(.tile:only-child) { grid-template-columns: min(100%, calc(58vh * 16 / 9)); }
  .grid .tile { aspect-ratio: auto; min-height: 0; }
  .tile.screen { max-height: none; }
  .tonbar { bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* Fingerbedienung: 16px verhindert das Hineinzoomen von iOS. */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, #chatInput { font-size: 16px; }
  button { min-height: 42px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .tabs button[data-tab] { min-height: 48px; }
  .liste .eintrag button { min-height: 34px; }
  .sidezu { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* ---------------------------------------------- Auswahlfelder zaehmen
   Ein langer Geraetename ("Standard - Mikrofon (HyperX Quadcast) (0951:16df)")
   hat frueher die Rasterspalte aufgeblasen: Grid-Elemente haben min-width:auto,
   also wird die Spalte so breit wie der laengste Eintrag. Deshalb hier
   min-width:0 fuer die Rasterkinder und eine feste Breite fuer <select>. */
.gitter2 > *, label.feld { min-width: 0; }
select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
select option { max-width: 100%; }

/* =====================================================================
   WARTERAUM
   Wer einen Einladungslink weitergibt, will nicht, dass Fremde mitten im
   Gespraech stehen. Der Gastgeber laesst herein - und muss das auf einen
   Blick sehen, ohne die Seitenleiste zu oeffnen.
   ===================================================================== */

/* Kleine Knoepfe in Listen (Einlassen / Ablehnen / Alle einlassen). */
.mini {
  padding: .28rem .6rem; font-size: .78rem; border-radius: 9px;
  border: 1px solid var(--line2); background: var(--panel2); color: var(--fg);
  cursor: pointer; white-space: nowrap; flex: 0 0 auto;
}
.mini:hover { border-color: var(--accent); color: var(--accent); }
.mini.primary {
  background: var(--accent); border-color: var(--accent); color: #04222a; font-weight: 600;
}
.mini.primary:hover { filter: brightness(1.1); color: #04222a; }

/* Die Leiste ueber der Buehne. Schwebt, damit sie kein Layout verschiebt. */
.lobbyleiste {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
  z-index: 40; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(14,18,32,.94); border: 1px solid var(--accent);
  box-shadow: var(--schatten); max-width: min(92vw, 620px);
  animation: lobbyRein .25s ease-out;
}
.lobbyleiste .ic { color: var(--accent); }
.lobbyleiste span { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes lobbyRein { from { opacity: 0; transform: translate(-50%, -8px); } }

/* Schalter "Warteraum an/aus" im Leute-Reiter. */
.lobbyschalter {
  width: 100%; margin-bottom: 10px; padding: .5rem .7rem;
  border-radius: 11px; border: 1px solid var(--line2);
  background: var(--panel2); color: var(--dim); font-size: .82rem; cursor: pointer;
  text-align: left;
}
.lobbyschalter:hover { border-color: var(--line2); color: var(--fg); }
.lobbyschalter.on { border-color: var(--accent); color: var(--accent); }

#lobbyListe:not(:empty) {
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.lobbykopf {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: .8rem; color: var(--accent); letter-spacing: .02em;
}
.lobbykopf .ic { width: 15px; height: 15px; }
.lobbykopf .mini { margin-left: auto; }

#lobbyListe .person {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
}
#lobbyListe .person .av {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: .72rem; font-weight: 600; color: #06121a;
}
#lobbyListe .person .spacer { flex: 1; }
#lobbyListe .person.wartend { color: var(--fg); }

/* Die eigene Warteseite. */
#warteraum .card { text-align: center; align-items: center; max-width: 460px; }
.warteanzeige { margin: 18px 0 6px; display: flex; justify-content: center; }
.warteanzeige .punkte { display: inline-flex; gap: 6px; }
.warteanzeige .punkte i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  animation: tippen 1.2s infinite;
}
.warteanzeige .punkte i:nth-child(2) { animation-delay: .18s; }
.warteanzeige .punkte i:nth-child(3) { animation-delay: .36s; }

/* Knopf, den dieser Browser anders loest (z. B. Bild-im-Bild in Firefox):
   nicht rot wie ein Fehler, nur zurueckgenommen - er erklaert den Weg. */
footer .ctl.hinweis { opacity: .62; }
footer .ctl.hinweis:hover { opacity: 1; }


/* ---------------------------------------------- Einstellungen im Meeting
   Liegt ueber der Buehne, damit man waehrend des Gespraechs Kamera,
   Mikrofon oder Hintergrund wechseln kann, ohne rauszugehen. */
.einstellungen {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3,6,12,.72); backdrop-filter: blur(4px);
  padding: 16px;
}
.einstellungen.hidden { display: none; }
.einstellungen .card { max-width: 460px; width: 100%; max-height: 88vh; overflow-y: auto; }

/* --- Rauschsperre und Avatar --------------------------------------- */
.tonblock { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
.sub.klein { font-size: 12.5px; margin: 2px 0 8px; }
.wertchen { color: var(--accent); font-weight: 600; }
input[type=range] { width: 100%; accent-color: var(--accent); background: transparent; }
/* Pegel UND Schwelle auf derselben Skala - sonst waere die Marke Zierrat. */
.torbalken { position: relative; height: 8px; border-radius: 4px; background: rgba(255,255,255,.10); margin: 4px 0 6px; }
.torfuellung { height: 100%; width: 0%; border-radius: 4px; background: linear-gradient(90deg, var(--ok), var(--accent)); transition: width .1s linear; }
.torfuellung.zu { background: linear-gradient(90deg, #48526a, #6b7590); }
.tormarke { position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; border-radius: 2px; background: var(--warn); transition: left .25s linear; }
.avatarbox { border: 1px solid var(--line); border-radius: 14px; background: var(--panel2); padding: 12px; margin: 0 0 10px; }
.avatarbox.hidden { display: none; }
.avatarbox .feld { margin-bottom: 8px; }
.avatarvorschau { display: block; width: 100%; max-width: 320px; margin: 0 auto 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--tief); }