/* sitzungsbetrieb.css — Bündelseite "Sitzungsbetrieb digital".
   Reuses .hv warm tokens + chrome from home-v2.css. Page-specific sections only. */

/* ---- Shared FAQ (Summaries, Voice) ---- */
.sb__faq { max-width: 820px; margin: 28px auto 0; border-top: 1px solid var(--rule); }
.sb__faq-item { border-bottom: 1px solid var(--rule); }
.sb__faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; font-family: var(--display); font-size: clamp(17px, 1.6vw, 20px); font-weight: 500; color: var(--ink); }
.sb__faq-item summary::-webkit-details-marker { display: none; }
.sb__faq-plus { position: relative; width: 16px; height: 16px; flex: none; }
.sb__faq-plus::before, .sb__faq-plus::after { content: ""; position: absolute; background: var(--accent); transition: opacity 160ms ease; }
.sb__faq-plus::before { left: 7px; top: 0; width: 2px; height: 16px; }
.sb__faq-plus::after { top: 7px; left: 0; height: 2px; width: 16px; }
.sb__faq-item[open] .sb__faq-plus::before { opacity: 0; }
.sb__faq-item p { margin: 0 0 24px; font-size: 15.5px; line-height: 1.62; color: var(--ink-2); max-width: 78ch; }

/* ---- Hero ---- */
.sb__hero { padding-top: 60px; }
.sb__hero-inner { display: grid; gap: 24px; max-width: 880px; }
.sb__hero h1 { font-size: clamp(34px, 4.4vw, 58px); }
.sb__hero-sub { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 58ch; margin: 0; }
.sb__hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* ---- Section scaffolding ---- */
.sb__head { max-width: 680px; display: grid; gap: 14px; margin-bottom: 40px; }
.sb__head h2 { font-size: clamp(27px, 3.1vw, 42px); }
.sb__head p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.sb__alt { background: var(--surface); border-block: 1px solid var(--rule); }

/* ============================================================
   ABLAUF — one council session, three stages
   ============================================================ */
.sb__flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.sb__step { position: relative; padding: 0 22px; display: grid; gap: 18px; align-content: start; }
.sb__step:not(:last-child)::after {
  content: "";
  position: absolute; top: 96px; right: -10px;
  width: 20px; height: 20px;
  border-top: 2px solid var(--rule-2);
  border-right: 2px solid var(--rule-2);
  transform: rotate(45deg);
  z-index: 2;
}
.sb__step-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.sb__step-tag b { color: var(--accent); font-weight: 600; }
.sb__step h3 { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 400; line-height: 1.15; }
.sb__step p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* mock frame shared */
.sb__mock {
  height: 168px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  overflow: hidden;
  position: relative;
  background: #0c0f14;
}
/* stage 1 — stream */
.sb__mock--stream { display: flex; align-items: flex-end; padding: 14px;
  background:
    linear-gradient(0deg, rgba(8,11,16,0.55) 0%, rgba(8,11,16,0.1) 45%),
    url("assets/ratssaal.png") center/cover no-repeat,
    radial-gradient(120% 90% at 30% 20%, #1b2330 0%, #0c0f14 70%); }
.sb__mock-live {
  position: absolute; top: 13px; left: 13px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: #fff;
  background: rgba(0,0,0,0.4); padding: 5px 9px; border-radius: 3px;
}
.sb__dot { width: 6px; height: 6px; border-radius: 50%; background: #ff3b30; animation: sb-pulse 1.6s ease-out infinite; }
@keyframes sb-pulse { 0%{box-shadow:0 0 0 0 rgba(255,59,48,.5)} 70%{box-shadow:0 0 0 7px rgba(255,59,48,0)} 100%{box-shadow:0 0 0 0 rgba(255,59,48,0)} }
.sb__mock-room { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); text-transform: uppercase; white-space: nowrap; }
/* viewfinder overlay (stage 1) */
.sb__vf { position: absolute; width: 16px; height: 16px; z-index: 3; border: 2px solid rgba(255,255,255,0.85); }
.sb__vf--tl { top: 11px; left: 11px; border-right: 0; border-bottom: 0; }
.sb__vf--tr { top: 11px; right: 11px; border-left: 0; border-bottom: 0; }
.sb__vf--bl { bottom: 11px; left: 11px; border-right: 0; border-top: 0; }
.sb__vf--br { bottom: 11px; right: 11px; border-left: 0; border-top: 0; }
.sb__vf-reticle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,0.6); border-radius: 50%; }
.sb__vf-reticle::before, .sb__vf-reticle::after { content: ""; position: absolute; background: rgba(255,255,255,0.6); }
.sb__vf-reticle::before { top: 50%; left: -7px; right: -7px; height: 1px; transform: translateY(-50%); }
.sb__vf-reticle::after { left: 50%; top: -7px; bottom: -7px; width: 1px; transform: translateX(-50%); }
/* stage 2 — captions */
.sb__mock--cc { display: flex; align-items: flex-end; justify-content: center; padding: 12px;
  background:
    linear-gradient(0deg, rgba(8,11,16,0.6) 0%, rgba(8,11,16,0.05) 50%),
    url("assets/ratssaal.png") center/cover no-repeat,
    radial-gradient(120% 90% at 70% 20%, #1b2330 0%, #0c0f14 70%); }
.sb__cc-bar { position: relative; z-index: 2; background: #000; color: #fff; font-family: var(--sans); font-weight: 500; font-size: 12px; line-height: 1.35; padding: 7px 12px; text-align: center; max-width: 90%; margin-bottom: 2px; }
.sb__cc-tag { position: absolute; top: 13px; left: 13px; z-index: 3; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--amber); background: rgba(0,0,0,0.55); padding: 5px 9px; border-radius: 3px; }
.sb__cc-vol { position: absolute; top: 12px; right: 13px; z-index: 3; color: rgba(255,255,255,0.85); display: grid; place-items: center; }
/* laptop frame around stage 2 */
.sb__laptop { display: flex; flex-direction: column; align-items: center; }
.sb__laptop .sb__mock--cc { width: 100%; height: 157px; border: 7px solid #15181e; border-bottom: 0; border-radius: 9px 9px 0 0; }
.sb__laptop-base { display: block; width: calc(100% + 26px); height: 11px; background: linear-gradient(#3a3f49, #15181e); border-radius: 0 0 9px 9px; position: relative; box-shadow: 0 5px 12px -4px rgba(0,0,0,0.4); }
.sb__laptop-base::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 4px; background: #0a0c10; border-radius: 0 0 5px 5px; }
/* stage 3 — protocol doc */
.sb__mock--doc { background: #fff; padding: 15px 16px 14px; display: grid; gap: 7px; align-content: start; }
.sb__doc-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #e7e2d6; padding-bottom: 7px; margin-bottom: 1px; }
.sb__doc-title { font-family: var(--display); font-size: 13px; color: #23201b; }
.sb__doc-meta { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: #9a958a; text-transform: uppercase; }
.sb__doc-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; line-height: 1.2; color: #4a463d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb__doc-check { width: 14px; height: 14px; flex: none; border-radius: 50%; background: #1f7a44; color: #fff; display: grid; place-items: center; font-size: 9px; }
.sb__doc-bar { height: 7px; border-radius: 2px; background: #ece7da; }

.sb__sov {
  margin-top: 44px;
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.sb__sov-lead { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
.sb__sov-item { display: flex; align-items: baseline; gap: 9px; font-size: 14px; color: var(--ink-2); }
.sb__sov-item b { color: var(--ink); font-weight: 580; }
.sb__sov-strong b { color: var(--accent); }

/* ============================================================
   PAIN / TRIGGER lists
   ============================================================ */
.sb__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sb__item {
  display: grid; gap: 9px;
  padding: 26px 26px 24px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.sb__alt .sb__item { background: var(--bg); }
.sb__item-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.sb__item h4 { margin: 0; font-family: var(--display); font-size: 19px; font-weight: 400; line-height: 1.2; }
.sb__item p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* ============================================================
   RECHTSSICHERHEIT
   ============================================================ */
.sb__legal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sb__legal-card { display: grid; gap: 10px; padding: 24px 22px; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; }
.sb__legal-card .sb__ico { width: 30px; height: 30px; color: var(--accent); }
.sb__legal-card h4 { margin: 0; font-family: var(--display); font-size: 17px; font-weight: 400; }
.sb__legal-card p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }

/* ============================================================
   REFERENZEN (named)
   ============================================================ */
.sb__refs { text-align: center; }
.sb__refs-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 38px; margin-bottom: 24px; }
.sb__refs-row img { height: 52px; width: auto; opacity: 0.82; filter: grayscale(1); }
.sb__refs-row img.sb__wide { height: 22px; }
.sb__refs-row img.sb__muni { height: 52px; mix-blend-mode: multiply; opacity: 0.82; }
.sb__wm { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); opacity: 0.82; line-height: 1.05; }
.sb__wm-1 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.sb__wm-2 { font-family: var(--display); font-size: 22px; letter-spacing: -0.01em; }
.sb__refs-note { font-size: 14px; color: var(--ink-3); max-width: 60ch; margin: 0 auto; }

/* ============================================================
   AUDIO / MIKROFONIERUNG
   ============================================================ */
.sb__audio { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.sb__audio-media { position: relative; display: flex; align-items: center; justify-content: center; padding: 28px; }
.sb__audio-media img { width: 100%; max-width: 340px; height: auto; display: block; mix-blend-mode: multiply; }
.sb__audio-badge { position: absolute; top: 14px; right: 14px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); background: var(--bg); border: 1px solid var(--rule); padding: 5px 9px; border-radius: 3px; }
.sb__audio-copy h2 { font-size: clamp(26px, 3.2vw, 42px); margin: 14px 0 18px; }
.sb__audio-lead { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; color: var(--ink-2); margin: 0 0 28px; max-width: 46ch; }
.sb__audio-specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.sb__audio-specs li { display: flex; align-items: center; gap: 14px; }
.sb__audio-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); color: var(--accent); display: grid; place-items: center; }
.sb__audio-specs li > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.sb__audio-specs b { font-family: var(--display); font-size: 18px; font-weight: 500; color: var(--ink); }
.sb__audio-specs li > span:last-child > span { font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 860px) {
  .sb__audio { grid-template-columns: 1fr; }
  .sb__audio-media { order: -1; }
}

/* ============================================================
   ROI
   ============================================================ */
.sb__roi-card {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center;
  padding: clamp(28px, 4vw, 48px);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
}
.sb__roi-side { display: grid; gap: 8px; }
.sb__roi-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.sb__roi-big { font-family: var(--display); font-size: clamp(38px, 5vw, 62px); line-height: 1; color: var(--ink); }
.sb__roi-big small { font-size: 0.4em; color: var(--ink-3); }
.sb__roi-sub { font-size: 14px; color: var(--ink-2); }
.sb__roi-arrow { color: var(--accent); font-size: 30px; }
.sb__roi-after .sb__roi-big { color: var(--accent); }
.sb__roi-foot { margin-top: 16px; font-size: 12.5px; color: var(--ink-3); }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 980px) {
  .sb__flow { grid-template-columns: 1fr; gap: 30px; }
  .sb__step { padding: 0; }
  .sb__step:not(:last-child)::after { display: none; }
  .sb__legal { grid-template-columns: 1fr 1fr; }
  .sb__cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sb__legal { grid-template-columns: 1fr; }
  .sb__roi-card { grid-template-columns: 1fr; text-align: center; }
  .sb__roi-arrow { transform: rotate(90deg); justify-self: center; }
}