/* Coli · Arbeitsansicht: Gespräch (schmal) + Bühne (ein Ding im Fokus).
   Rechner: zwei Spalten, jede scrollt für sich. Handy: Bühne voll, Gespräch als Blatt über dem Balken. */

.arbeit { display: none; }
body[data-zustand="arbeit"] .buehne { display: none; }
body[data-zustand="arbeit"] main { max-width: none; padding: 0; }
body[data-zustand="arbeit"] .arbeit {
  display: grid; grid-template-columns: minmax(320px, 400px) 1fr;
  height: calc(100dvh - var(--kopf-hoehe, 58px));
}

/* ── Gespräch ─────────────────────────────────────────── */
.gespraech {
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--linie);
  background: color-mix(in srgb, var(--grund) 70%, #fff);
}
.griff { display: none; }
.verlauf { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 18px; padding: 20px 18px 12px; scroll-behavior: smooth; }
.gespraech .balken-platz { padding: 10px 12px 14px; }
.gespraech .balken { max-width: none; border-radius: 24px; padding-left: 16px; }
.gespraech .balken textarea { font-size: 16px; }
.gespraech .zug.coli-zug .text { font-size: 16px; line-height: 1.55; }
.gespraech .zug.person .blase { font-size: 15px; }

/* Verweis auf die Bühne: „→ Podcast aufnehmen“ */
.verweis {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; cursor: pointer;
  border: 1px solid var(--linie); background: #fff; border-radius: 14px; padding: 7px 12px 7px 8px;
  font-size: 14px; color: var(--navy); transition: transform .3s var(--feder), border-color .3s, box-shadow .3s;
}
.verweis:hover { transform: translateX(2px); border-color: var(--linie-2); box-shadow: var(--schatten-1); }
.verweis i { width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--farbe, var(--tuerkis)) 22%, #fff); display: grid; place-items: center; }
.verweis i::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--farbe, var(--tuerkis)); transform: rotate(45deg); }
.verweis.aktiv { border-color: var(--navy); }
.frage-im-gespraech { display: flex; flex-wrap: wrap; gap: 6px; }
.frage-im-gespraech .chip { font-size: 14px; padding: 7px 13px; }
.frage-im-gespraech .chip.gewaehlt { background: var(--navy); color: #fff; border-color: var(--navy); }
.frage-im-gespraech.erledigt .chip:not(.gewaehlt) { opacity: .4; pointer-events: none; }

/* ── Bühne ────────────────────────────────────────────── */
.fokus { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; }
.fokus-kopf {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 6px; min-height: 52px;
  padding: 8px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--grund) 80%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.pfadleiste { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; font-size: 13.5px; color: var(--text-3); }
.pfadleiste::-webkit-scrollbar { display: none; }
.pfadleiste button { border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 4px 6px; border-radius: 8px; white-space: nowrap; }
.pfadleiste button:hover { color: var(--navy); background: rgba(18, 33, 74, .05); }
.pfadleiste span { white-space: nowrap; color: var(--navy); font-weight: 700; padding: 4px 6px; }
.pfadleiste .trenner { color: var(--linie-2); padding: 0; }
.fokus-inhalt { view-transition-name: fokus; padding: 4px clamp(16px, 4vw, 40px) 64px; max-width: 980px; }
::view-transition-old(fokus) { animation: fokus-raus .28s var(--weich) both; }
::view-transition-new(fokus) { animation: fokus-rein .5s var(--weich) both; }
@keyframes fokus-raus { to { opacity: 0; transform: translateY(-6px); filter: blur(4px); } }
@keyframes fokus-rein { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }
.fokus-leer { padding: 12vh 0; text-align: center; color: var(--text-3); }

/* ── Handy: Bühne voll, Gespräch als Blatt ────────────── */
@media (max-width: 900px) {
  body[data-zustand="arbeit"] .arbeit { display: block; height: auto; }
  .fokus { overflow: visible; padding-bottom: calc(var(--blatt-hoehe, 150px) + 90px); }
  .fokus-kopf { top: var(--kopf-hoehe, 58px); padding: 6px 16px; }
  .fokus-inhalt { padding: 0 16px 24px; }
  .gespraech {
    position: fixed; z-index: 25; left: 0; right: 0; bottom: 0;
    border: 0; border-radius: 22px 22px 0 0;
    background: color-mix(in srgb, var(--flaeche) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
    box-shadow: 0 -10px 40px -12px rgba(18, 33, 74, .22), 0 0 0 1px var(--linie);
    max-height: 30dvh; transition: max-height .5s var(--weich);
  }
  .gespraech.offen { max-height: 82dvh; }
  .griff { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; cursor: pointer; padding: 8px 0 0; color: var(--text-3); font-size: 12px; }
  .griff-strich { width: 38px; height: 4px; border-radius: 4px; background: var(--linie-2); }
  .verlauf { padding: 6px 16px 4px; gap: 12px; }
  /* zugeklappt: nur das letzte Paar aus Frage und Antwort */
  .gespraech:not(.offen) .verlauf > :not(:last-child) { display: none; }
  .gespraech:not(.offen) .zug.coli-zug .spur, .gespraech:not(.offen) .zug.coli-zug .quellen, .gespraech:not(.offen) .zug.coli-zug .modus-hinweis { display: none; }
  .gespraech:not(.offen) .zug.coli-zug .text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .gespraech:not(.offen) .zug.coli-zug .karten .verweis, .gespraech:not(.offen) .frage-im-gespraech { display: none; }
  .gespraech .balken-platz { padding: 6px 10px max(10px, env(safe-area-inset-bottom)); }
}

/* ── Lichtbox ─────────────────────────────────────────── */
.lichtbox {
  border: 0; padding: 0; background: transparent; max-width: min(1200px, 94vw); max-height: 92dvh; overflow: visible;
}
.lichtbox::backdrop { background: rgba(10, 16, 36, .78); backdrop-filter: blur(6px); }
.lichtbox img { display: block; max-width: min(1200px, 94vw); max-height: 84dvh; border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); view-transition-name: lichtbild; }
.lichtbox p { color: #fff; opacity: .8; font-size: 14px; text-align: center; margin: 10px 0 0; }
.lichtbox-zu { position: absolute; top: -14px; right: -14px; background: #fff; color: var(--navy); box-shadow: var(--schatten-2); }
.lichtbox-zu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
::view-transition-group(lichtbild) { animation-duration: .45s; animation-timing-function: var(--weich); }

/* ── Meldung (Toast) ─────────────────────────────────── */
.meldung {
  position: fixed; z-index: 60; left: 50%; top: 74px; transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 14px; font-size: 14.5px; box-shadow: var(--schatten-2);
  transition: opacity .35s var(--weich), transform .45s var(--feder); max-width: calc(100vw - 32px);
}
.meldung.da { opacity: 1; transform: translate(-50%, 0); }

/* ── Raum-Modus (Wandbildschirm) ─────────────────────── */
body[data-modus="raum"] { font-size: 20px; }
body[data-modus="raum"] .menue, body[data-modus="raum"] .fuss { display: none; }
body[data-modus="raum"] #coli-gross { width: clamp(180px, 22vw, 280px); }
body[data-modus="raum"] .buehne h1 { font-size: clamp(64px, 8vw, 104px); }
body[data-modus="raum"] .unterzeile { font-size: 26px; max-width: 36ch; }
body[data-modus="raum"] .buehne .balken { max-width: 900px; }
body[data-modus="raum"][data-zustand="arbeit"] .arbeit { grid-template-columns: minmax(360px, 460px) 1fr; }
body[data-modus="raum"] .fokus-inhalt { max-width: 1400px; }
body[data-modus="raum"] .gespraech .zug.coli-zug .text { font-size: 21px; }
body[data-modus="raum"] #mikro { width: 60px; height: 60px; }
body[data-modus="raum"] #mikro svg { width: 28px; height: 28px; }
.raum-schild {
  display: none; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2);
  padding: 5px 11px; border-radius: 999px; background: rgba(87, 165, 124, .12);
}
body[data-modus="raum"] .raum-schild { display: inline-flex; }
.raum-schild i { width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); animation: puls 2.4s ease-in-out infinite; }
.angekommen { animation: angekommen 1.2s var(--weich) both; }
@keyframes angekommen { 0% { box-shadow: 0 0 0 0 rgba(119, 192, 183, .0); } 30% { box-shadow: 0 0 0 14px rgba(119, 192, 183, .25); } 100% { box-shadow: 0 0 0 0 rgba(119, 192, 183, 0); } }
body[data-modus="raum"] .leise-aktionen { display: none; }
.raum-schild.getrennt i { background: var(--text-3); animation: none; }