/* Medora Demo – helles App-Lookalike (Inter, --md-*, iOS-Login, MBN, Messenger) */
:root {
  --primary: #174d7e;
  --primary-soft: #eaf2ff;
  --md-primary: #2563eb;
  --md-ink: #10233f;
  --md-muted: #64748b;
  --md-soft: #94a3b8;
  --md-line: #e6ebf2;
  --md-card: #ffffff;
  --md-shadow-sm: 0 3px 10px rgba(15, 35, 65, 0.05);
  --md-shadow: 0 8px 24px rgba(15, 35, 65, 0.06);
  --x-radius-card: 18px;
  --x-radius-btn: 14px;
  --x-touch: 44px;
  --bg: #f4f8fc;
  --cyan: #29a9c8;
  /* CTA-Verlauf wie in medora-app/style.css (--x-cta-start/--x-cta-end). */
  --cta-start: #174d7e;
  --cta-end: #00b5c7;
  --cta-gradient: linear-gradient(90deg, var(--cta-start), var(--cta-end));
  --accent: #23a8b0;
  --danger: #b42318;
  --danger-soft: #fee2e2;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --ok: #067647;
  --ok-soft: #ecfdf3;
  --tour-z: 8000;
  --banner-h: 36px;
  --panel-w: clamp(280px, 32vw, 380px);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-mark: cubic-bezier(0.2, 0.75, 0.2, 1);
  --dur-soft: 0.7s;
  --x-cta-gradient: linear-gradient(90deg, #174d7e, #00b5c7);
  --x-status-warning-soft: #fef3c7;
  --x-status-warning: #b45309;
  --x-status-info-soft: #eff6ff;
  --x-status-info: #2563eb;
  --x-status-success-soft: #ecfdf3;
  --x-status-success: #067647;
  --x-status-danger-soft: #fef3f2;
  --x-status-danger: #b42318;
  --x-status-neutral-soft: #f1f5f9;
  --x-status-neutral: #64748b;
  --mbn-role: #0e8fbf;
  --mbn-role-soft: rgba(14, 143, 191, 0.12);
  --mbn-danger: #ef4444;
  --mbn-warn: #b45309;
  --mbn-ink: #1e293b;
  --mbn-muted: #94a3b8;
  --mbn-surface: #ffffff;
  --mbn-safe: env(safe-area-inset-bottom, 0px);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* Viele Bausteine setzen display selbst; ohne diese Regel bliebe ein per
   JavaScript gesetztes hidden wirkungslos. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  height: auto;
  background: var(--bg);
  color: var(--md-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
}

button, input { font: inherit; }
a { color: var(--primary); }

/* ── Banner ─────────────────────────────────────────────── */
.demo-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9000;
  height: var(--banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 12px;
  background: linear-gradient(90deg, #174d7e, #0e8fbf 70%);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}
.demo-banner a {
  color: #fff;
  opacity: 0.92;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.demo-banner-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
  flex-shrink: 0;
}

/* ── Shell: Anleitung links, Geräte rechts ──────────────── */
.demo-shell {
  display: grid;
  grid-template-columns: var(--panel-w) minmax(0, 1fr);
  min-height: calc(100svh - var(--banner-h));
  height: auto;
  margin-top: var(--banner-h);
  overflow: visible;
  background:
    radial-gradient(1000px 500px at 40% -5%, rgba(0, 181, 199, 0.1), transparent 55%),
    radial-gradient(900px 480px at 95% 10%, rgba(37, 99, 235, 0.08), transparent 50%),
    linear-gradient(180deg, #eef5fb 0%, #f7fafc 40%, #ffffff 100%);
}

/* Linkes Tour-Panel */
.tour-panel {
  position: relative;
  z-index: var(--tour-z);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 16px;
  background: rgba(255, 255, 255, 0.96);
  border-right: 1px solid var(--md-line);
  box-shadow: 8px 0 28px rgba(15, 35, 65, 0.04);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.tour-panel-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.tour-panel-brand img {
  width: 28px; height: 28px;
  object-fit: contain;
  border-radius: 8px;
}
.tour-panel-brand strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--md-ink);
  letter-spacing: -0.02em;
}
.tour-panel-brand span {
  display: block;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--md-muted);
  margin-top: 1px;
}
.tour-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
}
.tour-progress {
  font-size: 12px;
  font-weight: 750;
  color: var(--primary);
  white-space: nowrap;
}
.tour-track {
  flex: 1;
  height: 5px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.tour-track > i {
  display: block;
  height: 100%;
  background: var(--cta-gradient);
  border-radius: inherit;
  transition: width var(--dur-soft) var(--ease-soft);
}
.tour-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.55;
  color: var(--md-muted);
  padding-right: 4px;
  opacity: 1;
  transition: opacity 0.35s var(--ease-soft), transform 0.4s var(--ease-soft);
}
.tour-body.is-fading {
  opacity: 0;
  transform: translateY(6px);
}
/* Ist der Text länger als der Platz, blendet die letzte Zeile aus –
   so sieht der Anschnitt gewollt aus und lädt zum Scrollen ein. */
.tour-body.has-more {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%);
}
.tour-body .tour-title {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--md-ink);
  line-height: 1.25;
}
.tour-body p {
  margin: 0 0 10px;
}
.tour-body p:last-child { margin-bottom: 0; }
.tour-body strong {
  font-weight: 750;
  color: var(--md-ink);
}
.tour-hint {
  flex-shrink: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #eff6ff, #ecfeff);
  border: 1px solid rgba(37, 99, 235, 0.18);
  font-size: 12.5px;
  font-weight: 700;
  color: #1e40af;
  line-height: 1.4;
  animation: hintSoft 2.4s ease-in-out infinite;
}
.tour-hint[hidden] { display: none !important; }
@keyframes hintSoft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
  50% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08); }
}
.tour-note {
  flex-shrink: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px dashed var(--md-line);
  font-size: 12px;
  font-weight: 600;
  color: var(--md-muted);
  line-height: 1.45;
}
.tour-note[hidden] { display: none !important; }
.tour-note strong {
  display: block;
  color: var(--md-ink);
  font-weight: 800;
  margin-bottom: 3px;
  font-size: 12px;
}
.tour-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding-top: 4px;
  border-top: 1px solid var(--md-line);
}
.tour-actions .btn {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 12.5px;
  transition: filter 0.2s ease, transform 0.2s var(--ease-soft), background 0.2s ease;
}
.tour-actions .btn-primary {
  background: var(--cta-gradient);
}
.tour-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 650;
  color: var(--md-muted);
  margin-left: auto;
  cursor: pointer;
  user-select: none;
}
.tour-toggle input { accent-color: var(--cta-start); }

/* Rechte Geräte-Stage */
.demo-stage {
  position: relative;
  min-height: 0;
  min-width: 0;
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.phone-switcher {
  display: none;
  gap: 6px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--md-line);
  border-radius: 999px;
  box-shadow: var(--md-shadow-sm);
  z-index: 5;
  flex-shrink: 0;
}
.phone-switcher[hidden] { display: none !important; }
.phone-switcher span {
  border: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  color: var(--md-muted);
  transition: background 0.35s ease, color 0.35s ease;
}
.phone-switcher span.is-on {
  background: var(--cta-gradient);
  color: #fff;
}

.phones-viewport[hidden] { display: none !important; }
.phones-viewport {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.phones-scale {
  transform-origin: center center;
  transition: transform 0.85s var(--ease-soft);
  will-change: transform;
}

.demo-phones {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  width: max-content;
  transition: gap 0.75s var(--ease-soft);
}

.phone-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  opacity: 1;
  transform: translateX(0) translateY(0);
  transition: opacity 0.7s var(--ease-soft), transform 0.75s var(--ease-soft);
}
.phone-wrap[hidden] { display: none !important; }
.phone-wrap.is-enter {
  animation: phoneEnter 0.85s var(--ease-soft);
}
.phone-wrap.is-exit {
  animation: phoneExit 0.7s var(--ease-soft) forwards;
  pointer-events: none;
}
@keyframes phoneEnter {
  from { opacity: 0; transform: translateX(56px) scale(0.96); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes phoneExit {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(48px) scale(0.97); }
}

.phone-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--md-line);
  font-size: 12px;
  font-weight: 750;
  color: var(--md-ink);
  box-shadow: var(--md-shadow-sm);
}
.phone-label--anna { color: #5b21b6; }
.phone-label-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18);
}
.phone-label--anna .phone-label-dot {
  background: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

.phone {
  width: 360px;
  height: 740px;
  background: var(--bg);
  border-radius: 28px;
  box-shadow:
    0 0 0 1px rgba(15, 35, 65, 0.08),
    0 24px 48px rgba(15, 35, 65, 0.12);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  /* Größe bleibt beim Dual-Übergang stabil (kein harter Resize) */
  transition: width 0.75s var(--ease-soft), height 0.75s var(--ease-soft),
    border-radius 0.75s var(--ease-soft), opacity 0.7s var(--ease-soft);
}
.phone--anna {
  background: linear-gradient(180deg, #0b1220 0%, #1a2740 40%, #243656 100%);
}

/* Lisa bleibt in Dual-Ansicht gleich groß – nur Anna gleitet ein */
.demo-phones.is-dual .phone-wrap--lisa .phone {
  width: 360px;
  height: 740px;
}

/* Zweites iPhone (Push) etwas kleiner – gleitet weich ein */
.demo-phones.is-dual .phone-wrap--anna {
  margin-left: 0;
  opacity: 0.98;
}
/* Anna bleibt intern 360 px breit und wird verkleinert – sonst würde die
   App-Oberfläche im schmaleren Rahmen seitlich abgeschnitten. */
.demo-phones.is-dual .phone-wrap--anna .phone {
  width: 360px;
  height: 740px;
  transform: scale(0.745);
  transform-origin: top center;
  margin: 0 -46px -189px;
}
.demo-phones.is-dual.focus-anna .phone-wrap--anna {
  opacity: 1;
}
.demo-phones.is-dual.focus-lisa .phone-wrap--anna {
  opacity: 0.94;
}
.demo-phones.is-dual.focus-anna .phone-wrap--lisa {
  opacity: 0.92;
}

/* Klicks nur via Tour; Scroll in Phone-Inhalten bewusst erlaubt */
.demo-phones,
.phone-switcher {
  pointer-events: none;
  user-select: none;
}
.demo-phones a[href^="mailto:"],
.demo-phones a[href^="../"],
.demo-phones .scene-scroll,
.demo-phones .thread-scroll,
.demo-phones .msg-scroll,
.demo-phones .messenger-list-scroll,
.demo-phones .am-modal-box,
.demo-phones .dt2-modal-card,
.demo-phones .mbn-sheet,
.demo-phones .ob-features,
.demo-phones .ob-instance {
  pointer-events: auto;
  touch-action: pan-y;
}

/* Desktop-Tour: Spalten dürfen intern scrollen, ohne die Seite festzunageln */
@media (min-width: 961px) {
  body.is-tour .demo-shell {
    height: calc(100svh - var(--banner-h));
    max-height: calc(100svh - var(--banner-h));
    overflow: hidden;
  }
  body.is-tour .tour-panel,
  body.is-tour .demo-stage {
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile / schmale Viewports: Anleitung oben, Phones darunter */
@media (max-width: 960px) {
  html, body { overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100%; }
  .demo-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    height: auto;
    min-height: calc(100svh - var(--banner-h));
    overflow: visible;
  }
  .tour-panel {
    border-right: none;
    border-bottom: 1px solid var(--md-line);
    max-height: none;
    overflow: visible;
    box-shadow: 0 8px 24px rgba(15, 35, 65, 0.04);
  }
  .tour-body {
    max-height: none;
    flex: 0 1 auto;
    overflow: visible;
  }
  .demo-stage {
    min-height: 0;
    overflow: visible;
    padding-bottom: 20px;
  }
  .phones-viewport {
    flex: 0 0 auto;
    overflow: visible;
    min-height: 0;
  }
  .demo-phones.is-dual.focus-lisa .phone-wrap--anna,
  .demo-phones.is-dual.focus-anna .phone-wrap--lisa {
    display: none !important;
  }
  .phone-switcher:not([hidden]) {
    display: inline-flex;
  }
  .demo-phones.is-dual .phone-wrap--lisa .phone,
  .phone {
    width: min(360px, 88vw);
    height: min(740px, 72vh);
  }
  /* Auf schmalen Geräten steht immer nur ein Telefon – volle Größe */
  .demo-phones.is-dual .phone-wrap--anna .phone {
    width: min(360px, 88vw);
    height: min(740px, 72vh);
    transform: none;
    margin: 0;
  }
}

@media (max-width: 480px) {
  .tour-panel { padding: 12px 12px 10px; gap: 10px; }
  .tour-body { max-height: none; font-size: 13px; }
  .tour-body strong { font-size: 1.05rem; }
  .tour-nav-links { width: 100%; margin-left: 0; justify-content: flex-end; }
  .tour-context dl > div { grid-template-columns: 1fr; gap: 2px; }
  .phone-label { font-size: 11px; }
  .phone,
  .demo-phones.is-dual .phone {
    width: min(100%, 390px);
    height: min(680px, 68vh);
    border-radius: 22px;
  }
}

.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--md-ink);
  background: transparent;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.status-bar-right {
  display: flex;
  gap: 5px;
  align-items: center;
  opacity: 0.7;
  font-size: 11px;
}
.status-bar--lock {
  color: #fff;
  background: transparent;
}

.scenes {
  flex: 1;
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.scene {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
  position: relative;
}
.scene.is-active { display: flex; animation: sceneIn var(--dur-soft) var(--ease-soft); }
@keyframes sceneIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.scene-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 0 14px 88px;
  scrollbar-gutter: stable;
}

/* ── Shared chrome ──────────────────────────────────────── */
.page-head {
  padding: 8px 16px 12px;
  background: linear-gradient(180deg, #eef5fb 0%, var(--bg) 100%);
  flex-shrink: 0;
}
/* Auf der schmalen Handy-Breite darf die Kopfzeile umbrechen, sonst schiebt
   der CTA den Titel seitlich aus dem Rahmen. */
.page-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.page-head-row > div { min-width: 0; }
.page-head-row > div:first-child { flex: 1 1 100%; }
.page-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--md-ink);
  line-height: 1.15;
}
.page-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--md-muted);
  font-weight: 600;
}
.role-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 750;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--x-touch);
  padding: 10px 14px;
  border-radius: var(--x-radius-btn);
  border: none;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s, transform 0.12s;
  line-height: 1.2;
  color: inherit;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: linear-gradient(120deg, var(--primary), #0e8fbf);
  color: #fff;
  box-shadow: 0 6px 16px rgba(24, 120, 160, 0.22);
}
.btn-cta {
  background: var(--cta-gradient);
  color: #fff;
  border-radius: 16px;
  min-height: 54px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(0, 137, 196, 0.28);
}
.btn-ghost {
  background: #fff;
  color: var(--md-ink);
  border: 1px solid var(--md-line);
}
.btn-navy { background: var(--primary); color: #fff; }
.btn-block { width: 100%; }
.btn-sm {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 12.5px;
  border-radius: 12px;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.card {
  background: var(--md-card);
  border: 1px solid var(--md-line);
  border-radius: var(--x-radius-card);
  box-shadow: var(--md-shadow-sm);
  padding: 14px 15px;
}

.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
  position: relative;
}
.avatar.sq { border-radius: 12px; }
.avatar.sm { width: 34px; height: 34px; font-size: 11.5px; }
.avatar.lg { width: 52px; height: 52px; font-size: 16px; }
.avatar .dot {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #fff;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.badge-warn { background: var(--warn-soft); color: #92400e; }
.badge-danger { background: var(--danger-soft); color: #991b1b; }
.badge-info { background: #dbeafe; color: #1e40af; }
.badge-ok { background: var(--ok-soft); color: #166534; }
.badge-muted { background: #f1f5f9; color: var(--md-muted); }

.tag {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 750;
}
.tag-krank { background: var(--danger-soft); color: #991b1b; }
.tag-blue { background: #dbeafe; color: #1e40af; }

.section-label {
  margin: 16px 0 8px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  color: var(--md-soft);
  text-transform: uppercase;
}

.toast-host {
  position: absolute;
  left: 12px; right: 12px; top: 52px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: #fff;
  color: var(--md-ink);
  border: 1px solid var(--md-line);
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 650;
  box-shadow: 0 12px 28px rgba(15, 35, 65, 0.12);
  animation: toastIn 0.3s ease;
}
.toast.ok {
  background: #ecfdf3;
  border-color: #bbf7d0;
  color: #166534;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.icon-btn {
  width: 40px; height: 40px;
  border: 1px solid var(--md-line);
  border-radius: 12px;
  background: #fff;
  color: var(--md-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  padding: 0;
}

/* ── Onboarding / Swift look ────────────────────────────── */
.scene-onboard {
  background: transparent;
  position: relative;
}
.ob-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(320px 280px at 85% 4%, rgba(35, 168, 176, 0.12), transparent 70%),
    radial-gradient(300px 260px at 10% 0%, rgba(23, 77, 126, 0.1), transparent 65%),
    linear-gradient(180deg, #edf7ff 0%, #ffffff 55%);
  z-index: 0;
  pointer-events: none;
}
.scene-onboard > *:not(.ob-bg) { position: relative; z-index: 1; }

.ob-splash {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 24px 28px 32px;
  cursor: default;
  color: inherit;
  text-align: center;
  width: 100%;
}
.ob-splash-logo-wrap {
  position: relative;
  width: 200px; height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ob-splash-logo-wrap::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(35, 168, 176, 0.16), transparent 70%);
}
.ob-splash-logo { position: relative; z-index: 1; object-fit: contain; }
.ob-dots {
  position: absolute;
  inset: 20px 30px;
  background-image:
    radial-gradient(circle, rgba(35, 168, 176, 0.35) 2px, transparent 3px),
    radial-gradient(circle, rgba(35, 168, 176, 0.25) 3px, transparent 4px);
  background-size: 60px 50px, 80px 60px;
  background-position: 10% 20%, 80% 30%;
  opacity: 0.8;
  pointer-events: none;
}
.ob-waves {
  width: 100%;
  height: 56px;
  margin: 8px 0 4px;
  background:
    radial-gradient(120% 40px at 50% 100%, rgba(35, 168, 176, 0.18), transparent),
    radial-gradient(100% 36px at 40% 100%, rgba(23, 77, 126, 0.12), transparent);
  border-radius: 100% 100% 0 0;
}
.ob-splash h1 {
  margin: 10px 0 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--md-ink);
}
.ob-splash h1 em,
.ob-features h2 em,
.ob-instance h1 em {
  font-style: normal;
  color: var(--accent);
}
.ob-splash p {
  margin: 8px 0 0;
  color: var(--md-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  max-width: 280px;
}
.ob-tap-hint {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--md-soft);
}
.ob-dots-bar {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}
.ob-dots-bar i {
  display: block;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(23, 77, 126, 0.18);
}
.ob-dots-bar i.is-on {
  width: 22px;
  background: var(--primary);
}

.ob-features {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 22px 22px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.ob-skip {
  align-self: flex-end;
  border: none;
  background: none;
  color: var(--md-muted);
  font-size: 13.5px;
  font-weight: 650;
  padding: 8px 4px;
  cursor: pointer;
}
.ob-feature-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 12px;
}
.ob-features h2 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--md-ink);
}
.ob-feature-body > p {
  margin: 10px 0 18px;
  color: var(--md-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  max-width: 300px;
}
.ob-mini-phone {
  width: 210px;
  background: #fff;
  border-radius: 28px;
  padding: 14px 12px;
  box-shadow: 0 14px 32px rgba(15, 35, 65, 0.12);
  border: 1px solid rgba(23, 77, 126, 0.08);
  text-align: left;
  transform: rotate(3deg);
}
.ob-mini-phone > strong {
  display: block;
  font-size: 12px;
  margin-bottom: 10px;
}
.ob-mini-card {
  background: #f7f9fc;
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 7px;
}
.ob-mini-card b { display: block; font-size: 11px; font-weight: 700; }
.ob-mini-card span { font-size: 9.5px; color: var(--md-muted); font-weight: 600; }
.ob-mini-card.is-hi { background: rgba(37, 99, 235, 0.1); }
.ob-features .btn-cta { margin-top: 16px; }

.ob-instance {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 22px 30px;
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.ob-instance-ico {
  width: 64px; height: 64px;
  border-radius: 20px;
  background: rgba(35, 168, 176, 0.1);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border: 1.5px solid rgba(35, 168, 176, 0.35);
}
.ob-instance h1 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--md-ink);
}
.ob-instance > p {
  margin: 8px 0 20px;
  color: var(--md-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  max-width: 300px;
}
.ob-org-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 14px;
  border-radius: 18px;
  border: 1.5px solid rgba(35, 168, 176, 0.45);
  background: rgba(35, 168, 176, 0.08);
  cursor: pointer;
  margin-bottom: 16px;
  color: inherit;
}
.ob-org-mark {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--cta-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
.ob-org-card strong { display: block; font-size: 14.5px; font-weight: 800; }
.ob-org-card span span { display: block; font-size: 12px; color: var(--md-muted); font-weight: 600; margin-top: 2px; }
.ob-org-check {
  margin-left: auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}
.ob-footnote {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--md-soft);
  font-weight: 600;
}

/* Native Login */
.nl-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 10px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nl-switch {
  align-self: flex-start;
  border: none;
  background: rgba(23, 77, 126, 0.08);
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.nl-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.nl-header img { width: 46px; height: 46px; object-fit: contain; }
.nl-wordmark {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--md-ink);
}
.nl-header h1 {
  margin: 8px 0 0;
  font-size: 1.35rem;
  font-weight: 800;
}
.nl-header p {
  margin: 0;
  font-size: 13.5px;
  color: var(--md-muted);
  font-weight: 500;
  line-height: 1.4;
  max-width: 300px;
}
.nl-card {
  background: #fff;
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 12px 32px rgba(15, 35, 65, 0.08);
  border: 1px solid rgba(15, 35, 65, 0.04);
}
.nl-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--md-muted);
  margin: 0 0 6px;
}
.nl-field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid var(--md-line);
  border-radius: 14px;
  padding: 0 12px;
  min-height: 48px;
  margin-bottom: 12px;
}
.nl-field input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--md-ink);
  min-height: 46px;
}
.nl-ico { opacity: 0.55; font-size: 14px; }
.nl-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--md-ink);
  margin: 4px 0 14px;
  cursor: default;
}
.nl-remember input { accent-color: var(--primary); }
.nl-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  color: var(--md-soft);
  font-size: 12px;
  font-weight: 650;
}
.nl-or::before, .nl-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(100, 116, 139, 0.25);
}
.nl-help {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--md-line);
  overflow: hidden;
  box-shadow: var(--md-shadow-sm);
}
.nl-help button {
  border: none;
  background: #fff;
  padding: 14px 16px;
  text-align: left;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--cta-start);
  cursor: pointer;
  border-bottom: 1px solid var(--md-line);
}
.nl-help button:last-child { border-bottom: none; }

/* ── Dashboard mobile header ────────────────────────────── */
.dash-mobile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px 8px;
  background: linear-gradient(180deg, #eef5fb 0%, var(--bg) 100%);
  flex-shrink: 0;
}
.dash-mobile-greeting {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  color: var(--md-muted);
}
.dash-mobile-name {
  margin: 2px 0 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.dash-mobile-subtitle {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--md-muted);
  font-weight: 600;
}
.dash-mobile-avatar-wrap { position: relative; flex-shrink: 0; }
.dash-mobile-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 4px 14px rgba(15, 35, 65, 0.12);
}
.dash-mobile-presence-dot {
  position: absolute;
  right: 1px; bottom: 1px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #fff;
}

/* „Offene Punkte“ wie dashboard.php (.dash-open-list / .dash-open-item) */
.dash-open-list {
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: var(--x-radius-card);
  overflow: hidden;
  box-shadow: var(--md-shadow-sm);
}
.dash-open-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 14px 13px 16px;
  border: none;
  border-bottom: 1px solid var(--md-line);
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.dash-open-item:last-child { border-bottom: none; }
.dash-open-item:hover { background: #f8fafc; }
.dash-open-dot {
  position: absolute;
  left: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--md-soft);
}
.dash-open-tone-warn .dash-open-dot { background: #f59e0b; }
.dash-open-tone-info .dash-open-dot { background: var(--x-status-info); }
.dash-open-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--x-status-neutral-soft);
  color: var(--x-status-neutral);
}
.dash-open-icon svg { width: 16px; height: 16px; }
.dash-open-icon-warn { background: var(--x-status-warning-soft); color: var(--x-status-warning); }
.dash-open-icon-info { background: var(--x-status-info-soft); color: var(--x-status-info); }
.dash-open-copy { flex: 1; min-width: 0; }
.dash-open-copy strong { display: block; font-size: 13.5px; font-weight: 750; }
.dash-open-copy small {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 600;
  color: var(--md-muted);
}
.dash-open-badge {
  min-width: 22px; height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 800;
  background: var(--x-status-neutral-soft);
  color: var(--x-status-neutral);
}
.dash-open-badge-warn { background: var(--x-status-warning-soft); color: var(--x-status-warning); }
.dash-open-badge-info { background: var(--x-status-info-soft); color: var(--x-status-info); }
.dash-open-chevron { color: var(--md-soft); display: flex; }
.dash-open-chevron svg { width: 16px; height: 16px; }

.dash-shift { margin-bottom: 16px; }
.dash-shift-empty-text {
  margin: 0 0 8px !important;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--md-soft);
}
.dash-shift-empty-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 750;
  color: var(--primary);
  cursor: pointer;
}
.dash-shift .pill-heute {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.dash-shift h2 { margin: 8px 0 4px; font-size: 1.25rem; font-weight: 800; }
.dash-shift p {
  margin: 0 0 14px;
  color: var(--md-muted);
  font-size: 13px;
  font-weight: 600;
}
.tasks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 10px;
}
.tasks-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ea580c;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.task-list {
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: var(--x-radius-card);
  overflow: hidden;
}
.task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  border-bottom: 1px solid var(--md-line);
}
.task-item:last-child { border-bottom: none; }
.task-item:hover { background: #f8fafc; }
.task-warn {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--danger-soft);
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 800;
}
.task-item strong { display: block; font-size: 13.5px; font-weight: 750; }
.task-item span span {
  font-size: 12px;
  color: var(--md-muted);
  font-weight: 600;
}
.task-count {
  margin-left: auto;
  background: #ef4444;
  color: #fff;
  min-width: 22px; height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.overview-card {
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--md-shadow-sm);
}
.overview-card .ico {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.overview-card .ico.green { background: #dcfce7; color: #16a34a; }
.overview-card .ico.purple { background: #ede9fe; color: #7c3aed; }
.overview-card .ico.blue { background: var(--x-status-info-soft); color: var(--x-status-info); }
.overview-card .ico.gray { background: var(--x-status-neutral-soft); color: var(--x-status-neutral); }
.overview-card strong {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.overview-card span {
  font-size: 12px;
  color: var(--md-muted);
  font-weight: 650;
  line-height: 1.3;
}

/* ── Ausfallmanager ─────────────────────────────────────── */
.am-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.am-stats-sm .am-stat { padding: 10px; }
.am-stat {
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--md-shadow-sm);
}
.am-stat strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.am-stat span {
  font-size: 11.5px;
  color: var(--md-muted);
  font-weight: 650;
}

.am-case {
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: 20px;
  padding: 14px;
  box-shadow: var(--md-shadow-sm);
}
.am-case-hero {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.am-case-hero-text strong { display: block; font-size: 1.05rem; font-weight: 800; }
.am-case-hero-text > span {
  display: block;
  font-size: 12.5px;
  color: var(--md-muted);
  font-weight: 600;
  margin-top: 2px;
}
.am-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.am-chip {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--md-ink);
  font-size: 11px;
  font-weight: 750;
}
.am-chip-warn { background: var(--warn-soft); color: #92400e; }
.am-chip-danger { background: var(--danger-soft); color: #991b1b; }
.am-chip-ok { background: var(--ok-soft); color: #166534; }
.am-chip-info { background: #dbeafe; color: #1d4ed8; }

.am-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 12px;
  padding-bottom: 2px;
}
.am-day {
  min-width: 64px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--md-line);
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  color: inherit;
}
.am-day span { font-size: 11px; font-weight: 700; color: var(--md-muted); }
.am-day strong { font-size: 16px; font-weight: 800; }
.am-day em { font-style: normal; font-size: 10px; font-weight: 750; color: #b45309; }
.am-day.is-on {
  background: var(--primary-soft);
  border-color: rgba(23, 77, 126, 0.35);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}
.am-day:disabled { opacity: 0.45; cursor: default; }

.am-panel {
  border: 1px solid var(--md-line);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 10px;
  background: #fbfdff;
}
.am-panel-h {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--md-soft);
  margin-bottom: 10px;
}
.am-selshift {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.am-selshift strong { display: block; font-size: 14px; font-weight: 800; }
.am-selshift span { font-size: 12px; color: var(--md-muted); font-weight: 600; }
.am-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  background: #f1f5f9;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
}

.am-cand-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.am-cand-filter-pill {
  border: 1px solid var(--md-line);
  background: #fff;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 11.5px;
  font-weight: 750;
  color: var(--md-muted);
  cursor: pointer;
}
.am-cand-filter-pill.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.cand-list { display: flex; flex-direction: column; gap: 8px; }
.am-cand, .cand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--md-line);
  border-radius: 14px;
  background: #fff;
  flex-wrap: wrap;
}
/* Auf 360 px Breite müssen Status und Button umbrechen dürfen, sonst legt sich
   das Status-Label über den Wohnbereich-Text. */
.am-cand-main { flex: 1 1 55%; min-width: 118px; }
.am-cand-name, .cand strong { display: block; font-size: 13.5px; font-weight: 800; }
.am-cand-role, .cand span { font-size: 11.5px; color: var(--md-muted); font-weight: 600; }
.am-cand-status {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 750;
  color: #2563eb;
}
.am-cand.is-asked, .cand.is-asked {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.am-cand.is-asked .btn, .cand.is-asked .btn { background: #1d4ed8; }
.am-cand.is-accepted {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.am-cand.is-accepted .btn { background: #166534 !important; }
.am-cand.is-accepted .am-cand-status { color: #166534; }
.am-cand.is-declined {
  background: #fef2f2;
  border-color: #fecaca;
}
.am-cand.is-declined .btn { background: #991b1b !important; }
.am-cand.is-declined .am-cand-status { color: #991b1b; }

.am-empty {
  margin: 18px 4px 8px;
  padding: 16px 14px;
  border-radius: 16px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--md-muted);
  line-height: 1.45;
  text-align: center;
}
.am-empty[hidden] { display: none !important; }
.am-head-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex: 1 1 100%;
  min-width: 0;
}
.ds-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 14px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(120deg, var(--md-primary), var(--cta-end));
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(24, 120, 160, 0.22);
}
.ds-cta svg { width: 15px; height: 15px; flex-shrink: 0; }
.ds-cta.is-sim-press { transform: scale(0.97); filter: brightness(0.96); }

/* Krankmeldung-Sheet (1:1 zu medora-app) */
.am-modal {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.am-modal[hidden] { display: none !important; }
.am-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.am-modal.is-open .am-modal-backdrop { opacity: 1; }
.am-modal-box {
  position: relative;
  width: 100%;
  max-height: 90%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 14px 16px 18px;
  box-shadow: 0 -12px 40px rgba(15, 35, 65, 0.18);
  transform: translateY(18px);
  opacity: 0.98;
  transition: transform 0.32s var(--ease-soft), opacity 0.28s ease;
}
.am-modal.is-open .am-modal-box {
  transform: none;
  opacity: 1;
}
.am-modal-grabber {
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: #e2e8f0;
  margin: 2px auto 12px;
}
.am-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}
.am-modal-x {
  background: #f1f5f9;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  color: #64748b;
  flex-shrink: 0;
  cursor: pointer;
}
.am-krank-head-ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e6ebf2;
}
.am-krank-head-ico svg { width: 17px; height: 17px; }
.am-krank-head-txt { flex: 1; min-width: 0; padding-top: 2px; }
.am-krank-head-txt strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--md-ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.am-krank-lead {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--md-muted);
  line-height: 1.4;
  font-weight: 500;
}
.am-krank-form { display: flex; flex-direction: column; gap: 0; }
.am-krank-section {
  margin: 12px 0 0;
  padding: 12px 12px 4px;
  background: #f8fafc;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
}
.am-krank-section--optional { background: #fff; }
.am-krank-section-h {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 10px;
}
.am-krank-section-h b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--md-ink);
}
.am-krank-section-h b em {
  font-style: normal;
  font-weight: 600;
  color: var(--md-soft);
}
.am-krank-section-h > div > span {
  display: block;
  font-size: 11px;
  color: var(--md-soft);
  font-weight: 550;
  margin-top: 2px;
  line-height: 1.35;
}
.am-krank-step {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e6ebf2;
}
.am-krank-step svg { width: 14px; height: 14px; }
.am-krank-step--soft { background: #f8fafc; color: #94a3b8; }
.am-fld {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 11px;
}
.am-fld > span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--md-muted);
}
.am-fld-value {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--md-line);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: var(--md-ink);
}
.am-fld-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.am-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.am-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.am-krank-foot .am-btn {
  min-height: 46px;
  padding: 11px 16px;
  font-size: 13.5px;
}
.am-krank-foot .am-btn-primary { flex: 1; }
.am-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 14px;
  padding: 10px 14px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  line-height: 1.2;
}
.am-btn-primary {
  background: linear-gradient(120deg, var(--md-primary), var(--cta-end));
  color: #fff;
  box-shadow: 0 6px 16px rgba(24, 120, 160, 0.22);
}
.am-btn-ghost {
  background: #fff;
  color: var(--md-muted);
  border: 1px solid var(--md-line);
}
.am-btn.is-sim-press { transform: scale(0.97); filter: brightness(0.96); }
.am-modal-hint,
.am-krank-hint {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--md-soft);
  font-weight: 550;
}

.am-finding {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  margin-bottom: 10px;
  border-radius: 16px;
  border: 1px dashed rgba(14, 143, 191, 0.45);
  background: linear-gradient(135deg, #eef9fc, #f4f8fc);
}
.am-finding strong { display: block; font-size: 13.5px; font-weight: 800; }
.am-finding span:last-child {
  display: block;
  font-size: 12px;
  color: var(--md-muted);
  font-weight: 600;
  margin-top: 2px;
}
.am-spinner {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(14, 143, 191, 0.25);
  border-top-color: #0e8fbf;
  animation: amSpin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes amSpin { to { transform: rotate(360deg); } }
.am-panel.is-revealed {
  animation: amReveal 0.65s var(--ease-soft);
}
@keyframes amReveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.am-inform {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ecfeff, #eff6ff);
  border: 1px solid rgba(14, 143, 191, 0.28);
}
.am-inform-text strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 3px;
}
.am-inform-text span {
  font-size: 12.5px;
  color: var(--md-muted);
  font-weight: 600;
  line-height: 1.4;
}

.am-actions {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 8px;
  margin-top: 4px;
}

/* Liste / Suche / Tabs */
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #eef2f7;
  border-radius: 14px;
  padding: 11px 13px;
  margin-bottom: 10px;
  color: var(--md-soft);
}
.search input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 13.5px;
  color: var(--md-ink);
  font-weight: 600;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}
.chip {
  border: 1px solid var(--md-line);
  background: #fff;
  color: var(--primary);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.chip.is-on {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.tabs {
  display: flex;
  gap: 14px;
  border-bottom: 1px solid var(--md-line);
  margin-bottom: 12px;
  overflow-x: auto;
}
.tab {
  border: none;
  background: none;
  padding: 8px 2px 10px;
  font-size: 13px;
  font-weight: 750;
  color: var(--md-muted);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab.is-on {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.case-card { margin-bottom: 10px; position: relative; }
.case-card.is-new {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2), var(--md-shadow-sm);
}
.case-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.urgency {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 750;
}
.urgency::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
}
.urgency.hoch::before { background: #ef4444; }
.urgency.mittel::before { background: #f59e0b; }
.case-main {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.case-main strong { display: block; font-size: 14px; font-weight: 800; }
.case-main span { font-size: 12px; color: var(--md-muted); font-weight: 600; }
.case-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 650;
  color: var(--md-muted);
}
.case-foot button.linkish {
  background: none;
  border: none;
  color: var(--md-primary);
  font-weight: 750;
  cursor: pointer;
  padding: 0;
  font-size: 12.5px;
}

/* ── Diensttausch ───────────────────────────────────────── */
.seg {
  display: flex;
  gap: 6px;
  background: #eef2f7;
  padding: 4px;
  border-radius: 14px;
  margin: 4px 0 12px;
}
.seg button {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 11px;
  min-height: 38px;
  font-size: 12.5px;
  font-weight: 750;
  color: var(--md-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.seg button.is-on {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(23, 77, 126, 0.25);
}
.seg .n {
  display: inline-flex;
  min-width: 18px; height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  font-size: 11px;
}
.seg button:not(.is-on) .n {
  background: #dbeafe;
  color: var(--primary);
}
.info-banner {
  background: #e0f2fe;
  color: #0c4a6e;
  border-radius: 14px;
  padding: 11px 13px;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.4;
  margin-bottom: 8px;
}
.swap-card { margin-bottom: 12px; }
.swap-card.is-sent { border-color: #bbf7d0; background: #f8fffb; }
.swap-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.swap-head strong { display: block; font-size: 14px; font-weight: 800; }
.swap-head span { font-size: 12px; color: var(--md-muted); font-weight: 600; }
.swap-head .badge { margin-left: auto; }
.swap-leg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #f8fafc;
  border-radius: 12px;
}
.swap-leg .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.swap-leg .dot.y { background: #f59e0b; }
.swap-leg .dot.g { background: #22c55e; }
.swap-leg strong { display: block; font-size: 13px; font-weight: 800; }
.swap-leg span { font-size: 11.5px; color: var(--md-muted); font-weight: 600; }
.swap-leg .side {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--md-soft);
}
.swap-arrow {
  text-align: center;
  color: var(--md-soft);
  font-size: 16px;
  margin: 4px 0;
}
.swap-comment {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--md-muted);
  font-weight: 600;
  line-height: 1.4;
}
.swap-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8px;
  margin-top: 12px;
}

/* ── Messenger 1:1 (Website/App-Look) ───────────────────── */
.msg-topbar,
.messenger-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 12px;
  background: #fff;
  border-bottom: 1px solid var(--md-line);
  flex-shrink: 0;
}
.msg-topbar-left,
.messenger-list-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.msg-head-icon,
.messenger-list-brand-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.messenger-list-title {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--md-ink);
  line-height: 1.15;
}
.messenger-list-brand-text { display: flex; flex-direction: column; gap: 1px; }
.avail {
  font-size: 12px;
  font-weight: 700;
  color: #15803d;
}
.msg-topbar-actions,
.messenger-list-head-actions { display: flex; gap: 6px; }
.msg-scroll,
.messenger-list-scroll { background: #f4f7fb; }
.messenger-conv-list { display: flex; flex-direction: column; }
.messenger-conv-section.section-label { margin-top: 10px; }

.messenger-e2ee-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 12px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #eaf7ee;
  color: #15803d;
  font-size: 12px;
  font-weight: 650;
}
.messenger-e2ee-system-line {
  align-self: center;
  background: #eaf7ee;
  color: #15803d;
  font-size: 11.5px;
  font-weight: 650;
  padding: 6px 12px;
  border-radius: 999px;
  margin: 4px 0 10px;
  text-align: center;
}

.conv,
.messenger-conv-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 8px;
  border: none;
  border-bottom: 1px solid var(--md-line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: background 0.12s ease;
}
.conv:hover,
.messenger-conv-btn:hover { background: #f1f5f9; }
.conv:active,
.messenger-conv-btn:active { background: #e8eef4; }
.messenger-conv-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  position: relative;
  letter-spacing: 0.02em;
}
.messenger-conv-avatar--group {
  border-radius: 14px;
  background: linear-gradient(145deg, #60a5fa, #1e40af) !important;
}
.messenger-conv-avatar .dot {
  position: absolute;
  right: 0; bottom: 1px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #fff;
}
.messenger-conv-body,
.conv-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.messenger-conv-top,
.conv-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.messenger-conv-name,
.conv-top strong { font-size: 14.5px; font-weight: 750; color: #143d5c; }
.messenger-conv-meta time,
.conv-top time {
  font-size: 11.5px;
  color: var(--md-soft);
  font-weight: 650;
  white-space: nowrap;
}
.messenger-conv-preview,
.conv-preview {
  margin: 0;
  font-size: 12.5px;
  color: var(--md-muted);
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 11px;
  color: #0f766e;
  font-weight: 700;
}
.conv-meta svg { width: 12px; height: 12px; }
.unread-pill {
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.thread-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 10px;
  background: #fff;
  border-bottom: 1px solid var(--md-line);
  flex-shrink: 0;
}
.thread-head button.back {
  width: 40px; height: 40px;
  border: none;
  border-radius: 12px;
  background: #f1f5f9;
  cursor: pointer;
  color: var(--md-ink);
  font-size: 18px;
}
.thread-head-meta { flex: 1; min-width: 0; }
.thread-head strong { display: block; font-size: 15px; font-weight: 800; }
.thread-head span {
  font-size: 12px;
  color: var(--md-muted);
  font-weight: 600;
}
.thread-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background:
    linear-gradient(180deg, rgba(238, 243, 248, 0.9), #e8eef5 100%);
}

.messenger-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  max-width: 88%;
}
.messenger-bubble-row.mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.messenger-bubble-row.theirs { align-self: flex-start; }
.messenger-bubble-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}
.messenger-bubble-stack {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}
.messenger-sender-name {
  font-size: 11px;
  font-weight: 700;
  color: #0f766e;
  margin: 0 2px 2px;
}
.messenger-bubble-row.mine .messenger-sender-name { display: none; }
.messenger-bubble {
  max-width: 100%;
  min-width: 72px;
  width: fit-content;
  padding: 6px 10px 4px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  box-shadow: 0 1px 1px rgba(15, 35, 65, 0.06);
}
.messenger-bubble.mine {
  background: #d9fdd3;
  color: #111b21;
  border-bottom-right-radius: 4px;
}
.messenger-bubble.theirs {
  background: #fff;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(15, 35, 65, 0.08);
}
.messenger-bubble-text {
  display: block;
  padding: 2px 2px 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.messenger-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
  padding: 0 2px 2px;
  font-size: 10.5px;
  color: rgba(17, 27, 33, 0.5);
}
.messenger-ticks {
  letter-spacing: -2px;
  color: rgba(17, 27, 33, 0.45);
  font-size: 12px;
}
.messenger-ticks.read { color: #53bdeb; }

.composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--md-line);
  flex-shrink: 0;
}
.composer-plus {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: #f1f5f9;
  color: var(--md-ink);
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
}
.composer input {
  flex: 1;
  min-height: 42px;
  border: 1px solid var(--md-line);
  border-radius: 999px;
  padding: 8px 14px;
  outline: none;
  font-size: 13.5px;
  font-weight: 500;
  background: #f8fafc;
}
.composer .send {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Done ───────────────────────────────────────────────── */
.scene-done { background: linear-gradient(180deg, #e8f2fa, #fff 40%); }
.done-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 22px 100px;
  text-align: center;
  gap: 12px;
}
.done-check {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.done-wrap h1 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.done-wrap p {
  margin: 0;
  color: var(--md-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  max-width: 300px;
}
.done-steps {
  list-style: none;
  padding: 0;
  margin: 10px 0 8px;
  width: 100%;
  text-align: left;
}
.done-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: 12px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
}
.done-steps li::before {
  content: "✓";
  color: #16a34a;
  font-weight: 800;
}

/* ── Mobile Bottom Nav + Sheets ─────────────────────────── */
.mbn-root {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.mbn-root[hidden] { display: none !important; }
.mbn-root > * { pointer-events: auto; }

.mbn-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 42;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 2px;
  padding: 6px 8px calc(6px + var(--mbn-safe));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -6px 22px rgba(15, 23, 42, 0.07);
}
.mbn-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-height: 46px;
  padding: 6px 2px 4px;
  border: none;
  background: none;
  color: var(--mbn-muted);
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
}
.mbn-item .mbn-ico,
.mbn-item .mbn-ico svg {
  width: 22px; height: 22px;
  display: block;
}
.mbn-item.is-active,
.mbn-item.is-on { color: var(--mbn-role); }
.mbn-item.mbn-dyn--danger { color: var(--mbn-danger); }
.mbn-badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 18px);
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--mbn-danger);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1.5px #fff;
}
.mbn-badge[hidden] { display: none !important; }

.mbn-center {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mbn-logo-btn {
  position: relative;
  width: 58px; height: 58px;
  margin-bottom: 4px;
  padding: 2.5px;
  border: 0;
  border-radius: 50%;
  background: var(--mbn-role);
  box-shadow:
    0 10px 26px -8px rgba(15, 23, 42, 0.22),
    0 3px 8px rgba(15, 23, 42, 0.06),
    0 0 0 4px rgba(255, 255, 255, 0.92);
  cursor: pointer;
  transform: translateY(-15px);
}
.mbn-logo-btn.mbn-tap {
  animation: mbn-tap-scale 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes mbn-tap-scale {
  0% { transform: translateY(-15px) scale(1); }
  40% { transform: translateY(-15px) scale(0.96); }
  100% { transform: translateY(-15px) scale(1); }
}
.mbn-logo-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
}
.mbn-logo-inner img {
  width: 30px; height: 30px;
  object-fit: contain;
  pointer-events: none;
}
.mbn-logo-alert {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 17px; height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--mbn-danger);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}

/* Overlay: leicht, kein Heavy-Blur */
.mbn-overlay {
  position: absolute;
  inset: 0;
  z-index: 45;
  background: rgba(15, 23, 42, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.mbn-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mbn-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 48;
  max-height: 78%;
  overflow-y: auto;
  padding: 10px 16px calc(20px + var(--mbn-safe));
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 40px rgba(15, 35, 65, 0.14);
  transform: translateY(102%);
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}
.mbn-sheet.is-open { transform: translateY(0); }
.mbn-sheet.is-rb-hub { max-height: 86%; }
.mbn-sheet[hidden] { display: block !important; }
.mbn-sheet:not(.is-open) { pointer-events: none; }
.mbn-more-view[hidden] { display: none !important; }
.mbn-sheet-head--schulung { gap: 10px; }
.mbn-schulung-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: var(--mbn-role, #174d7e);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
}
.mbn-schulung-back svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.mbn-schulung-title-block { margin: 0 0 14px; }
.mbn-schulung-title-block .mbn-sheet-title {
  display: block;
  margin: 0 0 6px;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #0f172a;
}
.mbn-schulung-lead {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #64748b;
  font-weight: 500;
}
.mbn-rb-cockpit-view .mbn-schulung-title-block { margin-bottom: 8px; }
.mbn-rb-cockpit-pane { padding: 0 2px 12px; }
.mbn-rb-cockpit-pane[hidden] { display: none !important; }
.mbn-rb-form { display: flex; flex-direction: column; gap: 2px; }
.mbn-rb-krank-form { gap: 0; }
.mbn-rb-krank-section {
  margin: 0 0 14px;
  padding: 12px 12px 4px;
  border: 1px solid #e4eaf2;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfcfe 0%, #fff 40%);
}
.mbn-rb-krank-h {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 10px;
}
.mbn-rb-krank-h b {
  font-size: 0.95rem;
  color: #10233f;
}
.mbn-rb-krank-h span {
  font-size: 0.78rem;
  color: #5a6b85;
  font-weight: 500;
}
.mbn-rb-krank-h em { font-style: normal; font-weight: 500; color: #5a6b85; }
.mbn-rb-field { display: block; margin-bottom: 12px; }
.mbn-rb-field > span {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  color: #5a6b85;
}
.mbn-rb-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid #d8e0ec;
  border-radius: 12px;
  font: inherit;
  font-size: 0.95rem;
  background: #fff;
  color: #10233f;
}
.mbn-rb-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mbn-rb-results { margin-top: 6px; }
.mbn-rb-chosen {
  margin-top: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #067647;
}
.mbn-rb-muted {
  margin: 0;
  color: #5a6b85;
  font-size: 0.9rem;
}
.mbn-rb-result {
  border: 1px solid #e4eaf2;
  border-radius: 12px;
  padding: 11px 12px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: #fff;
}
.mbn-rb-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.mbn-rb-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475467;
  white-space: nowrap;
}
.mbn-rb-mini {
  font: inherit;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #d8e0ec;
  background: #fff;
  color: inherit;
  display: inline-block;
}
.mbn-rb-num-group { margin-bottom: 4px; }
.mbn-rb-num-h {
  font-size: 0.82rem;
  font-weight: 700;
  margin: 14px 0 8px;
  color: #5a6b85;
}
.mbn-rb-submit {
  margin-top: 4px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 13px 16px;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(135deg, #0e8fbf, #14b8a6);
  box-shadow: 0 4px 14px rgba(14, 143, 191, 0.28);
}
.mbn-rb-status {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
}
.mbn-rb-status--ok {
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
  color: #067647;
}
.mbn-rb-status[hidden] { display: none !important; }
.mbn-rb-list { margin-top: 4px; }
.mbn-rb-case-info {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7fafc;
  border: 1px solid #e4eaf2;
}
.mbn-rb-case-meta {
  margin: 0;
  font-size: 0.88rem;
  color: #10233f;
  line-height: 1.4;
}
.mbn-sheet-grip {
  width: 40px; height: 4px;
  margin: 2px auto 12px;
  border-radius: 999px;
  background: #e2e8f0;
  display: block;
}
.mbn-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
}
.mbn-sheet-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mbn-muted);
}
.mbn-sheet-close {
  width: 32px; height: 32px;
  border: none;
  border-radius: 10px;
  background: #f1f5f9;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--md-ink);
}

.mbn-actions { display: flex; flex-direction: column; gap: 6px; }
.mbn-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--md-line);
  border-radius: 16px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.mbn-action-ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--ico-bg, #eaf2ff);
  color: var(--ico-fg, var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mbn-action-ico svg { width: 20px; height: 20px; }
.mbn-action-label { display: block; font-size: 14px; font-weight: 800; }
.mbn-action-sub { display: block; font-size: 12px; color: var(--md-muted); font-weight: 600; margin-top: 2px; }

.mbn-profile-card {
  padding: 4px 2px 14px;
  border-bottom: 1px solid var(--md-line);
  margin-bottom: 14px;
}
.mbn-profile-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mbn-profile-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
}
.mbn-profile-name { display: block; font-size: 15px; font-weight: 800; }
.mbn-profile-role { display: block; font-size: 12.5px; color: var(--md-muted); font-weight: 600; margin-top: 2px; }
.mbn-profile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  gap: 8px;
}
.mbn-profile-presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #15803d;
}
.mbn-profile-presence i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
}
.mbn-profile-link {
  border: none;
  background: none;
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
  padding: 0;
}

.mbn-more-group { margin-bottom: 14px; }
.mbn-more-group-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mbn-muted);
  margin: 0 0 8px 2px;
}
.mbn-more-card {
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--md-shadow-sm);
}
.mbn-more-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 12px;
  border: none;
  border-bottom: 1px solid var(--md-line);
  background: #fff;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.mbn-more-row:last-child { border-bottom: none; }
.mbn-more-ico {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--mbn-ico-bg, #f1f5f9);
  color: var(--mbn-ico-fg, var(--md-ink));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mbn-more-ico svg { width: 18px; height: 18px; }
.mbn-more-body { flex: 1; min-width: 0; }
.mbn-more-label { display: block; font-size: 14px; font-weight: 750; }
.mbn-more-sub { display: block; font-size: 12px; color: var(--md-muted); font-weight: 600; margin-top: 1px; }
.mbn-more-badge {
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--mbn-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mbn-more-badge--danger { background: var(--mbn-danger); }
.mbn-more-chevron {
  color: var(--md-soft);
  font-size: 18px;
  font-weight: 500;
}

/* Spotlight: dezenter Ring – Tipps liegen im linken Panel */
.tour-spotlight {
  position: fixed;
  z-index: 7600;
  pointer-events: none;
  border-radius: 16px;
  box-shadow:
    0 0 0 2.5px rgba(37, 99, 235, 0.85),
    0 0 0 8px rgba(37, 99, 235, 0.12);
  transition:
    top 0.22s var(--ease-soft),
    left 0.22s var(--ease-soft),
    width 0.22s var(--ease-soft),
    height 0.22s var(--ease-soft),
    opacity 0.2s ease;
  display: none;
  background: transparent;
  opacity: 0;
}
.tour-spotlight.is-on {
  display: block;
  opacity: 1;
  animation: spotPulse 2.8s ease-in-out infinite;
}
@keyframes spotPulse {
  0%, 100% { box-shadow: 0 0 0 2.5px rgba(37, 99, 235, 0.85), 0 0 0 8px rgba(37, 99, 235, 0.12); }
  50% { box-shadow: 0 0 0 2.5px rgba(37, 99, 235, 0.7), 0 0 0 14px rgba(37, 99, 235, 0.06); }
}

[data-tour-hot].is-hot {
  position: relative;
  z-index: 5;
  transition: box-shadow 0.4s var(--ease-soft), transform 0.35s var(--ease-soft);
}

/* Präzise Klickmarkierung: sitzt auf dem Ziel, fährt nicht heran */
.demo-phones { position: relative; }
.sim-click {
  position: absolute;
  z-index: 120;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  pointer-events: none;
  left: 0;
  top: 0;
  opacity: 0;
}
.sim-click[hidden] { display: none !important; }
.sim-click.is-on { opacity: 1; }
.sim-click-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(15, 35, 65, 0.35);
}
.sim-click-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid #2563eb;
  background: rgba(37, 99, 235, 0.12);
  transform: scale(0.55);
  opacity: 0;
}
.sim-click.is-on .sim-click-ring {
  animation: clickMark 0.42s var(--ease-mark);
}
.sim-pointer {
  position: absolute;
  z-index: 130;
  width: 18px;
  height: 22px;
  margin: -2px 0 0 -2px;
  pointer-events: none;
  left: 0;
  top: 0;
  opacity: 0;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.38));
}
.sim-pointer[hidden] { display: none !important; }
.sim-pointer.is-on { opacity: 1; }
.sim-pointer svg { display: block; }
@keyframes clickMark {
  0% { transform: scale(0.45); opacity: 0.95; }
  70% { transform: scale(1.15); opacity: 0.55; }
  100% { transform: scale(1.35); opacity: 0; }
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.anna-push-btn.is-sim-press,
.dt2-btn-primary.is-sim-press,
.dt2-msubmit.is-sim-press,
[data-tour-hot].is-sim-press {
  transform: scale(0.96);
  filter: brightness(1.04);
  transition: transform 0.2s ease, filter 0.2s ease;
}

/* Diensttausch-Pushes haben keine Aktionsknöpfe (keine iOS-Kategorie) */
.anna-push.is-swap .anna-push-actions { display: none; }

/* ── Annas App-Ansicht (Diensttausch, „Angebote für mich“) ── */
.anna-app {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
  animation: annaAppIn 0.45s var(--ease-soft);
}
.anna-app[hidden] { display: none !important; }
@keyframes annaAppIn {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: none; }
}
.anna-app .page-head { padding: 14px 16px 8px; }
.anna-app .page-back {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  margin-right: 8px;
}
.anna-app .page-head-row { display: flex; align-items: center; }
.anna-app .dt2-tabs { margin: 0 16px 10px; }
.anna-app-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px 18px;
}
.anna-app-hint {
  margin: 14px 0 0;
  text-align: center;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--md-soft);
}
.dt2-card--offer {
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: var(--x-radius-card);
  padding: 14px;
  box-shadow: var(--md-shadow-sm);
}
.dt2-card-head { display: flex; align-items: center; gap: 10px; }
.dt2-card-meta { flex: 1; min-width: 0; }
.dt2-card-meta strong { display: block; font-size: 14px; font-weight: 800; color: var(--md-ink); }
.dt2-card-meta span { font-size: 11.5px; font-weight: 620; color: var(--md-soft); }
.dt2-shift {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid var(--md-line);
}
.dt2-shift-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-soft);
}
.dt2-shift strong { display: block; font-size: 14px; font-weight: 800; color: var(--md-ink); margin-top: 2px; }
.dt2-shift > span:last-child { font-size: 12px; font-weight: 620; color: var(--md-muted); }
.dt2-note {
  margin: 10px 0 0;
  padding-left: 8px;
  border-left: 2px solid #dbeafe;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--md-muted);
  line-height: 1.45;
}
.dt2-expand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--md-line);
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
  font-weight: 750;
  color: var(--primary);
  cursor: default;
}
.dt2-expand.is-open .dt2-expand-chevron { transform: rotate(180deg); }
.dt2-expand-chevron { transition: transform 0.25s var(--ease-soft); }
.dt2-counter-form {
  margin-top: 12px;
  display: grid;
  gap: 10px;
  animation: annaAppIn 0.4s var(--ease-soft);
}
.dt2-counter-form[hidden] { display: none !important; }
.dt2-counter-q {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--md-muted);
}
.dt2-counter-send { margin-top: 2px; }

/* ── Anna Lock-Screen + Push ────────────────────────────── */
.anna-lock[hidden] { display: none !important; }
.anna-lock {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 28px 16px 24px;
  min-height: 0;
  color: #fff;
  overflow: hidden;
}
.anna-lock-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 420px at 20% 0%, rgba(0, 181, 199, 0.35), transparent 55%),
    radial-gradient(600px 380px at 90% 20%, rgba(124, 58, 237, 0.28), transparent 50%),
    linear-gradient(180deg, #101a2e 0%, #1c2d4a 55%, #243656 100%);
  z-index: 0;
}
.anna-lock-clock,
.anna-push,
.anna-push-result,
.anna-lock-hint {
  position: relative;
  z-index: 1;
}
.anna-lock-clock {
  text-align: center;
  margin: 36px 0 28px;
}
.anna-lock-clock time {
  display: block;
  font-size: 64px;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
}
.anna-lock-clock span {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  opacity: 0.85;
}
.anna-push {
  background: rgba(255, 255, 255, 0.94);
  color: var(--md-ink);
  border-radius: 22px;
  padding: 14px 14px 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  animation: pushIn 0.7s var(--ease-soft);
  transition: transform 0.35s var(--ease-soft), box-shadow 0.35s ease;
}
@keyframes pushIn {
  from { opacity: 0; transform: translateY(-18px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.anna-push-app {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--primary);
}
.anna-push-app img {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: #fff;
}
.anna-push-app em {
  margin-left: auto;
  font-style: normal;
  font-weight: 650;
  color: var(--md-soft);
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
}
.anna-push-title {
  display: block;
  font-size: 15.5px;
  font-weight: 800;
  margin: 0 0 4px;
}
.anna-push-body,
.anna-push-body2 {
  margin: 0 0 4px;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.35;
  color: #334155;
}
.anna-push-body2[hidden] { display: none !important; }
.anna-push-sub {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--md-muted);
  line-height: 1.35;
}
/* Drei echte iOS-Aktionen (AUSFALL_EINSPRINGEN): Annehmen · Nachricht · Ablehnen */
.anna-push-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.anna-push-actions--3 {
  grid-template-columns: 1fr;
  gap: 7px;
}
.anna-push-btn {
  min-height: 42px;
  padding: 0 10px;
  border: none;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.anna-push-btn--no {
  background: #f1f5f9;
  color: #475569;
}
.anna-push-btn--msg {
  background: var(--x-status-info-soft);
  color: var(--x-status-info);
}
.anna-push-btn--yes {
  background: var(--cta-gradient);
  color: #fff;
}
.anna-push-result {
  background: rgba(255, 255, 255, 0.94);
  color: var(--md-ink);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.anna-push-result strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 4px;
}
.anna-push-result span {
  font-size: 13px;
  font-weight: 600;
  color: var(--md-muted);
  line-height: 1.4;
}
.anna-push-result.is-ok strong { color: #166534; }
.anna-push-result.is-no strong { color: #991b1b; }
.anna-lock-hint {
  margin-top: auto;
  text-align: center;
  font-size: 11.5px;
  font-weight: 650;
  opacity: 0.65;
  padding-top: 18px;
}

/* ── Diensttausch dt2 (1:1 an echte App) ───────────────── */
.dt2-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--x-cta-gradient);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 10px 16px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 750;
  box-shadow: 0 6px 16px rgba(24, 120, 160, 0.22);
  white-space: nowrap;
}
.dt2-btn-sm { min-height: 36px; padding: 8px 12px; font-size: 12.5px; border-radius: 12px; }
.dt2-tabs {
  display: flex;
  gap: 2px;
  background: #eef2f7;
  border-radius: 13px;
  padding: 3px;
  margin-bottom: 12px;
  overflow-x: auto;
}
.dt2-tab {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 750;
  color: #64748b;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dt2-tab.is-active {
  color: var(--primary);
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 35, 65, 0.12);
}
.dt2-tab-badge {
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  border-radius: 999px;
  padding: 2px 6px;
}
.dt2-info-strip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  font-weight: 650;
  color: var(--primary);
  background: #eff6ff;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  line-height: 1.4;
}
.dt2-info-strip svg { flex-shrink: 0; margin-top: 1px; }
.dt2-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.dt-st-open { background: var(--x-status-warning-soft); color: var(--x-status-warning); }
.dt-st-off { background: var(--x-status-info-soft); color: var(--x-status-info); }
.dt-st-done { background: var(--x-status-success-soft); color: var(--x-status-success); }
.dt2-swap-list, .dt2-offers-list { display: flex; flex-direction: column; gap: 10px; }
.dt2-mine-card, .dt2-offer-row {
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--md-shadow-sm);
  transition: border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.45s ease, transform 0.45s ease;
}
.dt2-mine-card.is-new {
  animation: cardReveal 0.65s var(--ease-soft);
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.dt2-mine-top, .dt2-offer-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dt2-date-blk {
  flex-shrink: 0;
  width: 48px;
  min-height: 56px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
}
.dt2-date-wd, .dt2-date-mo { font-size: 10px; font-weight: 750; opacity: 0.8; text-transform: uppercase; }
.dt2-date-day { font-size: 18px; font-weight: 800; line-height: 1.1; }
.dt2-mine-info, .dt2-offer-info { flex: 1; min-width: 0; }
.dt2-mine-info strong, .dt2-offer-name {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--md-ink);
}
.dt2-mine-info span, .dt2-offer-meta {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--md-muted);
}
.dt2-mine-note {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  border-radius: 10px;
  padding: 8px 10px;
  line-height: 1.35;
}
.dt2-co-preview {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  font-size: 12px;
  font-weight: 650;
  color: #1e40af;
  line-height: 1.35;
}
.dt2-co-preview[hidden] { display: none !important; }
.dt2-co-row {
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.dt2-co-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dt2-co-name { font-size: 12.5px; font-weight: 800; color: #1e3a8a; }
.dt2-co-shift { font-size: 11.5px; font-weight: 650; color: #1d4ed8; }
.dt2-co-comment {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 550;
  color: #334155;
  line-height: 1.4;
}
.dt2-co-actions { display: flex; gap: 8px; margin-top: 10px; }
.dt2-btn-accept {
  flex: 1;
  min-height: 36px;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  background: var(--x-status-success-soft);
  color: var(--x-status-success);
  font-size: 13px;
  font-weight: 750;
}
.dt2-btn-reject {
  flex: 1;
  min-height: 36px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 750;
}
.dt2-warte-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 11.5px;
  font-weight: 750;
}

.dt2-modal {
  position: absolute;
  inset: 0;
  /* Wie in der echten App liegt das Modal über der Bottom-Nav */
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.dt2-modal[hidden] { display: none !important; }
.dt2-modal-back {
  position: absolute;
  inset: 0;
  background: rgba(15, 35, 65, 0.45);
  backdrop-filter: blur(5px);
  animation: fadeIn 0.4s ease;
}
.dt2-modal-card {
  position: relative;
  width: 100%;
  max-height: 86%;
  overflow-y: auto;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 20px 18px 22px;
  box-shadow: 0 -12px 40px rgba(15, 35, 65, 0.18);
  animation: sheetUp 0.55s var(--ease-soft);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
.dt2-modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 18px;
}
.dt2-modal-card h2 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--md-ink);
  letter-spacing: -0.03em;
  padding-right: 36px;
}
.dt2-modal-card .dt2-sub {
  font-size: 12.5px;
  color: #64748b;
  margin: 0 0 14px;
  line-height: 1.4;
}
.dt2-mform { display: grid; gap: 12px; }
.dt2-mfield label {
  display: block;
  font-size: 10.5px;
  font-weight: 750;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}
.dt2-field-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(16, 35, 63, 0.12);
  border-radius: 12px;
  background: #fff;
  padding: 11px 12px;
  min-height: 44px;
}
.dt2-field-wrap.is-filled { background: #f8fafc; }
.dt2-field-icon { color: var(--primary); font-size: 13px; flex-shrink: 0; }
.dt2-field-value {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--md-ink);
  line-height: 1.35;
}
.dt2-msubmit {
  width: 100%;
  background: var(--x-cta-gradient);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 14px;
  min-height: 48px;
  font-size: 14.5px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(24, 120, 160, 0.22);
  margin-top: 4px;
}

/* ── Ausfallmanagement-Liste: KPI-Karten & Tabs (echte App) ── */
.am-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.am-kpi {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: 16px;
  padding: 11px 12px;
  box-shadow: var(--md-shadow-sm);
}
.am-kpi-row { display: flex; align-items: flex-start; gap: 9px; }
.am-stat-icon {
  width: 30px; height: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--x-status-neutral-soft);
  color: var(--x-status-neutral);
}
.am-stat-icon svg { width: 15px; height: 15px; }
.am-stat-icon.i-red { background: var(--x-status-danger-soft); color: var(--x-status-danger); }
.am-stat-icon.i-amber { background: var(--x-status-warning-soft); color: var(--x-status-warning); }
.am-stat-icon.i-purple { background: #ede9fe; color: #7c3aed; }
.am-stat-icon.i-green { background: var(--x-status-success-soft); color: var(--x-status-success); }
.am-kpi-text { min-width: 0; }
.am-kpi-val { display: block; font-size: 20px; font-weight: 800; line-height: 1.1; }
.am-kpi-label { display: block; font-size: 12px; font-weight: 750; color: var(--md-ink); }
.am-kpi-sub {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--md-soft);
  line-height: 1.3;
}
.am-kpi-link { font-size: 11.5px; font-weight: 750; color: var(--primary); }
.am-tabbar { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.am-tabbar::-webkit-scrollbar { display: none; }
.am-tabbar .tab { white-space: nowrap; flex: 0 0 auto; }
.am-count-note {
  margin: 10px 0 0;
  text-align: center;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--md-soft);
}

/* ── Krankmeldung: „Wer wird benachrichtigt?“ ─────────────── */
.am-krank-erreich.is-ok { border-color: #bbf7d0; }
.am-krank-erreich-satz {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--x-status-success);
  line-height: 1.4;
}
.am-krank-step--soft { opacity: 0.6; }

/* ── Diensttausch: Formular-Attrappen & Tabs ─────────────── */
.dt2-select-fake,
.dt2-textarea-fake {
  border: 1px solid rgba(16, 35, 63, 0.12);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 13px;
  font-weight: 620;
  color: var(--md-ink);
  background: #fff;
  line-height: 1.4;
}
.dt2-select-fake {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
}
.dt2-textarea-fake { min-height: 60px; }
.dt2-tabs--scroll { flex-wrap: nowrap; scrollbar-width: none; }
.dt2-tabs--scroll::-webkit-scrollbar { display: none; }
.dt2-tabs--scroll .dt2-tab { white-space: nowrap; flex: 0 0 auto; }
.dt2-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(15, 35, 65, 0.1);
  font-size: 10px;
  font-weight: 800;
}
.dt2-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.dt2-badge--open { background: var(--x-status-warning-soft); color: var(--x-status-warning); }

/* ── Messenger: Filter-Tabs, Sprachnachricht, Reaktionen ─── */
.messenger-list-tabs {
  display: flex;
  gap: 6px;
  padding: 0 14px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.messenger-list-tabs::-webkit-scrollbar { display: none; }
.messenger-list-tab {
  flex: 0 0 auto;
  border: 1px solid var(--md-line);
  background: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 750;
  color: var(--md-muted);
  cursor: pointer;
  white-space: nowrap;
}
.messenger-list-tab.is-active {
  background: var(--primary-soft);
  border-color: #bfdbfe;
  color: var(--primary);
}
.messenger-list-tab-count { opacity: 0.7; margin-left: 3px; }
.messenger-bubble-voice {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 168px;
}
.messenger-voice-play {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.messenger-voice-wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 20px;
}
.messenger-voice-wave i {
  flex: 1;
  border-radius: 2px;
  background: rgba(23, 77, 126, 0.35);
}
.messenger-voice-wave i:nth-child(odd) { height: 60%; }
.messenger-voice-wave i:nth-child(even) { height: 100%; }
.messenger-voice-wave i:nth-child(3n) { height: 40%; }
.messenger-voice-time {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--md-muted);
}
.messenger-bubble-reactions {
  display: flex;
  gap: 4px;
  margin-top: -6px;
  padding-left: 6px;
}
.messenger-bubble-row.mine .messenger-bubble-reactions { justify-content: flex-end; padding-right: 6px; }
.messenger-reaction {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--md-line);
  box-shadow: var(--md-shadow-sm);
  font-size: 11.5px;
}
.messenger-reaction-count { font-weight: 800; color: var(--md-muted); }

/* ── Bottom-Nav: Fortschrittsring & Präsenzstatus ─────────── */
.mbn-logo-progress {
  position: absolute;
  inset: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  transform: rotate(-90deg);
  pointer-events: none;
}
.mbn-logo-progress circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}
.mbn-logo-progress-track { stroke: rgba(15, 35, 65, 0.08); }
.mbn-logo-progress-fill {
  stroke: var(--mbn-role);
  stroke-dasharray: 170;
  stroke-dashoffset: 62;
}
.mbn-presence-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
}
.mbn-presence-chevron { color: var(--md-soft); font-size: 11px; }
.mbn-more-badge--warn { background: var(--x-status-warning-soft); color: var(--x-status-warning); }

/* ══════════════════════════════════════════════════════════
   Auswahlseite: der Besucher wählt den Bereich
   ══════════════════════════════════════════════════════════ */
.hub {
  min-height: calc(100svh - var(--banner-h));
  margin-top: var(--banner-h);
  padding: 26px 20px 40px;
  overflow: visible;
  background:
    radial-gradient(1000px 500px at 40% -5%, rgba(0, 181, 199, 0.12), transparent 55%),
    radial-gradient(900px 480px at 95% 8%, rgba(37, 99, 235, 0.1), transparent 50%),
    linear-gradient(180deg, #eef5fb 0%, #f7fafc 45%, #ffffff 100%);
}
.hub[hidden] { display: none !important; }
.hub-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hub-head { text-align: center; }
.hub-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--md-ink);
}
.hub-brand-mark {
  width: 32px; height: 32px;
  object-fit: contain;
  border-radius: 8px;
}
.hub-brand-name {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.hub-head h1 {
  margin: 10px 0 6px;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 850;
  letter-spacing: -0.03em;
  color: var(--md-ink);
}
.hub-head p {
  margin: 0 auto;
  max-width: 62ch;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.6;
  color: var(--md-muted);
}
.hub-hint {
  margin-top: 14px !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
  color: var(--md-ink) !important;
}
.hub-head-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.hub-head-primary,
.hub-head a.hub-head-primary {
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--cta-gradient);
  color: #fff;
  font-size: 12.5px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.hub-head-sec,
.hub-head a.hub-head-sec {
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--md-line);
  color: var(--md-ink);
  font-size: 12.5px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.hub-head-price {
  margin-top: 10px !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  color: var(--md-soft) !important;
}
.hub-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ecfdf5, #eff6ff);
  border: 1px solid rgba(6, 118, 71, 0.18);
}
.hub-done[hidden] { display: none !important; }
.hub-done strong { font-size: 15px; font-weight: 800; color: #065f46; width: 100%; }
.hub-done p {
  margin: 0;
  flex: 1 1 280px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.5;
  color: var(--md-muted);
}
.hub-done-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hub-done-primary,
.hub-done a.hub-done-primary {
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--cta-gradient);
  color: #fff;
  font-size: 12.5px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.hub-done-sec,
.hub-done a.hub-done-sec {
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--md-line);
  color: var(--md-ink);
  font-size: 12.5px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.hub-done-price {
  width: 100%;
  font-size: 12px !important;
  color: var(--md-soft) !important;
}
.hub-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  scroll-margin-top: calc(var(--banner-h) + 16px);
}
@media (min-width: 860px) {
  .hub-featured { grid-template-columns: repeat(3, 1fr); }
}
.hub-more-wrap { display: flex; flex-direction: column; gap: 12px; }
.hub-more-h {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-muted);
}
.hub-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.hub-grid {
  display: grid;
  /* Breiter als fünf Spalten: sonst bricht jede Zeile der Kacheln um. */
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 14px;
}
.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
  text-align: left;
  border: 1px solid var(--md-line);
  border-radius: var(--x-radius-card);
  background: #fff;
  box-shadow: var(--md-shadow-sm);
  cursor: pointer;
  transition: transform 0.25s var(--ease-soft), box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.hub-card.is-featured {
  min-height: 100%;
  padding: 22px 20px 18px;
  box-shadow: var(--md-shadow);
}
.hub-card.is-compact {
  padding: 14px 14px 13px;
  gap: 6px;
}
.hub-card.is-compact .hub-ico {
  width: 34px;
  height: 34px;
}
.hub-card.is-compact h3 { font-size: 14.5px; }
.hub-card.is-compact p { font-size: 12.5px; }
.hub-badge {
  align-self: flex-start;
  background: var(--md-primary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 7px;
}
.hub-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-muted);
}
.hub-card:hover {
  transform: translateY(-3px);
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 16px 34px rgba(15, 35, 65, 0.1);
}
.hub-card:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 3px; }
.hub-ico {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 19px;
  background: var(--x-status-info-soft);
}
.hub-ico.is-red { background: var(--x-status-danger-soft); }
.hub-ico.is-blue { background: var(--x-status-info-soft); }
.hub-ico.is-violet { background: #f3e8ff; }
.hub-ico.is-green { background: var(--x-status-success-soft); }
.hub-ico.is-teal { background: #ccfbf1; }
.hub-ico.is-amber { background: #fef3c7; color: #b45309; }
.hub-ico.is-navy { background: #e0e7ff; color: #1e3a8a; }
.hub-dev {
  position: absolute;
  top: 16px; right: 16px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 10.5px;
  font-weight: 750;
  color: var(--md-muted);
  letter-spacing: 0.02em;
}
.hub-card h3 {
  margin: 2px 0 0;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--md-ink);
}
.hub-card p {
  margin: 0;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.5;
  color: var(--md-muted);
}
.hub-bul {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hub-bul li {
  position: relative;
  padding-left: 15px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  line-height: 1.4;
}
.hub-bul li::before {
  content: "";
  position: absolute;
  left: 2px; top: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cyan);
}
.hub-go {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--md-line);
}
.hub-go i {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--md-soft);
}
.hub-go b {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--primary);
}
.hub-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--md-soft);
}
.hub-foot a { color: var(--primary); font-weight: 750; }
.hub-pilot {
  padding: 22px 20px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--md-line);
  box-shadow: var(--md-shadow-sm);
}
.hub-pilot h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--md-ink);
}
.hub-pilot-lead {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 650;
  color: var(--md-muted);
}
.hub-pilot-points {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.hub-pilot-points li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.45;
  color: var(--md-ink);
}
.hub-pilot-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--md-soft);
}
.hub-pilot-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tour-nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.tour-home-link,
.tour-hub-btn {
  padding: 6px 11px;
  border: 1px solid var(--md-line);
  border-radius: 999px;
  background: #fff;
  font-size: 11.5px;
  font-weight: 750;
  color: var(--md-muted);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}
.tour-home-link:hover,
.tour-hub-btn:hover { color: var(--md-ink); border-color: #cbd5e1; }
.tour-context {
  flex-shrink: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid var(--md-line);
}
.tour-context[hidden] { display: none !important; }
.tour-context dl {
  margin: 0;
  display: grid;
  gap: 6px;
}
.tour-context dl > div {
  display: grid;
  grid-template-columns: 6.4rem 1fr;
  gap: 8px;
  align-items: start;
}
.tour-context dt {
  margin: 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-soft);
  padding-top: 1px;
}
.tour-context dd {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--md-ink);
}
.tour-convert {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 2px;
}
.tour-convert[hidden] { display: none !important; }
.tour-convert h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--md-ink);
  line-height: 1.25;
}
.tour-convert p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.55;
  color: var(--md-muted);
}
.tour-convert .btn { width: 100%; justify-content: center; }
.tour-convert-price {
  font-size: 12px !important;
  color: var(--md-soft) !important;
}
.tour-convert-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.tour-convert-nav .btn { width: auto; }

/* ══════════════════════════════════════════════════════════
   Browser-Bühne (Konferenz, Dienstplan, Website)
   ══════════════════════════════════════════════════════════ */
.desk-viewport {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  overflow: hidden;
}
.desk-viewport[hidden] { display: none !important; }
.desk-scale {
  position: relative;
  width: 1180px;
  height: 726px;
  flex: 0 0 auto;
  /* margin:auto zentriert auch dann korrekt, wenn die Bühne breiter ist als
     das Fenster – anders als justify-content, das links abschneidet. */
  margin: auto;
  transform-origin: top left;
}
.bw {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 35, 65, 0.08), 0 26px 54px rgba(15, 35, 65, 0.16);
  user-select: none;
}
.bw-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: #eef2f7;
  border-bottom: 1px solid #dde5ee;
  flex-shrink: 0;
}
.bw-dots { display: inline-flex; gap: 6px; }
.bw-dots i {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #cbd5e1;
}
.bw-dots i:first-child { background: #f87171; }
.bw-dots i:nth-child(2) { background: #fbbf24; }
.bw-dots i:last-child { background: #34d399; }
.bw-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 8px 8px 0 0;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: var(--md-ink);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bw-fav {
  width: 14px; height: 14px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
}
.bw-url {
  flex: 1;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dde5ee;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--md-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bw-body {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--bg);
}
.dscene {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
}
.dscene.is-active { display: block; }

.toast-host--desk {
  position: absolute;
  top: 54px; left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  pointer-events: none;
}

/* ── Konferenz + Protokoll (Gruppenanruf wie messenger-call-*) ── */
.gc {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #081320;
  color: #f8fafc;
}
.gc-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 10px;
  overflow: hidden;
}
.gc-stage.is-split {
  flex-direction: row;
  align-items: stretch;
}
.gc-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 85% 55% at 50% 14%, rgba(37, 99, 235, 0.28) 0%, transparent 68%),
    linear-gradient(180deg, #0a1628 0%, #10233f 52%, #081320 100%);
}
.gc-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  text-align: center;
  flex-shrink: 0;
}
.gc-stage.is-split .gc-head { display: none; }
.gc-title {
  font-size: 16px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.02em;
}
.gc-count {
  font-size: 12px;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.68);
}
.gc-hands {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.18);
  color: #fde68a;
  font-size: 11.5px;
  font-weight: 700;
}
.gc-hands[hidden] { display: none !important; }
.gc-doc {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  padding: 10px 12px 12px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.22);
}
.gc-doc[hidden] { display: none !important; }
.gc-stage.is-split .gc-doc { flex: 1 1 auto; }
.gc-doc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.gc-doc-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 650;
  color: #f1f5f9;
}
.gc-doc-blick {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 700;
}
.gc-doc-close { color: rgba(226, 232, 240, 0.75); font-size: 16px; line-height: 1; }
.gc-doc-view {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}
.callgrid {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: center;
  justify-content: center;
}
.gc-stage.is-split .callgrid {
  flex: 0 0 220px;
  width: 220px;
  align-content: flex-start;
  overflow-y: auto;
}
.ctile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 calc((100% - 10px) / 2);
  max-width: 100%;
  min-width: 0;
  min-height: 118px;
  padding: 12px 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.04) 100%);
  box-shadow: 0 6px 18px rgba(11, 26, 46, 0.28);
}
.gc-stage.is-split .ctile { flex: 0 0 auto; width: 100%; min-height: 92px; }
.ctile.is-talking {
  border-color: color-mix(in srgb, #2dd4bf 85%, #fff);
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.4), 0 8px 20px rgba(11, 26, 46, 0.3);
}
.ctile-av {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}
.ctile-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}
.ctile-foot b {
  font-size: 12px;
  font-weight: 650;
  color: #f1f5f9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ctile-tag {
  flex: 0 0 auto;
  font-style: normal;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.32);
  color: #dbeafe;
  font-size: 10px;
  font-weight: 700;
}
.ctile-mic {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22);
}
.ctile.is-mic-off .ctile-mic {
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.22);
  position: relative;
}
.ctile.is-mic-off .ctile-mic::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; top: 50%;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: rotate(-45deg);
}

.mdoc {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  background: #fff;
  border: 0;
  overflow: hidden;
}
.mdoc-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--md-line);
  flex-shrink: 0;
}
.mdoc-zurueck { font-size: 11.5px; font-weight: 700; color: var(--md-muted); }
.mdoc-titelblock { flex: 1; min-width: 0; }
.mdoc-titel {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--md-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mdoc-status {
  margin: 1px 0 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--x-status-success);
}
.mdoc-anwesend { display: inline-flex; }
.mdoc-kopfbild {
  width: 25px; height: 25px;
  margin-left: -7px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
}
.mdoc-kopfbild.is-schreibt {
  box-shadow: 0 0 0 2px #34d399;
  animation: docSchreibt 1.1s ease-in-out infinite;
}
@keyframes docSchreibt {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.mdoc-knopf {
  padding: 4px 9px;
  border-radius: 8px;
  background: #f1f5f9;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--md-muted);
}
.mdoc-wz {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--md-line);
  background: #f8fafc;
  flex-shrink: 0;
}
.mdoc-wz-sel {
  padding: 3px 9px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--md-line);
  font-size: 11px;
  font-weight: 650;
  color: var(--md-muted);
}
.mdoc-wz-b {
  width: 24px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--md-line);
  font-size: 11px;
  font-weight: 750;
  color: var(--md-ink);
}
.mdoc-wz-b:nth-last-child(-n + 2) { width: auto; padding: 0 8px; }
.mdoc-wz-sep { width: 1px; height: 16px; background: var(--md-line); }
.mdoc-blatt-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  background: #eef2f7;
}
.mdoc-blatt {
  min-height: 100%;
  padding: 22px 26px;
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--md-shadow-sm);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.95;
  color: #1f2937;
}
/* Luft für die Namensschilder der Schreibmarken über der Zeile */
.mdoc-blatt p { margin: 0 0 15px; }
.mdoc-h1 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 800;
  color: var(--md-ink);
}
.mdoc-h2 {
  margin: 12px 0 4px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--md-ink);
}
.mdoc-meta {
  color: var(--md-soft);
  font-size: 11.5px;
  font-weight: 600;
}
.mdoc-caret {
  position: relative;
  display: inline-block;
  width: 2px;
  height: 14px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--c, var(--md-primary));
  animation: caretBlink 1.05s steps(1) infinite;
}
.mdoc-caret b {
  position: absolute;
  left: 0; top: -15px;
  padding: 1px 5px;
  border-radius: 4px 4px 4px 0;
  background: var(--c, var(--md-primary));
  color: #fff;
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
}
@keyframes caretBlink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0.25; }
}
.mdoc-live { min-height: 20px; }

.dpanel {
  position: absolute;
  right: 18px; bottom: 74px;
  z-index: 20;
  width: 300px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--md-line);
  box-shadow: 0 18px 40px rgba(15, 35, 65, 0.18);
}
.dpanel[hidden] { display: none !important; }
.dpanel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  color: var(--md-ink);
}
.dpanel-head span { color: var(--md-soft); }
.dpanel-hint {
  margin: 5px 0 9px;
  font-size: 11px;
  font-weight: 550;
  line-height: 1.45;
  color: var(--md-muted);
}
.dpanel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.dpanel-item {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--md-line);
  background: #f8fafc;
}
.dpanel-item b { display: block; font-size: 12px; font-weight: 750; color: var(--md-ink); }
.dpanel-item i { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--md-soft); }
.dpanel-label { display: block; font-size: 10.5px; font-weight: 750; color: var(--md-muted); margin-bottom: 4px; }
.dpanel-link {
  padding: 8px 10px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  font-size: 11px;
  font-weight: 650;
  color: var(--primary);
  word-break: break-all;
}
.dpanel-note { margin: 6px 0 8px; font-size: 10.5px; font-weight: 600; color: var(--md-soft); }
.dpanel-acts { display: flex; gap: 6px; }
.dpanel-btn {
  flex: 1;
  padding: 6px 8px;
  border-radius: 9px;
  background: #f1f5f9;
  text-align: center;
  font-size: 11px;
  font-weight: 750;
  color: var(--md-muted);
}
.dpanel-btn--danger { background: #fef2f2; color: #b91c1c; }
.dpanel-empty { margin: 8px 0 0; font-size: 10.5px; font-weight: 600; color: var(--md-soft); }
.dpanel-tabs { display: flex; gap: 6px; margin: 8px 0 6px; }
.dpanel-tab {
  flex: 1;
  padding: 7px 8px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--md-muted);
  background: #f8fafc;
}
.dpanel-tab.is-active { background: #2563eb; border-color: transparent; color: #fff; }
.dpanel-search input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid var(--md-line);
  background: #f8fafc;
  font: inherit;
  font-size: 11.5px;
  color: var(--md-muted);
}

.gc-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid rgba(37, 99, 235, 0.28);
  background: linear-gradient(180deg, #16324f 0%, #10233f 100%);
  color: #f8fafc;
  flex-shrink: 0;
  box-shadow: 0 -6px 24px rgba(11, 26, 46, 0.28);
}
.gc-bar-info b { font-size: 12px; font-weight: 650; color: #f8fafc; display: block; }
.gc-bar-info span { font-size: 11px; font-weight: 500; color: rgba(226, 232, 240, 0.72); }
.gc-bar-acts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.cbtn {
  width: 36px; height: 36px;
  border: none;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  display: grid;
  place-items: center;
  padding: 0;
}
.cbtn svg { display: block; }
.cbtn--end {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
}

/* ── Dienstplan-Editor ─────────────────────────────────── */
@property --e2-zoom {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
.e2 {
  --e2-chain-bild: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%3E%3Cpath%20d='M6.5%209.5L9.5%206.5'/%3E%3Cpath%20d='M4.8%207.8L3.4%209.2a2.4%202.4%200%20003.4%203.4l1.4-1.4'/%3E%3Cpath%20d='M11.2%208.2l1.4-1.4a2.4%202.4%200%2000-3.4-3.4L7.8%204.8'/%3E%3C/svg%3E");
  --e2-primary: #2563eb;
  --e2-col-name-b: 168px;
  --e2-col-day-b: 44px;
  --e2-row-h-b: 46px;
  --e2-zoom: 1;
  --e2-zoom-f: clamp(0.88, var(--e2-zoom), 1.14);
  --e2-col-name: calc(var(--e2-col-name-b) * var(--e2-zoom));
  --e2-col-day: calc(var(--e2-col-day-b) * var(--e2-zoom));
  --e2-row-h: calc(var(--e2-row-h-b) * var(--e2-zoom));
  height: 100%;
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  background: #fff;
  transition: --e2-zoom 0.22s ease;
}
.e2-side {
  border-right: 1px solid var(--md-line);
  background: #f8fafc;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.e2-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--md-ink);
}
.e2-brand img {
  width: 22px; height: 22px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}
.e2-side-h {
  margin: 4px 0 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-soft);
}
.e2-side-nav { display: flex; flex-direction: column; gap: 3px; }
.e2-kat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--md-muted);
}
.e2-kat.is-active { background: #e8f1fd; color: var(--primary); }
.e2-kat-t { flex: 1; }
.e2-kat-n {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--x-status-warning-soft);
  color: var(--x-status-warning);
  font-size: 10.5px;
  font-weight: 800;
}
.e2-kat-n[hidden] { display: none !important; }
.e2-imp {
  margin-top: auto;
  padding: 9px 10px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--md-line);
}
.e2-imp-h { margin: 0 0 3px; font-size: 10.5px; font-weight: 800; color: var(--md-ink); }
.e2-imp-z { margin: 0; font-size: 10.5px; font-weight: 600; color: var(--md-soft); }
.e2-imp-ok { margin: 3px 0 0; font-size: 10.5px; font-weight: 750; color: var(--x-status-success); }
.e2-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.e2-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--md-line);
  flex-shrink: 0;
}
.e2-back { color: var(--md-soft); font-size: 15px; font-weight: 800; }
.e2-title { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
.e2-badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--x-status-warning-soft);
  color: var(--x-status-warning);
  font-size: 10.5px;
  font-weight: 800;
}
.e2-badge.is-ok { background: var(--x-status-success-soft); color: var(--x-status-success); }
.e2-bearb {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--x-status-info-soft);
  color: var(--x-status-info);
  font-size: 10.5px;
  font-weight: 750;
}
.e2-hist { font-size: 10.5px; font-weight: 650; color: var(--md-soft); }
.e2-top-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.e2-sel {
  padding: 5px 11px;
  border-radius: 9px;
  border: 1px solid var(--md-line);
  background: #f8fafc;
  font-size: 11.5px;
  font-weight: 750;
  color: var(--md-ink);
}
.e2-monat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border-radius: 9px;
  border: 1px solid var(--md-line);
  background: #fff;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--md-ink);
}
.e2-monat i { font-style: normal; color: var(--md-soft); }
.e2-work {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 16px;
  background: #f6f9fc;
}
.e2-gridwrap {
  border: 1px solid var(--md-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.e2-grid {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.e2-grid th, .e2-grid td { border-right: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; }
.e2-th-name {
  width: var(--e2-col-name);
  min-width: var(--e2-col-name);
  padding: 6px 10px;
  text-align: left;
  vertical-align: middle;
  background: #f8fafc;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--md-ink);
}
.e2-th-name i {
  display: block;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: var(--md-soft);
}
.e2-th-kw {
  padding: 4px 6px;
  background: #f1f5f9;
  font-size: 10px;
  font-weight: 750;
  color: var(--md-muted);
  letter-spacing: 0.03em;
}
.e2-th-menu {
  width: 62px;
  padding: 6px;
  background: #f8fafc;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--md-muted);
}
.e2-th-day {
  width: var(--e2-col-day);
  min-width: var(--e2-col-day);
  padding: 3px 2px;
  background: #f8fafc;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--md-muted);
}
.e2-th-day span { display: block; font-size: 8.5px; color: var(--md-soft); }
.e2-th-day b { display: block; font-size: 11px; color: var(--md-ink); }
.e2-th-day.is-we { background: #eef2f7; }
.e2-th-day.is-today { background: #e8f1fd; box-shadow: inset 0 -2px 0 var(--md-primary); }
.e2-th-emp {
  padding: 5px 10px;
  text-align: left;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--e2-row-h);
  min-height: var(--e2-row-h);
}
.e2-ava {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.e2-emp-txt { min-width: 0; }
.e2-emp-txt b {
  display: block;
  font-size: 11.5px;
  font-weight: 750;
  color: var(--md-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.e2-emp-txt i {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--md-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.e2-cell {
  width: var(--e2-col-day);
  min-width: var(--e2-col-day);
  padding: 2px;
  text-align: center;
  vertical-align: middle;
  position: relative;
}
.e2-cell.is-we { background: #f8fafc; }
.e2-cell.is-konflikt {
  background: #fef3f2;
  box-shadow: inset 0 0 0 2px #f97066;
}
.e2-cell.is-vorschau::after {
  content: var(--e2-vs, "");
  position: absolute;
  inset: 3px;
  border-radius: 6px;
  border: 1.5px dashed var(--e2-primary);
  background: color-mix(in srgb, var(--e2-primary) 8%, #fff);
  color: var(--e2-primary);
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.e2-cell.is-dragfrom { background: #e8f1fd; }
.e2-stack {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 38px;
}
.e2-pill {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 0;
  height: var(--e2-ph, 100%);
  padding: 2px 1px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--e2-dfb, #eef2f7);
  color: var(--e2-df, #334155);
  border: 1px solid transparent;
  line-height: 1.05;
  transition: transform 0.14s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.14s linear;
}
.e2-pill.is-frei { opacity: 0.55; font-weight: 700; }
.e2-pill.is-krank { box-shadow: inset 0 0 0 1px #f97066; }
.e2-pill.is-dragging { opacity: 0.4; }
.e2-pill.is-angeklickt,
.e2-pill.is-resizing {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--e2-primary) 45%, transparent);
  z-index: 4;
}
.e2-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: calc(10.5px * var(--e2-zoom-f));
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.e2-time { display: flex; flex-direction: column; align-items: center; line-height: 1.08; }
.e2-time i {
  font-style: normal;
  display: block;
  font-size: 8px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: 0.82;
}
.e2-zusatz {
  position: absolute;
  top: -2px; right: -1px;
  font-size: 8px;
  color: var(--zf, #64748b);
}
.e2-grip {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 5px;
  z-index: 4;
  border-radius: 3px;
  background: var(--e2-primary);
  box-shadow: inset 0 0 0 1px #fff;
  opacity: 0;
  pointer-events: none;
}
.e2-grip.is-l { left: 1px; }
.e2-grip.is-r { right: 1px; }
.e2-pill.is-angeklickt .e2-grip,
.e2-gridwrap.ist-dehnt .e2-grip.ist-aktiv { opacity: 0.75; }
.e2-chain {
  display: none;
  width: 9px;
  height: 9px;
  background-color: currentColor;
  -webkit-mask: var(--e2-chain-bild) center / contain no-repeat;
  mask: var(--e2-chain-bild) center / contain no-repeat;
  opacity: 0;
}
.e2[data-kette="1"] .e2-pill.is-chain-start,
.e2[data-kette="1"] .e2-pill.is-chain-mid,
.e2[data-kette="1"] .e2-pill.is-chain-end { border-radius: 0; overflow: visible; }
.e2[data-kette="1"] .e2-pill.is-chain-start {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-right-color: transparent;
}
.e2[data-kette="1"] .e2-pill.is-chain-mid {
  border-left-color: transparent;
  border-right-color: transparent;
}
.e2[data-kette="1"] .e2-pill.is-chain-end {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border-left-color: transparent;
}
.e2[data-kette="1"] .e2-pill.is-chain-start::after,
.e2[data-kette="1"] .e2-pill.is-chain-mid::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  width: 6px;
  height: 3px;
  margin-top: -1.5px;
  background: color-mix(in srgb, var(--e2-df, #64748B) 30%, transparent);
  pointer-events: none;
}
.e2[data-kette="1"] .e2-pill.is-chain-start .e2-chain,
.e2[data-kette="1"] .e2-pill.is-chain-mid .e2-chain,
.e2[data-kette="1"] .e2-pill.is-chain-end .e2-chain {
  display: inline-flex;
  position: absolute;
  right: 1px;
  bottom: 1px;
  transform: scale(1);
  opacity: 0.75;
}
.e2-ghost {
  position: absolute;
  z-index: 126;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 6px;
  background: var(--e2-dfb, #fff2dd);
  color: var(--e2-df, #a5680d);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  opacity: 0.92;
  pointer-events: none;
}
.e2-ghost.is-landed { transform: scale(0.96); }
.e2-stretch-ghost {
  position: absolute;
  z-index: 126;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  border-radius: 0 6px 6px 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--e2-primary) 40%, transparent);
  pointer-events: none;
  overflow: hidden;
}
.e2-zoomdock {
  position: absolute;
  right: 16px;
  bottom: 58px;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--md-line);
  border-radius: 10px;
  background: color-mix(in srgb, #fff 92%, transparent);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(6px);
}
.e2-zoomdock button:not(.e2-zoomdock-lbl) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--md-ink);
}
.e2-zoomdock button svg { width: 15px; height: 15px; }
.e2-zoomdock button.is-sim-press { background: #e8f1fd; transform: scale(0.92); }
.e2-zoomdock-lbl {
  min-width: 44px;
  height: 27px;
  padding: 0 2px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--md-soft);
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.e2-td-menu { text-align: center; }
.e2-haken {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 1px solid var(--md-line);
  background: #fff;
  font-size: 11px;
  color: #cbd5e1;
}
.e2-haken.is-on { background: var(--x-status-success-soft); border-color: #a7f3d0; color: var(--x-status-success); }
.e2-wdash { color: #e2e8f0; font-size: 11px; }
.e2-wcard {
  display: block;
  padding: 3px 1px;
  border-radius: 7px;
  background: var(--dfb, #eef2f7);
  color: var(--df, #334155);
  line-height: 1.1;
  border: 1.5px solid transparent;
}
.e2-wcard b { display: block; font-size: 10px; font-weight: 800; }
.e2-wcard i { display: block; font-style: normal; font-size: 7.5px; font-weight: 650; opacity: 0.8; }
.e2-wc-st { display: block; font-style: normal; font-size: 9px; font-weight: 800; }
.e2-wcard.is-genehmigt { box-shadow: inset 0 0 0 1.5px #34d399; }
.e2-wcard.is-abgelehnt { opacity: 0.5; }
.e2-wcard.is-sel { border-color: var(--md-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18); }
.e2-wdone {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: capitalize;
  background: var(--x-status-neutral-soft);
  color: var(--x-status-neutral);
}
.e2-wdone.is-offen { background: var(--x-status-warning-soft); color: var(--x-status-warning); }
.e2-wdone.is-genehmigt { background: var(--x-status-success-soft); color: var(--x-status-success); }
.e2-wdone.is-teilweise { background: var(--x-status-info-soft); color: var(--x-status-info); }
.e2-wdone.is-abgelehnt { background: var(--x-status-danger-soft); color: var(--x-status-danger); }
.e2-wish-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 10px;
}
.e2-wish-head h3 { margin: 0 0 3px; font-size: 15px; font-weight: 800; }
.e2-wish-head p {
  margin: 0;
  max-width: 52ch;
  font-size: 11.5px;
  font-weight: 550;
  line-height: 1.5;
  color: var(--md-muted);
}
.e2-kpis { margin-left: auto; display: flex; gap: 8px; }
.e2-kpi {
  min-width: 84px;
  padding: 7px 11px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--md-line);
  text-align: center;
}
.e2-kpi span { display: block; font-size: 9.5px; font-weight: 700; color: var(--md-soft); }
.e2-kpi b { display: block; font-size: 16px; font-weight: 850; color: var(--md-ink); }
.e2-kpi i { display: block; font-style: normal; font-size: 9.5px; font-weight: 650; color: var(--md-muted); }
.e2-kpi.is-ok b { color: var(--x-status-success); }
.e2-kpi.is-warn b { color: var(--x-status-warning); }
.e2-kpi.is-err b { color: var(--x-status-danger); }
.e2-wish-rahmen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--md-line);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--md-muted);
}
.e2-wish-rahmen b { color: var(--md-ink); font-weight: 800; }
.e2-wish-rahmen i { font-style: normal; color: var(--md-soft); }
.e2-wish-rahmen .is-zu { color: var(--x-status-danger); }
.e2-wish-rahmen .is-summe { margin-left: auto; }
.e2-foot {
  flex-shrink: 0;
  padding: 8px 16px 10px;
  border-top: 1px solid var(--md-line);
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.e2-foot-l {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.e2-foot-h {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--md-soft);
  flex-shrink: 0;
}
.e2-leg-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow: auto;
}
.e2-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px 0 5px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--md-muted);
  font-size: 11.5px;
  font-weight: 550;
  white-space: nowrap;
  cursor: default;
}
.e2-chip-c {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 4px;
  border-radius: 5px;
  background: var(--e2-dfb, #f1f5f9);
  color: var(--e2-df, #64748b);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.e2-chip-t { color: var(--md-muted); }
.e2-chip.is-active {
  background: #e8f1fd;
  box-shadow: inset 0 0 0 1px #93c5fd;
}
.e2-chip.is-active .e2-chip-t { color: var(--e2-primary, #2563eb); font-weight: 650; }
.e2-chip.is-sim-press { transform: scale(0.96); background: #e8f1fd; }
.e2-ansicht-wrap { position: relative; }
.e2-ansicht-btn {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--md-line);
  border-radius: 8px;
  background: #fff;
  font-size: 11.5px;
  font-weight: 750;
  color: var(--md-ink);
}
.e2-ansicht-btn.is-sim-press { background: #e8f1fd; }
.e2-ansicht {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 8;
  width: 280px;
  padding: 10px 12px 12px;
  border: 1px solid var(--md-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
}
.e2-ansicht-h {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--md-ink);
}
.e2-ansicht-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--md-muted);
}
.e2-legend { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; color: var(--md-soft); }
.e2-legend i { font-style: normal; }
.e2-legend .is-ok { color: var(--x-status-success); }
.e2-legend .is-warn { color: var(--x-status-warning); }
.e2-legend .is-err { color: var(--x-status-danger); }
.e2-wish-acts { margin-left: auto; display: flex; gap: 7px; }
.e2-btn {
  padding: 8px 13px;
  border-radius: 10px;
  border: 1px solid var(--md-line);
  background: #f8fafc;
  font-size: 11.5px;
  font-weight: 750;
  color: var(--md-muted);
  white-space: nowrap;
}
.e2-btn-primary {
  border-color: transparent;
  background: var(--cta-gradient);
  color: #fff;
}
.e2-ablauf { display: flex; align-items: center; gap: 12px; width: 100%; }
.e2-ablauf-nr {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--x-status-info-soft);
  color: var(--x-status-info);
  font-size: 12px;
  font-weight: 800;
}
.e2-ablauf-txt b { display: block; font-size: 12.5px; font-weight: 800; color: var(--md-ink); }
.e2-ablauf-txt i {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--md-muted);
}
.e2-ablauf-fort { margin-left: auto; text-align: right; flex-shrink: 0; }
.e2-ablauf-balken {
  display: block;
  width: 140px; height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.e2-ablauf-balken i {
  display: block;
  height: 100%;
  background: var(--cta-gradient);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-soft);
}
.e2-ablauf-zahl { font-size: 10.5px; font-weight: 700; color: var(--md-soft); }

/* ── Website & Stellenanzeigen ─────────────────────────── */
.wv {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 16px 20px 20px;
  background: #f6f9fc;
}
.wv[hidden] { display: none !important; }
.ws-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.ws-head h2 { margin: 0 0 3px; font-size: 17px; font-weight: 850; letter-spacing: -0.02em; }
.ws-head p {
  margin: 0;
  max-width: 66ch;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.5;
  color: var(--md-muted);
}
.ws-cta {
  margin-left: auto;
  padding: 9px 16px;
  border: none;
  border-radius: 11px;
  background: var(--cta-gradient);
  color: #fff;
  font-size: 12.5px;
  font-weight: 750;
  white-space: nowrap;
}
.ws-hub {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.ws-card {
  padding: 13px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--md-line);
  box-shadow: var(--md-shadow-sm);
}
.ws-card-top { display: flex; align-items: flex-start; gap: 10px; }
.ws-ico {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #f0f4f8;
  color: var(--primary);
}
.ws-ico svg { width: 18px; height: 18px; }
.ws-card h3 { margin: 0 0 3px; font-size: 13px; font-weight: 800; }
.ws-card p { margin: 0; font-size: 11px; font-weight: 550; line-height: 1.45; color: var(--md-muted); }
.ws-filters-sep { width: 1px; height: 18px; background: var(--md-line); align-self: center; }
.ws-card--live.is-live { border-color: #a7f3d0; background: #f6fffb; }
.ws-metrics { display: flex; gap: 14px; margin-top: 9px; }
.ws-metrics span { font-size: 10px; font-weight: 650; color: var(--md-soft); }
.ws-metrics b { display: block; font-size: 17px; font-weight: 850; color: var(--md-ink); }
.ws-btns { display: flex; gap: 6px; margin-top: 9px; }
.ws-btn {
  padding: 6px 11px;
  border-radius: 9px;
  border: 1px solid var(--md-line);
  background: #f8fafc;
  font-size: 11px;
  font-weight: 750;
  color: var(--md-muted);
}
.ws-btn--p { border-color: transparent; background: var(--cta-gradient); color: #fff; }
.ws-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--x-status-neutral-soft);
  color: var(--x-status-neutral);
  font-size: 10px;
  font-weight: 800;
}
.ws-card--live.is-live .ws-pill { background: var(--x-status-success-soft); color: var(--x-status-success); }
.ws-url { margin-top: 7px !important; font-size: 10.5px !important; font-weight: 700 !important; color: var(--primary) !important; }
.ws-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.ws-tabs span {
  padding: 6px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--md-line);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--md-muted);
}
.ws-tabs span.is-active { background: var(--primary); border-color: transparent; color: #fff; }
.ws-filters { display: flex; gap: 6px; margin-bottom: 10px; }
.ws-filters span {
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--md-line);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--md-muted);
}
.ws-filters span.is-active { background: #e8f1fd; border-color: #bfdbfe; color: var(--primary); }
.ws-filters b { margin-left: 5px; font-weight: 850; }
.ws-inq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 10px;
}
.ws-inq {
  padding: 12px 13px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid var(--md-line);
  box-shadow: var(--md-shadow-sm);
}
.ws-inq-top { display: flex; align-items: flex-start; gap: 10px; }
.ws-inq-top b { display: block; font-size: 12.5px; font-weight: 800; color: var(--md-ink); }
.ws-inq-top i { display: block; font-style: normal; font-size: 10.5px; font-weight: 650; color: var(--md-soft); }
.ws-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  background: var(--x-status-neutral-soft);
  color: var(--x-status-neutral);
}
.ws-badge.is-neu { background: var(--x-status-info-soft); color: var(--x-status-info); }
.ws-badge.is-in_bearbeitung { background: var(--x-status-warning-soft); color: var(--x-status-warning); }
.ws-badge.is-erledigt { background: var(--x-status-success-soft); color: var(--x-status-success); }
.ws-inq-meta { margin: 7px 0 9px; font-size: 11px; font-weight: 550; line-height: 1.45; color: var(--md-muted); }
.ws-inq-acts { display: flex; align-items: center; gap: 7px; }
.ws-sel {
  flex: 1;
  padding: 6px 9px;
  border-radius: 9px;
  border: 1px solid var(--md-line);
  background: #f8fafc;
  font-size: 11px;
  font-weight: 650;
  color: var(--md-soft);
}
.ws-two { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 16px; }
.ws-panel {
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--md-line);
}
.ws-panel h3 { margin: 0 0 9px; font-size: 13.5px; font-weight: 800; }
.ws-sub { margin: 0 0 9px; font-size: 13.5px; font-weight: 800; }
.ws-field { display: block; margin-bottom: 9px; }
.ws-field span { display: block; font-size: 10.5px; font-weight: 750; color: var(--md-muted); margin-bottom: 3px; }
.ws-field i {
  display: block;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--md-line);
  background: #f8fafc;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--md-ink);
  min-height: 34px;
}
.ws-field i.is-area { min-height: 62px; line-height: 1.45; font-weight: 500; }
.ws-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ws-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--md-ink);
}
.ws-switch i, .bk-toggle i {
  width: 32px; height: 18px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
}
.ws-switch i.is-on, .bk-toggle i.is-on { background: var(--x-status-success); }
.ws-switch i::after, .bk-toggle i::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}
.ws-switch i.is-on::after, .bk-toggle i.is-on::after { transform: translateX(14px); }
.ws-job {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--md-line);
}
.ws-job.is-new { border-color: #a7f3d0; background: #f6fffb; }
.ws-job b { display: block; font-size: 12.5px; font-weight: 800; }
.ws-job i { display: block; font-style: normal; font-size: 10.5px; font-weight: 650; color: var(--md-soft); }
.ws-job .ws-btn { margin-left: auto; }

.bk { height: 100%; display: flex; flex-direction: column; background: #fff; }
.wv[data-webview="builder"] { padding: 0; background: #fff; }
.bk-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--md-line);
  flex-shrink: 0;
  background: #fff;
}
.bk-brand { display: flex; align-items: center; gap: 9px; }
.bk-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.bk-mark img {
  width: 32px; height: 32px;
  object-fit: contain;
}
.bk-brand b { display: block; font-size: 13.5px; font-weight: 800; }
.bk-brand small { font-size: 10.5px; font-weight: 600; color: var(--md-soft); }
.bk-acts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.bk-hist {
  display: inline-flex;
  border: 1px solid var(--md-line);
  border-radius: 9px;
  overflow: hidden;
}
.bk-hist i {
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  font-style: normal;
  color: var(--md-muted);
}
.bk-hist i + i { border-left: 1px solid var(--md-line); }
.bk-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
}
.bk-btn {
  padding: 6px 11px;
  border-radius: 9px;
  border: 1px solid var(--md-line);
  background: #f8fafc;
  font-size: 11px;
  font-weight: 750;
  color: var(--md-muted);
}
.bk-btn--p { border-color: transparent; background: var(--cta-gradient); color: #fff; }
.bk-btn--p.is-live { background: var(--x-status-success); }
.bk-work {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 68px 224px minmax(0, 1fr);
}
.bk-rail {
  border-right: 1px solid var(--md-line);
  background: #f8fafc;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bk-rail-i {
  width: 54px;
  padding: 8px 2px 6px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  font-size: 8.5px;
  font-weight: 700;
  color: var(--md-muted);
}
.bk-rail-i svg { width: 18px; height: 18px; }
.bk-rail-i.is-on { background: #e8f1fd; color: var(--primary); }
.bk-logo-chg {
  display: block;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 9px;
  border: 1px solid var(--md-line);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--md-muted);
}
.bk-seg { display: flex; gap: 4px; }
.bk-seg i {
  flex: 1;
  padding: 5px 4px;
  border-radius: 8px;
  border: 1px solid var(--md-line);
  text-align: center;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: var(--md-muted);
  background: #f8fafc;
}
.bk-seg i.is-on { background: #e8f1fd; border-color: #bfdbfe; color: var(--primary); }
.bk-lay {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bk-lay-thumb {
  height: 36px;
  border-radius: 7px;
  border: 1px solid var(--md-line);
  background: #f1f5f9;
  overflow: hidden;
}
.bk-lay.is-on .bk-lay-thumb { border-color: var(--md-primary); background: #e8f1fd; }
.bk-lay-thumb i {
  display: block;
  height: 6px;
  margin: 5px 6px 0;
  border-radius: 2px;
  background: #cbd5e1;
}
.bk-lay-thumb i:first-child { width: 40%; background: var(--primary); }
.bk-lay small {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--md-soft);
  line-height: 1.2;
  text-align: center;
}
.bk-panel-host {
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--md-line);
  background: #fff;
}
.bk-panel {
  height: 100%;
  padding: 12px;
  overflow-y: auto;
  background: #fff;
}
.bk-panel[hidden] { display: none !important; }
.bk-panel h3 { margin: 0 0 10px; font-size: 13px; font-weight: 800; }
.bk-hint {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 550;
  line-height: 1.4;
  color: var(--md-muted);
}
.bk-field.is-edit {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16);
}
.bk-field.is-area { min-height: 52px; align-items: flex-start; }
.bk-save { display: flex; gap: 7px; margin-top: 14px; }
.bk-label {
  display: block;
  margin: 10px 0 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-soft);
}
.bk-swatches { display: flex; gap: 7px; }
.bk-sw {
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(15, 35, 65, 0.1);
}
.bk-sw.is-on { border-color: var(--md-ink); }
.bk-field, .bk-logo, .bk-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid var(--md-line);
  background: #f8fafc;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--md-ink);
}
.bk-field i { margin-left: auto; font-style: normal; color: var(--md-soft); }
.bk-logo i {
  width: 20px; height: 20px;
  border-radius: 6px;
  background: var(--cta-gradient);
}
.bk-toggle { margin-top: 5px; }
.bk-toggle i { margin-left: auto; }
.bk-layouts { display: flex; gap: 6px; }
.bk-canvas {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #eef2f7;
  padding: 12px;
  gap: 10px;
}
.bk-frame {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--md-shadow);
}
.bk-palette {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--md-line);
}
.bk-pal-label { font-size: 10.5px; font-weight: 800; color: var(--md-soft); margin-right: 4px; }
.bk-chip {
  padding: 5px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid var(--md-line);
  font-size: 11px;
  font-weight: 700;
  color: var(--md-muted);
}
.bk-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-top: 1px solid var(--md-line);
  flex-shrink: 0;
}
.bk-foot-txt b { display: block; font-size: 11.5px; font-weight: 800; }
.bk-foot-txt small { font-size: 10.5px; font-weight: 600; color: var(--md-soft); }
.bk-devs { margin-left: auto; display: flex; gap: 5px; }
.bk-devs i {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 750;
  color: var(--md-muted);
}
.bk-devs i svg { width: 14px; height: 14px; }
.bk-devs i.is-on { background: var(--primary); color: #fff; }

/* Live-Vorschau im Baukasten – vollständige Startseite */
.pv { min-height: 100%; font-size: 11px; background: #fff; }
.pv-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--md-line);
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}
.pv-nav b { font-size: 12.5px; font-weight: 850; color: var(--wc1, #2563eb); }
.pv-nav nav { display: flex; gap: 12px; margin-left: auto; }
.pv-nav i { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--md-muted); }
.pv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 16px;
  align-items: center;
  padding: 18px 16px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--wc1) 12%, #fff), color-mix(in srgb, var(--wc2) 14%, #fff));
}
.pv-hero em {
  display: inline-block;
  margin-bottom: 6px;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wc1, #2563eb);
}
.pv-hero h3 { margin: 0 0 6px; font-size: 17px; font-weight: 850; letter-spacing: -0.02em; color: var(--md-ink); }
.pv-hero h3.is-edited { box-shadow: inset 0 -2px 0 var(--wc1, #2563eb); }
.pv-hero p { margin: 0 0 10px; font-size: 11px; font-weight: 550; color: var(--md-muted); }
.pv-cta {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--wc1), var(--wc2));
  color: #fff;
  font-size: 11px;
  font-weight: 750;
}
.pv-photo {
  height: 88px;
  border-radius: 12px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--wc1) 35%, #fff), color-mix(in srgb, var(--wc2) 45%, #fff));
}
.pv-photo.is-sm { height: 72px; }
.pv-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid #eef2f7;
}
.pv-trust span {
  padding: 8px 6px;
  border-radius: 9px;
  background: #f8fafc;
  font-size: 9.5px;
  font-weight: 750;
  color: var(--md-ink);
  text-align: center;
}
.pv-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #eef2f7;
}
.pv-about h4, .pv-svc h4, .pv-team h4, .pv-jobs h4, .pv-contact h4, .pv-neu h4 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 800;
}
.pv-about p, .pv-contact p { margin: 0; font-size: 11px; font-weight: 550; line-height: 1.45; color: var(--md-muted); }
.pv-sub { margin: 0 0 8px; font-size: 10.5px; font-weight: 550; color: var(--md-soft); }
.pv-svc, .pv-team, .pv-jobs, .pv-contact { padding: 12px 16px; border-bottom: 1px solid #eef2f7; }
.pv-svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pv-svc-grid article {
  padding: 8px 9px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}
.pv-svc-grid b { display: block; font-size: 11px; font-weight: 800; }
.pv-svc-grid p { margin: 3px 0 0; font-size: 10px; font-weight: 550; color: var(--md-muted); }
.pv-team-row { display: flex; gap: 12px; }
.pv-team-row figure { margin: 0; text-align: center; flex: 1; }
.pv-ava {
  width: 36px; height: 36px;
  margin: 0 auto 5px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.pv-team-row b { display: block; font-size: 10.5px; font-weight: 800; }
.pv-team-row i { font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--md-soft); }
.pv-jobs article {
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--wc1) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--wc1) 18%, #fff);
}
.pv-jobs b { display: block; font-size: 11.5px; font-weight: 800; }
.pv-jobs i { font-style: normal; font-size: 10px; font-weight: 600; color: var(--md-soft); }
.pv-fields { display: grid; gap: 5px; margin-top: 8px; }
.pv-fields i {
  display: block;
  padding: 7px 9px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid var(--md-line);
  font-style: normal;
  font-size: 10.5px;
  color: var(--md-soft);
}
.pv-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px 14px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--md-muted);
}
.pv-foot small { font-weight: 550; }
.pv-neu {
  padding: 12px 16px 14px;
  border-bottom: 1px solid #eef2f7;
  background: color-mix(in srgb, var(--wc1) 5%, #fff);
  animation: pvNeu 0.45s var(--ease-soft);
}
@keyframes pvNeu {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.pv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pv-cards span {
  padding: 8px 7px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--wc1) 22%, #fff);
  font-size: 10px;
  font-weight: 700;
  color: var(--md-ink);
  text-align: center;
}
.pv-motto {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 650;
  font-style: italic;
  color: var(--md-muted);
}

/* Öffentliche Seite */
.wv[data-webview="public"] { padding: 14px 40px; background: #e9eef4; }
.pub {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--md-shadow);
  overflow: hidden;
}
.pub-nav {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--md-line);
}
.pub-logo { font-size: 14px; font-weight: 850; color: #0ea5e9; }
.pub-nav nav { margin-left: auto; display: flex; gap: 16px; }
.pub-nav i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--md-muted); }
.pub-nav i.is-on { color: #0ea5e9; }
.pub-hero { padding: 20px; background: linear-gradient(120deg, #e0f2fe, #ccfbf1); }
.pub-hero h3 { margin: 0 0 4px; font-size: 19px; font-weight: 850; letter-spacing: -0.02em; }
.pub-hero p { margin: 0; font-size: 12px; font-weight: 550; color: var(--md-muted); }
.pub-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 20px; }
.pub-job {
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--md-line);
  background: #fff;
}
.pub-job.is-new { border-color: #7dd3fc; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12); }
.pub-job b { display: block; font-size: 13px; font-weight: 800; }
.pub-job i { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--md-soft); margin-bottom: 5px; }
.pub-job p { margin: 0 0 9px; font-size: 11px; font-weight: 550; line-height: 1.5; color: var(--md-muted); }
.pub-jobcta {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: #0ea5e9;
  color: #fff;
  font-size: 10.5px;
  font-weight: 750;
}
.pub-form { padding: 4px 20px 20px; }
.pub-form h3 { margin: 0 0 3px; font-size: 15px; font-weight: 800; }
.pub-form > p { margin: 0 0 10px; font-size: 11.5px; font-weight: 550; color: var(--md-muted); }
.pub-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 11px; }
.pub-field span { display: block; font-size: 10.5px; font-weight: 750; color: var(--md-muted); margin-bottom: 3px; }
.pub-field i {
  display: block;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--md-line);
  background: #f8fafc;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--md-soft);
  min-height: 34px;
}
.pub-field.is-area { grid-column: 1 / -1; }
.pub-field.is-area i { min-height: 54px; }
.pub-submit {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 11px;
  background: linear-gradient(90deg, #0ea5e9, #14b8a6);
  color: #fff;
  font-size: 12.5px;
  font-weight: 750;
}
.pub-privacy { margin: 8px 0 0; font-size: 10px; font-weight: 600; color: var(--md-soft); }

/* Browser-Ansichten sind Kulisse – Klicks laufen über die Tour */
.desk-viewport { pointer-events: none; user-select: none; }

@media (max-width: 960px) {
  .hub { padding: 18px 14px 32px; }
}

/* Schmale Geräte: die Browser-Bühne bleibt lesbar und wird waagerecht
   zum jeweiligen Ziel geschoben, statt auf Briefmarkengröße zu schrumpfen. */
@media (max-width: 719px) {
  .desk-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  .desk-scale { margin: auto 0; }
  .desk-viewport { touch-action: pan-x pan-y; pointer-events: auto; }
  .demo-stage { padding: 8px 0 12px; }
}

/* ── Messenger-Tour: Formulare, Karten, Highlight (1:1 App) ── */
.composer-image {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: #f1f5f9;
  color: var(--md-ink);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg-sheet {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 62px;
  z-index: 4;
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15, 35, 65, 0.14);
  padding: 10px 8px 8px;
}
.msg-sheet-h {
  margin: 0 8px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-muted);
}
.msg-sheet-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 10px 8px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--md-ink);
  text-align: left;
  cursor: pointer;
}
.msg-sheet-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #eaf2ff;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.messenger-thread-pin-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border-bottom: 1px solid rgba(37, 99, 235, 0.08);
  flex-shrink: 0;
  font-size: 13px;
}
.messenger-thread-pin-strip[hidden] { display: none !important; }
.messenger-thread-pin-strip-body {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.messenger-thread-pin-strip-label {
  color: #b45309;
  font-weight: 700;
  flex-shrink: 0;
}
.messenger-thread-pin-strip-label::before {
  content: "★ ";
  color: #f59e0b;
}
.messenger-thread-pin-strip-text {
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.messenger-bubble.is-highlighted {
  outline: 1.5px solid rgba(245, 158, 11, 0.8);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.28), 0 0 8px rgba(245, 158, 11, 0.14);
}
.messenger-highlight-star {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: #b45309;
  margin-bottom: 2px;
}
.messenger-bubble-poll,
.messenger-bubble-file-share,
.messenger-bubble-shift-share {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  min-width: min(11rem, 60vw);
  max-width: min(17rem, 88%);
  box-sizing: border-box;
  padding: 6px 8px 4px;
}
.messenger-poll-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(23, 77, 126, 0.12);
  border-radius: 14px;
  overflow: hidden;
}
.messenger-poll-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px 0;
}
.messenger-poll-icon {
  width: 20px; height: 20px;
  border-radius: 6px;
  background: #eaf2ff;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.messenger-poll-eyebrow-label {
  flex: 1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--primary);
}
.messenger-poll-status {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(23, 77, 126, 0.1);
  color: var(--primary);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}
.messenger-poll-head { padding: 6px 11px 0; }
.messenger-poll-question {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: #143d5c;
  line-height: 1.3;
}
.messenger-poll-by {
  margin: 2px 11px 0;
  font-size: 11px;
  color: #64748b;
}
.messenger-poll-divider {
  height: 1px;
  background: rgba(15, 35, 65, 0.08);
  margin: 8px 0 0;
}
.messenger-poll-options { padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.messenger-poll-option {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid rgba(23, 77, 126, 0.12);
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
}
.messenger-poll-option.is-selected { border-color: var(--primary); }
.messenger-poll-option-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(23, 77, 126, 0.1);
}
.messenger-poll-option.is-selected .messenger-poll-option-fill { background: rgba(23, 77, 126, 0.16); }
.messenger-poll-option.is-leading .messenger-poll-option-fill { background: rgba(16, 122, 79, 0.12); }
.messenger-poll-option-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.messenger-poll-option-label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.messenger-poll-option-check {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #fff;
  flex-shrink: 0;
}
.messenger-poll-option.is-selected .messenger-poll-option-check {
  background: var(--primary);
  border-color: var(--primary);
}
.messenger-poll-option-text { font-size: 12.5px; font-weight: 700; color: #143d5c; }
.messenger-poll-option-stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.messenger-poll-option-pct { font-size: 11px; font-weight: 800; color: #143d5c; }
.messenger-poll-option-count { font-size: 10px; color: #64748b; }
.messenger-poll-foot {
  display: flex;
  justify-content: space-between;
  padding: 4px 11px 8px;
  font-size: 11px;
  color: #64748b;
}
.messenger-file-share-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(23, 77, 126, 0.12);
  border-left: 3px solid var(--primary);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  text-align: left;
  font: inherit;
  color: inherit;
  box-shadow: 0 1px 4px rgba(15, 35, 65, 0.06);
}
.messenger-file-share-badge {
  align-self: flex-start;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(23, 77, 126, 0.08);
  color: var(--primary);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.messenger-file-share-row { display: flex; align-items: center; gap: 8px; }
.messenger-file-share-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: #fee2e2;
  color: #b91c1c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
}
.messenger-file-share-body { display: flex; flex-direction: column; min-width: 0; }
.messenger-file-share-name { font-size: 13px; font-weight: 800; color: #143d5c; }
.messenger-file-share-meta,
.messenger-file-share-note { font-size: 11.5px; color: #64748b; }
.messenger-bubble-image {
  display: block;
  width: min(220px, 100%);
  height: auto;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.14);
}
.messenger-shift-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(23, 77, 126, 0.12);
  border-left: 3px solid var(--primary);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  text-align: left;
  box-shadow: 0 1px 4px rgba(15, 35, 65, 0.06);
}
.messenger-shift-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.messenger-shift-card-kind {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #143d5c;
}
.messenger-shift-card-status {
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(214, 130, 12, 0.14);
  color: #8a5000;
  white-space: nowrap;
}
.messenger-shift-card-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0;
  font-size: 13px;
}
.messenger-shift-card-facts dt { margin: 0; color: #5c6b7d; font-weight: 600; }
.messenger-shift-card-facts dd { margin: 0; font-weight: 700; color: #143d5c; }
.messenger-shift-card-actions { display: flex; gap: 8px; }
.messenger-shift-card-btn {
  flex: 1;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(23, 77, 126, 0.18);
  background: #fff;
  color: #143d5c;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.messenger-shift-card-btn--yes {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.messenger-shift-card-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary);
}
.msg-create-scroll {
  padding: 8px 16px 16px;
  background: #fff;
}
.msg-create-ava {
  position: relative;
  width: 80px; height: 80px;
  margin: 10px auto 0;
  border-radius: 50%;
  background: linear-gradient(160deg, #e8f1fb 0%, #d6e6f5 100%);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(15, 35, 65, 0.1);
}
.msg-create-ava-plus {
  position: absolute;
  right: 0; bottom: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.msg-create-hint {
  margin: 8px 0 14px;
  text-align: center;
  font-size: 12px;
  font-weight: 560;
  color: #64748b;
}
.msg-create-label {
  display: block;
  margin: 12px 0 6px;
  font-size: 12.5px;
  font-weight: 750;
  color: #143d5c;
}
.msg-create-field {
  border: 1px solid var(--md-line);
  background: #f8fafc;
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 650;
  color: #143d5c;
  margin-bottom: 8px;
}
.msg-create-field.is-search { color: #94a3b8; font-weight: 500; }
.msg-create-add {
  color: var(--primary);
  font-size: 13.5px;
  font-weight: 750;
  padding: 4px 2px 10px;
}
.msg-create-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #64748b;
}
.msg-create-picked-h {
  margin: 10px 0 6px;
  font-size: 12px;
  font-weight: 800;
  color: #143d5c;
}
.msg-create-picks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.msg-create-picks li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 650;
}
.msg-create-picks li.is-on { background: #eaf2ff; }
.msg-create-picks i {
  width: 32px; height: 32px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.msg-create-actions {
  flex-shrink: 0;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--md-line);
}
.msg-create-save {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--primary);
  color: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 800;
}

/* ── Rufbereitschaft-Demo (scoped) ──────────────────────── */
.e2-kat-ic {
  display: inline-flex;
  color: inherit;
  flex-shrink: 0;
}
.e2-rbmarke {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 9px;
  background: #fffbeb;
  border: 1px solid color-mix(in srgb, #d97706 28%, #fff);
  color: #b45309;
  font-size: 11.5px;
  font-weight: 750;
  white-space: nowrap;
}
.e2-rbmarke svg { flex-shrink: 0; }
.e2[data-rufplan="1"] { --e2-warn: #d97706; }
.e2[data-rufplan="1"] .e2-top { flex-wrap: wrap; }
.e2[data-rufplan="1"] .e2-cell {
  height: 44px;
  min-height: 44px;
}
.e2-rb {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 1px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 11px;
  border-radius: 3px;
  background: color-mix(in srgb, #d97706 14%, #fff);
  color: color-mix(in srgb, #d97706 85%, #10233f);
  font-size: 7.5px;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  pointer-events: none;
}
.e2-rb-ic { flex: 0 0 auto; }
.e2-rb-zeit {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.e2-cell.is-rb-vorschau::after {
  content: "☎";
  position: absolute;
  inset: 3px;
  border-radius: 6px;
  border: 1.5px dashed #d97706;
  background: color-mix(in srgb, #d97706 10%, #fff);
  color: #b45309;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.mbn-logo-oncall {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #12b76a;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(18, 183, 106, 0.35);
  pointer-events: none;
}

.messenger-system-line {
  align-self: center;
  width: fit-content;
  margin: 8px auto 12px;
  max-width: 92%;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475467;
  font-size: 11.5px;
  font-weight: 650;
  text-align: center;
}
.messenger-conv-avatar--oncall {
  box-shadow: inset 0 0 0 2px rgba(14, 143, 191, 0.25);
}

.page-rb.rb-demo {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  color: var(--md-ink);
  background: var(--bg);
}
.rb-demo .rb-head { padding: 12px 14px 8px; margin-bottom: 0; }
.rb-demo .ds-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.rb-demo .ds-head-titles { min-width: 0; flex: 1; }
.rb-demo .ds-title {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--md-ink);
}
.rb-demo .ds-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--md-muted);
}
.rb-demo .ds-head-actions { flex-shrink: 0; padding-top: 2px; }
.rb-demo .ds-card {
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--md-shadow-sm);
}
.rb-demo .rb-current { display: flex; flex-direction: column; gap: 12px; }
.rb-demo .rb-scroll { padding: 0 14px 18px; }
.rb-demo .rb-h2 {
  margin: 0 0 10px;
  font-size: 1.02rem;
  font-weight: 800;
}
.rb-demo .rb-muted {
  margin: 0;
  color: var(--md-muted);
  font-size: 12.5px;
  font-weight: 600;
}
.rb-demo .rb-card {
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--md-shadow-sm);
}
.rb-demo .rb-oncall-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
  color: #067647;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 12px;
}
.rb-demo .rb-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #12b76a;
  box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.18);
  flex-shrink: 0;
}
.rb-demo .rb-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 12px;
}
.rb-demo .rb-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.rb-demo .rb-person-info b { display: block; font-size: 1.02rem; }
.rb-demo .rb-person-info span {
  color: var(--md-muted);
  font-size: 12.5px;
  font-weight: 600;
}
.rb-demo .rb-cta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rb-demo .rb-btn,
.rb-demo .rb-btn-sec,
.rb-demo .rb-call-opt {
  font: inherit;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 10px;
  cursor: default;
}
.rb-demo .rb-btn {
  border: 1px solid transparent;
  background: #0e8fbf;
  color: #fff;
}
.rb-demo .rb-btn-sec {
  border: 1px solid var(--md-line);
  background: #fff;
  color: inherit;
}
.rb-demo .rb-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.rb-demo .rb-tab {
  font: inherit;
  font-weight: 700;
  font-size: 12.5px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--md-line);
  background: #fff;
  color: inherit;
}
.rb-demo .rb-tab.is-active {
  background: #0e8fbf;
  color: #fff;
  border-color: transparent;
}
.rb-demo .rb-pane { display: none; }
.rb-demo .rb-pane.is-active { display: block; }
.rb-demo .rb-field { display: block; margin-bottom: 10px; }
.rb-demo .rb-field > span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--md-muted);
}
.rb-demo .rb-field input,
.rb-demo .rb-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--md-line);
  border-radius: 10px;
  font: inherit;
  background: #fff;
  color: inherit;
}
.rb-demo .rb-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.rb-demo .rb-chosen {
  margin-top: 6px;
  font-weight: 700;
  font-size: 13px;
}
.rb-demo .rb-ok {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: #ecfdf3;
  color: #067647;
  font-weight: 700;
  font-size: 13px;
}
.rb-demo .rb-inbox-item,
.rb-demo .rb-num-item,
.rb-demo .rb-duty-item,
.rb-demo .rb-case,
.rb-demo .rb-result {
  border: 1px solid #e4eaf2;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: #fff;
}
.rb-demo .rb-num-group h3 {
  font-size: 12.5px;
  margin: 10px 0 6px;
  color: var(--md-muted);
}
.rb-demo .rb-pill {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475467;
}
.rb-demo .rb-mini {
  font: inherit;
  font-weight: 700;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--md-line);
  background: #fff;
  color: inherit;
}
.rb-demo .ds-cta {
  width: 100%;
  margin-top: 4px;
}
.rb-demo .rb-modal {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.rb-demo .rb-modal[hidden] { display: none !important; }
.rb-demo .rb-modal-back {
  position: absolute;
  inset: 0;
  background: rgba(16, 35, 63, 0.4);
}
.rb-demo .rb-modal-card {
  position: relative;
  background: #fff;
  border-radius: 18px 18px 0 0;
  width: 100%;
  padding: 16px;
}
.rb-demo .rb-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.rb-demo .rb-modal-x {
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--md-muted);
}
.rb-demo .rb-call-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rb-demo .rb-call-opt {
  text-align: left;
  border: 1px solid var(--md-line);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rb-demo .rb-call-opt b { font-size: 14.5px; }
.rb-demo .rb-call-opt span {
  color: var(--md-muted);
  font-size: 12.5px;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .scene.is-active,
  .toast,
  .tour-spotlight.is-on,
  .am-spinner,
  .anna-push,
  .am-panel.is-revealed,
  .phone-wrap.is-enter,
  .phone-wrap.is-exit,
  .tour-hint,
  .sim-click,
  .sim-pointer,
  .dt2-modal-card,
  .anna-app,
  .dt2-counter-form,
  .mdoc-kopfbild.is-schreibt,
  .mdoc-caret,
  .pv-neu { animation: none !important; transition: none !important; }
  html, body { overflow: auto; }
}

/* ── Recruiting-Tour ─────────────────────────────────────── */
.hub-ico.is-rose { background: #fce7f3; color: #9d174d; }

.dscene[data-dscene="recruiting"] {
  overflow: auto;
  background: #f7f9fc;
}
.rcv { min-height: 100%; }
.rcv[hidden] { display: none !important; }
.rd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Verwaltung */
.rd-admin {
  --rd-ink: #10233f;
  --rd-muted: #64748b;
  --rd-line: #e6ebf2;
  --rd-primary: #2563eb;
  min-height: 100%;
  padding: 16px 18px 22px;
  color: var(--rd-ink);
  font-size: 13px;
  background: #f7f9fc;
}
.rd-page-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.rd-page-head h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.rd-page-head p { margin: 4px 0 0; color: var(--rd-muted); max-width: 36rem; }
.rd-head-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rd-btn, .rd-btn-out, .rd-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 14px;
  border: 1px solid var(--rd-line, #e6ebf2);
  background: #fff;
  color: var(--rd-ink, #10233f);
  font-weight: 700;
  font-size: 12.5px;
}
.rd-btn-p, .rd-submit { background: #2563eb; border-color: #2563eb; color: #fff; }
.rd-btn-sm { min-height: 32px; font-size: 12px; }
.rd-btn-out { color: #2563eb; border-color: #bfdbfe; }
.rd-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--rd-line);
  border-radius: 14px;
}
.rd-subnav span {
  padding: 7px 11px;
  border-radius: 10px;
  font-weight: 650;
  color: var(--rd-muted);
}
.rd-subnav span.is-on { background: #eff4ff; color: #2563eb; }
.rd-subnav i {
  display: inline-block;
  margin-left: 4px;
  min-width: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
  text-align: center;
}
.rd-panel {
  background: #fff;
  border: 1px solid var(--rd-line);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 8px 24px rgba(15, 35, 65, 0.05);
}
.rd-panel h2 {
  margin: 0 0 8px;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.rd-panel h2 a, .rd-more { color: #2563eb; font-size: 12px; font-weight: 650; }
.rd-hint { margin: 0 0 12px; color: var(--rd-muted); line-height: 1.5; }
.rd-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rd-mode {
  padding: 14px;
  border: 1.5px solid var(--rd-line);
  border-radius: 14px;
  background: #f8fafc;
}
.rd-mode.is-on { border-color: #2563eb; background: #eff4ff; }
.rd-mode b { display: block; margin-bottom: 6px; }
.rd-mode p { margin: 0 0 8px; color: #334155; line-height: 1.45; }
.rd-mode code {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: #1d4ed8;
}
.rd-mode small { display: block; margin-top: 6px; color: var(--rd-muted); }

.rd-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.rd-stat {
  background: #fff;
  border: 1px solid var(--rd-line);
  border-radius: 14px;
  padding: 10px 12px;
}
.rd-stat span { display: block; font-size: 11px; font-weight: 700; color: var(--rd-muted); }
.rd-stat b { display: block; font-size: 22px; letter-spacing: -0.03em; }
.rd-stat small { color: var(--rd-muted); }
.rd-stat.tone-blue b { color: #2563eb; }
.rd-stat.tone-violet b { color: #7c3aed; }
.rd-stat.tone-green b { color: #059669; }
.rd-stat.tone-red b { color: #dc2626; }
.rd-stat.tone-orange b { color: #ea580c; }

.rd-work { display: grid; grid-template-columns: 1.15fr 0.95fr 0.7fr; gap: 12px; align-items: start; }
.rd-col-list, .rd-col-detail, .rd-col-side { min-width: 0; }
.rd-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rd-pills a {
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--rd-line);
  font-size: 12px;
  font-weight: 650;
  color: var(--rd-muted);
}
.rd-pills a.is-on { background: #eff4ff; border-color: #bfdbfe; color: #1d4ed8; }
.rd-count-line { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; font-size: 13px; }
.rd-sort { margin-left: auto; color: var(--rd-muted); font-size: 12px; }
.rd-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--rd-line);
  border-radius: 14px;
}
.rd-row.is-on { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.rd-av {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #dbeafe; color: #1d4ed8;
  font-weight: 800; font-size: 12px; flex: none;
}
.rd-av-lg { width: 52px; height: 52px; font-size: 16px; }
.rd-av-sm { width: 22px; height: 22px; font-size: 9px; }
.rd-av.tone-2 { background: #ede9fe; color: #6d28d9; }
.rd-av.tone-3 { background: #dcfce7; color: #047857; }
.rd-row-main { flex: 1; min-width: 0; }
.rd-row-main b { display: block; }
.rd-row-main small { color: var(--rd-muted); }
.rd-row-side { text-align: right; }
.rd-row-side time { display: block; font-size: 11px; color: var(--rd-muted); }
.rd-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  background: #eff4ff;
  color: #1d4ed8;
}
.rd-pill.is-neu { background: #eff4ff; color: #1d4ed8; }
.rd-pill.is-in_pruefung { background: #ede9fe; color: #6d28d9; }
.rd-pill.is-gespraech_geplant { background: #ccfbf1; color: #0f766e; }
.rd-pill.is-zusage, .rd-pill.is-eingestellt { background: #dcfce7; color: #047857; }
.rd-preview {
  background: #fff;
  border: 1px solid var(--rd-line);
  border-radius: 18px;
  padding: 16px;
}
.rd-preview-head { display: flex; gap: 12px; align-items: flex-start; }
.rd-preview-head h2 { margin: 0 0 4px; font-size: 18px; }
.rd-preview-sub, .rd-empty { color: var(--rd-muted); }
.rd-preview-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.rd-preview-facts dt { font-size: 11px; color: var(--rd-muted); font-weight: 700; }
.rd-preview-facts dd { margin: 0; font-weight: 650; }
.rd-preview-flag { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: #eff4ff; color: #1d4ed8; font-weight: 650; }
.rd-preview-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rd-mini li { display: flex; justify-content: space-between; gap: 8px; }

/* Öffentliche Karriere / Portal */
.rd-pub { min-height: 100%; background: #fff; color: #10233f; }
.rd-pub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 22px;
  border-bottom: 1px solid #e3e9f2;
  position: sticky; top: 0; background: rgba(255,255,255,.94); z-index: 2;
}
.rd-pub-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; }
.rd-pub-brand img { border-radius: 8px; }
.rd-pub-nav nav { display: flex; gap: 4px; }
.rd-pub-nav i { padding: 6px 10px; border-radius: 10px; font-style: normal; font-weight: 650; color: #55637a; }
.rd-pub-nav i.is-on { background: #eff4ff; color: #2563eb; }
.rd-pub-hero {
  padding: 28px 22px 16px;
  background: linear-gradient(180deg, #eff4fc 0%, #fff 92%);
}
.rd-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eff4ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rd-pub-hero h1 { margin: 0 0 8px; font-size: 28px; letter-spacing: -0.02em; line-height: 1.15; }
.rd-pub-hero p { margin: 0 0 8px; color: #55637a; max-width: 40rem; }
.rd-job-meta, .rd-job-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.rd-job-meta span, .rd-job-chips span {
  padding: 3px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 650;
}
.rd-back { font-weight: 650; color: #2563eb; }
.rd-pub-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 22px 24px; }
.rd-job {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(15, 35, 65, 0.06);
  color: inherit;
}
.rd-job h3 { margin: 0; font-size: 16px; }
.rd-job-sum { margin: 0; color: #64748b; }
.rd-job-more { margin-top: auto; font-weight: 650; color: #2563eb; }
.rd-pub-form { padding: 8px 22px 28px; max-width: 720px; }
.rd-pub-form h2 { margin: 0 0 6px; font-size: 20px; }
.rd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.rd-form-grid label, .rd-area, .rd-file {
  display: grid; gap: 4px; font-size: 12px; font-weight: 650;
}
.rd-form-grid i, .rd-area i, .rd-file em, .rd-hcard i, .rd-select select {
  min-height: 40px;
  padding: 8px 10px;
  border: 1.5px solid #e3e9f2;
  border-radius: 12px;
  background: #fff;
  font-weight: 500;
  font-style: normal;
  display: flex;
  align-items: center;
}
.rd-area i { min-height: 72px; align-items: flex-start; line-height: 1.45; }
.rd-file em { border-style: dashed; color: #2563eb; }
.rd-file small, .rd-form-note { color: #64748b; font-weight: 400; font-size: 11.5px; }
.rd-check { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; color: #55637a; font-size: 12.5px; }
.rd-check::before {
  content: "";
  width: 18px; height: 18px; flex: none; margin-top: 1px;
  border: 1.5px solid #cbd5e1; border-radius: 5px; background: #fff;
}
.rd-check.is-on::before { background: #2563eb; border-color: #2563eb; box-shadow: inset 0 0 0 3px #fff; }
.rd-submit { width: 100%; min-height: 44px; margin-top: 10px; }

/* Portal */
.rd-portal { padding: 18px 22px 28px; max-width: 720px; }
.rd-portal h1 { margin: 0 0 12px; font-size: 24px; }
.rd-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(15, 35, 65, 0.06);
  padding: 16px;
  margin-bottom: 12px;
}
.rd-card h2 { margin: 0 0 10px; font-size: 16px; }
.rd-ref { margin: 0 0 4px; color: #64748b; font-size: 12.5px; }
.rd-pstatus { margin: 0 0 10px; font-size: 16px; font-weight: 650; }
.rd-meta { margin: 6px 0 0; color: #64748b; font-size: 12.5px; }
.rd-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 0; }
.rd-steps li { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: #94a3b8; }
.rd-steps li span { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; }
.rd-steps li.is-done { color: #10233f; }
.rd-steps li.is-done span { background: #93c5fd; }
.rd-steps li.is-current { color: #2563eb; }
.rd-steps li.is-current span { background: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18); }
.rd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rd-list li { padding: 8px 10px; background: #f8fafc; border-radius: 12px; display: flex; flex-direction: column; }
.rd-list li span { color: #64748b; font-size: 12px; }
.rd-thread { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.rd-thread li { padding: 8px 10px; border-radius: 12px; background: #f8fafc; }
.rd-thread li.is-haus { background: #eff4ff; }
.rd-thread li.is-ich { background: #f1f5f9; }
.rd-thread li.is-empty { color: #64748b; }
.rd-thread-meta { margin: 0 0 4px; font-size: 11px; color: #64748b; font-weight: 650; }
.rd-slotpick {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin-bottom: 6px;
  border: 2px solid #e2e8f0; border-radius: 14px; font-weight: 650;
}
.rd-slotpick.is-on { border-color: #2563eb; background: #eff4ff; }

/* Mail */
.rd-inbox { display: grid; grid-template-columns: 160px 1fr; min-height: 100%; background: #f4f7fb; }
.rd-inbox-side { padding: 16px 12px; border-right: 1px solid #e3e9f1; background: #fff; }
.rd-inbox-side b { display: block; margin-bottom: 10px; }
.rd-inbox-side span { display: block; padding: 7px 8px; border-radius: 8px; color: #64748b; font-weight: 650; }
.rd-inbox-side span.is-on { background: #eff4ff; color: #1d4ed8; }
.rd-inbox-main { padding: 16px 20px 24px; overflow: auto; }
.rd-inbox-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.rd-inbox-meta span, .rd-inbox-meta em { display: block; color: #6b7a90; font-size: 12px; font-style: normal; }
.rd-inbox-subj { margin: 0 0 12px; font-size: 18px; }
.rd-mail {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e3e9f1;
  border-radius: 14px;
  overflow: hidden;
}
.rd-mail-head {
  padding: 22px 28px 14px;
  text-align: center;
  background: #fff;
}
.rd-mail-head img {
  display: block;
  width: 72px; height: 72px;
  margin: 0 auto 10px;
  object-fit: contain;
}
.rd-mail-head strong { display: block; font-size: 18px; color: #12233f; }
.rd-mail-bar { height: 4px; background: #174d7e; }
.rd-mail-body { padding: 22px 28px 8px; color: #3b4757; font-size: 14px; line-height: 1.6; }
.rd-mail-body h3 { margin: 0 0 12px; font-size: 20px; color: #12233f; }
.rd-mail-body p { margin: 0 0 12px; }
.rd-mail-facts {
  background: #f4f7fb;
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 16px;
}
.rd-mail-facts div { display: flex; gap: 12px; padding: 3px 0; }
.rd-mail-facts em { min-width: 140px; color: #6b7a90; font-style: normal; font-size: 13px; }
.rd-mail-facts b { color: #12233f; }
.rd-mail-btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 10px;
  background: #174d7e;
  color: #fff;
  font-weight: 750;
  margin-bottom: 8px;
}
.rd-mail-url { margin: 0 0 16px; font-size: 12px; color: #6b7a90; word-break: break-all; }
.rd-mail-foot {
  padding: 0 28px 22px;
  border-top: 1px solid #e3e9f1;
  margin: 0 28px 0;
  padding-top: 14px;
}
.rd-mail-foot p { margin: 0 0 6px; font-size: 12px; line-height: 1.55; color: #6b7a90; }
.rd-mail-note {
  background: #fff7e6;
  border: 1.5px solid #f0c36d;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 16px;
  text-align: center;
}
.rd-mail-note b { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a6100; margin-bottom: 4px; }
.rd-mail-note span { color: #5b4300; font-size: 13px; line-height: 1.5; }

/* Akte */
.rd-admin.is-akte { padding-top: 10px; }
.rd-akte-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rd-akte-back { font-weight: 700; color: #2563eb; }
.rd-akte-pos { color: var(--rd-muted); }
.rd-akte-steps { margin-left: auto; display: flex; gap: 8px; }
.rd-akte-steps i { font-style: normal; font-weight: 650; color: #2563eb; }
.rd-akte-steps i.is-off { color: #94a3b8; }
.rd-akte {
  background: #fff;
  border: 1px solid var(--rd-line);
  border-radius: 18px;
  padding: 16px;
}
.rd-akte-head { display: flex; gap: 12px; align-items: flex-start; }
.rd-akte-title { display: flex; align-items: center; gap: 8px; }
.rd-akte-title h2 { margin: 0; font-size: 22px; }
.rd-akte-head p { margin: 4px 0 0; color: var(--rd-muted); }
.rd-akte-id { margin-left: auto; color: var(--rd-muted); font-size: 12px; }
.rd-akte-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0;
  padding: 12px;
  background: #f8fafc;
  border-radius: 14px;
}
.rd-akte-controls label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; }
.rd-select { display: flex; align-items: center; gap: 6px; }
.rd-select select {
  min-height: 36px;
  border: 1.5px solid var(--rd-line);
  border-radius: 10px;
  padding: 4px 8px;
  font: inherit;
}
.rd-hire { min-width: 200px; }
.rd-hire p { margin: 0 0 6px; font-weight: 500; color: var(--rd-muted); }
.rd-akte-body { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 14px; }
.rd-akte-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.rd-akte-tabs span {
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 650;
  color: var(--rd-muted);
}
.rd-akte-tabs span.is-on { background: #eff4ff; color: #2563eb; }
.rd-akte-tabs i { font-style: normal; font-size: 11px; }
.rd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.rd-facts em { display: block; font-size: 11px; color: var(--rd-muted); font-style: normal; }
.rd-letter { background: #f8fafc; border-radius: 12px; padding: 12px; }
.rd-letter em { display: block; font-size: 11px; color: var(--rd-muted); margin-bottom: 4px; font-style: normal; }
.rd-letter p { margin: 0; line-height: 1.5; }
.rd-akte-notes {
  background: #f8fafc;
  border: 1px solid var(--rd-line);
  border-radius: 14px;
  padding: 12px;
  min-height: 280px;
}
.rd-notes-head { display: flex; justify-content: space-between; align-items: center; }
.rd-notes-head h3 { margin: 0; font-size: 14px; }
.rd-notes-head span {
  min-width: 20px; padding: 0 6px; border-radius: 999px;
  background: #2563eb; color: #fff; font-size: 11px; font-weight: 750; text-align: center;
}
.rd-note-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0; }
.rd-toggle { font-size: 12px; color: var(--rd-muted); font-weight: 650; }
.rd-toggle.is-on::before { content: "● "; color: #2563eb; }
.rd-notes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.rd-notes li { background: #fff; border-radius: 10px; padding: 8px 10px; }
.rd-notes small { color: var(--rd-muted); }
.rd-termin-form { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rd-line); }
.rd-termin-form h3 { margin: 0 0 6px; }
.rd-termin-form label { display: grid; gap: 4px; margin: 8px 0; font-weight: 650; font-size: 12px; }
.rd-termin-form input, .rd-termin-form select {
  min-height: 36px; border: 1.5px solid var(--rd-line); border-radius: 10px; padding: 6px 8px; font: inherit;
}
.rd-slots { display: grid; gap: 6px; }
.rd-slots label { padding: 8px 10px; border: 2px solid var(--rd-line); border-radius: 12px; }
.rd-slots label.is-on { border-color: #2563eb; background: #eff4ff; }

/* Konferenz */
.rd-call {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 220px;
  grid-template-rows: 1fr auto;
  background: #081320;
  color: #f8fafc;
}
.rd-call-stage { grid-column: 1; display: flex; flex-direction: column; min-height: 0; }
.rd-call-head {
  display: flex; justify-content: space-between;
  padding: 12px 16px; font-weight: 700;
}
.rd-call-join { margin: 0 16px 8px; color: #99f6e4; font-weight: 650; }
.rd-call-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px 16px 12px;
  min-height: 280px;
}
.rd-ctile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 16px;
  background: #122033;
  padding: 12px;
  min-height: 200px;
}
.rd-ctile.is-talk { box-shadow: 0 0 0 3px #2dd4bf; }
.rd-ctile-av {
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  margin: auto; font-size: 22px; font-weight: 800;
}
.rd-ctile-foot { display: flex; align-items: center; gap: 8px; }
.rd-ctile-foot i { font-style: normal; font-size: 11px; opacity: 0.75; }
.rd-call-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: #0b1a2b;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.rd-call-info { display: flex; flex-direction: column; font-size: 12px; }
.rd-call-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-cbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 12px;
  background: #1e3348;
  font-weight: 700;
  font-size: 12.5px;
}
.rd-cbtn.is-on { background: #174d7e; }
.rd-cbtn-end { background: #b91c1c; }
.rd-cbtn i {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: 0.7;
}
.rd-call-notes {
  grid-column: 2;
  grid-row: 1;
  padding: 14px 12px;
  background: #0f1c2c;
  border-left: 1px solid rgba(255,255,255,0.06);
}
.rd-call-notes h3 { margin: 0 0 6px; font-size: 13px; }
.rd-call-notes p { margin: 0 0 8px; font-size: 11.5px; color: #94a3b8; }
.rd-call-notes i {
  display: block;
  font-style: normal;
  line-height: 1.45;
  background: #122033;
  border-radius: 10px;
  padding: 10px;
  min-height: 120px;
}

/* Mitarbeiter anlegen */
.rd-hirepage { padding: 16px 18px 22px; background: #f7f9fc; min-height: 100%; }
.rd-hire-head h1 { margin: 0; font-size: 22px; }
.rd-hire-head p { margin: 4px 0 12px; color: #64748b; }
.rd-flash {
  padding: 12px 14px;
  border-radius: 12px;
  background: #eff4ff;
  border: 1px solid #bfdbfe;
  margin-bottom: 12px;
  line-height: 1.45;
}
.rd-hire-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rd-hcard {
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 16px;
  padding: 14px;
}
.rd-hcard h3 { margin: 0 0 10px; font-size: 15px; }
.rd-hcard label { display: grid; gap: 4px; margin-bottom: 8px; font-size: 12px; font-weight: 650; }
.rd-hcard small { color: #64748b; font-weight: 400; }
.rd-login-preview { margin: 0 0 8px; color: #64748b; }
.rd-chip {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eff4ff;
  color: #1d4ed8;
  font-weight: 700;
}
.rd-hire-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.rd-hire-foot p { margin: 0; color: #64748b; max-width: 36rem; }

/* ===========================================================================
   AUSWAHLSEITE: BEREICHE STATT EINER REIHE (18.08.2026)

   Die fuenf nicht hervorgehobenen Touren standen unter einer Ueberschrift
   „Weitere Funktionen entdecken" nebeneinander. Jetzt tragen sie dieselbe
   Einteilung wie die Modulwelt auf medora.software/module — mit einem Satz
   dazu, worum es in dem Bereich geht, und einer Marke „Kern" bzw. „Add-on".
   Die Touren selbst sind unveraendert.
   =========================================================================== */
.hub-groups {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hub-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hub-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}
.hub-group-head h2 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--md-ink);
}
.hub-group-tag {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Der erklaerende Satz gehoert unter die Ueberschrift, nicht daneben.
   `width: 100%` allein reicht dafuer nicht: Als Flex-Element schrumpft der
   Absatz und rutscht in dieselbe Zeile wie Titel und Marke. */
.hub-group-head p {
  margin: 0;
  flex: 0 0 100%;
  max-width: 70ch;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.55;
  color: var(--md-muted);
}
.hub-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
/* Ein einzelner Eintrag soll nicht die ganze Breite fuellen – sonst sieht
   die Gruppe aus wie ein Banner und nicht wie eine Karte. */
@media (min-width: 860px) {
  .hub-group-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Ehrlicher Abschluss: was die Klickdemo nicht zeigen kann. */
.hub-rest {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px dashed var(--md-line);
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hub-rest h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -0.015em;
  color: var(--md-ink);
}
.hub-rest p {
  margin: 0;
  max-width: 78ch;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.55;
  color: var(--md-muted);
}
.hub-rest-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}