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

/* Self-hosted fonts — no external requests, full Swiss data residency */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/playfair-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/playfair-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

:root {
  /* — Legacy aliases (backward compat) — */
  --blue: #2563eb;
  --blue-light: #2563eb;
  --blue-bg: rgba(37, 99, 235, 0.06);
  --green: #059669;
  --green-light: #10b981;
  --green-bg: #ecfdf5;
  --orange: #6366f1;
  --red: #60a5fa;
  --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: #2563eb;
  --accent-subtle: rgba(37, 99, 235, 0.08);
  --success: #10b981;
  --danger: #60a5fa;
  --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);

  /* — Z-index layers (use these for new code) — */
  --z-base: 1;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-topbar: 100;
  --z-toolbar: 200;
  --z-popover: 300;
  --z-sidebar-overlay: 998;
  --z-sidebar: 999;
  --z-nav: 1000;
  --z-toast: 2000;
  --z-modal-backdrop: 9999;
  --z-modal: 10000;

  /* — Theme tokens (dark defaults — tool.html uses data-theme="dark") — */
  --bg-app: #0f172a;
  --bg-card: #1e293b;
  --bg-surface: #1e293b;
  --bg-sidebar: #0c1220;
  --bg-input: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --border-color: #334155;
  --border: #334155;
  --hover-bg: #334155;
}

/* === THEME SYSTEM === */
[data-theme="light"] {
  --bg-app: #f8fafc;
  --bg-card: #ffffff;
  --bg-surface: #ffffff;
  --bg-sidebar: #f1f5f9;
  --bg-input: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --text-light: #64748b;
  --border-color: #e2e8f0;
  --border: #e2e8f0;
  --hover-bg: #f1f5f9;
}
[data-theme="dark"] {
  --bg-app: #0f172a;
  --bg-card: #1e293b;
  --bg-surface: #1e293b;
  --bg-sidebar: #0c1220;
  --bg-input: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --border-color: #334155;
  --border: #334155;
  --hover-bg: #334155;
}

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

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

[data-theme="dark"] body {
  background: #0f172a;
  color: #f1f5f9;
}

.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 {
  display: flex; align-items: center; gap: 6px; text-decoration: none;
  letter-spacing: -0.03em;
}
.logo-bolt { flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(59,130,246,0.3)); }
.logo-text { font-size: 1.35rem; font-weight: 900; line-height: 1; }
.logo-blitz { color: var(--dark); }
.logo-doc { color: #2563eb; }

/* --- Tool page sidebar logo overrides (dark backgrounds need white "Blitz") --- */
[data-theme="dark"] .logo-blitz,
.blitz-left-logo .logo-blitz,
.dash-sidebar-logo .logo-blitz,
.tool-topbar-logo .logo-blitz {
  color: #fff;
}
[data-theme="dark"] .logo-blitz { color: #fff; }
[data-theme="light"] .logo-blitz { color: var(--dark, #0f172a); }

.blitz-left-logo .logo-text,
.dash-sidebar-logo .logo-text {
  font-size: 1.15rem;
}

.logo-icon { font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: linear-gradient(135deg, #2563eb, #8b5cf6); color: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(59,130,246,0.3); }
.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: #2563eb !important; color: #ffffff !important;
  padding: 8px 20px !important; border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3) !important;
  font-weight: 600 !important;
}
.nav-cta:hover { background: #1d4ed8 !important; box-shadow: 0 4px 16px rgba(37,99,235,0.4) !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: #2563eb; 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(59,130,246,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(59,130,246,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: #fafaf9;
}
.contact-select { background: #fafaf9; 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-brand .logo-blitz { color: #fff; }
.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: #fafaf9;
}
.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: #fafaf9;
}
.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: #fafaf9; }
.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) {
  body { overflow-x: hidden; }
  .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; overflow-x: hidden; }
  #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;
    flex-direction: column !important;
    align-items: center !important;
    padding: 24px 0 !important;
    box-sizing: border-box;
    overflow-x: hidden !important;
  }
  #ambient > .container { width: 100%; }
  #ambient > * { width: 100%; max-width: 100%; box-sizing: border-box; }
  /* 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; background: var(--bg-app, #f8fafc); color: var(--text-primary, #0f172a); }
.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;
  background: var(--bg-app, #f8fafc);
}

/* --- Sidebar --- */
.dash-sidebar {
  width: 200px;
  background: var(--bg-sidebar, var(--sidebar-bg));
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 100;
  border-right: 1px solid var(--border-color, 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); }

/* --- Version History Panel (Checkpointing) --- */
.dash-versionen-toggle {
  background: var(--bg-subtle, #f8fafc); border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 6px); font-size: 13px; padding: 8px 16px;
  cursor: pointer; font-family: inherit; color: var(--text-secondary, #64748b);
  transition: all 0.15s var(--ease); display: inline-flex; align-items: center; gap: 6px;
}
.dash-versionen-toggle:hover:not(:disabled) { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); }
.dash-versionen-toggle:disabled { opacity: 0.4; cursor: not-allowed; }
.version-count-badge {
  background: var(--accent, #2563eb); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 9999px; min-width: 18px; height: 18px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 5px;
}
.version-panel {
  margin-top: 12px; background: var(--bg, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 10px); overflow: hidden;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
}
.version-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--bg-subtle, #f8fafc);
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.version-panel-title { font-size: 12px; font-weight: 600; color: var(--text, #0f172a); letter-spacing: -0.01em; }
.version-panel-close {
  background: none; border: none; font-size: 18px; color: var(--text-muted, #94a3b8);
  cursor: pointer; padding: 0 4px; line-height: 1;
}
.version-panel-close:hover { color: var(--text, #0f172a); }
.version-timeline { max-height: 320px; overflow-y: auto; padding: 8px 0; }
.version-empty { text-align: center; color: var(--text-muted, #94a3b8); font-size: 12px; padding: 16px; }
.version-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px;
  cursor: pointer; transition: background 0.1s; position: relative;
}
.version-item:hover { background: var(--bg-subtle, #f8fafc); }
.version-item.active { background: var(--accent-subtle, rgba(37,99,235,0.06)); }
.version-item.current { border-left: 3px solid var(--accent, #2563eb); }
.version-dot {
  width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0;
  background: var(--border, #e2e8f0); border: 2px solid var(--bg, #fff);
  box-shadow: 0 0 0 1px var(--border, #e2e8f0);
}
.version-item.current .version-dot { background: var(--accent, #2563eb); box-shadow: 0 0 0 1px var(--accent, #2563eb); }
.version-info { flex: 1; min-width: 0; }
.version-action { font-size: 12px; font-weight: 500; color: var(--text, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.version-time { font-size: 11px; color: var(--text-muted, #94a3b8); margin-top: 1px; }
.version-preview { font-size: 11px; color: var(--text-secondary, #64748b); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.version-restore-btn {
  background: var(--accent, #2563eb); color: #fff; border: none; border-radius: var(--radius-sm, 6px);
  font-size: 11px; padding: 4px 10px; cursor: pointer; white-space: nowrap;
  opacity: 0; transition: opacity 0.15s; font-weight: 500; align-self: center;
}
.version-item:hover .version-restore-btn { opacity: 1; }
.version-restore-btn:hover { background: var(--accent-light, #2563eb); }

/* Version badges */
.version-badge {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 9999px; letter-spacing: 0.01em; white-space: nowrap;
}
.version-badge-green { background: #dcfce7; color: #166534; }
.version-badge-amber { background: #e0e7ff; color: #3730a3; }
.version-badge-purple { background: #f3e8ff; color: #6b21a8; }
.version-badge-blue { background: #dbeafe; color: #1e40af; }

/* Restored state highlight */
.version-item.restored { background: var(--accent-subtle, rgba(37,99,235,0.08)); }
.version-item.restored .version-dot { background: var(--accent, #2563eb); }

/* Version timeline max-height override for larger panels */
.version-timeline { max-height: 400px; }

/* --- Dark mode: Version History Panel --- */
[data-theme="dark"] .version-panel { background: var(--bg, #1e293b); border-color: var(--border, #334155); }
[data-theme="dark"] .version-panel-header { background: var(--bg-subtle, #0f172a); border-color: var(--border, #334155); }
[data-theme="dark"] .version-panel-title { color: var(--text, #f1f5f9); }
[data-theme="dark"] .version-panel-close { color: var(--text-muted, #64748b); }
[data-theme="dark"] .version-panel-close:hover { color: var(--text, #f1f5f9); }
[data-theme="dark"] .version-item:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .version-item.current { border-left-color: var(--accent, #2563eb); }
[data-theme="dark"] .version-item.active { background: rgba(59,130,246,0.1); }
[data-theme="dark"] .version-dot { background: var(--border, #475569); border-color: var(--bg, #1e293b); box-shadow: 0 0 0 1px var(--border, #475569); }
[data-theme="dark"] .version-item.current .version-dot { background: var(--accent, #2563eb); box-shadow: 0 0 0 1px var(--accent, #2563eb); }
[data-theme="dark"] .version-action { color: var(--text, #f1f5f9); }
[data-theme="dark"] .version-time { color: var(--text-muted, #64748b); }
[data-theme="dark"] .version-preview { color: var(--text-secondary, #94a3b8); }
[data-theme="dark"] .version-empty { color: var(--text-muted, #64748b); }
[data-theme="dark"] .version-badge-green { background: rgba(22,101,52,0.3); color: #86efac; }
[data-theme="dark"] .version-badge-amber { background: rgba(99,102,241,0.2); color: #a5b4fc; }
[data-theme="dark"] .version-badge-purple { background: rgba(107,33,168,0.3); color: #d8b4fe; }
[data-theme="dark"] .version-badge-blue { background: rgba(30,64,175,0.3); color: #93c5fd; }
[data-theme="dark"] .version-restore-btn { background: var(--accent, #2563eb); }
[data-theme="dark"] .version-restore-btn:hover { background: #60a5fa; }
[data-theme="dark"] .dash-versionen-toggle { background: var(--bg-subtle, #0f172a); border-color: var(--border, #334155); color: var(--text-secondary, #94a3b8); }
[data-theme="dark"] .dash-versionen-toggle:hover:not(:disabled) { background: rgba(59,130,246,0.1); border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
[data-theme="dark"] .version-count-badge { background: var(--accent, #2563eb); }

/* --- Clickable Transcript (Word-level timestamps) --- */
.clickable-transcript { font-size: 13px; line-height: 1.7; }
.transcript-audio-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--bg-subtle, #f8fafc); border-bottom: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 10px) var(--radius-md, 10px) 0 0;
}
.transcript-play-btn {
  background: var(--accent, #2563eb); color: #fff; border: none; border-radius: 50%;
  width: 28px; height: 28px; font-size: 12px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: background 0.15s;
}
.transcript-play-btn:hover { background: var(--accent-light, #2563eb); }
.transcript-audio-time { font-size: 12px; font-weight: 600; color: var(--text-secondary, #64748b); font-variant-numeric: tabular-nums; }
.transcript-word-count { font-size: 11px; color: var(--text-muted, #94a3b8); margin-left: auto; }
.transcript-words-wrap {
  padding: 12px 14px; max-height: 300px; overflow-y: auto;
  color: var(--text, #0f172a);
}
.transcript-word {
  cursor: pointer; padding: 1px 2px; border-radius: 3px;
  transition: background 0.1s, color 0.1s; display: inline;
}
.transcript-word:hover { background: var(--accent-subtle, rgba(37,99,235,0.08)); color: var(--accent, #2563eb); }
.transcript-word.playing {
  background: var(--accent, #2563eb); color: #fff; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--accent, #2563eb);
}
.transcript-word:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 1px; }

/* --- Snippet Voice Trigger (Faz 12) --- */
.snippet-suggestion-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(16,185,129,0.06) 0%, rgba(37,99,235,0.06) 100%);
  border: 1px solid rgba(16,185,129,0.2); border-radius: var(--radius-md, 10px);
  animation: snippetSlideIn 0.3s var(--ease, ease);
}
@keyframes snippetSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.snippet-suggestion-label { font-size: 12px; font-weight: 600; color: var(--text-secondary, #64748b); white-space: nowrap; }
.snippet-suggestion-chip {
  background: #fff; border: 1px solid rgba(16,185,129,0.3); border-radius: var(--radius-full, 9999px);
  font-size: 11px; padding: 4px 12px; cursor: pointer; color: var(--text, #0f172a);
  transition: all 0.15s; font-family: inherit; max-width: 250px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snippet-suggestion-chip:hover { background: rgba(16,185,129,0.08); border-color: var(--success, #10b981); }
.snippet-suggestion-chip.applied { background: var(--success, #10b981); color: #fff; border-color: var(--success, #10b981); }
.snippet-suggestion-chip strong { font-weight: 700; }
.snippet-suggestion-close {
  background: none; border: none; font-size: 16px; color: var(--text-muted, #94a3b8);
  cursor: pointer; padding: 0 4px; margin-left: auto; line-height: 1;
}
.snippet-suggestion-close:hover { color: var(--text, #0f172a); }

/* --- 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-primary, 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 var(--border-color, #e2e8f0);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  line-height: 1.6;
  background: var(--bg-input, #1e293b);
  color: var(--text-primary, #f1f5f9);
  box-sizing: border-box;
  transition: all var(--transition);
}
.dash-textarea:focus {
  outline: none;
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
  background: var(--bg-input, #1e293b);
}
[data-theme="light"] .dash-textarea { background: #fafaf9; color: #0f172a; }
[data-theme="light"] .dash-textarea:focus { background: #ffffff; }
.dash-textarea::placeholder {
  color: var(--text-secondary, #64748b);
  font-size: 12px;
}
[data-theme="light"] .dash-textarea::placeholder { color: #adb5bd; }

/* --- 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 var(--border-color, #334155);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
  transition: all var(--transition);
  background: var(--bg-input, #1e293b);
  color: var(--text-primary, #f1f5f9);
}
.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: var(--bg-input, #1e293b);
}
[data-theme="light"] .dash-input,
[data-theme="light"] .dash-select { background: #fafaf9; color: #0f172a; border-color: #e2e8f0; }
[data-theme="light"] .dash-input:focus,
[data-theme="light"] .dash-select:focus { background: #ffffff; }

/* --- 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: rgba(59,130,246,0.08);
  border: 1px dashed #2563eb;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #60a5fa;
  font-weight: 500;
  transition: all 0.15s;
}
.dash-soap-ambient-btn:hover {
  background: rgba(59,130,246,0.14);
  border-style: solid;
}
[data-theme="light"] .dash-soap-ambient-btn {
  background: linear-gradient(135deg, #f0f7ff, #e8f4fd);
  border-color: #93c5fd;
  color: var(--blue);
}
[data-theme="light"] .dash-soap-ambient-btn:hover {
  background: linear-gradient(135deg, #e0efff, #d6ebfc);
}
.dash-soap-ambient-btn svg { flex-shrink: 0; }
.dash-soap-ambient-active {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.4);
  border-radius: 8px;
}
[data-theme="light"] .dash-soap-ambient-active {
  background: #fef2f2;
  border-color: #fecaca;
}
.dash-soap-ambient-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #60a5fa;
  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: #60a5fa;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.dash-soap-ambient-stop:hover { background: #2563eb; }
.dash-soap-ambient-transcript {
  margin-top: 8px;
}
.dash-soap-ambient-transcript .dash-textarea {
  font-size: 12px;
  background: #fafaf9;
  color: var(--text-light);
}

/* === Transcript Chat View (MenaHealth-style) === */
.transcript-chat-view {
  max-height: 320px;
  overflow-y: auto;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.transcript-chat-view:empty { display: none; }
.tc-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: 92%;
}
.tc-msg-doctor { align-self: flex-start; }
.tc-msg-patient { align-self: flex-end; flex-direction: row-reverse; }
.tc-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.tc-msg-doctor .tc-avatar { background: #dbeafe; color: #2563eb; }
.tc-msg-patient .tc-avatar { background: #fce7f3; color: #db2777; }
.tc-bubble {
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  word-break: break-word;
}
.tc-msg-doctor .tc-bubble { background: #fff; border: 1px solid #e5e7eb; border-bottom-left-radius: 4px; }
.tc-msg-patient .tc-bubble { background: #eff6ff; border: 1px solid #bfdbfe; border-bottom-right-radius: 4px; }
.tc-speaker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 1px;
}
.tc-msg-doctor .tc-speaker { color: #2563eb; }
.tc-msg-patient .tc-speaker { color: #db2777; }

/* Dark mode */
[data-theme="dark"] .transcript-chat-view { background: #0f172a; border-color: #1e293b; }
[data-theme="dark"] .tc-msg-doctor .tc-bubble { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .tc-msg-patient .tc-bubble { background: #1e3a5f; border-color: #2563eb; color: #e2e8f0; }
[data-theme="dark"] .tc-msg-doctor .tc-avatar { background: #1e3a5f; }
[data-theme="dark"] .tc-msg-patient .tc-avatar { background: #4a1942; }

/* === 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: #e0e7ff;
  color: #3730a3;
}

/* 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;
  background: var(--bg-card, #fff);
  color: var(--text-primary, inherit);
}
.dash-result .soap-label {
  font-weight: 700;
  color: #0f172a;
  display: block;
  margin-top: 10px;
  margin-bottom: 8px;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0.5px;
}
.soap-label {
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #0f172a;
  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);
}

/* === Rich-text SOAP editor (MenaHealth-style) === */
.soap-field-block { margin-bottom: 12px; position: relative; }
.soap-rich-edit {
  width: 100%;
  min-height: 40px;
  border: 1.5px solid #e5e7eb;
  border-left: 3px solid #2563eb;
  border-radius: 8px;
  padding: 16px;
  font-size: 15px;
  line-height: 1.8;
  font-family: inherit;
  background: #fff;
  color: #1e293b;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: text;
  white-space: pre-wrap;
}
.soap-rich-edit:focus {
  border-color: var(--blue, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
.soap-rich-edit-sm { font-size: 12px; min-height: 28px; padding: 6px 10px; background: #f8f9fa; }
.soap-rich-edit b, .soap-rich-edit strong { font-weight: 700; }
.soap-rich-edit i, .soap-rich-edit em { font-style: italic; }
.soap-rich-edit u { text-decoration: underline; }
.soap-rich-edit s { text-decoration: line-through; color: #999; }

/* Evidence highlight underline */
.soap-evidence-hl {
  text-decoration: underline;
  text-decoration-color: #6366f1;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
  position: relative;
}
.soap-evidence-hl:hover { background: rgba(99, 102, 241, 0.12); border-radius: 2px; }
.soap-evidence-hl[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 110%;
  left: 0;
  background: #1f2937;
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 100;
  pointer-events: none;
}

/* AI replaced text */
.soap-ai-replaced {
  background: rgba(16, 185, 129, 0.12);
  border-radius: 2px;
  padding: 0 2px;
  transition: background 2s;
}

/* Floating rich toolbar */
.soap-rich-toolbar {
  position: absolute;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 2px;
  background: #1f2937;
  border-radius: 8px;
  padding: 4px 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  animation: srtFadeIn 0.15s ease;
}
@keyframes srtFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.srt-btn {
  background: none;
  border: none;
  color: #e5e7eb;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.srt-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.srt-divider { width: 1px; height: 18px; background: rgba(255,255,255,0.2); margin: 0 4px; }
.srt-ai { color: #a78bfa; font-weight: 600; }
.srt-ai:hover { color: #c4b5fd; background: rgba(167, 139, 250, 0.15); }
.srt-evidence { color: #818cf8; }
.srt-evidence:hover { color: #a5b4fc; background: rgba(99, 102, 241, 0.15); }

/* AI Edit popover */
.soap-ai-edit-popover {
  position: absolute;
  z-index: 300;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 280px;
  animation: srtFadeIn 0.15s ease;
}
.soap-ai-edit-input {
  width: 100%;
  border: 1.5px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.soap-ai-edit-input:focus { border-color: var(--blue, #2563eb); }
.soap-ai-edit-actions { display: flex; gap: 8px; margin-top: 8px; }
.soap-ai-edit-go {
  flex: 1;
  background: var(--blue, #2563eb);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.soap-ai-edit-go:hover { opacity: 0.9; }
.soap-ai-edit-go:disabled { opacity: 0.5; }
.soap-ai-edit-cancel {
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  color: #6b7280;
}

/* Toast notification */
.soap-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 9999;
  animation: srtFadeIn 0.2s ease;
}

/* Dark mode overrides */
[data-theme="dark"] .soap-rich-edit { background: #1e293b; border-color: #374151; color: #e5e7eb; }
[data-theme="dark"] .soap-rich-edit:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }
[data-theme="dark"] .soap-ai-edit-popover { background: #1e293b; border-color: #374151; }
[data-theme="dark"] .soap-ai-edit-input { background: #0f172a; border-color: #374151; color: #e5e7eb; }
[data-theme="dark"] .soap-ai-replaced { background: rgba(16, 185, 129, 0.2); }
[data-theme="dark"] .soap-evidence-hl:hover { background: rgba(99, 102, 241, 0.2); }
/* 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, #60a5fa, #2563eb);
  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: #fafaf9;
}
.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: var(--bg-card, white);
  border: 1px solid var(--border-color, #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: #2563eb !important;
  font-weight: 600 !important;
}
.dash-logout-btn svg { stroke: #2563eb !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: #4338ca;
  background: #eef2ff;
  border: 1px solid #6366f1;
  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: #2563eb;
  border: 2px solid #2563eb;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.dash-btn-danger:hover {
  background: #2563eb;
  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: #2563eb; border-color: #2563eb; }
.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: var(--text-secondary, #bbb);
}
.dash-history-empty p { font-size: 14px; margin: 12px 0 0; line-height: 1.6; }
.dash-history-item {
  background: var(--bg-card, white);
  border: 1px solid var(--border-color, #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: #e0e7ff; }
.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: #eef2ff;
}

/* 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: #2563eb; }
.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: #2563eb; cursor: pointer; box-shadow: 0 2px 8px rgba(59,130,246,0.4);
}
.roi-slider::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: #2563eb; 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: #2563eb; }
.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: 8px 20px;
  font-size: 13px;
  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: #2563eb;
  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: #6366f1;
  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: #4f46e5; }
.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
   ========================================= */
/* Textbausteine — Dark-native card design */
.tb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  font-size: 13px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.tb-item:hover {
  border-color: var(--zima, #00B4D8);
  box-shadow: 0 0 0 1px var(--zima, #00B4D8), 0 4px 12px rgba(0, 180, 216, 0.08);
  transform: translateY(-1px);
}
.tb-item-kuerzel {
  font-weight: 700;
  color: var(--zima, #00B4D8);
  min-width: 90px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  background: rgba(0, 180, 216, 0.08);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: -0.02em;
}
.tb-item-text {
  flex: 1;
  color: var(--text-primary, #1e293b);
  line-height: 1.5;
}
.tb-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.tb-item-btn {
  background: var(--bg-app, #f8fafc);
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-secondary, #64748b);
}
.tb-item-btn:hover {
  border-color: var(--zima, #00B4D8);
  color: var(--zima, #00B4D8);
  background: rgba(0, 180, 216, 0.06);
}
.tb-item-btn.tb-delete:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
}

/* =======================================
   TOOL PAGE LAYOUT (moved from tool.html inline)
   ======================================= */

/* Sidebar overlay */
.dash-sidebar-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); z-index: 998;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.dash-sidebar-overlay.open { opacity: 1; pointer-events: auto; }
.dash-sidebar.overlay-mode {
  position: fixed; top: 0; left: 0; bottom: 0; width: 280px;
  transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 999;
}
.dash-sidebar.overlay-mode.open { transform: translateX(0); }

/* Top bar redesign */
.tool-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; background: var(--bg-card, #fff);
  border-bottom: 1px solid var(--border-color, #f1f5f9); position: sticky; top: 0; z-index: 100;
}
.tool-topbar-burger {
  background: none; border: none; cursor: pointer; padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.tool-topbar-burger span {
  display: block; width: 20px; height: 2px; background: var(--text-primary, #0f172a); border-radius: 1px;
}
.tool-topbar-logo {
  font-size: 1.1rem; font-weight: 800; color: var(--text-primary, #0f172a);
  display: flex; align-items: center; gap: 6px; text-decoration: none; letter-spacing: -0.03em;
}
.tool-topbar-right {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
}

/* Tabs */
.tool-tabs {
  display: flex; gap: 0; border-bottom: 2px solid var(--border-color, #e5e7eb);
  padding: 0 20px; background: var(--bg-card, #fff);
}
.tool-tab {
  padding: 10px 20px; background: none; border: none;
  font-size: 14px; font-weight: 600; color: var(--text-secondary, #94a3b8); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s;
  font-family: inherit;
}
.tool-tab.active { color: var(--zima, #00B4D8); border-bottom-color: var(--zima, #00B4D8); }
.tool-tab:hover { color: var(--text-primary, #475569); }

/* Tab panels */
.tool-panel { display: none; color: var(--text-primary, inherit); }
.tool-panel.active { display: block; }

/* Single-column flow */
.tool-flow { max-width: 720px; margin: 0 auto; padding: 24px 20px 100px; }

/* Input area */
.tool-input { margin-bottom: 20px; }
.tool-input .dash-textarea { width: 100%; box-sizing: border-box; }

/* Output area */
.tool-output { margin-bottom: 20px; }

/* Actions row */
.tool-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.tool-action-btn {
  padding: 10px 18px; border-radius: 8px; border: 1px solid var(--border-color, #e2e8f0);
  background: var(--bg-card, #fff); font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s;
  font-family: inherit; color: var(--text-primary, #475569);
}
.tool-action-btn:hover { background: var(--hover-bg, #f8fafc); border-color: var(--border-color, #cbd5e1); }
.tool-action-btn.primary { background: var(--zima, #00B4D8); color: #fff; border-color: var(--zima, #00B4D8); }
.tool-action-btn.primary:hover { background: var(--zima-dark, #0891B2); }

/* Extra section (bericht/dokument expand) */
.tool-extra { margin-top: 20px; }
.tool-extra-section {
  background: var(--bg-app, #f8fafc); border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px;
  padding: 16px; margin-bottom: 16px;
}
.tool-extra-section h3 { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--text-primary, #1e293b); }
.tool-extra-result {
  white-space: pre-wrap; font-size: 14px; line-height: 1.7;
  color: var(--text-secondary, #374151); padding: 12px; background: var(--bg-card, #fff); border-radius: 8px;
  border: 1px solid var(--border-color, #e5e7eb); margin-top: 10px;
}

/* Bericht expand */
#tool-bericht-expand { display: none; }
#tool-bericht-expand.visible { display: block; }

/* Dokument expand */
#tool-dokument-expand { display: none; }
#tool-dokument-expand.visible { display: block; }

.tool-doc-type-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tool-doc-type-btn {
  padding: 6px 14px; border-radius: 16px; border: 1px solid var(--border-color, #e5e7eb);
  background: var(--bg-card, #fff); font-size: 12px; cursor: pointer; transition: all 0.15s;
  font-family: inherit; color: var(--text-secondary, #475569);
}
.tool-doc-type-btn.active { background: var(--zima-subtle, rgba(0,180,216,0.06)); border-color: var(--zima, #00B4D8); color: var(--zima-dark, #0891B2); }

/* Footer */
.tool-footer {
  text-align: center; padding: 16px 20px; font-size: 11px; color: var(--text-secondary, #94a3b8);
  border-top: 1px solid var(--border-color, #f1f5f9); background: var(--bg-card, #fff);
}

/* Scan tab */
.tool-scan-output { margin-top: 16px; }

/* Korrektur tab */
.tool-korrektur-output { margin-top: 16px; }

/* Override dash-app for new layout */
.dash-body .dash-app { display: flex; flex-direction: column; height: 100vh; padding-top: 0; }
.dash-body .dash-main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

/* Hide old nav */
.dash-body .nav { display: none; }
.dash-body .dash-mobile-nav { display: none; }

/* Normalbefund entries */
.nb-entries-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.nb-entry { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--bg-app, #f8fafc); border-radius: 8px; border: 1px solid var(--border-color, #e2e8f0); }
.nb-entry-toggle { margin-top: 4px; }
.nb-entry-label { font-weight: 600; font-size: 14px; color: var(--text-primary, #1e293b); min-width: 120px; margin-top: 4px; }
.nb-entry-text { flex: 1; font-size: 13px; padding: 8px 12px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 6px; resize: vertical; min-height: 36px; font-family: inherit; background: var(--bg-input, #fff); color: var(--text-primary, #1e293b); }
.nb-entry-text:disabled { background: var(--bg-app, #f1f5f9); color: var(--text-secondary, #94a3b8); }
.nb-global-toggle { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; padding: 12px 16px; background: var(--bg-app, #f0fdf4); border-radius: 8px; border: 1px solid var(--border-color, #bbf7d0); cursor: pointer; color: var(--text-primary, inherit); }
.validation-flag { background: #e0e7ff; border-left: 3px solid #6366f1; padding: 4px 8px; margin: 2px 0; font-size: 12px; border-radius: 0 4px 4px 0; }
.validation-flag .flag-icon { margin-right: 4px; }

/* Titel display */
.dash-soap-titel { font-size: 18px; font-weight: 700; color: var(--text-primary, #1e293b); padding: 12px 0 4px; }

/* Vorlagen */
.vorlage-list { display: flex; flex-direction: column; gap: 10px; }
.vorlage-card { background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; padding: 14px 16px; transition: box-shadow 0.15s; }
.vorlage-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.vorlage-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.vorlage-card-name { font-weight: 600; font-size: 14px; color: var(--text-primary, #1e293b); }
.vorlage-card-fach { font-size: 11px; background: #eff6ff; color: #1e40af; padding: 2px 8px; border-radius: 10px; }
.vorlage-card-preview { font-size: 12px; color: var(--text-secondary, #64748b); line-height: 1.5; max-height: 60px; overflow: hidden; }
.vorlage-card-actions { display: flex; gap: 8px; margin-top: 10px; }
.vorlage-card-actions button { font-size: 12px; padding: 4px 10px; border-radius: 5px; border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-card, #fff); cursor: pointer; color: var(--text-secondary, #475569); }
.vorlage-card-actions button:hover { background: var(--hover-bg, #f8fafc); }
.vorlage-card-actions .vorlage-delete { color: #60a5fa; border-color: #fecaca; }
.vorlage-card-actions .vorlage-delete:hover { background: #fef2f2; }

/* Destination Autocomplete */
.dest-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 20; max-height: 250px; overflow-y: auto; }
.dest-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border-color, #f1f5f9); transition: background 0.1s; }
.dest-item:hover { background: var(--hover-bg, #f8fafc); }
.dest-item:last-child { border-bottom: none; }
.dest-item-name { font-weight: 600; font-size: 13px; color: var(--text-primary, #1e293b); }
.dest-item-fach { font-size: 11px; color: #1a5276; margin-left: 6px; }
.dest-item-detail { font-size: 11px; color: var(--text-secondary, #94a3b8); margin-top: 2px; }
.dest-item-hin { font-size: 11px; color: #16a34a; }

/* Address Book */
.addr-list { display: flex; flex-direction: column; gap: 8px; }
.addr-card { background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: flex-start; }
.addr-card:hover { border-color: var(--hover-bg, #cbd5e1); }
.addr-card-info { flex: 1; }
.addr-card-name { font-weight: 600; font-size: 14px; color: var(--text-primary, #1e293b); }
.addr-card-fach { font-size: 12px; color: #1a5276; }
.addr-card-hin { font-size: 12px; color: #16a34a; margin-top: 2px; }
.addr-card-detail { font-size: 11px; color: var(--text-secondary, #94a3b8); margin-top: 2px; }
.addr-card-actions { display: flex; gap: 6px; }
.addr-card-actions button { font-size: 11px; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-card, #fff); cursor: pointer; color: var(--text-secondary, inherit); }
.addr-card-actions .addr-delete { color: #60a5fa; border-color: #fecaca; }

/* Settings tabs — dark-native */
.dash-settings-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border-color, #e2e8f0); margin-bottom: 24px; flex-wrap: wrap; }
.dash-settings-tab { padding: 8px 16px; background: none; border: none; font-size: 13px; font-weight: 500; color: var(--text-secondary, #94a3b8); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; font-family: inherit; border-radius: 6px 6px 0 0; }
.dash-settings-tab.active { color: var(--zima, #00B4D8); border-bottom-color: var(--zima, #00B4D8); background: rgba(0, 180, 216, 0.04); }
.dash-settings-tab:hover { color: var(--text-primary, #e2e8f0); background: var(--hover-bg, rgba(255,255,255,0.04)); }
.dash-settings-panel { display: none; }
.dash-settings-panel.active { display: block; }
.dash-soap-ambient-pause { background: none; border: 1px solid rgba(255,255,255,0.3); color: #fff; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 13px; transition: all 0.15s; }
.dash-soap-ambient-pause:hover { background: rgba(255,255,255,0.1); }
.dash-soap-ambient-pause.paused { background: #6366f1; border-color: #6366f1; color: #000; }
.dash-soap-ambient-dot.paused { background: #6366f1; animation: none; }

/* =========================================
   SETTINGS — Dark-native visual overhaul
   ========================================= */

/* Settings header row */
.settings-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.settings-back-btn {
  font-size: 12px;
  color: var(--text-secondary, #94a3b8);
  border-color: var(--border-color, #e2e8f0);
  background: var(--bg-card, #fff);
}
.settings-back-btn:hover { color: var(--text-primary, #e2e8f0); }

/* Section headers (replaces inline h2 + p) */
.settings-section-header { margin-bottom: 20px; }
.settings-section-title { font-size: 18px; font-weight: 700; color: var(--text-primary, #1e293b); margin-bottom: 4px; }
.settings-section-desc { color: var(--text-secondary, #94a3b8); font-size: 13px; line-height: 1.5; }

/* Form card (adressbuch, connector etc.) */
.settings-form-card {
  background: var(--bg-app, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.settings-form-card-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
  color: var(--text-primary, #1e293b);
}

/* Textbausteine add row — unified card */
.tb-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--bg-app, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  align-items: center;
}
.tb-add-input {
  padding: 10px 12px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg-input, #fff);
  color: var(--text-primary, #1e293b);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tb-add-input:focus {
  border-color: var(--zima, #00B4D8);
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.1);
  outline: none;
}
.tb-add-kuerzel { width: 150px; font-family: 'SF Mono', 'Fira Code', monospace; }
.tb-add-text { flex: 1; }
.tb-add-btn {
  padding: 10px 20px;
  background: var(--zima, #00B4D8);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
  font-family: inherit;
}
.tb-add-btn:hover { background: var(--zima-dark, #0891B2); transform: translateY(-1px); }
.tb-add-btn:active { transform: translateY(0); }

/* Settings section (dark mode — content area background) */
.dash-section {
  background: var(--bg-app, #f8fafc);
  color: var(--text-primary, #1e293b);
}

/* Pre-recording settings */
.dash-record-settings { display: flex; gap: 16px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
.dash-record-setting { display: flex; align-items: center; gap: 8px; }
.dash-record-setting label { font-size: 13px; color: var(--text-secondary, #64748b); }
.dash-select-sm { padding: 6px 10px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 6px; font-size: 13px; background: var(--bg-input, #fff); color: var(--text-primary, #1e293b); }

/* Mobile responsive — tool page */
@media (max-width: 768px) {
  .tool-flow { padding: 16px 12px 100px; }
  .tool-tabs { padding: 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tool-tab { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
  .tool-topbar { padding: 8px 12px; }
  .tool-actions { flex-direction: column; }
  .tool-action-btn { width: 100%; justify-content: center; }
  .tool-doc-type-btns { gap: 4px; }
  .tool-doc-type-btn { padding: 5px 10px; font-size: 11px; }
  .nb-entry { flex-direction: column; gap: 8px; }
  .nb-entry-label { min-width: unset; }
  .vorlage-card { padding: 12px; }
  .addr-card { flex-direction: column; gap: 8px; }
  .addr-card-actions { align-self: flex-end; }
  .dash-settings-tabs { gap: 2px; }
  .dash-settings-tab { padding: 6px 10px; font-size: 12px; }
  .dash-record-settings { flex-direction: column; gap: 8px; }
  .dest-dropdown { max-height: 180px; }
}

/* =============================================================
   LANDING PAGE — "Swiss Precision Meets Clinical Trust"
   Scoped to body.landing-page to avoid breaking other pages
   ============================================================= */

/* --- Landing Design Tokens --- */
body.landing-page {
  --ln-navy: #0f172a;
  --ln-charcoal: #1C2333;
  --ln-red: #2563eb;
  --ln-red-dark: #2563eb;
  --ln-red-glow: rgba(255, 0, 0, 0.12);
  --ln-white: #fafaf9;
  --ln-cream: #F5F3EF;
  --ln-warm-gray: #6B7280;
  --ln-light-gray: #9CA3AF;
  --ln-border: #E5E7EB;
  --ln-serif: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ln-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-family: var(--ln-sans);
  color: var(--ln-navy);
  background: var(--ln-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Swiss Cross Pattern Background --- */
.ln-swiss-pattern {
  position: relative;
  overflow: hidden;
}
.ln-swiss-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,0,0,0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,0,0,0.02) 0%, transparent 50%);
  pointer-events: none;
}

/* --- Landing Nav (transparent → solid) --- */
body.landing-page .nav {
  background: transparent;
  border-bottom: none;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-bottom 0.3s ease;
}
body.landing-page .nav.nav-scrolled {
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid var(--ln-border);
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
  backdrop-filter: blur(12px);
}
body.landing-page .nav .nav-logo {
  font-family: var(--ln-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
}
body.landing-page .nav-links a {
  font-family: var(--ln-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
}

/* --- Hero Section --- */
.ln-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
  background: var(--ln-navy);
  position: relative;
  overflow: hidden;
}
.ln-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,0,0,0.04) 0%, transparent 40%),
    linear-gradient(315deg, rgba(255,0,0,0.02) 0%, transparent 50%);
  pointer-events: none;
}
/* Geometric grid pattern */
.ln-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.ln-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.ln-hero-text h1 {
  font-family: var(--ln-serif);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.ln-hero-text h1 .ln-accent {
  color: var(--ln-red);
  display: block;
}
.ln-hero-subtitle {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  max-width: 480px;
  margin-bottom: 36px;
  font-weight: 400;
}
.ln-hero-cta { --_cta-bg: #10b981; --_cta-hover: #059669;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 36px;
  background: #ffffff;
  color: #fff;
  font-family: var(--ln-sans);
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}
.ln-hero-cta:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255,0,0,0.3);
}
.ln-hero-note {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin-top: 16px;
}

/* Hero Demo Animation */
.ln-hero-demo {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.ln-demo-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ln-demo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
}
.ln-demo-dot:first-child { background: #FF5F56; }
.ln-demo-dot:nth-child(2) { background: #FFBD2E; }
.ln-demo-dot:nth-child(3) { background: #27C93F; }
.ln-demo-title {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-left: 8px;
  font-family: var(--ln-sans);
}
.ln-demo-body {
  padding: 24px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ln-demo-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 16px;
}
.ln-demo-input-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}
.ln-demo-keywords {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  min-height: 40px;
}
.ln-demo-keywords .ln-cursor {
  display: inline-block;
  width: 2px;
  height: 16px;
  background: #ffffff;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: ln-blink 1s step-end infinite;
}
@keyframes ln-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.ln-demo-output {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.5s ease;
}
.ln-demo-output.ln-visible {
  opacity: 1;
  transform: translateY(0);
}
.ln-demo-output-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ln-red);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ln-demo-output-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  animation: ln-pulse 2s ease-in-out infinite;
}
@keyframes ln-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
.ln-demo-soap {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
}
.ln-demo-soap strong {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}
.ln-demo-soap .ln-soap-line {
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.3s ease;
}
.ln-demo-soap .ln-soap-line.ln-visible {
  opacity: 1;
  transform: translateX(0);
}
.ln-demo-icd {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ln-demo-icd.ln-visible { opacity: 1; }
.ln-demo-icd-chip {
  font-size: 11px;
  padding: 4px 10px;
  background: rgba(255,0,0,0.1);
  color: rgba(255,255,255,0.7);
  border-radius: 4px;
  font-weight: 500;
  border: 1px solid rgba(255,0,0,0.15);
}

/* --- Trust Bar (below hero) --- */
.ln-trust-bar {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 20px 24px;
  background: var(--ln-white);
  border-bottom: 1px solid var(--ln-border);
}
.ln-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ln-warm-gray);
  font-weight: 500;
  font-family: var(--ln-sans);
}
.ln-trust-item svg {
  flex-shrink: 0;
}

/* --- Problem Section --- */
.ln-problem {
  padding: 120px 0;
  background: var(--ln-white);
}
.ln-problem-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.ln-problem-text {
  max-width: 500px;
}
.ln-section-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--ln-red);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
  font-family: var(--ln-sans);
}
.ln-section-heading {
  font-family: var(--ln-serif);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ln-navy);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.ln-section-body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ln-warm-gray);
  font-weight: 400;
}
.ln-problem-visual {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ln-before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ln-ba-card {
  padding: 28px 24px;
  border-radius: 10px;
  border: 1px solid var(--ln-border);
}
.ln-ba-card.ln-before {
  background: #FEF2F2;
  border-color: #FECACA;
}
.ln-ba-card.ln-after {
  background: #F0FDF4;
  border-color: #BBF7D0;
}
.ln-ba-card h4 {
  font-family: var(--ln-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}
.ln-ba-card.ln-before h4 { color: #DC2626; }
.ln-ba-card.ln-after h4 { color: #16A34A; }
.ln-ba-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ln-navy);
}
.ln-stat-big {
  font-family: var(--ln-serif);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  color: var(--ln-navy);
  line-height: 1;
  letter-spacing: -0.04em;
}
.ln-stat-big .ln-stat-red {
  color: var(--ln-red);
}
.ln-stat-unit {
  font-family: var(--ln-sans);
  font-size: 16px;
  color: var(--ln-warm-gray);
  margin-top: 8px;
  font-weight: 400;
}

/* --- Timeline (How it Works) --- */
.ln-timeline {
  padding: 120px 0;
  background: var(--ln-cream);
}
.ln-timeline-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 72px;
  padding: 0 24px;
}
.ln-timeline-track {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
/* Connecting line */
.ln-timeline-track::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(12.5% + 12px);
  right: calc(12.5% + 12px);
  height: 2px;
  background: var(--ln-border);
  z-index: 0;
}
.ln-timeline-line-fill {
  position: absolute;
  top: 28px;
  left: calc(12.5% + 12px);
  height: 2px;
  background: #ffffff;
  z-index: 1;
  width: 0;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ln-timeline-track.ln-animated .ln-timeline-line-fill {
  width: calc(100% - 25% - 24px);
}
.ln-timeline-step {
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 0 12px;
  opacity: 0;
  transform: translateY(16px);
  transition: all 0.5s ease;
}
.ln-timeline-step.ln-visible {
  opacity: 1;
  transform: translateY(0);
}
.ln-step-dot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ln-white);
  border: 2px solid var(--ln-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 22px;
  transition: all 0.4s ease;
}
.ln-timeline-step.ln-active .ln-step-dot {
  border-color: var(--ln-red);
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(255,0,0,0.25);
}
.ln-timeline-step.ln-active .ln-step-dot svg path,
.ln-timeline-step.ln-active .ln-step-dot svg polyline,
.ln-timeline-step.ln-active .ln-step-dot svg circle,
.ln-timeline-step.ln-active .ln-step-dot svg polygon {
  stroke: #fff;
  fill: none;
}
.ln-step-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--ln-light-gray);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  font-family: var(--ln-sans);
}
.ln-timeline-step.ln-active .ln-step-num { color: var(--ln-red); }
.ln-step-title {
  font-family: var(--ln-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ln-navy);
  margin-bottom: 8px;
}
.ln-step-desc {
  font-size: 13px;
  color: var(--ln-warm-gray);
  line-height: 1.6;
}

/* --- Demo Section --- */
.ln-demo {
  padding: 80px 0;
  background: var(--ln-white);
}
.ln-demo-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}
.ln-demo-frame {
  border: 1px solid var(--ln-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}
.ln-demo-frame iframe {
  width: 100%;
  height: 580px;
  border: none;
  display: block;
}
.ln-demo-mobile {
  display: none;
  text-align: center;
  padding: 40px 24px;
  background: var(--ln-navy);
  border-radius: 12px;
}
.ln-demo-mobile h3 {
  font-family: var(--ln-serif);
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 12px;
}
.ln-demo-mobile p {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  margin-bottom: 20px;
}
.ln-demo-mobile a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #ffffff;
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

/* --- Datenschutz Section --- */
.ln-privacy {
  padding: 120px 0;
  background: var(--ln-navy);
  position: relative;
  overflow: hidden;
}
.ln-privacy::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.ln-privacy-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.ln-privacy-header {
  text-align: center;
  margin-bottom: 64px;
}
.ln-privacy-header .ln-section-tag { color: rgba(255,255,255,0.5); }
.ln-privacy-header .ln-section-heading { color: #fff; }
.ln-privacy-header p { color: rgba(255,255,255,0.5); }

/* Data Flow Diagram */
.ln-dataflow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.ln-flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  min-width: 140px;
}
.ln-flow-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
}
.ln-flow-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  text-align: center;
}
.ln-flow-sublabel {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  text-align: center;
}
.ln-flow-arrow {
  font-size: 20px;
  color: var(--ln-red);
  flex-shrink: 0;
  opacity: 0.7;
}
.ln-privacy-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.ln-privacy-badge {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 24px;
  transition: border-color 0.2s ease;
}
.ln-privacy-badge:hover {
  border-color: rgba(255,0,0,0.2);
}
.ln-privacy-badge h4 {
  font-family: var(--ln-sans);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ln-privacy-badge p {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}
.ln-privacy-legal {
  text-align: center;
  margin-top: 40px;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}
.ln-privacy-legal a {
  color: var(--ln-red);
  text-decoration: none;
  font-weight: 600;
}

/* --- Testimonials --- */
.ln-testimonials {
  padding: 120px 0;
  background: var(--ln-white);
}
.ln-testimonials-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.ln-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.ln-testimonial {
  padding: 32px;
  border: 1px solid var(--ln-border);
  border-radius: 10px;
  background: #fff;
  position: relative;
}
.ln-testimonial::before {
  content: '\201C';
  font-family: var(--ln-serif);
  font-size: 64px;
  color: var(--ln-red);
  opacity: 0.15;
  position: absolute;
  top: 12px;
  left: 20px;
  line-height: 1;
}
.ln-testimonial blockquote {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ln-navy);
  font-style: italic;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.ln-testimonial cite {
  font-size: 13px;
  color: var(--ln-warm-gray);
  font-style: normal;
  font-weight: 600;
}
.ln-testimonial .ln-time-saved {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ln-red);
  font-weight: 700;
  padding: 4px 10px;
  background: rgba(255,0,0,0.05);
  border-radius: 4px;
}

/* --- Arzt Section --- */
.ln-arzt {
  padding: 120px 0;
  background: var(--ln-cream);
}
.ln-arzt-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 56px;
  align-items: start;
}
.ln-arzt-avatar {
  width: 160px;
  height: 160px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ln-navy), #2A3654);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: #fff;
  font-family: var(--ln-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  border: 3px solid var(--ln-border);
}
.ln-arzt-text h3 {
  font-family: var(--ln-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ln-navy);
  margin-bottom: 4px;
}
.ln-arzt-text .ln-arzt-role {
  font-size: 13px;
  color: var(--ln-warm-gray);
  margin-bottom: 16px;
}
.ln-arzt-text p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ln-warm-gray);
}
.ln-arzt-contact {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ln-light-gray);
}
.ln-arzt-contact a {
  color: var(--ln-red);
  text-decoration: none;
  font-weight: 600;
}

/* --- Final CTA --- */
.ln-final-cta {
  padding: 100px 0;
  background: var(--ln-navy);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ln-final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.ln-final-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 24px;
}
.ln-final-cta h2 {
  font-family: var(--ln-serif);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  line-height: 1.15;
}
.ln-final-cta p {
  font-size: 16px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 32px;
  line-height: 1.7;
}
.ln-final-cta .ln-hero-cta { --_cta-bg: #10b981; --_cta-hover: #059669;
  font-size: 17px;
  padding: 18px 44px;
}

/* --- Landing Footer Override --- */
body.landing-page .footer {
  font-family: var(--ln-sans);
}
body.landing-page .footer h4 {
  font-family: var(--ln-sans);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --- Scroll Reveal --- */
.ln-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ln-reveal.ln-visible {
  opacity: 1;
  transform: translateY(0);
}
.ln-reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ln-reveal-left.ln-visible {
  opacity: 1;
  transform: translateX(0);
}
.ln-reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ln-reveal-right.ln-visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Responsive: Landing --- */
@media (max-width: 900px) {
  .ln-hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 40px;
  }
  .ln-hero { min-height: auto; padding: 120px 0 60px; }
  .ln-hero-text h1 { font-size: clamp(2rem, 7vw, 2.8rem); }
  .ln-problem-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .ln-timeline-track {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ln-timeline-track::before { display: none; }
  .ln-timeline-line-fill { display: none; }
  .ln-timeline-step { text-align: left; display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
  .ln-step-dot { margin: 0; }
  .ln-testimonials-grid { grid-template-columns: 1fr; }
  .ln-arzt-inner { grid-template-columns: 1fr; gap: 32px; }
  .ln-arzt-avatar { width: 100px; height: 100px; font-size: 32px; }
  .ln-dataflow { gap: 8px; }
  .ln-flow-node { min-width: 100px; padding: 12px; }
  .ln-demo-frame { display: none; }
  .ln-demo-mobile { display: block; }
  .ln-before-after { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .ln-hero { padding: 100px 0 40px; }
  .ln-hero-text h1 { font-size: 1.8rem; }
  .ln-hero-subtitle { font-size: 15px; }
  .ln-hero-cta { --_cta-bg: #10b981; --_cta-hover: #059669; padding: 14px 28px; font-size: 15px; width: 100%; justify-content: center; }
  .ln-trust-bar { gap: 20px; padding: 16px; }
  .ln-trust-item { font-size: 12px; }
  .ln-problem, .ln-timeline, .ln-testimonials, .ln-arzt { padding: 80px 0; }
  .ln-privacy { padding: 80px 0; }
  .ln-privacy-badges { grid-template-columns: 1fr; }
  .ln-final-cta { padding: 72px 0; }
  .ln-flow-arrow { display: none; }
  .ln-dataflow { flex-direction: column; gap: 16px; }
}

/* =============================================================
   SUBPAGES — Shared Swiss Design for public pages
   (login, funktionen, faq, extension, legal)
   ============================================================= */

/* --- Subpage Nav: always solid --- */
body.landing-page .nav.nav-solid {
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid var(--ln-border);
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
  backdrop-filter: blur(12px);
}

/* --- Page Header (subpages) --- */
body.landing-page .page-header {
  padding: 120px 0 48px;
  background: var(--ln-navy);
  text-align: center;
}
body.landing-page .page-header h1 {
  font-family: var(--ln-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
body.landing-page .page-header .page-subtitle {
  font-size: 16px;
  color: rgba(255,255,255,0.5);
  max-width: 560px;
  margin: 0 auto;
  font-family: var(--ln-sans);
  line-height: 1.7;
}
body.landing-page .page-header .back-link {
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  font-family: var(--ln-sans);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  transition: color 0.2s;
}
body.landing-page .page-header .back-link:hover {
  color: rgba(255,255,255,0.7);
}

/* --- FAQ Page --- */
body.landing-page .faq-list {
  max-width: 780px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}
body.landing-page .faq-item {
  border: 1px solid var(--ln-border);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
body.landing-page .faq-item:hover {
  border-color: rgba(255,0,0,0.2);
}
body.landing-page .faq-item summary {
  padding: 18px 24px;
  font-family: var(--ln-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ln-navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
body.landing-page .faq-item summary::after {
  content: '+';
  font-size: 20px;
  color: var(--ln-light-gray);
  flex-shrink: 0;
  transition: transform 0.2s;
}
body.landing-page .faq-item[open] summary::after {
  content: '\2212';
  color: var(--ln-red);
}
body.landing-page .faq-item summary::-webkit-details-marker { display: none; }
body.landing-page .faq-item .faq-answer,
body.landing-page .faq-item > div,
body.landing-page .faq-item > p {
  padding: 0 24px 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ln-warm-gray);
  font-family: var(--ln-sans);
}

/* --- Features Page --- */
body.landing-page .features-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
body.landing-page .feature-card {
  border: 1px solid var(--ln-border);
  border-radius: 10px;
  padding: 28px 24px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
body.landing-page .feature-card:hover {
  border-color: rgba(255,0,0,0.15);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
body.landing-page .feature-card h3 {
  font-family: var(--ln-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ln-navy);
  margin-bottom: 8px;
}
body.landing-page .feature-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ln-warm-gray);
}

/* --- Section CTA (subpages) --- */
body.landing-page .cta {
  text-align: center;
  padding: 56px 24px;
  background: var(--ln-cream);
}
body.landing-page .cta h2 {
  font-family: var(--ln-serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--ln-navy);
  margin-bottom: 16px;
}
body.landing-page .cta p {
  font-size: 15px;
  color: var(--ln-warm-gray);
  margin-bottom: 24px;
}

/* --- Legal Pages --- */
body.landing-page .legal-page {
  max-width: 740px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  font-family: var(--ln-sans);
}
body.landing-page .legal-page h1 {
  font-family: var(--ln-serif);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  color: var(--ln-navy);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
body.landing-page .legal-page h2 {
  font-family: var(--ln-serif);
  font-size: 1.3rem;
  color: var(--ln-navy);
  margin-top: 32px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ln-border);
}
body.landing-page .legal-page h3 {
  font-family: var(--ln-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ln-navy);
  margin-top: 24px;
  margin-bottom: 8px;
}
body.landing-page .legal-page p,
body.landing-page .legal-page li {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ln-warm-gray);
}
body.landing-page .legal-page a {
  color: var(--ln-red);
  text-decoration: none;
  font-weight: 500;
}
body.landing-page .legal-page a:hover {
  text-decoration: underline;
}
body.landing-page .legal-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 16px 0;
}
body.landing-page .legal-page th,
body.landing-page .legal-page td {
  padding: 10px 14px;
  border: 1px solid var(--ln-border);
  text-align: left;
}
body.landing-page .legal-page th {
  background: var(--ln-cream);
  font-weight: 600;
  color: var(--ln-navy);
}
body.landing-page .legal-page .info-box,
body.landing-page .legal-page .summary-box,
body.landing-page .legal-page .eu-box {
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0;
  font-size: 13px;
  line-height: 1.7;
}
body.landing-page .legal-page .toc {
  background: var(--ln-cream);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 16px 0;
}

/* --- Connector/Extension Page --- */
body.landing-page .connector-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  font-family: var(--ln-sans);
}
body.landing-page .connector-page h1 {
  font-family: var(--ln-serif);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  color: var(--ln-navy);
  letter-spacing: -0.02em;
}
body.landing-page .connector-page h2,
body.landing-page .connector-page h3 {
  font-family: var(--ln-sans);
  color: var(--ln-navy);
}
body.landing-page .connector-page p,
body.landing-page .connector-page li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ln-warm-gray);
}

/* --- Login Page Override --- */
body.landing-page.login-body {
  background: var(--ln-navy);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.landing-page .login-card {
  font-family: var(--ln-sans);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
body.landing-page .login-card h1 {
  font-family: var(--ln-serif);
  letter-spacing: -0.02em;
}
body.landing-page .login-btn,
body.landing-page .login-card .btn {
  background: #ffffff;
  border-color: var(--ln-red);
}
body.landing-page .login-btn:hover,
body.landing-page .login-card .btn:hover {
  background: #f0f0f0;
  border-color: var(--ln-red-dark);
}

/* --- Subpage Buttons --- */
body.landing-page .btn-primary {
  background: #2563eb;
  color: #ffffff;
  border-color: transparent;
}
body.landing-page .btn-primary:hover {
  background: #f0f0f0;
  border-color: var(--ln-red-dark);
  box-shadow: 0 4px 16px rgba(255,255,255,0.15);
}
body.landing-page .btn-outline {
  border-color: var(--ln-navy);
  color: var(--ln-navy);
}
body.landing-page .btn-outline:hover {
  background: var(--ln-navy);
  color: #fff;
}

/* --- Subpage gradient-text override --- */
body.landing-page .gradient-text {
  background: linear-gradient(135deg, var(--ln-red), #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =============================================================
   TOOL PAGE — Swiss Design Override
   Scoped to body.landing-page.dash-body
   ============================================================= */

/* --- Tool: Font + Base --- */
body.landing-page.dash-body {
  --sidebar-bg: #0f172a;
  --sidebar-text: #fff;
}

/* --- Tool: Topbar --- */
body.landing-page .tool-topbar {
  background: var(--bg-card, var(--ln-navy));
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.06));
}
body.landing-page .tool-topbar-logo {
  color: var(--text-primary, #fff);
  font-family: var(--ln-sans);
}
body.landing-page .tool-topbar-burger span {
  background: var(--text-primary, #fff);
}
body.landing-page .dash-toggle-label {
  color: var(--text-secondary, rgba(255,255,255,0.6));
  font-family: var(--ln-sans);
}
body.landing-page .dash-user-avatar {
  background: #ffffff;
  color: #fff;
  font-family: var(--ln-sans);
  font-weight: 700;
}

/* --- Tool: Sidebar --- */
body.landing-page .dash-sidebar {
  background: var(--ln-navy);
  font-family: var(--ln-sans);
}
body.landing-page .dash-sidebar-title {
  font-family: var(--ln-sans);
  letter-spacing: -0.02em;
}
body.landing-page .dash-nav-item {
  font-family: var(--ln-sans);
}
body.landing-page .dash-nav-item.active {
  background: rgba(255,0,0,0.1);
  color: #fff;
}
body.landing-page .dash-nav-item.active svg {
  color: var(--ln-red);
}
body.landing-page .dash-privacy-badge {
  color: rgba(255,255,255,0.4);
  font-family: var(--ln-sans);
  font-size: 11px;
}

/* --- Tool: Tabs --- */
body.landing-page .tool-tabs {
  font-family: var(--ln-sans);
  background: var(--bg-card, #fff);
  border-bottom: 1px solid var(--border-color, var(--ln-border));
}
body.landing-page .tool-tab {
  font-family: var(--ln-sans);
  font-weight: 500;
}
body.landing-page .tool-tab.active {
  color: var(--ln-navy);
  border-bottom-color: var(--ln-red);
}

/* --- Tool: Primary Button → Swiss Red --- */
body.landing-page .dash-btn-primary {
  background: #ffffff;
  border-radius: 8px;
  font-family: var(--ln-sans);
}
body.landing-page .dash-btn-primary:hover {
  background: #f0f0f0;
  box-shadow: 0 4px 16px rgba(255,255,255,0.15);
}

/* --- Tool: Copy Button --- */
body.landing-page .dash-copy-btn-prominent {
  background: #ffffff;
  font-family: var(--ln-sans);
}
body.landing-page .dash-copy-btn-prominent:hover {
  background: #f0f0f0;
}

/* --- Tool: Input/Output Area --- */
body.landing-page .dash-textarea {
  font-family: var(--ln-sans);
  border-radius: 8px;
}
body.landing-page .dash-label {
  font-family: var(--ln-sans);
  font-weight: 600;
  color: var(--text-primary, var(--ln-navy));
}
body.landing-page .dash-input {
  font-family: var(--ln-sans);
}
body.landing-page .dash-result {
  font-family: var(--ln-sans);
}
body.landing-page .dash-placeholder p {
  font-family: var(--ln-sans);
  color: var(--ln-light-gray);
}

/* --- Tool: Ambient Recording --- */
body.landing-page .dash-soap-ambient-btn {
  font-family: var(--ln-sans);
  border-color: var(--ln-red);
  color: var(--ln-red);
}
body.landing-page .dash-soap-ambient-btn:hover {
  background: rgba(255,0,0,0.04);
}
body.landing-page .dash-soap-ambient-dot {
  background: #ffffff;
}

/* --- Tool: ICD Chips --- */
body.landing-page .dash-icd-chip {
  font-family: var(--ln-sans);
}

/* --- Tool: Profile & Settings --- */
body.landing-page .dash-profile-name {
  font-family: var(--ln-serif);
  letter-spacing: -0.02em;
}
body.landing-page .dash-profile-label,
body.landing-page .dash-profile-value {
  font-family: var(--ln-sans);
}
body.landing-page .dash-settings-tab.active {
  border-bottom-color: var(--ln-red);
  color: var(--ln-navy);
}

/* --- Tool: Anpassen/Refine --- */
body.landing-page .dash-anpassen-toggle {
  font-family: var(--ln-sans);
}

/* --- Tool: Footer --- */
body.landing-page .tool-footer {
  font-family: var(--ln-sans);
  color: var(--ln-light-gray);
  font-size: 11px;
}

/* --- Tool: User Dropdown --- */
body.landing-page .dash-user-dropdown {
  font-family: var(--ln-sans);
}
body.landing-page .dash-user-dropdown-item:hover {
  background: rgba(255,0,0,0.04);
}

/* =============================================================
   THEME TOGGLE BUTTON
   ============================================================= */
.theme-toggle {
  background: none;
  border: 1px solid var(--border-color, #334155);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--text-secondary, #94a3b8);
  display: flex;
  align-items: center;
  transition: all 0.2s;
}
.theme-toggle:hover { background: var(--hover-bg, #334155); }
[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-dark { display: block; }
[data-theme="light"] .theme-icon-light { display: block; }
[data-theme="light"] .theme-icon-dark { display: none; }

/* =============================================================
   SMOOTH TRANSITIONS (UI Polish)
   ============================================================= */
/* tool-panel uses display:none/block toggle (line 5095). Animation removed to avoid
   display vs position:absolute conflict that caused panels to stack and overlap. */
.tool-panel.active { opacity: 1; }
.dash-sidebar { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.dash-sidebar-overlay { transition: opacity 0.3s ease; }
.tool-extra { transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease; max-height: 0; opacity: 0; overflow: hidden; margin: 0; }
.tool-extra.visible { max-height: 800px; opacity: 1; margin-top: 16px; }
.dash-btn-primary { transition: all 0.2s ease; }
.dash-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
.dash-btn-primary:active { transform: translateY(0); }
.tool-tab { transition: all 0.2s ease; }
.dash-copy-btn-prominent { transition: all 0.2s ease; }
.dash-copy-btn-prominent:hover { transform: translateY(-1px); }

/* =============================================================
   SKELETON LOADER
   ============================================================= */
.skeleton-loader { padding: 16px; }
.skeleton-line { height: 14px; background: linear-gradient(90deg, var(--border-color, #334155) 25%, var(--hover-bg, #475569) 50%, var(--border-color, #334155) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; border-radius: 4px; margin-bottom: 10px; }
.skeleton-line:nth-child(1) { width: 30%; height: 18px; }
.skeleton-line:nth-child(2) { width: 90%; }
.skeleton-line:nth-child(3) { width: 75%; }
.skeleton-line:nth-child(4) { width: 85%; }
.skeleton-line:nth-child(5) { width: 40%; height: 18px; margin-top: 16px; }
.skeleton-line:nth-child(6) { width: 95%; }
.skeleton-line:nth-child(7) { width: 60%; }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* =============================================================
   EMPTY STATE
   ============================================================= */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; }
.empty-state svg { opacity: 0.5; }
.empty-state p { font-size: 14px; line-height: 1.6; }

/* === AI CHAT ASSISTANT === */
.chat-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent, #2563eb);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37,99,235,0.4);
  z-index: 1000;
  transition: all 0.3s ease;
}
.chat-fab:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37,99,235,0.5); }
.chat-fab.active { background: var(--text-secondary, #64748b); }

.chat-panel {
  position: fixed;
  bottom: 88px;
  right: 24px;
  width: 380px;
  max-height: 500px;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-color, #334155);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: chat-slide-up 0.3s ease;
}
@keyframes chat-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color, #334155);
  background: var(--bg-sidebar, #0c1220);
}
.chat-panel-title { font-weight: 600; font-size: 14px; color: var(--text-primary, #f1f5f9); }
.chat-panel-close { background: none; border: none; color: var(--text-secondary, #94a3b8); font-size: 20px; cursor: pointer; padding: 0 4px; }
.chat-panel-close:hover { color: var(--text-primary, #f1f5f9); }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  max-height: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-msg { display: flex; }
.chat-msg-user { justify-content: flex-end; }
.chat-msg-ai { justify-content: flex-start; }
.chat-msg-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary, #f1f5f9);
}
.chat-msg-user .chat-msg-bubble {
  background: var(--accent, #2563eb);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg-ai .chat-msg-bubble {
  background: var(--hover-bg, #334155);
  border-bottom-left-radius: 4px;
}
.chat-msg-typing .chat-msg-bubble::after {
  content: '...';
  animation: typing-dots 1.2s infinite;
}
@keyframes typing-dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

.chat-input-area {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color, #334155);
  background: var(--bg-sidebar, #0c1220);
}
.chat-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border-color, #334155);
  border-radius: 10px;
  background: var(--bg-input, #1e293b);
  color: var(--text-primary, #f1f5f9);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.chat-input:focus { border-color: var(--accent, #2563eb); }
.chat-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent, #2563eb);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.chat-send-btn:hover { background: var(--accent-light, #2563eb); }
.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 480px) {
  .chat-panel { width: calc(100vw - 32px); right: 16px; bottom: 80px; }
  .chat-fab { bottom: 16px; right: 16px; }
}

/* === EVIDENCE LINKING === */
.soap-field-row { position: relative; }
.evidence-link {
  display: inline-block;
  width: 16px;
  height: 16px;
  font-size: 11px;
  color: var(--accent, #2563eb);
  cursor: help;
  vertical-align: middle;
  margin-left: 4px;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.evidence-link:hover { opacity: 1; }
.evidence-tooltip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  background: var(--bg-sidebar, #0c1220);
  border: 1px solid var(--accent, #2563eb);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text-primary, #f1f5f9);
  max-width: 360px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  line-height: 1.5;
  display: none;
  animation: evidence-fade 0.2s ease;
}
@keyframes evidence-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.evidence-tooltip.visible { display: block; }
.evidence-tooltip-label { font-weight: 600; color: var(--accent, #2563eb); font-size: 11px; margin-bottom: 4px; }
.evidence-highlight { background: rgba(37,99,235,0.15); border-radius: 2px; padding: 0 2px; }

/* === TARDOC/TARMED CHIPS === */
.tardoc-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 0;
}
.tardoc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #6366f1;
  background: rgba(99,102,241,0.1);
  color: #6366f1;
}
.tardoc-chip.active {
  background: #6366f1;
  color: #0f172a;
}
.tardoc-chip:hover { transform: translateY(-1px); }
.tardoc-section-label {
  font-size: 11px;
  font-weight: 600;
  color: #6366f1;
  margin-top: 12px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* === LAYOUT MIGRATION BRIDGE === */
.blitz-layout .dash-app { display: contents; }
.blitz-layout .tool-tabs { display: none; }
.blitz-layout .tool-flow { max-width: none; padding: 0; }
.blitz-layout .tool-topbar { display: none; }
.blitz-layout .dash-sidebar { display: none; }
.blitz-layout .dash-sidebar-overlay { display: none; }

/* === SOAP DOCUMENT VIEW === */
.blitz-doc-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  margin-bottom: 2px;
  outline: none;
  border-bottom: 1px solid transparent;
  cursor: text;
  transition: border-color 0.2s;
}
.blitz-doc-title:hover { border-bottom-color: #e2e8f0; }
.blitz-doc-title:focus { border-bottom-color: #2563eb; }
.blitz-doc-title:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
}
.blitz-doc-created {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 12px;
}

.blitz-doc-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.blitz-doc-tag {
  font-size: 10px;
  padding: 2px 8px;
  background: var(--bg-tag, #1e3a5f);
  color: var(--text-tag, #60a5fa);
  border-radius: 12px;
}

.blitz-soap-section {
  margin-bottom: 16px;
}

.blitz-soap-label {
  color: var(--primary, #2563eb);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  cursor: pointer;
  user-select: none;
}

.blitz-soap-label:hover { opacity: 0.8; }

.blitz-soap-label.selected {
  background: rgba(59,130,246,0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.blitz-soap-content {
  color: var(--text-primary, #cbd5e1);
  font-size: 14px;
  line-height: 1.7;
  padding: 10px 14px;
  background: var(--bg-surface, #1e293b);
  border-radius: 8px;
  border-left: 3px solid var(--primary, #2563eb);
  min-height: 2em;
  outline: none;
  white-space: pre-wrap;
}

.blitz-soap-content:focus {
  border-left-color: #60a5fa;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.3) inset;
}

.blitz-soap-content::selection,
.blitz-soap-content *::selection {
  background: rgba(45, 212, 191, 0.32);
  color: inherit;
}

.blitz-soap-content.blitz-edit-surface {
  border-left-color: #14b8a6;
  box-shadow:
    0 0 0 1px rgba(45, 212, 191, 0.28) inset,
    0 14px 30px rgba(20, 184, 166, 0.12);
}

.blitz-edit-accepted {
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.34), rgba(20, 184, 166, 0.22));
  color: inherit;
  border-radius: 8px;
  padding: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.blitz-icd-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-surface, #1e293b);
  border-radius: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.blitz-icd-badge {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--bg-app, #0f172a);
  color: var(--text-tag, #60a5fa);
  border-radius: 4px;
  cursor: pointer;
}

.blitz-icd-badge:hover { opacity: 0.8; }

.blitz-diff-add {
  background: rgba(45, 212, 191, 0.24);
  color: #99f6e4;
  border-radius: 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.blitz-diff-remove { background: rgba(239, 68, 68, 0.2); text-decoration: line-through; }

.blitz-diff-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 6px;
}

.blitz-diff-accept, .blitz-diff-undo {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.blitz-diff-accept {
  background: var(--primary, #2563eb); color: #fff;
  display: inline-flex; align-items: center; gap: 4px;
}
.blitz-diff-undo {
  background: var(--bg-surface, #1e293b);
  color: var(--text-secondary, #94a3b8);
  border: 1px solid var(--border, #334155);
  display: inline-flex; align-items: center; gap: 4px;
}

/* -- Diff summary banner (Mena Health style) -- */
.blitz-diff-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-radius: 8px; margin-bottom: 8px;
  background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(45,212,191,0.10));
  border: 1px solid rgba(59,130,246,0.25);
  font-size: 13px; color: var(--text-primary, #e2e8f0);
  animation: diffBannerIn 0.25s ease;
}
@keyframes diffBannerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.blitz-diff-banner-left { display: flex; align-items: center; gap: 8px; }
.blitz-diff-banner-left svg { color: var(--primary, #2563eb); flex-shrink: 0; }
.blitz-diff-banner-text strong { color: var(--primary, #2563eb); }
.blitz-diff-banner-actions { display: flex; gap: 6px; }
.blitz-diff-banner-accept-all, .blitz-diff-banner-reject-all {
  font-size: 12px; padding: 4px 10px; border-radius: 6px; border: none; cursor: pointer;
}
.blitz-diff-banner-accept-all { background: var(--primary, #2563eb); color: #fff; }
.blitz-diff-banner-reject-all {
  background: transparent; color: var(--text-secondary, #94a3b8);
  border: 1px solid var(--border, #334155);
}
.blitz-diff-banner-reject-all:hover { background: rgba(239,68,68,0.1); color: #f87171; }

/* -- Field-level accept/reject badges -- */
.blitz-field-badge {
  display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px;
  border-radius: 4px; margin-left: 8px; vertical-align: middle;
  transition: opacity 0.4s ease;
}
.blitz-field-badge-accepted { background: rgba(45,212,191,0.2); color: #2dd4bf; }
.blitz-field-badge-rejected { background: rgba(239,68,68,0.15); color: #f87171; }
.blitz-field-badge.fading { opacity: 0; }

[data-theme="light"] .blitz-diff-banner {
  background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(45,212,191,0.06));
  border-color: rgba(59,130,246,0.18); color: #1e293b;
}
[data-theme="light"] .blitz-diff-banner-reject-all { color: #64748b; border-color: #e2e8f0; }
[data-theme="light"] .blitz-field-badge-accepted { background: rgba(16,185,129,0.15); color: #059669; }
[data-theme="light"] .blitz-field-badge-rejected { background: rgba(239,68,68,0.1); color: #dc2626; }

/* === FLOATING TOOLBAR === */
.blitz-float-toolbar {
  position: fixed;
  display: none;
  background: var(--bg-surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  padding: 4px;
  gap: 2px;
  z-index: var(--z-toolbar, 200);
  align-items: center;
  flex-wrap: wrap;
  max-width: 520px;
}

.blitz-float-toolbar.visible { display: flex; }

.blitz-float-btn {
  padding: 6px 8px;
  border: none;
  background: none;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.blitz-float-ai,
.blitz-float-evidence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
}

.blitz-float-btn:hover {
  background: var(--bg-hover, #334155);
  color: var(--text-primary, #e2e8f0);
}

.blitz-float-divider {
  width: 1px;
  height: 20px;
  background: var(--border, #334155);
  margin: 0 2px;
}

.blitz-float-ai-input {
  display: none;
  padding: 4px;
  border-top: 1px solid var(--border, #334155);
  width: 100%;
}

.blitz-float-ai-input.visible { display: flex; gap: 4px; }

.blitz-float-ai-input input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border, #334155);
  border-radius: 6px;
  background: var(--bg-app, #0f172a);
  color: var(--text-primary, #e2e8f0);
  font-size: 12px;
  outline: none;
}

/* === CHAT EDITOR BAR === */
.blitz-chat-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.blitz-chip {
  font-size: 11px;
  padding: 5px 12px;
  background: var(--bg-surface, #1e293b);
  color: var(--text-secondary, #94a3b8);
  border-radius: 16px;
  border: 1px solid var(--border, #334155);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.blitz-chip:hover {
  background: var(--bg-hover, #334155);
  color: var(--text-primary, #e2e8f0);
}

.blitz-chip.loading { opacity: 0.5; pointer-events: none; }

.blitz-chat-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.blitz-chat-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 320px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
}

.blitz-chat-mic {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0f766e;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.blitz-chat-input {
  flex: 1;
  padding: 12px 4px;
  background: transparent;
  border: none;
  color: #1e293b;
  font-size: 14px;
  outline: none;
}

.blitz-chat-input:focus { border-color: transparent; }

.blitz-chat-send {
  width: 36px;
  height: 36px;
  background: var(--primary, #2563eb);
  border-radius: 8px;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.blitz-chat-send:disabled { opacity: 0.4; cursor: not-allowed; }

.blitz-version-btn {
  background: none;
  border: 1px solid var(--border, #334155);
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--text-muted, #64748b);
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}

/* === CHAT HISTORY PANEL === */
.blitz-history-toggle {
  background: none;
  border: 1px solid var(--border, #334155);
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--text-muted, #64748b);
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.blitz-history-toggle:hover {
  background: var(--bg-hover, #334155);
  color: var(--text-primary, #e2e8f0);
}

.blitz-history-toggle.active {
  background: var(--primary, #2563eb);
  color: #fff;
  border-color: var(--primary, #2563eb);
}

.blitz-chat-history {
  max-height: 200px;
  overflow-y: auto;
  border-bottom: 1px solid var(--border, #334155);
  margin-bottom: 8px;
  padding-bottom: 4px;
}

.blitz-chat-history-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-left: 3px solid var(--border, #334155);
  border-radius: 0 4px 4px 0;
  background: var(--bg-surface, #1e293b);
  font-size: 12px;
  gap: 8px;
}

.chat-history-text {
  color: var(--text-primary, #e2e8f0);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-history-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.chat-status {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.chat-status.accepted {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}

.chat-status.undone {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

.chat-status.pending {
  color: var(--text-muted, #64748b);
  background: rgba(100, 116, 139, 0.12);
}

.chat-timestamp {
  color: var(--text-muted, #64748b);
  font-size: 10px;
  white-space: nowrap;
}

/* === CHAT OVERLAY DRAWER === */
.blitz-chat-overlay {
  position: absolute;
  top: 18px;
  right: 18px;
  bottom: 18px;
  width: min(420px, calc(100% - 36px));
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  transform: translateX(calc(100% + 32px));
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.28s ease;
  z-index: 25;
}

.blitz-chat-overlay.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.blitz-chat-overlay-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid #e2e8f0;
}

.blitz-chat-overlay-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 4px;
}

.blitz-chat-overlay-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.blitz-chat-overlay-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.blitz-chat-overlay-icon {
  width: 34px;
  height: 34px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 16px;
  cursor: pointer;
}

.blitz-chat-overlay-thread {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.blitz-chat-thread-row {
  display: flex;
}

.blitz-chat-thread-row.is-user {
  justify-content: flex-end;
}

.blitz-chat-thread-row.is-ai {
  justify-content: flex-start;
}

.blitz-chat-thread-bubble {
  max-width: 82%;
  padding: 12px 14px;
  border-radius: 18px;
  background: #e2e8f0;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.5;
}

.blitz-chat-thread-card {
  width: min(100%, 320px);
  padding: 14px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.blitz-chat-thread-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.blitz-chat-thread-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #dbeafe;
  color: #2563eb;
}

.blitz-chat-thread-badge.is-accepted {
  background: #dcfce7;
  color: #15803d;
}

.blitz-chat-thread-badge.is-undone {
  background: #e2e8f0;
  color: #475569;
}

.blitz-chat-thread-badge.is-error {
  background: #fee2e2;
  color: #b91c1c;
}

.blitz-chat-thread-undo {
  border: none;
  background: none;
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.blitz-chat-thread-card-body {
  font-size: 14px;
  line-height: 1.5;
  color: #0f172a;
}

.blitz-chat-thread-meta {
  margin-top: 10px;
  font-size: 12px;
  color: #64748b;
}

.blitz-chat-thread-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.blitz-chat-thread-tools button {
  border: none;
  background: none;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}

.blitz-chat-thread-tools button.active,
.blitz-chat-thread-tools button:hover {
  color: #0f172a;
}

.blitz-chat-overlay-composer {
  padding: 14px 18px 18px;
  border-top: 1px solid #e2e8f0;
}

.blitz-chat-composer-overlay {
  width: 100%;
}

@media (max-width: 768px) {
  .blitz-chat-overlay {
    top: auto;
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    height: min(78vh, 560px);
  }
}

/* === STREAMING SOAP === */
.blitz-soap-content.streaming {
  border-left-color: #22c55e;
}

.blitz-soap-content.streaming::after {
  content: '\258C';
  animation: blitz-blink 0.7s infinite;
  color: var(--primary, #2563eb);
  font-weight: 100;
}

@keyframes blitz-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.blitz-soap-section.streaming-done .blitz-soap-content {
  transition: border-left-color 0.3s ease;
}

/* === LIGHT THEME: SOAP DOC + TOOLBAR === */
[data-theme="light"] .blitz-soap-content {
  background: #f8fafc;
  color: #1e293b;
  border-left-color: #2563eb;
}

[data-theme="light"] .blitz-soap-content:focus {
  box-shadow: 0 0 0 1px rgba(59,130,246,0.2) inset;
}

[data-theme="light"] .blitz-doc-tag {
  background: #eff6ff;
  color: #2563eb;
}

[data-theme="light"] .blitz-icd-bar {
  background: #f8fafc;
}

[data-theme="light"] .blitz-icd-badge {
  background: #eff6ff;
  color: #2563eb;
}

[data-theme="light"] .blitz-float-toolbar {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

[data-theme="light"] .blitz-float-btn {
  color: #475569;
}

[data-theme="light"] .blitz-float-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

[data-theme="light"] .blitz-float-divider {
  background: #e2e8f0;
}

[data-theme="light"] .blitz-float-ai-input input {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #1e293b;
}

[data-theme="light"] .blitz-chip {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

[data-theme="light"] .blitz-chip:hover {
  background: #e2e8f0;
  color: #1e293b;
}

[data-theme="light"] .blitz-chat-input {
  background: transparent;
  color: #1e293b;
}

[data-theme="light"] .blitz-diff-undo {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}

[data-theme="light"] .blitz-history-toggle {
  border-color: #e2e8f0;
  color: #64748b;
}

[data-theme="light"] .blitz-history-toggle:hover {
  background: #e2e8f0;
  color: #1e293b;
}

[data-theme="light"] .blitz-chat-history {
  border-bottom-color: #e2e8f0;
}

[data-theme="light"] .chat-history-item {
  background: #f8fafc;
  border-left-color: #e2e8f0;
}

[data-theme="light"] .chat-history-text {
  color: #1e293b;
}

[data-theme="light"] .chat-timestamp {
  color: #94a3b8;
}

[data-theme="dark"] .blitz-chat-overlay {
  background: #0f172a;
  border-color: #1e293b;
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.55);
}

[data-theme="dark"] .blitz-chat-overlay-header,
[data-theme="dark"] .blitz-chat-overlay-composer {
  border-color: #1e293b;
}

[data-theme="dark"] .blitz-chat-overlay-title {
  color: #f8fafc;
}

[data-theme="dark"] .blitz-chat-overlay-icon {
  background: #111827;
  border-color: #334155;
  color: #cbd5e1;
}

[data-theme="dark"] .blitz-chat-thread-bubble {
  background: #334155;
  color: #f8fafc;
}

[data-theme="dark"] .blitz-chat-thread-card {
  background: #111827;
  border-color: #1e293b;
}

[data-theme="dark"] .blitz-chat-thread-card-body {
  color: #f8fafc;
}

[data-theme="dark"] .blitz-chat-thread-meta,
[data-theme="dark"] .blitz-chat-thread-tools button {
  color: #94a3b8;
}

[data-theme="dark"] .blitz-chat-thread-tools button.active,
[data-theme="dark"] .blitz-chat-thread-tools button:hover {
  color: #f8fafc;
}

/* === SHIMMER SKELETON === */
.blitz-skeleton {
  margin-bottom: 16px;
}

.blitz-skeleton-label {
  width: 80px;
  height: 12px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.blitz-skeleton-block {
  height: 60px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.blitz-skeleton-label,
.blitz-skeleton-block {
  background: linear-gradient(90deg, var(--bg-surface, #1e293b) 25%, var(--bg-hover, #334155) 50%, var(--bg-surface, #1e293b) 75%);
  background-size: 200% 100%;
  animation: blitz-shimmer 1.5s infinite;
}

[data-theme="light"] .blitz-skeleton-label,
[data-theme="light"] .blitz-skeleton-block {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: blitz-shimmer 1.5s infinite;
}

@keyframes blitz-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ================================================================
   COMPREHENSIVE DARK MODE OVERRIDE BLOCK
   tool.html always has data-theme="dark" — these rules override
   any hardcoded white/light colors remaining in the base styles.
   Add rules here instead of hunting per-class.
   ================================================================ */

/* --- Logo branding in dark sidebars --- */
[data-theme="dark"] .logo-blitz { color: #fff; }
[data-theme="dark"] .logo-doc  { color: #2563eb; }

/* --- Core layout background --- */
[data-theme="dark"] .dash-main {
  background: var(--bg-app);
}

/* --- Paste / Einfügen button --- */
[data-theme="dark"] .dash-paste-btn {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-secondary);
}
[data-theme="dark"] .dash-paste-btn:hover {
  background: var(--hover-bg);
  border-color: #2563eb;
  color: #60a5fa;
}

/* --- Quickstart bar --- */
[data-theme="dark"] .dash-quickstart {
  background: rgba(59,130,246,0.08);
  border-color: rgba(59,130,246,0.25);
}
[data-theme="dark"] .dash-quickstart-title { color: #94a3b8; }
[data-theme="dark"] .dash-quickstart-btn {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: #94a3b8;
}
[data-theme="dark"] .dash-quickstart-btn:hover {
  background: var(--hover-bg);
  border-color: #2563eb;
  color: #60a5fa;
}
[data-theme="dark"] .dash-quickstart-close { color: #64748b; }
[data-theme="dark"] .dash-quickstart-close:hover { color: #94a3b8; }

/* --- Mic button --- */
[data-theme="dark"] .dash-mic-btn {
  background: rgba(255,255,255,0.08);
  color: #64748b;
}
[data-theme="dark"] .dash-mic-btn:hover {
  background: rgba(59,130,246,0.15);
  color: #60a5fa;
}

/* --- Inputs, textareas, selects --- */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-secondary) !important;
}

/* --- History filters (pill chips) --- */
[data-theme="dark"] .dash-history-filter {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-secondary);
}
[data-theme="dark"] .dash-history-filter:hover {
  border-color: #2563eb;
  color: #60a5fa;
  background: rgba(59,130,246,0.08);
}
[data-theme="dark"] .dash-history-filter.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

/* --- History items --- */
[data-theme="dark"] .dash-history-item {
  background: var(--bg-card);
  border-color: var(--border-color);
}
[data-theme="dark"] .dash-history-item:hover {
  background: var(--hover-bg);
  border-color: #475569;
}
[data-theme="dark"] .dash-history-item-icon {
  background: rgba(255,255,255,0.06);
}
[data-theme="dark"] .dash-history-date {
  color: var(--text-secondary);
}
[data-theme="dark"] .dash-history-item-title {
  color: var(--text-primary);
}
[data-theme="dark"] .dash-history-item-preview {
  color: var(--text-secondary);
}

/* --- ICD Panel --- */
[data-theme="dark"] .dash-icd-panel {
  background: var(--bg-card);
  border-color: var(--border-color);
}
[data-theme="dark"] .dash-icd-panel-header {
  background: var(--bg-card);
  border-color: var(--border-color);
}
[data-theme="dark"] .dash-icd-panel-toggle { background: var(--bg-card); color: var(--text-secondary); }
[data-theme="dark"] .dash-icd-panel-toggle:hover { background: var(--hover-bg); }
[data-theme="dark"] .dash-icd-row {
  background: var(--bg-card);
  border-color: var(--border-color);
}
[data-theme="dark"] .dash-icd-row:hover { background: var(--hover-bg); }
[data-theme="dark"] .dash-icd-row-relevance.high { background: rgba(16,185,129,0.15); color: #34d399; }
[data-theme="dark"] .dash-icd-row-relevance.medium { background: rgba(59,130,246,0.12); color: #60a5fa; }
[data-theme="dark"] .dash-icd-row-relevance.low { background: rgba(100,116,139,0.15); color: #94a3b8; }
[data-theme="dark"] .dash-icd-search-input { background: var(--bg-input); color: var(--text-primary); border-color: var(--border-color); }

/* --- Modals & overlays --- */
[data-theme="dark"] .dash-modal-content,
[data-theme="dark"] .dash-modal-box,
[data-theme="dark"] .dash-modal-inner {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}
[data-theme="dark"] .dash-modal-header {
  background: var(--bg-card);
  border-color: var(--border-color);
}
[data-theme="dark"] .dash-modal-footer {
  background: var(--bg-card);
  border-color: var(--border-color);
}

/* --- Cards, panels, sections --- */
[data-theme="dark"] .dash-card,
[data-theme="dark"] .dash-panel,
[data-theme="dark"] .tool-card,
[data-theme="dark"] .tool-panel,
[data-theme="dark"] .blitz-card {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* --- Buttons (non-primary) --- */
[data-theme="dark"] .dash-btn-outline,
[data-theme="dark"] .tool-btn-secondary,
[data-theme="dark"] button.secondary {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}
[data-theme="dark"] .dash-btn-outline:hover,
[data-theme="dark"] .tool-btn-secondary:hover { background: var(--hover-bg); }

/* --- Document type buttons --- */
[data-theme="dark"] .tool-doc-type-btn {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-secondary);
}
[data-theme="dark"] .tool-doc-type-btn:hover { background: var(--hover-bg); color: var(--text-primary); }
[data-theme="dark"] .tool-doc-type-btn.active {
  background: rgba(37,99,235,0.2);
  border-color: #2563eb;
  color: #60a5fa;
}

/* --- Normalbefund entries --- */
[data-theme="dark"] .nb-entry-text {
  background: var(--bg-input);
  border-color: var(--border-color);
  color: var(--text-primary);
}
[data-theme="dark"] .nb-entry-label { color: var(--text-secondary); }

/* --- Vorlage / template cards --- */
[data-theme="dark"] .vorlage-card {
  background: var(--bg-card);
  border-color: var(--border-color);
}
[data-theme="dark"] .vorlage-card-actions button {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-secondary);
}
[data-theme="dark"] .vorlage-card-actions button:hover { background: var(--hover-bg); }

/* --- Address book --- */
[data-theme="dark"] .addr-card {
  background: var(--bg-card);
  border-color: var(--border-color);
}
[data-theme="dark"] .addr-card-name { color: var(--text-primary); }
[data-theme="dark"] .addr-card-meta { color: var(--text-secondary); }
[data-theme="dark"] .addr-card-actions button {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-secondary);
}
[data-theme="dark"] .addr-card-actions button:hover { background: var(--hover-bg); }
[data-theme="dark"] .dest-dropdown {
  background: var(--bg-card);
  border-color: var(--border-color);
}
[data-theme="dark"] .dest-dropdown-item:hover { background: var(--hover-bg); }

/* --- Transcript chat view --- */
[data-theme="dark"] .transcript-chat-view { background: var(--bg-app); }
[data-theme="dark"] .tc-msg-doctor .tc-bubble { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); }

/* --- SOAP area extra --- */
[data-theme="dark"] .soap-section-title { color: var(--text-secondary); }
[data-theme="dark"] .soap-field-label,
[data-theme="dark"] .soap-label { color: var(--text-secondary); }
[data-theme="dark"] .dash-result .soap-label {
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Dropdown menus --- */
[data-theme="dark"] .dash-user-dropdown {
  background: var(--bg-card);
  border-color: var(--border-color);
}
[data-theme="dark"] .dash-user-dropdown-item {
  color: var(--text-primary);
}
[data-theme="dark"] .dash-user-dropdown-item:hover { background: var(--hover-bg); }
[data-theme="dark"] .dash-user-dropdown-divider { border-color: var(--border-color); }

/* --- Scrollbars (webkit) --- */
[data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-app); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* --- Form grid labels --- */
[data-theme="dark"] .dash-form-label { color: var(--text-secondary); }
[data-theme="dark"] .dash-form-group { color: var(--text-primary); }

/* --- Select-sm (specialty, language) --- */
[data-theme="dark"] .dash-select-sm {
  background: var(--bg-input);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* --- Textbaustein items (backup override) --- */
[data-theme="dark"] .tb-item {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}
[data-theme="dark"] .tb-item-title { color: var(--text-primary); }
[data-theme="dark"] .tb-item-preview { color: var(--text-secondary); }

/* --- Settings sections --- */
[data-theme="dark"] .settings-form-card {
  background: var(--bg-card);
  border-color: var(--border-color);
}
[data-theme="dark"] .settings-form-card-title { color: var(--text-primary); }
[data-theme="dark"] .settings-section-desc { color: var(--text-secondary); }

/* --- Misc inputs in popups/panels --- */
[data-theme="dark"] .dash-soap-ai-edit-input,
[data-theme="dark"] .soap-ai-edit-input {
  background: var(--bg-input);
  border-color: var(--border-color);
  color: var(--text-primary);
}
[data-theme="dark"] .dash-soap-ai-edit-popover,
[data-theme="dark"] .soap-ai-edit-popover {
  background: var(--bg-card);
  border-color: var(--border-color);
}

/* --- Refine bar --- */
[data-theme="dark"] .blitz-refine-bar,
[data-theme="dark"] .blitz-float-ai-input input {
  background: var(--bg-input);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .blitz-chat-input {
  background: transparent;
  color: var(--text-primary, #e2e8f0);
}

[data-theme="dark"] .blitz-chat-mic {
  background: rgba(59, 130, 246, 0.1);
  color: #7dd3fc;
}

/* --- Eval / test sections (hidden in prod) --- */
[data-theme="dark"] .dash-eval-card { background: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .dash-eval-score-bar { background: var(--hover-bg); }



/* Transcript Player */
.tp-group { margin-bottom: 12px; }
.tp-doctor .tp-speaker { color: #2563eb; font-weight: 600; font-size: 12px; margin-bottom: 4px; }
.tp-patient .tp-speaker { color: #10b981; font-weight: 600; font-size: 12px; margin-bottom: 4px; }
.tp-bubble { font-size: 14px; line-height: 1.7; color: #1e293b; }
.tp-word { cursor: pointer; border-radius: 2px; transition: background 0.15s; }
.tp-word:hover { background: rgba(59,130,246,0.12); }
.tp-word.active { background: rgba(59,130,246,0.25); color: #1e40af; }
.tp-waveform { display:flex; align-items:center; gap:12px; padding:12px 16px; background:#f1f5f9; border-radius:12px; margin-bottom:12px; }
.tp-play-btn { width:40px; height:40px; border-radius:50%; background:#2563eb; color:#fff; border:none; font-size:16px; cursor:pointer; flex-shrink:0; }
.tp-play-btn:hover { background:#2563eb; }
.tp-bars { display:flex; align-items:center; gap:2px; flex:1; height:35px; }
.tp-bar { width:3px; background:#94a3b8; border-radius:2px; transition:background 0.2s; }


/* V0 design styles moved to v0-soap.css */