/* lvg-planty — Planty-Look (gruener Verlauf, weisse Karten) */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-600: #16a34a;
  --green-700: #15803d;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-900: #111827;
}
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: linear-gradient(to bottom, var(--green-50), var(--green-100));
  min-height: 100vh;
  color: var(--gray-900);
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 80rem; margin: 0 auto; padding: 2rem; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 1rem; }
.brand img { height: 48px; border-radius: 8px; }
.topbar h1 { font-size: 2.25rem; font-weight: 700; }
.userbox { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: var(--gray-600); }

.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none; text-align: center;
  background: var(--green-600); color: #fff; font-weight: 600; font-size: .95rem;
  padding: .6rem 1.2rem; border-radius: .5rem; transition: background .15s;
}
.btn:hover { background: var(--green-700); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.secondary { background: #fff; color: var(--gray-900); border: 1px solid #d1d5db; }
.btn.secondary:hover { background: #f9fafb; }
.btn.block { width: 100%; }

.grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: #fff; border-radius: .75rem; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  transition: transform .3s;
}
.card:hover { transform: scale(1.03); }
.card .img { height: 12rem; width: 100%; background: #e5e7eb; position: relative; }
.card .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .img .noimg { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--gray-500); }
.card .body { padding: 1.5rem; flex: 1; }
.card h2 { font-size: 1.4rem; font-weight: 600; margin-bottom: .5rem; }
.card .headline { font-size: .875rem; font-weight: 500; color: var(--green-600); margin-bottom: .75rem; }
.card .desc {
  color: var(--gray-600); font-size: .875rem; margin-bottom: 1rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .foot { padding: 0 1.5rem 1.5rem; }

.panel {
  background: #fff; border-radius: .75rem; padding: 2rem; max-width: 26rem; margin: 3rem auto;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
}
.panel h2 { margin-bottom: 1rem; }
.panel label { display: block; font-size: .875rem; font-weight: 500; margin: .9rem 0 .3rem; }
.panel input {
  width: 100%; padding: .55rem .75rem; border: 1px solid #d1d5db; border-radius: .5rem; font-size: 1rem;
}
.panel input:focus { outline: 2px solid var(--green-600); border-color: transparent; }
.panel .switch { margin-top: 1rem; font-size: .875rem; color: var(--gray-600); text-align: center; }
.panel .switch a { color: var(--green-600); cursor: pointer; text-decoration: underline; }
.panel .btn { margin-top: 1.4rem; }

.msg { padding: .75rem 1rem; border-radius: .5rem; margin: 1rem 0; font-size: .9rem; display: none; }
.msg.error { background: #fee2e2; border: 1px solid #fca5a5; color: #b91c1c; display: block; }
.msg.info  { background: var(--green-100); border: 1px solid #86efac; color: var(--green-700); display: block; }

.center { text-align: center; color: var(--gray-500); padding: 3rem 0; }
footer { text-align: center; font-size: .8rem; color: var(--gray-500); padding: 2rem 0 1rem; }

/* Talk-Seite */
.stage-wrap { max-width: 60rem; margin: 0 auto; }
.stage {
  background: #111827; border-radius: .75rem; position: relative; overflow: hidden;
  aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
}
.stage video { width: 100%; height: 100%; object-fit: contain; }
.stage canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Eigener Hintergrund hinter dem freigestellten Avatar (Chroma-Key).
   Eigenes Foto: assets/talk-bg.png ODER .jpg ablegen — gewinnt gegen das SVG.
   Mehrere Ebenen: fehlende Dateien werden einfach uebersprungen. */
#video-container.keyed {
  /* --talk-bg wird von talk.js pro Avatar gesetzt (talk-bg-<agent-id>.png/.jpg
     zuerst, dann die allgemeinen talk-bg.*) — fehlende Ebenen werden uebersprungen. */
  background-image: var(--talk-bg, url('assets/talk-bg.png'), url('assets/talk-bg.jpg'), url('assets/talk-bg.svg'));
  background-size: cover;
  background-position: center;
}
/* Freigestellter Avatar: Buehne fuellen und an der Unterkante verankern,
   damit unter dem Avatar kein Hintergrund-Streifen mit harter Kante bleibt. */
#video-container.keyed canvas {
  object-fit: cover;
  object-position: center bottom;
}
.stage .placeholder { color: #9ca3af; text-align: center; padding: 2rem; }
.talkbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.talkbar .timer { font-variant-numeric: tabular-nums; color: var(--gray-600); }
.subtitles {
  background: #fff; border-radius: .75rem; margin-top: 1rem; padding: 1rem 1.5rem;
  max-height: 14rem; overflow-y: auto; font-size: .9rem;
  box-shadow: 0 4px 6px -4px rgba(0,0,0,.1);
}
.subtitles p { margin: .35rem 0; }
.subtitles .agent { color: var(--green-700); }
.subtitles .user { color: var(--gray-600); }