/**
 * concierge.css — B2B Concierge Widget
 * Praxis Liebenswert · Orientation Studio
 *
 * Verwendet ausschließlich bestehende Design-Tokens aus os.css
 * (--os-ink, --os-ink-soft, --os-sage, --os-terracotta, --os-border,
 * --os-surface, --os-bg, --os-font-serif, --os-font-sans, --os-radius).
 * Kein SaaS-/Chatbot-Look: textbasierter, ruhiger Launcher als schmale
 * Leiste am unteren Bildschirmrand (kein runder Bubble-Button), Panel
 * klappt editorial nach oben auf.
 *
 * Diese Datei ist eigenständig und überschreibt/verändert os.css nicht.
 */

#pl-concierge-root {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483000; /* über Seiteninhalt, unter nichts Bekanntem auf der Seite */
  font-family: var(--os-font-sans, system-ui, sans-serif);
  /* Safe-Area (iOS Home-Indicator etc.) */
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

#pl-concierge-root * { box-sizing: border-box; }

/* ── LAUNCHER ───────────────────────────────────────────── */
.plc-launcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  background: var(--os-surface, #fff);
  border-top: 1px solid var(--os-border, #C9C2B4);
  color: var(--os-ink, #2E2A25);
  font-size: 0.92rem;
  font-family: inherit;
  text-align: left;
  padding: 0.95rem 1.25rem;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.15s;
}
.plc-launcher:hover { background: var(--os-bg, #FAF7F2); }
.plc-launcher:focus-visible {
  outline: 2px solid var(--os-sage, #7C8B75);
  outline-offset: -2px;
}
.plc-launcher-text { font-weight: 600; }
.plc-launcher-chevron {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  color: var(--os-ink-soft, #55504A);
  transition: transform 0.2s;
}
.plc-launcher[aria-expanded="true"] .plc-launcher-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .plc-launcher-chevron, .plc-launcher, .plc-panel { transition: none !important; }
}

/* Launcher ausgeblendet, wenn Panel offen (Panel übernimmt den Platz) */
#pl-concierge-root.plc-open .plc-launcher-bar { display: none; }

/* ── PANEL ──────────────────────────────────────────────── */
.plc-panel-wrap {
  max-width: 640px;
  margin: 0 auto;
  max-height: min(72vh, 620px);
  display: flex;
  flex-direction: column;
}
.plc-panel-wrap[hidden] { display: none; }

.plc-panel {
  background: var(--os-surface, #fff);
  border: 1px solid var(--os-border, #C9C2B4);
  border-bottom: none;
  border-radius: var(--os-radius, 4px) var(--os-radius, 4px) 0 0;
  box-shadow: 0 -8px 28px rgba(46, 42, 37, 0.09);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 100%;
}

.plc-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--os-border, #C9C2B4);
  flex-shrink: 0;
}
.plc-panel-title {
  font-family: var(--os-font-serif, Georgia, serif);
  font-size: 0.95rem;
  color: var(--os-ink, #2E2A25);
  margin: 0;
}
.plc-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.plc-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: none;
  color: var(--os-ink-soft, #55504A);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  border-radius: var(--os-radius, 4px);
  padding: 0 0.5rem;
}
.plc-iconbtn:hover { color: var(--os-ink, #2E2A25); background: var(--os-bg, #FAF7F2); }
.plc-iconbtn:focus-visible { outline: 2px solid var(--os-sage, #7C8B75); outline-offset: 1px; }
.plc-iconbtn[hidden] { display: none; }

.plc-panel-body {
  padding: 1.5rem 1.25rem 1.25rem;
  overflow-y: auto;
  flex: 1 1 auto;
}

/* ── STEP HEADER ────────────────────────────────────────── */
.plc-step-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-ink-soft, #55504A);
  font-weight: 600;
  display: block;
  margin: 0 0 0.6rem;
}
.plc-step-headline {
  font-family: var(--os-font-serif, Georgia, serif);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--os-ink, #2E2A25);
  margin: 0 0 0.6rem;
}
.plc-step-body {
  font-size: 0.92rem;
  color: var(--os-ink-soft, #55504A);
  line-height: 1.7;
  margin: 0 0 1.25rem;
}

/* ── OPTION LIST ────────────────────────────────────────── */
.plc-options {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.plc-option-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--os-surface, #fff);
  border: 1px solid var(--os-border, #C9C2B4);
  border-radius: var(--os-radius, 4px);
  color: var(--os-ink, #2E2A25);
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
  padding: 0.8rem 1rem;
  min-height: 44px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.plc-option-btn:hover { border-color: var(--os-sage, #7C8B75); background: var(--os-bg, #FAF7F2); }
.plc-option-btn:focus-visible { outline: 2px solid var(--os-sage, #7C8B75); outline-offset: 1px; }
.plc-option-btn[disabled] { opacity: 0.6; cursor: default; }

/* ── RESULT ─────────────────────────────────────────────── */
.plc-result-text {
  font-size: 0.92rem;
  color: var(--os-ink-soft, #55504A);
  line-height: 1.75;
  margin: 0 0 1.25rem;
}
.plc-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}
.plc-btn {
  display: inline-block;
  min-height: 44px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--os-radius, 4px);
  padding: 0.7rem 1.2rem;
  line-height: 1.3;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.plc-btn-primary { background: var(--os-ink, #2E2A25); color: #fff; border-color: var(--os-ink, #2E2A25); }
.plc-btn-primary:hover { background: #46403A; border-color: #46403A; }
.plc-btn-secondary { background: transparent; color: var(--os-ink, #2E2A25); border-color: var(--os-border, #C9C2B4); }
.plc-btn-secondary:hover { border-color: var(--os-sage, #7C8B75); }
.plc-btn:focus-visible { outline: 2px solid var(--os-sage, #7C8B75); outline-offset: 2px; }

/* ── FOOTER ROW: Back / Restart / Exit ─────────────────── */
.plc-panel-footer {
  border-top: 1px solid var(--os-border, #C9C2B4);
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.plc-link-btn {
  background: none;
  border: none;
  padding: 0.5rem 0.25rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 0.84rem;
  color: var(--os-ink-soft, #55504A);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.plc-link-btn:hover { color: var(--os-ink, #2E2A25); border-bottom-color: var(--os-terracotta, #B5654A); }
.plc-link-btn:focus-visible { outline: 2px solid var(--os-sage, #7C8B75); outline-offset: 1px; }
.plc-link-btn[hidden] { display: none; }
.plc-exit-link { font-weight: 600; }
.plc-footer-left { display: flex; align-items: center; gap: 1rem; }

/* ── TRANSPARENCY NOTE ──────────────────────────────────────
   UX-Reduktion (Refinement Round V2): Wortlaut vollständig unverändert
   (siehe concierge-data.js) — hier ausschließlich visuell zurückgenommen:
   kleinere Schrift, kein eigener Flächenhintergrund mehr (verschmilzt mit
   dem Panel statt als separater Block hervorzustechen), engerer Abstand.
   Kontrast weiterhin AA-konform (os-ink-soft auf weißem Panel ≈ 7,98:1). */
.plc-transparency {
  font-size: 0.68rem;
  color: var(--os-ink-soft, #55504A);
  line-height: 1.5;
  padding: 0.6rem 1.25rem;
  border-top: 1px solid var(--os-border, #C9C2B4);
  background: transparent;
  flex-shrink: 0;
}
.plc-transparency a { color: var(--os-ink-soft, #55504A); }

/* ── MOBILE ─────────────────────────────────────────────── */
@media (max-width: 560px) {
  .plc-launcher { padding: 0.85rem 1rem; font-size: 0.88rem; }
  .plc-panel-wrap { max-width: 100%; max-height: 82vh; }
  .plc-panel-body { padding: 1.25rem 1rem 1rem; }
  .plc-panel-header, .plc-panel-footer, .plc-transparency { padding-left: 1rem; padding-right: 1rem; }
  .plc-cta-row { flex-direction: column; }
  .plc-btn { width: 100%; text-align: center; }
}