/* === BlitzDoc — style.css === */
/* Design: Premium, minimalist — Swiss medical-grade SaaS */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

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

:root {
  /* — Legacy aliases (backward compat) — */
  --blue: #2563eb;
  --blue-light: #3b82f6;
  --blue-bg: rgba(37, 99, 235, 0.06);
  --green: #059669;
  --green-light: #10b981;
  --green-bg: #ecfdf5;
  --orange: #f59e0b;
  --red: #ef4444;
  --purple: #8b5cf6;
  --dark: #0f172a;
  --text: #0f172a;
  --text-light: #64748b;
  --gray: #94a3b8;
  --gray-light: #f8fafc;
  --white: #ffffff;

  /* — Premium Design Tokens — */
  --primary: #0f172a;
  --primary-light: #1e293b;
  --accent: #2563eb;
  --accent-light: #3b82f6;
  --accent-subtle: rgba(37, 99, 235, 0.08);
  --success: #10b981;
  --danger: #ef4444;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --bg: #ffffff;
  --bg-subtle: #f8fafc;
  --bg-muted: #f1f5f9;

  /* — Zima Blue Palette — */
  --zima: #00B4D8;
  --zima-light: #38BDF8;
  --zima-dark: #0891B2;
  --zima-glow: rgba(0, 180, 216, 0.12);
  --zima-subtle: rgba(0, 180, 216, 0.06);

  /* — Sidebar — */
  --sidebar-bg: #0c0c0c;
  --sidebar-text: #a1a1aa;
  --sidebar-active: #ffffff;
  --sidebar-hover: rgba(255,255,255,0.06);
  --sidebar-accent: #ffffff;

  /* — Shadows (refined) — */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.04), 0 10px 24px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.06), 0 24px 48px rgba(0,0,0,0.08);
  --shadow-xl: 0 8px 16px rgba(0,0,0,0.04), 0 20px 60px rgba(0,0,0,0.1);

  /* — Radius (smaller = sharper) — */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius: 14px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* — Transition — */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration: 0.2s;
  --transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  line-height: 1.6;
  font-size: 15px;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
  font-feature-settings: 'cv11', 'ss01';
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 { line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; color: var(--primary); }
h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.025em; }
h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; }
p { color: var(--text-secondary); }
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
code { background: var(--accent-subtle); padding: 2px 8px; border-radius: var(--radius-xs); font-size: 0.88em; color: var(--accent); font-weight: 500; }

/* Focus ring (accessibility) */
:focus-visible {
  outline: 2px solid var(--zima);
  outline-offset: 2px;
}

/* === BUTTONS (3-tier hierarchy) === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s var(--ease);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.btn-lg { padding: 12px 28px; font-size: 15px; border-radius: var(--radius-md); }

/* Primary — dark, premium feel */
.btn-primary { background: var(--primary); color: #ffffff; border-color: var(--primary); box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: var(--primary-light); box-shadow: var(--shadow-sm); transform: translateY(-0.5px); }

/* Secondary — outlined */
.btn-outline, .btn-secondary { background: #ffffff; color: var(--primary); border-color: var(--border); }
.btn-outline:hover, .btn-secondary:hover { background: var(--bg-subtle); border-color: #cbd5e1; }

/* Ghost — minimal */
.btn-ghost { background: transparent; color: var(--text-secondary); border: none; padding: 8px 12px; }
.btn-ghost:hover { color: var(--text); background: var(--bg-subtle); }

/* White variants (for dark backgrounds) */
.btn-white { background: white; color: var(--primary); border-color: white; box-shadow: var(--shadow-sm); }
.btn-white:hover { background: var(--bg-subtle); transform: translateY(-0.5px); }
.btn-outline-white { background: rgba(255,255,255,0.08); color: white; border-color: rgba(255,255,255,0.2); }
.btn-outline-white:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); }
.btn-block { display: flex; justify-content: center; width: 100%; }

/* === NAV === */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  transition: all var(--transition);
}
.nav.scrolled { box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 24px rgba(0,0,0,0.06); }
.nav-container {
  max-width: 1140px; margin: 0 auto;
  padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.nav-logo {
  font-size: 1.25rem; font-weight: 800; color: var(--dark);
  display: flex; align-items: center; gap: 6px; text-decoration: none;
  letter-spacing: -0.03em;
}
.logo-icon { font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #D52B1E; color: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(213,43,30,0.25); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: var(--text-light); font-size: 14px; font-weight: 500; transition: color var(--transition); }
.nav-links a:hover { color: var(--zima); }
.nav-login {
  color: var(--text) !important; padding: 8px 16px !important;
  border: 1.5px solid #e2e8f0 !important; border-radius: var(--radius-sm) !important;
  font-size: 14px !important; font-weight: 600 !important; transition: all 0.2s !important;
  background: transparent !important;
}
.nav-login:hover { border-color: var(--zima) !important; color: var(--zima) !important; background: var(--zima-subtle) !important; }
.nav-cta {
  background: linear-gradient(135deg, var(--zima-dark), var(--zima)) !important; color: white !important;
  padding: 8px 20px !important; border-radius: var(--radius-sm) !important;
  box-shadow: 0 2px 8px rgba(0,180,216,0.25) !important;
}
.nav-cta:hover { background: linear-gradient(135deg, var(--zima), var(--zima-light)) !important; box-shadow: 0 4px 12px rgba(0,180,216,0.35) !important; transform: translateY(-0.5px); }
.nav-hamburger {
  display: none; background: none; border: none; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 4px;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px;
  transition: all var(--transition);
}

/* === HERO === */
.hero {
  padding: 120px 0 40px;
  background: linear-gradient(180deg, #f0f9ff 0%, #f8fbff 50%, white 100%);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 60%; height: 80%;
  background: radial-gradient(ellipse, rgba(0,180,216,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -20%; left: -15%;
  width: 50%; height: 60%;
  background: radial-gradient(ellipse, rgba(56,189,248,0.05) 0%, transparent 65%);
  pointer-events: none;
}
.hero-grid {
  display: flex; flex-direction: column; align-items: center;
}
.hero-text { text-align: center; max-width: 720px; margin: 0 auto; }
.hero-subtitle { font-size: 1.1rem; margin: 20px auto 30px; max-width: 600px; line-height: 1.7; }
.hero-metrics { justify-content: center; }
.compliance-badges { justify-content: center; }
.hero-cta { justify-content: center; }
.hero-trust { justify-content: center; }

/* Demo Showcase — sticky section */
.demo-showcase {
  position: relative;
  background: linear-gradient(180deg, #fafbff 0%, white 100%);
  padding: 0 0 60px;
}
.demo-showcase-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}
.demo-showcase-sticky {
  position: sticky;
  top: 80px;
  z-index: 5;
}
.demo-iframe-wrap {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15), 0 20px 60px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.08);
}
.demo-fullscreen-link {
  text-align: center;
  margin-top: 12px;
}
.demo-fullscreen-link a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-light); font-size: 13px; font-weight: 500; text-decoration: none;
}
.demo-fullscreen-link a:hover { color: var(--blue); }
.demo-mobile-preview { display: none; }
.demo-mobile-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: white; color: #0f172a;
  padding: 12px 28px; border-radius: 12px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green-bg); color: var(--green);
  padding: 6px 16px; border-radius: 100px;
  font-size: 13px; font-weight: 600; margin-bottom: 20px;
  border: 1px solid rgba(5,150,105,0.12);
}
.badge-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green-light);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.gradient-text {
  background: linear-gradient(135deg, var(--zima-dark) 0%, var(--zima-light) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero Metrics Strip */
.hero-metrics {
  display: flex; gap: 32px; margin-bottom: 28px; flex-wrap: wrap;
}
.hero-metric { display: flex; flex-direction: column; }
.metric-number {
  font-size: 2rem; font-weight: 800; color: var(--dark);
  background: linear-gradient(135deg, var(--zima-dark), var(--zima-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1.1; letter-spacing: -0.03em;
}
.metric-label { font-size: 12px; color: var(--text-light); font-weight: 500; margin-top: 2px; }

/* Compliance Badges */
.compliance-badges {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px;
}
.compliance-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 14px; border-radius: 100px; font-size: 11px; font-weight: 600;
  border: 1px solid;
}
.compliance-pill.swiss {
  background: #fef2f2; color: #b91c1c; border-color: #fecaca;
}
.compliance-pill.eu {
  background: #eff6ff; color: #1e40af; border-color: #bfdbfe;
}
.compliance-pill.hosting {
  background: var(--green-bg); color: var(--green); border-color: #a7f3d0;
}

.hero-cta { display: flex; gap: 12px; margin-bottom: 30px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 20px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-light); font-weight: 500; }

/* Integration Logos Section */
.integration-logos {
  padding: 48px 0; background: var(--gray-light); border-top: 1px solid #f1f5f9;
}
.integration-logos-inner {
  text-align: center;
}
.integration-logos-label {
  font-size: 13px; color: var(--gray); font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.5px; margin-bottom: 20px;
}
.integration-logos-grid {
  display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap;
}
.integration-logo-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0.7; transition: opacity var(--transition);
}
.integration-logo-item:hover { opacity: 1; }
.integration-logo-icon {
  width: 48px; height: 48px; border-radius: 14px; display: flex;
  align-items: center; justify-content: center; font-size: 24px;
  background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  border: 1px solid #e2e8f0; transition: all var(--transition);
}
.integration-logo-item:hover .integration-logo-icon { box-shadow: var(--shadow); transform: translateY(-2px); }
.integration-logo-name { font-size: 11px; color: var(--text-light); font-weight: 600; }

/* Hero Mockup */
.hero-mockup { perspective: 1000px; }
.mockup-browser {
  background: #1e293b; border-radius: 14px 14px 0 0;
  padding: 10px 16px; display: flex; align-items: center; gap: 12px;
}
.mockup-dots { display: flex; gap: 6px; }
.mockup-dots span { width: 10px; height: 10px; border-radius: 50%; }
.mockup-dots span:nth-child(1) { background: #e74c3c; }
.mockup-dots span:nth-child(2) { background: #f39c12; }
.mockup-dots span:nth-child(3) { background: #27ae60; }
.mockup-url {
  flex: 1; background: rgba(255,255,255,0.1); border-radius: 4px;
  padding: 4px 10px; color: #aaa; font-size: 11px; font-family: monospace;
}
.mockup-content {
  background: #f8fafc; border-radius: 0 0 14px 14px;
  padding: 20px; box-shadow: var(--shadow-lg); border: 1px solid #e2e8f0;
  border-top: none; min-height: 310px; position: relative; overflow: hidden;
}
.mockup-slide {
  display: none;
  animation: slideFadeIn 0.5s ease;
}
.mockup-slide.active {
  display: block;
}
@keyframes slideFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Hero Mockup I/O Layout */
.mockup-io-input {
  background: white; border: 1px solid #e0e0e0; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 6px;
}
.mockup-io-output {
  background: rgba(26,82,118,0.03); border: 1px solid rgba(26,82,118,0.12);
  border-radius: 8px; padding: 10px 12px;
}
.mockup-io-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--gray); margin-bottom: 6px;
  display: flex; align-items: center; gap: 4px;
}
.mockup-io-label span { font-size: 13px; }
.mockup-io-text {
  font-size: 12px; color: var(--text); font-style: italic;
  line-height: 1.5; font-family: 'Courier New', monospace;
}
.mockup-io-arrow {
  text-align: center; padding: 3px 0; font-size: 14px;
  color: #fff; background: #D52B1E; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 2px auto;
  filter: drop-shadow(0 1px 3px rgba(213,43,30,0.3));
}
.mockup-indicators {
  display: flex; justify-content: center; gap: 8px; margin-top: 14px;
}
.mockup-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ddd; cursor: pointer; transition: all 0.3s ease;
}
.mockup-dot.active { background: var(--blue); width: 20px; border-radius: 4px; }

/* Mockup mode toggle (Normal / Ausführlich) */
.mockup-mode-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ddd;
  background: #eee;
}
.mockup-mode-btn {
  flex: 1;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.mockup-mode-btn.active {
  background: var(--blue);
  color: white;
}

.mockup-sidebar-header {
  font-weight: 700; font-size: 14px; color: var(--blue);
  padding-bottom: 10px; border-bottom: 2px solid var(--blue);
  margin-bottom: 14px;
}
.mockup-field { margin-bottom: 12px; }
.mockup-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--blue); letter-spacing: 0.5px; margin-bottom: 4px;
}
.mockup-text { font-size: 12px; color: var(--text); line-height: 1.5; }
.typing { color: var(--green); }

/* === STATS === */
.stats {
  padding: 48px 0;
  background: linear-gradient(135deg, #0c1829 0%, #0e3552 60%, rgba(0,180,216,0.15) 100%);
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-number { font-size: 2rem; font-weight: 800; color: white; letter-spacing: -0.03em; }
.stat-label { font-size: 13px; color: rgba(255,255,255,0.65); font-weight: 500; }

/* === FEATURES === */
.features { padding: 80px 0; }
.section-header { text-align: center; max-width: 600px; margin: 0 auto 50px; }
.section-header h2 { margin-bottom: 12px; }
.section-header p { font-size: 1.05rem; line-height: 1.7; }

.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: all 0.2s var(--ease);
  background: white;
}
.feature-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,180,216,0.1); border-color: rgba(0,180,216,0.25); }
.feature-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.feature-card h3 { margin-bottom: 8px; }
.feature-card p { font-size: 14px; line-height: 1.6; }

/* === HOW IT WORKS === */
.how-it-works { padding: 80px 0; background: var(--gray-light); }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step { text-align: center; }
.step-number {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--zima-dark), var(--zima-light)); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; margin: 0 auto 20px;
  box-shadow: 0 4px 12px rgba(0,180,216,0.25);
}
.step-content h3 { margin: 12px 0 6px; }
.step-content p { font-size: 14px; }

.step-mockup { margin-bottom: 16px; }
.step-screen {
  background: white; border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow);
  border: 1px solid #e2e8f0; text-align: left;
}
.screen-title { font-size: 11px; font-weight: 700; color: var(--blue); margin-bottom: 10px; }
.screen-input {
  background: var(--gray-light); border-radius: 6px; padding: 8px 10px;
  font-size: 11px; margin-bottom: 8px; font-family: monospace;
}
.input-label { color: var(--gray); font-weight: 600; }
.input-text { color: var(--text); }
.screen-chip {
  display: inline-block; background: var(--blue-bg); color: var(--blue);
  padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; margin-right: 4px;
}
.screen-progress {
  height: 4px; background: #ecf0f1; border-radius: 2px;
  margin: 8px 0; overflow: hidden;
}
.progress-bar-demo {
  height: 100%; width: 75%; background: linear-gradient(90deg, var(--blue), var(--green-light));
  border-radius: 2px; animation: progressAnim 2s ease-in-out infinite;
}
@keyframes progressAnim { 0% { width: 20%; } 50% { width: 90%; } 100% { width: 20%; } }
.screen-output { font-size: 11px; line-height: 1.6; }
.screen-output div { margin-bottom: 2px; }
.screen-praxis { margin: 8px 0; }
.praxis-field {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; background: var(--green-bg); border-radius: 4px;
  margin-bottom: 3px; font-size: 11px; font-weight: 600; color: var(--green);
}
.check { color: var(--green-light); font-weight: 800; }
.screen-btn {
  display: inline-block; background: var(--blue); color: white;
  padding: 6px 14px; border-radius: 5px; font-size: 11px; font-weight: 600; margin-top: 6px;
}

/* === SECURITY === */
.security { padding: 80px 0; }
.security-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: center; }
.security-subtitle { font-size: 1.05rem; margin: 16px 0 30px; }
.security-features { display: grid; gap: 20px; }
.security-item { display: flex; gap: 16px; }
.security-icon { font-size: 28px; flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--gray-light); border-radius: 12px; border: 1px solid #e2e8f0; }
.security-item h4 { font-size: 14px; margin-bottom: 4px; color: var(--dark); }
.security-item p { font-size: 13px; margin: 0; }

.security-visual { display: flex; justify-content: center; align-items: center; }
.shield-graphic { text-align: center; }
.swiss-shield {
  width: 150px; height: 180px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 8px 24px rgba(213,43,30,0.35));
}
.swiss-shield svg { width: 130px; height: 160px; }
.shield-inner { text-align: center; }
.shield-icon { font-size: 48px; margin-bottom: 4px; display: flex; align-items: center; justify-content: center; }
.shield-text { font-size: 13px; font-weight: 700; color: var(--green); line-height: 1.3; }
.data-flow { display: flex; align-items: center; justify-content: center; gap: 8px; }
.flow-item { font-size: 11px; font-weight: 600; color: var(--text-light); display: flex; align-items: center; gap: 6px; }
.flow-arrow { color: var(--green-light); font-weight: 800; font-size: 16px; }
.flow-center {
  background: var(--green-bg); color: var(--green); padding: 6px 14px;
  border-radius: 6px; font-weight: 700;
}

/* === PRICING === */
.pricing { padding: 80px 0; background: var(--gray-light); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 960px; margin: 0 auto; }
.price-card {
  background: white; border-radius: var(--radius); padding: 36px;
  border: 1.5px solid #e2e8f0; text-align: center; position: relative;
  transition: all var(--transition);
}
.price-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.price-card:first-child { border-color: var(--blue); box-shadow: 0 4px 16px rgba(26,86,219,0.1); }
.price-badge {
  display: inline-block; background: var(--blue); color: white;
  padding: 4px 16px; border-radius: 100px; font-size: 12px; font-weight: 700;
  margin-bottom: 16px;
}
.price-badge-gray { background: var(--gray); }
.price-amount { font-size: 2.5rem; font-weight: 800; color: var(--dark); }
.price-amount span { font-size: 1rem; font-weight: 500; color: var(--gray); }
.price-desc { font-size: 14px; color: var(--gray); margin: 4px 0 20px; }
.price-features { list-style: none; text-align: left; margin-bottom: 24px; }
.price-features li {
  padding: 6px 0; font-size: 14px; color: var(--text);
  border-bottom: 1px solid #f0f0f0;
}
.price-card-future { opacity: 0.85; }

/* === INSTALL === */
.install { padding: 80px 0; }
.install-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 600px; margin: 0 auto 40px; }
.install-card {
  background: white; border-radius: var(--radius); padding: 28px;
  border: 1px solid #e2e8f0; text-align: center; box-shadow: var(--shadow);
  transition: all var(--transition);
}
.install-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.install-icon { margin-bottom: 12px; }
.install-card h3 { margin-bottom: 4px; }
.install-card p { font-size: 13px; margin-bottom: 16px; }
.install-note { display: block; font-size: 11px; color: var(--gray); margin-top: 8px; }

.install-steps {
  max-width: 800px; margin: 0 auto;
  background: var(--gray-light); border-radius: var(--radius); padding: 32px;
}
.install-steps h3 { text-align: center; margin-bottom: 24px; }
.install-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.install-step { text-align: center; }
.install-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--zima); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; margin: 0 auto 10px;
}
.install-step p { font-size: 13px; }

/* === FAQ === */
.faq { padding: 80px 0; background: white; }
.faq-list { max-width: 700px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid #f1f5f9; padding: 18px 0;
}
.faq-item summary {
  font-weight: 600; font-size: 15px; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  color: var(--dark); transition: color var(--transition);
}
.faq-item summary:hover { color: var(--blue); }
.faq-item summary::after { content: '+'; font-size: 20px; color: var(--gray); transition: transform var(--transition); }
.faq-item[open] summary::after { content: '−'; color: var(--blue); }
.faq-item p { margin-top: 10px; font-size: 14px; line-height: 1.7; }

/* === CTA === */
.cta {
  padding: 100px 0;
  background: linear-gradient(135deg, #0c1829 0%, #0e3552 50%, var(--zima-dark) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(0,180,216,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.cta h2 { color: white; margin-bottom: 12px; position: relative; }
.cta p { color: rgba(255,255,255,0.7); font-size: 1.1rem; margin-bottom: 28px; position: relative; }
.cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.email-form { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; }
.email-form input { outline: none; }
.email-form input:focus { box-shadow: 0 0 0 3px rgba(255,255,255,0.3); }

/* === CONTACT SECTION === */
.contact-section { padding: 80px 0; background: var(--gray-light); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: flex-start; }
.contact-info h2 { margin-bottom: 12px; }
.contact-info > p { font-size: 15px; color: var(--text-light); line-height: 1.7; margin-bottom: 28px; }
.contact-details { display: grid; gap: 16px; }
.contact-detail { display: flex; gap: 12px; align-items: flex-start; }
.contact-detail-icon { font-size: 20px; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: white; border-radius: 8px; }
.contact-detail strong { display: block; font-size: 14px; color: var(--dark); margin-bottom: 2px; }
.contact-detail span, .contact-detail a { font-size: 13px; color: var(--text-light); }
.contact-form-wrapper { background: white; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-lg); border: 1px solid #e2e8f0; }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.contact-select, .contact-input, .contact-textarea {
  width: 100%; padding: 10px 14px; border: 1.5px solid #e2e8f0; border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; color: var(--text); transition: all var(--transition);
  background: #fafbfc;
}
.contact-select { background: #fafbfc; cursor: pointer; }
.contact-select:focus, .contact-input:focus, .contact-textarea:focus { outline: none; border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); background: white; }
.contact-textarea { resize: vertical; line-height: 1.6; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .contact-form-row { grid-template-columns: 1fr; }
  .email-form { flex-direction: column; }
  .email-form input { width: 100% !important; }
  .email-form button { width: 100%; }
}

/* === FOOTER === */
.footer { padding: 60px 0 30px; background: var(--sidebar-bg); color: var(--sidebar-text); border-top: 2px solid var(--zima); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand p { margin-top: 10px; font-size: 13px; line-height: 1.6; }
.footer-brand .nav-logo { color: white; }
.footer-links h4 { color: rgba(255,255,255,0.9); font-size: 13px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.footer-links a { display: block; color: rgba(255,255,255,0.45); font-size: 13px; margin-bottom: 8px; transition: color var(--transition); }
.footer-links a:hover { color: var(--zima-light); }
.footer-bottom {
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center; font-size: 12px;
}

/* === TIME SAVING === */
.time-saving { padding: 80px 0; background: white; }
.time-comparison {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px;
  align-items: center; margin-bottom: 40px;
}
.time-card {
  background: var(--gray-light); border-radius: var(--radius); padding: 28px;
  border: 1.5px solid #e2e8f0;
}
.time-before { border-color: rgba(239,68,68,0.15); background: #fef2f2; }
.time-after { border-color: rgba(5,150,105,0.2); background: #ecfdf5; }
.time-card-label {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 16px; text-align: center;
}
.time-before .time-card-label { color: var(--red); }
.time-after .time-card-label { color: var(--green); }
.time-stats { display: grid; gap: 14px; }
.time-stat { display: flex; align-items: baseline; gap: 10px; }
.time-num {
  font-size: 1.4rem; font-weight: 800; color: var(--dark);
  min-width: 90px; text-align: right;
}
.time-before .time-num { color: var(--red); }
.highlight-green { color: var(--green) !important; }
.time-desc { font-size: 13px; color: var(--text-light); }
.time-arrow-container { text-align: center; }
.time-arrow {
  font-size: 2.5rem; color: var(--blue); font-weight: 800;
  animation: arrowPulse 2s ease-in-out infinite;
}
@keyframes arrowPulse {
  0%, 100% { opacity: 0.5; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(4px); }
}
.time-arrow-label { display: block; font-size: 12px; font-weight: 600; color: var(--blue); margin-top: 4px; }
.time-highlight-box {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--blue-bg); border-left: 4px solid var(--blue);
  border-radius: 8px; padding: 20px 24px; margin-bottom: 48px;
}
.time-highlight-icon { font-size: 32px; flex-shrink: 0; }

/* Termin Detail */
.termin-detail {
  background: var(--gray-light); border-radius: var(--radius); padding: 32px;
  border: 1px solid #e0e0e0;
}
.termin-detail-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 8px;
}
.termin-detail-header h3 { margin: 0; font-size: 1.2rem; }
.termin-subtitle { font-size: 14px; margin-bottom: 24px; }
.termin-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.termin-step {
  display: flex; gap: 12px; align-items: flex-start;
}
.termin-step-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--green); color: white; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
}
.termin-step strong { display: block; font-size: 14px; margin-bottom: 2px; color: var(--dark); }
.termin-step p { font-size: 13px; margin: 0; color: var(--text-light); line-height: 1.5; }
.termin-features { display: flex; flex-wrap: wrap; gap: 6px; }

/* === DEMO / WEB TOOL === */
.demo { padding: 80px 0; background: var(--gray-light); }

/* Tabs */
.demo-tabs {
  display: flex; gap: 0; max-width: 900px; margin: 0 auto 24px;
  border-bottom: 2px solid #ddd; overflow-x: auto;
}
.demo-tab {
  padding: 12px 20px; font-size: 14px; font-weight: 600;
  background: none; border: none; border-bottom: 3px solid transparent;
  cursor: pointer; color: var(--text-light); white-space: nowrap;
  transition: all var(--transition); font-family: inherit; margin-bottom: -2px;
}
.demo-tab:hover { color: var(--blue); }
.demo-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.demo-tab-content { display: none; }
.demo-tab-content.active { display: block; }

/* Container */
.demo-container {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 900px; margin: 0 auto;
}

/* Input area */
.demo-input-area { }
.demo-input-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.demo-label { display: block; font-size: 13px; font-weight: 700; color: var(--dark); margin-bottom: 0; }
.demo-textarea {
  width: 100%; border: 1.5px solid #e2e8f0; border-radius: var(--radius-sm);
  padding: 14px; font-size: 14px; font-family: inherit; resize: vertical;
  transition: all var(--transition); line-height: 1.6; background: #fafbfc;
}
.demo-textarea:focus { outline: none; border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); background: white; }

/* Paste / Copy buttons */
.demo-paste-btn, .demo-copy-btn {
  background: none; border: 1px solid #ccc; border-radius: 6px;
  padding: 4px 10px; font-size: 12px; cursor: pointer;
  color: var(--text-light); transition: all var(--transition); font-family: inherit;
}
.demo-paste-btn:hover, .demo-copy-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-bg); }
.demo-copy-btn { margin-left: auto; color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.3); opacity: 0.3; transition: all var(--transition); }
.demo-copy-btn:not(:disabled) { opacity: 1; }
.demo-copy-btn:not(:disabled):hover { color: white; border-color: white; background: rgba(255,255,255,0.1); }
.demo-copy-btn.copied { background: var(--green); border-color: var(--green); color: white; opacity: 1; }

/* OCR Preview */
.demo-ocr-preview {
  position: relative; margin-top: 8px; padding: 10px;
  background: var(--blue-bg); border-radius: var(--radius-sm);
  border: 2px dashed var(--blue-light); text-align: center;
}
.demo-ocr-preview img { max-height: 100px; max-width: 100%; border-radius: 4px; }
.demo-ocr-remove {
  position: absolute; top: 4px; right: 4px;
  background: var(--red); color: white; border: none; border-radius: 50%;
  width: 22px; height: 22px; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.demo-ocr-label { display: block; font-size: 11px; color: var(--blue); margin-top: 4px; font-weight: 600; }

/* Grund / Diagnose field */
.demo-grund-row { margin-top: 10px; }
.demo-grund-label { font-size: 12px; font-weight: 600; color: var(--text); display: block; margin-bottom: 4px; }
.demo-grund-input {
  width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: var(--radius-sm);
  font-size: 13px; font-family: inherit; color: var(--text);
  transition: border-color var(--transition);
}
.demo-grund-input:focus { outline: none; border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.demo-icd-live {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; min-height: 0;
  transition: all 0.2s ease;
}
.demo-icd-live:empty { margin-top: 0; }
.demo-icd-live .icd-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--blue-bg); color: var(--blue); font-size: 11px;
  padding: 3px 10px; border-radius: 12px; font-weight: 600;
  animation: fadeIn 0.2s ease;
}
.demo-icd-live .icd-tag-code { font-weight: 800; }
.demo-icd-live .icd-tag-label { font-weight: 400; opacity: 0.8; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* Output area */
.demo-output-area {
  background: white; border-radius: var(--radius); border: 1.5px solid #e2e8f0;
  overflow: hidden; display: flex; flex-direction: column;
}
.demo-output-header {
  background: var(--dark); color: white; padding: 10px 16px;
  font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.demo-output-icon { font-size: 16px; }
.demo-output-badge {
  background: var(--green); color: white; font-size: 10px;
  padding: 2px 8px; border-radius: 10px; font-weight: 700;
}
.demo-result {
  padding: 16px; flex: 1; font-size: 13px; line-height: 1.7;
  min-height: 250px; overflow-y: auto; max-height: 600px;
}
.demo-result .soap-label { font-weight: 700; color: var(--blue); display: block; margin-top: 10px; }
.demo-result .soap-label:first-child { margin-top: 0; }
.demo-result .soap-text { color: var(--text); display: block; margin-bottom: 6px; }
.demo-result .bericht-text { color: var(--text); white-space: pre-wrap; }
.demo-placeholder {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%; color: #bbb; text-align: center; gap: 12px;
}
.demo-placeholder p { font-size: 13px; color: #bbb; max-width: 220px; }
.demo-footer { padding: 10px 16px; border-top: 1px solid #eee; }

/* ICD Bar */
.demo-icd-bar {
  padding: 8px 16px; border-top: 1px solid #eee;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.demo-icd-bar::before { content: 'ICD-10:'; font-size: 11px; font-weight: 700; color: var(--gray); margin-right: 4px; }
.demo-icd-badge {
  background: var(--blue-bg); color: var(--blue); font-size: 11px;
  padding: 2px 8px; border-radius: 4px; font-weight: 600; font-family: monospace;
}

/* Textarea wrapper with mic */
.textarea-wrapper { position: relative; }
.textarea-wrapper .demo-textarea,
.textarea-wrapper .bericht-textarea { padding-right: 44px; }
.mic-btn {
  position: absolute; right: 8px; bottom: 8px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gray-light); border: 1px solid #ddd;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-light);
  transition: all var(--transition);
}
.mic-btn:hover { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-light); }
.mic-btn.mic-active {
  background: var(--red); border-color: var(--red); color: white;
  animation: micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(231,76,60,0); }
}

/* Vorschlaege chips */
.vorschlaege-section {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e0e0e0;
}
.vorschlaege-label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--gray); margin-bottom: 8px;
}
.vorschlaege-hint { font-weight: 400; text-transform: none; letter-spacing: 0; }
.vorschlaege-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vorschlag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: 20px; font-size: 12px;
  font-family: inherit; cursor: pointer;
  border: 1px solid #ddd; background: var(--gray-light); color: var(--text-light);
  transition: all var(--transition); line-height: 1.4;
}
.vorschlag-chip:hover { border-color: var(--blue-light); }
.vorschlag-chip.active {
  background: var(--green-bg); color: var(--green); border-color: rgba(44,110,73,0.3);
  font-weight: 600;
}
.vorschlag-chip.active::before { content: '✓ '; font-size: 11px; }
.vorschlag-chip:not(.active)::before { content: '+ '; font-size: 12px; font-weight: 700; }

/* Loading state */
.demo-loading {
  text-align: center; padding: 40px 0;
}
.demo-loading-bar {
  height: 4px; max-width: 200px; margin: 0 auto;
  background: linear-gradient(90deg, var(--blue), var(--green-light));
  border-radius: 2px; animation: progressAnim 1.5s ease-in-out infinite;
}
.demo-loading p { margin-top: 12px; font-size: 13px; color: var(--blue); }

/* Error state */
.demo-error {
  text-align: center; padding: 20px; color: var(--red);
}
.demo-error p { color: var(--red); font-size: 13px; }
.demo-error button {
  margin-top: 8px; background: none; border: 1px solid var(--red);
  color: var(--red); padding: 4px 12px; border-radius: 6px;
  cursor: pointer; font-size: 12px; font-family: inherit;
}

/* Bericht Form */
.bericht-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bericht-field label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-light); margin-bottom: 4px;
}
.bericht-field.bericht-full { grid-column: 1 / -1; }
.bericht-input, .bericht-textarea, .bericht-select {
  width: 100%; border: 1.5px solid #e2e8f0; border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 13px; font-family: inherit;
  transition: all var(--transition); line-height: 1.5; background: #fafbfc;
}
.bericht-input:focus, .bericht-textarea:focus, .bericht-select:focus {
  outline: none; border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); background: white;
}
.bericht-textarea { resize: vertical; }
.bericht-select { background: white; cursor: pointer; }
.bericht-extras { margin-top: 10px; }
.vorlagen-chip {
  display: inline-block; background: rgba(231,76,60,0.08); color: var(--gray);
  padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600;
  border: 1px dashed #ccc;
}

/* === CALLOUT SECTION === */
.callout-section { padding: 80px 0; background: white; }
.callout-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 900px; margin: 0 auto;
}
.callout-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 22px; border-radius: var(--radius); border: 1px solid #e2e8f0;
  transition: all var(--transition); background: white;
}
.callout-item:hover { border-color: rgba(0,180,216,0.25); box-shadow: 0 4px 16px rgba(0,180,216,0.08); transform: translateY(-2px); }
.callout-icon { font-size: 24px; flex-shrink: 0; }
.callout-item strong { display: block; font-size: 14px; color: var(--dark); margin-bottom: 4px; }
.callout-item p { font-size: 13px; margin: 0; color: var(--text-light); }

/* === DEMO PRIVACY NOTE === */
.demo-privacy-note {
  display: inline-block;
  background: var(--green-bg); border: 1px solid rgba(44,110,73,0.15);
  border-radius: var(--radius-sm); padding: 10px 16px;
  font-size: 13px; color: var(--green); line-height: 1.6;
  max-width: 600px; margin: 12px auto 0; text-align: left;
}

/* === PWA INSTALL BANNER === */
.pwa-install-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: var(--dark); color: white;
  padding: 14px 20px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  animation: slideUp 0.4s ease;
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.pwa-install-content {
  display: flex; align-items: center; gap: 14px; max-width: 700px; width: 100%;
}
.pwa-install-icon { font-size: 28px; flex-shrink: 0; }
.pwa-install-text { flex: 1; }
.pwa-install-text strong { display: block; font-size: 14px; margin-bottom: 2px; }
.pwa-install-text span { font-size: 12px; opacity: 0.85; }
.pwa-install-close {
  background: none; border: none; color: white; font-size: 22px; cursor: pointer;
  opacity: 0.6; padding: 4px 8px; line-height: 1;
}
.pwa-install-close:hover { opacity: 1; }
.btn-sm { padding: 8px 18px; font-size: 13px; white-space: nowrap; }

/* === COMPACT FEATURES (Homepage) === */
.compact-features { padding: 60px 0; background: white; }
.compact-features-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
}
.compact-feature { text-align: center; padding: 24px 16px; }
.compact-feature-icon { font-size: 36px; margin-bottom: 12px; }
.compact-feature h3 { font-size: 1rem; margin-bottom: 8px; color: var(--dark); }
.compact-feature p { font-size: 13px; color: var(--text-light); line-height: 1.6; }

.integration-note {
  text-align: center;
  margin-top: 28px;
  font-size: 13px;
  color: var(--text-light);
  font-weight: 500;
  padding: 10px 20px;
  background: var(--blue-bg);
  border-radius: var(--radius-sm);
  display: inline-block;
  width: 100%;
}

/* === HOW COMPACT (Homepage) === */
.how-compact { padding: 60px 0; background: var(--gray-light); }
.how-compact-grid {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px;
  align-items: flex-start; max-width: 860px; margin: 0 auto;
}
.how-compact-step { text-align: center; padding: 20px 12px; }
.how-compact-num {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--zima-dark), var(--zima)); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; margin: 0 auto 14px;
  box-shadow: 0 3px 10px rgba(0,180,216,0.2);
}
.how-compact-step h3 { font-size: 1rem; margin-bottom: 6px; }
.how-compact-step p { font-size: 13px; color: var(--text-light); line-height: 1.6; }
.how-compact-arrow {
  font-size: 24px; color: var(--zima); font-weight: 800;
  display: flex; align-items: center; padding-top: 26px;
}

/* === TRUST SECTION (Homepage) === */
.trust-section { padding: 70px 0; background: white; }
.trust-grid {
  display: grid; grid-template-columns: 0.4fr 1fr; gap: 50px; align-items: center;
}
.trust-visual { display: flex; justify-content: center; }
.trust-subtitle { font-size: 1.05rem; margin: 14px 0 28px; color: var(--text-light); }
.trust-points { display: grid; gap: 16px; }
.trust-point {
  display: flex; gap: 12px; align-items: flex-start;
}
.trust-check { font-size: 18px; flex-shrink: 0; line-height: 1.4; }
.trust-point strong { display: block; font-size: 14px; color: var(--dark); margin-bottom: 2px; }
.trust-point span { font-size: 13px; color: var(--text-light); }

/* === PAGE HEADER (sub-pages) === */
.page-header { padding: 100px 0 40px; background: var(--gray-light); }
.page-header h1 { font-size: 2rem; margin-bottom: 8px; }
.page-subtitle { color: var(--text-light); font-size: 1.05rem; max-width: 600px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 14px; color: var(--blue-light); }

/* === LANDING DEMO === */
.demo-section { padding: 80px 0; background: var(--gray-light); }
.demo-box {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0;
  max-width: 960px; margin: 0 auto;
  background: white; border-radius: 18px; box-shadow: var(--shadow-xl);
  overflow: hidden; border: 1px solid #e2e8f0;
}
.demo-input-side, .demo-output-side { padding: 28px; }
.demo-input-side { background: #fafbfc; }
.demo-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--gray); margin-bottom: 14px;
}
.demo-label-icon { font-size: 16px; }
.demo-input-area {
  background: white; border: 1px solid #dde; border-radius: var(--radius-sm);
  padding: 16px; font-size: 14px; line-height: 1.7; color: var(--text);
  min-height: 160px;
}
.demo-grund-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 1px solid #f0f0f0;
}
.demo-grund-label { font-size: 11px; font-weight: 700; color: var(--blue); text-transform: uppercase; }
.demo-grund-value { font-size: 13px; font-weight: 600; color: var(--dark); }
.demo-text { font-size: 14px; color: var(--text); line-height: 1.7; font-style: italic; }
.demo-btn {
  margin-top: 16px; width: 100%;
}
.demo-hint { font-size: 11px; color: var(--gray); margin-top: 10px; text-align: center; }
.demo-arrow-col {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 12px; position: relative;
}
.demo-arrow-line {
  width: 2px; height: 60px; background: linear-gradient(180deg, var(--blue-bg), var(--blue), var(--blue-bg));
  border-radius: 2px; position: relative;
}
.demo-arrow-line::after {
  content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--blue);
}
.demo-arrow-label {
  background: var(--blue); color: white; font-size: 10px; font-weight: 800;
  padding: 4px 10px; border-radius: 10px; margin-top: 12px; letter-spacing: 1px;
}
.demo-output-area {
  background: white; border: 1px solid #dde; border-radius: var(--radius-sm);
  padding: 16px; min-height: 160px;
}
.demo-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 140px; color: var(--gray); text-align: center;
}
.demo-placeholder p { font-size: 13px; margin-top: 8px; }
.demo-soap-field { margin-bottom: 12px; opacity: 0; transform: translateY(8px); transition: all 0.4s ease; }
.demo-soap-field.visible { opacity: 1; transform: translateY(0); }
.demo-soap-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--blue); margin-bottom: 3px;
}
.demo-soap-text { font-size: 13px; line-height: 1.7; color: var(--text); }
.demo-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 140px; gap: 12px;
}
.demo-spinner {
  width: 32px; height: 32px; border: 3px solid var(--zima-subtle);
  border-top-color: var(--zima); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.demo-loading-text { font-size: 12px; color: var(--gray); font-weight: 600; }
.demo-cta {
  text-align: center; margin-top: 28px;
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
}
.demo-cta-note { font-size: 12px; color: var(--gray); }

/* === STORY + TESTIMONIAL === */
.story-section { padding: 80px 0; }
.story-grid {
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center;
}
.story-badge {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--blue);
  background: var(--blue-bg); padding: 6px 14px; border-radius: 20px; margin-bottom: 16px;
}
.story-content h2 { margin-bottom: 16px; }
.story-content p { font-size: 15px; line-height: 1.85; color: var(--text-light); margin-bottom: 12px; }
.story-quote-card {
  background: var(--gray-light); border-radius: var(--radius); padding: 32px;
  border-left: 4px solid var(--zima); position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.quote-icon { font-size: 36px; color: var(--blue-bg); margin-bottom: 8px; line-height: 1; }
.story-quote-card blockquote {
  font-size: 16px; font-weight: 500; line-height: 1.8;
  color: var(--dark); font-style: italic; margin: 0 0 20px;
}
.quote-author {
  display: flex; align-items: center; gap: 12px;
}
.quote-avatar { font-size: 32px; }
.quote-author strong { display: block; font-size: 14px; color: var(--dark); }
.quote-author span { font-size: 12px; color: var(--gray); }

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .demo-box { grid-template-columns: 1fr; }
  .demo-arrow-col { flex-direction: row; padding: 8px 0; }
  .demo-arrow-line { width: 60px; height: 2px; background: linear-gradient(90deg, var(--blue-bg), var(--blue), var(--blue-bg)); }
  .demo-arrow-line::after { bottom: auto; left: auto; right: -6px; top: 50%; transform: translateY(-50%); border-left: 8px solid var(--blue); border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: none; }
  .demo-arrow-label { margin-top: 0; margin-left: 12px; }
  .time-comparison { grid-template-columns: 1fr; }
  .time-arrow-container { transform: rotate(90deg); }
  .demo-container { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: 1fr; gap: 30px; }
  .security-grid { grid-template-columns: 1fr; }
  .story-grid { grid-template-columns: 1fr; gap: 32px; }
  .security-visual { order: -1; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr !important; max-width: 400px !important; }
  .pricing-grid .price-card { transform: none !important; }
  .install-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .callout-grid { grid-template-columns: repeat(2, 1fr); }
  .compact-features-grid { grid-template-columns: repeat(3, 1fr); }
  .how-compact-grid { grid-template-columns: 1fr; gap: 12px; }
  .how-compact-arrow { display: none; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-visual { order: -1; }
}

@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .nav-container { padding: 0 16px; }
  .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: white; flex-direction: column; padding: 20px; gap: 16px; box-shadow: var(--shadow-lg); }
  .nav-links.open { display: flex; }
  .nav-hamburger { display: flex; }

  /* Hero mobile */
  .hero { padding: 80px 0 24px; }
  .hero-subtitle { font-size: 0.92rem; margin: 12px auto 16px; }
  /* Demo: show responsive iframe on mobile too */
  .demo-showcase { padding: 0 0 32px; }
  .demo-showcase-sticky { position: static; }
  .demo-iframe-wrap { display: none !important; }
  .demo-fullscreen-link { display: none !important; }
  .demo-mobile-preview {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(135deg,#0c1829 0%,#0e3552 50%,var(--zima-dark) 100%);
    border-radius: 18px;
    padding: 32px 24px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  }
  .hero-metrics { gap: 16px; margin-bottom: 20px; }
  .metric-number { font-size: 1.4rem; }
  .metric-label { font-size: 11px; }
  .compliance-badges { gap: 5px; margin-bottom: 16px; }
  .hero-cta { flex-direction: column; gap: 8px; margin-bottom: 16px; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-cta p { font-size: 12px !important; margin-top: 4px !important; }
  .hero-trust { flex-direction: column; gap: 6px; }
  .hero-badge { font-size: 11px; padding: 5px 10px; margin-bottom: 14px; }

  /* Mockup compact on mobile */
  .hero-mockup { margin: 0 -4px; }
  .mockup-content { min-height: auto; padding: 12px; overflow: hidden; }
  .mockup-browser { padding: 6px 10px; border-radius: 8px 8px 0 0; }
  .mockup-content { border-radius: 0 0 8px 8px; }
  .mockup-dots span { width: 7px; height: 7px; }
  .mockup-url { font-size: 9px; padding: 3px 8px; }
  .mockup-io-input, .mockup-io-output { padding: 8px 10px; }
  .mockup-io-text { font-size: 11px; }
  .mockup-label { font-size: 9px; }
  .mockup-text { font-size: 11px; }
  .mockup-sidebar-header { font-size: 12px; }
  .mockup-indicators { margin-top: 10px; }

  /* Integration logos: 2x3 grid */
  .integration-logos { padding: 24px 0; }
  .integration-logos-grid { gap: 16px; }
  .integration-logo-icon { width: 40px; height: 40px; font-size: 20px; }
  .integration-logo-name { font-size: 10px; }

  /* Tighter sections */
  .compact-features { padding: 36px 0; }
  .compact-feature { padding: 18px 14px; }
  .compact-feature-icon { font-size: 28px; margin-bottom: 8px; }

  .features { padding: 40px 0; }
  .features-grid { grid-template-columns: 1fr; gap: 12px; }
  .feature-card { padding: 20px; }
  .feature-icon { width: 44px; height: 44px; margin-bottom: 12px; }
  .section-header { margin-bottom: 24px; }
  .section-header p { font-size: 0.95rem; }

  .how-it-works { padding: 40px 0; }
  .steps-grid { gap: 16px; }

  .stats { padding: 24px 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .stat-number { font-size: 1.5rem; }
  .stat-label { font-size: 12px; }

  .security { padding: 40px 0; }
  .pricing { padding: 40px 0; }

  /* Ambient recording section tighter on mobile */
  #ambient { padding: 36px 0 !important; }
  #ambient h2 { font-size: 1.2rem !important; }
  #ambient > .container > div:first-child { margin-bottom: 24px !important; }
  .install-grid { grid-template-columns: 1fr; }
  .install-steps-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .time-stat { flex-direction: column; gap: 2px; }
  .time-num { text-align: left; min-width: auto; }
  .termin-steps { grid-template-columns: 1fr; }
  .demo-container { grid-template-columns: 1fr; }
  .demo-tabs { gap: 0; }
  .demo-tab { padding: 10px 14px; font-size: 12px; }
  .bericht-form { grid-template-columns: 1fr; }
  .callout-grid { grid-template-columns: 1fr; }
  .compact-features-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .compact-feature-card { padding: 16px 12px; }
  .compact-feature:first-child { grid-column: 1 / -1; }
  .story-trust-section { padding: 36px 0; }
  .story-trust-grid { gap: 20px; }
  .contact-section { padding: 40px 0; }
  .footer { padding: 36px 0 24px; }
  .footer-newsletter { padding: 12px 0; }

  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1rem; }
  .section-label { font-size: 11px; }
  .ausfuehrlich-toggle { display: none; }

  /* Sticky mobile CTA bar */
  .mobile-cta-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    padding: 10px 16px;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.04), 0 -4px 20px rgba(0,0,0,0.06);
    z-index: 999;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .mobile-cta-bar .btn {
    flex: 1;
    justify-content: center;
    padding: 12px 16px;
    font-size: 14px;
  }
  /* Add bottom padding to body so content isn't hidden behind sticky bar */
  body { padding-bottom: 68px; }

  /* Live Demo: stack panels vertically on mobile */
  #demo-animation {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #demo-animation > div:nth-child(2) {
    padding-top: 0 !important;
    transform: rotate(90deg);
  }

  /* === SCROLL SNAP — only key sections === */
  html { scroll-snap-type: y proximity; }

  /* Default: no snap — free-flowing scroll */
  section, .footer {
    scroll-snap-align: none;
  }

  /* Snap only on hero + pricing (key conversion points) */
  .hero, .pricing {
    scroll-snap-align: start;
  }

  /* Short/medium sections: fill viewport, center content */
  .hero {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: 72px 0 24px !important;
    box-sizing: border-box;
  }
  .hero > .container { width: 100%; }

  .demo-showcase {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: 24px 0 !important;
    box-sizing: border-box;
  }
  .demo-showcase > .demo-showcase-inner { width: 100%; }

  /* Compact Features: 2-col grid already set, size to fill screen */
  .compact-features {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: 24px 0 !important;
    box-sizing: border-box;
  }
  .compact-features > .container { width: 100%; }

  /* Ambient workflow: fit in viewport */
  #ambient {
    min-height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    padding: 24px 0 !important;
    box-sizing: border-box;
  }
  #ambient > .container { width: 100%; }
  /* Shrink workflow steps grid for viewport fit */
  #ambient [style*="grid-template-columns"] {
    gap: 12px !important;
  }

  /* Live Demo animation */
  #live-demo {
    min-height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    padding: 24px 0 !important;
    box-sizing: border-box;
  }
  #live-demo > .container { width: 100%; }

  /* Module Demos */
  #module-demos {
    min-height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    padding: 24px 0 !important;
    box-sizing: border-box;
  }
  #module-demos > .container { width: 100%; }

  /* Integration logos: short strip, center it */
  .integration-logos {
    min-height: 60dvh;
    display: flex;
    align-items: center;
  }

  /* Datenschutz */
  #datenschutz {
    min-height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    padding: 24px 0 !important;
    box-sizing: border-box;
  }
  #datenschutz > .container { width: 100%; }
  /* Tighter cards for viewport fit */
  #datenschutz [style*="grid-template-columns"] {
    gap: 10px !important;
  }
  #datenschutz [style*="grid-template-columns"] > div {
    padding: 14px !important;
  }

  /* Story + Trust */
  .story-trust-section {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: 24px 0 !important;
    box-sizing: border-box;
  }
  .story-trust-section > .container { width: 100%; }

  /* Pricing */
  .pricing {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: 24px 0 !important;
    box-sizing: border-box;
  }
  .pricing > .container { width: 100%; }

  /* Contact */
  .contact-section {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: 24px 0 !important;
    box-sizing: border-box;
  }
  .contact-section > .container { width: 100%; }

  /* Footer: smaller, just snap start */
  .footer {
    min-height: auto;
  }
}

/* Hide mobile CTA bar on desktop */
@media (min-width: 601px) {
  .mobile-cta-bar { display: none !important; }
}

/* === Guided Tour === */
.tour-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.55);
  transition: opacity 0.3s ease;
}
.tour-spotlight {
  position: absolute; z-index: 10001;
  border: 3px solid var(--blue-light);
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
  transition: all 0.4s ease;
  pointer-events: none;
}
.tour-tooltip {
  position: absolute; z-index: 10002;
  background: white; border-radius: 14px;
  padding: 22px 24px; max-width: 360px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  animation: fadeIn 0.3s ease;
}
.tour-tooltip-step {
  font-size: 11px; font-weight: 700; color: var(--blue-light);
  letter-spacing: 1px; margin-bottom: 8px;
}
.tour-tooltip-text {
  font-size: 14px; color: var(--text); line-height: 1.6; margin-bottom: 16px;
}
.tour-tooltip-actions {
  display: flex; justify-content: space-between; align-items: center;
}
.tour-tooltip-actions .tour-skip {
  background: none; border: none; color: var(--gray); font-size: 13px;
  cursor: pointer; padding: 6px 12px;
}
.tour-tooltip-actions .tour-skip:hover { color: var(--text); }
.tour-tooltip-actions .tour-next {
  background: var(--blue); color: white; border: none; border-radius: 6px;
  padding: 8px 20px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: var(--transition);
}
.tour-tooltip-actions .tour-next:hover { background: var(--blue-light); }
.tour-progress {
  display: flex; gap: 5px; margin-top: 12px;
}
.tour-progress .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ddd; transition: background 0.3s;
}
.tour-progress .dot.active { background: var(--blue); }

/* === Ausführlich Toggle Switch === */
.ausfuehrlich-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-left: auto;
  margin-right: 8px;
  user-select: none;
  font-size: 0;
}
.ausfuehrlich-toggle input { display: none; }
.ausfuehrlich-slider {
  width: 32px;
  height: 18px;
  background: #ccc;
  border-radius: 9px;
  position: relative;
  transition: background 0.25s;
  flex-shrink: 0;
}
.ausfuehrlich-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  transition: transform 0.25s;
}
.ausfuehrlich-toggle input:checked + .ausfuehrlich-slider {
  background: var(--blue);
}
.ausfuehrlich-toggle input:checked + .ausfuehrlich-slider::after {
  transform: translateX(14px);
}
.ausfuehrlich-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.ausfuehrlich-toggle input:checked ~ .ausfuehrlich-label {
  color: var(--blue);
}

/* === Bericht Mode Tabs === */
.bericht-mode-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--gray-light);
}
.bericht-mode-tab {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.bericht-mode-tab:hover { color: var(--text); }
.bericht-mode-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}
.bericht-mode-content { display: none; }
.bericht-mode-content.active { display: block; }

/* === Story + Trust Merged Section === */
.story-trust-section {
  padding: 60px 0;
  background: var(--gray-light);
}
.story-trust-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: start;
}
.story-trust-left .story-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--zima-dark);
  margin-bottom: 12px;
}
.story-trust-left h2 {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  margin-bottom: 12px;
}
.story-trust-left p {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 16px;
}
.inline-quote {
  font-size: 13px;
  font-style: italic;
  color: var(--text-light);
  border-left: 3px solid var(--zima);
  padding: 8px 0 8px 16px;
  margin: 0;
}
.inline-quote cite {
  display: block;
  font-size: 11px;
  font-style: normal;
  color: var(--gray);
  margin-top: 4px;
}
.trust-badge-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  padding: 6px 12px;
  background: white;
  border-radius: 20px;
  border: 1px solid #e0e0e0;
  margin-bottom: 16px;
}
.trust-points-compact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trust-point-compact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.trust-point-compact svg { flex-shrink: 0; margin-top: 2px; }
.trust-point-compact strong { display: block; font-size: 13px; margin-bottom: 1px; }
.trust-point-compact span { font-size: 12px; color: var(--gray); }

.footer-newsletter {
  text-align: center;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  .story-trust-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* === CONNECTOR DEMO (extension.html) === */
.connector-modes {
  margin-bottom: 32px;
}
.connector-modes h2 {
  font-size: 1.1rem; margin-bottom: 6px;
}
.connector-modes > p {
  font-size: 13px; color: var(--text-light); margin-bottom: 16px; line-height: 1.6;
}
.mode-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.mode-card {
  border: 2px solid #e8ecf1; border-radius: var(--radius); padding: 18px 20px;
  transition: all var(--transition); cursor: default;
}
.mode-card.active {
  border-color: var(--blue); background: rgba(26,82,118,0.03);
}
.mode-card-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.mode-card-icon { font-size: 20px; }
.mode-card-title { font-size: 14px; font-weight: 700; color: var(--dark); }
.mode-card-badge {
  font-size: 9px; font-weight: 700; background: var(--green-bg); color: var(--green);
  padding: 2px 7px; border-radius: 8px; margin-left: auto;
}
.mode-card p {
  font-size: 12px; color: var(--text-light); line-height: 1.6; margin: 0;
}
.mode-auto-note {
  display: flex; align-items: center; gap: 8px;
  background: var(--blue-bg); border-radius: var(--radius-sm); padding: 10px 14px;
  margin-top: 14px; font-size: 12px; color: var(--blue); line-height: 1.5;
}
.mode-auto-note strong { color: var(--dark); }

/* Connector Demo Section */
.connector-demo {
  background: var(--gray-light); border-radius: var(--radius); padding: 24px 28px;
  margin-bottom: 24px;
}
.connector-demo h2 { font-size: 1.1rem; margin-bottom: 4px; }
.connector-demo .demo-subtitle {
  font-size: 13px; color: var(--text-light); margin-bottom: 16px; line-height: 1.5;
}

/* Mini Browser Mockup */
.mini-mockup {
  background: #f8f9fa; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid #e0e0e0;
}
.mini-mockup-header {
  background: var(--dark); padding: 8px 14px;
  display: flex; align-items: center; gap: 8px;
}
.mini-mockup-dots { display: flex; gap: 5px; }
.mini-mockup-dots span {
  width: 8px; height: 8px; border-radius: 50%;
}
.mini-mockup-dots span:nth-child(1) { background: #e74c3c; }
.mini-mockup-dots span:nth-child(2) { background: #f39c12; }
.mini-mockup-dots span:nth-child(3) { background: #27ae60; }
.mini-mockup-url {
  flex: 1; background: rgba(255,255,255,0.1); border-radius: 4px;
  padding: 3px 8px; color: #aaa; font-size: 10px; font-family: monospace;
}
.mini-mockup-mode {
  font-size: 9px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.15);
  padding: 2px 8px; border-radius: 6px;
}
.mini-mockup-body { padding: 16px; }

/* Mockup I/O (Input → Output) */
.mini-io { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: start; }
.mini-io-input {
  background: white; border: 1px solid #e0e0e0; border-radius: var(--radius-sm); padding: 10px 12px;
}
.mini-io-output {
  background: rgba(26,82,118,0.03); border: 1px solid rgba(26,82,118,0.12);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.mini-io-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--gray); margin-bottom: 6px; display: flex; align-items: center; gap: 4px;
}
.mini-io-label span { font-size: 12px; }
.mini-io-text {
  font-size: 11px; color: var(--text); line-height: 1.5;
  font-family: 'Courier New', monospace; font-style: italic;
}
.mini-io-arrow {
  display: flex; align-items: center; justify-content: center;
  padding: 0 10px; font-size: 18px; color: var(--blue);
  filter: drop-shadow(0 1px 2px rgba(26,82,118,0.3));
}
.mini-soap-field { margin-bottom: 6px; }
.mini-soap-label {
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--blue); margin-bottom: 1px;
}
.mini-soap-text { font-size: 11px; color: var(--text); line-height: 1.4; }

/* Termin Slot Cards */
.mini-slots { display: flex; flex-direction: column; gap: 5px; }
.mini-slot {
  background: white; border-left: 3px solid var(--blue); border-radius: 6px;
  padding: 6px 10px; border: 1px solid #e8ecf1; border-left: 3px solid var(--blue);
}
.mini-slot-time { font-weight: 700; font-size: 11px; color: var(--blue); }
.mini-slot-info { font-size: 9px; color: var(--text-light); }

/* Feature Chips */
.connector-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px;
}
.connector-chip {
  background: var(--blue-bg); color: var(--blue); font-size: 11px;
  padding: 4px 10px; border-radius: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 3px;
}
.connector-chip-new {
  background: #eafaf1; color: var(--green);
}

/* Verbund Beispiel */
.verbund-example {
  background: white; border-radius: var(--radius-sm); padding: 12px 16px;
  margin-top: 14px; border: 1px solid #e8ecf1; font-size: 12px; line-height: 1.7;
}
.verbund-example strong { color: var(--dark); }
.verbund-steps {
  display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap;
}
.verbund-step {
  background: var(--gray-light); border-radius: 6px; padding: 4px 10px;
  font-size: 11px; color: var(--text); font-weight: 600;
}
.verbund-step.mpa { border-left: 3px solid #f39c12; }
.verbund-step.arzt { border-left: 3px solid var(--blue); }
.verbund-arrow { color: var(--gray); font-size: 14px; }

/* Responsive */
@media (max-width: 900px) {
  .mode-grid { grid-template-columns: 1fr; }
  .mini-io { grid-template-columns: 1fr; }
  .mini-io-arrow { transform: rotate(90deg); padding: 6px 0; }
}

/* =========================================
   DEMO DASHBOARD FRAME (landing page)
   ========================================= */

.demo-dash {
  max-width:920px;
  margin:0 auto;
  border:1px solid #e2e8f0;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-xl);
  background:#fff;
}

.demo-dash-topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 16px;
  background:#f8fafc;
  border-bottom:1px solid #e2e8f0;
}

.demo-dash-url {
  font-size:12px;
  color:#64748b;
  font-family:monospace;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:6px;
  padding:3px 10px;
}

.demo-dash-body {
  display:flex;
  min-height:300px;
}

.demo-dash-sidebar {
  width:64px;
  background:var(--sidebar-bg);
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  padding:12px 0;
  gap:2px;
}

.demo-dash-sidebar-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:8px 4px;
  color:rgba(255,255,255,0.5);
  font-size:9px;
  font-weight:500;
  cursor:default;
  border-left:3px solid transparent;
  transition:all 0.2s;
}

.demo-dash-sidebar-item.active {
  color:#fff;
  border-left-color:var(--blue-light);
  background:rgba(59,130,246,0.12);
}

.demo-dash-sidebar-item svg {
  width:18px;
  height:18px;
}

.demo-dash-content {
  flex:1;
  padding:16px;
  background:#f5f6f8;
  overflow:hidden;
}

.demo-dash-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  background:#f8fafc;
  border-top:1px solid #e2e8f0;
}

@media (max-width:768px) {
  .demo-dash-sidebar { display:none; }
  .demo-dash-content { padding:12px; }
  #demo-animation { grid-template-columns:1fr !important; gap:8px !important; }
  #demo-animation > div:nth-child(2) { display:none !important; }
  .video-demos [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
}

/* =========================================
   DASHBOARD LAYOUT (tool.html)
   ========================================= */

.dash-body { overflow: hidden; }
.dash-body .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; }
.dash-body .footer { display: none; }

.dash-app {
  display: flex;
  height: 100vh;
  padding-top: 56px;
}

/* --- Sidebar --- */
.dash-sidebar {
  width: 200px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 100;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.dash-sidebar-logo {
  padding: 16px 16px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dash-sidebar-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.dash-nav {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}
.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: #a1a1aa;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  font-family: inherit;
  border-left: 2px solid transparent;
}
.dash-nav-item:hover {
  color: #e4e4e7;
  background: var(--sidebar-hover);
}
.dash-nav-item.active {
  color: var(--sidebar-active);
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  border-left-color: var(--sidebar-accent);
}
.dash-nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}
.dash-nav-item.active svg { opacity: 1; }

.dash-sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.dash-privacy-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}
.dash-privacy-badge svg {
  width: 14px;
  height: 14px;
  opacity: 0.5;
}

/* AI Quick Actions Bar */
.ai-quick-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0; }
.ai-quick-actions button {
  background: var(--bg-subtle, #f8fafc); border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-full, 9999px); font-size: 12px; padding: 5px 14px;
  cursor: pointer; transition: all 0.15s var(--ease);
  font-family: inherit; color: var(--text-secondary, #64748b); white-space: nowrap;
}
.ai-quick-actions button:hover { background: var(--accent-subtle, rgba(37,99,235,0.08)); border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }

/* --- Main Content --- */
.dash-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f8fafc;
  min-width: 0;
}

/* --- Top Bar --- */
.dash-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  background: white;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}
.dash-topbar-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0;
}
.dash-topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-direction: column;
  gap: 4px;
}
.dash-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--dark);
  border-radius: 1px;
}

/* --- Toggle Switch --- */
.dash-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.dash-toggle input { display: none; }
.dash-toggle-slider {
  width: 34px;
  height: 18px;
  background: #ccc;
  border-radius: 9px;
  position: relative;
  transition: background 0.25s;
  flex-shrink: 0;
}
.dash-toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  transition: transform 0.25s;
}
.dash-toggle input:checked + .dash-toggle-slider {
  background: var(--blue);
}
.dash-toggle input:checked + .dash-toggle-slider::after {
  transform: translateX(16px);
}
.dash-toggle-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray);
}
.dash-toggle input:checked ~ .dash-toggle-label {
  color: var(--blue);
}

/* --- Section Container --- */
.dash-section {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.dash-section.active {
  display: flex;
  flex-direction: column;
}

/* --- Split Layout (input | output) --- */
.dash-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

/* --- Panel --- */
.dash-panel {
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  box-shadow: var(--shadow-xs);
}
.dash-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Textarea --- */
.dash-textarea-wrap {
  position: relative;
}
.dash-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  line-height: 1.6;
  box-sizing: border-box;
  transition: all var(--transition);
  background: #fafbfc;
}
.dash-textarea:focus {
  outline: none;
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
  background: white;
}
.dash-textarea::placeholder {
  color: #bbb;
  font-size: 12px;
}

/* --- Mic Button --- */
.dash-mic-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gray-light);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  transition: all 0.15s;
}
.dash-mic-btn:hover {
  background: var(--blue-bg);
  color: var(--blue);
}
.dash-mic-btn.mic-active {
  background: #e74c3c;
  color: white;
  animation: dashMicPulse 1.5s infinite;
}
@keyframes dashMicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(231,76,60,0); }
}

/* --- Input, Select --- */
.dash-input, .dash-select {
  width: 100%;
  padding: 9px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
  transition: all var(--transition);
  background: #fafbfc;
}
.dash-input:focus, .dash-select:focus {
  outline: none;
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
  background: white;
}

/* --- Grund Row --- */
.dash-grund-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-grund-row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

/* --- ICD Live Tags --- */
.dash-icd-live {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}
.dash-icd-live .icd-tag {
  background: #e3f2fd;
  color: #0f3460;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  display: inline-flex;
  gap: 3px;
}
.dash-icd-live .icd-tag-code { font-weight: 800; }
.dash-icd-live .icd-tag-label { font-weight: 400; opacity: 0.8; }

/* --- Buttons --- */
.dash-btn-primary {
  width: 100%;
  padding: 12px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  box-shadow: var(--shadow-xs);
}
.dash-btn-primary:hover { background: var(--primary-light); box-shadow: var(--shadow-sm); transform: translateY(-0.5px); }
.dash-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.dash-btn-secondary {
  width: 100%;
  padding: 10px;
  background: transparent;
  color: var(--blue);
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  margin-top: 8px;
}
.dash-btn-secondary:hover {
  background: var(--blue);
  color: white;
}

.dash-soap-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  flex-wrap: wrap;
  align-items: center;
}
.dash-soap-actions-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-right: 4px;
  white-space: nowrap;
}
.dash-soap-actions .dash-btn-secondary {
  width: auto;
  flex: 0 1 auto;
  margin-top: 0;
  padding: 7px 12px;
  font-size: 12px;
  border-radius: 6px;
}

/* === ICD-10 Separate Panel === */
.dash-icd-panel {
  margin-top: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: white;
}
.dash-icd-panel-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: #f8fafc;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  transition: background 0.15s;
}
.dash-icd-panel-toggle:hover { background: #f1f5f9; }
.dash-icd-count {
  background: var(--blue);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}
.dash-icd-arrow {
  margin-left: auto;
  font-size: 10px;
  color: var(--gray);
  transition: transform 0.2s;
}
.dash-icd-panel.open .dash-icd-arrow { transform: rotate(180deg); }
.dash-icd-panel-body {
  display: none;
  padding: 10px 14px 12px;
  border-top: 1px solid #e5e7eb;
}
.dash-icd-panel.open .dash-icd-panel-body { display: block; }
.dash-icd-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-icd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #f8fafc;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 13px;
}
.dash-icd-row:hover { background: #eef2ff; }
.dash-icd-row-code {
  font-weight: 700;
  color: var(--blue);
  min-width: 60px;
  font-size: 12px;
  font-family: monospace;
}
.dash-icd-row-label { flex: 1; color: var(--dark); }
.dash-icd-row-relevance {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.dash-icd-row-relevance.high { background: #dcfce7; color: #166534; }
.dash-icd-row-relevance.medium { background: #fef9c3; color: #854d0e; }
.dash-icd-row-relevance.low { background: #f1f5f9; color: #64748b; }
.dash-icd-row-copied {
  font-size: 10px;
  color: #16a34a;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s;
}
.dash-icd-row-copied.show { opacity: 1; }
.dash-icd-copy-all {
  display: block;
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 11px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  color: var(--dark);
  transition: background 0.15s;
}
.dash-icd-copy-all:hover { background: #e2e8f0; }

/* === Tandem-style Consultation Tabs === */
.dash-consult-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 0;
}
.dash-consult-tab {
  flex: 1;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  transition: all 0.15s;
  white-space: nowrap;
}
.dash-consult-tab:hover { color: var(--dark); background: #f8fafc; }
.dash-consult-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  background: white;
}
.dash-consult-view { display: none; }
.dash-consult-view.active { display: block; }

/* === Inline Document Generation (inside SOAP panel) === */
.dash-inline-doc {
  padding: 14px;
}
.dash-inline-doc-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.dash-inline-doc-tab {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #f8fafc;
  cursor: pointer;
  color: var(--dark);
  transition: all 0.15s;
}
.dash-inline-doc-tab:hover { background: #eef2ff; border-color: #c7d2fe; }
.dash-inline-doc-tab.active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.dash-inline-doc-info {
  padding: 8px 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  font-size: 12px;
  color: #166534;
  margin-bottom: 12px;
}
.dash-inline-doc-options {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  align-items: flex-end;
}
.dash-inline-doc-result {
  margin-top: 12px;
  animation: fadeInUp 0.3s ease;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Inline Ambient Recording on SOAP Page === */
.dash-soap-ambient {
  margin: 10px 0;
}
.dash-soap-ambient-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: linear-gradient(135deg, #f0f7ff, #e8f4fd);
  border: 1px dashed #93c5fd;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--blue);
  font-weight: 500;
  transition: all 0.15s;
}
.dash-soap-ambient-btn:hover {
  background: linear-gradient(135deg, #e0efff, #d6ebfc);
  border-style: solid;
}
.dash-soap-ambient-btn svg { flex-shrink: 0; }
.dash-soap-ambient-active {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
}
.dash-soap-ambient-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  animation: ambientPulse 1s ease-in-out infinite;
}
@keyframes ambientPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.dash-soap-ambient-timer {
  font-family: monospace;
  font-size: 14px;
  font-weight: 600;
  color: #991b1b;
}
.dash-soap-ambient-stop {
  margin-left: auto;
  padding: 6px 14px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.dash-soap-ambient-stop:hover { background: #dc2626; }
.dash-soap-ambient-transcript {
  margin-top: 8px;
}
.dash-soap-ambient-transcript .dash-textarea {
  font-size: 12px;
  background: #fafbfc;
  color: var(--text-light);
}

/* === PIS Transfer Badge === */
.dash-history-transfer-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  white-space: nowrap;
}
.dash-history-transfer-badge.transferred {
  background: #dcfce7;
  color: #166534;
}
.dash-history-transfer-badge.not-transferred {
  background: #fef3c7;
  color: #92400e;
}

/* Dokumentationsstil Profile Section */
.dash-profile-style-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}
.dash-profile-style-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #222;
}
.dash-profile-style-desc {
  font-size: 12.5px;
  color: #888;
  margin: 0 0 16px;
  line-height: 1.5;
}
.dash-style-select {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 12.5px;
  background: white;
  color: #333;
  min-width: 180px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.dash-style-select:focus {
  border-color: #1a73e8;
  outline: none;
}
.dash-profile-style-actions {
  margin-top: 14px;
}

/* Style Learning Badge */
.style-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 500;
  background: #f0f0f0;
  color: #888;
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease;
}
.style-badge.active {
  background: linear-gradient(135deg, #e8f4fd 0%, #d4ecfa 100%);
  color: #1a73e8;
  border-color: #b8d8f8;
}
.style-badge-icon {
  font-size: 13px;
}

.dash-btn-sm {
  padding: 6px 12px;
  background: var(--gray-light);
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.dash-btn-sm:hover { border-color: var(--blue); color: var(--blue); }

.dash-paste-btn {
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  transition: all 0.15s;
}
.dash-paste-btn:hover { border-color: var(--blue); color: var(--blue); }

.dash-copy-btn {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: white;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  font-family: inherit;
  transition: all 0.15s var(--ease);
}
.dash-copy-btn:hover { background: var(--bg-muted); }
.dash-copy-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.dash-copy-btn.copied { background: var(--success); border-color: var(--success); color: white; }

/* --- Output Header --- */
.dash-output-header {
  background: var(--bg-subtle);
  color: var(--text);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius) var(--radius) 0 0;
  margin: -20px -20px 12px;
  border-bottom: 1px solid var(--border);
}
.dash-output-badge {
  background: var(--blue-bg);
  color: var(--blue);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
}

/* --- Result Area --- */
.dash-result {
  flex: 1;
  min-height: 150px;
  padding: 4px 0;
}
.dash-result .soap-label {
  font-weight: 700;
  color: var(--blue);
  display: block;
  margin-top: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dash-result .soap-label:first-child { margin-top: 0; }
.dash-result .soap-text {
  color: var(--text);
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.6;
}
.dash-result .soap-edit {
  width: 100%;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.6;
  font-family: inherit;
  color: var(--text);
  resize: vertical;
  box-sizing: border-box;
  margin-bottom: 6px;
  transition: border-color 0.2s;
}
.dash-result .soap-edit:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.1);
}
/* Feedback bar */
.feedback-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--gray-light);
  border-radius: 8px;
  border: 1px solid #e8ecf0;
  flex-wrap: wrap;
}
.feedback-question {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}
.feedback-btn {
  width: 36px;
  height: 36px;
  border: 1.5px solid #ddd;
  border-radius: 50%;
  background: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.feedback-btn:hover { border-color: var(--blue); transform: scale(1.1); }
.feedback-btn.selected { border-color: var(--blue); background: rgba(26, 82, 118, 0.08); transform: scale(1.15); }
.feedback-btn.feedback-down.selected { border-color: #e74c3c; background: rgba(231, 76, 60, 0.08); }
.feedback-comment-area {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-top: 4px;
}
.feedback-comment {
  flex: 1;
  padding: 8px 10px;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  resize: none;
  line-height: 1.5;
}
.feedback-comment:focus { border-color: var(--blue); outline: none; }
.feedback-send {
  padding: 8px 16px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.feedback-send:hover { opacity: 0.9; }
.feedback-thanks {
  font-size: 13px;
  color: #27ae60;
  font-weight: 600;
}

.dash-korrigieren-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s var(--ease);
  margin-left: auto;
}
.dash-korrigieren-btn:hover { background: var(--bg-muted); }
.dash-korrigieren-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.dash-learn-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #27ae60;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(39, 174, 96, 0.1);
}
.dash-result .bericht-text {
  color: var(--text);
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.7;
}

.dash-placeholder {
  text-align: center;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dash-placeholder svg { opacity: 0.25; }
.dash-placeholder p {
  font-size: 12px;
  color: #bbb;
  max-width: 220px;
  margin: 0;
}

/* --- Quick-Start Examples Banner --- */
.dash-quickstart {
  background: #f0f7ff;
  border: 1px solid #d0e3f5;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-quickstart-title {
  font-size: 12px;
  color: #5a7a9a;
  font-weight: 600;
  white-space: nowrap;
}
.dash-quickstart-examples { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-quickstart-btn {
  background: #fff;
  border: 1px solid #c0d8f0;
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 11px;
  color: #1a5276;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.dash-quickstart-btn:hover { background: #e8f4fd; border-color: #1a5276; }
.dash-quickstart-close {
  position: absolute;
  top: 4px;
  right: 8px;
  background: none;
  border: none;
  font-size: 16px;
  color: #999;
  cursor: pointer;
  padding: 2px 6px;
}
.dash-quickstart-close:hover { color: #333; }

/* --- Copy Toast --- */
.bd-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1a5276;
  color: #fff;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.bd-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- Generation Timer --- */
.dash-gen-timer {
  text-align: center;
  padding: 16px;
  font-size: 13px;
  color: #888;
  animation: pulse-text 1.5s ease-in-out infinite;
}
.dash-gen-timer.slow { color: #e67e22; }
@keyframes pulse-text { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* --- ICD Bar --- */
.dash-icd-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
}
.dash-icd-bar .icd-badge {
  background: #e3f2fd;
  color: #0f3460;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

/* --- Footer Note --- */
.dash-footer-note {
  padding-top: 8px;
  border-top: 1px solid #eee;
}
.dash-footer-note span {
  font-size: 11px;
  color: var(--gray);
}

/* --- OCR Preview --- */
.dash-ocr-preview {
  padding: 10px;
  background: #f0fdf4;
  border-radius: 8px;
  border: 1px solid #bbf7d0;
  position: relative;
}
.dash-ocr-preview img {
  max-height: 80px;
  max-width: 100%;
  border-radius: 4px;
}
.dash-ocr-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}
.dash-ocr-label {
  font-size: 10px;
  color: var(--green);
  font-weight: 600;
  margin-top: 4px;
  display: block;
}

/* --- Mode Tabs (Bericht) --- */
.dash-mode-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #eee;
}
.dash-mode-tab {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.dash-mode-tab:hover { color: var(--text); }
.dash-mode-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.dash-mode-content { display: none; }
.dash-mode-content.active { display: block; }

/* --- Form Grid --- */
.dash-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.dash-field { display: flex; flex-direction: column; gap: 4px; }
.dash-field label { font-size: 12px; font-weight: 600; color: var(--text); }
.dash-full { grid-column: 1 / -1; }

/* --- Vorschlaege Chips --- */
.vorschlaege-section { margin-top: 12px; border-top: 1px solid #eee; padding-top: 10px; }
.vorschlaege-label { font-size: 12px; font-weight: 600; color: var(--text); display: block; margin-bottom: 6px; }
.vorschlaege-hint { font-weight: 400; color: var(--gray); }
.vorschlaege-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vorschlag-chip {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #ddd;
  background: white;
  color: var(--text);
  transition: all 0.15s;
}
.vorschlag-chip.active {
  background: var(--blue-bg);
  border-color: var(--blue);
  color: var(--blue);
}
.vorschlag-chip:hover { border-color: var(--blue); }

/* =========================================
   AMBIENT RECORDING
   ========================================= */
.dash-ambient-phase { flex: 1; display: flex; flex-direction: column; }

.dash-ambient-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  flex: 1;
}

.dash-record-btn {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: 4px solid white;
  box-shadow: 0 4px 20px rgba(239,68,68,0.25), 0 0 0 8px rgba(239,68,68,0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.2s;
}
.dash-record-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 30px rgba(239,68,68,0.35), 0 0 0 12px rgba(239,68,68,0.08);
}
.dash-record-btn.recording {
  animation: dashRecPulse 1.5s ease-in-out infinite;
  background: #c0392b;
}
@keyframes dashRecPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.4); }
  50% { box-shadow: 0 0 0 20px rgba(231,76,60,0); }
}

.dash-record-timer {
  font-size: 2rem;
  font-weight: 700;
  font-family: 'Consolas', 'Courier New', monospace;
  color: var(--dark);
  margin-top: 16px;
}
.dash-record-status {
  font-size: 13px;
  color: var(--gray);
  margin-top: 6px;
}

.dash-record-live {
  margin-top: 20px;
  width: 100%;
  max-width: 600px;
  text-align: left;
}
.dash-live-label {
  font-size: 11px;
  font-weight: 700;
  color: #e74c3c;
  margin-bottom: 6px;
}
.dash-live-text {
  background: white;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  max-height: 120px;
  overflow-y: auto;
}

/* =========================================
   DOCUMENT SCAN
   ========================================= */
.dash-drop-zone {
  border: 2px dashed #d1d5db;
  border-radius: 14px;
  padding: 36px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--gray);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #fafbfc;
}
.dash-drop-zone svg { opacity: 0.35; }
.dash-drop-zone p { font-size: 13px; margin: 0; }
.dash-drop-zone:hover,
.dash-drop-zone.dragover {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(37,99,235,0.03);
}
.dash-drop-zone.dragover svg { opacity: 0.6; }

.dash-scan-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dash-scan-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ddd;
}
.dash-scan-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dash-scan-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* =========================================
   SIDEBAR EXTRAS (Verlauf, Profil)
   ========================================= */
.dash-sidebar-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 4px 16px;
}
.dash-sidebar-extra {
  padding: 4px 0;
}

/* =========================================
   USER AVATAR & DROPDOWN
   ========================================= */
.dash-user-menu {
  position: relative;
}
.dash-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: white;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid #e2e8f0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  font-family: inherit;
  letter-spacing: -0.5px;
  box-shadow: 0 2px 6px rgba(26,86,219,0.15);
}
.dash-user-avatar:hover {
  border-color: var(--blue-light);
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(26,86,219,0.2);
}
.dash-user-dropdown {
  display: none;
  position: absolute;
  top: 42px;
  right: 0;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: var(--shadow-xl);
  z-index: 2000;
  min-width: 200px;
  overflow: hidden;
  animation: dropdownFade 0.15s ease;
}
@keyframes dropdownFade {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.dash-user-dropdown.open { display: block; }
.dash-user-dropdown-header {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  color: #666;
}
.dash-user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background 0.15s;
}
.dash-user-dropdown-item:hover {
  background: #f8f9fa;
}
.dash-user-dropdown-item svg {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  flex-shrink: 0;
}
.dash-user-dropdown-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 2px 0;
}
.dash-logout-btn {
  color: #D52B1E !important;
  font-weight: 600 !important;
}
.dash-logout-btn svg { stroke: #D52B1E !important; opacity: 0.8 !important; }

/* =========================================
   CONNECTOR SECTION
   ========================================= */
.dash-connector-container {
  max-width: 620px;
  margin: 0 auto;
  padding: 20px 0;
}
.dash-connector-status {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: white;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  margin-bottom: 20px;
}
.dash-connector-status.connected {
  border-color: #27ae60;
  background: #f0fdf4;
}
.dash-connector-status.disconnected {
  border-color: #e74c3c;
  background: #fef2f2;
}
.dash-connector-status-icon {
  font-size: 32px;
  flex-shrink: 0;
}
.dash-connector-status-info h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 4px;
}
.dash-connector-status-info p {
  font-size: 13px;
  color: var(--text-light);
  margin: 0;
}
.dash-connector-card {
  background: white;
  border-radius: var(--radius);
  border: 1px solid #e2e8f0;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.dash-connector-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 8px;
}
.dash-connector-desc {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.6;
  margin: 0 0 20px;
}
.dash-bm-link-box {
  text-align: center;
  padding: 20px;
  background: #f0f4ff;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 2px dashed #c5cfe0;
}
.dash-bm-link-box a {
  display: inline-block;
  background: linear-gradient(135deg, #1a1a2e, #0f3460);
  color: #fff;
  padding: 10px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: grab;
}
.dash-bm-link-box a:active { cursor: grabbing; }
.dash-bm-link-box p {
  font-size: 12px;
  color: #888;
  margin: 10px 0 0;
}
.dash-connector-steps {
  background: #f8fafc;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.dash-connector-steps ol {
  padding-left: 18px;
  margin: 0;
}
.dash-connector-steps li {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 4px;
}
.dash-connector-steps code {
  background: #e3e8f0;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}
.dash-bm-drag-hint {
  font-size: 13px;
  color: #1a5276;
  font-weight: 500;
  margin-top: 6px;
}
.dash-step-detail {
  display: block;
  font-size: 12px;
  color: var(--text-light);
  margin-top: 2px;
}
.dash-connector-steps li {
  font-size: 13px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef1f5;
}
.dash-connector-steps li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.dash-connector-warning {
  font-size: 13px;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  line-height: 1.6;
}
.dash-connector-note {
  font-size: 12px;
  color: #5d4037;
  background: #fff8e1;
  border-left: 3px solid #ffc107;
  border-radius: 4px;
  padding: 10px 14px;
  line-height: 1.6;
  margin-bottom: 12px;
}
.dash-connector-troubleshoot {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 16px;
}
.dash-connector-troubleshoot summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--dark);
}
.dash-connector-troubleshoot ul {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.7;
}
.dash-connector-troubleshoot li {
  margin-bottom: 6px;
}
.dash-connector-setting {
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f0;
}
.dash-connector-setting:last-child {
  border-bottom: none;
}
.dash-connector-setting-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  display: block;
  margin-bottom: 6px;
}
.dash-connector-setting-control {
  margin-bottom: 4px;
}
.dash-connector-setting-hint {
  font-size: 11px;
  color: var(--text-light);
  margin: 4px 0 0;
  line-height: 1.5;
}
.dash-connector-token-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dash-connector-token-input {
  flex: 1;
  padding: 8px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-size: 12px;
  font-family: monospace;
  box-sizing: border-box;
  background: #f8fafc;
  color: #666;
}
.dash-connector-privacy {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.6;
  padding: 16px 20px;
  background: #eafaf1;
  border-radius: 10px;
  border: 1px solid #27ae60;
}
.dash-connector-privacy a {
  color: #2563eb;
}

/* =========================================
   PROFILE SECTION
   ========================================= */
.dash-profile-container {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 0;
}
.dash-profile-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: white;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  margin-bottom: 20px;
}
.dash-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: white;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.5px;
  box-shadow: 0 4px 12px rgba(26,86,219,0.2);
}
.dash-profile-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 4px;
}
.dash-profile-email {
  font-size: 13px;
  color: var(--gray);
  margin: 0;
}
.dash-profile-details {
  background: white;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  margin-bottom: 20px;
}
.dash-profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid #f0f0f0;
}
.dash-profile-row:last-child { border-bottom: none; }
.dash-profile-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
}
.dash-profile-value {
  font-size: 13px;
  color: var(--dark);
  font-weight: 500;
}
.dash-profile-actions {
  text-align: center;
  padding-top: 8px;
}
.dash-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: white;
  color: #D52B1E;
  border: 2px solid #D52B1E;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.dash-btn-danger:hover {
  background: #D52B1E;
  color: white;
}
.dash-btn-danger svg { width: 16px; height: 16px; }

/* =========================================
   HISTORY SECTION
   ========================================= */
.dash-history-container {
  max-width: 720px;
  margin: 0 auto;
}
.dash-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dash-history-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0;
}
.dash-history-clear {
  font-size: 12px;
  color: #999;
  background: none;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
}
.dash-history-clear:hover { color: #D52B1E; border-color: #D52B1E; }
.dash-history-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.dash-history-filter {
  padding: 6px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  background: white;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.dash-history-filter:hover { border-color: #2563eb; color: #2563eb; }
.dash-history-filter.active {
  background: var(--dark);
  color: white;
  border-color: var(--dark);
}
.dash-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-history-empty {
  text-align: center;
  padding: 48px 20px;
  color: #bbb;
}
.dash-history-empty p { font-size: 14px; margin: 12px 0 0; line-height: 1.6; }
.dash-history-item {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.dash-history-item:hover {
  border-color: rgba(59,130,246,0.3);
  box-shadow: 0 4px 12px rgba(59,130,246,0.06);
  transform: translateY(-1px);
}
.dash-history-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.dash-history-item-icon.soap { background: #e8f5e9; }
.dash-history-item-icon.ambient { background: #fce4ec; }
.dash-history-item-icon.bericht { background: #e3f2fd; }
.dash-history-item-icon.korrektur { background: #fff3e0; }
.dash-history-item-icon.scan { background: #f3e5f5; }
.dash-history-item-body { flex: 1; min-width: 0; }
.dash-history-item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-history-source-badge {
  display: inline-block;
  font-size: 10px;
  margin-left: 5px;
  vertical-align: middle;
  opacity: 0.7;
}
.dash-history-item-preview {
  font-size: 12px;
  color: var(--gray);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}
.dash-history-item-time {
  font-size: 11px;
  color: #bbb;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

/* =========================================
   MOBILE BOTTOM NAV
   ========================================= */
.dash-mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #eee;
  z-index: 1000;
  padding: 4px 0 env(safe-area-inset-bottom, 4px);
}
.dash-mobile-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  background: none;
  border: none;
  font-size: 9px;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  font-family: inherit;
}
.dash-mobile-item svg {
  width: 18px;
  height: 18px;
  opacity: 0.5;
}
.dash-mobile-item.active { color: var(--blue); }
.dash-mobile-item.active svg { opacity: 1; stroke: var(--blue); }

/* =========================================
   DASHBOARD RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
  .dash-sidebar { display: none; }
  .dash-mobile-nav { display: flex; }
  .dash-app { padding-bottom: 56px; }
  .dash-split { grid-template-columns: 1fr; }
  .dash-section { padding: 12px; }
  .dash-menu-toggle { display: flex; }
  .dash-record-btn { width: 90px; height: 90px; }
  .dash-record-btn svg { width: 36px; height: 36px; }
  .dash-record-timer { font-size: 1.5rem; }
  .dash-form-grid { grid-template-columns: 1fr; }
  .dash-topbar { padding: 10px 12px; }
  .dash-ambient-center { padding: 24px 12px; }
}

@media (min-width: 769px) {
  .dash-menu-toggle { display: none !important; }
  .dash-mobile-nav { display: none !important; }
}

/* === MODULE DEMO TABS === */
.module-tab {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.25s;
}
.module-tab:hover { color: var(--text); border-color: var(--blue-light); }
.module-tab.active {
  color: white;
  background: var(--blue);
  border-color: var(--blue);
}

/* Module Demo Frame */
.module-demo-frame {
  background: white;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid #e2e8f0;
}
.module-demo-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--dark);
  color: white;
}
.module-demo-url {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08);
  padding: 3px 12px;
  border-radius: 4px;
  font-family: monospace;
}

/* Waitlist Form */
.waitlist-form input:focus {
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(41,128,185,0.12);
}

/* Module demo responsive */
@media (max-width: 600px) {
  .module-tab { font-size: 11px; padding: 6px 12px; }
  #module-demos .container > div:last-child > .module-demo-frame > div:nth-child(2) {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #module-demos .container > div:last-child > .module-demo-frame > div:nth-child(2) > div:nth-child(2) {
    padding-top: 0 !important;
    transform: rotate(90deg);
  }
}

/* === Ambient Recording Demo === */
.amb-phase {
  animation: ambFadeIn 0.5s ease forwards;
}
@keyframes ambFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.amb-phase-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.amb-phase-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1a5276;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.amb-phase-label {
  font-size: 16px;
  font-weight: 700;
  color: #1e2a38;
}

/* Speech bubbles */
.amb-bubble {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.4s ease;
}
.amb-bubble.visible {
  opacity: 1;
  transform: translateY(0);
}
.amb-bubble-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.amb-bubble-avatar.doctor { background: #eaf2f8; }
.amb-bubble-avatar.patient { background: #fef3c7; }
.amb-bubble-text {
  background: #f1f5f9;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
  color: #2c3e50;
  line-height: 1.5;
  max-width: 380px;
}
.amb-bubble.patient-side {
  flex-direction: row-reverse;
}
.amb-bubble.patient-side .amb-bubble-text {
  background: #fffbeb;
}

/* Waveform */
.amb-wave-bar {
  width: 3px;
  background: #e74c3c;
  border-radius: 2px;
  transition: height 0.3s ease;
}
.amb-wave-bar.active {
  animation: ambWave 0.6s ease-in-out infinite alternate;
}
@keyframes ambWave {
  from { height: 6px; }
  to { height: 40px; }
}

/* Anonymization highlight */
.amb-anon-hl {
  background: #fecaca;
  border-radius: 3px;
  padding: 0 3px;
  transition: all 0.6s ease;
}
.amb-anon-hl.replaced {
  background: #bbf7d0;
  color: #166534;
  font-weight: 600;
}

/* Progress dots */
.amb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ddd;
  transition: all 0.3s;
}
.amb-dot.active { background: #D52B1E; }
.amb-dot.done { background: #27ae60; }

/* Checkmark pop */
@keyframes ambPop {
  0% { transform: scale(0); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
#amb-checkmark {
  animation: ambPop 0.5s ease forwards;
}

/* Ambient demo responsive */
@media (max-width: 600px) {
  #amb-phase-2 [style*="grid-template-columns"],
  #amb-phase-4 [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #amb-phase-2 [style*="grid-template-columns"] > div:nth-child(2),
  #amb-phase-4 [style*="grid-template-columns"] > div:nth-child(2) {
    display: none !important;
  }
}

/* === Report Comment / Korrektur Buttons === */
.soap-comment-btn { background:none; border:none; cursor:pointer; font-size:11px; padding:0 3px; opacity:0.4; vertical-align:middle; }
.soap-comment-btn:hover { opacity:1; }
.soap-comment-btn.has-comment { opacity:1; color:#e67e22; }
.soap-comment-row { display:flex; gap:4px; margin-top:3px; align-items:center; }
.soap-comment-input { flex:1; padding:4px 8px; border:1px solid #e67e22; border-radius:4px; font-size:12px; font-family:inherit; }
.soap-comment-input:focus { outline:none; border-color:#d35400; }
.soap-comment-ok { background:#e67e22; color:#fff; border:none; border-radius:4px; padding:4px 10px; cursor:pointer; font-size:12px; font-weight:600; }
.soap-comment-ok:hover { background:#d35400; }
.soap-comment-summary { margin-top:8px; padding:8px 12px; background:#fef9e7; border:1px solid #f9e79f; border-radius:6px; font-size:12px; color:#7d6608; }

/* === VORHER/NACHHER (Before/After) === */
.ba-section { background: var(--gray-light); padding: 60px 0; }
.ba-title { text-align: center; margin-bottom: 40px; }
.ba-grid {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px;
  align-items: center; max-width: 900px; margin: 0 auto;
}
.ba-box { background: #fff; border-radius: 12px; padding: 24px; }
.ba-box-before { border: 2px solid #e0e0e0; }
.ba-box-after { border: 2px solid #27ae60; }
.ba-label { font-size: 11px; text-transform: uppercase; color: #999; margin-bottom: 8px; font-weight: 600; }
.ba-label-green { color: #27ae60; }
.ba-text-mono { font-family: monospace; font-size: 13px; color: #555; line-height: 1.6; }
.ba-text-result { font-size: 12px; color: #333; line-height: 1.6; }
.ba-arrow { font-size: 28px; color: var(--blue); text-align: center; }
.ba-caption { text-align: center; margin-top: 16px; font-size: 12px; color: #888; }

.hero-cta-secondary { margin-left: 12px; }

@media (max-width: 700px) {
  .ba-grid { grid-template-columns: 1fr; gap: 12px; }
  .ba-arrow { transform: rotate(90deg); font-size: 24px; }
  .ba-box { padding: 18px; }
  .hero-cta-secondary { margin-left: 0; }
}

/* === ROI CALCULATOR === */
.roi-section { padding: 60px 0; background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%); color: white; }
.roi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 900px; margin: 0 auto; }
.roi-slider-wrap { margin-top: 20px; }
.roi-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px;
  background: rgba(255,255,255,0.2); border-radius: 4px; outline: none;
}
.roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%;
  background: #D52B1E; cursor: pointer; box-shadow: 0 2px 8px rgba(213,43,30,0.4);
}
.roi-slider::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: #D52B1E; cursor: pointer;
}
.roi-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.roi-card {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 20px; text-align: center;
}
.roi-card-num { font-size: 1.8rem; font-weight: 800; color: #D52B1E; }
.roi-card-label { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 4px; }
@media (max-width: 700px) {
  .roi-grid { grid-template-columns: 1fr; gap: 24px; }
  .roi-results { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .roi-card { padding: 14px 8px; }
  .roi-card-num { font-size: 1.3rem; }
}

/* === LIVE COUNTER === */
.live-counter-wrap {
  display: none; text-align: center; padding: 16px 0;
  font-size: 14px; color: var(--text-light);
}
.live-counter-num {
  font-size: 1.6rem; font-weight: 800; color: var(--zima);
  display: inline-block; margin: 0 6px;
}

/* === EXIT-INTENT POPUP === */
.bd-exit-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease;
}
.bd-exit-overlay.show { opacity: 1; }
.bd-exit-box {
  background: white; border-radius: 18px; padding: 36px 32px;
  max-width: 380px; width: 90%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  transform: translateY(20px); transition: transform 0.3s ease;
}
.bd-exit-overlay.show .bd-exit-box { transform: translateY(0); }
.bd-exit-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; font-size: 24px; color: #94a3b8;
  cursor: pointer; line-height: 1;
}
.bd-exit-close:hover { color: #1e293b; }

/* =========================================
   PROMINENT COPY BUTTON (Tandem-style green)
   ========================================= */
.dash-copy-btn-prominent {
  background: #bff66f;
  color: #1b1917;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s, transform 0.1s;
  margin-top: 12px;
  font-family: inherit;
}
.dash-copy-btn-prominent:hover {
  background: #a8e050;
  transform: translateY(-1px);
}
.dash-copy-btn-prominent:active {
  transform: translateY(0);
}
.dash-copy-btn-prominent:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  transform: none;
}
.dash-copy-btn-prominent .copy-check {
  display: none;
}
.dash-copy-btn-prominent.copied {
  background: #22c55e;
  color: #fff;
}
.dash-copy-btn-prominent.copied .copy-check {
  display: inline;
}
.dash-copy-btn-prominent.copied .copy-icon {
  display: none;
}

/* =========================================
   ICD CHIPS (Enhanced Display)
   ========================================= */
.icd-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.icd-chip:hover {
  background: #dbeafe;
}
.icd-chip .icd-code {
  color: #3b82f6;
  font-weight: 600;
}

/* =========================================
   ICD Categories (Tandem-style)
   ========================================= */
.icd-category { margin-top: 12px; }
.icd-category-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; margin-bottom: 6px; font-weight: 600; }
.icd-category-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.icd-chip.icd-primary { background: #1a5276; color: #fff; }
.icd-chip.icd-secondary { background: #e2e8f0; color: #475569; }
.icd-chip.icd-secondary:hover { background: #cbd5e1; }

/* =========================================
   Sidebar History Panel
   ========================================= */
.dash-sidebar-history { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 12px; margin-top: 12px; }
.dash-sidebar-history-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255,255,255,0.35); padding: 0 12px 6px; font-weight: 600; }
.dash-sidebar-history-list { max-height: 200px; overflow-y: auto; }
.dash-sidebar-history-item { display: flex; flex-direction: column; padding: 7px 12px; border-radius: 6px; cursor: pointer; transition: background 0.15s; }
.dash-sidebar-history-item:hover { background: rgba(255,255,255,0.06); }
.dash-sidebar-history-item .hist-title { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.dash-sidebar-history-item .hist-time { font-size: 10px; color: rgba(255,255,255,0.3); margin-top: 1px; }

/* =========================================
   SOAP Titel (Tandem-style heading)
   ========================================= */
.dash-soap-titel { font-size: 20px; font-weight: 700; color: #0f172a; padding: 16px 16px 6px; letter-spacing: -0.3px; line-height: 1.3; }

/* =========================================
   Fixed Bottom Action Bar
   ========================================= */
.dash-bottom-bar { position: sticky; bottom: 0; background: rgba(255,255,255,0.97); backdrop-filter: blur(8px); border-top: 1px solid #e5e7eb; padding: 12px 20px; display: flex; gap: 10px; justify-content: center; z-index: 10; }
.dash-bottom-copy { background: #bff66f; color: #1a1a1a; border: none; padding: 10px 28px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.dash-bottom-copy:hover { background: #a8e050; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.dash-bottom-anpassen { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; padding: 10px 20px; border-radius: 8px; font-weight: 500; font-size: 14px; cursor: pointer; transition: all 0.15s; }
.dash-bottom-anpassen:hover { background: #f1f5f9; border-color: #cbd5e1; }
.dash-bottom-insert { background: #1a5276; color: #fff; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 500; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.15s; }
.dash-bottom-insert:hover { background: #1e6a9c; }

@media (max-width: 768px) {
  .dash-bottom-bar { padding: 10px 12px; gap: 8px; }
  .dash-bottom-copy { padding: 10px 16px; font-size: 13px; flex: 1; justify-content: center; }
  .dash-bottom-anpassen { padding: 10px 14px; font-size: 13px; }
}

/* =========================================
   Result Tabs (Notiz / Transkription)
   ========================================= */
.dash-result-tabs { display: flex; gap: 0; border-bottom: 2px solid #e5e7eb; margin: 0 16px 12px; }
.dash-result-tab { padding: 10px 18px; background: none; border: none; font-size: 13px; font-weight: 600; color: #94a3b8; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; }
.dash-result-tab.active { color: #1a5276; border-bottom-color: #1a5276; }
.dash-result-tab:hover:not(.active) { color: #64748b; }

/* =========================================
   Pre-Recording Settings
   ========================================= */
.dash-record-settings { display: flex; gap: 20px; justify-content: center; margin-bottom: 28px; padding: 14px 20px; background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0; flex-wrap: wrap; }
.dash-record-setting { display: flex; align-items: center; gap: 8px; }
.dash-record-setting label { font-size: 13px; font-weight: 500; color: #64748b; }
.dash-select-sm { padding: 7px 12px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; background: #fff; color: #1e293b; cursor: pointer; }
.dash-select-sm:focus { border-color: #1a5276; outline: none; box-shadow: 0 0 0 2px rgba(26,82,118,0.15); }

/* =========================================
   Topbar Greeting
   ========================================= */
#dash-greeting { font-weight: 600; }

/* =========================================
   PAUSE BUTTON (Ambient Recording)
   ========================================= */
.dash-pause-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 10px 24px;
  background: #f59e0b;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
}
.dash-pause-btn:hover { background: #d97706; }
.dash-pause-btn.paused { background: #22c55e; }
.dash-pause-btn.paused:hover { background: #16a34a; }

/* =========================================
   ANPASSEN (Inline AI Customize)
   ========================================= */
.dash-anpassen-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 14px;
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-light);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.dash-anpassen-toggle:hover { border-color: var(--blue); color: var(--blue); }
.dash-anpassen-toggle:disabled { opacity: 0.3; cursor: not-allowed; }

/* =========================================
   DOKUMENTE — Doc Type Tabs
   ========================================= */
.dash-doc-tab.active {
  background: #1a5276 !important;
  color: #fff !important;
  border-color: #1a5276 !important;
}
.dash-doc-tab:hover:not(.active) {
  border-color: #9ca3af;
}

/* =========================================
   TEXTBAUSTEINE — Snippet Items
   ========================================= */
.tb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13px;
  transition: border-color 0.15s;
}
.tb-item:hover {
  border-color: #93c5fd;
}
.tb-item-kuerzel {
  font-weight: 600;
  color: var(--blue);
  min-width: 90px;
  font-family: monospace;
  font-size: 12px;
}
.tb-item-text {
  flex: 1;
  color: var(--text);
}
.tb-item-actions {
  display: flex;
  gap: 4px;
}
.tb-item-btn {
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.tb-item-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.tb-item-btn.tb-delete:hover {
  border-color: var(--red);
  color: var(--red);
}